@hyalo/angular 0.0.0-stage → 0.1.0

package/fesm2022/hyalo-angular-segmented.mjs

@@ -0,0 +1,223 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, input, model, output, viewChild, viewChildren } from "@angular/core";
+import { injectId, ɵtrackIndicator } from "@hyalo/angular";
+import { HyIcon } from "@hyalo/angular/icon";
+var HySegmented = class HySegmented {
+	groupName = injectId("segmented");
+	row = viewChild("row", ...ngDevMode ? [{ debugName: "row" }] : /* istanbul ignore next */ []);
+	items = viewChildren("item", {
+		...ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	value = model(void 0, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	name = input("", ...ngDevMode ? [{ debugName: "name" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	touch = output();
+	ready = ɵtrackIndicator(this.row, () => {
+		const index = this.options().findIndex((o) => o.value === this.value());
+		return this.items()[index]?.nativeElement ?? null;
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HySegmented,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HySegmented,
+		isStandalone: true,
+		selector: "hy-segmented",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			name: {
+				classPropertyName: "name",
+				publicName: "name",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			value: "valueChange",
+			touch: "touch"
+		},
+		host: {
+			attributes: { "role": "radiogroup" },
+			properties: {
+				"attr.aria-label": "label() || null",
+				"attr.aria-disabled": "disabled() || null",
+				"attr.data-size": "size()",
+				"attr.data-ready": "ready() || null"
+			},
+			classAttribute: "hy-segmented"
+		},
+		viewQueries: [{
+			propertyName: "row",
+			first: true,
+			predicate: ["row"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "items",
+			predicate: ["item"],
+			descendants: true,
+			read: ElementRef,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div #row class=\"hy-segmented__row\">\r\n  <span class=\"hy-segmented__indicator\" aria-hidden=\"true\"></span>\r\n  @for (option of options(); track option.value) {\r\n    <label\r\n      #item\r\n      class=\"hy-segmented__item\"\r\n      [attr.data-checked]=\"option.value === value() || null\"\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        class=\"hy-segmented__input\"\r\n        [name]=\"name() || groupName\"\r\n        [checked]=\"option.value === value()\"\r\n        [disabled]=\"disabled() || !!option.disabled\"\r\n        (change)=\"value.set(option.value)\"\r\n        (blur)=\"touch.emit()\"\r\n      />\r\n      @if (option.icon; as icon) {\r\n        <hy-icon [name]=\"icon\" />\r\n      }\r\n      <span>{{ option.label }}</span>\r\n    </label>\r\n  }\r\n</div>\r\n",
+		styles: [":host{display:inline-block;max-inline-size:100%}.hy-segmented__row{position:relative;display:flex;gap:var(--hy-space-1);padding:var(--hy-space-1);border-radius:var(--hy-segmented-radius, var(--hy-radius-pill));background:var(--hy-segmented-track, color-mix(in srgb, var(--hy-ink) 6%, transparent));isolation:isolate;overflow-x:auto;scrollbar-width:none}.hy-segmented__indicator{position:absolute;inset-block:var(--hy-space-1);left:0;inline-size:var(--hy-ind-size, 0px);translate:var(--hy-ind-x, 0px) 0;border-radius:var(--hy-segmented-radius, var(--hy-radius-pill));background:var(--hy-glass-reflection),var(--hy-segmented-indicator, var(--hy-surface-1));box-shadow:var(--hy-glass-edge),0 2px 8px -2px #0f1a242e;z-index:-1}:host([data-ready]) .hy-segmented__indicator{transition:translate var(--hy-dur-settle) var(--hy-ease-out),inline-size var(--hy-dur-settle) var(--hy-ease-out)}.hy-segmented__item{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--hy-space-2);flex:1;min-block-size:2.25rem;padding-inline:var(--hy-space-4);border-radius:var(--hy-segmented-radius, var(--hy-radius-pill));color:var(--hy-ink-2);font-weight:540;white-space:nowrap;cursor:pointer;transition:color var(--hy-dur-quick) var(--hy-ease-out)}:host([data-size=\"sm\"]) .hy-segmented__item{min-block-size:1.75rem;padding-inline:var(--hy-space-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}:host([data-size=\"lg\"]) .hy-segmented__item{min-block-size:2.75rem;padding-inline:var(--hy-space-5)}.hy-segmented__item:hover,.hy-segmented__item[data-checked]{color:var(--hy-ink)}.hy-segmented__item:has(:disabled){opacity:.45;cursor:not-allowed}.hy-segmented__item:has(:focus-visible){box-shadow:var(--hy-focus-ring)}.hy-segmented__input{position:absolute;inset:0;margin:0;opacity:0;cursor:inherit}@media(forced-colors:active){.hy-segmented__item[data-checked]{outline:2px solid Highlight}}\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: HySegmented,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-segmented",
+			imports: [HyIcon],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "hy-segmented",
+				role: "radiogroup",
+				"[attr.aria-label]": "label() || null",
+				"[attr.aria-disabled]": "disabled() || null",
+				"[attr.data-size]": "size()",
+				"[attr.data-ready]": "ready() || null"
+			},
+			template: "<div #row class=\"hy-segmented__row\">\r\n  <span class=\"hy-segmented__indicator\" aria-hidden=\"true\"></span>\r\n  @for (option of options(); track option.value) {\r\n    <label\r\n      #item\r\n      class=\"hy-segmented__item\"\r\n      [attr.data-checked]=\"option.value === value() || null\"\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        class=\"hy-segmented__input\"\r\n        [name]=\"name() || groupName\"\r\n        [checked]=\"option.value === value()\"\r\n        [disabled]=\"disabled() || !!option.disabled\"\r\n        (change)=\"value.set(option.value)\"\r\n        (blur)=\"touch.emit()\"\r\n      />\r\n      @if (option.icon; as icon) {\r\n        <hy-icon [name]=\"icon\" />\r\n      }\r\n      <span>{{ option.label }}</span>\r\n    </label>\r\n  }\r\n</div>\r\n",
+			styles: [":host{display:inline-block;max-inline-size:100%}.hy-segmented__row{position:relative;display:flex;gap:var(--hy-space-1);padding:var(--hy-space-1);border-radius:var(--hy-segmented-radius, var(--hy-radius-pill));background:var(--hy-segmented-track, color-mix(in srgb, var(--hy-ink) 6%, transparent));isolation:isolate;overflow-x:auto;scrollbar-width:none}.hy-segmented__indicator{position:absolute;inset-block:var(--hy-space-1);left:0;inline-size:var(--hy-ind-size, 0px);translate:var(--hy-ind-x, 0px) 0;border-radius:var(--hy-segmented-radius, var(--hy-radius-pill));background:var(--hy-glass-reflection),var(--hy-segmented-indicator, var(--hy-surface-1));box-shadow:var(--hy-glass-edge),0 2px 8px -2px #0f1a242e;z-index:-1}:host([data-ready]) .hy-segmented__indicator{transition:translate var(--hy-dur-settle) var(--hy-ease-out),inline-size var(--hy-dur-settle) var(--hy-ease-out)}.hy-segmented__item{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--hy-space-2);flex:1;min-block-size:2.25rem;padding-inline:var(--hy-space-4);border-radius:var(--hy-segmented-radius, var(--hy-radius-pill));color:var(--hy-ink-2);font-weight:540;white-space:nowrap;cursor:pointer;transition:color var(--hy-dur-quick) var(--hy-ease-out)}:host([data-size=\"sm\"]) .hy-segmented__item{min-block-size:1.75rem;padding-inline:var(--hy-space-3);font-size:var(--hy-step--1);letter-spacing:var(--hy-tracking-small)}:host([data-size=\"lg\"]) .hy-segmented__item{min-block-size:2.75rem;padding-inline:var(--hy-space-5)}.hy-segmented__item:hover,.hy-segmented__item[data-checked]{color:var(--hy-ink)}.hy-segmented__item:has(:disabled){opacity:.45;cursor:not-allowed}.hy-segmented__item:has(:focus-visible){box-shadow:var(--hy-focus-ring)}.hy-segmented__input{position:absolute;inset:0;margin:0;opacity:0;cursor:inherit}@media(forced-colors:active){.hy-segmented__item[data-checked]{outline:2px solid Highlight}}\n"]
+		}]
+	}],
+	propDecorators: {
+		row: [{
+			type: i0.ViewChild,
+			args: ["row", { isSignal: true }]
+		}],
+		items: [{
+			type: i0.ViewChildren,
+			args: ["item", {
+				read: ElementRef,
+				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"]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		name: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "name",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		touch: [{
+			type: i0.Output,
+			args: ["touch"]
+		}]
+	}
+});
+export { HySegmented };
+
+//# sourceMappingURL=hyalo-angular-segmented.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-segmented.mjs","names":["trackIndicator"],"sources":["../../../projects/hyalo/segmented/segmented.ts","../../../projects/hyalo/segmented/segmented.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  booleanAttribute,\r\n  input,\r\n  model,\r\n  output,\r\n  viewChild,\r\n  viewChildren,\r\n} from '@angular/core';\r\nimport type { FormValueControl } from '@angular/forms/signals';\r\nimport { type HySize, injectId, ɵtrackIndicator as trackIndicator } from '@hyalo/angular';\r\n\r\nimport { HyIcon } from '@hyalo/angular/icon';\r\n\r\n/** One choice in a segmented control. */\r\nexport interface HySegmentedOption<T> {\r\n  readonly value: T;\r\n  readonly label: string;\r\n  readonly icon?: string;\r\n  readonly disabled?: boolean;\r\n}\r\n\r\n/**\r\n * A segmented control: a small set of mutually exclusive choices with the\r\n * same sliding indicator as tabs. Use it to pick a value (billing period, a\r\n * view mode). Use tabs when each choice shows a different panel.\r\n *\r\n * It is a group of native radio buttons, so arrow keys, form submission and\r\n * screen readers behave as users expect. Works with Signal Forms through\r\n * `[formField]`, or with `[(value)]`.\r\n *\r\n * ```html\r\n * <hy-segmented label=\"Billing\" [options]=\"periods\" [(value)]=\"period\" />\r\n * ```\r\n */\r\n@Component({\r\n  selector: 'hy-segmented',\r\n  imports: [HyIcon],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: {\r\n    class: 'hy-segmented',\r\n    role: 'radiogroup',\r\n    '[attr.aria-label]': 'label() || null',\r\n    '[attr.aria-disabled]': 'disabled() || null',\r\n    '[attr.data-size]': 'size()',\r\n    '[attr.data-ready]': 'ready() || null',\r\n  },\r\n  templateUrl: './segmented.html',\r\n  styleUrl: './segmented.css',\r\n})\r\nexport class HySegmented<T> implements FormValueControl<T | undefined> {\r\n  protected readonly groupName = injectId('segmented');\r\n  private readonly row = viewChild<ElementRef<HTMLElement>>('row');\r\n  private readonly items = viewChildren('item', { read: ElementRef<HTMLElement> });\r\n\r\n  /** The choices. */\r\n  readonly options = input.required<readonly HySegmentedOption<T>[]>();\r\n  /** Selected value. Two-way bindable. */\r\n  readonly value = model<T | undefined>(undefined);\r\n  /** Accessible name of the group. */\r\n  readonly label = input<string>();\r\n  /** Name shared by the radio inputs. Generated when not set. */\r\n  readonly name = input<string>('');\r\n  /** Disables every option. */\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  /** Control size. */\r\n  readonly size = input<HySize>('md');\r\n  /** Emits when focus leaves an option, so forms can mark the field touched. */\r\n  readonly touch = output<void>();\r\n\r\n  protected readonly ready = trackIndicator(this.row, () => {\r\n    const index = this.options().findIndex((o) => o.value === this.value());\r\n    return this.items()[index]?.nativeElement ?? null;\r\n  });\r\n}\r\n","<div #row class=\"hy-segmented__row\">\r\n  <span class=\"hy-segmented__indicator\" aria-hidden=\"true\"></span>\r\n  @for (option of options(); track option.value) {\r\n    <label\r\n      #item\r\n      class=\"hy-segmented__item\"\r\n      [attr.data-checked]=\"option.value === value() || null\"\r\n    >\r\n      <input\r\n        type=\"radio\"\r\n        class=\"hy-segmented__input\"\r\n        [name]=\"name() || groupName\"\r\n        [checked]=\"option.value === value()\"\r\n        [disabled]=\"disabled() || !!option.disabled\"\r\n        (change)=\"value.set(option.value)\"\r\n        (blur)=\"touch.emit()\"\r\n      />\r\n      @if (option.icon; as icon) {\r\n        <hy-icon [name]=\"icon\" />\r\n      }\r\n      <span>{{ option.label }}</span>\r\n    </label>\r\n  }\r\n</div>\r\n"],"mappings":"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AA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,GAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,aAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,UAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,OAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}