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

package/bundles/dsivd-prestations-ng.umd.js

@@ -1930,9 +1930,8 @@
         '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.'
@@ -8857,7 +8856,8 @@
             var _this = _super.call(this, ngZone) || this;
             _this.dictionaryService = dictionaryService;
             _this.showEmptyListMessage = false;
-            _this.keyboardNavigationAllowed = false;
+            _this.srAnnouncements = '';
+            _this.SR_ANNOUNCEMENT_CLEAR_TIMEOUT_INTERVAL_MS = 2000;
             return _this;
         }
         Object.defineProperty(FoehnMultiselectAutocompleteComponent.prototype, "defaultElementValues", {
@@ -8880,11 +8880,6 @@
             enumerable: false,
             configurable: true
         });
-        FoehnMultiselectAutocompleteComponent.prototype.handleKeyboardDownEvent = function (event) {
-            if (this.keyboardNavigationAllowed) {
-                this.onKeyDownSelectedInner(event);
-            }
-        };
         FoehnMultiselectAutocompleteComponent.prototype.updateMultiselectAutocomplete = function () {
             var validValue = this.getValidValue();
             if (typeof validValue !== 'undefined') {
@@ -8908,6 +8903,7 @@
                     this.updateMultiselectAutocomplete();
                     this.handleUserInput();
                     this.manageSuggestionListAndFocusAfterAddingAnItem();
+                    this.manageScreenReaderAnnouncement(item, false);
                 }
             }
         };
@@ -8917,6 +8913,7 @@
                 this.model.splice(index, 1);
                 this.triggerUserInput(this.model);
                 this.manageSuggestionListAndFocusAfterRemovingAnItem();
+                this.manageScreenReaderAnnouncement(item, true);
             }
         };
         FoehnMultiselectAutocompleteComponent.prototype.trackByFn = function (index) {
@@ -8927,29 +8924,8 @@
             var elem = this.findElementByModelItem(value);
             return _super.prototype.getLabel.call(this, elem);
         };
-        FoehnMultiselectAutocompleteComponent.prototype.getSelectedElementTabIndex = function (index) {
-            var _this = this;
-            var firstIndexFocusable = 0;
-            if (!!this.defaultElementValues) {
-                firstIndexFocusable = this.model.findIndex(function (selected) { return !_this.defaultElementValues.includes(selected); });
-            }
-            if (index !== firstIndexFocusable) {
-                return -1;
-            }
-            return 0;
-        };
-        FoehnMultiselectAutocompleteComponent.prototype.isSelectedItemFocusable = function (index) {
-            return !this.disabled && !!this.defaultElementValues && this.defaultElementValues.includes(this.model[index]);
-        };
         FoehnMultiselectAutocompleteComponent.prototype.canBeDeleted = function (index) {
-            return !this.defaultElementValues || !this.defaultElementValues.includes(this.model[index]);
-        };
-        FoehnMultiselectAutocompleteComponent.prototype.onSelectedItemsFocusin = function () {
-            this.keyboardNavigationAllowed = true;
-            this.currentFocusedElem = document.activeElement;
-        };
-        FoehnMultiselectAutocompleteComponent.prototype.onSelectedItemsFocusout = function () {
-            this.keyboardNavigationAllowed = false;
+            return !this.disabled && (!this.defaultElementValues || !this.defaultElementValues.includes(this.model[index]));
         };
         FoehnMultiselectAutocompleteComponent.prototype.onAutocompleteElementsLoaded = function (elements) {
             var _this = this;
@@ -8963,13 +8939,13 @@
                 }
             });
         };
-        FoehnMultiselectAutocompleteComponent.prototype.getSelectedListAriaLabel = function () {
-            return this.label + ": " + this.dictionaryService.getKeySync('foehn-multiselect-autocomplete.list-of-selected-items');
+        FoehnMultiselectAutocompleteComponent.prototype.getDeleteButtonAriaLabel = function (element) {
+            return "" + this.dictionaryService.getKeySync('foehn-multiselect-autocomplete.selected.delete', { elementLabel: this.getLabel(element) });
         };
         FoehnMultiselectAutocompleteComponent.prototype.findElementByModelItem = function (item) {
             var _this = this;
             if (!!this.elements && !!this.elements.length) {
-                var itemValue_1 = typeof item === 'string' ? item : this.getValue(item);
+                var itemValue_1 = typeof item !== 'object' ? item : this.getValue(item);
                 var elem = this.elements.find(function (element) { return _this.getValue(element) === itemValue_1; });
                 if (!!elem) {
                     return elem;
@@ -8986,56 +8962,6 @@
             }
             return this.model;
         };
-        FoehnMultiselectAutocompleteComponent.prototype.getFirstDeleteButtonToFocus = function () {
-            var closeButtonsElemRefArray = __spreadArray([], __read(this.closeButtonsElemRef.toArray()));
-            if (!!closeButtonsElemRefArray.length) {
-                return closeButtonsElemRefArray[0].nativeElement;
-            }
-            return null;
-        };
-        FoehnMultiselectAutocompleteComponent.prototype.navigateSelectedList = function (offset) {
-            var _this = this;
-            if (!this.disabled) {
-                var closeButtonsElemRefArray = this.getDefaultSelectedElements().concat(__spreadArray([], __read(this.closeButtonsElemRef.toArray())));
-                if (!!closeButtonsElemRefArray.length) {
-                    var focusIndex = closeButtonsElemRefArray.findIndex(function (value) { return _this.currentFocusedElem === value.nativeElement; });
-                    var newIndex = focusIndex + offset;
-                    if (newIndex >= closeButtonsElemRefArray.length) {
-                        newIndex = 0;
-                    }
-                    if (newIndex < 0) {
-                        newIndex = closeButtonsElemRefArray.length - 1;
-                    }
-                    var elemRef = closeButtonsElemRefArray[newIndex];
-                    if (!!elemRef) {
-                        elemRef.nativeElement.focus();
-                    }
-                }
-            }
-        };
-        FoehnMultiselectAutocompleteComponent.prototype.getDefaultSelectedElements = function () {
-            return __spreadArray([], __read(this.selectedElemRef.toArray())).filter(function (value) { return value.nativeElement.getAttribute('is-default') === 'true'; });
-        };
-        FoehnMultiselectAutocompleteComponent.prototype.onKeyDownSelectedInner = function (keyEvent) {
-            // IE doesn't support keyEvent.code, and has different values
-            // in keyEvent.key (Down instead of ArrowDown for instance), hence the multi-support.
-            var 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;
-        };
         FoehnMultiselectAutocompleteComponent.prototype.filterAutocompleteElements = function (elements) {
             var _this = this;
             var filteredElements = ObjectHelper.deepCopy(elements);
@@ -9065,6 +8991,7 @@
         };
         FoehnMultiselectAutocompleteComponent.prototype.manageSuggestionListAndFocusAfterAddingAnItem = function () {
             var _this = this;
+            // Empty autocomplete input
             this.autocompleteInputValue = null;
             // Remove selected item from autocomplete suggestion list
             this.autocompleteComponent.elements = this.filterAutocompleteElements(this.elements);
@@ -9088,15 +9015,11 @@
             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(operators.first()).subscribe(function () {
-                var 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(operators.first()).subscribe(function () {
+                var selectedElemRefArray = __spreadArray([], __read(_this.selectedElemRef.toArray()));
+                if (!selectedElemRefArray.length && !!_this.selectedItemsArea) {
+                    _this.selectedItemsArea.nativeElement.setFocus();
                 }
             });
         };
@@ -9107,16 +9030,29 @@
             this.autocompleteInputValue = null;
             this.autocompleteComponent.inputElement.nativeElement.hidden = true;
         };
+        FoehnMultiselectAutocompleteComponent.prototype.manageScreenReaderAnnouncement = function (element, isDelete) {
+            var _this = this;
+            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(function () {
+                _this.srAnnouncements = '';
+            }, this.SR_ANNOUNCEMENT_CLEAR_TIMEOUT_INTERVAL_MS);
+        };
         return FoehnMultiselectAutocompleteComponent;
     }(FoehnAutocompleteComponent));
     FoehnMultiselectAutocompleteComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnMultiselectAutocompleteComponent, deps: [{ token: i0__namespace.NgZone }, { token: SdkDictionaryService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    FoehnMultiselectAutocompleteComponent.ɵcmp = i0__namespace.ɵɵ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__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FoehnMultiselectAutocompleteComponent, selector: "foehn-multiselect-autocomplete", inputs: { defaultElementValues: "defaultElementValues", defaultElementValue: "defaultElementValue" }, providers: [
             {
                 provide: FoehnInputComponent,
                 useExisting: i0.forwardRef(function () { return 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__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3__namespace.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__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnMultiselectAutocompleteComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -9137,19 +9073,16 @@
                 }], alertMessageContainer: [{
                     type: i0.ViewChild,
                     args: ['alertMessageContainer']
-                }], closeButtonsElemRef: [{
-                    type: i0.ViewChildren,
-                    args: ['closeButtonsElemRef']
                 }], selectedElemRef: [{
                     type: i0.ViewChildren,
                     args: ['selectedElemRef']
+                }], selectedItemsArea: [{
+                    type: i0.ViewChild,
+                    args: ['selectedItemsArea']
                 }], defaultElementValues: [{
                     type: i0.Input
                 }], defaultElementValue: [{
                     type: i0.Input
-                }], handleKeyboardDownEvent: [{
-                    type: i0.HostListener,
-                    args: ['keydown', ['$event']]
                 }] } });
 
     var FoehnMultiselectAutocompleteModule = /** @class */ (function () {