@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1,297 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input, model, output } from "@angular/core";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var AlertComponent = class AlertComponent {
+	variant = input("info", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	title = input(...ngDevMode ? [void 0, { debugName: "title" }] : /* istanbul ignore next */ []);
+	message = input(...ngDevMode ? [void 0, { debugName: "message" }] : /* istanbul ignore next */ []);
+	icon = input(...ngDevMode ? [void 0, { debugName: "icon" }] : /* istanbul ignore next */ []);
+	showIcon = input(true, ...ngDevMode ? [{ debugName: "showIcon" }] : /* istanbul ignore next */ []);
+	iconAriaLabel = input(void 0, ...ngDevMode ? [{ debugName: "iconAriaLabel" }] : /* istanbul ignore next */ []);
+	actionsLayout = input("inline", ...ngDevMode ? [{ debugName: "actionsLayout" }] : /* istanbul ignore next */ []);
+	dismissible = input(false, ...ngDevMode ? [{ debugName: "dismissible" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(...ngDevMode ? [void 0, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	closeAriaLabel = input("Close alert", ...ngDevMode ? [{ debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []);
+	dismissed = output();
+	visible = model(true, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => {
+		const classes = ["lc-alert", `lc-alert--${this.variant()}`];
+		if (this.actionsLayout() === "stacked") classes.push("lc-alert--actions-stacked");
+		if (this.showIcon()) classes.push("lc-alert--with-icon");
+		if (!this.visible()) classes.push("lc-alert--hidden");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	containerClasses = computed(() => {
+		return "lc-alert__container";
+	}, ...ngDevMode ? [{ debugName: "containerClasses" }] : /* istanbul ignore next */ []);
+	isUrgent = computed(() => {
+		const variant = this.variant();
+		return variant === "error" || variant === "warning";
+	}, ...ngDevMode ? [{ debugName: "isUrgent" }] : /* istanbul ignore next */ []);
+	role = computed(() => this.isUrgent() ? "alert" : "status", ...ngDevMode ? [{ debugName: "role" }] : /* istanbul ignore next */ []);
+	ariaLive = computed(() => this.isUrgent() ? "assertive" : "polite", ...ngDevMode ? [{ debugName: "ariaLive" }] : /* istanbul ignore next */ []);
+	defaultIcon = computed(() => {
+		return this.icon() || {
+			success: "check-circle",
+			error: "x-circle",
+			warning: "exclamation-triangle",
+			info: "information-circle"
+		}[this.variant()];
+	}, ...ngDevMode ? [{ debugName: "defaultIcon" }] : /* istanbul ignore next */ []);
+	dismiss() {
+		this.visible.set(false);
+		this.dismissed.emit();
+	}
+	onCloseClick(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.dismiss();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: AlertComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: AlertComponent,
+		isStandalone: true,
+		selector: "lc-alert",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			message: {
+				classPropertyName: "message",
+				publicName: "message",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			icon: {
+				classPropertyName: "icon",
+				publicName: "icon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showIcon: {
+				classPropertyName: "showIcon",
+				publicName: "showIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			iconAriaLabel: {
+				classPropertyName: "iconAriaLabel",
+				publicName: "iconAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			actionsLayout: {
+				classPropertyName: "actionsLayout",
+				publicName: "actionsLayout",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			dismissible: {
+				classPropertyName: "dismissible",
+				publicName: "dismissible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			closeAriaLabel: {
+				classPropertyName: "closeAriaLabel",
+				publicName: "closeAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			visible: {
+				classPropertyName: "visible",
+				publicName: "visible",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			dismissed: "dismissed",
+			visible: "visibleChange"
+		},
+		host: { properties: {
+			"class": "hostClasses()",
+			"attr.role": "role()",
+			"attr.aria-live": "ariaLive()",
+			"attr.aria-label": "ariaLabel()"
+		} },
+		ngImport: i0,
+		template: "@if (visible()) {\n  <div [class]=\"containerClasses()\">\n    @if (showIcon()) {\n      <div class=\"lc-alert__icon\">\n        <lc-icon\n          [name]=\"defaultIcon()\"\n          size=\"md\"\n          [decorative]=\"!iconAriaLabel()\"\n          [ariaLabel]=\"iconAriaLabel()\"\n        />\n      </div>\n    }\n    \n    <div class=\"lc-alert__body\">\n      @if (title()) {\n        <div class=\"lc-alert__title\">{{ title() }}</div>\n      }\n      \n      <div class=\"lc-alert__content\">\n        @if (message()) {\n          {{ message() }}\n        } @else {\n          <ng-content />\n        }\n      </div>\n    </div>\n\n    <div class=\"lc-alert__action\">\n      <ng-content select=\"[slot='action']\" />\n    </div>\n\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"lc-alert__close\"\n        [attr.aria-label]=\"closeAriaLabel()\"\n        (click)=\"onCloseClick($event)\"\n      >\n        <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n}\n",
+		styles: [".lc-alert{display:block;width:100%;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert--actions-stacked{container:lc-alert/inline-size}.lc-alert--actions-stacked .lc-alert__container{flex-wrap:wrap}.lc-alert--actions-stacked .lc-alert__body{flex:1 1 0}.lc-alert--actions-stacked .lc-alert__action{order:1;flex:1 1 100%;align-self:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-2, .5rem);margin-top:var(--spacing-1, .25rem)}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:100%}.lc-alert--actions-stacked.lc-alert--with-icon .lc-alert__action{padding-inline-start:calc(1.5rem + var(--spacing-3, .75rem))}@container lc-alert (width >= 36rem){.lc-alert--actions-stacked .lc-alert__action{flex-direction:row;flex-wrap:wrap;align-items:center}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:auto}}.lc-alert__action{flex-shrink:0;align-self:center}.lc-alert__action:empty{display:none}.lc-alert__close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center}.lc-alert__close:hover{background-color:var(--color-surface-hover)}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert--success{background-color:#8ea4751f;border-color:#8ea47566;color:var(--color-text-primary)}.lc-alert--success .lc-alert__icon{color:var(--color-success)}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4752e}.lc-alert--error{background-color:#9d0e0e24;border-color:#9d0e0e73;color:var(--color-text-primary)}.lc-alert--error .lc-alert__icon{color:var(--color-error)}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e33}.lc-alert--warning{background-color:#e1a04024;border-color:#e1a0406b;color:var(--color-text-primary)}.lc-alert--warning .lc-alert__icon{color:var(--color-warning)}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a04033}.lc-alert--info{background-color:#3b658829;border-color:#3b65886b;color:var(--color-text-primary)}.lc-alert--info .lc-alert__icon{color:var(--color-info)}.lc-alert--info .lc-alert__close:hover{background-color:#3b658838}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "lc-icon",
+			inputs: [
+				"name",
+				"variant",
+				"size",
+				"color",
+				"ariaLabel",
+				"decorative",
+				"strict"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AlertComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-alert",
+			standalone: true,
+			imports: [IconComponent],
+			encapsulation: ViewEncapsulation.None,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class]": "hostClasses()",
+				"[attr.role]": "role()",
+				"[attr.aria-live]": "ariaLive()",
+				"[attr.aria-label]": "ariaLabel()"
+			},
+			template: "@if (visible()) {\n  <div [class]=\"containerClasses()\">\n    @if (showIcon()) {\n      <div class=\"lc-alert__icon\">\n        <lc-icon\n          [name]=\"defaultIcon()\"\n          size=\"md\"\n          [decorative]=\"!iconAriaLabel()\"\n          [ariaLabel]=\"iconAriaLabel()\"\n        />\n      </div>\n    }\n    \n    <div class=\"lc-alert__body\">\n      @if (title()) {\n        <div class=\"lc-alert__title\">{{ title() }}</div>\n      }\n      \n      <div class=\"lc-alert__content\">\n        @if (message()) {\n          {{ message() }}\n        } @else {\n          <ng-content />\n        }\n      </div>\n    </div>\n\n    <div class=\"lc-alert__action\">\n      <ng-content select=\"[slot='action']\" />\n    </div>\n\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"lc-alert__close\"\n        [attr.aria-label]=\"closeAriaLabel()\"\n        (click)=\"onCloseClick($event)\"\n      >\n        <lc-icon name=\"x-mark\" size=\"sm\" [decorative]=\"true\" />\n      </button>\n    }\n  </div>\n}\n",
+			styles: [".lc-alert{display:block;width:100%;border-radius:var(--border-radius-md);border-width:1px;border-style:solid;transition:opacity .15s ease-in-out}.lc-alert--hidden{display:none}.lc-alert__container{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4))}.lc-alert__icon{flex-shrink:0;display:flex;align-items:center;justify-content:center}.lc-alert__body{flex:1;min-width:0}.lc-alert__title{font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);line-height:var(--line-height-tight);margin-bottom:var(--spacing-1)}.lc-alert__content{font-size:var(--font-size-sm);line-height:var(--line-height-normal)}.lc-alert--actions-stacked{container:lc-alert/inline-size}.lc-alert--actions-stacked .lc-alert__container{flex-wrap:wrap}.lc-alert--actions-stacked .lc-alert__body{flex:1 1 0}.lc-alert--actions-stacked .lc-alert__action{order:1;flex:1 1 100%;align-self:auto;display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-2, .5rem);margin-top:var(--spacing-1, .25rem)}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:100%}.lc-alert--actions-stacked.lc-alert--with-icon .lc-alert__action{padding-inline-start:calc(1.5rem + var(--spacing-3, .75rem))}@container lc-alert (width >= 36rem){.lc-alert--actions-stacked .lc-alert__action{flex-direction:row;flex-wrap:wrap;align-items:center}.lc-alert--actions-stacked .lc-alert__action>lc-button>.btn{width:auto}}.lc-alert__action{flex-shrink:0;align-self:center}.lc-alert__action:empty{display:none}.lc-alert__close{flex-shrink:0;background:transparent;border:none;cursor:pointer;padding:var(--spacing-1);margin:calc(var(--spacing-1) * -1);border-radius:var(--border-radius-sm);transition:background-color .15s ease-in-out;display:flex;align-items:center;justify-content:center}.lc-alert__close:hover{background-color:var(--color-surface-hover)}.lc-alert__close:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-alert--success{background-color:#8ea4751f;border-color:#8ea47566;color:var(--color-text-primary)}.lc-alert--success .lc-alert__icon{color:var(--color-success)}.lc-alert--success .lc-alert__close:hover{background-color:#8ea4752e}.lc-alert--error{background-color:#9d0e0e24;border-color:#9d0e0e73;color:var(--color-text-primary)}.lc-alert--error .lc-alert__icon{color:var(--color-error)}.lc-alert--error .lc-alert__close:hover{background-color:#9d0e0e33}.lc-alert--warning{background-color:#e1a04024;border-color:#e1a0406b;color:var(--color-text-primary)}.lc-alert--warning .lc-alert__icon{color:var(--color-warning)}.lc-alert--warning .lc-alert__close:hover{background-color:#e1a04033}.lc-alert--info{background-color:#3b658829;border-color:#3b65886b;color:var(--color-text-primary)}.lc-alert--info .lc-alert__icon{color:var(--color-info)}.lc-alert--info .lc-alert__close:hover{background-color:#3b658838}@media(prefers-reduced-motion:no-preference){.lc-alert--hidden{animation:fadeOut .15s ease-in-out}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}\n"]
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		message: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "message",
+				required: false
+			}]
+		}],
+		icon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "icon",
+				required: false
+			}]
+		}],
+		showIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showIcon",
+				required: false
+			}]
+		}],
+		iconAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "iconAriaLabel",
+				required: false
+			}]
+		}],
+		actionsLayout: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "actionsLayout",
+				required: false
+			}]
+		}],
+		dismissible: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dismissible",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		closeAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeAriaLabel",
+				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 { AlertComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-alert.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-alert.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/alert/alert.component.ts","../../../../libs/angular-ui-kit/src/lib/alert/alert.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  model,\n  output,\n  computed,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\nexport type AlertVariant = 'success' | 'error' | 'warning' | 'info';\n\n/**\n * Layout of the projected actions (`slot=\"action\"`).\n * - `inline`: one action right of the body, vertically centred (3.2)\n * - `stacked`: the actions in their own row below the title and message;\n *   below 576 px of alert width one per line at full width, 8 px apart,\n *   from 576 px side by side at their natural width\n */\nexport type AlertActionsLayout = 'inline' | 'stacked';\n\n/**\n * Alert component for inline notifications.\n *\n * Features:\n * - Semantic variants (success, warning, error, info)\n * - Optional title and icon display\n * - Auto-mapped variant icons\n * - Dismissible with close button; `visible` is two-way bindable so a\n *   dismissed alert can be shown again\n * - Content projection for custom body\n * - Action slot for a button rendered right of the body (e.g. retry), or\n *   several actions stacked below it (`actionsLayout=\"stacked\"`)\n * - The variant icon is decorative unless `iconAriaLabel` names it (the\n *   title and the colour carry the tone; no built-in English word)\n * - Accessible: `role=\"alert\"` for error / warning, `role=\"status\"` otherwise\n *\n * @example\n * ```html\n * <lc-alert variant=\"success\" title=\"Success!\" [dismissible]=\"true\">\n *   Your changes have been saved.\n * </lc-alert>\n *\n * <lc-alert variant=\"error\" title=\"Laden fehlgeschlagen\">\n *   Die Liste konnte nicht geladen werden.\n *   <lc-button slot=\"action\" variant=\"outline\" size=\"sm\">Erneut versuchen</lc-button>\n * </lc-alert>\n * ```\n */\n@Component({\n  selector: 'lc-alert',\n  standalone: true,\n  imports: [IconComponent],\n  templateUrl: './alert.component.html',\n  styleUrls: ['./alert.component.scss'],\n  encapsulation: ViewEncapsulation.None, // Required for dynamic variant class styling\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'hostClasses()',\n    '[attr.role]': 'role()',\n    '[attr.aria-live]': 'ariaLive()',\n    '[attr.aria-label]': 'ariaLabel()',\n  },\n})\nexport class AlertComponent {\n  /**\n   * Visual variant of the alert\n   * @default 'info'\n   */\n  variant = input<AlertVariant>('info');\n\n  /**\n   * Alert title (optional)\n   */\n  title = input<string>();\n\n  /**\n   * Alert message (alternative to content projection)\n   */\n  message = input<string>();\n\n  /**\n   * Icon to display (defaults based on variant)\n   */\n  icon = input<string>();\n\n  /**\n   * Whether to show icon\n   * @default true\n   */\n  showIcon = input<boolean>(true);\n\n  /**\n   * Accessible name of the variant icon, e.g. „Warnung“. Leave it unset when\n   * the title already says what kind of message 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  /**\n   * Layout of the projected actions (`slot=\"action\"`): `inline` — one action\n   * right of the body (3.2); `stacked` — the actions in their own row below\n   * the title and message, one per line at full width and 8 px apart below\n   * 576 px of alert width, side by side at their natural width from there.\n   * @default 'inline'\n   */\n  actionsLayout = input<AlertActionsLayout>('inline');\n\n  /**\n   * Whether the alert can be dismissed\n   * @default false\n   */\n  dismissible = input<boolean>(false);\n\n  /**\n   * ARIA label for accessibility\n   */\n  ariaLabel = input<string>();\n\n  /** Accessible name of the close button (`dismissible`). */\n  closeAriaLabel = input('Close alert');\n\n  /**\n   * Emitted when alert is dismissed\n   */\n  readonly 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 alert again.\n   */\n  visible = model<boolean>(true);\n\n  /**\n   * Computed host classes\n   */\n  protected hostClasses = computed(() => {\n    const classes = ['lc-alert', `lc-alert--${this.variant()}`];\n    if (this.actionsLayout() === 'stacked') {\n      classes.push('lc-alert--actions-stacked');\n    }\n    if (this.showIcon()) {\n      classes.push('lc-alert--with-icon');\n    }\n    if (!this.visible()) {\n      classes.push('lc-alert--hidden');\n    }\n    return classes.join(' ');\n  });\n\n  /**\n   * Computed container classes\n   */\n  protected containerClasses = computed(() => {\n    return 'lc-alert__container';\n  });\n\n  /** Whether the variant should interrupt the user (error / warning). */\n  private readonly isUrgent = computed(() => {\n    const variant = this.variant();\n    return variant === 'error' || variant === 'warning';\n  });\n\n  /**\n   * Live-region role: `alert` (assertive) only for error / warning,\n   * `status` (polite) for info / success.\n   */\n  protected role = computed(() => (this.isUrgent() ? 'alert' : 'status'));\n\n  /**\n   * Computed ARIA live region priority\n   */\n  protected ariaLive = computed(() => (this.isUrgent() ? 'assertive' : 'polite'));\n\n  /**\n   * Computed default icon based on variant\n   */\n  protected defaultIcon = computed(() => {\n    const icons: Record<AlertVariant, string> = {\n      success: 'check-circle',\n      error: 'x-circle',\n      warning: 'exclamation-triangle',\n      info: 'information-circle',\n    };\n    return this.icon() || icons[this.variant()];\n  });\n\n  /**\n   * Dismiss the alert\n   */\n  dismiss(): void {\n    this.visible.set(false);\n    this.dismissed.emit();\n  }\n\n  /**\n   * Handle close button click\n   */\n  protected onCloseClick(event: Event): void {\n    event.preventDefault();\n    event.stopPropagation();\n    this.dismiss();\n  }\n}\n","@if (visible()) {\n  <div [class]=\"containerClasses()\">\n    @if (showIcon()) {\n      <div class=\"lc-alert__icon\">\n        <lc-icon\n          [name]=\"defaultIcon()\"\n          size=\"md\"\n          [decorative]=\"!iconAriaLabel()\"\n          [ariaLabel]=\"iconAriaLabel()\"\n        />\n      </div>\n    }\n    \n    <div class=\"lc-alert__body\">\n      @if (title()) {\n        <div class=\"lc-alert__title\">{{ title() }}</div>\n      }\n      \n      <div class=\"lc-alert__content\">\n        @if (message()) {\n          {{ message() }}\n        } @else {\n          <ng-content />\n        }\n      </div>\n    </div>\n\n    <div class=\"lc-alert__action\">\n      <ng-content select=\"[slot='action']\" />\n    </div>\n\n    @if (dismissible()) {\n      <button\n        type=\"button\"\n        class=\"lc-alert__close\"\n        [attr.aria-label]=\"closeAriaLabel()\"\n        (click)=\"onCloseClick($event)\"\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-app-shell.mjs

@@ -0,0 +1,190 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var AppShellComponent = class AppShellComponent {
+	horizon = input(false, ...ngDevMode ? [{ debugName: "horizon" }] : /* istanbul ignore next */ []);
+	shellClasses = computed(() => {
+		const classes = ["lc-app-shell"];
+		if (this.horizon()) classes.push("lc-app-shell--horizon");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "shellClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: AppShellComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: AppShellComponent,
+		isStandalone: true,
+		selector: "lc-app-shell",
+		inputs: { horizon: {
+			classPropertyName: "horizon",
+			publicName: "horizon",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		ngImport: i0,
+		template: "<div [class]=\"shellClasses()\">\n  <div class=\"lc-app-shell__header\"><ng-content select=\"[shell-header]\" /></div>\n  <div class=\"lc-app-shell__nav\"><ng-content select=\"[shell-nav]\" /></div>\n  <div class=\"lc-app-shell__body\"><ng-content /></div>\n  @if (horizon()) {\n    <div class=\"lc-app-shell__horizon lc-horizon\"></div>\n  }\n  <div class=\"lc-app-shell__footer\"><ng-content select=\"[shell-footer]\" /></div>\n  <div class=\"lc-app-shell__bottom-nav\"><ng-content select=\"[shell-bottom-nav]\" /></div>\n</div>\n",
+		styles: [":host{display:block}.lc-app-shell{--_nav-width: var(--lc-app-shell-nav-width, 240px);--_clearance: var(--lc-app-shell-bottom-clearance, calc(112px + env(safe-area-inset-bottom, 0px)) );display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:\"header\" \"body\" \"end\";min-height:100vh;min-height:100dvh;box-sizing:border-box;background-color:var(--lc-app-shell-bg, var(--color-background));background-image:var(--lc-app-shell-bg-image, var(--app-background-image, none))}.lc-app-shell__header{grid-area:header;min-width:0;padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.lc-app-shell__body{grid-area:body;min-width:0;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.lc-app-shell__nav{display:none}.lc-app-shell__horizon{grid-area:end;min-width:0}.lc-app-shell__footer{grid-area:end;align-self:end;min-width:0;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.lc-app-shell--horizon .lc-app-shell__footer{position:relative;z-index:1}.lc-app-shell__footer:empty,.lc-app-shell__header:empty{display:none}.lc-app-shell__bottom-nav{display:contents}@media(max-width:1023.98px){.lc-app-shell:not(.lc-app-shell--horizon):has(>.lc-app-shell__bottom-nav:not(:empty)){padding-bottom:var(--_clearance)}}@media(min-width:1024px){.lc-app-shell{grid-template-columns:var(--_nav-width) minmax(0,1fr);grid-template-areas:\"header header\" \"nav body\" \"end end\"}.lc-app-shell:has(>.lc-app-shell__nav:empty){grid-template-columns:minmax(0,1fr);grid-template-areas:\"header\" \"body\" \"end\"}.lc-app-shell__nav{grid-area:nav;display:block;min-width:0;position:sticky;top:0;align-self:start;max-height:100vh;max-height:100dvh;overflow-y:auto;padding-left:env(safe-area-inset-left,0px)}.lc-app-shell__nav:empty{display:none}.lc-app-shell:not(:has(>.lc-app-shell__nav:empty)) .lc-app-shell__body{padding-left:0}.lc-app-shell__bottom-nav{display:none}}@media(min-width:1280px){.lc-app-shell:has(.lc-app-page__aside)>.lc-app-shell__header{--_aside-width: var(--lc-app-page-aside-width, 360px);--_hairline: var(--color-hairline, var(--color-border));background:linear-gradient(var(--_hairline),var(--_hairline)) right calc(var(--_aside-width) - 1px) top/1px 100% no-repeat,linear-gradient(var(--color-background-low),var(--color-background-low)) right top/var(--_aside-width) 100% no-repeat}}@media(min-width:1440px){.lc-app-shell{--_nav-width: var(--lc-app-shell-nav-width, 248px)}.lc-app-shell:has(.lc-app-page__aside)>.lc-app-shell__header{--_aside-width: var(--lc-app-page-aside-width, 400px)}}@media(min-width:1920px){.lc-app-shell{--_nav-width: var(--lc-app-shell-nav-width, 280px)}.lc-app-shell:has(.lc-app-page__aside)>.lc-app-shell__header{--_aside-width: var(--lc-app-page-aside-width, 460px)}}@media(forced-colors:active){.lc-app-shell__header{background:none}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AppShellComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-app-shell",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div [class]=\"shellClasses()\">\n  <div class=\"lc-app-shell__header\"><ng-content select=\"[shell-header]\" /></div>\n  <div class=\"lc-app-shell__nav\"><ng-content select=\"[shell-nav]\" /></div>\n  <div class=\"lc-app-shell__body\"><ng-content /></div>\n  @if (horizon()) {\n    <div class=\"lc-app-shell__horizon lc-horizon\"></div>\n  }\n  <div class=\"lc-app-shell__footer\"><ng-content select=\"[shell-footer]\" /></div>\n  <div class=\"lc-app-shell__bottom-nav\"><ng-content select=\"[shell-bottom-nav]\" /></div>\n</div>\n",
+			styles: [":host{display:block}.lc-app-shell{--_nav-width: var(--lc-app-shell-nav-width, 240px);--_clearance: var(--lc-app-shell-bottom-clearance, calc(112px + env(safe-area-inset-bottom, 0px)) );display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:\"header\" \"body\" \"end\";min-height:100vh;min-height:100dvh;box-sizing:border-box;background-color:var(--lc-app-shell-bg, var(--color-background));background-image:var(--lc-app-shell-bg-image, var(--app-background-image, none))}.lc-app-shell__header{grid-area:header;min-width:0;padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.lc-app-shell__body{grid-area:body;min-width:0;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.lc-app-shell__nav{display:none}.lc-app-shell__horizon{grid-area:end;min-width:0}.lc-app-shell__footer{grid-area:end;align-self:end;min-width:0;padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.lc-app-shell--horizon .lc-app-shell__footer{position:relative;z-index:1}.lc-app-shell__footer:empty,.lc-app-shell__header:empty{display:none}.lc-app-shell__bottom-nav{display:contents}@media(max-width:1023.98px){.lc-app-shell:not(.lc-app-shell--horizon):has(>.lc-app-shell__bottom-nav:not(:empty)){padding-bottom:var(--_clearance)}}@media(min-width:1024px){.lc-app-shell{grid-template-columns:var(--_nav-width) minmax(0,1fr);grid-template-areas:\"header header\" \"nav body\" \"end end\"}.lc-app-shell:has(>.lc-app-shell__nav:empty){grid-template-columns:minmax(0,1fr);grid-template-areas:\"header\" \"body\" \"end\"}.lc-app-shell__nav{grid-area:nav;display:block;min-width:0;position:sticky;top:0;align-self:start;max-height:100vh;max-height:100dvh;overflow-y:auto;padding-left:env(safe-area-inset-left,0px)}.lc-app-shell__nav:empty{display:none}.lc-app-shell:not(:has(>.lc-app-shell__nav:empty)) .lc-app-shell__body{padding-left:0}.lc-app-shell__bottom-nav{display:none}}@media(min-width:1280px){.lc-app-shell:has(.lc-app-page__aside)>.lc-app-shell__header{--_aside-width: var(--lc-app-page-aside-width, 360px);--_hairline: var(--color-hairline, var(--color-border));background:linear-gradient(var(--_hairline),var(--_hairline)) right calc(var(--_aside-width) - 1px) top/1px 100% no-repeat,linear-gradient(var(--color-background-low),var(--color-background-low)) right top/var(--_aside-width) 100% no-repeat}}@media(min-width:1440px){.lc-app-shell{--_nav-width: var(--lc-app-shell-nav-width, 248px)}.lc-app-shell:has(.lc-app-page__aside)>.lc-app-shell__header{--_aside-width: var(--lc-app-page-aside-width, 400px)}}@media(min-width:1920px){.lc-app-shell{--_nav-width: var(--lc-app-shell-nav-width, 280px)}.lc-app-shell:has(.lc-app-page__aside)>.lc-app-shell__header{--_aside-width: var(--lc-app-page-aside-width, 460px)}}@media(forced-colors:active){.lc-app-shell__header{background:none}}\n"]
+		}]
+	}],
+	propDecorators: { horizon: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "horizon",
+			required: false
+		}]
+	}] }
+});
+var AppPageComponent = class AppPageComponent {
+	mainId = input("main", ...ngDevMode ? [{ debugName: "mainId" }] : /* istanbul ignore next */ []);
+	contentMaxWidth = input("880px", ...ngDevMode ? [{ debugName: "contentMaxWidth" }] : /* istanbul ignore next */ []);
+	asideLabelledby = input("", ...ngDevMode ? [{ debugName: "asideLabelledby" }] : /* istanbul ignore next */ []);
+	asideAriaLabel = input("", ...ngDevMode ? [{ debugName: "asideAriaLabel" }] : /* istanbul ignore next */ []);
+	busy = input(false, ...ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []);
+	hasAside = computed(() => !!(this.asideLabelledby() || this.asideAriaLabel()), ...ngDevMode ? [{ debugName: "hasAside" }] : /* istanbul ignore next */ []);
+	pageClasses = computed(() => {
+		const classes = ["lc-app-page"];
+		if (this.hasAside()) classes.push("lc-app-page--aside");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "pageClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: AppPageComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: AppPageComponent,
+		isStandalone: true,
+		selector: "lc-app-page",
+		inputs: {
+			mainId: {
+				classPropertyName: "mainId",
+				publicName: "mainId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			contentMaxWidth: {
+				classPropertyName: "contentMaxWidth",
+				publicName: "contentMaxWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			asideLabelledby: {
+				classPropertyName: "asideLabelledby",
+				publicName: "asideLabelledby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			asideAriaLabel: {
+				classPropertyName: "asideAriaLabel",
+				publicName: "asideAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			busy: {
+				classPropertyName: "busy",
+				publicName: "busy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div [class]=\"pageClasses()\" [style.--lc-app-page-content-max]=\"contentMaxWidth()\">\n  <main class=\"lc-app-page__main\" [id]=\"mainId()\" [attr.aria-busy]=\"busy() ? 'true' : null\">\n    <div class=\"lc-app-page__content\"><ng-content /></div>\n  </main>\n  @if (hasAside()) {\n    <aside\n      class=\"lc-app-page__aside\"\n      [attr.aria-labelledby]=\"asideLabelledby() || null\"\n      [attr.aria-label]=\"asideLabelledby() ? null : asideAriaLabel()\"\n    >\n      <ng-content select=\"[page-aside]\" />\n    </aside>\n  }\n</div>\n",
+		styles: [":host{display:block;min-width:0}.lc-app-page{--_pad-x: var(--lc-app-page-padding-x, 24px);--_pad-top: var(--lc-app-page-padding-top, 24px);--_gap: var(--lc-app-page-gap, 24px);--_aside-width: var(--lc-app-page-aside-width, 360px);display:grid;grid-template-columns:minmax(0,1fr);min-height:100%}.lc-app-page__main{display:block;min-width:0;padding:var(--_pad-top) var(--_pad-x) 16px}.lc-app-page__content{display:flex;flex-direction:column;gap:var(--_gap);max-width:var(--lc-app-page-content-max, 880px);margin-inline:auto}.lc-app-page__aside{display:none}@media(min-width:640px){.lc-app-page{--_pad-x: var(--lc-app-page-padding-x, 32px);--_pad-top: var(--lc-app-page-padding-top, 32px)}}@media(min-width:1024px){.lc-app-page{--_pad-x: var(--lc-app-page-padding-x, 48px);--_pad-top: var(--lc-app-page-padding-top, 48px);--_gap: var(--lc-app-page-gap, 40px)}.lc-app-page__main{padding-bottom:32px}}@media(min-width:1280px){.lc-app-page{--_pad-x: var(--lc-app-page-padding-x, 56px);--_pad-top: var(--lc-app-page-padding-top, 56px)}.lc-app-page--aside{grid-template-columns:minmax(0,1fr) var(--_aside-width)}.lc-app-page__aside{display:block;min-width:0;box-sizing:border-box;padding:max(16px,var(--_pad-top) - 32px) 40px 40px;background:linear-gradient(180deg,var(--color-background-low),transparent);border-left:1px solid var(--color-hairline, var(--color-border));border-image:linear-gradient(180deg,var(--color-hairline, var(--color-border)) 60%,transparent) 1}}@media(min-width:1440px){.lc-app-page{--_pad-x: var(--lc-app-page-padding-x, 72px);--_pad-top: var(--lc-app-page-padding-top, 72px);--_aside-width: var(--lc-app-page-aside-width, 400px)}}@media(min-width:1920px){.lc-app-page{--_pad-x: var(--lc-app-page-padding-x, 96px);--_pad-top: var(--lc-app-page-padding-top, 112px);--_aside-width: var(--lc-app-page-aside-width, 460px)}}@media(forced-colors:active){.lc-app-page__aside{background:none;border-image:none;border-left-color:CanvasText}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AppPageComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-app-page",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div [class]=\"pageClasses()\" [style.--lc-app-page-content-max]=\"contentMaxWidth()\">\n  <main class=\"lc-app-page__main\" [id]=\"mainId()\" [attr.aria-busy]=\"busy() ? 'true' : null\">\n    <div class=\"lc-app-page__content\"><ng-content /></div>\n  </main>\n  @if (hasAside()) {\n    <aside\n      class=\"lc-app-page__aside\"\n      [attr.aria-labelledby]=\"asideLabelledby() || null\"\n      [attr.aria-label]=\"asideLabelledby() ? null : asideAriaLabel()\"\n    >\n      <ng-content select=\"[page-aside]\" />\n    </aside>\n  }\n</div>\n",
+			styles: [":host{display:block;min-width:0}.lc-app-page{--_pad-x: var(--lc-app-page-padding-x, 24px);--_pad-top: var(--lc-app-page-padding-top, 24px);--_gap: var(--lc-app-page-gap, 24px);--_aside-width: var(--lc-app-page-aside-width, 360px);display:grid;grid-template-columns:minmax(0,1fr);min-height:100%}.lc-app-page__main{display:block;min-width:0;padding:var(--_pad-top) var(--_pad-x) 16px}.lc-app-page__content{display:flex;flex-direction:column;gap:var(--_gap);max-width:var(--lc-app-page-content-max, 880px);margin-inline:auto}.lc-app-page__aside{display:none}@media(min-width:640px){.lc-app-page{--_pad-x: var(--lc-app-page-padding-x, 32px);--_pad-top: var(--lc-app-page-padding-top, 32px)}}@media(min-width:1024px){.lc-app-page{--_pad-x: var(--lc-app-page-padding-x, 48px);--_pad-top: var(--lc-app-page-padding-top, 48px);--_gap: var(--lc-app-page-gap, 40px)}.lc-app-page__main{padding-bottom:32px}}@media(min-width:1280px){.lc-app-page{--_pad-x: var(--lc-app-page-padding-x, 56px);--_pad-top: var(--lc-app-page-padding-top, 56px)}.lc-app-page--aside{grid-template-columns:minmax(0,1fr) var(--_aside-width)}.lc-app-page__aside{display:block;min-width:0;box-sizing:border-box;padding:max(16px,var(--_pad-top) - 32px) 40px 40px;background:linear-gradient(180deg,var(--color-background-low),transparent);border-left:1px solid var(--color-hairline, var(--color-border));border-image:linear-gradient(180deg,var(--color-hairline, var(--color-border)) 60%,transparent) 1}}@media(min-width:1440px){.lc-app-page{--_pad-x: var(--lc-app-page-padding-x, 72px);--_pad-top: var(--lc-app-page-padding-top, 72px);--_aside-width: var(--lc-app-page-aside-width, 400px)}}@media(min-width:1920px){.lc-app-page{--_pad-x: var(--lc-app-page-padding-x, 96px);--_pad-top: var(--lc-app-page-padding-top, 112px);--_aside-width: var(--lc-app-page-aside-width, 460px)}}@media(forced-colors:active){.lc-app-page__aside{background:none;border-image:none;border-left-color:CanvasText}}\n"]
+		}]
+	}],
+	propDecorators: {
+		mainId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "mainId",
+				required: false
+			}]
+		}],
+		contentMaxWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentMaxWidth",
+				required: false
+			}]
+		}],
+		asideLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "asideLabelledby",
+				required: false
+			}]
+		}],
+		asideAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "asideAriaLabel",
+				required: false
+			}]
+		}],
+		busy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "busy",
+				required: false
+			}]
+		}]
+	}
+});
+export { AppPageComponent, AppShellComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-app-shell.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-app-shell.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-app-shell.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/app-shell/app-shell.component.ts","../../../../libs/angular-ui-kit/src/lib/app-shell/app-shell.component.html","../../../../libs/angular-ui-kit/src/lib/app-shell/app-page.component.ts","../../../../libs/angular-ui-kit/src/lib/app-shell/app-page.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\n/**\n * App shell: the frame around every page of an app — header, side navigation,\n * page, bottom navigation bar, footer and the horizon — laid out for phones\n * first, with the DOCUMENT scrolling (not an inner container), so the iOS\n * status-bar tap, address-bar collapse and pull-to-refresh keep working.\n *\n * Slots (content projection by attribute):\n * - `[shell-header]` — the `lc-header`; scrolls away with the page. Gets the\n *   top, left and right safe-area insets.\n * - `[shell-nav]` — the docked side navigation (`lc-sidenav mode=\"docked\"\n *   [isOpen]=\"true\" width=\"100%\" [mobileBreakpoint]=\"0\"`), shown from\n *   1024 px in a column of 240 px (248 from 1440, 280 from 1920; override\n *   with `--lc-app-shell-nav-width`) and sticky once the header has gone.\n *   An empty slot takes no column.\n * - default — the page, usually an `lc-app-page` (or a `<router-outlet>`\n *   whose pages use one). It spans to the window's right edge, so a page's\n *   right column docks there.\n * - `[shell-bottom-nav]` — the `lc-bottom-nav`, shown below 1024 px. The shell\n *   reserves its height at the end of the page (16 + 72 + 24 px plus the\n *   safe-area inset; `--lc-app-shell-bottom-clearance`), so it never covers\n *   content. With the horizon, the bar rests on the land instead.\n * - `[shell-footer]` — e.g. a compact `lc-footer`; on the horizon's land when\n *   `horizon` is on, else after the page.\n *\n * `horizon` closes the page with the \"Weite\" horizon (`.lc-horizon` from the\n * kit's styles): full-bleed, below the side navigation and the page, filling\n * the rest of the screen — on Today, the sign-in pages and the shell pages.\n *\n * Needs `<meta name=\"viewport\" content=\"width=device-width, initial-scale=1,\n * viewport-fit=cover\">` for the safe-area insets. Breakpoints are fixed\n * (1024 px side navigation, 1440 / 1920 px widths), so the layout works\n * before JavaScript runs (SSR, prerendering).\n *\n * @example\n * ```html\n * <lc-app-shell [horizon]=\"isToday()\">\n *   <lc-header shell-header variant=\"transparent\" [sticky]=\"false\" … />\n *   <lc-sidenav shell-nav mode=\"docked\" [isOpen]=\"true\" width=\"100%\" [mobileBreakpoint]=\"0\"\n *               variant=\"transparent\" [items]=\"nav\" [activeRoute]=\"url()\" />\n *   <router-outlet />\n *   <lc-bottom-nav shell-bottom-nav variant=\"floating\" [items]=\"nav\" [activeRoute]=\"url()\" />\n * </lc-app-shell>\n * ```\n */\n@Component({\n  selector: 'lc-app-shell',\n  standalone: true,\n  templateUrl: './app-shell.component.html',\n  styleUrl: './app-shell.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AppShellComponent {\n  /**\n   * Close the page with the horizon (`.lc-horizon`): full width, below the\n   * side navigation and the page, filling the rest of the screen; the footer\n   * and the floating bar rest on its land.\n   */\n  readonly horizon = input(false);\n\n  protected readonly shellClasses = computed(() => {\n    const classes = ['lc-app-shell'];\n    if (this.horizon()) classes.push('lc-app-shell--horizon');\n    return classes.join(' ');\n  });\n}\n","<div [class]=\"shellClasses()\">\n  <div class=\"lc-app-shell__header\"><ng-content select=\"[shell-header]\" /></div>\n  <div class=\"lc-app-shell__nav\"><ng-content select=\"[shell-nav]\" /></div>\n  <div class=\"lc-app-shell__body\"><ng-content /></div>\n  @if (horizon()) {\n    <div class=\"lc-app-shell__horizon lc-horizon\"></div>\n  }\n  <div class=\"lc-app-shell__footer\"><ng-content select=\"[shell-footer]\" /></div>\n  <div class=\"lc-app-shell__bottom-nav\"><ng-content select=\"[shell-bottom-nav]\" /></div>\n</div>\n","import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\n\n/**\n * A page inside `lc-app-shell`: the `<main>` landmark with the page's content\n * centred at a reading width, and an optional right column docked to the\n * window's right edge (LK-6).\n *\n * - `<main [id]=\"mainId\">` holds the default slot as a column (24 px apart,\n *   40 px from 1024 px), centred and capped at `contentMaxWidth` (880 px of\n *   content). Side padding 24 · 32 · 48 · 56 · 72 · 96 px at 360 · 640 ·\n *   1024 · 1280 · 1440 · 1920 px.\n * - `[page-aside]` is the right column: an `<aside>` AFTER `<main>` in the DOM,\n *   shown from 1280 px at 360 px (400 from 1440, 460 from 1920; override\n *   with `--lc-app-page-aside-width`), with a tint and a hairline that fade\n *   downwards; inside `lc-app-shell` they start at the top of the window,\n *   behind a transparent header. Below 1280 px it is hidden: show the page's narrow equivalent\n *   inside main instead (e.g. a member row). It renders only with an\n *   accessible name — `asideLabelledby` (the id of its heading) or\n *   `asideAriaLabel`.\n * - `busy` marks the page as loading: `aria-busy=\"true\"` on `<main>` while a\n *   skeleton stands in for the content (AS-12). No visual change.\n *\n * @example\n * ```html\n * <lc-app-page asideLabelledby=\"members-title\">\n *   <lc-page-header … />\n *   <lc-next-step-card … />\n *   <section page-aside>\n *     <h2 id=\"members-title\">Mitglieder</h2>\n *     <lc-list [items]=\"members\" />\n *   </section>\n * </lc-app-page>\n * ```\n */\n@Component({\n  selector: 'lc-app-page',\n  standalone: true,\n  templateUrl: './app-page.component.html',\n  styleUrl: './app-page.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AppPageComponent {\n  /** Id of the `<main>` element (the skip link's target). */\n  readonly mainId = input('main');\n\n  /**\n   * Widest the page content gets (CSS length; `none` for no cap). The default\n   * keeps lines readable on wide screens: the page gains air, not line length.\n   */\n  readonly contentMaxWidth = input('880px');\n\n  /** Id of the heading that names the right column (`aria-labelledby`). */\n  readonly asideLabelledby = input('');\n\n  /** Accessible name of the right column when it has no visible heading. */\n  readonly asideAriaLabel = input('');\n\n  /**\n   * Marks the page as loading: `aria-busy=\"true\"` on its `<main>` while\n   * `true`, no attribute while `false`. Set it while a skeleton stands in for\n   * the content. Screen readers may hold back changes inside a busy region\n   * until it clears, so a loading message that must be heard belongs outside\n   * `<main>` (for example a `.sr-only` `role=\"status\"` next to the page) or is\n   * static text. No visual change.\n   * @default false\n   */\n  readonly busy = input(false);\n\n  /** The right column renders only when it has an accessible name. */\n  protected readonly hasAside = computed(() => !!(this.asideLabelledby() || this.asideAriaLabel()));\n\n  protected readonly pageClasses = computed(() => {\n    const classes = ['lc-app-page'];\n    if (this.hasAside()) classes.push('lc-app-page--aside');\n    return classes.join(' ');\n  });\n}\n","<div [class]=\"pageClasses()\" [style.--lc-app-page-content-max]=\"contentMaxWidth()\">\n  <main class=\"lc-app-page__main\" [id]=\"mainId()\" [attr.aria-busy]=\"busy() ? 'true' : null\">\n    <div class=\"lc-app-page__content\"><ng-content /></div>\n  </main>\n  @if (hasAside()) {\n    <aside\n      class=\"lc-app-page__aside\"\n      [attr.aria-labelledby]=\"asideLabelledby() || null\"\n      [attr.aria-label]=\"asideLabelledby() ? null : asideAriaLabel()\"\n    >\n      <ng-content select=\"[page-aside]\" />\n    </aside>\n  }\n</div>\n"],"mappings":"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"}