@hyalo/angular 0.0.0-stage → 0.1.0

package/fesm2022/hyalo-angular-select.mjs

@@ -0,0 +1,464 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, effect, inject, input, model, output, signal, untracked, viewChild } from "@angular/core";
+import { Combobox, ComboboxPopup, ComboboxWidget } from "@angular/aria/combobox";
+import { Listbox, Option } from "@angular/aria/listbox";
+import { CdkConnectedOverlay, CdkOverlayOrigin } from "@angular/cdk/overlay";
+import { HyFidelity, injectId } from "@hyalo/angular";
+import { HyIcon } from "@hyalo/angular/icon";
+import { HY_FIELD } from "@hyalo/angular/field";
+import { hyDropdownPositions, ɵHyPresence } from "@hyalo/angular/overlay";
+var HySelect = class HySelect {
+	fidelity = inject(HyFidelity);
+	field = inject(HY_FIELD, { optional: true });
+	trigger = viewChild("trigger", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	overlay = viewChild(CdkConnectedOverlay, ...ngDevMode ? [{ debugName: "overlay" }] : /* istanbul ignore next */ []);
+	presence = new ɵHyPresence();
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	value = model(void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	placeholder = input("Select", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	errors = input([], ...ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []);
+	touched = input(false, {
+		...ngDevMode ? { debugName: "touched" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	native = input(false, {
+		...ngDevMode ? { debugName: "native" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touch = output();
+	labelable = true;
+	id = signal(injectId("select")).asReadonly();
+	errorMessage = computed(() => {
+		const first = this.errors()[0];
+		return first ? first.message ?? first.kind : void 0;
+	}, ...ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []);
+	expanded = signal(false, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	rendered = signal(false, ...ngDevMode ? [{ debugName: "rendered" }] : /* istanbul ignore next */ []);
+	positions = hyDropdownPositions();
+	panelWidth = signal(0, ...ngDevMode ? [{ debugName: "panelWidth" }] : /* istanbul ignore next */ []);
+	useNative = computed(() => this.native() || this.fidelity.tier() === "low", ...ngDevMode ? [{ debugName: "useNative" }] : /* istanbul ignore next */ []);
+	selectedOption = computed(() => this.options().find((o) => o.value === this.value()), ...ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []);
+	listValue = computed(() => {
+		const v = this.value();
+		return v === void 0 ? [] : [v];
+	}, ...ngDevMode ? [{ debugName: "listValue" }] : /* istanbul ignore next */ []);
+	showsError = computed(() => this.field ? this.field.errorShown() : this.invalid() && this.touched(), ...ngDevMode ? [{ debugName: "showsError" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			const open = this.expanded();
+			untracked(() => {
+				const panel = this.panelElement();
+				if (open) {
+					if (panel && this.presence.leaving) this.presence.enter(panel);
+					this.rendered.set(true);
+				} else if (panel) this.presence.leave(panel, () => this.rendered.set(false));
+				else this.rendered.set(false);
+			});
+		});
+		this.field?.register({
+			id: this.id,
+			invalid: computed(() => this.invalid() && this.touched()),
+			errorMessage: this.errorMessage,
+			required: this.required,
+			disabled: this.disabled,
+			labelable: true
+		});
+	}
+	setExpanded(open) {
+		if (open) this.panelWidth.set(this.trigger()?.nativeElement.offsetWidth ?? 0);
+		this.expanded.set(open);
+	}
+	onAttach() {
+		const panel = this.panelElement();
+		if (panel) this.presence.enter(panel);
+	}
+	panelElement() {
+		return this.overlay()?.overlayRef?.overlayElement.querySelector(".hy-select__panel") ?? null;
+	}
+	pick(values) {
+		const next = values[values.length - 1];
+		if (next === void 0 || next === this.value()) return;
+		this.value.set(next);
+		this.close();
+	}
+	onPanelClick(event) {
+		const option = event.target?.closest("[role=\"option\"]");
+		if (option && option.getAttribute("aria-disabled") !== "true") this.close();
+	}
+	close() {
+		this.expanded.set(false);
+		this.trigger()?.nativeElement.focus();
+	}
+	pickNative(event) {
+		const index = Number(event.target.value);
+		const option = this.options()[index];
+		if (option) this.value.set(option.value);
+	}
+	indexOf(value) {
+		return this.options().findIndex((o) => o.value === value);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySelect,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HySelect,
+		isStandalone: true,
+		selector: "hy-select",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				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
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			native: {
+				classPropertyName: "native",
+				publicName: "native",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			properties: { "attr.data-native": "useNative() || null" },
+			classAttribute: "hy-select"
+		},
+		viewQueries: [{
+			propertyName: "trigger",
+			first: true,
+			predicate: ["trigger"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "overlay",
+			first: true,
+			predicate: CdkConnectedOverlay,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "@if (useNative()) {\r\n  <select\r\n    class=\"hy-select__native\"\r\n    [id]=\"id()\"\r\n    [disabled]=\"disabled()\"\r\n    [required]=\"required()\"\r\n    [attr.aria-describedby]=\"field?.describedBy() ?? null\"\r\n    [attr.aria-invalid]=\"showsError() || null\"\r\n    (change)=\"pickNative($event)\"\r\n    (blur)=\"touch.emit()\"\r\n  >\r\n    @if (!selectedOption()) {\r\n      <option value=\"\" disabled selected>{{ placeholder() }}</option>\r\n    }\r\n    @for (option of options(); track $index) {\r\n      <option [value]=\"$index\" [selected]=\"option.value === value()\" [disabled]=\"!!option.disabled\">\r\n        {{ option.label }}\r\n      </option>\r\n    }\r\n  </select>\r\n  <hy-icon class=\"hy-select__chevron\" name=\"chevron-down\" />\r\n} @else {\r\n  <button\r\n    #trigger\r\n    type=\"button\"\r\n    ngCombobox\r\n    #combobox=\"ngCombobox\"\r\n    cdkOverlayOrigin\r\n    #origin=\"cdkOverlayOrigin\"\r\n    class=\"hy-select__trigger\"\r\n    [id]=\"id()\"\r\n    [disabled]=\"disabled()\"\r\n    [expanded]=\"expanded()\"\r\n    (expandedChange)=\"setExpanded($event)\"\r\n    [attr.aria-labelledby]=\"field ? field.labelId + ' ' + id() : null\"\r\n    [attr.aria-describedby]=\"field?.describedBy() ?? null\"\r\n    [attr.aria-invalid]=\"showsError() || null\"\r\n    [attr.aria-required]=\"required() || null\"\r\n    (blur)=\"touch.emit()\"\r\n  >\r\n    <span class=\"hy-select__value\" [class.hy-select__placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label ?? placeholder() }}\r\n    </span>\r\n    <hy-icon class=\"hy-select__chevron\" name=\"chevron-down\" />\r\n  </button>\r\n\r\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\r\n    <ng-template\r\n      cdkConnectedOverlay\r\n      [cdkConnectedOverlayOrigin]=\"origin\"\r\n      [cdkConnectedOverlayOpen]=\"rendered()\"\r\n      [cdkConnectedOverlayPositions]=\"positions\"\r\n      [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\r\n      cdkConnectedOverlayPanelClass=\"hy-select-overlay\"\r\n      cdkConnectedOverlayTransformOriginOn=\".hy-select__panel\"\r\n      (attach)=\"onAttach()\"\r\n      (overlayOutsideClick)=\"expanded.set(false)\"\r\n    >\r\n      <!-- Focus stays on the trigger; Aria relays keys here and manages tabindex. -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        ngComboboxWidget\r\n        ngListbox\r\n        #listbox=\"ngListbox\"\r\n        class=\"hy-select__panel hy-glass\"\r\n        data-material=\"frosted\"\r\n        focusMode=\"activedescendant\"\r\n        selectionMode=\"explicit\"\r\n        [activeDescendant]=\"listbox.activeDescendant()\"\r\n        [value]=\"listValue()\"\r\n        (valueChange)=\"pick($event)\"\r\n        (click)=\"onPanelClick($event)\"\r\n        (keydown.enter)=\"close()\"\r\n        (keydown.space)=\"close()\"\r\n      >\r\n        @for (option of options(); track $index) {\r\n          <div\r\n            ngOption\r\n            class=\"hy-select__option\"\r\n            [value]=\"option.value\"\r\n            [label]=\"option.label\"\r\n            [disabled]=\"!!option.disabled\"\r\n          >\r\n            <span>{{ option.label }}</span>\r\n            <hy-icon class=\"hy-select__check\" name=\"check\" />\r\n          </div>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n  </ng-template>\r\n}\r\n",
+		styles: [":host{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0;align-self:stretch}.hy-select__trigger,.hy-select__native{flex:1;min-inline-size:0;align-self:stretch;display:flex;align-items:center;gap:var(--hy-space-2);padding:0;padding-inline-end:1.75rem;border:0;background:transparent;color:var(--hy-ink);font:inherit;text-align:start;cursor:pointer;appearance:none}.hy-select__trigger:focus-visible,.hy-select__native:focus-visible{outline:none}.hy-select__trigger:disabled,.hy-select__native:disabled{cursor:not-allowed}.hy-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hy-select__placeholder{color:var(--hy-ink-3)}.hy-select__chevron{position:absolute;inset-inline-end:0;color:var(--hy-ink-3);pointer-events:none;transition:rotate var(--hy-dur-settle) var(--hy-ease-out)}.hy-select__trigger[aria-expanded=true] .hy-select__chevron{rotate:180deg}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: Combobox,
+				selector: "[ngCombobox]",
+				inputs: [
+					"disabled",
+					"readonly",
+					"softDisabled",
+					"alwaysExpanded",
+					"tabindex",
+					"expanded",
+					"value",
+					"inlineSuggestion"
+				],
+				outputs: ["expandedChange", "valueChange"],
+				exportAs: ["ngCombobox"]
+			},
+			{
+				kind: "directive",
+				type: ComboboxPopup,
+				selector: "ng-template[ngComboboxPopup]",
+				inputs: ["combobox", "popupType"],
+				exportAs: ["ngComboboxPopup"]
+			},
+			{
+				kind: "directive",
+				type: ComboboxWidget,
+				selector: "[ngComboboxWidget]",
+				inputs: ["activeDescendant"],
+				exportAs: ["ngComboboxWidget"]
+			},
+			{
+				kind: "directive",
+				type: Listbox,
+				selector: "[ngListbox]",
+				inputs: [
+					"id",
+					"orientation",
+					"multi",
+					"wrap",
+					"softDisabled",
+					"focusMode",
+					"selectionMode",
+					"typeaheadDelay",
+					"disabled",
+					"readonly",
+					"tabindex",
+					"value"
+				],
+				outputs: ["valueChange"],
+				exportAs: ["ngListbox"]
+			},
+			{
+				kind: "directive",
+				type: Option,
+				selector: "[ngOption]",
+				inputs: [
+					"id",
+					"value",
+					"disabled",
+					"label"
+				],
+				exportAs: ["ngOption"]
+			},
+			{
+				kind: "directive",
+				type: CdkConnectedOverlay,
+				selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]",
+				inputs: [
+					"cdkConnectedOverlayOrigin",
+					"cdkConnectedOverlayPositions",
+					"cdkConnectedOverlayPositionStrategy",
+					"cdkConnectedOverlayOffsetX",
+					"cdkConnectedOverlayOffsetY",
+					"cdkConnectedOverlayWidth",
+					"cdkConnectedOverlayHeight",
+					"cdkConnectedOverlayMinWidth",
+					"cdkConnectedOverlayMinHeight",
+					"cdkConnectedOverlayBackdropClass",
+					"cdkConnectedOverlayPanelClass",
+					"cdkConnectedOverlayViewportMargin",
+					"cdkConnectedOverlayScrollStrategy",
+					"cdkConnectedOverlayOpen",
+					"cdkConnectedOverlayDisableClose",
+					"cdkConnectedOverlayTransformOriginOn",
+					"cdkConnectedOverlayHasBackdrop",
+					"cdkConnectedOverlayLockPosition",
+					"cdkConnectedOverlayFlexibleDimensions",
+					"cdkConnectedOverlayGrowAfterOpen",
+					"cdkConnectedOverlayPush",
+					"cdkConnectedOverlayDisposeOnNavigation",
+					"cdkConnectedOverlayUsePopover",
+					"cdkConnectedOverlayMatchWidth",
+					"cdkConnectedOverlay"
+				],
+				outputs: [
+					"backdropClick",
+					"positionChange",
+					"attach",
+					"detach",
+					"overlayKeydown",
+					"overlayOutsideClick"
+				],
+				exportAs: ["cdkConnectedOverlay"]
+			},
+			{
+				kind: "directive",
+				type: CdkOverlayOrigin,
+				selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]",
+				exportAs: ["cdkOverlayOrigin"]
+			},
+			{
+				kind: "component",
+				type: HyIcon,
+				selector: "hy-icon",
+				inputs: [
+					"name",
+					"icon",
+					"label",
+					"size",
+					"strokeWidth"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HySelect,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-select",
+			imports: [
+				Combobox,
+				ComboboxPopup,
+				ComboboxWidget,
+				Listbox,
+				Option,
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				HyIcon
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "hy-select",
+				"[attr.data-native]": "useNative() || null"
+			},
+			template: "@if (useNative()) {\r\n  <select\r\n    class=\"hy-select__native\"\r\n    [id]=\"id()\"\r\n    [disabled]=\"disabled()\"\r\n    [required]=\"required()\"\r\n    [attr.aria-describedby]=\"field?.describedBy() ?? null\"\r\n    [attr.aria-invalid]=\"showsError() || null\"\r\n    (change)=\"pickNative($event)\"\r\n    (blur)=\"touch.emit()\"\r\n  >\r\n    @if (!selectedOption()) {\r\n      <option value=\"\" disabled selected>{{ placeholder() }}</option>\r\n    }\r\n    @for (option of options(); track $index) {\r\n      <option [value]=\"$index\" [selected]=\"option.value === value()\" [disabled]=\"!!option.disabled\">\r\n        {{ option.label }}\r\n      </option>\r\n    }\r\n  </select>\r\n  <hy-icon class=\"hy-select__chevron\" name=\"chevron-down\" />\r\n} @else {\r\n  <button\r\n    #trigger\r\n    type=\"button\"\r\n    ngCombobox\r\n    #combobox=\"ngCombobox\"\r\n    cdkOverlayOrigin\r\n    #origin=\"cdkOverlayOrigin\"\r\n    class=\"hy-select__trigger\"\r\n    [id]=\"id()\"\r\n    [disabled]=\"disabled()\"\r\n    [expanded]=\"expanded()\"\r\n    (expandedChange)=\"setExpanded($event)\"\r\n    [attr.aria-labelledby]=\"field ? field.labelId + ' ' + id() : null\"\r\n    [attr.aria-describedby]=\"field?.describedBy() ?? null\"\r\n    [attr.aria-invalid]=\"showsError() || null\"\r\n    [attr.aria-required]=\"required() || null\"\r\n    (blur)=\"touch.emit()\"\r\n  >\r\n    <span class=\"hy-select__value\" [class.hy-select__placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label ?? placeholder() }}\r\n    </span>\r\n    <hy-icon class=\"hy-select__chevron\" name=\"chevron-down\" />\r\n  </button>\r\n\r\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\r\n    <ng-template\r\n      cdkConnectedOverlay\r\n      [cdkConnectedOverlayOrigin]=\"origin\"\r\n      [cdkConnectedOverlayOpen]=\"rendered()\"\r\n      [cdkConnectedOverlayPositions]=\"positions\"\r\n      [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\r\n      cdkConnectedOverlayPanelClass=\"hy-select-overlay\"\r\n      cdkConnectedOverlayTransformOriginOn=\".hy-select__panel\"\r\n      (attach)=\"onAttach()\"\r\n      (overlayOutsideClick)=\"expanded.set(false)\"\r\n    >\r\n      <!-- Focus stays on the trigger; Aria relays keys here and manages tabindex. -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        ngComboboxWidget\r\n        ngListbox\r\n        #listbox=\"ngListbox\"\r\n        class=\"hy-select__panel hy-glass\"\r\n        data-material=\"frosted\"\r\n        focusMode=\"activedescendant\"\r\n        selectionMode=\"explicit\"\r\n        [activeDescendant]=\"listbox.activeDescendant()\"\r\n        [value]=\"listValue()\"\r\n        (valueChange)=\"pick($event)\"\r\n        (click)=\"onPanelClick($event)\"\r\n        (keydown.enter)=\"close()\"\r\n        (keydown.space)=\"close()\"\r\n      >\r\n        @for (option of options(); track $index) {\r\n          <div\r\n            ngOption\r\n            class=\"hy-select__option\"\r\n            [value]=\"option.value\"\r\n            [label]=\"option.label\"\r\n            [disabled]=\"!!option.disabled\"\r\n          >\r\n            <span>{{ option.label }}</span>\r\n            <hy-icon class=\"hy-select__check\" name=\"check\" />\r\n          </div>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n  </ng-template>\r\n}\r\n",
+			styles: [":host{position:relative;display:flex;align-items:center;flex:1;min-inline-size:0;align-self:stretch}.hy-select__trigger,.hy-select__native{flex:1;min-inline-size:0;align-self:stretch;display:flex;align-items:center;gap:var(--hy-space-2);padding:0;padding-inline-end:1.75rem;border:0;background:transparent;color:var(--hy-ink);font:inherit;text-align:start;cursor:pointer;appearance:none}.hy-select__trigger:focus-visible,.hy-select__native:focus-visible{outline:none}.hy-select__trigger:disabled,.hy-select__native:disabled{cursor:not-allowed}.hy-select__value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hy-select__placeholder{color:var(--hy-ink-3)}.hy-select__chevron{position:absolute;inset-inline-end:0;color:var(--hy-ink-3);pointer-events:none;transition:rotate var(--hy-dur-settle) var(--hy-ease-out)}.hy-select__trigger[aria-expanded=true] .hy-select__chevron{rotate:180deg}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		trigger: [{
+			type: i0.ViewChild,
+			args: ["trigger", { isSignal: true }]
+		}],
+		overlay: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		errors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errors",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		native: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "native",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}]
+	}
+});
+export { HySelect };
+
+//# sourceMappingURL=hyalo-angular-select.mjs.map

package/fesm2022/hyalo-angular-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-select.mjs","names":["HyPresence"],"sources":["../../../projects/hyalo/select/select.ts","../../../projects/hyalo/select/select.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  booleanAttribute,\r\n  computed,\r\n  effect,\r\n  inject,\r\n  input,\r\n  model,\r\n  output,\r\n  signal,\r\n  untracked,\r\n  viewChild,\r\n} from '@angular/core';\r\nimport { Combobox, ComboboxPopup, ComboboxWidget } from '@angular/aria/combobox';\r\nimport { Listbox, Option } from '@angular/aria/listbox';\r\nimport { CdkConnectedOverlay, CdkOverlayOrigin } from '@angular/cdk/overlay';\r\nimport type { FormValueControl } from '@angular/forms/signals';\r\nimport { HyFidelity, injectId } from '@hyalo/angular';\r\nimport { HyIcon } from '@hyalo/angular/icon';\r\nimport { HY_FIELD, type HyFieldControl } from '@hyalo/angular/field';\r\nimport { hyDropdownPositions, ɵHyPresence as HyPresence } from '@hyalo/angular/overlay';\r\n\r\n/** One choice in a select. */\r\nexport interface HySelectOption<T> {\r\n  readonly value: T;\r\n  readonly label: string;\r\n  readonly disabled?: boolean;\r\n}\r\n\r\n/**\r\n * A single-choice select with a glass dropdown, built on Angular Aria's\r\n * combobox and listbox patterns.\r\n *\r\n * ```html\r\n * <hy-field label=\"Strap\">\r\n *   <hy-select [options]=\"straps\" [formField]=\"form.strap\" placeholder=\"Choose a strap\" />\r\n * </hy-field>\r\n * ```\r\n *\r\n * Focus stays on the trigger while the list is open, and options are\r\n * announced through `aria-activedescendant`. Arrow keys move, Enter or\r\n * Space picks, Escape closes, and typing jumps to a matching option.\r\n *\r\n * On the low fidelity tier, or with `native`, it renders a real `<select>`\r\n * instead. That gives the platform picker on phones and costs nothing.\r\n */\r\n@Component({\r\n  selector: 'hy-select',\r\n  imports: [\r\n    Combobox,\r\n    ComboboxPopup,\r\n    ComboboxWidget,\r\n    Listbox,\r\n    Option,\r\n    CdkConnectedOverlay,\r\n    CdkOverlayOrigin,\r\n    HyIcon,\r\n  ],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-select',\r\n    '[attr.data-native]': 'useNative() || null',\r\n  },\r\n  templateUrl: './select.html',\r\n  styleUrl: './select.css',\r\n})\r\nexport class HySelect<T> implements FormValueControl<T | undefined>, HyFieldControl {\r\n  private readonly fidelity = inject(HyFidelity);\r\n  protected readonly field = inject(HY_FIELD, { optional: true });\r\n  private readonly trigger = viewChild<ElementRef<HTMLElement>>('trigger');\r\n  private readonly overlay = viewChild(CdkConnectedOverlay);\r\n  private readonly presence = new HyPresence();\r\n\r\n  /** The choices. */\r\n  readonly options = input.required<readonly HySelectOption<T>[]>();\r\n  /** Selected value. Two-way bindable and works with `[formField]`. */\r\n  readonly value = model<T | undefined>(undefined);\r\n  /** Text shown while nothing is selected. */\r\n  readonly placeholder = input('Select');\r\n  /** Disables the select. Set automatically by Signal Forms. */\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  /** Marks the field as required. Set automatically by Signal Forms. */\r\n  readonly required = input(false, { transform: booleanAttribute });\r\n  /** Set by Signal Forms. */\r\n  readonly invalid = input(false, { transform: booleanAttribute });\r\n  /** Set by Signal Forms. Only the first message is shown. */\r\n  readonly errors = input<readonly { readonly kind: string; readonly message?: string }[]>([]);\r\n  /** Set by Signal Forms. Errors show only after the field is touched. */\r\n  readonly touched = input(false, { transform: booleanAttribute });\r\n  /** Always render a native `<select>`. */\r\n  readonly native = input(false, { transform: booleanAttribute });\r\n  /** Emits when the control loses focus, so forms can mark it touched. */\r\n  readonly touch = output<void>();\r\n\r\n  readonly labelable = true;\r\n  readonly id = signal(injectId('select')).asReadonly();\r\n  readonly errorMessage = computed(() => {\r\n    const first = this.errors()[0];\r\n    return first ? (first.message ?? first.kind) : undefined;\r\n  });\r\n\r\n  protected readonly expanded = signal(false);\r\n  /** Stays true while the panel fades out after `expanded` turns false. */\r\n  protected readonly rendered = signal(false);\r\n  protected readonly positions = hyDropdownPositions();\r\n  protected readonly panelWidth = signal(0);\r\n  protected readonly useNative = computed(() => this.native() || this.fidelity.tier() === 'low');\r\n  protected readonly selectedOption = computed(() =>\r\n    this.options().find((o) => o.value === this.value()),\r\n  );\r\n  protected readonly listValue = computed(() => {\r\n    const v = this.value();\r\n    return v === undefined ? [] : [v];\r\n  });\r\n  protected readonly showsError = computed(() =>\r\n    this.field ? this.field.errorShown() : this.invalid() && this.touched(),\r\n  );\r\n\r\n  constructor() {\r\n    effect(() => {\r\n      const open = this.expanded();\r\n      untracked(() => {\r\n        const panel = this.panelElement();\r\n        if (open) {\r\n          // Reopened while fading out: turn the exit around.\r\n          if (panel && this.presence.leaving) this.presence.enter(panel);\r\n          this.rendered.set(true);\r\n        } else if (panel) {\r\n          this.presence.leave(panel, () => this.rendered.set(false));\r\n        } else {\r\n          this.rendered.set(false);\r\n        }\r\n      });\r\n    });\r\n    this.field?.register({\r\n      id: this.id,\r\n      invalid: computed(() => this.invalid() && this.touched()),\r\n      errorMessage: this.errorMessage,\r\n      required: this.required,\r\n      disabled: this.disabled,\r\n      labelable: true,\r\n    });\r\n  }\r\n\r\n  protected setExpanded(open: boolean): void {\r\n    if (open) this.panelWidth.set(this.trigger()?.nativeElement.offsetWidth ?? 0);\r\n    this.expanded.set(open);\r\n  }\r\n\r\n  /** Runs when the overlay attaches a fresh panel. */\r\n  protected onAttach(): void {\r\n    const panel = this.panelElement();\r\n    if (panel) this.presence.enter(panel);\r\n  }\r\n\r\n  private panelElement(): HTMLElement | null {\r\n    return (\r\n      this.overlay()?.overlayRef?.overlayElement.querySelector<HTMLElement>('.hy-select__panel') ??\r\n      null\r\n    );\r\n  }\r\n\r\n  protected pick(values: readonly T[]): void {\r\n    const next = values[values.length - 1];\r\n    if (next === undefined || next === this.value()) return;\r\n    this.value.set(next);\r\n    this.close();\r\n  }\r\n\r\n  /** Closes after a click on an option, including the one already selected. */\r\n  protected onPanelClick(event: MouseEvent): void {\r\n    const option = (event.target as Element | null)?.closest('[role=\"option\"]');\r\n    if (option && option.getAttribute('aria-disabled') !== 'true') this.close();\r\n  }\r\n\r\n  protected close(): void {\r\n    this.expanded.set(false);\r\n    this.trigger()?.nativeElement.focus();\r\n  }\r\n\r\n  protected pickNative(event: Event): void {\r\n    const index = Number((event.target as HTMLSelectElement).value);\r\n    const option = this.options()[index];\r\n    if (option) this.value.set(option.value);\r\n  }\r\n\r\n  protected indexOf(value: T | undefined): number {\r\n    return this.options().findIndex((o) => o.value === value);\r\n  }\r\n}\r\n","@if (useNative()) {\r\n  <select\r\n    class=\"hy-select__native\"\r\n    [id]=\"id()\"\r\n    [disabled]=\"disabled()\"\r\n    [required]=\"required()\"\r\n    [attr.aria-describedby]=\"field?.describedBy() ?? null\"\r\n    [attr.aria-invalid]=\"showsError() || null\"\r\n    (change)=\"pickNative($event)\"\r\n    (blur)=\"touch.emit()\"\r\n  >\r\n    @if (!selectedOption()) {\r\n      <option value=\"\" disabled selected>{{ placeholder() }}</option>\r\n    }\r\n    @for (option of options(); track $index) {\r\n      <option [value]=\"$index\" [selected]=\"option.value === value()\" [disabled]=\"!!option.disabled\">\r\n        {{ option.label }}\r\n      </option>\r\n    }\r\n  </select>\r\n  <hy-icon class=\"hy-select__chevron\" name=\"chevron-down\" />\r\n} @else {\r\n  <button\r\n    #trigger\r\n    type=\"button\"\r\n    ngCombobox\r\n    #combobox=\"ngCombobox\"\r\n    cdkOverlayOrigin\r\n    #origin=\"cdkOverlayOrigin\"\r\n    class=\"hy-select__trigger\"\r\n    [id]=\"id()\"\r\n    [disabled]=\"disabled()\"\r\n    [expanded]=\"expanded()\"\r\n    (expandedChange)=\"setExpanded($event)\"\r\n    [attr.aria-labelledby]=\"field ? field.labelId + ' ' + id() : null\"\r\n    [attr.aria-describedby]=\"field?.describedBy() ?? null\"\r\n    [attr.aria-invalid]=\"showsError() || null\"\r\n    [attr.aria-required]=\"required() || null\"\r\n    (blur)=\"touch.emit()\"\r\n  >\r\n    <span class=\"hy-select__value\" [class.hy-select__placeholder]=\"!selectedOption()\">\r\n      {{ selectedOption()?.label ?? placeholder() }}\r\n    </span>\r\n    <hy-icon class=\"hy-select__chevron\" name=\"chevron-down\" />\r\n  </button>\r\n\r\n  <ng-template ngComboboxPopup [combobox]=\"combobox\">\r\n    <ng-template\r\n      cdkConnectedOverlay\r\n      [cdkConnectedOverlayOrigin]=\"origin\"\r\n      [cdkConnectedOverlayOpen]=\"rendered()\"\r\n      [cdkConnectedOverlayPositions]=\"positions\"\r\n      [cdkConnectedOverlayMinWidth]=\"panelWidth()\"\r\n      cdkConnectedOverlayPanelClass=\"hy-select-overlay\"\r\n      cdkConnectedOverlayTransformOriginOn=\".hy-select__panel\"\r\n      (attach)=\"onAttach()\"\r\n      (overlayOutsideClick)=\"expanded.set(false)\"\r\n    >\r\n      <!-- Focus stays on the trigger; Aria relays keys here and manages tabindex. -->\r\n      <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\r\n      <div\r\n        ngComboboxWidget\r\n        ngListbox\r\n        #listbox=\"ngListbox\"\r\n        class=\"hy-select__panel hy-glass\"\r\n        data-material=\"frosted\"\r\n        focusMode=\"activedescendant\"\r\n        selectionMode=\"explicit\"\r\n        [activeDescendant]=\"listbox.activeDescendant()\"\r\n        [value]=\"listValue()\"\r\n        (valueChange)=\"pick($event)\"\r\n        (click)=\"onPanelClick($event)\"\r\n        (keydown.enter)=\"close()\"\r\n        (keydown.space)=\"close()\"\r\n      >\r\n        @for (option of options(); track $index) {\r\n          <div\r\n            ngOption\r\n            class=\"hy-select__option\"\r\n            [value]=\"option.value\"\r\n            [label]=\"option.label\"\r\n            [disabled]=\"!!option.disabled\"\r\n          >\r\n            <span>{{ option.label }}</span>\r\n            <hy-icon class=\"hy-select__check\" name=\"check\" />\r\n          </div>\r\n        }\r\n      </div>\r\n    </ng-template>\r\n  </ng-template>\r\n}\r\n"],"mappings":"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"}