@lifecorner/angular-ui-kit 3.4.1 → 3.5.0

package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs

@@ -0,0 +1,344 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+import { NgTemplateOutlet } from "@angular/common";
+import * as i1 from "@angular/router";
+import { RouterModule } from "@angular/router";
+import { IconComponent } from "@lifecorner/angular-ui-kit/icon";
+import { BadgeComponent } from "@lifecorner/angular-ui-kit/badge";
+var BottomNavComponent = class BottomNavComponent {
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	activeRoute = input("", ...ngDevMode ? [{ debugName: "activeRoute" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Main navigation", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	variant = input("docked", ...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+	fixed = input(true, ...ngDevMode ? [{ debugName: "fixed" }] : /* istanbul ignore next */ []);
+	maxItems = input(5, ...ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ []);
+	moreLabel = input("More", ...ngDevMode ? [{ debugName: "moreLabel" }] : /* istanbul ignore next */ []);
+	moreIcon = input("dots", ...ngDevMode ? [{ debugName: "moreIcon" }] : /* istanbul ignore next */ []);
+	moreRoute = input("", ...ngDevMode ? [{ debugName: "moreRoute" }] : /* istanbul ignore next */ []);
+	badgeAriaLabel = input("{value} new", ...ngDevMode ? [{ debugName: "badgeAriaLabel" }] : /* istanbul ignore next */ []);
+	reselect = output();
+	moreClick = output();
+	sortedItems = computed(() => [...this.items()].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)), ...ngDevMode ? [{ debugName: "sortedItems" }] : /* istanbul ignore next */ []);
+	activePath = computed(() => this.activeRoute().split(/[?#]/)[0] || "/", ...ngDevMode ? [{ debugName: "activePath" }] : /* istanbul ignore next */ []);
+	entries = computed(() => {
+		const items = this.sortedItems();
+		const max = Math.max(1, Math.floor(this.maxItems()));
+		if (items.length <= max) return items.map((item) => ({
+			item,
+			current: this.matches(item.route),
+			more: false
+		}));
+		const visible = items.slice(0, max - 1);
+		const hidden = items.slice(max - 1);
+		const moreRoute = this.moreRoute();
+		const moreItem = {
+			id: "__more",
+			label: this.moreLabel(),
+			icon: this.moreIcon(),
+			route: moreRoute
+		};
+		const moreCurrent = moreRoute !== "" && this.matches(moreRoute) || hidden.some((item) => this.matches(item.route));
+		return [...visible.map((item) => ({
+			item,
+			current: this.matches(item.route),
+			more: false
+		})), {
+			item: moreItem,
+			current: moreCurrent,
+			more: true
+		}];
+	}, ...ngDevMode ? [{ debugName: "entries" }] : /* istanbul ignore next */ []);
+	navClasses = computed(() => {
+		const classes = ["lc-bottom-nav", `lc-bottom-nav--${this.variant()}`];
+		if (this.fixed()) classes.push("lc-bottom-nav--fixed");
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "navClasses" }] : /* istanbul ignore next */ []);
+	badgeText(item) {
+		return item.badge ? this.badgeAriaLabel().replace("{value}", String(item.badge.value)) : "";
+	}
+	onItemClick(entry) {
+		if (entry.current && !entry.more) this.reselect.emit(entry.item);
+	}
+	onMoreButtonClick() {
+		this.moreClick.emit();
+	}
+	matches(route) {
+		const path = this.activePath();
+		const target = route.split(/[?#]/)[0] || "/";
+		if (target === "/") return path === "/";
+		const normalized = target.endsWith("/") ? target.slice(0, -1) : target;
+		return path === normalized || path.startsWith(`${normalized}/`);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: BottomNavComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: BottomNavComponent,
+		isStandalone: true,
+		selector: "lc-bottom-nav",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			activeRoute: {
+				classPropertyName: "activeRoute",
+				publicName: "activeRoute",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variant: {
+				classPropertyName: "variant",
+				publicName: "variant",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			fixed: {
+				classPropertyName: "fixed",
+				publicName: "fixed",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxItems: {
+				classPropertyName: "maxItems",
+				publicName: "maxItems",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			moreLabel: {
+				classPropertyName: "moreLabel",
+				publicName: "moreLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			moreIcon: {
+				classPropertyName: "moreIcon",
+				publicName: "moreIcon",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			moreRoute: {
+				classPropertyName: "moreRoute",
+				publicName: "moreRoute",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			badgeAriaLabel: {
+				classPropertyName: "badgeAriaLabel",
+				publicName: "badgeAriaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			reselect: "reselect",
+			moreClick: "moreClick"
+		},
+		host: { classAttribute: "lc-bottom-nav-host" },
+		ngImport: i0,
+		template: "<nav [class]=\"navClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  <ul class=\"lc-bottom-nav__list\">\n    @for (entry of entries(); track entry.item.id) {\n      <li class=\"lc-bottom-nav__entry\">\n        @if (entry.more && !entry.item.route) {\n          <button\n            type=\"button\"\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            (click)=\"onMoreButtonClick()\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </button>\n        } @else {\n          <a\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            [routerLink]=\"entry.item.route\"\n            [attr.aria-current]=\"entry.current ? 'page' : null\"\n            (click)=\"onItemClick(entry)\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </a>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n\n<ng-template #itemContent let-entry>\n  <!-- Icon and badge are decoration: the label and the hidden badge text name the link. -->\n  <span class=\"lc-bottom-nav__pill\" aria-hidden=\"true\">\n    <lc-icon [name]=\"entry.item.icon\" size=\"md\" [decorative]=\"true\" class=\"lc-bottom-nav__icon\" />\n    @if (entry.item.badge; as badge) {\n      <span class=\"lc-bottom-nav__badge\">\n        <lc-badge [variant]=\"badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\">{{ badge.value }}</lc-badge>\n      </span>\n    }\n  </span>\n  <span class=\"lc-bottom-nav__label\">{{ entry.item.label }}</span>\n  @if (entry.item.badge) {\n    <span class=\"lc-bottom-nav__sr-only\">{{ badgeText(entry.item) }}</span>\n  }\n</ng-template>\n",
+		styles: [":host{display:block}.lc-bottom-nav{--_fg: var(--lc-bottom-nav-fg, var(--color-text-secondary));--_current-bg: var(--lc-bottom-nav-current-bg, var(--color-surface-selected));--_current-fg: var(--lc-bottom-nav-current-fg, var(--color-on-surface-selected, var(--color-link)));--_hover-bg: var(--lc-bottom-nav-hover-bg, var(--color-surface-hover));box-sizing:border-box;background-color:var(--lc-bottom-nav-bg, var(--_bg));color:var(--_fg)}.lc-bottom-nav--docked{--_bg: var(--color-surface);border-top:1px solid var(--lc-bottom-nav-border, var(--color-border));padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.lc-bottom-nav--floating{--_bg: var(--color-floating-bar-surface, var(--color-surface));border:1px solid var(--lc-bottom-nav-border, var(--color-floating-bar-border, var(--color-border)));border-radius:28px;box-shadow:var(--lc-bottom-nav-shadow, var(--shadow-floating-bar, 0 10px 30px -10px rgba(13, 53, 61, .28)))}.lc-bottom-nav--fixed{position:fixed;z-index:var(--lc-bottom-nav-z, 900)}.lc-bottom-nav--fixed.lc-bottom-nav--docked{left:0;right:0;bottom:0}.lc-bottom-nav--fixed.lc-bottom-nav--floating{left:calc(16px + env(safe-area-inset-left,0px));right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}.lc-bottom-nav__list{display:flex;margin:0;padding:4px 8px;list-style:none}.lc-bottom-nav__entry{display:flex;flex:1 1 0;min-width:0}.lc-bottom-nav__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:min(64px,100%);min-height:64px;padding:4px 0;box-sizing:border-box;border:0;border-radius:20px;background:transparent;color:var(--_fg);font-family:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.lc-bottom-nav__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}@media(hover:hover){.lc-bottom-nav__item:hover:not(.lc-bottom-nav__item--current) .lc-bottom-nav__pill{background-color:var(--_hover-bg)}}.lc-bottom-nav__pill{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:56px;height:32px;border-radius:9999px;background-color:transparent;transition:background-color .2s ease}@media(prefers-reduced-motion:reduce){.lc-bottom-nav__pill{transition:none}}.lc-bottom-nav__icon{display:flex;width:24px;height:24px;color:currentColor}.lc-bottom-nav__label{max-width:calc(100% + 8px);margin-inline:-4px;font-size:var(--font-size-xs, .75rem);line-height:1rem;font-weight:var(--font-weight-medium, 500);text-align:center;overflow-wrap:break-word;hyphens:auto}.lc-bottom-nav__item--current{color:var(--_current-fg)}.lc-bottom-nav__item--current .lc-bottom-nav__pill{background-color:var(--_current-bg)}.lc-bottom-nav__item--current .lc-bottom-nav__label{font-weight:var(--font-weight-bold, 700)}.lc-bottom-nav__item--current .lc-bottom-nav__icon ::ng-deep svg{stroke-width:2.4}.lc-bottom-nav__badge{position:absolute;top:-4px;left:calc(50% + 6px);display:flex;pointer-events:none}.lc-bottom-nav__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media print{.lc-bottom-nav{display:none}}\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: IconComponent,
+				selector: "lc-icon",
+				inputs: [
+					"name",
+					"variant",
+					"size",
+					"color",
+					"ariaLabel",
+					"decorative",
+					"strict"
+				]
+			},
+			{
+				kind: "component",
+				type: BadgeComponent,
+				selector: "lc-badge",
+				inputs: [
+					"variant",
+					"size",
+					"rounded",
+					"dot"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BottomNavComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-bottom-nav",
+			standalone: true,
+			imports: [
+				NgTemplateOutlet,
+				RouterModule,
+				IconComponent,
+				BadgeComponent
+			],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "lc-bottom-nav-host" },
+			template: "<nav [class]=\"navClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  <ul class=\"lc-bottom-nav__list\">\n    @for (entry of entries(); track entry.item.id) {\n      <li class=\"lc-bottom-nav__entry\">\n        @if (entry.more && !entry.item.route) {\n          <button\n            type=\"button\"\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            (click)=\"onMoreButtonClick()\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </button>\n        } @else {\n          <a\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            [routerLink]=\"entry.item.route\"\n            [attr.aria-current]=\"entry.current ? 'page' : null\"\n            (click)=\"onItemClick(entry)\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </a>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n\n<ng-template #itemContent let-entry>\n  <!-- Icon and badge are decoration: the label and the hidden badge text name the link. -->\n  <span class=\"lc-bottom-nav__pill\" aria-hidden=\"true\">\n    <lc-icon [name]=\"entry.item.icon\" size=\"md\" [decorative]=\"true\" class=\"lc-bottom-nav__icon\" />\n    @if (entry.item.badge; as badge) {\n      <span class=\"lc-bottom-nav__badge\">\n        <lc-badge [variant]=\"badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\">{{ badge.value }}</lc-badge>\n      </span>\n    }\n  </span>\n  <span class=\"lc-bottom-nav__label\">{{ entry.item.label }}</span>\n  @if (entry.item.badge) {\n    <span class=\"lc-bottom-nav__sr-only\">{{ badgeText(entry.item) }}</span>\n  }\n</ng-template>\n",
+			styles: [":host{display:block}.lc-bottom-nav{--_fg: var(--lc-bottom-nav-fg, var(--color-text-secondary));--_current-bg: var(--lc-bottom-nav-current-bg, var(--color-surface-selected));--_current-fg: var(--lc-bottom-nav-current-fg, var(--color-on-surface-selected, var(--color-link)));--_hover-bg: var(--lc-bottom-nav-hover-bg, var(--color-surface-hover));box-sizing:border-box;background-color:var(--lc-bottom-nav-bg, var(--_bg));color:var(--_fg)}.lc-bottom-nav--docked{--_bg: var(--color-surface);border-top:1px solid var(--lc-bottom-nav-border, var(--color-border));padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}.lc-bottom-nav--floating{--_bg: var(--color-floating-bar-surface, var(--color-surface));border:1px solid var(--lc-bottom-nav-border, var(--color-floating-bar-border, var(--color-border)));border-radius:28px;box-shadow:var(--lc-bottom-nav-shadow, var(--shadow-floating-bar, 0 10px 30px -10px rgba(13, 53, 61, .28)))}.lc-bottom-nav--fixed{position:fixed;z-index:var(--lc-bottom-nav-z, 900)}.lc-bottom-nav--fixed.lc-bottom-nav--docked{left:0;right:0;bottom:0}.lc-bottom-nav--fixed.lc-bottom-nav--floating{left:calc(16px + env(safe-area-inset-left,0px));right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px))}.lc-bottom-nav__list{display:flex;margin:0;padding:4px 8px;list-style:none}.lc-bottom-nav__entry{display:flex;flex:1 1 0;min-width:0}.lc-bottom-nav__item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:min(64px,100%);min-height:64px;padding:4px 0;box-sizing:border-box;border:0;border-radius:20px;background:transparent;color:var(--_fg);font-family:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.lc-bottom-nav__item:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:-2px}@media(hover:hover){.lc-bottom-nav__item:hover:not(.lc-bottom-nav__item--current) .lc-bottom-nav__pill{background-color:var(--_hover-bg)}}.lc-bottom-nav__pill{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:56px;height:32px;border-radius:9999px;background-color:transparent;transition:background-color .2s ease}@media(prefers-reduced-motion:reduce){.lc-bottom-nav__pill{transition:none}}.lc-bottom-nav__icon{display:flex;width:24px;height:24px;color:currentColor}.lc-bottom-nav__label{max-width:calc(100% + 8px);margin-inline:-4px;font-size:var(--font-size-xs, .75rem);line-height:1rem;font-weight:var(--font-weight-medium, 500);text-align:center;overflow-wrap:break-word;hyphens:auto}.lc-bottom-nav__item--current{color:var(--_current-fg)}.lc-bottom-nav__item--current .lc-bottom-nav__pill{background-color:var(--_current-bg)}.lc-bottom-nav__item--current .lc-bottom-nav__label{font-weight:var(--font-weight-bold, 700)}.lc-bottom-nav__item--current .lc-bottom-nav__icon ::ng-deep svg{stroke-width:2.4}.lc-bottom-nav__badge{position:absolute;top:-4px;left:calc(50% + 6px);display:flex;pointer-events:none}.lc-bottom-nav__sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media print{.lc-bottom-nav{display:none}}\n"]
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		activeRoute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "activeRoute",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: false
+			}]
+		}],
+		fixed: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "fixed",
+				required: false
+			}]
+		}],
+		maxItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxItems",
+				required: false
+			}]
+		}],
+		moreLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moreLabel",
+				required: false
+			}]
+		}],
+		moreIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moreIcon",
+				required: false
+			}]
+		}],
+		moreRoute: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "moreRoute",
+				required: false
+			}]
+		}],
+		badgeAriaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "badgeAriaLabel",
+				required: false
+			}]
+		}],
+		reselect: [{
+			type: i0.Output,
+			args: ["reselect"]
+		}],
+		moreClick: [{
+			type: i0.Output,
+			args: ["moreClick"]
+		}]
+	}
+});
+export { BottomNavComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-bottom-nav.mjs.map

package/fesm2022/lifecorner-angular-ui-kit-bottom-nav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-bottom-nav.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.ts","../../../../libs/angular-ui-kit/src/lib/bottom-nav/bottom-nav.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, output } from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { IconComponent } from '@lifecorner/angular-ui-kit/icon';\nimport { BadgeComponent } from '@lifecorner/angular-ui-kit/badge';\n\n/**\n * A destination in the bottom navigation bar. A subset of `NavigationItem`, so\n * the side navigation's items can be passed as they are (sections and children\n * are ignored).\n */\nexport interface BottomNavItem {\n  /** Unique id. */\n  id: string;\n  /** Visible label, always shown below the icon. */\n  label: string;\n  /** Icon name (`lc-icon`), drawn at 24 px. */\n  icon: string;\n  /** Router path the item links to (`routerLink`). */\n  route: string;\n  /** Sort order; items without one keep their array order. */\n  displayOrder?: number;\n  /** Count or status shown on the icon; read out through `badgeAriaLabel`. */\n  badge?: {\n    /** Text or number inside the badge. */\n    value: string | number;\n    /** Badge colour (`lc-badge` variant). */\n    variant?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';\n  };\n}\n\n/** Surface of the bar: `docked` spans the bottom edge, `floating` is an inset pill. */\nexport type BottomNavVariant = 'docked' | 'floating';\n\n/** One rendered entry: a destination or the overflow entry (\"More\"). */\ninterface BottomNavEntry {\n  item: BottomNavItem;\n  current: boolean;\n  more: boolean;\n}\n\n/**\n * Bottom navigation bar for phones and tablets: the app's main destinations as\n * links in the thumb zone.\n *\n * - Renders `<nav aria-label><ul><li><a routerLink>` — links, not tabs — with\n *   `aria-current=\"page\"` on the current destination.\n * - Items are at least 48 px high and 64 px wide: a 24 px icon over a 12 px\n *   label that is always visible and wraps at large text sizes.\n * - The current item sits on a 56 × 32 px pill in `--color-surface-selected`,\n *   its icon drawn heavier and its label bold in `--color-on-surface-selected`.\n * - The current item follows `activeRoute` by its first path segment, so a\n *   sub-page (`/household/members`) keeps its destination current; `/` only\n *   matches itself. Query and fragment are ignored.\n * - More than `maxItems` destinations: the first `maxItems − 1` stay, the\n *   rest move behind a \"More\" entry (`moreLabel`, `moreIcon`, `moreRoute`);\n *   without `moreRoute` the entry is a button that emits `moreClick`.\n * - Tapping the current item emits `reselect` (scroll the page to the top).\n * - `variant=\"floating\"`: an inset pill 16 px from the sides and 16 px above\n *   the safe-area inset, radius 28 px, elevated. `docked` (default) spans the\n *   bottom edge with a top border and pads the safe-area inset.\n * - Fixed to the viewport by default (`fixed`), below menus and dialogs\n *   (`z-index` 900). Reserve space for it at the end of the page (see\n *   `lc-app-shell`, which does that for you).\n * - Light and dark from the semantic tokens; no hover-only information;\n *   transitions are off under `prefers-reduced-motion`.\n *\n * @example\n * ```html\n * <lc-bottom-nav\n *   variant=\"floating\"\n *   ariaLabel=\"Hauptnavigation\"\n *   [items]=\"[\n *     { id: 'today', label: 'Heute', icon: 'sun', route: '/' },\n *     { id: 'household', label: 'Haushalt', icon: 'home', route: '/household' }\n *   ]\"\n *   [activeRoute]=\"router.url\"\n *   (reselect)=\"scrollToTop()\"\n * />\n * ```\n */\n@Component({\n  selector: 'lc-bottom-nav',\n  standalone: true,\n  imports: [NgTemplateOutlet, RouterModule, IconComponent, BadgeComponent],\n  templateUrl: './bottom-nav.component.html',\n  styleUrl: './bottom-nav.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'lc-bottom-nav-host',\n  },\n})\nexport class BottomNavComponent {\n  /** Destinations, left to right (sorted by `displayOrder` when given). */\n  readonly items = input<readonly BottomNavItem[]>([]);\n\n  /**\n   * The current URL (e.g. `router.url`). The item whose route matches its\n   * first path segment is current; `/` matches only itself.\n   */\n  readonly activeRoute = input('');\n\n  /** Accessible name of the `<nav>` landmark. */\n  readonly ariaLabel = input('Main navigation');\n\n  /** `docked` spans the bottom edge; `floating` is the inset, elevated pill (LK-5). */\n  readonly variant = input<BottomNavVariant>('docked');\n\n  /**\n   * Pin the bar to the bottom of the viewport. Turn off to render it in the\n   * document flow (previews, tests, a custom container).\n   */\n  readonly fixed = input(true);\n\n  /**\n   * Most entries the bar shows. With more destinations the first\n   * `maxItems − 1` stay and the rest go behind the \"More\" entry.\n   */\n  readonly maxItems = input(5);\n\n  /** Label of the overflow entry. */\n  readonly moreLabel = input('More');\n\n  /** Icon of the overflow entry. */\n  readonly moreIcon = input('dots');\n\n  /**\n   * Route of the overflow entry (a page that lists the remaining\n   * destinations). Empty renders the entry as a button that emits `moreClick`.\n   */\n  readonly moreRoute = input('');\n\n  /**\n   * Text read after an item's label when it has a badge; `{value}` is\n   * replaced with the badge value (e.g. \"3 new\").\n   */\n  readonly badgeAriaLabel = input('{value} new');\n\n  /** The current item was tapped again (e.g. scroll the page to the top). */\n  readonly reselect = output<BottomNavItem>();\n\n  /** The overflow entry was tapped while it has no `moreRoute`. */\n  readonly moreClick = output<void>();\n\n  /** Destinations in display order. */\n  private readonly sortedItems = computed(() =>\n    [...this.items()].sort((a, b) => (a.displayOrder ?? 0) - (b.displayOrder ?? 0)),\n  );\n\n  /** Path of `activeRoute` without query and fragment. */\n  private readonly activePath = computed(() => this.activeRoute().split(/[?#]/)[0] || '/');\n\n  /** Entries as rendered: destinations plus, on overflow, the \"More\" entry. */\n  protected readonly entries = computed<BottomNavEntry[]>(() => {\n    const items = this.sortedItems();\n    const max = Math.max(1, Math.floor(this.maxItems()));\n    if (items.length <= max) {\n      return items.map((item) => ({ item, current: this.matches(item.route), more: false }));\n    }\n    const visible = items.slice(0, max - 1);\n    const hidden = items.slice(max - 1);\n    const moreRoute = this.moreRoute();\n    const moreItem: BottomNavItem = {\n      id: '__more',\n      label: this.moreLabel(),\n      icon: this.moreIcon(),\n      route: moreRoute,\n    };\n    const moreCurrent =\n      (moreRoute !== '' && this.matches(moreRoute)) || hidden.some((item) => this.matches(item.route));\n    return [\n      ...visible.map((item) => ({ item, current: this.matches(item.route), more: false })),\n      { item: moreItem, current: moreCurrent, more: true },\n    ];\n  });\n\n  protected readonly navClasses = computed(() => {\n    const classes = ['lc-bottom-nav', `lc-bottom-nav--${this.variant()}`];\n    if (this.fixed()) classes.push('lc-bottom-nav--fixed');\n    return classes.join(' ');\n  });\n\n  /** Visually hidden badge text for screen readers. */\n  protected badgeText(item: BottomNavItem): string {\n    return item.badge ? this.badgeAriaLabel().replace('{value}', String(item.badge.value)) : '';\n  }\n\n  protected onItemClick(entry: BottomNavEntry): void {\n    if (entry.current && !entry.more) {\n      this.reselect.emit(entry.item);\n    }\n  }\n\n  protected onMoreButtonClick(): void {\n    this.moreClick.emit();\n  }\n\n  /** First-segment match: `/household/members` keeps `/household` current. */\n  private matches(route: string): boolean {\n    const path = this.activePath();\n    const target = route.split(/[?#]/)[0] || '/';\n    if (target === '/') return path === '/';\n    const normalized = target.endsWith('/') ? target.slice(0, -1) : target;\n    return path === normalized || path.startsWith(`${normalized}/`);\n  }\n}\n","<nav [class]=\"navClasses()\" [attr.aria-label]=\"ariaLabel()\">\n  <ul class=\"lc-bottom-nav__list\">\n    @for (entry of entries(); track entry.item.id) {\n      <li class=\"lc-bottom-nav__entry\">\n        @if (entry.more && !entry.item.route) {\n          <button\n            type=\"button\"\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            (click)=\"onMoreButtonClick()\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </button>\n        } @else {\n          <a\n            class=\"lc-bottom-nav__item\"\n            [class.lc-bottom-nav__item--current]=\"entry.current\"\n            [routerLink]=\"entry.item.route\"\n            [attr.aria-current]=\"entry.current ? 'page' : null\"\n            (click)=\"onItemClick(entry)\"\n          >\n            <ng-container [ngTemplateOutlet]=\"itemContent\" [ngTemplateOutletContext]=\"{ $implicit: entry }\" />\n          </a>\n        }\n      </li>\n    }\n  </ul>\n</nav>\n\n<ng-template #itemContent let-entry>\n  <!-- Icon and badge are decoration: the label and the hidden badge text name the link. -->\n  <span class=\"lc-bottom-nav__pill\" aria-hidden=\"true\">\n    <lc-icon [name]=\"entry.item.icon\" size=\"md\" [decorative]=\"true\" class=\"lc-bottom-nav__icon\" />\n    @if (entry.item.badge; as badge) {\n      <span class=\"lc-bottom-nav__badge\">\n        <lc-badge [variant]=\"badge.variant || 'default'\" size=\"xs\" [rounded]=\"true\">{{ badge.value }}</lc-badge>\n      </span>\n    }\n  </span>\n  <span class=\"lc-bottom-nav__label\">{{ entry.item.label }}</span>\n  @if (entry.item.badge) {\n    <span class=\"lc-bottom-nav__sr-only\">{{ badgeText(entry.item) }}</span>\n  }\n</ng-template>\n"],"mappings":"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"}

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

@@ -0,0 +1,191 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input, output } from "@angular/core";
+import { NgClass } from "@angular/common";
+import * as i1 from "@angular/router";
+import { RouterModule } from "@angular/router";
+var BreadcrumbsComponent = class BreadcrumbsComponent {
+	items = input([], ...ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []);
+	separator = input("/", ...ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []);
+	maxItems = input(0, ...ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	ariaLabel = input("Breadcrumbs", ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	itemClick = output();
+	breadcrumbClasses = computed(() => {
+		const classes = ["lc-breadcrumbs"];
+		classes.push(`lc-breadcrumbs--${this.size()}`);
+		return classes.join(" ");
+	}, ...ngDevMode ? [{ debugName: "breadcrumbClasses" }] : /* istanbul ignore next */ []);
+	visibleItems = computed(() => {
+		const allItems = this.items();
+		const max = this.maxItems();
+		if (max === 0 || allItems.length <= max) return allItems;
+		const result = [];
+		const lastIndex = allItems.length - 1;
+		result.push(allItems[0]);
+		result.push({ label: "..." });
+		result.push(allItems[lastIndex]);
+		return result;
+	}, ...ngDevMode ? [{ debugName: "visibleItems" }] : /* istanbul ignore next */ []);
+	isLastItem(index) {
+		return index === this.visibleItems().length - 1;
+	}
+	isEllipsis(item) {
+		return item.label === "...";
+	}
+	onItemClick(item) {
+		this.itemClick.emit(item);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: BreadcrumbsComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.2",
+		type: BreadcrumbsComponent,
+		isStandalone: true,
+		selector: "lc-breadcrumbs",
+		inputs: {
+			items: {
+				classPropertyName: "items",
+				publicName: "items",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			separator: {
+				classPropertyName: "separator",
+				publicName: "separator",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			maxItems: {
+				classPropertyName: "maxItems",
+				publicName: "maxItems",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { itemClick: "itemClick" },
+		ngImport: i0,
+		template: "@if (items().length > 0) {\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <ol [ngClass]=\"breadcrumbClasses()\">\n      @for (item of visibleItems(); track item; let i = $index) {\n        <li class=\"lc-breadcrumbs__item\">\n          @if (isLastItem(i)) {\n            <span class=\"lc-breadcrumbs__current\" aria-current=\"page\">\n              {{ item.label }}\n            </span>\n          } @else if (isEllipsis(item)) {\n            <span class=\"lc-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n              {{ item.label }}\n            </span>\n          } @else if (item.url) {\n            <a\n              [routerLink]=\"item.url\"\n              class=\"lc-breadcrumbs__link\"\n            >\n              {{ item.label }}\n            </a>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"lc-breadcrumbs__link lc-breadcrumbs__link--button\"\n              (click)=\"onItemClick(item)\"\n            >\n              {{ item.label }}\n            </button>\n          }\n          \n          @if (!isLastItem(i)) {\n            <span class=\"lc-breadcrumbs__separator\" aria-hidden=\"true\">\n              {{ separator() }}\n            </span>\n          }\n        </li>\n      }\n    </ol>\n    \n    <!-- Support for additional content projection -->\n    <ng-content></ng-content>\n  </nav>\n}\n",
+		styles: [".lc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}.lc-breadcrumbs--sm{font-size:var(--font-size-xs);gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-breadcrumbs--sm .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--md{font-size:var(--font-size-sm);gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs--lg{font-size:var(--font-size-base);gap:var(--spacing-3)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-3)}.lc-breadcrumbs__item{display:flex;align-items:center;list-style:none}.lc-breadcrumbs__link{color:var(--color-primary-600);text-decoration:none;transition:color var(--animation-duration-base) var(--animation-timing-ease),background-color var(--animation-duration-base) var(--animation-timing-ease);border-radius:var(--border-radius-sm);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__link:hover{color:var(--color-primary-700);background-color:var(--color-primary-50);text-decoration:underline}.lc-breadcrumbs__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-breadcrumbs__link:active{color:var(--color-primary-800)}.lc-breadcrumbs__link--button{appearance:none;background:none;border:none;font:inherit;cursor:pointer}.lc-breadcrumbs__current{color:var(--color-text-primary);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__separator{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none}.lc-breadcrumbs__ellipsis{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}@media(max-width:768px){.lc-breadcrumbs--md{font-size:var(--font-size-xs);gap:var(--spacing-1)}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--lg{font-size:var(--font-size-sm);gap:var(--spacing-2)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs__link,.lc-breadcrumbs__current,.lc-breadcrumbs__ellipsis{padding:var(--spacing-0-5) var(--spacing-1);margin:calc(var(--spacing-0-5) * -1) calc(var(--spacing-1) * -1)}}.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:150px}}\n"],
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgClass,
+				selector: "[ngClass]",
+				inputs: ["class", "ngClass"]
+			},
+			{
+				kind: "ngmodule",
+				type: RouterModule
+			},
+			{
+				kind: "directive",
+				type: i1.RouterLink,
+				selector: "[routerLink]",
+				inputs: [
+					"target",
+					"queryParams",
+					"fragment",
+					"queryParamsHandling",
+					"state",
+					"info",
+					"relativeTo",
+					"preserveFragment",
+					"skipLocationChange",
+					"replaceUrl",
+					"browserUrl",
+					"routerLink"
+				]
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: BreadcrumbsComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "lc-breadcrumbs",
+			imports: [NgClass, RouterModule],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "@if (items().length > 0) {\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <ol [ngClass]=\"breadcrumbClasses()\">\n      @for (item of visibleItems(); track item; let i = $index) {\n        <li class=\"lc-breadcrumbs__item\">\n          @if (isLastItem(i)) {\n            <span class=\"lc-breadcrumbs__current\" aria-current=\"page\">\n              {{ item.label }}\n            </span>\n          } @else if (isEllipsis(item)) {\n            <span class=\"lc-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n              {{ item.label }}\n            </span>\n          } @else if (item.url) {\n            <a\n              [routerLink]=\"item.url\"\n              class=\"lc-breadcrumbs__link\"\n            >\n              {{ item.label }}\n            </a>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"lc-breadcrumbs__link lc-breadcrumbs__link--button\"\n              (click)=\"onItemClick(item)\"\n            >\n              {{ item.label }}\n            </button>\n          }\n          \n          @if (!isLastItem(i)) {\n            <span class=\"lc-breadcrumbs__separator\" aria-hidden=\"true\">\n              {{ separator() }}\n            </span>\n          }\n        </li>\n      }\n    </ol>\n    \n    <!-- Support for additional content projection -->\n    <ng-content></ng-content>\n  </nav>\n}\n",
+			styles: [".lc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;list-style:none;padding:0;margin:0}.lc-breadcrumbs--sm{font-size:var(--font-size-xs);gap:var(--lc-density-gap-xs, var(--spacing-1))}.lc-breadcrumbs--sm .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--md{font-size:var(--font-size-sm);gap:var(--lc-density-gap-sm, var(--spacing-2))}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs--lg{font-size:var(--font-size-base);gap:var(--spacing-3)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-3)}.lc-breadcrumbs__item{display:flex;align-items:center;list-style:none}.lc-breadcrumbs__link{color:var(--color-primary-600);text-decoration:none;transition:color var(--animation-duration-base) var(--animation-timing-ease),background-color var(--animation-duration-base) var(--animation-timing-ease);border-radius:var(--border-radius-sm);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__link:hover{color:var(--color-primary-700);background-color:var(--color-primary-50);text-decoration:underline}.lc-breadcrumbs__link:focus-visible{outline:2px solid var(--color-primary-500);outline-offset:2px}.lc-breadcrumbs__link:active{color:var(--color-primary-800)}.lc-breadcrumbs__link--button{appearance:none;background:none;border:none;font:inherit;cursor:pointer}.lc-breadcrumbs__current{color:var(--color-text-primary);font-weight:var(--font-weight-medium);padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}.lc-breadcrumbs__separator{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none}.lc-breadcrumbs__ellipsis{color:var(--color-text-tertiary);-webkit-user-select:none;user-select:none;pointer-events:none;padding:var(--spacing-1) var(--spacing-2);margin:calc(var(--spacing-1) * -1) calc(var(--spacing-2) * -1)}@media(max-width:768px){.lc-breadcrumbs--md{font-size:var(--font-size-xs);gap:var(--spacing-1)}.lc-breadcrumbs--md .lc-breadcrumbs__separator{margin:0 var(--spacing-1)}.lc-breadcrumbs--lg{font-size:var(--font-size-sm);gap:var(--spacing-2)}.lc-breadcrumbs--lg .lc-breadcrumbs__separator{margin:0 var(--spacing-2)}.lc-breadcrumbs__link,.lc-breadcrumbs__current,.lc-breadcrumbs__ellipsis{padding:var(--spacing-0-5) var(--spacing-1);margin:calc(var(--spacing-0-5) * -1) calc(var(--spacing-1) * -1)}}.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media(max-width:768px){.lc-breadcrumbs__link,.lc-breadcrumbs__current{max-width:150px}}\n"]
+		}]
+	}],
+	propDecorators: {
+		items: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "items",
+				required: false
+			}]
+		}],
+		separator: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "separator",
+				required: false
+			}]
+		}],
+		maxItems: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxItems",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		itemClick: [{
+			type: i0.Output,
+			args: ["itemClick"]
+		}]
+	}
+});
+export { BreadcrumbsComponent };
+
+//# sourceMappingURL=lifecorner-angular-ui-kit-breadcrumbs.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lifecorner-angular-ui-kit-breadcrumbs.mjs","names":[],"sources":["../../../../libs/angular-ui-kit/src/lib/breadcrumbs/breadcrumbs.component.ts","../../../../libs/angular-ui-kit/src/lib/breadcrumbs/breadcrumbs.component.html"],"sourcesContent":["import { Component, input, output, computed, ChangeDetectionStrategy } from '@angular/core';\nimport { NgClass } from '@angular/common';\nimport { RouterModule } from '@angular/router';\n\nexport interface BreadcrumbItem {\n  label: string;\n  url?: string;\n  /** Optional stable identifier, useful when handling `itemClick`. */\n  id?: string;\n}\n\nexport type BreadcrumbSize = 'sm' | 'md' | 'lg';\n\n@Component({\n  selector: 'lc-breadcrumbs',\n  imports: [NgClass, RouterModule],\n  templateUrl: './breadcrumbs.component.html',\n  styleUrls: ['./breadcrumbs.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\n/**\n * Breadcrumbs component for hierarchical navigation.\n *\n * Features:\n * - Configurable separator character\n * - Ellipsis collapse for long paths with maxItems\n * - Multiple size variants (sm, md, lg)\n * - Router link support for navigation items\n * - Items without `url` render as buttons and emit `itemClick` (for in-memory\n *   state navigation instead of routing)\n * - Accessible with ARIA breadcrumb landmark\n *\n * @example\n * ```html\n * <lc-breadcrumbs [items]=\"[{label: 'Home', url: '/'}, {label: 'Settings'}]\" />\n *\n * <!-- state-based navigation without routes -->\n * <lc-breadcrumbs\n *   [items]=\"[{label: 'Root', id: 'root'}, {label: 'Child', id: 'c1'}]\"\n *   (itemClick)=\"activate($event)\"\n * />\n * ```\n */\nexport class BreadcrumbsComponent {\n  readonly items = input<BreadcrumbItem[]>([]);\n  readonly separator = input('/');\n  readonly maxItems = input(0);\n  readonly size = input<BreadcrumbSize>('md');\n  readonly ariaLabel = input('Breadcrumbs');\n\n  /**\n   * Emitted when an item without `url` is activated. Items with `url` keep\n   * their link navigation and do not emit.\n   */\n  readonly itemClick = output<BreadcrumbItem>();\n\n  // Computed CSS classes\n  breadcrumbClasses = computed(() => {\n    const classes = ['lc-breadcrumbs'];\n    classes.push(`lc-breadcrumbs--${this.size()}`);\n    return classes.join(' ');\n  });\n\n  // Computed visible items with ellipsis support\n  visibleItems = computed(() => {\n    const allItems = this.items();\n    const max = this.maxItems();\n\n    // If maxItems is 0 or items fit, show all\n    if (max === 0 || allItems.length <= max) {\n      return allItems;\n    }\n\n    // Show first item + ellipsis + last item(s)\n    const result: BreadcrumbItem[] = [];\n    const lastIndex = allItems.length - 1;\n\n    // Always show first item\n    result.push(allItems[0]!);\n\n    // Add ellipsis\n    result.push({ label: '...' });\n\n    // Always show last item\n    result.push(allItems[lastIndex]!);\n\n    return result;\n  });\n\n  // Helper to check if item is last\n  isLastItem(index: number): boolean {\n    return index === this.visibleItems().length - 1;\n  }\n\n  // Helper to check if item is ellipsis\n  isEllipsis(item: BreadcrumbItem): boolean {\n    return item.label === '...';\n  }\n\n  // Handle activation of an item without url\n  onItemClick(item: BreadcrumbItem): void {\n    this.itemClick.emit(item);\n  }\n}\n","@if (items().length > 0) {\n  <nav [attr.aria-label]=\"ariaLabel()\">\n    <ol [ngClass]=\"breadcrumbClasses()\">\n      @for (item of visibleItems(); track item; let i = $index) {\n        <li class=\"lc-breadcrumbs__item\">\n          @if (isLastItem(i)) {\n            <span class=\"lc-breadcrumbs__current\" aria-current=\"page\">\n              {{ item.label }}\n            </span>\n          } @else if (isEllipsis(item)) {\n            <span class=\"lc-breadcrumbs__ellipsis\" aria-hidden=\"true\">\n              {{ item.label }}\n            </span>\n          } @else if (item.url) {\n            <a\n              [routerLink]=\"item.url\"\n              class=\"lc-breadcrumbs__link\"\n            >\n              {{ item.label }}\n            </a>\n          } @else {\n            <button\n              type=\"button\"\n              class=\"lc-breadcrumbs__link lc-breadcrumbs__link--button\"\n              (click)=\"onItemClick(item)\"\n            >\n              {{ item.label }}\n            </button>\n          }\n          \n          @if (!isLastItem(i)) {\n            <span class=\"lc-breadcrumbs__separator\" aria-hidden=\"true\">\n              {{ separator() }}\n            </span>\n          }\n        </li>\n      }\n    </ol>\n    \n    <!-- Support for additional content projection -->\n    <ng-content></ng-content>\n  </nav>\n}\n"],"mappings":";;;;;AA2CA,IAAa,uBAAb,MAAa,qBAAoB;CACtB,QAAQ,MAAwB,CAAA,GAAG,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;CACnC,YAAY,MAAM,KAAI,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CACtB,WAAW,MAAM,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;CACnB,OAAO,MAAsB,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAClC,YAAY,MAAM,eAAc,GAAA,YAAA,CAAA,EAAA,WAAA,YAAA,CAAA,+BAAA,CAAA,CAAA;CAMhC,YAAY,OAAM;CAG3B,oBAAoB,eAAc;EAChC,MAAM,UAAU,CAAC,gBAAgB;EACjC,QAAQ,KAAK,mBAAmB,KAAK,KAAI,GAAI;EAC7C,OAAO,QAAQ,KAAK,GAAG;CACzB,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,oBAAA,CAAA,+BAAA,CAAA,CAAA;CAGF,eAAe,eAAc;EAC3B,MAAM,WAAW,KAAK,MAAK;EAC3B,MAAM,MAAM,KAAK,SAAQ;EAGzB,IAAI,QAAQ,KAAK,SAAS,UAAU,KAClC,OAAO;EAIT,MAAM,SAA2B,CAAA;EACjC,MAAM,YAAY,SAAS,SAAS;EAGpC,OAAO,KAAK,SAAS,EAAG;EAGxB,OAAO,KAAK,EAAE,OAAO,MAAK,CAAE;EAG5B,OAAO,KAAK,SAAS,UAAW;EAEhC,OAAO;CACT,GAAE,GAAA,YAAA,CAAA,EAAA,WAAA,eAAA,CAAA,+BAAA,CAAA,CAAA;CAGF,WAAW,OAAa;EACtB,OAAO,UAAU,KAAK,aAAY,CAAE,CAAC,SAAS;CAChD;CAGA,WAAW,MAAoB;EAC7B,OAAO,KAAK,UAAU;CACxB;CAGA,YAAY,MAAoB;EAC9B,KAAK,UAAU,KAAK,IAAI;CAC1B;CA3DW,OAAA,OAAA,GAAA,mBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,UAAA;EAAA,MAAA;EAAoB,MAAA,CAAA;EAAA,QAAA,GAAA,gBAAA;CAAA,CAAA;CAApB,OAAA,OAAA,GAAA,qBAAA;EAAA,YAAA;EAAA,SAAA;EAAA,MAAA;EAAoB,cAAA;EAAA,UAAA;EAAA,QAAA;GAAA,OAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,UAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,MAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;GAAA,WAAA;IAAA,mBAAA;IAAA,YAAA;IAAA,UAAA;IAAA,YAAA;IAAA,mBAAA;GAAA;EAAA;EAAA,SAAA,EAAA,WAAA,YAAA;EAAA,UAAA;EAAA,UC3CjC;EA2CA,QAAA,CAAA,2mFAAA;EAAA,cAAA;GAAA;IAAA,MAAA;IAAA,MD5BY;IAAO,UAAA;IAAA,QAAA,CAAA,SAAA,SAAA;GAAA;GAAA;IAAA,MAAA;IAAA,MAAE;GAAY;GAAA;IAAA,MAAA;IAAA,MAAA,GAAA;IAAA,UAAA;IAAA,QAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;KAAA;IAAA;GAAA;EAAA;EAAA,iBAAA,GAAA,wBAAA;CAAA,CAAA;;AA4BpB,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAoB,YAAA,CAAA;EA9BhC,MAAA;EACW,MAAA,CAAA;GAAA,UAAA;GAAgB,SACjB,CAAC,SAAS,YAAY;GAAC,iBAGf,wBAAwB;GAAM,UAAA;GAAA,QAAA,CAAA,2mFAAA;EAAA,CAAA"}