@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-select.mjs

@@ -0,0 +1,561 @@
+import { NgTemplateOutlet } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DOCUMENT, DestroyRef, ElementRef, afterNextRender, 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/core";
+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);
+	host = inject(ElementRef).nativeElement;
+	document = inject(DOCUMENT);
+	destroy = inject(DestroyRef);
+	ready = signal(false, ...ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []);
+	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 */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	optionTemplate = input(...ngDevMode ? [void 0, { debugName: "optionTemplate" }] : /* 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;
+	nativeId = injectId("select");
+	triggerId = this.nativeId + "-trigger";
+	id = computed(() => this.useNative() ? this.nativeId : this.triggerId, ...ngDevMode ? [{ debugName: "id" }] : /* istanbul ignore next */ []);
+	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 = signal(true, ...ngDevMode ? [{ debugName: "useNative" }] : /* istanbul ignore next */ []);
+	keyedOptions = computed(() => {
+		const keys = /* @__PURE__ */ new Set();
+		return this.options().map((option) => {
+			const value = option.value;
+			if (option.key === void 0 && (typeof value === "object" || typeof value === "function")) throw new Error("HySelect: object values require a stable option key");
+			const key = option.key === void 0 ? `${typeof value}:${String(value)}` : `${typeof option.key}:${option.key}`;
+			if (keys.has(key)) throw new Error("HySelect: duplicate option key " + key);
+			keys.add(key);
+			return {
+				option,
+				key,
+				disabled: !!(option.disabled || option.group?.disabled),
+				context: { $implicit: option }
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "keyedOptions" }] : /* istanbul ignore next */ []);
+	groups = computed(() => {
+		const groups = /* @__PURE__ */ new Map();
+		for (const option of this.keyedOptions()) {
+			const key = option.option.group?.key ?? "";
+			const group = groups.get(key) ?? {
+				key,
+				label: option.option.group?.label ?? "",
+				options: []
+			};
+			group.options.push(option);
+			groups.set(key, group);
+		}
+		return [...groups.values()];
+	}, ...ngDevMode ? [{ debugName: "groups" }] : /* 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() {
+		afterNextRender(() => this.ready.set(true));
+		effect(() => {
+			this.ready();
+			this.native();
+			this.fidelity.tier();
+			this.scheduleMode();
+		});
+		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();
+	}
+	scheduleMode() {
+		queueMicrotask(() => {
+			if (this.destroy.destroyed || !this.ready()) return;
+			if (this.expanded() || this.host.contains(this.document.activeElement)) return;
+			this.useNative.set(this.native() || this.fidelity.tier() === "low");
+		});
+	}
+	pickNative(event) {
+		const key = event.target.value;
+		if (!key && !this.required()) {
+			this.value.set(void 0);
+			return;
+		}
+		const choice = this.keyedOptions().find((item) => item.key === key);
+		if (choice && !choice.disabled) this.value.set(choice.option.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
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			optionTemplate: {
+				classPropertyName: "optionTemplate",
+				publicName: "optionTemplate",
+				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: {
+			listeners: { "focusout": "scheduleMode()" },
+			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: "<select\r\n  class=\"hy-select__native\"\r\n  [hidden]=\"!useNative()\"\r\n  [id]=\"nativeId\"\r\n  [disabled]=\"disabled() || !useNative()\"\r\n  [required]=\"required()\"\r\n  [name]=\"useNative() ? name() : undefined\"\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  <option value=\"\" [disabled]=\"required()\" [selected]=\"!selectedOption()\">\r\n    {{ placeholder() }}\r\n  </option>\r\n  @for (group of groups(); track group.key) {\r\n    @if (group.key) {\r\n      <optgroup [label]=\"group.label\">\r\n        @for (item of group.options; track item.key) {\r\n          <option\r\n            [value]=\"item.key\"\r\n            [selected]=\"item.option.value === value()\"\r\n            [disabled]=\"item.disabled\"\r\n          >\r\n            {{ item.option.label }}\r\n          </option>\r\n        }\r\n      </optgroup>\r\n    } @else {\r\n      @for (item of group.options; track item.key) {\r\n        <option\r\n          [value]=\"item.key\"\r\n          [selected]=\"item.option.value === value()\"\r\n          [disabled]=\"item.disabled\"\r\n        >\r\n          {{ item.option.label }}\r\n        </option>\r\n      }\r\n    }\r\n  }\r\n</select>\r\n<hy-icon [hidden]=\"!useNative()\" class=\"hy-select__chevron\" name=\"chevron-down\" />\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  [hidden]=\"useNative()\"\r\n  [id]=\"triggerId\"\r\n  [disabled]=\"disabled() || useNative()\"\r\n  [expanded]=\"expanded()\"\r\n  (expandedChange)=\"setExpanded($event)\"\r\n  [attr.aria-labelledby]=\"field ? field.labelId + ' ' + triggerId : 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<ng-template ngComboboxPopup [combobox]=\"combobox\">\r\n  <ng-template\r\n    cdkConnectedOverlay\r\n    [cdkConnectedOverlayOrigin]=\"origin\"\r\n    [cdkConnectedOverlayOpen]=\"rendered() && !useNative()\"\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 remains on the combobox trigger while Aria manages the active option. -->\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 (group of groups(); track group.key) {\r\n        <div role=\"group\" [attr.aria-label]=\"group.label || null\">\r\n          @if (group.label) {\r\n            <div class=\"hy-select__group-label\">{{ group.label }}</div>\r\n          }\r\n          @for (item of group.options; track item.key) {\r\n            <div\r\n              ngOption\r\n              class=\"hy-select__option\"\r\n              [value]=\"item.option.value\"\r\n              [label]=\"item.option.label\"\r\n              [disabled]=\"item.disabled\"\r\n            >\r\n              @if (optionTemplate(); as template) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"template\"\r\n                  [ngTemplateOutletContext]=\"item.context\"\r\n                />\r\n              } @else {\r\n                <span>{{ item.option.label }}</span>\r\n              }\r\n              <hy-icon class=\"hy-select__check\" name=\"check\" />\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\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{--hy-icon-size: 1rem;transform-origin:center;position:absolute;inset-inline-end:0;color:var(--hy-ink-3);pointer-events:none;transition:rotate var(--hy-dur-quick) var(--hy-ease-out)}.hy-select__trigger[aria-expanded=true] .hy-select__chevron{rotate:180deg}[hidden]{display:none!important}.hy-select__group-label{padding:var(--hy-space-2);color:var(--hy-ink-2);font-size:.75rem}@media(prefers-reduced-motion:reduce){.hy-select__chevron{transition:none}}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				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: [
+				NgTemplateOutlet,
+				Combobox,
+				ComboboxPopup,
+				ComboboxWidget,
+				Listbox,
+				Option,
+				CdkConnectedOverlay,
+				CdkOverlayOrigin,
+				HyIcon
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "hy-select",
+				"[attr.data-native]": "useNative() || null",
+				"(focusout)": "scheduleMode()"
+			},
+			template: "<select\r\n  class=\"hy-select__native\"\r\n  [hidden]=\"!useNative()\"\r\n  [id]=\"nativeId\"\r\n  [disabled]=\"disabled() || !useNative()\"\r\n  [required]=\"required()\"\r\n  [name]=\"useNative() ? name() : undefined\"\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  <option value=\"\" [disabled]=\"required()\" [selected]=\"!selectedOption()\">\r\n    {{ placeholder() }}\r\n  </option>\r\n  @for (group of groups(); track group.key) {\r\n    @if (group.key) {\r\n      <optgroup [label]=\"group.label\">\r\n        @for (item of group.options; track item.key) {\r\n          <option\r\n            [value]=\"item.key\"\r\n            [selected]=\"item.option.value === value()\"\r\n            [disabled]=\"item.disabled\"\r\n          >\r\n            {{ item.option.label }}\r\n          </option>\r\n        }\r\n      </optgroup>\r\n    } @else {\r\n      @for (item of group.options; track item.key) {\r\n        <option\r\n          [value]=\"item.key\"\r\n          [selected]=\"item.option.value === value()\"\r\n          [disabled]=\"item.disabled\"\r\n        >\r\n          {{ item.option.label }}\r\n        </option>\r\n      }\r\n    }\r\n  }\r\n</select>\r\n<hy-icon [hidden]=\"!useNative()\" class=\"hy-select__chevron\" name=\"chevron-down\" />\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  [hidden]=\"useNative()\"\r\n  [id]=\"triggerId\"\r\n  [disabled]=\"disabled() || useNative()\"\r\n  [expanded]=\"expanded()\"\r\n  (expandedChange)=\"setExpanded($event)\"\r\n  [attr.aria-labelledby]=\"field ? field.labelId + ' ' + triggerId : 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<ng-template ngComboboxPopup [combobox]=\"combobox\">\r\n  <ng-template\r\n    cdkConnectedOverlay\r\n    [cdkConnectedOverlayOrigin]=\"origin\"\r\n    [cdkConnectedOverlayOpen]=\"rendered() && !useNative()\"\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 remains on the combobox trigger while Aria manages the active option. -->\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 (group of groups(); track group.key) {\r\n        <div role=\"group\" [attr.aria-label]=\"group.label || null\">\r\n          @if (group.label) {\r\n            <div class=\"hy-select__group-label\">{{ group.label }}</div>\r\n          }\r\n          @for (item of group.options; track item.key) {\r\n            <div\r\n              ngOption\r\n              class=\"hy-select__option\"\r\n              [value]=\"item.option.value\"\r\n              [label]=\"item.option.label\"\r\n              [disabled]=\"item.disabled\"\r\n            >\r\n              @if (optionTemplate(); as template) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"template\"\r\n                  [ngTemplateOutletContext]=\"item.context\"\r\n                />\r\n              } @else {\r\n                <span>{{ item.option.label }}</span>\r\n              }\r\n              <hy-icon class=\"hy-select__check\" name=\"check\" />\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\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{--hy-icon-size: 1rem;transform-origin:center;position:absolute;inset-inline-end:0;color:var(--hy-ink-3);pointer-events:none;transition:rotate var(--hy-dur-quick) var(--hy-ease-out)}.hy-select__trigger[aria-expanded=true] .hy-select__chevron{rotate:180deg}[hidden]{display:none!important}.hy-select__group-label{padding:var(--hy-space-2);color:var(--hy-ink-2);font-size:.75rem}@media(prefers-reduced-motion:reduce){.hy-select__chevron{transition:none}}\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
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		optionTemplate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionTemplate",
+				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 { NgTemplateOutlet } from '@angular/common';\r\nimport {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  DOCUMENT,\r\n  DestroyRef,\r\n  TemplateRef,\r\n  afterNextRender,\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/core';\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 key?: string | number;\r\n  readonly group?: { readonly key: string; readonly label: string; readonly disabled?: boolean };\r\n  readonly value: T;\r\n  readonly label: string;\r\n  readonly disabled?: boolean;\r\n}\r\n\r\nexport interface HySelectOptionContext<T> {\r\n  readonly $implicit: HySelectOption<T>;\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    NgTemplateOutlet,\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    '(focusout)': 'scheduleMode()',\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  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\r\n  private readonly document = inject(DOCUMENT);\r\n  private readonly destroy = inject(DestroyRef);\r\n  private readonly ready = signal(false);\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  readonly name = input('');\r\n  readonly optionTemplate = input<TemplateRef<HySelectOptionContext<T>>>();\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  protected readonly nativeId = injectId('select');\r\n  protected readonly triggerId = this.nativeId + '-trigger';\r\n  readonly id = computed(() => (this.useNative() ? this.nativeId : this.triggerId));\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 = signal(true);\r\n  protected readonly keyedOptions = computed(() => {\r\n    const keys = new Set<string>();\r\n    return this.options().map((option) => {\r\n      const value = option.value;\r\n      if (option.key === undefined && (typeof value === 'object' || typeof value === 'function'))\r\n        throw new Error('HySelect: object values require a stable option key');\r\n      const key =\r\n        option.key === undefined\r\n          ? `${typeof value}:${String(value)}`\r\n          : `${typeof option.key}:${option.key}`;\r\n      if (keys.has(key)) throw new Error('HySelect: duplicate option key ' + key);\r\n      keys.add(key);\r\n      return {\r\n        option,\r\n        key,\r\n        disabled: !!(option.disabled || option.group?.disabled),\r\n        context: { $implicit: option },\r\n      };\r\n    });\r\n  });\r\n  protected readonly groups = computed(() => {\r\n    const groups = new Map<\r\n      string,\r\n      {\r\n        key: string;\r\n        label: string;\r\n        options: {\r\n          option: HySelectOption<T>;\r\n          key: string;\r\n          disabled: boolean;\r\n          context: HySelectOptionContext<T>;\r\n        }[];\r\n      }\r\n    >();\r\n    for (const option of this.keyedOptions()) {\r\n      const key = option.option.group?.key ?? '';\r\n      const group = groups.get(key) ?? {\r\n        key,\r\n        label: option.option.group?.label ?? '',\r\n        options: [],\r\n      };\r\n      group.options.push(option);\r\n      groups.set(key, group);\r\n    }\r\n    return [...groups.values()];\r\n  });\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    afterNextRender(() => this.ready.set(true));\r\n    effect(() => {\r\n      this.ready();\r\n      this.native();\r\n      this.fidelity.tier();\r\n      this.scheduleMode();\r\n    });\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 scheduleMode(): void {\r\n    queueMicrotask(() => {\r\n      if (this.destroy.destroyed || !this.ready()) return;\r\n      if (this.expanded() || this.host.contains(this.document.activeElement)) return;\r\n      this.useNative.set(this.native() || this.fidelity.tier() === 'low');\r\n    });\r\n  }\r\n\r\n  protected pickNative(event: Event): void {\r\n    const key = (event.target as HTMLSelectElement).value;\r\n    if (!key && !this.required()) {\r\n      this.value.set(undefined);\r\n      return;\r\n    }\r\n    const choice = this.keyedOptions().find((item) => item.key === key);\r\n    if (choice && !choice.disabled) this.value.set(choice.option.value);\r\n  }\r\n}\r\n","<select\r\n  class=\"hy-select__native\"\r\n  [hidden]=\"!useNative()\"\r\n  [id]=\"nativeId\"\r\n  [disabled]=\"disabled() || !useNative()\"\r\n  [required]=\"required()\"\r\n  [name]=\"useNative() ? name() : undefined\"\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  <option value=\"\" [disabled]=\"required()\" [selected]=\"!selectedOption()\">\r\n    {{ placeholder() }}\r\n  </option>\r\n  @for (group of groups(); track group.key) {\r\n    @if (group.key) {\r\n      <optgroup [label]=\"group.label\">\r\n        @for (item of group.options; track item.key) {\r\n          <option\r\n            [value]=\"item.key\"\r\n            [selected]=\"item.option.value === value()\"\r\n            [disabled]=\"item.disabled\"\r\n          >\r\n            {{ item.option.label }}\r\n          </option>\r\n        }\r\n      </optgroup>\r\n    } @else {\r\n      @for (item of group.options; track item.key) {\r\n        <option\r\n          [value]=\"item.key\"\r\n          [selected]=\"item.option.value === value()\"\r\n          [disabled]=\"item.disabled\"\r\n        >\r\n          {{ item.option.label }}\r\n        </option>\r\n      }\r\n    }\r\n  }\r\n</select>\r\n<hy-icon [hidden]=\"!useNative()\" class=\"hy-select__chevron\" name=\"chevron-down\" />\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  [hidden]=\"useNative()\"\r\n  [id]=\"triggerId\"\r\n  [disabled]=\"disabled() || useNative()\"\r\n  [expanded]=\"expanded()\"\r\n  (expandedChange)=\"setExpanded($event)\"\r\n  [attr.aria-labelledby]=\"field ? field.labelId + ' ' + triggerId : 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<ng-template ngComboboxPopup [combobox]=\"combobox\">\r\n  <ng-template\r\n    cdkConnectedOverlay\r\n    [cdkConnectedOverlayOrigin]=\"origin\"\r\n    [cdkConnectedOverlayOpen]=\"rendered() && !useNative()\"\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 remains on the combobox trigger while Aria manages the active option. -->\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 (group of groups(); track group.key) {\r\n        <div role=\"group\" [attr.aria-label]=\"group.label || null\">\r\n          @if (group.label) {\r\n            <div class=\"hy-select__group-label\">{{ group.label }}</div>\r\n          }\r\n          @for (item of group.options; track item.key) {\r\n            <div\r\n              ngOption\r\n              class=\"hy-select__option\"\r\n              [value]=\"item.option.value\"\r\n              [label]=\"item.option.label\"\r\n              [disabled]=\"item.disabled\"\r\n            >\r\n              @if (optionTemplate(); as template) {\r\n                <ng-container\r\n                  [ngTemplateOutlet]=\"template\"\r\n                  [ngTemplateOutletContext]=\"item.context\"\r\n                />\r\n              } @else {\r\n                <span>{{ item.option.label }}</span>\r\n              }\r\n              <hy-icon class=\"hy-select__check\" name=\"check\" />\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  </ng-template>\r\n</ng-template>\r\n"],"mappings":"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"}