@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-password-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-password-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/password-input/password-input.component.ts","../../../../libs/angular-ui-kit/src/lib/password-input/password-input.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  computed,\n  forwardRef,\n  input,\n  output,\n  signal,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { AlertComponent } from '@lifecorner/angular-ui-kit/alert';\nimport type { InputAutocapitalize, InputEnterKeyHint } from '@lifecorner/angular-ui-kit/input';\n\nlet nextUniqueId = 0;\n\n/**\n * Password strength information\n */\nexport interface PasswordStrength {\n  score: number; // 0-5 (number of requirements met)\n  level: 'Weak' | 'Fair' | 'Good' | 'Strong';\n  percentage: number; // 0-100\n}\n\n/**\n * Individual password requirement\n */\nexport interface PasswordRequirement {\n  label: string;\n  met: boolean;\n  icon: string;\n}\n\nconst SYMBOL_PATTERN = /[!@#$%^&*()_+\\-=[\\]{}|;:,.<>?]/;\n\n/** The length rule when no `minLength` is set (the 3.2 rule). */\nconst DEFAULT_MIN_LENGTH = 8;\n\n/**\n * How the strength meter scores a password:\n * - `composition` (default, 3.2): share of five rules met — length and four character classes.\n * - `length`: the length only, as NIST SP 800-63B asks (no composition rules):\n *   below `minLength` Weak, from it Fair, from 1.5 × Good, from 2 × Strong.\n */\nexport type PasswordStrengthMode = 'composition' | 'length';\n\n/**\n * Password Input Component with Show/Hide Toggle and Strength Meter\n *\n * Features:\n * - Show/Hide password toggle (eye icon)\n * - Real-time password strength indicator (Weak/Fair/Good/Strong)\n * - Visual strength meter bar with color coding\n * - Validation feedback (length, uppercase, lowercase, digit, symbol)\n * - Accessible ARIA attributes\n * - Reactive Forms ControlValueAccessor implementation\n *\n * Strength levels (share of the 5 requirements met):\n * - Weak: < 40%\n * - Fair: 40–59%\n * - Good: 60–79%\n * - Strong: >= 80%\n *\n * Requirements:\n * - Minimum 8 characters\n * - At least one uppercase letter (A-Z)\n * - At least one lowercase letter (a-z)\n * - At least one digit (0-9)\n * - At least one symbol (!@#$%^&*()_+-=[]{}|;:,.<>?)\n *\n * NIST-style use (3.3): `strengthMode=\"length\"`, `minLength`, `helperText` for\n * the rule, or no meter and no checklist at all.\n *\n * Usage:\n * ```html\n * <lc-password-input\n *   [formControl]=\"passwordControl\"\n *   label=\"Password\"\n *   placeholder=\"Enter your password\"\n *   [showStrengthMeter]=\"true\"\n * ></lc-password-input>\n * ```\n */\n@Component({\n  selector: 'lc-password-input',\n  standalone: true,\n  imports: [IconComponent, AlertComponent],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => PasswordInputComponent),\n      multi: true,\n    },\n  ],\n  templateUrl: './password-input.component.html',\n  styleUrls: ['./password-input.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PasswordInputComponent implements ControlValueAccessor {\n  /** Label text (displayed above the input) */\n  readonly label = input<string>('Password');\n\n  /** Placeholder text */\n  readonly placeholder = input<string>('Enter password');\n\n  /** Whether to show the strength meter bar + level text */\n  readonly showStrengthMeter = input<boolean>(false);\n\n  /** Whether to show the requirements checklist */\n  readonly showRequirements = input<boolean>(false);\n\n  /** Whether the input is disabled */\n  readonly disabled = input<boolean>(false);\n\n  /** Whether the input is required */\n  readonly required = input<boolean>(false);\n\n  /**\n   * Show the `*` of a `required` field; `false` keeps `required` and\n   * `aria-required` without the asterisk.\n   * @default true\n   */\n  readonly requiredIndicator = input<boolean>(true);\n\n  /** Error message to display (also sets aria-invalid) */\n  readonly error = input<string | undefined>(undefined);\n\n  /** Help below the field, e.g. the password rule; linked by `aria-describedby`. The error replaces it. */\n  readonly helperText = input<string>();\n\n  /**\n   * Minimum length: the native `minlength` and the length rule of the\n   * requirement list and the meter. Unset = no attribute, rule of 8 (3.2).\n   */\n  readonly minLength = input<number>();\n\n  /** How the strength meter scores: `composition` (3.2) or `length` (NIST, no character-class rules). */\n  readonly strengthMode = input<PasswordStrengthMode>('composition');\n\n  /**\n   * Native `autocomplete`: `current-password` (sign-in), `new-password`\n   * (registration, change), so password managers fill and save the right\n   * password. Unset = no attribute.\n   */\n  readonly autocomplete = input<string>();\n\n  /** Native `name` of the inner input. Unset = no attribute. */\n  readonly name = input<string>();\n\n  /**\n   * Native `autocapitalize`. Default `off`: a shown password must not be\n   * capitalised by the on-screen keyboard.\n   * @default 'off'\n   */\n  readonly autocapitalize = input<InputAutocapitalize>('off');\n\n  /**\n   * Native `spellcheck`. Default `false`: a shown password must never go to a\n   * spell checker (some send text to a server).\n   * @default false\n   */\n  readonly spellcheck = input<boolean>(false);\n\n  /** Native `enterkeyhint`: the label of the on-screen keyboard's Enter key. Unset = no attribute. */\n  readonly enterkeyhint = input<InputEnterKeyHint>();\n\n  /** Accessible name of the visibility toggle while the password is hidden. */\n  readonly showPasswordAriaLabel = input('Show password');\n\n  /** Accessible name of the visibility toggle while the password is shown. */\n  readonly hidePasswordAriaLabel = input('Hide password');\n\n  /** Screen-reader prefix of the strength level (`showStrengthMeter`). */\n  readonly strengthLabel = input('Password strength:');\n\n  /** Shown for strength level `Weak`. */\n  readonly weakLabel = input('Weak');\n\n  /** Shown for strength level `Fair`. */\n  readonly fairLabel = input('Fair');\n\n  /** Shown for strength level `Good`. */\n  readonly goodLabel = input('Good');\n\n  /** Shown for strength level `Strong`. */\n  readonly strongLabel = input('Strong');\n\n  /** Accessible name of the requirement list (`showRequirements`). */\n  readonly requirementsAriaLabel = input('Password requirements');\n\n  /** Requirement: at least 8 characters. */\n  readonly minLengthRequirementLabel = input('At least 8 characters');\n\n  /** Requirement: one uppercase letter. */\n  readonly uppercaseRequirementLabel = input('One uppercase letter (A-Z)');\n\n  /** Requirement: one lowercase letter. */\n  readonly lowercaseRequirementLabel = input('One lowercase letter (a-z)');\n\n  /** Requirement: one digit. */\n  readonly digitRequirementLabel = input('One digit (0-9)');\n\n  /** Requirement: one symbol. */\n  readonly symbolRequirementLabel = input('One symbol (!@#$%^&*)');\n\n  /** Screen-reader suffix of a met requirement. */\n  readonly requirementMetLabel = input('(met)');\n\n  /** Screen-reader suffix of an unmet requirement. */\n  readonly requirementNotMetLabel = input('(not met)');\n\n  /** Emitted whenever the value (and thus the strength) is recalculated */\n  readonly strengthChange = output<PasswordStrength>();\n\n  /** Per-instance ids so label/error linkage survives several inputs on one page */\n  readonly inputId = `lc-password-input-${nextUniqueId++}`;\n  readonly errorId = `${this.inputId}-error`;\n  readonly helperId = `${this.inputId}-helper`;\n  readonly strengthId = `${this.inputId}-strength`;\n\n  // Internal state\n  readonly value = signal<string>('');\n  readonly isPasswordVisible = signal<boolean>(false);\n\n  // Internal disabled state (for ControlValueAccessor)\n  private readonly formDisabled = signal<boolean>(false);\n\n  /** Computed disabled state from both input and form control */\n  readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  /** The length rule: `minLength`, else 8. */\n  readonly requiredLength = computed(() => this.minLength() ?? DEFAULT_MIN_LENGTH);\n\n  readonly requirements = computed<PasswordRequirement[]>(() => {\n    const password = this.value();\n    const checks: Array<[string, boolean]> = [[this.minLengthRequirementLabel(), password.length >= this.requiredLength()]];\n    if (this.strengthMode() === 'composition') {\n      checks.push(\n        [this.uppercaseRequirementLabel(), /[A-Z]/.test(password)],\n        [this.lowercaseRequirementLabel(), /[a-z]/.test(password)],\n        [this.digitRequirementLabel(), /[0-9]/.test(password)],\n        [this.symbolRequirementLabel(), SYMBOL_PATTERN.test(password)],\n      );\n    }\n    return checks.map(([label, met]) => ({ label, met, icon: met ? '✓' : '✗' }));\n  });\n\n  readonly strength = computed<PasswordStrength>(() =>\n    this.strengthMode() === 'length' ? this.lengthStrength() : this.compositionStrength(),\n  );\n\n  /** The strength level as shown to the user (the level itself stays English: it is API and class name). */\n  readonly strengthText = computed(() => {\n    switch (this.strength().level) {\n      case 'Strong':\n        return this.strongLabel();\n      case 'Good':\n        return this.goodLabel();\n      case 'Fair':\n        return this.fairLabel();\n      default:\n        return this.weakLabel();\n    }\n  });\n\n  /** Lower-cased level for the modifier classes (lc-strength-weak …) */\n  readonly strengthLevelClass = computed(() => `lc-strength-${this.strength().level.toLowerCase()}`);\n\n  readonly describedBy = computed(() => {\n    const ids: string[] = [];\n    if (this.error()) ids.push(this.errorId);\n    else if (this.helperText()) ids.push(this.helperId);\n    if (this.showStrengthMeter()) ids.push(this.strengthId);\n    return ids.length ? ids.join(' ') : null;\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onChange: (value: string) => void = () => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onTouched: () => void = () => {};\n\n  /**\n   * ControlValueAccessor: Write value from form control\n   */\n  writeValue(value: string | null | undefined): void {\n    this.value.set(value || '');\n    this.strengthChange.emit(this.strength());\n  }\n\n  /**\n   * ControlValueAccessor: Register onChange callback\n   */\n  registerOnChange(fn: (value: string) => void): void {\n    this.onChange = fn;\n  }\n\n  /**\n   * ControlValueAccessor: Register onTouched callback\n   */\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  /**\n   * ControlValueAccessor: Set disabled state\n   */\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n\n  /**\n   * Toggle password visibility\n   */\n  togglePasswordVisibility(): void {\n    this.isPasswordVisible.update((visible) => !visible);\n  }\n\n  /**\n   * Handle input changes\n   */\n  onInput(event: Event): void {\n    const input = event.target as HTMLInputElement;\n    this.value.set(input.value);\n    this.onChange(input.value);\n    this.strengthChange.emit(this.strength());\n  }\n\n  /**\n   * Handle blur event\n   */\n  onBlur(): void {\n    this.onTouched();\n  }\n\n  /** 3.2 scoring: the share of the five rules met. */\n  private compositionStrength(): PasswordStrength {\n    const requirements = this.requirements();\n    const score = requirements.filter((r) => r.met).length;\n    const percentage = (score / requirements.length) * 100;\n\n    let level: PasswordStrength['level'] = 'Weak';\n    if (percentage >= 80) {\n      level = 'Strong';\n    } else if (percentage >= 60) {\n      level = 'Good';\n    } else if (percentage >= 40) {\n      level = 'Fair';\n    }\n\n    return { score, level, percentage };\n  }\n\n  /** NIST scoring: the length against `minLength` (score 0–4 like the four levels). */\n  private lengthStrength(): PasswordStrength {\n    const length = this.value().length;\n    const min = this.requiredLength();\n    const percentage = Math.min(100, Math.round((length / (2 * min)) * 100));\n\n    let level: PasswordStrength['level'] = 'Weak';\n    let score = length > 0 ? 1 : 0;\n    if (length >= 2 * min) {\n      level = 'Strong';\n      score = 4;\n    } else if (length >= 1.5 * min) {\n      level = 'Good';\n      score = 3;\n    } else if (length >= min) {\n      level = 'Fair';\n      score = 2;\n    }\n\n    return { score, level, percentage };\n  }\n}\n","<div class=\"lc-password-input\">\n  <label [for]=\"inputId\" class=\"lc-label\">\n    {{ label() }}\n    @if (required() && requiredIndicator()) {\n      <span class=\"lc-required\" aria-hidden=\"true\">*</span>\n    }\n  </label>\n\n  <div class=\"lc-input-wrapper\">\n    <input\n      [id]=\"inputId\"\n      [type]=\"isPasswordVisible() ? 'text' : 'password'\"\n      [value]=\"value()\"\n      [placeholder]=\"placeholder()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"required()\"\n      [attr.aria-required]=\"required() || null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      [attr.aria-describedby]=\"describedBy()\"\n      [attr.minlength]=\"minLength() ?? null\"\n      [attr.autocomplete]=\"autocomplete() ?? null\"\n      [attr.name]=\"name() ?? null\"\n      [attr.autocapitalize]=\"autocapitalize()\"\n      [attr.spellcheck]=\"spellcheck() === undefined ? null : spellcheck() ? 'true' : 'false'\"\n      [attr.enterkeyhint]=\"enterkeyhint() ?? null\"\n      autocorrect=\"off\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n      class=\"lc-input\"\n      [class.lc-input-error]=\"error()\"\n    />\n\n    <button\n      type=\"button\"\n      (click)=\"togglePasswordVisibility()\"\n      [attr.aria-label]=\"isPasswordVisible() ? hidePasswordAriaLabel() : showPasswordAriaLabel()\"\n      [attr.aria-pressed]=\"isPasswordVisible()\"\n      [attr.aria-controls]=\"inputId\"\n      class=\"lc-toggle-btn\"\n      [disabled]=\"isDisabled()\"\n    >\n      @if (isPasswordVisible()) {\n        <lc-icon name=\"eye-slash\" size=\"md\" [decorative]=\"true\"></lc-icon>\n      } @else {\n        <lc-icon name=\"eye\" size=\"md\" [decorative]=\"true\"></lc-icon>\n      }\n    </button>\n  </div>\n\n  @if (error()) {\n    <div [id]=\"errorId\" class=\"lc-error\" role=\"alert\">\n      {{ error() }}\n    </div>\n  } @else if (helperText()) {\n    <div [id]=\"helperId\" class=\"lc-helper\">\n      {{ helperText() }}\n    </div>\n  }\n\n  @if (showStrengthMeter()) {\n    <div class=\"lc-strength-meter\">\n      <!-- The bar is decorative; the live label below carries the meaning -->\n      <div class=\"lc-strength-bar\" aria-hidden=\"true\">\n        <div class=\"lc-strength-fill\" [class]=\"strengthLevelClass()\" [style.width.%]=\"strength().percentage\"></div>\n      </div>\n      <div [id]=\"strengthId\" class=\"lc-strength-label\" [class]=\"strengthLevelClass()\" role=\"status\" aria-live=\"polite\">\n        <span class=\"lc-sr-only\">{{ strengthLabel() }} </span>{{ strengthText() }}\n      </div>\n    </div>\n  }\n\n  @if (showRequirements()) {\n    <lc-alert variant=\"info\" [dismissible]=\"false\">\n      <ul class=\"lc-requirements\" [attr.aria-label]=\"requirementsAriaLabel()\">\n        @for (req of requirements(); track req.label) {\n          <li\n            class=\"lc-requirement\"\n            [class.lc-requirement-met]=\"req.met\"\n            [class.lc-requirement-unmet]=\"!req.met\"\n          >\n            <span class=\"lc-requirement-icon\" aria-hidden=\"true\">{{ req.icon }}</span>\n            <span class=\"lc-requirement-label\">{{ req.label }}</span>\n            <span class=\"lc-sr-only\">{{ req.met ? requirementMetLabel() : requirementNotMetLabel() }}</span>\n          </li>\n        }\n      </ul>\n    </lc-alert>\n  }\n</div>\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-pie-chart.mjs

@@ -0,0 +1,162 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { chartColor, toFinite } from "@lifecorner/angular-ui-kit/internal/chart";
+var PieChartComponent = class PieChartComponent {
+	segments = input.required(...ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	showLegend = input(false, ...ngDevMode ? [{ debugName: "showLegend" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	SIZE_MAP = {
+		sm: 96,
+		md: 140,
+		lg: 200
+	};
+	svgSize = computed(() => this.SIZE_MAP[this.size()], ...ngDevMode ? [{ debugName: "svgSize" }] : /* istanbul ignore next */ []);
+	viewBox = computed(() => `0 0 ${this.svgSize()} ${this.svgSize()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	center = computed(() => this.svgSize() / 2, ...ngDevMode ? [{ debugName: "center" }] : /* istanbul ignore next */ []);
+	radius = computed(() => this.svgSize() / 2 - 2, ...ngDevMode ? [{ debugName: "radius" }] : /* istanbul ignore next */ []);
+	arcs = computed(() => {
+		const segs = this.segments();
+		if (!segs?.length) return [];
+		const values = segs.map((s) => Math.max(0, toFinite(s.value)));
+		const total = values.reduce((s, v) => s + v, 0);
+		if (!total) return [];
+		const cx = this.center();
+		const cy = this.center();
+		const r = this.radius();
+		let startAngle = -Math.PI / 2;
+		const gap = segs.length > 1 ? .02 : 0;
+		return segs.map((seg, i) => {
+			const frac = values[i] / total;
+			const sweep = frac * Math.PI * 2 - gap;
+			const endAngle = startAngle + sweep;
+			const large = sweep > Math.PI ? 1 : 0;
+			const x1 = cx + r * Math.cos(startAngle);
+			const y1 = cy + r * Math.sin(startAngle);
+			const x2 = cx + r * Math.cos(endAngle);
+			const y2 = cy + r * Math.sin(endAngle);
+			const d = sweep >= Math.PI * 2 - 1e-9 ? `M${cx},${cy - r} A${r},${r} 0 1 1 ${cx},${cy + r} A${r},${r} 0 1 1 ${cx},${cy - r} Z` : `M${cx},${cy} L${x1},${y1} A${r},${r} 0 ${large} 1 ${x2},${y2} Z`;
+			startAngle = endAngle + gap;
+			return {
+				d,
+				color: seg.color || chartColor(i),
+				label: seg.label || "",
+				percentage: Math.round(frac * 100)
+			};
+		});
+	}, ...ngDevMode ? [{ debugName: "arcs" }] : /* istanbul ignore next */ []);
+	legendItems = computed(() => this.arcs().map((a) => ({
+		color: a.color,
+		label: a.label,
+		percentage: a.percentage
+	})), ...ngDevMode ? [{ debugName: "legendItems" }] : /* istanbul ignore next */ []);
+	effectiveAriaLabel = computed(() => {
+		const explicit = this.ariaLabel();
+		if (explicit) return explicit;
+		const arcs = this.arcs();
+		if (!arcs.length) return "Pie chart: no data";
+		return `Pie chart: ${arcs.map((a, i) => `${a.label || `Segment ${i + 1}`} ${a.percentage}%`).join(", ")}`;
+	}, ...ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PieChartComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: PieChartComponent,
+		isStandalone: true,
+		selector: "lc-pie-chart",
+		inputs: {
+			segments: {
+				classPropertyName: "segments",
+				publicName: "segments",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLegend: {
+				classPropertyName: "showLegend",
+				publicName: "showLegend",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div class=\"lc-pie-chart\">\n  <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-pie-chart__svg\">\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @for (arc of arcs(); track $index) {\n      <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n    }\n  </svg>\n\n  @if (showLegend()) {\n    <div class=\"lc-pie-chart__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-pie-chart__legend-item\">\n          <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n          <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n          <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
+		styles: [":host{display:block}.lc-pie-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-pie-chart__svg{overflow:visible}.lc-pie-chart__segment{transition:opacity .15s ease}.lc-pie-chart__segment:hover{opacity:.8}.lc-pie-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-pie-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-pie-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-pie-chart__legend-label{color:var(--color-text-secondary)}.lc-pie-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PieChartComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-pie-chart",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"lc-pie-chart\">\n  <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-pie-chart__svg\">\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @for (arc of arcs(); track $index) {\n      <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n    }\n  </svg>\n\n  @if (showLegend()) {\n    <div class=\"lc-pie-chart__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-pie-chart__legend-item\">\n          <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n          <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n          <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n",
+			styles: [":host{display:block}.lc-pie-chart{display:flex;flex-direction:column;align-items:center;gap:.75rem}.lc-pie-chart__svg{overflow:visible}.lc-pie-chart__segment{transition:opacity .15s ease}.lc-pie-chart__segment:hover{opacity:.8}.lc-pie-chart__legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center}.lc-pie-chart__legend-item{display:flex;align-items:center;gap:.375rem;font-size:var(--typography-font-size-sm, .875rem)}.lc-pie-chart__legend-dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}.lc-pie-chart__legend-label{color:var(--color-text-secondary)}.lc-pie-chart__legend-pct{color:var(--color-text-tertiary);font-weight:600}\n"]
+		}]
+	}],
+	propDecorators: {
+		segments: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "segments",
+				required: true
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		showLegend: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLegend",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { PieChartComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-pie-chart.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-pie-chart.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-pie-chart.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/pie-chart/pie-chart.component.ts","../../../../libs/angular-ui-kit/src/lib/pie-chart/pie-chart.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\nimport { chartColor } from '@lifecorner/angular-ui-kit/internal/chart';\nimport { toFinite } from '@lifecorner/angular-ui-kit/internal/chart';\n\nexport interface PieSegment {\n  /** Share of the whole. Non-finite and negative values count as 0. */\n  value: number;\n  label?: string;\n  color?: string;\n}\n\nexport type PieChartSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'lc-pie-chart',\n  standalone: true,\n  templateUrl: './pie-chart.component.html',\n  styleUrls: ['./pie-chart.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Pie chart component for displaying proportional data.\n *\n * Features:\n * - Color-coded segments with automatic arc calculation\n * - Size presets (sm, md, lg)\n * - Optional legend display\n * - Hover state support\n * - Responsive SVG rendering\n *\n * @example\n * ```html\n * <lc-pie-chart [segments]=\"data\" size=\"md\" [showLegend]=\"true\" />\n * ```\n */\nexport class PieChartComponent {\n  segments = input.required<PieSegment[]>();\n  size = input<PieChartSize>('md');\n  showLegend = input<boolean>(false);\n  /**\n   * Accessible name of the chart. Defaults to a generated summary listing\n   * every segment's label and share, e.g. \"Pie chart: A 40%, B 60%\".\n   */\n  ariaLabel = input<string>('');\n\n  private readonly SIZE_MAP: Record<PieChartSize, number> = { sm: 96, md: 140, lg: 200 };\n\n  protected readonly svgSize = computed(() => this.SIZE_MAP[this.size()]);\n  protected readonly viewBox = computed(() => `0 0 ${this.svgSize()} ${this.svgSize()}`);\n  protected readonly center = computed(() => this.svgSize() / 2);\n  protected readonly radius = computed(() => this.svgSize() / 2 - 2);\n\n  protected readonly arcs = computed(() => {\n    const segs = this.segments();\n    if (!segs?.length) return [];\n    const values = segs.map((s) => Math.max(0, toFinite(s.value)));\n    const total = values.reduce((s, v) => s + v, 0);\n    if (!total) return [];\n\n    const cx = this.center();\n    const cy = this.center();\n    const r = this.radius();\n    let startAngle = -Math.PI / 2;\n    const gap = segs.length > 1 ? 0.02 : 0;\n\n    return segs.map((seg, i) => {\n      const frac = values[i] / total;\n      const sweep = frac * Math.PI * 2 - gap;\n      const endAngle = startAngle + sweep;\n      const large = sweep > Math.PI ? 1 : 0;\n\n      const x1 = cx + r * Math.cos(startAngle);\n      const y1 = cy + r * Math.sin(startAngle);\n      const x2 = cx + r * Math.cos(endAngle);\n      const y2 = cy + r * Math.sin(endAngle);\n\n      // A full circle can't be one arc (start === end collapses it): two half-circles.\n      const d = sweep >= Math.PI * 2 - 1e-9\n        ? `M${cx},${cy - r} A${r},${r} 0 1 1 ${cx},${cy + r} A${r},${r} 0 1 1 ${cx},${cy - r} Z`\n        : `M${cx},${cy} L${x1},${y1} A${r},${r} 0 ${large} 1 ${x2},${y2} Z`;\n\n      startAngle = endAngle + gap;\n\n      return {\n        d,\n        color: seg.color || chartColor(i),\n        label: seg.label || '',\n        percentage: Math.round(frac * 100),\n      };\n    });\n  });\n\n  protected readonly legendItems = computed(() =>\n    this.arcs().map(a => ({ color: a.color, label: a.label, percentage: a.percentage }))\n  );\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const arcs = this.arcs();\n    if (!arcs.length) return 'Pie chart: no data';\n    return `Pie chart: ${arcs\n      .map((a, i) => `${a.label || `Segment ${i + 1}`} ${a.percentage}%`)\n      .join(', ')}`;\n  });\n}\n","<div class=\"lc-pie-chart\">\n  <svg [attr.width]=\"svgSize()\" [attr.height]=\"svgSize()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-pie-chart__svg\">\n    <title>{{ effectiveAriaLabel() }}</title>\n\n    @for (arc of arcs(); track $index) {\n      <path [attr.d]=\"arc.d\" [attr.fill]=\"arc.color\" class=\"lc-pie-chart__segment\" />\n    }\n  </svg>\n\n  @if (showLegend()) {\n    <div class=\"lc-pie-chart__legend\">\n      @for (item of legendItems(); track $index) {\n        <div class=\"lc-pie-chart__legend-item\">\n          <span class=\"lc-pie-chart__legend-dot\" [style.background-color]=\"item.color\"></span>\n          <span class=\"lc-pie-chart__legend-label\">{{ item.label }}</span>\n          <span class=\"lc-pie-chart__legend-pct\">{{ item.percentage }}%</span>\n        </div>\n      }\n    </div>\n  }\n</div>\n"],"mappings":"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"}

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

@@ -0,0 +1,159 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+const STATUS_ICON = {
+	complete: "check",
+	current: "point",
+	pending: "",
+	warning: "alert-triangle",
+	error: "x"
+};
+var PipelineComponent = class PipelineComponent {
+	steps = input.required(...ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []);
+	orientation = input("horizontal", ...ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	clickable = input(false, ...ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []);
+	stepClick = output();
+	hostClass = computed(() => `lc-pipeline lc-pipeline--${this.orientation()} lc-pipeline--size-${this.size()}`, ...ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []);
+	iconFor(step) {
+		return step.icon ?? STATUS_ICON[step.status];
+	}
+	stepClass(step) {
+		return `lc-pipeline__step lc-pipeline__step--${step.status}`;
+	}
+	onActivate(step) {
+		if (this.clickable()) this.stepClick.emit(step);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PipelineComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: PipelineComponent,
+		isStandalone: true,
+		selector: "lc-pipeline",
+		inputs: {
+			steps: {
+				classPropertyName: "steps",
+				publicName: "steps",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			orientation: {
+				classPropertyName: "orientation",
+				publicName: "orientation",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clickable: {
+				classPropertyName: "clickable",
+				publicName: "clickable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { stepClick: "stepClick" },
+		ngImport: i0,
+		template: "<ol [class]=\"hostClass()\">\n  @for (step of steps(); track $index; let last = $last) {\n    <li [class]=\"stepClass(step)\" [class.lc-pipeline__step--last]=\"last\">\n      @if (clickable()) {\n        <button type=\"button\" class=\"lc-pipeline__hit\" (click)=\"onActivate(step)\">\n          <ng-container [ngTemplateOutlet]=\"body\" [ngTemplateOutletContext]=\"{ $implicit: step }\" />\n        </button>\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"body\" [ngTemplateOutletContext]=\"{ $implicit: step }\" />\n      }\n    </li>\n  }\n</ol>\n\n<ng-template #body let-step>\n  <span class=\"lc-pipeline__marker\">\n    <span class=\"lc-pipeline__connector\" aria-hidden=\"true\"></span>\n    <span class=\"lc-pipeline__node\">\n      @if (iconFor(step)) {\n        <lc-icon [name]=\"iconFor(step)\" size=\"xs\" [decorative]=\"true\" />\n      }\n    </span>\n  </span>\n  <span class=\"lc-pipeline__text\">\n    <span class=\"lc-pipeline__label\">{{ step.label }}</span>\n    @if (step.caption) {\n      <span class=\"lc-pipeline__caption\">{{ step.caption }}</span>\n    }\n  </span>\n</ng-template>\n",
+		styles: [":host{display:block}.lc-pipeline{--lc-pipeline-node-size: 1.75rem;--lc-pipeline-line-weight: 2px;--lc-pipeline-gap: var(--spacing-2);--lc-pipeline-line: var(--color-border-strong);--lc-pipeline-line-done: var(--color-primary-500);--lc-pipeline-node-bg: var(--color-surface);--lc-pipeline-node-fg: var(--color-text-tertiary);--lc-pipeline-node-border: var(--lc-pipeline-line)}.lc-pipeline--size-sm{--lc-pipeline-node-size: 1.25rem;--lc-pipeline-line-weight: 1px;--lc-pipeline-gap: var(--spacing-1)}.lc-pipeline--size-sm .lc-pipeline__label{font-size:var(--font-size-xs)}.lc-pipeline--size-sm .lc-pipeline__caption{font-size:var(--font-size-2xs, .6875rem)}.lc-pipeline--size-sm .lc-pipeline__node lc-icon{transform:scale(.85)}.lc-pipeline{list-style:none;margin:0;padding:0;display:flex}.lc-pipeline__step{position:relative;display:flex;min-width:0}.lc-pipeline__hit{display:flex;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;width:100%}.lc-pipeline__hit:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.lc-pipeline__marker{flex-shrink:0}.lc-pipeline__node{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--lc-pipeline-node-size);height:var(--lc-pipeline-node-size);border-radius:var(--border-radius-full);background-color:var(--lc-pipeline-node-bg);border:var(--lc-pipeline-line-weight) solid var(--lc-pipeline-node-border);color:var(--lc-pipeline-node-fg);box-sizing:border-box}.lc-pipeline__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-pipeline__caption{display:block;font-size:var(--font-size-xs);color:var(--color-text-tertiary);line-height:1.35}.lc-pipeline--horizontal{align-items:flex-start;gap:var(--lc-pipeline-gap)}.lc-pipeline--horizontal .lc-pipeline__step{flex:1 1 0;flex-direction:column;align-items:flex-start}.lc-pipeline--horizontal .lc-pipeline__hit{flex-direction:column;align-items:flex-start}.lc-pipeline--horizontal .lc-pipeline__connector{position:absolute;top:calc(var(--lc-pipeline-node-size) / 2);left:calc(var(--lc-pipeline-node-size) / 2);width:calc(100% + var(--lc-pipeline-gap));height:var(--lc-pipeline-line-weight);transform:translateY(-50%);background-color:var(--lc-pipeline-line)}.lc-pipeline--horizontal .lc-pipeline__step--last .lc-pipeline__connector{display:none}.lc-pipeline--horizontal .lc-pipeline__text{margin-top:var(--spacing-2);padding-right:var(--spacing-3)}.lc-pipeline--vertical{flex-direction:column;gap:0}.lc-pipeline--vertical .lc-pipeline__step{flex-direction:row;align-items:flex-start;gap:var(--spacing-3);padding-bottom:var(--spacing-4)}.lc-pipeline--vertical .lc-pipeline__hit{flex-direction:row;align-items:flex-start;gap:var(--spacing-3)}.lc-pipeline--vertical .lc-pipeline__connector{position:absolute;left:calc(var(--lc-pipeline-node-size) / 2);top:var(--lc-pipeline-node-size);width:var(--lc-pipeline-line-weight);height:calc(100% - var(--lc-pipeline-node-size));transform:translate(-50%);background-color:var(--lc-pipeline-line)}.lc-pipeline--vertical .lc-pipeline__step--last .lc-pipeline__connector{display:none}.lc-pipeline--vertical .lc-pipeline__text{padding-top:calc((var(--lc-pipeline-node-size) - 1.25rem) / 2)}.lc-pipeline__step--complete .lc-pipeline__node{background-color:var(--color-primary-500);border-color:var(--color-primary-500);color:var(--color-on-primary, #fff)}.lc-pipeline__step--complete .lc-pipeline__connector{background-color:var(--lc-pipeline-line-done)}.lc-pipeline__step--current .lc-pipeline__node{border-color:var(--color-primary-500);color:var(--color-primary-500);box-shadow:var(--shadow-brand-glow)}.lc-pipeline__step--current .lc-pipeline__connector{background-color:var(--lc-pipeline-line-done)}.lc-pipeline__step--warning .lc-pipeline__node{border-color:var(--color-warning);color:var(--color-warning)}.lc-pipeline__step--error .lc-pipeline__node{border-color:var(--color-error);color:var(--color-error)}.lc-pipeline__step--pending .lc-pipeline__node{border-style:dashed}.lc-pipeline__step--pending .lc-pipeline__label{color:var(--color-text-secondary)}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "lc-icon",
+			inputs: [
+				"name",
+				"variant",
+				"size",
+				"color",
+				"ariaLabel",
+				"decorative",
+				"strict"
+			]
+		}, {
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PipelineComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-pipeline",
+			standalone: true,
+			imports: [IconComponent, NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<ol [class]=\"hostClass()\">\n  @for (step of steps(); track $index; let last = $last) {\n    <li [class]=\"stepClass(step)\" [class.lc-pipeline__step--last]=\"last\">\n      @if (clickable()) {\n        <button type=\"button\" class=\"lc-pipeline__hit\" (click)=\"onActivate(step)\">\n          <ng-container [ngTemplateOutlet]=\"body\" [ngTemplateOutletContext]=\"{ $implicit: step }\" />\n        </button>\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"body\" [ngTemplateOutletContext]=\"{ $implicit: step }\" />\n      }\n    </li>\n  }\n</ol>\n\n<ng-template #body let-step>\n  <span class=\"lc-pipeline__marker\">\n    <span class=\"lc-pipeline__connector\" aria-hidden=\"true\"></span>\n    <span class=\"lc-pipeline__node\">\n      @if (iconFor(step)) {\n        <lc-icon [name]=\"iconFor(step)\" size=\"xs\" [decorative]=\"true\" />\n      }\n    </span>\n  </span>\n  <span class=\"lc-pipeline__text\">\n    <span class=\"lc-pipeline__label\">{{ step.label }}</span>\n    @if (step.caption) {\n      <span class=\"lc-pipeline__caption\">{{ step.caption }}</span>\n    }\n  </span>\n</ng-template>\n",
+			styles: [":host{display:block}.lc-pipeline{--lc-pipeline-node-size: 1.75rem;--lc-pipeline-line-weight: 2px;--lc-pipeline-gap: var(--spacing-2);--lc-pipeline-line: var(--color-border-strong);--lc-pipeline-line-done: var(--color-primary-500);--lc-pipeline-node-bg: var(--color-surface);--lc-pipeline-node-fg: var(--color-text-tertiary);--lc-pipeline-node-border: var(--lc-pipeline-line)}.lc-pipeline--size-sm{--lc-pipeline-node-size: 1.25rem;--lc-pipeline-line-weight: 1px;--lc-pipeline-gap: var(--spacing-1)}.lc-pipeline--size-sm .lc-pipeline__label{font-size:var(--font-size-xs)}.lc-pipeline--size-sm .lc-pipeline__caption{font-size:var(--font-size-2xs, .6875rem)}.lc-pipeline--size-sm .lc-pipeline__node lc-icon{transform:scale(.85)}.lc-pipeline{list-style:none;margin:0;padding:0;display:flex}.lc-pipeline__step{position:relative;display:flex;min-width:0}.lc-pipeline__hit{display:flex;background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;cursor:pointer;width:100%}.lc-pipeline__hit:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px;border-radius:var(--border-radius-sm)}.lc-pipeline__marker{flex-shrink:0}.lc-pipeline__node{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:var(--lc-pipeline-node-size);height:var(--lc-pipeline-node-size);border-radius:var(--border-radius-full);background-color:var(--lc-pipeline-node-bg);border:var(--lc-pipeline-line-weight) solid var(--lc-pipeline-node-border);color:var(--lc-pipeline-node-fg);box-sizing:border-box}.lc-pipeline__label{display:block;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}.lc-pipeline__caption{display:block;font-size:var(--font-size-xs);color:var(--color-text-tertiary);line-height:1.35}.lc-pipeline--horizontal{align-items:flex-start;gap:var(--lc-pipeline-gap)}.lc-pipeline--horizontal .lc-pipeline__step{flex:1 1 0;flex-direction:column;align-items:flex-start}.lc-pipeline--horizontal .lc-pipeline__hit{flex-direction:column;align-items:flex-start}.lc-pipeline--horizontal .lc-pipeline__connector{position:absolute;top:calc(var(--lc-pipeline-node-size) / 2);left:calc(var(--lc-pipeline-node-size) / 2);width:calc(100% + var(--lc-pipeline-gap));height:var(--lc-pipeline-line-weight);transform:translateY(-50%);background-color:var(--lc-pipeline-line)}.lc-pipeline--horizontal .lc-pipeline__step--last .lc-pipeline__connector{display:none}.lc-pipeline--horizontal .lc-pipeline__text{margin-top:var(--spacing-2);padding-right:var(--spacing-3)}.lc-pipeline--vertical{flex-direction:column;gap:0}.lc-pipeline--vertical .lc-pipeline__step{flex-direction:row;align-items:flex-start;gap:var(--spacing-3);padding-bottom:var(--spacing-4)}.lc-pipeline--vertical .lc-pipeline__hit{flex-direction:row;align-items:flex-start;gap:var(--spacing-3)}.lc-pipeline--vertical .lc-pipeline__connector{position:absolute;left:calc(var(--lc-pipeline-node-size) / 2);top:var(--lc-pipeline-node-size);width:var(--lc-pipeline-line-weight);height:calc(100% - var(--lc-pipeline-node-size));transform:translate(-50%);background-color:var(--lc-pipeline-line)}.lc-pipeline--vertical .lc-pipeline__step--last .lc-pipeline__connector{display:none}.lc-pipeline--vertical .lc-pipeline__text{padding-top:calc((var(--lc-pipeline-node-size) - 1.25rem) / 2)}.lc-pipeline__step--complete .lc-pipeline__node{background-color:var(--color-primary-500);border-color:var(--color-primary-500);color:var(--color-on-primary, #fff)}.lc-pipeline__step--complete .lc-pipeline__connector{background-color:var(--lc-pipeline-line-done)}.lc-pipeline__step--current .lc-pipeline__node{border-color:var(--color-primary-500);color:var(--color-primary-500);box-shadow:var(--shadow-brand-glow)}.lc-pipeline__step--current .lc-pipeline__connector{background-color:var(--lc-pipeline-line-done)}.lc-pipeline__step--warning .lc-pipeline__node{border-color:var(--color-warning);color:var(--color-warning)}.lc-pipeline__step--error .lc-pipeline__node{border-color:var(--color-error);color:var(--color-error)}.lc-pipeline__step--pending .lc-pipeline__node{border-style:dashed}.lc-pipeline__step--pending .lc-pipeline__label{color:var(--color-text-secondary)}\n"]
+		}]
+	}],
+	propDecorators: {
+		steps: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "steps",
+				required: true
+			}]
+		}],
+		orientation: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "orientation",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		clickable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clickable",
+				required: false
+			}]
+		}],
+		stepClick: [{
+			type: i0.Output,
+			args: ["stepClick"]
+		}]
+	}
+});
+export { PipelineComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-pipeline.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-pipeline.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/pipeline/pipeline.component.ts","../../../../libs/angular-ui-kit/src/lib/pipeline/pipeline.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  output,\n  computed,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\n/**\n * Status of a single pipeline node.\n * - complete: finished (teal check)\n * - current:  in progress / active (teal, subtle pulse)\n * - pending:  not started yet (muted, hollow)\n * - warning:  needs attention (amber)\n * - error:    failed (red)\n */\nexport type PipelineStatus =\n  | 'complete'\n  | 'current'\n  | 'pending'\n  | 'warning'\n  | 'error';\n\nexport interface PipelineStep {\n  /** Node label. */\n  label: string;\n  /** Optional secondary line under the label. */\n  caption?: string;\n  /** Status that drives the node color and default icon. */\n  status: PipelineStatus;\n  /** Optional icon (Tabler name) overriding the status default. */\n  icon?: string;\n  /** Optional opaque payload echoed back in `stepClick`. */\n  id?: string;\n}\n\nexport type PipelineOrientation = 'horizontal' | 'vertical';\nexport type PipelineSize = 'sm' | 'md';\n\nconst STATUS_ICON: Record<PipelineStatus, string> = {\n  complete: 'check',\n  current: 'point',\n  pending: '',\n  warning: 'alert-triangle',\n  error: 'x',\n};\n\n/**\n * Pipeline — a status timeline of connected process nodes.\n *\n * Unlike {@link StepperComponent} (a navigation stepper whose states derive\n * from the active index), each pipeline node carries its own explicit status,\n * so it can show completed, current, pending, warning and error nodes in the\n * same chain — with an optional caption under each label.\n *\n * @example\n * ```html\n * <lc-pipeline\n *   [steps]=\"[\n *     { label: 'Connect', caption: 'Token valid', status: 'complete' },\n *     { label: 'Checkout', caption: '2 hours ago', status: 'complete' },\n *     { label: 'Analyze', caption: 'Running…', status: 'current' },\n *     { label: 'Graph', caption: 'Out of date', status: 'warning' }\n *   ]\" />\n * ```\n */\n@Component({\n  selector: 'lc-pipeline',\n  standalone: true,\n  imports: [IconComponent, NgTemplateOutlet],\n  templateUrl: './pipeline.component.html',\n  styleUrls: ['./pipeline.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class PipelineComponent {\n  /** Ordered pipeline nodes. */\n  readonly steps = input.required<readonly PipelineStep[]>();\n\n  /** Layout direction. @default 'horizontal' */\n  readonly orientation = input<PipelineOrientation>('horizontal');\n\n  /**\n   * Node/connector scale.\n   * - md: default nodes (1.75rem)\n   * - sm: compact spine — smaller nodes, thinner connectors, tighter grid\n   * @default 'md'\n   */\n  readonly size = input<PipelineSize>('md');\n\n  /** Whether nodes are clickable (emits `stepClick`). @default false */\n  readonly clickable = input<boolean>(false);\n\n  /** Emitted when a node is activated (only when `clickable`). */\n  readonly stepClick = output<PipelineStep>();\n\n  protected readonly hostClass = computed(\n    () =>\n      `lc-pipeline lc-pipeline--${this.orientation()} lc-pipeline--size-${this.size()}`,\n  );\n\n  protected iconFor(step: PipelineStep): string {\n    return step.icon ?? STATUS_ICON[step.status];\n  }\n\n  protected stepClass(step: PipelineStep): string {\n    return `lc-pipeline__step lc-pipeline__step--${step.status}`;\n  }\n\n  protected onActivate(step: PipelineStep): void {\n    if (this.clickable()) {\n      this.stepClick.emit(step);\n    }\n  }\n}\n","<ol [class]=\"hostClass()\">\n  @for (step of steps(); track $index; let last = $last) {\n    <li [class]=\"stepClass(step)\" [class.lc-pipeline__step--last]=\"last\">\n      @if (clickable()) {\n        <button type=\"button\" class=\"lc-pipeline__hit\" (click)=\"onActivate(step)\">\n          <ng-container [ngTemplateOutlet]=\"body\" [ngTemplateOutletContext]=\"{ $implicit: step }\" />\n        </button>\n      } @else {\n        <ng-container [ngTemplateOutlet]=\"body\" [ngTemplateOutletContext]=\"{ $implicit: step }\" />\n      }\n    </li>\n  }\n</ol>\n\n<ng-template #body let-step>\n  <span class=\"lc-pipeline__marker\">\n    <span class=\"lc-pipeline__connector\" aria-hidden=\"true\"></span>\n    <span class=\"lc-pipeline__node\">\n      @if (iconFor(step)) {\n        <lc-icon [name]=\"iconFor(step)\" size=\"xs\" [decorative]=\"true\" />\n      }\n    </span>\n  </span>\n  <span class=\"lc-pipeline__text\">\n    <span class=\"lc-pipeline__label\">{{ step.label }}</span>\n    @if (step.caption) {\n      <span class=\"lc-pipeline__caption\">{{ step.caption }}</span>\n    }\n  </span>\n</ng-template>\n"],"mappings":";;;;AAyCA,MAAM,cAA8C;CAClD,UAAU;CACV,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;AACR;AA6BD,IAAa,oBAAb,MAAa,kBAAiB;CAEnB,QAAQ,MAAM,SAAmC,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGjD,cAAc,MAA2B,cAAa,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAQtD,OAAO,MAAoB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGhC,YAAY,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGjC,YAAY,OAAM;CAER,YAAY,eAE3B,4BAA4B,KAAK,YAAW,EAAE,qBAAsB,KAAK,KAAI,KAChF,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAES,QAAQ,MAAkB;EAClC,OAAO,KAAK,QAAQ,YAAY,KAAK;CACvC;CAEU,UAAU,MAAkB;EACpC,OAAO,wCAAwC,KAAK;CACtD;CAEU,WAAW,MAAkB;EACrC,IAAI,KAAK,UAAS,GAChB,KAAK,UAAU,KAAK,IAAI;CAE5B;CAtCW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAiB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAjB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAiB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;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,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,WAAA,YAAA;EAAA,UAAA;EAAA,UC5E9B;EA8BA,QAAA,CAAA,unIAAA;EAAA,cAAA,CAAA;GAAA,MAAA;GAAA,MDyCY;GAAa,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;GAAA;EAAA,GAAA;GAAA,MAAA;GAAA,MAAE;GAAgB,UAAA;GAAA,QAAA;IAAA;IAAA;IAAA;GAAA;EAAA,CAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK9B,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAR7B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,YACX;GAAI,SACP,CAAC,eAAe,gBAAgB;GAAC,iBAGzB,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,unIAAA;EAAA,CAAA"}

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

@@ -0,0 +1,190 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Renderer2, afterRenderEffect, computed, effect, inject, input, output, signal, untracked } from "@angular/core";
+import { OverlayStackService } from "@lifecorner/angular-ui-kit/internal/overlay";
+const INTERACTIVE_SELECTOR = "button, a[href], input, select, textarea, [tabindex]";
+var PopoverComponent = class PopoverComponent {
+	static nextId = 0;
+	overlayId = `lc-popover-${++PopoverComponent.nextId}`;
+	position = input("bottom", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	trigger = input("click", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	showArrow = input(true, ...ngDevMode ? [{ debugName: "showArrow" }] : /* istanbul ignore next */ []);
+	openChange = output();
+	isOpen = signal(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	panelId = `${this.overlayId}-panel`;
+	panelClasses = computed(() => {
+		return [
+			"popover__panel",
+			`popover__panel--${this.position()}`,
+			this.showArrow() ? "popover__panel--arrow" : ""
+		].filter(Boolean).join(" ");
+	}, ...ngDevMode ? [{ debugName: "panelClasses" }] : /* istanbul ignore next */ []);
+	elementRef = inject(ElementRef);
+	renderer = inject(Renderer2);
+	overlayStack = inject(OverlayStackService);
+	constructor() {
+		effect(() => {
+			const open = this.isOpen();
+			untracked(() => {
+				if (open) this.overlayStack.push(this.overlayId);
+				else this.overlayStack.remove(this.overlayId);
+			});
+		});
+		afterRenderEffect(() => {
+			const open = this.isOpen();
+			const trigger = this.triggerElement();
+			if (!trigger) return;
+			this.renderer.setAttribute(trigger, "aria-haspopup", "dialog");
+			this.renderer.setAttribute(trigger, "aria-expanded", String(open));
+			if (open) this.renderer.setAttribute(trigger, "aria-controls", this.panelId);
+			else this.renderer.removeAttribute(trigger, "aria-controls");
+		});
+	}
+	onDocumentClick(event) {
+		if (!this.isOpen() || this.trigger() !== "click") return;
+		if (this.elementRef.nativeElement.contains(event.target)) return;
+		if (!this.overlayStack.claim(this.overlayId, event)) return;
+		this.close();
+	}
+	onEscape(event) {
+		if (!this.isOpen()) return;
+		if (!this.overlayStack.claim(this.overlayId, event)) return;
+		event.stopPropagation();
+		this.close();
+	}
+	ngOnDestroy() {
+		this.overlayStack.remove(this.overlayId);
+	}
+	toggle() {
+		if (this.isOpen()) this.close();
+		else this.open();
+	}
+	open() {
+		this.isOpen.set(true);
+		this.openChange.emit(true);
+	}
+	close() {
+		this.restoreFocus();
+		this.isOpen.set(false);
+		this.openChange.emit(false);
+	}
+	onMouseEnter() {
+		if (this.trigger() === "hover") this.open();
+	}
+	onMouseLeave() {
+		if (this.trigger() === "hover") this.close();
+	}
+	triggerElement() {
+		const slot = this.elementRef.nativeElement.querySelector("[popover-trigger]");
+		if (!slot) return null;
+		return slot.matches(INTERACTIVE_SELECTOR) ? slot : slot.querySelector(INTERACTIVE_SELECTOR) ?? slot;
+	}
+	restoreFocus() {
+		if (typeof document === "undefined") return;
+		if (this.elementRef.nativeElement.querySelector(".popover__panel")?.contains(document.activeElement)) this.triggerElement()?.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PopoverComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: PopoverComponent,
+		isStandalone: true,
+		selector: "lc-popover",
+		inputs: {
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			trigger: {
+				classPropertyName: "trigger",
+				publicName: "trigger",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showArrow: {
+				classPropertyName: "showArrow",
+				publicName: "showArrow",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { openChange: "openChange" },
+		host: { listeners: {
+			"document:click": "onDocumentClick($event)",
+			"document:keydown.escape": "onEscape($event)"
+		} },
+		ngImport: i0,
+		template: "<div\n  class=\"popover\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- the projected trigger is the focusable control; its click bubbles here -->\n  <div class=\"popover__trigger\" (click)=\"trigger() === 'click' ? toggle() : null\">\n    <ng-content select=\"[popover-trigger]\"></ng-content>\n  </div>\n  @if (isOpen()) {\n    <div [id]=\"panelId\" [class]=\"panelClasses()\" role=\"dialog\" aria-modal=\"false\">\n      <ng-content select=\"[popover-content]\"></ng-content>\n    </div>\n  }\n</div>\n",
+		styles: [":host{display:inline-block;position:relative}.popover{position:relative;display:inline-block}.popover__trigger{display:inline-block;cursor:pointer}.popover__panel{position:absolute;z-index:50;min-width:12rem;padding:.75rem;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-4);animation:popover-enter .15s ease-out}.popover__panel--bottom{top:calc(100% + .5rem);left:50%;transform:translate(-50%)}.popover__panel--top{bottom:calc(100% + .5rem);left:50%;transform:translate(-50%)}.popover__panel--left{right:calc(100% + .5rem);top:50%;transform:translateY(-50%)}.popover__panel--right{left:calc(100% + .5rem);top:50%;transform:translateY(-50%)}.popover__panel--arrow:before{content:\"\";position:absolute;width:.5rem;height:.5rem;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);transform:rotate(45deg)}.popover__panel--arrow.popover__panel--bottom:before{top:-.3rem;left:50%;margin-left:-.25rem;border-right:none;border-bottom:none}.popover__panel--arrow.popover__panel--top:before{bottom:-.3rem;left:50%;margin-left:-.25rem;border-left:none;border-top:none}.popover__panel--arrow.popover__panel--left:before{right:-.3rem;top:50%;margin-top:-.25rem;border-left:none;border-bottom:none}.popover__panel--arrow.popover__panel--right:before{left:-.3rem;top:50%;margin-top:-.25rem;border-right:none;border-top:none}@keyframes popover-enter{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PopoverComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-popover",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div\n  class=\"popover\"\n  (mouseenter)=\"onMouseEnter()\"\n  (mouseleave)=\"onMouseLeave()\"\n>\n  <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- the projected trigger is the focusable control; its click bubbles here -->\n  <div class=\"popover__trigger\" (click)=\"trigger() === 'click' ? toggle() : null\">\n    <ng-content select=\"[popover-trigger]\"></ng-content>\n  </div>\n  @if (isOpen()) {\n    <div [id]=\"panelId\" [class]=\"panelClasses()\" role=\"dialog\" aria-modal=\"false\">\n      <ng-content select=\"[popover-content]\"></ng-content>\n    </div>\n  }\n</div>\n",
+			styles: [":host{display:inline-block;position:relative}.popover{position:relative;display:inline-block}.popover__trigger{display:inline-block;cursor:pointer}.popover__panel{position:absolute;z-index:50;min-width:12rem;padding:.75rem;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);border-radius:var(--border-radius-lg);box-shadow:var(--elevation-4);animation:popover-enter .15s ease-out}.popover__panel--bottom{top:calc(100% + .5rem);left:50%;transform:translate(-50%)}.popover__panel--top{bottom:calc(100% + .5rem);left:50%;transform:translate(-50%)}.popover__panel--left{right:calc(100% + .5rem);top:50%;transform:translateY(-50%)}.popover__panel--right{left:calc(100% + .5rem);top:50%;transform:translateY(-50%)}.popover__panel--arrow:before{content:\"\";position:absolute;width:.5rem;height:.5rem;background-color:var(--color-surface);background-image:var(--gradient-surface);border:1px solid var(--color-border-strong);transform:rotate(45deg)}.popover__panel--arrow.popover__panel--bottom:before{top:-.3rem;left:50%;margin-left:-.25rem;border-right:none;border-bottom:none}.popover__panel--arrow.popover__panel--top:before{bottom:-.3rem;left:50%;margin-left:-.25rem;border-left:none;border-top:none}.popover__panel--arrow.popover__panel--left:before{right:-.3rem;top:50%;margin-top:-.25rem;border-left:none;border-bottom:none}.popover__panel--arrow.popover__panel--right:before{left:-.3rem;top:50%;margin-top:-.25rem;border-right:none;border-top:none}@keyframes popover-enter{0%{opacity:0;transform:translate(-50%) scale(.95)}to{opacity:1;transform:translate(-50%) scale(1)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		trigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "trigger",
+				required: false
+			}]
+		}],
+		showArrow: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showArrow",
+				required: false
+			}]
+		}],
+		openChange: [{
+			type: i0.Output,
+			args: ["openChange"]
+		}],
+		onDocumentClick: [{
+			type: HostListener,
+			args: ["document:click", ["$event"]]
+		}],
+		onEscape: [{
+			type: HostListener,
+			args: ["document:keydown.escape", ["$event"]]
+		}]
+	}
+});
+export { PopoverComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-popover.mjs.map