@gravionlabs/helix-ui 22.1.28 → 22.1.30

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.
package/README.md CHANGED
@@ -1,8 +1,8 @@
1
1
  # @gravionlabs/helix-ui
2
2
 
3
3
  Vanilla Angular components on the Helix design tokens: standalone, signal-based, plain CSS, no runtime
4
- styling engine, no dependency on `@gravionlabs/helix-core`. It is the long-term replacement of the vendored
5
- PrimeNG fork (see [ADR 0001](../../docs/adr/0001-styling-foundation.md), epic #523).
4
+ styling engine. It replaced the vendored PrimeNG fork `@gravionlabs/helix-core`
5
+ (see [ADR 0001](../../docs/adr/0001-styling-foundation.md) and [ADR 0002](../../docs/adr/0002-retire-helix-core.md)).
6
6
 
7
7
  ## Install
8
8
 
@@ -13,7 +13,7 @@ npm install @gravionlabs/helix-ui
13
13
  ```css
14
14
  /* the components */
15
15
  @import "@gravionlabs/helix-ui/styles.css";
16
- /* the tokens the components read; load them in every app, also with the helix-core theme engine */
16
+ /* the tokens the components read; load them in every app */
17
17
  @import "@gravionlabs/helix-ui/tokens.css";
18
18
  ```
19
19
 
@@ -74,9 +74,7 @@ Dark mode: tokens switch under the `app-dark` class on `<html>`, as in `helix-sh
74
74
  | `HxSelectButton` | `hx-select-button` | single or multiple, all three forms APIs |
75
75
  | `HxSwitch` | `input[hx-switch]` | native checkbox with `role="switch"` |
76
76
 
77
- Selectors, inputs and classes use the prefix `hx` (`hx-button`), so they never clash with `helix-core`'s `h-`
78
- in an app that uses both while migrating. Both libraries read the same `--h-*` tokens, so a page mixes them
79
- without a visible seam.
77
+ Selectors, inputs and classes use the prefix `hx` (`hx-button`); the custom properties keep the prefix `--h-`.
80
78
 
81
79
  ## Rules of this package
82
80
 
@@ -844,7 +844,7 @@ var HxAutoComplete = class HxAutoComplete {
844
844
  isSignal: true
845
845
  }],
846
846
  ngImport: i0,
847
- template: "<div class=\"hx-auto-complete-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n @if (multiple()) {\n @for (item of chips(); track $index) {\n <span class=\"hx-auto-complete-chip\">\n <span>{{ item.label }}</span>\n <button\n type=\"button\"\n class=\"hx-auto-complete-chip-remove\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Remove ' + item.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeChip($index)\"\n >\n <span class=\"hx-auto-complete-remove-icon\" aria-hidden=\"true\"></span>\n </button>\n </span>\n }\n }\n <input\n #field\n type=\"text\"\n class=\"hx-auto-complete-input\"\n role=\"combobox\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n [id]=\"inputId() ?? null\"\n [placeholder]=\"multiple() && chips().length ? '' : placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"inputText()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-activedescendant]=\"activeId()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n</div>\n@if (dropdown()) {\n <button\n type=\"button\"\n class=\"hx-auto-complete-dropdown\"\n tabindex=\"-1\"\n aria-label=\"Show suggestions\"\n [disabled]=\"isDisabled()\"\n (click)=\"showAll()\"\n >\n <span class=\"hx-auto-complete-chevron\" aria-hidden=\"true\"></span>\n </button>\n}\n<span class=\"hx-auto-complete-status\" role=\"status\" aria-live=\"polite\">{{ status() }}</span>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-auto-complete-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (detach)=\"open.set(false)\"\n>\n <div class=\"hx-auto-complete-panel\">\n <div class=\"hx-auto-complete-list\" role=\"listbox\" [id]=\"panelId\" [attr.aria-multiselectable]=\"multiple() ? 'true' : null\" [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\">\n @for (item of items(); track $index) {\n <div\n class=\"hx-auto-complete-option\"\n role=\"option\"\n [id]=\"optionId($index)\"\n [class.hx-auto-complete-option-active]=\"$index === active()\"\n [attr.aria-selected]=\"isSelected(item)\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"choose(item)\"\n (mousemove)=\"active.set($index)\"\n >\n {{ item.label }}\n </div>\n } @empty {\n <div class=\"hx-auto-complete-empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </div>\n</ng-template>\n",
847
+ template: "<div class=\"hx-auto-complete-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n @if (multiple()) {\n @for (item of chips(); track $index) {\n <span class=\"hx-auto-complete-chip\">\n <span>{{ item.label }}</span>\n <button\n type=\"button\"\n class=\"hx-auto-complete-chip-remove\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Remove ' + item.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeChip($index)\"\n >\n <span class=\"hx-auto-complete-remove-icon\" aria-hidden=\"true\"></span>\n </button>\n </span>\n }\n }\n <input\n #field\n type=\"text\"\n class=\"hx-auto-complete-input\"\n role=\"combobox\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"inputId() ?? null\"\n [placeholder]=\"multiple() && chips().length ? '' : placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"inputText()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-activedescendant]=\"activeId()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n</div>\n@if (dropdown()) {\n <button\n type=\"button\"\n class=\"hx-auto-complete-dropdown\"\n tabindex=\"-1\"\n aria-label=\"Show suggestions\"\n [disabled]=\"isDisabled()\"\n (click)=\"showAll()\"\n >\n <span class=\"hx-auto-complete-chevron\" aria-hidden=\"true\"></span>\n </button>\n}\n<span class=\"hx-auto-complete-status\" role=\"status\" aria-live=\"polite\">{{ status() }}</span>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-auto-complete-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (detach)=\"open.set(false)\"\n>\n <div class=\"hx-auto-complete-panel\">\n <div class=\"hx-auto-complete-list\" role=\"listbox\" [id]=\"panelId\" [attr.aria-multiselectable]=\"multiple() ? 'true' : null\" [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\">\n @for (item of items(); track $index) {\n <div\n class=\"hx-auto-complete-option\"\n role=\"option\"\n [id]=\"optionId($index)\"\n [class.hx-auto-complete-option-active]=\"$index === active()\"\n [attr.aria-selected]=\"isSelected(item)\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"choose(item)\"\n (mousemove)=\"active.set($index)\"\n >\n {{ item.label }}\n </div>\n } @empty {\n <div class=\"hx-auto-complete-empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </div>\n</ng-template>\n",
848
848
  dependencies: [{
849
849
  kind: "directive",
850
850
  type: CdkConnectedOverlay,
@@ -921,7 +921,7 @@ i0.ɵɵngDeclareClassMetadata({
921
921
  "[class.hx-auto-complete-has-dropdown]": "dropdown()",
922
922
  "[class.hx-filled]": "filled()"
923
923
  },
924
- template: "<div class=\"hx-auto-complete-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n @if (multiple()) {\n @for (item of chips(); track $index) {\n <span class=\"hx-auto-complete-chip\">\n <span>{{ item.label }}</span>\n <button\n type=\"button\"\n class=\"hx-auto-complete-chip-remove\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Remove ' + item.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeChip($index)\"\n >\n <span class=\"hx-auto-complete-remove-icon\" aria-hidden=\"true\"></span>\n </button>\n </span>\n }\n }\n <input\n #field\n type=\"text\"\n class=\"hx-auto-complete-input\"\n role=\"combobox\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n [id]=\"inputId() ?? null\"\n [placeholder]=\"multiple() && chips().length ? '' : placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"inputText()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-activedescendant]=\"activeId()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n</div>\n@if (dropdown()) {\n <button\n type=\"button\"\n class=\"hx-auto-complete-dropdown\"\n tabindex=\"-1\"\n aria-label=\"Show suggestions\"\n [disabled]=\"isDisabled()\"\n (click)=\"showAll()\"\n >\n <span class=\"hx-auto-complete-chevron\" aria-hidden=\"true\"></span>\n </button>\n}\n<span class=\"hx-auto-complete-status\" role=\"status\" aria-live=\"polite\">{{ status() }}</span>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-auto-complete-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (detach)=\"open.set(false)\"\n>\n <div class=\"hx-auto-complete-panel\">\n <div class=\"hx-auto-complete-list\" role=\"listbox\" [id]=\"panelId\" [attr.aria-multiselectable]=\"multiple() ? 'true' : null\" [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\">\n @for (item of items(); track $index) {\n <div\n class=\"hx-auto-complete-option\"\n role=\"option\"\n [id]=\"optionId($index)\"\n [class.hx-auto-complete-option-active]=\"$index === active()\"\n [attr.aria-selected]=\"isSelected(item)\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"choose(item)\"\n (mousemove)=\"active.set($index)\"\n >\n {{ item.label }}\n </div>\n } @empty {\n <div class=\"hx-auto-complete-empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </div>\n</ng-template>\n"
924
+ template: "<div class=\"hx-auto-complete-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n @if (multiple()) {\n @for (item of chips(); track $index) {\n <span class=\"hx-auto-complete-chip\">\n <span>{{ item.label }}</span>\n <button\n type=\"button\"\n class=\"hx-auto-complete-chip-remove\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Remove ' + item.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeChip($index)\"\n >\n <span class=\"hx-auto-complete-remove-icon\" aria-hidden=\"true\"></span>\n </button>\n </span>\n }\n }\n <input\n #field\n type=\"text\"\n class=\"hx-auto-complete-input\"\n role=\"combobox\"\n autocomplete=\"off\"\n aria-autocomplete=\"list\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"inputId() ?? null\"\n [placeholder]=\"multiple() && chips().length ? '' : placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"inputText()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-activedescendant]=\"activeId()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (input)=\"onInput($event)\"\n (keydown)=\"onKeydown($event)\"\n (blur)=\"onBlur()\"\n />\n</div>\n@if (dropdown()) {\n <button\n type=\"button\"\n class=\"hx-auto-complete-dropdown\"\n tabindex=\"-1\"\n aria-label=\"Show suggestions\"\n [disabled]=\"isDisabled()\"\n (click)=\"showAll()\"\n >\n <span class=\"hx-auto-complete-chevron\" aria-hidden=\"true\"></span>\n </button>\n}\n<span class=\"hx-auto-complete-status\" role=\"status\" aria-live=\"polite\">{{ status() }}</span>\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-auto-complete-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (detach)=\"open.set(false)\"\n>\n <div class=\"hx-auto-complete-panel\">\n <div class=\"hx-auto-complete-list\" role=\"listbox\" [id]=\"panelId\" [attr.aria-multiselectable]=\"multiple() ? 'true' : null\" [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\">\n @for (item of items(); track $index) {\n <div\n class=\"hx-auto-complete-option\"\n role=\"option\"\n [id]=\"optionId($index)\"\n [class.hx-auto-complete-option-active]=\"$index === active()\"\n [attr.aria-selected]=\"isSelected(item)\"\n [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"choose(item)\"\n (mousemove)=\"active.set($index)\"\n >\n {{ item.label }}\n </div>\n } @empty {\n <div class=\"hx-auto-complete-empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </div>\n</ng-template>\n"
925
925
  }]
926
926
  }],
927
927
  ctorParameters: () => [],
@@ -4785,7 +4785,7 @@ var HxDatePicker = class HxDatePicker {
4785
4785
  isSignal: true
4786
4786
  }],
4787
4787
  ngImport: i0,
4788
- template: "@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"calendar\" />\n} @else {\n <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n <input\n #field\n type=\"text\"\n class=\"hx-date-picker-input\"\n autocomplete=\"off\"\n aria-haspopup=\"dialog\"\n [id]=\"inputId() ?? null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"text()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? popupId : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (input)=\"onTyping($event)\"\n (change)=\"commitTyping()\"\n (click)=\"show()\"\n (keydown)=\"onFieldKeydown($event)\"\n />\n @if (showIcon()) {\n <button\n type=\"button\"\n class=\"hx-date-picker-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-label]=\"chooseLabel()\"\n [attr.aria-expanded]=\"open()\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n </button>\n }\n </div>\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n (attach)=\"onAttach()\"\n (detach)=\"open.set(false)\"\n >\n <div\n class=\"hx-date-picker-popup\"\n role=\"dialog\"\n aria-modal=\"false\"\n [id]=\"popupId\"\n [attr.aria-label]=\"ariaLabel() ?? 'Choose date'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n >\n <ng-container [ngTemplateOutlet]=\"calendar\" />\n @if (showButtonBar()) {\n <div class=\"hx-date-picker-buttonbar\">\n <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n </div>\n }\n </div>\n </ng-template>\n}\n\n<ng-template #calendar>\n<div\n class=\"hx-date-picker-panel\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel() ?? 'Calendar'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (focusout)=\"onFocusOut($event)\"\n>\n <div class=\"hx-date-picker-header\">\n <button\n type=\"button\"\n class=\"hx-date-picker-nav hx-date-picker-prev\"\n [attr.aria-label]=\"view() === 'day' ? 'Previous month' : view() === 'month' ? 'Previous year' : 'Previous years'\"\n [disabled]=\"isDisabled()\"\n (click)=\"step(-1)\"\n >\n <span class=\"hx-date-picker-prev-icon\" aria-hidden=\"true\"></span>\n </button>\n <div class=\"hx-date-picker-title\" [id]=\"titleId\" aria-live=\"polite\">\n @switch (view()) {\n @case ('day') {\n <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('month')\">{{ monthName() }}</button>\n <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n }\n @case ('month') {\n <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n }\n @default {\n <span class=\"hx-date-picker-title-text\">{{ decade()[0] }} – {{ decade()[11] }}</span>\n }\n }\n </div>\n <button\n type=\"button\"\n class=\"hx-date-picker-nav hx-date-picker-next\"\n [attr.aria-label]=\"view() === 'day' ? 'Next month' : view() === 'month' ? 'Next year' : 'Next years'\"\n [disabled]=\"isDisabled()\"\n (click)=\"step(1)\"\n >\n <span class=\"hx-date-picker-next-icon\" aria-hidden=\"true\"></span>\n </button>\n </div>\n\n @switch (view()) {\n @case ('day') {\n <table class=\"hx-date-picker-grid\" role=\"grid\" [attr.aria-labelledby]=\"titleId\" [attr.aria-multiselectable]=\"selectionMode() !== 'single' ? 'true' : null\">\n <thead>\n <tr>\n @for (day of weekdays(); track $index) {\n <th scope=\"col\" class=\"hx-date-picker-weekday\" [attr.abbr]=\"day.long\">{{ day.short }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of weeks(); track $index) {\n <tr>\n @for (cell of row; track $index) {\n @if (cell) {\n <td\n role=\"gridcell\"\n class=\"hx-date-picker-cell\"\n [attr.aria-selected]=\"isSelected(cell)\"\n >\n <button\n type=\"button\"\n class=\"hx-date-picker-date\"\n [class.hx-date-picker-date-selected]=\"isSelected(cell)\"\n [class.hx-date-picker-date-in-range]=\"isInRange(cell)\"\n [class.hx-date-picker-date-today]=\"isToday(cell)\"\n [attr.data-date]=\"dateKey(cell)\"\n [attr.tabindex]=\"isFocusTarget(cell) ? 0 : -1\"\n [attr.aria-label]=\"dayLabel(cell)\"\n [attr.aria-current]=\"isToday(cell) ? 'date' : null\"\n [attr.aria-disabled]=\"isDateDisabled(cell) ? 'true' : null\"\n [disabled]=\"isDisabled()\"\n (click)=\"pick(cell)\"\n (keydown)=\"onDayKeydown($event, cell)\"\n >\n {{ cell.getDate() }}\n </button>\n </td>\n } @else {\n <td class=\"hx-date-picker-cell hx-date-picker-cell-empty\" role=\"gridcell\"></td>\n }\n }\n </tr>\n }\n </tbody>\n </table>\n }\n @case ('month') {\n <div class=\"hx-date-picker-months\">\n @for (name of monthNames(); track $index) {\n <button\n type=\"button\"\n class=\"hx-date-picker-month\"\n [class.hx-date-picker-month-selected]=\"$index === focusedDate().getMonth() && viewYear() === focusedDate().getFullYear()\"\n [disabled]=\"isDisabled()\"\n (click)=\"chooseMonth($index)\"\n >\n {{ name }}\n </button>\n }\n </div>\n }\n @default {\n <div class=\"hx-date-picker-years\">\n @for (year of decade(); track year) {\n <button\n type=\"button\"\n class=\"hx-date-picker-year\"\n [class.hx-date-picker-year-selected]=\"year === focusedDate().getFullYear()\"\n [disabled]=\"isDisabled()\"\n (click)=\"chooseYear(year)\"\n >\n {{ year }}\n </button>\n }\n </div>\n }\n }\n</div>\n</ng-template>\n",
4788
+ template: "@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"calendar\" />\n} @else {\n <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n <input\n #field\n type=\"text\"\n class=\"hx-date-picker-input\"\n autocomplete=\"off\"\n aria-haspopup=\"dialog\"\n [attr.id]=\"inputId() ?? null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"text()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? popupId : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (input)=\"onTyping($event)\"\n (change)=\"commitTyping()\"\n (click)=\"show()\"\n (keydown)=\"onFieldKeydown($event)\"\n />\n @if (showIcon()) {\n <button\n type=\"button\"\n class=\"hx-date-picker-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-label]=\"chooseLabel()\"\n [attr.aria-expanded]=\"open()\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n </button>\n }\n </div>\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n (attach)=\"onAttach()\"\n (detach)=\"open.set(false)\"\n >\n <div\n class=\"hx-date-picker-popup\"\n role=\"dialog\"\n aria-modal=\"false\"\n [id]=\"popupId\"\n [attr.aria-label]=\"ariaLabel() ?? 'Choose date'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n >\n <ng-container [ngTemplateOutlet]=\"calendar\" />\n @if (showButtonBar()) {\n <div class=\"hx-date-picker-buttonbar\">\n <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n </div>\n }\n </div>\n </ng-template>\n}\n\n<ng-template #calendar>\n<div\n class=\"hx-date-picker-panel\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel() ?? 'Calendar'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (focusout)=\"onFocusOut($event)\"\n>\n <div class=\"hx-date-picker-header\">\n <button\n type=\"button\"\n class=\"hx-date-picker-nav hx-date-picker-prev\"\n [attr.aria-label]=\"view() === 'day' ? 'Previous month' : view() === 'month' ? 'Previous year' : 'Previous years'\"\n [disabled]=\"isDisabled()\"\n (click)=\"step(-1)\"\n >\n <span class=\"hx-date-picker-prev-icon\" aria-hidden=\"true\"></span>\n </button>\n <div class=\"hx-date-picker-title\" [id]=\"titleId\" aria-live=\"polite\">\n @switch (view()) {\n @case ('day') {\n <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('month')\">{{ monthName() }}</button>\n <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n }\n @case ('month') {\n <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n }\n @default {\n <span class=\"hx-date-picker-title-text\">{{ decade()[0] }} – {{ decade()[11] }}</span>\n }\n }\n </div>\n <button\n type=\"button\"\n class=\"hx-date-picker-nav hx-date-picker-next\"\n [attr.aria-label]=\"view() === 'day' ? 'Next month' : view() === 'month' ? 'Next year' : 'Next years'\"\n [disabled]=\"isDisabled()\"\n (click)=\"step(1)\"\n >\n <span class=\"hx-date-picker-next-icon\" aria-hidden=\"true\"></span>\n </button>\n </div>\n\n @switch (view()) {\n @case ('day') {\n <table class=\"hx-date-picker-grid\" role=\"grid\" [attr.aria-labelledby]=\"titleId\" [attr.aria-multiselectable]=\"selectionMode() !== 'single' ? 'true' : null\">\n <thead>\n <tr>\n @for (day of weekdays(); track $index) {\n <th scope=\"col\" class=\"hx-date-picker-weekday\" [attr.abbr]=\"day.long\">{{ day.short }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of weeks(); track $index) {\n <tr>\n @for (cell of row; track $index) {\n @if (cell) {\n <td\n role=\"gridcell\"\n class=\"hx-date-picker-cell\"\n [attr.aria-selected]=\"isSelected(cell)\"\n >\n <button\n type=\"button\"\n class=\"hx-date-picker-date\"\n [class.hx-date-picker-date-selected]=\"isSelected(cell)\"\n [class.hx-date-picker-date-in-range]=\"isInRange(cell)\"\n [class.hx-date-picker-date-today]=\"isToday(cell)\"\n [attr.data-date]=\"dateKey(cell)\"\n [attr.tabindex]=\"isFocusTarget(cell) ? 0 : -1\"\n [attr.aria-label]=\"dayLabel(cell)\"\n [attr.aria-current]=\"isToday(cell) ? 'date' : null\"\n [attr.aria-disabled]=\"isDateDisabled(cell) ? 'true' : null\"\n [disabled]=\"isDisabled()\"\n (click)=\"pick(cell)\"\n (keydown)=\"onDayKeydown($event, cell)\"\n >\n {{ cell.getDate() }}\n </button>\n </td>\n } @else {\n <td class=\"hx-date-picker-cell hx-date-picker-cell-empty\" role=\"gridcell\"></td>\n }\n }\n </tr>\n }\n </tbody>\n </table>\n }\n @case ('month') {\n <div class=\"hx-date-picker-months\">\n @for (name of monthNames(); track $index) {\n <button\n type=\"button\"\n class=\"hx-date-picker-month\"\n [class.hx-date-picker-month-selected]=\"$index === focusedDate().getMonth() && viewYear() === focusedDate().getFullYear()\"\n [disabled]=\"isDisabled()\"\n (click)=\"chooseMonth($index)\"\n >\n {{ name }}\n </button>\n }\n </div>\n }\n @default {\n <div class=\"hx-date-picker-years\">\n @for (year of decade(); track year) {\n <button\n type=\"button\"\n class=\"hx-date-picker-year\"\n [class.hx-date-picker-year-selected]=\"year === focusedDate().getFullYear()\"\n [disabled]=\"isDisabled()\"\n (click)=\"chooseYear(year)\"\n >\n {{ year }}\n </button>\n }\n </div>\n }\n }\n</div>\n</ng-template>\n",
4789
4789
  dependencies: [
4790
4790
  {
4791
4791
  kind: "directive",
@@ -4878,7 +4878,7 @@ i0.ɵɵngDeclareClassMetadata({
4878
4878
  "[class.hx-filled]": "!inline() && text() !== \"\"",
4879
4879
  "(focusout)": "onHostFocusOut($event)"
4880
4880
  },
4881
- template: "@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"calendar\" />\n} @else {\n <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n <input\n #field\n type=\"text\"\n class=\"hx-date-picker-input\"\n autocomplete=\"off\"\n aria-haspopup=\"dialog\"\n [id]=\"inputId() ?? null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"text()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? popupId : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (input)=\"onTyping($event)\"\n (change)=\"commitTyping()\"\n (click)=\"show()\"\n (keydown)=\"onFieldKeydown($event)\"\n />\n @if (showIcon()) {\n <button\n type=\"button\"\n class=\"hx-date-picker-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-label]=\"chooseLabel()\"\n [attr.aria-expanded]=\"open()\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n </button>\n }\n </div>\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n (attach)=\"onAttach()\"\n (detach)=\"open.set(false)\"\n >\n <div\n class=\"hx-date-picker-popup\"\n role=\"dialog\"\n aria-modal=\"false\"\n [id]=\"popupId\"\n [attr.aria-label]=\"ariaLabel() ?? 'Choose date'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n >\n <ng-container [ngTemplateOutlet]=\"calendar\" />\n @if (showButtonBar()) {\n <div class=\"hx-date-picker-buttonbar\">\n <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n </div>\n }\n </div>\n </ng-template>\n}\n\n<ng-template #calendar>\n<div\n class=\"hx-date-picker-panel\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel() ?? 'Calendar'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (focusout)=\"onFocusOut($event)\"\n>\n <div class=\"hx-date-picker-header\">\n <button\n type=\"button\"\n class=\"hx-date-picker-nav hx-date-picker-prev\"\n [attr.aria-label]=\"view() === 'day' ? 'Previous month' : view() === 'month' ? 'Previous year' : 'Previous years'\"\n [disabled]=\"isDisabled()\"\n (click)=\"step(-1)\"\n >\n <span class=\"hx-date-picker-prev-icon\" aria-hidden=\"true\"></span>\n </button>\n <div class=\"hx-date-picker-title\" [id]=\"titleId\" aria-live=\"polite\">\n @switch (view()) {\n @case ('day') {\n <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('month')\">{{ monthName() }}</button>\n <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n }\n @case ('month') {\n <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n }\n @default {\n <span class=\"hx-date-picker-title-text\">{{ decade()[0] }} – {{ decade()[11] }}</span>\n }\n }\n </div>\n <button\n type=\"button\"\n class=\"hx-date-picker-nav hx-date-picker-next\"\n [attr.aria-label]=\"view() === 'day' ? 'Next month' : view() === 'month' ? 'Next year' : 'Next years'\"\n [disabled]=\"isDisabled()\"\n (click)=\"step(1)\"\n >\n <span class=\"hx-date-picker-next-icon\" aria-hidden=\"true\"></span>\n </button>\n </div>\n\n @switch (view()) {\n @case ('day') {\n <table class=\"hx-date-picker-grid\" role=\"grid\" [attr.aria-labelledby]=\"titleId\" [attr.aria-multiselectable]=\"selectionMode() !== 'single' ? 'true' : null\">\n <thead>\n <tr>\n @for (day of weekdays(); track $index) {\n <th scope=\"col\" class=\"hx-date-picker-weekday\" [attr.abbr]=\"day.long\">{{ day.short }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of weeks(); track $index) {\n <tr>\n @for (cell of row; track $index) {\n @if (cell) {\n <td\n role=\"gridcell\"\n class=\"hx-date-picker-cell\"\n [attr.aria-selected]=\"isSelected(cell)\"\n >\n <button\n type=\"button\"\n class=\"hx-date-picker-date\"\n [class.hx-date-picker-date-selected]=\"isSelected(cell)\"\n [class.hx-date-picker-date-in-range]=\"isInRange(cell)\"\n [class.hx-date-picker-date-today]=\"isToday(cell)\"\n [attr.data-date]=\"dateKey(cell)\"\n [attr.tabindex]=\"isFocusTarget(cell) ? 0 : -1\"\n [attr.aria-label]=\"dayLabel(cell)\"\n [attr.aria-current]=\"isToday(cell) ? 'date' : null\"\n [attr.aria-disabled]=\"isDateDisabled(cell) ? 'true' : null\"\n [disabled]=\"isDisabled()\"\n (click)=\"pick(cell)\"\n (keydown)=\"onDayKeydown($event, cell)\"\n >\n {{ cell.getDate() }}\n </button>\n </td>\n } @else {\n <td class=\"hx-date-picker-cell hx-date-picker-cell-empty\" role=\"gridcell\"></td>\n }\n }\n </tr>\n }\n </tbody>\n </table>\n }\n @case ('month') {\n <div class=\"hx-date-picker-months\">\n @for (name of monthNames(); track $index) {\n <button\n type=\"button\"\n class=\"hx-date-picker-month\"\n [class.hx-date-picker-month-selected]=\"$index === focusedDate().getMonth() && viewYear() === focusedDate().getFullYear()\"\n [disabled]=\"isDisabled()\"\n (click)=\"chooseMonth($index)\"\n >\n {{ name }}\n </button>\n }\n </div>\n }\n @default {\n <div class=\"hx-date-picker-years\">\n @for (year of decade(); track year) {\n <button\n type=\"button\"\n class=\"hx-date-picker-year\"\n [class.hx-date-picker-year-selected]=\"year === focusedDate().getFullYear()\"\n [disabled]=\"isDisabled()\"\n (click)=\"chooseYear(year)\"\n >\n {{ year }}\n </button>\n }\n </div>\n }\n }\n</div>\n</ng-template>\n"
4881
+ template: "@if (inline()) {\n <ng-container [ngTemplateOutlet]=\"calendar\" />\n} @else {\n <div class=\"hx-date-picker-field\" cdkOverlayOrigin #origin=\"cdkOverlayOrigin\">\n <input\n #field\n type=\"text\"\n class=\"hx-date-picker-input\"\n autocomplete=\"off\"\n aria-haspopup=\"dialog\"\n [attr.id]=\"inputId() ?? null\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [value]=\"text()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? popupId : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (input)=\"onTyping($event)\"\n (change)=\"commitTyping()\"\n (click)=\"show()\"\n (keydown)=\"onFieldKeydown($event)\"\n />\n @if (showIcon()) {\n <button\n type=\"button\"\n class=\"hx-date-picker-trigger\"\n aria-haspopup=\"dialog\"\n [attr.aria-label]=\"chooseLabel()\"\n [attr.aria-expanded]=\"open()\"\n [disabled]=\"isDisabled()\"\n (click)=\"toggle()\"\n >\n <span class=\"hx-date-picker-trigger-icon\" aria-hidden=\"true\"></span>\n </button>\n }\n </div>\n <ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-date-picker-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n (attach)=\"onAttach()\"\n (detach)=\"open.set(false)\"\n >\n <div\n class=\"hx-date-picker-popup\"\n role=\"dialog\"\n aria-modal=\"false\"\n [id]=\"popupId\"\n [attr.aria-label]=\"ariaLabel() ?? 'Choose date'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n >\n <ng-container [ngTemplateOutlet]=\"calendar\" />\n @if (showButtonBar()) {\n <div class=\"hx-date-picker-buttonbar\">\n <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"selectToday()\">{{ todayLabel() }}</button>\n <button type=\"button\" class=\"hx-date-picker-button\" (click)=\"clear()\">{{ clearLabel() }}</button>\n </div>\n }\n </div>\n </ng-template>\n}\n\n<ng-template #calendar>\n<div\n class=\"hx-date-picker-panel\"\n role=\"group\"\n [attr.aria-label]=\"ariaLabel() ?? 'Calendar'\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (focusout)=\"onFocusOut($event)\"\n>\n <div class=\"hx-date-picker-header\">\n <button\n type=\"button\"\n class=\"hx-date-picker-nav hx-date-picker-prev\"\n [attr.aria-label]=\"view() === 'day' ? 'Previous month' : view() === 'month' ? 'Previous year' : 'Previous years'\"\n [disabled]=\"isDisabled()\"\n (click)=\"step(-1)\"\n >\n <span class=\"hx-date-picker-prev-icon\" aria-hidden=\"true\"></span>\n </button>\n <div class=\"hx-date-picker-title\" [id]=\"titleId\" aria-live=\"polite\">\n @switch (view()) {\n @case ('day') {\n <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('month')\">{{ monthName() }}</button>\n <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n }\n @case ('month') {\n <button type=\"button\" class=\"hx-date-picker-title-button\" [disabled]=\"isDisabled()\" (click)=\"view.set('year')\">{{ viewYear() }}</button>\n }\n @default {\n <span class=\"hx-date-picker-title-text\">{{ decade()[0] }} – {{ decade()[11] }}</span>\n }\n }\n </div>\n <button\n type=\"button\"\n class=\"hx-date-picker-nav hx-date-picker-next\"\n [attr.aria-label]=\"view() === 'day' ? 'Next month' : view() === 'month' ? 'Next year' : 'Next years'\"\n [disabled]=\"isDisabled()\"\n (click)=\"step(1)\"\n >\n <span class=\"hx-date-picker-next-icon\" aria-hidden=\"true\"></span>\n </button>\n </div>\n\n @switch (view()) {\n @case ('day') {\n <table class=\"hx-date-picker-grid\" role=\"grid\" [attr.aria-labelledby]=\"titleId\" [attr.aria-multiselectable]=\"selectionMode() !== 'single' ? 'true' : null\">\n <thead>\n <tr>\n @for (day of weekdays(); track $index) {\n <th scope=\"col\" class=\"hx-date-picker-weekday\" [attr.abbr]=\"day.long\">{{ day.short }}</th>\n }\n </tr>\n </thead>\n <tbody>\n @for (row of weeks(); track $index) {\n <tr>\n @for (cell of row; track $index) {\n @if (cell) {\n <td\n role=\"gridcell\"\n class=\"hx-date-picker-cell\"\n [attr.aria-selected]=\"isSelected(cell)\"\n >\n <button\n type=\"button\"\n class=\"hx-date-picker-date\"\n [class.hx-date-picker-date-selected]=\"isSelected(cell)\"\n [class.hx-date-picker-date-in-range]=\"isInRange(cell)\"\n [class.hx-date-picker-date-today]=\"isToday(cell)\"\n [attr.data-date]=\"dateKey(cell)\"\n [attr.tabindex]=\"isFocusTarget(cell) ? 0 : -1\"\n [attr.aria-label]=\"dayLabel(cell)\"\n [attr.aria-current]=\"isToday(cell) ? 'date' : null\"\n [attr.aria-disabled]=\"isDateDisabled(cell) ? 'true' : null\"\n [disabled]=\"isDisabled()\"\n (click)=\"pick(cell)\"\n (keydown)=\"onDayKeydown($event, cell)\"\n >\n {{ cell.getDate() }}\n </button>\n </td>\n } @else {\n <td class=\"hx-date-picker-cell hx-date-picker-cell-empty\" role=\"gridcell\"></td>\n }\n }\n </tr>\n }\n </tbody>\n </table>\n }\n @case ('month') {\n <div class=\"hx-date-picker-months\">\n @for (name of monthNames(); track $index) {\n <button\n type=\"button\"\n class=\"hx-date-picker-month\"\n [class.hx-date-picker-month-selected]=\"$index === focusedDate().getMonth() && viewYear() === focusedDate().getFullYear()\"\n [disabled]=\"isDisabled()\"\n (click)=\"chooseMonth($index)\"\n >\n {{ name }}\n </button>\n }\n </div>\n }\n @default {\n <div class=\"hx-date-picker-years\">\n @for (year of decade(); track year) {\n <button\n type=\"button\"\n class=\"hx-date-picker-year\"\n [class.hx-date-picker-year-selected]=\"year === focusedDate().getFullYear()\"\n [disabled]=\"isDisabled()\"\n (click)=\"chooseYear(year)\"\n >\n {{ year }}\n </button>\n }\n </div>\n }\n }\n</div>\n</ng-template>\n"
4882
4882
  }]
4883
4883
  }],
4884
4884
  ctorParameters: () => [],
@@ -9721,7 +9721,7 @@ var HxMultiSelect = class HxMultiSelect {
9721
9721
  }
9722
9722
  ],
9723
9723
  ngImport: i0,
9724
- template: "<div\n #trigger\n class=\"hx-multi-select-trigger\"\n role=\"combobox\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n aria-haspopup=\"listbox\"\n [id]=\"inputId() ?? null\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span class=\"hx-multi-select-label\" [class.hx-multi-select-placeholder]=\"!selected().length\">\n @if (!selected().length) {\n {{ placeholder() }}\n } @else if (summary(); as text) {\n {{ text }}\n } @else if (display() === 'chip') {\n @for (item of selected(); track $index) {\n <span class=\"hx-multi-select-chip\">\n <span>{{ item.label }}</span>\n <button\n type=\"button\"\n class=\"hx-multi-select-chip-remove\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Remove ' + item.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeChip($event, item)\"\n >\n <span class=\"hx-multi-select-clear-icon\" aria-hidden=\"true\"></span>\n </button>\n </span>\n }\n } @else {\n {{ commaLabel() }}\n }\n </span>\n <span class=\"hx-multi-select-chevron\" aria-hidden=\"true\"></span>\n</div>\n@if (canClear()) {\n <button type=\"button\" class=\"hx-multi-select-clear\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\n <span class=\"hx-multi-select-clear-icon\" aria-hidden=\"true\"></span>\n </button>\n}\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-multi-select-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n (attach)=\"onAttach()\"\n (detach)=\"close()\"\n>\n <div class=\"hx-multi-select-panel\">\n @if (filter() || showToggleAll()) {\n <div class=\"hx-multi-select-header\">\n @if (showToggleAll()) {\n <input\n type=\"checkbox\"\n hx-checkbox\n class=\"hx-multi-select-toggle-all\"\n [attr.aria-label]=\"toggleAllLabel()\"\n [checked]=\"allSelected()\"\n (change)=\"toggleAll()\"\n />\n }\n @if (filter()) {\n <input\n #filterField\n type=\"text\"\n class=\"hx-multi-select-filter\"\n autocomplete=\"off\"\n [attr.aria-label]=\"filterPlaceholder()\"\n [attr.aria-controls]=\"panelId\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"query()\"\n (input)=\"query.set($any($event.target).value)\"\n />\n }\n </div>\n }\n <div\n cdkListbox\n class=\"hx-multi-select-list\"\n [id]=\"panelId\"\n [cdkListboxMultiple]=\"true\"\n [cdkListboxValue]=\"selectedValues()\"\n [cdkListboxUseActiveDescendant]=\"true\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (cdkListboxValueChange)=\"onSelect($event)\"\n >\n @for (item of visibleItems(); track item) {\n <div\n class=\"hx-multi-select-option\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n >\n <span class=\"hx-multi-select-check\" aria-hidden=\"true\"></span>\n <span>{{ item.label }}</span>\n </div>\n } @empty {\n <div class=\"hx-multi-select-empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </div>\n</ng-template>\n",
9724
+ template: "<div\n #trigger\n class=\"hx-multi-select-trigger\"\n role=\"combobox\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"inputId() ?? null\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span class=\"hx-multi-select-label\" [class.hx-multi-select-placeholder]=\"!selected().length\">\n @if (!selected().length) {\n {{ placeholder() }}\n } @else if (summary(); as text) {\n {{ text }}\n } @else if (display() === 'chip') {\n @for (item of selected(); track $index) {\n <span class=\"hx-multi-select-chip\">\n <span>{{ item.label }}</span>\n <button\n type=\"button\"\n class=\"hx-multi-select-chip-remove\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Remove ' + item.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeChip($event, item)\"\n >\n <span class=\"hx-multi-select-clear-icon\" aria-hidden=\"true\"></span>\n </button>\n </span>\n }\n } @else {\n {{ commaLabel() }}\n }\n </span>\n <span class=\"hx-multi-select-chevron\" aria-hidden=\"true\"></span>\n</div>\n@if (canClear()) {\n <button type=\"button\" class=\"hx-multi-select-clear\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\n <span class=\"hx-multi-select-clear-icon\" aria-hidden=\"true\"></span>\n </button>\n}\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-multi-select-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n (attach)=\"onAttach()\"\n (detach)=\"close()\"\n>\n <div class=\"hx-multi-select-panel\">\n @if (filter() || showToggleAll()) {\n <div class=\"hx-multi-select-header\">\n @if (showToggleAll()) {\n <input\n type=\"checkbox\"\n hx-checkbox\n class=\"hx-multi-select-toggle-all\"\n [attr.aria-label]=\"toggleAllLabel()\"\n [checked]=\"allSelected()\"\n (change)=\"toggleAll()\"\n />\n }\n @if (filter()) {\n <input\n #filterField\n type=\"text\"\n class=\"hx-multi-select-filter\"\n autocomplete=\"off\"\n [attr.aria-label]=\"filterPlaceholder()\"\n [attr.aria-controls]=\"panelId\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"query()\"\n (input)=\"query.set($any($event.target).value)\"\n />\n }\n </div>\n }\n <div\n cdkListbox\n class=\"hx-multi-select-list\"\n [id]=\"panelId\"\n [cdkListboxMultiple]=\"true\"\n [cdkListboxValue]=\"selectedValues()\"\n [cdkListboxUseActiveDescendant]=\"true\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (cdkListboxValueChange)=\"onSelect($event)\"\n >\n @for (item of visibleItems(); track item) {\n <div\n class=\"hx-multi-select-option\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n >\n <span class=\"hx-multi-select-check\" aria-hidden=\"true\"></span>\n <span>{{ item.label }}</span>\n </div>\n } @empty {\n <div class=\"hx-multi-select-empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </div>\n</ng-template>\n",
9725
9725
  dependencies: [
9726
9726
  {
9727
9727
  kind: "directive",
@@ -9848,7 +9848,7 @@ i0.ɵɵngDeclareClassMetadata({
9848
9848
  "[class.hx-filled]": "selected().length > 0",
9849
9849
  "(focusout)": "onFocusOut($event)"
9850
9850
  },
9851
- template: "<div\n #trigger\n class=\"hx-multi-select-trigger\"\n role=\"combobox\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n aria-haspopup=\"listbox\"\n [id]=\"inputId() ?? null\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span class=\"hx-multi-select-label\" [class.hx-multi-select-placeholder]=\"!selected().length\">\n @if (!selected().length) {\n {{ placeholder() }}\n } @else if (summary(); as text) {\n {{ text }}\n } @else if (display() === 'chip') {\n @for (item of selected(); track $index) {\n <span class=\"hx-multi-select-chip\">\n <span>{{ item.label }}</span>\n <button\n type=\"button\"\n class=\"hx-multi-select-chip-remove\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Remove ' + item.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeChip($event, item)\"\n >\n <span class=\"hx-multi-select-clear-icon\" aria-hidden=\"true\"></span>\n </button>\n </span>\n }\n } @else {\n {{ commaLabel() }}\n }\n </span>\n <span class=\"hx-multi-select-chevron\" aria-hidden=\"true\"></span>\n</div>\n@if (canClear()) {\n <button type=\"button\" class=\"hx-multi-select-clear\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\n <span class=\"hx-multi-select-clear-icon\" aria-hidden=\"true\"></span>\n </button>\n}\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-multi-select-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n (attach)=\"onAttach()\"\n (detach)=\"close()\"\n>\n <div class=\"hx-multi-select-panel\">\n @if (filter() || showToggleAll()) {\n <div class=\"hx-multi-select-header\">\n @if (showToggleAll()) {\n <input\n type=\"checkbox\"\n hx-checkbox\n class=\"hx-multi-select-toggle-all\"\n [attr.aria-label]=\"toggleAllLabel()\"\n [checked]=\"allSelected()\"\n (change)=\"toggleAll()\"\n />\n }\n @if (filter()) {\n <input\n #filterField\n type=\"text\"\n class=\"hx-multi-select-filter\"\n autocomplete=\"off\"\n [attr.aria-label]=\"filterPlaceholder()\"\n [attr.aria-controls]=\"panelId\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"query()\"\n (input)=\"query.set($any($event.target).value)\"\n />\n }\n </div>\n }\n <div\n cdkListbox\n class=\"hx-multi-select-list\"\n [id]=\"panelId\"\n [cdkListboxMultiple]=\"true\"\n [cdkListboxValue]=\"selectedValues()\"\n [cdkListboxUseActiveDescendant]=\"true\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (cdkListboxValueChange)=\"onSelect($event)\"\n >\n @for (item of visibleItems(); track item) {\n <div\n class=\"hx-multi-select-option\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n >\n <span class=\"hx-multi-select-check\" aria-hidden=\"true\"></span>\n <span>{{ item.label }}</span>\n </div>\n } @empty {\n <div class=\"hx-multi-select-empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </div>\n</ng-template>\n"
9851
+ template: "<div\n #trigger\n class=\"hx-multi-select-trigger\"\n role=\"combobox\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"inputId() ?? null\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-disabled]=\"isDisabled() ? 'true' : null\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span class=\"hx-multi-select-label\" [class.hx-multi-select-placeholder]=\"!selected().length\">\n @if (!selected().length) {\n {{ placeholder() }}\n } @else if (summary(); as text) {\n {{ text }}\n } @else if (display() === 'chip') {\n @for (item of selected(); track $index) {\n <span class=\"hx-multi-select-chip\">\n <span>{{ item.label }}</span>\n <button\n type=\"button\"\n class=\"hx-multi-select-chip-remove\"\n tabindex=\"-1\"\n [attr.aria-label]=\"'Remove ' + item.label\"\n [disabled]=\"isDisabled()\"\n (click)=\"removeChip($event, item)\"\n >\n <span class=\"hx-multi-select-clear-icon\" aria-hidden=\"true\"></span>\n </button>\n </span>\n }\n } @else {\n {{ commaLabel() }}\n }\n </span>\n <span class=\"hx-multi-select-chevron\" aria-hidden=\"true\"></span>\n</div>\n@if (canClear()) {\n <button type=\"button\" class=\"hx-multi-select-clear\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\n <span class=\"hx-multi-select-clear-icon\" aria-hidden=\"true\"></span>\n </button>\n}\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-multi-select-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n (attach)=\"onAttach()\"\n (detach)=\"close()\"\n>\n <div class=\"hx-multi-select-panel\">\n @if (filter() || showToggleAll()) {\n <div class=\"hx-multi-select-header\">\n @if (showToggleAll()) {\n <input\n type=\"checkbox\"\n hx-checkbox\n class=\"hx-multi-select-toggle-all\"\n [attr.aria-label]=\"toggleAllLabel()\"\n [checked]=\"allSelected()\"\n (change)=\"toggleAll()\"\n />\n }\n @if (filter()) {\n <input\n #filterField\n type=\"text\"\n class=\"hx-multi-select-filter\"\n autocomplete=\"off\"\n [attr.aria-label]=\"filterPlaceholder()\"\n [attr.aria-controls]=\"panelId\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"query()\"\n (input)=\"query.set($any($event.target).value)\"\n />\n }\n </div>\n }\n <div\n cdkListbox\n class=\"hx-multi-select-list\"\n [id]=\"panelId\"\n [cdkListboxMultiple]=\"true\"\n [cdkListboxValue]=\"selectedValues()\"\n [cdkListboxUseActiveDescendant]=\"true\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (cdkListboxValueChange)=\"onSelect($event)\"\n >\n @for (item of visibleItems(); track item) {\n <div\n class=\"hx-multi-select-option\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n >\n <span class=\"hx-multi-select-check\" aria-hidden=\"true\"></span>\n <span>{{ item.label }}</span>\n </div>\n } @empty {\n <div class=\"hx-multi-select-empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </div>\n</ng-template>\n"
9852
9852
  }]
9853
9853
  }],
9854
9854
  propDecorators: {
@@ -11589,7 +11589,7 @@ var HxSelect = class HxSelect {
11589
11589
  isSignal: true
11590
11590
  }],
11591
11591
  ngImport: i0,
11592
- template: "<button\n #trigger\n type=\"button\"\n class=\"hx-select-trigger\"\n role=\"combobox\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n aria-haspopup=\"listbox\"\n [id]=\"inputId() ?? null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span class=\"hx-select-label\" [class.hx-select-placeholder]=\"!selected()\">{{\n selected()?.label ?? placeholder()\n }}</span>\n <span class=\"hx-select-chevron\" aria-hidden=\"true\"></span>\n</button>\n@if (canClear()) {\n <button type=\"button\" class=\"hx-select-clear\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\n <span class=\"hx-select-clear-icon\" aria-hidden=\"true\"></span>\n </button>\n}\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-select-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n (attach)=\"onAttach()\"\n (detach)=\"close()\"\n>\n <div class=\"hx-select-panel\">\n <div\n cdkListbox\n class=\"hx-select-list\"\n [id]=\"panelId\"\n [cdkListboxValue]=\"selectedValues()\"\n [cdkListboxUseActiveDescendant]=\"true\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (cdkListboxValueChange)=\"onSelect($event)\"\n >\n @for (item of items(); track $index) {\n <div\n class=\"hx-select-option\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n >\n <span class=\"hx-select-check\" aria-hidden=\"true\"></span>\n <span>{{ item.label }}</span>\n </div>\n } @empty {\n <div class=\"hx-select-empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </div>\n</ng-template>\n",
11592
+ template: "<button\n #trigger\n type=\"button\"\n class=\"hx-select-trigger\"\n role=\"combobox\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"inputId() ?? null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span class=\"hx-select-label\" [class.hx-select-placeholder]=\"!selected()\">{{\n selected()?.label ?? placeholder()\n }}</span>\n <span class=\"hx-select-chevron\" aria-hidden=\"true\"></span>\n</button>\n@if (canClear()) {\n <button type=\"button\" class=\"hx-select-clear\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\n <span class=\"hx-select-clear-icon\" aria-hidden=\"true\"></span>\n </button>\n}\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-select-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n (attach)=\"onAttach()\"\n (detach)=\"close()\"\n>\n <div class=\"hx-select-panel\">\n <div\n cdkListbox\n class=\"hx-select-list\"\n [id]=\"panelId\"\n [cdkListboxValue]=\"selectedValues()\"\n [cdkListboxUseActiveDescendant]=\"true\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (cdkListboxValueChange)=\"onSelect($event)\"\n >\n @for (item of items(); track $index) {\n <div\n class=\"hx-select-option\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n >\n <span class=\"hx-select-check\" aria-hidden=\"true\"></span>\n <span>{{ item.label }}</span>\n </div>\n } @empty {\n <div class=\"hx-select-empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </div>\n</ng-template>\n",
11593
11593
  dependencies: [
11594
11594
  {
11595
11595
  kind: "directive",
@@ -11708,7 +11708,7 @@ i0.ɵɵngDeclareClassMetadata({
11708
11708
  "[class.hx-filled]": "!!selected()",
11709
11709
  "(focusout)": "onFocusOut($event)"
11710
11710
  },
11711
- template: "<button\n #trigger\n type=\"button\"\n class=\"hx-select-trigger\"\n role=\"combobox\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n aria-haspopup=\"listbox\"\n [id]=\"inputId() ?? null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span class=\"hx-select-label\" [class.hx-select-placeholder]=\"!selected()\">{{\n selected()?.label ?? placeholder()\n }}</span>\n <span class=\"hx-select-chevron\" aria-hidden=\"true\"></span>\n</button>\n@if (canClear()) {\n <button type=\"button\" class=\"hx-select-clear\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\n <span class=\"hx-select-clear-icon\" aria-hidden=\"true\"></span>\n </button>\n}\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-select-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n (attach)=\"onAttach()\"\n (detach)=\"close()\"\n>\n <div class=\"hx-select-panel\">\n <div\n cdkListbox\n class=\"hx-select-list\"\n [id]=\"panelId\"\n [cdkListboxValue]=\"selectedValues()\"\n [cdkListboxUseActiveDescendant]=\"true\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (cdkListboxValueChange)=\"onSelect($event)\"\n >\n @for (item of items(); track $index) {\n <div\n class=\"hx-select-option\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n >\n <span class=\"hx-select-check\" aria-hidden=\"true\"></span>\n <span>{{ item.label }}</span>\n </div>\n } @empty {\n <div class=\"hx-select-empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </div>\n</ng-template>\n"
11711
+ template: "<button\n #trigger\n type=\"button\"\n class=\"hx-select-trigger\"\n role=\"combobox\"\n cdkOverlayOrigin\n #origin=\"cdkOverlayOrigin\"\n aria-haspopup=\"listbox\"\n [attr.id]=\"inputId() ?? null\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"open()\"\n [attr.aria-controls]=\"open() ? panelId : null\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n [attr.aria-invalid]=\"invalid() ? 'true' : null\"\n (click)=\"toggle()\"\n (keydown)=\"onTriggerKeydown($event)\"\n>\n <span class=\"hx-select-label\" [class.hx-select-placeholder]=\"!selected()\">{{\n selected()?.label ?? placeholder()\n }}</span>\n <span class=\"hx-select-chevron\" aria-hidden=\"true\"></span>\n</button>\n@if (canClear()) {\n <button type=\"button\" class=\"hx-select-clear\" aria-label=\"Clear selection\" (click)=\"clear($event)\">\n <span class=\"hx-select-clear-icon\" aria-hidden=\"true\"></span>\n </button>\n}\n\n<ng-template\n cdkConnectedOverlay\n cdkConnectedOverlayPanelClass=\"hx-select-overlay\"\n [cdkConnectedOverlayOrigin]=\"origin\"\n [cdkConnectedOverlayOpen]=\"open()\"\n [cdkConnectedOverlayPositions]=\"positions\"\n [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\n (overlayOutsideClick)=\"onOutsideClick($event)\"\n (overlayKeydown)=\"onOverlayKeydown($event)\"\n (attach)=\"onAttach()\"\n (detach)=\"close()\"\n>\n <div class=\"hx-select-panel\">\n <div\n cdkListbox\n class=\"hx-select-list\"\n [id]=\"panelId\"\n [cdkListboxValue]=\"selectedValues()\"\n [cdkListboxUseActiveDescendant]=\"true\"\n [cdkListboxCompareWith]=\"compareWith()\"\n [attr.aria-label]=\"ariaLabel() ?? placeholder() ?? null\"\n [attr.aria-labelledby]=\"ariaLabelledby() ?? null\"\n (cdkListboxValueChange)=\"onSelect($event)\"\n >\n @for (item of items(); track $index) {\n <div\n class=\"hx-select-option\"\n [cdkOption]=\"item.value\"\n [cdkOptionDisabled]=\"item.disabled\"\n [cdkOptionTypeaheadLabel]=\"item.label\"\n >\n <span class=\"hx-select-check\" aria-hidden=\"true\"></span>\n <span>{{ item.label }}</span>\n </div>\n } @empty {\n <div class=\"hx-select-empty\">{{ emptyMessage() }}</div>\n }\n </div>\n </div>\n</ng-template>\n"
11712
11712
  }]
11713
11713
  }],
11714
11714
  propDecorators: {
@@ -12640,7 +12640,7 @@ var HxSlider = class HxSlider {
12640
12640
  <input
12641
12641
  type="range"
12642
12642
  class="hx-slider-input"
12643
- [id]="inputId()"
12643
+ [attr.id]="inputId() ?? null"
12644
12644
  [min]="lower()"
12645
12645
  [max]="upper()"
12646
12646
  [step]="step()"
@@ -12720,7 +12720,7 @@ i0.ɵɵngDeclareClassMetadata({
12720
12720
  <input
12721
12721
  type="range"
12722
12722
  class="hx-slider-input"
12723
- [id]="inputId()"
12723
+ [attr.id]="inputId() ?? null"
12724
12724
  [min]="lower()"
12725
12725
  [max]="upper()"
12726
12726
  [step]="step()"
@@ -15682,7 +15682,7 @@ var HxToggleButton = class HxToggleButton {
15682
15682
  <button
15683
15683
  type="button"
15684
15684
  class="hx-toggle-button-control"
15685
- [id]="inputId()"
15685
+ [attr.id]="inputId() ?? null"
15686
15686
  [attr.aria-pressed]="value()"
15687
15687
  [attr.aria-label]="ariaLabel()"
15688
15688
  [attr.aria-labelledby]="ariaLabelledby()"
@@ -15732,7 +15732,7 @@ i0.ɵɵngDeclareClassMetadata({
15732
15732
  <button
15733
15733
  type="button"
15734
15734
  class="hx-toggle-button-control"
15735
- [id]="inputId()"
15735
+ [attr.id]="inputId() ?? null"
15736
15736
  [attr.aria-pressed]="value()"
15737
15737
  [attr.aria-label]="ariaLabel()"
15738
15738
  [attr.aria-labelledby]="ariaLabelledby()"