@shival99/z-ui 2.6.8 → 2.6.9

package/fesm2022/shival99-z-ui-components-z-tabs.mjs

@@ -0,0 +1,1102 @@
+import { NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { input, inject, TemplateRef, Directive, contentChildren, viewChild, viewChildren, ViewContainerRef, model, output, signal, computed, NgZone, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
+import { ZHoverGlideDirective } from '@shival99/z-ui/components/z-hover-glide';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+import { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';
+import { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';
+import { ZCacheService } from '@shival99/z-ui/services';
+import { zMergeClasses } from '@shival99/z-ui/utils';
+import { NgScrollbar } from 'ngx-scrollbar';
+import { cva } from 'class-variance-authority';
+
+class ZTabPanelDirective {
+    zTabPanel = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zTabPanel" }] : /* istanbul ignore next */ []));
+    template = inject((TemplateRef));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZTabPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.6", type: ZTabPanelDirective, isStandalone: true, selector: "[z-tab-panel], [zTabPanel]", inputs: { zTabPanel: { classPropertyName: "zTabPanel", publicName: "zTabPanel", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["zTabPanel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZTabPanelDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[z-tab-panel], [zTabPanel]',
+                    standalone: true,
+                    exportAs: 'zTabPanel',
+                }]
+        }], propDecorators: { zTabPanel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabPanel", required: true }] }] } });
+
+/** Minimum scroll-position delta (px) before the fade/scroll-button state is toggled. */
+const Z_TABS_SCROLL_TOLERANCE = 4;
+/**
+ * Types that render a shared pill behind the active tab and glide it into place instead of
+ * swapping each item's own background. These predate the vertical glide, so they keep their
+ * static per-item active background when laid out vertically.
+ */
+const Z_TABS_GLIDE_TYPES = ['segment', 'segment-solid', 'pill-solid', 'pill-blur', 'pill-float'];
+/** Glide types whose indicator is measured and animated in either orientation. */
+const Z_TABS_OMNI_GLIDE_TYPES = ['pill-primary', 'underline-hover', 'bar'];
+/**
+ * Types that glide the shared indicator only when laid out vertically. `assistant` collapses its
+ * labels horizontally, so there the active tab is resizing and the surface has to live on the tab
+ * itself; a vertical rail keeps every label at a fixed width, which removes that constraint and lets
+ * the indicator simply slide between rows.
+ */
+const Z_TABS_VERTICAL_GLIDE_TYPES = ['assistant'];
+/**
+ * Types that collapse an inactive tab down to its icon and expand the active one to icon + label,
+ * which only applies to a horizontal strip. These paint the active surface on the tab itself rather
+ * than on a shared indicator, so the surface grows with the label instead of chasing a box whose
+ * width is still animating.
+ */
+const Z_TABS_COLLAPSING_LABEL_TYPES = ['assistant'];
+/** Types that also glide a muted highlight behind the hovered tab. */
+const Z_TABS_HOVER_GLIDE_TYPES = ['underline-hover'];
+
+/** Hands out a fresh, monotonically increasing id for scoping each `z-tabs` instance's cache key. */
+const zTabsInstanceIds = (() => {
+    let counter = 0;
+    return { next: () => ++counter };
+})();
+/**
+ * Counter-scales the indicator's corner radius across the glide so a box that is being scaled still
+ * renders the radius its design calls for, instead of stretched oval caps.
+ */
+function zTabsRadiusKeyframes(radius, scaleX, scaleY) {
+    const steps = 16;
+    return Array.from({ length: steps }, (_, index) => {
+        const progress = index / (steps - 1);
+        const x = scaleX + (1 - scaleX) * progress;
+        const y = scaleY + (1 - scaleY) * progress;
+        return { borderRadius: `${radius / x}px / ${radius / y}px` };
+    });
+}
+/** Queues low-priority work on idle time, falling back to a timer where `requestIdleCallback` is missing. */
+function zTabsRequestIdle(task, timeout = 200) {
+    if (typeof window === 'undefined') {
+        return 0;
+    }
+    const idle = window.requestIdleCallback;
+    return idle ? idle(() => task(), { timeout }) : window.setTimeout(task, 0);
+}
+/** Cancels a handle returned by `zTabsRequestIdle`, regardless of which scheduler produced it. */
+function zTabsCancelIdle(handle) {
+    if (!handle || typeof window === 'undefined') {
+        return;
+    }
+    const cancel = window.cancelIdleCallback;
+    if (cancel) {
+        cancel(handle);
+        return;
+    }
+    window.clearTimeout(handle);
+}
+function zTabsMeasure(button) {
+    const container = button.offsetParent ?? button.parentElement;
+    if (!container) {
+        return { x: button.offsetLeft, y: button.offsetTop, w: button.offsetWidth, h: button.offsetHeight };
+    }
+    const buttonRect = button.getBoundingClientRect();
+    const containerRect = container.getBoundingClientRect();
+    return {
+        x: buttonRect.left - containerRect.left,
+        y: buttonRect.top - containerRect.top,
+        w: buttonRect.width,
+        h: buttonRect.height,
+    };
+}
+function zTabsBoxEquals(a, b) {
+    if (!a) {
+        return false;
+    }
+    return a.x === b.x && a.y === b.y && a.w === b.w && a.h === b.h;
+}
+/**
+ * Keyframes for the entering panel, per `zContentAnimation`. `slide` and `blur` travel along the tab
+ * strip's own axis so the content appears to come from the tab that was clicked; `direction` is 1 when
+ * moving further down the list and -1 when moving back.
+ *
+ * Only `blur` animates a filter — it repaints the panel each frame, which is why the distance and
+ * duration are kept small.
+ */
+function zTabsContentKeyframes(animation, direction, vertical) {
+    const offset = 16 * (direction >= 0 ? 1 : -1);
+    const from = vertical ? `translateY(${offset}px)` : `translateX(${offset}px)`;
+    if (animation === 'slide') {
+        return {
+            keyframes: [
+                { opacity: 0, transform: from },
+                { opacity: 1, transform: 'none' },
+            ],
+            options: { duration: 260, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', fill: 'both' },
+        };
+    }
+    if (animation === 'blur') {
+        return {
+            keyframes: [
+                { opacity: 0, filter: 'blur(0.25rem)', transform: from },
+                { opacity: 1, filter: 'none', transform: 'none' },
+            ],
+            options: { duration: 240, easing: 'ease-out', fill: 'both' },
+        };
+    }
+    if (animation === 'scale') {
+        return {
+            keyframes: [
+                { opacity: 0, transform: 'scale(0.97)' },
+                { opacity: 1, transform: 'none' },
+            ],
+            options: { duration: 220, easing: 'cubic-bezier(0.22, 1, 0.36, 1)', fill: 'both' },
+        };
+    }
+    return {
+        keyframes: [{ opacity: 0 }, { opacity: 1 }],
+        options: { duration: 180, easing: 'ease-out', fill: 'both' },
+    };
+}
+
+const zBarePillTabs = 'relative gap-0.5 rounded-full bg-transparent p-0 dark:bg-transparent';
+const zBarePillTabItem = 'z-10 shrink-0 rounded-full border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary-foreground';
+const zTabsVariants = cva('z-tabs flex min-w-0', {
+    variants: {
+        zType: {
+            line: 'gap-0',
+            soft: 'gap-1 bg-background p-0 dark:bg-transparent',
+            segment: 'relative gap-1 rounded-sm bg-muted/60 p-1 dark:bg-muted/35',
+            'segment-solid': 'relative gap-1 rounded-sm bg-muted/60 p-1 dark:bg-muted/35',
+            'pill-solid': 'relative gap-1 rounded-full bg-muted/60 p-1 dark:bg-muted/35',
+            'pill-blur': 'relative gap-1 rounded-full bg-muted/40 p-1 backdrop-blur-md dark:bg-muted/20',
+            'pill-float': zBarePillTabs,
+            'pill-primary': zBarePillTabs,
+            assistant: 'relative w-full gap-1 rounded-(--radius-pill) bg-muted p-1 dark:bg-muted/40',
+            'underline-hover': 'relative gap-0 rounded-none bg-transparent p-0 dark:bg-transparent',
+            bar: 'relative gap-1 rounded-none bg-transparent p-0 dark:bg-transparent',
+            folder: 'isolate gap-0 bg-background p-0 dark:bg-transparent',
+            'folder-soft': 'isolate gap-0 bg-background p-0 dark:bg-transparent',
+            'folder-solid': 'isolate gap-0 bg-background p-0 dark:bg-transparent',
+            underline: 'gap-0',
+            underlined: 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',
+            badge: 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',
+            sharp: 'gap-1 rounded-none bg-background p-0 dark:bg-transparent',
+            'sharp-line': 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',
+            'sharp-line-filled': 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',
+            square: 'gap-0 rounded-none bg-background p-0 dark:bg-transparent',
+            'vertical-sharp': 'gap-1 rounded-none bg-background p-0 dark:bg-transparent',
+            'code-line': 'h-10 w-full justify-start gap-0 rounded-none bg-background p-0 dark:bg-transparent',
+        },
+        zOrientation: {
+            horizontal: 'w-max flex-row items-center',
+            vertical: 'w-full flex-col items-stretch gap-1 border-b-0',
+        },
+    },
+    defaultVariants: {
+        zType: 'line',
+        zOrientation: 'horizontal',
+    },
+    compoundVariants: [
+        {
+            zType: 'assistant',
+            zOrientation: 'vertical',
+            class: 'rounded-sm bg-muted/40 p-1 dark:bg-muted/25',
+        },
+        {
+            zType: 'bar',
+            zOrientation: 'vertical',
+            class: 'gap-2 border-border border-e pe-4',
+        },
+        {
+            zType: 'vertical-sharp',
+            zOrientation: 'vertical',
+            class: 'border-r-0 pr-0',
+        },
+        {
+            zType: 'sharp-line',
+            zOrientation: 'vertical',
+            class: 'gap-0',
+        },
+        {
+            zType: 'sharp-line-filled',
+            zOrientation: 'vertical',
+            class: 'gap-0',
+        },
+    ],
+});
+const zTabItemVariants = cva('z-tab-item relative inline-flex min-h-10 select-none items-center justify-center gap-2 whitespace-nowrap font-medium text-sm leading-none text-muted-foreground transition-[color,background-color,border-color,box-shadow,transform] duration-200 outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 cursor-pointer disabled:opacity-45 disabled:cursor-not-allowed', {
+    variants: {
+        zType: {
+            line: 'rounded-none border-0 hover:text-foreground data-[active=true]:text-primary after:pointer-events-none after:absolute after:inset-x-0 after:bottom-[-1px] after:h-1 after:bg-primary after:origin-center after:scale-x-0 after:transition-transform after:duration-200 data-[active=true]:after:scale-x-100',
+            soft: 'rounded-sm border-0 text-muted-foreground hover:text-foreground data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-xs! dark:data-[active=true]:bg-primary/15',
+            segment: 'z-10 rounded-sm border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary',
+            'segment-solid': 'z-10 rounded-sm border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary-foreground',
+            'pill-solid': 'z-10 rounded-full border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary',
+            'pill-blur': 'z-10 rounded-full border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary',
+            'pill-float': zBarePillTabItem,
+            'pill-primary': zBarePillTabItem,
+            assistant: 'z-10 flex-1 justify-center gap-1.5 rounded-(--radius-pill) border-0 text-muted-foreground hover:text-foreground data-[active=true]:text-primary-foreground',
+            'underline-hover': 'z-10 shrink-0 rounded-none border-0 bg-transparent text-muted-foreground hover:text-foreground data-[active=true]:text-foreground',
+            bar: 'z-10 gap-3 rounded-sm border-0 bg-transparent text-muted-foreground hover:text-foreground data-[active=true]:text-primary',
+            folder: 'rounded-t-sm border-0 bg-transparent text-muted-foreground shadow-[inset_0_-1px_0_var(--border)] hover:text-foreground focus-visible:ring-0 focus-visible:ring-offset-0 data-[active=true]:z-[2] data-[active=true]:bg-background data-[active=true]:text-primary data-[active=true]:shadow-[inset_1px_0_0_var(--border),inset_-1px_0_0_var(--border),inset_0_1px_0_var(--border)]',
+            'folder-soft': 'rounded-t-sm border-0 bg-transparent text-muted-foreground shadow-[inset_0_-1px_0_var(--border)] hover:text-foreground focus-visible:ring-0 focus-visible:ring-offset-0 data-[active=true]:z-[2] data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-[inset_1px_0_0_var(--border),inset_-1px_0_0_var(--border),inset_0_1px_0_var(--border)] dark:data-[active=true]:bg-primary/15',
+            'folder-solid': 'rounded-t-sm border-0 bg-transparent text-muted-foreground shadow-[inset_0_-1px_0_var(--border)] hover:text-foreground focus-visible:ring-0 focus-visible:ring-offset-0 data-[active=true]:z-[2] data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-[inset_1px_0_0_var(--primary),inset_-1px_0_0_var(--primary),inset_0_1px_0_var(--primary)]',
+            underline: 'hover:text-foreground data-[active=true]:text-primary after:pointer-events-none after:absolute after:inset-x-1 after:bottom-[-1px] after:h-[0.1875rem] after:bg-primary after:origin-center after:scale-x-0 after:transition-transform after:duration-200 data-[active=true]:after:scale-x-100',
+            underlined: 'rounded-none border-0 border-b-2 border-b-transparent! bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-b-primary! data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-sm!',
+            badge: 'rounded-none border-0 border-b-2 border-b-transparent! bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-b-primary! data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-none',
+            sharp: 'rounded-none border border-border/45 border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary! data-[active=true]:border-b-primary! data-[active=true]:text-primary',
+            'sharp-line': 'rounded-none first:rounded-l-sm last:rounded-r-sm border border-border/45 border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary! data-[active=true]:border-b-primary! data-[active=true]:text-primary',
+            'sharp-line-filled': 'rounded-none first:rounded-l-sm last:rounded-r-sm border border-border/45 border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary! data-[active=true]:border-b-primary! data-[active=true]:bg-primary/30 data-[active=true]:text-primary',
+            square: 'rounded-none border border-border/45 border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary! data-[active=true]:border-b-primary! data-[active=true]:bg-primary/15 data-[active=true]:text-primary',
+            'vertical-sharp': 'rounded-none border border-transparent border-b-[3px] bg-background text-foreground/60 hover:text-foreground data-[active=true]:border-primary data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:shadow-none',
+            'code-line': 'relative inline-flex h-full min-h-8 flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-none first:rounded-l-sm last:rounded-r-sm border border-border/45 border-b-2 bg-background px-4 py-1.5 font-medium text-foreground/60 transition-all hover:text-foreground data-[active=true]:relative data-[active=true]:z-[1] data-[active=true]:-mb-px data-[active=true]:border-x-primary/70! data-[active=true]:border-t-primary/70! data-[active=true]:border-b-primary! data-[active=true]:bg-primary/30 data-[active=true]:text-primary data-[active=true]:shadow-none [&_span.z-tab-item-label]:font-mono [&_span.z-tab-item-label]:text-[13px]',
+        },
+        zSize: {
+            xs: 'min-h-8 px-2.5 py-1 text-xs',
+            sm: 'min-h-9 px-3 py-1.5 text-sm',
+            default: 'min-h-10 px-4 py-2 text-sm',
+            lg: 'min-h-[2.625rem] px-4.5 py-2.25 text-sm',
+        },
+        zOrientation: {
+            horizontal: '',
+            vertical: 'justify-start px-3 py-2',
+        },
+    },
+    compoundVariants: [
+        {
+            zType: 'line',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'soft',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-sm data-[active=true]:bg-primary/10 data-[active=true]:shadow-xs dark:data-[active=true]:bg-primary/15',
+        },
+        {
+            zType: 'segment',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-sm data-[active=true]:bg-background data-[active=true]:shadow-xs dark:data-[active=true]:border-border!',
+        },
+        {
+            zType: 'segment-solid',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-sm data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'pill-solid',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-full data-[active=true]:bg-background data-[active=true]:shadow-sm dark:data-[active=true]:border-border!',
+        },
+        {
+            zType: 'pill-blur',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-full backdrop-blur-md data-[active=true]:bg-background/70 data-[active=true]:shadow-sm',
+        },
+        {
+            zType: 'pill-float',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-full data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-sm',
+        },
+        {
+            zType: 'pill-primary',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-full',
+        },
+        {
+            zType: 'assistant',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-sm',
+        },
+        {
+            zType: 'underline-hover',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-none px-4 py-2.5',
+        },
+        {
+            zType: 'bar',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-sm px-4 py-2.5',
+        },
+        {
+            zType: 'folder',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'folder-soft',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'folder-solid',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'underline',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-sm data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'underlined',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'badge',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'sharp',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'sharp-line',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'sharp-line-filled',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'square',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-none data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'vertical-sharp',
+            zOrientation: 'vertical',
+            class: 'w-full justify-start rounded-none border border-transparent border-b-[3px] px-3 py-1.5 data-[active=true]:border-primary data-[active=true]:shadow-xs',
+        },
+        {
+            zType: 'code-line',
+            zSize: 'xs',
+            zOrientation: 'horizontal',
+            class: 'min-h-7 px-3 py-1 text-xs [&_span.z-tab-item-label]:text-xs',
+        },
+        {
+            zType: 'code-line',
+            zSize: 'sm',
+            zOrientation: 'horizontal',
+            class: 'min-h-8 px-3.5 py-1.5 text-sm',
+        },
+        {
+            zType: 'code-line',
+            zSize: 'default',
+            zOrientation: 'horizontal',
+            class: 'min-h-8 px-4 py-1.5 text-sm',
+        },
+        {
+            zType: 'code-line',
+            zSize: 'lg',
+            zOrientation: 'horizontal',
+            class: 'min-h-9 px-4.5 py-2 text-sm',
+        },
+        {
+            zType: 'code-line',
+            zOrientation: 'vertical',
+            class: 'h-auto w-full flex-none justify-start rounded-none px-3 py-2 data-[active=true]:shadow-xs',
+        },
+    ],
+    defaultVariants: {
+        zType: 'line',
+        zSize: 'default',
+        zOrientation: 'horizontal',
+    },
+});
+
+class ZTabsComponent {
+    tabPanels = contentChildren(ZTabPanelDirective, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabPanels" }] : /* istanbul ignore next */ []));
+    tabsListContainer = viewChild('tabsListContainer', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabsListContainer" }] : /* istanbul ignore next */ []));
+    tabButtons = viewChildren('tabButton', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabButtons" }] : /* istanbul ignore next */ []));
+    glideIndicator = viewChild('glideIndicator', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "glideIndicator" }] : /* istanbul ignore next */ []));
+    hoverIndicator = viewChild('hoverIndicator', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoverIndicator" }] : /* istanbul ignore next */ []));
+    tabsList = viewChild('tabsList', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabsList" }] : /* istanbul ignore next */ []));
+    panelsHost = viewChild('panelsHost', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "panelsHost" }] : /* istanbul ignore next */ []));
+    panelHost = viewChild('panelHost', { ...(ngDevMode ? { debugName: "panelHost" } : /* istanbul ignore next */ {}), read: ViewContainerRef });
+    class = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []));
+    zTabs = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zTabs" }] : /* istanbul ignore next */ []));
+    zType = input('line', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zType" }] : /* istanbul ignore next */ []));
+    zSize = input('default', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zSize" }] : /* istanbul ignore next */ []));
+    zOrientation = input('horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zOrientation" }] : /* istanbul ignore next */ []));
+    zContentFit = input('none', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zContentFit" }] : /* istanbul ignore next */ []));
+    zContentAnimation = input('fade', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zContentAnimation" }] : /* istanbul ignore next */ []));
+    zLazy = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zLazy" }] : /* istanbul ignore next */ []));
+    zTabsOnly = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zTabsOnly" }] : /* istanbul ignore next */ []));
+    zShowNavWrapper = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zShowNavWrapper" }] : /* istanbul ignore next */ []));
+    zNavFullWidth = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zNavFullWidth" }] : /* istanbul ignore next */ []));
+    zClassContent = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zClassContent" }] : /* istanbul ignore next */ []));
+    zShowContentWrapper = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zShowContentWrapper" }] : /* istanbul ignore next */ []));
+    zReloadable = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zReloadable" }] : /* istanbul ignore next */ []));
+    zEmitOnActiveClick = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zEmitOnActiveClick" }] : /* istanbul ignore next */ []));
+    zCache = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zCache" }] : /* istanbul ignore next */ []));
+    zCacheKey = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zCacheKey" }] : /* istanbul ignore next */ []));
+    zWithDropdown = input('150px', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "zWithDropdown" }] : /* istanbul ignore next */ []));
+    activeTab = model('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+    zTabChange = output();
+    renderedTab = signal('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "renderedTab" }] : /* istanbul ignore next */ []));
+    canScrollLeft = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canScrollLeft" }] : /* istanbul ignore next */ []));
+    canScrollRight = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canScrollRight" }] : /* istanbul ignore next */ []));
+    bouncingTab = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bouncingTab" }] : /* istanbul ignore next */ []));
+    hoveredTab = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hoveredTab" }] : /* istanbul ignore next */ []));
+    isGlideType = computed(() => {
+        const type = this.zType();
+        if (Z_TABS_OMNI_GLIDE_TYPES.includes(type)) {
+            return true;
+        }
+        if (Z_TABS_VERTICAL_GLIDE_TYPES.includes(type)) {
+            return this.zOrientation() === 'vertical';
+        }
+        return Z_TABS_GLIDE_TYPES.includes(type) && this.zOrientation() === 'horizontal';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isGlideType" }] : /* istanbul ignore next */ []));
+    isHoverGlideType = computed(() => Z_TABS_HOVER_GLIDE_TYPES.includes(this.zType()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isHoverGlideType" }] : /* istanbul ignore next */ []));
+    _hasCollapsingLabel = computed(() => Z_TABS_COLLAPSING_LABEL_TYPES.includes(this.zType()) && this.zOrientation() === 'horizontal', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_hasCollapsingLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * A vertical rail truncates long labels, so it gets a tooltip. `assistant` never does: it collapses
+     * inactive labels by design, and a tooltip on every icon turns browsing the strip into a popup storm.
+     */
+    showsTabTooltip = computed(() => this.zOrientation() === 'vertical' && this.zType() !== 'assistant', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showsTabTooltip" }] : /* istanbul ignore next */ []));
+    _resizeObserver;
+    _scrollFrame;
+    _zone = inject(NgZone);
+    _mountedPanel = '';
+    _panelView;
+    _retiredViews = [];
+    _teardownHandle;
+    _glideBox;
+    _hoverBox;
+    _glidePending = false;
+    _glideAnimations = [];
+    _contentAnimation;
+    _lastActiveIndex = -1;
+    _contentDirection = 1;
+    _viewReady = false;
+    _cacheInstanceId = zTabsInstanceIds.next();
+    constructor() {
+        effect(() => {
+            this.zTabs();
+            this._outsideFrame(() => this.checkScroll());
+        });
+        effect(() => {
+            this.activeTab();
+            this.zTabs();
+            this.isGlideType();
+            this._glidePending = true;
+            this._outsideFrame(() => this._updateGlideIndicator());
+        });
+        effect(() => {
+            this.hoveredTab();
+            this.isHoverGlideType();
+            this._outsideFrame(() => this._updateHoverIndicator());
+        });
+        effect(() => {
+            this.activeTab();
+            this.zTabs();
+            this._hasCollapsingLabel();
+            this.zOrientation();
+            this._outsideFrame(() => this._updateCollapsingLabels());
+        });
+        effect(() => {
+            const active = this.activeTab();
+            this.zContentAnimation();
+            untracked(() => this._trackContentDirection(active));
+        });
+        effect(() => {
+            const active = this.activeTab();
+            this.zLazy();
+            untracked(() => this._scheduleCommit(active));
+        });
+        effect(() => {
+            const host = this.panelHost();
+            const rendered = this.renderedTab();
+            const panels = this.tabPanels();
+            untracked(() => this._swapPanelView(host, rendered, panels));
+        });
+    }
+    ngOnInit() {
+        this._restoreActiveTabFromCache();
+    }
+    ngAfterViewInit() {
+        this._viewReady = true;
+        this.checkScroll();
+        this._setupResizeObserver();
+        this._outsideFrame(() => this._updateGlideIndicator());
+    }
+    ngOnDestroy() {
+        zTabsCancelIdle(this._teardownHandle);
+        for (const view of [...this._retiredViews, this._panelView]) {
+            view?.destroy();
+        }
+        this._retiredViews = [];
+        this._resizeObserver?.disconnect();
+        for (const animation of this._glideAnimations) {
+            animation.cancel();
+        }
+        this._contentAnimation?.cancel();
+        if (this._scrollFrame !== undefined) {
+            cancelAnimationFrame(this._scrollFrame);
+        }
+    }
+    tabsClasses = computed(() => zMergeClasses(zTabsVariants({
+        zType: this.zType(),
+        zOrientation: this.zOrientation(),
+    }), this.zNavFullWidth() ? 'w-full' : '', this.class()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabsClasses" }] : /* istanbul ignore next */ []));
+    contentWrapperFramed = computed(() => {
+        if (!this.zShowContentWrapper()) {
+            return false;
+        }
+        if (this.zOrientation() === 'vertical') {
+            return false;
+        }
+        const type = this.zType();
+        return (type === 'folder' ||
+            type === 'folder-soft' ||
+            type === 'folder-solid' ||
+            type === 'sharp' ||
+            type === 'sharp-line' ||
+            type === 'sharp-line-filled' ||
+            type === 'square' ||
+            type === 'code-line');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "contentWrapperFramed" }] : /* istanbul ignore next */ []));
+    tabsListHasBottomPadding = computed(() => {
+        if (this.zOrientation() !== 'horizontal') {
+            return false;
+        }
+        const type = this.zType();
+        return (type !== 'folder' &&
+            type !== 'folder-soft' &&
+            type !== 'folder-solid' &&
+            type !== 'segment' &&
+            type !== 'segment-solid' &&
+            type !== 'pill-solid' &&
+            type !== 'pill-blur' &&
+            type !== 'pill-float' &&
+            type !== 'pill-primary' &&
+            type !== 'assistant' &&
+            type !== 'underline-hover' &&
+            type !== 'bar' &&
+            type !== 'sharp' &&
+            type !== 'sharp-line' &&
+            type !== 'sharp-line-filled' &&
+            type !== 'square' &&
+            type !== 'code-line');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabsListHasBottomPadding" }] : /* istanbul ignore next */ []));
+    verticalTabsScrollable = computed(() => this.zOrientation() === 'vertical' && this.zTabs().length > 8, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "verticalTabsScrollable" }] : /* istanbul ignore next */ []));
+    navClasses = computed(() => zMergeClasses('z-tabs-nav flex items-center gap-1.5', this.zClassContent()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "navClasses" }] : /* istanbul ignore next */ []));
+    tabItems = computed(() => {
+        const activeValue = this.activeTab();
+        const classes = this._tabItemClasses();
+        return this.zTabs().map(tab => ({
+            tab,
+            classes,
+            isActive: activeValue === tab.value,
+        }));
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabItems" }] : /* istanbul ignore next */ []));
+    _tabItemClasses = computed(() => zMergeClasses(zTabItemVariants({
+        zType: this.zType(),
+        zSize: this.zSize(),
+        zOrientation: this.zOrientation(),
+    })), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_tabItemClasses" }] : /* istanbul ignore next */ []));
+    selectTab(tab, scrollToView = true) {
+        if (tab.disabled) {
+            return;
+        }
+        const isAlreadyActive = this.activeTab() === tab.value;
+        if (isAlreadyActive && !this.zReloadable()) {
+            return;
+        }
+        this.activeTab.set(tab.value);
+        this._saveActiveTabToCache(tab.value);
+        if (this.isGlideType()) {
+            this.bouncingTab.set(tab.value);
+            setTimeout(() => {
+                if (this.bouncingTab() === tab.value) {
+                    this.bouncingTab.set(null);
+                }
+            }, 320);
+        }
+        if (!isAlreadyActive || this.zEmitOnActiveClick()) {
+            this.zTabChange.emit(tab.value);
+        }
+        if (scrollToView && this.zOrientation() === 'horizontal') {
+            this._outsideFrame(() => {
+                const tabIndex = this.zTabs().findIndex(t => t.value === tab.value);
+                const tabButtonsList = this.tabButtons();
+                const tabButton = tabButtonsList[tabIndex];
+                if (tabButton) {
+                    const alignTabInViewport = () => {
+                        const container = this.tabsListContainer()?.nativeElement;
+                        if (!container) {
+                            return;
+                        }
+                        const containerRect = container.getBoundingClientRect();
+                        const tabRect = tabButton.nativeElement.getBoundingClientRect();
+                        const centeredScrollLeft = container.scrollLeft + tabRect.left - containerRect.left - (container.clientWidth - tabRect.width) / 2;
+                        const maxScrollLeft = container.scrollWidth - container.clientWidth;
+                        container.scrollTo({
+                            left: Math.max(0, Math.min(centeredScrollLeft, maxScrollLeft)),
+                            behavior: 'smooth',
+                        });
+                    };
+                    alignTabInViewport();
+                }
+            });
+        }
+    }
+    onTabKeydown(event, currentIndex) {
+        const tabs = this.zTabs().filter(t => !t.disabled);
+        const currentTab = tabs[currentIndex];
+        if (!currentTab) {
+            return;
+        }
+        const isHorizontal = this.zOrientation() === 'horizontal';
+        const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';
+        const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';
+        if (event.key === nextKey) {
+            event.preventDefault();
+            const nextIndex = (currentIndex + 1) % tabs.length;
+            this.selectTab(tabs[nextIndex]);
+            return;
+        }
+        if (event.key === prevKey) {
+            event.preventDefault();
+            const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+            this.selectTab(tabs[prevIndex]);
+            return;
+        }
+        if (event.key === 'Home') {
+            event.preventDefault();
+            this.selectTab(tabs[0]);
+            return;
+        }
+        if (event.key === 'End') {
+            event.preventDefault();
+            this.selectTab(tabs[tabs.length - 1]);
+        }
+    }
+    /**
+     * Keyboard focus moves the highlight too, so tabbing through the strip reads the same as hovering.
+     * Every type pays the listener, but only the hover-glide types get past the guard into a signal write.
+     */
+    onTabHover(tab) {
+        if (!this.isHoverGlideType() || tab.disabled || this.hoveredTab() === tab.value) {
+            return;
+        }
+        this.hoveredTab.set(tab.value);
+    }
+    onTabHoverEnd() {
+        if (!this.isHoverGlideType() || this.hoveredTab() === null) {
+            return;
+        }
+        this.hoveredTab.set(null);
+    }
+    checkScroll() {
+        const container = this.tabsListContainer()?.nativeElement;
+        if (!container || this.zOrientation() !== 'horizontal') {
+            this.canScrollLeft.set(false);
+            this.canScrollRight.set(false);
+            return;
+        }
+        const { scrollLeft, scrollWidth, clientWidth } = container;
+        const maxScrollLeft = scrollWidth - clientWidth;
+        if (maxScrollLeft <= Z_TABS_SCROLL_TOLERANCE) {
+            container.scrollLeft = 0;
+            this.canScrollLeft.set(false);
+            this.canScrollRight.set(false);
+            return;
+        }
+        this.canScrollLeft.set(scrollLeft > Z_TABS_SCROLL_TOLERANCE);
+        this.canScrollRight.set(maxScrollLeft - scrollLeft > Z_TABS_SCROLL_TOLERANCE);
+    }
+    scrollLeft() {
+        const container = this.tabsListContainer()?.nativeElement;
+        if (!container) {
+            return;
+        }
+        container.scrollBy({ left: -200, behavior: 'smooth' });
+        setTimeout(() => this.checkScroll(), 300);
+    }
+    scrollRight() {
+        const container = this.tabsListContainer()?.nativeElement;
+        if (!container) {
+            return;
+        }
+        container.scrollBy({ left: 200, behavior: 'smooth' });
+        setTimeout(() => this.checkScroll(), 300);
+    }
+    onTabsScroll() {
+        if (this._scrollFrame !== undefined) {
+            return;
+        }
+        // Smooth-scrolling the strip fires this every frame; measuring once per frame keeps the forced
+        // layout from piling up while the glide animation runs.
+        this._scrollFrame = this._outsideFrame(() => {
+            this._scrollFrame = undefined;
+            this.checkScroll();
+        });
+    }
+    /**
+     * Commits the new panel on the next frame, so the tab strip paints its new state before a heavy
+     * subtree is built. Nothing longer is needed: the glide runs on the compositor, so the mount that
+     * follows cannot stall it — waiting out the animation would only make content feel late.
+     */
+    _scheduleCommit(value) {
+        if (!value) {
+            return;
+        }
+        if (!this.zLazy() || !this._viewReady || typeof requestAnimationFrame === 'undefined') {
+            this._commitPanel(value);
+            return;
+        }
+        // Deliberately inside the Angular zone: this instantiates the consumer's panel content.
+        requestAnimationFrame(() => this._commitPanel(value));
+    }
+    _commitPanel(value) {
+        if (this.activeTab() !== value) {
+            return;
+        }
+        this.renderedTab.set(value);
+    }
+    /**
+     * Sizes the indicator once, then moves it with a transform-only animation. Transform is the one
+     * property the compositor can tick by itself, so a busy main thread — a heavy panel mounting, the
+     * host's own work — cannot drop frames from the glide. A second animation counter-scales the corner
+     * radius; that one only repaints a small element and degrades to a late radius, never a stalled pill.
+     */
+    _updateGlideIndicator() {
+        const element = this.glideIndicator()?.nativeElement;
+        if (!this.isGlideType() || !element) {
+            this._glideBox = undefined;
+            return;
+        }
+        const activeIndex = this.zTabs().findIndex(tab => tab.value === this.activeTab());
+        const button = this.tabButtons()[activeIndex]?.nativeElement;
+        if (!button) {
+            return;
+        }
+        const next = zTabsMeasure(button);
+        const previous = this._glideBox;
+        const moved = !zTabsBoxEquals(previous, next);
+        // A tab change arms the glide; whichever call observes the new geometry first plays it, and later
+        // calls for the same geometry leave the running animation alone.
+        const shouldGlide = this._glidePending && Boolean(previous) && !this._prefersReducedMotion();
+        if (!moved) {
+            return;
+        }
+        this._glidePending = false;
+        this._glideBox = next;
+        for (const animation of this._glideAnimations) {
+            animation.cancel();
+        }
+        this._glideAnimations = [];
+        element.style.width = `${next.w}px`;
+        element.style.height = `${next.h}px`;
+        element.style.transform = `translate(${next.x}px, ${next.y}px)`;
+        element.style.borderRadius = '';
+        element.style.opacity = '1';
+        // jsdom and older SSR shims ship no Web Animations API; the indicator simply snaps there.
+        if (!shouldGlide || !previous || typeof element.animate !== 'function') {
+            return;
+        }
+        const scaleX = previous.w / next.w;
+        const scaleY = previous.h / next.h;
+        // Both animations share one timing so the radius correction tracks the transform's progress exactly.
+        const options = { duration: 480, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' };
+        this._glideAnimations.push(element.animate([
+            { transform: `translate(${previous.x}px, ${previous.y}px) scale(${scaleX}, ${scaleY})` },
+            { transform: `translate(${next.x}px, ${next.y}px)` },
+        ], options));
+        const radius = Math.min(parseFloat(getComputedStyle(element).borderTopLeftRadius) || 0, next.w / 2, next.h / 2);
+        if (radius > 0) {
+            this._glideAnimations.push(element.animate(zTabsRadiusKeyframes(radius, scaleX, scaleY), options));
+        }
+    }
+    /**
+     * Swaps the visible panel. The incoming view is built and bound while it is still off-document, so
+     * none of that work triggers style, layout or paint; only the final insert does. The outgoing view is
+     * detached immediately — it leaves the DOM at once — and destroyed off the critical path, keeping
+     * teardown out of the frame the user clicked in. It is still destroyed, so panels re-initialise.
+     */
+    _swapPanelView(host, value, panels) {
+        if (!host || !this.zLazy() || !value || this._mountedPanel === value) {
+            return;
+        }
+        const panel = panels.find(item => item.zTabPanel() === value);
+        if (!panel) {
+            return;
+        }
+        if (host.length > 0) {
+            host.detach(0);
+        }
+        if (this._panelView) {
+            this._retiredViews.push(this._panelView);
+        }
+        const view = panel.template.createEmbeddedView({});
+        view.detectChanges();
+        host.insert(view);
+        this._panelView = view;
+        this._mountedPanel = value;
+        this._scheduleTeardown();
+        // The lazy path knows the exact moment the panel lands, so it plays the enter animation itself
+        // instead of waiting for the frame the eager path has to.
+        this._animateContent();
+    }
+    _scheduleTeardown() {
+        if (this._retiredViews.length === 0 || this._teardownHandle !== undefined) {
+            return;
+        }
+        this._teardownHandle = zTabsRequestIdle(() => {
+            this._teardownHandle = undefined;
+            const retired = this._retiredViews;
+            this._retiredViews = [];
+            for (const view of retired) {
+                view.destroy();
+            }
+        });
+    }
+    /**
+     * Records which way the strip travelled so `slide`/`blur` can enter from the side the user clicked
+     * towards. Effects run after the active-panel binding has updated, so the eager path can animate
+     * immediately and avoid painting one unanimated frame before the enter state is applied.
+     */
+    _trackContentDirection(active) {
+        const index = this.zTabs().findIndex(tab => tab.value === active);
+        if (index === -1) {
+            return;
+        }
+        const hadActiveTab = this._lastActiveIndex !== -1;
+        if (hadActiveTab) {
+            this._contentDirection = index >= this._lastActiveIndex ? 1 : -1;
+        }
+        this._lastActiveIndex = index;
+        if (!this.zLazy() && hadActiveTab) {
+            // Let Angular finish the active-panel binding, then start before the browser paints. Waiting
+            // for another RAF lets one unanimated frame flash through, which reads as a small jump.
+            queueMicrotask(() => this._animateContent());
+        }
+    }
+    /**
+     * Animates the entering panel. Everything but `blur` is transform/opacity only, so the animation
+     * ticks on the compositor and a heavy panel mounting in the same frame cannot stall it.
+     */
+    _animateContent() {
+        const animation = this.zContentAnimation();
+        this._contentAnimation?.cancel();
+        this._contentAnimation = undefined;
+        if (animation === 'none' || this.zTabsOnly() || this._prefersReducedMotion()) {
+            return;
+        }
+        const panel = this.panelsHost()?.nativeElement?.querySelector('[role="tabpanel"][data-state="active"]');
+        if (!panel || typeof panel.animate !== 'function') {
+            return;
+        }
+        const { keyframes, options } = zTabsContentKeyframes(animation, this._contentDirection, this.zOrientation() === 'vertical');
+        this._contentAnimation = panel.animate(keyframes, options);
+    }
+    /**
+     * `width: auto` cannot be interpolated, so the label's own content width is measured and written as
+     * an explicit pixel width for the stylesheet to transition from zero. `scrollWidth` reports that
+     * content width even while the element is clamped to zero and hidden, so no reflow-forcing dance is
+     * needed. The active surface lives on the tab itself for these types, which is what lets the pill
+     * grow in step with the label rather than chase a box that is still resizing.
+     */
+    _updateCollapsingLabels() {
+        if (!this._hasCollapsingLabel()) {
+            return;
+        }
+        for (const button of this.tabButtons()) {
+            const label = button.nativeElement.querySelector('.z-tab-item-label');
+            if (!label) {
+                continue;
+            }
+            const isActive = button.nativeElement.dataset['active'] === 'true';
+            label.style.width = isActive ? `${label.scrollWidth}px` : '0px';
+        }
+    }
+    /**
+     * Moves the muted highlight onto the hovered tab. The first placement jumps into position and only
+     * fades in — gliding it in from a stale box would read as a stray rectangle crossing the strip.
+     */
+    _updateHoverIndicator() {
+        const element = this.hoverIndicator()?.nativeElement;
+        if (!this.isHoverGlideType() || !element) {
+            this._hoverBox = undefined;
+            return;
+        }
+        const hovered = this.hoveredTab();
+        if (!hovered) {
+            element.style.opacity = '0';
+            this._hoverBox = undefined;
+            return;
+        }
+        const index = this.zTabs().findIndex(tab => tab.value === hovered);
+        const button = this.tabButtons()[index]?.nativeElement;
+        if (!button) {
+            return;
+        }
+        const next = zTabsMeasure(button);
+        if (zTabsBoxEquals(this._hoverBox, next)) {
+            return;
+        }
+        const isFirstPlacement = !this._hoverBox;
+        this._hoverBox = next;
+        if (isFirstPlacement) {
+            element.style.transition = 'opacity 150ms ease-out';
+        }
+        element.style.width = `${next.w}px`;
+        element.style.height = `${next.h}px`;
+        element.style.transform = `translate(${next.x}px, ${next.y}px)`;
+        element.style.opacity = '1';
+        if (isFirstPlacement) {
+            // Hand the transition back to the stylesheet so the next hover glides instead of jumping.
+            this._outsideFrame(() => {
+                element.style.transition = '';
+            });
+        }
+    }
+    /**
+     * Measurement and imperative DOM work never needs a change-detection tick of its own. With zone.js a
+     * plain `requestAnimationFrame` schedules one per callback — wasteful during a smooth scroll, which
+     * fires every frame. Signal writes made inside still schedule change detection on their own.
+     */
+    _outsideFrame(task) {
+        return this._zone.runOutsideAngular(() => requestAnimationFrame(task));
+    }
+    _prefersReducedMotion() {
+        return typeof window !== 'undefined' && Boolean(window.matchMedia?.('(prefers-reduced-motion: reduce)').matches);
+    }
+    _setupResizeObserver() {
+        const container = this.tabsListContainer()?.nativeElement ?? this.tabsList()?.nativeElement;
+        if (!container) {
+            return;
+        }
+        this._resizeObserver = new ResizeObserver(() => {
+            this.checkScroll();
+            this._updateGlideIndicator();
+            this._updateHoverIndicator();
+        });
+        this._resizeObserver.observe(container);
+    }
+    _restoreActiveTabFromCache() {
+        if (!this.zCache()) {
+            return;
+        }
+        const cacheKey = this._getCacheKey();
+        const cachedTab = ZCacheService.get(cacheKey);
+        if (!cachedTab) {
+            return;
+        }
+        const tab = this.zTabs().find(item => item.value === cachedTab && !item.disabled);
+        if (!tab) {
+            return;
+        }
+        this.activeTab.set(tab.value);
+    }
+    _saveActiveTabToCache(value) {
+        if (!this.zCache()) {
+            return;
+        }
+        ZCacheService.set(this._getCacheKey(), value);
+    }
+    _getCacheKey() {
+        const customKey = this.zCacheKey().trim();
+        if (customKey) {
+            return customKey;
+        }
+        const path = typeof window === 'undefined' ? 'ssr' : window.location.pathname;
+        return `z-tabs:${path}:${this._cacheInstanceId}`;
+    }
+    scrollToActiveDropdownItem() {
+        setTimeout(() => {
+            const activeIndex = this.zTabs().findIndex(tab => tab.value === this.activeTab());
+            if (activeIndex === -1) {
+                return;
+            }
+            const dropdownMenu = document.querySelector('.z-tabs-dropdown-menu');
+            if (!dropdownMenu) {
+                return;
+            }
+            const dropdownItems = Array.from(dropdownMenu.querySelectorAll('button'));
+            const activeItem = dropdownItems[activeIndex];
+            if (activeItem && dropdownMenu) {
+                const menuRect = dropdownMenu.getBoundingClientRect();
+                const itemRect = activeItem.getBoundingClientRect();
+                const scrollTop = activeItem.offsetTop - menuRect.height / 2 + itemRect.height / 2;
+                dropdownMenu.scrollTo({
+                    top: scrollTop,
+                    behavior: 'smooth',
+                });
+            }
+        }, 150);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: ZTabsComponent, isStandalone: true, selector: "z-tabs", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zTabs: { classPropertyName: "zTabs", publicName: "zTabs", isSignal: true, isRequired: true, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zOrientation: { classPropertyName: "zOrientation", publicName: "zOrientation", isSignal: true, isRequired: false, transformFunction: null }, zContentFit: { classPropertyName: "zContentFit", publicName: "zContentFit", isSignal: true, isRequired: false, transformFunction: null }, zContentAnimation: { classPropertyName: "zContentAnimation", publicName: "zContentAnimation", isSignal: true, isRequired: false, transformFunction: null }, zLazy: { classPropertyName: "zLazy", publicName: "zLazy", isSignal: true, isRequired: false, transformFunction: null }, zTabsOnly: { classPropertyName: "zTabsOnly", publicName: "zTabsOnly", isSignal: true, isRequired: false, transformFunction: null }, zShowNavWrapper: { classPropertyName: "zShowNavWrapper", publicName: "zShowNavWrapper", isSignal: true, isRequired: false, transformFunction: null }, zNavFullWidth: { classPropertyName: "zNavFullWidth", publicName: "zNavFullWidth", isSignal: true, isRequired: false, transformFunction: null }, zClassContent: { classPropertyName: "zClassContent", publicName: "zClassContent", isSignal: true, isRequired: false, transformFunction: null }, zShowContentWrapper: { classPropertyName: "zShowContentWrapper", publicName: "zShowContentWrapper", isSignal: true, isRequired: false, transformFunction: null }, zReloadable: { classPropertyName: "zReloadable", publicName: "zReloadable", isSignal: true, isRequired: false, transformFunction: null }, zEmitOnActiveClick: { classPropertyName: "zEmitOnActiveClick", publicName: "zEmitOnActiveClick", isSignal: true, isRequired: false, transformFunction: null }, zCache: { classPropertyName: "zCache", publicName: "zCache", isSignal: true, isRequired: false, transformFunction: null }, zCacheKey: { classPropertyName: "zCacheKey", publicName: "zCacheKey", isSignal: true, isRequired: false, transformFunction: null }, zWithDropdown: { classPropertyName: "zWithDropdown", publicName: "zWithDropdown", isSignal: true, isRequired: false, transformFunction: null }, activeTab: { classPropertyName: "activeTab", publicName: "activeTab", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeTab: "activeTabChange", zTabChange: "zTabChange" }, host: { classAttribute: "z-tabs-wrapper block" }, queries: [{ propertyName: "tabPanels", predicate: ZTabPanelDirective, isSignal: true }], viewQueries: [{ propertyName: "tabsListContainer", first: true, predicate: ["tabsListContainer"], descendants: true, isSignal: true }, { propertyName: "tabButtons", predicate: ["tabButton"], descendants: true, isSignal: true }, { propertyName: "glideIndicator", first: true, predicate: ["glideIndicator"], descendants: true, isSignal: true }, { propertyName: "hoverIndicator", first: true, predicate: ["hoverIndicator"], descendants: true, isSignal: true }, { propertyName: "tabsList", first: true, predicate: ["tabsList"], descendants: true, isSignal: true }, { propertyName: "panelsHost", first: true, predicate: ["panelsHost"], descendants: true, isSignal: true }, { propertyName: "panelHost", first: true, predicate: ["panelHost"], descendants: true, read: ViewContainerRef, isSignal: true }], ngImport: i0, template: "<div\n  class=\"z-tabs-container flex gap-1\"\n  [attr.data-type]=\"zType()\"\n  [attr.data-orientation]=\"zOrientation()\"\n  [attr.data-content-fit]=\"zContentFit()\"\n  [class.flex-col]=\"!zTabsOnly()\"\n  [class.flex-row]=\"zOrientation() === 'vertical'\"\n  [class.gap-4]=\"zOrientation() === 'vertical'\">\n  <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n  <div\n    [class]=\"navClasses()\"\n    [class.z-tabs-nav-surface]=\"zShowNavWrapper() && isGlideType()\"\n    [class.w-full]=\"zOrientation() === 'horizontal' && (!zShowNavWrapper() || zNavFullWidth())\"\n    [class.w-fit]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n    [class.max-w-full]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n    [class.w-auto]=\"zOrientation() === 'vertical'\"\n    [class.shrink-0]=\"zOrientation() === 'vertical'\">\n    <!-- Scroll Left Button -->\n    @if (canScrollLeft() && zOrientation() === 'horizontal') {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        [zWave]=\"false\"\n        class=\"z-tabs-nav-control z-tabs-nav-prev shrink-0\"\n        (click)=\"scrollLeft()\"\n        aria-label=\"Scroll left\">\n        <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n      </z-button>\n    }\n\n    <!-- Tabs List Container with Scroll + Fade -->\n    <div\n      class=\"z-tabs-scroll-container relative min-w-0 flex-1\"\n      [class.z-tabs-scroll-container-surface]=\"(canScrollLeft() || canScrollRight()) && !zShowNavWrapper()\"\n      [attr.data-type]=\"zType()\">\n      @if (zOrientation() === 'vertical') {\n        <ng-scrollbar\n          class=\"z-tabs-scroll-wrapper z-tabs-scrollbar vertical\"\n          [class.z-tabs-scroll-wrapper-limited]=\"verticalTabsScrollable()\"\n          track=\"vertical\"\n          orientation=\"vertical\"\n          appearance=\"compact\"\n          visibility=\"hover\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </ng-scrollbar>\n      } @else {\n        <div\n          #tabsListContainer\n          class=\"z-tabs-scroll-wrapper\"\n          [class.z-tabs-scroll-wrapper-scrollable]=\"canScrollLeft() || canScrollRight()\"\n          [class.z-tabs-scroll-wrapper-fade-left]=\"canScrollLeft()\"\n          [class.z-tabs-scroll-wrapper-fade-right]=\"canScrollRight()\"\n          (scroll)=\"onTabsScroll()\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </div>\n      }\n    </div>\n\n    <!-- Scroll Right Button -->\n    @if (canScrollRight() && zOrientation() === 'horizontal') {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        class=\"z-tabs-nav-control z-tabs-nav-next shrink-0\"\n        (click)=\"scrollRight()\"\n        [zWave]=\"false\"\n        aria-label=\"Scroll right\">\n        <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n      </z-button>\n    }\n\n    <!-- Dropdown Button (Mobile or Overflow) -->\n    @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        class=\"z-tabs-nav-control z-tabs-nav-menu shrink-0\"\n        z-popover\n        [zPopoverContent]=\"dropdownTpl\"\n        zPosition=\"bottom-right\"\n        [zWave]=\"false\"\n        zClass=\"min-w-[6.25rem] max-w-[12.5rem]\"\n        (zShow)=\"scrollToActiveDropdownItem()\"\n        aria-label=\"Select tab\">\n        <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n      </z-button>\n    }\n  </div>\n\n  <ng-template #tabsListTpl>\n    <!-- Tab List -->\n    <div\n      #tabsList\n      [class]=\"tabsClasses()\"\n      [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n      role=\"tablist\"\n      [attr.aria-orientation]=\"zOrientation()\"\n      [attr.data-type]=\"zType()\">\n      @if (isHoverGlideType()) {\n        <div\n          #hoverIndicator\n          class=\"z-tabs-hover-indicator pointer-events-none absolute top-0 left-0 z-[5]\"\n          [attr.data-type]=\"zType()\"\n          aria-hidden=\"true\"></div>\n      }\n      @if (isGlideType()) {\n        <div\n          #glideIndicator\n          class=\"z-tabs-glide-indicator pointer-events-none absolute top-0 left-0 z-[6]\"\n          [attr.data-type]=\"zType()\"\n          aria-hidden=\"true\"></div>\n      }\n      @for (item of tabItems(); track item.tab.value; let idx = $index; let last = $last) {\n        <button\n          #tabButton\n          type=\"button\"\n          role=\"tab\"\n          [class]=\"item.classes\"\n          [class.z-tab-item-has-icon]=\"!!item.tab.icon || !!item.tab.iconTemplate\"\n          [attr.data-active]=\"item.isActive\"\n          [attr.data-state]=\"item.isActive ? 'active' : 'inactive'\"\n          [attr.data-type]=\"zType()\"\n          [attr.data-orientation]=\"zOrientation()\"\n          [attr.data-last]=\"last\"\n          [attr.aria-selected]=\"item.isActive\"\n          [attr.aria-controls]=\"'panel-' + item.tab.value\"\n          [disabled]=\"item.tab.disabled\"\n          [tabindex]=\"item.isActive ? 0 : -1\"\n          z-tooltip\n          [zContent]=\"showsTabTooltip() ? (item.tab.label | translate) : ''\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          (click)=\"selectTab(item.tab)\"\n          (keydown)=\"onTabKeydown($event, idx)\"\n          (mouseenter)=\"onTabHover(item.tab)\"\n          (mouseleave)=\"onTabHoverEnd()\"\n          (focus)=\"onTabHover(item.tab)\"\n          (blur)=\"onTabHoverEnd()\">\n          @if (item.tab.iconTemplate) {\n            <span class=\"shrink-0\" [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === item.tab.value\">\n              <ng-container *ngTemplateOutlet=\"item.tab.iconTemplate; context: { $implicit: item.tab }\" />\n            </span>\n          } @else if (item.tab.icon) {\n            <z-icon\n              [zType]=\"item.tab.icon\"\n              zSize=\"16\"\n              class=\"shrink-0\"\n              [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === item.tab.value\" />\n          }\n          <span\n            class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\"\n            [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === item.tab.value\">\n            {{ item.tab.label | translate }}\n          </span>\n          @if (item.tab.badge) {\n            <span\n              class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-(--radius-pill) px-1.5 text-xs font-semibold ring-2\"\n              [class.bg-primary]=\"zType() !== 'badge'\"\n              [class.text-primary-foreground]=\"zType() !== 'badge'\"\n              [class.bg-primary!]=\"zType() === 'badge'\"\n              [class.text-primary-foreground!]=\"zType() === 'badge'\">\n              {{ item.tab.badge }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div\n      #panelsHost\n      class=\"z-tabs-panels min-h-0\"\n      [class.flex-1]=\"zOrientation() === 'vertical'\"\n      [class.shadow-xs]=\"contentWrapperFramed()\"\n      [class.z-tabs-panels-unwrapped]=\"!contentWrapperFramed()\">\n      @if (!zLazy()) {\n        @for (panel of tabPanels(); track panel.zTabPanel()) {\n          <div\n            role=\"tabpanel\"\n            [id]=\"'panel-' + panel.zTabPanel()\"\n            [attr.aria-labelledby]=\"panel.zTabPanel()\"\n            [attr.data-state]=\"activeTab() === panel.zTabPanel() ? 'active' : 'inactive'\"\n            [attr.inert]=\"activeTab() === panel.zTabPanel() ? null : ''\">\n            <ng-container *ngTemplateOutlet=\"panel.template\" />\n          </div>\n        }\n      } @else if (renderedTab()) {\n        <div role=\"tabpanel\" [id]=\"'panel-' + renderedTab()\" [attr.aria-labelledby]=\"renderedTab()\" data-state=\"active\">\n          <ng-container #panelHost />\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    zHoverGlide\n    zHoverGlideClass=\"bg-muted/70 rounded-(--radius-sm)\"\n    class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] flex-col gap-0.5 overflow-y-auto p-1\"\n    [style.width]=\"zWithDropdown()\"\n    [style.min-width]=\"zWithDropdown()\"\n    [style.max-width]=\"zWithDropdown()\">\n    @for (item of tabItems(); track item.tab.value) {\n      <button\n        #dropdownItem\n        type=\"button\"\n        class=\"relative z-[1] flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n        data-glide-item\n        [class.hover:text-foreground]=\"!item.isActive\"\n        [class.focus:bg-primary/10]=\"!item.isActive\"\n        [class.bg-primary/15]=\"item.isActive\"\n        [class.text-primary]=\"item.isActive\"\n        [disabled]=\"item.tab.disabled\"\n        (click)=\"selectTab(item.tab, true); close()\">\n        @if (item.tab.icon) {\n          <z-icon [zType]=\"item.tab.icon\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n        }\n        <span\n          class=\"min-w-0 flex-1 truncate\"\n          z-tooltip\n          [zContent]=\"item.tab.label | translate\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          [zTriggerElement]=\"dropdownItem\">\n          {{ item.tab.label | translate }}\n        </span>\n        @if (item.tab.badge) {\n          <span\n            class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-(--radius-pill) px-1.5 text-xs font-semibold\">\n            {{ item.tab.badge }}\n          </span>\n        }\n        @if (item.isActive) {\n          <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n        }\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:visible;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow:visible}.z-tabs-scroll-wrapper.vertical.z-tabs-scroll-wrapper-limited{height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));max-height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-scrollable{overflow-x:auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%)}.z-tabs-scrollbar{--scrollbar-padding: .125rem;--z-tabs-scrollbar-gutter: .75rem;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent);--scrollbar-thumb-hover-color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);--scrollbar-size: .375rem;display:block}.z-tabs-scrollbar .ng-scroll-viewport,.z-tabs-scrollbar .ng-scroll-content{max-width:100%}.z-tabs-scrollbar.z-tabs-scroll-wrapper-limited .ng-scroll-viewport{height:100%;max-height:100%}.z-tabs-scrollbar .ng-scroll-content{box-sizing:border-box;padding-right:var(--z-tabs-scrollbar-gutter)}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur])>.z-tabs-nav>.z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,var(--background) 88%,var(--border));box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur])>.z-tabs-nav>.z-tabs-scroll-container-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=segment],[data-type=segment-solid])>.z-tabs-nav>.z-tabs-scroll-container-surface{border-radius:var(--radius-sm);overflow:hidden}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur])>.z-tabs-nav>.z-tabs-scroll-container-surface{border-radius:9999px;overflow:hidden}.dark .z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur])>.z-tabs-nav>.z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tabs{align-items:stretch;min-height:2.5rem}.z-tabs.flex-col{width:100%}.z-tabs.flex-col.border-r{border-right:.0625rem solid hsl(var(--border));padding-right:.5rem}.z-tabs-nav-control{transition:color .2s ease,background-color .2s ease,border-color .2s ease}.z-tabs-nav-surface{border:0;border-radius:var(--radius-sm);padding-block:0;box-shadow:0 0 0 .0625rem color-mix(in oklab,oklch(95% 0 0deg) 88%,var(--border)),0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur],[data-type=pill-float],[data-type=pill-primary],[data-type=assistant]) .z-tabs-nav-surface{border-radius:9999px}.dark .z-tabs-nav-surface{box-shadow:0 0 0 .0625rem color-mix(in oklab,var(--border) 65%,transparent),0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tab-item{-webkit-tap-highlight-color:transparent;position:relative}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels{border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:1rem}.z-tabs-panels [role=tabpanel][data-state=inactive]{content-visibility:hidden}@supports not (content-visibility: hidden){.z-tabs-panels [role=tabpanel][data-state=inactive]{display:none}}.z-tabs-panels-unwrapped{border:0;border-radius:0;padding:0}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:0}.z-tabs-container[data-orientation=horizontal]{gap:0}.z-tabs-container[data-orientation=horizontal] .z-tabs-scroll-container{z-index:1}.z-tabs-container[data-orientation=horizontal] .z-tabs-panels{margin-top:0}.z-tabs-container[data-content-fit=screen]{height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));max-height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));min-height:0;overflow:hidden}.z-tabs-container[data-content-fit=screen] .z-tabs-nav{flex:none;min-height:0}.z-tabs-container[data-content-fit=screen] .z-tabs-panels{flex:1 1 auto;min-height:0;overflow:auto}.z-tabs-container[data-content-fit=screen] [role=tabpanel]{min-height:0}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs{isolation:isolate;position:relative}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]:after{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:color-mix(in oklab,var(--border) 80%,transparent);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-scroll-wrapper{padding-inline:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels{border-radius:0 0 var(--radius-xs) var(--radius-xs)}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels-unwrapped{border:0;border-radius:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav{position:relative}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:var(--border);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-panels{border-top:0}.z-tabs-container[data-type=folder-solid][data-orientation=horizontal] .z-tab-item[data-active=true][data-last=true]{box-shadow:inset .0625rem 0 0 var(--primary),inset -.0625rem 0 0 var(--border),inset 0 .0625rem 0 var(--primary)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur],[data-type=pill-float]) .z-tabs{align-items:center}.z-tabs-container:is([data-type=pill-primary],[data-type=assistant],[data-type=bar])[data-orientation=horizontal] .z-tabs{align-items:center}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-nav{position:relative;gap:0}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-scroll-container{--z-tabs-fade-width: 2.75rem}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-nav-control{position:absolute;top:50%;z-index:2;width:1.5rem;min-width:1.5rem;height:1.5rem;min-height:1.5rem;padding:0;border-radius:9999px;transform:translateY(-50%);background:color-mix(in oklab,var(--muted) 90%,var(--background));color:var(--foreground)}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-nav-control:hover{background:color-mix(in oklab,var(--muted) 70%,var(--foreground) 12%)}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-nav-prev{left:0}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-nav-next{right:0}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-nav-menu{display:none}.z-tabs-glide-indicator{transition:none;transform-origin:0 0;opacity:0;will-change:transform}.z-tabs-glide-indicator[data-type=segment],.z-tabs-glide-indicator[data-type=segment-solid]{border-radius:var(--radius-sm);overflow:hidden;background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=pill-solid],.z-tabs-glide-indicator[data-type=pill-blur],.z-tabs-glide-indicator[data-type=pill-float],.z-tabs-glide-indicator[data-type=pill-primary]{border-radius:9999px;overflow:hidden}.z-tabs-glide-indicator:is([data-type=pill-float],[data-type=pill-primary]){background:var(--primary);box-shadow:0 .0625rem .1875rem #0000001a,0 .0625rem .125rem #00000014}.z-tabs-glide-indicator[data-type=assistant]{border-radius:var(--radius-sm);background:var(--primary);box-shadow:0 .0625rem .125rem #0000000d}.z-tabs-glide-indicator[data-type=bar]{border-radius:var(--radius-sm);background:color-mix(in oklab,var(--primary) 10%,transparent);box-shadow:inset 0 0 0 .0625rem var(--background),0 .0625rem .1875rem #0000001a,0 .0625rem .125rem -.0625rem #0000001a}.dark .z-tabs-glide-indicator[data-type=bar]{box-shadow:inset 0 0 0 .0625rem color-mix(in oklab,white 12%,transparent),0 .125rem .5rem #00000059,0 .0625rem .125rem #0003}.z-tabs-glide-indicator[data-type=underline-hover]{background:transparent}.z-tabs-glide-indicator:is([data-type=bar],[data-type=underline-hover]):before{content:\"\";position:absolute;background:var(--primary);border-radius:9999px}.z-tabs-glide-indicator[data-type=pill-solid]{background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=segment-solid]{background:var(--primary)}.z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 22%,transparent) 0%,color-mix(in oklab,white 6%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 25%,transparent),inset 0 .0625rem color-mix(in oklab,white 45%,transparent),0 .125rem .5rem #0000001a,0 .0625rem .125rem #0000000f;backdrop-filter:blur(.75rem) saturate(180%);-webkit-backdrop-filter:blur(.75rem) saturate(180%)}.dark .z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 12%,transparent) 0%,color-mix(in oklab,white 3%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 10%,transparent),inset 0 .0625rem color-mix(in oklab,white 16%,transparent),0 .125rem .5rem #00000059,0 .0625rem .125rem #0003}.z-tabs-container[data-orientation=horizontal] .z-tabs-glide-indicator[data-type=bar]:before{right:25%;bottom:0;left:25%;height:.25rem;border-radius:9999px 9999px 0 0}.z-tabs-container[data-orientation=horizontal] .z-tabs-glide-indicator[data-type=underline-hover]:before{right:0;bottom:0;left:0;height:.125rem;border-radius:0}.z-tabs-container[data-orientation=vertical] .z-tabs-glide-indicator[data-type=bar]:before{inset:25% auto auto 0;width:.25rem;height:50%;border-radius:0 9999px 9999px 0}.z-tabs-container[data-orientation=vertical] .z-tabs-glide-indicator[data-type=underline-hover]:before{inset:0 0 auto auto;width:.125rem;height:100%;border-radius:0}.z-tabs-container:is([data-type=pill-primary],[data-type=assistant],[data-type=bar]) .z-tab-item:hover:not([data-active=true]):not(:disabled){background:color-mix(in oklab,var(--muted) 50%,transparent)}.z-tabs-container:is([data-type=pill-primary],[data-type=assistant],[data-type=underline-hover],[data-type=bar]) .z-tab-item:focus-visible{box-shadow:0 0 0 .1875rem color-mix(in oklab,var(--ring) 50%,transparent)!important}.z-tabs-hover-indicator{transform-origin:0 0;opacity:0;border-radius:var(--radius-sm);background:color-mix(in oklab,var(--muted) 70%,transparent);transition:transform .18s cubic-bezier(.22,1,.36,1),width .18s cubic-bezier(.22,1,.36,1),height .18s cubic-bezier(.22,1,.36,1),opacity .15s ease-out}.z-tabs-container[data-type=underline-hover] .z-tabs:after{content:\"\";position:absolute;background:color-mix(in oklab,var(--border) 80%,transparent);pointer-events:none;z-index:0}.z-tabs-container[data-type=underline-hover][data-orientation=horizontal] .z-tabs:after{right:0;bottom:0;left:0;height:.0625rem}.z-tabs-container[data-type=underline-hover][data-orientation=vertical] .z-tabs:after{top:0;right:0;bottom:0;width:.0625rem}.z-tabs-container[data-type=assistant][data-orientation=horizontal] .z-tab-item{transition:background-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),color .2s ease}.z-tabs-container[data-type=assistant][data-orientation=horizontal] .z-tab-item[data-active=true]{background:var(--primary);box-shadow:0 .0625rem .125rem #0000000d}.z-tabs-container[data-type=assistant][data-orientation=horizontal] .z-tab-item{gap:0}.z-tabs-container[data-type=assistant][data-orientation=horizontal] .z-tab-item.z-tab-item-has-icon .z-tab-item-label{flex:none;overflow:hidden;text-overflow:clip;margin-inline-start:.375rem;opacity:1;transition:width .3s cubic-bezier(.4,0,.2,1),margin-inline-start .3s cubic-bezier(.4,0,.2,1),opacity .2s ease-out}.z-tabs-container[data-type=assistant][data-orientation=horizontal] .z-tab-item.z-tab-item-has-icon[data-active=false] .z-tab-item-label{margin-inline-start:0;opacity:0}@keyframes z-tab-icon-bounce{0%{transform:scale(1)}35%{transform:scale(.97)}to{transform:scale(1)}}.z-tab-icon-bounce{animation:z-tab-icon-bounce .32s cubic-bezier(.34,1.56,.64,1)}.z-tabs-container[data-orientation=vertical] .z-tabs-nav{align-items:stretch}.z-tabs-container[data-orientation=vertical] .z-tabs-scroll-container{width:min(12rem,40vw);flex:none}.z-tabs-container[data-orientation=vertical] .z-tabs-panels,.z-tabs-container[data-orientation=vertical] .z-tab-item{min-width:0}@media(prefers-reduced-motion:reduce){.z-tab-item,.z-tabs-nav-control,.z-tabs-hover-indicator,.z-tabs-container[data-type=assistant] .z-tab-item,.z-tabs-container[data-type=assistant] .z-tab-item-label{transition:none!important}.z-tabs-scroll-wrapper{scroll-behavior:auto}.z-tab-icon-bounce{animation:none!important}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "directive", type: ZHoverGlideDirective, selector: "[zHoverGlide]", inputs: ["zHoverGlideSelector", "zHoverGlideClass", "zHoverGlideDisabled"] }, { kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zContext", "zPosition", "zTooltipPosition", "zTrigger", "zTooltipTrigger", "zTooltipType", "zTooltipSize", "zClass", "zTooltipClass", "zShowDelay", "zTooltipShowDelay", "zHideDelay", "zTooltipHideDelay", "zArrow", "zTooltipArrow", "zDisabled", "zTooltipDisabled", "zOffset", "zTooltipOffset", "zAutoDetect", "zTriggerElement", "zAlwaysShow", "zMaxWidth"], outputs: ["zShow", "zHide"], exportAs: ["zTooltip"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ZPopoverDirective, selector: "[z-popover]", inputs: ["zPopoverContent", "zPosition", "zTrigger", "zPopoverTrigger", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zTriggerRef", "zManualClose", "zOutsideClickClose", "zScrollClose", "zSticky", "zShowArrow", "zKeyboardSafe"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange", "zOutsideClick"], exportAs: ["zPopover"] }, { kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: ZTabsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-tabs', imports: [
+                        ZIconComponent,
+                        ZHoverGlideDirective,
+                        ZButtonComponent,
+                        ZTooltipDirective,
+                        NgTemplateOutlet,
+                        ZPopoverDirective,
+                        TranslatePipe,
+                        NgScrollbar,
+                    ], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'z-tabs-wrapper block',
+                    }, template: "<div\n  class=\"z-tabs-container flex gap-1\"\n  [attr.data-type]=\"zType()\"\n  [attr.data-orientation]=\"zOrientation()\"\n  [attr.data-content-fit]=\"zContentFit()\"\n  [class.flex-col]=\"!zTabsOnly()\"\n  [class.flex-row]=\"zOrientation() === 'vertical'\"\n  [class.gap-4]=\"zOrientation() === 'vertical'\">\n  <!-- Tabs Navigation (Left/Scroll/Tabs/Right/Dropdown) -->\n  <div\n    [class]=\"navClasses()\"\n    [class.z-tabs-nav-surface]=\"zShowNavWrapper() && isGlideType()\"\n    [class.w-full]=\"zOrientation() === 'horizontal' && (!zShowNavWrapper() || zNavFullWidth())\"\n    [class.w-fit]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n    [class.max-w-full]=\"zOrientation() === 'horizontal' && zShowNavWrapper() && !zNavFullWidth()\"\n    [class.w-auto]=\"zOrientation() === 'vertical'\"\n    [class.shrink-0]=\"zOrientation() === 'vertical'\">\n    <!-- Scroll Left Button -->\n    @if (canScrollLeft() && zOrientation() === 'horizontal') {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        [zWave]=\"false\"\n        class=\"z-tabs-nav-control z-tabs-nav-prev shrink-0\"\n        (click)=\"scrollLeft()\"\n        aria-label=\"Scroll left\">\n        <z-icon zType=\"lucideChevronLeft\" zSize=\"16\" />\n      </z-button>\n    }\n\n    <!-- Tabs List Container with Scroll + Fade -->\n    <div\n      class=\"z-tabs-scroll-container relative min-w-0 flex-1\"\n      [class.z-tabs-scroll-container-surface]=\"(canScrollLeft() || canScrollRight()) && !zShowNavWrapper()\"\n      [attr.data-type]=\"zType()\">\n      @if (zOrientation() === 'vertical') {\n        <ng-scrollbar\n          class=\"z-tabs-scroll-wrapper z-tabs-scrollbar vertical\"\n          [class.z-tabs-scroll-wrapper-limited]=\"verticalTabsScrollable()\"\n          track=\"vertical\"\n          orientation=\"vertical\"\n          appearance=\"compact\"\n          visibility=\"hover\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </ng-scrollbar>\n      } @else {\n        <div\n          #tabsListContainer\n          class=\"z-tabs-scroll-wrapper\"\n          [class.z-tabs-scroll-wrapper-scrollable]=\"canScrollLeft() || canScrollRight()\"\n          [class.z-tabs-scroll-wrapper-fade-left]=\"canScrollLeft()\"\n          [class.z-tabs-scroll-wrapper-fade-right]=\"canScrollRight()\"\n          (scroll)=\"onTabsScroll()\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </div>\n      }\n    </div>\n\n    <!-- Scroll Right Button -->\n    @if (canScrollRight() && zOrientation() === 'horizontal') {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        class=\"z-tabs-nav-control z-tabs-nav-next shrink-0\"\n        (click)=\"scrollRight()\"\n        [zWave]=\"false\"\n        aria-label=\"Scroll right\">\n        <z-icon zType=\"lucideChevronRight\" zSize=\"16\" />\n      </z-button>\n    }\n\n    <!-- Dropdown Button (Mobile or Overflow) -->\n    @if (zOrientation() === 'horizontal' && (canScrollLeft() || canScrollRight())) {\n      <z-button\n        zType=\"ghost\"\n        zSize=\"sm\"\n        zIconOnly=\"true\"\n        class=\"z-tabs-nav-control z-tabs-nav-menu shrink-0\"\n        z-popover\n        [zPopoverContent]=\"dropdownTpl\"\n        zPosition=\"bottom-right\"\n        [zWave]=\"false\"\n        zClass=\"min-w-[6.25rem] max-w-[12.5rem]\"\n        (zShow)=\"scrollToActiveDropdownItem()\"\n        aria-label=\"Select tab\">\n        <z-icon zType=\"lucideChevronDown\" zSize=\"16\" />\n      </z-button>\n    }\n  </div>\n\n  <ng-template #tabsListTpl>\n    <!-- Tab List -->\n    <div\n      #tabsList\n      [class]=\"tabsClasses()\"\n      [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n      role=\"tablist\"\n      [attr.aria-orientation]=\"zOrientation()\"\n      [attr.data-type]=\"zType()\">\n      @if (isHoverGlideType()) {\n        <div\n          #hoverIndicator\n          class=\"z-tabs-hover-indicator pointer-events-none absolute top-0 left-0 z-[5]\"\n          [attr.data-type]=\"zType()\"\n          aria-hidden=\"true\"></div>\n      }\n      @if (isGlideType()) {\n        <div\n          #glideIndicator\n          class=\"z-tabs-glide-indicator pointer-events-none absolute top-0 left-0 z-[6]\"\n          [attr.data-type]=\"zType()\"\n          aria-hidden=\"true\"></div>\n      }\n      @for (item of tabItems(); track item.tab.value; let idx = $index; let last = $last) {\n        <button\n          #tabButton\n          type=\"button\"\n          role=\"tab\"\n          [class]=\"item.classes\"\n          [class.z-tab-item-has-icon]=\"!!item.tab.icon || !!item.tab.iconTemplate\"\n          [attr.data-active]=\"item.isActive\"\n          [attr.data-state]=\"item.isActive ? 'active' : 'inactive'\"\n          [attr.data-type]=\"zType()\"\n          [attr.data-orientation]=\"zOrientation()\"\n          [attr.data-last]=\"last\"\n          [attr.aria-selected]=\"item.isActive\"\n          [attr.aria-controls]=\"'panel-' + item.tab.value\"\n          [disabled]=\"item.tab.disabled\"\n          [tabindex]=\"item.isActive ? 0 : -1\"\n          z-tooltip\n          [zContent]=\"showsTabTooltip() ? (item.tab.label | translate) : ''\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          (click)=\"selectTab(item.tab)\"\n          (keydown)=\"onTabKeydown($event, idx)\"\n          (mouseenter)=\"onTabHover(item.tab)\"\n          (mouseleave)=\"onTabHoverEnd()\"\n          (focus)=\"onTabHover(item.tab)\"\n          (blur)=\"onTabHoverEnd()\">\n          @if (item.tab.iconTemplate) {\n            <span class=\"shrink-0\" [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === item.tab.value\">\n              <ng-container *ngTemplateOutlet=\"item.tab.iconTemplate; context: { $implicit: item.tab }\" />\n            </span>\n          } @else if (item.tab.icon) {\n            <z-icon\n              [zType]=\"item.tab.icon\"\n              zSize=\"16\"\n              class=\"shrink-0\"\n              [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === item.tab.value\" />\n          }\n          <span\n            class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\"\n            [class.z-tab-icon-bounce]=\"isGlideType() && bouncingTab() === item.tab.value\">\n            {{ item.tab.label | translate }}\n          </span>\n          @if (item.tab.badge) {\n            <span\n              class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-(--radius-pill) px-1.5 text-xs font-semibold ring-2\"\n              [class.bg-primary]=\"zType() !== 'badge'\"\n              [class.text-primary-foreground]=\"zType() !== 'badge'\"\n              [class.bg-primary!]=\"zType() === 'badge'\"\n              [class.text-primary-foreground!]=\"zType() === 'badge'\">\n              {{ item.tab.badge }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div\n      #panelsHost\n      class=\"z-tabs-panels min-h-0\"\n      [class.flex-1]=\"zOrientation() === 'vertical'\"\n      [class.shadow-xs]=\"contentWrapperFramed()\"\n      [class.z-tabs-panels-unwrapped]=\"!contentWrapperFramed()\">\n      @if (!zLazy()) {\n        @for (panel of tabPanels(); track panel.zTabPanel()) {\n          <div\n            role=\"tabpanel\"\n            [id]=\"'panel-' + panel.zTabPanel()\"\n            [attr.aria-labelledby]=\"panel.zTabPanel()\"\n            [attr.data-state]=\"activeTab() === panel.zTabPanel() ? 'active' : 'inactive'\"\n            [attr.inert]=\"activeTab() === panel.zTabPanel() ? null : ''\">\n            <ng-container *ngTemplateOutlet=\"panel.template\" />\n          </div>\n        }\n      } @else if (renderedTab()) {\n        <div role=\"tabpanel\" [id]=\"'panel-' + renderedTab()\" [attr.aria-labelledby]=\"renderedTab()\" data-state=\"active\">\n          <ng-container #panelHost />\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    zHoverGlide\n    zHoverGlideClass=\"bg-muted/70 rounded-(--radius-sm)\"\n    class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] flex-col gap-0.5 overflow-y-auto p-1\"\n    [style.width]=\"zWithDropdown()\"\n    [style.min-width]=\"zWithDropdown()\"\n    [style.max-width]=\"zWithDropdown()\">\n    @for (item of tabItems(); track item.tab.value) {\n      <button\n        #dropdownItem\n        type=\"button\"\n        class=\"relative z-[1] flex w-full cursor-pointer items-center justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50\"\n        data-glide-item\n        [class.hover:text-foreground]=\"!item.isActive\"\n        [class.focus:bg-primary/10]=\"!item.isActive\"\n        [class.bg-primary/15]=\"item.isActive\"\n        [class.text-primary]=\"item.isActive\"\n        [disabled]=\"item.tab.disabled\"\n        (click)=\"selectTab(item.tab, true); close()\">\n        @if (item.tab.icon) {\n          <z-icon [zType]=\"item.tab.icon\" zSize=\"16\" class=\"text-muted-foreground shrink-0\" />\n        }\n        <span\n          class=\"min-w-0 flex-1 truncate\"\n          z-tooltip\n          [zContent]=\"item.tab.label | translate\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          [zTriggerElement]=\"dropdownItem\">\n          {{ item.tab.label | translate }}\n        </span>\n        @if (item.tab.badge) {\n          <span\n            class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-(--radius-pill) px-1.5 text-xs font-semibold\">\n            {{ item.tab.badge }}\n          </span>\n        }\n        @if (item.isActive) {\n          <z-icon zType=\"lucideCheck\" zSize=\"16\" class=\"text-primary shink-0\" />\n        }\n      </button>\n    }\n  </div>\n</ng-template>\n", styles: [".z-tabs-scroll-wrapper{overflow-x:visible;overflow-y:visible;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow:visible}.z-tabs-scroll-wrapper.vertical.z-tabs-scroll-wrapper-limited{height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));max-height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-scrollable{overflow-x:auto}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%);-webkit-mask-image:linear-gradient(to left,transparent 0,black var(--z-tabs-fade-width),black 100%)}.z-tabs-scroll-wrapper.z-tabs-scroll-wrapper-fade-left.z-tabs-scroll-wrapper-fade-right{mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0,black var(--z-tabs-fade-width),black calc(100% - var(--z-tabs-fade-width)),transparent 100%)}.z-tabs-scrollbar{--scrollbar-padding: .125rem;--z-tabs-scrollbar-gutter: .75rem;--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in oklab, var(--muted-foreground) 35%, transparent);--scrollbar-thumb-hover-color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);--scrollbar-size: .375rem;display:block}.z-tabs-scrollbar .ng-scroll-viewport,.z-tabs-scrollbar .ng-scroll-content{max-width:100%}.z-tabs-scrollbar.z-tabs-scroll-wrapper-limited .ng-scroll-viewport{height:100%;max-height:100%}.z-tabs-scrollbar .ng-scroll-content{box-sizing:border-box;padding-right:var(--z-tabs-scrollbar-gutter)}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur])>.z-tabs-nav>.z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--background) 72%,var(--muted));border:.0625rem solid color-mix(in oklab,var(--background) 88%,var(--border));box-shadow:0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014;backdrop-filter:blur(.75rem) saturate(140%);-webkit-backdrop-filter:blur(.75rem) saturate(140%)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur])>.z-tabs-nav>.z-tabs-scroll-container-surface .z-tabs{background:transparent}.z-tabs-container:is([data-type=segment],[data-type=segment-solid])>.z-tabs-nav>.z-tabs-scroll-container-surface{border-radius:var(--radius-sm);overflow:hidden}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur])>.z-tabs-nav>.z-tabs-scroll-container-surface{border-radius:9999px;overflow:hidden}.dark .z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur])>.z-tabs-nav>.z-tabs-scroll-container-surface{background:color-mix(in oklab,var(--muted) 35%,transparent);border-color:color-mix(in oklab,var(--border) 65%,transparent);box-shadow:0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tabs{align-items:stretch;min-height:2.5rem}.z-tabs.flex-col{width:100%}.z-tabs.flex-col.border-r{border-right:.0625rem solid hsl(var(--border));padding-right:.5rem}.z-tabs-nav-control{transition:color .2s ease,background-color .2s ease,border-color .2s ease}.z-tabs-nav-surface{border:0;border-radius:var(--radius-sm);padding-block:0;box-shadow:0 0 0 .0625rem color-mix(in oklab,oklch(95% 0 0deg) 88%,var(--border)),0 .0625rem .1875rem #0000000f,0 .125rem .5rem #00000014}.z-tabs-container:is([data-type=pill-solid],[data-type=pill-blur],[data-type=pill-float],[data-type=pill-primary],[data-type=assistant]) .z-tabs-nav-surface{border-radius:9999px}.dark .z-tabs-nav-surface{box-shadow:0 0 0 .0625rem color-mix(in oklab,var(--border) 65%,transparent),0 .0625rem .1875rem #0000002e,0 .125rem .5rem #0000003d}.z-tab-item{-webkit-tap-highlight-color:transparent;position:relative}.z-tab-item[data-active=true]{position:relative}.z-tab-item:disabled{pointer-events:none}.z-tabs-panels{border:.0625rem solid var(--border);border-radius:var(--radius-xs);padding:1rem}.z-tabs-panels [role=tabpanel][data-state=inactive]{content-visibility:hidden}@supports not (content-visibility: hidden){.z-tabs-panels [role=tabpanel][data-state=inactive]{display:none}}.z-tabs-panels-unwrapped{border:0;border-radius:0;padding:0}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:0}.z-tabs-container[data-orientation=horizontal]{gap:0}.z-tabs-container[data-orientation=horizontal] .z-tabs-scroll-container{z-index:1}.z-tabs-container[data-orientation=horizontal] .z-tabs-panels{margin-top:0}.z-tabs-container[data-content-fit=screen]{height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));max-height:var(--z-tabs-screen-height, calc(100dvh - var(--z-tabs-screen-offset, 0rem)));min-height:0;overflow:hidden}.z-tabs-container[data-content-fit=screen] .z-tabs-nav{flex:none;min-height:0}.z-tabs-container[data-content-fit=screen] .z-tabs-panels{flex:1 1 auto;min-height:0;overflow:auto}.z-tabs-container[data-content-fit=screen] [role=tabpanel]{min-height:0}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs{isolation:isolate;position:relative}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs .z-tab-item[data-active=true]:after{z-index:1}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:color-mix(in oklab,var(--border) 80%,transparent);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-scroll-wrapper{padding-inline:0}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels{border-radius:0 0 var(--radius-xs) var(--radius-xs)}.z-tabs-container:is([data-type=outline],[data-type=soft],[data-type=segment],[data-type=folder],[data-type=folder-soft],[data-type=folder-solid],[data-type=underline],[data-type=underlined],[data-type=badge],[data-type=sharp],[data-type=sharp-line],[data-type=sharp-line-filled],[data-type=square],[data-type=code-line])[data-orientation=horizontal] .z-tabs-panels-unwrapped{border:0;border-radius:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav{position:relative}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-nav:after{content:\"\";position:absolute;right:0;bottom:0;left:0;height:.0625rem;background:var(--border);pointer-events:none;z-index:0}.z-tabs-container:is([data-type=folder],[data-type=folder-soft],[data-type=folder-solid])[data-orientation=horizontal] .z-tabs-panels{border-top:0}.z-tabs-container[data-type=folder-solid][data-orientation=horizontal] .z-tab-item[data-active=true][data-last=true]{box-shadow:inset .0625rem 0 0 var(--primary),inset -.0625rem 0 0 var(--border),inset 0 .0625rem 0 var(--primary)}.z-tabs-container:is([data-type=segment],[data-type=segment-solid],[data-type=pill-solid],[data-type=pill-blur],[data-type=pill-float]) .z-tabs{align-items:center}.z-tabs-container:is([data-type=pill-primary],[data-type=assistant],[data-type=bar])[data-orientation=horizontal] .z-tabs{align-items:center}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-nav{position:relative;gap:0}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-scroll-container{--z-tabs-fade-width: 2.75rem}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-nav-control{position:absolute;top:50%;z-index:2;width:1.5rem;min-width:1.5rem;height:1.5rem;min-height:1.5rem;padding:0;border-radius:9999px;transform:translateY(-50%);background:color-mix(in oklab,var(--muted) 90%,var(--background));color:var(--foreground)}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-nav-control:hover{background:color-mix(in oklab,var(--muted) 70%,var(--foreground) 12%)}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-nav-prev{left:0}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-nav-next{right:0}.z-tabs-container[data-type=pill-float][data-orientation=horizontal] .z-tabs-nav-menu{display:none}.z-tabs-glide-indicator{transition:none;transform-origin:0 0;opacity:0;will-change:transform}.z-tabs-glide-indicator[data-type=segment],.z-tabs-glide-indicator[data-type=segment-solid]{border-radius:var(--radius-sm);overflow:hidden;background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=pill-solid],.z-tabs-glide-indicator[data-type=pill-blur],.z-tabs-glide-indicator[data-type=pill-float],.z-tabs-glide-indicator[data-type=pill-primary]{border-radius:9999px;overflow:hidden}.z-tabs-glide-indicator:is([data-type=pill-float],[data-type=pill-primary]){background:var(--primary);box-shadow:0 .0625rem .1875rem #0000001a,0 .0625rem .125rem #00000014}.z-tabs-glide-indicator[data-type=assistant]{border-radius:var(--radius-sm);background:var(--primary);box-shadow:0 .0625rem .125rem #0000000d}.z-tabs-glide-indicator[data-type=bar]{border-radius:var(--radius-sm);background:color-mix(in oklab,var(--primary) 10%,transparent);box-shadow:inset 0 0 0 .0625rem var(--background),0 .0625rem .1875rem #0000001a,0 .0625rem .125rem -.0625rem #0000001a}.dark .z-tabs-glide-indicator[data-type=bar]{box-shadow:inset 0 0 0 .0625rem color-mix(in oklab,white 12%,transparent),0 .125rem .5rem #00000059,0 .0625rem .125rem #0003}.z-tabs-glide-indicator[data-type=underline-hover]{background:transparent}.z-tabs-glide-indicator:is([data-type=bar],[data-type=underline-hover]):before{content:\"\";position:absolute;background:var(--primary);border-radius:9999px}.z-tabs-glide-indicator[data-type=pill-solid]{background:var(--background);box-shadow:0 .0625rem .1875rem #00000014,0 .0625rem .125rem #0000000f}.z-tabs-glide-indicator[data-type=segment-solid]{background:var(--primary)}.z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 22%,transparent) 0%,color-mix(in oklab,white 6%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 55%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 25%,transparent),inset 0 .0625rem color-mix(in oklab,white 45%,transparent),0 .125rem .5rem #0000001a,0 .0625rem .125rem #0000000f;backdrop-filter:blur(.75rem) saturate(180%);-webkit-backdrop-filter:blur(.75rem) saturate(180%)}.dark .z-tabs-glide-indicator[data-type=pill-blur]{background:linear-gradient(to bottom,color-mix(in oklab,white 12%,transparent) 0%,color-mix(in oklab,white 3%,transparent) 45%,transparent 100%),color-mix(in oklab,var(--background) 45%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklab,white 10%,transparent),inset 0 .0625rem color-mix(in oklab,white 16%,transparent),0 .125rem .5rem #00000059,0 .0625rem .125rem #0003}.z-tabs-container[data-orientation=horizontal] .z-tabs-glide-indicator[data-type=bar]:before{right:25%;bottom:0;left:25%;height:.25rem;border-radius:9999px 9999px 0 0}.z-tabs-container[data-orientation=horizontal] .z-tabs-glide-indicator[data-type=underline-hover]:before{right:0;bottom:0;left:0;height:.125rem;border-radius:0}.z-tabs-container[data-orientation=vertical] .z-tabs-glide-indicator[data-type=bar]:before{inset:25% auto auto 0;width:.25rem;height:50%;border-radius:0 9999px 9999px 0}.z-tabs-container[data-orientation=vertical] .z-tabs-glide-indicator[data-type=underline-hover]:before{inset:0 0 auto auto;width:.125rem;height:100%;border-radius:0}.z-tabs-container:is([data-type=pill-primary],[data-type=assistant],[data-type=bar]) .z-tab-item:hover:not([data-active=true]):not(:disabled){background:color-mix(in oklab,var(--muted) 50%,transparent)}.z-tabs-container:is([data-type=pill-primary],[data-type=assistant],[data-type=underline-hover],[data-type=bar]) .z-tab-item:focus-visible{box-shadow:0 0 0 .1875rem color-mix(in oklab,var(--ring) 50%,transparent)!important}.z-tabs-hover-indicator{transform-origin:0 0;opacity:0;border-radius:var(--radius-sm);background:color-mix(in oklab,var(--muted) 70%,transparent);transition:transform .18s cubic-bezier(.22,1,.36,1),width .18s cubic-bezier(.22,1,.36,1),height .18s cubic-bezier(.22,1,.36,1),opacity .15s ease-out}.z-tabs-container[data-type=underline-hover] .z-tabs:after{content:\"\";position:absolute;background:color-mix(in oklab,var(--border) 80%,transparent);pointer-events:none;z-index:0}.z-tabs-container[data-type=underline-hover][data-orientation=horizontal] .z-tabs:after{right:0;bottom:0;left:0;height:.0625rem}.z-tabs-container[data-type=underline-hover][data-orientation=vertical] .z-tabs:after{top:0;right:0;bottom:0;width:.0625rem}.z-tabs-container[data-type=assistant][data-orientation=horizontal] .z-tab-item{transition:background-color .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),color .2s ease}.z-tabs-container[data-type=assistant][data-orientation=horizontal] .z-tab-item[data-active=true]{background:var(--primary);box-shadow:0 .0625rem .125rem #0000000d}.z-tabs-container[data-type=assistant][data-orientation=horizontal] .z-tab-item{gap:0}.z-tabs-container[data-type=assistant][data-orientation=horizontal] .z-tab-item.z-tab-item-has-icon .z-tab-item-label{flex:none;overflow:hidden;text-overflow:clip;margin-inline-start:.375rem;opacity:1;transition:width .3s cubic-bezier(.4,0,.2,1),margin-inline-start .3s cubic-bezier(.4,0,.2,1),opacity .2s ease-out}.z-tabs-container[data-type=assistant][data-orientation=horizontal] .z-tab-item.z-tab-item-has-icon[data-active=false] .z-tab-item-label{margin-inline-start:0;opacity:0}@keyframes z-tab-icon-bounce{0%{transform:scale(1)}35%{transform:scale(.97)}to{transform:scale(1)}}.z-tab-icon-bounce{animation:z-tab-icon-bounce .32s cubic-bezier(.34,1.56,.64,1)}.z-tabs-container[data-orientation=vertical] .z-tabs-nav{align-items:stretch}.z-tabs-container[data-orientation=vertical] .z-tabs-scroll-container{width:min(12rem,40vw);flex:none}.z-tabs-container[data-orientation=vertical] .z-tabs-panels,.z-tabs-container[data-orientation=vertical] .z-tab-item{min-width:0}@media(prefers-reduced-motion:reduce){.z-tab-item,.z-tabs-nav-control,.z-tabs-hover-indicator,.z-tabs-container[data-type=assistant] .z-tab-item,.z-tabs-container[data-type=assistant] .z-tab-item-label{transition:none!important}.z-tabs-scroll-wrapper{scroll-behavior:auto}.z-tab-icon-bounce{animation:none!important}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tabPanels: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ZTabPanelDirective), { isSignal: true }] }], tabsListContainer: [{ type: i0.ViewChild, args: ['tabsListContainer', { isSignal: true }] }], tabButtons: [{ type: i0.ViewChildren, args: ['tabButton', { isSignal: true }] }], glideIndicator: [{ type: i0.ViewChild, args: ['glideIndicator', { isSignal: true }] }], hoverIndicator: [{ type: i0.ViewChild, args: ['hoverIndicator', { isSignal: true }] }], tabsList: [{ type: i0.ViewChild, args: ['tabsList', { isSignal: true }] }], panelsHost: [{ type: i0.ViewChild, args: ['panelsHost', { isSignal: true }] }], panelHost: [{ type: i0.ViewChild, args: ['panelHost', { ...{ read: ViewContainerRef }, isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zTabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabs", required: true }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOrientation", required: false }] }], zContentFit: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentFit", required: false }] }], zContentAnimation: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentAnimation", required: false }] }], zLazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLazy", required: false }] }], zTabsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabsOnly", required: false }] }], zShowNavWrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowNavWrapper", required: false }] }], zNavFullWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zNavFullWidth", required: false }] }], zClassContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "zClassContent", required: false }] }], zShowContentWrapper: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowContentWrapper", required: false }] }], zReloadable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReloadable", required: false }] }], zEmitOnActiveClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "zEmitOnActiveClick", required: false }] }], zCache: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCache", required: false }] }], zCacheKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCacheKey", required: false }] }], zWithDropdown: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWithDropdown", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], zTabChange: [{ type: i0.Output, args: ["zTabChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZTabPanelDirective, ZTabsComponent, zTabItemVariants, zTabsVariants };
+//# sourceMappingURL=shival99-z-ui-components-z-tabs.mjs.map