ngx-bladex
Version:
A simplistic and customizable blade component for Angular
68 lines (62 loc) • 9.44 kB
JavaScript
import { NgIf, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Component, NgModule } from '@angular/core';
class NgxBladeComponent {
constructor() {
this.DEFAULT_WIDTH = 25;
this.DEFAULT_CONFIG = {
closeButton: true,
maximizeButton: true,
isModal: false,
};
this.isMinimized = true;
this.width = this.DEFAULT_WIDTH;
this.config = this.DEFAULT_CONFIG;
this.onClose = new EventEmitter();
}
onMinimize() {
if (!this.isMinimized) {
this.isMinimized = !this.isMinimized;
}
}
onMaximize() {
if (this.isMinimized) {
this.isMinimized = !this.isMinimized;
}
}
close() {
this.onClose.emit();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxBladeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NgxBladeComponent, isStandalone: true, selector: "ngx-blade", inputs: { width: "width", config: "config" }, outputs: { onClose: "onClose" }, ngImport: i0, template: "<div *ngIf=\"config.isModal\" class=\"modal-cover\"></div>\n<div class=\"wrapper\" [style.width.%]=\"isMinimized ? width : 100\">\n <div class=\"blade-container\">\n <div class=\"blade-header\">\n <div class=\"header-title\">\n <div class=\"header-title-wrapper\">\n <ng-content select=\"[ngxBladeHeader]\"> </ng-content>\n </div>\n </div>\n <div class=\"header-actions\">\n <span\n class=\"action-button\"\n (click)=\"onMinimize()\"\n *ngIf=\"config.maximizeButton && !isMinimized\"\n id=\"ngxBladeMinimizeBtn\"\n >\n <b>⊟</b>\n </span>\n <span\n class=\"action-button\"\n (click)=\"onMaximize()\"\n *ngIf=\"config.maximizeButton && isMinimized\"\n id=\"ngxBladeMaximizeBtn\"\n >\n <b>⊞</b>\n </span>\n <span\n class=\"action-button danger\"\n (click)=\"onClose.emit()\"\n *ngIf=\"config.closeButton\"\n id=\"ngxBladeCloseBtn\"\n >\n <b>×</b>\n </span>\n </div>\n </div>\n <div class=\"blade-body\">\n <div class=\"blade-body-wrapper\">\n <ng-content select=\"[ngxBladeBody]\"> </ng-content>\n </div>\n </div>\n <div class=\"blade-footer\">\n <div class=\"blade-footer-wrapper\">\n <ng-content select=\"[ngxBladeFooter]\"> </ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [".modal-cover{position:absolute;overflow:hidden;inset:0;opacity:.4;filter:alpha(opacity=50);background-color:#00000040;z-index:49}.wrapper{z-index:50;position:absolute;top:0;bottom:0;width:50%;right:0;overflow-y:auto;box-shadow:0 0 10px 1px #7f7f7f}.wrapper .blade-container{height:100%;display:flex;flex-direction:column;border-bottom:none;align-self:strech}.wrapper .blade-container .blade-header{display:flex;background-color:#000;color:#fff;justify-content:space-between;padding:5px}.wrapper .blade-container .blade-header .header-title{display:flex;align-items:baseline;justify-content:space-between;font-family:Segoe UI,Segoe UI Light,Segoe WP Light,Segoe WP,Tahoma,Arial,sans-serif}.wrapper .blade-container .blade-header .header-title .header-title-wrapper{width:100%;color:inherit}.wrapper .blade-container .blade-header .header-actions{display:flex}.wrapper .blade-container .blade-header .header-actions .action-button{display:flex;height:30px;width:30px;background-color:transparent;justify-content:center;align-items:center;transition:background-color .4s ease-out;cursor:pointer}.wrapper .blade-container .blade-header .header-actions .action-button:hover{background:#e6e6e64d}.wrapper .blade-container .blade-header .header-actions .danger:hover{background-color:#a00!important}.wrapper .blade-container .blade-body{display:flex;flex:1;padding:5px;height:100%;background-color:#fff;overflow-y:auto;min-height:50vh}.wrapper .blade-container .blade-body .blade-body-wrapper{width:100%;height:100%;background-color:inherit}.wrapper .blade-container .blade-footer{display:flex;align-self:stretch;color:#000}.wrapper .blade-container .blade-footer .blade-footer-wrapper{width:100%;height:100%;background-color:#eee}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxBladeComponent, decorators: [{
type: Component,
args: [{ selector: 'ngx-blade', standalone: true, imports: [NgIf], template: "<div *ngIf=\"config.isModal\" class=\"modal-cover\"></div>\n<div class=\"wrapper\" [style.width.%]=\"isMinimized ? width : 100\">\n <div class=\"blade-container\">\n <div class=\"blade-header\">\n <div class=\"header-title\">\n <div class=\"header-title-wrapper\">\n <ng-content select=\"[ngxBladeHeader]\"> </ng-content>\n </div>\n </div>\n <div class=\"header-actions\">\n <span\n class=\"action-button\"\n (click)=\"onMinimize()\"\n *ngIf=\"config.maximizeButton && !isMinimized\"\n id=\"ngxBladeMinimizeBtn\"\n >\n <b>⊟</b>\n </span>\n <span\n class=\"action-button\"\n (click)=\"onMaximize()\"\n *ngIf=\"config.maximizeButton && isMinimized\"\n id=\"ngxBladeMaximizeBtn\"\n >\n <b>⊞</b>\n </span>\n <span\n class=\"action-button danger\"\n (click)=\"onClose.emit()\"\n *ngIf=\"config.closeButton\"\n id=\"ngxBladeCloseBtn\"\n >\n <b>×</b>\n </span>\n </div>\n </div>\n <div class=\"blade-body\">\n <div class=\"blade-body-wrapper\">\n <ng-content select=\"[ngxBladeBody]\"> </ng-content>\n </div>\n </div>\n <div class=\"blade-footer\">\n <div class=\"blade-footer-wrapper\">\n <ng-content select=\"[ngxBladeFooter]\"> </ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [".modal-cover{position:absolute;overflow:hidden;inset:0;opacity:.4;filter:alpha(opacity=50);background-color:#00000040;z-index:49}.wrapper{z-index:50;position:absolute;top:0;bottom:0;width:50%;right:0;overflow-y:auto;box-shadow:0 0 10px 1px #7f7f7f}.wrapper .blade-container{height:100%;display:flex;flex-direction:column;border-bottom:none;align-self:strech}.wrapper .blade-container .blade-header{display:flex;background-color:#000;color:#fff;justify-content:space-between;padding:5px}.wrapper .blade-container .blade-header .header-title{display:flex;align-items:baseline;justify-content:space-between;font-family:Segoe UI,Segoe UI Light,Segoe WP Light,Segoe WP,Tahoma,Arial,sans-serif}.wrapper .blade-container .blade-header .header-title .header-title-wrapper{width:100%;color:inherit}.wrapper .blade-container .blade-header .header-actions{display:flex}.wrapper .blade-container .blade-header .header-actions .action-button{display:flex;height:30px;width:30px;background-color:transparent;justify-content:center;align-items:center;transition:background-color .4s ease-out;cursor:pointer}.wrapper .blade-container .blade-header .header-actions .action-button:hover{background:#e6e6e64d}.wrapper .blade-container .blade-header .header-actions .danger:hover{background-color:#a00!important}.wrapper .blade-container .blade-body{display:flex;flex:1;padding:5px;height:100%;background-color:#fff;overflow-y:auto;min-height:50vh}.wrapper .blade-container .blade-body .blade-body-wrapper{width:100%;height:100%;background-color:inherit}.wrapper .blade-container .blade-footer{display:flex;align-self:stretch;color:#000}.wrapper .blade-container .blade-footer .blade-footer-wrapper{width:100%;height:100%;background-color:#eee}\n"] }]
}], ctorParameters: () => [], propDecorators: { width: [{
type: Input
}], config: [{
type: Input
}], onClose: [{
type: Output
}] } });
class NgxBladeModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxBladeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: NgxBladeModule, imports: [CommonModule, NgxBladeComponent], exports: [NgxBladeComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxBladeModule, imports: [CommonModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NgxBladeModule, decorators: [{
type: NgModule,
args: [{
imports: [CommonModule, NgxBladeComponent],
exports: [NgxBladeComponent],
}]
}] });
/*
* Public API Surface of ngx-blade
*/
/**
* Generated bundle index. Do not edit.
*/
export { NgxBladeComponent, NgxBladeModule };
//# sourceMappingURL=ngx-bladex.mjs.map