@malva-ui/core 0.1.12

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

@@ -0,0 +1,20 @@
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Marks a sticky bottom region inside the sidebar.
+ * Applied to a container element that should remain visible at the bottom when content scrolls.
+ */
+export class MlvSidebarFooter {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarFooter, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSidebarFooter, isStandalone: true, selector: "[mlvSidebarFooter]", host: { classAttribute: "mlv-sidebar__footer" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarFooter, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSidebarFooter]',
+                    host: {
+                        class: 'mlv-sidebar__footer',
+                    },
+                }]
+        }] });
+//# sourceMappingURL=sidebar-footer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-footer.js","sourceRoot":"","sources":["../../../../../../libs/core/sidebar/src/lib/sidebar-footer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAE1C;;;GAGG;AAOH,MAAM,OAAO,gBAAgB;uGAAhB,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAN5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE;wBACJ,KAAK,EAAE,qBAAqB;qBAC7B;iBACF","sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Marks a sticky bottom region inside the sidebar.\n * Applied to a container element that should remain visible at the bottom when content scrolls.\n */\n@Directive({\n  selector: '[mlvSidebarFooter]',\n  host: {\n    class: 'mlv-sidebar__footer',\n  },\n})\nexport class MlvSidebarFooter {}\n"]}

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

@@ -0,0 +1,341 @@
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, contentChild, contentChildren, effect, forwardRef, inject, input, signal, viewChild, } from '@angular/core';
+import { DOCUMENT, NgTemplateOutlet } from '@angular/common';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { LucideChevronDown } from '@lucide/angular';
+import { mlvNextId } from '@malva-ui/cdk/utils';
+import { MlvPopup, MlvPopupContainer, MlvPopupContent, MlvPopupTrigger, } from '@malva-ui/core/popup';
+import { MlvExpand } from '@malva-ui/core/expand';
+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 { MlvSidebarItem } from '../sidebar-item/sidebar-item';
+import * as i0 from "@angular/core";
+export class MlvSidebarGroup {
+    /** @private Parent sidebar context (skipSelf) used to read collapsed/mode state and proxy toggles. */
+    _parentCtx = inject(SIDEBAR_CONTEXT, {
+        skipSelf: true,
+        optional: true,
+    });
+    /** @private Document handle used to resolve the overlay-rendered flyout panel by id. */
+    _document = inject(DOCUMENT);
+    /** @protected Stable id linking the collapsed-mode flyout panel so its focusable items can be resolved. */
+    _flyoutId = mlvNextId('mlv-sidebar-flyout');
+    /** Required label for the group header and flyout title. */
+    label = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    /**
+     * Optional badge/count for the group. Rendered as a trailing `mlv-badge` in
+     * the expanded accordion header and next to the flyout title, and as a
+     * `mlv-status-indicator` dot (top-right of the icon button) when the sidebar
+     * is collapsed. `null`/`''` renders nothing.
+     */
+    badge = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "badge" }] : /* istanbul ignore next */ []));
+    /** Semantic tone applied to the group 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 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 Collapsed icon-button `aria-label`: the group `label()` with the
+     * badge count folded in (e.g. `"Projects, 3 notifications"`), since the
+     * collapsed dot is decorative and carries no text.
+     */
+    _resolvedAriaLabel = computed(() => {
+        const base = this.label();
+        if (!this._hasBadge())
+            return base;
+        return `${base}, ${this._announceBadge(this.badge())}`;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_resolvedAriaLabel" }] : /* istanbul ignore next */ []));
+    /** @protected Projected group icon template, rendered in the header and flyout. */
+    iconRef = contentChild(MlvSidebarItemIcon, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconRef" }] : /* istanbul ignore next */ []));
+    /** @protected Projected sidebar items, used to derive the active-child highlight. */
+    _childItems = contentChildren(MlvSidebarItem, { ...(ngDevMode ? { debugName: "_childItems" } : /* istanbul ignore next */ {}), descendants: true });
+    /** @protected Template of the group's child items, rendered in the accordion and flyout. */
+    childrenTpl = viewChild.required('childrenRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "childrenTpl" }] : /* istanbul ignore next */ []));
+    /** @protected Icon trigger button element, used as the flyout/tooltip anchor and focus target. */
+    _triggerBtn = viewChild('triggerBtn', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_triggerBtn" }] : /* istanbul ignore next */ []));
+    /** @protected Reference to the flyout popup container (collapsed mode). */
+    _flyoutContainer = viewChild('flyoutContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_flyoutContainer" }] : /* istanbul ignore next */ []));
+    /** @protected Reference to the flyout popup component for state reading. */
+    _flyoutPopup = viewChild('flyoutPopup', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_flyoutPopup" }] : /* istanbul ignore next */ []));
+    /** @protected Tooltip popup shown on hover in collapsed mode. */
+    _tooltipContainer = viewChild('tooltipContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tooltipContainer" }] : /* istanbul ignore next */ []));
+    /** Whether the accordion is expanded (expanded sidebar mode). */
+    expanded = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /**
+     * Whether the flyout popup is currently open.
+     * Derived from the popup component's `opened` signal.
+     */
+    flyoutOpen = computed(() => this._flyoutPopup()?.opened() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "flyoutOpen" }] : /* istanbul ignore next */ []));
+    /** True when the parent sidebar is in collapsed (icon-only) mode. */
+    isSidebarCollapsed = computed(() => this._parentCtx?.collapsed() ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isSidebarCollapsed" }] : /* istanbul ignore next */ []));
+    /** True when at least one child item is active — drives active highlight on the group. */
+    hasActiveChild = computed(() => this._childItems().some((item) => item.computedActive()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hasActiveChild" }] : /* istanbul ignore next */ []));
+    /**
+     * @protected Effective open state of the accordion panel.
+     *
+     * `expanded` is public and writable, so a host that auto-expands the group
+     * owning the active route can set it while the sidebar is collapsed. The
+     * accordion stays mounted in that state (its header fades but keeps the icon
+     * column in place), so honouring the write would open an empty panel inside
+     * the icon rail — a ghost tree line and reserved height — and, because
+     * `#childrenRef` can only be projected once, it would also pull the children
+     * out of the open flyout and leave it showing just its header. Gating on the
+     * collapsed state here makes that unreachable regardless of write order; the
+     * constructor effect still resets `expanded` when collapse begins.
+     */
+    _accordionOpen = computed(() => this.expanded() && !this.isSidebarCollapsed(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_accordionOpen" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Close whichever disclosure belongs to the representation that is
+        // becoming inactive. The group header itself remains mounted so its label
+        // can fade while the fixed icon track stays in place.
+        effect(() => {
+            if (this.isSidebarCollapsed()) {
+                this.expanded.set(false);
+            }
+            else {
+                this._flyoutContainer()?.close();
+            }
+        });
+        // Register the icon button as the anchor for the tooltip.
+        effect(() => {
+            const btn = this._triggerBtn();
+            const tooltipContainer = this._tooltipContainer();
+            if (btn && tooltipContainer) {
+                tooltipContainer.registerTrigger(btn, false);
+            }
+        });
+        // Dismiss tooltip and move focus into the flyout when it opens (menu-button
+        // pattern). The panel is rendered into a CDK overlay, so wait one frame for
+        // the portal to attach before focusing its first item.
+        effect(() => {
+            if (this.flyoutOpen()) {
+                this._tooltipContainer()?.close();
+                requestAnimationFrame(() => {
+                    if (this.flyoutOpen())
+                        this._focusFirstFlyoutItem();
+                });
+            }
+        });
+    }
+    /**
+     * @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;
+    }
+    // ─── Accordion (expanded sidebar) ──────────────────────────────────────────
+    /** Toggles the accordion open/closed state. */
+    toggle() {
+        this.expanded.update((v) => !v);
+    }
+    // ─── Flyout (collapsed sidebar) ─────────────────────────────────────────────
+    /** @protected Roving keyboard navigation (Arrow/Home/End/Escape) within the open flyout panel. */
+    onFlyoutKeydown(event) {
+        const e = event;
+        const panel = e.currentTarget;
+        // Close flyout and return focus to trigger
+        if (e.key === 'ArrowLeft' || e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            this._flyoutContainer()?.close();
+            this._triggerBtn()?.nativeElement.focus();
+            return;
+        }
+        // Sidebar items in the flyout may be focusable via their own host
+        // (button-style rows) or via a projected link/button (navigational rows).
+        const items = Array.from(panel.querySelectorAll('a[href], button, [tabindex="0"]')).filter((el) => !el.hasAttribute('disabled'));
+        if (!items.length)
+            return;
+        const idx = items.indexOf(document.activeElement);
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            items[(idx + 1) % items.length].focus();
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            items[(idx - 1 + items.length) % items.length].focus();
+        }
+        else if (e.key === 'Home') {
+            e.preventDefault();
+            items[0].focus();
+        }
+        else if (e.key === 'End') {
+            e.preventDefault();
+            items[items.length - 1].focus();
+        }
+    }
+    /**
+     * @protected Handles Enter/Space (toggle) and ArrowRight (open) on the
+     * collapsed-mode icon trigger. When the flyout is already open, ArrowDown
+     * enters it (focuses the first item) instead of bubbling to the sidebar
+     * container's roving nav — so an open flyout is never skipped past.
+     */
+    onTriggerKeydown(event) {
+        const e = event;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            this._flyoutContainer()?.toggle();
+        }
+        else if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            if (this.flyoutOpen()) {
+                this._focusFirstFlyoutItem();
+            }
+            else {
+                this._flyoutContainer()?.open();
+            }
+        }
+        else if (e.key === 'ArrowDown' && this.flyoutOpen()) {
+            // Enter the open flyout rather than letting the sidebar container move
+            // focus to the next trigger (which would orphan this flyout).
+            e.preventDefault();
+            e.stopPropagation();
+            this._focusFirstFlyoutItem();
+        }
+    }
+    /**
+     * @protected Closes the flyout and returns focus to the icon trigger when a
+     * child item inside it is activated.
+     *
+     * The menu-button pattern expects the menu to close once a command is
+     * chosen — without this a `routerLink` navigation left the flyout hanging
+     * over the new page. Enter/Space are covered too: `MlvSidebarItem` activates
+     * a button-style row by calling `.click()` on its host, and a projected
+     * anchor dispatches a real click, so both reach this bubbling handler.
+     *
+     * Clicks on the flyout header or on empty panel space are ignored — only a
+     * target inside a `.mlv-sidebar-item` (its host, projected link or button)
+     * counts as an activation.
+     */
+    onFlyoutClick(event) {
+        const target = event.target;
+        if (!target?.closest('.mlv-sidebar-item'))
+            return;
+        this._flyoutContainer()?.close();
+        this._triggerBtn()?.nativeElement.focus();
+    }
+    /**
+     * @protected Closes the flyout when keyboard focus leaves it entirely (Tab
+     * out, or focus moving to another trigger) so it is never left orphaned-open.
+     * Focus moves between items inside the panel, or back to the owning trigger,
+     * are ignored.
+     */
+    onFlyoutFocusOut(event) {
+        const next = event.relatedTarget;
+        // Focus lost to nothing (e.g. window blur) — keep the flyout open.
+        if (!next)
+            return;
+        const panel = this._document.getElementById(this._flyoutId);
+        const trigger = this._triggerBtn()?.nativeElement ?? null;
+        if (panel?.contains(next) || next === trigger)
+            return;
+        this._flyoutContainer()?.close();
+    }
+    /** @private Moves focus to the first focusable item inside the open flyout panel. */
+    _focusFirstFlyoutItem() {
+        const panel = this._document.getElementById(this._flyoutId);
+        const first = panel?.querySelector('a[href], button:not([disabled]), [tabindex="0"]');
+        first?.focus();
+    }
+    /** Opens the tooltip when hovering the icon button (collapsed mode, flyout not open). */
+    onIconBtnMouseEnter() {
+        if (!this.flyoutOpen()) {
+            this._tooltipContainer()?.open();
+        }
+    }
+    /** Closes the tooltip when the pointer leaves the icon button. */
+    onIconBtnMouseLeave() {
+        this._tooltipContainer()?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvSidebarGroup, isStandalone: true, selector: "mlv-sidebar-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, 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: { classAttribute: "mlv-sidebar-group-host" }, providers: [
+            {
+                provide: SIDEBAR_CONTEXT,
+                useFactory: () => {
+                    const group = inject(forwardRef(() => MlvSidebarGroup));
+                    const parentCtx = inject(SIDEBAR_CONTEXT, {
+                        skipSelf: true,
+                        optional: true,
+                    });
+                    return {
+                        collapsed: parentCtx?.collapsed ?? signal(false),
+                        inFlyout: group.flyoutOpen,
+                        mode: parentCtx?.mode ?? signal('icon'),
+                        effectiveMode: parentCtx?.effectiveMode ?? parentCtx?.mode,
+                        // Proxy to parent — intentionally no-op when group is the root context provider
+                        toggle: () => parentCtx?.toggle(),
+                        setWidth: (px) => parentCtx?.setWidth(px),
+                    };
+                },
+            },
+        ], queries: [{ propertyName: "iconRef", first: true, predicate: MlvSidebarItemIcon, descendants: true, isSignal: true }, { propertyName: "_childItems", predicate: MlvSidebarItem, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "childrenTpl", first: true, predicate: ["childrenRef"], descendants: true, isSignal: true }, { propertyName: "_triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }, { propertyName: "_flyoutContainer", first: true, predicate: ["flyoutContainer"], descendants: true, isSignal: true }, { propertyName: "_flyoutPopup", first: true, predicate: ["flyoutPopup"], descendants: true, isSignal: true }, { propertyName: "_tooltipContainer", first: true, predicate: ["tooltipContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- \u2500\u2500\u2500 Children captured once \u2014 rendered in accordion OR flyout \u2500\u2500\u2500 -->\n<ng-template #childrenRef>\n  <ng-content />\n</ng-template>\n\n<!-- The expanded header remains mounted during collapse so its text can fade\n     without moving the icon out of the shared fixed-width column. -->\n<div\n  class=\"mlv-sidebar-group\"\n  [class.mlv-sidebar-group--expanded]=\"expanded()\"\n  [class.mlv-sidebar-group--collapsed]=\"isSidebarCollapsed()\"\n  [attr.aria-hidden]=\"isSidebarCollapsed() ? 'true' : null\"\n  [attr.inert]=\"isSidebarCollapsed() ? '' : null\"\n>\n  <button\n    class=\"mlv-sidebar-group__header\"\n    type=\"button\"\n    [class.mlv-sidebar-group__header--active]=\"hasActiveChild()\"\n    [attr.aria-expanded]=\"expanded()\"\n    (click)=\"toggle()\"\n  >\n    @if (iconRef(); as iconTpl) {\n    <span class=\"mlv-sidebar-group__icon\">\n      <ng-container [ngTemplateOutlet]=\"iconTpl.templateRef\" />\n    </span>\n    }\n    <span class=\"mlv-sidebar-group__label\">{{ label() }}</span>\n    @if (_hasBadge()) {\n    <mlv-badge\n      class=\"mlv-sidebar-group__badge\"\n      [tone]=\"badgeTone()\"\n      muted\n      mlvDensity=\"tight\"\n      aria-hidden=\"true\"\n      >{{ badge() }}</mlv-badge\n    >\n    }\n    <svg\n      class=\"mlv-sidebar-group__arrow\"\n      [class.mlv-sidebar-group__arrow--open]=\"expanded()\"\n      lucideChevronDown\n      size=\"16\"\n    />\n  </button>\n\n  <mlv-expand\n    class=\"mlv-sidebar-group__content\"\n    [opened]=\"_accordionOpen()\"\n    (openedChange)=\"expanded.set($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"childrenTpl()\" />\n  </mlv-expand>\n</div>\n\n<!-- \u2500\u2500\u2500 COLLAPSED sidebar: icon button + popup flyout on click \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (isSidebarCollapsed()) {\n<mlv-popup-container #flyoutContainer class=\"mlv-sidebar-group__collapsed\">\n  <button\n    #triggerBtn\n    mlvPopupTrigger\n    [triggerOn]=\"'click'\"\n    class=\"mlv-sidebar-group__icon-btn\"\n    type=\"button\"\n    [class.mlv-sidebar-group__icon-btn--active]=\"hasActiveChild()\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-expanded]=\"flyoutOpen()\"\n    [ariaHasPopup]=\"'menu'\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (mouseenter)=\"onIconBtnMouseEnter()\"\n    (mouseleave)=\"onIconBtnMouseLeave()\"\n    (focus)=\"onIconBtnMouseEnter()\"\n    (blur)=\"onIconBtnMouseLeave()\"\n  >\n    @if (iconRef(); as iconTpl) {\n    <ng-container [ngTemplateOutlet]=\"iconTpl.templateRef\" />\n    } @if (_hasBadge()) {\n    <mlv-status-indicator\n      class=\"mlv-sidebar-group__status\"\n      [tone]=\"badgeTone()\"\n      [pulse]=\"badgePulse()\"\n    />\n    }\n  </button>\n\n  <mlv-popup\n    #flyoutPopup\n    position=\"right-start\"\n    [minWidth]=\"180\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-group__flyout-popup\"\n  >\n    <ng-template mlvPopupContent>\n      <div\n        class=\"mlv-sidebar-group__flyout\"\n        [id]=\"_flyoutId\"\n        role=\"menu\"\n        [attr.aria-label]=\"label()\"\n        (keydown)=\"onFlyoutKeydown($event)\"\n        (click)=\"onFlyoutClick($event)\"\n        (focusout)=\"onFlyoutFocusOut($event)\"\n        tabindex=\"-1\"\n      >\n        <div class=\"mlv-sidebar-group__flyout-header\" aria-hidden=\"true\">\n          <span class=\"mlv-sidebar-group__flyout-title\">{{ label() }}</span>\n          @if (_hasBadge()) {\n          <mlv-badge\n            class=\"mlv-sidebar-group__flyout-badge\"\n            [tone]=\"badgeTone()\"\n            muted\n            mlvDensity=\"tight\"\n            >{{ badge() }}</mlv-badge\n          >\n          }\n        </div>\n        <ng-container [ngTemplateOutlet]=\"childrenTpl()\" />\n      </div>\n    </ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n\n<!-- Tooltip anchored to the icon button (registered via effect) -->\n<mlv-popup-container #tooltipContainer>\n  <mlv-popup\n    panelRole=\"tooltip\"\n    position=\"right\"\n    [hasShadow]=\"true\"\n    [hasBackdrop]=\"false\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-group__tooltip-container\"\n  >\n    <ng-template mlvPopupContent>{{ label() }}</ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n}\n", styles: ["@charset \"UTF-8\";.mlv-sidebar-group-host{display:grid;width:100%;min-width:0}.mlv-sidebar-group-host>.mlv-sidebar-group,.mlv-sidebar-group-host>.mlv-sidebar-group__collapsed{grid-area:1/1;min-width:0}.mlv-sidebar-group{width:100%;min-width:0}.mlv-sidebar-group--collapsed{pointer-events:none}.mlv-sidebar-group__header{display:grid;grid-template-columns:var(--mlv-sidebar-icon-column-width, 3.5rem) minmax(0,1fr) auto auto;align-items:center;width:100%;min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border:none;border-radius:var(--mlv-radius-m);background:transparent;cursor:pointer;font-size:var(--mlv-font-size-l);color:var(--mlv-text-secondary);text-align:left;transition-property:background-color,color;transition-duration:var(--mlv-duration-normal);transition-timing-function:var(--mlv-ease-default);line-height:var(--mlv-line-height-snug);outline:none}.mlv-sidebar-group__header *{color:inherit}.mlv-sidebar-group__header:hover,.mlv-sidebar-group__header:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-group__header:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-sidebar-group__header--active{color:var(--mlv-text-action);font-weight:600}.mlv-sidebar-group__icon{display:flex;align-items:center;justify-content:center}.mlv-sidebar-group__label{font-size:var(--mlv-font-size-l);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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-group__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-group__arrow{flex-shrink:0;margin-right:var(--mlv-spacing-2);transition:transform var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-sidebar-group__arrow--open{transform:rotate(180deg)}.mlv-sidebar-group--collapsed .mlv-sidebar-group__label{opacity:0;transform:translate(-.25rem);visibility:hidden;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-group--collapsed .mlv-sidebar-group__badge,.mlv-sidebar-group--collapsed .mlv-sidebar-group__arrow{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)}.mlv-sidebar-group__content{margin-left:calc(var(--mlv-sidebar-icon-column-width, 3.5rem) / 2);border-left:.09375rem solid transparent;padding-left:.53125rem;padding-top:0;transition:border-color var(--mlv-duration-normal) var(--mlv-ease-default),padding-top var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-sidebar-group__content.mlv-expand--open{border-color:var(--mlv-sidebar-rail-color, var(--mlv-border-normal));padding-top:.125rem}.mlv-sidebar-group__content .mlv-expand__body-inner{display:flex;flex-direction:column;gap:.0625rem}.mlv-sidebar-group__tooltip-container.mlv-popup{padding:var(--mlv-padding-m)}.mlv-sidebar-group__icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:var(--mlv-sidebar-icon-column-width, 3.5rem);min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border:none;border-radius:var(--mlv-radius-m);background:transparent;cursor:pointer;color:var(--mlv-text-secondary);transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),color var(--mlv-duration-fast) var(--mlv-ease-default);outline:none}.mlv-sidebar-group__icon-btn:after{content:\"\\203a\";position:absolute;right:.1875rem;bottom:.0625rem;font-size:.875rem;font-weight:700;line-height:1;opacity:.8;pointer-events:none}.mlv-sidebar-group__icon-btn:hover,.mlv-sidebar-group__icon-btn:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-group__icon-btn:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-sidebar-group__icon-btn.mlv-sidebar-group__icon-btn--active,.mlv-sidebar-group__icon-btn.mlv-sidebar-group__icon-btn--active:hover,.mlv-sidebar-group__icon-btn.mlv-sidebar-group__icon-btn--active:focus-visible{color:var(--mlv-text-action);background-color:var(--mlv-sidebar-active-bg, var(--mlv-background-accent-1-pale))}.mlv-sidebar-group__icon-btn:active{transform:scale(.97)}.mlv-sidebar-group__icon-btn .mlv-sidebar-group__status{position:absolute;top:calc(50% - .625rem);right:calc(50% - .625rem);transform:translate(50%,-50%);pointer-events:none}@media(prefers-reduced-motion:reduce){.mlv-sidebar-group__icon-btn,.mlv-sidebar-group__arrow,.mlv-sidebar-group__label,.mlv-sidebar-group__badge,.mlv-sidebar-group__content{transition-duration:var(--mlv-duration-instant)}}.mlv-sidebar-group__flyout-popup.mlv-popup{padding:var(--mlv-spacing-2)}.mlv-sidebar-group__flyout{display:flex;flex-direction:column;gap:.0625rem}.mlv-sidebar-group__flyout-header{display:flex;align-items:center;gap:var(--mlv-spacing-2);padding:.3125rem .625rem .5rem;font-size:var(--mlv-font-size-m);font-weight:600;color:var(--mlv-text-secondary);border-bottom:.0625rem solid var(--mlv-border-normal);margin-bottom:.125rem;white-space:nowrap}.mlv-sidebar-group__flyout-title{flex:1;overflow:hidden;text-overflow:ellipsis}.mlv-sidebar-group__flyout-badge{flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { 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: "directive", type: MlvPopupTrigger, selector: "[mlvPopupTrigger]", inputs: ["mlvPopupTrigger", "triggerOn", "ariaHasPopup"], exportAs: ["mlvPopupTrigger"] }, { kind: "component", type: MlvExpand, selector: "mlv-expand", inputs: ["opened", "disabled", "ariaLabel", "ariaLabelledBy"], outputs: ["openedChange"] }, { 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: MlvSidebarGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-sidebar-group', imports: [
+                        NgTemplateOutlet,
+                        LucideChevronDown,
+                        MlvPopupContainer,
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvPopupTrigger,
+                        MlvExpand,
+                        MlvBadge,
+                        MlvStatusIndicator,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'mlv-sidebar-group-host' }, providers: [
+                        {
+                            provide: SIDEBAR_CONTEXT,
+                            useFactory: () => {
+                                const group = inject(forwardRef(() => MlvSidebarGroup));
+                                const parentCtx = inject(SIDEBAR_CONTEXT, {
+                                    skipSelf: true,
+                                    optional: true,
+                                });
+                                return {
+                                    collapsed: parentCtx?.collapsed ?? signal(false),
+                                    inFlyout: group.flyoutOpen,
+                                    mode: parentCtx?.mode ?? signal('icon'),
+                                    effectiveMode: parentCtx?.effectiveMode ?? parentCtx?.mode,
+                                    // Proxy to parent — intentionally no-op when group is the root context provider
+                                    toggle: () => parentCtx?.toggle(),
+                                    setWidth: (px) => parentCtx?.setWidth(px),
+                                };
+                            },
+                        },
+                    ], template: "<!-- \u2500\u2500\u2500 Children captured once \u2014 rendered in accordion OR flyout \u2500\u2500\u2500 -->\n<ng-template #childrenRef>\n  <ng-content />\n</ng-template>\n\n<!-- The expanded header remains mounted during collapse so its text can fade\n     without moving the icon out of the shared fixed-width column. -->\n<div\n  class=\"mlv-sidebar-group\"\n  [class.mlv-sidebar-group--expanded]=\"expanded()\"\n  [class.mlv-sidebar-group--collapsed]=\"isSidebarCollapsed()\"\n  [attr.aria-hidden]=\"isSidebarCollapsed() ? 'true' : null\"\n  [attr.inert]=\"isSidebarCollapsed() ? '' : null\"\n>\n  <button\n    class=\"mlv-sidebar-group__header\"\n    type=\"button\"\n    [class.mlv-sidebar-group__header--active]=\"hasActiveChild()\"\n    [attr.aria-expanded]=\"expanded()\"\n    (click)=\"toggle()\"\n  >\n    @if (iconRef(); as iconTpl) {\n    <span class=\"mlv-sidebar-group__icon\">\n      <ng-container [ngTemplateOutlet]=\"iconTpl.templateRef\" />\n    </span>\n    }\n    <span class=\"mlv-sidebar-group__label\">{{ label() }}</span>\n    @if (_hasBadge()) {\n    <mlv-badge\n      class=\"mlv-sidebar-group__badge\"\n      [tone]=\"badgeTone()\"\n      muted\n      mlvDensity=\"tight\"\n      aria-hidden=\"true\"\n      >{{ badge() }}</mlv-badge\n    >\n    }\n    <svg\n      class=\"mlv-sidebar-group__arrow\"\n      [class.mlv-sidebar-group__arrow--open]=\"expanded()\"\n      lucideChevronDown\n      size=\"16\"\n    />\n  </button>\n\n  <mlv-expand\n    class=\"mlv-sidebar-group__content\"\n    [opened]=\"_accordionOpen()\"\n    (openedChange)=\"expanded.set($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"childrenTpl()\" />\n  </mlv-expand>\n</div>\n\n<!-- \u2500\u2500\u2500 COLLAPSED sidebar: icon button + popup flyout on click \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n@if (isSidebarCollapsed()) {\n<mlv-popup-container #flyoutContainer class=\"mlv-sidebar-group__collapsed\">\n  <button\n    #triggerBtn\n    mlvPopupTrigger\n    [triggerOn]=\"'click'\"\n    class=\"mlv-sidebar-group__icon-btn\"\n    type=\"button\"\n    [class.mlv-sidebar-group__icon-btn--active]=\"hasActiveChild()\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-expanded]=\"flyoutOpen()\"\n    [ariaHasPopup]=\"'menu'\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (mouseenter)=\"onIconBtnMouseEnter()\"\n    (mouseleave)=\"onIconBtnMouseLeave()\"\n    (focus)=\"onIconBtnMouseEnter()\"\n    (blur)=\"onIconBtnMouseLeave()\"\n  >\n    @if (iconRef(); as iconTpl) {\n    <ng-container [ngTemplateOutlet]=\"iconTpl.templateRef\" />\n    } @if (_hasBadge()) {\n    <mlv-status-indicator\n      class=\"mlv-sidebar-group__status\"\n      [tone]=\"badgeTone()\"\n      [pulse]=\"badgePulse()\"\n    />\n    }\n  </button>\n\n  <mlv-popup\n    #flyoutPopup\n    position=\"right-start\"\n    [minWidth]=\"180\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-group__flyout-popup\"\n  >\n    <ng-template mlvPopupContent>\n      <div\n        class=\"mlv-sidebar-group__flyout\"\n        [id]=\"_flyoutId\"\n        role=\"menu\"\n        [attr.aria-label]=\"label()\"\n        (keydown)=\"onFlyoutKeydown($event)\"\n        (click)=\"onFlyoutClick($event)\"\n        (focusout)=\"onFlyoutFocusOut($event)\"\n        tabindex=\"-1\"\n      >\n        <div class=\"mlv-sidebar-group__flyout-header\" aria-hidden=\"true\">\n          <span class=\"mlv-sidebar-group__flyout-title\">{{ label() }}</span>\n          @if (_hasBadge()) {\n          <mlv-badge\n            class=\"mlv-sidebar-group__flyout-badge\"\n            [tone]=\"badgeTone()\"\n            muted\n            mlvDensity=\"tight\"\n            >{{ badge() }}</mlv-badge\n          >\n          }\n        </div>\n        <ng-container [ngTemplateOutlet]=\"childrenTpl()\" />\n      </div>\n    </ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n\n<!-- Tooltip anchored to the icon button (registered via effect) -->\n<mlv-popup-container #tooltipContainer>\n  <mlv-popup\n    panelRole=\"tooltip\"\n    position=\"right\"\n    [hasShadow]=\"true\"\n    [hasBackdrop]=\"false\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-group__tooltip-container\"\n  >\n    <ng-template mlvPopupContent>{{ label() }}</ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n}\n", styles: ["@charset \"UTF-8\";.mlv-sidebar-group-host{display:grid;width:100%;min-width:0}.mlv-sidebar-group-host>.mlv-sidebar-group,.mlv-sidebar-group-host>.mlv-sidebar-group__collapsed{grid-area:1/1;min-width:0}.mlv-sidebar-group{width:100%;min-width:0}.mlv-sidebar-group--collapsed{pointer-events:none}.mlv-sidebar-group__header{display:grid;grid-template-columns:var(--mlv-sidebar-icon-column-width, 3.5rem) minmax(0,1fr) auto auto;align-items:center;width:100%;min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border:none;border-radius:var(--mlv-radius-m);background:transparent;cursor:pointer;font-size:var(--mlv-font-size-l);color:var(--mlv-text-secondary);text-align:left;transition-property:background-color,color;transition-duration:var(--mlv-duration-normal);transition-timing-function:var(--mlv-ease-default);line-height:var(--mlv-line-height-snug);outline:none}.mlv-sidebar-group__header *{color:inherit}.mlv-sidebar-group__header:hover,.mlv-sidebar-group__header:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-group__header:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-sidebar-group__header--active{color:var(--mlv-text-action);font-weight:600}.mlv-sidebar-group__icon{display:flex;align-items:center;justify-content:center}.mlv-sidebar-group__label{font-size:var(--mlv-font-size-l);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;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-group__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-group__arrow{flex-shrink:0;margin-right:var(--mlv-spacing-2);transition:transform var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-sidebar-group__arrow--open{transform:rotate(180deg)}.mlv-sidebar-group--collapsed .mlv-sidebar-group__label{opacity:0;transform:translate(-.25rem);visibility:hidden;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-group--collapsed .mlv-sidebar-group__badge,.mlv-sidebar-group--collapsed .mlv-sidebar-group__arrow{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)}.mlv-sidebar-group__content{margin-left:calc(var(--mlv-sidebar-icon-column-width, 3.5rem) / 2);border-left:.09375rem solid transparent;padding-left:.53125rem;padding-top:0;transition:border-color var(--mlv-duration-normal) var(--mlv-ease-default),padding-top var(--mlv-duration-normal) var(--mlv-ease-default)}.mlv-sidebar-group__content.mlv-expand--open{border-color:var(--mlv-sidebar-rail-color, var(--mlv-border-normal));padding-top:.125rem}.mlv-sidebar-group__content .mlv-expand__body-inner{display:flex;flex-direction:column;gap:.0625rem}.mlv-sidebar-group__tooltip-container.mlv-popup{padding:var(--mlv-padding-m)}.mlv-sidebar-group__icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:var(--mlv-sidebar-icon-column-width, 3.5rem);min-height:var(--mlv-sidebar-row-height, 2.25rem);padding:0;border:none;border-radius:var(--mlv-radius-m);background:transparent;cursor:pointer;color:var(--mlv-text-secondary);transition:background-color var(--mlv-duration-fast) var(--mlv-ease-default),color var(--mlv-duration-fast) var(--mlv-ease-default);outline:none}.mlv-sidebar-group__icon-btn:after{content:\"\\203a\";position:absolute;right:.1875rem;bottom:.0625rem;font-size:.875rem;font-weight:700;line-height:1;opacity:.8;pointer-events:none}.mlv-sidebar-group__icon-btn:hover,.mlv-sidebar-group__icon-btn:focus-visible{background-color:var(--mlv-sidebar-hover-bg, var(--mlv-background-neutral-1));color:var(--mlv-text-primary)}.mlv-sidebar-group__icon-btn:focus-visible{outline:var(--mlv-stroke-width-medium) solid var(--mlv-border-focus);outline-offset:-.125rem}.mlv-sidebar-group__icon-btn.mlv-sidebar-group__icon-btn--active,.mlv-sidebar-group__icon-btn.mlv-sidebar-group__icon-btn--active:hover,.mlv-sidebar-group__icon-btn.mlv-sidebar-group__icon-btn--active:focus-visible{color:var(--mlv-text-action);background-color:var(--mlv-sidebar-active-bg, var(--mlv-background-accent-1-pale))}.mlv-sidebar-group__icon-btn:active{transform:scale(.97)}.mlv-sidebar-group__icon-btn .mlv-sidebar-group__status{position:absolute;top:calc(50% - .625rem);right:calc(50% - .625rem);transform:translate(50%,-50%);pointer-events:none}@media(prefers-reduced-motion:reduce){.mlv-sidebar-group__icon-btn,.mlv-sidebar-group__arrow,.mlv-sidebar-group__label,.mlv-sidebar-group__badge,.mlv-sidebar-group__content{transition-duration:var(--mlv-duration-instant)}}.mlv-sidebar-group__flyout-popup.mlv-popup{padding:var(--mlv-spacing-2)}.mlv-sidebar-group__flyout{display:flex;flex-direction:column;gap:.0625rem}.mlv-sidebar-group__flyout-header{display:flex;align-items:center;gap:var(--mlv-spacing-2);padding:.3125rem .625rem .5rem;font-size:var(--mlv-font-size-m);font-weight:600;color:var(--mlv-text-secondary);border-bottom:.0625rem solid var(--mlv-border-normal);margin-bottom:.125rem;white-space:nowrap}.mlv-sidebar-group__flyout-title{flex:1;overflow:hidden;text-overflow:ellipsis}.mlv-sidebar-group__flyout-badge{flex-shrink:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: true }] }], 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 }] }], _childItems: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => MlvSidebarItem), { ...{
+                            descendants: true,
+                        }, isSignal: true }] }], childrenTpl: [{ type: i0.ViewChild, args: ['childrenRef', { isSignal: true }] }], _triggerBtn: [{ type: i0.ViewChild, args: ['triggerBtn', { isSignal: true }] }], _flyoutContainer: [{ type: i0.ViewChild, args: ['flyoutContainer', { isSignal: true }] }], _flyoutPopup: [{ type: i0.ViewChild, args: ['flyoutPopup', { isSignal: true }] }], _tooltipContainer: [{ type: i0.ViewChild, args: ['tooltipContainer', { isSignal: true }] }] } });
+//# sourceMappingURL=sidebar-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-group.js","sourceRoot":"","sources":["../../../../../../../libs/core/sidebar/src/lib/sidebar-group/sidebar-group.ts","../../../../../../../libs/core/sidebar/src/lib/sidebar-group/sidebar-group.html"],"names":[],"mappings":"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","sourcesContent":["import type { ElementRef, TemplateRef } from '@angular/core';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  ViewEncapsulation,\n  computed,\n  contentChild,\n  contentChildren,\n  effect,\n  forwardRef,\n  inject,\n  input,\n  signal,\n  viewChild,\n} from '@angular/core';\nimport { DOCUMENT, NgTemplateOutlet } from '@angular/common';\nimport type { BooleanInput } from '@angular/cdk/coercion';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\nimport { LucideChevronDown } from '@lucide/angular';\nimport { mlvNextId } from '@malva-ui/cdk/utils';\nimport {\n  MlvPopup,\n  MlvPopupContainer,\n  MlvPopupContent,\n  MlvPopupTrigger,\n} from '@malva-ui/core/popup';\nimport { MlvExpand } from '@malva-ui/core/expand';\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 {\n  SIDEBAR_CONTEXT,\n  type MlvSidebarContextValue,\n} from '../sidebar-context';\nimport type { MlvSidebarMode } from '../sidebar-mode';\nimport { MlvSidebarItemIcon } from '../sidebar-item-icon';\nimport { MlvSidebarItem } from '../sidebar-item/sidebar-item';\n\n@Component({\n  selector: 'mlv-sidebar-group',\n  imports: [\n    NgTemplateOutlet,\n    LucideChevronDown,\n    MlvPopupContainer,\n    MlvPopup,\n    MlvPopupContent,\n    MlvPopupTrigger,\n    MlvExpand,\n    MlvBadge,\n    MlvStatusIndicator,\n  ],\n  templateUrl: './sidebar-group.html',\n  styleUrl: './sidebar-group.scss',\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: { class: 'mlv-sidebar-group-host' },\n  // Re-provide SIDEBAR_CONTEXT for descendants, injecting inFlyout from this group.\n  // Children inside the flyout popup see inFlyout=true and render in expanded mode.\n  providers: [\n    {\n      provide: SIDEBAR_CONTEXT,\n      useFactory: (): MlvSidebarContextValue => {\n        const group = inject(forwardRef(() => MlvSidebarGroup));\n        const parentCtx = inject(SIDEBAR_CONTEXT, {\n          skipSelf: true,\n          optional: true,\n        });\n        return {\n          collapsed: parentCtx?.collapsed ?? signal(false),\n          inFlyout: group.flyoutOpen,\n          mode: parentCtx?.mode ?? signal<MlvSidebarMode>('icon'),\n          effectiveMode: parentCtx?.effectiveMode ?? parentCtx?.mode,\n          // Proxy to parent — intentionally no-op when group is the root context provider\n          toggle: () => parentCtx?.toggle(),\n          setWidth: (px: number) => parentCtx?.setWidth(px),\n        };\n      },\n    },\n  ],\n})\nexport class MlvSidebarGroup {\n  /** @private Parent sidebar context (skipSelf) used to read collapsed/mode state and proxy toggles. */\n  private readonly _parentCtx = inject(SIDEBAR_CONTEXT, {\n    skipSelf: true,\n    optional: true,\n  });\n\n  /** @private Document handle used to resolve the overlay-rendered flyout panel by id. */\n  private readonly _document = inject(DOCUMENT);\n\n  /** @protected Stable id linking the collapsed-mode flyout panel so its focusable items can be resolved. */\n  protected readonly _flyoutId = mlvNextId('mlv-sidebar-flyout');\n\n  /** Required label for the group header and flyout title. */\n  readonly label = input.required<string>();\n\n  /**\n   * Optional badge/count for the group. Rendered as a trailing `mlv-badge` in\n   * the expanded accordion header and next to the flyout title, and as a\n   * `mlv-status-indicator` dot (top-right of the icon button) when the sidebar\n   * is collapsed. `null`/`''` renders nothing.\n   */\n  readonly badge = input<string | number | null>(null);\n\n  /** Semantic tone applied to the group 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 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 Collapsed icon-button `aria-label`: the group `label()` with the\n   * badge count folded in (e.g. `\"Projects, 3 notifications\"`), since the\n   * collapsed dot is decorative and carries no text.\n   */\n  protected readonly _resolvedAriaLabel = computed(() => {\n    const base = this.label();\n    if (!this._hasBadge()) return base;\n    return `${base}, ${this._announceBadge(this.badge() as string | number)}`;\n  });\n\n  /** @protected Projected group icon template, rendered in the header and flyout. */\n  protected readonly iconRef = contentChild(MlvSidebarItemIcon);\n  /** @protected Projected sidebar items, used to derive the active-child highlight. */\n  protected readonly _childItems = contentChildren(MlvSidebarItem, {\n    descendants: true,\n  });\n  /** @protected Template of the group's child items, rendered in the accordion and flyout. */\n  protected readonly childrenTpl =\n    viewChild.required<TemplateRef<unknown>>('childrenRef');\n  /** @protected Icon trigger button element, used as the flyout/tooltip anchor and focus target. */\n  protected readonly _triggerBtn =\n    viewChild<ElementRef<HTMLButtonElement>>('triggerBtn');\n\n  /** @protected Reference to the flyout popup container (collapsed mode). */\n  protected readonly _flyoutContainer =\n    viewChild<MlvPopupContainer>('flyoutContainer');\n  /** @protected Reference to the flyout popup component for state reading. */\n  protected readonly _flyoutPopup = viewChild<MlvPopup>('flyoutPopup');\n  /** @protected Tooltip popup shown on hover in collapsed mode. */\n  protected readonly _tooltipContainer =\n    viewChild<MlvPopupContainer>('tooltipContainer');\n\n  /** Whether the accordion is expanded (expanded sidebar mode). */\n  readonly expanded = signal(false);\n\n  /**\n   * Whether the flyout popup is currently open.\n   * Derived from the popup component's `opened` signal.\n   */\n  readonly flyoutOpen = computed(() => this._flyoutPopup()?.opened() ?? false);\n\n  /** True when the parent sidebar is in collapsed (icon-only) mode. */\n  readonly isSidebarCollapsed = computed(\n    () => this._parentCtx?.collapsed() ?? false,\n  );\n\n  /** True when at least one child item is active — drives active highlight on the group. */\n  readonly hasActiveChild = computed(() =>\n    this._childItems().some((item) => item.computedActive()),\n  );\n\n  /**\n   * @protected Effective open state of the accordion panel.\n   *\n   * `expanded` is public and writable, so a host that auto-expands the group\n   * owning the active route can set it while the sidebar is collapsed. The\n   * accordion stays mounted in that state (its header fades but keeps the icon\n   * column in place), so honouring the write would open an empty panel inside\n   * the icon rail — a ghost tree line and reserved height — and, because\n   * `#childrenRef` can only be projected once, it would also pull the children\n   * out of the open flyout and leave it showing just its header. Gating on the\n   * collapsed state here makes that unreachable regardless of write order; the\n   * constructor effect still resets `expanded` when collapse begins.\n   */\n  protected readonly _accordionOpen = computed(\n    () => this.expanded() && !this.isSidebarCollapsed(),\n  );\n\n  constructor() {\n    // Close whichever disclosure belongs to the representation that is\n    // becoming inactive. The group header itself remains mounted so its label\n    // can fade while the fixed icon track stays in place.\n    effect(() => {\n      if (this.isSidebarCollapsed()) {\n        this.expanded.set(false);\n      } else {\n        this._flyoutContainer()?.close();\n      }\n    });\n\n    // Register the icon button as the anchor for the tooltip.\n    effect(() => {\n      const btn = this._triggerBtn();\n      const tooltipContainer = this._tooltipContainer();\n      if (btn && tooltipContainer) {\n        tooltipContainer.registerTrigger(btn, false);\n      }\n    });\n\n    // Dismiss tooltip and move focus into the flyout when it opens (menu-button\n    // pattern). The panel is rendered into a CDK overlay, so wait one frame for\n    // the portal to attach before focusing its first item.\n    effect(() => {\n      if (this.flyoutOpen()) {\n        this._tooltipContainer()?.close();\n        requestAnimationFrame(() => {\n          if (this.flyoutOpen()) this._focusFirstFlyoutItem();\n        });\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  // ─── Accordion (expanded sidebar) ──────────────────────────────────────────\n\n  /** Toggles the accordion open/closed state. */\n  toggle(): void {\n    this.expanded.update((v) => !v);\n  }\n\n  // ─── Flyout (collapsed sidebar) ─────────────────────────────────────────────\n\n  /** @protected Roving keyboard navigation (Arrow/Home/End/Escape) within the open flyout panel. */\n  protected onFlyoutKeydown(event: Event): void {\n    const e = event as KeyboardEvent;\n    const panel = e.currentTarget as HTMLElement;\n\n    // Close flyout and return focus to trigger\n    if (e.key === 'ArrowLeft' || e.key === 'Escape') {\n      e.preventDefault();\n      e.stopPropagation();\n      this._flyoutContainer()?.close();\n      this._triggerBtn()?.nativeElement.focus();\n      return;\n    }\n\n    // Sidebar items in the flyout may be focusable via their own host\n    // (button-style rows) or via a projected link/button (navigational rows).\n    const items = Array.from(\n      panel.querySelectorAll<HTMLElement>('a[href], button, [tabindex=\"0\"]'),\n    ).filter((el) => !el.hasAttribute('disabled'));\n    if (!items.length) return;\n\n    const idx = items.indexOf(document.activeElement as HTMLElement);\n\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      items[(idx + 1) % items.length].focus();\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      items[(idx - 1 + items.length) % items.length].focus();\n    } else if (e.key === 'Home') {\n      e.preventDefault();\n      items[0].focus();\n    } else if (e.key === 'End') {\n      e.preventDefault();\n      items[items.length - 1].focus();\n    }\n  }\n\n  /**\n   * @protected Handles Enter/Space (toggle) and ArrowRight (open) on the\n   * collapsed-mode icon trigger. When the flyout is already open, ArrowDown\n   * enters it (focuses the first item) instead of bubbling to the sidebar\n   * container's roving nav — so an open flyout is never skipped past.\n   */\n  protected onTriggerKeydown(event: Event): void {\n    const e = event as KeyboardEvent;\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._flyoutContainer()?.toggle();\n    } else if (e.key === 'ArrowRight') {\n      e.preventDefault();\n      if (this.flyoutOpen()) {\n        this._focusFirstFlyoutItem();\n      } else {\n        this._flyoutContainer()?.open();\n      }\n    } else if (e.key === 'ArrowDown' && this.flyoutOpen()) {\n      // Enter the open flyout rather than letting the sidebar container move\n      // focus to the next trigger (which would orphan this flyout).\n      e.preventDefault();\n      e.stopPropagation();\n      this._focusFirstFlyoutItem();\n    }\n  }\n\n  /**\n   * @protected Closes the flyout and returns focus to the icon trigger when a\n   * child item inside it is activated.\n   *\n   * The menu-button pattern expects the menu to close once a command is\n   * chosen — without this a `routerLink` navigation left the flyout hanging\n   * over the new page. Enter/Space are covered too: `MlvSidebarItem` activates\n   * a button-style row by calling `.click()` on its host, and a projected\n   * anchor dispatches a real click, so both reach this bubbling handler.\n   *\n   * Clicks on the flyout header or on empty panel space are ignored — only a\n   * target inside a `.mlv-sidebar-item` (its host, projected link or button)\n   * counts as an activation.\n   */\n  protected onFlyoutClick(event: Event): void {\n    const target = event.target as HTMLElement | null;\n    if (!target?.closest('.mlv-sidebar-item')) return;\n    this._flyoutContainer()?.close();\n    this._triggerBtn()?.nativeElement.focus();\n  }\n\n  /**\n   * @protected Closes the flyout when keyboard focus leaves it entirely (Tab\n   * out, or focus moving to another trigger) so it is never left orphaned-open.\n   * Focus moves between items inside the panel, or back to the owning trigger,\n   * are ignored.\n   */\n  protected onFlyoutFocusOut(event: Event): void {\n    const next = (event as FocusEvent).relatedTarget as HTMLElement | null;\n    // Focus lost to nothing (e.g. window blur) — keep the flyout open.\n    if (!next) return;\n    const panel = this._document.getElementById(this._flyoutId);\n    const trigger = this._triggerBtn()?.nativeElement ?? null;\n    if (panel?.contains(next) || next === trigger) return;\n    this._flyoutContainer()?.close();\n  }\n\n  /** @private Moves focus to the first focusable item inside the open flyout panel. */\n  private _focusFirstFlyoutItem(): void {\n    const panel = this._document.getElementById(this._flyoutId);\n    const first = panel?.querySelector<HTMLElement>(\n      'a[href], button:not([disabled]), [tabindex=\"0\"]',\n    );\n    first?.focus();\n  }\n\n  /** Opens the tooltip when hovering the icon button (collapsed mode, flyout not open). */\n  protected onIconBtnMouseEnter(): void {\n    if (!this.flyoutOpen()) {\n      this._tooltipContainer()?.open();\n    }\n  }\n\n  /** Closes the tooltip when the pointer leaves the icon button. */\n  protected onIconBtnMouseLeave(): void {\n    this._tooltipContainer()?.close();\n  }\n}\n","<!-- ─── Children captured once — rendered in accordion OR flyout ─── -->\n<ng-template #childrenRef>\n  <ng-content />\n</ng-template>\n\n<!-- The expanded header remains mounted during collapse so its text can fade\n     without moving the icon out of the shared fixed-width column. -->\n<div\n  class=\"mlv-sidebar-group\"\n  [class.mlv-sidebar-group--expanded]=\"expanded()\"\n  [class.mlv-sidebar-group--collapsed]=\"isSidebarCollapsed()\"\n  [attr.aria-hidden]=\"isSidebarCollapsed() ? 'true' : null\"\n  [attr.inert]=\"isSidebarCollapsed() ? '' : null\"\n>\n  <button\n    class=\"mlv-sidebar-group__header\"\n    type=\"button\"\n    [class.mlv-sidebar-group__header--active]=\"hasActiveChild()\"\n    [attr.aria-expanded]=\"expanded()\"\n    (click)=\"toggle()\"\n  >\n    @if (iconRef(); as iconTpl) {\n    <span class=\"mlv-sidebar-group__icon\">\n      <ng-container [ngTemplateOutlet]=\"iconTpl.templateRef\" />\n    </span>\n    }\n    <span class=\"mlv-sidebar-group__label\">{{ label() }}</span>\n    @if (_hasBadge()) {\n    <mlv-badge\n      class=\"mlv-sidebar-group__badge\"\n      [tone]=\"badgeTone()\"\n      muted\n      mlvDensity=\"tight\"\n      aria-hidden=\"true\"\n      >{{ badge() }}</mlv-badge\n    >\n    }\n    <svg\n      class=\"mlv-sidebar-group__arrow\"\n      [class.mlv-sidebar-group__arrow--open]=\"expanded()\"\n      lucideChevronDown\n      size=\"16\"\n    />\n  </button>\n\n  <mlv-expand\n    class=\"mlv-sidebar-group__content\"\n    [opened]=\"_accordionOpen()\"\n    (openedChange)=\"expanded.set($event)\"\n  >\n    <ng-container [ngTemplateOutlet]=\"childrenTpl()\" />\n  </mlv-expand>\n</div>\n\n<!-- ─── COLLAPSED sidebar: icon button + popup flyout on click ──────────── -->\n@if (isSidebarCollapsed()) {\n<mlv-popup-container #flyoutContainer class=\"mlv-sidebar-group__collapsed\">\n  <button\n    #triggerBtn\n    mlvPopupTrigger\n    [triggerOn]=\"'click'\"\n    class=\"mlv-sidebar-group__icon-btn\"\n    type=\"button\"\n    [class.mlv-sidebar-group__icon-btn--active]=\"hasActiveChild()\"\n    [attr.aria-label]=\"_resolvedAriaLabel()\"\n    [attr.aria-expanded]=\"flyoutOpen()\"\n    [ariaHasPopup]=\"'menu'\"\n    (keydown)=\"onTriggerKeydown($event)\"\n    (mouseenter)=\"onIconBtnMouseEnter()\"\n    (mouseleave)=\"onIconBtnMouseLeave()\"\n    (focus)=\"onIconBtnMouseEnter()\"\n    (blur)=\"onIconBtnMouseLeave()\"\n  >\n    @if (iconRef(); as iconTpl) {\n    <ng-container [ngTemplateOutlet]=\"iconTpl.templateRef\" />\n    } @if (_hasBadge()) {\n    <mlv-status-indicator\n      class=\"mlv-sidebar-group__status\"\n      [tone]=\"badgeTone()\"\n      [pulse]=\"badgePulse()\"\n    />\n    }\n  </button>\n\n  <mlv-popup\n    #flyoutPopup\n    position=\"right-start\"\n    [minWidth]=\"180\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-group__flyout-popup\"\n  >\n    <ng-template mlvPopupContent>\n      <div\n        class=\"mlv-sidebar-group__flyout\"\n        [id]=\"_flyoutId\"\n        role=\"menu\"\n        [attr.aria-label]=\"label()\"\n        (keydown)=\"onFlyoutKeydown($event)\"\n        (click)=\"onFlyoutClick($event)\"\n        (focusout)=\"onFlyoutFocusOut($event)\"\n        tabindex=\"-1\"\n      >\n        <div class=\"mlv-sidebar-group__flyout-header\" aria-hidden=\"true\">\n          <span class=\"mlv-sidebar-group__flyout-title\">{{ label() }}</span>\n          @if (_hasBadge()) {\n          <mlv-badge\n            class=\"mlv-sidebar-group__flyout-badge\"\n            [tone]=\"badgeTone()\"\n            muted\n            mlvDensity=\"tight\"\n            >{{ badge() }}</mlv-badge\n          >\n          }\n        </div>\n        <ng-container [ngTemplateOutlet]=\"childrenTpl()\" />\n      </div>\n    </ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n\n<!-- Tooltip anchored to the icon button (registered via effect) -->\n<mlv-popup-container #tooltipContainer>\n  <mlv-popup\n    panelRole=\"tooltip\"\n    position=\"right\"\n    [hasShadow]=\"true\"\n    [hasBackdrop]=\"false\"\n    scrollStrategy=\"close\"\n    class=\"mlv-sidebar-group__tooltip-container\"\n  >\n    <ng-template mlvPopupContent>{{ label() }}</ng-template>\n  </mlv-popup>\n</mlv-popup-container>\n}\n"]}

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

@@ -0,0 +1,20 @@
+import { Directive } from '@angular/core';
+import * as i0 from "@angular/core";
+/**
+ * Marks a sticky top region inside the sidebar.
+ * Applied to a container element that should remain visible at the top when content scrolls.
+ */
+export class MlvSidebarHeader {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: MlvSidebarHeader, isStandalone: true, selector: "[mlvSidebarHeader]", host: { classAttribute: "mlv-sidebar__header" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvSidebarHeader, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[mlvSidebarHeader]',
+                    host: {
+                        class: 'mlv-sidebar__header',
+                    },
+                }]
+        }] });
+//# sourceMappingURL=sidebar-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-header.js","sourceRoot":"","sources":["../../../../../../libs/core/sidebar/src/lib/sidebar-header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;AAE1C;;;GAGG;AAOH,MAAM,OAAO,gBAAgB;uGAAhB,gBAAgB;2FAAhB,gBAAgB;;2FAAhB,gBAAgB;kBAN5B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE;wBACJ,KAAK,EAAE,qBAAqB;qBAC7B;iBACF","sourcesContent":["import { Directive } from '@angular/core';\n\n/**\n * Marks a sticky top region inside the sidebar.\n * Applied to a container element that should remain visible at the top when content scrolls.\n */\n@Directive({\n  selector: '[mlvSidebarHeader]',\n  host: {\n    class: 'mlv-sidebar__header',\n  },\n})\nexport class MlvSidebarHeader {}\n"]}