@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1,103 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var ContainerComponent = class ContainerComponent {
+	size = input("lg", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	noPadding = input(false, ...ngDevMode ? [{ debugName: "noPadding" }] : /* istanbul ignore next */ []);
+	paddingY = input(false, ...ngDevMode ? [{ debugName: "paddingY" }] : /* istanbul ignore next */ []);
+	classes = computed(() => {
+		const classes = [`container-${this.size()}`];
+		if (this.noPadding()) classes.push("container--no-padding");
+		else if (this.paddingY()) classes.push("container--padding-y");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ContainerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: ContainerComponent,
+		isStandalone: true,
+		selector: "lc-container",
+		inputs: {
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			noPadding: {
+				classPropertyName: "noPadding",
+				publicName: "noPadding",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			paddingY: {
+				classPropertyName: "paddingY",
+				publicName: "paddingY",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "classes()" } },
+		ngImport: i0,
+		template: "<ng-content></ng-content>\n",
+		styles: [":host{display:block;box-sizing:border-box;width:100%;margin-inline:auto;padding-inline:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host{padding-inline:var(--lc-density-padding-xl, 2rem)}}:host(.container-sm){max-width:640px}:host(.container-md){max-width:768px}:host(.container-lg){max-width:1024px}:host(.container-xl){max-width:1280px}:host(.container-xxl){max-width:var(--lc-content-max-width, 1536px)}:host(.container-full){max-width:none}:host(.container--no-padding){padding-inline:0}:host(.container--padding-y){padding-block:var(--lc-density-padding-lg, 1.5rem)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ContainerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-container",
+			standalone: true,
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { "[class]": "classes()" },
+			template: "<ng-content></ng-content>\n",
+			styles: [":host{display:block;box-sizing:border-box;width:100%;margin-inline:auto;padding-inline:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host{padding-inline:var(--lc-density-padding-xl, 2rem)}}:host(.container-sm){max-width:640px}:host(.container-md){max-width:768px}:host(.container-lg){max-width:1024px}:host(.container-xl){max-width:1280px}:host(.container-xxl){max-width:var(--lc-content-max-width, 1536px)}:host(.container-full){max-width:none}:host(.container--no-padding){padding-inline:0}:host(.container--padding-y){padding-block:var(--lc-density-padding-lg, 1.5rem)}\n"]
+		}]
+	}],
+	propDecorators: {
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		noPadding: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noPadding",
+				required: false
+			}]
+		}],
+		paddingY: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "paddingY",
+				required: false
+			}]
+		}]
+	}
+});
+export { ContainerComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-container.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-container.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/container/container.component.ts","../../../../libs/angular-ui-kit/src/lib/container/container.component.html"],"sourcesContent":["import { Component, input, computed, ChangeDetectionStrategy } from '@angular/core';\n\nexport type ContainerSize = 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'full';\n\n/**\n * Container component for responsive max-width content layout.\n *\n * Features:\n * - Max-width presets (sm, md, lg, xl, xxl, full)\n * - Optional horizontal padding removal\n * - Optional vertical padding\n * - Centered content alignment\n *\n * All layout comes from the component's own stylesheet (no Tailwind\n * utilities): `sm…xl` map onto the 640/768/1024/1280px screen scale, `xxl`\n * caps at the `--lc-content-max-width` token (1536px) — the widest step\n * before `full`, for data-dense pages that `xl` squeezes but `full` stretches\n * across ultrawide displays. Padding follows the `--lc-density-padding-*`\n * tokens and steps up at 640px / 1024px.\n *\n * @example\n * ```html\n * <lc-container size=\"lg\">Content here</lc-container>\n * ```\n */\n@Component({\n  selector: 'lc-container',\n  standalone: true,\n  imports: [],\n  templateUrl: './container.component.html',\n  styleUrls: ['./container.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n  },\n})\nexport class ContainerComponent {\n  readonly size = input<ContainerSize>('lg');\n  readonly noPadding = input<boolean>(false);\n  readonly paddingY = input<boolean>(false);\n\n  readonly classes = computed(() => {\n    // Semantic size class — max-width, centring and padding are all resolved\n    // by the matching `:host(.container-*)` rules in container.component.scss.\n    const classes: string[] = [`container-${this.size()}`];\n\n    if (this.noPadding()) {\n      classes.push('container--no-padding');\n    } else if (this.paddingY()) {\n      classes.push('container--padding-y');\n    }\n\n    return classes.join(' ');\n  });\n}\n","<ng-content></ng-content>\n"],"mappings":";;AAoCA,IAAa,qBAAb,MAAa,mBAAkB;CACpB,OAAO,MAAqB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CACjC,YAAY,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACjC,WAAW,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAEhC,UAAU,eAAc;EAG/B,MAAM,UAAoB,CAAC,aAAa,KAAK,KAAI,GAAI;EAErD,IAAI,KAAK,UAAS,GAChB,QAAQ,KAAK,uBAAuB;OAC/B,IAAI,KAAK,SAAQ,GACtB,QAAQ,KAAK,sBAAsB;EAGrC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAjBS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAkB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAlB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAkB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,SAAA,YAAA,EAAA;EAAA,UAAA;EAAA,UCpC/B;EACA,QAAA,CAAA,kqBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADmCa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAkB,YAAA,CAAA;EAX9B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAc,YACZ;GAAI,SACP,CAAA;GAAE,iBAGM,wBAAwB;GAAM,MACzC,EACJ,WAAW,YACZ;GAAA,UAAA;GAAA,QAAA,CAAA,kqBAAA;EAAA,CAAA"}

package/fesm2022/lifecorner-angular-ui-kit-copy-field.mjs

@@ -0,0 +1,308 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, input, output, signal, viewChild } from "@angular/core";
+import { ButtonComponent } from "@lifecorner/angular-ui-kit/button";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { InputComponent } from "@lifecorner/angular-ui-kit/input";
+const CONFIRMATION_MS = 2e3;
+var CopyFieldComponent = class CopyFieldComponent {
+	label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	value = input("", ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	helperText = input(...ngDevMode ? [void 0, { debugName: "helperText" }] : /* istanbul ignore next */ []);
+	layout = input("stacked", ...ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []);
+	showIcon = input(true, ...ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []);
+	copyLabel = input("Copy", ...ngDevMode ? [{ debugName: "copyLabel" }] : /* istanbul ignore next */ []);
+	copiedLabel = input("Copied", ...ngDevMode ? [{ debugName: "copiedLabel" }] : /* istanbul ignore next */ []);
+	copiedAnnouncement = input("Copied to the clipboard", ...ngDevMode ? [{ debugName: "copiedAnnouncement" }] : /* istanbul ignore next */ []);
+	copied = output();
+	copyFailed = output();
+	isCopied = signal(false, ...ngDevMode ? [{ debugName: "isCopied" }] : /* istanbul ignore next */ []);
+	field = viewChild(InputComponent, ...ngDevMode ? [{ debugName: "field" }] : /* istanbul ignore next */ []);
+	timer;
+	constructor() {
+		inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));
+	}
+	async copy() {
+		const value = this.value();
+		try {
+			const clipboard = typeof navigator === "undefined" ? void 0 : navigator.clipboard;
+			if (!clipboard) throw new Error("Clipboard API unavailable");
+			await clipboard.writeText(value);
+		} catch {
+			this.copyFailed.emit();
+			this.field()?.focus();
+			this.field()?.select();
+			return;
+		}
+		this.isCopied.set(true);
+		this.copied.emit(value);
+		clearTimeout(this.timer);
+		this.timer = setTimeout(() => this.isCopied.set(false), CONFIRMATION_MS);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: CopyFieldComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: CopyFieldComponent,
+		isStandalone: true,
+		selector: "lc-copy-field",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			helperText: {
+				classPropertyName: "helperText",
+				publicName: "helperText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			layout: {
+				classPropertyName: "layout",
+				publicName: "layout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showIcon: {
+				classPropertyName: "showIcon",
+				publicName: "showIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			copyLabel: {
+				classPropertyName: "copyLabel",
+				publicName: "copyLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			copiedLabel: {
+				classPropertyName: "copiedLabel",
+				publicName: "copiedLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			copiedAnnouncement: {
+				classPropertyName: "copiedAnnouncement",
+				publicName: "copiedAnnouncement",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			copied: "copied",
+			copyFailed: "copyFailed"
+		},
+		viewQueries: [{
+			propertyName: "field",
+			first: true,
+			predicate: InputComponent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div\n  class=\"lc-copy-field\"\n  [class.lc-copy-field--stacked]=\"layout() === 'stacked'\"\n  [class.lc-copy-field--inline]=\"layout() === 'inline'\"\n>\n  <div class=\"lc-copy-field__value\">\n    <lc-input\n      [label]=\"label()\"\n      [value]=\"value()\"\n      [helperText]=\"helperText()\"\n      size=\"lg\"\n      [readonly]=\"true\"\n      [readonlyWrap]=\"true\"\n    />\n  </div>\n\n  <div class=\"lc-copy-field__action\">\n    <lc-button variant=\"outline\" size=\"lg\" [fullWidth]=\"layout() === 'stacked'\" (clicked)=\"copy()\">\n      @if (showIcon()) {\n        <lc-icon slot=\"icon-before\" [name]=\"isCopied() ? 'check' : 'clipboard-document'\" size=\"sm\" [decorative]=\"true\" />\n      }\n      {{ isCopied() ? copiedLabel() : copyLabel() }}\n    </lc-button>\n  </div>\n\n  <span class=\"lc-copy-field__live\" role=\"status\" aria-live=\"polite\">{{ isCopied() ? copiedAnnouncement() : '' }}</span>\n</div>\n",
+		styles: [":host{display:block;width:100%}.lc-copy-field{position:relative;display:flex;gap:var(--lc-density-gap-sm, .5rem)}.lc-copy-field--stacked{flex-direction:column}.lc-copy-field--inline{flex-direction:row;align-items:flex-end}.lc-copy-field--inline .lc-copy-field__value{flex:1;min-width:0}.lc-copy-field--inline .lc-copy-field__action{flex:none}.lc-copy-field__live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"],
+		dependencies: [
+			{
+				kind: "component",
+				type: InputComponent,
+				selector: "lc-input",
+				inputs: [
+					"label",
+					"placeholder",
+					"type",
+					"size",
+					"disabled",
+					"readonly",
+					"readonlyWrap",
+					"required",
+					"requiredIndicator",
+					"error",
+					"helperText",
+					"iconBefore",
+					"iconAfter",
+					"maxLength",
+					"showCharCount",
+					"charCountRemainingLabel",
+					"charCountAnnounceThreshold",
+					"ariaLabel",
+					"autocomplete",
+					"name",
+					"autocapitalize",
+					"spellcheck",
+					"enterkeyhint",
+					"requiredAriaLabel",
+					"value"
+				],
+				outputs: [
+					"valueChange",
+					"focused",
+					"blurred",
+					"enterPressed"
+				]
+			},
+			{
+				kind: "component",
+				type: ButtonComponent,
+				selector: "lc-button",
+				inputs: [
+					"variant",
+					"size",
+					"disabled",
+					"loading",
+					"iconOnly",
+					"fullWidth",
+					"ariaLabel",
+					"type",
+					"title",
+					"disabledReason",
+					"inline"
+				],
+				outputs: [
+					"clicked",
+					"focused",
+					"blurred"
+				]
+			},
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "lc-icon",
+				inputs: [
+					"name",
+					"variant",
+					"size",
+					"color",
+					"ariaLabel",
+					"decorative",
+					"strict"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: CopyFieldComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-copy-field",
+			imports: [
+				InputComponent,
+				ButtonComponent,
+				IconComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div\n  class=\"lc-copy-field\"\n  [class.lc-copy-field--stacked]=\"layout() === 'stacked'\"\n  [class.lc-copy-field--inline]=\"layout() === 'inline'\"\n>\n  <div class=\"lc-copy-field__value\">\n    <lc-input\n      [label]=\"label()\"\n      [value]=\"value()\"\n      [helperText]=\"helperText()\"\n      size=\"lg\"\n      [readonly]=\"true\"\n      [readonlyWrap]=\"true\"\n    />\n  </div>\n\n  <div class=\"lc-copy-field__action\">\n    <lc-button variant=\"outline\" size=\"lg\" [fullWidth]=\"layout() === 'stacked'\" (clicked)=\"copy()\">\n      @if (showIcon()) {\n        <lc-icon slot=\"icon-before\" [name]=\"isCopied() ? 'check' : 'clipboard-document'\" size=\"sm\" [decorative]=\"true\" />\n      }\n      {{ isCopied() ? copiedLabel() : copyLabel() }}\n    </lc-button>\n  </div>\n\n  <span class=\"lc-copy-field__live\" role=\"status\" aria-live=\"polite\">{{ isCopied() ? copiedAnnouncement() : '' }}</span>\n</div>\n",
+			styles: [":host{display:block;width:100%}.lc-copy-field{position:relative;display:flex;gap:var(--lc-density-gap-sm, .5rem)}.lc-copy-field--stacked{flex-direction:column}.lc-copy-field--inline{flex-direction:row;align-items:flex-end}.lc-copy-field--inline .lc-copy-field__value{flex:1;min-width:0}.lc-copy-field--inline .lc-copy-field__action{flex:none}.lc-copy-field__live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}],
+		helperText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "helperText",
+				required: false
+			}]
+		}],
+		layout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "layout",
+				required: false
+			}]
+		}],
+		showIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showIcon",
+				required: false
+			}]
+		}],
+		copyLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "copyLabel",
+				required: false
+			}]
+		}],
+		copiedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "copiedLabel",
+				required: false
+			}]
+		}],
+		copiedAnnouncement: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "copiedAnnouncement",
+				required: false
+			}]
+		}],
+		copied: [{
+			type: i0.Output,
+			args: ["copied"]
+		}],
+		copyFailed: [{
+			type: i0.Output,
+			args: ["copyFailed"]
+		}],
+		field: [{
+			type: i0.ViewChild,
+			args: [i0.forwardRef(() => InputComponent), { isSignal: true }]
+		}]
+	}
+});
+export { CopyFieldComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-copy-field.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-copy-field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-copy-field.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/copy-field/copy-field.component.ts","../../../../libs/angular-ui-kit/src/lib/copy-field/copy-field.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  inject,\n  input,\n  output,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { ButtonComponent } from '@lifecorner/angular-ui-kit/button';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { InputComponent } from '@lifecorner/angular-ui-kit/input';\n\n/** `stacked`: the button below the value at full width (phones); `inline`: beside it. */\nexport type CopyFieldLayout = 'stacked' | 'inline';\n\n/** How long the button says \"Copied\" (ms). */\nconst CONFIRMATION_MS = 2000;\n\n/**\n * A value to copy — an invitation link, a token, a command: the value\n * read-only and wrapping (never clipped), a 48.5 px copy button, and one\n * polite announcement after copying. If the clipboard refuses, the value is\n * selected so the person can copy it by hand.\n *\n * @example\n * ```html\n * <lc-copy-field label=\"Einladungslink\" [value]=\"link\" copyLabel=\"Kopieren\"\n *                copiedLabel=\"Kopiert\" copiedAnnouncement=\"Link kopiert\" />\n * ```\n */\n@Component({\n  selector: 'lc-copy-field',\n  imports: [InputComponent, ButtonComponent, IconComponent],\n  templateUrl: './copy-field.component.html',\n  styleUrl: './copy-field.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CopyFieldComponent {\n  /** Label of the value (its accessible name). */\n  readonly label = input<string>('');\n\n  /** The value to copy. */\n  readonly value = input<string>('');\n\n  /** Help below the value. */\n  readonly helperText = input<string>();\n\n  /** `stacked` (default): button below at full width; `inline`: button beside the value. */\n  readonly layout = input<CopyFieldLayout>('stacked');\n\n  /** Show the clipboard (and, after copying, check) icon in the button. */\n  readonly showIcon = input<boolean>(true);\n\n  /** Button label. */\n  readonly copyLabel = input('Copy');\n\n  /** Button label for two seconds after copying. */\n  readonly copiedLabel = input('Copied');\n\n  /** Spoken once after copying (polite live region). */\n  readonly copiedAnnouncement = input('Copied to the clipboard');\n\n  /** Emitted with the value after it was copied. */\n  readonly copied = output<string>();\n\n  /** Emitted when the clipboard refused; the value is then selected for copying by hand. */\n  readonly copyFailed = output<void>();\n\n  protected readonly isCopied = signal(false);\n\n  private readonly field = viewChild(InputComponent);\n  private timer: ReturnType<typeof setTimeout> | undefined;\n\n  constructor() {\n    inject(DestroyRef).onDestroy(() => clearTimeout(this.timer));\n  }\n\n  /** Copies the value; on refusal selects it instead. */\n  async copy(): Promise<void> {\n    const value = this.value();\n    try {\n      const clipboard = typeof navigator === 'undefined' ? undefined : navigator.clipboard;\n      if (!clipboard) throw new Error('Clipboard API unavailable');\n      await clipboard.writeText(value);\n    } catch {\n      this.copyFailed.emit();\n      this.field()?.focus();\n      this.field()?.select();\n      return;\n    }\n    this.isCopied.set(true);\n    this.copied.emit(value);\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => this.isCopied.set(false), CONFIRMATION_MS);\n  }\n}\n","<div\n  class=\"lc-copy-field\"\n  [class.lc-copy-field--stacked]=\"layout() === 'stacked'\"\n  [class.lc-copy-field--inline]=\"layout() === 'inline'\"\n>\n  <div class=\"lc-copy-field__value\">\n    <lc-input\n      [label]=\"label()\"\n      [value]=\"value()\"\n      [helperText]=\"helperText()\"\n      size=\"lg\"\n      [readonly]=\"true\"\n      [readonlyWrap]=\"true\"\n    />\n  </div>\n\n  <div class=\"lc-copy-field__action\">\n    <lc-button variant=\"outline\" size=\"lg\" [fullWidth]=\"layout() === 'stacked'\" (clicked)=\"copy()\">\n      @if (showIcon()) {\n        <lc-icon slot=\"icon-before\" [name]=\"isCopied() ? 'check' : 'clipboard-document'\" size=\"sm\" [decorative]=\"true\" />\n      }\n      {{ isCopied() ? copiedLabel() : copyLabel() }}\n    </lc-button>\n  </div>\n\n  <span class=\"lc-copy-field__live\" role=\"status\" aria-live=\"polite\">{{ isCopied() ? copiedAnnouncement() : '' }}</span>\n</div>\n"],"mappings":"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"}