@loomui-ng/ui 0.0.0-stage → 0.1.1

package/fesm2022/loomui-ng-ui-chart.mjs

@@ -0,0 +1,373 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, afterNextRender, computed, effect, inject, input, viewChild } from "@angular/core";
+import { Chart, registerables } from "chart.js";
+import { cn } from "@loomui-ng/ui/utils";
+Chart.register(...registerables);
+var UiChart = class UiChart {
+	static n = 0;
+	chartId = `chart-${++UiChart.n}`;
+	host = inject(ElementRef).nativeElement;
+	canvas = viewChild.required("canvas", ...ngDevMode ? [{ debugName: "canvas" }] : /* istanbul ignore next */ []);
+	type = input("bar", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+	data = input.required(...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	xKey = input.required(...ngDevMode ? [{ debugName: "xKey" }] : /* istanbul ignore next */ []);
+	valueKey = input("", ...ngDevMode ? [{ debugName: "valueKey" }] : /* istanbul ignore next */ []);
+	config = input.required(...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	options = input({}, ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	showLegend = input(true, ...ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []);
+	label = input("Chart", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	destroyRef = inject(DestroyRef);
+	chart = null;
+	ready = false;
+	classes = computed(() => cn("flex aspect-video min-w-0 flex-col justify-center text-xs [&_canvas]:max-w-full", this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	cssVars = computed(() => {
+		const out = {};
+		for (const [k, v] of Object.entries(this.config())) out[`--color-${k}`] = v.color;
+		return out;
+	}, ...ngDevMode ? [{ debugName: "cssVars" }] : /* istanbul ignore next */ []);
+	circular = computed(() => this.type() === "pie" || this.type() === "doughnut" || this.type() === "polarArea", ...ngDevMode ? [{ debugName: "circular" }] : /* istanbul ignore next */ []);
+	legend = computed(() => {
+		const cfg = this.config();
+		return (this.circular() ? this.data().map((r) => String(r[this.xKey()])) : Object.keys(cfg)).filter((k) => cfg[k]).map((k) => ({
+			key: k,
+			label: cfg[k].label,
+			color: cfg[k].color
+		}));
+	}, ...ngDevMode ? [{ debugName: "legend" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => {
+			this.ready = true;
+			this.render();
+			const mo = new MutationObserver(() => this.render());
+			mo.observe(document.documentElement, {
+				attributes: true,
+				attributeFilter: ["class"]
+			});
+			this.destroyRef.onDestroy(() => {
+				mo.disconnect();
+				this.chart?.destroy();
+			});
+		});
+		effect(() => {
+			this.type();
+			this.data();
+			this.config();
+			this.options();
+			this.xKey();
+			this.valueKey();
+			if (this.ready) this.render();
+		});
+	}
+	resolve(color) {
+		const probe = this.host;
+		const m = /^var\((--[\w-]+)\)$/.exec(color.trim());
+		if (!m) return color;
+		return getComputedStyle(probe).getPropertyValue(m[1]).trim() || color;
+	}
+	render() {
+		const cfg = this.config();
+		const rows = this.data();
+		const x = this.xKey();
+		const fg = getComputedStyle(this.host).getPropertyValue("--muted-foreground").trim() || "#888";
+		const grid = getComputedStyle(this.host).getPropertyValue("--border").trim() || "#8884";
+		const type = this.type();
+		const labels = rows.map((r) => String(r[x]));
+		const datasets = this.circular() ? [{
+			label: this.label(),
+			data: rows.map((r) => Number(r[this.valueKey()])),
+			backgroundColor: labels.map((l) => this.resolve(cfg[l]?.color ?? "#888")),
+			borderWidth: 0
+		}] : Object.entries(cfg).map(([key, c]) => ({
+			label: c.label,
+			data: rows.map((r) => Number(r[key])),
+			backgroundColor: this.resolve(c.color),
+			borderColor: this.resolve(c.color),
+			borderRadius: type === "bar" ? 4 : 0,
+			borderWidth: type === "bar" ? 0 : 2,
+			tension: .3,
+			pointRadius: type === "line" ? 0 : 3,
+			fill: false
+		}));
+		const tooltipBg = getComputedStyle(this.host).getPropertyValue("--background").trim() || "#fff";
+		const tooltipFg = getComputedStyle(this.host).getPropertyValue("--foreground").trim() || "#000";
+		const options = {
+			responsive: true,
+			maintainAspectRatio: false,
+			animation: { duration: 400 },
+			plugins: {
+				legend: { display: false },
+				tooltip: {
+					backgroundColor: tooltipBg,
+					titleColor: tooltipFg,
+					bodyColor: tooltipFg,
+					borderColor: grid,
+					borderWidth: 1,
+					cornerRadius: 8,
+					padding: 10,
+					boxPadding: 4,
+					usePointStyle: false
+				}
+			},
+			scales: this.circular() || type === "radar" ? {} : {
+				x: {
+					grid: { display: false },
+					border: { display: false },
+					ticks: { color: fg }
+				},
+				y: {
+					grid: { color: grid },
+					border: { display: false },
+					ticks: { color: fg }
+				}
+			},
+			...this.options()
+		};
+		const config = {
+			type,
+			data: {
+				labels,
+				datasets
+			},
+			options
+		};
+		if (this.chart && this.chart.config.type === type) {
+			this.chart.data = {
+				labels,
+				datasets
+			};
+			this.chart.options = options;
+			this.chart.update();
+		} else {
+			this.chart?.destroy();
+			this.chart = new Chart(this.canvas().nativeElement, config);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiChart,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiChart,
+		isStandalone: true,
+		selector: "ui-chart",
+		inputs: {
+			type: {
+				classPropertyName: "type",
+				publicName: "type",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			xKey: {
+				classPropertyName: "xKey",
+				publicName: "xKey",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			valueKey: {
+				classPropertyName: "valueKey",
+				publicName: "valueKey",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLegend: {
+				classPropertyName: "showLegend",
+				publicName: "showLegend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "data-slot": "chart" },
+			properties: {
+				"attr.data-chart": "chartId",
+				"attr.class": "classes()",
+				"style": "cssVars()"
+			}
+		},
+		viewQueries: [{
+			propertyName: "canvas",
+			first: true,
+			predicate: ["canvas"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div class="relative size-full min-h-48 min-w-0 flex-1 overflow-hidden"><canvas #canvas role="img" [attr.aria-label]="label()"></canvas></div>
+    @if (showLegend()) {
+      <ul data-slot="chart-legend" class="flex items-center justify-center gap-4 pt-3 text-xs">
+        @for (item of legend(); track item.key) {
+          <li class="flex items-center gap-1.5">
+            <span class="size-2 shrink-0 rounded-[2px]" [style.background]="item.color"></span>{{ item.label }}
+          </li>
+        }
+      </ul>
+    }
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiChart,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-chart",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"data-slot": "chart",
+				"[attr.data-chart]": "chartId",
+				"[attr.class]": "classes()",
+				"[style]": "cssVars()"
+			},
+			template: `
+    <div class="relative size-full min-h-48 min-w-0 flex-1 overflow-hidden"><canvas #canvas role="img" [attr.aria-label]="label()"></canvas></div>
+    @if (showLegend()) {
+      <ul data-slot="chart-legend" class="flex items-center justify-center gap-4 pt-3 text-xs">
+        @for (item of legend(); track item.key) {
+          <li class="flex items-center gap-1.5">
+            <span class="size-2 shrink-0 rounded-[2px]" [style.background]="item.color"></span>{{ item.label }}
+          </li>
+        }
+      </ul>
+    }
+  `
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		canvas: [{
+			type: i0.ViewChild,
+			args: ["canvas", { isSignal: true }]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: true
+			}]
+		}],
+		xKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "xKey",
+				required: true
+			}]
+		}],
+		valueKey: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueKey",
+				required: false
+			}]
+		}],
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: true
+			}]
+		}],
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		showLegend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLegend",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+const UI_CHART = [UiChart];
+export { UI_CHART, UiChart };
+
+//# sourceMappingURL=loomui-ng-ui-chart.mjs.map

package/fesm2022/loomui-ng-ui-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-chart.mjs","names":[],"sources":["../../../libs/ui/chart/chart.ts"],"sourcesContent":["import {\n  afterNextRender,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  viewChild,\n} from '@angular/core';\nimport { Chart, registerables, type ChartOptions, type ChartType } from 'chart.js';\nimport { cn } from '@loomui-ng/ui/utils';\n\nChart.register(...registerables);\n\nexport interface ChartSeriesConfig {\n  label: string;\n  /** CSS color, e.g. 'var(--chart-1)'. Exposed as --color-<key> on the container (as shadcn's ChartContainer does). */\n  color: string;\n}\nexport type ChartConfig = Record<string, ChartSeriesConfig>;\n\n/**\n * shadcn's Chart wraps Recharts. This implementation uses Chart.js and keeps shadcn's contract:\n * a `config` maps series keys to label + color; the container exposes `--color-<key>` CSS variables; tooltip and legend\n * follow shadcn styling (card-like tooltip, small legend swatches). Data rows are plain objects.\n *\n * <ui-chart type=\"bar\" [data]=\"rows\" xKey=\"month\" [config]=\"config\" class=\"h-64 w-full\" />\n * For pie/doughnut, rows are categories: xKey = category field, valueKey = number field, config keyed by category value.\n * Deviation: Recharts-specific components (ChartTooltipContent props, <Bar radius>) have no 1:1 equivalent.\n */\n@Component({\n  selector: 'ui-chart',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    'data-slot': 'chart',\n    '[attr.data-chart]': 'chartId',\n    '[attr.class]': 'classes()',\n    '[style]': 'cssVars()',\n  },\n  template: `\n    <div class=\"relative size-full min-h-48 min-w-0 flex-1 overflow-hidden\"><canvas #canvas role=\"img\" [attr.aria-label]=\"label()\"></canvas></div>\n    @if (showLegend()) {\n      <ul data-slot=\"chart-legend\" class=\"flex items-center justify-center gap-4 pt-3 text-xs\">\n        @for (item of legend(); track item.key) {\n          <li class=\"flex items-center gap-1.5\">\n            <span class=\"size-2 shrink-0 rounded-[2px]\" [style.background]=\"item.color\"></span>{{ item.label }}\n          </li>\n        }\n      </ul>\n    }\n  `,\n})\nexport class UiChart {\n  private static n = 0;\n  protected readonly chartId = `chart-${++UiChart.n}`;\n  private readonly host = inject<ElementRef<HTMLElement>>(ElementRef).nativeElement;\n  private readonly canvas = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');\n\n  readonly type = input<ChartType>('bar');\n  readonly data = input.required<Record<string, unknown>[]>();\n  readonly xKey = input.required<string>();\n  readonly valueKey = input<string>('');\n  readonly config = input.required<ChartConfig>();\n  readonly options = input<Record<string, any>>({});\n  readonly showLegend = input(true);\n  readonly label = input('Chart');\n  readonly userClass = input<string>('', { alias: 'class' });\n\n  private readonly destroyRef = inject(DestroyRef);\n  private chart: Chart | null = null;\n  private ready = false;\n\n  protected readonly classes = computed(() =>\n    cn('flex aspect-video min-w-0 flex-col justify-center text-xs [&_canvas]:max-w-full', this.userClass()),\n  );\n  protected readonly cssVars = computed(() => {\n    const out: Record<string, string> = {};\n    for (const [k, v] of Object.entries(this.config())) out[`--color-${k}`] = v.color;\n    return out;\n  });\n  private readonly circular = computed(() => this.type() === 'pie' || this.type() === 'doughnut' || this.type() === 'polarArea');\n  protected readonly legend = computed(() => {\n    const cfg = this.config();\n    const keys = this.circular() ? this.data().map((r) => String(r[this.xKey()])) : Object.keys(cfg);\n    return keys.filter((k) => cfg[k]).map((k) => ({ key: k, label: cfg[k].label, color: cfg[k].color }));\n  });\n\n  constructor() {\n    afterNextRender(() => {\n      this.ready = true;\n      this.render();\n      const mo = new MutationObserver(() => this.render());\n      mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });\n      this.destroyRef.onDestroy(() => {\n        mo.disconnect();\n        this.chart?.destroy();\n      });\n    });\n    effect(() => {\n      this.type();\n      this.data();\n      this.config();\n      this.options();\n      this.xKey();\n      this.valueKey();\n      if (this.ready) this.render();\n    });\n  }\n\n  /** Resolves `var(--x)` to the computed color so Chart.js (canvas) can paint it, honoring .dark. */\n  private resolve(color: string): string {\n    const probe = this.host;\n    const m = /^var\\((--[\\w-]+)\\)$/.exec(color.trim());\n    if (!m) return color;\n    return getComputedStyle(probe).getPropertyValue(m[1]).trim() || color;\n  }\n\n  private render(): void {\n    const cfg = this.config();\n    const rows = this.data();\n    const x = this.xKey();\n    const fg = getComputedStyle(this.host).getPropertyValue('--muted-foreground').trim() || '#888';\n    const grid = getComputedStyle(this.host).getPropertyValue('--border').trim() || '#8884';\n    const type = this.type();\n    const labels = rows.map((r) => String(r[x]));\n    const datasets = this.circular()\n      ? [\n          {\n            label: this.label(),\n            data: rows.map((r) => Number(r[this.valueKey()])),\n            backgroundColor: labels.map((l) => this.resolve(cfg[l]?.color ?? '#888')),\n            borderWidth: 0,\n          },\n        ]\n      : Object.entries(cfg).map(([key, c]) => ({\n          label: c.label,\n          data: rows.map((r) => Number(r[key])),\n          backgroundColor: this.resolve(c.color),\n          borderColor: this.resolve(c.color),\n          borderRadius: type === 'bar' ? 4 : 0,\n          borderWidth: type === 'bar' ? 0 : 2,\n          tension: 0.3,\n          pointRadius: type === 'line' ? 0 : 3,\n          fill: false,\n        }));\n    const tooltipBg = getComputedStyle(this.host).getPropertyValue('--background').trim() || '#fff';\n    const tooltipFg = getComputedStyle(this.host).getPropertyValue('--foreground').trim() || '#000';\n    const options: ChartOptions = {\n      responsive: true,\n      maintainAspectRatio: false,\n      animation: { duration: 400 },\n      plugins: {\n        legend: { display: false },\n        tooltip: {\n          backgroundColor: tooltipBg,\n          titleColor: tooltipFg,\n          bodyColor: tooltipFg,\n          borderColor: grid,\n          borderWidth: 1,\n          cornerRadius: 8,\n          padding: 10,\n          boxPadding: 4,\n          usePointStyle: false,\n        },\n      },\n      scales: this.circular() || type === 'radar'\n        ? {}\n        : {\n            x: { grid: { display: false }, border: { display: false }, ticks: { color: fg } },\n            y: { grid: { color: grid }, border: { display: false }, ticks: { color: fg } },\n          },\n      ...this.options(),\n    };\n    const config = { type, data: { labels, datasets }, options } as never;\n    if (this.chart && (this.chart.config as { type?: string }).type === type) {\n      this.chart.data = { labels, datasets } as never;\n      this.chart.options = options as never;\n      this.chart.update();\n    } else {\n      this.chart?.destroy();\n      this.chart = new Chart(this.canvas().nativeElement, config);\n    }\n  }\n}\n\nexport const UI_CHART = [UiChart] as const;\n"],"mappings":"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"}

package/fesm2022/loomui-ng-ui-checkbox.mjs

@@ -0,0 +1,265 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, booleanAttribute, computed, forwardRef, input, model, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import * as i1 from "@loomui-ng/ui/utils";
+import { UiElementHost, cn } from "@loomui-ng/ui/utils";
+import { UiIconSvg } from "@loomui-ng/ui/icon";
+const checkboxClasses = "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary";
+var UiCheckbox = class UiCheckbox {
+	checked = model(false, ...ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []);
+	indeterminate = model(false, ...ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	userClass = input("", {
+		...ngDevMode ? { debugName: "userClass" } : /* istanbul ignore next */ {},
+		alias: "class"
+	});
+	cvaDisabled = signal(false, ...ngDevMode ? [{ debugName: "cvaDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.cvaDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	state = computed(() => this.indeterminate() ? "indeterminate" : this.checked() ? "checked" : "unchecked", ...ngDevMode ? [{ debugName: "state" }] : /* istanbul ignore next */ []);
+	classes = computed(() => cn(checkboxClasses, this.userClass()), ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	toggle() {
+		if (this.isDisabled()) return;
+		const next = this.indeterminate() ? true : !this.checked();
+		this.indeterminate.set(false);
+		this.checked.set(next);
+		this.onChange(next);
+	}
+	writeValue(v) {
+		this.checked.set(!!v);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(d) {
+		this.cvaDisabled.set(d);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: UiCheckbox,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: UiCheckbox,
+		isStandalone: true,
+		selector: "button[uiCheckbox], ui-checkbox",
+		inputs: {
+			checked: {
+				classPropertyName: "checked",
+				publicName: "checked",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			indeterminate: {
+				classPropertyName: "indeterminate",
+				publicName: "indeterminate",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userClass: {
+				classPropertyName: "userClass",
+				publicName: "class",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			checked: "checkedChange",
+			indeterminate: "indeterminateChange"
+		},
+		host: {
+			attributes: {
+				"type": "button",
+				"role": "checkbox",
+				"data-slot": "checkbox"
+			},
+			listeners: {
+				"click": "toggle()",
+				"keydown.enter": "$event.preventDefault()",
+				"blur": "onTouched()"
+			},
+			properties: {
+				"attr.aria-checked": "indeterminate() ? \"mixed\" : checked()",
+				"attr.aria-invalid": "invalid() ? \"true\" : null",
+				"attr.data-state": "state()",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.disabled": "isDisabled() ? \"\" : null",
+				"attr.class": "classes()"
+			}
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => UiCheckbox),
+			multi: true
+		}],
+		hostDirectives: [{ directive: i1.UiElementHost }],
+		ngImport: i0,
+		template: `
+    @if (state() !== 'unchecked') {
+      <span
+        data-slot="checkbox-indicator"
+        [attr.data-state]="state()"
+        class="grid place-content-center text-current transition-none [&>svg]:size-3.5 [&>ui-icon]:size-3.5"
+        style="pointer-events: none"
+      >
+        @if (indeterminate()) {
+          <svg uiIcon="minus"></svg>
+        } @else {
+          <svg uiIcon="check"></svg>
+        }
+      </span>
+    }
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "directive",
+			type: UiIconSvg,
+			selector: "svg[uiIcon]",
+			inputs: [
+				"uiIcon",
+				"icon",
+				"size",
+				"strokeWidth",
+				"absoluteStrokeWidth",
+				"color",
+				"label",
+				"class"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: UiCheckbox,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "button[uiCheckbox], ui-checkbox",
+			hostDirectives: [UiElementHost],
+			imports: [UiIconSvg],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => UiCheckbox),
+				multi: true
+			}],
+			host: {
+				type: "button",
+				role: "checkbox",
+				"data-slot": "checkbox",
+				"[attr.aria-checked]": "indeterminate() ? \"mixed\" : checked()",
+				"[attr.aria-invalid]": "invalid() ? \"true\" : null",
+				"[attr.data-state]": "state()",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.disabled]": "isDisabled() ? \"\" : null",
+				"[attr.class]": "classes()",
+				"(click)": "toggle()",
+				"(keydown.enter)": "$event.preventDefault()",
+				"(blur)": "onTouched()"
+			},
+			template: `
+    @if (state() !== 'unchecked') {
+      <span
+        data-slot="checkbox-indicator"
+        [attr.data-state]="state()"
+        class="grid place-content-center text-current transition-none [&>svg]:size-3.5 [&>ui-icon]:size-3.5"
+        style="pointer-events: none"
+      >
+        @if (indeterminate()) {
+          <svg uiIcon="minus"></svg>
+        } @else {
+          <svg uiIcon="check"></svg>
+        }
+      </span>
+    }
+  `
+		}]
+	}],
+	propDecorators: {
+		checked: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "checked",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["checkedChange"]
+		}],
+		indeterminate: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "indeterminate",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["indeterminateChange"]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		userClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "class",
+				required: false
+			}]
+		}]
+	}
+});
+export { UiCheckbox };
+
+//# sourceMappingURL=loomui-ng-ui-checkbox.mjs.map

package/fesm2022/loomui-ng-ui-checkbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loomui-ng-ui-checkbox.mjs","names":[],"sources":["../../../libs/ui/checkbox/checkbox.ts"],"sourcesContent":["import {\n  booleanAttribute,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { cn } from '@loomui-ng/ui/utils';\nimport { UiIconSvg } from '@loomui-ng/ui/icon';\nimport { UiElementHost } from '@loomui-ng/ui/utils';\n\nconst checkboxClasses =\n  'peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 group-has-[:focus-visible]/field-label:not-data-checked:border-input after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary';\n\n/**\n * <button uiCheckbox [(checked)]=\"x\"></button>\n *\n * Works with: [(checked)] two-way binding, ngModel / reactive forms (ControlValueAccessor),\n * and signal forms (`checked` model + `disabled`/`invalid` inputs match FormCheckboxControl).\n */\n@Component({\n  selector: 'button[uiCheckbox], ui-checkbox', hostDirectives: [UiElementHost],\n  imports: [UiIconSvg],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => UiCheckbox), multi: true }],\n  host: {\n    type: 'button',\n    role: 'checkbox',\n    'data-slot': 'checkbox',\n    '[attr.aria-checked]': 'indeterminate() ? \"mixed\" : checked()',\n    '[attr.aria-invalid]': 'invalid() ? \"true\" : null',\n    '[attr.data-state]': 'state()',\n    '[attr.data-disabled]': 'isDisabled() ? \"\" : null',\n    '[attr.disabled]': 'isDisabled() ? \"\" : null',\n    '[attr.class]': 'classes()',\n    '(click)': 'toggle()',\n    // Observed on live site: Space toggles, Enter does not.\n    '(keydown.enter)': '$event.preventDefault()',\n    '(blur)': 'onTouched()',\n  },\n  template: `\n    @if (state() !== 'unchecked') {\n      <span\n        data-slot=\"checkbox-indicator\"\n        [attr.data-state]=\"state()\"\n        class=\"grid place-content-center text-current transition-none [&>svg]:size-3.5 [&>ui-icon]:size-3.5\"\n        style=\"pointer-events: none\"\n      >\n        @if (indeterminate()) {\n          <svg uiIcon=\"minus\"></svg>\n        } @else {\n          <svg uiIcon=\"check\"></svg>\n        }\n      </span>\n    }\n  `,\n})\nexport class UiCheckbox implements ControlValueAccessor {\n  readonly checked = model(false);\n  readonly indeterminate = model(false);\n  readonly disabled = input(false, { transform: booleanAttribute });\n  readonly invalid = input(false, { transform: booleanAttribute });\n  readonly userClass = input<string>('', { alias: 'class' });\n\n  private readonly cvaDisabled = signal(false);\n  protected readonly isDisabled = computed(() => this.disabled() || this.cvaDisabled());\n  protected readonly state = computed(() => (this.indeterminate() ? 'indeterminate' : this.checked() ? 'checked' : 'unchecked'));\n  protected readonly classes = computed(() => cn(checkboxClasses, this.userClass()));\n\n  private onChange: (v: boolean) => void = () => {};\n  protected onTouched: () => void = () => {};\n\n  protected toggle(): void {\n    if (this.isDisabled()) return;\n    const next = this.indeterminate() ? true : !this.checked();\n    this.indeterminate.set(false);\n    this.checked.set(next);\n    this.onChange(next);\n  }\n\n  writeValue(v: boolean | null): void {\n    this.checked.set(!!v);\n  }\n  registerOnChange(fn: (v: boolean) => void): void {\n    this.onChange = fn;\n  }\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n  setDisabledState(d: boolean): void {\n    this.cvaDisabled.set(d);\n  }\n}\n"],"mappings":"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"}