@eagami/ui 5.30.2 → 5.31.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 +47 -17
- package/fesm2022/eagami-ui.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eagami-ui.d.ts +1 -1
package/fesm2022/eagami-ui.mjs
CHANGED
|
@@ -4200,11 +4200,11 @@ class FieldMessagesComponent {
|
|
|
4200
4200
|
hint = input(undefined, /* @ts-ignore */
|
|
4201
4201
|
...(ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []));
|
|
4202
4202
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FieldMessagesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4203
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FieldMessagesComponent, isStandalone: true, selector: "ea-field-messages", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (error()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n {{ error() }}\n </p>\n} @else if (hint()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__message{display:flex;align-items:center;gap:var(--space-1);font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4203
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: FieldMessagesComponent, isStandalone: true, selector: "ea-field-messages", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: true, transformFunction: null }, error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (error()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n {{ error() }}\n </p>\n} @else if (hint()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__message{display:flex;align-items:center;gap:var(--space-1);font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em;transform:translateY(-.0625em)}\n"], dependencies: [{ kind: "component", type: AlertCircleIconComponent, selector: "ea-icon-alert-circle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4204
4204
|
}
|
|
4205
4205
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: FieldMessagesComponent, decorators: [{
|
|
4206
4206
|
type: Component,
|
|
4207
|
-
args: [{ selector: 'ea-field-messages', imports: [AlertCircleIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (error()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n {{ error() }}\n </p>\n} @else if (hint()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__message{display:flex;align-items:center;gap:var(--space-1);font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em}\n"] }]
|
|
4207
|
+
args: [{ selector: 'ea-field-messages', imports: [AlertCircleIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (error()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--error\"\n [id]=\"id() + '-error'\"\n role=\"alert\">\n <ea-icon-alert-circle class=\"ea-field-messages__icon\" />\n {{ error() }}\n </p>\n} @else if (hint()) {\n <p\n class=\"ea-field-messages__message ea-field-messages__message--hint\"\n [id]=\"id() + '-hint'\">\n {{ hint() }}\n </p>\n}\n", styles: [":host{display:contents}.ea-field-messages__message{display:flex;align-items:center;gap:var(--space-1);font-size:max(var(--ea-field-messages-size, var(--text-helper-size)),.6875rem);font-weight:var(--text-helper-weight);line-height:var(--text-helper-lh)}.ea-field-messages__message--hint{color:var(--color-text-secondary)}.ea-field-messages__message--error{color:var(--color-error-default)}.ea-field-messages__icon{flex-shrink:0;font-size:1.2em;transform:translateY(-.0625em)}\n"] }]
|
|
4208
4208
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: true }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }] } });
|
|
4209
4209
|
|
|
4210
4210
|
/**
|
|
@@ -5033,6 +5033,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
5033
5033
|
args: ['document:keydown.escape', ['$event']]
|
|
5034
5034
|
}] } });
|
|
5035
5035
|
|
|
5036
|
+
/**
|
|
5037
|
+
* Letters a plain keyboard cannot reach that decompose to no base letter, so
|
|
5038
|
+
* stripping marks alone would leave them unmatched.
|
|
5039
|
+
*/
|
|
5040
|
+
const SPELLINGS = {
|
|
5041
|
+
ø: 'o',
|
|
5042
|
+
æ: 'ae',
|
|
5043
|
+
œ: 'oe',
|
|
5044
|
+
ß: 'ss',
|
|
5045
|
+
ł: 'l',
|
|
5046
|
+
đ: 'd',
|
|
5047
|
+
ð: 'd',
|
|
5048
|
+
þ: 'th',
|
|
5049
|
+
ħ: 'h',
|
|
5050
|
+
ı: 'i',
|
|
5051
|
+
ŋ: 'n',
|
|
5052
|
+
ŧ: 't',
|
|
5053
|
+
ij: 'ij',
|
|
5054
|
+
ſ: 's',
|
|
5055
|
+
};
|
|
5056
|
+
const SPELLED = new RegExp(`[${Object.keys(SPELLINGS).join('')}]`, 'g');
|
|
5057
|
+
/**
|
|
5058
|
+
* Lowercased with diacritics folded away, so a search typed on a plain
|
|
5059
|
+
* keyboard still finds the accented spelling: "jablko" finds "Jabłko".
|
|
5060
|
+
*/
|
|
5061
|
+
function foldForSearch(value) {
|
|
5062
|
+
return value
|
|
5063
|
+
.toLowerCase()
|
|
5064
|
+
.normalize('NFD')
|
|
5065
|
+
.replace(/\p{M}/gu, '')
|
|
5066
|
+
.replace(SPELLED, letter => SPELLINGS[letter]);
|
|
5067
|
+
}
|
|
5036
5068
|
/** Whether the consumer supplied groups rather than a flat option list. */
|
|
5037
5069
|
function isGrouped(options) {
|
|
5038
5070
|
const first = options[0];
|
|
@@ -5172,13 +5204,13 @@ class AutocompleteComponent {
|
|
|
5172
5204
|
grouped = computed(() => isGrouped(this.options()), /* @ts-ignore */
|
|
5173
5205
|
...(ngDevMode ? [{ debugName: "grouped" }] : /* istanbul ignore next */ []));
|
|
5174
5206
|
filteredGroups = computed(() => {
|
|
5175
|
-
const query = this.value().trim()
|
|
5207
|
+
const query = foldForSearch(this.value().trim());
|
|
5176
5208
|
const groups = this.optionGroups();
|
|
5177
5209
|
if (query.length < this.minLength()) {
|
|
5178
5210
|
return [];
|
|
5179
5211
|
}
|
|
5180
5212
|
const matched = query
|
|
5181
|
-
? filterGroups(groups, o => o.label
|
|
5213
|
+
? filterGroups(groups, o => foldForSearch(o.label).includes(query))
|
|
5182
5214
|
: groups;
|
|
5183
5215
|
return limitGroups(matched, this.maxResults());
|
|
5184
5216
|
}, /* @ts-ignore */
|
|
@@ -7899,15 +7931,13 @@ class CommandPaletteComponent {
|
|
|
7899
7931
|
* on every binding read.
|
|
7900
7932
|
*/
|
|
7901
7933
|
groupedItems = computed(() => {
|
|
7902
|
-
const q = this.query().trim()
|
|
7934
|
+
const q = foldForSearch(this.query().trim());
|
|
7903
7935
|
const disabledWhen = this.disabledWhen();
|
|
7904
7936
|
const candidates = this.items().filter(item => {
|
|
7905
7937
|
if (!q) {
|
|
7906
7938
|
return true;
|
|
7907
7939
|
}
|
|
7908
|
-
const haystack = [item.label, item.description ?? '', ...(item.keywords ?? [])]
|
|
7909
|
-
.join(' ')
|
|
7910
|
-
.toLowerCase();
|
|
7940
|
+
const haystack = foldForSearch([item.label, item.description ?? '', ...(item.keywords ?? [])].join(' '));
|
|
7911
7941
|
// Match when the query is a prefix of any word in the haystack.
|
|
7912
7942
|
// Substring-anywhere matching would surface confusing results (typing
|
|
7913
7943
|
// "c" matching "Repla*c*e" via a mid-word character); word-boundary
|
|
@@ -10869,11 +10899,11 @@ class DialogComponent {
|
|
|
10869
10899
|
this.handleClose();
|
|
10870
10900
|
}
|
|
10871
10901
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10872
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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 }, closeDisabled: { classPropertyName: "closeDisabled", publicName: "closeDisabled", isSignal: true, isRequired: false, transformFunction: null }, manualClose: { classPropertyName: "manualClose", publicName: "manualClose", 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", closeRequested: "closeRequested" }, 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 <div\n class=\"ea-dialog__header\"\n [class.ea-dialog__header--hidden]=\"!hasHeader() && !showClose()\">\n <div\n #headerEl\n class=\"ea-dialog__header-content\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n [attr.aria-label]=\"i18n.messages().dialog.close\"\n [disabled]=\"closeDisabled()\"\n (click)=\"requestClose()\">\n <ea-icon-x />\n </button>\n }\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__status\">\n <ng-content select=\"[slot=status]\" />\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{--_ea-dialog-inset: var(--ea-dialog-inset, var(--space-4));position:relative;display:flex;flex-direction:column;width:var(--ea-dialog-size, 32rem);max-width:calc(100vw - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, 85vh);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--ea-dialog-radius, var(--radius-xl));box-shadow:var(--shadow-2xl);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--2xl{--ea-dialog-size: 64rem}.ea-dialog__panel--full{width:calc(100vw - 2 * var(--_ea-dialog-inset));height:calc(100vh - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, calc(100vh - 2 * var(--_ea-dialog-inset)))}.ea-dialog__panel:has(>.ea-dialog__header--hidden)>.ea-dialog__body{--_ea-dialog-body-padding-top: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__status:not(:empty),>.ea-dialog__footer:not(:empty)))>.ea-dialog__body{--_ea-dialog-body-padding-bottom: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__footer:not(:empty)))>.ea-dialog__status{--_ea-dialog-status-padding-bottom: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__body:not(:empty),>.ea-dialog__status:not(:empty),>.ea-dialog__footer:not(:empty)))>.ea-dialog__header{--_ea-dialog-header-padding-bottom: var(--space-5)}.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__header{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--ea-dialog-header-padding, var(--space-5) var(--space-6) var(--_ea-dialog-header-padding-bottom, 0))}.ea-dialog__header--hidden{display:none}.ea-dialog__header-content{flex:1;min-width:0;font-size:var(--ea-dialog-header-font-size, var(--text-h4-size));font-weight:var(--ea-dialog-header-font-weight, var(--text-h4-weight));line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__body{flex:1;padding:var(--ea-dialog-body-padding, var(--_ea-dialog-body-padding-top, var(--space-3)) var(--space-6) var(--_ea-dialog-body-padding-bottom,
|
|
10902
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", 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 }, closeDisabled: { classPropertyName: "closeDisabled", publicName: "closeDisabled", isSignal: true, isRequired: false, transformFunction: null }, manualClose: { classPropertyName: "manualClose", publicName: "manualClose", 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", closeRequested: "closeRequested" }, 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 <div\n class=\"ea-dialog__header\"\n [class.ea-dialog__header--hidden]=\"!hasHeader() && !showClose()\">\n <div\n #headerEl\n class=\"ea-dialog__header-content\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n [attr.aria-label]=\"i18n.messages().dialog.close\"\n [disabled]=\"closeDisabled()\"\n (click)=\"requestClose()\">\n <ea-icon-x />\n </button>\n }\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__status\">\n <ng-content select=\"[slot=status]\" />\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{--_ea-dialog-inset: var(--ea-dialog-inset, var(--space-4));position:relative;display:flex;flex-direction:column;width:var(--ea-dialog-size, 32rem);max-width:calc(100vw - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, 85vh);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--ea-dialog-radius, var(--radius-xl));box-shadow:var(--shadow-2xl);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--2xl{--ea-dialog-size: 64rem}.ea-dialog__panel--full{width:calc(100vw - 2 * var(--_ea-dialog-inset));height:calc(100vh - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, calc(100vh - 2 * var(--_ea-dialog-inset)))}.ea-dialog__panel:has(>.ea-dialog__header--hidden)>.ea-dialog__body{--_ea-dialog-body-padding-top: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__status:not(:empty),>.ea-dialog__footer:not(:empty)))>.ea-dialog__body{--_ea-dialog-body-padding-bottom: var(--space-5)}.ea-dialog__panel:has(>.ea-dialog__body:not(:empty))>.ea-dialog__status{--_ea-dialog-status-padding-top: 0}.ea-dialog__panel:has(>.ea-dialog__body:not(:empty)):not(:has(>.ea-dialog__status:not(:empty)))>.ea-dialog__footer{--_ea-dialog-footer-padding-top: 0}.ea-dialog__panel:not(:has(>.ea-dialog__footer:not(:empty)))>.ea-dialog__status{--_ea-dialog-status-padding-bottom: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__body:not(:empty),>.ea-dialog__status:not(:empty),>.ea-dialog__footer:not(:empty)))>.ea-dialog__header{--_ea-dialog-header-padding-bottom: var(--space-5)}.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__header{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--ea-dialog-header-padding, var(--space-5) var(--space-6) var(--_ea-dialog-header-padding-bottom, 0))}.ea-dialog__header--hidden{display:none}.ea-dialog__header-content{flex:1;min-width:0;font-size:var(--ea-dialog-header-font-size, var(--text-h4-size));font-weight:var(--ea-dialog-header-font-weight, var(--text-h4-weight));line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__body{flex:1;padding:var(--ea-dialog-body-padding, var(--_ea-dialog-body-padding-top, var(--space-3)) var(--space-6) var(--_ea-dialog-body-padding-bottom, var(--space-3)))}.ea-dialog__body:empty{display:none}.ea-dialog__body{overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__status{flex-shrink:0;padding:var(--ea-dialog-status-padding, var(--_ea-dialog-status-padding-top, var(--space-3)) var(--space-6) var(--_ea-dialog-status-padding-bottom, 0));font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__status:empty{display:none}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--_ea-dialog-footer-padding-top, 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 });
|
|
10873
10903
|
}
|
|
10874
10904
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: DialogComponent, decorators: [{
|
|
10875
10905
|
type: Component,
|
|
10876
|
-
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 <div\n class=\"ea-dialog__header\"\n [class.ea-dialog__header--hidden]=\"!hasHeader() && !showClose()\">\n <div\n #headerEl\n class=\"ea-dialog__header-content\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n [attr.aria-label]=\"i18n.messages().dialog.close\"\n [disabled]=\"closeDisabled()\"\n (click)=\"requestClose()\">\n <ea-icon-x />\n </button>\n }\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__status\">\n <ng-content select=\"[slot=status]\" />\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{--_ea-dialog-inset: var(--ea-dialog-inset, var(--space-4));position:relative;display:flex;flex-direction:column;width:var(--ea-dialog-size, 32rem);max-width:calc(100vw - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, 85vh);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--ea-dialog-radius, var(--radius-xl));box-shadow:var(--shadow-2xl);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--2xl{--ea-dialog-size: 64rem}.ea-dialog__panel--full{width:calc(100vw - 2 * var(--_ea-dialog-inset));height:calc(100vh - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, calc(100vh - 2 * var(--_ea-dialog-inset)))}.ea-dialog__panel:has(>.ea-dialog__header--hidden)>.ea-dialog__body{--_ea-dialog-body-padding-top: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__status:not(:empty),>.ea-dialog__footer:not(:empty)))>.ea-dialog__body{--_ea-dialog-body-padding-bottom: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__footer:not(:empty)))>.ea-dialog__status{--_ea-dialog-status-padding-bottom: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__body:not(:empty),>.ea-dialog__status:not(:empty),>.ea-dialog__footer:not(:empty)))>.ea-dialog__header{--_ea-dialog-header-padding-bottom: var(--space-5)}.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__header{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--ea-dialog-header-padding, var(--space-5) var(--space-6) var(--_ea-dialog-header-padding-bottom, 0))}.ea-dialog__header--hidden{display:none}.ea-dialog__header-content{flex:1;min-width:0;font-size:var(--ea-dialog-header-font-size, var(--text-h4-size));font-weight:var(--ea-dialog-header-font-weight, var(--text-h4-weight));line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__body{flex:1;padding:var(--ea-dialog-body-padding, var(--_ea-dialog-body-padding-top, var(--space-3)) var(--space-6) var(--_ea-dialog-body-padding-bottom,
|
|
10906
|
+
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 <div\n class=\"ea-dialog__header\"\n [class.ea-dialog__header--hidden]=\"!hasHeader() && !showClose()\">\n <div\n #headerEl\n class=\"ea-dialog__header-content\"\n [id]=\"id() + '-header'\">\n <ng-content select=\"[slot=header]\" />\n </div>\n @if (showClose()) {\n <button\n type=\"button\"\n class=\"ea-dialog__close\"\n [attr.aria-label]=\"i18n.messages().dialog.close\"\n [disabled]=\"closeDisabled()\"\n (click)=\"requestClose()\">\n <ea-icon-x />\n </button>\n }\n </div>\n\n <div class=\"ea-dialog__body\">\n <ng-content />\n </div>\n\n <div class=\"ea-dialog__status\">\n <ng-content select=\"[slot=status]\" />\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{--_ea-dialog-inset: var(--ea-dialog-inset, var(--space-4));position:relative;display:flex;flex-direction:column;width:var(--ea-dialog-size, 32rem);max-width:calc(100vw - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, 85vh);background-color:var(--ea-dialog-panel-background-color, var(--color-bg-elevated));border-radius:var(--ea-dialog-radius, var(--radius-xl));box-shadow:var(--shadow-2xl);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--2xl{--ea-dialog-size: 64rem}.ea-dialog__panel--full{width:calc(100vw - 2 * var(--_ea-dialog-inset));height:calc(100vh - 2 * var(--_ea-dialog-inset));max-height:var(--ea-dialog-max-height, calc(100vh - 2 * var(--_ea-dialog-inset)))}.ea-dialog__panel:has(>.ea-dialog__header--hidden)>.ea-dialog__body{--_ea-dialog-body-padding-top: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__status:not(:empty),>.ea-dialog__footer:not(:empty)))>.ea-dialog__body{--_ea-dialog-body-padding-bottom: var(--space-5)}.ea-dialog__panel:has(>.ea-dialog__body:not(:empty))>.ea-dialog__status{--_ea-dialog-status-padding-top: 0}.ea-dialog__panel:has(>.ea-dialog__body:not(:empty)):not(:has(>.ea-dialog__status:not(:empty)))>.ea-dialog__footer{--_ea-dialog-footer-padding-top: 0}.ea-dialog__panel:not(:has(>.ea-dialog__footer:not(:empty)))>.ea-dialog__status{--_ea-dialog-status-padding-bottom: var(--space-5)}.ea-dialog__panel:not(:has(>.ea-dialog__body:not(:empty),>.ea-dialog__status:not(:empty),>.ea-dialog__footer:not(:empty)))>.ea-dialog__header{--_ea-dialog-header-padding-bottom: var(--space-5)}.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__header{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--ea-dialog-header-padding, var(--space-5) var(--space-6) var(--_ea-dialog-header-padding-bottom, 0))}.ea-dialog__header--hidden{display:none}.ea-dialog__header-content{flex:1;min-width:0;font-size:var(--ea-dialog-header-font-size, var(--text-h4-size));font-weight:var(--ea-dialog-header-font-weight, var(--text-h4-weight));line-height:var(--text-h4-lh);color:var(--color-text-primary)}.ea-dialog__body{flex:1;padding:var(--ea-dialog-body-padding, var(--_ea-dialog-body-padding-top, var(--space-3)) var(--space-6) var(--_ea-dialog-body-padding-bottom, var(--space-3)))}.ea-dialog__body:empty{display:none}.ea-dialog__body{overflow-y:auto;font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__status{flex-shrink:0;padding:var(--ea-dialog-status-padding, var(--_ea-dialog-status-padding-top, var(--space-3)) var(--space-6) var(--_ea-dialog-status-padding-bottom, 0));font-size:var(--font-size-sm);line-height:var(--line-height-normal);color:var(--color-text-secondary)}.ea-dialog__status:empty{display:none}.ea-dialog__footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-3);padding:var(--_ea-dialog-footer-padding-top, 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"] }]
|
|
10877
10907
|
}], 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 }] }], closeDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeDisabled", required: false }] }], manualClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "manualClose", 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"] }], closeRequested: [{ type: i0.Output, args: ["closeRequested"] }] } });
|
|
10878
10908
|
|
|
10879
10909
|
// The padding side, per position, applied to the push target so its content
|
|
@@ -11583,7 +11613,7 @@ class DropdownComponent {
|
|
|
11583
11613
|
clearTimeout(this.typeaheadTimer);
|
|
11584
11614
|
}
|
|
11585
11615
|
this.typeaheadTimer = setTimeout(() => (this.typeaheadQuery = ''), 500);
|
|
11586
|
-
this.typeaheadQuery += event.key
|
|
11616
|
+
this.typeaheadQuery += foldForSearch(event.key);
|
|
11587
11617
|
const wasOpen = this.isOpen();
|
|
11588
11618
|
if (!wasOpen) {
|
|
11589
11619
|
this.toggle();
|
|
@@ -11599,7 +11629,7 @@ class DropdownComponent {
|
|
|
11599
11629
|
for (let offset = firstOffset; offset <= opts.length; offset++) {
|
|
11600
11630
|
const idx = (start + offset) % opts.length;
|
|
11601
11631
|
const opt = opts[idx];
|
|
11602
|
-
if (!opt.disabled && opt.label
|
|
11632
|
+
if (!opt.disabled && foldForSearch(opt.label).startsWith(this.typeaheadQuery)) {
|
|
11603
11633
|
this.setFocusedIndex(idx);
|
|
11604
11634
|
return;
|
|
11605
11635
|
}
|
|
@@ -13736,15 +13766,15 @@ class MultiSelectComponent {
|
|
|
13736
13766
|
flatOptions = computed(() => flattenGroups(this.optionGroups()), /* @ts-ignore */
|
|
13737
13767
|
...(ngDevMode ? [{ debugName: "flatOptions" }] : /* istanbul ignore next */ []));
|
|
13738
13768
|
filteredGroups = computed(() => {
|
|
13739
|
-
const term = this.searchTerm().trim()
|
|
13769
|
+
const term = foldForSearch(this.searchTerm().trim());
|
|
13740
13770
|
const groups = this.optionGroups();
|
|
13741
13771
|
if (!term) {
|
|
13742
13772
|
return groups;
|
|
13743
13773
|
}
|
|
13744
|
-
return filterGroups(groups, o => o.label
|
|
13774
|
+
return filterGroups(groups, o => foldForSearch(o.label).includes(term));
|
|
13745
13775
|
}, /* @ts-ignore */
|
|
13746
13776
|
...(ngDevMode ? [{ debugName: "filteredGroups" }] : /* istanbul ignore next */ []));
|
|
13747
|
-
/** Options matching the current search term (case-insensitive substring on label). */
|
|
13777
|
+
/** Options matching the current search term (case- and accent-insensitive substring on label). */
|
|
13748
13778
|
filteredOptions = computed(() => flattenGroups(this.filteredGroups()), /* @ts-ignore */
|
|
13749
13779
|
...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
13750
13780
|
/** Groups to render, each option carrying its index into `filteredOptions`. */
|
|
@@ -13769,10 +13799,10 @@ class MultiSelectComponent {
|
|
|
13769
13799
|
if (!this.allowCreate() || !term) {
|
|
13770
13800
|
return '';
|
|
13771
13801
|
}
|
|
13772
|
-
const taken = term
|
|
13802
|
+
const taken = foldForSearch(term);
|
|
13773
13803
|
// Measured against every option, not the filtered ones: an option hidden by
|
|
13774
13804
|
// a group filter is still an option that exists
|
|
13775
|
-
return this.flatOptions().some(o => o.label.trim()
|
|
13805
|
+
return this.flatOptions().some(o => foldForSearch(o.label.trim()) === taken)
|
|
13776
13806
|
? ''
|
|
13777
13807
|
: term;
|
|
13778
13808
|
}, /* @ts-ignore */
|