ngx-material-drawer
Version:
A dynamic, configurable Angular Material drawer with dashboard capabilities
79 lines • 13.5 kB
JavaScript
import { Component, Input, EventEmitter, Output, } from "@angular/core";
import { BreakpointObserverService, POINTS_NAME, } from "../utils/breakpoint-observer.service";
import { NgxMaterialDrawerEventEmitter } from "../utils/mat-event-emitter.service";
import { NgxUtilsService } from "../utils/utils.service";
import * as i0 from "@angular/core";
import * as i1 from "../utils/breakpoint-observer.service";
import * as i2 from "../utils/mat-event-emitter.service";
import * as i3 from "../utils/utils.service";
import * as i4 from "@angular/common";
import * as i5 from "@angular/material/grid-list";
import * as i6 from "../card-holder/card-holder.component";
export class NgxGridComponent {
constructor(_breakpointObserverService, matEventEmitterService, ngxUtilsService) {
this._breakpointObserverService = _breakpointObserverService;
this.matEventEmitterService = matEventEmitterService;
this.ngxUtilsService = ngxUtilsService;
this.onGridDataChange = new EventEmitter();
this.matEventEmitterService.onGridDataChange.subscribe((event) => {
if (event) {
this.refreshGrid(event["grids"], this.size);
}
else if (this.inputData["grid"]) {
this.gridData = this.inputData.grid;
}
});
}
ngOnInit() {
if (this.inputData && typeof this.inputData == "object") {
if (this.inputData["grids"]) {
this.registerBreakPoints(this.inputData["grids"]);
}
else if (this.inputData["grid"]) {
this.gridData = this.inputData.grid;
}
}
this.ngxUtilsService.componentInstance = this.componentInstance;
}
registerBreakPoints(grids) {
this.size$ = this._breakpointObserverService.size$;
this.size$.subscribe((size) => {
this.size = size;
this.refreshGrid(grids, size);
});
}
refreshGrid(grids, size) {
if (grids[size] && grids[size]["grid"]) {
this.gridData = grids[size]["grid"];
}
else {
let gData;
let index = POINTS_NAME.indexOf(size);
while (!gData && index > 0) {
index--;
gData = grids[POINTS_NAME[index]] && grids[POINTS_NAME[index]]["grid"];
}
index = POINTS_NAME.indexOf(size);
while (!gData && index < POINTS_NAME.length - 1) {
index++;
gData = grids[POINTS_NAME[index]] && grids[POINTS_NAME[index]]["grid"];
}
this.gridData = gData || [];
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxGridComponent, deps: [{ token: i1.BreakpointObserverService }, { token: i2.NgxMaterialDrawerEventEmitter }, { token: i3.NgxUtilsService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NgxGridComponent, selector: "ngx-material-grid", inputs: { inputData: ["gridData", "inputData"], componentInstance: "componentInstance" }, outputs: { onGridDataChange: "onGridDataChange" }, ngImport: i0, template: "<div class=\"grid-container\">\n <mat-grid-list\n [cols]=\"gridData?.cols || inputData?.cols || 4\"\n [rowHeight]=\"gridData?.rowHeight || inputData?.rowHeight || '200px'\"\n [gutterSize]=\"gridData?.gutterSize || inputData?.gutterSize || '0px'\"\n >\n <mat-grid-tile\n *ngFor=\"let card of gridData\"\n [colspan]=\"card.cols\"\n [rowspan]=\"card.rows\"\n >\n <lib-card-holder [cardData]='ngxUtilsService.getExtendedData(card)'></lib-card-holder>\n </mat-grid-tile>\n </mat-grid-list>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i5.MatGridList, selector: "mat-grid-list", inputs: ["cols", "gutterSize", "rowHeight"], exportAs: ["matGridList"] }, { kind: "component", type: i5.MatGridTile, selector: "mat-grid-tile", inputs: ["rowspan", "colspan"], exportAs: ["matGridTile"] }, { kind: "component", type: i6.CardHolderComponent, selector: "lib-card-holder", inputs: ["cardData"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NgxGridComponent, decorators: [{
type: Component,
args: [{ selector: "ngx-material-grid", template: "<div class=\"grid-container\">\n <mat-grid-list\n [cols]=\"gridData?.cols || inputData?.cols || 4\"\n [rowHeight]=\"gridData?.rowHeight || inputData?.rowHeight || '200px'\"\n [gutterSize]=\"gridData?.gutterSize || inputData?.gutterSize || '0px'\"\n >\n <mat-grid-tile\n *ngFor=\"let card of gridData\"\n [colspan]=\"card.cols\"\n [rowspan]=\"card.rows\"\n >\n <lib-card-holder [cardData]='ngxUtilsService.getExtendedData(card)'></lib-card-holder>\n </mat-grid-tile>\n </mat-grid-list>\n</div>\n" }]
}], ctorParameters: () => [{ type: i1.BreakpointObserverService }, { type: i2.NgxMaterialDrawerEventEmitter }, { type: i3.NgxUtilsService }], propDecorators: { inputData: [{
type: Input,
args: ["gridData"]
}], componentInstance: [{
type: Input,
args: ["componentInstance"]
}], onGridDataChange: [{
type: Output
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JpZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbWF0ZXJpYWwtZHJhd2VyL3NyYy9saWIvYXBwL2dyaWQvZ3JpZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZ3gtbWF0ZXJpYWwtZHJhd2VyL3NyYy9saWIvYXBwL2dyaWQvZ3JpZC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssRUFLTCxZQUFZLEVBQ1osTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFDTCx5QkFBeUIsRUFDekIsV0FBVyxHQUNaLE1BQU0sc0NBQXNDLENBQUM7QUFFOUMsT0FBTyxFQUFFLDZCQUE2QixFQUFFLE1BQU0sb0NBQW9DLENBQUM7QUFDbkYsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHdCQUF3QixDQUFDOzs7Ozs7OztBQU96RCxNQUFNLE9BQU8sZ0JBQWdCO0lBUTNCLFlBQ1UsMEJBQXFELEVBQ3RELHNCQUFxRCxFQUNyRCxlQUFnQztRQUYvQiwrQkFBMEIsR0FBMUIsMEJBQTBCLENBQTJCO1FBQ3RELDJCQUFzQixHQUF0QixzQkFBc0IsQ0FBK0I7UUFDckQsb0JBQWUsR0FBZixlQUFlLENBQWlCO1FBUnhCLHFCQUFnQixHQUFRLElBQUksWUFBWSxFQUFFLENBQUM7UUFVMUQsSUFBSSxDQUFDLHNCQUFzQixDQUFDLGdCQUFnQixDQUFDLFNBQVMsQ0FBQyxDQUFDLEtBQVUsRUFBRSxFQUFFO1lBQ3BFLElBQUksS0FBSyxFQUFFLENBQUM7Z0JBQ1YsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQzlDLENBQUM7aUJBQU0sSUFBSSxJQUFJLENBQUMsU0FBUyxDQUFDLE1BQU0sQ0FB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cHV0LFxuICBPbkluaXQsXG4gIFZpZXdDaGlsZCxcbiAgQ29tcG9uZW50RmFjdG9yeVJlc29sdmVyLFxuICBPbkRlc3Ryb3ksXG4gIEV2ZW50RW1pdHRlcixcbiAgT3V0cHV0LFxufSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xuaW1wb3J0IHtcbiAgQnJlYWtwb2ludE9ic2VydmVyU2VydmljZSxcbiAgUE9JTlRTX05BTUUsXG59IGZyb20gXCIuLi91dGlscy9icmVha3BvaW50LW9ic2VydmVyLnNlcnZpY2VcIjtcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tIFwicnhqc1wiO1xuaW1wb3J0IHsgTmd4TWF0ZXJpYWxEcmF3ZXJFdmVudEVtaXR0ZXIgfSBmcm9tIFwiLi4vdXRpbHMvbWF0LWV2ZW50LWVtaXR0ZXIuc2VydmljZVwiO1xuaW1wb3J0IHsgTmd4VXRpbHNTZXJ2aWNlIH0gZnJvbSBcIi4uL3V0aWxzL3V0aWxzLnNlcnZpY2VcIjtcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiBcIm5neC1tYXRlcmlhbC1ncmlkXCIsXG4gIHRlbXBsYXRlVXJsOiBcIi4vZ3JpZC5jb21wb25lbnQuaHRtbFwiLFxuICBzdHlsZVVybHM6IFtcIi4vZ3JpZC5jb21wb25lbnQuc2Nzc1wiXSxcbn0pXG5leHBvcnQgY2xhc3MgTmd4R3JpZENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG4gIEBJbnB1dChcImdyaWREYXRhXCIpIGlucHV0RGF0YTogYW55O1xuICBASW5wdXQoXCJjb21wb25lbnRJbnN0YW5jZVwiKSBjb21wb25lbnRJbnN0YW5jZTogYW55O1xuICBAT3V0cHV0KCkgcHVibGljIG9uR3JpZERhdGFDaGFuZ2U6IGFueSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgcHVibGljIGdyaWREYXRhOiBhbnk7XG4gIHB1YmxpYyBzaXplOiBhbnk7XG4gIHB1YmxpYyBzaXplJCE6IE9ic2VydmFibGU8c3RyaW5nPjtcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcml2YXRlIF9icmVha3BvaW50T2JzZXJ2ZXJTZXJ2aWNlOiBCcmVha3BvaW50T2JzZXJ2ZXJTZXJ2aWNlLFxuICAgIHB1YmxpYyBtYXRFdmVudEVtaXR0ZXJTZXJ2aWNlOiBOZ3hNYXRlcmlhbERyYXdlckV2ZW50RW1pdHRlcixcbiAgICBwdWJsaWMgbmd4VXRpbHNTZXJ2aWNlOiBOZ3hVdGlsc1NlcnZpY2VcbiAgKSB7XG4gICAgdGhpcy5tYXRFdmVudEVtaXR0ZXJTZXJ2aWNlLm9uR3JpZERhdGFDaGFuZ2Uuc3Vic2NyaWJlKChldmVudDogYW55KSA9PiB7XG4gICAgICBpZiAoZXZlbnQpIHtcbiAgICAgICAgdGhpcy5yZWZyZXNoR3JpZChldmVudFtcImdyaWRzXCJdLCB0aGlzLnNpemUpO1xuICAgICAgfSBlbHNlIGlmICh0aGlzLmlucHV0RGF0YVtcImdyaWRcIl0pIHtcbiAgICAgICAgdGhpcy5ncmlkRGF0YSA9IHRoaXMuaW5wdXREYXRhLmdyaWQ7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICBpZiAodGhpcy5pbnB1dERhdGEgJiYgdHlwZW9mIHRoaXMuaW5wdXREYXRhID09IFwib2JqZWN0XCIpIHtcbiAgICAgIGlmICh0aGlzLmlucHV0RGF0YVtcImdyaWRzXCJdKSB7XG4gICAgICAgIHRoaXMucmVnaXN0ZXJCcmVha1BvaW50cyh0aGlzLmlucHV0RGF0YVtcImdyaWRzXCJdKTtcbiAgICAgIH0gZWxzZSBpZiAodGhpcy5pbnB1dERhdGFbXCJncmlkXCJdKSB7XG4gICAgICAgIHRoaXMuZ3JpZERhdGEgPSB0aGlzLmlucHV0RGF0YS5ncmlkO1xuICAgICAgfVxuICAgIH1cbiAgICB0aGlzLm5neFV0aWxzU2VydmljZS5jb21wb25lbnRJbnN0YW5jZSA9IHRoaXMuY29tcG9uZW50SW5zdGFuY2U7XG4gIH1cblxuICByZWdpc3RlckJyZWFrUG9pbnRzKGdyaWRzOiBhbnkpIHtcbiAgICB0aGlzLnNpemUkID0gdGhpcy5fYnJlYWtwb2ludE9ic2VydmVyU2VydmljZS5zaXplJDtcbiAgICB0aGlzLnNpemUkLnN1YnNjcmliZSgoc2l6ZSkgPT4ge1xuICAgICAgdGhpcy5zaXplID0gc2l6ZTtcbiAgICAgIHRoaXMucmVmcmVzaEdyaWQoZ3JpZHMsIHNpemUpO1xuICAgIH0pO1xuICB9XG5cbiAgcmVmcmVzaEdyaWQoZ3JpZHM6IGFueSwgc2l6ZTogYW55KSB7XG4gICAgaWYgKGdyaWRzW3NpemVdICYmIGdyaWRzW3NpemVdW1wiZ3JpZFwiXSkge1xuICAgICAgdGhpcy5ncmlkRGF0YSA9IGdyaWRzW3NpemVdW1wiZ3JpZFwiXTtcbiAgICB9IGVsc2Uge1xuICAgICAgbGV0IGdEYXRhO1xuICAgICAgbGV0IGluZGV4ID0gUE9JTlRTX05BTUUuaW5kZXhPZihzaXplKTtcbiAgICAgIHdoaWxlICghZ0RhdGEgJiYgaW5kZXggPiAwKSB7XG4gICAgICAgIGluZGV4LS07XG4gICAgICAgIGdEYXRhID0gZ3JpZHNbUE9JTlRTX05BTUVbaW5kZXhdXSAmJiBncmlkc1tQT0lOVFNfTkFNRVtpbmRleF1dW1wiZ3JpZFwiXTtcbiAgICAgIH1cbiAgICAgIGluZGV4ID0gUE9JTlRTX05BTUUuaW5kZXhPZihzaXplKTtcbiAgICAgIHdoaWxlICghZ0RhdGEgJiYgaW5kZXggPCBQT0lOVFNfTkFNRS5sZW5ndGggLSAxKSB7XG4gICAgICAgIGluZGV4Kys7XG4gICAgICAgIGdEYXRhID0gZ3JpZHNbUE9JTlRTX05BTUVbaW5kZXhdXSAmJiBncmlkc1tQT0lOVFNfTkFNRVtpbmRleF1dW1wiZ3JpZFwiXTtcbiAgICAgIH1cbiAgICAgIHRoaXMuZ3JpZERhdGEgPSBnRGF0YSB8fCBbXTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJncmlkLWNvbnRhaW5lclwiPlxuICAgIDxtYXQtZ3JpZC1saXN0XG4gICAgICAgIFtjb2xzXT1cImdyaWREYXRhPy5jb2xzIHx8IGlucHV0RGF0YT8uY29scyB8fCA0XCJcbiAgICAgICAgW3Jvd0hlaWdodF09XCJncmlkRGF0YT8ucm93SGVpZ2h0IHx8IGlucHV0RGF0YT8ucm93SGVpZ2h0IHx8ICcyMDBweCdcIlxuICAgICAgICBbZ3V0dGVyU2l6ZV09XCJncmlkRGF0YT8uZ3V0dGVyU2l6ZSB8fCBpbnB1dERhdGE/Lmd1dHRlclNpemUgfHwgJzBweCdcIlxuICAgID5cbiAgICAgICAgPG1hdC1ncmlkLXRpbGVcbiAgICAgICAgICAgICpuZ0Zvcj1cImxldCBjYXJkIG9mIGdyaWREYXRhXCJcbiAgICAgICAgICAgIFtjb2xzcGFuXT1cImNhcmQuY29sc1wiXG4gICAgICAgICAgICBbcm93c3Bhbl09XCJjYXJkLnJvd3NcIlxuICAgICAgICA+XG4gICAgICAgICAgICA8bGliLWNhcmQtaG9sZGVyIFtjYXJkRGF0YV09J25neFV0aWxzU2VydmljZS5nZXRFeHRlbmRlZERhdGEoY2FyZCknPjwvbGliLWNhcmQtaG9sZGVyPlxuICAgICAgICA8L21hdC1ncmlkLXRpbGU+XG4gICAgPC9tYXQtZ3JpZC1saXN0PlxuPC9kaXY+XG4iXX0=