@area8975/ui 0.2.2-dev.49 → 0.2.2-dev.50

package/fesm2022/area8975-ui-theme.mjs

@@ -0,0 +1,246 @@
+import { DOCUMENT } from "@angular/common";
+import * as i0 from "@angular/core";
+import { Component, DestroyRef, Injectable, InjectionToken, booleanAttribute, computed, effect, inject, input, makeEnvironmentProviders, provideAppInitializer, signal } from "@angular/core";
+import { UiSegmentedComponent } from "@area8975/ui/segmented";
+var UiDarkClass = class UiDarkClass {
+	isDark = signal(false, ...ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const root = inject(DOCUMENT).documentElement;
+		const read = () => this.isDark.set(root.classList.contains("dark"));
+		read();
+		if (typeof MutationObserver === "undefined") return;
+		const observer = new MutationObserver(read);
+		observer.observe(root, {
+			attributes: true,
+			attributeFilter: ["class"]
+		});
+		inject(DestroyRef).onDestroy(() => observer.disconnect());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDarkClass,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiDarkClass,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiDarkClass,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+const UI_THEME_CONFIG = new InjectionToken("UI_THEME_CONFIG", {
+	providedIn: "root",
+	factory: () => ({ storageKey: "ui-theme" })
+});
+const PREFERENCES = [
+	"system",
+	"light",
+	"dark"
+];
+var UiThemeService = class UiThemeService {
+	document = inject(DOCUMENT);
+	storageKey = inject(UI_THEME_CONFIG).storageKey;
+	media = this.document.defaultView?.matchMedia?.("(prefers-color-scheme: dark)");
+	preference = signal(this.stored(), ...ngDevMode ? [{ debugName: "preference" }] : /* istanbul ignore next */ []);
+	systemDark = signal(this.media?.matches ?? false, ...ngDevMode ? [{ debugName: "systemDark" }] : /* istanbul ignore next */ []);
+	isDark = computed(() => {
+		const preference = this.preference();
+		return preference === "dark" || preference === "system" && this.systemDark();
+	}, ...ngDevMode ? [{ debugName: "isDark" }] : /* istanbul ignore next */ []);
+	constructor() {
+		const onChange = (event) => this.systemDark.set(event.matches);
+		this.media?.addEventListener("change", onChange);
+		inject(DestroyRef).onDestroy(() => this.media?.removeEventListener("change", onChange));
+		effect(() => {
+			const root = this.document.documentElement;
+			const dark = this.isDark();
+			root.classList.toggle("dark", dark);
+			root.style.colorScheme = dark ? "dark" : "light";
+		});
+		effect(() => {
+			const preference = this.preference();
+			try {
+				this.document.defaultView?.localStorage.setItem(this.storageKey, preference);
+			} catch {}
+		});
+	}
+	stored() {
+		try {
+			const value = this.document.defaultView?.localStorage.getItem(this.storageKey);
+			return PREFERENCES.includes(value) ? value : "system";
+		} catch {
+			return "system";
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiThemeService,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Injectable
+	});
+	static ɵprov = i0.ɵɵngDeclareInjectable({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiThemeService,
+		providedIn: "root"
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiThemeService,
+	decorators: [{
+		type: Injectable,
+		args: [{ providedIn: "root" }]
+	}],
+	ctorParameters: () => []
+});
+function provideUiTheme(config = {}) {
+	return makeEnvironmentProviders([{
+		provide: UI_THEME_CONFIG,
+		useValue: {
+			storageKey: "ui-theme",
+			...config
+		}
+	}, provideAppInitializer(() => {
+		inject(UiThemeService);
+	})]);
+}
+var UiThemeSwitchComponent = class UiThemeSwitchComponent {
+	theme = inject(UiThemeService);
+	ariaLabel = input("Theme", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	fill = input(false, {
+		...ngDevMode ? { debugName: "fill" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	options = [
+		{
+			value: "system",
+			label: "System"
+		},
+		{
+			value: "light",
+			label: "Light"
+		},
+		{
+			value: "dark",
+			label: "Dark"
+		}
+	];
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiThemeSwitchComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiThemeSwitchComponent,
+		isStandalone: true,
+		selector: "ui-theme-switch",
+		inputs: {
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fill: {
+				classPropertyName: "fill",
+				publicName: "fill",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class.block": "fill()" } },
+		ngImport: i0,
+		template: `
+        <ui-segmented
+            [options]="options"
+            [(value)]="theme.preference"
+            [ariaLabel]="ariaLabel()"
+            [fill]="fill()"
+        />
+    `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: UiSegmentedComponent,
+			selector: "ui-segmented",
+			inputs: [
+				"options",
+				"value",
+				"ariaLabel",
+				"fill"
+			],
+			outputs: ["valueChange"]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiThemeSwitchComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-theme-switch",
+			imports: [UiSegmentedComponent],
+			host: { "[class.block]": "fill()" },
+			template: `
+        <ui-segmented
+            [options]="options"
+            [(value)]="theme.preference"
+            [ariaLabel]="ariaLabel()"
+            [fill]="fill()"
+        />
+    `
+		}]
+	}],
+	propDecorators: {
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		fill: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fill",
+				required: false
+			}]
+		}]
+	}
+});
+export { UI_THEME_CONFIG, UiDarkClass, UiThemeService, UiThemeSwitchComponent, provideUiTheme };
+
+//# sourceMappingURL=area8975-ui-theme.mjs.map

package/fesm2022/area8975-ui-theme.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-theme.mjs","names":[],"sources":["../../../projects/ui/theme/dark-class.ts","../../../projects/ui/theme/theme.ts","../../../projects/ui/theme/theme-switch.component.ts"],"sourcesContent":["import { DOCUMENT } from '@angular/common';\nimport { DestroyRef, inject, Injectable, signal } from '@angular/core';\n\n\n@Injectable({ providedIn: 'root' })\nexport class UiDarkClass {\n    readonly isDark = signal(false);\n\n    constructor() {\n        const root = inject(DOCUMENT).documentElement;\n        const read = () => this.isDark.set(root.classList.contains('dark'));\n\n        read();\n\n        if (typeof MutationObserver === 'undefined') {\n            return;\n        }\n\n        const observer = new MutationObserver(read);\n\n        observer.observe(root, { attributes: true, attributeFilter: ['class'] });\n        inject(DestroyRef).onDestroy(() => observer.disconnect());\n    }\n}\n","import { DOCUMENT } from '@angular/common';\nimport {\n    computed,\n    DestroyRef,\n    effect,\n    type EnvironmentProviders,\n    inject,\n    Injectable,\n    InjectionToken,\n    makeEnvironmentProviders,\n    provideAppInitializer,\n    signal\n} from '@angular/core';\n\n\n/** What the user picked, `system` follows the OS setting. */\nexport type UiThemePreference = 'system' | 'light' | 'dark';\n\nexport interface UiThemeConfig {\n    storageKey: string;\n}\n\nexport const UI_THEME_CONFIG = new InjectionToken<UiThemeConfig>('UI_THEME_CONFIG', {\n    providedIn: 'root',\n    factory: () => ({ storageKey: 'ui-theme' })\n});\n\nconst PREFERENCES: readonly UiThemePreference[] = ['system', 'light', 'dark'];\n\n/**\n * Add this to `index.html`'s `<head>` so the stored theme applies before boot:\n *\n * ```html\n * <script>\n *     try {\n *         const preference = localStorage.getItem('ui-theme') ?? 'system';\n *         const dark = preference === 'dark' ||\n *             (preference === 'system' && matchMedia('(prefers-color-scheme: dark)').matches);\n *         document.documentElement.classList.toggle('dark', dark);\n *     } catch {}\n * </script>\n * ```\n */\n@Injectable({ providedIn: 'root' })\nexport class UiThemeService {\n    private readonly document = inject(DOCUMENT);\n    private readonly storageKey = inject(UI_THEME_CONFIG).storageKey;\n    private readonly media = this.document.defaultView?.matchMedia?.('(prefers-color-scheme: dark)');\n\n    readonly preference = signal<UiThemePreference>(this.stored());\n\n    private readonly systemDark = signal(this.media?.matches ?? false);\n\n    readonly isDark = computed(() => {\n        const preference = this.preference();\n\n        return preference === 'dark' || (preference === 'system' && this.systemDark());\n    });\n\n    constructor() {\n        const onChange = (event: MediaQueryListEvent) => this.systemDark.set(event.matches);\n\n        this.media?.addEventListener('change', onChange);\n        inject(DestroyRef).onDestroy(() => this.media?.removeEventListener('change', onChange));\n\n        effect(() => {\n            const root = this.document.documentElement;\n            const dark = this.isDark();\n\n            root.classList.toggle('dark', dark);\n            root.style.colorScheme = dark ? 'dark' : 'light';\n        });\n\n        effect(() => {\n            const preference = this.preference();\n\n            try {\n                this.document.defaultView?.localStorage.setItem(this.storageKey, preference);\n            } catch {\n                // storage can be blocked, the theme still applies for this visit\n            }\n        });\n    }\n\n    private stored(): UiThemePreference {\n        try {\n            const value = this.document.defaultView?.localStorage.getItem(this.storageKey);\n\n            return PREFERENCES.includes(value as UiThemePreference) ? value as UiThemePreference : 'system';\n        } catch {\n            return 'system';\n        }\n    }\n}\n\nexport function provideUiTheme(config: Partial<UiThemeConfig> = {}): EnvironmentProviders {\n    return makeEnvironmentProviders([\n        { provide: UI_THEME_CONFIG, useValue: { storageKey: 'ui-theme', ...config } },\n        provideAppInitializer(() => {\n            inject(UiThemeService);\n        })\n    ]);\n}\n","import { booleanAttribute, Component, inject, input } from '@angular/core';\n\nimport type { SegmentedOption } from '@area8975/ui/segmented';\nimport { UiSegmentedComponent } from '@area8975/ui/segmented';\n\nimport { type UiThemePreference, UiThemeService } from './theme';\n\n\n@Component({\n    selector: 'ui-theme-switch',\n    imports: [UiSegmentedComponent],\n    host: { '[class.block]': 'fill()' },\n    template: `\n        <ui-segmented\n            [options]=\"options\"\n            [(value)]=\"theme.preference\"\n            [ariaLabel]=\"ariaLabel()\"\n            [fill]=\"fill()\"\n        />\n    `\n})\nexport class UiThemeSwitchComponent {\n    protected readonly theme = inject(UiThemeService);\n\n    readonly ariaLabel = input<string>('Theme');\n\n    readonly fill = input(false, { transform: booleanAttribute });\n\n    protected readonly options: SegmentedOption<UiThemePreference>[] = [\n        { value: 'system', label: 'System' },\n        { value: 'light', label: 'Light' },\n        { value: 'dark', label: 'Dark' }\n    ];\n}\n"],"mappings":";;;;AAKA,IAAa,cAAb,MAAa,YAAW;CACX,SAAS,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAE/B,cAAA;EACI,MAAM,OAAO,OAAO,QAAQ,CAAC,CAAC;EAC9B,MAAM,aAAa,KAAK,OAAO,IAAI,KAAK,UAAU,SAAS,MAAM,CAAC;EAElE,KAAI;EAEJ,IAAI,OAAO,qBAAqB,aAC5B;EAGJ,MAAM,WAAW,IAAI,iBAAiB,IAAI;EAE1C,SAAS,QAAQ,MAAM;GAAE,YAAY;GAAM,iBAAiB,CAAC,OAAO;EAAC,CAAE;EACvE,OAAO,UAAU,CAAC,CAAC,gBAAgB,SAAS,WAAU,CAAE;CAC5D;CAjBS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAW,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAX,OAAA,QAAA,GAAA,sBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAW,YADE;CAAM,CAAA;;AACnB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAW,YAAA,CAAA;EADvB,MAAA;EAAW,MAAA,CAAA,EAAE,YAAY,OAAM,CAAE;;;;ACkBlC,MAAa,kBAAkB,IAAI,eAA8B,mBAAmB;CAChF,YAAY;CACZ,gBAAgB,EAAE,YAAY,WAAU;AAC3C,CAAA;AAED,MAAM,cAA4C;CAAC;CAAU;CAAS;AAAM;AAiB5E,IAAa,iBAAb,MAAa,eAAc;CACN,WAAW,OAAO,QAAQ;CAC1B,aAAa,OAAO,eAAe,CAAC,CAAC;CACrC,QAAQ,KAAK,SAAS,aAAa,aAAa,8BAA8B;CAEtF,aAAa,OAA0B,KAAK,OAAM,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAE7C,aAAa,OAAO,KAAK,OAAO,WAAW,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAEzD,SAAS,eAAc;EAC5B,MAAM,aAAa,KAAK,WAAU;EAElC,OAAO,eAAe,UAAW,eAAe,YAAY,KAAK,WAAU;CAC/E,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEF,cAAA;EACI,MAAM,YAAY,UAA+B,KAAK,WAAW,IAAI,MAAM,OAAO;EAElF,KAAK,OAAO,iBAAiB,UAAU,QAAQ;EAC/C,OAAO,UAAU,CAAC,CAAC,gBAAgB,KAAK,OAAO,oBAAoB,UAAU,QAAQ,CAAC;EAEtF,aAAY;GACR,MAAM,OAAO,KAAK,SAAS;GAC3B,MAAM,OAAO,KAAK,OAAM;GAExB,KAAK,UAAU,OAAO,QAAQ,IAAI;GAClC,KAAK,MAAM,cAAc,OAAO,SAAS;EAC7C,CAAC;EAED,aAAY;GACR,MAAM,aAAa,KAAK,WAAU;GAElC,IAAI;IACA,KAAK,SAAS,aAAa,aAAa,QAAQ,KAAK,YAAY,UAAU;GAC/E,QAAQ,CAER;EACJ,CAAC;CACL;CAEQ,SAAM;EACV,IAAI;GACA,MAAM,QAAQ,KAAK,SAAS,aAAa,aAAa,QAAQ,KAAK,UAAU;GAE7E,OAAO,YAAY,SAAS,KAA0B,IAAI,QAA6B;EAC3F,QAAQ;GACJ,OAAO;EACX;CACJ;CAhDS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAc,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAd,OAAA,QAAA,GAAA,sBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAc,YADD;CAAM,CAAA;;AACnB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAc,YAAA,CAAA;EAD1B,MAAA;EAAW,MAAA,CAAA,EAAE,YAAY,OAAM,CAAE;;;;AAoDlC,SAAgB,eAAe,SAAiC,CAAA,GAAE;CAC9D,OAAO,yBAAyB,CAC5B;EAAE,SAAS;EAAiB,UAAU;GAAE,YAAY;GAAY,GAAG;EAAM;CAAE,GAC3E,4BAA2B;EACvB,OAAO,cAAc;CACzB,CAAC,CACJ,CAAA;AACL;ACjFA,IAAa,yBAAb,MAAa,uBAAsB;CACZ,QAAQ,OAAO,cAAc;CAEvC,YAAY,MAAc,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAElC,OAAO,MAAM,OAAK;EAAA,GAAA,YAAA,EAAA,WAAA,OAAA,+BAAA,CAAA;EAAI,WAAW;CAAgB,CAAA;CAEvC,UAAgD;EAC/D;GAAE,OAAO;GAAU,OAAO;EAAQ;EAClC;GAAE,OAAO;GAAS,OAAO;EAAO;EAChC;GAAE,OAAO;GAAQ,OAAO;EAAM;CACjC;CAXQ,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAsB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAtB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAsB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,eAAA,SAAA,EAAA;EAAA,UAAA;EAAA,UATrB;;;;;;;;EAOT,UAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MATS;GAAoB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;GAAA;GAAA,SAAA,CAAA,aAAA;EAAA,CAAA;CAAA,CAAA;;AAWrB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAsB,YAAA,CAAA;EAblC,MAAA;EAAU,MAAA,CAAA;GACP,UAAU;GACV,SAAS,CAAC,oBAAoB;GAC9B,MAAM,EAAE,iBAAiB,SAAQ;GACjC,UAAU;;;;;;;;EAQb,CAAA"}

package/fesm2022/area8975-ui-time-select.mjs

@@ -0,0 +1,170 @@
+import * as i0 from "@angular/core";
+import { Component, booleanAttribute, computed, input, model } from "@angular/core";
+import { parseTime, toTime } from "@area8975/ui/calendar";
+import { SelectLocalDataSource, UiSelectComponent } from "@area8975/ui/select";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroClock } from "@ng-icons/heroicons/outline";
+var UiTimeSelectComponent = class UiTimeSelectComponent {
+	value = model("00:00", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	minuteStep = input(5, ...ngDevMode ? [{ debugName: "minuteStep" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	hours = computed(() => parseTime(this.value())?.hours ?? 0, ...ngDevMode ? [{ debugName: "hours" }] : /* istanbul ignore next */ []);
+	minutes = computed(() => parseTime(this.value())?.minutes ?? 0, ...ngDevMode ? [{ debugName: "minutes" }] : /* istanbul ignore next */ []);
+	hourSource = new SelectLocalDataSource(Array.from({ length: 24 }, (_, hour) => hour), () => true);
+	minuteSource = computed(() => {
+		const step = Math.max(1, Math.floor(this.minuteStep()));
+		return new SelectLocalDataSource(Array.from({ length: Math.ceil(60 / step) }, (_, index) => index * step), () => true);
+	}, ...ngDevMode ? [{ debugName: "minuteSource" }] : /* istanbul ignore next */ []);
+	pad = (value) => String(value).padStart(2, "0");
+	setHours(hours) {
+		if (hours !== null) this.value.set(toTime(hours, this.minutes()));
+	}
+	setMinutes(minutes) {
+		if (minutes !== null) this.value.set(toTime(this.hours(), minutes));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: UiTimeSelectComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: UiTimeSelectComponent,
+		isStandalone: true,
+		selector: "ui-time-select",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			minuteStep: {
+				classPropertyName: "minuteStep",
+				publicName: "minuteStep",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: { classAttribute: "inline-flex items-center gap-x-1" },
+		providers: [provideIcons({ heroClock })],
+		ngImport: i0,
+		template: "<ng-icon name=\"heroClock\" class=\"me-1 text-muted-foreground-1 shrink-0\" />\n\n<ui-select\n    class=\"ui-time-select-part\"\n    [dataSource]=\"hourSource\"\n    [displayWith]=\"pad\"\n    [pageSize]=\"24\"\n    [selectedItem]=\"hours()\"\n    [disabled]=\"disabled()\"\n    (selectionChange)=\"setHours($event)\"\n/>\n\n<span class=\"text-muted-foreground-1\" aria-hidden=\"true\">:</span>\n\n<ui-select\n    class=\"ui-time-select-part\"\n    [dataSource]=\"minuteSource()\"\n    [displayWith]=\"pad\"\n    [pageSize]=\"60\"\n    [selectedItem]=\"minutes()\"\n    [disabled]=\"disabled()\"\n    (selectionChange)=\"setMinutes($event)\"\n/>\n",
+		styles: [".ui-time-select-part{width:calc(var(--spacing, .25rem) * 20);flex-shrink:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"],
+		dependencies: [{
+			kind: "component",
+			type: UiSelectComponent,
+			selector: "ui-select",
+			inputs: [
+				"placement",
+				"closeBehaviour",
+				"dataSource",
+				"placeholder",
+				"id",
+				"describedBy",
+				"pageSize",
+				"searchMode",
+				"disabled",
+				"validationState",
+				"clearable",
+				"clearLabel",
+				"creatable",
+				"createLabel",
+				"groupBy",
+				"scrollToSelected",
+				"multiple",
+				"multipleDisplay",
+				"counterAfter",
+				"counterLabel",
+				"compareWith",
+				"displayWith",
+				"selectedItem",
+				"selectedItems"
+			],
+			outputs: [
+				"validationStateChange",
+				"selectionChange",
+				"create",
+				"selectedItemChange",
+				"selectedItemsChange"
+			]
+		}, {
+			kind: "component",
+			type: NgIcon,
+			selector: "ng-icon",
+			inputs: [
+				"name",
+				"svg",
+				"size",
+				"strokeWidth",
+				"color"
+			]
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: UiTimeSelectComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-time-select",
+			imports: [UiSelectComponent, NgIcon],
+			host: { class: "inline-flex items-center gap-x-1" },
+			providers: [provideIcons({ heroClock })],
+			template: "<ng-icon name=\"heroClock\" class=\"me-1 text-muted-foreground-1 shrink-0\" />\n\n<ui-select\n    class=\"ui-time-select-part\"\n    [dataSource]=\"hourSource\"\n    [displayWith]=\"pad\"\n    [pageSize]=\"24\"\n    [selectedItem]=\"hours()\"\n    [disabled]=\"disabled()\"\n    (selectionChange)=\"setHours($event)\"\n/>\n\n<span class=\"text-muted-foreground-1\" aria-hidden=\"true\">:</span>\n\n<ui-select\n    class=\"ui-time-select-part\"\n    [dataSource]=\"minuteSource()\"\n    [displayWith]=\"pad\"\n    [pageSize]=\"60\"\n    [selectedItem]=\"minutes()\"\n    [disabled]=\"disabled()\"\n    (selectionChange)=\"setMinutes($event)\"\n/>\n",
+			styles: [".ui-time-select-part{width:calc(var(--spacing, .25rem) * 20);flex-shrink:0}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"]
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		minuteStep: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minuteStep",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiTimeSelectComponent };
+
+//# sourceMappingURL=area8975-ui-time-select.mjs.map

package/fesm2022/area8975-ui-time-select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"area8975-ui-time-select.mjs","names":[],"sources":["../../../projects/ui/time-select/time-select.component.ts","../../../projects/ui/time-select/time-select.component.html"],"sourcesContent":["import {\n    booleanAttribute,\n    Component,\n    computed,\n    input,\n    model\n} from '@angular/core';\n\nimport { parseTime, toTime } from '@area8975/ui/calendar';\nimport { UiSelectComponent } from '@area8975/ui/select';\nimport { SelectLocalDataSource } from '@area8975/ui/select';\nimport { NgIcon, provideIcons } from '@ng-icons/core';\nimport { heroClock } from '@ng-icons/heroicons/outline';\n\n\n@Component({\n    selector: 'ui-time-select',\n    templateUrl: './time-select.component.html',\n    styleUrl: './time-select.component.css',\n    imports: [UiSelectComponent, NgIcon],\n    host: { class: 'inline-flex items-center gap-x-1' },\n    providers: [provideIcons({ heroClock })]\n})\nexport class UiTimeSelectComponent {\n    /** 24 hour \"HH:mm\" string. */\n    readonly value = model<string>('00:00');\n\n    readonly minuteStep = input<number>(5);\n    readonly disabled = input(false, { transform: booleanAttribute });\n\n    protected readonly hours = computed(() =>\n        parseTime(this.value())?.hours ?? 0\n    );\n    protected readonly minutes = computed(() =>\n        parseTime(this.value())?.minutes ?? 0\n    );\n\n    protected readonly hourSource = new SelectLocalDataSource(\n        Array.from({ length: 24 }, (_, hour) => hour),\n        () => true\n    );\n\n    protected readonly minuteSource = computed(() => {\n        const step = Math.max(1, Math.floor(this.minuteStep()));\n\n        return new SelectLocalDataSource(\n            Array.from(\n                { length: Math.ceil(60 / step) },\n                (_, index) => index * step\n            ),\n            () => true\n        );\n    });\n\n    protected readonly pad = (value: number) => String(value).padStart(2, '0');\n\n    protected setHours(hours: number | null): void {\n        if (hours !== null) {\n            this.value.set(toTime(hours, this.minutes()));\n        }\n    }\n\n    protected setMinutes(minutes: number | null): void {\n        if (minutes !== null) {\n            this.value.set(toTime(this.hours(), minutes));\n        }\n    }\n}\n","<ng-icon name=\"heroClock\" class=\"me-1 text-muted-foreground-1 shrink-0\" />\n\n<ui-select\n    class=\"ui-time-select-part\"\n    [dataSource]=\"hourSource\"\n    [displayWith]=\"pad\"\n    [pageSize]=\"24\"\n    [selectedItem]=\"hours()\"\n    [disabled]=\"disabled()\"\n    (selectionChange)=\"setHours($event)\"\n/>\n\n<span class=\"text-muted-foreground-1\" aria-hidden=\"true\">:</span>\n\n<ui-select\n    class=\"ui-time-select-part\"\n    [dataSource]=\"minuteSource()\"\n    [displayWith]=\"pad\"\n    [pageSize]=\"60\"\n    [selectedItem]=\"minutes()\"\n    [disabled]=\"disabled()\"\n    (selectionChange)=\"setMinutes($event)\"\n/>\n"],"mappings":"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"}