@dsivd/prestations-ng 14.5.23-beta6 → 14.5.23-beta9

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

@@ -1930,8 +1930,10 @@
         '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.sr-announcement.deleted': '{elementLabel} a été supprimé, ',
-        'foehn-multiselect-autocomplete.sr-announcement.added': '{elementLabel} a été ajouté, ',
+        'foehn-multiselect-autocomplete.sr-announcement.deleted': '{elementLabel} a été supprimé,',
+        'foehn-multiselect-autocomplete.sr-announcement.added': '{elementLabel} a été ajouté,',
+        'foehn-multiselect-autocomplete.sr-default-focus.no-element-to-delete': 'Aucun élément à supprimer dans la liste.',
+        'foehn-multiselect-autocomplete.sr-default-selected-element': '(sélection par défaut)',
         '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 +8859,7 @@
             _this.dictionaryService = dictionaryService;
             _this.showEmptyListMessage = false;
             _this.srAnnouncements = '';
-            _this.SR_ANNOUNCEMENT_CLEAR_TIMEOUT_INTERVAL = 4000;
+            _this.SR_ANNOUNCEMENT_CLEAR_TIMEOUT_INTERVAL_MS = 2000;
             return _this;
         }
         Object.defineProperty(FoehnMultiselectAutocompleteComponent.prototype, "defaultElementValues", {
@@ -8907,14 +8909,11 @@
                 }
             }
         };
-        FoehnMultiselectAutocompleteComponent.prototype.removeItem = function (item) {
-            var index = this.model.indexOf(item);
-            if (index > -1) {
-                this.model.splice(index, 1);
-                this.triggerUserInput(this.model);
-                this.manageSuggestionListAndFocusAfterRemovingAnItem();
-                this.manageScreenReaderAnnouncement(item, true);
-            }
+        FoehnMultiselectAutocompleteComponent.prototype.removeItem = function (item, index) {
+            this.model.splice(index, 1);
+            this.triggerUserInput(this.model);
+            this.manageSuggestionListAndFocusAfterRemovingAnItem(index);
+            this.manageScreenReaderAnnouncement(item, true);
         };
         FoehnMultiselectAutocompleteComponent.prototype.trackByFn = function (index) {
             return index;
@@ -8925,7 +8924,7 @@
             return _super.prototype.getLabel.call(this, elem);
         };
         FoehnMultiselectAutocompleteComponent.prototype.canBeDeleted = function (index) {
-            return !this.defaultElementValues || !this.defaultElementValues.includes(this.model[index]);
+            return !this.disabled && (!this.defaultElementValues || !this.defaultElementValues.includes(this.model[index]));
         };
         FoehnMultiselectAutocompleteComponent.prototype.onAutocompleteElementsLoaded = function (elements) {
             var _this = this;
@@ -8945,7 +8944,7 @@
         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;
@@ -8962,6 +8961,25 @@
             }
             return this.model;
         };
+        FoehnMultiselectAutocompleteComponent.prototype.focusNextAreaAfterDelete = function (removedIndex) {
+            // Adjust index depending on default elements that are not deletable
+            if (!!this.defaultElementValues) {
+                removedIndex -= this.defaultElementValues.length;
+            }
+            var closeButtonsElemRefArray = __spreadArray([], __read(this.selectedElemRef.toArray()));
+            // Need to find an element to focus on
+            if (removedIndex === closeButtonsElemRefArray.length) {
+                if (!!closeButtonsElemRefArray.length) {
+                    return closeButtonsElemRefArray[removedIndex - 1].nativeElement.focus();
+                }
+                var defaultElemRefArray = __spreadArray([], __read(this.defaultElemRef.toArray()));
+                if (!!defaultElemRefArray.length) {
+                    return defaultElemRefArray[defaultElemRefArray.length - 1].nativeElement.focus();
+                }
+                return this.defaultFocusArea.nativeElement.focus();
+            }
+            // Otherwise focus element by DOM replacement
+        };
         FoehnMultiselectAutocompleteComponent.prototype.filterAutocompleteElements = function (elements) {
             var _this = this;
             var filteredElements = ObjectHelper.deepCopy(elements);
@@ -9007,13 +9025,18 @@
                 });
             }
         };
-        FoehnMultiselectAutocompleteComponent.prototype.manageSuggestionListAndFocusAfterRemovingAnItem = function () {
+        FoehnMultiselectAutocompleteComponent.prototype.manageSuggestionListAndFocusAfterRemovingAnItem = function (removedIndex) {
+            var _this = this;
             // Hide message saying no more suggestions to display
             this.showEmptyListMessage = false;
             // Manually show autocomplete because there is at least one suggestions to display
             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 when no more items to delete
+            this.selectedElemRef.changes.pipe(operators.first()).subscribe(function () {
+                _this.focusNextAreaAfterDelete(removedIndex);
+            });
         };
         FoehnMultiselectAutocompleteComponent.prototype.showAlertMessageAndHideAutocomplete = function () {
             // Show a message to user indicating there is no more suggestions to display
@@ -9033,7 +9056,7 @@
             }
             this.srAnnouncementClearTimer = setTimeout(function () {
                 _this.srAnnouncements = '';
-            }, this.SR_ANNOUNCEMENT_CLEAR_TIMEOUT_INTERVAL);
+            }, this.SR_ANNOUNCEMENT_CLEAR_TIMEOUT_INTERVAL_MS);
         };
         return FoehnMultiselectAutocompleteComponent;
     }(FoehnAutocompleteComponent));
@@ -9044,7 +9067,7 @@
                 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 }], 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>\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]=\"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        >\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 } });
+        ], viewQueries: [{ propertyName: "autocompleteComponent", first: true, predicate: ["autocompleteComponent"], descendants: true }, { propertyName: "alertMessageContainer", first: true, predicate: ["alertMessageContainer"], descendants: true }, { propertyName: "defaultFocusArea", first: true, predicate: ["defaultFocusArea"], descendants: true }, { propertyName: "selectedElemRef", predicate: ["selectedElemRef"], descendants: true }, { propertyName: "defaultElemRef", predicate: ["defaultElemRef"], 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>\n    <span\n        *ngIf=\"(!defaultElementValues || !defaultElementValues.length) && (!model || !model.length)\"\n        class=\"sr-only\"\n        [tabindex]=\"disabled ? -1 : 0\"\n        [innerHTML]=\"'foehn-multiselect-autocomplete.sr-default-focus.no-element-to-delete' | fromDictionary\"\n        #defaultFocusArea\n    ></span>\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            #defaultElemRef\n        >\n            {{getLabel(element)}}\n            <span class=\"sr-only\">\n                {{'foehn-multiselect-autocomplete.sr-default-selected-element' | fromDictionary}}\n            </span>\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, index)\"\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: [{
@@ -9065,6 +9088,15 @@
                 }], alertMessageContainer: [{
                     type: i0.ViewChild,
                     args: ['alertMessageContainer']
+                }], selectedElemRef: [{
+                    type: i0.ViewChildren,
+                    args: ['selectedElemRef']
+                }], defaultElemRef: [{
+                    type: i0.ViewChildren,
+                    args: ['defaultElemRef']
+                }], defaultFocusArea: [{
+                    type: i0.ViewChild,
+                    args: ['defaultFocusArea']
                 }], defaultElementValues: [{
                     type: i0.Input
                 }], defaultElementValue: [{