diff --git a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html index f2bf7b2..9e72199 100644 --- a/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html +++ b/apps/mina-sidor-fa/src/app/pages/administration/pages/employee-form/edit-employee-form/edit-employee-form.component.html @@ -55,6 +55,7 @@

{ - this.focusLinkElement('.error-list__validation-error-link a'); + this.focusElement('.error-list__validation-error-link a'); }); return; @@ -274,7 +275,7 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges { return validationErrorLinks; } - focusLinkElement(selector: string): void { + focusElement(selector: string): void { let errorListElement: HTMLElement = null; let linkElement: HTMLLinkElement = null; @@ -302,9 +303,21 @@ export class EditEmployeeFormComponent implements OnInit, OnChanges { this.utforandeVerksamheterFormControl.value ); + if (hasSelectedAllLeafNodes === this.selectAllUtforandeVerksamheterFormControl.value) { + return; + } + this.editEmployeeFormGroup.patchValue( Object.fromEntries([[this.selectAllUtforandeVerksamheterFormControlName, hasSelectedAllLeafNodes]]) ); + + if (!hasSelectedAllLeafNodes) { + return; + } + + setTimeout(() => { + this.focusElement(`#${this.selectAllUtforandeVerksamheterElementId}`); + }); } emitCloseError(): void { diff --git a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts index 227df83..256e889 100644 --- a/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts +++ b/apps/mina-sidor-fa/src/app/pages/avrop/avrop.component.ts @@ -1,5 +1,5 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'; -import { Avrop, AvropCompact, AvropCompactData } from '@msfa-models/avrop.model'; +import { AvropCompact, AvropCompactData } from '@msfa-models/avrop.model'; import { Handledare } from '@msfa-models/handledare.model'; import { AvropService } from '@msfa-services/avrop.service'; import { Observable } from 'rxjs'; diff --git a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts index e88fa12..b590b6a 100644 --- a/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts +++ b/apps/mina-sidor-fa/src/app/pages/deltagare/pages/deltagare-card/deltagare-card.component.ts @@ -69,10 +69,18 @@ export class DeltagareCardComponent { switch (reportType) { case 'planering': - this.reportsFormControl.valid ? void this.router.navigate(['/deltagare/planering', deltagareId]) : null; + if (this.reportsFormControl.valid) { + this.router.navigate(['/deltagare/planering', deltagareId]).catch(error => { + console.error(error); + }); + } break; case 'avvikelse': - this.reportsFormControl.valid ? void this.router.navigate(['/deltagare/rapportera', deltagareId]) : null; + if (this.reportsFormControl.valid) { + this.router.navigate(['/deltagare/rapportera', deltagareId]).catch(error => { + console.error(error); + }); + } break; default: return; diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.html b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.html index 49b38fd..00d98b0 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.html +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.html @@ -29,7 +29,7 @@ (afOnKeyup)="onFilterTextChanged($event, treeNodeModel)" >
- Filtrera valbara alternativ där deras namn måste innehålla den angivna texten. + Filtrera valbara alternativ i listan nedan genom att ange en text som återfinns i deras namn.
diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.scss b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.scss index 19a12ff..da46e3b 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.scss +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.scss @@ -133,15 +133,6 @@ &--toggle-all { margin: 1.25rem $digi--layout--gutter; } - - ::ng-deep { - .digi-form-checkbox__label { - display: block; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - } } &__child-node-expansion-panel { diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.ts index d28e695..9793879 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/expanded-tree-node/expanded-tree-node.component.ts @@ -160,10 +160,6 @@ export class ExpandedTreeNodeComponent extends UnsubscribeDirective implements O return this.treeNodesSelectorService.hasSelectedLeafNodeDescendant(treeNode); } - getAriaLabelTextForExpansionButton(parentTreeNode: TreeNodeModel, treeNode: TreeNodeModel): string { - return this.treeNodesSelectorService.getAriaLabelTextForExpansionButton(parentTreeNode, treeNode); - } - getAriaLabelForToggleAllButton(treeNode: TreeNodeModel): string { return this.treeNodesSelectorService.getAriaLabelForToggleAllButton(treeNode); } diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.html b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.html index e029298..21e05bd 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.html +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.html @@ -1,5 +1,5 @@ - +

{{headingText}}

@@ -20,6 +20,7 @@
{{confirmationButtonText}} diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss index 2b650b7..1156d17 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.scss @@ -7,7 +7,7 @@ .tree-nodes-selector-panel { position: relative; background-color: var(--digi--ui--color--background); - min-width: rem(710); + min-width: rem(760); box-shadow: $msfa__shadow; border-radius: var(--digi--ui--border--radius); diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.ts index 0f07e3d..922011a 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector-panel/tree-nodes-selector-panel.component.ts @@ -18,6 +18,7 @@ export class TreeNodesSelectorPanelComponent implements OnInit { @Input() confirmationButtonText = 'Spara'; @Output() selectedChangesConfirmed = new EventEmitter(); @Output() closePanelRequested = new EventEmitter(); + @Output() focusControlToggleBtnRequested = new EventEmitter(); readonly ButtonSize = ButtonSize; @@ -51,6 +52,11 @@ export class TreeNodesSelectorPanelComponent implements OnInit { this.closePanelRequested.emit(); } + closePanelAndFocusControlToggleBtn(): void { + this.closePanel(); + this.focusControlToggleBtnRequested.emit(); + } + hasSelectedDescendant(treeNode: TreeNodeModel): boolean { return this.treeNodesSelectorService.hasSelectedLeafNodeDescendant(treeNode); } diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html index ab00493..d8fb969 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.html @@ -1,11 +1,12 @@
-
+
diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.ts index 87d9d22..3686f35 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/components/tree-nodes-selector/tree-nodes-selector.component.ts @@ -13,6 +13,7 @@ import { import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { uuid } from '@msfa-utils/uuid'; import { TreeNode, TreeNodeModel, TreeNodesSelectorService } from '../../services/tree-nodes-selector.service'; +import { TreeNodesSelectorPanelComponent } from '../tree-nodes-selector-panel/tree-nodes-selector-panel.component'; interface PropagateChangeFn { (_: unknown): void; @@ -45,6 +46,8 @@ export class TreeNodesSelectorComponent implements ControlValueAccessor { @Output() selectedTreeNodesChanged = new EventEmitter(); @ViewChild('togglePanelBtn') togglePanelBtn: ElementRef; + @ViewChild(TreeNodesSelectorPanelComponent) + private treeNodesSelectorPanel: TreeNodesSelectorPanelComponent; rootNode: TreeNodeModel | null = null; displayPanel = false; @@ -91,7 +94,22 @@ export class TreeNodesSelectorComponent implements ControlValueAccessor { this.displayPanel = false; } + onClickOutsidePanel(): void { + if (!this.treeNodesSelectorPanel) { + this.closePanel(); + return; + } + + this.treeNodesSelectorPanel.closePanel(); + } + togglePanel(): void { this.displayPanel = !this.displayPanel; } + + focusControlToggleBtn(): void { + const togglePanelBtnElement = this.togglePanelBtn.nativeElement as HTMLElement; + + togglePanelBtnElement.focus(); + } } diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.spec.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.spec.ts new file mode 100644 index 0000000..c360906 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.spec.ts @@ -0,0 +1,9 @@ +import { TreeNodesSelectorService } from '../services/tree-nodes-selector.service'; +import { AriaLabelTextForExpansionBtnPipe } from './aria-label-text-for-expansion-btn.pipe'; + +describe('AriaLabelTextForExpansionBtnPipe', () => { + it('create an instance', () => { + const pipe = new AriaLabelTextForExpansionBtnPipe(new TreeNodesSelectorService()); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.ts new file mode 100644 index 0000000..d73be46 --- /dev/null +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/pipes/aria-label-text-for-expansion-btn.pipe.ts @@ -0,0 +1,17 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { TreeNodeModel, TreeNodesSelectorService } from '../services/tree-nodes-selector.service'; + +@Pipe({ + name: 'ariaLabelTextForExpansionBtn', +}) +export class AriaLabelTextForExpansionBtnPipe implements PipeTransform { + constructor(private treeNodesSelectorService: TreeNodesSelectorService) {} + + transform(treeNode: TreeNodeModel, parentTreeNode: TreeNodeModel, expandedChildUuid: string): string { + return this.treeNodesSelectorService.getAriaLabelTextForExpansionButton( + parentTreeNode, + treeNode, + expandedChildUuid + ); + } +} diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/services/tree-nodes-selector.service.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/services/tree-nodes-selector.service.ts index a093412..64ece57 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/services/tree-nodes-selector.service.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/services/tree-nodes-selector.service.ts @@ -77,10 +77,19 @@ export class TreeNodesSelectorService { ); } - getAriaLabelTextForExpansionButton(parentTreeNode: TreeNodeModel, treeNode: TreeNodeModel): string { - const isActiveNode = parentTreeNode && treeNode ? parentTreeNode.expandedChildUuid === treeNode.uuid : false; + /* + Taking expandedChildUuid as a seperate param despite being a property of the parent tree node + because there is no change detection for properties within objects.*/ + getAriaLabelTextForExpansionButton( + parentTreeNode: TreeNodeModel, + treeNode: TreeNodeModel, + expandedChildUuid: string + ): string { + const isActiveNode = parentTreeNode && treeNode ? expandedChildUuid === treeNode.uuid : false; - return `${isActiveNode ? 'Döljer' : 'Visar'} ${treeNode.grandChildrenItemType} för ${treeNode.label}`; + return `${isActiveNode ? 'Döljer' : 'Visar'} ${ + parentTreeNode.grandChildrenItemType ? this.getCleanedText(parentTreeNode.grandChildrenItemType) : 'innehåll' + } för ${treeNode.label}`; } hasChildLeafNodes(node: TreeNode): boolean { diff --git a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/tree-nodes-selector.module.ts b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/tree-nodes-selector.module.ts index 54920ff..9f9ff63 100644 --- a/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/tree-nodes-selector.module.ts +++ b/apps/mina-sidor-fa/src/app/shared/components/tree-nodes-selector/tree-nodes-selector.module.ts @@ -4,9 +4,10 @@ import { TreeNodesSelectorPanelComponent } from './components/tree-nodes-selecto import { TreeNodesSelectorComponent } from './components/tree-nodes-selector/tree-nodes-selector.component'; import { ExpandedTreeNodeComponent } from './components/expanded-tree-node/expanded-tree-node.component'; import { DigiNgTypographyDynamicHeadingModule } from '@af/digi-ng/_typography/typography-dynamic-heading'; +import { AriaLabelTextForExpansionBtnPipe } from './pipes/aria-label-text-for-expansion-btn.pipe'; @NgModule({ - declarations: [TreeNodesSelectorComponent, TreeNodesSelectorPanelComponent, ExpandedTreeNodeComponent], + declarations: [TreeNodesSelectorComponent, TreeNodesSelectorPanelComponent, ExpandedTreeNodeComponent, AriaLabelTextForExpansionBtnPipe], imports: [CommonModule, DigiNgTypographyDynamicHeadingModule], schemas: [CUSTOM_ELEMENTS_SCHEMA], exports: [TreeNodesSelectorComponent],