@shival99/z-ui 1.9.12 → 1.9.14

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

@@ -1,222 +1,79 @@
+import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Pipe, input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } 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';
 
-const zTimelineVariants = cva(['block relative'], {
+// Host container
+const zTimelineVariants = cva(['relative block'], {
     variants: {
         zSize: {
             sm: 'text-sm',
             default: 'text-base',
             lg: 'text-lg',
         },
-        zLayout: {
-            default: '',
-            reversed: '',
-            alternate: 'sm:max-w-4xl sm:mx-auto',
-        },
     },
     defaultVariants: {
         zSize: 'default',
-        zLayout: 'default',
-    },
-});
-const zTimelineItemVariants = cva(['group relative pb-10 last:pb-0'], {
-    variants: {
-        zLayout: {
-            default: 'pl-8 sm:pl-44',
-            reversed: 'pr-8 sm:pr-44 text-right',
-            alternate: 'pl-8 sm:pl-0 sm:grid sm:grid-cols-[1fr_24px_1fr] sm:gap-4',
-        },
-    },
-    defaultVariants: {
-        zLayout: 'default',
-    },
-});
-const zTimelineHeaderVariants = cva([
-    'mb-1 flex flex-col items-start',
-    'before:absolute before:h-full before:-translate-x-1/2 before:translate-y-3 before:self-start before:w-px',
-    'group-last:before:hidden',
-], {
-    variants: {
-        hasIcon: {
-            true: '',
-            false: [
-                'after:absolute after:box-content after:h-2 after:w-2 after:-translate-x-1/2 after:translate-y-1.5 after:rounded-full after:border-4 after:border-primary-foreground/95 after:bg-primary',
-            ],
-        },
-        zColor: {
-            default: '',
-            primary: '',
-            success: '',
-            warning: '',
-            error: '',
-            info: '',
-        },
-        zLineStyle: {
-            solid: 'before:bg-border',
-            dashed: 'before:border-l before:border-dashed before:border-border before:bg-transparent',
-        },
-        zLayout: {
-            default: 'before:left-2 after:left-2 sm:flex-row sm:before:left-0 sm:before:ml-[10rem] sm:after:left-0 sm:after:ml-[10rem]',
-            reversed: 'items-end before:right-2 after:right-2 before:translate-x-1/2 after:translate-x-1/2 sm:flex-row-reverse sm:before:right-0 sm:before:mr-[10rem] sm:after:right-0 sm:after:mr-[10rem]',
-            alternate: 'before:left-2 after:left-2 sm:before:hidden sm:after:hidden',
-        },
-    },
-    compoundVariants: [
-        { hasIcon: false, zColor: 'default', class: 'after:bg-foreground' },
-        { hasIcon: false, zColor: 'primary', class: 'after:bg-primary after:border-primary/20' },
-        { hasIcon: false, zColor: 'success', class: 'after:bg-green-500 after:border-green-500/20' },
-        { hasIcon: false, zColor: 'warning', class: 'after:bg-amber-500 after:border-amber-500/20' },
-        { hasIcon: false, zColor: 'error', class: 'after:bg-destructive after:border-destructive/20' },
-        { hasIcon: false, zColor: 'info', class: 'after:bg-blue-500 after:border-blue-500/20' },
-        { hasIcon: true, zLayout: 'default', class: 'sm:pl-[1.375rem] sm:before:ml-[10.75rem]' },
-        { hasIcon: true, zLayout: 'reversed', class: 'sm:pr-[1.375rem] sm:before:mr-[10.75rem]' },
-    ],
-    defaultVariants: {
-        hasIcon: false,
-        zColor: 'default',
-        zLineStyle: 'solid',
-        zLayout: 'default',
     },
 });
-const zTimelineDotVariants = cva(['hidden sm:flex relative z-10 flex-col items-center'], {
+// Outer dot ring
+const zTimelineDotVariants = cva(['flex shrink-0 items-center justify-center rounded-full bg-primary/10 transition-colors duration-300'], {
     variants: {
-        zLineStyle: {
-            solid: '',
-            dashed: '',
-        },
-    },
-    defaultVariants: {
-        zLineStyle: 'solid',
-    },
-});
-const zTimelineLineVariants = cva(['absolute top-0 -bottom-8 left-1/2 -translate-x-1/2 w-px group-last:hidden'], {
-    variants: {
-        zLineStyle: {
-            solid: 'bg-border',
-            dashed: 'border-l border-dashed border-border',
-        },
-    },
-    defaultVariants: {
-        zLineStyle: 'solid',
-    },
-});
-const zTimelineDotCircleVariants = cva(['h-2 w-2 rounded-full border-4 border-primary-foreground/95 shrink-0 relative z-10 box-content'], {
-    variants: {
-        zColor: {
-            default: 'bg-primary',
-            primary: 'bg-primary border-primary/20',
-            success: 'bg-green-500 border-green-500/20',
-            warning: 'bg-amber-500 border-amber-500/20',
-            error: 'bg-destructive border-destructive/20',
-            info: 'bg-blue-500 border-blue-500/20',
+        zSize: {
+            sm: 'size-4.5',
+            default: 'size-6',
+            lg: 'size-7',
         },
     },
     defaultVariants: {
-        zColor: 'default',
+        zSize: 'default',
     },
 });
-const zTimelineIconVariants = cva(['absolute z-10 -translate-x-1/2 translate-y-0.5 flex items-center justify-center rounded-full'], {
+// Inner dot
+const zTimelineInnerDotVariants = cva(['rounded-full bg-primary transition-colors duration-300'], {
     variants: {
-        zColor: {
-            default: 'text-foreground bg-background',
-            primary: 'bg-primary text-primary-foreground',
-            success: 'bg-green-500 text-white',
-            warning: 'bg-amber-500 text-white',
-            error: 'bg-destructive text-destructive-foreground',
-            info: 'bg-blue-500 text-white',
-        },
-        zIconStyle: {
-            filled: 'size-6',
-            outline: 'size-5 bg-background',
-        },
-        zLayout: {
-            default: 'left-2 sm:left-0 sm:ml-[10.75rem]',
-            reversed: 'right-2 translate-x-1/2 sm:right-0 sm:mr-[10.75rem]',
-            alternate: 'left-2 sm:hidden',
+        zSize: {
+            sm: 'size-2',
+            default: 'size-3',
+            lg: 'size-3.5',
         },
     },
-    compoundVariants: [
-        { zIconStyle: 'outline', zColor: 'default', class: '!text-foreground !bg-background !size-7' },
-        { zIconStyle: 'outline', zColor: 'primary', class: '!text-foreground !bg-background !size-7' },
-        { zIconStyle: 'outline', zColor: 'success', class: '!text-green-500 !bg-background !size-7' },
-        { zIconStyle: 'outline', zColor: 'warning', class: '!text-amber-500 !bg-background !size-7' },
-        { zIconStyle: 'outline', zColor: 'error', class: '!text-destructive !bg-background !size-7' },
-        { zIconStyle: 'outline', zColor: 'info', class: '!text-blue-500 !bg-background !size-7' },
-    ],
     defaultVariants: {
-        zColor: 'default',
-        zIconStyle: 'filled',
-        zLayout: 'default',
+        zSize: 'default',
     },
 });
-const zTimelineIconCenterVariants = cva(['flex size-6 items-center justify-center rounded-full shrink-0 relative z-10'], {
+// Time badge
+const zTimelineTimeBadgeVariants = cva([
+    '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',
+], {
     variants: {
-        zColor: {
-            default: 'text-foreground bg-background border-2 border-foreground',
-            primary: 'bg-primary text-primary-foreground',
-            success: 'bg-green-500 text-white',
-            warning: 'bg-amber-500 text-white',
-            error: 'bg-destructive text-destructive-foreground',
-            info: 'bg-blue-500 text-white',
-        },
-        zIconStyle: {
-            filled: '',
-            outline: 'bg-background',
+        zSize: {
+            sm: 'text-xs',
+            default: 'text-sm',
+            lg: 'text-sm',
         },
     },
-    compoundVariants: [
-        { zIconStyle: 'outline', zColor: 'default', class: 'text-foreground border-foreground' },
-        { zIconStyle: 'outline', zColor: 'primary', class: 'text-primary border-2 border-primary bg-background' },
-        { zIconStyle: 'outline', zColor: 'success', class: 'text-green-500 border-2 border-green-500 bg-background' },
-        { zIconStyle: 'outline', zColor: 'warning', class: 'text-amber-500 border-2 border-amber-500 bg-background' },
-        { zIconStyle: 'outline', zColor: 'error', class: 'text-destructive border-2 border-destructive bg-background' },
-        { zIconStyle: 'outline', zColor: 'info', class: 'text-blue-500 border-2 border-blue-500 bg-background' },
-    ],
     defaultVariants: {
-        zColor: 'default',
-        zIconStyle: 'filled',
+        zSize: 'default',
     },
 });
-const zTimelineTitleVariants = cva(['font-bold text-primary'], {
+// Title
+const zTimelineTitleVariants = cva(['font-medium leading-snug text-foreground'], {
     variants: {
         zSize: {
             sm: 'text-base',
-            default: 'text-xl',
-            lg: 'text-2xl',
+            default: 'text-lg md:text-xl lg:text-2xl',
+            lg: 'text-xl md:text-2xl',
         },
     },
     defaultVariants: {
         zSize: 'default',
     },
 });
-const zTimelineTimeVariants = cva([
-    'inline-flex items-center rounded-[0.25rem] border px-2.5 py-0.5 text-xs font-semibold transition-colors',
-    'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
-    'mb-3 h-6 w-36 translate-y-0.5 justify-center uppercase',
-    'sm:absolute sm:mb-0',
-], {
-    variants: {
-        zVariant: {
-            default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
-            secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
-            outline: 'border-border text-foreground',
-            muted: 'border-transparent bg-muted text-muted-foreground',
-        },
-        zLayout: {
-            default: 'left-0',
-            reversed: 'right-0',
-            alternate: 'sm:static sm:translate-y-0 sm:mb-0',
-        },
-    },
-    defaultVariants: {
-        zVariant: 'default',
-        zLayout: 'default',
-    },
-});
-const zTimelineDescriptionVariants = cva(['text-muted-foreground'], {
+// Description
+const zTimelineDescriptionVariants = cva(['text-muted-foreground leading-relaxed'], {
     variants: {
         zSize: {
             sm: 'text-xs',
@@ -228,106 +85,33 @@ const zTimelineDescriptionVariants = cva(['text-muted-foreground'], {
         zSize: 'default',
     },
 });
-const zTimelineContentVariants = cva([''], {
-    variants: {
-        zContentStyle: {
-            simple: '',
-            card: 'rounded-[0.3125rem] border border-border bg-card px-3 py-2 shadow-xs',
-        },
-    },
-    defaultVariants: {
-        zContentStyle: 'simple',
-    },
-});
-const zTimelineAlternateSideVariants = cva(['flex'], {
-    variants: {
-        side: {
-            left: 'justify-end text-right',
-            right: 'justify-start text-left',
-        },
-    },
-    defaultVariants: {
-        side: 'left',
-    },
-});
-
-class ZTimelineClassPipe {
-    transform(type, options = {}) {
-        const { item, layout, lineStyle, iconStyle, timeVariant, side } = options;
-        switch (type) {
-            case 'item':
-                return zTimelineItemVariants({ zLayout: layout });
-            case 'header':
-                return zTimelineHeaderVariants({
-                    hasIcon: !!item?.icon,
-                    zColor: item?.color ?? 'default',
-                    zLineStyle: lineStyle,
-                    zLayout: layout,
-                });
-            case 'icon':
-                return zTimelineIconVariants({
-                    zColor: item?.color ?? 'default',
-                    zIconStyle: iconStyle,
-                    zLayout: layout,
-                });
-            case 'iconCenter':
-                return zTimelineIconCenterVariants({
-                    zColor: item?.color ?? 'default',
-                    zIconStyle: iconStyle,
-                });
-            case 'dot':
-                return zTimelineDotVariants({ zLineStyle: lineStyle });
-            case 'line':
-                return zTimelineLineVariants({ zLineStyle: lineStyle });
-            case 'dotCircle':
-                return zTimelineDotCircleVariants({ zColor: item?.color ?? 'default' });
-            case 'time':
-                return zTimelineTimeVariants({ zVariant: timeVariant, zLayout: layout });
-            case 'side':
-                return zTimelineAlternateSideVariants({ side });
-            default:
-                return '';
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTimelineClassPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.6", ngImport: i0, type: ZTimelineClassPipe, isStandalone: true, name: "zTimelineClass" });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZTimelineClassPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'zTimelineClass', standalone: true }]
-        }] });
 
 class ZTimelineComponent {
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
     zItems = input([], ...(ngDevMode ? [{ debugName: "zItems" }] : []));
     zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
-    zTimeVariant = input('default', ...(ngDevMode ? [{ debugName: "zTimeVariant" }] : []));
-    zLineStyle = input('solid', ...(ngDevMode ? [{ debugName: "zLineStyle" }] : []));
-    zIconStyle = input('filled', ...(ngDevMode ? [{ debugName: "zIconStyle" }] : []));
     zLayout = input('default', ...(ngDevMode ? [{ debugName: "zLayout" }] : []));
-    zContentStyle = input('simple', ...(ngDevMode ? [{ debugName: "zContentStyle" }] : []));
-    hostClasses = computed(() => zMergeClasses(zTimelineVariants({ zSize: this.zSize(), zLayout: this.zLayout() }), this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    isAlternate = computed(() => this.zLayout() === 'alternate', ...(ngDevMode ? [{ debugName: "isAlternate" }] : []));
-    itemClasses = computed(() => zTimelineItemVariants({ zLayout: this.zLayout() }), ...(ngDevMode ? [{ debugName: "itemClasses" }] : []));
-    dotClasses = computed(() => zTimelineDotVariants({ zLineStyle: this.zLineStyle() }), ...(ngDevMode ? [{ debugName: "dotClasses" }] : []));
-    lineClasses = computed(() => zTimelineLineVariants({ zLineStyle: this.zLineStyle() }), ...(ngDevMode ? [{ debugName: "lineClasses" }] : []));
+    hostClasses = computed(() => zMergeClasses(zTimelineVariants({ zSize: this.zSize() }), this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
+    dotClasses = computed(() => zTimelineDotVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "dotClasses" }] : []));
+    innerDotClasses = computed(() => zTimelineInnerDotVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "innerDotClasses" }] : []));
+    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" }] : []));
-    contentClasses = computed(() => zTimelineContentVariants({ zContentStyle: this.zContentStyle() }), ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
-    iconSize = computed(() => (this.zIconStyle() === 'outline' ? '18' : '14'), ...(ngDevMode ? [{ debugName: "iconSize" }] : []));
+    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 }, zTimeVariant: { classPropertyName: "zTimeVariant", publicName: "zTimeVariant", isSignal: true, isRequired: false, transformFunction: null }, zLineStyle: { classPropertyName: "zLineStyle", publicName: "zLineStyle", isSignal: true, isRequired: false, transformFunction: null }, zIconStyle: { classPropertyName: "zIconStyle", publicName: "zIconStyle", isSignal: true, isRequired: false, transformFunction: null }, zLayout: { classPropertyName: "zLayout", publicName: "zLayout", isSignal: true, isRequired: false, transformFunction: null }, zContentStyle: { classPropertyName: "zContentStyle", publicName: "zContentStyle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, ngImport: i0, template: "@for (item of zItems(); track item.id ?? $index; let isEven = $even) {\n  <div [class]=\"itemClasses()\">\n    @if (item.icon) {\n      <div [class]=\"'icon' | zTimelineClass: { item: item, layout: zLayout(), iconStyle: zIconStyle() }\">\n        <z-icon [zType]=\"item.icon\" [zSize]=\"iconSize()\" />\n      </div>\n    }\n\n    @if (isAlternate()) {\n      <div [class]=\"'side' | zTimelineClass: { side: 'left' }\">\n        @if (isEven) {\n          @if (item.time) {\n            <div [class]=\"'time' | zTimelineClass: { layout: zLayout(), timeVariant: zTimeVariant() }\">\n              {{ item.time }}\n            </div>\n          }\n        } @else {\n          <div [class]=\"contentClasses()\">\n            <div [class]=\"titleClasses()\">{{ item.title }}</div>\n            @if (item.description) {\n              <div [class]=\"descriptionClasses()\">{{ item.description }}</div>\n            }\n          </div>\n        }\n      </div>\n\n      <div [class]=\"dotClasses()\">\n        <div [class]=\"lineClasses()\"></div>\n        @if (item.icon) {\n          <div [class]=\"'iconCenter' | zTimelineClass: { item: item, iconStyle: zIconStyle() }\">\n            <z-icon [zType]=\"item.icon\" [zSize]=\"iconSize()\" />\n          </div>\n        } @else {\n          <div [class]=\"'dotCircle' | zTimelineClass: { item: item }\"></div>\n        }\n      </div>\n\n      <div [class]=\"'side' | zTimelineClass: { side: 'right' }\">\n        @if (isEven) {\n          <div [class]=\"contentClasses()\">\n            <div [class]=\"titleClasses()\">{{ item.title }}</div>\n            @if (item.description) {\n              <div [class]=\"descriptionClasses()\">{{ item.description }}</div>\n            }\n          </div>\n        } @else {\n          @if (item.time) {\n            <div [class]=\"'time' | zTimelineClass: { layout: zLayout(), timeVariant: zTimeVariant() }\">\n              {{ item.time }}\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div [class]=\"'header' | zTimelineClass: { item: item, layout: zLayout(), lineStyle: zLineStyle() }\">\n        @if (item.time) {\n          <div [class]=\"'time' | zTimelineClass: { layout: zLayout(), timeVariant: zTimeVariant() }\">\n            {{ item.time }}\n          </div>\n        }\n        <div [class]=\"contentClasses()\">\n          <div [class]=\"titleClasses()\">{{ item.title }}</div>\n          @if (item.description) {\n            <div [class]=\"descriptionClasses()\">{{ item.description }}</div>\n          }\n        </div>\n      </div>\n    }\n  </div>\n}\n", dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "pipe", type: ZTimelineClassPipe, name: "zTimelineClass" }], 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: [ZIconComponent, ZTimelineClassPipe], 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: "@for (item of zItems(); track item.id ?? $index; let isEven = $even) {\n  <div [class]=\"itemClasses()\">\n    @if (item.icon) {\n      <div [class]=\"'icon' | zTimelineClass: { item: item, layout: zLayout(), iconStyle: zIconStyle() }\">\n        <z-icon [zType]=\"item.icon\" [zSize]=\"iconSize()\" />\n      </div>\n    }\n\n    @if (isAlternate()) {\n      <div [class]=\"'side' | zTimelineClass: { side: 'left' }\">\n        @if (isEven) {\n          @if (item.time) {\n            <div [class]=\"'time' | zTimelineClass: { layout: zLayout(), timeVariant: zTimeVariant() }\">\n              {{ item.time }}\n            </div>\n          }\n        } @else {\n          <div [class]=\"contentClasses()\">\n            <div [class]=\"titleClasses()\">{{ item.title }}</div>\n            @if (item.description) {\n              <div [class]=\"descriptionClasses()\">{{ item.description }}</div>\n            }\n          </div>\n        }\n      </div>\n\n      <div [class]=\"dotClasses()\">\n        <div [class]=\"lineClasses()\"></div>\n        @if (item.icon) {\n          <div [class]=\"'iconCenter' | zTimelineClass: { item: item, iconStyle: zIconStyle() }\">\n            <z-icon [zType]=\"item.icon\" [zSize]=\"iconSize()\" />\n          </div>\n        } @else {\n          <div [class]=\"'dotCircle' | zTimelineClass: { item: item }\"></div>\n        }\n      </div>\n\n      <div [class]=\"'side' | zTimelineClass: { side: 'right' }\">\n        @if (isEven) {\n          <div [class]=\"contentClasses()\">\n            <div [class]=\"titleClasses()\">{{ item.title }}</div>\n            @if (item.description) {\n              <div [class]=\"descriptionClasses()\">{{ item.description }}</div>\n            }\n          </div>\n        } @else {\n          @if (item.time) {\n            <div [class]=\"'time' | zTimelineClass: { layout: zLayout(), timeVariant: zTimeVariant() }\">\n              {{ item.time }}\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div [class]=\"'header' | zTimelineClass: { item: item, layout: zLayout(), lineStyle: zLineStyle() }\">\n        @if (item.time) {\n          <div [class]=\"'time' | zTimelineClass: { layout: zLayout(), timeVariant: zTimeVariant() }\">\n            {{ item.time }}\n          </div>\n        }\n        <div [class]=\"contentClasses()\">\n          <div [class]=\"titleClasses()\">{{ item.title }}</div>\n          @if (item.description) {\n            <div [class]=\"descriptionClasses()\">{{ item.description }}</div>\n          }\n        </div>\n      </div>\n    }\n  </div>\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 }] }], zTimeVariant: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTimeVariant", required: false }] }], zLineStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLineStyle", required: false }] }], zIconStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zIconStyle", required: false }] }], zLayout: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLayout", required: false }] }], zContentStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zContentStyle", required: false }] }] } });
+                    }, 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 }] }] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ZTimelineClassPipe, ZTimelineComponent, zTimelineContentVariants, zTimelineDescriptionVariants, zTimelineHeaderVariants, zTimelineIconVariants, zTimelineItemVariants, zTimelineTimeVariants, zTimelineTitleVariants, zTimelineVariants };
+export { ZTimelineComponent, zTimelineDescriptionVariants, zTimelineDotVariants, zTimelineInnerDotVariants, zTimelineTimeBadgeVariants, zTimelineTitleVariants, zTimelineVariants };
 //# sourceMappingURL=shival99-z-ui-components-z-timeline.mjs.map

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/pipes/z-timeline-class.pipe.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\nexport const zTimelineVariants = cva(['block relative'], {\n  variants: {\n    zSize: {\n      sm: 'text-sm',\n      default: 'text-base',\n      lg: 'text-lg',\n    },\n    zLayout: {\n      default: '',\n      reversed: '',\n      alternate: 'sm:max-w-4xl sm:mx-auto',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n    zLayout: 'default',\n  },\n});\n\nexport const zTimelineItemVariants = cva(['group relative pb-10 last:pb-0'], {\n  variants: {\n    zLayout: {\n      default: 'pl-8 sm:pl-44',\n      reversed: 'pr-8 sm:pr-44 text-right',\n      alternate: 'pl-8 sm:pl-0 sm:grid sm:grid-cols-[1fr_24px_1fr] sm:gap-4',\n    },\n  },\n  defaultVariants: {\n    zLayout: 'default',\n  },\n});\n\nexport const zTimelineHeaderVariants = cva(\n  [\n    'mb-1 flex flex-col items-start',\n    'before:absolute before:h-full before:-translate-x-1/2 before:translate-y-3 before:self-start before:w-px',\n    'group-last:before:hidden',\n  ],\n  {\n    variants: {\n      hasIcon: {\n        true: '',\n        false: [\n          'after:absolute after:box-content after:h-2 after:w-2 after:-translate-x-1/2 after:translate-y-1.5 after:rounded-full after:border-4 after:border-primary-foreground/95 after:bg-primary',\n        ],\n      },\n      zColor: {\n        default: '',\n        primary: '',\n        success: '',\n        warning: '',\n        error: '',\n        info: '',\n      },\n      zLineStyle: {\n        solid: 'before:bg-border',\n        dashed: 'before:border-l before:border-dashed before:border-border before:bg-transparent',\n      },\n      zLayout: {\n        default:\n          'before:left-2 after:left-2 sm:flex-row sm:before:left-0 sm:before:ml-[10rem] sm:after:left-0 sm:after:ml-[10rem]',\n        reversed:\n          'items-end before:right-2 after:right-2 before:translate-x-1/2 after:translate-x-1/2 sm:flex-row-reverse sm:before:right-0 sm:before:mr-[10rem] sm:after:right-0 sm:after:mr-[10rem]',\n        alternate: 'before:left-2 after:left-2 sm:before:hidden sm:after:hidden',\n      },\n    },\n    compoundVariants: [\n      { hasIcon: false, zColor: 'default', class: 'after:bg-foreground' },\n      { hasIcon: false, zColor: 'primary', class: 'after:bg-primary after:border-primary/20' },\n      { hasIcon: false, zColor: 'success', class: 'after:bg-green-500 after:border-green-500/20' },\n      { hasIcon: false, zColor: 'warning', class: 'after:bg-amber-500 after:border-amber-500/20' },\n      { hasIcon: false, zColor: 'error', class: 'after:bg-destructive after:border-destructive/20' },\n      { hasIcon: false, zColor: 'info', class: 'after:bg-blue-500 after:border-blue-500/20' },\n      { hasIcon: true, zLayout: 'default', class: 'sm:pl-[1.375rem] sm:before:ml-[10.75rem]' },\n      { hasIcon: true, zLayout: 'reversed', class: 'sm:pr-[1.375rem] sm:before:mr-[10.75rem]' },\n    ],\n    defaultVariants: {\n      hasIcon: false,\n      zColor: 'default',\n      zLineStyle: 'solid',\n      zLayout: 'default',\n    },\n  }\n);\n\nexport const zTimelineDotVariants = cva(['hidden sm:flex relative z-10 flex-col items-center'], {\n  variants: {\n    zLineStyle: {\n      solid: '',\n      dashed: '',\n    },\n  },\n  defaultVariants: {\n    zLineStyle: 'solid',\n  },\n});\n\nexport const zTimelineLineVariants = cva(\n  ['absolute top-0 -bottom-8 left-1/2 -translate-x-1/2 w-px group-last:hidden'],\n  {\n    variants: {\n      zLineStyle: {\n        solid: 'bg-border',\n        dashed: 'border-l border-dashed border-border',\n      },\n    },\n    defaultVariants: {\n      zLineStyle: 'solid',\n    },\n  }\n);\n\nexport const zTimelineDotCircleVariants = cva(\n  ['h-2 w-2 rounded-full border-4 border-primary-foreground/95 shrink-0 relative z-10 box-content'],\n  {\n    variants: {\n      zColor: {\n        default: 'bg-primary',\n        primary: 'bg-primary border-primary/20',\n        success: 'bg-green-500 border-green-500/20',\n        warning: 'bg-amber-500 border-amber-500/20',\n        error: 'bg-destructive border-destructive/20',\n        info: 'bg-blue-500 border-blue-500/20',\n      },\n    },\n    defaultVariants: {\n      zColor: 'default',\n    },\n  }\n);\n\nexport const zTimelineIconVariants = cva(\n  ['absolute z-10 -translate-x-1/2 translate-y-0.5 flex items-center justify-center rounded-full'],\n  {\n    variants: {\n      zColor: {\n        default: 'text-foreground bg-background',\n        primary: 'bg-primary text-primary-foreground',\n        success: 'bg-green-500 text-white',\n        warning: 'bg-amber-500 text-white',\n        error: 'bg-destructive text-destructive-foreground',\n        info: 'bg-blue-500 text-white',\n      },\n      zIconStyle: {\n        filled: 'size-6',\n        outline: 'size-5 bg-background',\n      },\n      zLayout: {\n        default: 'left-2 sm:left-0 sm:ml-[10.75rem]',\n        reversed: 'right-2 translate-x-1/2 sm:right-0 sm:mr-[10.75rem]',\n        alternate: 'left-2 sm:hidden',\n      },\n    },\n    compoundVariants: [\n      { zIconStyle: 'outline', zColor: 'default', class: '!text-foreground !bg-background !size-7' },\n      { zIconStyle: 'outline', zColor: 'primary', class: '!text-foreground !bg-background !size-7' },\n      { zIconStyle: 'outline', zColor: 'success', class: '!text-green-500 !bg-background !size-7' },\n      { zIconStyle: 'outline', zColor: 'warning', class: '!text-amber-500 !bg-background !size-7' },\n      { zIconStyle: 'outline', zColor: 'error', class: '!text-destructive !bg-background !size-7' },\n      { zIconStyle: 'outline', zColor: 'info', class: '!text-blue-500 !bg-background !size-7' },\n    ],\n    defaultVariants: {\n      zColor: 'default',\n      zIconStyle: 'filled',\n      zLayout: 'default',\n    },\n  }\n);\n\nexport const zTimelineIconCenterVariants = cva(\n  ['flex size-6 items-center justify-center rounded-full shrink-0 relative z-10'],\n  {\n    variants: {\n      zColor: {\n        default: 'text-foreground bg-background border-2 border-foreground',\n        primary: 'bg-primary text-primary-foreground',\n        success: 'bg-green-500 text-white',\n        warning: 'bg-amber-500 text-white',\n        error: 'bg-destructive text-destructive-foreground',\n        info: 'bg-blue-500 text-white',\n      },\n      zIconStyle: {\n        filled: '',\n        outline: 'bg-background',\n      },\n    },\n    compoundVariants: [\n      { zIconStyle: 'outline', zColor: 'default', class: 'text-foreground border-foreground' },\n      { zIconStyle: 'outline', zColor: 'primary', class: 'text-primary border-2 border-primary bg-background' },\n      { zIconStyle: 'outline', zColor: 'success', class: 'text-green-500 border-2 border-green-500 bg-background' },\n      { zIconStyle: 'outline', zColor: 'warning', class: 'text-amber-500 border-2 border-amber-500 bg-background' },\n      { zIconStyle: 'outline', zColor: 'error', class: 'text-destructive border-2 border-destructive bg-background' },\n      { zIconStyle: 'outline', zColor: 'info', class: 'text-blue-500 border-2 border-blue-500 bg-background' },\n    ],\n    defaultVariants: {\n      zColor: 'default',\n      zIconStyle: 'filled',\n    },\n  }\n);\n\nexport const zTimelineTitleVariants = cva(['font-bold text-primary'], {\n  variants: {\n    zSize: {\n      sm: 'text-base',\n      default: 'text-xl',\n      lg: 'text-2xl',\n    },\n  },\n  defaultVariants: {\n    zSize: 'default',\n  },\n});\n\nexport const zTimelineTimeVariants = cva(\n  [\n    'inline-flex items-center rounded-[0.25rem] border px-2.5 py-0.5 text-xs font-semibold transition-colors',\n    'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',\n    'mb-3 h-6 w-36 translate-y-0.5 justify-center uppercase',\n    'sm:absolute sm:mb-0',\n  ],\n  {\n    variants: {\n      zVariant: {\n        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',\n        secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',\n        outline: 'border-border text-foreground',\n        muted: 'border-transparent bg-muted text-muted-foreground',\n      },\n      zLayout: {\n        default: 'left-0',\n        reversed: 'right-0',\n        alternate: 'sm:static sm:translate-y-0 sm:mb-0',\n      },\n    },\n    defaultVariants: {\n      zVariant: 'default',\n      zLayout: 'default',\n    },\n  }\n);\n\nexport const zTimelineDescriptionVariants = cva(['text-muted-foreground'], {\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 const zTimelineContentVariants = cva([''], {\n  variants: {\n    zContentStyle: {\n      simple: '',\n      card: 'rounded-[0.3125rem] border border-border bg-card px-3 py-2 shadow-xs',\n    },\n  },\n  defaultVariants: {\n    zContentStyle: 'simple',\n  },\n});\n\nexport const zTimelineAlternateSideVariants = cva(['flex'], {\n  variants: {\n    side: {\n      left: 'justify-end text-right',\n      right: 'justify-start text-left',\n    },\n  },\n  defaultVariants: {\n    side: 'left',\n  },\n});\n\nexport type ZTimelineVariants = VariantProps<typeof zTimelineVariants>;\nexport type ZTimelineItemVariants = VariantProps<typeof zTimelineItemVariants>;\nexport type ZTimelineHeaderVariants = VariantProps<typeof zTimelineHeaderVariants>;\nexport type ZTimelineIconVariants = VariantProps<typeof zTimelineIconVariants>;\nexport type ZTimelineTimeVariants = VariantProps<typeof zTimelineTimeVariants>;\nexport type ZTimelineContentVariants = VariantProps<typeof zTimelineContentVariants>;\n","import { Pipe, PipeTransform } from '@angular/core';\nimport type { ZTimelineClassOptions, ZTimelineClassType } from '../z-timeline.types';\nimport {\n  zTimelineAlternateSideVariants,\n  zTimelineDotCircleVariants,\n  zTimelineDotVariants,\n  zTimelineHeaderVariants,\n  zTimelineIconCenterVariants,\n  zTimelineIconVariants,\n  zTimelineItemVariants,\n  zTimelineLineVariants,\n  zTimelineTimeVariants,\n} from '../z-timeline.variants';\n\n@Pipe({ name: 'zTimelineClass', standalone: true })\nexport class ZTimelineClassPipe implements PipeTransform {\n  transform(type: ZTimelineClassType, options: ZTimelineClassOptions = {}): string {\n    const { item, layout, lineStyle, iconStyle, timeVariant, side } = options;\n\n    switch (type) {\n      case 'item':\n        return zTimelineItemVariants({ zLayout: layout });\n\n      case 'header':\n        return zTimelineHeaderVariants({\n          hasIcon: !!item?.icon,\n          zColor: item?.color ?? 'default',\n          zLineStyle: lineStyle,\n          zLayout: layout,\n        });\n\n      case 'icon':\n        return zTimelineIconVariants({\n          zColor: item?.color ?? 'default',\n          zIconStyle: iconStyle,\n          zLayout: layout,\n        });\n\n      case 'iconCenter':\n        return zTimelineIconCenterVariants({\n          zColor: item?.color ?? 'default',\n          zIconStyle: iconStyle,\n        });\n\n      case 'dot':\n        return zTimelineDotVariants({ zLineStyle: lineStyle });\n\n      case 'line':\n        return zTimelineLineVariants({ zLineStyle: lineStyle });\n\n      case 'dotCircle':\n        return zTimelineDotCircleVariants({ zColor: item?.color ?? 'default' });\n\n      case 'time':\n        return zTimelineTimeVariants({ zVariant: timeVariant, zLayout: layout });\n\n      case 'side':\n        return zTimelineAlternateSideVariants({ side });\n\n      default:\n        return '';\n    }\n  }\n}\n","import { 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 { ZTimelineClassPipe } from './pipes';\nimport type {\n  ZTimelineContentStyle,\n  ZTimelineIconStyle,\n  ZTimelineItem,\n  ZTimelineLayout,\n  ZTimelineLineStyle,\n  ZTimelineSize,\n} from './z-timeline.types';\nimport {\n  zTimelineContentVariants,\n  zTimelineDescriptionVariants,\n  zTimelineDotVariants,\n  zTimelineItemVariants,\n  zTimelineLineVariants,\n  zTimelineTitleVariants,\n  zTimelineVariants,\n} from './z-timeline.variants';\n\n@Component({\n  selector: 'z-timeline',\n  imports: [ZIconComponent, ZTimelineClassPipe],\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 zTimeVariant = input<'default' | 'secondary' | 'outline' | 'muted'>('default');\n  public readonly zLineStyle = input<ZTimelineLineStyle>('solid');\n  public readonly zIconStyle = input<ZTimelineIconStyle>('filled');\n  public readonly zLayout = input<ZTimelineLayout>('default');\n  public readonly zContentStyle = input<ZTimelineContentStyle>('simple');\n\n  protected readonly hostClasses = computed(() =>\n    zMergeClasses(zTimelineVariants({ zSize: this.zSize(), zLayout: this.zLayout() }), this.class())\n  );\n\n  protected readonly isAlternate = computed(() => this.zLayout() === 'alternate');\n  protected readonly itemClasses = computed(() => zTimelineItemVariants({ zLayout: this.zLayout() }));\n  protected readonly dotClasses = computed(() => zTimelineDotVariants({ zLineStyle: this.zLineStyle() }));\n  protected readonly lineClasses = computed(() => zTimelineLineVariants({ zLineStyle: this.zLineStyle() }));\n  protected readonly titleClasses = computed(() => zTimelineTitleVariants({ zSize: this.zSize() }));\n  protected readonly descriptionClasses = computed(() => zTimelineDescriptionVariants({ zSize: this.zSize() }));\n  protected readonly contentClasses = computed(() => zTimelineContentVariants({ zContentStyle: this.zContentStyle() }));\n  protected readonly iconSize = computed(() => (this.zIconStyle() === 'outline' ? '18' : '14'));\n}\n","@for (item of zItems(); track item.id ?? $index; let isEven = $even) {\n  <div [class]=\"itemClasses()\">\n    @if (item.icon) {\n      <div [class]=\"'icon' | zTimelineClass: { item: item, layout: zLayout(), iconStyle: zIconStyle() }\">\n        <z-icon [zType]=\"item.icon\" [zSize]=\"iconSize()\" />\n      </div>\n    }\n\n    @if (isAlternate()) {\n      <div [class]=\"'side' | zTimelineClass: { side: 'left' }\">\n        @if (isEven) {\n          @if (item.time) {\n            <div [class]=\"'time' | zTimelineClass: { layout: zLayout(), timeVariant: zTimeVariant() }\">\n              {{ item.time }}\n            </div>\n          }\n        } @else {\n          <div [class]=\"contentClasses()\">\n            <div [class]=\"titleClasses()\">{{ item.title }}</div>\n            @if (item.description) {\n              <div [class]=\"descriptionClasses()\">{{ item.description }}</div>\n            }\n          </div>\n        }\n      </div>\n\n      <div [class]=\"dotClasses()\">\n        <div [class]=\"lineClasses()\"></div>\n        @if (item.icon) {\n          <div [class]=\"'iconCenter' | zTimelineClass: { item: item, iconStyle: zIconStyle() }\">\n            <z-icon [zType]=\"item.icon\" [zSize]=\"iconSize()\" />\n          </div>\n        } @else {\n          <div [class]=\"'dotCircle' | zTimelineClass: { item: item }\"></div>\n        }\n      </div>\n\n      <div [class]=\"'side' | zTimelineClass: { side: 'right' }\">\n        @if (isEven) {\n          <div [class]=\"contentClasses()\">\n            <div [class]=\"titleClasses()\">{{ item.title }}</div>\n            @if (item.description) {\n              <div [class]=\"descriptionClasses()\">{{ item.description }}</div>\n            }\n          </div>\n        } @else {\n          @if (item.time) {\n            <div [class]=\"'time' | zTimelineClass: { layout: zLayout(), timeVariant: zTimeVariant() }\">\n              {{ item.time }}\n            </div>\n          }\n        }\n      </div>\n    } @else {\n      <div [class]=\"'header' | zTimelineClass: { item: item, layout: zLayout(), lineStyle: zLineStyle() }\">\n        @if (item.time) {\n          <div [class]=\"'time' | zTimelineClass: { layout: zLayout(), timeVariant: zTimeVariant() }\">\n            {{ item.time }}\n          </div>\n        }\n        <div [class]=\"contentClasses()\">\n          <div [class]=\"titleClasses()\">{{ item.title }}</div>\n          @if (item.description) {\n            <div [class]=\"descriptionClasses()\">{{ item.description }}</div>\n          }\n        </div>\n      </div>\n    }\n  </div>\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-components-z-upload.mjs

@@ -46,10 +46,7 @@ const zUploadDropzoneVariants = cva([
         zStatus: 'default',
     },
 });
-const zUploadFileItemVariants = cva([
-    'relative flex items-center gap-3 rounded-sm border border-input bg-background p-3',
-    'transition-all duration-200',
-], {
+const zUploadFileItemVariants = cva(['relative flex items-center gap-3 rounded-sm border border-input bg-background p-3', 'transition-all duration-200'], {
     variants: {
         zStatus: {
             pending: '',