@lifecorner/angular-ui-kit 3.4.0 → 3.5.0

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

@@ -0,0 +1,955 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ElementRef, Injector, ViewEncapsulation, afterRenderEffect, computed, inject, input, output, signal, viewChild } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i1 from "@angular/router";
+import { RouterModule } from "@angular/router";
+import { ButtonComponent } from "@lifecorner/angular-ui-kit/button";
+import { LogoComponent } from "@lifecorner/angular-ui-kit/logo";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { AvatarComponent } from "@lifecorner/angular-ui-kit/avatar";
+import { MenuComponent } from "@lifecorner/angular-ui-kit/menu";
+import { ThemeService } from "@lifecorner/angular-ui-kit/theme";
+var HeaderComponent = class HeaderComponent {
+	theme = input("auto", ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
+	logo = input("", ...ngDevMode ? [{ debugName: "logo" }] : /* istanbul ignore next */ []);
+	showLogo = input(true, ...ngDevMode ? [{ debugName: "showLogo" }] : /* istanbul ignore next */ []);
+	logoSrc = input("", ...ngDevMode ? [{ debugName: "logoSrc" }] : /* istanbul ignore next */ []);
+	logoEmblemSrc = input("", ...ngDevMode ? [{ debugName: "logoEmblemSrc" }] : /* istanbul ignore next */ []);
+	logoDarkSrc = input("", ...ngDevMode ? [{ debugName: "logoDarkSrc" }] : /* istanbul ignore next */ []);
+	logoDarkEmblemSrc = input("", ...ngDevMode ? [{ debugName: "logoDarkEmblemSrc" }] : /* istanbul ignore next */ []);
+	logoAlt = input("", ...ngDevMode ? [{ debugName: "logoAlt" }] : /* istanbul ignore next */ []);
+	logoSize = input("md", ...ngDevMode ? [{ debugName: "logoSize" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	title = input("", ...ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	titleTag = input("h1", ...ngDevMode ? [{ debugName: "titleTag" }] : /* istanbul ignore next */ []);
+	subtitle = input("", ...ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []);
+	userEmail = input("", ...ngDevMode ? [{ debugName: "userEmail" }] : /* istanbul ignore next */ []);
+	userName = input("", ...ngDevMode ? [{ debugName: "userName" }] : /* istanbul ignore next */ []);
+	userMenuTrigger = input("icon", ...ngDevMode ? [{ debugName: "userMenuTrigger" }] : /* istanbul ignore next */ []);
+	userAvatarSrc = input("", ...ngDevMode ? [{ debugName: "userAvatarSrc" }] : /* istanbul ignore next */ []);
+	userAvatarColor = input("default", ...ngDevMode ? [{ debugName: "userAvatarColor" }] : /* istanbul ignore next */ []);
+	showHamburger = input(false, ...ngDevMode ? [{ debugName: "showHamburger" }] : /* istanbul ignore next */ []);
+	sidenavOpen = input(void 0, ...ngDevMode ? [{ debugName: "sidenavOpen" }] : /* istanbul ignore next */ []);
+	sidenavId = input("", ...ngDevMode ? [{ debugName: "sidenavId" }] : /* istanbul ignore next */ []);
+	showThemeButton = input(false, ...ngDevMode ? [{ debugName: "showThemeButton" }] : /* istanbul ignore next */ []);
+	autoToggleTheme = input(true, ...ngDevMode ? [{ debugName: "autoToggleTheme" }] : /* istanbul ignore next */ []);
+	contextName = input("", ...ngDevMode ? [{ debugName: "contextName" }] : /* istanbul ignore next */ []);
+	contextLabel = input("", ...ngDevMode ? [{ debugName: "contextLabel" }] : /* istanbul ignore next */ []);
+	menuSize = input("sm", ...ngDevMode ? [{ debugName: "menuSize" }] : /* istanbul ignore next */ []);
+	showProfileMenuItem = input(true, ...ngDevMode ? [{ debugName: "showProfileMenuItem" }] : /* istanbul ignore next */ []);
+	showUserMenu = input(true, ...ngDevMode ? [{ debugName: "showUserMenu" }] : /* istanbul ignore next */ []);
+	homeHref = input("", ...ngDevMode ? [{ debugName: "homeHref" }] : /* istanbul ignore next */ []);
+	navItems = input([], ...ngDevMode ? [{ debugName: "navItems" }] : /* istanbul ignore next */ []);
+	sticky = input(true, ...ngDevMode ? [{ debugName: "sticky" }] : /* istanbul ignore next */ []);
+	homeAriaLabel = input("Go to home", ...ngDevMode ? [{ debugName: "homeAriaLabel" }] : /* istanbul ignore next */ []);
+	hamburgerAriaLabel = input("Toggle sidebar menu", ...ngDevMode ? [{ debugName: "hamburgerAriaLabel" }] : /* istanbul ignore next */ []);
+	userMenuAriaLabel = input("Open user menu", ...ngDevMode ? [{ debugName: "userMenuAriaLabel" }] : /* istanbul ignore next */ []);
+	navAriaLabel = input("Main navigation", ...ngDevMode ? [{ debugName: "navAriaLabel" }] : /* istanbul ignore next */ []);
+	themeToDarkAriaLabel = input("Switch to dark mode", ...ngDevMode ? [{ debugName: "themeToDarkAriaLabel" }] : /* istanbul ignore next */ []);
+	themeToLightAriaLabel = input("Switch to light mode", ...ngDevMode ? [{ debugName: "themeToLightAriaLabel" }] : /* istanbul ignore next */ []);
+	contextAriaLabel = input("Context info", ...ngDevMode ? [{ debugName: "contextAriaLabel" }] : /* istanbul ignore next */ []);
+	profileLabel = input("Profile", ...ngDevMode ? [{ debugName: "profileLabel" }] : /* istanbul ignore next */ []);
+	logoutLabel = input("Logout", ...ngDevMode ? [{ debugName: "logoutLabel" }] : /* istanbul ignore next */ []);
+	hamburgerClick = output();
+	themeToggleClick = output();
+	logoutClick = output();
+	profileClick = output();
+	contextClick = output();
+	injector = inject(Injector);
+	themeServiceInstance = null;
+	get themeService() {
+		return this.themeServiceInstance ??= this.injector.get(ThemeService);
+	}
+	hamburger = viewChild("hamburger", {
+		...ngDevMode ? { debugName: "hamburger" } : /* istanbul ignore next */ {},
+		read: ElementRef
+	});
+	constructor() {
+		afterRenderEffect(() => {
+			const button = this.hamburger()?.nativeElement.querySelector("button");
+			if (!button) return;
+			const open = this.sidenavOpen();
+			const controls = this.sidenavId();
+			if (open === void 0) button.removeAttribute("aria-expanded");
+			else button.setAttribute("aria-expanded", String(open));
+			if (controls) button.setAttribute("aria-controls", controls);
+			else button.removeAttribute("aria-controls");
+		});
+	}
+	menuItems = computed(() => {
+		const items = [];
+		if (this.showProfileMenuItem()) items.push({
+			id: "profile",
+			label: this.profileLabel(),
+			icon: "user",
+			dividerAfter: true
+		});
+		items.push({
+			id: "logout",
+			label: this.logoutLabel(),
+			icon: "arrow-right-start-on-rectangle",
+			variant: "danger"
+		});
+		return items;
+	}, ...ngDevMode ? [{ debugName: "menuItems" }] : /* istanbul ignore next */ []);
+	dropdownOpen = signal(false, ...ngDevMode ? [{ debugName: "dropdownOpen" }] : /* istanbul ignore next */ []);
+	isDropdownOpen() {
+		return this.dropdownOpen();
+	}
+	toggleDropdown() {
+		this.dropdownOpen.set(!this.dropdownOpen());
+	}
+	closeDropdown() {
+		this.dropdownOpen.set(false);
+	}
+	onHamburgerClick() {
+		this.hamburgerClick.emit();
+	}
+	onThemeButtonClick() {
+		if (this.autoToggleTheme()) this.themeService.toggleTheme();
+		this.themeToggleClick.emit();
+	}
+	onLogoutClick() {
+		this.logoutClick.emit();
+		this.closeDropdown();
+	}
+	onProfileClick() {
+		this.profileClick.emit();
+		this.closeDropdown();
+	}
+	onMenuItemClick(item) {
+		if (item.id === "logout") this.onLogoutClick();
+		else if (item.id === "profile") this.onProfileClick();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: HeaderComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: HeaderComponent,
+		isStandalone: true,
+		selector: "lc-header",
+		inputs: {
+			theme: {
+				classPropertyName: "theme",
+				publicName: "theme",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logo: {
+				classPropertyName: "logo",
+				publicName: "logo",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLogo: {
+				classPropertyName: "showLogo",
+				publicName: "showLogo",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoSrc: {
+				classPropertyName: "logoSrc",
+				publicName: "logoSrc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoEmblemSrc: {
+				classPropertyName: "logoEmblemSrc",
+				publicName: "logoEmblemSrc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoDarkSrc: {
+				classPropertyName: "logoDarkSrc",
+				publicName: "logoDarkSrc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoDarkEmblemSrc: {
+				classPropertyName: "logoDarkEmblemSrc",
+				publicName: "logoDarkEmblemSrc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoAlt: {
+				classPropertyName: "logoAlt",
+				publicName: "logoAlt",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoSize: {
+				classPropertyName: "logoSize",
+				publicName: "logoSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			title: {
+				classPropertyName: "title",
+				publicName: "title",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			titleTag: {
+				classPropertyName: "titleTag",
+				publicName: "titleTag",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			subtitle: {
+				classPropertyName: "subtitle",
+				publicName: "subtitle",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userEmail: {
+				classPropertyName: "userEmail",
+				publicName: "userEmail",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userName: {
+				classPropertyName: "userName",
+				publicName: "userName",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userMenuTrigger: {
+				classPropertyName: "userMenuTrigger",
+				publicName: "userMenuTrigger",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userAvatarSrc: {
+				classPropertyName: "userAvatarSrc",
+				publicName: "userAvatarSrc",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userAvatarColor: {
+				classPropertyName: "userAvatarColor",
+				publicName: "userAvatarColor",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showHamburger: {
+				classPropertyName: "showHamburger",
+				publicName: "showHamburger",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sidenavOpen: {
+				classPropertyName: "sidenavOpen",
+				publicName: "sidenavOpen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sidenavId: {
+				classPropertyName: "sidenavId",
+				publicName: "sidenavId",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showThemeButton: {
+				classPropertyName: "showThemeButton",
+				publicName: "showThemeButton",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			autoToggleTheme: {
+				classPropertyName: "autoToggleTheme",
+				publicName: "autoToggleTheme",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			contextName: {
+				classPropertyName: "contextName",
+				publicName: "contextName",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			contextLabel: {
+				classPropertyName: "contextLabel",
+				publicName: "contextLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			menuSize: {
+				classPropertyName: "menuSize",
+				publicName: "menuSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showProfileMenuItem: {
+				classPropertyName: "showProfileMenuItem",
+				publicName: "showProfileMenuItem",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showUserMenu: {
+				classPropertyName: "showUserMenu",
+				publicName: "showUserMenu",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			homeHref: {
+				classPropertyName: "homeHref",
+				publicName: "homeHref",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navItems: {
+				classPropertyName: "navItems",
+				publicName: "navItems",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			sticky: {
+				classPropertyName: "sticky",
+				publicName: "sticky",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			homeAriaLabel: {
+				classPropertyName: "homeAriaLabel",
+				publicName: "homeAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			hamburgerAriaLabel: {
+				classPropertyName: "hamburgerAriaLabel",
+				publicName: "hamburgerAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			userMenuAriaLabel: {
+				classPropertyName: "userMenuAriaLabel",
+				publicName: "userMenuAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			navAriaLabel: {
+				classPropertyName: "navAriaLabel",
+				publicName: "navAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			themeToDarkAriaLabel: {
+				classPropertyName: "themeToDarkAriaLabel",
+				publicName: "themeToDarkAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			themeToLightAriaLabel: {
+				classPropertyName: "themeToLightAriaLabel",
+				publicName: "themeToLightAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			contextAriaLabel: {
+				classPropertyName: "contextAriaLabel",
+				publicName: "contextAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			profileLabel: {
+				classPropertyName: "profileLabel",
+				publicName: "profileLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoutLabel: {
+				classPropertyName: "logoutLabel",
+				publicName: "logoutLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			hamburgerClick: "hamburgerClick",
+			themeToggleClick: "themeToggleClick",
+			logoutClick: "logoutClick",
+			profileClick: "profileClick",
+			contextClick: "contextClick"
+		},
+		host: { classAttribute: "lc-header-host" },
+		viewQueries: [{
+			propertyName: "hamburger",
+			first: true,
+			predicate: ["hamburger"],
+			descendants: true,
+			read: ElementRef,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<header\n  class=\"lc-header\"\n  [class.lc-header--dark]=\"theme() === 'dark'\"\n  [class.lc-header--light]=\"theme() === 'light'\"\n  [class.lc-header--size-sm]=\"size() === 'sm'\"\n  [class.lc-header--size-md]=\"size() === 'md'\"\n  [class.lc-header--size-lg]=\"size() === 'lg'\"\n  [class.lc-header--size-xl]=\"size() === 'xl'\"\n  [class.lc-header--has-nav]=\"navItems().length > 0\"\n  [class.lc-header--static]=\"!sticky()\"\n  [class.lc-header--transparent]=\"variant() === 'transparent'\"\n>\n  <!-- Hamburger menu icon (mobile only) -->\n  @if (showHamburger()) {\n    <lc-button\n      #hamburger\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"hamburgerAriaLabel()\"\n      (clicked)=\"onHamburgerClick()\"\n      class=\"lc-header__hamburger\"\n    >\n      <lc-icon name=\"bars-3\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Logo (clickable, navigates to home) -->\n  <div class=\"lc-header__brand\">\n    @if (showLogo()) {\n      @if (homeHref()) {\n        <!-- Plain link: works without the router and without JavaScript. -->\n        <a [href]=\"homeHref()\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n          <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n        </a>\n      } @else {\n        <a routerLink=\"/\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n          <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n        </a>\n      }\n    }\n\n    @if (title()) {\n      <div class=\"lc-header__title-group\">\n        @switch (titleTag()) {\n          @case ('h1') {\n            <h1 class=\"lc-header__title\">{{ title() }}</h1>\n          }\n          @case ('h2') {\n            <h2 class=\"lc-header__title\">{{ title() }}</h2>\n          }\n          @case ('h3') {\n            <h3 class=\"lc-header__title\">{{ title() }}</h3>\n          }\n          @case ('p') {\n            <p class=\"lc-header__title\">{{ title() }}</p>\n          }\n          @case ('div') {\n            <div class=\"lc-header__title\">{{ title() }}</div>\n          }\n          @default {\n            <span class=\"lc-header__title\">{{ title() }}</span>\n          }\n        }\n        @if (subtitle()) {\n          <span class=\"lc-header__subtitle\" [attr.title]=\"subtitle()\">{{ subtitle() }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Main navigation: inline from 1024 px, its own wrapping row below. -->\n  @if (navItems().length > 0) {\n    <nav class=\"lc-header__nav\" [attr.aria-label]=\"navAriaLabel()\">\n      <ul class=\"lc-header__nav-list\">\n        @for (item of navItems(); track $index) {\n          <li class=\"lc-header__nav-item\">\n            <a\n              class=\"lc-header__nav-link\"\n              [href]=\"item.href\"\n              [attr.aria-current]=\"item.current ? 'page' : null\"\n            >{{ item.label }}</a>\n          </li>\n        }\n      </ul>\n    </nav>\n  }\n\n  <div class=\"lc-header__spacer\"></div>\n\n  <!-- End of the first row, e.g. a language link. -->\n  <ng-content select=\"[slot='end']\" />\n\n  <!-- Theme toggle button -->\n  @if (showThemeButton()) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"themeService.isDark() ? themeToLightAriaLabel() : themeToDarkAriaLabel()\"\n      (clicked)=\"onThemeButtonClick()\"\n      class=\"lc-header__theme-toggle\"\n    >\n      <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Context info (e.g. tenant, organization, project) -->\n  @if (contextName()) {\n    <button\n      type=\"button\"\n      class=\"lc-header__context-info\"\n      [attr.title]=\"contextName()\"\n      [attr.aria-label]=\"contextAriaLabel()\"\n      (click)=\"contextClick.emit()\"\n    >\n      @if (contextLabel()) {\n        <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>\n      }\n      <span class=\"lc-header__context-name\">{{ contextName() }}</span>\n    </button>\n  }\n\n  <!-- User profile menu -->\n  @if (showUserMenu()) {\n    <lc-menu\n      [items]=\"menuItems()\"\n      [isOpen]=\"isDropdownOpen()\"\n      position=\"bottom-right\"\n      minWidth=\"min(220px, calc(100vw - 2rem))\"\n      maxWidth=\"min(18rem, calc(100vw - 2rem))\"\n      [size]=\"menuSize()\"\n      (itemClick)=\"onMenuItemClick($event)\"\n      (closed)=\"closeDropdown()\"\n    >\n      <!-- Menu header with avatar, name and email -->\n      @if (userName() || userEmail()) {\n        <div header class=\"lc-header__menu-header\">\n          <lc-avatar\n            [name]=\"userName()\"\n            [src]=\"userAvatarSrc() || undefined\"\n            [color]=\"userAvatarColor()\"\n            size=\"md\"\n          />\n          <div class=\"lc-header__menu-user-info\">\n            @if (userName()) {\n              <div class=\"lc-header__menu-user-name\">{{ userName() }}</div>\n            }\n            @if (userEmail()) {\n              <div class=\"lc-header__menu-user-email\">{{ userEmail() }}</div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (userMenuTrigger() === 'avatar') {\n        <button\n          trigger\n          class=\"lc-header__profile-trigger lc-header__profile-trigger--avatar\"\n          type=\"button\"\n          [attr.aria-label]=\"userMenuAriaLabel()\"\n          [attr.aria-expanded]=\"isDropdownOpen()\"\n          (click)=\"toggleDropdown()\"\n        >\n          <lc-avatar\n            [name]=\"userName()\"\n            [src]=\"userAvatarSrc() || undefined\"\n            [color]=\"userAvatarColor()\"\n            [decorative]=\"true\"\n            size=\"md\"\n          />\n        </button>\n      } @else {\n        <button\n          trigger\n          class=\"lc-header__profile-trigger\"\n          type=\"button\"\n          [attr.aria-label]=\"userMenuAriaLabel()\"\n          [attr.aria-expanded]=\"isDropdownOpen()\"\n          (click)=\"toggleDropdown()\"\n        >\n          <lc-icon name=\"user\" size=\"sm\" />\n          <lc-icon name=\"chevron-down\" size=\"xs\" />\n        </button>\n      }\n    </lc-menu>\n  }\n</header>\n\n<ng-template #brandLogo>\n  <lc-logo\n    [variant]=\"logo() ? 'full' : 'emblem'\"\n    [size]=\"logoSize()\"\n    [clickable]=\"false\"\n    [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n    [src]=\"logoSrc()\"\n    [emblemSrc]=\"logoEmblemSrc()\"\n    [darkSrc]=\"logoDarkSrc()\"\n    [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n    [alt]=\"logoAlt() || title() || 'Logo'\"\n  />\n</ng-template>\n",
+		styles: [".lc-header{--lc-header-bg: var(--color-surface);--lc-header-fg: var(--color-text-primary);--lc-header-fg-secondary: var(--color-text-secondary);--lc-header-border: var(--color-border);--lc-header-hover-bg: var(--color-surface-hover);--lc-header-trigger-border: var(--color-border);--lc-header-trigger-fg: var(--color-text-secondary);--lc-header-padding-x: var(--lc-density-padding-lg, var(--spacing-6));display:flex;align-items:center;gap:var(--lc-density-gap-md, var(--spacing-4));padding:0 var(--lc-header-padding-x);background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);min-height:64px;position:sticky;top:0;z-index:1000}.lc-header.lc-header--size-sm{min-height:56px;--lc-header-row-height: 56px}.lc-header.lc-header--size-md{min-height:64px;--lc-header-row-height: 64px}.lc-header.lc-header--size-lg{min-height:80px;--lc-header-row-height: 80px}.lc-header.lc-header--size-xl{min-height:112px;--lc-header-row-height: 112px}@media(max-width:768px){.lc-header{--lc-header-padding-x: var(--lc-density-padding-md, var(--spacing-4))}}.lc-header--static{position:relative}.lc-header--has-nav{flex-wrap:wrap;row-gap:0}.lc-header--has-nav .lc-header__brand{min-height:var(--lc-header-row-height, 64px)}.lc-header__nav{display:flex;align-items:center;min-width:0}.lc-header__nav-list{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--lc-header-nav-gap, var(--spacing-1));margin:0;padding:0;list-style:none}.lc-header__nav-item{display:flex}.lc-header__nav-link{display:inline-flex;align-items:center;min-height:var(--size-min-touch-height, 2.75rem);padding:0 var(--spacing-3);border-radius:var(--border-radius-md);color:var(--lc-header-fg-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);text-decoration:none;transition:color .15s ease,background-color .15s ease}.lc-header__nav-link:hover{color:var(--lc-header-fg);background-color:var(--lc-header-hover-bg)}.lc-header__nav-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__nav-link[aria-current=page]{color:var(--lc-header-fg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}@media(max-width:1023.98px){.lc-header--has-nav .lc-header__nav{order:1;flex-basis:100%;margin-left:calc(-1 * var(--spacing-3))}}.lc-header--dark{--lc-header-bg: #070e15;--lc-header-fg: #f1f6f8;--lc-header-fg-secondary: #c4d2d9;--lc-header-border: rgba(255, 255, 255, .08);--lc-header-hover-bg: rgba(132, 199, 212, .06);--lc-header-trigger-border: rgba(255, 255, 255, .08);--lc-header-trigger-fg: #c4d2d9}.lc-header--light{--lc-header-bg: #ffffff;--lc-header-fg: #111827;--lc-header-fg-secondary: #4b5563;--lc-header-border: #e5e7eb;--lc-header-hover-bg: #f3f4f6;--lc-header-trigger-border: #e5e7eb;--lc-header-trigger-fg: #374151}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;margin-left:calc(var(--lc-header-hamburger-slot, 56px) / 2 - var(--lc-header-padding-x) - 12px);margin-right:calc(var(--lc-header-hamburger-gap, .5rem) - var(--lc-density-gap-md, var(--spacing-4)));color:var(--lc-header-trigger-fg)}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;align-items:center;gap:var(--spacing-3);min-width:0}.lc-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--lc-header-fg);flex-shrink:0}.lc-header__logo:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--border-radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex-direction:column;gap:.125rem;min-width:0}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;line-height:1.2;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{display:block;max-width:var(--lc-header-subtitle-max-width, 100%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;line-height:1.3;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:var(--lc-header-subtitle-transform, none);transition:color .2s ease}@media(min-width:1024px){.lc-header__subtitle{font-size:var(--font-size-sm, .875rem)}}.lc-header__spacer{flex:1}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--border-radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--border-radius-full);cursor:pointer;color:var(--lc-header-trigger-fg);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--lc-header-hover-bg);border-color:var(--lc-header-fg-secondary)}.lc-header__profile-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__profile-trigger--avatar{justify-content:center;width:3rem;height:3rem;min-height:3rem;padding:0;border:0;flex-shrink:0}.lc-header__profile-trigger--avatar:hover{border-color:transparent}.lc-header.lc-header--transparent{--lc-header-bg: transparent;--lc-header-border: transparent;border-bottom-width:0}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4));border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);overflow-wrap:break-word;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow-wrap:anywhere;line-height:1.4}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgTemplateOutlet,
+				selector: "[ngTemplateOutlet]",
+				inputs: [
+					"ngTemplateOutletContext",
+					"ngTemplateOutlet",
+					"ngTemplateOutletInjector"
+				]
+			},
+			{
+				kind: "ngmodule",
+				type: RouterModule
+			},
+			{
+				kind: "directive",
+				type: i1.RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			},
+			{
+				kind: "component",
+				type: ButtonComponent,
+				selector: "lc-button",
+				inputs: [
+					"variant",
+					"size",
+					"disabled",
+					"loading",
+					"iconOnly",
+					"fullWidth",
+					"ariaLabel",
+					"type",
+					"title",
+					"disabledReason",
+					"inline"
+				],
+				outputs: [
+					"clicked",
+					"focused",
+					"blurred"
+				]
+			},
+			{
+				kind: "component",
+				type: LogoComponent,
+				selector: "lc-logo",
+				inputs: [
+					"variant",
+					"size",
+					"alt",
+					"clickable",
+					"colorMode",
+					"src",
+					"emblemSrc",
+					"darkSrc",
+					"darkEmblemSrc"
+				]
+			},
+			{
+				kind: "component",
+				type: IconComponent,
+				selector: "lc-icon",
+				inputs: [
+					"name",
+					"variant",
+					"size",
+					"color",
+					"ariaLabel",
+					"decorative",
+					"strict"
+				]
+			},
+			{
+				kind: "component",
+				type: AvatarComponent,
+				selector: "lc-avatar",
+				inputs: [
+					"src",
+					"alt",
+					"name",
+					"size",
+					"status",
+					"color",
+					"ring",
+					"decorative"
+				]
+			},
+			{
+				kind: "component",
+				type: MenuComponent,
+				selector: "lc-menu",
+				inputs: [
+					"items",
+					"isOpen",
+					"position",
+					"size",
+					"minWidth",
+					"maxWidth"
+				],
+				outputs: ["itemClick", "closed"]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: HeaderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-header",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				RouterModule,
+				ButtonComponent,
+				LogoComponent,
+				IconComponent,
+				AvatarComponent,
+				MenuComponent
+			],
+			encapsulation: ViewEncapsulation.None,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "lc-header-host" },
+			template: "<header\n  class=\"lc-header\"\n  [class.lc-header--dark]=\"theme() === 'dark'\"\n  [class.lc-header--light]=\"theme() === 'light'\"\n  [class.lc-header--size-sm]=\"size() === 'sm'\"\n  [class.lc-header--size-md]=\"size() === 'md'\"\n  [class.lc-header--size-lg]=\"size() === 'lg'\"\n  [class.lc-header--size-xl]=\"size() === 'xl'\"\n  [class.lc-header--has-nav]=\"navItems().length > 0\"\n  [class.lc-header--static]=\"!sticky()\"\n  [class.lc-header--transparent]=\"variant() === 'transparent'\"\n>\n  <!-- Hamburger menu icon (mobile only) -->\n  @if (showHamburger()) {\n    <lc-button\n      #hamburger\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"hamburgerAriaLabel()\"\n      (clicked)=\"onHamburgerClick()\"\n      class=\"lc-header__hamburger\"\n    >\n      <lc-icon name=\"bars-3\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Logo (clickable, navigates to home) -->\n  <div class=\"lc-header__brand\">\n    @if (showLogo()) {\n      @if (homeHref()) {\n        <!-- Plain link: works without the router and without JavaScript. -->\n        <a [href]=\"homeHref()\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n          <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n        </a>\n      } @else {\n        <a routerLink=\"/\" class=\"lc-header__logo\" [attr.aria-label]=\"homeAriaLabel()\">\n          <ng-container [ngTemplateOutlet]=\"brandLogo\" />\n        </a>\n      }\n    }\n\n    @if (title()) {\n      <div class=\"lc-header__title-group\">\n        @switch (titleTag()) {\n          @case ('h1') {\n            <h1 class=\"lc-header__title\">{{ title() }}</h1>\n          }\n          @case ('h2') {\n            <h2 class=\"lc-header__title\">{{ title() }}</h2>\n          }\n          @case ('h3') {\n            <h3 class=\"lc-header__title\">{{ title() }}</h3>\n          }\n          @case ('p') {\n            <p class=\"lc-header__title\">{{ title() }}</p>\n          }\n          @case ('div') {\n            <div class=\"lc-header__title\">{{ title() }}</div>\n          }\n          @default {\n            <span class=\"lc-header__title\">{{ title() }}</span>\n          }\n        }\n        @if (subtitle()) {\n          <span class=\"lc-header__subtitle\" [attr.title]=\"subtitle()\">{{ subtitle() }}</span>\n        }\n      </div>\n    }\n  </div>\n\n  <!-- Main navigation: inline from 1024 px, its own wrapping row below. -->\n  @if (navItems().length > 0) {\n    <nav class=\"lc-header__nav\" [attr.aria-label]=\"navAriaLabel()\">\n      <ul class=\"lc-header__nav-list\">\n        @for (item of navItems(); track $index) {\n          <li class=\"lc-header__nav-item\">\n            <a\n              class=\"lc-header__nav-link\"\n              [href]=\"item.href\"\n              [attr.aria-current]=\"item.current ? 'page' : null\"\n            >{{ item.label }}</a>\n          </li>\n        }\n      </ul>\n    </nav>\n  }\n\n  <div class=\"lc-header__spacer\"></div>\n\n  <!-- End of the first row, e.g. a language link. -->\n  <ng-content select=\"[slot='end']\" />\n\n  <!-- Theme toggle button -->\n  @if (showThemeButton()) {\n    <lc-button\n      variant=\"ghost\"\n      size=\"sm\"\n      [iconOnly]=\"true\"\n      [ariaLabel]=\"themeService.isDark() ? themeToLightAriaLabel() : themeToDarkAriaLabel()\"\n      (clicked)=\"onThemeButtonClick()\"\n      class=\"lc-header__theme-toggle\"\n    >\n      <lc-icon [name]=\"themeService.isDark() ? 'sun' : 'moon'\" size=\"sm\" />\n    </lc-button>\n  }\n\n  <!-- Context info (e.g. tenant, organization, project) -->\n  @if (contextName()) {\n    <button\n      type=\"button\"\n      class=\"lc-header__context-info\"\n      [attr.title]=\"contextName()\"\n      [attr.aria-label]=\"contextAriaLabel()\"\n      (click)=\"contextClick.emit()\"\n    >\n      @if (contextLabel()) {\n        <span class=\"lc-header__context-label\">{{ contextLabel() }}</span>\n      }\n      <span class=\"lc-header__context-name\">{{ contextName() }}</span>\n    </button>\n  }\n\n  <!-- User profile menu -->\n  @if (showUserMenu()) {\n    <lc-menu\n      [items]=\"menuItems()\"\n      [isOpen]=\"isDropdownOpen()\"\n      position=\"bottom-right\"\n      minWidth=\"min(220px, calc(100vw - 2rem))\"\n      maxWidth=\"min(18rem, calc(100vw - 2rem))\"\n      [size]=\"menuSize()\"\n      (itemClick)=\"onMenuItemClick($event)\"\n      (closed)=\"closeDropdown()\"\n    >\n      <!-- Menu header with avatar, name and email -->\n      @if (userName() || userEmail()) {\n        <div header class=\"lc-header__menu-header\">\n          <lc-avatar\n            [name]=\"userName()\"\n            [src]=\"userAvatarSrc() || undefined\"\n            [color]=\"userAvatarColor()\"\n            size=\"md\"\n          />\n          <div class=\"lc-header__menu-user-info\">\n            @if (userName()) {\n              <div class=\"lc-header__menu-user-name\">{{ userName() }}</div>\n            }\n            @if (userEmail()) {\n              <div class=\"lc-header__menu-user-email\">{{ userEmail() }}</div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (userMenuTrigger() === 'avatar') {\n        <button\n          trigger\n          class=\"lc-header__profile-trigger lc-header__profile-trigger--avatar\"\n          type=\"button\"\n          [attr.aria-label]=\"userMenuAriaLabel()\"\n          [attr.aria-expanded]=\"isDropdownOpen()\"\n          (click)=\"toggleDropdown()\"\n        >\n          <lc-avatar\n            [name]=\"userName()\"\n            [src]=\"userAvatarSrc() || undefined\"\n            [color]=\"userAvatarColor()\"\n            [decorative]=\"true\"\n            size=\"md\"\n          />\n        </button>\n      } @else {\n        <button\n          trigger\n          class=\"lc-header__profile-trigger\"\n          type=\"button\"\n          [attr.aria-label]=\"userMenuAriaLabel()\"\n          [attr.aria-expanded]=\"isDropdownOpen()\"\n          (click)=\"toggleDropdown()\"\n        >\n          <lc-icon name=\"user\" size=\"sm\" />\n          <lc-icon name=\"chevron-down\" size=\"xs\" />\n        </button>\n      }\n    </lc-menu>\n  }\n</header>\n\n<ng-template #brandLogo>\n  <lc-logo\n    [variant]=\"logo() ? 'full' : 'emblem'\"\n    [size]=\"logoSize()\"\n    [clickable]=\"false\"\n    [colorMode]=\"theme() === 'dark' ? 'dark' : theme() === 'light' ? 'light' : 'auto'\"\n    [src]=\"logoSrc()\"\n    [emblemSrc]=\"logoEmblemSrc()\"\n    [darkSrc]=\"logoDarkSrc()\"\n    [darkEmblemSrc]=\"logoDarkEmblemSrc()\"\n    [alt]=\"logoAlt() || title() || 'Logo'\"\n  />\n</ng-template>\n",
+			styles: [".lc-header{--lc-header-bg: var(--color-surface);--lc-header-fg: var(--color-text-primary);--lc-header-fg-secondary: var(--color-text-secondary);--lc-header-border: var(--color-border);--lc-header-hover-bg: var(--color-surface-hover);--lc-header-trigger-border: var(--color-border);--lc-header-trigger-fg: var(--color-text-secondary);--lc-header-padding-x: var(--lc-density-padding-lg, var(--spacing-6));display:flex;align-items:center;gap:var(--lc-density-gap-md, var(--spacing-4));padding:0 var(--lc-header-padding-x);background-color:var(--lc-header-bg);border-bottom:1px solid var(--lc-header-border);min-height:64px;position:sticky;top:0;z-index:1000}.lc-header.lc-header--size-sm{min-height:56px;--lc-header-row-height: 56px}.lc-header.lc-header--size-md{min-height:64px;--lc-header-row-height: 64px}.lc-header.lc-header--size-lg{min-height:80px;--lc-header-row-height: 80px}.lc-header.lc-header--size-xl{min-height:112px;--lc-header-row-height: 112px}@media(max-width:768px){.lc-header{--lc-header-padding-x: var(--lc-density-padding-md, var(--spacing-4))}}.lc-header--static{position:relative}.lc-header--has-nav{flex-wrap:wrap;row-gap:0}.lc-header--has-nav .lc-header__brand{min-height:var(--lc-header-row-height, 64px)}.lc-header__nav{display:flex;align-items:center;min-width:0}.lc-header__nav-list{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--lc-header-nav-gap, var(--spacing-1));margin:0;padding:0;list-style:none}.lc-header__nav-item{display:flex}.lc-header__nav-link{display:inline-flex;align-items:center;min-height:var(--size-min-touch-height, 2.75rem);padding:0 var(--spacing-3);border-radius:var(--border-radius-md);color:var(--lc-header-fg-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-tight);text-decoration:none;transition:color .15s ease,background-color .15s ease}.lc-header__nav-link:hover{color:var(--lc-header-fg);background-color:var(--lc-header-hover-bg)}.lc-header__nav-link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__nav-link[aria-current=page]{color:var(--lc-header-fg);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.45em}@media(max-width:1023.98px){.lc-header--has-nav .lc-header__nav{order:1;flex-basis:100%;margin-left:calc(-1 * var(--spacing-3))}}.lc-header--dark{--lc-header-bg: #070e15;--lc-header-fg: #f1f6f8;--lc-header-fg-secondary: #c4d2d9;--lc-header-border: rgba(255, 255, 255, .08);--lc-header-hover-bg: rgba(132, 199, 212, .06);--lc-header-trigger-border: rgba(255, 255, 255, .08);--lc-header-trigger-fg: #c4d2d9}.lc-header--light{--lc-header-bg: #ffffff;--lc-header-fg: #111827;--lc-header-fg-secondary: #4b5563;--lc-header-border: #e5e7eb;--lc-header-hover-bg: #f3f4f6;--lc-header-trigger-border: #e5e7eb;--lc-header-trigger-fg: #374151}.lc-header__hamburger{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;margin-left:calc(var(--lc-header-hamburger-slot, 56px) / 2 - var(--lc-header-padding-x) - 12px);margin-right:calc(var(--lc-header-hamburger-gap, .5rem) - var(--lc-density-gap-md, var(--spacing-4)));color:var(--lc-header-trigger-fg)}.lc-header__hamburger .lc-icon{width:24px;height:24px}.lc-header__brand{display:flex;align-items:center;gap:var(--spacing-3);min-width:0}.lc-header__logo{display:flex;align-items:center;text-decoration:none;color:var(--lc-header-fg);flex-shrink:0}.lc-header__logo:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:4px;border-radius:var(--border-radius-sm)}.lc-header__logo-img{height:32px;width:auto}.lc-header__title-group{display:flex;flex-direction:column;gap:.125rem;min-width:0}.lc-header__title{font-size:1.25rem;font-weight:700;color:var(--lc-header-fg);margin:0;line-height:1.2;transition:color .2s ease}@media(max-width:640px){.lc-header__title{font-size:1.125rem}}.lc-header__subtitle{display:block;max-width:var(--lc-header-subtitle-max-width, 100%);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;line-height:1.3;font-weight:500;color:var(--lc-header-fg-secondary);text-transform:var(--lc-header-subtitle-transform, none);transition:color .2s ease}@media(min-width:1024px){.lc-header__subtitle{font-size:var(--font-size-sm, .875rem)}}.lc-header__spacer{flex:1}.lc-header__theme-toggle{color:var(--lc-header-trigger-fg)}.lc-header__context-info{display:flex;flex-direction:column;align-items:flex-end;gap:.0625rem;padding:var(--spacing-2) var(--spacing-3);background:transparent;border:none;cursor:pointer;border-radius:var(--border-radius-md);color:var(--lc-header-trigger-fg);transition:background-color .2s ease,color .2s ease;max-width:220px;min-width:0}.lc-header__context-info:hover{background-color:var(--lc-header-hover-bg)}.lc-header__context-info:hover .lc-header__context-name{color:var(--lc-header-fg)}.lc-header__context-info:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}@media(max-width:640px){.lc-header__context-info{display:none}}.lc-header__context-label{font-size:var(--font-size-xs);font-weight:500;color:var(--lc-header-fg-secondary);text-transform:uppercase;letter-spacing:.05em;line-height:1.2}.lc-header__context-name{font-size:var(--font-size-sm);font-weight:600;color:var(--lc-header-fg);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.lc-header--dark .lc-header__theme-toggle lc-icon,.lc-header--dark .lc-header__theme-toggle .lc-icon,.lc-header--dark .lc-header__theme-toggle svg,.lc-header--dark .lc-header__hamburger lc-icon,.lc-header--dark .lc-header__hamburger .lc-icon,.lc-header--dark .lc-header__hamburger svg,.lc-header--dark .lc-header__profile-trigger lc-icon,.lc-header--dark .lc-header__profile-trigger .lc-icon,.lc-header--dark .lc-header__profile-trigger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,html.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,:root.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__theme-toggle svg,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__hamburger svg,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger .lc-icon,.dark .lc-header:not(.lc-header--light) .lc-header__profile-trigger svg{color:var(--lc-header-trigger-fg)}.lc-header--dark lc-button,html.dark .lc-header:not(.lc-header--light) lc-button,:root.dark .lc-header:not(.lc-header--light) lc-button,.dark .lc-header:not(.lc-header--light) lc-button{--lc-button-ghost-fg: var(--lc-header-trigger-fg);--lc-button-ghost-hover-bg: var(--lc-header-hover-bg);--lc-button-ghost-hover-fg: var(--lc-header-fg);--lc-button-ghost-active-bg: var(--lc-header-hover-bg)}.lc-header__profile-trigger{display:flex;align-items:center;gap:var(--lc-density-gap-sm, var(--spacing-2));min-height:var(--size-min-touch-height, 2.75rem);box-sizing:border-box;padding:var(--lc-density-padding-xs, var(--spacing-2)) var(--spacing-3);background:transparent;border:1px solid var(--lc-header-trigger-border);border-radius:var(--border-radius-full);cursor:pointer;color:var(--lc-header-trigger-fg);transition:background-color .2s ease,border-color .2s ease}.lc-header__profile-trigger:hover{background-color:var(--lc-header-hover-bg);border-color:var(--lc-header-fg-secondary)}.lc-header__profile-trigger:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-header__profile-trigger--avatar{justify-content:center;width:3rem;height:3rem;min-height:3rem;padding:0;border:0;flex-shrink:0}.lc-header__profile-trigger--avatar:hover{border-color:transparent}.lc-header.lc-header--transparent{--lc-header-bg: transparent;--lc-header-border: transparent;border-bottom-width:0}.lc-menu__header{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-sm);color:var(--color-text-secondary, #6b7280);border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1);word-break:break-word}.lc-header__menu-header{display:flex;align-items:flex-start;gap:var(--spacing-3);padding:var(--lc-density-padding-md, var(--spacing-4));border-bottom:1px solid var(--color-divider, #e5e7eb);margin-bottom:var(--spacing-1)}.lc-header__menu-user-info{flex:1;min-width:0}.lc-header__menu-user-name{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-primary);overflow-wrap:break-word;line-height:1.4}.lc-header__menu-user-email{font-size:var(--font-size-xs);color:var(--color-text-secondary, #6b7280);overflow-wrap:anywhere;line-height:1.4}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		theme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "theme",
+				required: false
+			}]
+		}],
+		logo: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logo",
+				required: false
+			}]
+		}],
+		showLogo: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLogo",
+				required: false
+			}]
+		}],
+		logoSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoSrc",
+				required: false
+			}]
+		}],
+		logoEmblemSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoEmblemSrc",
+				required: false
+			}]
+		}],
+		logoDarkSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoDarkSrc",
+				required: false
+			}]
+		}],
+		logoDarkEmblemSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoDarkEmblemSrc",
+				required: false
+			}]
+		}],
+		logoAlt: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoAlt",
+				required: false
+			}]
+		}],
+		logoSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoSize",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		title: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "title",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		titleTag: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "titleTag",
+				required: false
+			}]
+		}],
+		subtitle: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "subtitle",
+				required: false
+			}]
+		}],
+		userEmail: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userEmail",
+				required: false
+			}]
+		}],
+		userName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userName",
+				required: false
+			}]
+		}],
+		userMenuTrigger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userMenuTrigger",
+				required: false
+			}]
+		}],
+		userAvatarSrc: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userAvatarSrc",
+				required: false
+			}]
+		}],
+		userAvatarColor: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userAvatarColor",
+				required: false
+			}]
+		}],
+		showHamburger: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showHamburger",
+				required: false
+			}]
+		}],
+		sidenavOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sidenavOpen",
+				required: false
+			}]
+		}],
+		sidenavId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sidenavId",
+				required: false
+			}]
+		}],
+		showThemeButton: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showThemeButton",
+				required: false
+			}]
+		}],
+		autoToggleTheme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "autoToggleTheme",
+				required: false
+			}]
+		}],
+		contextName: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contextName",
+				required: false
+			}]
+		}],
+		contextLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contextLabel",
+				required: false
+			}]
+		}],
+		menuSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "menuSize",
+				required: false
+			}]
+		}],
+		showProfileMenuItem: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showProfileMenuItem",
+				required: false
+			}]
+		}],
+		showUserMenu: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showUserMenu",
+				required: false
+			}]
+		}],
+		homeHref: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "homeHref",
+				required: false
+			}]
+		}],
+		navItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navItems",
+				required: false
+			}]
+		}],
+		sticky: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "sticky",
+				required: false
+			}]
+		}],
+		homeAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "homeAriaLabel",
+				required: false
+			}]
+		}],
+		hamburgerAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hamburgerAriaLabel",
+				required: false
+			}]
+		}],
+		userMenuAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userMenuAriaLabel",
+				required: false
+			}]
+		}],
+		navAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "navAriaLabel",
+				required: false
+			}]
+		}],
+		themeToDarkAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "themeToDarkAriaLabel",
+				required: false
+			}]
+		}],
+		themeToLightAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "themeToLightAriaLabel",
+				required: false
+			}]
+		}],
+		contextAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "contextAriaLabel",
+				required: false
+			}]
+		}],
+		profileLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "profileLabel",
+				required: false
+			}]
+		}],
+		logoutLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoutLabel",
+				required: false
+			}]
+		}],
+		hamburgerClick: [{
+			type: i0.Output,
+			args: ["hamburgerClick"]
+		}],
+		themeToggleClick: [{
+			type: i0.Output,
+			args: ["themeToggleClick"]
+		}],
+		logoutClick: [{
+			type: i0.Output,
+			args: ["logoutClick"]
+		}],
+		profileClick: [{
+			type: i0.Output,
+			args: ["profileClick"]
+		}],
+		contextClick: [{
+			type: i0.Output,
+			args: ["contextClick"]
+		}],
+		hamburger: [{
+			type: i0.ViewChild,
+			args: ["hamburger", {
+				read: ElementRef,
+				isSignal: true
+			}]
+		}]
+	}
+});
+export { HeaderComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-header.mjs.map