@hyalo/angular 0.0.0-stage → 0.3.1

package/fesm2022/hyalo-angular-tabs.mjs

@@ -0,0 +1,324 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, booleanAttribute, computed, contentChildren, inject, input, model, viewChild, viewChildren } from "@angular/core";
+import * as i1 from "@angular/aria/tabs";
+import { Tab, TabList, TabPanel, Tabs } from "@angular/aria/tabs";
+import { HyIcon } from "@hyalo/angular/icon";
+import { ɵtrackIndicator } from "@hyalo/angular/core";
+var HyTab = class HyTab {
+	panel = inject(TabPanel);
+	label = input.required(...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyTab,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyTab,
+		isStandalone: true,
+		selector: "hy-tab",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { classAttribute: "hy-tab-panel" },
+		hostDirectives: [{
+			directive: i1.TabPanel,
+			inputs: ["value", "value"]
+		}],
+		ngImport: i0,
+		template: `<ng-content />`,
+		isInline: true,
+		styles: [":host{display:block}:host([inert]){display:none}:host(:focus-visible){outline:none;border-radius:var(--hy-radius-s);box-shadow:var(--hy-focus-ring)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyTab,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-tab",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [{
+				directive: TabPanel,
+				inputs: ["value"]
+			}],
+			host: { class: "hy-tab-panel" },
+			template: `<ng-content />`,
+			styles: [":host{display:block}:host([inert]){display:none}:host(:focus-visible){outline:none;border-radius:var(--hy-radius-s);box-shadow:var(--hy-focus-ring)}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: true
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+var HyTabs = class HyTabs {
+	tabs = contentChildren(HyTab, ...ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []);
+	list = viewChild("list", ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+	tabEls = viewChildren("tabEl", {
+		...ngDevMode ? { debugName: "tabEls" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	selected = model(void 0, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	selectionMode = input("follow", ...ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []);
+	stretch = input(false, {
+		...ngDevMode ? { debugName: "stretch" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	current = computed(() => this.selected() ?? this.tabs().find((t) => !t.disabled())?.panel.value(), ...ngDevMode ? [{ debugName: "current" }] : /* istanbul ignore next */ []);
+	ready = ɵtrackIndicator(this.list, () => {
+		const index = this.tabs().findIndex((t) => t.panel.value() === this.current());
+		return this.tabEls()[index]?.nativeElement ?? null;
+	});
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyTabs,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyTabs,
+		isStandalone: true,
+		selector: "hy-tabs",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selected: {
+				classPropertyName: "selected",
+				publicName: "selected",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionMode: {
+				classPropertyName: "selectionMode",
+				publicName: "selectionMode",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stretch: {
+				classPropertyName: "stretch",
+				publicName: "stretch",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { selected: "selectedChange" },
+		host: {
+			properties: { "attr.data-stretch": "stretch() || null" },
+			classAttribute: "hy-tabs"
+		},
+		queries: [{
+			propertyName: "tabs",
+			predicate: HyTab,
+			isSignal: true
+		}],
+		viewQueries: [{
+			propertyName: "list",
+			first: true,
+			predicate: ["list"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "tabEls",
+			predicate: ["tabEl"],
+			descendants: true,
+			read: ElementRef,
+			isSignal: true
+		}],
+		hostDirectives: [{ directive: i1.Tabs }],
+		ngImport: i0,
+		template: "<div\r\n  #list\r\n  ngTabList\r\n  class=\"hy-tabs__list\"\r\n  [attr.data-ready]=\"ready() || null\"\r\n  [attr.aria-label]=\"label() || null\"\r\n  [selectedTab]=\"current()\"\r\n  (selectedTabChange)=\"selected.set($event)\"\r\n  [selectionMode]=\"selectionMode()\"\r\n  [focusMode]=\"'roving'\"\r\n>\r\n  <span class=\"hy-tabs__indicator\" aria-hidden=\"true\"></span>\r\n  @for (tab of tabs(); track tab.panel.value()) {\r\n    <button\r\n      #tabEl\r\n      type=\"button\"\r\n      ngTab\r\n      class=\"hy-tabs__tab\"\r\n      [value]=\"tab.panel.value()\"\r\n      [disabled]=\"tab.disabled()\"\r\n    >\r\n      @if (tab.icon(); as icon) {\r\n        <hy-icon [name]=\"icon\" />\r\n      }\r\n      {{ tab.label() }}\r\n    </button>\r\n  }\r\n</div>\r\n<div class=\"hy-tabs__panels\"><ng-content /></div>\r\n",
+		styles: [":host{display:block}.hy-tabs__list{position:relative;display:flex;gap:var(--hy-space-1);padding:var(--hy-space-1);border-radius:var(--hy-tabs-radius, var(--hy-radius-pill));background:var(--hy-tabs-track, color-mix(in srgb, var(--hy-ink) 6%, transparent));overflow-x:auto;scrollbar-width:none;isolation:isolate}:host([data-stretch]) .hy-tabs__list{display:flex}:host([data-stretch]) .hy-tabs__tab{flex:1}.hy-tabs__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-tabs-radius, var(--hy-radius-pill));background:var(--hy-glass-reflection),var(--hy-tabs-indicator, var(--hy-surface-1));box-shadow:var(--hy-glass-edge),0 2px 8px -2px #0f1a242e;z-index:-1}.hy-tabs__list[data-ready] .hy-tabs__indicator{transition:translate var(--hy-dur-settle) var(--hy-ease-out),inline-size var(--hy-dur-settle) var(--hy-ease-out)}.hy-tabs__tab{display:inline-flex;align-items:center;justify-content:center;gap:var(--hy-space-2);min-block-size:2.25rem;padding-inline:var(--hy-space-4);border:0;border-radius:var(--hy-tabs-radius, var(--hy-radius-pill));background:transparent;color:var(--hy-ink-2);font-weight:540;white-space:nowrap;cursor:pointer;transition:color var(--hy-dur-quick) var(--hy-ease-out)}.hy-tabs__tab:hover,.hy-tabs__tab[aria-selected=true]{color:var(--hy-ink)}.hy-tabs__tab:focus-visible{outline:none;box-shadow:var(--hy-focus-ring)}.hy-tabs__tab[aria-disabled=true]{opacity:.45;cursor:not-allowed}.hy-tabs__panels{padding-block-start:var(--hy-space-5)}@media(forced-colors:active){.hy-tabs__tab[aria-selected=true]{outline:2px solid Highlight}}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: TabList,
+				selector: "[ngTabList]",
+				inputs: [
+					"orientation",
+					"wrap",
+					"softDisabled",
+					"focusMode",
+					"selectionMode",
+					"selectedTab",
+					"disabled"
+				],
+				outputs: ["selectedTabChange"],
+				exportAs: ["ngTabList"]
+			},
+			{
+				kind: "directive",
+				type: Tab,
+				selector: "[ngTab]",
+				inputs: [
+					"id",
+					"disabled",
+					"value"
+				],
+				exportAs: ["ngTab"]
+			},
+			{
+				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: HyTabs,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-tabs",
+			imports: [
+				TabList,
+				Tab,
+				HyIcon
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			hostDirectives: [Tabs],
+			host: {
+				class: "hy-tabs",
+				"[attr.data-stretch]": "stretch() || null"
+			},
+			template: "<div\r\n  #list\r\n  ngTabList\r\n  class=\"hy-tabs__list\"\r\n  [attr.data-ready]=\"ready() || null\"\r\n  [attr.aria-label]=\"label() || null\"\r\n  [selectedTab]=\"current()\"\r\n  (selectedTabChange)=\"selected.set($event)\"\r\n  [selectionMode]=\"selectionMode()\"\r\n  [focusMode]=\"'roving'\"\r\n>\r\n  <span class=\"hy-tabs__indicator\" aria-hidden=\"true\"></span>\r\n  @for (tab of tabs(); track tab.panel.value()) {\r\n    <button\r\n      #tabEl\r\n      type=\"button\"\r\n      ngTab\r\n      class=\"hy-tabs__tab\"\r\n      [value]=\"tab.panel.value()\"\r\n      [disabled]=\"tab.disabled()\"\r\n    >\r\n      @if (tab.icon(); as icon) {\r\n        <hy-icon [name]=\"icon\" />\r\n      }\r\n      {{ tab.label() }}\r\n    </button>\r\n  }\r\n</div>\r\n<div class=\"hy-tabs__panels\"><ng-content /></div>\r\n",
+			styles: [":host{display:block}.hy-tabs__list{position:relative;display:flex;gap:var(--hy-space-1);padding:var(--hy-space-1);border-radius:var(--hy-tabs-radius, var(--hy-radius-pill));background:var(--hy-tabs-track, color-mix(in srgb, var(--hy-ink) 6%, transparent));overflow-x:auto;scrollbar-width:none;isolation:isolate}:host([data-stretch]) .hy-tabs__list{display:flex}:host([data-stretch]) .hy-tabs__tab{flex:1}.hy-tabs__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-tabs-radius, var(--hy-radius-pill));background:var(--hy-glass-reflection),var(--hy-tabs-indicator, var(--hy-surface-1));box-shadow:var(--hy-glass-edge),0 2px 8px -2px #0f1a242e;z-index:-1}.hy-tabs__list[data-ready] .hy-tabs__indicator{transition:translate var(--hy-dur-settle) var(--hy-ease-out),inline-size var(--hy-dur-settle) var(--hy-ease-out)}.hy-tabs__tab{display:inline-flex;align-items:center;justify-content:center;gap:var(--hy-space-2);min-block-size:2.25rem;padding-inline:var(--hy-space-4);border:0;border-radius:var(--hy-tabs-radius, var(--hy-radius-pill));background:transparent;color:var(--hy-ink-2);font-weight:540;white-space:nowrap;cursor:pointer;transition:color var(--hy-dur-quick) var(--hy-ease-out)}.hy-tabs__tab:hover,.hy-tabs__tab[aria-selected=true]{color:var(--hy-ink)}.hy-tabs__tab:focus-visible{outline:none;box-shadow:var(--hy-focus-ring)}.hy-tabs__tab[aria-disabled=true]{opacity:.45;cursor:not-allowed}.hy-tabs__panels{padding-block-start:var(--hy-space-5)}@media(forced-colors:active){.hy-tabs__tab[aria-selected=true]{outline:2px solid Highlight}}\n"]
+		}]
+	}],
+	propDecorators: {
+		tabs: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => HyTab), { isSignal: true }]
+		}],
+		list: [{
+			type: i0.ViewChild,
+			args: ["list", { isSignal: true }]
+		}],
+		tabEls: [{
+			type: i0.ViewChildren,
+			args: ["tabEl", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["selectedChange"]
+		}],
+		selectionMode: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionMode",
+				required: false
+			}]
+		}],
+		stretch: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stretch",
+				required: false
+			}]
+		}]
+	}
+});
+const HY_TABS = [HyTabs, HyTab];
+export { HY_TABS, HyTab, HyTabs };
+
+//# sourceMappingURL=hyalo-angular-tabs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-tabs.mjs","names":["trackIndicator"],"sources":["../../../projects/hyalo/tabs/tabs.ts","../../../projects/hyalo/tabs/tabs.html"],"sourcesContent":["import {\r\n  ChangeDetectionStrategy,\r\n  Component,\r\n  ElementRef,\r\n  booleanAttribute,\r\n  computed,\r\n  contentChildren,\r\n  inject,\r\n  input,\r\n  model,\r\n  viewChild,\r\n  viewChildren,\r\n} from '@angular/core';\r\nimport { Tab, TabList, TabPanel, Tabs } from '@angular/aria/tabs';\r\nimport { HyIcon } from '@hyalo/angular/icon';\r\n\r\nimport { ɵtrackIndicator as trackIndicator } from '@hyalo/angular/core';\r\n\r\n/**\r\n * One tab and its panel. The panel content is rendered up front and hidden\r\n * with `inert` while another tab is selected.\r\n */\r\n@Component({\r\n  selector: 'hy-tab',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  hostDirectives: [{ directive: TabPanel, inputs: ['value'] }],\r\n  host: { class: 'hy-tab-panel' },\r\n  template: `<ng-content />`,\r\n  styleUrl: './tab.css',\r\n})\r\nexport class HyTab {\r\n  readonly panel = inject(TabPanel);\r\n  /** Text of the tab button. */\r\n  readonly label = input.required<string>();\r\n  /** Optional icon name shown before the label. */\r\n  readonly icon = input<string>();\r\n  /** Disables this tab. Arrow keys skip it. */\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n}\r\n\r\n/**\r\n * Tabs with a sliding glass indicator, built on Angular Aria. Arrow keys\r\n * move between tabs (mirrored in RTL), Home and End jump to the ends.\r\n *\r\n * ```html\r\n * <hy-tabs label=\"Watch details\" [(selected)]=\"tab\">\r\n *   <hy-tab value=\"overview\" label=\"Overview\">...</hy-tab>\r\n *   <hy-tab value=\"specs\" label=\"Specifications\">...</hy-tab>\r\n * </hy-tabs>\r\n * ```\r\n *\r\n * With `selectionMode=\"follow\"` (the default) a tab opens as soon as it is\r\n * focused. Use `explicit` when panels are expensive, so users press Enter or\r\n * Space to open one.\r\n */\r\n@Component({\r\n  selector: 'hy-tabs',\r\n  imports: [TabList, Tab, HyIcon],\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  hostDirectives: [Tabs],\r\n  host: { class: 'hy-tabs', '[attr.data-stretch]': 'stretch() || null' },\r\n  templateUrl: './tabs.html',\r\n  styleUrl: './tabs.css',\r\n})\r\nexport class HyTabs {\r\n  protected readonly tabs = contentChildren(HyTab);\r\n  private readonly list = viewChild<ElementRef<HTMLElement>>('list');\r\n  private readonly tabEls = viewChildren('tabEl', { read: ElementRef<HTMLElement> });\r\n\r\n  /** Accessible name for the tab list. */\r\n  readonly label = input<string>();\r\n  /** Value of the selected tab. Two-way bindable. Defaults to the first tab. */\r\n  readonly selected = model<string | undefined>(undefined);\r\n  /** `follow` opens a tab on focus, `explicit` waits for Enter or Space. */\r\n  readonly selectionMode = input<'follow' | 'explicit'>('follow');\r\n  /** Stretch tabs to fill the row. */\r\n  readonly stretch = input(false, { transform: booleanAttribute });\r\n\r\n  /** The selected value, falling back to the first enabled tab. */\r\n  protected readonly current = computed(\r\n    () =>\r\n      this.selected() ??\r\n      this.tabs()\r\n        .find((t) => !t.disabled())\r\n        ?.panel.value(),\r\n  );\r\n\r\n  protected readonly ready = trackIndicator(this.list, () => {\r\n    const index = this.tabs().findIndex((t) => t.panel.value() === this.current());\r\n    return this.tabEls()[index]?.nativeElement ?? null;\r\n  });\r\n}\r\n\r\n/** Everything needed to build tabs. */\r\nexport const HY_TABS = [HyTabs, HyTab] as const;\r\n","<div\r\n  #list\r\n  ngTabList\r\n  class=\"hy-tabs__list\"\r\n  [attr.data-ready]=\"ready() || null\"\r\n  [attr.aria-label]=\"label() || null\"\r\n  [selectedTab]=\"current()\"\r\n  (selectedTabChange)=\"selected.set($event)\"\r\n  [selectionMode]=\"selectionMode()\"\r\n  [focusMode]=\"'roving'\"\r\n>\r\n  <span class=\"hy-tabs__indicator\" aria-hidden=\"true\"></span>\r\n  @for (tab of tabs(); track tab.panel.value()) {\r\n    <button\r\n      #tabEl\r\n      type=\"button\"\r\n      ngTab\r\n      class=\"hy-tabs__tab\"\r\n      [value]=\"tab.panel.value()\"\r\n      [disabled]=\"tab.disabled()\"\r\n    >\r\n      @if (tab.icon(); as icon) {\r\n        <hy-icon [name]=\"icon\" />\r\n      }\r\n      {{ tab.label() }}\r\n    </button>\r\n  }\r\n</div>\r\n<div class=\"hy-tabs__panels\"><ng-content /></div>\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-theme.mjs

@@ -0,0 +1,94 @@
+import * as i0 from "@angular/core";
+import { DOCUMENT, Injectable, inject, signal } from "@angular/core";
+import { HY_CONFIG, ɵinjectIsBrowser } from "@hyalo/angular/core";
+const ATTR = "data-hy-palette";
+const VALID_NAME = /^[a-z0-9-]+$/;
+function defaultPaletteHref(name) {
+	return `palette-${name}.css`;
+}
+var HyPalette = class HyPalette {
+	document = inject(DOCUMENT);
+	config = inject(HY_CONFIG);
+	isBrowser = ɵinjectIsBrowser();
+	loads = /* @__PURE__ */ new Map();
+	_current = signal(this.document.documentElement.getAttribute(ATTR), ...ngDevMode ? [{ debugName: "_current" }] : /* istanbul ignore next */ []);
+	_selected = signal(this._current(), ...ngDevMode ? [{ debugName: "_selected" }] : /* istanbul ignore next */ []);
+	current = this._current.asReadonly();
+	selected = this._selected.asReadonly();
+	async use(name) {
+		if (name !== null) assertName(name);
+		this._selected.set(name);
+		try {
+			if (name !== null && this.isBrowser) await this.load(name);
+		} catch (error) {
+			if (this._current() === name) {
+				this.document.documentElement.removeAttribute(ATTR);
+				this._current.set(null);
+			}
+			if (this._selected() === name) this._selected.set(this._current());
+			throw error;
+		}
+		if (this._selected() !== name) return;
+		const root = this.document.documentElement;
+		if (name === null) root.removeAttribute(ATTR);
+		else root.setAttribute(ATTR, name);
+		this._current.set(name);
+	}
+	preload(name) {
+		assertName(name);
+		if (this.isBrowser) this.load(name).catch(() => void 0);
+	}
+	load(name) {
+		const cached = this.loads.get(name);
+		if (cached) return cached;
+		const head = this.document.head;
+		const existing = head.querySelector(`link[${ATTR}="${name}"]`);
+		if (existing && !existing.sheet) existing.remove();
+		const pending = existing?.sheet ? Promise.resolve() : new Promise((resolve, reject) => {
+			const link = this.document.createElement("link");
+			link.addEventListener("load", () => resolve(), { once: true });
+			link.addEventListener("error", () => {
+				link.remove();
+				this.loads.delete(name);
+				reject(/* @__PURE__ */ new Error(`Hyalo: palette "${name}" failed to load from ${link.href}`));
+			}, { once: true });
+			link.rel = "stylesheet";
+			link.href = (this.config.paletteHref ?? defaultPaletteHref)(name);
+			link.setAttribute(ATTR, name);
+			head.appendChild(link);
+		});
+		this.loads.set(name, pending);
+		return pending;
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyPalette,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyPalette,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyPalette,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}]
+});
+function assertName(name) {
+	if (!VALID_NAME.test(name)) throw new Error(`Hyalo: "${name}" is not a valid palette name. Use a-z, 0-9 and dashes.`);
+}
+export { HyPalette, defaultPaletteHref };
+
+//# sourceMappingURL=hyalo-angular-theme.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-theme.mjs","names":["injectIsBrowser"],"sources":["../../../projects/hyalo/theme/palette.ts"],"sourcesContent":["import { DOCUMENT, Injectable, inject, signal } from '@angular/core';\r\nimport { HY_CONFIG, ɵinjectIsBrowser as injectIsBrowser } from '@hyalo/angular/core';\r\n\r\n/** The palettes in `styles/palettes/`. Apps can add their own names too. */\r\nexport type HyPaletteName = 'aurora' | 'ember' | 'orchid' | 'ocean' | 'rose' | 'graphite';\r\n\r\nconst ATTR = 'data-hy-palette';\r\nconst VALID_NAME = /^[a-z0-9-]+$/;\r\n\r\n/** Where a palette stylesheet is served from when no `paletteHref` is configured. */\r\nexport function defaultPaletteHref(name: string): string {\r\n  return `palette-${name}.css`;\r\n}\r\n\r\n/**\r\n * Switches palettes, loading each stylesheet the first time it is needed.\r\n *\r\n * Palettes are separate files in `styles/palettes/`, so they never add to\r\n * the initial CSS. Their rules only match while `data-hy-palette` is on\r\n * `<html>`, which means a loaded palette costs nothing until it is picked.\r\n * The attribute is set only after the file has loaded, so the page never\r\n * shows half a palette, and switching back to a palette is instant.\r\n *\r\n * To restore a saved palette before the app boots, an inline script can add\r\n * `<link rel=\"stylesheet\" data-hy-palette=\"ocean\" href=\"...\">` to the head\r\n * and the attribute to `<html>`. HyPalette picks up both.\r\n */\r\n@Injectable({ providedIn: 'root' })\r\nexport class HyPalette {\r\n  private readonly document = inject(DOCUMENT);\r\n  private readonly config = inject(HY_CONFIG);\r\n  private readonly isBrowser = injectIsBrowser();\r\n  private readonly loads = new Map<string, Promise<void>>();\r\n  private readonly _current = signal(this.document.documentElement.getAttribute(ATTR));\r\n  private readonly _selected = signal(this._current());\r\n\r\n  /** The palette on screen, or null for the built-in one. */\r\n  readonly current = this._current.asReadonly();\r\n\r\n  /**\r\n   * The palette last asked for. It changes straight away, while `current`\r\n   * waits for the stylesheet, so a picker can show the choice immediately.\r\n   */\r\n  readonly selected = this._selected.asReadonly();\r\n\r\n  /**\r\n   * Loads a palette and applies it, or goes back to the built-in palette for\r\n   * null. When several calls overlap, the last one wins. Rejects when the\r\n   * stylesheet fails to load, and leaves the current palette in place. The\r\n   * exception is a palette restored before boot whose file never loaded: the\r\n   * page goes back to the built-in palette instead of claiming it.\r\n   */\r\n  async use(name: HyPaletteName | (string & {}) | null): Promise<void> {\r\n    if (name !== null) assertName(name);\r\n    this._selected.set(name);\r\n    try {\r\n      if (name !== null && this.isBrowser) await this.load(name);\r\n    } catch (error) {\r\n      if (this._current() === name) {\r\n        // The palette the page claims to show never loaded, so drop the claim.\r\n        this.document.documentElement.removeAttribute(ATTR);\r\n        this._current.set(null);\r\n      }\r\n      if (this._selected() === name) this._selected.set(this._current());\r\n      throw error;\r\n    }\r\n    if (this._selected() !== name) return;\r\n    const root = this.document.documentElement;\r\n    if (name === null) root.removeAttribute(ATTR);\r\n    else root.setAttribute(ATTR, name);\r\n    this._current.set(name);\r\n  }\r\n\r\n  /** Starts loading a palette without applying it, for example on hover. */\r\n  preload(name: HyPaletteName | (string & {})): void {\r\n    assertName(name);\r\n    if (this.isBrowser) this.load(name).catch(() => undefined);\r\n  }\r\n\r\n  private load(name: string): Promise<void> {\r\n    const cached = this.loads.get(name);\r\n    if (cached) return cached;\r\n    const head = this.document.head;\r\n    const existing = head.querySelector<HTMLLinkElement>(`link[${ATTR}=\"${name}\"]`);\r\n    // A link without a sheet may have failed before anyone listened, as one\r\n    // added by a pre-paint script can, and would then never settle. Replace\r\n    // it; if it was still loading, the new one comes from the cache.\r\n    if (existing && !existing.sheet) existing.remove();\r\n    const pending = existing?.sheet\r\n      ? Promise.resolve()\r\n      : new Promise<void>((resolve, reject) => {\r\n          const link = this.document.createElement('link');\r\n          link.addEventListener('load', () => resolve(), { once: true });\r\n          link.addEventListener(\r\n            'error',\r\n            () => {\r\n              link.remove();\r\n              this.loads.delete(name);\r\n              reject(new Error(`Hyalo: palette \"${name}\" failed to load from ${link.href}`));\r\n            },\r\n            { once: true },\r\n          );\r\n          link.rel = 'stylesheet';\r\n          link.href = (this.config.paletteHref ?? defaultPaletteHref)(name);\r\n          link.setAttribute(ATTR, name);\r\n          head.appendChild(link);\r\n        });\r\n    this.loads.set(name, pending);\r\n    return pending;\r\n  }\r\n}\r\n\r\n/** Names end up in a selector and a URL, so only simple ones are allowed. */\r\nfunction assertName(name: string): void {\r\n  if (!VALID_NAME.test(name)) {\r\n    throw new Error(`Hyalo: \"${name}\" is not a valid palette name. Use a-z, 0-9 and dashes.`);\r\n  }\r\n}\r\n"],"mappings":"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"}

package/fesm2022/hyalo-angular-timeline.mjs

@@ -0,0 +1,157 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, input } from "@angular/core";
+var HyTimeline = class HyTimeline {
+	label = input("Timeline", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyTimeline,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.3",
+		type: HyTimeline,
+		isStandalone: true,
+		selector: "hy-timeline",
+		inputs: { label: {
+			classPropertyName: "label",
+			publicName: "label",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "role": "list" },
+			properties: { "attr.aria-label": "label()" }
+		},
+		ngImport: i0,
+		template: "<ng-content />",
+		isInline: true,
+		styles: [":host{display:block}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyTimeline,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-timeline",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				role: "list",
+				"[attr.aria-label]": "label()"
+			},
+			template: "<ng-content />",
+			styles: [":host{display:block}\n"]
+		}]
+	}],
+	propDecorators: { label: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "label",
+			required: false
+		}]
+	}] }
+});
+var HyTimelineItem = class HyTimelineItem {
+	heading = input.required(...ngDevMode ? [{ debugName: "heading" }] : /* istanbul ignore next */ []);
+	date = input("", ...ngDevMode ? [{ debugName: "date" }] : /* istanbul ignore next */ []);
+	dateTime = input(null, ...ngDevMode ? [{ debugName: "dateTime" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.3",
+		ngImport: i0,
+		type: HyTimelineItem,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.3",
+		type: HyTimelineItem,
+		isStandalone: true,
+		selector: "hy-timeline-item",
+		inputs: {
+			heading: {
+				classPropertyName: "heading",
+				publicName: "heading",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			date: {
+				classPropertyName: "date",
+				publicName: "date",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dateTime: {
+				classPropertyName: "dateTime",
+				publicName: "dateTime",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { attributes: { "role": "listitem" } },
+		ngImport: i0,
+		template: "<span class=\"dot\" aria-hidden=\"true\"></span>\r\n@if (date()) {\r\n  <time [attr.datetime]=\"dateTime()\">{{ date() }}</time>\r\n}\r\n<strong>{{ heading() }}</strong>\r\n<div><ng-content /></div>\r\n",
+		styles: [":host{display:block;position:relative;padding-block:0 var(--hy-space-8);padding-inline:var(--hy-space-8) 0;border-inline-start:1px solid var(--hy-line-strong);margin-inline-start:.5rem;color:var(--hy-ink-2)}:host(:last-child){border-color:transparent}.dot{position:absolute;inset-inline-start:-.35rem;inset-block-start:.4rem;inline-size:.65rem;block-size:.65rem;border-radius:50%;background:var(--hy-primary);box-shadow:0 0 0 4px var(--hy-bg)}time,strong{display:block}time{font-size:var(--hy-step--1);color:var(--hy-ink-3)}strong{color:var(--hy-ink);margin-block-end:var(--hy-space-2)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: HyTimelineItem,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "hy-timeline-item",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { role: "listitem" },
+			template: "<span class=\"dot\" aria-hidden=\"true\"></span>\r\n@if (date()) {\r\n  <time [attr.datetime]=\"dateTime()\">{{ date() }}</time>\r\n}\r\n<strong>{{ heading() }}</strong>\r\n<div><ng-content /></div>\r\n",
+			styles: [":host{display:block;position:relative;padding-block:0 var(--hy-space-8);padding-inline:var(--hy-space-8) 0;border-inline-start:1px solid var(--hy-line-strong);margin-inline-start:.5rem;color:var(--hy-ink-2)}:host(:last-child){border-color:transparent}.dot{position:absolute;inset-inline-start:-.35rem;inset-block-start:.4rem;inline-size:.65rem;block-size:.65rem;border-radius:50%;background:var(--hy-primary);box-shadow:0 0 0 4px var(--hy-bg)}time,strong{display:block}time{font-size:var(--hy-step--1);color:var(--hy-ink-3)}strong{color:var(--hy-ink);margin-block-end:var(--hy-space-2)}\n"]
+		}]
+	}],
+	propDecorators: {
+		heading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "heading",
+				required: true
+			}]
+		}],
+		date: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "date",
+				required: false
+			}]
+		}],
+		dateTime: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dateTime",
+				required: false
+			}]
+		}]
+	}
+});
+const HY_TIMELINE = [HyTimeline, HyTimelineItem];
+export { HY_TIMELINE, HyTimeline, HyTimelineItem };
+
+//# sourceMappingURL=hyalo-angular-timeline.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hyalo-angular-timeline.mjs","names":[],"sources":["../../../projects/hyalo/timeline/timeline.ts","../../../projects/hyalo/timeline/timeline.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input } from '@angular/core';\r\n@Component({\r\n  selector: 'hy-timeline',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: { role: 'list', '[attr.aria-label]': 'label()' },\r\n  template: '<ng-content />',\r\n  styleUrl: './timeline.css',\r\n})\r\nexport class HyTimeline {\r\n  readonly label = input('Timeline');\r\n}\r\n@Component({\r\n  selector: 'hy-timeline-item',\r\n  changeDetection: ChangeDetectionStrategy.OnPush,\r\n  host: { role: 'listitem' },\r\n  templateUrl: './timeline.html',\r\n  styleUrl: './timeline-item.css',\r\n})\r\nexport class HyTimelineItem {\r\n  readonly heading = input.required<string>();\r\n  readonly date = input('');\r\n  readonly dateTime = input<string | null>(null);\r\n}\r\nexport const HY_TIMELINE = [HyTimeline, HyTimelineItem] as const;\r\n","<span class=\"dot\" aria-hidden=\"true\"></span>\r\n@if (date()) {\r\n  <time [attr.datetime]=\"dateTime()\">{{ date() }}</time>\r\n}\r\n<strong>{{ heading() }}</strong>\r\n<div><ng-content /></div>\r\n"],"mappings":";;AAQA,IAAa,aAAb,MAAa,WAAU;CACZ,QAAQ,MAAM,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CADvB,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAU,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAV,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAU,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,OAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,QAAA,OAAA;GAAA,YAAA,EAAA,mBAAA,UAAA;EAAA;EAAA,UAAA;EAAA,UAHX;EAAgB,UAAA;EAAA,QAAA,CAAA,wBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAGf,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAU,YAAA,CAAA;EAPtB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,iBACN,wBAAwB;GAAM,MACzC;IAAE,MAAM;IAAQ,qBAAqB;GAAS;GAAE,UAC5C;GAAgB,QAAA,CAAA,wBAAA;EAAA,CAAA;;;;;;;;;;;AAa5B,IAAa,iBAAb,MAAa,eAAc;CAChB,UAAU,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAClC,OAAO,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAChB,WAAW,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAHnC,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAc,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAd,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAc,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;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,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,QAAA,WAAA,EAAA;EAAA,UAAA;EAAA,UClB3B;EAMA,QAAA,CAAA,8kBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADYa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAc,YAAA,CAAA;EAP1B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAkB,iBACX,wBAAwB;GAAM,MACzC,EAAE,MAAM,WAAU;GAAE,UAAA;GAAA,QAAA,CAAA,8kBAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAS5B,MAAa,cAAc,CAAC,YAAY,cAAc"}