@shival99/z-ui 2.1.29 → 2.1.30

package/fesm2022/shival99-z-ui-components-z-show-more.mjs

@@ -0,0 +1,121 @@
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, input, output, viewChild, signal, computed, afterNextRender, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { TranslatePipe } from '@ngx-translate/core';
+import { ZButtonComponent } from '@shival99/z-ui/components/z-button';
+import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
+import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
+
+class ZShowMoreComponent {
+    _destroyRef = inject(DestroyRef);
+    // Inputs
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    zMaxHeight = input(150, ...(ngDevMode ? [{ debugName: "zMaxHeight" }] : []));
+    zShowMoreLabel = input(undefined, ...(ngDevMode ? [{ debugName: "zShowMoreLabel" }] : []));
+    zShowLessLabel = input(undefined, ...(ngDevMode ? [{ debugName: "zShowLessLabel" }] : []));
+    zShowLessButton = input(true, ...(ngDevMode ? [{ debugName: "zShowLessButton" }] : []));
+    zButtonType = input('ghost-primary', ...(ngDevMode ? [{ debugName: "zButtonType" }] : []));
+    zButtonSize = input('sm', ...(ngDevMode ? [{ debugName: "zButtonSize" }] : []));
+    zWave = input(false, { ...(ngDevMode ? { debugName: "zWave" } : {}), transform: zTransform });
+    zBlurHeight = input(64, ...(ngDevMode ? [{ debugName: "zBlurHeight" }] : []));
+    zBlurColor = input(undefined, ...(ngDevMode ? [{ debugName: "zBlurColor" }] : []));
+    // Outputs
+    zExpandChange = output();
+    // Queries
+    _contentContainer = viewChild('contentContainer', ...(ngDevMode ? [{ debugName: "_contentContainer" }] : []));
+    _contentInner = viewChild('contentInner', ...(ngDevMode ? [{ debugName: "_contentInner" }] : []));
+    // State
+    _isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "_isExpanded" }] : []));
+    _isOverflowing = signal(false, ...(ngDevMode ? [{ debugName: "_isOverflowing" }] : []));
+    _scrollHeight = signal(0, ...(ngDevMode ? [{ debugName: "_scrollHeight" }] : []));
+    // Readonly bindings for template
+    isExpanded = this._isExpanded.asReadonly();
+    isOverflowing = this._isOverflowing.asReadonly();
+    zClasses = computed(() => zMergeClasses('block w-full', this.class()), ...(ngDevMode ? [{ debugName: "zClasses" }] : []));
+    computedMaxHeight = computed(() => {
+        if (!this._isOverflowing()) {
+            return 'none';
+        }
+        if (this._isExpanded()) {
+            return `${this._scrollHeight()}px`;
+        }
+        const maxH = this.zMaxHeight();
+        return typeof maxH === 'number' ? `${maxH}px` : maxH;
+    }, ...(ngDevMode ? [{ debugName: "computedMaxHeight" }] : []));
+    // Tạo linear gradient mờ dần xuống nền (card/page)
+    blurGradientStyle = computed(() => {
+        const bg = this.zBlurColor() || 'var(--card, var(--background, #fff))';
+        return {
+            'background-image': `linear-gradient(to top, ${bg} 0%, transparent 100%)`,
+            height: `${this.zBlurHeight()}px`,
+        };
+    }, ...(ngDevMode ? [{ debugName: "blurGradientStyle" }] : []));
+    constructor() {
+        afterNextRender(() => {
+            const innerEl = this._contentInner()?.nativeElement;
+            if (!innerEl) {
+                return;
+            }
+            // Kiểm tra chiều cao nội dung thực tế so với chiều cao tối đa giới hạn
+            const checkOverflow = () => {
+                const { scrollHeight } = innerEl;
+                this._scrollHeight.set(scrollHeight);
+                const maxH = this.zMaxHeight();
+                if (typeof maxH === 'number') {
+                    this._isOverflowing.set(scrollHeight > maxH);
+                    return;
+                }
+                // Nếu zMaxHeight là string (ví dụ: '100%', 'calc(100% - 40px)')
+                const contentEl = this._contentContainer()?.nativeElement;
+                if (!contentEl) {
+                    return;
+                }
+                // Tạm thời tắt transition để đo chiều cao chính xác mà không bị ảnh hưởng bởi chuyển động
+                const originalTransition = contentEl.style.transition;
+                const originalMaxHeight = contentEl.style.maxHeight;
+                contentEl.style.transition = 'none';
+                contentEl.style.maxHeight = maxH;
+                // Force reflow để trình duyệt tính toán lại layout
+                const collapsedClientHeight = contentEl.clientHeight;
+                // Khôi phục lại trạng thái ban đầu
+                contentEl.style.maxHeight = originalMaxHeight;
+                // Force reflow để tránh giật lag khi phục hồi transition
+                void contentEl.offsetHeight;
+                contentEl.style.transition = originalTransition;
+                // Nếu phần tử đang ẩn (display: none) thì bỏ qua
+                if (collapsedClientHeight === 0 && contentEl.offsetWidth === 0) {
+                    return;
+                }
+                this._isOverflowing.set(scrollHeight > collapsedClientHeight);
+            };
+            checkOverflow();
+            // Sử dụng ResizeObserver để lắng nghe thay đổi kích thước của phần tử nội dung bên trong
+            const resizeObserver = new ResizeObserver(() => {
+                checkOverflow();
+            });
+            resizeObserver.observe(innerEl);
+            this._destroyRef.onDestroy(() => {
+                resizeObserver.disconnect();
+            });
+        });
+    }
+    toggle() {
+        const nextState = !this._isExpanded();
+        this._isExpanded.set(nextState);
+        this.zExpandChange.emit(nextState);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZShowMoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZShowMoreComponent, isStandalone: true, selector: "z-show-more", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zMaxHeight: { classPropertyName: "zMaxHeight", publicName: "zMaxHeight", isSignal: true, isRequired: false, transformFunction: null }, zShowMoreLabel: { classPropertyName: "zShowMoreLabel", publicName: "zShowMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, zShowLessLabel: { classPropertyName: "zShowLessLabel", publicName: "zShowLessLabel", isSignal: true, isRequired: false, transformFunction: null }, zShowLessButton: { classPropertyName: "zShowLessButton", publicName: "zShowLessButton", isSignal: true, isRequired: false, transformFunction: null }, zButtonType: { classPropertyName: "zButtonType", publicName: "zButtonType", isSignal: true, isRequired: false, transformFunction: null }, zButtonSize: { classPropertyName: "zButtonSize", publicName: "zButtonSize", isSignal: true, isRequired: false, transformFunction: null }, zWave: { classPropertyName: "zWave", publicName: "zWave", isSignal: true, isRequired: false, transformFunction: null }, zBlurHeight: { classPropertyName: "zBlurHeight", publicName: "zBlurHeight", isSignal: true, isRequired: false, transformFunction: null }, zBlurColor: { classPropertyName: "zBlurColor", publicName: "zBlurColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zExpandChange: "zExpandChange" }, host: { properties: { "class": "zClasses()" } }, viewQueries: [{ propertyName: "_contentContainer", first: true, predicate: ["contentContainer"], descendants: true, isSignal: true }, { propertyName: "_contentInner", first: true, predicate: ["contentInner"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"z-show-more flex h-full min-h-0 w-full flex-col\">\n  <div\n    #contentContainer\n    class=\"z-show-more-content relative min-h-0 flex-1 overflow-hidden transition-[max-height] duration-300 ease-out\"\n    [style.max-height]=\"computedMaxHeight()\">\n    <div #contentInner>\n      <ng-content />\n    </div>\n\n    @if (!isExpanded() && isOverflowing()) {\n      <div\n        class=\"pointer-events-none absolute right-0 bottom-0 left-0 transition-opacity duration-300\"\n        [style]=\"blurGradientStyle()\"></div>\n    }\n  </div>\n\n  @if (isOverflowing() && (zShowLessButton() || !isExpanded())) {\n    <div class=\"z-show-more-actions mt-2 flex justify-center\">\n      <button z-button [zType]=\"zButtonType()\" [zSize]=\"zButtonSize()\" [zWave]=\"zWave()\" (click)=\"toggle()\">\n        <span>\n          {{\n            isExpanded()\n              ? zShowLessLabel() || ('i18n_z_ui_show_more_collapse' | translate)\n              : zShowMoreLabel() || ('i18n_z_ui_show_more_expand' | translate)\n          }}\n        </span>\n        <z-icon [zType]=\"isExpanded() ? 'lucideChevronUp' : 'lucideChevronDown'\" zSize=\"16\" class=\"ml-1\" />\n      </button>\n    </div>\n  }\n</div>\n", styles: [".z-show-more-content{will-change:max-height}\n"], dependencies: [{ kind: "component", type: ZButtonComponent, selector: "z-button, button[z-button], a[z-button]", inputs: ["class", "zType", "zSize", "zShape", "zLabel", "zLoading", "zDisabled", "zTypeIcon", "zAnimatedTypeIcon", "zAnimateIcon", "zAnimationTriggerIcon", "zSizeIcon", "zStrokeWidthIcon", "zWave"], exportAs: ["zButton"] }, { kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZShowMoreComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-show-more', imports: [ZButtonComponent, ZIconComponent, TranslatePipe], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        '[class]': 'zClasses()',
+                    }, template: "<div class=\"z-show-more flex h-full min-h-0 w-full flex-col\">\n  <div\n    #contentContainer\n    class=\"z-show-more-content relative min-h-0 flex-1 overflow-hidden transition-[max-height] duration-300 ease-out\"\n    [style.max-height]=\"computedMaxHeight()\">\n    <div #contentInner>\n      <ng-content />\n    </div>\n\n    @if (!isExpanded() && isOverflowing()) {\n      <div\n        class=\"pointer-events-none absolute right-0 bottom-0 left-0 transition-opacity duration-300\"\n        [style]=\"blurGradientStyle()\"></div>\n    }\n  </div>\n\n  @if (isOverflowing() && (zShowLessButton() || !isExpanded())) {\n    <div class=\"z-show-more-actions mt-2 flex justify-center\">\n      <button z-button [zType]=\"zButtonType()\" [zSize]=\"zButtonSize()\" [zWave]=\"zWave()\" (click)=\"toggle()\">\n        <span>\n          {{\n            isExpanded()\n              ? zShowLessLabel() || ('i18n_z_ui_show_more_collapse' | translate)\n              : zShowMoreLabel() || ('i18n_z_ui_show_more_expand' | translate)\n          }}\n        </span>\n        <z-icon [zType]=\"isExpanded() ? 'lucideChevronUp' : 'lucideChevronDown'\" zSize=\"16\" class=\"ml-1\" />\n      </button>\n    </div>\n  }\n</div>\n", styles: [".z-show-more-content{will-change:max-height}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zMaxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zMaxHeight", required: false }] }], zShowMoreLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowMoreLabel", required: false }] }], zShowLessLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowLessLabel", required: false }] }], zShowLessButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "zShowLessButton", required: false }] }], zButtonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zButtonType", required: false }] }], zButtonSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zButtonSize", required: false }] }], zWave: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWave", required: false }] }], zBlurHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBlurHeight", required: false }] }], zBlurColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBlurColor", required: false }] }], zExpandChange: [{ type: i0.Output, args: ["zExpandChange"] }], _contentContainer: [{ type: i0.ViewChild, args: ['contentContainer', { isSignal: true }] }], _contentInner: [{ type: i0.ViewChild, args: ['contentInner', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZShowMoreComponent };
+//# sourceMappingURL=shival99-z-ui-components-z-show-more.mjs.map

package/fesm2022/shival99-z-ui-components-z-show-more.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shival99-z-ui-components-z-show-more.mjs","sources":["../../../../libs/core-ui/components/z-show-more/z-show-more.component.ts","../../../../libs/core-ui/components/z-show-more/z-show-more.component.html","../../../../libs/core-ui/components/z-show-more/shival99-z-ui-components-z-show-more.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DestroyRef,\n  ElementRef,\n  inject,\n  input,\n  signal,\n  viewChild,\n  afterNextRender,\n  ViewEncapsulation,\n  output,\n} from '@angular/core';\nimport { TranslatePipe } from '@ngx-translate/core';\nimport { ZButtonComponent, type ZButtonVariants } from '@shival99/z-ui/components/z-button';\nimport { ZIconComponent } from '@shival99/z-ui/components/z-icon';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport type { ClassValue } from 'clsx';\n\n@Component({\n  selector: 'z-show-more',\n  imports: [ZButtonComponent, ZIconComponent, TranslatePipe],\n  standalone: true,\n  templateUrl: './z-show-more.component.html',\n  styleUrl: './z-show-more.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    '[class]': 'zClasses()',\n  },\n})\nexport class ZShowMoreComponent {\n  private readonly _destroyRef = inject(DestroyRef);\n\n  // Inputs\n  public readonly class = input<ClassValue>('');\n  public readonly zMaxHeight = input<number | string>(150);\n  public readonly zShowMoreLabel = input<string | undefined>(undefined);\n  public readonly zShowLessLabel = input<string | undefined>(undefined);\n  public readonly zShowLessButton = input<boolean>(true);\n  public readonly zButtonType = input<ZButtonVariants['zType']>('ghost-primary');\n  public readonly zButtonSize = input<ZButtonVariants['zSize']>('sm');\n  public readonly zWave = input(false, { transform: zTransform });\n  public readonly zBlurHeight = input<number>(64);\n  public readonly zBlurColor = input<string | undefined>(undefined);\n\n  // Outputs\n  public readonly zExpandChange = output<boolean>();\n\n  // Queries\n  private readonly _contentContainer = viewChild<ElementRef<HTMLElement>>('contentContainer');\n  private readonly _contentInner = viewChild<ElementRef<HTMLElement>>('contentInner');\n\n  // State\n  private readonly _isExpanded = signal(false);\n  private readonly _isOverflowing = signal(false);\n  private readonly _scrollHeight = signal(0);\n\n  // Readonly bindings for template\n  protected readonly isExpanded = this._isExpanded.asReadonly();\n  protected readonly isOverflowing = this._isOverflowing.asReadonly();\n\n  protected readonly zClasses = computed(() => zMergeClasses('block w-full', this.class()));\n\n  protected readonly computedMaxHeight = computed(() => {\n    if (!this._isOverflowing()) {\n      return 'none';\n    }\n    if (this._isExpanded()) {\n      return `${this._scrollHeight()}px`;\n    }\n    const maxH = this.zMaxHeight();\n    return typeof maxH === 'number' ? `${maxH}px` : maxH;\n  });\n\n  // Tạo linear gradient mờ dần xuống nền (card/page)\n  protected readonly blurGradientStyle = computed(() => {\n    const bg = this.zBlurColor() || 'var(--card, var(--background, #fff))';\n    return {\n      'background-image': `linear-gradient(to top, ${bg} 0%, transparent 100%)`,\n      height: `${this.zBlurHeight()}px`,\n    };\n  });\n\n  constructor() {\n    afterNextRender(() => {\n      const innerEl = this._contentInner()?.nativeElement;\n      if (!innerEl) {\n        return;\n      }\n\n      // Kiểm tra chiều cao nội dung thực tế so với chiều cao tối đa giới hạn\n      const checkOverflow = () => {\n        const { scrollHeight } = innerEl;\n        this._scrollHeight.set(scrollHeight);\n\n        const maxH = this.zMaxHeight();\n        if (typeof maxH === 'number') {\n          this._isOverflowing.set(scrollHeight > maxH);\n          return;\n        }\n\n        // Nếu zMaxHeight là string (ví dụ: '100%', 'calc(100% - 40px)')\n        const contentEl = this._contentContainer()?.nativeElement;\n        if (!contentEl) {\n          return;\n        }\n\n        // Tạm thời tắt transition để đo chiều cao chính xác mà không bị ảnh hưởng bởi chuyển động\n        const originalTransition = contentEl.style.transition;\n        const originalMaxHeight = contentEl.style.maxHeight;\n\n        contentEl.style.transition = 'none';\n        contentEl.style.maxHeight = maxH;\n\n        // Force reflow để trình duyệt tính toán lại layout\n        const collapsedClientHeight = contentEl.clientHeight;\n\n        // Khôi phục lại trạng thái ban đầu\n        contentEl.style.maxHeight = originalMaxHeight;\n        // Force reflow để tránh giật lag khi phục hồi transition\n        void contentEl.offsetHeight;\n        contentEl.style.transition = originalTransition;\n\n        // Nếu phần tử đang ẩn (display: none) thì bỏ qua\n        if (collapsedClientHeight === 0 && contentEl.offsetWidth === 0) {\n          return;\n        }\n\n        this._isOverflowing.set(scrollHeight > collapsedClientHeight);\n      };\n\n      checkOverflow();\n\n      // Sử dụng ResizeObserver để lắng nghe thay đổi kích thước của phần tử nội dung bên trong\n      const resizeObserver = new ResizeObserver(() => {\n        checkOverflow();\n      });\n\n      resizeObserver.observe(innerEl);\n\n      this._destroyRef.onDestroy(() => {\n        resizeObserver.disconnect();\n      });\n    });\n  }\n\n  protected toggle(): void {\n    const nextState = !this._isExpanded();\n    this._isExpanded.set(nextState);\n    this.zExpandChange.emit(nextState);\n  }\n}\n","<div class=\"z-show-more flex h-full min-h-0 w-full flex-col\">\n  <div\n    #contentContainer\n    class=\"z-show-more-content relative min-h-0 flex-1 overflow-hidden transition-[max-height] duration-300 ease-out\"\n    [style.max-height]=\"computedMaxHeight()\">\n    <div #contentInner>\n      <ng-content />\n    </div>\n\n    @if (!isExpanded() && isOverflowing()) {\n      <div\n        class=\"pointer-events-none absolute right-0 bottom-0 left-0 transition-opacity duration-300\"\n        [style]=\"blurGradientStyle()\"></div>\n    }\n  </div>\n\n  @if (isOverflowing() && (zShowLessButton() || !isExpanded())) {\n    <div class=\"z-show-more-actions mt-2 flex justify-center\">\n      <button z-button [zType]=\"zButtonType()\" [zSize]=\"zButtonSize()\" [zWave]=\"zWave()\" (click)=\"toggle()\">\n        <span>\n          {{\n            isExpanded()\n              ? zShowLessLabel() || ('i18n_z_ui_show_more_collapse' | translate)\n              : zShowMoreLabel() || ('i18n_z_ui_show_more_expand' | translate)\n          }}\n        </span>\n        <z-icon [zType]=\"isExpanded() ? 'lucideChevronUp' : 'lucideChevronDown'\" zSize=\"16\" class=\"ml-1\" />\n      </button>\n    </div>\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-skeleton-auto.mjs

@@ -0,0 +1,61 @@
+import * as i0 from '@angular/core';
+import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';
+import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
+import { SkeletonComponent } from 'boneyard-js/angular';
+
+class ZSkeletonAutoComponent {
+    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
+    zLoading = input(false, { ...(ngDevMode ? { debugName: "zLoading" } : {}), transform: zTransform });
+    zName = input('z-skeleton-auto', ...(ngDevMode ? [{ debugName: "zName" }] : []));
+    zColor = input('#e0e0e0', ...(ngDevMode ? [{ debugName: "zColor" }] : []));
+    zDarkColor = input('#374151', ...(ngDevMode ? [{ debugName: "zDarkColor" }] : []));
+    zAnimate = input('shimmer', ...(ngDevMode ? [{ debugName: "zAnimate" }] : []));
+    zWavePreset = input('legacy-strong', ...(ngDevMode ? [{ debugName: "zWavePreset" }] : []));
+    zWaveDuration = input(1.5, ...(ngDevMode ? [{ debugName: "zWaveDuration" }] : []));
+    zInitialBones = input(undefined, ...(ngDevMode ? [{ debugName: "zInitialBones" }] : []));
+    zStagger = input(false, ...(ngDevMode ? [{ debugName: "zStagger" }] : []));
+    zTransition = input(false, ...(ngDevMode ? [{ debugName: "zTransition" }] : []));
+    zBoneClass = input('', ...(ngDevMode ? [{ debugName: "zBoneClass" }] : []));
+    zFallbackRows = input(3, ...(ngDevMode ? [{ debugName: "zFallbackRows" }] : []));
+    zFallbackGap = input(8, ...(ngDevMode ? [{ debugName: "zFallbackGap" }] : []));
+    zFallbackRowHeight = input('12px', ...(ngDevMode ? [{ debugName: "zFallbackRowHeight" }] : []));
+    zFallbackRadius = input('4px', ...(ngDevMode ? [{ debugName: "zFallbackRadius" }] : []));
+    containerClass = computed(() => zMergeClasses('block w-full', this.class()), ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
+    effectiveAnimate = computed(() => {
+        if (this.zWavePreset() === 'legacy-strong') {
+            return false;
+        }
+        return this.zAnimate();
+    }, ...(ngDevMode ? [{ debugName: "effectiveAnimate" }] : []));
+    waveDurationStyle = computed(() => {
+        const seconds = this.zWaveDuration();
+        if (seconds <= 0) {
+            return '1.5s';
+        }
+        return `${seconds}s`;
+    }, ...(ngDevMode ? [{ debugName: "waveDurationStyle" }] : []));
+    resolvedBoneClass = computed(() => {
+        const presetClass = this.zWavePreset() === 'legacy-strong' ? 'z-skeleton-auto-bone-legacy' : '';
+        const merged = zMergeClasses(presetClass, this.zBoneClass());
+        if (!merged) {
+            return undefined;
+        }
+        return merged;
+    }, ...(ngDevMode ? [{ debugName: "resolvedBoneClass" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSkeletonAutoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: ZSkeletonAutoComponent, isStandalone: true, selector: "z-skeleton-auto", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zLoading: { classPropertyName: "zLoading", publicName: "zLoading", isSignal: true, isRequired: false, transformFunction: null }, zName: { classPropertyName: "zName", publicName: "zName", isSignal: true, isRequired: false, transformFunction: null }, zColor: { classPropertyName: "zColor", publicName: "zColor", isSignal: true, isRequired: false, transformFunction: null }, zDarkColor: { classPropertyName: "zDarkColor", publicName: "zDarkColor", isSignal: true, isRequired: false, transformFunction: null }, zAnimate: { classPropertyName: "zAnimate", publicName: "zAnimate", isSignal: true, isRequired: false, transformFunction: null }, zWavePreset: { classPropertyName: "zWavePreset", publicName: "zWavePreset", isSignal: true, isRequired: false, transformFunction: null }, zWaveDuration: { classPropertyName: "zWaveDuration", publicName: "zWaveDuration", isSignal: true, isRequired: false, transformFunction: null }, zInitialBones: { classPropertyName: "zInitialBones", publicName: "zInitialBones", isSignal: true, isRequired: false, transformFunction: null }, zStagger: { classPropertyName: "zStagger", publicName: "zStagger", isSignal: true, isRequired: false, transformFunction: null }, zTransition: { classPropertyName: "zTransition", publicName: "zTransition", isSignal: true, isRequired: false, transformFunction: null }, zBoneClass: { classPropertyName: "zBoneClass", publicName: "zBoneClass", isSignal: true, isRequired: false, transformFunction: null }, zFallbackRows: { classPropertyName: "zFallbackRows", publicName: "zFallbackRows", isSignal: true, isRequired: false, transformFunction: null }, zFallbackGap: { classPropertyName: "zFallbackGap", publicName: "zFallbackGap", isSignal: true, isRequired: false, transformFunction: null }, zFallbackRowHeight: { classPropertyName: "zFallbackRowHeight", publicName: "zFallbackRowHeight", isSignal: true, isRequired: false, transformFunction: null }, zFallbackRadius: { classPropertyName: "zFallbackRadius", publicName: "zFallbackRadius", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.--z-skeleton-auto-wave-duration": "waveDurationStyle()" } }, ngImport: i0, template: "<boneyard-skeleton\n  [loading]=\"zLoading()\"\n  [name]=\"zName()\"\n  [initialBones]=\"zInitialBones()\"\n  [color]=\"zColor()\"\n  [darkColor]=\"zDarkColor()\"\n  [animate]=\"effectiveAnimate()\"\n  [stagger]=\"zStagger()\"\n  [transition]=\"zTransition()\"\n  [boneClass]=\"resolvedBoneClass()\"\n  [cssClass]=\"containerClass()\">\n  <ng-content />\n\n  <div fallback class=\"w-full\">\n    <z-skeleton\n      zType=\"text\"\n      class=\"w-full\"\n      [zRows]=\"zFallbackRows()\"\n      [zGap]=\"zFallbackGap()\"\n      [zHeight]=\"zFallbackRowHeight()\"\n      [zRadius]=\"zFallbackRadius()\" />\n  </div>\n</boneyard-skeleton>\n", styles: [":host{display:block}:host ::ng-deep .z-skeleton-auto-bone-legacy{position:relative;overflow:hidden}:host ::ng-deep .z-skeleton-auto-bone-legacy:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);animation:z-skeleton-auto-legacy-wave var(--z-skeleton-auto-wave-duration, 1.5s) infinite}:host-context(.dark) ::ng-deep .z-skeleton-auto-bone-legacy:after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.24) 50%,transparent 100%)}@keyframes z-skeleton-auto-legacy-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"], dependencies: [{ kind: "component", type: SkeletonComponent, selector: "boneyard-skeleton", inputs: ["loading", "name", "initialBones", "color", "darkColor", "animate", "stagger", "transition", "boneClass", "cssClass", "snapshotConfig"] }, { kind: "component", type: ZSkeletonComponent, selector: "z-skeleton", inputs: ["class", "zType", "zSize", "zWidth", "zHeight", "zRows", "zGap", "zAnimated", "zRadius"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZSkeletonAutoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'z-skeleton-auto', imports: [SkeletonComponent, ZSkeletonComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[style.--z-skeleton-auto-wave-duration]': 'waveDurationStyle()',
+                    }, template: "<boneyard-skeleton\n  [loading]=\"zLoading()\"\n  [name]=\"zName()\"\n  [initialBones]=\"zInitialBones()\"\n  [color]=\"zColor()\"\n  [darkColor]=\"zDarkColor()\"\n  [animate]=\"effectiveAnimate()\"\n  [stagger]=\"zStagger()\"\n  [transition]=\"zTransition()\"\n  [boneClass]=\"resolvedBoneClass()\"\n  [cssClass]=\"containerClass()\">\n  <ng-content />\n\n  <div fallback class=\"w-full\">\n    <z-skeleton\n      zType=\"text\"\n      class=\"w-full\"\n      [zRows]=\"zFallbackRows()\"\n      [zGap]=\"zFallbackGap()\"\n      [zHeight]=\"zFallbackRowHeight()\"\n      [zRadius]=\"zFallbackRadius()\" />\n  </div>\n</boneyard-skeleton>\n", styles: [":host{display:block}:host ::ng-deep .z-skeleton-auto-bone-legacy{position:relative;overflow:hidden}:host ::ng-deep .z-skeleton-auto-bone-legacy:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);animation:z-skeleton-auto-legacy-wave var(--z-skeleton-auto-wave-duration, 1.5s) infinite}:host-context(.dark) ::ng-deep .z-skeleton-auto-bone-legacy:after{background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.24) 50%,transparent 100%)}@keyframes z-skeleton-auto-legacy-wave{0%{transform:translate(-100%)}to{transform:translate(100%)}}\n"] }]
+        }], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "zLoading", required: false }] }], zName: [{ type: i0.Input, args: [{ isSignal: true, alias: "zName", required: false }] }], zColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zColor", required: false }] }], zDarkColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDarkColor", required: false }] }], zAnimate: [{ type: i0.Input, args: [{ isSignal: true, alias: "zAnimate", required: false }] }], zWavePreset: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWavePreset", required: false }] }], zWaveDuration: [{ type: i0.Input, args: [{ isSignal: true, alias: "zWaveDuration", required: false }] }], zInitialBones: [{ type: i0.Input, args: [{ isSignal: true, alias: "zInitialBones", required: false }] }], zStagger: [{ type: i0.Input, args: [{ isSignal: true, alias: "zStagger", required: false }] }], zTransition: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTransition", required: false }] }], zBoneClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "zBoneClass", required: false }] }], zFallbackRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallbackRows", required: false }] }], zFallbackGap: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallbackGap", required: false }] }], zFallbackRowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallbackRowHeight", required: false }] }], zFallbackRadius: [{ type: i0.Input, args: [{ isSignal: true, alias: "zFallbackRadius", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ZSkeletonAutoComponent };
+//# sourceMappingURL=shival99-z-ui-components-z-skeleton-auto.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shival99-z-ui-components-z-skeleton-auto.mjs","sources":["../../../../libs/core-ui/components/z-skeleton-auto/z-skeleton-auto.component.ts","../../../../libs/core-ui/components/z-skeleton-auto/z-skeleton-auto.component.html","../../../../libs/core-ui/components/z-skeleton-auto/shival99-z-ui-components-z-skeleton-auto.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';\nimport { ZSkeletonComponent } from '@shival99/z-ui/components/z-skeleton';\nimport { zMergeClasses, zTransform } from '@shival99/z-ui/utils';\nimport { SkeletonComponent as BoneyardSkeletonComponent } from 'boneyard-js/angular';\nimport type { ClassValue } from 'clsx';\nimport type { ZSkeletonAutoAnimate, ZSkeletonAutoBones } from './z-skeleton-auto.types';\n\n@Component({\n  selector: 'z-skeleton-auto',\n  imports: [BoneyardSkeletonComponent, ZSkeletonComponent],\n  standalone: true,\n  templateUrl: './z-skeleton-auto.component.html',\n  styleUrl: './z-skeleton-auto.component.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[style.--z-skeleton-auto-wave-duration]': 'waveDurationStyle()',\n  },\n})\nexport class ZSkeletonAutoComponent {\n  public readonly class = input<ClassValue>('');\n  public readonly zLoading = input(false, { transform: zTransform });\n  public readonly zName = input<string>('z-skeleton-auto');\n\n  public readonly zColor = input<string | undefined>('#e0e0e0');\n  public readonly zDarkColor = input<string | undefined>('#374151');\n  public readonly zAnimate = input<ZSkeletonAutoAnimate>('shimmer');\n  public readonly zWavePreset = input<'boneyard' | 'legacy-strong'>('legacy-strong');\n  public readonly zWaveDuration = input<number>(1.5);\n  public readonly zInitialBones = input<ZSkeletonAutoBones | undefined>(undefined);\n  public readonly zStagger = input<number | boolean>(false);\n  public readonly zTransition = input<number | boolean>(false);\n  public readonly zBoneClass = input<string>('');\n\n  public readonly zFallbackRows = input<number>(3);\n  public readonly zFallbackGap = input<number>(8);\n  public readonly zFallbackRowHeight = input<string>('12px');\n  public readonly zFallbackRadius = input<string>('4px');\n\n  protected readonly containerClass = computed(() => zMergeClasses('block w-full', this.class()));\n  protected readonly effectiveAnimate = computed<ZSkeletonAutoAnimate>(() => {\n    if (this.zWavePreset() === 'legacy-strong') {\n      return false;\n    }\n\n    return this.zAnimate();\n  });\n\n  protected readonly waveDurationStyle = computed(() => {\n    const seconds = this.zWaveDuration();\n    if (seconds <= 0) {\n      return '1.5s';\n    }\n\n    return `${seconds}s`;\n  });\n\n  protected readonly resolvedBoneClass = computed(() => {\n    const presetClass = this.zWavePreset() === 'legacy-strong' ? 'z-skeleton-auto-bone-legacy' : '';\n    const merged = zMergeClasses(presetClass, this.zBoneClass());\n    if (!merged) {\n      return undefined;\n    }\n\n    return merged;\n  });\n}\n","<boneyard-skeleton\n  [loading]=\"zLoading()\"\n  [name]=\"zName()\"\n  [initialBones]=\"zInitialBones()\"\n  [color]=\"zColor()\"\n  [darkColor]=\"zDarkColor()\"\n  [animate]=\"effectiveAnimate()\"\n  [stagger]=\"zStagger()\"\n  [transition]=\"zTransition()\"\n  [boneClass]=\"resolvedBoneClass()\"\n  [cssClass]=\"containerClass()\">\n  <ng-content />\n\n  <div fallback class=\"w-full\">\n    <z-skeleton\n      zType=\"text\"\n      class=\"w-full\"\n      [zRows]=\"zFallbackRows()\"\n      [zGap]=\"zFallbackGap()\"\n      [zHeight]=\"zFallbackRowHeight()\"\n      [zRadius]=\"zFallbackRadius()\" />\n  </div>\n</boneyard-skeleton>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["BoneyardSkeletonComponent"],"mappings":"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"}