import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { signal, viewChild, input, computed, booleanAttribute, output, inject, DestroyRef, ChangeDetectionStrategy, Component } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { MatBottomSheet, MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import * as i1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { BrowserUtilities } from '@sdcorejs/utils/fns';

class SdModal {
    static index = signal(0, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
    templateRef = viewChild.required('templateRef');
    modal = viewChild('modal', ...(ngDevMode ? [{ debugName: "modal" }] : /* istanbul ignore next */ []));
    // autoId prefix `modal-`. Lưu ý: footer/body buttons render qua <ng-content> nên consumer phải
    // tự đặt [attr.data-autoId] cho các nút đó. Component chỉ tự bind autoId cho NÚT ĐÓNG (X icon).
    autoIdInput = input(undefined, { ...(ngDevMode ? { debugName: "autoIdInput" } : /* istanbul ignore next */ {}), alias: 'autoId' });
    autoId = computed(() => (this.autoIdInput() ? `components-modal-${this.autoIdInput()}` : undefined), ...(ngDevMode ? [{ debugName: "autoId" }] : /* istanbul ignore next */ []));
    closeButtonAutoId = computed(() => (this.autoId() ? `${this.autoId()}-close` : undefined), ...(ngDevMode ? [{ debugName: "closeButtonAutoId" }] : /* istanbul ignore next */ []));
    dataOpened = computed(() => (this.isOpened() ? 'true' : 'false'), ...(ngDevMode ? [{ debugName: "dataOpened" }] : /* istanbul ignore next */ []));
    title = input('', { ...(ngDevMode ? { debugName: "title" } : /* istanbul ignore next */ {}), transform: (v) => v ?? '' });
    color = input('primary', { ...(ngDevMode ? { debugName: "color" } : /* istanbul ignore next */ {}), transform: (v) => v ?? 'primary' });
    width = input('md', { ...(ngDevMode ? { debugName: "width" } : /* istanbul ignore next */ {}), transform: (v) => v ?? 'md' });
    height = input('auto', { ...(ngDevMode ? { debugName: "height" } : /* istanbul ignore next */ {}), transform: (v) => v ?? 'auto' });
    view = input(undefined, { ...(ngDevMode ? { debugName: "view" } : /* istanbul ignore next */ {}), transform: (v) => v ?? undefined });
    modalClass = input('', { ...(ngDevMode ? { debugName: "modalClass" } : /* istanbul ignore next */ {}), transform: (v) => v ?? '' });
    lazyLoadContent = input(true, { ...(ngDevMode ? { debugName: "lazyLoadContent" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    hideClose = input(false, { ...(ngDevMode ? { debugName: "hideClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
    disableBackdropClose = input(true, { ...(ngDevMode ? { debugName: "disableBackdropClose" } : /* istanbul ignore next */ {}), transform: booleanAttribute }); // default to true to keep backward compatibility
    sdClosed = output();
    isOpened = signal(false, ...(ngDevMode ? [{ debugName: "isOpened" }] : /* istanbul ignore next */ []));
    alreadyOpened = signal(false, ...(ngDevMode ? [{ debugName: "alreadyOpened" }] : /* istanbul ignore next */ []));
    #isMobile = false;
    #resolvedWidth = 'md';
    #bottomSheetRef;
    #dialogRef;
    #dialog = inject(MatDialog);
    #bottomSheet = inject(MatBottomSheet);
    #destroyRef = inject(DestroyRef);
    constructor() {
        this.#isMobile = BrowserUtilities.isMobile();
    }
    #resolveWidth() {
        const w = this.width() || '80vw';
        if (this.#isMobile)
            return w;
        switch (w) {
            case 'lg': return '80vw';
            case 'md': return '60vw';
            case 'sm': return '40vw';
            case 'sx': return '20vw';
            default: return w;
        }
    }
    open = () => {
        if (this.isOpened()) {
            return;
        }
        this.alreadyOpened.set(true);
        this.isOpened.set(true);
        this.#resolvedWidth = this.#resolveWidth();
        if ((!this.view() && this.#isMobile) || this.view() === 'bottom-sheet') {
            this.#bottomSheetRef = this.#bottomSheet.open(this.templateRef(), {
                panelClass: this.modalClass(),
                disableClose: this.disableBackdropClose()
            });
            this.#bottomSheetRef.afterDismissed()
                .pipe(takeUntilDestroyed(this.#destroyRef))
                .subscribe(() => {
                this.isOpened.set(false);
                this.sdClosed.emit();
            });
        }
        else {
            this.#dialogRef = this.#dialog.open(this.templateRef(), {
                width: this.#resolvedWidth,
                maxWidth: this.#resolvedWidth,
                panelClass: this.modalClass(),
                disableClose: this.disableBackdropClose(),
            });
            this.#dialogRef.afterClosed()
                .pipe(takeUntilDestroyed(this.#destroyRef))
                .subscribe(() => {
                this.isOpened.set(false);
                this.sdClosed.emit();
            });
        }
    };
    close = () => {
        this.#bottomSheetRef?.dismiss();
        this.#dialogRef?.close();
    };
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { autoIdInput: { classPropertyName: "autoIdInput", publicName: "autoId", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: false, transformFunction: null }, modalClass: { classPropertyName: "modalClass", publicName: "modalClass", isSignal: true, isRequired: false, transformFunction: null }, lazyLoadContent: { classPropertyName: "lazyLoadContent", publicName: "lazyLoadContent", isSignal: true, isRequired: false, transformFunction: null }, hideClose: { classPropertyName: "hideClose", publicName: "hideClose", isSignal: true, isRequired: false, transformFunction: null }, disableBackdropClose: { classPropertyName: "disableBackdropClose", publicName: "disableBackdropClose", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true, isSignal: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-template #templateRef>\n  <div class=\"sd-modal-root\"\n       [attr.data-autoId]=\"autoId()\"\n       [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      <!-- Header -->\n      <!-- D\u00F9ng scss thu\u1EA7n -->\n      @if (title()) {\n        <div class=\"d-flex align-items-center p-16\">\n          <ng-content select=\"[sdHeaderLeft]\">\n            <div class=\"T18M\">{{ title() }}</div>\n          </ng-content>\n          <div class=\"d-flex align-items-center ml-auto\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></ng-content>\n            @if (!hideClose()) {\n              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\n      <!-- Body -->\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Footer -->\n      <!-- <mat-divider></mat-divider> -->\n      <div class=\"d-flex align-items-center p-8\" #footer>\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\n        <div class=\"ml-auto\">\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatBottomSheetModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: SdModal, decorators: [{
            type: Component,
            args: [{ selector: 'sd-modal', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatBottomSheetModule, MatDialogModule, MatDividerModule, MatButtonModule], template: "<ng-template #templateRef>\n  <div class=\"sd-modal-root\"\n       [attr.data-autoId]=\"autoId()\"\n       [attr.data-opened]=\"dataOpened()\">\n    @if (!lazyLoadContent() || alreadyOpened()) {\n      <!-- Header -->\n      <!-- D\u00F9ng scss thu\u1EA7n -->\n      @if (title()) {\n        <div class=\"d-flex align-items-center p-16\">\n          <ng-content select=\"[sdHeaderLeft]\">\n            <div class=\"T18M\">{{ title() }}</div>\n          </ng-content>\n          <div class=\"d-flex align-items-center ml-auto\">\n            <ng-content select=\"[sdHeaderRight]\"></ng-content>\n            <ng-content select=\"[sdHeader]\"></ng-content>\n            @if (!hideClose()) {\n              <mat-icon class=\"text-secondary cursor-pointer\" fontIcon=\"close\" (click)=\"close()\" [attr.data-autoId]=\"closeButtonAutoId()\"></mat-icon>\n            }\n          </div>\n        </div>\n      }\n      <!-- <mat-divider></mat-divider> -->\n      <!-- Body -->\n      <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh\">\n        <ng-content></ng-content>\n      </div>\n      <!-- Footer -->\n      <!-- <mat-divider></mat-divider> -->\n      <div class=\"d-flex align-items-center p-8\" #footer>\n        <ng-content select=\"[sdFooterLeft]\"></ng-content>\n        <div class=\"ml-auto\">\n          <ng-content select=\"[sdFooterRight]\"></ng-content>\n          <ng-content select=\"[sdFooter]\"></ng-content>\n        </div>\n      </div>\n    }\n  </div>\n</ng-template>\n", styles: ["button:focus{outline:none!important}.mat-dialog-container{padding:0!important}.mat-dialog-container .mat-dialog-content{max-height:80vh}.mat-dialog-container .mat-dialog-actions{min-height:auto;margin-bottom:0;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{padding:12px 24px;display:block;width:100%}@media(max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{padding:0;min-width:100vw;box-sizing:border-box;outline:0;max-height:80vh;overflow:hidden;border-top-left-radius:4px;border-top-right-radius:4px;display:flex;flex-direction:column}\n"] }]
        }], ctorParameters: () => [], propDecorators: { templateRef: [{ type: i0.ViewChild, args: ['templateRef', { isSignal: true }] }], modal: [{ type: i0.ViewChild, args: ['modal', { isSignal: true }] }], autoIdInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoId", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], view: [{ type: i0.Input, args: [{ isSignal: true, alias: "view", required: false }] }], modalClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "modalClass", required: false }] }], lazyLoadContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "lazyLoadContent", required: false }] }], hideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideClose", required: false }] }], disableBackdropClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableBackdropClose", required: false }] }], sdClosed: [{ type: i0.Output, args: ["sdClosed"] }] } });

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

export { SdModal };
//# sourceMappingURL=sdcorejs-angular-components-modal.mjs.map
