ng-devui
Version:
DevUI components based on Angular
258 lines • 110 kB
JavaScript
import { ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, HostBinding, HostListener, Input, isDevMode, Output, QueryList, Renderer2, } from '@angular/core';
import { GridStack } from 'gridstack';
import { DashBoardGridStackDefaultOption } from './grid-stack.config';
import { GridStackService } from './grid-stack.service';
import './polyfill';
import { DashboardWidgetComponent } from './widget/widget.component';
import * as i0 from "@angular/core";
import * as i1 from "./grid-stack.service";
export class DashboardComponent {
get gridStack() {
return this.gridStackService?.gridStack;
}
constructor(el, cdr, renderer, gridStackService) {
this.el = el;
this.cdr = cdr;
this.renderer = renderer;
this.gridStackService = gridStackService;
this.showGridBlock = false;
this.widgetAdded = new EventEmitter();
this.widgetChanged = new EventEmitter();
this.widgetRemoved = new EventEmitter();
this.dashboardInit = new EventEmitter();
this.addClass = true;
this.addedHandler = (event, items) => {
setTimeout(() => {
const all = items.map((item) => ({
node: this.addGridStackNodeCompatible(item),
widget: this.widgetComponents.toArray().find((widget) => item.el === widget.elem.nativeElement),
}));
// 处理ContentChildren数据推送进来的
all
.filter((wd) => wd.widget)
.forEach(({ node, widget }) => {
widget.handleChange(node);
});
});
};
this.changeHandler = (event, items) => {
if (!this.gridStack) {
return;
}
if (!this.gridStack._oneColumnMode) {
setTimeout(() => {
const all = items.map((item) => ({
node: this.addGridStackNodeCompatible(item),
widget: this.renderedWidgets.find((widget) => item.el === widget.elem.nativeElement),
}));
// 处理UI操作调整大小/调整位置
all
.filter((w) => w.widget)
.forEach(({ node, widget }) => {
widget.handleChange(node);
});
if (isDevMode() && all.some((w) => !w.widget)) {
console.warn('remove: something wrong, not handled by dashboard');
}
this.widgetChanged.emit(all.filter((w) => w.widget));
});
}
if (this.showGridBlock) {
this.gridStackService.setBackgroundGridBlockIfColumnChange();
}
};
this.removedHandler = (event, items) => {
const all = items.map((item) => ({
node: this.addGridStackNodeCompatible(item),
widget: this.renderedWidgets.find((widget) => item.el === widget.elem.nativeElement),
}));
// 不做处理仅提醒部分组件的移除不能被dashboard所理解
if (isDevMode() && all.some((wd) => !wd.widget)) {
console.warn('remove: something wrong, not handled by dashboard');
}
};
}
ngOnChanges(changes) {
if (this.gridStack) {
if (changes.static) {
this.gridStack.setStatic(!!this.static);
if (!this.static) {
this.gridStackService.resetAcceptWidget(this);
}
}
if (changes.float) {
this.gridStack.float(!!this.float);
}
if (changes.animate) {
this.gridStack.setAnimation(!!this.animate);
}
if (changes.widgetMoveable) {
this.gridStack.enableMove(!this.static && this.widgetMoveable);
}
if (changes.widgetResizable) {
this.gridStack.enableResize(!this.static && this.widgetResizable);
}
if (changes.column && this.column !== undefined) {
this.gridStack.column(this.column);
this.gridStackService.updateBackgroundGridBlock();
}
if (changes.maxRow) {
this.gridStack.engine.maxRow = this.maxRow || 0;
}
if (changes.cellHeight) {
this.gridStack.cellHeight(this.cellHeight, true);
this.gridStackService.updateBackgroundGridBlock();
}
if (changes.margin) {
this.gridStack.margin(this.margin);
this.gridStackService.updateBackgroundGridBlock();
}
}
}
ngAfterViewInit() {
this.finalOption = { ...DashBoardGridStackDefaultOption, ...this.initOptions, ...this.getTransformOption() };
this.renderer.addClass(this.el.nativeElement, 'grid-stack-' + this.finalOption.column);
this.gridStackService.gridStack = GridStack.init(this.finalOption, this.el.nativeElement);
this.gridStackService.resetAcceptWidget(this);
this.gridStackService.resetRemoveDrop(this);
this.gridStackService.updateBackgroundGridBlock();
this.renderedWidgets = this.widgetComponents.toArray();
setTimeout(() => {
this.renderedWidgets.forEach((widget) => widget.handleChange(this.addGridStackNodeCompatible(widget.elem.nativeElement.gridstackNode)));
});
this.widgetComponents.changes.subscribe((changes) => {
this.handleItemChanges(this.renderedWidgets, this.widgetComponents.toArray());
this.renderedWidgets = this.widgetComponents.toArray();
});
this.dashboardInit.emit();
}
ngOnDestroy() {
if (this.gridStackService && this.gridStackService.gridStack) {
this.gridStackService.removeBackgroundGridBlockStyleSheet();
this.gridStackService.gridStack.destroy();
}
}
getTransformOption() {
const option = {};
const getOppositeKeepUndefined = (v) => {
if (v === undefined) {
return undefined;
}
return !v;
};
Object.assign(option, {
column: this.column,
cellHeight: this.cellHeight,
margin: this.margin,
minRow: this.minRow,
maxRow: this.maxRow,
staticGrid: this.static,
float: this.float,
animate: this.animate,
disableDrag: getOppositeKeepUndefined(this.widgetMoveable),
disableResize: getOppositeKeepUndefined(this.widgetResizable),
});
Object.keys(option).forEach((k) => {
if (option[k] === undefined) {
delete option[k];
}
});
return option;
}
handleItemChanges(renderedItems, items) {
const itemsToAdd = items.filter((i) => !renderedItems.some((w) => w === i));
const itemsToRemove = renderedItems.filter((w) => !items.some((i) => w === i));
this.gridStack.batchUpdate();
itemsToAdd.forEach((i) => this.gridStack.addWidget(i.elem.nativeElement));
itemsToRemove.forEach((i) => this.gridStack.removeWidget(i.elem.nativeElement));
this.gridStack.commit();
}
batchUpdate() {
this.cdr.detach();
}
commit() {
this.cdr.detectChanges();
this.cdr.reattach();
}
handleDragInNode(node, origNode, widget) {
this.widgetAdded.emit([
{
node: {
...this.addGridStackNodeCompatible(node),
widgetData: widget.widgetData,
willItFit: this.willItFit(node.x, node.y, widget.width, widget.height),
},
// origNode: this.addGridStackNodeCompatible(origNode),
},
]);
}
handleDragOutNode(node, dropArea) {
this.widgetRemoved.emit([
{
widget: this.renderedWidgets.find((widget) => node.el === widget.elem.nativeElement),
node: {
...this.addGridStackNodeCompatible(node),
trashData: dropArea.trashData,
},
},
]);
}
addGridStackNodeCompatible(item) {
return {
...item,
...{
x: item.x,
y: item.y,
width: item.w,
height: item.h,
},
};
}
getCurrentColumn() {
if (!this.gridStack) {
return null;
}
return this.gridStack.getColumn();
}
getCurrentRow() {
if (!this.gridStack) {
return null;
}
return this.gridStack.getRow();
}
getCurrentColumnWidth() {
if (!this.gridStack) {
return null;
}
return this.gridStack.cellWidth();
}
getCurrentCellHeight() {
if (!this.gridStack) {
return null;
}
return this.gridStack.getCellHeight();
}
getCurrentMargin() {
if (!this.gridStack) {
return null;
}
return this.gridStack.getMargin();
}
compact() {
if (!this.gridStack) {
return;
}
this.gridStack.compact();
}
willItFit(x, y, width, height, autoPosition = false) {
if (!this.gridStack) {
return;
}
return this.gridStack.willItFit({ x, y, w: width, h: height, autoPosition });
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DashboardComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i1.GridStackService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DashboardComponent, selector: "d-dashboard", inputs: { initOptions: "initOptions", static: "static", float: "float", animate: "animate", widgetMoveable: "widgetMoveable", widgetResizable: "widgetResizable", showGridBlock: "showGridBlock", column: "column", minRow: "minRow", maxRow: "maxRow", cellHeight: "cellHeight", margin: "margin" }, outputs: { widgetAdded: "widgetAdded", widgetChanged: "widgetChanged", widgetRemoved: "widgetRemoved", dashboardInit: "dashboardInit" }, host: { listeners: { "added": "addedHandler($event,$event.detail)", "change": "changeHandler($event,$event.detail)", "removed": "removedHandler($event,$event.detail)" }, properties: { "class.d-dashboard-show-grid-block": "this.showGridBlock", "attr.gs-min-row": "this.minRow", "attr.gs-max-row": "this.maxRow", "class.grid-stack": "this.addClass" } }, providers: [GridStackService], queries: [{ propertyName: "widgetComponents", predicate: DashboardWidgetComponent, descendants: true }], exportAs: ["dDashboard"], usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;position:relative}:host.d-dashboard-show-grid-block:before{content:\"\";display:block;position:absolute;top:0;bottom:0!important;left:0;right:0;pointer-events:none}:host.d-dashboard-show-grid-block ::ng-deep .grid-stack-placeholder>.placeholder-content{opacity:.8}::ng-deep :root .grid-stack-item>.ui-resizable-handle{filter:none}::ng-deep .grid-stack{position:relative}::ng-deep .grid-stack.grid-stack-rtl{direction:ltr}::ng-deep .grid-stack.grid-stack-rtl>.grid-stack-item{direction:rtl}::ng-deep .grid-stack .grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important;text-align:center}::ng-deep .grid-stack>.grid-stack-item{min-width:8.3333333333%;position:absolute;padding:0}::ng-deep .grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}::ng-deep .grid-stack>.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle,::ng-deep .grid-stack>.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle{display:none}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-se,::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-sw{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-se{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:0}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:0}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px}::ng-deep .grid-stack>.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"0\"]{width:0%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"0\"]{left:0%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"0\"]{min-width:0%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"0\"]{max-width:0%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"1\"]{width:8.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"1\"]{left:8.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"1\"]{min-width:8.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"1\"]{max-width:8.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"2\"]{width:16.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"2\"]{left:16.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"2\"]{min-width:16.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"2\"]{max-width:16.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"3\"]{width:25%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"3\"]{left:25%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"3\"]{min-width:25%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"3\"]{max-width:25%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"4\"]{width:33.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"4\"]{left:33.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"4\"]{min-width:33.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"4\"]{max-width:33.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"5\"]{width:41.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"5\"]{left:41.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"5\"]{min-width:41.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"5\"]{max-width:41.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"6\"]{width:50%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"6\"]{left:50%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"6\"]{min-width:50%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"6\"]{max-width:50%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"7\"]{width:58.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"7\"]{left:58.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"7\"]{min-width:58.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"7\"]{max-width:58.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"8\"]{width:66.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"8\"]{left:66.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"8\"]{min-width:66.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"8\"]{max-width:66.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"9\"]{width:75%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"9\"]{left:75%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"9\"]{min-width:75%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"9\"]{max-width:75%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"10\"]{width:83.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"10\"]{left:83.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"10\"]{min-width:83.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"10\"]{max-width:83.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"11\"]{width:91.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"11\"]{left:91.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"11\"]{min-width:91.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"11\"]{max-width:91.6666666667%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"12\"]{width:100%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"12\"]{left:100%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"12\"]{min-width:100%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"12\"]{max-width:100%}::ng-deep .grid-stack.grid-stack-1>.grid-stack-item{min-width:100%}::ng-deep .grid-stack.grid-stack-1>.grid-stack-item[gs-w=\"1\"]{width:100%}::ng-deep .grid-stack.grid-stack-1>.grid-stack-item[gs-x=\"1\"]{left:100%}::ng-deep .grid-stack.grid-stack-1>.grid-stack-item[gs-min-w=\"1\"]{min-width:100%}::ng-deep .grid-stack.grid-stack-1>.grid-stack-item[gs-max-w=\"1\"]{max-width:100%}::ng-deep .grid-stack.grid-stack-animate,::ng-deep .grid-stack.grid-stack-animate .grid-stack-item{-webkit-transition:left .3s,top .3s,height .3s,width .3s;-moz-transition:left .3s,top .3s,height .3s,width .3s;-ms-transition:left .3s,top .3s,height .3s,width .3s;-o-transition:left .3s,top .3s,height .3s,width .3s;transition:left .3s,top .3s,height .3s,width .3s}::ng-deep .grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,::ng-deep .grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,::ng-deep .grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder{-webkit-transition:left 0s,top 0s,height 0s,width 0s;-moz-transition:left 0s,top 0s,height 0s,width 0s;-ms-transition:left 0s,top 0s,height 0s,width 0s;-o-transition:left 0s,top 0s,height 0s,width 0s;transition:left 0s,top 0s,height 0s,width 0s}::ng-deep .ui-draggable-dragging,::ng-deep .ui-resizable-resizing{z-index:100}::ng-deep .ui-draggable-dragging>.grid-stack-item-content,::ng-deep .ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}::ng-deep .ui-draggable-dragging{will-change:left,top;cursor:move}::ng-deep .ui-resizable-resizing{will-change:width,height}::ng-deep .grid-stack.grid-stack-2>.grid-stack-item{min-width:50%}::ng-deep .grid-stack.grid-stack-2>.grid-stack-item[gs-w=\"1\"]{width:50%}::ng-deep .grid-stack.grid-stack-2>.grid-stack-item[gs-x=\"1\"]{left:50%}::ng-deep .grid-stack.grid-stack-2>.grid-stack-item[gs-min-w=\"1\"]{min-width:50%}::ng-deep .grid-stack.grid-stack-2>.grid-stack-item[gs-max-w=\"1\"]{max-width:50%}::ng-deep .grid-stack.grid-stack-2>.grid-stack-item[gs-w=\"2\"]{width:100%}::ng-deep .grid-stack.grid-stack-2>.grid-stack-item[gs-x=\"2\"]{left:100%}::ng-deep .grid-stack.grid-stack-2>.grid-stack-item[gs-min-w=\"2\"]{min-width:100%}::ng-deep .grid-stack.grid-stack-2>.grid-stack-item[gs-max-w=\"2\"]{max-width:100%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item{min-width:33.3333333333%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item[gs-w=\"1\"]{width:33.3333333333%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item[gs-x=\"1\"]{left:33.3333333333%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item[gs-min-w=\"1\"]{min-width:33.3333333333%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item[gs-max-w=\"1\"]{max-width:33.3333333333%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item[gs-w=\"2\"]{width:66.6666666667%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item[gs-x=\"2\"]{left:66.6666666667%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item[gs-min-w=\"2\"]{min-width:66.6666666667%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item[gs-max-w=\"2\"]{max-width:66.6666666667%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item[gs-w=\"3\"]{width:100%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item[gs-x=\"3\"]{left:100%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item[gs-min-w=\"3\"]{min-width:100%}::ng-deep .grid-stack.grid-stack-3>.grid-stack-item[gs-max-w=\"3\"]{max-width:100%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item{min-width:25%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-w=\"1\"]{width:25%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-x=\"1\"]{left:25%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-min-w=\"1\"]{min-width:25%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-max-w=\"1\"]{max-width:25%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-w=\"2\"]{width:50%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-x=\"2\"]{left:50%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-min-w=\"2\"]{min-width:50%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-max-w=\"2\"]{max-width:50%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-w=\"3\"]{width:75%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-x=\"3\"]{left:75%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-min-w=\"3\"]{min-width:75%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-max-w=\"3\"]{max-width:75%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-w=\"4\"]{width:100%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-x=\"4\"]{left:100%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-min-w=\"4\"]{min-width:100%}::ng-deep .grid-stack.grid-stack-4>.grid-stack-item[gs-max-w=\"4\"]{max-width:100%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item{min-width:20%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-w=\"1\"]{width:20%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-x=\"1\"]{left:20%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-min-w=\"1\"]{min-width:20%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-max-w=\"1\"]{max-width:20%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-w=\"2\"]{width:40%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-x=\"2\"]{left:40%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-min-w=\"2\"]{min-width:40%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-max-w=\"2\"]{max-width:40%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-w=\"3\"]{width:60%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-x=\"3\"]{left:60%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-min-w=\"3\"]{min-width:60%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-max-w=\"3\"]{max-width:60%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-w=\"4\"]{width:80%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-x=\"4\"]{left:80%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-min-w=\"4\"]{min-width:80%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-max-w=\"4\"]{max-width:80%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-w=\"5\"]{width:100%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-x=\"5\"]{left:100%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-min-w=\"5\"]{min-width:100%}::ng-deep .grid-stack.grid-stack-5>.grid-stack-item[gs-max-w=\"5\"]{max-width:100%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item{min-width:16.6666666667%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-w=\"1\"]{width:16.6666666667%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-x=\"1\"]{left:16.6666666667%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-min-w=\"1\"]{min-width:16.6666666667%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-max-w=\"1\"]{max-width:16.6666666667%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-w=\"2\"]{width:33.3333333333%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-x=\"2\"]{left:33.3333333333%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-min-w=\"2\"]{min-width:33.3333333333%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-max-w=\"2\"]{max-width:33.3333333333%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-w=\"3\"]{width:50%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-x=\"3\"]{left:50%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-min-w=\"3\"]{min-width:50%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-max-w=\"3\"]{max-width:50%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-w=\"4\"]{width:66.6666666667%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-x=\"4\"]{left:66.6666666667%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-min-w=\"4\"]{min-width:66.6666666667%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-max-w=\"4\"]{max-width:66.6666666667%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-w=\"5\"]{width:83.3333333333%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-x=\"5\"]{left:83.3333333333%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-min-w=\"5\"]{min-width:83.3333333333%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-max-w=\"5\"]{max-width:83.3333333333%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-w=\"6\"]{width:100%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-x=\"6\"]{left:100%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-min-w=\"6\"]{min-width:100%}::ng-deep .grid-stack.grid-stack-6>.grid-stack-item[gs-max-w=\"6\"]{max-width:100%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item{min-width:14.2857142857%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-w=\"1\"]{width:14.2857142857%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-x=\"1\"]{left:14.2857142857%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-min-w=\"1\"]{min-width:14.2857142857%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-max-w=\"1\"]{max-width:14.2857142857%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-w=\"2\"]{width:28.5714285714%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-x=\"2\"]{left:28.5714285714%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-min-w=\"2\"]{min-width:28.5714285714%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-max-w=\"2\"]{max-width:28.5714285714%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-w=\"3\"]{width:42.8571428571%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-x=\"3\"]{left:42.8571428571%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-min-w=\"3\"]{min-width:42.8571428571%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-max-w=\"3\"]{max-width:42.8571428571%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-w=\"4\"]{width:57.1428571429%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-x=\"4\"]{left:57.1428571429%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-min-w=\"4\"]{min-width:57.1428571429%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-max-w=\"4\"]{max-width:57.1428571429%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-w=\"5\"]{width:71.4285714286%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-x=\"5\"]{left:71.4285714286%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-min-w=\"5\"]{min-width:71.4285714286%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-max-w=\"5\"]{max-width:71.4285714286%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-w=\"6\"]{width:85.7142857143%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-x=\"6\"]{left:85.7142857143%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-min-w=\"6\"]{min-width:85.7142857143%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-max-w=\"6\"]{max-width:85.7142857143%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-w=\"7\"]{width:100%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-x=\"7\"]{left:100%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-min-w=\"7\"]{min-width:100%}::ng-deep .grid-stack.grid-stack-7>.grid-stack-item[gs-max-w=\"7\"]{max-width:100%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item{min-width:12.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-w=\"1\"]{width:12.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-x=\"1\"]{left:12.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-min-w=\"1\"]{min-width:12.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-max-w=\"1\"]{max-width:12.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-w=\"2\"]{width:25%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-x=\"2\"]{left:25%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-min-w=\"2\"]{min-width:25%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-max-w=\"2\"]{max-width:25%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-w=\"3\"]{width:37.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-x=\"3\"]{left:37.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-min-w=\"3\"]{min-width:37.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-max-w=\"3\"]{max-width:37.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-w=\"4\"]{width:50%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-x=\"4\"]{left:50%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-min-w=\"4\"]{min-width:50%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-max-w=\"4\"]{max-width:50%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-w=\"5\"]{width:62.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-x=\"5\"]{left:62.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-min-w=\"5\"]{min-width:62.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-max-w=\"5\"]{max-width:62.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-w=\"6\"]{width:75%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-x=\"6\"]{left:75%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-min-w=\"6\"]{min-width:75%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-max-w=\"6\"]{max-width:75%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-w=\"7\"]{width:87.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-x=\"7\"]{left:87.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-min-w=\"7\"]{min-width:87.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-max-w=\"7\"]{max-width:87.5%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-w=\"8\"]{width:100%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-x=\"8\"]{left:100%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-min-w=\"8\"]{min-width:100%}::ng-deep .grid-stack.grid-stack-8>.grid-stack-item[gs-max-w=\"8\"]{max-width:100%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item{min-width:11.1111111111%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-w=\"1\"]{width:11.1111111111%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-x=\"1\"]{left:11.1111111111%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-min-w=\"1\"]{min-width:11.1111111111%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-max-w=\"1\"]{max-width:11.1111111111%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-w=\"2\"]{width:22.2222222222%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-x=\"2\"]{left:22.2222222222%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-min-w=\"2\"]{min-width:22.2222222222%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-max-w=\"2\"]{max-width:22.2222222222%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-w=\"3\"]{width:33.3333333333%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-x=\"3\"]{left:33.3333333333%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-min-w=\"3\"]{min-width:33.3333333333%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-max-w=\"3\"]{max-width:33.3333333333%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-w=\"4\"]{width:44.4444444444%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-x=\"4\"]{left:44.4444444444%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-min-w=\"4\"]{min-width:44.4444444444%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-max-w=\"4\"]{max-width:44.4444444444%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-w=\"5\"]{width:55.5555555556%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-x=\"5\"]{left:55.5555555556%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-min-w=\"5\"]{min-width:55.5555555556%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-max-w=\"5\"]{max-width:55.5555555556%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-w=\"6\"]{width:66.6666666667%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-x=\"6\"]{left:66.6666666667%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-min-w=\"6\"]{min-width:66.6666666667%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-max-w=\"6\"]{max-width:66.6666666667%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-w=\"7\"]{width:77.7777777778%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-x=\"7\"]{left:77.7777777778%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-min-w=\"7\"]{min-width:77.7777777778%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-max-w=\"7\"]{max-width:77.7777777778%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-w=\"8\"]{width:88.8888888889%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-x=\"8\"]{left:88.8888888889%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-min-w=\"8\"]{min-width:88.8888888889%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-max-w=\"8\"]{max-width:88.8888888889%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-w=\"9\"]{width:100%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-x=\"9\"]{left:100%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-min-w=\"9\"]{min-width:100%}::ng-deep .grid-stack.grid-stack-9>.grid-stack-item[gs-max-w=\"9\"]{max-width:100%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item{min-width:10%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-w=\"1\"]{width:10%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-x=\"1\"]{left:10%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-min-w=\"1\"]{min-width:10%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-max-w=\"1\"]{max-width:10%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-w=\"2\"]{width:20%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-x=\"2\"]{left:20%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-min-w=\"2\"]{min-width:20%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-max-w=\"2\"]{max-width:20%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-w=\"3\"]{width:30%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-x=\"3\"]{left:30%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-min-w=\"3\"]{min-width:30%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-max-w=\"3\"]{max-width:30%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-w=\"4\"]{width:40%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-x=\"4\"]{left:40%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-min-w=\"4\"]{min-width:40%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-max-w=\"4\"]{max-width:40%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-w=\"5\"]{width:50%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-x=\"5\"]{left:50%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-min-w=\"5\"]{min-width:50%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-max-w=\"5\"]{max-width:50%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-w=\"6\"]{width:60%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-x=\"6\"]{left:60%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-min-w=\"6\"]{min-width:60%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-max-w=\"6\"]{max-width:60%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-w=\"7\"]{width:70%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-x=\"7\"]{left:70%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-min-w=\"7\"]{min-width:70%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-max-w=\"7\"]{max-width:70%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-w=\"8\"]{width:80%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-x=\"8\"]{left:80%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-min-w=\"8\"]{min-width:80%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-max-w=\"8\"]{max-width:80%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-w=\"9\"]{width:90%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-x=\"9\"]{left:90%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-min-w=\"9\"]{min-width:90%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-max-w=\"9\"]{max-width:90%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-w=\"10\"]{width:100%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-x=\"10\"]{left:100%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-min-w=\"10\"]{min-width:100%}::ng-deep .grid-stack.grid-stack-10>.grid-stack-item[gs-max-w=\"10\"]{max-width:100%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item{min-width:9.0909090909%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-w=\"1\"]{width:9.0909090909%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-x=\"1\"]{left:9.0909090909%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-min-w=\"1\"]{min-width:9.0909090909%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-max-w=\"1\"]{max-width:9.0909090909%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-w=\"2\"]{width:18.1818181818%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-x=\"2\"]{left:18.1818181818%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-min-w=\"2\"]{min-width:18.1818181818%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-max-w=\"2\"]{max-width:18.1818181818%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-w=\"3\"]{width:27.2727272727%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-x=\"3\"]{left:27.2727272727%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-min-w=\"3\"]{min-width:27.2727272727%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-max-w=\"3\"]{max-width:27.2727272727%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-w=\"4\"]{width:36.3636363636%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-x=\"4\"]{left:36.3636363636%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-min-w=\"4\"]{min-width:36.3636363636%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-max-w=\"4\"]{max-width:36.3636363636%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-w=\"5\"]{width:45.4545454545%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-x=\"5\"]{left:45.4545454545%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-min-w=\"5\"]{min-width:45.4545454545%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-max-w=\"5\"]{max-width:45.4545454545%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-w=\"6\"]{width:54.5454545455%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-x=\"6\"]{left:54.5454545455%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-min-w=\"6\"]{min-width:54.5454545455%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-max-w=\"6\"]{max-width:54.5454545455%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-w=\"7\"]{width:63.6363636364%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-x=\"7\"]{left:63.6363636364%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-min-w=\"7\"]{min-width:63.6363636364%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-max-w=\"7\"]{max-width:63.6363636364%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-w=\"8\"]{width:72.7272727273%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-x=\"8\"]{left:72.7272727273%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-min-w=\"8\"]{min-width:72.7272727273%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-max-w=\"8\"]{max-width:72.7272727273%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-w=\"9\"]{width:81.8181818182%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-x=\"9\"]{left:81.8181818182%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-min-w=\"9\"]{min-width:81.8181818182%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-max-w=\"9\"]{max-width:81.8181818182%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-w=\"10\"]{width:90.9090909091%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-x=\"10\"]{left:90.9090909091%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-min-w=\"10\"]{min-width:90.9090909091%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-max-w=\"10\"]{max-width:90.9090909091%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-w=\"11\"]{width:100%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-x=\"11\"]{left:100%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-min-w=\"11\"]{min-width:100%}::ng-deep .grid-stack.grid-stack-11>.grid-stack-item[gs-max-w=\"11\"]{max-width:100%}::ng-deep .grid-stack .grid-stack-placeholder>.placeholder-content{border:1px dashed var(--devui-brand, #0a59f7);background-color:var(--devui-list-item-hover-bg, #f2f2f3)}::ng-deep .grid-stack>.grid-stack-item>.grid-stack-item-content{overflow-x:auto}::ng-deep .grid-stack-item-removing{opacity:.8;filter:blur(2px)}::ng-deep .grid-stack>.grid-stack-item.ui-resizable>.ui-resizable-se,::ng-deep .grid-stack>.grid-stack-item.ui-resizable>.ui-resizable-sw{transform:rotate(-45deg) translateY(-4px)}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-se,::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-sw{background:none}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-se:before,::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-sw:before{content:\"\";width:20px;height:20px;display:block;position:absolute;top:-20%;left:0;transform:rotate(45deg) scale(.8);background-image:linear-gradient(135deg,transparent 0,transparent 70%,var(--devui-icon-fill, #595959) 70%,var(--devui-icon-fill, #595959) 77%,transparent 77%,transparent 83%,var(--devui-icon-fill, #595959) 83%,var(--devui-icon-fill, #595959) 90%,transparent 90%,transparent 100%);background-size:100%;background-repeat:no-repeat}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DashboardComponent, decorators: [{
type: Component,
args: [{ selector: 'd-dashboard', providers: [GridStackService], exportAs: 'dDashboard', preserveWhitespaces: false, template: "<ng-content></ng-content>\n", styles: [":host{display:block;position:relative}:host.d-dashboard-show-grid-block:before{content:\"\";display:block;position:absolute;top:0;bottom:0!important;left:0;right:0;pointer-events:none}:host.d-dashboard-show-grid-block ::ng-deep .grid-stack-placeholder>.placeholder-content{opacity:.8}::ng-deep :root .grid-stack-item>.ui-resizable-handle{filter:none}::ng-deep .grid-stack{position:relative}::ng-deep .grid-stack.grid-stack-rtl{direction:ltr}::ng-deep .grid-stack.grid-stack-rtl>.grid-stack-item{direction:rtl}::ng-deep .grid-stack .grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important;text-align:center}::ng-deep .grid-stack>.grid-stack-item{min-width:8.3333333333%;position:absolute;padding:0}::ng-deep .grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}::ng-deep .grid-stack>.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle,::ng-deep .grid-stack>.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle{display:none}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-se,::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-sw{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCIgdmlld0JveD0iMCAwIDUxMS42MjYgNTExLjYyNyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTExLjYyNiA1MTEuNjI3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTMyOC45MDYsNDAxLjk5NGgtMzYuNTUzVjEwOS42MzZoMzYuNTUzYzQuOTQ4LDAsOS4yMzYtMS44MDksMTIuODQ3LTUuNDI2YzMuNjEzLTMuNjE1LDUuNDIxLTcuODk4LDUuNDIxLTEyLjg0NSAgIGMwLTQuOTQ5LTEuODAxLTkuMjMxLTUuNDI4LTEyLjg1MWwtNzMuMDg3LTczLjA5QzI2NS4wNDQsMS44MDksMjYwLjc2LDAsMjU1LjgxMywwYy00Ljk0OCwwLTkuMjI5LDEuODA5LTEyLjg0Nyw1LjQyNCAgIGwtNzMuMDg4LDczLjA5Yy0zLjYxOCwzLjYxOS01LjQyNCw3LjkwMi01LjQyNCwxMi44NTFjMCw0Ljk0NiwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDVjMy42MTksMy42MTcsNy45MDEsNS40MjYsMTIuODUsNS40MjYgICBoMzYuNTQ1djI5Mi4zNThoLTM2LjU0MmMtNC45NTIsMC05LjIzNSwxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MjEtNS40MjQsNy45MDUtNS40MjQsMTIuODU0ICAgYzAsNC45NDUsMS44MDcsOS4yMjcsNS40MjQsMTIuODQ3bDczLjA4OSw3My4wODhjMy42MTcsMy42MTcsNy44OTgsNS40MjQsMTIuODQ3LDUuNDI0YzQuOTUsMCw5LjIzNC0xLjgwNywxMi44NDktNS40MjQgICBsNzMuMDg3LTczLjA4OGMzLjYxMy0zLjYyLDUuNDIxLTcuOTAxLDUuNDIxLTEyLjg0N2MwLTQuOTQ4LTEuODA4LTkuMjMyLTUuNDIxLTEyLjg1NCAgIEMzMzguMTQyLDQwMy44MDIsMzMzLjg1Nyw0MDEuOTk0LDMyOC45MDYsNDAxLjk5NHoiIGZpbGw9IiM2NjY2NjYiLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K);background-repeat:no-repeat;background-position:center;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-se{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:0}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:0}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px}::ng-deep .grid-stack>.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px}::ng-deep .grid-stack>.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"0\"]{width:0%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"0\"]{left:0%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"0\"]{min-width:0%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"0\"]{max-width:0%}::ng-deep .grid-stack>.grid-stack-item[gs-w=\"1\"]{width:8.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-x=\"1\"]{left:8.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-min-w=\"1\"]{min-width:8.3333333333%}::ng-deep .grid-stack>.grid-stack-item[gs-max-w=\"1\"]{max-width:8.3333333