@malva-ui/core 0.1.12

package/esm2022/bottom-nav/lib/bottom-nav/bottom-nav.js

@@ -0,0 +1,155 @@
+import { ChangeDetectionStrategy, Component, computed, input, output, ViewEncapsulation, } from '@angular/core';
+import { Router, RouterLink, RouterLinkActive } from '@angular/router';
+import { inject } from '@angular/core';
+import { LucideDynamicIcon } from '@lucide/angular';
+import { MlvMenu, MlvMenuItem, MlvMenuTrigger } from '@malva-ui/core/menu';
+import { MlvListItem, MlvListItemPrefix } from '@malva-ui/core/list';
+import { MLV_BOTTOM_NAV_I18N } from '@malva-ui/i18n';
+import * as i0 from "@angular/core";
+/** Maximum visible items before overflow is triggered. */
+const MAX_VISIBLE = 5;
+/**
+ * Fixed bottom navigation bar for mobile contexts.
+ * Renders up to 5 items; overflows into a synthetic "More" item
+ * that opens a menu with the hidden items.
+ *
+ * Supports two activation modes:
+ * - **Router mode** (default): active state is driven by `routerLinkActive`.
+ *   Items are rendered as `<a>` elements with `routerLink`.
+ * - **Managed mode**: when `activeIndex` is provided, active state is
+ *   controlled by the consumer. Items are rendered as `<button>` elements
+ *   and clicks emit on the `itemClick` output.
+ *
+ * Also supports vertical/horizontal stacking, active-only label visibility,
+ * and per-item disabled state.
+ *
+ * @example
+ * <mlv-bottom-nav *mlvBreakpointDown="'md'" [items]="navItems" />
+ *
+ * @example
+ * <mlv-bottom-nav [items]="navItems" [activeIndex]="selected" (itemClick)="selected = $event" />
+ */
+export class MlvBottomNav {
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_BOTTOM_NAV_I18N);
+    /**
+     * Navigation items to display.
+     * Up to 5 items are shown; if more than 5 are provided,
+     * the first 4 are rendered and a "More" button opens a menu with the overflow items.
+     */
+    items = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /** Accessible label for the nav landmark. */
+    ariaLabel = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * MlvLayout direction for icon and label within each item.
+     * - `'vertical'` (default): icon on top, label below.
+     * - `'horizontal'`: icon on the left, label on the right, vertically centered.
+     */
+    stacking = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "stacking" }] : /* istanbul ignore next */ []));
+    /**
+     * Controls when item labels are visible.
+     * - `'always'` (default): labels are always shown on all items.
+     * - `'active-only'`: labels are hidden by default and smoothly revealed
+     *   only on the active (current route) item. The "More" button label
+     *   is always visible regardless of this setting.
+     */
+    labelVisibility = input('always', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "labelVisibility" }] : /* istanbul ignore next */ []));
+    /**
+     * Index of the active item in managed mode.
+     * When provided (even as `0`), the component switches to managed mode:
+     * items render as `<button>` elements instead of `<a routerLink>` and
+     * the active class is driven by this index rather than the router.
+     */
+    activeIndex = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Emits the index of the clicked item in managed mode.
+     * Not emitted for disabled items or in router mode.
+     */
+    itemClick = output();
+    /** @private Router for programmatic navigation from overflow menu items. */
+    _router = inject(Router);
+    /**
+     * @protected Whether the component is in managed (non-router) mode.
+     * True when `activeIndex` has been explicitly provided.
+     */
+    _isManaged = computed(() => this.activeIndex() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isManaged" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Items displayed as direct nav links in the bar.
+     * All items if total <= MAX_VISIBLE, otherwise the first (MAX_VISIBLE - 1).
+     */
+    _displayItems = computed(() => {
+        const all = this.items();
+        if (all.length <= MAX_VISIBLE)
+            return all;
+        return all.slice(0, MAX_VISIBLE - 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_displayItems" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Items that overflow into the "More" menu.
+     * Empty if total <= MAX_VISIBLE.
+     */
+    _overflowItems = computed(() => {
+        const all = this.items();
+        if (all.length <= MAX_VISIBLE)
+            return [];
+        return all.slice(MAX_VISIBLE - 1);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_overflowItems" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the bar has overflow items requiring a "More" button.
+     */
+    _hasOverflow = computed(() => this._overflowItems().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasOverflow" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Handles click on a visible item in managed mode.
+     * Emits the item's index on `itemClick`.
+     */
+    _onItemClick(index) {
+        this.itemClick.emit(index);
+    }
+    /**
+     * @protected Handles click on an overflow menu item.
+     * In managed mode, emits the global index on `itemClick`.
+     * In router mode, navigates to the item's route.
+     */
+    _onOverflowItemClick(overflowIndex) {
+        if (this._isManaged()) {
+            const globalIndex = this._displayItems().length + overflowIndex;
+            this.itemClick.emit(globalIndex);
+        }
+        else {
+            const item = this._overflowItems()[overflowIndex];
+            if (item?.route) {
+                this._router.navigateByUrl(item.route);
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBottomNav, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvBottomNav, isStandalone: true, selector: "mlv-bottom-nav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, stacking: { classPropertyName: "stacking", publicName: "stacking", isSignal: true, isRequired: false, transformFunction: null }, labelVisibility: { classPropertyName: "labelVisibility", publicName: "labelVisibility", isSignal: true, isRequired: false, transformFunction: null }, activeIndex: { classPropertyName: "activeIndex", publicName: "activeIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { attributes: { "role": "navigation" }, properties: { "class.mlv-bottom-nav--horizontal": "stacking() === \"horizontal\"", "class.mlv-bottom-nav--label-active-only": "labelVisibility() === \"active-only\"", "attr.aria-label": "ariaLabel() || _i18n().navigation" }, classAttribute: "mlv-bottom-nav" }, ngImport: i0, template: "<!--\n  Inner container is a plain <div>, NOT a <nav>: the host element already\n  carries role=\"navigation\" + aria-label, so a nested <nav> would create a\n  duplicate navigation landmark.\n-->\n<div class=\"mlv-bottom-nav__bar\">\n  @for (item of _displayItems(); track item.label; let i = $index) { @if\n  (!_isManaged() && !item.disabled) {\n  <a\n    class=\"mlv-bottom-nav__item\"\n    [routerLink]=\"item.route\"\n    routerLinkActive=\"mlv-bottom-nav__item--active\"\n    ariaCurrentWhenActive=\"page\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n  >\n    <svg\n      class=\"mlv-bottom-nav__icon\"\n      [lucideIcon]=\"item.icon\"\n      size=\"20\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"mlv-bottom-nav__label\">{{ item.label }}</span>\n  </a>\n  } @else {\n  <button\n    type=\"button\"\n    class=\"mlv-bottom-nav__item\"\n    [class.mlv-bottom-nav__item--active]=\"_isManaged() && i === activeIndex()\"\n    [class.mlv-bottom-nav__item--disabled]=\"!!item.disabled\"\n    [disabled]=\"item.disabled || null\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-current]=\"_isManaged() && i === activeIndex() ? 'page' : null\"\n    (click)=\"_onItemClick(i)\"\n  >\n    <svg\n      class=\"mlv-bottom-nav__icon\"\n      [lucideIcon]=\"item.icon\"\n      size=\"20\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"mlv-bottom-nav__label\">{{ item.label }}</span>\n  </button>\n  } } @if (_hasOverflow()) {\n  <button\n    type=\"button\"\n    class=\"mlv-bottom-nav__item mlv-bottom-nav__more\"\n    [mlvMenuTrigger]=\"overflowMenu\"\n    [attr.aria-label]=\"_i18n().moreOptions\"\n  >\n    <svg\n      class=\"mlv-bottom-nav__icon\"\n      lucideIcon=\"ellipsis\"\n      size=\"20\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"mlv-bottom-nav__label mlv-bottom-nav__label--always\"\n      >{{ _i18n().more }}</span\n    >\n  </button>\n\n  <mlv-menu #overflowMenu [label]=\"_i18n().moreMenu\">\n    @for (item of _overflowItems(); track item.label; let j = $index) {\n    <mlv-list-item mlvMenuItem (itemClick)=\"_onOverflowItemClick(j)\">\n      <svg\n        mlvListItemPrefix\n        [lucideIcon]=\"item.icon\"\n        size=\"16\"\n        aria-hidden=\"true\"\n      />\n      {{ item.label }}\n    </mlv-list-item>\n    }\n  </mlv-menu>\n  }\n</div>\n", styles: [".mlv-bottom-nav{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-bottom-nav *{box-sizing:border-box}.mlv-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:var(--mlv-z-sticky, 200);background:var(--mlv-background-raised);border-top:var(--mlv-stroke-width) solid var(--mlv-border-subtle);padding-bottom:env(safe-area-inset-bottom)}.mlv-bottom-nav__bar{display:flex;justify-content:space-around;align-items:center;height:3.5rem}.mlv-bottom-nav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;text-decoration:none;color:var(--mlv-text-secondary);min-width:3rem;min-height:2.75rem;padding:.25rem .75rem;border-radius:var(--mlv-radius-m);transition:color var(--mlv-duration-fast) var(--mlv-ease-default),background-color var(--mlv-duration-fast) var(--mlv-ease-default),transform var(--mlv-duration-fast) var(--mlv-ease-default);cursor:pointer;border:none;background:none;font:inherit}.mlv-bottom-nav__item:hover{background-color:var(--mlv-background-subtle);color:var(--mlv-text-primary)}.mlv-bottom-nav__item:active{background-color:var(--mlv-background-subtle);color:var(--mlv-text-primary);transform:scale(.95)}.mlv-bottom-nav__item--active,.mlv-bottom-nav__item--active:hover{color:var(--mlv-text-action)}.mlv-bottom-nav__item--disabled{opacity:var(--mlv-disabled-opacity);pointer-events:none;cursor:default}.mlv-bottom-nav__item:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-bottom-nav__icon{display:flex;align-items:center;justify-content:center;color:inherit}.mlv-bottom-nav__label{font-size:var(--mlv-font-size-xs);line-height:var(--mlv-line-height-tight);white-space:nowrap;color:inherit}.mlv-bottom-nav--horizontal .mlv-bottom-nav__item{flex-direction:row;gap:.25rem}.mlv-bottom-nav--label-active-only:not(.mlv-bottom-nav--horizontal) .mlv-bottom-nav__label{max-height:0;opacity:0;overflow:hidden;transition:max-height var(--mlv-duration-fast) var(--mlv-ease-default),opacity var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-bottom-nav--label-active-only:not(.mlv-bottom-nav--horizontal) .mlv-bottom-nav__item--active .mlv-bottom-nav__label{max-height:1.25rem;opacity:1}.mlv-bottom-nav--label-active-only.mlv-bottom-nav--horizontal .mlv-bottom-nav__label{max-width:0;opacity:0;overflow:hidden;transition:max-width var(--mlv-duration-fast) var(--mlv-ease-default),opacity var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-bottom-nav--label-active-only.mlv-bottom-nav--horizontal .mlv-bottom-nav__item--active .mlv-bottom-nav__label{max-width:6rem;opacity:1}.mlv-bottom-nav--label-active-only .mlv-bottom-nav__label--always{max-height:none;max-width:none;opacity:1;overflow:visible}@media(prefers-reduced-motion:reduce){.mlv-bottom-nav,.mlv-bottom-nav *,.mlv-bottom-nav:before,.mlv-bottom-nav:after,[class^=mlv-bottom-nav__],[class*=\" mlv-bottom-nav__\"],[class^=mlv-bottom-nav--],[class*=\" mlv-bottom-nav--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }, { kind: "component", type: MlvMenu, selector: "mlv-menu", inputs: ["label", "mlvDensity"], outputs: ["closed"] }, { kind: "directive", type: MlvMenuItem, selector: "mlv-list-item[mlvMenuItem]", inputs: ["disabled"], outputs: ["itemClick"] }, { kind: "directive", type: MlvMenuTrigger, selector: "[mlvMenuTrigger]", inputs: ["mlvMenuTrigger", "isSubmenuTrigger", "menuTriggerDisabled"], outputs: ["menuOpened", "menuClosed"] }, { kind: "component", type: MlvListItem, selector: "mlv-list-item", inputs: ["itemRole", "unread", "accent"] }, { kind: "directive", type: MlvListItemPrefix, selector: "[mlvListItemPrefix]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBottomNav, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-bottom-nav', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        RouterLink,
+                        RouterLinkActive,
+                        LucideDynamicIcon,
+                        MlvMenu,
+                        MlvMenuItem,
+                        MlvMenuTrigger,
+                        MlvListItem,
+                        MlvListItemPrefix,
+                    ], host: {
+                        class: 'mlv-bottom-nav',
+                        '[class.mlv-bottom-nav--horizontal]': 'stacking() === "horizontal"',
+                        '[class.mlv-bottom-nav--label-active-only]': 'labelVisibility() === "active-only"',
+                        role: 'navigation',
+                        '[attr.aria-label]': 'ariaLabel() || _i18n().navigation',
+                    }, template: "<!--\n  Inner container is a plain <div>, NOT a <nav>: the host element already\n  carries role=\"navigation\" + aria-label, so a nested <nav> would create a\n  duplicate navigation landmark.\n-->\n<div class=\"mlv-bottom-nav__bar\">\n  @for (item of _displayItems(); track item.label; let i = $index) { @if\n  (!_isManaged() && !item.disabled) {\n  <a\n    class=\"mlv-bottom-nav__item\"\n    [routerLink]=\"item.route\"\n    routerLinkActive=\"mlv-bottom-nav__item--active\"\n    ariaCurrentWhenActive=\"page\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n  >\n    <svg\n      class=\"mlv-bottom-nav__icon\"\n      [lucideIcon]=\"item.icon\"\n      size=\"20\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"mlv-bottom-nav__label\">{{ item.label }}</span>\n  </a>\n  } @else {\n  <button\n    type=\"button\"\n    class=\"mlv-bottom-nav__item\"\n    [class.mlv-bottom-nav__item--active]=\"_isManaged() && i === activeIndex()\"\n    [class.mlv-bottom-nav__item--disabled]=\"!!item.disabled\"\n    [disabled]=\"item.disabled || null\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-current]=\"_isManaged() && i === activeIndex() ? 'page' : null\"\n    (click)=\"_onItemClick(i)\"\n  >\n    <svg\n      class=\"mlv-bottom-nav__icon\"\n      [lucideIcon]=\"item.icon\"\n      size=\"20\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"mlv-bottom-nav__label\">{{ item.label }}</span>\n  </button>\n  } } @if (_hasOverflow()) {\n  <button\n    type=\"button\"\n    class=\"mlv-bottom-nav__item mlv-bottom-nav__more\"\n    [mlvMenuTrigger]=\"overflowMenu\"\n    [attr.aria-label]=\"_i18n().moreOptions\"\n  >\n    <svg\n      class=\"mlv-bottom-nav__icon\"\n      lucideIcon=\"ellipsis\"\n      size=\"20\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"mlv-bottom-nav__label mlv-bottom-nav__label--always\"\n      >{{ _i18n().more }}</span\n    >\n  </button>\n\n  <mlv-menu #overflowMenu [label]=\"_i18n().moreMenu\">\n    @for (item of _overflowItems(); track item.label; let j = $index) {\n    <mlv-list-item mlvMenuItem (itemClick)=\"_onOverflowItemClick(j)\">\n      <svg\n        mlvListItemPrefix\n        [lucideIcon]=\"item.icon\"\n        size=\"16\"\n        aria-hidden=\"true\"\n      />\n      {{ item.label }}\n    </mlv-list-item>\n    }\n  </mlv-menu>\n  }\n</div>\n", styles: [".mlv-bottom-nav{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-bottom-nav *{box-sizing:border-box}.mlv-bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:var(--mlv-z-sticky, 200);background:var(--mlv-background-raised);border-top:var(--mlv-stroke-width) solid var(--mlv-border-subtle);padding-bottom:env(safe-area-inset-bottom)}.mlv-bottom-nav__bar{display:flex;justify-content:space-around;align-items:center;height:3.5rem}.mlv-bottom-nav__item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;text-decoration:none;color:var(--mlv-text-secondary);min-width:3rem;min-height:2.75rem;padding:.25rem .75rem;border-radius:var(--mlv-radius-m);transition:color var(--mlv-duration-fast) var(--mlv-ease-default),background-color var(--mlv-duration-fast) var(--mlv-ease-default),transform var(--mlv-duration-fast) var(--mlv-ease-default);cursor:pointer;border:none;background:none;font:inherit}.mlv-bottom-nav__item:hover{background-color:var(--mlv-background-subtle);color:var(--mlv-text-primary)}.mlv-bottom-nav__item:active{background-color:var(--mlv-background-subtle);color:var(--mlv-text-primary);transform:scale(.95)}.mlv-bottom-nav__item--active,.mlv-bottom-nav__item--active:hover{color:var(--mlv-text-action)}.mlv-bottom-nav__item--disabled{opacity:var(--mlv-disabled-opacity);pointer-events:none;cursor:default}.mlv-bottom-nav__item:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-bottom-nav__icon{display:flex;align-items:center;justify-content:center;color:inherit}.mlv-bottom-nav__label{font-size:var(--mlv-font-size-xs);line-height:var(--mlv-line-height-tight);white-space:nowrap;color:inherit}.mlv-bottom-nav--horizontal .mlv-bottom-nav__item{flex-direction:row;gap:.25rem}.mlv-bottom-nav--label-active-only:not(.mlv-bottom-nav--horizontal) .mlv-bottom-nav__label{max-height:0;opacity:0;overflow:hidden;transition:max-height var(--mlv-duration-fast) var(--mlv-ease-default),opacity var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-bottom-nav--label-active-only:not(.mlv-bottom-nav--horizontal) .mlv-bottom-nav__item--active .mlv-bottom-nav__label{max-height:1.25rem;opacity:1}.mlv-bottom-nav--label-active-only.mlv-bottom-nav--horizontal .mlv-bottom-nav__label{max-width:0;opacity:0;overflow:hidden;transition:max-width var(--mlv-duration-fast) var(--mlv-ease-default),opacity var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-bottom-nav--label-active-only.mlv-bottom-nav--horizontal .mlv-bottom-nav__item--active .mlv-bottom-nav__label{max-width:6rem;opacity:1}.mlv-bottom-nav--label-active-only .mlv-bottom-nav__label--always{max-height:none;max-width:none;opacity:1;overflow:visible}@media(prefers-reduced-motion:reduce){.mlv-bottom-nav,.mlv-bottom-nav *,.mlv-bottom-nav:before,.mlv-bottom-nav:after,[class^=mlv-bottom-nav__],[class*=\" mlv-bottom-nav__\"],[class^=mlv-bottom-nav--],[class*=\" mlv-bottom-nav--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], stacking: [{ type: i0.Input, args: [{ isSignal: true, alias: "stacking", required: false }] }], labelVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelVisibility", required: false }] }], activeIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeIndex", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+//# sourceMappingURL=bottom-nav.js.map

package/esm2022/bottom-nav/lib/bottom-nav/bottom-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bottom-nav.js","sourceRoot":"","sources":["../../../../../../../libs/core/bottom-nav/src/lib/bottom-nav/bottom-nav.ts","../../../../../../../libs/core/bottom-nav/src/lib/bottom-nav/bottom-nav.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  input,\n  output,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { Router, RouterLink, RouterLinkActive } from '@angular/router';\nimport { inject } from '@angular/core';\nimport { LucideDynamicIcon } from '@lucide/angular';\nimport type { MlvNavItem } from '@malva-ui/cdk/utils';\nimport { MlvMenu, MlvMenuItem, MlvMenuTrigger } from '@malva-ui/core/menu';\nimport { MlvListItem, MlvListItemPrefix } from '@malva-ui/core/list';\nimport { MLV_BOTTOM_NAV_I18N } from '@malva-ui/i18n';\n\n/** Maximum visible items before overflow is triggered. */\nconst MAX_VISIBLE = 5;\n\n/** MlvLayout direction for icon and label within each navigation item. */\nexport type MlvBottomNavStacking = 'vertical' | 'horizontal';\n\n/** Controls when item labels are visible. */\nexport type MlvBottomNavLabelVisibility = 'always' | 'active-only';\n\n/**\n * Fixed bottom navigation bar for mobile contexts.\n * Renders up to 5 items; overflows into a synthetic \"More\" item\n * that opens a menu with the hidden items.\n *\n * Supports two activation modes:\n * - **Router mode** (default): active state is driven by `routerLinkActive`.\n *   Items are rendered as `<a>` elements with `routerLink`.\n * - **Managed mode**: when `activeIndex` is provided, active state is\n *   controlled by the consumer. Items are rendered as `<button>` elements\n *   and clicks emit on the `itemClick` output.\n *\n * Also supports vertical/horizontal stacking, active-only label visibility,\n * and per-item disabled state.\n *\n * @example\n * <mlv-bottom-nav *mlvBreakpointDown=\"'md'\" [items]=\"navItems\" />\n *\n * @example\n * <mlv-bottom-nav [items]=\"navItems\" [activeIndex]=\"selected\" (itemClick)=\"selected = $event\" />\n */\n@Component({\n  selector: 'mlv-bottom-nav',\n  templateUrl: './bottom-nav.html',\n  styleUrl: './bottom-nav.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [\n    RouterLink,\n    RouterLinkActive,\n    LucideDynamicIcon,\n    MlvMenu,\n    MlvMenuItem,\n    MlvMenuTrigger,\n    MlvListItem,\n    MlvListItemPrefix,\n  ],\n  host: {\n    class: 'mlv-bottom-nav',\n    '[class.mlv-bottom-nav--horizontal]': 'stacking() === \"horizontal\"',\n    '[class.mlv-bottom-nav--label-active-only]':\n      'labelVisibility() === \"active-only\"',\n    role: 'navigation',\n    '[attr.aria-label]': 'ariaLabel() || _i18n().navigation',\n  },\n})\nexport class MlvBottomNav {\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_BOTTOM_NAV_I18N);\n\n  /**\n   * Navigation items to display.\n   * Up to 5 items are shown; if more than 5 are provided,\n   * the first 4 are rendered and a \"More\" button opens a menu with the overflow items.\n   */\n  readonly items = input.required<MlvNavItem[]>();\n\n  /** Accessible label for the nav landmark. */\n  readonly ariaLabel = input<string>();\n\n  /**\n   * MlvLayout direction for icon and label within each item.\n   * - `'vertical'` (default): icon on top, label below.\n   * - `'horizontal'`: icon on the left, label on the right, vertically centered.\n   */\n  readonly stacking = input<MlvBottomNavStacking>('vertical');\n\n  /**\n   * Controls when item labels are visible.\n   * - `'always'` (default): labels are always shown on all items.\n   * - `'active-only'`: labels are hidden by default and smoothly revealed\n   *   only on the active (current route) item. The \"More\" button label\n   *   is always visible regardless of this setting.\n   */\n  readonly labelVisibility = input<MlvBottomNavLabelVisibility>('always');\n\n  /**\n   * Index of the active item in managed mode.\n   * When provided (even as `0`), the component switches to managed mode:\n   * items render as `<button>` elements instead of `<a routerLink>` and\n   * the active class is driven by this index rather than the router.\n   */\n  readonly activeIndex = input<number>();\n\n  /**\n   * Emits the index of the clicked item in managed mode.\n   * Not emitted for disabled items or in router mode.\n   */\n  readonly itemClick = output<number>();\n\n  /** @private Router for programmatic navigation from overflow menu items. */\n  private readonly _router = inject(Router);\n\n  /**\n   * @protected Whether the component is in managed (non-router) mode.\n   * True when `activeIndex` has been explicitly provided.\n   */\n  protected readonly _isManaged = computed(\n    () => this.activeIndex() !== undefined,\n  );\n\n  /**\n   * @protected Items displayed as direct nav links in the bar.\n   * All items if total <= MAX_VISIBLE, otherwise the first (MAX_VISIBLE - 1).\n   */\n  protected readonly _displayItems = computed(() => {\n    const all = this.items();\n    if (all.length <= MAX_VISIBLE) return all;\n    return all.slice(0, MAX_VISIBLE - 1);\n  });\n\n  /**\n   * @protected Items that overflow into the \"More\" menu.\n   * Empty if total <= MAX_VISIBLE.\n   */\n  protected readonly _overflowItems = computed(() => {\n    const all = this.items();\n    if (all.length <= MAX_VISIBLE) return [];\n    return all.slice(MAX_VISIBLE - 1);\n  });\n\n  /**\n   * @protected Whether the bar has overflow items requiring a \"More\" button.\n   */\n  protected readonly _hasOverflow = computed(\n    () => this._overflowItems().length > 0,\n  );\n\n  /**\n   * @protected Handles click on a visible item in managed mode.\n   * Emits the item's index on `itemClick`.\n   */\n  protected _onItemClick(index: number): void {\n    this.itemClick.emit(index);\n  }\n\n  /**\n   * @protected Handles click on an overflow menu item.\n   * In managed mode, emits the global index on `itemClick`.\n   * In router mode, navigates to the item's route.\n   */\n  protected _onOverflowItemClick(overflowIndex: number): void {\n    if (this._isManaged()) {\n      const globalIndex = this._displayItems().length + overflowIndex;\n      this.itemClick.emit(globalIndex);\n    } else {\n      const item = this._overflowItems()[overflowIndex];\n      if (item?.route) {\n        this._router.navigateByUrl(item.route);\n      }\n    }\n  }\n}\n","<!--\n  Inner container is a plain <div>, NOT a <nav>: the host element already\n  carries role=\"navigation\" + aria-label, so a nested <nav> would create a\n  duplicate navigation landmark.\n-->\n<div class=\"mlv-bottom-nav__bar\">\n  @for (item of _displayItems(); track item.label; let i = $index) { @if\n  (!_isManaged() && !item.disabled) {\n  <a\n    class=\"mlv-bottom-nav__item\"\n    [routerLink]=\"item.route\"\n    routerLinkActive=\"mlv-bottom-nav__item--active\"\n    ariaCurrentWhenActive=\"page\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n  >\n    <svg\n      class=\"mlv-bottom-nav__icon\"\n      [lucideIcon]=\"item.icon\"\n      size=\"20\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"mlv-bottom-nav__label\">{{ item.label }}</span>\n  </a>\n  } @else {\n  <button\n    type=\"button\"\n    class=\"mlv-bottom-nav__item\"\n    [class.mlv-bottom-nav__item--active]=\"_isManaged() && i === activeIndex()\"\n    [class.mlv-bottom-nav__item--disabled]=\"!!item.disabled\"\n    [disabled]=\"item.disabled || null\"\n    [attr.aria-disabled]=\"item.disabled || null\"\n    [attr.aria-current]=\"_isManaged() && i === activeIndex() ? 'page' : null\"\n    (click)=\"_onItemClick(i)\"\n  >\n    <svg\n      class=\"mlv-bottom-nav__icon\"\n      [lucideIcon]=\"item.icon\"\n      size=\"20\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"mlv-bottom-nav__label\">{{ item.label }}</span>\n  </button>\n  } } @if (_hasOverflow()) {\n  <button\n    type=\"button\"\n    class=\"mlv-bottom-nav__item mlv-bottom-nav__more\"\n    [mlvMenuTrigger]=\"overflowMenu\"\n    [attr.aria-label]=\"_i18n().moreOptions\"\n  >\n    <svg\n      class=\"mlv-bottom-nav__icon\"\n      lucideIcon=\"ellipsis\"\n      size=\"20\"\n      aria-hidden=\"true\"\n    />\n    <span class=\"mlv-bottom-nav__label mlv-bottom-nav__label--always\"\n      >{{ _i18n().more }}</span\n    >\n  </button>\n\n  <mlv-menu #overflowMenu [label]=\"_i18n().moreMenu\">\n    @for (item of _overflowItems(); track item.label; let j = $index) {\n    <mlv-list-item mlvMenuItem (itemClick)=\"_onOverflowItemClick(j)\">\n      <svg\n        mlvListItemPrefix\n        [lucideIcon]=\"item.icon\"\n        size=\"16\"\n        aria-hidden=\"true\"\n      />\n      {{ item.label }}\n    </mlv-list-item>\n    }\n  </mlv-menu>\n  }\n</div>\n"]}

package/esm2022/bottom-nav/malva-ui-core-bottom-nav.js

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=malva-ui-core-bottom-nav.js.map

package/esm2022/bottom-nav/malva-ui-core-bottom-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-bottom-nav.js","sourceRoot":"","sources":["../../../../../libs/core/bottom-nav/src/malva-ui-core-bottom-nav.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,SAAS,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"]}

package/esm2022/breadcrumb/index.js

@@ -0,0 +1,6 @@
+export * from './lib/breadcrumb/breadcrumb';
+export * from './lib/breadcrumb/breadcrumb-item';
+export * from './lib/breadcrumb/breadcrumb-item-host';
+export * from './lib/breadcrumb/breadcrumb-separator';
+export * from './lib/breadcrumb/breadcrumb.types';
+//# sourceMappingURL=index.js.map

package/esm2022/breadcrumb/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/breadcrumb/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,kCAAkC,CAAC;AACjD,cAAc,uCAAuC,CAAC;AACtD,cAAc,uCAAuC,CAAC;AACtD,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './lib/breadcrumb/breadcrumb';\nexport * from './lib/breadcrumb/breadcrumb-item';\nexport * from './lib/breadcrumb/breadcrumb-item-host';\nexport * from './lib/breadcrumb/breadcrumb-separator';\nexport * from './lib/breadcrumb/breadcrumb.types';\n"]}

package/esm2022/breadcrumb/lib/breadcrumb/breadcrumb-item-host.js

@@ -0,0 +1,43 @@
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Attribute directive that can be applied to any `<a>` or `<li>` element as an
+ * alternative to using the `<mlv-breadcrumb-item>` component. Applies the
+ * correct BEM classes without replacing the native element.
+ *
+ * Use this when you need to preserve native element semantics (e.g., when
+ * working with a router `<a>` element inside a list item, or when composing
+ * with third-party link components).
+ *
+ * @example Applied to a native anchor inside an `<li>`
+ * ```html
+ * <nav mlvBreadcrumb>
+ *   <ol class="mlv-breadcrumb__list">
+ *     <li mlvBreadcrumbItem class="mlv-breadcrumb__item">
+ *       <a mlvBreadcrumbItem class="mlv-breadcrumb__link" href="/">Home</a>
+ *     </li>
+ *   </ol>
+ * </nav>
+ * ```
+ *
+ * @example Applied to a `<li>` element
+ * ```html
+ * <li mlvBreadcrumbItem>
+ *   <a class="mlv-breadcrumb__link" href="/products">Products</a>
+ * </li>
+ * ```
+ */
+export class MlvBreadcrumbItemHost {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBreadcrumbItemHost, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvBreadcrumbItemHost, isStandalone: true, selector: "[mlvBreadcrumbItem]", host: { classAttribute: "mlv-breadcrumb__item" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBreadcrumbItemHost, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvBreadcrumbItem]',
+                    host: {
+                        class: 'mlv-breadcrumb__item',
+                    },
+                }]
+        }] });
+//# sourceMappingURL=breadcrumb-item-host.js.map

package/esm2022/breadcrumb/lib/breadcrumb/breadcrumb-item-host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item-host.js","sourceRoot":"","sources":["../../../../../../../libs/core/breadcrumb/src/lib/breadcrumb/breadcrumb-item-host.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAE1C;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAOH,MAAM,OAAO,qBAAqB;uGAArB,qBAAqB;2FAArB,qBAAqB;;2FAArB,qBAAqB;kBANjC,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,IAAI,EAAE;wBACJ,KAAK,EAAE,sBAAsB;qBAC9B;iBACF","sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Attribute directive that can be applied to any `<a>` or `<li>` element as an\n * alternative to using the `<mlv-breadcrumb-item>` component. Applies the\n * correct BEM classes without replacing the native element.\n *\n * Use this when you need to preserve native element semantics (e.g., when\n * working with a router `<a>` element inside a list item, or when composing\n * with third-party link components).\n *\n * @example Applied to a native anchor inside an `<li>`\n * ```html\n * <nav mlvBreadcrumb>\n *   <ol class=\"mlv-breadcrumb__list\">\n *     <li mlvBreadcrumbItem class=\"mlv-breadcrumb__item\">\n *       <a mlvBreadcrumbItem class=\"mlv-breadcrumb__link\" href=\"/\">Home</a>\n *     </li>\n *   </ol>\n * </nav>\n * ```\n *\n * @example Applied to a `<li>` element\n * ```html\n * <li mlvBreadcrumbItem>\n *   <a class=\"mlv-breadcrumb__link\" href=\"/products\">Products</a>\n * </li>\n * ```\n */\n@Directive({\n  selector: '[mlvBreadcrumbItem]',\n  host: {\n    class: 'mlv-breadcrumb__item',\n  },\n})\nexport class MlvBreadcrumbItemHost {}\n"]}

package/esm2022/breadcrumb/lib/breadcrumb/breadcrumb-item.js

@@ -0,0 +1,110 @@
+import { ChangeDetectionStrategy, Component, input, ViewEncapsulation, } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import * as i0 from "@angular/core";
+/**
+ * Individual breadcrumb item component.
+ *
+ * Renders a navigable link (via `routerLink` or `href`) or plain text when
+ * the item is the current page or is disabled.
+ *
+ * The last item in the breadcrumb list should have `current` set to `true`,
+ * which adds `aria-current="page"` and renders non-interactive text.
+ *
+ * @example Basic usage
+ * ```html
+ * <mlv-breadcrumb-item href="/home">Home</mlv-breadcrumb-item>
+ * <mlv-breadcrumb-item [routerLink]="['/products']">Products</mlv-breadcrumb-item>
+ * <mlv-breadcrumb-item [current]="true">Widget Pro</mlv-breadcrumb-item>
+ * ```
+ */
+export class MlvBreadcrumbItem {
+    /**
+     * Angular router link for navigation.
+     * Supports string or string array (same as `[routerLink]`).
+     */
+    routerLink = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
+    /**
+     * Standard `href` for anchor-based navigation.
+     * Use when not using Angular Router.
+     */
+    href = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, marks this item as the current page.
+     * Renders as non-interactive text with `aria-current="page"`.
+     */
+    current = input(false, { ...(ngDevMode ? { debugName: "current" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * When `true`, disables navigation and renders the item as plain text.
+     */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvBreadcrumbItem, isStandalone: true, selector: "mlv-breadcrumb-item", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mlv-breadcrumb__item" }, ngImport: i0, template: `
+    @if (current() || disabled()) {
+      <span
+        class="mlv-breadcrumb__link mlv-breadcrumb__link--current"
+        [class.mlv-breadcrumb__link--disabled]="disabled()"
+        [attr.aria-current]="current() ? 'page' : null"
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </span>
+    } @else if (routerLink()) {
+      <a class="mlv-breadcrumb__link" [routerLink]="routerLink()">
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else if (href()) {
+      <a class="mlv-breadcrumb__link" [href]="href()">
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else {
+      <span class="mlv-breadcrumb__link">
+        <ng-container [ngTemplateOutlet]="content" />
+      </span>
+    }
+    <ng-template #content><ng-content /></ng-template>
+  `, isInline: true, dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBreadcrumbItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'mlv-breadcrumb-item',
+                    imports: [RouterLink, NgTemplateOutlet],
+                    // A single <ng-content> lives inside #content and is stamped into whichever
+                    // branch is active. Declaring <ng-content> once per branch would leave every
+                    // branch except the first-declared one empty (Angular projects to the first
+                    // matching slot only), which silently dropped projected labels.
+                    template: `
+    @if (current() || disabled()) {
+      <span
+        class="mlv-breadcrumb__link mlv-breadcrumb__link--current"
+        [class.mlv-breadcrumb__link--disabled]="disabled()"
+        [attr.aria-current]="current() ? 'page' : null"
+      >
+        <ng-container [ngTemplateOutlet]="content" />
+      </span>
+    } @else if (routerLink()) {
+      <a class="mlv-breadcrumb__link" [routerLink]="routerLink()">
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else if (href()) {
+      <a class="mlv-breadcrumb__link" [href]="href()">
+        <ng-container [ngTemplateOutlet]="content" />
+      </a>
+    } @else {
+      <span class="mlv-breadcrumb__link">
+        <ng-container [ngTemplateOutlet]="content" />
+      </span>
+    }
+    <ng-template #content><ng-content /></ng-template>
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        class: 'mlv-breadcrumb__item',
+                    },
+                }]
+        }], propDecorators: { routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], href: [{ type: i0.Input, args: [{ isSignal: true, alias: "href", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+//# sourceMappingURL=breadcrumb-item.js.map

package/esm2022/breadcrumb/lib/breadcrumb/breadcrumb-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.js","sourceRoot":"","sources":["../../../../../../../libs/core/breadcrumb/src/lib/breadcrumb/breadcrumb-item.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,KAAK,EACL,iBAAiB,GAClB,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;;AAE9D;;;;;;;;;;;;;;;GAeG;AAsCH,MAAM,OAAO,iBAAiB;IAC5B;;;OAGG;IACM,UAAU,GAAG,KAAK,CAA2B,IAAI;mFAAC,CAAC;IAE5D;;;OAGG;IACM,IAAI,GAAG,KAAK,CAAgB,IAAI;6EAAC,CAAC;IAE3C;;;OAGG;IACM,OAAO,GAAG,KAAK,CAAwB,KAAK,+EACnD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;OAEG;IACM,QAAQ,GAAG,KAAK,CAAwB,KAAK,gFACpD,SAAS,EAAE,qBAAqB,GAChC,CAAC;uGA1BQ,iBAAiB;2FAAjB,iBAAiB,woBA9BlB;;;;;;;;;;;;;;;;;;;;;;;GAuBT,4DA5BS,UAAU,kPAAE,gBAAgB;;2FAmC3B,iBAAiB;kBArC7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,qBAAqB;oBAC/B,OAAO,EAAE,CAAC,UAAU,EAAE,gBAAgB,CAAC;oBACvC,4EAA4E;oBAC5E,6EAA6E;oBAC7E,4EAA4E;oBAC5E,gEAAgE;oBAChE,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;GAuBT;oBACD,aAAa,EAAE,iBAAiB,CAAC,IAAI;oBACrC,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,IAAI,EAAE;wBACJ,KAAK,EAAE,sBAAsB;qBAC9B;iBACF","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\n\n/**\n * Individual breadcrumb item component.\n *\n * Renders a navigable link (via `routerLink` or `href`) or plain text when\n * the item is the current page or is disabled.\n *\n * The last item in the breadcrumb list should have `current` set to `true`,\n * which adds `aria-current=\"page\"` and renders non-interactive text.\n *\n * @example Basic usage\n * ```html\n * <mlv-breadcrumb-item href=\"/home\">Home</mlv-breadcrumb-item>\n * <mlv-breadcrumb-item [routerLink]=\"['/products']\">Products</mlv-breadcrumb-item>\n * <mlv-breadcrumb-item [current]=\"true\">Widget Pro</mlv-breadcrumb-item>\n * ```\n */\n@Component({\n  selector: 'mlv-breadcrumb-item',\n  imports: [RouterLink, NgTemplateOutlet],\n  // A single <ng-content> lives inside #content and is stamped into whichever\n  // branch is active. Declaring <ng-content> once per branch would leave every\n  // branch except the first-declared one empty (Angular projects to the first\n  // matching slot only), which silently dropped projected labels.\n  template: `\n    @if (current() || disabled()) {\n      <span\n        class=\"mlv-breadcrumb__link mlv-breadcrumb__link--current\"\n        [class.mlv-breadcrumb__link--disabled]=\"disabled()\"\n        [attr.aria-current]=\"current() ? 'page' : null\"\n      >\n        <ng-container [ngTemplateOutlet]=\"content\" />\n      </span>\n    } @else if (routerLink()) {\n      <a class=\"mlv-breadcrumb__link\" [routerLink]=\"routerLink()\">\n        <ng-container [ngTemplateOutlet]=\"content\" />\n      </a>\n    } @else if (href()) {\n      <a class=\"mlv-breadcrumb__link\" [href]=\"href()\">\n        <ng-container [ngTemplateOutlet]=\"content\" />\n      </a>\n    } @else {\n      <span class=\"mlv-breadcrumb__link\">\n        <ng-container [ngTemplateOutlet]=\"content\" />\n      </span>\n    }\n    <ng-template #content><ng-content /></ng-template>\n  `,\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-breadcrumb__item',\n  },\n})\nexport class MlvBreadcrumbItem {\n  /**\n   * Angular router link for navigation.\n   * Supports string or string array (same as `[routerLink]`).\n   */\n  readonly routerLink = input<string | string[] | null>(null);\n\n  /**\n   * Standard `href` for anchor-based navigation.\n   * Use when not using Angular Router.\n   */\n  readonly href = input<string | null>(null);\n\n  /**\n   * When `true`, marks this item as the current page.\n   * Renders as non-interactive text with `aria-current=\"page\"`.\n   */\n  readonly current = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * When `true`, disables navigation and renders the item as plain text.\n   */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n}\n"]}

package/esm2022/breadcrumb/lib/breadcrumb/breadcrumb-separator.js

@@ -0,0 +1,38 @@
+import { Directive, inject, TemplateRef } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Structural directive that marks an `<ng-template>` as a custom separator
+ * to be rendered between breadcrumb items.
+ *
+ * When no `[mlvSeparator]` directive is present inside `nav[mlvBreadcrumb]`,
+ * the component falls back to a `LucideChevronRight` icon.
+ *
+ * @example Custom text separator
+ * ```html
+ * <nav mlvBreadcrumb [items]="items">
+ *   <ng-template mlvSeparator>›</ng-template>
+ * </nav>
+ * ```
+ *
+ * @example Custom icon separator
+ * ```html
+ * <nav mlvBreadcrumb [items]="items">
+ *   <ng-template mlvSeparator>
+ *     <svg lucideSlash [size]="14" />
+ *   </ng-template>
+ * </nav>
+ * ```
+ */
+export class MlvBreadcrumbSeparator {
+    /** The template reference for the custom separator content. */
+    templateRef = inject(TemplateRef);
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBreadcrumbSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvBreadcrumbSeparator, isStandalone: true, selector: "[mlvSeparator]", ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBreadcrumbSeparator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSeparator]',
+                }]
+        }] });
+//# sourceMappingURL=breadcrumb-separator.js.map

package/esm2022/breadcrumb/lib/breadcrumb/breadcrumb-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-separator.js","sourceRoot":"","sources":["../../../../../../../libs/core/breadcrumb/src/lib/breadcrumb/breadcrumb-separator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;;AAE/D;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH,MAAM,OAAO,sBAAsB;IACjC,+DAA+D;IACtD,WAAW,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC;uGAFhC,sBAAsB;2FAAtB,sBAAsB;;2FAAtB,sBAAsB;kBAHlC,SAAS;mBAAC;oBACT,QAAQ,EAAE,gBAAgB;iBAC3B","sourcesContent":["import { Directive, inject, TemplateRef } from '@angular/core';\n\n/**\n * Structural directive that marks an `<ng-template>` as a custom separator\n * to be rendered between breadcrumb items.\n *\n * When no `[mlvSeparator]` directive is present inside `nav[mlvBreadcrumb]`,\n * the component falls back to a `LucideChevronRight` icon.\n *\n * @example Custom text separator\n * ```html\n * <nav mlvBreadcrumb [items]=\"items\">\n *   <ng-template mlvSeparator>›</ng-template>\n * </nav>\n * ```\n *\n * @example Custom icon separator\n * ```html\n * <nav mlvBreadcrumb [items]=\"items\">\n *   <ng-template mlvSeparator>\n *     <svg lucideSlash [size]=\"14\" />\n *   </ng-template>\n * </nav>\n * ```\n */\n@Directive({\n  selector: '[mlvSeparator]',\n})\nexport class MlvBreadcrumbSeparator {\n  /** The template reference for the custom separator content. */\n  readonly templateRef = inject(TemplateRef);\n}\n"]}