@hyalo/angular 0.1.0 → 0.3.1

package/fesm2022/hyalo-angular-select.mjs

@@ -1,14 +1,19 @@
+import { NgTemplateOutlet } from "@angular/common";
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, booleanAttribute, computed, effect, inject, input, model, output, signal, untracked, viewChild } 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";
+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 */ []);
@@ -16,6 +21,8 @@ var HySelect = class HySelect {
 	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
@@ -39,7 +46,9 @@ var HySelect = class HySelect {
 	});
 	touch = output();
 	labelable = true;
-	id = signal(injectId("select")).asReadonly();
+	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;
@@ -48,7 +57,37 @@ var HySelect = class HySelect {
 	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 */ []);
+	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();
@@ -56,6 +95,13 @@ var HySelect = class HySelect {
 	}, ...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(() => {
@@ -101,13 +147,21 @@ var HySelect = class HySelect {
 		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);
+	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");
+		});
 	}
-	indexOf(value) {
-		return this.options().findIndex((o) => o.value === value);
+	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",
@@ -145,6 +199,20 @@ var HySelect = class HySelect {
 				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",
@@ -193,6 +261,7 @@ var HySelect = class HySelect {
 			touch: "touch"
 		},
 		host: {
+			listeners: { "focusout": "scheduleMode()" },
 			properties: { "attr.data-native": "useNative() || null" },
 			classAttribute: "hy-select"
 		},
@@ -210,9 +279,19 @@ var HySelect = class HySelect {
 			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"],
+		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,
@@ -350,6 +429,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [{
 			selector: "hy-select",
 			imports: [
+				NgTemplateOutlet,
 				Combobox,
 				ComboboxPopup,
 				ComboboxWidget,
@@ -362,10 +442,11 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
 				class: "hy-select",
-				"[attr.data-native]": "useNative() || null"
+				"[attr.data-native]": "useNative() || null",
+				"(focusout)": "scheduleMode()"
 			},
-			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"]
+			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: () => [],
@@ -405,6 +486,22 @@ i0.ɵɵngDeclareClassMetadata({
 				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: [{

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

@@ -1 +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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"}
+{"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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"}

package/fesm2022/hyalo-angular-sidebar.mjs

@@ -0,0 +1,241 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, input, model } from "@angular/core";
+import { HyIcon } from "@hyalo/angular/icon";
+var HySidebar = class HySidebar {
+	collapsed = model(false, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	toggle = (value) => !value;
+	label = input("Main navigation", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	collapseLabel = input("Collapse navigation", ...ngDevMode ? [{ debugName: "collapseLabel" }] : /* istanbul ignore next */ []);
+	expandLabel = input("Expand navigation", ...ngDevMode ? [{ debugName: "expandLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySidebar,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HySidebar,
+		isStandalone: true,
+		selector: "hy-sidebar",
+		inputs: {
+			collapsed: {
+				classPropertyName: "collapsed",
+				publicName: "collapsed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapseLabel: {
+				classPropertyName: "collapseLabel",
+				publicName: "collapseLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			expandLabel: {
+				classPropertyName: "expandLabel",
+				publicName: "expandLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { collapsed: "collapsedChange" },
+		host: { properties: {
+			"attr.data-collapsed": "collapsed()",
+			"style.--hy-sidebar-label-display": "collapsed()?\"none\":null",
+			"style.--hy-sidebar-item-justify": "collapsed()?\"center\":null"
+		} },
+		ngImport: i0,
+		template: "<header>\n  <div class=\"brand\"><ng-content select=\"[hySidebarBrand]\" /></div>\n  <button\n    type=\"button\"\n    [attr.aria-label]=\"collapsed() ? expandLabel() : collapseLabel()\"\n    [attr.aria-expanded]=\"!collapsed()\"\n    (click)=\"collapsed.update(toggle)\"\n  >\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"20\"\n      height=\"20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.75\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\" />\n      <path d=\"M9 4v16\" />\n    </svg>\n  </button>\n</header>\n<nav [attr.aria-label]=\"label()\"><ng-content /></nav>\n<footer><ng-content select=\"[hySidebarFooter]\" /></footer>\n",
+		styles: [":host{display:flex;flex-direction:column;flex:none;gap:1.5rem;inline-size:var(--hy-sidebar-width, 16rem);max-inline-size:100%;min-inline-size:0;padding:.75rem;border:1px solid var(--hy-line);border-radius:var(--hy-radius-m);background:var(--hy-surface-2);box-sizing:border-box}:host([data-collapsed=\"true\"]){inline-size:4.5rem}header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-block-size:44px}.brand{display:var(--hy-sidebar-label-display, block);min-inline-size:0;padding-inline-start:.375rem}button{display:grid;place-items:center;flex:none;inline-size:44px;block-size:44px;padding:0;background:transparent;color:var(--hy-ink-2);border:1px solid transparent;border-radius:var(--hy-radius-s);cursor:pointer;transition:background-color .12s ease,color .12s ease}button svg{transition:transform var(--hy-dur-quick) var(--hy-ease-out)}:host([data-collapsed=\"true\"]) button svg{transform:rotateY(180deg)}:host-context([dir=\"rtl\"]) button svg{scale:-1 1}@media(hover:hover)and (pointer:fine){button:hover{background:var(--hy-surface-3);color:var(--hy-ink)}}button:active{background:var(--hy-surface-4)}nav{display:grid;align-content:start;gap:.375rem}footer{margin-block-start:auto;display:var(--hy-sidebar-label-display, block);padding-block-start:1rem;border-block-start:1px solid var(--hy-line)}footer:empty{display:none}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){button svg{transition:none}}:host-context([data-hy-motion=\"reduced\"]) button svg{transition:none}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HySidebar,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-sidebar",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[attr.data-collapsed]": "collapsed()",
+				"[style.--hy-sidebar-label-display]": "collapsed()?\"none\":null",
+				"[style.--hy-sidebar-item-justify]": "collapsed()?\"center\":null"
+			},
+			template: "<header>\n  <div class=\"brand\"><ng-content select=\"[hySidebarBrand]\" /></div>\n  <button\n    type=\"button\"\n    [attr.aria-label]=\"collapsed() ? expandLabel() : collapseLabel()\"\n    [attr.aria-expanded]=\"!collapsed()\"\n    (click)=\"collapsed.update(toggle)\"\n  >\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"20\"\n      height=\"20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.75\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\" />\n      <path d=\"M9 4v16\" />\n    </svg>\n  </button>\n</header>\n<nav [attr.aria-label]=\"label()\"><ng-content /></nav>\n<footer><ng-content select=\"[hySidebarFooter]\" /></footer>\n",
+			styles: [":host{display:flex;flex-direction:column;flex:none;gap:1.5rem;inline-size:var(--hy-sidebar-width, 16rem);max-inline-size:100%;min-inline-size:0;padding:.75rem;border:1px solid var(--hy-line);border-radius:var(--hy-radius-m);background:var(--hy-surface-2);box-sizing:border-box}:host([data-collapsed=\"true\"]){inline-size:4.5rem}header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-block-size:44px}.brand{display:var(--hy-sidebar-label-display, block);min-inline-size:0;padding-inline-start:.375rem}button{display:grid;place-items:center;flex:none;inline-size:44px;block-size:44px;padding:0;background:transparent;color:var(--hy-ink-2);border:1px solid transparent;border-radius:var(--hy-radius-s);cursor:pointer;transition:background-color .12s ease,color .12s ease}button svg{transition:transform var(--hy-dur-quick) var(--hy-ease-out)}:host([data-collapsed=\"true\"]) button svg{transform:rotateY(180deg)}:host-context([dir=\"rtl\"]) button svg{scale:-1 1}@media(hover:hover)and (pointer:fine){button:hover{background:var(--hy-surface-3);color:var(--hy-ink)}}button:active{background:var(--hy-surface-4)}nav{display:grid;align-content:start;gap:.375rem}footer{margin-block-start:auto;display:var(--hy-sidebar-label-display, block);padding-block-start:1rem;border-block-start:1px solid var(--hy-line)}footer:empty{display:none}button:focus-visible{outline:2px solid var(--hy-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){button svg{transition:none}}:host-context([data-hy-motion=\"reduced\"]) button svg{transition:none}\n"]
+		}]
+	}],
+	propDecorators: {
+		collapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsed",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["collapsedChange"]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		collapseLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapseLabel",
+				required: false
+			}]
+		}],
+		expandLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "expandLabel",
+				required: false
+			}]
+		}]
+	}
+});
+var HySidebarItem = class HySidebarItem {
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	icon = input.required(...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	active = input(false, {
+		...ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySidebarItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HySidebarItem,
+		isStandalone: true,
+		selector: "a[hySidebarItem]",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			active: {
+				classPropertyName: "active",
+				publicName: "active",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"attr.aria-label": "label()",
+			"attr.title": "label()",
+			"attr.aria-current": "active()?\"page\":null"
+		} },
+		ngImport: i0,
+		template: "<hy-icon [name]=\"icon()\" /><span class=\"label\">{{label()}}</span><ng-content />",
+		isInline: true,
+		styles: [":host{display:flex;align-items:center;justify-content:var(--hy-sidebar-item-justify, start);gap:.75rem;min-block-size:44px;min-inline-size:0;padding:.625rem .75rem;border:1px solid transparent;border-radius:var(--hy-radius-s);color:var(--hy-ink-2);text-decoration:none;font-size:.875rem;font-weight:500;line-height:1.4;box-sizing:border-box;transition:background-color .12s ease,color .12s ease}.label{display:var(--hy-sidebar-label-display, inline);min-inline-size:0;overflow-wrap:anywhere}@media(hover:hover)and (pointer:fine){:host(:hover){background:var(--hy-surface-3);color:var(--hy-ink)}}:host(:active){background:var(--hy-surface-4)}:host([aria-current=\"page\"]){background:var(--hy-primary-wash);color:var(--hy-primary);font-weight:600}:host(:focus-visible){outline:2px solid var(--hy-primary);outline-offset:2px}hy-icon{flex:none;inline-size:1.125rem;block-size:1.125rem}\n"],
+		dependencies: [{
+			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: HySidebarItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "a[hySidebarItem]",
+			imports: [HyIcon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<hy-icon [name]=\"icon()\" /><span class=\"label\">{{label()}}</span><ng-content />",
+			host: {
+				"[attr.aria-label]": "label()",
+				"[attr.title]": "label()",
+				"[attr.aria-current]": "active()?\"page\":null"
+			},
+			styles: [":host{display:flex;align-items:center;justify-content:var(--hy-sidebar-item-justify, start);gap:.75rem;min-block-size:44px;min-inline-size:0;padding:.625rem .75rem;border:1px solid transparent;border-radius:var(--hy-radius-s);color:var(--hy-ink-2);text-decoration:none;font-size:.875rem;font-weight:500;line-height:1.4;box-sizing:border-box;transition:background-color .12s ease,color .12s ease}.label{display:var(--hy-sidebar-label-display, inline);min-inline-size:0;overflow-wrap:anywhere}@media(hover:hover)and (pointer:fine){:host(:hover){background:var(--hy-surface-3);color:var(--hy-ink)}}:host(:active){background:var(--hy-surface-4)}:host([aria-current=\"page\"]){background:var(--hy-primary-wash);color:var(--hy-primary);font-weight:600}:host(:focus-visible){outline:2px solid var(--hy-primary);outline-offset:2px}hy-icon{flex:none;inline-size:1.125rem;block-size:1.125rem}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: true
+			}]
+		}],
+		active: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "active",
+				required: false
+			}]
+		}]
+	}
+});
+const HY_SIDEBAR = [HySidebar, HySidebarItem];
+export { HY_SIDEBAR, HySidebar, HySidebarItem };
+
+//# sourceMappingURL=hyalo-angular-sidebar.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-sidebar.mjs","names":[],"sources":["../../../projects/hyalo/sidebar/sidebar.ts","../../../projects/hyalo/sidebar/sidebar.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, booleanAttribute, input, model } from '@angular/core';\nimport { HyIcon } from '@hyalo/angular/icon';\n@Component({\n  selector: 'hy-sidebar',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './sidebar.html',\n  styleUrl: './sidebar.css',\n  host: {\n    '[attr.data-collapsed]': 'collapsed()',\n    '[style.--hy-sidebar-label-display]': 'collapsed()?\"none\":null',\n    '[style.--hy-sidebar-item-justify]': 'collapsed()?\"center\":null',\n  },\n})\nexport class HySidebar {\n  readonly collapsed = model(false);\n  protected readonly toggle = (value: boolean): boolean => !value;\n  readonly label = input('Main navigation');\n  readonly collapseLabel = input('Collapse navigation');\n  readonly expandLabel = input('Expand navigation');\n}\n@Component({\n  // Native elements preserve link, list, key, and button semantics.\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'a[hySidebarItem]',\n  imports: [HyIcon],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: '<hy-icon [name]=\"icon()\" /><span class=\"label\">{{label()}}</span><ng-content />',\n  host: {\n    '[attr.aria-label]': 'label()',\n    '[attr.title]': 'label()',\n    '[attr.aria-current]': 'active()?\"page\":null',\n  },\n  styleUrl: './sidebar-item.css',\n})\nexport class HySidebarItem {\n  readonly label = input.required<string>();\n  readonly icon = input.required<string>();\n  readonly active = input(false, { transform: booleanAttribute });\n}\nexport const HY_SIDEBAR = [HySidebar, HySidebarItem] as const;\n","<header>\n  <div class=\"brand\"><ng-content select=\"[hySidebarBrand]\" /></div>\n  <button\n    type=\"button\"\n    [attr.aria-label]=\"collapsed() ? expandLabel() : collapseLabel()\"\n    [attr.aria-expanded]=\"!collapsed()\"\n    (click)=\"collapsed.update(toggle)\"\n  >\n    <svg\n      viewBox=\"0 0 24 24\"\n      width=\"20\"\n      height=\"20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"1.75\"\n      aria-hidden=\"true\"\n    >\n      <rect x=\"3\" y=\"4\" width=\"18\" height=\"16\" rx=\"3\" />\n      <path d=\"M9 4v16\" />\n    </svg>\n  </button>\n</header>\n<nav [attr.aria-label]=\"label()\"><ng-content /></nav>\n<footer><ng-content select=\"[hySidebarFooter]\" /></footer>\n"],"mappings":";;;AAaA,IAAa,YAAb,MAAa,UAAS;CACX,YAAY,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACd,UAAU,UAA4B,CAAC;CACjD,QAAQ,MAAM,mBAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,gBAAgB,MAAM,uBAAsB,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAC5C,cAAc,MAAM,qBAAoB,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CALtC,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAS,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAT,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAS,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,WAAA,kBAAA;EAAA,MAAA,EAAA,YAAA;GAAA,uBAAA;GAAA,oCAAA;GAAA,mCAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UCbtB;EAwBA,QAAA,CAAA,wiDAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADXa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAS,YAAA,CAAA;EAXrB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAY,iBACL,wBAAwB;GAAM,MAGzC;IACJ,yBAAyB;IACzB,sCAAsC;IACtC,qCAAqC;GACtC;GAAA,UAAA;GAAA,QAAA,CAAA,wiDAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBH,IAAa,gBAAb,MAAa,cAAa;CACf,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAChC,OAAO,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC/B,SAAS,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,SAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAHjD,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAa,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAb,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAa,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA;GAAA,mBAAA;GAAA,cAAA;GAAA,qBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UARd;EAAiF,UAAA;EAAA,QAAA,CAAA,s3BAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MAFjF;GAAM,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAUL,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EAdzB,MAAA;EAGW,MAAA,CAAA;GAAA,UAAA;GAAkB,SACnB,CAAC,MAAM;GAAC,iBACA,wBAAwB;GAAM,UACrC;GAAiF,MACrF;IACJ,qBAAqB;IACrB,gBAAgB;IAChB,uBAAuB;GACxB;GAAA,QAAA,CAAA,s3BAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQH,MAAa,aAAa,CAAC,WAAW,aAAa"}