@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-sidenav.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/sidenav/sidenav.component.ts","../../../../libs/angular-ui-kit/src/lib/sidenav/sidenav.component.html"],"sourcesContent":["import {\n  Component,\n  ChangeDetectionStrategy,\n  signal,\n  computed,\n  input,\n  output,\n  model,\n  effect,\n  untracked,\n  HostListener,\n  OnDestroy,\n  inject,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NgTemplateOutlet, NgStyle } from '@angular/common';\nimport { NavigationEnd, Router, RouterLink } from '@angular/router';\nimport { filter } from 'rxjs';\nimport { A11yModule } from '@angular/cdk/a11y';\nimport { NavigationItem } from '@lifecorner/angular-ui-kit/models';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { BadgeComponent } from '@lifecorner/angular-ui-kit/badge';\nimport { LogoComponent } from '@lifecorner/angular-ui-kit/logo';\n\nexport type SidenavPosition = 'left' | 'right';\nexport type SidenavMode = 'drawer' | 'docked';\n\n/**\n * Surface of the docked sidenav: `default` is the rail on `--color-sidebar`\n * with a border; `transparent` has no background and no border and draws the\n * items as 48 px pills (the side navigation on the page, \"Weite\"). A drawer\n * keeps its surface in both.\n */\nexport type SidenavVariant = 'default' | 'transparent';\n\n/**\n * Sidenav component for application navigation sidebar.\n *\n * Features:\n * - Drawer (overlay) and docked (persistent) modes\n * - Responsive mobile mode — docked automatically switches to drawer below a configurable breakpoint\n * - Collapsed icon-rail mode (narrow 56px sidebar with icons only and hover tooltips)\n * - Integrated logo area with collapse-toggle (sidebar-first layouts)\n * - Hierarchical navigation with collapsible groups (up to 3 levels)\n * - Section headlines for item grouping with optional action buttons\n * - Action buttons on any item (hover-reveal)\n * - Badge support on items (count / status indicator)\n * - One current item, announced and painted alike: the link for `activeRoute`\n *   (or, without it, the one the router's URL matches) gets\n *   `aria-current=\"page\"` and the current look, every other link neither\n *   (AS-16). No hover color change on the current item\n * - Keyboard navigation support (Escape closes drawer)\n * - Configurable width and position (left/right)\n * - Optional backdrop overlay\n * - Theme variants: auto, light, dark (with teal accent for dark mode)\n * - `variant=\"transparent\"`: no rail background or border, items as 48 px\n *   pills with 16 px labels, the current one on `--color-surface-selected`\n * - Items are at least 44 px high in every density; the current item's ink is\n *   `--color-on-surface-selected` (AA on the selected tint)\n * - Accessible: the inner `<nav>` is the navigation landmark; in drawer mode\n *   the panel is a modal dialog (`role=\"dialog\"`, focus moved to the close\n *   button on open, trapped while open, restored on close)\n *\n * @example\n * ```html\n * <lc-sidenav\n *   [isOpen]=\"isOpen\"\n *   mode=\"docked\"\n *   [(collapsed)]=\"isCollapsed\"\n *   [showLogo]=\"true\"\n *   logoSize=\"md\"\n *   [mobileBreakpoint]=\"768\"\n *   [items]=\"navItems\"\n *   activeRoute=\"/dashboard\"\n *   theme=\"dark\"\n *   (closed)=\"isOpen = false\"\n *   (itemClicked)=\"navigate($event)\"\n *   (itemAction)=\"onAction($event)\" />\n * ```\n */\n@Component({\n  selector: 'lc-sidenav',\n  standalone: true,\n  imports: [NgTemplateOutlet, NgStyle, RouterLink, A11yModule, IconComponent, BadgeComponent, LogoComponent],\n  templateUrl: './sidenav.component.html',\n  styleUrl: './sidenav.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.lc-sidenav-container]': 'true',\n    '[class.lc-sidenav-container--docked]': \"effectiveMode() === 'docked'\",\n    '[class.lc-sidenav-container--open]': 'isOpen()',\n  },\n})\nexport class SidenavComponent implements OnDestroy {\n  private readonly router = inject(Router);\n\n  /**\n   * The router's URL, updated on every `NavigationEnd`. Before the first\n   * navigation it is the router's initial URL (`/`). Read only when\n   * `activeRoute` is empty.\n   */\n  private readonly routerUrl = signal(this.router.url);\n\n  /** Whether the sidenav is collapsed to icon-only rail (two-way bindable) */\n  readonly collapsed = model(false);\n\n  /** Whether to show the logo at the top of the sidenav */\n  readonly showLogo = input(false);\n\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. */\n  readonly logoAlt = input('');\n\n  /** Size of the brand logo (forwarded to inner `<lc-logo>`). Defaults to `md` for a prominent brand block aligned with `<lc-header size=\"md\">` (both 64px). */\n  readonly logoSize = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n\n  /** Whether the sidenav is open */\n  readonly isOpen = input(false);\n\n  /** Display mode: 'drawer' (overlay) or 'docked' (persistent sidebar) */\n  readonly mode = input<SidenavMode>('drawer');\n\n  /** Mobile breakpoint in pixels. Below this width, docked mode switches to drawer. */\n  readonly mobileBreakpoint = input(768);\n\n  /** Whether the viewport is below the mobile breakpoint */\n  readonly isMobile = signal(false);\n\n  /** Effective mode: switches docked → drawer on mobile */\n  readonly effectiveMode = computed(() => {\n    if (this.isMobile() && this.mode() === 'docked') {\n      return 'drawer' as SidenavMode;\n    }\n    return this.mode();\n  });\n\n  private mediaQuery: MediaQueryList | null = null;\n  private mediaHandler = (e: MediaQueryListEvent) => this.isMobile.set(e.matches);\n\n  /** Position of the sidenav (left or right) */\n  readonly position = input<SidenavPosition>('left');\n\n  /** Width of the sidenav drawer */\n  readonly width = input('320px');\n\n  /**\n   * ARIA label of the navigation landmark (the inner `<nav>`) and, in drawer\n   * mode, of the dialog panel.\n   */\n  readonly ariaLabel = input('Side navigation');\n\n  /** Whether to show the overlay backdrop */\n  readonly hasOverlay = input(true);\n\n  /**\n   * Navigation items (`NavigationItem[]`): `id`, `icon`, `label`, `route`,\n   * `displayOrder` (sort order, 1 = first); optional `children`\n   * (`NavigationItem[]`, a collapsible group, up to 3 levels), `isSection`\n   * (renders `label` as a section headline over its `children`), `badge`\n   * (`{ value: string | number; variant?: 'default' | 'primary' | 'success' |\n   * 'warning' | 'error' | 'info' }`), `action` (`{ icon: string; ariaLabel?:\n   * string }`, a button that emits `itemAction`), `requiredRole` (for the\n   * app's own filtering; not evaluated here). Items link with `routerLink`;\n   * exactly one link, the current item (see `activeRoute`), gets\n   * `aria-current=\"page\"`.\n   * @default []\n   */\n  readonly items = input<NavigationItem[]>([]);\n\n  /**\n   * The current route. When set, the first link (in display order) whose\n   * `route` equals it is the current item: it alone gets `aria-current=\"page\"`\n   * and the current look, whatever the router matches. When empty, the\n   * sidenav follows the router: the link whose route equals the URL's path is\n   * current, otherwise the one with the longest route the path starts with\n   * (`/household` on `/household/members`; `/` only on `/`).\n   * @default ''\n   */\n  readonly activeRoute = input('');\n\n  /** Theme variant for the sidenav */\n  readonly theme = input<'light' | 'dark' | 'auto'>('auto');\n\n  /**\n   * Surface of the docked sidenav: `default` (the rail with background and\n   * border) or `transparent` (no background, no border, items as 48 px pills\n   * with radius full and 16 px labels; the current one on\n   * `--color-surface-selected`). A drawer keeps its surface.\n   */\n  readonly variant = input<SidenavVariant>('default');\n\n  /** Accessible name of the logo button that collapses/expands the sidebar. */\n  readonly toggleAriaLabel = input('Toggle sidebar');\n\n  /** Accessible name of the collapse button. Empty: \"Collapse navigation to the left/right\" by `position`. */\n  readonly collapseAriaLabel = input('');\n\n  /** Tooltip of the collapse button. */\n  readonly collapseTitle = input('Collapse sidebar');\n\n  /** Accessible name of the close button (drawer mode). */\n  readonly closeAriaLabel = input('Close navigation');\n\n  /**\n   * Ids of the expanded parent items — the single source of truth for\n   * `isExpanded`. Seeded with the current item's parent whenever it changes\n   * (see constructor), so a group opens on navigation but can still\n   * be collapsed by the user. (It used to be OR-ed with `hasActiveChild` at\n   * read time, so toggling such a group flipped the set without ever closing\n   * it — the set drifted out of sync with what was on screen.)\n   */\n  readonly expandedItems = signal<Set<string>>(new Set());\n\n  /** Ids of the collapsible parents (top-level groups, section sub-groups) that contain the current item. */\n  private readonly activeChildParents = computed(() => {\n    const current = this.currentItem();\n    const ids: string[] = [];\n    if (!current) return ids;\n    for (const item of this.items()) {\n      const collapsibles = item.isSection ? (item.children ?? []) : [item];\n      for (const parent of collapsibles) {\n        if (parent.children?.includes(current)) {\n          ids.push(parent.id);\n        }\n      }\n    }\n    return ids;\n  });\n\n  /**\n   * Computed sorted navigation items by displayOrder\n   */\n  readonly sortedItems = computed(() => {\n    return [...this.items()].sort((a, b) => a.displayOrder - b.displayOrder);\n  });\n\n  /**\n   * Every item rendered as a link, in display order (depth first): simple\n   * items, the children of a group, the children of a section, and the\n   * children of a section's sub-group.\n   */\n  private readonly linkItems = computed(() => {\n    const links: NavigationItem[] = [];\n    for (const item of this.sortedItems()) {\n      if (item.isSection) {\n        for (const child of item.children ?? []) {\n          if (child.children?.length) links.push(...child.children);\n          else links.push(child);\n        }\n      } else if (item.children?.length) {\n        links.push(...item.children);\n      } else {\n        links.push(item);\n      }\n    }\n    return links;\n  });\n\n  /** The router URL's path: primary outlet only, no query, fragment or matrix parameters. */\n  private readonly routerPath = computed(() => {\n    const segments = this.router.parseUrl(this.routerUrl()).root.children['primary']?.segments ?? [];\n    return `/${segments.map((segment) => segment.path).join('/')}`;\n  });\n\n  /**\n   * The one current link (or none). The single source of both the current\n   * look (`lc-sidenav__nav-item--active`) and `aria-current=\"page\"` (AS-16).\n   * With `activeRoute` set: the first link whose route equals it. Without:\n   * the router's path — the exact match wins, otherwise the longest link\n   * route the path continues with a `/` (`/` matches only `/`); ties go to\n   * the first link in display order.\n   */\n  private readonly currentItem = computed<NavigationItem | null>(() => {\n    const links = this.linkItems();\n    const active = this.activeRoute();\n    if (active !== '') return links.find((link) => link.route === active) ?? null;\n    const path = this.routerPath();\n    const exact = links.find((link) => link.route === path);\n    if (exact) return exact;\n    let best: NavigationItem | null = null;\n    for (const link of links) {\n      const route = link.route;\n      if (!route || route === '/' || !path.startsWith(`${route}/`)) continue;\n      if (!best || route.length > best.route.length) best = link;\n    }\n    return best;\n  });\n\n  /**\n   * Event emitted when the sidenav should close\n   */\n  readonly closed = output<void>();\n\n  /**\n   * Event emitted when a navigation item is clicked\n   */\n  readonly itemClicked = output<NavigationItem>();\n\n  /**\n   * Event emitted when an item's action button is clicked\n   */\n  readonly itemAction = output<NavigationItem>();\n\n  constructor() {\n    this.router.events\n      .pipe(\n        filter((event): event is NavigationEnd => event instanceof NavigationEnd),\n        takeUntilDestroyed(),\n      )\n      .subscribe(() => this.routerUrl.set(this.router.url));\n\n    // React to mobileBreakpoint changes\n    effect(() => {\n      this.mobileBreakpoint(); // track dependency\n      this.setupMediaQuery();\n    });\n\n    // Navigating into a group opens it: add the active child's parent(s) to\n    // the expanded set. Only additive — the user's own collapses/expands of\n    // other groups survive a route change.\n    effect(() => {\n      const parents = this.activeChildParents();\n      if (parents.length === 0) return;\n      const expanded = untracked(this.expandedItems);\n      if (parents.every((id) => expanded.has(id))) return;\n      this.expandedItems.set(new Set([...expanded, ...parents]));\n    });\n  }\n\n  ngOnDestroy(): void {\n    this.teardownMediaQuery();\n  }\n\n  private setupMediaQuery(): void {\n    if (typeof window === 'undefined') return;\n    this.teardownMediaQuery();\n    this.mediaQuery = window.matchMedia(`(max-width: ${this.mobileBreakpoint()}px)`);\n    this.isMobile.set(this.mediaQuery.matches);\n    this.mediaQuery.addEventListener('change', this.mediaHandler);\n  }\n\n  private teardownMediaQuery(): void {\n    this.mediaQuery?.removeEventListener('change', this.mediaHandler);\n    this.mediaQuery = null;\n  }\n\n  /**\n   * Computed CSS classes for the sidenav\n   */\n  sidenavClasses = computed(() => {\n    const classes = ['lc-sidenav'];\n    classes.push(`lc-sidenav--${this.position()}`);\n    classes.push(`lc-sidenav--${this.effectiveMode()}`);\n    if (this.isOpen()) {\n      classes.push('lc-sidenav--open');\n    }\n    if (this.collapsed() && !this.isMobile()) {\n      classes.push('lc-sidenav--collapsed');\n    }\n    if (this.theme() !== 'auto') {\n      classes.push(`lc-sidenav--${this.theme()}`);\n    }\n    if (this.variant() === 'transparent') {\n      classes.push('lc-sidenav--transparent');\n    }\n    return classes.join(' ');\n  });\n\n  /**\n   * Computed inline styles for the sidenav\n   */\n  sidenavStyles = computed(() => ({\n    width: this.isMobile() ? this.width() : (this.collapsed() ? '56px' : this.width()),\n  }));\n\n  /**\n   * Toggle collapsed state\n   */\n  toggleCollapsed(): void {\n    this.collapsed.set(!this.collapsed());\n  }\n\n  /**\n   * Handle close action\n   */\n  handleClose(): void {\n    this.closed.emit();\n  }\n\n  /**\n   * Handle navigation item click\n   */\n  handleItemClick(item: NavigationItem): void {\n    this.itemClicked.emit(item);\n    // Auto-close drawer on mobile after navigation\n    if (this.isMobile()) {\n      this.handleClose();\n    }\n  }\n\n  /**\n   * Handle action button click on a navigation item\n   */\n  handleItemAction(event: Event, item: NavigationItem): void {\n    event.stopPropagation();\n    this.itemAction.emit(item);\n  }\n\n  /**\n   * Whether the item is the current link (see `currentItem`): it alone is\n   * painted current and carries `aria-current=\"page\"`.\n   */\n  isItemActive(item: NavigationItem): boolean {\n    return this.currentItem() === item;\n  }\n\n  /**\n   * Check if a parent item contains the current link\n   */\n  hasActiveChild(item: NavigationItem): boolean {\n    const current = this.currentItem();\n    return !!current && !!item.children?.includes(current);\n  }\n\n  /**\n   * Toggle expansion of a parent item.\n   * If the sidenav is collapsed, expand it first.\n   */\n  toggleExpanded(item: NavigationItem): void {\n    if (this.collapsed()) {\n      this.collapsed.set(false);\n      // Expand the clicked item after uncollapsing\n      const expanded = new Set(this.expandedItems());\n      expanded.add(item.id);\n      this.expandedItems.set(expanded);\n      return;\n    }\n    const expanded = new Set(this.expandedItems());\n    if (expanded.has(item.id)) {\n      expanded.delete(item.id);\n    } else {\n      expanded.add(item.id);\n    }\n    this.expandedItems.set(expanded);\n  }\n\n  /**\n   * Check if an item is expanded\n   */\n  isExpanded(item: NavigationItem): boolean {\n    return this.expandedItems().has(item.id);\n  }\n\n  /**\n   * Handle keyboard navigation. Keyed on the EFFECTIVE mode: a docked sidenav\n   * that has become a drawer below the mobile breakpoint must close on Escape\n   * like any drawer.\n   */\n  @HostListener('document:keydown', ['$event'])\n  handleKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.isOpen() && this.effectiveMode() === 'drawer') {\n      this.handleClose();\n    }\n  }\n}\n","<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n  @if (isOpen()) {\n    <!-- Overlay backdrop -->\n    @if (hasOverlay()) {\n      <div\n        class=\"lc-sidenav__overlay\"\n        (click)=\"handleClose()\"\n        aria-hidden=\"true\">\n      </div>\n    }\n\n    <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n  }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n  <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template.\n     The <aside> is a plain complementary region; the navigation landmark is\n     the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n     two navigation landmarks). In drawer mode the panel is a modal dialog:\n     focus is captured (close button first, see cdkFocusInitial), trapped\n     while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n  <aside\n    [class]=\"sidenavClasses()\"\n    [ngStyle]=\"sidenavStyles()\"\n    [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n    [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n    [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n    [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n    [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n    <!-- Logo area (sidebar-first layout) -->\n    @if (showLogo()) {\n      <div\n        class=\"lc-sidenav__logo\"\n        [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n        [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n        [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n        [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n        [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n      >\n        <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n          <lc-logo\n            [variant]=\"collapsed() ? 'emblem' : 'full'\"\n            [size]=\"collapsed() ? 'sm' : 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() || 'Logo'\"\n          />\n        </button>\n        @if (!collapsed() && effectiveMode() === 'docked') {\n          <button\n            type=\"button\"\n            class=\"lc-sidenav__logo-toggle\"\n            (click)=\"toggleCollapsed()\"\n            [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n            [attr.title]=\"collapseTitle()\">\n            <lc-icon\n              [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n              size=\"sm\"\n              [decorative]=\"true\" />\n          </button>\n        }\n      </div>\n    }\n\n    <!-- Close button (drawer mode only) -->\n    @if (effectiveMode() === 'drawer') {\n      <button\n        type=\"button\"\n        class=\"lc-sidenav__close\"\n        cdkFocusInitial\n        (click)=\"handleClose()\"\n        [attr.aria-label]=\"closeAriaLabel()\">\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"24\"\n          height=\"24\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width=\"2\"\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\">\n          <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n          <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n        </svg>\n      </button>\n    }\n\n    <!-- Navigation items (if provided) -->\n    @if (items().length > 0) {\n      <nav\n        class=\"lc-sidenav__nav\"\n        [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n        [attr.aria-label]=\"ariaLabel()\">\n        @for (item of sortedItems(); track item.id) {\n          <!-- Section headline -->\n          @if (item.isSection) {\n            <div class=\"lc-sidenav__section\">\n              <div class=\"lc-sidenav__section-header\">\n                <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n                @if (item.action) {\n                  <button\n                    type=\"button\"\n                    class=\"lc-sidenav__action-btn\"\n                    [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                    (click)=\"handleItemAction($event, item)\">\n                    <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                  </button>\n                }\n              </div>\n              @if (item.children?.length) {\n                <ul class=\"lc-sidenav__section-items\">\n                  @for (child of item.children; track child.id) {\n                    <li>\n                      @if (child.children?.length) {\n                        <!-- Section child with nested children (collapsible) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <button\n                            type=\"button\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                            [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n                            [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n                            (click)=\"toggleExpanded(child)\"\n                            [attr.aria-expanded]=\"isExpanded(child)\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                            <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n                          </button>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                        @if (isExpanded(child)) {\n                          <div class=\"lc-sidenav__nav-children\">\n                            @for (grandchild of child.children; track grandchild.id) {\n                              <a\n                                [routerLink]=\"grandchild.route\"\n                                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                                (click)=\"handleItemClick(grandchild)\"\n                                [class.lc-sidenav__nav-item--active]=\"isItemActive(grandchild)\"\n                                [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n                                @if (grandchild.icon) {\n                                  <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                                }\n                                <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n                                @if (grandchild.badge) {\n                                  <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n                                }\n                              </a>\n                            }\n                          </div>\n                        }\n                      } @else {\n                        <!-- Section child (simple link) -->\n                        <div class=\"lc-sidenav__nav-item-row\">\n                          <a\n                            [routerLink]=\"child.route\"\n                            class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                            (click)=\"handleItemClick(child)\"\n                            [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n                            [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n                            [title]=\"collapsed() ? child.label : ''\">\n                            @if (child.icon) {\n                              <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                            }\n                            <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                            @if (child.badge) {\n                              <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                            }\n                          </a>\n                          @if (child.action) {\n                            <button\n                              type=\"button\"\n                              class=\"lc-sidenav__action-btn\"\n                              [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n                              (click)=\"handleItemAction($event, child)\">\n                              <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                            </button>\n                          }\n                        </div>\n                      }\n                    </li>\n                  }\n                </ul>\n              }\n            </div>\n          } @else if (item.children?.length) {\n            <!-- Parent item with children (collapsible group) -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <button\n                type=\"button\"\n                class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n                [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n                [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n                (click)=\"toggleExpanded(item)\"\n                [attr.aria-expanded]=\"isExpanded(item)\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n                <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n              </button>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n            @if (isExpanded(item)) {\n              <div class=\"lc-sidenav__nav-children\">\n                @for (child of item.children; track child.id) {\n                  <a\n                    [routerLink]=\"child.route\"\n                    class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n                    (click)=\"handleItemClick(child)\"\n                    [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n                    [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n                    <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                    <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n                    @if (child.badge) {\n                      <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n                    }\n                  </a>\n                }\n              </div>\n            }\n          } @else {\n            <!-- Simple item without children -->\n            <div class=\"lc-sidenav__nav-item-row\">\n              <a\n                [routerLink]=\"item.route\"\n                class=\"lc-sidenav__nav-item\"\n                (click)=\"handleItemClick(item)\"\n                [class.lc-sidenav__nav-item--active]=\"isItemActive(item)\"\n                [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n                [title]=\"collapsed() ? item.label : ''\">\n                <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n                <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n                @if (item.badge) {\n                  <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n                }\n              </a>\n              @if (item.action) {\n                <button\n                  type=\"button\"\n                  class=\"lc-sidenav__action-btn\"\n                  [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n                  (click)=\"handleItemAction($event, item)\">\n                  <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n                </button>\n              }\n            </div>\n          }\n        }\n      </nav>\n    }\n\n    <!-- Content projection (for custom content) -->\n    <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"effectiveMode() === 'docked'\">\n      <ng-content></ng-content>\n    </div>\n  </aside>\n</ng-template>\n"],"mappings":";;;;;;;;;;;AA6FA,IAAa,mBAAb,MAAa,iBAAgB;CACV,SAAS,OAAO,MAAM;CAOtB,YAAY,OAAO,KAAK,OAAO,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAG3C,YAAY,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGxB,WAAW,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGvB,UAAU,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAEnB,gBAAgB,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAEzB,cAAc,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAEvB,oBAAoB,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,oBAAA,CAAA,+BAAA,CAAA,CAAA;CAE7B,UAAU,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGnB,WAAW,MAAwC,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGxD,SAAS,MAAM,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAGrB,OAAO,MAAmB,UAAS,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGnC,mBAAmB,MAAM,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAG7B,WAAW,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGxB,gBAAgB,eAAc;EACrC,IAAI,KAAK,SAAQ,KAAM,KAAK,KAAI,MAAO,UACrC,OAAO;EAET,OAAO,KAAK,KAAI;CAClB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAEM,aAAoC;CACpC,gBAAgB,MAA2B,KAAK,SAAS,IAAI,EAAE,OAAO;CAGrE,WAAW,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGzC,QAAQ,MAAM,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAMtB,YAAY,MAAM,mBAAkB,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGpC,aAAa,MAAM,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAexB,QAAQ,MAAwB,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAWnC,cAAc,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGvB,QAAQ,MAAiC,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAQhD,UAAU,MAAsB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAG1C,kBAAkB,MAAM,kBAAiB,GAAA,YAAA,CAAA,EAAA,WAAA,kBAAA,CAAA,+BAAA,CAAA,CAAA;CAGzC,oBAAoB,MAAM,IAAG,GAAA,YAAA,CAAA,EAAA,WAAA,oBAAA,CAAA,+BAAA,CAAA,CAAA;CAG7B,gBAAgB,MAAM,oBAAmB,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAGzC,iBAAiB,MAAM,oBAAmB,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAU1C,gBAAgB,uBAAoB,IAAI,IAAG,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAGtC,qBAAqB,eAAc;EAClD,MAAM,UAAU,KAAK,YAAW;EAChC,MAAM,MAAgB,CAAA;EACtB,IAAI,CAAC,SAAS,OAAO;EACrB,KAAK,MAAM,QAAQ,KAAK,MAAK,GAAI;GAC/B,MAAM,eAAe,KAAK,YAAa,KAAK,YAAY,CAAA,IAAM,CAAC,IAAI;GACnE,KAAK,MAAM,UAAU,cACnB,IAAI,OAAO,UAAU,SAAS,OAAO,GACnC,IAAI,KAAK,OAAO,EAAE;EAGxB;EACA,OAAO;CACT,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,qBAAA,CAAA,+BAAA,CAAA,CAAA;CAKO,cAAc,eAAc;EACnC,OAAO,CAAC,GAAG,KAAK,MAAK,CAAE,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,eAAe,EAAE,YAAY;CACzE,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAOe,YAAY,eAAc;EACzC,MAAM,QAA0B,CAAA;EAChC,KAAK,MAAM,QAAQ,KAAK,YAAW,GACjC,IAAI,KAAK,WACP,KAAK,MAAM,SAAS,KAAK,YAAY,CAAA,GACnC,IAAI,MAAM,UAAU,QAAQ,MAAM,KAAK,GAAG,MAAM,QAAQ;OACnD,MAAM,KAAK,KAAK;OAElB,IAAI,KAAK,UAAU,QACxB,MAAM,KAAK,GAAG,KAAK,QAAQ;OAE3B,MAAM,KAAK,IAAI;EAGnB,OAAO;CACT,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGe,aAAa,eAAc;EAE1C,OAAO,KADU,KAAK,OAAO,SAAS,KAAK,UAAS,CAAE,CAAC,CAAC,KAAK,SAAS,UAAU,EAAE,YAAY,CAAA,EACnF,CAAS,KAAK,YAAY,QAAQ,IAAI,CAAC,CAAC,KAAK,GAAG;CAC7D,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAUe,cAAc,eAAqC;EAClE,MAAM,QAAQ,KAAK,UAAS;EAC5B,MAAM,SAAS,KAAK,YAAW;EAC/B,IAAI,WAAW,IAAI,OAAO,MAAM,MAAM,SAAS,KAAK,UAAU,MAAM,KAAK;EACzE,MAAM,OAAO,KAAK,WAAU;EAC5B,MAAM,QAAQ,MAAM,MAAM,SAAS,KAAK,UAAU,IAAI;EACtD,IAAI,OAAO,OAAO;EAClB,IAAI,OAA8B;EAClC,KAAK,MAAM,QAAQ,OAAO;GACxB,MAAM,QAAQ,KAAK;GACnB,IAAI,CAAC,SAAS,UAAU,OAAO,CAAC,KAAK,WAAW,GAAG,MAAK,EAAG,GAAG;GAC9D,IAAI,CAAC,QAAQ,MAAM,SAAS,KAAK,MAAM,QAAQ,OAAO;EACxD;EACA,OAAO;CACT,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAKO,SAAS,OAAM;CAKf,cAAc,OAAM;CAKpB,aAAa,OAAM;CAE5B,cAAA;EACE,KAAK,OAAO,OACT,KACC,QAAQ,UAAkC,iBAAiB,aAAa,GACxE,mBAAkB,CAAE,CACrB,CACA,gBAAgB,KAAK,UAAU,IAAI,KAAK,OAAO,GAAG,CAAC;EAGtD,aAAY;GACV,KAAK,iBAAgB;GACrB,KAAK,gBAAe;EACtB,CAAC;EAKD,aAAY;GACV,MAAM,UAAU,KAAK,mBAAkB;GACvC,IAAI,QAAQ,WAAW,GAAG;GAC1B,MAAM,WAAW,UAAU,KAAK,aAAa;GAC7C,IAAI,QAAQ,OAAO,OAAO,SAAS,IAAI,EAAE,CAAC,GAAG;GAC7C,KAAK,cAAc,oBAAI,IAAI,IAAI,CAAC,GAAG,UAAU,GAAG,OAAO,CAAC,CAAC;EAC3D,CAAC;CACH;CAEA,cAAW;EACT,KAAK,mBAAkB;CACzB;CAEQ,kBAAe;EACrB,IAAI,OAAO,WAAW,aAAa;EACnC,KAAK,mBAAkB;EACvB,KAAK,aAAa,OAAO,WAAW,eAAe,KAAK,iBAAgB,EAAE,IAAK;EAC/E,KAAK,SAAS,IAAI,KAAK,WAAW,OAAO;EACzC,KAAK,WAAW,iBAAiB,UAAU,KAAK,YAAY;CAC9D;CAEQ,qBAAkB;EACxB,KAAK,YAAY,oBAAoB,UAAU,KAAK,YAAY;EAChE,KAAK,aAAa;CACpB;CAKA,iBAAiB,eAAc;EAC7B,MAAM,UAAU,CAAC,YAAY;EAC7B,QAAQ,KAAK,eAAe,KAAK,SAAQ,GAAI;EAC7C,QAAQ,KAAK,eAAe,KAAK,cAAa,GAAI;EAClD,IAAI,KAAK,OAAM,GACb,QAAQ,KAAK,kBAAkB;EAEjC,IAAI,KAAK,UAAS,KAAM,CAAC,KAAK,SAAQ,GACpC,QAAQ,KAAK,uBAAuB;EAEtC,IAAI,KAAK,MAAK,MAAO,QACnB,QAAQ,KAAK,eAAe,KAAK,MAAK,GAAI;EAE5C,IAAI,KAAK,QAAO,MAAO,eACrB,QAAQ,KAAK,yBAAyB;EAExC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAKF,gBAAgB,gBAAgB,EAC9B,OAAO,KAAK,SAAQ,IAAK,KAAK,MAAK,IAAM,KAAK,UAAS,IAAK,SAAS,KAAK,MAAK,EAChF,IAAE,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAKH,kBAAe;EACb,KAAK,UAAU,IAAI,CAAC,KAAK,UAAS,CAAE;CACtC;CAKA,cAAW;EACT,KAAK,OAAO,KAAI;CAClB;CAKA,gBAAgB,MAAoB;EAClC,KAAK,YAAY,KAAK,IAAI;EAE1B,IAAI,KAAK,SAAQ,GACf,KAAK,YAAW;CAEpB;CAKA,iBAAiB,OAAc,MAAoB;EACjD,MAAM,gBAAe;EACrB,KAAK,WAAW,KAAK,IAAI;CAC3B;CAMA,aAAa,MAAoB;EAC/B,OAAO,KAAK,YAAW,MAAO;CAChC;CAKA,eAAe,MAAoB;EACjC,MAAM,UAAU,KAAK,YAAW;EAChC,OAAO,CAAC,CAAC,WAAW,CAAC,CAAC,KAAK,UAAU,SAAS,OAAO;CACvD;CAMA,eAAe,MAAoB;EACjC,IAAI,KAAK,UAAS,GAAI;GACpB,KAAK,UAAU,IAAI,KAAK;GAExB,MAAM,WAAW,IAAI,IAAI,KAAK,cAAa,CAAE;GAC7C,SAAS,IAAI,KAAK,EAAE;GACpB,KAAK,cAAc,IAAI,QAAQ;GAC/B;EACF;EACA,MAAM,WAAW,IAAI,IAAI,KAAK,cAAa,CAAE;EAC7C,IAAI,SAAS,IAAI,KAAK,EAAE,GACtB,SAAS,OAAO,KAAK,EAAE;OAEvB,SAAS,IAAI,KAAK,EAAE;EAEtB,KAAK,cAAc,IAAI,QAAQ;CACjC;CAKA,WAAW,MAAoB;EAC7B,OAAO,KAAK,cAAa,CAAE,CAAC,IAAI,KAAK,EAAE;CACzC;CAQA,cAAc,OAAoB;EAChC,IAAI,MAAM,QAAQ,YAAY,KAAK,OAAM,KAAM,KAAK,cAAa,MAAO,UACtE,KAAK,YAAW;CAEpB;CAzXW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAgB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAhB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAgB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;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,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,mBAAA;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,UAAA;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,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,kBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;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,WAAA;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,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,aAAA;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,SAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,iBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,mBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,gBAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,QAAA;GAAA,aAAA;GAAA,YAAA;EAAA;EAAA,MAAA;GAAA,WAAA,EAAA,oBAAA,wBAAA;GAAA,YAAA;IAAA,8BAAA;IAAA,sCAAA;IAAA,oCAAA;GAAA;EAAA;EAAA,UAAA;EAAA,UC7F7B;EAsSA,QAAA,CAAA,+gZAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MDnNY;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAO,UAAA;IAAA,QAAA,CAAA,SAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAU,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;GAAU;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;IAAA,QAAA,CAAA,gBAAA,yBAAA;IAAA,UAAA,CAAA,cAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAa,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAc,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAa,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAU9F,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAgB,YAAA,CAAA;EAb5B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAY,YACV;GAAI,SACP;IAAC;IAAkB;IAAS;IAAY;IAAY;IAAe;IAAgB;GAAa;GAAC,iBAGzF,wBAAwB;GAAM,MACzC;IACJ,gCAAgC;IAChC,wCAAwC;IACxC,sCAAsC;GACvC;GAAA,UAAA;GAAA,QAAA,CAAA,+gZAAA;EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsXA,MAAA;GAAa,MAAA,CAAA,oBAAoB,CAAC,QAAQ,CAAC"}

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

@@ -0,0 +1,144 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var SkeletonComponent = class SkeletonComponent {
+	variant = input("line", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	width = input(...ngDevMode ? [void 0, { debugName: "width" }] : /* istanbul ignore next */ []);
+	height = input(...ngDevMode ? [void 0, { debugName: "height" }] : /* istanbul ignore next */ []);
+	borderRadius = input(...ngDevMode ? [void 0, { debugName: "borderRadius" }] : /* istanbul ignore next */ []);
+	variantClass = computed(() => `lc-skeleton--${this.variant()}`, ...ngDevMode ? [{ debugName: "variantClass" }] : /* istanbul ignore next */ []);
+	styles = computed(() => {
+		const d = {
+			line: {
+				w: "100%",
+				h: "0.875rem",
+				r: "0.25rem"
+			},
+			circle: {
+				w: "40px",
+				h: "40px",
+				r: "50%"
+			},
+			rect: {
+				w: "100%",
+				h: "100px",
+				r: "0.5rem"
+			}
+		}[this.variant()];
+		return {
+			width: this.width() ?? d.w,
+			height: this.height() ?? d.h,
+			"border-radius": this.borderRadius() ?? d.r
+		};
+	}, ...ngDevMode ? [{ debugName: "styles" }] : /* istanbul ignore next */ []);
+	hostWidth = computed(() => this.styles().width, ...ngDevMode ? [{ debugName: "hostWidth" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SkeletonComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: SkeletonComponent,
+		isStandalone: true,
+		selector: "lc-skeleton",
+		inputs: {
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			height: {
+				classPropertyName: "height",
+				publicName: "height",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			borderRadius: {
+				classPropertyName: "borderRadius",
+				publicName: "borderRadius",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: { properties: {
+			"style.width": "hostWidth()",
+			"style.flex-shrink": "\"0\""
+		} },
+		ngImport: i0,
+		template: "<div class=\"lc-skeleton\" [class]=\"variantClass()\" [style]=\"styles()\"></div>\n",
+		styles: [":host{display:block}.lc-skeleton{background:linear-gradient(90deg,var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2))) 25%,var(--lc-skeleton-highlight, var(--color-skeleton-highlight, var(--color-surface-hover))) 50%,var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2))) 75%);background-size:200% 100%;animation:lc-skeleton-shimmer 1.5s infinite ease-in-out}@media(prefers-reduced-motion:reduce){.lc-skeleton{animation:none;background:var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2)))}}@keyframes lc-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SkeletonComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-skeleton",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[style.width]": "hostWidth()",
+				"[style.flex-shrink]": "\"0\""
+			},
+			template: "<div class=\"lc-skeleton\" [class]=\"variantClass()\" [style]=\"styles()\"></div>\n",
+			styles: [":host{display:block}.lc-skeleton{background:linear-gradient(90deg,var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2))) 25%,var(--lc-skeleton-highlight, var(--color-skeleton-highlight, var(--color-surface-hover))) 50%,var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2))) 75%);background-size:200% 100%;animation:lc-skeleton-shimmer 1.5s infinite ease-in-out}@media(prefers-reduced-motion:reduce){.lc-skeleton{animation:none;background:var(--lc-skeleton-bg, var(--color-skeleton, var(--color-surface-2)))}}@keyframes lc-skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}\n"]
+		}]
+	}],
+	propDecorators: {
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		height: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "height",
+				required: false
+			}]
+		}],
+		borderRadius: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "borderRadius",
+				required: false
+			}]
+		}]
+	}
+});
+export { SkeletonComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-skeleton.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-skeleton.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.ts","../../../../libs/angular-ui-kit/src/lib/skeleton/skeleton.component.html"],"sourcesContent":["import { Component, ChangeDetectionStrategy, input, computed } from '@angular/core';\n\nexport type SkeletonVariant = 'line' | 'circle' | 'rect';\n\n/**\n * Skeleton loader component for placeholder loading states.\n *\n * Features:\n * - Variant shapes (text, rect, circle)\n * - Shimmer animation effect; a static fill under `prefers-reduced-motion`\n * - Colours from `--color-skeleton` / `--color-skeleton-highlight`, overridable\n *   with the `--lc-skeleton-bg` / `--lc-skeleton-highlight` hooks\n * - Custom width, height, and border radius\n * - Composable for building complex loading layouts\n * - Dark mode compatible\n *\n * @example\n * ```html\n * <lc-skeleton />\n * <lc-skeleton variant=\"circle\" width=\"40px\" height=\"40px\" />\n * <lc-skeleton variant=\"rect\" width=\"100%\" height=\"400px\" />\n * ```\n */\n@Component({\n  selector: 'lc-skeleton',\n  standalone: true,\n  templateUrl: './skeleton.component.html',\n  styleUrl: './skeleton.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    // The host mirrors the box width so the skeleton sizes correctly inside\n    // flex layouts, and never shrinks below it.\n    '[style.width]': 'hostWidth()',\n    '[style.flex-shrink]': '\"0\"',\n  },\n})\nexport class SkeletonComponent {\n  /** Shape variant. */\n  readonly variant = input<SkeletonVariant>('line');\n\n  /** Width (CSS value). Defaults to '100%' for line/rect, '40px' for circle. */\n  readonly width = input<string>();\n\n  /** Height (CSS value). Defaults to '0.875rem' for line, '40px' for circle, '100px' for rect. */\n  readonly height = input<string>();\n\n  /** Border radius override (CSS value). */\n  readonly borderRadius = input<string>();\n\n  protected readonly variantClass = computed(() => `lc-skeleton--${this.variant()}`);\n\n  protected readonly styles = computed(() => {\n    const v = this.variant();\n    const defaults: Record<SkeletonVariant, { w: string; h: string; r: string }> = {\n      line: { w: '100%', h: '0.875rem', r: '0.25rem' },\n      circle: { w: '40px', h: '40px', r: '50%' },\n      rect: { w: '100%', h: '100px', r: '0.5rem' },\n    };\n    const d = defaults[v];\n    return {\n      width: this.width() ?? d.w,\n      height: this.height() ?? d.h,\n      'border-radius': this.borderRadius() ?? d.r,\n    };\n  });\n\n  protected readonly hostWidth = computed(() => this.styles().width);\n}\n","<div class=\"lc-skeleton\" [class]=\"variantClass()\" [style]=\"styles()\"></div>\n"],"mappings":";;AAoCA,IAAa,oBAAb,MAAa,kBAAiB;CAEnB,UAAU,MAAuB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGxC,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGvB,SAAS,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAGxB,eAAe,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAEpB,eAAe,eAAe,gBAAgB,KAAK,QAAO,KAAK,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAE/D,SAAS,eAAc;EAOxC,MAAM,IAAI;GAJR,MAAM;IAAE,GAAG;IAAQ,GAAG;IAAY,GAAG;GAAS;GAC9C,QAAQ;IAAE,GAAG;IAAQ,GAAG;IAAQ,GAAG;GAAK;GACxC,MAAM;IAAE,GAAG;IAAQ,GAAG;IAAS,GAAG;GAAQ;EAElC,EANA,KAAK,QAMI;EACnB,OAAO;GACL,OAAO,KAAK,MAAK,KAAM,EAAE;GACzB,QAAQ,KAAK,OAAM,KAAM,EAAE;GAC3B,iBAAiB,KAAK,aAAY,KAAM,EAAE;EAC3C;CACH,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,SAAA,CAAA,+BAAA,CAAA,CAAA;CAEiB,YAAY,eAAe,KAAK,OAAM,CAAE,CAAC,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CA9BvD,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAiB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAjB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAiB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,SAAA;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,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;GAAA,eAAA;GAAA,qBAAA;EAAA,EAAA;EAAA,UAAA;EAAA,UCpC9B;EACA,QAAA,CAAA,ynBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADmCa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAiB,YAAA,CAAA;EAb7B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAa,YACX;GAAI,iBAGC,wBAAwB;GAAM,MACzC;IAGJ,iBAAiB;IACjB,uBAAuB;GACxB;GAAA,UAAA;GAAA,QAAA,CAAA,ynBAAA;EAAA,CAAA"}

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

@@ -0,0 +1,204 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, forwardRef, input, output, signal } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+var SliderComponent = class SliderComponent {
+	static nextId = 0;
+	min = input(0, ...ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []);
+	max = input(100, ...ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []);
+	step = input(1, ...ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []);
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	showValue = input(true, ...ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []);
+	disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+	valueChange = output();
+	inputId = `lc-slider-${++SliderComponent.nextId}`;
+	rawValue = signal(null, ...ngDevMode ? [{ debugName: "rawValue" }] : /* istanbul ignore next */ []);
+	value = computed(() => {
+		const minV = this.min();
+		const maxV = this.max();
+		return Math.min(maxV, Math.max(minV, this.rawValue() ?? minV));
+	}, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	fillPercentage = computed(() => {
+		const minV = this.min();
+		const maxV = this.max();
+		if (maxV === minV) return 0;
+		return (this.value() - minV) / (maxV - minV) * 100;
+	}, ...ngDevMode ? [{ debugName: "fillPercentage" }] : /* istanbul ignore next */ []);
+	sliderClasses = computed(() => {
+		const classes = ["slider"];
+		if (this.isDisabled()) classes.push("slider--disabled");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "sliderClasses" }] : /* istanbul ignore next */ []);
+	onChange = () => {};
+	onTouched = () => {};
+	onInput(event) {
+		const target = event.target;
+		const val = Number(target.value);
+		this.rawValue.set(val);
+		this.valueChange.emit(val);
+		this.onChange(val);
+	}
+	onBlur() {
+		this.onTouched();
+	}
+	writeValue(val) {
+		this.rawValue.set(val);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SliderComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SliderComponent,
+		isStandalone: true,
+		selector: "lc-slider",
+		inputs: {
+			min: {
+				classPropertyName: "min",
+				publicName: "min",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			max: {
+				classPropertyName: "max",
+				publicName: "max",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			step: {
+				classPropertyName: "step",
+				publicName: "step",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showValue: {
+				classPropertyName: "showValue",
+				publicName: "showValue",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { valueChange: "valueChange" },
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => SliderComponent),
+			multi: true
+		}],
+		ngImport: i0,
+		template: "<div [class]=\"sliderClasses()\">\n  @if (label()) {\n    <label class=\"slider__label\" [for]=\"inputId\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"slider__value\">{{ value() }}</span>\n      }\n    </label>\n  }\n  <div class=\"slider__track-wrapper\">\n    <input\n      [id]=\"inputId\"\n      type=\"range\"\n      class=\"slider__input\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [style.--fill-percent]=\"fillPercentage() + '%'\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n  @if (!label() && showValue()) {\n    <span class=\"slider__value slider__value--standalone\">{{ value() }}</span>\n  }\n</div>\n",
+		styles: [".slider{display:flex;flex-direction:column;gap:.375rem;width:100%}.slider__label{display:flex;justify-content:space-between;align-items:center;font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.slider__value{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary);font-size:var(--typography-font-size-sm, .875rem)}.slider__value--standalone{text-align:right}.slider__track-wrapper{position:relative;display:flex;align-items:center;width:100%}.slider__input{-webkit-appearance:none;appearance:none;width:100%;height:.375rem;border-radius:var(--border-radius-full);background:linear-gradient(to right,var(--color-primary-500) var(--fill-percent, 0%),var(--color-surface-sunken) var(--fill-percent, 0%));box-shadow:inset 0 0 0 1px var(--color-border-strong);outline:none;cursor:pointer;transition:background .15s ease}.slider__input::-webkit-slider-thumb{-webkit-appearance:none;width:1.125rem;height:1.125rem;border-radius:50%;background:var(--color-primary-500);border:2px solid #ffffff;box-shadow:0 1px 3px #00000026;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.slider__input::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 6px #0003}.slider__input::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:50%;background:var(--color-primary-500);border:2px solid #ffffff;box-shadow:0 1px 3px #00000026;cursor:pointer}.slider__input::-moz-range-track{height:.375rem;border-radius:var(--border-radius-full);background:var(--color-surface-sunken);box-shadow:inset 0 0 0 1px var(--color-border-strong)}.slider__input::-moz-range-progress{height:.375rem;border-radius:var(--border-radius-full);background:var(--color-primary-500)}.slider__input:focus-visible::-webkit-slider-thumb{box-shadow:0 1px 3px #00000026,0 0 0 3px color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.slider__input:focus-visible::-moz-range-thumb{box-shadow:0 1px 3px #00000026,0 0 0 3px color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.slider__input:disabled{opacity:.5;cursor:not-allowed}.slider__input:disabled::-webkit-slider-thumb{cursor:not-allowed}.slider__input:disabled::-moz-range-thumb{cursor:not-allowed}.slider--disabled{opacity:.5;pointer-events:none}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SliderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-slider",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => SliderComponent),
+				multi: true
+			}],
+			template: "<div [class]=\"sliderClasses()\">\n  @if (label()) {\n    <label class=\"slider__label\" [for]=\"inputId\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"slider__value\">{{ value() }}</span>\n      }\n    </label>\n  }\n  <div class=\"slider__track-wrapper\">\n    <input\n      [id]=\"inputId\"\n      type=\"range\"\n      class=\"slider__input\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [style.--fill-percent]=\"fillPercentage() + '%'\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n  @if (!label() && showValue()) {\n    <span class=\"slider__value slider__value--standalone\">{{ value() }}</span>\n  }\n</div>\n",
+			styles: [".slider{display:flex;flex-direction:column;gap:.375rem;width:100%}.slider__label{display:flex;justify-content:space-between;align-items:center;font-size:var(--typography-font-size-sm, .875rem);font-weight:var(--typography-font-weight-medium, 500);color:var(--color-text-secondary)}.slider__value{font-variant-numeric:tabular-nums;color:var(--color-text-tertiary);font-size:var(--typography-font-size-sm, .875rem)}.slider__value--standalone{text-align:right}.slider__track-wrapper{position:relative;display:flex;align-items:center;width:100%}.slider__input{-webkit-appearance:none;appearance:none;width:100%;height:.375rem;border-radius:var(--border-radius-full);background:linear-gradient(to right,var(--color-primary-500) var(--fill-percent, 0%),var(--color-surface-sunken) var(--fill-percent, 0%));box-shadow:inset 0 0 0 1px var(--color-border-strong);outline:none;cursor:pointer;transition:background .15s ease}.slider__input::-webkit-slider-thumb{-webkit-appearance:none;width:1.125rem;height:1.125rem;border-radius:50%;background:var(--color-primary-500);border:2px solid #ffffff;box-shadow:0 1px 3px #00000026;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}.slider__input::-webkit-slider-thumb:hover{transform:scale(1.15);box-shadow:0 2px 6px #0003}.slider__input::-moz-range-thumb{width:1.125rem;height:1.125rem;border-radius:50%;background:var(--color-primary-500);border:2px solid #ffffff;box-shadow:0 1px 3px #00000026;cursor:pointer}.slider__input::-moz-range-track{height:.375rem;border-radius:var(--border-radius-full);background:var(--color-surface-sunken);box-shadow:inset 0 0 0 1px var(--color-border-strong)}.slider__input::-moz-range-progress{height:.375rem;border-radius:var(--border-radius-full);background:var(--color-primary-500)}.slider__input:focus-visible::-webkit-slider-thumb{box-shadow:0 1px 3px #00000026,0 0 0 3px color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.slider__input:focus-visible::-moz-range-thumb{box-shadow:0 1px 3px #00000026,0 0 0 3px color-mix(in srgb,var(--color-primary-500) 30%,transparent)}.slider__input:disabled{opacity:.5;cursor:not-allowed}.slider__input:disabled::-webkit-slider-thumb{cursor:not-allowed}.slider__input:disabled::-moz-range-thumb{cursor:not-allowed}.slider--disabled{opacity:.5;pointer-events:none}\n"]
+		}]
+	}],
+	propDecorators: {
+		min: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "min",
+				required: false
+			}]
+		}],
+		max: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "max",
+				required: false
+			}]
+		}],
+		step: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "step",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		showValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showValue",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		valueChange: [{
+			type: i0.Output,
+			args: ["valueChange"]
+		}]
+	}
+});
+export { SliderComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-slider.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-slider.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/slider/slider.component.ts","../../../../libs/angular-ui-kit/src/lib/slider/slider.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  output,\n  computed,\n  signal,\n  forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n@Component({\n  selector: 'lc-slider',\n  standalone: true,\n  templateUrl: './slider.component.html',\n  styleUrls: ['./slider.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => SliderComponent),\n      multi: true,\n    },\n  ],\n})\n/**\n * Slider component for selecting a numeric value within a range.\n *\n * Features:\n * - Configurable min, max, and step values\n * - Visual fill track indicating current position\n * - Optional value label display\n * - Disabled state support\n * - ControlValueAccessor integration for reactive forms\n *\n * @example\n * ```html\n * <lc-slider label=\"Volume\" [min]=\"0\" [max]=\"100\" [showValue]=\"true\" />\n * ```\n */\nexport class SliderComponent implements ControlValueAccessor {\n  private static nextId = 0;\n\n  /** Minimum value */\n  min = input<number>(0);\n\n  /** Maximum value */\n  max = input<number>(100);\n\n  /** Step increment */\n  step = input<number>(1);\n\n  /** Label text */\n  label = input<string>();\n\n  /** Whether to show the current value */\n  showValue = input<boolean>(true);\n\n  /** Disabled state */\n  disabled = input<boolean>(false);\n\n  /** Emits the current value on change */\n  valueChange = output<number>();\n\n  /** Per-instance id wiring the label to the range input. */\n  readonly inputId = `lc-slider-${++SliderComponent.nextId}`;\n\n  /** Last value written by the user or the form; `null` until one arrives. */\n  private readonly rawValue = signal<number | null>(null);\n\n  /**\n   * The value the template and fill track show — always inside `[min, max]`,\n   * mirroring what the native range input clamps to. Without this, `min=\"10\"`\n   * would show a \"0\" label over a track filled to −10%.\n   */\n  protected readonly value = computed(() => {\n    const minV = this.min();\n    const maxV = this.max();\n    return Math.min(maxV, Math.max(minV, this.rawValue() ?? minV));\n  });\n\n  /** Disabled through the form control (`setDisabledState`), as opposed to the input. */\n  private readonly formDisabled = signal(false);\n\n  /** Disabled by either route — the one flag the template consults. */\n  protected readonly isDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  /** Percentage for fill track */\n  protected fillPercentage = computed(() => {\n    const minV = this.min();\n    const maxV = this.max();\n    if (maxV === minV) return 0;\n    return ((this.value() - minV) / (maxV - minV)) * 100;\n  });\n\n  protected sliderClasses = computed(() => {\n    const classes = ['slider'];\n    if (this.isDisabled()) classes.push('slider--disabled');\n    return classes.join(' ');\n  });\n\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onChange: (val: number) => void = () => {};\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  private onTouched: () => void = () => {};\n\n  onInput(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    const val = Number(target.value);\n    this.rawValue.set(val);\n    this.valueChange.emit(val);\n    this.onChange(val);\n  }\n\n  onBlur(): void {\n    this.onTouched();\n  }\n\n  // ControlValueAccessor\n  writeValue(val: number | null): void {\n    this.rawValue.set(val);\n  }\n\n  registerOnChange(fn: (val: number) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n}\n","<div [class]=\"sliderClasses()\">\n  @if (label()) {\n    <label class=\"slider__label\" [for]=\"inputId\">\n      {{ label() }}\n      @if (showValue()) {\n        <span class=\"slider__value\">{{ value() }}</span>\n      }\n    </label>\n  }\n  <div class=\"slider__track-wrapper\">\n    <input\n      [id]=\"inputId\"\n      type=\"range\"\n      class=\"slider__input\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step()\"\n      [value]=\"value()\"\n      [disabled]=\"isDisabled()\"\n      [style.--fill-percent]=\"fillPercentage() + '%'\"\n      (input)=\"onInput($event)\"\n      (blur)=\"onBlur()\"\n    />\n  </div>\n  @if (!label() && showValue()) {\n    <span class=\"slider__value slider__value--standalone\">{{ value() }}</span>\n  }\n</div>\n"],"mappings":";;;AAwCA,IAAa,kBAAb,MAAa,gBAAe;CAClB,OAAO,SAAS;CAGxB,MAAM,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAGtB,MAAM,MAAc,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,MAAA,CAAA,+BAAA,CAAA,CAAA;CAGxB,OAAO,MAAc,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAGvB,QAAQ,MAAe,GAAA,YAAA,CAAA,QAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGvB,YAAY,MAAe,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAGhC,WAAW,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAGhC,cAAc,OAAM;CAGX,UAAU,aAAa,EAAE,gBAAgB;CAGjC,WAAW,OAAsB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CAOpC,QAAQ,eAAc;EACvC,MAAM,OAAO,KAAK,IAAG;EACrB,MAAM,OAAO,KAAK,IAAG;EACrB,OAAO,KAAK,IAAI,MAAM,KAAK,IAAI,MAAM,KAAK,SAAQ,KAAM,IAAI,CAAC;CAC/D,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAGe,eAAe,OAAO,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAG1B,aAAa,eAAe,KAAK,SAAQ,KAAM,KAAK,aAAY,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAG5E,iBAAiB,eAAc;EACvC,MAAM,OAAO,KAAK,IAAG;EACrB,MAAM,OAAO,KAAK,IAAG;EACrB,IAAI,SAAS,MAAM,OAAO;EAC1B,QAAS,KAAK,MAAK,IAAK,SAAS,OAAO,QAAS;CACnD,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,iBAAA,CAAA,+BAAA,CAAA,CAAA;CAEQ,gBAAgB,eAAc;EACtC,MAAM,UAAU,CAAC,QAAQ;EACzB,IAAI,KAAK,WAAU,GAAI,QAAQ,KAAK,kBAAkB;EACtD,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAGM,iBAAuC,CAAE;CAEzC,kBAA6B,CAAE;CAEvC,QAAQ,OAAY;EAClB,MAAM,SAAS,MAAM;EACrB,MAAM,MAAM,OAAO,OAAO,KAAK;EAC/B,KAAK,SAAS,IAAI,GAAG;EACrB,KAAK,YAAY,KAAK,GAAG;EACzB,KAAK,SAAS,GAAG;CACnB;CAEA,SAAM;EACJ,KAAK,UAAS;CAChB;CAGA,WAAW,KAAkB;EAC3B,KAAK,SAAS,IAAI,GAAG;CACvB;CAEA,iBAAiB,IAAyB;EACxC,KAAK,WAAW;CAClB;CAEA,kBAAkB,IAAc;EAC9B,KAAK,YAAY;CACnB;CAEA,iBAAiB,YAAmB;EAClC,KAAK,aAAa,IAAI,UAAU;CAClC;CA7FW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,KAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,KAAA;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,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,aAAA,cAAA;EAAA,WAvBf,CACT;GACE,SAAS;GACT,aAAa,iBAAiB,eAAe;GAC7C,OAAO;EACR,CACF;EAAA,UAAA;EAAA,UCvBH;EA4BA,QAAA,CAAA,iwEAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;ADYa,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EA7B3B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAW,YACT;GAAI,iBAGC,wBAAwB;GAAM,WACpC,CACT;IACE,SAAS;IACT,aAAa,iBAAgB,eAAgB;IAC7C,OAAO;GACR,CACF;GAAA,UAAA;GAAA,QAAA,CAAA,iwEAAA;EAAA,CAAA"}

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

@@ -0,0 +1,73 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+var SpacerComponent = class SpacerComponent {
+	size = input("auto", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	classes = computed(() => {
+		const classes = [];
+		classes.push(`spacer-${this.size()}`);
+		if (this.size() === "auto") classes.push("spacer-grow");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SpacerComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.2",
+		type: SpacerComponent,
+		isStandalone: true,
+		selector: "lc-spacer",
+		inputs: { size: {
+			classPropertyName: "size",
+			publicName: "size",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "aria-hidden": "true" },
+			properties: { "class": "classes()" }
+		},
+		ngImport: i0,
+		template: "\n",
+		styles: [":host{display:block}:host(.spacer-auto),:host(.spacer-grow){flex:1 1 auto}:host(.spacer-xs){flex:0 0 var(--lc-density-gap-xs, .25rem);width:var(--lc-density-gap-xs, .25rem);height:var(--lc-density-gap-xs, .25rem)}:host(.spacer-sm){flex:0 0 var(--lc-density-gap-sm, .5rem);width:var(--lc-density-gap-sm, .5rem);height:var(--lc-density-gap-sm, .5rem)}:host(.spacer-md){flex:0 0 var(--lc-density-gap-md, 1rem);width:var(--lc-density-gap-md, 1rem);height:var(--lc-density-gap-md, 1rem)}:host(.spacer-lg){flex:0 0 var(--lc-density-gap-lg, 1.5rem);width:var(--lc-density-gap-lg, 1.5rem);height:var(--lc-density-gap-lg, 1.5rem)}:host(.spacer-xl){flex:0 0 var(--lc-density-gap-xl, 2rem);width:var(--lc-density-gap-xl, 2rem);height:var(--lc-density-gap-xl, 2rem)}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SpacerComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-spacer",
+			standalone: true,
+			imports: [],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				"[class]": "classes()",
+				"aria-hidden": "true"
+			},
+			template: "\n",
+			styles: [":host{display:block}:host(.spacer-auto),:host(.spacer-grow){flex:1 1 auto}:host(.spacer-xs){flex:0 0 var(--lc-density-gap-xs, .25rem);width:var(--lc-density-gap-xs, .25rem);height:var(--lc-density-gap-xs, .25rem)}:host(.spacer-sm){flex:0 0 var(--lc-density-gap-sm, .5rem);width:var(--lc-density-gap-sm, .5rem);height:var(--lc-density-gap-sm, .5rem)}:host(.spacer-md){flex:0 0 var(--lc-density-gap-md, 1rem);width:var(--lc-density-gap-md, 1rem);height:var(--lc-density-gap-md, 1rem)}:host(.spacer-lg){flex:0 0 var(--lc-density-gap-lg, 1.5rem);width:var(--lc-density-gap-lg, 1.5rem);height:var(--lc-density-gap-lg, 1.5rem)}:host(.spacer-xl){flex:0 0 var(--lc-density-gap-xl, 2rem);width:var(--lc-density-gap-xl, 2rem);height:var(--lc-density-gap-xl, 2rem)}\n"]
+		}]
+	}],
+	propDecorators: { size: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "size",
+			required: false
+		}]
+	}] }
+});
+export { SpacerComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-spacer.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-spacer.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/spacer/spacer.component.ts","../../../../libs/angular-ui-kit/src/lib/spacer/spacer.component.html"],"sourcesContent":["import { Component, input, computed, ChangeDetectionStrategy } from '@angular/core';\n\nexport type SpacerSize = 'auto' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Spacer component for adding vertical or flexible spacing.\n *\n * Features:\n * - Fixed, density-aware spacing sizes (xs, sm, md, lg, xl)\n * - Auto (flex-grow) mode for filling available space\n * - Host class binding for layout integration\n *\n * @example\n * ```html\n * <lc-spacer size=\"lg\" />\n * ```\n */\n@Component({\n  selector: 'lc-spacer',\n  standalone: true,\n  imports: [],\n  templateUrl: './spacer.component.html',\n  styleUrls: ['./spacer.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class]': 'classes()',\n    // Purely presentational — never announced, never focusable.\n    'aria-hidden': 'true',\n  },\n})\nexport class SpacerComponent {\n  readonly size = input<SpacerSize>('auto');\n\n  readonly classes = computed(() => {\n    const classes: string[] = [];\n\n    // Semantic size class — the matching `:host(.spacer-*)` rules live in\n    // spacer.component.scss (plain class rules would be scoped away by the\n    // emulated encapsulation and never match the host).\n    classes.push(`spacer-${this.size()}`);\n\n    if (this.size() === 'auto') {\n      classes.push('spacer-grow');\n    }\n\n    return classes.join(' ');\n  });\n}\n","\n"],"mappings":";;AA8BA,IAAa,kBAAb,MAAa,gBAAe;CACjB,OAAO,MAAkB,QAAO,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAEhC,UAAU,eAAc;EAC/B,MAAM,UAAoB,CAAA;EAK1B,QAAQ,KAAK,UAAU,KAAK,KAAI,GAAI;EAEpC,IAAI,KAAK,KAAI,MAAO,QAClB,QAAQ,KAAK,aAAa;EAG5B,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAhBS,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAe,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAf,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAe,cAAA;EAAA,UAAA;EAAA,QAAA,EAAA,MAAA;GAAA,mBAAA;GAAA,YAAA;GAAA,UAAA;GAAA,YAAA;GAAA,mBAAA;EAAA,EAAA;EAAA,MAAA;GAAA,YAAA,EAAA,eAAA,OAAA;GAAA,YAAA,EAAA,SAAA,YAAA;EAAA;EAAA,UAAA;EAAA,UC9B5B;EACA,QAAA,CAAA,svBAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AD6Ba,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAe,YAAA,CAAA;EAb3B,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAW,YACT;GAAI,SACP,CAAA;GAAE,iBAGM,wBAAwB;GAAM,MACzC;IACJ,WAAW;IAEX,eAAe;GAChB;GAAA,UAAA;GAAA,QAAA,CAAA,svBAAA;EAAA,CAAA"}