@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1,209 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+var TypographyComponent = class TypographyComponent {
+	variant = input("body1", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	align = input("left", ...ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []);
+	color = input("primary", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	weight = input(void 0, ...ngDevMode ? [{ debugName: "weight" }] : /* istanbul ignore next */ []);
+	transform = input("none", ...ngDevMode ? [{ debugName: "transform" }] : /* istanbul ignore next */ []);
+	noWrap = input(false, ...ngDevMode ? [{ debugName: "noWrap" }] : /* istanbul ignore next */ []);
+	lineClamp = input(void 0, ...ngDevMode ? [{ debugName: "lineClamp" }] : /* istanbul ignore next */ []);
+	gutterBottom = input(false, ...ngDevMode ? [{ debugName: "gutterBottom" }] : /* istanbul ignore next */ []);
+	elementTag = computed(() => {
+		const variantValue = this.variant();
+		if (variantValue.startsWith("h")) return variantValue;
+		if (variantValue === "caption" || variantValue === "overline") return "span";
+		return "p";
+	}, ...ngDevMode ? [{ debugName: "elementTag" }] : /* istanbul ignore next */ []);
+	typographyClasses = computed(() => {
+		const classes = ["typography"];
+		classes.push(`typography-${this.variant()}`);
+		classes.push(`lc-typography--align-${this.align()}`);
+		classes.push(`lc-typography--color-${this.color()}`);
+		const weightValue = this.weight();
+		if (weightValue) classes.push(`lc-typography--weight-${weightValue}`);
+		const transformValue = this.transform();
+		if (transformValue !== "none") classes.push(`lc-typography--${transformValue}`);
+		if (this.noWrap()) classes.push("lc-typography--nowrap");
+		const lineClampValue = this.lineClamp();
+		if (lineClampValue !== void 0 && lineClampValue >= 1 && lineClampValue <= 6) classes.push(`lc-typography--clamp-${lineClampValue}`);
+		if (this.gutterBottom()) classes.push("lc-typography--gutter-bottom");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "typographyClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: TypographyComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: TypographyComponent,
+		isStandalone: true,
+		selector: "lc-typography",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			align: {
+				classPropertyName: "align",
+				publicName: "align",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			weight: {
+				classPropertyName: "weight",
+				publicName: "weight",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			transform: {
+				classPropertyName: "transform",
+				publicName: "transform",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			noWrap: {
+				classPropertyName: "noWrap",
+				publicName: "noWrap",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			lineClamp: {
+				classPropertyName: "lineClamp",
+				publicName: "lineClamp",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			gutterBottom: {
+				classPropertyName: "gutterBottom",
+				publicName: "gutterBottom",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<!-- One <ng-content> only: Angular projects content into a single slot, and a\n     slot that sits inside a non-rendered @switch branch swallows it (the h1 case\n     used to render empty in the browser). The content lives in a template that\n     each branch stamps into its element. -->\n<ng-template #content><ng-content /></ng-template>\n\n@switch (elementTag()) {\n  @case ('h1') {\n    <h1 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h1>\n  }\n  @case ('h2') {\n    <h2 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h2>\n  }\n  @case ('h3') {\n    <h3 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h3>\n  }\n  @case ('h4') {\n    <h4 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h4>\n  }\n  @case ('h5') {\n    <h5 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h5>\n  }\n  @case ('h6') {\n    <h6 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h6>\n  }\n  @case ('span') {\n    <span [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></span>\n  }\n  @default {\n    <p [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></p>\n  }\n}\n",
+		styles: [":host{display:block}.typography{margin:0;font-family:var(--font-family-base, inherit);color:var(--color-text-primary);transition:color .15s ease-in-out}lc-typography h1.typography-h1,h1.typography-h1{font-size:4.5rem;line-height:5rem;font-weight:700;letter-spacing:-.02em}lc-typography h2.typography-h2,h2.typography-h2{font-size:3rem;line-height:4.5rem;font-weight:700;letter-spacing:-.01em}lc-typography h3.typography-h3,h3.typography-h3{font-size:2.5rem;line-height:4rem;font-weight:600;letter-spacing:-.01em}lc-typography h4.typography-h4,h4.typography-h4{font-size:2rem;line-height:3.5rem;font-weight:600}lc-typography h5.typography-h5,h5.typography-h5{font-size:1.5rem;line-height:3rem;font-weight:600}lc-typography h6.typography-h6,h6.typography-h6{font-size:1rem;line-height:2rem;font-weight:600}lc-typography p.typography-body1,p.typography-body1,.typography-body1{font-size:1rem;line-height:1.5rem;font-weight:400}lc-typography p.typography-body2,p.typography-body2,.typography-body2{font-size:.875rem;line-height:1rem;font-weight:400}lc-typography p.typography-subtitle1,p.typography-subtitle1,.typography-subtitle1{font-size:1.125rem;line-height:1.75rem;font-weight:600}lc-typography p.typography-subtitle2,p.typography-subtitle2,.typography-subtitle2{font-size:.875rem;line-height:1.25rem;font-weight:600}lc-typography span.typography-caption,span.typography-caption,.typography-caption{font-size:.75rem;line-height:1rem;font-weight:400}lc-typography span.typography-overline,span.typography-overline,.typography-overline{font-size:.625rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.typography.lc-typography--color-primary{color:var(--color-text-primary)}.typography.lc-typography--color-secondary{color:var(--color-text-secondary)}.typography.lc-typography--color-disabled{color:var(--color-text-disabled)}.typography.lc-typography--color-error{color:var(--color-text-error)}.typography.lc-typography--color-success{color:var(--color-text-success)}.typography.lc-typography--color-warning{color:var(--color-text-warning)}.typography.lc-typography--color-info{color:var(--color-on-info-subtle)}.typography.lc-typography--weight-regular{font-weight:400}.typography.lc-typography--weight-medium{font-weight:500}.typography.lc-typography--weight-semibold{font-weight:600}.typography.lc-typography--weight-bold{font-weight:700}.typography.lc-typography--align-left{text-align:left}.typography.lc-typography--align-center{text-align:center}.typography.lc-typography--align-right{text-align:right}.typography.lc-typography--align-justify{text-align:justify}.typography.lc-typography--uppercase{text-transform:uppercase}.typography.lc-typography--lowercase{text-transform:lowercase}.typography.lc-typography--capitalize{text-transform:capitalize}.typography.lc-typography--nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.typography.lc-typography--clamp-1{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.typography.lc-typography--clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.typography.lc-typography--clamp-3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.typography.lc-typography--clamp-4{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.typography.lc-typography--clamp-5{display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.typography.lc-typography--clamp-6{display:-webkit-box;-webkit-line-clamp:6;line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.typography.lc-typography--gutter-bottom{margin-bottom:var(--lc-density-gap-md, 1rem)}\n"],
+		dependencies: [{
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: TypographyComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-typography",
+			standalone: true,
+			imports: [NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			template: "<!-- One <ng-content> only: Angular projects content into a single slot, and a\n     slot that sits inside a non-rendered @switch branch swallows it (the h1 case\n     used to render empty in the browser). The content lives in a template that\n     each branch stamps into its element. -->\n<ng-template #content><ng-content /></ng-template>\n\n@switch (elementTag()) {\n  @case ('h1') {\n    <h1 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h1>\n  }\n  @case ('h2') {\n    <h2 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h2>\n  }\n  @case ('h3') {\n    <h3 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h3>\n  }\n  @case ('h4') {\n    <h4 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h4>\n  }\n  @case ('h5') {\n    <h5 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h5>\n  }\n  @case ('h6') {\n    <h6 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h6>\n  }\n  @case ('span') {\n    <span [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></span>\n  }\n  @default {\n    <p [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></p>\n  }\n}\n",
+			styles: [":host{display:block}.typography{margin:0;font-family:var(--font-family-base, inherit);color:var(--color-text-primary);transition:color .15s ease-in-out}lc-typography h1.typography-h1,h1.typography-h1{font-size:4.5rem;line-height:5rem;font-weight:700;letter-spacing:-.02em}lc-typography h2.typography-h2,h2.typography-h2{font-size:3rem;line-height:4.5rem;font-weight:700;letter-spacing:-.01em}lc-typography h3.typography-h3,h3.typography-h3{font-size:2.5rem;line-height:4rem;font-weight:600;letter-spacing:-.01em}lc-typography h4.typography-h4,h4.typography-h4{font-size:2rem;line-height:3.5rem;font-weight:600}lc-typography h5.typography-h5,h5.typography-h5{font-size:1.5rem;line-height:3rem;font-weight:600}lc-typography h6.typography-h6,h6.typography-h6{font-size:1rem;line-height:2rem;font-weight:600}lc-typography p.typography-body1,p.typography-body1,.typography-body1{font-size:1rem;line-height:1.5rem;font-weight:400}lc-typography p.typography-body2,p.typography-body2,.typography-body2{font-size:.875rem;line-height:1rem;font-weight:400}lc-typography p.typography-subtitle1,p.typography-subtitle1,.typography-subtitle1{font-size:1.125rem;line-height:1.75rem;font-weight:600}lc-typography p.typography-subtitle2,p.typography-subtitle2,.typography-subtitle2{font-size:.875rem;line-height:1.25rem;font-weight:600}lc-typography span.typography-caption,span.typography-caption,.typography-caption{font-size:.75rem;line-height:1rem;font-weight:400}lc-typography span.typography-overline,span.typography-overline,.typography-overline{font-size:.625rem;line-height:1rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.typography.lc-typography--color-primary{color:var(--color-text-primary)}.typography.lc-typography--color-secondary{color:var(--color-text-secondary)}.typography.lc-typography--color-disabled{color:var(--color-text-disabled)}.typography.lc-typography--color-error{color:var(--color-text-error)}.typography.lc-typography--color-success{color:var(--color-text-success)}.typography.lc-typography--color-warning{color:var(--color-text-warning)}.typography.lc-typography--color-info{color:var(--color-on-info-subtle)}.typography.lc-typography--weight-regular{font-weight:400}.typography.lc-typography--weight-medium{font-weight:500}.typography.lc-typography--weight-semibold{font-weight:600}.typography.lc-typography--weight-bold{font-weight:700}.typography.lc-typography--align-left{text-align:left}.typography.lc-typography--align-center{text-align:center}.typography.lc-typography--align-right{text-align:right}.typography.lc-typography--align-justify{text-align:justify}.typography.lc-typography--uppercase{text-transform:uppercase}.typography.lc-typography--lowercase{text-transform:lowercase}.typography.lc-typography--capitalize{text-transform:capitalize}.typography.lc-typography--nowrap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.typography.lc-typography--clamp-1{display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.typography.lc-typography--clamp-2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.typography.lc-typography--clamp-3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.typography.lc-typography--clamp-4{display:-webkit-box;-webkit-line-clamp:4;line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.typography.lc-typography--clamp-5{display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}.typography.lc-typography--clamp-6{display:-webkit-box;-webkit-line-clamp:6;line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.typography.lc-typography--gutter-bottom{margin-bottom:var(--lc-density-gap-md, 1rem)}\n"]
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		align: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "align",
+				required: false
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		weight: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "weight",
+				required: false
+			}]
+		}],
+		transform: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "transform",
+				required: false
+			}]
+		}],
+		noWrap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noWrap",
+				required: false
+			}]
+		}],
+		lineClamp: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "lineClamp",
+				required: false
+			}]
+		}],
+		gutterBottom: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gutterBottom",
+				required: false
+			}]
+		}]
+	}
+});
+export { TypographyComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-typography.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-typography.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/typography/typography.component.ts","../../../../libs/angular-ui-kit/src/lib/typography/typography.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/**\n * Typography component for consistent text styling.\n *\n * Features:\n * - Semantic variants (h1–h6, body1, body2, caption, overline)\n * - Automatic HTML element mapping per variant\n * - Text alignment options (left, center, right, justify)\n * - Color variants (primary, secondary, success, warning, error, info)\n * - Font weight overrides (regular, medium, semibold, bold)\n * - Text transform (uppercase, lowercase, capitalize)\n * - Line clamping for text truncation\n * - Gutter bottom margin option\n *\n * @example\n * ```html\n * <lc-typography variant=\"h1\" color=\"primary\">Heading</lc-typography>\n * <lc-typography variant=\"body1\" [lineClamp]=\"2\">Truncated text...</lc-typography>\n * ```\n */\n@Component({\n  selector: 'lc-typography',\n  templateUrl: './typography.component.html',\n  styleUrl: './typography.component.scss',\n  standalone: true,\n  imports: [NgTemplateOutlet],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None, // Required for global typography utilities\n})\nexport class TypographyComponent {\n  /**\n   * Typography variant determining the HTML element and default styles\n   * - h1-h6: Heading elements with corresponding sizes\n   * - body1: Default paragraph text (16px)\n   * - body2: Smaller body text (14px)\n   * - subtitle1: Larger subtitle (18px)\n   * - subtitle2: Smaller subtitle (14px)\n   * - caption: Small helper text (12px)\n   * - overline: Uppercase accent text (10px)\n   * @default 'body1'\n   */\n  variant = input<\n    | 'h1'\n    | 'h2'\n    | 'h3'\n    | 'h4'\n    | 'h5'\n    | 'h6'\n    | 'body1'\n    | 'body2'\n    | 'subtitle1'\n    | 'subtitle2'\n    | 'caption'\n    | 'overline'\n  >('body1');\n\n  /**\n   * Text alignment\n   * @default 'left'\n   */\n  align = input<'left' | 'center' | 'right' | 'justify'>('left');\n\n  /**\n   * Text color using semantic color tokens\n   * @default 'primary'\n   */\n  color = input<'primary' | 'secondary' | 'disabled' | 'error' | 'success' | 'warning' | 'info'>(\n    'primary',\n  );\n\n  /**\n   * Font weight override. When unset, the variant's own weight applies\n   * (e.g. h1 is bold, body1 is regular); setting it wins over the variant.\n   * @default undefined\n   */\n  weight = input<'regular' | 'medium' | 'semibold' | 'bold' | undefined>(undefined);\n\n  /**\n   * Text transform\n   * @default 'none'\n   */\n  transform = input<'none' | 'uppercase' | 'lowercase' | 'capitalize'>('none');\n\n  /**\n   * Prevent text wrapping (applies ellipsis on overflow)\n   * @default false\n   */\n  noWrap = input<boolean>(false);\n\n  /**\n   * Limit text to a specific number of lines (1-6)\n   * Uses CSS line-clamp for multi-line truncation\n   * @default undefined\n   */\n  lineClamp = input<number | undefined>(undefined);\n\n  /**\n   * Add bottom margin (1rem) for spacing between elements\n   * @default false\n   */\n  gutterBottom = input<boolean>(false);\n\n  /**\n   * Compute the HTML element tag based on variant\n   */\n  readonly elementTag = computed<string>(() => {\n    const variantValue = this.variant();\n    if (variantValue.startsWith('h')) {\n      return variantValue; // h1, h2, h3, h4, h5, h6\n    }\n    if (variantValue === 'caption' || variantValue === 'overline') {\n      return 'span';\n    }\n    return 'p'; // body1, body2, subtitle1, subtitle2\n  });\n\n  /**\n   * Compute all CSS classes based on inputs.\n   *\n   * Modifier classes are prefixed (`lc-typography--…`): the component renders\n   * with `ViewEncapsulation.None`, so unprefixed names such as `.uppercase` or\n   * `.mb-4` would become app-global rules that shadow Tailwind utilities.\n   */\n  readonly typographyClasses = computed<string>(() => {\n    const classes: string[] = ['typography'];\n\n    // Variant class\n    classes.push(`typography-${this.variant()}`);\n\n    // Alignment\n    classes.push(`lc-typography--align-${this.align()}`);\n\n    // Color\n    classes.push(`lc-typography--color-${this.color()}`);\n\n    // Weight (only when explicitly set — otherwise the variant's weight applies)\n    const weightValue = this.weight();\n    if (weightValue) {\n      classes.push(`lc-typography--weight-${weightValue}`);\n    }\n\n    // Transform\n    const transformValue = this.transform();\n    if (transformValue !== 'none') {\n      classes.push(`lc-typography--${transformValue}`);\n    }\n\n    // No wrap\n    if (this.noWrap()) {\n      classes.push('lc-typography--nowrap');\n    }\n\n    // Line clamp\n    const lineClampValue = this.lineClamp();\n    if (lineClampValue !== undefined && lineClampValue >= 1 && lineClampValue <= 6) {\n      classes.push(`lc-typography--clamp-${lineClampValue}`);\n    }\n\n    // Gutter bottom\n    if (this.gutterBottom()) {\n      classes.push('lc-typography--gutter-bottom');\n    }\n\n    return classes.join(' ');\n  });\n}\n","<!-- One <ng-content> only: Angular projects content into a single slot, and a\n     slot that sits inside a non-rendered @switch branch swallows it (the h1 case\n     used to render empty in the browser). The content lives in a template that\n     each branch stamps into its element. -->\n<ng-template #content><ng-content /></ng-template>\n\n@switch (elementTag()) {\n  @case ('h1') {\n    <h1 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h1>\n  }\n  @case ('h2') {\n    <h2 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h2>\n  }\n  @case ('h3') {\n    <h3 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h3>\n  }\n  @case ('h4') {\n    <h4 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h4>\n  }\n  @case ('h5') {\n    <h5 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h5>\n  }\n  @case ('h6') {\n    <h6 [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></h6>\n  }\n  @case ('span') {\n    <span [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></span>\n  }\n  @default {\n    <p [class]=\"typographyClasses()\"><ng-container [ngTemplateOutlet]=\"content\" /></p>\n  }\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-verification-code-input.mjs

@@ -0,0 +1,365 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, afterNextRender, computed, forwardRef, input, linkedSignal, output, signal, viewChildren } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+let nextUniqueId = 0;
+var VerificationCodeInputComponent = class VerificationCodeInputComponent {
+	label = input("Verification Code", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	length = input(6, ...ngDevMode ? [{ debugName: "length" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	required = input(false, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+	requiredIndicator = input(true, ...ngDevMode ? [{ debugName: "requiredIndicator" }] : /* istanbul ignore next */ []);
+	gap = input("default", ...ngDevMode ? [{ debugName: "gap" }] : /* istanbul ignore next */ []);
+	error = input(void 0, ...ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []);
+	autoSubmit = input(false, ...ngDevMode ? [{ debugName: "autoSubmit" }] : /* istanbul ignore next */ []);
+	hint = input(void 0, ...ngDevMode ? [{ debugName: "hint" }] : /* istanbul ignore next */ []);
+	autofocus = input(false, ...ngDevMode ? [{ debugName: "autofocus" }] : /* istanbul ignore next */ []);
+	digitAriaLabel = input("Digit {n} of {total}", ...ngDevMode ? [{ debugName: "digitAriaLabel" }] : /* istanbul ignore next */ []);
+	digitLabel(index) {
+		return this.digitAriaLabel().replace("{n}", String(index + 1)).replace("{total}", String(this.length()));
+	}
+	complete = output();
+	groupId = `lc-verification-code-${nextUniqueId++}`;
+	labelId = `${this.groupId}-label`;
+	hintId = `${this.groupId}-hint`;
+	errorId = `${this.groupId}-error`;
+	digitInputs = viewChildren("digitInput", ...ngDevMode ? [{ debugName: "digitInputs" }] : /* istanbul ignore next */ []);
+	digits = linkedSignal(() => Array(this.length()).fill(""), ...ngDevMode ? [{ debugName: "digits" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	code = computed(() => this.digits().join(""), ...ngDevMode ? [{ debugName: "code" }] : /* istanbul ignore next */ []);
+	isComplete = computed(() => this.digits().every((digit) => digit !== ""), ...ngDevMode ? [{ debugName: "isComplete" }] : /* istanbul ignore next */ []);
+	hintText = computed(() => {
+		const hint = this.hint();
+		return hint === void 0 ? `Enter the ${this.length()}-digit code` : hint;
+	}, ...ngDevMode ? [{ debugName: "hintText" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => {
+		const ids = [];
+		if (this.error()) ids.push(this.errorId);
+		if (this.hintText()) ids.push(this.hintId);
+		return ids.length ? ids.join(" ") : null;
+	}, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	constructor() {
+		afterNextRender(() => {
+			if (this.autofocus()) this.focusInput(0);
+		});
+	}
+	writeValue(value) {
+		const chars = (value ?? "").replace(/\D/g, "").slice(0, this.length()).split("");
+		this.digits.set(Array.from({ length: this.length() }, (_, i) => chars[i] ?? ""));
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	clear() {
+		this.digits.set(Array(this.length()).fill(""));
+		for (const box of this.digitInputs()) box.nativeElement.value = "";
+		this.onChange("");
+		this.focusInput(0);
+	}
+	onDigitInput(event, index) {
+		const input = event.target;
+		const previous = this.digits()[index];
+		if (input.value === "") {
+			if (previous) this.setDigit(index, "");
+			return;
+		}
+		let typed = input.value.replace(/\D/g, "");
+		if (previous && typed.length === 2 && typed.includes(previous)) typed = typed.replace(previous, "");
+		else if (typed === previous) typed = "";
+		if (!typed) {
+			input.value = previous;
+			return;
+		}
+		this.applyDigits(typed.split(""), index);
+		input.value = this.digits()[index];
+	}
+	onKeyDown(event, index) {
+		const input = event.target;
+		if (event.key === "Backspace") {
+			if (input.value) this.setDigit(index, "");
+			else if (index > 0) {
+				this.setDigit(index - 1, "");
+				this.focusInput(index - 1);
+			}
+			event.preventDefault();
+		} else if (event.key === "ArrowLeft" && index > 0) {
+			this.focusInput(index - 1);
+			event.preventDefault();
+		} else if (event.key === "ArrowRight" && index < this.length() - 1) {
+			this.focusInput(index + 1);
+			event.preventDefault();
+		}
+	}
+	onPaste(event) {
+		event.preventDefault();
+		if (this.isDisabled()) return;
+		const pasted = (event.clipboardData?.getData("text") || "").replace(/\D/g, "");
+		if (pasted) this.applyDigits(pasted.split(""), 0);
+	}
+	applyDigits(chars, start) {
+		const len = this.length();
+		const next = [...this.digits()];
+		const count = Math.min(chars.length, len - start);
+		for (let i = 0; i < count; i++) next[start + i] = chars[i];
+		this.digits.set(next);
+		this.onChange(this.code());
+		this.focusInput(Math.min(start + count, len - 1));
+		if (this.isComplete()) {
+			this.onTouched();
+			this.complete.emit(this.code());
+		}
+	}
+	setDigit(index, digit) {
+		this.digits.update((digits) => digits.map((d, i) => i === index ? digit : d));
+		this.onChange(this.code());
+	}
+	focusInput(index) {
+		const input = this.digitInputs()[index]?.nativeElement;
+		if (input) {
+			input.focus();
+			input.select();
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: VerificationCodeInputComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: VerificationCodeInputComponent,
+		isStandalone: true,
+		selector: "lc-verification-code-input",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			length: {
+				classPropertyName: "length",
+				publicName: "length",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			requiredIndicator: {
+				classPropertyName: "requiredIndicator",
+				publicName: "requiredIndicator",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			gap: {
+				classPropertyName: "gap",
+				publicName: "gap",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			error: {
+				classPropertyName: "error",
+				publicName: "error",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoSubmit: {
+				classPropertyName: "autoSubmit",
+				publicName: "autoSubmit",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hint: {
+				classPropertyName: "hint",
+				publicName: "hint",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autofocus: {
+				classPropertyName: "autofocus",
+				publicName: "autofocus",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			digitAriaLabel: {
+				classPropertyName: "digitAriaLabel",
+				publicName: "digitAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { complete: "complete" },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => VerificationCodeInputComponent),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "digitInputs",
+			predicate: ["digitInput"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div class=\"lc-verification-code-input\">\n  <!-- The label names the whole group of digit inputs (aria-labelledby), not a single control -->\n  @if (label()) {\n    <span [id]=\"labelId\" class=\"lc-label\">\n      {{ label() }}\n      @if (required() && requiredIndicator()) {\n        <span class=\"lc-required\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n  }\n\n  <div\n    [id]=\"groupId\"\n    class=\"lc-digit-inputs\"\n    [class.lc-digit-inputs--compact]=\"gap() === 'compact'\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? labelId : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (paste)=\"onPaste($event)\"\n  >\n    @for (digit of digits(); track $index; let i = $index) {\n      <input\n        #digitInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.autocomplete]=\"i === 0 ? 'one-time-code' : 'off'\"\n        [value]=\"digit\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n        [attr.aria-label]=\"digitLabel(i)\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"error() ? 'true' : null\"\n        [attr.aria-describedby]=\"error() ? errorId : null\"\n        (input)=\"onDigitInput($event, i)\"\n        (keydown)=\"onKeyDown($event, i)\"\n        class=\"lc-digit-input\"\n        [class.lc-digit-input-error]=\"error()\"\n        [class.lc-digit-input-filled]=\"digit\"\n      />\n    }\n  </div>\n\n  @if (error()) {\n    <div [id]=\"errorId\" class=\"lc-error\" role=\"alert\">\n      {{ error() }}\n    </div>\n  }\n\n  @if (hintText()) {\n    <div [id]=\"hintId\" class=\"lc-hint\">\n      {{ hintText() }}\n    </div>\n  }\n</div>\n",
+		styles: ["@charset \"UTF-8\";.lc-verification-code-input{display:flex;flex-direction:column;gap:.75rem;width:100%}.lc-label{font-size:.875rem;font-weight:500;color:var(--color-text-primary);text-align:center}.lc-required{color:var(--color-text-error);margin-left:.25rem}.lc-digit-inputs{display:flex;justify-content:center;gap:.75rem}.lc-digit-inputs--compact{gap:.5rem}.lc-digit-input{width:3rem;height:3.5rem;font-size:1.5rem;font-weight:600;text-align:center;border:2px solid var(--color-field-border);border-radius:var(--border-radius-md);background-color:var(--color-surface);color:var(--color-text-primary);transition:all .2s ease}.lc-digit-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-digit-input:disabled{background-color:var(--color-surface-muted);color:var(--color-text-disabled);cursor:not-allowed}.lc-digit-input.lc-digit-input-error{border-color:var(--color-error-600)}.lc-digit-input.lc-digit-input-error:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--color-error-600) 20%,transparent)}.lc-digit-input.lc-digit-input-filled{border-color:var(--color-primary-500);background-color:var(--color-primary-subtle)}.lc-error{font-size:.875rem;color:var(--color-text-error);text-align:center}.lc-hint{font-size:.875rem;color:var(--color-text-secondary);text-align:center}@media(max-width:480px){.lc-digit-inputs{gap:.5rem}.lc-digit-inputs--compact{gap:.25rem}.lc-digit-input{width:2.75rem;height:3rem;font-size:1.25rem}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: VerificationCodeInputComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-verification-code-input",
+			standalone: true,
+			imports: [],
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => VerificationCodeInputComponent),
+				multi: true
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"lc-verification-code-input\">\n  <!-- The label names the whole group of digit inputs (aria-labelledby), not a single control -->\n  @if (label()) {\n    <span [id]=\"labelId\" class=\"lc-label\">\n      {{ label() }}\n      @if (required() && requiredIndicator()) {\n        <span class=\"lc-required\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n  }\n\n  <div\n    [id]=\"groupId\"\n    class=\"lc-digit-inputs\"\n    [class.lc-digit-inputs--compact]=\"gap() === 'compact'\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? labelId : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (paste)=\"onPaste($event)\"\n  >\n    @for (digit of digits(); track $index; let i = $index) {\n      <input\n        #digitInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.autocomplete]=\"i === 0 ? 'one-time-code' : 'off'\"\n        [value]=\"digit\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n        [attr.aria-label]=\"digitLabel(i)\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"error() ? 'true' : null\"\n        [attr.aria-describedby]=\"error() ? errorId : null\"\n        (input)=\"onDigitInput($event, i)\"\n        (keydown)=\"onKeyDown($event, i)\"\n        class=\"lc-digit-input\"\n        [class.lc-digit-input-error]=\"error()\"\n        [class.lc-digit-input-filled]=\"digit\"\n      />\n    }\n  </div>\n\n  @if (error()) {\n    <div [id]=\"errorId\" class=\"lc-error\" role=\"alert\">\n      {{ error() }}\n    </div>\n  }\n\n  @if (hintText()) {\n    <div [id]=\"hintId\" class=\"lc-hint\">\n      {{ hintText() }}\n    </div>\n  }\n</div>\n",
+			styles: ["@charset \"UTF-8\";.lc-verification-code-input{display:flex;flex-direction:column;gap:.75rem;width:100%}.lc-label{font-size:.875rem;font-weight:500;color:var(--color-text-primary);text-align:center}.lc-required{color:var(--color-text-error);margin-left:.25rem}.lc-digit-inputs{display:flex;justify-content:center;gap:.75rem}.lc-digit-inputs--compact{gap:.5rem}.lc-digit-input{width:3rem;height:3.5rem;font-size:1.5rem;font-weight:600;text-align:center;border:2px solid var(--color-field-border);border-radius:var(--border-radius-md);background-color:var(--color-surface);color:var(--color-text-primary);transition:all .2s ease}.lc-digit-input:focus{outline:none;border-color:var(--color-primary-500);box-shadow:0 0 0 4px color-mix(in srgb,var(--color-primary-500) 20%,transparent)}.lc-digit-input:disabled{background-color:var(--color-surface-muted);color:var(--color-text-disabled);cursor:not-allowed}.lc-digit-input.lc-digit-input-error{border-color:var(--color-error-600)}.lc-digit-input.lc-digit-input-error:focus{box-shadow:0 0 0 4px color-mix(in srgb,var(--color-error-600) 20%,transparent)}.lc-digit-input.lc-digit-input-filled{border-color:var(--color-primary-500);background-color:var(--color-primary-subtle)}.lc-error{font-size:.875rem;color:var(--color-text-error);text-align:center}.lc-hint{font-size:.875rem;color:var(--color-text-secondary);text-align:center}@media(max-width:480px){.lc-digit-inputs{gap:.5rem}.lc-digit-inputs--compact{gap:.25rem}.lc-digit-input{width:2.75rem;height:3rem;font-size:1.25rem}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		length: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "length",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		requiredIndicator: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "requiredIndicator",
+				required: false
+			}]
+		}],
+		gap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "gap",
+				required: false
+			}]
+		}],
+		error: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "error",
+				required: false
+			}]
+		}],
+		autoSubmit: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoSubmit",
+				required: false
+			}]
+		}],
+		hint: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hint",
+				required: false
+			}]
+		}],
+		autofocus: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autofocus",
+				required: false
+			}]
+		}],
+		digitAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "digitAriaLabel",
+				required: false
+			}]
+		}],
+		complete: [{
+			type: i0.Output,
+			args: ["complete"]
+		}],
+		digitInputs: [{
+			type: i0.ViewChildren,
+			args: ["digitInput", { isSignal: true }]
+		}]
+	}
+});
+export { VerificationCodeInputComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-verification-code-input.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-verification-code-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/verification-code-input/verification-code-input.component.ts","../../../../libs/angular-ui-kit/src/lib/verification-code-input/verification-code-input.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  ElementRef,\n  afterNextRender,\n  computed,\n  forwardRef,\n  input,\n  linkedSignal,\n  output,\n  signal,\n  viewChildren,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\nlet nextUniqueId = 0;\n\n/** Space between the boxes: `default` 12 px (8 px below 480 px), `compact` 8 px (4 px below 480 px). */\nexport type VerificationCodeInputGap = 'default' | 'compact';\n\n/**\n * Verification Code Input Component with one input per digit\n *\n * Features:\n * - Configurable number of digit fields (`length`, default 6)\n * - Automatic focus advancement after entering a digit\n * - Backspace moves to the previous input, arrow keys navigate\n * - Paste / autofill support (splits the code across the inputs); no\n *   `maxlength`, so iOS and Android can put the whole `one-time-code` into box 1\n * - `clear()` empties the boxes after a wrong code and focuses box 1\n * - Phones (below 480 px): 44 × 48 px boxes, 8 px apart (6 boxes = 304 px)\n * - Accessible ARIA attributes (labelled group, linked hint and error)\n * - Reactive Forms ControlValueAccessor implementation\n * - `complete` emits exactly once when all digits are entered\n *\n * Usage:\n * ```html\n * <lc-verification-code-input\n *   [formControl]=\"codeControl\"\n *   label=\"Verification Code\"\n *   [length]=\"6\"\n *   (complete)=\"onCodeComplete($event)\"\n * ></lc-verification-code-input>\n * ```\n */\n@Component({\n  selector: 'lc-verification-code-input',\n  standalone: true,\n  imports: [],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => VerificationCodeInputComponent),\n      multi: true,\n    },\n  ],\n  templateUrl: './verification-code-input.component.html',\n  styleUrls: ['./verification-code-input.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class VerificationCodeInputComponent implements ControlValueAccessor {\n  /** Group label rendered above the digit inputs */\n  readonly label = input<string>('Verification Code');\n\n  /** Number of digits */\n  readonly length = input<number>(6);\n\n  /** Whether the inputs are disabled */\n  readonly disabled = input<boolean>(false);\n\n  /** Whether the code is required */\n  readonly required = input<boolean>(false);\n\n  /**\n   * Show the `*` of a `required` code; `false` keeps `required` and\n   * `aria-required` without the asterisk.\n   * @default true\n   */\n  readonly requiredIndicator = input<boolean>(true);\n\n  /** Space between the boxes: `default` (12 px, 8 px below 480 px) or `compact` (8 px, 4 px below 480 px). */\n  readonly gap = input<VerificationCodeInputGap>('default');\n\n  /** Error message displayed below the inputs (also sets aria-invalid) */\n  readonly error = input<string | undefined>(undefined);\n\n  /**\n   * @deprecated `complete` always emits exactly once when the last digit is\n   * entered — bind `(complete)` to auto-submit. Kept so existing bindings\n   * keep compiling; it no longer changes behaviour.\n   */\n  readonly autoSubmit = input<boolean>(false);\n\n  /**\n   * Hint text below the inputs. Defaults to \"Enter the N-digit code\";\n   * pass an empty string to hide the hint.\n   */\n  readonly hint = input<string | undefined>(undefined);\n\n  /** Focus the first digit input once rendered (opt-in) */\n  readonly autofocus = input<boolean>(false);\n\n  /** Accessible name of each box; `{n}` and `{total}` are replaced. */\n  readonly digitAriaLabel = input('Digit {n} of {total}');\n\n  /** Accessible name of box `index` (zero-based). */\n  protected digitLabel(index: number): string {\n    return this.digitAriaLabel().replace('{n}', String(index + 1)).replace('{total}', String(this.length()));\n  }\n\n  /** Emitted once with the full code when all digits are entered */\n  readonly complete = output<string>();\n\n  /** Per-instance ids for the group label, hint and error linkage */\n  readonly groupId = `lc-verification-code-${nextUniqueId++}`;\n  readonly labelId = `${this.groupId}-label`;\n  readonly hintId = `${this.groupId}-hint`;\n  readonly errorId = `${this.groupId}-error`;\n\n  private readonly digitInputs = viewChildren<ElementRef<HTMLInputElement>>('digitInput');\n\n  /** One entry per digit; resets when `length` changes */\n  readonly digits = linkedSignal<string[]>(() => Array<string>(this.length()).fill(''));\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  readonly code = computed(() => this.digits().join(''));\n\n  readonly isComplete = computed(() => this.digits().every((digit) => digit !== ''));\n\n  readonly hintText = computed(() => {\n    const hint = this.hint();\n    return hint === undefined ? `Enter the ${this.length()}-digit code` : hint;\n  });\n\n  readonly describedBy = computed(() => {\n    const ids: string[] = [];\n    if (this.error()) ids.push(this.errorId);\n    if (this.hintText()) ids.push(this.hintId);\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  constructor() {\n    afterNextRender(() => {\n      if (this.autofocus()) {\n        this.focusInput(0);\n      }\n    });\n  }\n\n  /**\n   * ControlValueAccessor: Write value from form control\n   */\n  writeValue(value: string | null | undefined): void {\n    const chars = (value ?? '').replace(/\\D/g, '').slice(0, this.length()).split('');\n    this.digits.set(Array.from({ length: this.length() }, (_, i) => chars[i] ?? ''));\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   * Empty every box (e.g. after a wrong code), report `''` to the form and\n   * focus box 1. Writing `''` through the form control empties the boxes too,\n   * without moving the focus.\n   */\n  clear(): void {\n    this.digits.set(Array<string>(this.length()).fill(''));\n    for (const box of this.digitInputs()) {\n      box.nativeElement.value = '';\n    }\n    this.onChange('');\n    this.focusInput(0);\n  }\n\n  /**\n   * Handle digit input\n   */\n  onDigitInput(event: Event, index: number): void {\n    const input = event.target as HTMLInputElement;\n    const previous = this.digits()[index];\n\n    if (input.value === '') {\n      // Emptied without a Backspace keydown (some Android keyboards send none)\n      if (previous) this.setDigit(index, '');\n      return;\n    }\n\n    let typed = input.value.replace(/\\D/g, '');\n    // The boxes have no maxlength (it would cut an autofilled code to one\n    // digit), so typing into a filled box briefly holds two characters: keep\n    // the new digit.\n    if (previous && typed.length === 2 && typed.includes(previous)) {\n      typed = typed.replace(previous, '');\n    } else if (typed === previous) {\n      typed = '';\n    }\n\n    if (!typed) {\n      // Only non-digits were added: the signal is unchanged, so restore the DOM here\n      input.value = previous;\n      return;\n    }\n\n    // One digit, or several at once (autofill / IME): distribute from this position\n    this.applyDigits(typed.split(''), index);\n    // Keep this box at one digit even when the signal did not change\n    input.value = this.digits()[index];\n  }\n\n  /**\n   * Handle keydown events (backspace, arrow keys)\n   */\n  onKeyDown(event: KeyboardEvent, index: number): void {\n    const input = event.target as HTMLInputElement;\n\n    if (event.key === 'Backspace') {\n      if (input.value) {\n        this.setDigit(index, '');\n      } else if (index > 0) {\n        // Move to previous input and clear it\n        this.setDigit(index - 1, '');\n        this.focusInput(index - 1);\n      }\n      event.preventDefault();\n    } else if (event.key === 'ArrowLeft' && index > 0) {\n      this.focusInput(index - 1);\n      event.preventDefault();\n    } else if (event.key === 'ArrowRight' && index < this.length() - 1) {\n      this.focusInput(index + 1);\n      event.preventDefault();\n    }\n  }\n\n  /**\n   * Handle paste event (split the pasted code across the inputs)\n   */\n  onPaste(event: ClipboardEvent): void {\n    event.preventDefault();\n    if (this.isDisabled()) {\n      return;\n    }\n    const pasted = (event.clipboardData?.getData('text') || '').replace(/\\D/g, '');\n    if (pasted) {\n      this.applyDigits(pasted.split(''), 0);\n    }\n  }\n\n  /** Writes `chars` into consecutive slots from `start`, then advances focus and reports completion. */\n  private applyDigits(chars: string[], start: number): void {\n    const len = this.length();\n    const next = [...this.digits()];\n    const count = Math.min(chars.length, len - start);\n    for (let i = 0; i < count; i++) {\n      next[start + i] = chars[i];\n    }\n    this.digits.set(next);\n    this.onChange(this.code());\n\n    // Focus the slot after the last written digit (or stay on the last one)\n    this.focusInput(Math.min(start + count, len - 1));\n\n    if (this.isComplete()) {\n      this.onTouched();\n      this.complete.emit(this.code());\n    }\n  }\n\n  private setDigit(index: number, digit: string): void {\n    this.digits.update((digits) => digits.map((d, i) => (i === index ? digit : d)));\n    this.onChange(this.code());\n  }\n\n  /**\n   * Focus specific input by index\n   */\n  private focusInput(index: number): void {\n    const input = this.digitInputs()[index]?.nativeElement;\n    if (input) {\n      input.focus();\n      input.select();\n    }\n  }\n}\n","<div class=\"lc-verification-code-input\">\n  <!-- The label names the whole group of digit inputs (aria-labelledby), not a single control -->\n  @if (label()) {\n    <span [id]=\"labelId\" class=\"lc-label\">\n      {{ label() }}\n      @if (required() && requiredIndicator()) {\n        <span class=\"lc-required\" aria-hidden=\"true\">*</span>\n      }\n    </span>\n  }\n\n  <div\n    [id]=\"groupId\"\n    class=\"lc-digit-inputs\"\n    [class.lc-digit-inputs--compact]=\"gap() === 'compact'\"\n    role=\"group\"\n    [attr.aria-labelledby]=\"label() ? labelId : null\"\n    [attr.aria-describedby]=\"describedBy()\"\n    (paste)=\"onPaste($event)\"\n  >\n    @for (digit of digits(); track $index; let i = $index) {\n      <input\n        #digitInput\n        type=\"text\"\n        inputmode=\"numeric\"\n        [attr.autocomplete]=\"i === 0 ? 'one-time-code' : 'off'\"\n        [value]=\"digit\"\n        [disabled]=\"isDisabled()\"\n        [required]=\"required()\"\n        [attr.aria-label]=\"digitLabel(i)\"\n        [attr.aria-required]=\"required() || null\"\n        [attr.aria-invalid]=\"error() ? 'true' : null\"\n        [attr.aria-describedby]=\"error() ? errorId : null\"\n        (input)=\"onDigitInput($event, i)\"\n        (keydown)=\"onKeyDown($event, i)\"\n        class=\"lc-digit-input\"\n        [class.lc-digit-input-error]=\"error()\"\n        [class.lc-digit-input-filled]=\"digit\"\n      />\n    }\n  </div>\n\n  @if (error()) {\n    <div [id]=\"errorId\" class=\"lc-error\" role=\"alert\">\n      {{ error() }}\n    </div>\n  }\n\n  @if (hintText()) {\n    <div [id]=\"hintId\" class=\"lc-hint\">\n      {{ hintText() }}\n    </div>\n  }\n</div>\n"],"mappings":"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"}