@malva-ui/core 0.1.13 → 0.1.14

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

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