@sd-angular/core
Version:
Sd Angular Core Lib
137 lines (131 loc) • 7.4 kB
JavaScript
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();
this.sdClosed = 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.sdClosed.emit();
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 }],
sdClosed: [{ 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