@siemens/element-ng 51.0.0 → 51.0.1

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.
Files changed (129) hide show
  1. package/fesm2022/siemens-element-ng-accordion.mjs +2 -2
  2. package/fesm2022/siemens-element-ng-accordion.mjs.map +1 -1
  3. package/fesm2022/siemens-element-ng-ag-grid.mjs +125 -125
  4. package/fesm2022/siemens-element-ng-ag-grid.mjs.map +1 -1
  5. package/fesm2022/siemens-element-ng-application-header.mjs +4 -4
  6. package/fesm2022/siemens-element-ng-application-header.mjs.map +1 -1
  7. package/fesm2022/siemens-element-ng-avatar.mjs +5 -5
  8. package/fesm2022/siemens-element-ng-avatar.mjs.map +1 -1
  9. package/fesm2022/siemens-element-ng-breadcrumb.mjs +2 -2
  10. package/fesm2022/siemens-element-ng-breadcrumb.mjs.map +1 -1
  11. package/fesm2022/siemens-element-ng-card.mjs +2 -2
  12. package/fesm2022/siemens-element-ng-card.mjs.map +1 -1
  13. package/fesm2022/siemens-element-ng-carousel.mjs +2 -2
  14. package/fesm2022/siemens-element-ng-carousel.mjs.map +1 -1
  15. package/fesm2022/siemens-element-ng-chat-messages.mjs +18 -18
  16. package/fesm2022/siemens-element-ng-chat-messages.mjs.map +1 -1
  17. package/fesm2022/siemens-element-ng-circle-status.mjs +2 -2
  18. package/fesm2022/siemens-element-ng-circle-status.mjs.map +1 -1
  19. package/fesm2022/siemens-element-ng-color-picker.mjs +18 -18
  20. package/fesm2022/siemens-element-ng-color-picker.mjs.map +1 -1
  21. package/fesm2022/siemens-element-ng-connection-strength.mjs +2 -2
  22. package/fesm2022/siemens-element-ng-connection-strength.mjs.map +1 -1
  23. package/fesm2022/siemens-element-ng-content-action-bar.mjs +2 -2
  24. package/fesm2022/siemens-element-ng-content-action-bar.mjs.map +1 -1
  25. package/fesm2022/siemens-element-ng-dashboard.mjs +8 -8
  26. package/fesm2022/siemens-element-ng-dashboard.mjs.map +1 -1
  27. package/fesm2022/siemens-element-ng-date-range-filter.mjs +2 -2
  28. package/fesm2022/siemens-element-ng-date-range-filter.mjs.map +1 -1
  29. package/fesm2022/siemens-element-ng-datepicker.mjs +8 -8
  30. package/fesm2022/siemens-element-ng-datepicker.mjs.map +1 -1
  31. package/fesm2022/siemens-element-ng-electron-titlebar.mjs +2 -2
  32. package/fesm2022/siemens-element-ng-electron-titlebar.mjs.map +1 -1
  33. package/fesm2022/siemens-element-ng-empty-state.mjs +2 -2
  34. package/fesm2022/siemens-element-ng-empty-state.mjs.map +1 -1
  35. package/fesm2022/siemens-element-ng-file-uploader.mjs +2 -2
  36. package/fesm2022/siemens-element-ng-file-uploader.mjs.map +1 -1
  37. package/fesm2022/siemens-element-ng-filter-bar.mjs +4 -4
  38. package/fesm2022/siemens-element-ng-filter-bar.mjs.map +1 -1
  39. package/fesm2022/siemens-element-ng-filtered-search.mjs +4 -4
  40. package/fesm2022/siemens-element-ng-filtered-search.mjs.map +1 -1
  41. package/fesm2022/siemens-element-ng-footer.mjs +2 -2
  42. package/fesm2022/siemens-element-ng-footer.mjs.map +1 -1
  43. package/fesm2022/siemens-element-ng-help-button.mjs +2 -2
  44. package/fesm2022/siemens-element-ng-help-button.mjs.map +1 -1
  45. package/fesm2022/siemens-element-ng-landing-page.mjs +2 -2
  46. package/fesm2022/siemens-element-ng-landing-page.mjs.map +1 -1
  47. package/fesm2022/siemens-element-ng-language-switcher.mjs +2 -2
  48. package/fesm2022/siemens-element-ng-language-switcher.mjs.map +1 -1
  49. package/fesm2022/siemens-element-ng-list-details.mjs +2 -2
  50. package/fesm2022/siemens-element-ng-list-details.mjs.map +1 -1
  51. package/fesm2022/siemens-element-ng-loading-spinner.mjs +4 -4
  52. package/fesm2022/siemens-element-ng-loading-spinner.mjs.map +1 -1
  53. package/fesm2022/siemens-element-ng-maplibre.mjs +21 -21
  54. package/fesm2022/siemens-element-ng-maplibre.mjs.map +1 -1
  55. package/fesm2022/siemens-element-ng-markdown-extensions-katex.mjs +2 -2
  56. package/fesm2022/siemens-element-ng-markdown-extensions-katex.mjs.map +1 -1
  57. package/fesm2022/siemens-element-ng-markdown-hightlighter-highlightjs.mjs +2 -2
  58. package/fesm2022/siemens-element-ng-markdown-hightlighter-highlightjs.mjs.map +1 -1
  59. package/fesm2022/siemens-element-ng-menu.mjs +6 -6
  60. package/fesm2022/siemens-element-ng-menu.mjs.map +1 -1
  61. package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs +6 -6
  62. package/fesm2022/siemens-element-ng-navbar-vertical-next.mjs.map +1 -1
  63. package/fesm2022/siemens-element-ng-navbar-vertical.mjs +6 -6
  64. package/fesm2022/siemens-element-ng-navbar-vertical.mjs.map +1 -1
  65. package/fesm2022/siemens-element-ng-notification-item.mjs +2 -4
  66. package/fesm2022/siemens-element-ng-notification-item.mjs.map +1 -1
  67. package/fesm2022/siemens-element-ng-number-input.mjs +2 -2
  68. package/fesm2022/siemens-element-ng-number-input.mjs.map +1 -1
  69. package/fesm2022/siemens-element-ng-password-strength.mjs +2 -2
  70. package/fesm2022/siemens-element-ng-password-strength.mjs.map +1 -1
  71. package/fesm2022/siemens-element-ng-phone-number.mjs +2 -2
  72. package/fesm2022/siemens-element-ng-phone-number.mjs.map +1 -1
  73. package/fesm2022/siemens-element-ng-photo-upload.mjs +4 -4
  74. package/fesm2022/siemens-element-ng-photo-upload.mjs.map +1 -1
  75. package/fesm2022/siemens-element-ng-pills-input.mjs +2 -2
  76. package/fesm2022/siemens-element-ng-pills-input.mjs.map +1 -1
  77. package/fesm2022/siemens-element-ng-result-details-list.mjs +2 -2
  78. package/fesm2022/siemens-element-ng-result-details-list.mjs.map +1 -1
  79. package/fesm2022/siemens-element-ng-search-bar.mjs +2 -2
  80. package/fesm2022/siemens-element-ng-search-bar.mjs.map +1 -1
  81. package/fesm2022/siemens-element-ng-select.mjs +4 -4
  82. package/fesm2022/siemens-element-ng-select.mjs.map +1 -1
  83. package/fesm2022/siemens-element-ng-side-panel.mjs +6 -6
  84. package/fesm2022/siemens-element-ng-side-panel.mjs.map +1 -1
  85. package/fesm2022/siemens-element-ng-skip-links.mjs +2 -2
  86. package/fesm2022/siemens-element-ng-skip-links.mjs.map +1 -1
  87. package/fesm2022/siemens-element-ng-slider.mjs +2 -2
  88. package/fesm2022/siemens-element-ng-slider.mjs.map +1 -1
  89. package/fesm2022/siemens-element-ng-source-chip.mjs +2 -2
  90. package/fesm2022/siemens-element-ng-source-chip.mjs.map +1 -1
  91. package/fesm2022/siemens-element-ng-split.mjs +4 -4
  92. package/fesm2022/siemens-element-ng-split.mjs.map +1 -1
  93. package/fesm2022/siemens-element-ng-status-bar.mjs +4 -4
  94. package/fesm2022/siemens-element-ng-status-bar.mjs.map +1 -1
  95. package/fesm2022/siemens-element-ng-status-counter.mjs +2 -2
  96. package/fesm2022/siemens-element-ng-status-counter.mjs.map +1 -1
  97. package/fesm2022/siemens-element-ng-status-toggle.mjs +2 -2
  98. package/fesm2022/siemens-element-ng-status-toggle.mjs.map +1 -1
  99. package/fesm2022/siemens-element-ng-summary-chip.mjs +2 -2
  100. package/fesm2022/siemens-element-ng-summary-chip.mjs.map +1 -1
  101. package/fesm2022/siemens-element-ng-summary-widget.mjs +2 -2
  102. package/fesm2022/siemens-element-ng-summary-widget.mjs.map +1 -1
  103. package/fesm2022/siemens-element-ng-system-banner.mjs +2 -2
  104. package/fesm2022/siemens-element-ng-system-banner.mjs.map +1 -1
  105. package/fesm2022/siemens-element-ng-tabs-legacy.mjs +2 -2
  106. package/fesm2022/siemens-element-ng-tabs-legacy.mjs.map +1 -1
  107. package/fesm2022/siemens-element-ng-tabs.mjs +2 -2
  108. package/fesm2022/siemens-element-ng-tabs.mjs.map +1 -1
  109. package/fesm2022/siemens-element-ng-threshold.mjs +2 -2
  110. package/fesm2022/siemens-element-ng-threshold.mjs.map +1 -1
  111. package/fesm2022/siemens-element-ng-toast-notification.mjs +2 -2
  112. package/fesm2022/siemens-element-ng-toast-notification.mjs.map +1 -1
  113. package/fesm2022/siemens-element-ng-tour.mjs +4 -4
  114. package/fesm2022/siemens-element-ng-tour.mjs.map +1 -1
  115. package/fesm2022/siemens-element-ng-tree-view.mjs +4 -4
  116. package/fesm2022/siemens-element-ng-tree-view.mjs.map +1 -1
  117. package/fesm2022/siemens-element-ng-wizard.mjs +2 -2
  118. package/fesm2022/siemens-element-ng-wizard.mjs.map +1 -1
  119. package/maplibre/styles/maplibre-gl.scss +22 -22
  120. package/package.json +4 -4
  121. package/schematics/migration.json +5 -0
  122. package/schematics/migrations/data/css-custom-properties.js +204 -12
  123. package/schematics/migrations/data/element-migration-data.js +13 -1
  124. package/schematics/migrations/data/index.js +1 -1
  125. package/schematics/ng-update/index.js +1 -0
  126. package/schematics/ng-update/migrate-to-v51-0-1.js +12 -0
  127. package/schematics/utils/testing.js +13 -1
  128. package/types/siemens-element-ng-avatar.d.ts +1 -1
  129. package/types/siemens-element-ng-notification-item.d.ts +0 -12
@@ -38,11 +38,11 @@ class SiFilterPillComponent {
38
38
  this.deleteFilters.emit(this.filter());
39
39
  }
40
40
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilterPillComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
41
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilterPillComponent, isStandalone: true, selector: "si-filter-pill", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, totalPills: { classPropertyName: "totalPills", publicName: "totalPills", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFilters: "deleteFilters" }, ngImport: i0, template: "<div\n class=\"pill responsive\"\n [class.pe-0]=\"!disabled()\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <div class=\"wrapper\">\n @if (filter().title) {\n <div class=\"name\">{{ filter().title | translate }}</div>\n }\n @if (filter().title && filter().description) {\n <span class=\"name pe-4\">:</span>\n }\n <div class=\"value\">{{ filter().description | translate }}</div>\n </div>\n @if (!disabled()) {\n <ng-container *ngTemplateOutlet=\"remove\" />\n }\n</div>\n<ng-template #remove>\n <button\n type=\"button\"\n class=\"btn-remove btn btn-circle btn-tertiary-ghost focus-inside ms-0 btn-sm\"\n aria-label=\"Remove\"\n [disabled]=\"disabled()\"\n (click)=\"deleteClicked()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n</ng-template>\n", styles: [":host{--filter-pill-background-color: var(--si-sys-background-1)}:host.dark-background{--filter-pill-background-color: var(--si-sys-background-2)}.pill{margin-inline-start:var(--filter-pill-gap, var(--si-sys-sizing-spacing-x-40))}.wrapper{display:flex;flex-direction:column}.pill.responsive .wrapper{flex-direction:row}.pill.responsive .name{font-weight:600;white-space:nowrap}.pill.responsive .value{color:var(--si-sys-text-primary);white-space:nowrap;margin-inline-end:var(--si-sys-sizing-spacing-x-20)}.pill.responsive.disabled,.pill.responsive.disabled .value{padding-inline-end:var(--si-sys-sizing-spacing-x-10);color:var(--si-sys-text-disabled)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
41
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilterPillComponent, isStandalone: true, selector: "si-filter-pill", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, totalPills: { classPropertyName: "totalPills", publicName: "totalPills", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { deleteFilters: "deleteFilters" }, ngImport: i0, template: "<div\n class=\"pill responsive\"\n [class.pe-0]=\"!disabled()\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <div class=\"wrapper\">\n @if (filter().title) {\n <div class=\"name\">{{ filter().title | translate }}</div>\n }\n @if (filter().title && filter().description) {\n <span class=\"name pe-4\">:</span>\n }\n <div class=\"value\">{{ filter().description | translate }}</div>\n </div>\n @if (!disabled()) {\n <ng-container *ngTemplateOutlet=\"remove\" />\n }\n</div>\n<ng-template #remove>\n <button\n type=\"button\"\n class=\"btn-remove btn btn-circle btn-tertiary-ghost focus-inside ms-0 btn-sm\"\n aria-label=\"Remove\"\n [disabled]=\"disabled()\"\n (click)=\"deleteClicked()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n</ng-template>\n", styles: [":host{--filter-pill-background-color: var(--si-sys-color-background-1)}:host.dark-background{--filter-pill-background-color: var(--si-sys-color-background-2)}.pill{margin-inline-start:var(--filter-pill-gap, var(--si-sys-sizing-spacing-x-40))}.wrapper{display:flex;flex-direction:column}.pill.responsive .wrapper{flex-direction:row}.pill.responsive .name{font-weight:600;white-space:nowrap}.pill.responsive .value{color:var(--si-sys-color-text-primary);white-space:nowrap;margin-inline-end:var(--si-sys-sizing-spacing-x-20)}.pill.responsive.disabled,.pill.responsive.disabled .value{padding-inline-end:var(--si-sys-sizing-spacing-x-10);color:var(--si-sys-color-text-disabled)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
42
42
  }
43
43
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilterPillComponent, decorators: [{
44
44
  type: Component,
45
- args: [{ selector: 'si-filter-pill', imports: [NgTemplateOutlet, SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n class=\"pill responsive\"\n [class.pe-0]=\"!disabled()\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <div class=\"wrapper\">\n @if (filter().title) {\n <div class=\"name\">{{ filter().title | translate }}</div>\n }\n @if (filter().title && filter().description) {\n <span class=\"name pe-4\">:</span>\n }\n <div class=\"value\">{{ filter().description | translate }}</div>\n </div>\n @if (!disabled()) {\n <ng-container *ngTemplateOutlet=\"remove\" />\n }\n</div>\n<ng-template #remove>\n <button\n type=\"button\"\n class=\"btn-remove btn btn-circle btn-tertiary-ghost focus-inside ms-0 btn-sm\"\n aria-label=\"Remove\"\n [disabled]=\"disabled()\"\n (click)=\"deleteClicked()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n</ng-template>\n", styles: [":host{--filter-pill-background-color: var(--si-sys-background-1)}:host.dark-background{--filter-pill-background-color: var(--si-sys-background-2)}.pill{margin-inline-start:var(--filter-pill-gap, var(--si-sys-sizing-spacing-x-40))}.wrapper{display:flex;flex-direction:column}.pill.responsive .wrapper{flex-direction:row}.pill.responsive .name{font-weight:600;white-space:nowrap}.pill.responsive .value{color:var(--si-sys-text-primary);white-space:nowrap;margin-inline-end:var(--si-sys-sizing-spacing-x-20)}.pill.responsive.disabled,.pill.responsive.disabled .value{padding-inline-end:var(--si-sys-sizing-spacing-x-10);color:var(--si-sys-text-disabled)}\n"] }]
45
+ args: [{ selector: 'si-filter-pill', imports: [NgTemplateOutlet, SiIconComponent, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.Eager, template: "<div\n class=\"pill responsive\"\n [class.pe-0]=\"!disabled()\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <div class=\"wrapper\">\n @if (filter().title) {\n <div class=\"name\">{{ filter().title | translate }}</div>\n }\n @if (filter().title && filter().description) {\n <span class=\"name pe-4\">:</span>\n }\n <div class=\"value\">{{ filter().description | translate }}</div>\n </div>\n @if (!disabled()) {\n <ng-container *ngTemplateOutlet=\"remove\" />\n }\n</div>\n<ng-template #remove>\n <button\n type=\"button\"\n class=\"btn-remove btn btn-circle btn-tertiary-ghost focus-inside ms-0 btn-sm\"\n aria-label=\"Remove\"\n [disabled]=\"disabled()\"\n (click)=\"deleteClicked()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n</ng-template>\n", styles: [":host{--filter-pill-background-color: var(--si-sys-color-background-1)}:host.dark-background{--filter-pill-background-color: var(--si-sys-color-background-2)}.pill{margin-inline-start:var(--filter-pill-gap, var(--si-sys-sizing-spacing-x-40))}.wrapper{display:flex;flex-direction:column}.pill.responsive .wrapper{flex-direction:row}.pill.responsive .name{font-weight:600;white-space:nowrap}.pill.responsive .value{color:var(--si-sys-color-text-primary);white-space:nowrap;margin-inline-end:var(--si-sys-sizing-spacing-x-20)}.pill.responsive.disabled,.pill.responsive.disabled .value{padding-inline-end:var(--si-sys-sizing-spacing-x-10);color:var(--si-sys-color-text-disabled)}\n"] }]
46
46
  }], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], totalPills: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalPills", required: false }] }], deleteFilters: [{ type: i0.Output, args: ["deleteFilters"] }] } });
47
47
 
48
48
  /**
@@ -124,7 +124,7 @@ class SiFilterBarComponent {
124
124
  .findIndex(item => !item.isVisible())));
125
125
  }
126
126
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilterBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
127
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilterBarComponent, isStandalone: true, selector: "si-filter-bar", inputs: { filterDefaultText: { classPropertyName: "filterDefaultText", publicName: "filterDefaultText", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, resetText: { classPropertyName: "resetText", publicName: "resetText", isSignal: true, isRequired: false, transformFunction: null }, allowReset: { classPropertyName: "allowReset", publicName: "allowReset", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, collapsedFiltersDescription: { classPropertyName: "collapsedFiltersDescription", publicName: "collapsedFiltersDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", resetFilters: "resetFilters" }, host: { properties: { "class.reset": "allowReset()" } }, viewQueries: [{ propertyName: "collapsableListDirective", first: true, predicate: SiAutoCollapsableListDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"responsive py-2\" siAutoCollapsableList>\n @for (filter of filters(); track $index) {\n <div class=\"pill-wrapper\" siAutoCollapsableListItem>\n <si-filter-pill\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [totalPills]=\"$count\"\n [filter]=\"filter\"\n [disabled]=\"disabled()\"\n (deleteFilters)=\"deleteFilters($event)\"\n />\n </div>\n } @empty {\n <span class=\"list-text\">{{ filterDefaultText() | translate }}</span>\n }\n <si-filter-pill\n #overflowItem=\"siAutoCollapsableListOverflowItem\"\n siAutoCollapsableListOverflowItem\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [disabled]=\"disabled()\"\n [filter]=\"{\n description:\n collapsedFiltersDescription()\n | translate\n : {\n count: overflowItem.hiddenItemCount\n },\n title: '',\n filterName: ''\n }\"\n (deleteFilters)=\"deleteOverflowFilter()\"\n />\n @if (allowReset() && this.filters().length) {\n <button\n siAutoCollapsableListAdditionalContent\n type=\"button\"\n class=\"text-nowrap btn btn-tertiary\"\n [disabled]=\"disabled()\"\n (click)=\"onResetFilters()\"\n >\n {{ resetText() | translate }}\n </button>\n }\n</div>\n", styles: [":host{--filter-pill-gap: var(--si-sys-sizing-spacing-y-40)}:host.reset .responsive .list-text{line-height:calc(var(--si-sys-typography-font-size-body) + var(--si-sys-sizing-spacing-y-40) * 2)}.list-text{line-height:24px}.pill-wrapper{display:inline-block;vertical-align:middle}.responsive{overflow:hidden;display:flex;align-items:center;gap:var(--filter-pill-gap)}.responsive .list-text{color:var(--si-sys-text-disabled)}.responsive .invisible{position:absolute}.responsive si-filter-pill::ng-deep .pill{margin-inline-start:0}\n"], dependencies: [{ kind: "directive", type: SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "directive", type: SiAutoCollapsableListAdditionalContentDirective, selector: "[siAutoCollapsableListAdditionalContent]" }, { kind: "component", type: SiFilterPillComponent, selector: "si-filter-pill", inputs: ["filter", "disabled", "totalPills"], outputs: ["deleteFilters"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
127
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilterBarComponent, isStandalone: true, selector: "si-filter-bar", inputs: { filterDefaultText: { classPropertyName: "filterDefaultText", publicName: "filterDefaultText", isSignal: true, isRequired: false, transformFunction: null }, filters: { classPropertyName: "filters", publicName: "filters", isSignal: true, isRequired: false, transformFunction: null }, resetText: { classPropertyName: "resetText", publicName: "resetText", isSignal: true, isRequired: false, transformFunction: null }, allowReset: { classPropertyName: "allowReset", publicName: "allowReset", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, collapsedFiltersDescription: { classPropertyName: "collapsedFiltersDescription", publicName: "collapsedFiltersDescription", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filters: "filtersChange", resetFilters: "resetFilters" }, host: { properties: { "class.reset": "allowReset()" } }, viewQueries: [{ propertyName: "collapsableListDirective", first: true, predicate: SiAutoCollapsableListDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"responsive py-2\" siAutoCollapsableList>\n @for (filter of filters(); track $index) {\n <div class=\"pill-wrapper\" siAutoCollapsableListItem>\n <si-filter-pill\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [totalPills]=\"$count\"\n [filter]=\"filter\"\n [disabled]=\"disabled()\"\n (deleteFilters)=\"deleteFilters($event)\"\n />\n </div>\n } @empty {\n <span class=\"list-text\">{{ filterDefaultText() | translate }}</span>\n }\n <si-filter-pill\n #overflowItem=\"siAutoCollapsableListOverflowItem\"\n siAutoCollapsableListOverflowItem\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [disabled]=\"disabled()\"\n [filter]=\"{\n description:\n collapsedFiltersDescription()\n | translate\n : {\n count: overflowItem.hiddenItemCount\n },\n title: '',\n filterName: ''\n }\"\n (deleteFilters)=\"deleteOverflowFilter()\"\n />\n @if (allowReset() && this.filters().length) {\n <button\n siAutoCollapsableListAdditionalContent\n type=\"button\"\n class=\"text-nowrap btn btn-tertiary\"\n [disabled]=\"disabled()\"\n (click)=\"onResetFilters()\"\n >\n {{ resetText() | translate }}\n </button>\n }\n</div>\n", styles: [":host{--filter-pill-gap: var(--si-sys-sizing-spacing-y-40)}:host.reset .responsive .list-text{line-height:calc(var(--si-sys-typography-font-size-body) + var(--si-sys-sizing-spacing-y-40) * 2)}.list-text{line-height:24px}.pill-wrapper{display:inline-block;vertical-align:middle}.responsive{overflow:hidden;display:flex;align-items:center;gap:var(--filter-pill-gap)}.responsive .list-text{color:var(--si-sys-color-text-disabled)}.responsive .invisible{position:absolute}.responsive si-filter-pill::ng-deep .pill{margin-inline-start:0}\n"], dependencies: [{ kind: "directive", type: SiAutoCollapsableListDirective, selector: "[siAutoCollapsableList]", inputs: ["siAutoCollapsableList", "gap", "siAutoCollapsableListContainerElement"], exportAs: ["siAutoCollapsableList"] }, { kind: "directive", type: SiAutoCollapsableListItemDirective, selector: "[siAutoCollapsableListItem]", inputs: ["forceHide"], exportAs: ["siAutoCollapsableListItem"] }, { kind: "directive", type: SiAutoCollapsableListOverflowItemDirective, selector: "[siAutoCollapsableListOverflowItem]", exportAs: ["siAutoCollapsableListOverflowItem"] }, { kind: "directive", type: SiAutoCollapsableListAdditionalContentDirective, selector: "[siAutoCollapsableListAdditionalContent]" }, { kind: "component", type: SiFilterPillComponent, selector: "si-filter-pill", inputs: ["filter", "disabled", "totalPills"], outputs: ["deleteFilters"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
128
128
  }
129
129
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilterBarComponent, decorators: [{
130
130
  type: Component,
@@ -137,7 +137,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
137
137
  SiTranslatePipe
138
138
  ], changeDetection: ChangeDetectionStrategy.Eager, host: {
139
139
  '[class.reset]': 'allowReset()'
140
- }, template: "<div class=\"responsive py-2\" siAutoCollapsableList>\n @for (filter of filters(); track $index) {\n <div class=\"pill-wrapper\" siAutoCollapsableListItem>\n <si-filter-pill\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [totalPills]=\"$count\"\n [filter]=\"filter\"\n [disabled]=\"disabled()\"\n (deleteFilters)=\"deleteFilters($event)\"\n />\n </div>\n } @empty {\n <span class=\"list-text\">{{ filterDefaultText() | translate }}</span>\n }\n <si-filter-pill\n #overflowItem=\"siAutoCollapsableListOverflowItem\"\n siAutoCollapsableListOverflowItem\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [disabled]=\"disabled()\"\n [filter]=\"{\n description:\n collapsedFiltersDescription()\n | translate\n : {\n count: overflowItem.hiddenItemCount\n },\n title: '',\n filterName: ''\n }\"\n (deleteFilters)=\"deleteOverflowFilter()\"\n />\n @if (allowReset() && this.filters().length) {\n <button\n siAutoCollapsableListAdditionalContent\n type=\"button\"\n class=\"text-nowrap btn btn-tertiary\"\n [disabled]=\"disabled()\"\n (click)=\"onResetFilters()\"\n >\n {{ resetText() | translate }}\n </button>\n }\n</div>\n", styles: [":host{--filter-pill-gap: var(--si-sys-sizing-spacing-y-40)}:host.reset .responsive .list-text{line-height:calc(var(--si-sys-typography-font-size-body) + var(--si-sys-sizing-spacing-y-40) * 2)}.list-text{line-height:24px}.pill-wrapper{display:inline-block;vertical-align:middle}.responsive{overflow:hidden;display:flex;align-items:center;gap:var(--filter-pill-gap)}.responsive .list-text{color:var(--si-sys-text-disabled)}.responsive .invisible{position:absolute}.responsive si-filter-pill::ng-deep .pill{margin-inline-start:0}\n"] }]
140
+ }, template: "<div class=\"responsive py-2\" siAutoCollapsableList>\n @for (filter of filters(); track $index) {\n <div class=\"pill-wrapper\" siAutoCollapsableListItem>\n <si-filter-pill\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [totalPills]=\"$count\"\n [filter]=\"filter\"\n [disabled]=\"disabled()\"\n (deleteFilters)=\"deleteFilters($event)\"\n />\n </div>\n } @empty {\n <span class=\"list-text\">{{ filterDefaultText() | translate }}</span>\n }\n <si-filter-pill\n #overflowItem=\"siAutoCollapsableListOverflowItem\"\n siAutoCollapsableListOverflowItem\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [disabled]=\"disabled()\"\n [filter]=\"{\n description:\n collapsedFiltersDescription()\n | translate\n : {\n count: overflowItem.hiddenItemCount\n },\n title: '',\n filterName: ''\n }\"\n (deleteFilters)=\"deleteOverflowFilter()\"\n />\n @if (allowReset() && this.filters().length) {\n <button\n siAutoCollapsableListAdditionalContent\n type=\"button\"\n class=\"text-nowrap btn btn-tertiary\"\n [disabled]=\"disabled()\"\n (click)=\"onResetFilters()\"\n >\n {{ resetText() | translate }}\n </button>\n }\n</div>\n", styles: [":host{--filter-pill-gap: var(--si-sys-sizing-spacing-y-40)}:host.reset .responsive .list-text{line-height:calc(var(--si-sys-typography-font-size-body) + var(--si-sys-sizing-spacing-y-40) * 2)}.list-text{line-height:24px}.pill-wrapper{display:inline-block;vertical-align:middle}.responsive{overflow:hidden;display:flex;align-items:center;gap:var(--filter-pill-gap)}.responsive .list-text{color:var(--si-sys-color-text-disabled)}.responsive .invisible{position:absolute}.responsive si-filter-pill::ng-deep .pill{margin-inline-start:0}\n"] }]
141
141
  }], propDecorators: { filterDefaultText: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterDefaultText", required: false }] }], filters: [{ type: i0.Input, args: [{ isSignal: true, alias: "filters", required: false }] }, { type: i0.Output, args: ["filtersChange"] }], resetText: [{ type: i0.Input, args: [{ isSignal: true, alias: "resetText", required: false }] }], allowReset: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowReset", required: false }] }], colorVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorVariant", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], collapsedFiltersDescription: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedFiltersDescription", required: false }] }], resetFilters: [{ type: i0.Output, args: ["resetFilters"] }], collapsableListDirective: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiAutoCollapsableListDirective), { isSignal: true }] }] } });
142
142
 
143
143
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"siemens-element-ng-filter-bar.mjs","sources":["../../../../projects/element-ng/filter-bar/si-filter-pill.component.ts","../../../../projects/element-ng/filter-bar/si-filter-pill.component.html","../../../../projects/element-ng/filter-bar/si-filter-bar.component.ts","../../../../projects/element-ng/filter-bar/si-filter-bar.component.html","../../../../projects/element-ng/filter-bar/si-filter-bar.module.ts","../../../../projects/element-ng/filter-bar/index.ts","../../../../projects/element-ng/filter-bar/siemens-element-ng-filter-bar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, input, output } from '@angular/core';\nimport { elementCancel } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { Filter } from './filter';\n\n@Component({\n selector: 'si-filter-pill',\n imports: [NgTemplateOutlet, SiIconComponent, SiTranslatePipe],\n templateUrl: './si-filter-pill.component.html',\n styleUrl: './si-filter-pill.component.scss',\n changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class SiFilterPillComponent {\n protected readonly icons = addIcons({ elementCancel });\n /**\n * Settings of the filter pill.\n */\n readonly filter = input.required<Filter>();\n\n /**\n * Whether the pill's delete button is disabled.\n *\n * @defaultValue false\n */\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Total number of filter pills currently displayed.\n *\n * @defaultValue 0\n */\n readonly totalPills = input(0);\n\n /**\n * Emits the filter when its delete button is clicked.\n */\n readonly deleteFilters = output<Filter>();\n\n protected deleteClicked(): void {\n this.deleteFilters.emit(this.filter());\n }\n}\n","<div\n class=\"pill responsive\"\n [class.pe-0]=\"!disabled()\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <div class=\"wrapper\">\n @if (filter().title) {\n <div class=\"name\">{{ filter().title | translate }}</div>\n }\n @if (filter().title && filter().description) {\n <span class=\"name pe-4\">:</span>\n }\n <div class=\"value\">{{ filter().description | translate }}</div>\n </div>\n @if (!disabled()) {\n <ng-container *ngTemplateOutlet=\"remove\" />\n }\n</div>\n<ng-template #remove>\n <button\n type=\"button\"\n class=\"btn-remove btn btn-circle btn-tertiary-ghost focus-inside ms-0 btn-sm\"\n aria-label=\"Remove\"\n [disabled]=\"disabled()\"\n (click)=\"deleteClicked()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n input,\n model,\n output,\n viewChild\n} from '@angular/core';\nimport {\n SiAutoCollapsableListAdditionalContentDirective,\n SiAutoCollapsableListDirective,\n SiAutoCollapsableListItemDirective,\n SiAutoCollapsableListOverflowItemDirective\n} from '@siemens/element-ng/auto-collapsable-list';\nimport { BackgroundColorVariant } from '@siemens/element-ng/common';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\nimport { Filter } from './filter';\nimport { SiFilterPillComponent } from './si-filter-pill.component';\n\n@Component({\n selector: 'si-filter-bar',\n imports: [\n SiAutoCollapsableListDirective,\n SiAutoCollapsableListItemDirective,\n SiAutoCollapsableListOverflowItemDirective,\n SiAutoCollapsableListAdditionalContentDirective,\n SiFilterPillComponent,\n SiTranslatePipe\n ],\n templateUrl: './si-filter-bar.component.html',\n styleUrl: './si-filter-bar.component.scss',\n changeDetection: ChangeDetectionStrategy.Eager,\n host: {\n '[class.reset]': 'allowReset()'\n }\n})\nexport class SiFilterBarComponent {\n /**\n * Custom text if no filters are selected.\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_FILTER_BAR.NO_FILTERS:No filters applied`)\n * ```\n */\n readonly filterDefaultText = input(\n t(() => $localize`:@@SI_FILTER_BAR.NO_FILTERS:No filters applied`)\n );\n /**\n * Array of filter items to show\n *\n * @defaultValue []\n */\n readonly filters = model<Filter[]>([]);\n /**\n * Text for reset button\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_FILTER_BAR.RESET_FILTERS:Reset filters`)\n * ```\n */\n readonly resetText = input(t(() => $localize`:@@SI_FILTER_BAR.RESET_FILTERS:Reset filters`));\n /**\n * Set false to hide reset filters button\n *\n * @defaultValue true\n */\n readonly allowReset = input(true, { transform: booleanAttribute });\n /**\n * Color to use for component background\n *\n * @defaultValue 'base-1'\n */\n readonly colorVariant = input<BackgroundColorVariant>('base-1');\n\n /**\n * Set to true to disable component\n *\n * @defaultValue false\n */\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Custom text for the collapsed filters.\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION:+ {{count}} criteria`)\n * ```\n */\n readonly collapsedFiltersDescription = input(\n t(() => $localize`:@@SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION:+ {{count}} criteria`)\n );\n\n /**\n * Output callback to be executed when the reset filter is clicked\n */\n readonly resetFilters = output<void>();\n\n private readonly collapsableListDirective = viewChild.required(SiAutoCollapsableListDirective);\n\n protected deleteFilters(deletedPill: Filter): void {\n this.filters.set(this.filters().filter(filter => filter !== deletedPill));\n }\n\n protected onResetFilters(): void {\n this.filters.set([]);\n this.resetFilters.emit();\n }\n\n protected deleteOverflowFilter(): void {\n this.filters.update(filters =>\n filters.slice(\n 0,\n this.collapsableListDirective()\n .items()\n .findIndex(item => !item.isVisible())\n )\n );\n }\n}\n","<div class=\"responsive py-2\" siAutoCollapsableList>\n @for (filter of filters(); track $index) {\n <div class=\"pill-wrapper\" siAutoCollapsableListItem>\n <si-filter-pill\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [totalPills]=\"$count\"\n [filter]=\"filter\"\n [disabled]=\"disabled()\"\n (deleteFilters)=\"deleteFilters($event)\"\n />\n </div>\n } @empty {\n <span class=\"list-text\">{{ filterDefaultText() | translate }}</span>\n }\n <si-filter-pill\n #overflowItem=\"siAutoCollapsableListOverflowItem\"\n siAutoCollapsableListOverflowItem\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [disabled]=\"disabled()\"\n [filter]=\"{\n description:\n collapsedFiltersDescription()\n | translate\n : {\n count: overflowItem.hiddenItemCount\n },\n title: '',\n filterName: ''\n }\"\n (deleteFilters)=\"deleteOverflowFilter()\"\n />\n @if (allowReset() && this.filters().length) {\n <button\n siAutoCollapsableListAdditionalContent\n type=\"button\"\n class=\"text-nowrap btn btn-tertiary\"\n [disabled]=\"disabled()\"\n (click)=\"onResetFilters()\"\n >\n {{ resetText() | translate }}\n </button>\n }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiFilterBarComponent } from './si-filter-bar.component';\n\n@NgModule({\n imports: [SiFilterBarComponent],\n exports: [SiFilterBarComponent]\n})\nexport class SiFilterBarModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './filter';\nexport * from './si-filter-bar.component';\nexport * from './si-filter-bar.module';\nexport * from './si-filter-pill.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"siemens-element-ng-filter-bar.mjs","sources":["../../../../projects/element-ng/filter-bar/si-filter-pill.component.ts","../../../../projects/element-ng/filter-bar/si-filter-pill.component.html","../../../../projects/element-ng/filter-bar/si-filter-bar.component.ts","../../../../projects/element-ng/filter-bar/si-filter-bar.component.html","../../../../projects/element-ng/filter-bar/si-filter-bar.module.ts","../../../../projects/element-ng/filter-bar/index.ts","../../../../projects/element-ng/filter-bar/siemens-element-ng-filter-bar.ts"],"sourcesContent":["/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgTemplateOutlet } from '@angular/common';\nimport { booleanAttribute, ChangeDetectionStrategy, Component, input, output } from '@angular/core';\nimport { elementCancel } from '@siemens/element-icons';\nimport { addIcons, SiIconComponent } from '@siemens/element-ng/icon';\nimport { SiTranslatePipe } from '@siemens/element-translate-ng/translate';\n\nimport { Filter } from './filter';\n\n@Component({\n selector: 'si-filter-pill',\n imports: [NgTemplateOutlet, SiIconComponent, SiTranslatePipe],\n templateUrl: './si-filter-pill.component.html',\n styleUrl: './si-filter-pill.component.scss',\n changeDetection: ChangeDetectionStrategy.Eager\n})\nexport class SiFilterPillComponent {\n protected readonly icons = addIcons({ elementCancel });\n /**\n * Settings of the filter pill.\n */\n readonly filter = input.required<Filter>();\n\n /**\n * Whether the pill's delete button is disabled.\n *\n * @defaultValue false\n */\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Total number of filter pills currently displayed.\n *\n * @defaultValue 0\n */\n readonly totalPills = input(0);\n\n /**\n * Emits the filter when its delete button is clicked.\n */\n readonly deleteFilters = output<Filter>();\n\n protected deleteClicked(): void {\n this.deleteFilters.emit(this.filter());\n }\n}\n","<div\n class=\"pill responsive\"\n [class.pe-0]=\"!disabled()\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n>\n <div class=\"wrapper\">\n @if (filter().title) {\n <div class=\"name\">{{ filter().title | translate }}</div>\n }\n @if (filter().title && filter().description) {\n <span class=\"name pe-4\">:</span>\n }\n <div class=\"value\">{{ filter().description | translate }}</div>\n </div>\n @if (!disabled()) {\n <ng-container *ngTemplateOutlet=\"remove\" />\n }\n</div>\n<ng-template #remove>\n <button\n type=\"button\"\n class=\"btn-remove btn btn-circle btn-tertiary-ghost focus-inside ms-0 btn-sm\"\n aria-label=\"Remove\"\n [disabled]=\"disabled()\"\n (click)=\"deleteClicked()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n</ng-template>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport {\n booleanAttribute,\n ChangeDetectionStrategy,\n Component,\n input,\n model,\n output,\n viewChild\n} from '@angular/core';\nimport {\n SiAutoCollapsableListAdditionalContentDirective,\n SiAutoCollapsableListDirective,\n SiAutoCollapsableListItemDirective,\n SiAutoCollapsableListOverflowItemDirective\n} from '@siemens/element-ng/auto-collapsable-list';\nimport { BackgroundColorVariant } from '@siemens/element-ng/common';\nimport { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';\n\nimport { Filter } from './filter';\nimport { SiFilterPillComponent } from './si-filter-pill.component';\n\n@Component({\n selector: 'si-filter-bar',\n imports: [\n SiAutoCollapsableListDirective,\n SiAutoCollapsableListItemDirective,\n SiAutoCollapsableListOverflowItemDirective,\n SiAutoCollapsableListAdditionalContentDirective,\n SiFilterPillComponent,\n SiTranslatePipe\n ],\n templateUrl: './si-filter-bar.component.html',\n styleUrl: './si-filter-bar.component.scss',\n changeDetection: ChangeDetectionStrategy.Eager,\n host: {\n '[class.reset]': 'allowReset()'\n }\n})\nexport class SiFilterBarComponent {\n /**\n * Custom text if no filters are selected.\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_FILTER_BAR.NO_FILTERS:No filters applied`)\n * ```\n */\n readonly filterDefaultText = input(\n t(() => $localize`:@@SI_FILTER_BAR.NO_FILTERS:No filters applied`)\n );\n /**\n * Array of filter items to show\n *\n * @defaultValue []\n */\n readonly filters = model<Filter[]>([]);\n /**\n * Text for reset button\n *\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_FILTER_BAR.RESET_FILTERS:Reset filters`)\n * ```\n */\n readonly resetText = input(t(() => $localize`:@@SI_FILTER_BAR.RESET_FILTERS:Reset filters`));\n /**\n * Set false to hide reset filters button\n *\n * @defaultValue true\n */\n readonly allowReset = input(true, { transform: booleanAttribute });\n /**\n * Color to use for component background\n *\n * @defaultValue 'base-1'\n */\n readonly colorVariant = input<BackgroundColorVariant>('base-1');\n\n /**\n * Set to true to disable component\n *\n * @defaultValue false\n */\n readonly disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Custom text for the collapsed filters.\n * @defaultValue\n * ```\n * t(() => $localize`:@@SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION:+ {{count}} criteria`)\n * ```\n */\n readonly collapsedFiltersDescription = input(\n t(() => $localize`:@@SI_FILTER_BAR.COLLAPSED_FILTERS_DESCRIPTION:+ {{count}} criteria`)\n );\n\n /**\n * Output callback to be executed when the reset filter is clicked\n */\n readonly resetFilters = output<void>();\n\n private readonly collapsableListDirective = viewChild.required(SiAutoCollapsableListDirective);\n\n protected deleteFilters(deletedPill: Filter): void {\n this.filters.set(this.filters().filter(filter => filter !== deletedPill));\n }\n\n protected onResetFilters(): void {\n this.filters.set([]);\n this.resetFilters.emit();\n }\n\n protected deleteOverflowFilter(): void {\n this.filters.update(filters =>\n filters.slice(\n 0,\n this.collapsableListDirective()\n .items()\n .findIndex(item => !item.isVisible())\n )\n );\n }\n}\n","<div class=\"responsive py-2\" siAutoCollapsableList>\n @for (filter of filters(); track $index) {\n <div class=\"pill-wrapper\" siAutoCollapsableListItem>\n <si-filter-pill\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [totalPills]=\"$count\"\n [filter]=\"filter\"\n [disabled]=\"disabled()\"\n (deleteFilters)=\"deleteFilters($event)\"\n />\n </div>\n } @empty {\n <span class=\"list-text\">{{ filterDefaultText() | translate }}</span>\n }\n <si-filter-pill\n #overflowItem=\"siAutoCollapsableListOverflowItem\"\n siAutoCollapsableListOverflowItem\n [class.dark-background]=\"colorVariant() === 'base-0'\"\n [disabled]=\"disabled()\"\n [filter]=\"{\n description:\n collapsedFiltersDescription()\n | translate\n : {\n count: overflowItem.hiddenItemCount\n },\n title: '',\n filterName: ''\n }\"\n (deleteFilters)=\"deleteOverflowFilter()\"\n />\n @if (allowReset() && this.filters().length) {\n <button\n siAutoCollapsableListAdditionalContent\n type=\"button\"\n class=\"text-nowrap btn btn-tertiary\"\n [disabled]=\"disabled()\"\n (click)=\"onResetFilters()\"\n >\n {{ resetText() | translate }}\n </button>\n }\n</div>\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nimport { NgModule } from '@angular/core';\n\nimport { SiFilterBarComponent } from './si-filter-bar.component';\n\n@NgModule({\n imports: [SiFilterBarComponent],\n exports: [SiFilterBarComponent]\n})\nexport class SiFilterBarModule {}\n","/**\n * Copyright (c) Siemens 2016 - 2026\n * SPDX-License-Identifier: MIT\n */\nexport * from './filter';\nexport * from './si-filter-bar.component';\nexport * from './si-filter-bar.module';\nexport * from './si-filter-pill.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
@@ -770,7 +770,7 @@ class SiFilteredSearchValueComponent {
770
770
  }
771
771
  }
772
772
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
773
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilteredSearchValueComponent, isStandalone: true, selector: "si-filtered-search-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: true, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: true, transformFunction: null }, clearButtonLabel: { classPropertyName: "clearButtonLabel", publicName: "clearButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: true, transformFunction: null }, itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, invalidCriterion: { classPropertyName: "invalidCriterion", publicName: "invalidCriterion", isSignal: true, isRequired: true, transformFunction: null }, isStrictOrOnlySelectValue: { classPropertyName: "isStrictOrOnlySelectValue", publicName: "isStrictOrOnlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, editOnCreation: { classPropertyName: "editOnCreation", publicName: "editOnCreation", isSignal: true, isRequired: true, transformFunction: null }, scrollStrategyFactory: { classPropertyName: "scrollStrategyFactory", publicName: "scrollStrategyFactory", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange", deleteCriterion: "deleteCriterion", submitCriterion: "submitCriterion" }, viewQueries: [{ propertyName: "operatorInput", first: true, predicate: ["operatorInput"], descendants: true, isSignal: true }, { propertyName: "valueInput", first: true, predicate: SiFilteredSearchValueBase, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n cdkMonitorSubtreeFocus\n class=\"criteria pill-group\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n [class.invalid-criterion]=\"invalidCriterion()\"\n (cdkFocusChange)=\"focusChange($event)\"\n>\n @if (type() !== 'free-text') {\n <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n {{ definition().label | translate }}\n </div>\n }\n @if (definition().operators?.length) {\n <div class=\"pill pill-interactive px-0 criterion-operator-section\">\n <!-- criterion operator input -->\n @if (active()) {\n <input\n #operatorInput\n type=\"text\"\n class=\"focus-inside operator-input py-0 border-0\"\n [siTypeahead]=\"definition().operators!\"\n [typeaheadScrollStrategy]=\"operatorScrollStrategy()\"\n [typeaheadProcess]=\"false\"\n [typeaheadAutoSelectIndex]=\"selectedOperatorIndex()\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"0\"\n [readOnly]=\"false\"\n [typeaheadScrollable]=\"true\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [attr.size]=\"longestOperatorLength()\"\n [ngModel]=\"value().operator\"\n (ngModelChange)=\"operatorUpdate($event)\"\n (keydown.backspace)=\"operatorBackspace()\"\n (keydown.enter)=\"operatorEnter()\"\n (typeaheadOnSelect)=\"operatorEnter()\"\n (blur)=\"operatorBlur()\"\n />\n } @else {\n <!-- criterion operator field -->\n <div\n class=\"criterion-operator-text px-2 focus-inside\"\n [tabindex]=\"!disabled() ? 0 : -1\"\n (keydown.enter)=\"edit('operator')\"\n (click)=\"edit('operator')\"\n >\n {{ value().operator }}\n </div>\n }\n </div>\n }\n @switch (type()) {\n @case ('free-text') {\n <si-filtered-search-free-text\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n (activeChange)=\"freeTextActiveChange($event)\"\n />\n }\n @case ('date') {\n <si-filtered-search-date-value\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [scrollStrategy]=\"datepickerScrollStrategy()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('multi-select') {\n <si-filtered-search-multi-select\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [scrollStrategy]=\"multiSelectScrollStrategy()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [itemCountText]=\"itemCountText()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('typeahead') {\n <si-filtered-search-typeahead\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [scrollStrategy]=\"typeaheadScrollStrategy()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n }\n <div class=\"pill px-0 ms-n1\">\n <button\n type=\"button\"\n class=\"btn btn-circle btn-sm btn-tertiary-ghost focus-inside\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n [disabled]=\"disabled()\"\n (click)=\"clear()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n</div>\n", styles: [".criteria{cursor:pointer;white-space:nowrap}.criteria.invalid-criterion{border-radius:.75rem;box-shadow:0 0 0 1px var(--si-sys-border-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--si-sys-border-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{padding-inline:var(--si-sys-sizing-spacing-x-20);inline-size:calc(1ch + 2 * var(--si-sys-sizing-spacing-x-20))}input{background:transparent}\n"], dependencies: [{ kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SiFilteredSearchDateValueComponent, selector: "si-filtered-search-date-value", inputs: ["scrollStrategy"] }, { kind: "component", type: SiFilteredSearchFreeTextComponent, selector: "si-filtered-search-free-text" }, { kind: "component", type: SiFilteredSearchTypeaheadComponent, selector: "si-filtered-search-typeahead", inputs: ["scrollStrategy"] }, { kind: "component", type: SiFilteredSearchMultiSelectComponent, selector: "si-filtered-search-multi-select", inputs: ["itemCountText", "scrollStrategy"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
773
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilteredSearchValueComponent, isStandalone: true, selector: "si-filtered-search-value", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: true, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: true, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: true, transformFunction: null }, clearButtonLabel: { classPropertyName: "clearButtonLabel", publicName: "clearButtonLabel", isSignal: true, isRequired: true, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: true, transformFunction: null }, itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: true, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: true, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: true, transformFunction: null }, invalidCriterion: { classPropertyName: "invalidCriterion", publicName: "invalidCriterion", isSignal: true, isRequired: true, transformFunction: null }, isStrictOrOnlySelectValue: { classPropertyName: "isStrictOrOnlySelectValue", publicName: "isStrictOrOnlySelectValue", isSignal: true, isRequired: true, transformFunction: null }, editOnCreation: { classPropertyName: "editOnCreation", publicName: "editOnCreation", isSignal: true, isRequired: true, transformFunction: null }, scrollStrategyFactory: { classPropertyName: "scrollStrategyFactory", publicName: "scrollStrategyFactory", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { value: "valueChange", deleteCriterion: "deleteCriterion", submitCriterion: "submitCriterion" }, viewQueries: [{ propertyName: "operatorInput", first: true, predicate: ["operatorInput"], descendants: true, isSignal: true }, { propertyName: "valueInput", first: true, predicate: SiFilteredSearchValueBase, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n cdkMonitorSubtreeFocus\n class=\"criteria pill-group\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n [class.invalid-criterion]=\"invalidCriterion()\"\n (cdkFocusChange)=\"focusChange($event)\"\n>\n @if (type() !== 'free-text') {\n <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n {{ definition().label | translate }}\n </div>\n }\n @if (definition().operators?.length) {\n <div class=\"pill pill-interactive px-0 criterion-operator-section\">\n <!-- criterion operator input -->\n @if (active()) {\n <input\n #operatorInput\n type=\"text\"\n class=\"focus-inside operator-input py-0 border-0\"\n [siTypeahead]=\"definition().operators!\"\n [typeaheadScrollStrategy]=\"operatorScrollStrategy()\"\n [typeaheadProcess]=\"false\"\n [typeaheadAutoSelectIndex]=\"selectedOperatorIndex()\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"0\"\n [readOnly]=\"false\"\n [typeaheadScrollable]=\"true\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [attr.size]=\"longestOperatorLength()\"\n [ngModel]=\"value().operator\"\n (ngModelChange)=\"operatorUpdate($event)\"\n (keydown.backspace)=\"operatorBackspace()\"\n (keydown.enter)=\"operatorEnter()\"\n (typeaheadOnSelect)=\"operatorEnter()\"\n (blur)=\"operatorBlur()\"\n />\n } @else {\n <!-- criterion operator field -->\n <div\n class=\"criterion-operator-text px-2 focus-inside\"\n [tabindex]=\"!disabled() ? 0 : -1\"\n (keydown.enter)=\"edit('operator')\"\n (click)=\"edit('operator')\"\n >\n {{ value().operator }}\n </div>\n }\n </div>\n }\n @switch (type()) {\n @case ('free-text') {\n <si-filtered-search-free-text\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n (activeChange)=\"freeTextActiveChange($event)\"\n />\n }\n @case ('date') {\n <si-filtered-search-date-value\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [scrollStrategy]=\"datepickerScrollStrategy()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('multi-select') {\n <si-filtered-search-multi-select\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [scrollStrategy]=\"multiSelectScrollStrategy()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [itemCountText]=\"itemCountText()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('typeahead') {\n <si-filtered-search-typeahead\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [scrollStrategy]=\"typeaheadScrollStrategy()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n }\n <div class=\"pill px-0 ms-n1\">\n <button\n type=\"button\"\n class=\"btn btn-circle btn-sm btn-tertiary-ghost focus-inside\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n [disabled]=\"disabled()\"\n (click)=\"clear()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n</div>\n", styles: [".criteria{cursor:pointer;white-space:nowrap}.criteria.invalid-criterion{border-radius:.75rem;box-shadow:0 0 0 1px var(--si-sys-color-border-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--si-sys-color-border-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{padding-inline:var(--si-sys-sizing-spacing-x-20);inline-size:calc(1ch + 2 * var(--si-sys-sizing-spacing-x-20))}input{background:transparent}\n"], dependencies: [{ kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: SiTypeaheadDirective, selector: "[siTypeahead]", inputs: ["siTypeahead", "typeaheadProcess", "typeaheadScrollable", "typeaheadOptionsInScrollableView", "typeaheadOptionsLimit", "typeaheadScrollableAdditionalHeight", "typeaheadAutoSelectIndex", "typeaheadCloseOnEsc", "typeaheadClearValueOnSelect", "typeaheadWaitMs", "typeaheadMinLength", "typeaheadOptionField", "typeaheadMultiSelect", "typeaheadTokenize", "typeaheadMatchAllTokens", "typeaheadItemTemplate", "typeaheadSkipSortingMatches", "typeaheadAutocompleteListLabel", "typeaheadFullWidth", "typeaheadScrollStrategy", "typeaheadCreateOption"], outputs: ["typeaheadOnInput", "typeaheadOnSelect", "typeaheadOnFullMatch", "typeaheadOpenChange", "typeaheadOnCreateOption"], exportAs: ["si-typeahead"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SiFilteredSearchDateValueComponent, selector: "si-filtered-search-date-value", inputs: ["scrollStrategy"] }, { kind: "component", type: SiFilteredSearchFreeTextComponent, selector: "si-filtered-search-free-text" }, { kind: "component", type: SiFilteredSearchTypeaheadComponent, selector: "si-filtered-search-typeahead", inputs: ["scrollStrategy"] }, { kind: "component", type: SiFilteredSearchMultiSelectComponent, selector: "si-filtered-search-multi-select", inputs: ["itemCountText", "scrollStrategy"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }] });
774
774
  }
775
775
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchValueComponent, decorators: [{
776
776
  type: Component,
@@ -784,7 +784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
784
784
  SiFilteredSearchTypeaheadComponent,
785
785
  SiFilteredSearchMultiSelectComponent,
786
786
  SiIconComponent
787
- ], template: "<div\n cdkMonitorSubtreeFocus\n class=\"criteria pill-group\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n [class.invalid-criterion]=\"invalidCriterion()\"\n (cdkFocusChange)=\"focusChange($event)\"\n>\n @if (type() !== 'free-text') {\n <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n {{ definition().label | translate }}\n </div>\n }\n @if (definition().operators?.length) {\n <div class=\"pill pill-interactive px-0 criterion-operator-section\">\n <!-- criterion operator input -->\n @if (active()) {\n <input\n #operatorInput\n type=\"text\"\n class=\"focus-inside operator-input py-0 border-0\"\n [siTypeahead]=\"definition().operators!\"\n [typeaheadScrollStrategy]=\"operatorScrollStrategy()\"\n [typeaheadProcess]=\"false\"\n [typeaheadAutoSelectIndex]=\"selectedOperatorIndex()\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"0\"\n [readOnly]=\"false\"\n [typeaheadScrollable]=\"true\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [attr.size]=\"longestOperatorLength()\"\n [ngModel]=\"value().operator\"\n (ngModelChange)=\"operatorUpdate($event)\"\n (keydown.backspace)=\"operatorBackspace()\"\n (keydown.enter)=\"operatorEnter()\"\n (typeaheadOnSelect)=\"operatorEnter()\"\n (blur)=\"operatorBlur()\"\n />\n } @else {\n <!-- criterion operator field -->\n <div\n class=\"criterion-operator-text px-2 focus-inside\"\n [tabindex]=\"!disabled() ? 0 : -1\"\n (keydown.enter)=\"edit('operator')\"\n (click)=\"edit('operator')\"\n >\n {{ value().operator }}\n </div>\n }\n </div>\n }\n @switch (type()) {\n @case ('free-text') {\n <si-filtered-search-free-text\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n (activeChange)=\"freeTextActiveChange($event)\"\n />\n }\n @case ('date') {\n <si-filtered-search-date-value\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [scrollStrategy]=\"datepickerScrollStrategy()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('multi-select') {\n <si-filtered-search-multi-select\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [scrollStrategy]=\"multiSelectScrollStrategy()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [itemCountText]=\"itemCountText()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('typeahead') {\n <si-filtered-search-typeahead\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [scrollStrategy]=\"typeaheadScrollStrategy()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n }\n <div class=\"pill px-0 ms-n1\">\n <button\n type=\"button\"\n class=\"btn btn-circle btn-sm btn-tertiary-ghost focus-inside\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n [disabled]=\"disabled()\"\n (click)=\"clear()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n</div>\n", styles: [".criteria{cursor:pointer;white-space:nowrap}.criteria.invalid-criterion{border-radius:.75rem;box-shadow:0 0 0 1px var(--si-sys-border-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--si-sys-border-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{padding-inline:var(--si-sys-sizing-spacing-x-20);inline-size:calc(1ch + 2 * var(--si-sys-sizing-spacing-x-20))}input{background:transparent}\n"] }]
787
+ ], template: "<div\n cdkMonitorSubtreeFocus\n class=\"criteria pill-group\"\n [class.disabled]=\"disabled()\"\n [attr.aria-disabled]=\"disabled()\"\n [class.invalid-criterion]=\"invalidCriterion()\"\n (cdkFocusChange)=\"focusChange($event)\"\n>\n @if (type() !== 'free-text') {\n <div class=\"pill pill-interactive criterion-label si-h5\" (click)=\"edit()\">\n {{ definition().label | translate }}\n </div>\n }\n @if (definition().operators?.length) {\n <div class=\"pill pill-interactive px-0 criterion-operator-section\">\n <!-- criterion operator input -->\n @if (active()) {\n <input\n #operatorInput\n type=\"text\"\n class=\"focus-inside operator-input py-0 border-0\"\n [siTypeahead]=\"definition().operators!\"\n [typeaheadScrollStrategy]=\"operatorScrollStrategy()\"\n [typeaheadProcess]=\"false\"\n [typeaheadAutoSelectIndex]=\"selectedOperatorIndex()\"\n [typeaheadMinLength]=\"0\"\n [typeaheadOptionsLimit]=\"0\"\n [readOnly]=\"false\"\n [typeaheadScrollable]=\"true\"\n [typeaheadOptionsInScrollableView]=\"optionsInScrollableView()\"\n [attr.aria-label]=\"searchLabel() | translate\"\n [attr.size]=\"longestOperatorLength()\"\n [ngModel]=\"value().operator\"\n (ngModelChange)=\"operatorUpdate($event)\"\n (keydown.backspace)=\"operatorBackspace()\"\n (keydown.enter)=\"operatorEnter()\"\n (typeaheadOnSelect)=\"operatorEnter()\"\n (blur)=\"operatorBlur()\"\n />\n } @else {\n <!-- criterion operator field -->\n <div\n class=\"criterion-operator-text px-2 focus-inside\"\n [tabindex]=\"!disabled() ? 0 : -1\"\n (keydown.enter)=\"edit('operator')\"\n (click)=\"edit('operator')\"\n >\n {{ value().operator }}\n </div>\n }\n </div>\n }\n @switch (type()) {\n @case ('free-text') {\n <si-filtered-search-free-text\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n (activeChange)=\"freeTextActiveChange($event)\"\n />\n }\n @case ('date') {\n <si-filtered-search-date-value\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [scrollStrategy]=\"datepickerScrollStrategy()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('multi-select') {\n <si-filtered-search-multi-select\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [scrollStrategy]=\"multiSelectScrollStrategy()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [itemCountText]=\"itemCountText()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n @case ('typeahead') {\n <si-filtered-search-typeahead\n [definition]=\"definition()\"\n [disabled]=\"disabled()\"\n [searchLabel]=\"searchLabel()\"\n [scrollStrategy]=\"typeaheadScrollStrategy()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [(active)]=\"active\"\n [(criterionValue)]=\"value\"\n (backspaceOverflow)=\"backspaceOverflow()\"\n (editValue)=\"edit('value')\"\n (submitValue)=\"submitCriterion.emit($event)\"\n />\n }\n }\n <div class=\"pill px-0 ms-n1\">\n <button\n type=\"button\"\n class=\"btn btn-circle btn-sm btn-tertiary-ghost focus-inside\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n [disabled]=\"disabled()\"\n (click)=\"clear()\"\n (mousedown)=\"$event.preventDefault()\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n</div>\n", styles: [".criteria{cursor:pointer;white-space:nowrap}.criteria.invalid-criterion{border-radius:.75rem;box-shadow:0 0 0 1px var(--si-sys-color-border-danger)}.criteria:not(.invalid-criterion) .invalid-criterion{box-shadow:inset 0 0 0 1px var(--si-sys-color-border-danger)}.criteria.disabled{cursor:inherit;pointer-events:none}.operator-input{padding-inline:var(--si-sys-sizing-spacing-x-20);inline-size:calc(1ch + 2 * var(--si-sys-sizing-spacing-x-20))}input{background:transparent}\n"] }]
788
788
  }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }, { type: i0.Output, args: ["valueChange"] }], definition: [{ type: i0.Input, args: [{ isSignal: true, alias: "definition", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: true }] }], onlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelectValue", required: true }] }], maxCriteriaOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteriaOptions", required: true }] }], optionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsInScrollableView", required: true }] }], clearButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonLabel", required: true }] }], lazyValueProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyValueProvider", required: false }] }], searchDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceTime", required: true }] }], itemCountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCountText", required: true }] }], disableSelectionByColonAndSemicolon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelectionByColonAndSemicolon", required: true }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: true }] }], invalidCriterion: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalidCriterion", required: true }] }], isStrictOrOnlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "isStrictOrOnlySelectValue", required: true }] }], editOnCreation: [{ type: i0.Input, args: [{ isSignal: true, alias: "editOnCreation", required: true }] }], scrollStrategyFactory: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategyFactory", required: true }] }], deleteCriterion: [{ type: i0.Output, args: ["deleteCriterion"] }], submitCriterion: [{ type: i0.Output, args: ["submitCriterion"] }], operatorInput: [{ type: i0.ViewChild, args: ['operatorInput', { isSignal: true }] }], valueInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFilteredSearchValueBase), { isSignal: true }] }] } });
789
789
 
790
790
  /**
@@ -1399,7 +1399,7 @@ class SiFilteredSearchComponent {
1399
1399
  this.emitChangeEvent();
1400
1400
  }
1401
1401
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1402
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilteredSearchComponent, isStandalone: true, selector: "si-filtered-search", inputs: { scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, doSearchOnInputChange: { classPropertyName: "doSearchOnInputChange", publicName: "doSearchOnInputChange", isSignal: true, isRequired: false, transformFunction: null }, lazyCriterionProvider: { classPropertyName: "lazyCriterionProvider", publicName: "lazyCriterionProvider", isSignal: true, isRequired: false, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, strictCriterion: { classPropertyName: "strictCriterion", publicName: "strictCriterion", isSignal: true, isRequired: false, transformFunction: null }, strictValue: { classPropertyName: "strictValue", publicName: "strictValue", isSignal: true, isRequired: false, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadingDebounceTime: { classPropertyName: "lazyLoadingDebounceTime", publicName: "lazyLoadingDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: false, transformFunction: null }, searchCriteria: { classPropertyName: "searchCriteria", publicName: "searchCriteria", isSignal: true, isRequired: false, transformFunction: null }, criteria: { classPropertyName: "criteria", publicName: "criteria", isSignal: true, isRequired: false, transformFunction: null }, exclusiveCriteria: { classPropertyName: "exclusiveCriteria", publicName: "exclusiveCriteria", isSignal: true, isRequired: false, transformFunction: null }, maxCriteria: { classPropertyName: "maxCriteria", publicName: "maxCriteria", isSignal: true, isRequired: false, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, clearButtonLabel: { classPropertyName: "clearButtonLabel", publicName: "clearButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, submitButtonLabel: { classPropertyName: "submitButtonLabel", publicName: "submitButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, disableFreeTextSearch: { classPropertyName: "disableFreeTextSearch", publicName: "disableFreeTextSearch", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: false, transformFunction: null }, freeTextCriterion: { classPropertyName: "freeTextCriterion", publicName: "freeTextCriterion", isSignal: true, isRequired: false, transformFunction: null }, searchForFreeTextLabel: { classPropertyName: "searchForFreeTextLabel", publicName: "searchForFreeTextLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { doSearch: "doSearch", searchCriteria: "searchCriteriaChange", interceptDisplayedCriteria: "interceptDisplayedCriteria" }, host: { properties: { "class.disabled": "disabled()", "class.dark-background": "colorVariant() === 'base-0'" } }, viewQueries: [{ propertyName: "freeTextInput", first: true, predicate: SiFilteredSearchInputComponent, descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "valueComponents", predicate: SiFilteredSearchValueComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #scrollContainer\n class=\"search-container d-flex align-items-center overflow-auto py-2 w-100 ps-2 pe-2\"\n>\n @for (criterion of values(); track criterion) {\n <si-filtered-search-value\n [editOnCreation]=\"autoEditCriteria\"\n [definition]=\"criterion.config\"\n [value]=\"criterion.value\"\n [invalidCriterion]=\"!validateCriterionLabel(criterion.config)\"\n [disabled]=\"disabled()\"\n [clearButtonLabel]=\"clearButtonLabel()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [itemCountText]=\"itemCountText()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [searchLabel]=\"searchLabel()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [scrollStrategyFactory]=\"scrollStrategy()\"\n (submitCriterion)=\"focusNext($index, $event)\"\n (deleteCriterion)=\"deleteCriterion($index, $event)\"\n (valueChange)=\"valueChange($event, criterion)\"\n />\n }\n <!-- criterion input -->\n <si-filtered-search-input\n [dataSource]=\"dataSource\"\n [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [searchLabel]=\"searchLabel()\"\n [freeTextCriterion]=\"!!freeTextCriterion()\"\n [maxCriteriaReached]=\"!!maxCriteria() && values().length >= maxCriteria()!\"\n [allowFreeText]=\"allowFreeTextCache()\"\n [searchForFreeTextLabel]=\"searchForFreeTextLabel()\"\n [scrollStrategyFactory]=\"scrollStrategy()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [(searchValue)]=\"searchValue\"\n (createCriterion)=\"onCreateCriterion($event)\"\n (createCriterionByName)=\"onCreateCriterionByName($event)\"\n (backspaceOverflow)=\"freeTextBackspace()\"\n (createFreeTextPill)=\"createFreeTextPill($event)\"\n (searchValueChange)=\"onSearchValueChange()\"\n (inputFocus)=\"freeTextFocus()\"\n (enterSubmit)=\"submit()\"\n />\n</div>\n<!-- clear all searchCriteria -->\n@if (values().length || searchValue().length) {\n <div class=\"clear-button-container\">\n <button\n type=\"button\"\n class=\"btn btn-icon btn-sm btn-tertiary-ghost mx-2\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n (click)=\"deleteAllCriteria($event)\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n}\n\n@if (!disabled()) {\n <button\n type=\"button\"\n class=\"search-button btn btn-icon btn-sm btn-secondary focus-inside\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"submitButtonLabel() | translate\"\n (click)=\"submit()\"\n >\n <si-icon [icon]=\"icons.elementSearch\" />\n </button>\n}\n", styles: [":host{--search-bar-icon-color: var(--si-sys-text-primary);--input-background-color: var(--si-sys-background-1);--input-background-hover-color: var(--si-sys-background-1);--filter-search-background-color: var(--si-sys-background-1);--filter-pill-background-color: var(--si-sys-background-2)}:host.dark-background{--input-background-color: var(--si-sys-background-2);--input-background-hover-color: var(--si-sys-background-hover);--filter-search-background-color: var(--si-sys-background-2);--filter-pill-background-color: var(--si-sys-background-1)}:host{display:flex;align-items:center;block-size:fit-content;line-height:var(--si-sys-sizing-spacing-y-80);min-inline-size:0}:host.disabled{color:var(--si-sys-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:var(--si-sys-sizing-spacing-y-20);background-color:var(--filter-search-background-color)}.search-button{align-self:stretch;background-color:var(--filter-search-background-color);border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;margin-block:0;margin-inline:1px 0;aspect-ratio:auto;block-size:auto;inline-size:auto;padding-inline:var(--si-sys-sizing-spacing-y-20)!important}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiFilteredSearchInputComponent, selector: "si-filtered-search-input", inputs: ["dataSource", "typeaheadOptionsLimit", "optionsInScrollableView", "disabled", "placeholder", "searchLabel", "scrollStrategyFactory", "searchValue", "freeTextCriterion", "maxCriteriaReached", "allowFreeText", "searchForFreeTextLabel", "disableSelectionByColonAndSemicolon", "onlySelectValue"], outputs: ["searchValueChange", "createCriterion", "createCriterionByName", "backspaceOverflow", "createFreeTextPill", "inputFocus", "enterSubmit"] }, { kind: "component", type: SiFilteredSearchValueComponent, selector: "si-filtered-search-value", inputs: ["value", "definition", "disabled", "onlySelectValue", "maxCriteriaOptions", "optionsInScrollableView", "clearButtonLabel", "lazyValueProvider", "searchDebounceTime", "itemCountText", "disableSelectionByColonAndSemicolon", "searchLabel", "invalidCriterion", "isStrictOrOnlySelectValue", "editOnCreation", "scrollStrategyFactory"], outputs: ["valueChange", "deleteCriterion", "submitCriterion"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1402
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SiFilteredSearchComponent, isStandalone: true, selector: "si-filtered-search", inputs: { scrollStrategy: { classPropertyName: "scrollStrategy", publicName: "scrollStrategy", isSignal: true, isRequired: false, transformFunction: null }, doSearchOnInputChange: { classPropertyName: "doSearchOnInputChange", publicName: "doSearchOnInputChange", isSignal: true, isRequired: false, transformFunction: null }, lazyCriterionProvider: { classPropertyName: "lazyCriterionProvider", publicName: "lazyCriterionProvider", isSignal: true, isRequired: false, transformFunction: null }, lazyValueProvider: { classPropertyName: "lazyValueProvider", publicName: "lazyValueProvider", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, strictCriterion: { classPropertyName: "strictCriterion", publicName: "strictCriterion", isSignal: true, isRequired: false, transformFunction: null }, strictValue: { classPropertyName: "strictValue", publicName: "strictValue", isSignal: true, isRequired: false, transformFunction: null }, onlySelectValue: { classPropertyName: "onlySelectValue", publicName: "onlySelectValue", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadingDebounceTime: { classPropertyName: "lazyLoadingDebounceTime", publicName: "lazyLoadingDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, searchDebounceTime: { classPropertyName: "searchDebounceTime", publicName: "searchDebounceTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, optionsInScrollableView: { classPropertyName: "optionsInScrollableView", publicName: "optionsInScrollableView", isSignal: true, isRequired: false, transformFunction: null }, searchCriteria: { classPropertyName: "searchCriteria", publicName: "searchCriteria", isSignal: true, isRequired: false, transformFunction: null }, criteria: { classPropertyName: "criteria", publicName: "criteria", isSignal: true, isRequired: false, transformFunction: null }, exclusiveCriteria: { classPropertyName: "exclusiveCriteria", publicName: "exclusiveCriteria", isSignal: true, isRequired: false, transformFunction: null }, maxCriteria: { classPropertyName: "maxCriteria", publicName: "maxCriteria", isSignal: true, isRequired: false, transformFunction: null }, maxCriteriaOptions: { classPropertyName: "maxCriteriaOptions", publicName: "maxCriteriaOptions", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, clearButtonLabel: { classPropertyName: "clearButtonLabel", publicName: "clearButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, submitButtonLabel: { classPropertyName: "submitButtonLabel", publicName: "submitButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, itemCountText: { classPropertyName: "itemCountText", publicName: "itemCountText", isSignal: true, isRequired: false, transformFunction: null }, colorVariant: { classPropertyName: "colorVariant", publicName: "colorVariant", isSignal: true, isRequired: false, transformFunction: null }, disableFreeTextSearch: { classPropertyName: "disableFreeTextSearch", publicName: "disableFreeTextSearch", isSignal: true, isRequired: false, transformFunction: null }, typeaheadOptionsLimit: { classPropertyName: "typeaheadOptionsLimit", publicName: "typeaheadOptionsLimit", isSignal: true, isRequired: false, transformFunction: null }, disableSelectionByColonAndSemicolon: { classPropertyName: "disableSelectionByColonAndSemicolon", publicName: "disableSelectionByColonAndSemicolon", isSignal: true, isRequired: false, transformFunction: null }, freeTextCriterion: { classPropertyName: "freeTextCriterion", publicName: "freeTextCriterion", isSignal: true, isRequired: false, transformFunction: null }, searchForFreeTextLabel: { classPropertyName: "searchForFreeTextLabel", publicName: "searchForFreeTextLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { doSearch: "doSearch", searchCriteria: "searchCriteriaChange", interceptDisplayedCriteria: "interceptDisplayedCriteria" }, host: { properties: { "class.disabled": "disabled()", "class.dark-background": "colorVariant() === 'base-0'" } }, viewQueries: [{ propertyName: "freeTextInput", first: true, predicate: SiFilteredSearchInputComponent, descendants: true, isSignal: true }, { propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "valueComponents", predicate: SiFilteredSearchValueComponent, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div\n #scrollContainer\n class=\"search-container d-flex align-items-center overflow-auto py-2 w-100 ps-2 pe-2\"\n>\n @for (criterion of values(); track criterion) {\n <si-filtered-search-value\n [editOnCreation]=\"autoEditCriteria\"\n [definition]=\"criterion.config\"\n [value]=\"criterion.value\"\n [invalidCriterion]=\"!validateCriterionLabel(criterion.config)\"\n [disabled]=\"disabled()\"\n [clearButtonLabel]=\"clearButtonLabel()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [itemCountText]=\"itemCountText()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [searchLabel]=\"searchLabel()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [scrollStrategyFactory]=\"scrollStrategy()\"\n (submitCriterion)=\"focusNext($index, $event)\"\n (deleteCriterion)=\"deleteCriterion($index, $event)\"\n (valueChange)=\"valueChange($event, criterion)\"\n />\n }\n <!-- criterion input -->\n <si-filtered-search-input\n [dataSource]=\"dataSource\"\n [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [searchLabel]=\"searchLabel()\"\n [freeTextCriterion]=\"!!freeTextCriterion()\"\n [maxCriteriaReached]=\"!!maxCriteria() && values().length >= maxCriteria()!\"\n [allowFreeText]=\"allowFreeTextCache()\"\n [searchForFreeTextLabel]=\"searchForFreeTextLabel()\"\n [scrollStrategyFactory]=\"scrollStrategy()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [(searchValue)]=\"searchValue\"\n (createCriterion)=\"onCreateCriterion($event)\"\n (createCriterionByName)=\"onCreateCriterionByName($event)\"\n (backspaceOverflow)=\"freeTextBackspace()\"\n (createFreeTextPill)=\"createFreeTextPill($event)\"\n (searchValueChange)=\"onSearchValueChange()\"\n (inputFocus)=\"freeTextFocus()\"\n (enterSubmit)=\"submit()\"\n />\n</div>\n<!-- clear all searchCriteria -->\n@if (values().length || searchValue().length) {\n <div class=\"clear-button-container\">\n <button\n type=\"button\"\n class=\"btn btn-icon btn-sm btn-tertiary-ghost mx-2\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n (click)=\"deleteAllCriteria($event)\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n}\n\n@if (!disabled()) {\n <button\n type=\"button\"\n class=\"search-button btn btn-icon btn-sm btn-secondary focus-inside\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"submitButtonLabel() | translate\"\n (click)=\"submit()\"\n >\n <si-icon [icon]=\"icons.elementSearch\" />\n </button>\n}\n", styles: [":host{--search-bar-icon-color: var(--si-sys-color-text-primary);--input-background-color: var(--si-sys-color-background-1);--input-background-hover-color: var(--si-sys-color-background-1);--filter-search-background-color: var(--si-sys-color-background-1);--filter-pill-background-color: var(--si-sys-color-background-2)}:host.dark-background{--input-background-color: var(--si-sys-color-background-2);--input-background-hover-color: var(--si-sys-color-background-hover);--filter-search-background-color: var(--si-sys-color-background-2);--filter-pill-background-color: var(--si-sys-color-background-1)}:host{display:flex;align-items:center;block-size:fit-content;line-height:var(--si-sys-sizing-spacing-y-80);min-inline-size:0}:host.disabled{color:var(--si-sys-color-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:var(--si-sys-sizing-spacing-y-20);background-color:var(--filter-search-background-color)}.search-button{align-self:stretch;background-color:var(--filter-search-background-color);border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;margin-block:0;margin-inline:1px 0;aspect-ratio:auto;block-size:auto;inline-size:auto;padding-inline:var(--si-sys-sizing-spacing-y-20)!important}\n"], dependencies: [{ kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "component", type: SiFilteredSearchInputComponent, selector: "si-filtered-search-input", inputs: ["dataSource", "typeaheadOptionsLimit", "optionsInScrollableView", "disabled", "placeholder", "searchLabel", "scrollStrategyFactory", "searchValue", "freeTextCriterion", "maxCriteriaReached", "allowFreeText", "searchForFreeTextLabel", "disableSelectionByColonAndSemicolon", "onlySelectValue"], outputs: ["searchValueChange", "createCriterion", "createCriterionByName", "backspaceOverflow", "createFreeTextPill", "inputFocus", "enterSubmit"] }, { kind: "component", type: SiFilteredSearchValueComponent, selector: "si-filtered-search-value", inputs: ["value", "definition", "disabled", "onlySelectValue", "maxCriteriaOptions", "optionsInScrollableView", "clearButtonLabel", "lazyValueProvider", "searchDebounceTime", "itemCountText", "disableSelectionByColonAndSemicolon", "searchLabel", "invalidCriterion", "isStrictOrOnlySelectValue", "editOnCreation", "scrollStrategyFactory"], outputs: ["valueChange", "deleteCriterion", "submitCriterion"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
1403
1403
  }
1404
1404
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SiFilteredSearchComponent, decorators: [{
1405
1405
  type: Component,
@@ -1411,7 +1411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
1411
1411
  ], changeDetection: ChangeDetectionStrategy.Eager, host: {
1412
1412
  '[class.disabled]': 'disabled()',
1413
1413
  '[class.dark-background]': "colorVariant() === 'base-0'"
1414
- }, template: "<div\n #scrollContainer\n class=\"search-container d-flex align-items-center overflow-auto py-2 w-100 ps-2 pe-2\"\n>\n @for (criterion of values(); track criterion) {\n <si-filtered-search-value\n [editOnCreation]=\"autoEditCriteria\"\n [definition]=\"criterion.config\"\n [value]=\"criterion.value\"\n [invalidCriterion]=\"!validateCriterionLabel(criterion.config)\"\n [disabled]=\"disabled()\"\n [clearButtonLabel]=\"clearButtonLabel()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [itemCountText]=\"itemCountText()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [searchLabel]=\"searchLabel()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [scrollStrategyFactory]=\"scrollStrategy()\"\n (submitCriterion)=\"focusNext($index, $event)\"\n (deleteCriterion)=\"deleteCriterion($index, $event)\"\n (valueChange)=\"valueChange($event, criterion)\"\n />\n }\n <!-- criterion input -->\n <si-filtered-search-input\n [dataSource]=\"dataSource\"\n [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [searchLabel]=\"searchLabel()\"\n [freeTextCriterion]=\"!!freeTextCriterion()\"\n [maxCriteriaReached]=\"!!maxCriteria() && values().length >= maxCriteria()!\"\n [allowFreeText]=\"allowFreeTextCache()\"\n [searchForFreeTextLabel]=\"searchForFreeTextLabel()\"\n [scrollStrategyFactory]=\"scrollStrategy()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [(searchValue)]=\"searchValue\"\n (createCriterion)=\"onCreateCriterion($event)\"\n (createCriterionByName)=\"onCreateCriterionByName($event)\"\n (backspaceOverflow)=\"freeTextBackspace()\"\n (createFreeTextPill)=\"createFreeTextPill($event)\"\n (searchValueChange)=\"onSearchValueChange()\"\n (inputFocus)=\"freeTextFocus()\"\n (enterSubmit)=\"submit()\"\n />\n</div>\n<!-- clear all searchCriteria -->\n@if (values().length || searchValue().length) {\n <div class=\"clear-button-container\">\n <button\n type=\"button\"\n class=\"btn btn-icon btn-sm btn-tertiary-ghost mx-2\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n (click)=\"deleteAllCriteria($event)\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n}\n\n@if (!disabled()) {\n <button\n type=\"button\"\n class=\"search-button btn btn-icon btn-sm btn-secondary focus-inside\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"submitButtonLabel() | translate\"\n (click)=\"submit()\"\n >\n <si-icon [icon]=\"icons.elementSearch\" />\n </button>\n}\n", styles: [":host{--search-bar-icon-color: var(--si-sys-text-primary);--input-background-color: var(--si-sys-background-1);--input-background-hover-color: var(--si-sys-background-1);--filter-search-background-color: var(--si-sys-background-1);--filter-pill-background-color: var(--si-sys-background-2)}:host.dark-background{--input-background-color: var(--si-sys-background-2);--input-background-hover-color: var(--si-sys-background-hover);--filter-search-background-color: var(--si-sys-background-2);--filter-pill-background-color: var(--si-sys-background-1)}:host{display:flex;align-items:center;block-size:fit-content;line-height:var(--si-sys-sizing-spacing-y-80);min-inline-size:0}:host.disabled{color:var(--si-sys-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:var(--si-sys-sizing-spacing-y-20);background-color:var(--filter-search-background-color)}.search-button{align-self:stretch;background-color:var(--filter-search-background-color);border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;margin-block:0;margin-inline:1px 0;aspect-ratio:auto;block-size:auto;inline-size:auto;padding-inline:var(--si-sys-sizing-spacing-y-20)!important}\n"] }]
1414
+ }, template: "<div\n #scrollContainer\n class=\"search-container d-flex align-items-center overflow-auto py-2 w-100 ps-2 pe-2\"\n>\n @for (criterion of values(); track criterion) {\n <si-filtered-search-value\n [editOnCreation]=\"autoEditCriteria\"\n [definition]=\"criterion.config\"\n [value]=\"criterion.value\"\n [invalidCriterion]=\"!validateCriterionLabel(criterion.config)\"\n [disabled]=\"disabled()\"\n [clearButtonLabel]=\"clearButtonLabel()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [isStrictOrOnlySelectValue]=\"isStrictOrOnlySelectValue()\"\n [itemCountText]=\"itemCountText()\"\n [lazyValueProvider]=\"lazyValueProvider()\"\n [maxCriteriaOptions]=\"maxCriteriaOptions()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [searchLabel]=\"searchLabel()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [searchDebounceTime]=\"searchDebounceTime()\"\n [scrollStrategyFactory]=\"scrollStrategy()\"\n (submitCriterion)=\"focusNext($index, $event)\"\n (deleteCriterion)=\"deleteCriterion($index, $event)\"\n (valueChange)=\"valueChange($event, criterion)\"\n />\n }\n <!-- criterion input -->\n <si-filtered-search-input\n [dataSource]=\"dataSource\"\n [typeaheadOptionsLimit]=\"typeaheadOptionsLimit()\"\n [optionsInScrollableView]=\"optionsInScrollableView()\"\n [disabled]=\"disabled()\"\n [placeholder]=\"placeholder()\"\n [searchLabel]=\"searchLabel()\"\n [freeTextCriterion]=\"!!freeTextCriterion()\"\n [maxCriteriaReached]=\"!!maxCriteria() && values().length >= maxCriteria()!\"\n [allowFreeText]=\"allowFreeTextCache()\"\n [searchForFreeTextLabel]=\"searchForFreeTextLabel()\"\n [scrollStrategyFactory]=\"scrollStrategy()\"\n [disableSelectionByColonAndSemicolon]=\"disableSelectionByColonAndSemicolon()\"\n [onlySelectValue]=\"onlySelectValue()\"\n [(searchValue)]=\"searchValue\"\n (createCriterion)=\"onCreateCriterion($event)\"\n (createCriterionByName)=\"onCreateCriterionByName($event)\"\n (backspaceOverflow)=\"freeTextBackspace()\"\n (createFreeTextPill)=\"createFreeTextPill($event)\"\n (searchValueChange)=\"onSearchValueChange()\"\n (inputFocus)=\"freeTextFocus()\"\n (enterSubmit)=\"submit()\"\n />\n</div>\n<!-- clear all searchCriteria -->\n@if (values().length || searchValue().length) {\n <div class=\"clear-button-container\">\n <button\n type=\"button\"\n class=\"btn btn-icon btn-sm btn-tertiary-ghost mx-2\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"clearButtonLabel() | translate\"\n (click)=\"deleteAllCriteria($event)\"\n >\n <si-icon [icon]=\"icons.elementCancel\" />\n </button>\n </div>\n}\n\n@if (!disabled()) {\n <button\n type=\"button\"\n class=\"search-button btn btn-icon btn-sm btn-secondary focus-inside\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"submitButtonLabel() | translate\"\n (click)=\"submit()\"\n >\n <si-icon [icon]=\"icons.elementSearch\" />\n </button>\n}\n", styles: [":host{--search-bar-icon-color: var(--si-sys-color-text-primary);--input-background-color: var(--si-sys-color-background-1);--input-background-hover-color: var(--si-sys-color-background-1);--filter-search-background-color: var(--si-sys-color-background-1);--filter-pill-background-color: var(--si-sys-color-background-2)}:host.dark-background{--input-background-color: var(--si-sys-color-background-2);--input-background-hover-color: var(--si-sys-color-background-hover);--filter-search-background-color: var(--si-sys-color-background-2);--filter-pill-background-color: var(--si-sys-color-background-1)}:host{display:flex;align-items:center;block-size:fit-content;line-height:var(--si-sys-sizing-spacing-y-80);min-inline-size:0}:host.disabled{color:var(--si-sys-color-text-disabled)}.search-container{border-start-start-radius:4px;border-end-start-radius:4px;background-color:var(--filter-search-background-color);gap:var(--si-sys-sizing-spacing-y-20) var(--si-sys-sizing-spacing-x-20)}.clear-button-container{display:flex;align-items:flex-start;align-self:stretch;padding-block:var(--si-sys-sizing-spacing-y-20);background-color:var(--filter-search-background-color)}.search-button{align-self:stretch;background-color:var(--filter-search-background-color);border:0;border-radius:0;border-end-end-radius:4px;border-start-end-radius:4px;margin-block:0;margin-inline:1px 0;aspect-ratio:auto;block-size:auto;inline-size:auto;padding-inline:var(--si-sys-sizing-spacing-y-20)!important}\n"] }]
1415
1415
  }], ctorParameters: () => [], propDecorators: { scrollStrategy: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollStrategy", required: false }] }], doSearch: [{ type: i0.Output, args: ["doSearch"] }], doSearchOnInputChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "doSearchOnInputChange", required: false }] }], lazyCriterionProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyCriterionProvider", required: false }] }], lazyValueProvider: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyValueProvider", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], strictCriterion: [{ type: i0.Input, args: [{ isSignal: true, alias: "strictCriterion", required: false }] }], strictValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "strictValue", required: false }] }], onlySelectValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "onlySelectValue", required: false }] }], lazyLoadingDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoadingDebounceTime", required: false }] }], searchDebounceTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchDebounceTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], optionsInScrollableView: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsInScrollableView", required: false }] }], searchCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchCriteria", required: false }] }, { type: i0.Output, args: ["searchCriteriaChange"] }], criteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "criteria", required: false }] }], exclusiveCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "exclusiveCriteria", required: false }] }], maxCriteria: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteria", required: false }] }], maxCriteriaOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCriteriaOptions", required: false }] }], searchLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchLabel", required: false }] }], clearButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearButtonLabel", required: false }] }], submitButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitButtonLabel", required: false }] }], itemCountText: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemCountText", required: false }] }], colorVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "colorVariant", required: false }] }], disableFreeTextSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFreeTextSearch", required: false }] }], typeaheadOptionsLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "typeaheadOptionsLimit", required: false }] }], disableSelectionByColonAndSemicolon: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableSelectionByColonAndSemicolon", required: false }] }], freeTextCriterion: [{ type: i0.Input, args: [{ isSignal: true, alias: "freeTextCriterion", required: false }] }], searchForFreeTextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchForFreeTextLabel", required: false }] }], interceptDisplayedCriteria: [{ type: i0.Output, args: ["interceptDisplayedCriteria"] }], freeTextInput: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SiFilteredSearchInputComponent), { isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ['scrollContainer', { ...{ read: ElementRef }, isSignal: true }] }], valueComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => SiFilteredSearchValueComponent), { isSignal: true }] }] } });
1416
1416
 
1417
1417
  /**