@malva-ui/core 0.1.12

package/esm2022/breadcrumb/lib/breadcrumb/breadcrumb.js

@@ -0,0 +1,284 @@
+import { ChangeDetectionStrategy, Component, computed, contentChild, contentChildren, ElementRef, inject, input, viewChild, viewChildren, ViewEncapsulation, } from '@angular/core';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { LucideChevronRight } from '@lucide/angular';
+import { MlvPopup, MlvPopupContent, MlvPopupTrigger, } from '@malva-ui/core/popup';
+import { MlvList, MlvListItem, MlvListItemLink } from '@malva-ui/core/list';
+import { MlvBreadcrumbItem } from './breadcrumb-item';
+import { MlvBreadcrumbSeparator } from './breadcrumb-separator';
+import { MLV_BREADCRUMB_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
+import { mlvNextId } from '@malva-ui/cdk/utils';
+import * as i0 from "@angular/core";
+/**
+ * Navigation breadcrumb component.
+ *
+ * Use with `nav[mlvBreadcrumb]` selector applied to a `<nav>` element.
+ * Renders a list of breadcrumb trail items with a customisable separator,
+ * optional overflow truncation with a popover for hidden items, and router
+ * integration.
+ *
+ * Supports two usage modes:
+ * 1. **Data-driven** — pass an array of `MlvBreadcrumbEntry` objects via `[items]`.
+ * 2. **Projected** — nest `<mlv-breadcrumb-item>` elements directly.
+ *
+ * The separator can be customised by placing `<ng-template mlvSeparator>` inside
+ * the `<nav>`. When no separator directive is present, a `LucideChevronRight` icon
+ * is used as the default.
+ *
+ * @example Data-driven
+ * ```html
+ * <nav mlvBreadcrumb [items]="breadcrumbs"></nav>
+ * ```
+ *
+ * @example Custom separator via structural directive
+ * ```html
+ * <nav mlvBreadcrumb [items]="breadcrumbs">
+ *   <ng-template mlvSeparator>›</ng-template>
+ * </nav>
+ * ```
+ *
+ * @example Projected items
+ * ```html
+ * <nav mlvBreadcrumb>
+ *   <mlv-breadcrumb-item href="/">Home</mlv-breadcrumb-item>
+ *   <mlv-breadcrumb-item [routerLink]="['/products']">Products</mlv-breadcrumb-item>
+ *   <mlv-breadcrumb-item [current]="true">Widget Pro</mlv-breadcrumb-item>
+ * </nav>
+ * ```
+ *
+ * @example With overflow truncation
+ * ```html
+ * <nav mlvBreadcrumb [items]="longBreadcrumbs" [maxItems]="4"></nav>
+ * ```
+ */
+export class MlvBreadcrumb {
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_BREADCRUMB_I18N);
+    /** @private Resolver for ICU parameterized i18n strings. */
+    _resolver = inject(MlvI18nResolverService);
+    /**
+     * @protected Resolved aria-label for the overflow ellipsis button, e.g.
+     * "Show 3 more breadcrumb items".
+     */
+    _showMoreLabel = computed(() => this._resolver.resolve(this._i18n(), 'showMore', { count: this._hiddenItems().length }), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_showMoreLabel" }] : /* istanbul ignore next */ []));
+    /** @private Document reference used for focus navigation checks. */
+    _document = inject(DOCUMENT);
+    /**
+     * Data-driven list of breadcrumb items.
+     * When provided, items are rendered from this array.
+     * The last item in the array is automatically treated as the current page.
+     */
+    items = input([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    /**
+     * Density applied to the overflow popover's item list.
+     *
+     * The popover is portaled to the CDK overlay container, outside the
+     * component's DOM tree, so ancestor density classes cannot cascade into it.
+     * Forwarded to the overflow `mlv-popup`, which stamps the resolved
+     * `mlv--{density}` class on the detached panel. When omitted, the global
+     * `MlvDensityService` density applies.
+     */
+    mlvDensity = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mlvDensity" }] : /* istanbul ignore next */ []));
+    /**
+     * Maximum number of items to display before truncating.
+     * When the total count exceeds this value, the middle items are collapsed
+     * into an ellipsis (`…`) button. Clicking the button opens a popover
+     * listing all hidden items. Always shows the first and last items.
+     * Set to `0` to disable truncation (show all items). Defaults to `0`.
+     */
+    maxItems = input(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "maxItems" }] : /* istanbul ignore next */ []));
+    /**
+     * When `true`, makes the separator `aria-hidden` to prevent screen readers
+     * from announcing it. Defaults to `true`.
+     */
+    hideSeparatorFromScreenReaders = input(true, { ...(ngDevMode ? { debugName: "hideSeparatorFromScreenReaders" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /**
+     * @protected Custom separator template projected via `<ng-template mlvSeparator>`.
+     * When absent, a `LucideChevronRight` icon is rendered as the default separator.
+     */
+    _separatorDef = contentChild(MlvBreadcrumbSeparator, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_separatorDef" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Projected `mlv-breadcrumb-item` elements from content.
+     * Used when the component is operated in projected mode instead of data-driven.
+     */
+    _projectedItems = contentChildren(MlvBreadcrumbItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_projectedItems" }] : /* istanbul ignore next */ []));
+    /** @protected Ellipsis trigger used to restore focus after keyboard close. */
+    _overflowTriggerRef = viewChild('overflowTrigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_overflowTriggerRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The focusable overflow-popover link elements, in DOM order. They are
+     * rendered by this component's own template (inside `mlvPopupContent`), so a
+     * signal view query resolves them — even though the popover content renders in
+     * a detached overlay. Replaces a `getElementById` + `querySelectorAll` lookup.
+     */
+    _overflowNavItems = viewChildren('overflowNavItem', { ...(ngDevMode ? { debugName: "_overflowNavItems" } : /* istanbul ignore next */ {}), read: ElementRef });
+    /** @protected Stable id applied to the overflow list element (menu container). */
+    _overflowListId = mlvNextId('mlv-breadcrumb-overflow');
+    /**
+     * @protected The computed visible items for data-driven mode, with overflow applied.
+     * Returns the full list when `maxItems` is 0 or not set.
+     */
+    _visibleItems = computed(() => {
+        const allItems = this.items();
+        const max = this.maxItems();
+        if (!allItems.length || max <= 0 || allItems.length <= max) {
+            return allItems;
+        }
+        // Always show at least first and last item
+        const effectiveMax = Math.max(max, 2);
+        const totalCount = allItems.length;
+        if (effectiveMax >= totalCount) {
+            return allItems;
+        }
+        // effectiveMax includes the ellipsis as one slot.
+        // Available visible item slots after reserving first, ellipsis, and last:
+        const firstCount = 1;
+        const lastCount = 1;
+        const ellipsisCount = 1;
+        const middleSlots = effectiveMax - firstCount - ellipsisCount - lastCount;
+        if (middleSlots <= 0) {
+            // Only show first, ellipsis, last
+            return [
+                allItems[0],
+                { label: '…', _isEllipsis: true },
+                allItems[totalCount - 1],
+            ];
+        }
+        const lastStart = totalCount - lastCount;
+        const visibleMiddle = allItems.slice(firstCount, firstCount + middleSlots);
+        return [
+            ...allItems.slice(0, firstCount),
+            { label: '…', _isEllipsis: true },
+            ...visibleMiddle,
+            ...allItems.slice(lastStart),
+        ];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_visibleItems" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected The hidden items that are collapsed behind the ellipsis.
+     * These are shown in the popover when the ellipsis button is clicked.
+     */
+    _hiddenItems = computed(() => {
+        const allItems = this.items();
+        const max = this.maxItems();
+        if (!allItems.length || max <= 0 || allItems.length <= max) {
+            return [];
+        }
+        const effectiveMax = Math.max(max, 2);
+        const totalCount = allItems.length;
+        if (effectiveMax >= totalCount) {
+            return [];
+        }
+        const firstCount = 1;
+        const lastCount = 1;
+        const ellipsisCount = 1;
+        const middleSlots = effectiveMax - firstCount - ellipsisCount - lastCount;
+        if (middleSlots <= 0) {
+            // All middle items are hidden (exclude first and last)
+            return allItems.slice(firstCount, totalCount - lastCount);
+        }
+        // The items shown in the ellipsis are those NOT shown in _visibleItems
+        // visible middle is: allItems[firstCount .. firstCount + middleSlots - 1]
+        // so hidden middle is: allItems[firstCount + middleSlots .. totalCount - lastCount - 1]
+        return allItems.slice(firstCount + middleSlots, totalCount - lastCount);
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hiddenItems" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Whether the component is used in data-driven mode (items provided via input).
+     * When false, rendered items come from projected `<mlv-breadcrumb-item>` elements.
+     */
+    _isDataDriven = computed(() => this.items().length > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isDataDriven" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Moves focus to the first actionable item after the overflow popup opens.
+     */
+    _focusFirstOverflowItem() {
+        queueMicrotask(() => {
+            this._focusOverflowItem(0);
+        });
+    }
+    /**
+     * @protected Handles arrow-key navigation within the overflow popup.
+     */
+    _onOverflowKeydown(event, popup) {
+        const items = this._overflowItemElements();
+        if (!items.length)
+            return;
+        const currentIndex = items.indexOf(this._document.activeElement);
+        const activeIndex = currentIndex >= 0 ? currentIndex : 0;
+        let nextIndex = activeIndex;
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                nextIndex = (activeIndex + 1) % items.length;
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                nextIndex = (activeIndex - 1 + items.length) % items.length;
+                break;
+            case 'Home':
+                nextIndex = 0;
+                break;
+            case 'End':
+                nextIndex = items.length - 1;
+                break;
+            case 'Escape':
+                event.preventDefault();
+                popup.opened.set(false);
+                this._overflowTriggerRef()?.focus();
+                return;
+            default:
+                return;
+        }
+        event.preventDefault();
+        items[nextIndex]?.focus();
+    }
+    /**
+     * @protected Closes the overflow popup after an item is activated.
+     */
+    _closeOverflowPopup(popup) {
+        popup.opened.set(false);
+    }
+    /**
+     * @private Focuses an overflow item by index when it exists.
+     */
+    _focusOverflowItem(index) {
+        this._overflowItemElements()[index]?.focus();
+    }
+    /**
+     * @private Returns currently rendered focusable overflow item elements.
+     */
+    _overflowItemElements() {
+        return this._overflowNavItems().map((ref) => ref.nativeElement);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBreadcrumb, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvBreadcrumb, isStandalone: true, selector: "nav[mlvBreadcrumb]", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, mlvDensity: { classPropertyName: "mlvDensity", publicName: "mlvDensity", isSignal: true, isRequired: false, transformFunction: null }, maxItems: { classPropertyName: "maxItems", publicName: "maxItems", isSignal: true, isRequired: false, transformFunction: null }, hideSeparatorFromScreenReaders: { classPropertyName: "hideSeparatorFromScreenReaders", publicName: "hideSeparatorFromScreenReaders", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "navigation" }, properties: { "attr.aria-label": "_i18n().label" }, classAttribute: "mlv-breadcrumb" }, queries: [{ propertyName: "_separatorDef", first: true, predicate: MlvBreadcrumbSeparator, descendants: true, isSignal: true }, { propertyName: "_projectedItems", predicate: MlvBreadcrumbItem, isSignal: true }], viewQueries: [{ propertyName: "_overflowTriggerRef", first: true, predicate: ["overflowTrigger"], descendants: true, isSignal: true }, { propertyName: "_overflowNavItems", predicate: ["overflowNavItem"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<ol class=\"mlv-breadcrumb__list\">\n  @if (_isDataDriven()) { @for ( item of _visibleItems(); track item.label; let\n  last = $last; let i = $index ) {\n  <li class=\"mlv-breadcrumb__item\">\n    @if (item._isEllipsis) {\n    <button\n      #overflowTrigger\n      class=\"mlv-breadcrumb__ellipsis\"\n      type=\"button\"\n      [attr.aria-label]=\"_showMoreLabel()\"\n      [mlvPopupTrigger]=\"overflowPopup\"\n      [ariaHasPopup]=\"'menu'\"\n    >\n      {{ item.label }}\n    </button>\n    } @else if (last) {\n    <span\n      class=\"mlv-breadcrumb__link mlv-breadcrumb__link--current\"\n      aria-current=\"page\"\n      >{{ item.label }}</span\n    >\n    } @else if (item.disabled) {\n    <span class=\"mlv-breadcrumb__link mlv-breadcrumb__link--disabled\"\n      >{{ item.label }}</span\n    >\n    } @else if (item.routerLink) {\n    <a class=\"mlv-breadcrumb__link\" [routerLink]=\"item.routerLink\"\n      >{{ item.label }}</a\n    >\n    } @else if (item.href) {\n    <a class=\"mlv-breadcrumb__link\" [href]=\"item.href\">{{ item.label }}</a>\n    } @else {\n    <span class=\"mlv-breadcrumb__link\">{{ item.label }}</span>\n    } @if (!last) {\n    <span\n      class=\"mlv-breadcrumb__separator\"\n      [attr.aria-hidden]=\"\n              hideSeparatorFromScreenReaders() ? 'true' : null\n            \"\n    >\n      @if (_separatorDef(); as sep) {\n      <ng-container [ngTemplateOutlet]=\"sep.templateRef\" />\n      } @else {\n      <svg lucideChevronRight [size]=\"14\" />\n      }\n    </span>\n    }\n  </li>\n  } } @else {\n  <ng-content />\n  }\n</ol>\n\n<!-- Overflow popup using mlv-popup -->\n<mlv-popup\n  #overflowPopup\n  position=\"bottom-start\"\n  [hasShadow]=\"true\"\n  [mlvDensity]=\"mlvDensity()\"\n  class=\"mlv-breadcrumb__overflow-popup\"\n  (afterOpened)=\"_focusFirstOverflowItem()\"\n>\n  <ng-template mlvPopupContent>\n    <mlv-list\n      [id]=\"_overflowListId\"\n      listRole=\"menu\"\n      [attr.aria-label]=\"_i18n().hiddenItems\"\n      class=\"mlv-breadcrumb__overflow-list\"\n      (keydown)=\"_onOverflowKeydown($event, overflowPopup)\"\n    >\n      @for (hidden of _hiddenItems(); track hidden.label) {\n      <mlv-list-item\n        itemRole=\"none\"\n        class=\"mlv-breadcrumb__overflow-item\"\n        (click)=\"overflowPopup.opened.set(false)\"\n      >\n        @if (hidden.routerLink) {\n        <a\n          #overflowNavItem\n          class=\"mlv-breadcrumb__overflow-nav-item\"\n          mlvListItemLink\n          role=\"menuitem\"\n          [routerLink]=\"hidden.routerLink\"\n          (click)=\"_closeOverflowPopup(overflowPopup)\"\n        >\n          {{ hidden.label }}\n        </a>\n        } @else if (hidden.href) {\n        <a\n          #overflowNavItem\n          class=\"mlv-breadcrumb__overflow-nav-item\"\n          mlvListItemLink\n          role=\"menuitem\"\n          [href]=\"hidden.href\"\n          (click)=\"_closeOverflowPopup(overflowPopup)\"\n        >\n          {{ hidden.label }}\n        </a>\n        } @else {\n        <span\n          class=\"mlv-breadcrumb__overflow-link--disabled\"\n          role=\"menuitem\"\n          aria-disabled=\"true\"\n        >\n          {{ hidden.label }}\n        </span>\n        }\n      </mlv-list-item>\n      }\n    </mlv-list>\n  </ng-template>\n</mlv-popup>\n", styles: [".mlv-breadcrumb{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-breadcrumb *{box-sizing:border-box}.mlv-breadcrumb{display:block}.mlv-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:.25rem}.mlv-breadcrumb__item{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}.mlv-breadcrumb__link{color:var(--mlv-text-action);text-decoration:none;font-size:var(--mlv-font-size-m);border-radius:var(--mlv-radius-xs);transition:color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-breadcrumb__link:hover{color:var(--mlv-text-action-hover);text-decoration:underline}.mlv-breadcrumb__link:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-breadcrumb__link--current{color:var(--mlv-text-primary);font-weight:var(--mlv-font-weight-medium);cursor:default;pointer-events:none;text-decoration:none}.mlv-breadcrumb__link--current:hover{color:var(--mlv-text-primary);text-decoration:none}.mlv-breadcrumb__link--disabled{color:var(--mlv-text-disabled);cursor:default;pointer-events:none;text-decoration:none}.mlv-breadcrumb__link--disabled:hover{color:var(--mlv-text-disabled);text-decoration:none}.mlv-breadcrumb__separator{display:inline-flex;align-items:center;color:var(--mlv-text-tertiary);font-size:var(--mlv-font-size-m);-webkit-user-select:none;user-select:none;flex-shrink:0}.mlv-breadcrumb__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--mlv-text-secondary);font-size:var(--mlv-font-size-m);background:none;border:none;padding:0 .25rem;margin:0;cursor:pointer;border-radius:var(--mlv-radius-xs);transition:color var(--mlv-duration-fast) var(--mlv-ease-default),background-color var(--mlv-duration-fast) var(--mlv-ease-default);font-family:inherit;line-height:inherit}.mlv-breadcrumb__ellipsis:hover{color:var(--mlv-text-action);background-color:var(--mlv-background-neutral-1)}.mlv-breadcrumb__ellipsis:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-breadcrumb__overflow-popup{padding:var(--mlv-popover-inset);overflow:hidden;min-width:10rem}.mlv-breadcrumb__overflow-list{--mlv-list-padding-block: 0;--mlv-list-padding-inline: 0;--mlv-list-gap: var(--mlv-spacing-0-5)}.mlv-breadcrumb__overflow-link--disabled{display:block;color:var(--mlv-text-disabled);cursor:default;pointer-events:none;font-size:var(--mlv-font-size-m)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: LucideChevronRight, selector: "svg[lucideChevronRight]" }, { kind: "component", type: MlvPopup, selector: "mlv-popup", inputs: ["position", "positions", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "hasArrow", "hasShadow", "class", "mlvDensity", "flexibleDimensions", "scrollStrategy", "hasBackdrop", "restrictPosition", "panelRole", "modal", "ariaLabel", "dismissExcludeElements", "mobileMode", "mobileBreakpoint", "mobileTitle", "mobileCloseLabel", "opened"], outputs: ["openedChange", "afterOpened", "afterClosed"] }, { kind: "directive", type: MlvPopupTrigger, selector: "[mlvPopupTrigger]", inputs: ["mlvPopupTrigger", "triggerOn", "ariaHasPopup"], exportAs: ["mlvPopupTrigger"] }, { kind: "directive", type: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "component", type: MlvList, selector: "mlv-list", inputs: ["listRole", "variant"] }, { kind: "component", type: MlvListItem, selector: "mlv-list-item", inputs: ["itemRole", "unread", "accent"] }, { kind: "component", type: MlvListItemLink, selector: "a[mlvListItemLink]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvBreadcrumb, decorators: [{
+            type: Component,
+            args: [{ selector: 'nav[mlvBreadcrumb]', imports: [
+                        NgTemplateOutlet,
+                        RouterLink,
+                        LucideChevronRight,
+                        MlvPopup,
+                        MlvPopupTrigger,
+                        MlvPopupContent,
+                        MlvList,
+                        MlvListItem,
+                        MlvListItemLink,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        class: 'mlv-breadcrumb',
+                        role: 'navigation',
+                        '[attr.aria-label]': '_i18n().label',
+                    }, template: "<ol class=\"mlv-breadcrumb__list\">\n  @if (_isDataDriven()) { @for ( item of _visibleItems(); track item.label; let\n  last = $last; let i = $index ) {\n  <li class=\"mlv-breadcrumb__item\">\n    @if (item._isEllipsis) {\n    <button\n      #overflowTrigger\n      class=\"mlv-breadcrumb__ellipsis\"\n      type=\"button\"\n      [attr.aria-label]=\"_showMoreLabel()\"\n      [mlvPopupTrigger]=\"overflowPopup\"\n      [ariaHasPopup]=\"'menu'\"\n    >\n      {{ item.label }}\n    </button>\n    } @else if (last) {\n    <span\n      class=\"mlv-breadcrumb__link mlv-breadcrumb__link--current\"\n      aria-current=\"page\"\n      >{{ item.label }}</span\n    >\n    } @else if (item.disabled) {\n    <span class=\"mlv-breadcrumb__link mlv-breadcrumb__link--disabled\"\n      >{{ item.label }}</span\n    >\n    } @else if (item.routerLink) {\n    <a class=\"mlv-breadcrumb__link\" [routerLink]=\"item.routerLink\"\n      >{{ item.label }}</a\n    >\n    } @else if (item.href) {\n    <a class=\"mlv-breadcrumb__link\" [href]=\"item.href\">{{ item.label }}</a>\n    } @else {\n    <span class=\"mlv-breadcrumb__link\">{{ item.label }}</span>\n    } @if (!last) {\n    <span\n      class=\"mlv-breadcrumb__separator\"\n      [attr.aria-hidden]=\"\n              hideSeparatorFromScreenReaders() ? 'true' : null\n            \"\n    >\n      @if (_separatorDef(); as sep) {\n      <ng-container [ngTemplateOutlet]=\"sep.templateRef\" />\n      } @else {\n      <svg lucideChevronRight [size]=\"14\" />\n      }\n    </span>\n    }\n  </li>\n  } } @else {\n  <ng-content />\n  }\n</ol>\n\n<!-- Overflow popup using mlv-popup -->\n<mlv-popup\n  #overflowPopup\n  position=\"bottom-start\"\n  [hasShadow]=\"true\"\n  [mlvDensity]=\"mlvDensity()\"\n  class=\"mlv-breadcrumb__overflow-popup\"\n  (afterOpened)=\"_focusFirstOverflowItem()\"\n>\n  <ng-template mlvPopupContent>\n    <mlv-list\n      [id]=\"_overflowListId\"\n      listRole=\"menu\"\n      [attr.aria-label]=\"_i18n().hiddenItems\"\n      class=\"mlv-breadcrumb__overflow-list\"\n      (keydown)=\"_onOverflowKeydown($event, overflowPopup)\"\n    >\n      @for (hidden of _hiddenItems(); track hidden.label) {\n      <mlv-list-item\n        itemRole=\"none\"\n        class=\"mlv-breadcrumb__overflow-item\"\n        (click)=\"overflowPopup.opened.set(false)\"\n      >\n        @if (hidden.routerLink) {\n        <a\n          #overflowNavItem\n          class=\"mlv-breadcrumb__overflow-nav-item\"\n          mlvListItemLink\n          role=\"menuitem\"\n          [routerLink]=\"hidden.routerLink\"\n          (click)=\"_closeOverflowPopup(overflowPopup)\"\n        >\n          {{ hidden.label }}\n        </a>\n        } @else if (hidden.href) {\n        <a\n          #overflowNavItem\n          class=\"mlv-breadcrumb__overflow-nav-item\"\n          mlvListItemLink\n          role=\"menuitem\"\n          [href]=\"hidden.href\"\n          (click)=\"_closeOverflowPopup(overflowPopup)\"\n        >\n          {{ hidden.label }}\n        </a>\n        } @else {\n        <span\n          class=\"mlv-breadcrumb__overflow-link--disabled\"\n          role=\"menuitem\"\n          aria-disabled=\"true\"\n        >\n          {{ hidden.label }}\n        </span>\n        }\n      </mlv-list-item>\n      }\n    </mlv-list>\n  </ng-template>\n</mlv-popup>\n", styles: [".mlv-breadcrumb{box-sizing:border-box;padding:0;margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-font-size-m)}.mlv-breadcrumb *{box-sizing:border-box}.mlv-breadcrumb{display:block}.mlv-breadcrumb__list{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;gap:.25rem}.mlv-breadcrumb__item{display:inline-flex;align-items:center;gap:.25rem;white-space:nowrap}.mlv-breadcrumb__link{color:var(--mlv-text-action);text-decoration:none;font-size:var(--mlv-font-size-m);border-radius:var(--mlv-radius-xs);transition:color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-breadcrumb__link:hover{color:var(--mlv-text-action-hover);text-decoration:underline}.mlv-breadcrumb__link:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-breadcrumb__link--current{color:var(--mlv-text-primary);font-weight:var(--mlv-font-weight-medium);cursor:default;pointer-events:none;text-decoration:none}.mlv-breadcrumb__link--current:hover{color:var(--mlv-text-primary);text-decoration:none}.mlv-breadcrumb__link--disabled{color:var(--mlv-text-disabled);cursor:default;pointer-events:none;text-decoration:none}.mlv-breadcrumb__link--disabled:hover{color:var(--mlv-text-disabled);text-decoration:none}.mlv-breadcrumb__separator{display:inline-flex;align-items:center;color:var(--mlv-text-tertiary);font-size:var(--mlv-font-size-m);-webkit-user-select:none;user-select:none;flex-shrink:0}.mlv-breadcrumb__ellipsis{display:inline-flex;align-items:center;justify-content:center;color:var(--mlv-text-secondary);font-size:var(--mlv-font-size-m);background:none;border:none;padding:0 .25rem;margin:0;cursor:pointer;border-radius:var(--mlv-radius-xs);transition:color var(--mlv-duration-fast) var(--mlv-ease-default),background-color var(--mlv-duration-fast) var(--mlv-ease-default);font-family:inherit;line-height:inherit}.mlv-breadcrumb__ellipsis:hover{color:var(--mlv-text-action);background-color:var(--mlv-background-neutral-1)}.mlv-breadcrumb__ellipsis:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-breadcrumb__overflow-popup{padding:var(--mlv-popover-inset);overflow:hidden;min-width:10rem}.mlv-breadcrumb__overflow-list{--mlv-list-padding-block: 0;--mlv-list-padding-inline: 0;--mlv-list-gap: var(--mlv-spacing-0-5)}.mlv-breadcrumb__overflow-link--disabled{display:block;color:var(--mlv-text-disabled);cursor:default;pointer-events:none;font-size:var(--mlv-font-size-m)}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], mlvDensity: [{ type: i0.Input, args: [{ isSignal: true, alias: "mlvDensity", required: false }] }], maxItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxItems", required: false }] }], hideSeparatorFromScreenReaders: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSeparatorFromScreenReaders", required: false }] }], _separatorDef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvBreadcrumbSeparator), { isSignal: true }] }], _projectedItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvBreadcrumbItem), { isSignal: true }] }], _overflowTriggerRef: [{ type: i0.ViewChild, args: ['overflowTrigger', { isSignal: true }] }], _overflowNavItems: [{ type: i0.ViewChildren, args: ['overflowNavItem', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }] } });
+//# sourceMappingURL=breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sourceRoot":"","sources":["../../../../../../../libs/core/breadcrumb/src/lib/breadcrumb/breadcrumb.ts","../../../../../../../libs/core/breadcrumb/src/lib/breadcrumb/breadcrumb.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  contentChildren,\n  ElementRef,\n  inject,\n  input,\n  viewChild,\n  viewChildren,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { DOCUMENT, NgTemplateOutlet } from '@angular/common';\nimport { RouterLink } from '@angular/router';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { LucideChevronRight } from '@lucide/angular';\nimport {\n  MlvPopup,\n  MlvPopupContent,\n  MlvPopupTrigger,\n} from '@malva-ui/core/popup';\nimport { MlvList, MlvListItem, MlvListItemLink } from '@malva-ui/core/list';\nimport { MlvBreadcrumbItem } from './breadcrumb-item';\nimport { MlvBreadcrumbSeparator } from './breadcrumb-separator';\nimport type { MlvBreadcrumbEntry } from './breadcrumb.types';\nimport { MLV_BREADCRUMB_I18N, MlvI18nResolverService } from '@malva-ui/i18n';\nimport { mlvNextId } from '@malva-ui/cdk/utils';\nimport type { MlvDensity } from '@malva-ui/cdk/density';\n\n/**\n * Navigation breadcrumb component.\n *\n * Use with `nav[mlvBreadcrumb]` selector applied to a `<nav>` element.\n * Renders a list of breadcrumb trail items with a customisable separator,\n * optional overflow truncation with a popover for hidden items, and router\n * integration.\n *\n * Supports two usage modes:\n * 1. **Data-driven** — pass an array of `MlvBreadcrumbEntry` objects via `[items]`.\n * 2. **Projected** — nest `<mlv-breadcrumb-item>` elements directly.\n *\n * The separator can be customised by placing `<ng-template mlvSeparator>` inside\n * the `<nav>`. When no separator directive is present, a `LucideChevronRight` icon\n * is used as the default.\n *\n * @example Data-driven\n * ```html\n * <nav mlvBreadcrumb [items]=\"breadcrumbs\"></nav>\n * ```\n *\n * @example Custom separator via structural directive\n * ```html\n * <nav mlvBreadcrumb [items]=\"breadcrumbs\">\n *   <ng-template mlvSeparator>›</ng-template>\n * </nav>\n * ```\n *\n * @example Projected items\n * ```html\n * <nav mlvBreadcrumb>\n *   <mlv-breadcrumb-item href=\"/\">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 * </nav>\n * ```\n *\n * @example With overflow truncation\n * ```html\n * <nav mlvBreadcrumb [items]=\"longBreadcrumbs\" [maxItems]=\"4\"></nav>\n * ```\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'nav[mlvBreadcrumb]',\n  imports: [\n    NgTemplateOutlet,\n    RouterLink,\n    LucideChevronRight,\n    MlvPopup,\n    MlvPopupTrigger,\n    MlvPopupContent,\n    MlvList,\n    MlvListItem,\n    MlvListItemLink,\n  ],\n  templateUrl: './breadcrumb.html',\n  styleUrl: './breadcrumb.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-breadcrumb',\n    role: 'navigation',\n    '[attr.aria-label]': '_i18n().label',\n  },\n})\nexport class MlvBreadcrumb {\n  /** @protected The component's i18n strings signal. */\n  protected readonly _i18n = inject(MLV_BREADCRUMB_I18N);\n\n  /** @private Resolver for ICU parameterized i18n strings. */\n  private readonly _resolver = inject(MlvI18nResolverService);\n\n  /**\n   * @protected Resolved aria-label for the overflow ellipsis button, e.g.\n   * \"Show 3 more breadcrumb items\".\n   */\n  protected readonly _showMoreLabel = computed(() =>\n    this._resolver.resolve(\n      this._i18n() as unknown as Record<string, string>,\n      'showMore',\n      { count: this._hiddenItems().length },\n    ),\n  );\n\n  /** @private Document reference used for focus navigation checks. */\n  private readonly _document = inject(DOCUMENT);\n\n  /**\n   * Data-driven list of breadcrumb items.\n   * When provided, items are rendered from this array.\n   * The last item in the array is automatically treated as the current page.\n   */\n  readonly items = input<MlvBreadcrumbEntry[]>([]);\n\n  /**\n   * Density applied to the overflow popover's item list.\n   *\n   * The popover is portaled to the CDK overlay container, outside the\n   * component's DOM tree, so ancestor density classes cannot cascade into it.\n   * Forwarded to the overflow `mlv-popup`, which stamps the resolved\n   * `mlv--{density}` class on the detached panel. When omitted, the global\n   * `MlvDensityService` density applies.\n   */\n  readonly mlvDensity = input<MlvDensity | undefined>(undefined);\n\n  /**\n   * Maximum number of items to display before truncating.\n   * When the total count exceeds this value, the middle items are collapsed\n   * into an ellipsis (`…`) button. Clicking the button opens a popover\n   * listing all hidden items. Always shows the first and last items.\n   * Set to `0` to disable truncation (show all items). Defaults to `0`.\n   */\n  readonly maxItems = input<number>(0);\n\n  /**\n   * When `true`, makes the separator `aria-hidden` to prevent screen readers\n   * from announcing it. Defaults to `true`.\n   */\n  readonly hideSeparatorFromScreenReaders = input<boolean, BooleanInput>(true, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * @protected Custom separator template projected via `<ng-template mlvSeparator>`.\n   * When absent, a `LucideChevronRight` icon is rendered as the default separator.\n   */\n  protected readonly _separatorDef = contentChild(MlvBreadcrumbSeparator);\n\n  /**\n   * @protected Projected `mlv-breadcrumb-item` elements from content.\n   * Used when the component is operated in projected mode instead of data-driven.\n   */\n  protected readonly _projectedItems = contentChildren(MlvBreadcrumbItem);\n\n  /** @protected Ellipsis trigger used to restore focus after keyboard close. */\n  protected readonly _overflowTriggerRef =\n    viewChild<HTMLButtonElement>('overflowTrigger');\n\n  /**\n   * @private The focusable overflow-popover link elements, in DOM order. They are\n   * rendered by this component's own template (inside `mlvPopupContent`), so a\n   * signal view query resolves them — even though the popover content renders in\n   * a detached overlay. Replaces a `getElementById` + `querySelectorAll` lookup.\n   */\n  private readonly _overflowNavItems = viewChildren('overflowNavItem', {\n    read: ElementRef,\n  });\n\n  /** @protected Stable id applied to the overflow list element (menu container). */\n  protected readonly _overflowListId = mlvNextId('mlv-breadcrumb-overflow');\n\n  /**\n   * @protected The computed visible items for data-driven mode, with overflow applied.\n   * Returns the full list when `maxItems` is 0 or not set.\n   */\n  protected readonly _visibleItems = computed<\n    Array<MlvBreadcrumbEntry & { _isEllipsis?: boolean }>\n  >(() => {\n    const allItems = this.items();\n    const max = this.maxItems();\n\n    if (!allItems.length || max <= 0 || allItems.length <= max) {\n      return allItems;\n    }\n\n    // Always show at least first and last item\n    const effectiveMax = Math.max(max, 2);\n    const totalCount = allItems.length;\n\n    if (effectiveMax >= totalCount) {\n      return allItems;\n    }\n\n    // effectiveMax includes the ellipsis as one slot.\n    // Available visible item slots after reserving first, ellipsis, and last:\n    const firstCount = 1;\n    const lastCount = 1;\n    const ellipsisCount = 1;\n    const middleSlots = effectiveMax - firstCount - ellipsisCount - lastCount;\n\n    if (middleSlots <= 0) {\n      // Only show first, ellipsis, last\n      return [\n        allItems[0],\n        { label: '…', _isEllipsis: true },\n        allItems[totalCount - 1],\n      ];\n    }\n\n    const lastStart = totalCount - lastCount;\n    const visibleMiddle = allItems.slice(firstCount, firstCount + middleSlots);\n\n    return [\n      ...allItems.slice(0, firstCount),\n      { label: '…', _isEllipsis: true },\n      ...visibleMiddle,\n      ...allItems.slice(lastStart),\n    ];\n  });\n\n  /**\n   * @protected The hidden items that are collapsed behind the ellipsis.\n   * These are shown in the popover when the ellipsis button is clicked.\n   */\n  protected readonly _hiddenItems = computed<MlvBreadcrumbEntry[]>(() => {\n    const allItems = this.items();\n    const max = this.maxItems();\n\n    if (!allItems.length || max <= 0 || allItems.length <= max) {\n      return [];\n    }\n\n    const effectiveMax = Math.max(max, 2);\n    const totalCount = allItems.length;\n\n    if (effectiveMax >= totalCount) {\n      return [];\n    }\n\n    const firstCount = 1;\n    const lastCount = 1;\n    const ellipsisCount = 1;\n    const middleSlots = effectiveMax - firstCount - ellipsisCount - lastCount;\n\n    if (middleSlots <= 0) {\n      // All middle items are hidden (exclude first and last)\n      return allItems.slice(firstCount, totalCount - lastCount);\n    }\n\n    // The items shown in the ellipsis are those NOT shown in _visibleItems\n    // visible middle is: allItems[firstCount .. firstCount + middleSlots - 1]\n    // so hidden middle is: allItems[firstCount + middleSlots .. totalCount - lastCount - 1]\n    return allItems.slice(firstCount + middleSlots, totalCount - lastCount);\n  });\n\n  /**\n   * @protected Whether the component is used in data-driven mode (items provided via input).\n   * When false, rendered items come from projected `<mlv-breadcrumb-item>` elements.\n   */\n  protected readonly _isDataDriven = computed(() => this.items().length > 0);\n\n  /**\n   * @protected Moves focus to the first actionable item after the overflow popup opens.\n   */\n  protected _focusFirstOverflowItem(): void {\n    queueMicrotask(() => {\n      this._focusOverflowItem(0);\n    });\n  }\n\n  /**\n   * @protected Handles arrow-key navigation within the overflow popup.\n   */\n  protected _onOverflowKeydown(event: KeyboardEvent, popup: MlvPopup): void {\n    const items = this._overflowItemElements();\n    if (!items.length) return;\n\n    const currentIndex = items.indexOf(\n      this._document.activeElement as HTMLElement,\n    );\n    const activeIndex = currentIndex >= 0 ? currentIndex : 0;\n    let nextIndex = activeIndex;\n\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowRight':\n        nextIndex = (activeIndex + 1) % items.length;\n        break;\n      case 'ArrowUp':\n      case 'ArrowLeft':\n        nextIndex = (activeIndex - 1 + items.length) % items.length;\n        break;\n      case 'Home':\n        nextIndex = 0;\n        break;\n      case 'End':\n        nextIndex = items.length - 1;\n        break;\n      case 'Escape':\n        event.preventDefault();\n        popup.opened.set(false);\n        this._overflowTriggerRef()?.focus();\n        return;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    items[nextIndex]?.focus();\n  }\n\n  /**\n   * @protected Closes the overflow popup after an item is activated.\n   */\n  protected _closeOverflowPopup(popup: MlvPopup): void {\n    popup.opened.set(false);\n  }\n\n  /**\n   * @private Focuses an overflow item by index when it exists.\n   */\n  private _focusOverflowItem(index: number): void {\n    this._overflowItemElements()[index]?.focus();\n  }\n\n  /**\n   * @private Returns currently rendered focusable overflow item elements.\n   */\n  private _overflowItemElements(): HTMLElement[] {\n    return this._overflowNavItems().map((ref) => ref.nativeElement);\n  }\n}\n","<ol class=\"mlv-breadcrumb__list\">\n  @if (_isDataDriven()) { @for ( item of _visibleItems(); track item.label; let\n  last = $last; let i = $index ) {\n  <li class=\"mlv-breadcrumb__item\">\n    @if (item._isEllipsis) {\n    <button\n      #overflowTrigger\n      class=\"mlv-breadcrumb__ellipsis\"\n      type=\"button\"\n      [attr.aria-label]=\"_showMoreLabel()\"\n      [mlvPopupTrigger]=\"overflowPopup\"\n      [ariaHasPopup]=\"'menu'\"\n    >\n      {{ item.label }}\n    </button>\n    } @else if (last) {\n    <span\n      class=\"mlv-breadcrumb__link mlv-breadcrumb__link--current\"\n      aria-current=\"page\"\n      >{{ item.label }}</span\n    >\n    } @else if (item.disabled) {\n    <span class=\"mlv-breadcrumb__link mlv-breadcrumb__link--disabled\"\n      >{{ item.label }}</span\n    >\n    } @else if (item.routerLink) {\n    <a class=\"mlv-breadcrumb__link\" [routerLink]=\"item.routerLink\"\n      >{{ item.label }}</a\n    >\n    } @else if (item.href) {\n    <a class=\"mlv-breadcrumb__link\" [href]=\"item.href\">{{ item.label }}</a>\n    } @else {\n    <span class=\"mlv-breadcrumb__link\">{{ item.label }}</span>\n    } @if (!last) {\n    <span\n      class=\"mlv-breadcrumb__separator\"\n      [attr.aria-hidden]=\"\n              hideSeparatorFromScreenReaders() ? 'true' : null\n            \"\n    >\n      @if (_separatorDef(); as sep) {\n      <ng-container [ngTemplateOutlet]=\"sep.templateRef\" />\n      } @else {\n      <svg lucideChevronRight [size]=\"14\" />\n      }\n    </span>\n    }\n  </li>\n  } } @else {\n  <ng-content />\n  }\n</ol>\n\n<!-- Overflow popup using mlv-popup -->\n<mlv-popup\n  #overflowPopup\n  position=\"bottom-start\"\n  [hasShadow]=\"true\"\n  [mlvDensity]=\"mlvDensity()\"\n  class=\"mlv-breadcrumb__overflow-popup\"\n  (afterOpened)=\"_focusFirstOverflowItem()\"\n>\n  <ng-template mlvPopupContent>\n    <mlv-list\n      [id]=\"_overflowListId\"\n      listRole=\"menu\"\n      [attr.aria-label]=\"_i18n().hiddenItems\"\n      class=\"mlv-breadcrumb__overflow-list\"\n      (keydown)=\"_onOverflowKeydown($event, overflowPopup)\"\n    >\n      @for (hidden of _hiddenItems(); track hidden.label) {\n      <mlv-list-item\n        itemRole=\"none\"\n        class=\"mlv-breadcrumb__overflow-item\"\n        (click)=\"overflowPopup.opened.set(false)\"\n      >\n        @if (hidden.routerLink) {\n        <a\n          #overflowNavItem\n          class=\"mlv-breadcrumb__overflow-nav-item\"\n          mlvListItemLink\n          role=\"menuitem\"\n          [routerLink]=\"hidden.routerLink\"\n          (click)=\"_closeOverflowPopup(overflowPopup)\"\n        >\n          {{ hidden.label }}\n        </a>\n        } @else if (hidden.href) {\n        <a\n          #overflowNavItem\n          class=\"mlv-breadcrumb__overflow-nav-item\"\n          mlvListItemLink\n          role=\"menuitem\"\n          [href]=\"hidden.href\"\n          (click)=\"_closeOverflowPopup(overflowPopup)\"\n        >\n          {{ hidden.label }}\n        </a>\n        } @else {\n        <span\n          class=\"mlv-breadcrumb__overflow-link--disabled\"\n          role=\"menuitem\"\n          aria-disabled=\"true\"\n        >\n          {{ hidden.label }}\n        </span>\n        }\n      </mlv-list-item>\n      }\n    </mlv-list>\n  </ng-template>\n</mlv-popup>\n"]}

package/esm2022/breadcrumb/lib/breadcrumb/breadcrumb.types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=breadcrumb.types.js.map

package/esm2022/breadcrumb/lib/breadcrumb/breadcrumb.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.types.js","sourceRoot":"","sources":["../../../../../../../libs/core/breadcrumb/src/lib/breadcrumb/breadcrumb.types.ts"],"names":[],"mappings":"","sourcesContent":["/**\n * Represents a single breadcrumb navigation item.\n *\n * Use this interface when providing items data-driven via the `items` input\n * on `MlvBreadcrumb`.\n */\nexport interface MlvBreadcrumbEntry {\n  /** Display label for this breadcrumb step. */\n  label: string;\n\n  /**\n   * Router link for Angular router navigation.\n   * Passed directly to `[routerLink]` on the anchor element.\n   * Use either `routerLink` or `href`, not both.\n   */\n  routerLink?: string | string[];\n\n  /**\n   * Raw href for standard anchor navigation.\n   * Use either `href` or `routerLink`, not both.\n   */\n  href?: string;\n\n  /**\n   * When `true`, marks this item as disabled — rendered as plain text\n   * without a link, and not navigable.\n   */\n  disabled?: boolean;\n}\n"]}

package/esm2022/breadcrumb/malva-ui-core-breadcrumb.js

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

package/esm2022/breadcrumb/malva-ui-core-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"malva-ui-core-breadcrumb.js","sourceRoot":"","sources":["../../../../../libs/core/breadcrumb/src/malva-ui-core-breadcrumb.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/button/index.js

@@ -0,0 +1,8 @@
+export * from './lib/button/button';
+export * from './lib/button.directives';
+export * from './lib/button-group/button-group';
+export * from './lib/button-split/button-split';
+export * from './lib/button-toggle/button-toggle';
+export * from './lib/button-variant.token';
+export * from './lib/button-close/button-close';
+//# sourceMappingURL=index.js.map

package/esm2022/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../libs/core/button/src/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,iCAAiC,CAAC;AAChD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iCAAiC,CAAC","sourcesContent":["export * from './lib/button/button';\nexport * from './lib/button.directives';\nexport * from './lib/button-group/button-group';\nexport * from './lib/button-split/button-split';\nexport * from './lib/button-toggle/button-toggle';\nexport * from './lib/button-variant.token';\nexport * from './lib/button-close/button-close';\n"]}

package/esm2022/button/lib/button/button.js

@@ -0,0 +1,137 @@
+import { afterRenderEffect, ChangeDetectionStrategy, Component, computed, contentChild, inject, input, signal, viewChild, ViewEncapsulation, } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { MlvButtonAfter, MlvButtonBefore, MlvButtonIcon, } from '../button.directives';
+import { NgTemplateOutlet } from '@angular/common';
+import { MLV_DENSITY_ELEMENT, MlvDensityDirective, } from '@malva-ui/cdk/density';
+import { MlvLoader } from '@malva-ui/core/loader';
+import { MLV_BUTTON_VARIANT } from '../button-variant.token';
+import * as i0 from "@angular/core";
+import * as i1 from "@malva-ui/cdk/density";
+/**
+ * Shapes whose width equals their height. They exist to hold a single icon, so
+ * they drive both the icon-only sizing and the neutral default variant.
+ */
+const ICON_ONLY_SHAPES = ['circle', 'square'];
+export class MlvButton {
+    /**
+     * Visual treatment for this button. When omitted, the closest button group,
+     * split button, or toggle supplies it; otherwise the fallback depends on the
+     * shape — `secondary` for the icon-only `square`/`circle` shapes and
+     * `primary` for every other shape.
+     */
+    variant = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Shape of the button. Circle and square are intended for icon-only actions. */
+    shape = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shape" }] : /* istanbul ignore next */ []));
+    /** Whether the native button is disabled. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** Whether the button is waiting for an asynchronous action to complete. */
+    loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
+    /** @private Optional ancestor-provided default visual treatment. */
+    _variantAccessor = inject(MLV_BUTTON_VARIANT, {
+        optional: true,
+    });
+    /**
+     * The visual treatment after resolving local, inherited, and default values.
+     *
+     * The final fallback is shape-aware: a bare `square`/`circle` button is an
+     * icon action, and rendering a row of them as saturated `primary` CTAs was
+     * never the intent, so they fall back to the neutral `secondary` treatment.
+     * An explicit `variant` and an ancestor `MLV_BUTTON_VARIANT` both still win.
+     */
+    effectiveVariant = computed(() => this.variant() ??
+        this._variantAccessor?.effectiveVariant() ??
+        (this._iconShape() ? 'secondary' : 'primary'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveVariant" }] : /* istanbul ignore next */ []));
+    /** @protected Whether `shape` is one of the square/circle icon-only shapes. */
+    _iconShape = computed(() => ICON_ONLY_SHAPES.includes(this.shape()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_iconShape" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected True for a circle/square button whose content is only an icon —
+     * either marked with `mlvButtonIcon` or inferred from an empty label slot.
+     * Drives the icon-only modifier.
+     */
+    _iconOnly = computed(() => this._iconShape() &&
+        (!!this._iconDirective() || !this._hasProjectedText()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_iconOnly" }] : /* istanbul ignore next */ []));
+    /** @protected Template slot rendered before the button text. */
+    beforeRef = contentChild(MlvButtonBefore, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "beforeRef" }] : /* istanbul ignore next */ []));
+    /** @protected Template slot rendered after the button text. */
+    afterRef = contentChild(MlvButtonAfter, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "afterRef" }] : /* istanbul ignore next */ []));
+    /** @private Projected icon directive, used to detect icon-only buttons. */
+    _iconDirective = contentChild(MlvButtonIcon, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_iconDirective" }] : /* istanbul ignore next */ []));
+    /** @private The label slot, read back after render to detect icon-only content. */
+    _textRef = viewChild.required('textRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_textRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @private Whether the default content slot rendered any non-whitespace text.
+     *
+     * Starts `true` so a button that never reaches a browser render — server-side
+     * rendering, where `afterRenderEffect` does not run — keeps the pre-inference
+     * behaviour instead of guessing icon-only.
+     */
+    _hasProjectedText = signal(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasProjectedText" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // `mlvButtonIcon` is optional in practice: icon buttons are overwhelmingly
+        // written as `<button mlvButton shape="circle"><svg lucideX /></button>`,
+        // and without the directive nothing marked them icon-only, so the icon kept
+        // its intrinsic size inside the label slot. The slot holds projected
+        // content, so the only way to know whether it carries real text is to read
+        // it back once the DOM is written. The effect re-runs when the signals read
+        // below change rather than on every render pass, which keeps this to one
+        // `textContent` read per button per relevant change. Text that appears or
+        // disappears inside an already-rendered icon-only button is not observed —
+        // annotate the icon with `mlvButtonIcon` for that case.
+        afterRenderEffect(() => {
+            this.shape();
+            this.loading();
+            this._iconDirective();
+            const text = this._textRef().nativeElement.textContent ?? '';
+            this._hasProjectedText.set(text.trim().length > 0);
+        });
+    }
+    /** @protected Prevents activation while the button is disabled or loading. */
+    _handleClick(event) {
+        if (this.disabled() || this.loading()) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvButton, isStandalone: true, selector: "button[mlvButton], a[mlvButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, shape: { classPropertyName: "shape", publicName: "shape", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "click": "_handleClick($event)" }, properties: { "class": "\"mlv-button--variant-\" + effectiveVariant() + \" mlv-button--shape-\" + shape()", "class.mlv-button--disabled": "disabled()", "class.mlv-button--loading": "loading()", "class.mlv-button--icon-only": "_iconOnly()", "attr.disabled": "(disabled() || loading()) || null", "attr.aria-disabled": "(disabled() || loading()) || null", "attr.aria-busy": "loading() || null" }, classAttribute: "mlv-button" }, providers: [
+            {
+                provide: MLV_DENSITY_ELEMENT,
+                useValue: 'button',
+            },
+        ], queries: [{ propertyName: "beforeRef", first: true, predicate: MlvButtonBefore, descendants: true, isSignal: true }, { propertyName: "afterRef", first: true, predicate: MlvButtonAfter, descendants: true, isSignal: true }, { propertyName: "_iconDirective", first: true, predicate: MlvButtonIcon, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_textRef", first: true, predicate: ["textRef"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.MlvDensityDirective, inputs: ["mlvDensity", "mlvDensity"] }], ngImport: i0, template: "@if (loading()) {\n<mlv-loader\n  variant=\"circle\"\n  color=\"currentColor\"\n  trackColor=\"transparent\"\n  indeterminate\n  [size]=\"20\"\n  [strokeWidth]=\"2\"\n/>\n} @else if (beforeRef(); as beforeTpl) {\n<div class=\"mlv-button__before\">\n  <ng-template [ngTemplateOutlet]=\"beforeTpl.templateRef\"></ng-template>\n</div>\n}\n\n<span class=\"mlv-button__text\" #textRef>\n  <ng-content />\n</span>\n\n@if (!loading() && afterRef(); as afterTpl) {\n<div class=\"mlv-button__after\">\n  <ng-template [ngTemplateOutlet]=\"afterTpl.templateRef\"></ng-template>\n</div>\n}\n", styles: [".mlv-button{box-sizing:border-box;padding:var(--mlv-btn-padding);margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-btn-font-size)}.mlv-button *{box-sizing:border-box}.mlv-button{display:inline-flex;align-items:center;align-content:center;justify-content:center;gap:.25rem;appearance:none;--mlv-btn-padding: var(--mlv-padding-m);--mlv-btn-height: var(--mlv-height-m);--mlv-btn-radius: var(--mlv-radius-l);--mlv-btn-font-size: var(--mlv-font-size-l);--mlv-icon-font-size: 1.25em;font-weight:500;color:var(--mlv-btn-text-color);border:none;background-color:var(--mlv-btn-bg);transition-property:background-color,border-color,color,outline-color,box-shadow,transform;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-out);border-radius:var(--mlv-btn-radius);cursor:pointer;min-height:var(--mlv-btn-height);outline:.125rem solid transparent;outline-offset:.175rem;box-shadow:var(--mlv-btn-box-shadow, none);text-decoration:none}.mlv-button *{color:inherit}[class*=--tight] .mlv-button:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-button[class*=--tight]{--mlv-btn-font-size: var(--mlv-font-size-s);--mlv-btn-height: var(--mlv-height-xs);--mlv-btn-padding: var(--mlv-padding-xs);--mlv-btn-radius: var(--mlv-radius-s)}[class*=--compact] .mlv-button:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-button[class*=--compact]{--mlv-btn-font-size: var(--mlv-font-size-m);--mlv-btn-height: var(--mlv-height-s);--mlv-btn-padding: var(--mlv-padding-s);--mlv-btn-radius: var(--mlv-radius-m)}[class*=--spacious] .mlv-button:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-button[class*=--spacious]{--mlv-btn-font-size: var(--mlv-font-size-2xl);--mlv-btn-height: var(--mlv-height-l);--mlv-btn-padding: var(--mlv-padding-l);--mlv-btn-radius: var(--mlv-radius-xl)}[class*=--airy] .mlv-button:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-button[class*=--airy]{--mlv-btn-font-size: var(--mlv-font-size-3xl);--mlv-btn-height: var(--mlv-height-2xl);--mlv-btn-padding: var(--mlv-padding-l);--mlv-btn-radius: var(--mlv-radius-2xl)}.mlv-button__text{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;white-space:nowrap;max-width:100%;overflow:hidden;-webkit-user-select:none;user-select:none;font-size:inherit}.mlv-button__text>*{display:inline-block;flex-shrink:0}.mlv-button__before>*,.mlv-button__after>*{display:block}.mlv-button__icon{width:var(--mlv-icon-font-size);height:var(--mlv-icon-font-size);font-size:inherit}.mlv-button:hover{--mlv-btn-bg: var(--mlv-btn-bg-hover)}.mlv-button:active{--mlv-btn-bg: var(--mlv-btn-bg-active);transform:scale(.97)}.mlv-button[aria-pressed=true]{--mlv-btn-bg: var(--mlv-btn-bg-active);--mlv-btn-bg-hover: var(--mlv-btn-bg-active);--mlv-btn-box-shadow: inset 0 0 0 var(--mlv-stroke-width) var(--mlv-border-normal)}.mlv-button--disabled{opacity:var(--mlv-disabled-opacity);cursor:not-allowed;pointer-events:none}.mlv-button--loading{cursor:wait;pointer-events:none}.mlv-button--icon-only{--mlv-icon-font-size: 1.75em}.mlv-button--icon-only .mlv-button__text>svg:only-child{width:var(--mlv-icon-font-size);height:var(--mlv-icon-font-size)}.mlv-button--variant-primary{--mlv-btn-bg: var(--mlv-background-accent-1);--mlv-btn-bg-hover: var(--mlv-background-accent-1-hover);--mlv-btn-bg-active: var(--mlv-background-accent-1-active);--mlv-btn-text-color: var(--mlv-text-primary-on-accent-1)}.mlv-button--variant-primary:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-secondary{--mlv-btn-bg: var(--mlv-background-neutral-1);--mlv-btn-bg-hover: var(--mlv-background-neutral-1-hover);--mlv-btn-bg-active: var(--mlv-background-neutral-1-active);--mlv-btn-text-color: var(--mlv-text-action)}.mlv-button--variant-secondary:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-accent{--mlv-btn-bg: var(--mlv-background-accent-2);--mlv-btn-bg-hover: var(--mlv-background-accent-2-hover);--mlv-btn-bg-active: var(--mlv-background-accent-2-active);--mlv-btn-text-color: var(--mlv-text-primary-on-accent-2)}.mlv-button--variant-accent:focus-visible{outline-color:var(--mlv-background-accent-2-hover)}.mlv-button--variant-error{--mlv-btn-bg: var(--mlv-background-danger-1);--mlv-btn-bg-hover: var(--mlv-background-danger-1-hover);--mlv-btn-bg-active: var(--mlv-background-danger-1-active);--mlv-btn-text-color: var(--mlv-text-on-danger)}.mlv-button--variant-error:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-warning{--mlv-btn-bg: var(--mlv-background-warning-1);--mlv-btn-bg-hover: color-mix(in srgb, var(--mlv-background-warning-1) 85%, black);--mlv-btn-bg-active: color-mix(in srgb, var(--mlv-background-warning-1) 70%, black);--mlv-btn-text-color: var(--mlv-text-on-warning)}.mlv-button--variant-warning:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-info{--mlv-btn-bg: var(--mlv-palette-info-500);--mlv-btn-bg-hover: color-mix(in srgb, var(--mlv-palette-info-500) 85%, black);--mlv-btn-bg-active: color-mix(in srgb, var(--mlv-palette-info-500) 70%, black);--mlv-btn-text-color: var(--mlv-text-on-info)}.mlv-button--variant-info:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-elevated{--mlv-btn-bg: var(--mlv-elevation-bg-2);--mlv-btn-bg-hover: var(--mlv-elevation-bg-3);--mlv-btn-bg-active: var(--mlv-elevation-bg-1);--mlv-btn-text-color: var(--mlv-text-primary);--mlv-btn-box-shadow: var(--mlv-shadow-2)}.mlv-button--variant-elevated:hover{--mlv-btn-box-shadow: var(--mlv-shadow-3)}.mlv-button--variant-elevated:active{--mlv-btn-box-shadow: var(--mlv-shadow-1)}.mlv-button--variant-elevated:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-transparent,.mlv-button--variant-outlined{--mlv-btn-bg: transparent;--mlv-btn-text-color: var(--mlv-text-action)}.mlv-button--variant-transparent:focus-visible,.mlv-button--variant-outlined:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-transparent{--mlv-btn-bg-hover: var(--mlv-background-neutral-1-hover);--mlv-btn-bg-active: var(--mlv-background-neutral-1-active)}.mlv-button--variant-outlined{--mlv-btn-bg-hover: var(--mlv-background-accent-1-pale);--mlv-btn-bg-active: var(--mlv-background-neutral-1-active);border:.0625rem solid var(--mlv-border-normal)}.mlv-button--variant-outlined:hover{border-color:var(--mlv-border-strong)}.mlv-button--variant-outlined:active{border-color:var(--mlv-border-focus)}.mlv-button--shape-square,.mlv-button--shape-circle{padding:.25rem;aspect-ratio:1;height:var(--mlv-btn-height);width:var(--mlv-btn-height)}.mlv-button--shape-circle{border-radius:100%}.mlv-button--shape-pill{border-radius:var(--mlv-radius-full)}@media(prefers-reduced-motion:reduce){.mlv-button,.mlv-button *,.mlv-button:before,.mlv-button:after,[class^=mlv-button__],[class*=\" mlv-button__\"],[class^=mlv-button--],[class*=\" mlv-button--\"]{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: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvLoader, selector: "mlv-loader", inputs: ["variant", "tone", "value", "max", "indeterminate", "size", "strokeWidth", "ariaLabel", "showHint", "color", "trackColor", "glow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvButton, decorators: [{
+            type: Component,
+            args: [{ selector: 'button[mlvButton], a[mlvButton]', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, MlvLoader], hostDirectives: [
+                        {
+                            directive: MlvDensityDirective,
+                            inputs: ['mlvDensity: mlvDensity'],
+                        },
+                    ], providers: [
+                        {
+                            provide: MLV_DENSITY_ELEMENT,
+                            useValue: 'button',
+                        },
+                    ], host: {
+                        class: 'mlv-button',
+                        '[class]': '"mlv-button--variant-" + effectiveVariant() + " mlv-button--shape-" + shape()',
+                        '[class.mlv-button--disabled]': 'disabled()',
+                        '[class.mlv-button--loading]': 'loading()',
+                        '[class.mlv-button--icon-only]': '_iconOnly()',
+                        '[attr.disabled]': '(disabled() || loading()) || null',
+                        '[attr.aria-disabled]': '(disabled() || loading()) || null',
+                        '[attr.aria-busy]': 'loading() || null',
+                        '(click)': '_handleClick($event)',
+                    }, template: "@if (loading()) {\n<mlv-loader\n  variant=\"circle\"\n  color=\"currentColor\"\n  trackColor=\"transparent\"\n  indeterminate\n  [size]=\"20\"\n  [strokeWidth]=\"2\"\n/>\n} @else if (beforeRef(); as beforeTpl) {\n<div class=\"mlv-button__before\">\n  <ng-template [ngTemplateOutlet]=\"beforeTpl.templateRef\"></ng-template>\n</div>\n}\n\n<span class=\"mlv-button__text\" #textRef>\n  <ng-content />\n</span>\n\n@if (!loading() && afterRef(); as afterTpl) {\n<div class=\"mlv-button__after\">\n  <ng-template [ngTemplateOutlet]=\"afterTpl.templateRef\"></ng-template>\n</div>\n}\n", styles: [".mlv-button{box-sizing:border-box;padding:var(--mlv-btn-padding);margin:0;font-family:var(--mlv-typography-family-text);font-size:var(--mlv-btn-font-size)}.mlv-button *{box-sizing:border-box}.mlv-button{display:inline-flex;align-items:center;align-content:center;justify-content:center;gap:.25rem;appearance:none;--mlv-btn-padding: var(--mlv-padding-m);--mlv-btn-height: var(--mlv-height-m);--mlv-btn-radius: var(--mlv-radius-l);--mlv-btn-font-size: var(--mlv-font-size-l);--mlv-icon-font-size: 1.25em;font-weight:500;color:var(--mlv-btn-text-color);border:none;background-color:var(--mlv-btn-bg);transition-property:background-color,border-color,color,outline-color,box-shadow,transform;transition-duration:var(--mlv-duration-fast);transition-timing-function:var(--mlv-ease-out);border-radius:var(--mlv-btn-radius);cursor:pointer;min-height:var(--mlv-btn-height);outline:.125rem solid transparent;outline-offset:.175rem;box-shadow:var(--mlv-btn-box-shadow, none);text-decoration:none}.mlv-button *{color:inherit}[class*=--tight] .mlv-button:not([class*=--compact],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-button[class*=--tight]{--mlv-btn-font-size: var(--mlv-font-size-s);--mlv-btn-height: var(--mlv-height-xs);--mlv-btn-padding: var(--mlv-padding-xs);--mlv-btn-radius: var(--mlv-radius-s)}[class*=--compact] .mlv-button:not([class*=--tight],[class*=--comfortable],[class*=--spacious],[class*=--airy]),.mlv-button[class*=--compact]{--mlv-btn-font-size: var(--mlv-font-size-m);--mlv-btn-height: var(--mlv-height-s);--mlv-btn-padding: var(--mlv-padding-s);--mlv-btn-radius: var(--mlv-radius-m)}[class*=--spacious] .mlv-button:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--airy]),.mlv-button[class*=--spacious]{--mlv-btn-font-size: var(--mlv-font-size-2xl);--mlv-btn-height: var(--mlv-height-l);--mlv-btn-padding: var(--mlv-padding-l);--mlv-btn-radius: var(--mlv-radius-xl)}[class*=--airy] .mlv-button:not([class*=--tight],[class*=--compact],[class*=--comfortable],[class*=--spacious]),.mlv-button[class*=--airy]{--mlv-btn-font-size: var(--mlv-font-size-3xl);--mlv-btn-height: var(--mlv-height-2xl);--mlv-btn-padding: var(--mlv-padding-l);--mlv-btn-radius: var(--mlv-radius-2xl)}.mlv-button__text{display:inline-flex;align-items:center;justify-content:center;gap:.25rem;white-space:nowrap;max-width:100%;overflow:hidden;-webkit-user-select:none;user-select:none;font-size:inherit}.mlv-button__text>*{display:inline-block;flex-shrink:0}.mlv-button__before>*,.mlv-button__after>*{display:block}.mlv-button__icon{width:var(--mlv-icon-font-size);height:var(--mlv-icon-font-size);font-size:inherit}.mlv-button:hover{--mlv-btn-bg: var(--mlv-btn-bg-hover)}.mlv-button:active{--mlv-btn-bg: var(--mlv-btn-bg-active);transform:scale(.97)}.mlv-button[aria-pressed=true]{--mlv-btn-bg: var(--mlv-btn-bg-active);--mlv-btn-bg-hover: var(--mlv-btn-bg-active);--mlv-btn-box-shadow: inset 0 0 0 var(--mlv-stroke-width) var(--mlv-border-normal)}.mlv-button--disabled{opacity:var(--mlv-disabled-opacity);cursor:not-allowed;pointer-events:none}.mlv-button--loading{cursor:wait;pointer-events:none}.mlv-button--icon-only{--mlv-icon-font-size: 1.75em}.mlv-button--icon-only .mlv-button__text>svg:only-child{width:var(--mlv-icon-font-size);height:var(--mlv-icon-font-size)}.mlv-button--variant-primary{--mlv-btn-bg: var(--mlv-background-accent-1);--mlv-btn-bg-hover: var(--mlv-background-accent-1-hover);--mlv-btn-bg-active: var(--mlv-background-accent-1-active);--mlv-btn-text-color: var(--mlv-text-primary-on-accent-1)}.mlv-button--variant-primary:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-secondary{--mlv-btn-bg: var(--mlv-background-neutral-1);--mlv-btn-bg-hover: var(--mlv-background-neutral-1-hover);--mlv-btn-bg-active: var(--mlv-background-neutral-1-active);--mlv-btn-text-color: var(--mlv-text-action)}.mlv-button--variant-secondary:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-accent{--mlv-btn-bg: var(--mlv-background-accent-2);--mlv-btn-bg-hover: var(--mlv-background-accent-2-hover);--mlv-btn-bg-active: var(--mlv-background-accent-2-active);--mlv-btn-text-color: var(--mlv-text-primary-on-accent-2)}.mlv-button--variant-accent:focus-visible{outline-color:var(--mlv-background-accent-2-hover)}.mlv-button--variant-error{--mlv-btn-bg: var(--mlv-background-danger-1);--mlv-btn-bg-hover: var(--mlv-background-danger-1-hover);--mlv-btn-bg-active: var(--mlv-background-danger-1-active);--mlv-btn-text-color: var(--mlv-text-on-danger)}.mlv-button--variant-error:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-warning{--mlv-btn-bg: var(--mlv-background-warning-1);--mlv-btn-bg-hover: color-mix(in srgb, var(--mlv-background-warning-1) 85%, black);--mlv-btn-bg-active: color-mix(in srgb, var(--mlv-background-warning-1) 70%, black);--mlv-btn-text-color: var(--mlv-text-on-warning)}.mlv-button--variant-warning:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-info{--mlv-btn-bg: var(--mlv-palette-info-500);--mlv-btn-bg-hover: color-mix(in srgb, var(--mlv-palette-info-500) 85%, black);--mlv-btn-bg-active: color-mix(in srgb, var(--mlv-palette-info-500) 70%, black);--mlv-btn-text-color: var(--mlv-text-on-info)}.mlv-button--variant-info:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-elevated{--mlv-btn-bg: var(--mlv-elevation-bg-2);--mlv-btn-bg-hover: var(--mlv-elevation-bg-3);--mlv-btn-bg-active: var(--mlv-elevation-bg-1);--mlv-btn-text-color: var(--mlv-text-primary);--mlv-btn-box-shadow: var(--mlv-shadow-2)}.mlv-button--variant-elevated:hover{--mlv-btn-box-shadow: var(--mlv-shadow-3)}.mlv-button--variant-elevated:active{--mlv-btn-box-shadow: var(--mlv-shadow-1)}.mlv-button--variant-elevated:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-transparent,.mlv-button--variant-outlined{--mlv-btn-bg: transparent;--mlv-btn-text-color: var(--mlv-text-action)}.mlv-button--variant-transparent:focus-visible,.mlv-button--variant-outlined:focus-visible{outline-color:var(--mlv-border-focus)}.mlv-button--variant-transparent{--mlv-btn-bg-hover: var(--mlv-background-neutral-1-hover);--mlv-btn-bg-active: var(--mlv-background-neutral-1-active)}.mlv-button--variant-outlined{--mlv-btn-bg-hover: var(--mlv-background-accent-1-pale);--mlv-btn-bg-active: var(--mlv-background-neutral-1-active);border:.0625rem solid var(--mlv-border-normal)}.mlv-button--variant-outlined:hover{border-color:var(--mlv-border-strong)}.mlv-button--variant-outlined:active{border-color:var(--mlv-border-focus)}.mlv-button--shape-square,.mlv-button--shape-circle{padding:.25rem;aspect-ratio:1;height:var(--mlv-btn-height);width:var(--mlv-btn-height)}.mlv-button--shape-circle{border-radius:100%}.mlv-button--shape-pill{border-radius:var(--mlv-radius-full)}@media(prefers-reduced-motion:reduce){.mlv-button,.mlv-button *,.mlv-button:before,.mlv-button:after,[class^=mlv-button__],[class*=\" mlv-button__\"],[class^=mlv-button--],[class*=\" mlv-button--\"]{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:var(--mlv-duration-instant)!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], shape: [{ type: i0.Input, args: [{ isSignal: true, alias: "shape", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], beforeRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvButtonBefore), { isSignal: true }] }], afterRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvButtonAfter), { isSignal: true }] }], _iconDirective: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvButtonIcon), { isSignal: true }] }], _textRef: [{ type: i0.ViewChild, args: ['textRef', { isSignal: true }] }] } });
+//# sourceMappingURL=button.js.map

package/esm2022/button/lib/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../../../libs/core/button/src/lib/button/button.ts","../../../../../../../libs/core/button/src/lib/button/button.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  afterRenderEffect,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChild,\n  inject,\n  input,\n  signal,\n  viewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport type { ElementRef } from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport {\n  MlvButtonAfter,\n  MlvButtonBefore,\n  MlvButtonIcon,\n} from '../button.directives';\nimport { NgTemplateOutlet } from '@angular/common';\nimport {\n  MLV_DENSITY_ELEMENT,\n  MlvDensityDirective,\n} from '@malva-ui/cdk/density';\nimport { MlvLoader } from '@malva-ui/core/loader';\nimport type { MlvButtonShape, MlvButtonVariant } from '../button.types';\nimport { MLV_BUTTON_VARIANT } from '../button-variant.token';\n\nexport type { MlvButtonShape, MlvButtonVariant } from '../button.types';\n\n/**\n * Shapes whose width equals their height. They exist to hold a single icon, so\n * they drive both the icon-only sizing and the neutral default variant.\n */\nconst ICON_ONLY_SHAPES: readonly MlvButtonShape[] = ['circle', 'square'];\n\n@Component({\n  // Attribute-selector component — camelCase [mlvX] is the documented pattern\n  // (see .claude/rules/angular-component.md); the rule only models kebab-case.\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'button[mlvButton], a[mlvButton]',\n  templateUrl: './button.html',\n  styleUrl: './button.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [NgTemplateOutlet, MlvLoader],\n  hostDirectives: [\n    {\n      directive: MlvDensityDirective,\n      inputs: ['mlvDensity: mlvDensity'],\n    },\n  ],\n  providers: [\n    {\n      provide: MLV_DENSITY_ELEMENT,\n      useValue: 'button',\n    },\n  ],\n  host: {\n    class: 'mlv-button',\n    '[class]':\n      '\"mlv-button--variant-\" + effectiveVariant() + \" mlv-button--shape-\" + shape()',\n    '[class.mlv-button--disabled]': 'disabled()',\n    '[class.mlv-button--loading]': 'loading()',\n    '[class.mlv-button--icon-only]': '_iconOnly()',\n    '[attr.disabled]': '(disabled() || loading()) || null',\n    '[attr.aria-disabled]': '(disabled() || loading()) || null',\n    '[attr.aria-busy]': 'loading() || null',\n    '(click)': '_handleClick($event)',\n  },\n})\nexport class MlvButton {\n  /**\n   * Visual treatment for this button. When omitted, the closest button group,\n   * split button, or toggle supplies it; otherwise the fallback depends on the\n   * shape — `secondary` for the icon-only `square`/`circle` shapes and\n   * `primary` for every other shape.\n   */\n  readonly variant = input<MlvButtonVariant | undefined>(undefined);\n\n  /** Shape of the button. Circle and square are intended for icon-only actions. */\n  readonly shape = input<MlvButtonShape>('default');\n\n  /** Whether the native button is disabled. */\n  readonly disabled = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** Whether the button is waiting for an asynchronous action to complete. */\n  readonly loading = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** @private Optional ancestor-provided default visual treatment. */\n  private readonly _variantAccessor = inject(MLV_BUTTON_VARIANT, {\n    optional: true,\n  });\n\n  /**\n   * The visual treatment after resolving local, inherited, and default values.\n   *\n   * The final fallback is shape-aware: a bare `square`/`circle` button is an\n   * icon action, and rendering a row of them as saturated `primary` CTAs was\n   * never the intent, so they fall back to the neutral `secondary` treatment.\n   * An explicit `variant` and an ancestor `MLV_BUTTON_VARIANT` both still win.\n   */\n  readonly effectiveVariant = computed<MlvButtonVariant>(\n    () =>\n      this.variant() ??\n      this._variantAccessor?.effectiveVariant() ??\n      (this._iconShape() ? 'secondary' : 'primary'),\n  );\n\n  /** @protected Whether `shape` is one of the square/circle icon-only shapes. */\n  protected readonly _iconShape = computed(() =>\n    ICON_ONLY_SHAPES.includes(this.shape()),\n  );\n\n  /**\n   * @protected True for a circle/square button whose content is only an icon —\n   * either marked with `mlvButtonIcon` or inferred from an empty label slot.\n   * Drives the icon-only modifier.\n   */\n  protected readonly _iconOnly = computed(\n    () =>\n      this._iconShape() &&\n      (!!this._iconDirective() || !this._hasProjectedText()),\n  );\n\n  /** @protected Template slot rendered before the button text. */\n  protected readonly beforeRef = contentChild(MlvButtonBefore);\n\n  /** @protected Template slot rendered after the button text. */\n  protected readonly afterRef = contentChild(MlvButtonAfter);\n\n  /** @private Projected icon directive, used to detect icon-only buttons. */\n  private readonly _iconDirective = contentChild(MlvButtonIcon);\n\n  /** @private The label slot, read back after render to detect icon-only content. */\n  private readonly _textRef =\n    viewChild.required<ElementRef<HTMLElement>>('textRef');\n\n  /**\n   * @private Whether the default content slot rendered any non-whitespace text.\n   *\n   * Starts `true` so a button that never reaches a browser render — server-side\n   * rendering, where `afterRenderEffect` does not run — keeps the pre-inference\n   * behaviour instead of guessing icon-only.\n   */\n  private readonly _hasProjectedText = signal(true);\n\n  constructor() {\n    // `mlvButtonIcon` is optional in practice: icon buttons are overwhelmingly\n    // written as `<button mlvButton shape=\"circle\"><svg lucideX /></button>`,\n    // and without the directive nothing marked them icon-only, so the icon kept\n    // its intrinsic size inside the label slot. The slot holds projected\n    // content, so the only way to know whether it carries real text is to read\n    // it back once the DOM is written. The effect re-runs when the signals read\n    // below change rather than on every render pass, which keeps this to one\n    // `textContent` read per button per relevant change. Text that appears or\n    // disappears inside an already-rendered icon-only button is not observed —\n    // annotate the icon with `mlvButtonIcon` for that case.\n    afterRenderEffect(() => {\n      this.shape();\n      this.loading();\n      this._iconDirective();\n      const text = this._textRef().nativeElement.textContent ?? '';\n      this._hasProjectedText.set(text.trim().length > 0);\n    });\n  }\n\n  /** @protected Prevents activation while the button is disabled or loading. */\n  protected _handleClick(event: Event): void {\n    if (this.disabled() || this.loading()) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  }\n}\n","@if (loading()) {\n<mlv-loader\n  variant=\"circle\"\n  color=\"currentColor\"\n  trackColor=\"transparent\"\n  indeterminate\n  [size]=\"20\"\n  [strokeWidth]=\"2\"\n/>\n} @else if (beforeRef(); as beforeTpl) {\n<div class=\"mlv-button__before\">\n  <ng-template [ngTemplateOutlet]=\"beforeTpl.templateRef\"></ng-template>\n</div>\n}\n\n<span class=\"mlv-button__text\" #textRef>\n  <ng-content />\n</span>\n\n@if (!loading() && afterRef(); as afterTpl) {\n<div class=\"mlv-button__after\">\n  <ng-template [ngTemplateOutlet]=\"afterTpl.templateRef\"></ng-template>\n</div>\n}\n"]}