ng-devui
Version:
DevUI components based on Angular
721 lines (716 loc) • 117 kB
JavaScript
import * as i0 from '@angular/core';
import { isDevMode, Injectable, EventEmitter, Component, ChangeDetectionStrategy, Optional, HostBinding, Input, Output, ContentChildren, HostListener, Directive, NgModule } from '@angular/core';
import { DDGridStack, Utils, GridStack } from 'gridstack';
import { DDElement } from 'gridstack/dist/dd-element';
import { CommonModule } from '@angular/common';
import { DomPortalOutlet, TemplatePortal } from '@angular/cdk/portal';
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent);
const dragDropOption = {
alwaysShowResizeHandle: isMobile,
resizable: {
autoHide: !isMobile,
handles: 'se'
},
acceptWidgets: '.grid-stack-new-item',
dragIn: '.grid-stack-new-item', // class that can be dragged from outside
dragInOptions: { revert: 'invalid', scroll: true, appendTo: 'body', helper: 'clone' },
removable: '.grid-stack-library-trash', // drag-out delete class
removeTimeout: 10,
};
const displayOption = {
column: 12,
cellHeight: 160,
margin: 8,
float: true,
};
const DashBoardGridStackDefaultOption = {
...displayOption,
...dragDropOption,
disableDrag: false,
disableResize: false,
animate: true
};
class GridStackService {
constructor() {
this._itemRemoving = (el, remove) => {
const node = el ? el.gridstackNode : undefined;
if (!node || !node.grid) {
return;
}
remove ? (node._isAboutToRemove = true) : delete node._isAboutToRemove;
remove ? el.classList.add('grid-stack-item-removing') : el.classList.remove('grid-stack-item-removing');
};
}
getDD() {
return DDGridStack.get();
}
static cleanDragIn(el) {
if (el.classList.contains('ui-draggable')) {
DDGridStack.get().draggable(el, 'destroy');
}
}
static isDraggable(el) {
return Boolean(el.classList.contains('ui-draggable'));
}
static isDroppable(el) {
return Boolean(el.classList.contains('ui-droppable'));
}
static enableDrag(el) {
if (!GridStackService.isDraggable(el)) {
return;
}
DDGridStack.get().draggable(el, 'enable');
}
static disableDrag(el) {
if (!GridStackService.isDraggable(el)) {
return;
}
DDGridStack.get().draggable(el, 'disable');
}
static enableDrop(el) {
if (!GridStackService.isDroppable(el)) {
return;
}
DDGridStack.get().droppable(el, 'enable');
}
static disableDrop(el) {
if (!GridStackService.isDroppable(el)) {
return;
}
DDGridStack.get().droppable(el, 'disable');
}
resetAcceptWidget(dashboard) {
if (!this.gridStack) {
if (isDevMode()) {
console.warn('call resetAcceptWidget after gridStack init');
}
return;
}
if (this.gridStack.opts.staticGrid || !this.gridStack.opts.acceptWidgets) {
return;
}
if (!this.getDD().isDroppable(this.gridStack.el)) {
const that = this.gridStack;
this.getDD().droppable(that.el, {
accept: (el) => {
const node = el.gridstackNode;
// set accept drop to true on ourself (which we ignore) so we don't get "can't drop" icon in HTML5 mode while moving
if (node && node.grid === that) {
return true;
}
if (!that.opts.acceptWidgets) {
return false;
}
// check for accept method or class matching
let canAccept = true;
if (typeof that.opts.acceptWidgets === 'function') {
canAccept = that.opts.acceptWidgets(el);
}
else {
const selector = that.opts.acceptWidgets === true ? '.grid-stack-item' : that.opts.acceptWidgets;
canAccept = el.matches(selector);
}
// finally check to make sure we actually have space left #1571
if (canAccept && node && that.opts.maxRow) {
const n = { w: node.w, h: node.h, minW: node.minW, minH: node.minH }; // only width/height matters and autoPosition
canAccept = that.engine.willItFit(n);
}
return canAccept;
},
});
}
this.getDD()
.off(this.gridStack.el, 'dropout')
.on(this.gridStack.el, 'dropout', (event, el, helper) => {
// 覆盖这个方法是因为 float模式下 dropout影响了原来的布局
const that = this.gridStack;
const node = el.gridstackNode;
if (!node.grid || node.grid === that) {
that._leave(el, helper);
}
this.getDD().off(el, 'drag');
return false;
})
.off(this.gridStack.el, 'drop')
.on(this.gridStack.el, 'drop', (event, el, helper) => {
// 覆盖这个方法是因为 drop的情况不想让它放进去而是只发射通知
const that = this.gridStack;
const node = el.gridstackNode;
if (node && node.grid === that && !node._isExternal) {
return false;
}
const wasAdded = !!that.placeholder.parentElement;
that.placeholder.remove();
const origNode = el._gridstackNodeOrig;
delete el._gridstackNodeOrig;
if (!node) {
return false;
}
if (wasAdded) {
that.engine.cleanupNode(node); // 好像没用
node.grid = that;
}
if (helper !== el) {
helper.remove();
el.gridstackNode = origNode; // original item (left behind) is re-stored to pre dragging as the node now has drop info
}
else {
Utils.removePositioningStyles(el);
}
this.getDD().off(el, 'drag');
that.engine.removeNode(node);
that._updateContainerHeight();
dashboard.handleDragInNode(node, origNode, this.dragInWidget);
});
}
resetRemoveDrop(dashboard) {
if (!this.gridStack) {
if (isDevMode()) {
console.warn('call resetDragDrop after gridStack init');
}
return;
}
if (!(!this.gridStack.opts.staticGrid && typeof this.gridStack.opts.removable === 'string')) {
return;
}
const trashZone = document.querySelector(this.gridStack.opts.removable);
if (!trashZone) {
return;
}
if (this.getDD().isDroppable(trashZone)) {
// 清理掉了dropover和dropout 直接重新绑定对应的逻辑
this.getDD().off(trashZone, 'dropover').off(trashZone, 'dropout');
}
}
/* 设置新的可拖入的widget */
setupDragIn(el, widget, helper, notify) {
const _ddElement = DDElement.init(el);
_ddElement.setupDraggable({
...widget.targetDashboard.finalOption.dragInOptions,
...{ helper: helper || widget.targetDashboard.finalOption.dragInOptions.helper, handle: this.gridStack.opts.handle },
...{
start: () => {
this.dragInWidget = widget;
if (notify) {
notify('dragStart')();
}
},
stop: () => {
// TODO: 升级gridstack@6.0.0后drop内dragInWidget一直为undefined ,因此删掉了 this.dragInWidget = undefined;
if (notify) {
notify('dragStop')();
}
},
},
});
}
destroyDragIn(el) {
this.getDD().draggable(el, 'destroy');
}
/* 设置自定义的回收站 */
setupRemoveDropArea(trashZone, dashboard, trash) {
if (!this.gridStack) {
if (isDevMode()) {
console.warn('call setupRemoveDropArea after gridStack init');
}
return;
}
const trashEl = trashZone;
this.getDD()
.droppable(trashEl, this.gridStack.opts.removableOptions)
.on(trashEl, 'dropover', (event, el) => this._itemRemoving(el, true))
.on(trashEl, 'dropout', (event, el) => this._itemRemoving(el, false));
}
/* 清理自定义的回收站 */
destroyRemoveDropAreas(trashZone) {
if (!this.gridStack) {
console.warn('call destroyRemoveDropAreas after gridStack init');
return;
}
const that = this.gridStack;
if (!this.getDD().isDroppable(trashZone)) {
return;
}
this.getDD().off(trashZone, 'dropover').off(trashZone, 'dropout').off(trashZone, 'drop');
}
// 设置背景
updateBackgroundGridBlock() {
if (this.gridStack) {
if (!this.lastStyleSheet) {
this.lastStyleSheet = Utils.createStylesheet(`d-dashboard-${this.gridStack.opts._styleSheetClass}`, this.gridStack.el.parentElement);
}
else {
this.lastStyleSheet.removeRule(0);
}
const column = this.gridStack.opts.column;
const margin = this.gridStack.opts.margin;
const marginUnit = this.gridStack.opts.marginUnit;
const cellHeight = this.gridStack.opts.cellHeight;
const cellHeightUnit = this.gridStack.opts.cellHeightUnit;
const prefix = `.${this.gridStack.opts._styleSheetClass}`;
if (!this.lastStyleSheet) {
return;
}
Utils.addCSSRule(this.lastStyleSheet, `${prefix}.d-dashboard-show-grid-block::before`, `
background-image:
linear-gradient(#fff 0, #fff ${margin * 2}${marginUnit},
transparent ${margin * 2}${marginUnit}, transparent 100%),
linear-gradient(90deg, #fff 0, #fff ${margin * 2}${marginUnit},
transparent ${margin * 2}${marginUnit}, transparent 100%),
linear-gradient(#f8f8f8 0 , #f8f8f8 100%);
background-image:
linear-gradient(var(--devui-base-bg, #fff) 0, var(--devui-base-bg, #fff) ${margin * 2}${marginUnit},
transparent ${margin * 2}${marginUnit}, transparent 100%),
linear-gradient(90deg, var(--devui-base-bg, #fff) 0, var(--devui-base-bg, #fff) ${margin * 2}${marginUnit},
transparent ${margin * 2}${marginUnit}, transparent 100%),
linear-gradient(var(--devui-area, #f8f8f8) 0 , var(--devui-area, #f8f8f8) 100%);
background-size: ${100 / column}% ${cellHeight}${cellHeightUnit};
background-position: -${margin}${marginUnit} -${margin}${marginUnit};
`);
this.lastColumn = column;
}
}
setBackgroundGridBlockIfColumnChange() {
if (this.gridStack?.opts?.column !== this.lastColumn) {
this.updateBackgroundGridBlock();
}
}
removeBackgroundGridBlockStyleSheet() {
if (this.lastStyleSheet) {
Utils.removeStylesheet(`d-dashboard-${this.gridStack.opts._class}`);
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GridStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GridStackService }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: GridStackService, decorators: [{
type: Injectable
}] });
/* eslint-disable */
// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
var polyfill = ((...rest) => {
const arr = rest[0];
arr.forEach((item) => {
if (Object.prototype.hasOwnProperty.call(item, 'append')) {
return;
}
Object.defineProperty(item, 'append', {
configurable: true,
enumerable: true,
writable: true,
value: function append() {
const argArr = [...rest];
const docFrag = document.createDocumentFragment();
argArr.forEach((argItem) => {
const isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
});
this.appendChild(docFrag);
},
});
});
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);
class DashboardWidgetComponent {
static { this.autoNumberedId = 0; }
constructor(elem, gridStackService) {
this.elem = elem;
this.gridStackService = gridStackService;
this.xChange = new EventEmitter();
this.yChange = new EventEmitter();
this.widthChange = new EventEmitter();
this.heightChange = new EventEmitter();
this.widgetInit = new EventEmitter(true);
this.widgetResize = new EventEmitter(true);
this.widgetDestroy = new EventEmitter();
this.hostBinding = true;
this.generatedId = (DashboardWidgetComponent.autoNumberedId++).toString();
}
ngOnChanges(changes) {
if (this.gridStackService && this.gridStackService.gridStack) {
if (changes.x || changes.y || changes.width || changes.height) {
this.gridStackService.gridStack.update(this.elem.nativeElement, { x: this.x, y: this.y, w: this.width, h: this.height });
}
if (changes.noResize) {
this.gridStackService.gridStack.resizable(this.elem.nativeElement, !this.noResize);
}
if (changes.noMove) {
this.gridStackService.gridStack.movable(this.elem.nativeElement, !this.noMove);
}
if (changes.locked) {
this.gridStackService.gridStack.update(this.elem.nativeElement, { locked: !!this.locked });
}
if (changes.maxWidth) {
this.gridStackService.gridStack.update(this.elem.nativeElement, { maxW: this.maxWidth });
}
if (changes.maxHeight) {
this.gridStackService.gridStack.update(this.elem.nativeElement, { maxH: this.maxHeight });
}
if (changes.minWidth) {
this.gridStackService.gridStack.update(this.elem.nativeElement, { minW: this.minWidth });
}
if (changes.minHeight) {
this.gridStackService.gridStack.update(this.elem.nativeElement, { minH: this.minHeight });
}
}
}
ngAfterViewInit() {
this.widgetInit.emit();
}
ngOnDestroy() {
this.widgetDestroy.emit();
}
handleChange({ x, y, width, height }) {
const change = { x, y, width, height };
const beforeChange = { width: this.width, height: this.height };
Object.keys(change).forEach((key) => {
if (change[key] !== this[key]) {
this[key] = change[key];
const eventEmitter = this[key + 'Change'];
if (eventEmitter) {
eventEmitter.emit(change[key]);
}
}
});
if (change.width !== beforeChange.width || change.height !== beforeChange.height) {
this.widgetResize.emit({ width, height });
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DashboardWidgetComponent, deps: [{ token: i0.ElementRef }, { token: GridStackService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DashboardWidgetComponent, selector: "d-dashboard-widget", inputs: { x: "x", y: "y", width: "width", height: "height", id: "id", maxWidth: "maxWidth", maxHeight: "maxHeight", minWidth: "minWidth", minHeight: "minHeight", noResize: "noResize", noMove: "noMove", autoPosition: "autoPosition", locked: "locked", widgetData: "widgetData" }, outputs: { xChange: "xChange", yChange: "yChange", widthChange: "widthChange", heightChange: "heightChange", widgetInit: "widgetInit", widgetResize: "widgetResize", widgetDestroy: "widgetDestroy" }, host: { properties: { "attr.gs-x": "this.x", "attr.gs-y": "this.y", "attr.gs-w": "this.width", "attr.gs-h": "this.height", "attr.gs-id": "this.id", "attr.gs-max-w": "this.maxWidth", "attr.gs-max-h": "this.maxHeight", "attr.gs-min-w": "this.minWidth", "attr.gs-min-h": "this.minHeight", "attr.gs-no-resize": "this.noResize", "attr.gs-no-move": "this.noMove", "attr.gs-auto-position": "this.autoPosition", "attr.gs-locked": "this.locked", "class.grid-stack-item": "this.hostBinding" } }, exportAs: ["dDashboardWidget"], usesOnChanges: true, ngImport: i0, template: "<div class=\"grid-stack-item-content d-dashboard-widget devui-scrollbar\">\n <ng-content></ng-content>\n</div>\n", styles: [".ui-draggable-dragging :host>*{pointer-events:none!important}.d-dashboard-widget{border:1px solid transparent;box-shadow:0 2px 8px 0 var(--devui-light-shadow, rgba(0, 0, 0, .08));background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);transition:box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}:host.ui-resizable-resizing .d-dashboard-widget,:host.ui-draggable-dragging .d-dashboard-widget{opacity:1}:host.ui-draggable-dragging .d-dashboard-widget,.grid-stack:not(.grid-stack-static) :host.ui-draggable:not(.ui-draggable-disabled) .d-dashboard-widget{cursor:pointer}.ui-draggable-dragging :host .d-dashboard-widget,:host.ui-draggable-dragging .d-dashboard-widget,.grid-stack:not(.grid-stack-static) :host:hover .d-dashboard-widget{transform:translateY(-4px);box-shadow:0 4px 8px 0 var(--devui-shadow, rgba(0, 0, 0, .16))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DashboardWidgetComponent, decorators: [{
type: Component,
args: [{ selector: 'd-dashboard-widget', changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'dDashboardWidget', preserveWhitespaces: false, template: "<div class=\"grid-stack-item-content d-dashboard-widget devui-scrollbar\">\n <ng-content></ng-content>\n</div>\n", styles: [".ui-draggable-dragging :host>*{pointer-events:none!important}.d-dashboard-widget{border:1px solid transparent;box-shadow:0 2px 8px 0 var(--devui-light-shadow, rgba(0, 0, 0, .08));background:var(--devui-base-bg, #ffffff);border-radius:var(--devui-border-radius, 2px);transition:box-shadow var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1)),transform var(--devui-animation-duration-slow, .3s) var(--devui-animation-ease-in-out-smooth, cubic-bezier(.645, .045, .355, 1))}:host.ui-resizable-resizing .d-dashboard-widget,:host.ui-draggable-dragging .d-dashboard-widget{opacity:1}:host.ui-draggable-dragging .d-dashboard-widget,.grid-stack:not(.grid-stack-static) :host.ui-draggable:not(.ui-draggable-disabled) .d-dashboard-widget{cursor:pointer}.ui-draggable-dragging :host .d-dashboard-widget,:host.ui-draggable-dragging .d-dashboard-widget,.grid-stack:not(.grid-stack-static) :host:hover .d-dashboard-widget{transform:translateY(-4px);box-shadow:0 4px 8px 0 var(--devui-shadow, rgba(0, 0, 0, .16))}\n"] }]
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: GridStackService, decorators: [{
type: Optional
}] }], propDecorators: { x: [{
type: HostBinding,
args: ['attr.gs-x']
}, {
type: Input
}], xChange: [{
type: Output
}], y: [{
type: HostBinding,
args: ['attr.gs-y']
}, {
type: Input
}], yChange: [{
type: Output
}], width: [{
type: HostBinding,
args: ['attr.gs-w']
}, {
type: Input
}], widthChange: [{
type: Output
}], height: [{
type: HostBinding,
args: ['attr.gs-h']
}, {
type: Input
}], heightChange: [{
type: Output
}], id: [{
type: HostBinding,
args: ['attr.gs-id']
}, {
type: Input
}], maxWidth: [{
type: HostBinding,
args: ['attr.gs-max-w']
}, {
type: Input
}], maxHeight: [{
type: HostBinding,
args: ['attr.gs-max-h']
}, {
type: Input
}], minWidth: [{
type: HostBinding,
args: ['attr.gs-min-w']
}, {
type: Input
}], minHeight: [{
type: HostBinding,
args: ['attr.gs-min-h']
}, {
type: Input
}], noResize: [{
type: HostBinding,
args: ['attr.gs-no-resize']
}, {
type: Input
}], noMove: [{
type: HostBinding,
args: ['attr.gs-no-move']
}, {
type: Input
}], autoPosition: [{
type: HostBinding,
args: ['attr.gs-auto-position']
}, {
type: Input
}], locked: [{
type: HostBinding,
args: ['attr.gs-locked']
}, {
type: Input
}], widgetData: [{
type: Input
}], widgetInit: [{
type: Output
}], widgetResize: [{
type: Output
}], widgetDestroy: [{
type: Output
}], hostBinding: [{
type: HostBinding,
args: ['class.grid-stack-item']
}] } });
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: 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-stac