@dsivd/prestations-ng 14.5.23-beta4 → 14.5.23-beta7

package/fesm2015/dsivd-prestations-ng.js

@@ -1448,9 +1448,8 @@ const DEFAULT_DICTIONARY = {
     'foehn-status-progress-bar.step3': 'Confirmation',
     'foehn-status-progress-bar.step3.srOnly': 'Etape 3 sur 3, Confirmation, demande transmise',
     'foehn-multiselect-autocomplete.selected.delete': 'Supprimer {elementLabel}',
-    'foehn-multiselect-autocomplete.selected.screen-reader.default-value': 'Élément sélectionné par défaut non supprimable :',
-    'foehn-multiselect-autocomplete.selected.screen-reader.selected-value': 'Élément sélectionné:',
-    'foehn-multiselect-autocomplete.list-of-selected-items': 'Liste des éléments sélectionnés:',
+    'foehn-multiselect-autocomplete.sr-announcement.deleted': '{elementLabel} a été supprimé, ',
+    'foehn-multiselect-autocomplete.sr-announcement.added': '{elementLabel} a été ajouté, ',
     'foehn-multiselect-autocomplete.autocomplete.empty-message': 'Tous les éléments de la liste de proposition ont déjà été ajoutés.',
     'foehn-multiselect-autocomplete.autocomplete.screen-reader.label': 'Sélectionner un élément dans la liste de recherche' +
         ' ci-dessous pour l\'ajouter à votre sélection.'
@@ -7819,7 +7818,8 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
         super(ngZone);
         this.dictionaryService = dictionaryService;
         this.showEmptyListMessage = false;
-        this.keyboardNavigationAllowed = false;
+        this.srAnnouncements = '';
+        this.SR_ANNOUNCEMENT_CLEAR_TIMEOUT_INTERVAL_MS = 2000;
     }
     set defaultElementValues(items) {
         this.defaultElementValues_ = [...items];
@@ -7833,11 +7833,6 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
     set defaultElementValue(item) {
         this.defaultElementValues = [item];
     }
-    handleKeyboardDownEvent(event) {
-        if (this.keyboardNavigationAllowed) {
-            this.onKeyDownSelectedInner(event);
-        }
-    }
     updateMultiselectAutocomplete() {
         const validValue = this.getValidValue();
         if (typeof validValue !== 'undefined') {
@@ -7861,6 +7856,7 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
                 this.updateMultiselectAutocomplete();
                 this.handleUserInput();
                 this.manageSuggestionListAndFocusAfterAddingAnItem();
+                this.manageScreenReaderAnnouncement(item, false);
             }
         }
     }
@@ -7870,6 +7866,7 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
             this.model.splice(index, 1);
             this.triggerUserInput(this.model);
             this.manageSuggestionListAndFocusAfterRemovingAnItem();
+            this.manageScreenReaderAnnouncement(item, true);
         }
     }
     trackByFn(index) {
@@ -7880,28 +7877,8 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
         const elem = this.findElementByModelItem(value);
         return super.getLabel(elem);
     }
-    getSelectedElementTabIndex(index) {
-        let firstIndexFocusable = 0;
-        if (!!this.defaultElementValues) {
-            firstIndexFocusable = this.model.findIndex((selected) => !this.defaultElementValues.includes(selected));
-        }
-        if (index !== firstIndexFocusable) {
-            return -1;
-        }
-        return 0;
-    }
-    isSelectedItemFocusable(index) {
-        return !this.disabled && !!this.defaultElementValues && this.defaultElementValues.includes(this.model[index]);
-    }
     canBeDeleted(index) {
-        return !this.defaultElementValues || !this.defaultElementValues.includes(this.model[index]);
-    }
-    onSelectedItemsFocusin() {
-        this.keyboardNavigationAllowed = true;
-        this.currentFocusedElem = document.activeElement;
-    }
-    onSelectedItemsFocusout() {
-        this.keyboardNavigationAllowed = false;
+        return !this.disabled && (!this.defaultElementValues || !this.defaultElementValues.includes(this.model[index]));
     }
     onAutocompleteElementsLoaded(elements) {
         // Need to wait for childView to be loaded
@@ -7914,12 +7891,12 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
             }
         });
     }
-    getSelectedListAriaLabel() {
-        return `${this.label}: ${this.dictionaryService.getKeySync('foehn-multiselect-autocomplete.list-of-selected-items')}`;
+    getDeleteButtonAriaLabel(element) {
+        return `${this.dictionaryService.getKeySync('foehn-multiselect-autocomplete.selected.delete', { elementLabel: this.getLabel(element) })}`;
     }
     findElementByModelItem(item) {
         if (!!this.elements && !!this.elements.length) {
-            const itemValue = typeof item === 'string' ? item : this.getValue(item);
+            const itemValue = typeof item !== 'object' ? item : this.getValue(item);
             const elem = this.elements.find((element) => this.getValue(element) === itemValue);
             if (!!elem) {
                 return elem;
@@ -7936,55 +7913,6 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
         }
         return this.model;
     }
-    getFirstDeleteButtonToFocus() {
-        const closeButtonsElemRefArray = [...this.closeButtonsElemRef.toArray()];
-        if (!!closeButtonsElemRefArray.length) {
-            return closeButtonsElemRefArray[0].nativeElement;
-        }
-        return null;
-    }
-    navigateSelectedList(offset) {
-        if (!this.disabled) {
-            const closeButtonsElemRefArray = this.getDefaultSelectedElements().concat([...this.closeButtonsElemRef.toArray()]);
-            if (!!closeButtonsElemRefArray.length) {
-                const focusIndex = closeButtonsElemRefArray.findIndex(value => this.currentFocusedElem === value.nativeElement);
-                let newIndex = focusIndex + offset;
-                if (newIndex >= closeButtonsElemRefArray.length) {
-                    newIndex = 0;
-                }
-                if (newIndex < 0) {
-                    newIndex = closeButtonsElemRefArray.length - 1;
-                }
-                const elemRef = closeButtonsElemRefArray[newIndex];
-                if (!!elemRef) {
-                    elemRef.nativeElement.focus();
-                }
-            }
-        }
-    }
-    getDefaultSelectedElements() {
-        return [...this.selectedElemRef.toArray()].filter(value => value.nativeElement.getAttribute('is-default') === 'true');
-    }
-    onKeyDownSelectedInner(keyEvent) {
-        // IE doesn't support keyEvent.code, and has different values
-        // in keyEvent.key (Down instead of ArrowDown for instance), hence the multi-support.
-        const ie11CompatibleCode = keyEvent.code || keyEvent.key;
-        switch (ie11CompatibleCode) {
-            case 'Right':
-            case 'ArrowRight':
-                this.navigateSelectedList(1);
-                break;
-            case 'Left':
-            case 'ArrowLeft':
-                this.navigateSelectedList(-1);
-                break;
-            default:
-                return true;
-        }
-        keyEvent.preventDefault();
-        keyEvent.stopPropagation();
-        return false;
-    }
     filterAutocompleteElements(elements) {
         const filteredElements = ObjectHelper.deepCopy(elements);
         if (!!this.model && !!this.model.length) {
@@ -8001,6 +7929,7 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
         return filteredElements;
     }
     manageSuggestionListAndFocusAfterAddingAnItem() {
+        // Empty autocomplete input
         this.autocompleteInputValue = null;
         // Remove selected item from autocomplete suggestion list
         this.autocompleteComponent.elements = this.filterAutocompleteElements(this.elements);
@@ -8023,15 +7952,11 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
         this.autocompleteComponent.inputElement.nativeElement.hidden = false;
         // Add back selected item to autocomplete suggestion list
         this.autocompleteComponent.elements = this.filterAutocompleteElements(this.elements);
-        // When deleting a selected item, check were to set focus back
-        this.closeButtonsElemRef.changes.pipe(first()).subscribe(() => {
-            const buttonToFocus = this.getFirstDeleteButtonToFocus();
-            if (!!buttonToFocus) {
-                buttonToFocus.focus();
-            }
-            else {
-                this.autocompleteComponent.setFocusOnInput();
-                this.autocompleteComponent.onInputFocus();
+        // When deleting a selected item, check were to set focus back when no more items to delete
+        this.selectedElemRef.changes.pipe(first()).subscribe(() => {
+            const selectedElemRefArray = [...this.selectedElemRef.toArray()];
+            if (!selectedElemRefArray.length && !!this.selectedItemsArea) {
+                this.selectedItemsArea.nativeElement.setFocus();
             }
         });
     }
@@ -8042,15 +7967,27 @@ class FoehnMultiselectAutocompleteComponent extends FoehnAutocompleteComponent {
         this.autocompleteInputValue = null;
         this.autocompleteComponent.inputElement.nativeElement.hidden = true;
     }
+    manageScreenReaderAnnouncement(element, isDelete) {
+        clearTimeout(this.srAnnouncementClearTimer);
+        if (isDelete) {
+            this.srAnnouncements += `${this.dictionaryService.getKeySync('foehn-multiselect-autocomplete.sr-announcement.deleted', { elementLabel: this.getLabel(element) })}`;
+        }
+        else {
+            this.srAnnouncements += `${this.dictionaryService.getKeySync('foehn-multiselect-autocomplete.sr-announcement.added', { elementLabel: this.getLabel(element) })}`;
+        }
+        this.srAnnouncementClearTimer = setTimeout(() => {
+            this.srAnnouncements = '';
+        }, this.SR_ANNOUNCEMENT_CLEAR_TIMEOUT_INTERVAL_MS);
+    }
 }
 FoehnMultiselectAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnMultiselectAutocompleteComponent, deps: [{ token: i0.NgZone }, { token: SdkDictionaryService }], target: i0.ɵɵFactoryTarget.Component });
-FoehnMultiselectAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FoehnMultiselectAutocompleteComponent, selector: "foehn-multiselect-autocomplete", inputs: { defaultElementValues: "defaultElementValues", defaultElementValue: "defaultElementValue" }, host: { listeners: { "keydown": "handleKeyboardDownEvent($event)" } }, providers: [
+FoehnMultiselectAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FoehnMultiselectAutocompleteComponent, selector: "foehn-multiselect-autocomplete", inputs: { defaultElementValues: "defaultElementValues", defaultElementValue: "defaultElementValue" }, providers: [
         {
             provide: FoehnInputComponent,
             useExisting: forwardRef(() => FoehnMultiselectAutocompleteComponent),
             multi: true
         }
-    ], viewQueries: [{ propertyName: "autocompleteComponent", first: true, predicate: ["autocompleteComponent"], descendants: true }, { propertyName: "alertMessageContainer", first: true, predicate: ["alertMessageContainer"], descendants: true }, { propertyName: "closeButtonsElemRef", predicate: ["closeButtonsElemRef"], descendants: true }, { propertyName: "selectedElemRef", predicate: ["selectedElemRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<foehn-autocomplete\n    #autocompleteComponent\n    [name]=\"name\"\n    [label]=\"label\"\n    [elements]=\"elements\"\n    [elementsUrl]=\"elementsUrl\"\n    [elementValue]=\"elementValue\"\n    [elementLabel]=\"elementLabel\"\n    [elementValueIdentity]=\"elementValueIdentity\"\n    [elementDisabled]=\"elementDisabled\"\n    [allElementDisabled]=\"allElementDisabled\"\n    [elementGroup]=\"elementGroup\"\n    [allowCustomValue]=\"false\"\n    [searchValueMinCharsCount]=\"searchValueMinCharsCount\"\n    [customValueModelGenerator]=\"customValueModelGenerator\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (userInput)=\"addItem($event)\"\n    [(model)]=\"autocompleteInputValue\"\n    (elementsLoaded)=\"onAutocompleteElementsLoaded($event)\"\n>\n    <div\n        [attr.role]=\"!disabled ? 'application' : null\"\n        (focusin)=\"onSelectedItemsFocusin()\"\n        (focusout)=\"onSelectedItemsFocusout()\"\n        [tabindex]=\"(!!model && !!model.length) ? 0 : -1\"\n        class=\"selected-list-container\"\n    >\n        <ul\n            [id]=\"buildChildId() + 'SelectedItemsList'\"\n            class=\"list-unstyled mb-1 d-flex align-content-stretch flex-wrap\"\n            aria-live=\"polite\"\n            aria-atomic=\"true\"\n            aria-relevant=\"all\"\n            aria-orientation=\"horizontal\"\n            [attr.aria-label]=\"getSelectedListAriaLabel()\"\n        >\n            <li\n                *ngFor=\"let element of model; let index = index; trackBy: trackByFn\"\n                class=\"badge badge-pill badge-secondary mr-1 mb-1 py-2 px-3 d-flex align-items-center\"\n                [tabindex]=\"isSelectedItemFocusable(index) ? 0 : -1\"\n                [attr.is-default]=\"!canBeDeleted(index)\"\n                #selectedElemRef\n            >\n                <ng-container *ngIf=\"!disabled\">\n                    <span *ngIf=\"!canBeDeleted(index)\" class=\"sr-only\">{{ 'foehn-multiselect-autocomplete.selected.screen-reader.default-value' | fromDictionary }}</span>\n                    <span *ngIf=\"canBeDeleted(index)\" class=\"sr-only\">{{ 'foehn-multiselect-autocomplete.selected.screen-reader.selected-value' | fromDictionary }}</span>\n                </ng-container>\n\n                <span [innerHtml]=\"getLabel(element)\"></span>\n\n                <button\n                    *ngIf=\"!disabled && canBeDeleted(index)\"\n                    type=\"button\"\n                    class=\"btn btn-link ml-2\"\n                    [tabindex]=\"getSelectedElementTabIndex(index)\"\n                    (click)=\"removeItem(element)\"\n                    #closeButtonsElemRef\n                >\n                    <foehn-icon-times\n                        title=\"{{ 'foehn-multiselect-autocomplete.selected.delete' | fromDictionary: {elementLabel: getLabel(element)} }}\"\n                    ></foehn-icon-times>\n                </button>\n            </li>\n        </ul>\n    </div>\n\n    <small\n        *ngIf=\"!showEmptyListMessage\"\n        [attr.id]=\"buildChildId() + 'Help'\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText ? helpText : 'foehn-multiselect-autocomplete.autocomplete.screen-reader.label' | fromDictionary\"\n    ></small>\n\n    <div\n        [id]=\"buildChildId() + 'AlertMessageContainer'\"\n        role=\"status\"\n        tabindex=\"-1\"\n        #alertMessageContainer\n    >\n        <p\n            *ngIf=\"showEmptyListMessage\"\n            class=\"alert alert-info\"\n            tabindex=\"0\"\n        >{{'foehn-multiselect-autocomplete.autocomplete.empty-message' | fromDictionary}}</p>\n    </div>\n</foehn-autocomplete>\n", styles: [".selected-list-container button>.btn,.btn-link{line-height:inherit;padding:0}.selected-list-container li:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem #ffbf47}.selected-list-container:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem #ffbf47}foehn-autocomplete p.alert:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem #ffbf47}\n"], components: [{ type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: ["searchValueMinCharsCount", "allowCustomValue", "customValueModelGenerator"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+    ], viewQueries: [{ propertyName: "autocompleteComponent", first: true, predicate: ["autocompleteComponent"], descendants: true }, { propertyName: "alertMessageContainer", first: true, predicate: ["alertMessageContainer"], descendants: true }, { propertyName: "selectedItemsArea", first: true, predicate: ["selectedItemsArea"], descendants: true }, { propertyName: "selectedElemRef", predicate: ["selectedElemRef"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<foehn-autocomplete\n    #autocompleteComponent\n    [name]=\"name\"\n    [label]=\"label\"\n    [elements]=\"elements\"\n    [elementsUrl]=\"elementsUrl\"\n    [elementValue]=\"elementValue\"\n    [elementLabel]=\"elementLabel\"\n    [elementValueIdentity]=\"elementValueIdentity\"\n    [elementDisabled]=\"elementDisabled\"\n    [allElementDisabled]=\"allElementDisabled\"\n    [elementGroup]=\"elementGroup\"\n    [allowCustomValue]=\"false\"\n    [searchValueMinCharsCount]=\"searchValueMinCharsCount\"\n    [customValueModelGenerator]=\"customValueModelGenerator\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    (userInput)=\"addItem($event)\"\n    [(model)]=\"autocompleteInputValue\"\n    (elementsLoaded)=\"onAutocompleteElementsLoaded($event)\"\n>\n    <small\n        *ngIf=\"!showEmptyListMessage\"\n        [attr.id]=\"buildChildId('Help')\"\n        class=\"form-text text-secondary\"\n        [innerHTML]=\"helpText ? helpText : 'foehn-multiselect-autocomplete.autocomplete.screen-reader.label' | fromDictionary\"\n    ></small>\n\n    <div\n        [id]=\"buildChildId('AlertMessageContainer')\"\n        role=\"status\"\n        #alertMessageContainer\n    >\n        <p\n            *ngIf=\"showEmptyListMessage\"\n            class=\"alert alert-info\"\n            tabindex=\"0\"\n        >{{'foehn-multiselect-autocomplete.autocomplete.empty-message' | fromDictionary}}</p>\n    </div>\n</foehn-autocomplete>\n\n<p\n    class=\"sr-only\"\n    aria-live=\"polite\"\n    aria-atomic=\"true\"\n>\n    {{srAnnouncements}}\n</p>\n\n<div\n    role=\"presentation\"\n    class=\"selected-list-container d-flex align-content-stretch flex-wrap\"\n    [ngClass]=\"!!model && !!model.length ? 'mb-2' : 'mb-0'\"\n    #selectedItemsArea\n>\n    <ng-container *ngFor=\"let element of model; let index = index; trackBy: trackByFn\">\n        <span\n            *ngIf=\"!canBeDeleted(index)\"\n            class=\"badge badge-pill badge-secondary mr-1 mb-1 py-2 px-3 d-flex align-items-center\"\n            [tabindex]=\"disabled ? -1 : 0\"\n            [attr.aria-describedby]=\"buildChildId('Label')\"\n        >\n            {{getLabel(element)}}\n        </span>\n        <button\n            *ngIf=\"canBeDeleted(index)\"\n            class=\"btn btn-secondary badge badge-pill mr-1 mb-1 py-2 px-3 d-flex align-items-center\"\n            [tabindex]=\"0\"\n            [attr.aria-label]=\"getDeleteButtonAriaLabel(element)\"\n            [attr.aria-describedby]=\"buildChildId('Label')\"\n            [title]=\"getDeleteButtonAriaLabel(element)\"\n            (click)=\"removeItem(element)\"\n            #selectedElemRef\n        >\n            {{getLabel(element)}}\n            <foehn-icon-times\n                aria-hidden=\"true\"\n                class=\"ml-2\"\n                [title]=\"getDeleteButtonAriaLabel(element)\"\n            ></foehn-icon-times>\n        </button>\n    </ng-container>\n</div>\n", styles: ["foehn-autocomplete p.alert:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem #ffbf47}.selected-list-container button>.btn,.btn-link{line-height:inherit;padding:0}.selected-list-container .btn{text-transform:none}.selected-list-container span.badge-pill:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem #ffbf47}\n"], components: [{ type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: ["searchValueMinCharsCount", "allowCustomValue", "customValueModelGenerator"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0, type: FoehnMultiselectAutocompleteComponent, decorators: [{
             type: Component,
             args: [{
@@ -8071,19 +8008,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImpor
             }], alertMessageContainer: [{
                 type: ViewChild,
                 args: ['alertMessageContainer']
-            }], closeButtonsElemRef: [{
-                type: ViewChildren,
-                args: ['closeButtonsElemRef']
             }], selectedElemRef: [{
                 type: ViewChildren,
                 args: ['selectedElemRef']
+            }], selectedItemsArea: [{
+                type: ViewChild,
+                args: ['selectedItemsArea']
             }], defaultElementValues: [{
                 type: Input
             }], defaultElementValue: [{
                 type: Input
-            }], handleKeyboardDownEvent: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
             }] } });
 
 class FoehnMultiselectAutocompleteModule {