@eagami/ui 5.65.0 → 5.66.0

package/fesm2022/eagami-ui.mjs

@@ -1,7 +1,7 @@
 import * as i0 from "@angular/core";
 import { ApplicationRef, CSP_NONCE, ChangeDetectionStrategy, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostAttributeToken, HostBinding, HostListener, Injectable, InjectionToken, Injector, PLATFORM_ID, Renderer2, RendererStyleFlags2, TemplateRef, ViewContainerRef, ViewEncapsulation, afterNextRender, afterRenderEffect, computed, contentChild, createComponent, effect, forwardRef, inject, input, linkedSignal, makeEnvironmentProviders, model, output, provideEnvironmentInitializer, signal, untracked, viewChild, viewChildren } from "@angular/core";
 import { NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from "@angular/common";
-import { NG_VALUE_ACCESSOR, NgControl, TouchedChangeEvent } from "@angular/forms";
+import { FormSubmittedEvent, NG_VALUE_ACCESSOR, NgControl, TouchedChangeEvent } from "@angular/forms";
 const EAGAMI_I18N_CONFIG = new InjectionToken("EAGAMI_I18N_CONFIG");
 const STYLE_TAG_ID = "eagami-palette";
 function applyPalette(palette, nonce) {
@@ -5426,32 +5426,73 @@ i0.ɵɵngDeclareClassMetadata({
 function controlErrorStateFrom(control, config) {
 	const i18n = inject(EagamiI18nService);
 	const press = inject(PointerPressTracker);
+	const injector = inject(Injector);
+	const destroyRef = inject(DestroyRef);
+	const host = inject(ElementRef, { optional: true });
 	const revision = signal(0, ...ngDevMode ? [{ debugName: "revision" }] : /* istanbul ignore next */ []);
+	const editing = signal(false, ...ngDevMode ? [{ debugName: "editing" }] : /* istanbul ignore next */ []);
+	const revealedBySubmit = signal(false, ...ngDevMode ? [{ debugName: "revealedBySubmit" }] : /* istanbul ignore next */ []);
 	const revealPending = signal(false, ...ngDevMode ? [{ debugName: "revealPending" }] : /* istanbul ignore next */ []);
+	let dropPendingReveal = null;
+	const holdRevealForPress = () => {
+		dropPendingReveal?.();
+		revealPending.set(true);
+		dropPendingReveal = press.whenPressEnds(() => revealPending.set(false));
+	};
+	destroyRef.onDestroy(() => dropPendingReveal?.());
 	effect((onCleanup) => {
 		const ctrl = control();
 		if (!ctrl) return;
-		let dropPendingReveal = null;
+		const onSubmit = () => revealedBySubmit.set(true);
 		const sub = ctrl.events.subscribe((event) => {
-			if (event instanceof TouchedChangeEvent && event.touched) {
-				dropPendingReveal?.();
-				revealPending.set(true);
-				dropPendingReveal = press.whenPressEnds(() => revealPending.set(false));
-			}
+			if (event instanceof TouchedChangeEvent && event.touched) holdRevealForPress();
+			if (event instanceof FormSubmittedEvent) onSubmit();
 			revision.update((r) => r + 1);
 		});
+		const rootSub = ctrl.root === ctrl ? null : ctrl.root.events.subscribe((event) => {
+			if (event instanceof FormSubmittedEvent) onSubmit();
+		});
 		onCleanup(() => {
 			sub.unsubscribe();
+			rootSub?.unsubscribe();
 			dropPendingReveal?.();
 			revealPending.set(false);
 		});
 	});
-	const autoError = computed(() => {
+	if (host) afterNextRender(() => {
+		const element = host.nativeElement;
+		const onFocusIn = () => {
+			editing.set(true);
+			revealedBySubmit.set(false);
+		};
+		const onFocusOut = (event) => {
+			if (event.relatedTarget instanceof Node && element.contains(event.relatedTarget)) return;
+			editing.set(false);
+			revealedBySubmit.set(false);
+			holdRevealForPress();
+		};
+		editing.set(element.contains(document.activeElement));
+		element.addEventListener("focusin", onFocusIn);
+		element.addEventListener("focusout", onFocusOut);
+		destroyRef.onDestroy(() => {
+			element.removeEventListener("focusin", onFocusIn);
+			element.removeEventListener("focusout", onFocusOut);
+		});
+	}, { injector });
+	const validationError = computed(() => {
 		revision();
 		const ctrl = control();
-		if (revealPending() || !ctrl || !ctrl.invalid || !ctrl.touched || !ctrl.errors) return null;
+		if (!ctrl || !ctrl.invalid || !ctrl.touched || !ctrl.errors) return null;
 		return resolveValidationMessage(ctrl.errors, config.errorMessages(), i18n.messages());
-	}, ...ngDevMode ? [{ debugName: "autoError" }] : /* istanbul ignore next */ []);
+	}, ...ngDevMode ? [{ debugName: "validationError" }] : /* istanbul ignore next */ []);
+	const autoError = linkedSignal({
+		...ngDevMode ? { debugName: "autoError" } : /* istanbul ignore next */ {},
+		source: () => ({
+			message: validationError(),
+			holding: revealPending() || editing() && !revealedBySubmit()
+		}),
+		computation: ({ message, holding }, previous) => previous?.value || !holding ? message : null
+	});
 	const error = computed(() => config.errorMsg() || autoError(), ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
 	return {
 		error,
@@ -5471,7 +5512,7 @@ function injectControlErrorState(config) {
 	return controlErrorStateFrom(control, config);
 }
 function resolveValidationMessage(errors, overrides, messages) {
-	const key = Object.keys(errors)[0];
+	const key = Object.keys(errors).find((name) => overrides?.[name] !== null);
 	if (!key) return null;
 	const override = overrides?.[key];
 	if (override) return override;
@@ -32122,6 +32163,7 @@ i0.ɵɵngDeclareClassMetadata({
 var ToggleChipComponent = class ToggleChipComponent {
 	selected = model(false, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
 	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
 	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
 	ariaLabel = input(void 0, {
 		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
@@ -32151,7 +32193,7 @@ var ToggleChipComponent = class ToggleChipComponent {
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.1.0",
+		minVersion: "17.0.0",
 		version: "22.2.1",
 		type: ToggleChipComponent,
 		isStandalone: true,
@@ -32171,6 +32213,13 @@ var ToggleChipComponent = class ToggleChipComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			disabled: {
 				classPropertyName: "disabled",
 				publicName: "disabled",
@@ -32198,12 +32247,25 @@ var ToggleChipComponent = class ToggleChipComponent {
 			changed: "changed"
 		},
 		ngImport: i0,
-		template: "<button\n  type=\"button\"\n  class=\"ea-toggle-chip\"\n  [class]=\"classes()\"\n  [attr.aria-pressed]=\"selected()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-describedby]=\"ariaDescribedby() ?? null\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\">\n  <span class=\"ea-toggle-chip__content\">\n    <ng-content />\n  </span>\n  <ea-icon-check\n    class=\"ea-toggle-chip__check\"\n    aria-hidden=\"true\" />\n</button>\n",
-		styles: [":host{display:inline-flex;min-width:0}.ea-toggle-chip{display:inline-flex;align-items:center;gap:.375em;min-height:2.25em;padding:.25em .625em .25em .875em;font:inherit;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;transition:var(--transition-colors)}.ea-toggle-chip:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-toggle-chip:active:not(:disabled){background-color:var(--color-state-active)}.ea-toggle-chip:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-toggle-chip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toggle-chip:disabled{opacity:.5;cursor:default}.ea-toggle-chip--2xs{font-size:var(--font-size-2xs)}.ea-toggle-chip--xs{font-size:var(--font-size-xs)}.ea-toggle-chip--sm{font-size:var(--font-size-sm)}.ea-toggle-chip--md{font-size:var(--font-size-md)}.ea-toggle-chip--lg{font-size:var(--font-size-lg)}.ea-toggle-chip--xl{font-size:var(--font-size-xl)}.ea-toggle-chip--selected{border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-toggle-chip--selected:hover:not(:disabled){background-color:var(--color-brand-muted)}.ea-toggle-chip__content{display:inline-flex;align-items:center;gap:.375em;min-width:0}.ea-toggle-chip__check{opacity:0;flex-shrink:0;transition:var(--transition-opacity),var(--transition-transform);transform:scale(.6)}.ea-toggle-chip--selected .ea-toggle-chip__check{opacity:1;transform:none}\n"],
+		template: "<button\n  type=\"button\"\n  class=\"ea-toggle-chip\"\n  [class]=\"classes()\"\n  [attr.aria-pressed]=\"selected()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-describedby]=\"ariaDescribedby() ?? null\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\">\n  <span class=\"ea-toggle-chip__content\">\n    @if (icon(); as iconComponent) {\n      <span\n        class=\"ea-toggle-chip__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconComponent\" />\n      </span>\n    }\n    <ng-content />\n  </span>\n  <ea-icon-check\n    class=\"ea-toggle-chip__check\"\n    aria-hidden=\"true\" />\n</button>\n",
+		styles: [":host{display:inline-flex;min-width:0}.ea-toggle-chip{display:inline-flex;align-items:center;gap:.375em;min-height:2.25em;padding:.25em .625em .25em .875em;font:inherit;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;transition:var(--transition-colors)}.ea-toggle-chip:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-toggle-chip:active:not(:disabled){background-color:var(--color-state-active)}.ea-toggle-chip:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-toggle-chip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toggle-chip:disabled{opacity:.5;cursor:default}.ea-toggle-chip--2xs{font-size:var(--font-size-2xs)}.ea-toggle-chip--xs{font-size:var(--font-size-xs)}.ea-toggle-chip--sm{font-size:var(--font-size-sm)}.ea-toggle-chip--md{font-size:var(--font-size-md)}.ea-toggle-chip--lg{font-size:var(--font-size-lg)}.ea-toggle-chip--xl{font-size:var(--font-size-xl)}.ea-toggle-chip--selected{border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-toggle-chip--selected:hover:not(:disabled){background-color:var(--color-brand-muted)}.ea-toggle-chip__icon{display:inline-flex;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-toggle-chip__content{display:inline-flex;align-items:center;gap:.375em;min-width:0}.ea-toggle-chip__check{opacity:0;flex-shrink:0;transition:var(--transition-opacity),var(--transition-transform);transform:scale(.6)}.ea-toggle-chip--selected .ea-toggle-chip__check{opacity:1;transform:none}\n"],
 		dependencies: [{
 			kind: "component",
 			type: CheckIconComponent,
 			selector: "ea-icon-check"
+		}, {
+			kind: "directive",
+			type: NgComponentOutlet,
+			selector: "[ngComponentOutlet]",
+			inputs: [
+				"ngComponentOutlet",
+				"ngComponentOutletInputs",
+				"ngComponentOutletInjector",
+				"ngComponentOutletEnvironmentInjector",
+				"ngComponentOutletContent",
+				"ngComponentOutletNgModule"
+			],
+			exportAs: ["ngComponentOutlet"]
 		}],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
@@ -32217,10 +32279,10 @@ i0.ɵɵngDeclareClassMetadata({
 		type: Component,
 		args: [{
 			selector: "ea-toggle-chip",
-			imports: [CheckIconComponent],
+			imports: [CheckIconComponent, NgComponentOutlet],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<button\n  type=\"button\"\n  class=\"ea-toggle-chip\"\n  [class]=\"classes()\"\n  [attr.aria-pressed]=\"selected()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-describedby]=\"ariaDescribedby() ?? null\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\">\n  <span class=\"ea-toggle-chip__content\">\n    <ng-content />\n  </span>\n  <ea-icon-check\n    class=\"ea-toggle-chip__check\"\n    aria-hidden=\"true\" />\n</button>\n",
-			styles: [":host{display:inline-flex;min-width:0}.ea-toggle-chip{display:inline-flex;align-items:center;gap:.375em;min-height:2.25em;padding:.25em .625em .25em .875em;font:inherit;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;transition:var(--transition-colors)}.ea-toggle-chip:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-toggle-chip:active:not(:disabled){background-color:var(--color-state-active)}.ea-toggle-chip:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-toggle-chip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toggle-chip:disabled{opacity:.5;cursor:default}.ea-toggle-chip--2xs{font-size:var(--font-size-2xs)}.ea-toggle-chip--xs{font-size:var(--font-size-xs)}.ea-toggle-chip--sm{font-size:var(--font-size-sm)}.ea-toggle-chip--md{font-size:var(--font-size-md)}.ea-toggle-chip--lg{font-size:var(--font-size-lg)}.ea-toggle-chip--xl{font-size:var(--font-size-xl)}.ea-toggle-chip--selected{border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-toggle-chip--selected:hover:not(:disabled){background-color:var(--color-brand-muted)}.ea-toggle-chip__content{display:inline-flex;align-items:center;gap:.375em;min-width:0}.ea-toggle-chip__check{opacity:0;flex-shrink:0;transition:var(--transition-opacity),var(--transition-transform);transform:scale(.6)}.ea-toggle-chip--selected .ea-toggle-chip__check{opacity:1;transform:none}\n"]
+			template: "<button\n  type=\"button\"\n  class=\"ea-toggle-chip\"\n  [class]=\"classes()\"\n  [attr.aria-pressed]=\"selected()\"\n  [attr.aria-label]=\"ariaLabel() ?? null\"\n  [attr.aria-describedby]=\"ariaDescribedby() ?? null\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\">\n  <span class=\"ea-toggle-chip__content\">\n    @if (icon(); as iconComponent) {\n      <span\n        class=\"ea-toggle-chip__icon\"\n        aria-hidden=\"true\">\n        <ng-container *ngComponentOutlet=\"iconComponent\" />\n      </span>\n    }\n    <ng-content />\n  </span>\n  <ea-icon-check\n    class=\"ea-toggle-chip__check\"\n    aria-hidden=\"true\" />\n</button>\n",
+			styles: [":host{display:inline-flex;min-width:0}.ea-toggle-chip{display:inline-flex;align-items:center;gap:.375em;min-height:2.25em;padding:.25em .625em .25em .875em;font:inherit;font-weight:var(--font-weight-medium);line-height:var(--line-height-none);white-space:nowrap;font-family:var(--font-family-sans);border:var(--border-width-thin) solid var(--color-border-default);border-radius:var(--radius-full);background-color:var(--color-bg-base);color:var(--color-text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;appearance:none;transition:var(--transition-colors)}.ea-toggle-chip:hover:not(:disabled){background-color:var(--color-state-hover)}.ea-toggle-chip:active:not(:disabled){background-color:var(--color-state-active)}.ea-toggle-chip:focus-visible{outline:var(--border-width-medium) solid var(--color-border-focus);outline-offset:2px}@media(forced-colors:active){.ea-toggle-chip:focus-visible{outline:2px solid Highlight;outline-offset:2px}}.ea-toggle-chip:disabled{opacity:.5;cursor:default}.ea-toggle-chip--2xs{font-size:var(--font-size-2xs)}.ea-toggle-chip--xs{font-size:var(--font-size-xs)}.ea-toggle-chip--sm{font-size:var(--font-size-sm)}.ea-toggle-chip--md{font-size:var(--font-size-md)}.ea-toggle-chip--lg{font-size:var(--font-size-lg)}.ea-toggle-chip--xl{font-size:var(--font-size-xl)}.ea-toggle-chip--selected{border-color:var(--color-brand-default);background-color:var(--color-brand-subtle);color:var(--color-brand-text)}.ea-toggle-chip--selected:hover:not(:disabled){background-color:var(--color-brand-muted)}.ea-toggle-chip__icon{display:inline-flex;flex-shrink:0;font-size:var(--icon-inline-size)}.ea-toggle-chip__content{display:inline-flex;align-items:center;gap:.375em;min-width:0}.ea-toggle-chip__check{opacity:0;flex-shrink:0;transition:var(--transition-opacity),var(--transition-transform);transform:scale(.6)}.ea-toggle-chip--selected .ea-toggle-chip__check{opacity:1;transform:none}\n"]
 		}]
 	}],
 	propDecorators: {
@@ -32243,6 +32305,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
 		disabled: [{
 			type: i0.Input,
 			args: [{