import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { input, inject, TemplateRef, Directive, contentChildren, viewChild, viewChildren, model, output, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
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(...(ngDevMode ? [{ debugName: "zTabPanel" }] : []));
    template = inject((TemplateRef));
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZTabPanelDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", 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: "21.0.9", 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 }] }] } });

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: 'gap-1 rounded-lg bg-muted/60 p-1 dark:bg-muted/35',
            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',
            '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: '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-md 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: 'rounded-md border-0 text-muted-foreground hover:text-foreground data-[active=true]:bg-background data-[active=true]:text-primary data-[active=true]:shadow-sm',
            folder: 'rounded-t-md 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-md 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-md 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 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 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',
            '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 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-md 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-md data-[active=true]:bg-background data-[active=true]:shadow-xs',
        },
        {
            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: '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',
    },
});

let zTabsInstanceId = 0;
const Z_TABS_SCROLL_TOLERANCE = 4;
class ZTabsComponent {
    tabPanels = contentChildren(ZTabPanelDirective, ...(ngDevMode ? [{ debugName: "tabPanels" }] : []));
    tabsListContainer = viewChild('tabsListContainer', ...(ngDevMode ? [{ debugName: "tabsListContainer" }] : []));
    tabButtons = viewChildren('tabButton', ...(ngDevMode ? [{ debugName: "tabButtons" }] : []));
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    zTabs = input.required(...(ngDevMode ? [{ debugName: "zTabs" }] : []));
    zType = input('line', ...(ngDevMode ? [{ debugName: "zType" }] : []));
    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
    zOrientation = input('horizontal', ...(ngDevMode ? [{ debugName: "zOrientation" }] : []));
    zLazy = input(false, ...(ngDevMode ? [{ debugName: "zLazy" }] : []));
    zDestroyInactive = input(false, ...(ngDevMode ? [{ debugName: "zDestroyInactive" }] : []));
    zTabsOnly = input(false, ...(ngDevMode ? [{ debugName: "zTabsOnly" }] : []));
    zShowContentWrapper = input(true, ...(ngDevMode ? [{ debugName: "zShowContentWrapper" }] : []));
    zReloadable = input(true, ...(ngDevMode ? [{ debugName: "zReloadable" }] : []));
    zEmitOnActiveClick = input(true, ...(ngDevMode ? [{ debugName: "zEmitOnActiveClick" }] : []));
    zCache = input(true, ...(ngDevMode ? [{ debugName: "zCache" }] : []));
    zCacheKey = input('', ...(ngDevMode ? [{ debugName: "zCacheKey" }] : []));
    activeTab = model('', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
    zTabChange = output();
    loadedTabs = signal(new Set(), ...(ngDevMode ? [{ debugName: "loadedTabs" }] : []));
    canScrollLeft = signal(false, ...(ngDevMode ? [{ debugName: "canScrollLeft" }] : []));
    canScrollRight = signal(false, ...(ngDevMode ? [{ debugName: "canScrollRight" }] : []));
    panelRenderStates = computed(() => new Map(this.tabPanels().map(panel => {
        const tabValue = panel.zTabPanel();
        if (this.zDestroyInactive()) {
            return [tabValue, this.activeTab() === tabValue];
        }
        if (!this.zLazy()) {
            return [tabValue, true];
        }
        return [tabValue, this.loadedTabs().has(tabValue) || this.activeTab() === tabValue];
    })), ...(ngDevMode ? [{ debugName: "panelRenderStates" }] : []));
    _resizeObserver;
    _cacheInstanceId = ++zTabsInstanceId;
    constructor() {
        effect(() => {
            this.zTabs();
            requestAnimationFrame(() => this.checkScroll());
        });
    }
    ngOnInit() {
        this._restoreActiveTabFromCache();
    }
    ngAfterViewInit() {
        this.checkScroll();
        this._setupResizeObserver();
    }
    ngOnDestroy() {
        this._resizeObserver?.disconnect();
    }
    tabsClasses = computed(() => zMergeClasses(zTabsVariants({
        zType: this.zType(),
        zOrientation: this.zOrientation(),
    }), this.class()), ...(ngDevMode ? [{ debugName: "tabsClasses" }] : []));
    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 === 'code-line');
    }, ...(ngDevMode ? [{ debugName: "contentWrapperFramed" }] : []));
    tabsListHasBottomPadding = computed(() => {
        if (this.zOrientation() !== 'horizontal') {
            return false;
        }
        const type = this.zType();
        return (type !== 'folder' &&
            type !== 'folder-soft' &&
            type !== 'folder-solid' &&
            type !== 'segment' &&
            type !== 'sharp' &&
            type !== 'sharp-line' &&
            type !== 'sharp-line-filled' &&
            type !== 'code-line');
    }, ...(ngDevMode ? [{ debugName: "tabsListHasBottomPadding" }] : []));
    verticalTabsScrollable = computed(() => this.zOrientation() === 'vertical' && this.zTabs().length > 8, ...(ngDevMode ? [{ debugName: "verticalTabsScrollable" }] : []));
    getTabItemClasses(_tab) {
        return zMergeClasses(zTabItemVariants({
            zType: this.zType(),
            zSize: this.zSize(),
            zOrientation: this.zOrientation(),
        }));
    }
    selectTab(tab, scrollToView = false) {
        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 (!isAlreadyActive || this.zEmitOnActiveClick()) {
            this.zTabChange.emit(tab.value);
        }
        if (this.zLazy()) {
            this.loadedTabs.update(tabs => {
                const newTabs = new Set(tabs);
                newTabs.add(tab.value);
                return newTabs;
            });
        }
        if (scrollToView && this.zOrientation() === 'horizontal') {
            requestAnimationFrame(() => {
                const tabIndex = this.zTabs().findIndex(t => t.value === tab.value);
                const tabButtonsList = this.tabButtons();
                const tabButton = tabButtonsList[tabIndex];
                if (tabButton) {
                    tabButton.nativeElement.scrollIntoView({
                        behavior: 'smooth',
                        block: 'nearest',
                        inline: 'center',
                    });
                }
            });
        }
    }
    isTabActive(tab) {
        return this.activeTab() === tab.value;
    }
    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]);
        }
    }
    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() {
        this.checkScroll();
    }
    _setupResizeObserver() {
        const container = this.tabsListContainer()?.nativeElement;
        if (!container) {
            return;
        }
        this._resizeObserver = new ResizeObserver(() => {
            this.checkScroll();
        });
        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);
        if (this.zLazy()) {
            this.loadedTabs.update(tabs => {
                const newTabs = new Set(tabs);
                newTabs.add(tab.value);
                return newTabs;
            });
        }
    }
    _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: "21.0.9", ngImport: i0, type: ZTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", 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 }, zLazy: { classPropertyName: "zLazy", publicName: "zLazy", isSignal: true, isRequired: false, transformFunction: null }, zDestroyInactive: { classPropertyName: "zDestroyInactive", publicName: "zDestroyInactive", isSignal: true, isRequired: false, transformFunction: null }, zTabsOnly: { classPropertyName: "zTabsOnly", publicName: "zTabsOnly", 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 }, 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 }], ngImport: i0, template: "<div\n  class=\"z-tabs-container flex gap-1\"\n  [attr.data-type]=\"zType()\"\n  [attr.data-orientation]=\"zOrientation()\"\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=\"z-tabs-nav flex items-center gap-1.5\"\n    [class.w-full]=\"zOrientation() === 'horizontal'\"\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 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 class=\"z-tabs-scroll-container relative min-w-0 flex-1\" [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          (scroll)=\"onTabsScroll()\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </div>\n      }\n\n      <!-- Fade overlays (outside scroll container) -->\n      @if (canScrollLeft() && zOrientation() === 'horizontal') {\n        <div class=\"z-tabs-fade-left\"></div>\n      }\n      @if (canScrollRight() && zOrientation() === 'horizontal') {\n        <div class=\"z-tabs-fade-right\"></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 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 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      [class]=\"tabsClasses()\"\n      [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n      role=\"tablist\"\n      [attr.aria-orientation]=\"zOrientation()\"\n      [attr.data-type]=\"zType()\">\n      @for (tab of zTabs(); track tab.value; let idx = $index; let last = $last) {\n        <button\n          #tabButton\n          type=\"button\"\n          role=\"tab\"\n          [class]=\"getTabItemClasses(tab)\"\n          [attr.data-active]=\"isTabActive(tab)\"\n          [attr.data-state]=\"isTabActive(tab) ? 'active' : 'inactive'\"\n          [attr.data-type]=\"zType()\"\n          [attr.data-orientation]=\"zOrientation()\"\n          [attr.data-last]=\"last\"\n          [attr.aria-selected]=\"isTabActive(tab)\"\n          [attr.aria-controls]=\"'panel-' + tab.value\"\n          [disabled]=\"tab.disabled\"\n          [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n          z-tooltip\n          [zContent]=\"zOrientation() === 'vertical' ? (tab.label | translate) : ''\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          (click)=\"selectTab(tab)\"\n          (keydown)=\"onTabKeydown($event, idx)\">\n          @if (tab.icon) {\n            <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"shrink-0\" />\n          }\n          <span class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\">{{ tab.label | translate }}</span>\n          @if (tab.badge) {\n            <span\n              class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full 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              {{ tab.badge }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div\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      @for (panel of tabPanels(); track panel.zTabPanel()) {\n        @if (panelRenderStates().get(panel.zTabPanel())) {\n          <div\n            role=\"tabpanel\"\n            [id]=\"'panel-' + panel.zTabPanel()\"\n            [attr.aria-labelledby]=\"panel.zTabPanel()\"\n            [hidden]=\"activeTab() !== panel.zTabPanel()\">\n            <ng-container *ngTemplateOutlet=\"panel.template\" />\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] max-w-[12.5rem] min-w-[6.25rem] flex-col gap-0.5 overflow-y-auto p-1\">\n    @for (tab of zTabs(); track tab.value) {\n      <button\n        #dropdownItem\n        type=\"button\"\n        class=\"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        [class.hover:text-foreground]=\"!isTabActive(tab)\"\n        [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n        [class.bg-primary/15]=\"isTabActive(tab)\"\n        [class.text-primary]=\"isTabActive(tab)\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab(tab, true); close()\">\n        @if (tab.icon) {\n          <z-icon [zType]=\"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]=\"tab.label | translate\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          [zTriggerElement]=\"dropdownItem\">\n          {{ tab.label | translate }}\n        </span>\n        @if (tab.badge) {\n          <span\n            class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n            {{ tab.badge }}\n          </span>\n        }\n        @if (isTabActive(tab)) {\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:clip;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{max-height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.vertical.z-tabs-scroll-wrapper-limited{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-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-fade-left{content:\"\";position:absolute;left:0;top:.0625rem;bottom:.0625rem;width:var(--z-tabs-fade-width);background:linear-gradient(to right,var(--background) 0%,oklch(from var(--background) l c h/.86) 28%,oklch(from var(--background) l c h/.48) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:5}.z-tabs-fade-right{content:\"\";position:absolute;right:0;top:.0625rem;bottom:.0625rem;width:var(--z-tabs-fade-width);background:linear-gradient(to left,var(--background) 0%,oklch(from var(--background) l c h/.86) 28%,oklch(from var(--background) l c h/.48) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:5}.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-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]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{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-type=line][data-orientation=horizontal] .z-tabs-nav{position:relative}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs-nav: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=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=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=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[data-type=segment] .z-tabs{align-items:center}.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{transition:none!important}.z-tabs-scroll-wrapper{scroll-behavior:auto}.z-tabs-panels [role=tabpanel]{animation:none!important}}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-.2rem)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { 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", "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", "zShowArrow"], 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: "21.0.9", ngImport: i0, type: ZTabsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'z-tabs', imports: [
                        ZIconComponent,
                        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  [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=\"z-tabs-nav flex items-center gap-1.5\"\n    [class.w-full]=\"zOrientation() === 'horizontal'\"\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 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 class=\"z-tabs-scroll-container relative min-w-0 flex-1\" [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          (scroll)=\"onTabsScroll()\">\n          <ng-container *ngTemplateOutlet=\"tabsListTpl\" />\n        </div>\n      }\n\n      <!-- Fade overlays (outside scroll container) -->\n      @if (canScrollLeft() && zOrientation() === 'horizontal') {\n        <div class=\"z-tabs-fade-left\"></div>\n      }\n      @if (canScrollRight() && zOrientation() === 'horizontal') {\n        <div class=\"z-tabs-fade-right\"></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 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 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      [class]=\"tabsClasses()\"\n      [class.pb-0.5]=\"tabsListHasBottomPadding()\"\n      role=\"tablist\"\n      [attr.aria-orientation]=\"zOrientation()\"\n      [attr.data-type]=\"zType()\">\n      @for (tab of zTabs(); track tab.value; let idx = $index; let last = $last) {\n        <button\n          #tabButton\n          type=\"button\"\n          role=\"tab\"\n          [class]=\"getTabItemClasses(tab)\"\n          [attr.data-active]=\"isTabActive(tab)\"\n          [attr.data-state]=\"isTabActive(tab) ? 'active' : 'inactive'\"\n          [attr.data-type]=\"zType()\"\n          [attr.data-orientation]=\"zOrientation()\"\n          [attr.data-last]=\"last\"\n          [attr.aria-selected]=\"isTabActive(tab)\"\n          [attr.aria-controls]=\"'panel-' + tab.value\"\n          [disabled]=\"tab.disabled\"\n          [tabindex]=\"isTabActive(tab) ? 0 : -1\"\n          z-tooltip\n          [zContent]=\"zOrientation() === 'vertical' ? (tab.label | translate) : ''\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          (click)=\"selectTab(tab)\"\n          (keydown)=\"onTabKeydown($event, idx)\">\n          @if (tab.icon) {\n            <z-icon [zType]=\"tab.icon\" zSize=\"16\" class=\"shrink-0\" />\n          }\n          <span class=\"z-tab-item-label min-w-0 flex-1 truncate text-left\">{{ tab.label | translate }}</span>\n          @if (tab.badge) {\n            <span\n              class=\"ring-background ml-1.5 inline-flex h-5 min-w-5 items-center justify-center rounded-full 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              {{ tab.badge }}\n            </span>\n          }\n        </button>\n      }\n    </div>\n  </ng-template>\n\n  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div\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      @for (panel of tabPanels(); track panel.zTabPanel()) {\n        @if (panelRenderStates().get(panel.zTabPanel())) {\n          <div\n            role=\"tabpanel\"\n            [id]=\"'panel-' + panel.zTabPanel()\"\n            [attr.aria-labelledby]=\"panel.zTabPanel()\"\n            [hidden]=\"activeTab() !== panel.zTabPanel()\">\n            <ng-container *ngTemplateOutlet=\"panel.template\" />\n          </div>\n        }\n      }\n    </div>\n  }\n</div>\n\n<!-- Dropdown Menu Template -->\n<ng-template #dropdownTpl let-close=\"close\">\n  <div\n    class=\"z-tabs-dropdown-menu flex max-h-[18.75rem] max-w-[12.5rem] min-w-[6.25rem] flex-col gap-0.5 overflow-y-auto p-1\">\n    @for (tab of zTabs(); track tab.value) {\n      <button\n        #dropdownItem\n        type=\"button\"\n        class=\"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        [class.hover:text-foreground]=\"!isTabActive(tab)\"\n        [class.focus:bg-primary/10]=\"!isTabActive(tab)\"\n        [class.bg-primary/15]=\"isTabActive(tab)\"\n        [class.text-primary]=\"isTabActive(tab)\"\n        [disabled]=\"tab.disabled\"\n        (click)=\"selectTab(tab, true); close()\">\n        @if (tab.icon) {\n          <z-icon [zType]=\"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]=\"tab.label | translate\"\n          zPosition=\"top\"\n          [zHideDelay]=\"0\"\n          [zOffset]=\"5\"\n          [zArrow]=\"false\"\n          [zTriggerElement]=\"dropdownItem\">\n          {{ tab.label | translate }}\n        </span>\n        @if (tab.badge) {\n          <span\n            class=\"bg-primary text-primary-foreground inline-flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-xs font-semibold\">\n            {{ tab.badge }}\n          </span>\n        }\n        @if (isTabActive(tab)) {\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:clip;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{max-height:var(--z-tabs-vertical-max-height, min(22rem, 60vh));overflow:hidden auto}.z-tabs-scroll-wrapper.vertical.z-tabs-scroll-wrapper-limited{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-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-fade-left{content:\"\";position:absolute;left:0;top:.0625rem;bottom:.0625rem;width:var(--z-tabs-fade-width);background:linear-gradient(to right,var(--background) 0%,oklch(from var(--background) l c h/.86) 28%,oklch(from var(--background) l c h/.48) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:5}.z-tabs-fade-right{content:\"\";position:absolute;right:0;top:.0625rem;bottom:.0625rem;width:var(--z-tabs-fade-width);background:linear-gradient(to left,var(--background) 0%,oklch(from var(--background) l c h/.86) 28%,oklch(from var(--background) l c h/.48) 60%,oklch(from var(--background) l c h/0) 100%);pointer-events:none;z-index:5}.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-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]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{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-type=line][data-orientation=horizontal] .z-tabs-nav{position:relative}.z-tabs-container[data-type=line][data-orientation=horizontal] .z-tabs-nav: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=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=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=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[data-type=segment] .z-tabs{align-items:center}.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{transition:none!important}.z-tabs-scroll-wrapper{scroll-behavior:auto}.z-tabs-panels [role=tabpanel]{animation:none!important}}@keyframes z-tabs-fade-in{0%{opacity:0;transform:translateY(-.2rem)}to{opacity:1;transform:translateY(0)}}\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 }] }], 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 }] }], zLazy: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLazy", required: false }] }], zDestroyInactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDestroyInactive", required: false }] }], zTabsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabsOnly", 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 }] }], 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
