@lifecorner/angular-ui-kit 3.5.1 → 3.6.1

package/fesm2022/lifecorner-angular-ui-kit-search-input.mjs

@@ -1,7 +1,8 @@
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, computed, effect, input, model, output, untracked, viewChild } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
-import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { IconComponent, ɵprovideKitIcons } from "@lifecorner/angular-ui-kit/icon";
+import { ICON_X_MARK } from "@lifecorner/angular-ui-kit/icons";
 import { Subject, debounce, distinctUntilChanged, filter, of, timer } from "rxjs";
 let nextUniqueId = 0;
 var SearchInputComponent = class SearchInputComponent {
@@ -175,6 +176,7 @@ var SearchInputComponent = class SearchInputComponent {
 				"strict"
 			]
 		}],
+		viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -189,6 +191,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "lc-search-input",
 			standalone: true,
 			imports: [IconComponent],
+			viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			template: "<div [class]=\"wrapperClasses()\">\n  <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n  <input\n    #searchInputEl\n    type=\"search\"\n    class=\"search-input__field\"\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    autocomplete=\"off\"\n    [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() || 'Search'\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n  />\n  @if (value()) {\n    <button\n      type=\"button\"\n      class=\"search-input__clear\"\n      (click)=\"clear()\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"disabled()\"\n    >\n      <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n    </button>\n  }\n</div>\n",
 			styles: [":host{display:block;width:100%}.search-input{display:flex;align-items:center;gap:.5rem;width:100%;background-color:var(--color-surface-2);border:1px solid var(--color-field-border);border-radius:var(--border-radius-md);transition:border-color .15s ease,box-shadow .15s ease}.search-input:hover:not(.search-input--disabled){border-color:var(--color-text-secondary)}.search-input:focus-within{border-color:var(--color-primary-500);box-shadow:0 0 0 2px #20849733}.search-input--sm{padding:.375rem .625rem;font-size:.8125rem}.search-input--md{padding:.5rem .75rem;font-size:.875rem}.search-input--lg{padding:.625rem 1rem;font-size:1rem}.search-input--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.search-input__icon{flex-shrink:0;color:var(--color-text-tertiary);--icon-size: 1rem}.search-input__field{flex:1;border:none;outline:none;background:transparent;font:inherit;color:var(--color-text-primary);min-width:0}.search-input__field::placeholder{color:var(--color-text-tertiary)}.search-input__field::-webkit-search-cancel-button,.search-input__field::-webkit-search-decoration{-webkit-appearance:none;appearance:none}.search-input__clear{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:var(--color-surface-hover);cursor:pointer;padding:0;transition:background .15s ease}.search-input__clear:hover{background:var(--color-border-strong)}.search-input__clear:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:1px}.search-input__clear-icon{--icon-size: .75rem;color:var(--color-text-secondary)}\n"]

package/fesm2022/lifecorner-angular-ui-kit-search-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"lifecorner-angular-ui-kit-search-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.ts","../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  input,\n  model,\n  output,\n  computed,\n  ElementRef,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { Subject, debounce, distinctUntilChanged, filter, of, timer } from 'rxjs';\n\nexport type SearchInputSize = 'sm' | 'md' | 'lg';\n\n/** A value travelling through the debounce pipe. */\ninterface SearchEmission {\n  readonly value: string;\n  /** Bypass the debounce (clear button, external writes). */\n  readonly immediate: boolean;\n  /** Only update the dedupe baseline, never reach `searchChange` (external writes). */\n  readonly silent: boolean;\n}\n\nlet nextUniqueId = 0;\n\n/**\n * Search input component with integrated search functionality.\n *\n * Features:\n * - Built-in search icon\n * - Clear button for resetting input\n * - RxJS-based configurable debounce\n * - Multiple size variants (sm, md, lg)\n * - Disabled state support\n * - Submit event on Enter key\n * - Two-way bindable `value` so a parent can preset or reset the query\n *\n * @example\n * ```html\n * <lc-search-input\n *   placeholder=\"Search...\"\n *   [debounceMs]=\"300\"\n *   [(value)]=\"query\"\n *   (searchChange)=\"onSearch($event)\"\n * ></lc-search-input>\n * ```\n */\n@Component({\n  selector: 'lc-search-input',\n  standalone: true,\n  imports: [IconComponent],\n  templateUrl: './search-input.component.html',\n  styleUrls: ['./search-input.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SearchInputComponent {\n  /**\n   * id of the native input (lets a parent `<label for>` point at it).\n   * @default generated\n   */\n  readonly inputId = input<string>(`lc-search-input-${++nextUniqueId}`);\n\n  /**\n   * Placeholder text.\n   * @default 'Search…'\n   */\n  placeholder = input<string>('Search…');\n\n  /**\n   * Size variant.\n   * @default 'md'\n   */\n  size = input<SearchInputSize>('md');\n\n  /**\n   * Debounce delay in milliseconds. 0 means no debounce.\n   * @default 300\n   */\n  debounceMs = input<number>(300);\n\n  /**\n   * Whether the search input is disabled.\n   * @default false\n   */\n  disabled = input<boolean>(false);\n\n  /**\n   * Accessible name of the input.\n   * @default 'Search'\n   */\n  readonly ariaLabel = input<string>();\n\n  /** id(s) of external element(s) labelling the input (wins over `ariaLabel`). */\n  readonly ariaLabelledBy = input<string>();\n\n  /** Accessible name of the clear button. */\n  readonly clearAriaLabel = input('Clear search');\n\n  /**\n   * Current query (two-way bindable). Writing it from outside updates the\n   * field without emitting `searchChange`; `valueChange` emits on every\n   * keystroke (undebounced) and on clear.\n   */\n  readonly value = model<string>('');\n\n  /**\n   * Emitted when the search value changes (debounced).\n   */\n  readonly searchChange = output<string>();\n\n  /**\n   * Emitted when the user presses Enter.\n   */\n  readonly searchSubmit = output<string>();\n\n  protected readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('searchInputEl');\n\n  protected wrapperClasses = computed(() => {\n    return [\n      'search-input',\n      `search-input--${this.size()}`,\n      this.disabled() ? 'search-input--disabled' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  private readonly input$ = new Subject<SearchEmission>();\n  /** Last value pushed into the pipe (by typing, clear or an external write). */\n  private lastPushed = '';\n\n  constructor() {\n    this.input$\n      .pipe(\n        // debounceMs is read per emission, so changing it takes effect immediately.\n        // 0 means \"no debounce\" — emit synchronously rather than on a 0ms timer.\n        debounce(({ immediate }) => {\n          const ms = this.debounceMs();\n          return immediate || ms <= 0 ? of(null) : timer(ms);\n        }),\n        distinctUntilChanged((a, b) => a.value === b.value),\n        filter(({ silent }) => !silent),\n        takeUntilDestroyed(),\n      )\n      .subscribe(({ value }) => this.searchChange.emit(value));\n\n    // A value written from outside is already known to the parent: run it through\n    // the pipe silently so it becomes the dedupe baseline (and cancels a pending\n    // debounce) without echoing a searchChange back.\n    effect(() => {\n      const value = this.value();\n      untracked(() => {\n        if (value !== this.lastPushed) {\n          this.push(value, { immediate: true, silent: true });\n        }\n      });\n    });\n  }\n\n  protected onInput(event: Event): void {\n    const val = (event.target as HTMLInputElement).value;\n    this.value.set(val);\n    this.push(val, { immediate: false, silent: false });\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      this.searchSubmit.emit(this.value());\n    }\n  }\n\n  protected clear(): void {\n    this.value.set('');\n    // immediate: emits '' synchronously through the pipe, exactly once\n    this.push('', { immediate: true, silent: false });\n    this.inputRef()?.nativeElement.focus();\n  }\n\n  private push(value: string, opts: Omit<SearchEmission, 'value'>): void {\n    this.lastPushed = value;\n    this.input$.next({ value, ...opts });\n  }\n}\n","<div [class]=\"wrapperClasses()\">\n  <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n  <input\n    #searchInputEl\n    type=\"search\"\n    class=\"search-input__field\"\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    autocomplete=\"off\"\n    [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() || 'Search'\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n  />\n  @if (value()) {\n    <button\n      type=\"button\"\n      class=\"search-input__clear\"\n      (click)=\"clear()\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"disabled()\"\n    >\n      <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n    </button>\n  }\n</div>\n"],"mappings":"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"}
+{"version":3,"file":"lifecorner-angular-ui-kit-search-input.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.ts","../../../../libs/angular-ui-kit/src/lib/search-input/search-input.component.html"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  effect,\n  input,\n  model,\n  output,\n  computed,\n  ElementRef,\n  untracked,\n  viewChild,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { IconComponent, ɵprovideKitIcons } from '@lifecorner/angular-ui-kit/icon';\nimport { ICON_X_MARK } from '@lifecorner/angular-ui-kit/icons';\nimport { Subject, debounce, distinctUntilChanged, filter, of, timer } from 'rxjs';\n\nexport type SearchInputSize = 'sm' | 'md' | 'lg';\n\n/** A value travelling through the debounce pipe. */\ninterface SearchEmission {\n  readonly value: string;\n  /** Bypass the debounce (clear button, external writes). */\n  readonly immediate: boolean;\n  /** Only update the dedupe baseline, never reach `searchChange` (external writes). */\n  readonly silent: boolean;\n}\n\nlet nextUniqueId = 0;\n\n/**\n * Search input component with integrated search functionality.\n *\n * Features:\n * - Built-in search icon\n * - Clear button for resetting input\n * - RxJS-based configurable debounce\n * - Multiple size variants (sm, md, lg)\n * - Disabled state support\n * - Submit event on Enter key\n * - Two-way bindable `value` so a parent can preset or reset the query\n *\n * @example\n * ```html\n * <lc-search-input\n *   placeholder=\"Search...\"\n *   [debounceMs]=\"300\"\n *   [(value)]=\"query\"\n *   (searchChange)=\"onSearch($event)\"\n * ></lc-search-input>\n * ```\n */\n@Component({\n  selector: 'lc-search-input',\n  standalone: true,\n  imports: [IconComponent],\n  viewProviders: [ɵprovideKitIcons([ICON_X_MARK])],\n  templateUrl: './search-input.component.html',\n  styleUrls: ['./search-input.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class SearchInputComponent {\n  /**\n   * id of the native input (lets a parent `<label for>` point at it).\n   * @default generated\n   */\n  readonly inputId = input<string>(`lc-search-input-${++nextUniqueId}`);\n\n  /**\n   * Placeholder text.\n   * @default 'Search…'\n   */\n  placeholder = input<string>('Search…');\n\n  /**\n   * Size variant.\n   * @default 'md'\n   */\n  size = input<SearchInputSize>('md');\n\n  /**\n   * Debounce delay in milliseconds. 0 means no debounce.\n   * @default 300\n   */\n  debounceMs = input<number>(300);\n\n  /**\n   * Whether the search input is disabled.\n   * @default false\n   */\n  disabled = input<boolean>(false);\n\n  /**\n   * Accessible name of the input.\n   * @default 'Search'\n   */\n  readonly ariaLabel = input<string>();\n\n  /** id(s) of external element(s) labelling the input (wins over `ariaLabel`). */\n  readonly ariaLabelledBy = input<string>();\n\n  /** Accessible name of the clear button. */\n  readonly clearAriaLabel = input('Clear search');\n\n  /**\n   * Current query (two-way bindable). Writing it from outside updates the\n   * field without emitting `searchChange`; `valueChange` emits on every\n   * keystroke (undebounced) and on clear.\n   */\n  readonly value = model<string>('');\n\n  /**\n   * Emitted when the search value changes (debounced).\n   */\n  readonly searchChange = output<string>();\n\n  /**\n   * Emitted when the user presses Enter.\n   */\n  readonly searchSubmit = output<string>();\n\n  protected readonly inputRef = viewChild<ElementRef<HTMLInputElement>>('searchInputEl');\n\n  protected wrapperClasses = computed(() => {\n    return [\n      'search-input',\n      `search-input--${this.size()}`,\n      this.disabled() ? 'search-input--disabled' : '',\n    ]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  private readonly input$ = new Subject<SearchEmission>();\n  /** Last value pushed into the pipe (by typing, clear or an external write). */\n  private lastPushed = '';\n\n  constructor() {\n    this.input$\n      .pipe(\n        // debounceMs is read per emission, so changing it takes effect immediately.\n        // 0 means \"no debounce\" — emit synchronously rather than on a 0ms timer.\n        debounce(({ immediate }) => {\n          const ms = this.debounceMs();\n          return immediate || ms <= 0 ? of(null) : timer(ms);\n        }),\n        distinctUntilChanged((a, b) => a.value === b.value),\n        filter(({ silent }) => !silent),\n        takeUntilDestroyed(),\n      )\n      .subscribe(({ value }) => this.searchChange.emit(value));\n\n    // A value written from outside is already known to the parent: run it through\n    // the pipe silently so it becomes the dedupe baseline (and cancels a pending\n    // debounce) without echoing a searchChange back.\n    effect(() => {\n      const value = this.value();\n      untracked(() => {\n        if (value !== this.lastPushed) {\n          this.push(value, { immediate: true, silent: true });\n        }\n      });\n    });\n  }\n\n  protected onInput(event: Event): void {\n    const val = (event.target as HTMLInputElement).value;\n    this.value.set(val);\n    this.push(val, { immediate: false, silent: false });\n  }\n\n  protected onKeydown(event: KeyboardEvent): void {\n    if (event.key === 'Enter') {\n      this.searchSubmit.emit(this.value());\n    }\n  }\n\n  protected clear(): void {\n    this.value.set('');\n    // immediate: emits '' synchronously through the pipe, exactly once\n    this.push('', { immediate: true, silent: false });\n    this.inputRef()?.nativeElement.focus();\n  }\n\n  private push(value: string, opts: Omit<SearchEmission, 'value'>): void {\n    this.lastPushed = value;\n    this.input$.next({ value, ...opts });\n  }\n}\n","<div [class]=\"wrapperClasses()\">\n  <lc-icon name=\"magnifying-glass\" class=\"search-input__icon\" [decorative]=\"true\"></lc-icon>\n  <input\n    #searchInputEl\n    type=\"search\"\n    class=\"search-input__field\"\n    [id]=\"inputId()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (keydown)=\"onKeydown($event)\"\n    autocomplete=\"off\"\n    [attr.aria-label]=\"ariaLabelledBy() ? null : ariaLabel() || 'Search'\"\n    [attr.aria-labelledby]=\"ariaLabelledBy() || null\"\n  />\n  @if (value()) {\n    <button\n      type=\"button\"\n      class=\"search-input__clear\"\n      (click)=\"clear()\"\n      [attr.aria-label]=\"clearAriaLabel()\"\n      [disabled]=\"disabled()\"\n    >\n      <lc-icon name=\"x-mark\" class=\"search-input__clear-icon\" [decorative]=\"true\"></lc-icon>\n    </button>\n  }\n</div>\n"],"mappings":"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"}

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

@@ -0,0 +1,262 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import { NavigationEnd, Router } from "@angular/router";
+import { filter } from "rxjs";
+import { currentItemParents, currentNavigationItem, navigationLinks, navigationPath, sortNavigationItems } from "@lifecorner/angular-ui-kit/internal/navigation";
+const LABEL_WIDTHS = [
+	"64%",
+	"48%",
+	"72%",
+	"56%"
+];
+var SidenavPlaceholderComponent = class SidenavPlaceholderComponent {
+	router = inject(Router, { optional: true });
+	routerUrl = signal(this.router?.url ?? "/", ...ngDevMode ? [{ debugName: "routerUrl" }] : /* istanbul ignore next */ []);
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	activeRoute = input("", ...ngDevMode ? [{ debugName: "activeRoute" }] : /* istanbul ignore next */ []);
+	collapsed = input(false, ...ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []);
+	isOpen = input(false, ...ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []);
+	width = input("320px", ...ngDevMode ? [{ debugName: "width" }] : /* istanbul ignore next */ []);
+	variant = input("default", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	theme = input("auto", ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
+	position = input("left", ...ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []);
+	showLogo = input(false, ...ngDevMode ? [{ debugName: "showLogo" }] : /* istanbul ignore next */ []);
+	logoSize = input("md", ...ngDevMode ? [{ debugName: "logoSize" }] : /* istanbul ignore next */ []);
+	sortedItems = computed(() => sortNavigationItems(this.items()), ...ngDevMode ? [{ debugName: "sortedItems" }] : /* istanbul ignore next */ []);
+	expanded = computed(() => {
+		const active = this.activeRoute();
+		const path = active === "" && this.router ? navigationPath(this.router, this.routerUrl()) : "";
+		const current = currentNavigationItem(navigationLinks(this.sortedItems()), active, path);
+		return new Set(currentItemParents(this.items(), current));
+	}, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	railClasses = computed(() => {
+		const classes = [
+			"lc-sidenav",
+			`lc-sidenav--${this.position()}`,
+			"lc-sidenav--docked"
+		];
+		if (this.isOpen()) classes.push("lc-sidenav--open");
+		if (this.collapsed()) classes.push("lc-sidenav--collapsed");
+		if (this.theme() !== "auto") classes.push(`lc-sidenav--${this.theme()}`);
+		if (this.variant() === "transparent") classes.push("lc-sidenav--transparent");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "railClasses" }] : /* istanbul ignore next */ []);
+	railWidth = computed(() => this.collapsed() ? "56px" : this.width(), ...ngDevMode ? [{ debugName: "railWidth" }] : /* istanbul ignore next */ []);
+	constructor() {
+		this.router?.events.pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed()).subscribe(() => this.routerUrl.set(this.router?.url ?? "/"));
+	}
+	isExpanded(item) {
+		return this.expanded().has(item.id);
+	}
+	labelWidth(index) {
+		return LABEL_WIDTHS[index % LABEL_WIDTHS.length];
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: SidenavPlaceholderComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: SidenavPlaceholderComponent,
+		isStandalone: true,
+		selector: "lc-sidenav-placeholder",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeRoute: {
+				classPropertyName: "activeRoute",
+				publicName: "activeRoute",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			collapsed: {
+				classPropertyName: "collapsed",
+				publicName: "collapsed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			isOpen: {
+				classPropertyName: "isOpen",
+				publicName: "isOpen",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			width: {
+				classPropertyName: "width",
+				publicName: "width",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			theme: {
+				classPropertyName: "theme",
+				publicName: "theme",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			position: {
+				classPropertyName: "position",
+				publicName: "position",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			showLogo: {
+				classPropertyName: "showLogo",
+				publicName: "showLogo",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			logoSize: {
+				classPropertyName: "logoSize",
+				publicName: "logoSize",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: {
+				"aria-hidden": "true",
+				"inert": ""
+			},
+			properties: { "class.lc-sidenav-container--open": "isOpen()" },
+			classAttribute: "lc-sidenav-container lc-sidenav-container--docked"
+		},
+		ngImport: i0,
+		template: "<!-- The docked lc-sidenav's DOM skeleton: same classes and element types, so\n     the shared box rules (sidenav/_sidenav-docked.scss) give the same boxes.\n     <aside>, <nav>, <a> and <button> become <div>s: the host is inert and\n     aria-hidden, so nothing here is a landmark, a link or a tab stop. -->\n<div [class]=\"railClasses()\" [style.width]=\"railWidth()\">\n  @if (showLogo()) {\n    <div class=\"lc-sidenav__logo\" [class]=\"'lc-sidenav__logo--size-' + logoSize()\">\n      <span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__logo\"></span>\n    </div>\n  }\n\n  @if (items().length > 0) {\n    <div class=\"lc-sidenav__nav lc-sidenav__nav--docked\">\n      @for (item of sortedItems(); track item.id; let i = $index) {\n        @if (item.isSection) {\n          <div class=\"lc-sidenav__section\">\n            <div class=\"lc-sidenav__section-header\">\n              <h2 class=\"lc-sidenav__section-title\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__title\"></span></h2>\n            </div>\n            @if (item.children?.length) {\n              <ul class=\"lc-sidenav__section-items\">\n                @for (child of item.children; track child.id; let j = $index) {\n                  <li>\n                    <div class=\"lc-sidenav__nav-item-row\">\n                      <div class=\"lc-sidenav__nav-item\">\n                        @if (child.icon) {\n                          <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                        }\n                        <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j)\"></span></span>\n                      </div>\n                    </div>\n                    @if (child.children?.length && isExpanded(child)) {\n                      <div class=\"lc-sidenav__nav-children\">\n                        @for (grandchild of child.children; track grandchild.id; let k = $index) {\n                          <div class=\"lc-sidenav__nav-item\">\n                            @if (grandchild.icon) {\n                              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                            }\n                            <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(k + 1)\"></span></span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        } @else {\n          <div class=\"lc-sidenav__nav-item-row\">\n            <div class=\"lc-sidenav__nav-item\">\n              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n              <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(i)\"></span></span>\n            </div>\n          </div>\n          @if (item.children?.length && isExpanded(item)) {\n            <div class=\"lc-sidenav__nav-children\">\n              @for (child of item.children; track child.id; let j = $index) {\n                <div class=\"lc-sidenav__nav-item\">\n                  <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                  <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j + 1)\"></span></span>\n                </div>\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n  <div class=\"lc-sidenav__content lc-sidenav__content--docked\"></div>\n</div>\n",
+		styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}:host{--lc-sidenav-bg: var(--color-sidebar, var(--color-surface));--lc-sidenav-fg: var(--color-text-secondary);--lc-sidenav-border: var(--color-border);--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{background-color:var(--lc-sidenav-bg);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--docked{position:static;height:100%;border-right:1px solid var(--lc-sidenav-border, #e5e7eb)}.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{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-icon{width:22px;height:22px}.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);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__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;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);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)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0}.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-label{flex:1}.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__content{flex:1;padding:1rem}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav--light{--lc-sidenav-bg: #ffffff;--lc-sidenav-fg: #374151;--lc-sidenav-border: #e5e7eb}.lc-sidenav--dark{--lc-sidenav-bg: #070e15;--lc-sidenav-fg: #c4d2d9;--lc-sidenav-border: rgba(255, 255, 255, .08)}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;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)}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}.lc-sidenav-placeholder__shape{display:block;background-color:var(--lc-sidenav-placeholder-fill, color-mix(in srgb, var(--lc-sidenav-fg) 16%, transparent))}@media(forced-colors:active){.lc-sidenav-placeholder__shape{forced-color-adjust:none;background-color:GrayText}}.lc-sidenav-placeholder__icon{border-radius:var(--border-radius-sm)}.lc-sidenav-placeholder__label{height:10px;border-radius:var(--border-radius-full)}.lc-sidenav-placeholder__title{display:inline-block;vertical-align:middle;width:64px;height:8px;border-radius:var(--border-radius-full)}.lc-sidenav-placeholder__logo{width:50%;height:28px;border-radius:var(--border-radius-md)}.lc-sidenav--collapsed .lc-sidenav-placeholder__logo{width:32px;height:32px}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: SidenavPlaceholderComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-sidenav-placeholder",
+			standalone: true,
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: {
+				class: "lc-sidenav-container lc-sidenav-container--docked",
+				"[class.lc-sidenav-container--open]": "isOpen()",
+				"aria-hidden": "true",
+				inert: ""
+			},
+			template: "<!-- The docked lc-sidenav's DOM skeleton: same classes and element types, so\n     the shared box rules (sidenav/_sidenav-docked.scss) give the same boxes.\n     <aside>, <nav>, <a> and <button> become <div>s: the host is inert and\n     aria-hidden, so nothing here is a landmark, a link or a tab stop. -->\n<div [class]=\"railClasses()\" [style.width]=\"railWidth()\">\n  @if (showLogo()) {\n    <div class=\"lc-sidenav__logo\" [class]=\"'lc-sidenav__logo--size-' + logoSize()\">\n      <span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__logo\"></span>\n    </div>\n  }\n\n  @if (items().length > 0) {\n    <div class=\"lc-sidenav__nav lc-sidenav__nav--docked\">\n      @for (item of sortedItems(); track item.id; let i = $index) {\n        @if (item.isSection) {\n          <div class=\"lc-sidenav__section\">\n            <div class=\"lc-sidenav__section-header\">\n              <h2 class=\"lc-sidenav__section-title\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__title\"></span></h2>\n            </div>\n            @if (item.children?.length) {\n              <ul class=\"lc-sidenav__section-items\">\n                @for (child of item.children; track child.id; let j = $index) {\n                  <li>\n                    <div class=\"lc-sidenav__nav-item-row\">\n                      <div class=\"lc-sidenav__nav-item\">\n                        @if (child.icon) {\n                          <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                        }\n                        <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j)\"></span></span>\n                      </div>\n                    </div>\n                    @if (child.children?.length && isExpanded(child)) {\n                      <div class=\"lc-sidenav__nav-children\">\n                        @for (grandchild of child.children; track grandchild.id; let k = $index) {\n                          <div class=\"lc-sidenav__nav-item\">\n                            @if (grandchild.icon) {\n                              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                            }\n                            <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(k + 1)\"></span></span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        } @else {\n          <div class=\"lc-sidenav__nav-item-row\">\n            <div class=\"lc-sidenav__nav-item\">\n              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n              <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(i)\"></span></span>\n            </div>\n          </div>\n          @if (item.children?.length && isExpanded(item)) {\n            <div class=\"lc-sidenav__nav-children\">\n              @for (child of item.children; track child.id; let j = $index) {\n                <div class=\"lc-sidenav__nav-item\">\n                  <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                  <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j + 1)\"></span></span>\n                </div>\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n  <div class=\"lc-sidenav__content lc-sidenav__content--docked\"></div>\n</div>\n",
+			styles: [".lc-sidenav-container{position:relative;z-index:1000}.lc-sidenav-container--docked{position:static;z-index:auto;height:100%}:host{--lc-sidenav-bg: var(--color-sidebar, var(--color-surface));--lc-sidenav-fg: var(--color-text-secondary);--lc-sidenav-border: var(--color-border);--lc-sidenav-rail-width: 56px;--lc-sidenav-nav-padding-x: .5rem;--lc-sidenav-item-padding-x: .625rem}.lc-sidenav{background-color:var(--lc-sidenav-bg);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.lc-sidenav--docked{position:static;height:100%;border-right:1px solid var(--lc-sidenav-border, #e5e7eb)}.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{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-icon{width:22px;height:22px}.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);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__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;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);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)}.lc-sidenav__nav-icon{width:20px;height:20px;flex-shrink:0}.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-label{flex:1}.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__content{flex:1;padding:1rem}.lc-sidenav__content--docked{padding-top:1rem}.lc-sidenav--light{--lc-sidenav-bg: #ffffff;--lc-sidenav-fg: #374151;--lc-sidenav-border: #e5e7eb}.lc-sidenav--dark{--lc-sidenav-bg: #070e15;--lc-sidenav-fg: #c4d2d9;--lc-sidenav-border: rgba(255, 255, 255, .08)}.lc-sidenav--transparent.lc-sidenav--docked{--lc-sidenav-bg: transparent;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)}.lc-sidenav--transparent .lc-sidenav__section-title{padding:0 var(--spacing-4, 1rem)}.lc-sidenav-placeholder__shape{display:block;background-color:var(--lc-sidenav-placeholder-fill, color-mix(in srgb, var(--lc-sidenav-fg) 16%, transparent))}@media(forced-colors:active){.lc-sidenav-placeholder__shape{forced-color-adjust:none;background-color:GrayText}}.lc-sidenav-placeholder__icon{border-radius:var(--border-radius-sm)}.lc-sidenav-placeholder__label{height:10px;border-radius:var(--border-radius-full)}.lc-sidenav-placeholder__title{display:inline-block;vertical-align:middle;width:64px;height:8px;border-radius:var(--border-radius-full)}.lc-sidenav-placeholder__logo{width:50%;height:28px;border-radius:var(--border-radius-md)}.lc-sidenav--collapsed .lc-sidenav-placeholder__logo{width:32px;height:32px}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		activeRoute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeRoute",
+				required: false
+			}]
+		}],
+		collapsed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "collapsed",
+				required: false
+			}]
+		}],
+		isOpen: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "isOpen",
+				required: false
+			}]
+		}],
+		width: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "width",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		theme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "theme",
+				required: false
+			}]
+		}],
+		position: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "position",
+				required: false
+			}]
+		}],
+		showLogo: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showLogo",
+				required: false
+			}]
+		}],
+		logoSize: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logoSize",
+				required: false
+			}]
+		}]
+	}
+});
+export { SidenavPlaceholderComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-sidenav-placeholder.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-sidenav-placeholder.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/sidenav-placeholder/sidenav-placeholder.component.ts","../../../../libs/angular-ui-kit/src/lib/sidenav-placeholder/sidenav-placeholder.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, inject, input, signal } from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { NavigationEnd, Router } from '@angular/router';\nimport { filter } from 'rxjs';\nimport type { NavigationItem } from '@lifecorner/angular-ui-kit/models';\n// Types only: a value import would load lc-sidenav eagerly (AS-18).\nimport type { SidenavPosition, SidenavVariant } from '@lifecorner/angular-ui-kit/sidenav';\nimport {\n  currentItemParents,\n  currentNavigationItem,\n  navigationLinks,\n  navigationPath,\n  sortNavigationItems,\n} from '@lifecorner/angular-ui-kit/internal/navigation';\n\n/** Label bar widths, cycled per row (design 002 §3). */\nconst LABEL_WIDTHS = ['64%', '48%', '72%', '56%'] as const;\n\n/**\n * Stand-in for a docked `lc-sidenav` while it loads (3.6, AS-18): an inert\n * skeleton of the rail with exactly the sidenav's boxes — the same container,\n * width, logo block, rows, sections and expanded groups, built from the same\n * classes and the same box rules — so swapping it for the sidenav moves\n * nothing (CLS 0). Give it the sidenav's bindings.\n *\n * Use it as the `@placeholder` of a `@defer (on viewport)` block. In the app\n * shell the navigation column is hidden below 1024 px, so on a phone the\n * trigger never fires and the sidenav's JavaScript never loads:\n *\n * @example\n * ```html\n * <div shell-nav>\n *   @defer (on viewport) {\n *     <lc-sidenav mode=\"docked\" [isOpen]=\"true\" width=\"100%\" [mobileBreakpoint]=\"0\"\n *                 variant=\"transparent\" ariaLabel=\"Hauptnavigation\" [items]=\"nav\" [activeRoute]=\"url()\" />\n *   } @placeholder {\n *     <lc-sidenav-placeholder [isOpen]=\"true\" width=\"100%\" variant=\"transparent\" [items]=\"nav\" [activeRoute]=\"url()\" />\n *   }\n * </div>\n * ```\n * Import `SidenavComponent` from `@lifecorner/angular-ui-kit/sidenav` and use\n * it only inside the `@defer` block; any other use of it in the same\n * component makes Angular load it eagerly. With a percentage `width`, give\n * the block a container of definite width (the app shell's column is one):\n * in a shrink-to-fit container the sidenav's width follows its label text.\n *\n * Accessibility: the whole placeholder is `aria-hidden=\"true\"` and `inert` —\n * no landmark, no tab stop, nothing announced, so focus can never be inside\n * it when it is swapped. The navigation landmark, the current item\n * (`aria-current`) and the tab order arrive with `lc-sidenav`. Static, no\n * shimmer. The skeleton shapes are filled with\n * `--lc-sidenav-placeholder-fill`; the `--lc-sidenav-*` hooks apply as on\n * `lc-sidenav` (set them on an ancestor of both).\n */\n@Component({\n  selector: 'lc-sidenav-placeholder',\n  standalone: true,\n  templateUrl: './sidenav-placeholder.component.html',\n  styleUrl: './sidenav-placeholder.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-sidenav-container lc-sidenav-container--docked',\n    '[class.lc-sidenav-container--open]': 'isOpen()',\n    'aria-hidden': 'true',\n    inert: '',\n  },\n})\nexport class SidenavPlaceholderComponent {\n  private readonly router = inject(Router, { optional: true });\n  /** The router's URL, as on `lc-sidenav`; read only when `activeRoute` is empty. */\n  private readonly routerUrl = signal(this.router?.url ?? '/');\n\n  /**\n   * Navigation items, the same value as on `lc-sidenav`: they give the number\n   * of rows, the sections and the groups that start expanded.\n   * @default []\n   */\n  readonly items = input<NavigationItem[]>([]);\n\n  /**\n   * The current route, as on `lc-sidenav`. It decides which group starts\n   * expanded; when empty, the router's URL does (3.5 rules).\n   * @default ''\n   */\n  readonly activeRoute = input('');\n\n  /**\n   * The 56 px icon rail. One-way here (a `model` on `lc-sidenav`).\n   * @default false\n   */\n  readonly collapsed = input(false);\n\n  /**\n   * Whether the docked rail is open; a closed one is 0 px wide, as on `lc-sidenav`.\n   * @default false\n   */\n  readonly isOpen = input(false);\n\n  /**\n   * Width of the rail, as on `lc-sidenav`.\n   * @default '320px'\n   */\n  readonly width = input('320px');\n\n  /**\n   * Surface, as on `lc-sidenav`: `default` (the rail) or `transparent` (the\n   * side navigation on the page, 48 px pills).\n   * @default 'default'\n   */\n  readonly variant = input<SidenavVariant>('default');\n\n  /**\n   * Theme, as on `lc-sidenav`.\n   * @default 'auto'\n   */\n  readonly theme = input<'light' | 'dark' | 'auto'>('auto');\n\n  /**\n   * Position, as on `lc-sidenav`.\n   * @default 'left'\n   */\n  readonly position = input<SidenavPosition>('left');\n\n  /**\n   * Reserves the logo block, as `showLogo` on `lc-sidenav`.\n   * @default false\n   */\n  readonly showLogo = input(false);\n\n  /**\n   * Height of the logo block, as on `lc-sidenav`.\n   * @default 'md'\n   */\n  readonly logoSize = input<'xs' | 'sm' | 'md' | 'lg' | 'xl'>('md');\n\n  /** The items in display order. @internal */\n  protected readonly sortedItems = computed(() => sortNavigationItems(this.items()));\n\n  /** The groups `lc-sidenav` opens on load: the parents of the current item. @internal */\n  private readonly expanded = computed(() => {\n    const active = this.activeRoute();\n    const path = active === '' && this.router ? navigationPath(this.router, this.routerUrl()) : '';\n    const current = currentNavigationItem(navigationLinks(this.sortedItems()), active, path);\n    return new Set(currentItemParents(this.items(), current));\n  });\n\n  /** The rail's classes, in `lc-sidenav`'s order, always docked. @internal */\n  protected readonly railClasses = computed(() => {\n    const classes = ['lc-sidenav', `lc-sidenav--${this.position()}`, 'lc-sidenav--docked'];\n    if (this.isOpen()) classes.push('lc-sidenav--open');\n    if (this.collapsed()) classes.push('lc-sidenav--collapsed');\n    if (this.theme() !== 'auto') classes.push(`lc-sidenav--${this.theme()}`);\n    if (this.variant() === 'transparent') classes.push('lc-sidenav--transparent');\n    return classes.join(' ');\n  });\n\n  /** The rail's width, as `lc-sidenav` sets it. @internal */\n  protected readonly railWidth = computed(() => (this.collapsed() ? '56px' : this.width()));\n\n  constructor() {\n    this.router?.events\n      .pipe(\n        filter((event): event is NavigationEnd => event instanceof NavigationEnd),\n        takeUntilDestroyed(),\n      )\n      .subscribe(() => this.routerUrl.set(this.router?.url ?? '/'));\n  }\n\n  /** Whether a group starts expanded. @internal */\n  protected isExpanded(item: NavigationItem): boolean {\n    return this.expanded().has(item.id);\n  }\n\n  /** The label bar's width for the row at `index`. @internal */\n  protected labelWidth(index: number): string {\n    return LABEL_WIDTHS[index % LABEL_WIDTHS.length];\n  }\n}\n","<!-- The docked lc-sidenav's DOM skeleton: same classes and element types, so\n     the shared box rules (sidenav/_sidenav-docked.scss) give the same boxes.\n     <aside>, <nav>, <a> and <button> become <div>s: the host is inert and\n     aria-hidden, so nothing here is a landmark, a link or a tab stop. -->\n<div [class]=\"railClasses()\" [style.width]=\"railWidth()\">\n  @if (showLogo()) {\n    <div class=\"lc-sidenav__logo\" [class]=\"'lc-sidenav__logo--size-' + logoSize()\">\n      <span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__logo\"></span>\n    </div>\n  }\n\n  @if (items().length > 0) {\n    <div class=\"lc-sidenav__nav lc-sidenav__nav--docked\">\n      @for (item of sortedItems(); track item.id; let i = $index) {\n        @if (item.isSection) {\n          <div class=\"lc-sidenav__section\">\n            <div class=\"lc-sidenav__section-header\">\n              <h2 class=\"lc-sidenav__section-title\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__title\"></span></h2>\n            </div>\n            @if (item.children?.length) {\n              <ul class=\"lc-sidenav__section-items\">\n                @for (child of item.children; track child.id; let j = $index) {\n                  <li>\n                    <div class=\"lc-sidenav__nav-item-row\">\n                      <div class=\"lc-sidenav__nav-item\">\n                        @if (child.icon) {\n                          <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                        }\n                        <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j)\"></span></span>\n                      </div>\n                    </div>\n                    @if (child.children?.length && isExpanded(child)) {\n                      <div class=\"lc-sidenav__nav-children\">\n                        @for (grandchild of child.children; track grandchild.id; let k = $index) {\n                          <div class=\"lc-sidenav__nav-item\">\n                            @if (grandchild.icon) {\n                              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                            }\n                            <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(k + 1)\"></span></span>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </li>\n                }\n              </ul>\n            }\n          </div>\n        } @else {\n          <div class=\"lc-sidenav__nav-item-row\">\n            <div class=\"lc-sidenav__nav-item\">\n              <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n              <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(i)\"></span></span>\n            </div>\n          </div>\n          @if (item.children?.length && isExpanded(item)) {\n            <div class=\"lc-sidenav__nav-children\">\n              @for (child of item.children; track child.id; let j = $index) {\n                <div class=\"lc-sidenav__nav-item\">\n                  <span class=\"lc-sidenav__nav-icon lc-sidenav-placeholder__shape lc-sidenav-placeholder__icon\"></span>\n                  <span class=\"lc-sidenav__nav-label\"><span class=\"lc-sidenav-placeholder__shape lc-sidenav-placeholder__label\" [style.width]=\"labelWidth(j + 1)\"></span></span>\n                </div>\n              }\n            </div>\n          }\n        }\n      }\n    </div>\n  }\n\n  <div class=\"lc-sidenav__content lc-sidenav__content--docked\"></div>\n</div>\n"],"mappings":"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"}

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

@@ -6,7 +6,9 @@ import { NavigationEnd, Router, RouterLink } from "@angular/router";
 import { filter } from "rxjs";
 import * as i1 from "@angular/cdk/a11y";
 import { A11yModule } from "@angular/cdk/a11y";
-import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { currentItemParents, currentNavigationItem, navigationLinks, navigationPath, sortNavigationItems } from "@lifecorner/angular-ui-kit/internal/navigation";
+import { IconComponent, ɵprovideKitIcons } from "@lifecorner/angular-ui-kit/icon";
+import { ICON_CHEVRON_DOWN, ICON_CHEVRON_LEFT, ICON_CHEVRON_RIGHT } from "@lifecorner/angular-ui-kit/icons";
 import { BadgeComponent } from "@lifecorner/angular-ui-kit/badge";
 import { LogoComponent } from "@lifecorner/angular-ui-kit/logo";
 var SidenavComponent = class SidenavComponent {
@@ -43,45 +45,11 @@ var SidenavComponent = class SidenavComponent {
 	collapseTitle = input("Collapse sidebar", ...ngDevMode ? [{ debugName: "collapseTitle" }] : /* istanbul ignore next */ []);
 	closeAriaLabel = input("Close navigation", ...ngDevMode ? [{ debugName: "closeAriaLabel" }] : /* istanbul ignore next */ []);
 	expandedItems = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "expandedItems" }] : /* istanbul ignore next */ []);
-	activeChildParents = computed(() => {
-		const current = this.currentItem();
-		const ids = [];
-		if (!current) return ids;
-		for (const item of this.items()) {
-			const collapsibles = item.isSection ? item.children ?? [] : [item];
-			for (const parent of collapsibles) if (parent.children?.includes(current)) ids.push(parent.id);
-		}
-		return ids;
-	}, ...ngDevMode ? [{ debugName: "activeChildParents" }] : /* istanbul ignore next */ []);
-	sortedItems = computed(() => {
-		return [...this.items()].sort((a, b) => a.displayOrder - b.displayOrder);
-	}, ...ngDevMode ? [{ debugName: "sortedItems" }] : /* istanbul ignore next */ []);
-	linkItems = computed(() => {
-		const links = [];
-		for (const item of this.sortedItems()) if (item.isSection) for (const child of item.children ?? []) if (child.children?.length) links.push(...child.children);
-		else links.push(child);
-		else if (item.children?.length) links.push(...item.children);
-		else links.push(item);
-		return links;
-	}, ...ngDevMode ? [{ debugName: "linkItems" }] : /* istanbul ignore next */ []);
-	routerPath = computed(() => {
-		return `/${(this.router.parseUrl(this.routerUrl()).root.children["primary"]?.segments ?? []).map((segment) => segment.path).join("/")}`;
-	}, ...ngDevMode ? [{ debugName: "routerPath" }] : /* istanbul ignore next */ []);
-	currentItem = computed(() => {
-		const links = this.linkItems();
-		const active = this.activeRoute();
-		if (active !== "") return links.find((link) => link.route === active) ?? null;
-		const path = this.routerPath();
-		const exact = links.find((link) => link.route === path);
-		if (exact) return exact;
-		let best = null;
-		for (const link of links) {
-			const route = link.route;
-			if (!route || route === "/" || !path.startsWith(`${route}/`)) continue;
-			if (!best || route.length > best.route.length) best = link;
-		}
-		return best;
-	}, ...ngDevMode ? [{ debugName: "currentItem" }] : /* istanbul ignore next */ []);
+	activeChildParents = computed(() => currentItemParents(this.items(), this.currentItem()), ...ngDevMode ? [{ debugName: "activeChildParents" }] : /* istanbul ignore next */ []);
+	sortedItems = computed(() => sortNavigationItems(this.items()), ...ngDevMode ? [{ debugName: "sortedItems" }] : /* istanbul ignore next */ []);
+	linkItems = computed(() => navigationLinks(this.sortedItems()), ...ngDevMode ? [{ debugName: "linkItems" }] : /* istanbul ignore next */ []);
+	routerPath = computed(() => navigationPath(this.router, this.routerUrl()), ...ngDevMode ? [{ debugName: "routerPath" }] : /* istanbul ignore next */ []);
+	currentItem = computed(() => currentNavigationItem(this.linkItems(), this.activeRoute(), this.activeRoute() === "" ? this.routerPath() : ""), ...ngDevMode ? [{ debugName: "currentItem" }] : /* istanbul ignore next */ []);
 	closed = output();
 	itemClicked = output();
 	itemAction = output();
@@ -447,6 +415,11 @@ var SidenavComponent = class SidenavComponent {
 				]
 			}
 		],
+		viewProviders: [ɵprovideKitIcons([
+			ICON_CHEVRON_DOWN,
+			ICON_CHEVRON_LEFT,
+			ICON_CHEVRON_RIGHT
+		])],
 		changeDetection: i0.ChangeDetectionStrategy.OnPush
 	});
 };
@@ -469,6 +442,11 @@ i0.ɵɵngDeclareClassMetadata({
 				BadgeComponent,
 				LogoComponent
 			],
+			viewProviders: [ɵprovideKitIcons([
+				ICON_CHEVRON_DOWN,
+				ICON_CHEVRON_LEFT,
+				ICON_CHEVRON_RIGHT
+			])],
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			host: {
 				"[class.lc-sidenav-container]": "true",