ngx-bladex
Version:
A simplistic and customizable blade component for Angular
43 lines • 13.6 kB
JavaScript
import { NgIf } from '@angular/common';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import * as i0 from "@angular/core";
export 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
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmd4LWJsYWRlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL25neC1ibGFkZS9zcmMvbGliL25neC1ibGFkZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtYmxhZGUvc3JjL2xpYi9uZ3gtYmxhZGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBU3ZFLE1BQU0sT0FBTyxpQkFBaUI7SUFlNUI7UUFkZ0Isa0JBQWEsR0FBVyxFQUFFLENBQUM7UUFDM0IsbUJBQWMsR0FBZ0I7WUFDNUMsV0FBVyxFQUFFLElBQUk7WUFDakIsY0FBYyxFQUFFLElBQUk7WUFDcEIsT0FBTyxFQUFFLEtBQUs7U0FDZixDQUFDO1FBRUssZ0JBQVcsR0FBRyxJQUFJLENBQUM7UUFFVixVQUFLLEdBQVcsSUFBSSxDQUFDLGFBQWEsQ0FBQztRQUNuQyxXQUFNLEdBQ3BCLElBQUksQ0FBQyxjQUFjLENBQUM7UUFJcEIsSUFBSSxDQUFDLE9BQU8sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0lBQ3BDLENBQUM7SUFFTSxVQUFVO1FBQ2YsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUN0QixJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQztRQUN2QyxDQUFDO0lBQ0gsQ0FBQztJQUVNLFVBQVU7UUFDZixJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNyQixJQUFJLENBQUMsV0FBVyxHQUFHLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQztRQUN2QyxDQUFDO0lBQ0gsQ0FBQztJQUVNLEtBQUs7UUFDVixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO0lBQ3RCLENBQUM7K0dBakNVLGlCQUFpQjttR0FBakIsaUJBQWlCLG9KQ1Y5QixxOUNBZ0RBLHd2RER4Q2MsSUFBSTs7NEZBRUwsaUJBQWlCO2tCQVA3QixTQUFTOytCQUNJLFdBQVcsY0FHVCxJQUFJLFdBQ1AsQ0FBQyxJQUFJLENBQUM7d0RBWUQsS0FBSztzQkFBcEIsS0FBSztnQkFDVSxNQUFNO3NCQUFyQixLQUFLO2dCQUVXLE9BQU87c0JBQXZCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnbmd4LWJsYWRlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vbmd4LWJsYWRlLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9uZ3gtYmxhZGUuY29tcG9uZW50LnNjc3MnXSxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGltcG9ydHM6IFtOZ0lmXSxcbn0pXG5leHBvcnQgY2xhc3MgTmd4QmxhZGVDb21wb25lbnQge1xuICBwdWJsaWMgcmVhZG9ubHkgREVGQVVMVF9XSURUSDogbnVtYmVyID0gMjU7XG4gIHB1YmxpYyByZWFkb25seSBERUZBVUxUX0NPTkZJRzogQmxhZGVDb25maWcgPSB7XG4gICAgY2xvc2VCdXR0b246IHRydWUsXG4gICAgbWF4aW1pemVCdXR0b246IHRydWUsXG4gICAgaXNNb2RhbDogZmFsc2UsXG4gIH07XG5cbiAgcHVibGljIGlzTWluaW1pemVkID0gdHJ1ZTtcblxuICBASW5wdXQoKSBwdWJsaWMgd2lkdGg6IG51bWJlciA9IHRoaXMuREVGQVVMVF9XSURUSDtcbiAgQElucHV0KCkgcHVibGljIGNvbmZpZzogQmxhZGVDb25maWcgfCBQYXJ0aWFsPEJsYWRlQ29uZmlnPiA9XG4gICAgdGhpcy5ERUZBVUxUX0NPTkZJRztcbiAgQE91dHB1dCgpIHB1YmxpYyBvbkNsb3NlOiBFdmVudEVtaXR0ZXI8YW55PjtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICB0aGlzLm9uQ2xvc2UgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG4gIH1cblxuICBwdWJsaWMgb25NaW5pbWl6ZSgpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuaXNNaW5pbWl6ZWQpIHtcbiAgICAgIHRoaXMuaXNNaW5pbWl6ZWQgPSAhdGhpcy5pc01pbmltaXplZDtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgb25NYXhpbWl6ZSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5pc01pbmltaXplZCkge1xuICAgICAgdGhpcy5pc01pbmltaXplZCA9ICF0aGlzLmlzTWluaW1pemVkO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBjbG9zZSgpOiB2b2lkIHtcbiAgICB0aGlzLm9uQ2xvc2UuZW1pdCgpO1xuICB9XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgQmxhZGVDb25maWcge1xuICBjbG9zZUJ1dHRvbjogYm9vbGVhbjtcbiAgbWF4aW1pemVCdXR0b246IGJvb2xlYW47XG4gIGlzTW9kYWw6IGJvb2xlYW47XG59XG4iLCI8ZGl2ICpuZ0lmPVwiY29uZmlnLmlzTW9kYWxcIiBjbGFzcz1cIm1vZGFsLWNvdmVyXCI+PC9kaXY+XG48ZGl2IGNsYXNzPVwid3JhcHBlclwiIFtzdHlsZS53aWR0aC4lXT1cImlzTWluaW1pemVkID8gd2lkdGggOiAxMDBcIj5cbiAgPGRpdiBjbGFzcz1cImJsYWRlLWNvbnRhaW5lclwiPlxuICAgIDxkaXYgY2xhc3M9XCJibGFkZS1oZWFkZXJcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJoZWFkZXItdGl0bGVcIj5cbiAgICAgICAgPGRpdiBjbGFzcz1cImhlYWRlci10aXRsZS13cmFwcGVyXCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW25neEJsYWRlSGVhZGVyXVwiPiA8L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwiaGVhZGVyLWFjdGlvbnNcIj5cbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBjbGFzcz1cImFjdGlvbi1idXR0b25cIlxuICAgICAgICAgIChjbGljayk9XCJvbk1pbmltaXplKClcIlxuICAgICAgICAgICpuZ0lmPVwiY29uZmlnLm1heGltaXplQnV0dG9uICYmICFpc01pbmltaXplZFwiXG4gICAgICAgICAgaWQ9XCJuZ3hCbGFkZU1pbmltaXplQnRuXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxiPiYjeDAyMjlmOzwvYj5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgICA8c3BhblxuICAgICAgICAgIGNsYXNzPVwiYWN0aW9uLWJ1dHRvblwiXG4gICAgICAgICAgKGNsaWNrKT1cIm9uTWF4aW1pemUoKVwiXG4gICAgICAgICAgKm5nSWY9XCJjb25maWcubWF4aW1pemVCdXR0b24gJiYgaXNNaW5pbWl6ZWRcIlxuICAgICAgICAgIGlkPVwibmd4QmxhZGVNYXhpbWl6ZUJ0blwiXG4gICAgICAgID5cbiAgICAgICAgICA8Yj4mI3gwMjI5RTs8L2I+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgICAgPHNwYW5cbiAgICAgICAgICBjbGFzcz1cImFjdGlvbi1idXR0b24gZGFuZ2VyXCJcbiAgICAgICAgICAoY2xpY2spPVwib25DbG9zZS5lbWl0KClcIlxuICAgICAgICAgICpuZ0lmPVwiY29uZmlnLmNsb3NlQnV0dG9uXCJcbiAgICAgICAgICBpZD1cIm5neEJsYWRlQ2xvc2VCdG5cIlxuICAgICAgICA+XG4gICAgICAgICAgPGI+JnRpbWVzOzwvYj5cbiAgICAgICAgPC9zcGFuPlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImJsYWRlLWJvZHlcIj5cbiAgICAgIDxkaXYgY2xhc3M9XCJibGFkZS1ib2R5LXdyYXBwZXJcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW25neEJsYWRlQm9keV1cIj4gPC9uZy1jb250ZW50PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImJsYWRlLWZvb3RlclwiPlxuICAgICAgPGRpdiBjbGFzcz1cImJsYWRlLWZvb3Rlci13cmFwcGVyXCI+XG4gICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltuZ3hCbGFkZUZvb3Rlcl1cIj4gPC9uZy1jb250ZW50PlxuICAgICAgPC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=