@ethlete/components 1.0.0-next.26 → 1.0.0-next.27
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.
|
@@ -3140,7 +3140,7 @@ class OverlayContainerComponent {
|
|
|
3140
3140
|
if (resolved) {
|
|
3141
3141
|
this.ownSurfaceProvider.forceSurface(resolved.name);
|
|
3142
3142
|
}
|
|
3143
|
-
const unregister = this.surfaceContextTracker.register(parentType, elevation);
|
|
3143
|
+
const unregister = this.surfaceContextTracker.register(parentType, elevation, this.elementRef.nativeElement);
|
|
3144
3144
|
this.destroyRef.onDestroy(unregister);
|
|
3145
3145
|
}
|
|
3146
3146
|
this.rootBoundary.override.set(this.elementRef.nativeElement);
|
|
@@ -3926,8 +3926,7 @@ class TextFieldControlDirective {
|
|
|
3926
3926
|
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
3927
3927
|
this.errors = input([], /* @ts-ignore */
|
|
3928
3928
|
...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
|
|
3929
|
-
this.required = input(false, /*
|
|
3930
|
-
...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
|
|
3929
|
+
this.required = input(false, { ...(ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
3931
3930
|
this.name = input('', /* @ts-ignore */
|
|
3932
3931
|
...(ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []));
|
|
3933
3932
|
/**
|
|
@@ -5385,8 +5384,7 @@ class CascaderDirective {
|
|
|
5385
5384
|
this.readonly = input(false, /* @ts-ignore */
|
|
5386
5385
|
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
5387
5386
|
/** Multi-select: node activations toggle values instead of committing-and-closing. */
|
|
5388
|
-
this.multiple = input(false, /*
|
|
5389
|
-
...(ngDevMode ? [{ debugName: "multiple" }] : /* istanbul ignore next */ []));
|
|
5387
|
+
this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
5390
5388
|
this.invalid = input(false, /* @ts-ignore */
|
|
5391
5389
|
...(ngDevMode ? [{ debugName: "invalid" }] : /* istanbul ignore next */ []));
|
|
5392
5390
|
this.errors = input([], /* @ts-ignore */
|
|
@@ -5425,8 +5423,8 @@ class CascaderDirective {
|
|
|
5425
5423
|
* level until it hits the viewport edge.
|
|
5426
5424
|
*/
|
|
5427
5425
|
this.maxVisibleColumns = input(3, { ...(ngDevMode ? { debugName: "maxVisibleColumns" } : /* istanbul ignore next */ {}), transform: (value) => Math.max(1, Math.floor(value)) });
|
|
5428
|
-
this.
|
|
5429
|
-
this.
|
|
5426
|
+
this.afterOpen = output();
|
|
5427
|
+
this.afterClose = output();
|
|
5430
5428
|
this.shouldDisplayError = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
|
|
5431
5429
|
...(ngDevMode ? [{ debugName: "shouldDisplayError" }] : /* istanbul ignore next */ []));
|
|
5432
5430
|
/** The committed values, normalized to an array (one entry in single mode, empty for no value). */
|
|
@@ -5664,11 +5662,11 @@ class CascaderDirective {
|
|
|
5664
5662
|
attempt(20);
|
|
5665
5663
|
});
|
|
5666
5664
|
},
|
|
5667
|
-
onMounted: () => this.
|
|
5665
|
+
onMounted: () => this.afterOpen.emit(),
|
|
5668
5666
|
onDocumentKeydown: (event) => this.handlePanelKeydown(event),
|
|
5669
5667
|
onAfterClosed: ({ byOutsidePointer }) => {
|
|
5670
5668
|
this.focusInside.set(false);
|
|
5671
|
-
this.
|
|
5669
|
+
this.afterClose.emit();
|
|
5672
5670
|
if (!byOutsidePointer && this.document.activeElement === this.document.body) {
|
|
5673
5671
|
this.activate();
|
|
5674
5672
|
}
|
|
@@ -5780,8 +5778,11 @@ class CascaderDirective {
|
|
|
5780
5778
|
!compareWith(currentValue, value)) {
|
|
5781
5779
|
return;
|
|
5782
5780
|
}
|
|
5783
|
-
if (resolved && resolved.length
|
|
5784
|
-
|
|
5781
|
+
if (resolved && resolved.length) {
|
|
5782
|
+
const last = resolved[resolved.length - 1];
|
|
5783
|
+
if (last && compareWith(last.value, value)) {
|
|
5784
|
+
this.path.set(resolved);
|
|
5785
|
+
}
|
|
5785
5786
|
}
|
|
5786
5787
|
}), catchError(() => EMPTY));
|
|
5787
5788
|
}), takeUntilDestroyed())
|
|
@@ -6051,10 +6052,10 @@ class CascaderDirective {
|
|
|
6051
6052
|
/** Collapses the deepest column and moves focus back to its parent — the sheet's back-nav. */
|
|
6052
6053
|
goBack() {
|
|
6053
6054
|
const path = this.openPath();
|
|
6054
|
-
|
|
6055
|
+
const parent = path.at(-1);
|
|
6056
|
+
if (!parent) {
|
|
6055
6057
|
return;
|
|
6056
6058
|
}
|
|
6057
|
-
const parent = path[path.length - 1];
|
|
6058
6059
|
this.navigationDirection.set('backward');
|
|
6059
6060
|
// returning to the root hides the Back bar (title shifts back to flush) — fade, not slide
|
|
6060
6061
|
this.titleAnimation.set(path.length === 1 ? 'fade' : 'slide');
|
|
@@ -6406,7 +6407,7 @@ class CascaderDirective {
|
|
|
6406
6407
|
this.toggle();
|
|
6407
6408
|
}
|
|
6408
6409
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CascaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6409
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CascaderDirective, isStandalone: true, selector: "[etCascader]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mixed: { classPropertyName: "mixed", publicName: "mixed", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mixedLabel: { classPropertyName: "mixedLabel", publicName: "mixedLabel", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, selectableLevels: { classPropertyName: "selectableLevels", publicName: "selectableLevels", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, toErrorMessage: { classPropertyName: "toErrorMessage", publicName: "toErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, mirrorPanelWidth: { classPropertyName: "mirrorPanelWidth", publicName: "mirrorPanelWidth", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleColumns: { classPropertyName: "maxVisibleColumns", publicName: "maxVisibleColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", mixed: "mixedChange", touched: "touchedChange", open: "openChange",
|
|
6410
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: CascaderDirective, isStandalone: true, selector: "[etCascader]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, mixed: { classPropertyName: "mixed", publicName: "mixed", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, mixedLabel: { classPropertyName: "mixedLabel", publicName: "mixedLabel", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, selectableLevels: { classPropertyName: "selectableLevels", publicName: "selectableLevels", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, toErrorMessage: { classPropertyName: "toErrorMessage", publicName: "toErrorMessage", isSignal: true, isRequired: false, transformFunction: null }, mirrorPanelWidth: { classPropertyName: "mirrorPanelWidth", publicName: "mirrorPanelWidth", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleColumns: { classPropertyName: "maxVisibleColumns", publicName: "maxVisibleColumns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", mixed: "mixedChange", touched: "touchedChange", open: "openChange", afterOpen: "afterOpen", afterClose: "afterClose" }, host: { properties: { "attr.data-cascader-open": "open() || null", "attr.data-mixed": "mixed() || null" } }, exportAs: ["etCascader"], ngImport: i0 }); }
|
|
6410
6411
|
}
|
|
6411
6412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CascaderDirective, decorators: [{
|
|
6412
6413
|
type: Directive,
|
|
@@ -6418,7 +6419,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
6418
6419
|
'[attr.data-mixed]': 'mixed() || null',
|
|
6419
6420
|
},
|
|
6420
6421
|
}]
|
|
6421
|
-
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixed", required: false }] }, { type: i0.Output, args: ["mixedChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mixedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixedLabel", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], selectableLevels: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableLevels", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], toErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "toErrorMessage", required: false }] }], mirrorPanelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "mirrorPanelWidth", required: false }] }], maxVisibleColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleColumns", required: false }] }],
|
|
6422
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], mixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixed", required: false }] }, { type: i0.Output, args: ["mixedChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], mixedLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "mixedLabel", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: false }] }], selectableLevels: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectableLevels", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], toErrorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "toErrorMessage", required: false }] }], mirrorPanelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "mirrorPanelWidth", required: false }] }], maxVisibleColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleColumns", required: false }] }], afterOpen: [{ type: i0.Output, args: ["afterOpen"] }], afterClose: [{ type: i0.Output, args: ["afterClose"] }] } });
|
|
6422
6423
|
|
|
6423
6424
|
/** One level of the hierarchy — a `role="group"` of tree items. Nodes read their level from it. */
|
|
6424
6425
|
class CascaderColumnDirective {
|
|
@@ -6951,7 +6952,7 @@ class CascaderComponent {
|
|
|
6951
6952
|
return !this.isColumnOffstage(columnIndex);
|
|
6952
6953
|
}
|
|
6953
6954
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CascaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6954
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CascaderComponent, isStandalone: true, selector: "et-cascader", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-cascader" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], hostDirectives: [{ directive: CascaderDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "open", "open", "dataSource", "dataSource", "multiple", "multiple", "selectableLevels", "selectableLevels", "compareWith", "compareWith", "toErrorMessage", "toErrorMessage", "mirrorPanelWidth", "mirrorPanelWidth", "maxVisibleColumns", "maxVisibleColumns", "mixedLabel", "mixedLabel", "placeholder", "placeholder", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "openChange", "openChange", "opened", "opened", "closed", "closed"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-cascader-trigger\" etCascaderTrigger>\n <span [attr.data-placeholder]=\"!cascader.hasValue() || null\" class=\"et-cascader-value\">\n @if (cascader.displayValue(); as display) {\n {{ display }}\n } @else {\n {{ cascader.placeholder() }}\n }\n </span>\n\n @if (showClear()) {\n <button\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"handleClearClick($event)\"\n class=\"et-cascader-clear\"\n animate.enter=\"et-cascader-clear--enter\"\n animate.leave=\"et-cascader-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [disabled]=\"cascader.disabled()\" class=\"et-cascader-arrow\" aria-hidden=\"true\" tabindex=\"-1\" type=\"button\">\n <i etIcon=\"et-chevron\"></i>\n </button>\n</div>\n\n<ng-template etCascaderSurface>\n <et-cascader-panel #panel>\n @if (cascader.canSearch()) {\n <div class=\"et-cascader-search\">\n <input [placeholder]=\"searchPlaceholder()\" etCascaderSearch />\n </div>\n }\n\n @if (panel.isSheet()) {\n <!-- the sheet body is a fixed-height flex column: the header (when present) and the\n column area share it, so the Back bar appearing doesn't change the total sheet\n height \u2014 the column area just flexes to fill, and the panel never resizes -->\n <div class=\"et-cascader-sheet-body\">\n @if (cascader.isSearching()) {\n <ng-container [ngTemplateOutlet]=\"searchResults\" />\n } @else {\n <ng-container [ngTemplateOutlet]=\"sheetBrowse\" />\n }\n </div>\n } @else if (cascader.isSearching()) {\n <ng-container [ngTemplateOutlet]=\"searchResults\" />\n } @else {\n <div [style.--_et-cascader-visible-columns]=\"cascader.visibleColumns().length\" class=\"et-cascader-columns\">\n <!-- every drilled level stays mounted on one translating track: a level collapsing\n into a breadcrumb slides out to the left together with the columns following it,\n and the reverse plays when a crumb brings it back \u2014 the viewport clips the rest -->\n <div\n [style.--_et-cascader-column-window-start]=\"cascader.visibleColumnStart()\"\n class=\"et-cascader-columns-track\"\n >\n @for (column of cascader.columns(); track $index; let columnIndex = $index) {\n <ng-container\n [ngTemplateOutlet]=\"columnBody\"\n [ngTemplateOutletContext]=\"{ $implicit: column, columnIndex }\"\n />\n }\n </div>\n </div>\n\n <!-- the full drilled trail, shown while any level is collapsed out of the window; below\n the columns so mounting never shifts them (the panel's animated block size covers the\n height change). A crumb click anchors the window at its level without truncating. -->\n @if (cascader.breadcrumbPath().length) {\n <div class=\"et-cascader-breadcrumbs\">\n @for (crumb of cascader.breadcrumbPath(); track $index; let last = $last) {\n <span\n class=\"et-cascader-crumb\"\n animate.enter=\"et-cascader-crumb--enter\"\n animate.leave=\"et-cascader-crumb--leave\"\n >\n <button\n [attr.title]=\"crumb.label\"\n [attr.data-current]=\"isCrumbCurrent($index) || null\"\n (click)=\"cascader.showColumn($index)\"\n class=\"et-cascader-breadcrumb\"\n type=\"button\"\n >\n {{ crumb.label }}\n </button>\n @if (!last) {\n <i class=\"et-cascader-breadcrumb-chevron\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n }\n </span>\n }\n </div>\n }\n }\n </et-cascader-panel>\n</ng-template>\n\n<ng-template #sheetBrowse>\n <!-- persistent nav bar (fixed height): only its contents animate, so nothing reflows\n the column list. Back is an absolute overlay (no layout impact); the title slot's\n shift wrapper translates to clear the Back space (transform = reliably smooth,\n unlike a flex width transition), and the title cross-slides on level changes -->\n <div [attr.data-back]=\"cascader.deepestColumnIndex() > 0 || null\" class=\"et-cascader-sheet-header\">\n <button\n [class.et-cascader-back--hidden]=\"cascader.deepestColumnIndex() === 0\"\n [attr.aria-hidden]=\"cascader.deepestColumnIndex() === 0 || null\"\n [attr.tabindex]=\"cascader.deepestColumnIndex() === 0 ? -1 : null\"\n (click)=\"cascader.goBack()\"\n class=\"et-cascader-back\"\n et-text-button\n size=\"sm\"\n type=\"button\"\n >\n <i class=\"et-cascader-back-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n {{ backLabel() }}\n </button>\n\n <span\n [attr.data-nav]=\"cascader.navigationDirection()\"\n [attr.data-anim]=\"cascader.titleAnimation()\"\n class=\"et-cascader-sheet-title-slot\"\n >\n <!-- shifts right (transform) to make room for Back; the title fills it at the root -->\n <span class=\"et-cascader-sheet-title-shift\">\n <!-- keyed by depth so a level change re-creates it: old title slides out in the\n travel direction, new one slides in (both absolutely positioned) -->\n @for (titleKey of [cascader.deepestColumnIndex()]; track titleKey) {\n @let titleParent = cascader.columns()[titleKey]?.parent;\n <span\n class=\"et-cascader-sheet-title\"\n animate.enter=\"et-cascader-sheet-title--enter\"\n animate.leave=\"et-cascader-sheet-title--leave\"\n >{{ titleParent?.label ?? cascader.placeholder() }}</span\n >\n }\n </span>\n </span>\n </div>\n\n <!-- one column at a time, keyed by depth so drilling / going back re-creates it and\n re-fires the slide animation; it scrolls internally within the fixed body -->\n <div class=\"et-cascader-columns\" data-sheet>\n @for (columnIndex of [cascader.deepestColumnIndex()]; track columnIndex) {\n @let sheetColumn = cascader.columns()[columnIndex];\n @if (sheetColumn) {\n <ng-container\n [ngTemplateOutlet]=\"columnBody\"\n [ngTemplateOutletContext]=\"{ $implicit: sheetColumn, columnIndex }\"\n />\n }\n }\n </div>\n</ng-template>\n\n<ng-template #searchResults>\n <div class=\"et-cascader-results\">\n @switch (cascader.searchState().status) {\n @case ('loading') {\n <div class=\"et-cascader-state et-cascader-state--loading\">\n <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n Searching\u2026\n </div>\n }\n @case ('error') {\n <div class=\"et-cascader-state et-cascader-state--error\" role=\"alert\">\n <span [etProvideColor]=\"errorColorTheme\" class=\"et-cascader-state-error-message\">{{\n cascader.searchState().error\n }}</span>\n <button (click)=\"cascader.retrySearch()\" et-text-button size=\"sm\" type=\"button\">Retry</button>\n </div>\n }\n @default {\n @if (cascader.searchState().results.length) {\n @for (result of cascader.searchState().results; track $index) {\n <button\n [path]=\"result\"\n [index]=\"$index\"\n [disabled]=\"resultDisabled(result)\"\n class=\"et-cascader-search-option\"\n etCascaderSearchOption\n type=\"button\"\n >\n @if (cascader.multiple()) {\n <span class=\"et-cascader-check\" aria-hidden=\"true\"></span>\n }\n <span class=\"et-cascader-search-option-label\">\n @for (part of result; track $index; let last = $last) {\n @if (last) {\n {{ part.label }}\n } @else {\n <span class=\"et-cascader-search-option-ancestor\">{{ part.label }} / </span>\n }\n }\n </span>\n </button>\n }\n } @else {\n <div class=\"et-cascader-state et-cascader-state--empty\">No matches</div>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #columnBody let-column let-columnIndex=\"columnIndex\">\n <div\n [etCascaderColumn]=\"columnIndex\"\n [attr.data-nav]=\"columnIndex === cascader.deepestColumnIndex() ? cascader.navigationDirection() : null\"\n [class.et-cascader-column--offstage]=\"isColumnOffstage(columnIndex)\"\n class=\"et-cascader-column\"\n >\n @switch (column.status) {\n @case ('loading') {\n <div class=\"et-cascader-state et-cascader-state--loading\">\n <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n Loading\u2026\n </div>\n }\n @case ('error') {\n <div class=\"et-cascader-state et-cascader-state--error\" role=\"alert\">\n <span [etProvideColor]=\"errorColorTheme\" class=\"et-cascader-state-error-message\">{{ column.error }}</span>\n <button (click)=\"cascader.retryColumn(columnIndex)\" et-text-button size=\"sm\" type=\"button\">Retry</button>\n </div>\n }\n @default {\n @if (column.nodes.length) {\n @for (node of column.nodes; track $index) {\n <button [node]=\"node\" [disabled]=\"node.disabled\" class=\"et-cascader-node\" etCascaderNode type=\"button\">\n @if (cascader.multiple()) {\n <span class=\"et-cascader-check\" aria-hidden=\"true\"></span>\n }\n <span class=\"et-cascader-node-label\">{{ node.label }}</span>\n @if (node.isLeaf !== true && node.hasChildren !== false) {\n <i class=\"et-cascader-node-chevron\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n }\n </button>\n }\n } @else {\n <div class=\"et-cascader-state et-cascader-state--empty\">No options</div>\n }\n }\n }\n </div>\n</ng-template>\n", styles: ["@layer components{et-cascader{display:block;flex:1;min-inline-size:0;color:inherit}et-cascader .et-cascader-trigger{display:flex;align-items:center;gap:4px;inline-size:100%;min-inline-size:0;cursor:pointer;outline:none}et-cascader[data-disabled] .et-cascader-trigger{cursor:not-allowed}et-cascader .et-cascader-value{flex:1;min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:inherit}et-cascader .et-cascader-value[data-placeholder]{color:color-mix(in srgb,currentColor 46%,transparent)}et-cascader[data-mixed] .et-cascader-value{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-cascader .et-cascader-clear,et-cascader .et-cascader-arrow{display:flex;align-items:center;justify-content:center;flex:none;inline-size:20px;block-size:20px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;outline:none}:is(et-cascader .et-cascader-clear,et-cascader .et-cascader-arrow) .et-icon{inline-size:14px;block-size:14px}@media(hover:hover){:is(et-cascader .et-cascader-clear,et-cascader .et-cascader-arrow):hover{color:var(--et-surface-color-solid, currentColor)}}:is(et-cascader .et-cascader-clear,et-cascader .et-cascader-arrow):disabled{cursor:default;color:inherit}et-cascader .et-cascader-clear.et-cascader-clear--enter{animation:et-cascader-clear-in .15s ease}et-cascader .et-cascader-clear.et-cascader-clear--leave{animation:et-cascader-clear-out .12s ease forwards}@media(prefers-reduced-motion:reduce){et-cascader .et-cascader-clear.et-cascader-clear--enter,et-cascader .et-cascader-clear.et-cascader-clear--leave{animation:none}}et-cascader .et-cascader-arrow .et-icon{rotate:180deg}@keyframes et-cascader-clear-in{0%{opacity:0}}@keyframes et-cascader-clear-out{to{opacity:0}}}\n"], dependencies: [{ kind: "directive", type: CascaderTriggerDirective, selector: "[etCascaderTrigger]", exportAs: ["etCascaderTrigger"] }, { kind: "directive", type: CascaderSurfaceDirective, selector: "ng-template[etCascaderSurface]", exportAs: ["etCascaderSurface"] }, { kind: "directive", type: CascaderColumnDirective, selector: "[etCascaderColumn]", inputs: ["etCascaderColumn"], exportAs: ["etCascaderColumn"] }, { kind: "directive", type: CascaderNodeDirective, selector: "[etCascaderNode]", inputs: ["node"], exportAs: ["etCascaderNode"] }, { kind: "directive", type: CascaderSearchDirective, selector: "input[etCascaderSearch]", exportAs: ["etCascaderSearch"] }, { kind: "directive", type: CascaderSearchOptionDirective, selector: "[etCascaderSearchOption]", inputs: ["path", "index"], exportAs: ["etCascaderSearchOption"] }, { kind: "component", type: CascaderPanelComponent, selector: "et-cascader-panel" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }, { kind: "component", type: TextButtonComponent, selector: "[et-text-button]", inputs: ["size", "iconAlignment"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6955
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CascaderComponent, isStandalone: true, selector: "et-cascader", inputs: { clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null }, backLabel: { classPropertyName: "backLabel", publicName: "backLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-cascader" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON)], hostDirectives: [{ directive: CascaderDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "open", "open", "dataSource", "dataSource", "multiple", "multiple", "selectableLevels", "selectableLevels", "compareWith", "compareWith", "toErrorMessage", "toErrorMessage", "mirrorPanelWidth", "mirrorPanelWidth", "maxVisibleColumns", "maxVisibleColumns", "mixedLabel", "mixedLabel", "placeholder", "placeholder", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "openChange", "openChange", "afterOpen", "afterOpen", "afterClose", "afterClose"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<div class=\"et-cascader-trigger\" etCascaderTrigger>\n <span [attr.data-placeholder]=\"!cascader.hasValue() || null\" class=\"et-cascader-value\">\n @if (cascader.displayValue(); as display) {\n {{ display }}\n } @else {\n {{ cascader.placeholder() }}\n }\n </span>\n\n @if (showClear()) {\n <button\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"handleClearClick($event)\"\n class=\"et-cascader-clear\"\n animate.enter=\"et-cascader-clear--enter\"\n animate.leave=\"et-cascader-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <button [disabled]=\"cascader.disabled()\" class=\"et-cascader-arrow\" aria-hidden=\"true\" tabindex=\"-1\" type=\"button\">\n <i etIcon=\"et-chevron\"></i>\n </button>\n</div>\n\n<ng-template etCascaderSurface>\n <et-cascader-panel #panel>\n @if (cascader.canSearch()) {\n <div class=\"et-cascader-search\">\n <input [placeholder]=\"searchPlaceholder()\" etCascaderSearch />\n </div>\n }\n\n @if (panel.isSheet()) {\n <!-- the sheet body is a fixed-height flex column: the header (when present) and the\n column area share it, so the Back bar appearing doesn't change the total sheet\n height \u2014 the column area just flexes to fill, and the panel never resizes -->\n <div class=\"et-cascader-sheet-body\">\n @if (cascader.isSearching()) {\n <ng-container [ngTemplateOutlet]=\"searchResults\" />\n } @else {\n <ng-container [ngTemplateOutlet]=\"sheetBrowse\" />\n }\n </div>\n } @else if (cascader.isSearching()) {\n <ng-container [ngTemplateOutlet]=\"searchResults\" />\n } @else {\n <div [style.--_et-cascader-visible-columns]=\"cascader.visibleColumns().length\" class=\"et-cascader-columns\">\n <!-- every drilled level stays mounted on one translating track: a level collapsing\n into a breadcrumb slides out to the left together with the columns following it,\n and the reverse plays when a crumb brings it back \u2014 the viewport clips the rest -->\n <div\n [style.--_et-cascader-column-window-start]=\"cascader.visibleColumnStart()\"\n class=\"et-cascader-columns-track\"\n >\n @for (column of cascader.columns(); track $index; let columnIndex = $index) {\n <ng-container\n [ngTemplateOutlet]=\"columnBody\"\n [ngTemplateOutletContext]=\"{ $implicit: column, columnIndex }\"\n />\n }\n </div>\n </div>\n\n <!-- the full drilled trail, shown while any level is collapsed out of the window; below\n the columns so mounting never shifts them (the panel's animated block size covers the\n height change). A crumb click anchors the window at its level without truncating. -->\n @if (cascader.breadcrumbPath().length) {\n <div class=\"et-cascader-breadcrumbs\">\n @for (crumb of cascader.breadcrumbPath(); track $index; let last = $last) {\n <span\n class=\"et-cascader-crumb\"\n animate.enter=\"et-cascader-crumb--enter\"\n animate.leave=\"et-cascader-crumb--leave\"\n >\n <button\n [attr.title]=\"crumb.label\"\n [attr.data-current]=\"isCrumbCurrent($index) || null\"\n (click)=\"cascader.showColumn($index)\"\n class=\"et-cascader-breadcrumb\"\n type=\"button\"\n >\n {{ crumb.label }}\n </button>\n @if (!last) {\n <i class=\"et-cascader-breadcrumb-chevron\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n }\n </span>\n }\n </div>\n }\n }\n </et-cascader-panel>\n</ng-template>\n\n<ng-template #sheetBrowse>\n <!-- persistent nav bar (fixed height): only its contents animate, so nothing reflows\n the column list. Back is an absolute overlay (no layout impact); the title slot's\n shift wrapper translates to clear the Back space (transform = reliably smooth,\n unlike a flex width transition), and the title cross-slides on level changes -->\n <div [attr.data-back]=\"cascader.deepestColumnIndex() > 0 || null\" class=\"et-cascader-sheet-header\">\n <button\n [class.et-cascader-back--hidden]=\"cascader.deepestColumnIndex() === 0\"\n [attr.aria-hidden]=\"cascader.deepestColumnIndex() === 0 || null\"\n [attr.tabindex]=\"cascader.deepestColumnIndex() === 0 ? -1 : null\"\n (click)=\"cascader.goBack()\"\n class=\"et-cascader-back\"\n et-text-button\n size=\"sm\"\n type=\"button\"\n >\n <i class=\"et-cascader-back-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n {{ backLabel() }}\n </button>\n\n <span\n [attr.data-nav]=\"cascader.navigationDirection()\"\n [attr.data-anim]=\"cascader.titleAnimation()\"\n class=\"et-cascader-sheet-title-slot\"\n >\n <!-- shifts right (transform) to make room for Back; the title fills it at the root -->\n <span class=\"et-cascader-sheet-title-shift\">\n <!-- keyed by depth so a level change re-creates it: old title slides out in the\n travel direction, new one slides in (both absolutely positioned) -->\n @for (titleKey of [cascader.deepestColumnIndex()]; track titleKey) {\n @let titleParent = cascader.columns()[titleKey]?.parent;\n <span\n class=\"et-cascader-sheet-title\"\n animate.enter=\"et-cascader-sheet-title--enter\"\n animate.leave=\"et-cascader-sheet-title--leave\"\n >{{ titleParent?.label ?? cascader.placeholder() }}</span\n >\n }\n </span>\n </span>\n </div>\n\n <!-- one column at a time, keyed by depth so drilling / going back re-creates it and\n re-fires the slide animation; it scrolls internally within the fixed body -->\n <div class=\"et-cascader-columns\" data-sheet>\n @for (columnIndex of [cascader.deepestColumnIndex()]; track columnIndex) {\n @let sheetColumn = cascader.columns()[columnIndex];\n @if (sheetColumn) {\n <ng-container\n [ngTemplateOutlet]=\"columnBody\"\n [ngTemplateOutletContext]=\"{ $implicit: sheetColumn, columnIndex }\"\n />\n }\n }\n </div>\n</ng-template>\n\n<ng-template #searchResults>\n <div class=\"et-cascader-results\">\n @switch (cascader.searchState().status) {\n @case ('loading') {\n <div class=\"et-cascader-state et-cascader-state--loading\">\n <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n Searching\u2026\n </div>\n }\n @case ('error') {\n <div class=\"et-cascader-state et-cascader-state--error\" role=\"alert\">\n <span [etProvideColor]=\"errorColorTheme\" class=\"et-cascader-state-error-message\">{{\n cascader.searchState().error\n }}</span>\n <button (click)=\"cascader.retrySearch()\" et-text-button size=\"sm\" type=\"button\">Retry</button>\n </div>\n }\n @default {\n @if (cascader.searchState().results.length) {\n @for (result of cascader.searchState().results; track $index) {\n <button\n [path]=\"result\"\n [index]=\"$index\"\n [disabled]=\"resultDisabled(result)\"\n class=\"et-cascader-search-option\"\n etCascaderSearchOption\n type=\"button\"\n >\n @if (cascader.multiple()) {\n <span class=\"et-cascader-check\" aria-hidden=\"true\"></span>\n }\n <span class=\"et-cascader-search-option-label\">\n @for (part of result; track $index; let last = $last) {\n @if (last) {\n {{ part.label }}\n } @else {\n <span class=\"et-cascader-search-option-ancestor\">{{ part.label }} / </span>\n }\n }\n </span>\n </button>\n }\n } @else {\n <div class=\"et-cascader-state et-cascader-state--empty\">No matches</div>\n }\n }\n }\n </div>\n</ng-template>\n\n<ng-template #columnBody let-column let-columnIndex=\"columnIndex\">\n <div\n [etCascaderColumn]=\"columnIndex\"\n [attr.data-nav]=\"columnIndex === cascader.deepestColumnIndex() ? cascader.navigationDirection() : null\"\n [class.et-cascader-column--offstage]=\"isColumnOffstage(columnIndex)\"\n class=\"et-cascader-column\"\n >\n @switch (column.status) {\n @case ('loading') {\n <div class=\"et-cascader-state et-cascader-state--loading\">\n <et-spinner diameter=\"16\" strokeWidth=\"2\" />\n Loading\u2026\n </div>\n }\n @case ('error') {\n <div class=\"et-cascader-state et-cascader-state--error\" role=\"alert\">\n <span [etProvideColor]=\"errorColorTheme\" class=\"et-cascader-state-error-message\">{{ column.error }}</span>\n <button (click)=\"cascader.retryColumn(columnIndex)\" et-text-button size=\"sm\" type=\"button\">Retry</button>\n </div>\n }\n @default {\n @if (column.nodes.length) {\n @for (node of column.nodes; track $index) {\n <button [node]=\"node\" [disabled]=\"node.disabled\" class=\"et-cascader-node\" etCascaderNode type=\"button\">\n @if (cascader.multiple()) {\n <span class=\"et-cascader-check\" aria-hidden=\"true\"></span>\n }\n <span class=\"et-cascader-node-label\">{{ node.label }}</span>\n @if (node.isLeaf !== true && node.hasChildren !== false) {\n <i class=\"et-cascader-node-chevron\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n }\n </button>\n }\n } @else {\n <div class=\"et-cascader-state et-cascader-state--empty\">No options</div>\n }\n }\n }\n </div>\n</ng-template>\n", styles: ["@layer components{et-cascader{display:block;flex:1;min-inline-size:0;color:inherit}et-cascader .et-cascader-trigger{display:flex;align-items:center;gap:4px;inline-size:100%;min-inline-size:0;cursor:pointer;outline:none}et-cascader[data-disabled] .et-cascader-trigger{cursor:not-allowed}et-cascader .et-cascader-value{flex:1;min-inline-size:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:inherit}et-cascader .et-cascader-value[data-placeholder]{color:color-mix(in srgb,currentColor 46%,transparent)}et-cascader[data-mixed] .et-cascader-value{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-cascader .et-cascader-clear,et-cascader .et-cascader-arrow{display:flex;align-items:center;justify-content:center;flex:none;inline-size:20px;block-size:20px;padding:0;border:none;border-radius:4px;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);cursor:pointer;outline:none}:is(et-cascader .et-cascader-clear,et-cascader .et-cascader-arrow) .et-icon{inline-size:14px;block-size:14px}@media(hover:hover){:is(et-cascader .et-cascader-clear,et-cascader .et-cascader-arrow):hover{color:var(--et-surface-color-solid, currentColor)}}:is(et-cascader .et-cascader-clear,et-cascader .et-cascader-arrow):disabled{cursor:default;color:inherit}et-cascader .et-cascader-clear.et-cascader-clear--enter{animation:et-cascader-clear-in .15s ease}et-cascader .et-cascader-clear.et-cascader-clear--leave{animation:et-cascader-clear-out .12s ease forwards}@media(prefers-reduced-motion:reduce){et-cascader .et-cascader-clear.et-cascader-clear--enter,et-cascader .et-cascader-clear.et-cascader-clear--leave{animation:none}}et-cascader .et-cascader-arrow .et-icon{rotate:180deg}@keyframes et-cascader-clear-in{0%{opacity:0}}@keyframes et-cascader-clear-out{to{opacity:0}}}\n"], dependencies: [{ kind: "directive", type: CascaderTriggerDirective, selector: "[etCascaderTrigger]", exportAs: ["etCascaderTrigger"] }, { kind: "directive", type: CascaderSurfaceDirective, selector: "ng-template[etCascaderSurface]", exportAs: ["etCascaderSurface"] }, { kind: "directive", type: CascaderColumnDirective, selector: "[etCascaderColumn]", inputs: ["etCascaderColumn"], exportAs: ["etCascaderColumn"] }, { kind: "directive", type: CascaderNodeDirective, selector: "[etCascaderNode]", inputs: ["node"], exportAs: ["etCascaderNode"] }, { kind: "directive", type: CascaderSearchDirective, selector: "input[etCascaderSearch]", exportAs: ["etCascaderSearch"] }, { kind: "directive", type: CascaderSearchOptionDirective, selector: "[etCascaderSearchOption]", inputs: ["path", "index"], exportAs: ["etCascaderSearchOption"] }, { kind: "component", type: CascaderPanelComponent, selector: "et-cascader-panel" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }, { kind: "component", type: TextButtonComponent, selector: "[et-text-button]", inputs: ["size", "iconAlignment"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6955
6956
|
}
|
|
6956
6957
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CascaderComponent, decorators: [{
|
|
6957
6958
|
type: Component,
|
|
@@ -6992,7 +6993,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
6992
6993
|
'required',
|
|
6993
6994
|
'name',
|
|
6994
6995
|
],
|
|
6995
|
-
outputs: ['valueChange', 'mixedChange', 'touchedChange', 'openChange', '
|
|
6996
|
+
outputs: ['valueChange', 'mixedChange', 'touchedChange', 'openChange', 'afterOpen', 'afterClose'],
|
|
6996
6997
|
},
|
|
6997
6998
|
ColorInteractiveDirective,
|
|
6998
6999
|
], host: {
|
|
@@ -8148,7 +8149,7 @@ const maskPatternFromDisplayFormat = (format) => {
|
|
|
8148
8149
|
let hasSlots = false;
|
|
8149
8150
|
let index = 0;
|
|
8150
8151
|
while (index < format.length) {
|
|
8151
|
-
const char = format
|
|
8152
|
+
const char = format.charAt(index);
|
|
8152
8153
|
if (char === "'") {
|
|
8153
8154
|
// date-fns quoting: '...' is literal text, '' inside it is an escaped quote,
|
|
8154
8155
|
// and a bare '' outside is a single literal quote
|
|
@@ -9871,7 +9872,7 @@ class SelectionListDirective {
|
|
|
9871
9872
|
...(ngDevMode ? [{ debugName: "mixed" }] : /* istanbul ignore next */ []));
|
|
9872
9873
|
this.touched = model(false, /* @ts-ignore */
|
|
9873
9874
|
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
9874
|
-
this.multipleInput = input(false, { ...(ngDevMode ? { debugName: "multipleInput" } : /* istanbul ignore next */ {}), alias: 'multiple' });
|
|
9875
|
+
this.multipleInput = input(false, { ...(ngDevMode ? { debugName: "multipleInput" } : /* istanbul ignore next */ {}), alias: 'multiple', transform: booleanAttribute });
|
|
9875
9876
|
this.disabled = input(false, /* @ts-ignore */
|
|
9876
9877
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
9877
9878
|
/** View-only: options keep their normal look and focusability but cannot be (de)selected. */
|
|
@@ -9967,8 +9968,7 @@ class SelectionOptionDirective {
|
|
|
9967
9968
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
9968
9969
|
this.checked = model(false, /* @ts-ignore */
|
|
9969
9970
|
...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
|
|
9970
|
-
this.disabled = input(false, /*
|
|
9971
|
-
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
9971
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
9972
9972
|
this.effectiveDisabled = computed(() => this.disabled() || (this.list?.disabled() ?? false), /* @ts-ignore */
|
|
9973
9973
|
...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
|
|
9974
9974
|
this.effectiveReadonly = computed(() => this.list?.readonly() ?? false, /* @ts-ignore */
|
|
@@ -10731,7 +10731,7 @@ const deriveDurationFormatSpec = (format) => {
|
|
|
10731
10731
|
let currentSeparator = '';
|
|
10732
10732
|
let index = 0;
|
|
10733
10733
|
while (index < format.length) {
|
|
10734
|
-
const char = format
|
|
10734
|
+
const char = format.charAt(index);
|
|
10735
10735
|
const unit = TOKEN_UNIT[char];
|
|
10736
10736
|
if (unit) {
|
|
10737
10737
|
let width = 0;
|
|
@@ -10806,7 +10806,7 @@ const parseDuration = (value, spec) => {
|
|
|
10806
10806
|
}
|
|
10807
10807
|
else {
|
|
10808
10808
|
// one digit run: consume from the right, smallest unit first
|
|
10809
|
-
let digits = groups[0];
|
|
10809
|
+
let digits = groups[0] ?? '';
|
|
10810
10810
|
unitValues = spec.segments
|
|
10811
10811
|
.map((segment) => segment.width)
|
|
10812
10812
|
.reverse()
|
|
@@ -10819,12 +10819,12 @@ const parseDuration = (value, spec) => {
|
|
|
10819
10819
|
.reverse();
|
|
10820
10820
|
// leftover digits pile onto the largest unit (e.g. `123456` under mm:ss → 1234 min)
|
|
10821
10821
|
if (digits.length) {
|
|
10822
|
-
unitValues[0] = Number(digits + String(unitValues[0]).padStart(spec.segments[0]
|
|
10822
|
+
unitValues[0] = Number(digits + String(unitValues[0]).padStart(spec.segments[0]?.width ?? 0, '0'));
|
|
10823
10823
|
}
|
|
10824
10824
|
}
|
|
10825
10825
|
let total = 0;
|
|
10826
10826
|
spec.segments.forEach((segment, position) => {
|
|
10827
|
-
total += unitValues[position] * UNIT_MS[segment.unit];
|
|
10827
|
+
total += (unitValues[position] ?? 0) * UNIT_MS[segment.unit];
|
|
10828
10828
|
});
|
|
10829
10829
|
return total;
|
|
10830
10830
|
};
|
|
@@ -12325,7 +12325,8 @@ class FormFieldComponent {
|
|
|
12325
12325
|
}, /* @ts-ignore */
|
|
12326
12326
|
...(ngDevMode ? [{ debugName: "supportHeight" }] : /* istanbul ignore next */ []));
|
|
12327
12327
|
effect(() => {
|
|
12328
|
-
this.
|
|
12328
|
+
const element = this.controlFrame()?.nativeElement ?? null;
|
|
12329
|
+
untracked(() => this.formFieldDir.controlFrameElement.set(element));
|
|
12329
12330
|
});
|
|
12330
12331
|
toObservable(this.errorAnimatable)
|
|
12331
12332
|
.pipe(switchMap((animatable) => {
|
|
@@ -12877,8 +12878,7 @@ class NumberInputComponent {
|
|
|
12877
12878
|
this.destroyRef = inject(DestroyRef);
|
|
12878
12879
|
this.document = inject(DOCUMENT$1);
|
|
12879
12880
|
/** Renders −/+ stepper buttons with press-and-hold auto-repeat. */
|
|
12880
|
-
this.stepper = input(false, /*
|
|
12881
|
-
...(ngDevMode ? [{ debugName: "stepper" }] : /* istanbul ignore next */ []));
|
|
12881
|
+
this.stepper = input(false, { ...(ngDevMode ? { debugName: "stepper" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
12882
12882
|
/** Accessible name of the increment stepper button. */
|
|
12883
12883
|
this.incrementLabel = input('Increment', /* @ts-ignore */
|
|
12884
12884
|
...(ngDevMode ? [{ debugName: "incrementLabel" }] : /* istanbul ignore next */ []));
|
|
@@ -16111,8 +16111,14 @@ class RichTextEditorTriggersDirective {
|
|
|
16111
16111
|
editor.tokenCodec.set(createRichTextEditorTokenCodec(() => this.triggers()));
|
|
16112
16112
|
// Reserve the trigger chars so markdown autoformat never converts what may start a token run
|
|
16113
16113
|
// (e.g. a `#` trigger vs `# ` heading), and suspend autoformat while a popup run is active.
|
|
16114
|
-
effect(() =>
|
|
16115
|
-
|
|
16114
|
+
effect(() => {
|
|
16115
|
+
const reservedChars = this.triggers().map((trigger) => trigger.char);
|
|
16116
|
+
untracked(() => editor.autoformatReservedChars.set(reservedChars));
|
|
16117
|
+
});
|
|
16118
|
+
effect(() => {
|
|
16119
|
+
const suppressed = this.activeMatch() !== null;
|
|
16120
|
+
untracked(() => editor.autoformatSuppressed.set(suppressed));
|
|
16121
|
+
});
|
|
16116
16122
|
if (ngDevMode) {
|
|
16117
16123
|
effect(() => this.assertUniqueTriggers(this.triggers()));
|
|
16118
16124
|
}
|
|
@@ -17422,8 +17428,7 @@ class MenuItemDirective {
|
|
|
17422
17428
|
this.sameElementTrigger = inject(MenuTriggerDirective, { self: true, optional: true });
|
|
17423
17429
|
this.elementRef = inject(ElementRef);
|
|
17424
17430
|
this.destroyRef = inject(DestroyRef);
|
|
17425
|
-
this.disabled = input(false, /*
|
|
17426
|
-
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
17431
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
17427
17432
|
this.closeOnActivate = input(undefined, /* @ts-ignore */
|
|
17428
17433
|
...(ngDevMode ? [{ debugName: "closeOnActivate" }] : /* istanbul ignore next */ []));
|
|
17429
17434
|
this.activate = output();
|
|
@@ -17723,7 +17728,7 @@ class MenuSelectionGroupDirective {
|
|
|
17723
17728
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
17724
17729
|
this.touched = model(false, /* @ts-ignore */
|
|
17725
17730
|
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
17726
|
-
this.multipleInput = input(false, { ...(ngDevMode ? { debugName: "multipleInput" } : /* istanbul ignore next */ {}), alias: 'multiple' });
|
|
17731
|
+
this.multipleInput = input(false, { ...(ngDevMode ? { debugName: "multipleInput" } : /* istanbul ignore next */ {}), alias: 'multiple', transform: booleanAttribute });
|
|
17727
17732
|
this.disabled = input(false, /* @ts-ignore */
|
|
17728
17733
|
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
17729
17734
|
this.invalid = input(false, /* @ts-ignore */
|
|
@@ -18348,11 +18353,11 @@ class RichTextEditorAlignToolComponent {
|
|
|
18348
18353
|
return [paragraph];
|
|
18349
18354
|
}
|
|
18350
18355
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RichTextEditorAlignToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18351
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RichTextEditorAlignToolComponent, isStandalone: true, selector: "et-rich-text-editor-align-tool", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-rte-align-tool" }, providers: [provideIcons(ALIGN_LEFT_ICON, ALIGN_CENTER_ICON, ALIGN_RIGHT_ICON, ALIGN_JUSTIFY_ICON)], ngImport: i0, template: "<div #alignMenu=\"etMenu\" [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"disabled()\"\n [pressed]=\"alignMenu.open()\"\n
|
|
18356
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RichTextEditorAlignToolComponent, isStandalone: true, selector: "et-rich-text-editor-align-tool", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-rte-align-tool" }, providers: [provideIcons(ALIGN_LEFT_ICON, ALIGN_CENTER_ICON, ALIGN_RIGHT_ICON, ALIGN_JUSTIFY_ICON)], ngImport: i0, template: "<div #alignMenu=\"etMenu\" [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"disabled()\"\n [pressed]=\"alignMenu.open()\"\n (mousedown)=\"$event.preventDefault()\"\n emitAriaPressed=\"false\"\n etMenuTrigger\n et-icon-button\n size=\"sm\"\n type=\"button\"\n mutedUntilPressed\n aria-label=\"Text alignment\"\n >\n <i [etIcon]=\"currentIcon()\"></i>\n </button>\n\n <ng-template etMenuSurface>\n <et-menu>\n <et-menu-radio-group [value]=\"current()\" (valueChange)=\"select($event)\" (mousedown)=\"$event.preventDefault()\">\n @for (option of OPTIONS; track option.value) {\n <!-- eslint-disable-next-line ethlete/prefer-static-boolean-properties -- closeOnActivate is tri-state (boolean | undefined); a transform would collapse its unset state -->\n <et-menu-radio-item [value]=\"option.value\" [closeOnActivate]=\"true\" [icon]=\"option.icon\">\n {{ option.label }}\n </et-menu-radio-item>\n }\n </et-menu-radio-group>\n </et-menu>\n </ng-template>\n</div>\n", styles: ["@layer components{.et-rte-align-tool{display:contents}}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }, { kind: "directive", type: MenuDirective, selector: "[etMenu]", inputs: ["placement", "fallbackPlacements", "offset", "viewportPadding", "arrow", "arrowPadding", "autoFocus", "hoverOpen", "hoverOpenDelay", "hoverCloseDelay", "disabled", "open"], outputs: ["openChange"], exportAs: ["etMenu"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[etMenuTrigger]", exportAs: ["etMenuTrigger"] }, { kind: "directive", type: MenuSurfaceDirective, selector: "ng-template[etMenuSurface]", exportAs: ["etMenuSurface"] }, { kind: "component", type: MenuComponent, selector: "et-menu" }, { kind: "component", type: MenuRadioGroupComponent, selector: "et-menu-radio-group" }, { kind: "component", type: MenuRadioItemComponent, selector: "et-menu-radio-item", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
18352
18357
|
}
|
|
18353
18358
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RichTextEditorAlignToolComponent, decorators: [{
|
|
18354
18359
|
type: Component,
|
|
18355
|
-
args: [{ selector: 'et-rich-text-editor-align-tool', encapsulation: ViewEncapsulation.None, imports: [...BUTTON_IMPORTS, IconDirective, ...MENU_IMPORTS], providers: [provideIcons(ALIGN_LEFT_ICON, ALIGN_CENTER_ICON, ALIGN_RIGHT_ICON, ALIGN_JUSTIFY_ICON)], host: { class: 'et-rte-align-tool' }, template: "<div #alignMenu=\"etMenu\" [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"disabled()\"\n [pressed]=\"alignMenu.open()\"\n
|
|
18360
|
+
args: [{ selector: 'et-rich-text-editor-align-tool', encapsulation: ViewEncapsulation.None, imports: [...BUTTON_IMPORTS, IconDirective, ...MENU_IMPORTS], providers: [provideIcons(ALIGN_LEFT_ICON, ALIGN_CENTER_ICON, ALIGN_RIGHT_ICON, ALIGN_JUSTIFY_ICON)], host: { class: 'et-rte-align-tool' }, template: "<div #alignMenu=\"etMenu\" [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"disabled()\"\n [pressed]=\"alignMenu.open()\"\n (mousedown)=\"$event.preventDefault()\"\n emitAriaPressed=\"false\"\n etMenuTrigger\n et-icon-button\n size=\"sm\"\n type=\"button\"\n mutedUntilPressed\n aria-label=\"Text alignment\"\n >\n <i [etIcon]=\"currentIcon()\"></i>\n </button>\n\n <ng-template etMenuSurface>\n <et-menu>\n <et-menu-radio-group [value]=\"current()\" (valueChange)=\"select($event)\" (mousedown)=\"$event.preventDefault()\">\n @for (option of OPTIONS; track option.value) {\n <!-- eslint-disable-next-line ethlete/prefer-static-boolean-properties -- closeOnActivate is tri-state (boolean | undefined); a transform would collapse its unset state -->\n <et-menu-radio-item [value]=\"option.value\" [closeOnActivate]=\"true\" [icon]=\"option.icon\">\n {{ option.label }}\n </et-menu-radio-item>\n }\n </et-menu-radio-group>\n </et-menu>\n </ng-template>\n</div>\n", styles: ["@layer components{.et-rte-align-tool{display:contents}}\n"] }]
|
|
18356
18361
|
}], ctorParameters: () => [], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }] } });
|
|
18357
18362
|
|
|
18358
18363
|
/**
|
|
@@ -18912,11 +18917,11 @@ class RichTextEditorTableToolComponent {
|
|
|
18912
18917
|
selection?.addRange(range);
|
|
18913
18918
|
}
|
|
18914
18919
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RichTextEditorTableToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18915
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RichTextEditorTableToolComponent, isStandalone: true, selector: "et-rich-text-editor-table-tool", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-rte-table-tool" }, providers: [provideIcons(TABLE_ICON)], viewQueries: [{ propertyName: "menu", first: true, predicate: MenuDirective, descendants: true, isSignal: true }, { propertyName: "pickerGrid", first: true, predicate: ["pickerGrid"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #tableMenu=\"etMenu\" [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"disabled()\"\n [pressed]=\"tableMenu.open()\"\n
|
|
18920
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RichTextEditorTableToolComponent, isStandalone: true, selector: "et-rich-text-editor-table-tool", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-rte-table-tool" }, providers: [provideIcons(TABLE_ICON)], viewQueries: [{ propertyName: "menu", first: true, predicate: MenuDirective, descendants: true, isSignal: true }, { propertyName: "pickerGrid", first: true, predicate: ["pickerGrid"], descendants: true, isSignal: true }], ngImport: i0, template: "<div #tableMenu=\"etMenu\" [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"disabled()\"\n [pressed]=\"tableMenu.open()\"\n (mousedown)=\"$event.preventDefault(); refreshContext()\"\n emitAriaPressed=\"false\"\n etMenuTrigger\n et-icon-button\n size=\"sm\"\n type=\"button\"\n mutedUntilPressed\n aria-label=\"Table\"\n >\n <i etIcon=\"et-table\"></i>\n </button>\n\n <ng-template etMenuSurface>\n <et-menu (keydown)=\"handlePickerKeydown($event)\">\n @if (context()) {\n @if (canAddHeaderRow()) {\n <button (click)=\"addHeaderRow()\" et-menu-item type=\"button\">Insert header row</button>\n }\n @if (!inHeaderRow()) {\n <button (click)=\"addRow('above')\" et-menu-item type=\"button\">Insert row above</button>\n }\n <button (click)=\"addRow('below')\" et-menu-item type=\"button\">Insert row below</button>\n <button (click)=\"addColumn('left')\" et-menu-item type=\"button\">Insert column left</button>\n <button (click)=\"addColumn('right')\" et-menu-item type=\"button\">Insert column right</button>\n <button (click)=\"removeRow()\" et-menu-item type=\"button\" variant=\"destructive\">Delete row</button>\n <button (click)=\"removeColumn()\" et-menu-item type=\"button\" variant=\"destructive\">Delete column</button>\n <button (click)=\"removeTable()\" et-menu-item type=\"button\" variant=\"destructive\">Delete table</button>\n } @else {\n <div class=\"et-rte-table-picker\">\n <div\n #pickerGrid\n (pointerleave)=\"hover(-1, -1)\"\n (pointerdown)=\"beginSwipeSelection($event)\"\n (pointerup)=\"commitSwipeSelection($event)\"\n class=\"et-rte-table-picker-grid\"\n >\n @for (row of pickerRows; track row) {\n @for (col of pickerCols; track col) {\n <button\n [class.et-rte-table-picker-cell--active]=\"row < hoverRows() && col < hoverCols()\"\n [attr.aria-label]=\"row + 1 + ' by ' + (col + 1)\"\n (pointerenter)=\"hover(row, col)\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"insertFromCell(row, col)\"\n class=\"et-rte-table-picker-cell\"\n type=\"button\"\n ></button>\n }\n }\n </div>\n <span class=\"et-rte-table-picker-label\">{{ sizeLabel() }}</span>\n </div>\n }\n </et-menu>\n </ng-template>\n</div>\n", styles: ["@layer components{.et-rte-table-tool{display:contents}.et-rte-table-picker{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px}.et-rte-table-picker-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;touch-action:none}.et-rte-table-picker-cell{inline-size:16px;block-size:16px;padding:0;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .2));border-radius:2px;background:transparent;cursor:pointer;transition:background 80ms ease,border-color 80ms ease}.et-rte-table-picker-cell--active{border-color:var(--et-theme-color-primary-solid, currentColor);background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 35%,transparent)}.et-rte-table-picker-label{font-size:12px;color:var(--et-surface-color-muted-solid, currentColor)}}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }, { kind: "directive", type: MenuDirective, selector: "[etMenu]", inputs: ["placement", "fallbackPlacements", "offset", "viewportPadding", "arrow", "arrowPadding", "autoFocus", "hoverOpen", "hoverOpenDelay", "hoverCloseDelay", "disabled", "open"], outputs: ["openChange"], exportAs: ["etMenu"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[etMenuTrigger]", exportAs: ["etMenuTrigger"] }, { kind: "directive", type: MenuSurfaceDirective, selector: "ng-template[etMenuSurface]", exportAs: ["etMenuSurface"] }, { kind: "component", type: MenuComponent, selector: "et-menu" }, { kind: "component", type: MenuItemComponent, selector: "button[et-menu-item], a[et-menu-item]", inputs: ["variant"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
18916
18921
|
}
|
|
18917
18922
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RichTextEditorTableToolComponent, decorators: [{
|
|
18918
18923
|
type: Component,
|
|
18919
|
-
args: [{ selector: 'et-rich-text-editor-table-tool', encapsulation: ViewEncapsulation.None, imports: [...BUTTON_IMPORTS, IconDirective, ...MENU_IMPORTS], providers: [provideIcons(TABLE_ICON)], host: { class: 'et-rte-table-tool' }, template: "<div #tableMenu=\"etMenu\" [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"disabled()\"\n [pressed]=\"tableMenu.open()\"\n
|
|
18924
|
+
args: [{ selector: 'et-rich-text-editor-table-tool', encapsulation: ViewEncapsulation.None, imports: [...BUTTON_IMPORTS, IconDirective, ...MENU_IMPORTS], providers: [provideIcons(TABLE_ICON)], host: { class: 'et-rte-table-tool' }, template: "<div #tableMenu=\"etMenu\" [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"disabled()\"\n [pressed]=\"tableMenu.open()\"\n (mousedown)=\"$event.preventDefault(); refreshContext()\"\n emitAriaPressed=\"false\"\n etMenuTrigger\n et-icon-button\n size=\"sm\"\n type=\"button\"\n mutedUntilPressed\n aria-label=\"Table\"\n >\n <i etIcon=\"et-table\"></i>\n </button>\n\n <ng-template etMenuSurface>\n <et-menu (keydown)=\"handlePickerKeydown($event)\">\n @if (context()) {\n @if (canAddHeaderRow()) {\n <button (click)=\"addHeaderRow()\" et-menu-item type=\"button\">Insert header row</button>\n }\n @if (!inHeaderRow()) {\n <button (click)=\"addRow('above')\" et-menu-item type=\"button\">Insert row above</button>\n }\n <button (click)=\"addRow('below')\" et-menu-item type=\"button\">Insert row below</button>\n <button (click)=\"addColumn('left')\" et-menu-item type=\"button\">Insert column left</button>\n <button (click)=\"addColumn('right')\" et-menu-item type=\"button\">Insert column right</button>\n <button (click)=\"removeRow()\" et-menu-item type=\"button\" variant=\"destructive\">Delete row</button>\n <button (click)=\"removeColumn()\" et-menu-item type=\"button\" variant=\"destructive\">Delete column</button>\n <button (click)=\"removeTable()\" et-menu-item type=\"button\" variant=\"destructive\">Delete table</button>\n } @else {\n <div class=\"et-rte-table-picker\">\n <div\n #pickerGrid\n (pointerleave)=\"hover(-1, -1)\"\n (pointerdown)=\"beginSwipeSelection($event)\"\n (pointerup)=\"commitSwipeSelection($event)\"\n class=\"et-rte-table-picker-grid\"\n >\n @for (row of pickerRows; track row) {\n @for (col of pickerCols; track col) {\n <button\n [class.et-rte-table-picker-cell--active]=\"row < hoverRows() && col < hoverCols()\"\n [attr.aria-label]=\"row + 1 + ' by ' + (col + 1)\"\n (pointerenter)=\"hover(row, col)\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"insertFromCell(row, col)\"\n class=\"et-rte-table-picker-cell\"\n type=\"button\"\n ></button>\n }\n }\n </div>\n <span class=\"et-rte-table-picker-label\">{{ sizeLabel() }}</span>\n </div>\n }\n </et-menu>\n </ng-template>\n</div>\n", styles: ["@layer components{.et-rte-table-tool{display:contents}.et-rte-table-picker{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px}.et-rte-table-picker-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;touch-action:none}.et-rte-table-picker-cell{inline-size:16px;block-size:16px;padding:0;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .2));border-radius:2px;background:transparent;cursor:pointer;transition:background 80ms ease,border-color 80ms ease}.et-rte-table-picker-cell--active{border-color:var(--et-theme-color-primary-solid, currentColor);background:color-mix(in srgb,var(--et-theme-color-primary-solid, currentColor) 35%,transparent)}.et-rte-table-picker-label{font-size:12px;color:var(--et-surface-color-muted-solid, currentColor)}}\n"] }]
|
|
18920
18925
|
}], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }], menu: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MenuDirective), { isSignal: true }] }], pickerGrid: [{ type: i0.ViewChild, args: ['pickerGrid', { isSignal: true }] }] } });
|
|
18921
18926
|
|
|
18922
18927
|
/**
|
|
@@ -19347,7 +19352,11 @@ class RichTextEditorComponent {
|
|
|
19347
19352
|
catch {
|
|
19348
19353
|
// cross-origin top — its scrolls are invisible to us; the frame keeps local tracking
|
|
19349
19354
|
}
|
|
19350
|
-
merge(...viewports.map((v) => fromEvent(v, 'resize')),
|
|
19355
|
+
merge(...viewports.map((v) => fromEvent(v, 'resize')),
|
|
19356
|
+
// These are ancestor viewports/windows (visualViewport, iframe top), not a component-owned
|
|
19357
|
+
// scroll container — signalElementScrollState targets a known elementRef and doesn't apply.
|
|
19358
|
+
// eslint-disable-next-line ethlete/prefer-scroll-state
|
|
19359
|
+
...scrollTargets.map((t) => fromEvent(t, 'scroll', { passive: true })))
|
|
19351
19360
|
.pipe(tap(() => kick()), takeUntilDestroyed(this.destroyRef))
|
|
19352
19361
|
.subscribe();
|
|
19353
19362
|
}
|
|
@@ -19375,7 +19384,7 @@ class RichTextEditorComponent {
|
|
|
19375
19384
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RichTextEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19376
19385
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: RichTextEditorComponent, isStandalone: true, selector: "et-rich-text-editor", host: { listeners: { "click": "dir.activate()" }, properties: { "class.et-rich-text-editor--touch": "hasTouchInput()", "class.et-rich-text-editor--docked-toolbar": "dockedToolbar()" }, classAttribute: "et-rich-text-editor" }, providers: [
|
|
19377
19386
|
provideIcons(BOLD_ICON, ITALIC_ICON, UNDERLINE_ICON, STRIKETHROUGH_ICON, CODE_ICON, HEADING_1_ICON, HEADING_2_ICON, HEADING_3_ICON, LIST_BULLETED_ICON, LIST_NUMBERED_ICON, LINK_ICON, PARAGRAPH_ICON),
|
|
19378
|
-
], viewQueries: [{ propertyName: "editable", first: true, predicate: ["editable"], descendants: true, isSignal: true }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, isSignal: true }], hostDirectives: [{ directive: RichTextEditorDirective, inputs: ["value", "value", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "tools", "tools", "autoformat", "autoformat"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }, { directive: RichTextEditorFloatingToolbarDirective }, { directive: RichTextEditorLinkEditorDirective }], ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- ARIA toolbar pattern: the container only relays keys/focus for its roving tab stop; the buttons inside are the focusable controls -->\n<div\n #toolbar\n (keydown)=\"handleToolbarKeydown($event)\"\n (focusin)=\"handleToolbarFocusIn($event)\"\n class=\"et-rte-toolbar\"\n role=\"toolbar\"\n aria-label=\"Text formatting\"\n>\n @for (tool of dir.resolvedTools(); track $index) {\n @switch (tool) {\n @case (TOOLS.DIVIDER) {\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n }\n @case (TOOLS.HEADING) {\n <div #headingMenu=\"etMenu\" [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"dir.disabled() || dir.readonly() || dir.headingToolDisabled()\"\n [pressed]=\"headingMenu.open()\"\n [emitAriaPressed]=\"false\"\n [attr.aria-label]=\"'Text style: ' + currentHeadingLabel()\"\n (mousedown)=\"$event.preventDefault()\"\n etMenuTrigger\n et-icon-button\n size=\"sm\"\n type=\"button\"\n mutedUntilPressed\n >\n <i [etIcon]=\"currentHeadingIcon()\"></i>\n </button>\n\n <ng-template etMenuSurface>\n <et-menu>\n <et-menu-radio-group\n [value]=\"dir.headingLevel()\"\n (valueChange)=\"selectHeading($event)\"\n (mousedown)=\"$event.preventDefault()\"\n >\n @for (option of HEADING_OPTIONS; track option.label) {\n <et-menu-radio-item [value]=\"option.level\" [closeOnActivate]=\"true\" [icon]=\"option.icon\">\n {{ option.label }}\n </et-menu-radio-item>\n }\n </et-menu-radio-group>\n </et-menu>\n </ng-template>\n </div>\n }\n @default {\n @if (toolDefs().get(tool); as def) {\n @if (def.control; as control) {\n <ng-container [ngComponentOutlet]=\"control\" [ngComponentOutletInputs]=\"{ editor: dir }\" />\n } @else {\n <button\n [pressed]=\"def.isActive?.(dir) ?? false\"\n [disabled]=\"dir.disabled() || dir.readonly() || (def.isDisabled?.(dir) ?? false)\"\n [attr.aria-label]=\"def.label\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"def.run?.(dir)\"\n mutedUntilPressed\n et-icon-button\n size=\"sm\"\n type=\"button\"\n >\n <i [allowHardcodedColor]=\"def.allowHardcodedColor ?? false\" [etIcon]=\"def.icon ?? ''\"></i>\n </button>\n }\n }\n }\n }\n }\n</div>\n\n<div\n #editable\n [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n [attr.data-placeholder]=\"dir.placeholder() || null\"\n [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"dir.describedBy() || null\"\n [attr.aria-labelledby]=\"dir.labelId() || null\"\n [attr.aria-disabled]=\"dir.disabled() || null\"\n [attr.aria-readonly]=\"dir.readonly() || null\"\n (input)=\"syncValueFromDom()\"\n (beforeinput)=\"interceptFormattingCommand($event)\"\n (keydown)=\"interceptEditorKeydown($event)\"\n (paste)=\"interceptPaste($event)\"\n (pointerdown)=\"dir.clearPendingMarks()\"\n (focus)=\"dir.focused.set(true)\"\n (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n class=\"et-rte-content\"\n role=\"textbox\"\n aria-multiline=\"true\"\n></div>\n", styles: ["@layer components{@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent);--et-icon-button-border-radius: var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar .et-icon-button{--_et-focus-ring-offset: -1px}et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar{position:fixed;inset-inline:0;inset-block-end:var(--_et-rte-keyboard-inset, 0px);z-index:60;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-inline:8px;padding-block:6px;background:var(--et-surface-background-solid, var(--et-surface-2, rgb(24 24 24)));border-block-end:none;border-block-start:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent);box-shadow:0 -6px 20px #0000003d;scrollbar-width:none;opacity:0;transform:translateY(100%);pointer-events:none;transition:opacity .16s var(--ease-out-5, ease),transform .26s var(--ease-out-5, ease)}et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar::-webkit-scrollbar{display:none}et-rich-text-editor.et-rich-text-editor--touch.et-rich-text-editor--docked-toolbar .et-rte-toolbar{opacity:1;transform:translateY(0);pointer-events:auto}et-rich-text-editor.et-rich-text-editor--touch .et-rte-content{font-size:max(1em,16px)}@media(prefers-reduced-motion:reduce){et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar{transition-duration:0ms}}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{--et-theme-color-primary-rgb: var(--et-color-primary);--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1,et-rich-text-editor .et-rte-content h2,et-rich-text-editor .et-rte-content h3,et-rich-text-editor .et-rte-content h4,et-rich-text-editor .et-rte-content h5,et-rich-text-editor .et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}et-rich-text-editor .et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,et-rich-text-editor .et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1{font-size:2.4rem}et-rich-text-editor .et-rte-content h2{font-size:2rem}et-rich-text-editor .et-rte-content h3{font-size:1.6rem}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ul ul,et-rich-text-editor .et-rte-content ul ul ul ul ul{list-style-type:circle}et-rich-text-editor .et-rte-content ul ul ul,et-rich-text-editor .et-rte-content ul ul ul ul ul ul{list-style-type:square}et-rich-text-editor .et-rte-content ul ul ul ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content ol ol,et-rich-text-editor .et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}et-rich-text-editor .et-rte-content ol ol ol,et-rich-text-editor .et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}et-rich-text-editor .et-rte-content ol ol ol ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}et-rich-text-editor .et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}et-rich-text-editor .et-rte-content table{border-collapse:collapse;inline-size:100%;margin-block:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content :is(th,td){padding:6px 8px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .15));text-align:start;vertical-align:top}et-rich-text-editor .et-rte-content th{font-weight:700;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-rich-text-editor .et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}et-rich-text-editor .et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }, { kind: "directive", type: MenuDirective, selector: "[etMenu]", inputs: ["placement", "fallbackPlacements", "offset", "viewportPadding", "arrow", "arrowPadding", "autoFocus", "hoverOpen", "hoverOpenDelay", "hoverCloseDelay", "disabled", "open"], outputs: ["openChange"], exportAs: ["etMenu"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[etMenuTrigger]", exportAs: ["etMenuTrigger"] }, { kind: "directive", type: MenuSurfaceDirective, selector: "ng-template[etMenuSurface]", exportAs: ["etMenuSurface"] }, { kind: "component", type: MenuComponent, selector: "et-menu" }, { kind: "component", type: MenuRadioGroupComponent, selector: "et-menu-radio-group" }, { kind: "component", type: MenuRadioItemComponent, selector: "et-menu-radio-item", inputs: ["icon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
19387
|
+
], viewQueries: [{ propertyName: "editable", first: true, predicate: ["editable"], descendants: true, isSignal: true }, { propertyName: "toolbar", first: true, predicate: ["toolbar"], descendants: true, isSignal: true }], hostDirectives: [{ directive: RichTextEditorDirective, inputs: ["value", "value", "disabled", "disabled", "readonly", "readonly", "hidden", "hidden", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "tools", "tools", "autoformat", "autoformat"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange"] }, { directive: RichTextEditorFloatingToolbarDirective }, { directive: RichTextEditorLinkEditorDirective }], ngImport: i0, template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- ARIA toolbar pattern: the container only relays keys/focus for its roving tab stop; the buttons inside are the focusable controls -->\n<div\n #toolbar\n (keydown)=\"handleToolbarKeydown($event)\"\n (focusin)=\"handleToolbarFocusIn($event)\"\n class=\"et-rte-toolbar\"\n role=\"toolbar\"\n aria-label=\"Text formatting\"\n>\n @for (tool of dir.resolvedTools(); track $index) {\n @switch (tool) {\n @case (TOOLS.DIVIDER) {\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n }\n @case (TOOLS.HEADING) {\n <div #headingMenu=\"etMenu\" [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"dir.disabled() || dir.readonly() || dir.headingToolDisabled()\"\n [pressed]=\"headingMenu.open()\"\n [attr.aria-label]=\"'Text style: ' + currentHeadingLabel()\"\n (mousedown)=\"$event.preventDefault()\"\n emitAriaPressed=\"false\"\n etMenuTrigger\n et-icon-button\n size=\"sm\"\n type=\"button\"\n mutedUntilPressed\n >\n <i [etIcon]=\"currentHeadingIcon()\"></i>\n </button>\n\n <ng-template etMenuSurface>\n <et-menu>\n <et-menu-radio-group\n [value]=\"dir.headingLevel()\"\n (valueChange)=\"selectHeading($event)\"\n (mousedown)=\"$event.preventDefault()\"\n >\n @for (option of HEADING_OPTIONS; track option.label) {\n <!-- eslint-disable-next-line ethlete/prefer-static-boolean-properties -- closeOnActivate is tri-state (boolean | undefined); a transform would collapse its unset state -->\n <et-menu-radio-item [value]=\"option.level\" [closeOnActivate]=\"true\" [icon]=\"option.icon\">\n {{ option.label }}\n </et-menu-radio-item>\n }\n </et-menu-radio-group>\n </et-menu>\n </ng-template>\n </div>\n }\n @default {\n @if (toolDefs().get(tool); as def) {\n @if (def.control; as control) {\n <ng-container [ngComponentOutlet]=\"control\" [ngComponentOutletInputs]=\"{ editor: dir }\" />\n } @else {\n <button\n [pressed]=\"def.isActive?.(dir) ?? false\"\n [disabled]=\"dir.disabled() || dir.readonly() || (def.isDisabled?.(dir) ?? false)\"\n [attr.aria-label]=\"def.label\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"def.run?.(dir)\"\n mutedUntilPressed\n et-icon-button\n size=\"sm\"\n type=\"button\"\n >\n <i [allowHardcodedColor]=\"def.allowHardcodedColor ?? false\" [etIcon]=\"def.icon ?? ''\"></i>\n </button>\n }\n }\n }\n }\n }\n</div>\n\n<div\n #editable\n [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n [attr.data-placeholder]=\"dir.placeholder() || null\"\n [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"dir.describedBy() || null\"\n [attr.aria-labelledby]=\"dir.labelId() || null\"\n [attr.aria-disabled]=\"dir.disabled() || null\"\n [attr.aria-readonly]=\"dir.readonly() || null\"\n (input)=\"syncValueFromDom()\"\n (beforeinput)=\"interceptFormattingCommand($event)\"\n (keydown)=\"interceptEditorKeydown($event)\"\n (paste)=\"interceptPaste($event)\"\n (pointerdown)=\"dir.clearPendingMarks()\"\n (focus)=\"dir.focused.set(true)\"\n (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n class=\"et-rte-content\"\n role=\"textbox\"\n aria-multiline=\"true\"\n></div>\n", styles: ["@layer components{@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent);--et-icon-button-border-radius: var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar .et-icon-button{--_et-focus-ring-offset: -1px}et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar{position:fixed;inset-inline:0;inset-block-end:var(--_et-rte-keyboard-inset, 0px);z-index:60;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-inline:8px;padding-block:6px;background:var(--et-surface-background-solid, var(--et-surface-2, rgb(24 24 24)));border-block-end:none;border-block-start:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent);box-shadow:0 -6px 20px #0000003d;scrollbar-width:none;opacity:0;transform:translateY(100%);pointer-events:none;transition:opacity .16s var(--ease-out-5, ease),transform .26s var(--ease-out-5, ease)}et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar::-webkit-scrollbar{display:none}et-rich-text-editor.et-rich-text-editor--touch.et-rich-text-editor--docked-toolbar .et-rte-toolbar{opacity:1;transform:translateY(0);pointer-events:auto}et-rich-text-editor.et-rich-text-editor--touch .et-rte-content{font-size:max(1em,16px)}@media(prefers-reduced-motion:reduce){et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar{transition-duration:0ms}}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{--et-theme-color-primary-rgb: var(--et-color-primary);--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1,et-rich-text-editor .et-rte-content h2,et-rich-text-editor .et-rte-content h3,et-rich-text-editor .et-rte-content h4,et-rich-text-editor .et-rte-content h5,et-rich-text-editor .et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}et-rich-text-editor .et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,et-rich-text-editor .et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1{font-size:2.4rem}et-rich-text-editor .et-rte-content h2{font-size:2rem}et-rich-text-editor .et-rte-content h3{font-size:1.6rem}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ul ul,et-rich-text-editor .et-rte-content ul ul ul ul ul{list-style-type:circle}et-rich-text-editor .et-rte-content ul ul ul,et-rich-text-editor .et-rte-content ul ul ul ul ul ul{list-style-type:square}et-rich-text-editor .et-rte-content ul ul ul ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content ol ol,et-rich-text-editor .et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}et-rich-text-editor .et-rte-content ol ol ol,et-rich-text-editor .et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}et-rich-text-editor .et-rte-content ol ol ol ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}et-rich-text-editor .et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}et-rich-text-editor .et-rte-content table{border-collapse:collapse;inline-size:100%;margin-block:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content :is(th,td){padding:6px 8px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .15));text-align:start;vertical-align:top}et-rich-text-editor .et-rte-content th{font-weight:700;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-rich-text-editor .et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}et-rich-text-editor .et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}}\n"], dependencies: [{ kind: "component", type: IconButtonComponent, selector: "[et-icon-button]", inputs: ["variant", "size"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }, { kind: "directive", type: MenuDirective, selector: "[etMenu]", inputs: ["placement", "fallbackPlacements", "offset", "viewportPadding", "arrow", "arrowPadding", "autoFocus", "hoverOpen", "hoverOpenDelay", "hoverCloseDelay", "disabled", "open"], outputs: ["openChange"], exportAs: ["etMenu"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[etMenuTrigger]", exportAs: ["etMenuTrigger"] }, { kind: "directive", type: MenuSurfaceDirective, selector: "ng-template[etMenuSurface]", exportAs: ["etMenuSurface"] }, { kind: "component", type: MenuComponent, selector: "et-menu" }, { kind: "component", type: MenuRadioGroupComponent, selector: "et-menu-radio-group" }, { kind: "component", type: MenuRadioItemComponent, selector: "et-menu-radio-item", inputs: ["icon"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
19379
19388
|
}
|
|
19380
19389
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: RichTextEditorComponent, decorators: [{
|
|
19381
19390
|
type: Component,
|
|
@@ -19409,7 +19418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
19409
19418
|
'[class.et-rich-text-editor--touch]': 'hasTouchInput()',
|
|
19410
19419
|
'[class.et-rich-text-editor--docked-toolbar]': 'dockedToolbar()',
|
|
19411
19420
|
'(click)': 'dir.activate()',
|
|
19412
|
-
}, template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- ARIA toolbar pattern: the container only relays keys/focus for its roving tab stop; the buttons inside are the focusable controls -->\n<div\n #toolbar\n (keydown)=\"handleToolbarKeydown($event)\"\n (focusin)=\"handleToolbarFocusIn($event)\"\n class=\"et-rte-toolbar\"\n role=\"toolbar\"\n aria-label=\"Text formatting\"\n>\n @for (tool of dir.resolvedTools(); track $index) {\n @switch (tool) {\n @case (TOOLS.DIVIDER) {\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n }\n @case (TOOLS.HEADING) {\n <div #headingMenu=\"etMenu\" [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"dir.disabled() || dir.readonly() || dir.headingToolDisabled()\"\n [pressed]=\"headingMenu.open()\"\n [emitAriaPressed]=\"false\"\n [attr.aria-label]=\"'Text style: ' + currentHeadingLabel()\"\n (mousedown)=\"$event.preventDefault()\"\n etMenuTrigger\n et-icon-button\n size=\"sm\"\n type=\"button\"\n mutedUntilPressed\n >\n <i [etIcon]=\"currentHeadingIcon()\"></i>\n </button>\n\n <ng-template etMenuSurface>\n <et-menu>\n <et-menu-radio-group\n [value]=\"dir.headingLevel()\"\n (valueChange)=\"selectHeading($event)\"\n (mousedown)=\"$event.preventDefault()\"\n >\n @for (option of HEADING_OPTIONS; track option.label) {\n <et-menu-radio-item [value]=\"option.level\" [closeOnActivate]=\"true\" [icon]=\"option.icon\">\n {{ option.label }}\n </et-menu-radio-item>\n }\n </et-menu-radio-group>\n </et-menu>\n </ng-template>\n </div>\n }\n @default {\n @if (toolDefs().get(tool); as def) {\n @if (def.control; as control) {\n <ng-container [ngComponentOutlet]=\"control\" [ngComponentOutletInputs]=\"{ editor: dir }\" />\n } @else {\n <button\n [pressed]=\"def.isActive?.(dir) ?? false\"\n [disabled]=\"dir.disabled() || dir.readonly() || (def.isDisabled?.(dir) ?? false)\"\n [attr.aria-label]=\"def.label\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"def.run?.(dir)\"\n mutedUntilPressed\n et-icon-button\n size=\"sm\"\n type=\"button\"\n >\n <i [allowHardcodedColor]=\"def.allowHardcodedColor ?? false\" [etIcon]=\"def.icon ?? ''\"></i>\n </button>\n }\n }\n }\n }\n }\n</div>\n\n<div\n #editable\n [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n [attr.data-placeholder]=\"dir.placeholder() || null\"\n [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"dir.describedBy() || null\"\n [attr.aria-labelledby]=\"dir.labelId() || null\"\n [attr.aria-disabled]=\"dir.disabled() || null\"\n [attr.aria-readonly]=\"dir.readonly() || null\"\n (input)=\"syncValueFromDom()\"\n (beforeinput)=\"interceptFormattingCommand($event)\"\n (keydown)=\"interceptEditorKeydown($event)\"\n (paste)=\"interceptPaste($event)\"\n (pointerdown)=\"dir.clearPendingMarks()\"\n (focus)=\"dir.focused.set(true)\"\n (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n class=\"et-rte-content\"\n role=\"textbox\"\n aria-multiline=\"true\"\n></div>\n", styles: ["@layer components{@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent);--et-icon-button-border-radius: var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar .et-icon-button{--_et-focus-ring-offset: -1px}et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar{position:fixed;inset-inline:0;inset-block-end:var(--_et-rte-keyboard-inset, 0px);z-index:60;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-inline:8px;padding-block:6px;background:var(--et-surface-background-solid, var(--et-surface-2, rgb(24 24 24)));border-block-end:none;border-block-start:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent);box-shadow:0 -6px 20px #0000003d;scrollbar-width:none;opacity:0;transform:translateY(100%);pointer-events:none;transition:opacity .16s var(--ease-out-5, ease),transform .26s var(--ease-out-5, ease)}et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar::-webkit-scrollbar{display:none}et-rich-text-editor.et-rich-text-editor--touch.et-rich-text-editor--docked-toolbar .et-rte-toolbar{opacity:1;transform:translateY(0);pointer-events:auto}et-rich-text-editor.et-rich-text-editor--touch .et-rte-content{font-size:max(1em,16px)}@media(prefers-reduced-motion:reduce){et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar{transition-duration:0ms}}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{--et-theme-color-primary-rgb: var(--et-color-primary);--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1,et-rich-text-editor .et-rte-content h2,et-rich-text-editor .et-rte-content h3,et-rich-text-editor .et-rte-content h4,et-rich-text-editor .et-rte-content h5,et-rich-text-editor .et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}et-rich-text-editor .et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,et-rich-text-editor .et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1{font-size:2.4rem}et-rich-text-editor .et-rte-content h2{font-size:2rem}et-rich-text-editor .et-rte-content h3{font-size:1.6rem}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ul ul,et-rich-text-editor .et-rte-content ul ul ul ul ul{list-style-type:circle}et-rich-text-editor .et-rte-content ul ul ul,et-rich-text-editor .et-rte-content ul ul ul ul ul ul{list-style-type:square}et-rich-text-editor .et-rte-content ul ul ul ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content ol ol,et-rich-text-editor .et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}et-rich-text-editor .et-rte-content ol ol ol,et-rich-text-editor .et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}et-rich-text-editor .et-rte-content ol ol ol ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}et-rich-text-editor .et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}et-rich-text-editor .et-rte-content table{border-collapse:collapse;inline-size:100%;margin-block:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content :is(th,td){padding:6px 8px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .15));text-align:start;vertical-align:top}et-rich-text-editor .et-rte-content th{font-weight:700;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-rich-text-editor .et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}et-rich-text-editor .et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}}\n"] }]
|
|
19421
|
+
}, template: "<!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -- ARIA toolbar pattern: the container only relays keys/focus for its roving tab stop; the buttons inside are the focusable controls -->\n<div\n #toolbar\n (keydown)=\"handleToolbarKeydown($event)\"\n (focusin)=\"handleToolbarFocusIn($event)\"\n class=\"et-rte-toolbar\"\n role=\"toolbar\"\n aria-label=\"Text formatting\"\n>\n @for (tool of dir.resolvedTools(); track $index) {\n @switch (tool) {\n @case (TOOLS.DIVIDER) {\n <span class=\"et-rte-toolbar-divider\" aria-hidden=\"true\"></span>\n }\n @case (TOOLS.HEADING) {\n <div #headingMenu=\"etMenu\" [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"dir.disabled() || dir.readonly() || dir.headingToolDisabled()\"\n [pressed]=\"headingMenu.open()\"\n [attr.aria-label]=\"'Text style: ' + currentHeadingLabel()\"\n (mousedown)=\"$event.preventDefault()\"\n emitAriaPressed=\"false\"\n etMenuTrigger\n et-icon-button\n size=\"sm\"\n type=\"button\"\n mutedUntilPressed\n >\n <i [etIcon]=\"currentHeadingIcon()\"></i>\n </button>\n\n <ng-template etMenuSurface>\n <et-menu>\n <et-menu-radio-group\n [value]=\"dir.headingLevel()\"\n (valueChange)=\"selectHeading($event)\"\n (mousedown)=\"$event.preventDefault()\"\n >\n @for (option of HEADING_OPTIONS; track option.label) {\n <!-- eslint-disable-next-line ethlete/prefer-static-boolean-properties -- closeOnActivate is tri-state (boolean | undefined); a transform would collapse its unset state -->\n <et-menu-radio-item [value]=\"option.level\" [closeOnActivate]=\"true\" [icon]=\"option.icon\">\n {{ option.label }}\n </et-menu-radio-item>\n }\n </et-menu-radio-group>\n </et-menu>\n </ng-template>\n </div>\n }\n @default {\n @if (toolDefs().get(tool); as def) {\n @if (def.control; as control) {\n <ng-container [ngComponentOutlet]=\"control\" [ngComponentOutletInputs]=\"{ editor: dir }\" />\n } @else {\n <button\n [pressed]=\"def.isActive?.(dir) ?? false\"\n [disabled]=\"dir.disabled() || dir.readonly() || (def.isDisabled?.(dir) ?? false)\"\n [attr.aria-label]=\"def.label\"\n (mousedown)=\"$event.preventDefault()\"\n (click)=\"def.run?.(dir)\"\n mutedUntilPressed\n et-icon-button\n size=\"sm\"\n type=\"button\"\n >\n <i [allowHardcodedColor]=\"def.allowHardcodedColor ?? false\" [etIcon]=\"def.icon ?? ''\"></i>\n </button>\n }\n }\n }\n }\n }\n</div>\n\n<div\n #editable\n [attr.contenteditable]=\"dir.disabled() || dir.readonly() ? 'false' : 'true'\"\n [attr.tabindex]=\"dir.disabled() ? -1 : 0\"\n [attr.data-placeholder]=\"dir.placeholder() || null\"\n [attr.aria-invalid]=\"dir.shouldDisplayError() || null\"\n [attr.aria-describedby]=\"dir.describedBy() || null\"\n [attr.aria-labelledby]=\"dir.labelId() || null\"\n [attr.aria-disabled]=\"dir.disabled() || null\"\n [attr.aria-readonly]=\"dir.readonly() || null\"\n (input)=\"syncValueFromDom()\"\n (beforeinput)=\"interceptFormattingCommand($event)\"\n (keydown)=\"interceptEditorKeydown($event)\"\n (paste)=\"interceptPaste($event)\"\n (pointerdown)=\"dir.clearPendingMarks()\"\n (focus)=\"dir.focused.set(true)\"\n (blur)=\"dir.focused.set(false); dir.touched.set(true)\"\n class=\"et-rte-content\"\n role=\"textbox\"\n aria-multiline=\"true\"\n></div>\n", styles: ["@layer components{@property --et-rich-text-editor-toolbar-gap{syntax: \"<length>\"; inherits: true; initial-value: 2px;}@property --et-rich-text-editor-toolbar-padding{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-button-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-min-height{syntax: \"<length>\"; inherits: true; initial-value: 96px;}@property --et-rich-text-editor-content-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-rich-text-editor-token-radius{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-rich-text-editor-token-padding-inline{syntax: \"<length>\"; inherits: true; initial-value: 4px;}et-rich-text-editor{display:flex;flex:1;flex-direction:column;min-inline-size:0;color:inherit}et-rich-text-editor .et-rte-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--et-rich-text-editor-toolbar-gap);padding:var(--et-rich-text-editor-toolbar-padding);padding-inline:calc(var(--et-form-field-control-padding-inline) - var(--et-rich-text-editor-toolbar-padding));border-block-end:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent);--et-icon-button-border-radius: var(--et-rich-text-editor-button-radius)}et-rich-text-editor .et-rte-toolbar .et-icon-button{--_et-focus-ring-offset: -1px}et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar{position:fixed;inset-inline:0;inset-block-end:var(--_et-rte-keyboard-inset, 0px);z-index:60;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;padding-inline:8px;padding-block:6px;background:var(--et-surface-background-solid, var(--et-surface-2, rgb(24 24 24)));border-block-end:none;border-block-start:var(--et-form-field-control-border-width, 1px) solid color-mix(in srgb,currentColor 12%,transparent);box-shadow:0 -6px 20px #0000003d;scrollbar-width:none;opacity:0;transform:translateY(100%);pointer-events:none;transition:opacity .16s var(--ease-out-5, ease),transform .26s var(--ease-out-5, ease)}et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar::-webkit-scrollbar{display:none}et-rich-text-editor.et-rich-text-editor--touch.et-rich-text-editor--docked-toolbar .et-rte-toolbar{opacity:1;transform:translateY(0);pointer-events:auto}et-rich-text-editor.et-rich-text-editor--touch .et-rte-content{font-size:max(1em,16px)}@media(prefers-reduced-motion:reduce){et-rich-text-editor.et-rich-text-editor--touch .et-rte-toolbar{transition-duration:0ms}}et-rich-text-editor .et-rte-toolbar-divider{inline-size:1px;align-self:stretch;margin-block:4px;margin-inline:2px;background:color-mix(in srgb,currentColor 12%,transparent)}et-rich-text-editor .et-rte-content{--et-theme-color-primary-rgb: var(--et-color-primary);--et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));--et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));--et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb));display:block;flex:1;min-inline-size:0;padding-block:var(--et-form-field-control-padding-block);padding-inline:var(--et-form-field-control-padding-inline);min-block-size:var(--et-rich-text-editor-min-height);outline:none;color:inherit;caret-color:var(--et-theme-color-primary-solid, currentColor);overflow-wrap:anywhere}et-rich-text-editor .et-rte-content:empty:before{content:attr(data-placeholder);color:color-mix(in srgb,currentColor 46%,transparent);pointer-events:none}et-rich-text-editor .et-rte-content>:first-child{margin-block-start:0}et-rich-text-editor .et-rte-content>:last-child{margin-block-end:0}et-rich-text-editor .et-rte-content p{margin-block:0}et-rich-text-editor .et-rte-content p+p,et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1,et-rich-text-editor .et-rte-content h2,et-rich-text-editor .et-rte-content h3,et-rich-text-editor .et-rte-content h4,et-rich-text-editor .et-rte-content h5,et-rich-text-editor .et-rte-content h6{margin-block:0;font-weight:700;line-height:1.25}et-rich-text-editor .et-rte-content :is(h1,h2,h3,h4,h5,h6)+*,et-rich-text-editor .et-rte-content *+:is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content h1{font-size:2.4rem}et-rich-text-editor .et-rte-content h2{font-size:2rem}et-rich-text-editor .et-rte-content h3{font-size:1.6rem}et-rich-text-editor .et-rte-content ul,et-rich-text-editor .et-rte-content ol{margin-block-end:0;padding-inline-start:1.5em;list-style-position:outside}et-rich-text-editor .et-rte-content ul{list-style-type:disc}et-rich-text-editor .et-rte-content ul ul,et-rich-text-editor .et-rte-content ul ul ul ul ul{list-style-type:circle}et-rich-text-editor .et-rte-content ul ul ul,et-rich-text-editor .et-rte-content ul ul ul ul ul ul{list-style-type:square}et-rich-text-editor .et-rte-content ul ul ul ul{list-style-type:disc}et-rich-text-editor .et-rte-content ol{list-style-type:decimal}et-rich-text-editor .et-rte-content ol ol,et-rich-text-editor .et-rte-content ol ol ol ol ol{list-style-type:lower-alpha}et-rich-text-editor .et-rte-content ol ol ol,et-rich-text-editor .et-rte-content ol ol ol ol ol ol{list-style-type:lower-roman}et-rich-text-editor .et-rte-content ol ol ol ol{list-style-type:decimal}et-rich-text-editor .et-rte-content li{margin-block:0}et-rich-text-editor .et-rte-content li::marker{color:color-mix(in srgb,currentColor 60%,transparent)}et-rich-text-editor .et-rte-content a{color:var(--et-theme-color-primary-solid, currentColor);text-decoration:underline}et-rich-text-editor .et-rte-content code{padding:.1em .3em;border-radius:4px;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 14%,transparent);font-family:var(--et-font-family-mono, ui-monospace, monospace);font-size:.9em}et-rich-text-editor .et-rte-content table{border-collapse:collapse;inline-size:100%;margin-block:var(--et-rich-text-editor-content-gap)}et-rich-text-editor .et-rte-content :is(th,td){padding:6px 8px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .15));text-align:start;vertical-align:top}et-rich-text-editor .et-rte-content th{font-weight:700;background:color-mix(in srgb,var(--et-surface-interaction-solid, currentColor) 8%,transparent)}et-rich-text-editor .et-rte-content .et-rte-token{--_et-rte-token-accent: var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor));display:inline;padding-inline:var(--et-rich-text-editor-token-padding-inline);border-radius:var(--et-rich-text-editor-token-radius);background:color-mix(in srgb,var(--_et-rte-token-accent) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_et-rte-token-accent) 45%,transparent);color:var(--et-theme-color-ink-solid, inherit);font-weight:500;white-space:nowrap;-webkit-user-select:all;user-select:all;cursor:default}et-rich-text-editor .et-rte-content .et-rte-token-prefix{margin-inline-end:1px;opacity:.65}}\n"] }]
|
|
19413
19422
|
}], ctorParameters: () => [], propDecorators: { editable: [{ type: i0.ViewChild, args: ['editable', { isSignal: true }] }], toolbar: [{ type: i0.ViewChild, args: ['toolbar', { isSignal: true }] }] } });
|
|
19414
19423
|
|
|
19415
19424
|
const RICH_TEXT_EDITOR_IMPORTS = [RichTextEditorComponent, RichTextEditorDirective];
|
|
@@ -19446,11 +19455,11 @@ class MultiLanguageRichTextEditorLanguageToolComponent {
|
|
|
19446
19455
|
queueMicrotask(() => this.editor().activate());
|
|
19447
19456
|
}
|
|
19448
19457
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MultiLanguageRichTextEditorLanguageToolComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19449
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MultiLanguageRichTextEditorLanguageToolComponent, isStandalone: true, selector: "et-multi-language-rich-text-editor-language-tool", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-ml-rte-lang-tool" }, providers: [provideIcons(CHECK_ICON)], ngImport: i0, template: "<div [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Language: ' + activeLabel()\"\n [class.et-ml-rte-lang-trigger--flagged]=\"missingCount() > 0\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-ml-rte-lang-trigger\"\n etMenuTrigger\n type=\"button\"\n >\n <span class=\"et-ml-rte-lang-trigger-code\">{{ activeCode() }}</span>\n </button>\n\n <ng-template etMenuSurface>\n <et-menu>\n <et-menu-radio-group [value]=\"activeCode()\" (valueChange)=\"select($event)\" (mousedown)=\"$event.preventDefault()\">\n @for (language of languages(); track language.code) {\n <et-menu-radio-item [value]=\"language.code\" [icon]=\"activeIcon(language.code)\" [closeOnActivate]=\"true\">\n <span class=\"et-ml-rte-lang-item\">\n <span class=\"et-ml-rte-lang-item-label\">{{ language.label }}</span>\n <span\n [class.et-ml-rte-lang-dot--filled]=\"isFilled(language.code)\"\n [attr.aria-label]=\"isFilled(language.code) ? 'has content' : 'empty'\"\n class=\"et-ml-rte-lang-dot\"\n ></span>\n </span>\n </et-menu-radio-item>\n }\n </et-menu-radio-group>\n </et-menu>\n </ng-template>\n</div>\n", styles: ["@layer components{@property --et-multi-language-rich-text-editor-badge-size{syntax: \"<length>\"; inherits: true; initial-value: 7px;}@property --et-multi-language-rich-text-editor-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 8px;}.et-ml-rte-lang-tool{display:contents}.et-ml-rte-lang-item{display:flex;flex:1;align-items:center;justify-content:space-between;gap:12px;min-inline-size:0}.et-ml-rte-lang-dot{flex:none;box-sizing:border-box;inline-size:var(--et-multi-language-rich-text-editor-dot-size);block-size:var(--et-multi-language-rich-text-editor-dot-size);border-radius:50%;border:1.5px solid var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 40%, transparent));background:transparent}.et-ml-rte-lang-dot--filled{border-color:var(--et-theme-color-primary-solid, var(--et-surface-color-solid, currentColor));background:var(--et-theme-color-primary-solid, var(--et-surface-color-solid, currentColor))}.et-ml-rte-lang-trigger{display:inline-flex;position:relative;align-items:center;justify-content:center;inline-size:3.1rem;block-size:3.1rem;border:none;border-radius:var(--et-rich-text-editor-button-radius, 4px);background:transparent;color:inherit;font:inherit;line-height:1;cursor:pointer;appearance:none;transition:background .12s ease}@media(hover:hover){.et-ml-rte-lang-trigger:hover:not(:disabled){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}}.et-ml-rte-lang-trigger:focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-ml-rte-lang-trigger:active:not(:disabled){background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-ml-rte-lang-trigger:disabled{opacity:.5;cursor:not-allowed}.et-ml-rte-lang-trigger-code{font-size:1.3rem;font-weight:600;text-transform:uppercase}.et-ml-rte-lang-trigger--flagged:after{content:\"\";position:absolute;inset-block-start:4px;inset-inline-end:4px;inline-size:var(--et-multi-language-rich-text-editor-badge-size);block-size:var(--et-multi-language-rich-text-editor-badge-size);border-radius:50%;background:var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor))}}\n"], dependencies: [{ kind: "directive", type: MenuDirective, selector: "[etMenu]", inputs: ["placement", "fallbackPlacements", "offset", "viewportPadding", "arrow", "arrowPadding", "autoFocus", "hoverOpen", "hoverOpenDelay", "hoverCloseDelay", "disabled", "open"], outputs: ["openChange"], exportAs: ["etMenu"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[etMenuTrigger]", exportAs: ["etMenuTrigger"] }, { kind: "directive", type: MenuSurfaceDirective, selector: "ng-template[etMenuSurface]", exportAs: ["etMenuSurface"] }, { kind: "component", type: MenuComponent, selector: "et-menu" }, { kind: "component", type: MenuRadioGroupComponent, selector: "et-menu-radio-group" }, { kind: "component", type: MenuRadioItemComponent, selector: "et-menu-radio-item", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
19458
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MultiLanguageRichTextEditorLanguageToolComponent, isStandalone: true, selector: "et-multi-language-rich-text-editor-language-tool", inputs: { editor: { classPropertyName: "editor", publicName: "editor", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "et-ml-rte-lang-tool" }, providers: [provideIcons(CHECK_ICON)], ngImport: i0, template: "<div [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Language: ' + activeLabel()\"\n [class.et-ml-rte-lang-trigger--flagged]=\"missingCount() > 0\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-ml-rte-lang-trigger\"\n etMenuTrigger\n type=\"button\"\n >\n <span class=\"et-ml-rte-lang-trigger-code\">{{ activeCode() }}</span>\n </button>\n\n <ng-template etMenuSurface>\n <et-menu>\n <et-menu-radio-group [value]=\"activeCode()\" (valueChange)=\"select($event)\" (mousedown)=\"$event.preventDefault()\">\n @for (language of languages(); track language.code) {\n <!-- eslint-disable-next-line ethlete/prefer-static-boolean-properties -- closeOnActivate is tri-state (boolean | undefined); a transform would collapse its unset state -->\n <et-menu-radio-item [value]=\"language.code\" [icon]=\"activeIcon(language.code)\" [closeOnActivate]=\"true\">\n <span class=\"et-ml-rte-lang-item\">\n <span class=\"et-ml-rte-lang-item-label\">{{ language.label }}</span>\n <span\n [class.et-ml-rte-lang-dot--filled]=\"isFilled(language.code)\"\n [attr.aria-label]=\"isFilled(language.code) ? 'has content' : 'empty'\"\n class=\"et-ml-rte-lang-dot\"\n ></span>\n </span>\n </et-menu-radio-item>\n }\n </et-menu-radio-group>\n </et-menu>\n </ng-template>\n</div>\n", styles: ["@layer components{@property --et-multi-language-rich-text-editor-badge-size{syntax: \"<length>\"; inherits: true; initial-value: 7px;}@property --et-multi-language-rich-text-editor-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 8px;}.et-ml-rte-lang-tool{display:contents}.et-ml-rte-lang-item{display:flex;flex:1;align-items:center;justify-content:space-between;gap:12px;min-inline-size:0}.et-ml-rte-lang-dot{flex:none;box-sizing:border-box;inline-size:var(--et-multi-language-rich-text-editor-dot-size);block-size:var(--et-multi-language-rich-text-editor-dot-size);border-radius:50%;border:1.5px solid var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 40%, transparent));background:transparent}.et-ml-rte-lang-dot--filled{border-color:var(--et-theme-color-primary-solid, var(--et-surface-color-solid, currentColor));background:var(--et-theme-color-primary-solid, var(--et-surface-color-solid, currentColor))}.et-ml-rte-lang-trigger{display:inline-flex;position:relative;align-items:center;justify-content:center;inline-size:3.1rem;block-size:3.1rem;border:none;border-radius:var(--et-rich-text-editor-button-radius, 4px);background:transparent;color:inherit;font:inherit;line-height:1;cursor:pointer;appearance:none;transition:background .12s ease}@media(hover:hover){.et-ml-rte-lang-trigger:hover:not(:disabled){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}}.et-ml-rte-lang-trigger:focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-ml-rte-lang-trigger:active:not(:disabled){background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-ml-rte-lang-trigger:disabled{opacity:.5;cursor:not-allowed}.et-ml-rte-lang-trigger-code{font-size:1.3rem;font-weight:600;text-transform:uppercase}.et-ml-rte-lang-trigger--flagged:after{content:\"\";position:absolute;inset-block-start:4px;inset-inline-end:4px;inline-size:var(--et-multi-language-rich-text-editor-badge-size);block-size:var(--et-multi-language-rich-text-editor-badge-size);border-radius:50%;background:var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor))}}\n"], dependencies: [{ kind: "directive", type: MenuDirective, selector: "[etMenu]", inputs: ["placement", "fallbackPlacements", "offset", "viewportPadding", "arrow", "arrowPadding", "autoFocus", "hoverOpen", "hoverOpenDelay", "hoverCloseDelay", "disabled", "open"], outputs: ["openChange"], exportAs: ["etMenu"] }, { kind: "directive", type: MenuTriggerDirective, selector: "[etMenuTrigger]", exportAs: ["etMenuTrigger"] }, { kind: "directive", type: MenuSurfaceDirective, selector: "ng-template[etMenuSurface]", exportAs: ["etMenuSurface"] }, { kind: "component", type: MenuComponent, selector: "et-menu" }, { kind: "component", type: MenuRadioGroupComponent, selector: "et-menu-radio-group" }, { kind: "component", type: MenuRadioItemComponent, selector: "et-menu-radio-item", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
19450
19459
|
}
|
|
19451
19460
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MultiLanguageRichTextEditorLanguageToolComponent, decorators: [{
|
|
19452
19461
|
type: Component,
|
|
19453
|
-
args: [{ selector: 'et-multi-language-rich-text-editor-language-tool', encapsulation: ViewEncapsulation.None, imports: [...MENU_IMPORTS], providers: [provideIcons(CHECK_ICON)], host: { class: 'et-ml-rte-lang-tool' }, template: "<div [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Language: ' + activeLabel()\"\n [class.et-ml-rte-lang-trigger--flagged]=\"missingCount() > 0\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-ml-rte-lang-trigger\"\n etMenuTrigger\n type=\"button\"\n >\n <span class=\"et-ml-rte-lang-trigger-code\">{{ activeCode() }}</span>\n </button>\n\n <ng-template etMenuSurface>\n <et-menu>\n <et-menu-radio-group [value]=\"activeCode()\" (valueChange)=\"select($event)\" (mousedown)=\"$event.preventDefault()\">\n @for (language of languages(); track language.code) {\n <et-menu-radio-item [value]=\"language.code\" [icon]=\"activeIcon(language.code)\" [closeOnActivate]=\"true\">\n <span class=\"et-ml-rte-lang-item\">\n <span class=\"et-ml-rte-lang-item-label\">{{ language.label }}</span>\n <span\n [class.et-ml-rte-lang-dot--filled]=\"isFilled(language.code)\"\n [attr.aria-label]=\"isFilled(language.code) ? 'has content' : 'empty'\"\n class=\"et-ml-rte-lang-dot\"\n ></span>\n </span>\n </et-menu-radio-item>\n }\n </et-menu-radio-group>\n </et-menu>\n </ng-template>\n</div>\n", styles: ["@layer components{@property --et-multi-language-rich-text-editor-badge-size{syntax: \"<length>\"; inherits: true; initial-value: 7px;}@property --et-multi-language-rich-text-editor-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 8px;}.et-ml-rte-lang-tool{display:contents}.et-ml-rte-lang-item{display:flex;flex:1;align-items:center;justify-content:space-between;gap:12px;min-inline-size:0}.et-ml-rte-lang-dot{flex:none;box-sizing:border-box;inline-size:var(--et-multi-language-rich-text-editor-dot-size);block-size:var(--et-multi-language-rich-text-editor-dot-size);border-radius:50%;border:1.5px solid var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 40%, transparent));background:transparent}.et-ml-rte-lang-dot--filled{border-color:var(--et-theme-color-primary-solid, var(--et-surface-color-solid, currentColor));background:var(--et-theme-color-primary-solid, var(--et-surface-color-solid, currentColor))}.et-ml-rte-lang-trigger{display:inline-flex;position:relative;align-items:center;justify-content:center;inline-size:3.1rem;block-size:3.1rem;border:none;border-radius:var(--et-rich-text-editor-button-radius, 4px);background:transparent;color:inherit;font:inherit;line-height:1;cursor:pointer;appearance:none;transition:background .12s ease}@media(hover:hover){.et-ml-rte-lang-trigger:hover:not(:disabled){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}}.et-ml-rte-lang-trigger:focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-ml-rte-lang-trigger:active:not(:disabled){background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-ml-rte-lang-trigger:disabled{opacity:.5;cursor:not-allowed}.et-ml-rte-lang-trigger-code{font-size:1.3rem;font-weight:600;text-transform:uppercase}.et-ml-rte-lang-trigger--flagged:after{content:\"\";position:absolute;inset-block-start:4px;inset-inline-end:4px;inline-size:var(--et-multi-language-rich-text-editor-badge-size);block-size:var(--et-multi-language-rich-text-editor-badge-size);border-radius:50%;background:var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor))}}\n"] }]
|
|
19462
|
+
args: [{ selector: 'et-multi-language-rich-text-editor-language-tool', encapsulation: ViewEncapsulation.None, imports: [...MENU_IMPORTS], providers: [provideIcons(CHECK_ICON)], host: { class: 'et-ml-rte-lang-tool' }, template: "<div [autoFocus]=\"!hasTouchInput()\" etMenu>\n <button\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Language: ' + activeLabel()\"\n [class.et-ml-rte-lang-trigger--flagged]=\"missingCount() > 0\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-ml-rte-lang-trigger\"\n etMenuTrigger\n type=\"button\"\n >\n <span class=\"et-ml-rte-lang-trigger-code\">{{ activeCode() }}</span>\n </button>\n\n <ng-template etMenuSurface>\n <et-menu>\n <et-menu-radio-group [value]=\"activeCode()\" (valueChange)=\"select($event)\" (mousedown)=\"$event.preventDefault()\">\n @for (language of languages(); track language.code) {\n <!-- eslint-disable-next-line ethlete/prefer-static-boolean-properties -- closeOnActivate is tri-state (boolean | undefined); a transform would collapse its unset state -->\n <et-menu-radio-item [value]=\"language.code\" [icon]=\"activeIcon(language.code)\" [closeOnActivate]=\"true\">\n <span class=\"et-ml-rte-lang-item\">\n <span class=\"et-ml-rte-lang-item-label\">{{ language.label }}</span>\n <span\n [class.et-ml-rte-lang-dot--filled]=\"isFilled(language.code)\"\n [attr.aria-label]=\"isFilled(language.code) ? 'has content' : 'empty'\"\n class=\"et-ml-rte-lang-dot\"\n ></span>\n </span>\n </et-menu-radio-item>\n }\n </et-menu-radio-group>\n </et-menu>\n </ng-template>\n</div>\n", styles: ["@layer components{@property --et-multi-language-rich-text-editor-badge-size{syntax: \"<length>\"; inherits: true; initial-value: 7px;}@property --et-multi-language-rich-text-editor-dot-size{syntax: \"<length>\"; inherits: true; initial-value: 8px;}.et-ml-rte-lang-tool{display:contents}.et-ml-rte-lang-item{display:flex;flex:1;align-items:center;justify-content:space-between;gap:12px;min-inline-size:0}.et-ml-rte-lang-dot{flex:none;box-sizing:border-box;inline-size:var(--et-multi-language-rich-text-editor-dot-size);block-size:var(--et-multi-language-rich-text-editor-dot-size);border-radius:50%;border:1.5px solid var(--et-surface-color-muted-solid, color-mix(in srgb, currentColor 40%, transparent));background:transparent}.et-ml-rte-lang-dot--filled{border-color:var(--et-theme-color-primary-solid, var(--et-surface-color-solid, currentColor));background:var(--et-theme-color-primary-solid, var(--et-surface-color-solid, currentColor))}.et-ml-rte-lang-trigger{display:inline-flex;position:relative;align-items:center;justify-content:center;inline-size:3.1rem;block-size:3.1rem;border:none;border-radius:var(--et-rich-text-editor-button-radius, 4px);background:transparent;color:inherit;font:inherit;line-height:1;cursor:pointer;appearance:none;transition:background .12s ease}@media(hover:hover){.et-ml-rte-lang-trigger:hover:not(:disabled){background:color-mix(in srgb,var(--et-surface-interaction-solid) 12%,transparent)}}.et-ml-rte-lang-trigger:focus-visible{background:color-mix(in srgb,var(--et-surface-interaction-solid) 16%,transparent)}.et-ml-rte-lang-trigger:active:not(:disabled){background:color-mix(in srgb,var(--et-surface-interaction-solid) 20%,transparent)}.et-ml-rte-lang-trigger:disabled{opacity:.5;cursor:not-allowed}.et-ml-rte-lang-trigger-code{font-size:1.3rem;font-weight:600;text-transform:uppercase}.et-ml-rte-lang-trigger--flagged:after{content:\"\";position:absolute;inset-block-start:4px;inset-inline-end:4px;inline-size:var(--et-multi-language-rich-text-editor-badge-size);block-size:var(--et-multi-language-rich-text-editor-badge-size);border-radius:50%;background:var(--et-theme-color-primary-solid, var(--et-surface-interaction-solid, currentColor))}}\n"] }]
|
|
19454
19463
|
}], propDecorators: { editor: [{ type: i0.Input, args: [{ isSignal: true, alias: "editor", required: true }] }] } });
|
|
19455
19464
|
|
|
19456
19465
|
/** The toolbar token the language switcher renders for. Include it in the editor's `tools` to place
|
|
@@ -19544,7 +19553,7 @@ class OtpInputDirective {
|
|
|
19544
19553
|
this.masked = input(false, /* @ts-ignore */
|
|
19545
19554
|
...(ngDevMode ? [{ debugName: "masked" }] : /* istanbul ignore next */ []));
|
|
19546
19555
|
/** Emits once each time the value reaches the full length. */
|
|
19547
|
-
this.
|
|
19556
|
+
this.complete = output();
|
|
19548
19557
|
this.shouldDisplayError = computed(() => this.touched() && this.invalid(), /* @ts-ignore */
|
|
19549
19558
|
...(ngDevMode ? [{ debugName: "shouldDisplayError" }] : /* istanbul ignore next */ []));
|
|
19550
19559
|
this.hasValue = computed(() => this.value().length > 0, /* @ts-ignore */
|
|
@@ -19625,7 +19634,7 @@ class OtpInputDirective {
|
|
|
19625
19634
|
// or replacing one complete code with another (select-all + paste, autofill over a filled
|
|
19626
19635
|
// field) would silently never re-complete
|
|
19627
19636
|
if (sanitized.length === this.length() && sanitized !== previous) {
|
|
19628
|
-
this.
|
|
19637
|
+
this.complete.emit(sanitized);
|
|
19629
19638
|
}
|
|
19630
19639
|
}
|
|
19631
19640
|
/** @internal */
|
|
@@ -19651,7 +19660,7 @@ class OtpInputDirective {
|
|
|
19651
19660
|
}
|
|
19652
19661
|
}
|
|
19653
19662
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OtpInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
19654
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: OtpInputDirective, isStandalone: true, selector: "[etOtpInput]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, charset: { classPropertyName: "charset", publicName: "charset", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange",
|
|
19663
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", type: OtpInputDirective, isStandalone: true, selector: "[etOtpInput]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, length: { classPropertyName: "length", publicName: "length", isSignal: true, isRequired: false, transformFunction: null }, charset: { classPropertyName: "charset", publicName: "charset", isSignal: true, isRequired: false, transformFunction: null }, masked: { classPropertyName: "masked", publicName: "masked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", touched: "touchedChange", complete: "complete" }, exportAs: ["etOtpInput"], ngImport: i0 }); }
|
|
19655
19664
|
}
|
|
19656
19665
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OtpInputDirective, decorators: [{
|
|
19657
19666
|
type: Directive,
|
|
@@ -19659,7 +19668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
19659
19668
|
selector: '[etOtpInput]',
|
|
19660
19669
|
exportAs: 'etOtpInput',
|
|
19661
19670
|
}]
|
|
19662
|
-
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], charset: [{ type: i0.Input, args: [{ isSignal: true, alias: "charset", required: false }] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }],
|
|
19671
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], length: [{ type: i0.Input, args: [{ isSignal: true, alias: "length", required: false }] }], charset: [{ type: i0.Input, args: [{ isSignal: true, alias: "charset", required: false }] }], masked: [{ type: i0.Input, args: [{ isSignal: true, alias: "masked", required: false }] }], complete: [{ type: i0.Output, args: ["complete"] }] } });
|
|
19663
19672
|
|
|
19664
19673
|
class OtpInputComponent {
|
|
19665
19674
|
constructor() {
|
|
@@ -19689,7 +19698,7 @@ class OtpInputComponent {
|
|
|
19689
19698
|
});
|
|
19690
19699
|
}
|
|
19691
19700
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OtpInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19692
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OtpInputComponent, isStandalone: true, selector: "et-otp-input", host: { listeners: { "click": "otp.activate()" }, properties: { "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null" }, classAttribute: "et-otp-input" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }, { propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: OtpInputDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "length", "length", "charset", "charset", "masked", "masked"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange", "
|
|
19701
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: OtpInputComponent, isStandalone: true, selector: "et-otp-input", host: { listeners: { "click": "otp.activate()" }, properties: { "attr.data-can-animate": "canAnimate.state() || null", "attr.data-error": "support.displaysError() || null" }, classAttribute: "et-otp-input" }, providers: [provideFormSupport()], viewQueries: [{ propertyName: "nativeInput", first: true, predicate: ["nativeInput"], descendants: true, isSignal: true }, { propertyName: "errorContentRef", first: true, predicate: ["errorContent"], descendants: true, isSignal: true }, { propertyName: "hintContentRef", first: true, predicate: ["hintContent"], descendants: true, isSignal: true }, { propertyName: "errorAnimatableRef", first: true, predicate: ["errorAnimatable"], descendants: true, isSignal: true }, { propertyName: "hintAnimatableRef", first: true, predicate: ["hintAnimatable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: FormFieldDirective }, { directive: OtpInputDirective, inputs: ["value", "value", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "length", "length", "charset", "charset", "masked", "masked"], outputs: ["valueChange", "valueChange", "touchedChange", "touchedChange", "complete", "complete"] }, { directive: i1.ProvideColorDirective, inputs: ["etProvideColor", "color"] }], ngImport: i0, template: "<ng-content />\n\n<div class=\"et-otp-input-field\">\n <div class=\"et-otp-input-segments\" aria-hidden=\"true\">\n @for (index of segmentIndexes(); track index) {\n <div\n [attr.data-caret]=\"(otp.focused() && otp.caretIndex() === index) || null\"\n [attr.data-filled]=\"otp.segmentChars()[index] !== null || null\"\n class=\"et-otp-input-segment\"\n >\n @if (otp.segmentChars()[index]; as char) {\n <span class=\"et-otp-input-segment-char\">{{ char }}</span>\n } @else if (otp.focused() && otp.caretIndex() === index) {\n <span class=\"et-otp-input-caret\"></span>\n }\n </div>\n }\n </div>\n\n <!-- one real input stretched invisibly over the segments: reliable SMS autofill\n (autocomplete=\"one-time-code\") and native paste for free -->\n <input\n #nativeInput\n [attr.aria-describedby]=\"otp.describedBy() || null\"\n [attr.aria-invalid]=\"otp.shouldDisplayError() || null\"\n [attr.aria-labelledby]=\"otp.labelId() || null\"\n [attr.inputmode]=\"otp.inputMode()\"\n [attr.maxlength]=\"otp.length()\"\n [attr.name]=\"otp.name() || null\"\n [disabled]=\"otp.disabled()\"\n [readOnly]=\"otp.readonly()\"\n [required]=\"otp.required()\"\n [value]=\"otp.value()\"\n (blur)=\"otp.handleNativeBlur()\"\n (focus)=\"otp.handleNativeFocus()\"\n (input)=\"otp.handleNativeInput()\"\n (keyup)=\"otp.handleNativeSelectionEvent()\"\n (mouseup)=\"otp.handleNativeSelectionEvent()\"\n class=\"et-otp-input-native\"\n autocapitalize=\"off\"\n autocomplete=\"one-time-code\"\n spellcheck=\"false\"\n type=\"text\"\n />\n</div>\n\n@if (support.shouldRenderSupport()) {\n <div [style.block-size.px]=\"support.supportHeight()\" class=\"et-otp-input-support\">\n <div class=\"et-otp-input-support-stack\">\n @if (support.shouldRenderError()) {\n <div\n #errorContent\n #errorAnimatable=\"etAnimatable\"\n [attr.aria-atomic]=\"support.errorActive() ? 'true' : null\"\n [attr.aria-hidden]=\"!support.errorActive() ? 'true' : null\"\n [attr.aria-live]=\"support.errorActive() ? 'polite' : null\"\n [attr.data-active]=\"support.errorActive() || null\"\n [etProvideColor]=\"support.errorColorTheme\"\n class=\"et-otp-input-support-content et-otp-input-errors\"\n etAnimatable\n >\n @for (error of support.visibleErrors(); track $index) {\n <et-form-error [error]=\"error\" />\n }\n </div>\n }\n\n @if (support.shouldRenderHint()) {\n <div\n #hintContent\n #hintAnimatable=\"etAnimatable\"\n [attr.aria-hidden]=\"!support.hintActive() ? 'true' : null\"\n [attr.data-active]=\"support.hintActive() || null\"\n class=\"et-otp-input-support-content et-otp-input-hint\"\n etAnimatable\n >\n <ng-content select=\"et-hint\" />\n </div>\n }\n </div>\n </div>\n}\n", styles: ["@layer components{@keyframes et-otp-input-caret-blink{0%{opacity:1}to{opacity:0}}@property --et-otp-input-segment-size{syntax: \"<length>\"; inherits: true; initial-value: 44px;}@property --et-otp-input-segment-gap{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-otp-input-segment-radius{syntax: \"<length>\"; inherits: true; initial-value: 8px;}@property --et-otp-input-label-font-size{syntax: \"<length>\"; inherits: true; initial-value: 13px;}@property --et-otp-input-support-duration{syntax: \"<time>\"; inherits: true; initial-value: .18s;}@property --et-otp-input-support-offset{syntax: \"<length>\"; inherits: true; initial-value: 4px;}@property --et-otp-input-error-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}@property --et-otp-input-hint-font-size{syntax: \"<length>\"; inherits: true; initial-value: 12px;}et-otp-input{display:inline-flex;flex-direction:column;gap:6px;color:var(--et-surface-color-solid, currentColor)}et-otp-input>et-label{font-size:var(--et-otp-input-label-font-size);font-weight:500;line-height:1.2;letter-spacing:-.01em;color:var(--et-surface-color-muted-solid, currentColor);-webkit-user-select:none;user-select:none}et-otp-input .et-otp-input-field{position:relative;inline-size:fit-content}et-otp-input .et-otp-input-segments{display:flex;gap:var(--et-otp-input-segment-gap)}et-otp-input .et-otp-input-segment{display:flex;align-items:center;justify-content:center;inline-size:var(--et-otp-input-segment-size);block-size:var(--et-otp-input-segment-size);border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));border-radius:var(--et-otp-input-segment-radius);font-size:calc(var(--et-otp-input-segment-size) * .45);font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}et-otp-input .et-otp-input-segment[data-caret]{border-color:var(--et-theme-color-primary-solid, currentColor);outline:1px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:-1px}et-otp-input .et-otp-input-segment .et-otp-input-segment-char{display:block}et-otp-input .et-otp-input-segment .et-otp-input-caret{inline-size:2px;block-size:1.1em;border-radius:1px;background:var(--et-theme-color-primary-solid, currentColor);animation:et-otp-input-caret-blink 1.1s steps(2,jump-none) infinite}et-otp-input .et-otp-input-native{position:absolute;inset:0;inline-size:100%;block-size:100%;border:none;outline:none;padding:0;margin:0;background:transparent;color:transparent;caret-color:transparent;font-size:max(1em,16px)}et-otp-input .et-otp-input-native::selection{background:transparent}et-otp-input .et-otp-input-native:disabled{cursor:not-allowed}et-otp-input[data-error] .et-otp-input-segment{border-color:var(--et-theme-color-primary-solid, currentColor)}et-otp-input:has(.et-otp-input-native:disabled){opacity:.4}et-otp-input:has(.et-otp-input-native:disabled) .et-otp-input-segment{-webkit-user-select:none;user-select:none}et-otp-input .et-otp-input-support{overflow:clip;block-size:0}et-otp-input .et-otp-input-support-stack{position:relative;display:grid}et-otp-input .et-otp-input-support-content{grid-area:1 / 1;min-inline-size:0;opacity:0;transform:translateY(0)}et-otp-input .et-otp-input-support-content[data-active]{opacity:1;transform:translateY(0)}et-otp-input .et-otp-input-errors{display:flex;flex-direction:column;gap:2px;padding-block-start:4px;font-size:var(--et-otp-input-error-font-size);color:var(--et-theme-color-primary-solid, currentColor)}et-otp-input .et-otp-input-hint{padding-block-start:4px;font-size:var(--et-otp-input-hint-font-size);color:var(--et-surface-color-muted-solid, currentColor)}et-otp-input .et-otp-input-hint:empty{display:none}et-otp-input[data-can-animate] .et-otp-input-support{transition:block-size var(--et-otp-input-support-duration) ease}et-otp-input[data-can-animate] .et-otp-input-support-content{transition:opacity var(--et-otp-input-support-duration) ease,transform var(--et-otp-input-support-duration) ease}@starting-style{et-otp-input[data-can-animate] .et-otp-input-support-content[data-active]{opacity:0;transform:translateY(calc(var(--et-otp-input-support-offset) * -1))}}et-otp-input[data-can-animate] .et-otp-input-segment{transition:border-color .12s ease,outline-color .12s ease}et-otp-input[data-can-animate] .et-otp-input-segment-char{transition:transform .14s cubic-bezier(.2,1.4,.4,1),opacity .1s ease}@starting-style{et-otp-input[data-can-animate] .et-otp-input-segment-char{transform:scale(.4);opacity:0}}@media(prefers-reduced-motion:reduce){et-otp-input{--et-otp-input-support-duration: 1ms;--et-otp-input-support-offset: 0px}et-otp-input .et-otp-input-caret{animation:none}}}\n"], dependencies: [{ kind: "directive", type: AnimatableDirective, selector: "[etAnimatable]", exportAs: ["etAnimatable"] }, { kind: "component", type: FormErrorComponent, selector: "et-form-error", inputs: ["error"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
19693
19702
|
}
|
|
19694
19703
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OtpInputComponent, decorators: [{
|
|
19695
19704
|
type: Component,
|
|
@@ -19710,7 +19719,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
19710
19719
|
'charset',
|
|
19711
19720
|
'masked',
|
|
19712
19721
|
],
|
|
19713
|
-
outputs: ['valueChange', 'touchedChange', '
|
|
19722
|
+
outputs: ['valueChange', 'touchedChange', 'complete'],
|
|
19714
19723
|
},
|
|
19715
19724
|
{ directive: ProvideColorDirective, inputs: ['etProvideColor:color'] },
|
|
19716
19725
|
], host: {
|
|
@@ -20412,10 +20421,8 @@ class SelectDirective {
|
|
|
20412
20421
|
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
20413
20422
|
this.open = model(false, /* @ts-ignore */
|
|
20414
20423
|
...(ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []));
|
|
20415
|
-
this.multiple = input(false, /*
|
|
20416
|
-
...(ngDevMode ?
|
|
20417
|
-
this.disabled = input(false, /* @ts-ignore */
|
|
20418
|
-
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
20424
|
+
this.multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
20425
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
20419
20426
|
this.readonly = input(false, /* @ts-ignore */
|
|
20420
20427
|
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
20421
20428
|
this.invalid = input(false, /* @ts-ignore */
|
|
@@ -20464,8 +20471,7 @@ class SelectDirective {
|
|
|
20464
20471
|
this.maxSelection = input(undefined, /* @ts-ignore */
|
|
20465
20472
|
...(ngDevMode ? [{ debugName: "maxSelection" }] : /* istanbul ignore next */ []));
|
|
20466
20473
|
/** Renders an "Add new" row in `et-select`'s panel — clicking it emits `addNew`. */
|
|
20467
|
-
this.allowAddNew = input(false, /*
|
|
20468
|
-
...(ngDevMode ? [{ debugName: "allowAddNew" }] : /* istanbul ignore next */ []));
|
|
20474
|
+
this.allowAddNew = input(false, { ...(ngDevMode ? { debugName: "allowAddNew" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
20469
20475
|
/** Async option state — rendered by `et-select` as a loading row inside the panel. */
|
|
20470
20476
|
this.loadingInput = input(false, { ...(ngDevMode ? { debugName: "loadingInput" } : /* istanbul ignore next */ {}), alias: 'loading' });
|
|
20471
20477
|
/** Async option state — rendered by `et-select` as an error row inside the panel. */
|
|
@@ -20473,15 +20479,13 @@ class SelectDirective {
|
|
|
20473
20479
|
/** Async option state — `et-select` renders a load-more control emitting `loadMore`. */
|
|
20474
20480
|
this.hasMoreItemsInput = input(false, { ...(ngDevMode ? { debugName: "hasMoreItemsInput" } : /* istanbul ignore next */ {}), alias: 'hasMoreItems' });
|
|
20475
20481
|
/** Whether the panel mirrors the anchor's width. Off for compact triggers (e.g. a country picker). */
|
|
20476
|
-
this.mirrorPanelWidth = input(true, /*
|
|
20477
|
-
...(ngDevMode ? [{ debugName: "mirrorPanelWidth" }] : /* istanbul ignore next */ []));
|
|
20482
|
+
this.mirrorPanelWidth = input(true, { ...(ngDevMode ? { debugName: "mirrorPanelWidth" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
20478
20483
|
/**
|
|
20479
20484
|
* Fire-and-forget picker mode (single select): committing an option emits `pickOption`
|
|
20480
20485
|
* without ever writing `value`, so the select stays empty and can feed an external list
|
|
20481
20486
|
* without the set-then-clear dance. No effect in multi select.
|
|
20482
20487
|
*/
|
|
20483
|
-
this.pickOnly = input(false, /*
|
|
20484
|
-
...(ngDevMode ? [{ debugName: "pickOnly" }] : /* istanbul ignore next */ []));
|
|
20488
|
+
this.pickOnly = input(false, { ...(ngDevMode ? { debugName: "pickOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
20485
20489
|
this.queryChange = output();
|
|
20486
20490
|
this.loadMore = output();
|
|
20487
20491
|
/** The user picked the "Add new" row (`allowAddNew`). Emits the current search query for prefilling. */
|
|
@@ -21614,15 +21618,13 @@ class SelectOptionDirective {
|
|
|
21614
21618
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
21615
21619
|
/** Display label. Falls back to the element's text content rendered on first paint. */
|
|
21616
21620
|
this.labelInput = input('', { ...(ngDevMode ? { debugName: "labelInput" } : /* istanbul ignore next */ {}), alias: 'label' });
|
|
21617
|
-
this.disabled = input(false, /*
|
|
21618
|
-
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
21621
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
21619
21622
|
/**
|
|
21620
21623
|
* Marks the option as the select's "Create …" row for the current `customValueCandidate` —
|
|
21621
21624
|
* it is excluded from the candidate's duplicate-label check (it would otherwise hide
|
|
21622
21625
|
* itself, since its label *is* the candidate).
|
|
21623
21626
|
*/
|
|
21624
|
-
this.customValueOption = input(false, /*
|
|
21625
|
-
...(ngDevMode ? [{ debugName: "customValueOption" }] : /* istanbul ignore next */ []));
|
|
21627
|
+
this.customValueOption = input(false, { ...(ngDevMode ? { debugName: "customValueOption" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
21626
21628
|
this.optionId = signal(createComponentId('et-select-option'), /* @ts-ignore */
|
|
21627
21629
|
...(ngDevMode ? [{ debugName: "optionId" }] : /* istanbul ignore next */ []));
|
|
21628
21630
|
this.textLabel = signal('', /* @ts-ignore */
|
|
@@ -22895,7 +22897,7 @@ class SelectComponent {
|
|
|
22895
22897
|
}
|
|
22896
22898
|
}
|
|
22897
22899
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
22898
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SelectComponent, isStandalone: true, selector: "et-select", inputs: { loadMoreLabel: { classPropertyName: "loadMoreLabel", publicName: "loadMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, addNewLabel: { classPropertyName: "addNewLabel", publicName: "addNewLabel", isSignal: true, isRequired: false, transformFunction: null }, createLabel: { classPropertyName: "createLabel", publicName: "createLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-select" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON, PLUS_ICON)], hostDirectives: [{ directive: SelectDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "open", "open", "multiple", "multiple", "placeholder", "placeholder", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "options", "options", "filterMode", "filterMode", "allowCustomValues", "allowCustomValues", "customValueSeparators", "customValueSeparators", "normalizeCustomValue", "normalizeCustomValue", "commitCustomValueOnClose", "commitCustomValueOnClose", "maxSelection", "maxSelection", "allowAddNew", "allowAddNew", "loading", "loading", "error", "error", "hasMoreItems", "hasMoreItems", "pickOnly", "pickOnly"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "openChange", "openChange", "queryChange", "queryChange", "loadMore", "loadMore", "addNew", "addNew", "pickOption", "pickOption"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n @if (select.mixed()) {\n @if (showValueLabel()) {\n <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n }\n } @else if (select.registeredValueTemplate(); as valueTemplate) {\n @if (showCustomValue()) {\n <div class=\"et-select-value-custom\">\n <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n </div>\n }\n } @else if (select.multiple() && select.selectedEntries().length) {\n <!-- display: contents \u2014 the chips share the trigger's wrapping flex flow with the\n inline search input, tag-input style -->\n <!-- readonly is not disabled: the chips keep their normal look, they just lose the\n remove affordance -->\n <div class=\"et-select-chips\">\n @for (entry of select.selectedEntries(); track entry.value) {\n <et-chip\n [disabled]=\"select.disabled()\"\n [removable]=\"!select.readonly() && !select.disabled()\"\n (remove)=\"select.deselectValue(entry.value)\"\n >\n {{ entry.label }}\n </et-chip>\n }\n </div>\n }\n\n @if (!select.mixed() && showValueLabel()) {\n <span [attr.data-placeholder]=\"!select.hasValue() || null\" class=\"et-select-value\">\n {{ select.displayValue() ?? select.placeholder() }}\n </span>\n }\n\n <!-- combobox pattern: the search input sits inline in the field, not in the panel -->\n <ng-content select=\"input[etSelectSearch]\" />\n </div>\n\n <!-- async option state, surfaced in the field itself (mirrors the menu's search spinner) \u2014\n only while the panel is closed; open, the panel's loading row is the single spinner -->\n @if (select.loading() && !select.open()) {\n <et-spinner class=\"et-select-trigger-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing -->\n <button\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"handleClearClick($event)\"\n class=\"et-select-clear\"\n animate.enter=\"et-select-clear--enter\"\n animate.leave=\"et-select-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <!-- pointer-only affordance (keyboard users close via Escape) \u2014 kept out of the tab order -->\n <button\n [disabled]=\"select.disabled()\"\n (click)=\"handleArrowClick($event)\"\n class=\"et-select-arrow\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-chevron\"></i>\n </button>\n</div>\n\n<ng-template #optionContent>\n <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n <!-- keeps the projected options rendered (and their bindings live) while the panel is\n closed, so the trigger can resolve a preselected value's label and closed typeahead\n works \u2014 the same template moves into the overlay while it is open -->\n <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n </div>\n}\n\n<ng-template etSelectSurface>\n <et-select-panel>\n @if (select.options()) {\n <!-- data-driven mode: the select owns the option rows and windows their rendering \u2014\n only rows near the viewport exist in the DOM; the block paddings stand in for the\n scroll height of everything outside the window -->\n <div\n [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n class=\"et-select-virtual-options\"\n role=\"none\"\n >\n @for (item of select.virtualizedItems(); track item) {\n <et-select-virtual-option [item]=\"item\" />\n }\n </div>\n }\n\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n <!-- a real option (not an action row like add-new): it takes part in virtual focus, so\n Enter commits it and it is keyboard-reachable while options still match the query.\n Its label is the candidate itself \u2014 that is what commits and what the label cache\n stores; the \"Create\" prefix is display-only. -->\n @if (select.customValueCandidate(); as candidate) {\n <et-select-option\n [value]=\"candidate\"\n [label]=\"candidate\"\n [customValueOption]=\"true\"\n class=\"et-select-create-option\"\n >\n <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ createLabel() }} \u201C{{ candidate }}\u201D\n </et-select-option>\n }\n\n <!-- state rows and action buttons are NOT options \u2014 projected outside the listbox element\n (display: contents, so they still flow within the scrolling panel) -->\n <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n @if (select.loading()) {\n @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n } @else {\n <div class=\"et-select-state et-select-state--loading\">\n <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n Loading\u2026\n </div>\n }\n } @else if (select.error(); as error) {\n @if (select.registeredErrorTemplate(); as errorTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: error }\"\n />\n } @else {\n <div [etProvideColor]=\"errorColorTheme\" class=\"et-select-state et-select-state--error\" role=\"alert\">\n {{ error }}\n </div>\n }\n } @else if (!select.visibleItems().length) {\n @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n } @else {\n <div class=\"et-select-state et-select-state--empty\">No results</div>\n }\n }\n\n @if (select.hasMoreItems() && !select.loading()) {\n <button (click)=\"select.requestLoadMore()\" class=\"et-select-load-more\" tabindex=\"-1\" type=\"button\">\n <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n {{ loadMoreLabel() }}\n </button>\n }\n\n @if (select.allowAddNew() && !select.loading()) {\n <!-- pointer-only, like the load-more control \u2014 keyboard users reach the same flow\n through the consumer's own UI (e.g. a button next to the field) -->\n <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ addNewLabel() }}\n </button>\n }\n </div>\n </et-select-panel>\n</ng-template>\n", styles: ["@layer components{@property --et-select-arrow-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}et-select{display:block;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;inline-size:100%;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:color-mix(in srgb,currentColor 46%,transparent)}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-select .et-select-clear{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-arrow-size);block-size:var(--et-select-arrow-size);color:var(--et-surface-color-muted-solid, currentColor);border:none;background:transparent;padding:0;margin:0;cursor:pointer;appearance:none}@media(hover:hover){et-select .et-select-clear:hover{color:var(--et-surface-color-solid, currentColor)}}et-select .et-select-clear .et-icon{inline-size:calc(var(--et-select-arrow-size) - 4px);block-size:calc(var(--et-select-arrow-size) - 4px)}et-select .et-select-clear.et-select-clear--enter{animation:et-select-clear-in .15s ease}et-select .et-select-clear.et-select-clear--leave{animation:et-select-clear-out .12s ease forwards}@media(prefers-reduced-motion:reduce){et-select .et-select-clear.et-select-clear--enter,et-select .et-select-clear.et-select-clear--leave{animation:none}}et-select .et-select-arrow{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-arrow-size);block-size:var(--et-select-arrow-size);color:var(--et-surface-color-muted-solid, currentColor);border:none;background:transparent;padding:0;margin:0;cursor:pointer;appearance:none}et-select .et-select-arrow .et-icon{inline-size:100%;block-size:100%;rotate:180deg}@keyframes et-select-clear-in{0%{opacity:0}}@keyframes et-select-clear-out{to{opacity:0}}}\n"], dependencies: [{ kind: "directive", type: SelectTriggerDirective, selector: "[etSelectTrigger]", exportAs: ["etSelectTrigger"] }, { kind: "directive", type: SelectSurfaceDirective, selector: "ng-template[etSelectSurface]", exportAs: ["etSelectSurface"] }, { kind: "component", type: SelectPanelComponent, selector: "et-select-panel" }, { kind: "component", type: SelectOptionComponent, selector: "et-select-option" }, { kind: "component", type: SelectVirtualOptionComponent, selector: "et-select-virtual-option" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChipComponent, selector: "et-chip" }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
22900
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SelectComponent, isStandalone: true, selector: "et-select", inputs: { loadMoreLabel: { classPropertyName: "loadMoreLabel", publicName: "loadMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, addNewLabel: { classPropertyName: "addNewLabel", publicName: "addNewLabel", isSignal: true, isRequired: false, transformFunction: null }, createLabel: { classPropertyName: "createLabel", publicName: "createLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-select" }, providers: [provideIcons(CHEVRON_ICON, TIMES_ICON, PLUS_ICON)], hostDirectives: [{ directive: SelectDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "open", "open", "multiple", "multiple", "placeholder", "placeholder", "mixedLabel", "mixedLabel", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "options", "options", "filterMode", "filterMode", "allowCustomValues", "allowCustomValues", "customValueSeparators", "customValueSeparators", "normalizeCustomValue", "normalizeCustomValue", "commitCustomValueOnClose", "commitCustomValueOnClose", "maxSelection", "maxSelection", "allowAddNew", "allowAddNew", "loading", "loading", "error", "error", "hasMoreItems", "hasMoreItems", "pickOnly", "pickOnly"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange", "openChange", "openChange", "queryChange", "queryChange", "loadMore", "loadMore", "addNew", "addNew", "pickOption", "pickOption"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n @if (select.mixed()) {\n @if (showValueLabel()) {\n <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n }\n } @else if (select.registeredValueTemplate(); as valueTemplate) {\n @if (showCustomValue()) {\n <div class=\"et-select-value-custom\">\n <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n </div>\n }\n } @else if (select.multiple() && select.selectedEntries().length) {\n <!-- display: contents \u2014 the chips share the trigger's wrapping flex flow with the\n inline search input, tag-input style -->\n <!-- readonly is not disabled: the chips keep their normal look, they just lose the\n remove affordance -->\n <div class=\"et-select-chips\">\n @for (entry of select.selectedEntries(); track entry.value) {\n <et-chip\n [disabled]=\"select.disabled()\"\n [removable]=\"!select.readonly() && !select.disabled()\"\n (remove)=\"select.deselectValue(entry.value)\"\n >\n {{ entry.label }}\n </et-chip>\n }\n </div>\n }\n\n @if (!select.mixed() && showValueLabel()) {\n <span [attr.data-placeholder]=\"!select.hasValue() || null\" class=\"et-select-value\">\n {{ select.displayValue() ?? select.placeholder() }}\n </span>\n }\n\n <!-- combobox pattern: the search input sits inline in the field, not in the panel -->\n <ng-content select=\"input[etSelectSearch]\" />\n </div>\n\n <!-- async option state, surfaced in the field itself (mirrors the menu's search spinner) \u2014\n only while the panel is closed; open, the panel's loading row is the single spinner -->\n @if (select.loading() && !select.open()) {\n <et-spinner class=\"et-select-trigger-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing -->\n <button\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"handleClearClick($event)\"\n class=\"et-select-clear\"\n animate.enter=\"et-select-clear--enter\"\n animate.leave=\"et-select-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <!-- pointer-only affordance (keyboard users close via Escape) \u2014 kept out of the tab order -->\n <button\n [disabled]=\"select.disabled()\"\n (click)=\"handleArrowClick($event)\"\n class=\"et-select-arrow\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-chevron\"></i>\n </button>\n</div>\n\n<ng-template #optionContent>\n <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n <!-- keeps the projected options rendered (and their bindings live) while the panel is\n closed, so the trigger can resolve a preselected value's label and closed typeahead\n works \u2014 the same template moves into the overlay while it is open -->\n <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n </div>\n}\n\n<ng-template etSelectSurface>\n <et-select-panel>\n @if (select.options()) {\n <!-- data-driven mode: the select owns the option rows and windows their rendering \u2014\n only rows near the viewport exist in the DOM; the block paddings stand in for the\n scroll height of everything outside the window -->\n <div\n [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n class=\"et-select-virtual-options\"\n role=\"none\"\n >\n @for (item of select.virtualizedItems(); track item) {\n <et-select-virtual-option [item]=\"item\" />\n }\n </div>\n }\n\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n <!-- a real option (not an action row like add-new): it takes part in virtual focus, so\n Enter commits it and it is keyboard-reachable while options still match the query.\n Its label is the candidate itself \u2014 that is what commits and what the label cache\n stores; the \"Create\" prefix is display-only. -->\n @if (select.customValueCandidate(); as candidate) {\n <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ createLabel() }} \u201C{{ candidate }}\u201D\n </et-select-option>\n }\n\n <!-- state rows and action buttons are NOT options \u2014 projected outside the listbox element\n (display: contents, so they still flow within the scrolling panel) -->\n <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n @if (select.loading()) {\n @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n } @else {\n <div class=\"et-select-state et-select-state--loading\">\n <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n Loading\u2026\n </div>\n }\n } @else if (select.error(); as error) {\n @if (select.registeredErrorTemplate(); as errorTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: error }\"\n />\n } @else {\n <div [etProvideColor]=\"errorColorTheme\" class=\"et-select-state et-select-state--error\" role=\"alert\">\n {{ error }}\n </div>\n }\n } @else if (!select.visibleItems().length) {\n @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n } @else {\n <div class=\"et-select-state et-select-state--empty\">No results</div>\n }\n }\n\n @if (select.hasMoreItems() && !select.loading()) {\n <button (click)=\"select.requestLoadMore()\" class=\"et-select-load-more\" tabindex=\"-1\" type=\"button\">\n <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n {{ loadMoreLabel() }}\n </button>\n }\n\n @if (select.allowAddNew() && !select.loading()) {\n <!-- pointer-only, like the load-more control \u2014 keyboard users reach the same flow\n through the consumer's own UI (e.g. a button next to the field) -->\n <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ addNewLabel() }}\n </button>\n }\n </div>\n </et-select-panel>\n</ng-template>\n", styles: ["@layer components{@property --et-select-arrow-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}et-select{display:block;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;inline-size:100%;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:color-mix(in srgb,currentColor 46%,transparent)}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-select .et-select-clear{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-arrow-size);block-size:var(--et-select-arrow-size);color:var(--et-surface-color-muted-solid, currentColor);border:none;background:transparent;padding:0;margin:0;cursor:pointer;appearance:none}@media(hover:hover){et-select .et-select-clear:hover{color:var(--et-surface-color-solid, currentColor)}}et-select .et-select-clear .et-icon{inline-size:calc(var(--et-select-arrow-size) - 4px);block-size:calc(var(--et-select-arrow-size) - 4px)}et-select .et-select-clear.et-select-clear--enter{animation:et-select-clear-in .15s ease}et-select .et-select-clear.et-select-clear--leave{animation:et-select-clear-out .12s ease forwards}@media(prefers-reduced-motion:reduce){et-select .et-select-clear.et-select-clear--enter,et-select .et-select-clear.et-select-clear--leave{animation:none}}et-select .et-select-arrow{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-arrow-size);block-size:var(--et-select-arrow-size);color:var(--et-surface-color-muted-solid, currentColor);border:none;background:transparent;padding:0;margin:0;cursor:pointer;appearance:none}et-select .et-select-arrow .et-icon{inline-size:100%;block-size:100%;rotate:180deg}@keyframes et-select-clear-in{0%{opacity:0}}@keyframes et-select-clear-out{to{opacity:0}}}\n"], dependencies: [{ kind: "directive", type: SelectTriggerDirective, selector: "[etSelectTrigger]", exportAs: ["etSelectTrigger"] }, { kind: "directive", type: SelectSurfaceDirective, selector: "ng-template[etSelectSurface]", exportAs: ["etSelectSurface"] }, { kind: "component", type: SelectPanelComponent, selector: "et-select-panel" }, { kind: "component", type: SelectOptionComponent, selector: "et-select-option" }, { kind: "component", type: SelectVirtualOptionComponent, selector: "et-select-virtual-option" }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChipComponent, selector: "et-chip" }, { kind: "component", type: SpinnerComponent, selector: "et-spinner", inputs: ["diameter", "strokeWidth", "track", "value", "determinate"] }, { kind: "directive", type: ProvideColorDirective, selector: "[etProvideColor]", inputs: ["etProvideColor"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
22899
22901
|
}
|
|
22900
22902
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectComponent, decorators: [{
|
|
22901
22903
|
type: Component,
|
|
@@ -22954,7 +22956,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
22954
22956
|
ColorInteractiveDirective,
|
|
22955
22957
|
], host: {
|
|
22956
22958
|
class: 'et-select',
|
|
22957
|
-
}, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n @if (select.mixed()) {\n @if (showValueLabel()) {\n <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n }\n } @else if (select.registeredValueTemplate(); as valueTemplate) {\n @if (showCustomValue()) {\n <div class=\"et-select-value-custom\">\n <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n </div>\n }\n } @else if (select.multiple() && select.selectedEntries().length) {\n <!-- display: contents \u2014 the chips share the trigger's wrapping flex flow with the\n inline search input, tag-input style -->\n <!-- readonly is not disabled: the chips keep their normal look, they just lose the\n remove affordance -->\n <div class=\"et-select-chips\">\n @for (entry of select.selectedEntries(); track entry.value) {\n <et-chip\n [disabled]=\"select.disabled()\"\n [removable]=\"!select.readonly() && !select.disabled()\"\n (remove)=\"select.deselectValue(entry.value)\"\n >\n {{ entry.label }}\n </et-chip>\n }\n </div>\n }\n\n @if (!select.mixed() && showValueLabel()) {\n <span [attr.data-placeholder]=\"!select.hasValue() || null\" class=\"et-select-value\">\n {{ select.displayValue() ?? select.placeholder() }}\n </span>\n }\n\n <!-- combobox pattern: the search input sits inline in the field, not in the panel -->\n <ng-content select=\"input[etSelectSearch]\" />\n </div>\n\n <!-- async option state, surfaced in the field itself (mirrors the menu's search spinner) \u2014\n only while the panel is closed; open, the panel's loading row is the single spinner -->\n @if (select.loading() && !select.open()) {\n <et-spinner class=\"et-select-trigger-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing -->\n <button\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"handleClearClick($event)\"\n class=\"et-select-clear\"\n animate.enter=\"et-select-clear--enter\"\n animate.leave=\"et-select-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <!-- pointer-only affordance (keyboard users close via Escape) \u2014 kept out of the tab order -->\n <button\n [disabled]=\"select.disabled()\"\n (click)=\"handleArrowClick($event)\"\n class=\"et-select-arrow\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-chevron\"></i>\n </button>\n</div>\n\n<ng-template #optionContent>\n <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n <!-- keeps the projected options rendered (and their bindings live) while the panel is\n closed, so the trigger can resolve a preselected value's label and closed typeahead\n works \u2014 the same template moves into the overlay while it is open -->\n <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n </div>\n}\n\n<ng-template etSelectSurface>\n <et-select-panel>\n @if (select.options()) {\n <!-- data-driven mode: the select owns the option rows and windows their rendering \u2014\n only rows near the viewport exist in the DOM; the block paddings stand in for the\n scroll height of everything outside the window -->\n <div\n [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n class=\"et-select-virtual-options\"\n role=\"none\"\n >\n @for (item of select.virtualizedItems(); track item) {\n <et-select-virtual-option [item]=\"item\" />\n }\n </div>\n }\n\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n <!-- a real option (not an action row like add-new): it takes part in virtual focus, so\n Enter commits it and it is keyboard-reachable while options still match the query.\n Its label is the candidate itself \u2014 that is what commits and what the label cache\n stores; the \"Create\" prefix is display-only. -->\n @if (select.customValueCandidate(); as candidate) {\n <et-select-option\n [value]=\"candidate\"\n [label]=\"candidate\"\n [customValueOption]=\"true\"\n class=\"et-select-create-option\"\n >\n <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ createLabel() }} \u201C{{ candidate }}\u201D\n </et-select-option>\n }\n\n <!-- state rows and action buttons are NOT options \u2014 projected outside the listbox element\n (display: contents, so they still flow within the scrolling panel) -->\n <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n @if (select.loading()) {\n @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n } @else {\n <div class=\"et-select-state et-select-state--loading\">\n <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n Loading\u2026\n </div>\n }\n } @else if (select.error(); as error) {\n @if (select.registeredErrorTemplate(); as errorTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: error }\"\n />\n } @else {\n <div [etProvideColor]=\"errorColorTheme\" class=\"et-select-state et-select-state--error\" role=\"alert\">\n {{ error }}\n </div>\n }\n } @else if (!select.visibleItems().length) {\n @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n } @else {\n <div class=\"et-select-state et-select-state--empty\">No results</div>\n }\n }\n\n @if (select.hasMoreItems() && !select.loading()) {\n <button (click)=\"select.requestLoadMore()\" class=\"et-select-load-more\" tabindex=\"-1\" type=\"button\">\n <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n {{ loadMoreLabel() }}\n </button>\n }\n\n @if (select.allowAddNew() && !select.loading()) {\n <!-- pointer-only, like the load-more control \u2014 keyboard users reach the same flow\n through the consumer's own UI (e.g. a button next to the field) -->\n <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ addNewLabel() }}\n </button>\n }\n </div>\n </et-select-panel>\n</ng-template>\n", styles: ["@layer components{@property --et-select-arrow-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}et-select{display:block;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;inline-size:100%;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:color-mix(in srgb,currentColor 46%,transparent)}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-select .et-select-clear{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-arrow-size);block-size:var(--et-select-arrow-size);color:var(--et-surface-color-muted-solid, currentColor);border:none;background:transparent;padding:0;margin:0;cursor:pointer;appearance:none}@media(hover:hover){et-select .et-select-clear:hover{color:var(--et-surface-color-solid, currentColor)}}et-select .et-select-clear .et-icon{inline-size:calc(var(--et-select-arrow-size) - 4px);block-size:calc(var(--et-select-arrow-size) - 4px)}et-select .et-select-clear.et-select-clear--enter{animation:et-select-clear-in .15s ease}et-select .et-select-clear.et-select-clear--leave{animation:et-select-clear-out .12s ease forwards}@media(prefers-reduced-motion:reduce){et-select .et-select-clear.et-select-clear--enter,et-select .et-select-clear.et-select-clear--leave{animation:none}}et-select .et-select-arrow{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-arrow-size);block-size:var(--et-select-arrow-size);color:var(--et-surface-color-muted-solid, currentColor);border:none;background:transparent;padding:0;margin:0;cursor:pointer;appearance:none}et-select .et-select-arrow .et-icon{inline-size:100%;block-size:100%;rotate:180deg}@keyframes et-select-clear-in{0%{opacity:0}}@keyframes et-select-clear-out{to{opacity:0}}}\n"] }]
|
|
22959
|
+
}, template: "<!-- a div, not a <button>: chips carry remove buttons and buttons cannot nest.\n The trigger directive manages tabindex/aria-disabled for non-button hosts. -->\n<div class=\"et-select-trigger\" etSelectTrigger>\n <div [class.et-select-trigger-content--stacked]=\"stackedValue()\" class=\"et-select-trigger-content\">\n @if (select.mixed()) {\n @if (showValueLabel()) {\n <span [id]=\"mixedLabelId\" class=\"et-select-value\">{{ select.displayValue() }}</span>\n }\n } @else if (select.registeredValueTemplate(); as valueTemplate) {\n @if (showCustomValue()) {\n <div class=\"et-select-value-custom\">\n <ng-template [ngTemplateOutlet]=\"valueTemplate.templateRef\" [ngTemplateOutletContext]=\"valueContext()\" />\n </div>\n }\n } @else if (select.multiple() && select.selectedEntries().length) {\n <!-- display: contents \u2014 the chips share the trigger's wrapping flex flow with the\n inline search input, tag-input style -->\n <!-- readonly is not disabled: the chips keep their normal look, they just lose the\n remove affordance -->\n <div class=\"et-select-chips\">\n @for (entry of select.selectedEntries(); track entry.value) {\n <et-chip\n [disabled]=\"select.disabled()\"\n [removable]=\"!select.readonly() && !select.disabled()\"\n (remove)=\"select.deselectValue(entry.value)\"\n >\n {{ entry.label }}\n </et-chip>\n }\n </div>\n }\n\n @if (!select.mixed() && showValueLabel()) {\n <span [attr.data-placeholder]=\"!select.hasValue() || null\" class=\"et-select-value\">\n {{ select.displayValue() ?? select.placeholder() }}\n </span>\n }\n\n <!-- combobox pattern: the search input sits inline in the field, not in the panel -->\n <ng-content select=\"input[etSelectSearch]\" />\n </div>\n\n <!-- async option state, surfaced in the field itself (mirrors the menu's search spinner) \u2014\n only while the panel is closed; open, the panel's loading row is the single spinner -->\n @if (select.loading() && !select.open()) {\n <et-spinner class=\"et-select-trigger-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n }\n\n @if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear via Backspace / erasing -->\n <button\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"handleClearClick($event)\"\n class=\"et-select-clear\"\n animate.enter=\"et-select-clear--enter\"\n animate.leave=\"et-select-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n }\n\n <!-- pointer-only affordance (keyboard users close via Escape) \u2014 kept out of the tab order -->\n <button\n [disabled]=\"select.disabled()\"\n (click)=\"handleArrowClick($event)\"\n class=\"et-select-arrow\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-chevron\"></i>\n </button>\n</div>\n\n<ng-template #optionContent>\n <ng-content />\n</ng-template>\n\n@if (!select.isMounted()) {\n <!-- keeps the projected options rendered (and their bindings live) while the panel is\n closed, so the trigger can resolve a preselected value's label and closed typeahead\n works \u2014 the same template moves into the overlay while it is open -->\n <div class=\"et-select-detached-options\" aria-hidden=\"true\" hidden>\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n </div>\n}\n\n<ng-template etSelectSurface>\n <et-select-panel>\n @if (select.options()) {\n <!-- data-driven mode: the select owns the option rows and windows their rendering \u2014\n only rows near the viewport exist in the DOM; the block paddings stand in for the\n scroll height of everything outside the window -->\n <div\n [style.padding-block-start.px]=\"select.virtualWindow.paddingTop()\"\n [style.padding-block-end.px]=\"select.virtualWindow.paddingBottom()\"\n class=\"et-select-virtual-options\"\n role=\"none\"\n >\n @for (item of select.virtualizedItems(); track item) {\n <et-select-virtual-option [item]=\"item\" />\n }\n </div>\n }\n\n <ng-template [ngTemplateOutlet]=\"optionContent\" />\n\n <!-- a real option (not an action row like add-new): it takes part in virtual focus, so\n Enter commits it and it is keyboard-reachable while options still match the query.\n Its label is the candidate itself \u2014 that is what commits and what the label cache\n stores; the \"Create\" prefix is display-only. -->\n @if (select.customValueCandidate(); as candidate) {\n <et-select-option [value]=\"candidate\" [label]=\"candidate\" class=\"et-select-create-option\" customValueOption>\n <i class=\"et-select-create-option-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ createLabel() }} \u201C{{ candidate }}\u201D\n </et-select-option>\n }\n\n <!-- state rows and action buttons are NOT options \u2014 projected outside the listbox element\n (display: contents, so they still flow within the scrolling panel) -->\n <div class=\"et-select-panel-extras\" etSelectPanelExtras>\n @if (select.loading()) {\n @if (select.registeredLoadingTemplate(); as loadingTemplate) {\n <ng-template [ngTemplateOutlet]=\"loadingTemplate.templateRef\" />\n } @else {\n <div class=\"et-select-state et-select-state--loading\">\n <et-spinner class=\"et-select-state-spinner\" diameter=\"16\" strokeWidth=\"2\" />\n Loading\u2026\n </div>\n }\n } @else if (select.error(); as error) {\n @if (select.registeredErrorTemplate(); as errorTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"errorTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: error }\"\n />\n } @else {\n <div [etProvideColor]=\"errorColorTheme\" class=\"et-select-state et-select-state--error\" role=\"alert\">\n {{ error }}\n </div>\n }\n } @else if (!select.visibleItems().length) {\n @if (select.registeredEmptyTemplate(); as emptyTemplate) {\n <ng-template [ngTemplateOutlet]=\"emptyTemplate.templateRef\" />\n } @else {\n <div class=\"et-select-state et-select-state--empty\">No results</div>\n }\n }\n\n @if (select.hasMoreItems() && !select.loading()) {\n <button (click)=\"select.requestLoadMore()\" class=\"et-select-load-more\" tabindex=\"-1\" type=\"button\">\n <i class=\"et-select-load-more-icon\" etIcon=\"et-chevron\" aria-hidden=\"true\"></i>\n {{ loadMoreLabel() }}\n </button>\n }\n\n @if (select.allowAddNew() && !select.loading()) {\n <!-- pointer-only, like the load-more control \u2014 keyboard users reach the same flow\n through the consumer's own UI (e.g. a button next to the field) -->\n <button (click)=\"select.requestAddNew()\" class=\"et-select-add-new\" tabindex=\"-1\" type=\"button\">\n <i class=\"et-select-add-new-icon\" etIcon=\"et-plus\" aria-hidden=\"true\"></i>\n {{ addNewLabel() }}\n </button>\n }\n </div>\n </et-select-panel>\n</ng-template>\n", styles: ["@layer components{@property --et-select-arrow-size{syntax: \"<length>\"; inherits: true; initial-value: 16px;}et-select{display:block;flex:1;min-inline-size:0;color:inherit}et-select .et-select-trigger{display:flex;align-items:center;gap:6px;inline-size:100%;outline:none;color:inherit;min-inline-size:0;text-align:start;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}et-select .et-select-trigger[data-disabled]{cursor:not-allowed}et-select .et-select-trigger[data-readonly]{cursor:default}et-select .et-select-trigger .et-select-trigger-content{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-inline-size:0}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked{display:grid;grid-template-columns:minmax(0,1fr)}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked>*{grid-area:1 / 1}et-select .et-select-trigger .et-select-trigger-content.et-select-trigger-content--stacked:has(.et-select-value-custom) input[etselectsearch]{caret-color:transparent}et-select .et-select-trigger input[etselectsearch]{flex:1 1 60px;min-inline-size:60px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);cursor:text}et-select .et-select-trigger input[etselectsearch]::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-select .et-select-trigger input[etselectsearch]:disabled{cursor:not-allowed}et-select .et-select-trigger:has(input[etselectsearch]) .et-select-value{flex:0 1 auto}et-select .et-select-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-inline-size:0}et-select .et-select-value[data-placeholder]{color:color-mix(in srgb,currentColor 46%,transparent)}et-select[data-mixed] .et-select-value,et-select[data-mixed] input[etselectsearch]:not(:focus){font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-select .et-select-value-custom{display:flex;align-items:center;flex:1;min-inline-size:0}et-select .et-select-trigger-content:has(input[etselectsearch]) .et-select-value-custom{flex:0 1 auto}et-select .et-select-trigger-content:has(.et-select-value-custom) input[etselectsearch]::placeholder{color:transparent}et-select .et-select-chips{display:contents}et-select .et-select-trigger-spinner{flex:none;color:var(--et-surface-color-muted-solid, currentColor)}et-select .et-select-clear{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-arrow-size);block-size:var(--et-select-arrow-size);color:var(--et-surface-color-muted-solid, currentColor);border:none;background:transparent;padding:0;margin:0;cursor:pointer;appearance:none}@media(hover:hover){et-select .et-select-clear:hover{color:var(--et-surface-color-solid, currentColor)}}et-select .et-select-clear .et-icon{inline-size:calc(var(--et-select-arrow-size) - 4px);block-size:calc(var(--et-select-arrow-size) - 4px)}et-select .et-select-clear.et-select-clear--enter{animation:et-select-clear-in .15s ease}et-select .et-select-clear.et-select-clear--leave{animation:et-select-clear-out .12s ease forwards}@media(prefers-reduced-motion:reduce){et-select .et-select-clear.et-select-clear--enter,et-select .et-select-clear.et-select-clear--leave{animation:none}}et-select .et-select-arrow{display:flex;align-items:center;justify-content:center;flex:none;inline-size:var(--et-select-arrow-size);block-size:var(--et-select-arrow-size);color:var(--et-surface-color-muted-solid, currentColor);border:none;background:transparent;padding:0;margin:0;cursor:pointer;appearance:none}et-select .et-select-arrow .et-icon{inline-size:100%;block-size:100%;rotate:180deg}@keyframes et-select-clear-in{0%{opacity:0}}@keyframes et-select-clear-out{to{opacity:0}}}\n"] }]
|
|
22958
22960
|
}], ctorParameters: () => [], propDecorators: { loadMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadMoreLabel", required: false }] }], addNewLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "addNewLabel", required: false }] }], createLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "createLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
22959
22961
|
|
|
22960
22962
|
const SELECT_IMPORTS = [
|
|
@@ -23036,7 +23038,7 @@ class PhoneInputComponent {
|
|
|
23036
23038
|
}
|
|
23037
23039
|
}
|
|
23038
23040
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PhoneInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
23039
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PhoneInputComponent, isStandalone: true, selector: "et-phone-input", inputs: { countryLabel: { classPropertyName: "countryLabel", publicName: "countryLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-phone-input" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: PhoneInputDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "mixedLabel", "mixedLabel", "defaultCountry", "defaultCountry", "preferredCountries", "preferredCountries"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<!-- headless select composition: compact flag trigger, searchable country panel -->\n<div\n [
|
|
23041
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PhoneInputComponent, isStandalone: true, selector: "et-phone-input", inputs: { countryLabel: { classPropertyName: "countryLabel", publicName: "countryLabel", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, clearLabel: { classPropertyName: "clearLabel", publicName: "clearLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "et-phone-input" }, providers: [provideIcons(TIMES_ICON)], hostDirectives: [{ directive: PhoneInputDirective, inputs: ["value", "value", "mixed", "mixed", "touched", "touched", "disabled", "disabled", "readonly", "readonly", "invalid", "invalid", "errors", "errors", "required", "required", "name", "name", "placeholder", "placeholder", "mixedLabel", "mixedLabel", "defaultCountry", "defaultCountry", "preferredCountries", "preferredCountries"], outputs: ["valueChange", "valueChange", "mixedChange", "mixedChange", "touchedChange", "touchedChange"] }, { directive: i1.ColorInteractiveDirective }], ngImport: i0, template: "<!-- headless select composition: compact flag trigger, searchable country panel -->\n<div\n [value]=\"phone.country()\"\n (valueChange)=\"handleCountryChange($event)\"\n class=\"et-phone-input-country\"\n mirrorPanelWidth=\"false\"\n etSelect\n>\n <button\n [attr.aria-label]=\"countryLabel()\"\n [disabled]=\"phone.disabled()\"\n class=\"et-phone-input-country-trigger\"\n etSelectTrigger\n type=\"button\"\n >\n <span class=\"et-phone-input-country-flag\" aria-hidden=\"true\">\n @if (phone.registeredFlagTemplate(); as flagTemplate) {\n <ng-template [ngTemplateOutlet]=\"flagTemplate.templateRef\" [ngTemplateOutletContext]=\"activeFlagContext()\" />\n } @else {\n {{ activeFlag() }}\n }\n </span>\n <span class=\"et-phone-input-dial-code\">+{{ phone.dialCode() }}</span>\n </button>\n\n <ng-template etSelectSurface let-select>\n <et-select-panel class=\"et-phone-input-country-panel\">\n <div class=\"et-phone-input-country-search\">\n <input etSelectSearch placeholder=\"Search countries\" />\n </div>\n\n <!-- the label carries the dial code too, so searching by \"+49\" / \"49\" works -->\n @for (country of countries(); track country.iso2) {\n <et-select-option [label]=\"country.name + ' +' + country.dialCode\" [value]=\"country.iso2\">\n <span class=\"et-phone-input-option-flag\" aria-hidden=\"true\">\n @if (phone.registeredFlagTemplate(); as flagTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"flagTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: country }\"\n />\n } @else {\n {{ country.flag }}\n }\n </span>\n <span class=\"et-phone-input-option-name\">{{ country.name }}</span>\n <span class=\"et-phone-input-option-dial\">+{{ country.dialCode }}</span>\n </et-select-option>\n }\n\n @if (!select.visibleItems().length) {\n <div class=\"et-select-state et-select-state--empty\">No countries found</div>\n }\n </et-select-panel>\n </ng-template>\n</div>\n\n<input class=\"et-phone-input-field\" etPhoneInputField />\n\n@if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\n mousedown is prevented so the field keeps focus (its blur would unmount this\n button before the click could land) -->\n <button\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-phone-input-clear\"\n animate.enter=\"et-phone-input-clear--enter\"\n animate.leave=\"et-phone-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n}\n", styles: ["@layer components{et-phone-input{display:flex;align-items:center;gap:8px;flex:1;min-inline-size:0;color:inherit}et-phone-input .et-phone-input-country-trigger{display:flex;align-items:center;gap:4px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;margin:0;cursor:pointer;appearance:none;white-space:nowrap}et-phone-input .et-phone-input-country-trigger:disabled{cursor:not-allowed}et-phone-input .et-phone-input-country-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px;border-radius:4px}et-phone-input .et-phone-input-country-flag{display:inline-flex;align-items:center}et-phone-input .et-phone-input-dial-code{color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums}et-phone-input .et-phone-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-phone-input .et-phone-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-phone-input .et-phone-input-field:disabled{cursor:not-allowed}et-phone-input[data-mixed] .et-phone-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-phone-input .et-phone-input-clear{display:inline-flex;align-items:center;justify-content:center;flex:none;border:none;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);padding:0;margin:0;cursor:pointer;appearance:none}et-phone-input .et-phone-input-clear .et-icon{inline-size:16px;block-size:16px}@media(hover:hover){et-phone-input .et-phone-input-clear:hover{color:var(--et-surface-color-solid, currentColor)}}et-phone-input .et-phone-input-clear.et-phone-input-clear--enter{animation:et-phone-input-clear-in .15s ease}et-phone-input .et-phone-input-clear.et-phone-input-clear--leave{animation:et-phone-input-clear-out .12s ease forwards}@media(prefers-reduced-motion:reduce){et-phone-input .et-phone-input-clear.et-phone-input-clear--enter,et-phone-input .et-phone-input-clear.et-phone-input-clear--leave{animation:none}}.et-phone-input-country-panel{inline-size:min(320px,calc(100vw - 24px))}.et-phone-input-country-search{position:sticky;inset-block-start:calc(var(--et-select-panel-padding, 6px) * -1);margin-block-start:calc(var(--et-select-panel-padding, 6px) * -1);margin-inline:calc(var(--et-select-panel-padding, 6px) * -1);padding:var(--et-select-panel-padding, 6px);background:var(--et-surface-background-solid, rgb(32 32 32));z-index:1}.et-phone-input-country-search input[etselectsearch]{inline-size:100%;block-size:36px;box-sizing:border-box;padding-inline:10px;border-radius:6px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;caret-color:var(--et-theme-color-primary-solid, currentColor);transition:border-color .12s ease,background .12s ease}.et-phone-input-country-search input[etselectsearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-phone-input-country-search input[etselectsearch]::placeholder{color:var(--et-surface-color-muted-solid, rgb(255 255 255 / .55))}.et-phone-input-country-panel .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap, 8px);flex:1;min-inline-size:0}.et-phone-input-option-flag{flex:none;display:inline-flex;align-items:center;justify-content:center}.et-phone-input-option-name{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-phone-input-option-dial{flex:none;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums}.et-phone-input-country-flag :is(img,svg),.et-phone-input-option-flag :is(img,svg){display:block;inline-size:20px;block-size:auto}@keyframes et-phone-input-clear-in{0%{opacity:0}}@keyframes et-phone-input-clear-out{to{opacity:0}}}\n"], dependencies: [{ kind: "component", type: SelectOptionComponent, selector: "et-select-option" }, { kind: "component", type: SelectPanelComponent, selector: "et-select-panel" }, { kind: "directive", type: SelectDirective, selector: "[etSelect]", inputs: ["value", "mixed", "touched", "open", "multiple", "disabled", "readonly", "invalid", "errors", "required", "name", "placeholder", "mixedLabel", "options", "filterMode", "allowCustomValues", "customValueSeparators", "normalizeCustomValue", "commitCustomValueOnClose", "maxSelection", "allowAddNew", "loading", "error", "hasMoreItems", "mirrorPanelWidth", "pickOnly"], outputs: ["valueChange", "mixedChange", "touchedChange", "openChange", "queryChange", "loadMore", "addNew", "pickOption"], exportAs: ["etSelect"] }, { kind: "directive", type: SelectTriggerDirective, selector: "[etSelectTrigger]", exportAs: ["etSelectTrigger"] }, { kind: "directive", type: SelectSurfaceDirective, selector: "ng-template[etSelectSurface]", exportAs: ["etSelectSurface"] }, { kind: "directive", type: SelectSearchDirective, selector: "input[etSelectSearch]", inputs: ["query"], outputs: ["queryChange"], exportAs: ["etSelectSearch"] }, { kind: "directive", type: PhoneInputFieldDirective, selector: "input[etPhoneInputField]", exportAs: ["etPhoneInputField"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: IconDirective, selector: "[etIcon]", inputs: ["etIcon", "variant", "allowHardcodedColor"] }], viewProviders: [{ provide: FORM_FIELD_TOKEN, useValue: null }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
23040
23042
|
}
|
|
23041
23043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PhoneInputComponent, decorators: [{
|
|
23042
23044
|
type: Component,
|
|
@@ -23063,7 +23065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
23063
23065
|
ColorInteractiveDirective,
|
|
23064
23066
|
], host: {
|
|
23065
23067
|
class: 'et-phone-input',
|
|
23066
|
-
}, template: "<!-- headless select composition: compact flag trigger, searchable country panel -->\n<div\n [
|
|
23068
|
+
}, template: "<!-- headless select composition: compact flag trigger, searchable country panel -->\n<div\n [value]=\"phone.country()\"\n (valueChange)=\"handleCountryChange($event)\"\n class=\"et-phone-input-country\"\n mirrorPanelWidth=\"false\"\n etSelect\n>\n <button\n [attr.aria-label]=\"countryLabel()\"\n [disabled]=\"phone.disabled()\"\n class=\"et-phone-input-country-trigger\"\n etSelectTrigger\n type=\"button\"\n >\n <span class=\"et-phone-input-country-flag\" aria-hidden=\"true\">\n @if (phone.registeredFlagTemplate(); as flagTemplate) {\n <ng-template [ngTemplateOutlet]=\"flagTemplate.templateRef\" [ngTemplateOutletContext]=\"activeFlagContext()\" />\n } @else {\n {{ activeFlag() }}\n }\n </span>\n <span class=\"et-phone-input-dial-code\">+{{ phone.dialCode() }}</span>\n </button>\n\n <ng-template etSelectSurface let-select>\n <et-select-panel class=\"et-phone-input-country-panel\">\n <div class=\"et-phone-input-country-search\">\n <input etSelectSearch placeholder=\"Search countries\" />\n </div>\n\n <!-- the label carries the dial code too, so searching by \"+49\" / \"49\" works -->\n @for (country of countries(); track country.iso2) {\n <et-select-option [label]=\"country.name + ' +' + country.dialCode\" [value]=\"country.iso2\">\n <span class=\"et-phone-input-option-flag\" aria-hidden=\"true\">\n @if (phone.registeredFlagTemplate(); as flagTemplate) {\n <ng-template\n [ngTemplateOutlet]=\"flagTemplate.templateRef\"\n [ngTemplateOutletContext]=\"{ $implicit: country }\"\n />\n } @else {\n {{ country.flag }}\n }\n </span>\n <span class=\"et-phone-input-option-name\">{{ country.name }}</span>\n <span class=\"et-phone-input-option-dial\">+{{ country.dialCode }}</span>\n </et-select-option>\n }\n\n @if (!select.visibleItems().length) {\n <div class=\"et-select-state et-select-state--empty\">No countries found</div>\n }\n </et-select-panel>\n </ng-template>\n</div>\n\n<input class=\"et-phone-input-field\" etPhoneInputField />\n\n@if (showClear()) {\n <!-- pointer-only, out of the tab order \u2014 keyboard users clear by erasing the text.\n mousedown is prevented so the field keeps focus (its blur would unmount this\n button before the click could land) -->\n <button\n [attr.aria-label]=\"clearLabel()\"\n (click)=\"handleClearClick($event)\"\n (mousedown)=\"$event.preventDefault()\"\n class=\"et-phone-input-clear\"\n animate.enter=\"et-phone-input-clear--enter\"\n animate.leave=\"et-phone-input-clear--leave\"\n tabindex=\"-1\"\n type=\"button\"\n >\n <i etIcon=\"et-times\"></i>\n </button>\n}\n", styles: ["@layer components{et-phone-input{display:flex;align-items:center;gap:8px;flex:1;min-inline-size:0;color:inherit}et-phone-input .et-phone-input-country-trigger{display:flex;align-items:center;gap:4px;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;margin:0;cursor:pointer;appearance:none;white-space:nowrap}et-phone-input .et-phone-input-country-trigger:disabled{cursor:not-allowed}et-phone-input .et-phone-input-country-trigger:focus-visible{outline:2px solid var(--et-theme-color-primary-solid, currentColor);outline-offset:2px;border-radius:4px}et-phone-input .et-phone-input-country-flag{display:inline-flex;align-items:center}et-phone-input .et-phone-input-dial-code{color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums}et-phone-input .et-phone-input-field{flex:1;min-inline-size:0;border:none;outline:none;background:transparent;font:inherit;color:inherit;padding:0;caret-color:var(--et-theme-color-primary-solid, currentColor);font-variant-numeric:tabular-nums}et-phone-input .et-phone-input-field::placeholder{color:color-mix(in srgb,currentColor 46%,transparent)}et-phone-input .et-phone-input-field:disabled{cursor:not-allowed}et-phone-input[data-mixed] .et-phone-input-field::placeholder{font-style:italic;color:color-mix(in srgb,currentColor 72%,transparent)}et-phone-input .et-phone-input-clear{display:inline-flex;align-items:center;justify-content:center;flex:none;border:none;background:transparent;color:var(--et-surface-color-muted-solid, currentColor);padding:0;margin:0;cursor:pointer;appearance:none}et-phone-input .et-phone-input-clear .et-icon{inline-size:16px;block-size:16px}@media(hover:hover){et-phone-input .et-phone-input-clear:hover{color:var(--et-surface-color-solid, currentColor)}}et-phone-input .et-phone-input-clear.et-phone-input-clear--enter{animation:et-phone-input-clear-in .15s ease}et-phone-input .et-phone-input-clear.et-phone-input-clear--leave{animation:et-phone-input-clear-out .12s ease forwards}@media(prefers-reduced-motion:reduce){et-phone-input .et-phone-input-clear.et-phone-input-clear--enter,et-phone-input .et-phone-input-clear.et-phone-input-clear--leave{animation:none}}.et-phone-input-country-panel{inline-size:min(320px,calc(100vw - 24px))}.et-phone-input-country-search{position:sticky;inset-block-start:calc(var(--et-select-panel-padding, 6px) * -1);margin-block-start:calc(var(--et-select-panel-padding, 6px) * -1);margin-inline:calc(var(--et-select-panel-padding, 6px) * -1);padding:var(--et-select-panel-padding, 6px);background:var(--et-surface-background-solid, rgb(32 32 32));z-index:1}.et-phone-input-country-search input[etselectsearch]{inline-size:100%;block-size:36px;box-sizing:border-box;padding-inline:10px;border-radius:6px;border:1px solid var(--et-surface-border-solid, rgb(255 255 255 / .1));background:color-mix(in srgb,var(--et-surface-interaction-solid, rgb(255 255 255)) 6%,transparent);color:inherit;font:inherit;outline:none;caret-color:var(--et-theme-color-primary-solid, currentColor);transition:border-color .12s ease,background .12s ease}.et-phone-input-country-search input[etselectsearch]:focus-visible{border-color:var(--et-theme-color-primary-solid, rgb(255 255 255 / .3))}.et-phone-input-country-search input[etselectsearch]::placeholder{color:var(--et-surface-color-muted-solid, rgb(255 255 255 / .55))}.et-phone-input-country-panel .et-select-option-label{display:flex;align-items:center;gap:var(--et-select-option-gap, 8px);flex:1;min-inline-size:0}.et-phone-input-option-flag{flex:none;display:inline-flex;align-items:center;justify-content:center}.et-phone-input-option-name{flex:1;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.et-phone-input-option-dial{flex:none;color:var(--et-surface-color-muted-solid, currentColor);font-variant-numeric:tabular-nums}.et-phone-input-country-flag :is(img,svg),.et-phone-input-option-flag :is(img,svg){display:block;inline-size:20px;block-size:auto}@keyframes et-phone-input-clear-in{0%{opacity:0}}@keyframes et-phone-input-clear-out{to{opacity:0}}}\n"] }]
|
|
23067
23069
|
}], propDecorators: { countryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryLabel", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], clearLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearLabel", required: false }] }] } });
|
|
23068
23070
|
|
|
23069
23071
|
const PHONE_INPUT_IMPORTS = [
|
|
@@ -24343,8 +24345,7 @@ class SwitchDirective {
|
|
|
24343
24345
|
...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
|
|
24344
24346
|
this.touched = model(false, /* @ts-ignore */
|
|
24345
24347
|
...(ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []));
|
|
24346
|
-
this.disabled = input(false, /*
|
|
24347
|
-
...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
24348
|
+
this.disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
24348
24349
|
/** View-only: keeps the normal look and focusability but blocks toggling (unlike `disabled`). */
|
|
24349
24350
|
this.readonly = input(false, /* @ts-ignore */
|
|
24350
24351
|
...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
|
|
@@ -26709,6 +26710,10 @@ class GridResizeDirective {
|
|
|
26709
26710
|
this.detachGestureListeners();
|
|
26710
26711
|
}
|
|
26711
26712
|
attachGestureListeners() {
|
|
26713
|
+
// Captures scroll on any ancestor during an active drag-resize gesture to recompute the
|
|
26714
|
+
// container origin — this is document-wide gesture tracking, not a component scroll container,
|
|
26715
|
+
// so signalElementScrollState / signalHostElementScrollState don't apply.
|
|
26716
|
+
// eslint-disable-next-line ethlete/prefer-scroll-state
|
|
26712
26717
|
const scroll$ = fromEvent(this.document, 'scroll', { capture: true, passive: true }).pipe(tap(() => {
|
|
26713
26718
|
if (!this.start)
|
|
26714
26719
|
return;
|
|
@@ -29402,6 +29407,7 @@ class OverlayRouteHeaderTemplateOutletComponent {
|
|
|
29402
29407
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: OverlayRouteHeaderTemplateOutletComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
29403
29408
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", type: OverlayRouteHeaderTemplateOutletComponent, isStandalone: true, selector: "et-overlay-route-header-template-outlet", host: { properties: { "class.et-overlay-router-outlet-nav-dir--backward": "router.navigationDirection() === 'backward'", "class.et-overlay-router-outlet-nav-dir--forward": "router.navigationDirection() === 'forward'" }, classAttribute: "et-overlay-route-header-template-outlet-host" }, viewQueries: [{ propertyName: "animatedLifecycle", first: true, predicate: ANIMATED_LIFECYCLE_TOKEN, descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
29404
29409
|
<div class="et-overlay-route-header-template-outlet">
|
|
29410
|
+
<!-- eslint-disable-next-line ethlete/prefer-static-boolean-properties -- skipNextEnter is a two-way model() on the core AnimatedLifecycle directive; no booleanAttribute transform applies -->
|
|
29405
29411
|
<div [skipNextEnter]="true" class="et-overlay-route-header-template-outlet-item" etAnimatedLifecycle>
|
|
29406
29412
|
<ng-container *etAnimatedIf="overlay.headerTemplate()">
|
|
29407
29413
|
<ng-container *ngTemplateOutlet="overlay.headerTemplate()" />
|
|
@@ -29414,6 +29420,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
29414
29420
|
type: Component,
|
|
29415
29421
|
args: [{ selector: 'et-overlay-route-header-template-outlet', template: `
|
|
29416
29422
|
<div class="et-overlay-route-header-template-outlet">
|
|
29423
|
+
<!-- eslint-disable-next-line ethlete/prefer-static-boolean-properties -- skipNextEnter is a two-way model() on the core AnimatedLifecycle directive; no booleanAttribute transform applies -->
|
|
29417
29424
|
<div [skipNextEnter]="true" class="et-overlay-route-header-template-outlet-item" etAnimatedLifecycle>
|
|
29418
29425
|
<ng-container *etAnimatedIf="overlay.headerTemplate()">
|
|
29419
29426
|
<ng-container *ngTemplateOutlet="overlay.headerTemplate()" />
|
|
@@ -30505,8 +30512,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
30505
30512
|
class ScrollableComponent {
|
|
30506
30513
|
constructor() {
|
|
30507
30514
|
this.scrollableDir = inject(ScrollableDirective);
|
|
30508
|
-
this.renderMasks = input(true, /*
|
|
30509
|
-
...(ngDevMode ? [{ debugName: "renderMasks" }] : /* istanbul ignore next */ []));
|
|
30515
|
+
this.renderMasks = input(true, { ...(ngDevMode ? { debugName: "renderMasks" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
|
|
30510
30516
|
this.maskVariant = input('gradient', /* @ts-ignore */
|
|
30511
30517
|
...(ngDevMode ? [{ debugName: "maskVariant" }] : /* istanbul ignore next */ []));
|
|
30512
30518
|
this.renderButtons = input(true, /* @ts-ignore */
|
|
@@ -35539,8 +35545,8 @@ class NavTabsComponent {
|
|
|
35539
35545
|
<et-scrollable
|
|
35540
35546
|
[direction]="tabBar.orientation()"
|
|
35541
35547
|
[itemSize]="tabBar.fit() === 'fill' ? 'same' : 'auto'"
|
|
35542
|
-
[renderMasks]="false"
|
|
35543
35548
|
class="et-nav-tabs__scrollable"
|
|
35549
|
+
renderMasks="false"
|
|
35544
35550
|
buttonPosition="inside"
|
|
35545
35551
|
scrollMode="element"
|
|
35546
35552
|
scrollOrigin="center"
|
|
@@ -35556,8 +35562,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
35556
35562
|
<et-scrollable
|
|
35557
35563
|
[direction]="tabBar.orientation()"
|
|
35558
35564
|
[itemSize]="tabBar.fit() === 'fill' ? 'same' : 'auto'"
|
|
35559
|
-
[renderMasks]="false"
|
|
35560
35565
|
class="et-nav-tabs__scrollable"
|
|
35566
|
+
renderMasks="false"
|
|
35561
35567
|
buttonPosition="inside"
|
|
35562
35568
|
scrollMode="element"
|
|
35563
35569
|
scrollOrigin="center"
|
|
@@ -35927,8 +35933,8 @@ class TabGroupComponent {
|
|
|
35927
35933
|
<et-scrollable
|
|
35928
35934
|
[direction]="tabGroup.tabBar.orientation()"
|
|
35929
35935
|
[itemSize]="tabGroup.tabBar.fit() === 'fill' ? 'same' : 'auto'"
|
|
35930
|
-
[renderMasks]="false"
|
|
35931
35936
|
class="et-tab-group__header-scrollable"
|
|
35937
|
+
renderMasks="false"
|
|
35932
35938
|
buttonPosition="inside"
|
|
35933
35939
|
scrollMode="element"
|
|
35934
35940
|
scrollOrigin="center"
|
|
@@ -35984,8 +35990,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
35984
35990
|
<et-scrollable
|
|
35985
35991
|
[direction]="tabGroup.tabBar.orientation()"
|
|
35986
35992
|
[itemSize]="tabGroup.tabBar.fit() === 'fill' ? 'same' : 'auto'"
|
|
35987
|
-
[renderMasks]="false"
|
|
35988
35993
|
class="et-tab-group__header-scrollable"
|
|
35994
|
+
renderMasks="false"
|
|
35989
35995
|
buttonPosition="inside"
|
|
35990
35996
|
scrollMode="element"
|
|
35991
35997
|
scrollOrigin="center"
|