npm - @shival99/z-ui - Versions diffs - 1.9.13 → 1.9.15 - Mend

@shival99/z-ui 1.9.13 → 1.9.15

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.

Files changed (47) hide show

package/fesm2022/shival99-z-ui-components-z-skeleton.mjs CHANGED Viewed

@@ -56,29 +56,24 @@ class ZSkeletonComponent {
     zAnimated = input(true, ...(ngDevMode ? [{ debugName: "zAnimated" }] : []));
     zRadius = input('4px', ...(ngDevMode ? [{ debugName: "zRadius" }] : []));
     _calculatedRows = signal(1, ...(ngDevMode ? [{ debugName: "_calculatedRows" }] : []));
-    _parentElement = null;
-    _originalOverflow = '';
     ngAfterViewInit() {
         if (this.zType() === 'bar') {
             this._calculateBarRows();
         }
-        this._setParentOverflowHidden();
-    }
-    ngOnDestroy() {
-        this._restoreParentOverflow();
     }
     containerClass = computed(() => zMergeClasses(this.class()), ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
-    skeletonClasses = computed(() => zSkeletonVariants({
-        type: this.zType(),
-        size: this.zSize(),
-        animated: this.zAnimated(),
-    }), ...(ngDevMode ? [{ debugName: "skeletonClasses" }] : []));
+    hostHeight = computed(() => {
+        if (this.zType() !== 'text' || this.zRows() <= 1) {
+            return this.zHeight();
+        }
+        const rowHeight = this.zHeight() ?? '1rem';
+        const totalGap = (this.zRows() - 1) * this.zGap();
+        return `calc(${rowHeight} * ${this.zRows()} + ${totalGap}px)`;
+    }, ...(ngDevMode ? [{ debugName: "hostHeight" }] : []));
+    skeletonClasses = computed(() => zSkeletonVariants({ type: this.zType(), size: this.zSize(), animated: this.zAnimated() }), ...(ngDevMode ? [{ debugName: "skeletonClasses" }] : []));
     circleStyles = computed(() => {
         if (this.zHeight() || this.zWidth() !== '100%') {
-            return {
-                width: this.zWidth(),
-                height: this.zHeight() || this.zWidth(),
-            };
+            return { width: this.zWidth(), height: this.zHeight() || this.zWidth() };
         }
         return {};
     }, ...(ngDevMode ? [{ debugName: "circleStyles" }] : []));
@@ -93,23 +88,8 @@ class ZSkeletonComponent {
         const totalGapSpace = (rowCount - 1) * gapBetweenRows;
         const height = this.zHeight();
         const rowHeight = height ?? `calc((100% - ${totalGapSpace}px) / ${rowCount})`;
-        return Array.from({ length: rowCount }, (_, i) => ({
-            index: i,
-            height: rowHeight,
-        }));
+        return Array.from({ length: rowCount }, (_, i) => ({ index: i, height: rowHeight }));
     }, ...(ngDevMode ? [{ debugName: "rowsArray" }] : []));
-    _setParentOverflowHidden() {
-        this._parentElement = this._elementRef.nativeElement.parentElement;
-        if (this._parentElement) {
-            this._originalOverflow = this._parentElement.style.overflow || '';
-            this._parentElement.style.overflow = 'hidden';
-        }
-    }
-    _restoreParentOverflow() {
-        if (this._parentElement) {
-            this._parentElement.style.overflow = this._originalOverflow;
-        }
-    }
     _calculateBarRows() {
         const { parentElement } = this._elementRef.nativeElement || {};
         if (!parentElement) {
@@ -123,14 +103,14 @@ class ZSkeletonComponent {
         this._calculatedRows.set(1);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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": "zHeight()" }, 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 });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSkeletonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'z-skeleton', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'z-skeleton-host',
                         '[style.width]': 'zWidth()',
-                        '[style.height]': 'zHeight()',
+                        '[style.height]': 'hostHeight()',
                     }, 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"] }]
         }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWidth", required: false }] }], zHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHeight", required: false }] }], zRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRows", required: false }] }], zGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zGap", required: false }] }], zAnimated: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimated", required: false }] }], zRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "zRadius", required: false }] }] } });

package/fesm2022/shival99-z-ui-components-z-skeleton.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shival99-z-ui-components-z-skeleton.mjs","sources":["../../../../libs/core-ui/components/z-skeleton/z-skeleton.variants.ts","../../../../libs/core-ui/components/z-skeleton/z-skeleton.component.ts","../../../../libs/core-ui/components/z-skeleton/z-skeleton.component.html","../../../../libs/core-ui/components/z-skeleton/shival99-z-ui-components-z-skeleton.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zSkeletonVariants = cva('z-skeleton', {\n variants: {\n type: {\n bar: 'z-skeleton-bar',\n circle: 'z-skeleton-circle',\n text: 'z-skeleton-text',\n },\n size: {\n sm: '',\n default: '',\n lg: '',\n },\n animated: {\n true: 'z-skeleton-animated',\n false: '',\n },\n },\n compoundVariants: [\n {\n type: 'circle',\n size: 'sm',\n class: 'z-skeleton-circle-sm',\n },\n {\n type: 'circle',\n size: 'default',\n class: 'z-skeleton-circle-default',\n },\n {\n type: 'circle',\n size: 'lg',\n class: 'z-skeleton-circle-lg',\n },\n ],\n defaultVariants: {\n type: 'bar',\n size: 'default',\n animated: true,\n },\n});\n\nexport type ZSkeletonVariants = VariantProps<typeof zSkeletonVariants>;\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n OnDestroy,\n signal,\n} from '@angular/core';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { ZSkeletonRowItem, ZSkeletonSize, ZSkeletonType } from './z-skeleton.types';\nimport { zSkeletonVariants } from './z-skeleton.variants';\n\n@Component({\n selector: 'z-skeleton',\n standalone: true,\n templateUrl: './z-skeleton.component.html',\n styleUrl: './z-skeleton.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'z-skeleton-host',\n '[style.width]': 'zWidth()',\n '[style.height]': 'zHeight()',\n },\n})\nexport class ZSkeletonComponent implements AfterViewInit, OnDestroy {\n private readonly _elementRef = inject(ElementRef);\n\n public readonly class = input<ClassValue>('');\n public readonly zType = input<ZSkeletonType>('bar');\n public readonly zSize = input<ZSkeletonSize>('default');\n public readonly zWidth = input<string>('100%');\n public readonly zHeight = input<string \| undefined>(undefined);\n public readonly zRows = input<number>(1);\n public readonly zGap = input<number>(8);\n public readonly zAnimated = input<boolean>(true);\n public readonly zRadius = input<string>('4px');\n\n private readonly _calculatedRows = signal<number>(1);\n\n private _parentElement: HTMLElement \| null = null;\n private _originalOverflow = '';\n\n ngAfterViewInit(): void {\n if (this.zType() === 'bar') {\n this._calculateBarRows();\n }\n this._setParentOverflowHidden();\n }\n\n ngOnDestroy(): void {\n this._restoreParentOverflow();\n }\n\n protected readonly containerClass = computed(() => zMergeClasses(this.class()));\n protected readonly skeletonClasses = computed(() =>\n zSkeletonVariants({\n type: this.zType(),\n size: this.zSize(),\n animated: this.zAnimated(),\n })\n );\n\n protected readonly circleStyles = computed(() => {\n if (this.zHeight() \|\| this.zWidth() !== '100%') {\n return {\n width: this.zWidth(),\n height: this.zHeight() \|\| this.zWidth(),\n };\n }\n return {};\n });\n\n protected readonly shouldShowMultipleRows = computed(\n () => (this.zType() === 'bar' \|\| this.zType() === 'text') && this.zRows() > 1\n );\n\n protected readonly rowsArray = computed<ZSkeletonRowItem[]>(() => {\n const type = this.zType();\n if (type !== 'bar' && type !== 'text') {\n return [{ index: 0, height: '0rem' }];\n }\n\n const rowCount = this.zRows() \|\| this._calculatedRows();\n const gapBetweenRows = this.zGap();\n const totalGapSpace = (rowCount - 1) * gapBetweenRows;\n const height = this.zHeight();\n const rowHeight = height ?? `calc((100% - ${totalGapSpace}px) / ${rowCount})`;\n\n return Array.from({ length: rowCount }, (_, i) => ({\n index: i,\n height: rowHeight,\n }));\n });\n\n private _setParentOverflowHidden(): void {\n this._parentElement = this._elementRef.nativeElement.parentElement;\n if (this._parentElement) {\n this._originalOverflow = this._parentElement.style.overflow \|\| '';\n this._parentElement.style.overflow = 'hidden';\n }\n }\n\n private _restoreParentOverflow(): void {\n if (this._parentElement) {\n this._parentElement.style.overflow = this._originalOverflow;\n }\n }\n\n private _calculateBarRows(): void {\n const { parentElement } = this._elementRef.nativeElement \|\| {};\n if (!parentElement) {\n return;\n }\n\n const rows = this.zRows();\n if (rows && rows > 0) {\n this._calculatedRows.set(rows);\n return;\n }\n\n this._calculatedRows.set(1);\n }\n}\n","<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","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"shival99-z-ui-components-z-skeleton.mjs","sources":["../../../../libs/core-ui/components/z-skeleton/z-skeleton.variants.ts","../../../../libs/core-ui/components/z-skeleton/z-skeleton.component.ts","../../../../libs/core-ui/components/z-skeleton/z-skeleton.component.html","../../../../libs/core-ui/components/z-skeleton/shival99-z-ui-components-z-skeleton.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zSkeletonVariants = cva('z-skeleton', {\n variants: {\n type: {\n bar: 'z-skeleton-bar',\n circle: 'z-skeleton-circle',\n text: 'z-skeleton-text',\n },\n size: {\n sm: '',\n default: '',\n lg: '',\n },\n animated: {\n true: 'z-skeleton-animated',\n false: '',\n },\n },\n compoundVariants: [\n {\n type: 'circle',\n size: 'sm',\n class: 'z-skeleton-circle-sm',\n },\n {\n type: 'circle',\n size: 'default',\n class: 'z-skeleton-circle-default',\n },\n {\n type: 'circle',\n size: 'lg',\n class: 'z-skeleton-circle-lg',\n },\n ],\n defaultVariants: {\n type: 'bar',\n size: 'default',\n animated: true,\n },\n});\n\nexport type ZSkeletonVariants = VariantProps<typeof zSkeletonVariants>;\n","import {\n AfterViewInit,\n ChangeDetectionStrategy,\n Component,\n computed,\n ElementRef,\n inject,\n input,\n signal,\n} from '@angular/core';\nimport { zMergeClasses } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { ZSkeletonRowItem, ZSkeletonSize, ZSkeletonType } from './z-skeleton.types';\nimport { zSkeletonVariants } from './z-skeleton.variants';\n\n@Component({\n selector: 'z-skeleton',\n standalone: true,\n templateUrl: './z-skeleton.component.html',\n styleUrl: './z-skeleton.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'z-skeleton-host',\n '[style.width]': 'zWidth()',\n '[style.height]': 'hostHeight()',\n },\n})\nexport class ZSkeletonComponent implements AfterViewInit {\n private readonly _elementRef = inject(ElementRef);\n\n public readonly class = input<ClassValue>('');\n public readonly zType = input<ZSkeletonType>('bar');\n public readonly zSize = input<ZSkeletonSize>('default');\n public readonly zWidth = input<string>('100%');\n public readonly zHeight = input<string \| undefined>(undefined);\n public readonly zRows = input<number>(1);\n public readonly zGap = input<number>(8);\n public readonly zAnimated = input<boolean>(true);\n public readonly zRadius = input<string>('4px');\n\n private readonly _calculatedRows = signal<number>(1);\n\n ngAfterViewInit(): void {\n if (this.zType() === 'bar') {\n this._calculateBarRows();\n }\n }\n\n protected readonly containerClass = computed(() => zMergeClasses(this.class()));\n protected readonly hostHeight = computed(() => {\n if (this.zType() !== 'text' \|\| this.zRows() <= 1) {\n return this.zHeight();\n }\n\n const rowHeight = this.zHeight() ?? '1rem';\n const totalGap = (this.zRows() - 1) * this.zGap();\n\n return `calc(${rowHeight} * ${this.zRows()} + ${totalGap}px)`;\n });\n\n protected readonly skeletonClasses = computed(() =>\n zSkeletonVariants({ type: this.zType(), size: this.zSize(), animated: this.zAnimated() })\n );\n\n protected readonly circleStyles = computed(() => {\n if (this.zHeight() \|\| this.zWidth() !== '100%') {\n return { width: this.zWidth(), height: this.zHeight() \|\| this.zWidth() };\n }\n return {};\n });\n\n protected readonly shouldShowMultipleRows = computed(\n () => (this.zType() === 'bar' \|\| this.zType() === 'text') && this.zRows() > 1\n );\n\n protected readonly rowsArray = computed<ZSkeletonRowItem[]>(() => {\n const type = this.zType();\n if (type !== 'bar' && type !== 'text') {\n return [{ index: 0, height: '0rem' }];\n }\n const rowCount = this.zRows() \|\| this._calculatedRows();\n const gapBetweenRows = this.zGap();\n const totalGapSpace = (rowCount - 1) * gapBetweenRows;\n const height = this.zHeight();\n const rowHeight = height ?? `calc((100% - ${totalGapSpace}px) / ${rowCount})`;\n return Array.from({ length: rowCount }, (_, i) => ({ index: i, height: rowHeight }));\n });\n\n private _calculateBarRows(): void {\n const { parentElement } = this._elementRef.nativeElement \|\| {};\n if (!parentElement) {\n return;\n }\n const rows = this.zRows();\n if (rows && rows > 0) {\n this._calculatedRows.set(rows);\n return;\n }\n this._calculatedRows.set(1);\n }\n}\n","<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","/*\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-switch.mjs CHANGED Viewed

@@ -130,12 +130,16 @@ class ZSwitchComponent {
     zOnFocus = output();
     zEvent = output();
     class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    zSwitchClass = input('', ...(ngDevMode ? [{ debugName: "zSwitchClass" }] : []));
+    zThumbClass = input('', ...(ngDevMode ? [{ debugName: "zThumbClass" }] : []));
     zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
     zMode = input('default', ...(ngDevMode ? [{ debugName: "zMode" }] : []));
     zLabel = input('', ...(ngDevMode ? [{ debugName: "zLabel" }] : []));
     zText = input('', ...(ngDevMode ? [{ debugName: "zText" }] : []));
     zCheckedText = input('ON', ...(ngDevMode ? [{ debugName: "zCheckedText" }] : []));
     zUncheckedText = input('OFF', ...(ngDevMode ? [{ debugName: "zUncheckedText" }] : []));
+    zCheckedIcon = input(null, ...(ngDevMode ? [{ debugName: "zCheckedIcon" }] : []));
+    zUncheckedIcon = input(null, ...(ngDevMode ? [{ debugName: "zUncheckedIcon" }] : []));
     zDisabled = input(false, { ...(ngDevMode ? { debugName: "zDisabled" } : {}), transform: zTransform });
     zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : {}), transform: zTransform });
     zTextPosition = input('right', ...(ngDevMode ? [{ debugName: "zTextPosition" }] : []));
@@ -151,12 +155,18 @@ class ZSwitchComponent {
         }
         return zMergeClasses('inline-flex items-center gap-3', this.class());
     }, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
-    switchClasses = computed(() => zSwitchVariants({ zSize: this.zSize(), zMode: this.zMode() }), ...(ngDevMode ? [{ debugName: "switchClasses" }] : []));
-    thumbClasses = computed(() => zSwitchThumbVariants({ zSize: this.zSize(), zMode: this.zMode() }), ...(ngDevMode ? [{ debugName: "thumbClasses" }] : []));
+    switchClasses = computed(() => zMergeClasses(zSwitchVariants({ zSize: this.zSize(), zMode: this.zMode() }), this.zSwitchClass()), ...(ngDevMode ? [{ debugName: "switchClasses" }] : []));
+    thumbClasses = computed(() => zMergeClasses(zSwitchThumbVariants({ zSize: this.zSize(), zMode: this.zMode() }), this.zThumbClass()), ...(ngDevMode ? [{ debugName: "thumbClasses" }] : []));
     labelClasses = computed(() => zSwitchLabelVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "labelClasses" }] : []));
     switchState = computed(() => (this.zChecked() ? 'checked' : 'unchecked'), ...(ngDevMode ? [{ debugName: "switchState" }] : []));
     innerLeftClasses = computed(() => zSwitchInnerLeftVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "innerLeftClasses" }] : []));
     innerRightClasses = computed(() => zSwitchInnerRightVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "innerRightClasses" }] : []));
+    currentThumbIcon = computed(() => {
+        if (this.zChecked()) {
+            return this.zCheckedIcon();
+        }
+        return this.zUncheckedIcon();
+    }, ...(ngDevMode ? [{ debugName: "currentThumbIcon" }] : []));
     displayCheckedText = computed(() => {
         const text = this.zCheckedText();
         if (text.length > Z_SWITCH_INNER_TEXT_MAX_LENGTH) {
@@ -238,13 +248,13 @@ class ZSwitchComponent {
         waveEl.addEventListener('animationend', onWaveAnimationEnd);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: ZSwitchComponent, isStandalone: true, selector: "z-switch", inputs: { class: { classPropertyName: "class", publicName: "class", 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 }, 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: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", 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: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ZSwitchComponent),
                 multi: true,
             },
-        ], 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    </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 });
+        ], 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 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ZSwitchComponent, decorators: [{
             type: Component,
@@ -256,8 +266,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
                         },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         '[class]': 'hostClasses()',
-                    }, 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    </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" }]
-        }], propDecorators: { zChange: [{ type: i0.Output, args: ["zChange"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zText", required: false }] }], zCheckedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCheckedText", required: false }] }], zUncheckedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zUncheckedText", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zTextPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTextPosition", required: false }] }], zWave: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWave", required: false }] }], zChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "zChecked", required: false }] }, { type: i0.Output, args: ["zCheckedChange"] }] } });
+                    }, 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" }]
+        }], propDecorators: { zChange: [{ type: i0.Output, args: ["zChange"] }], zOnBlur: [{ type: i0.Output, args: ["zOnBlur"] }], zOnFocus: [{ type: i0.Output, args: ["zOnFocus"] }], zEvent: [{ type: i0.Output, args: ["zEvent"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zSwitchClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSwitchClass", required: false }] }], zThumbClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zThumbClass", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMode", required: false }] }], zLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLabel", required: false }] }], zText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zText", required: false }] }], zCheckedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCheckedText", required: false }] }], zUncheckedText: [{ type: i0.Input, args: [{ isSignal: true, alias: "zUncheckedText", required: false }] }], zCheckedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCheckedIcon", required: false }] }], zUncheckedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zUncheckedIcon", required: false }] }], zDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisabled", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zTextPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTextPosition", required: false }] }], zWave: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWave", required: false }] }], zChecked: [{ type: i0.Input, args: [{ isSignal: true, alias: "zChecked", required: false }] }, { type: i0.Output, args: ["zCheckedChange"] }] } });
 /**
  * Generated bundle index. Do not edit.

package/fesm2022/shival99-z-ui-components-z-switch.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"shival99-z-ui-components-z-switch.mjs","sources":["../../../../libs/core-ui/components/z-switch/z-switch.types.ts","../../../../libs/core-ui/components/z-switch/z-switch.variants.ts","../../../../libs/core-ui/components/z-switch/z-switch.component.ts","../../../../libs/core-ui/components/z-switch/z-switch.component.html","../../../../libs/core-ui/components/z-switch/shival99-z-ui-components-z-switch.ts"],"sourcesContent":["export type ZSwitchSize = 'sm' \| 'default' \| 'lg';\nexport type ZSwitchMode = 'default' \| 'inner';\n\n/** Maximum character length for inner text /\nexport const Z_SWITCH_INNER_TEXT_MAX_LENGTH = 8;\n","import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zSwitchVariants = cva(\n [\n 'relative inline-flex shrink-0 cursor-pointer items-center rounded-full',\n 'transition-colors duration-200',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'bg-input',\n 'data-[state=checked]:bg-primary',\n '[--z-wave-color:var(--color-primary)]',\n ],\n {\n variants: {\n zSize: {\n sm: 'h-5 w-9',\n default: 'h-6 w-11',\n lg: 'h-7 w-14',\n },\n zMode: {\n default: '',\n inner: 'overflow-hidden',\n },\n },\n compoundVariants: [\n { zMode: 'inner', zSize: 'sm', class: 'min-w-[2.875rem] h-[1.375rem]' },\n { zMode: 'inner', zSize: 'default', class: 'min-w-[3.375rem] h-[1.625rem]' },\n { zMode: 'inner', zSize: 'lg', class: 'min-w-[3.875rem] h-[1.875rem]' },\n ],\n defaultVariants: {\n zSize: 'default',\n zMode: 'default',\n },\n }\n);\n\nexport const zSwitchThumbVariants = cva(\n [\n 'pointer-events-none flex items-center justify-center rounded-full bg-white ring-0',\n 'shadow-[0_2px_4px_rgba(0,0,0,0.2)] transition-all duration-200',\n 'absolute top-1/2 -translate-y-1/2 z-10',\n ],\n {\n variants: {\n zSize: {\n sm: 'size-4',\n default: 'size-5',\n lg: 'size-6',\n },\n zMode: {\n default: '',\n inner: '',\n },\n },\n compoundVariants: [\n { zMode: 'default', zSize: 'sm', class: 'left-0.5 data-[state=checked]:translate-x-4' },\n { zMode: 'default', zSize: 'default', class: 'left-0.5 data-[state=checked]:translate-x-5' },\n { zMode: 'default', zSize: 'lg', class: 'left-0.5 data-[state=checked]:translate-x-7' },\n {\n zMode: 'inner',\n zSize: 'sm',\n class: 'size-[1.125rem] left-[0.125rem] data-[state=checked]:left-[calc(100%-1.25rem)]',\n },\n {\n zMode: 'inner',\n zSize: 'default',\n class: 'size-[1.375rem] left-[0.125rem] data-[state=checked]:left-[calc(100%-1.5rem)]',\n },\n {\n zMode: 'inner',\n zSize: 'lg',\n class: 'size-[1.625rem] left-[0.125rem] data-[state=checked]:left-[calc(100%-1.75rem)]',\n },\n ],\n defaultVariants: {\n zSize: 'default',\n zMode: 'default',\n },\n }\n);\n\nexport const zSwitchLabelVariants = cva(\n 'select-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n {\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);\n\n// Text hiển thị bên TRÁI (khi checked, thumb ở phải)\nexport const zSwitchInnerLeftVariants = cva(\n [\n 'absolute left-0 top-1/2 -translate-y-1/2 text-white font-medium select-none',\n 'truncate transition-opacity duration-200',\n ],\n {\n variants: {\n zSize: {\n sm: 'text-[0.5625rem] pl-[0.3125rem] max-w-[calc(100%-1.375rem)]',\n default: 'text-[0.625rem] pl-[0.375rem] max-w-[calc(100%-1.625rem)]',\n lg: 'text-[0.6875rem] pl-[0.4375rem] max-w-[calc(100%-1.875rem)]',\n },\n },\n defaultVariants: {\n zSize: 'default',\n },\n }\n);\n\n// Text hiển thị bên PHẢI (khi unchecked, thumb ở trái)\nexport const zSwitchInnerRightVariants = cva(\n [\n 'absolute right-0 top-1/2 -translate-y-1/2 text-white font-medium select-none',\n 'truncate transition-opacity duration-200',\n ],\n {\n variants: {\n zSize: {\n sm: 'text-[0.5625rem] pr-[0.3125rem] max-w-[calc(100%-1.375rem)]',\n default: 'text-[0.625rem] pr-[0.375rem] max-w-[calc(100%-1.625rem)]',\n lg: 'text-[0.6875rem] pr-[0.4375rem] max-w-[calc(100%-1.875rem)]',\n },\n },\n defaultVariants: {\n zSize: 'default',\n },\n }\n);\n\nexport type ZSwitchVariants = VariantProps<typeof zSwitchVariants>;\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n forwardRef,\n input,\n model,\n output,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { zMergeClasses, zTransform, zCreateEvent, type ZEvent } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { ZSwitchMode, ZSwitchSize, Z_SWITCH_INNER_TEXT_MAX_LENGTH } from './z-switch.types';\nimport {\n zSwitchLabelVariants,\n zSwitchThumbVariants,\n zSwitchVariants,\n zSwitchInnerLeftVariants,\n zSwitchInnerRightVariants,\n} from './z-switch.variants';\n\n@Component({\n selector: 'z-switch',\n imports: [ZIconComponent],\n standalone: true,\n templateUrl: './z-switch.component.html',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ZSwitchComponent),\n multi: true,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'hostClasses()',\n },\n})\nexport class ZSwitchComponent implements ControlValueAccessor {\n public readonly zChange = output<boolean>();\n public readonly zOnBlur = output<FocusEvent>();\n public readonly zOnFocus = output<FocusEvent>();\n public readonly zEvent = output<ZEvent>();\n\n public readonly class = input<ClassValue>('');\n public readonly zSize = input<ZSwitchSize>('default');\n public readonly zMode = input<ZSwitchMode>('default');\n public readonly zLabel = input<string>('');\n public readonly zText = input<string>('');\n public readonly zCheckedText = input<string>('ON');\n public readonly zUncheckedText = input<string>('OFF');\n public readonly zDisabled = input(false, { transform: zTransform });\n public readonly zLoading = input(false, { transform: zTransform });\n public readonly zTextPosition = input<'left' \| 'right'>('right');\n public readonly zWave = input(true, { transform: zTransform });\n\n public readonly zChecked = model<boolean>(false);\n\n protected readonly isInnerMode = computed(() => this.zMode() === 'inner');\n\n private readonly _disabled = signal(false);\n protected readonly isDisabled = computed(() => this.zDisabled() \|\| this._disabled() \|\| this.zLoading());\n\n protected readonly hostClasses = computed(() => {\n const hasLabel = !!this.zLabel();\n if (hasLabel) {\n return zMergeClasses('flex flex-col gap-2', this.class());\n }\n return zMergeClasses('inline-flex items-center gap-3', this.class());\n });\n\n protected readonly switchClasses = computed(() => zSwitchVariants({ zSize: this.zSize(), zMode: this.zMode() }));\n protected readonly thumbClasses = computed(() => zSwitchThumbVariants({ zSize: this.zSize(), zMode: this.zMode() }));\n protected readonly labelClasses = computed(() => zSwitchLabelVariants({ zSize: this.zSize() }));\n protected readonly switchState = computed(() => (this.zChecked() ? 'checked' : 'unchecked'));\n protected readonly innerLeftClasses = computed(() => zSwitchInnerLeftVariants({ zSize: this.zSize() }));\n protected readonly innerRightClasses = computed(() => zSwitchInnerRightVariants({ zSize: this.zSize() }));\n\n protected readonly displayCheckedText = computed(() => {\n const text = this.zCheckedText();\n if (text.length > Z_SWITCH_INNER_TEXT_MAX_LENGTH) {\n return text.slice(0, Z_SWITCH_INNER_TEXT_MAX_LENGTH - 1) + '…';\n }\n return text;\n });\n\n protected readonly displayUncheckedText = computed(() => {\n const text = this.zUncheckedText();\n if (text.length > Z_SWITCH_INNER_TEXT_MAX_LENGTH) {\n return text.slice(0, Z_SWITCH_INNER_TEXT_MAX_LENGTH - 1) + '…';\n }\n return text;\n });\n\n protected readonly loadingIconSize = computed(() => {\n const size = this.zSize();\n if (size === 'sm') {\n return '10';\n }\n if (size === 'lg') {\n return '16';\n }\n return '12';\n });\n\n private _onChange: (value: boolean) => void = () => {};\n private _onTouched: () => void = () => {};\n\n public writeValue(value: boolean \| null): void {\n this.zChecked.set(!!value);\n }\n\n public registerOnChange(fn: (value: boolean) => void): void {\n this._onChange = fn;\n }\n\n public registerOnTouched(fn: () => void): void {\n this._onTouched = fn;\n }\n\n public setDisabledState(isDisabled: boolean): void {\n this._disabled.set(isDisabled);\n }\n\n protected onFocus(event: FocusEvent): void {\n this.zOnFocus.emit(event);\n this.zEvent.emit(zCreateEvent('focus', event));\n }\n\n protected onBlur(event: FocusEvent): void {\n this.zOnBlur.emit(event);\n this.zEvent.emit(zCreateEvent('blur', event));\n this._onTouched();\n }\n\n protected onSwitchClick(event: MouseEvent): void {\n if (this.isDisabled()) {\n return;\n }\n\n const newValue = !this.zChecked();\n this.zChecked.set(newValue);\n this.zChange.emit(newValue);\n this._onChange(newValue);\n this._onTouched();\n\n // Wave effect\n if (this.zWave()) {\n const target = event.currentTarget as HTMLElement;\n const button = target.tagName === 'BUTTON' ? target : target.closest('button');\n if (button) {\n this._triggerWaveEffect(button as HTMLElement);\n }\n }\n }\n\n private _triggerWaveEffect(el: HTMLElement): void {\n const waveEl = document.createElement('span');\n waveEl.className = 'z-animate-wave';\n el.appendChild(waveEl);\n el.classList.add('z-wave-active');\n const onWaveAnimationEnd = (event: AnimationEvent): void => {\n if (event.animationName !== 'z-fade-effect') {\n return;\n }\n\n waveEl.remove();\n el.classList.remove('z-wave-active');\n waveEl.removeEventListener('animationend', onWaveAnimationEnd);\n };\n\n waveEl.addEventListener('animationend', onWaveAnimationEnd);\n }\n}\n","<!-- 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 </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","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"shival99-z-ui-components-z-switch.mjs","sources":["../../../../libs/core-ui/components/z-switch/z-switch.types.ts","../../../../libs/core-ui/components/z-switch/z-switch.variants.ts","../../../../libs/core-ui/components/z-switch/z-switch.component.ts","../../../../libs/core-ui/components/z-switch/z-switch.component.html","../../../../libs/core-ui/components/z-switch/shival99-z-ui-components-z-switch.ts"],"sourcesContent":["export type ZSwitchSize = 'sm' \| 'default' \| 'lg';\nexport type ZSwitchMode = 'default' \| 'inner';\n\n/** Maximum character length for inner text /\nexport const Z_SWITCH_INNER_TEXT_MAX_LENGTH = 8;\n","import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const zSwitchVariants = cva(\n [\n 'relative inline-flex shrink-0 cursor-pointer items-center rounded-full',\n 'transition-colors duration-200',\n 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n 'bg-input',\n 'data-[state=checked]:bg-primary',\n '[--z-wave-color:var(--color-primary)]',\n ],\n {\n variants: {\n zSize: {\n sm: 'h-5 w-9',\n default: 'h-6 w-11',\n lg: 'h-7 w-14',\n },\n zMode: {\n default: '',\n inner: 'overflow-hidden',\n },\n },\n compoundVariants: [\n { zMode: 'inner', zSize: 'sm', class: 'min-w-[2.875rem] h-[1.375rem]' },\n { zMode: 'inner', zSize: 'default', class: 'min-w-[3.375rem] h-[1.625rem]' },\n { zMode: 'inner', zSize: 'lg', class: 'min-w-[3.875rem] h-[1.875rem]' },\n ],\n defaultVariants: {\n zSize: 'default',\n zMode: 'default',\n },\n }\n);\n\nexport const zSwitchThumbVariants = cva(\n [\n 'pointer-events-none flex items-center justify-center rounded-full bg-white ring-0',\n 'shadow-[0_2px_4px_rgba(0,0,0,0.2)] transition-all duration-200',\n 'absolute top-1/2 -translate-y-1/2 z-10',\n ],\n {\n variants: {\n zSize: {\n sm: 'size-4',\n default: 'size-5',\n lg: 'size-6',\n },\n zMode: {\n default: '',\n inner: '',\n },\n },\n compoundVariants: [\n { zMode: 'default', zSize: 'sm', class: 'left-0.5 data-[state=checked]:translate-x-4' },\n { zMode: 'default', zSize: 'default', class: 'left-0.5 data-[state=checked]:translate-x-5' },\n { zMode: 'default', zSize: 'lg', class: 'left-0.5 data-[state=checked]:translate-x-7' },\n {\n zMode: 'inner',\n zSize: 'sm',\n class: 'size-[1.125rem] left-[0.125rem] data-[state=checked]:left-[calc(100%-1.25rem)]',\n },\n {\n zMode: 'inner',\n zSize: 'default',\n class: 'size-[1.375rem] left-[0.125rem] data-[state=checked]:left-[calc(100%-1.5rem)]',\n },\n {\n zMode: 'inner',\n zSize: 'lg',\n class: 'size-[1.625rem] left-[0.125rem] data-[state=checked]:left-[calc(100%-1.75rem)]',\n },\n ],\n defaultVariants: {\n zSize: 'default',\n zMode: 'default',\n },\n }\n);\n\nexport const zSwitchLabelVariants = cva(\n 'select-none cursor-pointer peer-disabled:cursor-not-allowed peer-disabled:opacity-70',\n {\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);\n\n// Text hiển thị bên TRÁI (khi checked, thumb ở phải)\nexport const zSwitchInnerLeftVariants = cva(\n [\n 'absolute left-0 top-1/2 -translate-y-1/2 text-white font-medium select-none',\n 'truncate transition-opacity duration-200',\n ],\n {\n variants: {\n zSize: {\n sm: 'text-[0.5625rem] pl-[0.3125rem] max-w-[calc(100%-1.375rem)]',\n default: 'text-[0.625rem] pl-[0.375rem] max-w-[calc(100%-1.625rem)]',\n lg: 'text-[0.6875rem] pl-[0.4375rem] max-w-[calc(100%-1.875rem)]',\n },\n },\n defaultVariants: {\n zSize: 'default',\n },\n }\n);\n\n// Text hiển thị bên PHẢI (khi unchecked, thumb ở trái)\nexport const zSwitchInnerRightVariants = cva(\n [\n 'absolute right-0 top-1/2 -translate-y-1/2 text-white font-medium select-none',\n 'truncate transition-opacity duration-200',\n ],\n {\n variants: {\n zSize: {\n sm: 'text-[0.5625rem] pr-[0.3125rem] max-w-[calc(100%-1.375rem)]',\n default: 'text-[0.625rem] pr-[0.375rem] max-w-[calc(100%-1.625rem)]',\n lg: 'text-[0.6875rem] pr-[0.4375rem] max-w-[calc(100%-1.875rem)]',\n },\n },\n defaultVariants: {\n zSize: 'default',\n },\n }\n);\n\nexport type ZSwitchVariants = VariantProps<typeof zSwitchVariants>;\n","import {\n ChangeDetectionStrategy,\n Component,\n computed,\n forwardRef,\n input,\n model,\n output,\n signal,\n ViewEncapsulation,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport type { ZIcon } from '@shival99/z-ui/components/z-icon';\nimport { zMergeClasses, zTransform, zCreateEvent, type ZEvent } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\nimport { ZSwitchMode, ZSwitchSize, Z_SWITCH_INNER_TEXT_MAX_LENGTH } from './z-switch.types';\nimport {\n zSwitchLabelVariants,\n zSwitchThumbVariants,\n zSwitchVariants,\n zSwitchInnerLeftVariants,\n zSwitchInnerRightVariants,\n} from './z-switch.variants';\n\n@Component({\n selector: 'z-switch',\n imports: [ZIconComponent],\n standalone: true,\n templateUrl: './z-switch.component.html',\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => ZSwitchComponent),\n multi: true,\n },\n ],\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[class]': 'hostClasses()',\n },\n})\nexport class ZSwitchComponent implements ControlValueAccessor {\n public readonly zChange = output<boolean>();\n public readonly zOnBlur = output<FocusEvent>();\n public readonly zOnFocus = output<FocusEvent>();\n public readonly zEvent = output<ZEvent>();\n\n public readonly class = input<ClassValue>('');\n public readonly zSwitchClass = input<ClassValue>('');\n public readonly zThumbClass = input<ClassValue>('');\n public readonly zSize = input<ZSwitchSize>('default');\n public readonly zMode = input<ZSwitchMode>('default');\n public readonly zLabel = input<string>('');\n public readonly zText = input<string>('');\n public readonly zCheckedText = input<string>('ON');\n public readonly zUncheckedText = input<string>('OFF');\n public readonly zCheckedIcon = input<ZIcon \| null>(null);\n public readonly zUncheckedIcon = input<ZIcon \| null>(null);\n public readonly zDisabled = input(false, { transform: zTransform });\n public readonly zLoading = input(false, { transform: zTransform });\n public readonly zTextPosition = input<'left' \| 'right'>('right');\n public readonly zWave = input(true, { transform: zTransform });\n\n public readonly zChecked = model<boolean>(false);\n\n protected readonly isInnerMode = computed(() => this.zMode() === 'inner');\n\n private readonly _disabled = signal(false);\n protected readonly isDisabled = computed(() => this.zDisabled() \|\| this._disabled() \|\| this.zLoading());\n\n protected readonly hostClasses = computed(() => {\n const hasLabel = !!this.zLabel();\n if (hasLabel) {\n return zMergeClasses('flex flex-col gap-2', this.class());\n }\n return zMergeClasses('inline-flex items-center gap-3', this.class());\n });\n\n protected readonly switchClasses = computed(() =>\n zMergeClasses(zSwitchVariants({ zSize: this.zSize(), zMode: this.zMode() }), this.zSwitchClass())\n );\n\n protected readonly thumbClasses = computed(() =>\n zMergeClasses(zSwitchThumbVariants({ zSize: this.zSize(), zMode: this.zMode() }), this.zThumbClass())\n );\n\n protected readonly labelClasses = computed(() => zSwitchLabelVariants({ zSize: this.zSize() }));\n protected readonly switchState = computed(() => (this.zChecked() ? 'checked' : 'unchecked'));\n protected readonly innerLeftClasses = computed(() => zSwitchInnerLeftVariants({ zSize: this.zSize() }));\n protected readonly innerRightClasses = computed(() => zSwitchInnerRightVariants({ zSize: this.zSize() }));\n protected readonly currentThumbIcon = computed(() => {\n if (this.zChecked()) {\n return this.zCheckedIcon();\n }\n\n return this.zUncheckedIcon();\n });\n\n protected readonly displayCheckedText = computed(() => {\n const text = this.zCheckedText();\n if (text.length > Z_SWITCH_INNER_TEXT_MAX_LENGTH) {\n return text.slice(0, Z_SWITCH_INNER_TEXT_MAX_LENGTH - 1) + '…';\n }\n return text;\n });\n\n protected readonly displayUncheckedText = computed(() => {\n const text = this.zUncheckedText();\n if (text.length > Z_SWITCH_INNER_TEXT_MAX_LENGTH) {\n return text.slice(0, Z_SWITCH_INNER_TEXT_MAX_LENGTH - 1) + '…';\n }\n return text;\n });\n\n protected readonly loadingIconSize = computed(() => {\n const size = this.zSize();\n if (size === 'sm') {\n return '10';\n }\n if (size === 'lg') {\n return '16';\n }\n return '12';\n });\n\n private _onChange: (value: boolean) => void = () => {};\n private _onTouched: () => void = () => {};\n\n public writeValue(value: boolean \| null): void {\n this.zChecked.set(!!value);\n }\n\n public registerOnChange(fn: (value: boolean) => void): void {\n this._onChange = fn;\n }\n\n public registerOnTouched(fn: () => void): void {\n this._onTouched = fn;\n }\n\n public setDisabledState(isDisabled: boolean): void {\n this._disabled.set(isDisabled);\n }\n\n protected onFocus(event: FocusEvent): void {\n this.zOnFocus.emit(event);\n this.zEvent.emit(zCreateEvent('focus', event));\n }\n\n protected onBlur(event: FocusEvent): void {\n this.zOnBlur.emit(event);\n this.zEvent.emit(zCreateEvent('blur', event));\n this._onTouched();\n }\n\n protected onSwitchClick(event: MouseEvent): void {\n if (this.isDisabled()) {\n return;\n }\n\n const newValue = !this.zChecked();\n this.zChecked.set(newValue);\n this.zChange.emit(newValue);\n this._onChange(newValue);\n this._onTouched();\n\n // Wave effect\n if (this.zWave()) {\n const target = event.currentTarget as HTMLElement;\n const button = target.tagName === 'BUTTON' ? target : target.closest('button');\n if (button) {\n this._triggerWaveEffect(button as HTMLElement);\n }\n }\n }\n\n private _triggerWaveEffect(el: HTMLElement): void {\n const waveEl = document.createElement('span');\n waveEl.className = 'z-animate-wave';\n el.appendChild(waveEl);\n el.classList.add('z-wave-active');\n const onWaveAnimationEnd = (event: AnimationEvent): void => {\n if (event.animationName !== 'z-fade-effect') {\n return;\n }\n\n waveEl.remove();\n el.classList.remove('z-wave-active');\n waveEl.removeEventListener('animationend', onWaveAnimationEnd);\n };\n\n waveEl.addEventListener('animationend', onWaveAnimationEnd);\n }\n}\n","<!-- 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","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}