@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

package/fesm2022/lifecorner-angular-ui-kit-page-header.mjs

@@ -0,0 +1,266 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+var PageHeaderComponent = class PageHeaderComponent {
+	title = input(void 0, ...ngDevMode ? [{ debugName: "title" }] : /* 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 */ []);
+	subtitle = input(void 0, ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
+	overline = input(void 0, ...ngDevMode ? [{ debugName: "overline" }] : /* istanbul ignore next */ []);
+	level = input(1, ...ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []);
+	size = input("default", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	showDivider = input(false, ...ngDevMode ? [{ debugName: "showDivider" }] : /* istanbul ignore next */ []);
+	badge = input(void 0, ...ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []);
+	noPaddingX = input(false, ...ngDevMode ? [{ debugName: "noPaddingX" }] : /* istanbul ignore next */ []);
+	titleClasses = computed(() => {
+		return ["lc-page-header__title", {
+			title: "lc-title",
+			display: "lc-display",
+			auth: "lc-auth-title"
+		}[this.size()]].filter(Boolean).join(" ");
+	}, ...ngDevMode ? [{ debugName: "titleClasses" }] : /* istanbul ignore next */ []);
+	hostClasses = computed(() => [
+		"lc-page-header",
+		`lc-page-header--size-${this.size()}`,
+		this.showDivider() ? "lc-page-header--divided" : null,
+		this.overline() ? "lc-page-header--has-overline" : null,
+		this.noPaddingX() ? "lc-page-header--flush-x" : null
+	].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PageHeaderComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: PageHeaderComponent,
+		isStandalone: true,
+		selector: "lc-page-header",
+		inputs: {
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				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
+			},
+			subtitle: {
+				classPropertyName: "subtitle",
+				publicName: "subtitle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			overline: {
+				classPropertyName: "overline",
+				publicName: "overline",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			level: {
+				classPropertyName: "level",
+				publicName: "level",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showDivider: {
+				classPropertyName: "showDivider",
+				publicName: "showDivider",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			badge: {
+				classPropertyName: "badge",
+				publicName: "badge",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			noPaddingX: {
+				classPropertyName: "noPaddingX",
+				publicName: "noPaddingX",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "hostClasses()" } },
+		ngImport: i0,
+		template: "@if (true) {\n  <div class=\"lc-page-header__breadcrumbs\">\n    <ng-content select=\"[slot='breadcrumbs']\" />\n  </div>\n\n  <div class=\"lc-page-header__row\">\n    @if (icon()) {\n      <div\n        class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__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=\"lc-page-header__titles\">\n      <div class=\"lc-page-header__title-row\">\n        @if (title()) {\n          <!-- One projection slot for the suffix: a slot inside a non-rendered\n               @switch branch would swallow it for levels 2 and 3. -->\n          <ng-template #titleSuffix><ng-content select=\"[slot='title-suffix']\" /></ng-template>\n          @switch (level()) {\n            @case (1) {\n              <h1 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h1>\n            }\n            @case (2) {\n              <h2 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h2>\n            }\n            @case (3) {\n              <h3 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h3>\n            }\n          }\n          <!-- The overline follows the heading in the DOM (read after it) and\n               is shown above it (order: -1 and a full line in the wrapping row). -->\n          @if (overline()) {\n            <p class=\"lc-page-header__overline lc-overline\">{{ overline() }}</p>\n          }\n        }\n\n        <div class=\"lc-page-header__actions\">\n          <ng-content select=\"[slot='actions']\" />\n        </div>\n      </div>\n\n      @if (subtitle()) {\n        <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-page-header__meta\">\n    <ng-content select=\"[slot='meta']\" />\n  </div>\n\n  <div class=\"lc-page-header__body\">\n    <ng-content />\n  </div>\n}\n",
+		styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-md, 1rem);min-width:0}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;hyphens:var(--lc-page-header-title-hyphens, auto);overflow-wrap:break-word}.lc-page-header__subtitle{margin:0;display:var(--lc-page-header-subtitle-display, -webkit-box);-webkit-box-orient:vertical;-webkit-line-clamp:var(--lc-page-header-subtitle-line-clamp, none);overflow:hidden;font-family:var(--font-family-sans, inherit);color:var(--lc-page-header-subtitle-fg, var(--color-text-secondary, var(--color-neutral-600, #666)));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__overline{order:-1;flex:1 0 100%;margin:0;min-width:0;font-family:var(--font-family-sans, inherit);font-size:var(--font-size-overline, .8125rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-overline, 1.3);letter-spacing:var(--letter-spacing-overline, .12em);text-transform:uppercase;color:var(--color-overline, var(--color-primary-700));overflow-wrap:break-word}.lc-page-header--has-overline .lc-page-header__title-row{row-gap:.75rem}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end;margin-inline-start:auto}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-title .lc-page-header__title{font-size:var(--font-size-title, 2rem);line-height:var(--line-height-title, 1.08);letter-spacing:var(--letter-spacing-title, -.03em)}.lc-page-header--size-title .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-display .lc-page-header__title{font-size:var(--font-size-display, 2.5rem);line-height:var(--line-height-display, 1.05);letter-spacing:var(--letter-spacing-display, -.035em)}.lc-page-header--size-display .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-auth .lc-page-header__title{font-size:var(--font-size-auth-title, 1.875rem);line-height:var(--line-height-auth-title, 1.12);letter-spacing:var(--letter-spacing-auth-title, -.03em)}.lc-page-header--size-auth .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"],
+		dependencies: [{
+			kind: "component",
+			type: IconComponent,
+			selector: "lc-icon",
+			inputs: [
+				"name",
+				"variant",
+				"size",
+				"color",
+				"ariaLabel",
+				"decorative",
+				"strict"
+			]
+		}, {
+			kind: "directive",
+			type: NgTemplateOutlet,
+			selector: "[ngTemplateOutlet]",
+			inputs: [
+				"ngTemplateOutletContext",
+				"ngTemplateOutlet",
+				"ngTemplateOutletInjector"
+			]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PageHeaderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-page-header",
+			standalone: true,
+			imports: [IconComponent, NgTemplateOutlet],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			host: { "[class]": "hostClasses()" },
+			template: "@if (true) {\n  <div class=\"lc-page-header__breadcrumbs\">\n    <ng-content select=\"[slot='breadcrumbs']\" />\n  </div>\n\n  <div class=\"lc-page-header__row\">\n    @if (icon()) {\n      <div\n        class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__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=\"lc-page-header__titles\">\n      <div class=\"lc-page-header__title-row\">\n        @if (title()) {\n          <!-- One projection slot for the suffix: a slot inside a non-rendered\n               @switch branch would swallow it for levels 2 and 3. -->\n          <ng-template #titleSuffix><ng-content select=\"[slot='title-suffix']\" /></ng-template>\n          @switch (level()) {\n            @case (1) {\n              <h1 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h1>\n            }\n            @case (2) {\n              <h2 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h2>\n            }\n            @case (3) {\n              <h3 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h3>\n            }\n          }\n          <!-- The overline follows the heading in the DOM (read after it) and\n               is shown above it (order: -1 and a full line in the wrapping row). -->\n          @if (overline()) {\n            <p class=\"lc-page-header__overline lc-overline\">{{ overline() }}</p>\n          }\n        }\n\n        <div class=\"lc-page-header__actions\">\n          <ng-content select=\"[slot='actions']\" />\n        </div>\n      </div>\n\n      @if (subtitle()) {\n        <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-page-header__meta\">\n    <ng-content select=\"[slot='meta']\" />\n  </div>\n\n  <div class=\"lc-page-header__body\">\n    <ng-content />\n  </div>\n}\n",
+			styles: [".lc-page-header{display:flex;flex-direction:column;gap:var(--lc-density-gap-md, 1rem);padding-block:var(--lc-density-padding-md, 1.5rem);padding-inline:var(--lc-density-padding-md, 1rem);box-sizing:border-box;width:100%;min-width:0}@media(min-width:640px){.lc-page-header{padding-inline:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){.lc-page-header{padding-inline:var(--lc-density-padding-xl, 2rem)}}.lc-page-header--flush-x{padding-inline:0}.lc-page-header__breadcrumbs,.lc-page-header__body{display:flex;flex-direction:column;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__meta{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0}.lc-page-header__breadcrumbs:empty,.lc-page-header__meta:empty,.lc-page-header__body:empty,.lc-page-header__actions:empty{display:none}.lc-page-header__row{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--lc-density-gap-md, 1rem);flex-wrap:wrap;min-width:0}.lc-page-header__titles{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, .25rem);min-width:0;flex:1 1 auto}.lc-page-header__title-row{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:var(--lc-density-gap-md, 1rem);min-width:0}.lc-page-header__icon{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:var(--border-radius-md)}.lc-page-header__icon--size-sm{width:2rem;height:2rem;border-radius:var(--border-radius-sm)}.lc-page-header__icon--brand{background-image:var(--gradient-brand-tile);color:var(--color-on-primary, #fff);box-shadow:var(--shadow-brand-glow)}.lc-page-header__icon--subtle{background-color:#20849724;color:var(--color-primary-500);border:1px solid var(--color-border-strong)}.lc-page-header__title{margin:0;font-family:var(--font-family-sans, inherit);font-weight:var(--font-weight-bold, 700);color:var(--color-text-primary, var(--color-neutral-900, #111));line-height:var(--line-height-tight, 1.2);display:inline-flex;align-items:center;gap:var(--lc-density-gap-sm, .5rem);min-width:0;hyphens:var(--lc-page-header-title-hyphens, auto);overflow-wrap:break-word}.lc-page-header__subtitle{margin:0;display:var(--lc-page-header-subtitle-display, -webkit-box);-webkit-box-orient:vertical;-webkit-line-clamp:var(--lc-page-header-subtitle-line-clamp, none);overflow:hidden;font-family:var(--font-family-sans, inherit);color:var(--lc-page-header-subtitle-fg, var(--color-text-secondary, var(--color-neutral-600, #666)));line-height:var(--line-height-normal, 1.5)}.lc-page-header__title-suffix{display:inline-flex;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem)}.lc-page-header__title-suffix:empty{display:none}.lc-page-header__overline{order:-1;flex:1 0 100%;margin:0;min-width:0;font-family:var(--font-family-sans, inherit);font-size:var(--font-size-overline, .8125rem);font-weight:var(--font-weight-bold, 700);line-height:var(--line-height-overline, 1.3);letter-spacing:var(--letter-spacing-overline, .12em);text-transform:uppercase;color:var(--color-overline, var(--color-primary-700));overflow-wrap:break-word}.lc-page-header--has-overline .lc-page-header__title-row{row-gap:.75rem}.lc-page-header__badge{display:inline-flex;align-items:center;padding:.125rem .5rem;border-radius:var(--border-radius-full, 999px);background:var(--color-primary-100, #e0f2fe);color:var(--color-primary-700, #0369a1);font-size:var(--font-size-xs, .75rem);font-weight:var(--font-weight-semibold, 600);line-height:1.4;text-transform:uppercase;letter-spacing:.04em}.lc-page-header__actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--lc-density-gap-sm, .5rem);flex:0 0 auto;justify-content:flex-end;margin-inline-start:auto}.lc-page-header--size-compact{--lc-density-gap-md: .5rem;--lc-density-gap-sm: .375rem;--lc-density-padding-md: .75rem}.lc-page-header--size-compact .lc-page-header__title{font-size:var(--font-size-lg, 1.125rem)}.lc-page-header--size-compact .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-sm, .875rem))}.lc-page-header--size-default .lc-page-header__title{font-size:var(--font-size-2xl, 1.5rem)}.lc-page-header--size-default .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--size-comfortable{--lc-density-gap-md: 1.5rem;--lc-density-padding-md: 2.5rem}.lc-page-header--size-comfortable .lc-page-header__title{font-size:var(--font-size-3xl, 1.875rem)}.lc-page-header--size-comfortable .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-title .lc-page-header__title{font-size:var(--font-size-title, 2rem);line-height:var(--line-height-title, 1.08);letter-spacing:var(--letter-spacing-title, -.03em)}.lc-page-header--size-title .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-display .lc-page-header__title{font-size:var(--font-size-display, 2.5rem);line-height:var(--line-height-display, 1.05);letter-spacing:var(--letter-spacing-display, -.035em)}.lc-page-header--size-display .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-lg, 1.125rem))}.lc-page-header--size-auth .lc-page-header__title{font-size:var(--font-size-auth-title, 1.875rem);line-height:var(--line-height-auth-title, 1.12);letter-spacing:var(--letter-spacing-auth-title, -.03em)}.lc-page-header--size-auth .lc-page-header__subtitle{font-size:var(--lc-page-header-subtitle-font-size, var(--font-size-base, 1rem))}.lc-page-header--divided{border-bottom:1px solid var(--color-border, var(--color-neutral-200, #e5e5e5))}\n"]
+		}]
+	}],
+	propDecorators: {
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				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
+			}]
+		}],
+		subtitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "subtitle",
+				required: false
+			}]
+		}],
+		overline: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "overline",
+				required: false
+			}]
+		}],
+		level: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "level",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		showDivider: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showDivider",
+				required: false
+			}]
+		}],
+		badge: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "badge",
+				required: false
+			}]
+		}],
+		noPaddingX: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "noPaddingX",
+				required: false
+			}]
+		}]
+	}
+});
+export { PageHeaderComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-page-header.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-page-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-page-header.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/page-header/page-header.component.ts","../../../../libs/angular-ui-kit/src/lib/page-header/page-header.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  input,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\n\n/**\n * Visual size of the page header.\n * - `compact`     — dense data-tool pages and section headings (18 px)\n * - `default`     — standard app pages (24 px)\n * - `comfortable` — landing-page hero feel (30 px)\n * - `title`       — the \"Weite\" page title: 32 px on phones, 40 / 44 / 48 px\n *                   from 1024 / 1440 / 1920 px (`--font-size-title`)\n * - `display`     — the display greeting: 40 px on phones, 52 / 56 / 60 / 72 px\n *                   from 1024 / 1280 / 1440 / 1920 px (`--font-size-display`)\n * - `auth`        — the sign-in and registration `<h1>`: 30 px, 34 px from\n *                   1024 px (`--font-size-auth-title`)\n */\nexport type PageHeaderSize = 'compact' | 'default' | 'comfortable' | 'title' | 'display' | 'auth';\n\n/**\n * Page header — top-of-page title block with optional subtitle,\n * breadcrumbs, badge, description and an actions area.\n *\n * Density-aware, slot-based, no Tailwind. Drop it at the top of any route\n * to get consistent rhythm between title, metadata and content below.\n *\n * Slots:\n *  - `[slot=\"breadcrumbs\"]`   — rendered above the title (e.g. `<lc-breadcrumbs>`)\n *  - `[slot=\"title-suffix\"]`  — inline beside the title, after the optional `badge`\n *                               (for one or more status chips/badges)\n *  - `[slot=\"actions\"]`       — right-aligned actions (buttons, menus)\n *  - `[slot=\"meta\"]`          — secondary metadata under the title row (chips, tags)\n *  - default                  — short header-internal description text\n *\n * `overline` renders a short uppercase label (a date, a section) **above** the\n * title but **after** it in the DOM, so a screen reader that lands on the\n * heading reads the title first and the overline next.\n *\n * Full-blown navigation primitives like `lc-tabs` — which render both the tab\n * strip **and** their panel content — belong **below** the page header, never\n * inside it. The header stays focused on page identity.\n *\n * @example\n * ```html\n * <lc-page-header\n *   title=\"Reports\"\n *   subtitle=\"Compare period-over-period metrics\"\n *   [showDivider]=\"true\"\n * >\n *   <lc-breadcrumbs slot=\"breadcrumbs\" [items]=\"crumbs\" />\n *   <lc-chip slot=\"title-suffix\" size=\"sm\">Beta</lc-chip>\n *   <lc-chip slot=\"title-suffix\" size=\"sm\" variant=\"success\">Ready</lc-chip>\n *   <lc-button slot=\"actions\" variant=\"primary\">New report</lc-button>\n *   <lc-chip slot=\"meta\">12 active</lc-chip>\n * </lc-page-header>\n * ```\n */\n@Component({\n  selector: 'lc-page-header',\n  standalone: true,\n  imports: [IconComponent, NgTemplateOutlet],\n  templateUrl: './page-header.component.html',\n  styleUrl: './page-header.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class PageHeaderComponent {\n  /** Main heading text. */\n  title = input<string | undefined>(undefined);\n\n  /**\n   * Optional leading icon (Tabler icon name) rendered as a brand tile to the\n   * left of the title block, mirroring `lc-card`'s header icon. Purely additive.\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   * @default 'md'\n   */\n  iconSize = input<'sm' | 'md'>('md');\n\n  /** Short supporting line below the title. */\n  subtitle = input<string | undefined>(undefined);\n\n  /**\n   * Short label shown above the title (e.g. the date on a daily view, a\n   * section name): uppercase through CSS (write it in sentence case), bold,\n   * letter spacing 0.12 em, in `--color-overline`; 13 px on phones, 14 / 15 /\n   * 16 px from 1024 / 1440 / 1920 px. Rendered right after the heading in the\n   * DOM, so the heading is read first.\n   */\n  overline = input<string | undefined>(undefined);\n\n  /**\n   * Heading level for the title — affects semantics, not size.\n   * @default 1\n   */\n  level = input<1 | 2 | 3>(1);\n\n  /**\n   * Visual size of the page header.\n   * - `compact`     — dense data-tool pages and section headings (18 px)\n   * - `default`     — standard app pages (24 px)\n   * - `comfortable` — landing-page hero feel (30 px)\n   * - `title`       — page title on the responsive title scale, 32–48 px\n   * - `display`     — the display greeting, 40–72 px, weight 700\n   * - `auth`        — the sign-in and registration `<h1>`, 30 / 34 px\n   * @default 'default'\n   */\n  size = input<PageHeaderSize>('default');\n\n  /**\n   * Whether to render a divider line below the header.\n   * @default false\n   */\n  showDivider = input<boolean>(false);\n\n  /** Optional badge text next to the title (e.g. `Beta`). */\n  badge = input<string | undefined>(undefined);\n\n  /**\n   * Remove the header's own horizontal padding so its content sits flush with\n   * the container edge. Use when the header is already inside a padded wrapper\n   * (e.g. `<lc-container>`) and you'd otherwise get a double inset. The divider,\n   * when shown, always spans the full width regardless of this setting.\n   * @default false\n   */\n  noPaddingX = input<boolean>(false);\n\n  /**\n   * Classes of the heading: the global type-scale class (`lc-title`,\n   * `lc-display`, `lc-auth-title`) joins the component class for the 3.3 sizes.\n   */\n  protected titleClasses = computed(() => {\n    const scale: Partial<Record<PageHeaderSize, string>> = {\n      title: 'lc-title',\n      display: 'lc-display',\n      auth: 'lc-auth-title',\n    };\n    return ['lc-page-header__title', scale[this.size()]].filter(Boolean).join(' ');\n  });\n\n  protected hostClasses = computed(() =>\n    [\n      'lc-page-header',\n      `lc-page-header--size-${this.size()}`,\n      this.showDivider() ? 'lc-page-header--divided' : null,\n      this.overline() ? 'lc-page-header--has-overline' : null,\n      this.noPaddingX() ? 'lc-page-header--flush-x' : null,\n    ]\n      .filter(Boolean)\n      .join(' '),\n  );\n}\n","@if (true) {\n  <div class=\"lc-page-header__breadcrumbs\">\n    <ng-content select=\"[slot='breadcrumbs']\" />\n  </div>\n\n  <div class=\"lc-page-header__row\">\n    @if (icon()) {\n      <div\n        class=\"lc-page-header__icon lc-page-header__icon--{{ iconVariant() }} lc-page-header__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=\"lc-page-header__titles\">\n      <div class=\"lc-page-header__title-row\">\n        @if (title()) {\n          <!-- One projection slot for the suffix: a slot inside a non-rendered\n               @switch branch would swallow it for levels 2 and 3. -->\n          <ng-template #titleSuffix><ng-content select=\"[slot='title-suffix']\" /></ng-template>\n          @switch (level()) {\n            @case (1) {\n              <h1 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h1>\n            }\n            @case (2) {\n              <h2 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h2>\n            }\n            @case (3) {\n              <h3 [class]=\"titleClasses()\">\n                {{ title() }}\n                @if (badge()) {\n                  <span class=\"lc-page-header__badge\">{{ badge() }}</span>\n                }\n                <span class=\"lc-page-header__title-suffix\">\n                  <ng-container [ngTemplateOutlet]=\"titleSuffix\" />\n                </span>\n              </h3>\n            }\n          }\n          <!-- The overline follows the heading in the DOM (read after it) and\n               is shown above it (order: -1 and a full line in the wrapping row). -->\n          @if (overline()) {\n            <p class=\"lc-page-header__overline lc-overline\">{{ overline() }}</p>\n          }\n        }\n\n        <div class=\"lc-page-header__actions\">\n          <ng-content select=\"[slot='actions']\" />\n        </div>\n      </div>\n\n      @if (subtitle()) {\n        <p class=\"lc-page-header__subtitle\">{{ subtitle() }}</p>\n      }\n    </div>\n  </div>\n\n  <div class=\"lc-page-header__meta\">\n    <ng-content select=\"[slot='meta']\" />\n  </div>\n\n  <div class=\"lc-page-header__body\">\n    <ng-content />\n  </div>\n}\n"],"mappings":"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"}

package/fesm2022/lifecorner-angular-ui-kit-page-layout.mjs

@@ -0,0 +1,127 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, HostBinding, computed, input } from "@angular/core";
+var PageLayoutComponent = class PageLayoutComponent {
+	fill = input("screen", ...ngDevMode ? [{ debugName: "fill" }] : /* istanbul ignore next */ []);
+	scrollBody = input(true, ...ngDevMode ? [{ debugName: "scrollBody" }] : /* istanbul ignore next */ []);
+	padded = input(false, ...ngDevMode ? [{ debugName: "padded" }] : /* istanbul ignore next */ []);
+	contentWidth = input("capped", ...ngDevMode ? [{ debugName: "contentWidth" }] : /* istanbul ignore next */ []);
+	get hostClasses() {
+		return this.classes();
+	}
+	classes = computed(() => {
+		const classes = ["lc-page-layout"];
+		classes.push(`fill-${this.fill()}`);
+		if (this.scrollBody()) classes.push("scroll-body");
+		if (this.padded()) classes.push("padded");
+		if (this.contentWidth() === "capped") classes.push("content-capped");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: PageLayoutComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: PageLayoutComponent,
+		isStandalone: true,
+		selector: "lc-page-layout",
+		inputs: {
+			fill: {
+				classPropertyName: "fill",
+				publicName: "fill",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			scrollBody: {
+				classPropertyName: "scrollBody",
+				publicName: "scrollBody",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			padded: {
+				classPropertyName: "padded",
+				publicName: "padded",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			contentWidth: {
+				classPropertyName: "contentWidth",
+				publicName: "contentWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: { "class": "this.hostClasses" } },
+		ngImport: i0,
+		template: "<div class=\"lc-page-layout__header\">\n  <ng-content select=\"[layout-header]\"></ng-content>\n</div>\n\n<div class=\"lc-page-layout__body\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"lc-page-layout__footer\">\n  <ng-content select=\"[layout-footer]\"></ng-content>\n</div>\n",
+		styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;overflow:hidden;box-sizing:border-box}:host(.fill-screen){height:100dvh}:host(.fill-parent){height:100%}.lc-page-layout__header,.lc-page-layout__footer{flex:0 0 auto;min-width:0}.lc-page-layout__body{flex:1 1 auto;min-height:0;min-width:0}:host(.scroll-body) .lc-page-layout__body{overflow:auto}:host(.content-capped) .lc-page-layout__header,:host(.content-capped) .lc-page-layout__body,:host(.content-capped) .lc-page-layout__footer{max-width:var(--lc-content-max-width, 1536px);margin-inline:auto;width:100%}:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-xl, 2rem)}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: PageLayoutComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-page-layout",
+			standalone: true,
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div class=\"lc-page-layout__header\">\n  <ng-content select=\"[layout-header]\"></ng-content>\n</div>\n\n<div class=\"lc-page-layout__body\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"lc-page-layout__footer\">\n  <ng-content select=\"[layout-footer]\"></ng-content>\n</div>\n",
+			styles: [":host{display:flex;flex-direction:column;width:100%;min-height:0;overflow:hidden;box-sizing:border-box}:host(.fill-screen){height:100dvh}:host(.fill-parent){height:100%}.lc-page-layout__header,.lc-page-layout__footer{flex:0 0 auto;min-width:0}.lc-page-layout__body{flex:1 1 auto;min-height:0;min-width:0}:host(.scroll-body) .lc-page-layout__body{overflow:auto}:host(.content-capped) .lc-page-layout__header,:host(.content-capped) .lc-page-layout__body,:host(.content-capped) .lc-page-layout__footer{max-width:var(--lc-content-max-width, 1536px);margin-inline:auto;width:100%}:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-md, 1rem)}@media(min-width:640px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-lg, 1.5rem)}}@media(min-width:1024px){:host(.padded) .lc-page-layout__body{padding:var(--lc-density-padding-xl, 2rem)}}\n"]
+		}]
+	}],
+	propDecorators: {
+		fill: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fill",
+				required: false
+			}]
+		}],
+		scrollBody: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "scrollBody",
+				required: false
+			}]
+		}],
+		padded: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "padded",
+				required: false
+			}]
+		}],
+		contentWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentWidth",
+				required: false
+			}]
+		}],
+		hostClasses: [{
+			type: HostBinding,
+			args: ["class"]
+		}]
+	}
+});
+export { PageLayoutComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-page-layout.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-page-layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-page-layout.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/page-layout/page-layout.component.ts","../../../../libs/angular-ui-kit/src/lib/page-layout/page-layout.component.html"],"sourcesContent":["import { Component, input, computed, HostBinding, ChangeDetectionStrategy } from '@angular/core';\n\n/** Where the layout takes its height from. */\nexport type PageLayoutFill = 'screen' | 'parent';\n\n/** How wide the layout lets its content grow. */\nexport type PageLayoutContentWidth = 'capped' | 'full';\n\n@Component({\n  selector: 'lc-page-layout',\n  standalone: true,\n  imports: [],\n  templateUrl: './page-layout.component.html',\n  styleUrls: ['./page-layout.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Full-height page shell that pins a header (and optional footer) while the\n * body fills the remaining space and scrolls *internally* — the page itself\n * never scrolls.\n *\n * It encapsulates the \"height chain\" that this kind of layout needs: a flex\n * column with `height: 100dvh`/`100%`, `overflow: hidden` on the shell, and —\n * crucially — `min-height: 0` on the body so it can shrink below its content\n * and become the scroll container instead of pushing the page taller.\n *\n * Content is projected into three slots:\n * - `[layout-header]` — pinned to the top (e.g. `<lc-page-header>`).\n * - default slot — the body; fills the remaining height and scrolls.\n * - `[layout-footer]` — pinned to the bottom (e.g. a chat input bar).\n *\n * Children that bring their own internal scroll + sticky footer (such as\n * `<lc-chat>`) just need `height: 100%`, which they get for free from the body.\n *\n * @example Generic long content under a fixed header\n * ```html\n * <lc-page-layout padded>\n *   <lc-page-header layout-header title=\"Reports\" />\n *   <p>…lots of content that scrolls under the header…</p>\n * </lc-page-layout>\n * ```\n *\n * @example Chat at 100% height, input pinned at the bottom\n * ```html\n * <lc-page-layout>\n *   <lc-page-header layout-header title=\"Assistant\" />\n *   <lc-chat [messages]=\"messages\" [showHeader]=\"false\" (messageSend)=\"onSend($event)\" />\n * </lc-page-layout>\n * ```\n *\n * @example Nested below an app shell with topbar / sidenav\n * ```html\n * <!-- every ancestor must also pass the height down (height:100% / flex:1) -->\n * <lc-page-layout fill=\"parent\"> … </lc-page-layout>\n * ```\n */\nexport class PageLayoutComponent {\n  /**\n   * Source of the layout's height.\n   * - `'screen'` (default): `100dvh` — fills the viewport. Use as the page root.\n   * - `'parent'`: `100%` — fills its parent. Use when nested below an app shell;\n   *   every ancestor must also carry the height down.\n   */\n  fill = input<PageLayoutFill>('screen');\n\n  /**\n   * Whether the body region scrolls internally. Defaults to `true`, which is\n   * correct both for long page content and for children like `<lc-chat>` that\n   * fit the body exactly (no scrollbar appears in that case). Set `false` for\n   * full-bleed bodies that must never scroll (e.g. a map).\n   */\n  scrollBody = input<boolean>(true);\n\n  /** Add density-aware padding to the body. Off by default so embedded components keep their own padding. */\n  padded = input<boolean>(false);\n\n  /**\n   * How wide content may grow on very large monitors.\n   * - `'capped'` (default): header, body and footer are capped at\n   *   `--lc-content-max-width` and centred, so content doesn't stretch edge to\n   *   edge on wide/ultrawide displays. All three regions share the cap, so the\n   *   page title stays aligned with the body beneath it.\n   * - `'full'`: no cap — content spans the whole shell. Use for full-bleed\n   *   bodies (maps, boards, canvases) that should use every pixel.\n   *\n   * Override the width itself — globally or per subtree — via the\n   * `--lc-content-max-width` custom property.\n   */\n  contentWidth = input<PageLayoutContentWidth>('capped');\n\n  @HostBinding('class')\n  get hostClasses(): string {\n    return this.classes();\n  }\n\n  classes = computed(() => {\n    const classes: string[] = ['lc-page-layout'];\n    classes.push(`fill-${this.fill()}`);\n    if (this.scrollBody()) classes.push('scroll-body');\n    if (this.padded()) classes.push('padded');\n    if (this.contentWidth() === 'capped') classes.push('content-capped');\n    return classes.join(' ');\n  });\n}\n","<div class=\"lc-page-layout__header\">\n  <ng-content select=\"[layout-header]\"></ng-content>\n</div>\n\n<div class=\"lc-page-layout__body\">\n  <ng-content></ng-content>\n</div>\n\n<div class=\"lc-page-layout__footer\">\n  <ng-content select=\"[layout-footer]\"></ng-content>\n</div>\n"],"mappings":";;AAwDA,IAAa,sBAAb,MAAa,oBAAmB;CAO9B,OAAO,MAAsB,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAQtC,aAAa,MAAe,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAGjC,SAAS,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAc9B,eAAe,MAA8B,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEtD,IACI,cAAW;EACb,OAAO,KAAK,QAAO;CACrB;CAEA,UAAU,eAAc;EACtB,MAAM,UAAoB,CAAC,gBAAgB;EAC3C,QAAQ,KAAK,QAAQ,KAAK,KAAI,GAAI;EAClC,IAAI,KAAK,WAAU,GAAI,QAAQ,KAAK,aAAa;EACjD,IAAI,KAAK,OAAM,GAAI,QAAQ,KAAK,QAAQ;EACxC,IAAI,KAAK,aAAY,MAAO,UAAU,QAAQ,KAAK,gBAAgB;EACnE,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CA9CS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAmB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAnB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAmB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,QAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,MAAA,EAAA,YAAA,EAAA,SAAA,mBAAA,EAAA;EAAA,UAAA;EAAA,UCxDhC;EAWA,QAAA,CAAA,w2BAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AD6Ca,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAmB,YAAA,CAAA;EAhD/B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,YACd;GAAI,SACP,CAAA;GAAE,iBAGM,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,w2BAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4E9C,MAAA;GAAY,MAAA,CAAA,OAAO"}