@dsivd/prestations-ng 16.4.8-beta.1 → 16.4.8-beta.3

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.
@@ -4740,8 +4740,10 @@ class FoehnTableComponent {
4740
4740
  this.sortChange = new EventEmitter();
4741
4741
  this.currentPage = 1;
4742
4742
  this.filteredList = [];
4743
+ this.trackByFn = (index,
4743
4744
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
4744
- this.trackByFn = (index, item) => index;
4745
+ item) => index;
4746
+ this.trackFoehnTableColumnConfiguration = (index, item) => item.id || item.columnLabelKey || index;
4745
4747
  }
4746
4748
  set list(list) {
4747
4749
  this._list = list;
@@ -4834,10 +4836,10 @@ class FoehnTableComponent {
4834
4836
  }
4835
4837
  }
4836
4838
  FoehnTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FoehnTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4837
- FoehnTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FoehnTableComponent, selector: "foehn-table", inputs: { itemsPerPage: "itemsPerPage", id: "id", previousLabel: "previousLabel", nextLabel: "nextLabel", totalElements: "totalElements", fixedPageCount: "fixedPageCount", columnsConfiguration: "columnsConfiguration", sort: "sort", list: "list", trackByFn: "trackByFn" }, outputs: { pageChange: "pageChange", sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" [id]=\"id\">\n <div class=\"col-12\">\n <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n {{ 'foehn-table.totalElements.1' | fromDictionary }}\n </h4>\n <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n {{\n 'foehn-table.totalElements'\n | fromDictionary: { total: totalElements.toString() }\n }}\n </h4>\n </div>\n\n <div class=\"col-12 table-responsive\">\n <table class=\"table table-hover\">\n <thead class=\"vd-bg-pattern-bars-gray\">\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let col of columnsConfiguration\"\n [id]=\"col.id\"\n >\n <ng-container\n *ngIf=\"!filteredList.length || !col.sortAttribute\"\n >\n <span\n [innerHTML]=\"\n col.columnLabelKey | fromDictionary\n \"\n ></span>\n </ng-container>\n\n <ng-container\n *ngIf=\"!!filteredList.length && !!col.sortAttribute\"\n >\n <a\n href=\"#\"\n class=\"vd-text-thin\"\n (click)=\"\n $event.preventDefault();\n triggerSort(col.sortAttribute)\n \"\n [title]=\"\n 'Trier par ' +\n (col.columnLabelKey | fromDictionary)\n \"\n >\n <span\n [innerHTML]=\"\n col.columnLabelKey | fromDictionary\n \"\n ></span>\n <ng-container\n *ngIf=\"\n sort.sortAttribute === col.sortAttribute\n \"\n >\n <span\n class=\"ml-3\"\n *ngIf=\"sort.sortDirection === 'ASC'\"\n >\n <foehn-icon-chevron-up></foehn-icon-chevron-up>\n </span>\n <span\n class=\"ml-3\"\n *ngIf=\"sort.sortDirection === 'DESC'\"\n >\n <foehn-icon-chevron-down></foehn-icon-chevron-down>\n </span>\n </ng-container>\n </a>\n </ng-container>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"\n let item of filteredList;\n let index = index;\n trackBy: trackByFn\n \"\n >\n <td\n *ngFor=\"let col of columnsConfiguration\"\n [id]=\"col.id + '-' + index\"\n >\n <ng-container *ngIf=\"!!col.isImportant\">\n <span\n *ngIf=\"col.isImportant(item)\"\n class=\"cell-vertical-align-middle\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"30\"\n height=\"30\"\n style=\"color: var(--red)\"\n fill=\"currentColor\"\n class=\"bi bi-exclamation\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n />\n </svg>\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"!!col.iconGetter\">\n <span\n *ngIf=\"col.iconGetter(item) as iconDef\"\n class=\"cell-vertical-align-middle mr-2\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [icon]=\"iconDef.icon\"\n [title]=\"iconDef.label\"\n ></fa-icon>\n <span class=\"sr-only\">{{ iconDef.label }}</span>\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"!!col.template\">\n <ng-template\n [ngTemplateOutlet]=\"col.template\"\n [ngTemplateOutletContext]=\"{\n item: item,\n index: index\n }\"\n ></ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"!col.template\">\n <span\n [innerHTML]=\"col.valueGetter(item)\"\n class=\"cell-vertical-align-middle\"\n ></span>\n </ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!!columnsConfiguration && !filteredList.length\">\n <td [colSpan]=\"columnsConfiguration.length\">\n <div class=\"w-100 text-center\">\n {{ 'foehn-table.totalElements.0' | fromDictionary }}\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n\n <div class=\"row d-flex justify-content-between p-1\">\n <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n <nav\n class=\"vd-pagination\"\n aria-label=\"Pagination\"\n *ngIf=\"hasPreviousPage()\"\n >\n <ul class=\"vd-pagination__list\">\n <li\n class=\"vd-pagination__item vd-pagination__item--previous\"\n >\n <button\n class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n (click)=\"previousPage()\"\n >\n <span class=\"vd-pagination__title\">\n <foehn-icon-chevron-left></foehn-icon-chevron-left>\n {{ previousLabel }}\n </span>\n <span class=\"sr-only\">:</span>\n <span class=\"vd-pagination__label\">\n {{ currentPage - 1 }} sur {{ pagesCount() }}\n </span>\n </button>\n </li>\n </ul>\n </nav>\n </div>\n\n <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n <nav\n class=\"vd-pagination\"\n aria-label=\"Pagination\"\n *ngIf=\"hasNextPage()\"\n >\n <ul class=\"vd-pagination__list\">\n <li\n class=\"vd-pagination__item vd-pagination__item--next\"\n >\n <button\n class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n (click)=\"nextPage()\"\n >\n <span class=\"vd-pagination__title\">\n {{ nextLabel }}\n <foehn-icon-chevron-right></foehn-icon-chevron-right>\n </span>\n <span class=\"sr-only\">:</span>\n <span class=\"vd-pagination__label\">\n {{ currentPage + 1 }} sur {{ pagesCount() }}\n </span>\n </button>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}.cell-vertical-align-middle{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoehnIconChevronDownComponent, selector: "foehn-icon-chevron-down" }, { kind: "component", type: FoehnIconChevronUpComponent, selector: "foehn-icon-chevron-up" }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { kind: "component", type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] });
4839
+ FoehnTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FoehnTableComponent, selector: "foehn-table", inputs: { itemsPerPage: "itemsPerPage", id: "id", previousLabel: "previousLabel", nextLabel: "nextLabel", totalElements: "totalElements", fixedPageCount: "fixedPageCount", columnsConfiguration: "columnsConfiguration", sort: "sort", list: "list", trackByFn: "trackByFn" }, outputs: { pageChange: "pageChange", sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\" [id]=\"id\">\n <div class=\"col-12\">\n <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n {{ 'foehn-table.totalElements.1' | fromDictionary }}\n </h4>\n <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n {{\n 'foehn-table.totalElements'\n | fromDictionary: { total: totalElements.toString() }\n }}\n </h4>\n </div>\n\n <div class=\"col-12 table-responsive\">\n <table class=\"table table-hover\">\n <thead class=\"vd-bg-pattern-bars-gray\">\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let col of columnsConfiguration\"\n [id]=\"col.id\"\n >\n <ng-container\n *ngIf=\"!filteredList.length || !col.sortAttribute\"\n >\n <span\n [innerHTML]=\"\n col.columnLabelKey | fromDictionary\n \"\n ></span>\n </ng-container>\n\n <ng-container\n *ngIf=\"!!filteredList.length && !!col.sortAttribute\"\n >\n <a\n href=\"#\"\n class=\"vd-text-thin\"\n (click)=\"\n $event.preventDefault();\n triggerSort(col.sortAttribute)\n \"\n [title]=\"\n 'Trier par ' +\n (col.columnLabelKey | fromDictionary)\n \"\n >\n <span\n [innerHTML]=\"\n col.columnLabelKey | fromDictionary\n \"\n ></span>\n <ng-container\n *ngIf=\"\n sort.sortAttribute === col.sortAttribute\n \"\n >\n <span\n class=\"ml-3\"\n *ngIf=\"sort.sortDirection === 'ASC'\"\n >\n <foehn-icon-chevron-up></foehn-icon-chevron-up>\n </span>\n <span\n class=\"ml-3\"\n *ngIf=\"sort.sortDirection === 'DESC'\"\n >\n <foehn-icon-chevron-down></foehn-icon-chevron-down>\n </span>\n </ng-container>\n </a>\n </ng-container>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"\n let item of filteredList;\n let index = index;\n trackBy: trackByFn\n \"\n >\n <td\n *ngFor=\"\n let col of columnsConfiguration;\n trackBy: trackFoehnTableColumnConfiguration\n \"\n [id]=\"col.id + '-' + index\"\n >\n <ng-container *ngIf=\"!!col.isImportant\">\n <span\n *ngIf=\"col.isImportant(item)\"\n class=\"cell-vertical-align-middle\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"30\"\n height=\"30\"\n style=\"color: var(--red)\"\n fill=\"currentColor\"\n class=\"bi bi-exclamation\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n />\n </svg>\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"!!col.iconGetter\">\n <span\n *ngIf=\"col.iconGetter(item) as iconDef\"\n class=\"cell-vertical-align-middle mr-2\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [icon]=\"iconDef.icon\"\n [title]=\"iconDef.label\"\n ></fa-icon>\n <span class=\"sr-only\">{{ iconDef.label }}</span>\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"!!col.template\">\n <ng-template\n [ngTemplateOutlet]=\"col.template\"\n [ngTemplateOutletContext]=\"{\n item: item,\n index: index\n }\"\n ></ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"!col.template\">\n <span\n [innerHTML]=\"col.valueGetter(item)\"\n class=\"cell-vertical-align-middle\"\n ></span>\n </ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!!columnsConfiguration && !filteredList.length\">\n <td [colSpan]=\"columnsConfiguration.length\">\n <div class=\"w-100 text-center\">\n {{ 'foehn-table.totalElements.0' | fromDictionary }}\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n\n <div class=\"row d-flex justify-content-between p-1\">\n <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n <nav\n class=\"vd-pagination\"\n aria-label=\"Pagination\"\n *ngIf=\"hasPreviousPage()\"\n >\n <ul class=\"vd-pagination__list\">\n <li\n class=\"vd-pagination__item vd-pagination__item--previous\"\n >\n <button\n class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n (click)=\"previousPage()\"\n >\n <span class=\"vd-pagination__title\">\n <foehn-icon-chevron-left></foehn-icon-chevron-left>\n {{ previousLabel }}\n </span>\n <span class=\"sr-only\">:</span>\n <span class=\"vd-pagination__label\">\n {{ currentPage - 1 }} sur {{ pagesCount() }}\n </span>\n </button>\n </li>\n </ul>\n </nav>\n </div>\n\n <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n <nav\n class=\"vd-pagination\"\n aria-label=\"Pagination\"\n *ngIf=\"hasNextPage()\"\n >\n <ul class=\"vd-pagination__list\">\n <li\n class=\"vd-pagination__item vd-pagination__item--next\"\n >\n <button\n class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n (click)=\"nextPage()\"\n >\n <span class=\"vd-pagination__title\">\n {{ nextLabel }}\n <foehn-icon-chevron-right></foehn-icon-chevron-right>\n </span>\n <span class=\"sr-only\">:</span>\n <span class=\"vd-pagination__label\">\n {{ currentPage + 1 }} sur {{ pagesCount() }}\n </span>\n </button>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}.cell-vertical-align-middle{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: FoehnIconChevronDownComponent, selector: "foehn-icon-chevron-down" }, { kind: "component", type: FoehnIconChevronUpComponent, selector: "foehn-icon-chevron-up" }, { kind: "component", type: i1$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "component", type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { kind: "component", type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] });
4838
4840
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FoehnTableComponent, decorators: [{
4839
4841
  type: Component,
4840
- args: [{ selector: 'foehn-table', template: "<div class=\"row\" [id]=\"id\">\n <div class=\"col-12\">\n <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n {{ 'foehn-table.totalElements.1' | fromDictionary }}\n </h4>\n <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n {{\n 'foehn-table.totalElements'\n | fromDictionary: { total: totalElements.toString() }\n }}\n </h4>\n </div>\n\n <div class=\"col-12 table-responsive\">\n <table class=\"table table-hover\">\n <thead class=\"vd-bg-pattern-bars-gray\">\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let col of columnsConfiguration\"\n [id]=\"col.id\"\n >\n <ng-container\n *ngIf=\"!filteredList.length || !col.sortAttribute\"\n >\n <span\n [innerHTML]=\"\n col.columnLabelKey | fromDictionary\n \"\n ></span>\n </ng-container>\n\n <ng-container\n *ngIf=\"!!filteredList.length && !!col.sortAttribute\"\n >\n <a\n href=\"#\"\n class=\"vd-text-thin\"\n (click)=\"\n $event.preventDefault();\n triggerSort(col.sortAttribute)\n \"\n [title]=\"\n 'Trier par ' +\n (col.columnLabelKey | fromDictionary)\n \"\n >\n <span\n [innerHTML]=\"\n col.columnLabelKey | fromDictionary\n \"\n ></span>\n <ng-container\n *ngIf=\"\n sort.sortAttribute === col.sortAttribute\n \"\n >\n <span\n class=\"ml-3\"\n *ngIf=\"sort.sortDirection === 'ASC'\"\n >\n <foehn-icon-chevron-up></foehn-icon-chevron-up>\n </span>\n <span\n class=\"ml-3\"\n *ngIf=\"sort.sortDirection === 'DESC'\"\n >\n <foehn-icon-chevron-down></foehn-icon-chevron-down>\n </span>\n </ng-container>\n </a>\n </ng-container>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"\n let item of filteredList;\n let index = index;\n trackBy: trackByFn\n \"\n >\n <td\n *ngFor=\"let col of columnsConfiguration\"\n [id]=\"col.id + '-' + index\"\n >\n <ng-container *ngIf=\"!!col.isImportant\">\n <span\n *ngIf=\"col.isImportant(item)\"\n class=\"cell-vertical-align-middle\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"30\"\n height=\"30\"\n style=\"color: var(--red)\"\n fill=\"currentColor\"\n class=\"bi bi-exclamation\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n />\n </svg>\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"!!col.iconGetter\">\n <span\n *ngIf=\"col.iconGetter(item) as iconDef\"\n class=\"cell-vertical-align-middle mr-2\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [icon]=\"iconDef.icon\"\n [title]=\"iconDef.label\"\n ></fa-icon>\n <span class=\"sr-only\">{{ iconDef.label }}</span>\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"!!col.template\">\n <ng-template\n [ngTemplateOutlet]=\"col.template\"\n [ngTemplateOutletContext]=\"{\n item: item,\n index: index\n }\"\n ></ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"!col.template\">\n <span\n [innerHTML]=\"col.valueGetter(item)\"\n class=\"cell-vertical-align-middle\"\n ></span>\n </ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!!columnsConfiguration && !filteredList.length\">\n <td [colSpan]=\"columnsConfiguration.length\">\n <div class=\"w-100 text-center\">\n {{ 'foehn-table.totalElements.0' | fromDictionary }}\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n\n <div class=\"row d-flex justify-content-between p-1\">\n <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n <nav\n class=\"vd-pagination\"\n aria-label=\"Pagination\"\n *ngIf=\"hasPreviousPage()\"\n >\n <ul class=\"vd-pagination__list\">\n <li\n class=\"vd-pagination__item vd-pagination__item--previous\"\n >\n <button\n class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n (click)=\"previousPage()\"\n >\n <span class=\"vd-pagination__title\">\n <foehn-icon-chevron-left></foehn-icon-chevron-left>\n {{ previousLabel }}\n </span>\n <span class=\"sr-only\">:</span>\n <span class=\"vd-pagination__label\">\n {{ currentPage - 1 }} sur {{ pagesCount() }}\n </span>\n </button>\n </li>\n </ul>\n </nav>\n </div>\n\n <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n <nav\n class=\"vd-pagination\"\n aria-label=\"Pagination\"\n *ngIf=\"hasNextPage()\"\n >\n <ul class=\"vd-pagination__list\">\n <li\n class=\"vd-pagination__item vd-pagination__item--next\"\n >\n <button\n class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n (click)=\"nextPage()\"\n >\n <span class=\"vd-pagination__title\">\n {{ nextLabel }}\n <foehn-icon-chevron-right></foehn-icon-chevron-right>\n </span>\n <span class=\"sr-only\">:</span>\n <span class=\"vd-pagination__label\">\n {{ currentPage + 1 }} sur {{ pagesCount() }}\n </span>\n </button>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}.cell-vertical-align-middle{vertical-align:middle}\n"] }]
4842
+ args: [{ selector: 'foehn-table', template: "<div class=\"row\" [id]=\"id\">\n <div class=\"col-12\">\n <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n {{ 'foehn-table.totalElements.1' | fromDictionary }}\n </h4>\n <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n {{\n 'foehn-table.totalElements'\n | fromDictionary: { total: totalElements.toString() }\n }}\n </h4>\n </div>\n\n <div class=\"col-12 table-responsive\">\n <table class=\"table table-hover\">\n <thead class=\"vd-bg-pattern-bars-gray\">\n <tr>\n <th\n scope=\"col\"\n *ngFor=\"let col of columnsConfiguration\"\n [id]=\"col.id\"\n >\n <ng-container\n *ngIf=\"!filteredList.length || !col.sortAttribute\"\n >\n <span\n [innerHTML]=\"\n col.columnLabelKey | fromDictionary\n \"\n ></span>\n </ng-container>\n\n <ng-container\n *ngIf=\"!!filteredList.length && !!col.sortAttribute\"\n >\n <a\n href=\"#\"\n class=\"vd-text-thin\"\n (click)=\"\n $event.preventDefault();\n triggerSort(col.sortAttribute)\n \"\n [title]=\"\n 'Trier par ' +\n (col.columnLabelKey | fromDictionary)\n \"\n >\n <span\n [innerHTML]=\"\n col.columnLabelKey | fromDictionary\n \"\n ></span>\n <ng-container\n *ngIf=\"\n sort.sortAttribute === col.sortAttribute\n \"\n >\n <span\n class=\"ml-3\"\n *ngIf=\"sort.sortDirection === 'ASC'\"\n >\n <foehn-icon-chevron-up></foehn-icon-chevron-up>\n </span>\n <span\n class=\"ml-3\"\n *ngIf=\"sort.sortDirection === 'DESC'\"\n >\n <foehn-icon-chevron-down></foehn-icon-chevron-down>\n </span>\n </ng-container>\n </a>\n </ng-container>\n </th>\n </tr>\n </thead>\n <tbody>\n <tr\n *ngFor=\"\n let item of filteredList;\n let index = index;\n trackBy: trackByFn\n \"\n >\n <td\n *ngFor=\"\n let col of columnsConfiguration;\n trackBy: trackFoehnTableColumnConfiguration\n \"\n [id]=\"col.id + '-' + index\"\n >\n <ng-container *ngIf=\"!!col.isImportant\">\n <span\n *ngIf=\"col.isImportant(item)\"\n class=\"cell-vertical-align-middle\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"30\"\n height=\"30\"\n style=\"color: var(--red)\"\n fill=\"currentColor\"\n class=\"bi bi-exclamation\"\n viewBox=\"0 0 16 16\"\n >\n <path\n d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n />\n </svg>\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"!!col.iconGetter\">\n <span\n *ngIf=\"col.iconGetter(item) as iconDef\"\n class=\"cell-vertical-align-middle mr-2\"\n >\n <fa-icon\n aria-hidden=\"true\"\n [icon]=\"iconDef.icon\"\n [title]=\"iconDef.label\"\n ></fa-icon>\n <span class=\"sr-only\">{{ iconDef.label }}</span>\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"!!col.template\">\n <ng-template\n [ngTemplateOutlet]=\"col.template\"\n [ngTemplateOutletContext]=\"{\n item: item,\n index: index\n }\"\n ></ng-template>\n </ng-container>\n\n <ng-container *ngIf=\"!col.template\">\n <span\n [innerHTML]=\"col.valueGetter(item)\"\n class=\"cell-vertical-align-middle\"\n ></span>\n </ng-container>\n </td>\n </tr>\n <tr *ngIf=\"!!columnsConfiguration && !filteredList.length\">\n <td [colSpan]=\"columnsConfiguration.length\">\n <div class=\"w-100 text-center\">\n {{ 'foehn-table.totalElements.0' | fromDictionary }}\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n\n <div class=\"row d-flex justify-content-between p-1\">\n <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n <nav\n class=\"vd-pagination\"\n aria-label=\"Pagination\"\n *ngIf=\"hasPreviousPage()\"\n >\n <ul class=\"vd-pagination__list\">\n <li\n class=\"vd-pagination__item vd-pagination__item--previous\"\n >\n <button\n class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n (click)=\"previousPage()\"\n >\n <span class=\"vd-pagination__title\">\n <foehn-icon-chevron-left></foehn-icon-chevron-left>\n {{ previousLabel }}\n </span>\n <span class=\"sr-only\">:</span>\n <span class=\"vd-pagination__label\">\n {{ currentPage - 1 }} sur {{ pagesCount() }}\n </span>\n </button>\n </li>\n </ul>\n </nav>\n </div>\n\n <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n <nav\n class=\"vd-pagination\"\n aria-label=\"Pagination\"\n *ngIf=\"hasNextPage()\"\n >\n <ul class=\"vd-pagination__list\">\n <li\n class=\"vd-pagination__item vd-pagination__item--next\"\n >\n <button\n class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n (click)=\"nextPage()\"\n >\n <span class=\"vd-pagination__title\">\n {{ nextLabel }}\n <foehn-icon-chevron-right></foehn-icon-chevron-right>\n </span>\n <span class=\"sr-only\">:</span>\n <span class=\"vd-pagination__label\">\n {{ currentPage + 1 }} sur {{ pagesCount() }}\n </span>\n </button>\n </li>\n </ul>\n </nav>\n </div>\n </div>\n </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:var(--vd-focus)}.cell-vertical-align-middle{vertical-align:middle}\n"] }]
4841
4843
  }], propDecorators: { itemsPerPage: [{
4842
4844
  type: Input
4843
4845
  }], id: [{
@@ -4862,9 +4864,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
4862
4864
  type: Output
4863
4865
  }], list: [{
4864
4866
  type: Input
4865
- }],
4866
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
4867
- trackByFn: [{
4867
+ }], trackByFn: [{
4868
4868
  type: Input
4869
4869
  }] } });
4870
4870
 
@@ -7118,6 +7118,8 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
7118
7118
  this.SUGGESTION_SELECTED_CLASS = 'suggestion-selected';
7119
7119
  this.EXCLUDE_HTML_TAGS_REGEX = '((?=[^>]*<)|(?![^<]*>))';
7120
7120
  this.SUGGESTION_CUSTOM_ATTRIBUTE_LABEL_VALUE = 'label-value';
7121
+ // Inspired from https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping
7122
+ this.REGEX_TO_ESCAPE_REGEX = /[.*+?^${}()|[\]\\]/g;
7121
7123
  this.userSearchInputSubject = new Subject();
7122
7124
  this.filterSubcription = this.filterSubject
7123
7125
  .pipe(debounceTime(200))
@@ -7341,7 +7343,11 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
7341
7343
  getLabelWithEmphasis(elem) {
7342
7344
  let label = this.getSuggestionLabel(elem);
7343
7345
  if (!this.isEmpty(this.searchValue)) {
7344
- const regexStr = `${normalizeSearch(this.searchValue, this.caseSensitiveSearch)}${this.EXCLUDE_HTML_TAGS_REGEX}`;
7346
+ const hasRegexpCharsToEscape = RegExp(this.REGEX_TO_ESCAPE_REGEX.source).test(this.searchValue);
7347
+ const regexSearchValue = hasRegexpCharsToEscape
7348
+ ? this.escapeRegexp(normalizeSearch(this.searchValue, this.caseSensitiveSearch))
7349
+ : normalizeSearch(this.searchValue, this.caseSensitiveSearch);
7350
+ const regexStr = `${regexSearchValue}${this.EXCLUDE_HTML_TAGS_REGEX}`;
7345
7351
  const startIndex = normalizeSearch(label, this.caseSensitiveSearch).search(regexStr);
7346
7352
  if (startIndex !== -1) {
7347
7353
  label = `${startIndex > 0 ? label.substring(0, startIndex) : ''}<b>${label.substring(startIndex, startIndex + this.searchValue.length)}</b>${label.length > startIndex + this.searchValue.length
@@ -7669,6 +7675,9 @@ class FoehnAutocompleteComponent extends FoehnCheckableGroupComponent {
7669
7675
  });
7670
7676
  });
7671
7677
  }
7678
+ escapeRegexp(value) {
7679
+ return value.replace(this.REGEX_TO_ESCAPE_REGEX, '\\$&');
7680
+ }
7672
7681
  }
7673
7682
  FoehnAutocompleteComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FoehnAutocompleteComponent, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
7674
7683
  FoehnAutocompleteComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FoehnAutocompleteComponent, selector: "foehn-autocomplete", inputs: { searchValueMinCharsCount: "searchValueMinCharsCount", allowCustomValue: "allowCustomValue", isSuggestionListDynamic: "isSuggestionListDynamic", customValueModelGenerator: "customValueModelGenerator", itemHeightInSuggestionListInPx: "itemHeightInSuggestionListInPx", elementSuggestionLabel: "elementSuggestionLabel", caseSensitiveSearch: "caseSensitiveSearch", disabled: "disabled" }, outputs: { userSearchInput: "userSearchInput" }, providers: [
@@ -7832,7 +7841,7 @@ FoehnRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
7832
7841
  useExisting: forwardRef(() => FoehnRadioComponent),
7833
7842
  multi: true
7834
7843
  }
7835
- ], usesInheritance: true, ngImport: i0, template: "<div\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <fieldset class=\"form-group\" [attr.aria-describedby]=\"getDescribedBy()\">\n <div class=\"d-flex justify-content-between\">\n <legend\n *ngIf=\"!!label\"\n [ngClass]=\"isLabelSrOnly ? 'sr-only' : 'vd-p'\"\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 </legend>\n <foehn-help-modal\n class=\"removePaddingButton\"\n *ngIf=\"!!helpModal\"\n [modalContent]=\"helpModal\"\n ></foehn-help-modal>\n </div>\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 <div\n *ngFor=\"\n let elementsGroup of groupedElements;\n let groupIndex = index\n \"\n >\n <!-- TODO remove aria-hidden and make this accessible -->\n <div\n *ngIf=\"!!elementsGroup.groupTitle\"\n class=\"pt-2 font-weight-bold\"\n [attr.id]=\"'checkGroup_' + groupIndex\"\n aria-hidden=\"true\"\n >\n {{ elementsGroup.groupTitle | fromDictionary }}\n </div>\n <div\n *ngFor=\"let element of elementsGroup.elements; let i = index\"\n [class.disabled]=\"getDisabled(element)\"\n class=\"form-check\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n [value]=\"getValueOrObject(element)\"\n [ngModel]=\"inputValue\"\n (ngModelChange)=\"onCheck(element, $event)\"\n [name]=\"buildChildName('' + groupIndex + '_' + i)\"\n [attr.name]=\"buildChildName('' + groupIndex + '_' + i)\"\n [attr.id]=\"buildChildId() + groupIndex + '_' + i\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n [attr.autocomplete]=\"getAutoComplete()\"\n (change)=\"handleChange(getValue(element))\"\n />\n <label\n class=\"form-check-label\"\n [for]=\"buildChildId() + groupIndex + '_' + i\"\n [innerHTML]=\"getLabel(element)\"\n ></label>\n </div>\n </div>\n </fieldset>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] });
7844
+ ], usesInheritance: true, ngImport: i0, template: "<div\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <fieldset class=\"form-group\" [attr.aria-describedby]=\"getDescribedBy()\">\n <div class=\"d-flex justify-content-between\">\n <legend\n *ngIf=\"!!label\"\n [ngClass]=\"isLabelSrOnly ? 'sr-only' : 'vd-p'\"\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 </legend>\n <foehn-help-modal\n class=\"removePaddingButton\"\n *ngIf=\"!!helpModal\"\n [modalContent]=\"helpModal\"\n ></foehn-help-modal>\n </div>\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 <div\n *ngFor=\"\n let elementsGroup of groupedElements;\n let groupIndex = index\n \"\n >\n <!-- TODO remove aria-hidden and make this accessible -->\n <div\n *ngIf=\"!!elementsGroup.groupTitle\"\n class=\"pt-2 font-weight-bold\"\n [attr.id]=\"'checkGroup_' + groupIndex\"\n aria-hidden=\"true\"\n >\n {{ elementsGroup.groupTitle | fromDictionary }}\n </div>\n <div\n *ngFor=\"let element of elementsGroup.elements; let i = index\"\n [class.disabled]=\"getDisabled(element)\"\n class=\"form-check\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n [value]=\"getValueOrObject(element)\"\n [ngModel]=\"inputValue\"\n (ngModelChange)=\"onCheck(element, $event)\"\n [name]=\"buildChildName()\"\n [attr.name]=\"buildChildName()\"\n [attr.id]=\"buildChildId() + groupIndex + '_' + i\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n [attr.autocomplete]=\"getAutoComplete()\"\n (change)=\"handleChange(getValue(element))\"\n />\n <label\n class=\"form-check-label\"\n [for]=\"buildChildId() + groupIndex + '_' + i\"\n [innerHTML]=\"getLabel(element)\"\n ></label>\n </div>\n </div>\n </fieldset>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnHelpModalComponent, selector: "foehn-help-modal", inputs: ["modalContent"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] });
7836
7845
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FoehnRadioComponent, decorators: [{
7837
7846
  type: Component,
7838
7847
  args: [{ selector: 'foehn-radio', providers: [
@@ -7841,7 +7850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
7841
7850
  useExisting: forwardRef(() => FoehnRadioComponent),
7842
7851
  multi: true
7843
7852
  }
7844
- ], template: "<div\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <fieldset class=\"form-group\" [attr.aria-describedby]=\"getDescribedBy()\">\n <div class=\"d-flex justify-content-between\">\n <legend\n *ngIf=\"!!label\"\n [ngClass]=\"isLabelSrOnly ? 'sr-only' : 'vd-p'\"\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 </legend>\n <foehn-help-modal\n class=\"removePaddingButton\"\n *ngIf=\"!!helpModal\"\n [modalContent]=\"helpModal\"\n ></foehn-help-modal>\n </div>\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 <div\n *ngFor=\"\n let elementsGroup of groupedElements;\n let groupIndex = index\n \"\n >\n <!-- TODO remove aria-hidden and make this accessible -->\n <div\n *ngIf=\"!!elementsGroup.groupTitle\"\n class=\"pt-2 font-weight-bold\"\n [attr.id]=\"'checkGroup_' + groupIndex\"\n aria-hidden=\"true\"\n >\n {{ elementsGroup.groupTitle | fromDictionary }}\n </div>\n <div\n *ngFor=\"let element of elementsGroup.elements; let i = index\"\n [class.disabled]=\"getDisabled(element)\"\n class=\"form-check\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n [value]=\"getValueOrObject(element)\"\n [ngModel]=\"inputValue\"\n (ngModelChange)=\"onCheck(element, $event)\"\n [name]=\"buildChildName('' + groupIndex + '_' + i)\"\n [attr.name]=\"buildChildName('' + groupIndex + '_' + i)\"\n [attr.id]=\"buildChildId() + groupIndex + '_' + i\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n [attr.autocomplete]=\"getAutoComplete()\"\n (change)=\"handleChange(getValue(element))\"\n />\n <label\n class=\"form-check-label\"\n [for]=\"buildChildId() + groupIndex + '_' + i\"\n [innerHTML]=\"getLabel(element)\"\n ></label>\n </div>\n </div>\n </fieldset>\n</div>\n" }]
7853
+ ], template: "<div\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <fieldset class=\"form-group\" [attr.aria-describedby]=\"getDescribedBy()\">\n <div class=\"d-flex justify-content-between\">\n <legend\n *ngIf=\"!!label\"\n [ngClass]=\"isLabelSrOnly ? 'sr-only' : 'vd-p'\"\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 </legend>\n <foehn-help-modal\n class=\"removePaddingButton\"\n *ngIf=\"!!helpModal\"\n [modalContent]=\"helpModal\"\n ></foehn-help-modal>\n </div>\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 <div\n *ngFor=\"\n let elementsGroup of groupedElements;\n let groupIndex = index\n \"\n >\n <!-- TODO remove aria-hidden and make this accessible -->\n <div\n *ngIf=\"!!elementsGroup.groupTitle\"\n class=\"pt-2 font-weight-bold\"\n [attr.id]=\"'checkGroup_' + groupIndex\"\n aria-hidden=\"true\"\n >\n {{ elementsGroup.groupTitle | fromDictionary }}\n </div>\n <div\n *ngFor=\"let element of elementsGroup.elements; let i = index\"\n [class.disabled]=\"getDisabled(element)\"\n class=\"form-check\"\n >\n <input\n class=\"form-check-input\"\n type=\"radio\"\n [value]=\"getValueOrObject(element)\"\n [ngModel]=\"inputValue\"\n (ngModelChange)=\"onCheck(element, $event)\"\n [name]=\"buildChildName()\"\n [attr.name]=\"buildChildName()\"\n [attr.id]=\"buildChildId() + groupIndex + '_' + i\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.disabled]=\"getDisabled(element) ? 'disabled' : null\"\n [attr.autocomplete]=\"getAutoComplete()\"\n (change)=\"handleChange(getValue(element))\"\n />\n <label\n class=\"form-check-label\"\n [for]=\"buildChildId() + groupIndex + '_' + i\"\n [innerHTML]=\"getLabel(element)\"\n ></label>\n </div>\n </div>\n </fieldset>\n</div>\n" }]
7845
7854
  }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
7846
7855
 
7847
7856
  class FoehnCheckablesModule {
@@ -10528,10 +10537,9 @@ class StreetNumber {
10528
10537
  const isDefined = (value) => value === true || value === false;
10529
10538
  const hasInputChanged$1 = (change) => change && !ObjectHelper.isEqual(change.previousValue, change.currentValue);
10530
10539
  class FoehnInputAddressComponent extends FoehnInputComponent {
10531
- constructor(httpClient, ngZone, dictionaryService) {
10540
+ constructor(httpClient, dictionaryService) {
10532
10541
  super();
10533
10542
  this.httpClient = httpClient;
10534
- this.ngZone = ngZone;
10535
10543
  this.dictionaryService = dictionaryService;
10536
10544
  this.countriesUrl = 'api/refinf/countries';
10537
10545
  this.isOnlySwiss = true;
@@ -10563,10 +10571,10 @@ class FoehnInputAddressComponent extends FoehnInputComponent {
10563
10571
  estrid: null,
10564
10572
  longName
10565
10573
  });
10566
- this.manageDefaultCountrySubscription = this.manageDefaultCountry();
10567
10574
  }
10568
10575
  ngOnInit() {
10569
10576
  super.ngOnInit();
10577
+ this.manageDefaultCountrySubscription = this.manageDefaultCountry();
10570
10578
  if (!this.showPostOfficeBoxText) {
10571
10579
  this.streetCustomErrors.AtLeastOneNotNull = this.dictionaryService.getKeySync('errors.NotNull');
10572
10580
  }
@@ -10904,7 +10912,7 @@ class FoehnInputAddressComponent extends FoehnInputComponent {
10904
10912
  .subscribe());
10905
10913
  }
10906
10914
  }
10907
- FoehnInputAddressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FoehnInputAddressComponent, deps: [{ token: i1.HttpClient }, { token: i0.NgZone }, { token: SdkDictionaryService }], target: i0.ɵɵFactoryTarget.Component });
10915
+ FoehnInputAddressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FoehnInputAddressComponent, deps: [{ token: i1.HttpClient }, { token: SdkDictionaryService }], target: i0.ɵɵFactoryTarget.Component });
10908
10916
  FoehnInputAddressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FoehnInputAddressComponent, selector: "foehn-input-address", inputs: { countriesUrl: "countriesUrl", isOnlySwiss: "isOnlySwiss", showPostOfficeBoxText: "showPostOfficeBoxText", showAdressLines: "showAdressLines", showAdressLine1: "showAdressLine1", showAdressLine2: "showAdressLine2", specifiedCanton: "specifiedCanton", countryRequired: "countryRequired", swissNpaLocalityRequired: "swissNpaLocalityRequired", streetRequired: "streetRequired", streetNumberRequired: "streetNumberRequired", hideNotRequiredExtraLabelStreetNumber: "hideNotRequiredExtraLabelStreetNumber", foreignZipCodeRequired: "foreignZipCodeRequired", foreignLocalityRequired: "foreignLocalityRequired", foreignStreetRequired: "foreignStreetRequired", foreignStreetNumberRequired: "foreignStreetNumberRequired", postOfficeBoxTextRequired: "postOfficeBoxTextRequired", addressLine1Required: "addressLine1Required", addressLine2Required: "addressLine2Required", withCompanyLocalities: "withCompanyLocalities" }, providers: [
10909
10917
  {
10910
10918
  provide: FoehnInputComponent,
@@ -10921,7 +10929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
10921
10929
  multi: true
10922
10930
  }
10923
10931
  ], 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 [allowCustomValue]=\"disabled\"\n [required]=\"swissNpaLocalityRequired\"\n [disabled]=\"!country || 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]=\"isStreetRequired()\"\n [helpText]=\"\n 'foehn-input-address.street.help-text' | fromDictionary\n \"\n [customErrors]=\"streetCustomErrors\"\n (userInput)=\"userInputStreet($event)\"\n [disabled]=\"!country || 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 (modelChange)=\"updateAddress()\"\n (userInput)=\"handleUserInput()\"\n [required]=\"streetNumberRequired\"\n [hideNotRequiredExtraLabel]=\"\n hideNotRequiredExtraLabelStreetNumber\n \"\n [disabled]=\"!country || 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]=\"isForeignStreetRequired()\"\n [helpText]=\"\n 'foehn-input-address.street.help-text' | fromDictionary\n \"\n [customErrors]=\"streetCustomErrors\"\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]=\"isPostOfficeBoxTextRequired()\"\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" }]
10924
- }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: i0.NgZone }, { type: SdkDictionaryService }]; }, propDecorators: { foreignLocalityComponent: [{
10932
+ }], ctorParameters: function () { return [{ type: i1.HttpClient }, { type: SdkDictionaryService }]; }, propDecorators: { foreignLocalityComponent: [{
10925
10933
  type: ViewChild,
10926
10934
  args: [FoehnInputForeignLocalityComponent, { static: false }]
10927
10935
  }], foreignStreetComponent: [{
@@ -11479,7 +11487,7 @@ FoehnBooleanRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0
11479
11487
  useExisting: forwardRef(() => FoehnBooleanRadioComponent),
11480
11488
  multi: true
11481
11489
  }
11482
- ], usesInheritance: true, ngImport: i0, template: "<div\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n class=\"form-group\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <fieldset [attr.aria-describedby]=\"getDescribedBy()\">\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]=\"buildChildId() + 'Help'\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <ng-content></ng-content>\n\n <div\n class=\"d-flex\"\n [ngClass]=\"verticalDisplay ? 'flex-column' : 'flex-row'\"\n >\n <div class=\"form-check\">\n <input\n type=\"radio\"\n class=\"form-check-input\"\n [ngModel]=\"model\"\n (ngModelChange)=\"updateNgModel($event)\"\n [name]=\"buildChildName('True')\"\n [attr.name]=\"buildChildName('True')\"\n [value]=\"true\"\n [attr.id]=\"buildChildId('True')\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n (change)=\"handleChange(true)\"\n #entryComponent\n />\n <label\n class=\"form-check-label\"\n [for]=\"buildChildId('True')\"\n [innerHTML]=\"trueLabel\"\n ></label>\n </div>\n\n <div class=\"form-check\" [ngClass]=\"verticalDisplay ? '' : 'ml-2'\">\n <input\n type=\"radio\"\n class=\"form-check-input\"\n [ngModel]=\"model\"\n (ngModelChange)=\"updateNgModel($event)\"\n [name]=\"buildChildName('False')\"\n [attr.name]=\"buildChildName('False')\"\n [value]=\"false\"\n [attr.id]=\"buildChildId('False')\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n (change)=\"handleChange(false)\"\n />\n <label\n class=\"form-check-label\"\n [for]=\"buildChildId('False')\"\n [innerHTML]=\"falseLabel\"\n ></label>\n </div>\n </div>\n </fieldset>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] });
11490
+ ], usesInheritance: true, ngImport: i0, template: "<div\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n class=\"form-group\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <fieldset [attr.aria-describedby]=\"getDescribedBy()\">\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]=\"buildChildId() + 'Help'\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <ng-content></ng-content>\n\n <div\n class=\"d-flex\"\n [ngClass]=\"verticalDisplay ? 'flex-column' : 'flex-row'\"\n >\n <div class=\"form-check\">\n <input\n type=\"radio\"\n class=\"form-check-input\"\n [ngModel]=\"model\"\n (ngModelChange)=\"updateNgModel($event)\"\n [name]=\"buildChildName()\"\n [attr.name]=\"buildChildName()\"\n [value]=\"true\"\n [attr.id]=\"buildChildId('True')\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n (change)=\"handleChange(true)\"\n #entryComponent\n />\n <label\n class=\"form-check-label\"\n [for]=\"buildChildId('True')\"\n [innerHTML]=\"trueLabel\"\n ></label>\n </div>\n\n <div class=\"form-check\" [ngClass]=\"verticalDisplay ? '' : 'ml-2'\">\n <input\n type=\"radio\"\n class=\"form-check-input\"\n [ngModel]=\"model\"\n (ngModelChange)=\"updateNgModel($event)\"\n [name]=\"buildChildName()\"\n [attr.name]=\"buildChildName()\"\n [value]=\"false\"\n [attr.id]=\"buildChildId('False')\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n (change)=\"handleChange(false)\"\n />\n <label\n class=\"form-check-label\"\n [for]=\"buildChildId('False')\"\n [innerHTML]=\"falseLabel\"\n ></label>\n </div>\n </div>\n </fieldset>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] });
11483
11491
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FoehnBooleanRadioComponent, decorators: [{
11484
11492
  type: Component,
11485
11493
  args: [{ selector: 'foehn-boolean-radio', providers: [
@@ -11488,7 +11496,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
11488
11496
  useExisting: forwardRef(() => FoehnBooleanRadioComponent),
11489
11497
  multi: true
11490
11498
  }
11491
- ], template: "<div\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n class=\"form-group\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <fieldset [attr.aria-describedby]=\"getDescribedBy()\">\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]=\"buildChildId() + 'Help'\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <ng-content></ng-content>\n\n <div\n class=\"d-flex\"\n [ngClass]=\"verticalDisplay ? 'flex-column' : 'flex-row'\"\n >\n <div class=\"form-check\">\n <input\n type=\"radio\"\n class=\"form-check-input\"\n [ngModel]=\"model\"\n (ngModelChange)=\"updateNgModel($event)\"\n [name]=\"buildChildName('True')\"\n [attr.name]=\"buildChildName('True')\"\n [value]=\"true\"\n [attr.id]=\"buildChildId('True')\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n (change)=\"handleChange(true)\"\n #entryComponent\n />\n <label\n class=\"form-check-label\"\n [for]=\"buildChildId('True')\"\n [innerHTML]=\"trueLabel\"\n ></label>\n </div>\n\n <div class=\"form-check\" [ngClass]=\"verticalDisplay ? '' : 'ml-2'\">\n <input\n type=\"radio\"\n class=\"form-check-input\"\n [ngModel]=\"model\"\n (ngModelChange)=\"updateNgModel($event)\"\n [name]=\"buildChildName('False')\"\n [attr.name]=\"buildChildName('False')\"\n [value]=\"false\"\n [attr.id]=\"buildChildId('False')\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n (change)=\"handleChange(false)\"\n />\n <label\n class=\"form-check-label\"\n [for]=\"buildChildId('False')\"\n [innerHTML]=\"falseLabel\"\n ></label>\n </div>\n </div>\n </fieldset>\n</div>\n" }]
11499
+ ], template: "<div\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n class=\"form-group\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <fieldset [attr.aria-describedby]=\"getDescribedBy()\">\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]=\"buildChildId() + 'Help'\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <ng-content></ng-content>\n\n <div\n class=\"d-flex\"\n [ngClass]=\"verticalDisplay ? 'flex-column' : 'flex-row'\"\n >\n <div class=\"form-check\">\n <input\n type=\"radio\"\n class=\"form-check-input\"\n [ngModel]=\"model\"\n (ngModelChange)=\"updateNgModel($event)\"\n [name]=\"buildChildName()\"\n [attr.name]=\"buildChildName()\"\n [value]=\"true\"\n [attr.id]=\"buildChildId('True')\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n (change)=\"handleChange(true)\"\n #entryComponent\n />\n <label\n class=\"form-check-label\"\n [for]=\"buildChildId('True')\"\n [innerHTML]=\"trueLabel\"\n ></label>\n </div>\n\n <div class=\"form-check\" [ngClass]=\"verticalDisplay ? '' : 'ml-2'\">\n <input\n type=\"radio\"\n class=\"form-check-input\"\n [ngModel]=\"model\"\n (ngModelChange)=\"updateNgModel($event)\"\n [name]=\"buildChildName()\"\n [attr.name]=\"buildChildName()\"\n [value]=\"false\"\n [attr.id]=\"buildChildId('False')\"\n [attr.aria-invalid]=\"hasErrorsToDisplay() || null\"\n [attr.disabled]=\"disabled ? 'disabled' : null\"\n (change)=\"handleChange(false)\"\n />\n <label\n class=\"form-check-label\"\n [for]=\"buildChildId('False')\"\n [innerHTML]=\"falseLabel\"\n ></label>\n </div>\n </div>\n </fieldset>\n</div>\n" }]
11492
11500
  }], propDecorators: { trueLabel: [{
11493
11501
  type: Input
11494
11502
  }], falseLabel: [{
@@ -14354,6 +14362,8 @@ class FoehnListSummaryComponent extends FoehnInputComponent {
14354
14362
  this.tableSort = {
14355
14363
  sortDirection: 'ASC'
14356
14364
  };
14365
+ this.trackFoehnListItem = (index, item) => item.trackingIndex || index;
14366
+ this.trackFoehnListItemDescription = (index, item) => item.label || index;
14357
14367
  }
14358
14368
  ngOnChanges(changes) {
14359
14369
  if (!!changes?.list?.currentValue?.length || !!changes.showAsTable) {
@@ -14377,9 +14387,6 @@ class FoehnListSummaryComponent extends FoehnInputComponent {
14377
14387
  });
14378
14388
  });
14379
14389
  }
14380
- trackByTrackingIndex() {
14381
- return (index, item) => item.trackingIndex;
14382
- }
14383
14390
  showLine(item, itemParam) {
14384
14391
  const value = itemParam.getFormattedValue(item);
14385
14392
  const hideIfEmptyExists = !!itemParam.hideIfEmpty;
@@ -14443,7 +14450,7 @@ FoehnListSummaryComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.
14443
14450
  useExisting: forwardRef(() => FoehnListSummaryComponent),
14444
14451
  multi: true
14445
14452
  }
14446
- ], viewQueries: [{ propertyName: "tableActionButtons", first: true, predicate: ["tableActionButtons"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section\n class=\"form-group clearable-input-form-group\"\n [class.has-danger]=\"hasErrorsToDisplay()\"\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <label\n [attr.for]=\"buildChildId()\"\n *ngIf=\"label && type !== 'hidden'\"\n [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\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 <small\n *ngIf=\"helpText && type !== 'hidden'\"\n [attr.id]=\"buildChildId() + 'Help'\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <section *ngIf=\"!showAsTable\">\n <ul class=\"list-unstyled\" aria-describedby=\"sommaire-help-alt\">\n <li\n [id]=\"'list-summary-' + item.trackingIndex\"\n class=\"mt-3 border-bottom\"\n *ngFor=\"\n let item of list;\n let itemIndex = index;\n trackBy: trackByTrackingIndex\n \"\n >\n <div class=\"d-flex align-items-baseline flex-wrap\">\n <h4 class=\"mt-0 mr-3\">{{ getListItemTitle(item) }}</h4>\n <span class=\"ml-auto\">\n <foehn-error-pill\n [incompleteIndicatorOnly]=\"true\"\n [errorPrefix]=\"name + '[' + itemIndex + ']'\"\n ></foehn-error-pill>\n </span>\n </div>\n <dl class=\"mb-0\">\n <ng-container\n *ngFor=\"let itemParam of listItemDescriptions\"\n >\n <div\n class=\"d-flex flex-wrap item-line\"\n *ngIf=\"showLine(item, itemParam)\"\n >\n <dt class=\"mr-1\">\n {{ itemParam.label }}\n </dt>\n <dd class=\"ml-auto text-right\">\n {{ itemParam.getFormattedValue(item) }}\n </dd>\n </div>\n </ng-container>\n </dl>\n <ul class=\"list-inline mb-3 mt-0\">\n <li class=\"list-inline-item\">\n <a\n [id]=\"buildChildId('-edit-link-' + itemIndex)\"\n href=\"#\"\n (click)=\"\n $event.preventDefault(); editItem(itemIndex)\n \"\n >\n Modifier\n </a>\n <span class=\"sr-only\">\n {{ getListItemTitle(item) }}\n </span>\n </li>\n <li class=\"list-inline-item\">\n &nbsp;\n <a\n [id]=\"buildChildId('-delete-link-' + itemIndex)\"\n href=\"#\"\n (click)=\"\n $event.preventDefault(); removeItem(itemIndex)\n \"\n >\n Supprimer\n <span class=\"sr-only\">\n {{ getListItemTitle(item) }}\n </span>\n </a>\n </li>\n </ul>\n </li>\n </ul>\n </section>\n\n <section *ngIf=\"showAsTable && !!tableConfiguration?.length\">\n <foehn-table\n [id]=\"buildChildName('table')\"\n *ngIf=\"!!listCopyForTable?.length\"\n [list]=\"listCopyForTable\"\n [itemsPerPage]=\"1000000\"\n [columnsConfiguration]=\"tableConfiguration\"\n [sort]=\"tableSort\"\n (sortChange)=\"changeSort($event)\"\n ></foehn-table>\n </section>\n\n <section [ngClass]=\"{ 'mt-5': !showAsTable }\">\n <h2 class=\"sr-only\">Action</h2>\n <ul class=\"list-inline mb-3\">\n <li class=\"list-inline-item\">\n <button\n [id]=\"buildChildId('-add-button')\"\n class=\"btn btn-primary\"\n (click)=\"editItem()\"\n >\n Ajouter\n </button>\n </li>\n </ul>\n </section>\n</section>\n\n<ng-template #tableActionButtons let-index=\"index\">\n <div class=\"d-inline-flex\">\n <button\n [id]=\"buildChildId('-edit-button-' + index)\"\n class=\"btn bg-transparent mr-3\"\n (click)=\"editItem(index)\"\n >\n <foehn-icon-edit [title]=\"'Modifier'\"></foehn-icon-edit>\n </button>\n <button\n [id]=\"buildChildId('-delete-button-' + index)\"\n class=\"btn bg-transparent\"\n (click)=\"removeItem(index)\"\n >\n <foehn-icon-trash-alt [title]=\"'Supprimer'\"></foehn-icon-trash-alt>\n </button>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .bg-transparent.btn .svg-inline--fa{color:var(--gray-dark)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnTableComponent, selector: "foehn-table", inputs: ["itemsPerPage", "id", "previousLabel", "nextLabel", "totalElements", "fixedPageCount", "columnsConfiguration", "sort", "list", "trackByFn"], outputs: ["pageChange", "sortChange"] }, { kind: "component", type: FoehnIconEditComponent, selector: "foehn-icon-edit" }, { kind: "component", type: FoehnIconTrashAltComponent, selector: "foehn-icon-trash-alt" }, { kind: "component", type: FoehnErrorPillComponent, selector: "foehn-error-pill", inputs: ["errorPrefix", "incompleteIndicatorOnly"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] });
14453
+ ], viewQueries: [{ propertyName: "tableActionButtons", first: true, predicate: ["tableActionButtons"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section\n class=\"form-group clearable-input-form-group\"\n [class.has-danger]=\"hasErrorsToDisplay()\"\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <label\n [attr.for]=\"buildChildId()\"\n *ngIf=\"label && type !== 'hidden'\"\n [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\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 <small\n *ngIf=\"helpText && type !== 'hidden'\"\n [attr.id]=\"buildChildId() + 'Help'\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <section *ngIf=\"!showAsTable\">\n <ul class=\"list-unstyled\" aria-describedby=\"sommaire-help-alt\">\n <li\n [id]=\"'list-summary-' + item.trackingIndex\"\n class=\"mt-3 border-bottom\"\n *ngFor=\"\n let item of list;\n let itemIndex = index;\n trackBy: trackFoehnListItem\n \"\n >\n <div class=\"d-flex align-items-baseline flex-wrap\">\n <h4 class=\"mt-0 mr-3\">{{ getListItemTitle(item) }}</h4>\n <span class=\"ml-auto\">\n <foehn-error-pill\n [incompleteIndicatorOnly]=\"true\"\n [errorPrefix]=\"name + '[' + itemIndex + ']'\"\n ></foehn-error-pill>\n </span>\n </div>\n <dl class=\"mb-0\">\n <ng-container\n *ngFor=\"\n let itemParam of listItemDescriptions;\n trackBy: trackFoehnListItemDescription\n \"\n >\n <div\n class=\"d-flex flex-wrap item-line\"\n *ngIf=\"showLine(item, itemParam)\"\n >\n <dt class=\"mr-1\">\n {{ itemParam.label }}\n </dt>\n <dd class=\"ml-auto text-right\">\n {{ itemParam.getFormattedValue(item) }}\n </dd>\n </div>\n </ng-container>\n </dl>\n <ul class=\"list-inline mb-3 mt-0\">\n <li class=\"list-inline-item\">\n <a\n [id]=\"buildChildId('-edit-link-' + itemIndex)\"\n href=\"#\"\n (click)=\"\n $event.preventDefault(); editItem(itemIndex)\n \"\n >\n Modifier\n </a>\n <span class=\"sr-only\">\n {{ getListItemTitle(item) }}\n </span>\n </li>\n <li class=\"list-inline-item\">\n &nbsp;\n <a\n [id]=\"buildChildId('-delete-link-' + itemIndex)\"\n href=\"#\"\n (click)=\"\n $event.preventDefault(); removeItem(itemIndex)\n \"\n >\n Supprimer\n <span class=\"sr-only\">\n {{ getListItemTitle(item) }}\n </span>\n </a>\n </li>\n </ul>\n </li>\n </ul>\n </section>\n\n <section *ngIf=\"showAsTable && !!tableConfiguration?.length\">\n <foehn-table\n [id]=\"buildChildName('table')\"\n *ngIf=\"!!listCopyForTable?.length\"\n [list]=\"listCopyForTable\"\n [itemsPerPage]=\"1000000\"\n [columnsConfiguration]=\"tableConfiguration\"\n [sort]=\"tableSort\"\n (sortChange)=\"changeSort($event)\"\n [trackByFn]=\"trackFoehnListItem\"\n ></foehn-table>\n </section>\n\n <section [ngClass]=\"{ 'mt-5': !showAsTable }\">\n <h2 class=\"sr-only\">Action</h2>\n <ul class=\"list-inline mb-3\">\n <li class=\"list-inline-item\">\n <button\n [id]=\"buildChildId('-add-button')\"\n class=\"btn btn-primary\"\n (click)=\"editItem()\"\n >\n Ajouter\n </button>\n </li>\n </ul>\n </section>\n</section>\n\n<ng-template #tableActionButtons let-index=\"index\">\n <div class=\"d-inline-flex\">\n <button\n [id]=\"buildChildId('-edit-button-' + index)\"\n class=\"btn bg-transparent mr-3\"\n (click)=\"editItem(index)\"\n >\n <foehn-icon-edit [title]=\"'Modifier'\"></foehn-icon-edit>\n </button>\n <button\n [id]=\"buildChildId('-delete-button-' + index)\"\n class=\"btn bg-transparent\"\n (click)=\"removeItem(index)\"\n >\n <foehn-icon-trash-alt [title]=\"'Supprimer'\"></foehn-icon-trash-alt>\n </button>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .bg-transparent.btn .svg-inline--fa{color:var(--gray-dark)!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FoehnValidationAlertsComponent, selector: "foehn-validation-alerts", inputs: ["component", "shouldErrorsBeLive"] }, { kind: "component", type: FoehnTableComponent, selector: "foehn-table", inputs: ["itemsPerPage", "id", "previousLabel", "nextLabel", "totalElements", "fixedPageCount", "columnsConfiguration", "sort", "list", "trackByFn"], outputs: ["pageChange", "sortChange"] }, { kind: "component", type: FoehnIconEditComponent, selector: "foehn-icon-edit" }, { kind: "component", type: FoehnIconTrashAltComponent, selector: "foehn-icon-trash-alt" }, { kind: "component", type: FoehnErrorPillComponent, selector: "foehn-error-pill", inputs: ["errorPrefix", "incompleteIndicatorOnly"] }, { kind: "pipe", type: SdkDictionaryPipe, name: "fromDictionary" }] });
14447
14454
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FoehnListSummaryComponent, decorators: [{
14448
14455
  type: Component,
14449
14456
  args: [{ selector: 'foehn-list-summary', providers: [
@@ -14452,7 +14459,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
14452
14459
  useExisting: forwardRef(() => FoehnListSummaryComponent),
14453
14460
  multi: true
14454
14461
  }
14455
- ], template: "<section\n class=\"form-group clearable-input-form-group\"\n [class.has-danger]=\"hasErrorsToDisplay()\"\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <label\n [attr.for]=\"buildChildId()\"\n *ngIf=\"label && type !== 'hidden'\"\n [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\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 <small\n *ngIf=\"helpText && type !== 'hidden'\"\n [attr.id]=\"buildChildId() + 'Help'\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <section *ngIf=\"!showAsTable\">\n <ul class=\"list-unstyled\" aria-describedby=\"sommaire-help-alt\">\n <li\n [id]=\"'list-summary-' + item.trackingIndex\"\n class=\"mt-3 border-bottom\"\n *ngFor=\"\n let item of list;\n let itemIndex = index;\n trackBy: trackByTrackingIndex\n \"\n >\n <div class=\"d-flex align-items-baseline flex-wrap\">\n <h4 class=\"mt-0 mr-3\">{{ getListItemTitle(item) }}</h4>\n <span class=\"ml-auto\">\n <foehn-error-pill\n [incompleteIndicatorOnly]=\"true\"\n [errorPrefix]=\"name + '[' + itemIndex + ']'\"\n ></foehn-error-pill>\n </span>\n </div>\n <dl class=\"mb-0\">\n <ng-container\n *ngFor=\"let itemParam of listItemDescriptions\"\n >\n <div\n class=\"d-flex flex-wrap item-line\"\n *ngIf=\"showLine(item, itemParam)\"\n >\n <dt class=\"mr-1\">\n {{ itemParam.label }}\n </dt>\n <dd class=\"ml-auto text-right\">\n {{ itemParam.getFormattedValue(item) }}\n </dd>\n </div>\n </ng-container>\n </dl>\n <ul class=\"list-inline mb-3 mt-0\">\n <li class=\"list-inline-item\">\n <a\n [id]=\"buildChildId('-edit-link-' + itemIndex)\"\n href=\"#\"\n (click)=\"\n $event.preventDefault(); editItem(itemIndex)\n \"\n >\n Modifier\n </a>\n <span class=\"sr-only\">\n {{ getListItemTitle(item) }}\n </span>\n </li>\n <li class=\"list-inline-item\">\n &nbsp;\n <a\n [id]=\"buildChildId('-delete-link-' + itemIndex)\"\n href=\"#\"\n (click)=\"\n $event.preventDefault(); removeItem(itemIndex)\n \"\n >\n Supprimer\n <span class=\"sr-only\">\n {{ getListItemTitle(item) }}\n </span>\n </a>\n </li>\n </ul>\n </li>\n </ul>\n </section>\n\n <section *ngIf=\"showAsTable && !!tableConfiguration?.length\">\n <foehn-table\n [id]=\"buildChildName('table')\"\n *ngIf=\"!!listCopyForTable?.length\"\n [list]=\"listCopyForTable\"\n [itemsPerPage]=\"1000000\"\n [columnsConfiguration]=\"tableConfiguration\"\n [sort]=\"tableSort\"\n (sortChange)=\"changeSort($event)\"\n ></foehn-table>\n </section>\n\n <section [ngClass]=\"{ 'mt-5': !showAsTable }\">\n <h2 class=\"sr-only\">Action</h2>\n <ul class=\"list-inline mb-3\">\n <li class=\"list-inline-item\">\n <button\n [id]=\"buildChildId('-add-button')\"\n class=\"btn btn-primary\"\n (click)=\"editItem()\"\n >\n Ajouter\n </button>\n </li>\n </ul>\n </section>\n</section>\n\n<ng-template #tableActionButtons let-index=\"index\">\n <div class=\"d-inline-flex\">\n <button\n [id]=\"buildChildId('-edit-button-' + index)\"\n class=\"btn bg-transparent mr-3\"\n (click)=\"editItem(index)\"\n >\n <foehn-icon-edit [title]=\"'Modifier'\"></foehn-icon-edit>\n </button>\n <button\n [id]=\"buildChildId('-delete-button-' + index)\"\n class=\"btn bg-transparent\"\n (click)=\"removeItem(index)\"\n >\n <foehn-icon-trash-alt [title]=\"'Supprimer'\"></foehn-icon-trash-alt>\n </button>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .bg-transparent.btn .svg-inline--fa{color:var(--gray-dark)!important}\n"] }]
14462
+ ], template: "<section\n class=\"form-group clearable-input-form-group\"\n [class.has-danger]=\"hasErrorsToDisplay()\"\n [class.vd-form-group-danger]=\"hasErrorsToDisplay()\"\n [attr.id]=\"buildId('Container')\"\n tabindex=\"-1\"\n>\n <label\n [attr.for]=\"buildChildId()\"\n *ngIf=\"label && type !== 'hidden'\"\n [ngClass]=\"isLabelSrOnly ? 'sr-only' : labelStyleModifier\"\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 <small\n *ngIf=\"helpText && type !== 'hidden'\"\n [attr.id]=\"buildChildId() + 'Help'\"\n class=\"form-text text-secondary\"\n [innerHTML]=\"helpText\"\n ></small>\n\n <section *ngIf=\"!showAsTable\">\n <ul class=\"list-unstyled\" aria-describedby=\"sommaire-help-alt\">\n <li\n [id]=\"'list-summary-' + item.trackingIndex\"\n class=\"mt-3 border-bottom\"\n *ngFor=\"\n let item of list;\n let itemIndex = index;\n trackBy: trackFoehnListItem\n \"\n >\n <div class=\"d-flex align-items-baseline flex-wrap\">\n <h4 class=\"mt-0 mr-3\">{{ getListItemTitle(item) }}</h4>\n <span class=\"ml-auto\">\n <foehn-error-pill\n [incompleteIndicatorOnly]=\"true\"\n [errorPrefix]=\"name + '[' + itemIndex + ']'\"\n ></foehn-error-pill>\n </span>\n </div>\n <dl class=\"mb-0\">\n <ng-container\n *ngFor=\"\n let itemParam of listItemDescriptions;\n trackBy: trackFoehnListItemDescription\n \"\n >\n <div\n class=\"d-flex flex-wrap item-line\"\n *ngIf=\"showLine(item, itemParam)\"\n >\n <dt class=\"mr-1\">\n {{ itemParam.label }}\n </dt>\n <dd class=\"ml-auto text-right\">\n {{ itemParam.getFormattedValue(item) }}\n </dd>\n </div>\n </ng-container>\n </dl>\n <ul class=\"list-inline mb-3 mt-0\">\n <li class=\"list-inline-item\">\n <a\n [id]=\"buildChildId('-edit-link-' + itemIndex)\"\n href=\"#\"\n (click)=\"\n $event.preventDefault(); editItem(itemIndex)\n \"\n >\n Modifier\n </a>\n <span class=\"sr-only\">\n {{ getListItemTitle(item) }}\n </span>\n </li>\n <li class=\"list-inline-item\">\n &nbsp;\n <a\n [id]=\"buildChildId('-delete-link-' + itemIndex)\"\n href=\"#\"\n (click)=\"\n $event.preventDefault(); removeItem(itemIndex)\n \"\n >\n Supprimer\n <span class=\"sr-only\">\n {{ getListItemTitle(item) }}\n </span>\n </a>\n </li>\n </ul>\n </li>\n </ul>\n </section>\n\n <section *ngIf=\"showAsTable && !!tableConfiguration?.length\">\n <foehn-table\n [id]=\"buildChildName('table')\"\n *ngIf=\"!!listCopyForTable?.length\"\n [list]=\"listCopyForTable\"\n [itemsPerPage]=\"1000000\"\n [columnsConfiguration]=\"tableConfiguration\"\n [sort]=\"tableSort\"\n (sortChange)=\"changeSort($event)\"\n [trackByFn]=\"trackFoehnListItem\"\n ></foehn-table>\n </section>\n\n <section [ngClass]=\"{ 'mt-5': !showAsTable }\">\n <h2 class=\"sr-only\">Action</h2>\n <ul class=\"list-inline mb-3\">\n <li class=\"list-inline-item\">\n <button\n [id]=\"buildChildId('-add-button')\"\n class=\"btn btn-primary\"\n (click)=\"editItem()\"\n >\n Ajouter\n </button>\n </li>\n </ul>\n </section>\n</section>\n\n<ng-template #tableActionButtons let-index=\"index\">\n <div class=\"d-inline-flex\">\n <button\n [id]=\"buildChildId('-edit-button-' + index)\"\n class=\"btn bg-transparent mr-3\"\n (click)=\"editItem(index)\"\n >\n <foehn-icon-edit [title]=\"'Modifier'\"></foehn-icon-edit>\n </button>\n <button\n [id]=\"buildChildId('-delete-button-' + index)\"\n class=\"btn bg-transparent\"\n (click)=\"removeItem(index)\"\n >\n <foehn-icon-trash-alt [title]=\"'Supprimer'\"></foehn-icon-trash-alt>\n </button>\n </div>\n</ng-template>\n", styles: [":host ::ng-deep .bg-transparent.btn .svg-inline--fa{color:var(--gray-dark)!important}\n"] }]
14456
14463
  }], ctorParameters: function () { return [{ type: FoehnConfirmModalService }, { type: i0.NgZone }]; }, propDecorators: { tableActionButtons: [{
14457
14464
  type: ViewChild,
14458
14465
  args: ['tableActionButtons']