@dsivd/prestations-ng 15.2.4 → 15.2.5-beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -923,6 +923,9 @@ class FoehnNavigationService {
923
923
  return (this.getNextAvailableRoute(NavigationDirection.BACKWARD) === null);
924
924
  }
925
925
  isLastFormPage() {
926
+ if (!this.orderedRoutes?.length) {
927
+ return false;
928
+ }
926
929
  if (!this.getCurrentRoute(this.getAvailableRoutes())) {
927
930
  return true;
928
931
  }
@@ -5696,8 +5699,8 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
5696
5699
  * A custom value is a value that is not in the `elements` set.
5697
5700
  */
5698
5701
  this.allowCustomValue = false;
5702
+ this.itemHeightInSuggestionListInPx = 40;
5699
5703
  this.hideSuggestions = true;
5700
- this.ITEM_CALCULATED_HEIGHT = 40;
5701
5704
  this.currentItemGlobalIndex = -1;
5702
5705
  this.NB_ITEMS_VISIBLE = 5;
5703
5706
  this.filterSubject = new Subject();
@@ -5706,7 +5709,7 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
5706
5709
  .pipe(debounceTime(200))
5707
5710
  .subscribe(this.filterElements.bind(this));
5708
5711
  this.VIEW_PORT_HEIGHT =
5709
- this.ITEM_CALCULATED_HEIGHT * this.NB_ITEMS_VISIBLE;
5712
+ this.itemHeightInSuggestionListInPx * this.NB_ITEMS_VISIBLE;
5710
5713
  }
5711
5714
  ngOnInit() {
5712
5715
  super.ngOnInit();
@@ -6008,13 +6011,14 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
6008
6011
  if (!!filteredElements) {
6009
6012
  if (filteredElements.length < this.NB_ITEMS_VISIBLE) {
6010
6013
  this.VIEW_PORT_HEIGHT =
6011
- this.ITEM_CALCULATED_HEIGHT * filteredElements.length;
6014
+ this.itemHeightInSuggestionListInPx *
6015
+ filteredElements.length;
6012
6016
  if (!!this.virtualScrollViewport) {
6013
6017
  this.virtualScrollViewport.checkViewportSize();
6014
6018
  }
6015
6019
  }
6016
6020
  else {
6017
- const MAX_HEIGHT = this.NB_ITEMS_VISIBLE * this.ITEM_CALCULATED_HEIGHT;
6021
+ const MAX_HEIGHT = this.NB_ITEMS_VISIBLE * this.itemHeightInSuggestionListInPx;
6018
6022
  if (this.VIEW_PORT_HEIGHT < MAX_HEIGHT) {
6019
6023
  this.VIEW_PORT_HEIGHT = MAX_HEIGHT;
6020
6024
  if (!!this.virtualScrollViewport) {
@@ -6174,13 +6178,13 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
6174
6178
  }
6175
6179
  }
6176
6180
  FoehnAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnAutocompleteComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
6177
- FoehnAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: { searchValueMinCharsCount: "searchValueMinCharsCount", allowCustomValue: "allowCustomValue", customValueModelGenerator: "customValueModelGenerator" }, providers: [
6181
+ FoehnAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: { searchValueMinCharsCount: "searchValueMinCharsCount", allowCustomValue: "allowCustomValue", customValueModelGenerator: "customValueModelGenerator", itemHeightInSuggestionListInPx: "itemHeightInSuggestionListInPx" }, providers: [
6178
6182
  {
6179
6183
  provide: FoehnInputComponent,
6180
6184
  useExisting: forwardRef(() => FoehnAutocompleteComponent),
6181
6185
  multi: true
6182
6186
  }
6183
- ], viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "suggestionsList", first: true, predicate: ["suggestionsList"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["entryComponent"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--\n Accessible autocomplete widget following the listbox combobox pattern.\n ref: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html\n-->\n<div\n class=\"form-group autocomplete-form-group\"\n [class.has-danger]=\"hasErrorsToDisplay()\"\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [attr.aria-expanded]=\"shouldDisplayListbox()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <label\n [attr.for]=\"buildChildId()\"\n *ngIf=\"!!label\"\n [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n [attr.id]=\"buildChildId() + 'Label'\"\n >\n <span [innerHTML]=\"label\"></span>\n <span\n *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n aria-hidden=\"true\"\n >\n {{ 'foehn-input.optional' | fromDictionary }}\n </span>\n </label>\n\n <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n <div *ngIf=\"!elements\">Chargement...</div>\n\n <small\n *ngIf=\"helpText\"\n [attr.id]=\"buildChildId() + 'Help'\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <ng-content></ng-content>\n\n <div class=\"sr-only\">\n Utilisez les fl\u00E8ches haut et bas pour naviguer dans la liste, puis la\n touche Entrer pour s\u00E9lectionner une option.\n </div>\n\n <!-- Give screen reader users the total of results when then input changes. -->\n <div\n class=\"sr-only\"\n aria-live=\"polite\"\n role=\"status\"\n aria-atomic=\"true\"\n *ngIf=\"displayedElements && shouldDisplayListbox()\"\n >\n Nombre de r\u00E9sultats: {{ displayedElements.length }}\n <!-- Trick to have NVDA re-reading this properly -->\n <span>{{ notificationMessageUpdated ? ',' : ',,' }}</span>\n </div>\n\n <input\n [class.is-invalid]=\"hasErrorsToDisplay()\"\n class=\"form-control autocomplete\"\n type=\"text\"\n role=\"textbox\"\n [name]=\"name || label\"\n [attr.id]=\"buildChildId()\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n [attr.aria-describedby]=\"getDescribedBy()\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.autocomplete]=\"'off'\"\n [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n [attr.aria-owns]=\"\n shouldDisplayListbox() ? buildChildId() + 'Listbox' : null\n \"\n [attr.list]=\"buildChildId() + 'list'\"\n [(ngModel)]=\"inputValue\"\n (ngModelChange)=\"showSuggestionsWhenInputHasFocusAndIsEmpty($event)\"\n (paste)=\"onPaste($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n (click)=\"onInputClick()\"\n autocomplete=\"off\"\n #entryComponent\n />\n\n <button\n type=\"button\"\n *ngIf=\"displayClearButton() | async\"\n class=\"autocomplete-clear-button btn\"\n (click)=\"onClear()\"\n [id]=\"buildChildId() + 'Clear'\"\n >\n <foehn-icon-times\n class=\"autocomplete-clear-button-icon\"\n title=\"R\u00E9initialiser le champ\"\n ></foehn-icon-times>\n </button>\n\n <div\n class=\"form-group suggestions-list-container\"\n *ngIf=\"shouldDisplayListbox()\"\n >\n <cdk-virtual-scroll-viewport\n [itemSize]=\"ITEM_CALCULATED_HEIGHT\"\n [style.height.px]=\"VIEW_PORT_HEIGHT\"\n >\n <ul\n [attr.id]=\"buildChildId() + 'Listbox'\"\n [attr.aria-labelledby]=\"buildChildId() + 'Label'\"\n role=\"listbox\"\n class=\"suggestions-list\"\n #suggestionsList\n >\n <li\n tabindex=\"-1\"\n role=\"option\"\n class=\"suggestion\"\n *cdkVirtualFor=\"\n let element of displayedElements;\n index as i\n \"\n [attr.id]=\"buildChildId() + 'Option' + i\"\n (click)=\"onClickSuggestion(element)\"\n (mousedown)=\"onListOptionMouseDown($event)\"\n (focus)=\"onListOptionFocus()\"\n (blur)=\"onListOptionBlur()\"\n >\n <!-- Ensures that screen readers don't consider any spaces around the emphasis -->\n <span [innerHtml]=\"getLabelWithEmphasis(element)\"></span>\n </li>\n </ul>\n </cdk-virtual-scroll-viewport>\n </div>\n</div>\n", styles: ["div.suggestions-list-container{position:relative;width:100%}cdk-virtual-scroll-viewport{width:100%;position:absolute;top:0;left:0;z-index:10;background:white;overflow-y:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;list-style:none;margin:inherit;padding:inherit}ul.suggestions-list{list-style:none;margin:0;padding:0}li.suggestion{width:100%;padding:.5em;font-size:1em}li.suggestion:hover,.suggestion-selected{background-color:var(--vd-info)}li.suggestion:hover{cursor:pointer;background-color:#dfdfdf}input.autocomplete::-ms-clear{display:none}input.autocomplete{padding-right:30px}.autocomplete-form-group{position:relative}.autocomplete-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.autocomplete-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .autocomplete-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .autocomplete-clear-button.btn:hover .svg-inline--fa{color:#000!important}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
6187
+ ], viewQueries: [{ propertyName: "virtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "suggestionsList", first: true, predicate: ["suggestionsList"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["entryComponent"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<!--\n Accessible autocomplete widget following the listbox combobox pattern.\n ref: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html\n-->\n<div\n class=\"form-group autocomplete-form-group\"\n [class.has-danger]=\"hasErrorsToDisplay()\"\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [attr.aria-expanded]=\"shouldDisplayListbox()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <label\n [attr.for]=\"buildChildId()\"\n *ngIf=\"!!label\"\n [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n [attr.id]=\"buildChildId() + 'Label'\"\n >\n <span [innerHTML]=\"label\"></span>\n <span\n *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n aria-hidden=\"true\"\n >\n {{ 'foehn-input.optional' | fromDictionary }}\n </span>\n </label>\n\n <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n <div *ngIf=\"!elements\">Chargement...</div>\n\n <small\n *ngIf=\"helpText\"\n [attr.id]=\"buildChildId() + 'Help'\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <ng-content></ng-content>\n\n <div class=\"sr-only\">\n Utilisez les fl\u00E8ches haut et bas pour naviguer dans la liste, puis la\n touche Entrer pour s\u00E9lectionner une option.\n </div>\n\n <!-- Give screen reader users the total of results when then input changes. -->\n <div\n class=\"sr-only\"\n aria-live=\"polite\"\n role=\"status\"\n aria-atomic=\"true\"\n *ngIf=\"displayedElements && shouldDisplayListbox()\"\n >\n Nombre de r\u00E9sultats: {{ displayedElements.length }}\n <!-- Trick to have NVDA re-reading this properly -->\n <span>{{ notificationMessageUpdated ? ',' : ',,' }}</span>\n </div>\n\n <input\n [class.is-invalid]=\"hasErrorsToDisplay()\"\n class=\"form-control autocomplete\"\n type=\"text\"\n role=\"textbox\"\n [name]=\"name || label\"\n [attr.id]=\"buildChildId()\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n [attr.aria-describedby]=\"getDescribedBy()\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.autocomplete]=\"'off'\"\n [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n [attr.aria-owns]=\"\n shouldDisplayListbox() ? buildChildId() + 'Listbox' : null\n \"\n [attr.list]=\"buildChildId() + 'list'\"\n [(ngModel)]=\"inputValue\"\n (ngModelChange)=\"showSuggestionsWhenInputHasFocusAndIsEmpty($event)\"\n (paste)=\"onPaste($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n (click)=\"onInputClick()\"\n autocomplete=\"off\"\n #entryComponent\n />\n\n <button\n type=\"button\"\n *ngIf=\"displayClearButton() | async\"\n class=\"autocomplete-clear-button btn\"\n (click)=\"onClear()\"\n [id]=\"buildChildId() + 'Clear'\"\n >\n <foehn-icon-times\n class=\"autocomplete-clear-button-icon\"\n title=\"R\u00E9initialiser le champ\"\n ></foehn-icon-times>\n </button>\n\n <div\n class=\"form-group suggestions-list-container\"\n *ngIf=\"shouldDisplayListbox()\"\n >\n <cdk-virtual-scroll-viewport\n [itemSize]=\"itemHeightInSuggestionListInPx\"\n [style.height.px]=\"VIEW_PORT_HEIGHT\"\n >\n <ul\n [attr.id]=\"buildChildId() + 'Listbox'\"\n [attr.aria-labelledby]=\"buildChildId() + 'Label'\"\n role=\"listbox\"\n class=\"suggestions-list\"\n #suggestionsList\n >\n <li\n tabindex=\"-1\"\n role=\"option\"\n class=\"suggestion\"\n *cdkVirtualFor=\"\n let element of displayedElements;\n index as i\n \"\n [attr.id]=\"buildChildId() + 'Option' + i\"\n (click)=\"onClickSuggestion(element)\"\n (mousedown)=\"onListOptionMouseDown($event)\"\n (focus)=\"onListOptionFocus()\"\n (blur)=\"onListOptionBlur()\"\n [style.height.px]=\"itemHeightInSuggestionListInPx\"\n >\n <!-- Ensures that screen readers don't consider any spaces around the emphasis -->\n <span [innerHtml]=\"getLabelWithEmphasis(element)\"></span>\n </li>\n </ul>\n </cdk-virtual-scroll-viewport>\n </div>\n</div>\n", styles: ["div.suggestions-list-container{position:relative;width:100%}cdk-virtual-scroll-viewport{width:100%;position:absolute;top:0;left:0;z-index:10;background:white;overflow-y:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;list-style:none;margin:inherit;padding:inherit}ul.suggestions-list{list-style:none;margin:0;padding:0}li.suggestion{width:100%;padding:.5em;font-size:1em}li.suggestion:hover,.suggestion-selected{background-color:var(--vd-info)}li.suggestion:hover{cursor:pointer;background-color:#dfdfdf}input.autocomplete::-ms-clear{display:none}input.autocomplete{padding-right:30px}.autocomplete-form-group{position:relative}.autocomplete-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.autocomplete-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .autocomplete-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .autocomplete-clear-button.btn:hover .svg-inline--fa{color:#000!important}\n"], components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnIconTimesComponent, selector: "foehn-icon-times" }, { type: i3$1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { type: i3$1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
6184
6188
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnAutocompleteComponent, decorators: [{
6185
6189
  type: Component,
6186
6190
  args: [{ selector: 'foehn-autocomplete', providers: [
@@ -6189,7 +6193,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
6189
6193
  useExisting: forwardRef(() => FoehnAutocompleteComponent),
6190
6194
  multi: true
6191
6195
  }
6192
- ], template: "<!--\n Accessible autocomplete widget following the listbox combobox pattern.\n ref: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html\n-->\n<div\n class=\"form-group autocomplete-form-group\"\n [class.has-danger]=\"hasErrorsToDisplay()\"\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [attr.aria-expanded]=\"shouldDisplayListbox()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <label\n [attr.for]=\"buildChildId()\"\n *ngIf=\"!!label\"\n [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n [attr.id]=\"buildChildId() + 'Label'\"\n >\n <span [innerHTML]=\"label\"></span>\n <span\n *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n aria-hidden=\"true\"\n >\n {{ 'foehn-input.optional' | fromDictionary }}\n </span>\n </label>\n\n <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n <div *ngIf=\"!elements\">Chargement...</div>\n\n <small\n *ngIf=\"helpText\"\n [attr.id]=\"buildChildId() + 'Help'\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <ng-content></ng-content>\n\n <div class=\"sr-only\">\n Utilisez les fl\u00E8ches haut et bas pour naviguer dans la liste, puis la\n touche Entrer pour s\u00E9lectionner une option.\n </div>\n\n <!-- Give screen reader users the total of results when then input changes. -->\n <div\n class=\"sr-only\"\n aria-live=\"polite\"\n role=\"status\"\n aria-atomic=\"true\"\n *ngIf=\"displayedElements && shouldDisplayListbox()\"\n >\n Nombre de r\u00E9sultats: {{ displayedElements.length }}\n <!-- Trick to have NVDA re-reading this properly -->\n <span>{{ notificationMessageUpdated ? ',' : ',,' }}</span>\n </div>\n\n <input\n [class.is-invalid]=\"hasErrorsToDisplay()\"\n class=\"form-control autocomplete\"\n type=\"text\"\n role=\"textbox\"\n [name]=\"name || label\"\n [attr.id]=\"buildChildId()\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n [attr.aria-describedby]=\"getDescribedBy()\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.autocomplete]=\"'off'\"\n [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n [attr.aria-owns]=\"\n shouldDisplayListbox() ? buildChildId() + 'Listbox' : null\n \"\n [attr.list]=\"buildChildId() + 'list'\"\n [(ngModel)]=\"inputValue\"\n (ngModelChange)=\"showSuggestionsWhenInputHasFocusAndIsEmpty($event)\"\n (paste)=\"onPaste($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n (click)=\"onInputClick()\"\n autocomplete=\"off\"\n #entryComponent\n />\n\n <button\n type=\"button\"\n *ngIf=\"displayClearButton() | async\"\n class=\"autocomplete-clear-button btn\"\n (click)=\"onClear()\"\n [id]=\"buildChildId() + 'Clear'\"\n >\n <foehn-icon-times\n class=\"autocomplete-clear-button-icon\"\n title=\"R\u00E9initialiser le champ\"\n ></foehn-icon-times>\n </button>\n\n <div\n class=\"form-group suggestions-list-container\"\n *ngIf=\"shouldDisplayListbox()\"\n >\n <cdk-virtual-scroll-viewport\n [itemSize]=\"ITEM_CALCULATED_HEIGHT\"\n [style.height.px]=\"VIEW_PORT_HEIGHT\"\n >\n <ul\n [attr.id]=\"buildChildId() + 'Listbox'\"\n [attr.aria-labelledby]=\"buildChildId() + 'Label'\"\n role=\"listbox\"\n class=\"suggestions-list\"\n #suggestionsList\n >\n <li\n tabindex=\"-1\"\n role=\"option\"\n class=\"suggestion\"\n *cdkVirtualFor=\"\n let element of displayedElements;\n index as i\n \"\n [attr.id]=\"buildChildId() + 'Option' + i\"\n (click)=\"onClickSuggestion(element)\"\n (mousedown)=\"onListOptionMouseDown($event)\"\n (focus)=\"onListOptionFocus()\"\n (blur)=\"onListOptionBlur()\"\n >\n <!-- Ensures that screen readers don't consider any spaces around the emphasis -->\n <span [innerHtml]=\"getLabelWithEmphasis(element)\"></span>\n </li>\n </ul>\n </cdk-virtual-scroll-viewport>\n </div>\n</div>\n", styles: ["div.suggestions-list-container{position:relative;width:100%}cdk-virtual-scroll-viewport{width:100%;position:absolute;top:0;left:0;z-index:10;background:white;overflow-y:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;list-style:none;margin:inherit;padding:inherit}ul.suggestions-list{list-style:none;margin:0;padding:0}li.suggestion{width:100%;padding:.5em;font-size:1em}li.suggestion:hover,.suggestion-selected{background-color:var(--vd-info)}li.suggestion:hover{cursor:pointer;background-color:#dfdfdf}input.autocomplete::-ms-clear{display:none}input.autocomplete{padding-right:30px}.autocomplete-form-group{position:relative}.autocomplete-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.autocomplete-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .autocomplete-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .autocomplete-clear-button.btn:hover .svg-inline--fa{color:#000!important}\n"] }]
6196
+ ], template: "<!--\n Accessible autocomplete widget following the listbox combobox pattern.\n ref: https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/listbox-combo.html\n-->\n<div\n class=\"form-group autocomplete-form-group\"\n [class.has-danger]=\"hasErrorsToDisplay()\"\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [attr.aria-expanded]=\"shouldDisplayListbox()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <label\n [attr.for]=\"buildChildId()\"\n *ngIf=\"!!label\"\n [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\n [attr.id]=\"buildChildId() + 'Label'\"\n >\n <span [innerHTML]=\"label\"></span>\n <span\n *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n aria-hidden=\"true\"\n >\n {{ 'foehn-input.optional' | fromDictionary }}\n </span>\n </label>\n\n <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n <div *ngIf=\"!elements\">Chargement...</div>\n\n <small\n *ngIf=\"helpText\"\n [attr.id]=\"buildChildId() + 'Help'\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <ng-content></ng-content>\n\n <div class=\"sr-only\">\n Utilisez les fl\u00E8ches haut et bas pour naviguer dans la liste, puis la\n touche Entrer pour s\u00E9lectionner une option.\n </div>\n\n <!-- Give screen reader users the total of results when then input changes. -->\n <div\n class=\"sr-only\"\n aria-live=\"polite\"\n role=\"status\"\n aria-atomic=\"true\"\n *ngIf=\"displayedElements && shouldDisplayListbox()\"\n >\n Nombre de r\u00E9sultats: {{ displayedElements.length }}\n <!-- Trick to have NVDA re-reading this properly -->\n <span>{{ notificationMessageUpdated ? ',' : ',,' }}</span>\n </div>\n\n <input\n [class.is-invalid]=\"hasErrorsToDisplay()\"\n class=\"form-control autocomplete\"\n type=\"text\"\n role=\"textbox\"\n [name]=\"name || label\"\n [attr.id]=\"buildChildId()\"\n [attr.placeholder]=\"placeholder || null\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n [attr.aria-describedby]=\"getDescribedBy()\"\n [attr.aria-required]=\"required || null\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.autocomplete]=\"'off'\"\n [attr.aria-activedescendant]=\"getActiveDescendantId()\"\n [attr.aria-owns]=\"\n shouldDisplayListbox() ? buildChildId() + 'Listbox' : null\n \"\n [attr.list]=\"buildChildId() + 'list'\"\n [(ngModel)]=\"inputValue\"\n (ngModelChange)=\"showSuggestionsWhenInputHasFocusAndIsEmpty($event)\"\n (paste)=\"onPaste($event)\"\n (focus)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n (click)=\"onInputClick()\"\n autocomplete=\"off\"\n #entryComponent\n />\n\n <button\n type=\"button\"\n *ngIf=\"displayClearButton() | async\"\n class=\"autocomplete-clear-button btn\"\n (click)=\"onClear()\"\n [id]=\"buildChildId() + 'Clear'\"\n >\n <foehn-icon-times\n class=\"autocomplete-clear-button-icon\"\n title=\"R\u00E9initialiser le champ\"\n ></foehn-icon-times>\n </button>\n\n <div\n class=\"form-group suggestions-list-container\"\n *ngIf=\"shouldDisplayListbox()\"\n >\n <cdk-virtual-scroll-viewport\n [itemSize]=\"itemHeightInSuggestionListInPx\"\n [style.height.px]=\"VIEW_PORT_HEIGHT\"\n >\n <ul\n [attr.id]=\"buildChildId() + 'Listbox'\"\n [attr.aria-labelledby]=\"buildChildId() + 'Label'\"\n role=\"listbox\"\n class=\"suggestions-list\"\n #suggestionsList\n >\n <li\n tabindex=\"-1\"\n role=\"option\"\n class=\"suggestion\"\n *cdkVirtualFor=\"\n let element of displayedElements;\n index as i\n \"\n [attr.id]=\"buildChildId() + 'Option' + i\"\n (click)=\"onClickSuggestion(element)\"\n (mousedown)=\"onListOptionMouseDown($event)\"\n (focus)=\"onListOptionFocus()\"\n (blur)=\"onListOptionBlur()\"\n [style.height.px]=\"itemHeightInSuggestionListInPx\"\n >\n <!-- Ensures that screen readers don't consider any spaces around the emphasis -->\n <span [innerHtml]=\"getLabelWithEmphasis(element)\"></span>\n </li>\n </ul>\n </cdk-virtual-scroll-viewport>\n </div>\n</div>\n", styles: ["div.suggestions-list-container{position:relative;width:100%}cdk-virtual-scroll-viewport{width:100%;position:absolute;top:0;left:0;z-index:10;background:white;overflow-y:auto;box-shadow:0 4px 8px #0003,0 6px 20px #00000030;list-style:none;margin:inherit;padding:inherit}ul.suggestions-list{list-style:none;margin:0;padding:0}li.suggestion{width:100%;padding:.5em;font-size:1em}li.suggestion:hover,.suggestion-selected{background-color:var(--vd-info)}li.suggestion:hover{cursor:pointer;background-color:#dfdfdf}input.autocomplete::-ms-clear{display:none}input.autocomplete{padding-right:30px}.autocomplete-form-group{position:relative}.autocomplete-clear-button{position:absolute;bottom:4px;right:4px;height:30px;width:30px;background:none;border:none}.autocomplete-clear-button-icon{top:4px;right:8px;position:absolute}:host ::ng-deep .autocomplete-clear-button.btn .svg-inline--fa{color:#595959!important}:host ::ng-deep .autocomplete-clear-button.btn:hover .svg-inline--fa{color:#000!important}\n"] }]
6193
6197
  }], ctorParameters: function () { return [{ type: i0.NgZone }]; }, propDecorators: { virtualScrollViewport: [{
6194
6198
  type: ViewChild,
6195
6199
  args: [CdkVirtualScrollViewport]
@@ -6205,6 +6209,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
6205
6209
  type: Input
6206
6210
  }], customValueModelGenerator: [{
6207
6211
  type: Input
6212
+ }], itemHeightInSuggestionListInPx: [{
6213
+ type: Input
6208
6214
  }] } });
6209
6215
 
6210
6216
  class SdkDictionaryModule {
@@ -8876,7 +8882,7 @@ FoehnInputAddressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
8876
8882
  useExisting: forwardRef(() => FoehnInputAddressComponent),
8877
8883
  multi: true
8878
8884
  }
8879
- ], viewQueries: [{ propertyName: "foreignLocalityComponent", first: true, predicate: FoehnInputForeignLocalityComponent, descendants: true }, { propertyName: "foreignStreetComponent", first: true, predicate: FoehnInputForeignStreetComponent, descendants: true }, { propertyName: "foreignHouseNumber", first: true, predicate: ["foreignHouseNumber"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n [attr.id]=\"buildId() + 'Container'\"\n class=\"form-group\"\n [class.has-danger]=\"hasErrorsToDisplay()\"\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [tabIndex]=\"-1\"\n>\n <fieldset\n class=\"mb-3\"\n [attr.aria-describedby]=\"getDescribedBy()\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n >\n <legend *ngIf=\"!!label\" [ngClass]=\"isLabelSrOnly ? 'sr-only' : 'vd-p'\">\n <span [innerHTML]=\"label\"></span>\n <span\n *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n aria-hidden=\"true\"\n >\n {{ 'foehn-input.optional' | fromDictionary }}\n </span>\n </legend>\n\n <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n <small\n *ngIf=\"helpText\"\n [attr.id]=\"buildId() + 'Help'\"\n class=\"text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <ng-content></ng-content>\n\n <foehn-autocomplete\n *ngIf=\"!isOnlySwiss\"\n [label]=\"'foehn-input-address.country.label' | fromDictionary\"\n [elements]=\"countries | async\"\n elementLabel=\"shortNameFr\"\n [elementValue]=\"identity\"\n [elementValueIdentity]=\"countryIdentity\"\n (modelChange)=\"countryUpdated($event)\"\n (userInput)=\"userInputCountry()\"\n [model]=\"country\"\n [name]=\"name + '.country'\"\n [required]=\"countryRequired\"\n [disabled]=\"disabled\"\n ></foehn-autocomplete>\n\n <ng-container *ngIf=\"isSwiss()\">\n <foehn-autocomplete\n [label]=\"'foehn-input-address.locality.label' | fromDictionary\"\n [elements]=\"localities | async\"\n [elementLabel]=\"getLocalityDisplayedName\"\n [elementValue]=\"identity\"\n [elementValueIdentity]=\"localityIdentity\"\n (modelChange)=\"localityUpdated($event)\"\n (userInput)=\"userInputLocality($event)\"\n [model]=\"locality\"\n [name]=\"name + '.locality'\"\n [required]=\"swissNpaLocalityRequired\"\n [allElementDisabled]=\"!country\"\n [disabled]=\"disabled\"\n ></foehn-autocomplete>\n\n <foehn-autocomplete\n [label]=\"'foehn-input-address.street.label' | fromDictionary\"\n [elements]=\"streets | async\"\n elementLabel=\"longName\"\n [elementValue]=\"identity\"\n [elementValueIdentity]=\"streetIdentity\"\n (modelChange)=\"streetUpdated($event)\"\n [model]=\"street\"\n [name]=\"name + '.street'\"\n [allowCustomValue]=\"true\"\n [customValueModelGenerator]=\"streetGenerator\"\n [required]=\"streetRequired\"\n [helpText]=\"\n 'foehn-input-address.street.help-text' | fromDictionary\n \"\n [allElementDisabled]=\"!country\"\n (userInput)=\"userInputStreet($event)\"\n [disabled]=\"disabled\"\n ></foehn-autocomplete>\n\n <foehn-autocomplete\n [label]=\"\n 'foehn-input-address.houseNumber.label' | fromDictionary\n \"\n [elements]=\"streetNumbers | async\"\n elementLabel=\"name\"\n elementValue=\"name\"\n [(model)]=\"houseNumber\"\n [name]=\"name + '.houseNumber'\"\n [allowCustomValue]=\"true\"\n [helpText]=\"\n 'foehn-input-address.houseNumber.help-text' | fromDictionary\n \"\n [allElementDisabled]=\"!country\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n [required]=\"streetNumberRequired\"\n [disabled]=\"disabled\"\n ></foehn-autocomplete>\n </ng-container>\n\n <ng-container *ngIf=\"!isSwiss()\">\n <!--\n Component <foehn-input-foreign-locality> is special because we use the same model when swiss or foreigner.\n To do so, we need:\n - Errors will be bind on 'locality' when NULL or on 'zipCode' and 'longName' model inside component when EMPTY\n - Hide label from component because we need label from children to be displayed (isLabelSrOnly: true)\n - required and disabled params are transmitted to children\n -->\n <foehn-input-foreign-locality\n [label]=\"'foehn-input-address.locality.label' | fromDictionary\"\n [name]=\"name + '.locality'\"\n [(model)]=\"locality\"\n [zipCodeRequired]=\"foreignZipCodeRequired\"\n [localityRequired]=\"foreignLocalityRequired\"\n [isLabelSrOnly]=\"true\"\n [disabled]=\"!country || disabled\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n ></foehn-input-foreign-locality>\n <!--\n Component <foehn-input-foreign-street> is special because we use the same model when swiss or foreigner.\n To do so, we need:\n - Errors will be bind on 'street' when NULL or on 'longName' model inside component when EMPTY\n - required, helpText, isLabelSrOnly and disabled params are transmitted to children\n -->\n <foehn-input-foreign-street\n [label]=\"'foehn-input-address.street.label' | fromDictionary\"\n [name]=\"name + '.street'\"\n [(model)]=\"street\"\n [required]=\"foreignStreetRequired\"\n [helpText]=\"\n 'foehn-input-address.street.help-text' | fromDictionary\n \"\n [disabled]=\"!country || disabled\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n ></foehn-input-foreign-street>\n\n <foehn-input-text\n #foreignHouseNumber\n [label]=\"\n 'foehn-input-address.houseNumber.label' | fromDictionary\n \"\n [name]=\"name + '.houseNumber'\"\n [(model)]=\"houseNumber\"\n [helpText]=\"\n 'foehn-input-address.houseNumber.help-text' | fromDictionary\n \"\n [disabled]=\"!country || disabled\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n [required]=\"foreignStreetNumberRequired\"\n ></foehn-input-text>\n </ng-container>\n\n <foehn-input-text\n *ngIf=\"showPostOfficeBoxText\"\n [(model)]=\"postOfficeBoxText\"\n [helpText]=\"\n 'foehn-input-address.postOfficeBoxText.help-text'\n | fromDictionary\n \"\n [label]=\"\n 'foehn-input-address.postOfficeBoxText.label' | fromDictionary\n \"\n [name]=\"name + '.postOfficeBoxText'\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n [required]=\"postOfficeBoxTextRequired\"\n [disabled]=\"disabled\"\n ></foehn-input-text>\n\n <foehn-input-text\n *ngIf=\"showAdressLines && showAdressLine1\"\n [(model)]=\"addressLine1\"\n [label]=\"'foehn-input-address.addressLine1.label' | fromDictionary\"\n [name]=\"name + '.addressLine1'\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n [required]=\"addressLine1Required\"\n [autocomplete]=\"'address-line2'\"\n [disabled]=\"disabled\"\n ></foehn-input-text>\n\n <foehn-input-text\n *ngIf=\"showAdressLines && showAdressLine2\"\n [(model)]=\"addressLine2\"\n [label]=\"'foehn-input-address.addressLine2.label' | fromDictionary\"\n [name]=\"name + '.addressLine2'\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n [required]=\"addressLine2Required\"\n [autocomplete]=\"'address-line3'\"\n [disabled]=\"disabled\"\n ></foehn-input-text>\n </fieldset>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: ["searchValueMinCharsCount", "allowCustomValue", "customValueModelGenerator"] }, { type: FoehnInputForeignLocalityComponent, selector: "foehn-input-foreign-locality", inputs: ["localityRequired", "zipCodeRequired"] }, { type: FoehnInputForeignStreetComponent, selector: "foehn-input-foreign-street" }, { type: FoehnInputTextComponent, selector: "foehn-input-text", inputs: ["numberOnly"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
8885
+ ], viewQueries: [{ propertyName: "foreignLocalityComponent", first: true, predicate: FoehnInputForeignLocalityComponent, descendants: true }, { propertyName: "foreignStreetComponent", first: true, predicate: FoehnInputForeignStreetComponent, descendants: true }, { propertyName: "foreignHouseNumber", first: true, predicate: ["foreignHouseNumber"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\n [attr.id]=\"buildId() + 'Container'\"\n class=\"form-group\"\n [class.has-danger]=\"hasErrorsToDisplay()\"\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [tabIndex]=\"-1\"\n>\n <fieldset\n class=\"mb-3\"\n [attr.aria-describedby]=\"getDescribedBy()\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n >\n <legend *ngIf=\"!!label\" [ngClass]=\"isLabelSrOnly ? 'sr-only' : 'vd-p'\">\n <span [innerHTML]=\"label\"></span>\n <span\n *ngIf=\"!required && !hideNotRequiredExtraLabel\"\n aria-hidden=\"true\"\n >\n {{ 'foehn-input.optional' | fromDictionary }}\n </span>\n </legend>\n\n <foehn-validation-alerts [component]=\"this\"></foehn-validation-alerts>\n\n <small\n *ngIf=\"helpText\"\n [attr.id]=\"buildId() + 'Help'\"\n class=\"text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <ng-content></ng-content>\n\n <foehn-autocomplete\n *ngIf=\"!isOnlySwiss\"\n [label]=\"'foehn-input-address.country.label' | fromDictionary\"\n [elements]=\"countries | async\"\n elementLabel=\"shortNameFr\"\n [elementValue]=\"identity\"\n [elementValueIdentity]=\"countryIdentity\"\n (modelChange)=\"countryUpdated($event)\"\n (userInput)=\"userInputCountry()\"\n [model]=\"country\"\n [name]=\"name + '.country'\"\n [required]=\"countryRequired\"\n [disabled]=\"disabled\"\n ></foehn-autocomplete>\n\n <ng-container *ngIf=\"isSwiss()\">\n <foehn-autocomplete\n [label]=\"'foehn-input-address.locality.label' | fromDictionary\"\n [elements]=\"localities | async\"\n [elementLabel]=\"getLocalityDisplayedName\"\n [elementValue]=\"identity\"\n [elementValueIdentity]=\"localityIdentity\"\n (modelChange)=\"localityUpdated($event)\"\n (userInput)=\"userInputLocality($event)\"\n [model]=\"locality\"\n [name]=\"name + '.locality'\"\n [required]=\"swissNpaLocalityRequired\"\n [allElementDisabled]=\"!country\"\n [disabled]=\"disabled\"\n ></foehn-autocomplete>\n\n <foehn-autocomplete\n [label]=\"'foehn-input-address.street.label' | fromDictionary\"\n [elements]=\"streets | async\"\n elementLabel=\"longName\"\n [elementValue]=\"identity\"\n [elementValueIdentity]=\"streetIdentity\"\n (modelChange)=\"streetUpdated($event)\"\n [model]=\"street\"\n [name]=\"name + '.street'\"\n [allowCustomValue]=\"true\"\n [customValueModelGenerator]=\"streetGenerator\"\n [required]=\"streetRequired\"\n [helpText]=\"\n 'foehn-input-address.street.help-text' | fromDictionary\n \"\n [allElementDisabled]=\"!country\"\n (userInput)=\"userInputStreet($event)\"\n [disabled]=\"disabled\"\n ></foehn-autocomplete>\n\n <foehn-autocomplete\n [label]=\"\n 'foehn-input-address.houseNumber.label' | fromDictionary\n \"\n [elements]=\"streetNumbers | async\"\n elementLabel=\"name\"\n elementValue=\"name\"\n [(model)]=\"houseNumber\"\n [name]=\"name + '.houseNumber'\"\n [allowCustomValue]=\"true\"\n [helpText]=\"\n 'foehn-input-address.houseNumber.help-text' | fromDictionary\n \"\n [allElementDisabled]=\"!country\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n [required]=\"streetNumberRequired\"\n [disabled]=\"disabled\"\n ></foehn-autocomplete>\n </ng-container>\n\n <ng-container *ngIf=\"!isSwiss()\">\n <!--\n Component <foehn-input-foreign-locality> is special because we use the same model when swiss or foreigner.\n To do so, we need:\n - Errors will be bind on 'locality' when NULL or on 'zipCode' and 'longName' model inside component when EMPTY\n - Hide label from component because we need label from children to be displayed (isLabelSrOnly: true)\n - required and disabled params are transmitted to children\n -->\n <foehn-input-foreign-locality\n [label]=\"'foehn-input-address.locality.label' | fromDictionary\"\n [name]=\"name + '.locality'\"\n [(model)]=\"locality\"\n [zipCodeRequired]=\"foreignZipCodeRequired\"\n [localityRequired]=\"foreignLocalityRequired\"\n [isLabelSrOnly]=\"true\"\n [disabled]=\"!country || disabled\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n ></foehn-input-foreign-locality>\n <!--\n Component <foehn-input-foreign-street> is special because we use the same model when swiss or foreigner.\n To do so, we need:\n - Errors will be bind on 'street' when NULL or on 'longName' model inside component when EMPTY\n - required, helpText, isLabelSrOnly and disabled params are transmitted to children\n -->\n <foehn-input-foreign-street\n [label]=\"'foehn-input-address.street.label' | fromDictionary\"\n [name]=\"name + '.street'\"\n [(model)]=\"street\"\n [required]=\"foreignStreetRequired\"\n [helpText]=\"\n 'foehn-input-address.street.help-text' | fromDictionary\n \"\n [disabled]=\"!country || disabled\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n ></foehn-input-foreign-street>\n\n <foehn-input-text\n #foreignHouseNumber\n [label]=\"\n 'foehn-input-address.houseNumber.label' | fromDictionary\n \"\n [name]=\"name + '.houseNumber'\"\n [(model)]=\"houseNumber\"\n [helpText]=\"\n 'foehn-input-address.houseNumber.help-text' | fromDictionary\n \"\n [disabled]=\"!country || disabled\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n [required]=\"foreignStreetNumberRequired\"\n ></foehn-input-text>\n </ng-container>\n\n <foehn-input-text\n *ngIf=\"showPostOfficeBoxText\"\n [(model)]=\"postOfficeBoxText\"\n [helpText]=\"\n 'foehn-input-address.postOfficeBoxText.help-text'\n | fromDictionary\n \"\n [label]=\"\n 'foehn-input-address.postOfficeBoxText.label' | fromDictionary\n \"\n [name]=\"name + '.postOfficeBoxText'\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n [required]=\"postOfficeBoxTextRequired\"\n [disabled]=\"disabled\"\n ></foehn-input-text>\n\n <foehn-input-text\n *ngIf=\"showAdressLines && showAdressLine1\"\n [(model)]=\"addressLine1\"\n [label]=\"'foehn-input-address.addressLine1.label' | fromDictionary\"\n [name]=\"name + '.addressLine1'\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n [required]=\"addressLine1Required\"\n [autocomplete]=\"'address-line2'\"\n [disabled]=\"disabled\"\n ></foehn-input-text>\n\n <foehn-input-text\n *ngIf=\"showAdressLines && showAdressLine2\"\n [(model)]=\"addressLine2\"\n [label]=\"'foehn-input-address.addressLine2.label' | fromDictionary\"\n [name]=\"name + '.addressLine2'\"\n (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n [required]=\"addressLine2Required\"\n [autocomplete]=\"'address-line3'\"\n [disabled]=\"disabled\"\n ></foehn-input-text>\n </fieldset>\n</div>\n", components: [{ type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: ["searchValueMinCharsCount", "allowCustomValue", "customValueModelGenerator", "itemHeightInSuggestionListInPx"] }, { type: FoehnInputForeignLocalityComponent, selector: "foehn-input-foreign-locality", inputs: ["localityRequired", "zipCodeRequired"] }, { type: FoehnInputForeignStreetComponent, selector: "foehn-input-foreign-street" }, { type: FoehnInputTextComponent, selector: "foehn-input-text", inputs: ["numberOnly"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "fromDictionary": SdkDictionaryPipe, "async": i3.AsyncPipe } });
8880
8886
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnInputAddressComponent, decorators: [{
8881
8887
  type: Component,
8882
8888
  args: [{ selector: 'foehn-input-address', providers: [
@@ -9203,7 +9209,7 @@ FoehnMultiselectAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVer
9203
9209
  useExisting: forwardRef(() => FoehnMultiselectAutocompleteComponent),
9204
9210
  multi: true
9205
9211
  }
9206
- ], viewQueries: [{ propertyName: "autocompleteComponent", first: true, predicate: ["autocompleteComponent"], descendants: true }, { propertyName: "alertMessageContainer", first: true, predicate: ["alertMessageContainer"], descendants: true }, { propertyName: "defaultDeleteFocusArea", first: true, predicate: ["defaultDeleteFocusArea"], descendants: true }, { propertyName: "selectedElemRef", predicate: ["selectedElemRef"], descendants: true }, { propertyName: "defaultElemRef", predicate: ["defaultElemRef"], 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 [showErrorWhenDisabled]=\"showErrorWhenDisabled\"\n [hideNotRequiredExtraLabel]=\"hideNotRequiredExtraLabel\"\n>\n <small\n *ngIf=\"!showEmptyListMessage\"\n [attr.id]=\"buildChildId('Help')\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"\n helpText\n ? helpText\n : ('foehn-multiselect-autocomplete.autocomplete.screen-reader.label'\n | fromDictionary)\n \"\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 mb-0\"\n tabindex=\"0\"\n >\n {{\n 'foehn-multiselect-autocomplete.autocomplete.empty-message'\n | fromDictionary\n }}\n </p>\n </div>\n</foehn-autocomplete>\n\n<p class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ srAnnouncements }}\n</p>\n\n<div\n class=\"form-group selected-list-container d-flex align-content-stretch flex-wrap\"\n [ngClass]=\"!!model && !!model.length ? 'pt-2' : 'pt-0'\"\n [class.has-danger]=\"hasErrorsToDisplay()\"\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n tabindex=\"-1\"\n>\n <span\n *ngIf=\"hasDefaultDeleteFocusArea()\"\n class=\"sr-only\"\n [tabindex]=\"0\"\n [innerHTML]=\"\n 'foehn-multiselect-autocomplete.sr-default-focus.no-element-to-delete'\n | fromDictionary\n \"\n #defaultDeleteFocusArea\n ></span>\n <ng-container\n *ngFor=\"let element of model; let index = index; trackBy: trackByFn\"\n >\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 {{\n 'foehn-multiselect-autocomplete.sr-default-selected-element'\n | fromDictionary\n }}\n </span>\n </span>\n <button\n *ngIf=\"canBeDeleted(index)\"\n class=\"btn btn-danger 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 var(--vd-focus)}:host ::ng-deep foehn-autocomplete .form-group{margin-bottom:0!important}.selected-list-container button>.btn,.btn-link{line-height:inherit;padding:0}.selected-list-container .btn{text-transform:none}:host ::ng-deep .btn .svg-inline--fa{color:#fff!important}.selected-list-container span.badge-pill:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}\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 } });
9212
+ ], viewQueries: [{ propertyName: "autocompleteComponent", first: true, predicate: ["autocompleteComponent"], descendants: true }, { propertyName: "alertMessageContainer", first: true, predicate: ["alertMessageContainer"], descendants: true }, { propertyName: "defaultDeleteFocusArea", first: true, predicate: ["defaultDeleteFocusArea"], descendants: true }, { propertyName: "selectedElemRef", predicate: ["selectedElemRef"], descendants: true }, { propertyName: "defaultElemRef", predicate: ["defaultElemRef"], 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 [showErrorWhenDisabled]=\"showErrorWhenDisabled\"\n [hideNotRequiredExtraLabel]=\"hideNotRequiredExtraLabel\"\n>\n <small\n *ngIf=\"!showEmptyListMessage\"\n [attr.id]=\"buildChildId('Help')\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"\n helpText\n ? helpText\n : ('foehn-multiselect-autocomplete.autocomplete.screen-reader.label'\n | fromDictionary)\n \"\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 mb-0\"\n tabindex=\"0\"\n >\n {{\n 'foehn-multiselect-autocomplete.autocomplete.empty-message'\n | fromDictionary\n }}\n </p>\n </div>\n</foehn-autocomplete>\n\n<p class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n {{ srAnnouncements }}\n</p>\n\n<div\n class=\"form-group selected-list-container d-flex align-content-stretch flex-wrap\"\n [ngClass]=\"!!model && !!model.length ? 'pt-2' : 'pt-0'\"\n [class.has-danger]=\"hasErrorsToDisplay()\"\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n tabindex=\"-1\"\n>\n <span\n *ngIf=\"hasDefaultDeleteFocusArea()\"\n class=\"sr-only\"\n [tabindex]=\"0\"\n [innerHTML]=\"\n 'foehn-multiselect-autocomplete.sr-default-focus.no-element-to-delete'\n | fromDictionary\n \"\n #defaultDeleteFocusArea\n ></span>\n <ng-container\n *ngFor=\"let element of model; let index = index; trackBy: trackByFn\"\n >\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 {{\n 'foehn-multiselect-autocomplete.sr-default-selected-element'\n | fromDictionary\n }}\n </span>\n </span>\n <button\n *ngIf=\"canBeDeleted(index)\"\n class=\"btn btn-danger 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 var(--vd-focus)}:host ::ng-deep foehn-autocomplete .form-group{margin-bottom:0!important}.selected-list-container button>.btn,.btn-link{line-height:inherit;padding:0}.selected-list-container .btn{text-transform:none}:host ::ng-deep .btn .svg-inline--fa{color:#fff!important}.selected-list-container span.badge-pill:focus{outline:0;box-shadow:inset 0 1px 1px #00000013,0 0 0 .2rem var(--vd-focus)}\n"], components: [{ type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: ["searchValueMinCharsCount", "allowCustomValue", "customValueModelGenerator", "itemHeightInSuggestionListInPx"] }, { 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 } });
9207
9213
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FoehnMultiselectAutocompleteComponent, decorators: [{
9208
9214
  type: Component,
9209
9215
  args: [{ selector: 'foehn-multiselect-autocomplete', providers: [