(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/material/dialog'), require('ngx-device-detector'), require('@angular/material/bottom-sheet'), require('rxjs'), require('@angular/common'), require('@angular/material/icon'), require('@angular/material/button'), require('@sd-angular/core/button')) :
    typeof define === 'function' && define.amd ? define('@sd-angular/core/modal', ['exports', '@angular/core', '@angular/material/dialog', 'ngx-device-detector', '@angular/material/bottom-sheet', 'rxjs', '@angular/common', '@angular/material/icon', '@angular/material/button', '@sd-angular/core/button'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['sd-angular'] = global['sd-angular'] || {}, global['sd-angular'].core = global['sd-angular'].core || {}, global['sd-angular'].core.modal = {}), global.ng.core, global.ng.material.dialog, global.ngxDeviceDetector, global.ng.material.bottomSheet, global.rxjs, global.ng.common, global.ng.material.icon, global.ng.material.button, global['sd-angular'].core.button));
}(this, (function (exports, core, dialog, ngxDeviceDetector, bottomSheet, rxjs, common, icon, button, button$1) { 'use strict';

    var SdModal = /** @class */ (function () {
        function SdModal(ref, dialog, bottomSheet, deviceService) {
            var _this = this;
            this.ref = ref;
            this.dialog = dialog;
            this.bottomSheet = bottomSheet;
            this.height = 'auto';
            this.lazyLoadContent = true;
            this.sdClosed = new core.EventEmitter();
            this.isOpened = false;
            this.alreadyOpened = false;
            this.isMobileOrTablet = false;
            this.subcription = new rxjs.Subscription();
            this.open = function () {
                if (_this.isOpened) {
                    return;
                }
                _this.ref.markForCheck();
                _this.alreadyOpened = true;
                _this.isOpened = true;
                if ((!_this.view && _this.isMobileOrTablet) || _this.view === 'bottomSheet') {
                    _this.bottomSheetRef = _this.bottomSheet.open(_this.templateRef);
                    _this.subcription.add(_this.bottomSheetRef.afterDismissed().subscribe(function () {
                        _this.isOpened = false;
                        _this.sdClosed.emit();
                    }));
                }
                else {
                    _this.dialogRef = _this.dialog.open(_this.templateRef, {
                        width: _this.width,
                        maxWidth: _this.width,
                        disableClose: !_this.closeClickOutSide // mặc định ko cho đóng modal khi click out side
                    });
                    _this.subcription.add(_this.dialogRef.afterClosed().subscribe(function () {
                        _this.isOpened = false;
                        _this.sdClosed.emit();
                    }));
                }
            };
            this.close = function () {
                var _a, _b;
                _this.ref.markForCheck();
                (_a = _this.bottomSheetRef) === null || _a === void 0 ? void 0 : _a.dismiss();
                (_b = _this.dialogRef) === null || _b === void 0 ? void 0 : _b.close();
            };
            this.isMobileOrTablet = !deviceService.isDesktop();
        }
        SdModal.prototype.ngOnInit = function () {
            this.type = this.type || 'primary';
            this.width = this.width || '80vw';
            if (!this.isMobileOrTablet) {
                switch (this.width) {
                    case 'lg':
                        this.width = '80vw';
                        break;
                    case 'md':
                        this.width = '60vw';
                        break;
                    case 'sm':
                        this.width = '40vw';
                        break;
                }
            }
        };
        SdModal.prototype.ngOnDestroy = function () {
            this.subcription.unsubscribe();
        };
        return SdModal;
    }());
    SdModal.index = 0;
    SdModal.decorators = [
        { type: core.Component, args: [{
                    selector: 'sd-modal',
                    template: "<ng-template #templateRef>\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 *ngIf=\"!noClose\" type=\"button\" (click)=\"close()\" mat-icon-button>\r\n          <mat-icon>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-100 mh-100\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>",
                    encapsulation: core.ViewEncapsulation.None,
                    changeDetection: core.ChangeDetectionStrategy.OnPush,
                    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{margin-bottom:0;min-height:auto;padding:0}.mat-bottom-sheet-container{max-height:\"inherit\"}sd-modal-header{display:block;padding:12px 24px;width:100%}@media (max-width:640px){sd-modal-header{padding:12px}}.cdk-global-overlay-wrapper .mat-bottom-sheet-container{border-top-left-radius:4px;border-top-right-radius:4px;box-sizing:border-box;display:flex;flex-direction:column;max-height:80vh;min-width:100vw;outline:0;overflow:hidden;padding:0}"]
                },] }
    ];
    SdModal.ctorParameters = function () { return [
        { type: core.ChangeDetectorRef },
        { type: dialog.MatDialog },
        { type: bottomSheet.MatBottomSheet },
        { type: ngxDeviceDetector.DeviceDetectorService }
    ]; };
    SdModal.propDecorators = {
        templateRef: [{ type: core.ViewChild, args: ['templateRef',] }],
        title: [{ type: core.Input }],
        noClose: [{ type: core.Input }],
        type: [{ type: core.Input }],
        width: [{ type: core.Input }],
        height: [{ type: core.Input }],
        view: [{ type: core.Input }],
        lazyLoadContent: [{ type: core.Input }],
        closeClickOutSide: [{ type: core.Input }],
        sdClosed: [{ type: core.Output }],
        modal: [{ type: core.ViewChild, args: ['modal',] }]
    };

    var SdModalHeader = /** @class */ (function () {
        function SdModalHeader(deviceService) {
            this.isMobileOrTablet = false;
            this.isMobileOrTablet = !deviceService.isDesktop();
        }
        SdModalHeader.prototype.ngOnInit = function () {
        };
        return SdModalHeader;
    }());
    SdModalHeader.decorators = [
        { type: core.Component, args: [{
                    selector: 'sd-modal-header',
                    template: "<h3 class=\"mb-0\" mat-dialog-title *ngIf=\"!isMobileOrTablet\">\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</h3>\r\n<sd-bottom-sheet-header *ngIf=\"isMobileOrTablet\">\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</sd-bottom-sheet-header>\r\n<ng-template #content>\r\n  <ng-content></ng-content>\r\n</ng-template>",
                    encapsulation: core.ViewEncapsulation.None,
                    styles: [".mat-dialog-title{align-items:center;display:flex;justify-content:space-between}button:focus{outline:none!important}"]
                },] }
    ];
    SdModalHeader.ctorParameters = function () { return [
        { type: ngxDeviceDetector.DeviceDetectorService }
    ]; };

    var SdModalBody = /** @class */ (function () {
        function SdModalBody(deviceService) {
            this.height = 'auto';
            this.isMobileOrTablet = false;
            this.isMobileOrTablet = !deviceService.isDesktop();
        }
        SdModalBody.prototype.ngOnInit = function () {
        };
        return SdModalBody;
    }());
    SdModalBody.decorators = [
        { type: core.Component, args: [{
                    selector: 'sd-modal-body',
                    template: "<mat-dialog-content *ngIf=\"!isMobileOrTablet\" [ngStyle]=\"{'height': height}\" class=\"pb-5\">\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</mat-dialog-content>\r\n<sd-bottom-sheet-body *ngIf=\"isMobileOrTablet\" [height]=\"height\">\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</sd-bottom-sheet-body>\r\n<ng-template #content>\r\n  <ng-content></ng-content>\r\n</ng-template>",
                    styles: [":host{width:100%}"]
                },] }
    ];
    SdModalBody.ctorParameters = function () { return [
        { type: ngxDeviceDetector.DeviceDetectorService }
    ]; };
    SdModalBody.propDecorators = {
        height: [{ type: core.Input }]
    };

    var SdModalFooter = /** @class */ (function () {
        function SdModalFooter(deviceService) {
            this.isMobileOrTablet = false;
            this.isMobileOrTablet = !deviceService.isDesktop();
        }
        SdModalFooter.prototype.ngOnInit = function () {
        };
        return SdModalFooter;
    }());
    SdModalFooter.decorators = [
        { type: core.Component, args: [{
                    selector: 'sd-modal-footer',
                    template: "<!-- <div class=\"modal-footer\" style=\"padding:5px\"><ng-content></ng-content></div> -->\r\n<mat-dialog-actions *ngIf=\"!isMobileOrTablet\">\r\n  <div class=\"c-footer\">\r\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n  </div>\r\n</mat-dialog-actions>\r\n<sd-bottom-sheet-footer *ngIf=\"isMobileOrTablet\">\r\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n</sd-bottom-sheet-footer>\r\n<ng-template #content>\r\n  <ng-content></ng-content>\r\n</ng-template>",
                    styles: [":host{width:100%}:host .c-footer{align-items:center;display:flex;flex:auto;justify-content:flex-end;padding:8px 0}"]
                },] }
    ];
    SdModalFooter.ctorParameters = function () { return [
        { type: ngxDeviceDetector.DeviceDetectorService }
    ]; };

    var SdBottomSheet = /** @class */ (function () {
        function SdBottomSheet(bottomSheet) {
            var _this = this;
            this.bottomSheet = bottomSheet;
            this.isOpened = false;
            this.open = function () {
                _this.isOpened = true;
                _this.bottomSheet.open(_this.templateRef);
            };
            this.close = function () {
                _this.bottomSheet.dismiss();
            };
        }
        return SdBottomSheet;
    }());
    SdBottomSheet.decorators = [
        { type: core.Component, args: [{
                    selector: 'sd-bottom-sheet',
                    template: "<ng-template #templateRef>\r\n  <ng-container *ngIf=\"isOpened\">\r\n    <sd-bottom-sheet-header *ngIf=\"title\">{{title}}</sd-bottom-sheet-header>\r\n    <ng-content></ng-content>\r\n  </ng-container>\r\n</ng-template>"
                },] }
    ];
    SdBottomSheet.ctorParameters = function () { return [
        { type: bottomSheet.MatBottomSheet }
    ]; };
    SdBottomSheet.propDecorators = {
        templateRef: [{ type: core.ViewChild, args: ['templateRef',] }],
        title: [{ type: core.Input }]
    };

    var SdBottomSheetHeader = /** @class */ (function () {
        function SdBottomSheetHeader() {
        }
        SdBottomSheetHeader.prototype.ngOnInit = function () {
        };
        return SdBottomSheetHeader;
    }());
    SdBottomSheetHeader.decorators = [
        { type: core.Component, args: [{
                    selector: 'sd-bottom-sheet-header',
                    template: "<h3 class=\"mb-0\" mat-dialog-title><ng-content></ng-content></h3>"
                },] }
    ];
    SdBottomSheetHeader.ctorParameters = function () { return []; };

    var SdBottomSheetBody = /** @class */ (function () {
        function SdBottomSheetBody() {
            this.height = 'auto';
        }
        SdBottomSheetBody.prototype.ngOnInit = function () {
        };
        return SdBottomSheetBody;
    }());
    SdBottomSheetBody.decorators = [
        { type: core.Component, args: [{
                    selector: 'sd-bottom-sheet-body',
                    template: "<div [ngStyle]=\"{'height': height}\">\r\n  <ng-content></ng-content>\r\n<div>"
                },] }
    ];
    SdBottomSheetBody.ctorParameters = function () { return []; };
    SdBottomSheetBody.propDecorators = {
        height: [{ type: core.Input }]
    };

    var SdBottomSheetFooter = /** @class */ (function () {
        function SdBottomSheetFooter() {
        }
        SdBottomSheetFooter.prototype.ngOnInit = function () {
        };
        return SdBottomSheetFooter;
    }());
    SdBottomSheetFooter.decorators = [
        { type: core.Component, args: [{
                    selector: 'sd-bottom-sheet-footer',
                    template: "<!-- <div class=\"modal-footer\" style=\"padding:5px\"><ng-content></ng-content></div> -->\r\n<div class=\"c-footer\">\r\n  <ng-content></ng-content>\r\n</div>",
                    styles: [".c-footer{align-items:center;display:flex;flex:auto;justify-content:flex-end;padding-bottom:5px;padding-top:5px}"]
                },] }
    ];
    SdBottomSheetFooter.ctorParameters = function () { return []; };

    var SdModalModule = /** @class */ (function () {
        function SdModalModule() {
        }
        return SdModalModule;
    }());
    SdModalModule.decorators = [
        { type: core.NgModule, args: [{
                    imports: [
                        common.CommonModule,
                        icon.MatIconModule,
                        bottomSheet.MatBottomSheetModule,
                        dialog.MatDialogModule,
                        button.MatButtonModule,
                        button$1.SdButtonModule
                    ],
                    declarations: [
                        SdModal,
                        SdModalHeader,
                        SdModalBody,
                        SdModalFooter,
                        SdBottomSheet,
                        SdBottomSheetHeader,
                        SdBottomSheetBody,
                        SdBottomSheetFooter
                    ],
                    exports: [
                        SdModal,
                        SdModalHeader,
                        SdModalBody,
                        SdModalFooter,
                        SdBottomSheet,
                        SdBottomSheetHeader,
                        SdBottomSheetBody,
                        SdBottomSheetFooter
                    ],
                    providers: []
                },] }
    ];

    /*
     * Public API Surface of superdev-angular-core
     */

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

    exports.SdBottomSheet = SdBottomSheet;
    exports.SdBottomSheetBody = SdBottomSheetBody;
    exports.SdBottomSheetFooter = SdBottomSheetFooter;
    exports.SdBottomSheetHeader = SdBottomSheetHeader;
    exports.SdModal = SdModal;
    exports.SdModalBody = SdModalBody;
    exports.SdModalFooter = SdModalFooter;
    exports.SdModalHeader = SdModalHeader;
    exports.SdModalModule = SdModalModule;

    Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=sd-angular-core-modal.umd.js.map
