@shival99/z-ui 1.9.13 → 1.9.15

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

@@ -34,6 +34,7 @@ const zTabsVariants = cva('z-tabs flex min-w-0', {
             pill: 'gap-1',
             solid: 'gap-1 rounded-sm border border-border/70 bg-muted/20 p-1',
             underline: 'gap-1 border-b border-border/70',
+            'code-line': 'h-10 w-full justify-start gap-0 rounded-none border-b border-border bg-background p-0',
         },
         zOrientation: {
             horizontal: 'w-max min-w-full flex-row items-center',
@@ -55,6 +56,7 @@ const zTabItemVariants = cva('z-tab-item relative inline-flex min-h-10 select-no
             pill: 'rounded-full border border-transparent hover:border-border/70 hover:bg-muted/70 hover:text-foreground data-[active=true]:border-primary/25 data-[active=true]:bg-primary/10 data-[active=true]:text-primary',
             solid: 'rounded-sm border border-transparent bg-transparent hover:border-border/70 hover:bg-muted/60 hover:text-foreground data-[active=true]:border-primary/20 data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-sm',
             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.125rem] after:bg-primary after:origin-center after:scale-x-0 after:transition-transform after:duration-200 data-[active=true]:after:scale-x-100',
+            '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/80 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: {
             sm: 'min-h-9 px-3 py-1.5 text-sm',
@@ -77,6 +79,29 @@ const zTabItemVariants = cva('z-tab-item relative inline-flex min-h-10 select-no
             zOrientation: 'vertical',
             class: 'after:hidden border-b-0 border-l-2 data-[active=true]:border-l-primary',
         },
+        {
+            zType: 'code-line',
+            zSize: 'sm',
+            zOrientation: 'horizontal',
+            class: 'min-h-8 px-4 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-8 px-4 py-1.5 text-sm',
+        },
+        {
+            zType: 'code-line',
+            zOrientation: 'vertical',
+            class: 'h-auto flex-none justify-start rounded-md border border-border/45 px-3 py-2 text-foreground/80 hover:text-foreground data-[active=true]:border-primary/70 data-[active=true]:bg-primary/10 data-[active=true]:text-primary',
+        },
         {
             zType: 'enclosed',
             zOrientation: 'vertical',
@@ -273,13 +298,13 @@ class ZTabsComponent {
         }, 150);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, zLazy: { classPropertyName: "zLazy", publicName: "zLazy", isSignal: true, isRequired: false, transformFunction: null }, zTabsOnly: { classPropertyName: "zTabsOnly", publicName: "zTabsOnly", isSignal: true, isRequired: false, transformFunction: null }, zReloadable: { classPropertyName: "zReloadable", publicName: "zReloadable", 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-3 md:gap-4\"\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 class=\"z-tabs-nav flex w-full items-center gap-1.5\">\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      <div\n        #tabsListContainer\n        class=\"z-tabs-scroll-wrapper px-0.5\"\n        [class.vertical]=\"zOrientation() === 'vertical'\"\n        (scroll)=\"onTabsScroll()\">\n        <!-- Tab List -->\n        <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\" [attr.data-type]=\"zType()\">\n          @for (tab of zTabs(); track tab.value; let idx = $index) {\n            <button\n              #tabButton\n              type=\"button\"\n              role=\"tab\"\n              [class]=\"getTabItemClasses(tab)\"\n              [attr.data-active]=\"isTabActive(tab)\"\n              [attr.data-type]=\"zType()\"\n              [attr.data-orientation]=\"zOrientation()\"\n              [attr.aria-selected]=\"isTabActive(tab)\"\n              [attr.aria-controls]=\"'panel-' + tab.value\"\n              [disabled]=\"tab.disabled\"\n              [tabindex]=\"isTabActive(tab) ? 0 : -1\"\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 truncate\">{{ tab.label | translate }}</span>\n              @if (tab.badge) {\n                <span\n                  class=\"bg-primary text-primary-foreground 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                  {{ tab.badge }}\n                </span>\n              }\n            </button>\n          }\n        </div>\n      </div>\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  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n      @for (panel of tabPanels(); track panel.zTabPanel()) {\n        @if (shouldRenderPanel(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:bg-primary/10]=\"!isTabActive(tab)\"\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:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow-x:hidden;overflow-y:auto}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-scroll-container[data-type=soft],.z-tabs-scroll-container[data-type=solid]{--z-tabs-fade-width: 1.25rem}.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-scroll-container[data-type=soft] .z-tabs-fade-left,.z-tabs-scroll-container[data-type=solid] .z-tabs-fade-left{background:linear-gradient(to right,oklch(from var(--background) l c h/.94),oklch(from var(--background) l c h/.74) 32%,oklch(from var(--background) l c h/.34) 62%,oklch(from var(--background) l c h/0))}.z-tabs-scroll-container[data-type=soft] .z-tabs-fade-right,.z-tabs-scroll-container[data-type=solid] .z-tabs-fade-right{background:linear-gradient(to left,oklch(from var(--background) l c h/.94),oklch(from var(--background) l c h/.74) 32%,oklch(from var(--background) l c h/.34) 62%,oklch(from var(--background) l c h/0))}.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 [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs[data-type=soft]+.z-tabs-panels,.z-tabs-wrapper .z-tabs[data-type=solid]+.z-tabs-panels{margin-top:.75rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:1rem}@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", "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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "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", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.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 }, zLazy: { classPropertyName: "zLazy", publicName: "zLazy", isSignal: true, isRequired: false, transformFunction: null }, zTabsOnly: { classPropertyName: "zTabsOnly", publicName: "zTabsOnly", isSignal: true, isRequired: false, transformFunction: null }, zReloadable: { classPropertyName: "zReloadable", publicName: "zReloadable", 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-3 md:gap-4\"\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 class=\"z-tabs-nav flex w-full items-center gap-1.5\">\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      <div\n        #tabsListContainer\n        class=\"z-tabs-scroll-wrapper px-0.5\"\n        [class.vertical]=\"zOrientation() === 'vertical'\"\n        (scroll)=\"onTabsScroll()\">\n        <!-- Tab List -->\n        <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\" [attr.data-type]=\"zType()\">\n          @for (tab of zTabs(); track tab.value; let idx = $index) {\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.aria-selected]=\"isTabActive(tab)\"\n              [attr.aria-controls]=\"'panel-' + tab.value\"\n              [disabled]=\"tab.disabled\"\n              [tabindex]=\"isTabActive(tab) ? 0 : -1\"\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 truncate\">{{ tab.label | translate }}</span>\n              @if (tab.badge) {\n                <span\n                  class=\"bg-primary text-primary-foreground 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                  {{ tab.badge }}\n                </span>\n              }\n            </button>\n          }\n        </div>\n      </div>\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  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n      @for (panel of tabPanels(); track panel.zTabPanel()) {\n        @if (shouldRenderPanel(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:bg-primary/10]=\"!isTabActive(tab)\"\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:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow-x:hidden;overflow-y:auto}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-scroll-container[data-type=soft],.z-tabs-scroll-container[data-type=solid]{--z-tabs-fade-width: 1.25rem}.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-scroll-container[data-type=soft] .z-tabs-fade-left,.z-tabs-scroll-container[data-type=solid] .z-tabs-fade-left{background:linear-gradient(to right,oklch(from var(--background) l c h/.94),oklch(from var(--background) l c h/.74) 32%,oklch(from var(--background) l c h/.34) 62%,oklch(from var(--background) l c h/0))}.z-tabs-scroll-container[data-type=soft] .z-tabs-fade-right,.z-tabs-scroll-container[data-type=solid] .z-tabs-fade-right{background:linear-gradient(to left,oklch(from var(--background) l c h/.94),oklch(from var(--background) l c h/.74) 32%,oklch(from var(--background) l c h/.34) 62%,oklch(from var(--background) l c h/0))}.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 [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs[data-type=soft]+.z-tabs-panels,.z-tabs-wrapper .z-tabs[data-type=solid]+.z-tabs-panels{margin-top:.75rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:1rem}@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", "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", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "directive", type: ZTooltipDirective, selector: "[z-tooltip], [zTooltip]", inputs: ["zContent", "zPosition", "zTrigger", "zTooltipType", "zTooltipSize", "zClass", "zShowDelay", "zHideDelay", "zArrow", "zDisabled", "zOffset", "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", "zClass", "zShowDelay", "zHideDelay", "zDisabled", "zOffset", "zPopoverWidth", "zManualClose", "zScrollClose", "zShowArrow"], outputs: ["zShow", "zHide", "zHideStart", "zControl", "zPositionChange"], exportAs: ["zPopover"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-tabs', imports: [ZIconComponent, ZButtonComponent, ZTooltipDirective, NgTemplateOutlet, ZPopoverDirective, TranslatePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'z-tabs-wrapper block',
-                    }, template: "<div\n  class=\"z-tabs-container flex gap-3 md:gap-4\"\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 class=\"z-tabs-nav flex w-full items-center gap-1.5\">\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      <div\n        #tabsListContainer\n        class=\"z-tabs-scroll-wrapper px-0.5\"\n        [class.vertical]=\"zOrientation() === 'vertical'\"\n        (scroll)=\"onTabsScroll()\">\n        <!-- Tab List -->\n        <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\" [attr.data-type]=\"zType()\">\n          @for (tab of zTabs(); track tab.value; let idx = $index) {\n            <button\n              #tabButton\n              type=\"button\"\n              role=\"tab\"\n              [class]=\"getTabItemClasses(tab)\"\n              [attr.data-active]=\"isTabActive(tab)\"\n              [attr.data-type]=\"zType()\"\n              [attr.data-orientation]=\"zOrientation()\"\n              [attr.aria-selected]=\"isTabActive(tab)\"\n              [attr.aria-controls]=\"'panel-' + tab.value\"\n              [disabled]=\"tab.disabled\"\n              [tabindex]=\"isTabActive(tab) ? 0 : -1\"\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 truncate\">{{ tab.label | translate }}</span>\n              @if (tab.badge) {\n                <span\n                  class=\"bg-primary text-primary-foreground 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                  {{ tab.badge }}\n                </span>\n              }\n            </button>\n          }\n        </div>\n      </div>\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  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n      @for (panel of tabPanels(); track panel.zTabPanel()) {\n        @if (shouldRenderPanel(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:bg-primary/10]=\"!isTabActive(tab)\"\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:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow-x:hidden;overflow-y:auto}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-scroll-container[data-type=soft],.z-tabs-scroll-container[data-type=solid]{--z-tabs-fade-width: 1.25rem}.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-scroll-container[data-type=soft] .z-tabs-fade-left,.z-tabs-scroll-container[data-type=solid] .z-tabs-fade-left{background:linear-gradient(to right,oklch(from var(--background) l c h/.94),oklch(from var(--background) l c h/.74) 32%,oklch(from var(--background) l c h/.34) 62%,oklch(from var(--background) l c h/0))}.z-tabs-scroll-container[data-type=soft] .z-tabs-fade-right,.z-tabs-scroll-container[data-type=solid] .z-tabs-fade-right{background:linear-gradient(to left,oklch(from var(--background) l c h/.94),oklch(from var(--background) l c h/.74) 32%,oklch(from var(--background) l c h/.34) 62%,oklch(from var(--background) l c h/0))}.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 [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs[data-type=soft]+.z-tabs-panels,.z-tabs-wrapper .z-tabs[data-type=solid]+.z-tabs-panels{margin-top:.75rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:1rem}@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"] }]
+                    }, template: "<div\n  class=\"z-tabs-container flex gap-3 md:gap-4\"\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 class=\"z-tabs-nav flex w-full items-center gap-1.5\">\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      <div\n        #tabsListContainer\n        class=\"z-tabs-scroll-wrapper px-0.5\"\n        [class.vertical]=\"zOrientation() === 'vertical'\"\n        (scroll)=\"onTabsScroll()\">\n        <!-- Tab List -->\n        <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\" [attr.data-type]=\"zType()\">\n          @for (tab of zTabs(); track tab.value; let idx = $index) {\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.aria-selected]=\"isTabActive(tab)\"\n              [attr.aria-controls]=\"'panel-' + tab.value\"\n              [disabled]=\"tab.disabled\"\n              [tabindex]=\"isTabActive(tab) ? 0 : -1\"\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 truncate\">{{ tab.label | translate }}</span>\n              @if (tab.badge) {\n                <span\n                  class=\"bg-primary text-primary-foreground 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                  {{ tab.badge }}\n                </span>\n              }\n            </button>\n          }\n        </div>\n      </div>\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  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n      @for (panel of tabPanels(); track panel.zTabPanel()) {\n        @if (shouldRenderPanel(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:bg-primary/10]=\"!isTabActive(tab)\"\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:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.z-tabs-scroll-wrapper::-webkit-scrollbar{display:none}.z-tabs-scroll-wrapper.vertical{overflow-x:hidden;overflow-y:auto}.z-tabs-scroll-container{isolation:isolate;--z-tabs-fade-width: 2rem}.z-tabs-scroll-container[data-type=soft],.z-tabs-scroll-container[data-type=solid]{--z-tabs-fade-width: 1.25rem}.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-scroll-container[data-type=soft] .z-tabs-fade-left,.z-tabs-scroll-container[data-type=solid] .z-tabs-fade-left{background:linear-gradient(to right,oklch(from var(--background) l c h/.94),oklch(from var(--background) l c h/.74) 32%,oklch(from var(--background) l c h/.34) 62%,oklch(from var(--background) l c h/0))}.z-tabs-scroll-container[data-type=soft] .z-tabs-fade-right,.z-tabs-scroll-container[data-type=solid] .z-tabs-fade-right{background:linear-gradient(to left,oklch(from var(--background) l c h/.94),oklch(from var(--background) l c h/.74) 32%,oklch(from var(--background) l c h/.34) 62%,oklch(from var(--background) l c h/0))}.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 [role=tabpanel]{animation:z-tabs-fade-in .2s ease-in-out}.z-tabs-panels [role=tabpanel][hidden]{display:none}.z-tabs-wrapper .z-tabs.flex-row+.z-tabs-panels{margin-top:.875rem}.z-tabs-wrapper .z-tabs[data-type=soft]+.z-tabs-panels,.z-tabs-wrapper .z-tabs[data-type=solid]+.z-tabs-panels{margin-top:.75rem}.z-tabs-wrapper .z-tabs.flex-col+.z-tabs-panels{margin-top:0;margin-left:1rem}@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 }] }], zTabsOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTabsOnly", required: false }] }], zReloadable: [{ type: i0.Input, args: [{ isSignal: true, alias: "zReloadable", required: false }] }], activeTab: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeTab", required: false }] }, { type: i0.Output, args: ["activeTabChange"] }], zTabChange: [{ type: i0.Output, args: ["zTabChange"] }] } });
 
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"shival99-z-ui-components-z-tabs.mjs","sources":["../../../../libs/core-ui/components/z-tabs/directives/z-tab-panel.directive.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.variants.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.component.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.component.html","../../../../libs/core-ui/components/z-tabs/shival99-z-ui-components-z-tabs.ts"],"sourcesContent":["import { Directive, inject, input, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[z-tab-panel], [zTabPanel]',\n  standalone: true,\n  exportAs: 'zTabPanel',\n})\nexport class ZTabPanelDirective {\n  public readonly zTabPanel = input.required<string>();\n  public readonly template = inject(TemplateRef<unknown>);\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zTabsVariants = cva('z-tabs flex min-w-0', {\n  variants: {\n    zType: {\n      line: 'gap-1 border-b border-border/80',\n      enclosed: 'gap-1 border-b border-border/80',\n      'enclosed-solid': 'gap-1 border-b border-border/80',\n      soft: 'gap-1 rounded-sm border border-border/60 bg-muted/35 p-1',\n      pill: 'gap-1',\n      solid: 'gap-1 rounded-sm border border-border/70 bg-muted/20 p-1',\n      underline: 'gap-1 border-b border-border/70',\n    },\n    zOrientation: {\n      horizontal: 'w-max min-w-full flex-row items-center',\n      vertical: 'w-full flex-col items-stretch gap-1 border-r border-b-0 pr-2',\n    },\n  },\n  defaultVariants: {\n    zType: 'line',\n    zOrientation: 'horizontal',\n  },\n});\n\nexport const zTabItemVariants = cva(\n  '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:z-[2] focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-offset-2 focus-visible:ring-offset-background cursor-pointer disabled:opacity-45 disabled:cursor-not-allowed',\n  {\n    variants: {\n      zType: {\n        line: 'hover:text-foreground data-[active=true]:text-foreground after:pointer-events-none after:absolute after:inset-x-2 after:bottom-[-1px] after:h-0.5 after:bg-primary after:origin-center after:scale-x-0 after:transition-transform after:duration-200 data-[active=true]:after:scale-x-100',\n        enclosed:\n          '-mb-px rounded-t-[3px] border border-b-0 border-transparent bg-transparent hover:border-border/80 hover:text-foreground data-[active=true]:border-border data-[active=true]:border-b-background data-[active=true]:bg-background data-[active=true]:text-foreground data-[active=true]:shadow-xs',\n        'enclosed-solid':\n          '-mb-px rounded-t-[3px] border border-b-0 border-transparent bg-transparent hover:border-border/80 hover:text-foreground data-[active=true]:border-primary/80 data-[active=true]:border-b-primary data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-xs',\n        soft: 'rounded-sm border border-transparent bg-transparent hover:border-border/60 hover:bg-muted/55 hover:text-foreground data-[active=true]:border-border/70 data-[active=true]:bg-background data-[active=true]:text-foreground data-[active=true]:shadow-xs',\n        pill: 'rounded-full border border-transparent hover:border-border/70 hover:bg-muted/70 hover:text-foreground data-[active=true]:border-primary/25 data-[active=true]:bg-primary/10 data-[active=true]:text-primary',\n        solid:\n          'rounded-sm border border-transparent bg-transparent hover:border-border/70 hover:bg-muted/60 hover:text-foreground data-[active=true]:border-primary/20 data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-sm',\n        underline:\n          'hover:text-foreground data-[active=true]:text-primary after:pointer-events-none after:absolute after:inset-x-1 after:bottom-[-1px] after:h-[0.125rem] after:bg-primary after:origin-center after:scale-x-0 after:transition-transform after:duration-200 data-[active=true]:after:scale-x-100',\n      },\n      zSize: {\n        sm: 'min-h-9 px-3 py-1.5 text-sm',\n        default: 'min-h-10 px-4 py-2 text-sm',\n        lg: 'min-h-11 px-5 py-2.5 text-base',\n      },\n      zOrientation: {\n        horizontal: '',\n        vertical: 'w-full justify-start px-3',\n      },\n    },\n    compoundVariants: [\n      {\n        zType: 'line',\n        zOrientation: 'vertical',\n        class: 'after:hidden border-b-0 border-l-2 data-[active=true]:border-l-primary',\n      },\n      {\n        zType: 'underline',\n        zOrientation: 'vertical',\n        class: 'after:hidden border-b-0 border-l-2 data-[active=true]:border-l-primary',\n      },\n      {\n        zType: 'enclosed',\n        zOrientation: 'vertical',\n        class: 'mb-0 border-b border-r-0 data-[active=true]:border-r-background',\n      },\n      {\n        zType: 'enclosed-solid',\n        zOrientation: 'vertical',\n        class: 'mb-0 border-b border-r-0 data-[active=true]:border-r-primary',\n      },\n    ],\n    defaultVariants: {\n      zType: 'line',\n      zSize: 'default',\n      zOrientation: 'horizontal',\n    },\n  }\n);\n\nexport type ZTabsVariants = VariantProps<typeof zTabsVariants>;\nexport type ZTabItemVariants = VariantProps<typeof zTabItemVariants>;\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  effect,\n  ElementRef,\n  input,\n  model,\n  output,\n  signal,\n  viewChild,\n  viewChildren,\n  ViewEncapsulation,\n  OnDestroy,\n} from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';\nimport { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { ZTabPanelDirective } from './directives/z-tab-panel.directive';\nimport type { ZTab, ZTabsType, ZTabsSize, ZTabsOrientation } from './z-tabs.types';\nimport { zTabsVariants, zTabItemVariants } from './z-tabs.variants';\n\n@Component({\n  selector: 'z-tabs',\n  imports: [ZIconComponent, ZButtonComponent, ZTooltipDirective, NgTemplateOutlet, ZPopoverDirective, TranslatePipe],\n  standalone: true,\n  templateUrl: './z-tabs.component.html',\n  styleUrl: './z-tabs.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'z-tabs-wrapper block',\n  },\n})\nexport class ZTabsComponent implements AfterViewInit, OnDestroy {\n  public readonly tabPanels = contentChildren(ZTabPanelDirective);\n  public readonly tabsListContainer = viewChild<ElementRef<HTMLDivElement>>('tabsListContainer');\n  public readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');\n\n  public readonly class = input<ClassValue>('');\n  public readonly zTabs = input.required<ZTab[]>();\n  public readonly zType = input<ZTabsType>('line');\n  public readonly zSize = input<ZTabsSize>('default');\n  public readonly zOrientation = input<ZTabsOrientation>('horizontal');\n  public readonly zLazy = input(false);\n  public readonly zTabsOnly = input(false);\n  public readonly zReloadable = input(false);\n\n  public readonly activeTab = model<string>('');\n  public readonly zTabChange = output<string>();\n\n  protected readonly loadedTabs = signal<Set<string>>(new Set());\n  protected readonly canScrollLeft = signal(false);\n  protected readonly canScrollRight = signal(false);\n\n  private _resizeObserver?: ResizeObserver;\n\n  constructor() {\n    effect(() => {\n      this.zTabs();\n      requestAnimationFrame(() => this.checkScroll());\n    });\n  }\n\n  ngAfterViewInit(): void {\n    this.checkScroll();\n    this._setupResizeObserver();\n  }\n\n  ngOnDestroy(): void {\n    this._resizeObserver?.disconnect();\n  }\n\n  protected readonly tabsClasses = computed(() =>\n    zMergeClasses(\n      zTabsVariants({\n        zType: this.zType(),\n        zOrientation: this.zOrientation(),\n      }),\n      this.class()\n    )\n  );\n\n  protected getTabItemClasses(_tab: ZTab): string {\n    return zMergeClasses(\n      zTabItemVariants({\n        zType: this.zType(),\n        zSize: this.zSize(),\n        zOrientation: this.zOrientation(),\n      })\n    );\n  }\n\n  protected selectTab(tab: ZTab, scrollToView = false): void {\n    if (tab.disabled) {\n      return;\n    }\n\n    const isAlreadyActive = this.activeTab() === tab.value;\n    if (isAlreadyActive && !this.zReloadable()) {\n      return;\n    }\n\n    this.activeTab.set(tab.value);\n    this.zTabChange.emit(tab.value);\n\n    if (this.zLazy()) {\n      this.loadedTabs.update(tabs => {\n        const newTabs = new Set(tabs);\n        newTabs.add(tab.value);\n        return newTabs;\n      });\n    }\n\n    if (scrollToView && this.zOrientation() === 'horizontal') {\n      requestAnimationFrame(() => {\n        const tabIndex = this.zTabs().findIndex(t => t.value === tab.value);\n        const tabButtonsList = this.tabButtons();\n        const tabButton = tabButtonsList[tabIndex];\n        if (tabButton) {\n          tabButton.nativeElement.scrollIntoView({\n            behavior: 'smooth',\n            block: 'nearest',\n            inline: 'center',\n          });\n        }\n      });\n    }\n  }\n\n  protected isTabActive(tab: ZTab): boolean {\n    return this.activeTab() === tab.value;\n  }\n\n  protected shouldRenderPanel(tabValue: string): boolean {\n    if (!this.zLazy()) {\n      return true;\n    }\n    return this.loadedTabs().has(tabValue) || this.activeTab() === tabValue;\n  }\n\n  protected onTabKeydown(event: KeyboardEvent, currentIndex: number): void {\n    const tabs = this.zTabs().filter(t => !t.disabled);\n    const currentTab = tabs[currentIndex];\n\n    if (!currentTab) {\n      return;\n    }\n\n    const isHorizontal = this.zOrientation() === 'horizontal';\n    const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n    const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n    if (event.key === nextKey) {\n      event.preventDefault();\n      const nextIndex = (currentIndex + 1) % tabs.length;\n      this.selectTab(tabs[nextIndex]);\n      return;\n    }\n\n    if (event.key === prevKey) {\n      event.preventDefault();\n      const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n      this.selectTab(tabs[prevIndex]);\n      return;\n    }\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      this.selectTab(tabs[0]);\n      return;\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      this.selectTab(tabs[tabs.length - 1]);\n    }\n  }\n\n  protected checkScroll(): void {\n    const container = this.tabsListContainer()?.nativeElement;\n    if (!container || this.zOrientation() !== 'horizontal') {\n      this.canScrollLeft.set(false);\n      this.canScrollRight.set(false);\n      return;\n    }\n\n    const { scrollLeft, scrollWidth, clientWidth } = container;\n    this.canScrollLeft.set(scrollLeft > 0);\n    this.canScrollRight.set(scrollLeft + clientWidth < scrollWidth - 1);\n  }\n\n  protected scrollLeft(): void {\n    const container = this.tabsListContainer()?.nativeElement;\n    if (!container) {\n      return;\n    }\n\n    container.scrollBy({ left: -200, behavior: 'smooth' });\n    setTimeout(() => this.checkScroll(), 300);\n  }\n\n  protected scrollRight(): void {\n    const container = this.tabsListContainer()?.nativeElement;\n    if (!container) {\n      return;\n    }\n\n    container.scrollBy({ left: 200, behavior: 'smooth' });\n    setTimeout(() => this.checkScroll(), 300);\n  }\n\n  protected onTabsScroll(): void {\n    this.checkScroll();\n  }\n\n  private _setupResizeObserver(): void {\n    const container = this.tabsListContainer()?.nativeElement;\n    if (!container) {\n      return;\n    }\n\n    this._resizeObserver = new ResizeObserver(() => {\n      this.checkScroll();\n    });\n\n    this._resizeObserver.observe(container);\n  }\n\n  protected scrollToActiveDropdownItem(): void {\n    setTimeout(() => {\n      const activeIndex = this.zTabs().findIndex(tab => tab.value === this.activeTab());\n      if (activeIndex === -1) {\n        return;\n      }\n\n      const dropdownMenu = document.querySelector('.z-tabs-dropdown-menu') as HTMLElement;\n      if (!dropdownMenu) {\n        return;\n      }\n\n      const dropdownItems = Array.from(dropdownMenu.querySelectorAll('button'));\n      const activeItem = dropdownItems[activeIndex];\n\n      if (activeItem && dropdownMenu) {\n        const menuRect = dropdownMenu.getBoundingClientRect();\n        const itemRect = activeItem.getBoundingClientRect();\n        const scrollTop = activeItem.offsetTop - menuRect.height / 2 + itemRect.height / 2;\n\n        dropdownMenu.scrollTo({\n          top: scrollTop,\n          behavior: 'smooth',\n        });\n      }\n    }, 150);\n  }\n}\n","<div\n  class=\"z-tabs-container flex gap-3 md:gap-4\"\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 class=\"z-tabs-nav flex w-full items-center gap-1.5\">\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      <div\n        #tabsListContainer\n        class=\"z-tabs-scroll-wrapper px-0.5\"\n        [class.vertical]=\"zOrientation() === 'vertical'\"\n        (scroll)=\"onTabsScroll()\">\n        <!-- Tab List -->\n        <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\" [attr.data-type]=\"zType()\">\n          @for (tab of zTabs(); track tab.value; let idx = $index) {\n            <button\n              #tabButton\n              type=\"button\"\n              role=\"tab\"\n              [class]=\"getTabItemClasses(tab)\"\n              [attr.data-active]=\"isTabActive(tab)\"\n              [attr.data-type]=\"zType()\"\n              [attr.data-orientation]=\"zOrientation()\"\n              [attr.aria-selected]=\"isTabActive(tab)\"\n              [attr.aria-controls]=\"'panel-' + tab.value\"\n              [disabled]=\"tab.disabled\"\n              [tabindex]=\"isTabActive(tab) ? 0 : -1\"\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 truncate\">{{ tab.label | translate }}</span>\n              @if (tab.badge) {\n                <span\n                  class=\"bg-primary text-primary-foreground 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                  {{ tab.badge }}\n                </span>\n              }\n            </button>\n          }\n        </div>\n      </div>\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  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n      @for (panel of tabPanels(); track panel.zTabPanel()) {\n        @if (shouldRenderPanel(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:bg-primary/10]=\"!isTabActive(tab)\"\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"shival99-z-ui-components-z-tabs.mjs","sources":["../../../../libs/core-ui/components/z-tabs/directives/z-tab-panel.directive.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.variants.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.component.ts","../../../../libs/core-ui/components/z-tabs/z-tabs.component.html","../../../../libs/core-ui/components/z-tabs/shival99-z-ui-components-z-tabs.ts"],"sourcesContent":["import { Directive, inject, input, TemplateRef } from '@angular/core';\n\n@Directive({\n  selector: '[z-tab-panel], [zTabPanel]',\n  standalone: true,\n  exportAs: 'zTabPanel',\n})\nexport class ZTabPanelDirective {\n  public readonly zTabPanel = input.required<string>();\n  public readonly template = inject(TemplateRef<unknown>);\n}\n","import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zTabsVariants = cva('z-tabs flex min-w-0', {\n  variants: {\n    zType: {\n      line: 'gap-1 border-b border-border/80',\n      enclosed: 'gap-1 border-b border-border/80',\n      'enclosed-solid': 'gap-1 border-b border-border/80',\n      soft: 'gap-1 rounded-sm border border-border/60 bg-muted/35 p-1',\n      pill: 'gap-1',\n      solid: 'gap-1 rounded-sm border border-border/70 bg-muted/20 p-1',\n      underline: 'gap-1 border-b border-border/70',\n      'code-line': 'h-10 w-full justify-start gap-0 rounded-none border-b border-border bg-background p-0',\n    },\n    zOrientation: {\n      horizontal: 'w-max min-w-full flex-row items-center',\n      vertical: 'w-full flex-col items-stretch gap-1 border-r border-b-0 pr-2',\n    },\n  },\n  defaultVariants: {\n    zType: 'line',\n    zOrientation: 'horizontal',\n  },\n});\n\nexport const zTabItemVariants = cva(\n  '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:z-[2] focus-visible:ring-2 focus-visible:ring-primary/30 focus-visible:ring-offset-2 focus-visible:ring-offset-background cursor-pointer disabled:opacity-45 disabled:cursor-not-allowed',\n  {\n    variants: {\n      zType: {\n        line: 'hover:text-foreground data-[active=true]:text-foreground after:pointer-events-none after:absolute after:inset-x-2 after:bottom-[-1px] after:h-0.5 after:bg-primary after:origin-center after:scale-x-0 after:transition-transform after:duration-200 data-[active=true]:after:scale-x-100',\n        enclosed:\n          '-mb-px rounded-t-[3px] border border-b-0 border-transparent bg-transparent hover:border-border/80 hover:text-foreground data-[active=true]:border-border data-[active=true]:border-b-background data-[active=true]:bg-background data-[active=true]:text-foreground data-[active=true]:shadow-xs',\n        'enclosed-solid':\n          '-mb-px rounded-t-[3px] border border-b-0 border-transparent bg-transparent hover:border-border/80 hover:text-foreground data-[active=true]:border-primary/80 data-[active=true]:border-b-primary data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-xs',\n        soft: 'rounded-sm border border-transparent bg-transparent hover:border-border/60 hover:bg-muted/55 hover:text-foreground data-[active=true]:border-border/70 data-[active=true]:bg-background data-[active=true]:text-foreground data-[active=true]:shadow-xs',\n        pill: 'rounded-full border border-transparent hover:border-border/70 hover:bg-muted/70 hover:text-foreground data-[active=true]:border-primary/25 data-[active=true]:bg-primary/10 data-[active=true]:text-primary',\n        solid:\n          'rounded-sm border border-transparent bg-transparent hover:border-border/70 hover:bg-muted/60 hover:text-foreground data-[active=true]:border-primary/20 data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-sm',\n        underline:\n          'hover:text-foreground data-[active=true]:text-primary after:pointer-events-none after:absolute after:inset-x-1 after:bottom-[-1px] after:h-[0.125rem] after:bg-primary after:origin-center after:scale-x-0 after:transition-transform after:duration-200 data-[active=true]:after:scale-x-100',\n        'code-line':\n          '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/80 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]',\n      },\n      zSize: {\n        sm: 'min-h-9 px-3 py-1.5 text-sm',\n        default: 'min-h-10 px-4 py-2 text-sm',\n        lg: 'min-h-11 px-5 py-2.5 text-base',\n      },\n      zOrientation: {\n        horizontal: '',\n        vertical: 'w-full justify-start px-3',\n      },\n    },\n    compoundVariants: [\n      {\n        zType: 'line',\n        zOrientation: 'vertical',\n        class: 'after:hidden border-b-0 border-l-2 data-[active=true]:border-l-primary',\n      },\n      {\n        zType: 'underline',\n        zOrientation: 'vertical',\n        class: 'after:hidden border-b-0 border-l-2 data-[active=true]:border-l-primary',\n      },\n      {\n        zType: 'code-line',\n        zSize: 'sm',\n        zOrientation: 'horizontal',\n        class: 'min-h-8 px-4 py-1.5 text-sm',\n      },\n      {\n        zType: 'code-line',\n        zSize: 'default',\n        zOrientation: 'horizontal',\n        class: 'min-h-8 px-4 py-1.5 text-sm',\n      },\n      {\n        zType: 'code-line',\n        zSize: 'lg',\n        zOrientation: 'horizontal',\n        class: 'min-h-8 px-4 py-1.5 text-sm',\n      },\n      {\n        zType: 'code-line',\n        zOrientation: 'vertical',\n        class:\n          'h-auto flex-none justify-start rounded-md border border-border/45 px-3 py-2 text-foreground/80 hover:text-foreground data-[active=true]:border-primary/70 data-[active=true]:bg-primary/10 data-[active=true]:text-primary',\n      },\n      {\n        zType: 'enclosed',\n        zOrientation: 'vertical',\n        class: 'mb-0 border-b border-r-0 data-[active=true]:border-r-background',\n      },\n      {\n        zType: 'enclosed-solid',\n        zOrientation: 'vertical',\n        class: 'mb-0 border-b border-r-0 data-[active=true]:border-r-primary',\n      },\n    ],\n    defaultVariants: {\n      zType: 'line',\n      zSize: 'default',\n      zOrientation: 'horizontal',\n    },\n  }\n);\n\nexport type ZTabsVariants = VariantProps<typeof zTabsVariants>;\nexport type ZTabItemVariants = VariantProps<typeof zTabItemVariants>;\n","import { NgTemplateOutlet } from '@angular/common';\nimport {\n  AfterViewInit,\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  contentChildren,\n  effect,\n  ElementRef,\n  input,\n  model,\n  output,\n  signal,\n  viewChild,\n  viewChildren,\n  ViewEncapsulation,\n  OnDestroy,\n} from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { ZPopoverDirective } from '@shival99/z-ui/components/z-popover';\nimport { ZTooltipDirective } from '@shival99/z-ui/components/z-tooltip';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { ZTabPanelDirective } from './directives/z-tab-panel.directive';\nimport type { ZTab, ZTabsType, ZTabsSize, ZTabsOrientation } from './z-tabs.types';\nimport { zTabsVariants, zTabItemVariants } from './z-tabs.variants';\n\n@Component({\n  selector: 'z-tabs',\n  imports: [ZIconComponent, ZButtonComponent, ZTooltipDirective, NgTemplateOutlet, ZPopoverDirective, TranslatePipe],\n  standalone: true,\n  templateUrl: './z-tabs.component.html',\n  styleUrl: './z-tabs.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'z-tabs-wrapper block',\n  },\n})\nexport class ZTabsComponent implements AfterViewInit, OnDestroy {\n  public readonly tabPanels = contentChildren(ZTabPanelDirective);\n  public readonly tabsListContainer = viewChild<ElementRef<HTMLDivElement>>('tabsListContainer');\n  public readonly tabButtons = viewChildren<ElementRef<HTMLButtonElement>>('tabButton');\n\n  public readonly class = input<ClassValue>('');\n  public readonly zTabs = input.required<ZTab[]>();\n  public readonly zType = input<ZTabsType>('line');\n  public readonly zSize = input<ZTabsSize>('default');\n  public readonly zOrientation = input<ZTabsOrientation>('horizontal');\n  public readonly zLazy = input(false);\n  public readonly zTabsOnly = input(false);\n  public readonly zReloadable = input(false);\n\n  public readonly activeTab = model<string>('');\n  public readonly zTabChange = output<string>();\n\n  protected readonly loadedTabs = signal<Set<string>>(new Set());\n  protected readonly canScrollLeft = signal(false);\n  protected readonly canScrollRight = signal(false);\n\n  private _resizeObserver?: ResizeObserver;\n\n  constructor() {\n    effect(() => {\n      this.zTabs();\n      requestAnimationFrame(() => this.checkScroll());\n    });\n  }\n\n  ngAfterViewInit(): void {\n    this.checkScroll();\n    this._setupResizeObserver();\n  }\n\n  ngOnDestroy(): void {\n    this._resizeObserver?.disconnect();\n  }\n\n  protected readonly tabsClasses = computed(() =>\n    zMergeClasses(\n      zTabsVariants({\n        zType: this.zType(),\n        zOrientation: this.zOrientation(),\n      }),\n      this.class()\n    )\n  );\n\n  protected getTabItemClasses(_tab: ZTab): string {\n    return zMergeClasses(\n      zTabItemVariants({\n        zType: this.zType(),\n        zSize: this.zSize(),\n        zOrientation: this.zOrientation(),\n      })\n    );\n  }\n\n  protected selectTab(tab: ZTab, scrollToView = false): void {\n    if (tab.disabled) {\n      return;\n    }\n\n    const isAlreadyActive = this.activeTab() === tab.value;\n    if (isAlreadyActive && !this.zReloadable()) {\n      return;\n    }\n\n    this.activeTab.set(tab.value);\n    this.zTabChange.emit(tab.value);\n\n    if (this.zLazy()) {\n      this.loadedTabs.update(tabs => {\n        const newTabs = new Set(tabs);\n        newTabs.add(tab.value);\n        return newTabs;\n      });\n    }\n\n    if (scrollToView && this.zOrientation() === 'horizontal') {\n      requestAnimationFrame(() => {\n        const tabIndex = this.zTabs().findIndex(t => t.value === tab.value);\n        const tabButtonsList = this.tabButtons();\n        const tabButton = tabButtonsList[tabIndex];\n        if (tabButton) {\n          tabButton.nativeElement.scrollIntoView({\n            behavior: 'smooth',\n            block: 'nearest',\n            inline: 'center',\n          });\n        }\n      });\n    }\n  }\n\n  protected isTabActive(tab: ZTab): boolean {\n    return this.activeTab() === tab.value;\n  }\n\n  protected shouldRenderPanel(tabValue: string): boolean {\n    if (!this.zLazy()) {\n      return true;\n    }\n    return this.loadedTabs().has(tabValue) || this.activeTab() === tabValue;\n  }\n\n  protected onTabKeydown(event: KeyboardEvent, currentIndex: number): void {\n    const tabs = this.zTabs().filter(t => !t.disabled);\n    const currentTab = tabs[currentIndex];\n\n    if (!currentTab) {\n      return;\n    }\n\n    const isHorizontal = this.zOrientation() === 'horizontal';\n    const nextKey = isHorizontal ? 'ArrowRight' : 'ArrowDown';\n    const prevKey = isHorizontal ? 'ArrowLeft' : 'ArrowUp';\n\n    if (event.key === nextKey) {\n      event.preventDefault();\n      const nextIndex = (currentIndex + 1) % tabs.length;\n      this.selectTab(tabs[nextIndex]);\n      return;\n    }\n\n    if (event.key === prevKey) {\n      event.preventDefault();\n      const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n      this.selectTab(tabs[prevIndex]);\n      return;\n    }\n\n    if (event.key === 'Home') {\n      event.preventDefault();\n      this.selectTab(tabs[0]);\n      return;\n    }\n\n    if (event.key === 'End') {\n      event.preventDefault();\n      this.selectTab(tabs[tabs.length - 1]);\n    }\n  }\n\n  protected checkScroll(): void {\n    const container = this.tabsListContainer()?.nativeElement;\n    if (!container || this.zOrientation() !== 'horizontal') {\n      this.canScrollLeft.set(false);\n      this.canScrollRight.set(false);\n      return;\n    }\n\n    const { scrollLeft, scrollWidth, clientWidth } = container;\n    this.canScrollLeft.set(scrollLeft > 0);\n    this.canScrollRight.set(scrollLeft + clientWidth < scrollWidth - 1);\n  }\n\n  protected scrollLeft(): void {\n    const container = this.tabsListContainer()?.nativeElement;\n    if (!container) {\n      return;\n    }\n\n    container.scrollBy({ left: -200, behavior: 'smooth' });\n    setTimeout(() => this.checkScroll(), 300);\n  }\n\n  protected scrollRight(): void {\n    const container = this.tabsListContainer()?.nativeElement;\n    if (!container) {\n      return;\n    }\n\n    container.scrollBy({ left: 200, behavior: 'smooth' });\n    setTimeout(() => this.checkScroll(), 300);\n  }\n\n  protected onTabsScroll(): void {\n    this.checkScroll();\n  }\n\n  private _setupResizeObserver(): void {\n    const container = this.tabsListContainer()?.nativeElement;\n    if (!container) {\n      return;\n    }\n\n    this._resizeObserver = new ResizeObserver(() => {\n      this.checkScroll();\n    });\n\n    this._resizeObserver.observe(container);\n  }\n\n  protected scrollToActiveDropdownItem(): void {\n    setTimeout(() => {\n      const activeIndex = this.zTabs().findIndex(tab => tab.value === this.activeTab());\n      if (activeIndex === -1) {\n        return;\n      }\n\n      const dropdownMenu = document.querySelector('.z-tabs-dropdown-menu') as HTMLElement;\n      if (!dropdownMenu) {\n        return;\n      }\n\n      const dropdownItems = Array.from(dropdownMenu.querySelectorAll('button'));\n      const activeItem = dropdownItems[activeIndex];\n\n      if (activeItem && dropdownMenu) {\n        const menuRect = dropdownMenu.getBoundingClientRect();\n        const itemRect = activeItem.getBoundingClientRect();\n        const scrollTop = activeItem.offsetTop - menuRect.height / 2 + itemRect.height / 2;\n\n        dropdownMenu.scrollTo({\n          top: scrollTop,\n          behavior: 'smooth',\n        });\n      }\n    }, 150);\n  }\n}\n","<div\n  class=\"z-tabs-container flex gap-3 md:gap-4\"\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 class=\"z-tabs-nav flex w-full items-center gap-1.5\">\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      <div\n        #tabsListContainer\n        class=\"z-tabs-scroll-wrapper px-0.5\"\n        [class.vertical]=\"zOrientation() === 'vertical'\"\n        (scroll)=\"onTabsScroll()\">\n        <!-- Tab List -->\n        <div [class]=\"tabsClasses()\" role=\"tablist\" [attr.aria-orientation]=\"zOrientation()\" [attr.data-type]=\"zType()\">\n          @for (tab of zTabs(); track tab.value; let idx = $index) {\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.aria-selected]=\"isTabActive(tab)\"\n              [attr.aria-controls]=\"'panel-' + tab.value\"\n              [disabled]=\"tab.disabled\"\n              [tabindex]=\"isTabActive(tab) ? 0 : -1\"\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 truncate\">{{ tab.label | translate }}</span>\n              @if (tab.badge) {\n                <span\n                  class=\"bg-primary text-primary-foreground 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                  {{ tab.badge }}\n                </span>\n              }\n            </button>\n          }\n        </div>\n      </div>\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  <!-- Tab Panels -->\n  @if (!zTabsOnly()) {\n    <div class=\"z-tabs-panels min-h-0\" [class.mt-2]=\"zOrientation() === 'horizontal'\">\n      @for (panel of tabPanels(); track panel.zTabPanel()) {\n        @if (shouldRenderPanel(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:bg-primary/10]=\"!isTabActive(tab)\"\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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
 import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
 import { zMergeClasses } from '@shival99/z-ui/utils';
 import { cva } from 'class-variance-authority';
 
@@ -96,15 +97,16 @@ class ZTimelineComponent {
     badgeClasses = computed(() => zTimelineTimeBadgeVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "badgeClasses" }] : []));
     titleClasses = computed(() => zTimelineTitleVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "titleClasses" }] : []));
     descriptionClasses = computed(() => zTimelineDescriptionVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "descriptionClasses" }] : []));
+    isCareer = computed(() => this.zLayout() === 'career', ...(ngDevMode ? [{ debugName: "isCareer" }] : []));
     isAlternate = computed(() => this.zLayout() === 'alternate', ...(ngDevMode ? [{ debugName: "isAlternate" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTimelineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZTimelineComponent, isStandalone: true, selector: "z-timeline", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zItems: { classPropertyName: "zItems", publicName: "zItems", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLayout: { classPropertyName: "zLayout", publicName: "zLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (isAlternate()) {\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- ALTERNATE / ZIGZAG LAYOUT                                 -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"relative mx-auto max-w-7xl space-y-4\">\n    @for (item of zItems(); track item.id ?? $index; let isEven = $even) {\n      <div class=\"flex items-start md:flex-row\" [class.md:flex-row-reverse]=\"!isEven\">\n        <!-- Opposite-side badge (desktop only) -->\n        <div\n          class=\"hidden w-full md:flex md:flex-1 md:items-start\"\n          [class.md:justify-end]=\"isEven\"\n          [class.md:justify-start]=\"!isEven\">\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\">{{ item.time }}</span>\n          }\n        </div>\n\n        <!-- Center marker column -->\n        <div class=\"relative flex flex-col items-center pr-4 md:px-4\">\n          <div class=\"sticky top-40 z-40 flex items-center justify-center\">\n            <span [class]=\"dotClasses()\">\n              <span [class]=\"innerDotClasses()\"></span>\n            </span>\n          </div>\n        </div>\n\n        <!-- Content side -->\n        <div class=\"w-full md:flex md:flex-1\" [class.md:justify-start]=\"isEven\" [class.md:justify-end]=\"!isEven\">\n          <!-- Mobile badge -->\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\" class=\"mb-4 block text-left md:hidden\">{{ item.time }}</span>\n          }\n\n          <div>\n            <!-- Card -->\n            <div\n              class=\"bg-card text-card-foreground mb-8 flex flex-col gap-6 overflow-hidden rounded-xl border py-6 shadow-sm md:max-w-136\">\n              <div class=\"space-y-4 px-6\">\n                <div [class]=\"titleClasses()\">{{ item.title }}</div>\n                @if (item.description) {\n                  <p [class]=\"descriptionClasses()\">{{ item.description }}</p>\n                }\n                @if (item.contentTemplate) {\n                  <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Vertical line (absolute, behind everything) -->\n    <div class=\"bg-border absolute top-3 bottom-3 left-3 w-0.5 overflow-hidden md:left-1/2 md:-translate-x-1/2\">\n      <div class=\"bg-primary absolute inset-x-0 top-0 w-0.5 rounded-full\" style=\"height: 100%; opacity: 1\"></div>\n    </div>\n  </div>\n} @else {\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- DEFAULT / CHANGELOG LAYOUT                                -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  @for (item of zItems(); track item.id ?? $index; let isLast = $last) {\n    <div class=\"relative flex justify-end gap-2\">\n      <!-- Left: sticky badge + subtitle (desktop only) -->\n      <div class=\"sticky top-19 flex w-36 flex-col items-end gap-2 self-start pb-4 max-md:hidden\">\n        @if (item.time) {\n          <span [class]=\"badgeClasses()\">{{ item.time }}</span>\n        }\n        @if (item.subtitle) {\n          <div class=\"text-muted-foreground text-right text-sm font-medium\">{{ item.subtitle }}</div>\n        }\n      </div>\n\n      <!-- Center: dot + line -->\n      <div class=\"flex flex-col items-center\">\n        <div class=\"sticky top-19 flex size-6 items-center justify-center max-sm:top-5\">\n          <span [class]=\"dotClasses()\">\n            <span [class]=\"innerDotClasses()\"></span>\n          </span>\n        </div>\n        @if (!isLast) {\n          <span class=\"-mt-2.5 w-px flex-1 border\"></span>\n        }\n      </div>\n\n      <!-- Right: content -->\n      <div class=\"flex flex-1 flex-col gap-4 pb-11 pl-3 md:pl-6 lg:pl-9\">\n        <!-- Mobile badge + subtitle -->\n        <div class=\"flex flex-col gap-2 md:hidden\">\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\" class=\"w-fit text-xs\">{{ item.time }}</span>\n          }\n          @if (item.subtitle) {\n            <div class=\"font-medium\">{{ item.subtitle }}</div>\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"space-y-4\">\n          <div class=\"space-y-3\">\n            <h3 [class]=\"titleClasses()\">{{ item.title }}</h3>\n            @if (item.description) {\n              <p [class]=\"descriptionClasses()\">{{ item.description }}</p>\n            }\n          </div>\n          @if (item.contentTemplate) {\n            <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n          }\n        </div>\n      </div>\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZTimelineComponent, isStandalone: true, selector: "z-timeline", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zItems: { classPropertyName: "zItems", publicName: "zItems", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zLayout: { classPropertyName: "zLayout", publicName: "zLayout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@if (isCareer()) {\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- CAREER / EXPERIENCE LAYOUT                                -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"mx-auto w-full max-w-3xl px-2 sm:px-4\">\n    <div class=\"relative ml-3\">\n      <div class=\"bg-border absolute top-3 bottom-3 left-0 w-0.5\"></div>\n\n      @for (item of zItems(); track item.id ?? $index; let isLast = $last) {\n        <article class=\"relative pb-10 pl-8\" [class.pb-0]=\"isLast\">\n          <span\n            class=\"bg-background border-primary absolute top-2 left-0 z-[1] size-3 -translate-x-1/2 rounded-full border-2\"></span>\n\n          <div class=\"space-y-3\">\n            <div class=\"flex items-center gap-2.5\">\n              <div class=\"bg-accent flex size-9 shrink-0 items-center justify-center rounded-full\">\n                <z-icon [zType]=\"item.icon ?? 'lucideBuilding2'\" zSize=\"18\" class=\"text-muted-foreground\" />\n              </div>\n              <span class=\"text-base font-medium\">{{ item.company ?? item.subtitle ?? 'Experience' }}</span>\n            </div>\n\n            <div class=\"space-y-2\">\n              <h3 class=\"text-foreground text-xl leading-tight font-semibold tracking-[-0.01em]\">{{ item.title }}</h3>\n              @if (item.period || item.time) {\n                <div class=\"text-muted-foreground flex items-center gap-2 text-sm\">\n                  <z-icon zType=\"lucideCalendar\" zSize=\"15\" class=\"shrink-0\" />\n                  <span>{{ item.period ?? item.time }}</span>\n                </div>\n              }\n            </div>\n\n            @if (item.description) {\n              <p class=\"text-muted-foreground text-sm leading-relaxed sm:text-base\">{{ item.description }}</p>\n            }\n\n            @if (item.technologies?.length) {\n              <div class=\"flex flex-wrap gap-2\">\n                @for (tech of item.technologies; track tech) {\n                  <span\n                    class=\"bg-secondary text-secondary-foreground inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium\">\n                    {{ tech }}\n                  </span>\n                }\n              </div>\n            }\n\n            @if (item.contentTemplate) {\n              <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n            }\n          </div>\n        </article>\n      }\n    </div>\n  </div>\n} @else if (isAlternate()) {\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- ALTERNATE / ZIGZAG LAYOUT                                 -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"relative mx-auto max-w-7xl space-y-4\">\n    @for (item of zItems(); track item.id ?? $index; let isEven = $even) {\n      <div class=\"flex items-start md:flex-row\" [class.md:flex-row-reverse]=\"!isEven\">\n        <!-- Opposite-side badge (desktop only) -->\n        <div\n          class=\"hidden w-full md:flex md:flex-1 md:items-start\"\n          [class.md:justify-end]=\"isEven\"\n          [class.md:justify-start]=\"!isEven\">\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\">{{ item.time }}</span>\n          }\n        </div>\n\n        <!-- Center marker column -->\n        <div class=\"relative flex flex-col items-center pr-4 md:px-4\">\n          <div class=\"z-40 flex items-center justify-center\">\n            <span [class]=\"dotClasses()\">\n              <span [class]=\"innerDotClasses()\"></span>\n            </span>\n          </div>\n        </div>\n\n        <!-- Content side -->\n        <div class=\"w-full md:flex md:flex-1\" [class.md:justify-start]=\"isEven\" [class.md:justify-end]=\"!isEven\">\n          <!-- Mobile badge -->\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\" class=\"mb-4 block text-left md:hidden\">{{ item.time }}</span>\n          }\n\n          <div>\n            <!-- Card -->\n            <div\n              class=\"bg-card text-card-foreground mb-8 flex flex-col gap-6 overflow-hidden rounded-xl border py-6 shadow-sm md:max-w-136\">\n              <div class=\"space-y-4 px-6\">\n                <div [class]=\"titleClasses()\">{{ item.title }}</div>\n                @if (item.description) {\n                  <p [class]=\"descriptionClasses()\">{{ item.description }}</p>\n                }\n                @if (item.contentTemplate) {\n                  <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Vertical line (absolute, behind everything) -->\n    <div class=\"bg-border absolute top-3 bottom-3 left-3 w-0.5 overflow-hidden md:left-1/2 md:-translate-x-1/2\">\n      <div class=\"bg-primary absolute inset-x-0 top-0 w-0.5 rounded-full\" style=\"height: 100%; opacity: 1\"></div>\n    </div>\n  </div>\n} @else {\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- DEFAULT / CHANGELOG LAYOUT                                -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  @for (item of zItems(); track item.id ?? $index; let isLast = $last) {\n    <div class=\"relative flex justify-end gap-2\">\n      <!-- Left: badge + subtitle (desktop only) -->\n      <div class=\"flex w-36 flex-col items-end gap-2 self-start pb-4 max-md:hidden\">\n        @if (item.time) {\n          <span [class]=\"badgeClasses()\">{{ item.time }}</span>\n        }\n        @if (item.subtitle) {\n          <div class=\"text-muted-foreground text-right text-sm font-medium\">{{ item.subtitle }}</div>\n        }\n      </div>\n\n      <!-- Center: dot + line -->\n      <div class=\"relative flex flex-col items-center\">\n        <div class=\"bg-background relative z-[1] flex size-6 items-center justify-center rounded-full\">\n          <span [class]=\"dotClasses()\">\n            <span [class]=\"innerDotClasses()\"></span>\n          </span>\n        </div>\n        @if (!isLast) {\n          <span class=\"bg-border absolute top-6 bottom-0 left-1/2 w-px -translate-x-1/2\"></span>\n          <span class=\"w-px flex-1\"></span>\n        }\n      </div>\n\n      <!-- Right: content -->\n      <div class=\"flex flex-1 flex-col gap-4 pb-11 pl-3 md:pl-6 lg:pl-9\">\n        <!-- Mobile badge + subtitle -->\n        <div class=\"flex flex-col gap-2 md:hidden\">\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\" class=\"w-fit text-xs\">{{ item.time }}</span>\n          }\n          @if (item.subtitle) {\n            <div class=\"font-medium\">{{ item.subtitle }}</div>\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"space-y-4\">\n          <div class=\"space-y-3\">\n            <h3 [class]=\"titleClasses()\">{{ item.title }}</h3>\n            @if (item.description) {\n              <p [class]=\"descriptionClasses()\">{{ item.description }}</p>\n            }\n          </div>\n          @if (item.contentTemplate) {\n            <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n          }\n        </div>\n      </div>\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'z-timeline', imports: [NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+            args: [{ selector: 'z-timeline', imports: [NgTemplateOutlet, ZIconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'hostClasses()',
-                    }, template: "@if (isAlternate()) {\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- ALTERNATE / ZIGZAG LAYOUT                                 -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"relative mx-auto max-w-7xl space-y-4\">\n    @for (item of zItems(); track item.id ?? $index; let isEven = $even) {\n      <div class=\"flex items-start md:flex-row\" [class.md:flex-row-reverse]=\"!isEven\">\n        <!-- Opposite-side badge (desktop only) -->\n        <div\n          class=\"hidden w-full md:flex md:flex-1 md:items-start\"\n          [class.md:justify-end]=\"isEven\"\n          [class.md:justify-start]=\"!isEven\">\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\">{{ item.time }}</span>\n          }\n        </div>\n\n        <!-- Center marker column -->\n        <div class=\"relative flex flex-col items-center pr-4 md:px-4\">\n          <div class=\"sticky top-40 z-40 flex items-center justify-center\">\n            <span [class]=\"dotClasses()\">\n              <span [class]=\"innerDotClasses()\"></span>\n            </span>\n          </div>\n        </div>\n\n        <!-- Content side -->\n        <div class=\"w-full md:flex md:flex-1\" [class.md:justify-start]=\"isEven\" [class.md:justify-end]=\"!isEven\">\n          <!-- Mobile badge -->\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\" class=\"mb-4 block text-left md:hidden\">{{ item.time }}</span>\n          }\n\n          <div>\n            <!-- Card -->\n            <div\n              class=\"bg-card text-card-foreground mb-8 flex flex-col gap-6 overflow-hidden rounded-xl border py-6 shadow-sm md:max-w-136\">\n              <div class=\"space-y-4 px-6\">\n                <div [class]=\"titleClasses()\">{{ item.title }}</div>\n                @if (item.description) {\n                  <p [class]=\"descriptionClasses()\">{{ item.description }}</p>\n                }\n                @if (item.contentTemplate) {\n                  <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Vertical line (absolute, behind everything) -->\n    <div class=\"bg-border absolute top-3 bottom-3 left-3 w-0.5 overflow-hidden md:left-1/2 md:-translate-x-1/2\">\n      <div class=\"bg-primary absolute inset-x-0 top-0 w-0.5 rounded-full\" style=\"height: 100%; opacity: 1\"></div>\n    </div>\n  </div>\n} @else {\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- DEFAULT / CHANGELOG LAYOUT                                -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  @for (item of zItems(); track item.id ?? $index; let isLast = $last) {\n    <div class=\"relative flex justify-end gap-2\">\n      <!-- Left: sticky badge + subtitle (desktop only) -->\n      <div class=\"sticky top-19 flex w-36 flex-col items-end gap-2 self-start pb-4 max-md:hidden\">\n        @if (item.time) {\n          <span [class]=\"badgeClasses()\">{{ item.time }}</span>\n        }\n        @if (item.subtitle) {\n          <div class=\"text-muted-foreground text-right text-sm font-medium\">{{ item.subtitle }}</div>\n        }\n      </div>\n\n      <!-- Center: dot + line -->\n      <div class=\"flex flex-col items-center\">\n        <div class=\"sticky top-19 flex size-6 items-center justify-center max-sm:top-5\">\n          <span [class]=\"dotClasses()\">\n            <span [class]=\"innerDotClasses()\"></span>\n          </span>\n        </div>\n        @if (!isLast) {\n          <span class=\"-mt-2.5 w-px flex-1 border\"></span>\n        }\n      </div>\n\n      <!-- Right: content -->\n      <div class=\"flex flex-1 flex-col gap-4 pb-11 pl-3 md:pl-6 lg:pl-9\">\n        <!-- Mobile badge + subtitle -->\n        <div class=\"flex flex-col gap-2 md:hidden\">\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\" class=\"w-fit text-xs\">{{ item.time }}</span>\n          }\n          @if (item.subtitle) {\n            <div class=\"font-medium\">{{ item.subtitle }}</div>\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"space-y-4\">\n          <div class=\"space-y-3\">\n            <h3 [class]=\"titleClasses()\">{{ item.title }}</h3>\n            @if (item.description) {\n              <p [class]=\"descriptionClasses()\">{{ item.description }}</p>\n            }\n          </div>\n          @if (item.contentTemplate) {\n            <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n          }\n        </div>\n      </div>\n    </div>\n  }\n}\n" }]
+                    }, template: "@if (isCareer()) {\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- CAREER / EXPERIENCE LAYOUT                                -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"mx-auto w-full max-w-3xl px-2 sm:px-4\">\n    <div class=\"relative ml-3\">\n      <div class=\"bg-border absolute top-3 bottom-3 left-0 w-0.5\"></div>\n\n      @for (item of zItems(); track item.id ?? $index; let isLast = $last) {\n        <article class=\"relative pb-10 pl-8\" [class.pb-0]=\"isLast\">\n          <span\n            class=\"bg-background border-primary absolute top-2 left-0 z-[1] size-3 -translate-x-1/2 rounded-full border-2\"></span>\n\n          <div class=\"space-y-3\">\n            <div class=\"flex items-center gap-2.5\">\n              <div class=\"bg-accent flex size-9 shrink-0 items-center justify-center rounded-full\">\n                <z-icon [zType]=\"item.icon ?? 'lucideBuilding2'\" zSize=\"18\" class=\"text-muted-foreground\" />\n              </div>\n              <span class=\"text-base font-medium\">{{ item.company ?? item.subtitle ?? 'Experience' }}</span>\n            </div>\n\n            <div class=\"space-y-2\">\n              <h3 class=\"text-foreground text-xl leading-tight font-semibold tracking-[-0.01em]\">{{ item.title }}</h3>\n              @if (item.period || item.time) {\n                <div class=\"text-muted-foreground flex items-center gap-2 text-sm\">\n                  <z-icon zType=\"lucideCalendar\" zSize=\"15\" class=\"shrink-0\" />\n                  <span>{{ item.period ?? item.time }}</span>\n                </div>\n              }\n            </div>\n\n            @if (item.description) {\n              <p class=\"text-muted-foreground text-sm leading-relaxed sm:text-base\">{{ item.description }}</p>\n            }\n\n            @if (item.technologies?.length) {\n              <div class=\"flex flex-wrap gap-2\">\n                @for (tech of item.technologies; track tech) {\n                  <span\n                    class=\"bg-secondary text-secondary-foreground inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium\">\n                    {{ tech }}\n                  </span>\n                }\n              </div>\n            }\n\n            @if (item.contentTemplate) {\n              <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n            }\n          </div>\n        </article>\n      }\n    </div>\n  </div>\n} @else if (isAlternate()) {\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- ALTERNATE / ZIGZAG LAYOUT                                 -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <div class=\"relative mx-auto max-w-7xl space-y-4\">\n    @for (item of zItems(); track item.id ?? $index; let isEven = $even) {\n      <div class=\"flex items-start md:flex-row\" [class.md:flex-row-reverse]=\"!isEven\">\n        <!-- Opposite-side badge (desktop only) -->\n        <div\n          class=\"hidden w-full md:flex md:flex-1 md:items-start\"\n          [class.md:justify-end]=\"isEven\"\n          [class.md:justify-start]=\"!isEven\">\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\">{{ item.time }}</span>\n          }\n        </div>\n\n        <!-- Center marker column -->\n        <div class=\"relative flex flex-col items-center pr-4 md:px-4\">\n          <div class=\"z-40 flex items-center justify-center\">\n            <span [class]=\"dotClasses()\">\n              <span [class]=\"innerDotClasses()\"></span>\n            </span>\n          </div>\n        </div>\n\n        <!-- Content side -->\n        <div class=\"w-full md:flex md:flex-1\" [class.md:justify-start]=\"isEven\" [class.md:justify-end]=\"!isEven\">\n          <!-- Mobile badge -->\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\" class=\"mb-4 block text-left md:hidden\">{{ item.time }}</span>\n          }\n\n          <div>\n            <!-- Card -->\n            <div\n              class=\"bg-card text-card-foreground mb-8 flex flex-col gap-6 overflow-hidden rounded-xl border py-6 shadow-sm md:max-w-136\">\n              <div class=\"space-y-4 px-6\">\n                <div [class]=\"titleClasses()\">{{ item.title }}</div>\n                @if (item.description) {\n                  <p [class]=\"descriptionClasses()\">{{ item.description }}</p>\n                }\n                @if (item.contentTemplate) {\n                  <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Vertical line (absolute, behind everything) -->\n    <div class=\"bg-border absolute top-3 bottom-3 left-3 w-0.5 overflow-hidden md:left-1/2 md:-translate-x-1/2\">\n      <div class=\"bg-primary absolute inset-x-0 top-0 w-0.5 rounded-full\" style=\"height: 100%; opacity: 1\"></div>\n    </div>\n  </div>\n} @else {\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  <!-- DEFAULT / CHANGELOG LAYOUT                                -->\n  <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n  @for (item of zItems(); track item.id ?? $index; let isLast = $last) {\n    <div class=\"relative flex justify-end gap-2\">\n      <!-- Left: badge + subtitle (desktop only) -->\n      <div class=\"flex w-36 flex-col items-end gap-2 self-start pb-4 max-md:hidden\">\n        @if (item.time) {\n          <span [class]=\"badgeClasses()\">{{ item.time }}</span>\n        }\n        @if (item.subtitle) {\n          <div class=\"text-muted-foreground text-right text-sm font-medium\">{{ item.subtitle }}</div>\n        }\n      </div>\n\n      <!-- Center: dot + line -->\n      <div class=\"relative flex flex-col items-center\">\n        <div class=\"bg-background relative z-[1] flex size-6 items-center justify-center rounded-full\">\n          <span [class]=\"dotClasses()\">\n            <span [class]=\"innerDotClasses()\"></span>\n          </span>\n        </div>\n        @if (!isLast) {\n          <span class=\"bg-border absolute top-6 bottom-0 left-1/2 w-px -translate-x-1/2\"></span>\n          <span class=\"w-px flex-1\"></span>\n        }\n      </div>\n\n      <!-- Right: content -->\n      <div class=\"flex flex-1 flex-col gap-4 pb-11 pl-3 md:pl-6 lg:pl-9\">\n        <!-- Mobile badge + subtitle -->\n        <div class=\"flex flex-col gap-2 md:hidden\">\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\" class=\"w-fit text-xs\">{{ item.time }}</span>\n          }\n          @if (item.subtitle) {\n            <div class=\"font-medium\">{{ item.subtitle }}</div>\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"space-y-4\">\n          <div class=\"space-y-3\">\n            <h3 [class]=\"titleClasses()\">{{ item.title }}</h3>\n            @if (item.description) {\n              <p [class]=\"descriptionClasses()\">{{ item.description }}</p>\n            }\n          </div>\n          @if (item.contentTemplate) {\n            <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n          }\n        </div>\n      </div>\n    </div>\n  }\n}\n" }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "zItems", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLayout", required: false }] }] } });
 
 /**

package/fesm2022/shival99-z-ui-components-z-timeline.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"shival99-z-ui-components-z-timeline.mjs","sources":["../../../../libs/core-ui/components/z-timeline/z-timeline.variants.ts","../../../../libs/core-ui/components/z-timeline/z-timeline.component.ts","../../../../libs/core-ui/components/z-timeline/z-timeline.component.html","../../../../libs/core-ui/components/z-timeline/shival99-z-ui-components-z-timeline.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n// Host container\nexport const zTimelineVariants = cva(['relative block'], {\n  variants: {\n    zSize: {\n      sm: 'text-sm',\n      default: 'text-base',\n      lg: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\n// Outer dot ring\nexport const zTimelineDotVariants = cva(\n  ['flex shrink-0 items-center justify-center rounded-full bg-primary/10 transition-colors duration-300'],\n  {\n    variants: {\n      zSize: {\n        sm: 'size-4.5',\n        default: 'size-6',\n        lg: 'size-7',\n      },\n    },\n    defaultVariants: {\n      zSize: 'default',\n    },\n  }\n);\n\n// Inner dot\nexport const zTimelineInnerDotVariants = cva(['rounded-full bg-primary transition-colors duration-300'], {\n  variants: {\n    zSize: {\n      sm: 'size-2',\n      default: 'size-3',\n      lg: 'size-3.5',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\n// Time badge\nexport const zTimelineTimeBadgeVariants = cva(\n  [\n    'inline-flex w-fit shrink-0 items-center justify-center rounded-sm bg-primary px-2 py-0.5 text-sm font-medium text-primary-foreground transition-colors duration-300',\n  ],\n  {\n    variants: {\n      zSize: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-sm',\n      },\n    },\n    defaultVariants: {\n      zSize: 'default',\n    },\n  }\n);\n\n// Title\nexport const zTimelineTitleVariants = cva(['font-medium leading-snug text-foreground'], {\n  variants: {\n    zSize: {\n      sm: 'text-base',\n      default: 'text-lg md:text-xl lg:text-2xl',\n      lg: 'text-xl md:text-2xl',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\n// Description\nexport const zTimelineDescriptionVariants = cva(['text-muted-foreground leading-relaxed'], {\n  variants: {\n    zSize: {\n      sm: 'text-xs',\n      default: 'text-sm',\n      lg: 'text-base',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\nexport type ZTimelineVariants = VariantProps<typeof zTimelineVariants>;\n","import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZTimelineItem, ZTimelineLayout, ZTimelineSize } from './z-timeline.types';\nimport {\n  zTimelineDescriptionVariants,\n  zTimelineDotVariants,\n  zTimelineInnerDotVariants,\n  zTimelineTimeBadgeVariants,\n  zTimelineTitleVariants,\n  zTimelineVariants,\n} from './z-timeline.variants';\n\n@Component({\n  selector: 'z-timeline',\n  imports: [NgTemplateOutlet],\n  standalone: true,\n  templateUrl: './z-timeline.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ZTimelineComponent {\n  public readonly class = input<ClassValue>('');\n  public readonly zItems = input<ZTimelineItem[]>([]);\n  public readonly zSize = input<ZTimelineSize>('default');\n  public readonly zLayout = input<ZTimelineLayout>('default');\n\n  protected readonly hostClasses = computed(() =>\n    zMergeClasses(zTimelineVariants({ zSize: this.zSize() }), this.class())\n  );\n\n  protected readonly dotClasses = computed(() => zTimelineDotVariants({ zSize: this.zSize() }));\n\n  protected readonly innerDotClasses = computed(() => zTimelineInnerDotVariants({ zSize: this.zSize() }));\n\n  protected readonly badgeClasses = computed(() => zTimelineTimeBadgeVariants({ zSize: this.zSize() }));\n\n  protected readonly titleClasses = computed(() => zTimelineTitleVariants({ zSize: this.zSize() }));\n\n  protected readonly descriptionClasses = computed(() => zTimelineDescriptionVariants({ zSize: this.zSize() }));\n\n  protected readonly isAlternate = computed(() => this.zLayout() === 'alternate');\n}\n","@if (isAlternate()) {\n  <!-- ══════════════════════════════════════════════════════════ -->\n  <!-- ALTERNATE / ZIGZAG LAYOUT                                 -->\n  <!-- ══════════════════════════════════════════════════════════ -->\n  <div class=\"relative mx-auto max-w-7xl space-y-4\">\n    @for (item of zItems(); track item.id ?? $index; let isEven = $even) {\n      <div class=\"flex items-start md:flex-row\" [class.md:flex-row-reverse]=\"!isEven\">\n        <!-- Opposite-side badge (desktop only) -->\n        <div\n          class=\"hidden w-full md:flex md:flex-1 md:items-start\"\n          [class.md:justify-end]=\"isEven\"\n          [class.md:justify-start]=\"!isEven\">\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\">{{ item.time }}</span>\n          }\n        </div>\n\n        <!-- Center marker column -->\n        <div class=\"relative flex flex-col items-center pr-4 md:px-4\">\n          <div class=\"sticky top-40 z-40 flex items-center justify-center\">\n            <span [class]=\"dotClasses()\">\n              <span [class]=\"innerDotClasses()\"></span>\n            </span>\n          </div>\n        </div>\n\n        <!-- Content side -->\n        <div class=\"w-full md:flex md:flex-1\" [class.md:justify-start]=\"isEven\" [class.md:justify-end]=\"!isEven\">\n          <!-- Mobile badge -->\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\" class=\"mb-4 block text-left md:hidden\">{{ item.time }}</span>\n          }\n\n          <div>\n            <!-- Card -->\n            <div\n              class=\"bg-card text-card-foreground mb-8 flex flex-col gap-6 overflow-hidden rounded-xl border py-6 shadow-sm md:max-w-136\">\n              <div class=\"space-y-4 px-6\">\n                <div [class]=\"titleClasses()\">{{ item.title }}</div>\n                @if (item.description) {\n                  <p [class]=\"descriptionClasses()\">{{ item.description }}</p>\n                }\n                @if (item.contentTemplate) {\n                  <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Vertical line (absolute, behind everything) -->\n    <div class=\"bg-border absolute top-3 bottom-3 left-3 w-0.5 overflow-hidden md:left-1/2 md:-translate-x-1/2\">\n      <div class=\"bg-primary absolute inset-x-0 top-0 w-0.5 rounded-full\" style=\"height: 100%; opacity: 1\"></div>\n    </div>\n  </div>\n} @else {\n  <!-- ══════════════════════════════════════════════════════════ -->\n  <!-- DEFAULT / CHANGELOG LAYOUT                                -->\n  <!-- ══════════════════════════════════════════════════════════ -->\n  @for (item of zItems(); track item.id ?? $index; let isLast = $last) {\n    <div class=\"relative flex justify-end gap-2\">\n      <!-- Left: sticky badge + subtitle (desktop only) -->\n      <div class=\"sticky top-19 flex w-36 flex-col items-end gap-2 self-start pb-4 max-md:hidden\">\n        @if (item.time) {\n          <span [class]=\"badgeClasses()\">{{ item.time }}</span>\n        }\n        @if (item.subtitle) {\n          <div class=\"text-muted-foreground text-right text-sm font-medium\">{{ item.subtitle }}</div>\n        }\n      </div>\n\n      <!-- Center: dot + line -->\n      <div class=\"flex flex-col items-center\">\n        <div class=\"sticky top-19 flex size-6 items-center justify-center max-sm:top-5\">\n          <span [class]=\"dotClasses()\">\n            <span [class]=\"innerDotClasses()\"></span>\n          </span>\n        </div>\n        @if (!isLast) {\n          <span class=\"-mt-2.5 w-px flex-1 border\"></span>\n        }\n      </div>\n\n      <!-- Right: content -->\n      <div class=\"flex flex-1 flex-col gap-4 pb-11 pl-3 md:pl-6 lg:pl-9\">\n        <!-- Mobile badge + subtitle -->\n        <div class=\"flex flex-col gap-2 md:hidden\">\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\" class=\"w-fit text-xs\">{{ item.time }}</span>\n          }\n          @if (item.subtitle) {\n            <div class=\"font-medium\">{{ item.subtitle }}</div>\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"space-y-4\">\n          <div class=\"space-y-3\">\n            <h3 [class]=\"titleClasses()\">{{ item.title }}</h3>\n            @if (item.description) {\n              <p [class]=\"descriptionClasses()\">{{ item.description }}</p>\n            }\n          </div>\n          @if (item.contentTemplate) {\n            <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n          }\n        </div>\n      </div>\n    </div>\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"shival99-z-ui-components-z-timeline.mjs","sources":["../../../../libs/core-ui/components/z-timeline/z-timeline.variants.ts","../../../../libs/core-ui/components/z-timeline/z-timeline.component.ts","../../../../libs/core-ui/components/z-timeline/z-timeline.component.html","../../../../libs/core-ui/components/z-timeline/shival99-z-ui-components-z-timeline.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\n// Host container\nexport const zTimelineVariants = cva(['relative block'], {\n  variants: {\n    zSize: {\n      sm: 'text-sm',\n      default: 'text-base',\n      lg: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\n// Outer dot ring\nexport const zTimelineDotVariants = cva(\n  ['flex shrink-0 items-center justify-center rounded-full bg-primary/10 transition-colors duration-300'],\n  {\n    variants: {\n      zSize: {\n        sm: 'size-4.5',\n        default: 'size-6',\n        lg: 'size-7',\n      },\n    },\n    defaultVariants: {\n      zSize: 'default',\n    },\n  }\n);\n\n// Inner dot\nexport const zTimelineInnerDotVariants = cva(['rounded-full bg-primary transition-colors duration-300'], {\n  variants: {\n    zSize: {\n      sm: 'size-2',\n      default: 'size-3',\n      lg: 'size-3.5',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\n// Time badge\nexport const zTimelineTimeBadgeVariants = cva(\n  [\n    'inline-flex w-fit shrink-0 items-center justify-center rounded-sm bg-primary px-2 py-0.5 text-sm font-medium text-primary-foreground transition-colors duration-300',\n  ],\n  {\n    variants: {\n      zSize: {\n        sm: 'text-xs',\n        default: 'text-sm',\n        lg: 'text-sm',\n      },\n    },\n    defaultVariants: {\n      zSize: 'default',\n    },\n  }\n);\n\n// Title\nexport const zTimelineTitleVariants = cva(['font-medium leading-snug text-foreground'], {\n  variants: {\n    zSize: {\n      sm: 'text-base',\n      default: 'text-lg md:text-xl lg:text-2xl',\n      lg: 'text-xl md:text-2xl',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\n// Description\nexport const zTimelineDescriptionVariants = cva(['text-muted-foreground leading-relaxed'], {\n  variants: {\n    zSize: {\n      sm: 'text-xs',\n      default: 'text-sm',\n      lg: 'text-base',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\nexport type ZTimelineVariants = VariantProps<typeof zTimelineVariants>;\n","import { NgTemplateOutlet } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport type { ZTimelineItem, ZTimelineLayout, ZTimelineSize } from './z-timeline.types';\nimport {\n  zTimelineDescriptionVariants,\n  zTimelineDotVariants,\n  zTimelineInnerDotVariants,\n  zTimelineTimeBadgeVariants,\n  zTimelineTitleVariants,\n  zTimelineVariants,\n} from './z-timeline.variants';\n\n@Component({\n  selector: 'z-timeline',\n  imports: [NgTemplateOutlet, ZIconComponent],\n  standalone: true,\n  templateUrl: './z-timeline.component.html',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'hostClasses()',\n  },\n})\nexport class ZTimelineComponent {\n  public readonly class = input<ClassValue>('');\n  public readonly zItems = input<ZTimelineItem[]>([]);\n  public readonly zSize = input<ZTimelineSize>('default');\n  public readonly zLayout = input<ZTimelineLayout>('default');\n\n  protected readonly hostClasses = computed(() =>\n    zMergeClasses(zTimelineVariants({ zSize: this.zSize() }), this.class())\n  );\n\n  protected readonly dotClasses = computed(() => zTimelineDotVariants({ zSize: this.zSize() }));\n\n  protected readonly innerDotClasses = computed(() => zTimelineInnerDotVariants({ zSize: this.zSize() }));\n\n  protected readonly badgeClasses = computed(() => zTimelineTimeBadgeVariants({ zSize: this.zSize() }));\n\n  protected readonly titleClasses = computed(() => zTimelineTitleVariants({ zSize: this.zSize() }));\n\n  protected readonly descriptionClasses = computed(() => zTimelineDescriptionVariants({ zSize: this.zSize() }));\n\n  protected readonly isCareer = computed(() => this.zLayout() === 'career');\n\n  protected readonly isAlternate = computed(() => this.zLayout() === 'alternate');\n}\n","@if (isCareer()) {\n  <!-- ══════════════════════════════════════════════════════════ -->\n  <!-- CAREER / EXPERIENCE LAYOUT                                -->\n  <!-- ══════════════════════════════════════════════════════════ -->\n  <div class=\"mx-auto w-full max-w-3xl px-2 sm:px-4\">\n    <div class=\"relative ml-3\">\n      <div class=\"bg-border absolute top-3 bottom-3 left-0 w-0.5\"></div>\n\n      @for (item of zItems(); track item.id ?? $index; let isLast = $last) {\n        <article class=\"relative pb-10 pl-8\" [class.pb-0]=\"isLast\">\n          <span\n            class=\"bg-background border-primary absolute top-2 left-0 z-[1] size-3 -translate-x-1/2 rounded-full border-2\"></span>\n\n          <div class=\"space-y-3\">\n            <div class=\"flex items-center gap-2.5\">\n              <div class=\"bg-accent flex size-9 shrink-0 items-center justify-center rounded-full\">\n                <z-icon [zType]=\"item.icon ?? 'lucideBuilding2'\" zSize=\"18\" class=\"text-muted-foreground\" />\n              </div>\n              <span class=\"text-base font-medium\">{{ item.company ?? item.subtitle ?? 'Experience' }}</span>\n            </div>\n\n            <div class=\"space-y-2\">\n              <h3 class=\"text-foreground text-xl leading-tight font-semibold tracking-[-0.01em]\">{{ item.title }}</h3>\n              @if (item.period || item.time) {\n                <div class=\"text-muted-foreground flex items-center gap-2 text-sm\">\n                  <z-icon zType=\"lucideCalendar\" zSize=\"15\" class=\"shrink-0\" />\n                  <span>{{ item.period ?? item.time }}</span>\n                </div>\n              }\n            </div>\n\n            @if (item.description) {\n              <p class=\"text-muted-foreground text-sm leading-relaxed sm:text-base\">{{ item.description }}</p>\n            }\n\n            @if (item.technologies?.length) {\n              <div class=\"flex flex-wrap gap-2\">\n                @for (tech of item.technologies; track tech) {\n                  <span\n                    class=\"bg-secondary text-secondary-foreground inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-medium\">\n                    {{ tech }}\n                  </span>\n                }\n              </div>\n            }\n\n            @if (item.contentTemplate) {\n              <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n            }\n          </div>\n        </article>\n      }\n    </div>\n  </div>\n} @else if (isAlternate()) {\n  <!-- ══════════════════════════════════════════════════════════ -->\n  <!-- ALTERNATE / ZIGZAG LAYOUT                                 -->\n  <!-- ══════════════════════════════════════════════════════════ -->\n  <div class=\"relative mx-auto max-w-7xl space-y-4\">\n    @for (item of zItems(); track item.id ?? $index; let isEven = $even) {\n      <div class=\"flex items-start md:flex-row\" [class.md:flex-row-reverse]=\"!isEven\">\n        <!-- Opposite-side badge (desktop only) -->\n        <div\n          class=\"hidden w-full md:flex md:flex-1 md:items-start\"\n          [class.md:justify-end]=\"isEven\"\n          [class.md:justify-start]=\"!isEven\">\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\">{{ item.time }}</span>\n          }\n        </div>\n\n        <!-- Center marker column -->\n        <div class=\"relative flex flex-col items-center pr-4 md:px-4\">\n          <div class=\"z-40 flex items-center justify-center\">\n            <span [class]=\"dotClasses()\">\n              <span [class]=\"innerDotClasses()\"></span>\n            </span>\n          </div>\n        </div>\n\n        <!-- Content side -->\n        <div class=\"w-full md:flex md:flex-1\" [class.md:justify-start]=\"isEven\" [class.md:justify-end]=\"!isEven\">\n          <!-- Mobile badge -->\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\" class=\"mb-4 block text-left md:hidden\">{{ item.time }}</span>\n          }\n\n          <div>\n            <!-- Card -->\n            <div\n              class=\"bg-card text-card-foreground mb-8 flex flex-col gap-6 overflow-hidden rounded-xl border py-6 shadow-sm md:max-w-136\">\n              <div class=\"space-y-4 px-6\">\n                <div [class]=\"titleClasses()\">{{ item.title }}</div>\n                @if (item.description) {\n                  <p [class]=\"descriptionClasses()\">{{ item.description }}</p>\n                }\n                @if (item.contentTemplate) {\n                  <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    }\n\n    <!-- Vertical line (absolute, behind everything) -->\n    <div class=\"bg-border absolute top-3 bottom-3 left-3 w-0.5 overflow-hidden md:left-1/2 md:-translate-x-1/2\">\n      <div class=\"bg-primary absolute inset-x-0 top-0 w-0.5 rounded-full\" style=\"height: 100%; opacity: 1\"></div>\n    </div>\n  </div>\n} @else {\n  <!-- ══════════════════════════════════════════════════════════ -->\n  <!-- DEFAULT / CHANGELOG LAYOUT                                -->\n  <!-- ══════════════════════════════════════════════════════════ -->\n  @for (item of zItems(); track item.id ?? $index; let isLast = $last) {\n    <div class=\"relative flex justify-end gap-2\">\n      <!-- Left: badge + subtitle (desktop only) -->\n      <div class=\"flex w-36 flex-col items-end gap-2 self-start pb-4 max-md:hidden\">\n        @if (item.time) {\n          <span [class]=\"badgeClasses()\">{{ item.time }}</span>\n        }\n        @if (item.subtitle) {\n          <div class=\"text-muted-foreground text-right text-sm font-medium\">{{ item.subtitle }}</div>\n        }\n      </div>\n\n      <!-- Center: dot + line -->\n      <div class=\"relative flex flex-col items-center\">\n        <div class=\"bg-background relative z-[1] flex size-6 items-center justify-center rounded-full\">\n          <span [class]=\"dotClasses()\">\n            <span [class]=\"innerDotClasses()\"></span>\n          </span>\n        </div>\n        @if (!isLast) {\n          <span class=\"bg-border absolute top-6 bottom-0 left-1/2 w-px -translate-x-1/2\"></span>\n          <span class=\"w-px flex-1\"></span>\n        }\n      </div>\n\n      <!-- Right: content -->\n      <div class=\"flex flex-1 flex-col gap-4 pb-11 pl-3 md:pl-6 lg:pl-9\">\n        <!-- Mobile badge + subtitle -->\n        <div class=\"flex flex-col gap-2 md:hidden\">\n          @if (item.time) {\n            <span [class]=\"badgeClasses()\" class=\"w-fit text-xs\">{{ item.time }}</span>\n          }\n          @if (item.subtitle) {\n            <div class=\"font-medium\">{{ item.subtitle }}</div>\n          }\n        </div>\n\n        <!-- Content -->\n        <div class=\"space-y-4\">\n          <div class=\"space-y-3\">\n            <h3 [class]=\"titleClasses()\">{{ item.title }}</h3>\n            @if (item.description) {\n              <p [class]=\"descriptionClasses()\">{{ item.description }}</p>\n            }\n          </div>\n          @if (item.contentTemplate) {\n            <ng-container [ngTemplateOutlet]=\"item.contentTemplate\" />\n          }\n        </div>\n      </div>\n    </div>\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/shival99-z-ui-providers.mjs

@@ -210,6 +210,7 @@ function zCreateTranslateLoader(http, path = './assets/i18n/', extension = '.jso
 function initializeTranslate(defaultLang) {
     const translate = inject(TranslateService);
     const savedLang = ZCacheService.get(Z_LANG_CACHE_KEY) ?? defaultLang;
+    ZCacheService.set(Z_LANG_CACHE_KEY, savedLang);
     translate.setFallbackLang(defaultLang);
     return firstValueFrom(translate.use(savedLang));
 }