@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 +4 -6
- package/fesm2022/gravionlabs-helix-ui.mjs +12 -12
- package/fesm2022/gravionlabs-helix-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/styles.css +11 -12
- package/tokens.css +2 -2
- package/types/gravionlabs-helix-ui.d.ts +1 -2
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
|
|
5
|
-
|
|
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
|
|
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`)
|
|
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()"
|