@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1,203 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, model, output } from "@angular/core";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var CalloutComponent = class CalloutComponent {
+	variant = input("info", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	title = input(...ngDevMode ? [void 0, { debugName: "title" }] : /* istanbul ignore next */ []);
+	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	iconAriaLabel = input(void 0, ...ngDevMode ? [{ debugName: "iconAriaLabel" }] : /* istanbul ignore next */ []);
+	dismissible = input(false, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
+	dismissAriaLabel = input("Dismiss", ...ngDevMode ? [{ debugName: "dismissAriaLabel" }] : /* istanbul ignore next */ []);
+	dismissed = output();
+	visible = model(true, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	calloutClasses = computed(() => {
+		return ["callout", `callout--${this.variant()}`].join(" ");
+	}, ...ngDevMode ? [{ debugName: "calloutClasses" }] : /* istanbul ignore next */ []);
+	role = computed(() => this.variant() === "error" || this.variant() === "warning" ? "alert" : "status", ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	iconName = computed(() => {
+		return this.icon() || {
+			info: "information-circle",
+			success: "check-circle",
+			warning: "exclamation-triangle",
+			error: "x-circle",
+			neutral: "information-circle"
+		}[this.variant()];
+	}, ...ngDevMode ? [{ debugName: "iconName" }] : /* istanbul ignore next */ []);
+	dismiss() {
+		this.visible.set(false);
+		this.dismissed.emit();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: CalloutComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: CalloutComponent,
+		isStandalone: true,
+		selector: "lc-callout",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconAriaLabel: {
+				classPropertyName: "iconAriaLabel",
+				publicName: "iconAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissible: {
+				classPropertyName: "dismissible",
+				publicName: "dismissible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissAriaLabel: {
+				classPropertyName: "dismissAriaLabel",
+				publicName: "dismissAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			visible: {
+				classPropertyName: "visible",
+				publicName: "visible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			dismissed: "dismissed",
+			visible: "visibleChange"
+		},
+		ngImport: i0,
+		template: "@if (visible()) {\n  <div [class]=\"calloutClasses()\" [attr.role]=\"role()\">\n    <lc-icon\n      class=\"callout__icon\"\n      [name]=\"iconName()\"\n      size=\"md\"\n      [decorative]=\"!iconAriaLabel()\"\n      [ariaLabel]=\"iconAriaLabel()\"\n    />\n    <div class=\"callout__content\">\n      @if (title()) {\n        <strong class=\"callout__title\">{{ title() }}</strong>\n      }\n      <div class=\"callout__body\">\n        <ng-content />\n      </div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"callout__dismiss\"\n        [attr.aria-label]=\"dismissAriaLabel()\"\n        (click)=\"dismiss()\"\n      >\n        <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n}\n",
+		styles: [".callout{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-radius:var(--border-radius-md);border-left:4px solid;font-size:var(--typography-font-size-sm, .875rem);line-height:1.5;color:var(--color-text-primary)}.callout--info{background-color:#3b658829;border-left-color:#3b65886b}.callout--info .callout__icon{color:var(--color-info)}.callout--success{background-color:#8ea47529;border-left-color:#8ea47566}.callout--success .callout__icon{color:var(--color-success)}.callout--warning{background-color:#e1a04029;border-left-color:#e1a0406b}.callout--warning .callout__icon{color:var(--color-warning)}.callout--error{background-color:#9d0e0e29;border-left-color:#9d0e0e73}.callout--error .callout__icon{color:var(--color-error)}.callout--neutral{background-color:var(--color-surface-hover);border-left-color:var(--color-border)}.callout--neutral .callout__icon{color:var(--color-text-tertiary)}.callout__icon{flex-shrink:0;margin-top:.0625rem}.callout__content{flex:1;min-width:0}.callout__title{display:block;font-weight:var(--typography-font-weight-semibold, 600);margin-bottom:.25rem}.callout__body p{margin:0}.callout__dismiss{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;border-radius:var(--border-radius-sm);background:transparent;color:inherit;opacity:.6;cursor:pointer;flex-shrink:0;transition:opacity .15s ease,background-color .15s ease}.callout__dismiss:hover{opacity:1;background-color:var(--color-surface-hover)}\n"],
+		dependencies: [{
+			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: CalloutComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-callout",
+			standalone: true,
+			imports: [IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (visible()) {\n  <div [class]=\"calloutClasses()\" [attr.role]=\"role()\">\n    <lc-icon\n      class=\"callout__icon\"\n      [name]=\"iconName()\"\n      size=\"md\"\n      [decorative]=\"!iconAriaLabel()\"\n      [ariaLabel]=\"iconAriaLabel()\"\n    />\n    <div class=\"callout__content\">\n      @if (title()) {\n        <strong class=\"callout__title\">{{ title() }}</strong>\n      }\n      <div class=\"callout__body\">\n        <ng-content />\n      </div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"callout__dismiss\"\n        [attr.aria-label]=\"dismissAriaLabel()\"\n        (click)=\"dismiss()\"\n      >\n        <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n}\n",
+			styles: [".callout{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 1rem;border-radius:var(--border-radius-md);border-left:4px solid;font-size:var(--typography-font-size-sm, .875rem);line-height:1.5;color:var(--color-text-primary)}.callout--info{background-color:#3b658829;border-left-color:#3b65886b}.callout--info .callout__icon{color:var(--color-info)}.callout--success{background-color:#8ea47529;border-left-color:#8ea47566}.callout--success .callout__icon{color:var(--color-success)}.callout--warning{background-color:#e1a04029;border-left-color:#e1a0406b}.callout--warning .callout__icon{color:var(--color-warning)}.callout--error{background-color:#9d0e0e29;border-left-color:#9d0e0e73}.callout--error .callout__icon{color:var(--color-error)}.callout--neutral{background-color:var(--color-surface-hover);border-left-color:var(--color-border)}.callout--neutral .callout__icon{color:var(--color-text-tertiary)}.callout__icon{flex-shrink:0;margin-top:.0625rem}.callout__content{flex:1;min-width:0}.callout__title{display:block;font-weight:var(--typography-font-weight-semibold, 600);margin-bottom:.25rem}.callout__body p{margin:0}.callout__dismiss{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border:none;border-radius:var(--border-radius-sm);background:transparent;color:inherit;opacity:.6;cursor:pointer;flex-shrink:0;transition:opacity .15s ease,background-color .15s ease}.callout__dismiss:hover{opacity:1;background-color:var(--color-surface-hover)}\n"]
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		iconAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconAriaLabel",
+				required: false
+			}]
+		}],
+		dismissible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissible",
+				required: false
+			}]
+		}],
+		dismissAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissAriaLabel",
+				required: false
+			}]
+		}],
+		dismissed: [{
+			type: i0.Output,
+			args: ["dismissed"]
+		}],
+		visible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "visible",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["visibleChange"]
+		}]
+	}
+});
+export { CalloutComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-callout.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-callout.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/callout/callout.component.ts","../../../../libs/angular-ui-kit/src/lib/callout/callout.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  model,\n  output,\n  computed,\n} from '@angular/core';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\nexport type CalloutVariant = 'info' | 'success' | 'warning' | 'error' | 'neutral';\n\n@Component({\n  selector: 'lc-callout',\n  standalone: true,\n  imports: [IconComponent],\n  templateUrl: './callout.component.html',\n  styleUrls: ['./callout.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Callout component for contextual information banners.\n *\n * Features:\n * - Semantic variants (info, success, warning, error, neutral)\n * - Auto-mapped variant icons (override with `icon`); decorative unless\n *   `iconAriaLabel` names them — no built-in English word\n * - Optional title text\n * - Dismissible with close button; `visible` is two-way bindable so a\n *   dismissed callout can be shown again\n * - `role=\"alert\"` for error / warning, `role=\"status\"` otherwise\n * - Content projection for custom body content\n *\n * @example\n * ```html\n * <lc-callout variant=\"warning\" title=\"Attention\">Please review your input.</lc-callout>\n * ```\n */\nexport class CalloutComponent {\n  /** Visual variant */\n  variant = input<CalloutVariant>('info');\n\n  /** Title text (optional) */\n  title = input<string>();\n\n  /** Icon name instead of the variant's default icon. */\n  icon = input<string | undefined>(undefined);\n\n  /**\n   * Accessible name of the icon, e.g. „Hinweis“. Leave it unset when the\n   * title or text already says what kind of note this is: the icon is then\n   * decorative (`aria-hidden`). The kit sets no default text, so no English\n   * word is read on a page in another language.\n   */\n  iconAriaLabel = input<string | undefined>(undefined);\n\n  /** Whether the callout can be dismissed */\n  dismissible = input<boolean>(false);\n\n  /** Accessible name of the dismiss button (`dismissible`). */\n  dismissAriaLabel = input('Dismiss');\n\n  /** Emits when dismiss button is clicked */\n  dismissed = output<void>();\n\n  /**\n   * Visibility (two-way bindable). Dismissing sets it to `false`; the parent\n   * can set it back to `true` to show the callout again.\n   */\n  visible = model<boolean>(true);\n\n  protected calloutClasses = computed(() => {\n    return ['callout', `callout--${this.variant()}`].join(' ');\n  });\n\n  /**\n   * Live-region semantics: only error / warning callouts interrupt the user\n   * (`alert`); informational ones are announced politely (`status`).\n   */\n  protected role = computed(() =>\n    this.variant() === 'error' || this.variant() === 'warning' ? 'alert' : 'status',\n  );\n\n  protected iconName = computed(() => {\n    const map: Record<CalloutVariant, string> = {\n      info: 'information-circle',\n      success: 'check-circle',\n      warning: 'exclamation-triangle',\n      error: 'x-circle',\n      neutral: 'information-circle',\n    };\n    return this.icon() || map[this.variant()];\n  });\n\n  dismiss(): void {\n    this.visible.set(false);\n    this.dismissed.emit();\n  }\n}\n","@if (visible()) {\n  <div [class]=\"calloutClasses()\" [attr.role]=\"role()\">\n    <lc-icon\n      class=\"callout__icon\"\n      [name]=\"iconName()\"\n      size=\"md\"\n      [decorative]=\"!iconAriaLabel()\"\n      [ariaLabel]=\"iconAriaLabel()\"\n    />\n    <div class=\"callout__content\">\n      @if (title()) {\n        <strong class=\"callout__title\">{{ title() }}</strong>\n      }\n      <div class=\"callout__body\">\n        <ng-content />\n      </div>\n    </div>\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"callout__dismiss\"\n        [attr.aria-label]=\"dismissAriaLabel()\"\n        (click)=\"dismiss()\"\n      >\n        <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,323 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostListener, computed, input, output } from "@angular/core";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var CardComponent = class CardComponent {
+	title = input(void 0, ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	subtitle = input(void 0, ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
+	icon = input(void 0, ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	iconVariant = input("brand", ...ngDevMode ? [{ debugName: "iconVariant" }] : /* istanbul ignore next */ []);
+	iconSize = input("md", ...ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []);
+	badge = input(void 0, ...ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []);
+	badgeVariant = input("default", ...ngDevMode ? [{ debugName: "badgeVariant" }] : /* istanbul ignore next */ []);
+	variant = input("elevated", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	padding = input("md", ...ngDevMode ? [{ debugName: "padding" }] : /* istanbul ignore next */ []);
+	clickable = input(false, ...ngDevMode ? [{ debugName: "clickable" }] : /* istanbul ignore next */ []);
+	selected = input(false, ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	borderRadius = input("md", ...ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []);
+	headingLevel = input(3, ...ngDevMode ? [{ debugName: "headingLevel" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	cardClick = output();
+	isClickable = computed(() => this.clickable() && this.variant() !== "dashed", ...ngDevMode ? [{ debugName: "isClickable" }] : /* istanbul ignore next */ []);
+	cardClasses = computed(() => {
+		const classes = [
+			"card",
+			`card-${this.variant()}`,
+			`card-padding-${this.padding()}`,
+			`card-radius-${this.borderRadius()}`
+		];
+		if (this.isClickable()) classes.push("card-clickable");
+		if (this.selected() && this.variant() !== "dashed") classes.push("card-selected");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "cardClasses" }] : /* istanbul ignore next */ []);
+	role = computed(() => this.isClickable() ? "button" : "article", ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	handleClick(event) {
+		if (this.isClickable()) this.cardClick.emit(event);
+	}
+	handleKeydown(event) {
+		if (this.isClickable() && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			const mouseEvent = new MouseEvent("click", {
+				bubbles: true,
+				cancelable: true
+			});
+			this.cardClick.emit(mouseEvent);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: CardComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: CardComponent,
+		isStandalone: true,
+		selector: "lc-card",
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			subtitle: {
+				classPropertyName: "subtitle",
+				publicName: "subtitle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconVariant: {
+				classPropertyName: "iconVariant",
+				publicName: "iconVariant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconSize: {
+				classPropertyName: "iconSize",
+				publicName: "iconSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			badge: {
+				classPropertyName: "badge",
+				publicName: "badge",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			badgeVariant: {
+				classPropertyName: "badgeVariant",
+				publicName: "badgeVariant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			padding: {
+				classPropertyName: "padding",
+				publicName: "padding",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			clickable: {
+				classPropertyName: "clickable",
+				publicName: "clickable",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selected: {
+				classPropertyName: "selected",
+				publicName: "selected",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			borderRadius: {
+				classPropertyName: "borderRadius",
+				publicName: "borderRadius",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			headingLevel: {
+				classPropertyName: "headingLevel",
+				publicName: "headingLevel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { cardClick: "cardClick" },
+		host: { listeners: { "keydown": "handleKeydown($event)" } },
+		ngImport: i0,
+		template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- Enter/Space are handled by the host keydown listener (role=button, tabindex=0 when clickable) -->\n<div\n  [class]=\"cardClasses()\"\n  [attr.role]=\"role()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.tabindex]=\"isClickable() ? 0 : null\"\n  (click)=\"handleClick($event)\"\n>\n  @if (title()) {\n    <div class=\"card__header\">\n      @if (icon()) {\n        <div\n          class=\"card__icon card__icon--{{ iconVariant() }} card__icon--size-{{ iconSize() }}\"\n          aria-hidden=\"true\"\n        >\n          <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n        </div>\n      }\n      <div class=\"card__header-left\">\n        <div class=\"card__title-row\">\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"card__title\">{{ title() }}</h2>\n            }\n            @case (4) {\n              <h4 class=\"card__title\">{{ title() }}</h4>\n            }\n            @case (5) {\n              <h5 class=\"card__title\">{{ title() }}</h5>\n            }\n            @case (6) {\n              <h6 class=\"card__title\">{{ title() }}</h6>\n            }\n            @default {\n              <h3 class=\"card__title\">{{ title() }}</h3>\n            }\n          }\n          <!-- Rich status badge: project an lc-badge here (takes visual\n               precedence over the `badge` string). Wrapper hides when empty. -->\n          <span class=\"card__badge-slot\"><ng-content select=\"[card-badge]\"></ng-content></span>\n          @if (badge()) {\n            <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>\n          }\n        </div>\n        @if (subtitle()) {\n          <p class=\"card__subtitle\">{{ subtitle() }}</p>\n        }\n      </div>\n      <div class=\"card__header-action\">\n        <ng-content select=\"[card-header-action]\"></ng-content>\n      </div>\n    </div>\n  }\n  <ng-content select=\"[card-header]\"></ng-content>\n  <div class=\"card__body\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n",
+		styles: [":host{display:block;height:100%}.card{position:relative;display:flex;flex-direction:column;height:100%;background-color:var(--color-surface);color:var(--color-text-primary);transition:box-shadow .15s ease-in-out,transform .15s ease-in-out,border-color .15s ease-in-out}.card__body{flex:1;display:flex;flex-direction:column}.card-elevated{position:relative;overflow:hidden;background-image:var(--gradient-surface);border:1px solid var(--color-border);box-shadow:var(--elevation-1)}.card-elevated:after{content:\"\";position:absolute;inset:0 0 auto;height:3px;background:var(--accent-line);opacity:.7;pointer-events:none}.card-elevated:hover{box-shadow:var(--elevation-2)}.card-outlined{background-image:none;border:1px solid var(--color-border)}.card-flat{background-image:none}.card-raised{background-image:none;border:1px solid var(--color-border);box-shadow:var(--shadow-auth-card, var(--elevation-3))}.card-dashed{background-color:var(--color-muted-tile, var(--color-surface-muted));background-image:none;border:1px dashed var(--color-muted-tile-border, var(--color-border));box-shadow:none;color:var(--color-text-secondary)}.card-padding-none{padding:0}.card-padding-xs{padding:var(--lc-density-padding-xs, var(--spacing-2))}.card-padding-sm{padding:var(--lc-density-padding-sm, var(--spacing-3))}.card-padding-md{padding:var(--lc-density-padding-md, var(--spacing-4))}.card-padding-lg{padding:var(--lc-density-padding-lg, var(--spacing-6))}.card-radius-none{border-radius:var(--border-radius-none)}.card-radius-sm{border-radius:var(--border-radius-sm)}.card-radius-md{border-radius:var(--border-radius-md)}.card-radius-lg{border-radius:var(--border-radius-lg)}.card-radius-xl{border-radius:var(--border-radius-xl, 1.5rem)}.card-radius-full{border-radius:var(--border-radius-full)}.card-clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.card-clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.card-clickable:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.card-clickable:active{transform:scale(.98)}.card-selected{border:1px solid var(--color-primary);background-color:var(--color-surface-selected);box-shadow:var(--shadow-brand-glow)}.card-selected.card-elevated{box-shadow:var(--shadow-brand-glow),var(--elevation-2)}.card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, var(--spacing-4));margin-bottom:var(--lc-density-padding-md, var(--spacing-4));padding-bottom:var(--lc-density-padding-sm, var(--spacing-3));border-bottom:1px solid var(--color-border, #e5e7eb)}.card__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--border-radius-md)}.card__icon--size-sm{width:1.75rem;height:1.75rem;border-radius:var(--border-radius-sm)}.card__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.card__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.card__header-left{flex:1;min-width:0}.card__title-row{display:flex;align-items:center;gap:.5rem}.card__badge-slot{display:inline-flex;align-items:center}.card__badge-slot:empty{display:none}.card__title{margin:0;font-weight:600;font-size:var(--lc-card-title-size, var(--font-size-lg, 1.125rem));line-height:1.3;color:var(--color-text-primary)}.card__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1}.card__badge--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary);border:1px solid var(--color-border)}.card__badge--primary{background-color:#20849729;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.card__badge--success{background-color:#8ea4752e;color:var(--color-success)}.card__badge--warning{background-color:#e1a0402e;color:var(--color-warning)}.card__badge--error{background-color:#9d0e0e2e;color:var(--color-error)}.card__subtitle{margin:.25rem 0 0;font-size:.8125rem;color:var(--color-text-secondary);line-height:1.4}.card__header-action{flex-shrink:0;display:flex;align-items:center;gap:.5rem}:host ::ng-deep [card-header],:host ::ng-deep .card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));margin-bottom:var(--lc-density-padding-md, var(--spacing-4));padding-bottom:var(--lc-density-padding-sm, var(--spacing-3));border-bottom:1px solid var(--color-divider, #e5e7eb);font-weight:600;font-size:1.125rem;color:var(--color-text-primary)}:host ::ng-deep .card-content{color:var(--color-text-primary)}:host ::ng-deep [card-footer],:host ::ng-deep .card-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-2));margin-top:var(--lc-density-padding-md, var(--spacing-4));padding-top:var(--lc-density-padding-sm, var(--spacing-3));border-top:1px solid var(--color-divider, #e5e7eb);color:var(--color-text-secondary)}:host ::ng-deep .card-dashed lc-icon{color:var(--color-muted-tile-icon, var(--color-text-tertiary))}\n"],
+		dependencies: [{
+			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: CardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-card",
+			standalone: true,
+			imports: [IconComponent],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- Enter/Space are handled by the host keydown listener (role=button, tabindex=0 when clickable) -->\n<div\n  [class]=\"cardClasses()\"\n  [attr.role]=\"role()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.tabindex]=\"isClickable() ? 0 : null\"\n  (click)=\"handleClick($event)\"\n>\n  @if (title()) {\n    <div class=\"card__header\">\n      @if (icon()) {\n        <div\n          class=\"card__icon card__icon--{{ iconVariant() }} card__icon--size-{{ iconSize() }}\"\n          aria-hidden=\"true\"\n        >\n          <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n        </div>\n      }\n      <div class=\"card__header-left\">\n        <div class=\"card__title-row\">\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"card__title\">{{ title() }}</h2>\n            }\n            @case (4) {\n              <h4 class=\"card__title\">{{ title() }}</h4>\n            }\n            @case (5) {\n              <h5 class=\"card__title\">{{ title() }}</h5>\n            }\n            @case (6) {\n              <h6 class=\"card__title\">{{ title() }}</h6>\n            }\n            @default {\n              <h3 class=\"card__title\">{{ title() }}</h3>\n            }\n          }\n          <!-- Rich status badge: project an lc-badge here (takes visual\n               precedence over the `badge` string). Wrapper hides when empty. -->\n          <span class=\"card__badge-slot\"><ng-content select=\"[card-badge]\"></ng-content></span>\n          @if (badge()) {\n            <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>\n          }\n        </div>\n        @if (subtitle()) {\n          <p class=\"card__subtitle\">{{ subtitle() }}</p>\n        }\n      </div>\n      <div class=\"card__header-action\">\n        <ng-content select=\"[card-header-action]\"></ng-content>\n      </div>\n    </div>\n  }\n  <ng-content select=\"[card-header]\"></ng-content>\n  <div class=\"card__body\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n",
+			styles: [":host{display:block;height:100%}.card{position:relative;display:flex;flex-direction:column;height:100%;background-color:var(--color-surface);color:var(--color-text-primary);transition:box-shadow .15s ease-in-out,transform .15s ease-in-out,border-color .15s ease-in-out}.card__body{flex:1;display:flex;flex-direction:column}.card-elevated{position:relative;overflow:hidden;background-image:var(--gradient-surface);border:1px solid var(--color-border);box-shadow:var(--elevation-1)}.card-elevated:after{content:\"\";position:absolute;inset:0 0 auto;height:3px;background:var(--accent-line);opacity:.7;pointer-events:none}.card-elevated:hover{box-shadow:var(--elevation-2)}.card-outlined{background-image:none;border:1px solid var(--color-border)}.card-flat{background-image:none}.card-raised{background-image:none;border:1px solid var(--color-border);box-shadow:var(--shadow-auth-card, var(--elevation-3))}.card-dashed{background-color:var(--color-muted-tile, var(--color-surface-muted));background-image:none;border:1px dashed var(--color-muted-tile-border, var(--color-border));box-shadow:none;color:var(--color-text-secondary)}.card-padding-none{padding:0}.card-padding-xs{padding:var(--lc-density-padding-xs, var(--spacing-2))}.card-padding-sm{padding:var(--lc-density-padding-sm, var(--spacing-3))}.card-padding-md{padding:var(--lc-density-padding-md, var(--spacing-4))}.card-padding-lg{padding:var(--lc-density-padding-lg, var(--spacing-6))}.card-radius-none{border-radius:var(--border-radius-none)}.card-radius-sm{border-radius:var(--border-radius-sm)}.card-radius-md{border-radius:var(--border-radius-md)}.card-radius-lg{border-radius:var(--border-radius-lg)}.card-radius-xl{border-radius:var(--border-radius-xl, 1.5rem)}.card-radius-full{border-radius:var(--border-radius-full)}.card-clickable{cursor:pointer;-webkit-user-select:none;user-select:none}.card-clickable:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.card-clickable:hover{background-color:var(--color-surface-hover);border-color:var(--color-border-strong)}.card-clickable:active{transform:scale(.98)}.card-selected{border:1px solid var(--color-primary);background-color:var(--color-surface-selected);box-shadow:var(--shadow-brand-glow)}.card-selected.card-elevated{box-shadow:var(--shadow-brand-glow),var(--elevation-2)}.card__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, var(--spacing-4));margin-bottom:var(--lc-density-padding-md, var(--spacing-4));padding-bottom:var(--lc-density-padding-sm, var(--spacing-3));border-bottom:1px solid var(--color-border, #e5e7eb)}.card__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:var(--border-radius-md)}.card__icon--size-sm{width:1.75rem;height:1.75rem;border-radius:var(--border-radius-sm)}.card__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.card__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.card__header-left{flex:1;min-width:0}.card__title-row{display:flex;align-items:center;gap:.5rem}.card__badge-slot{display:inline-flex;align-items:center}.card__badge-slot:empty{display:none}.card__title{margin:0;font-weight:600;font-size:var(--lc-card-title-size, var(--font-size-lg, 1.125rem));line-height:1.3;color:var(--color-text-primary)}.card__badge{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;border-radius:9999px;font-size:.75rem;font-weight:600;line-height:1}.card__badge--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary);border:1px solid var(--color-border)}.card__badge--primary{background-color:#20849729;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.card__badge--success{background-color:#8ea4752e;color:var(--color-success)}.card__badge--warning{background-color:#e1a0402e;color:var(--color-warning)}.card__badge--error{background-color:#9d0e0e2e;color:var(--color-error)}.card__subtitle{margin:.25rem 0 0;font-size:.8125rem;color:var(--color-text-secondary);line-height:1.4}.card__header-action{flex-shrink:0;display:flex;align-items:center;gap:.5rem}:host ::ng-deep [card-header],:host ::ng-deep .card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--lc-density-gap-sm, var(--spacing-2));margin-bottom:var(--lc-density-padding-md, var(--spacing-4));padding-bottom:var(--lc-density-padding-sm, var(--spacing-3));border-bottom:1px solid var(--color-divider, #e5e7eb);font-weight:600;font-size:1.125rem;color:var(--color-text-primary)}:host ::ng-deep .card-content{color:var(--color-text-primary)}:host ::ng-deep [card-footer],:host ::ng-deep .card-footer{display:flex;align-items:center;justify-content:flex-end;gap:var(--lc-density-gap-sm, var(--spacing-2));margin-top:var(--lc-density-padding-md, var(--spacing-4));padding-top:var(--lc-density-padding-sm, var(--spacing-3));border-top:1px solid var(--color-divider, #e5e7eb);color:var(--color-text-secondary)}:host ::ng-deep .card-dashed lc-icon{color:var(--color-muted-tile-icon, var(--color-text-tertiary))}\n"]
+		}]
+	}],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		subtitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "subtitle",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		iconVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconVariant",
+				required: false
+			}]
+		}],
+		iconSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconSize",
+				required: false
+			}]
+		}],
+		badge: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "badge",
+				required: false
+			}]
+		}],
+		badgeVariant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "badgeVariant",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		padding: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "padding",
+				required: false
+			}]
+		}],
+		clickable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clickable",
+				required: false
+			}]
+		}],
+		selected: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selected",
+				required: false
+			}]
+		}],
+		borderRadius: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "borderRadius",
+				required: false
+			}]
+		}],
+		headingLevel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "headingLevel",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		cardClick: [{
+			type: i0.Output,
+			args: ["cardClick"]
+		}],
+		handleKeydown: [{
+			type: HostListener,
+			args: ["keydown", ["$event"]]
+		}]
+	}
+});
+export { CardComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-card.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-card.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/card/card.component.ts","../../../../libs/angular-ui-kit/src/lib/card/card.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  output,\n  HostListener,\n  computed,\n} from '@angular/core';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\n/** Visual variant of `lc-card`. */\nexport type CardVariant = 'elevated' | 'outlined' | 'flat' | 'raised' | 'dashed';\n\n/** Heading level of `lc-card`'s built-in title. */\nexport type CardHeadingLevel = 2 | 3 | 4 | 5 | 6;\n\n/**\n * Card component for content grouping and visual hierarchy.\n *\n * Features:\n * - Variant styles (elevated, outlined, flat, raised, dashed)\n * - Configurable padding (none, xs, sm, md, lg)\n * - Border radius options (none, sm, md, lg, xl, full)\n * - Optional title display, with an optional leading icon tile\n * - Content projection for flexible body content\n *\n * @example\n * ```html\n * <lc-card title=\"Card Title\" variant=\"elevated\" padding=\"md\">\n *   <p>Card body content</p>\n * </lc-card>\n *\n * <!-- With a leading brand-tile icon in the header -->\n * <lc-card title=\"Repository\" subtitle=\"Checkout &amp; profile\" icon=\"git-branch\">\n *   ...\n * </lc-card>\n * ```\n */\n@Component({\n  selector: 'lc-card',\n  standalone: true,\n  imports: [IconComponent],\n  templateUrl: './card.component.html',\n  styleUrls: ['./card.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CardComponent {\n  /**\n   * Optional title rendered as a styled header.\n   * For complex headers (e.g. title + action button), use content projection instead.\n   */\n  title = input<string | undefined>(undefined);\n\n  /**\n   * Optional subtitle rendered below the title.\n   */\n  subtitle = input<string | undefined>(undefined);\n\n  /**\n   * Optional leading icon (Tabler icon name) rendered as a teal brand tile to\n   * the left of the title. Only shown when `title` is set.\n   */\n  icon = input<string | undefined>(undefined);\n\n  /**\n   * Visual treatment of the leading icon tile.\n   * - brand: gradient teal tile with light ink (default)\n   * - subtle: translucent surface tile with brand-teal ink\n   * @default 'brand'\n   */\n  iconVariant = input<'brand' | 'subtle'>('brand');\n\n  /**\n   * Size of the leading icon tile.\n   * - md: 2.25rem tile (default)\n   * - sm: compact ~1.75rem chip for dense card headers\n   * @default 'md'\n   */\n  iconSize = input<'sm' | 'md'>('md');\n\n  /**\n   * Optional badge text/count shown next to the title (e.g. item count).\n   * For a richer status badge (e.g. a leading status dot), project an\n   * `lc-badge` into the `card-badge` slot instead — the slot takes precedence.\n   */\n  badge = input<string | undefined>(undefined);\n\n  /**\n   * Badge color variant.\n   * @default 'default'\n   */\n  badgeVariant = input<'default' | 'primary' | 'success' | 'warning' | 'error'>('default');\n\n  /**\n   * Visual variant of the card\n   * - elevated: Box shadow (default)\n   * - outlined: Border only (the hairline `--color-border`, no shadow) — the\n   *   content card on the \"Weite\" sky with `borderRadius=\"xl\"`\n   * - flat: No shadow or border\n   * - raised: plain surface, hairline border and the long, soft\n   *   `--shadow-auth-card`, no accent line — the sign-in card\n   * - dashed: the muted \"coming soon\" tile — `--color-muted-tile` fill, 1 px\n   *   dashed `--color-muted-tile-border`, secondary ink, icons in\n   *   `--color-muted-tile-icon`. Never clickable: `clickable` is ignored\n   * @default 'elevated'\n   */\n  variant = input<CardVariant>('elevated');\n\n  /**\n   * Padding inside the card\n   * @default 'md'\n   */\n  padding = input<'none' | 'xs' | 'sm' | 'md' | 'lg'>('md');\n\n  /**\n   * Whether the card is clickable (hover effects, cursor pointer)\n   * @default false\n   */\n  clickable = input<boolean>(false);\n\n  /**\n   * Whether the card is selected (if clickable)\n   * @default false\n   */\n  selected = input<boolean>(false);\n\n  /**\n   * Border radius size: `none`, `sm`, `md`, `lg` (18 px), `xl` (24 px, the\n   * \"Weite\" content card) or `full`.\n   * @default 'md'\n   */\n  borderRadius = input<'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full'>('md');\n\n  /**\n   * Heading level of the built-in `title` (`h2`–`h6`), so the card fits the\n   * page's outline. Semantics only, the look stays the same.\n   * @default 3\n   */\n  headingLevel = input<CardHeadingLevel>(3);\n\n  /**\n   * ARIA label for accessibility\n   */\n  ariaLabel = input<string | undefined>(undefined);\n\n  /**\n   * Emitted when card is clicked (if clickable)\n   */\n  readonly cardClick = output<MouseEvent>();\n\n  /**\n   * Whether the card acts as a button: `clickable`, except for the dashed\n   * \"coming soon\" tile, which is never interactive.\n   */\n  protected isClickable = computed(() => this.clickable() && this.variant() !== 'dashed');\n\n  /**\n   * Compute card CSS classes based on inputs\n   */\n  protected cardClasses = computed(() => {\n    const classes = [\n      'card',\n      `card-${this.variant()}`,\n      `card-padding-${this.padding()}`,\n      `card-radius-${this.borderRadius()}`,\n    ];\n\n    if (this.isClickable()) {\n      classes.push('card-clickable');\n    }\n\n    // The dashed tile is never interactive, so it is never selected either.\n    if (this.selected() && this.variant() !== 'dashed') {\n      classes.push('card-selected');\n    }\n\n    return classes.join(' ');\n  });\n\n  /**\n   * Compute ARIA role based on clickable state\n   */\n  protected role = computed(() => (this.isClickable() ? 'button' : 'article'));\n\n  /**\n   * Handle card click events\n   */\n  protected handleClick(event: MouseEvent): void {\n    if (this.isClickable()) {\n      this.cardClick.emit(event);\n    }\n  }\n\n  /**\n   * Handle keyboard events for accessibility\n   */\n  @HostListener('keydown', ['$event'])\n  protected handleKeydown(event: KeyboardEvent): void {\n    if (this.isClickable() && (event.key === 'Enter' || event.key === ' ')) {\n      event.preventDefault();\n      const mouseEvent = new MouseEvent('click', {\n        bubbles: true,\n        cancelable: true,\n      });\n      this.cardClick.emit(mouseEvent);\n    }\n  }\n}\n","<!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- Enter/Space are handled by the host keydown listener (role=button, tabindex=0 when clickable) -->\n<div\n  [class]=\"cardClasses()\"\n  [attr.role]=\"role()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.tabindex]=\"isClickable() ? 0 : null\"\n  (click)=\"handleClick($event)\"\n>\n  @if (title()) {\n    <div class=\"card__header\">\n      @if (icon()) {\n        <div\n          class=\"card__icon card__icon--{{ iconVariant() }} card__icon--size-{{ iconSize() }}\"\n          aria-hidden=\"true\"\n        >\n          <lc-icon [name]=\"icon()!\" [size]=\"iconSize() === 'sm' ? 'xs' : 'sm'\" [decorative]=\"true\" />\n        </div>\n      }\n      <div class=\"card__header-left\">\n        <div class=\"card__title-row\">\n          @switch (headingLevel()) {\n            @case (2) {\n              <h2 class=\"card__title\">{{ title() }}</h2>\n            }\n            @case (4) {\n              <h4 class=\"card__title\">{{ title() }}</h4>\n            }\n            @case (5) {\n              <h5 class=\"card__title\">{{ title() }}</h5>\n            }\n            @case (6) {\n              <h6 class=\"card__title\">{{ title() }}</h6>\n            }\n            @default {\n              <h3 class=\"card__title\">{{ title() }}</h3>\n            }\n          }\n          <!-- Rich status badge: project an lc-badge here (takes visual\n               precedence over the `badge` string). Wrapper hides when empty. -->\n          <span class=\"card__badge-slot\"><ng-content select=\"[card-badge]\"></ng-content></span>\n          @if (badge()) {\n            <span class=\"card__badge card__badge--{{ badgeVariant() }}\">{{ badge() }}</span>\n          }\n        </div>\n        @if (subtitle()) {\n          <p class=\"card__subtitle\">{{ subtitle() }}</p>\n        }\n      </div>\n      <div class=\"card__header-action\">\n        <ng-content select=\"[card-header-action]\"></ng-content>\n      </div>\n    </div>\n  }\n  <ng-content select=\"[card-header]\"></ng-content>\n  <div class=\"card__body\">\n    <ng-content></ng-content>\n  </div>\n  <ng-content select=\"[card-footer]\"></ng-content>\n</div>\n"],"mappings":"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"}