@lifecorner/angular-ui-kit 3.33.0 → 3.34.0

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

@@ -1 +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, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_BARS_3, ICON_CHEVRON_DOWN, ICON_LOGOUT, ICON_MOON, ICON_SUN, ICON_USER } from '@lifecorner/angular-ui-kit/icons';\nimport { AvatarColor, AvatarComponent, AvatarFallback, ɵavatarInitials } from '@lifecorner/angular-ui-kit/avatar';\nimport { MenuComponent, MenuItem } from '@lifecorner/angular-ui-kit/menu';\nimport { ThemeService } from '@lifecorner/angular-ui-kit/theme';\nimport { nameWithText } from '@lifecorner/angular-ui-kit/internal/a11y';\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 * Where the context button sits up to 640 px (3.33): `inline` in the end\n * group, hidden up to 640 px (as before), or `below`, a row of its own under\n * the title. From 641 px both render it inline.\n */\nexport type HeaderContextPlacement = 'inline' | 'below';\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 * - The end content (slot, theme button, context, account menu) is one group:\n *   when it doesn't fit beside the logo and the title's longest word (200 %\n *   text on a phone), it takes the end of a second row instead of covering the\n *   brand or widening the page (3.10.1, AS-31). The subtitle ends with \"…\".\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, `userAvatarFallback=\"person\"` for a person symbol while there is\n *   no name) 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 * - `contextPlacement=\"below\"` (3.33): up to 640 px the context button\n *   (`contextName`) takes a full-width row of its own under the title instead\n *   of being hidden; from 641 px it sits in the end group as before.\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  // Its own glyphs, and the profile menu's (lc-menu renders them in this view).\n  viewProviders: [ɵprovideKitIcons([ICON_BARS_3, ICON_SUN, ICON_MOON, ICON_USER, ICON_CHEVRON_DOWN, ICON_LOGOUT])],\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; the button\n   * is named `userMenuAriaLabel`, a comma and the initials).\n   * @default 'icon'\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  /**\n   * Passed to the trigger avatar and the menu avatar as `fallback` (3.15):\n   * `person` shows a person symbol on a neutral disc instead of \"?\" while\n   * `userName` is empty.\n   * @default 'initials'\n   */\n  readonly userAvatarFallback = input<AvatarFallback>('initials');\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  /**\n   * Where the context button sits up to 640 px (3.33, app-shell row 1).\n   * `'inline'`: in the end group, hidden up to 640 px (as before). `'below'`:\n   * up to 640 px a row of its own under the title, as wide as the header and\n   * at least 44 px high; title, `end` slot and account menu stay in the first\n   * row. From 641 px both render the button inline. No second row without\n   * `contextName`.\n   * @default 'inline'\n   */\n  readonly contextPlacement = input<HeaderContextPlacement>('inline');\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  /**\n   * Accessible name of the account menu trigger. With `userMenuTrigger=\"avatar\"`\n   * the button is named this text, a comma and the initials it shows\n   * (`Menü für Johanna Müller, JM`), so a voice-control user can say what they\n   * see (WCAG 2.5.3). Nothing is added when `userName` gives no initials, or\n   * when the text already contains them as a word. The name is the same with a\n   * photo.\n   * @default 'Open user menu'\n   */\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  /**\n   * Start of the context button's accessible name. The visible `contextLabel`\n   * and `contextName` follow it (WCAG 2.5.3 Label in Name), unless the label\n   * already contains them: `Context info, Tenant Acme Corp`.\n   * @default 'Context info'\n   */\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   * Name of the avatar trigger (AS-33, WCAG 2.5.3 Label in Name):\n   * `userMenuAriaLabel`, a comma and the initials the avatar shows, so the\n   * visible text is a word of the name. Built from the same function as the\n   * avatar's initials and independent of the photo, so the prerendered name\n   * and the page's agree. Nothing is added for the `?` placeholder or when\n   * the label already holds the initials as a word (parentheticals dropped,\n   * as axe-core 4.14 does); an empty label becomes the initials alone.\n   */\n  protected readonly avatarTriggerAriaLabel = computed(() => {\n    const initials = ɵavatarInitials(this.userName());\n    const label = this.userMenuAriaLabel();\n    if (!/[\\p{L}\\p{N}]/u.test(initials)) return label;\n    // toLowerCase, not toLocaleLowerCase: server and browser must agree.\n    const words = label\n      .replace(/\\([^()]*\\)/g, ' ')\n      .toLowerCase()\n      .split(/[^\\p{L}\\p{N}]+/u);\n    if (words.includes(initials.toLowerCase())) return label;\n    if (label.trim() === '') return initials;\n    return `${label}, ${initials}`;\n  });\n\n  /**\n   * Name of the context button (AS-33, WCAG 2.5.3 Label in Name):\n   * `contextAriaLabel`, a comma and the visible `contextLabel` and\n   * `contextName`, so a voice-control user can say what they see.\n   */\n  protected readonly contextButtonAriaLabel = computed(() =>\n    nameWithText(this.contextAriaLabel(), [this.contextLabel(), this.contextName()].filter(Boolean).join(' ')),\n  );\n\n  /** `contextPlacement=\"below\"` with a context button to place (3.33). */\n  protected readonly contextBelow = computed(() => this.contextPlacement() === 'below' && !!this.contextName());\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  [class.lc-header--context-below]=\"contextBelow()\"\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\" [decorative]=\"true\" />\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  <!-- Zero-width spacer on the brand's row: keeps 3.10's two gaps before the end\n       group and the first row's height; grows in a has-nav header from 1024 px. -->\n  <div class=\"lc-header__spacer\"></div>\n\n  <!-- End of the bar: the end slot (e.g. a language link), theme toggle, context\n       info and account menu as one group. It goes to the end of a second row\n       when it doesn't fit beside the brand (AS-31). No role; the DOM order and\n       so the focus order stay brand → nav → end. -->\n  <div class=\"lc-header__end\">\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\" [decorative]=\"true\" />\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.aria-label]=\"contextButtonAriaLabel()\"\n        (click)=\"contextClick.emit()\"\n      >\n        <!-- A real space between label and name: the visible text reads\n             \"Tenant Acme Corp\", not \"TenantAcme Corp\" (WCAG 2.5.3). The\n             tooltip sits on the name, so it is not a description of the button. -->\n        @if (contextLabel()) {\n          <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>&ngsp;\n        }\n        <span class=\"lc-header__context-name\" [attr.title]=\"contextName()\">{{ 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              [fallback]=\"userAvatarFallback()\"\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]=\"avatarTriggerAriaLabel()\"\n            [attr.aria-expanded]=\"isDropdownOpen()\"\n            (click)=\"toggleDropdown()\"\n          >\n            <lc-avatar\n              [name]=\"userName()\"\n              [src]=\"userAvatarSrc() || undefined\"\n              [color]=\"userAvatarColor()\"\n              [fallback]=\"userAvatarFallback()\"\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\" [decorative]=\"true\" />\n            <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" />\n          </button>\n        }\n      </lc-menu>\n    }\n  </div>\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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"}
+{"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  AfterRenderRef,\n  Component,\n  ElementRef,\n  Injector,\n  afterNextRender,\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, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_BARS_3, ICON_CHEVRON_DOWN, ICON_LOGOUT, ICON_MOON, ICON_SUN, ICON_USER } from '@lifecorner/angular-ui-kit/icons';\nimport { AvatarColor, AvatarComponent, AvatarFallback, ɵavatarInitials } from '@lifecorner/angular-ui-kit/avatar';\nimport { MenuComponent, MenuItem } from '@lifecorner/angular-ui-kit/menu';\nimport { ThemeService } from '@lifecorner/angular-ui-kit/theme';\nimport { nameWithText } from '@lifecorner/angular-ui-kit/internal/a11y';\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 * Where the context button sits up to 640 px (3.33): `inline` in the end\n * group, hidden up to 640 px (as before), or `below`, a row of its own under\n * the title. From 641 px both render it inline.\n */\nexport type HeaderContextPlacement = 'inline' | 'below';\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 * - The end content (slot, theme button, context, account menu) is one group:\n *   when it doesn't fit beside the logo and the title's longest word (200 %\n *   text on a phone), it takes the end of a second row instead of covering the\n *   brand or widening the page (3.10.1, AS-31). The subtitle ends with \"…\".\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, `userAvatarFallback=\"person\"` for a person symbol while there is\n *   no name) 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 * - `contextPlacement=\"below\"` (3.33): up to 640 px the context button\n *   (`contextName`) takes a full-width row of its own under the title instead\n *   of being hidden; from 641 px it sits in the end group as before.\n * - `focusContext()` (3.34): moves the focus to the context button after the\n *   next render, e.g. after a choice in the sheet it opened (WCAG 2.4.3).\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  // Its own glyphs, and the profile menu's (lc-menu renders them in this view).\n  viewProviders: [ɵprovideKitIcons([ICON_BARS_3, ICON_SUN, ICON_MOON, ICON_USER, ICON_CHEVRON_DOWN, ICON_LOGOUT])],\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; the button\n   * is named `userMenuAriaLabel`, a comma and the initials).\n   * @default 'icon'\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  /**\n   * Passed to the trigger avatar and the menu avatar as `fallback` (3.15):\n   * `person` shows a person symbol on a neutral disc instead of \"?\" while\n   * `userName` is empty.\n   * @default 'initials'\n   */\n  readonly userAvatarFallback = input<AvatarFallback>('initials');\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  /**\n   * Where the context button sits up to 640 px (3.33, app-shell row 1).\n   * `'inline'`: in the end group, hidden up to 640 px (as before). `'below'`:\n   * up to 640 px a row of its own under the title, as wide as the header and\n   * at least 44 px high; title, `end` slot and account menu stay in the first\n   * row. From 641 px both render the button inline. No second row without\n   * `contextName`.\n   * @default 'inline'\n   */\n  readonly contextPlacement = input<HeaderContextPlacement>('inline');\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  /**\n   * Accessible name of the account menu trigger. With `userMenuTrigger=\"avatar\"`\n   * the button is named this text, a comma and the initials it shows\n   * (`Menü für Johanna Müller, JM`), so a voice-control user can say what they\n   * see (WCAG 2.5.3). Nothing is added when `userName` gives no initials, or\n   * when the text already contains them as a word. The name is the same with a\n   * photo.\n   * @default 'Open user menu'\n   */\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  /**\n   * Start of the context button's accessible name. The visible `contextLabel`\n   * and `contextName` follow it (WCAG 2.5.3 Label in Name), unless the label\n   * already contains them: `Context info, Tenant Acme Corp`.\n   * @default 'Context info'\n   */\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  /** The context button (`contextName`), while it is rendered. */\n  private readonly contextButton = viewChild<ElementRef<HTMLButtonElement>>('contextButton');\n\n  /** The `focusContext()` hook waiting for the next render. */\n  private pendingContextFocus?: AfterRenderRef;\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   * Name of the avatar trigger (AS-33, WCAG 2.5.3 Label in Name):\n   * `userMenuAriaLabel`, a comma and the initials the avatar shows, so the\n   * visible text is a word of the name. Built from the same function as the\n   * avatar's initials and independent of the photo, so the prerendered name\n   * and the page's agree. Nothing is added for the `?` placeholder or when\n   * the label already holds the initials as a word (parentheticals dropped,\n   * as axe-core 4.14 does); an empty label becomes the initials alone.\n   */\n  protected readonly avatarTriggerAriaLabel = computed(() => {\n    const initials = ɵavatarInitials(this.userName());\n    const label = this.userMenuAriaLabel();\n    if (!/[\\p{L}\\p{N}]/u.test(initials)) return label;\n    // toLowerCase, not toLocaleLowerCase: server and browser must agree.\n    const words = label\n      .replace(/\\([^()]*\\)/g, ' ')\n      .toLowerCase()\n      .split(/[^\\p{L}\\p{N}]+/u);\n    if (words.includes(initials.toLowerCase())) return label;\n    if (label.trim() === '') return initials;\n    return `${label}, ${initials}`;\n  });\n\n  /**\n   * Name of the context button (AS-33, WCAG 2.5.3 Label in Name):\n   * `contextAriaLabel`, a comma and the visible `contextLabel` and\n   * `contextName`, so a voice-control user can say what they see.\n   */\n  protected readonly contextButtonAriaLabel = computed(() =>\n    nameWithText(this.contextAriaLabel(), [this.contextLabel(), this.contextName()].filter(Boolean).join(' ')),\n  );\n\n  /** `contextPlacement=\"below\"` with a context button to place (3.33). */\n  protected readonly contextBelow = computed(() => this.contextPlacement() === 'below' && !!this.contextName());\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   * Moves the focus to the context button after the next render (3.34), so a\n   * `contextName` set just before is already in its name. Call it right after\n   * the choice, or when the sheet that changes the context closes. Does\n   * nothing while the button isn't shown (no `contextName`, or up to 640 px\n   * with `contextPlacement=\"inline\"`). A second call before that render\n   * replaces the first.\n   */\n  focusContext(): void {\n    this.pendingContextFocus?.destroy();\n    this.pendingContextFocus = afterNextRender(\n      () => {\n        this.pendingContextFocus = undefined;\n        this.contextButton()?.nativeElement.focus();\n      },\n      { injector: this.injector },\n    );\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  [class.lc-header--context-below]=\"contextBelow()\"\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\" [decorative]=\"true\" />\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  <!-- Zero-width spacer on the brand's row: keeps 3.10's two gaps before the end\n       group and the first row's height; grows in a has-nav header from 1024 px. -->\n  <div class=\"lc-header__spacer\"></div>\n\n  <!-- End of the bar: the end slot (e.g. a language link), theme toggle, context\n       info and account menu as one group. It goes to the end of a second row\n       when it doesn't fit beside the brand (AS-31). No role; the DOM order and\n       so the focus order stay brand → nav → end. -->\n  <div class=\"lc-header__end\">\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\" [decorative]=\"true\" />\n      </lc-button>\n    }\n\n    <!-- Context info (e.g. tenant, organization, project) -->\n    @if (contextName()) {\n      <button\n        #contextButton\n        type=\"button\"\n        class=\"lc-header__context-info\"\n        [attr.aria-label]=\"contextButtonAriaLabel()\"\n        (click)=\"contextClick.emit()\"\n      >\n        <!-- A real space between label and name: the visible text reads\n             \"Tenant Acme Corp\", not \"TenantAcme Corp\" (WCAG 2.5.3). The\n             tooltip sits on the name, so it is not a description of the button. -->\n        @if (contextLabel()) {\n          <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>&ngsp;\n        }\n        <span class=\"lc-header__context-name\" [attr.title]=\"contextName()\">{{ 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              [fallback]=\"userAvatarFallback()\"\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]=\"avatarTriggerAriaLabel()\"\n            [attr.aria-expanded]=\"isDropdownOpen()\"\n            (click)=\"toggleDropdown()\"\n          >\n            <lc-avatar\n              [name]=\"userName()\"\n              [src]=\"userAvatarSrc() || undefined\"\n              [color]=\"userAvatarColor()\"\n              [fallback]=\"userAvatarFallback()\"\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\" [decorative]=\"true\" />\n            <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" />\n          </button>\n        }\n      </lc-menu>\n    }\n  </div>\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-list.mjs

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, Directive, TemplateRef, computed, contentChild, effect, inject, input, isDevMode, output } from "@angular/core";
+import { ChangeDetectionStrategy, Component, Directive, Injector, TemplateRef, afterNextRender, computed, contentChild, effect, inject, input, isDevMode, output, viewChild } from "@angular/core";
 import { NgTemplateOutlet } from "@angular/common";
 import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
 import { ButtonComponent } from "@lifecorner/angular-ui-kit/button";
@@ -49,12 +49,23 @@ var ListComponent = class ListComponent {
 	itemClick = output();
 	actionClick = output();
 	linkClick = output();
+	injector = inject(Injector);
+	listEl = viewChild("listEl", ...ngDevMode ? [{ debugName: "listEl" }] : /* istanbul ignore next */ []);
+	pendingItemFocus;
 	constructor() {
 		effect(() => {
 			if (!isDevMode()) return;
 			for (const item of this.items() ?? []) if (this.isLinkRow(item) && item.action) console.warn(`[lc-list] item "${item.label}" has href and action: the action is not rendered inside a link`);
 		});
 	}
+	focusItem(id, part = "row") {
+		this.pendingItemFocus?.destroy();
+		this.pendingItemFocus = afterNextRender(() => {
+			this.pendingItemFocus = void 0;
+			const index = (this.items() ?? []).findIndex((item) => item.id === id);
+			((index < 0 ? null : this.listEl()?.nativeElement.children.item(index))?.querySelector(part === "action" ? ".lc-list__action-area button" : "a.lc-list__item, .lc-list__item[role=button]:not([aria-disabled=true])"))?.focus();
+		}, { injector: this.injector });
+	}
 	isLinkRow(item) {
 		return !!item.href && !item.disabled;
 	}
@@ -189,8 +200,15 @@ var ListComponent = class ListComponent {
 			descendants: true,
 			isSignal: true
 		}],
+		viewQueries: [{
+			propertyName: "listEl",
+			first: true,
+			predicate: ["listEl"],
+			descendants: true,
+			isSignal: true
+		}],
 		ngImport: i0,
-		template: "<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action && !isLinkRow(item)) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n  }\n</ng-template>\n\n<div [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (isLinkRow(item)) {\n      <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <a\n          [class]=\"getItemClasses(item) + ' lc-list__item--link'\"\n          [href]=\"item.href\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onLinkClick($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </a>\n      </div>\n    } @else if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        [attr.aria-current]=\"item.selected ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n",
+		template: "<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action && !isLinkRow(item)) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n  }\n</ng-template>\n\n<div #listEl [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (isLinkRow(item)) {\n      <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <a\n          [class]=\"getItemClasses(item) + ' lc-list__item--link'\"\n          [href]=\"item.href\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onLinkClick($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </a>\n      </div>\n    } @else if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        [attr.aria-current]=\"item.selected ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n",
 		styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--border-radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical>.lc-list__item:last-child,.lc-list--vertical>.lc-list__item-wrapper:last-child .lc-list__item{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-divider)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item,.lc-list--horizontal .lc-list__item-wrapper{flex:1}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent}.lc-list--horizontal>.lc-list__item:last-child,.lc-list--horizontal>.lc-list__item-wrapper:last-child .lc-list__item{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-divider)}.lc-list__item-wrapper{display:flex;min-width:0}.lc-list__item-wrapper>.lc-list__item{flex:1;min-width:0}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));transition:background-color .2s ease}.lc-list__item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-text-tertiary)}.lc-list__label{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__avatar--member-1{background-color:var(--color-member-1, #1a6a79)}.lc-list__avatar--member-2{background-color:var(--color-member-2, #b04a22)}.lc-list__avatar--member-3{background-color:var(--color-member-3, #4e3f84)}.lc-list__avatar--member-4{background-color:var(--color-member-4, #5f7150)}.lc-list__avatar--member-5{background-color:var(--color-member-5, #9e3846)}.lc-list__avatar--member-6{background-color:var(--color-member-6, #5a798c)}.lc-list__avatar--member .lc-list__avatar-initials{color:var(--color-on-member, #ffffff);font-weight:700;letter-spacing:.02em}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-text-tertiary);line-height:var(--line-height-sm, 1.25rem);overflow-wrap:anywhere}.lc-list__description{overflow-wrap:anywhere;font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list--no-clamp .lc-list__description{display:block;-webkit-line-clamp:unset;overflow:visible}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list--clickable .lc-list__item{cursor:pointer}.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-surface-hover)}.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-surface-sunken)}.lc-list__item--link{min-height:var(--size-min-touch-height, 2.75rem);color:inherit;text-decoration:none;cursor:pointer}.lc-list__item--link:hover{background-color:var(--color-surface-hover)}.lc-list__item--link:active{background-color:var(--color-surface-sunken)}.lc-list__item--link.lc-list__item--selected:hover{background-color:var(--color-primary-100, #dbeafe)}@media(forced-colors:active){.lc-list__item:focus-visible{outline:2px solid Highlight;outline-offset:-2px}}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-subtle);color:var(--color-on-success-subtle)}.lc-list__badge--warning{background-color:var(--color-warning-subtle);color:var(--color-on-warning-subtle)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-on-error-subtle)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list--clickable .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-surface-2);border:1px solid var(--color-border);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled),.lc-list--card .lc-list__item--link:hover:not(.lc-list__item--disabled){background:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--elevation-1)}.lc-list--card.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled),.lc-list--card .lc-list__item--link:active:not(.lc-list__item--disabled){background:var(--color-surface-sunken)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}\n"],
 		dependencies: [
 			{
@@ -263,7 +281,7 @@ i0.ɵɵngDeclareClassMetadata({
 				ButtonComponent
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action && !isLinkRow(item)) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n  }\n</ng-template>\n\n<div [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (isLinkRow(item)) {\n      <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <a\n          [class]=\"getItemClasses(item) + ' lc-list__item--link'\"\n          [href]=\"item.href\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onLinkClick($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </a>\n      </div>\n    } @else if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        [attr.aria-current]=\"item.selected ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n",
+			template: "<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action && !isLinkRow(item)) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n  }\n</ng-template>\n\n<div #listEl [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (isLinkRow(item)) {\n      <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <a\n          [class]=\"getItemClasses(item) + ' lc-list__item--link'\"\n          [href]=\"item.href\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onLinkClick($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </a>\n      </div>\n    } @else if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        [attr.aria-current]=\"item.selected ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n",
 			styles: [".lc-list{display:flex;width:100%;background-color:var(--color-surface, #ffffff);border-radius:var(--border-radius-md);overflow:hidden}.lc-list--vertical{flex-direction:column}.lc-list--vertical .lc-list__item{border-bottom:1px solid transparent}.lc-list--vertical>.lc-list__item:last-child,.lc-list--vertical>.lc-list__item-wrapper:last-child .lc-list__item{border-bottom:none}.lc-list--vertical.lc-list--with-dividers .lc-list__item{border-bottom-color:var(--color-divider)}.lc-list--horizontal{flex-direction:row}.lc-list--horizontal .lc-list__item,.lc-list--horizontal .lc-list__item-wrapper{flex:1}.lc-list--horizontal .lc-list__item{border-right:1px solid transparent}.lc-list--horizontal>.lc-list__item:last-child,.lc-list--horizontal>.lc-list__item-wrapper:last-child .lc-list__item{border-right:none}.lc-list--horizontal.lc-list--with-dividers .lc-list__item{border-right-color:var(--color-divider)}.lc-list__item-wrapper{display:flex;min-width:0}.lc-list__item-wrapper>.lc-list__item{flex:1;min-width:0}.lc-list__item{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--lc-density-padding-sm, var(--spacing-3)) var(--lc-density-padding-md, var(--spacing-4));transition:background-color .2s ease}.lc-list__item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary-500)}.lc-list__item--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.lc-list__icon{flex-shrink:0;color:var(--color-text-tertiary)}.lc-list__label{flex:1;min-width:0;overflow-wrap:anywhere;color:var(--color-text-primary, #111827);font-size:var(--font-size-base);line-height:var(--line-height-base)}.lc-list__avatar{flex-shrink:0;width:40px;height:40px;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:var(--color-primary-100, #dbeafe)}.lc-list__avatar-img{width:100%;height:100%;object-fit:cover}.lc-list__avatar-initials{font-size:var(--font-size-sm, .875rem);font-weight:600;color:var(--color-primary-700, #1d4ed8);text-transform:uppercase;line-height:1;-webkit-user-select:none;user-select:none}.lc-list__avatar--member-1{background-color:var(--color-member-1, #1a6a79)}.lc-list__avatar--member-2{background-color:var(--color-member-2, #b04a22)}.lc-list__avatar--member-3{background-color:var(--color-member-3, #4e3f84)}.lc-list__avatar--member-4{background-color:var(--color-member-4, #5f7150)}.lc-list__avatar--member-5{background-color:var(--color-member-5, #9e3846)}.lc-list__avatar--member-6{background-color:var(--color-member-6, #5a798c)}.lc-list__avatar--member .lc-list__avatar-initials{color:var(--color-on-member, #ffffff);font-weight:700;letter-spacing:.02em}.lc-list__content{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.lc-list__subtitle{font-size:var(--font-size-sm, .875rem);color:var(--color-text-tertiary);line-height:var(--line-height-sm, 1.25rem);overflow-wrap:anywhere}.lc-list__description{overflow-wrap:anywhere;font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);line-height:var(--line-height-xs, 1rem);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.lc-list--no-clamp .lc-list__description{display:block;-webkit-line-clamp:unset;overflow:visible}.lc-list__trailing{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.lc-list__action{flex-shrink:0}.lc-list--clickable .lc-list__item{cursor:pointer}.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled){background-color:var(--color-surface-hover)}.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled){background-color:var(--color-surface-sunken)}.lc-list__item--link{min-height:var(--size-min-touch-height, 2.75rem);color:inherit;text-decoration:none;cursor:pointer}.lc-list__item--link:hover{background-color:var(--color-surface-hover)}.lc-list__item--link:active{background-color:var(--color-surface-sunken)}.lc-list__item--link.lc-list__item--selected:hover{background-color:var(--color-primary-100, #dbeafe)}@media(forced-colors:active){.lc-list__item:focus-visible{outline:2px solid Highlight;outline-offset:-2px}}.lc-list__badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:9999px;font-size:var(--font-size-xs, .75rem);font-weight:500;line-height:1.25rem;white-space:nowrap}.lc-list__badge--default{background-color:var(--color-surface-hover);color:var(--color-text-secondary)}.lc-list__badge--primary{background-color:var(--color-primary-100, #dbeafe);color:var(--color-primary-700, #1d4ed8)}.lc-list__badge--success{background-color:var(--color-success-subtle);color:var(--color-on-success-subtle)}.lc-list__badge--warning{background-color:var(--color-warning-subtle);color:var(--color-on-warning-subtle)}.lc-list__badge--error{background-color:var(--color-error-100, #fee2e2);color:var(--color-on-error-subtle)}.lc-list__metadata{font-size:var(--font-size-xs, .75rem);color:var(--color-text-tertiary);white-space:nowrap}.lc-list__item--selected{background-color:var(--color-primary-50, #eff6ff)}.lc-list--clickable .lc-list__item--selected:hover:not(.lc-list__item--disabled){background-color:var(--color-primary-100, #dbeafe)}.lc-list--sm .lc-list__item{padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--lc-density-padding-sm, var(--spacing-3));gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-list--sm .lc-list__avatar{width:32px;height:32px}.lc-list--sm .lc-list__avatar-initials{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__label{font-size:var(--font-size-sm, .875rem)}.lc-list--sm .lc-list__subtitle{font-size:var(--font-size-xs, .75rem)}.lc-list--sm .lc-list__description{display:none}.lc-list--lg .lc-list__item{padding:var(--lc-density-padding-md, var(--spacing-4)) var(--spacing-5);gap:var(--lc-density-gap-md, var(--spacing-4))}.lc-list--lg .lc-list__avatar{width:48px;height:48px}.lc-list--lg .lc-list__avatar-initials{font-size:var(--font-size-base, 1rem)}.lc-list--lg .lc-list__label{font-size:var(--font-size-lg, 1.125rem)}.lc-list--lg .lc-list__content{gap:4px}.lc-list--card{background:transparent;gap:.5rem;overflow:visible}.lc-list--card .lc-list__item{padding:.75rem 1rem;border-radius:var(--border-radius-md, .5rem);background:var(--color-surface-2);border:1px solid var(--color-border);transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}.lc-list--card.lc-list--clickable .lc-list__item:hover:not(.lc-list__item--disabled),.lc-list--card .lc-list__item--link:hover:not(.lc-list__item--disabled){background:var(--color-surface-hover);border-color:var(--color-border-strong);box-shadow:var(--elevation-1)}.lc-list--card.lc-list--clickable .lc-list__item:active:not(.lc-list__item--disabled),.lc-list--card .lc-list__item--link:active:not(.lc-list__item--disabled){background:var(--color-surface-sunken)}.lc-list--card.lc-list--with-dividers .lc-list__item{border-bottom-color:transparent}\n"]
 		}]
 	}],
@@ -356,6 +374,10 @@ i0.ɵɵngDeclareClassMetadata({
 		linkClick: [{
 			type: i0.Output,
 			args: ["linkClick"]
+		}],
+		listEl: [{
+			type: i0.ViewChild,
+			args: ["listEl", { isSignal: true }]
 		}]
 	}
 });

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

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/list/list-item-template.directive.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { ListItem } from './list.component';\n\n/**\n * Directive for providing a custom template to render each list item.\n *\n * @example\n * ```html\n * <lc-list [items]=\"runs()\" (itemClick)=\"onRunClick($event)\">\n *   <ng-template lcListItem let-item>\n *     <lc-badge [variant]=\"getStatusVariant(item.status)\">{{ item.status }}</lc-badge>\n *     <span>{{ item.symbol }}</span>\n *     <span class=\"text-sm text-neutral-500\">{{ item.date }}</span>\n *   </ng-template>\n * </lc-list>\n * ```\n */\n@Directive({\n  selector: '[lcListItem]',\n  standalone: true,\n})\nexport class ListItemTemplateDirective {\n  public readonly template = inject(TemplateRef<{ $implicit: ListItem }>);\n}\n","import {\n  Component,\n  ChangeDetectionStrategy,\n  input,\n  computed,\n  contentChild,\n  effect,\n  isDevMode,\n  output,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { ButtonComponent, ButtonSize, ButtonVariant } from '@lifecorner/angular-ui-kit/button';\nimport { ListItemTemplateDirective } from './list-item-template.directive';\nimport type { AvatarColor } from '@lifecorner/angular-ui-kit/avatar';\n\n/**\n * List orientation type\n */\nexport type ListOrientation = 'vertical' | 'horizontal';\n\n/**\n * List visual variant\n *  - default: flat rows (original)\n *  - card: each item rendered as a mini-card with border, radius and shadow on hover\n */\nexport type ListVariant = 'default' | 'card';\n\n/**\n * List item interface\n */\nexport interface ListItem {\n  /** Item label text (primary line) */\n  label: string;\n  /** Secondary text shown below the label */\n  subtitle?: string;\n  /** Description text shown below subtitle (third line) */\n  description?: string;\n  /** Optional icon identifier */\n  icon?: string;\n  /** Avatar URL or initials (renders a circular avatar instead of icon) */\n  avatar?: string;\n  /**\n   * Background of avatar initials: `default` or a member colour `member-1` …\n   * `member-6` with white initials (as `lc-avatar`'s `color`).\n   */\n  avatarColor?: AvatarColor;\n  /** Badge text (e.g. count, status label) shown on the trailing side */\n  badge?: string;\n  /** Badge color variant */\n  badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';\n  /** Metadata text shown on the trailing side (e.g. date, size) */\n  metadata?: string;\n  /** Optional action label */\n  action?: string;\n  /**\n   * Accessible name of this row's action when the visible label repeats on\n   * every row (e.g. „Entfernen“ → „iPhone · Safari entfernen“). The visible\n   * label must be part of it (WCAG 2.5.3).\n   */\n  actionAriaLabel?: string;\n  /**\n   * URL of the row link (3.16, TD-4). The row renders as an `<a>` over its\n   * full area (at least 44 px high) with real link semantics (middle click,\n   * \"open in new tab\"). Not rendered with `href`: `action` (no control inside\n   * a link; a dev warning). Not emitted: `itemClick` (see `linkClick`). With\n   * `disabled` the row is the plain disabled row, no link. A custom\n   * `lcListItem` template must not hold controls in `href` rows.\n   */\n  href?: string;\n  /** Item identifier */\n  id?: string;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n  /**\n   * Whether the item is the current choice: a tinted row and, since 3.33,\n   * `aria-current=\"true\"` on the row element (the button with `clickable`,\n   * the link with `href`, the row otherwise). Pair it with a visible mark such\n   * as a badge; the tint alone is colour.\n   */\n  selected?: boolean;\n  /** Any additional data */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any;\n}\n\n/**\n * List item size\n */\nexport type ListSize = 'sm' | 'md' | 'lg';\n\n/**\n * A plain click (or Enter) on an `href` row (3.16, TD-4): `item` is the row,\n * `event` the click. Call `event.preventDefault()` to navigate with your\n * router instead of a full page load.\n */\nexport interface ListLinkClickEvent {\n  item: ListItem;\n  event: MouseEvent;\n}\n\n/**\n * List component for displaying structured item collections.\n *\n * Features:\n * - Vertical and horizontal layout orientations\n * - Variant styles (default, bordered, card)\n * - Optional dividers between items\n * - Icon and avatar support per item\n * - Action buttons with click events\n * - Accessible with ARIA list role; `clickable` rows are keyboard-operable\n * - `ListItem.href` rows are real links over the full row (3.16, TD-4);\n *   `linkClick` hands plain clicks to your router\n *\n * @example\n * ```html\n * <lc-list\n *   [items]=\"listItems\"\n *   orientation=\"vertical\"\n *   [showDividers]=\"true\"\n *   (itemClick)=\"handleItemClick($event)\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-list',\n  standalone: true,\n  imports: [NgTemplateOutlet, IconComponent, ButtonComponent],\n  templateUrl: './list.component.html',\n  styleUrl: './list.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ListComponent {\n  /** Custom item template provided via lcListItem directive */\n  readonly itemTemplate = contentChild(ListItemTemplateDirective);\n\n  /** Array of list items to display */\n  items = input<ListItem[]>([]);\n\n  /** Orientation of the list */\n  orientation = input<ListOrientation>('vertical');\n\n  /** Visual variant */\n  variant = input<ListVariant>('default');\n\n  /** Size of list items */\n  size = input<ListSize>('md');\n\n  /** Whether to show dividers between items */\n  showDividers = input<boolean>(false);\n\n  /**\n   * Whether rows are interactive. When set, each row is rendered as a\n   * focusable button (Enter / Space emit `itemClick`) so `itemClick` is\n   * reachable from the keyboard. Set this whenever you handle `itemClick`.\n   */\n  clickable = input<boolean>(false);\n\n  /**\n   * Clamp each item's `description` to two lines (3.2). Set `false` for\n   * reading text that must show in full (3.3, G-11).\n   * @default true\n   */\n  clampDescription = input<boolean>(true);\n\n  /**\n   * Variant of the built-in row action (`ListItem.action`).\n   * @default 'ghost'\n   */\n  actionVariant = input<ButtonVariant>('ghost');\n\n  /**\n   * Size of the built-in row action: `xs` (3.2, about 25 px) … `lg` (48.5 px,\n   * the 44 px touch target).\n   * @default 'xs'\n   */\n  actionSize = input<ButtonSize>('xs');\n\n  /** Event emitted when an item is clicked */\n  readonly itemClick = output<ListItem>();\n\n  /** Event emitted when an action button is clicked */\n  readonly actionClick = output<ListItem>();\n\n  /**\n   * A plain click (or Enter) on an `href` row: primary button, no\n   * Ctrl/Cmd/Shift/Alt (3.16, TD-4). Emitted before the browser follows the\n   * link; call `event.preventDefault()` and navigate with your router for an\n   * in-app route (`router.navigateByUrl(item.href)`). The kit never prevents\n   * the default; modifier and middle clicks are never emitted, so \"open in new\n   * tab\" keeps working.\n   */\n  readonly linkClick = output<ListLinkClickEvent>();\n\n  constructor() {\n    effect(() => {\n      if (!isDevMode()) return;\n      // `items` may be bound to undefined (tolerated since 3.2).\n      for (const item of this.items() ?? []) {\n        if (this.isLinkRow(item) && item.action) {\n          console.warn(`[lc-list] item \"${item.label}\" has href and action: the action is not rendered inside a link`);\n        }\n      }\n    });\n  }\n\n  /** Whether a row renders as a link: `href` set and not disabled. */\n  protected isLinkRow(item: ListItem): boolean {\n    return !!item.href && !item.disabled;\n  }\n\n  /**\n   * Computed CSS classes for the list\n   */\n  listClasses = computed(() => {\n    const classes = ['lc-list'];\n\n    classes.push(`lc-list--${this.orientation()}`);\n    classes.push(`lc-list--${this.variant()}`);\n    classes.push(`lc-list--${this.size()}`);\n\n    if (this.showDividers()) {\n      classes.push('lc-list--with-dividers');\n    }\n\n    if (this.clickable()) {\n      classes.push('lc-list--clickable');\n    }\n\n    if (!this.clampDescription()) {\n      classes.push('lc-list--no-clamp');\n    }\n\n    return classes.join(' ');\n  });\n\n  /**\n   * Get CSS classes for a list item\n   */\n  getItemClasses(item: ListItem): string {\n    const classes = ['lc-list__item'];\n\n    if (item.disabled) {\n      classes.push('lc-list__item--disabled');\n    }\n\n    if (item.selected) {\n      classes.push('lc-list__item--selected');\n    }\n\n    return classes.join(' ');\n  }\n\n  /** CSS classes of an item's avatar (member colour, LK-7). */\n  protected avatarClasses(item: ListItem): string {\n    const color = item.avatarColor;\n    return color && color !== 'default'\n      ? `lc-list__avatar lc-list__avatar--member lc-list__avatar--${color}`\n      : 'lc-list__avatar';\n  }\n\n  /**\n   * Handle item click\n   */\n  onItemClick(item: ListItem): void {\n    if (!item.disabled) {\n      this.itemClick.emit(item);\n    }\n  }\n\n  /**\n   * Keyboard activation of a clickable row. Only reacts to keys on the row\n   * itself: a nested control (e.g. the action button) handles its own Enter.\n   */\n  onItemKeydown(event: KeyboardEvent, item: ListItem): void {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.onItemClick(item);\n    }\n  }\n\n  /**\n   * Handle action button click\n   */\n  onActionClick(item: ListItem): void {\n    this.actionClick.emit(item);\n  }\n\n  /**\n   * A click on a link row: only a plain primary click reaches `linkClick`.\n   * The default (following the link) is left to the browser and the consumer.\n   */\n  protected onLinkClick(event: MouseEvent, item: ListItem): void {\n    if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;\n    this.linkClick.emit({ item, event });\n  }\n}\n","<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action && !isLinkRow(item)) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n  }\n</ng-template>\n\n<div [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (isLinkRow(item)) {\n      <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <a\n          [class]=\"getItemClasses(item) + ' lc-list__item--link'\"\n          [href]=\"item.href\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onLinkClick($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </a>\n      </div>\n    } @else if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        [attr.aria-current]=\"item.selected ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n"],"mappings":";;;;;AAqBA,IAAa,4BAAb,MAAa,0BAAyB;CACpB,WAAW,OAAO,WAAoC;CAD3D,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAyB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAAzB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAyB,cAAA;EAAA,UAAA;EAAA,UAAA;CAAA,CAAA;;AAAzB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAyB,YAAA,CAAA;EAJrC,MAAA;EAAU,MAAA,CAAA;GACT,UAAU;GACV,YAAY;EACb,CAAA;;;ACgHD,IAAa,gBAAb,MAAa,cAAa;CAEf,eAAe,aAAa,2BAA0B,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAG/D,QAAQ,MAAkB,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CAG7B,cAAc,MAAuB,YAAW,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAGhD,UAAU,MAAmB,WAAU,GAAA,YAAA,CAAA,EAAA,WAAA,UAAA,CAAA,+BAAA,CAAA,CAAA;CAGvC,OAAO,MAAgB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAG5B,eAAe,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAOpC,YAAY,MAAe,OAAM,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAOjC,mBAAmB,MAAe,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,mBAAA,CAAA,+BAAA,CAAA,CAAA;CAMvC,gBAAgB,MAAqB,SAAQ,GAAA,YAAA,CAAA,EAAA,WAAA,gBAAA,CAAA,+BAAA,CAAA,CAAA;CAO7C,aAAa,MAAkB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,aAAA,CAAA,+BAAA,CAAA,CAAA;CAG3B,YAAY,OAAM;CAGlB,cAAc,OAAM;CAUpB,YAAY,OAAM;CAE3B,cAAA;EACE,aAAY;GACV,IAAI,CAAC,UAAS,GAAI;GAElB,KAAK,MAAM,QAAQ,KAAK,MAAK,KAAM,CAAA,GACjC,IAAI,KAAK,UAAU,IAAI,KAAK,KAAK,QAC/B,QAAQ,KAAK,mBAAmB,KAAK,MAAK,gEAAiE;EAGjH,CAAC;CACH;CAGU,UAAU,MAAc;EAChC,OAAO,CAAC,CAAC,KAAK,QAAQ,CAAC,KAAK;CAC9B;CAKA,cAAc,eAAc;EAC1B,MAAM,UAAU,CAAC,SAAS;EAE1B,QAAQ,KAAK,YAAY,KAAK,YAAW,GAAI;EAC7C,QAAQ,KAAK,YAAY,KAAK,QAAO,GAAI;EACzC,QAAQ,KAAK,YAAY,KAAK,KAAI,GAAI;EAEtC,IAAI,KAAK,aAAY,GACnB,QAAQ,KAAK,wBAAwB;EAGvC,IAAI,KAAK,UAAS,GAChB,QAAQ,KAAK,oBAAoB;EAGnC,IAAI,CAAC,KAAK,iBAAgB,GACxB,QAAQ,KAAK,mBAAmB;EAGlC,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,cAAA,CAAA,+BAAA,CAAA,CAAA;CAKF,eAAe,MAAc;EAC3B,MAAM,UAAU,CAAC,eAAe;EAEhC,IAAI,KAAK,UACP,QAAQ,KAAK,yBAAyB;EAGxC,IAAI,KAAK,UACP,QAAQ,KAAK,yBAAyB;EAGxC,OAAO,QAAQ,KAAK,GAAG;CACzB;CAGU,cAAc,MAAc;EACpC,MAAM,QAAQ,KAAK;EACnB,OAAO,SAAS,UAAU,YACtB,4DAA4D,UAC5D;CACN;CAKA,YAAY,MAAc;EACxB,IAAI,CAAC,KAAK,UACR,KAAK,UAAU,KAAK,IAAI;CAE5B;CAMA,cAAc,OAAsB,MAAc;EAChD,IAAI,MAAM,WAAW,MAAM,eAAe;EAC1C,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAc;GACpB,KAAK,YAAY,IAAI;EACvB;CACF;CAKA,cAAc,MAAc;EAC1B,KAAK,YAAY,KAAK,IAAI;CAC5B;CAMU,YAAY,OAAmB,MAAc;EACrD,IAAI,MAAM,WAAW,KAAK,MAAM,WAAW,MAAM,WAAW,MAAM,YAAY,MAAM,QAAQ;EAC5F,KAAK,UAAU,KAAK;GAAE;GAAM;EAAK,CAAE;CACrC;CApKW,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,aAAA;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,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,WAAA;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,eAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,YAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA;GAAA,WAAA;GAAA,aAAA;GAAA,WAAA;EAAA;EAAA,SAAA,CAAA;GAAA,cAAA;GAAA,OAAA;GAAA,WAEa;GAAyB,aAAA;GAAA,UAAA;EAAA,CAAA;EAAA,UAAA;EAAA,UCtIhE;EAqGA,QAAA,CAAA,4uNAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MD0BY;IAAgB,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAa,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;IAAe,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;IAAA,SAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AAK/C,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAa,YAAA,CAAA;EARzB,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAS,YACP;GAAI,SACP;IAAC;IAAkB;IAAe;GAAe;GAAC,iBAG1C,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,4uNAAA;EAAA,CAAA;CAIV,CAAA;CAAA,sBAAA,CAAA;CAAA,gBAAA;EAAA,cAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,GAAA,iBAAA,yBAAyB,GAAA,EAAA,UAAA,KAAA,CAAA;EAAA,CAAA;EAAA,OAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,SAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,MAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,cAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,kBAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,eAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,YAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA;IAAA,UAAA;IAAA,OAAA;IAAA,UAAA;GAAA,CAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,WAAA;EAAA,CAAA;EAAA,aAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,aAAA;EAAA,CAAA;EAAA,WAAA,CAAA;GAAA,MAAA,GAAA;GAAA,MAAA,CAAA,WAAA;EAAA,CAAA;CAAA;AAAA,CAAA"}
+{"version":3,"file":"lifecorner-angular-ui-kit-list.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/list/list-item-template.directive.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.ts","../../../../libs/angular-ui-kit/src/lib/list/list.component.html"],"sourcesContent":["import { Directive, TemplateRef, inject } from '@angular/core';\nimport { ListItem } from './list.component';\n\n/**\n * Directive for providing a custom template to render each list item.\n *\n * @example\n * ```html\n * <lc-list [items]=\"runs()\" (itemClick)=\"onRunClick($event)\">\n *   <ng-template lcListItem let-item>\n *     <lc-badge [variant]=\"getStatusVariant(item.status)\">{{ item.status }}</lc-badge>\n *     <span>{{ item.symbol }}</span>\n *     <span class=\"text-sm text-neutral-500\">{{ item.date }}</span>\n *   </ng-template>\n * </lc-list>\n * ```\n */\n@Directive({\n  selector: '[lcListItem]',\n  standalone: true,\n})\nexport class ListItemTemplateDirective {\n  public readonly template = inject(TemplateRef<{ $implicit: ListItem }>);\n}\n","import {\n  AfterRenderRef,\n  Component,\n  ChangeDetectionStrategy,\n  ElementRef,\n  Injector,\n  input,\n  computed,\n  contentChild,\n  effect,\n  inject,\n  isDevMode,\n  output,\n  viewChild,\n  afterNextRender,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { ButtonComponent, ButtonSize, ButtonVariant } from '@lifecorner/angular-ui-kit/button';\nimport { ListItemTemplateDirective } from './list-item-template.directive';\nimport type { AvatarColor } from '@lifecorner/angular-ui-kit/avatar';\n\n/**\n * List orientation type\n */\nexport type ListOrientation = 'vertical' | 'horizontal';\n\n/**\n * List visual variant\n *  - default: flat rows (original)\n *  - card: each item rendered as a mini-card with border, radius and shadow on hover\n */\nexport type ListVariant = 'default' | 'card';\n\n/**\n * List item interface\n */\nexport interface ListItem {\n  /** Item label text (primary line) */\n  label: string;\n  /** Secondary text shown below the label */\n  subtitle?: string;\n  /** Description text shown below subtitle (third line) */\n  description?: string;\n  /** Optional icon identifier */\n  icon?: string;\n  /** Avatar URL or initials (renders a circular avatar instead of icon) */\n  avatar?: string;\n  /**\n   * Background of avatar initials: `default` or a member colour `member-1` …\n   * `member-6` with white initials (as `lc-avatar`'s `color`).\n   */\n  avatarColor?: AvatarColor;\n  /** Badge text (e.g. count, status label) shown on the trailing side */\n  badge?: string;\n  /** Badge color variant */\n  badgeVariant?: 'default' | 'primary' | 'success' | 'warning' | 'error';\n  /** Metadata text shown on the trailing side (e.g. date, size) */\n  metadata?: string;\n  /** Optional action label */\n  action?: string;\n  /**\n   * Accessible name of this row's action when the visible label repeats on\n   * every row (e.g. „Entfernen“ → „iPhone · Safari entfernen“). The visible\n   * label must be part of it (WCAG 2.5.3).\n   */\n  actionAriaLabel?: string;\n  /**\n   * URL of the row link (3.16, TD-4). The row renders as an `<a>` over its\n   * full area (at least 44 px high) with real link semantics (middle click,\n   * \"open in new tab\"). Not rendered with `href`: `action` (no control inside\n   * a link; a dev warning). Not emitted: `itemClick` (see `linkClick`). With\n   * `disabled` the row is the plain disabled row, no link. A custom\n   * `lcListItem` template must not hold controls in `href` rows.\n   */\n  href?: string;\n  /** Item identifier */\n  id?: string;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n  /**\n   * Whether the item is the current choice: a tinted row and, since 3.33,\n   * `aria-current=\"true\"` on the row element (the button with `clickable`,\n   * the link with `href`, the row otherwise). Pair it with a visible mark such\n   * as a badge; the tint alone is colour.\n   */\n  selected?: boolean;\n  /** Any additional data */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  [key: string]: any;\n}\n\n/**\n * List item size\n */\nexport type ListSize = 'sm' | 'md' | 'lg';\n\n/**\n * A plain click (or Enter) on an `href` row (3.16, TD-4): `item` is the row,\n * `event` the click. Call `event.preventDefault()` to navigate with your\n * router instead of a full page load.\n */\nexport interface ListLinkClickEvent {\n  item: ListItem;\n  event: MouseEvent;\n}\n\n/**\n * The part of a row that `focusItem()` focuses (3.34): `row`, the row's\n * button (`clickable`) or link (`href`), or `action`, its built-in action\n * button.\n */\nexport type ListItemPart = 'row' | 'action';\n\n/**\n * List component for displaying structured item collections.\n *\n * Features:\n * - Vertical and horizontal layout orientations\n * - Variant styles (default, bordered, card)\n * - Optional dividers between items\n * - Icon and avatar support per item\n * - Action buttons with click events\n * - Accessible with ARIA list role; `clickable` rows are keyboard-operable\n * - `ListItem.href` rows are real links over the full row (3.16, TD-4);\n *   `linkClick` hands plain clicks to your router\n * - `focusItem(id, part)` (3.34): moves the focus to a row's button or link,\n *   or to its action, e.g. when the sheet that action opened closes\n *   (WCAG 2.4.3)\n *\n * @example\n * ```html\n * <lc-list\n *   [items]=\"listItems\"\n *   orientation=\"vertical\"\n *   [showDividers]=\"true\"\n *   (itemClick)=\"handleItemClick($event)\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-list',\n  standalone: true,\n  imports: [NgTemplateOutlet, IconComponent, ButtonComponent],\n  templateUrl: './list.component.html',\n  styleUrl: './list.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ListComponent {\n  /** Custom item template provided via lcListItem directive */\n  readonly itemTemplate = contentChild(ListItemTemplateDirective);\n\n  /** Array of list items to display */\n  items = input<ListItem[]>([]);\n\n  /** Orientation of the list */\n  orientation = input<ListOrientation>('vertical');\n\n  /** Visual variant */\n  variant = input<ListVariant>('default');\n\n  /** Size of list items */\n  size = input<ListSize>('md');\n\n  /** Whether to show dividers between items */\n  showDividers = input<boolean>(false);\n\n  /**\n   * Whether rows are interactive. When set, each row is rendered as a\n   * focusable button (Enter / Space emit `itemClick`) so `itemClick` is\n   * reachable from the keyboard. Set this whenever you handle `itemClick`.\n   */\n  clickable = input<boolean>(false);\n\n  /**\n   * Clamp each item's `description` to two lines (3.2). Set `false` for\n   * reading text that must show in full (3.3, G-11).\n   * @default true\n   */\n  clampDescription = input<boolean>(true);\n\n  /**\n   * Variant of the built-in row action (`ListItem.action`).\n   * @default 'ghost'\n   */\n  actionVariant = input<ButtonVariant>('ghost');\n\n  /**\n   * Size of the built-in row action: `xs` (3.2, about 25 px) … `lg` (48.5 px,\n   * the 44 px touch target).\n   * @default 'xs'\n   */\n  actionSize = input<ButtonSize>('xs');\n\n  /** Event emitted when an item is clicked */\n  readonly itemClick = output<ListItem>();\n\n  /** Event emitted when an action button is clicked */\n  readonly actionClick = output<ListItem>();\n\n  /**\n   * A plain click (or Enter) on an `href` row: primary button, no\n   * Ctrl/Cmd/Shift/Alt (3.16, TD-4). Emitted before the browser follows the\n   * link; call `event.preventDefault()` and navigate with your router for an\n   * in-app route (`router.navigateByUrl(item.href)`). The kit never prevents\n   * the default; modifier and middle clicks are never emitted, so \"open in new\n   * tab\" keeps working.\n   */\n  readonly linkClick = output<ListLinkClickEvent>();\n\n  private readonly injector = inject(Injector);\n\n  /** The `role=\"list\"` element; each item renders exactly one child of it. */\n  private readonly listEl = viewChild<ElementRef<HTMLElement>>('listEl');\n\n  /** The `focusItem()` hook waiting for the next render. */\n  private pendingItemFocus?: AfterRenderRef;\n\n  constructor() {\n    effect(() => {\n      if (!isDevMode()) return;\n      // `items` may be bound to undefined (tolerated since 3.2).\n      for (const item of this.items() ?? []) {\n        if (this.isLinkRow(item) && item.action) {\n          console.warn(`[lc-list] item \"${item.label}\" has href and action: the action is not rendered inside a link`);\n        }\n      }\n    });\n  }\n\n  /**\n   * Moves the focus into the row of the first item with this `id` after the\n   * next render (3.34). `'row'`: the row's button (`clickable`) or link\n   * (`href`). `'action'`: its built-in action button. Does nothing for an\n   * unknown `id`, for a row without that part (a plain row, a disabled row for\n   * `'row'`, no `action`, an `lcListItem` template's own controls), or when\n   * the list is destroyed first. A second call before that render replaces the\n   * first.\n   * @param id The `ListItem.id` of the row.\n   * @param part Which part of the row gets the focus.\n   */\n  focusItem(id: string, part: ListItemPart = 'row'): void {\n    this.pendingItemFocus?.destroy();\n    this.pendingItemFocus = afterNextRender(\n      () => {\n        this.pendingItemFocus = undefined;\n        const index = (this.items() ?? []).findIndex((item) => item.id === id);\n        const row = index < 0 ? null : this.listEl()?.nativeElement.children.item(index);\n        // querySelector skips the row element itself, so a plain row matches nothing.\n        const target = row?.querySelector<HTMLElement>(\n          part === 'action'\n            ? '.lc-list__action-area button'\n            : 'a.lc-list__item, .lc-list__item[role=button]:not([aria-disabled=true])',\n        );\n        target?.focus();\n      },\n      { injector: this.injector },\n    );\n  }\n\n  /** Whether a row renders as a link: `href` set and not disabled. */\n  protected isLinkRow(item: ListItem): boolean {\n    return !!item.href && !item.disabled;\n  }\n\n  /**\n   * Computed CSS classes for the list\n   */\n  listClasses = computed(() => {\n    const classes = ['lc-list'];\n\n    classes.push(`lc-list--${this.orientation()}`);\n    classes.push(`lc-list--${this.variant()}`);\n    classes.push(`lc-list--${this.size()}`);\n\n    if (this.showDividers()) {\n      classes.push('lc-list--with-dividers');\n    }\n\n    if (this.clickable()) {\n      classes.push('lc-list--clickable');\n    }\n\n    if (!this.clampDescription()) {\n      classes.push('lc-list--no-clamp');\n    }\n\n    return classes.join(' ');\n  });\n\n  /**\n   * Get CSS classes for a list item\n   */\n  getItemClasses(item: ListItem): string {\n    const classes = ['lc-list__item'];\n\n    if (item.disabled) {\n      classes.push('lc-list__item--disabled');\n    }\n\n    if (item.selected) {\n      classes.push('lc-list__item--selected');\n    }\n\n    return classes.join(' ');\n  }\n\n  /** CSS classes of an item's avatar (member colour, LK-7). */\n  protected avatarClasses(item: ListItem): string {\n    const color = item.avatarColor;\n    return color && color !== 'default'\n      ? `lc-list__avatar lc-list__avatar--member lc-list__avatar--${color}`\n      : 'lc-list__avatar';\n  }\n\n  /**\n   * Handle item click\n   */\n  onItemClick(item: ListItem): void {\n    if (!item.disabled) {\n      this.itemClick.emit(item);\n    }\n  }\n\n  /**\n   * Keyboard activation of a clickable row. Only reacts to keys on the row\n   * itself: a nested control (e.g. the action button) handles its own Enter.\n   */\n  onItemKeydown(event: KeyboardEvent, item: ListItem): void {\n    if (event.target !== event.currentTarget) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.onItemClick(item);\n    }\n  }\n\n  /**\n   * Handle action button click\n   */\n  onActionClick(item: ListItem): void {\n    this.actionClick.emit(item);\n  }\n\n  /**\n   * A click on a link row: only a plain primary click reaches `linkClick`.\n   * The default (following the link) is left to the browser and the consumer.\n   */\n  protected onLinkClick(event: MouseEvent, item: ListItem): void {\n    if (event.button !== 0 || event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;\n    this.linkClick.emit({ item, event });\n  }\n}\n","<!--\n  Row content is shared between the plain (legacy) row and the keyboard-\n  operable row rendered when `clickable` is set.\n-->\n<ng-template #rowContent let-item>\n  @if (itemTemplate(); as tpl) {\n    <ng-container *ngTemplateOutlet=\"tpl.template; context: { $implicit: item }\"></ng-container>\n  } @else {\n    <!-- Leading: Avatar or Icon -->\n    @if (item.avatar) {\n      <div [class]=\"avatarClasses(item)\">\n        @if (item.avatar.startsWith('http') || item.avatar.startsWith('/') || item.avatar.startsWith('data:')) {\n          <img [src]=\"item.avatar\" [alt]=\"item.label\" class=\"lc-list__avatar-img\" />\n        } @else {\n          <span class=\"lc-list__avatar-initials\">{{ item.avatar }}</span>\n        }\n      </div>\n    } @else if (item.icon) {\n      <lc-icon [name]=\"item.icon\" class=\"lc-list__icon\" size=\"sm\" [decorative]=\"true\" />\n    }\n\n    <!-- Content: Label, Subtitle, Description -->\n    <div class=\"lc-list__content\">\n      <span class=\"lc-list__label\">{{ item.label }}</span>\n      @if (item.subtitle) {\n        <span class=\"lc-list__subtitle\">{{ item.subtitle }}</span>\n      }\n      @if (item.description) {\n        <span class=\"lc-list__description\">{{ item.description }}</span>\n      }\n    </div>\n\n    <!-- Trailing: Badge, Metadata, Action -->\n    <div class=\"lc-list__trailing\">\n      @if (item.badge) {\n        <span class=\"lc-list__badge lc-list__badge--{{ item.badgeVariant || 'default' }}\">{{ item.badge }}</span>\n      }\n      @if (item.metadata) {\n        <span class=\"lc-list__metadata\">{{ item.metadata }}</span>\n      }\n      @if (item.action && !isLinkRow(item)) {\n        <!-- The action is its own control: its click must not also activate the row. -->\n        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -- only stops the action click from also activating the row; the action is a real button -->\n        <span class=\"lc-list__action-area\" (click)=\"$event.stopPropagation()\">\n          <lc-button\n            [variant]=\"actionVariant()\"\n            [size]=\"actionSize()\"\n            [ariaLabel]=\"item.actionAriaLabel ?? ''\"\n            class=\"lc-list__action\"\n            (clicked)=\"onActionClick(item)\"\n          >\n            {{ item.action }}\n          </lc-button>\n        </span>\n      }\n    </div>\n  }\n</ng-template>\n\n<div #listEl [class]=\"listClasses()\" role=\"list\">\n  @for (item of items(); track item.id || $index) {\n    @if (isLinkRow(item)) {\n      <!-- A real link over the whole row (3.16, TD-4); the row element carries the item styles. -->\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <a\n          [class]=\"getItemClasses(item) + ' lc-list__item--link'\"\n          [href]=\"item.href\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onLinkClick($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </a>\n      </div>\n    } @else if (clickable()) {\n      <div class=\"lc-list__item-wrapper\" role=\"listitem\">\n        <div\n          [class]=\"getItemClasses(item)\"\n          role=\"button\"\n          [attr.tabindex]=\"item.disabled ? -1 : 0\"\n          [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n          [attr.aria-current]=\"item.selected ? 'true' : null\"\n          (click)=\"onItemClick(item)\"\n          (keydown)=\"onItemKeydown($event, item)\"\n        >\n          <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n        </div>\n      </div>\n    } @else {\n      <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events -- non-clickable lists keep reporting mouse clicks (backward compatible); use clickable for keyboard rows -->\n      <div\n        [class]=\"getItemClasses(item)\"\n        role=\"listitem\"\n        [attr.aria-disabled]=\"item.disabled ? 'true' : null\"\n        [attr.aria-current]=\"item.selected ? 'true' : null\"\n        (click)=\"onItemClick(item)\"\n      >\n        <ng-container *ngTemplateOutlet=\"rowContent; context: { $implicit: item }\"></ng-container>\n      </div>\n    }\n  }\n</div>\n"],"mappings":"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"}

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

@@ -1,10 +1,11 @@
 import * as i0 from "@angular/core";
-import { ChangeDetectionStrategy, Component, HostListener, ViewEncapsulation, computed, effect, inject, input, linkedSignal, output } from "@angular/core";
+import { ChangeDetectionStrategy, Component, EnvironmentInjector, HostListener, ViewEncapsulation, afterNextRender, computed, effect, inject, input, linkedSignal, output, untracked } from "@angular/core";
 import * as i1 from "@angular/cdk/a11y";
 import { A11yModule } from "@angular/cdk/a11y";
 import { IconComponent, ɵprovideKitIcons } from "@lifecorner/angular-ui-kit/icon";
 import { ICON_X_MARK } from "@lifecorner/angular-ui-kit/icons";
 import { OverlayStackService } from "@lifecorner/angular-ui-kit/internal/overlay";
+const FOCUSABLE = "button:not([disabled]), [href], input:not([disabled]):not([type=hidden]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
 var ModalComponent = class ModalComponent {
 	static nextId = 0;
 	open = input(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
@@ -17,6 +18,7 @@ var ModalComponent = class ModalComponent {
 	ariaLabelledBy = input(...ngDevMode ? [void 0, { debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []);
 	ariaDescribedBy = input(...ngDevMode ? [void 0, { debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []);
 	closeAriaLabel = input("Close modal", ...ngDevMode ? [{ debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []);
+	returnFocusTo = input(null, ...ngDevMode ? [{ debugName: "returnFocusTo" }] : /* istanbul ignore next */ []);
 	modalOpened = output();
 	modalClosed = output();
 	openChange = output();
@@ -28,6 +30,8 @@ var ModalComponent = class ModalComponent {
 	overlayStack = inject(OverlayStackService);
 	modalId = `lc-modal-${++ModalComponent.nextId}`;
 	originalOverflow;
+	environmentInjector = inject(EnvironmentInjector);
+	shown = false;
 	constructor() {
 		effect(() => {
 			if (this._open()) this.showModal();
@@ -64,6 +68,7 @@ var ModalComponent = class ModalComponent {
 		if (this.closeOnEscape()) this.closeModal();
 	}
 	showModal() {
+		this.shown = true;
 		this.overlayStack.push(this.modalId);
 		if (typeof document !== "undefined" && this.originalOverflow === void 0) {
 			this.originalOverflow = document.body.style.overflow;
@@ -76,6 +81,17 @@ var ModalComponent = class ModalComponent {
 			document.body.style.overflow = this.originalOverflow;
 			this.originalOverflow = void 0;
 		}
+		if (!this.shown) return;
+		this.shown = false;
+		if (untracked(this.returnFocusTo)) this.scheduleFocusReturn();
+	}
+	scheduleFocusReturn() {
+		afterNextRender(() => {
+			const target = this.returnFocusTo();
+			if (this.shown || !target?.isConnected) return;
+			target.focus();
+			if (target.ownerDocument.activeElement !== target && target.localName.includes("-")) target.querySelector(FOCUSABLE)?.focus();
+		}, { injector: this.environmentInjector });
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -161,6 +177,13 @@ var ModalComponent = class ModalComponent {
 				isSignal: true,
 				isRequired: false,
 				transformFunction: null
+			},
+			returnFocusTo: {
+				classPropertyName: "returnFocusTo",
+				publicName: "returnFocusTo",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
 			}
 		},
 		outputs: {
@@ -305,6 +328,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		returnFocusTo: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "returnFocusTo",
+				required: false
+			}]
+		}],
 		modalOpened: [{
 			type: i0.Output,
 			args: ["modalOpened"]