@eagami/ui 5.22.0 → 5.23.0
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/fesm2022/eagami-ui.mjs +146 -35
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/src/styles/_mixins.scss +36 -0
- package/types/eagami-ui.d.ts +58 -5
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -4892,6 +4892,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
4892
4892
|
args: ['document:keydown.escape', ['$event']]
|
|
4893
4893
|
}] } });
|
|
4894
4894
|
|
|
4895
|
+
/** Whether the consumer supplied groups rather than a flat option list. */
|
|
4896
|
+
function isGrouped(options) {
|
|
4897
|
+
const first = options[0];
|
|
4898
|
+
return first !== undefined && 'options' in first;
|
|
4899
|
+
}
|
|
4900
|
+
/** Normalizes either accepted shape to groups; a flat list becomes one unlabelled group. */
|
|
4901
|
+
function toGroups(options) {
|
|
4902
|
+
if (isGrouped(options)) {
|
|
4903
|
+
return options;
|
|
4904
|
+
}
|
|
4905
|
+
return options.length > 0 ? [{ options: [...options] }] : [];
|
|
4906
|
+
}
|
|
4907
|
+
/** Drops every option failing `keep`, then every group left empty. */
|
|
4908
|
+
function filterGroups(groups, keep) {
|
|
4909
|
+
const kept = [];
|
|
4910
|
+
for (const group of groups) {
|
|
4911
|
+
const options = group.options.filter(keep);
|
|
4912
|
+
if (options.length > 0) {
|
|
4913
|
+
kept.push({ label: group.label, options });
|
|
4914
|
+
}
|
|
4915
|
+
}
|
|
4916
|
+
return kept;
|
|
4917
|
+
}
|
|
4918
|
+
/** Trims the groups down to at most `max` options in total, dropping any that no longer fit. */
|
|
4919
|
+
function limitGroups(groups, max) {
|
|
4920
|
+
const limited = [];
|
|
4921
|
+
let remaining = max;
|
|
4922
|
+
for (const group of groups) {
|
|
4923
|
+
if (remaining <= 0) {
|
|
4924
|
+
break;
|
|
4925
|
+
}
|
|
4926
|
+
const options = group.options.slice(0, remaining);
|
|
4927
|
+
remaining -= options.length;
|
|
4928
|
+
limited.push({ label: group.label, options });
|
|
4929
|
+
}
|
|
4930
|
+
return limited;
|
|
4931
|
+
}
|
|
4932
|
+
/** Flattens groups back into a single option list, in the order they were given. */
|
|
4933
|
+
function flattenGroups(groups) {
|
|
4934
|
+
return groups.flatMap(group => group.options);
|
|
4935
|
+
}
|
|
4936
|
+
/**
|
|
4937
|
+
* Pairs every option with its index into the flattened list, so keyboard
|
|
4938
|
+
* navigation and selection count options alone while the template still renders
|
|
4939
|
+
* the headings and rules that sit between them. Groups holding no options are
|
|
4940
|
+
* left out, so neither a heading nor a rule can render over nothing.
|
|
4941
|
+
*/
|
|
4942
|
+
function toRenderedGroups(groups) {
|
|
4943
|
+
let index = 0;
|
|
4944
|
+
return groups
|
|
4945
|
+
.filter(group => group.options.length > 0)
|
|
4946
|
+
.map((group, position) => ({
|
|
4947
|
+
label: group.label || undefined,
|
|
4948
|
+
rule: position > 0 && !group.label,
|
|
4949
|
+
options: group.options.map(option => ({ option, index: index++ })),
|
|
4950
|
+
}));
|
|
4951
|
+
}
|
|
4952
|
+
|
|
4895
4953
|
/**
|
|
4896
4954
|
* Text input paired with a filtered suggestion list. Filters options by
|
|
4897
4955
|
* case-insensitive substring match, supports arrow-key navigation, and
|
|
@@ -4909,6 +4967,7 @@ class AutocompleteComponent {
|
|
|
4909
4967
|
...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
|
|
4910
4968
|
placeholder = input('', /* @ts-ignore */
|
|
4911
4969
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
4970
|
+
/** Selectable options, either flat or split into groups. */
|
|
4912
4971
|
options = input([], /* @ts-ignore */
|
|
4913
4972
|
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
4914
4973
|
size = input('md', /* @ts-ignore */
|
|
@@ -4966,19 +5025,32 @@ class AutocompleteComponent {
|
|
|
4966
5025
|
showError = this.hasError;
|
|
4967
5026
|
showHint = computed(() => !!this.hint() && !this.hasError(), /* @ts-ignore */
|
|
4968
5027
|
...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
|
|
4969
|
-
|
|
5028
|
+
optionGroups = computed(() => toGroups(this.options()), /* @ts-ignore */
|
|
5029
|
+
...(ngDevMode ? [{ debugName: "optionGroups" }] : /* istanbul ignore next */ []));
|
|
5030
|
+
/** Whether the consumer supplied groups, which the list exposes as ARIA groups. */
|
|
5031
|
+
grouped = computed(() => isGrouped(this.options()), /* @ts-ignore */
|
|
5032
|
+
...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
|
|
5033
|
+
filteredGroups = computed(() => {
|
|
4970
5034
|
const query = this.value().trim().toLowerCase();
|
|
4971
|
-
const
|
|
4972
|
-
const max = this.maxResults();
|
|
5035
|
+
const groups = this.optionGroups();
|
|
4973
5036
|
if (query.length < this.minLength()) {
|
|
4974
5037
|
return [];
|
|
4975
5038
|
}
|
|
4976
5039
|
const matched = query
|
|
4977
|
-
?
|
|
4978
|
-
:
|
|
4979
|
-
return matched.
|
|
5040
|
+
? filterGroups(groups, o => o.label.toLowerCase().includes(query))
|
|
5041
|
+
: groups;
|
|
5042
|
+
return limitGroups(matched, this.maxResults());
|
|
4980
5043
|
}, /* @ts-ignore */
|
|
5044
|
+
...(ngDevMode ? [{ debugName: "filteredGroups" }] : /* istanbul ignore next */ []));
|
|
5045
|
+
filteredOptions = computed(() => flattenGroups(this.filteredGroups()), /* @ts-ignore */
|
|
4981
5046
|
...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
5047
|
+
/** Groups to render, each option carrying its index into `filteredOptions`. */
|
|
5048
|
+
renderedGroups = computed(() => toRenderedGroups(this.filteredGroups()), /* @ts-ignore */
|
|
5049
|
+
...(ngDevMode ? [{ debugName: "renderedGroups" }] : /* istanbul ignore next */ []));
|
|
5050
|
+
// An option repeated across groups renders twice, but a single-select listbox
|
|
5051
|
+
// may only mark one option selected
|
|
5052
|
+
selectedIndex = computed(() => this.filteredOptions().findIndex(o => o.label === this.value()), /* @ts-ignore */
|
|
5053
|
+
...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
|
|
4982
5054
|
showList = computed(() => this.isOpen() && this.value().length >= this.minLength(), /* @ts-ignore */
|
|
4983
5055
|
...(ngDevMode ? [{ debugName: "showList" }] : /* istanbul ignore next */ []));
|
|
4984
5056
|
showEmpty = computed(() => this.showList() && this.filteredOptions().length === 0, /* @ts-ignore */
|
|
@@ -5117,7 +5189,7 @@ class AutocompleteComponent {
|
|
|
5117
5189
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
5118
5190
|
multi: true,
|
|
5119
5191
|
},
|
|
5120
|
-
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n #anchorEl\n class=\"ea-autocomplete__wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <span class=\"ea-autocomplete__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-autocomplete__input\"\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n role=\"combobox\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-expanded]=\"showList()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\" />\n\n <span class=\"ea-autocomplete__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n </div>\n\n <ea-popover\n [anchor]=\"anchorEl\"\n [open]=\"showList()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [aria-label]=\"label() ?? ariaLabel()\"\n [surfaceId]=\"id() + '-listbox'\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"close()\">\n <div\n class=\"ea-autocomplete__listbox\"\n [ngClass]=\"listboxClasses()\">\n @for (
|
|
5192
|
+
], viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n #anchorEl\n class=\"ea-autocomplete__wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <span class=\"ea-autocomplete__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-autocomplete__input\"\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n role=\"combobox\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-expanded]=\"showList()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\" />\n\n <span class=\"ea-autocomplete__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n </div>\n\n <ea-popover\n [anchor]=\"anchorEl\"\n [open]=\"showList()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [aria-label]=\"label() ?? ariaLabel()\"\n [surfaceId]=\"id() + '-listbox'\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"close()\">\n <div\n class=\"ea-autocomplete__listbox\"\n [ngClass]=\"listboxClasses()\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-autocomplete__group\"\n [class.ea-autocomplete__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-autocomplete__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-autocomplete__option\"\n role=\"option\"\n [id]=\"id() + '-option-' + entry.index\"\n [class.ea-autocomplete__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-autocomplete__option--disabled]=\"entry.option.disabled\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (mousedown)=\"selectOption(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n @if (showEmpty()) {\n <div\n class=\"ea-autocomplete__empty\"\n role=\"status\">\n {{ resolvedEmptyMessage() }}\n </div>\n }\n </div>\n </ea-popover>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-autocomplete--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete--xs{font-size:var(--font-size-xs)}.ea-autocomplete--sm{font-size:var(--font-size-sm)}.ea-autocomplete--md{font-size:var(--font-size-md)}.ea-autocomplete--lg{font-size:var(--font-size-lg)}.ea-autocomplete--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-autocomplete__wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--readonly button{cursor:default}.ea-autocomplete__wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{overflow-y:auto;overscroll-behavior:none;max-height:15rem;padding:var(--space-1) 0;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-autocomplete-listbox-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-autocomplete__listbox{border:1px solid CanvasText}}.ea-autocomplete__listbox--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__group{position:relative}.ea-autocomplete__group--ruled{padding-top:.25em;margin-top:.25em}.ea-autocomplete__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-border-default);content:\"\"}.ea-autocomplete__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-autocomplete__option{padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-autocomplete__option--focused{background-color:Highlight;color:HighlightText}}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"], dependencies: [{ kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "maxWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
5121
5193
|
}
|
|
5122
5194
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
5123
5195
|
type: Component,
|
|
@@ -5127,7 +5199,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
5127
5199
|
useExisting: forwardRef(() => AutocompleteComponent),
|
|
5128
5200
|
multi: true,
|
|
5129
5201
|
},
|
|
5130
|
-
], template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n #anchorEl\n class=\"ea-autocomplete__wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <span class=\"ea-autocomplete__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-autocomplete__input\"\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n role=\"combobox\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-expanded]=\"showList()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\" />\n\n <span class=\"ea-autocomplete__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n </div>\n\n <ea-popover\n [anchor]=\"anchorEl\"\n [open]=\"showList()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [aria-label]=\"label() ?? ariaLabel()\"\n [surfaceId]=\"id() + '-listbox'\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"close()\">\n <div\n class=\"ea-autocomplete__listbox\"\n [ngClass]=\"listboxClasses()\">\n @for (
|
|
5202
|
+
], template: "<div class=\"ea-autocomplete ea-autocomplete--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [required]=\"required()\" />\n }\n\n <div\n #anchorEl\n class=\"ea-autocomplete__wrapper\"\n [ngClass]=\"wrapperClasses()\">\n <span class=\"ea-autocomplete__prefix\">\n <ng-content select=\"[slot=prefix]\" />\n </span>\n\n <input\n #inputEl\n class=\"ea-autocomplete__input\"\n type=\"text\"\n dir=\"auto\"\n autocomplete=\"off\"\n role=\"combobox\"\n [id]=\"id()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [readOnly]=\"readonly()\"\n [required]=\"required()\"\n [value]=\"value()\"\n [attr.aria-label]=\"label() ? null : ariaLabel()\"\n [attr.aria-expanded]=\"showList()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-autocomplete]=\"'list'\"\n [attr.aria-controls]=\"id() + '-listbox'\"\n [attr.aria-activedescendant]=\"\n focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (input)=\"handleInput($event)\"\n (focus)=\"handleFocus($event)\"\n (blur)=\"handleBlur($event)\"\n (keydown)=\"handleKeydown($event)\" />\n\n <span class=\"ea-autocomplete__suffix\">\n <ng-content select=\"[slot=suffix]\" />\n </span>\n </div>\n\n <ea-popover\n [anchor]=\"anchorEl\"\n [open]=\"showList()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [aria-label]=\"label() ?? ariaLabel()\"\n [surfaceId]=\"id() + '-listbox'\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"close()\">\n <div\n class=\"ea-autocomplete__listbox\"\n [ngClass]=\"listboxClasses()\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-autocomplete__group\"\n [class.ea-autocomplete__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-autocomplete__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-autocomplete__option\"\n role=\"option\"\n [id]=\"id() + '-option-' + entry.index\"\n [class.ea-autocomplete__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-autocomplete__option--disabled]=\"entry.option.disabled\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (mousedown)=\"selectOption(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n @if (showEmpty()) {\n <div\n class=\"ea-autocomplete__empty\"\n role=\"status\">\n {{ resolvedEmptyMessage() }}\n </div>\n }\n </div>\n </ea-popover>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-autocomplete{position:relative;display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-autocomplete--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete--xs{font-size:var(--font-size-xs)}.ea-autocomplete--sm{font-size:var(--font-size-sm)}.ea-autocomplete--md{font-size:var(--font-size-md)}.ea-autocomplete--lg{font-size:var(--font-size-lg)}.ea-autocomplete--xl{font-size:var(--font-size-xl)}.ea-autocomplete__wrapper{display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);transition:var(--transition-colors),var(--transition-shadow)}.ea-autocomplete__wrapper--focused{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--error{border-color:var(--color-error-default)}.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-autocomplete__wrapper--error.ea-autocomplete__wrapper--focused{outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-autocomplete__wrapper--readonly:has(:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-autocomplete__wrapper--readonly:has(:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-autocomplete__wrapper--readonly button{cursor:default}.ea-autocomplete__wrapper--readonly button:hover{background-color:transparent;color:var(--color-text-secondary)}.ea-autocomplete__input{flex:1;min-width:0;padding:0;border:none;background:transparent;font-family:var(--font-family-sans);color:var(--color-text-primary);outline:none}.ea-autocomplete__input::placeholder{color:var(--color-text-tertiary)}.ea-autocomplete__input:disabled{cursor:not-allowed}.ea-autocomplete__prefix,.ea-autocomplete__suffix{display:flex;flex-shrink:0;align-items:center;color:var(--color-text-secondary)}.ea-autocomplete__prefix:empty,.ea-autocomplete__suffix:empty{display:none}.ea-autocomplete__listbox{overflow-y:auto;overscroll-behavior:none;max-height:15rem;padding:var(--space-1) 0;list-style:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-autocomplete-listbox-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-autocomplete__listbox{border:1px solid CanvasText}}.ea-autocomplete__listbox--2xs{font-size:var(--font-size-2xs)}.ea-autocomplete__listbox--xs{font-size:var(--font-size-xs)}.ea-autocomplete__listbox--sm{font-size:var(--font-size-sm)}.ea-autocomplete__listbox--md{font-size:var(--font-size-md)}.ea-autocomplete__listbox--lg{font-size:var(--font-size-lg)}.ea-autocomplete__listbox--xl{font-size:var(--font-size-xl)}.ea-autocomplete__group{position:relative}.ea-autocomplete__group--ruled{padding-top:.25em;margin-top:.25em}.ea-autocomplete__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-border-default);content:\"\"}.ea-autocomplete__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-autocomplete__option{padding:.5em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-autocomplete__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-autocomplete__option--focused{background-color:Highlight;color:HighlightText}}.ea-autocomplete__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-autocomplete__option--disabled{color:GrayText}}.ea-autocomplete__empty{padding:var(--space-2) var(--space-3);font-size:inherit;font-style:italic;color:var(--color-text-tertiary)}\n"] }]
|
|
5131
5203
|
}], propDecorators: { inputEl: [{ type: i0.ViewChild, args: ['inputEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxResults: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxResults", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], selected: [{ type: i0.Output, args: ["selected"] }], changed: [{ type: i0.Output, args: ["changed"] }], focused: [{ type: i0.Output, args: ["focused"] }], blurred: [{ type: i0.Output, args: ["blurred"] }] } });
|
|
5132
5204
|
|
|
5133
5205
|
class CameraIconComponent extends IconComponentBase {
|
|
@@ -9979,11 +10051,11 @@ class DialogComponent {
|
|
|
9979
10051
|
this.handleClose();
|
|
9980
10052
|
}
|
|
9981
10053
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9982
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n #dialogEl\n class=\"ea-dialog\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\">\n <div\n class=\"ea-dialog__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n [attr.aria-label]=\"i18n.messages().dialog.close\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div\n #headerEl\n class=\"ea-dialog__header\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;width:var(--ea-dialog-size, 32rem);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}@media(forced-colors:active){.ea-dialog__panel{border:1px solid CanvasText}}.ea-dialog__panel--2xs{--ea-dialog-size: 16rem}.ea-dialog__panel--xs{--ea-dialog-size: 20rem}.ea-dialog__panel--sm{--ea-dialog-size: 24rem}.ea-dialog__panel--md{--ea-dialog-size: 32rem}.ea-dialog__panel--lg{--ea-dialog-size: 42rem}.ea-dialog__panel--xl{--ea-dialog-size: 52rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{
|
|
10054
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DialogComponent, isStandalone: true, selector: "ea-dialog", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "dialogEl", first: true, predicate: ["dialogEl"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n #dialogEl\n class=\"ea-dialog\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\">\n <div\n class=\"ea-dialog__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n [attr.aria-label]=\"i18n.messages().dialog.close\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div\n #headerEl\n class=\"ea-dialog__header\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;width:var(--ea-dialog-size, 32rem);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}@media(forced-colors:active){.ea-dialog__panel{border:1px solid CanvasText}}.ea-dialog__panel--2xs{--ea-dialog-size: 16rem}.ea-dialog__panel--xs{--ea-dialog-size: 20rem}.ea-dialog__panel--sm{--ea-dialog-size: 24rem}.ea-dialog__panel--md{--ea-dialog-size: 32rem}.ea-dialog__panel--lg{--ea-dialog-size: 42rem}.ea-dialog__panel--xl{--ea-dialog-size: 52rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-dialog__close>*{font-size:1.25em}.ea-dialog__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dialog__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dialog__close:disabled{cursor:not-allowed;opacity:.5}.ea-dialog__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3)}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
9983
10055
|
}
|
|
9984
10056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DialogComponent, decorators: [{
|
|
9985
10057
|
type: Component,
|
|
9986
|
-
args: [{ selector: 'ea-dialog', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n #dialogEl\n class=\"ea-dialog\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\">\n <div\n class=\"ea-dialog__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n [attr.aria-label]=\"i18n.messages().dialog.close\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div\n #headerEl\n class=\"ea-dialog__header\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;width:var(--ea-dialog-size, 32rem);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}@media(forced-colors:active){.ea-dialog__panel{border:1px solid CanvasText}}.ea-dialog__panel--2xs{--ea-dialog-size: 16rem}.ea-dialog__panel--xs{--ea-dialog-size: 20rem}.ea-dialog__panel--sm{--ea-dialog-size: 24rem}.ea-dialog__panel--md{--ea-dialog-size: 32rem}.ea-dialog__panel--lg{--ea-dialog-size: 42rem}.ea-dialog__panel--xl{--ea-dialog-size: 52rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{
|
|
10058
|
+
args: [{ selector: 'ea-dialog', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n #dialogEl\n class=\"ea-dialog\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\">\n <div\n class=\"ea-dialog__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n [attr.aria-label]=\"i18n.messages().dialog.close\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div\n #headerEl\n class=\"ea-dialog__header\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-dialog{border:none;background:transparent;padding:0;margin:auto;max-width:none;max-height:none;overflow:visible}.ea-dialog::backdrop{background-color:var(--color-bg-overlay)}.ea-dialog__panel{position:relative;display:flex;flex-direction:column;width:var(--ea-dialog-size, 32rem);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--radius-xl);box-shadow:var(--shadow-2xl);max-height:85vh;overflow:hidden}@media(forced-colors:active){.ea-dialog__panel{border:1px solid CanvasText}}.ea-dialog__panel--2xs{--ea-dialog-size: 16rem}.ea-dialog__panel--xs{--ea-dialog-size: 20rem}.ea-dialog__panel--sm{--ea-dialog-size: 24rem}.ea-dialog__panel--md{--ea-dialog-size: 32rem}.ea-dialog__panel--lg{--ea-dialog-size: 42rem}.ea-dialog__panel--xl{--ea-dialog-size: 52rem}.ea-dialog__panel--full{width:calc(100vw - 2rem);height:calc(100vh - 2rem);max-height:calc(100vh - 2rem)}.ea-dialog__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-dialog__close>*{font-size:1.25em}.ea-dialog__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-dialog__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-dialog__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dialog__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dialog__close:disabled{cursor:not-allowed;opacity:.5}.ea-dialog__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3)}.ea-dialog__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__header:empty{display:none}.ea-dialog__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-dialog__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-dialog__footer:empty{display:none}\n"] }]
|
|
9987
10059
|
}], ctorParameters: () => [], propDecorators: { dialogEl: [{ type: i0.ViewChild, args: ['dialogEl', { isSignal: true }] }], headerEl: [{ type: i0.ViewChild, args: ['headerEl', { isSignal: true }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
9988
10060
|
|
|
9989
10061
|
// The padding side, per position, applied to the push target so its content
|
|
@@ -10419,11 +10491,11 @@ class DrawerComponent {
|
|
|
10419
10491
|
}
|
|
10420
10492
|
}
|
|
10421
10493
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10422
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DrawerComponent, isStandalone: true, selector: "ea-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pushTarget: { classPropertyName: "pushTarget", publicName: "pushTarget", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "drawerEl", first: true, predicate: ["drawerEl"], descendants: true, isSignal: true }, { propertyName: "panelEl", first: true, predicate: ["panelEl"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n #drawerEl\n class=\"ea-drawer\"\n [class.ea-drawer--animated]=\"animation() !== 'none'\"\n [class.ea-drawer--linear]=\"animation() === 'linear'\"\n [class.ea-drawer--push]=\"mode() === 'push'\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\"\n (keydown)=\"handleKeydown($event)\"\n (close)=\"onDialogClose()\">\n <div\n #panelEl\n class=\"ea-drawer__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-drawer__close\"\n [attr.aria-label]=\"i18n.messages().drawer.close\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div\n #headerEl\n class=\"ea-drawer__header\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-drawer__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-drawer__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;overflow:clip;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer--push{z-index:var(--z-index-modal);pointer-events:none}.ea-drawer--push::backdrop{display:none}.ea-drawer--push .ea-drawer__panel{pointer-events:auto}.ea-drawer--push .ea-drawer__panel--left,.ea-drawer--push .ea-drawer__panel--right,.ea-drawer--push .ea-drawer__panel--start,.ea-drawer--push .ea-drawer__panel--end{max-inline-size:calc(100vw - var(--ea-drawer-push-min, 8rem))}.ea-drawer--push .ea-drawer__panel--top,.ea-drawer--push .ea-drawer__panel--bottom{max-block-size:calc(100vh - var(--ea-drawer-push-min, 8rem))}.ea-drawer--linear{--ea-drawer-ease: var(--ease-linear)}.ea-drawer--animated::backdrop{opacity:0;transition:opacity var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer--animated .ea-drawer__panel{transition:transform var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer .ea-drawer__panel--right{transform:translate(100%)}.ea-drawer .ea-drawer__panel--left{transform:translate(-100%)}.ea-drawer .ea-drawer__panel--start{transform:translate(calc(-100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--end{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--top{transform:translateY(-100%)}.ea-drawer .ea-drawer__panel--bottom{transform:translateY(100%)}.ea-drawer--entered::backdrop{opacity:1}.ea-drawer--entered .ea-drawer__panel{transform:none}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--ea-drawer-panel-background-color, var(--color-bg-elevated));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-drawer__panel{border:1px solid CanvasText}}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--start{top:0;inset-inline-start:0;bottom:0;height:100%}.ea-drawer__panel--end{top:0;inset-inline-end:0;bottom:0;height:100%}.ea-drawer__panel--2xs{--ea-drawer-inline-size: 12rem;--ea-drawer-block-size: 6rem}.ea-drawer__panel--xs{--ea-drawer-inline-size: 16rem;--ea-drawer-block-size: 8rem}.ea-drawer__panel--sm{--ea-drawer-inline-size: 20rem;--ea-drawer-block-size: 12rem}.ea-drawer__panel--md{--ea-drawer-inline-size: 28rem;--ea-drawer-block-size: 20rem}.ea-drawer__panel--lg{--ea-drawer-inline-size: 36rem;--ea-drawer-block-size: 28rem}.ea-drawer__panel--xl{--ea-drawer-inline-size: 44rem;--ea-drawer-block-size: 36rem}.ea-drawer__panel--full{--ea-drawer-inline-size: calc(100vw - 3rem) ;--ea-drawer-block-size: calc(100vh - 3rem) }.ea-drawer__panel--right,.ea-drawer__panel--left,.ea-drawer__panel--start,.ea-drawer__panel--end{width:var(--ea-drawer-inline-size, 28rem)}.ea-drawer__panel--top{top:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--bottom{bottom:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__header{padding-top:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__body{padding-block:var(--space-2)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__footer{padding-bottom:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__header{padding-top:var(--space-2);padding-bottom:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__body{padding-block:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__footer{padding-top:var(--space-1);padding-bottom:var(--space-2)}.ea-drawer__close{
|
|
10494
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: DrawerComponent, isStandalone: true, selector: "ea-drawer", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, pushTarget: { classPropertyName: "pushTarget", publicName: "pushTarget", isSignal: true, isRequired: false, transformFunction: null }, closeOnBackdrop: { classPropertyName: "closeOnBackdrop", publicName: "closeOnBackdrop", isSignal: true, isRequired: false, transformFunction: null }, closeOnEscape: { classPropertyName: "closeOnEscape", publicName: "closeOnEscape", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange", opened: "opened", closed: "closed" }, viewQueries: [{ propertyName: "drawerEl", first: true, predicate: ["drawerEl"], descendants: true, isSignal: true }, { propertyName: "panelEl", first: true, predicate: ["panelEl"], descendants: true, isSignal: true }, { propertyName: "headerEl", first: true, predicate: ["headerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<dialog\n #drawerEl\n class=\"ea-drawer\"\n [class.ea-drawer--animated]=\"animation() !== 'none'\"\n [class.ea-drawer--linear]=\"animation() === 'linear'\"\n [class.ea-drawer--push]=\"mode() === 'push'\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\"\n (keydown)=\"handleKeydown($event)\"\n (close)=\"onDialogClose()\">\n <div\n #panelEl\n class=\"ea-drawer__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-drawer__close\"\n [attr.aria-label]=\"i18n.messages().drawer.close\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div\n #headerEl\n class=\"ea-drawer__header\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-drawer__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-drawer__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;overflow:clip;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer--push{z-index:var(--z-index-modal);pointer-events:none}.ea-drawer--push::backdrop{display:none}.ea-drawer--push .ea-drawer__panel{pointer-events:auto}.ea-drawer--push .ea-drawer__panel--left,.ea-drawer--push .ea-drawer__panel--right,.ea-drawer--push .ea-drawer__panel--start,.ea-drawer--push .ea-drawer__panel--end{max-inline-size:calc(100vw - var(--ea-drawer-push-min, 8rem))}.ea-drawer--push .ea-drawer__panel--top,.ea-drawer--push .ea-drawer__panel--bottom{max-block-size:calc(100vh - var(--ea-drawer-push-min, 8rem))}.ea-drawer--linear{--ea-drawer-ease: var(--ease-linear)}.ea-drawer--animated::backdrop{opacity:0;transition:opacity var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer--animated .ea-drawer__panel{transition:transform var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer .ea-drawer__panel--right{transform:translate(100%)}.ea-drawer .ea-drawer__panel--left{transform:translate(-100%)}.ea-drawer .ea-drawer__panel--start{transform:translate(calc(-100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--end{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--top{transform:translateY(-100%)}.ea-drawer .ea-drawer__panel--bottom{transform:translateY(100%)}.ea-drawer--entered::backdrop{opacity:1}.ea-drawer--entered .ea-drawer__panel{transform:none}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--ea-drawer-panel-background-color, var(--color-bg-elevated));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-drawer__panel{border:1px solid CanvasText}}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--start{top:0;inset-inline-start:0;bottom:0;height:100%}.ea-drawer__panel--end{top:0;inset-inline-end:0;bottom:0;height:100%}.ea-drawer__panel--2xs{--ea-drawer-inline-size: 12rem;--ea-drawer-block-size: 6rem}.ea-drawer__panel--xs{--ea-drawer-inline-size: 16rem;--ea-drawer-block-size: 8rem}.ea-drawer__panel--sm{--ea-drawer-inline-size: 20rem;--ea-drawer-block-size: 12rem}.ea-drawer__panel--md{--ea-drawer-inline-size: 28rem;--ea-drawer-block-size: 20rem}.ea-drawer__panel--lg{--ea-drawer-inline-size: 36rem;--ea-drawer-block-size: 28rem}.ea-drawer__panel--xl{--ea-drawer-inline-size: 44rem;--ea-drawer-block-size: 36rem}.ea-drawer__panel--full{--ea-drawer-inline-size: calc(100vw - 3rem) ;--ea-drawer-block-size: calc(100vh - 3rem) }.ea-drawer__panel--right,.ea-drawer__panel--left,.ea-drawer__panel--start,.ea-drawer__panel--end{width:var(--ea-drawer-inline-size, 28rem)}.ea-drawer__panel--top{top:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--bottom{bottom:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__header{padding-top:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__body{padding-block:var(--space-2)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__footer{padding-bottom:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__header{padding-top:var(--space-2);padding-bottom:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__body{padding-block:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__footer{padding-top:var(--space-1);padding-bottom:var(--space-2)}.ea-drawer__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close>*{font-size:1.25em}.ea-drawer__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-drawer__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-drawer__close:disabled{cursor:not-allowed;opacity:.5}.ea-drawer__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3)}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10423
10495
|
}
|
|
10424
10496
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DrawerComponent, decorators: [{
|
|
10425
10497
|
type: Component,
|
|
10426
|
-
args: [{ selector: 'ea-drawer', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n #drawerEl\n class=\"ea-drawer\"\n [class.ea-drawer--animated]=\"animation() !== 'none'\"\n [class.ea-drawer--linear]=\"animation() === 'linear'\"\n [class.ea-drawer--push]=\"mode() === 'push'\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\"\n (keydown)=\"handleKeydown($event)\"\n (close)=\"onDialogClose()\">\n <div\n #panelEl\n class=\"ea-drawer__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-drawer__close\"\n [attr.aria-label]=\"i18n.messages().drawer.close\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div\n #headerEl\n class=\"ea-drawer__header\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-drawer__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-drawer__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;overflow:clip;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer--push{z-index:var(--z-index-modal);pointer-events:none}.ea-drawer--push::backdrop{display:none}.ea-drawer--push .ea-drawer__panel{pointer-events:auto}.ea-drawer--push .ea-drawer__panel--left,.ea-drawer--push .ea-drawer__panel--right,.ea-drawer--push .ea-drawer__panel--start,.ea-drawer--push .ea-drawer__panel--end{max-inline-size:calc(100vw - var(--ea-drawer-push-min, 8rem))}.ea-drawer--push .ea-drawer__panel--top,.ea-drawer--push .ea-drawer__panel--bottom{max-block-size:calc(100vh - var(--ea-drawer-push-min, 8rem))}.ea-drawer--linear{--ea-drawer-ease: var(--ease-linear)}.ea-drawer--animated::backdrop{opacity:0;transition:opacity var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer--animated .ea-drawer__panel{transition:transform var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer .ea-drawer__panel--right{transform:translate(100%)}.ea-drawer .ea-drawer__panel--left{transform:translate(-100%)}.ea-drawer .ea-drawer__panel--start{transform:translate(calc(-100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--end{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--top{transform:translateY(-100%)}.ea-drawer .ea-drawer__panel--bottom{transform:translateY(100%)}.ea-drawer--entered::backdrop{opacity:1}.ea-drawer--entered .ea-drawer__panel{transform:none}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--ea-drawer-panel-background-color, var(--color-bg-elevated));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-drawer__panel{border:1px solid CanvasText}}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--start{top:0;inset-inline-start:0;bottom:0;height:100%}.ea-drawer__panel--end{top:0;inset-inline-end:0;bottom:0;height:100%}.ea-drawer__panel--2xs{--ea-drawer-inline-size: 12rem;--ea-drawer-block-size: 6rem}.ea-drawer__panel--xs{--ea-drawer-inline-size: 16rem;--ea-drawer-block-size: 8rem}.ea-drawer__panel--sm{--ea-drawer-inline-size: 20rem;--ea-drawer-block-size: 12rem}.ea-drawer__panel--md{--ea-drawer-inline-size: 28rem;--ea-drawer-block-size: 20rem}.ea-drawer__panel--lg{--ea-drawer-inline-size: 36rem;--ea-drawer-block-size: 28rem}.ea-drawer__panel--xl{--ea-drawer-inline-size: 44rem;--ea-drawer-block-size: 36rem}.ea-drawer__panel--full{--ea-drawer-inline-size: calc(100vw - 3rem) ;--ea-drawer-block-size: calc(100vh - 3rem) }.ea-drawer__panel--right,.ea-drawer__panel--left,.ea-drawer__panel--start,.ea-drawer__panel--end{width:var(--ea-drawer-inline-size, 28rem)}.ea-drawer__panel--top{top:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--bottom{bottom:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__header{padding-top:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__body{padding-block:var(--space-2)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__footer{padding-bottom:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__header{padding-top:var(--space-2);padding-bottom:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__body{padding-block:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__footer{padding-top:var(--space-1);padding-bottom:var(--space-2)}.ea-drawer__close{
|
|
10498
|
+
args: [{ selector: 'ea-drawer', imports: [NgClass, XIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dialog\n #drawerEl\n class=\"ea-drawer\"\n [class.ea-drawer--animated]=\"animation() !== 'none'\"\n [class.ea-drawer--linear]=\"animation() === 'linear'\"\n [class.ea-drawer--push]=\"mode() === 'push'\"\n [id]=\"id()\"\n [attr.aria-label]=\"ariaLabel() ?? null\"\n [attr.aria-labelledby]=\"!ariaLabel() && hasHeader() ? id() + '-header' : null\"\n (click)=\"handleBackdropClick($event)\"\n (cancel)=\"handleCancel($event)\"\n (keydown)=\"handleKeydown($event)\"\n (close)=\"onDialogClose()\">\n <div\n #panelEl\n class=\"ea-drawer__panel\"\n [ngClass]=\"panelClasses()\">\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-drawer__close\"\n [attr.aria-label]=\"i18n.messages().drawer.close\"\n (click)=\"handleClose()\">\n <ea-icon-x />\n </button>\n }\n\n <div\n #headerEl\n class=\"ea-drawer__header\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n\n <div class=\"ea-drawer__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-drawer__footer\">\n <ng-content select=\"[slot=footer]\" />\n </div>\n </div>\n</dialog>\n", styles: [".ea-drawer{position:fixed;top:0;inset-inline-end:0;bottom:0;inset-inline-start:0;overflow:clip;width:100vw;max-width:none;height:100vh;max-height:none;padding:0;margin:0;border:none;background:transparent}.ea-drawer::backdrop{background-color:var(--color-bg-overlay)}.ea-drawer--push{z-index:var(--z-index-modal);pointer-events:none}.ea-drawer--push::backdrop{display:none}.ea-drawer--push .ea-drawer__panel{pointer-events:auto}.ea-drawer--push .ea-drawer__panel--left,.ea-drawer--push .ea-drawer__panel--right,.ea-drawer--push .ea-drawer__panel--start,.ea-drawer--push .ea-drawer__panel--end{max-inline-size:calc(100vw - var(--ea-drawer-push-min, 8rem))}.ea-drawer--push .ea-drawer__panel--top,.ea-drawer--push .ea-drawer__panel--bottom{max-block-size:calc(100vh - var(--ea-drawer-push-min, 8rem))}.ea-drawer--linear{--ea-drawer-ease: var(--ease-linear)}.ea-drawer--animated::backdrop{opacity:0;transition:opacity var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer--animated .ea-drawer__panel{transition:transform var(--duration-slower) var(--ea-drawer-ease, var(--ease-out))}.ea-drawer .ea-drawer__panel--right{transform:translate(100%)}.ea-drawer .ea-drawer__panel--left{transform:translate(-100%)}.ea-drawer .ea-drawer__panel--start{transform:translate(calc(-100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--end{transform:translate(calc(100% * var(--ea-rtl-sign)))}.ea-drawer .ea-drawer__panel--top{transform:translateY(-100%)}.ea-drawer .ea-drawer__panel--bottom{transform:translateY(100%)}.ea-drawer--entered::backdrop{opacity:1}.ea-drawer--entered .ea-drawer__panel{transform:none}.ea-drawer__panel{position:absolute;display:flex;flex-direction:column;background-color:var(--ea-drawer-panel-background-color, var(--color-bg-elevated));box-shadow:var(--shadow-2xl);overflow:hidden}@media(forced-colors:active){.ea-drawer__panel{border:1px solid CanvasText}}.ea-drawer__panel--right{top:0;right:0;bottom:0;height:100%}.ea-drawer__panel--left{top:0;left:0;bottom:0;height:100%}.ea-drawer__panel--start{top:0;inset-inline-start:0;bottom:0;height:100%}.ea-drawer__panel--end{top:0;inset-inline-end:0;bottom:0;height:100%}.ea-drawer__panel--2xs{--ea-drawer-inline-size: 12rem;--ea-drawer-block-size: 6rem}.ea-drawer__panel--xs{--ea-drawer-inline-size: 16rem;--ea-drawer-block-size: 8rem}.ea-drawer__panel--sm{--ea-drawer-inline-size: 20rem;--ea-drawer-block-size: 12rem}.ea-drawer__panel--md{--ea-drawer-inline-size: 28rem;--ea-drawer-block-size: 20rem}.ea-drawer__panel--lg{--ea-drawer-inline-size: 36rem;--ea-drawer-block-size: 28rem}.ea-drawer__panel--xl{--ea-drawer-inline-size: 44rem;--ea-drawer-block-size: 36rem}.ea-drawer__panel--full{--ea-drawer-inline-size: calc(100vw - 3rem) ;--ea-drawer-block-size: calc(100vh - 3rem) }.ea-drawer__panel--right,.ea-drawer__panel--left,.ea-drawer__panel--start,.ea-drawer__panel--end{width:var(--ea-drawer-inline-size, 28rem)}.ea-drawer__panel--top{top:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--bottom{bottom:0;inset-inline-start:0;inset-inline-end:0;width:100%;height:var(--ea-drawer-block-size, 20rem)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__header{padding-top:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__body{padding-block:var(--space-2)}.ea-drawer__panel--top.ea-drawer__panel--sm .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--sm .ea-drawer__footer{padding-bottom:var(--space-3)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__header,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__header{padding-top:var(--space-2);padding-bottom:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__body,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__body{padding-block:var(--space-1)}.ea-drawer__panel--top.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--top.ea-drawer__panel--2xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--xs .ea-drawer__footer,.ea-drawer__panel--bottom.ea-drawer__panel--2xs .ea-drawer__footer{padding-top:var(--space-1);padding-bottom:var(--space-2)}.ea-drawer__close{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-drawer__close>*{font-size:1.25em}.ea-drawer__close:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-drawer__close:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-drawer__close:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-drawer__close:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-drawer__close:disabled{cursor:not-allowed;opacity:.5}.ea-drawer__close{z-index:1;position:absolute;top:var(--space-3);inset-inline-end:var(--space-3)}.ea-drawer__header{padding:var(--space-5) var(--space-6) var(--space-3);font-size:var(--text-h4-size);font-weight:var(--text-h4-weight);line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-drawer__header:empty{display:none}.ea-drawer__body{flex:1;padding:var(--space-3) var(--space-6);overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-drawer__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--space-3) var(--space-6) var(--space-5)}.ea-drawer__footer>*{display:flex;align-items:center;gap:var(--space-3)}.ea-drawer__footer:empty{display:none}\n"] }]
|
|
10427
10499
|
}], ctorParameters: () => [], propDecorators: { drawerEl: [{ type: i0.ViewChild, args: ['drawerEl', { isSignal: true }] }], panelEl: [{ type: i0.ViewChild, args: ['panelEl', { isSignal: true }] }], headerEl: [{ type: i0.ViewChild, args: ['headerEl', { isSignal: true }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], pushTarget: [{ type: i0.Input, args: [{ isSignal: true, alias: "pushTarget", required: false }] }], closeOnBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnBackdrop", required: false }] }], closeOnEscape: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnEscape", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], opened: [{ type: i0.Output, args: ["opened"] }], closed: [{ type: i0.Output, args: ["closed"] }] } });
|
|
10428
10500
|
|
|
10429
10501
|
/**
|
|
@@ -10441,6 +10513,7 @@ class DropdownComponent {
|
|
|
10441
10513
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
10442
10514
|
placeholder = input(undefined, /* @ts-ignore */
|
|
10443
10515
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
10516
|
+
/** Selectable options, either flat or split into groups. */
|
|
10444
10517
|
options = input([], /* @ts-ignore */
|
|
10445
10518
|
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
10446
10519
|
size = input('md', /* @ts-ignore */
|
|
@@ -10488,8 +10561,23 @@ class DropdownComponent {
|
|
|
10488
10561
|
showError = this.hasError;
|
|
10489
10562
|
showHint = computed(() => !!this.hint() && !this.hasError(), /* @ts-ignore */
|
|
10490
10563
|
...(ngDevMode ? [{ debugName: "showHint" }] : /* istanbul ignore next */ []));
|
|
10564
|
+
optionGroups = computed(() => toGroups(this.options()), /* @ts-ignore */
|
|
10565
|
+
...(ngDevMode ? [{ debugName: "optionGroups" }] : /* istanbul ignore next */ []));
|
|
10566
|
+
/** Whether the consumer supplied groups, which the list exposes as ARIA groups. */
|
|
10567
|
+
grouped = computed(() => isGrouped(this.options()), /* @ts-ignore */
|
|
10568
|
+
...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
|
|
10569
|
+
/** Every option in the order given, flattened across groups; drives all index maths. */
|
|
10570
|
+
flatOptions = computed(() => flattenGroups(this.optionGroups()), /* @ts-ignore */
|
|
10571
|
+
...(ngDevMode ? [{ debugName: "flatOptions" }] : /* istanbul ignore next */ []));
|
|
10572
|
+
/** Groups to render, each option carrying its index into the flattened list. */
|
|
10573
|
+
renderedGroups = computed(() => toRenderedGroups(this.optionGroups()), /* @ts-ignore */
|
|
10574
|
+
...(ngDevMode ? [{ debugName: "renderedGroups" }] : /* istanbul ignore next */ []));
|
|
10575
|
+
// A value repeated across groups renders twice, but a single-select listbox
|
|
10576
|
+
// may only mark one option selected
|
|
10577
|
+
selectedIndex = computed(() => this.flatOptions().findIndex(o => o.value === this.value()), /* @ts-ignore */
|
|
10578
|
+
...(ngDevMode ? [{ debugName: "selectedIndex" }] : /* istanbul ignore next */ []));
|
|
10491
10579
|
selectedLabel = computed(() => {
|
|
10492
|
-
const opt = this.
|
|
10580
|
+
const opt = this.flatOptions().find(o => o.value === this.value());
|
|
10493
10581
|
return opt?.label ?? '';
|
|
10494
10582
|
}, /* @ts-ignore */
|
|
10495
10583
|
...(ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -10529,7 +10617,7 @@ class DropdownComponent {
|
|
|
10529
10617
|
}
|
|
10530
10618
|
this.isOpen.set(!this.isOpen());
|
|
10531
10619
|
if (this.isOpen()) {
|
|
10532
|
-
const selected = this.
|
|
10620
|
+
const selected = this.flatOptions().findIndex(o => o.value === this.value());
|
|
10533
10621
|
if (selected >= 0) {
|
|
10534
10622
|
this.focusedIndex.set(selected);
|
|
10535
10623
|
}
|
|
@@ -10628,7 +10716,7 @@ class DropdownComponent {
|
|
|
10628
10716
|
selectFocusedOrOpen(event) {
|
|
10629
10717
|
event.preventDefault();
|
|
10630
10718
|
if (this.isOpen()) {
|
|
10631
|
-
const opts = this.
|
|
10719
|
+
const opts = this.flatOptions();
|
|
10632
10720
|
const idx = this.focusedIndex();
|
|
10633
10721
|
if (idx >= 0 && idx < opts.length && !opts[idx].disabled) {
|
|
10634
10722
|
this.select(opts[idx]);
|
|
@@ -10639,7 +10727,7 @@ class DropdownComponent {
|
|
|
10639
10727
|
}
|
|
10640
10728
|
}
|
|
10641
10729
|
focusEdge(direction) {
|
|
10642
|
-
const opts = this.
|
|
10730
|
+
const opts = this.flatOptions();
|
|
10643
10731
|
let idx = direction === 1 ? 0 : opts.length - 1;
|
|
10644
10732
|
while (idx >= 0 && idx < opts.length && opts[idx].disabled) {
|
|
10645
10733
|
idx += direction;
|
|
@@ -10669,7 +10757,7 @@ class DropdownComponent {
|
|
|
10669
10757
|
if (!wasOpen) {
|
|
10670
10758
|
this.toggle();
|
|
10671
10759
|
}
|
|
10672
|
-
const opts = this.
|
|
10760
|
+
const opts = this.flatOptions();
|
|
10673
10761
|
if (opts.length === 0) {
|
|
10674
10762
|
return;
|
|
10675
10763
|
}
|
|
@@ -10687,7 +10775,7 @@ class DropdownComponent {
|
|
|
10687
10775
|
}
|
|
10688
10776
|
}
|
|
10689
10777
|
moveFocus(delta) {
|
|
10690
|
-
const opts = this.
|
|
10778
|
+
const opts = this.flatOptions();
|
|
10691
10779
|
let idx = this.focusedIndex() + delta;
|
|
10692
10780
|
while (idx >= 0 && idx < opts.length && opts[idx].disabled) {
|
|
10693
10781
|
idx += delta;
|
|
@@ -10703,7 +10791,7 @@ class DropdownComponent {
|
|
|
10703
10791
|
useExisting: forwardRef(() => DropdownComponent),
|
|
10704
10792
|
multi: true,
|
|
10705
10793
|
},
|
|
10706
|
-
], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-dropdown\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-dropdown__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n [attr.aria-activedescendant]=\"\n isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n </span>\n <ea-icon-chevron-down\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n </button>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [surfaceId]=\"id() + '-listbox'\"\n [aria-label]=\"label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\">\n @for (
|
|
10794
|
+
], viewQueries: [{ propertyName: "elRef", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-dropdown\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-dropdown__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n [attr.aria-activedescendant]=\"\n isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n </span>\n <ea-icon-chevron-down\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n </button>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [surfaceId]=\"id() + '-listbox'\"\n [aria-label]=\"label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-dropdown__group\"\n [class.ea-dropdown__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-dropdown__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-option-' + entry.index\"\n role=\"option\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"select(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{max-height:15rem;padding:var(--space-1) 0;overflow-y:auto;overscroll-behavior:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-border-default);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"], dependencies: [{ kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "maxWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
10707
10795
|
}
|
|
10708
10796
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
10709
10797
|
type: Component,
|
|
@@ -10719,7 +10807,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
10719
10807
|
useExisting: forwardRef(() => DropdownComponent),
|
|
10720
10808
|
multi: true,
|
|
10721
10809
|
},
|
|
10722
|
-
], template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-dropdown\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-dropdown__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n [attr.aria-activedescendant]=\"\n isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n </span>\n <ea-icon-chevron-down\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n </button>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [surfaceId]=\"id() + '-listbox'\"\n [aria-label]=\"label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\">\n @for (
|
|
10810
|
+
], template: "<div class=\"ea-dropdown-field ea-dropdown-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-dropdown\">\n <button\n #triggerEl\n type=\"button\"\n class=\"ea-dropdown__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [disabled]=\"isDisabled()\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? id() + '-listbox' : null\"\n [attr.aria-activedescendant]=\"\n isOpen() && focusedIndex() >= 0 ? id() + '-option-' + focusedIndex() : null\n \"\n [attr.aria-labelledby]=\"triggerLabelledBy()\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (click)=\"toggle()\"\n (keydown)=\"handleKeydown($event)\">\n <span\n class=\"ea-dropdown__value\"\n [class.ea-dropdown__value--placeholder]=\"!selectedLabel()\">\n <bdi>{{ selectedLabel() || resolvedPlaceholder() }}</bdi>\n </span>\n <ea-icon-chevron-down\n class=\"ea-dropdown__chevron\"\n [class.ea-dropdown__chevron--open]=\"isOpen()\" />\n </button>\n\n <ea-popover\n [anchor]=\"triggerEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n role=\"listbox\"\n [surfaceId]=\"id() + '-listbox'\"\n [aria-label]=\"label()\"\n [matchAnchorWidth]=\"true\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"close\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-dropdown__menu\"\n [ngClass]=\"menuClasses()\"\n role=\"none\">\n @for (group of renderedGroups(); track $index) {\n <div\n class=\"ea-dropdown__group\"\n [class.ea-dropdown__group--ruled]=\"group.rule\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @if (group.label; as groupLabel) {\n <div\n class=\"ea-dropdown__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </div>\n }\n @for (entry of group.options; track entry.option.value) {\n <div\n class=\"ea-dropdown__option\"\n [class.ea-dropdown__option--selected]=\"entry.option.value === value()\"\n [class.ea-dropdown__option--focused]=\"entry.index === focusedIndex()\"\n [class.ea-dropdown__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-option-' + entry.index\"\n role=\"option\"\n [attr.aria-selected]=\"entry.index === selectedIndex()\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"select(entry.option)\"\n (mouseenter)=\"focusedIndex.set(entry.index)\">\n {{ entry.option.label }}\n </div>\n }\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-dropdown-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-dropdown-field--2xs{font-size:var(--font-size-2xs)}.ea-dropdown-field--xs{font-size:var(--font-size-xs)}.ea-dropdown-field--sm{font-size:var(--font-size-sm)}.ea-dropdown-field--md{font-size:var(--font-size-md)}.ea-dropdown-field--lg{font-size:var(--font-size-lg)}.ea-dropdown-field--xl{font-size:var(--font-size-xl)}.ea-dropdown{position:relative}.ea-dropdown__trigger{display:flex;align-items:center;justify-content:space-between;gap:.5em;width:100%;min-height:2.5em;padding:.5em .75em;text-align:start;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-dropdown__trigger:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--open{border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--error{border-color:var(--color-error-default)}.ea-dropdown__trigger--error.ea-dropdown__trigger--open{box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-dropdown__trigger--error.ea-dropdown__trigger--open{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__trigger--disabled{background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-dropdown__trigger--readonly{cursor:default}.ea-dropdown__trigger--readonly:focus-visible{border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-dropdown__trigger--readonly:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-dropdown__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-dropdown__value--placeholder{color:var(--color-text-tertiary)}.ea-dropdown__chevron{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-dropdown__chevron--open{transform:rotate(180deg)}.ea-dropdown__menu{max-height:15rem;padding:var(--space-1) 0;overflow-y:auto;overscroll-behavior:none;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-dropdown-menu-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-dropdown__menu{border:1px solid CanvasText}}.ea-dropdown__menu--2xs{font-size:var(--font-size-2xs)}.ea-dropdown__menu--xs{font-size:var(--font-size-xs)}.ea-dropdown__menu--sm{font-size:var(--font-size-sm)}.ea-dropdown__menu--md{font-size:var(--font-size-md)}.ea-dropdown__menu--lg{font-size:var(--font-size-lg)}.ea-dropdown__menu--xl{font-size:var(--font-size-xl)}.ea-dropdown__group{position:relative}.ea-dropdown__group--ruled{padding-top:.25em;margin-top:.25em}.ea-dropdown__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-border-default);content:\"\"}.ea-dropdown__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-dropdown__option{padding:.5em .75em;font-size:inherit;white-space:nowrap;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-dropdown__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-dropdown__option--focused{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--selected{color:var(--color-brand-text);font-weight:var(--font-weight-medium)}@media(forced-colors:active){.ea-dropdown__option--selected{background-color:Highlight;color:HighlightText}}.ea-dropdown__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-dropdown__option--disabled{color:GrayText}}\n"] }]
|
|
10723
10811
|
}], ctorParameters: () => [], propDecorators: { elRef: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
10724
10812
|
|
|
10725
10813
|
class EagamiIconComponent extends IconComponentBase {
|
|
@@ -13116,6 +13204,7 @@ class MultiSelectComponent {
|
|
|
13116
13204
|
...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
|
|
13117
13205
|
searchPlaceholder = input(undefined, /* @ts-ignore */
|
|
13118
13206
|
...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : /* istanbul ignore next */ []));
|
|
13207
|
+
/** Selectable options, either flat or split into groups. */
|
|
13119
13208
|
options = input([], /* @ts-ignore */
|
|
13120
13209
|
...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
|
|
13121
13210
|
size = input('md', /* @ts-ignore */
|
|
@@ -13186,21 +13275,31 @@ class MultiSelectComponent {
|
|
|
13186
13275
|
/** Set-backed lookup for `selectedSet().has(value)`. */
|
|
13187
13276
|
selectedSet = computed(() => new Set(this.value()), /* @ts-ignore */
|
|
13188
13277
|
...(ngDevMode ? [{ debugName: "selectedSet" }] : /* istanbul ignore next */ []));
|
|
13189
|
-
|
|
13190
|
-
|
|
13278
|
+
optionGroups = computed(() => toGroups(this.options()), /* @ts-ignore */
|
|
13279
|
+
...(ngDevMode ? [{ debugName: "optionGroups" }] : /* istanbul ignore next */ []));
|
|
13280
|
+
/** Whether the consumer supplied groups, which the list exposes as ARIA groups. */
|
|
13281
|
+
grouped = computed(() => isGrouped(this.options()), /* @ts-ignore */
|
|
13282
|
+
...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
|
|
13283
|
+
/** Every option in the order given, flattened across groups. */
|
|
13284
|
+
flatOptions = computed(() => flattenGroups(this.optionGroups()), /* @ts-ignore */
|
|
13285
|
+
...(ngDevMode ? [{ debugName: "flatOptions" }] : /* istanbul ignore next */ []));
|
|
13286
|
+
filteredGroups = computed(() => {
|
|
13191
13287
|
const term = this.searchTerm().trim().toLowerCase();
|
|
13192
|
-
const
|
|
13288
|
+
const groups = this.optionGroups();
|
|
13193
13289
|
if (!term) {
|
|
13194
|
-
return
|
|
13290
|
+
return groups;
|
|
13195
13291
|
}
|
|
13196
|
-
return
|
|
13292
|
+
return filterGroups(groups, o => o.label.toLowerCase().includes(term));
|
|
13197
13293
|
}, /* @ts-ignore */
|
|
13294
|
+
...(ngDevMode ? [{ debugName: "filteredGroups" }] : /* istanbul ignore next */ []));
|
|
13295
|
+
/** Options matching the current search term (case-insensitive substring on label). */
|
|
13296
|
+
filteredOptions = computed(() => flattenGroups(this.filteredGroups()), /* @ts-ignore */
|
|
13198
13297
|
...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
13298
|
+
/** Groups to render, each option carrying its index into `filteredOptions`. */
|
|
13299
|
+
renderedGroups = computed(() => toRenderedGroups(this.filteredGroups()), /* @ts-ignore */
|
|
13300
|
+
...(ngDevMode ? [{ debugName: "renderedGroups" }] : /* istanbul ignore next */ []));
|
|
13199
13301
|
/** Currently selected options, ordered to match the input `options`. */
|
|
13200
|
-
selectedOptions = computed(() =>
|
|
13201
|
-
const set = this.selectedSet();
|
|
13202
|
-
return this.options().filter(o => set.has(o.value));
|
|
13203
|
-
}, /* @ts-ignore */
|
|
13302
|
+
selectedOptions = computed(() => this.optionsFor(this.selectedSet()), /* @ts-ignore */
|
|
13204
13303
|
...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
|
|
13205
13304
|
hasValue = computed(() => this.value().length > 0, /* @ts-ignore */
|
|
13206
13305
|
...(ngDevMode ? [{ debugName: "hasValue" }] : /* istanbul ignore next */ []));
|
|
@@ -13528,9 +13627,21 @@ class MultiSelectComponent {
|
|
|
13528
13627
|
}
|
|
13529
13628
|
/** Reorder a value-set against the input `options` array. */
|
|
13530
13629
|
orderedValues(set) {
|
|
13531
|
-
return this.
|
|
13532
|
-
|
|
13533
|
-
|
|
13630
|
+
return this.optionsFor(set).map(o => o.value);
|
|
13631
|
+
}
|
|
13632
|
+
// A value listed in more than one group (a "recently used" section repeating an
|
|
13633
|
+
// option below it) still stands for one selection, so it resolves to one chip
|
|
13634
|
+
// and one entry in the value
|
|
13635
|
+
optionsFor(values) {
|
|
13636
|
+
const seen = new Set();
|
|
13637
|
+
const picked = [];
|
|
13638
|
+
for (const option of this.flatOptions()) {
|
|
13639
|
+
if (values.has(option.value) && !seen.has(option.value)) {
|
|
13640
|
+
seen.add(option.value);
|
|
13641
|
+
picked.push(option);
|
|
13642
|
+
}
|
|
13643
|
+
}
|
|
13644
|
+
return picked;
|
|
13534
13645
|
}
|
|
13535
13646
|
resetEditState() {
|
|
13536
13647
|
this.searchTerm.set('');
|
|
@@ -13580,7 +13691,7 @@ class MultiSelectComponent {
|
|
|
13580
13691
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
13581
13692
|
multi: true,
|
|
13582
13693
|
},
|
|
13583
|
-
], viewQueries: [{ propertyName: "wrapperEl", first: true, predicate: ["wrapperEl"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }, { propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }, { propertyName: "optionLabelEls", predicate: ["optionLabelEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\n #wrapperEl\n class=\"ea-multi-select__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n (click)=\"onTriggerAreaClick()\">\n <div\n #triggerEl\n class=\"ea-multi-select__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (keydown)=\"handleTriggerKeydown($event)\">\n <span class=\"ea-multi-select__trigger-content\">\n @if (!hasValue()) {\n <span class=\"ea-multi-select__trigger-placeholder\">\n <bdi>{{ resolvedPlaceholder() }}</bdi>\n </span>\n } @else {\n @for (opt of visibleChips(); track opt.value) {\n <ea-tag\n [size]=\"size()\"\n variant=\"default\"\n [maxWidth]=\"maxChipWidth()\"\n [removable]=\"!isDisabled() && !readonly()\"\n [removeTabbable]=\"false\"\n [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n (removed)=\"removeChip(opt)\">\n <span>{{ opt.label }}</span>\n </ea-tag>\n }\n @if (hiddenChipCount() > 0) {\n <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n }\n }\n </span>\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-multi-select__clear\"\n [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-multi-select__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n <ea-icon-chevron-down\n class=\"ea-multi-select__trigger-icon\"\n aria-hidden=\"true\" />\n </div>\n\n <ea-popover\n [anchor]=\"wrapperEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n [matchAnchorWidth]=\"true\"\n [maxWidth]=\"popoverMaxWidth()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\">\n @if (searchable()) {\n <div class=\"ea-multi-select__search\">\n <ea-icon-search\n class=\"ea-multi-select__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-multi-select__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"resolvedSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"handlePopoverKeydown($event)\" />\n </div>\n }\n\n <ul\n #listEl\n class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\n [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n @if (selectAllVisible()) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n [id]=\"id() + '-opt-0'\"\n role=\"option\"\n [attr.aria-selected]=\"selectAllState() === 'all'\"\n [attr.aria-checked]=\"selectAllAriaChecked()\"\n (click)=\"onSelectAllClick()\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectAllState() === 'all'\"\n [indeterminate]=\"selectAllState() === 'some'\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.selectAll }}\n </span>\n </li>\n }\n @for (opt of filteredOptions(); track opt.value; let i = $index) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === i + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled || null\"\n (click)=\"onOptionClick(opt, i)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(opt.value)\"\n [disabled]=\"!!opt.disabled\" />\n <span\n #optionLabelEl\n class=\"ea-multi-select__option-label\"\n [attr.data-value]=\"opt.value\"\n [eaTooltip]=\"clippedOptions().has(opt.value) ? opt.label : ''\">\n {{ opt.label }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0) {\n <div\n class=\"ea-multi-select__empty\"\n role=\"status\">\n {{ i18n.messages().multiSelect.searchEmpty }}\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ea-checkbox", inputs: ["label", "count", "hint", "errorMsg", "errorMessages", "size", "disabled", "required", "indeterminate", "aria-label", "id", "checked"], outputs: ["checkedChange", "changed"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "maxWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: TagComponent, selector: "ea-tag", inputs: ["variant", "size", "removable", "disabled", "removeLabel", "maxWidth", "tooltip", "removeTabbable"], outputs: ["removed"] }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition", "maxWidth"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13694
|
+
], viewQueries: [{ propertyName: "wrapperEl", first: true, predicate: ["wrapperEl"], descendants: true, isSignal: true }, { propertyName: "triggerEl", first: true, predicate: ["triggerEl"], descendants: true, isSignal: true }, { propertyName: "searchEl", first: true, predicate: ["searchEl"], descendants: true, isSignal: true }, { propertyName: "listEl", first: true, predicate: ["listEl"], descendants: true, isSignal: true }, { propertyName: "optionLabelEls", predicate: ["optionLabelEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\n #wrapperEl\n class=\"ea-multi-select__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n (click)=\"onTriggerAreaClick()\">\n <div\n #triggerEl\n class=\"ea-multi-select__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (keydown)=\"handleTriggerKeydown($event)\">\n <span class=\"ea-multi-select__trigger-content\">\n @if (!hasValue()) {\n <span class=\"ea-multi-select__trigger-placeholder\">\n <bdi>{{ resolvedPlaceholder() }}</bdi>\n </span>\n } @else {\n @for (opt of visibleChips(); track opt.value) {\n <ea-tag\n [size]=\"size()\"\n variant=\"default\"\n [maxWidth]=\"maxChipWidth()\"\n [removable]=\"!isDisabled() && !readonly()\"\n [removeTabbable]=\"false\"\n [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n (removed)=\"removeChip(opt)\">\n <span>{{ opt.label }}</span>\n </ea-tag>\n }\n @if (hiddenChipCount() > 0) {\n <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n }\n }\n </span>\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-multi-select__clear\"\n [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-multi-select__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n <ea-icon-chevron-down\n class=\"ea-multi-select__trigger-icon\"\n aria-hidden=\"true\" />\n </div>\n\n <ea-popover\n [anchor]=\"wrapperEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n [matchAnchorWidth]=\"true\"\n [maxWidth]=\"popoverMaxWidth()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\">\n @if (searchable()) {\n <div class=\"ea-multi-select__search\">\n <ea-icon-search\n class=\"ea-multi-select__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-multi-select__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"resolvedSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"handlePopoverKeydown($event)\" />\n </div>\n }\n\n <ul\n #listEl\n class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\n [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n @if (selectAllVisible()) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n [id]=\"id() + '-opt-0'\"\n role=\"option\"\n [attr.aria-selected]=\"selectAllState() === 'all'\"\n [attr.aria-checked]=\"selectAllAriaChecked()\"\n (click)=\"onSelectAllClick()\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectAllState() === 'all'\"\n [indeterminate]=\"selectAllState() === 'some'\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.selectAll }}\n </span>\n </li>\n }\n @for (group of renderedGroups(); track $index) {\n <li\n class=\"ea-multi-select__group\"\n [class.ea-multi-select__group--ruled]=\"group.rule\"\n role=\"presentation\">\n @if (group.label; as groupLabel) {\n <span\n class=\"ea-multi-select__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </span>\n }\n <ul\n class=\"ea-multi-select__group-options\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @for (entry of group.options; track entry.option.value) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === entry.index + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"onOptionClick(entry.option, entry.index)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(entry.option.value)\"\n [disabled]=\"!!entry.option.disabled\" />\n <span\n #optionLabelEl\n class=\"ea-multi-select__option-label\"\n [attr.data-value]=\"entry.option.value\"\n [eaTooltip]=\"\n clippedOptions().has(entry.option.value) ? entry.option.label : ''\n \">\n {{ entry.option.label }}\n </span>\n </li>\n }\n </ul>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0) {\n <div\n class=\"ea-multi-select__empty\"\n role=\"status\">\n {{ i18n.messages().multiSelect.searchEmpty }}\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__group{position:relative}.ea-multi-select__group--ruled{padding-top:.25em;margin-top:.25em}.ea-multi-select__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-border-default);content:\"\"}.ea-multi-select__group-options{padding:0;margin:0;list-style:none}.ea-multi-select__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "ea-checkbox", inputs: ["label", "count", "hint", "errorMsg", "errorMessages", "size", "disabled", "required", "indeterminate", "aria-label", "id", "checked"], outputs: ["checkedChange", "changed"] }, { kind: "component", type: ChevronDownIconComponent, selector: "ea-icon-chevron-down" }, { kind: "component", type: FieldLabelComponent, selector: "ea-field-label", inputs: ["text", "forId", "required", "labelId"] }, { kind: "component", type: FieldMessagesComponent, selector: "ea-field-messages", inputs: ["id", "error", "hint"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: PopoverComponent, selector: "ea-popover", inputs: ["anchor", "open", "placement", "role", "aria-label", "aria-labelledby", "trapFocus", "surfaceId", "offset", "flip", "clamp", "matchAnchorWidth", "maxWidth", "closeOnOutsideClick", "closeOnEscape", "scrollBehavior"], outputs: ["closeRequested"] }, { kind: "component", type: SearchIconComponent, selector: "ea-icon-search" }, { kind: "component", type: TagComponent, selector: "ea-tag", inputs: ["variant", "size", "removable", "disabled", "removeLabel", "maxWidth", "tooltip", "removeTabbable"], outputs: ["removed"] }, { kind: "directive", type: TooltipDirective, selector: "[eaTooltip]", inputs: ["eaTooltip", "tooltipPosition", "maxWidth"] }, { kind: "component", type: XIconComponent, selector: "ea-icon-x" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
13584
13695
|
}
|
|
13585
13696
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
13586
13697
|
type: Component,
|
|
@@ -13601,7 +13712,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
13601
13712
|
useExisting: forwardRef(() => MultiSelectComponent),
|
|
13602
13713
|
multi: true,
|
|
13603
13714
|
},
|
|
13604
|
-
], template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\n #wrapperEl\n class=\"ea-multi-select__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n (click)=\"onTriggerAreaClick()\">\n <div\n #triggerEl\n class=\"ea-multi-select__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (keydown)=\"handleTriggerKeydown($event)\">\n <span class=\"ea-multi-select__trigger-content\">\n @if (!hasValue()) {\n <span class=\"ea-multi-select__trigger-placeholder\">\n <bdi>{{ resolvedPlaceholder() }}</bdi>\n </span>\n } @else {\n @for (opt of visibleChips(); track opt.value) {\n <ea-tag\n [size]=\"size()\"\n variant=\"default\"\n [maxWidth]=\"maxChipWidth()\"\n [removable]=\"!isDisabled() && !readonly()\"\n [removeTabbable]=\"false\"\n [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n (removed)=\"removeChip(opt)\">\n <span>{{ opt.label }}</span>\n </ea-tag>\n }\n @if (hiddenChipCount() > 0) {\n <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n }\n }\n </span>\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-multi-select__clear\"\n [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-multi-select__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n <ea-icon-chevron-down\n class=\"ea-multi-select__trigger-icon\"\n aria-hidden=\"true\" />\n </div>\n\n <ea-popover\n [anchor]=\"wrapperEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n [matchAnchorWidth]=\"true\"\n [maxWidth]=\"popoverMaxWidth()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\">\n @if (searchable()) {\n <div class=\"ea-multi-select__search\">\n <ea-icon-search\n class=\"ea-multi-select__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-multi-select__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"resolvedSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"handlePopoverKeydown($event)\" />\n </div>\n }\n\n <ul\n #listEl\n class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\n [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n @if (selectAllVisible()) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n [id]=\"id() + '-opt-0'\"\n role=\"option\"\n [attr.aria-selected]=\"selectAllState() === 'all'\"\n [attr.aria-checked]=\"selectAllAriaChecked()\"\n (click)=\"onSelectAllClick()\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectAllState() === 'all'\"\n [indeterminate]=\"selectAllState() === 'some'\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.selectAll }}\n </span>\n </li>\n }\n @for (opt of filteredOptions(); track opt.value; let i = $index) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === i + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"opt.disabled\"\n [id]=\"id() + '-opt-' + (i + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(opt.value)\"\n [attr.aria-disabled]=\"opt.disabled || null\"\n (click)=\"onOptionClick(opt, i)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(opt.value)\"\n [disabled]=\"!!opt.disabled\" />\n <span\n #optionLabelEl\n class=\"ea-multi-select__option-label\"\n [attr.data-value]=\"opt.value\"\n [eaTooltip]=\"clippedOptions().has(opt.value) ? opt.label : ''\">\n {{ opt.label }}\n </span>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0) {\n <div\n class=\"ea-multi-select__empty\"\n role=\"status\">\n {{ i18n.messages().multiSelect.searchEmpty }}\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"] }]
|
|
13715
|
+
], template: "<div class=\"ea-multi-select-field ea-multi-select-field--{{ size() }}\">\n @if (label(); as labelText) {\n <ea-field-label\n [text]=\"labelText\"\n [forId]=\"id()\"\n [labelId]=\"id() + '-label'\"\n [required]=\"required()\" />\n }\n\n <div class=\"ea-multi-select\">\n <div\n #wrapperEl\n class=\"ea-multi-select__trigger-wrapper\"\n [ngClass]=\"wrapperClasses()\"\n (click)=\"onTriggerAreaClick()\">\n <div\n #triggerEl\n class=\"ea-multi-select__trigger\"\n [ngClass]=\"triggerClasses()\"\n [id]=\"id()\"\n role=\"combobox\"\n [attr.tabindex]=\"isDisabled() ? -1 : 0\"\n [attr.aria-labelledby]=\"label() ? id() + '-label' : null\"\n [attr.aria-label]=\"label() ? null : (ariaLabel() ?? null)\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-controls]=\"isOpen() ? listboxId() : null\"\n [attr.aria-activedescendant]=\"isOpen() && !searchable() ? activeOptionId() : null\"\n [attr.aria-disabled]=\"isDisabled() || null\"\n [attr.aria-required]=\"required() || null\"\n [attr.aria-invalid]=\"hasError() || null\"\n [attr.aria-describedby]=\"\n showError() ? id() + '-error' : showHint() ? id() + '-hint' : null\n \"\n (keydown)=\"handleTriggerKeydown($event)\">\n <span class=\"ea-multi-select__trigger-content\">\n @if (!hasValue()) {\n <span class=\"ea-multi-select__trigger-placeholder\">\n <bdi>{{ resolvedPlaceholder() }}</bdi>\n </span>\n } @else {\n @for (opt of visibleChips(); track opt.value) {\n <ea-tag\n [size]=\"size()\"\n variant=\"default\"\n [maxWidth]=\"maxChipWidth()\"\n [removable]=\"!isDisabled() && !readonly()\"\n [removeTabbable]=\"false\"\n [removeLabel]=\"i18n.messages().multiSelect.removeOption(opt.label)\"\n (removed)=\"removeChip(opt)\">\n <span>{{ opt.label }}</span>\n </ea-tag>\n }\n @if (hiddenChipCount() > 0) {\n <span class=\"ea-multi-select__more\">+{{ hiddenChipCount() }}</span>\n }\n }\n </span>\n </div>\n @if (hasValue() && !isDisabled() && !readonly()) {\n <button\n type=\"button\"\n class=\"ea-multi-select__clear\"\n [attr.aria-label]=\"i18n.messages().multiSelect.clearAll\"\n (click)=\"clear($event)\">\n <ea-icon-x\n class=\"ea-multi-select__clear-icon\"\n aria-hidden=\"true\" />\n </button>\n }\n <ea-icon-chevron-down\n class=\"ea-multi-select__trigger-icon\"\n aria-hidden=\"true\" />\n </div>\n\n <ea-popover\n [anchor]=\"wrapperEl\"\n [open]=\"isOpen()\"\n placement=\"bottom-start\"\n [aria-label]=\"i18n.messages().multiSelect.dialogLabel\"\n [matchAnchorWidth]=\"true\"\n [maxWidth]=\"popoverMaxWidth()\"\n [closeOnEscape]=\"false\"\n scrollBehavior=\"reposition\"\n (closeRequested)=\"onPopoverCloseRequested()\">\n <div\n class=\"ea-multi-select__popover\"\n [ngClass]=\"menuClasses()\">\n @if (searchable()) {\n <div class=\"ea-multi-select__search\">\n <ea-icon-search\n class=\"ea-multi-select__search-icon\"\n aria-hidden=\"true\" />\n <input\n #searchEl\n type=\"text\"\n dir=\"auto\"\n class=\"ea-multi-select__search-input\"\n autocomplete=\"off\"\n [placeholder]=\"resolvedSearchPlaceholder()\"\n [value]=\"searchTerm()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-activedescendant]=\"activeOptionId()\"\n (input)=\"onSearchInput($event)\"\n (keydown)=\"handlePopoverKeydown($event)\" />\n </div>\n }\n\n <ul\n #listEl\n class=\"ea-multi-select__list\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [id]=\"listboxId()\"\n [attr.aria-label]=\"label() ?? ariaLabel() ?? null\">\n @if (selectAllVisible()) {\n <li\n class=\"ea-multi-select__option ea-multi-select__option--select-all\"\n [class.ea-multi-select__option--focused]=\"focusedIndex() === 0\"\n [id]=\"id() + '-opt-0'\"\n role=\"option\"\n [attr.aria-selected]=\"selectAllState() === 'all'\"\n [attr.aria-checked]=\"selectAllAriaChecked()\"\n (click)=\"onSelectAllClick()\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectAllState() === 'all'\"\n [indeterminate]=\"selectAllState() === 'some'\" />\n <span class=\"ea-multi-select__option-label\">\n {{ i18n.messages().multiSelect.selectAll }}\n </span>\n </li>\n }\n @for (group of renderedGroups(); track $index) {\n <li\n class=\"ea-multi-select__group\"\n [class.ea-multi-select__group--ruled]=\"group.rule\"\n role=\"presentation\">\n @if (group.label; as groupLabel) {\n <span\n class=\"ea-multi-select__group-label\"\n aria-hidden=\"true\">\n {{ groupLabel }}\n </span>\n }\n <ul\n class=\"ea-multi-select__group-options\"\n [attr.role]=\"grouped() ? 'group' : 'presentation'\"\n [attr.aria-label]=\"group.label ?? null\">\n @for (entry of group.options; track entry.option.value) {\n <li\n class=\"ea-multi-select__option\"\n [class.ea-multi-select__option--focused]=\"\n focusedIndex() === entry.index + selectAllOffset()\n \"\n [class.ea-multi-select__option--disabled]=\"entry.option.disabled\"\n [id]=\"id() + '-opt-' + (entry.index + selectAllOffset())\"\n role=\"option\"\n [attr.aria-selected]=\"selectedSet().has(entry.option.value)\"\n [attr.aria-disabled]=\"entry.option.disabled || null\"\n (click)=\"onOptionClick(entry.option, entry.index)\">\n <ea-checkbox\n size=\"sm\"\n inert\n aria-hidden=\"true\"\n [checked]=\"selectedSet().has(entry.option.value)\"\n [disabled]=\"!!entry.option.disabled\" />\n <span\n #optionLabelEl\n class=\"ea-multi-select__option-label\"\n [attr.data-value]=\"entry.option.value\"\n [eaTooltip]=\"\n clippedOptions().has(entry.option.value) ? entry.option.label : ''\n \">\n {{ entry.option.label }}\n </span>\n </li>\n }\n </ul>\n </li>\n }\n </ul>\n @if (filteredOptions().length === 0) {\n <div\n class=\"ea-multi-select__empty\"\n role=\"status\">\n {{ i18n.messages().multiSelect.searchEmpty }}\n </div>\n }\n </div>\n </ea-popover>\n </div>\n\n <ea-field-messages\n [id]=\"id()\"\n [error]=\"errorText()\"\n [hint]=\"showHint() ? hint() : null\" />\n</div>\n", styles: [".ea-multi-select-field{display:flex;flex-direction:column;gap:.375em;--ea-field-label-size: .875em;--ea-field-messages-size: .8125em}.ea-multi-select-field--2xs{font-size:var(--font-size-2xs)}.ea-multi-select-field--xs{font-size:var(--font-size-xs)}.ea-multi-select-field--sm{font-size:var(--font-size-sm)}.ea-multi-select-field--md{font-size:var(--font-size-md)}.ea-multi-select-field--lg{font-size:var(--font-size-lg)}.ea-multi-select-field--xl{font-size:var(--font-size-xl)}.ea-multi-select{position:relative}.ea-multi-select__trigger-wrapper{position:relative;display:flex;align-items:center;gap:.5em;width:100%;min-height:2.5em;padding:.375em .75em;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors),var(--transition-shadow)}.ea-multi-select__trigger-wrapper:has(ea-tag){padding-block:.125em}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){border-color:var(--color-border-focus);box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error){border-color:var(--color-error-default)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){box-shadow:var(--shadow-focus-ring-error)}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--error.ea-multi-select__trigger--open){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--disabled){background-color:var(--color-bg-muted);opacity:.6;cursor:not-allowed}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly){cursor:default}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){border-color:var(--color-border-focus);box-shadow:none}@media(forced-colors:active){.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--readonly:focus-visible){outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__trigger{display:flex;align-items:center;flex:1;min-width:0;text-align:start;font-family:var(--font-family-sans);cursor:pointer}.ea-multi-select__trigger:focus-visible{outline:none}.ea-multi-select__trigger--disabled{cursor:not-allowed}.ea-multi-select__trigger--readonly{cursor:default}.ea-multi-select__trigger-content{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--space-1);flex:1;min-width:0;overflow-x:auto;scrollbar-width:thin}.ea-multi-select__trigger-content ea-tag{flex-shrink:0;--ea-tag-padding-block: 0}.ea-multi-select__trigger-placeholder{color:var(--color-text-tertiary)}.ea-multi-select__trigger-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-secondary);transition:var(--transition-transform)}.ea-multi-select__trigger-wrapper:has(.ea-multi-select__trigger--open) .ea-multi-select__trigger-icon{transform:rotate(180deg)}.ea-multi-select__more{display:inline-flex;flex-shrink:0;align-items:center;padding:0 var(--space-1-5);border-radius:var(--radius-lg);background-color:var(--color-bg-muted);font-size:.85em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary)}.ea-multi-select__clear{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ea-icon-button-size, 1.75em);height:var(--ea-icon-button-size, 1.75em);padding:0;border:none;border-radius:var(--radius-sm);background:none;color:var(--color-text-secondary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__clear>*{font-size:1.25em}.ea-multi-select__clear:after{content:\"\";position:absolute;top:50%;left:50%;width:max(100%,var(--ea-icon-button-target, 24px));height:max(100%,var(--ea-icon-button-target, 24px));transform:translate(-50%,-50%)}.ea-multi-select__clear:hover{background-color:var(--color-state-hover);color:var(--color-text-primary)}.ea-multi-select__clear:focus-visible{outline:none;box-shadow:var(--shadow-focus-ring)}@media(forced-colors:active){.ea-multi-select__clear:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-multi-select__clear:disabled{cursor:not-allowed;opacity:.5}.ea-multi-select__clear{flex-shrink:0}.ea-multi-select__popover{display:flex;flex-direction:column;overflow:hidden;max-height:20rem;border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);background-color:var(--ea-multi-select-popover-background-color, var(--color-bg-elevated))}@media(forced-colors:active){.ea-multi-select__popover{border:1px solid CanvasText}}.ea-multi-select__popover--2xs{font-size:var(--font-size-2xs)}.ea-multi-select__popover--xs{font-size:var(--font-size-xs)}.ea-multi-select__popover--sm{font-size:var(--font-size-sm)}.ea-multi-select__popover--md{font-size:var(--font-size-md)}.ea-multi-select__popover--lg{font-size:var(--font-size-lg)}.ea-multi-select__popover--xl{font-size:var(--font-size-xl)}.ea-multi-select__search{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0;padding:var(--space-2) var(--space-3);border-bottom:var(--border-width-thin) solid var(--color-border-default)}.ea-multi-select__search-icon{flex-shrink:0;width:1em;height:1em;color:var(--color-text-tertiary)}.ea-multi-select__search-input{flex:1;min-width:0;padding:0;border:none;background:none;font-family:var(--font-family-sans);font-size:inherit;color:var(--color-text-primary)}.ea-multi-select__search-input::placeholder{color:var(--color-text-tertiary);opacity:1}.ea-multi-select__search-input:focus{outline:none}.ea-multi-select__list{overflow-y:auto;overscroll-behavior:none;flex:1;margin:0;padding:var(--space-1) 0;list-style:none}.ea-multi-select__group{position:relative}.ea-multi-select__group--ruled{padding-top:.25em;margin-top:.25em}.ea-multi-select__group--ruled:before{position:absolute;top:0;inset-inline-end:0;inset-inline-start:0;height:var(--border-width-thin);background-color:var(--color-border-default);content:\"\"}.ea-multi-select__group-options{padding:0;margin:0;list-style:none}.ea-multi-select__group-label{display:block;padding:.5em .75em .125em;font-size:.8125em;font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none}.ea-multi-select__option{display:flex;align-items:center;gap:.5em;padding:.375em .75em;font-size:inherit;font-family:var(--font-family-sans);color:var(--color-text-primary);cursor:pointer;transition:var(--transition-colors)}.ea-multi-select__option--focused{background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option--focused{background-color:Highlight;color:HighlightText}}.ea-multi-select__option--disabled{color:var(--color-text-disabled);cursor:not-allowed}@media(forced-colors:active){.ea-multi-select__option--disabled{color:GrayText}}.ea-multi-select__option--select-all{border-bottom:var(--border-width-thin) solid var(--color-border-default);font-weight:var(--font-weight-medium)}.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:var(--color-state-hover)}@media(forced-colors:active){.ea-multi-select__option:hover:not(.ea-multi-select__option--disabled){background-color:Highlight;color:HighlightText}}.ea-multi-select__option ea-checkbox{pointer-events:none;display:inline-flex;align-items:center;line-height:1}.ea-multi-select__option-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ea-multi-select__empty{padding:var(--space-3);font-size:inherit;text-align:center;color:var(--color-text-tertiary);list-style:none}\n"] }]
|
|
13605
13716
|
}], ctorParameters: () => [], propDecorators: { wrapperEl: [{ type: i0.ViewChild, args: ['wrapperEl', { isSignal: true }] }], triggerEl: [{ type: i0.ViewChild, args: ['triggerEl', { isSignal: true }] }], searchEl: [{ type: i0.ViewChild, args: ['searchEl', { isSignal: true }] }], listEl: [{ type: i0.ViewChild, args: ['listEl', { isSignal: true }] }], optionLabelEls: [{ type: i0.ViewChildren, args: ['optionLabelEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMsg", required: false }] }], errorMessages: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessages", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], selectAll: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAll", required: false }] }], maxVisibleChips: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleChips", required: false }] }], maxChipWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxChipWidth", required: false }] }], popoverMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "popoverMaxWidth", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], changed: [{ type: i0.Output, args: ["changed"] }] } });
|
|
13606
13717
|
|
|
13607
13718
|
/**
|
|
@@ -43563,5 +43674,5 @@ const ICONS = [
|
|
|
43563
43674
|
* Generated bundle index. Do not edit.
|
|
43564
43675
|
*/
|
|
43565
43676
|
|
|
43566
|
-
export { AccordionComponent, AccordionItemComponent, ActivityIconComponent, AirplayIconComponent, AlertCircleIconComponent, AlertComponent, AlertOctagonIconComponent, AlertTriangleIconComponent, AlignCenterIconComponent, AlignJustifyIconComponent, AlignLeftIconComponent, AlignRightIconComponent, AnchorIconComponent, AndroidIconComponent, AngularIconComponent, AnthropicIconComponent, ApertureIconComponent, ArchiveIconComponent, ArrowDownCircleIconComponent, ArrowDownIconComponent, ArrowDownLeftIconComponent, ArrowDownRightIconComponent, ArrowLeftCircleIconComponent, ArrowLeftIconComponent, ArrowRightCircleIconComponent, ArrowRightIconComponent, ArrowUpCircleIconComponent, ArrowUpIconComponent, ArrowUpLeftIconComponent, ArrowUpRightIconComponent, AspectRatioIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, AwardIconComponent, BadgeCheckIconComponent, BadgeComponent, BarChart2IconComponent, BarChartIconComponent, BatteryChargingIconComponent, BatteryIconComponent, BellIconComponent, BellOffIconComponent, BellRingIconComponent, BitcoinIconComponent, BlueskyIconComponent, BluetoothIconComponent, BoldIconComponent, BookIconComponent, BookOpenIconComponent, BookmarkCheckIconComponent, BookmarkIconComponent, BookmarkPlusIconComponent, BotIconComponent, BottleIconComponent, BoxIconComponent, BrainIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, BugIconComponent, BuildingIconComponent, ButtonComponent, CalculatorIconComponent, CalendarCheckIconComponent, CalendarDaysIconComponent, CalendarIconComponent, CameraIconComponent, CameraOffIconComponent, CandleIconComponent, CardComponent, CastIconComponent, CheckCircleIconComponent, CheckIconComponent, CheckSquareIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsDownIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, ChevronsUpDownIconComponent, ChevronsUpIconComponent, ChromeIconComponent, CircleIconComponent, ClapperboardIconComponent, ClipboardCheckIconComponent, ClipboardIconComponent, ClipboardListIconComponent, ClockIconComponent, CloudDrizzleIconComponent, CloudIconComponent, CloudLightningIconComponent, CloudOffIconComponent, CloudRainIconComponent, CloudSnowIconComponent, CloudflareIconComponent, CodeIconComponent, CodeInputComponent, CodepenIconComponent, CodesandboxIconComponent, CoffeeIconComponent, CoinsIconComponent, ColorPickerComponent, ColumnsIconComponent, CommandIconComponent, CommandPaletteComponent, CompassIconComponent, CopyIconComponent, CornerDownLeftIconComponent, CornerDownRightIconComponent, CornerLeftDownIconComponent, CornerLeftUpIconComponent, CornerRightDownIconComponent, CornerRightUpIconComponent, CornerUpLeftIconComponent, CornerUpRightIconComponent, CpuIconComponent, CreditCardIconComponent, CropIconComponent, CrosshairIconComponent, DEFAULT_PALETTE_ROLES, DataTableComponent, DatabaseIconComponent, DatePickerComponent, DeleteIconComponent, DialogComponent, DiscIconComponent, DiscordIconComponent, DivideCircleIconComponent, DivideIconComponent, DivideSquareIconComponent, DividerComponent, DockerIconComponent, DollarSignIconComponent, DownloadCloudIconComponent, DownloadIconComponent, DrawerComponent, DribbbleIconComponent, DropboxIconComponent, DropdownComponent, DropletIconComponent, EAGAMI_ALL_LOCALES, EAGAMI_I18N_CONFIG, EAGAMI_LOCALES, EAGAMI_LOCALE_META, EagamiI18nService, EagamiIconComponent, EagamiWordmarkComponent, Edit2IconComponent, Edit3IconComponent, EditIconComponent, EmptyStateComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, Facebook2IconComponent, FacebookIconComponent, FastForwardIconComponent, FeatherIconComponent, FieldLabelComponent, FieldMessagesComponent, Figma2IconComponent, FigmaIconComponent, FileAudioIconComponent, FileCheckIconComponent, FileIconComponent, FileImageIconComponent, FileMinusIconComponent, FilePdfIconComponent, FilePlusIconComponent, FileTextIconComponent, FileUploaderComponent, FileVideoIconComponent, FilmIconComponent, FilterIconComponent, FilterXIconComponent, FingerprintIconComponent, FlagIconComponent, FlameIconComponent, FolderIconComponent, FolderMinusIconComponent, FolderOpenIconComponent, FolderPlusIconComponent, FormFieldComponent, FramerIconComponent, FrownIconComponent, GaugeIconComponent, GeminiIconComponent, GiftIconComponent, GitBranchIconComponent, GitCommitIconComponent, GitCompareIconComponent, GitMergeIconComponent, GitPullRequestIconComponent, Github2IconComponent, GithubIconComponent, GitlabIconComponent, GlobeIconComponent, GoogleIconComponent, GridIconComponent, HalfCircleIconComponent, HalfHeartIconComponent, HardDriveIconComponent, HashIconComponent, HeadphonesIconComponent, HeartIconComponent, HelpCircleIconComponent, HeptagonIconComponent, HexagonIconComponent, HistoryIconComponent, HomeIconComponent, ICONS, IconComponentBase, ImageIconComponent, ImagesIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, InstagramIconComponent, ItalicIconComponent, KeyIconComponent, KeyboardIconComponent, KeyframeIconComponent, KubernetesIconComponent, LampIconComponent, LanguagesIconComponent, LayersIconComponent, LayoutIconComponent, LeafIconComponent, LeftHalfStarIconComponent, LifeBuoyIconComponent, LightbulbIconComponent, Link2IconComponent, LinkIconComponent, Linkedin2IconComponent, LinkedinIconComponent, ListChecksIconComponent, ListIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailCheckIconComponent, MailIconComponent, MapIconComponent, MapPinIconComponent, MastercardIconComponent, Maximize2IconComponent, MaximizeIconComponent, MegaphoneIconComponent, MehIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MessageCircleIconComponent, MessageSquareIconComponent, MicIconComponent, MicOffIconComponent, MicrosoftIconComponent, Minimize2IconComponent, MinimizeIconComponent, MinusCircleIconComponent, MinusIconComponent, MinusSquareIconComponent, MongodbIconComponent, MonitorIconComponent, MoonIconComponent, MoreHorizontalIconComponent, MoreVerticalIconComponent, MousePointerIconComponent, MoveIconComponent, MultiSelectComponent, MusicIconComponent, Navigation2IconComponent, NavigationIconComponent, NetlifyIconComponent, NodejsIconComponent, NotionIconComponent, NpmIconComponent, NumberInputComponent, OctagonIconComponent, PackageIconComponent, PaginatorComponent, PaletteIconComponent, PaperclipIconComponent, PauseCircleIconComponent, PauseIconComponent, PaypalIconComponent, PenToolIconComponent, PentagonIconComponent, PercentIconComponent, PhoneCallIconComponent, PhoneForwardedIconComponent, PhoneIconComponent, PhoneIncomingIconComponent, PhoneMissedIconComponent, PhoneOffIconComponent, PhoneOutgoingIconComponent, PictureInPictureIconComponent, PieChartIconComponent, PinIconComponent, PinterestIconComponent, PlayCircleIconComponent, PlayIconComponent, PlaylistIconComponent, PlugIconComponent, PlusCircleIconComponent, PlusIconComponent, PlusSquareIconComponent, PocketIconComponent, PopoverComponent, PowerIconComponent, PrinterIconComponent, ProgressBarComponent, PythonIconComponent, QrCodeIconComponent, RadioComponent, RadioGroupComponent, RadioIconComponent, RangeSliderComponent, RatingComponent, ReactIconComponent, ReceiptIconComponent, RecordIconComponent, RectangleHorizontalIconComponent, RectangleVerticalIconComponent, RedditIconComponent, RedoIconComponent, RefreshCcwIconComponent, RefreshCwIconComponent, RepeatIconComponent, RewindIconComponent, RightHalfStarIconComponent, RocketIconComponent, RotateCcwIconComponent, RotateCwIconComponent, RssIconComponent, SaveIconComponent, ScanIconComponent, ScissorsIconComponent, SearchIconComponent, SegmentedComponent, SendIconComponent, ServerIconComponent, SettingsIconComponent, ShareIconComponent, ShieldCheckIconComponent, ShieldIconComponent, ShieldOffIconComponent, ShopifyIconComponent, ShoppingBagIconComponent, ShoppingCartIconComponent, ShuffleIconComponent, SidebarIconComponent, SkeletonComponent, SkipBackIconComponent, SkipForwardIconComponent, Slack2IconComponent, SlackIconComponent, SlashIconComponent, SliderComponent, SlidersIconComponent, SmartphoneIconComponent, SmileIconComponent, SnowflakeIconComponent, SoccerBallIconComponent, SparklesIconComponent, SpeakerIconComponent, SpinnerComponent, SpotifyIconComponent, SquareIconComponent, StarIconComponent, StepComponent, StepperComponent, StopCircleIconComponent, StripeIconComponent, SubtitlesIconComponent, SunIconComponent, SunriseIconComponent, SunsetIconComponent, SvelteIconComponent, SwitchComponent, TabComponent, TableIconComponent, TabletIconComponent, TabsComponent, TagComponent, TagIconComponent, TailwindIconComponent, TargetIconComponent, TelegramIconComponent, TerminalIconComponent, TextareaComponent, ThermometerIconComponent, ThreadsIconComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, TiktokIconComponent, TimePickerComponent, TimecodeIconComponent, TimelineComponent, TimerIconComponent, ToastComponent, ToastService, ToggleLeftIconComponent, ToggleRightIconComponent, ToolIconComponent, TooltipDirective, TranscodeIconComponent, TransferListComponent, Trash2IconComponent, TrashIconComponent, TreeComponent, TrelloIconComponent, TrendingDownIconComponent, TrendingUpIconComponent, TriangleIconComponent, TrimIconComponent, TrophyIconComponent, TruckIconComponent, TvIconComponent, Twitch2IconComponent, TwitchIconComponent, TwitterIconComponent, TypeIconComponent, UmbrellaIconComponent, UnderlineIconComponent, UndoIconComponent, UnlockIconComponent, UploadCloudIconComponent, UploadIconComponent, UserCheckIconComponent, UserIconComponent, UserMinusIconComponent, UserPlusIconComponent, UserXIconComponent, UsersIconComponent, VercelIconComponent, VideoIconComponent, VideoOffIconComponent, VirtualListComponent, VoicemailIconComponent, Volume1IconComponent, Volume2IconComponent, VolumeIconComponent, VolumeXIconComponent, VueIconComponent, WCAG_AA, WalletIconComponent, WandIconComponent, WatchIconComponent, WaveformIconComponent, WhatsappIconComponent, WifiIconComponent, WifiOffIconComponent, WindIconComponent, WordpressIconComponent, XCircleIconComponent, XIconComponent, XOctagonIconComponent, XSquareIconComponent, XTwitterIconComponent, Youtube2IconComponent, YoutubeIconComponent, ZapIconComponent, ZapOffIconComponent, ZoomInIconComponent, ZoomOutIconComponent, applyPalette, ar, computePopoverPosition, contrastRatio, de, derivePalette, el, en, esES, formatViolations, frFR, frenchSpacing, he, hexToOklch, hi, iconDisplayName, is, nl, oklchToHex, pl, provideEagamiUi, ptBR, relativeLuminance, ru, uk, validatePalette, visibleNodeIds, walkTree, zhCN };
|
|
43677
|
+
export { AccordionComponent, AccordionItemComponent, ActivityIconComponent, AirplayIconComponent, AlertCircleIconComponent, AlertComponent, AlertOctagonIconComponent, AlertTriangleIconComponent, AlignCenterIconComponent, AlignJustifyIconComponent, AlignLeftIconComponent, AlignRightIconComponent, AnchorIconComponent, AndroidIconComponent, AngularIconComponent, AnthropicIconComponent, ApertureIconComponent, ArchiveIconComponent, ArrowDownCircleIconComponent, ArrowDownIconComponent, ArrowDownLeftIconComponent, ArrowDownRightIconComponent, ArrowLeftCircleIconComponent, ArrowLeftIconComponent, ArrowRightCircleIconComponent, ArrowRightIconComponent, ArrowUpCircleIconComponent, ArrowUpIconComponent, ArrowUpLeftIconComponent, ArrowUpRightIconComponent, AspectRatioIconComponent, AtSignIconComponent, AutocompleteComponent, AvatarComponent, AvatarEditorComponent, AwardIconComponent, BadgeCheckIconComponent, BadgeComponent, BarChart2IconComponent, BarChartIconComponent, BatteryChargingIconComponent, BatteryIconComponent, BellIconComponent, BellOffIconComponent, BellRingIconComponent, BitcoinIconComponent, BlueskyIconComponent, BluetoothIconComponent, BoldIconComponent, BookIconComponent, BookOpenIconComponent, BookmarkCheckIconComponent, BookmarkIconComponent, BookmarkPlusIconComponent, BotIconComponent, BottleIconComponent, BoxIconComponent, BrainIconComponent, BreadcrumbsComponent, BriefcaseIconComponent, BugIconComponent, BuildingIconComponent, ButtonComponent, CalculatorIconComponent, CalendarCheckIconComponent, CalendarDaysIconComponent, CalendarIconComponent, CameraIconComponent, CameraOffIconComponent, CandleIconComponent, CardComponent, CastIconComponent, CheckCircleIconComponent, CheckIconComponent, CheckSquareIconComponent, CheckboxComponent, ChevronDownIconComponent, ChevronLeftIconComponent, ChevronRightIconComponent, ChevronUpIconComponent, ChevronsDownIconComponent, ChevronsLeftIconComponent, ChevronsRightIconComponent, ChevronsUpDownIconComponent, ChevronsUpIconComponent, ChromeIconComponent, CircleIconComponent, ClapperboardIconComponent, ClipboardCheckIconComponent, ClipboardIconComponent, ClipboardListIconComponent, ClockIconComponent, CloudDrizzleIconComponent, CloudIconComponent, CloudLightningIconComponent, CloudOffIconComponent, CloudRainIconComponent, CloudSnowIconComponent, CloudflareIconComponent, CodeIconComponent, CodeInputComponent, CodepenIconComponent, CodesandboxIconComponent, CoffeeIconComponent, CoinsIconComponent, ColorPickerComponent, ColumnsIconComponent, CommandIconComponent, CommandPaletteComponent, CompassIconComponent, CopyIconComponent, CornerDownLeftIconComponent, CornerDownRightIconComponent, CornerLeftDownIconComponent, CornerLeftUpIconComponent, CornerRightDownIconComponent, CornerRightUpIconComponent, CornerUpLeftIconComponent, CornerUpRightIconComponent, CpuIconComponent, CreditCardIconComponent, CropIconComponent, CrosshairIconComponent, DEFAULT_PALETTE_ROLES, DataTableComponent, DatabaseIconComponent, DatePickerComponent, DeleteIconComponent, DialogComponent, DiscIconComponent, DiscordIconComponent, DivideCircleIconComponent, DivideIconComponent, DivideSquareIconComponent, DividerComponent, DockerIconComponent, DollarSignIconComponent, DownloadCloudIconComponent, DownloadIconComponent, DrawerComponent, DribbbleIconComponent, DropboxIconComponent, DropdownComponent, DropletIconComponent, EAGAMI_ALL_LOCALES, EAGAMI_I18N_CONFIG, EAGAMI_LOCALES, EAGAMI_LOCALE_META, EagamiI18nService, EagamiIconComponent, EagamiWordmarkComponent, Edit2IconComponent, Edit3IconComponent, EditIconComponent, EmptyStateComponent, ExternalLinkIconComponent, EyeIconComponent, EyeOffIconComponent, Facebook2IconComponent, FacebookIconComponent, FastForwardIconComponent, FeatherIconComponent, FieldLabelComponent, FieldMessagesComponent, Figma2IconComponent, FigmaIconComponent, FileAudioIconComponent, FileCheckIconComponent, FileIconComponent, FileImageIconComponent, FileMinusIconComponent, FilePdfIconComponent, FilePlusIconComponent, FileTextIconComponent, FileUploaderComponent, FileVideoIconComponent, FilmIconComponent, FilterIconComponent, FilterXIconComponent, FingerprintIconComponent, FlagIconComponent, FlameIconComponent, FolderIconComponent, FolderMinusIconComponent, FolderOpenIconComponent, FolderPlusIconComponent, FormFieldComponent, FramerIconComponent, FrownIconComponent, GaugeIconComponent, GeminiIconComponent, GiftIconComponent, GitBranchIconComponent, GitCommitIconComponent, GitCompareIconComponent, GitMergeIconComponent, GitPullRequestIconComponent, Github2IconComponent, GithubIconComponent, GitlabIconComponent, GlobeIconComponent, GoogleIconComponent, GridIconComponent, HalfCircleIconComponent, HalfHeartIconComponent, HardDriveIconComponent, HashIconComponent, HeadphonesIconComponent, HeartIconComponent, HelpCircleIconComponent, HeptagonIconComponent, HexagonIconComponent, HistoryIconComponent, HomeIconComponent, ICONS, IconComponentBase, ImageIconComponent, ImagesIconComponent, InboxIconComponent, InfoIconComponent, InputComponent, InstagramIconComponent, ItalicIconComponent, KeyIconComponent, KeyboardIconComponent, KeyframeIconComponent, KubernetesIconComponent, LampIconComponent, LanguagesIconComponent, LayersIconComponent, LayoutIconComponent, LeafIconComponent, LeftHalfStarIconComponent, LifeBuoyIconComponent, LightbulbIconComponent, Link2IconComponent, LinkIconComponent, Linkedin2IconComponent, LinkedinIconComponent, ListChecksIconComponent, ListIconComponent, LoaderIconComponent, LockIconComponent, LogInIconComponent, LogOutIconComponent, MailCheckIconComponent, MailIconComponent, MapIconComponent, MapPinIconComponent, MastercardIconComponent, Maximize2IconComponent, MaximizeIconComponent, MegaphoneIconComponent, MehIconComponent, MenuComponent, MenuIconComponent, MenuItemComponent, MenuTriggerDirective, MessageCircleIconComponent, MessageSquareIconComponent, MicIconComponent, MicOffIconComponent, MicrosoftIconComponent, Minimize2IconComponent, MinimizeIconComponent, MinusCircleIconComponent, MinusIconComponent, MinusSquareIconComponent, MongodbIconComponent, MonitorIconComponent, MoonIconComponent, MoreHorizontalIconComponent, MoreVerticalIconComponent, MousePointerIconComponent, MoveIconComponent, MultiSelectComponent, MusicIconComponent, Navigation2IconComponent, NavigationIconComponent, NetlifyIconComponent, NodejsIconComponent, NotionIconComponent, NpmIconComponent, NumberInputComponent, OctagonIconComponent, PackageIconComponent, PaginatorComponent, PaletteIconComponent, PaperclipIconComponent, PauseCircleIconComponent, PauseIconComponent, PaypalIconComponent, PenToolIconComponent, PentagonIconComponent, PercentIconComponent, PhoneCallIconComponent, PhoneForwardedIconComponent, PhoneIconComponent, PhoneIncomingIconComponent, PhoneMissedIconComponent, PhoneOffIconComponent, PhoneOutgoingIconComponent, PictureInPictureIconComponent, PieChartIconComponent, PinIconComponent, PinterestIconComponent, PlayCircleIconComponent, PlayIconComponent, PlaylistIconComponent, PlugIconComponent, PlusCircleIconComponent, PlusIconComponent, PlusSquareIconComponent, PocketIconComponent, PopoverComponent, PowerIconComponent, PrinterIconComponent, ProgressBarComponent, PythonIconComponent, QrCodeIconComponent, RadioComponent, RadioGroupComponent, RadioIconComponent, RangeSliderComponent, RatingComponent, ReactIconComponent, ReceiptIconComponent, RecordIconComponent, RectangleHorizontalIconComponent, RectangleVerticalIconComponent, RedditIconComponent, RedoIconComponent, RefreshCcwIconComponent, RefreshCwIconComponent, RepeatIconComponent, RewindIconComponent, RightHalfStarIconComponent, RocketIconComponent, RotateCcwIconComponent, RotateCwIconComponent, RssIconComponent, SaveIconComponent, ScanIconComponent, ScissorsIconComponent, SearchIconComponent, SegmentedComponent, SendIconComponent, ServerIconComponent, SettingsIconComponent, ShareIconComponent, ShieldCheckIconComponent, ShieldIconComponent, ShieldOffIconComponent, ShopifyIconComponent, ShoppingBagIconComponent, ShoppingCartIconComponent, ShuffleIconComponent, SidebarIconComponent, SkeletonComponent, SkipBackIconComponent, SkipForwardIconComponent, Slack2IconComponent, SlackIconComponent, SlashIconComponent, SliderComponent, SlidersIconComponent, SmartphoneIconComponent, SmileIconComponent, SnowflakeIconComponent, SoccerBallIconComponent, SparklesIconComponent, SpeakerIconComponent, SpinnerComponent, SpotifyIconComponent, SquareIconComponent, StarIconComponent, StepComponent, StepperComponent, StopCircleIconComponent, StripeIconComponent, SubtitlesIconComponent, SunIconComponent, SunriseIconComponent, SunsetIconComponent, SvelteIconComponent, SwitchComponent, TabComponent, TableIconComponent, TabletIconComponent, TabsComponent, TagComponent, TagIconComponent, TailwindIconComponent, TargetIconComponent, TelegramIconComponent, TerminalIconComponent, TextareaComponent, ThermometerIconComponent, ThreadsIconComponent, ThumbsDownIconComponent, ThumbsUpIconComponent, TiktokIconComponent, TimePickerComponent, TimecodeIconComponent, TimelineComponent, TimerIconComponent, ToastComponent, ToastService, ToggleLeftIconComponent, ToggleRightIconComponent, ToolIconComponent, TooltipDirective, TranscodeIconComponent, TransferListComponent, Trash2IconComponent, TrashIconComponent, TreeComponent, TrelloIconComponent, TrendingDownIconComponent, TrendingUpIconComponent, TriangleIconComponent, TrimIconComponent, TrophyIconComponent, TruckIconComponent, TvIconComponent, Twitch2IconComponent, TwitchIconComponent, TwitterIconComponent, TypeIconComponent, UmbrellaIconComponent, UnderlineIconComponent, UndoIconComponent, UnlockIconComponent, UploadCloudIconComponent, UploadIconComponent, UserCheckIconComponent, UserIconComponent, UserMinusIconComponent, UserPlusIconComponent, UserXIconComponent, UsersIconComponent, VercelIconComponent, VideoIconComponent, VideoOffIconComponent, VirtualListComponent, VoicemailIconComponent, Volume1IconComponent, Volume2IconComponent, VolumeIconComponent, VolumeXIconComponent, VueIconComponent, WCAG_AA, WalletIconComponent, WandIconComponent, WatchIconComponent, WaveformIconComponent, WhatsappIconComponent, WifiIconComponent, WifiOffIconComponent, WindIconComponent, WordpressIconComponent, XCircleIconComponent, XIconComponent, XOctagonIconComponent, XSquareIconComponent, XTwitterIconComponent, Youtube2IconComponent, YoutubeIconComponent, ZapIconComponent, ZapOffIconComponent, ZoomInIconComponent, ZoomOutIconComponent, applyPalette, ar, computePopoverPosition, contrastRatio, de, derivePalette, el, en, esES, formatViolations, frFR, frenchSpacing, he, hexToOklch, hi, iconDisplayName, is, isGrouped, nl, oklchToHex, pl, provideEagamiUi, ptBR, relativeLuminance, ru, uk, validatePalette, visibleNodeIds, walkTree, zhCN };
|
|
43567
43678
|
//# sourceMappingURL=eagami-ui.mjs.map
|