import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, ViewChild, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i2 from '@angular/material/bottom-sheet';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import * as i1 from '@angular/material/dialog';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import * as i3 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { SdUtilities } from '@sd-angular/core/utilities';
import { Subscription } from 'rxjs';

class SdModal {
    ref;
    dialog;
    bottomSheet;
    static index = 0;
    templateRef;
    title;
    color = 'primary';
    width = 'md';
    height = 'auto';
    view;
    lazyLoadContent = true;
    sdClosed = new EventEmitter();
    modal;
    isOpened = false;
    alreadyOpened = false;
    #isMobile = false;
    #bottomSheetRef;
    #dialogRef;
    subcription = new Subscription();
    constructor(ref, dialog, bottomSheet) {
        this.ref = ref;
        this.dialog = dialog;
        this.bottomSheet = bottomSheet;
        this.#isMobile = SdUtilities.isMobile();
    }
    ngOnInit() {
        this.width = this.width || '80vw';
        if (!this.#isMobile) {
            switch (this.width) {
                case 'lg':
                    this.width = '80vw';
                    break;
                case 'md':
                    this.width = '60vw';
                    break;
                case 'sm':
                    this.width = '40vw';
                    break;
                case 'sx':
                    this.width = '20vw';
                    break;
            }
        }
    }
    ngOnDestroy() {
        this.subcription.unsubscribe();
    }
    open = () => {
        if (this.isOpened) {
            return;
        }
        this.ref.markForCheck();
        this.alreadyOpened = true;
        this.isOpened = true;
        if ((!this.view && this.#isMobile) || this.view === 'bottom-sheet') {
            this.#bottomSheetRef = this.bottomSheet.open(this.templateRef);
            this.subcription.add(this.#bottomSheetRef.afterDismissed().subscribe(() => {
                this.isOpened = false;
                this.sdClosed.emit();
            }));
        }
        else {
            this.#dialogRef = this.dialog.open(this.templateRef, {
                width: this.width,
                maxWidth: this.width,
                disableClose: true, // mặc định ko cho đóng modal khi click out side
            });
            this.subcription.add(this.#dialogRef.afterClosed().subscribe(() => {
                this.isOpened = false;
                this.sdClosed.emit();
            }));
        }
    };
    close = () => {
        this.ref.markForCheck();
        this.#bottomSheetRef?.dismiss();
        this.#dialogRef?.close();
    };
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdModal, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.MatDialog }, { token: i2.MatBottomSheet }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdModal, isStandalone: true, selector: "sd-modal", inputs: { title: "title", color: "color", width: "width", height: "height", view: "view", lazyLoadContent: "lazyLoadContent" }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "templateRef", first: true, predicate: ["templateRef"], descendants: true }, { propertyName: "modal", first: true, predicate: ["modal"], descendants: true }], ngImport: i0, template: "<ng-template #templateRef>\r\n  @if (!lazyLoadContent || alreadyOpened) {\r\n    <!-- Header -->\r\n    <!-- D\u00F9ng scss thu\u1EA7n -->\r\n    @if (title) {\r\n      <div class=\"d-flex align-items-center p-16\">\r\n        <div class=\"T18M\">{{ title }}</div>\r\n        <div class=\"d-flex align-items-center ml-auto\">\r\n          <ng-content select=\"[sdHeader]\"></ng-content>\r\n          <mat-icon class=\"text-secondary pointer\" fontIcon=\"close\" (click)=\"close()\"></mat-icon>\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- <mat-divider></mat-divider> -->\r\n    <!-- Body -->\r\n    <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh;\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <!-- Footer -->\r\n    <!-- <mat-divider></mat-divider> -->\r\n    <div class=\"d-flex align-items-center p-16\" #footer>\r\n      <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n      <div class=\"ml-auto\">\r\n        <ng-content select=\"[sdFooter]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<!-- <ng-template #templateRef>\r\n  @if(!lazyLoadContent || alreadyOpened) {\r\n    <sd-modal-header *ngIf=\"title\">\r\n      <span [innerHtml]=\"title\"></span>\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n        <button type=\"button\" (click)=\"close()\" mat-icon-button>\r\n          <mat-icon fontIcon=\"close\"></mat-icon>\r\n        </button>\r\n      </div>\r\n    </sd-modal-header>\r\n  }\r\n  <ng-container *ngIf=\"!lazyLoadContent || alreadyOpened\">\r\n    <sd-modal-header *ngIf=\"title\">\r\n      <span [innerHtml]=\"title\"></span>\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n        <button type=\"button\" (click)=\"close()\" mat-icon-button>\r\n          <mat-icon fontIcon=\"close\"></mat-icon>\r\n        </button>\r\n      </div>\r\n    </sd-modal-header>\r\n    <div class=\"d-flex flex-column px-12 px-md-24 pb-6 overflow-auto w-full mh-full\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-container>\r\n</ng-template> -->\r\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: i3.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: "19.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>\r\n  @if (!lazyLoadContent || alreadyOpened) {\r\n    <!-- Header -->\r\n    <!-- D\u00F9ng scss thu\u1EA7n -->\r\n    @if (title) {\r\n      <div class=\"d-flex align-items-center p-16\">\r\n        <div class=\"T18M\">{{ title }}</div>\r\n        <div class=\"d-flex align-items-center ml-auto\">\r\n          <ng-content select=\"[sdHeader]\"></ng-content>\r\n          <mat-icon class=\"text-secondary pointer\" fontIcon=\"close\" (click)=\"close()\"></mat-icon>\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- <mat-divider></mat-divider> -->\r\n    <!-- Body -->\r\n    <div class=\"overflow-auto w-full px-16\" style=\"max-height: 80vh;\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <!-- Footer -->\r\n    <!-- <mat-divider></mat-divider> -->\r\n    <div class=\"d-flex align-items-center p-16\" #footer>\r\n      <ng-content select=\"[sdFooterLeft]\"></ng-content>\r\n      <div class=\"ml-auto\">\r\n        <ng-content select=\"[sdFooter]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  }\r\n</ng-template>\r\n\r\n<!-- <ng-template #templateRef>\r\n  @if(!lazyLoadContent || alreadyOpened) {\r\n    <sd-modal-header *ngIf=\"title\">\r\n      <span [innerHtml]=\"title\"></span>\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n        <button type=\"button\" (click)=\"close()\" mat-icon-button>\r\n          <mat-icon fontIcon=\"close\"></mat-icon>\r\n        </button>\r\n      </div>\r\n    </sd-modal-header>\r\n  }\r\n  <ng-container *ngIf=\"!lazyLoadContent || alreadyOpened\">\r\n    <sd-modal-header *ngIf=\"title\">\r\n      <span [innerHtml]=\"title\"></span>\r\n      <div class=\"d-flex align-items-center\">\r\n        <ng-content select=\"[sdModalHeaderRight]\"></ng-content>\r\n        <button type=\"button\" (click)=\"close()\" mat-icon-button>\r\n          <mat-icon fontIcon=\"close\"></mat-icon>\r\n        </button>\r\n      </div>\r\n    </sd-modal-header>\r\n    <div class=\"d-flex flex-column px-12 px-md-24 pb-6 overflow-auto w-full mh-full\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-container>\r\n</ng-template> -->\r\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: () => [{ type: i0.ChangeDetectorRef }, { type: i1.MatDialog }, { type: i2.MatBottomSheet }], propDecorators: { templateRef: [{
                type: ViewChild,
                args: ['templateRef']
            }], title: [{
                type: Input
            }], color: [{
                type: Input
            }], width: [{
                type: Input
            }], height: [{
                type: Input
            }], view: [{
                type: Input
            }], lazyLoadContent: [{
                type: Input
            }], sdClosed: [{
                type: Output
            }], modal: [{
                type: ViewChild,
                args: ['modal']
            }] } });

// export * from './src/modal/modal-header/modal-header.component';
// export * from './src/modal/modal-body/modal-body.component';
// export * from './src/modal/modal-footer/modal-footer.component';

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

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