@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-next-step-card.mjs

@@ -0,0 +1,419 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, effect, input, isDevMode, output, signal, viewChild } from "@angular/core";
+import { ButtonComponent } from "@lifecorner/angular-ui-kit/button";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var NextStepCardComponent = class NextStepCardComponent {
+	tone = input("neutral", ...ngDevMode ? [{ debugName: "tone" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	icon = input("information-circle", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	cardTitle = input.required(...ngDevMode ? [{ debugName: "cardTitle" }] : /* istanbul ignore next */ []);
+	titleTag = input("div", ...ngDevMode ? [{ debugName: "titleTag" }] : /* istanbul ignore next */ []);
+	actionsLayout = input("inline", ...ngDevMode ? [{ debugName: "actionsLayout" }] : /* istanbul ignore next */ []);
+	actionSize = input("sm", ...ngDevMode ? [{ debugName: "actionSize" }] : /* istanbul ignore next */ []);
+	message = input(...ngDevMode ? [void 0, { debugName: "message" }] : /* istanbul ignore next */ []);
+	primaryLabel = input(...ngDevMode ? [void 0, { debugName: "primaryLabel" }] : /* istanbul ignore next */ []);
+	primaryIcon = input(...ngDevMode ? [void 0, { debugName: "primaryIcon" }] : /* istanbul ignore next */ []);
+	primaryLoading = input(false, ...ngDevMode ? [{ debugName: "primaryLoading" }] : /* istanbul ignore next */ []);
+	primaryDisabled = input(false, ...ngDevMode ? [{ debugName: "primaryDisabled" }] : /* istanbul ignore next */ []);
+	primaryDisabledReason = input("", ...ngDevMode ? [{ debugName: "primaryDisabledReason" }] : /* istanbul ignore next */ []);
+	secondaryLabel = input(...ngDevMode ? [void 0, { debugName: "secondaryLabel" }] : /* istanbul ignore next */ []);
+	linkLabel = input(...ngDevMode ? [void 0, { debugName: "linkLabel" }] : /* istanbul ignore next */ []);
+	linkHref = input(...ngDevMode ? [void 0, { debugName: "linkHref" }] : /* istanbul ignore next */ []);
+	linkTarget = input("_blank", ...ngDevMode ? [{ debugName: "linkTarget" }] : /* istanbul ignore next */ []);
+	announce = input(false, ...ngDevMode ? [{ debugName: "announce" }] : /* istanbul ignore next */ []);
+	primaryClick = output();
+	secondaryClick = output();
+	actionsSlot = viewChild("actionsSlot", ...ngDevMode ? [{ debugName: "actionsSlot" }] : /* istanbul ignore next */ []);
+	hasProjectedActions = signal(false, ...ngDevMode ? [{ debugName: "hasProjectedActions" }] : /* istanbul ignore next */ []);
+	cardClasses = computed(() => [
+		"lc-next-step-card",
+		`lc-next-step-card--${this.tone()}`,
+		this.variant() === "soft" ? "lc-next-step-card--soft" : null,
+		this.actionsLayout() === "stacked" ? "lc-next-step-card--actions-stacked" : null
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "cardClasses" }] : /* istanbul ignore next */ []);
+	linkRel = computed(() => this.linkTarget() === "_blank" ? "noopener noreferrer" : null, ...ngDevMode ? [{ debugName: "linkRel" }] : /* istanbul ignore next */ []);
+	showLink = computed(() => !!(this.linkLabel() && this.linkHref()), ...ngDevMode ? [{ debugName: "showLink" }] : /* istanbul ignore next */ []);
+	hasActions = computed(() => this.hasProjectedActions() || !!this.secondaryLabel() || this.showLink() || !!this.primaryLabel(), ...ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []);
+	constructor() {
+		effect(() => {
+			if (isDevMode() && this.primaryDisabled() && !this.primaryDisabledReason()) console.warn("[lc-next-step-card] `primaryDisabled` is set without a `primaryDisabledReason`. A disabled primary action must explain why (shown as tooltip).");
+		});
+	}
+	ngAfterViewChecked() {
+		const el = this.actionsSlot()?.nativeElement;
+		this.hasProjectedActions.set(!!el && el.childElementCount > 0);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: NextStepCardComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: NextStepCardComponent,
+		isStandalone: true,
+		selector: "lc-next-step-card",
+		inputs: {
+			tone: {
+				classPropertyName: "tone",
+				publicName: "tone",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			cardTitle: {
+				classPropertyName: "cardTitle",
+				publicName: "cardTitle",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			titleTag: {
+				classPropertyName: "titleTag",
+				publicName: "titleTag",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			actionsLayout: {
+				classPropertyName: "actionsLayout",
+				publicName: "actionsLayout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			actionSize: {
+				classPropertyName: "actionSize",
+				publicName: "actionSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			message: {
+				classPropertyName: "message",
+				publicName: "message",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			primaryLabel: {
+				classPropertyName: "primaryLabel",
+				publicName: "primaryLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			primaryIcon: {
+				classPropertyName: "primaryIcon",
+				publicName: "primaryIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			primaryLoading: {
+				classPropertyName: "primaryLoading",
+				publicName: "primaryLoading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			primaryDisabled: {
+				classPropertyName: "primaryDisabled",
+				publicName: "primaryDisabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			primaryDisabledReason: {
+				classPropertyName: "primaryDisabledReason",
+				publicName: "primaryDisabledReason",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			secondaryLabel: {
+				classPropertyName: "secondaryLabel",
+				publicName: "secondaryLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			linkLabel: {
+				classPropertyName: "linkLabel",
+				publicName: "linkLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			linkHref: {
+				classPropertyName: "linkHref",
+				publicName: "linkHref",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			linkTarget: {
+				classPropertyName: "linkTarget",
+				publicName: "linkTarget",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			announce: {
+				classPropertyName: "announce",
+				publicName: "announce",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			primaryClick: "primaryClick",
+			secondaryClick: "secondaryClick"
+		},
+		viewQueries: [{
+			propertyName: "actionsSlot",
+			first: true,
+			predicate: ["actionsSlot"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div [class]=\"cardClasses()\" role=\"region\" [attr.aria-label]=\"cardTitle()\">\n  <div class=\"lc-next-step-card__icon\" aria-hidden=\"true\">\n    <lc-icon [name]=\"icon()\" size=\"md\" [decorative]=\"true\" />\n  </div>\n\n  <div class=\"lc-next-step-card__body\">\n    @switch (titleTag()) {\n      @case ('h2') {\n        <h2 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </h2>\n      }\n      @case ('h3') {\n        <h3 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </h3>\n      }\n      @default {\n        <div class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </div>\n      }\n    }\n    @if (message()) {\n      <p class=\"lc-next-step-card__message\">{{ message() }}</p>\n    }\n    <div class=\"lc-next-step-card__custom-message\">\n      <ng-content />\n    </div>\n    <!-- Form-safe body: no inherited message text styles. -->\n    <div class=\"lc-next-step-card__content\">\n      <ng-content select=\"[slot='body']\" />\n    </div>\n    <div class=\"lc-next-step-card__blockers\">\n      <ng-content select=\"[slot='blockers']\" />\n    </div>\n    <div class=\"lc-next-step-card__meta\">\n      <ng-content select=\"[slot='meta']\" />\n    </div>\n  </div>\n\n  <div class=\"lc-next-step-card__actions\" [class.lc-next-step-card__actions--empty]=\"!hasActions()\">\n    <div #actionsSlot class=\"lc-next-step-card__actions-slot\">\n      <ng-content select=\"[slot='actions']\" />\n    </div>\n    @if (!hasProjectedActions()) {\n      @if (secondaryLabel()) {\n        <lc-button variant=\"ghost\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n          {{ secondaryLabel() }}\n          <lc-icon slot=\"icon-after\" name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n        </lc-button>\n      }\n      @if (showLink()) {\n        <a\n          class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n          [href]=\"linkHref()\"\n          [attr.target]=\"linkTarget()\"\n          [attr.rel]=\"linkRel()\"\n        >\n          <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n          {{ linkLabel() }}\n        </a>\n      } @else if (primaryLabel()) {\n        <lc-button\n          variant=\"primary\"\n          [size]=\"actionSize()\"\n          [loading]=\"primaryLoading()\"\n          [disabled]=\"primaryDisabled()\"\n          [disabledReason]=\"primaryDisabledReason()\"\n          (clicked)=\"primaryClick.emit()\"\n        >\n          @if (primaryIcon()) {\n            <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n          }\n          {{ primaryLabel() }}\n        </lc-button>\n      }\n    }\n  </div>\n</div>\n",
+		styles: [":host{display:block;inline-size:100%;container:lc-next-step-card/inline-size}.lc-next-step-card{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--lc-density-gap-md, var(--spacing-4, 1rem));padding:var(--lc-density-padding-md, var(--spacing-4, 1rem)) var(--lc-density-padding-lg, var(--spacing-6, 1.5rem));background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--lc-nsc-rail);border-radius:var(--border-radius-lg, .75rem)}.lc-next-step-card--neutral{--lc-nsc-rail: var(--color-border);--lc-nsc-tint: var(--color-surface-hover);--lc-nsc-ink: var(--color-text-secondary)}.lc-next-step-card--primary{--lc-nsc-rail: var(--color-primary);--lc-nsc-tint: var(--color-primary-subtle);--lc-nsc-ink: var(--color-on-primary-subtle)}.lc-next-step-card--success{--lc-nsc-rail: var(--color-success);--lc-nsc-tint: var(--color-success-subtle);--lc-nsc-ink: var(--color-on-success-subtle)}.lc-next-step-card--warning{--lc-nsc-rail: var(--color-warning);--lc-nsc-tint: var(--color-warning-subtle);--lc-nsc-ink: var(--color-on-warning-subtle)}.lc-next-step-card--info{--lc-nsc-rail: var(--color-info);--lc-nsc-tint: var(--color-info-subtle);--lc-nsc-ink: var(--color-on-info-subtle)}.lc-next-step-card__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:var(--lc-nsc-tint);color:var(--lc-nsc-ink)}.lc-next-step-card__body{flex:1 1 16rem;min-width:0}.lc-next-step-card__title{margin:0;font-family:inherit;font-size:var(--typography-font-size-base, 1rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);color:var(--color-text-primary);letter-spacing:-.01em;overflow-wrap:break-word}.lc-next-step-card__message{margin:.2rem 0 0;font-size:var(--typography-font-size-sm, .875rem);line-height:1.55;color:var(--color-text-secondary)}.lc-next-step-card__custom-message{font-size:var(--typography-font-size-sm, .875rem);line-height:1.55;color:var(--color-text-secondary)}.lc-next-step-card__custom-message:empty{display:none}:host ::ng-deep .lc-next-step-card__custom-message>p{margin:.2rem 0 0}.lc-next-step-card__content{margin-top:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-next-step-card__content:empty{display:none}.lc-next-step-card__blockers{display:flex;flex-direction:column;gap:.25rem;margin-top:var(--lc-density-gap-sm, .5rem);padding-top:var(--lc-density-gap-sm, .5rem);border-top:1px solid var(--color-border-subtle, var(--color-border));font-size:var(--typography-font-size-sm, .875rem);color:var(--color-text-secondary)}.lc-next-step-card__blockers:empty{display:none}:host ::ng-deep .lc-next-step-card__blockers>*{display:flex;align-items:baseline;gap:.5rem;margin:0}:host ::ng-deep .lc-next-step-card__blockers>*:before{content:\"\";flex:none;width:7px;height:7px;border-radius:999px;background:var(--lc-nsc-rail);transform:translateY(-1px)}.lc-next-step-card__meta{display:flex;align-items:center;gap:.5rem;margin-top:var(--lc-density-gap-sm, .5rem);padding-top:var(--lc-density-gap-sm, .5rem);border-top:1px solid var(--color-border-subtle, var(--color-border));font-size:var(--typography-font-size-xs, .8125rem);color:var(--color-text-tertiary)}.lc-next-step-card__meta:empty{display:none}.lc-next-step-card__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-sm, .5rem);margin-left:auto}.lc-next-step-card__actions--empty{display:none}.lc-next-step-card__actions-slot{display:contents}.lc-next-step-card__link{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width){flex:1 1 100%;margin-left:0}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>*,:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>lc-button>.btn,:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--actions-stacked .lc-next-step-card__actions{flex:1 1 100%;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.5rem;margin-left:0}:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>*,:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>lc-button>.btn,:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--soft{--lc-nsc-bubble: var(--color-bubble, var(--color-surface));--lc-nsc-ring: var(--color-bubble-ring, var(--color-border-strong));--lc-nsc-ink: var(--color-bubble-icon, var(--color-link, var(--color-primary)));--lc-nsc-fill: var(--color-next-step-soft-neutral, var(--color-surface-muted));align-items:center;gap:1.25rem;padding:1.5rem 2rem;background:var(--lc-nsc-fill);border:0;border-radius:1.5rem;box-shadow:none}.lc-next-step-card--soft.lc-next-step-card--primary{--lc-nsc-fill: var(--color-next-step-soft-primary, var(--color-primary-subtle))}.lc-next-step-card--soft.lc-next-step-card--success{--lc-nsc-fill: var(--color-next-step-soft-success, var(--color-success-subtle));--lc-nsc-ink: var(--color-on-success-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-success) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft.lc-next-step-card--warning{--lc-nsc-fill: var(--color-next-step-soft-warning, var(--color-warning-subtle));--lc-nsc-ink: var(--color-on-warning-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-warning) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft.lc-next-step-card--info{--lc-nsc-fill: var(--color-info-subtle);--lc-nsc-ink: var(--color-on-info-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-info) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft .lc-next-step-card__icon{width:3rem;height:3rem;background:var(--lc-nsc-bubble);box-shadow:0 0 0 1px var(--lc-nsc-ring);color:var(--lc-nsc-ink)}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.25rem;font-weight:var(--font-weight-bold, 700);line-height:1.2;letter-spacing:-.025em}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{margin:0;font-size:var(--font-size-base, 1rem);line-height:1.5}.lc-next-step-card--soft .lc-next-step-card__content{margin-top:0}.lc-next-step-card--soft .lc-next-step-card__meta{gap:.625rem;margin-top:0;padding-top:0;border-top:0;font-size:var(--font-size-sm, .875rem);line-height:1.5}.lc-next-step-card--soft .lc-next-step-card__actions{gap:.75rem}.lc-next-step-card--soft.lc-next-step-card--actions-stacked .lc-next-step-card__actions{gap:.5rem}@container lc-next-step-card (width < 30rem){.lc-next-step-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--lc-nsc-narrow-icon-gap, var(--lc-density-gap-md, 1rem));row-gap:var(--lc-nsc-narrow-row-gap, var(--lc-density-gap-sm, .5rem));padding:var(--lc-density-padding-md, var(--spacing-4, 1rem))}.lc-next-step-card__body{display:contents}.lc-next-step-card__icon{grid-column:1}.lc-next-step-card__title{grid-column:2}.lc-next-step-card__message,.lc-next-step-card__custom-message,.lc-next-step-card__content,.lc-next-step-card__blockers,.lc-next-step-card__meta,.lc-next-step-card__actions{grid-column:1/-1;margin-top:0}.lc-next-step-card__message{margin:0}.lc-next-step-card__actions{margin-left:0;padding-top:var(--lc-nsc-narrow-actions-offset, var(--lc-density-gap-sm, .5rem))}:host ::ng-deep .lc-next-step-card__actions>*,:host ::ng-deep .lc-next-step-card__actions>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card__actions>lc-button>.btn,:host ::ng-deep .lc-next-step-card__actions>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--soft{--lc-nsc-narrow-icon-gap: .875rem;--lc-nsc-narrow-row-gap: .875rem;--lc-nsc-narrow-actions-offset: .25rem;padding:1.5rem}}@container lc-next-step-card (width >= 30rem){.lc-next-step-card--soft .lc-next-step-card__body{display:flex;flex-direction:column;gap:.5rem}@media(min-width:64rem){.lc-next-step-card--soft{gap:1.75rem;padding:2rem 2.25rem;border-radius:1.75rem}.lc-next-step-card--soft .lc-next-step-card__icon{width:3.5rem;height:3.5rem}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.5rem}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{font-size:1.0625rem}.lc-next-step-card--soft .lc-next-step-card__meta{font-size:var(--font-size-base, 1rem)}}@media(min-width:90rem){.lc-next-step-card--soft{padding:2.25rem 2.5rem}.lc-next-step-card--soft .lc-next-step-card__icon{width:3.75rem;height:3.75rem}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.75rem}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{font-size:var(--font-size-lg, 1.125rem)}}}\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"
+			]
+		}, {
+			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: NextStepCardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-next-step-card",
+			standalone: true,
+			imports: [ButtonComponent, IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div [class]=\"cardClasses()\" role=\"region\" [attr.aria-label]=\"cardTitle()\">\n  <div class=\"lc-next-step-card__icon\" aria-hidden=\"true\">\n    <lc-icon [name]=\"icon()\" size=\"md\" [decorative]=\"true\" />\n  </div>\n\n  <div class=\"lc-next-step-card__body\">\n    @switch (titleTag()) {\n      @case ('h2') {\n        <h2 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </h2>\n      }\n      @case ('h3') {\n        <h3 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </h3>\n      }\n      @default {\n        <div class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </div>\n      }\n    }\n    @if (message()) {\n      <p class=\"lc-next-step-card__message\">{{ message() }}</p>\n    }\n    <div class=\"lc-next-step-card__custom-message\">\n      <ng-content />\n    </div>\n    <!-- Form-safe body: no inherited message text styles. -->\n    <div class=\"lc-next-step-card__content\">\n      <ng-content select=\"[slot='body']\" />\n    </div>\n    <div class=\"lc-next-step-card__blockers\">\n      <ng-content select=\"[slot='blockers']\" />\n    </div>\n    <div class=\"lc-next-step-card__meta\">\n      <ng-content select=\"[slot='meta']\" />\n    </div>\n  </div>\n\n  <div class=\"lc-next-step-card__actions\" [class.lc-next-step-card__actions--empty]=\"!hasActions()\">\n    <div #actionsSlot class=\"lc-next-step-card__actions-slot\">\n      <ng-content select=\"[slot='actions']\" />\n    </div>\n    @if (!hasProjectedActions()) {\n      @if (secondaryLabel()) {\n        <lc-button variant=\"ghost\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n          {{ secondaryLabel() }}\n          <lc-icon slot=\"icon-after\" name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n        </lc-button>\n      }\n      @if (showLink()) {\n        <a\n          class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n          [href]=\"linkHref()\"\n          [attr.target]=\"linkTarget()\"\n          [attr.rel]=\"linkRel()\"\n        >\n          <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n          {{ linkLabel() }}\n        </a>\n      } @else if (primaryLabel()) {\n        <lc-button\n          variant=\"primary\"\n          [size]=\"actionSize()\"\n          [loading]=\"primaryLoading()\"\n          [disabled]=\"primaryDisabled()\"\n          [disabledReason]=\"primaryDisabledReason()\"\n          (clicked)=\"primaryClick.emit()\"\n        >\n          @if (primaryIcon()) {\n            <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n          }\n          {{ primaryLabel() }}\n        </lc-button>\n      }\n    }\n  </div>\n</div>\n",
+			styles: [":host{display:block;inline-size:100%;container:lc-next-step-card/inline-size}.lc-next-step-card{display:flex;align-items:flex-start;flex-wrap:wrap;gap:var(--lc-density-gap-md, var(--spacing-4, 1rem));padding:var(--lc-density-padding-md, var(--spacing-4, 1rem)) var(--lc-density-padding-lg, var(--spacing-6, 1.5rem));background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--lc-nsc-rail);border-radius:var(--border-radius-lg, .75rem)}.lc-next-step-card--neutral{--lc-nsc-rail: var(--color-border);--lc-nsc-tint: var(--color-surface-hover);--lc-nsc-ink: var(--color-text-secondary)}.lc-next-step-card--primary{--lc-nsc-rail: var(--color-primary);--lc-nsc-tint: var(--color-primary-subtle);--lc-nsc-ink: var(--color-on-primary-subtle)}.lc-next-step-card--success{--lc-nsc-rail: var(--color-success);--lc-nsc-tint: var(--color-success-subtle);--lc-nsc-ink: var(--color-on-success-subtle)}.lc-next-step-card--warning{--lc-nsc-rail: var(--color-warning);--lc-nsc-tint: var(--color-warning-subtle);--lc-nsc-ink: var(--color-on-warning-subtle)}.lc-next-step-card--info{--lc-nsc-rail: var(--color-info);--lc-nsc-tint: var(--color-info-subtle);--lc-nsc-ink: var(--color-on-info-subtle)}.lc-next-step-card__icon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;background:var(--lc-nsc-tint);color:var(--lc-nsc-ink)}.lc-next-step-card__body{flex:1 1 16rem;min-width:0}.lc-next-step-card__title{margin:0;font-family:inherit;font-size:var(--typography-font-size-base, 1rem);font-weight:var(--typography-font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25);color:var(--color-text-primary);letter-spacing:-.01em;overflow-wrap:break-word}.lc-next-step-card__message{margin:.2rem 0 0;font-size:var(--typography-font-size-sm, .875rem);line-height:1.55;color:var(--color-text-secondary)}.lc-next-step-card__custom-message{font-size:var(--typography-font-size-sm, .875rem);line-height:1.55;color:var(--color-text-secondary)}.lc-next-step-card__custom-message:empty{display:none}:host ::ng-deep .lc-next-step-card__custom-message>p{margin:.2rem 0 0}.lc-next-step-card__content{margin-top:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-next-step-card__content:empty{display:none}.lc-next-step-card__blockers{display:flex;flex-direction:column;gap:.25rem;margin-top:var(--lc-density-gap-sm, .5rem);padding-top:var(--lc-density-gap-sm, .5rem);border-top:1px solid var(--color-border-subtle, var(--color-border));font-size:var(--typography-font-size-sm, .875rem);color:var(--color-text-secondary)}.lc-next-step-card__blockers:empty{display:none}:host ::ng-deep .lc-next-step-card__blockers>*{display:flex;align-items:baseline;gap:.5rem;margin:0}:host ::ng-deep .lc-next-step-card__blockers>*:before{content:\"\";flex:none;width:7px;height:7px;border-radius:999px;background:var(--lc-nsc-rail);transform:translateY(-1px)}.lc-next-step-card__meta{display:flex;align-items:center;gap:.5rem;margin-top:var(--lc-density-gap-sm, .5rem);padding-top:var(--lc-density-gap-sm, .5rem);border-top:1px solid var(--color-border-subtle, var(--color-border));font-size:var(--typography-font-size-xs, .8125rem);color:var(--color-text-tertiary)}.lc-next-step-card__meta:empty{display:none}.lc-next-step-card__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-sm, .5rem);margin-left:auto}.lc-next-step-card__actions--empty{display:none}.lc-next-step-card__actions-slot{display:contents}.lc-next-step-card__link{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width){flex:1 1 100%;margin-left:0}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>*,:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>lc-button>.btn,:host ::ng-deep .lc-next-step-card__actions:has(.btn-full-width)>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--actions-stacked .lc-next-step-card__actions{flex:1 1 100%;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:.5rem;margin-left:0}:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>*,:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>lc-button>.btn,:host ::ng-deep .lc-next-step-card--actions-stacked .lc-next-step-card__actions>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--soft{--lc-nsc-bubble: var(--color-bubble, var(--color-surface));--lc-nsc-ring: var(--color-bubble-ring, var(--color-border-strong));--lc-nsc-ink: var(--color-bubble-icon, var(--color-link, var(--color-primary)));--lc-nsc-fill: var(--color-next-step-soft-neutral, var(--color-surface-muted));align-items:center;gap:1.25rem;padding:1.5rem 2rem;background:var(--lc-nsc-fill);border:0;border-radius:1.5rem;box-shadow:none}.lc-next-step-card--soft.lc-next-step-card--primary{--lc-nsc-fill: var(--color-next-step-soft-primary, var(--color-primary-subtle))}.lc-next-step-card--soft.lc-next-step-card--success{--lc-nsc-fill: var(--color-next-step-soft-success, var(--color-success-subtle));--lc-nsc-ink: var(--color-on-success-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-success) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft.lc-next-step-card--warning{--lc-nsc-fill: var(--color-next-step-soft-warning, var(--color-warning-subtle));--lc-nsc-ink: var(--color-on-warning-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-warning) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft.lc-next-step-card--info{--lc-nsc-fill: var(--color-info-subtle);--lc-nsc-ink: var(--color-on-info-subtle);--lc-nsc-ring: color-mix(in srgb, var(--color-info) 45%, var(--lc-nsc-bubble))}.lc-next-step-card--soft .lc-next-step-card__icon{width:3rem;height:3rem;background:var(--lc-nsc-bubble);box-shadow:0 0 0 1px var(--lc-nsc-ring);color:var(--lc-nsc-ink)}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.25rem;font-weight:var(--font-weight-bold, 700);line-height:1.2;letter-spacing:-.025em}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{margin:0;font-size:var(--font-size-base, 1rem);line-height:1.5}.lc-next-step-card--soft .lc-next-step-card__content{margin-top:0}.lc-next-step-card--soft .lc-next-step-card__meta{gap:.625rem;margin-top:0;padding-top:0;border-top:0;font-size:var(--font-size-sm, .875rem);line-height:1.5}.lc-next-step-card--soft .lc-next-step-card__actions{gap:.75rem}.lc-next-step-card--soft.lc-next-step-card--actions-stacked .lc-next-step-card__actions{gap:.5rem}@container lc-next-step-card (width < 30rem){.lc-next-step-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--lc-nsc-narrow-icon-gap, var(--lc-density-gap-md, 1rem));row-gap:var(--lc-nsc-narrow-row-gap, var(--lc-density-gap-sm, .5rem));padding:var(--lc-density-padding-md, var(--spacing-4, 1rem))}.lc-next-step-card__body{display:contents}.lc-next-step-card__icon{grid-column:1}.lc-next-step-card__title{grid-column:2}.lc-next-step-card__message,.lc-next-step-card__custom-message,.lc-next-step-card__content,.lc-next-step-card__blockers,.lc-next-step-card__meta,.lc-next-step-card__actions{grid-column:1/-1;margin-top:0}.lc-next-step-card__message{margin:0}.lc-next-step-card__actions{margin-left:0;padding-top:var(--lc-nsc-narrow-actions-offset, var(--lc-density-gap-sm, .5rem))}:host ::ng-deep .lc-next-step-card__actions>*,:host ::ng-deep .lc-next-step-card__actions>.lc-next-step-card__actions-slot>*{flex:1 1 auto;min-width:0}:host ::ng-deep .lc-next-step-card__actions>lc-button>.btn,:host ::ng-deep .lc-next-step-card__actions>.lc-next-step-card__actions-slot>lc-button>.btn{width:100%}.lc-next-step-card--soft{--lc-nsc-narrow-icon-gap: .875rem;--lc-nsc-narrow-row-gap: .875rem;--lc-nsc-narrow-actions-offset: .25rem;padding:1.5rem}}@container lc-next-step-card (width >= 30rem){.lc-next-step-card--soft .lc-next-step-card__body{display:flex;flex-direction:column;gap:.5rem}@media(min-width:64rem){.lc-next-step-card--soft{gap:1.75rem;padding:2rem 2.25rem;border-radius:1.75rem}.lc-next-step-card--soft .lc-next-step-card__icon{width:3.5rem;height:3.5rem}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.5rem}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{font-size:1.0625rem}.lc-next-step-card--soft .lc-next-step-card__meta{font-size:var(--font-size-base, 1rem)}}@media(min-width:90rem){.lc-next-step-card--soft{padding:2.25rem 2.5rem}.lc-next-step-card--soft .lc-next-step-card__icon{width:3.75rem;height:3.75rem}.lc-next-step-card--soft .lc-next-step-card__title{font-size:1.75rem}.lc-next-step-card--soft .lc-next-step-card__message,.lc-next-step-card--soft .lc-next-step-card__custom-message{font-size:var(--font-size-lg, 1.125rem)}}}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		tone: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tone",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		cardTitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cardTitle",
+				required: true
+			}]
+		}],
+		titleTag: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "titleTag",
+				required: false
+			}]
+		}],
+		actionsLayout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actionsLayout",
+				required: false
+			}]
+		}],
+		actionSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actionSize",
+				required: false
+			}]
+		}],
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}],
+		primaryLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "primaryLabel",
+				required: false
+			}]
+		}],
+		primaryIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "primaryIcon",
+				required: false
+			}]
+		}],
+		primaryLoading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "primaryLoading",
+				required: false
+			}]
+		}],
+		primaryDisabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "primaryDisabled",
+				required: false
+			}]
+		}],
+		primaryDisabledReason: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "primaryDisabledReason",
+				required: false
+			}]
+		}],
+		secondaryLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "secondaryLabel",
+				required: false
+			}]
+		}],
+		linkLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkLabel",
+				required: false
+			}]
+		}],
+		linkHref: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkHref",
+				required: false
+			}]
+		}],
+		linkTarget: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "linkTarget",
+				required: false
+			}]
+		}],
+		announce: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "announce",
+				required: false
+			}]
+		}],
+		primaryClick: [{
+			type: i0.Output,
+			args: ["primaryClick"]
+		}],
+		secondaryClick: [{
+			type: i0.Output,
+			args: ["secondaryClick"]
+		}],
+		actionsSlot: [{
+			type: i0.ViewChild,
+			args: ["actionsSlot", { isSignal: true }]
+		}]
+	}
+});
+export { NextStepCardComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-next-step-card.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-next-step-card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-next-step-card.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/next-step-card/next-step-card.component.ts","../../../../libs/angular-ui-kit/src/lib/next-step-card/next-step-card.component.html"],"sourcesContent":["import {\n  AfterViewChecked,\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  computed,\n  effect,\n  input,\n  isDevMode,\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';\n\nexport type NextStepCardTone = 'neutral' | 'primary' | 'success' | 'warning' | 'info';\n\n/**\n * Appearance of the card.\n * - `default`: white surface, hairline border, 4 px tonal rail, 36 px tinted bubble\n * - `soft`: tinted fill per tone, radius 24 px (28 px from 1024 px), no rail,\n *   border or shadow, a larger white bubble with a 1 px ring (the \"Weite\" look)\n */\nexport type NextStepCardVariant = 'default' | 'soft';\n\n/**\n * How several actions are laid out.\n * - `inline`: side by side at the end of the card; below 480 px card width in\n *   their own row, stretched\n * - `stacked`: always in their own row, one per line at equal width, 8 px apart\n */\nexport type NextStepCardActionsLayout = 'inline' | 'stacked';\n\n/** Element that renders the title (semantics only, the look stays the same). */\nexport type NextStepCardTitleTag = 'div' | 'h2' | 'h3';\n\n/** Size of the built-in action buttons (`sm` 32 px, `md` 42 px, `lg` 48.5 px). */\nexport type NextStepCardActionSize = 'sm' | 'md' | 'lg';\n\n/**\n * Next-step card — the single status-and-action surface of a page: \"where does\n * this stand, and what is the one next step?\".\n *\n * Features:\n * - Tonal accent rail (4px left) + tinted icon bubble, token colors only\n * - Title, message (string input or default slot for markup)\n * - Primary action (with loading / disabled + mandatory disabled reason),\n *   ghost secondary action, or an external link instead of the primary button\n * - `[slot='blockers']`: rows inside the card under a subtle divider (dot\n *   prefix); each projected element with `slot=\"blockers\"` becomes one row —\n *   blockers are rows IN the card, never additional banners\n * - `[slot='meta']`: one footer line (icon + text)\n * - `[slot='actions']`: fully replaces the built-in action buttons\n * - `[slot='body']`: content below the message without the message's text\n *   styles, so form fields, lists or a description list keep their own look\n * - `role=\"region\"` labelled by the title; optional polite live announcement\n *   of title changes via `announce`\n * - Narrow layout: below 480 px of card width (a CSS container query on the\n *   host) the icon sits beside the title, message, body, blockers and meta\n *   take the full inner width, the inline padding drops to `padding-md`, and\n *   the actions take their own row with every action stretched. A projected\n *   `fullWidth` button gets its own row at every width.\n * - `variant=\"soft\"`: the tinted card of the \"Weite\" look; `actionsLayout`\n *   `stacked` for several equal-width actions; `titleTag` for a heading\n *\n * The host is a size container (`container-type: inline-size`) and takes the\n * full inline size of its parent.\n *\n * Usage rule: exactly ONE next-step card per page.\n *\n * @example\n * ```html\n * <lc-next-step-card\n *   tone=\"warning\"\n *   icon=\"clock\"\n *   cardTitle=\"Wartet auf Freigabe\"\n *   message=\"Der Entwurf ist vollständig und kann geprüft werden.\"\n *   primaryLabel=\"Freigeben\"\n *   secondaryLabel=\"Änderungen anfordern\"\n *   (primaryClick)=\"approve()\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-next-step-card',\n  standalone: true,\n  imports: [ButtonComponent, IconComponent],\n  templateUrl: './next-step-card.component.html',\n  styleUrls: ['./next-step-card.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NextStepCardComponent implements AfterViewChecked {\n  /**\n   * Tone of the accent rail and icon bubble. Colors come exclusively from the\n   * semantic tokens (`--color-*` rail, `--color-*-subtle` bubble tint,\n   * `--color-on-*-subtle` icon ink).\n   * @default 'neutral'\n   */\n  tone = input<NextStepCardTone>('neutral');\n\n  /**\n   * Appearance: `default` (surface, border, 4 px rail) or `soft` (tinted fill\n   * per tone, radius 24 px / 28 px from 1024 px, no rail, border or shadow,\n   * a 48 px white bubble with a 1 px ring; 56 px from 1024 px, 60 px from\n   * 1440 px). Soft fills come from `--color-next-step-soft-neutral` /\n   * `--color-next-step-soft-primary` and the tone's `-subtle` token; the bubble\n   * from `--color-bubble`, `--color-bubble-ring`, `--color-bubble-icon`.\n   * @default 'default'\n   */\n  variant = input<NextStepCardVariant>('default');\n\n  /** Icon name for the round bubble (36 px; 48–60 px in the soft variant). */\n  icon = input<string>('information-circle');\n\n  /** Title (1rem semibold; 20–28 px bold in the soft variant). Also the card's accessible name. */\n  cardTitle = input.required<string>();\n\n  /**\n   * Element that renders the title: `div` (default), `h2` or `h3`. Use a\n   * heading when the page has sections, so heading navigation reaches the\n   * most important item. Semantics only, the look stays the same.\n   * @default 'div'\n   */\n  titleTag = input<NextStepCardTitleTag>('div');\n\n  /**\n   * Layout of several actions. `inline`: side by side at the end of the card\n   * (below 480 px card width in their own row, stretched). `stacked`: always\n   * in their own row, one per line at equal width, 8 px apart (e.g. a list of\n   * sign-in methods).\n   * @default 'inline'\n   */\n  actionsLayout = input<NextStepCardActionsLayout>('inline');\n\n  /**\n   * Size of the built-in action buttons and link: `sm` (32 px, the 3.2\n   * default), `md` (42 px) or `lg` (48.5 px, meets the 44 px touch target).\n   * @default 'sm'\n   */\n  actionSize = input<NextStepCardActionSize>('sm');\n\n  /** Message below the title. For markup, use the default slot instead. */\n  message = input<string>();\n\n  /** Label of the primary action. Omit to render no primary button. */\n  primaryLabel = input<string>();\n\n  /** Optional leading icon of the primary action. */\n  primaryIcon = input<string>();\n\n  /** Shows a spinner on the primary action. */\n  primaryLoading = input<boolean>(false);\n\n  /**\n   * Disables the primary action. A disabled primary REQUIRES\n   * `primaryDisabledReason`; disabled without a reason logs a dev warning.\n   */\n  primaryDisabled = input<boolean>(false);\n\n  /** Why the primary action is disabled — shown as tooltip on the button. */\n  primaryDisabledReason = input<string>('');\n\n  /** Label of the ghost secondary action (rendered with a chevron). */\n  secondaryLabel = input<string>();\n\n  /**\n   * Label of an external link rendered instead of the primary button\n   * (opens in a new tab). Requires `linkHref`.\n   */\n  linkLabel = input<string>();\n\n  /** Target URL of the external link. */\n  linkHref = input<string>();\n\n  /**\n   * Where the link opens: `_blank` (a new tab, with `rel=\"noopener noreferrer\"`,\n   * the 3.2 behaviour) or `_self` (the same tab, no `rel`).\n   * @default '_blank'\n   */\n  linkTarget = input<'_blank' | '_self'>('_blank');\n\n  /**\n   * Announce title changes to screen readers via `aria-live=\"polite\"` —\n   * for cards whose state advances in place.\n   * @default false\n   */\n  announce = input<boolean>(false);\n\n  /** Emits when the primary action is clicked. */\n  primaryClick = output<void>();\n\n  /** Emits when the secondary action is clicked. */\n  secondaryClick = output<void>();\n\n  private actionsSlot = viewChild<ElementRef<HTMLElement>>('actionsSlot');\n\n  /**\n   * Whether content was projected into `[slot='actions']` — projected actions\n   * fully replace the built-in buttons.\n   */\n  protected hasProjectedActions = signal(false);\n\n  protected cardClasses = computed(() =>\n    [\n      'lc-next-step-card',\n      `lc-next-step-card--${this.tone()}`,\n      this.variant() === 'soft' ? 'lc-next-step-card--soft' : null,\n      this.actionsLayout() === 'stacked' ? 'lc-next-step-card--actions-stacked' : null,\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n\n  /** `rel` of the external link: only a new tab needs `noopener noreferrer`. */\n  protected linkRel = computed(() => (this.linkTarget() === '_blank' ? 'noopener noreferrer' : null));\n\n  protected showLink = computed(() => !!(this.linkLabel() && this.linkHref()));\n\n  /**\n   * Whether the card renders any action: hides the empty actions box, so the\n   * narrow layout gets no empty row.\n   */\n  protected hasActions = computed(\n    () =>\n      this.hasProjectedActions() ||\n      !!this.secondaryLabel() ||\n      this.showLink() ||\n      !!this.primaryLabel(),\n  );\n\n  constructor() {\n    effect(() => {\n      if (isDevMode() && this.primaryDisabled() && !this.primaryDisabledReason()) {\n        console.warn(\n          '[lc-next-step-card] `primaryDisabled` is set without a `primaryDisabledReason`. ' +\n            'A disabled primary action must explain why (shown as tooltip).',\n        );\n      }\n    });\n  }\n\n  ngAfterViewChecked(): void {\n    // Projected [slot='actions'] content replaces the built-in buttons. The\n    // signal write is equality-guarded, so unchanged checks are no-ops.\n    const el = this.actionsSlot()?.nativeElement;\n    this.hasProjectedActions.set(!!el && el.childElementCount > 0);\n  }\n}\n","<div [class]=\"cardClasses()\" role=\"region\" [attr.aria-label]=\"cardTitle()\">\n  <div class=\"lc-next-step-card__icon\" aria-hidden=\"true\">\n    <lc-icon [name]=\"icon()\" size=\"md\" [decorative]=\"true\" />\n  </div>\n\n  <div class=\"lc-next-step-card__body\">\n    @switch (titleTag()) {\n      @case ('h2') {\n        <h2 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </h2>\n      }\n      @case ('h3') {\n        <h3 class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </h3>\n      }\n      @default {\n        <div class=\"lc-next-step-card__title\" [attr.aria-live]=\"announce() ? 'polite' : null\">\n          {{ cardTitle() }}\n        </div>\n      }\n    }\n    @if (message()) {\n      <p class=\"lc-next-step-card__message\">{{ message() }}</p>\n    }\n    <div class=\"lc-next-step-card__custom-message\">\n      <ng-content />\n    </div>\n    <!-- Form-safe body: no inherited message text styles. -->\n    <div class=\"lc-next-step-card__content\">\n      <ng-content select=\"[slot='body']\" />\n    </div>\n    <div class=\"lc-next-step-card__blockers\">\n      <ng-content select=\"[slot='blockers']\" />\n    </div>\n    <div class=\"lc-next-step-card__meta\">\n      <ng-content select=\"[slot='meta']\" />\n    </div>\n  </div>\n\n  <div class=\"lc-next-step-card__actions\" [class.lc-next-step-card__actions--empty]=\"!hasActions()\">\n    <div #actionsSlot class=\"lc-next-step-card__actions-slot\">\n      <ng-content select=\"[slot='actions']\" />\n    </div>\n    @if (!hasProjectedActions()) {\n      @if (secondaryLabel()) {\n        <lc-button variant=\"ghost\" [size]=\"actionSize()\" (clicked)=\"secondaryClick.emit()\">\n          {{ secondaryLabel() }}\n          <lc-icon slot=\"icon-after\" name=\"chevron-right\" size=\"xs\" [decorative]=\"true\" />\n        </lc-button>\n      }\n      @if (showLink()) {\n        <a\n          class=\"btn btn-secondary btn-{{ actionSize() }} lc-next-step-card__link\"\n          [href]=\"linkHref()\"\n          [attr.target]=\"linkTarget()\"\n          [attr.rel]=\"linkRel()\"\n        >\n          <lc-icon name=\"external-link\" size=\"sm\" [decorative]=\"true\" />\n          {{ linkLabel() }}\n        </a>\n      } @else if (primaryLabel()) {\n        <lc-button\n          variant=\"primary\"\n          [size]=\"actionSize()\"\n          [loading]=\"primaryLoading()\"\n          [disabled]=\"primaryDisabled()\"\n          [disabledReason]=\"primaryDisabledReason()\"\n          (clicked)=\"primaryClick.emit()\"\n        >\n          @if (primaryIcon()) {\n            <lc-icon slot=\"icon-before\" [name]=\"primaryIcon()!\" size=\"sm\" [decorative]=\"true\" />\n          }\n          {{ primaryLabel() }}\n        </lc-button>\n      }\n    }\n  </div>\n</div>\n"],"mappings":"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"}