import * as i5 from '@angular/cdk/portal';
import { DomPortalOutlet, PortalModule, CdkPortal } from '@angular/cdk/portal';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
import * as i4 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import * as i3 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { SdBaseSecureComponent } from '@sd-angular/core/components/base';
import * as uuid from 'uuid';
import { Subject, fromEvent, merge } from 'rxjs';
import { map, startWith, distinctUntilChanged, takeUntil } from 'rxjs/operators';
import * as i1 from '@sd-angular/core/services';

class SdSideDrawer extends SdBaseSecureComponent {
    viewContainerRef;
    ar;
    injector;
    ref;
    loadingService;
    id = `I${uuid.v4()}`;
    portal;
    drawerContainerRef;
    title = '';
    set _title(val) {
        if (val) {
            this.title = val;
        }
    }
    width = '480px';
    set _width(val) {
        if (val) {
            this.width = val;
        }
    }
    hideClose = false;
    set _hideClose(val) {
        this.hideClose = val === '' || !!val;
    }
    disableClose = false;
    set _disableClose(val) {
        this.disableClose = val === '' || !!val;
    }
    sdClosed = new EventEmitter();
    #embeddedViewRef;
    isOpened = false;
    isLoading = false;
    isHovered$;
    #destroy$ = new Subject();
    constructor(viewContainerRef, ar, injector, ref, loadingService) {
        super();
        this.viewContainerRef = viewContainerRef;
        this.ar = ar;
        this.injector = injector;
        this.ref = ref;
        this.loadingService = loadingService;
    }
    ngAfterViewInit() {
        this.#embeddedViewRef = new DomPortalOutlet(document.body, this.viewContainerRef, this.ar, this.injector).attachTemplatePortal(this.portal);
        this.#setupHoverSubscription();
    }
    open = () => {
        this.ref.markForCheck();
        this.isOpened = true;
    };
    close = () => {
        this.ref.markForCheck();
        this.isOpened = false;
        this.sdClosed.emit();
        this.stopLoading();
    };
    startLoading = () => {
        this.isLoading = true;
        this.loadingService.stop(`#${this.id}`);
        this.loadingService.start(`#${this.id}`);
    };
    stopLoading = () => {
        this.isLoading = false;
        this.loadingService.stop(`#${this.id}`);
    };
    ngOnDestroy() {
        this.#embeddedViewRef.destroy();
    }
    #setupHoverSubscription() {
        const element = this.drawerContainerRef.nativeElement;
        const mouseEnter$ = fromEvent(element, 'mouseenter').pipe(map(() => true));
        const mouseLeave$ = fromEvent(element, 'mouseleave').pipe(map(() => false));
        this.isHovered$ = merge(mouseEnter$, mouseLeave$).pipe(startWith(false), distinctUntilChanged(), takeUntil(this.#destroy$));
    }
    getHoverStatusStream() {
        return this.isHovered$;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSideDrawer, deps: [{ token: i0.ViewContainerRef }, { token: i0.ApplicationRef }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.SdLoadingService }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: SdSideDrawer, isStandalone: true, selector: "sd-side-drawer", inputs: { _title: ["title", "_title"], _width: ["width", "_width"], _hideClose: ["hideClose", "_hideClose"], _disableClose: ["disableClose", "_disableClose"] }, outputs: { sdClosed: "sdClosed" }, viewQueries: [{ propertyName: "portal", first: true, predicate: CdkPortal, descendants: true }, { propertyName: "drawerContainerRef", first: true, predicate: ["drawerContainer"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"side-drawer\"\r\n    [ngStyle]=\"{ width: width }\"\r\n    [ngClass]=\"{\r\n      'side-drawer--active': isOpened,\r\n      'side-drawer--loading': isLoading\r\n    }\"\r\n    #drawerContainer>\r\n    @if (isOpened) {\r\n      <ng-container>\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          @if (hideClose) {\r\n            <button type=\"button\" class=\"c-action\" (click)=\"close()\" mat-icon-button>\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        @if (isOpened) {\r\n          <div 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        }\r\n        <div class=\"side-drawer__footer\">\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </div>\r\n  @if (isOpened) {\r\n    <button \r\n      type=\"button\"\r\n      class=\"side-drawer-backdrop\" \r\n      (click)=\"disableClose ? null : close()\"\r\n      >\r\n    </button>\r\n  }\r\n</ng-template>\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.c-action{color:var(--sd-secondary)}.c-action:focus{outline:none}.side-drawer__icon{border:0;background:transparent;color:#212121;overflow:hidden;outline:none}.side-drawer__icon .mat-icon{float:left}.side-drawer__header{min-height:64px;padding:12px 16px;display:flex;justify-content:space-between}.side-drawer__body{flex:1;position:relative}.side-drawer__content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.side-drawer__footer{border-top:1px solid #dde0e5;padding:8px 0}.side-drawer-backdrop{background-color:#0006;border:0;outline:none!important;position:fixed;inset:0;z-index:99;width:100%;height:100%;transition:all .3s ease-in-out}.side-drawer--active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.side-drawer__title{font-size:20px;line-height:28px;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatDialogModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: PortalModule }, { kind: "directive", type: i5.CdkPortal, selector: "[cdkPortal]", exportAs: ["cdkPortal"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SdSideDrawer, decorators: [{
            type: Component,
            args: [{ selector: 'sd-side-drawer', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [CommonModule, MatIconModule, MatDialogModule, MatButtonModule, PortalModule], template: "<ng-template cdkPortal>\r\n  <div\r\n    [id]=\"id\"\r\n    class=\"side-drawer\"\r\n    [ngStyle]=\"{ width: width }\"\r\n    [ngClass]=\"{\r\n      'side-drawer--active': isOpened,\r\n      'side-drawer--loading': isLoading\r\n    }\"\r\n    #drawerContainer>\r\n    @if (isOpened) {\r\n      <ng-container>\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          @if (hideClose) {\r\n            <button type=\"button\" class=\"c-action\" (click)=\"close()\" mat-icon-button>\r\n              <mat-icon>close</mat-icon>\r\n            </button>\r\n          }\r\n        </div>\r\n        @if (isOpened) {\r\n          <div 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        }\r\n        <div class=\"side-drawer__footer\">\r\n          <ng-content select=\"[sdFooter]\"></ng-content>\r\n        </div>\r\n      </ng-container>\r\n    }\r\n  </div>\r\n  @if (isOpened) {\r\n    <button \r\n      type=\"button\"\r\n      class=\"side-drawer-backdrop\" \r\n      (click)=\"disableClose ? null : close()\"\r\n      >\r\n    </button>\r\n  }\r\n</ng-template>\r\n", styles: [".text-primary{color:var(--sd-primary)!important}.bg-primary{background:var(--sd-primary)!important}.border-primary{border-color:var(--sd-primary)!important}.text-primary-light{color:var(--sd-primary-light)!important}.bg-primary-light{background:var(--sd-primary-light)!important}.border-primary-light{border-color:var(--sd-primary-light)!important}.text-primary-dark{color:var(--sd-primary-dark)!important}.bg-primary-dark{background:var(--sd-primary-dark)!important}.border-primary-dark{border-color:var(--sd-primary-dark)!important}.text-info{color:var(--sd-info)!important}.bg-info{background:var(--sd-info)!important}.border-info{border-color:var(--sd-info)!important}.text-info-light{color:var(--sd-info-light)!important}.bg-info-light{background:var(--sd-info-light)!important}.border-info-light{border-color:var(--sd-info-light)!important}.text-info-dark{color:var(--sd-info-dark)!important}.bg-info-dark{background:var(--sd-info-dark)!important}.border-info-dark{border-color:var(--sd-info-dark)!important}.text-success{color:var(--sd-success)!important}.bg-success{background:var(--sd-success)!important}.border-success{border-color:var(--sd-success)!important}.text-success-light{color:var(--sd-success-light)!important}.bg-success-light{background:var(--sd-success-light)!important}.border-success-light{border-color:var(--sd-success-light)!important}.text-success-dark{color:var(--sd-success-dark)!important}.bg-success-dark{background:var(--sd-success-dark)!important}.border-success-dark{border-color:var(--sd-success-dark)!important}.text-warning{color:var(--sd-warning)!important}.bg-warning{background:var(--sd-warning)!important}.border-warning{border-color:var(--sd-warning)!important}.text-warning-light{color:var(--sd-warning-light)!important}.bg-warning-light{background:var(--sd-warning-light)!important}.border-warning-light{border-color:var(--sd-warning-light)!important}.text-warning-dark{color:var(--sd-warning-dark)!important}.bg-warning-dark{background:var(--sd-warning-dark)!important}.border-warning-dark{border-color:var(--sd-warning-dark)!important}.text-error{color:var(--sd-error)!important}.bg-error{background:var(--sd-error)!important}.border-error{border-color:var(--sd-error)!important}.text-error-light{color:var(--sd-error-light)!important}.bg-error-light{background:var(--sd-error-light)!important}.border-error-light{border-color:var(--sd-error-light)!important}.text-error-dark{color:var(--sd-error-dark)!important}.bg-error-dark{background:var(--sd-error-dark)!important}.border-error-dark{border-color:var(--sd-error-dark)!important}.text-secondary{color:var(--sd-secondary)!important}.bg-secondary{background:var(--sd-secondary)!important}.border-secondary{border-color:var(--sd-secondary)!important}.text-secondary-light{color:var(--sd-secondary-light)!important}.bg-secondary-light{background:var(--sd-secondary-light)!important}.border-secondary-light{border-color:var(--sd-secondary-light)!important}.text-secondary-dark{color:var(--sd-secondary-dark)!important}.bg-secondary-dark{background:var(--sd-secondary-dark)!important}.border-secondary-dark{border-color:var(--sd-secondary-dark)!important}.text-light{color:var(--sd-light)!important}.bg-light{background:var(--sd-light)!important}.border-light{border-color:var(--sd-light)!important}.text-dark{color:var(--sd-dark)!important}.bg-dark{background:var(--sd-dark)!important}.border-dark{border-color:var(--sd-dark)!important}.text-black500{color:var(--sd-black500)!important}.bg-black500{background:var(--sd-black500)!important}.border-black500{border-color:var(--sd-black500)!important}.text-black400{color:var(--sd-black400)!important}.bg-black400{background:var(--sd-black400)!important}.border-black400{border-color:var(--sd-black400)!important}.text-black300{color:var(--sd-black300)!important}.bg-black300{background:var(--sd-black300)!important}.border-black300{border-color:var(--sd-black300)!important}.text-black200{color:var(--sd-black200)!important}.bg-black200{background:var(--sd-black200)!important}.border-black200{border-color:var(--sd-black200)!important}.text-black100{color:var(--sd-black100)!important}.bg-black100{background:var(--sd-black100)!important}.border-black100{border-color:var(--sd-black100)!important}.text-white{color:#fff!important}.bg-white{background:#fff!important}.border-white{border-color:#fff!important}.text-black{color:#000!important}.bg-black{background:#000!important}.border-black{border-color:#000!important}.side-drawer{position:fixed;right:0;top:0;bottom:0;background-color:#fff;z-index:999;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translate3d(100%,0,0);transition:all .3s ease-in-out;pointer-events:none;box-shadow:0 .4px .8px #0000001a,0 3px 6px #0003}.c-action{color:var(--sd-secondary)}.c-action:focus{outline:none}.side-drawer__icon{border:0;background:transparent;color:#212121;overflow:hidden;outline:none}.side-drawer__icon .mat-icon{float:left}.side-drawer__header{min-height:64px;padding:12px 16px;display:flex;justify-content:space-between}.side-drawer__body{flex:1;position:relative}.side-drawer__content{position:absolute;padding:0 16px 16px;inset:0;overflow:auto}.side-drawer__footer{border-top:1px solid #dde0e5;padding:8px 0}.side-drawer-backdrop{background-color:#0006;border:0;outline:none!important;position:fixed;inset:0;z-index:99;width:100%;height:100%;transition:all .3s ease-in-out}.side-drawer--active{opacity:1;visibility:visible;pointer-events:all;transform:translateZ(0)}.side-drawer__title{font-size:20px;line-height:28px;font-weight:500}\n"] }]
        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.ApplicationRef }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1.SdLoadingService }], propDecorators: { portal: [{
                type: ViewChild,
                args: [CdkPortal]
            }], drawerContainerRef: [{
                type: ViewChild,
                args: ['drawerContainer']
            }], _title: [{
                type: Input,
                args: ['title']
            }], _width: [{
                type: Input,
                args: ['width']
            }], _hideClose: [{
                type: Input,
                args: ['hideClose']
            }], _disableClose: [{
                type: Input,
                args: ['disableClose']
            }], sdClosed: [{
                type: Output
            }] } });

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

export { SdSideDrawer };
//# sourceMappingURL=sd-angular-core-components-side-drawer.mjs.map
