@malva-ui/core 0.1.12

package/esm2022/tabs/lib/tabs/tabs.js

@@ -0,0 +1,542 @@
+import { ChangeDetectionStrategy, Component, computed, DestroyRef, effect, ElementRef, inject, input, model, signal, untracked, viewChild, viewChildren, ViewEncapsulation, } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NgTemplateOutlet } from '@angular/common';
+import { Router, NavigationEnd } from '@angular/router';
+import { filter } from 'rxjs';
+import { Tab, TabContent, TabList, TabPanel, Tabs } from '@angular/aria/tabs';
+import { MlvTabItem } from '../tab-item/tab-item';
+import { MlvTabContent } from '../tab-content/tab-content';
+import { MlvTabsService } from '../tabs.service';
+import { TAB_GROUP } from '../tab-group-token';
+import { MlvPopup, MlvPopupContent, MlvPopupTrigger, } from '@malva-ui/core/popup';
+import { MlvList, MlvListItem } from '@malva-ui/core/list';
+import { MLV_TABS_I18N } from '@malva-ui/i18n';
+import { MLV_DENSITY_ELEMENT, MlvDensityDirective, } from '@malva-ui/cdk/density';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/aria/tabs";
+import * as i2 from "@malva-ui/cdk/density";
+export class MlvTabGroup {
+    /** @private Scoped service tracking tab registration and visible/overflow split. */
+    _tabsService = inject(MlvTabsService);
+    /** @private Destroy reference used to tear down the resize observer. */
+    _destroyRef = inject(DestroyRef);
+    /**
+     * @private Router used for routed-mode active detection and navigation.
+     * `null` when `RouterModule`/`provideRouter` is not present, keeping non-routed
+     * tab groups fully functional without a router.
+     */
+    _router = inject(Router, { optional: true });
+    /** @protected The component's i18n strings signal. */
+    _i18n = inject(MLV_TABS_I18N);
+    /** @private Native ResizeObserver watching the tab-list header for overflow recalculation. */
+    _resizeObserver = null;
+    /**
+     * @private Trailing debounce timer for the ResizeObserver. Coalesces the burst
+     * of resize callbacks fired during a drag into a single recalculation so tabs
+     * do not flip between the row and the overflow menu on every frame.
+     */
+    _resizeDebounceTimer = null;
+    /**
+     * @private Cache of each tab's natural (fully-rendered) header width, keyed by
+     * tab value. Populated the first time all tabs are rendered and reused on every
+     * subsequent recalculation so we never have to briefly expand the DOM to all
+     * tabs to re-measure — which is what caused the "dizzy" flicker feedback loop.
+     */
+    _tabWidths = new Map();
+    /** @private Measured width of the "More (N)" overflow trigger (falls back to 100). */
+    _moreButtonWidth = 0;
+    /** @private Trailing debounce (ms) applied to ResizeObserver-driven recalculation. */
+    static _RESIZE_DEBOUNCE_MS = 64;
+    /**
+     * @private Extra px of clearance an overflowed tab must gain before it is
+     * allowed back into the visible row. Provides hysteresis so a tab does not
+     * oscillate in/out at boundary widths.
+     */
+    static _HYSTERESIS_PX = 24;
+    /** @private True when popup closed because an item was selected (skip focus restoration). */
+    _popupClosedBySelection = false;
+    orientation = model('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    activeTab = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    /**
+     * Visual style of the tab header. `'underline'` (default) shows a sliding
+     * indicator bar; `'boxed'` fills the active tab with a rounded surface and
+     * hides the indicator. Orthogonal to `orientation` — composes with both
+     * horizontal and vertical layouts.
+     */
+    appearance = input('underline', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal True when at least one registered tab carries a `[routerLink]`
+     * (its `urlTree()` is non-null). In routed mode the active tab is derived from
+     * the URL via `Router.isActive` rather than from click/keyboard selection, and
+     * the auto-select-first + aria-selection paths defer to the route.
+     */
+    _isRouted = computed(() => this._tabsService.tabs().some((t) => t.urlTree() !== null), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_isRouted" }] : /* istanbul ignore next */ []));
+    /**
+     * @internal Bridges the public `activeTab` model to the aria `ngTabList`
+     * `selectedTab` model input (`string | undefined`). An empty `activeTab`
+     * maps to `undefined` (no tab selected) so aria does not try to match a tab
+     * whose value is the empty string.
+     */
+    selectedTab = computed(() => this.activeTab() || undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectedTab" }] : /* istanbul ignore next */ []));
+    /** @internal Tracks which overflow item has tabindex=0. */
+    overflowFocusedIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowFocusedIndex" }] : /* istanbul ignore next */ []));
+    tabListRef = viewChild('tabListRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabListRef" }] : /* istanbul ignore next */ []));
+    indicatorRef = viewChild('indicatorRef', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "indicatorRef" }] : /* istanbul ignore next */ []));
+    morePopupRef = viewChild('morePopup', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "morePopupRef" }] : /* istanbul ignore next */ []));
+    tabItems = viewChildren(MlvTabItem, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabItems" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The "More (N)" overflow trigger button, present only while overflow
+     * is active. An own-template element, so a signal view query replaces the
+     * former `querySelector('.mlv-tab-group__more-trigger')` used when measuring
+     * the trigger's width during overflow layout.
+     */
+    _moreTriggerRef = viewChild('moreTrigger', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_moreTriggerRef" }] : /* istanbul ignore next */ []));
+    /**
+     * @private The overflow popup's focusable menu-item elements, in DOM order.
+     * They are declared in this component's own template (inside `mlvPopupContent`),
+     * so a signal view query resolves them even though the popup renders in a
+     * detached overlay — replacing a `querySelectorAll('[data-overflow-item-index]')`
+     * for the Arrow-key navigation inside the overflow menu.
+     */
+    _overflowItemRefs = viewChildren('overflowItem', { ...(ngDevMode ? { debugName: "_overflowItemRefs" } : /* istanbul ignore next */ {}), read: ElementRef });
+    visibleTabs = computed(() => this._tabsService.visibleTabs(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleTabs" }] : /* istanbul ignore next */ []));
+    overflowTabs = computed(() => this._tabsService.overflowTabs(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "overflowTabs" }] : /* istanbul ignore next */ []));
+    activeContentTemplate = computed(() => {
+        const value = this.activeTab();
+        const tabs = this._tabsService.tabs();
+        const activeTabComp = tabs.find((t) => t.value() === value);
+        return activeTabComp?.contentTemplate()?.templateRef ?? null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeContentTemplate" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Auto-select first tab if none is set. Suppressed in routed mode where the
+        // URL owns the active tab (see `_syncActiveFromRoute`).
+        effect(() => {
+            if (this._isRouted())
+                return;
+            const tabs = this._tabsService.tabs();
+            const active = this.activeTab();
+            if (tabs.length > 0 &&
+                (!active || !tabs.some((t) => t.value() === active))) {
+                this.activeTab.set(tabs[0].value());
+            }
+        });
+        // ─── Routed mode ─────────────────────────────────────────────────────────
+        // When any child <mlv-tab> carries a [routerLink], derive `activeTab` from
+        // the current URL instead of click/keyboard selection. The routerLink is a
+        // URL carrier on the display:none def node; because the header tab is
+        // rendered separately, routerLinkActive cannot style it, so active state is
+        // owned here via Router.isActive. Intentional, not a workaround.
+        const router = this._router;
+        if (router) {
+            router.events
+                .pipe(filter((e) => e instanceof NavigationEnd), takeUntilDestroyed())
+                .subscribe(() => this._syncActiveFromRoute());
+            // The router may already be settled (no further NavigationEnd will fire),
+            // so run an initial sync once routed tabs register. Only `_isRouted()` /
+            // `tabs()` are tracked; the set itself is untracked to avoid a feedback
+            // loop through `activeTab`.
+            effect(() => {
+                if (!this._isRouted())
+                    return;
+                this._tabsService.tabs();
+                untracked(() => this._syncActiveFromRoute());
+            });
+        }
+        // Pin the active tab into the visible row. When overflow is active this
+        // swaps the active tab into the last visible slot (identical to picking it
+        // from the overflow popup) so the active tab ALWAYS keeps a rendered
+        // `ngTab`. That is essential: if the active tab's `ngTab` is torn down (e.g.
+        // a resize repartition pushes it into overflow), `@angular/aria` desyncs its
+        // `selectedTab` model, marks the active `ngTabPanel` inert and the deferred
+        // `ngTabContent` destroys the panel body permanently. Keeping the active
+        // tab visible prevents that teardown, so the active content survives any
+        // resize/repartition.
+        effect(() => {
+            const active = this.activeTab();
+            this._tabsService.forcedVisibleValue.set(active || null);
+        });
+        // Update indicator position when active tab or visible tabs change
+        effect(() => {
+            this.activeTab();
+            this.visibleTabs();
+            this.tabItems();
+            this._updateIndicator();
+        });
+    }
+    ngAfterViewInit() {
+        this._setupResizeObserver();
+        this._destroyRef.onDestroy(() => this._teardownResizeObserver());
+    }
+    // ─── Public API ──────────────────────────────────────────────────────────
+    selectTab(value) {
+        const tab = this._tabsService.tabs().find((t) => t.value() === value);
+        if (tab?.disabled())
+            return;
+        // Routed tab: navigation is the source of truth. Trigger it and let the
+        // resulting NavigationEnd update `activeTab` via `_syncActiveFromRoute` — do
+        // NOT set `activeTab` directly (that would desync the header from the URL).
+        const urlTree = tab?.urlTree() ?? null;
+        if (urlTree && this._router) {
+            this._router.navigateByUrl(urlTree);
+            return;
+        }
+        this.activeTab.set(value);
+    }
+    /**
+     * @internal Bridges the aria `ngTabList` `selectedTab` output back to the
+     * public `activeTab` model. Ignores `undefined` (aria emits it transiently
+     * before the default selection settles) so the auto-select effect keeps
+     * ownership of the initial value.
+     */
+    _onSelectedTabChange(value) {
+        // In routed mode the URL owns `activeTab`; ignore aria's optimistic
+        // selection so the header cannot desync from the route (navigation,
+        // triggered via `selectTab`, drives `activeTab` through NavigationEnd).
+        if (this._isRouted())
+            return;
+        if (value !== undefined && value !== this.activeTab()) {
+            this.activeTab.set(value);
+        }
+    }
+    selectOverflowTab(value) {
+        this._popupClosedBySelection = true;
+        this._tabsService.forceVisible(value);
+        this.selectTab(value);
+        // Close popup then focus the newly promoted visible tab
+        this.morePopupRef()?.opened.set(false);
+        requestAnimationFrame(() => {
+            const items = this.tabItems();
+            const visibleTabs = this.visibleTabs();
+            const idx = visibleTabs.findIndex((t) => t.value() === value);
+            if (idx >= 0 && items[idx]) {
+                items[idx].focus();
+            }
+        });
+    }
+    isActive(value) {
+        return this.activeTab() === value;
+    }
+    // ─── Routed mode helpers ─────────────────────────────────────────────────
+    /**
+     * @private Sets `activeTab` to the first tab whose routerLink target is active
+     * for the current URL (per its `linkActiveOptions`). No-op when not routed or
+     * when no tab matches (the route stays the source of truth).
+     */
+    _syncActiveFromRoute() {
+        if (!this._isRouted())
+            return;
+        const match = this._tabsService
+            .tabs()
+            .find((t) => this._isTabActiveByRoute(t));
+        if (match && match.value() !== this.activeTab()) {
+            this.activeTab.set(match.value());
+        }
+    }
+    /**
+     * @private Whether a tab's routerLink `urlTree` is active for the current URL,
+     * honouring its `linkActiveOptions`.
+     */
+    _isTabActiveByRoute(tab) {
+        const router = this._router;
+        const urlTree = tab.urlTree();
+        if (!router || !urlTree)
+            return false;
+        const opts = tab.linkActiveOptions();
+        // `Router.isActive` reads an object argument as raw `IsActiveMatchOptions`
+        // and would silently ignore an `{ exact }` key, so map the RouterLinkActive
+        // `{ exact }` shorthand through the boolean overload (matching Angular's own
+        // RouterLinkActive), and pass a full `IsActiveMatchOptions` straight through.
+        return this._isFullMatchOptions(opts)
+            ? router.isActive(urlTree, opts)
+            : router.isActive(urlTree, opts.exact);
+    }
+    /**
+     * @private Type guard distinguishing a full `IsActiveMatchOptions` object from
+     * the `{ exact: boolean }` shorthand (mirrors Angular's internal check).
+     */
+    _isFullMatchOptions(opts) {
+        const o = opts;
+        return !!(o.paths || o.matrixParams || o.queryParams || o.fragment);
+    }
+    // ─── Overflow popup handling ─────────────────────────────────────────────
+    /** Opens the overflow popup and focuses the first overflow item after render. */
+    openOverflowPopup() {
+        this.overflowFocusedIndex.set(0);
+        this.morePopupRef()?.opened.set(true);
+    }
+    /**
+     * Called when the overflow popup finishes opening.
+     * Focuses the first (or active) overflow item.
+     */
+    onMorePopupAfterOpened() {
+        // Active overflow tab gets initial focus, otherwise first item
+        const overflowTabs = this.overflowTabs();
+        const activeIdx = overflowTabs.findIndex((t) => this.isActive(t.value()));
+        const targetIdx = activeIdx >= 0 ? activeIdx : 0;
+        this.overflowFocusedIndex.set(targetIdx);
+        this._overflowItemRefs()[targetIdx]?.nativeElement.focus();
+    }
+    /**
+     * Called when the overflow popup finishes closing.
+     * Returns focus to the active visible tab unless the popup was closed by
+     * selecting an item (focus goes to the promoted tab instead).
+     */
+    onMorePopupAfterClosed() {
+        if (this._popupClosedBySelection) {
+            this._popupClosedBySelection = false;
+            return;
+        }
+        const items = this.tabItems();
+        const activeIdx = this.visibleTabs().findIndex((t) => this.isActive(t.value()));
+        items[activeIdx >= 0 ? activeIdx : 0]?.focus();
+    }
+    /**
+     * Keydown handler on the overflow list wrapper inside the popup.
+     * Up/Down arrows navigate between items; Escape closes the popup.
+     */
+    onOverflowKeydown(event) {
+        const items = this._overflowItemRefs().map((ref) => ref.nativeElement);
+        const count = items.length;
+        if (count === 0)
+            return;
+        if (event.key === 'ArrowDown') {
+            event.preventDefault();
+            this.overflowFocusedIndex.update((i) => Math.min(i + 1, count - 1));
+            items[this.overflowFocusedIndex()]?.focus();
+        }
+        else if (event.key === 'ArrowUp') {
+            event.preventDefault();
+            this.overflowFocusedIndex.update((i) => Math.max(i - 1, 0));
+            items[this.overflowFocusedIndex()]?.focus();
+        }
+        else if (event.key === 'Escape') {
+            event.preventDefault();
+            this.morePopupRef()?.opened.set(false);
+            // afterClosed will restore focus to last focused visible tab
+        }
+    }
+    // ─── Private helpers ─────────────────────────────────────────────────────
+    /** @private Repositions the active-tab indicator bar via CSS custom properties. */
+    _updateIndicator() {
+        queueMicrotask(() => {
+            const items = this.tabItems();
+            const indicatorEl = this.indicatorRef()?.nativeElement;
+            if (!indicatorEl)
+                return;
+            const activeItem = items.find((_, i) => this.visibleTabs()[i] && this.isActive(this.visibleTabs()[i].value()));
+            if (!activeItem) {
+                indicatorEl.style.setProperty('--mlv-tab-indicator-width', '0');
+                indicatorEl.style.setProperty('--mlv-tab-indicator-height', '0');
+                return;
+            }
+            const el = activeItem.elementRef.nativeElement;
+            if (this.orientation() === 'horizontal') {
+                indicatorEl.style.setProperty('--mlv-tab-indicator-left', `${el.offsetLeft}px`);
+                indicatorEl.style.setProperty('--mlv-tab-indicator-width', `${el.offsetWidth}px`);
+            }
+            else {
+                indicatorEl.style.setProperty('--mlv-tab-indicator-top', `${el.offsetTop}px`);
+                indicatorEl.style.setProperty('--mlv-tab-indicator-height', `${el.offsetHeight}px`);
+            }
+        });
+    }
+    /** @private Attaches a ResizeObserver to the header to recalculate overflow on width changes. */
+    _setupResizeObserver() {
+        if (this.orientation() === 'vertical')
+            return;
+        const headerEl = this.tabListRef()?.nativeElement;
+        if (!headerEl)
+            return;
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        // Debounce (trailing): a drag fires the observer many times per second.
+        // Coalescing them into one recalculation after the width settles is the
+        // first line of defence against the flickering "dizzy" repartition.
+        this._resizeObserver = new ResizeObserver(() => {
+            if (this._resizeDebounceTimer !== null) {
+                clearTimeout(this._resizeDebounceTimer);
+            }
+            this._resizeDebounceTimer = setTimeout(() => {
+                this._resizeDebounceTimer = null;
+                this._recalculateOverflow();
+            }, MlvTabGroup._RESIZE_DEBOUNCE_MS);
+        });
+        this._resizeObserver.observe(headerEl);
+    }
+    /** @private Disconnects and clears the header ResizeObserver and its debounce timer. */
+    _teardownResizeObserver() {
+        if (this._resizeDebounceTimer !== null) {
+            clearTimeout(this._resizeDebounceTimer);
+            this._resizeDebounceTimer = null;
+        }
+        this._resizeObserver?.disconnect();
+        this._resizeObserver = null;
+    }
+    /**
+     * @private Updates the visible/overflow split for the current header width.
+     *
+     * Unlike the previous implementation it does NOT reset the rendered set to
+     * "show all" on every call. Tab widths are cached (keyed by value) the first
+     * time every tab is rendered; afterwards the split is computed purely from the
+     * cache and the container width. That removes the measure→mutate→re-measure
+     * feedback loop (moving a tab to overflow no longer changes what we measure),
+     * which — together with the ResizeObserver debounce and the hysteresis in
+     * {@link _computeFittingCount} — kills the flickering repartition.
+     */
+    _recalculateOverflow() {
+        if (this.orientation() === 'vertical') {
+            this._tabsService.maxVisibleCount.set(-1);
+            return;
+        }
+        const headerEl = this.tabListRef()?.nativeElement;
+        if (!headerEl)
+            return;
+        // Refresh the cache from whatever is currently rendered (no DOM mutation).
+        this._captureRenderedWidths();
+        const allTabs = this._tabsService.tabs();
+        const missingWidth = allTabs.some((t) => !this._tabWidths.has(t.value()));
+        if (missingWidth) {
+            // Cold cache (first run) or new tabs added: render every tab once so we
+            // can capture the missing widths, then apply. This is the ONLY branch
+            // that expands the DOM, and only runs until the cache is warm — so
+            // steady-state resizes never flash the full tab set.
+            this._tabsService.maxVisibleCount.set(-1);
+            requestAnimationFrame(() => {
+                this._captureRenderedWidths();
+                this._applyOverflowFit();
+            });
+            return;
+        }
+        this._applyOverflowFit();
+    }
+    /**
+     * @private Captures the natural widths of the currently-rendered tab items
+     * (and the "More" trigger) into the width cache, keyed by tab value. Zero
+     * widths (detached / not laid out) are ignored so a transient render never
+     * poisons the cache.
+     */
+    _captureRenderedWidths() {
+        const items = this.tabItems();
+        const visible = this._tabsService.visibleTabs();
+        items.forEach((item, i) => {
+            const value = visible[i]?.value();
+            const width = item.elementRef.nativeElement.offsetWidth;
+            if (value && width > 0) {
+                this._tabWidths.set(value, width);
+            }
+        });
+        const moreEl = this._moreTriggerRef()?.nativeElement;
+        if (moreEl && moreEl.offsetWidth > 0) {
+            this._moreButtonWidth = moreEl.offsetWidth;
+        }
+    }
+    /**
+     * @private Applies the cached-width overflow computation to the service and
+     * repositions the indicator.
+     */
+    _applyOverflowFit() {
+        const headerEl = this.tabListRef()?.nativeElement;
+        if (!headerEl)
+            return;
+        const allTabs = this._tabsService.tabs();
+        const widths = allTabs.map((t) => this._tabWidths.get(t.value()) ?? 0);
+        const fittingCount = this._computeFittingCount(widths, headerEl.clientWidth, this._moreButtonWidth || 100, this._tabsService.maxVisibleCount());
+        this._tabsService.maxVisibleCount.set(fittingCount);
+        this._updateIndicator();
+    }
+    /**
+     * @private Pure overflow fit calculation. Returns how many leading tabs fit in
+     * `containerWidth`, or `-1` when every tab fits with no "More" button.
+     *
+     * Hysteresis: a tab that is currently in the overflow region
+     * (`i >= currentMax`) must clear the boundary by an extra
+     * {@link _HYSTERESIS_PX} before it is allowed back into the visible row. A
+     * currently-visible tab leaves as soon as it no longer fits. This asymmetric
+     * threshold means the two states around a boundary width can never both be
+     * satisfied, so the split cannot oscillate between adjacent widths.
+     *
+     * @param widths Natural width of each tab, in DOM order.
+     * @param containerWidth Available header content width.
+     * @param moreButtonWidth Width reserved for the "More (N)" trigger.
+     * @param currentMax The current `maxVisibleCount` (`-1` = all visible).
+     */
+    _computeFittingCount(widths, containerWidth, moreButtonWidth, currentMax) {
+        const total = widths.reduce((sum, w) => sum + w, 0);
+        // Everything fits without needing a "More" button.
+        if (total <= containerWidth)
+            return -1;
+        let accumulated = 0;
+        let count = 0;
+        for (let i = 0; i < widths.length; i++) {
+            const wasOverflowed = currentMax >= 0 && i >= currentMax;
+            const margin = wasOverflowed ? MlvTabGroup._HYSTERESIS_PX : 0;
+            if (accumulated + widths[i] + moreButtonWidth + margin <=
+                containerWidth) {
+                accumulated += widths[i];
+                count++;
+            }
+            else {
+                break;
+            }
+        }
+        return count;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: MlvTabGroup, isStandalone: true, selector: "mlv-tab-group", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { orientation: "orientationChange", activeTab: "activeTabChange" }, host: { properties: { "class.mlv-tab-group--horizontal": "orientation() === \"horizontal\"", "class.mlv-tab-group--vertical": "orientation() === \"vertical\"", "class.mlv-tab-group--appearance-boxed": "appearance() === 'boxed'" }, classAttribute: "mlv-tab-group" }, providers: [
+            MlvTabsService,
+            { provide: MLV_DENSITY_ELEMENT, useValue: 'tab-group' },
+            {
+                provide: TAB_GROUP,
+                useExisting: MlvTabGroup,
+            },
+        ], viewQueries: [{ propertyName: "tabListRef", first: true, predicate: ["tabListRef"], descendants: true, isSignal: true }, { propertyName: "indicatorRef", first: true, predicate: ["indicatorRef"], descendants: true, isSignal: true }, { propertyName: "morePopupRef", first: true, predicate: ["morePopup"], descendants: true, isSignal: true }, { propertyName: "tabItems", predicate: MlvTabItem, descendants: true, isSignal: true }, { propertyName: "_moreTriggerRef", first: true, predicate: ["moreTrigger"], descendants: true, isSignal: true }, { propertyName: "_overflowItemRefs", predicate: ["overflowItem"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1.Tabs }, { directive: i2.MlvDensityDirective, inputs: ["mlvDensity", "mlvDensity"] }], ngImport: i0, template: "<div\n  class=\"mlv-tab-group__header\"\n  ngTabList\n  [orientation]=\"orientation()\"\n  [wrap]=\"false\"\n  [softDisabled]=\"false\"\n  selectionMode=\"follow\"\n  [selectedTab]=\"selectedTab()\"\n  (selectedTabChange)=\"_onSelectedTabChange($event)\"\n  #tabListRef\n>\n  @for (tab of visibleTabs(); track tab.value(); let i = $index) {\n  <mlv-tab-item\n    ngTab\n    [value]=\"tab.value()\"\n    [active]=\"isActive(tab.value())\"\n    [disabled]=\"tab.disabled()\"\n    (activate)=\"selectTab(tab.value())\"\n  >\n    @if (tab.defTemplate(); as def) {\n    <!--\n      The label is rendered directly inside the roving `role=\"tab\"`\n      (<mlv-tab-item>, ngTab). Routed tabs do NOT wrap it in an <a href>: an\n      anchor is inherently interactive, and nesting it inside `role=\"tab\"` fails\n      the axe `nested-interactive` rule (a11y is a hard requirement). Navigation\n      is driven by the tab-item's `activate` output \u2192 selectTab() \u2192\n      router.navigateByUrl() for both click and keyboard, and the URL is fully\n      deep-linkable; the only thing lost versus a nested anchor is native\n      middle-click / open-in-new-tab, an accepted trade-off.\n    -->\n    <ng-template\n      [ngTemplateOutlet]=\"def.templateRef\"\n      [ngTemplateOutletContext]=\"{ $implicit: false }\"\n    />\n    }\n  </mlv-tab-item>\n  } @if (overflowTabs().length > 0) {\n  <button\n    type=\"button\"\n    #moreTrigger\n    class=\"mlv-tab-group__more-trigger\"\n    [mlvPopupTrigger]=\"morePopup\"\n    triggerOn=\"click\"\n    [ariaHasPopup]=\"'menu'\"\n    [attr.aria-expanded]=\"morePopupRef()?.opened() ?? false\"\n    [attr.aria-label]=\"_i18n().moreTabs\"\n  >\n    More ({{ overflowTabs().length }})\n  </button>\n  <mlv-popup\n    #morePopup\n    [hasShadow]=\"true\"\n    (afterOpened)=\"onMorePopupAfterOpened()\"\n    (afterClosed)=\"onMorePopupAfterClosed()\"\n  >\n    <ng-template mlvPopupContent>\n      <div tabindex=\"-1\" (keydown)=\"onOverflowKeydown($event)\">\n        <mlv-list listRole=\"menu\">\n          @for (tab of overflowTabs(); track tab.value(); let i = $index) {\n          <mlv-list-item\n            #overflowItem\n            itemRole=\"menuitemradio\"\n            [class.mlv-list-item--active]=\"isActive(tab.value())\"\n            [attr.tabindex]=\"overflowFocusedIndex() === i ? 0 : -1\"\n            [attr.data-overflow-item-index]=\"i\"\n            [attr.aria-disabled]=\"tab.disabled() || null\"\n            [attr.aria-checked]=\"isActive(tab.value())\"\n            (click)=\"selectOverflowTab(tab.value())\"\n            (keydown.enter)=\"selectOverflowTab(tab.value()); $event.stopPropagation()\"\n            (keydown.space)=\"selectOverflowTab(tab.value()); $event.stopPropagation(); $event.preventDefault()\"\n          >\n            @if (tab.defTemplate(); as def) {\n            <ng-template\n              [ngTemplateOutlet]=\"def.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: true }\"\n            />\n            }\n          </mlv-list-item>\n          }\n        </mlv-list>\n      </div>\n    </ng-template>\n  </mlv-popup>\n  }\n\n  <div class=\"mlv-tab-group__indicator\" #indicatorRef></div>\n</div>\n\n<div class=\"mlv-tab-group__body\">\n  @if (activeContentTemplate(); as tmpl) {\n  <mlv-tab-content ngTabPanel [value]=\"activeTab()\">\n    <ng-template ngTabContent>\n      <ng-container [ngTemplateOutlet]=\"tmpl\" />\n    </ng-template>\n  </mlv-tab-content>\n  }\n  <!--\n    Inert stub panels for the visible-but-inactive tabs. Every `ngTab` must\n    resolve to a corresponding `ngTabPanel` (aria wires `aria-controls` and\n    validates the pairing). The active tab renders the real `mlv-tab-content`\n    above; the remaining visible tabs get an empty, `ngTabContent`-carrying\n    panel so their `aria-controls` resolves without rendering duplicate content.\n  -->\n  @for (tab of visibleTabs(); track tab.value()) { @if (!isActive(tab.value()))\n  {\n  <div class=\"mlv-tab-group__panel-stub\" ngTabPanel [value]=\"tab.value()\">\n    <ng-template ngTabContent></ng-template>\n  </div>\n  } }\n</div>\n", styles: [".mlv-tab-group{display:flex;flex-direction:column;min-width:0}.mlv-tab-group--vertical{flex-direction:row}.mlv-tab-group__header{display:flex;position:relative;overflow:hidden;min-width:0}.mlv-tab-group--horizontal .mlv-tab-group__header{flex-direction:row;align-items:stretch;box-shadow:inset 0 -.0625rem 0 var(--mlv-border-subtle)}.mlv-tab-group--vertical .mlv-tab-group__header{flex-direction:column;align-items:stretch;box-shadow:inset -.0625rem 0 0 var(--mlv-border-subtle)}.mlv-tab-group__indicator{position:absolute;background:var(--mlv-background-accent-1);transition:left var(--mlv-tab-indicator-duration, .22s) var(--mlv-ease-in-out-strong),top var(--mlv-tab-indicator-duration, .22s) var(--mlv-ease-in-out-strong),width var(--mlv-tab-indicator-duration, .22s) var(--mlv-ease-in-out-strong),height var(--mlv-tab-indicator-duration, .22s) var(--mlv-ease-in-out-strong)}.mlv-tab-group--horizontal .mlv-tab-group__indicator{bottom:0;height:.125rem;left:var(--mlv-tab-indicator-left, 0);width:var(--mlv-tab-indicator-width, 0)}.mlv-tab-group--vertical .mlv-tab-group__indicator{right:0;width:.125rem;--mlv-tab-indicator-left: auto;top:var(--mlv-tab-indicator-top, 0);height:var(--mlv-tab-indicator-height, 0)}.mlv-tab-group__more-trigger{display:inline-flex;align-items:center;gap:.25rem;padding:.75rem 1rem;cursor:pointer;border:none;background:none;color:var(--mlv-palette-neutral-400);white-space:nowrap;position:relative;transition:color var(--mlv-duration-normal)}.mlv-tab-group__more-trigger:focus-visible{outline:.125rem solid var(--mlv-border-focus);outline-offset:-.125rem;border-radius:var(--mlv-radius-s)}.mlv-tab-group__body{flex:1;min-width:0;min-height:0}.mlv-tab-group__panel-stub{display:none}.mlv-tab-group:not(.mlv-tab-group--appearance-boxed)>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled):after,.mlv-tab-group:not(.mlv-tab-group--appearance-boxed)>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover:after{content:\"\";position:absolute;background:var(--mlv-border-normal)}.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--horizontal>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled):after,.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--horizontal>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover:after{left:0;right:0;bottom:0;height:.125rem}.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--vertical>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled):after,.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--vertical>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover:after{top:0;bottom:0;right:0;width:.125rem}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header{box-shadow:none;width:fit-content;max-width:100%;background:var(--mlv-background-sunken);border-radius:var(--mlv-radius-xl);padding:.1875rem;gap:.125rem}.mlv-tab-group--appearance-boxed.mlv-tab-group--vertical>.mlv-tab-group__header{height:fit-content}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__indicator{background:var(--mlv-background-raised);border-radius:calc(var(--mlv-radius-xl) - .1875rem);box-shadow:var(--mlv-shadow-1);z-index:0}.mlv-tab-group--appearance-boxed.mlv-tab-group--horizontal>.mlv-tab-group__header>.mlv-tab-group__indicator{top:.1875rem;bottom:.1875rem;height:auto}.mlv-tab-group--appearance-boxed.mlv-tab-group--vertical>.mlv-tab-group__header>.mlv-tab-group__indicator{left:.1875rem;right:.1875rem;width:auto}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-item{position:relative;z-index:1;border-radius:calc(var(--mlv-radius-xl) - .1875rem)}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled){background:var(--mlv-background-neutral-1-hover)}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-item.mlv-tab-item--active{color:var(--mlv-text-primary)}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__more-trigger{position:relative;z-index:1;border-radius:calc(var(--mlv-radius-xl) - .1875rem)}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover{background:var(--mlv-background-neutral-1-hover)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: TabList, selector: "[ngTabList]", inputs: ["orientation", "wrap", "softDisabled", "focusMode", "selectionMode", "selectedTab", "disabled"], outputs: ["selectedTabChange"], exportAs: ["ngTabList"] }, { kind: "directive", type: Tab, selector: "[ngTab]", inputs: ["id", "disabled", "value"], exportAs: ["ngTab"] }, { kind: "directive", type: TabPanel, selector: "[ngTabPanel]", inputs: ["id", "value"], exportAs: ["ngTabPanel"] }, { kind: "directive", type: TabContent, selector: "ng-template[ngTabContent]", exportAs: ["ngTabContent"] }, { kind: "component", type: MlvTabItem, selector: "mlv-tab-item", inputs: ["active", "disabled"], outputs: ["activate"] }, { kind: "component", type: MlvTabContent, selector: "mlv-tab-content" }, { 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: MlvList, selector: "mlv-list", inputs: ["listRole", "variant"] }, { kind: "component", type: MlvListItem, selector: "mlv-list-item", inputs: ["itemRole", "unread", "accent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: MlvTabGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'mlv-tab-group', imports: [
+                        NgTemplateOutlet,
+                        TabList,
+                        Tab,
+                        TabPanel,
+                        TabContent,
+                        MlvTabItem,
+                        MlvTabContent,
+                        MlvPopup,
+                        MlvPopupContent,
+                        MlvPopupTrigger,
+                        MlvList,
+                        MlvListItem,
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        Tabs,
+                        { directive: MlvDensityDirective, inputs: ['mlvDensity: mlvDensity'] },
+                    ], providers: [
+                        MlvTabsService,
+                        { provide: MLV_DENSITY_ELEMENT, useValue: 'tab-group' },
+                        {
+                            provide: TAB_GROUP,
+                            useExisting: MlvTabGroup,
+                        },
+                    ], host: {
+                        class: 'mlv-tab-group',
+                        '[class.mlv-tab-group--horizontal]': 'orientation() === "horizontal"',
+                        '[class.mlv-tab-group--vertical]': 'orientation() === "vertical"',
+                        '[class.mlv-tab-group--appearance-boxed]': "appearance() === 'boxed'",
+                    }, template: "<div\n  class=\"mlv-tab-group__header\"\n  ngTabList\n  [orientation]=\"orientation()\"\n  [wrap]=\"false\"\n  [softDisabled]=\"false\"\n  selectionMode=\"follow\"\n  [selectedTab]=\"selectedTab()\"\n  (selectedTabChange)=\"_onSelectedTabChange($event)\"\n  #tabListRef\n>\n  @for (tab of visibleTabs(); track tab.value(); let i = $index) {\n  <mlv-tab-item\n    ngTab\n    [value]=\"tab.value()\"\n    [active]=\"isActive(tab.value())\"\n    [disabled]=\"tab.disabled()\"\n    (activate)=\"selectTab(tab.value())\"\n  >\n    @if (tab.defTemplate(); as def) {\n    <!--\n      The label is rendered directly inside the roving `role=\"tab\"`\n      (<mlv-tab-item>, ngTab). Routed tabs do NOT wrap it in an <a href>: an\n      anchor is inherently interactive, and nesting it inside `role=\"tab\"` fails\n      the axe `nested-interactive` rule (a11y is a hard requirement). Navigation\n      is driven by the tab-item's `activate` output \u2192 selectTab() \u2192\n      router.navigateByUrl() for both click and keyboard, and the URL is fully\n      deep-linkable; the only thing lost versus a nested anchor is native\n      middle-click / open-in-new-tab, an accepted trade-off.\n    -->\n    <ng-template\n      [ngTemplateOutlet]=\"def.templateRef\"\n      [ngTemplateOutletContext]=\"{ $implicit: false }\"\n    />\n    }\n  </mlv-tab-item>\n  } @if (overflowTabs().length > 0) {\n  <button\n    type=\"button\"\n    #moreTrigger\n    class=\"mlv-tab-group__more-trigger\"\n    [mlvPopupTrigger]=\"morePopup\"\n    triggerOn=\"click\"\n    [ariaHasPopup]=\"'menu'\"\n    [attr.aria-expanded]=\"morePopupRef()?.opened() ?? false\"\n    [attr.aria-label]=\"_i18n().moreTabs\"\n  >\n    More ({{ overflowTabs().length }})\n  </button>\n  <mlv-popup\n    #morePopup\n    [hasShadow]=\"true\"\n    (afterOpened)=\"onMorePopupAfterOpened()\"\n    (afterClosed)=\"onMorePopupAfterClosed()\"\n  >\n    <ng-template mlvPopupContent>\n      <div tabindex=\"-1\" (keydown)=\"onOverflowKeydown($event)\">\n        <mlv-list listRole=\"menu\">\n          @for (tab of overflowTabs(); track tab.value(); let i = $index) {\n          <mlv-list-item\n            #overflowItem\n            itemRole=\"menuitemradio\"\n            [class.mlv-list-item--active]=\"isActive(tab.value())\"\n            [attr.tabindex]=\"overflowFocusedIndex() === i ? 0 : -1\"\n            [attr.data-overflow-item-index]=\"i\"\n            [attr.aria-disabled]=\"tab.disabled() || null\"\n            [attr.aria-checked]=\"isActive(tab.value())\"\n            (click)=\"selectOverflowTab(tab.value())\"\n            (keydown.enter)=\"selectOverflowTab(tab.value()); $event.stopPropagation()\"\n            (keydown.space)=\"selectOverflowTab(tab.value()); $event.stopPropagation(); $event.preventDefault()\"\n          >\n            @if (tab.defTemplate(); as def) {\n            <ng-template\n              [ngTemplateOutlet]=\"def.templateRef\"\n              [ngTemplateOutletContext]=\"{ $implicit: true }\"\n            />\n            }\n          </mlv-list-item>\n          }\n        </mlv-list>\n      </div>\n    </ng-template>\n  </mlv-popup>\n  }\n\n  <div class=\"mlv-tab-group__indicator\" #indicatorRef></div>\n</div>\n\n<div class=\"mlv-tab-group__body\">\n  @if (activeContentTemplate(); as tmpl) {\n  <mlv-tab-content ngTabPanel [value]=\"activeTab()\">\n    <ng-template ngTabContent>\n      <ng-container [ngTemplateOutlet]=\"tmpl\" />\n    </ng-template>\n  </mlv-tab-content>\n  }\n  <!--\n    Inert stub panels for the visible-but-inactive tabs. Every `ngTab` must\n    resolve to a corresponding `ngTabPanel` (aria wires `aria-controls` and\n    validates the pairing). The active tab renders the real `mlv-tab-content`\n    above; the remaining visible tabs get an empty, `ngTabContent`-carrying\n    panel so their `aria-controls` resolves without rendering duplicate content.\n  -->\n  @for (tab of visibleTabs(); track tab.value()) { @if (!isActive(tab.value()))\n  {\n  <div class=\"mlv-tab-group__panel-stub\" ngTabPanel [value]=\"tab.value()\">\n    <ng-template ngTabContent></ng-template>\n  </div>\n  } }\n</div>\n", styles: [".mlv-tab-group{display:flex;flex-direction:column;min-width:0}.mlv-tab-group--vertical{flex-direction:row}.mlv-tab-group__header{display:flex;position:relative;overflow:hidden;min-width:0}.mlv-tab-group--horizontal .mlv-tab-group__header{flex-direction:row;align-items:stretch;box-shadow:inset 0 -.0625rem 0 var(--mlv-border-subtle)}.mlv-tab-group--vertical .mlv-tab-group__header{flex-direction:column;align-items:stretch;box-shadow:inset -.0625rem 0 0 var(--mlv-border-subtle)}.mlv-tab-group__indicator{position:absolute;background:var(--mlv-background-accent-1);transition:left var(--mlv-tab-indicator-duration, .22s) var(--mlv-ease-in-out-strong),top var(--mlv-tab-indicator-duration, .22s) var(--mlv-ease-in-out-strong),width var(--mlv-tab-indicator-duration, .22s) var(--mlv-ease-in-out-strong),height var(--mlv-tab-indicator-duration, .22s) var(--mlv-ease-in-out-strong)}.mlv-tab-group--horizontal .mlv-tab-group__indicator{bottom:0;height:.125rem;left:var(--mlv-tab-indicator-left, 0);width:var(--mlv-tab-indicator-width, 0)}.mlv-tab-group--vertical .mlv-tab-group__indicator{right:0;width:.125rem;--mlv-tab-indicator-left: auto;top:var(--mlv-tab-indicator-top, 0);height:var(--mlv-tab-indicator-height, 0)}.mlv-tab-group__more-trigger{display:inline-flex;align-items:center;gap:.25rem;padding:.75rem 1rem;cursor:pointer;border:none;background:none;color:var(--mlv-palette-neutral-400);white-space:nowrap;position:relative;transition:color var(--mlv-duration-normal)}.mlv-tab-group__more-trigger:focus-visible{outline:.125rem solid var(--mlv-border-focus);outline-offset:-.125rem;border-radius:var(--mlv-radius-s)}.mlv-tab-group__body{flex:1;min-width:0;min-height:0}.mlv-tab-group__panel-stub{display:none}.mlv-tab-group:not(.mlv-tab-group--appearance-boxed)>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled):after,.mlv-tab-group:not(.mlv-tab-group--appearance-boxed)>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover:after{content:\"\";position:absolute;background:var(--mlv-border-normal)}.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--horizontal>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled):after,.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--horizontal>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover:after{left:0;right:0;bottom:0;height:.125rem}.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--vertical>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled):after,.mlv-tab-group:not(.mlv-tab-group--appearance-boxed).mlv-tab-group--vertical>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover:after{top:0;bottom:0;right:0;width:.125rem}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header{box-shadow:none;width:fit-content;max-width:100%;background:var(--mlv-background-sunken);border-radius:var(--mlv-radius-xl);padding:.1875rem;gap:.125rem}.mlv-tab-group--appearance-boxed.mlv-tab-group--vertical>.mlv-tab-group__header{height:fit-content}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__indicator{background:var(--mlv-background-raised);border-radius:calc(var(--mlv-radius-xl) - .1875rem);box-shadow:var(--mlv-shadow-1);z-index:0}.mlv-tab-group--appearance-boxed.mlv-tab-group--horizontal>.mlv-tab-group__header>.mlv-tab-group__indicator{top:.1875rem;bottom:.1875rem;height:auto}.mlv-tab-group--appearance-boxed.mlv-tab-group--vertical>.mlv-tab-group__header>.mlv-tab-group__indicator{left:.1875rem;right:.1875rem;width:auto}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-item{position:relative;z-index:1;border-radius:calc(var(--mlv-radius-xl) - .1875rem)}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-item:hover:not(.mlv-tab-item--active):not(.mlv-tab-item--disabled){background:var(--mlv-background-neutral-1-hover)}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-item.mlv-tab-item--active{color:var(--mlv-text-primary)}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__more-trigger{position:relative;z-index:1;border-radius:calc(var(--mlv-radius-xl) - .1875rem)}.mlv-tab-group--appearance-boxed>.mlv-tab-group__header>.mlv-tab-group__more-trigger:hover{background:var(--mlv-background-neutral-1-hover)}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }, { type: i0.Output, args: ["orientationChange"] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], tabListRef: [{ type: i0.ViewChild, args: ['tabListRef', { isSignal: true }] }], indicatorRef: [{ type: i0.ViewChild, args: ['indicatorRef', { isSignal: true }] }], morePopupRef: [{ type: i0.ViewChild, args: ['morePopup', { isSignal: true }] }], tabItems: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => MlvTabItem), { isSignal: true }] }], _moreTriggerRef: [{ type: i0.ViewChild, args: ['moreTrigger', { isSignal: true }] }], _overflowItemRefs: [{ type: i0.ViewChildren, args: ['overflowItem', { ...{
+                            read: ElementRef,
+                        }, isSignal: true }] }] } });
+//# sourceMappingURL=tabs.js.map