import * as i0 from '@angular/core';
import { Directive, contentChild, output, input, model, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
import { ZIconComponent } from '@shival99/z-ui/components/z-icon';
import { zTransform, zMergeClasses } from '@shival99/z-ui/utils';
import { cva } from 'class-variance-authority';

class ZCardTitleDirective {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZCardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: ZCardTitleDirective, isStandalone: true, selector: "[zCardTitle], [z-card-title]", ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZCardTitleDirective, decorators: [{
            type: Directive,
            args: [{
                    selector: '[zCardTitle], [z-card-title]',
                    standalone: true,
                }]
        }] });

const zCardVariants = cva([
    'block w-full',
    'rounded-[0.375rem] border border-border',
    'bg-card text-card-foreground',
    'shadow-card',
    'transition-shadow duration-200',
], {
    variants: {
        zSize: {
            sm: '',
            default: '',
            lg: '',
        },
    },
    defaultVariants: {
        zSize: 'default',
    },
});
const zCardHeaderVariants = cva(['flex items-center justify-between', 'transition-colors duration-200 w-full'], {
    variants: {
        zSize: {
            sm: 'px-3 py-2',
            default: 'px-4 py-3',
            lg: 'px-5 py-4',
        },
        zCollapsible: {
            true: 'cursor-pointer select-none hover:bg-muted/50',
            false: '',
        },
        zCollapsed: {
            true: 'border-b !border-transparent',
            false: 'border-b !border-border',
        },
    },
    defaultVariants: {
        zSize: 'default',
        zCollapsible: false,
        zCollapsed: false,
    },
});
const zCardTitleVariants = cva(['font-medium text-foreground w-full'], {
    variants: {
        zSize: {
            sm: 'text-sm',
            default: 'text-base',
            lg: 'text-lg',
        },
        zCollapsible: {
            true: '[&_*]:select-none',
            false: '',
        },
    },
    defaultVariants: {
        zSize: 'default',
        zCollapsible: false,
    },
});
const zCardContentVariants = cva([''], {
    variants: {
        zSize: {
            sm: 'p-3',
            default: 'p-4',
            lg: 'p-5',
        },
    },
    defaultVariants: {
        zSize: 'default',
    },
});

class ZCardComponent {
    _customTitle = contentChild(ZCardTitleDirective, ...(ngDevMode ? [{ debugName: "_customTitle" }] : []));
    _customTitleContent = contentChild('zCardTitle', ...(ngDevMode ? [{ debugName: "_customTitleContent" }] : []));
    zCollapsedChange = output();
    class = input('', ...(ngDevMode ? [{ debugName: "class" }] : []));
    zTitle = input('', ...(ngDevMode ? [{ debugName: "zTitle" }] : []));
    zSize = input('default', ...(ngDevMode ? [{ debugName: "zSize" }] : []));
    zCollapsible = input(false, { ...(ngDevMode ? { debugName: "zCollapsible" } : {}), transform: zTransform });
    zHiddenIcon = input(false, { ...(ngDevMode ? { debugName: "zHiddenIcon" } : {}), transform: zTransform });
    zCollapsed = model(false, ...(ngDevMode ? [{ debugName: "zCollapsed" }] : []));
    isCollapsed = computed(() => {
        if (!this.zCollapsible()) {
            return false;
        }
        return this.zCollapsed();
    }, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : []));
    hasCustomTitle = computed(() => !!this._customTitle() || !!this._customTitleContent(), ...(ngDevMode ? [{ debugName: "hasCustomTitle" }] : []));
    hostClasses = computed(() => zMergeClasses(zCardVariants({ zSize: this.zSize() }), this.class()), ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
    headerClasses = computed(() => zCardHeaderVariants({
        zSize: this.zSize(),
        zCollapsible: this.zCollapsible(),
        zCollapsed: this.isCollapsed(),
    }), ...(ngDevMode ? [{ debugName: "headerClasses" }] : []));
    titleClasses = computed(() => zCardTitleVariants({ zSize: this.zSize(), zCollapsible: this.zCollapsible() }), ...(ngDevMode ? [{ debugName: "titleClasses" }] : []));
    contentClasses = computed(() => zCardContentVariants({ zSize: this.zSize() }), ...(ngDevMode ? [{ debugName: "contentClasses" }] : []));
    onHeaderClick() {
        if (!this.zCollapsible()) {
            return;
        }
        const newState = !this.zCollapsed();
        this.zCollapsed.set(newState);
        this.zCollapsedChange.emit(newState);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ZCardComponent, isStandalone: true, selector: "z-card", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, zTitle: { classPropertyName: "zTitle", publicName: "zTitle", isSignal: true, isRequired: false, transformFunction: null }, zSize: { classPropertyName: "zSize", publicName: "zSize", isSignal: true, isRequired: false, transformFunction: null }, zCollapsible: { classPropertyName: "zCollapsible", publicName: "zCollapsible", isSignal: true, isRequired: false, transformFunction: null }, zHiddenIcon: { classPropertyName: "zHiddenIcon", publicName: "zHiddenIcon", isSignal: true, isRequired: false, transformFunction: null }, zCollapsed: { classPropertyName: "zCollapsed", publicName: "zCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zCollapsedChange: "zCollapsedChange", zCollapsed: "zCollapsedChange" }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "_customTitle", first: true, predicate: ZCardTitleDirective, descendants: true, isSignal: true }, { propertyName: "_customTitleContent", first: true, predicate: ["zCardTitle"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (zTitle() || zCollapsible() || hasCustomTitle()) {\n  <div\n    [class]=\"headerClasses()\"\n    (click)=\"onHeaderClick()\"\n    (keydown.enter)=\"onHeaderClick()\"\n    (keydown.space)=\"onHeaderClick()\"\n    [tabindex]=\"zCollapsible() ? 0 : -1\"\n    [attr.role]=\"zCollapsible() ? 'button' : null\"\n    [attr.aria-expanded]=\"zCollapsible() ? !isCollapsed() : null\">\n    <span [class]=\"titleClasses()\">\n      <ng-content select=\"[zCardTitle]\" />\n      @if (!hasCustomTitle()) {\n        {{ zTitle() }}\n      }\n    </span>\n    @if (zCollapsible() && !zHiddenIcon()) {\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"16\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"!isCollapsed()\" />\n    }\n    <ng-content select=\"[zCardExtra]\" />\n  </div>\n}\n\n<div class=\"z-card-content\" [class.z-card-content-open]=\"!isCollapsed()\">\n  <div class=\"z-card-content-inner\">\n    <div [class]=\"contentClasses()\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: [".z-card-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-out}.z-card-content.z-card-content-open{grid-template-rows:1fr}.z-card-content>.z-card-content-inner{overflow:hidden;min-height:0}\n"], dependencies: [{ kind: "component", type: ZIconComponent, selector: "z-icon, [z-icon]", inputs: ["class", "zType", "zAnimatedType", "zAnimate", "zAnimationTrigger", "zSize", "zStrokeWidth", "zSvg"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ZCardComponent, decorators: [{
            type: Component,
            args: [{ selector: 'z-card', imports: [ZIconComponent], standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                        '[class]': 'hostClasses()',
                    }, template: "@if (zTitle() || zCollapsible() || hasCustomTitle()) {\n  <div\n    [class]=\"headerClasses()\"\n    (click)=\"onHeaderClick()\"\n    (keydown.enter)=\"onHeaderClick()\"\n    (keydown.space)=\"onHeaderClick()\"\n    [tabindex]=\"zCollapsible() ? 0 : -1\"\n    [attr.role]=\"zCollapsible() ? 'button' : null\"\n    [attr.aria-expanded]=\"zCollapsible() ? !isCollapsed() : null\">\n    <span [class]=\"titleClasses()\">\n      <ng-content select=\"[zCardTitle]\" />\n      @if (!hasCustomTitle()) {\n        {{ zTitle() }}\n      }\n    </span>\n    @if (zCollapsible() && !zHiddenIcon()) {\n      <z-icon\n        zType=\"lucideChevronDown\"\n        zSize=\"16\"\n        class=\"text-muted-foreground shrink-0 transition-transform duration-200\"\n        [class.rotate-180]=\"!isCollapsed()\" />\n    }\n    <ng-content select=\"[zCardExtra]\" />\n  </div>\n}\n\n<div class=\"z-card-content\" [class.z-card-content-open]=\"!isCollapsed()\">\n  <div class=\"z-card-content-inner\">\n    <div [class]=\"contentClasses()\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", styles: [".z-card-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-out}.z-card-content.z-card-content-open{grid-template-rows:1fr}.z-card-content>.z-card-content-inner{overflow:hidden;min-height:0}\n"] }]
        }], propDecorators: { _customTitle: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ZCardTitleDirective), { isSignal: true }] }], _customTitleContent: [{ type: i0.ContentChild, args: ['zCardTitle', { isSignal: true }] }], zCollapsedChange: [{ type: i0.Output, args: ["zCollapsedChange"] }], class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], zTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "zTitle", required: false }] }], zSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "zSize", required: false }] }], zCollapsible: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCollapsible", required: false }] }], zHiddenIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "zHiddenIcon", required: false }] }], zCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "zCollapsed", required: false }] }, { type: i0.Output, args: ["zCollapsedChange"] }] } });

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

export { ZCardComponent, ZCardTitleDirective, zCardContentVariants, zCardHeaderVariants, zCardTitleVariants, zCardVariants };
//# sourceMappingURL=shival99-z-ui-components-z-card.mjs.map
