@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-sparkline.mjs

@@ -0,0 +1,318 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, afterNextRender, computed, inject, input, signal } from "@angular/core";
+import { formatChartValue, linearPath, smoothPath, toFinite } from "@lifecorner/angular-ui-kit/internal/chart";
+var SparklineComponent = class SparklineComponent {
+	_el = inject(ElementRef);
+	_destroyRef = inject(DestroyRef);
+	_containerWidth = signal(0, ...ngDevMode ? [{ debugName: "_containerWidth" }] : /* istanbul ignore next */ []);
+	constructor() {
+		afterNextRender(() => {
+			const obs = new ResizeObserver(([entry]) => {
+				this._containerWidth.set(entry.contentRect.width);
+			});
+			obs.observe(this._el.nativeElement);
+			this._destroyRef.onDestroy(() => obs.disconnect());
+		});
+	}
+	data = input.required(...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	color = input("primary", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	width = input(120, ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	height = input(32, ...ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []);
+	strokeWidth = input(2, ...ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []);
+	filled = input(false, ...ngDevMode ? [{ debugName: "filled" }] : /* istanbul ignore next */ []);
+	curve = input("smooth", ...ngDevMode ? [{ debugName: "curve" }] : /* istanbul ignore next */ []);
+	showEndDot = input(false, ...ngDevMode ? [{ debugName: "showEndDot" }] : /* istanbul ignore next */ []);
+	fluid = input(false, ...ngDevMode ? [{ debugName: "fluid" }] : /* istanbul ignore next */ []);
+	formatValue = input(formatChartValue, ...ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	colorVar = computed(() => {
+		return {
+			primary: "var(--color-primary-500)",
+			secondary: "var(--color-secondary-500)",
+			success: "var(--color-success-default)",
+			warning: "var(--color-warning-default)",
+			error: "var(--color-error-default)",
+			info: "var(--color-info-default)"
+		}[this.color()];
+	}, ...ngDevMode ? [{ debugName: "colorVar" }] : /* istanbul ignore next */ []);
+	fillColorVar = computed(() => {
+		return {
+			primary: "var(--color-primary-100)",
+			secondary: "var(--color-secondary-100)",
+			success: "var(--color-success-light)",
+			warning: "var(--color-warning-light)",
+			error: "var(--color-error-light)",
+			info: "var(--color-info-light)"
+		}[this.color()];
+	}, ...ngDevMode ? [{ debugName: "fillColorVar" }] : /* istanbul ignore next */ []);
+	values = computed(() => (this.data() ?? []).map((v) => toFinite(v)), ...ngDevMode ? [{ debugName: "values" }] : /* istanbul ignore next */ []);
+	effectiveWidth = computed(() => this.fluid() ? this._containerWidth() || this.width() : this.width(), ...ngDevMode ? [{ debugName: "effectiveWidth" }] : /* istanbul ignore next */ []);
+	viewBox = computed(() => `0 0 ${this.effectiveWidth()} ${this.height()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	layout = computed(() => {
+		const d = this.values();
+		if (d.length < 2) return null;
+		const w = this.effectiveWidth();
+		const h = this.height();
+		const padding = this.strokeWidth();
+		const plotW = w - padding * 2;
+		const plotH = h - padding * 2;
+		const min = Math.min(...d);
+		const range = Math.max(...d) - min || 1;
+		return {
+			points: d.map((v, i) => ({
+				x: padding + i / (d.length - 1) * plotW,
+				y: padding + plotH - (v - min) / range * plotH
+			})),
+			padding,
+			plotW,
+			bottomY: h - padding
+		};
+	}, ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	pathD = computed(() => {
+		const l = this.layout();
+		if (!l) return "";
+		return this.curve() === "linear" ? linearPath(l.points) : smoothPath(l.points);
+	}, ...ngDevMode ? [{ debugName: "pathD" }] : /* istanbul ignore next */ []);
+	areaD = computed(() => {
+		if (!this.filled()) return "";
+		const line = this.pathD();
+		const l = this.layout();
+		if (!line || !l) return "";
+		return `${line} L${l.padding + l.plotW},${l.bottomY} L${l.padding},${l.bottomY} Z`;
+	}, ...ngDevMode ? [{ debugName: "areaD" }] : /* istanbul ignore next */ []);
+	endDot = computed(() => {
+		if (!this.showEndDot()) return null;
+		const l = this.layout();
+		if (!l) return null;
+		const last = l.points[l.points.length - 1];
+		return {
+			cx: last.x,
+			cy: last.y,
+			r: this.strokeWidth() + 1
+		};
+	}, ...ngDevMode ? [{ debugName: "endDot" }] : /* istanbul ignore next */ []);
+	effectiveAriaLabel = computed(() => {
+		const explicit = this.ariaLabel();
+		if (explicit) return explicit;
+		const d = this.values();
+		if (!d.length) return "Sparkline: no data";
+		const fmt = this.formatValue();
+		return `Sparkline: ${d.length} ${d.length === 1 ? "point" : "points"}, min ${fmt(Math.min(...d))}, max ${fmt(Math.max(...d))}, last ${fmt(d[d.length - 1])}`;
+	}, ...ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SparklineComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SparklineComponent,
+		isStandalone: true,
+		selector: "lc-sparkline",
+		inputs: {
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			strokeWidth: {
+				classPropertyName: "strokeWidth",
+				publicName: "strokeWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			filled: {
+				classPropertyName: "filled",
+				publicName: "filled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			curve: {
+				classPropertyName: "curve",
+				publicName: "curve",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showEndDot: {
+				classPropertyName: "showEndDot",
+				publicName: "showEndDot",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fluid: {
+				classPropertyName: "fluid",
+				publicName: "fluid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			formatValue: {
+				classPropertyName: "formatValue",
+				publicName: "formatValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"class.lc-sparkline--fluid": "fluid()",
+			"style.width.px": "fluid() ? null : width()"
+		} },
+		ngImport: i0,
+		template: "<svg\n  width=\"100%\"\n  [attr.height]=\"height()\"\n  [attr.viewBox]=\"viewBox()\"\n  class=\"lc-sparkline\"\n  role=\"img\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n>\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  @if (areaD()) {\n    <path\n      [attr.d]=\"areaD()\"\n      [attr.fill]=\"fillColorVar()\"\n      class=\"lc-sparkline__area\"\n    />\n  }\n\n  @if (pathD()) {\n    <path\n      [attr.d]=\"pathD()\"\n      [attr.stroke]=\"colorVar()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"lc-sparkline__line\"\n    />\n  }\n\n  @if (endDot(); as dot) {\n    <circle\n      [attr.cx]=\"dot.cx\"\n      [attr.cy]=\"dot.cy\"\n      [attr.r]=\"dot.r\"\n      [attr.fill]=\"colorVar()\"\n      class=\"lc-sparkline__dot\"\n    />\n  }\n</svg>\n",
+		styles: [":host{display:inline-block;vertical-align:middle}:host(.lc-sparkline--fluid){display:block;width:100%}.lc-sparkline{display:block;overflow:visible}.lc-sparkline__area{opacity:.2}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SparklineComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-sparkline",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class.lc-sparkline--fluid]": "fluid()",
+				"[style.width.px]": "fluid() ? null : width()"
+			},
+			template: "<svg\n  width=\"100%\"\n  [attr.height]=\"height()\"\n  [attr.viewBox]=\"viewBox()\"\n  class=\"lc-sparkline\"\n  role=\"img\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n>\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  @if (areaD()) {\n    <path\n      [attr.d]=\"areaD()\"\n      [attr.fill]=\"fillColorVar()\"\n      class=\"lc-sparkline__area\"\n    />\n  }\n\n  @if (pathD()) {\n    <path\n      [attr.d]=\"pathD()\"\n      [attr.stroke]=\"colorVar()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"lc-sparkline__line\"\n    />\n  }\n\n  @if (endDot(); as dot) {\n    <circle\n      [attr.cx]=\"dot.cx\"\n      [attr.cy]=\"dot.cy\"\n      [attr.r]=\"dot.r\"\n      [attr.fill]=\"colorVar()\"\n      class=\"lc-sparkline__dot\"\n    />\n  }\n</svg>\n",
+			styles: [":host{display:inline-block;vertical-align:middle}:host(.lc-sparkline--fluid){display:block;width:100%}.lc-sparkline{display:block;overflow:visible}.lc-sparkline__area{opacity:.2}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: true
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		strokeWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "strokeWidth",
+				required: false
+			}]
+		}],
+		filled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "filled",
+				required: false
+			}]
+		}],
+		curve: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "curve",
+				required: false
+			}]
+		}],
+		showEndDot: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showEndDot",
+				required: false
+			}]
+		}],
+		fluid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fluid",
+				required: false
+			}]
+		}],
+		formatValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formatValue",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { SparklineComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-sparkline.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-sparkline.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-sparkline.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/sparkline/sparkline.component.ts","../../../../libs/angular-ui-kit/src/lib/sparkline/sparkline.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  afterNextRender,\n  inject,\n  input,\n  computed,\n  signal,\n} from '@angular/core';\nimport { linearPath, smoothPath } from '@lifecorner/angular-ui-kit/internal/chart';\nimport { ChartValueFormatter, formatChartValue, toFinite } from '@lifecorner/angular-ui-kit/internal/chart';\n\nexport type SparklineColor = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info';\nexport type SparklineCurve = 'linear' | 'smooth';\n\n@Component({\n  selector: 'lc-sparkline',\n  standalone: true,\n  templateUrl: './sparkline.component.html',\n  styleUrls: ['./sparkline.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.lc-sparkline--fluid]': 'fluid()',\n    '[style.width.px]': 'fluid() ? null : width()',\n  },\n})\n/**\n * Sparkline component for compact inline trend visualization.\n *\n * Features:\n * - Linear or smooth curve interpolation\n * - Optional area fill below the line\n * - Color theme variants (primary, secondary, success, warning, error)\n * - Optional end-dot indicator\n * - Fixed `width` × `height` inline box, or `fluid` to fill the container\n * - Lightweight SVG rendering\n *\n * @example\n * ```html\n * <lc-sparkline [data]=\"[10, 25, 15, 30, 20]\" color=\"primary\" [filled]=\"true\" />\n * ```\n */\nexport class SparklineComponent {\n  private readonly _el = inject(ElementRef);\n  private readonly _destroyRef = inject(DestroyRef);\n  private readonly _containerWidth = signal<number>(0);\n\n  constructor() {\n    afterNextRender(() => {\n      const obs = new ResizeObserver(([entry]) => {\n        this._containerWidth.set(entry.contentRect.width);\n      });\n      obs.observe(this._el.nativeElement);\n      this._destroyRef.onDestroy(() => obs.disconnect());\n    });\n  }\n\n  /** Data points to plot. */\n  data = input.required<number[]>();\n\n  /** Stroke color theme. */\n  color = input<SparklineColor>('primary');\n\n  /**\n   * Width of the sparkline in pixels. The host is an inline-block of exactly\n   * this width unless `fluid` is set, in which case the sparkline fills its\n   * container and `width` only serves as the viewBox width until the container\n   * has been measured.\n   */\n  width = input<number>(120);\n\n  /** Height of the SVG in pixels. */\n  height = input<number>(32);\n\n  /** Stroke width in pixels. */\n  strokeWidth = input<number>(2);\n\n  /** Show a filled area under the line. */\n  filled = input<boolean>(false);\n\n  /** Curve interpolation mode. */\n  curve = input<SparklineCurve>('smooth');\n\n  /** Show a dot on the last data point. */\n  showEndDot = input<boolean>(false);\n\n  /** Stretch to the container width instead of the fixed `width`. */\n  fluid = input<boolean>(false);\n\n  /** Formats values in the generated accessible summary. Defaults to a float-safe `String(value)`. */\n  formatValue = input<ChartValueFormatter>(formatChartValue);\n\n  /**\n   * Accessible name of the sparkline. Defaults to a generated summary such as\n   * \"Sparkline: 10 points, min 4, max 18, last 18\".\n   */\n  ariaLabel = input<string>('');\n\n  protected readonly colorVar = computed(() => {\n    const map: Record<SparklineColor, string> = {\n      primary: 'var(--color-primary-500)',\n      secondary: 'var(--color-secondary-500)',\n      success: 'var(--color-success-default)',\n      warning: 'var(--color-warning-default)',\n      error: 'var(--color-error-default)',\n      info: 'var(--color-info-default)',\n    };\n    return map[this.color()];\n  });\n\n  protected readonly fillColorVar = computed(() => {\n    const map: Record<SparklineColor, string> = {\n      primary: 'var(--color-primary-100)',\n      secondary: 'var(--color-secondary-100)',\n      success: 'var(--color-success-light)',\n      warning: 'var(--color-warning-light)',\n      error: 'var(--color-error-light)',\n      info: 'var(--color-info-light)',\n    };\n    return map[this.color()];\n  });\n\n  private readonly values = computed(() => (this.data() ?? []).map((v) => toFinite(v)));\n\n  protected readonly effectiveWidth = computed(() =>\n    this.fluid() ? this._containerWidth() || this.width() : this.width()\n  );\n\n  protected readonly viewBox = computed(\n    () => `0 0 ${this.effectiveWidth()} ${this.height()}`\n  );\n\n  /** Plot geometry and the data mapped into it; null with fewer than two points. */\n  private readonly layout = computed(() => {\n    const d = this.values();\n    if (d.length < 2) return null;\n\n    const w = this.effectiveWidth();\n    const h = this.height();\n    const padding = this.strokeWidth();\n    const plotW = w - padding * 2;\n    const plotH = h - padding * 2;\n\n    const min = Math.min(...d);\n    const max = Math.max(...d);\n    const range = max - min || 1;\n\n    const points = d.map((v, i) => ({\n      x: padding + (i / (d.length - 1)) * plotW,\n      y: padding + plotH - ((v - min) / range) * plotH,\n    }));\n    return { points, padding, plotW, bottomY: h - padding };\n  });\n\n  protected readonly pathD = computed(() => {\n    const l = this.layout();\n    if (!l) return '';\n    return this.curve() === 'linear' ? linearPath(l.points) : smoothPath(l.points);\n  });\n\n  protected readonly areaD = computed(() => {\n    if (!this.filled()) return '';\n    const line = this.pathD();\n    const l = this.layout();\n    if (!line || !l) return '';\n    return `${line} L${l.padding + l.plotW},${l.bottomY} L${l.padding},${l.bottomY} Z`;\n  });\n\n  protected readonly endDot = computed(() => {\n    if (!this.showEndDot()) return null;\n    const l = this.layout();\n    if (!l) return null;\n    const last = l.points[l.points.length - 1];\n    return { cx: last.x, cy: last.y, r: this.strokeWidth() + 1 };\n  });\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const d = this.values();\n    if (!d.length) return 'Sparkline: no data';\n    const fmt = this.formatValue();\n    return `Sparkline: ${d.length} ${d.length === 1 ? 'point' : 'points'}, min ${fmt(Math.min(...d))}, max ${fmt(Math.max(...d))}, last ${fmt(d[d.length - 1])}`;\n  });\n}\n","<svg\n  width=\"100%\"\n  [attr.height]=\"height()\"\n  [attr.viewBox]=\"viewBox()\"\n  class=\"lc-sparkline\"\n  role=\"img\"\n  [attr.aria-label]=\"effectiveAriaLabel()\"\n>\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  @if (areaD()) {\n    <path\n      [attr.d]=\"areaD()\"\n      [attr.fill]=\"fillColorVar()\"\n      class=\"lc-sparkline__area\"\n    />\n  }\n\n  @if (pathD()) {\n    <path\n      [attr.d]=\"pathD()\"\n      [attr.stroke]=\"colorVar()\"\n      [attr.stroke-width]=\"strokeWidth()\"\n      fill=\"none\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      class=\"lc-sparkline__line\"\n    />\n  }\n\n  @if (endDot(); as dot) {\n    <circle\n      [attr.cx]=\"dot.cx\"\n      [attr.cy]=\"dot.cy\"\n      [attr.r]=\"dot.r\"\n      [attr.fill]=\"colorVar()\"\n      class=\"lc-sparkline__dot\"\n    />\n  }\n</svg>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-spinner.mjs

@@ -0,0 +1,95 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var SpinnerComponent = class SpinnerComponent {
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	message = input(...ngDevMode ? [void 0, { debugName: "message" }] : /* istanbul ignore next */ []);
+	loadingLabel = input("Loading", ...ngDevMode ? [{ debugName: "loadingLabel" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => `spinner spinner--${this.size()}`, ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SpinnerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SpinnerComponent,
+		isStandalone: true,
+		selector: "lc-spinner",
+		inputs: {
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			message: {
+				classPropertyName: "message",
+				publicName: "message",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loadingLabel: {
+				classPropertyName: "loadingLabel",
+				publicName: "loadingLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div class=\"spinner\" [class]=\"hostClasses()\" role=\"status\" aria-live=\"polite\">\n  <div class=\"spinner__circle\"></div>\n  @if (message()) {\n    <p class=\"spinner__message\">{{ message() }}</p>\n  } @else {\n    <!-- Screen-reader fallback when no visible message is given. -->\n    <span class=\"sr-only spinner__sr-only\">{{ loadingLabel() }}</span>\n  }\n</div>\n",
+		styles: [".spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 0;gap:.75rem}.spinner__circle{border-radius:var(--border-radius-full);border:2px solid var(--color-primary-200, #bfdbfe);border-top-color:var(--color-primary-600, #2563eb);animation:lc-spin .75s linear infinite}.spinner__message{margin:0;font-size:.875rem;color:var(--color-text-tertiary)}.spinner--sm{padding:1rem 0}.spinner--sm .spinner__circle{width:1.25rem;height:1.25rem}.spinner--sm .spinner__message{font-size:.75rem}.spinner--md .spinner__circle{width:2rem;height:2rem}.spinner--lg{padding:4rem 0}.spinner--lg .spinner__circle{width:2.5rem;height:2.5rem;border-width:3px}.spinner--lg .spinner__message{font-size:1rem}.spinner__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes lc-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner__circle{animation-duration:1.5s}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SpinnerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-spinner",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"spinner\" [class]=\"hostClasses()\" role=\"status\" aria-live=\"polite\">\n  <div class=\"spinner__circle\"></div>\n  @if (message()) {\n    <p class=\"spinner__message\">{{ message() }}</p>\n  } @else {\n    <!-- Screen-reader fallback when no visible message is given. -->\n    <span class=\"sr-only spinner__sr-only\">{{ loadingLabel() }}</span>\n  }\n</div>\n",
+			styles: [".spinner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 0;gap:.75rem}.spinner__circle{border-radius:var(--border-radius-full);border:2px solid var(--color-primary-200, #bfdbfe);border-top-color:var(--color-primary-600, #2563eb);animation:lc-spin .75s linear infinite}.spinner__message{margin:0;font-size:.875rem;color:var(--color-text-tertiary)}.spinner--sm{padding:1rem 0}.spinner--sm .spinner__circle{width:1.25rem;height:1.25rem}.spinner--sm .spinner__message{font-size:.75rem}.spinner--md .spinner__circle{width:2rem;height:2rem}.spinner--lg{padding:4rem 0}.spinner--lg .spinner__circle{width:2.5rem;height:2.5rem;border-width:3px}.spinner--lg .spinner__message{font-size:1rem}.spinner__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes lc-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.spinner__circle{animation-duration:1.5s}}\n"]
+		}]
+	}],
+	propDecorators: {
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}],
+		loadingLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { SpinnerComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-spinner.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-spinner.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-spinner.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/spinner/spinner.component.ts","../../../../libs/angular-ui-kit/src/lib/spinner/spinner.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';\n\nexport type SpinnerSize = 'sm' | 'md' | 'lg';\n\n/**\n * Spinner component for loading state indication.\n *\n * Features:\n * - Animated spinning indicator\n * - Size variants (sm, md, lg)\n * - Optional message text below spinner\n * - Design system color token integration\n * - Accessible with ARIA status role\n *\n * @example\n * ```html\n * <lc-spinner />\n * <lc-spinner size=\"lg\" message=\"Loading data...\" />\n * ```\n */\n@Component({\n  selector: 'lc-spinner',\n  standalone: true,\n  templateUrl: './spinner.component.html',\n  styleUrl: './spinner.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SpinnerComponent {\n  /**\n   * Size of the spinner\n   * @default 'md'\n   */\n  readonly size = input<SpinnerSize>('md');\n\n  /**\n   * Optional loading message displayed below the spinner\n   */\n  readonly message = input<string>();\n\n  /** Screen-reader text while no visible `message` is set. */\n  readonly loadingLabel = input('Loading');\n\n  protected readonly hostClasses = computed(() => `spinner spinner--${this.size()}`);\n}\n","<div class=\"spinner\" [class]=\"hostClasses()\" role=\"status\" aria-live=\"polite\">\n  <div class=\"spinner__circle\"></div>\n  @if (message()) {\n    <p class=\"spinner__message\">{{ message() }}</p>\n  } @else {\n    <!-- Screen-reader fallback when no visible message is given. -->\n    <span class=\"sr-only spinner__sr-only\">{{ loadingLabel() }}</span>\n  }\n</div>\n"],"mappings":";;AA2BA,IAAa,mBAAb,MAAa,iBAAgB;CAKlB,OAAO,MAAmB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAK/B,UAAU,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGzB,eAAe,MAAM,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAErB,cAAc,eAAe,oBAAoB,KAAK,KAAI,KAAK,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAfvE,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UC3B7B;EASA,QAAA,CAAA,s+BAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADkBa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAP5B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAY,YACV;GAAI,iBAGC,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,s+BAAA;EAAA,CAAA"}