import { __classPrivateFieldSet, __classPrivateFieldGet } from 'tslib';
import { EventEmitter, Component, ChangeDetectionStrategy, ComponentFactoryResolver, ApplicationRef, Injector, ChangeDetectorRef, ViewChild, Input, Output, NgModule } from '@angular/core';
import { DomPortalOutlet, CdkPortal, PortalModule } from '@angular/cdk/portal';
import { v4 } from 'uuid';
import { SdLoadingService } from '@sd-angular/core/loading';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';
import { SdButtonModule } from '@sd-angular/core/button';

var _embeddedViewRef;
class SdSideDrawer {
    constructor(cfr, ar, injector, ref, loadingService) {
        this.cfr = cfr;
        this.ar = ar;
        this.injector = injector;
        this.ref = ref;
        this.loadingService = loadingService;
        this.id = `I${v4()}`;
        this.width = "480px";
        this.noCloseButton = false;
        this.noCloseClickOutSide = false;
        this.alwaysDisplayBackDrop = false;
        this.editingChanged = new EventEmitter();
        _embeddedViewRef.set(this, void 0);
        this.isEditing = false;
        this.isOpened = false;
        this.alreadyOpen = false;
        this.isHover = false;
        this.isLoading = false;
        this.open = () => {
            this.ref.markForCheck();
            this.isOpened = true;
            this.alreadyOpen = true;
        };
        this.close = () => {
            this.ref.markForCheck();
            this.isOpened = false;
            this.stopLoading();
        };
        this.startLoading = () => {
            this.isLoading = true;
            this.loadingService.stop(`#${this.id}`);
            this.loadingService.start(`#${this.id}`);
        };
        this.stopLoading = () => {
            this.isLoading = false;
            this.loadingService.stop(`#${this.id}`);
        };
    }
    set _noCloseButton(val) {
        this.noCloseButton = (val === '') || val;
        val = (val === '') || val;
    }
    set _noCloseClickOutSide(val) {
        this.noCloseClickOutSide = (val === '') || val;
        val = (val === '') || val;
    }
    set _alwaysDisplayBackDrop(val) {
        this.alwaysDisplayBackDrop = (val === '') || val;
        val = (val === '') || val;
    }
    ngAfterViewInit() {
        __classPrivateFieldSet(this, _embeddedViewRef, new DomPortalOutlet(document.body, this.cfr, this.ar, this.injector).attachTemplatePortal(this.portal));
    }
    ngOnDestroy() {
        __classPrivateFieldGet(this, _embeddedViewRef).destroy();
    }
    toggleEditable() {
        this.isEditing = !this.isEditing;
        this.editingChanged.emit(this.isEditing);
    }
}
_embeddedViewRef = new WeakMap();
SdSideDrawer.decorators = [
    { type: Component, args: [{
                selector: "sd-side-drawer",
                template: "<ng-template cdkPortal>\r\n  <div [id]=\"id\" class=\"side-drawer\" [ngStyle]=\"{'width': width}\" [ngClass]=\"{'side-drawer--active': isOpened,'side-drawer--loading': isLoading}\"\r\n    (mouseover)=\"isHover = true\" (mouseout)=\"isHover = false\">\r\n    <ng-container *ngIf=\"isOpened\">\r\n      <div class=\"side-drawer__header media align-items-center\">\r\n        <div class=\"side-drawer__title media-body\">\r\n          <ng-content select=\"[sdTitle]\"></ng-content>\r\n        </div>\r\n        <button type=\"button\" class=\"c-action\" (click)=\"toggleEditable()\" *ngIf=\"editable\" mat-icon-button>\r\n          <mat-icon>edit</mat-icon>\r\n        </button>\r\n        <button *ngIf=\"!noCloseButton\" type=\"button\" class=\"c-action\" (click)=\"close()\" mat-icon-button>\r\n          <mat-icon>close</mat-icon>\r\n        </button>\r\n      </div>\r\n      <div *ngIf=\"isOpened\" class=\"side-drawer__body\">\r\n        <div class=\"side-drawer__content\">\r\n          <ng-content select=\"[sdBody]\"></ng-content>\r\n        </div>\r\n      </div>\r\n      <div class=\"side-drawer__footer\">\r\n        <ng-content select=\"[sdFooter]\"></ng-content>\r\n      </div>\r\n    </ng-container>\r\n  </div>\r\n  <button *ngIf=\"isOpened\" type=\"button\" class=\"side-drawer-backdrop\" (click)=\"noCloseClickOutSide? null: close()\"\r\n    [ngClass]=\"{ 'side-drawer-backdrop--active': !alwaysDisplayBackDrop? isHover: true }\"></button>\r\n</ng-template>\r\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [".text-black400{color:#757575}.side-drawer{background-color:#fff;bottom:0;box-shadow:0 .4px .8px rgba(0,0,0,.1),0 3px 6px rgba(0,0,0,.2);display:flex;flex-direction:column;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;visibility:hidden;z-index:999}.c-action{color:#212121}.c-action:focus{outline:none}.side-drawer__icon{background:transparent;border:0;color:#212121;outline:none;overflow:hidden}.side-drawer__icon .mat-icon{float:left}.side-drawer__header{min-height:64px;padding:12px 16px}.side-drawer__body{flex:1;position:relative}.side-drawer__content{bottom:0;left:0;overflow:auto;padding:0 16px 16px;position:absolute;right:0;top:0}.side-drawer__footer{border-top:1px solid #dde0e5;padding:8px 0}.side-drawer-backdrop{background:none;border:0;bottom:0;height:100%;left:0;outline:none!important;position:fixed;right:0;top:0;transition:all .3s ease-in-out;width:100%;z-index:99}.side-drawer-backdrop--active{background-color:rgba(0,0,0,.4)}.side-drawer--active{opacity:1;pointer-events:all;transform:translateZ(0);visibility:visible}.side-drawer__title{font-size:20px;font-weight:500;line-height:28px}"]
            },] }
];
SdSideDrawer.ctorParameters = () => [
    { type: ComponentFactoryResolver },
    { type: ApplicationRef },
    { type: Injector },
    { type: ChangeDetectorRef },
    { type: SdLoadingService }
];
SdSideDrawer.propDecorators = {
    portal: [{ type: ViewChild, args: [CdkPortal,] }],
    title: [{ type: Input }],
    editable: [{ type: Input }],
    width: [{ type: Input }],
    _noCloseButton: [{ type: Input, args: ['noCloseButton',] }],
    _noCloseClickOutSide: [{ type: Input, args: ['noCloseClickOutSide',] }],
    _alwaysDisplayBackDrop: [{ type: Input, args: ['alwaysDisplayBackDrop',] }],
    editingChanged: [{ type: Output }]
};

class SdSideDrawerModule {
}
SdSideDrawerModule.decorators = [
    { type: NgModule, args: [{
                imports: [
                    CommonModule,
                    MatIconModule,
                    MatDialogModule,
                    MatButtonModule,
                    SdButtonModule,
                    PortalModule
                ],
                declarations: [
                    SdSideDrawer
                ],
                exports: [
                    SdSideDrawer
                ],
                providers: []
            },] }
];

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

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

export { SdSideDrawer, SdSideDrawerModule };
//# sourceMappingURL=sd-angular-core-side-drawer.js.map
