@shival99/z-ui 1.9.17 → 1.9.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/shival99-z-ui-components-z-accordion.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-autocomplete.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-breadcrumb.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-button-group.mjs +9 -9
- package/fesm2022/shival99-z-ui-components-z-button.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-calendar.mjs +42 -42
- package/fesm2022/shival99-z-ui-components-z-card.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-chat.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-checkbox.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-code.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs +15 -15
- package/fesm2022/shival99-z-ui-components-z-dropdown-menu.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-editor.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-empty.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-filter.mjs +27 -27
- package/fesm2022/shival99-z-ui-components-z-gallery.mjs +12 -12
- package/fesm2022/shival99-z-ui-components-z-icon.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-input.mjs +4 -4
- package/fesm2022/shival99-z-ui-components-z-input.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-kanban.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-loading.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-menu.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-modal.mjs +15 -15
- package/fesm2022/shival99-z-ui-components-z-pagination.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-popover.mjs +9 -9
- package/fesm2022/shival99-z-ui-components-z-radio.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-select.mjs +20 -20
- package/fesm2022/shival99-z-ui-components-z-select.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-skeleton-auto.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-skeleton.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-steps.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-switch.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-table.mjs +72 -72
- package/fesm2022/shival99-z-ui-components-z-tabs.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-tags.mjs +12 -12
- package/fesm2022/shival99-z-ui-components-z-timeline.mjs +3 -3
- package/fesm2022/shival99-z-ui-components-z-toast.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-tooltip.mjs +6 -6
- package/fesm2022/shival99-z-ui-components-z-upload.mjs +3 -3
- package/fesm2022/shival99-z-ui-pipes.mjs +18 -18
- package/fesm2022/shival99-z-ui-services.mjs +24 -24
- package/package.json +2 -1
- package/types/shival99-z-ui-providers.d.ts +2 -2
|
@@ -102,10 +102,10 @@ class ZSkeletonComponent {
|
|
|
102
102
|
}
|
|
103
103
|
this._calculatedRows.set(1);
|
|
104
104
|
}
|
|
105
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
105
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
106
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZSkeletonComponent, isStandalone: true, selector: "z-skeleton", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zWidth: { classPropertyName: "zWidth", publicName: "zWidth", isSignal: true, isRequired: false, transformFunction: null }, zHeight: { classPropertyName: "zHeight", publicName: "zHeight", isSignal: true, isRequired: false, transformFunction: null }, zRows: { classPropertyName: "zRows", publicName: "zRows", isSignal: true, isRequired: false, transformFunction: null }, zGap: { classPropertyName: "zGap", publicName: "zGap", isSignal: true, isRequired: false, transformFunction: null }, zAnimated: { classPropertyName: "zAnimated", publicName: "zAnimated", isSignal: true, isRequired: false, transformFunction: null }, zRadius: { classPropertyName: "zRadius", publicName: "zRadius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "zWidth()", "style.height": "hostHeight()" }, classAttribute: "z-skeleton-host" }, ngImport: i0, template: "<div class=\"z-skeleton-container\" [class]=\"containerClass()\">\n @if (zType() === 'circle') {\n <div [class]=\"skeletonClasses()\" [style]=\"circleStyles()\"></div>\n } @else if (zType() === 'bar' || zType() === 'text') {\n @if (shouldShowMultipleRows()) {\n @for (row of rowsArray(); track row.index) {\n <div\n class=\"z-skeleton-row\"\n [class]=\"skeletonClasses()\"\n [style.margin-bottom.px]=\"row.index === rowsArray().length - 1 ? 0 : zGap()\"\n [style.height]=\"row.height\"\n [style.width]=\"zWidth()\"\n [style.border-radius]=\"zRadius()\"></div>\n }\n } @else {\n <div\n [class]=\"skeletonClasses()\"\n [style.width]=\"zWidth()\"\n [style.height]=\"zHeight() || '100%'\"\n [style.border-radius]=\"zRadius()\"></div>\n }\n }\n</div>\n", styles: [".z-skeleton-container{display:block;width:100%;height:100%}.z-skeleton{background-color:#e0e0e0;position:relative;overflow:hidden}:host-context(.dark) .z-skeleton{background-color:#374151}.z-skeleton-bar,.z-skeleton-text{width:100%;height:100%}.z-skeleton-row{width:100%}.z-skeleton-circle{border-radius:50%;aspect-ratio:1/1}.z-skeleton-circle-sm{width:2rem;height:2rem}.z-skeleton-circle-default{width:3rem;height:3rem}.z-skeleton-circle-lg{width:4rem;height:4rem}.z-skeleton-text{height:1rem;border-radius:.25rem}.z-skeleton-animated:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.4) 50%,transparent 100%);animation:z-skeleton-shimmer 1.5s infinite}@keyframes z-skeleton-shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}:host{display:block;width:100%;height:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
107
107
|
}
|
|
108
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
108
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSkeletonComponent, decorators: [{
|
|
109
109
|
type: Component,
|
|
110
110
|
args: [{ selector: 'z-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
111
111
|
class: 'z-skeleton-host',
|
|
@@ -378,10 +378,10 @@ class ZStepsComponent {
|
|
|
378
378
|
}
|
|
379
379
|
this.zOnStepClick.emit(index);
|
|
380
380
|
}
|
|
381
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
382
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZStepsComponent, isStandalone: true, selector: "z-steps", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSteps: { classPropertyName: "zSteps", publicName: "zSteps", isSignal: true, isRequired: true, transformFunction: null }, zCurrent: { classPropertyName: "zCurrent", publicName: "zCurrent", isSignal: true, isRequired: false, transformFunction: null }, zOrientation: { classPropertyName: "zOrientation", publicName: "zOrientation", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zClickable: { classPropertyName: "zClickable", publicName: "zClickable", isSignal: true, isRequired: false, transformFunction: null }, zShowNumber: { classPropertyName: "zShowNumber", publicName: "zShowNumber", isSignal: true, isRequired: false, transformFunction: null }, zResponsive: { classPropertyName: "zResponsive", publicName: "zResponsive", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnStepClick: "zOnStepClick", zControl: "zControl" }, host: { classAttribute: "block" }, ngImport: i0, template: "<ol\n [class]=\"containerClasses()\"\n [class.rounded-md]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n [class.border]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n [class.border-border/70]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n [class.bg-muted/20]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n [class.p-2]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\">\n @for (step of mergedSteps(); track $index; let i = $index; let last = $last) {\n @if (effectiveOrientation() === 'vertical') {\n @if (zType() === 'dot') {\n <!-- Vertical Dot Layout -->\n <li\n class=\"flex items-start gap-3\"\n [class.cursor-pointer]=\"zClickable() && !step.disabled\"\n [class.cursor-not-allowed]=\"step.disabled\"\n [class.opacity-50]=\"step.disabled\"\n (click)=\"onStepClick(i)\">\n <!-- Dot + Line Column -->\n <div class=\"flex w-10 shrink-0 flex-col items-center\">\n <!-- Dot -->\n <span [class]=\"getDotClassesByIndex()[i]\" class=\"shrink-0\"></span>\n <!-- Vertical Line -->\n @if (!last) {\n <div\n class=\"my-1 h-10 w-[0.125rem] rounded-full\"\n [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n [class.bg-muted-foreground/30]=\"\n stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n \"></div>\n }\n </div>\n\n <!-- Content (optional) -->\n @if (step.title) {\n <span\n class=\"pt-0.5 text-sm\"\n [class.text-foreground]=\"stepStatuses()[i] === 'current'\"\n [class.font-medium]=\"stepStatuses()[i] === 'current'\"\n [class.text-muted-foreground]=\"stepStatuses()[i] !== 'current'\">\n {{ step.title }}\n </span>\n }\n </li>\n } @else {\n <!-- Vertical Layout -->\n <li\n class=\"flex items-start gap-3\"\n [class.cursor-pointer]=\"zClickable() && !step.disabled\"\n [class.cursor-not-allowed]=\"step.disabled\"\n [class.opacity-50]=\"step.disabled\"\n (click)=\"onStepClick(i)\">\n <div class=\"flex w-10 shrink-0 flex-col items-center\">\n <!-- Step Icon -->\n <span [class]=\"iconClassesMap().get(i)\" class=\"relative! start-auto!\">\n @switch (stepStatuses()[i]) {\n @case ('completed') {\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n } @else {\n <z-icon zType=\"lucideCheck\" [zSize]=\"getIconSizeByIndex()[i]\" />\n }\n }\n @case ('error') {\n <z-icon zType=\"lucideX\" [zSize]=\"getIconSizeByIndex()[i]\" />\n }\n @default {\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n } @else if (zShowNumber()) {\n <span class=\"font-medium\">{{ i + 1 }}</span>\n }\n }\n }\n </span>\n\n <!-- Vertical Line -->\n @if (!last) {\n <div\n class=\"my-1 h-10 w-[0.125rem] rounded-full\"\n [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n [class.bg-muted-foreground/30]=\"\n stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n \"></div>\n }\n </div>\n\n <!-- Content -->\n @if (step.title || step.description) {\n <div class=\"min-w-0 flex-1 pt-1 pb-3\">\n @if (step.title) {\n <h3 class=\"leading-tight font-medium\">{{ step.title }}</h3>\n }\n @if (step.description) {\n <p class=\"text-muted-foreground mt-1 text-sm\">{{ step.description }}</p>\n }\n </div>\n }\n </li>\n }\n } @else {\n <!-- Horizontal Layout -->\n <li\n [class]=\"zType() === 'arrow' ? 'flex-1' : 'flex-1 last:flex-none'\"\n [class.cursor-pointer]=\"zClickable() && !step.disabled\"\n [class.cursor-not-allowed]=\"step.disabled\"\n [class.opacity-50]=\"step.disabled\"\n (click)=\"onStepClick(i)\">\n @if (zType() === 'arrow') {\n <!-- Arrow Style -->\n <div [class]=\"getArrowClassesByIndex()[i]\">\n <div class=\"flex items-center gap-3.5\">\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" class=\"shrink-0\" />\n }\n <div class=\"flex min-w-0 flex-col\">\n @if (step.title) {\n <h3\n z-tooltip\n [zContent]=\"step.title\"\n [zAutoDetect]=\"true\"\n zPosition=\"top\"\n class=\"truncate text-sm leading-tight font-semibold whitespace-nowrap\">\n {{ step.title }}\n </h3>\n }\n @if (step.description) {\n <p\n z-tooltip\n [zContent]=\"step.description\"\n [zAutoDetect]=\"true\"\n zPosition=\"bottom\"\n class=\"mt-1 truncate text-xs whitespace-nowrap opacity-80\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n </div>\n } @else if (zType() === 'dot') {\n <!-- Dot Style: Simple dots with optional labels -->\n <div class=\"flex items-center\">\n <!-- Dot -->\n <span [class]=\"getDotClassesByIndex()[i]\"></span>\n\n <!-- Content (optional) -->\n @if (step.title) {\n <span\n z-tooltip\n [zContent]=\"step.title\"\n [zAutoDetect]=\"true\"\n zPosition=\"top\"\n class=\"ms-2 max-w-24 truncate text-sm whitespace-nowrap\"\n [class.text-foreground]=\"stepStatuses()[i] === 'current'\"\n [class.font-medium]=\"stepStatuses()[i] === 'current'\"\n [class.text-muted-foreground]=\"stepStatuses()[i] !== 'current'\">\n {{ step.title }}\n </span>\n }\n\n <!-- Horizontal Line -->\n @if (!last) {\n <div\n class=\"mx-3 h-[0.1875rem] min-w-8 flex-1 rounded-full\"\n [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n [class.bg-muted-foreground/25]=\"\n stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n \"></div>\n }\n </div>\n } @else if (zType() === 'inline') {\n <!-- Inline: Icon + Content + Line in one row -->\n <div class=\"flex items-center\">\n <div class=\"flex min-w-0 flex-1 items-center gap-2.5 px-2.5 py-2\">\n <!-- Step Icon -->\n <span [class]=\"iconClassesMap().get(i)\" class=\"relative! start-auto! shrink-0\">\n @switch (stepStatuses()[i]) {\n @case ('completed') {\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n } @else {\n <z-icon zType=\"lucideCheck\" [zSize]=\"getIconSizeByIndex()[i]\" />\n }\n }\n @case ('error') {\n <z-icon zType=\"lucideX\" [zSize]=\"getIconSizeByIndex()[i]\" />\n }\n @default {\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n } @else if (zShowNumber()) {\n <span class=\"font-medium\">{{ i + 1 }}</span>\n }\n }\n }\n </span>\n\n <!-- Content Inline -->\n @if (step.title || step.description) {\n <div class=\"min-w-0 flex-1\">\n @if (step.title) {\n <h3\n z-tooltip\n [zContent]=\"step.title\"\n [zAutoDetect]=\"true\"\n zPosition=\"top\"\n class=\"truncate text-sm leading-tight font-medium whitespace-nowrap\">\n {{ step.title }}\n </h3>\n }\n @if (step.description) {\n <p\n z-tooltip\n [zContent]=\"step.description\"\n [zAutoDetect]=\"true\"\n zPosition=\"bottom\"\n class=\"text-muted-foreground mt-1 truncate text-xs whitespace-nowrap\">\n {{ step.description }}\n </p>\n }\n </div>\n }\n </div>\n\n <!-- Horizontal Line -->\n @if (!last) {\n <div\n class=\"mx-3 h-[0.1875rem] min-w-8 flex-1 rounded-full\"\n [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n [class.bg-muted-foreground/25]=\"\n stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n \"></div>\n }\n </div>\n } @else {\n <!-- Default: Icon + Line row, Content below -->\n <div class=\"flex items-center\">\n <!-- Step Icon -->\n <span [class]=\"iconClassesMap().get(i)\" class=\"relative! start-auto! shrink-0\">\n @switch (stepStatuses()[i]) {\n @case ('completed') {\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n } @else {\n <z-icon zType=\"lucideCheck\" [zSize]=\"getIconSizeByIndex()[i]\" />\n }\n }\n @case ('error') {\n <z-icon zType=\"lucideX\" [zSize]=\"getIconSizeByIndex()[i]\" />\n }\n @default {\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n } @else if (zShowNumber()) {\n <span class=\"font-medium\">{{ i + 1 }}</span>\n }\n }\n }\n </span>\n\n <!-- Horizontal Line -->\n @if (!last) {\n <div [class]=\"getConnectorClassesByIndex()[i]\"></div>\n }\n </div>\n\n <!-- Content Below -->\n @if (step.title || step.description) {\n <div\n class=\"z-steps-content mt-3 flex flex-col text-center\"\n [style.width.px]=\"150\"\n [style.margin-left.px]=\"(iconWidth() - 150) / 2\">\n @if (step.title) {\n <h3\n z-tooltip\n [zContent]=\"step.title\"\n [zAutoDetect]=\"true\"\n zPosition=\"top\"\n class=\"truncate text-sm leading-tight font-medium whitespace-nowrap\">\n {{ step.title }}\n </h3>\n }\n @if (step.description) {\n <p\n z-tooltip\n [zContent]=\"step.description\"\n [zAutoDetect]=\"true\"\n zPosition=\"bottom\"\n class=\"text-muted-foreground mt-1 truncate text-xs whitespace-nowrap\">\n {{ step.description }}\n </p>\n }\n </div>\n }\n }\n </li>\n }\n }\n</ol>\n", styles: ["z-steps ol li:not(:last-child)>div[class*=border-s]{height:calc(100% + 2rem)}z-steps ol li[class*=mb-6]:not(:last-child)>div[class*=border-s]{height:calc(100% + 1.5rem)}z-steps ol li[class*=mb-10]:not(:last-child)>div[class*=border-s]{height:calc(100% + 2.5rem)}z-steps .z-steps-arrow-item{position:relative;display:flex;flex-direction:column;justify-content:center;transition:all .2s ease-out}z-steps .z-steps-arrow-item:hover{filter:brightness(.92)}z-steps .z-steps-arrow-first{border-radius:.375rem 0 0 .375rem;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}z-steps .z-steps-arrow-middle{margin-left:-.5rem;padding-left:2rem;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}z-steps .z-steps-arrow-last{margin-left:-.5rem;padding-left:2rem;border-radius:0 .375rem .375rem 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,16px 50%)}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
381
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZStepsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
382
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZStepsComponent, isStandalone: true, selector: "z-steps", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSteps: { classPropertyName: "zSteps", publicName: "zSteps", isSignal: true, isRequired: true, transformFunction: null }, zCurrent: { classPropertyName: "zCurrent", publicName: "zCurrent", isSignal: true, isRequired: false, transformFunction: null }, zOrientation: { classPropertyName: "zOrientation", publicName: "zOrientation", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zClickable: { classPropertyName: "zClickable", publicName: "zClickable", isSignal: true, isRequired: false, transformFunction: null }, zShowNumber: { classPropertyName: "zShowNumber", publicName: "zShowNumber", isSignal: true, isRequired: false, transformFunction: null }, zResponsive: { classPropertyName: "zResponsive", publicName: "zResponsive", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zOnStepClick: "zOnStepClick", zControl: "zControl" }, host: { classAttribute: "block" }, ngImport: i0, template: "<ol\n [class]=\"containerClasses()\"\n [class.rounded-md]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n [class.border]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n [class.border-border/70]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n [class.bg-muted/20]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\"\n [class.p-2]=\"effectiveOrientation() === 'horizontal' && (zType() === 'inline' || zType() === 'dot')\">\n @for (step of mergedSteps(); track $index; let i = $index; let last = $last) {\n @if (effectiveOrientation() === 'vertical') {\n @if (zType() === 'dot') {\n <!-- Vertical Dot Layout -->\n <li\n class=\"flex items-start gap-3\"\n [class.cursor-pointer]=\"zClickable() && !step.disabled\"\n [class.cursor-not-allowed]=\"step.disabled\"\n [class.opacity-50]=\"step.disabled\"\n (click)=\"onStepClick(i)\">\n <!-- Dot + Line Column -->\n <div class=\"flex w-10 shrink-0 flex-col items-center\">\n <!-- Dot -->\n <span [class]=\"getDotClassesByIndex()[i]\" class=\"shrink-0\"></span>\n <!-- Vertical Line -->\n @if (!last) {\n <div\n class=\"my-1 h-10 w-[0.125rem] rounded-full\"\n [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n [class.bg-muted-foreground/30]=\"\n stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n \"></div>\n }\n </div>\n\n <!-- Content (optional) -->\n @if (step.title) {\n <span\n class=\"pt-0.5 text-sm\"\n [class.text-foreground]=\"stepStatuses()[i] === 'current'\"\n [class.font-medium]=\"stepStatuses()[i] === 'current'\"\n [class.text-muted-foreground]=\"stepStatuses()[i] !== 'current'\">\n {{ step.title }}\n </span>\n }\n </li>\n } @else {\n <!-- Vertical Layout -->\n <li\n class=\"flex items-start gap-3\"\n [class.cursor-pointer]=\"zClickable() && !step.disabled\"\n [class.cursor-not-allowed]=\"step.disabled\"\n [class.opacity-50]=\"step.disabled\"\n (click)=\"onStepClick(i)\">\n <div class=\"flex w-10 shrink-0 flex-col items-center\">\n <!-- Step Icon -->\n <span [class]=\"iconClassesMap().get(i)\" class=\"relative! start-auto!\">\n @switch (stepStatuses()[i]) {\n @case ('completed') {\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n } @else {\n <z-icon zType=\"lucideCheck\" [zSize]=\"getIconSizeByIndex()[i]\" />\n }\n }\n @case ('error') {\n <z-icon zType=\"lucideX\" [zSize]=\"getIconSizeByIndex()[i]\" />\n }\n @default {\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n } @else if (zShowNumber()) {\n <span class=\"font-medium\">{{ i + 1 }}</span>\n }\n }\n }\n </span>\n\n <!-- Vertical Line -->\n @if (!last) {\n <div\n class=\"my-1 h-10 w-[0.125rem] rounded-full\"\n [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n [class.bg-muted-foreground/30]=\"\n stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n \"></div>\n }\n </div>\n\n <!-- Content -->\n @if (step.title || step.description) {\n <div class=\"min-w-0 flex-1 pt-1 pb-3\">\n @if (step.title) {\n <h3 class=\"leading-tight font-medium\">{{ step.title }}</h3>\n }\n @if (step.description) {\n <p class=\"text-muted-foreground mt-1 text-sm\">{{ step.description }}</p>\n }\n </div>\n }\n </li>\n }\n } @else {\n <!-- Horizontal Layout -->\n <li\n [class]=\"zType() === 'arrow' ? 'flex-1' : 'flex-1 last:flex-none'\"\n [class.cursor-pointer]=\"zClickable() && !step.disabled\"\n [class.cursor-not-allowed]=\"step.disabled\"\n [class.opacity-50]=\"step.disabled\"\n (click)=\"onStepClick(i)\">\n @if (zType() === 'arrow') {\n <!-- Arrow Style -->\n <div [class]=\"getArrowClassesByIndex()[i]\">\n <div class=\"flex items-center gap-3.5\">\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" class=\"shrink-0\" />\n }\n <div class=\"flex min-w-0 flex-col\">\n @if (step.title) {\n <h3\n z-tooltip\n [zContent]=\"step.title\"\n [zAutoDetect]=\"true\"\n zPosition=\"top\"\n class=\"truncate text-sm leading-tight font-semibold whitespace-nowrap\">\n {{ step.title }}\n </h3>\n }\n @if (step.description) {\n <p\n z-tooltip\n [zContent]=\"step.description\"\n [zAutoDetect]=\"true\"\n zPosition=\"bottom\"\n class=\"mt-1 truncate text-xs whitespace-nowrap opacity-80\">\n {{ step.description }}\n </p>\n }\n </div>\n </div>\n </div>\n } @else if (zType() === 'dot') {\n <!-- Dot Style: Simple dots with optional labels -->\n <div class=\"flex items-center\">\n <!-- Dot -->\n <span [class]=\"getDotClassesByIndex()[i]\"></span>\n\n <!-- Content (optional) -->\n @if (step.title) {\n <span\n z-tooltip\n [zContent]=\"step.title\"\n [zAutoDetect]=\"true\"\n zPosition=\"top\"\n class=\"ms-2 max-w-24 truncate text-sm whitespace-nowrap\"\n [class.text-foreground]=\"stepStatuses()[i] === 'current'\"\n [class.font-medium]=\"stepStatuses()[i] === 'current'\"\n [class.text-muted-foreground]=\"stepStatuses()[i] !== 'current'\">\n {{ step.title }}\n </span>\n }\n\n <!-- Horizontal Line -->\n @if (!last) {\n <div\n class=\"mx-3 h-[0.1875rem] min-w-8 flex-1 rounded-full\"\n [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n [class.bg-muted-foreground/25]=\"\n stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n \"></div>\n }\n </div>\n } @else if (zType() === 'inline') {\n <!-- Inline: Icon + Content + Line in one row -->\n <div class=\"flex items-center\">\n <div class=\"flex min-w-0 flex-1 items-center gap-2.5 px-2.5 py-2\">\n <!-- Step Icon -->\n <span [class]=\"iconClassesMap().get(i)\" class=\"relative! start-auto! shrink-0\">\n @switch (stepStatuses()[i]) {\n @case ('completed') {\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n } @else {\n <z-icon zType=\"lucideCheck\" [zSize]=\"getIconSizeByIndex()[i]\" />\n }\n }\n @case ('error') {\n <z-icon zType=\"lucideX\" [zSize]=\"getIconSizeByIndex()[i]\" />\n }\n @default {\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n } @else if (zShowNumber()) {\n <span class=\"font-medium\">{{ i + 1 }}</span>\n }\n }\n }\n </span>\n\n <!-- Content Inline -->\n @if (step.title || step.description) {\n <div class=\"min-w-0 flex-1\">\n @if (step.title) {\n <h3\n z-tooltip\n [zContent]=\"step.title\"\n [zAutoDetect]=\"true\"\n zPosition=\"top\"\n class=\"truncate text-sm leading-tight font-medium whitespace-nowrap\">\n {{ step.title }}\n </h3>\n }\n @if (step.description) {\n <p\n z-tooltip\n [zContent]=\"step.description\"\n [zAutoDetect]=\"true\"\n zPosition=\"bottom\"\n class=\"text-muted-foreground mt-1 truncate text-xs whitespace-nowrap\">\n {{ step.description }}\n </p>\n }\n </div>\n }\n </div>\n\n <!-- Horizontal Line -->\n @if (!last) {\n <div\n class=\"mx-3 h-[0.1875rem] min-w-8 flex-1 rounded-full\"\n [class.bg-primary]=\"stepStatuses()[i] === 'completed'\"\n [class.bg-destructive/40]=\"stepStatuses()[i] === 'error'\"\n [class.bg-muted-foreground/25]=\"\n stepStatuses()[i] !== 'completed' && stepStatuses()[i] !== 'error'\n \"></div>\n }\n </div>\n } @else {\n <!-- Default: Icon + Line row, Content below -->\n <div class=\"flex items-center\">\n <!-- Step Icon -->\n <span [class]=\"iconClassesMap().get(i)\" class=\"relative! start-auto! shrink-0\">\n @switch (stepStatuses()[i]) {\n @case ('completed') {\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n } @else {\n <z-icon zType=\"lucideCheck\" [zSize]=\"getIconSizeByIndex()[i]\" />\n }\n }\n @case ('error') {\n <z-icon zType=\"lucideX\" [zSize]=\"getIconSizeByIndex()[i]\" />\n }\n @default {\n @if (step.icon) {\n <z-icon [zType]=\"step.icon\" [zSize]=\"getIconSizeByIndex()[i]\" />\n } @else if (zShowNumber()) {\n <span class=\"font-medium\">{{ i + 1 }}</span>\n }\n }\n }\n </span>\n\n <!-- Horizontal Line -->\n @if (!last) {\n <div [class]=\"getConnectorClassesByIndex()[i]\"></div>\n }\n </div>\n\n <!-- Content Below -->\n @if (step.title || step.description) {\n <div\n class=\"z-steps-content mt-3 flex flex-col text-center\"\n [style.width.px]=\"150\"\n [style.margin-left.px]=\"(iconWidth() - 150) / 2\">\n @if (step.title) {\n <h3\n z-tooltip\n [zContent]=\"step.title\"\n [zAutoDetect]=\"true\"\n zPosition=\"top\"\n class=\"truncate text-sm leading-tight font-medium whitespace-nowrap\">\n {{ step.title }}\n </h3>\n }\n @if (step.description) {\n <p\n z-tooltip\n [zContent]=\"step.description\"\n [zAutoDetect]=\"true\"\n zPosition=\"bottom\"\n class=\"text-muted-foreground mt-1 truncate text-xs whitespace-nowrap\">\n {{ step.description }}\n </p>\n }\n </div>\n }\n }\n </li>\n }\n }\n</ol>\n", styles: ["z-steps ol li:not(:last-child)>div[class*=border-s]{height:calc(100% + 2rem)}z-steps ol li[class*=mb-6]:not(:last-child)>div[class*=border-s]{height:calc(100% + 1.5rem)}z-steps ol li[class*=mb-10]:not(:last-child)>div[class*=border-s]{height:calc(100% + 2.5rem)}z-steps .z-steps-arrow-item{position:relative;display:flex;flex-direction:column;justify-content:center;transition:all .2s ease-out}z-steps .z-steps-arrow-item:hover{filter:brightness(.92)}z-steps .z-steps-arrow-first{border-radius:.375rem 0 0 .375rem;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%)}z-steps .z-steps-arrow-middle{margin-left:-.5rem;padding-left:2rem;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}z-steps .z-steps-arrow-last{margin-left:-.5rem;padding-left:2rem;border-radius:0 .375rem .375rem 0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,16px 50%)}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
383
383
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZStepsComponent, decorators: [{
|
|
385
385
|
type: Component,
|
|
386
386
|
args: [{ selector: 'z-steps', imports: [ZIconComponent, ZTooltipDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
387
387
|
class: 'block',
|
|
@@ -247,8 +247,8 @@ class ZSwitchComponent {
|
|
|
247
247
|
};
|
|
248
248
|
waveEl.addEventListener('animationend', onWaveAnimationEnd);
|
|
249
249
|
}
|
|
250
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.
|
|
251
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.
|
|
250
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
251
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZSwitchComponent, isStandalone: true, selector: "z-switch", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zSwitchClass: { classPropertyName: "zSwitchClass", publicName: "zSwitchClass", isSignal: true, isRequired: false, transformFunction: null }, zThumbClass: { classPropertyName: "zThumbClass", publicName: "zThumbClass", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zMode: { classPropertyName: "zMode", publicName: "zMode", isSignal: true, isRequired: false, transformFunction: null }, zLabel: { classPropertyName: "zLabel", publicName: "zLabel", isSignal: true, isRequired: false, transformFunction: null }, zText: { classPropertyName: "zText", publicName: "zText", isSignal: true, isRequired: false, transformFunction: null }, zCheckedText: { classPropertyName: "zCheckedText", publicName: "zCheckedText", isSignal: true, isRequired: false, transformFunction: null }, zUncheckedText: { classPropertyName: "zUncheckedText", publicName: "zUncheckedText", isSignal: true, isRequired: false, transformFunction: null }, zCheckedIcon: { classPropertyName: "zCheckedIcon", publicName: "zCheckedIcon", isSignal: true, isRequired: false, transformFunction: null }, zUncheckedIcon: { classPropertyName: "zUncheckedIcon", publicName: "zUncheckedIcon", isSignal: true, isRequired: false, transformFunction: null }, zDisabled: { classPropertyName: "zDisabled", publicName: "zDisabled", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zTextPosition: { classPropertyName: "zTextPosition", publicName: "zTextPosition", isSignal: true, isRequired: false, transformFunction: null }, zWave: { classPropertyName: "zWave", publicName: "zWave", isSignal: true, isRequired: false, transformFunction: null }, zChecked: { classPropertyName: "zChecked", publicName: "zChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zChange: "zChange", zOnBlur: "zOnBlur", zOnFocus: "zOnFocus", zEvent: "zEvent", zChecked: "zCheckedChange" }, host: { properties: { "class": "hostClasses()" } }, providers: [
|
|
252
252
|
{
|
|
253
253
|
provide: NG_VALUE_ACCESSOR,
|
|
254
254
|
useExisting: forwardRef(() => ZSwitchComponent),
|
|
@@ -256,7 +256,7 @@ class ZSwitchComponent {
|
|
|
256
256
|
},
|
|
257
257
|
], ngImport: i0, template: "<!-- Label above -->\n@if (zLabel()) {\n <label class=\"text-xs leading-none font-medium\">{{ zLabel() }}</label>\n}\n\n<div class=\"inline-flex items-center gap-3\">\n @if (zText() && zTextPosition() === 'left') {\n <label [class]=\"labelClasses()\" (click)=\"onSwitchClick($event)\">{{ zText() }}</label>\n }\n\n <button\n type=\"button\"\n role=\"switch\"\n [class]=\"switchClasses()\"\n [attr.aria-checked]=\"zChecked()\"\n [attr.data-state]=\"switchState()\"\n [attr.data-loading]=\"zLoading()\"\n [disabled]=\"isDisabled()\"\n (click)=\"onSwitchClick($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\">\n <!-- Thumb (handle) -->\n <span [class]=\"thumbClasses()\" [attr.data-state]=\"switchState()\" [attr.data-loading]=\"zLoading()\">\n @if (zLoading()) {\n <z-icon zType=\"lucideLoader2\" [zSize]=\"loadingIconSize()\" class=\"text-muted-foreground animate-spin\" />\n }\n @if (!zLoading() && currentThumbIcon(); as thumbIcon) {\n <z-icon [zType]=\"thumbIcon\" [zSize]=\"loadingIconSize()\" class=\"text-muted-foreground\" />\n }\n </span>\n <!-- Inner text mode -->\n @if (isInnerMode()) {\n <!-- Checked text: LEFT side (visible when checked, thumb is on right) -->\n <span [class]=\"innerLeftClasses()\" [class.opacity-100]=\"zChecked()\" [class.opacity-0]=\"!zChecked()\">\n {{ displayCheckedText() }}\n </span>\n <!-- Unchecked text: RIGHT side (visible when unchecked, thumb is on left) -->\n <span [class]=\"innerRightClasses()\" [class.opacity-100]=\"!zChecked()\" [class.opacity-0]=\"zChecked()\">\n {{ displayUncheckedText() }}\n </span>\n }\n </button>\n\n @if (zText() && zTextPosition() === 'right') {\n <label [class]=\"labelClasses()\" (click)=\"onSwitchClick($event)\">{{ zText() }}</label>\n }\n</div>\n", dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zSize", "zStrokeWidth", "zSvg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
258
258
|
}
|
|
259
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.
|
|
259
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSwitchComponent, decorators: [{
|
|
260
260
|
type: Component,
|
|
261
261
|
args: [{ selector: 'z-switch', imports: [ZIconComponent], standalone: true, providers: [
|
|
262
262
|
{
|