@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

package/fesm2022/lifecorner-angular-ui-kit-stage-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-stage-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/stage-list/stage-list.component.ts","../../../../libs/angular-ui-kit/src/lib/stage-list/stage-list.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  output,\n} from '@angular/core';\n\nexport interface StageItem {\n  /** Stage name shown as the row label. */\n  label: string;\n  /** Numeric value; drives the bar width and the right-aligned count. */\n  value: number;\n  /** Optional bar/dot color (any CSS color). Falls back to the primary token. */\n  color?: string;\n  /** Optional secondary text shown under the label (e.g. a hint). */\n  hint?: string;\n  /** Optional opaque payload echoed back in `stageClick`. */\n  id?: string;\n}\n\nexport type StageListSize = 'sm' | 'md';\n\n@Component({\n  selector: 'lc-stage-list',\n  standalone: true,\n  templateUrl: './stage-list.component.html',\n  styleUrls: ['./stage-list.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StageListComponent {\n  readonly stages = input.required<StageItem[]>();\n  readonly max = input<number | null>(null);\n  readonly showValue = input<boolean>(true);\n  readonly showBar = input<boolean>(true);\n  readonly size = input<StageListSize>('md');\n  readonly clickable = input<boolean>(false);\n  readonly emptyText = input<string>('');\n\n  readonly stageClick = output<StageItem>();\n\n  protected readonly isEmpty = computed(() => this.stages().length === 0);\n\n  protected readonly resolvedMax = computed(() => {\n    const explicitMax = this.max();\n    if (typeof explicitMax === 'number' && Number.isFinite(explicitMax) && explicitMax > 0) {\n      return explicitMax;\n    }\n\n    const numericValues = this.stages()\n      .map((stage) => (Number.isFinite(stage.value) ? stage.value : 0));\n\n    return Math.max(1, ...numericValues);\n  });\n\n  protected resolveColor(stage: StageItem): string {\n    if (typeof stage.color === 'string' && stage.color.trim()) {\n      return stage.color;\n    }\n\n    return 'var(--lc-color-primary-500, var(--color-primary-500))';\n  }\n\n  protected fillWidth(stage: StageItem): string {\n    const value = Number.isFinite(stage.value) ? stage.value : 0;\n    if (value <= 0) {\n      return '0%';\n    }\n\n    const maxValue = this.resolvedMax();\n    const safeMax = maxValue > 0 ? maxValue : 1;\n    const pct = Math.round((value / safeMax) * 100);\n    const clampedPct = Math.max(0, Math.min(100, pct));\n\n    return `max(2px, ${clampedPct}%)`;\n  }\n\n  protected onStageClick(stage: StageItem): void {\n    if (!this.clickable()) {\n      return;\n    }\n\n    this.stageClick.emit(stage);\n  }\n}\n","@if (isEmpty()) {\n  @if (emptyText()) {\n    <p class=\"lc-stage-list__empty\">{{ emptyText() }}</p>\n  }\n} @else {\n  <div class=\"lc-stage-list\" [class.lc-stage-list--sm]=\"size() === 'sm'\" [class.lc-stage-list--md]=\"size() === 'md'\" role=\"list\">\n    @for (stage of stages(); track stage.id || stage.label || $index) {\n      <div class=\"lc-stage-list__row\" role=\"listitem\" [style.--lc-stage-color]=\"resolveColor(stage)\">\n        @if (clickable()) {\n          <button type=\"button\" class=\"lc-stage-list__interactive\" (click)=\"onStageClick(stage)\">\n            <div class=\"lc-stage-list__head\">\n              <span class=\"lc-stage-list__dot\" aria-hidden=\"true\"></span>\n              <div class=\"lc-stage-list__label-wrap\">\n                <span class=\"lc-stage-list__label\">{{ stage.label }}</span>\n                @if (stage.hint) {\n                  <span class=\"lc-stage-list__hint\">{{ stage.hint }}</span>\n                }\n              </div>\n              @if (showValue()) {\n                <span class=\"lc-stage-list__value\">{{ stage.value }}</span>\n              }\n            </div>\n            @if (showBar()) {\n              <div class=\"lc-stage-list__track\" aria-hidden=\"true\">\n                <div class=\"lc-stage-list__fill\" [style.width]=\"fillWidth(stage)\"></div>\n              </div>\n            }\n          </button>\n        } @else {\n          <div class=\"lc-stage-list__content\">\n            <div class=\"lc-stage-list__head\">\n              <span class=\"lc-stage-list__dot\" aria-hidden=\"true\"></span>\n              <div class=\"lc-stage-list__label-wrap\">\n                <span class=\"lc-stage-list__label\">{{ stage.label }}</span>\n                @if (stage.hint) {\n                  <span class=\"lc-stage-list__hint\">{{ stage.hint }}</span>\n                }\n              </div>\n              @if (showValue()) {\n                <span class=\"lc-stage-list__value\">{{ stage.value }}</span>\n              }\n            </div>\n            @if (showBar()) {\n              <div class=\"lc-stage-list__track\" aria-hidden=\"true\">\n                <div class=\"lc-stage-list__fill\" [style.width]=\"fillWidth(stage)\"></div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-stat-trend.mjs

@@ -0,0 +1,224 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { SparklineComponent } from "@lifecorner/angular-ui-kit/sparkline";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var StatTrendComponent = class StatTrendComponent {
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	change = input("", ...ngDevMode ? [{ debugName: "change" }] : /* istanbul ignore next */ []);
+	direction = input(void 0, ...ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []);
+	sparklineData = input([], ...ngDevMode ? [{ debugName: "sparklineData" }] : /* istanbul ignore next */ []);
+	sparklineColor = input(void 0, ...ngDevMode ? [{ debugName: "sparklineColor" }] : /* istanbul ignore next */ []);
+	icon = input("", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	resolvedDirection = computed(() => {
+		const dir = this.direction();
+		if (dir) return dir;
+		const c = this.change();
+		if (c.startsWith("+") || c.startsWith("↑")) return "up";
+		if (c.startsWith("-") || c.startsWith("↓")) return "down";
+		return "neutral";
+	}, ...ngDevMode ? [{ debugName: "resolvedDirection" }] : /* istanbul ignore next */ []);
+	trendColorClass = computed(() => {
+		return {
+			up: "lc-stat-trend__change--up",
+			down: "lc-stat-trend__change--down",
+			neutral: "lc-stat-trend__change--neutral"
+		}[this.resolvedDirection()];
+	}, ...ngDevMode ? [{ debugName: "trendColorClass" }] : /* istanbul ignore next */ []);
+	resolvedSparklineColor = computed(() => {
+		const c = this.sparklineColor();
+		if (c) return c;
+		return {
+			up: "success",
+			down: "error",
+			neutral: "info"
+		}[this.resolvedDirection()];
+	}, ...ngDevMode ? [{ debugName: "resolvedSparklineColor" }] : /* istanbul ignore next */ []);
+	trendIcon = computed(() => {
+		return {
+			up: "↑",
+			down: "↓",
+			neutral: "→"
+		}[this.resolvedDirection()];
+	}, ...ngDevMode ? [{ debugName: "trendIcon" }] : /* istanbul ignore next */ []);
+	hasSparkline = computed(() => this.sparklineData().length >= 2, ...ngDevMode ? [{ debugName: "hasSparkline" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: StatTrendComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: StatTrendComponent,
+		isStandalone: true,
+		selector: "lc-stat-trend",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			change: {
+				classPropertyName: "change",
+				publicName: "change",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			direction: {
+				classPropertyName: "direction",
+				publicName: "direction",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sparklineData: {
+				classPropertyName: "sparklineData",
+				publicName: "sparklineData",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sparklineColor: {
+				classPropertyName: "sparklineColor",
+				publicName: "sparklineColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div class=\"lc-stat-trend\">\n  <div class=\"lc-stat-trend__header\">\n    @if (label()) {\n      <span class=\"lc-stat-trend__label\">{{ label() }}</span>\n    }\n    @if (icon()) {\n      <lc-icon [name]=\"icon()\" size=\"sm\" class=\"lc-stat-trend__header-icon\" [decorative]=\"true\" />\n    }\n  </div>\n\n  <div class=\"lc-stat-trend__row\">\n    <span class=\"lc-stat-trend__value\">{{ value() }}</span>\n\n    @if (change()) {\n      <span class=\"lc-stat-trend__change\" [class]=\"trendColorClass()\">\n        <span class=\"lc-stat-trend__icon\">{{ trendIcon() }}</span>\n        {{ change() }}\n      </span>\n    }\n  </div>\n\n  @if (hasSparkline()) {\n    <lc-sparkline\n      [data]=\"sparklineData()\"\n      [color]=\"resolvedSparklineColor()\"\n      [width]=\"120\"\n      [height]=\"28\"\n      [filled]=\"true\"\n      [strokeWidth]=\"1.5\"\n    ></lc-sparkline>\n  }\n</div>\n",
+		styles: [".lc-stat-trend{display:inline-flex;flex-direction:column;gap:.25rem}.lc-stat-trend__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.lc-stat-trend__header-icon{color:var(--color-text-tertiary);flex-shrink:0}.lc-stat-trend__label{font-size:var(--typography-font-size-xs, .75rem);color:var(--color-text-tertiary);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.lc-stat-trend__row{display:flex;align-items:baseline;gap:.5rem}.lc-stat-trend__value{font-size:var(--typography-font-size-2xl, 1.5rem);font-weight:700;color:var(--color-text-primary);line-height:1.2}.lc-stat-trend__change{display:inline-flex;align-items:center;gap:.125rem;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;border-radius:var(--border-radius-full);padding:.0625rem .5rem}.lc-stat-trend__change--up{color:var(--color-success);background-color:#8ea4752e}.lc-stat-trend__change--down{color:var(--color-error);background-color:#9d0e0e2e}.lc-stat-trend__change--neutral{color:var(--color-text-secondary);background-color:var(--color-surface-hover)}.lc-stat-trend__icon{font-size:.75em}\n"],
+		dependencies: [{
+			kind: "component",
+			type: SparklineComponent,
+			selector: "lc-sparkline",
+			inputs: [
+				"data",
+				"color",
+				"width",
+				"height",
+				"strokeWidth",
+				"filled",
+				"curve",
+				"showEndDot",
+				"fluid",
+				"formatValue",
+				"ariaLabel"
+			]
+		}, {
+			kind: "component",
+			type: IconComponent,
+			selector: "lc-icon",
+			inputs: [
+				"name",
+				"variant",
+				"size",
+				"color",
+				"ariaLabel",
+				"decorative",
+				"strict"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: StatTrendComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-stat-trend",
+			standalone: true,
+			imports: [SparklineComponent, IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"lc-stat-trend\">\n  <div class=\"lc-stat-trend__header\">\n    @if (label()) {\n      <span class=\"lc-stat-trend__label\">{{ label() }}</span>\n    }\n    @if (icon()) {\n      <lc-icon [name]=\"icon()\" size=\"sm\" class=\"lc-stat-trend__header-icon\" [decorative]=\"true\" />\n    }\n  </div>\n\n  <div class=\"lc-stat-trend__row\">\n    <span class=\"lc-stat-trend__value\">{{ value() }}</span>\n\n    @if (change()) {\n      <span class=\"lc-stat-trend__change\" [class]=\"trendColorClass()\">\n        <span class=\"lc-stat-trend__icon\">{{ trendIcon() }}</span>\n        {{ change() }}\n      </span>\n    }\n  </div>\n\n  @if (hasSparkline()) {\n    <lc-sparkline\n      [data]=\"sparklineData()\"\n      [color]=\"resolvedSparklineColor()\"\n      [width]=\"120\"\n      [height]=\"28\"\n      [filled]=\"true\"\n      [strokeWidth]=\"1.5\"\n    ></lc-sparkline>\n  }\n</div>\n",
+			styles: [".lc-stat-trend{display:inline-flex;flex-direction:column;gap:.25rem}.lc-stat-trend__header{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.lc-stat-trend__header-icon{color:var(--color-text-tertiary);flex-shrink:0}.lc-stat-trend__label{font-size:var(--typography-font-size-xs, .75rem);color:var(--color-text-tertiary);font-weight:500;text-transform:uppercase;letter-spacing:.05em}.lc-stat-trend__row{display:flex;align-items:baseline;gap:.5rem}.lc-stat-trend__value{font-size:var(--typography-font-size-2xl, 1.5rem);font-weight:700;color:var(--color-text-primary);line-height:1.2}.lc-stat-trend__change{display:inline-flex;align-items:center;gap:.125rem;font-size:var(--typography-font-size-sm, .875rem);font-weight:600;border-radius:var(--border-radius-full);padding:.0625rem .5rem}.lc-stat-trend__change--up{color:var(--color-success);background-color:#8ea4752e}.lc-stat-trend__change--down{color:var(--color-error);background-color:#9d0e0e2e}.lc-stat-trend__change--neutral{color:var(--color-text-secondary);background-color:var(--color-surface-hover)}.lc-stat-trend__icon{font-size:.75em}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		change: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "change",
+				required: false
+			}]
+		}],
+		direction: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "direction",
+				required: false
+			}]
+		}],
+		sparklineData: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sparklineData",
+				required: false
+			}]
+		}],
+		sparklineColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sparklineColor",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}]
+	}
+});
+export { StatTrendComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-stat-trend.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-stat-trend.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-stat-trend.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/stat-trend/stat-trend.component.ts","../../../../libs/angular-ui-kit/src/lib/stat-trend/stat-trend.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\nimport { SparklineComponent, SparklineColor } from '@lifecorner/angular-ui-kit/sparkline';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\nexport type StatTrendDirection = 'up' | 'down' | 'neutral';\n\n@Component({\n  selector: 'lc-stat-trend',\n  standalone: true,\n  imports: [SparklineComponent, IconComponent],\n  templateUrl: './stat-trend.component.html',\n  styleUrls: ['./stat-trend.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Stat trend component for displaying KPI values with change indicators.\n *\n * Features:\n * - Value display with label and optional icon\n * - Change percentage with auto-detected trend direction (up/down/neutral)\n * - Color-coded trend indicator (green for up, red for down)\n * - Optional embedded sparkline chart\n * - Configurable sparkline color theme\n *\n * @example\n * ```html\n * <lc-stat-trend label=\"Revenue\" value=\"$42,350\" change=\"+12.5%\" [sparklineData]=\"data\" />\n * ```\n */\nexport class StatTrendComponent {\n  /** Main KPI label. */\n  label = input<string>('');\n\n  /** Main KPI value to display. */\n  value = input.required<string>();\n\n  /** Change value text, e.g. \"+12%\" or \"-3.5%\". */\n  change = input<string>('');\n\n  /** Trend direction for color coding. Auto-detected from change if not set. */\n  direction = input<StatTrendDirection | undefined>(undefined);\n\n  /** Sparkline data points. If empty, no sparkline is shown. */\n  sparklineData = input<number[]>([]);\n\n  /** Color of the sparkline. Auto-matched to trend direction if not set. */\n  sparklineColor = input<SparklineColor | undefined>(undefined);\n\n  /** Optional icon name (Tabler icon). */\n  icon = input<string>('');\n\n  protected readonly resolvedDirection = computed<StatTrendDirection>(() => {\n    const dir = this.direction();\n    if (dir) return dir;\n    const c = this.change();\n    if (c.startsWith('+') || c.startsWith('↑')) return 'up';\n    if (c.startsWith('-') || c.startsWith('↓')) return 'down';\n    return 'neutral';\n  });\n\n  protected readonly trendColorClass = computed(() => {\n    const map: Record<StatTrendDirection, string> = {\n      up: 'lc-stat-trend__change--up',\n      down: 'lc-stat-trend__change--down',\n      neutral: 'lc-stat-trend__change--neutral',\n    };\n    return map[this.resolvedDirection()];\n  });\n\n  protected readonly resolvedSparklineColor = computed<SparklineColor>(() => {\n    const c = this.sparklineColor();\n    if (c) return c;\n    const map: Record<StatTrendDirection, SparklineColor> = {\n      up: 'success',\n      down: 'error',\n      neutral: 'info',\n    };\n    return map[this.resolvedDirection()];\n  });\n\n  protected readonly trendIcon = computed(() => {\n    const map: Record<StatTrendDirection, string> = {\n      up: '↑',\n      down: '↓',\n      neutral: '→',\n    };\n    return map[this.resolvedDirection()];\n  });\n\n  protected readonly hasSparkline = computed(() => this.sparklineData().length >= 2);\n}\n","<div class=\"lc-stat-trend\">\n  <div class=\"lc-stat-trend__header\">\n    @if (label()) {\n      <span class=\"lc-stat-trend__label\">{{ label() }}</span>\n    }\n    @if (icon()) {\n      <lc-icon [name]=\"icon()\" size=\"sm\" class=\"lc-stat-trend__header-icon\" [decorative]=\"true\" />\n    }\n  </div>\n\n  <div class=\"lc-stat-trend__row\">\n    <span class=\"lc-stat-trend__value\">{{ value() }}</span>\n\n    @if (change()) {\n      <span class=\"lc-stat-trend__change\" [class]=\"trendColorClass()\">\n        <span class=\"lc-stat-trend__icon\">{{ trendIcon() }}</span>\n        {{ change() }}\n      </span>\n    }\n  </div>\n\n  @if (hasSparkline()) {\n    <lc-sparkline\n      [data]=\"sparklineData()\"\n      [color]=\"resolvedSparklineColor()\"\n      [width]=\"120\"\n      [height]=\"28\"\n      [filled]=\"true\"\n      [strokeWidth]=\"1.5\"\n    ></lc-sparkline>\n  }\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-status-dot.mjs

@@ -0,0 +1,122 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from "@angular/core";
+var StatusDotComponent = class StatusDotComponent {
+	tone = input("open", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	pulse = input(false, ...ngDevMode ? [{ debugName: "pulse" }] : /* istanbul ignore next */ []);
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	dotClasses = computed(() => {
+		const classes = [
+			"lc-status-dot",
+			`lc-status-dot--${this.tone()}`,
+			`lc-status-dot--${this.size()}`
+		];
+		if (this.pulse()) classes.push("lc-status-dot--pulse");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "dotClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: StatusDotComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: StatusDotComponent,
+		isStandalone: true,
+		selector: "lc-status-dot",
+		inputs: {
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			pulse: {
+				classPropertyName: "pulse",
+				publicName: "pulse",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<span\n  [class]=\"dotClasses()\"\n  [attr.role]=\"label() ? 'img' : null\"\n  [attr.aria-label]=\"label() || null\"\n  [attr.aria-hidden]=\"label() ? null : 'true'\"\n></span>\n",
+		styles: ["@charset \"UTF-8\";lc-status-dot{display:inline-flex;align-items:center}.lc-status-dot{position:relative;display:inline-block;flex-shrink:0;border-radius:var(--border-radius-full, 9999px);background-color:currentColor}.lc-status-dot--sm{width:.375rem;height:.375rem}.lc-status-dot--md{width:.5rem;height:.5rem}.lc-status-dot--done{color:var(--color-success)}.lc-status-dot--run{color:var(--color-primary-500)}.lc-status-dot--wait{color:var(--color-warning)}.lc-status-dot--blocked{color:var(--color-error)}.lc-status-dot--open{color:var(--color-text-tertiary, var(--color-text-secondary))}.lc-status-dot--pulse:after{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;animation:lc-status-dot-pulse 1.6s ease-out infinite}@keyframes lc-status-dot-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(2.75);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-status-dot--pulse:after{animation:none;display:none}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: StatusDotComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-status-dot",
+			standalone: true,
+			imports: [],
+			encapsulation: ViewEncapsulation.None,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<span\n  [class]=\"dotClasses()\"\n  [attr.role]=\"label() ? 'img' : null\"\n  [attr.aria-label]=\"label() || null\"\n  [attr.aria-hidden]=\"label() ? null : 'true'\"\n></span>\n",
+			styles: ["@charset \"UTF-8\";lc-status-dot{display:inline-flex;align-items:center}.lc-status-dot{position:relative;display:inline-block;flex-shrink:0;border-radius:var(--border-radius-full, 9999px);background-color:currentColor}.lc-status-dot--sm{width:.375rem;height:.375rem}.lc-status-dot--md{width:.5rem;height:.5rem}.lc-status-dot--done{color:var(--color-success)}.lc-status-dot--run{color:var(--color-primary-500)}.lc-status-dot--wait{color:var(--color-warning)}.lc-status-dot--blocked{color:var(--color-error)}.lc-status-dot--open{color:var(--color-text-tertiary, var(--color-text-secondary))}.lc-status-dot--pulse:after{content:\"\";position:absolute;inset:0;border-radius:inherit;background-color:currentColor;animation:lc-status-dot-pulse 1.6s ease-out infinite}@keyframes lc-status-dot-pulse{0%{transform:scale(1);opacity:.5}to{transform:scale(2.75);opacity:0}}@media(prefers-reduced-motion:reduce){.lc-status-dot--pulse:after{animation:none;display:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		pulse: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "pulse",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
+	}
+});
+export { StatusDotComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-status-dot.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-status-dot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-status-dot.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/status-dot/status-dot.component.ts","../../../../libs/angular-ui-kit/src/lib/status-dot/status-dot.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, ViewEncapsulation, input, computed } from '@angular/core';\n\nexport type StatusDotTone = 'done' | 'run' | 'wait' | 'blocked' | 'open';\nexport type StatusDotSize = 'sm' | 'md';\n\n/**\n * Status dot — the small traffic-light atom used in list rows, rails and\n * boards to signal an item's state at a glance.\n *\n * Features:\n * - Five semantic tones: done (success), run (brand teal), wait (warning),\n *   blocked (error), open (neutral)\n * - Optional pulse animation for \"in progress\" states (static under\n *   prefers-reduced-motion)\n * - Decorative by default (aria-hidden); pass `label` to expose the state\n *   to assistive technology\n *\n * @example\n * ```html\n * <lc-status-dot tone=\"run\" [pulse]=\"true\" label=\"In Arbeit\" />\n * <lc-status-dot tone=\"blocked\" />\n * ```\n */\n@Component({\n  selector: 'lc-status-dot',\n  standalone: true,\n  imports: [],\n  templateUrl: './status-dot.component.html',\n  styleUrl: './status-dot.component.scss',\n  encapsulation: ViewEncapsulation.None, // Required for dynamic tone class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StatusDotComponent {\n  /** Semantic tone of the dot */\n  readonly tone = input<StatusDotTone>('open');\n\n  /** Size of the dot (sm = 6px for dense list rows, md = 8px) */\n  readonly size = input<StatusDotSize>('md');\n\n  /**\n   * Pulse animation for \"in progress\" states. Renders static under\n   * prefers-reduced-motion.\n   * @default false\n   */\n  readonly pulse = input(false);\n\n  /**\n   * Accessible label for the state (e.g. \"In Arbeit\"). Without it the dot is\n   * treated as decorative and hidden from assistive technology.\n   */\n  readonly label = input('');\n\n  readonly dotClasses = computed(() => {\n    const classes = ['lc-status-dot', `lc-status-dot--${this.tone()}`, `lc-status-dot--${this.size()}`];\n    if (this.pulse()) {\n      classes.push('lc-status-dot--pulse');\n    }\n    return classes.join(' ');\n  });\n}\n","<span\n  [class]=\"dotClasses()\"\n  [attr.role]=\"label() ? 'img' : null\"\n  [attr.aria-label]=\"label() || null\"\n  [attr.aria-hidden]=\"label() ? null : 'true'\"\n></span>\n"],"mappings":";;AAgCA,IAAa,qBAAb,MAAa,mBAAkB;CAEpB,OAAO,MAAqB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGnC,OAAO,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAOjC,QAAQ,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMpB,QAAQ,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAEjB,aAAa,eAAc;EAClC,MAAM,UAAU;GAAC;GAAiB,kBAAkB,KAAK,KAAI;GAAM,kBAAkB,KAAK,KAAI;EAAI;EAClG,IAAI,KAAK,MAAK,GACZ,QAAQ,KAAK,sBAAsB;EAErC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CA1BS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;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,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UChC/B;EAMA,QAAA,CAAA,g8BAAA;EAAA,iBAAA,GAAA,wBAAA;EAAA,eAAA,GAAA,kBAAA;CAAA,CAAA;;AD0Ba,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAT9B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAe,YACb;GAAI,SACP,CAAA;GAAE,eAGI,kBAAkB;GAAI,iBACpB,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,g8BAAA;EAAA,CAAA"}

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

@@ -0,0 +1,209 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, model, output } from "@angular/core";
+let nextStepperId = 0;
+var StepperComponent = class StepperComponent {
+	steps = input.required(...ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []);
+	activeStep = model(0, ...ngDevMode ? [{ debugName: "activeStep" }] : /* istanbul ignore next */ []);
+	linear = input(true, ...ngDevMode ? [{ debugName: "linear" }] : /* istanbul ignore next */ []);
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	optionalLabel = input("Optional", ...ngDevMode ? [{ debugName: "optionalLabel" }] : /* istanbul ignore next */ []);
+	stepAriaLabel = input("Step {n} of {m}: {label}", ...ngDevMode ? [{ debugName: "stepAriaLabel" }] : /* istanbul ignore next */ []);
+	stepChange = output();
+	instanceId = `lc-stepper-${++nextStepperId}`;
+	totalSteps = computed(() => this.steps().length, ...ngDevMode ? [{ debugName: "totalSteps" }] : /* istanbul ignore next */ []);
+	isFirstStep = computed(() => this.activeStep() === 0, ...ngDevMode ? [{ debugName: "isFirstStep" }] : /* istanbul ignore next */ []);
+	isLastStep = computed(() => this.activeStep() === this.totalSteps() - 1, ...ngDevMode ? [{ debugName: "isLastStep" }] : /* istanbul ignore next */ []);
+	getStepState(index) {
+		const current = this.activeStep();
+		if (index < current) return "completed";
+		if (index === current) return "active";
+		return "pending";
+	}
+	isStepNavigable(index) {
+		return !this.linear() || index <= this.activeStep();
+	}
+	getStepAriaLabel(index) {
+		const step = this.steps()[index];
+		if (!step) return "";
+		const name = this.stepAriaLabel().replace("{n}", String(index + 1)).replace("{m}", String(this.totalSteps())).replace("{label}", step.label);
+		return step.optional ? `${name}, ${this.optionalLabel()}` : name;
+	}
+	getDescriptionId(index) {
+		return this.steps()[index]?.description ? `${this.instanceId}-desc-${index}` : null;
+	}
+	goToStep(index) {
+		if (index === this.activeStep() || !this.isStepNavigable(index)) return;
+		this.activeStep.set(index);
+		this.stepChange.emit(index);
+	}
+	next() {
+		const current = this.activeStep();
+		if (current < this.totalSteps() - 1) {
+			this.activeStep.set(current + 1);
+			this.stepChange.emit(current + 1);
+		}
+	}
+	previous() {
+		const current = this.activeStep();
+		if (current > 0) {
+			this.activeStep.set(current - 1);
+			this.stepChange.emit(current - 1);
+		}
+	}
+	getStepClasses(index) {
+		const state = this.getStepState(index);
+		const classes = ["lc-stepper__step"];
+		classes.push(`lc-stepper__step--${state}`);
+		if (!this.linear() || state === "completed") classes.push("lc-stepper__step--clickable");
+		return classes.join(" ");
+	}
+	getConnectorClasses(index) {
+		const classes = ["lc-stepper__connector"];
+		if (index < this.activeStep()) classes.push("lc-stepper__connector--completed");
+		return classes.join(" ");
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: StepperComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: StepperComponent,
+		isStandalone: true,
+		selector: "lc-stepper",
+		inputs: {
+			steps: {
+				classPropertyName: "steps",
+				publicName: "steps",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			activeStep: {
+				classPropertyName: "activeStep",
+				publicName: "activeStep",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			linear: {
+				classPropertyName: "linear",
+				publicName: "linear",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			optionalLabel: {
+				classPropertyName: "optionalLabel",
+				publicName: "optionalLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			stepAriaLabel: {
+				classPropertyName: "stepAriaLabel",
+				publicName: "stepAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			activeStep: "activeStepChange",
+			stepChange: "stepChange"
+		},
+		ngImport: i0,
+		template: "<div\n  class=\"lc-stepper\"\n  [class.lc-stepper--horizontal]=\"orientation() === 'horizontal'\"\n  [class.lc-stepper--vertical]=\"orientation() === 'vertical'\"\n>\n  <!-- Step indicators: an ordered list of buttons (position is conveyed by the list) -->\n  <ol class=\"lc-stepper__header\">\n    @for (step of steps(); track $index; let i = $index; let last = $last) {\n      <li class=\"lc-stepper__item\">\n        <button\n          type=\"button\"\n          [class]=\"getStepClasses(i)\"\n          [disabled]=\"!isStepNavigable(i)\"\n          [attr.aria-current]=\"getStepState(i) === 'active' ? 'step' : null\"\n          [attr.aria-label]=\"getStepAriaLabel(i)\"\n          [attr.aria-describedby]=\"getDescriptionId(i)\"\n          (click)=\"goToStep(i)\"\n        >\n          <span class=\"lc-stepper__indicator\" aria-hidden=\"true\">\n            @if (getStepState(i) === 'completed') {\n              <!-- Checkmark for completed -->\n              <svg class=\"lc-stepper__check\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            } @else {\n              <span class=\"lc-stepper__number\">{{ i + 1 }}</span>\n            }\n          </span>\n          <span class=\"lc-stepper__label\">\n            <span class=\"lc-stepper__title\">{{ step.label }}</span>\n            @if (step.description) {\n              <span class=\"lc-stepper__description\" [attr.id]=\"getDescriptionId(i)\">{{\n                step.description\n              }}</span>\n            }\n            @if (step.optional) {\n              <span class=\"lc-stepper__optional\">{{ optionalLabel() }}</span>\n            }\n          </span>\n        </button>\n\n        @if (!last) {\n          <span [class]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  </ol>\n\n  <!-- Step content area (projected) -->\n  <div class=\"lc-stepper__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+		styles: [".lc-stepper{width:100%}.lc-stepper__header{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}.lc-stepper--horizontal .lc-stepper__header{flex-direction:row}.lc-stepper--vertical .lc-stepper__header{flex-direction:column;align-items:flex-start}.lc-stepper__item{display:flex;align-items:center;flex:1 1 auto;min-width:0}.lc-stepper__item:last-child{flex:0 0 auto}.lc-stepper--vertical .lc-stepper__item{flex-direction:column;align-items:flex-start;flex:0 0 auto}.lc-stepper__step{appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:default;display:flex;align-items:center;gap:.75rem;flex-shrink:0;border-radius:var(--border-radius-sm)}.lc-stepper__step--clickable{cursor:pointer}.lc-stepper__step:disabled{cursor:default}.lc-stepper__step:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-stepper__indicator{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--border-radius-full);font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);transition:all .2s ease}.lc-stepper__step--pending .lc-stepper__indicator{background-color:var(--color-surface-hover);color:var(--color-text-tertiary);border:1px solid var(--color-border)}.lc-stepper__step--active .lc-stepper__indicator{background-color:var(--color-primary-fill);color:var(--color-on-primary);box-shadow:0 0 0 4px #20849740}.lc-stepper__step--completed .lc-stepper__indicator{background-color:var(--color-success);color:var(--color-neutral-900)}.lc-stepper__check{width:1rem;height:1rem}.lc-stepper__number{line-height:1}.lc-stepper__label{display:flex;flex-direction:column}.lc-stepper__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-primary)}.lc-stepper__step--pending .lc-stepper__title{color:var(--color-text-tertiary)}.lc-stepper__description{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:.125rem}.lc-stepper__optional{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);font-style:italic;margin-top:.125rem}.lc-stepper__connector{flex:1;height:.125rem;min-width:2rem;margin:0 .5rem;background-color:var(--color-border);transition:background-color .2s ease}.lc-stepper__connector--completed{background-color:var(--color-success)}.lc-stepper--vertical .lc-stepper__connector{flex:0 0 auto;width:.125rem;height:2rem;min-width:0;margin:.25rem 0 .25rem 1rem}.lc-stepper__content{margin-top:1.5rem}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: StepperComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-stepper",
+			standalone: true,
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div\n  class=\"lc-stepper\"\n  [class.lc-stepper--horizontal]=\"orientation() === 'horizontal'\"\n  [class.lc-stepper--vertical]=\"orientation() === 'vertical'\"\n>\n  <!-- Step indicators: an ordered list of buttons (position is conveyed by the list) -->\n  <ol class=\"lc-stepper__header\">\n    @for (step of steps(); track $index; let i = $index; let last = $last) {\n      <li class=\"lc-stepper__item\">\n        <button\n          type=\"button\"\n          [class]=\"getStepClasses(i)\"\n          [disabled]=\"!isStepNavigable(i)\"\n          [attr.aria-current]=\"getStepState(i) === 'active' ? 'step' : null\"\n          [attr.aria-label]=\"getStepAriaLabel(i)\"\n          [attr.aria-describedby]=\"getDescriptionId(i)\"\n          (click)=\"goToStep(i)\"\n        >\n          <span class=\"lc-stepper__indicator\" aria-hidden=\"true\">\n            @if (getStepState(i) === 'completed') {\n              <!-- Checkmark for completed -->\n              <svg class=\"lc-stepper__check\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            } @else {\n              <span class=\"lc-stepper__number\">{{ i + 1 }}</span>\n            }\n          </span>\n          <span class=\"lc-stepper__label\">\n            <span class=\"lc-stepper__title\">{{ step.label }}</span>\n            @if (step.description) {\n              <span class=\"lc-stepper__description\" [attr.id]=\"getDescriptionId(i)\">{{\n                step.description\n              }}</span>\n            }\n            @if (step.optional) {\n              <span class=\"lc-stepper__optional\">{{ optionalLabel() }}</span>\n            }\n          </span>\n        </button>\n\n        @if (!last) {\n          <span [class]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  </ol>\n\n  <!-- Step content area (projected) -->\n  <div class=\"lc-stepper__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n",
+			styles: [".lc-stepper{width:100%}.lc-stepper__header{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}.lc-stepper--horizontal .lc-stepper__header{flex-direction:row}.lc-stepper--vertical .lc-stepper__header{flex-direction:column;align-items:flex-start}.lc-stepper__item{display:flex;align-items:center;flex:1 1 auto;min-width:0}.lc-stepper__item:last-child{flex:0 0 auto}.lc-stepper--vertical .lc-stepper__item{flex-direction:column;align-items:flex-start;flex:0 0 auto}.lc-stepper__step{appearance:none;background:none;border:0;margin:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:default;display:flex;align-items:center;gap:.75rem;flex-shrink:0;border-radius:var(--border-radius-sm)}.lc-stepper__step--clickable{cursor:pointer}.lc-stepper__step:disabled{cursor:default}.lc-stepper__step:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-stepper__indicator{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--border-radius-full);font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-semibold, 600);transition:all .2s ease}.lc-stepper__step--pending .lc-stepper__indicator{background-color:var(--color-surface-hover);color:var(--color-text-tertiary);border:1px solid var(--color-border)}.lc-stepper__step--active .lc-stepper__indicator{background-color:var(--color-primary-fill);color:var(--color-on-primary);box-shadow:0 0 0 4px #20849740}.lc-stepper__step--completed .lc-stepper__indicator{background-color:var(--color-success);color:var(--color-neutral-900)}.lc-stepper__check{width:1rem;height:1rem}.lc-stepper__number{line-height:1}.lc-stepper__label{display:flex;flex-direction:column}.lc-stepper__title{font-size:var(--font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-primary)}.lc-stepper__step--pending .lc-stepper__title{color:var(--color-text-tertiary)}.lc-stepper__description{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);margin-top:.125rem}.lc-stepper__optional{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);font-style:italic;margin-top:.125rem}.lc-stepper__connector{flex:1;height:.125rem;min-width:2rem;margin:0 .5rem;background-color:var(--color-border);transition:background-color .2s ease}.lc-stepper__connector--completed{background-color:var(--color-success)}.lc-stepper--vertical .lc-stepper__connector{flex:0 0 auto;width:.125rem;height:2rem;min-width:0;margin:.25rem 0 .25rem 1rem}.lc-stepper__content{margin-top:1.5rem}\n"]
+		}]
+	}],
+	propDecorators: {
+		steps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "steps",
+				required: true
+			}]
+		}],
+		activeStep: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeStep",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["activeStepChange"]
+		}],
+		linear: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linear",
+				required: false
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		optionalLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "optionalLabel",
+				required: false
+			}]
+		}],
+		stepAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "stepAriaLabel",
+				required: false
+			}]
+		}],
+		stepChange: [{
+			type: i0.Output,
+			args: ["stepChange"]
+		}]
+	}
+});
+export { StepperComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-stepper.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-stepper.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/stepper/stepper.component.ts","../../../../libs/angular-ui-kit/src/lib/stepper/stepper.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  output,\n  model,\n  computed,\n} from '@angular/core';\n\nexport interface StepperStep {\n  readonly label: string;\n  readonly description?: string;\n  readonly optional?: boolean;\n}\n\nexport type StepState = 'pending' | 'active' | 'completed';\n\nlet nextStepperId = 0;\n\n/**\n * Stepper component for multi-step wizard workflows.\n *\n * Features:\n * - Horizontal and vertical orientations\n * - Active, completed, and pending step states\n * - Numbered step indicators with checkmark on completion\n * - Optional step descriptions and \"optional\" labels\n * - Linear mode restricting navigation to sequential steps\n * - Two-way active step binding\n * - Content projection for step body\n * - Accessible: steps are real buttons in an ordered list, the active step\n *   carries `aria-current=\"step\"`, non-navigable steps are disabled\n *\n * @example\n * ```html\n * <lc-stepper [steps]=\"steps\" [(activeStep)]=\"currentStep\">\n *   <div>Step content here</div>\n * </lc-stepper>\n * ```\n */\n@Component({\n  selector: 'lc-stepper',\n  standalone: true,\n  imports: [],\n  templateUrl: './stepper.component.html',\n  styleUrl: './stepper.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class StepperComponent {\n  /** Step definitions */\n  readonly steps = input.required<readonly StepperStep[]>();\n\n  /** Active step index (0-based, two-way binding) */\n  readonly activeStep = model<number>(0);\n\n  /** Whether completed steps can be clicked to navigate back */\n  readonly linear = input<boolean>(true);\n\n  /** Orientation */\n  readonly orientation = input<'horizontal' | 'vertical'>('horizontal');\n\n  /** Text shown under optional steps */\n  readonly optionalLabel = input('Optional');\n\n  /**\n   * Accessible name template for each step button. Placeholders: `{n}`\n   * (1-based step number), `{m}` (step count), `{label}`. Optional steps get\n   * `optionalLabel` appended.\n   */\n  readonly stepAriaLabel = input('Step {n} of {m}: {label}');\n\n  /** Emitted when active step changes */\n  readonly stepChange = output<number>();\n\n  /** Per-instance id prefix so description ids stay unique across steppers */\n  private readonly instanceId = `lc-stepper-${++nextStepperId}`;\n\n  /** Computed total step count */\n  readonly totalSteps = computed(() => this.steps().length);\n\n  /** Whether we're on the first step */\n  readonly isFirstStep = computed(() => this.activeStep() === 0);\n\n  /** Whether we're on the last step */\n  readonly isLastStep = computed(() => this.activeStep() === this.totalSteps() - 1);\n\n  /** Get the state of a step */\n  getStepState(index: number): StepState {\n    const current = this.activeStep();\n    if (index < current) return 'completed';\n    if (index === current) return 'active';\n    return 'pending';\n  }\n\n  /**\n   * Whether the step at `index` can be activated by the user. In linear mode\n   * only completed steps (and the active one) are reachable.\n   */\n  isStepNavigable(index: number): boolean {\n    return !this.linear() || index <= this.activeStep();\n  }\n\n  /** Accessible name for the step button at `index` */\n  getStepAriaLabel(index: number): string {\n    const step = this.steps()[index];\n    if (!step) return '';\n    const name = this.stepAriaLabel()\n      .replace('{n}', String(index + 1))\n      .replace('{m}', String(this.totalSteps()))\n      .replace('{label}', step.label);\n    return step.optional ? `${name}, ${this.optionalLabel()}` : name;\n  }\n\n  /** Id of the description element for `aria-describedby` (or null) */\n  getDescriptionId(index: number): string | null {\n    return this.steps()[index]?.description ? `${this.instanceId}-desc-${index}` : null;\n  }\n\n  /** Navigate to a specific step (only if navigable, see `isStepNavigable`) */\n  goToStep(index: number): void {\n    if (index === this.activeStep() || !this.isStepNavigable(index)) {\n      return;\n    }\n    this.activeStep.set(index);\n    this.stepChange.emit(index);\n  }\n\n  /** Go to next step */\n  next(): void {\n    const current = this.activeStep();\n    if (current < this.totalSteps() - 1) {\n      this.activeStep.set(current + 1);\n      this.stepChange.emit(current + 1);\n    }\n  }\n\n  /** Go to previous step */\n  previous(): void {\n    const current = this.activeStep();\n    if (current > 0) {\n      this.activeStep.set(current - 1);\n      this.stepChange.emit(current - 1);\n    }\n  }\n\n  /** Get CSS classes for step indicator */\n  getStepClasses(index: number): string {\n    const state = this.getStepState(index);\n    const classes = ['lc-stepper__step'];\n    classes.push(`lc-stepper__step--${state}`);\n    if (!this.linear() || state === 'completed') {\n      classes.push('lc-stepper__step--clickable');\n    }\n    return classes.join(' ');\n  }\n\n  /** Get CSS classes for connector line */\n  getConnectorClasses(index: number): string {\n    const classes = ['lc-stepper__connector'];\n    if (index < this.activeStep()) {\n      classes.push('lc-stepper__connector--completed');\n    }\n    return classes.join(' ');\n  }\n}\n","<div\n  class=\"lc-stepper\"\n  [class.lc-stepper--horizontal]=\"orientation() === 'horizontal'\"\n  [class.lc-stepper--vertical]=\"orientation() === 'vertical'\"\n>\n  <!-- Step indicators: an ordered list of buttons (position is conveyed by the list) -->\n  <ol class=\"lc-stepper__header\">\n    @for (step of steps(); track $index; let i = $index; let last = $last) {\n      <li class=\"lc-stepper__item\">\n        <button\n          type=\"button\"\n          [class]=\"getStepClasses(i)\"\n          [disabled]=\"!isStepNavigable(i)\"\n          [attr.aria-current]=\"getStepState(i) === 'active' ? 'step' : null\"\n          [attr.aria-label]=\"getStepAriaLabel(i)\"\n          [attr.aria-describedby]=\"getDescriptionId(i)\"\n          (click)=\"goToStep(i)\"\n        >\n          <span class=\"lc-stepper__indicator\" aria-hidden=\"true\">\n            @if (getStepState(i) === 'completed') {\n              <!-- Checkmark for completed -->\n              <svg class=\"lc-stepper__check\" viewBox=\"0 0 20 20\" fill=\"currentColor\">\n                <path\n                  fill-rule=\"evenodd\"\n                  d=\"M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z\"\n                  clip-rule=\"evenodd\"\n                />\n              </svg>\n            } @else {\n              <span class=\"lc-stepper__number\">{{ i + 1 }}</span>\n            }\n          </span>\n          <span class=\"lc-stepper__label\">\n            <span class=\"lc-stepper__title\">{{ step.label }}</span>\n            @if (step.description) {\n              <span class=\"lc-stepper__description\" [attr.id]=\"getDescriptionId(i)\">{{\n                step.description\n              }}</span>\n            }\n            @if (step.optional) {\n              <span class=\"lc-stepper__optional\">{{ optionalLabel() }}</span>\n            }\n          </span>\n        </button>\n\n        @if (!last) {\n          <span [class]=\"getConnectorClasses(i)\" aria-hidden=\"true\"></span>\n        }\n      </li>\n    }\n  </ol>\n\n  <!-- Step content area (projected) -->\n  <div class=\"lc-stepper__content\">\n    <ng-content></ng-content>\n  </div>\n</div>\n"],"mappings":"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"}