@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1,214 @@
+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";
+var ChipComponent = class ChipComponent {
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
+	removable = input(false, ...ngDevMode ? [{ debugName: "removable" }] : /* istanbul ignore next */ []);
+	removeAriaLabel = input("Remove chip", ...ngDevMode ? [{ debugName: "removeAriaLabel" }] : /* istanbul ignore next */ []);
+	clickable = input(false, ...ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	remove = output();
+	chipClick = output();
+	chipClasses = computed(() => {
+		const classes = ["lc-chip"];
+		classes.push(`lc-chip--${this.variant()}`);
+		classes.push(`lc-chip--${this.size()}`);
+		if (this.removable()) classes.push("lc-chip--removable");
+		if (this.clickable()) classes.push("lc-chip--clickable");
+		if (this.disabled()) classes.push("lc-chip--disabled");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "chipClasses" }] : /* istanbul ignore next */ []);
+	onChipClick() {
+		if (!this.disabled()) this.chipClick.emit();
+	}
+	onRemove(event) {
+		event.stopPropagation();
+		if (!this.disabled()) this.remove.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ChipComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ChipComponent,
+		isStandalone: true,
+		selector: "lc-chip",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removable: {
+				classPropertyName: "removable",
+				publicName: "removable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removeAriaLabel: {
+				classPropertyName: "removeAriaLabel",
+				publicName: "removeAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clickable: {
+				classPropertyName: "clickable",
+				publicName: "clickable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			remove: "remove",
+			chipClick: "chipClick"
+		},
+		ngImport: i0,
+		template: "<!--\n  Three shells, one interactive control per role — never nested:\n  - clickable + removable: a <span> pill holding two sibling <button>s\n    (activate / remove)\n  - clickable:             the pill itself is the <button>\n  - otherwise:             a static <span>; the only control is the\n                           labelled remove <button> (when removable)\n  The icon + label content is shared via template so all shells stay identical.\n-->\n<ng-template #chipContent>\n  <span class=\"lc-chip__content\">\n    @if (icon()) {\n      <lc-icon [name]=\"icon()!\" class=\"lc-chip__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n    <span class=\"lc-chip__label\">\n      <ng-content></ng-content>\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #deleteButton>\n  <button\n    type=\"button\"\n    class=\"lc-chip__delete\"\n    [attr.aria-label]=\"removeAriaLabel()\"\n    (click)=\"onRemove($event)\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n    </svg>\n  </button>\n</ng-template>\n\n@if (clickable() && removable()) {\n  <span [class]=\"chipClasses() + ' lc-chip--split'\" [attr.aria-disabled]=\"disabled() ? 'true' : null\">\n    <button\n      type=\"button\"\n      class=\"lc-chip__action\"\n      [disabled]=\"disabled()\"\n      (click)=\"onChipClick()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"chipContent\" />\n    </button>\n    @if (!disabled()) {\n      <ng-container [ngTemplateOutlet]=\"deleteButton\" />\n    }\n  </span>\n} @else if (clickable()) {\n  <button\n    type=\"button\"\n    [class]=\"chipClasses()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    (click)=\"onChipClick()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"chipContent\" />\n  </button>\n} @else {\n  <span [class]=\"chipClasses()\" [attr.aria-disabled]=\"disabled() ? 'true' : null\">\n    <ng-container [ngTemplateOutlet]=\"chipContent\" />\n    @if (removable() && !disabled()) {\n      <ng-container [ngTemplateOutlet]=\"deleteButton\" />\n    }\n  </span>\n}\n",
+		styles: [".lc-chip{display:inline-flex;align-items:center;border-radius:var(--border-radius-full, 9999px);font-weight:var(--typography-font-weight-medium, 500);line-height:1;white-space:nowrap;transition:background-color .15s ease,color .15s ease,opacity .15s ease;cursor:default;-webkit-user-select:none;user-select:none;--lc-chip-gap: .375rem;gap:var(--lc-chip-gap)}.lc-chip__content{display:inline-flex;align-items:center;gap:var(--lc-chip-gap)}.lc-chip__action{display:inline-flex;align-items:center;padding:0;margin:0;background:none;border:none;font:inherit;color:inherit;cursor:pointer;border-radius:var(--border-radius-full, 9999px)}.lc-chip__action:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chip__action:disabled{cursor:not-allowed}.lc-chip__label{display:inline-flex;align-items:center}.lc-chip__delete{display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;background:none;border:none;cursor:pointer;color:currentColor;opacity:.6;transition:opacity .15s ease;flex-shrink:0}.lc-chip__delete:hover{opacity:1}.lc-chip__delete:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}.lc-chip__delete svg{width:1em;height:1em}.lc-chip--sm{padding:.25rem .625rem;font-size:var(--typography-font-size-sm, .875rem);height:1.5rem;--lc-chip-gap: .25rem}.lc-chip--md{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem);height:2rem}.lc-chip--lg{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem);height:2.5rem;--lc-chip-gap: .5rem}.lc-chip{background-color:var(--lc-chip-bg);color:var(--lc-chip-fg);border:1px solid var(--lc-chip-border, transparent)}.lc-chip--default{--lc-chip-bg: var(--color-surface-hover);--lc-chip-fg: var(--color-text-secondary);--lc-chip-border: var(--color-border)}.lc-chip--primary{--lc-chip-bg: var(--color-primary-subtle);--lc-chip-fg: var(--color-on-primary-subtle);--lc-chip-border: var(--color-border-strong)}.lc-chip--success{--lc-chip-bg: var(--color-success-subtle);--lc-chip-fg: var(--color-on-success-subtle);--lc-chip-border: rgba(142, 164, 117, .4)}.lc-chip--warning{--lc-chip-bg: var(--color-warning-subtle);--lc-chip-fg: var(--color-on-warning-subtle);--lc-chip-border: rgba(225, 160, 64, .4)}.lc-chip--error{--lc-chip-bg: var(--color-error-subtle);--lc-chip-fg: var(--color-on-error-subtle);--lc-chip-border: rgba(157, 14, 14, .4)}.lc-chip--info{--lc-chip-bg: var(--color-info-subtle);--lc-chip-fg: var(--color-on-info-subtle);--lc-chip-border: rgba(59, 101, 136, .42)}.lc-chip--removable:hover:not(.lc-chip--removable--disabled){opacity:.9}.lc-chip--clickable{font:inherit;font-weight:var(--typography-font-weight-medium, 500);text-align:inherit;appearance:none;cursor:pointer}.lc-chip--clickable:hover:not(:disabled){filter:brightness(1.06);border-color:var(--color-border-strong, var(--color-border))}.lc-chip--clickable:active:not(:disabled){filter:brightness(.96)}.lc-chip--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chip--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-chip__icon{display:inline-flex;align-items:center;flex-shrink:0}\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: ChipComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-chip",
+			standalone: true,
+			imports: [IconComponent, NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<!--\n  Three shells, one interactive control per role — never nested:\n  - clickable + removable: a <span> pill holding two sibling <button>s\n    (activate / remove)\n  - clickable:             the pill itself is the <button>\n  - otherwise:             a static <span>; the only control is the\n                           labelled remove <button> (when removable)\n  The icon + label content is shared via template so all shells stay identical.\n-->\n<ng-template #chipContent>\n  <span class=\"lc-chip__content\">\n    @if (icon()) {\n      <lc-icon [name]=\"icon()!\" class=\"lc-chip__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n    <span class=\"lc-chip__label\">\n      <ng-content></ng-content>\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #deleteButton>\n  <button\n    type=\"button\"\n    class=\"lc-chip__delete\"\n    [attr.aria-label]=\"removeAriaLabel()\"\n    (click)=\"onRemove($event)\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n    </svg>\n  </button>\n</ng-template>\n\n@if (clickable() && removable()) {\n  <span [class]=\"chipClasses() + ' lc-chip--split'\" [attr.aria-disabled]=\"disabled() ? 'true' : null\">\n    <button\n      type=\"button\"\n      class=\"lc-chip__action\"\n      [disabled]=\"disabled()\"\n      (click)=\"onChipClick()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"chipContent\" />\n    </button>\n    @if (!disabled()) {\n      <ng-container [ngTemplateOutlet]=\"deleteButton\" />\n    }\n  </span>\n} @else if (clickable()) {\n  <button\n    type=\"button\"\n    [class]=\"chipClasses()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    (click)=\"onChipClick()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"chipContent\" />\n  </button>\n} @else {\n  <span [class]=\"chipClasses()\" [attr.aria-disabled]=\"disabled() ? 'true' : null\">\n    <ng-container [ngTemplateOutlet]=\"chipContent\" />\n    @if (removable() && !disabled()) {\n      <ng-container [ngTemplateOutlet]=\"deleteButton\" />\n    }\n  </span>\n}\n",
+			styles: [".lc-chip{display:inline-flex;align-items:center;border-radius:var(--border-radius-full, 9999px);font-weight:var(--typography-font-weight-medium, 500);line-height:1;white-space:nowrap;transition:background-color .15s ease,color .15s ease,opacity .15s ease;cursor:default;-webkit-user-select:none;user-select:none;--lc-chip-gap: .375rem;gap:var(--lc-chip-gap)}.lc-chip__content{display:inline-flex;align-items:center;gap:var(--lc-chip-gap)}.lc-chip__action{display:inline-flex;align-items:center;padding:0;margin:0;background:none;border:none;font:inherit;color:inherit;cursor:pointer;border-radius:var(--border-radius-full, 9999px)}.lc-chip__action:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chip__action:disabled{cursor:not-allowed}.lc-chip__label{display:inline-flex;align-items:center}.lc-chip__delete{display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;background:none;border:none;cursor:pointer;color:currentColor;opacity:.6;transition:opacity .15s ease;flex-shrink:0}.lc-chip__delete:hover{opacity:1}.lc-chip__delete:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:50%}.lc-chip__delete svg{width:1em;height:1em}.lc-chip--sm{padding:.25rem .625rem;font-size:var(--typography-font-size-sm, .875rem);height:1.5rem;--lc-chip-gap: .25rem}.lc-chip--md{padding:.375rem .75rem;font-size:var(--typography-font-size-sm, .875rem);height:2rem}.lc-chip--lg{padding:.5rem 1rem;font-size:var(--typography-font-size-base, 1rem);height:2.5rem;--lc-chip-gap: .5rem}.lc-chip{background-color:var(--lc-chip-bg);color:var(--lc-chip-fg);border:1px solid var(--lc-chip-border, transparent)}.lc-chip--default{--lc-chip-bg: var(--color-surface-hover);--lc-chip-fg: var(--color-text-secondary);--lc-chip-border: var(--color-border)}.lc-chip--primary{--lc-chip-bg: var(--color-primary-subtle);--lc-chip-fg: var(--color-on-primary-subtle);--lc-chip-border: var(--color-border-strong)}.lc-chip--success{--lc-chip-bg: var(--color-success-subtle);--lc-chip-fg: var(--color-on-success-subtle);--lc-chip-border: rgba(142, 164, 117, .4)}.lc-chip--warning{--lc-chip-bg: var(--color-warning-subtle);--lc-chip-fg: var(--color-on-warning-subtle);--lc-chip-border: rgba(225, 160, 64, .4)}.lc-chip--error{--lc-chip-bg: var(--color-error-subtle);--lc-chip-fg: var(--color-on-error-subtle);--lc-chip-border: rgba(157, 14, 14, .4)}.lc-chip--info{--lc-chip-bg: var(--color-info-subtle);--lc-chip-fg: var(--color-on-info-subtle);--lc-chip-border: rgba(59, 101, 136, .42)}.lc-chip--removable:hover:not(.lc-chip--removable--disabled){opacity:.9}.lc-chip--clickable{font:inherit;font-weight:var(--typography-font-weight-medium, 500);text-align:inherit;appearance:none;cursor:pointer}.lc-chip--clickable:hover:not(:disabled){filter:brightness(1.06);border-color:var(--color-border-strong, var(--color-border))}.lc-chip--clickable:active:not(:disabled){filter:brightness(.96)}.lc-chip--clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-chip--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-chip__icon{display:inline-flex;align-items:center;flex-shrink:0}\n"]
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		removable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removable",
+				required: false
+			}]
+		}],
+		removeAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeAriaLabel",
+				required: false
+			}]
+		}],
+		clickable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clickable",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		remove: [{
+			type: i0.Output,
+			args: ["remove"]
+		}],
+		chipClick: [{
+			type: i0.Output,
+			args: ["chipClick"]
+		}]
+	}
+});
+export { ChipComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-chip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-chip.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/chip/chip.component.ts","../../../../libs/angular-ui-kit/src/lib/chip/chip.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, output, computed } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\nexport type ChipVariant = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';\nexport type ChipSize = 'sm' | 'md' | 'lg';\n\n/**\n * Chip component for displaying tags, filters, or selections.\n *\n * Features:\n * - Color variants (primary, secondary, success, warning, error, info, neutral)\n * - Multiple size options (sm, md, lg)\n * - Optional leading icon\n * - Removable with a labelled close button and `remove` event\n * - Clickable variant that renders as a button and emits `chipClick`;\n *   clickable + removable renders two sibling buttons (activate / remove) so\n *   no interactive control is ever nested in another\n * - Disabled state support\n *\n * @example\n * ```html\n * <lc-chip variant=\"primary\" [removable]=\"true\" (remove)=\"onRemove()\">\n *   Tag Name\n * </lc-chip>\n *\n * <lc-chip [clickable]=\"true\" (chipClick)=\"onNavigate()\">\n *   Linked item\n * </lc-chip>\n * ```\n */\n@Component({\n  selector: 'lc-chip',\n  standalone: true,\n  imports: [IconComponent, NgTemplateOutlet],\n  templateUrl: './chip.component.html',\n  styleUrl: './chip.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ChipComponent {\n  /** Visual variant of the chip */\n  variant = input<ChipVariant>('default');\n\n  /** Size of the chip */\n  size = input<ChipSize>('md');\n\n  /** Icon name from Tabler Icons */\n  icon = input<string>();\n\n  /** Whether the chip can be removed */\n  removable = input<boolean>(false);\n\n  /** Accessible name of the remove button (`removable`). */\n  removeAriaLabel = input('Remove chip');\n\n  /**\n   * Whether the chip acts as a button (e.g. for navigation). Renders the chip\n   * as a `<button type=\"button\">` with hover / active / focus-visible states.\n   */\n  clickable = input<boolean>(false);\n\n  /** Whether the chip is disabled */\n  disabled = input<boolean>(false);\n\n  /** Emitted when the chip is removed */\n  readonly remove = output<void>();\n\n  /** Emitted when a clickable chip is activated (click, Enter or Space). */\n  readonly chipClick = output<void>();\n\n  /**\n   * Computed CSS classes for the chip\n   */\n  chipClasses = computed(() => {\n    const classes = ['lc-chip'];\n\n    classes.push(`lc-chip--${this.variant()}`);\n    classes.push(`lc-chip--${this.size()}`);\n\n    if (this.removable()) {\n      classes.push('lc-chip--removable');\n    }\n\n    if (this.clickable()) {\n      classes.push('lc-chip--clickable');\n    }\n\n    if (this.disabled()) {\n      classes.push('lc-chip--disabled');\n    }\n\n    return classes.join(' ');\n  });\n\n  /**\n   * Handle activation of a clickable chip\n   */\n  onChipClick(): void {\n    if (!this.disabled()) {\n      this.chipClick.emit();\n    }\n  }\n\n  /**\n   * Handle remove button click. The remove button is a real, labelled\n   * `<button>` (Enter / Space work natively), so no extra key handling here.\n   */\n  onRemove(event: Event): void {\n    event.stopPropagation();\n\n    if (!this.disabled()) {\n      this.remove.emit();\n    }\n  }\n}\n","<!--\n  Three shells, one interactive control per role — never nested:\n  - clickable + removable: a <span> pill holding two sibling <button>s\n    (activate / remove)\n  - clickable:             the pill itself is the <button>\n  - otherwise:             a static <span>; the only control is the\n                           labelled remove <button> (when removable)\n  The icon + label content is shared via template so all shells stay identical.\n-->\n<ng-template #chipContent>\n  <span class=\"lc-chip__content\">\n    @if (icon()) {\n      <lc-icon [name]=\"icon()!\" class=\"lc-chip__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n    <span class=\"lc-chip__label\">\n      <ng-content></ng-content>\n    </span>\n  </span>\n</ng-template>\n\n<ng-template #deleteButton>\n  <button\n    type=\"button\"\n    class=\"lc-chip__delete\"\n    [attr.aria-label]=\"removeAriaLabel()\"\n    (click)=\"onRemove($event)\"\n  >\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      stroke-width=\"2\"\n      stroke-linecap=\"round\"\n      stroke-linejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n      <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n    </svg>\n  </button>\n</ng-template>\n\n@if (clickable() && removable()) {\n  <span [class]=\"chipClasses() + ' lc-chip--split'\" [attr.aria-disabled]=\"disabled() ? 'true' : null\">\n    <button\n      type=\"button\"\n      class=\"lc-chip__action\"\n      [disabled]=\"disabled()\"\n      (click)=\"onChipClick()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"chipContent\" />\n    </button>\n    @if (!disabled()) {\n      <ng-container [ngTemplateOutlet]=\"deleteButton\" />\n    }\n  </span>\n} @else if (clickable()) {\n  <button\n    type=\"button\"\n    [class]=\"chipClasses()\"\n    [disabled]=\"disabled()\"\n    [attr.aria-disabled]=\"disabled() ? 'true' : null\"\n    (click)=\"onChipClick()\"\n  >\n    <ng-container [ngTemplateOutlet]=\"chipContent\" />\n  </button>\n} @else {\n  <span [class]=\"chipClasses()\" [attr.aria-disabled]=\"disabled() ? 'true' : null\">\n    <ng-container [ngTemplateOutlet]=\"chipContent\" />\n    @if (removable() && !disabled()) {\n      <ng-container [ngTemplateOutlet]=\"deleteButton\" />\n    }\n  </span>\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-choice-prompt.mjs

@@ -0,0 +1,375 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, effect, input, isDevMode, output, signal, viewChild, viewChildren } from "@angular/core";
+import { ButtonComponent } from "@lifecorner/angular-ui-kit/button";
+var ChoicePromptComponent = class ChoicePromptComponent {
+	options = input.required(...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	allowCustom = input(true, ...ngDevMode ? [{ debugName: "allowCustom" }] : /* istanbul ignore next */ []);
+	customToggleLabel = input("Eigene Antwort …", ...ngDevMode ? [{ debugName: "customToggleLabel" }] : /* istanbul ignore next */ []);
+	customPlaceholder = input("", ...ngDevMode ? [{ debugName: "customPlaceholder" }] : /* istanbul ignore next */ []);
+	submitLabel = input("Übernehmen", ...ngDevMode ? [{ debugName: "submitLabel" }] : /* istanbul ignore next */ []);
+	busy = input(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	disabledReason = input("", ...ngDevMode ? [{ debugName: "disabledReason" }] : /* istanbul ignore next */ []);
+	secondaryActions = input([], ...ngDevMode ? [{ debugName: "secondaryActions" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	promptLabel = input("", ...ngDevMode ? [{ debugName: "promptLabel" }] : /* istanbul ignore next */ []);
+	recommendedLabel = input("Empfehlung", ...ngDevMode ? [{ debugName: "recommendedLabel" }] : /* istanbul ignore next */ []);
+	decided = output();
+	secondaryAction = output();
+	customOpen = signal(false, ...ngDevMode ? [{ debugName: "customOpen" }] : /* istanbul ignore next */ []);
+	customText = signal("", ...ngDevMode ? [{ debugName: "customText" }] : /* istanbul ignore next */ []);
+	pendingOptionId = signal(null, ...ngDevMode ? [{ debugName: "pendingOptionId" }] : /* istanbul ignore next */ []);
+	pendingCustom = signal(false, ...ngDevMode ? [{ debugName: "pendingCustom" }] : /* istanbul ignore next */ []);
+	customInput = viewChild("customInput", ...ngDevMode ? [{ debugName: "customInput" }] : /* istanbul ignore next */ []);
+	optionButtons = viewChildren("optionButton", ...ngDevMode ? [{ debugName: "optionButtons" }] : /* istanbul ignore next */ []);
+	submitButton = viewChild("submitButton", ...ngDevMode ? [{ debugName: "submitButton" }] : /* istanbul ignore next */ []);
+	sortedOptions = computed(() => {
+		const options = this.options();
+		return [...options.filter((o) => o.recommended), ...options.filter((o) => !o.recommended)];
+	}, ...ngDevMode ? [{ debugName: "sortedOptions" }] : /* istanbul ignore next */ []);
+	locked = computed(() => this.busy() || this.disabled(), ...ngDevMode ? [{ debugName: "locked" }] : /* istanbul ignore next */ []);
+	canSubmitCustom = computed(() => this.customText().trim().length > 0 && !this.locked(), ...ngDevMode ? [{ debugName: "canSubmitCustom" }] : /* istanbul ignore next */ []);
+	disabledTitle = computed(() => this.disabled() && this.disabledReason() ? this.disabledReason() : null, ...ngDevMode ? [{ debugName: "disabledTitle" }] : /* istanbul ignore next */ []);
+	groupClasses = computed(() => ["lc-choice-prompt", `lc-choice-prompt--${this.size()}`].join(" "), ...ngDevMode ? [{ debugName: "groupClasses" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			if (isDevMode() && this.disabled() && !this.disabledReason()) console.warn("[lc-choice-prompt] `disabled` is set without a `disabledReason`. A disabled prompt must explain why (shown as tooltip).");
+		});
+		let wasBusy = false;
+		effect(() => {
+			const busy = this.busy();
+			if (wasBusy && !busy) {
+				this.restoreFocus();
+				this.pendingOptionId.set(null);
+				this.pendingCustom.set(false);
+			}
+			wasBusy = busy;
+		});
+	}
+	isPendingOption(id) {
+		return this.busy() && this.pendingOptionId() === id;
+	}
+	chooseOption(option) {
+		if (this.locked()) return;
+		this.pendingOptionId.set(option.id);
+		this.pendingCustom.set(false);
+		this.decided.emit({ optionId: option.id });
+	}
+	openCustom() {
+		if (this.locked()) return;
+		this.customOpen.set(true);
+		setTimeout(() => this.customInput()?.nativeElement.focus());
+	}
+	onCustomInput(event) {
+		this.customText.set(event.target.value);
+	}
+	submitCustom() {
+		const text = this.customText().trim();
+		if (!text || this.locked()) return;
+		this.pendingCustom.set(true);
+		this.pendingOptionId.set(null);
+		this.decided.emit({ customText: text });
+	}
+	triggerSecondary(action) {
+		if (this.locked()) return;
+		this.secondaryAction.emit(action.id);
+	}
+	restoreFocus() {
+		const pendingId = this.pendingOptionId();
+		if (pendingId !== null) this.optionButtons().find((ref) => ref.nativeElement.dataset["optionId"] === pendingId)?.nativeElement.focus();
+		else if (this.pendingCustom()) this.submitButton()?.focus();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: ChoicePromptComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: ChoicePromptComponent,
+		isStandalone: true,
+		selector: "lc-choice-prompt",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			allowCustom: {
+				classPropertyName: "allowCustom",
+				publicName: "allowCustom",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			customToggleLabel: {
+				classPropertyName: "customToggleLabel",
+				publicName: "customToggleLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			customPlaceholder: {
+				classPropertyName: "customPlaceholder",
+				publicName: "customPlaceholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			submitLabel: {
+				classPropertyName: "submitLabel",
+				publicName: "submitLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			busy: {
+				classPropertyName: "busy",
+				publicName: "busy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabledReason: {
+				classPropertyName: "disabledReason",
+				publicName: "disabledReason",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			secondaryActions: {
+				classPropertyName: "secondaryActions",
+				publicName: "secondaryActions",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			promptLabel: {
+				classPropertyName: "promptLabel",
+				publicName: "promptLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			recommendedLabel: {
+				classPropertyName: "recommendedLabel",
+				publicName: "recommendedLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			decided: "decided",
+			secondaryAction: "secondaryAction"
+		},
+		viewQueries: [
+			{
+				propertyName: "customInput",
+				first: true,
+				predicate: ["customInput"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "optionButtons",
+				predicate: ["optionButton"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "submitButton",
+				first: true,
+				predicate: ["submitButton"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		ngImport: i0,
+		template: "<div\n  [class]=\"groupClasses()\"\n  role=\"group\"\n  [attr.aria-label]=\"promptLabel() || null\"\n  [attr.aria-busy]=\"busy() ? 'true' : null\"\n>\n  <div class=\"lc-choice-prompt__options\">\n    @for (option of sortedOptions(); track option.id) {\n      <!-- The busy (clicked) option keeps focus: aria-disabled instead of the\n           native attribute, the click handler is guarded via locked(). -->\n      <button\n        #optionButton\n        type=\"button\"\n        class=\"lc-choice-prompt__option\"\n        [class.lc-choice-prompt__option--recommended]=\"option.recommended\"\n        [class.lc-choice-prompt__option--busy]=\"isPendingOption(option.id)\"\n        [attr.data-option-id]=\"option.id\"\n        [disabled]=\"locked() && !isPendingOption(option.id)\"\n        [attr.aria-disabled]=\"locked() ? 'true' : null\"\n        [attr.title]=\"disabledTitle()\"\n        (click)=\"chooseOption(option)\"\n      >\n        <span class=\"lc-choice-prompt__option-main\">\n          @if (isPendingOption(option.id)) {\n            <span class=\"lc-choice-prompt__spinner\" aria-hidden=\"true\"></span>\n          }\n          <span class=\"lc-choice-prompt__option-label\">{{ option.label }}</span>\n          @if (option.recommended) {\n            <span class=\"lc-choice-prompt__badge\">{{ recommendedLabel() }}</span>\n          }\n        </span>\n        @if (option.description) {\n          <span class=\"lc-choice-prompt__option-description\">{{ option.description }}</span>\n        }\n      </button>\n    }\n\n    @if (allowCustom() && !customOpen()) {\n      <button\n        type=\"button\"\n        class=\"lc-choice-prompt__custom-toggle\"\n        [disabled]=\"locked()\"\n        [attr.title]=\"disabledTitle()\"\n        (click)=\"openCustom()\"\n      >\n        {{ customToggleLabel() }}\n      </button>\n    }\n\n    @for (action of secondaryActions(); track action.id) {\n      <button\n        type=\"button\"\n        class=\"lc-choice-prompt__secondary\"\n        [disabled]=\"locked()\"\n        [attr.title]=\"disabledTitle() ?? action.tooltip ?? null\"\n        (click)=\"triggerSecondary(action)\"\n      >\n        {{ action.label }}\n      </button>\n    }\n  </div>\n\n  @if (allowCustom() && customOpen()) {\n    <div class=\"lc-choice-prompt__custom\">\n      <input\n        #customInput\n        type=\"text\"\n        class=\"lc-choice-prompt__input\"\n        [placeholder]=\"customPlaceholder()\"\n        [value]=\"customText()\"\n        [disabled]=\"locked()\"\n        [attr.title]=\"disabledTitle()\"\n        [attr.aria-label]=\"customToggleLabel()\"\n        (input)=\"onCustomInput($event)\"\n        (keydown.enter)=\"submitCustom()\"\n      />\n      <lc-button\n        #submitButton\n        variant=\"primary\"\n        [size]=\"size() === 'sm' ? 'xs' : 'sm'\"\n        [loading]=\"busy() && pendingCustom()\"\n        [disabled]=\"!canSubmitCustom()\"\n        [disabledReason]=\"disabledTitle() ?? ''\"\n        (clicked)=\"submitCustom()\"\n      >\n        {{ submitLabel() }}\n      </lc-button>\n    </div>\n  }\n</div>\n",
+		styles: [":host{display:block}.lc-choice-prompt{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem)}.lc-choice-prompt__options{display:flex;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-sm, .5rem)}.lc-choice-prompt__option{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.125rem;padding:.25rem .6875rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-family:inherit;font-size:var(--typography-font-size-sm, .8125rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:1.45;color:var(--color-text-primary);text-align:left;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}.lc-choice-prompt__option:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-hover);border-color:var(--color-border-strong, var(--color-border))}.lc-choice-prompt__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.lc-choice-prompt__option:disabled,.lc-choice-prompt__option[aria-disabled=true]{cursor:not-allowed;opacity:.55}.lc-choice-prompt__option--recommended{border-color:var(--color-primary);color:var(--color-on-primary-subtle)}.lc-choice-prompt__option--busy{opacity:1}.lc-choice-prompt__option-main{display:inline-flex;align-items:center;gap:.375rem}.lc-choice-prompt__option-description{font-weight:var(--typography-font-weight-regular, 400);font-size:var(--typography-font-size-xs, .75rem);color:var(--color-text-secondary)}.lc-choice-prompt__badge{padding:.0625rem .3125rem;background:var(--color-primary-subtle);border-radius:var(--border-radius-sm, .3125rem);font-size:.6875rem;font-weight:var(--typography-font-weight-bold, 700);color:var(--color-on-primary-subtle);line-height:1.4}.lc-choice-prompt__spinner{flex:none;width:.75rem;height:.75rem;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:lc-choice-prompt-spin .7s linear infinite}@media(prefers-reduced-motion:reduce){.lc-choice-prompt__spinner{animation-duration:1.6s}}.lc-choice-prompt__custom-toggle{padding:0;background:none;border:none;font-family:inherit;font-size:var(--typography-font-size-sm, .8125rem);color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.lc-choice-prompt__custom-toggle:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-choice-prompt__custom-toggle:disabled{cursor:not-allowed;opacity:.55}.lc-choice-prompt__secondary{padding:0;background:none;border:none;font-family:inherit;font-size:var(--typography-font-size-sm, .8125rem);color:var(--color-text-tertiary);cursor:pointer}.lc-choice-prompt__secondary:hover:not(:disabled){color:var(--color-text-secondary);text-decoration:underline;text-underline-offset:2px}.lc-choice-prompt__secondary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-choice-prompt__secondary:disabled{cursor:not-allowed;opacity:.55}.lc-choice-prompt__custom{display:flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-choice-prompt__input{flex:1 1 12rem;min-width:0;padding:.375rem .625rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-family:inherit;font-size:var(--typography-font-size-sm, .875rem);color:var(--color-text-primary)}.lc-choice-prompt__input::placeholder{color:var(--color-text-tertiary)}.lc-choice-prompt__input:focus-visible{outline:2px solid var(--color-primary);outline-offset:-1px}.lc-choice-prompt__input:disabled{cursor:not-allowed;opacity:.55}.lc-choice-prompt--sm .lc-choice-prompt__option{padding:.1875rem .5625rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-choice-prompt--sm .lc-choice-prompt__badge{font-size:.625rem}.lc-choice-prompt--sm .lc-choice-prompt__custom-toggle,.lc-choice-prompt--sm .lc-choice-prompt__secondary{font-size:var(--typography-font-size-xs, .75rem)}.lc-choice-prompt--sm .lc-choice-prompt__input{padding:.25rem .5rem;font-size:var(--typography-font-size-xs, .75rem)}@keyframes lc-choice-prompt-spin{to{transform:rotate(360deg)}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: ButtonComponent,
+			selector: "lc-button",
+			inputs: [
+				"variant",
+				"size",
+				"disabled",
+				"loading",
+				"iconOnly",
+				"fullWidth",
+				"ariaLabel",
+				"type",
+				"title",
+				"disabledReason",
+				"inline"
+			],
+			outputs: [
+				"clicked",
+				"focused",
+				"blurred"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: ChoicePromptComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-choice-prompt",
+			standalone: true,
+			imports: [ButtonComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div\n  [class]=\"groupClasses()\"\n  role=\"group\"\n  [attr.aria-label]=\"promptLabel() || null\"\n  [attr.aria-busy]=\"busy() ? 'true' : null\"\n>\n  <div class=\"lc-choice-prompt__options\">\n    @for (option of sortedOptions(); track option.id) {\n      <!-- The busy (clicked) option keeps focus: aria-disabled instead of the\n           native attribute, the click handler is guarded via locked(). -->\n      <button\n        #optionButton\n        type=\"button\"\n        class=\"lc-choice-prompt__option\"\n        [class.lc-choice-prompt__option--recommended]=\"option.recommended\"\n        [class.lc-choice-prompt__option--busy]=\"isPendingOption(option.id)\"\n        [attr.data-option-id]=\"option.id\"\n        [disabled]=\"locked() && !isPendingOption(option.id)\"\n        [attr.aria-disabled]=\"locked() ? 'true' : null\"\n        [attr.title]=\"disabledTitle()\"\n        (click)=\"chooseOption(option)\"\n      >\n        <span class=\"lc-choice-prompt__option-main\">\n          @if (isPendingOption(option.id)) {\n            <span class=\"lc-choice-prompt__spinner\" aria-hidden=\"true\"></span>\n          }\n          <span class=\"lc-choice-prompt__option-label\">{{ option.label }}</span>\n          @if (option.recommended) {\n            <span class=\"lc-choice-prompt__badge\">{{ recommendedLabel() }}</span>\n          }\n        </span>\n        @if (option.description) {\n          <span class=\"lc-choice-prompt__option-description\">{{ option.description }}</span>\n        }\n      </button>\n    }\n\n    @if (allowCustom() && !customOpen()) {\n      <button\n        type=\"button\"\n        class=\"lc-choice-prompt__custom-toggle\"\n        [disabled]=\"locked()\"\n        [attr.title]=\"disabledTitle()\"\n        (click)=\"openCustom()\"\n      >\n        {{ customToggleLabel() }}\n      </button>\n    }\n\n    @for (action of secondaryActions(); track action.id) {\n      <button\n        type=\"button\"\n        class=\"lc-choice-prompt__secondary\"\n        [disabled]=\"locked()\"\n        [attr.title]=\"disabledTitle() ?? action.tooltip ?? null\"\n        (click)=\"triggerSecondary(action)\"\n      >\n        {{ action.label }}\n      </button>\n    }\n  </div>\n\n  @if (allowCustom() && customOpen()) {\n    <div class=\"lc-choice-prompt__custom\">\n      <input\n        #customInput\n        type=\"text\"\n        class=\"lc-choice-prompt__input\"\n        [placeholder]=\"customPlaceholder()\"\n        [value]=\"customText()\"\n        [disabled]=\"locked()\"\n        [attr.title]=\"disabledTitle()\"\n        [attr.aria-label]=\"customToggleLabel()\"\n        (input)=\"onCustomInput($event)\"\n        (keydown.enter)=\"submitCustom()\"\n      />\n      <lc-button\n        #submitButton\n        variant=\"primary\"\n        [size]=\"size() === 'sm' ? 'xs' : 'sm'\"\n        [loading]=\"busy() && pendingCustom()\"\n        [disabled]=\"!canSubmitCustom()\"\n        [disabledReason]=\"disabledTitle() ?? ''\"\n        (clicked)=\"submitCustom()\"\n      >\n        {{ submitLabel() }}\n      </lc-button>\n    </div>\n  }\n</div>\n",
+			styles: [":host{display:block}.lc-choice-prompt{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem)}.lc-choice-prompt__options{display:flex;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-sm, .5rem)}.lc-choice-prompt__option{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.125rem;padding:.25rem .6875rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-family:inherit;font-size:var(--typography-font-size-sm, .8125rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:1.45;color:var(--color-text-primary);text-align:left;cursor:pointer;transition:border-color .15s ease,background-color .15s ease,color .15s ease}.lc-choice-prompt__option:hover:not(:disabled):not([aria-disabled=true]){background:var(--color-surface-hover);border-color:var(--color-border-strong, var(--color-border))}.lc-choice-prompt__option:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.lc-choice-prompt__option:disabled,.lc-choice-prompt__option[aria-disabled=true]{cursor:not-allowed;opacity:.55}.lc-choice-prompt__option--recommended{border-color:var(--color-primary);color:var(--color-on-primary-subtle)}.lc-choice-prompt__option--busy{opacity:1}.lc-choice-prompt__option-main{display:inline-flex;align-items:center;gap:.375rem}.lc-choice-prompt__option-description{font-weight:var(--typography-font-weight-regular, 400);font-size:var(--typography-font-size-xs, .75rem);color:var(--color-text-secondary)}.lc-choice-prompt__badge{padding:.0625rem .3125rem;background:var(--color-primary-subtle);border-radius:var(--border-radius-sm, .3125rem);font-size:.6875rem;font-weight:var(--typography-font-weight-bold, 700);color:var(--color-on-primary-subtle);line-height:1.4}.lc-choice-prompt__spinner{flex:none;width:.75rem;height:.75rem;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:lc-choice-prompt-spin .7s linear infinite}@media(prefers-reduced-motion:reduce){.lc-choice-prompt__spinner{animation-duration:1.6s}}.lc-choice-prompt__custom-toggle{padding:0;background:none;border:none;font-family:inherit;font-size:var(--typography-font-size-sm, .8125rem);color:var(--color-primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.lc-choice-prompt__custom-toggle:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-choice-prompt__custom-toggle:disabled{cursor:not-allowed;opacity:.55}.lc-choice-prompt__secondary{padding:0;background:none;border:none;font-family:inherit;font-size:var(--typography-font-size-sm, .8125rem);color:var(--color-text-tertiary);cursor:pointer}.lc-choice-prompt__secondary:hover:not(:disabled){color:var(--color-text-secondary);text-decoration:underline;text-underline-offset:2px}.lc-choice-prompt__secondary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}.lc-choice-prompt__secondary:disabled{cursor:not-allowed;opacity:.55}.lc-choice-prompt__custom{display:flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-choice-prompt__input{flex:1 1 12rem;min-width:0;padding:.375rem .625rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-md, .5rem);font-family:inherit;font-size:var(--typography-font-size-sm, .875rem);color:var(--color-text-primary)}.lc-choice-prompt__input::placeholder{color:var(--color-text-tertiary)}.lc-choice-prompt__input:focus-visible{outline:2px solid var(--color-primary);outline-offset:-1px}.lc-choice-prompt__input:disabled{cursor:not-allowed;opacity:.55}.lc-choice-prompt--sm .lc-choice-prompt__option{padding:.1875rem .5625rem;font-size:var(--typography-font-size-xs, .75rem)}.lc-choice-prompt--sm .lc-choice-prompt__badge{font-size:.625rem}.lc-choice-prompt--sm .lc-choice-prompt__custom-toggle,.lc-choice-prompt--sm .lc-choice-prompt__secondary{font-size:var(--typography-font-size-xs, .75rem)}.lc-choice-prompt--sm .lc-choice-prompt__input{padding:.25rem .5rem;font-size:var(--typography-font-size-xs, .75rem)}@keyframes lc-choice-prompt-spin{to{transform:rotate(360deg)}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: true
+			}]
+		}],
+		allowCustom: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowCustom",
+				required: false
+			}]
+		}],
+		customToggleLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "customToggleLabel",
+				required: false
+			}]
+		}],
+		customPlaceholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "customPlaceholder",
+				required: false
+			}]
+		}],
+		submitLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "submitLabel",
+				required: false
+			}]
+		}],
+		busy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "busy",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		disabledReason: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabledReason",
+				required: false
+			}]
+		}],
+		secondaryActions: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "secondaryActions",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		promptLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "promptLabel",
+				required: false
+			}]
+		}],
+		recommendedLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "recommendedLabel",
+				required: false
+			}]
+		}],
+		decided: [{
+			type: i0.Output,
+			args: ["decided"]
+		}],
+		secondaryAction: [{
+			type: i0.Output,
+			args: ["secondaryAction"]
+		}],
+		customInput: [{
+			type: i0.ViewChild,
+			args: ["customInput", { isSignal: true }]
+		}],
+		optionButtons: [{
+			type: i0.ViewChildren,
+			args: ["optionButton", { isSignal: true }]
+		}],
+		submitButton: [{
+			type: i0.ViewChild,
+			args: ["submitButton", { isSignal: true }]
+		}]
+	}
+});
+export { ChoicePromptComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-choice-prompt.mjs.map