@tedi-design-system/angular 8.2.0-rc.7 → 9.0.0-rc.2

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 (9) hide show
  1. package/community/text-editor/index.d.ts +2 -0
  2. package/community/text-editor/index.d.ts.map +1 -1
  3. package/fesm2022/tedi-design-system-angular-community-text-editor.mjs +2 -0
  4. package/fesm2022/tedi-design-system-angular-community-text-editor.mjs.map +1 -1
  5. package/fesm2022/tedi-design-system-angular-tedi.mjs +150 -43
  6. package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/tedi/index.d.ts +79 -10
  9. package/tedi/index.d.ts.map +1 -1
package/fesm2022/tedi-design-system-angular-tedi.mjs CHANGED
@@ -8892,9 +8892,9 @@ class SelectComponent {
8892
8892
  size = input("default", ...(ngDevMode ? [{ debugName: "size" }] : []));
8893
8893
  /**
8894
8894
  * Whether to show a clear button when a value is selected.
8895
- * @default false
8895
+ * @default true
8896
8896
  */
8897
- clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
8897
+ clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
8898
8898
  /**
8899
8899
  * Show the clear button only while the filled select is hovered or focused.
8900
8900
  * Requires `clearable`.
@@ -8937,6 +8937,10 @@ class SelectComponent {
8937
8937
  * Selected value, for use without a form directive. An array in multi-select
8938
8938
  * mode, the bare value otherwise. Unlike `[ngModel]` it applies on the first
8939
8939
  * render rather than a frame later. Do not combine with a form directive.
8940
+ *
8941
+ * `null`, `undefined` and `''` all mean nothing is selected, so
8942
+ * `new FormControl('')` and `new FormControl(null)` both start the select empty,
8943
+ * showing its placeholder.
8940
8944
  */
8941
8945
  value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : []));
8942
8946
  /**
@@ -9289,7 +9293,7 @@ class SelectComponent {
9289
9293
  const options = this.searchTerm().trim()
9290
9294
  ? this.filteredOptions()
9291
9295
  : this.normalizedOptions();
9292
- const enabledOptions = options.filter((o) => !o.disabled);
9296
+ const enabledOptions = this.bulkSelectable(options);
9293
9297
  if (enabledOptions.length === 0)
9294
9298
  return false;
9295
9299
  if (this.usesDefaultCompare()) {
@@ -9304,7 +9308,7 @@ class SelectComponent {
9304
9308
  const options = this.searchTerm().trim()
9305
9309
  ? this.filteredOptions()
9306
9310
  : this.normalizedOptions();
9307
- const enabledOptions = options.filter((o) => !o.disabled);
9311
+ const enabledOptions = this.bulkSelectable(options);
9308
9312
  if (enabledOptions.length === 0)
9309
9313
  return false;
9310
9314
  let selectedCount;
@@ -9754,9 +9758,9 @@ class SelectComponent {
9754
9758
  const compareWith = this.compareWith();
9755
9759
  const selected = this.selectedValues();
9756
9760
  const isSelected = selected.some((v) => compareWith(v, value));
9757
- const newSelection = isSelected
9761
+ const newSelection = this.toSelection(isSelected
9758
9762
  ? selected.filter((v) => !compareWith(v, value))
9759
- : [...selected, value];
9763
+ : [...selected, value], true);
9760
9764
  this.selectedValues.set(newSelection);
9761
9765
  this.onChange(newSelection);
9762
9766
  this.selectionChange.emit(newSelection);
@@ -9766,8 +9770,9 @@ class SelectComponent {
9766
9770
  this.searchInputRef()?.nativeElement.focus();
9767
9771
  this.onTouched();
9768
9772
  }
9773
+ /** Selects `value` in single-select mode, notifies the form and closes the dropdown. */
9769
9774
  selectSingleValue(value) {
9770
- this.selectedValues.set([value]);
9775
+ this.selectedValues.set(this.toSelection(value, false));
9771
9776
  this.onChange(value);
9772
9777
  this.selectionChange.emit(value);
9773
9778
  if (this.clearSearchOnSelect())
@@ -9853,6 +9858,10 @@ class SelectComponent {
9853
9858
  this.scrollListener = undefined;
9854
9859
  }
9855
9860
  }
9861
+ /**
9862
+ * Handles a selection change from the listbox: the select-all and group rows, or
9863
+ * the new selection, which is emitted and written to the form.
9864
+ */
9856
9865
  handleValueChange(event) {
9857
9866
  const values = event.value;
9858
9867
  const selectAllIndex = values.findIndex((v) => v === SpecialOptionControls.SELECT_ALL);
@@ -9880,6 +9889,7 @@ class SelectComponent {
9880
9889
  else {
9881
9890
  newSelection = [...values];
9882
9891
  }
9892
+ newSelection = this.toSelection(newSelection, true);
9883
9893
  this.selectedValues.set(newSelection);
9884
9894
  this.onChange(newSelection);
9885
9895
  this.selectionChange.emit(newSelection);
@@ -9892,7 +9902,7 @@ class SelectComponent {
9892
9902
  }
9893
9903
  else {
9894
9904
  const selected = values[0] ?? null;
9895
- this.selectedValues.set(selected != null ? [selected] : []);
9905
+ this.selectedValues.set(this.toSelection(selected, false));
9896
9906
  this.onChange(selected);
9897
9907
  this.selectionChange.emit(selected);
9898
9908
  if (this.clearSearchOnSelect()) {
@@ -9986,7 +9996,7 @@ class SelectComponent {
9986
9996
  const group = this.optionGroups().find((g) => g.label === groupLabel);
9987
9997
  if (!group)
9988
9998
  return false;
9989
- const enabledGroupOptions = group.options.filter((o) => !o.disabled);
9999
+ const enabledGroupOptions = this.bulkSelectable(group.options);
9990
10000
  if (enabledGroupOptions.length === 0)
9991
10001
  return false;
9992
10002
  const compareWith = this.compareWith();
@@ -9997,7 +10007,7 @@ class SelectComponent {
9997
10007
  const group = this.optionGroups().find((g) => g.label === groupLabel);
9998
10008
  if (!group)
9999
10009
  return false;
10000
- const enabledGroupOptions = group.options.filter((o) => !o.disabled);
10010
+ const enabledGroupOptions = this.bulkSelectable(group.options);
10001
10011
  if (enabledGroupOptions.length === 0)
10002
10012
  return false;
10003
10013
  const compareWith = this.compareWith();
@@ -10066,7 +10076,7 @@ class SelectComponent {
10066
10076
  const options = isSearching
10067
10077
  ? this.filteredOptions()
10068
10078
  : this.normalizedOptions();
10069
- const enabledOptions = options.filter((o) => !o.disabled);
10079
+ const enabledOptions = this.bulkSelectable(options);
10070
10080
  const deselecting = this.allOptionsSelected();
10071
10081
  let newSelection;
10072
10082
  if (this.usesDefaultCompare()) {
@@ -10110,7 +10120,7 @@ class SelectComponent {
10110
10120
  const group = this.optionGroups().find((g) => g.label === groupLabel);
10111
10121
  if (!group)
10112
10122
  return;
10113
- const enabledGroupOptions = group.options.filter((o) => !o.disabled);
10123
+ const enabledGroupOptions = this.bulkSelectable(group.options);
10114
10124
  const groupValues = enabledGroupOptions.map((o) => o.value);
10115
10125
  const isGroupSelected = this.isGroupSelected(groupLabel);
10116
10126
  const compareWith = this.compareWith();
@@ -10132,11 +10142,20 @@ class SelectComponent {
10132
10142
  }
10133
10143
  onChange = () => { };
10134
10144
  onTouched = () => { };
10145
+ /** Options that can take part in select-all and group selection: enabled, not `''`. */
10146
+ bulkSelectable(options) {
10147
+ return options.filter((o) => !o.disabled && o.value !== "");
10148
+ }
10149
+ /**
10150
+ * `null`, `undefined` and `''` all mean nothing is selected, since `''` is a common
10151
+ * form default for "no value" (`new FormControl('')`). Picking an option whose
10152
+ * value is `''` therefore leaves nothing selected too.
10153
+ */
10135
10154
  toSelection(value, allowMultiple) {
10136
10155
  if (allowMultiple) {
10137
- return Array.isArray(value) ? value : [];
10156
+ return Array.isArray(value) ? value.filter((v) => v !== "") : [];
10138
10157
  }
10139
- return value != null ? [value] : [];
10158
+ return value != null && value !== "" ? [value] : [];
10140
10159
  }
10141
10160
  writeValue(value) {
10142
10161
  this.selectedValues.set(this.toSelection(value, this.allowMultiple()));
@@ -11230,14 +11249,14 @@ class PaginationComponent {
11230
11249
  });
11231
11250
  }
11232
11251
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PaginationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11233
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PaginationComponent, isStandalone: true, selector: "tedi-pagination", inputs: { pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, dividerPosition: { classPropertyName: "dividerPosition", publicName: "dividerPosition", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, hideResults: { classPropertyName: "hideResults", publicName: "hideResults", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, hidePager: { classPropertyName: "hidePager", publicName: "hidePager", isSignal: true, isRequired: false, transformFunction: null }, hideArrows: { classPropertyName: "hideArrows", publicName: "hideArrows", isSignal: true, isRequired: false, transformFunction: null }, disableArrowsAtBoundary: { classPropertyName: "disableArrowsAtBoundary", publicName: "disableArrowsAtBoundary", isSignal: true, isRequired: false, transformFunction: null }, arrowVariant: { classPropertyName: "arrowVariant", publicName: "arrowVariant", isSignal: true, isRequired: false, transformFunction: null }, showArrowLabels: { classPropertyName: "showArrowLabels", publicName: "showArrowLabels", isSignal: true, isRequired: false, transformFunction: null }, previousIcon: { classPropertyName: "previousIcon", publicName: "previousIcon", isSignal: true, isRequired: false, transformFunction: null }, nextIcon: { classPropertyName: "nextIcon", publicName: "nextIcon", isSignal: true, isRequired: false, transformFunction: null }, showModalTitle: { classPropertyName: "showModalTitle", publicName: "showModalTitle", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "data-name": "tedi-pagination" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "customResults", first: true, predicate: TediPaginationResultsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n class=\"tedi-pagination__status\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n @if (showResults()) {\n @if (customResults()) {\n <ng-content select=\"[tediPaginationResults]\" />\n } @else {\n <span class=\"tedi-pagination__results\">\n {{ mergedLabels().results(totalItems()!) }}\n </span>\n }\n }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n @if (showPager()) {\n <nav\n class=\"tedi-pagination__nav\"\n [attr.aria-label]=\"mergedLabels().ariaLabel\"\n >\n @if (showPrevious()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().previous\n \"\n [disabled]=\"previousItem().disabled\"\n (click)=\"handlePageChange(previousItem().page)\"\n >\n <tedi-icon [name]=\"previousIcon()\" />\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().previous }}</span>\n }\n </button>\n }\n\n @if (!useCompactPicker()) {\n <ul class=\"tedi-pagination__list\">\n @for (item of pageItems(); track $index) {\n @if (item.type === \"ellipsis\") {\n <li\n class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </li>\n } @else {\n <li class=\"tedi-pagination__item\">\n <button\n type=\"button\"\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--selected]=\"item.selected\"\n [attr.aria-label]=\"\n item.selected\n ? mergedLabels().currentPageAriaLabel(item.page!)\n : mergedLabels().pageAriaLabel(item.page!)\n \"\n [attr.aria-current]=\"item.selected ? 'page' : null\"\n (click)=\"handlePageChange(item.page)\"\n >\n {{ item.page }}\n </button>\n </li>\n }\n }\n </ul>\n }\n @if (useCompactPicker()) {\n <button\n type=\"button\"\n class=\"tedi-pagination__mobile-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isMobileModalOpen()\"\n [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n (click)=\"openMobilePicker()\"\n >\n <span\n class=\"tedi-pagination__mobile-trigger-label\"\n aria-hidden=\"true\"\n >\n <strong>{{ currentPage() }}</strong>\n <span>/</span>\n <span>{{ pageCount() }}</span>\n </span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n }\n\n @if (showNext()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().next\n \"\n [disabled]=\"nextItem().disabled\"\n (click)=\"handlePageChange(nextItem().page)\"\n >\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().next }}</span>\n }\n <tedi-icon [name]=\"nextIcon()\" />\n </button>\n }\n </nav>\n }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n @if (showPageSizeSelect()) {\n <div class=\"tedi-pagination__page-size\">\n @if (useCompactPicker()) {\n <span class=\"tedi-pagination__page-size-label\">\n {{ mergedLabels().pageSize }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-pagination__page-size-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n (click)=\"openPageSizePicker()\"\n >\n <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n } @else {\n <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n {{ mergedLabels().pageSize }}\n </span>\n <tedi-select\n class=\"tedi-pagination__page-size-select\"\n [inputId]=\"pageSizeInputId\"\n [ariaLabelledby]=\"pageSizeLabelId\"\n size=\"small\"\n [options]=\"pageSizeSelectOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n dropdownAlign=\"end\"\n [value]=\"pageSize()\"\n (selectionChange)=\"handlePageSizeChange($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SelectComponent, selector: "tedi-select", inputs: ["inputId", "name", "label", "tooltip", "ariaLabelledby", "ariaLabel", "required", "placeholder", "state", "size", "clearable", "showClearOnInteraction", "dropdownWidthRef", "dropdownAlign", "feedbackText", "options", "bindLabel", "bindValue", "value", "allowMultiple", "groupBy", "showSelectAll", "selectableGroups", "isTagRemovable", "multiRow", "tagEllipsis", "ellipsis", "compareWith", "disabledKey", "noOptionsMessage", "maxDropdownHeight", "hideOnScroll", "dropdownType", "virtualScroll", "virtualItemSize", "searchable", "searchFn", "clearSearchOnSelect"], outputs: ["selectionChange", "searchChange", "opened", "closed", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
11252
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PaginationComponent, isStandalone: true, selector: "tedi-pagination", inputs: { pageCount: { classPropertyName: "pageCount", publicName: "pageCount", isSignal: true, isRequired: true, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null }, totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, boundaryCount: { classPropertyName: "boundaryCount", publicName: "boundaryCount", isSignal: true, isRequired: false, transformFunction: null }, siblingCount: { classPropertyName: "siblingCount", publicName: "siblingCount", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, background: { classPropertyName: "background", publicName: "background", isSignal: true, isRequired: false, transformFunction: null }, dividerPosition: { classPropertyName: "dividerPosition", publicName: "dividerPosition", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, hideResults: { classPropertyName: "hideResults", publicName: "hideResults", isSignal: true, isRequired: false, transformFunction: null }, hidePageSize: { classPropertyName: "hidePageSize", publicName: "hidePageSize", isSignal: true, isRequired: false, transformFunction: null }, hidePager: { classPropertyName: "hidePager", publicName: "hidePager", isSignal: true, isRequired: false, transformFunction: null }, hideArrows: { classPropertyName: "hideArrows", publicName: "hideArrows", isSignal: true, isRequired: false, transformFunction: null }, disableArrowsAtBoundary: { classPropertyName: "disableArrowsAtBoundary", publicName: "disableArrowsAtBoundary", isSignal: true, isRequired: false, transformFunction: null }, arrowVariant: { classPropertyName: "arrowVariant", publicName: "arrowVariant", isSignal: true, isRequired: false, transformFunction: null }, showArrowLabels: { classPropertyName: "showArrowLabels", publicName: "showArrowLabels", isSignal: true, isRequired: false, transformFunction: null }, previousIcon: { classPropertyName: "previousIcon", publicName: "previousIcon", isSignal: true, isRequired: false, transformFunction: null }, nextIcon: { classPropertyName: "nextIcon", publicName: "nextIcon", isSignal: true, isRequired: false, transformFunction: null }, showModalTitle: { classPropertyName: "showModalTitle", publicName: "showModalTitle", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange", pageSize: "pageSizeChange" }, host: { attributes: { "data-name": "tedi-pagination" }, properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "customResults", first: true, predicate: TediPaginationResultsDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<span\n class=\"tedi-pagination__status\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n @if (showResults()) {\n @if (customResults()) {\n <ng-content select=\"[tediPaginationResults]\" />\n } @else {\n <span class=\"tedi-pagination__results\">\n {{ mergedLabels().results(totalItems()!) }}\n </span>\n }\n }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n @if (showPager()) {\n <nav\n class=\"tedi-pagination__nav\"\n [attr.aria-label]=\"mergedLabels().ariaLabel\"\n >\n @if (showPrevious()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().previous\n \"\n [disabled]=\"previousItem().disabled\"\n (click)=\"handlePageChange(previousItem().page)\"\n >\n <tedi-icon [name]=\"previousIcon()\" />\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().previous }}</span>\n }\n </button>\n }\n\n @if (!useCompactPicker()) {\n <ul class=\"tedi-pagination__list\">\n @for (item of pageItems(); track $index) {\n @if (item.type === \"ellipsis\") {\n <li\n class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </li>\n } @else {\n <li class=\"tedi-pagination__item\">\n <button\n type=\"button\"\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--selected]=\"item.selected\"\n [attr.aria-label]=\"\n item.selected\n ? mergedLabels().currentPageAriaLabel(item.page!)\n : mergedLabels().pageAriaLabel(item.page!)\n \"\n [attr.aria-current]=\"item.selected ? 'page' : null\"\n (click)=\"handlePageChange(item.page)\"\n >\n {{ item.page }}\n </button>\n </li>\n }\n }\n </ul>\n }\n @if (useCompactPicker()) {\n <button\n type=\"button\"\n class=\"tedi-pagination__mobile-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isMobileModalOpen()\"\n [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n (click)=\"openMobilePicker()\"\n >\n <span\n class=\"tedi-pagination__mobile-trigger-label\"\n aria-hidden=\"true\"\n >\n <strong>{{ currentPage() }}</strong>\n <span>/</span>\n <span>{{ pageCount() }}</span>\n </span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n }\n\n @if (showNext()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().next\n \"\n [disabled]=\"nextItem().disabled\"\n (click)=\"handlePageChange(nextItem().page)\"\n >\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().next }}</span>\n }\n <tedi-icon [name]=\"nextIcon()\" />\n </button>\n }\n </nav>\n }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n @if (showPageSizeSelect()) {\n <div class=\"tedi-pagination__page-size\">\n @if (useCompactPicker()) {\n <span class=\"tedi-pagination__page-size-label\">\n {{ mergedLabels().pageSize }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-pagination__page-size-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n (click)=\"openPageSizePicker()\"\n >\n <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n } @else {\n <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n {{ mergedLabels().pageSize }}\n </span>\n <tedi-select\n class=\"tedi-pagination__page-size-select\"\n [inputId]=\"pageSizeInputId\"\n [ariaLabelledby]=\"pageSizeLabelId\"\n size=\"small\"\n [clearable]=\"false\"\n [options]=\"pageSizeSelectOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n dropdownAlign=\"end\"\n [value]=\"pageSize()\"\n (selectionChange)=\"handlePageSizeChange($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SelectComponent, selector: "tedi-select", inputs: ["inputId", "name", "label", "tooltip", "ariaLabelledby", "ariaLabel", "required", "placeholder", "state", "size", "clearable", "showClearOnInteraction", "dropdownWidthRef", "dropdownAlign", "feedbackText", "options", "bindLabel", "bindValue", "value", "allowMultiple", "groupBy", "showSelectAll", "selectableGroups", "isTagRemovable", "multiRow", "tagEllipsis", "ellipsis", "compareWith", "disabledKey", "noOptionsMessage", "maxDropdownHeight", "hideOnScroll", "dropdownType", "virtualScroll", "virtualItemSize", "searchable", "searchFn", "clearSearchOnSelect"], outputs: ["selectionChange", "searchChange", "opened", "closed", "cleared"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
11234
11253
  }
11235
11254
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PaginationComponent, decorators: [{
11236
11255
  type: Component,
11237
11256
  args: [{ selector: "tedi-pagination", standalone: true, imports: [ButtonComponent, IconComponent, SelectComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
11238
11257
  "[class]": "hostClasses()",
11239
11258
  "data-name": "tedi-pagination",
11240
- }, template: "<span\n class=\"tedi-pagination__status\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n @if (showResults()) {\n @if (customResults()) {\n <ng-content select=\"[tediPaginationResults]\" />\n } @else {\n <span class=\"tedi-pagination__results\">\n {{ mergedLabels().results(totalItems()!) }}\n </span>\n }\n }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n @if (showPager()) {\n <nav\n class=\"tedi-pagination__nav\"\n [attr.aria-label]=\"mergedLabels().ariaLabel\"\n >\n @if (showPrevious()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().previous\n \"\n [disabled]=\"previousItem().disabled\"\n (click)=\"handlePageChange(previousItem().page)\"\n >\n <tedi-icon [name]=\"previousIcon()\" />\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().previous }}</span>\n }\n </button>\n }\n\n @if (!useCompactPicker()) {\n <ul class=\"tedi-pagination__list\">\n @for (item of pageItems(); track $index) {\n @if (item.type === \"ellipsis\") {\n <li\n class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </li>\n } @else {\n <li class=\"tedi-pagination__item\">\n <button\n type=\"button\"\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--selected]=\"item.selected\"\n [attr.aria-label]=\"\n item.selected\n ? mergedLabels().currentPageAriaLabel(item.page!)\n : mergedLabels().pageAriaLabel(item.page!)\n \"\n [attr.aria-current]=\"item.selected ? 'page' : null\"\n (click)=\"handlePageChange(item.page)\"\n >\n {{ item.page }}\n </button>\n </li>\n }\n }\n </ul>\n }\n @if (useCompactPicker()) {\n <button\n type=\"button\"\n class=\"tedi-pagination__mobile-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isMobileModalOpen()\"\n [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n (click)=\"openMobilePicker()\"\n >\n <span\n class=\"tedi-pagination__mobile-trigger-label\"\n aria-hidden=\"true\"\n >\n <strong>{{ currentPage() }}</strong>\n <span>/</span>\n <span>{{ pageCount() }}</span>\n </span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n }\n\n @if (showNext()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().next\n \"\n [disabled]=\"nextItem().disabled\"\n (click)=\"handlePageChange(nextItem().page)\"\n >\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().next }}</span>\n }\n <tedi-icon [name]=\"nextIcon()\" />\n </button>\n }\n </nav>\n }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n @if (showPageSizeSelect()) {\n <div class=\"tedi-pagination__page-size\">\n @if (useCompactPicker()) {\n <span class=\"tedi-pagination__page-size-label\">\n {{ mergedLabels().pageSize }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-pagination__page-size-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n (click)=\"openPageSizePicker()\"\n >\n <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n } @else {\n <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n {{ mergedLabels().pageSize }}\n </span>\n <tedi-select\n class=\"tedi-pagination__page-size-select\"\n [inputId]=\"pageSizeInputId\"\n [ariaLabelledby]=\"pageSizeLabelId\"\n size=\"small\"\n [options]=\"pageSizeSelectOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n dropdownAlign=\"end\"\n [value]=\"pageSize()\"\n (selectionChange)=\"handlePageSizeChange($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"] }]
11259
+ }, template: "<span\n class=\"tedi-pagination__status\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ statusText() }}\n</span>\n\n<div class=\"tedi-pagination__slot-start\">\n @if (showResults()) {\n @if (customResults()) {\n <ng-content select=\"[tediPaginationResults]\" />\n } @else {\n <span class=\"tedi-pagination__results\">\n {{ mergedLabels().results(totalItems()!) }}\n </span>\n }\n }\n</div>\n\n<div class=\"tedi-pagination__slot-center\">\n @if (showPager()) {\n <nav\n class=\"tedi-pagination__nav\"\n [attr.aria-label]=\"mergedLabels().ariaLabel\"\n >\n @if (showPrevious()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--previous\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().previous\n \"\n [disabled]=\"previousItem().disabled\"\n (click)=\"handlePageChange(previousItem().page)\"\n >\n <tedi-icon [name]=\"previousIcon()\" />\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().previous }}</span>\n }\n </button>\n }\n\n @if (!useCompactPicker()) {\n <ul class=\"tedi-pagination__list\">\n @for (item of pageItems(); track $index) {\n @if (item.type === \"ellipsis\") {\n <li\n class=\"tedi-pagination__item tedi-pagination__item--ellipsis\"\n aria-hidden=\"true\"\n >\n \u2026\n </li>\n } @else {\n <li class=\"tedi-pagination__item\">\n <button\n type=\"button\"\n class=\"tedi-pagination__page\"\n [class.tedi-pagination__page--selected]=\"item.selected\"\n [attr.aria-label]=\"\n item.selected\n ? mergedLabels().currentPageAriaLabel(item.page!)\n : mergedLabels().pageAriaLabel(item.page!)\n \"\n [attr.aria-current]=\"item.selected ? 'page' : null\"\n (click)=\"handlePageChange(item.page)\"\n >\n {{ item.page }}\n </button>\n </li>\n }\n }\n </ul>\n }\n @if (useCompactPicker()) {\n <button\n type=\"button\"\n class=\"tedi-pagination__mobile-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isMobileModalOpen()\"\n [attr.aria-label]=\"mobileTriggerAriaLabel()\"\n (click)=\"openMobilePicker()\"\n >\n <span\n class=\"tedi-pagination__mobile-trigger-label\"\n aria-hidden=\"true\"\n >\n <strong>{{ currentPage() }}</strong>\n <span>/</span>\n <span>{{ pageCount() }}</span>\n </span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n }\n\n @if (showNext()) {\n <button\n tedi-button\n type=\"button\"\n size=\"small\"\n [variant]=\"resolvedArrowVariant()\"\n class=\"tedi-pagination__nav-button tedi-pagination__nav-button--next\"\n [attr.aria-label]=\"\n resolvedShowArrowLabels() ? null : mergedLabels().next\n \"\n [disabled]=\"nextItem().disabled\"\n (click)=\"handlePageChange(nextItem().page)\"\n >\n @if (resolvedShowArrowLabels()) {\n <span>{{ mergedLabels().next }}</span>\n }\n <tedi-icon [name]=\"nextIcon()\" />\n </button>\n }\n </nav>\n }\n</div>\n\n<div class=\"tedi-pagination__slot-end\">\n @if (showPageSizeSelect()) {\n <div class=\"tedi-pagination__page-size\">\n @if (useCompactPicker()) {\n <span class=\"tedi-pagination__page-size-label\">\n {{ mergedLabels().pageSize }}\n </span>\n <button\n type=\"button\"\n class=\"tedi-pagination__page-size-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-expanded]=\"isPageSizeModalOpen()\"\n [attr.aria-label]=\"mobilePageSizeAriaLabel()\"\n (click)=\"openPageSizePicker()\"\n >\n <span aria-hidden=\"true\">{{ selectedPageSizeLabel() }}</span>\n <tedi-icon name=\"arrow_drop_down\" />\n </button>\n } @else {\n <span class=\"tedi-pagination__page-size-label\" [id]=\"pageSizeLabelId\">\n {{ mergedLabels().pageSize }}\n </span>\n <tedi-select\n class=\"tedi-pagination__page-size-select\"\n [inputId]=\"pageSizeInputId\"\n [ariaLabelledby]=\"pageSizeLabelId\"\n size=\"small\"\n [clearable]=\"false\"\n [options]=\"pageSizeSelectOptions()\"\n bindLabel=\"label\"\n bindValue=\"value\"\n dropdownAlign=\"end\"\n [value]=\"pageSize()\"\n (selectionChange)=\"handlePageSizeChange($event)\"\n />\n }\n </div>\n }\n</div>\n", styles: [".tedi-pagination{display:flex;flex-flow:row wrap;gap:var(--layout-grid-gutters-16);align-items:center;justify-content:center;width:100%;padding:var(--pagination-padding-y) var(--pagination-padding-x)}@media(max-width:35.98rem){.tedi-pagination{flex-direction:column;gap:var(--layout-grid-gutters-08)}}.tedi-pagination--align-left .tedi-pagination__slot-start,.tedi-pagination--align-left .tedi-pagination__slot-end,.tedi-pagination--align-right .tedi-pagination__slot-start,.tedi-pagination--align-right .tedi-pagination__slot-end{flex:0 0 auto;justify-content:flex-start}.tedi-pagination--align-left{justify-content:flex-start}@media(max-width:35.98rem){.tedi-pagination--align-left{align-items:flex-start}}.tedi-pagination--align-right{justify-content:flex-end}@media(max-width:35.98rem){.tedi-pagination--align-right{align-items:flex-end}}.tedi-pagination--bg-white{background:var(--general-surface-primary)}.tedi-pagination--bg-transparent{background:transparent}.tedi-pagination--divider-top:not(.tedi-pagination--bg-transparent){border-top:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--divider-bottom:not(.tedi-pagination--bg-transparent){border-bottom:var(--tedi-borders-01) solid var(--general-border-secondary)}.tedi-pagination--no-pager .tedi-pagination__slot-center,.tedi-pagination--align-left.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-left.tedi-pagination--no-page-size .tedi-pagination__slot-end,.tedi-pagination--align-right.tedi-pagination--no-results .tedi-pagination__slot-start,.tedi-pagination--align-right.tedi-pagination--no-page-size .tedi-pagination__slot-end{display:none}.tedi-pagination__status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}.tedi-pagination__slot-start{display:inline-flex;flex:1 1 0;align-items:center;justify-content:flex-start}.tedi-pagination__slot-center{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center}@media(max-width:35.98rem){.tedi-pagination__slot-center{align-self:stretch}}.tedi-pagination__slot-end{display:flex;flex:1 1 0;align-items:center;justify-content:flex-end}.tedi-pagination__results{flex:0 0 auto;font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap}@media(max-width:47.98rem){.tedi-pagination__results{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__nav{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:center}@media(max-width:47.98rem){.tedi-pagination__nav{display:grid;grid-template-columns:var(--button-sm-icon-size) auto var(--button-sm-icon-size)}}@media(max-width:35.98rem){.tedi-pagination__nav{grid-template-columns:1fr auto 1fr;width:100%}}@media(max-width:47.98rem){.tedi-pagination--arrow-labels .tedi-pagination__nav{display:flex}}.tedi-pagination__list{display:flex;flex-wrap:nowrap;gap:var(--layout-grid-gutters-08);align-items:center;padding:0;margin:0;list-style:none}.tedi-pagination__item{display:inline-flex;align-items:center;justify-content:center}.tedi-pagination__item--ellipsis{width:var(--pagination-button-size);height:var(--pagination-button-size);font-family:var(--family-default);font-size:var(--body-small-regular-size);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);-webkit-user-select:none;user-select:none}.tedi-pagination__page{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:var(--pagination-button-size);height:var(--pagination-button-size);padding:0 var(--layout-grid-gutters-04);font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);cursor:pointer;background:transparent;border:none;border-radius:var(--button-radius-default)}.tedi-pagination__page:before{position:absolute;inset:-4px;content:\"\"}.tedi-pagination__page:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-pagination__page:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-pagination__page:focus-visible{color:var(--button-main-neutral-text-focus);outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__page--selected{color:var(--general-text-white);cursor:default;background:var(--general-surface-brand-secondary)}.tedi-pagination__page--selected:hover,.tedi-pagination__page--selected:active,.tedi-pagination__page--selected:focus-visible{color:var(--general-text-white);background:var(--general-surface-brand-secondary)}@media(max-width:47.98rem){.tedi-pagination__nav-button--previous{grid-column:1;justify-self:end}}@media(max-width:47.98rem){.tedi-pagination__nav-button--next{grid-column:3;justify-self:start}}.tedi-pagination__mobile-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-self:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}@media(max-width:47.98rem){.tedi-pagination__mobile-trigger{grid-column:2}}.tedi-pagination__mobile-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-pagination__mobile-trigger-label{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center;font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}.tedi-pagination__mobile-trigger-label strong{font-weight:var(--body-bold-weight);color:var(--general-text-brand)}.tedi-pagination__page-size{display:flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:flex-end;min-width:0}@media(max-width:35.98rem){.tedi-pagination__page-size{flex-direction:column;gap:var(--layout-grid-gutters-04);align-items:center;justify-content:center}}@media(max-width:35.98rem){.tedi-pagination--align-left .tedi-pagination__page-size{align-items:flex-start}}@media(max-width:35.98rem){.tedi-pagination--align-right .tedi-pagination__page-size{align-items:flex-end}}.tedi-pagination__page-size-label{font-family:var(--family-default);font-size:var(--body-small-regular-size);font-weight:var(--body-small-regular-weight);line-height:var(--body-small-regular-line-height);color:var(--general-text-secondary);white-space:nowrap;cursor:default}@media(max-width:47.98rem){.tedi-pagination__page-size-label{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height)}}.tedi-pagination__page-size-select.tedi-select{width:auto;min-width:96px}.tedi-pagination__page-size-trigger{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--form-field-height-sm);padding:var(--form-field-padding-y-sm) var(--form-field-padding-x-md-default);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);cursor:pointer;background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-pagination__page-size-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}\n"] }]
11241
11260
  }], ctorParameters: () => [], propDecorators: { pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: true }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }], totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], boundaryCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "boundaryCount", required: false }] }], siblingCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "siblingCount", required: false }] }], labels: [{ type: i0.Input, args: [{ isSignal: true, alias: "labels", required: false }] }], background: [{ type: i0.Input, args: [{ isSignal: true, alias: "background", required: false }] }], dividerPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "dividerPosition", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], hideResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideResults", required: false }] }], hidePageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePageSize", required: false }] }], hidePager: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidePager", required: false }] }], hideArrows: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideArrows", required: false }] }], disableArrowsAtBoundary: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableArrowsAtBoundary", required: false }] }], arrowVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowVariant", required: false }] }], showArrowLabels: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrowLabels", required: false }] }], previousIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousIcon", required: false }] }], nextIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextIcon", required: false }] }], showModalTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showModalTitle", required: false }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }], customResults: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TediPaginationResultsDirective), { isSignal: true }] }] } });
11242
11261
 
11243
11262
  class TediTableHeaderButtonComponent {
@@ -11615,6 +11634,26 @@ class TextFieldComponent {
11615
11634
  alias: "disabled",
11616
11635
  transform: booleanAttribute,
11617
11636
  }]));
11637
+ // Native `readonly`, under both the attribute (`readonly`) and the property
11638
+ // (`[readOnly]`) spelling, so a wrapping `tedi-form-field` can hide its clear
11639
+ // button while the value cannot be edited.
11640
+ readOnlyAttribute = input(false, ...(ngDevMode ? [{ debugName: "readOnlyAttribute",
11641
+ // eslint-disable-next-line @angular-eslint/no-input-rename
11642
+ alias: "readonly",
11643
+ transform: booleanAttribute }] : [{
11644
+ // eslint-disable-next-line @angular-eslint/no-input-rename
11645
+ alias: "readonly",
11646
+ transform: booleanAttribute,
11647
+ }]));
11648
+ readOnlyProperty = input(false, ...(ngDevMode ? [{ debugName: "readOnlyProperty",
11649
+ // eslint-disable-next-line @angular-eslint/no-input-rename
11650
+ alias: "readOnly",
11651
+ transform: booleanAttribute }] : [{
11652
+ // eslint-disable-next-line @angular-eslint/no-input-rename
11653
+ alias: "readOnly",
11654
+ transform: booleanAttribute,
11655
+ }]));
11656
+ readOnly = computed(() => this.readOnlyAttribute() || this.readOnlyProperty(), ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
11618
11657
  disabled = computed(() => this.disabledInput() ||
11619
11658
  this.formDisabled() ||
11620
11659
  (this.fieldContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
@@ -11683,7 +11722,7 @@ class TextFieldComponent {
11683
11722
  this.onTouched();
11684
11723
  }
11685
11724
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
11686
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextFieldComponent, isStandalone: true, selector: "input[tedi-text-field]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, arrowsHidden: { classPropertyName: "arrowsHidden", publicName: "arrowsHidden", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", clear: "clear" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-text-field--small": "resolvedSize() === 'small'", "class.tedi-text-field--large": "resolvedSize() === 'large'", "class.tedi-text-field--arrows-hidden": "arrowsHidden()", "attr.aria-invalid": "invalid() || null", "attr.aria-describedby": "describedBy.attribute()", "disabled": "disabled()" }, classAttribute: "tedi-text-field" }, providers: [
11725
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextFieldComponent, isStandalone: true, selector: "input[tedi-text-field]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, arrowsHidden: { classPropertyName: "arrowsHidden", publicName: "arrowsHidden", isSignal: true, isRequired: false, transformFunction: null }, disabledInput: { classPropertyName: "disabledInput", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnlyAttribute: { classPropertyName: "readOnlyAttribute", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readOnlyProperty: { classPropertyName: "readOnlyProperty", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", clear: "clear" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-text-field--small": "resolvedSize() === 'small'", "class.tedi-text-field--large": "resolvedSize() === 'large'", "class.tedi-text-field--arrows-hidden": "arrowsHidden()", "attr.aria-invalid": "invalid() || null", "attr.aria-describedby": "describedBy.attribute()", "disabled": "disabled()", "readOnly": "readOnly()" }, classAttribute: "tedi-text-field" }, providers: [
11687
11726
  {
11688
11727
  provide: NG_VALUE_ACCESSOR,
11689
11728
  useExisting: forwardRef(() => TextFieldComponent),
@@ -11717,10 +11756,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
11717
11756
  "[attr.aria-invalid]": "invalid() || null",
11718
11757
  "[attr.aria-describedby]": "describedBy.attribute()",
11719
11758
  "[disabled]": "disabled()",
11759
+ "[readOnly]": "readOnly()",
11720
11760
  "(input)": "handleInputChange($event)",
11721
11761
  "(blur)": "handleBlur()",
11722
11762
  }, styles: [".tedi-text-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-text-field:not(.tedi-field-surface){flex:1;min-width:0;height:100%;padding-inline-start:1px;margin-inline-start:-1px}.tedi-text-field::placeholder{color:var(--form-input-text-placeholder)}.tedi-text-field:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-text-field--arrows-hidden::-webkit-outer-spin-button,.tedi-text-field--arrows-hidden::-webkit-inner-spin-button{appearance:none}.tedi-text-field--arrows-hidden[type=number]{appearance:textfield}.tedi-text-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-visible{--_field-ring-color: var(--_field-border-color)}.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover{--_field-border-color: var(--form-input-border-hover)}.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active{--_field-border-color: var(--form-input-border-active)}.tedi-text-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-visible{--_field-border-color: var(--form-input-border-focus)}.tedi-text-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-text-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-text-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}\n"] }]
11723
- }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], arrowsHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowsHidden", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
11763
+ }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], arrowsHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowsHidden", required: false }] }], clear: [{ type: i0.Output, args: ["clear"] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readOnlyAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], readOnlyProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
11724
11764
 
11725
11765
  class SeparatorComponent {
11726
11766
  /**
@@ -11835,10 +11875,12 @@ class FormFieldComponent {
11835
11875
  */
11836
11876
  icon = input(...(ngDevMode ? [undefined, { debugName: "icon" }] : []));
11837
11877
  /**
11838
- * Whether the field shows a clear button once the control holds a value.
11839
- * @default false
11878
+ * Whether the field shows a clear button once the control holds a value. The
11879
+ * single source of truth for every control inside it — date and time fields
11880
+ * read it too instead of declaring their own input. A textarea never gets one.
11881
+ * @default true
11840
11882
  */
11841
- clearable = input(false, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
11883
+ clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
11842
11884
  /**
11843
11885
  * Show the clear button only while the filled field is hovered or focused.
11844
11886
  * Requires `clearable`.
@@ -11873,7 +11915,19 @@ class FormFieldComponent {
11873
11915
  * they need a row that carries the surface. Without them the control paints
11874
11916
  * itself and no box is rendered at all.
11875
11917
  */
11876
- hasBox = computed(() => !!this.icon() || this.clearable(), ...(ngDevMode ? [{ debugName: "hasBox" }] : []));
11918
+ hasBox = computed(() => !!this.icon() || this.renderClearButton(), ...(ngDevMode ? [{ debugName: "hasBox" }] : []));
11919
+ /**
11920
+ * Whether the field renders its own clear button. Controls that render one
11921
+ * themselves opt out, so `clearable` drives them without producing two, and
11922
+ * a control that cannot be reset, or never takes one, gets none.
11923
+ */
11924
+ renderClearButton = computed(() => {
11925
+ const control = this.control();
11926
+ return (this.clearable() &&
11927
+ !control?.ownsClearButton &&
11928
+ control?.clearButton !== false &&
11929
+ !!control?.reset);
11930
+ }, ...(ngDevMode ? [{ debugName: "renderClearButton" }] : []));
11877
11931
  ownsSurface = computed(() => this.hasBox(), ...(ngDevMode ? [{ debugName: "ownsSurface" }] : []));
11878
11932
  disabled = computed(() => this.inputGroup?.disabled() ?? false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
11879
11933
  invalid = computed(() => this.feedback()?.type() === "error" ||
@@ -11931,7 +11985,9 @@ class FormFieldComponent {
11931
11985
  return 24;
11932
11986
  return 18;
11933
11987
  }, ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
11934
- showClearButton = computed(() => this.clearable() && !!this.control()?.value(), ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
11988
+ showClearButton = computed(() => this.renderClearButton() &&
11989
+ !!this.control()?.value() &&
11990
+ !this.control()?.readOnly?.(), ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
11935
11991
  clear() {
11936
11992
  this.control()?.reset?.();
11937
11993
  }
@@ -11966,7 +12022,7 @@ class FormFieldComponent {
11966
12022
  provide: TEDI_FIELD_CONTEXT,
11967
12023
  useExisting: forwardRef(() => FormFieldComponent),
11968
12024
  },
11969
- ], queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label], tedi-label-row\"></ng-content>\n\n<ng-template #controlSlot>\n <ng-content></ng-content>\n</ng-template>\n\n@if (hasBox()) {\n <div [ngClass]=\"boxClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n\n @if (clearable()) {\n <div\n class=\"tedi-form-field__buttons\"\n [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n [attr.aria-hidden]=\"!showClearButton() || null\"\n >\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [tabIndex]=\"showClearButton() ? 0 : -1\"\n [disabled]=\"isDisabled() || !showClearButton()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? iconSize()\"\n [color]=\"icon.color ?? 'inherit'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n </div>\n} @else {\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n}\n\n@if (feedback() || characterLimit() != null) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n\n @if (characterLimit() != null) {\n <span\n class=\"tedi-form-field__character-count\"\n [class.tedi-form-field__character-count--error]=\"\n characterCountExceeded()\n \"\n [id]=\"characterCountId()\"\n aria-live=\"polite\"\n >\n {{ characterCount() }}/{{ characterLimit() }}\n </span>\n }\n </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n <ng-content select=\"[tediFormFieldExtra]\"></ng-content>\n</div>\n", styles: [".tedi-form-field{--_icon-size: 1.125rem;display:flex;flex-direction:column}.tedi-form-field--small{--_icon-size: 1rem}.tedi-form-field--large{--_icon-size: 1.5rem}.tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):active,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-form-field__box:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-form-field__box{--tedi-form-field-addon-lane: 0rem;position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%}.tedi-form-field__box:has(.tedi-form-field__icon){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--_icon-size) )}.tedi-form-field__box:has(.tedi-form-field__buttons){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--form-field-button-height-sm) )}.tedi-form-field__box:has(.tedi-form-field__buttons):has(.tedi-form-field__icon){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--form-field-button-height-sm) + var(--layout-grid-gutters-04) + var(--tedi-borders-01) + var(--form-field-inner-spacing) + var(--_icon-size) )}.tedi-form-field--small .tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden,.tedi-form-field--clear-on-interaction .tedi-form-field__buttons{visibility:hidden}.tedi-form-field--clear-on-interaction .tedi-form-field__box:hover .tedi-form-field__buttons,.tedi-form-field--clear-on-interaction .tedi-form-field__box:active .tedi-form-field__buttons,.tedi-form-field--clear-on-interaction .tedi-form-field__box:focus-within .tedi-form-field__buttons{visibility:visible}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{display:flex;gap:var(--layout-grid-gutters-16);align-items:flex-start;margin-top:var(--form-field-outer-spacing)}.tedi-form-field__character-count{margin-left:auto;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);white-space:nowrap}.tedi-form-field__character-count--error{color:var(--form-general-feedback-error-text)}.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
12025
+ ], queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label], tedi-label-row\"></ng-content>\n\n<ng-template #controlSlot>\n <ng-content></ng-content>\n</ng-template>\n\n@if (hasBox()) {\n <div [ngClass]=\"boxClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n\n @if (renderClearButton()) {\n <div\n class=\"tedi-form-field__buttons\"\n [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n [attr.aria-hidden]=\"!showClearButton() || null\"\n >\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [tabIndex]=\"showClearButton() ? 0 : -1\"\n [disabled]=\"isDisabled() || !showClearButton()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? iconSize()\"\n [color]=\"icon.color ?? 'inherit'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n </div>\n} @else {\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n}\n\n@if (feedback() || characterLimit() != null) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n\n @if (characterLimit() != null) {\n <span\n class=\"tedi-form-field__character-count\"\n [class.tedi-form-field__character-count--error]=\"\n characterCountExceeded()\n \"\n [id]=\"characterCountId()\"\n aria-live=\"polite\"\n >\n {{ characterCount() }}/{{ characterLimit() }}\n </span>\n }\n </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n <ng-content select=\"[tediFormFieldExtra]\"></ng-content>\n</div>\n", styles: [".tedi-form-field{--_icon-size: 1.125rem;display:flex;flex-direction:column}.tedi-form-field--small{--_icon-size: 1rem}.tedi-form-field--large{--_icon-size: 1.5rem}.tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):active,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-form-field__box:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-form-field__box{--tedi-form-field-addon-lane: 0rem;position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%}.tedi-form-field__box:has(.tedi-form-field__icon){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--_icon-size) )}.tedi-form-field__box:has(.tedi-form-field__buttons){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--form-field-button-height-sm) )}.tedi-form-field__box:has(.tedi-form-field__buttons):has(.tedi-form-field__icon){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--form-field-button-height-sm) + var(--layout-grid-gutters-04) + var(--tedi-borders-01) + var(--form-field-inner-spacing) + var(--_icon-size) )}.tedi-form-field--small .tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden,.tedi-form-field--clear-on-interaction .tedi-form-field__buttons{visibility:hidden}.tedi-form-field--clear-on-interaction .tedi-form-field__box:hover .tedi-form-field__buttons,.tedi-form-field--clear-on-interaction .tedi-form-field__box:active .tedi-form-field__buttons,.tedi-form-field--clear-on-interaction .tedi-form-field__box:focus-within .tedi-form-field__buttons{visibility:visible}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{display:flex;gap:var(--layout-grid-gutters-16);align-items:flex-start;margin-top:var(--form-field-outer-spacing)}.tedi-form-field__character-count{margin-left:auto;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);white-space:nowrap}.tedi-form-field__character-count--error{color:var(--form-general-feedback-error-text)}.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
11970
12026
  }
11971
12027
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, decorators: [{
11972
12028
  type: Component,
@@ -11984,7 +12040,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
11984
12040
  },
11985
12041
  ], host: {
11986
12042
  "[class]": "hostClasses()",
11987
- }, template: "<ng-content select=\"label[tedi-label], tedi-label-row\"></ng-content>\n\n<ng-template #controlSlot>\n <ng-content></ng-content>\n</ng-template>\n\n@if (hasBox()) {\n <div [ngClass]=\"boxClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n\n @if (clearable()) {\n <div\n class=\"tedi-form-field__buttons\"\n [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n [attr.aria-hidden]=\"!showClearButton() || null\"\n >\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [tabIndex]=\"showClearButton() ? 0 : -1\"\n [disabled]=\"isDisabled() || !showClearButton()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? iconSize()\"\n [color]=\"icon.color ?? 'inherit'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n </div>\n} @else {\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n}\n\n@if (feedback() || characterLimit() != null) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n\n @if (characterLimit() != null) {\n <span\n class=\"tedi-form-field__character-count\"\n [class.tedi-form-field__character-count--error]=\"\n characterCountExceeded()\n \"\n [id]=\"characterCountId()\"\n aria-live=\"polite\"\n >\n {{ characterCount() }}/{{ characterLimit() }}\n </span>\n }\n </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n <ng-content select=\"[tediFormFieldExtra]\"></ng-content>\n</div>\n", styles: [".tedi-form-field{--_icon-size: 1.125rem;display:flex;flex-direction:column}.tedi-form-field--small{--_icon-size: 1rem}.tedi-form-field--large{--_icon-size: 1.5rem}.tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):active,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-form-field__box:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-form-field__box{--tedi-form-field-addon-lane: 0rem;position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%}.tedi-form-field__box:has(.tedi-form-field__icon){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--_icon-size) )}.tedi-form-field__box:has(.tedi-form-field__buttons){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--form-field-button-height-sm) )}.tedi-form-field__box:has(.tedi-form-field__buttons):has(.tedi-form-field__icon){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--form-field-button-height-sm) + var(--layout-grid-gutters-04) + var(--tedi-borders-01) + var(--form-field-inner-spacing) + var(--_icon-size) )}.tedi-form-field--small .tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden,.tedi-form-field--clear-on-interaction .tedi-form-field__buttons{visibility:hidden}.tedi-form-field--clear-on-interaction .tedi-form-field__box:hover .tedi-form-field__buttons,.tedi-form-field--clear-on-interaction .tedi-form-field__box:active .tedi-form-field__buttons,.tedi-form-field--clear-on-interaction .tedi-form-field__box:focus-within .tedi-form-field__buttons{visibility:visible}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{display:flex;gap:var(--layout-grid-gutters-16);align-items:flex-start;margin-top:var(--form-field-outer-spacing)}.tedi-form-field__character-count{margin-left:auto;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);white-space:nowrap}.tedi-form-field__character-count--error{color:var(--form-general-feedback-error-text)}.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}\n"] }]
12043
+ }, template: "<ng-content select=\"label[tedi-label], tedi-label-row\"></ng-content>\n\n<ng-template #controlSlot>\n <ng-content></ng-content>\n</ng-template>\n\n@if (hasBox()) {\n <div [ngClass]=\"boxClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n\n @if (renderClearButton()) {\n <div\n class=\"tedi-form-field__buttons\"\n [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n [attr.aria-hidden]=\"!showClearButton() || null\"\n >\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [tabIndex]=\"showClearButton() ? 0 : -1\"\n [disabled]=\"isDisabled() || !showClearButton()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"icon.size ?? iconSize()\"\n [color]=\"icon.color ?? 'inherit'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n </div>\n} @else {\n <ng-container [ngTemplateOutlet]=\"controlSlot\"></ng-container>\n}\n\n@if (feedback() || characterLimit() != null) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n\n @if (characterLimit() != null) {\n <span\n class=\"tedi-form-field__character-count\"\n [class.tedi-form-field__character-count--error]=\"\n characterCountExceeded()\n \"\n [id]=\"characterCountId()\"\n aria-live=\"polite\"\n >\n {{ characterCount() }}/{{ characterLimit() }}\n </span>\n }\n </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n <ng-content select=\"[tediFormFieldExtra]\"></ng-content>\n</div>\n", styles: [".tedi-form-field{--_icon-size: 1.125rem;display:flex;flex-direction:column}.tedi-form-field--small{--_icon-size: 1rem}.tedi-form-field--large{--_icon-size: 1.5rem}.tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):active,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-form-field__box:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-form-field__box:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-form-field__box{--tedi-form-field-addon-lane: 0rem;position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%}.tedi-form-field__box:has(.tedi-form-field__icon){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--_icon-size) )}.tedi-form-field__box:has(.tedi-form-field__buttons){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--form-field-button-height-sm) )}.tedi-form-field__box:has(.tedi-form-field__buttons):has(.tedi-form-field__icon){--tedi-form-field-addon-lane: calc( var(--form-field-inner-spacing) + var(--form-field-button-height-sm) + var(--layout-grid-gutters-04) + var(--tedi-borders-01) + var(--form-field-inner-spacing) + var(--_icon-size) )}.tedi-form-field--small .tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__box{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden,.tedi-form-field--clear-on-interaction .tedi-form-field__buttons{visibility:hidden}.tedi-form-field--clear-on-interaction .tedi-form-field__box:hover .tedi-form-field__buttons,.tedi-form-field--clear-on-interaction .tedi-form-field__box:active .tedi-form-field__buttons,.tedi-form-field--clear-on-interaction .tedi-form-field__box:focus-within .tedi-form-field__buttons{visibility:visible}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{display:flex;gap:var(--layout-grid-gutters-16);align-items:flex-start;margin-top:var(--form-field-outer-spacing)}.tedi-form-field__character-count{margin-left:auto;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);white-space:nowrap}.tedi-form-field__character-count--error{color:var(--form-general-feedback-error-text)}.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}\n"] }]
11988
12044
  }], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], showClearOnInteraction: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClearOnInteraction", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], characterLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterLimit", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TEDI_FORM_FIELD_CONTROL), { ...{
11989
12045
  descendants: true,
11990
12046
  }, isSignal: true }] }], feedback: [{ type: i0.ContentChild, args: [i0.forwardRef(() => FeedbackTextComponent), { ...{
@@ -14609,7 +14665,7 @@ class TediTableComponent {
14609
14665
  useFactory: (component) => component.contextValue,
14610
14666
  deps: [TediTableComponent],
14611
14667
  },
14612
- ], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
14668
+ ], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }, { propertyName: "tableElement", first: true, predicate: ["tableElement"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n (clear)=\"handleColumnFilter(column, '')\"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "align", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle", "xs", "sm", "md", "lg", "xl", "xxl"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
14613
14669
  }
14614
14670
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, decorators: [{
14615
14671
  type: Component,
@@ -14643,7 +14699,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
14643
14699
  useFactory: (component) => component.contextValue,
14644
14700
  deps: [TediTableComponent],
14645
14701
  },
14646
- ], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
14702
+ ], template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [align]=\"top.align\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n [xs]=\"top.xs\"\n [sm]=\"top.sm\"\n [md]=\"top.md\"\n [lg]=\"top.lg\"\n [xl]=\"top.xl\"\n [xxl]=\"top.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [class.tedi-table__scroll--shadow-start]=\"hasStartShadow()\"\n [class.tedi-table__scroll--shadow-end]=\"hasEndShadow()\"\n [class.tedi-table__scroll--shadow-header]=\"hasHeaderShadow()\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n (scroll)=\"onHorizontalScroll()\"\n>\n <table\n #tableElement\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-label]=\"ariaLabel() || null\"\n [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n @let headerAlign = meta?.headerAlign ?? meta?.align;\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (headerAlign\n ? ' tedi-table__cell--align-' + headerAlign\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n controlCellClass(header.column.id) +\n stickyLeftClass(header.column.id) +\n stickyRightClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n [style.right.px]=\"stickyRight(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n @if (filterUsesModal()) {\n <button\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"openFilterModal(header.column)\"\n ></button>\n } @else {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content\n [maxWidth]=\"filterPopoverWidthFor(header.column)\"\n >\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n (clear)=\"handleColumnFilter(column, '')\"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n controlCellClass(cell.column.id) +\n stickyLeftClass(cell.column.id) +\n stickyRightClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [style.right.px]=\"stickyRight(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"\n subTpl;\n context: { $implicit: row }\n \"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [align]=\"bottom.align\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n [xs]=\"bottom.xs\"\n [sm]=\"bottom.sm\"\n [md]=\"bottom.md\"\n [lg]=\"bottom.lg\"\n [xl]=\"bottom.xl\"\n [xxl]=\"bottom.xxl\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--control{padding-right:var(--table-data-padding-x-sm);padding-left:var(--table-data-padding-x-sm)}.tedi-table__cell--control-fit{width:1%;white-space:nowrap}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{overflow:hidden;border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge:after{position:absolute;top:0;bottom:0;left:100%;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-first-column .tedi-table__scroll--shadow-start .tedi-table__cell--sticky-left-edge:after{background:linear-gradient(to right,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__header-cell.tedi-table__cell--sticky-right{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border)}.tedi-table--sticky-last-column .tedi-table__cell--sticky-right-edge:after{position:absolute;top:0;right:100%;bottom:0;width:var(--tedi-dimensions-03);pointer-events:none;content:\"\"}.tedi-table--sticky-last-column .tedi-table__scroll--shadow-end .tedi-table__cell--sticky-right-edge:after{background:linear-gradient(to left,var(--tedi-alpha-10),transparent)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-striped)}.tedi-table--sticky-last-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-right{background:var(--table-hover)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start{box-shadow:inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-last-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-right-start.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset calc(var(--tedi-borders-02) * -1) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);border-bottom:0;box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-last-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-right-edge{box-shadow:inset 1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header .tedi-table__scroll--shadow-header .tedi-table__head .tedi-table__row:after{position:absolute;top:100%;right:0;left:0;height:var(--tedi-dimensions-03);pointer-events:none;content:\"\";background:linear-gradient(to bottom,var(--tedi-alpha-10),transparent)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"] }]
14647
14703
  }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: true }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], caption: [{ type: i0.Input, args: [{ isSignal: true, alias: "caption", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], striped: [{ type: i0.Input, args: [{ isSignal: true, alias: "striped", required: false }] }], verticalBorders: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalBorders", required: false }] }], borderless: [{ type: i0.Input, args: [{ isSignal: true, alias: "borderless", required: false }] }], stickyFirstColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyFirstColumn", required: false }] }], stickyLastColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyLastColumn", required: false }] }], stickyHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyHeader", required: false }] }], fixedLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixedLayout", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], activeRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeRowId", required: false }] }], selectedRowHighlight: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRowHighlight", required: false }] }], rowHover: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHover", required: false }] }], enableRowSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableRowSelection", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], enableColumnFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableColumnFilters", required: false }] }], renderSubComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "renderSubComponent", required: false }] }], getRowCanExpand: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowCanExpand", required: false }] }], expandTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandTrigger", required: false }] }], expandButtonVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonVariant", required: false }] }], expandButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandButtonLabel", required: false }] }], getSubRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "getSubRows", required: false }] }], getRowId: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowId", required: false }] }], groupRowsBy: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupRowsBy", required: false }] }], rowGroupDividers: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowGroupDividers", required: false }] }], controlColumnOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "controlColumnOrder", required: false }] }], filterModalBreakpoint: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalBreakpoint", required: false }] }], filterModalFullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterModalFullscreen", required: false }] }], filterPopoverWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterPopoverWidth", required: false }] }], pagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "pagination", required: false }] }], paginationTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "paginationTop", required: false }] }], manualPagination: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualPagination", required: false }] }], manualSorting: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualSorting", required: false }] }], manualFiltering: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualFiltering", required: false }] }], pageCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageCount", required: false }] }], rowCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowCount", required: false }] }], state: [{ type: i0.Input, args: [{ isSignal: true, alias: "state", required: false }] }], defaultState: [{ type: i0.Input, args: [{ isSignal: true, alias: "defaultState", required: false }] }], persist: [{ type: i0.Input, args: [{ isSignal: true, alias: "persist", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], placeholderRole: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholderRole", required: false }] }], interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], rowAriaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowAriaLabel", required: false }] }], reorderableRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableRows", required: false }] }], reorderableColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "reorderableColumns", required: false }] }], stateChange: [{ type: i0.Output, args: ["stateChange"] }], rowClick: [{ type: i0.Output, args: ["rowClick"] }], rowDrop: [{ type: i0.Output, args: ["rowDrop"] }], customResultsTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TediPaginationResultsDirective), { ...{ read: TemplateRef }, isSignal: true }] }], scrollContainer: [{ type: i0.ViewChild, args: ["scrollContainer", { isSignal: true }] }], tableElement: [{ type: i0.ViewChild, args: ["tableElement", { isSignal: true }] }] } });
14648
14704
 
14649
14705
  class TediTableToolbarComponent {
@@ -15474,7 +15530,7 @@ class FilterComponent {
15474
15530
  useExisting: forwardRef(() => FilterComponent),
15475
15531
  multi: true,
15476
15532
  },
15477
- ], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n <tedi-dropdown #dropdown position=\"bottom-start\">\n <button\n #triggerBtn\n tedi-dropdown-trigger\n ariaHaspopup=\"dialog\"\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"focusDropdownContent()\"\n (keydown.arrowDown)=\"focusDropdownContent(true)\"\n (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-dropdown-content>\n <div\n #dropdownPanel\n class=\"tedi-filter-dropdown\"\n [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n role=\"dialog\"\n [attr.aria-label]=\"text()\"\n (keydown)=\"handleDropdownKeydown($event)\"\n >\n @if (hasCustomContent()) {\n <div class=\"tedi-filter-dropdown__custom-content\">\n <ng-content select=\"[tediFilterContent]\" />\n </div>\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"onCustomClear()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else if (isSingleSelect()) {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n [class.tedi-filter-dropdown__item--selected]=\"\n isOptionSelected(option.value)\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && selectOption(option.value)\"\n >\n <tedi-dropdown-item-value\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSingleSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n @if (showSelectAll() && filteredOptions().length > 0) {\n <div\n class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n role=\"checkbox\"\n [attr.aria-checked]=\"\n allFilteredSelected()\n ? 'true'\n : someFilteredSelected()\n ? 'mixed'\n : 'false'\n \"\n (click)=\"toggleSelectAll()\"\n (keydown.enter)=\"toggleSelectAll()\"\n (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n tabindex=\"0\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"allFilteredSelected()\"\n [indeterminate]=\"someFilteredSelected()\"\n >\n <tedi-dropdown-item-value-label>{{\n resolvedSelectAllLabel()\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n <tedi-separator />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && toggleOption(option.value)\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n }\n </div>\n </tedi-dropdown-content>\n </tedi-dropdown>\n} @else {\n <button\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n (click)=\"toggle()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n}\n\n<ng-template #buttonContent>\n @if (!hasDropdown() && isSelected()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"check\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n\n <div\n class=\"tedi-filter__prepend\"\n [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n >\n <ng-content select=\"[tediFilterPrepend]\" />\n </div>\n\n <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n <div class=\"tedi-filter__append\">\n <ng-content select=\"[tediFilterAppend]\" />\n </div>\n\n @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n <tedi-status-badge\n class=\"tedi-filter__count\"\n [text]=\"'' + selectedCount()\"\n color=\"brand\"\n />\n }\n\n @if (hasDropdown()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"arrow_drop_down\"\n variant=\"filled\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n</ng-template>\n\n<ng-template #searchField>\n <div class=\"tedi-filter-dropdown__search\">\n <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n <input\n tedi-text-field\n type=\"text\"\n role=\"searchbox\"\n [attr.aria-label]=\"text()\"\n [(value)]=\"searchTerm\"\n (clear)=\"onSearchClear()\"\n />\n </tedi-form-field>\n </div>\n <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-border-width-selected)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
15533
+ ], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n <tedi-dropdown #dropdown position=\"bottom-start\">\n <button\n #triggerBtn\n tedi-dropdown-trigger\n ariaHaspopup=\"dialog\"\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"focusDropdownContent()\"\n (keydown.arrowDown)=\"focusDropdownContent(true)\"\n (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-dropdown-content>\n <div\n #dropdownPanel\n class=\"tedi-filter-dropdown\"\n [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n role=\"dialog\"\n [attr.aria-label]=\"text()\"\n (keydown)=\"handleDropdownKeydown($event)\"\n >\n @if (hasCustomContent()) {\n <div class=\"tedi-filter-dropdown__custom-content\">\n <ng-content select=\"[tediFilterContent]\" />\n </div>\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"onCustomClear()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else if (isSingleSelect()) {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n [class.tedi-filter-dropdown__item--selected]=\"\n isOptionSelected(option.value)\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && selectOption(option.value)\"\n >\n <tedi-dropdown-item-value\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSingleSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n @if (showSelectAll() && filteredOptions().length > 0) {\n <div\n class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n role=\"checkbox\"\n [attr.aria-checked]=\"\n allFilteredSelected()\n ? 'true'\n : someFilteredSelected()\n ? 'mixed'\n : 'false'\n \"\n (click)=\"toggleSelectAll()\"\n (keydown.enter)=\"toggleSelectAll()\"\n (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n tabindex=\"0\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"allFilteredSelected()\"\n [indeterminate]=\"someFilteredSelected()\"\n >\n <tedi-dropdown-item-value-label>{{\n resolvedSelectAllLabel()\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n <tedi-separator />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (\n option of filteredOptions();\n track option.value;\n let i = $index\n ) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"\n activeOptionIndex() === i\n \"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && toggleOption(option.value)\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{\n option.label\n }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n }\n </div>\n </tedi-dropdown-content>\n </tedi-dropdown>\n} @else {\n <button\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n (click)=\"toggle()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n}\n\n<ng-template #buttonContent>\n @if (!hasDropdown() && isSelected()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"check\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n\n <div\n class=\"tedi-filter__prepend\"\n [class.tedi-filter__prepend--hidden]=\"hidePrepend()\"\n >\n <ng-content select=\"[tediFilterPrepend]\" />\n </div>\n\n <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n <div class=\"tedi-filter__append\">\n <ng-content select=\"[tediFilterAppend]\" />\n </div>\n\n @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n <tedi-status-badge\n class=\"tedi-filter__count\"\n [text]=\"'' + selectedCount()\"\n color=\"brand\"\n />\n }\n\n @if (hasDropdown()) {\n <tedi-icon\n class=\"tedi-filter__icon\"\n name=\"arrow_drop_down\"\n variant=\"filled\"\n [size]=\"iconSize()\"\n color=\"inherit\"\n />\n }\n</ng-template>\n\n<ng-template #searchField>\n <div class=\"tedi-filter-dropdown__search\">\n <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n <input\n tedi-text-field\n type=\"text\"\n role=\"searchbox\"\n [attr.aria-label]=\"text()\"\n [(value)]=\"searchTerm\"\n (clear)=\"onSearchClear()\"\n />\n </tedi-form-field>\n </div>\n <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-border-width-selected)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
15478
15534
  }
15479
15535
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FilterComponent, decorators: [{
15480
15536
  type: Component,
@@ -15751,7 +15807,7 @@ class DateInputComponent {
15751
15807
  return width - inputMinWidth;
15752
15808
  }
15753
15809
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
15754
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "textField", first: true, predicate: TextFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n @if (hasTags()) {\n <div class=\"tedi-date-input__tags\">\n @for (tag of visibleTags(); track tag.id) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"ellipsis()\"\n [closable]=\"removable() && !disabled()\"\n (closed)=\"handleTagRemove(tag.id)\"\n >\n {{ tag.label }}\n </tedi-tag>\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-date-input__tags-counter\"\n >+{{ hiddenTagsCount() }}</tedi-tag\n >\n }\n }\n <input\n #inputElement\n tedi-text-field\n class=\"tedi-date-input__input\"\n [id]=\"inputId()\"\n [attr.name]=\"name() || null\"\n [type]=\"inputType()\"\n [value]=\"inputValue()\"\n [attr.placeholder]=\"placeholder() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [required]=\"required()\"\n (input)=\"handleInput($event)\"\n />\n</div>\n<div class=\"tedi-date-input__actions\">\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-input__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"clearAriaLabel()\"\n (click)=\"handleClear()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <button\n type=\"button\"\n class=\"tedi-date-input__icon\"\n [class.tedi-date-input__icon--active]=\"iconActive()\"\n [disabled]=\"disabled() || iconDisabled()\"\n [attr.aria-label]=\"iconAriaLabel()\"\n [attr.aria-expanded]=\"iconActive()\"\n (click)=\"handleIconClick()\"\n >\n <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--tags-wrap),.tedi-form-field__box:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--_field-height)}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--with-tags),.tedi-form-field__box:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
15810
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateInputComponent, isStandalone: true, selector: "tedi-date-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedby: { classPropertyName: "ariaDescribedby", publicName: "ariaDescribedby", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, tags: { classPropertyName: "tags", publicName: "tags", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, ellipsis: { classPropertyName: "ellipsis", publicName: "ellipsis", isSignal: true, isRequired: false, transformFunction: null }, removable: { classPropertyName: "removable", publicName: "removable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, iconActive: { classPropertyName: "iconActive", publicName: "iconActive", isSignal: true, isRequired: false, transformFunction: null }, iconDisabled: { classPropertyName: "iconDisabled", publicName: "iconDisabled", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, nativeIsoValue: { classPropertyName: "nativeIsoValue", publicName: "nativeIsoValue", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputChange: "inputChange", iconClick: "iconClick", tagRemove: "tagRemove", clear: "clear" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.tedi-date-input--disabled": "disabled()", "class.tedi-date-input--readonly": "readOnly()", "class.tedi-date-input--with-tags": "hasTags()", "class.tedi-date-input--tags-wrap": "hasTags() && multiRow()", "class.tedi-date-input--tags-single-row": "hasTags() && !multiRow()", "class.tedi-date-input--tags-measuring": "hasTags() && !multiRow() && visibleTagsCount() === null" }, classAttribute: "tedi-date-input" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "fieldElement", first: true, predicate: ["fieldElement"], descendants: true, isSignal: true }, { propertyName: "tagElements", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "textField", first: true, predicate: TextFieldComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tedi-date-input__field\" #fieldElement>\n @if (hasTags()) {\n <div class=\"tedi-date-input__tags\">\n @for (tag of visibleTags(); track tag.id) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"ellipsis()\"\n [closable]=\"removable() && !disabled()\"\n (closed)=\"handleTagRemove(tag.id)\"\n >\n {{ tag.label }}\n </tedi-tag>\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-date-input__tags-counter\"\n >+{{ hiddenTagsCount() }}</tedi-tag\n >\n }\n }\n <input\n #inputElement\n tedi-text-field\n class=\"tedi-date-input__input\"\n [id]=\"inputId()\"\n [attr.name]=\"name() || null\"\n [type]=\"inputType()\"\n [value]=\"inputValue()\"\n [attr.placeholder]=\"placeholder() || null\"\n [disabled]=\"disabled()\"\n [readOnly]=\"readOnly()\"\n [required]=\"required()\"\n (input)=\"handleInput($event)\"\n />\n</div>\n<div class=\"tedi-date-input__actions\">\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-input__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"clearAriaLabel()\"\n (click)=\"handleClear()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <button\n type=\"button\"\n class=\"tedi-date-input__icon\"\n [class.tedi-date-input__icon--active]=\"iconActive()\"\n [disabled]=\"disabled() || iconDisabled()\"\n [attr.aria-label]=\"iconAriaLabel()\"\n [attr.aria-expanded]=\"iconActive()\"\n (click)=\"handleIconClick()\"\n >\n <tedi-icon name=\"calendar_today\" [size]=\"18\" color=\"inherit\" />\n </button>\n</div>\n", styles: [".tedi-date-input{display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-input--with-tags .tedi-date-input__input{height:auto}.tedi-date-input--tags-wrap{align-items:flex-start}.tedi-date-input--tags-wrap .tedi-date-input__actions{align-self:flex-start}.tedi-date-input--tags-single-row .tedi-date-input__tags{flex:0 1 auto;flex-wrap:nowrap;overflow:hidden}.tedi-date-input__tags-counter,.tedi-date-input--tags-measuring .tedi-date-input__tags .tedi-tag{flex-shrink:0}.tedi-date-input__field{display:flex;flex:1;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__tags{display:flex;flex-wrap:wrap;gap:var(--layout-grid-gutters-04);align-items:center;min-width:0}.tedi-date-input__input{flex:1;min-width:0}.tedi-date-input__input[type=date]::-webkit-calendar-picker-indicator{display:none;appearance:none}.tedi-date-input__input[type=date]::-webkit-inner-spin-button{display:none}.tedi-date-input__input[type=date]::-webkit-clear-button{display:none}.tedi-date-input__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-date-input__clear{flex-shrink:0}.tedi-date-input__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--button-xs-icon-size);height:var(--form-field-button-height-sm);padding:0;color:var(--button-main-neutral-text-default);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-input__icon:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-input__icon:active,.tedi-date-input__icon--active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-input__icon:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-input__icon:disabled{color:var(--general-text-disabled);pointer-events:none;cursor:not-allowed;background:transparent}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--tags-wrap),.tedi-form-field__box:has(.tedi-date-input--tags-wrap){align-items:flex-start;height:auto;min-height:var(--_field-height)}.tedi-date-field.tedi-field-surface:has(.tedi-date-input--with-tags),.tedi-form-field__box:has(.tedi-date-input--with-tags){padding-block:calc(var(--_field-padding-y) - var(--tedi-borders-01))}\n"], dependencies: [{ kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
15755
15811
  }
15756
15812
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateInputComponent, decorators: [{
15757
15813
  type: Component,
@@ -15972,6 +16028,17 @@ class DateFieldComponent {
15972
16028
  * set here.
15973
16029
  */
15974
16030
  size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
16031
+ /**
16032
+ * Whether the clear button shows once the field has a value. Falls back to the
16033
+ * wrapping `tedi-form-field`'s `clearable` when not set here — set it on the
16034
+ * wrapper, and use this only for a standalone field.
16035
+ */
16036
+ clearable = input(undefined, ...(ngDevMode ? [{ debugName: "clearable",
16037
+ // Unset stays `undefined` so the wrapper's `clearable` still applies.
16038
+ transform: (v) => (v == null ? undefined : booleanAttribute(v)) }] : [{
16039
+ // Unset stays `undefined` so the wrapper's `clearable` still applies.
16040
+ transform: (v) => (v == null ? undefined : booleanAttribute(v)),
16041
+ }]));
15975
16042
  /**
15976
16043
  * Forces the error state on, or off, regardless of the reactive-forms state.
15977
16044
  * Leave unset to let the control derive it.
@@ -16161,10 +16228,15 @@ class DateFieldComponent {
16161
16228
  invalid: computed(() => this.invalid()),
16162
16229
  valid: computed(() => this.valid()),
16163
16230
  disabled: computed(() => this.disabled()),
16231
+ clearable: computed(() => this.clearableResolved()),
16164
16232
  };
16165
16233
  ngOnInit() {
16166
16234
  this.derived.connect();
16167
16235
  }
16236
+ /** The clear button sits in the date input's action row, beside the calendar. */
16237
+ ownsClearButton = true;
16238
+ /** Own `clearable` wins, then the wrapping `tedi-form-field`'s. */
16239
+ clearableResolved = computed(() => this.clearable() ?? this.fieldContext?.clearable() ?? true, ...(ngDevMode ? [{ debugName: "clearableResolved" }] : []));
16168
16240
  resolvedDisabledMatchers = computed(() => {
16169
16241
  const result = [];
16170
16242
  const explicit = this.disabledMatchers();
@@ -16268,7 +16340,7 @@ class DateFieldComponent {
16268
16340
  * so they must also be able to remove them (clear button, tag close).
16269
16341
  */
16270
16342
  valueEditable = computed(() => !this.fieldDisabled() && (!this.readOnly() || this.showCalendar()), ...(ngDevMode ? [{ debugName: "valueEditable" }] : []));
16271
- canClear = computed(() => !!this.value() && this.valueEditable(), ...(ngDevMode ? [{ debugName: "canClear" }] : []));
16343
+ canClear = computed(() => this.clearableResolved() && !!this.value() && this.valueEditable(), ...(ngDevMode ? [{ debugName: "canClear" }] : []));
16272
16344
  inputIsTrigger = computed(() => this.showCalendar() && this.calendarTriggerResolved() === "input", ...(ngDevMode ? [{ debugName: "inputIsTrigger" }] : []));
16273
16345
  initialOpenEmit = true;
16274
16346
  constructor() {
@@ -16682,7 +16754,7 @@ class DateFieldComponent {
16682
16754
  return host.querySelector(".tedi-date-input__input");
16683
16755
  }
16684
16756
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DateFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
16685
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateFieldComponent, isStandalone: true, selector: "tedi-date-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, tagEllipsis: { classPropertyName: "tagEllipsis", publicName: "tagEllipsis", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disablePast: { classPropertyName: "disablePast", publicName: "disablePast", isSignal: true, isRequired: false, transformFunction: null }, disableFuture: { classPropertyName: "disableFuture", publicName: "disableFuture", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableMonth: { classPropertyName: "shouldDisableMonth", publicName: "shouldDisableMonth", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableYear: { classPropertyName: "shouldDisableYear", publicName: "shouldDisableYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, initialMonth: { classPropertyName: "initialMonth", publicName: "initialMonth", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, enableCalendar: { classPropertyName: "enableCalendar", publicName: "enableCalendar", isSignal: true, isRequired: false, transformFunction: null }, calendarTrigger: { classPropertyName: "calendarTrigger", publicName: "calendarTrigger", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", openChange: "openChange" }, host: { properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--invalid": "paintsSurface() && invalid()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-field-surface--disabled": "paintsSurface() && disabled()", "class.tedi-date-field--small": "resolvedSize() === 'small'", "class.tedi-date-field--large": "resolvedSize() === 'large'" }, classAttribute: "tedi-date-field" }, providers: [
16757
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: DateFieldComponent, isStandalone: true, selector: "tedi-date-field", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, multiRow: { classPropertyName: "multiRow", publicName: "multiRow", isSignal: true, isRequired: false, transformFunction: null }, tagEllipsis: { classPropertyName: "tagEllipsis", publicName: "tagEllipsis", isSignal: true, isRequired: false, transformFunction: null }, isTagRemovable: { classPropertyName: "isTagRemovable", publicName: "isTagRemovable", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabledMatchers: { classPropertyName: "disabledMatchers", publicName: "disabledMatchers", isSignal: true, isRequired: false, transformFunction: null }, inputDisabled: { classPropertyName: "inputDisabled", publicName: "inputDisabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, disablePast: { classPropertyName: "disablePast", publicName: "disablePast", isSignal: true, isRequired: false, transformFunction: null }, disableFuture: { classPropertyName: "disableFuture", publicName: "disableFuture", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableMonth: { classPropertyName: "shouldDisableMonth", publicName: "shouldDisableMonth", isSignal: true, isRequired: false, transformFunction: null }, shouldDisableYear: { classPropertyName: "shouldDisableYear", publicName: "shouldDisableYear", isSignal: true, isRequired: false, transformFunction: null }, minYear: { classPropertyName: "minYear", publicName: "minYear", isSignal: true, isRequired: false, transformFunction: null }, maxYear: { classPropertyName: "maxYear", publicName: "maxYear", isSignal: true, isRequired: false, transformFunction: null }, availableDays: { classPropertyName: "availableDays", publicName: "availableDays", isSignal: true, isRequired: false, transformFunction: null }, unavailableDays: { classPropertyName: "unavailableDays", publicName: "unavailableDays", isSignal: true, isRequired: false, transformFunction: null }, selectionLevel: { classPropertyName: "selectionLevel", publicName: "selectionLevel", isSignal: true, isRequired: false, transformFunction: null }, monthYearSelectType: { classPropertyName: "monthYearSelectType", publicName: "monthYearSelectType", isSignal: true, isRequired: false, transformFunction: null }, initialMonth: { classPropertyName: "initialMonth", publicName: "initialMonth", isSignal: true, isRequired: false, transformFunction: null }, localeCode: { classPropertyName: "localeCode", publicName: "localeCode", isSignal: true, isRequired: false, transformFunction: null }, closeOnSelect: { classPropertyName: "closeOnSelect", publicName: "closeOnSelect", isSignal: true, isRequired: false, transformFunction: null }, showOutsideDays: { classPropertyName: "showOutsideDays", publicName: "showOutsideDays", isSignal: true, isRequired: false, transformFunction: null }, showWeekNumbers: { classPropertyName: "showWeekNumbers", publicName: "showWeekNumbers", isSignal: true, isRequired: false, transformFunction: null }, numberOfMonths: { classPropertyName: "numberOfMonths", publicName: "numberOfMonths", isSignal: true, isRequired: false, transformFunction: null }, enableCalendar: { classPropertyName: "enableCalendar", publicName: "enableCalendar", isSignal: true, isRequired: false, transformFunction: null }, calendarTrigger: { classPropertyName: "calendarTrigger", publicName: "calendarTrigger", isSignal: true, isRequired: false, transformFunction: null }, useNativePicker: { classPropertyName: "useNativePicker", publicName: "useNativePicker", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, modal: { classPropertyName: "modal", publicName: "modal", isSignal: true, isRequired: false, transformFunction: null }, fullscreen: { classPropertyName: "fullscreen", publicName: "fullscreen", isSignal: true, isRequired: false, transformFunction: null }, formatDate: { classPropertyName: "formatDate", publicName: "formatDate", isSignal: true, isRequired: false, transformFunction: null }, parseDate: { classPropertyName: "parseDate", publicName: "parseDate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", openChange: "openChange" }, host: { properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--invalid": "paintsSurface() && invalid()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-field-surface--disabled": "paintsSurface() && disabled()", "class.tedi-date-field--small": "resolvedSize() === 'small'", "class.tedi-date-field--large": "resolvedSize() === 'large'" }, classAttribute: "tedi-date-field" }, providers: [
16686
16758
  {
16687
16759
  provide: NG_VALUE_ACCESSOR,
16688
16760
  useExisting: forwardRef(() => DateFieldComponent),
@@ -16704,7 +16776,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
16704
16776
  args: [{ selector: "tedi-date-field", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
16705
16777
  CalendarComponent,
16706
16778
  DateInputComponent,
16707
- ButtonComponent,
16708
16779
  OverlayModule,
16709
16780
  A11yModule,
16710
16781
  TediTranslationPipe,
@@ -16732,7 +16803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
16732
16803
  "[class.tedi-date-field--small]": "resolvedSize() === 'small'",
16733
16804
  "[class.tedi-date-field--large]": "resolvedSize() === 'large'",
16734
16805
  }, template: "<tedi-date-input\n #dateInput\n cdkOverlayOrigin\n #overlayOrigin=\"cdkOverlayOrigin\"\n [inputId]=\"inputId()\"\n [name]=\"name()\"\n [value]=\"inputText()\"\n [ariaDescribedby]=\"describedBy.attribute()\"\n [tags]=\"tagsForMultipleMode()\"\n [mode]=\"mode()\"\n [multiRow]=\"multiRow()\"\n [ellipsis]=\"tagEllipsis()\"\n [removable]=\"isTagRemovable() && valueEditable()\"\n [placeholder]=\"effectivePlaceholder()\"\n [disabled]=\"fieldDisabled()\"\n [readOnly]=\"readOnly() || inputIsTrigger()\"\n [required]=\"required()\"\n [iconActive]=\"overlayOpen()\"\n [iconDisabled]=\"!enableCalendarResolved()\"\n [useNativePicker]=\"useNativePickerEffective()\"\n [nativeIsoValue]=\"nativeIsoValue()\"\n [clearable]=\"canClear()\"\n (click)=\"handleInputClick($event)\"\n (inputChange)=\"handleInputChange($event)\"\n (iconClick)=\"handleIconClick()\"\n (tagRemove)=\"handleTagRemove($event)\"\n (clear)=\"handleClear()\"\n/>\n@if (usePopover()) {\n <ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin\"\n [cdkConnectedOverlayOpen]=\"overlayOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n [cdkConnectedOverlayHasBackdrop]=\"false\"\n (attach)=\"handleOverlayAttached()\"\n (overlayOutsideClick)=\"handleOverlayOutsideClick($event)\"\n (detach)=\"handleOverlayDetached()\"\n >\n <div\n class=\"tedi-date-field__overlay\"\n role=\"dialog\"\n [attr.aria-label]=\"'date-field.calendar-dialog' | tediTranslate\"\n cdkTrapFocus\n (keydown)=\"handleOverlayKeydown($event)\"\n >\n <tedi-calendar\n #calendar\n [bordered]=\"false\"\n [value]=\"value()\"\n [currentMonth]=\"currentMonth()\"\n [mode]=\"mode()\"\n [selectionLevel]=\"selectionLevel()\"\n [localeCode]=\"localeCode()\"\n [showOutsideDays]=\"showOutsideDays()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [numberOfMonths]=\"numberOfMonthsResolved()\"\n [monthYearSelectType]=\"monthYearSelectType()\"\n [required]=\"required()\"\n [disabledMatchers]=\"resolvedDisabledMatchers()\"\n [availableDays]=\"availableDays()\"\n [unavailableDays]=\"unavailableDays()\"\n [shouldDisableMonth]=\"shouldDisableMonth()\"\n [shouldDisableYear]=\"shouldDisableYear()\"\n [minYear]=\"minYear()\"\n [maxYear]=\"maxYear()\"\n [inputDisabled]=\"fieldDisabled()\"\n (currentMonthChange)=\"handleCurrentMonthChange($event)\"\n (select)=\"handleCalendarSelect()\"\n >\n <!--\n Footer projection forwards into the overlay-mounted calendar.\n Modal mode (modal-below-breakpoint) does NOT receive projected\n footers \u2014 the modal opens via ModalService.open() with a data\n hash, which has no projection mechanism. If footer-in-modal is\n ever required, refactor to pass a TemplateRef through the modal's\n data injection.\n -->\n <ng-content select=\"[tediCalendarFooter]\" />\n </tedi-calendar>\n </div>\n </ng-template>\n}\n", styles: [".tedi-date-field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-date-field:not(.tedi-field-surface){flex:1}.tedi-date-field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x);width:100%}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-date-field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-date-field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-date-field--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-date-field--large{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-date-field__overlay{background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}\n"] }]
16735
- }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disablePast: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePast", required: false }] }], disableFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFuture", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], initialMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMonth", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], enableCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCalendar", required: false }] }], calendarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarTrigger", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], calendar: [{ type: i0.ViewChild, args: ["calendar", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["dateInput", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
16806
+ }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], multiRow: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiRow", required: false }] }], tagEllipsis: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagEllipsis", required: false }] }], isTagRemovable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTagRemovable", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], readOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], disablePast: [{ type: i0.Input, args: [{ isSignal: true, alias: "disablePast", required: false }] }], disableFuture: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableFuture", required: false }] }], shouldDisableMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableMonth", required: false }] }], shouldDisableYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "shouldDisableYear", required: false }] }], minYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "minYear", required: false }] }], maxYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxYear", required: false }] }], availableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "availableDays", required: false }] }], unavailableDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableDays", required: false }] }], selectionLevel: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionLevel", required: false }] }], monthYearSelectType: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthYearSelectType", required: false }] }], initialMonth: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialMonth", required: false }] }], localeCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "localeCode", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], showOutsideDays: [{ type: i0.Input, args: [{ isSignal: true, alias: "showOutsideDays", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], numberOfMonths: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberOfMonths", required: false }] }], enableCalendar: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableCalendar", required: false }] }], calendarTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "calendarTrigger", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], formatDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatDate", required: false }] }], parseDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "parseDate", required: false }] }], openChange: [{ type: i0.Output, args: ["openChange"] }], calendar: [{ type: i0.ViewChild, args: ["calendar", { isSignal: true }] }], dateInput: [{ type: i0.ViewChild, args: ["dateInput", { isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
16736
16807
 
16737
16808
  class DatePickerHeaderComponent {
16738
16809
  /** Unique ID for ARIA controls */
@@ -17559,7 +17630,7 @@ class DatePickerComponent {
17559
17630
  useExisting: forwardRef(() => DatePickerComponent),
17560
17631
  multi: true,
17561
17632
  },
17562
- ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #inputElement\n type=\"text\"\n class=\"tedi-date-picker__input\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n aria-haspopup=\"dialog\"\n [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n [attr.id]=\"inputId()\"\n [attr.placeholder]=\"inputPlaceholder()\"\n [attr.aria-expanded]=\"!fieldDisabled() && popover().isOpen()\"\n [attr.aria-controls]=\"uniqueId\"\n [attr.aria-readonly]=\"!allowManualInput()\"\n [readOnly]=\"!allowManualInput()\"\n [value]=\"inputValue()\"\n [disabled]=\"fieldDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onInputBlur()\"\n (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n @if (selected()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-picker__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"clearInput()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <tedi-popover\n style=\"display: flex; align-items: center\"\n position=\"bottom-end\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-button\n tedi-popover-trigger\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-date-picker__toggle\"\n [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"openCalendar()\"\n >\n <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n </button>\n <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n <div\n class=\"tedi-date-picker__calendar\"\n (keydown)=\"onCalendarKeyDown($event)\"\n >\n <tedi-date-picker-header\n [uniqueId]=\"uniqueId\"\n [currentView]=\"currentView()\"\n [month]=\"month()\"\n [monthMode]=\"monthMode()\"\n [yearMode]=\"yearMode()\"\n [showNavigation]=\"showNavigation()\"\n [canGoPrev]=\"canGoPrev()\"\n [canGoNext]=\"canGoNext()\"\n [selectedYear]=\"selectedYear()\"\n [years]=\"years()\"\n [pagedYears]=\"pagedYears()\"\n [hasPrevYearPage]=\"hasPrevYearPage()\"\n [hasNextYearPage]=\"hasNextYearPage()\"\n [disabledMonths]=\"disabledMonths()\"\n [disabledYears]=\"disabledYears()\"\n (prevMonth)=\"prevMonth()\"\n (nextMonth)=\"nextMonth()\"\n (monthSelect)=\"onMonthSelect($event)\"\n (yearSelect)=\"onYearSelect($event)\"\n (monthClick)=\"onMonthClick()\"\n (yearClick)=\"onYearClick()\"\n (prevYearPage)=\"prevYearPage()\"\n (nextYearPage)=\"nextYearPage()\"\n />\n\n @if (currentView() === \"calendar-grid\") {\n <tedi-date-picker-calendar-grid\n #gridElement\n [gridId]=\"uniqueId\"\n [weekRows]=\"weekRows()\"\n [weekNumbers]=\"weekNumbers()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [activeDate]=\"activeDate()\"\n [selected]=\"selected()\"\n [today]=\"today\"\n (daySelect)=\"selectDay($event)\"\n (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n />\n } @else if (currentView() === \"month-grid\") {\n <tedi-date-picker-month-grid\n [currentMonth]=\"month()\"\n (monthSelect)=\"onMonthSelect($event)\"\n />\n } @else if (currentView() === \"year-grid\") {\n <tedi-date-picker-year-grid\n [pagedYears]=\"pagedYears()\"\n [selectedYear]=\"selectedYear()\"\n (yearSelect)=\"onYearSelect($event)\"\n />\n }\n </div>\n </tedi-popover-content>\n </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed;background:transparent}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
17633
+ ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "calendarGrid", first: true, predicate: ["gridElement"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: PopoverComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<input\n #inputElement\n type=\"text\"\n class=\"tedi-date-picker__input\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n aria-haspopup=\"dialog\"\n [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n [attr.id]=\"inputId()\"\n [attr.placeholder]=\"inputPlaceholder()\"\n [attr.aria-expanded]=\"!fieldDisabled() && popover().isOpen()\"\n [attr.aria-controls]=\"uniqueId\"\n [attr.aria-readonly]=\"!allowManualInput()\"\n [readOnly]=\"!allowManualInput()\"\n [value]=\"inputValue()\"\n [disabled]=\"fieldDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onInputBlur()\"\n (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n @if (selected()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-picker__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"clearInput()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <tedi-popover\n style=\"display: flex; align-items: center\"\n position=\"bottom-end\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-button\n tedi-popover-trigger\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-date-picker__toggle\"\n [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"openCalendar()\"\n >\n <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n </button>\n <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n <div\n class=\"tedi-date-picker__calendar\"\n (keydown)=\"onCalendarKeyDown($event)\"\n >\n <tedi-date-picker-header\n [uniqueId]=\"uniqueId\"\n [currentView]=\"currentView()\"\n [month]=\"month()\"\n [monthMode]=\"monthMode()\"\n [yearMode]=\"yearMode()\"\n [showNavigation]=\"showNavigation()\"\n [canGoPrev]=\"canGoPrev()\"\n [canGoNext]=\"canGoNext()\"\n [selectedYear]=\"selectedYear()\"\n [years]=\"years()\"\n [pagedYears]=\"pagedYears()\"\n [hasPrevYearPage]=\"hasPrevYearPage()\"\n [hasNextYearPage]=\"hasNextYearPage()\"\n [disabledMonths]=\"disabledMonths()\"\n [disabledYears]=\"disabledYears()\"\n (prevMonth)=\"prevMonth()\"\n (nextMonth)=\"nextMonth()\"\n (monthSelect)=\"onMonthSelect($event)\"\n (yearSelect)=\"onYearSelect($event)\"\n (monthClick)=\"onMonthClick()\"\n (yearClick)=\"onYearClick()\"\n (prevYearPage)=\"prevYearPage()\"\n (nextYearPage)=\"nextYearPage()\"\n />\n\n @if (currentView() === \"calendar-grid\") {\n <tedi-date-picker-calendar-grid\n #gridElement\n [gridId]=\"uniqueId\"\n [weekRows]=\"weekRows()\"\n [weekNumbers]=\"weekNumbers()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [activeDate]=\"activeDate()\"\n [selected]=\"selected()\"\n [today]=\"today\"\n (daySelect)=\"selectDay($event)\"\n (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n />\n } @else if (currentView() === \"month-grid\") {\n <tedi-date-picker-month-grid\n [currentMonth]=\"month()\"\n (monthSelect)=\"onMonthSelect($event)\"\n />\n } @else if (currentView() === \"year-grid\") {\n <tedi-date-picker-year-grid\n [pagedYears]=\"pagedYears()\"\n [selectedYear]=\"selectedYear()\"\n (yearSelect)=\"onYearSelect($event)\"\n />\n }\n </div>\n </tedi-popover-content>\n </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed;background:transparent}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "component", type: DatePickerHeaderComponent, selector: "tedi-date-picker-header", inputs: ["uniqueId", "currentView", "month", "monthMode", "yearMode", "showNavigation", "canGoPrev", "canGoNext", "selectedYear", "years", "pagedYears", "hasPrevYearPage", "hasNextYearPage", "disabledMonths", "disabledYears"], outputs: ["prevMonth", "nextMonth", "monthSelect", "yearSelect", "monthClick", "yearClick", "prevYearPage", "nextYearPage"] }, { kind: "component", type: DatePickerCalendarGridComponent, selector: "tedi-date-picker-calendar-grid", inputs: ["gridId", "weekRows", "weekNumbers", "showWeekNumbers", "activeDate", "selected", "today"], outputs: ["daySelect", "dayKeydown"] }, { kind: "component", type: DatePickerMonthGridComponent, selector: "tedi-date-picker-month-grid", inputs: ["currentMonth"], outputs: ["monthSelect"] }, { kind: "component", type: DatePickerYearGridComponent, selector: "tedi-date-picker-year-grid", inputs: ["pagedYears", "selectedYear"], outputs: ["yearSelect"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
17563
17634
  }
17564
17635
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: DatePickerComponent, decorators: [{
17565
17636
  type: Component,
@@ -17582,7 +17653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
17582
17653
  useExisting: forwardRef(() => DatePickerComponent),
17583
17654
  multi: true,
17584
17655
  },
17585
- ], template: "<input\n #inputElement\n type=\"text\"\n class=\"tedi-date-picker__input\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n aria-haspopup=\"dialog\"\n [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n [attr.id]=\"inputId()\"\n [attr.placeholder]=\"inputPlaceholder()\"\n [attr.aria-expanded]=\"!fieldDisabled() && popover().isOpen()\"\n [attr.aria-controls]=\"uniqueId\"\n [attr.aria-readonly]=\"!allowManualInput()\"\n [readOnly]=\"!allowManualInput()\"\n [value]=\"inputValue()\"\n [disabled]=\"fieldDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onInputBlur()\"\n (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n @if (selected()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-picker__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"clearInput()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <tedi-popover\n style=\"display: flex; align-items: center\"\n position=\"bottom-end\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-button\n tedi-popover-trigger\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-date-picker__toggle\"\n [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"openCalendar()\"\n >\n <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n </button>\n <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n <div\n class=\"tedi-date-picker__calendar\"\n (keydown)=\"onCalendarKeyDown($event)\"\n >\n <tedi-date-picker-header\n [uniqueId]=\"uniqueId\"\n [currentView]=\"currentView()\"\n [month]=\"month()\"\n [monthMode]=\"monthMode()\"\n [yearMode]=\"yearMode()\"\n [showNavigation]=\"showNavigation()\"\n [canGoPrev]=\"canGoPrev()\"\n [canGoNext]=\"canGoNext()\"\n [selectedYear]=\"selectedYear()\"\n [years]=\"years()\"\n [pagedYears]=\"pagedYears()\"\n [hasPrevYearPage]=\"hasPrevYearPage()\"\n [hasNextYearPage]=\"hasNextYearPage()\"\n [disabledMonths]=\"disabledMonths()\"\n [disabledYears]=\"disabledYears()\"\n (prevMonth)=\"prevMonth()\"\n (nextMonth)=\"nextMonth()\"\n (monthSelect)=\"onMonthSelect($event)\"\n (yearSelect)=\"onYearSelect($event)\"\n (monthClick)=\"onMonthClick()\"\n (yearClick)=\"onYearClick()\"\n (prevYearPage)=\"prevYearPage()\"\n (nextYearPage)=\"nextYearPage()\"\n />\n\n @if (currentView() === \"calendar-grid\") {\n <tedi-date-picker-calendar-grid\n #gridElement\n [gridId]=\"uniqueId\"\n [weekRows]=\"weekRows()\"\n [weekNumbers]=\"weekNumbers()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [activeDate]=\"activeDate()\"\n [selected]=\"selected()\"\n [today]=\"today\"\n (daySelect)=\"selectDay($event)\"\n (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n />\n } @else if (currentView() === \"month-grid\") {\n <tedi-date-picker-month-grid\n [currentMonth]=\"month()\"\n (monthSelect)=\"onMonthSelect($event)\"\n />\n } @else if (currentView() === \"year-grid\") {\n <tedi-date-picker-year-grid\n [pagedYears]=\"pagedYears()\"\n [selectedYear]=\"selectedYear()\"\n (yearSelect)=\"onYearSelect($event)\"\n />\n }\n </div>\n </tedi-popover-content>\n </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed;background:transparent}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"] }]
17656
+ ], template: "<input\n #inputElement\n type=\"text\"\n class=\"tedi-date-picker__input\"\n role=\"combobox\"\n aria-autocomplete=\"none\"\n aria-haspopup=\"dialog\"\n [class.tedi-date-picker__input--small]=\"inputSize() === 'small'\"\n [class.tedi-date-picker__input--valid]=\"inputState() === 'valid'\"\n [class.tedi-date-picker__input--error]=\"inputState() === 'error'\"\n [attr.id]=\"inputId()\"\n [attr.placeholder]=\"inputPlaceholder()\"\n [attr.aria-expanded]=\"!fieldDisabled() && popover().isOpen()\"\n [attr.aria-controls]=\"uniqueId\"\n [attr.aria-readonly]=\"!allowManualInput()\"\n [readOnly]=\"!allowManualInput()\"\n [value]=\"inputValue()\"\n [disabled]=\"fieldDisabled()\"\n (input)=\"onInput($event)\"\n (blur)=\"onInputBlur()\"\n (click)=\"onInputClick()\"\n/>\n<div class=\"tedi-date-picker__input-buttons\">\n @if (selected()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-date-picker__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'date-picker.clear-date' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"clearInput()\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n <tedi-popover\n style=\"display: flex; align-items: center\"\n position=\"bottom-end\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-button\n tedi-popover-trigger\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-date-picker__toggle\"\n [attr.aria-label]=\"'date-picker.open-calendar' | tediTranslate\"\n [disabled]=\"fieldDisabled()\"\n (click)=\"openCalendar()\"\n >\n <tedi-icon name=\"calendar_today\" size=\"inherit\" />\n </button>\n <tedi-popover-content maxWidth=\"none\" style=\"padding: 0\">\n <div\n class=\"tedi-date-picker__calendar\"\n (keydown)=\"onCalendarKeyDown($event)\"\n >\n <tedi-date-picker-header\n [uniqueId]=\"uniqueId\"\n [currentView]=\"currentView()\"\n [month]=\"month()\"\n [monthMode]=\"monthMode()\"\n [yearMode]=\"yearMode()\"\n [showNavigation]=\"showNavigation()\"\n [canGoPrev]=\"canGoPrev()\"\n [canGoNext]=\"canGoNext()\"\n [selectedYear]=\"selectedYear()\"\n [years]=\"years()\"\n [pagedYears]=\"pagedYears()\"\n [hasPrevYearPage]=\"hasPrevYearPage()\"\n [hasNextYearPage]=\"hasNextYearPage()\"\n [disabledMonths]=\"disabledMonths()\"\n [disabledYears]=\"disabledYears()\"\n (prevMonth)=\"prevMonth()\"\n (nextMonth)=\"nextMonth()\"\n (monthSelect)=\"onMonthSelect($event)\"\n (yearSelect)=\"onYearSelect($event)\"\n (monthClick)=\"onMonthClick()\"\n (yearClick)=\"onYearClick()\"\n (prevYearPage)=\"prevYearPage()\"\n (nextYearPage)=\"nextYearPage()\"\n />\n\n @if (currentView() === \"calendar-grid\") {\n <tedi-date-picker-calendar-grid\n #gridElement\n [gridId]=\"uniqueId\"\n [weekRows]=\"weekRows()\"\n [weekNumbers]=\"weekNumbers()\"\n [showWeekNumbers]=\"showWeekNumbers()\"\n [activeDate]=\"activeDate()\"\n [selected]=\"selected()\"\n [today]=\"today\"\n (daySelect)=\"selectDay($event)\"\n (dayKeydown)=\"onDayKeydown($event.event, $event.date)\"\n />\n } @else if (currentView() === \"month-grid\") {\n <tedi-date-picker-month-grid\n [currentMonth]=\"month()\"\n (monthSelect)=\"onMonthSelect($event)\"\n />\n } @else if (currentView() === \"year-grid\") {\n <tedi-date-picker-year-grid\n [pagedYears]=\"pagedYears()\"\n [selectedYear]=\"selectedYear()\"\n (yearSelect)=\"onYearSelect($event)\"\n />\n }\n </div>\n </tedi-popover-content>\n </tedi-popover>\n</div>\n", styles: ["tedi-date-picker{display:flex;gap:var(--form-field-inner-spacing);align-self:stretch;min-height:var(--form-field-height);padding-right:var(--form-field-padding-x-md-default);background:var(--form-input-background-default);border:var(--tedi-borders-01) solid var(--form-input-border-default);border-radius:var(--form-field-radius)}tedi-date-picker:has(.tedi-date-picker__input:hover):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-hover)}tedi-date-picker:has(.tedi-date-picker__input:active):not(:has(.tedi-date-picker__input:disabled)),tedi-date-picker:has(.tedi-date-picker__input:focus):not(:has(.tedi-date-picker__input:disabled)){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}tedi-date-picker:has(.tedi-date-picker__input:disabled){cursor:not-allowed;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}tedi-date-picker:has(.tedi-date-picker__input--valid){border-color:var(--form-general-feedback-success-border)}tedi-date-picker:has(.tedi-date-picker__input--error){border-color:var(--form-general-feedback-error-border)}tedi-date-picker:has(.tedi-date-picker__input--small){min-height:var(--form-field-height-sm)}.tedi-date-picker__input{flex:1;min-width:0;padding-left:var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-date-picker__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-date-picker__input:disabled{cursor:not-allowed;background:transparent}.tedi-date-picker__input-buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center;min-width:0}.tedi-date-picker__clear:disabled{cursor:not-allowed}.tedi-date-picker__toggle{width:var(--button-xs-icon-size)!important;height:var(--form-field-button-height-sm)!important;font-size:1.125rem!important;border-radius:var(--button-radius-sm)!important}.tedi-date-picker__toggle:disabled{cursor:not-allowed}.tedi-date-picker__calendar{display:block;width:fit-content;-webkit-user-select:none;user-select:none;background:var(--card-background-primary);border-radius:var(--card-radius-rounded)}.tedi-date-picker__header{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;justify-content:space-between;padding:var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-xs) var(--card-padding-md-default)}.tedi-date-picker__controls{display:flex;gap:var(--layout-grid-gutters-08);align-items:center;margin:0 auto}.tedi-date-picker__dropdown-trigger{display:inline-flex;gap:var(--layout-grid-gutters-02);align-items:center;padding:0;padding-left:var(--layout-grid-gutters-04);font-size:1rem;font-weight:500;color:var(--general-text-primary);cursor:pointer;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-date-picker__dropdown-trigger:hover{color:var(--button-main-neutral-text-hover);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-date-picker__dropdown-trigger:hover tedi-icon{color:var(--button-main-neutral-text-hover)}.tedi-date-picker__dropdown-trigger:active{color:var(--button-main-neutral-text-active);background:var(--button-main-neutral-icon-only-background-active)}.tedi-date-picker__dropdown-trigger:active tedi-icon{color:var(--button-main-neutral-text-active)}.tedi-date-picker__dropdown-trigger:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__dropdown-trigger tedi-icon{font-size:2rem;color:var(--general-icon-tertiary)}.tedi-date-picker__dropdown-content{max-height:15rem}.tedi-date-picker__dropdown-content--month{width:10rem}.tedi-date-picker__dropdown-content--year{width:8.75rem}.tedi-date-picker__label{font-weight:500;color:var(--general-text-primary)}.tedi-date-picker__nav{font-size:var(--button-icon-inner-icon-only-size)!important}.tedi-date-picker__weekdays{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--card-padding-md-default)}.tedi-date-picker__weekdays--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weekday{display:flex;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);text-align:center;text-transform:uppercase;border-bottom:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__grid{display:flex;flex-direction:column;padding:0 var(--card-padding-md-default) var(--card-padding-md-default) var(--card-padding-md-default)}.tedi-date-picker__row{display:grid;grid-template-columns:repeat(7,1fr)}.tedi-date-picker__row--numbered{grid-template-columns:repeat(8,1fr)}.tedi-date-picker__weeknumber{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);border-right:var(--tedi-borders-01) solid var(--general-border-primary)}.tedi-date-picker__day{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);font-size:var(--body-regular-size);color:var(--general-text-primary);cursor:pointer;background:none;border:none;border-radius:var(--button-radius-sm)}.tedi-date-picker__day:hover{background:var(--form-datepicker-date-hover)}.tedi-date-picker__day:active{background:var(--form-datepicker-date-active)}.tedi-date-picker__day:disabled{cursor:not-allowed;opacity:.3}.tedi-date-picker__day:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__day--other-month{color:var(--form-datepicker-date-text-muted)}.tedi-date-picker__day--selected{color:var(--form-datepicker-date-text-selected);background:var(--form-datepicker-date-selected);border-radius:var(--button-radius-sm)}.tedi-date-picker__day--selected:hover{background:var(--form-datepicker-date-selected)}.tedi-date-picker__day--selected .tedi-date-picker__today{border-color:var(--form-datepicker-today-border-secondary)}.tedi-date-picker__today{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--form-calendar-date-width);height:var(--form-calendar-date-width);border:var(--tedi-borders-01) solid var(--form-datepicker-today-border);border-radius:var(--button-radius-default)}.tedi-date-picker__month-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--layout-grid-gutters-08);padding:var(--card-padding-md-default)}.tedi-date-picker__month-year-button{display:flex;align-items:center;justify-content:center;padding:var(--form-checkbox-radio-card-radio-padding-y) var(--form-checkbox-radio-card-radio-padding-x);font-size:var(--body-regular-size);color:var(--form-checkbox-radio-card-primary-default-text);background:var(--form-checkbox-radio-card-secondary-default-background);border:var(--tedi-borders-01) solid var(--form-checkbox-radio-card-secondary-default-border);border-radius:var(--form-checkbox-radio-card-radius)}.tedi-date-picker__month-year-button:hover{color:var(--form-checkbox-radio-card-secondary-hover-text);background:var(--form-checkbox-radio-card-secondary-hover-background);border-color:var(--form-checkbox-radio-card-secondary-hover-border)}.tedi-date-picker__month-year-button:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-date-picker__month-year-button:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-default-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-default-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-default-border)}.tedi-date-picker__month-year-button--selected{color:var(--form-checkbox-radio-card-secondary-selected-text);background:var(--form-checkbox-radio-card-secondary-selected-background);border-color:var(--form-checkbox-radio-card-secondary-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-selected-border)}.tedi-date-picker__month-year-button--selected:disabled{color:var(--form-checkbox-radio-card-secondary-disabled-selected-text);cursor:not-allowed;background:var(--form-checkbox-radio-card-secondary-disabled-selected-background);border-color:var(--form-checkbox-radio-card-secondary-disabled-selected-border);box-shadow:0 0 0 1px var(--form-checkbox-radio-card-secondary-disabled-selected-border)}\n"] }]
17586
17657
  }], ctorParameters: () => [], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }, { type: i0.Output, args: ["selectedChange"] }], month: [{ type: i0.Input, args: [{ isSignal: true, alias: "month", required: false }] }, { type: i0.Output, args: ["monthChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], disabledMatchers: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabledMatchers", required: false }] }], showNavigation: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNavigation", required: false }] }], monthMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthMode", required: false }] }], yearMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "yearMode", required: false }] }], startYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "startYear", required: false }] }], endYear: [{ type: i0.Input, args: [{ isSignal: true, alias: "endYear", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPlaceholder", required: false }] }], inputState: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputState", required: false }] }], inputSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputSize", required: false }] }], inputDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputDisabled", required: false }] }], allowManualInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowManualInput", required: false }] }], showWeekNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showWeekNumbers", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { isSignal: true }] }], calendarGrid: [{ type: i0.ViewChild, args: ["gridElement", { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: [i0.forwardRef(() => PopoverComponent), { isSignal: true }] }] } });
17587
17658
 
17588
17659
  class NumberFieldComponent {
@@ -18397,7 +18468,7 @@ class SearchComponent {
18397
18468
  useExisting: forwardRef(() => SearchComponent),
18398
18469
  multi: true,
18399
18470
  },
18400
- ], queries: [{ propertyName: "suggestionTemplate", first: true, predicate: SearchSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: SearchFooterTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "suggestionRows", predicate: SearchSuggestionComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-form-field\n class=\"tedi-search__field\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n [size]=\"size()\"\n [icon]=\"fieldIcon()\"\n [clearable]=\"clearable() && !isDisabled()\"\n [showClearOnInteraction]=\"showClearOnInteraction()\"\n>\n @if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n }\n\n <input\n #searchInput\n tedi-text-field\n type=\"text\"\n [attr.role]=\"inputRole()\"\n [attr.aria-autocomplete]=\"ariaAutocomplete()\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n [id]=\"inputId()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"inputAriaLabel()\"\n (valueChange)=\"onInputValue($event)\"\n (clear)=\"onClear()\"\n (focus)=\"onInputFocus()\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n }\n</tedi-form-field>\n\n@if (button(); as btn) {\n <button\n tedi-button\n type=\"button\"\n class=\"tedi-search__button\"\n [variant]=\"btn.variant ?? 'primary'\"\n [size]=\"buttonSize()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"buttonAriaLabel()\"\n (click)=\"emitSearch()\"\n >\n <tedi-icon [name]=\"btn.icon ?? 'search'\" [size]=\"buttonIconSize()\" />\n @if (btn.text) {\n {{ btn.text }}\n }\n </button>\n}\n\n<div\n class=\"tedi-search__announcement sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ announcement() }}\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelVisible()\"\n [cdkConnectedOverlayWidth]=\"panelWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closePanel()\"\n (positionChange)=\"onPositionChange($event)\"\n (attach)=\"onOverlayAttach()\"\n (detach)=\"onOverlayDetach()\"\n>\n <div\n class=\"tedi-search__panel\"\n [class.tedi-search__panel--above]=\"panelAbove()\"\n >\n @if (loading()) {\n <div class=\"tedi-search__panel-status\">\n <tedi-spinner [size]=\"16\" />\n <span tedi-text color=\"tertiary\">{{ resolvedLoadingText() }}</span>\n </div>\n } @else if (hasSuggestions()) {\n <ul class=\"tedi-search__panel-list\" role=\"listbox\" [id]=\"listboxId()\">\n @for (\n suggestion of resolvedSuggestions();\n track suggestion.label + $index;\n let i = $index\n ) {\n <li\n tedi-search-suggestion\n [label]=\"suggestion.label\"\n [description]=\"suggestion.description\"\n [disabled]=\"suggestion.disabled\"\n [query]=\"query()\"\n [custom]=\"!!suggestionTemplate()\"\n [id]=\"optionId(i)\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"selectSuggestion(suggestion)\"\n >\n @if (suggestionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: suggestion.item,\n item: suggestion.item,\n index: i,\n label: suggestion.label,\n description: suggestion.description,\n disabled: suggestion.disabled,\n query: query(),\n }\"\n />\n }\n </li>\n }\n </ul>\n } @else {\n <div class=\"tedi-search__panel-status\">\n <span tedi-text color=\"tertiary\">{{ resolvedNoResultsText() }}</span>\n </div>\n }\n\n @if (footerTemplate(); as footer) {\n <div\n class=\"tedi-search__footer\"\n (keydown)=\"onFooterKeydown($event)\"\n (focusout)=\"onFocusOut($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"footer.template\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:0 0 var(--form-select-area-radius) var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--general-effect-colors-elevation-dropdown-area-drop-shadow)}.tedi-search__panel--above{border-radius:var(--form-select-area-radius) var(--form-select-area-radius) 0 0}.tedi-search__panel-list{min-height:0;padding:0;margin:0;overflow-y:auto;list-style:none}.tedi-search__footer{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--dropdown-item-inner-spacing);align-items:center;padding:var(--card-padding-md-default);background:var(--dropdown-item-default-background);border-top:1px solid var(--card-border-primary)}.tedi-search-footer-actions{display:flex;flex-wrap:wrap;gap:var(--button-gutter-x);justify-content:center}.tedi-search__panel-status{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: SearchSuggestionComponent, selector: "li[tedi-search-suggestion]", inputs: ["label", "description", "query", "custom", "disabled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
18471
+ ], queries: [{ propertyName: "suggestionTemplate", first: true, predicate: SearchSuggestionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: SearchFooterTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "overlayOrigin", first: true, predicate: CdkOverlayOrigin, descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "suggestionRows", predicate: SearchSuggestionComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<tedi-form-field\n class=\"tedi-search__field\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n [size]=\"size()\"\n [icon]=\"fieldIcon()\"\n [clearable]=\"clearable() && !isDisabled()\"\n [showClearOnInteraction]=\"showClearOnInteraction()\"\n>\n @if (label()) {\n <label tedi-label [for]=\"inputId()\">\n {{ label() }}\n </label>\n }\n\n <input\n #searchInput\n tedi-text-field\n type=\"text\"\n [attr.role]=\"inputRole()\"\n [attr.aria-autocomplete]=\"ariaAutocomplete()\"\n [attr.aria-expanded]=\"ariaExpanded()\"\n [attr.aria-controls]=\"ariaControls()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n [id]=\"inputId()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"inputAriaLabel()\"\n (valueChange)=\"onInputValue($event)\"\n (clear)=\"onClear()\"\n (focus)=\"onInputFocus()\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n\n @if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n }\n</tedi-form-field>\n\n@if (button(); as btn) {\n <button\n tedi-button\n type=\"button\"\n class=\"tedi-search__button\"\n [variant]=\"btn.variant ?? 'primary'\"\n [size]=\"buttonSize()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"buttonAriaLabel()\"\n (click)=\"emitSearch()\"\n >\n <tedi-icon [name]=\"btn.icon ?? 'search'\" [size]=\"buttonIconSize()\" />\n @if (btn.text) {\n {{ btn.text }}\n }\n </button>\n}\n\n<div\n class=\"tedi-search__announcement sr-only\"\n role=\"status\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n>\n {{ announcement() }}\n</div>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"panelVisible()\"\n [cdkConnectedOverlayWidth]=\"panelWidth()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions\"\n [cdkConnectedOverlayDisableClose]=\"true\"\n (overlayOutsideClick)=\"closePanel()\"\n (positionChange)=\"onPositionChange($event)\"\n (attach)=\"onOverlayAttach()\"\n (detach)=\"onOverlayDetach()\"\n>\n <div\n class=\"tedi-search__panel\"\n [class.tedi-search__panel--above]=\"panelAbove()\"\n >\n @if (loading()) {\n <div class=\"tedi-search__panel-status\">\n <tedi-spinner [size]=\"16\" />\n <span tedi-text color=\"tertiary\">{{ resolvedLoadingText() }}</span>\n </div>\n } @else if (hasSuggestions()) {\n <ul class=\"tedi-search__panel-list\" role=\"listbox\" [id]=\"listboxId()\">\n @for (\n suggestion of resolvedSuggestions();\n track suggestion.label + $index;\n let i = $index\n ) {\n <li\n tedi-search-suggestion\n [label]=\"suggestion.label\"\n [description]=\"suggestion.description\"\n [disabled]=\"suggestion.disabled\"\n [query]=\"query()\"\n [custom]=\"!!suggestionTemplate()\"\n [id]=\"optionId(i)\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"selectSuggestion(suggestion)\"\n >\n @if (suggestionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"{\n $implicit: suggestion.item,\n item: suggestion.item,\n index: i,\n label: suggestion.label,\n description: suggestion.description,\n disabled: suggestion.disabled,\n query: query(),\n }\"\n />\n }\n </li>\n }\n </ul>\n } @else {\n <div class=\"tedi-search__panel-status\">\n <span tedi-text color=\"tertiary\">{{ resolvedNoResultsText() }}</span>\n </div>\n }\n\n @if (footerTemplate(); as footer) {\n <div\n class=\"tedi-search__footer\"\n (keydown)=\"onFooterKeydown($event)\"\n (focusout)=\"onFocusOut($event)\"\n >\n <ng-container [ngTemplateOutlet]=\"footer.template\" />\n </div>\n }\n </div>\n</ng-template>\n", styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search--has-button .tedi-field-surface{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search__panel{display:flex;flex-direction:column;width:100%;max-height:var(--form-select-area-max-height);overflow:hidden;background:var(--dropdown-item-default-background);border:1px solid var(--card-border-primary);border-radius:0 0 var(--form-select-area-radius) var(--form-select-area-radius);box-shadow:0 1px 5px 0 var(--general-effect-colors-elevation-dropdown-area-drop-shadow)}.tedi-search__panel--above{border-radius:var(--form-select-area-radius) var(--form-select-area-radius) 0 0}.tedi-search__panel-list{min-height:0;padding:0;margin:0;overflow-y:auto;list-style:none}.tedi-search__footer{display:flex;flex:0 0 auto;flex-direction:column;gap:var(--dropdown-item-inner-spacing);align-items:center;padding:var(--card-padding-md-default);background:var(--dropdown-item-default-background);border-top:1px solid var(--card-border-primary)}.tedi-search-footer-actions{display:flex;flex-wrap:wrap;gap:var(--button-gutter-x);justify-content:center}.tedi-search__panel-status{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "showClearOnInteraction", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "size", "invalid", "arrowsHidden", "disabled", "readonly", "readOnly"], outputs: ["valueChange", "clear"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color", "visuallyHidden"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["id", "text", "type", "position"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: SpinnerComponent, selector: "tedi-spinner", inputs: ["size", "color", "label"] }, { kind: "component", type: SearchSuggestionComponent, selector: "li[tedi-search-suggestion]", inputs: ["label", "description", "query", "custom", "disabled"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
18401
18472
  }
18402
18473
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchComponent, decorators: [{
18403
18474
  type: Component,
@@ -19003,6 +19074,28 @@ class TextareaComponent {
19003
19074
  limits.push(this.toCssSize(maxHeight));
19004
19075
  return limits.length === 1 ? limits[0] : `min(${limits.join(", ")})`;
19005
19076
  }, ...(ngDevMode ? [{ debugName: "maxHeightStyle" }] : []));
19077
+ // Native `readonly`, under both the attribute (`readonly`) and the property
19078
+ // (`[readOnly]`) spelling, so a wrapping `tedi-form-field` can hide its clear
19079
+ // button while the value cannot be edited.
19080
+ readOnlyAttribute = input(false, ...(ngDevMode ? [{ debugName: "readOnlyAttribute",
19081
+ // eslint-disable-next-line @angular-eslint/no-input-rename
19082
+ alias: "readonly",
19083
+ transform: booleanAttribute }] : [{
19084
+ // eslint-disable-next-line @angular-eslint/no-input-rename
19085
+ alias: "readonly",
19086
+ transform: booleanAttribute,
19087
+ }]));
19088
+ readOnlyProperty = input(false, ...(ngDevMode ? [{ debugName: "readOnlyProperty",
19089
+ // eslint-disable-next-line @angular-eslint/no-input-rename
19090
+ alias: "readOnly",
19091
+ transform: booleanAttribute }] : [{
19092
+ // eslint-disable-next-line @angular-eslint/no-input-rename
19093
+ alias: "readOnly",
19094
+ transform: booleanAttribute,
19095
+ }]));
19096
+ readOnly = computed(() => this.readOnlyAttribute() || this.readOnlyProperty(), ...(ngDevMode ? [{ debugName: "readOnly" }] : []));
19097
+ /** Textareas take no clear button, even inside a `clearable` form field. */
19098
+ clearButton = false;
19006
19099
  disabled = computed(() => this.formDisabled() || (this.fieldContext?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
19007
19100
  derived = deriveControlState();
19008
19101
  describedBy = controlDescribedBy();
@@ -19066,7 +19159,7 @@ class TextareaComponent {
19066
19159
  this.onTouched();
19067
19160
  }
19068
19161
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
19069
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextareaComponent, isStandalone: true, selector: "textarea[tedi-textarea]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, autoGrow: { classPropertyName: "autoGrow", publicName: "autoGrow", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-textarea--small": "resolvedSize() === 'small'", "class.tedi-textarea--not-resizable": "!resizable()", "class.tedi-textarea--auto-grow": "autoGrow()", "style.height": "heightStyle()", "style.min-height": "minHeightStyle()", "style.max-height": "maxHeightStyle()", "attr.aria-invalid": "invalid() || null", "attr.aria-describedby": "describedBy.attribute()" }, classAttribute: "tedi-textarea" }, providers: [
19162
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextareaComponent, isStandalone: true, selector: "textarea[tedi-textarea]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, invalidInput: { classPropertyName: "invalidInput", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, autoGrow: { classPropertyName: "autoGrow", publicName: "autoGrow", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null }, readOnlyAttribute: { classPropertyName: "readOnlyAttribute", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, readOnlyProperty: { classPropertyName: "readOnlyProperty", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-field-surface": "paintsSurface()", "class.tedi-field-surface--valid": "paintsSurface() && valid()", "class.tedi-textarea--small": "resolvedSize() === 'small'", "class.tedi-textarea--not-resizable": "!resizable()", "class.tedi-textarea--auto-grow": "autoGrow()", "style.height": "heightStyle()", "style.min-height": "minHeightStyle()", "style.max-height": "maxHeightStyle()", "attr.aria-invalid": "invalid() || null", "attr.aria-describedby": "describedBy.attribute()", "readOnly": "readOnly()" }, classAttribute: "tedi-textarea" }, providers: [
19070
19163
  {
19071
19164
  provide: NG_VALUE_ACCESSOR,
19072
19165
  useExisting: forwardRef(() => TextareaComponent),
@@ -19102,10 +19195,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
19102
19195
  "[style.max-height]": "maxHeightStyle()",
19103
19196
  "[attr.aria-invalid]": "invalid() || null",
19104
19197
  "[attr.aria-describedby]": "describedBy.attribute()",
19198
+ "[readOnly]": "readOnly()",
19105
19199
  "(input)": "handleInputChange($event)",
19106
19200
  "(blur)": "handleBlur()",
19107
19201
  }, styles: [".tedi-textarea{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-textarea-min-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;width:100%;padding:var(--_field-padding-y) var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);resize:vertical;outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-textarea::placeholder{color:var(--form-input-text-placeholder)}.tedi-textarea:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-textarea:not(.tedi-field-surface){flex:1;min-width:0}.tedi-textarea--not-resizable{resize:none}.tedi-textarea--auto-grow{field-sizing:content;resize:none}.tedi-textarea:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);min-height:var(--_field-height);padding:calc(var(--_field-padding-y) - var(--tedi-borders-01)) var(--_field-padding-x)}.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-visible{--_field-ring-color: var(--_field-border-color)}.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover{--_field-border-color: var(--form-input-border-hover)}.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active{--_field-border-color: var(--form-input-border-active)}.tedi-textarea.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-visible{--_field-border-color: var(--form-input-border-focus)}.tedi-textarea.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-textarea--small{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-form-field__box:has(>.tedi-textarea){align-items:flex-start;height:auto;min-height:var(--_field-height);padding-block:0;padding-inline:0 var(--form-field-padding-x-md-default)}.tedi-form-field__box:has(>.tedi-textarea) .tedi-form-field__buttons,.tedi-form-field__box:has(>.tedi-textarea) .tedi-form-field__icon{display:flex;align-items:center;height:var(--_field-height)}.tedi-form-field__box>.tedi-textarea{padding-inline-end:calc(var(--form-field-padding-x-md-default) + var(--tedi-form-field-addon-lane));margin-inline-end:calc(-1 * (var(--form-field-padding-x-md-default) + var(--tedi-form-field-addon-lane)))}\n"] }]
19108
- }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], autoGrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoGrow", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }] } });
19202
+ }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], autoGrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoGrow", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], readOnlyAttribute: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], readOnlyProperty: [{ type: i0.Input, args: [{ isSignal: true, alias: "readOnly", required: false }] }] } });
19109
19203
 
19110
19204
  /**
19111
19205
  * Checks if a string is a valid `HH:mm` time (00:00 – 23:59).
@@ -19691,8 +19785,17 @@ class TimeFieldComponent {
19691
19785
  * set here.
19692
19786
  */
19693
19787
  size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
19694
- /** Show a clear button when the field has a value. */
19695
- clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : []));
19788
+ /**
19789
+ * Whether the clear button shows once the field has a value. Falls back to the
19790
+ * wrapping `tedi-form-field`'s `clearable` when not set here — set it on the
19791
+ * wrapper, and use this only for a standalone field.
19792
+ */
19793
+ clearable = input(undefined, ...(ngDevMode ? [{ debugName: "clearable",
19794
+ // Unset stays `undefined` so the wrapper's `clearable` still applies.
19795
+ transform: (v) => (v == null ? undefined : booleanAttribute(v)) }] : [{
19796
+ // Unset stays `undefined` so the wrapper's `clearable` still applies.
19797
+ transform: (v) => (v == null ? undefined : booleanAttribute(v)),
19798
+ }]));
19696
19799
  /** Picker variant. `none` renders just the input with no picker UI — typed input is still normalized on blur. */
19697
19800
  pickerVariant = input("scroll", ...(ngDevMode ? [{ debugName: "pickerVariant" }] : []));
19698
19801
  /**
@@ -19744,7 +19847,11 @@ class TimeFieldComponent {
19744
19847
  this.derived.connect();
19745
19848
  }
19746
19849
  hasValue = computed(() => this.value() !== null && this.value() !== "", ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
19747
- showClear = computed(() => this.hasValue() && this.clearable(), ...(ngDevMode ? [{ debugName: "showClear" }] : []));
19850
+ showClear = computed(() => this.hasValue() && this.clearableResolved(), ...(ngDevMode ? [{ debugName: "showClear" }] : []));
19851
+ /** The clear button sits in the time field's action row, beside the picker. */
19852
+ ownsClearButton = true;
19853
+ /** Own `clearable` wins, then the wrapping `tedi-form-field`'s. */
19854
+ clearableResolved = computed(() => this.clearable() ?? this.fieldContext?.clearable() ?? true, ...(ngDevMode ? [{ debugName: "clearableResolved" }] : []));
19748
19855
  useNativePickerResolved = computed(() => {
19749
19856
  const v = this.useNativePicker();
19750
19857
  return typeof v === "boolean"
@@ -20003,7 +20110,7 @@ class TimeFieldComponent {
20003
20110
  provide: TEDI_FORM_FIELD_CONTROL,
20004
20111
  useExisting: forwardRef(() => TimeFieldComponent),
20005
20112
  },
20006
- ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n <!--\n The field wrapper is the popover anchor + trigger, so the picker matches the\n input width. Button-trigger mode disables clicks on everything but the icon\n (see SCSS); input-trigger mode opens from anywhere in the field.\n -->\n <tedi-popover\n #popover\n class=\"tedi-time-field__popover\"\n [position]=\"popoverPosition()\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <div\n #fieldEl\n tedi-popover-trigger\n [interactive]=\"false\"\n class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n [attr.tabindex]=\"-1\"\n (focus)=\"onFieldFocus($event)\"\n (click)=\"onFieldClick()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [attr.aria-expanded]=\"popoverIsOpen() || null\"\n aria-haspopup=\"dialog\"\n (click)=\"onIconClick()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n </div>\n </div>\n <tedi-popover-content\n class=\"tedi-time-field__popover-content\"\n maxWidth=\"none\"\n >\n <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n </tedi-popover-content>\n </tedi-popover>\n} @else {\n <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n <div\n #fieldEl\n class=\"tedi-time-field__field\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n @if (hasNativePicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openNativePicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else if (hasPicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openPicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else {\n <span\n class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n aria-hidden=\"true\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
20113
+ ], viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["inputElement"], descendants: true, isSignal: true }, { propertyName: "fieldEl", first: true, predicate: ["fieldEl"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "timePicker", first: true, predicate: ["timePicker"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (usePopover()) {\n <!--\n The field wrapper is the popover anchor + trigger, so the picker matches the\n input width. Button-trigger mode disables clicks on everything but the icon\n (see SCSS); input-trigger mode opens from anywhere in the field.\n -->\n <tedi-popover\n #popover\n class=\"tedi-time-field__popover\"\n [position]=\"popoverPosition()\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <div\n #fieldEl\n tedi-popover-trigger\n [interactive]=\"false\"\n class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n [attr.tabindex]=\"-1\"\n (focus)=\"onFieldFocus($event)\"\n (click)=\"onFieldClick()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [attr.aria-expanded]=\"popoverIsOpen() || null\"\n aria-haspopup=\"dialog\"\n (click)=\"onIconClick()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n </div>\n </div>\n <tedi-popover-content\n class=\"tedi-time-field__popover-content\"\n maxWidth=\"none\"\n >\n <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n </tedi-popover-content>\n </tedi-popover>\n} @else {\n <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n <div\n #fieldEl\n class=\"tedi-time-field__field\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n @if (hasNativePicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openNativePicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else if (hasPicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openPicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else {\n <span\n class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n aria-hidden=\"true\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "component", type: TimePickerComponent, selector: "tedi-time-picker", inputs: ["value", "variant", "timeSlots", "columns", "showSlotIndicator", "minuteStep", "disabled", "border", "trapFocus"], outputs: ["valueChange", "closeRequested"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
20007
20114
  }
20008
20115
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TimeFieldComponent, decorators: [{
20009
20116
  type: Component,
@@ -20032,7 +20139,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
20032
20139
  class: "tedi-time-field",
20033
20140
  "[class.tedi-time-field--small]": "resolvedSize() === 'small'",
20034
20141
  "[class.tedi-time-field--large]": "resolvedSize() === 'large'",
20035
- }, template: "@if (usePopover()) {\n <!--\n The field wrapper is the popover anchor + trigger, so the picker matches the\n input width. Button-trigger mode disables clicks on everything but the icon\n (see SCSS); input-trigger mode opens from anywhere in the field.\n -->\n <tedi-popover\n #popover\n class=\"tedi-time-field__popover\"\n [position]=\"popoverPosition()\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <div\n #fieldEl\n tedi-popover-trigger\n [interactive]=\"false\"\n class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n [attr.tabindex]=\"-1\"\n (focus)=\"onFieldFocus($event)\"\n (click)=\"onFieldClick()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [attr.aria-expanded]=\"popoverIsOpen() || null\"\n aria-haspopup=\"dialog\"\n (click)=\"onIconClick()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n </div>\n </div>\n <tedi-popover-content\n class=\"tedi-time-field__popover-content\"\n maxWidth=\"none\"\n >\n <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n </tedi-popover-content>\n </tedi-popover>\n} @else {\n <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n <div\n #fieldEl\n class=\"tedi-time-field__field\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n @if (hasNativePicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openNativePicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else if (hasPicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openPicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else {\n <span\n class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n aria-hidden=\"true\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
20142
+ }, template: "@if (usePopover()) {\n <!--\n The field wrapper is the popover anchor + trigger, so the picker matches the\n input width. Button-trigger mode disables clicks on everything but the icon\n (see SCSS); input-trigger mode opens from anywhere in the field.\n -->\n <tedi-popover\n #popover\n class=\"tedi-time-field__popover\"\n [position]=\"popoverPosition()\"\n [withArrow]=\"false\"\n [preventOverflow]=\"true\"\n >\n <div\n #fieldEl\n tedi-popover-trigger\n [interactive]=\"false\"\n class=\"tedi-time-field__field\"\n [class.tedi-time-field__field--button-trigger]=\"!inputIsTrigger()\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n [attr.tabindex]=\"-1\"\n (focus)=\"onFieldFocus($event)\"\n (click)=\"onFieldClick()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [class.tedi-time-field__icon--open]=\"popoverIsOpen()\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [attr.aria-expanded]=\"popoverIsOpen() || null\"\n aria-haspopup=\"dialog\"\n (click)=\"onIconClick()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n </div>\n </div>\n <tedi-popover-content\n class=\"tedi-time-field__popover-content\"\n maxWidth=\"none\"\n >\n <ng-container *ngTemplateOutlet=\"pickerWheel\" />\n </tedi-popover-content>\n </tedi-popover>\n} @else {\n <!-- No picker / native picker / mobile-modal / disabled: plain field, no popover. -->\n <div\n #fieldEl\n class=\"tedi-time-field__field\"\n [class.tedi-field-surface]=\"paintsSurface()\"\n [class.tedi-field-surface--invalid]=\"paintsSurface() && invalid()\"\n [class.tedi-field-surface--valid]=\"paintsSurface() && valid()\"\n [class.tedi-field-surface--disabled]=\"paintsSurface() && disabled()\"\n >\n <ng-container *ngTemplateOutlet=\"timeInput\" />\n <div class=\"tedi-time-field__actions\">\n <ng-container *ngTemplateOutlet=\"clearButton\" />\n @if (hasNativePicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openNativePicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else if (hasPicker()) {\n <button\n tedi-button\n type=\"button\"\n variant=\"neutral\"\n size=\"small\"\n class=\"tedi-time-field__icon\"\n [attr.aria-label]=\"'time-field.select-time' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"openPicker()\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </button>\n } @else {\n <span\n class=\"tedi-time-field__icon tedi-time-field__icon--static\"\n aria-hidden=\"true\"\n >\n <tedi-icon name=\"schedule\" color=\"inherit\" size=\"inherit\" />\n </span>\n }\n </div>\n </div>\n}\n\n<ng-template #timeInput>\n <input\n #inputElement\n class=\"tedi-time-field__input\"\n inputmode=\"numeric\"\n [type]=\"inputType()\"\n [id]=\"inputId()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"inputValue()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"inputIsTrigger()\"\n [attr.aria-invalid]=\"invalid() || null\"\n (click)=\"onInputClick($event)\"\n (input)=\"handleInput($event)\"\n (blur)=\"handleBlur()\"\n />\n</ng-template>\n\n<ng-template #clearButton>\n @if (showClear()) {\n <button\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n class=\"tedi-time-field__clear\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'time-field.clear' | tediTranslate\"\n [disabled]=\"isDisabled()\"\n (click)=\"onClearClick($event)\"\n ></button>\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n</ng-template>\n\n<ng-template #pickerWheel>\n <tedi-time-picker\n #timePicker\n [value]=\"value()\"\n [variant]=\"customPickerVariant()\"\n [timeSlots]=\"timeSlots()\"\n [columns]=\"columns()\"\n [showSlotIndicator]=\"showSlotIndicator()\"\n [minuteStep]=\"minuteStep()\"\n [trapFocus]=\"true\"\n [style.--tedi-time-picker-dropdown-min-width.px]=\"dropdownMinWidth()\"\n (valueChange)=\"onPickerValueChange($event)\"\n (closeRequested)=\"closePopover()\"\n />\n</ng-template>\n", styles: [".tedi-time-field{display:flex;flex:1;min-width:0}.tedi-time-field--small .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-sm);--_field-height: var(--form-field-height-sm)}.tedi-time-field--large .tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);--_field-height: var(--form-field-height-lg)}.tedi-time-field__popover{display:flex;flex:1;min-width:0}.tedi-time-field__field{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);--_field-height: var(--form-field-height);--_field-border-color: var(--form-input-border-default);--_field-background: var(--form-input-background-default);--_field-ring-color: transparent;display:flex;flex:1;gap:var(--form-field-inner-spacing);align-items:center;min-width:0}.tedi-time-field__field:focus,.tedi-time-field__field:focus-visible{outline:none}.tedi-time-field__field:where(.tedi-field-surface){background:var(--_field-background);border:var(--tedi-borders-01) solid var(--_field-border-color);border-radius:var(--form-field-radius);box-shadow:inset 0 0 0 var(--tedi-borders-01) var(--_field-ring-color);height:var(--_field-height);padding:var(--_field-padding-y) var(--_field-padding-x)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):is([aria-invalid=true],.tedi-field-surface--invalid){--_field-border-color: var(--form-general-feedback-error-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled).tedi-field-surface--valid{--_field-border-color: var(--form-general-feedback-success-border)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:active,textarea:active),.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled):has(input:focus-visible,textarea:focus-visible){--_field-ring-color: var(--_field-border-color)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):hover,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:hover,textarea:hover){--_field-border-color: var(--form-input-border-hover)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):active,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:active,textarea:active){--_field-border-color: var(--form-input-border-active)}.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):focus-within,.tedi-time-field__field.tedi-field-surface:not(:disabled,.tedi-field-surface--disabled,[aria-invalid=true],.tedi-field-surface--invalid,.tedi-field-surface--valid):has(input:focus-visible,textarea:focus-visible){--_field-border-color: var(--form-input-border-focus)}.tedi-time-field__field.tedi-field-surface:is(:disabled,.tedi-field-surface--disabled){--_field-border-color: var(--form-input-border-disabled);--_field-background: var(--form-input-background-disabled);--_field-ring-color: transparent;cursor:not-allowed}.tedi-time-field__field--button-trigger{pointer-events:none}.tedi-time-field__field--button-trigger .tedi-time-field__input,.tedi-time-field__field--button-trigger .tedi-time-field__clear,.tedi-time-field__field--button-trigger .tedi-time-field__icon{pointer-events:auto}.tedi-time-field__input{flex:1;min-width:0;padding-inline-start:1px;margin-inline-start:-1px;font-family:inherit;font-size:var(--body-regular-size);color:var(--form-input-text-filled);outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-time-field__input::placeholder{color:var(--form-input-text-placeholder)}.tedi-time-field__input:disabled{color:var(--form-input-text-disabled);cursor:not-allowed}.tedi-time-field__input::-webkit-calendar-picker-indicator,.tedi-time-field__input::-webkit-inner-spin-button,.tedi-time-field__input::-webkit-outer-spin-button,.tedi-time-field__input::-webkit-clear-button,.tedi-time-field__input::-webkit-list-button{display:none;margin:0;appearance:none}.tedi-time-field__actions{display:flex;flex-shrink:0;gap:var(--layout-grid-gutters-04);align-items:center;align-self:center;justify-content:center}.tedi-time-field__clear{flex-shrink:0}.tedi-time-field__clear:disabled{cursor:not-allowed}.tedi-time-field__popover-content.tedi-popover-content{padding:0}.tedi-time-field .tedi-time-field__icon{flex-shrink:0;--button-sm-icon-size: var(--form-field-button-height-sm);width:var(--button-sm-icon-size);height:var(--button-sm-icon-size);font-size:1.125rem;border-radius:var(--button-radius-sm)}@media(max-width:47.98rem){.tedi-time-field .tedi-time-field__icon{--button-sm-icon-size: var(--form-field-button-height)}}.tedi-time-field .tedi-time-field__icon:disabled{cursor:not-allowed}.tedi-time-field .tedi-time-field__icon--open:not(:disabled),.tedi-time-field .tedi-time-field__icon--open:not(:disabled):hover,.tedi-time-field .tedi-time-field__icon--open:not(:disabled):active{color:var(--_btn-active-text);background:var(--_btn-active-bg);border-color:var(--_btn-active-border)}.tedi-time-field .tedi-time-field__icon--static{display:inline-flex;align-items:center;justify-content:center;color:var(--form-input-text-placeholder)}\n"] }]
20036
20143
  }], ctorParameters: () => [], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], invalidInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], disabledInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], pickerVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerVariant", required: false }] }], useNativePicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "useNativePicker", required: false }] }], pickerTrigger: [{ type: i0.Input, args: [{ isSignal: true, alias: "pickerTrigger", required: false }] }], closeOnSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnSelect", required: false }] }], timeSlots: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeSlots", required: false }] }], columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], showSlotIndicator: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSlotIndicator", required: false }] }], minuteStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "minuteStep", required: false }] }], modal: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal", required: false }] }], fullscreen: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullscreen", required: false }] }], inputElement: [{ type: i0.ViewChild, args: ["inputElement", { isSignal: true }] }], fieldEl: [{ type: i0.ViewChild, args: ["fieldEl", { isSignal: true }] }], popover: [{ type: i0.ViewChild, args: ["popover", { isSignal: true }] }], timePicker: [{ type: i0.ViewChild, args: ["timePicker", { isSignal: true }] }] } });
20037
20144
 
20038
20145
  class ProgressBarComponent {