import { NgTemplateOutlet } from '@angular/common';
import * as i0 from '@angular/core';
import { viewChild, input, output, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import { zMergeClasses } from '@shival99/z-ui/utils';
import { NgScrollbar } from 'ngx-scrollbar';
import { cva } from 'class-variance-authority';

const zScrollAreaVariants = cva('z-scrollarea block overflow-hidden w-full', {
    variants: {
        zSize: {
            sm: 'z-scrollarea-size-sm',
            default: 'z-scrollarea-size-default',
            lg: 'z-scrollarea-size-lg',
        },
    },
    defaultVariants: {
        zSize: 'default',
    },
});

class ZScrollAreaComponent {
    // Lấy reference đến ngx-scrollbar
    scrollbarRef = viewChild('scrollbarRef', ...(ngDevMode ? [{ debugName: "scrollbarRef" }] : []));
    // Lấy reference đến native viewport
    nativeViewport = viewChild('nativeViewport', ...(ngDevMode ? [{ debugName: "nativeViewport" }] : []));
    // Khai báo các inputs sử dụng Signals API
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    zType = input('custom', ...(ngDevMode ? [{ debugName: "zType" }] : []));
    zOrientation = input('vertical', ...(ngDevMode ? [{ debugName: "zOrientation" }] : []));
    zVisibility = input('hover', ...(ngDevMode ? [{ debugName: "zVisibility" }] : []));
    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
    zDisableInteraction = input(false, ...(ngDevMode ? [{ debugName: "zDisableInteraction" }] : []));
    zSensorThrottleTime = input(200, ...(ngDevMode ? [{ debugName: "zSensorThrottleTime" }] : []));
    zDisableSensor = input(false, ...(ngDevMode ? [{ debugName: "zDisableSensor" }] : []));
    // Khai báo các outputs sử dụng Signals API
    zScroll = output();
    zScrollbarInit = output();
    // Tính toán các class cho host element
    hostClasses = computed(() => zMergeClasses(zScrollAreaVariants({
        zSize: this.zSize(),
    }), `z-scrollarea-${this.zOrientation()}`, `z-scrollarea-visibility-${this.zVisibility()}`, this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
    // Tính toán các class cho native viewport
    nativeClasses = computed(() => {
        const orientation = this.zOrientation();
        let overflowClass = 'overflow-auto';
        if (orientation === 'vertical') {
            overflowClass = 'overflow-y-auto overflow-x-hidden';
        }
        if (orientation === 'horizontal') {
            overflowClass = 'overflow-x-auto overflow-y-hidden';
        }
        return zMergeClasses('z-scrollarea-native w-full h-full block', overflowClass);
    }, ...(ngDevMode ? [{ debugName: "nativeClasses" }] : []));
    ngAfterViewInit() {
        const scrollbar = this.scrollbarRef();
        if (!scrollbar) {
            return;
        }
        this.zScrollbarInit.emit(scrollbar);
    }
    // Chuyển tiếp sự kiện scroll
    onScroll(event) {
        this.zScroll.emit(event);
    }
    // API helper để scroll chương trình
    scrollTo(options) {
        if (this.zType() === 'native') {
            const nativeEl = this.nativeViewport()?.nativeElement;
            if (nativeEl) {
                nativeEl.scrollTo(options);
            }
            return;
        }
        const scrollbar = this.scrollbarRef();
        if (!scrollbar) {
            return;
        }
        void scrollbar.scrollTo(options);
    }
    // API helper để scroll đến phần tử cụ thể
    scrollToElement(selectorOrElement, options) {
        if (this.zType() === 'native') {
            const nativeEl = this.nativeViewport()?.nativeElement;
            if (!nativeEl) {
                return;
            }
            let targetEl = null;
            if (typeof selectorOrElement === 'string') {
                targetEl = nativeEl.querySelector(selectorOrElement);
            }
            if (selectorOrElement instanceof HTMLElement) {
                targetEl = selectorOrElement;
            }
            if (targetEl) {
                const behavior = options?.duration && options.duration > 0 ? 'smooth' : 'auto';
                targetEl.scrollIntoView({ behavior, block: 'nearest', inline: 'nearest' });
            }
            return;
        }
        const scrollbar = this.scrollbarRef();
        if (!scrollbar) {
            return;
        }
        let targetEl = null;
        if (typeof selectorOrElement === 'string') {
            targetEl = scrollbar.nativeElement.querySelector(selectorOrElement);
        }
        if (selectorOrElement instanceof HTMLElement) {
            targetEl = selectorOrElement;
        }
        if (!targetEl) {
            return;
        }
        void scrollbar.scrollToElement(targetEl, options);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZScrollAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZScrollAreaComponent, isStandalone: true, selector: "z-scrollarea", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zType: { classPropertyName: "zType", publicName: "zType", isSignal: true, isRequired: false, transformFunction: null }, zOrientation: { classPropertyName: "zOrientation", publicName: "zOrientation", isSignal: true, isRequired: false, transformFunction: null }, zVisibility: { classPropertyName: "zVisibility", publicName: "zVisibility", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zDisableInteraction: { classPropertyName: "zDisableInteraction", publicName: "zDisableInteraction", isSignal: true, isRequired: false, transformFunction: null }, zSensorThrottleTime: { classPropertyName: "zSensorThrottleTime", publicName: "zSensorThrottleTime", isSignal: true, isRequired: false, transformFunction: null }, zDisableSensor: { classPropertyName: "zDisableSensor", publicName: "zDisableSensor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zScroll: "zScroll", zScrollbarInit: "zScrollbarInit" }, host: { properties: { "class": "hostClasses()" } }, viewQueries: [{ propertyName: "scrollbarRef", first: true, predicate: ["scrollbarRef"], descendants: true, isSignal: true }, { propertyName: "nativeViewport", first: true, predicate: ["nativeViewport"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\n\n@if (zType() === 'custom') {\n  <ng-scrollbar\n    #scrollbarRef\n    class=\"block h-full w-full\"\n    [visibility]=\"zVisibility()\"\n    [orientation]=\"zOrientation()\"\n    [disableInteraction]=\"zDisableInteraction()\"\n    [sensorThrottleTime]=\"zSensorThrottleTime()\"\n    [disableSensor]=\"zDisableSensor()\"\n    (scroll)=\"onScroll($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\" />\n  </ng-scrollbar>\n} @else {\n  <div #nativeViewport [class]=\"nativeClasses()\" (scroll)=\"onScroll($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\" />\n  </div>\n}\n", styles: [":host{display:block;position:relative}.z-scrollarea{display:block}.z-scrollarea ng-scrollbar{width:100%;height:inherit;--scrollbar-track-thickness: var(--scrollbar-size);--scrollbar-track-hover-thickness: var(--scrollbar-size);--scrollbar-track-active-thickness: var(--scrollbar-size);--scrollbar-container-offset: 0px;--scrollbar-track-offset: 0px;--scrollbar-track-color: inherit;--scrollbar-thumb-color: inherit;--scrollbar-thumb-hover-color: inherit;--scrollbar-border-radius: inherit;--scrollbar-track-border-radius: inherit;--scrollbar-thumb-transition: inherit}.z-scrollarea .z-scrollarea-native{width:100%;height:inherit}.z-scrollarea{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);--scrollbar-thumb-hover-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);--scrollbar-border-radius: var(--radius-sm, 6px);--scrollbar-track-border-radius: var(--radius-sm, 6px);--scrollbar-thumb-transition: background-color .2s ease, opacity .2s ease}.z-scrollarea.z-scrollarea-size-sm{--scrollbar-size: 4px;--scrollbar-padding: 2px}.z-scrollarea.z-scrollarea-size-default{--scrollbar-size: 6px;--scrollbar-padding: 4px}.z-scrollarea.z-scrollarea-size-lg{--scrollbar-size: 8px;--scrollbar-padding: 6px}.z-scrollarea .ng-scroll-viewport{width:100%;height:100%;max-width:100%;max-height:100%;box-sizing:border-box}.z-scrollarea .ng-scroll-content{box-sizing:border-box;display:block;width:100%}.z-scrollarea.z-scrollarea-horizontal .ng-scroll-content,.z-scrollarea.z-scrollarea-auto .ng-scroll-content{width:max-content;min-width:100%}.z-scrollarea-visibility-visible .z-scrollarea-native,.z-scrollarea-visibility-hover .z-scrollarea-native{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-color, color-mix(in oklab, var(--muted-foreground) 30%, transparent)) var(--scrollbar-track-color, transparent)}.z-scrollarea-visibility-visible .z-scrollarea-native::-webkit-scrollbar,.z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.z-scrollarea-visibility-visible .z-scrollarea-native::-webkit-scrollbar-track,.z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-track{background:var(--scrollbar-track-color, transparent)}.z-scrollarea-visibility-visible .z-scrollarea-native::-webkit-scrollbar-thumb,.z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color, color-mix(in oklab, var(--muted-foreground) 30%, transparent));border-radius:var(--scrollbar-border-radius, var(--radius-sm, 6px));transition:var(--scrollbar-thumb-transition, background-color .2s ease)}.z-scrollarea-visibility-visible .z-scrollarea-native::-webkit-scrollbar-thumb:hover,.z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color, color-mix(in oklab, var(--muted-foreground) 50%, transparent))}.z-scrollarea-visibility-hover .z-scrollarea-native{scrollbar-color:transparent transparent}.z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-thumb{background:transparent}.z-scrollarea-visibility-hover:hover .z-scrollarea-visibility-hover .z-scrollarea-native,.z-scrollarea-visibility-hover:active .z-scrollarea-visibility-hover .z-scrollarea-native,.z-scrollarea-visibility-hover:focus-within .z-scrollarea-visibility-hover .z-scrollarea-native,.z-scrollarea-visibility-hover .z-scrollarea-native:hover,.z-scrollarea-visibility-hover .z-scrollarea-native:active{scrollbar-color:var(--scrollbar-thumb-color, color-mix(in oklab, var(--muted-foreground) 30%, transparent)) var(--scrollbar-track-color, transparent)}.z-scrollarea-visibility-hover:hover .z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-thumb,.z-scrollarea-visibility-hover:active .z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-thumb,.z-scrollarea-visibility-hover:focus-within .z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-thumb,.z-scrollarea-visibility-hover .z-scrollarea-native:hover::-webkit-scrollbar-thumb,.z-scrollarea-visibility-hover .z-scrollarea-native:active::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color, color-mix(in oklab, var(--muted-foreground) 30%, transparent))}\n"], dependencies: [{ kind: "component", type: NgScrollbar, selector: "ng-scrollbar:not([externalViewport]), [ngScrollbar]", exportAs: ["ngScrollbar"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZScrollAreaComponent, decorators: [{
            type: Component,
            args: [{ selector: 'z-scrollarea', imports: [NgScrollbar, NgTemplateOutlet], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        '[class]': 'hostClasses()',
                    }, template: "<ng-template #contentTpl>\n  <ng-content />\n</ng-template>\n\n@if (zType() === 'custom') {\n  <ng-scrollbar\n    #scrollbarRef\n    class=\"block h-full w-full\"\n    [visibility]=\"zVisibility()\"\n    [orientation]=\"zOrientation()\"\n    [disableInteraction]=\"zDisableInteraction()\"\n    [sensorThrottleTime]=\"zSensorThrottleTime()\"\n    [disableSensor]=\"zDisableSensor()\"\n    (scroll)=\"onScroll($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\" />\n  </ng-scrollbar>\n} @else {\n  <div #nativeViewport [class]=\"nativeClasses()\" (scroll)=\"onScroll($event)\">\n    <ng-container *ngTemplateOutlet=\"contentTpl\" />\n  </div>\n}\n", styles: [":host{display:block;position:relative}.z-scrollarea{display:block}.z-scrollarea ng-scrollbar{width:100%;height:inherit;--scrollbar-track-thickness: var(--scrollbar-size);--scrollbar-track-hover-thickness: var(--scrollbar-size);--scrollbar-track-active-thickness: var(--scrollbar-size);--scrollbar-container-offset: 0px;--scrollbar-track-offset: 0px;--scrollbar-track-color: inherit;--scrollbar-thumb-color: inherit;--scrollbar-thumb-hover-color: inherit;--scrollbar-border-radius: inherit;--scrollbar-track-border-radius: inherit;--scrollbar-thumb-transition: inherit}.z-scrollarea .z-scrollarea-native{width:100%;height:inherit}.z-scrollarea{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in oklab, var(--muted-foreground) 30%, transparent);--scrollbar-thumb-hover-color: color-mix(in oklab, var(--muted-foreground) 50%, transparent);--scrollbar-border-radius: var(--radius-sm, 6px);--scrollbar-track-border-radius: var(--radius-sm, 6px);--scrollbar-thumb-transition: background-color .2s ease, opacity .2s ease}.z-scrollarea.z-scrollarea-size-sm{--scrollbar-size: 4px;--scrollbar-padding: 2px}.z-scrollarea.z-scrollarea-size-default{--scrollbar-size: 6px;--scrollbar-padding: 4px}.z-scrollarea.z-scrollarea-size-lg{--scrollbar-size: 8px;--scrollbar-padding: 6px}.z-scrollarea .ng-scroll-viewport{width:100%;height:100%;max-width:100%;max-height:100%;box-sizing:border-box}.z-scrollarea .ng-scroll-content{box-sizing:border-box;display:block;width:100%}.z-scrollarea.z-scrollarea-horizontal .ng-scroll-content,.z-scrollarea.z-scrollarea-auto .ng-scroll-content{width:max-content;min-width:100%}.z-scrollarea-visibility-visible .z-scrollarea-native,.z-scrollarea-visibility-hover .z-scrollarea-native{scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb-color, color-mix(in oklab, var(--muted-foreground) 30%, transparent)) var(--scrollbar-track-color, transparent)}.z-scrollarea-visibility-visible .z-scrollarea-native::-webkit-scrollbar,.z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar{width:var(--scrollbar-size, 6px);height:var(--scrollbar-size, 6px)}.z-scrollarea-visibility-visible .z-scrollarea-native::-webkit-scrollbar-track,.z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-track{background:var(--scrollbar-track-color, transparent)}.z-scrollarea-visibility-visible .z-scrollarea-native::-webkit-scrollbar-thumb,.z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color, color-mix(in oklab, var(--muted-foreground) 30%, transparent));border-radius:var(--scrollbar-border-radius, var(--radius-sm, 6px));transition:var(--scrollbar-thumb-transition, background-color .2s ease)}.z-scrollarea-visibility-visible .z-scrollarea-native::-webkit-scrollbar-thumb:hover,.z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover-color, color-mix(in oklab, var(--muted-foreground) 50%, transparent))}.z-scrollarea-visibility-hover .z-scrollarea-native{scrollbar-color:transparent transparent}.z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-thumb{background:transparent}.z-scrollarea-visibility-hover:hover .z-scrollarea-visibility-hover .z-scrollarea-native,.z-scrollarea-visibility-hover:active .z-scrollarea-visibility-hover .z-scrollarea-native,.z-scrollarea-visibility-hover:focus-within .z-scrollarea-visibility-hover .z-scrollarea-native,.z-scrollarea-visibility-hover .z-scrollarea-native:hover,.z-scrollarea-visibility-hover .z-scrollarea-native:active{scrollbar-color:var(--scrollbar-thumb-color, color-mix(in oklab, var(--muted-foreground) 30%, transparent)) var(--scrollbar-track-color, transparent)}.z-scrollarea-visibility-hover:hover .z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-thumb,.z-scrollarea-visibility-hover:active .z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-thumb,.z-scrollarea-visibility-hover:focus-within .z-scrollarea-visibility-hover .z-scrollarea-native::-webkit-scrollbar-thumb,.z-scrollarea-visibility-hover .z-scrollarea-native:hover::-webkit-scrollbar-thumb,.z-scrollarea-visibility-hover .z-scrollarea-native:active::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb-color, color-mix(in oklab, var(--muted-foreground) 30%, transparent))}\n"] }]
        }], propDecorators: { scrollbarRef: [{ type: i0.ViewChild, args: ['scrollbarRef', { isSignal: true }] }], nativeViewport: [{ type: i0.ViewChild, args: ['nativeViewport', { isSignal: true }] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zType: [{ type: i0.Input, args: [{ isSignal: true, alias: "zType", required: false }] }], zOrientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "zOrientation", required: false }] }], zVisibility: [{ type: i0.Input, args: [{ isSignal: true, alias: "zVisibility", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zDisableInteraction: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisableInteraction", required: false }] }], zSensorThrottleTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSensorThrottleTime", required: false }] }], zDisableSensor: [{ type: i0.Input, args: [{ isSignal: true, alias: "zDisableSensor", required: false }] }], zScroll: [{ type: i0.Output, args: ["zScroll"] }], zScrollbarInit: [{ type: i0.Output, args: ["zScrollbarInit"] }] } });

/**
 * Generated bundle index. Do not edit.
 */

export { ZScrollAreaComponent, zScrollAreaVariants };
//# sourceMappingURL=shival99-z-ui-components-z-scrollarea.mjs.map
