@lifecorner/angular-ui-kit 3.4.1 → 3.5.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-header.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/header/header.component.ts","../../../../libs/angular-ui-kit/src/lib/header/header.component.html"],"sourcesContent":["import {\n  Component,\n  ElementRef,\n  Injector,\n  input,\n  output,\n  signal,\n  computed,\n  inject,\n  viewChild,\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { ButtonComponent } from '@lifecorner/angular-ui-kit/button';\nimport { LogoComponent } from '@lifecorner/angular-ui-kit/logo';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { AvatarColor, AvatarComponent } from '@lifecorner/angular-ui-kit/avatar';\nimport { MenuComponent, MenuItem } from '@lifecorner/angular-ui-kit/menu';\nimport { ThemeService } from '@lifecorner/angular-ui-kit/theme';\n\n/** A link in the header's main navigation (`navItems`). */\nexport interface HeaderNavItem {\n  /** Visible link text. */\n  label: string;\n  /** Plain URL — rendered as a native `href`, no router involved. */\n  href: string;\n  /** Marks the page the visitor is on (`aria-current=\"page\"` + underline). */\n  current?: boolean;\n}\n\n/** Element used for the header title (`titleTag`). */\nexport type HeaderTitleTag = 'h1' | 'h2' | 'h3' | 'p' | 'span' | 'div';\n\n/**\n * Surface of the header: `default` is the bar on `--color-surface` with a\n * bottom border; `transparent` has no background and no border, for a header\n * that sits on the page (\"Weite\").\n */\nexport type HeaderVariant = 'default' | 'transparent';\n\n/**\n * What the account-menu button shows: `icon` (a user icon and a chevron) or\n * `avatar` (the person's initials avatar, `userName`, `userAvatarSrc`,\n * `userAvatarColor`, in a 48 px round button).\n */\nexport type HeaderUserMenuTrigger = 'icon' | 'avatar';\n\n/**\n * AppHeaderComponent - Global application header for the LifeCorner shell\n *\n * Features:\n * - Clickable logo for home navigation\n * - Optional title and subtitle display\n * - User profile dropdown with avatar, name, email, optional Profile link, and Logout\n * - Optional theme toggle button in header. By default the button toggles the\n *   `ThemeService` itself and additionally emits `themeToggleClick`, so the\n *   handler must NOT toggle again (that would undo the switch). To own the\n *   toggling in the app, set `[autoToggleTheme]=\"false\"` and toggle in the\n *   handler.\n * - Hamburger menu toggle for mobile sidebar; bind `sidenavOpen` (and\n *   `sidenavId`) so the toggle exposes `aria-expanded` / `aria-controls`.\n * - OnPush change detection for performance\n *\n * Public, prerendered sites (no router, no JavaScript needed):\n * - `homeHref` makes the brand a plain link (instead of `routerLink=\"/\"`).\n * - `navItems` render a labelled main navigation (`<nav aria-label><ul>` with\n *   `aria-current=\"page\"` on the current item); below 1024 px it moves to a\n *   second row and wraps.\n * - `[slot='end']` takes content at the end of the first row (e.g. a language\n *   link), `showUserMenu` hides the account menu, `titleTag` picks the title\n *   element (the page keeps its own `<h1>`), `sticky` can be switched off.\n * App shell (\"Weite\", kit 3.3):\n * - `variant=\"transparent\"`: no background and no border, the header sits on\n *   the page (pair it with `[sticky]=\"false\"`, a header without a surface\n *   cannot stay over scrolling text).\n * - `userMenuTrigger=\"avatar\"`: the account button is the person's initials\n *   avatar (`userAvatarColor` for the member colour, `userAvatarSrc` for a\n *   photo) in a 48 px round button; the icon trigger is 44 px high in every\n *   density.\n * - The subtitle (e.g. a household name) stays on one line and ends with \"…\";\n *   the full text is its `title` and stays in the accessible text. It is shown\n *   as typed (no uppercase).\n * - The account menu is at most `min(18rem, 100vw − 2rem)` wide; the name and\n *   email in its header wrap instead of being cut.\n * - Every built-in label is an input (`homeAriaLabel`, `hamburgerAriaLabel`,\n *   `userMenuAriaLabel`, `navAriaLabel`, `profileLabel`, `logoutLabel`,\n *   `themeToDarkAriaLabel`, `themeToLightAriaLabel`, `contextAriaLabel`);\n *   the defaults stay English.\n * - The `ThemeService` (which persists to localStorage) is only created when\n *   the theme button is shown.\n *\n * @example\n * ```html\n * <lc-header\n *   [logo]=\"'/assets/logo.svg'\"\n *   [title]=\"'LifeCorner'\"\n *   [subtitle]=\"'User Profile'\"\n *   [userName]=\"'John Doe'\"\n *   [userEmail]=\"'user@example.com'\"\n *   [showHamburger]=\"true\"\n *   [sidenavOpen]=\"sidenavOpen\"\n *   sidenavId=\"app-sidenav\"\n *   [showThemeButton]=\"true\"\n *   [showProfileMenuItem]=\"true\"\n *   (hamburgerClick)=\"toggleSidebar()\"\n *   (themeToggleClick)=\"trackThemeToggle()\"\n *   (profileClick)=\"navigateToProfile()\"\n *   (logoutClick)=\"handleLogout()\"\n * />\n *\n * <!-- App-controlled theme: the header only reports the click -->\n * <lc-header\n *   [showThemeButton]=\"true\"\n *   [autoToggleTheme]=\"false\"\n *   (themeToggleClick)=\"toggleTheme()\"\n * />\n *\n * <!-- Public site: plain links, labelled nav, language link at the end -->\n * <lc-header\n *   size=\"sm\"\n *   [sticky]=\"false\"\n *   [showUserMenu]=\"false\"\n *   homeHref=\"/de/\"\n *   homeAriaLabel=\"Produkt – Startseite\"\n *   navAriaLabel=\"Hauptnavigation\"\n *   [navItems]=\"[\n *     { label: 'Sicherheit', href: '/de/sicherheit', current: true },\n *     { label: 'Roadmap', href: '/de/roadmap' }\n *   ]\"\n * >\n *   <a slot=\"end\" lcButton variant=\"ghost\" href=\"/en/security\" hreflang=\"en\" lang=\"en\">English</a>\n * </lc-header>\n * ```\n */\n@Component({\n  selector: 'lc-header',\n  standalone: true,\n  imports: [\n    NgTemplateOutlet,\n    RouterModule,\n    ButtonComponent,\n    LogoComponent,\n    IconComponent,\n    AvatarComponent,\n    MenuComponent,\n  ],\n  templateUrl: './header.component.html',\n  styleUrl: './header.component.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-header-host',\n  },\n})\nexport class HeaderComponent {\n  readonly theme = input<'light' | 'dark' | 'auto'>('auto');\n  readonly logo = input('');\n  /**\n   * Render the brand block. On its own this shows the emblem; with `logo` set\n   * it shows the full lockup. (It used to additionally require `logo` or\n   * `title`, so `showLogo` alone rendered an empty 0px-wide brand area with no\n   * error — an app could end up with no branding at all and no clue why.)\n   */\n  readonly showLogo = input(true);\n  /** Custom URL for the full brand logo (forwarded to inner `<lc-logo>`). */\n  readonly logoSrc = input('');\n  /** Custom URL for the emblem-only brand logo. */\n  readonly logoEmblemSrc = input('');\n  /** Optional dark-theme URL for the full brand logo. */\n  readonly logoDarkSrc = input('');\n  /** Optional dark-theme URL for the emblem-only brand logo. */\n  readonly logoDarkEmblemSrc = input('');\n  /** Alt text for the brand logo (forwarded to inner `<lc-logo>`). */\n  readonly logoAlt = input('');\n  /** Size of the brand logo (forwarded to inner `<lc-logo>`). Defaults to `md`. */\n  readonly logoSize = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n  /**\n   * Overall header height. Useful to align the header with a sidebar brand block.\n   * Maps to the same `min-height` scale the sidenav logo area uses:\n   * `sm` 56px · `md` 64px (default) · `lg` 80px · `xl` 112px.\n   */\n  readonly size = input<'sm' | 'md' | 'lg' | 'xl'>('md');\n  readonly title = input('');\n  /**\n   * Surface: `default` (the bar on `--color-surface` with a bottom border) or\n   * `transparent` (no background, no border — the header sits on the page).\n   */\n  readonly variant = input<HeaderVariant>('default');\n  /**\n   * Element for the title. `h1` keeps the app-shell behaviour; on a site whose\n   * pages carry their own `<h1>`, use `span` (or `p`/`div`).\n   */\n  readonly titleTag = input<HeaderTitleTag>('h1');\n  /**\n   * Second line under the title (e.g. the household name). One line, cut\n   * with \"…\" when it does not fit; the full text is its `title` attribute.\n   * Shown as typed.\n   */\n  readonly subtitle = input('');\n  readonly userEmail = input('');\n  readonly userName = input('');\n  /**\n   * What the account-menu button shows: `icon` (user icon and chevron) or\n   * `avatar` (the initials of `userName` in a 48 px round button).\n   */\n  readonly userMenuTrigger = input<HeaderUserMenuTrigger>('icon');\n  /** Photo for the account avatar (trigger and menu header); initials when empty or broken. */\n  readonly userAvatarSrc = input('');\n  /** Colour of the account avatar's initials: `default` or a member colour `member-1` … `member-6`. */\n  readonly userAvatarColor = input<AvatarColor>('default');\n  readonly showHamburger = input(false);\n  /**\n   * Open state of the sidenav the hamburger controls. When bound, the toggle\n   * announces it via `aria-expanded`; leave `undefined` when the header does\n   * not know (the attribute is then omitted rather than lying).\n   */\n  readonly sidenavOpen = input<boolean | undefined>(undefined);\n  /** DOM id of the sidenav the hamburger controls (`aria-controls`). */\n  readonly sidenavId = input('');\n  readonly showThemeButton = input(false);\n  /**\n   * Whether the theme button toggles the `ThemeService` itself before emitting\n   * `themeToggleClick`. Set to `false` when the app owns the theme switch and\n   * toggles in the `(themeToggleClick)` handler — otherwise both would toggle\n   * and the click would be a no-op.\n   */\n  readonly autoToggleTheme = input(true);\n  readonly contextName = input('');\n  readonly contextLabel = input('');\n  readonly menuSize = input<'sm' | 'md' | 'lg'>('sm');\n  readonly showProfileMenuItem = input(true);\n  /** Render the account menu (avatar trigger with Profile/Logout). */\n  readonly showUserMenu = input(true);\n  /**\n   * Plain URL for the brand link. When set, the brand is a native\n   * `<a href>` — no router needed (static or prerendered sites). Empty keeps\n   * `routerLink=\"/\"`.\n   */\n  readonly homeHref = input('');\n  /**\n   * Main navigation links, rendered as `<nav><ul><li><a href>` with\n   * `aria-current=\"page\"` on the current one. On screens below 1024 px the\n   * navigation takes a second row and wraps.\n   */\n  readonly navItems = input<readonly HeaderNavItem[]>([]);\n  /** Keep the header at the top while scrolling (`position: sticky`). */\n  readonly sticky = input(true);\n\n  // Labels (defaults are English; translate them in the app).\n  /** Accessible name of the brand link. */\n  readonly homeAriaLabel = input('Go to home');\n  /** Accessible name of the hamburger button. */\n  readonly hamburgerAriaLabel = input('Toggle sidebar menu');\n  /** Accessible name of the account menu trigger. */\n  readonly userMenuAriaLabel = input('Open user menu');\n  /** Accessible name of the `<nav>` around `navItems`. */\n  readonly navAriaLabel = input('Main navigation');\n  /** Label of the theme button while the light theme is active. */\n  readonly themeToDarkAriaLabel = input('Switch to dark mode');\n  /** Label of the theme button while the dark theme is active. */\n  readonly themeToLightAriaLabel = input('Switch to light mode');\n  /** Accessible name of the context button (`contextName`). */\n  readonly contextAriaLabel = input('Context info');\n  /** Label of the Profile entry in the account menu. */\n  readonly profileLabel = input('Profile');\n  /** Label of the Logout entry in the account menu. */\n  readonly logoutLabel = input('Logout');\n\n  readonly hamburgerClick = output<void>();\n  readonly themeToggleClick = output<void>();\n  readonly logoutClick = output<void>();\n  readonly profileClick = output<void>();\n  readonly contextClick = output<void>();\n\n  private readonly injector = inject(Injector);\n  private themeServiceInstance: ThemeService | null = null;\n\n  /**\n   * Resolved on first use, i.e. only when the theme button is shown: creating\n   * the ThemeService reads and writes the theme class and localStorage, which a\n   * site without a theme switch must not do.\n   */\n  protected get themeService(): ThemeService {\n    return (this.themeServiceInstance ??= this.injector.get(ThemeService));\n  }\n\n  private readonly hamburger = viewChild('hamburger', { read: ElementRef<HTMLElement> });\n\n  constructor() {\n    // The hamburger is an <lc-button>; the ARIA state belongs on its native\n    // <button> (the element that has the button role), not on the custom\n    // element host — so it is reflected after render rather than bound in the\n    // template.\n    afterRenderEffect(() => {\n      const button = this.hamburger()?.nativeElement.querySelector('button');\n      if (!button) return;\n      const open = this.sidenavOpen();\n      const controls = this.sidenavId();\n      if (open === undefined) {\n        button.removeAttribute('aria-expanded');\n      } else {\n        button.setAttribute('aria-expanded', String(open));\n      }\n      if (controls) {\n        button.setAttribute('aria-controls', controls);\n      } else {\n        button.removeAttribute('aria-controls');\n      }\n    });\n  }\n\n  /**\n   * Get menu items for profile dropdown\n   */\n  protected readonly menuItems = computed<MenuItem[]>(() => {\n    const items: MenuItem[] = [];\n\n    // Add profile link if enabled\n    if (this.showProfileMenuItem()) {\n      items.push({\n        id: 'profile',\n        label: this.profileLabel(),\n        icon: 'user',\n        dividerAfter: true,\n      });\n    }\n\n    // Add logout\n    items.push({\n      id: 'logout',\n      label: this.logoutLabel(),\n      icon: 'arrow-right-start-on-rectangle',\n      variant: 'danger',\n    });\n\n    return items;\n  });\n\n  /**\n   * Dropdown open state (using Angular signals)\n   */\n  private readonly dropdownOpen = signal<boolean>(false);\n\n  /**\n   * Get dropdown open state\n   */\n  isDropdownOpen(): boolean {\n    return this.dropdownOpen();\n  }\n\n  /**\n   * Toggle profile dropdown visibility\n   */\n  toggleDropdown(): void {\n    this.dropdownOpen.set(!this.dropdownOpen());\n  }\n\n  /**\n   * Close profile dropdown\n   */\n  closeDropdown(): void {\n    this.dropdownOpen.set(false);\n  }\n\n  /**\n   * Handle hamburger click\n   */\n  onHamburgerClick(): void {\n    this.hamburgerClick.emit();\n  }\n\n  /**\n   * Handle theme button click (separate button, not in menu). Toggles the\n   * theme unless the app opted out via `autoToggleTheme`, then emits.\n   */\n  onThemeButtonClick(): void {\n    if (this.autoToggleTheme()) {\n      this.themeService.toggleTheme();\n    }\n    this.themeToggleClick.emit();\n  }\n\n  /**\n   * Handle logout click\n   */\n  onLogoutClick(): void {\n    this.logoutClick.emit();\n    this.closeDropdown();\n  }\n\n  /**\n   * Handle profile click\n   */\n  onProfileClick(): void {\n    this.profileClick.emit();\n    this.closeDropdown();\n  }\n\n  /**\n   * Handle menu item click\n   */\n  onMenuItemClick(item: MenuItem): void {\n    if (item.id === 'logout') {\n      this.onLogoutClick();\n    } else if (item.id === 'profile') {\n      this.onProfileClick();\n    }\n  }\n}\n","<header\n  class=\"lc-header\"\n  [class.lc-header--dark]=\"theme() === 'dark'\"\n  [class.lc-header--light]=\"theme() === 'light'\"\n  [class.lc-header--size-sm]=\"size() === 'sm'\"\n  [class.lc-header--size-md]=\"size() === 'md'\"\n  [class.lc-header--size-lg]=\"size() === 'lg'\"\n  [class.lc-header--size-xl]=\"size() === 'xl'\"\n  [class.lc-header--has-nav]=\"navItems().length > 0\"\n  [class.lc-header--static]=\"!sticky()\"\n  [class.lc-header--transparent]=\"variant() === 'transparent'\"\n>\n  <!-- Hamburger menu icon (mobile only) -->\n  @if (showHamburger()) {\n    <lc-button\n      #hamburger\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"hamburgerAriaLabel()\"\n      (clicked)=\"onHamburgerClick()\"\n      class=\"lc-header__hamburger\"\n    >\n      <lc-icon name=\"bars-3\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Logo (clickable, navigates to home) -->\n  <div class=\"lc-header__brand\">\n    @if (showLogo()) {\n      @if (homeHref()) {\n        <!-- Plain link: works without the router and without JavaScript. -->\n        <a [href]=\"homeHref()\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n          <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n        </a>\n      } @else {\n        <a routerLink=\"/\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n          <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n        </a>\n      }\n    }\n\n    @if (title()) {\n      <div class=\"lc-header__title-group\">\n        @switch (titleTag()) {\n          @case ('h1') {\n            <h1 class=\"lc-header__title\">{{ title() }}</h1>\n          }\n          @case ('h2') {\n            <h2 class=\"lc-header__title\">{{ title() }}</h2>\n          }\n          @case ('h3') {\n            <h3 class=\"lc-header__title\">{{ title() }}</h3>\n          }\n          @case ('p') {\n            <p class=\"lc-header__title\">{{ title() }}</p>\n          }\n          @case ('div') {\n            <div class=\"lc-header__title\">{{ title() }}</div>\n          }\n          @default {\n            <span class=\"lc-header__title\">{{ title() }}</span>\n          }\n        }\n        @if (subtitle()) {\n          <span class=\"lc-header__subtitle\" [attr.title]=\"subtitle()\">{{ subtitle() }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Main navigation: inline from 1024 px, its own wrapping row below. -->\n  @if (navItems().length > 0) {\n    <nav class=\"lc-header__nav\" [attr.aria-label]=\"navAriaLabel()\">\n      <ul class=\"lc-header__nav-list\">\n        @for (item of navItems(); track $index) {\n          <li class=\"lc-header__nav-item\">\n            <a\n              class=\"lc-header__nav-link\"\n              [href]=\"item.href\"\n              [attr.aria-current]=\"item.current ? 'page' : null\"\n            >{{ item.label }}</a>\n          </li>\n        }\n      </ul>\n    </nav>\n  }\n\n  <div class=\"lc-header__spacer\"></div>\n\n  <!-- End of the first row, e.g. a language link. -->\n  <ng-content select=\"[slot='end']\" />\n\n  <!-- Theme toggle button -->\n  @if (showThemeButton()) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"themeService.isDark() ? themeToLightAriaLabel() : themeToDarkAriaLabel()\"\n      (clicked)=\"onThemeButtonClick()\"\n      class=\"lc-header__theme-toggle\"\n    >\n      <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Context info (e.g. tenant, organization, project) -->\n  @if (contextName()) {\n    <button\n      type=\"button\"\n      class=\"lc-header__context-info\"\n      [attr.title]=\"contextName()\"\n      [attr.aria-label]=\"contextAriaLabel()\"\n      (click)=\"contextClick.emit()\"\n    >\n      @if (contextLabel()) {\n        <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>\n      }\n      <span class=\"lc-header__context-name\">{{ contextName() }}</span>\n    </button>\n  }\n\n  <!-- User profile menu -->\n  @if (showUserMenu()) {\n    <lc-menu\n      [items]=\"menuItems()\"\n      [isOpen]=\"isDropdownOpen()\"\n      position=\"bottom-right\"\n      minWidth=\"min(220px, calc(100vw - 2rem))\"\n      maxWidth=\"min(18rem, calc(100vw - 2rem))\"\n      [size]=\"menuSize()\"\n      (itemClick)=\"onMenuItemClick($event)\"\n      (closed)=\"closeDropdown()\"\n    >\n      <!-- Menu header with avatar, name and email -->\n      @if (userName() || userEmail()) {\n        <div header class=\"lc-header__menu-header\">\n          <lc-avatar\n            [name]=\"userName()\"\n            [src]=\"userAvatarSrc() || undefined\"\n            [color]=\"userAvatarColor()\"\n            size=\"md\"\n          />\n          <div class=\"lc-header__menu-user-info\">\n            @if (userName()) {\n              <div class=\"lc-header__menu-user-name\">{{ userName() }}</div>\n            }\n            @if (userEmail()) {\n              <div class=\"lc-header__menu-user-email\">{{ userEmail() }}</div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (userMenuTrigger() === 'avatar') {\n        <button\n          trigger\n          class=\"lc-header__profile-trigger lc-header__profile-trigger--avatar\"\n          type=\"button\"\n          [attr.aria-label]=\"userMenuAriaLabel()\"\n          [attr.aria-expanded]=\"isDropdownOpen()\"\n          (click)=\"toggleDropdown()\"\n        >\n          <lc-avatar\n            [name]=\"userName()\"\n            [src]=\"userAvatarSrc() || undefined\"\n            [color]=\"userAvatarColor()\"\n            [decorative]=\"true\"\n            size=\"md\"\n          />\n        </button>\n      } @else {\n        <button\n          trigger\n          class=\"lc-header__profile-trigger\"\n          type=\"button\"\n          [attr.aria-label]=\"userMenuAriaLabel()\"\n          [attr.aria-expanded]=\"isDropdownOpen()\"\n          (click)=\"toggleDropdown()\"\n        >\n          <lc-icon name=\"user\" size=\"sm\" />\n          <lc-icon name=\"chevron-down\" size=\"xs\" />\n        </button>\n      }\n    </lc-menu>\n  }\n</header>\n\n<ng-template #brandLogo>\n  <lc-logo\n    [variant]=\"logo() ? 'full' : 'emblem'\"\n    [size]=\"logoSize()\"\n    [clickable]=\"false\"\n    [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n    [src]=\"logoSrc()\"\n    [emblemSrc]=\"logoEmblemSrc()\"\n    [darkSrc]=\"logoDarkSrc()\"\n    [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n    [alt]=\"logoAlt() || title() || 'Logo'\"\n  />\n</ng-template>\n"],"mappings":"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"}

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

@@ -0,0 +1,305 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import { cleanNumber, formatChartValue, toFinite } from "@lifecorner/angular-ui-kit/internal/chart";
+var HeatmapComponent = class HeatmapComponent {
+	data = input.required(...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	rowLabels = input([], ...ngDevMode ? [{ debugName: "rowLabels" }] : /* istanbul ignore next */ []);
+	colLabels = input([], ...ngDevMode ? [{ debugName: "colLabels" }] : /* istanbul ignore next */ []);
+	cellSize = input(28, ...ngDevMode ? [{ debugName: "cellSize" }] : /* istanbul ignore next */ []);
+	cellGap = input(2, ...ngDevMode ? [{ debugName: "cellGap" }] : /* istanbul ignore next */ []);
+	colorMin = input("var(--color-primary-50)", ...ngDevMode ? [{ debugName: "colorMin" }] : /* istanbul ignore next */ []);
+	colorMax = input("var(--color-primary-500)", ...ngDevMode ? [{ debugName: "colorMax" }] : /* istanbul ignore next */ []);
+	showValues = input(false, ...ngDevMode ? [{ debugName: "showValues" }] : /* istanbul ignore next */ []);
+	cellRadius = input(3, ...ngDevMode ? [{ debugName: "cellRadius" }] : /* istanbul ignore next */ []);
+	formatValue = input(formatChartValue, ...ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	LABEL_W = 60;
+	LABEL_H = 20;
+	cleanData = computed(() => (this.data() ?? []).map((row) => (row ?? []).map((v) => toFinite(v))), ...ngDevMode ? [{ debugName: "cleanData" }] : /* istanbul ignore next */ []);
+	minVal = computed(() => {
+		const flat = this.cleanData().flat();
+		return flat.length ? Math.min(...flat) : 0;
+	}, ...ngDevMode ? [{ debugName: "minVal" }] : /* istanbul ignore next */ []);
+	maxVal = computed(() => {
+		const flat = this.cleanData().flat();
+		return flat.length ? Math.max(...flat) : 0;
+	}, ...ngDevMode ? [{ debugName: "maxVal" }] : /* istanbul ignore next */ []);
+	rows = computed(() => this.cleanData().length, ...ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []);
+	cols = computed(() => {
+		const d = this.cleanData();
+		return d.length ? Math.max(...d.map((r) => r.length)) : 0;
+	}, ...ngDevMode ? [{ debugName: "cols" }] : /* istanbul ignore next */ []);
+	svgWidth = computed(() => (this.rowLabels().length ? this.LABEL_W : 0) + this.cols() * (this.cellSize() + this.cellGap()), ...ngDevMode ? [{ debugName: "svgWidth" }] : /* istanbul ignore next */ []);
+	svgHeight = computed(() => (this.colLabels().length ? this.LABEL_H : 0) + this.rows() * (this.cellSize() + this.cellGap()), ...ngDevMode ? [{ debugName: "svgHeight" }] : /* istanbul ignore next */ []);
+	viewBox = computed(() => `0 0 ${this.svgWidth()} ${this.svgHeight()}`, ...ngDevMode ? [{ debugName: "viewBox" }] : /* istanbul ignore next */ []);
+	offsetX = computed(() => this.rowLabels().length ? this.LABEL_W : 0, ...ngDevMode ? [{ debugName: "offsetX" }] : /* istanbul ignore next */ []);
+	offsetY = computed(() => this.colLabels().length ? this.LABEL_H : 0, ...ngDevMode ? [{ debugName: "offsetY" }] : /* istanbul ignore next */ []);
+	cells = computed(() => {
+		const d = this.cleanData();
+		const cs = this.cellSize();
+		const cg = this.cellGap();
+		const ox = this.offsetX();
+		const oy = this.offsetY();
+		const min = this.minVal();
+		const range = this.maxVal() - min || 1;
+		const lo = this.colorMin();
+		const hi = this.colorMax();
+		const fmt = this.formatValue();
+		const result = [];
+		for (let r = 0; r < d.length; r++) for (let c = 0; c < d[r].length; c++) {
+			const val = d[r][c];
+			const t = (val - min) / range;
+			result.push({
+				x: ox + c * (cs + cg),
+				y: oy + r * (cs + cg),
+				w: cs,
+				h: cs,
+				value: val,
+				valueText: fmt(val),
+				fill: `color-mix(in srgb, ${hi} ${cleanNumber(t * 100)}%, ${lo})`,
+				ink: t > .5 ? "var(--color-surface)" : "var(--color-text-primary)"
+			});
+		}
+		return result;
+	}, ...ngDevMode ? [{ debugName: "cells" }] : /* istanbul ignore next */ []);
+	rowLabelItems = computed(() => {
+		const labels = this.rowLabels();
+		if (!labels.length) return [];
+		const cs = this.cellSize();
+		const cg = this.cellGap();
+		const oy = this.offsetY();
+		return labels.map((l, i) => ({
+			x: this.LABEL_W - 6,
+			y: oy + i * (cs + cg) + cs / 2,
+			label: l
+		}));
+	}, ...ngDevMode ? [{ debugName: "rowLabelItems" }] : /* istanbul ignore next */ []);
+	colLabelItems = computed(() => {
+		const labels = this.colLabels();
+		if (!labels.length) return [];
+		const cs = this.cellSize();
+		const cg = this.cellGap();
+		const ox = this.offsetX();
+		return labels.map((l, i) => ({
+			x: ox + i * (cs + cg) + cs / 2,
+			y: this.LABEL_H - 4,
+			label: l
+		}));
+	}, ...ngDevMode ? [{ debugName: "colLabelItems" }] : /* istanbul ignore next */ []);
+	effectiveAriaLabel = computed(() => {
+		const explicit = this.ariaLabel();
+		if (explicit) return explicit;
+		const rows = this.rows();
+		const cols = this.cols();
+		if (!rows || !cols) return "Heatmap: no data";
+		const fmt = this.formatValue();
+		return `Heatmap: ${rows} ${rows === 1 ? "row" : "rows"} by ${cols} ${cols === 1 ? "column" : "columns"}, values from ${fmt(this.minVal())} to ${fmt(this.maxVal())}`;
+	}, ...ngDevMode ? [{ debugName: "effectiveAriaLabel" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: HeatmapComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: HeatmapComponent,
+		isStandalone: true,
+		selector: "lc-heatmap",
+		inputs: {
+			data: {
+				classPropertyName: "data",
+				publicName: "data",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			rowLabels: {
+				classPropertyName: "rowLabels",
+				publicName: "rowLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			colLabels: {
+				classPropertyName: "colLabels",
+				publicName: "colLabels",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			cellSize: {
+				classPropertyName: "cellSize",
+				publicName: "cellSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			cellGap: {
+				classPropertyName: "cellGap",
+				publicName: "cellGap",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			colorMin: {
+				classPropertyName: "colorMin",
+				publicName: "colorMin",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			colorMax: {
+				classPropertyName: "colorMax",
+				publicName: "colorMax",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValues: {
+				classPropertyName: "showValues",
+				publicName: "showValues",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			cellRadius: {
+				classPropertyName: "cellRadius",
+				publicName: "cellRadius",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			formatValue: {
+				classPropertyName: "formatValue",
+				publicName: "formatValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<svg [attr.width]=\"svgWidth()\" [attr.height]=\"svgHeight()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-heatmap\">\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  @for (lbl of rowLabelItems(); track lbl.y) {\n    <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-heatmap__label\">{{ lbl.label }}</text>\n  }\n\n  @for (lbl of colLabelItems(); track lbl.x) {\n    <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"middle\" class=\"lc-heatmap__label\">{{ lbl.label }}</text>\n  }\n\n  @for (cell of cells(); track $index) {\n    <rect\n      [attr.x]=\"cell.x\" [attr.y]=\"cell.y\" [attr.width]=\"cell.w\" [attr.height]=\"cell.h\"\n      [attr.rx]=\"cellRadius()\" [attr.fill]=\"cell.fill\"\n      class=\"lc-heatmap__cell\"\n    />\n    @if (showValues()) {\n      <text [attr.x]=\"cell.x + cell.w / 2\" [attr.y]=\"cell.y + cell.h / 2\" [attr.fill]=\"cell.ink\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"lc-heatmap__cell-value\">{{ cell.valueText }}</text>\n    }\n  }\n</svg>\n",
+		styles: [":host{display:inline-block}.lc-heatmap{overflow:visible}.lc-heatmap__label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-heatmap__cell{transition:stroke .15s ease}.lc-heatmap__cell:hover{stroke:var(--color-border-strong);stroke-width:1}.lc-heatmap__cell-value{font-size:.625rem;font-weight:600;pointer-events:none}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HeatmapComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-heatmap",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<svg [attr.width]=\"svgWidth()\" [attr.height]=\"svgHeight()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-heatmap\">\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  @for (lbl of rowLabelItems(); track lbl.y) {\n    <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-heatmap__label\">{{ lbl.label }}</text>\n  }\n\n  @for (lbl of colLabelItems(); track lbl.x) {\n    <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"middle\" class=\"lc-heatmap__label\">{{ lbl.label }}</text>\n  }\n\n  @for (cell of cells(); track $index) {\n    <rect\n      [attr.x]=\"cell.x\" [attr.y]=\"cell.y\" [attr.width]=\"cell.w\" [attr.height]=\"cell.h\"\n      [attr.rx]=\"cellRadius()\" [attr.fill]=\"cell.fill\"\n      class=\"lc-heatmap__cell\"\n    />\n    @if (showValues()) {\n      <text [attr.x]=\"cell.x + cell.w / 2\" [attr.y]=\"cell.y + cell.h / 2\" [attr.fill]=\"cell.ink\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"lc-heatmap__cell-value\">{{ cell.valueText }}</text>\n    }\n  }\n</svg>\n",
+			styles: [":host{display:inline-block}.lc-heatmap{overflow:visible}.lc-heatmap__label{font-size:.625rem;fill:var(--color-text-tertiary)}.lc-heatmap__cell{transition:stroke .15s ease}.lc-heatmap__cell:hover{stroke:var(--color-border-strong);stroke-width:1}.lc-heatmap__cell-value{font-size:.625rem;font-weight:600;pointer-events:none}\n"]
+		}]
+	}],
+	propDecorators: {
+		data: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "data",
+				required: true
+			}]
+		}],
+		rowLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "rowLabels",
+				required: false
+			}]
+		}],
+		colLabels: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colLabels",
+				required: false
+			}]
+		}],
+		cellSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cellSize",
+				required: false
+			}]
+		}],
+		cellGap: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cellGap",
+				required: false
+			}]
+		}],
+		colorMin: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colorMin",
+				required: false
+			}]
+		}],
+		colorMax: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "colorMax",
+				required: false
+			}]
+		}],
+		showValues: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValues",
+				required: false
+			}]
+		}],
+		cellRadius: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "cellRadius",
+				required: false
+			}]
+		}],
+		formatValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formatValue",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}]
+	}
+});
+export { HeatmapComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-heatmap.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-heatmap.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/heatmap/heatmap.component.ts","../../../../libs/angular-ui-kit/src/lib/heatmap/heatmap.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\nimport {\n  ChartValueFormatter,\n  cleanNumber,\n  formatChartValue,\n  toFinite,\n} from '@lifecorner/angular-ui-kit/internal/chart';\n\nexport interface HeatmapCell {\n  row: number;\n  col: number;\n  value: number;\n}\n\n@Component({\n  selector: 'lc-heatmap',\n  standalone: true,\n  templateUrl: './heatmap.component.html',\n  styleUrls: ['./heatmap.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Heatmap component for visualizing 2D data density.\n *\n * Features:\n * - Cells blended from `colorMin` (lowest value) to `colorMax` (highest value)\n * - Configurable cell size, gap, and corner radius\n * - Custom min/max color range\n * - Optional row and column labels\n * - Optional value display within cells, ink chosen per cell for contrast\n * - Responsive SVG rendering\n *\n * @example\n * ```html\n * <lc-heatmap [data]=\"matrix\" [rowLabels]=\"days\" [colLabels]=\"hours\" />\n * ```\n */\nexport class HeatmapComponent {\n  /** 2D data: array of rows, each row an array of values. */\n  data = input.required<number[][]>();\n\n  /** Row labels (Y axis). */\n  rowLabels = input<string[]>([]);\n\n  /** Column labels (X axis). */\n  colLabels = input<string[]>([]);\n\n  /** Cell size in pixels. */\n  cellSize = input<number>(28);\n\n  /** Gap between cells in pixels. */\n  cellGap = input<number>(2);\n\n  /** Low-value color (the fill of the minimum value). */\n  colorMin = input<string>('var(--color-primary-50)');\n\n  /** High-value color (the fill of the maximum value). */\n  colorMax = input<string>('var(--color-primary-500)');\n\n  /** Show values inside cells. */\n  showValues = input<boolean>(false);\n\n  /** Corner radius of cells. */\n  cellRadius = input<number>(3);\n\n  /** Formats cell values. Defaults to a float-safe `String(value)`. */\n  formatValue = input<ChartValueFormatter>(formatChartValue);\n\n  /**\n   * Accessible name of the chart. Defaults to a generated summary of the grid\n   * shape and value range, e.g. \"Heatmap: 5 rows by 7 columns, values from 0 to 15\".\n   */\n  ariaLabel = input<string>('');\n\n  private readonly LABEL_W = 60;\n  private readonly LABEL_H = 20;\n\n  /** Rows with every value coerced to a finite number (holes → 0). */\n  private readonly cleanData = computed(() =>\n    (this.data() ?? []).map((row) => (row ?? []).map((v) => toFinite(v)))\n  );\n\n  protected readonly minVal = computed(() => {\n    const flat = this.cleanData().flat();\n    return flat.length ? Math.min(...flat) : 0;\n  });\n\n  protected readonly maxVal = computed(() => {\n    const flat = this.cleanData().flat();\n    return flat.length ? Math.max(...flat) : 0;\n  });\n\n  protected readonly rows = computed(() => this.cleanData().length);\n  protected readonly cols = computed(() => {\n    const d = this.cleanData();\n    return d.length ? Math.max(...d.map(r => r.length)) : 0;\n  });\n\n  protected readonly svgWidth = computed(() =>\n    (this.rowLabels().length ? this.LABEL_W : 0) + this.cols() * (this.cellSize() + this.cellGap())\n  );\n\n  protected readonly svgHeight = computed(() =>\n    (this.colLabels().length ? this.LABEL_H : 0) + this.rows() * (this.cellSize() + this.cellGap())\n  );\n\n  protected readonly viewBox = computed(() => `0 0 ${this.svgWidth()} ${this.svgHeight()}`);\n\n  protected readonly offsetX = computed(() => this.rowLabels().length ? this.LABEL_W : 0);\n  protected readonly offsetY = computed(() => this.colLabels().length ? this.LABEL_H : 0);\n\n  protected readonly cells = computed(() => {\n    const d = this.cleanData();\n    const cs = this.cellSize();\n    const cg = this.cellGap();\n    const ox = this.offsetX();\n    const oy = this.offsetY();\n    const min = this.minVal();\n    const max = this.maxVal();\n    const range = max - min || 1;\n    const lo = this.colorMin();\n    const hi = this.colorMax();\n    const fmt = this.formatValue();\n\n    const result: {\n      x: number; y: number; w: number; h: number;\n      value: number; valueText: string; fill: string; ink: string;\n    }[] = [];\n\n    for (let r = 0; r < d.length; r++) {\n      for (let c = 0; c < d[r].length; c++) {\n        const val = d[r][c];\n        const t = (val - min) / range;\n        result.push({\n          x: ox + c * (cs + cg),\n          y: oy + r * (cs + cg),\n          w: cs,\n          h: cs,\n          value: val,\n          valueText: fmt(val),\n          fill: `color-mix(in srgb, ${hi} ${cleanNumber(t * 100)}%, ${lo})`,\n          // Strong cells sit near colorMax (a mid/light brand shade depending on\n          // theme) and read best in the surface colour; weak cells sit near\n          // colorMin (close to the surface) and take primary text.\n          ink: t > 0.5 ? 'var(--color-surface)' : 'var(--color-text-primary)',\n        });\n      }\n    }\n    return result;\n  });\n\n  protected readonly rowLabelItems = computed(() => {\n    const labels = this.rowLabels();\n    if (!labels.length) return [];\n    const cs = this.cellSize();\n    const cg = this.cellGap();\n    const oy = this.offsetY();\n    return labels.map((l, i) => ({\n      x: this.LABEL_W - 6,\n      y: oy + i * (cs + cg) + cs / 2,\n      label: l,\n    }));\n  });\n\n  protected readonly colLabelItems = computed(() => {\n    const labels = this.colLabels();\n    if (!labels.length) return [];\n    const cs = this.cellSize();\n    const cg = this.cellGap();\n    const ox = this.offsetX();\n    return labels.map((l, i) => ({\n      x: ox + i * (cs + cg) + cs / 2,\n      y: this.LABEL_H - 4,\n      label: l,\n    }));\n  });\n\n  protected readonly effectiveAriaLabel = computed(() => {\n    const explicit = this.ariaLabel();\n    if (explicit) return explicit;\n    const rows = this.rows();\n    const cols = this.cols();\n    if (!rows || !cols) return 'Heatmap: no data';\n    const fmt = this.formatValue();\n    return `Heatmap: ${rows} ${rows === 1 ? 'row' : 'rows'} by ${cols} ${cols === 1 ? 'column' : 'columns'}, values from ${fmt(this.minVal())} to ${fmt(this.maxVal())}`;\n  });\n}\n","<svg [attr.width]=\"svgWidth()\" [attr.height]=\"svgHeight()\" [attr.viewBox]=\"viewBox()\" role=\"img\" [attr.aria-label]=\"effectiveAriaLabel()\" class=\"lc-heatmap\">\n  <title>{{ effectiveAriaLabel() }}</title>\n\n  @for (lbl of rowLabelItems(); track lbl.y) {\n    <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"end\" dominant-baseline=\"central\" class=\"lc-heatmap__label\">{{ lbl.label }}</text>\n  }\n\n  @for (lbl of colLabelItems(); track lbl.x) {\n    <text [attr.x]=\"lbl.x\" [attr.y]=\"lbl.y\" text-anchor=\"middle\" class=\"lc-heatmap__label\">{{ lbl.label }}</text>\n  }\n\n  @for (cell of cells(); track $index) {\n    <rect\n      [attr.x]=\"cell.x\" [attr.y]=\"cell.y\" [attr.width]=\"cell.w\" [attr.height]=\"cell.h\"\n      [attr.rx]=\"cellRadius()\" [attr.fill]=\"cell.fill\"\n      class=\"lc-heatmap__cell\"\n    />\n    @if (showValues()) {\n      <text [attr.x]=\"cell.x + cell.w / 2\" [attr.y]=\"cell.y + cell.h / 2\" [attr.fill]=\"cell.ink\" text-anchor=\"middle\" dominant-baseline=\"central\" class=\"lc-heatmap__cell-value\">{{ cell.valueText }}</text>\n    }\n  }\n</svg>\n"],"mappings":"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"}

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

@@ -0,0 +1,168 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var HeroComponent = class HeroComponent {
+	label = input(void 0, ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+	title = input.required(...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	color = input("primary", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	borderRadius = input("lg", ...ngDevMode ? [{ debugName: "borderRadius" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	contentWidth = input("full", ...ngDevMode ? [{ debugName: "contentWidth" }] : /* istanbul ignore next */ []);
+	heroClasses = computed(() => {
+		return [
+			"hero",
+			`hero--${this.color()}`,
+			`hero--${this.size()}`,
+			`hero--radius-${this.borderRadius()}`,
+			`hero--${this.variant()}`,
+			`hero--content-${this.contentWidth()}`
+		].join(" ");
+	}, ...ngDevMode ? [{ debugName: "heroClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: HeroComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: HeroComponent,
+		isStandalone: true,
+		selector: "lc-hero",
+		inputs: {
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			color: {
+				classPropertyName: "color",
+				publicName: "color",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			borderRadius: {
+				classPropertyName: "borderRadius",
+				publicName: "borderRadius",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			contentWidth: {
+				classPropertyName: "contentWidth",
+				publicName: "contentWidth",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0,
+		template: "<div [class]=\"heroClasses()\">\n  <div class=\"hero__inner\">\n    <div class=\"hero__content\">\n      @if (label()) {\n        <span class=\"hero__label\">{{ label() }}</span>\n      }\n      <h1 class=\"hero__title\">{{ title() }}</h1>\n      <div class=\"hero__body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"hero__media\">\n      <ng-content select=\"[hero-media]\"></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n",
+		styles: [":host{display:block;width:100%}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#208497)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#7097af)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#5f7150,#8ea475)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#9b6b2b,#e1a040)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#df792e)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:var(--border-radius-none)}.hero--radius-sm{border-radius:var(--border-radius-sm)}.hero--radius-md{border-radius:var(--border-radius-md)}.hero--radius-lg{border-radius:var(--border-radius-lg)}.hero--slim{padding:1rem 1.25rem!important}@media(min-width:640px){.hero--slim{padding:1.25rem 2rem!important}}@media(min-width:1024px){.hero--slim{padding:1.5rem 3rem!important}}.hero--slim .hero__title{font-size:1.125rem!important;font-weight:700;line-height:1.3}@media(min-width:640px){.hero--slim .hero__title{font-size:1.25rem!important}}@media(min-width:1024px){.hero--slim .hero__title{font-size:1.5rem!important}}.hero--slim .hero__label{font-size:.5625rem;margin-bottom:.375rem;letter-spacing:.12em}@media(min-width:640px){.hero--slim .hero__label{font-size:.625rem;margin-bottom:.5rem}}.hero--slim .hero__body{margin-top:.5rem;font-size:.8125rem}@media(min-width:640px){.hero--slim .hero__body{font-size:.875rem;margin-top:.625rem}}.hero--slim ::ng-deep [hero-footer]{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim ::ng-deep [hero-footer]{margin-top:1.25rem}}.hero--light{color:#1f2937}.hero--light .hero__label{opacity:.7}.hero--light .hero__body{opacity:.75}.hero--light ::ng-deep [hero-footer]{border-top-color:#0000001f}.hero--light.hero--primary{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--secondary{background:linear-gradient(135deg,#e0e7ff,#eef2ff)}.hero--light.hero--neutral{background:linear-gradient(135deg,#e5e7eb,#f9fafb)}.hero--light.hero--success{background:linear-gradient(135deg,#d1fae5,#ecfdf5)}.hero--light.hero--info{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--warning{background:linear-gradient(135deg,#fef3c7,#fffbeb)}.hero--light.hero--accent-orange{background:linear-gradient(135deg,#ffedd5,#fff7ed)}.hero--light.hero--accent-purple{background:linear-gradient(135deg,#e9d5ff,#f5f3ff)}.hero--light.hero--accent-violet{background:linear-gradient(135deg,#ddd6fe,#ede9fe)}@media(min-width:1024px){.hero--content-lg.hero--sm{padding-inline:max(3rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--md{padding-inline:max(3.5rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--lg{padding-inline:max(4rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--slim{padding-inline:max(3rem,(100% - 1024px) / 2 + 3rem)!important}}.hero__inner{flex:1}.hero__content{min-width:0}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;opacity:.85;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}.hero__media{max-width:var(--lc-hero-media-width, 23rem);margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){.hero__media{margin-top:2.5rem}}.hero__media:empty{display:none}.hero--slim .hero__media{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim .hero__media{margin-top:1.25rem}}.hero--light .hero__media{border-top-color:#0000001f}@media(min-width:1024px){.hero__inner:has(>.hero__media:not(:empty)){display:grid;grid-template-columns:minmax(0,1fr) var(--lc-hero-media-width, 23rem);column-gap:3.5rem;align-items:center}.hero__inner:has(>.hero__media:not(:empty))>.hero__media{max-width:none;margin-top:0;padding-top:0;border-top:0}}:host ::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){:host ::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){:host ::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HeroComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-hero",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div [class]=\"heroClasses()\">\n  <div class=\"hero__inner\">\n    <div class=\"hero__content\">\n      @if (label()) {\n        <span class=\"hero__label\">{{ label() }}</span>\n      }\n      <h1 class=\"hero__title\">{{ title() }}</h1>\n      <div class=\"hero__body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"hero__media\">\n      <ng-content select=\"[hero-media]\"></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n",
+			styles: [":host{display:block;width:100%}.hero{position:relative;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}.hero--primary{background:linear-gradient(135deg,#0d353d,#208497)}.hero--secondary{background:linear-gradient(135deg,#2d3c46,#7097af)}.hero--neutral{background:linear-gradient(135deg,#111827,#4b5563)}.hero--success{background:linear-gradient(135deg,#5f7150,#8ea475)}.hero--info{background:linear-gradient(135deg,#27445c,#3b6588)}.hero--warning{background:linear-gradient(135deg,#9b6b2b,#e1a040)}.hero--accent-orange{background:linear-gradient(135deg,#7a3a10,#df792e)}.hero--accent-purple{background:linear-gradient(135deg,#3a2a52,#866aa0)}.hero--accent-violet{background:linear-gradient(135deg,#221a42,#4e3f84)}.hero--sm{padding:1.5rem 1.25rem}@media(min-width:640px){.hero--sm{padding:2rem}}@media(min-width:1024px){.hero--sm{padding:2.5rem 3rem}}.hero--md{padding:2rem 1.25rem}@media(min-width:640px){.hero--md{padding:2.5rem 2rem}}@media(min-width:1024px){.hero--md{padding:3rem 3.5rem}}.hero--lg{padding:2.5rem 1.25rem}@media(min-width:640px){.hero--lg{padding:3rem 2.5rem}}@media(min-width:1024px){.hero--lg{padding:4rem}}.hero--radius-none{border-radius:var(--border-radius-none)}.hero--radius-sm{border-radius:var(--border-radius-sm)}.hero--radius-md{border-radius:var(--border-radius-md)}.hero--radius-lg{border-radius:var(--border-radius-lg)}.hero--slim{padding:1rem 1.25rem!important}@media(min-width:640px){.hero--slim{padding:1.25rem 2rem!important}}@media(min-width:1024px){.hero--slim{padding:1.5rem 3rem!important}}.hero--slim .hero__title{font-size:1.125rem!important;font-weight:700;line-height:1.3}@media(min-width:640px){.hero--slim .hero__title{font-size:1.25rem!important}}@media(min-width:1024px){.hero--slim .hero__title{font-size:1.5rem!important}}.hero--slim .hero__label{font-size:.5625rem;margin-bottom:.375rem;letter-spacing:.12em}@media(min-width:640px){.hero--slim .hero__label{font-size:.625rem;margin-bottom:.5rem}}.hero--slim .hero__body{margin-top:.5rem;font-size:.8125rem}@media(min-width:640px){.hero--slim .hero__body{font-size:.875rem;margin-top:.625rem}}.hero--slim ::ng-deep [hero-footer]{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim ::ng-deep [hero-footer]{margin-top:1.25rem}}.hero--light{color:#1f2937}.hero--light .hero__label{opacity:.7}.hero--light .hero__body{opacity:.75}.hero--light ::ng-deep [hero-footer]{border-top-color:#0000001f}.hero--light.hero--primary{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--secondary{background:linear-gradient(135deg,#e0e7ff,#eef2ff)}.hero--light.hero--neutral{background:linear-gradient(135deg,#e5e7eb,#f9fafb)}.hero--light.hero--success{background:linear-gradient(135deg,#d1fae5,#ecfdf5)}.hero--light.hero--info{background:linear-gradient(135deg,#dbeafe,#eff6ff)}.hero--light.hero--warning{background:linear-gradient(135deg,#fef3c7,#fffbeb)}.hero--light.hero--accent-orange{background:linear-gradient(135deg,#ffedd5,#fff7ed)}.hero--light.hero--accent-purple{background:linear-gradient(135deg,#e9d5ff,#f5f3ff)}.hero--light.hero--accent-violet{background:linear-gradient(135deg,#ddd6fe,#ede9fe)}@media(min-width:1024px){.hero--content-lg.hero--sm{padding-inline:max(3rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--md{padding-inline:max(3.5rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--lg{padding-inline:max(4rem,(100% - 1024px) / 2 + 3rem)}.hero--content-lg.hero--slim{padding-inline:max(3rem,(100% - 1024px) / 2 + 3rem)!important}}.hero__inner{flex:1}.hero__content{min-width:0}.hero__label{display:inline-block;font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;opacity:.8;margin-bottom:.75rem}@media(min-width:640px){.hero__label{font-size:.75rem;margin-bottom:1rem}}.hero__title{margin:0;font-weight:800;line-height:1.1;color:inherit}.hero--sm .hero__title{font-size:1.5rem}@media(min-width:640px){.hero--sm .hero__title{font-size:1.75rem}}@media(min-width:1024px){.hero--sm .hero__title{font-size:2rem}}.hero--md .hero__title{font-size:1.75rem}@media(min-width:640px){.hero--md .hero__title{font-size:2.25rem}}@media(min-width:1024px){.hero--md .hero__title{font-size:2.75rem}}.hero--lg .hero__title{font-size:2rem}@media(min-width:640px){.hero--lg .hero__title{font-size:2.75rem}}@media(min-width:1024px){.hero--lg .hero__title{font-size:3.5rem}}.hero__body{margin-top:1rem;font-size:.875rem;line-height:1.6;opacity:.85;max-width:48rem}@media(min-width:640px){.hero__body{font-size:1rem;margin-top:1.25rem}}@media(min-width:1024px){.hero__body{font-size:1.125rem;margin-top:1.5rem}}.hero__body:empty{display:none}.hero__media{max-width:var(--lc-hero-media-width, 23rem);margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){.hero__media{margin-top:2.5rem}}.hero__media:empty{display:none}.hero--slim .hero__media{margin-top:1rem;padding-top:.75rem}@media(min-width:640px){.hero--slim .hero__media{margin-top:1.25rem}}.hero--light .hero__media{border-top-color:#0000001f}@media(min-width:1024px){.hero__inner:has(>.hero__media:not(:empty)){display:grid;grid-template-columns:minmax(0,1fr) var(--lc-hero-media-width, 23rem);column-gap:3.5rem;align-items:center}.hero__inner:has(>.hero__media:not(:empty))>.hero__media{max-width:none;margin-top:0;padding-top:0;border-top:0}}:host ::ng-deep [hero-footer]{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2)}@media(min-width:640px){:host ::ng-deep [hero-footer]{grid-template-columns:repeat(2,1fr);margin-top:2.5rem}}@media(min-width:1024px){:host ::ng-deep [hero-footer]{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin-top:3rem}}\n"]
+		}]
+	}],
+	propDecorators: {
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: true
+			}]
+		}],
+		color: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "color",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		borderRadius: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "borderRadius",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		contentWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contentWidth",
+				required: false
+			}]
+		}]
+	}
+});
+export { HeroComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-hero.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-hero.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/hero/hero.component.ts","../../../../libs/angular-ui-kit/src/lib/hero/hero.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  computed,\n} from '@angular/core';\n\nexport type HeroColor =\n  | 'primary'\n  | 'secondary'\n  | 'neutral'\n  | 'success'\n  | 'info'\n  | 'warning'\n  | 'accent-orange'\n  | 'accent-purple'\n  | 'accent-violet';\n\nexport type HeroSize = 'sm' | 'md' | 'lg';\nexport type HeroVariant = 'default' | 'slim' | 'light';\n\n/**\n * Width of the hero's content box.\n * - `full`: the content runs to the hero's own padding (default, as before 3.4)\n * - `lg`: from 1024 px the content sits on the `lc-container` `lg` page column\n *   (1024 px minus its 48 px sides, so at most 928 px), centred, while the\n *   background stays full-bleed\n */\nexport type HeroContentWidth = 'full' | 'lg';\n\n/**\n * Hero component for prominent page headers with gradient backgrounds.\n *\n * Features:\n * - Color gradient variants (primary, secondary, success, warning, info, neutral, accent-orange, accent-purple, accent-violet)\n * - 3 visual variants: default (dark gradient), slim (compact banner), light (pastel gradient with dark text)\n * - Size options (sm, md, lg)\n * - Optional label text above the title\n * - Configurable border radius\n * - Content projection for body and footer sections\n * - Footer slot for metadata, stats, or CTAs\n * - Media slot (`[hero-media]`) for a visual: below the text on small screens,\n *   beside it from 1024 px, never under the body's 85 % opacity\n * - Content width `lg`: a full-bleed band whose text lines up with the page column\n *\n * @example\n * ```html\n * <lc-hero label=\"MY APP\" title=\"Welcome\" color=\"primary\" variant=\"slim\">\n *   <p>Description text</p>\n *   <div hero-footer>Status: Active</div>\n * </lc-hero>\n *\n * <lc-hero title=\"Everything in view\" borderRadius=\"none\" contentWidth=\"lg\">\n *   <p>Description text</p>\n *   <lc-card hero-media variant=\"elevated\">…</lc-card>\n * </lc-hero>\n * ```\n */\n@Component({\n  selector: 'lc-hero',\n  standalone: true,\n  templateUrl: './hero.component.html',\n  styleUrls: ['./hero.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HeroComponent {\n  /**\n   * Small uppercase label displayed above the title.\n   */\n  label = input<string | undefined>(undefined);\n\n  /**\n   * Main headline text.\n   */\n  title = input.required<string>();\n\n  /**\n   * Color theme for the gradient background.\n   * @default 'primary'\n   */\n  color = input<HeroColor>('primary');\n\n  /**\n   * Size variant controlling padding and font sizes.\n   * @default 'md'\n   */\n  size = input<HeroSize>('md');\n\n  /**\n   * Border radius of the hero container.\n   * @default 'lg'\n   */\n  borderRadius = input<'none' | 'sm' | 'md' | 'lg'>('lg');\n\n  /**\n   * Visual variant.\n   * - `default`: dark gradient with white text\n   * - `slim`: compact single-line banner\n   * - `light`: softer pastel gradient with dark text\n   * @default 'default'\n   */\n  variant = input<HeroVariant>('default');\n\n  /**\n   * Width of the content box. `lg` keeps the background full-bleed and, from\n   * 1024 px, puts the label, title, body, media and footer on the 1024 px page\n   * column (the `lc-container` `lg` content box), never closer to the edge than\n   * the size padding. Use it for a full-width band (`borderRadius=\"none\"`) whose\n   * text should line up with the page content below.\n   * @default 'full'\n   */\n  contentWidth = input<HeroContentWidth>('full');\n\n  protected heroClasses = computed(() => {\n    return [\n      'hero',\n      `hero--${this.color()}`,\n      `hero--${this.size()}`,\n      `hero--radius-${this.borderRadius()}`,\n      `hero--${this.variant()}`,\n      `hero--content-${this.contentWidth()}`,\n    ].join(' ');\n  });\n}\n","<div [class]=\"heroClasses()\">\n  <div class=\"hero__inner\">\n    <div class=\"hero__content\">\n      @if (label()) {\n        <span class=\"hero__label\">{{ label() }}</span>\n      }\n      <h1 class=\"hero__title\">{{ title() }}</h1>\n      <div class=\"hero__body\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n    <div class=\"hero__media\">\n      <ng-content select=\"[hero-media]\"></ng-content>\n    </div>\n  </div>\n  <ng-content select=\"[hero-footer]\"></ng-content>\n</div>\n"],"mappings":";;AAiEA,IAAa,gBAAb,MAAa,cAAa;CAIxB,QAAQ,MAA0B,QAAU,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAK5C,QAAQ,MAAM,SAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMhC,QAAQ,MAAiB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMnC,OAAO,MAAgB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAM5B,eAAe,MAAmC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CASvD,UAAU,MAAmB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAUvC,eAAe,MAAwB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEpC,cAAc,eAAc;EACpC,OAAO;GACL;GACA,SAAS,KAAK,MAAK;GACnB,SAAS,KAAK,KAAI;GAClB,gBAAgB,KAAK,aAAY;GACjC,SAAS,KAAK,QAAO;GACrB,iBAAiB,KAAK,aAAY;EACnC,CAAA,CAAC,KAAK,GAAG;CACZ,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAzDS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAa,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAb,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAa,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,cAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,SAAA;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,UAAA;EAAA,UCjE1B;EAiBA,QAAA,CAAA,unLAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADgDa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EAPzB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAS,YACP;GAAI,iBAGC,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,unLAAA;EAAA,CAAA"}