@malva-ui/core 0.1.12

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

@@ -0,0 +1,216 @@
+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

@@ -0,0 +1 @@
+{"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":"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","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

@@ -0,0 +1,39 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1 @@
+{"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

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

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,202 @@
+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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-rail.js","sourceRoot":"","sources":["../../../../../../../libs/core/sidebar/src/lib/sidebar-rail/sidebar-rail.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,uBAAuB,EACvB,SAAS,EACT,UAAU,EACV,UAAU,EACV,MAAM,EACN,iBAAiB,EACjB,MAAM,EACN,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAC5C,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;;AAwBrD,MAAM,OAAO,cAAc;IACzB,+CAA+C;IACtC,QAAQ,GAAG,KAAK,CAAC,GAAG;iFAAC,CAAC;IAE/B,+CAA+C;IACtC,QAAQ,GAAG,KAAK,CAAC,GAAG;iFAAC,CAAC;IAE/B,wDAAwD;IAC/C,aAAa,GAAG,KAAK,CAAC,GAAG;sFAAC,CAAC;IAEpC,0DAA0D;IACzC,QAAQ,GAAG,MAAM,CAAC,eAAe,CAAC,CAAC;IAEpD,8CAA8C;IAC7B,WAAW,GAAG,MAAM,CAAC,CAAA,UAAuB,CAAA,CAAC,CAAC;IAE/D,kEAAkE;IACjD,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IAE1C,8CAA8C;IAC7B,WAAW,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;IAElD,gDAAgD;IAC7B,WAAW,GAAG,MAAM,CAAC,KAAK;oFAAC,CAAC;IAE/C,6DAA6D;IAC1C,eAAe,GAAG,MAAM,CAAC,GAAG;wFAAC,CAAC;IAEjD,4EAA4E;IACpE,UAAU,GAAuB,IAAI,CAAC;IAE9C,8DAA8D;IACtD,gBAAgB,GAAG,EAAE,CAAC;IAE9B,sDAAsD;IACrC,mBAAmB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAEtE,oDAAoD;IACnC,iBAAiB,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAElE,qDAAqD;IAC7C,MAAM,GAAG,CAAC,CAAC;IAEnB,0DAA0D;IAClD,WAAW,GAAG,KAAK,CAAC;IAE5B,8DAA8D;IACtD,aAAa,GAAG,KAAK,CAAC;IAE9B,oEAAoE;IAC5D,YAAY,GAAG,CAAC,CAAC;IAEzB;QACE,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,GAAG,EAAE;YAC9B,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gEAAgE;IACtD,cAAc;QACtB,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;IACzB,CAAC;IAED,6CAA6C;IACnC,UAAU,CAAC,KAAoB;QACvC,MAAM,IAAI,GAAG,EAAE,CAAC;QAChB,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC;oBAC/B,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,CAAC;gBAC3B,CAAC;gBACD,MAAM;YACR,KAAK,YAAY;gBACf,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC;oBAC9B,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACzB,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;gBAC1B,CAAC;gBACD,MAAM;YACR,KAAK,MAAM;gBACT,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC;oBAC/B,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACzB,CAAC;gBACD,MAAM;YACR,KAAK,KAAK;gBACR,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,EAAE,CAAC;oBAC9B,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACzB,CAAC;gBACD,MAAM;QACV,CAAC;IACH,CAAC;IAED,oDAAoD;IAC1C,cAAc,CAAC,KAAmB;QAC1C,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC3B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QAEtB,wEAAwE;QACxE,gEAAgE;QAChE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,OAAO,CACtD,cAAc,CACO,CAAC;QAExB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC;YACzD,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;YAC1C,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QAC1E,CAAC;QAED,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC;QAElE,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,GAAG,EAAE;YAClC,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;YACnE,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QACjE,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;QACxC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,YAAY,CAAC;IAC5C,CAAC;IAED,gDAAgD;IACxC,cAAc,CAAC,KAAmB;QACxC,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC;QAClC,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,IAAI,IAAI,CAAC,MAAM;YAAE,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEnD,IAAI,CAAC,MAAM,GAAG,qBAAqB,CAAC,GAAG,EAAE;YACvC,MAAM,WAAW,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YACtD,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,GAAG,WAAW,CAAC,IAAI,CAAC;YAClD,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;YAE9C,IAAI,WAAW,EAAE,CAAC;gBAChB,kEAAkE;gBAClE,IAAI,QAAQ,IAAI,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;oBACrC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;oBAC1B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;gBACxE,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;gBAC7B,CAAC;YACH,CAAC;iBAAM,IAAI,QAAQ,GAAG,IAAI,CAAC,aAAa,EAAE,EAAE,CAAC;gBAC3C,iEAAiE;gBACjE,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBACzB,MAAM,OAAO,GAAG,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;gBAClE,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE;oBACpB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;oBAChC,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBACpC,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,8CAA8C;IACtC,YAAY,CAAC,MAAoB;QACvC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAC3D,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE;YACpB,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YAE5B,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;YACzB,CAAC;iBAAM,IAAI,IAAI,CAAC,aAAa,EAAE,CAAC;gBAC9B,IAAI,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;gBACvB,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;gBAC1C,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,+DAA+D;IACvD,QAAQ;QACd,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;QACtE,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;QAClE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAC;QACpC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE,CAAC;QAChC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YAClC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;QAClB,CAAC;IACH,CAAC;IAED,6DAA6D;IACrD,YAAY,CAAC,KAAa;QAChC,MAAM,OAAO,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QACvC,MAAM,IAAI,GAAG,KAAK,CAAC,OAAO,GAAG,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;QACtE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;uGAxMU,cAAc;2FAAd,cAAc,o/BApBf,EAAE;;2FAoBD,cAAc;kBAtB1B,SAAS;+BACE,kBAAkB,YAClB,EAAE,iBAEG,iBAAiB,CAAC,IAAI,mBACpB,uBAAuB,CAAC,MAAM,QACzC;wBACJ,KAAK,EAAE,kBAAkB;wBACzB,oCAAoC,EAAE,eAAe;wBACrD,IAAI,EAAE,WAAW;wBACjB,kBAAkB,EAAE,UAAU;wBAC9B,QAAQ,EAAE,GAAG;wBACb,YAAY,EAAE,gBAAgB;wBAC9B,uBAAuB,EAAE,0BAA0B;wBACnD,sBAAsB,EAAE,mBAAmB;wBAC3C,sBAAsB,EAAE,YAAY;wBACpC,sBAAsB,EAAE,YAAY;wBACpC,eAAe,EAAE,wBAAwB;wBACzC,YAAY,EAAE,kBAAkB;wBAChC,WAAW,EAAE,oBAAoB;qBAClC","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"]}