@lifecorner/angular-ui-kit 3.30.2 → 3.31.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs +18 -1
  2. package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs.map +1 -1
  3. package/fesm2022/lifecorner-angular-ui-kit-select.mjs +6 -3
  4. package/fesm2022/lifecorner-angular-ui-kit-select.mjs.map +1 -1
  5. package/fesm2022/lifecorner-angular-ui-kit-sidenav.mjs +23 -2
  6. package/fesm2022/lifecorner-angular-ui-kit-sidenav.mjs.map +1 -1
  7. package/fesm2022/lifecorner-angular-ui-kit-tooltip.mjs +3 -0
  8. package/fesm2022/lifecorner-angular-ui-kit-tooltip.mjs.map +1 -1
  9. package/package.json +1 -1
  10. package/types/lifecorner-angular-ui-kit-bottom-nav.d.ts +30 -8
  11. package/types/lifecorner-angular-ui-kit-select.d.ts +9 -0
  12. package/types/lifecorner-angular-ui-kit-sidenav.d.ts +20 -1
  13. package/types/lifecorner-angular-ui-kit-tooltip.d.ts +2 -0
package/fesm2022/lifecorner-angular-ui-kit-sidenav.mjs CHANGED
@@ -50,6 +50,7 @@ var SidenavComponent = class SidenavComponent {
50
50
  collapseAriaLabel = input("", ...ngDevMode ? [{ debugName: "collapseAriaLabel" }] : /* istanbul ignore next */ []);
51
51
  collapseTitle = input("Collapse sidebar", ...ngDevMode ? [{ debugName: "collapseTitle" }] : /* istanbul ignore next */ []);
52
52
  closeAriaLabel = input("Close navigation", ...ngDevMode ? [{ debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []);
53
+ badgeAriaLabel = input("{value}", ...ngDevMode ? [{ debugName: "badgeAriaLabel" }] : /* istanbul ignore next */ []);
53
54
  expandedItems = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "expandedItems" }] : /* istanbul ignore next */ []);
54
55
  activeChildParents = computed(() => currentItemParents(this.items(), this.currentItem()), ...ngDevMode ? [{ debugName: "activeChildParents" }] : /* istanbul ignore next */ []);
55
56
  sortedItems = computed(() => sortNavigationItems(this.items()), ...ngDevMode ? [{ debugName: "sortedItems" }] : /* istanbul ignore next */ []);
@@ -100,6 +101,11 @@ var SidenavComponent = class SidenavComponent {
100
101
  sidenavStyles = computed(() => ({ width: this.isMobile() ? this.width() : this.collapsed() ? "56px" : this.width() }), ...ngDevMode ? [{ debugName: "sidenavStyles" }] : /* istanbul ignore next */ []);
101
102
  brandInitial = computed(() => ([...this.brandName().trim()][0] ?? "").toUpperCase(), ...ngDevMode ? [{ debugName: "brandInitial" }] : /* istanbul ignore next */ []);
102
103
  isRail = computed(() => this.collapsed() && !this.isMobile(), ...ngDevMode ? [{ debugName: "isRail" }] : /* istanbul ignore next */ []);
104
+ badgeText(item) {
105
+ if (!item.badge) return "";
106
+ const text = this.badgeAriaLabel().replace("{value}", String(item.badge.value));
107
+ return this.isRail() ? `${item.label} ${text}` : text;
108
+ }
103
109
  collapseToggleLabel = computed(() => this.collapsed() ? this.expandAriaLabel() : this.collapseAriaLabel() || (this.position() === "right" ? "Collapse navigation to the right" : "Collapse navigation to the left"), ...ngDevMode ? [{ debugName: "collapseToggleLabel" }] : /* istanbul ignore next */ []);
104
110
  collapseToggleIcon = computed(() => {
105
111
  return (this.position() === "right" ? this.collapsed() : !this.collapsed()) ? "chevron-left" : "chevron-right";
@@ -364,6 +370,13 @@ var SidenavComponent = class SidenavComponent {
364
370
  isSignal: true,
365
371
  isRequired: false,
366
372
  transformFunction: null
373
+ },
374
+ badgeAriaLabel: {
375
+ classPropertyName: "badgeAriaLabel",
376
+ publicName: "badgeAriaLabel",
377
+ isSignal: true,
378
+ isRequired: false,
379
+ transformFunction: null
367
380
  }
368
381
  },
369
382
  outputs: {
@@ -383,7 +396,7 @@ var SidenavComponent = class SidenavComponent {
383
396
  }
384
397
  },
385
398
  ngImport: i0,
386
- template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n @if (isOpen()) {\n <!-- Overlay backdrop -->\n @if (hasOverlay()) {\n <div\n class=\"lc-sidenav__overlay\"\n (click)=\"handleClose()\"\n aria-hidden=\"true\">\n </div>\n }\n\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template.\n The <aside> is a plain complementary region; the navigation landmark is\n the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n two navigation landmarks). In drawer mode the panel is a modal dialog:\n focus is captured (close button first, see cdkFocusInitial), trapped\n while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n <aside\n [class]=\"sidenavClasses()\"\n [ngStyle]=\"sidenavStyles()\"\n [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n <!-- Text brand (019): one link to home, never a toggle. Replaces the image logo. -->\n @if (brandName()) {\n <div\n class=\"lc-sidenav__logo lc-sidenav__logo--brand\"\n [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n >\n @if (brandHref()) {\n <!-- Plain link: works without the router and without JavaScript. -->\n <a\n [href]=\"brandHref()\"\n class=\"lc-sidenav__brand\"\n [attr.aria-label]=\"brandAriaLabel() || null\"\n [attr.data-tooltip]=\"brandName()\"\n (click)=\"handleBrandClick()\">\n <ng-container [ngTemplateOutlet]=\"brandContent\" />\n </a>\n } @else {\n <a\n routerLink=\"/\"\n class=\"lc-sidenav__brand\"\n [attr.aria-label]=\"brandAriaLabel() || null\"\n [attr.data-tooltip]=\"brandName()\"\n (click)=\"handleBrandClick()\">\n <ng-container [ngTemplateOutlet]=\"brandContent\" />\n </a>\n }\n </div>\n } @else if (showLogo()) {\n <!-- Logo area (sidebar-first layout) -->\n <div\n class=\"lc-sidenav__logo\"\n [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n >\n <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n <lc-logo\n [variant]=\"collapsed() ? 'emblem' : 'full'\"\n [size]=\"collapsed() ? 'sm' : logoSize()\"\n [clickable]=\"false\"\n [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n [src]=\"logoSrc()\"\n [emblemSrc]=\"logoEmblemSrc()\"\n [darkSrc]=\"logoDarkSrc()\"\n [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n [alt]=\"logoAlt() || 'Logo'\"\n />\n </button>\n @if (!collapsed() && effectiveMode() === 'docked') {\n <button\n type=\"button\"\n class=\"lc-sidenav__logo-toggle\"\n (click)=\"toggleCollapsed()\"\n [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n [attr.title]=\"collapseTitle()\">\n <lc-icon\n [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n size=\"sm\"\n [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n\n <!-- Close button (drawer mode only) -->\n @if (effectiveMode() === 'drawer') {\n <button\n type=\"button\"\n class=\"lc-sidenav__close\"\n cdkFocusInitial\n (click)=\"handleClose()\"\n [attr.aria-label]=\"closeAriaLabel()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <!-- Navigation items (if provided) -->\n @if (items().length > 0) {\n <nav\n class=\"lc-sidenav__nav\"\n [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n [attr.aria-label]=\"ariaLabel()\">\n @for (item of sortedItems(); track item.id) {\n <!-- Section headline -->\n @if (item.isSection) {\n <div class=\"lc-sidenav__section\">\n <div class=\"lc-sidenav__section-header\">\n <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (item.children?.length) {\n <ul class=\"lc-sidenav__section-items\">\n @for (child of item.children; track child.id) {\n <li>\n @if (child.children?.length) {\n <!-- Section child with nested children (collapsible) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n (click)=\"toggleExpanded(child)\"\n [attr.aria-expanded]=\"isExpanded(child)\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(child)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (grandchild of child.children; track grandchild.id) {\n <a\n [routerLink]=\"grandchild.route\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(grandchild)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(grandchild)\"\n [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n @if (grandchild.icon) {\n <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n @if (grandchild.badge) {\n <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Section child (simple link) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"child.route\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n </a>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n } @else if (item.children?.length) {\n <!-- Parent item with children (collapsible group) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n (click)=\"toggleExpanded(item)\"\n [attr.aria-expanded]=\"isExpanded(item)\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(item)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (child of item.children; track child.id) {\n <a\n [routerLink]=\"child.route\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Simple item without children -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"item.route\"\n class=\"lc-sidenav__nav-item\"\n (click)=\"handleItemClick(item)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(item)\"\n [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n }\n </a>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n }\n </nav>\n }\n\n <!-- Content projection (for custom content) -->\n <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"effectiveMode() === 'docked'\">\n <ng-content></ng-content>\n </div>\n\n <!-- Collapse button at the bottom of the rail (019, docked only): on the icon column in both states. -->\n @if (showCollapseToggle() && effectiveMode() === 'docked') {\n <div class=\"lc-sidenav__collapse-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__collapse-toggle\"\n (click)=\"toggleCollapsed()\"\n [attr.aria-label]=\"collapseToggleLabel()\">\n <lc-icon\n [name]=\"collapseToggleIcon()\"\n size=\"sm\"\n [decorative]=\"true\" />\n </button>\n </div>\n }\n </aside>\n</ng-template>\n\n<!-- The brand link's content: the tile (decorative) and the name. -->\n<ng-template #brandContent>\n <span class=\"lc-sidenav__brand-tile\" aria-hidden=\"true\">\n @if (brandIcon()) {\n <lc-icon [name]=\"brandIcon()\" size=\"sm\" [decorative]=\"true\" />\n } @else {\n {{ brandInitial() }}\n }\n </span>\n <span class=\"lc-sidenav__brand-name\" [class.lc-sidenav__sr-only]=\"isRail()\">{{ brandName() }}</span>\n</ng-template>\n",
399
+ template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n @if (isOpen()) {\n <!-- Overlay backdrop -->\n @if (hasOverlay()) {\n <div\n class=\"lc-sidenav__overlay\"\n (click)=\"handleClose()\"\n aria-hidden=\"true\">\n </div>\n }\n\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template.\n The <aside> is a plain complementary region; the navigation landmark is\n the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n two navigation landmarks). In drawer mode the panel is a modal dialog:\n focus is captured (close button first, see cdkFocusInitial), trapped\n while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n <aside\n [class]=\"sidenavClasses()\"\n [ngStyle]=\"sidenavStyles()\"\n [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n <!-- Text brand (019): one link to home, never a toggle. Replaces the image logo. -->\n @if (brandName()) {\n <div\n class=\"lc-sidenav__logo lc-sidenav__logo--brand\"\n [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n >\n @if (brandHref()) {\n <!-- Plain link: works without the router and without JavaScript. -->\n <a\n [href]=\"brandHref()\"\n class=\"lc-sidenav__brand\"\n [attr.aria-label]=\"brandAriaLabel() || null\"\n [attr.data-tooltip]=\"brandName()\"\n (click)=\"handleBrandClick()\">\n <ng-container [ngTemplateOutlet]=\"brandContent\" />\n </a>\n } @else {\n <a\n routerLink=\"/\"\n class=\"lc-sidenav__brand\"\n [attr.aria-label]=\"brandAriaLabel() || null\"\n [attr.data-tooltip]=\"brandName()\"\n (click)=\"handleBrandClick()\">\n <ng-container [ngTemplateOutlet]=\"brandContent\" />\n </a>\n }\n </div>\n } @else if (showLogo()) {\n <!-- Logo area (sidebar-first layout) -->\n <div\n class=\"lc-sidenav__logo\"\n [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n >\n <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n <lc-logo\n [variant]=\"collapsed() ? 'emblem' : 'full'\"\n [size]=\"collapsed() ? 'sm' : logoSize()\"\n [clickable]=\"false\"\n [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n [src]=\"logoSrc()\"\n [emblemSrc]=\"logoEmblemSrc()\"\n [darkSrc]=\"logoDarkSrc()\"\n [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n [alt]=\"logoAlt() || 'Logo'\"\n />\n </button>\n @if (!collapsed() && effectiveMode() === 'docked') {\n <button\n type=\"button\"\n class=\"lc-sidenav__logo-toggle\"\n (click)=\"toggleCollapsed()\"\n [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n [attr.title]=\"collapseTitle()\">\n <lc-icon\n [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n size=\"sm\"\n [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n\n <!-- Close button (drawer mode only) -->\n @if (effectiveMode() === 'drawer') {\n <button\n type=\"button\"\n class=\"lc-sidenav__close\"\n cdkFocusInitial\n (click)=\"handleClose()\"\n [attr.aria-label]=\"closeAriaLabel()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <!-- Navigation items (if provided) -->\n @if (items().length > 0) {\n <nav\n class=\"lc-sidenav__nav\"\n [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n [attr.aria-label]=\"ariaLabel()\">\n @for (item of sortedItems(); track item.id) {\n <!-- Section headline -->\n @if (item.isSection) {\n <div class=\"lc-sidenav__section\">\n <div class=\"lc-sidenav__section-header\">\n <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (item.children?.length) {\n <ul class=\"lc-sidenav__section-items\">\n @for (child of item.children; track child.id) {\n <li>\n @if (child.children?.length) {\n <!-- Section child with nested children (collapsible) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n (click)=\"toggleExpanded(child)\"\n [attr.aria-expanded]=\"isExpanded(child)\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge aria-hidden=\"true\" [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(child) }}</span>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(child)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (grandchild of child.children; track grandchild.id) {\n <a\n [routerLink]=\"grandchild.route\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(grandchild)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(grandchild)\"\n [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n @if (grandchild.icon) {\n <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n @if (grandchild.badge) {\n <lc-badge aria-hidden=\"true\" [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(grandchild) }}</span>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Section child (simple link) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"child.route\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge aria-hidden=\"true\" [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(child) }}</span>\n }\n </a>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n } @else if (item.children?.length) {\n <!-- Parent item with children (collapsible group) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n (click)=\"toggleExpanded(item)\"\n [attr.aria-expanded]=\"isExpanded(item)\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge aria-hidden=\"true\" [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(item) }}</span>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(item)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (child of item.children; track child.id) {\n <a\n [routerLink]=\"child.route\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge aria-hidden=\"true\" [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(child) }}</span>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Simple item without children -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"item.route\"\n class=\"lc-sidenav__nav-item\"\n (click)=\"handleItemClick(item)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(item)\"\n [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge aria-hidden=\"true\" [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(item) }}</span>\n }\n </a>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n }\n </nav>\n }\n\n <!-- Content projection (for custom content) -->\n <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"effectiveMode() === 'docked'\">\n <ng-content></ng-content>\n </div>\n\n <!-- Collapse button at the bottom of the rail (019, docked only): on the icon column in both states. -->\n @if (showCollapseToggle() && effectiveMode() === 'docked') {\n <div class=\"lc-sidenav__collapse-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__collapse-toggle\"\n (click)=\"toggleCollapsed()\"\n [attr.aria-label]=\"collapseToggleLabel()\">\n <lc-icon\n [name]=\"collapseToggleIcon()\"\n size=\"sm\"\n [decorative]=\"true\" />\n </button>\n </div>\n }\n </aside>\n</ng-template>\n\n<!-- The brand link's content: the tile (decorative) and the name. -->\n<ng-template #brandContent>\n <span class=\"lc-sidenav__brand-tile\" aria-hidden=\"true\">\n @if (brandIcon()) {\n <lc-icon [name]=\"brandIcon()\" size=\"sm\" [decorative]=\"true\" />\n } @else {\n {{ brandInitial() }}\n }\n </span>\n <span class=\"lc-sidenav__brand-name\" [class.lc-sidenav__sr-only]=\"isRail()\">{{ brandName() }}</span>\n</ng-template>\n",
387
400
  styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}:host{--_lc-sidenav-t-bg: var(--color-sidebar, var(--color-surface));--_lc-sidenav-t-fg: var(--color-text-secondary);--_lc-sidenav-t-fg-active: var(--color-text-primary);--_lc-sidenav-t-border: var(--color-border);--_lc-sidenav-t-hover-bg: var(--color-surface-hover);--_lc-sidenav-t-section-fg: var(--color-text-tertiary);--_lc-sidenav-t-active-bg: var(--color-surface-selected);--_lc-sidenav-t-active-fg: var(--color-on-surface-selected, var(--color-link));--_lc-sidenav-t-active-icon: var(--color-on-surface-selected, var(--color-link));--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg, var(--_lc-sidenav-t-bg));box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, var(--_lc-sidenav-t-border, #e5e7eb));transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:var(--lc-sidenav-rail-width, 56px)!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem var(--lc-sidenav-nav-padding-x);gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item-row .lc-sidenav__action-btn{display:none}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem var(--lc-sidenav-item-padding-x);gap:0;border-radius:var(--border-radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after,.lc-sidenav--collapsed .lc-sidenav__nav-item:focus-visible:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--elevation-2, 0 4px 6px -1px rgba(0, 0, 0, .1));font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-badge{position:absolute;top:4px;right:4px;display:flex;margin-left:0;border-radius:var(--border-radius-full, 9999px);background-color:var(--lc-sidenav-badge-ring, var(--lc-sidenav-bg, var(--_lc-sidenav-t-bg)));box-shadow:0 0 0 2px var(--lc-sidenav-badge-ring, var(--lc-sidenav-bg, var(--_lc-sidenav-t-bg)));pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border, var(--_lc-sidenav-t-border));min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__logo-link{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;text-decoration:none;color:var(--lc-sidenav-fg, var(--_lc-sidenav-t-fg));background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:4px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__logo-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border:none;border-radius:var(--border-radius-md, .375rem);background:transparent;color:var(--lc-sidenav-fg, var(--_lc-sidenav-t-fg));opacity:.8;flex-shrink:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}.lc-sidenav__logo-toggle:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-hover-bg));opacity:1}.lc-sidenav__logo-toggle:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500, rgb(59, 130, 246)));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem) var(--lc-sidenav-nav-padding-x);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--lc-sidenav-item-padding-x);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg, var(--_lc-sidenav-t-section-fg));line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--lc-sidenav-item-padding-x);text-decoration:none;color:var(--lc-sidenav-fg, var(--_lc-sidenav-t-fg));border-radius:var(--border-radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-hover-bg));color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-fg-active))}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav__nav-item--active,.lc-sidenav__nav-item[aria-current=page]{background-color:var(--lc-sidenav-active-bg, var(--_lc-sidenav-t-active-bg));color:var(--lc-sidenav-active-fg, var(--_lc-sidenav-t-active-fg));font-weight:600;box-shadow:inset 2px 0 0 var(--lc-sidenav-active-indicator, var(--_lc-sidenav-t-accent, var(--color-primary-500)))}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon,.lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon, var(--_lc-sidenav-t-active-icon))}.lc-sidenav__nav-item--active:hover,.lc-sidenav__nav-item[aria-current=page]:hover{background-color:var(--lc-sidenav-active-bg, var(--_lc-sidenav-t-active-bg));color:var(--lc-sidenav-active-fg, var(--_lc-sidenav-t-active-fg))}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-fg-active));font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-fg-active))}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-badge{flex-shrink:0;margin-left:auto}:host ::ng-deep .lc-sidenav--collapsed .lc-sidenav__nav-badge .lc-badge{min-width:16px;height:16px;padding:0 3px;font-size:10px;font-weight:600;line-height:1;border:0}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--border-radius-sm, .25rem);color:var(--lc-sidenav-section-fg, var(--_lc-sidenav-t-section-fg));cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-hover-bg));color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-fg-active))}.lc-sidenav__action-btn:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px;opacity:1}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-surface-hover)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500, rgb(59, 130, 246)));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}:host(.lc-sidenav-container--light){--_lc-sidenav-t-bg: #ffffff;--_lc-sidenav-t-fg: #374151;--_lc-sidenav-t-fg-active: #111827;--_lc-sidenav-t-border: #e5e7eb;--_lc-sidenav-t-hover-bg: #f3f4f6;--_lc-sidenav-t-section-fg: #6b7280;--_lc-sidenav-t-active-bg: #f0f8fa;--_lc-sidenav-t-active-fg: #144f5b;--_lc-sidenav-t-active-icon: #1a6a79;--_lc-sidenav-t-accent: #208497}:host(.lc-sidenav-container--dark){--_lc-sidenav-t-bg: #070e15;--_lc-sidenav-t-fg: #c4d2d9;--_lc-sidenav-t-fg-active: #f1f6f8;--_lc-sidenav-t-border: rgba(255, 255, 255, .08);--_lc-sidenav-t-hover-bg: rgba(132, 199, 212, .06);--_lc-sidenav-t-section-fg: #93a4ad;--_lc-sidenav-t-active-bg: rgba(32, 132, 151, .12);--_lc-sidenav-t-active-fg: #84c7d4;--_lc-sidenav-t-active-icon: #84c7d4}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;--lc-sidenav-badge-ring: var(--color-background);background-color:transparent;border-right:0}.lc-sidenav--transparent .lc-sidenav__nav,.lc-sidenav--transparent .lc-sidenav__nav--docked{gap:var(--spacing-1, .25rem);padding:var(--lc-sidenav-transparent-padding, 3rem 1.5rem 1.5rem)}.lc-sidenav--transparent .lc-sidenav__section-items,.lc-sidenav--transparent .lc-sidenav__nav-children{gap:var(--spacing-1, .25rem)}.lc-sidenav--transparent .lc-sidenav__nav-item{gap:var(--spacing-3, .75rem);min-height:3rem;padding:0 var(--spacing-4, 1rem);border-radius:var(--border-radius-full, 9999px);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500)}.lc-sidenav--transparent .lc-sidenav__nav-item--active,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page]{box-shadow:none;font-weight:var(--font-weight-semibold, 600)}.lc-sidenav--transparent .lc-sidenav__nav-item--active .lc-sidenav__nav-icon ::ng-deep svg,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon ::ng-deep svg{stroke-width:2.2}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}.lc-sidenav__logo--brand{gap:var(--spacing-1, .25rem);padding-inline:var(--spacing-2, .5rem)}.lc-sidenav__brand{display:flex;align-items:center;gap:var(--spacing-3, .75rem);flex:1 1 auto;min-width:0;min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--spacing-1-5, .375rem) var(--spacing-2, .5rem) var(--spacing-1-5, .375rem) var(--spacing-1, .25rem);border-radius:var(--border-radius-md, .75rem);color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-fg-active));text-decoration:none;transition:background-color .2s ease}.lc-sidenav__brand:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-hover-bg))}.lc-sidenav__brand:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav__brand-tile{display:grid;place-items:center;flex:none;width:32px;height:32px;box-sizing:border-box;border-radius:var(--border-radius-sm, .625rem);background-color:var(--lc-sidenav-brand-tile-bg, var(--color-primary-fill));color:var(--lc-sidenav-brand-tile-fg, var(--color-on-primary));font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-bold, 700);line-height:1}.lc-sidenav__brand-name{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;hyphens:auto;font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25)}.lc-sidenav__collapse-row{display:flex;flex-shrink:0;margin-top:auto;border-top:1px solid var(--lc-sidenav-border, var(--_lc-sidenav-t-border));padding:var(--spacing-2, .5rem) calc(var(--lc-sidenav-nav-padding-x) - 2px)}.lc-sidenav__collapse-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--size-min-touch-width, 2.75rem);height:var(--size-min-touch-height, 2.75rem);padding:0;border:none;border-radius:var(--border-radius-md, .75rem);background:transparent;color:var(--lc-sidenav-fg, var(--_lc-sidenav-t-fg));cursor:pointer;transition:background-color .2s ease,color .2s ease}.lc-sidenav__collapse-toggle:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-hover-bg))}.lc-sidenav__collapse-toggle:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav--transparent .lc-sidenav__logo--brand{padding-inline:var(--spacing-6, 1.5rem) var(--spacing-4, 1rem)}.lc-sidenav--transparent .lc-sidenav__brand{padding:var(--spacing-1-5, .375rem) var(--spacing-2, .5rem) var(--spacing-1-5, .375rem) var(--spacing-2-5, .625rem)}.lc-sidenav--transparent .lc-sidenav__collapse-row{padding:var(--spacing-2, .5rem) var(--spacing-7, 1.75rem)}.lc-sidenav--collapsed .lc-sidenav__logo--brand{padding:0}.lc-sidenav--collapsed .lc-sidenav__brand{position:relative;flex:none;padding:var(--spacing-1-5, .375rem)}.lc-sidenav--collapsed .lc-sidenav__brand:hover:after,.lc-sidenav--collapsed .lc-sidenav__brand:focus-visible:after{content:attr(data-tooltip);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--elevation-2, 0 4px 6px -1px rgba(0, 0, 0, .1));font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__collapse-row{padding:var(--spacing-2, .5rem) 0;justify-content:center}.lc-sidenav--drawer .lc-sidenav__logo--brand{padding-inline-end:58px}.lc-sidenav--drawer .lc-sidenav__logo--brand~.lc-sidenav__close{top:10px;right:10px;width:var(--size-min-touch-width, 2.75rem);height:var(--size-min-touch-height, 2.75rem)}.lc-sidenav--drawer .lc-sidenav__logo--brand~.lc-sidenav__nav{padding-top:var(--spacing-4, 1rem)}.lc-sidenav__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(forced-colors:active){.lc-sidenav__brand-tile{border:1px solid CanvasText;color:CanvasText}.lc-sidenav__nav-item--active:not(:focus-visible),.lc-sidenav__nav-item[aria-current=page]:not(:focus-visible){outline:1px solid Highlight}}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"],
388
401
  dependencies: [
389
402
  {
@@ -519,7 +532,7 @@ i0.ɵɵngDeclareClassMetadata({
519
532
  "[class.lc-sidenav-container--light]": "theme() === 'light'",
520
533
  "[class.lc-sidenav-container--dark]": "theme() === 'dark'"
521
534
  },
522
- template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n @if (isOpen()) {\n <!-- Overlay backdrop -->\n @if (hasOverlay()) {\n <div\n class=\"lc-sidenav__overlay\"\n (click)=\"handleClose()\"\n aria-hidden=\"true\">\n </div>\n }\n\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template.\n The <aside> is a plain complementary region; the navigation landmark is\n the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n two navigation landmarks). In drawer mode the panel is a modal dialog:\n focus is captured (close button first, see cdkFocusInitial), trapped\n while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n <aside\n [class]=\"sidenavClasses()\"\n [ngStyle]=\"sidenavStyles()\"\n [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n <!-- Text brand (019): one link to home, never a toggle. Replaces the image logo. -->\n @if (brandName()) {\n <div\n class=\"lc-sidenav__logo lc-sidenav__logo--brand\"\n [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n >\n @if (brandHref()) {\n <!-- Plain link: works without the router and without JavaScript. -->\n <a\n [href]=\"brandHref()\"\n class=\"lc-sidenav__brand\"\n [attr.aria-label]=\"brandAriaLabel() || null\"\n [attr.data-tooltip]=\"brandName()\"\n (click)=\"handleBrandClick()\">\n <ng-container [ngTemplateOutlet]=\"brandContent\" />\n </a>\n } @else {\n <a\n routerLink=\"/\"\n class=\"lc-sidenav__brand\"\n [attr.aria-label]=\"brandAriaLabel() || null\"\n [attr.data-tooltip]=\"brandName()\"\n (click)=\"handleBrandClick()\">\n <ng-container [ngTemplateOutlet]=\"brandContent\" />\n </a>\n }\n </div>\n } @else if (showLogo()) {\n <!-- Logo area (sidebar-first layout) -->\n <div\n class=\"lc-sidenav__logo\"\n [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n >\n <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n <lc-logo\n [variant]=\"collapsed() ? 'emblem' : 'full'\"\n [size]=\"collapsed() ? 'sm' : logoSize()\"\n [clickable]=\"false\"\n [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n [src]=\"logoSrc()\"\n [emblemSrc]=\"logoEmblemSrc()\"\n [darkSrc]=\"logoDarkSrc()\"\n [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n [alt]=\"logoAlt() || 'Logo'\"\n />\n </button>\n @if (!collapsed() && effectiveMode() === 'docked') {\n <button\n type=\"button\"\n class=\"lc-sidenav__logo-toggle\"\n (click)=\"toggleCollapsed()\"\n [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n [attr.title]=\"collapseTitle()\">\n <lc-icon\n [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n size=\"sm\"\n [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n\n <!-- Close button (drawer mode only) -->\n @if (effectiveMode() === 'drawer') {\n <button\n type=\"button\"\n class=\"lc-sidenav__close\"\n cdkFocusInitial\n (click)=\"handleClose()\"\n [attr.aria-label]=\"closeAriaLabel()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <!-- Navigation items (if provided) -->\n @if (items().length > 0) {\n <nav\n class=\"lc-sidenav__nav\"\n [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n [attr.aria-label]=\"ariaLabel()\">\n @for (item of sortedItems(); track item.id) {\n <!-- Section headline -->\n @if (item.isSection) {\n <div class=\"lc-sidenav__section\">\n <div class=\"lc-sidenav__section-header\">\n <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (item.children?.length) {\n <ul class=\"lc-sidenav__section-items\">\n @for (child of item.children; track child.id) {\n <li>\n @if (child.children?.length) {\n <!-- Section child with nested children (collapsible) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n (click)=\"toggleExpanded(child)\"\n [attr.aria-expanded]=\"isExpanded(child)\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(child)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (grandchild of child.children; track grandchild.id) {\n <a\n [routerLink]=\"grandchild.route\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(grandchild)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(grandchild)\"\n [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n @if (grandchild.icon) {\n <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n @if (grandchild.badge) {\n <lc-badge [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Section child (simple link) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"child.route\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n </a>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n } @else if (item.children?.length) {\n <!-- Parent item with children (collapsible group) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n (click)=\"toggleExpanded(item)\"\n [attr.aria-expanded]=\"isExpanded(item)\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(item)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (child of item.children; track child.id) {\n <a\n [routerLink]=\"child.route\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Simple item without children -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"item.route\"\n class=\"lc-sidenav__nav-item\"\n (click)=\"handleItemClick(item)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(item)\"\n [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>\n }\n </a>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n }\n </nav>\n }\n\n <!-- Content projection (for custom content) -->\n <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"effectiveMode() === 'docked'\">\n <ng-content></ng-content>\n </div>\n\n <!-- Collapse button at the bottom of the rail (019, docked only): on the icon column in both states. -->\n @if (showCollapseToggle() && effectiveMode() === 'docked') {\n <div class=\"lc-sidenav__collapse-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__collapse-toggle\"\n (click)=\"toggleCollapsed()\"\n [attr.aria-label]=\"collapseToggleLabel()\">\n <lc-icon\n [name]=\"collapseToggleIcon()\"\n size=\"sm\"\n [decorative]=\"true\" />\n </button>\n </div>\n }\n </aside>\n</ng-template>\n\n<!-- The brand link's content: the tile (decorative) and the name. -->\n<ng-template #brandContent>\n <span class=\"lc-sidenav__brand-tile\" aria-hidden=\"true\">\n @if (brandIcon()) {\n <lc-icon [name]=\"brandIcon()\" size=\"sm\" [decorative]=\"true\" />\n } @else {\n {{ brandInitial() }}\n }\n </span>\n <span class=\"lc-sidenav__brand-name\" [class.lc-sidenav__sr-only]=\"isRail()\">{{ brandName() }}</span>\n</ng-template>\n",
535
+ template: "<!-- Drawer mode: render with overlay and conditional visibility -->\n@if (effectiveMode() === 'drawer') {\n @if (isOpen()) {\n <!-- Overlay backdrop -->\n @if (hasOverlay()) {\n <div\n class=\"lc-sidenav__overlay\"\n (click)=\"handleClose()\"\n aria-hidden=\"true\">\n </div>\n }\n\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n }\n}\n\n<!-- Docked mode: always render, visibility controlled by CSS -->\n@if (effectiveMode() === 'docked') {\n <ng-container *ngTemplateOutlet=\"sidenavPanel\" />\n}\n\n<!-- Shared sidenav panel template.\n The <aside> is a plain complementary region; the navigation landmark is\n the inner <nav> (nesting a role=\"navigation\" wrapper around a <nav> gave\n two navigation landmarks). In drawer mode the panel is a modal dialog:\n focus is captured (close button first, see cdkFocusInitial), trapped\n while open and restored to the opener when the panel is destroyed. -->\n<ng-template #sidenavPanel>\n <aside\n [class]=\"sidenavClasses()\"\n [ngStyle]=\"sidenavStyles()\"\n [attr.role]=\"effectiveMode() === 'drawer' ? 'dialog' : null\"\n [attr.aria-modal]=\"effectiveMode() === 'drawer' ? 'true' : null\"\n [attr.aria-label]=\"effectiveMode() === 'drawer' ? ariaLabel() : null\"\n [cdkTrapFocus]=\"effectiveMode() === 'drawer'\"\n [cdkTrapFocusAutoCapture]=\"effectiveMode() === 'drawer'\">\n\n <!-- Text brand (019): one link to home, never a toggle. Replaces the image logo. -->\n @if (brandName()) {\n <div\n class=\"lc-sidenav__logo lc-sidenav__logo--brand\"\n [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n >\n @if (brandHref()) {\n <!-- Plain link: works without the router and without JavaScript. -->\n <a\n [href]=\"brandHref()\"\n class=\"lc-sidenav__brand\"\n [attr.aria-label]=\"brandAriaLabel() || null\"\n [attr.data-tooltip]=\"brandName()\"\n (click)=\"handleBrandClick()\">\n <ng-container [ngTemplateOutlet]=\"brandContent\" />\n </a>\n } @else {\n <a\n routerLink=\"/\"\n class=\"lc-sidenav__brand\"\n [attr.aria-label]=\"brandAriaLabel() || null\"\n [attr.data-tooltip]=\"brandName()\"\n (click)=\"handleBrandClick()\">\n <ng-container [ngTemplateOutlet]=\"brandContent\" />\n </a>\n }\n </div>\n } @else if (showLogo()) {\n <!-- Logo area (sidebar-first layout) -->\n <div\n class=\"lc-sidenav__logo\"\n [class.lc-sidenav__logo--size-xs]=\"logoSize() === 'xs'\"\n [class.lc-sidenav__logo--size-sm]=\"logoSize() === 'sm'\"\n [class.lc-sidenav__logo--size-md]=\"logoSize() === 'md'\"\n [class.lc-sidenav__logo--size-lg]=\"logoSize() === 'lg'\"\n [class.lc-sidenav__logo--size-xl]=\"logoSize() === 'xl'\"\n >\n <button type=\"button\" class=\"lc-sidenav__logo-link\" [attr.aria-label]=\"toggleAriaLabel()\" (click)=\"toggleCollapsed()\">\n <lc-logo\n [variant]=\"collapsed() ? 'emblem' : 'full'\"\n [size]=\"collapsed() ? 'sm' : logoSize()\"\n [clickable]=\"false\"\n [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n [src]=\"logoSrc()\"\n [emblemSrc]=\"logoEmblemSrc()\"\n [darkSrc]=\"logoDarkSrc()\"\n [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n [alt]=\"logoAlt() || 'Logo'\"\n />\n </button>\n @if (!collapsed() && effectiveMode() === 'docked') {\n <button\n type=\"button\"\n class=\"lc-sidenav__logo-toggle\"\n (click)=\"toggleCollapsed()\"\n [attr.aria-label]=\"collapseAriaLabel() || (position() === 'right' ? 'Collapse navigation to the right' : 'Collapse navigation to the left')\"\n [attr.title]=\"collapseTitle()\">\n <lc-icon\n [name]=\"position() === 'right' ? 'chevron-right' : 'chevron-left'\"\n size=\"sm\"\n [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n\n <!-- Close button (drawer mode only) -->\n @if (effectiveMode() === 'drawer') {\n <button\n type=\"button\"\n class=\"lc-sidenav__close\"\n cdkFocusInitial\n (click)=\"handleClose()\"\n [attr.aria-label]=\"closeAriaLabel()\">\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n aria-hidden=\"true\">\n <line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"></line>\n <line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"></line>\n </svg>\n </button>\n }\n\n <!-- Navigation items (if provided) -->\n @if (items().length > 0) {\n <nav\n class=\"lc-sidenav__nav\"\n [class.lc-sidenav__nav--docked]=\"effectiveMode() === 'docked'\"\n [attr.aria-label]=\"ariaLabel()\">\n @for (item of sortedItems(); track item.id) {\n <!-- Section headline -->\n @if (item.isSection) {\n <div class=\"lc-sidenav__section\">\n <div class=\"lc-sidenav__section-header\">\n <h2 class=\"lc-sidenav__section-title\">{{ item.label }}</h2>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (item.children?.length) {\n <ul class=\"lc-sidenav__section-items\">\n @for (child of item.children; track child.id) {\n <li>\n @if (child.children?.length) {\n <!-- Section child with nested children (collapsible) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(child)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(child)\"\n (click)=\"toggleExpanded(child)\"\n [attr.aria-expanded]=\"isExpanded(child)\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge aria-hidden=\"true\" [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(child) }}</span>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(child)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (grandchild of child.children; track grandchild.id) {\n <a\n [routerLink]=\"grandchild.route\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(grandchild)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(grandchild)\"\n [attr.aria-current]=\"isItemActive(grandchild) ? 'page' : null\">\n @if (grandchild.icon) {\n <lc-icon [name]=\"grandchild.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ grandchild.label }}</span>\n @if (grandchild.badge) {\n <lc-badge aria-hidden=\"true\" [variant]=\"grandchild.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ grandchild.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(grandchild) }}</span>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Section child (simple link) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"child.route\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\"\n [title]=\"collapsed() ? child.label : ''\">\n @if (child.icon) {\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n }\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge aria-hidden=\"true\" [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(child) }}</span>\n }\n </a>\n @if (child.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"child.action.ariaLabel || child.label + ' action'\"\n (click)=\"handleItemAction($event, child)\">\n <lc-icon [name]=\"child.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n </li>\n }\n </ul>\n }\n </div>\n } @else if (item.children?.length) {\n <!-- Parent item with children (collapsible group) -->\n <div class=\"lc-sidenav__nav-item-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--parent\"\n [class.lc-sidenav__nav-item--expanded]=\"isExpanded(item)\"\n [class.lc-sidenav__nav-item--has-active-child]=\"hasActiveChild(item)\"\n (click)=\"toggleExpanded(item)\"\n [attr.aria-expanded]=\"isExpanded(item)\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge aria-hidden=\"true\" [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(item) }}</span>\n }\n <lc-icon name=\"chevron-down\" size=\"xs\" [decorative]=\"true\" class=\"lc-sidenav__nav-chevron\" />\n </button>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n @if (isExpanded(item)) {\n <div class=\"lc-sidenav__nav-children\">\n @for (child of item.children; track child.id) {\n <a\n [routerLink]=\"child.route\"\n class=\"lc-sidenav__nav-item lc-sidenav__nav-item--child\"\n (click)=\"handleItemClick(child)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(child)\"\n [attr.aria-current]=\"isItemActive(child) ? 'page' : null\">\n <lc-icon [name]=\"child.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ child.label }}</span>\n @if (child.badge) {\n <lc-badge aria-hidden=\"true\" [variant]=\"child.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ child.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(child) }}</span>\n }\n </a>\n }\n </div>\n }\n } @else {\n <!-- Simple item without children -->\n <div class=\"lc-sidenav__nav-item-row\">\n <a\n [routerLink]=\"item.route\"\n class=\"lc-sidenav__nav-item\"\n (click)=\"handleItemClick(item)\"\n [class.lc-sidenav__nav-item--active]=\"isItemActive(item)\"\n [attr.aria-current]=\"isItemActive(item) ? 'page' : null\"\n [title]=\"collapsed() ? item.label : ''\">\n <lc-icon [name]=\"item.icon\" size=\"sm\" [decorative]=\"true\" class=\"lc-sidenav__nav-icon\" />\n <span class=\"lc-sidenav__nav-label\">{{ item.label }}</span>\n @if (item.badge) {\n <lc-badge aria-hidden=\"true\" [variant]=\"item.badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\" class=\"lc-sidenav__nav-badge\">{{ item.badge.value }}</lc-badge>&ngsp;<span class=\"lc-sidenav__sr-only\">{{ badgeText(item) }}</span>\n }\n </a>\n @if (item.action) {\n <button\n type=\"button\"\n class=\"lc-sidenav__action-btn\"\n [attr.aria-label]=\"item.action.ariaLabel || item.label + ' action'\"\n (click)=\"handleItemAction($event, item)\">\n <lc-icon [name]=\"item.action.icon\" size=\"xs\" [decorative]=\"true\" />\n </button>\n }\n </div>\n }\n }\n </nav>\n }\n\n <!-- Content projection (for custom content) -->\n <div class=\"lc-sidenav__content\" [class.lc-sidenav__content--docked]=\"effectiveMode() === 'docked'\">\n <ng-content></ng-content>\n </div>\n\n <!-- Collapse button at the bottom of the rail (019, docked only): on the icon column in both states. -->\n @if (showCollapseToggle() && effectiveMode() === 'docked') {\n <div class=\"lc-sidenav__collapse-row\">\n <button\n type=\"button\"\n class=\"lc-sidenav__collapse-toggle\"\n (click)=\"toggleCollapsed()\"\n [attr.aria-label]=\"collapseToggleLabel()\">\n <lc-icon\n [name]=\"collapseToggleIcon()\"\n size=\"sm\"\n [decorative]=\"true\" />\n </button>\n </div>\n }\n </aside>\n</ng-template>\n\n<!-- The brand link's content: the tile (decorative) and the name. -->\n<ng-template #brandContent>\n <span class=\"lc-sidenav__brand-tile\" aria-hidden=\"true\">\n @if (brandIcon()) {\n <lc-icon [name]=\"brandIcon()\" size=\"sm\" [decorative]=\"true\" />\n } @else {\n {{ brandInitial() }}\n }\n </span>\n <span class=\"lc-sidenav__brand-name\" [class.lc-sidenav__sr-only]=\"isRail()\">{{ brandName() }}</span>\n</ng-template>\n",
523
536
  styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}.lc-sidenav__overlay{position:fixed;inset:0;background-color:#00000080;opacity:0;animation:fadeIn .3s ease-out forwards;z-index:1000;cursor:pointer}@media(prefers-reduced-motion:reduce){.lc-sidenav__overlay{animation:none;opacity:1}}:host{--_lc-sidenav-t-bg: var(--color-sidebar, var(--color-surface));--_lc-sidenav-t-fg: var(--color-text-secondary);--_lc-sidenav-t-fg-active: var(--color-text-primary);--_lc-sidenav-t-border: var(--color-border);--_lc-sidenav-t-hover-bg: var(--color-surface-hover);--_lc-sidenav-t-section-fg: var(--color-text-tertiary);--_lc-sidenav-t-active-bg: var(--color-surface-selected);--_lc-sidenav-t-active-fg: var(--color-on-surface-selected, var(--color-link));--_lc-sidenav-t-active-icon: var(--color-on-surface-selected, var(--color-link));--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{position:fixed;top:0;bottom:0;background-color:var(--lc-sidenav-bg, var(--_lc-sidenav-t-bg));box-shadow:var(--elevation-3, 0 10px 15px -3px rgba(0, 0, 0, .1));z-index:1001;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--left{left:0}.lc-sidenav--right{right:0}.lc-sidenav--drawer.lc-sidenav--left{animation:slideInLeft .3s ease-out}.lc-sidenav--drawer.lc-sidenav--right{animation:slideInRight .3s ease-out}@media(prefers-reduced-motion:reduce){.lc-sidenav--drawer{animation:none!important}}.lc-sidenav--docked{position:static;z-index:auto;height:100%;box-shadow:none;border-right:1px solid var(--lc-sidenav-border, var(--_lc-sidenav-t-border, #e5e7eb));transform:translate(0);transition:width .3s ease,transform .3s ease}.lc-sidenav--docked:not(.lc-sidenav--open){width:0!important;overflow:hidden;border-right:none}.lc-sidenav--collapsed{width:var(--lc-sidenav-rail-width, 56px)!important;overflow:visible}.lc-sidenav--collapsed .lc-sidenav__nav-label,.lc-sidenav--collapsed .lc-sidenav__nav-chevron,.lc-sidenav--collapsed .lc-sidenav__section-title,.lc-sidenav--collapsed .lc-sidenav__action-btn,.lc-sidenav--collapsed .lc-sidenav__section-header{display:none}.lc-sidenav--collapsed .lc-sidenav__nav{padding:.5rem var(--lc-sidenav-nav-padding-x);gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__nav-item-row .lc-sidenav__action-btn{display:none}.lc-sidenav--collapsed .lc-sidenav__nav-item{justify-content:center;padding:.625rem var(--lc-sidenav-item-padding-x);gap:0;border-radius:var(--border-radius-md, .375rem);position:relative}.lc-sidenav--collapsed .lc-sidenav__nav-item:hover:after,.lc-sidenav--collapsed .lc-sidenav__nav-item:focus-visible:after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--elevation-2, 0 4px 6px -1px rgba(0, 0, 0, .1));font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-icon{width:22px;height:22px}.lc-sidenav--collapsed .lc-sidenav__nav-badge{position:absolute;top:4px;right:4px;display:flex;margin-left:0;border-radius:var(--border-radius-full, 9999px);background-color:var(--lc-sidenav-badge-ring, var(--lc-sidenav-bg, var(--_lc-sidenav-t-bg)));box-shadow:0 0 0 2px var(--lc-sidenav-badge-ring, var(--lc-sidenav-bg, var(--_lc-sidenav-t-bg)));pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__nav-children{display:none}.lc-sidenav--collapsed .lc-sidenav__section-items{display:flex;flex-direction:column;gap:.125rem}.lc-sidenav--collapsed .lc-sidenav__section{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--color-divider, #e5e7eb)}.lc-sidenav--collapsed .lc-sidenav__content{display:none}.lc-sidenav--collapsed .lc-sidenav__logo{padding:0;justify-content:center}.lc-sidenav__logo{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-3);padding:0 var(--spacing-4);border-bottom:1px solid var(--lc-sidenav-border, var(--_lc-sidenav-t-border));min-height:64px;flex-shrink:0}.lc-sidenav__logo--size-xs,.lc-sidenav__logo--size-sm{min-height:56px}.lc-sidenav__logo--size-md{min-height:64px}.lc-sidenav__logo--size-lg{min-height:80px}.lc-sidenav__logo--size-xl{min-height:112px}.lc-sidenav__logo-link{display:flex;align-items:center;flex:0 1 auto;min-width:0;max-width:100%;text-decoration:none;color:var(--lc-sidenav-fg, var(--_lc-sidenav-t-fg));background:transparent;border:none;padding:0;cursor:pointer}.lc-sidenav__logo-link:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:4px;border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__logo-toggle{display:inline-flex;align-items:center;justify-content:center;width:1.875rem;height:1.875rem;border:none;border-radius:var(--border-radius-md, .375rem);background:transparent;color:var(--lc-sidenav-fg, var(--_lc-sidenav-t-fg));opacity:.8;flex-shrink:0;cursor:pointer;transition:background-color .2s ease,color .2s ease,opacity .2s ease}.lc-sidenav__logo-toggle:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-hover-bg));opacity:1}.lc-sidenav__logo-toggle:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav__close{position:absolute;top:1rem;right:1rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;background:none;border:none;border-radius:var(--border-radius-md, .375rem);color:var(--color-text-secondary);cursor:pointer;transition:background-color .2s ease,color .2s ease;z-index:1}.lc-sidenav__close:hover{background-color:var(--color-surface);color:var(--color-text-primary)}.lc-sidenav__close:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500, rgb(59, 130, 246)));outline-offset:2px}.lc-sidenav__close:active{background-color:var(--color-border)}.lc-sidenav__close svg{width:1.25rem;height:1.25rem}.lc-sidenav__nav{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding:var(--lc-density-padding-md, 1rem) var(--lc-sidenav-nav-padding-x);padding-top:4rem}.lc-sidenav__nav--docked{padding-top:var(--lc-density-padding-md, 1rem);gap:0}.lc-sidenav__section:not(:first-child){margin-top:var(--spacing-4, 1rem);padding-top:var(--spacing-3, .75rem)}.lc-sidenav__section-header{display:flex;align-items:center;justify-content:space-between;padding-right:0;margin-bottom:var(--spacing-1, .25rem)}.lc-sidenav__section-title{padding:0 var(--lc-sidenav-item-padding-x);margin-bottom:0;font-size:var(--font-size-xs, .75rem);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--lc-sidenav-section-fg, var(--_lc-sidenav-t-section-fg));line-height:28px}.lc-sidenav__section-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem))}.lc-sidenav__nav-item{display:flex;align-items:center;gap:var(--spacing-3, .75rem);min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2, .5rem)) var(--lc-sidenav-item-padding-x);text-decoration:none;color:var(--lc-sidenav-fg, var(--_lc-sidenav-t-fg));border-radius:var(--border-radius-md, .375rem);transition:background-color .2s ease,color .2s ease;font-size:var(--font-size-sm, .875rem);font-weight:500;cursor:pointer}.lc-sidenav__nav-item:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-hover-bg));color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-fg-active))}.lc-sidenav__nav-item:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav__nav-item--active,.lc-sidenav__nav-item[aria-current=page]{background-color:var(--lc-sidenav-active-bg, var(--_lc-sidenav-t-active-bg));color:var(--lc-sidenav-active-fg, var(--_lc-sidenav-t-active-fg));font-weight:600;box-shadow:inset 2px 0 0 var(--lc-sidenav-active-indicator, var(--_lc-sidenav-t-accent, var(--color-primary-500)))}.lc-sidenav__nav-item--active .lc-sidenav__nav-icon,.lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon{color:var(--lc-sidenav-active-icon, var(--_lc-sidenav-t-active-icon))}.lc-sidenav__nav-item--active:hover,.lc-sidenav__nav-item[aria-current=page]:hover{background-color:var(--lc-sidenav-active-bg, var(--_lc-sidenav-t-active-bg));color:var(--lc-sidenav-active-fg, var(--_lc-sidenav-t-active-fg))}.lc-sidenav__nav-item--has-active-child{color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-fg-active));font-weight:600}.lc-sidenav__nav-item--has-active-child .lc-sidenav__nav-icon{color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-fg-active))}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0;color:currentColor}.lc-sidenav__nav-chevron{width:16px;height:16px;flex-shrink:0;margin-left:auto;transition:transform .2s ease}.lc-sidenav__nav-badge{flex-shrink:0;margin-left:auto}:host ::ng-deep .lc-sidenav--collapsed .lc-sidenav__nav-badge .lc-badge{min-width:16px;height:16px;padding:0 3px;font-size:10px;font-weight:600;line-height:1;border:0}.lc-sidenav__nav-item--expanded .lc-sidenav__nav-chevron{transform:rotate(180deg)}.lc-sidenav__nav-item--parent{width:100%;border:none;background:none;font-family:inherit;text-align:left}.lc-sidenav__nav-children{display:flex;flex-direction:column;gap:var(--lc-density-gap-xs, var(--spacing-1, .25rem));padding-left:var(--spacing-4, 1rem)}.lc-sidenav__nav-item--child{font-size:var(--font-size-sm, .875rem)}.lc-sidenav__nav-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lc-sidenav__nav-item-row{display:flex;align-items:center}.lc-sidenav__nav-item-row .lc-sidenav__nav-item{flex:1;min-width:0}.lc-sidenav__nav-item-row .lc-sidenav__action-btn{opacity:0;transition:opacity .15s ease}.lc-sidenav__nav-item-row:hover .lc-sidenav__action-btn{opacity:1}.lc-sidenav__action-btn{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;padding:0;background:transparent;border:none;border-radius:var(--border-radius-sm, .25rem);color:var(--lc-sidenav-section-fg, var(--_lc-sidenav-t-section-fg));cursor:pointer;transition:background-color .15s ease,color .15s ease}.lc-sidenav__action-btn:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-hover-bg));color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-fg-active))}.lc-sidenav__action-btn:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px;opacity:1}.lc-sidenav__content{flex:1;padding:4rem 1rem 1rem;overflow-y:auto;-webkit-overflow-scrolling:touch}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav__content::-webkit-scrollbar{width:.5rem}.lc-sidenav__content::-webkit-scrollbar-track{background:var(--color-surface);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--border-radius-sm, .25rem)}.lc-sidenav__content::-webkit-scrollbar-thumb:hover{background:var(--color-surface-hover)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:640px){.lc-sidenav--drawer{width:100%!important;max-width:320px}}@media(max-width:480px){.lc-sidenav--drawer{max-width:280px}}.lc-sidenav__content:focus{outline:none}.lc-sidenav__content a:focus-visible,.lc-sidenav__content button:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500, rgb(59, 130, 246)));outline-offset:2px;border-radius:var(--border-radius-sm, .25rem)}:host(.lc-sidenav-container--light){--_lc-sidenav-t-bg: #ffffff;--_lc-sidenav-t-fg: #374151;--_lc-sidenav-t-fg-active: #111827;--_lc-sidenav-t-border: #e5e7eb;--_lc-sidenav-t-hover-bg: #f3f4f6;--_lc-sidenav-t-section-fg: #6b7280;--_lc-sidenav-t-active-bg: #f0f8fa;--_lc-sidenav-t-active-fg: #144f5b;--_lc-sidenav-t-active-icon: #1a6a79;--_lc-sidenav-t-accent: #208497}:host(.lc-sidenav-container--dark){--_lc-sidenav-t-bg: #070e15;--_lc-sidenav-t-fg: #c4d2d9;--_lc-sidenav-t-fg-active: #f1f6f8;--_lc-sidenav-t-border: rgba(255, 255, 255, .08);--_lc-sidenav-t-hover-bg: rgba(132, 199, 212, .06);--_lc-sidenav-t-section-fg: #93a4ad;--_lc-sidenav-t-active-bg: rgba(32, 132, 151, .12);--_lc-sidenav-t-active-fg: #84c7d4;--_lc-sidenav-t-active-icon: #84c7d4}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;--lc-sidenav-badge-ring: var(--color-background);background-color:transparent;border-right:0}.lc-sidenav--transparent .lc-sidenav__nav,.lc-sidenav--transparent .lc-sidenav__nav--docked{gap:var(--spacing-1, .25rem);padding:var(--lc-sidenav-transparent-padding, 3rem 1.5rem 1.5rem)}.lc-sidenav--transparent .lc-sidenav__section-items,.lc-sidenav--transparent .lc-sidenav__nav-children{gap:var(--spacing-1, .25rem)}.lc-sidenav--transparent .lc-sidenav__nav-item{gap:var(--spacing-3, .75rem);min-height:3rem;padding:0 var(--spacing-4, 1rem);border-radius:var(--border-radius-full, 9999px);font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-medium, 500)}.lc-sidenav--transparent .lc-sidenav__nav-item--active,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page]{box-shadow:none;font-weight:var(--font-weight-semibold, 600)}.lc-sidenav--transparent .lc-sidenav__nav-item--active .lc-sidenav__nav-icon ::ng-deep svg,.lc-sidenav--transparent .lc-sidenav__nav-item[aria-current=page] .lc-sidenav__nav-icon ::ng-deep svg{stroke-width:2.2}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}.lc-sidenav__logo--brand{gap:var(--spacing-1, .25rem);padding-inline:var(--spacing-2, .5rem)}.lc-sidenav__brand{display:flex;align-items:center;gap:var(--spacing-3, .75rem);flex:1 1 auto;min-width:0;min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--spacing-1-5, .375rem) var(--spacing-2, .5rem) var(--spacing-1-5, .375rem) var(--spacing-1, .25rem);border-radius:var(--border-radius-md, .75rem);color:var(--lc-sidenav-fg-active, var(--_lc-sidenav-t-fg-active));text-decoration:none;transition:background-color .2s ease}.lc-sidenav__brand:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-hover-bg))}.lc-sidenav__brand:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav__brand-tile{display:grid;place-items:center;flex:none;width:32px;height:32px;box-sizing:border-box;border-radius:var(--border-radius-sm, .625rem);background-color:var(--lc-sidenav-brand-tile-bg, var(--color-primary-fill));color:var(--lc-sidenav-brand-tile-fg, var(--color-on-primary));font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-bold, 700);line-height:1}.lc-sidenav__brand-name{min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;hyphens:auto;font-size:var(--font-size-base, 1rem);font-weight:var(--font-weight-semibold, 600);line-height:var(--line-height-tight, 1.25)}.lc-sidenav__collapse-row{display:flex;flex-shrink:0;margin-top:auto;border-top:1px solid var(--lc-sidenav-border, var(--_lc-sidenav-t-border));padding:var(--spacing-2, .5rem) calc(var(--lc-sidenav-nav-padding-x) - 2px)}.lc-sidenav__collapse-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--size-min-touch-width, 2.75rem);height:var(--size-min-touch-height, 2.75rem);padding:0;border:none;border-radius:var(--border-radius-md, .75rem);background:transparent;color:var(--lc-sidenav-fg, var(--_lc-sidenav-t-fg));cursor:pointer;transition:background-color .2s ease,color .2s ease}.lc-sidenav__collapse-toggle:hover{background-color:var(--lc-sidenav-hover-bg, var(--_lc-sidenav-t-hover-bg))}.lc-sidenav__collapse-toggle:focus-visible{outline:2px solid var(--_lc-sidenav-t-accent, var(--color-primary-500));outline-offset:2px}.lc-sidenav--transparent .lc-sidenav__logo--brand{padding-inline:var(--spacing-6, 1.5rem) var(--spacing-4, 1rem)}.lc-sidenav--transparent .lc-sidenav__brand{padding:var(--spacing-1-5, .375rem) var(--spacing-2, .5rem) var(--spacing-1-5, .375rem) var(--spacing-2-5, .625rem)}.lc-sidenav--transparent .lc-sidenav__collapse-row{padding:var(--spacing-2, .5rem) var(--spacing-7, 1.75rem)}.lc-sidenav--collapsed .lc-sidenav__logo--brand{padding:0}.lc-sidenav--collapsed .lc-sidenav__brand{position:relative;flex:none;padding:var(--spacing-1-5, .375rem)}.lc-sidenav--collapsed .lc-sidenav__brand:hover:after,.lc-sidenav--collapsed .lc-sidenav__brand:focus-visible:after{content:attr(data-tooltip);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:4px 10px;background-color:var(--color-surface-raised);color:var(--color-text-primary);border:1px solid var(--color-border);box-shadow:var(--elevation-2, 0 4px 6px -1px rgba(0, 0, 0, .1));font-size:.75rem;white-space:nowrap;border-radius:4px;z-index:1002;pointer-events:none}.lc-sidenav--collapsed .lc-sidenav__collapse-row{padding:var(--spacing-2, .5rem) 0;justify-content:center}.lc-sidenav--drawer .lc-sidenav__logo--brand{padding-inline-end:58px}.lc-sidenav--drawer .lc-sidenav__logo--brand~.lc-sidenav__close{top:10px;right:10px;width:var(--size-min-touch-width, 2.75rem);height:var(--size-min-touch-height, 2.75rem)}.lc-sidenav--drawer .lc-sidenav__logo--brand~.lc-sidenav__nav{padding-top:var(--spacing-4, 1rem)}.lc-sidenav__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(forced-colors:active){.lc-sidenav__brand-tile{border:1px solid CanvasText;color:CanvasText}.lc-sidenav__nav-item--active:not(:focus-visible),.lc-sidenav__nav-item[aria-current=page]:not(:focus-visible){outline:1px solid Highlight}}@media print{.lc-sidenav-container,.lc-sidenav__overlay,.lc-sidenav{display:none}}\n"]
524
537
  }]
525
538
  }],
@@ -760,6 +773,14 @@ i0.ɵɵngDeclareClassMetadata({
760
773
  required: false
761
774
  }]
762
775
  }],
776
+ badgeAriaLabel: [{
777
+ type: i0.Input,
778
+ args: [{
779
+ isSignal: true,
780
+ alias: "badgeAriaLabel",
781
+ required: false
782
+ }]
783
+ }],
763
784
  closed: [{
764
785
  type: i0.Output,
765
786
  args: ["closed"]