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
