@malva-ui/core 0.1.13 → 0.1.14

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

@@ -1,216 +0,0 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, ViewEncapsulation, afterRenderEffect, computed, contentChild, inject, input, signal, viewChild, } from '@angular/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { NgTemplateOutlet } from '@angular/common';
-import { RouterLinkActive } from '@angular/router';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { startWith } from 'rxjs';
-import { MlvPopup, MlvPopupContainer, MlvPopupContent, } from '@malva-ui/core/popup';
-import { MlvBadge } from '@malva-ui/core/badge';
-import { MlvStatusIndicator } from '@malva-ui/core/status-indicator';
-import { MLV_SIDEBAR_I18N, MlvI18nResolverService } from '@malva-ui/i18n';
-import { SIDEBAR_CONTEXT } from '../sidebar-context';
-import { MlvSidebarItemIcon } from '../sidebar-item-icon';
-import { MlvSidebarItemTitle } from '../sidebar-item-host';
-import * as i0 from "@angular/core";
-export class MlvSidebarItem {
-    /** @private Parent sidebar context providing collapsed/flyout state. */
-    _ctx = inject(SIDEBAR_CONTEXT, { optional: true });
-    /** @private Host element, scanned for a genuinely focusable projected control. */
-    _host = inject((ElementRef));
-    /** Accessible label; used as aria-label, fallback text, and tooltip in collapsed mode. */
-    label = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-    /** Explicit active state; combined with router link detection in computedActive. */
-    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /**
-     * Optional badge/count shown on this item. Rendered as a trailing
-     * `mlv-badge` when the sidebar is expanded, and as a `mlv-status-indicator`
-     * dot (top-right of the icon) when the sidebar is collapsed — where a full
-     * badge does not fit the icon rail. `null`/`''` renders nothing.
-     *
-     * This is the sanctioned way to attach a badge; it composes with a projected
-     * `[mlvSidebarItemTitle]` (the badge renders after the custom title).
-     */
-    badge = input(null, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
-    /** Semantic tone applied to both the expanded badge and the collapsed status dot. */
-    badgeTone = input('default', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "badgeTone" }] : /* istanbul ignore next */ []));
-    /** When true, the collapsed-mode status dot pulses to draw attention. */
-    badgePulse = input(false, { ...(ngDevMode ? { debugName: "badgePulse" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    /** @private Sidebar i18n slice (used to phrase the badge count in the aria-label). */
-    _i18n = inject(MLV_SIDEBAR_I18N);
-    /** @private ICU resolver for the pluralised notification count. */
-    _resolver = inject(MlvI18nResolverService);
-    /** @protected Icon slot template projected via `[mlvSidebarItemIcon]`. */
-    iconRef = contentChild(MlvSidebarItemIcon, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "iconRef" }] : /* istanbul ignore next */ []));
-    /** @protected Custom title template projected via `[mlvSidebarItemTitle]`. */
-    titleRef = contentChild(MlvSidebarItemTitle, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "titleRef" }] : /* istanbul ignore next */ []));
-    /** @private Detects Angular router active state from a projected routerLinkActive directive. */
-    _routerLink = contentChild(RouterLinkActive, { ...(ngDevMode ? { debugName: "_routerLink" } : /* istanbul ignore next */ {}), descendants: true });
-    /** True if active() or the nested RouterLinkActive reports active. */
-    computedActive = computed(() => {
-        return this.active() || this._routerLinkActive();
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "computedActive" }] : /* istanbul ignore next */ []));
-    /** True when the sidebar is collapsed and this item is not inside a flyout. */
-    isCollapsed = computed(() => {
-        const collapsed = this._ctx?.collapsed() ?? false;
-        const inFlyout = this._ctx?.inFlyout?.() ?? false;
-        return collapsed && !inFlyout;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
-    /**
-     * @private True when the projected content contains a genuinely focusable
-     * control (an `<a href>`, `<button>`, form field, or `[tabindex="0"]`).
-     * Populated after render by scanning the host subtree — a projected
-     * `[mlvSidebarItemTitle]` that only contains text/badges does NOT count.
-     */
-    _hasProjectedFocusable = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_hasProjectedFocusable" }] : /* istanbul ignore next */ []));
-    /**
-     * Whether the host itself is the interactive control. `true` unless the
-     * projected content already contains its own focusable control — the host
-     * then behaves as a `role="button"` (or `role="menuitem"` inside a flyout)
-     * row with `tabindex="0"` and an `aria-label`. When a focusable control IS
-     * projected (e.g. a router `<a>` link), that element is the single
-     * interactive target and the host stays a presentational wrapper, avoiding an
-     * invalid `role="listitem"` (no `role="list"` ancestor) and nested focusable
-     * controls. Detection is by actual focusable content, not by the mere
-     * presence of a title template, so text/badge-only titles stay interactive.
-     */
-    _interactiveHost = computed(() => !this._hasProjectedFocusable(), /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_interactiveHost" }] : /* istanbul ignore next */ []));
-    /** @protected True while this item renders inside a collapsed-mode group flyout (a `role="menu"`). */
-    _inFlyout = computed(() => this._ctx?.inFlyout?.() ?? false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_inFlyout" }] : /* istanbul ignore next */ []));
-    /**
-     * @protected Resolved host `role`. `null` when the host is a presentational
-     * wrapper around a projected focusable control; otherwise `menuitem` inside a
-     * flyout menu, or `button` for a standalone interactive row.
-     */
-    _hostRole = computed(() => {
-        if (!this._interactiveHost())
-            return null;
-        return this._inFlyout() ? 'menuitem' : 'button';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_hostRole" }] : /* istanbul ignore next */ []));
-    /** @protected True when a non-empty badge value is set. */
-    _hasBadge = computed(() => {
-        const b = this.badge();
-        return b !== null && b !== '';
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_hasBadge" }] : /* istanbul ignore next */ []));
-    /**
-     * @protected Resolved host `aria-label`. `null` when the host is a
-     * presentational wrapper around a projected control. Otherwise the item
-     * `label()`, with the badge folded in when set (e.g. `"Inbox, 3
-     * notifications"`) — since the host `aria-label` overrides the visible badge
-     * text, this keeps the count announced in both expanded and collapsed states,
-     * and is the only carrier of the count when the collapsed dot replaces the
-     * badge.
-     */
-    _resolvedAriaLabel = computed(() => {
-        if (!this._interactiveHost())
-            return null;
-        const base = this.label();
-        if (!this._hasBadge())
-            return base;
-        return `${base}, ${this._announceBadge(this.badge())}`;
-    }, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabel" }] : /* istanbul ignore next */ []));
-    /** @private Router link active state tracked via afterRenderEffect. */
-    _routerLinkActive = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_routerLinkActive" }] : /* istanbul ignore next */ []));
-    /** @private Reference to the tooltip container for programmatic open/close. */
-    _tooltipContainer = viewChild('tooltipContainer', /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_tooltipContainer" }] : /* istanbul ignore next */ []));
-    /** @private Registered for automatic cleanup of the routerLinkActive subscription. */
-    _destroyRef = inject(DestroyRef);
-    constructor() {
-        // Detect whether the projected content contributes its own focusable control.
-        // Re-runs when the title template or collapsed state changes, since the
-        // collapsed link overlay can alter the row's focusable descendants.
-        afterRenderEffect(() => {
-            this.titleRef();
-            this.isCollapsed();
-            // `querySelector` inspects descendants only, so the host's own (reactive)
-            // tabindex is never matched — we detect a genuinely focusable *projected*
-            // control (e.g. a router `<a href>`), independent of layout geometry.
-            const focusable = this._host.nativeElement.querySelector('a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])');
-            this._hasProjectedFocusable.set(!!focusable);
-        });
-        afterRenderEffect(() => {
-            const rla = this._routerLink();
-            rla?.isActiveChange
-                .pipe(startWith(rla.isActive), takeUntilDestroyed(this._destroyRef))
-                .subscribe((isActive) => {
-                this._routerLinkActive.set(isActive);
-            });
-        });
-    }
-    /**
-     * @private Phrases a badge value for the accessible name. A pure numeric
-     * value is pluralised via the `notifications` ICU key (e.g. `"3
-     * notifications"`); any other value is announced verbatim (e.g. `"New"`).
-     */
-    _announceBadge(badge) {
-        const str = String(badge).trim();
-        if (/^\d+$/.test(str)) {
-            return this._resolver.resolve(this._i18n(), 'notifications', { count: Number(str) });
-        }
-        return str;
-    }
-    /** @protected Activates the host on Enter/Space when it is the interactive control. */
-    _onKeyActivate(event) {
-        // When a projected title link is present it is the interactive element and
-        // handles its own keyboard activation natively — do nothing here to avoid
-        // activating twice.
-        if (!this._interactiveHost())
-            return;
-        event.preventDefault();
-        event.currentTarget.click();
-    }
-    /** @protected Opens the collapsed-mode tooltip on hover/focus. */
-    _onMouseEnter() {
-        if (this.isCollapsed()) {
-            this._tooltipContainer()?.open();
-        }
-    }
-    /** @protected Closes the collapsed-mode tooltip on mouse-leave/blur. */
-    _onMouseLeave() {
-        this._tooltipContainer()?.close();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvSidebarItem, isStandalone: true, selector: "mlv-sidebar-item", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeTone: { classPropertyName: "badgeTone", publicName: "badgeTone", isSignal: true, isRequired: false, transformFunction: null }, badgePulse: { classPropertyName: "badgePulse", publicName: "badgePulse", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "keydown.enter": "_onKeyActivate($event)", "keydown.space": "_onKeyActivate($event)", "mouseenter": "_onMouseEnter()", "mouseleave": "_onMouseLeave()", "focusin": "_onMouseEnter()", "focusout": "_onMouseLeave()" }, properties: { "class.mlv-sidebar-item--active": "computedActive()", "class.mlv-sidebar-item--collapsed": "isCollapsed()", "attr.role": "_hostRole()", "attr.tabindex": "_interactiveHost() ? 0 : null", "attr.aria-label": "_resolvedAriaLabel()", "attr.aria-current": "computedActive() ? \"page\" : null" }, classAttribute: "mlv-sidebar-item" }, queries: [{ propertyName: "iconRef", first: true, predicate: MlvSidebarItemIcon, descendants: true, isSignal: true }, { propertyName: "titleRef", first: true, predicate: MlvSidebarItemTitle, descendants: true, isSignal: true }, { propertyName: "_routerLink", first: true, predicate: RouterLinkActive, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "_tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<span class=\"mlv-sidebar-item__icon\" aria-hidden=\"true\">\n  <ng-template [ngTemplateOutlet]=\"iconRef()?.templateRef ?? null\" />\n\n  <!-- Collapsed rail: status dot replaces the badge, pinned to the icon's top-right corner. Decorative \u2014 the count is folded into the host aria-label. -->\n  @if (isCollapsed() && _hasBadge()) {\n  <mlv-status-indicator\n    class=\"mlv-sidebar-item__status\"\n    [tone]=\"badgeTone()\"\n    [pulse]=\"badgePulse()\"\n  />\n  }\n</span>\n\n<!-- The label stays mounted for an interruptible CSS fade, but becomes inert and clipped immediately. -->\n<span\n  class=\"mlv-sidebar-item__label\"\n  [attr.aria-hidden]=\"isCollapsed() ? 'true' : null\"\n  [attr.inert]=\"isCollapsed() ? '' : null\"\n>\n  @if (titleRef()?.templateRef; as titleTpl) {\n  <ng-template [ngTemplateOutlet]=\"titleTpl\"></ng-template>\n  } @else { {{ label() }} }\n</span>\n@if (_hasBadge()) {\n<mlv-badge\n  class=\"mlv-sidebar-item__badge\"\n  [tone]=\"badgeTone()\"\n  muted\n  mlvDensity=\"tight\"\n  aria-hidden=\"true\"\n  >{{ badge() }}</mlv-badge\n>\n}\n\n<!-- Link overlay: covers the icon area when fully collapsed so the router link is still clickable -->\n@if ( isCollapsed() && _hasProjectedFocusable() && titleRef()?.templateRef; as\nlinkTpl ) {\n<span class=\"mlv-sidebar-item__link-overlay\">\n  <ng-template [ngTemplateOutlet]=\"linkTpl\" />\n</span>\n}\n\n<!-- Tooltip \u2014 shown on hover/focus in collapsed mode via mlv-popup -->\n<mlv-popup-container #tooltipContainer class=\"mlv-sidebar-item__tooltip-anchor\">\n  <mlv-popup\n    panelRole=\"tooltip\"\n    position=\"right-start\"\n    [hasShadow]=\"true\"\n    [hasBackdrop]=\"false\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-item__tooltip-container\"\n  >\n    <ng-template mlvPopupContent>{{ label() }}</ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n", styles: [".mlv-sidebar-item{position:relative;display:grid;grid-template-columns:var(--mlv-sidebar-icon-column-width, 3.5rem) minmax(0,1fr) auto;align-items:center;width:100%;min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border-radius:var(--mlv-radius-m);font-size:var(--mlv-font-size-l);color:var(--mlv-text-secondary);line-height:var(--mlv-line-height-snug);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-sidebar-item *{color:inherit}.mlv-sidebar-item__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0}.mlv-sidebar-item__icon>*{flex-shrink:0}.mlv-sidebar-item svg{flex-shrink:0;width:1.25rem;height:1.25rem}.mlv-sidebar-item:hover,.mlv-sidebar-item:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-item:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-sidebar-item--active{color:var(--mlv-text-action)!important;font-weight:600}.mlv-sidebar-item.mlv-sidebar-item--active,.mlv-sidebar-item.mlv-sidebar-item--active:hover,.mlv-sidebar-item.mlv-sidebar-item--active:focus-visible{background-color:var(--mlv-sidebar-active-bg, var(--mlv-background-accent-1-pale))}.mlv-sidebar-item__label{min-width:0;padding-right:var(--mlv-spacing-2);font-size:var(--mlv-font-size-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:translate(0);visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-item__label>a{color:inherit;text-decoration:inherit;display:block}.mlv-sidebar-item__badge{flex-shrink:0;margin-right:var(--mlv-spacing-2);opacity:1;visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-item__status{position:absolute;top:calc(50% - .625rem);right:calc(50% - .625rem);transform:translate(50%,-50%);pointer-events:none}.mlv-sidebar-item__link-overlay{position:absolute;inset:0;pointer-events:none}.mlv-sidebar-item__link-overlay>a{display:block;position:absolute;inset:0;pointer-events:auto;font-size:0;color:transparent;text-decoration:none;border-radius:var(--mlv-radius-m)}.mlv-sidebar-item__link-overlay>a:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-sidebar-item__tooltip-anchor{position:absolute;inset:0;pointer-events:none;padding:var(--mlv-padding-s)}.mlv-sidebar-item__tooltip-container.mlv-popup{padding:var(--mlv-padding-m)}.mlv-sidebar-item--collapsed .mlv-sidebar-item__label{opacity:0;transform:translate(-.25rem);visibility:hidden;pointer-events:none;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear var(--mlv-duration-normal)}.mlv-sidebar-item--collapsed .mlv-sidebar-item__badge{margin-right:0;opacity:0;visibility:hidden;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear var(--mlv-duration-normal)}@media(prefers-reduced-motion:reduce){.mlv-sidebar-item__label,.mlv-sidebar-item__badge{transition-duration:var(--mlv-duration-instant)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MlvPopupContainer, selector: "mlv-popup-container" }, { 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: MlvPopupContent, selector: "[mlvPopupContent]" }, { kind: "component", type: MlvBadge, selector: "mlv-badge", inputs: ["tone", "rounded", "muted"] }, { kind: "component", type: MlvStatusIndicator, selector: "mlv-status-indicator", inputs: ["tone", "pulse", "size", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItem, decorators: [{
-            type: Component,
-            args: [{ selector: 'mlv-sidebar-item', imports: [
-                        NgTemplateOutlet,
-                        MlvPopupContainer,
-                        MlvPopup,
-                        MlvPopupContent,
-                        MlvBadge,
-                        MlvStatusIndicator,
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'mlv-sidebar-item',
-                        '[class.mlv-sidebar-item--active]': 'computedActive()',
-                        '[class.mlv-sidebar-item--collapsed]': 'isCollapsed()',
-                        '[attr.role]': '_hostRole()',
-                        '[attr.tabindex]': '_interactiveHost() ? 0 : null',
-                        '[attr.aria-label]': '_resolvedAriaLabel()',
-                        '[attr.aria-current]': 'computedActive() ? "page" : null',
-                        '(keydown.enter)': '_onKeyActivate($event)',
-                        '(keydown.space)': '_onKeyActivate($event)',
-                        '(mouseenter)': '_onMouseEnter()',
-                        '(mouseleave)': '_onMouseLeave()',
-                        '(focusin)': '_onMouseEnter()',
-                        '(focusout)': '_onMouseLeave()',
-                    }, template: "<span class=\"mlv-sidebar-item__icon\" aria-hidden=\"true\">\n  <ng-template [ngTemplateOutlet]=\"iconRef()?.templateRef ?? null\" />\n\n  <!-- Collapsed rail: status dot replaces the badge, pinned to the icon's top-right corner. Decorative \u2014 the count is folded into the host aria-label. -->\n  @if (isCollapsed() && _hasBadge()) {\n  <mlv-status-indicator\n    class=\"mlv-sidebar-item__status\"\n    [tone]=\"badgeTone()\"\n    [pulse]=\"badgePulse()\"\n  />\n  }\n</span>\n\n<!-- The label stays mounted for an interruptible CSS fade, but becomes inert and clipped immediately. -->\n<span\n  class=\"mlv-sidebar-item__label\"\n  [attr.aria-hidden]=\"isCollapsed() ? 'true' : null\"\n  [attr.inert]=\"isCollapsed() ? '' : null\"\n>\n  @if (titleRef()?.templateRef; as titleTpl) {\n  <ng-template [ngTemplateOutlet]=\"titleTpl\"></ng-template>\n  } @else { {{ label() }} }\n</span>\n@if (_hasBadge()) {\n<mlv-badge\n  class=\"mlv-sidebar-item__badge\"\n  [tone]=\"badgeTone()\"\n  muted\n  mlvDensity=\"tight\"\n  aria-hidden=\"true\"\n  >{{ badge() }}</mlv-badge\n>\n}\n\n<!-- Link overlay: covers the icon area when fully collapsed so the router link is still clickable -->\n@if ( isCollapsed() && _hasProjectedFocusable() && titleRef()?.templateRef; as\nlinkTpl ) {\n<span class=\"mlv-sidebar-item__link-overlay\">\n  <ng-template [ngTemplateOutlet]=\"linkTpl\" />\n</span>\n}\n\n<!-- Tooltip \u2014 shown on hover/focus in collapsed mode via mlv-popup -->\n<mlv-popup-container #tooltipContainer class=\"mlv-sidebar-item__tooltip-anchor\">\n  <mlv-popup\n    panelRole=\"tooltip\"\n    position=\"right-start\"\n    [hasShadow]=\"true\"\n    [hasBackdrop]=\"false\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-item__tooltip-container\"\n  >\n    <ng-template mlvPopupContent>{{ label() }}</ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n", styles: [".mlv-sidebar-item{position:relative;display:grid;grid-template-columns:var(--mlv-sidebar-icon-column-width, 3.5rem) minmax(0,1fr) auto;align-items:center;width:100%;min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border-radius:var(--mlv-radius-m);font-size:var(--mlv-font-size-l);color:var(--mlv-text-secondary);line-height:var(--mlv-line-height-snug);cursor:pointer;outline:none;-webkit-user-select:none;user-select:none;transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-sidebar-item *{color:inherit}.mlv-sidebar-item__icon{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0}.mlv-sidebar-item__icon>*{flex-shrink:0}.mlv-sidebar-item svg{flex-shrink:0;width:1.25rem;height:1.25rem}.mlv-sidebar-item:hover,.mlv-sidebar-item:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-item:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-sidebar-item--active{color:var(--mlv-text-action)!important;font-weight:600}.mlv-sidebar-item.mlv-sidebar-item--active,.mlv-sidebar-item.mlv-sidebar-item--active:hover,.mlv-sidebar-item.mlv-sidebar-item--active:focus-visible{background-color:var(--mlv-sidebar-active-bg, var(--mlv-background-accent-1-pale))}.mlv-sidebar-item__label{min-width:0;padding-right:var(--mlv-spacing-2);font-size:var(--mlv-font-size-l);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:translate(0);visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-item__label>a{color:inherit;text-decoration:inherit;display:block}.mlv-sidebar-item__badge{flex-shrink:0;margin-right:var(--mlv-spacing-2);opacity:1;visibility:visible;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear}.mlv-sidebar-item__status{position:absolute;top:calc(50% - .625rem);right:calc(50% - .625rem);transform:translate(50%,-50%);pointer-events:none}.mlv-sidebar-item__link-overlay{position:absolute;inset:0;pointer-events:none}.mlv-sidebar-item__link-overlay>a{display:block;position:absolute;inset:0;pointer-events:auto;font-size:0;color:transparent;text-decoration:none;border-radius:var(--mlv-radius-m)}.mlv-sidebar-item__link-overlay>a:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-sidebar-item__tooltip-anchor{position:absolute;inset:0;pointer-events:none;padding:var(--mlv-padding-s)}.mlv-sidebar-item__tooltip-container.mlv-popup{padding:var(--mlv-padding-m)}.mlv-sidebar-item--collapsed .mlv-sidebar-item__label{opacity:0;transform:translate(-.25rem);visibility:hidden;pointer-events:none;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),transform var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear var(--mlv-duration-normal)}.mlv-sidebar-item--collapsed .mlv-sidebar-item__badge{margin-right:0;opacity:0;visibility:hidden;transition:opacity var(--mlv-duration-normal) var(--mlv-ease-out-strong),visibility var(--mlv-duration-instant) linear var(--mlv-duration-normal)}@media(prefers-reduced-motion:reduce){.mlv-sidebar-item__label,.mlv-sidebar-item__badge{transition-duration:var(--mlv-duration-instant)}}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], badgeTone: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeTone", required: false }] }], badgePulse: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgePulse", required: false }] }], iconRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSidebarItemIcon), { isSignal: true }] }], titleRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => MlvSidebarItemTitle), { isSignal: true }] }], _routerLink: [{ type: i0.ContentChild, args: [i0.forwardRef(() => RouterLinkActive), { ...{
-                            descendants: true,
-                        }, isSignal: true }] }], _tooltipContainer: [{ type: i0.ViewChild, args: ['tooltipContainer', { isSignal: true }] }] } });
-//# sourceMappingURL=sidebar-item.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar-item.js","sourceRoot":"","sources":["../../../../../../../libs/core/sidebar/src/lib/sidebar-item/sidebar-item.ts","../../../../../../../libs/core/sidebar/src/lib/sidebar-item/sidebar-item.html"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,UAAU,EACV,UAAU,EACV,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,YAAY,EACZ,MAAM,EACN,KAAK,EACL,MAAM,EACN,SAAS,GACV,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AACjC,OAAO,EACL,QAAQ,EACR,iBAAiB,EACjB,eAAe,GAChB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAqB,MAAM,sBAAsB,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AAC1E,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;;AAgC3D,MAAM,OAAO,cAAc;IACzB,wEAAwE;IACvD,IAAI,GAAG,MAAM,CAAC,eAAe,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;IAEpE,kFAAkF;IACjE,KAAK,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAEzD,0FAA0F;IACjF,KAAK,GAAG,KAAK,CAAC,QAAQ;8EAAU,CAAC;IAE1C,oFAAoF;IAC3E,MAAM,GAAG,KAAK,CAAwB,KAAK,8EAClD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH;;;;;;;;OAQG;IACM,KAAK,GAAG,KAAK,CAAyB,IAAI;8EAAC,CAAC;IAErD,qFAAqF;IAC5E,SAAS,GAAG,KAAK,CAAe,SAAS;kFAAC,CAAC;IAEpD,yEAAyE;IAChE,UAAU,GAAG,KAAK,CAAwB,KAAK,kFACtD,SAAS,EAAE,qBAAqB,GAChC,CAAC;IAEH,sFAAsF;IACrE,KAAK,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;IAClD,mEAAmE;IAClD,SAAS,GAAG,MAAM,CAAC,sBAAsB,CAAC,CAAC;IAE5D,0EAA0E;IACvD,OAAO,GAAG,YAAY,CAAC,kBAAkB;gFAAC,CAAC;IAC9D,8EAA8E;IAC3D,QAAQ,GAAG,YAAY,CAAC,mBAAmB;iFAAC,CAAC;IAEhE,gGAAgG;IAC/E,WAAW,GAAG,YAAY,CAAC,gBAAgB,mFAC1D,WAAW,EAAE,IAAI,GACjB,CAAC;IAEH,sEAAsE;IAC7D,cAAc,GAAG,QAAQ,CAAC,GAAG,EAAE;QACtC,OAAO,IAAI,CAAC,MAAM,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACnD,CAAC;uFAAC,CAAC;IAEH,+EAA+E;IACtE,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE;QACnC,MAAM,SAAS,GAAG,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,KAAK,CAAC;QAClD,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,IAAI,KAAK,CAAC;QAClD,OAAO,SAAS,IAAI,CAAC,QAAQ,CAAC;IAChC,CAAC;oFAAC,CAAC;IAEH;;;;;OAKG;IACgB,sBAAsB,GAAG,MAAM,CAAC,KAAK;+FAAC,CAAC;IAE1D;;;;;;;;;;OAUG;IACgB,gBAAgB,GAAG,QAAQ,CAC5C,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,sBAAsB,EAAE;yFACrC,CAAC;IAEF,sGAAsG;IACnF,SAAS,GAAG,QAAQ,CACrC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,IAAI,KAAK;kFACvC,CAAC;IAEF;;;;OAIG;IACgB,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC3C,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAAE,OAAO,IAAI,CAAC;QAC1C,OAAO,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,CAAC;kFAAC,CAAC;IAEH,2DAA2D;IACxC,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC3C,MAAM,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QACvB,OAAO,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;IAChC,CAAC;kFAAC,CAAC;IAEH;;;;;;;;OAQG;IACgB,kBAAkB,GAAG,QAAQ,CAAgB,GAAG,EAAE;QACnE,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAAE,OAAO,IAAI,CAAC;QAC1C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YAAE,OAAO,IAAI,CAAC;QACnC,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,EAAqB,CAAC,EAAE,CAAC;IAC5E,CAAC;2FAAC,CAAC;IAEH,uEAAuE;IACtD,iBAAiB,GAAG,MAAM,CAAC,KAAK;0FAAC,CAAC;IAEnD,+EAA+E;IAC5D,iBAAiB,GAClC,SAAS,CAAoB,kBAAkB;0FAAC,CAAC;IAEnD,sFAAsF;IACrE,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAClD;QACE,8EAA8E;QAC9E,wEAAwE;QACxE,oEAAoE;QACpE,iBAAiB,CAAC,GAAG,EAAE;YACrB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,0EAA0E;YAC1E,0EAA0E;YAC1E,sEAAsE;YACtE,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,aAAa,CACtD,2EAA2E,CAC5E,CAAC;YACF,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;QAEH,iBAAiB,CAAC,GAAG,EAAE;YACrB,MAAM,GAAG,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;YAC/B,GAAG,EAAE,cAAc;iBAChB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;iBACnE,SAAS,CAAC,CAAC,QAAQ,EAAE,EAAE;gBACtB,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;;OAIG;IACK,cAAc,CAAC,KAAsB;QAC3C,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;QACjC,IAAI,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACtB,OAAO,IAAI,CAAC,SAAS,CAAC,OAAO,CAC3B,IAAI,CAAC,KAAK,EAAuC,EACjD,eAAe,EACf,EAAE,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,EAAE,CACvB,CAAC;QACJ,CAAC;QACD,OAAO,GAAG,CAAC;IACb,CAAC;IAED,uFAAuF;IAC7E,cAAc,CAAC,KAAY;QACnC,2EAA2E;QAC3E,0EAA0E;QAC1E,oBAAoB;QACpB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAAE,OAAO;QACrC,KAAK,CAAC,cAAc,EAAE,CAAC;QACtB,KAAK,CAAC,aAA6B,CAAC,KAAK,EAAE,CAAC;IAC/C,CAAC;IAED,kEAAkE;IACxD,aAAa;QACrB,IAAI,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;YACvB,IAAI,CAAC,iBAAiB,EAAE,EAAE,IAAI,EAAE,CAAC;QACnC,CAAC;IACH,CAAC;IAED,wEAAwE;IAC9D,aAAa;QACrB,IAAI,CAAC,iBAAiB,EAAE,EAAE,KAAK,EAAE,CAAC;IACpC,CAAC;uGAjMU,cAAc;2FAAd,cAAc,ozCAwCiB,kBAAkB,2FAEjB,mBAAmB,8FAGlB,gBAAgB,uMC3G9D,40DAuDA,6iHDpBI,gBAAgB,oJAChB,iBAAiB,gEACjB,QAAQ,8dACR,eAAe,8DACf,QAAQ,4FACR,kBAAkB;;2FAsBT,cAAc;kBA9B1B,SAAS;+BACE,kBAAkB,WACnB;wBACP,gBAAgB;wBAChB,iBAAiB;wBACjB,QAAQ;wBACR,eAAe;wBACf,QAAQ;wBACR,kBAAkB;qBACnB,iBAGc,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,kBAAkB;wBACzB,kCAAkC,EAAE,kBAAkB;wBACtD,qCAAqC,EAAE,eAAe;wBACtD,aAAa,EAAE,aAAa;wBAC5B,iBAAiB,EAAE,+BAA+B;wBAClD,mBAAmB,EAAE,sBAAsB;wBAC3C,qBAAqB,EAAE,kCAAkC;wBACzD,iBAAiB,EAAE,wBAAwB;wBAC3C,iBAAiB,EAAE,wBAAwB;wBAC3C,cAAc,EAAE,iBAAiB;wBACjC,cAAc,EAAE,iBAAiB;wBACjC,WAAW,EAAE,iBAAiB;wBAC9B,YAAY,EAAE,iBAAiB;qBAChC;2kBA0CyC,kBAAkB,0FAEjB,mBAAmB,6FAGlB,gBAAgB,QAAE;4BAC5D,WAAW,EAAE,IAAI;yBAClB,yEA+E8B,kBAAkB","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  ViewEncapsulation,\n  afterRenderEffect,\n  computed,\n  contentChild,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { RouterLinkActive } from '@angular/router';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { startWith } from 'rxjs';\nimport {\n  MlvPopup,\n  MlvPopupContainer,\n  MlvPopupContent,\n} from '@malva-ui/core/popup';\nimport { MlvBadge, type MlvBadgeTone } from '@malva-ui/core/badge';\nimport { MlvStatusIndicator } from '@malva-ui/core/status-indicator';\nimport { MLV_SIDEBAR_I18N, MlvI18nResolverService } from '@malva-ui/i18n';\nimport { SIDEBAR_CONTEXT } from '../sidebar-context';\nimport { MlvSidebarItemIcon } from '../sidebar-item-icon';\nimport { MlvSidebarItemTitle } from '../sidebar-item-host';\n\n@Component({\n  selector: 'mlv-sidebar-item',\n  imports: [\n    NgTemplateOutlet,\n    MlvPopupContainer,\n    MlvPopup,\n    MlvPopupContent,\n    MlvBadge,\n    MlvStatusIndicator,\n  ],\n  templateUrl: './sidebar-item.html',\n  styleUrl: './sidebar-item.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-sidebar-item',\n    '[class.mlv-sidebar-item--active]': 'computedActive()',\n    '[class.mlv-sidebar-item--collapsed]': 'isCollapsed()',\n    '[attr.role]': '_hostRole()',\n    '[attr.tabindex]': '_interactiveHost() ? 0 : null',\n    '[attr.aria-label]': '_resolvedAriaLabel()',\n    '[attr.aria-current]': 'computedActive() ? \"page\" : null',\n    '(keydown.enter)': '_onKeyActivate($event)',\n    '(keydown.space)': '_onKeyActivate($event)',\n    '(mouseenter)': '_onMouseEnter()',\n    '(mouseleave)': '_onMouseLeave()',\n    '(focusin)': '_onMouseEnter()',\n    '(focusout)': '_onMouseLeave()',\n  },\n})\nexport class MlvSidebarItem {\n  /** @private Parent sidebar context providing collapsed/flyout state. */\n  private readonly _ctx = inject(SIDEBAR_CONTEXT, { optional: true });\n\n  /** @private Host element, scanned for a genuinely focusable projected control. */\n  private readonly _host = inject(ElementRef<HTMLElement>);\n\n  /** Accessible label; used as aria-label, fallback text, and tooltip in collapsed mode. */\n  readonly label = input.required<string>();\n\n  /** Explicit active state; combined with router link detection in computedActive. */\n  readonly active = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /**\n   * Optional badge/count shown on this item. Rendered as a trailing\n   * `mlv-badge` when the sidebar is expanded, and as a `mlv-status-indicator`\n   * dot (top-right of the icon) when the sidebar is collapsed — where a full\n   * badge does not fit the icon rail. `null`/`''` renders nothing.\n   *\n   * This is the sanctioned way to attach a badge; it composes with a projected\n   * `[mlvSidebarItemTitle]` (the badge renders after the custom title).\n   */\n  readonly badge = input<string | number | null>(null);\n\n  /** Semantic tone applied to both the expanded badge and the collapsed status dot. */\n  readonly badgeTone = input<MlvBadgeTone>('default');\n\n  /** When true, the collapsed-mode status dot pulses to draw attention. */\n  readonly badgePulse = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n\n  /** @private Sidebar i18n slice (used to phrase the badge count in the aria-label). */\n  private readonly _i18n = inject(MLV_SIDEBAR_I18N);\n  /** @private ICU resolver for the pluralised notification count. */\n  private readonly _resolver = inject(MlvI18nResolverService);\n\n  /** @protected Icon slot template projected via `[mlvSidebarItemIcon]`. */\n  protected readonly iconRef = contentChild(MlvSidebarItemIcon);\n  /** @protected Custom title template projected via `[mlvSidebarItemTitle]`. */\n  protected readonly titleRef = contentChild(MlvSidebarItemTitle);\n\n  /** @private Detects Angular router active state from a projected routerLinkActive directive. */\n  private readonly _routerLink = contentChild(RouterLinkActive, {\n    descendants: true,\n  });\n\n  /** True if active() or the nested RouterLinkActive reports active. */\n  readonly computedActive = computed(() => {\n    return this.active() || this._routerLinkActive();\n  });\n\n  /** True when the sidebar is collapsed and this item is not inside a flyout. */\n  readonly isCollapsed = computed(() => {\n    const collapsed = this._ctx?.collapsed() ?? false;\n    const inFlyout = this._ctx?.inFlyout?.() ?? false;\n    return collapsed && !inFlyout;\n  });\n\n  /**\n   * @private True when the projected content contains a genuinely focusable\n   * control (an `<a href>`, `<button>`, form field, or `[tabindex=\"0\"]`).\n   * Populated after render by scanning the host subtree — a projected\n   * `[mlvSidebarItemTitle]` that only contains text/badges does NOT count.\n   */\n  protected readonly _hasProjectedFocusable = signal(false);\n\n  /**\n   * Whether the host itself is the interactive control. `true` unless the\n   * projected content already contains its own focusable control — the host\n   * then behaves as a `role=\"button\"` (or `role=\"menuitem\"` inside a flyout)\n   * row with `tabindex=\"0\"` and an `aria-label`. When a focusable control IS\n   * projected (e.g. a router `<a>` link), that element is the single\n   * interactive target and the host stays a presentational wrapper, avoiding an\n   * invalid `role=\"listitem\"` (no `role=\"list\"` ancestor) and nested focusable\n   * controls. Detection is by actual focusable content, not by the mere\n   * presence of a title template, so text/badge-only titles stay interactive.\n   */\n  protected readonly _interactiveHost = computed(\n    () => !this._hasProjectedFocusable(),\n  );\n\n  /** @protected True while this item renders inside a collapsed-mode group flyout (a `role=\"menu\"`). */\n  protected readonly _inFlyout = computed(\n    () => this._ctx?.inFlyout?.() ?? false,\n  );\n\n  /**\n   * @protected Resolved host `role`. `null` when the host is a presentational\n   * wrapper around a projected focusable control; otherwise `menuitem` inside a\n   * flyout menu, or `button` for a standalone interactive row.\n   */\n  protected readonly _hostRole = computed(() => {\n    if (!this._interactiveHost()) return null;\n    return this._inFlyout() ? 'menuitem' : 'button';\n  });\n\n  /** @protected True when a non-empty badge value is set. */\n  protected readonly _hasBadge = computed(() => {\n    const b = this.badge();\n    return b !== null && b !== '';\n  });\n\n  /**\n   * @protected Resolved host `aria-label`. `null` when the host is a\n   * presentational wrapper around a projected control. Otherwise the item\n   * `label()`, with the badge folded in when set (e.g. `\"Inbox, 3\n   * notifications\"`) — since the host `aria-label` overrides the visible badge\n   * text, this keeps the count announced in both expanded and collapsed states,\n   * and is the only carrier of the count when the collapsed dot replaces the\n   * badge.\n   */\n  protected readonly _resolvedAriaLabel = computed<string | null>(() => {\n    if (!this._interactiveHost()) return null;\n    const base = this.label();\n    if (!this._hasBadge()) return base;\n    return `${base}, ${this._announceBadge(this.badge() as string | number)}`;\n  });\n\n  /** @private Router link active state tracked via afterRenderEffect. */\n  private readonly _routerLinkActive = signal(false);\n\n  /** @private Reference to the tooltip container for programmatic open/close. */\n  protected readonly _tooltipContainer =\n    viewChild<MlvPopupContainer>('tooltipContainer');\n\n  /** @private Registered for automatic cleanup of the routerLinkActive subscription. */\n  private readonly _destroyRef = inject(DestroyRef);\n  constructor() {\n    // Detect whether the projected content contributes its own focusable control.\n    // Re-runs when the title template or collapsed state changes, since the\n    // collapsed link overlay can alter the row's focusable descendants.\n    afterRenderEffect(() => {\n      this.titleRef();\n      this.isCollapsed();\n      // `querySelector` inspects descendants only, so the host's own (reactive)\n      // tabindex is never matched — we detect a genuinely focusable *projected*\n      // control (e.g. a router `<a href>`), independent of layout geometry.\n      const focusable = this._host.nativeElement.querySelector(\n        'a[href], button, input, select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n      );\n      this._hasProjectedFocusable.set(!!focusable);\n    });\n\n    afterRenderEffect(() => {\n      const rla = this._routerLink();\n      rla?.isActiveChange\n        .pipe(startWith(rla.isActive), takeUntilDestroyed(this._destroyRef))\n        .subscribe((isActive) => {\n          this._routerLinkActive.set(isActive);\n        });\n    });\n  }\n\n  /**\n   * @private Phrases a badge value for the accessible name. A pure numeric\n   * value is pluralised via the `notifications` ICU key (e.g. `\"3\n   * notifications\"`); any other value is announced verbatim (e.g. `\"New\"`).\n   */\n  private _announceBadge(badge: string | number): string {\n    const str = String(badge).trim();\n    if (/^\\d+$/.test(str)) {\n      return this._resolver.resolve(\n        this._i18n() as unknown as Record<string, string>,\n        'notifications',\n        { count: Number(str) },\n      );\n    }\n    return str;\n  }\n\n  /** @protected Activates the host on Enter/Space when it is the interactive control. */\n  protected _onKeyActivate(event: Event): void {\n    // When a projected title link is present it is the interactive element and\n    // handles its own keyboard activation natively — do nothing here to avoid\n    // activating twice.\n    if (!this._interactiveHost()) return;\n    event.preventDefault();\n    (event.currentTarget as HTMLElement).click();\n  }\n\n  /** @protected Opens the collapsed-mode tooltip on hover/focus. */\n  protected _onMouseEnter(): void {\n    if (this.isCollapsed()) {\n      this._tooltipContainer()?.open();\n    }\n  }\n\n  /** @protected Closes the collapsed-mode tooltip on mouse-leave/blur. */\n  protected _onMouseLeave(): void {\n    this._tooltipContainer()?.close();\n  }\n}\n","<span class=\"mlv-sidebar-item__icon\" aria-hidden=\"true\">\n  <ng-template [ngTemplateOutlet]=\"iconRef()?.templateRef ?? null\" />\n\n  <!-- Collapsed rail: status dot replaces the badge, pinned to the icon's top-right corner. Decorative — the count is folded into the host aria-label. -->\n  @if (isCollapsed() && _hasBadge()) {\n  <mlv-status-indicator\n    class=\"mlv-sidebar-item__status\"\n    [tone]=\"badgeTone()\"\n    [pulse]=\"badgePulse()\"\n  />\n  }\n</span>\n\n<!-- The label stays mounted for an interruptible CSS fade, but becomes inert and clipped immediately. -->\n<span\n  class=\"mlv-sidebar-item__label\"\n  [attr.aria-hidden]=\"isCollapsed() ? 'true' : null\"\n  [attr.inert]=\"isCollapsed() ? '' : null\"\n>\n  @if (titleRef()?.templateRef; as titleTpl) {\n  <ng-template [ngTemplateOutlet]=\"titleTpl\"></ng-template>\n  } @else { {{ label() }} }\n</span>\n@if (_hasBadge()) {\n<mlv-badge\n  class=\"mlv-sidebar-item__badge\"\n  [tone]=\"badgeTone()\"\n  muted\n  mlvDensity=\"tight\"\n  aria-hidden=\"true\"\n  >{{ badge() }}</mlv-badge\n>\n}\n\n<!-- Link overlay: covers the icon area when fully collapsed so the router link is still clickable -->\n@if ( isCollapsed() && _hasProjectedFocusable() && titleRef()?.templateRef; as\nlinkTpl ) {\n<span class=\"mlv-sidebar-item__link-overlay\">\n  <ng-template [ngTemplateOutlet]=\"linkTpl\" />\n</span>\n}\n\n<!-- Tooltip — shown on hover/focus in collapsed mode via mlv-popup -->\n<mlv-popup-container #tooltipContainer class=\"mlv-sidebar-item__tooltip-anchor\">\n  <mlv-popup\n    panelRole=\"tooltip\"\n    position=\"right-start\"\n    [hasShadow]=\"true\"\n    [hasBackdrop]=\"false\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-item__tooltip-container\"\n  >\n    <ng-template mlvPopupContent>{{ label() }}</ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n"]}

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

@@ -1,39 +0,0 @@
-import { Directive, input } from '@angular/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { MlvStructural } from '@malva-ui/cdk/utils';
-import * as i0 from "@angular/core";
-export class MlvSidebarItemHost {
-    /** Whether the item is the currently active navigation target. */
-    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItemHost, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvSidebarItemHost, isStandalone: true, selector: "[mlvSidebarItem]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "treeitem", "tabindex": "0" }, properties: { "class.mlv-sidebar-item--active": "active()", "attr.aria-selected": "active()" }, classAttribute: "mlv-sidebar-item" }, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItemHost, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mlvSidebarItem]',
-                    host: {
-                        class: 'mlv-sidebar-item',
-                        '[class.mlv-sidebar-item--active]': 'active()',
-                        role: 'treeitem',
-                        '[attr.aria-selected]': 'active()',
-                        tabindex: '0',
-                    },
-                }]
-        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
-export class MlvSidebarItemTitle extends MlvStructural {
-    /**
-     * Optional active state on the directive (available but not currently
-     * consumed by `MlvSidebarItem`).
-     */
-    active = input(false, { ...(ngDevMode ? { debugName: "active" } : /* istanbul ignore next */ {}), transform: coerceBooleanProperty });
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItemTitle, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: MlvSidebarItemTitle, isStandalone: true, selector: "[mlvSidebarItemTitle]", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItemTitle, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mlvSidebarItemTitle]',
-                }]
-        }], propDecorators: { active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }] } });
-//# sourceMappingURL=sidebar-item-host.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar-item-host.js","sourceRoot":"","sources":["../../../../../../libs/core/sidebar/src/lib/sidebar-item-host.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;;AAYpD,MAAM,OAAO,kBAAkB;IAC7B,kEAAkE;IACzD,MAAM,GAAG,KAAK,CAAwB,KAAK,8EAClD,SAAS,EAAE,qBAAqB,GAChC,CAAC;uGAJQ,kBAAkB;2FAAlB,kBAAkB;;2FAAlB,kBAAkB;kBAV9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,kBAAkB;oBAC5B,IAAI,EAAE;wBACJ,KAAK,EAAE,kBAAkB;wBACzB,kCAAkC,EAAE,UAAU;wBAC9C,IAAI,EAAE,UAAU;wBAChB,sBAAsB,EAAE,UAAU;wBAClC,QAAQ,EAAE,GAAG;qBACd;iBACF;;AAWD,MAAM,OAAO,mBAAoB,SAAQ,aAAa;IACpD;;;OAGG;IACM,MAAM,GAAG,KAAK,CAAwB,KAAK,8EAClD,SAAS,EAAE,qBAAqB,GAChC,CAAC;uGAPQ,mBAAmB;2FAAnB,mBAAmB;;2FAAnB,mBAAmB;kBAH/B,SAAS;mBAAC;oBACT,QAAQ,EAAE,uBAAuB;iBAClC","sourcesContent":["import { Directive, input } from '@angular/core';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { MlvStructural } from '@malva-ui/cdk/utils';\n\n@Directive({\n  selector: '[mlvSidebarItem]',\n  host: {\n    class: 'mlv-sidebar-item',\n    '[class.mlv-sidebar-item--active]': 'active()',\n    role: 'treeitem',\n    '[attr.aria-selected]': 'active()',\n    tabindex: '0',\n  },\n})\nexport class MlvSidebarItemHost {\n  /** Whether the item is the currently active navigation target. */\n  readonly active = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n}\n\n@Directive({\n  selector: '[mlvSidebarItemTitle]',\n})\nexport class MlvSidebarItemTitle extends MlvStructural {\n  /**\n   * Optional active state on the directive (available but not currently\n   * consumed by `MlvSidebarItem`).\n   */\n  readonly active = input<boolean, BooleanInput>(false, {\n    transform: coerceBooleanProperty,\n  });\n}\n"]}

package/esm2022/sidebar/lib/sidebar-item-icon.js

@@ -1,14 +0,0 @@
-import { Directive } from '@angular/core';
-import { MlvStructural } from '@malva-ui/cdk/utils';
-import * as i0 from "@angular/core";
-export class MlvSidebarItemIcon extends MlvStructural {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItemIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSidebarItemIcon, isStandalone: true, selector: "[mlvSidebarItemIcon]", usesInheritance: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarItemIcon, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[mlvSidebarItemIcon]',
-                }]
-        }] });
-//# sourceMappingURL=sidebar-item-icon.js.map

package/esm2022/sidebar/lib/sidebar-item-icon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar-item-icon.js","sourceRoot":"","sources":["../../../../../../libs/core/sidebar/src/lib/sidebar-item-icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;;AAKpD,MAAM,OAAO,kBAAmB,SAAQ,aAAa;uGAAxC,kBAAkB;2FAAlB,kBAAkB;;2FAAlB,kBAAkB;kBAH9B,SAAS;mBAAC;oBACT,QAAQ,EAAE,sBAAsB;iBACjC","sourcesContent":["import { Directive } from '@angular/core';\nimport { MlvStructural } from '@malva-ui/cdk/utils';\n\n@Directive({\n  selector: '[mlvSidebarItemIcon]',\n})\nexport class MlvSidebarItemIcon extends MlvStructural {}\n"]}

package/esm2022/sidebar/lib/sidebar-mode.js

@@ -1 +0,0 @@
-//# sourceMappingURL=sidebar-mode.js.map

package/esm2022/sidebar/lib/sidebar-mode.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar-mode.js","sourceRoot":"","sources":["../../../../../../libs/core/sidebar/src/lib/sidebar-mode.ts"],"names":[],"mappings":"","sourcesContent":["/** MlvLayout mode controlling how the sidebar renders and collapses. */\nexport type MlvSidebarMode = 'icon' | 'offcanvas' | 'floating' | 'fixed';\n"]}

package/esm2022/sidebar/lib/sidebar-rail/sidebar-rail.js

@@ -1,202 +0,0 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, ElementRef, NgZone, ViewEncapsulation, inject, input, signal, } from '@angular/core';
-import { clamp } from '@malva-ui/cdk/utils';
-import { SIDEBAR_CONTEXT } from '../sidebar-context';
-import * as i0 from "@angular/core";
-export class MlvSidebarRail {
-    /** Minimum sidebar width in px during drag. */
-    minWidth = input(200, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "minWidth" }] : /* istanbul ignore next */ []));
-    /** Maximum sidebar width in px during drag. */
-    maxWidth = input(480, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "maxWidth" }] : /* istanbul ignore next */ []));
-    /** Width below which the sidebar snaps to collapsed. */
-    snapThreshold = input(100, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "snapThreshold" }] : /* istanbul ignore next */ []));
-    /** @private Sidebar context for reading/writing state. */
-    _context = inject(SIDEBAR_CONTEXT);
-    /** @private Reference to the host element. */
-    _elementRef = inject((ElementRef));
-    /** @private Angular zone for running outside zone during drag. */
-    _ngZone = inject(NgZone);
-    /** @private Destroy reference for cleanup. */
-    _destroyRef = inject(DestroyRef);
-    /** @protected Whether a drag is in progress. */
-    _isDragging = signal(false, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_isDragging" }] : /* istanbul ignore next */ []));
-    /** @protected Current sidebar width in pixels (for ARIA). */
-    _currentWidthPx = signal(260, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "_currentWidthPx" }] : /* istanbul ignore next */ []));
-    /** @private Sidebar container element reference, resolved on first drag. */
-    _sidebarEl = null;
-    /** @private Stored transition value to restore after drag. */
-    _savedTransition = '';
-    /** @private Bound pointermove handler for cleanup. */
-    _onPointerMoveBound = this._onPointerMove.bind(this);
-    /** @private Bound pointerup handler for cleanup. */
-    _onPointerUpBound = this._onPointerUp.bind(this);
-    /** @private Animation frame ID for drag throttle. */
-    _rafId = 0;
-    /** @private Whether to snap to collapsed on pointerup. */
-    _shouldSnap = false;
-    /** @private Whether to expand from collapsed on pointerup. */
-    _shouldExpand = false;
-    /** @private Width to apply after expanding from collapsed state. */
-    _expandWidth = 0;
-    constructor() {
-        this._destroyRef.onDestroy(() => {
-            this._cleanup();
-        });
-    }
-    /** @protected Handle double-click to toggle collapsed state. */
-    _onDoubleClick() {
-        this._context.toggle();
-    }
-    /** @protected Handle keyboard navigation. */
-    _onKeydown(event) {
-        const step = 10;
-        switch (event.key) {
-            case 'ArrowLeft':
-                event.preventDefault();
-                if (!this._context.collapsed()) {
-                    this._adjustWidth(-step);
-                }
-                break;
-            case 'ArrowRight':
-                event.preventDefault();
-                if (this._context.collapsed()) {
-                    this._context.toggle();
-                }
-                else {
-                    this._adjustWidth(step);
-                }
-                break;
-            case 'Home':
-                event.preventDefault();
-                if (!this._context.collapsed()) {
-                    this._context.toggle();
-                }
-                break;
-            case 'End':
-                event.preventDefault();
-                if (this._context.collapsed()) {
-                    this._context.toggle();
-                }
-                break;
-        }
-    }
-    /** @protected Handle pointer down to start drag. */
-    _onPointerDown(event) {
-        event.preventDefault();
-        this._isDragging.set(true);
-        this._shouldSnap = false;
-        this._shouldExpand = false;
-        this._expandWidth = 0;
-        // Width is owned by the sidebar host so its border, gutter, and content
-        // stay in one box-model calculation during resize and collapse.
-        this._sidebarEl = this._elementRef.nativeElement.closest('.mlv-sidebar');
-        if (this._sidebarEl) {
-            this._savedTransition = this._sidebarEl.style.transition;
-            this._sidebarEl.style.transition = 'none';
-            this._currentWidthPx.set(this._sidebarEl.getBoundingClientRect().width);
-        }
-        this._elementRef.nativeElement.setPointerCapture(event.pointerId);
-        this._ngZone.runOutsideAngular(() => {
-            document.addEventListener('pointermove', this._onPointerMoveBound);
-            document.addEventListener('pointerup', this._onPointerUpBound);
-        });
-        document.body.style.userSelect = 'none';
-        document.body.style.cursor = 'col-resize';
-    }
-    /** @private Handle pointer move during drag. */
-    _onPointerMove(event) {
-        const sidebarEl = this._sidebarEl;
-        if (!sidebarEl)
-            return;
-        if (this._rafId)
-            cancelAnimationFrame(this._rafId);
-        this._rafId = requestAnimationFrame(() => {
-            const sidebarRect = sidebarEl.getBoundingClientRect();
-            const newWidth = event.clientX - sidebarRect.left;
-            const isCollapsed = this._context.collapsed();
-            if (isCollapsed) {
-                // Dragging right from collapsed — mark for expansion on pointerup
-                if (newWidth >= this.snapThreshold()) {
-                    this._shouldExpand = true;
-                    this._expandWidth = clamp(newWidth, this.minWidth(), this.maxWidth());
-                }
-                else {
-                    this._shouldExpand = false;
-                }
-            }
-            else if (newWidth < this.snapThreshold()) {
-                // Dragging left below threshold — mark for collapse on pointerup
-                this._shouldSnap = true;
-            }
-            else {
-                this._shouldSnap = false;
-                const clamped = clamp(newWidth, this.minWidth(), this.maxWidth());
-                this._ngZone.run(() => {
-                    this._context.setWidth(clamped);
-                    this._currentWidthPx.set(clamped);
-                });
-            }
-        });
-    }
-    /** @private Handle pointer up to end drag. */
-    _onPointerUp(_event) {
-        this._cleanup();
-        if (this._sidebarEl) {
-            this._sidebarEl.style.transition = this._savedTransition;
-        }
-        this._ngZone.run(() => {
-            this._isDragging.set(false);
-            if (this._shouldSnap) {
-                this._context.toggle();
-            }
-            else if (this._shouldExpand) {
-                this._context.toggle();
-                this._context.setWidth(this._expandWidth);
-                this._currentWidthPx.set(this._expandWidth);
-            }
-        });
-    }
-    /** @private Remove document listeners and reset drag state. */
-    _cleanup() {
-        document.removeEventListener('pointermove', this._onPointerMoveBound);
-        document.removeEventListener('pointerup', this._onPointerUpBound);
-        document.body.style.userSelect = '';
-        document.body.style.cursor = '';
-        if (this._rafId) {
-            cancelAnimationFrame(this._rafId);
-            this._rafId = 0;
-        }
-    }
-    /** @private Adjust width by a delta, clamping to min/max. */
-    _adjustWidth(delta) {
-        const current = this._currentWidthPx();
-        const next = clamp(current + delta, this.minWidth(), this.maxWidth());
-        this._context.setWidth(next);
-        this._currentWidthPx.set(next);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarRail, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.7", type: MlvSidebarRail, isStandalone: true, selector: "mlv-sidebar-rail", inputs: { minWidth: { classPropertyName: "minWidth", publicName: "minWidth", isSignal: true, isRequired: false, transformFunction: null }, maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, snapThreshold: { classPropertyName: "snapThreshold", publicName: "snapThreshold", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "separator", "aria-orientation": "vertical", "tabindex": "0", "aria-label": "Resize sidebar" }, listeners: { "pointerdown": "_onPointerDown($event)", "dblclick": "_onDoubleClick()", "keydown": "_onKeydown($event)" }, properties: { "class.mlv-sidebar-rail--dragging": "_isDragging()", "attr.aria-valuetext": "_currentWidthPx() + \"px\"", "attr.aria-valuenow": "_currentWidthPx()", "attr.aria-valuemin": "minWidth()", "attr.aria-valuemax": "maxWidth()" }, classAttribute: "mlv-sidebar-rail" }, ngImport: i0, template: '', isInline: true, styles: [".mlv-sidebar-rail{position:absolute;top:0;right:-.0625rem;width:.125rem;height:100%;background-color:transparent;cursor:col-resize;z-index:1;transition:width var(--mlv-duration-fast) var(--mlv-ease-default),background-color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-sidebar-rail:before{content:\"\";position:absolute;top:0;left:-.25rem;right:-.25rem;bottom:0}.mlv-sidebar-rail:hover{width:.25rem;background-color:var(--mlv-background-accent-1)}.mlv-sidebar-rail:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-sidebar-rail--dragging{width:.25rem;background-color:var(--mlv-background-accent-1)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarRail, decorators: [{
-            type: Component,
-            args: [{ selector: 'mlv-sidebar-rail', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        class: 'mlv-sidebar-rail',
-                        '[class.mlv-sidebar-rail--dragging]': '_isDragging()',
-                        role: 'separator',
-                        'aria-orientation': 'vertical',
-                        tabindex: '0',
-                        'aria-label': 'Resize sidebar',
-                        '[attr.aria-valuetext]': '_currentWidthPx() + "px"',
-                        '[attr.aria-valuenow]': '_currentWidthPx()',
-                        '[attr.aria-valuemin]': 'minWidth()',
-                        '[attr.aria-valuemax]': 'maxWidth()',
-                        '(pointerdown)': '_onPointerDown($event)',
-                        '(dblclick)': '_onDoubleClick()',
-                        '(keydown)': '_onKeydown($event)',
-                    }, styles: [".mlv-sidebar-rail{position:absolute;top:0;right:-.0625rem;width:.125rem;height:100%;background-color:transparent;cursor:col-resize;z-index:1;transition:width var(--mlv-duration-fast) var(--mlv-ease-default),background-color var(--mlv-duration-fast) var(--mlv-ease-default)}.mlv-sidebar-rail:before{content:\"\";position:absolute;top:0;left:-.25rem;right:-.25rem;bottom:0}.mlv-sidebar-rail:hover{width:.25rem;background-color:var(--mlv-background-accent-1)}.mlv-sidebar-rail:focus-visible{outline:var(--mlv-stroke-width) solid var(--mlv-border-focus);outline-offset:.125rem}.mlv-sidebar-rail--dragging{width:.25rem;background-color:var(--mlv-background-accent-1)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], snapThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "snapThreshold", required: false }] }] } });
-//# sourceMappingURL=sidebar-rail.js.map

package/esm2022/sidebar/lib/sidebar-rail/sidebar-rail.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sidebar-rail.js","sourceRoot":"","sources":["../../../../../../../libs/core/sidebar/src/lib/sidebar-rail/sidebar-rail.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  DestroyRef,\n  ElementRef,\n  NgZone,\n  ViewEncapsulation,\n  inject,\n  input,\n  signal,\n} from '@angular/core';\nimport { clamp } from '@malva-ui/cdk/utils';\nimport { SIDEBAR_CONTEXT } from '../sidebar-context';\n\n@Component({\n  selector: 'mlv-sidebar-rail',\n  template: '',\n  styleUrl: './sidebar-rail.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    class: 'mlv-sidebar-rail',\n    '[class.mlv-sidebar-rail--dragging]': '_isDragging()',\n    role: 'separator',\n    'aria-orientation': 'vertical',\n    tabindex: '0',\n    'aria-label': 'Resize sidebar',\n    '[attr.aria-valuetext]': '_currentWidthPx() + \"px\"',\n    '[attr.aria-valuenow]': '_currentWidthPx()',\n    '[attr.aria-valuemin]': 'minWidth()',\n    '[attr.aria-valuemax]': 'maxWidth()',\n    '(pointerdown)': '_onPointerDown($event)',\n    '(dblclick)': '_onDoubleClick()',\n    '(keydown)': '_onKeydown($event)',\n  },\n})\nexport class MlvSidebarRail {\n  /** Minimum sidebar width in px during drag. */\n  readonly minWidth = input(200);\n\n  /** Maximum sidebar width in px during drag. */\n  readonly maxWidth = input(480);\n\n  /** Width below which the sidebar snaps to collapsed. */\n  readonly snapThreshold = input(100);\n\n  /** @private Sidebar context for reading/writing state. */\n  private readonly _context = inject(SIDEBAR_CONTEXT);\n\n  /** @private Reference to the host element. */\n  private readonly _elementRef = inject(ElementRef<HTMLElement>);\n\n  /** @private Angular zone for running outside zone during drag. */\n  private readonly _ngZone = inject(NgZone);\n\n  /** @private Destroy reference for cleanup. */\n  private readonly _destroyRef = inject(DestroyRef);\n\n  /** @protected Whether a drag is in progress. */\n  protected readonly _isDragging = signal(false);\n\n  /** @protected Current sidebar width in pixels (for ARIA). */\n  protected readonly _currentWidthPx = signal(260);\n\n  /** @private Sidebar container element reference, resolved on first drag. */\n  private _sidebarEl: HTMLElement | null = null;\n\n  /** @private Stored transition value to restore after drag. */\n  private _savedTransition = '';\n\n  /** @private Bound pointermove handler for cleanup. */\n  private readonly _onPointerMoveBound = this._onPointerMove.bind(this);\n\n  /** @private Bound pointerup handler for cleanup. */\n  private readonly _onPointerUpBound = this._onPointerUp.bind(this);\n\n  /** @private Animation frame ID for drag throttle. */\n  private _rafId = 0;\n\n  /** @private Whether to snap to collapsed on pointerup. */\n  private _shouldSnap = false;\n\n  /** @private Whether to expand from collapsed on pointerup. */\n  private _shouldExpand = false;\n\n  /** @private Width to apply after expanding from collapsed state. */\n  private _expandWidth = 0;\n\n  constructor() {\n    this._destroyRef.onDestroy(() => {\n      this._cleanup();\n    });\n  }\n\n  /** @protected Handle double-click to toggle collapsed state. */\n  protected _onDoubleClick(): void {\n    this._context.toggle();\n  }\n\n  /** @protected Handle keyboard navigation. */\n  protected _onKeydown(event: KeyboardEvent): void {\n    const step = 10;\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (!this._context.collapsed()) {\n          this._adjustWidth(-step);\n        }\n        break;\n      case 'ArrowRight':\n        event.preventDefault();\n        if (this._context.collapsed()) {\n          this._context.toggle();\n        } else {\n          this._adjustWidth(step);\n        }\n        break;\n      case 'Home':\n        event.preventDefault();\n        if (!this._context.collapsed()) {\n          this._context.toggle();\n        }\n        break;\n      case 'End':\n        event.preventDefault();\n        if (this._context.collapsed()) {\n          this._context.toggle();\n        }\n        break;\n    }\n  }\n\n  /** @protected Handle pointer down to start drag. */\n  protected _onPointerDown(event: PointerEvent): void {\n    event.preventDefault();\n    this._isDragging.set(true);\n    this._shouldSnap = false;\n    this._shouldExpand = false;\n    this._expandWidth = 0;\n\n    // Width is owned by the sidebar host so its border, gutter, and content\n    // stay in one box-model calculation during resize and collapse.\n    this._sidebarEl = this._elementRef.nativeElement.closest(\n      '.mlv-sidebar',\n    ) as HTMLElement | null;\n\n    if (this._sidebarEl) {\n      this._savedTransition = this._sidebarEl.style.transition;\n      this._sidebarEl.style.transition = 'none';\n      this._currentWidthPx.set(this._sidebarEl.getBoundingClientRect().width);\n    }\n\n    this._elementRef.nativeElement.setPointerCapture(event.pointerId);\n\n    this._ngZone.runOutsideAngular(() => {\n      document.addEventListener('pointermove', this._onPointerMoveBound);\n      document.addEventListener('pointerup', this._onPointerUpBound);\n    });\n\n    document.body.style.userSelect = 'none';\n    document.body.style.cursor = 'col-resize';\n  }\n\n  /** @private Handle pointer move during drag. */\n  private _onPointerMove(event: PointerEvent): void {\n    const sidebarEl = this._sidebarEl;\n    if (!sidebarEl) return;\n\n    if (this._rafId) cancelAnimationFrame(this._rafId);\n\n    this._rafId = requestAnimationFrame(() => {\n      const sidebarRect = sidebarEl.getBoundingClientRect();\n      const newWidth = event.clientX - sidebarRect.left;\n      const isCollapsed = this._context.collapsed();\n\n      if (isCollapsed) {\n        // Dragging right from collapsed — mark for expansion on pointerup\n        if (newWidth >= this.snapThreshold()) {\n          this._shouldExpand = true;\n          this._expandWidth = clamp(newWidth, this.minWidth(), this.maxWidth());\n        } else {\n          this._shouldExpand = false;\n        }\n      } else if (newWidth < this.snapThreshold()) {\n        // Dragging left below threshold — mark for collapse on pointerup\n        this._shouldSnap = true;\n      } else {\n        this._shouldSnap = false;\n        const clamped = clamp(newWidth, this.minWidth(), this.maxWidth());\n        this._ngZone.run(() => {\n          this._context.setWidth(clamped);\n          this._currentWidthPx.set(clamped);\n        });\n      }\n    });\n  }\n\n  /** @private Handle pointer up to end drag. */\n  private _onPointerUp(_event: PointerEvent): void {\n    this._cleanup();\n\n    if (this._sidebarEl) {\n      this._sidebarEl.style.transition = this._savedTransition;\n    }\n\n    this._ngZone.run(() => {\n      this._isDragging.set(false);\n\n      if (this._shouldSnap) {\n        this._context.toggle();\n      } else if (this._shouldExpand) {\n        this._context.toggle();\n        this._context.setWidth(this._expandWidth);\n        this._currentWidthPx.set(this._expandWidth);\n      }\n    });\n  }\n\n  /** @private Remove document listeners and reset drag state. */\n  private _cleanup(): void {\n    document.removeEventListener('pointermove', this._onPointerMoveBound);\n    document.removeEventListener('pointerup', this._onPointerUpBound);\n    document.body.style.userSelect = '';\n    document.body.style.cursor = '';\n    if (this._rafId) {\n      cancelAnimationFrame(this._rafId);\n      this._rafId = 0;\n    }\n  }\n\n  /** @private Adjust width by a delta, clamping to min/max. */\n  private _adjustWidth(delta: number): void {\n    const current = this._currentWidthPx();\n    const next = clamp(current + delta, this.minWidth(), this.maxWidth());\n    this._context.setWidth(next);\n    this._currentWidthPx.set(next);\n  }\n}\n"]}