@acorex/components 19.8.0-next.1 → 19.8.0-next.11

package/fesm2022/acorex-components-grid-layout-builder.mjs

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { inject, ElementRef, input, Component, ChangeDetectionStrategy, ViewEncapsulation, contentChildren, computed, NgZone, signal, output, model, effect, NgModule } from '@angular/core';
+import { merge } from 'lodash-es';
 
 /**
  * A component that represents a widget within the grid layout. It serves as an individual
@@ -175,7 +176,7 @@ class AXGridLayoutContainerComponent {
         /**
          * A writable signal representing the current state of the grid.
          */
-        this.grid = signal(null);
+        this.grid = signal(undefined);
         /**
          * A reference to the native element representing the grid container.
          */
@@ -341,67 +342,49 @@ class AXGridLayoutContainerComponent {
             grid.offAll();
         }
     }
-    // Public Methods
+    //PUBLIC SETTER METHODS
     /**
-     * Adds a widget to the grid layout. Optionally arranges the grid after adding the widget.
-     *
-     * @param item The widget to add.
-     * @param withAutoArrange If true, the grid will be auto-arranged after adding the widget.
-     * @returns The added widget's layout node.
+     * Creates a new widget and returns it.
+     * @param w - Widget position/size options.
+     * @returns The created widget's HTML element, or `undefined` if the grid is not initialized.
      */
-    add(item, withAutoArrange = false) {
+    addWidget(w, withAutoArrange = false) {
         if (withAutoArrange) {
-            this.autoArrange();
+            this.compact();
         }
-        return this.grid().addWidget(item).gridstackNode;
-    }
-    /**
-     * Removes a widget from the grid layout.
-     *
-     * @param element The widget element to remove.
-     * @returns The updated grid instance.
-     */
-    remove(element) {
-        return this.grid().removeWidget(element);
+        return this.grid()?.addWidget(w);
     }
     /**
-     * Clears all widgets from the grid layout.
-     *
-     * @returns The updated grid instance.
+     * Re-layout grid items to reclaim any empty space.
+     * @param layout - Compaction mode: 'list' or 'compact'. Default is 'compact'.
+     * @param doSort - Whether to sort items automatically. Default is `true`.
      */
-    clear() {
-        return this.grid().removeAll();
+    compact(layout = 'compact', doSort = true) {
+        this.grid()?.compact(layout, doSort);
     }
     /**
-     * Saves the current state of the grid and its widgets.
-     *
-     * @param saveContent If true, the content of the widgets will be saved.
-     * @param saveGridOpt If true, the grid options will be saved.
-     * @param saveCallback Optional callback to invoke after saving the grid state.
-     * @returns The saved grid layout options.
+     * Updates the current cell height.
+     * @param val - The new cell height value.
+     * @param update - Whether to rebuild the internal CSS stylesheet. Default is `true`.
      */
-    save(saveContent = false, saveGridOpt = true, saveCallback) {
-        return (this.serializedData = this.grid().save(saveContent, saveGridOpt, saveCallback));
+    setCellHeight(val, update = true) {
+        this.grid()?.cellHeight(val, update);
     }
     /**
-     * Loads a serialized grid layout configuration into the grid.
-     *
-     * @param serializedData The serialized grid options to load.
-     * @param cleanBeforeLoad If true, the grid will be cleared before loading the new layout.
-     * @returns A promise that resolves to the loaded grid instance.
+     * Sets the number of columns in the grid and updates existing widgets to conform to the new layout.
+     * @param column - Number of columns (must be > 0). Default is 12.
+     * @param layout - Re-layout behavior: 'list', 'compact', 'moveScale', 'move', 'scale', 'none'.
+     *                Default is 'moveScale'.
      */
-    async load(serializedData = this.serializedData, cleanBeforeLoad = true) {
-        if (cleanBeforeLoad) {
-            this.grid().removeAll();
-        }
-        const { GridStack } = await import('gridstack');
-        return GridStack.addGrid(this.el, serializedData);
+    setColumn(column, layout = 'moveScale') {
+        this.grid()?.column(column, layout);
     }
     /**
-     * Automatically arranges the widgets within the grid layout.
+     * Destroys the grid instance.
+     * @param removeDOM - If `false`, nodes and grid will not be removed from the DOM. Default is `true`.
      */
-    autoArrange() {
-        this.grid().compact();
+    destroy(removeDOM = true) {
+        this.grid()?.destroy(removeDOM);
     }
     /**
      * Sets whether widgets in the grid can be moved (dragged).
@@ -409,7 +392,7 @@ class AXGridLayoutContainerComponent {
      * @param state If true, widgets are movable; otherwise, they are locked.
      * @param recurse If true, the setting is applied to nested widgets as well.
      */
-    setlockable(state, recurse) {
+    setMovable(state, recurse) {
         this.grid().enableMove(state, recurse);
     }
     /**
@@ -422,12 +405,75 @@ class AXGridLayoutContainerComponent {
         this.grid().enableResize(state, recurse);
     }
     /**
-     * Retrieves all the child nodes (widgets) in the grid layout.
+     * Sets or gets the floating behavior of widgets.
+     * @param val - If provided, sets floating behavior (`true` or `false`). If not provided, returns the current value.
+     * @returns The current floating behavior if `val` is not provided.
+     */
+    setFloat(val) {
+        this.grid()?.float(val);
+    }
+    /**
+     * Sets the margin (gap) between grid items and their content.
+     * @param value - The margin value (number or string).
+     */
+    setMargin(value) {
+        this.grid()?.margin(value);
+    }
+    /**
+     * Removes a widget from the grid.
+     * @param el - The widget to remove.
+     * @param removeDOM - If `false`, the widget won't be removed from the DOM. Default is `true`.
+     * @param triggerEvent - If `false`, no 'removed' callbacks will be called. Default is `true`.
+     */
+    removeWidget(el, removeDOM = true, triggerEvent = true) {
+        this.grid()?.removeWidget(el, removeDOM, triggerEvent);
+    }
+    /**
+     * Removes all widgets from the grid.
+     * @param removeDOM - If `false`, widgets won't be removed from the DOM. Default is `true`.
+     */
+    removeAll(removeDOM = true) {
+        this.grid()?.removeAll(removeDOM);
+    }
+    /**
+     * Rotates a widget by swapping its width and height.
+     * @param els - The widget or selector of widgets to rotate.
+     * @param relative - Optional pixel coordinates to rotate around (keeps that cell under the cursor).
+     */
+    setRotate(element) {
+        this.grid().rotate(element);
+    }
+    /**
+     * Toggles the grid animation state.
+     * @param doAnimate - If `true`, the grid will animate.
+     */
+    setAnimation(doAnimate) {
+        this.grid()?.setAnimation(doAnimate);
+    }
+    /**
+     * Saves the current state of the grid and its widgets.
      *
-     * @returns An array of grid layout nodes representing the widgets.
+     * @param saveContent If true, the content of the widgets will be saved.
+     * @param saveGridOpt If true, the grid options will be saved.
+     * @param saveCallback Optional callback to invoke after saving the grid state.
+     * @returns The saved grid layout options.
      */
-    getChildren() {
-        return this.grid().engine.nodes;
+    save(saveContent = false, saveGridOpt = true, saveCallback) {
+        return (this.serializedData = this.grid().save(saveContent, saveGridOpt, saveCallback));
+    }
+    /**
+     * Loads a serialized grid layout configuration into the grid.
+     *
+     * @param serializedData The serialized grid options to load.
+     * @param cleanBeforeLoad If true, the grid will be cleared before loading the new layout.
+     * @returns A promise that resolves to the loaded grid instance.
+     */
+    async load(serializedData = this.serializedData, cleanBeforeLoad = true) {
+        if (cleanBeforeLoad) {
+            this.grid().removeAll();
+        }
+        const { GridStack } = await import('gridstack');
+        return GridStack.addGrid(this.el, serializedData);
     }
     /**
      * Sets up draggable functionality for external elements to be added to the grid.
@@ -448,28 +494,14 @@ class AXGridLayoutContainerComponent {
     }
     /**
      * Sets grid layout options.
-     *
      * @param options The new grid layout options to apply.
-     */
-    setOption(options) {
-        this.grid().opts = options;
-    }
-    /**
-     * Rotates a specific widget element in the grid layout.
-     *
-     * @param element The widget element to rotate.
-     */
-    rotate(element) {
-        this.grid().rotate(element);
-    }
-    /**
-     * Sets the number of columns in the grid layout.
      *
-     * @param count The number of columns to set.
+     * `Experimental`
      */
-    setColumn(count) {
-        this.grid().column(count, 'moveScale');
+    setOption(options) {
+        this.grid().opts = merge({}, this.grid().opts, options);
     }
+    // PUBLIC GETTER METHODS //
     /**
      * Retrieves the current grid layout options.
      *
@@ -478,14 +510,22 @@ class AXGridLayoutContainerComponent {
     getOptions() {
         return this.grid().opts;
     }
+    /**
+     * Retrieves all the child nodes (widgets) in the grid layout.
+     *
+     * @returns An array of grid layout nodes representing the widgets.
+     */
+    getChildren() {
+        return this.grid().engine.nodes;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXGridLayoutContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.0.3", type: AXGridLayoutContainerComponent, isStandalone: false, selector: "ax-grid-layout-container", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, isEmpty: { classPropertyName: "isEmpty", publicName: "isEmpty", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAdded: "onAdded", onChange: "onChange", onDisable: "onDisable", onDrag: "onDrag", onDragStart: "onDragStart", onDragStop: "onDragStop", onDropped: "onDropped", onEnable: "onEnable", onRemoved: "onRemoved", onResize: "onResize", onResizeStart: "onResizeStart", onResizeStop: "onResizeStop", isRendered: "isRendered", isEmpty: "isEmptyChange" }, queries: [{ propertyName: "items", predicate: AXGridLayoutWidgetComponent, isSignal: true }], ngImport: i0, template: ` <ng-template #container></ng-template>
-    <ng-content></ng-content>`, isInline: true, styles: [".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle,.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,top;cursor:move}.grid-stack-item.ui-draggable-disabled{cursor:not-allowed}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing,.grid-stack-animate .grid-stack-item.grid-stack-placeholder{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack>.grid-stack-item[gs-x=\"0\"]{left:0%}.gs-12>.grid-stack-item{width:8.333%}.gs-12>.grid-stack-item[gs-x=\"1\"]{left:8.333%}.gs-12>.grid-stack-item[gs-w=\"2\"]{width:16.667%}.gs-12>.grid-stack-item[gs-x=\"2\"]{left:16.667%}.gs-12>.grid-stack-item[gs-w=\"3\"]{width:25%}.gs-12>.grid-stack-item[gs-x=\"3\"]{left:25%}.gs-12>.grid-stack-item[gs-w=\"4\"]{width:33.333%}.gs-12>.grid-stack-item[gs-x=\"4\"]{left:33.333%}.gs-12>.grid-stack-item[gs-w=\"5\"]{width:41.667%}.gs-12>.grid-stack-item[gs-x=\"5\"]{left:41.667%}.gs-12>.grid-stack-item[gs-w=\"6\"]{width:50%}.gs-12>.grid-stack-item[gs-x=\"6\"]{left:50%}.gs-12>.grid-stack-item[gs-w=\"7\"]{width:58.333%}.gs-12>.grid-stack-item[gs-x=\"7\"]{left:58.333%}.gs-12>.grid-stack-item[gs-w=\"8\"]{width:66.667%}.gs-12>.grid-stack-item[gs-x=\"8\"]{left:66.667%}.gs-12>.grid-stack-item[gs-w=\"9\"]{width:75%}.gs-12>.grid-stack-item[gs-x=\"9\"]{left:75%}.gs-12>.grid-stack-item[gs-w=\"10\"]{width:83.333%}.gs-12>.grid-stack-item[gs-x=\"10\"]{left:83.333%}.gs-12>.grid-stack-item[gs-w=\"11\"]{width:91.667%}.gs-12>.grid-stack-item[gs-x=\"11\"]{left:91.667%}.gs-12>.grid-stack-item[gs-w=\"12\"]{width:100%}.gs-1>.grid-stack-item{width:100%}.gs-2>.grid-stack-item{width:50%}.gs-2>.grid-stack-item[gs-x=\"1\"]{left:50%}.gs-2>.grid-stack-item[gs-w=\"2\"]{width:100%}.gs-3>.grid-stack-item{width:33.333%}.gs-3>.grid-stack-item[gs-x=\"1\"]{left:33.333%}.gs-3>.grid-stack-item[gs-w=\"2\"]{width:66.667%}.gs-3>.grid-stack-item[gs-x=\"2\"]{left:66.667%}.gs-3>.grid-stack-item[gs-w=\"3\"]{width:100%}.gs-4>.grid-stack-item{width:25%}.gs-4>.grid-stack-item[gs-x=\"1\"]{left:25%}.gs-4>.grid-stack-item[gs-w=\"2\"]{width:50%}.gs-4>.grid-stack-item[gs-x=\"2\"]{left:50%}.gs-4>.grid-stack-item[gs-w=\"3\"]{width:75%}.gs-4>.grid-stack-item[gs-x=\"3\"]{left:75%}.gs-4>.grid-stack-item[gs-w=\"4\"]{width:100%}.gs-5>.grid-stack-item{width:20%}.gs-5>.grid-stack-item[gs-x=\"1\"]{left:20%}.gs-5>.grid-stack-item[gs-w=\"2\"]{width:40%}.gs-5>.grid-stack-item[gs-x=\"2\"]{left:40%}.gs-5>.grid-stack-item[gs-w=\"3\"]{width:60%}.gs-5>.grid-stack-item[gs-x=\"3\"]{left:60%}.gs-5>.grid-stack-item[gs-w=\"4\"]{width:80%}.gs-5>.grid-stack-item[gs-x=\"4\"]{left:80%}.gs-5>.grid-stack-item[gs-w=\"5\"]{width:100%}.gs-6>.grid-stack-item{width:16.667%}.gs-6>.grid-stack-item[gs-x=\"1\"]{left:16.667%}.gs-6>.grid-stack-item[gs-w=\"2\"]{width:33.333%}.gs-6>.grid-stack-item[gs-x=\"2\"]{left:33.333%}.gs-6>.grid-stack-item[gs-w=\"3\"]{width:50%}.gs-6>.grid-stack-item[gs-x=\"3\"]{left:50%}.gs-6>.grid-stack-item[gs-w=\"4\"]{width:66.667%}.gs-6>.grid-stack-item[gs-x=\"4\"]{left:66.667%}.gs-6>.grid-stack-item[gs-w=\"5\"]{width:83.333%}.gs-6>.grid-stack-item[gs-x=\"5\"]{left:83.333%}.gs-6>.grid-stack-item[gs-w=\"6\"]{width:100%}.gs-7>.grid-stack-item{width:14.286%}.gs-7>.grid-stack-item[gs-x=\"1\"]{left:14.286%}.gs-7>.grid-stack-item[gs-w=\"2\"]{width:28.571%}.gs-7>.grid-stack-item[gs-x=\"2\"]{left:28.571%}.gs-7>.grid-stack-item[gs-w=\"3\"]{width:42.857%}.gs-7>.grid-stack-item[gs-x=\"3\"]{left:42.857%}.gs-7>.grid-stack-item[gs-w=\"4\"]{width:57.143%}.gs-7>.grid-stack-item[gs-x=\"4\"]{left:57.143%}.gs-7>.grid-stack-item[gs-w=\"5\"]{width:71.429%}.gs-7>.grid-stack-item[gs-x=\"5\"]{left:71.429%}.gs-7>.grid-stack-item[gs-w=\"6\"]{width:85.714%}.gs-7>.grid-stack-item[gs-x=\"6\"]{left:85.714%}.gs-7>.grid-stack-item[gs-w=\"7\"]{width:100%}.gs-8>.grid-stack-item{width:12.5%}.gs-8>.grid-stack-item[gs-x=\"1\"]{left:12.5%}.gs-8>.grid-stack-item[gs-w=\"2\"]{width:25%}.gs-8>.grid-stack-item[gs-x=\"2\"]{left:25%}.gs-8>.grid-stack-item[gs-w=\"3\"]{width:37.5%}.gs-8>.grid-stack-item[gs-x=\"3\"]{left:37.5%}.gs-8>.grid-stack-item[gs-w=\"4\"]{width:50%}.gs-8>.grid-stack-item[gs-x=\"4\"]{left:50%}.gs-8>.grid-stack-item[gs-w=\"5\"]{width:62.5%}.gs-8>.grid-stack-item[gs-x=\"5\"]{left:62.5%}.gs-8>.grid-stack-item[gs-w=\"6\"]{width:75%}.gs-8>.grid-stack-item[gs-x=\"6\"]{left:75%}.gs-8>.grid-stack-item[gs-w=\"7\"]{width:87.5%}.gs-8>.grid-stack-item[gs-x=\"7\"]{left:87.5%}.gs-8>.grid-stack-item[gs-w=\"8\"]{width:100%}.gs-9>.grid-stack-item{width:11.111%}.gs-9>.grid-stack-item[gs-x=\"1\"]{left:11.111%}.gs-9>.grid-stack-item[gs-w=\"2\"]{width:22.222%}.gs-9>.grid-stack-item[gs-x=\"2\"]{left:22.222%}.gs-9>.grid-stack-item[gs-w=\"3\"]{width:33.333%}.gs-9>.grid-stack-item[gs-x=\"3\"]{left:33.333%}.gs-9>.grid-stack-item[gs-w=\"4\"]{width:44.444%}.gs-9>.grid-stack-item[gs-x=\"4\"]{left:44.444%}.gs-9>.grid-stack-item[gs-w=\"5\"]{width:55.556%}.gs-9>.grid-stack-item[gs-x=\"5\"]{left:55.556%}.gs-9>.grid-stack-item[gs-w=\"6\"]{width:66.667%}.gs-9>.grid-stack-item[gs-x=\"6\"]{left:66.667%}.gs-9>.grid-stack-item[gs-w=\"7\"]{width:77.778%}.gs-9>.grid-stack-item[gs-x=\"7\"]{left:77.778%}.gs-9>.grid-stack-item[gs-w=\"8\"]{width:88.889%}.gs-9>.grid-stack-item[gs-x=\"8\"]{left:88.889%}.gs-9>.grid-stack-item[gs-w=\"9\"]{width:100%}.gs-10>.grid-stack-item{width:10%}.gs-10>.grid-stack-item[gs-x=\"1\"]{left:10%}.gs-10>.grid-stack-item[gs-w=\"2\"]{width:20%}.gs-10>.grid-stack-item[gs-x=\"2\"]{left:20%}.gs-10>.grid-stack-item[gs-w=\"3\"]{width:30%}.gs-10>.grid-stack-item[gs-x=\"3\"]{left:30%}.gs-10>.grid-stack-item[gs-w=\"4\"]{width:40%}.gs-10>.grid-stack-item[gs-x=\"4\"]{left:40%}.gs-10>.grid-stack-item[gs-w=\"5\"]{width:50%}.gs-10>.grid-stack-item[gs-x=\"5\"]{left:50%}.gs-10>.grid-stack-item[gs-w=\"6\"]{width:60%}.gs-10>.grid-stack-item[gs-x=\"6\"]{left:60%}.gs-10>.grid-stack-item[gs-w=\"7\"]{width:70%}.gs-10>.grid-stack-item[gs-x=\"7\"]{left:70%}.gs-10>.grid-stack-item[gs-w=\"8\"]{width:80%}.gs-10>.grid-stack-item[gs-x=\"8\"]{left:80%}.gs-10>.grid-stack-item[gs-w=\"9\"]{width:90%}.gs-10>.grid-stack-item[gs-x=\"9\"]{left:90%}.gs-10>.grid-stack-item[gs-w=\"10\"]{width:100%}.gs-11>.grid-stack-item{width:9.091%}.gs-11>.grid-stack-item[gs-x=\"1\"]{left:9.091%}.gs-11>.grid-stack-item[gs-w=\"2\"]{width:18.182%}.gs-11>.grid-stack-item[gs-x=\"2\"]{left:18.182%}.gs-11>.grid-stack-item[gs-w=\"3\"]{width:27.273%}.gs-11>.grid-stack-item[gs-x=\"3\"]{left:27.273%}.gs-11>.grid-stack-item[gs-w=\"4\"]{width:36.364%}.gs-11>.grid-stack-item[gs-x=\"4\"]{left:36.364%}.gs-11>.grid-stack-item[gs-w=\"5\"]{width:45.455%}.gs-11>.grid-stack-item[gs-x=\"5\"]{left:45.455%}.gs-11>.grid-stack-item[gs-w=\"6\"]{width:54.545%}.gs-11>.grid-stack-item[gs-x=\"6\"]{left:54.545%}.gs-11>.grid-stack-item[gs-w=\"7\"]{width:63.636%}.gs-11>.grid-stack-item[gs-x=\"7\"]{left:63.636%}.gs-11>.grid-stack-item[gs-w=\"8\"]{width:72.727%}.gs-11>.grid-stack-item[gs-x=\"8\"]{left:72.727%}.gs-11>.grid-stack-item[gs-w=\"9\"]{width:81.818%}.gs-11>.grid-stack-item[gs-x=\"9\"]{left:81.818%}.gs-11>.grid-stack-item[gs-w=\"10\"]{width:90.909%}.gs-11>.grid-stack-item[gs-x=\"10\"]{left:90.909%}.gs-11>.grid-stack-item[gs-w=\"11\"]{width:100%}ax-grid-layout-container{display:block;border-style:solid;border-width:var(--ax-comp-grid-layout-container-border-width, 1px);border-color:rgba(var(--ax-comp-grid-layout-container-border-color, var(--ax-sys-border-color)));background-color:rgba(var(--ax-comp-grid-layout-container-bg-color, var(--ax-sys-body-bg-color)))}ax-grid-layout-widget{display:block}.grid-stack-item{cursor:pointer;border-radius:var(--ax-comp-grid-layout-stack-item-border-radius, var(--ax-sys-border-radius))}.grid-stack-item-content{display:flex;-webkit-user-select:none;user-select:none;text-align:center;align-items:center;justify-content:center;border-style:solid;border-radius:var(--ax-comp-grid-layout-stack-item-content-border-radius, var(--ax-sys-border-radius));border-width:var(--ax-comp-grid-layout-stack-item-content-border-width, 1px);border-color:rgba(var(--ax-comp-grid-layout-stack-item-content-border-color, var(--ax-sys-border-color)));background-color:rgba(var(--ax-comp-grid-layout-stack-item-content-bg-color, var(--ax-sys-surface-bg-color)))}.grid-stack-item-removing{animation:var(--ax-comp-grid-layout-stack-item-removing-animation, fadeAndBlur .5s linear forwards)}@keyframes fadeAndBlur{0%{opacity:1;filter:blur(0)}to{opacity:.8;filter:blur(5px)}}.grid-stack-trash{min-height:var(--ax-comp-grid-layout-stack-trash-min-height, 120px);background-repeat:no-repeat;background-position:center center;background-image:var(--ax-comp-grid-layout-stack-trash-bg-image, url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    <ng-content></ng-content>`, isInline: true, styles: [".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle,.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,top;cursor:move}.grid-stack-item.ui-draggable-disabled{cursor:not-allowed}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing,.grid-stack-animate .grid-stack-item.grid-stack-placeholder{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack>.grid-stack-item[gs-x=\"0\"]{left:0%}.gs-12>.grid-stack-item{width:8.333%}.gs-12>.grid-stack-item[gs-x=\"1\"]{left:8.333%}.gs-12>.grid-stack-item[gs-w=\"2\"]{width:16.667%}.gs-12>.grid-stack-item[gs-x=\"2\"]{left:16.667%}.gs-12>.grid-stack-item[gs-w=\"3\"]{width:25%}.gs-12>.grid-stack-item[gs-x=\"3\"]{left:25%}.gs-12>.grid-stack-item[gs-w=\"4\"]{width:33.333%}.gs-12>.grid-stack-item[gs-x=\"4\"]{left:33.333%}.gs-12>.grid-stack-item[gs-w=\"5\"]{width:41.667%}.gs-12>.grid-stack-item[gs-x=\"5\"]{left:41.667%}.gs-12>.grid-stack-item[gs-w=\"6\"]{width:50%}.gs-12>.grid-stack-item[gs-x=\"6\"]{left:50%}.gs-12>.grid-stack-item[gs-w=\"7\"]{width:58.333%}.gs-12>.grid-stack-item[gs-x=\"7\"]{left:58.333%}.gs-12>.grid-stack-item[gs-w=\"8\"]{width:66.667%}.gs-12>.grid-stack-item[gs-x=\"8\"]{left:66.667%}.gs-12>.grid-stack-item[gs-w=\"9\"]{width:75%}.gs-12>.grid-stack-item[gs-x=\"9\"]{left:75%}.gs-12>.grid-stack-item[gs-w=\"10\"]{width:83.333%}.gs-12>.grid-stack-item[gs-x=\"10\"]{left:83.333%}.gs-12>.grid-stack-item[gs-w=\"11\"]{width:91.667%}.gs-12>.grid-stack-item[gs-x=\"11\"]{left:91.667%}.gs-12>.grid-stack-item[gs-w=\"12\"]{width:100%}.gs-1>.grid-stack-item{width:100%}.gs-2>.grid-stack-item{width:50%}.gs-2>.grid-stack-item[gs-x=\"1\"]{left:50%}.gs-2>.grid-stack-item[gs-w=\"2\"]{width:100%}.gs-3>.grid-stack-item{width:33.333%}.gs-3>.grid-stack-item[gs-x=\"1\"]{left:33.333%}.gs-3>.grid-stack-item[gs-w=\"2\"]{width:66.667%}.gs-3>.grid-stack-item[gs-x=\"2\"]{left:66.667%}.gs-3>.grid-stack-item[gs-w=\"3\"]{width:100%}.gs-4>.grid-stack-item{width:25%}.gs-4>.grid-stack-item[gs-x=\"1\"]{left:25%}.gs-4>.grid-stack-item[gs-w=\"2\"]{width:50%}.gs-4>.grid-stack-item[gs-x=\"2\"]{left:50%}.gs-4>.grid-stack-item[gs-w=\"3\"]{width:75%}.gs-4>.grid-stack-item[gs-x=\"3\"]{left:75%}.gs-4>.grid-stack-item[gs-w=\"4\"]{width:100%}.gs-5>.grid-stack-item{width:20%}.gs-5>.grid-stack-item[gs-x=\"1\"]{left:20%}.gs-5>.grid-stack-item[gs-w=\"2\"]{width:40%}.gs-5>.grid-stack-item[gs-x=\"2\"]{left:40%}.gs-5>.grid-stack-item[gs-w=\"3\"]{width:60%}.gs-5>.grid-stack-item[gs-x=\"3\"]{left:60%}.gs-5>.grid-stack-item[gs-w=\"4\"]{width:80%}.gs-5>.grid-stack-item[gs-x=\"4\"]{left:80%}.gs-5>.grid-stack-item[gs-w=\"5\"]{width:100%}.gs-6>.grid-stack-item{width:16.667%}.gs-6>.grid-stack-item[gs-x=\"1\"]{left:16.667%}.gs-6>.grid-stack-item[gs-w=\"2\"]{width:33.333%}.gs-6>.grid-stack-item[gs-x=\"2\"]{left:33.333%}.gs-6>.grid-stack-item[gs-w=\"3\"]{width:50%}.gs-6>.grid-stack-item[gs-x=\"3\"]{left:50%}.gs-6>.grid-stack-item[gs-w=\"4\"]{width:66.667%}.gs-6>.grid-stack-item[gs-x=\"4\"]{left:66.667%}.gs-6>.grid-stack-item[gs-w=\"5\"]{width:83.333%}.gs-6>.grid-stack-item[gs-x=\"5\"]{left:83.333%}.gs-6>.grid-stack-item[gs-w=\"6\"]{width:100%}.gs-7>.grid-stack-item{width:14.286%}.gs-7>.grid-stack-item[gs-x=\"1\"]{left:14.286%}.gs-7>.grid-stack-item[gs-w=\"2\"]{width:28.571%}.gs-7>.grid-stack-item[gs-x=\"2\"]{left:28.571%}.gs-7>.grid-stack-item[gs-w=\"3\"]{width:42.857%}.gs-7>.grid-stack-item[gs-x=\"3\"]{left:42.857%}.gs-7>.grid-stack-item[gs-w=\"4\"]{width:57.143%}.gs-7>.grid-stack-item[gs-x=\"4\"]{left:57.143%}.gs-7>.grid-stack-item[gs-w=\"5\"]{width:71.429%}.gs-7>.grid-stack-item[gs-x=\"5\"]{left:71.429%}.gs-7>.grid-stack-item[gs-w=\"6\"]{width:85.714%}.gs-7>.grid-stack-item[gs-x=\"6\"]{left:85.714%}.gs-7>.grid-stack-item[gs-w=\"7\"]{width:100%}.gs-8>.grid-stack-item{width:12.5%}.gs-8>.grid-stack-item[gs-x=\"1\"]{left:12.5%}.gs-8>.grid-stack-item[gs-w=\"2\"]{width:25%}.gs-8>.grid-stack-item[gs-x=\"2\"]{left:25%}.gs-8>.grid-stack-item[gs-w=\"3\"]{width:37.5%}.gs-8>.grid-stack-item[gs-x=\"3\"]{left:37.5%}.gs-8>.grid-stack-item[gs-w=\"4\"]{width:50%}.gs-8>.grid-stack-item[gs-x=\"4\"]{left:50%}.gs-8>.grid-stack-item[gs-w=\"5\"]{width:62.5%}.gs-8>.grid-stack-item[gs-x=\"5\"]{left:62.5%}.gs-8>.grid-stack-item[gs-w=\"6\"]{width:75%}.gs-8>.grid-stack-item[gs-x=\"6\"]{left:75%}.gs-8>.grid-stack-item[gs-w=\"7\"]{width:87.5%}.gs-8>.grid-stack-item[gs-x=\"7\"]{left:87.5%}.gs-8>.grid-stack-item[gs-w=\"8\"]{width:100%}.gs-9>.grid-stack-item{width:11.111%}.gs-9>.grid-stack-item[gs-x=\"1\"]{left:11.111%}.gs-9>.grid-stack-item[gs-w=\"2\"]{width:22.222%}.gs-9>.grid-stack-item[gs-x=\"2\"]{left:22.222%}.gs-9>.grid-stack-item[gs-w=\"3\"]{width:33.333%}.gs-9>.grid-stack-item[gs-x=\"3\"]{left:33.333%}.gs-9>.grid-stack-item[gs-w=\"4\"]{width:44.444%}.gs-9>.grid-stack-item[gs-x=\"4\"]{left:44.444%}.gs-9>.grid-stack-item[gs-w=\"5\"]{width:55.556%}.gs-9>.grid-stack-item[gs-x=\"5\"]{left:55.556%}.gs-9>.grid-stack-item[gs-w=\"6\"]{width:66.667%}.gs-9>.grid-stack-item[gs-x=\"6\"]{left:66.667%}.gs-9>.grid-stack-item[gs-w=\"7\"]{width:77.778%}.gs-9>.grid-stack-item[gs-x=\"7\"]{left:77.778%}.gs-9>.grid-stack-item[gs-w=\"8\"]{width:88.889%}.gs-9>.grid-stack-item[gs-x=\"8\"]{left:88.889%}.gs-9>.grid-stack-item[gs-w=\"9\"]{width:100%}.gs-10>.grid-stack-item{width:10%}.gs-10>.grid-stack-item[gs-x=\"1\"]{left:10%}.gs-10>.grid-stack-item[gs-w=\"2\"]{width:20%}.gs-10>.grid-stack-item[gs-x=\"2\"]{left:20%}.gs-10>.grid-stack-item[gs-w=\"3\"]{width:30%}.gs-10>.grid-stack-item[gs-x=\"3\"]{left:30%}.gs-10>.grid-stack-item[gs-w=\"4\"]{width:40%}.gs-10>.grid-stack-item[gs-x=\"4\"]{left:40%}.gs-10>.grid-stack-item[gs-w=\"5\"]{width:50%}.gs-10>.grid-stack-item[gs-x=\"5\"]{left:50%}.gs-10>.grid-stack-item[gs-w=\"6\"]{width:60%}.gs-10>.grid-stack-item[gs-x=\"6\"]{left:60%}.gs-10>.grid-stack-item[gs-w=\"7\"]{width:70%}.gs-10>.grid-stack-item[gs-x=\"7\"]{left:70%}.gs-10>.grid-stack-item[gs-w=\"8\"]{width:80%}.gs-10>.grid-stack-item[gs-x=\"8\"]{left:80%}.gs-10>.grid-stack-item[gs-w=\"9\"]{width:90%}.gs-10>.grid-stack-item[gs-x=\"9\"]{left:90%}.gs-10>.grid-stack-item[gs-w=\"10\"]{width:100%}.gs-11>.grid-stack-item{width:9.091%}.gs-11>.grid-stack-item[gs-x=\"1\"]{left:9.091%}.gs-11>.grid-stack-item[gs-w=\"2\"]{width:18.182%}.gs-11>.grid-stack-item[gs-x=\"2\"]{left:18.182%}.gs-11>.grid-stack-item[gs-w=\"3\"]{width:27.273%}.gs-11>.grid-stack-item[gs-x=\"3\"]{left:27.273%}.gs-11>.grid-stack-item[gs-w=\"4\"]{width:36.364%}.gs-11>.grid-stack-item[gs-x=\"4\"]{left:36.364%}.gs-11>.grid-stack-item[gs-w=\"5\"]{width:45.455%}.gs-11>.grid-stack-item[gs-x=\"5\"]{left:45.455%}.gs-11>.grid-stack-item[gs-w=\"6\"]{width:54.545%}.gs-11>.grid-stack-item[gs-x=\"6\"]{left:54.545%}.gs-11>.grid-stack-item[gs-w=\"7\"]{width:63.636%}.gs-11>.grid-stack-item[gs-x=\"7\"]{left:63.636%}.gs-11>.grid-stack-item[gs-w=\"8\"]{width:72.727%}.gs-11>.grid-stack-item[gs-x=\"8\"]{left:72.727%}.gs-11>.grid-stack-item[gs-w=\"9\"]{width:81.818%}.gs-11>.grid-stack-item[gs-x=\"9\"]{left:81.818%}.gs-11>.grid-stack-item[gs-w=\"10\"]{width:90.909%}.gs-11>.grid-stack-item[gs-x=\"10\"]{left:90.909%}.gs-11>.grid-stack-item[gs-w=\"11\"]{width:100%}ax-grid-layout-container{display:block;border-style:solid;border-width:var(--ax-comp-grid-layout-container-border-width, 1px);border-color:rgba(var(--ax-comp-grid-layout-container-border-color, var(--ax-sys-border-color)));background-color:rgba(var(--ax-comp-grid-layout-container-bg-color, var(--ax-sys-body-bg-color)))}ax-grid-layout-widget{display:block}.grid-stack-item{cursor:pointer;border-radius:var(--ax-comp-grid-layout-stack-item-border-radius, var(--ax-sys-border-radius))}.grid-stack-item-content{display:flex;-webkit-user-select:none;user-select:none;text-align:center;align-items:center;justify-content:center;border-style:solid;border-radius:var(--ax-comp-grid-layout-stack-item-content-border-radius, var(--ax-sys-border-radius));border-width:var(--ax-comp-grid-layout-stack-item-content-border-width, 1px);border-color:rgba(var(--ax-comp-grid-layout-stack-item-content-border-color, var(--ax-sys-border-color)));background-color:rgba(var(--ax-comp-grid-layout-stack-item-content-bg-color, var(--ax-sys-color-ghost-200)))}.grid-stack-item-removing{animation:var(--ax-comp-grid-layout-stack-item-removing-animation, fadeAndBlur .5s linear forwards)}@keyframes fadeAndBlur{0%{opacity:1;filter:blur(0)}to{opacity:.8;filter:blur(5px)}}.grid-stack-trash{min-height:var(--ax-comp-grid-layout-stack-trash-min-height, 120px);background-repeat:no-repeat;background-position:center center;background-image:var(--ax-comp-grid-layout-stack-trash-bg-image, url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXGridLayoutContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-grid-layout-container', template: ` <ng-template #container></ng-template>
-    <ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, styles: [".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle,.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,top;cursor:move}.grid-stack-item.ui-draggable-disabled{cursor:not-allowed}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing,.grid-stack-animate .grid-stack-item.grid-stack-placeholder{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack>.grid-stack-item[gs-x=\"0\"]{left:0%}.gs-12>.grid-stack-item{width:8.333%}.gs-12>.grid-stack-item[gs-x=\"1\"]{left:8.333%}.gs-12>.grid-stack-item[gs-w=\"2\"]{width:16.667%}.gs-12>.grid-stack-item[gs-x=\"2\"]{left:16.667%}.gs-12>.grid-stack-item[gs-w=\"3\"]{width:25%}.gs-12>.grid-stack-item[gs-x=\"3\"]{left:25%}.gs-12>.grid-stack-item[gs-w=\"4\"]{width:33.333%}.gs-12>.grid-stack-item[gs-x=\"4\"]{left:33.333%}.gs-12>.grid-stack-item[gs-w=\"5\"]{width:41.667%}.gs-12>.grid-stack-item[gs-x=\"5\"]{left:41.667%}.gs-12>.grid-stack-item[gs-w=\"6\"]{width:50%}.gs-12>.grid-stack-item[gs-x=\"6\"]{left:50%}.gs-12>.grid-stack-item[gs-w=\"7\"]{width:58.333%}.gs-12>.grid-stack-item[gs-x=\"7\"]{left:58.333%}.gs-12>.grid-stack-item[gs-w=\"8\"]{width:66.667%}.gs-12>.grid-stack-item[gs-x=\"8\"]{left:66.667%}.gs-12>.grid-stack-item[gs-w=\"9\"]{width:75%}.gs-12>.grid-stack-item[gs-x=\"9\"]{left:75%}.gs-12>.grid-stack-item[gs-w=\"10\"]{width:83.333%}.gs-12>.grid-stack-item[gs-x=\"10\"]{left:83.333%}.gs-12>.grid-stack-item[gs-w=\"11\"]{width:91.667%}.gs-12>.grid-stack-item[gs-x=\"11\"]{left:91.667%}.gs-12>.grid-stack-item[gs-w=\"12\"]{width:100%}.gs-1>.grid-stack-item{width:100%}.gs-2>.grid-stack-item{width:50%}.gs-2>.grid-stack-item[gs-x=\"1\"]{left:50%}.gs-2>.grid-stack-item[gs-w=\"2\"]{width:100%}.gs-3>.grid-stack-item{width:33.333%}.gs-3>.grid-stack-item[gs-x=\"1\"]{left:33.333%}.gs-3>.grid-stack-item[gs-w=\"2\"]{width:66.667%}.gs-3>.grid-stack-item[gs-x=\"2\"]{left:66.667%}.gs-3>.grid-stack-item[gs-w=\"3\"]{width:100%}.gs-4>.grid-stack-item{width:25%}.gs-4>.grid-stack-item[gs-x=\"1\"]{left:25%}.gs-4>.grid-stack-item[gs-w=\"2\"]{width:50%}.gs-4>.grid-stack-item[gs-x=\"2\"]{left:50%}.gs-4>.grid-stack-item[gs-w=\"3\"]{width:75%}.gs-4>.grid-stack-item[gs-x=\"3\"]{left:75%}.gs-4>.grid-stack-item[gs-w=\"4\"]{width:100%}.gs-5>.grid-stack-item{width:20%}.gs-5>.grid-stack-item[gs-x=\"1\"]{left:20%}.gs-5>.grid-stack-item[gs-w=\"2\"]{width:40%}.gs-5>.grid-stack-item[gs-x=\"2\"]{left:40%}.gs-5>.grid-stack-item[gs-w=\"3\"]{width:60%}.gs-5>.grid-stack-item[gs-x=\"3\"]{left:60%}.gs-5>.grid-stack-item[gs-w=\"4\"]{width:80%}.gs-5>.grid-stack-item[gs-x=\"4\"]{left:80%}.gs-5>.grid-stack-item[gs-w=\"5\"]{width:100%}.gs-6>.grid-stack-item{width:16.667%}.gs-6>.grid-stack-item[gs-x=\"1\"]{left:16.667%}.gs-6>.grid-stack-item[gs-w=\"2\"]{width:33.333%}.gs-6>.grid-stack-item[gs-x=\"2\"]{left:33.333%}.gs-6>.grid-stack-item[gs-w=\"3\"]{width:50%}.gs-6>.grid-stack-item[gs-x=\"3\"]{left:50%}.gs-6>.grid-stack-item[gs-w=\"4\"]{width:66.667%}.gs-6>.grid-stack-item[gs-x=\"4\"]{left:66.667%}.gs-6>.grid-stack-item[gs-w=\"5\"]{width:83.333%}.gs-6>.grid-stack-item[gs-x=\"5\"]{left:83.333%}.gs-6>.grid-stack-item[gs-w=\"6\"]{width:100%}.gs-7>.grid-stack-item{width:14.286%}.gs-7>.grid-stack-item[gs-x=\"1\"]{left:14.286%}.gs-7>.grid-stack-item[gs-w=\"2\"]{width:28.571%}.gs-7>.grid-stack-item[gs-x=\"2\"]{left:28.571%}.gs-7>.grid-stack-item[gs-w=\"3\"]{width:42.857%}.gs-7>.grid-stack-item[gs-x=\"3\"]{left:42.857%}.gs-7>.grid-stack-item[gs-w=\"4\"]{width:57.143%}.gs-7>.grid-stack-item[gs-x=\"4\"]{left:57.143%}.gs-7>.grid-stack-item[gs-w=\"5\"]{width:71.429%}.gs-7>.grid-stack-item[gs-x=\"5\"]{left:71.429%}.gs-7>.grid-stack-item[gs-w=\"6\"]{width:85.714%}.gs-7>.grid-stack-item[gs-x=\"6\"]{left:85.714%}.gs-7>.grid-stack-item[gs-w=\"7\"]{width:100%}.gs-8>.grid-stack-item{width:12.5%}.gs-8>.grid-stack-item[gs-x=\"1\"]{left:12.5%}.gs-8>.grid-stack-item[gs-w=\"2\"]{width:25%}.gs-8>.grid-stack-item[gs-x=\"2\"]{left:25%}.gs-8>.grid-stack-item[gs-w=\"3\"]{width:37.5%}.gs-8>.grid-stack-item[gs-x=\"3\"]{left:37.5%}.gs-8>.grid-stack-item[gs-w=\"4\"]{width:50%}.gs-8>.grid-stack-item[gs-x=\"4\"]{left:50%}.gs-8>.grid-stack-item[gs-w=\"5\"]{width:62.5%}.gs-8>.grid-stack-item[gs-x=\"5\"]{left:62.5%}.gs-8>.grid-stack-item[gs-w=\"6\"]{width:75%}.gs-8>.grid-stack-item[gs-x=\"6\"]{left:75%}.gs-8>.grid-stack-item[gs-w=\"7\"]{width:87.5%}.gs-8>.grid-stack-item[gs-x=\"7\"]{left:87.5%}.gs-8>.grid-stack-item[gs-w=\"8\"]{width:100%}.gs-9>.grid-stack-item{width:11.111%}.gs-9>.grid-stack-item[gs-x=\"1\"]{left:11.111%}.gs-9>.grid-stack-item[gs-w=\"2\"]{width:22.222%}.gs-9>.grid-stack-item[gs-x=\"2\"]{left:22.222%}.gs-9>.grid-stack-item[gs-w=\"3\"]{width:33.333%}.gs-9>.grid-stack-item[gs-x=\"3\"]{left:33.333%}.gs-9>.grid-stack-item[gs-w=\"4\"]{width:44.444%}.gs-9>.grid-stack-item[gs-x=\"4\"]{left:44.444%}.gs-9>.grid-stack-item[gs-w=\"5\"]{width:55.556%}.gs-9>.grid-stack-item[gs-x=\"5\"]{left:55.556%}.gs-9>.grid-stack-item[gs-w=\"6\"]{width:66.667%}.gs-9>.grid-stack-item[gs-x=\"6\"]{left:66.667%}.gs-9>.grid-stack-item[gs-w=\"7\"]{width:77.778%}.gs-9>.grid-stack-item[gs-x=\"7\"]{left:77.778%}.gs-9>.grid-stack-item[gs-w=\"8\"]{width:88.889%}.gs-9>.grid-stack-item[gs-x=\"8\"]{left:88.889%}.gs-9>.grid-stack-item[gs-w=\"9\"]{width:100%}.gs-10>.grid-stack-item{width:10%}.gs-10>.grid-stack-item[gs-x=\"1\"]{left:10%}.gs-10>.grid-stack-item[gs-w=\"2\"]{width:20%}.gs-10>.grid-stack-item[gs-x=\"2\"]{left:20%}.gs-10>.grid-stack-item[gs-w=\"3\"]{width:30%}.gs-10>.grid-stack-item[gs-x=\"3\"]{left:30%}.gs-10>.grid-stack-item[gs-w=\"4\"]{width:40%}.gs-10>.grid-stack-item[gs-x=\"4\"]{left:40%}.gs-10>.grid-stack-item[gs-w=\"5\"]{width:50%}.gs-10>.grid-stack-item[gs-x=\"5\"]{left:50%}.gs-10>.grid-stack-item[gs-w=\"6\"]{width:60%}.gs-10>.grid-stack-item[gs-x=\"6\"]{left:60%}.gs-10>.grid-stack-item[gs-w=\"7\"]{width:70%}.gs-10>.grid-stack-item[gs-x=\"7\"]{left:70%}.gs-10>.grid-stack-item[gs-w=\"8\"]{width:80%}.gs-10>.grid-stack-item[gs-x=\"8\"]{left:80%}.gs-10>.grid-stack-item[gs-w=\"9\"]{width:90%}.gs-10>.grid-stack-item[gs-x=\"9\"]{left:90%}.gs-10>.grid-stack-item[gs-w=\"10\"]{width:100%}.gs-11>.grid-stack-item{width:9.091%}.gs-11>.grid-stack-item[gs-x=\"1\"]{left:9.091%}.gs-11>.grid-stack-item[gs-w=\"2\"]{width:18.182%}.gs-11>.grid-stack-item[gs-x=\"2\"]{left:18.182%}.gs-11>.grid-stack-item[gs-w=\"3\"]{width:27.273%}.gs-11>.grid-stack-item[gs-x=\"3\"]{left:27.273%}.gs-11>.grid-stack-item[gs-w=\"4\"]{width:36.364%}.gs-11>.grid-stack-item[gs-x=\"4\"]{left:36.364%}.gs-11>.grid-stack-item[gs-w=\"5\"]{width:45.455%}.gs-11>.grid-stack-item[gs-x=\"5\"]{left:45.455%}.gs-11>.grid-stack-item[gs-w=\"6\"]{width:54.545%}.gs-11>.grid-stack-item[gs-x=\"6\"]{left:54.545%}.gs-11>.grid-stack-item[gs-w=\"7\"]{width:63.636%}.gs-11>.grid-stack-item[gs-x=\"7\"]{left:63.636%}.gs-11>.grid-stack-item[gs-w=\"8\"]{width:72.727%}.gs-11>.grid-stack-item[gs-x=\"8\"]{left:72.727%}.gs-11>.grid-stack-item[gs-w=\"9\"]{width:81.818%}.gs-11>.grid-stack-item[gs-x=\"9\"]{left:81.818%}.gs-11>.grid-stack-item[gs-w=\"10\"]{width:90.909%}.gs-11>.grid-stack-item[gs-x=\"10\"]{left:90.909%}.gs-11>.grid-stack-item[gs-w=\"11\"]{width:100%}ax-grid-layout-container{display:block;border-style:solid;border-width:var(--ax-comp-grid-layout-container-border-width, 1px);border-color:rgba(var(--ax-comp-grid-layout-container-border-color, var(--ax-sys-border-color)));background-color:rgba(var(--ax-comp-grid-layout-container-bg-color, var(--ax-sys-body-bg-color)))}ax-grid-layout-widget{display:block}.grid-stack-item{cursor:pointer;border-radius:var(--ax-comp-grid-layout-stack-item-border-radius, var(--ax-sys-border-radius))}.grid-stack-item-content{display:flex;-webkit-user-select:none;user-select:none;text-align:center;align-items:center;justify-content:center;border-style:solid;border-radius:var(--ax-comp-grid-layout-stack-item-content-border-radius, var(--ax-sys-border-radius));border-width:var(--ax-comp-grid-layout-stack-item-content-border-width, 1px);border-color:rgba(var(--ax-comp-grid-layout-stack-item-content-border-color, var(--ax-sys-border-color)));background-color:rgba(var(--ax-comp-grid-layout-stack-item-content-bg-color, var(--ax-sys-surface-bg-color)))}.grid-stack-item-removing{animation:var(--ax-comp-grid-layout-stack-item-removing-animation, fadeAndBlur .5s linear forwards)}@keyframes fadeAndBlur{0%{opacity:1;filter:blur(0)}to{opacity:.8;filter:blur(5px)}}.grid-stack-trash{min-height:var(--ax-comp-grid-layout-stack-trash-min-height, 120px);background-repeat:no-repeat;background-position:center center;background-image:var(--ax-comp-grid-layout-stack-trash-bg-image, url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=))}\n"] }]
+    <ng-content></ng-content>`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: false, styles: [".grid-stack{position:relative}.grid-stack-rtl{direction:ltr}.grid-stack-rtl>.grid-stack-item{direction:rtl}.grid-stack-placeholder>.placeholder-content{background-color:#0000001a;margin:0;position:absolute;width:auto;z-index:0!important}.grid-stack>.grid-stack-item{position:absolute;padding:0}.grid-stack>.grid-stack-item>.grid-stack-item-content{margin:0;position:absolute;width:auto;overflow-x:hidden;overflow-y:auto}.grid-stack>.grid-stack-item.size-to-content:not(.size-to-content-max)>.grid-stack-item-content{overflow-y:hidden}.grid-stack-item>.ui-resizable-handle{position:absolute;font-size:.1px;display:block;-ms-touch-action:none;touch-action:none}.grid-stack-item.ui-resizable-disabled>.ui-resizable-handle,.grid-stack-item.ui-resizable-autohide>.ui-resizable-handle{display:none}.grid-stack-item>.ui-resizable-ne,.grid-stack-item>.ui-resizable-nw,.grid-stack-item>.ui-resizable-se,.grid-stack-item>.ui-resizable-sw{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" stroke=\"%23666\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" viewBox=\"0 0 20 20\"><path d=\"m10 3 2 2H8l2-2v14l-2-2h4l-2 2\"/></svg>');background-repeat:no-repeat;background-position:center}.grid-stack-item>.ui-resizable-ne{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-sw{transform:rotate(45deg)}.grid-stack-item>.ui-resizable-nw{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-se{transform:rotate(-45deg)}.grid-stack-item>.ui-resizable-nw{cursor:nw-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-n{cursor:n-resize;height:10px;top:0;left:25px;right:25px}.grid-stack-item>.ui-resizable-ne{cursor:ne-resize;width:20px;height:20px;top:0}.grid-stack-item>.ui-resizable-e{cursor:e-resize;width:10px;top:15px;bottom:15px}.grid-stack-item>.ui-resizable-se{cursor:se-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-s{cursor:s-resize;height:10px;left:25px;bottom:0;right:25px}.grid-stack-item>.ui-resizable-sw{cursor:sw-resize;width:20px;height:20px}.grid-stack-item>.ui-resizable-w{cursor:w-resize;width:10px;top:15px;bottom:15px}.grid-stack-item.ui-draggable-dragging>.ui-resizable-handle{display:none!important}.grid-stack-item.ui-draggable-dragging{will-change:left,top;cursor:move}.grid-stack-item.ui-draggable-disabled{cursor:not-allowed}.grid-stack-item.ui-resizable-resizing{will-change:width,height}.ui-draggable-dragging,.ui-resizable-resizing{z-index:10000}.ui-draggable-dragging>.grid-stack-item-content,.ui-resizable-resizing>.grid-stack-item-content{box-shadow:1px 4px 6px #0003;opacity:.8}.grid-stack-animate,.grid-stack-animate .grid-stack-item{transition:left .3s,top .3s,height .3s,width .3s}.grid-stack-animate .grid-stack-item.ui-draggable-dragging,.grid-stack-animate .grid-stack-item.ui-resizable-resizing,.grid-stack-animate .grid-stack-item.grid-stack-placeholder{transition:left 0s,top 0s,height 0s,width 0s}.grid-stack>.grid-stack-item[gs-y=\"0\"]{top:0}.grid-stack>.grid-stack-item[gs-x=\"0\"]{left:0%}.gs-12>.grid-stack-item{width:8.333%}.gs-12>.grid-stack-item[gs-x=\"1\"]{left:8.333%}.gs-12>.grid-stack-item[gs-w=\"2\"]{width:16.667%}.gs-12>.grid-stack-item[gs-x=\"2\"]{left:16.667%}.gs-12>.grid-stack-item[gs-w=\"3\"]{width:25%}.gs-12>.grid-stack-item[gs-x=\"3\"]{left:25%}.gs-12>.grid-stack-item[gs-w=\"4\"]{width:33.333%}.gs-12>.grid-stack-item[gs-x=\"4\"]{left:33.333%}.gs-12>.grid-stack-item[gs-w=\"5\"]{width:41.667%}.gs-12>.grid-stack-item[gs-x=\"5\"]{left:41.667%}.gs-12>.grid-stack-item[gs-w=\"6\"]{width:50%}.gs-12>.grid-stack-item[gs-x=\"6\"]{left:50%}.gs-12>.grid-stack-item[gs-w=\"7\"]{width:58.333%}.gs-12>.grid-stack-item[gs-x=\"7\"]{left:58.333%}.gs-12>.grid-stack-item[gs-w=\"8\"]{width:66.667%}.gs-12>.grid-stack-item[gs-x=\"8\"]{left:66.667%}.gs-12>.grid-stack-item[gs-w=\"9\"]{width:75%}.gs-12>.grid-stack-item[gs-x=\"9\"]{left:75%}.gs-12>.grid-stack-item[gs-w=\"10\"]{width:83.333%}.gs-12>.grid-stack-item[gs-x=\"10\"]{left:83.333%}.gs-12>.grid-stack-item[gs-w=\"11\"]{width:91.667%}.gs-12>.grid-stack-item[gs-x=\"11\"]{left:91.667%}.gs-12>.grid-stack-item[gs-w=\"12\"]{width:100%}.gs-1>.grid-stack-item{width:100%}.gs-2>.grid-stack-item{width:50%}.gs-2>.grid-stack-item[gs-x=\"1\"]{left:50%}.gs-2>.grid-stack-item[gs-w=\"2\"]{width:100%}.gs-3>.grid-stack-item{width:33.333%}.gs-3>.grid-stack-item[gs-x=\"1\"]{left:33.333%}.gs-3>.grid-stack-item[gs-w=\"2\"]{width:66.667%}.gs-3>.grid-stack-item[gs-x=\"2\"]{left:66.667%}.gs-3>.grid-stack-item[gs-w=\"3\"]{width:100%}.gs-4>.grid-stack-item{width:25%}.gs-4>.grid-stack-item[gs-x=\"1\"]{left:25%}.gs-4>.grid-stack-item[gs-w=\"2\"]{width:50%}.gs-4>.grid-stack-item[gs-x=\"2\"]{left:50%}.gs-4>.grid-stack-item[gs-w=\"3\"]{width:75%}.gs-4>.grid-stack-item[gs-x=\"3\"]{left:75%}.gs-4>.grid-stack-item[gs-w=\"4\"]{width:100%}.gs-5>.grid-stack-item{width:20%}.gs-5>.grid-stack-item[gs-x=\"1\"]{left:20%}.gs-5>.grid-stack-item[gs-w=\"2\"]{width:40%}.gs-5>.grid-stack-item[gs-x=\"2\"]{left:40%}.gs-5>.grid-stack-item[gs-w=\"3\"]{width:60%}.gs-5>.grid-stack-item[gs-x=\"3\"]{left:60%}.gs-5>.grid-stack-item[gs-w=\"4\"]{width:80%}.gs-5>.grid-stack-item[gs-x=\"4\"]{left:80%}.gs-5>.grid-stack-item[gs-w=\"5\"]{width:100%}.gs-6>.grid-stack-item{width:16.667%}.gs-6>.grid-stack-item[gs-x=\"1\"]{left:16.667%}.gs-6>.grid-stack-item[gs-w=\"2\"]{width:33.333%}.gs-6>.grid-stack-item[gs-x=\"2\"]{left:33.333%}.gs-6>.grid-stack-item[gs-w=\"3\"]{width:50%}.gs-6>.grid-stack-item[gs-x=\"3\"]{left:50%}.gs-6>.grid-stack-item[gs-w=\"4\"]{width:66.667%}.gs-6>.grid-stack-item[gs-x=\"4\"]{left:66.667%}.gs-6>.grid-stack-item[gs-w=\"5\"]{width:83.333%}.gs-6>.grid-stack-item[gs-x=\"5\"]{left:83.333%}.gs-6>.grid-stack-item[gs-w=\"6\"]{width:100%}.gs-7>.grid-stack-item{width:14.286%}.gs-7>.grid-stack-item[gs-x=\"1\"]{left:14.286%}.gs-7>.grid-stack-item[gs-w=\"2\"]{width:28.571%}.gs-7>.grid-stack-item[gs-x=\"2\"]{left:28.571%}.gs-7>.grid-stack-item[gs-w=\"3\"]{width:42.857%}.gs-7>.grid-stack-item[gs-x=\"3\"]{left:42.857%}.gs-7>.grid-stack-item[gs-w=\"4\"]{width:57.143%}.gs-7>.grid-stack-item[gs-x=\"4\"]{left:57.143%}.gs-7>.grid-stack-item[gs-w=\"5\"]{width:71.429%}.gs-7>.grid-stack-item[gs-x=\"5\"]{left:71.429%}.gs-7>.grid-stack-item[gs-w=\"6\"]{width:85.714%}.gs-7>.grid-stack-item[gs-x=\"6\"]{left:85.714%}.gs-7>.grid-stack-item[gs-w=\"7\"]{width:100%}.gs-8>.grid-stack-item{width:12.5%}.gs-8>.grid-stack-item[gs-x=\"1\"]{left:12.5%}.gs-8>.grid-stack-item[gs-w=\"2\"]{width:25%}.gs-8>.grid-stack-item[gs-x=\"2\"]{left:25%}.gs-8>.grid-stack-item[gs-w=\"3\"]{width:37.5%}.gs-8>.grid-stack-item[gs-x=\"3\"]{left:37.5%}.gs-8>.grid-stack-item[gs-w=\"4\"]{width:50%}.gs-8>.grid-stack-item[gs-x=\"4\"]{left:50%}.gs-8>.grid-stack-item[gs-w=\"5\"]{width:62.5%}.gs-8>.grid-stack-item[gs-x=\"5\"]{left:62.5%}.gs-8>.grid-stack-item[gs-w=\"6\"]{width:75%}.gs-8>.grid-stack-item[gs-x=\"6\"]{left:75%}.gs-8>.grid-stack-item[gs-w=\"7\"]{width:87.5%}.gs-8>.grid-stack-item[gs-x=\"7\"]{left:87.5%}.gs-8>.grid-stack-item[gs-w=\"8\"]{width:100%}.gs-9>.grid-stack-item{width:11.111%}.gs-9>.grid-stack-item[gs-x=\"1\"]{left:11.111%}.gs-9>.grid-stack-item[gs-w=\"2\"]{width:22.222%}.gs-9>.grid-stack-item[gs-x=\"2\"]{left:22.222%}.gs-9>.grid-stack-item[gs-w=\"3\"]{width:33.333%}.gs-9>.grid-stack-item[gs-x=\"3\"]{left:33.333%}.gs-9>.grid-stack-item[gs-w=\"4\"]{width:44.444%}.gs-9>.grid-stack-item[gs-x=\"4\"]{left:44.444%}.gs-9>.grid-stack-item[gs-w=\"5\"]{width:55.556%}.gs-9>.grid-stack-item[gs-x=\"5\"]{left:55.556%}.gs-9>.grid-stack-item[gs-w=\"6\"]{width:66.667%}.gs-9>.grid-stack-item[gs-x=\"6\"]{left:66.667%}.gs-9>.grid-stack-item[gs-w=\"7\"]{width:77.778%}.gs-9>.grid-stack-item[gs-x=\"7\"]{left:77.778%}.gs-9>.grid-stack-item[gs-w=\"8\"]{width:88.889%}.gs-9>.grid-stack-item[gs-x=\"8\"]{left:88.889%}.gs-9>.grid-stack-item[gs-w=\"9\"]{width:100%}.gs-10>.grid-stack-item{width:10%}.gs-10>.grid-stack-item[gs-x=\"1\"]{left:10%}.gs-10>.grid-stack-item[gs-w=\"2\"]{width:20%}.gs-10>.grid-stack-item[gs-x=\"2\"]{left:20%}.gs-10>.grid-stack-item[gs-w=\"3\"]{width:30%}.gs-10>.grid-stack-item[gs-x=\"3\"]{left:30%}.gs-10>.grid-stack-item[gs-w=\"4\"]{width:40%}.gs-10>.grid-stack-item[gs-x=\"4\"]{left:40%}.gs-10>.grid-stack-item[gs-w=\"5\"]{width:50%}.gs-10>.grid-stack-item[gs-x=\"5\"]{left:50%}.gs-10>.grid-stack-item[gs-w=\"6\"]{width:60%}.gs-10>.grid-stack-item[gs-x=\"6\"]{left:60%}.gs-10>.grid-stack-item[gs-w=\"7\"]{width:70%}.gs-10>.grid-stack-item[gs-x=\"7\"]{left:70%}.gs-10>.grid-stack-item[gs-w=\"8\"]{width:80%}.gs-10>.grid-stack-item[gs-x=\"8\"]{left:80%}.gs-10>.grid-stack-item[gs-w=\"9\"]{width:90%}.gs-10>.grid-stack-item[gs-x=\"9\"]{left:90%}.gs-10>.grid-stack-item[gs-w=\"10\"]{width:100%}.gs-11>.grid-stack-item{width:9.091%}.gs-11>.grid-stack-item[gs-x=\"1\"]{left:9.091%}.gs-11>.grid-stack-item[gs-w=\"2\"]{width:18.182%}.gs-11>.grid-stack-item[gs-x=\"2\"]{left:18.182%}.gs-11>.grid-stack-item[gs-w=\"3\"]{width:27.273%}.gs-11>.grid-stack-item[gs-x=\"3\"]{left:27.273%}.gs-11>.grid-stack-item[gs-w=\"4\"]{width:36.364%}.gs-11>.grid-stack-item[gs-x=\"4\"]{left:36.364%}.gs-11>.grid-stack-item[gs-w=\"5\"]{width:45.455%}.gs-11>.grid-stack-item[gs-x=\"5\"]{left:45.455%}.gs-11>.grid-stack-item[gs-w=\"6\"]{width:54.545%}.gs-11>.grid-stack-item[gs-x=\"6\"]{left:54.545%}.gs-11>.grid-stack-item[gs-w=\"7\"]{width:63.636%}.gs-11>.grid-stack-item[gs-x=\"7\"]{left:63.636%}.gs-11>.grid-stack-item[gs-w=\"8\"]{width:72.727%}.gs-11>.grid-stack-item[gs-x=\"8\"]{left:72.727%}.gs-11>.grid-stack-item[gs-w=\"9\"]{width:81.818%}.gs-11>.grid-stack-item[gs-x=\"9\"]{left:81.818%}.gs-11>.grid-stack-item[gs-w=\"10\"]{width:90.909%}.gs-11>.grid-stack-item[gs-x=\"10\"]{left:90.909%}.gs-11>.grid-stack-item[gs-w=\"11\"]{width:100%}ax-grid-layout-container{display:block;border-style:solid;border-width:var(--ax-comp-grid-layout-container-border-width, 1px);border-color:rgba(var(--ax-comp-grid-layout-container-border-color, var(--ax-sys-border-color)));background-color:rgba(var(--ax-comp-grid-layout-container-bg-color, var(--ax-sys-body-bg-color)))}ax-grid-layout-widget{display:block}.grid-stack-item{cursor:pointer;border-radius:var(--ax-comp-grid-layout-stack-item-border-radius, var(--ax-sys-border-radius))}.grid-stack-item-content{display:flex;-webkit-user-select:none;user-select:none;text-align:center;align-items:center;justify-content:center;border-style:solid;border-radius:var(--ax-comp-grid-layout-stack-item-content-border-radius, var(--ax-sys-border-radius));border-width:var(--ax-comp-grid-layout-stack-item-content-border-width, 1px);border-color:rgba(var(--ax-comp-grid-layout-stack-item-content-border-color, var(--ax-sys-border-color)));background-color:rgba(var(--ax-comp-grid-layout-stack-item-content-bg-color, var(--ax-sys-color-ghost-200)))}.grid-stack-item-removing{animation:var(--ax-comp-grid-layout-stack-item-removing-animation, fadeAndBlur .5s linear forwards)}@keyframes fadeAndBlur{0%{opacity:1;filter:blur(0)}to{opacity:.8;filter:blur(5px)}}.grid-stack-trash{min-height:var(--ax-comp-grid-layout-stack-trash-min-height, 120px);background-repeat:no-repeat;background-position:center center;background-image:var(--ax-comp-grid-layout-stack-trash-bg-image, url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjY0cHgiIGhlaWdodD0iNjRweCIgdmlld0JveD0iMCAwIDQzOC41MjkgNDM4LjUyOSIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDM4LjUyOSA0MzguNTI5OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTQxNy42ODksNzUuNjU0Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2OC02LjU2My0yLjU2OGgtODguMjI0TDMwMi45MTcsMjUuNDFjLTIuODU0LTcuMDQ0LTcuOTk0LTEzLjA0LTE1LjQxMy0xNy45ODkgICAgQzI4MC4wNzgsMi40NzMsMjcyLjU1NiwwLDI2NC45NDUsMGgtOTEuMzYzYy03LjYxMSwwLTE1LjEzMSwyLjQ3My0yMi41NTQsNy40MjFjLTcuNDI0LDQuOTQ5LTEyLjU2MywxMC45NDQtMTUuNDE5LDE3Ljk4OSAgICBsLTE5Ljk4NSw0Ny42NzZoLTg4LjIyYy0yLjY2NywwLTQuODUzLDAuODU5LTYuNTY3LDIuNTY4Yy0xLjcwOSwxLjcxMy0yLjU2OCwzLjkwMy0yLjU2OCw2LjU2N3YxOC4yNzQgICAgYzAsMi42NjQsMC44NTUsNC44NTQsMi41NjgsNi41NjRjMS43MTQsMS43MTIsMy45MDQsMi41NjgsNi41NjcsMi41NjhoMjcuNDA2djI3MS44YzAsMTUuODAzLDQuNDczLDI5LjI2NiwxMy40MTgsNDAuMzk4ICAgIGM4Ljk0NywxMS4xMzksMTkuNzAxLDE2LjcwMywzMi4yNjQsMTYuNzAzaDIzNy41NDJjMTIuNTY2LDAsMjMuMzE5LTUuNzU2LDMyLjI2NS0xNy4yNjhjOC45NDUtMTEuNTIsMTMuNDE1LTI1LjE3NCwxMy40MTUtNDAuOTcxICAgIFYxMDkuNjI3aDI3LjQxMWMyLjY2MiwwLDQuODUzLTAuODU2LDYuNTYzLTIuNTY4YzEuNzA4LTEuNzA5LDIuNTctMy45LDIuNTctNi41NjRWODIuMjIxICAgIEM0MjAuMjYsNzkuNTU3LDQxOS4zOTcsNzcuMzY3LDQxNy42ODksNzUuNjU0eiBNMTY5LjMwMSwzOS42NzhjMS4zMzEtMS43MTIsMi45NS0yLjc2Miw0Ljg1My0zLjE0aDkwLjUwNCAgICBjMS45MDMsMC4zODEsMy41MjUsMS40Myw0Ljg1NCwzLjE0bDEzLjcwOSwzMy40MDRIMTU1LjMxMUwxNjkuMzAxLDM5LjY3OHogTTM0Ny4xNzMsMzgwLjI5MWMwLDQuMTg2LTAuNjY0LDguMDQyLTEuOTk5LDExLjU2MSAgICBjLTEuMzM0LDMuNTE4LTIuNzE3LDYuMDg4LTQuMTQxLDcuNzA2Yy0xLjQzMSwxLjYyMi0yLjQyMywyLjQyNy0yLjk5OCwyLjQyN0gxMDAuNDkzYy0wLjU3MSwwLTEuNTY1LTAuODA1LTIuOTk2LTIuNDI3ICAgIGMtMS40MjktMS42MTgtMi44MS00LjE4OC00LjE0My03LjcwNmMtMS4zMzEtMy41MTktMS45OTctNy4zNzktMS45OTctMTEuNTYxVjEwOS42MjdoMjU1LjgxNVYzODAuMjkxeiIgZmlsbD0iI2ZmOWNhZSIvPgoJCTxwYXRoIGQ9Ik0xMzcuMDQsMzQ3LjE3MmgxOC4yNzFjMi42NjcsMCw0Ljg1OC0wLjg1NSw2LjU2Ny0yLjU2N2MxLjcwOS0xLjcxOCwyLjU2OC0zLjkwMSwyLjU2OC02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTktNC44NTMtMi41NjgtNi41NjdjLTEuNzE0LTEuNzA5LTMuODk5LTIuNTY1LTYuNTY3LTIuNTY1SDEzNy4wNGMtMi42NjcsMC00Ljg1NCwwLjg1NS02LjU2NywyLjU2NSAgICBjLTEuNzExLDEuNzE0LTIuNTY4LDMuOTA0LTIuNTY4LDYuNTY3djE2NC40NTRjMCwyLjY2OSwwLjg1NCw0Ljg1MywyLjU2OCw2LjU3QzEzMi4xODYsMzQ2LjMxNiwxMzQuMzczLDM0Ny4xNzIsMTM3LjA0LDM0Ny4xNzJ6IiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTIxMC4xMjksMzQ3LjE3MmgxOC4yNzFjMi42NjYsMCw0Ljg1Ni0wLjg1NSw2LjU2NC0yLjU2N2MxLjcxOC0xLjcxOCwyLjU2OS0zLjkwMSwyLjU2OS02LjU3VjE3My41ODEgICAgYzAtMi42NjMtMC44NTItNC44NTMtMi41NjktNi41NjdjLTEuNzA4LTEuNzA5LTMuODk4LTIuNTY1LTYuNTY0LTIuNTY1aC0xOC4yNzFjLTIuNjY0LDAtNC44NTQsMC44NTUtNi41NjcsMi41NjUgICAgYy0xLjcxNCwxLjcxNC0yLjU2OCwzLjkwNC0yLjU2OCw2LjU2N3YxNjQuNDU0YzAsMi42NjksMC44NTQsNC44NTMsMi41NjgsNi41N0MyMDUuMjc0LDM0Ni4zMTYsMjA3LjQ2NSwzNDcuMTcyLDIxMC4xMjksMzQ3LjE3MnogICAgIiBmaWxsPSIjZmY5Y2FlIi8+CgkJPHBhdGggZD0iTTI4My4yMiwzNDcuMTcyaDE4LjI2OGMyLjY2OSwwLDQuODU5LTAuODU1LDYuNTctMi41NjdjMS43MTEtMS43MTgsMi41NjItMy45MDEsMi41NjItNi41N1YxNzMuNTgxICAgIGMwLTIuNjYzLTAuODUyLTQuODUzLTIuNTYyLTYuNTY3Yy0xLjcxMS0xLjcwOS0zLjkwMS0yLjU2NS02LjU3LTIuNTY1SDI4My4yMmMtMi42NywwLTQuODUzLDAuODU1LTYuNTcxLDIuNTY1ICAgIGMtMS43MTEsMS43MTQtMi41NjYsMy45MDQtMi41NjYsNi41Njd2MTY0LjQ1NGMwLDIuNjY5LDAuODU1LDQuODUzLDIuNTY2LDYuNTdDMjc4LjM2NywzNDYuMzE2LDI4MC41NSwzNDcuMTcyLDI4My4yMiwzNDcuMTcyeiIgZmlsbD0iI2ZmOWNhZSIvPgoJPC9nPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=))}\n"] }]
         }], ctorParameters: () => [] });
 
 /**

package/fesm2022/acorex-components-grid-layout-builder.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-grid-layout-builder.mjs","sources":["../../../../libs/components/grid-layout-builder/src/lib/grid-layout-widget.component.ts","../../../../libs/components/grid-layout-builder/src/lib/grid-layout-container.component.ts","../../../../libs/components/grid-layout-builder/src/lib/grid-layout-builder.module.ts","../../../../libs/components/grid-layout-builder/src/lib/types.ts","../../../../libs/components/grid-layout-builder/src/acorex-components-grid-layout-builder.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXGridLayoutNode, AXGridLayoutWidget, AXGridLayoutWidgetCompElement } from './types';\n\n/**\n * A component that represents a widget within the grid layout. It serves as an individual\n * item within a `gridstack` layout, providing options for customization and interaction.\n *\n * This widget component is used within the `AXGridLayoutContainerComponent` to manage the\n * layout of widgets in a grid system. The component interacts with the GridStack library\n * to offer features like resizing, movement, and customization of the widget's properties.\n *\n * @example\n * <ax-grid-layout-widget [options]=\"widgetOptions\">\n *   <div>Widget Content</div>\n * </ax-grid-layout-widget>\n */\n@Component({\n  selector: 'ax-grid-layout-widget',\n  template: ` <div class=\"grid-stack-item-content\">\n    <ng-template #container></ng-template>\n    <ng-content></ng-content>\n    {{ options().content }}\n  </div>`,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class AXGridLayoutWidgetComponent {\n  /**\n   * A reference to the native element of this widget component. It is used for interaction\n   * with the underlying DOM element and for updating the widget properties via GridStack.\n   */\n  private readonly elementRef: ElementRef<AXGridLayoutWidgetCompElement> = inject(ElementRef);\n  \n  /**\n   * The native element of the widget component.\n   */\n  public el: AXGridLayoutWidgetCompElement = this.elementRef.nativeElement;\n\n  /**\n   * The current options of the widget. These options are used to define the layout,\n   * content, and behavior of the widget within the grid.\n   *\n   * @internal\n   */\n  private _options?: AXGridLayoutNode;\n\n  /**\n   * Input property that represents the widget's configuration options.\n   *\n   * The options include properties such as position, size, content, and other\n   * configuration values. These options are updated dynamically.\n   *\n   * @param {AXGridLayoutNode} val The configuration object for the widget.\n   * @returns {AXGridLayoutWidgetCompElement} The element associated with the widget.\n   */\n  public options = input(null, {\n    transform: (val: AXGridLayoutNode) => {\n      const grid = this.el.gridstackNode?.grid;\n      if (grid) {\n        grid.update(this.el, val);\n      } else {\n        this._options = { ...val, el: this.el };\n      }\n      return this.el.gridstackNode || this._options || { el: this.el };\n    },\n  });\n\n  /**\n   * Clears the widget's options.\n   *\n   * This method removes any existing options set for the widget and resets it\n   * to its default state.\n   */\n  public clearOptions() {\n    this._options = null;\n  }\n\n  /**\n   * Constructor that initializes the widget component and sets the reference to\n   * the grid widget component in the element's properties.\n   */\n  constructor() {\n    this.el._gridWidgetComp = this;\n  }\n\n  /**\n   * Removes this widget from the grid.\n   *\n   * This method interacts with GridStack to remove the widget from the layout.\n   * Once removed, the widget will no longer be part of the grid.\n   */\n  public removeWidget() {\n    this.el.gridstackNode.grid.removeWidget(this.el);\n  }\n\n  /**\n   * Sets whether the widget can be locked (i.e., not resizable).\n   *\n   * @param {boolean} state Whether the widget should be locked or not.\n   * @remarks\n   * If the widget is locked, it cannot be resized.\n   */\n  public setlockable(state: boolean): void {\n    this.el.gridstackNode.grid.update(this.el, { noResize: state });\n  }\n\n  /**\n   * Sets whether the widget can be resized.\n   *\n   * @param {boolean} state Whether the widget should be resizable or not.\n   * @remarks\n   * If the widget is resizable, the user can change its size by dragging.\n   */\n  public setResizable(state: boolean): void {\n    this.el.gridstackNode.grid.update(this.el, { noMove: state });\n  }\n\n  /**\n   * Updates the options of the widget.\n   *\n   * @param {AXGridLayoutWidget} options The new options to apply to the widget.\n   */\n  setOptions(options: AXGridLayoutWidget) {\n    this.el.gridstackNode.grid.update(this.el, options);\n  }\n\n  /**\n   * Retrieves the current options of the widget.\n   *\n   * @returns {AXGridLayoutNode} The current configuration options of the widget.\n   * @remarks\n   * This method provides access to the widget's layout and configuration.\n   * If no specific options are set, it returns the default options.\n   */\n  getOptions(): AXGridLayoutNode {\n    const gridstackNode = this.el.gridstackNode;\n    if (gridstackNode) {\n      return {\n        ...gridstackNode,\n        el: this.el,\n      };\n    }\n    return this.options() || this._options || { el: this.el };\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  NgZone,\n  ViewEncapsulation,\n  WritableSignal,\n  computed,\n  contentChildren,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\nimport {\n  AXGridLayout,\n  AXGridLayoutContainerCompElement,\n  AXGridLayoutDroppedEvent,\n  AXGridLayoutElementEvent,\n  AXGridLayoutEventEvent,\n  AXGridLayoutNode,\n  AXGridLayoutNodesEvent,\n  AXGridLayoutOptions,\n  AXGridLayoutWidget,\n  AXGridLayoutWidgetCompElement,\n  AXGridLayoutWidgetElement,\n  AXSaveCallback,\n} from './types';\n\n/**\n * The `AXGridLayoutContainerComponent` is an Angular component that acts as a wrapper for the GridStack library.\n * It provides a flexible grid layout system for arranging items within a container. It integrates with GridStack.js\n * and allows dynamic manipulation of grid items (widgets), including adding, removing, resizing, and dragging.\n *\n * This component uses Angular's reactive signals, outputs, and lifecycle hooks to manage grid state and interactions.\n */\n@Component({\n  selector: 'ax-grid-layout-container',\n  template: ` <ng-template #container></ng-template>\n    <ng-content></ng-content>`,\n  styleUrl: './grid-layout-container.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class AXGridLayoutContainerComponent {\n  private serializedData?: AXGridLayoutOptions;\n  /**\n   * Content children elements of type `AXGridLayoutWidgetComponent` that are dynamically managed within the grid.\n   */\n  private items = contentChildren(AXGridLayoutWidgetComponent);\n\n  /**\n   * Input that holds options for configuring the GridStack grid layout.\n   */\n  public options = input<AXGridLayoutOptions>();\n\n  /**\n   * A computed signal that merges the provided `options` with the grid's existing configuration (if any).\n   */\n  private calcOptions = computed(() => this.grid()?.opts || this.options() || {});\n\n  /**\n   * A reference to the native element of the container component.\n   */\n  private readonly elementRef: ElementRef<AXGridLayoutContainerCompElement> = inject(ElementRef);\n\n  /**\n   * Angular's NgZone for running code outside Angular's change detection.\n   */\n  private ngZone = inject(NgZone);\n\n  /**\n   * A writable signal representing the current state of the grid.\n   */\n  private grid: WritableSignal<AXGridLayout> = signal(null);\n\n  /**\n   * Flag indicating whether the grid has been loaded with content.\n   */\n  private loaded?: boolean;\n\n  /**\n   * A reference to the native element representing the grid container.\n   */\n  private el: AXGridLayoutContainerCompElement = this.elementRef.nativeElement;\n\n  // Outputs\n\n  /**\n   * Output event emitted when a widget is added to the grid.\n   */\n  protected onAdded = output<AXGridLayoutNodesEvent>();\n\n  /**\n   * Output event emitted when a widget or layout is changed.\n   */\n  protected onChange = output<AXGridLayoutNodesEvent>();\n\n  /**\n   * Output event emitted when the grid is disabled.\n   */\n  protected onDisable = output<AXGridLayoutEventEvent>();\n\n  /**\n   * Output event emitted during a drag operation on a widget.\n   */\n  protected onDrag = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when drag starts on a widget.\n   */\n  protected onDragStart = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when drag stops on a widget.\n   */\n  protected onDragStop = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when a widget is dropped on the grid.\n   */\n  protected onDropped = output<AXGridLayoutDroppedEvent>();\n\n  /**\n   * Output event emitted when the grid is enabled.\n   */\n  protected onEnable = output<AXGridLayoutEventEvent>();\n\n  /**\n   * Output event emitted when a widget is removed from the grid.\n   */\n  protected onRemoved = output<AXGridLayoutNodesEvent>();\n\n  /**\n   * Output event emitted when a widget is resized.\n   */\n  protected onResize = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when resizing starts on a widget.\n   */\n  protected onResizeStart = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when resizing stops on a widget.\n   */\n  protected onResizeStop = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when the grid is rendered.\n   */\n  protected isRendered = output<boolean>();\n\n  // Model\n\n  /**\n   * Model that tracks whether the grid container is empty.\n   */\n  protected isEmpty = model(false);\n\n  // Lifecycle\n\n  /**\n   * Initializes the grid layout component and sets up the GridStack grid.\n   */\n  constructor() {\n    this.el._gridComp = this;\n  }\n\n  /**\n   * Angular lifecycle hook that initializes the grid once the component is created.\n   * It sets up GridStack and loads any initial layout configuration.\n   */\n  protected async ngOnInit(): Promise<void> {\n    this.ngZone.runOutsideAngular(async () => {\n      this.loaded = !!this.calcOptions()?.children?.length;\n      const { GridStack } = await import('gridstack');\n      this.grid.set(GridStack.init(this.calcOptions(), this.el));\n      this.checkEmpty();\n    });\n  }\n\n  /**\n   * Angular lifecycle hook that cleans up resources when the component is destroyed.\n   * It removes event listeners and destroys the GridStack instance.\n   */\n  protected ngOnDestroy(): void {\n    this.unhookEvents(this.grid());\n    this.grid()?.destroy();\n  }\n\n  // Effects\n\n  /**\n   * Effect that reacts to changes in the grid layout and updates the DOM accordingly.\n   */\n  private gridChange = effect(() => {\n    if (this.grid()) {\n      if (!this.loaded) this.updateAll();\n      this.hookEvents(this.grid());\n      this.isRendered.emit(true);\n      console.log('Grid Rendered!');\n    }\n  });\n\n  /**\n   * Effect that reacts to changes in child widgets and updates the grid layout.\n   */\n  private childChange = effect(() => {\n    if (this.items()) {\n      this.updateAll();\n    }\n  });\n\n  // Methods\n\n  /**\n   * Updates the grid layout with the current set of widgets, clearing previous options.\n   */\n  private updateAll() {\n    if (!this.grid()) return;\n    const layout: AXGridLayoutWidget[] = [];\n    this.items()?.forEach((item) => {\n      layout.push(item.options());\n      item.clearOptions();\n    });\n    this.grid().load(layout);\n  }\n\n  /**\n   * Checks whether the grid is empty and updates the `isEmpty` model accordingly.\n   */\n  private checkEmpty() {\n    if (this.grid()) {\n      const isEmpty = !this.grid().engine.nodes.length;\n      if (isEmpty === this.isEmpty()) return;\n      this.isEmpty.set(isEmpty);\n    }\n  }\n\n  // Event Listeners\n\n  /**\n   * Hooks event listeners to the grid for various grid events (e.g., add, remove, drag, resize).\n   */\n  private hookEvents(grid?: AXGridLayout): void {\n    if (grid) {\n      grid\n        .on('added', (event: Event, nodes: AXGridLayoutNode[]) => {\n          this.checkEmpty();\n          this.onAdded.emit({ event, nodes });\n        })\n        .on('removed', (event: Event, nodes: AXGridLayoutNode[]) => {\n          this.checkEmpty();\n          this.onRemoved.emit({ event, nodes });\n        })\n        .on('change', (event: Event, nodes: AXGridLayoutNode[]) => this.onChange.emit({ event, nodes }))\n        .on('disable', (event: Event) => this.onDisable.emit({ event }))\n        .on('drag', (event: Event, el: AXGridLayoutWidgetElement) => this.onDrag.emit({ event, el }))\n        .on('dragstart', (event: Event, el: AXGridLayoutWidgetElement) =>\n          this.onDragStart.emit({ event, el }),\n        )\n        .on('dragstop', (event: Event, el: AXGridLayoutWidgetElement) => this.onDragStop.emit({ event, el }))\n        .on('dropped', (event: Event, previousNode: AXGridLayoutNode, newNode: AXGridLayoutNode) =>\n          this.onDropped.emit({ event, previousNode, newNode }),\n        )\n        .on('enable', (event: Event) => this.onEnable.emit({ event }))\n        .on('resize', (event: Event, el: AXGridLayoutWidgetElement) => this.onResize.emit({ event, el }))\n        .on('resizestart', (event: Event, el: AXGridLayoutWidgetElement) =>\n          this.onResizeStart.emit({ event, el }),\n        )\n        .on('resizestop', (event: Event, el: AXGridLayoutWidgetElement) =>\n          this.onResizeStop.emit({ event, el }),\n        );\n    }\n  }\n\n  /**\n   * Removes all event listeners from the grid.\n   */\n  private unhookEvents(grid?: AXGridLayout) {\n    if (grid) {\n      grid.offAll();\n    }\n  }\n\n  // Public Methods\n\n  /**\n   * Adds a widget to the grid layout. Optionally arranges the grid after adding the widget.\n   *\n   * @param item The widget to add.\n   * @param withAutoArrange If true, the grid will be auto-arranged after adding the widget.\n   * @returns The added widget's layout node.\n   */\n  public add(item: AXGridLayoutWidget, withAutoArrange = false): AXGridLayoutNode {\n    if (withAutoArrange) {\n      this.autoArrange();\n    }\n    return this.grid().addWidget(item).gridstackNode;\n  }\n\n  /**\n   * Removes a widget from the grid layout.\n   *\n   * @param element The widget element to remove.\n   * @returns The updated grid instance.\n   */\n  public remove(element: AXGridLayoutWidgetCompElement): AXGridLayout {\n    return this.grid().removeWidget(element);\n  }\n\n  /**\n   * Clears all widgets from the grid layout.\n   *\n   * @returns The updated grid instance.\n   */\n  public clear(): AXGridLayout {\n    return this.grid().removeAll();\n  }\n\n  /**\n   * Saves the current state of the grid and its widgets.\n   *\n   * @param saveContent If true, the content of the widgets will be saved.\n   * @param saveGridOpt If true, the grid options will be saved.\n   * @param saveCallback Optional callback to invoke after saving the grid state.\n   * @returns The saved grid layout options.\n   */\n  public save(saveContent = false, saveGridOpt = true, saveCallback?: AXSaveCallback): AXGridLayoutOptions {\n    return (this.serializedData = this.grid().save(\n      saveContent,\n      saveGridOpt,\n      saveCallback,\n    ) as AXGridLayoutOptions);\n  }\n\n  /**\n   * Loads a serialized grid layout configuration into the grid.\n   *\n   * @param serializedData The serialized grid options to load.\n   * @param cleanBeforeLoad If true, the grid will be cleared before loading the new layout.\n   * @returns A promise that resolves to the loaded grid instance.\n   */\n  public async load(\n    serializedData: AXGridLayoutOptions = this.serializedData,\n    cleanBeforeLoad = true,\n  ): Promise<AXGridLayout> {\n    if (cleanBeforeLoad) {\n      this.grid().removeAll();\n    }\n    const { GridStack } = await import('gridstack');\n    return GridStack.addGrid(this.el, serializedData);\n  }\n\n  /**\n   * Automatically arranges the widgets within the grid layout.\n   */\n  public autoArrange() {\n    this.grid().compact();\n  }\n\n  /**\n   * Sets whether widgets in the grid can be moved (dragged).\n   *\n   * @param state If true, widgets are movable; otherwise, they are locked.\n   * @param recurse If true, the setting is applied to nested widgets as well.\n   */\n  public setlockable(state: boolean, recurse?: boolean) {\n    this.grid().enableMove(state, recurse);\n  }\n\n  /**\n   * Sets whether widgets in the grid can be resized.\n   *\n   * @param state If true, widgets are resizable; otherwise, they are fixed.\n   * @param recurse If true, the setting is applied to nested widgets as well.\n   */\n  public setResizable(state: boolean, recurse?: boolean) {\n    this.grid().enableResize(state, recurse);\n  }\n\n  /**\n   * Retrieves all the child nodes (widgets) in the grid layout.\n   *\n   * @returns An array of grid layout nodes representing the widgets.\n   */\n  public getChildren(): AXGridLayoutNode[] {\n    return this.grid().engine.nodes;\n  }\n\n  /**\n   * Sets up draggable functionality for external elements to be added to the grid.\n   *\n   * @param dragIn A CSS selector or an array of elements that can be dragged into the grid.\n   * @param widgets An optional set of widgets that are draggable into the grid.\n   */\n  public async setupDraggable(dragIn?: string | HTMLElement[], widgets?: AXGridLayoutWidget) {\n    if (typeof dragIn === 'string') {\n      document.querySelectorAll(dragIn).forEach((item) => {\n        if (!item.classList.contains('grid-stack-item')) {\n          item.classList.add('grid-stack-item');\n        }\n      });\n    }\n    const { GridStack } = await import('gridstack');\n    GridStack.setupDragIn(dragIn, undefined, [widgets]);\n  }\n\n  /**\n   * Sets grid layout options.\n   *\n   * @param options The new grid layout options to apply.\n   */\n  public setOption(options: AXGridLayoutOptions) {\n    this.grid().opts = options;\n  }\n\n  /**\n   * Rotates a specific widget element in the grid layout.\n   *\n   * @param element The widget element to rotate.\n   */\n  public rotate(element: AXGridLayoutWidgetCompElement) {\n    this.grid().rotate(element);\n  }\n\n  /**\n   * Sets the number of columns in the grid layout.\n   *\n   * @param count The number of columns to set.\n   */\n  public setColumn(count: number) {\n    this.grid().column(count, 'moveScale');\n  }\n\n  /**\n   * Retrieves the current grid layout options.\n   *\n   * @returns The current grid options.\n   */\n  public getOptions() {\n    return this.grid().opts;\n  }\n}\n","/**\n * gridstack.component.ts 11.1.1-dev\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\n */\n\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AXGridLayoutContainerComponent } from './grid-layout-container.component';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: [AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent],\n  exports: [AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent],\n})\nexport class AXGridLayoutBuilderModule {\n  // constructor() {\n  // set globally our method to create the right widget type\n  // GridStack.addRemoveCB = gsCreateNgComponents;\n  // GridStack.saveCB = gsSaveAdditionalNgInfo;\n  // }\n}\n","import { AXGridLayoutContainerComponent } from './grid-layout-container.component';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\n//TYPES\nexport type AXGridLayoutNode = import('gridstack').GridStackNode;\nexport type AXGridLayout = import('gridstack').GridStack;\nexport type AXGridLayoutOptions = import('gridstack').GridStackOptions;\nexport type AXGridLayoutWidget = import('gridstack').GridStackWidget & { data?: any };\nexport type AXGridLayoutContainerElement = import('gridstack').GridHTMLElement;\nexport type AXGridLayoutWidgetElement = import('gridstack').GridItemHTMLElement;\n//EVENTS\nexport type AXGridLayoutEventEvent = { event: Event };\nexport type AXGridLayoutElementEvent = { event: Event; el: AXGridLayoutWidgetElement };\nexport type AXGridLayoutNodesEvent = { event: Event; nodes: AXGridLayoutNode[] };\nexport type AXGridLayoutDroppedEvent = {\n  event: Event;\n  previousNode: AXGridLayoutNode;\n  newNode: AXGridLayoutNode;\n};\n//COMPONENTS\nexport interface AXGridLayoutContainerCompElement extends AXGridLayoutContainerElement {\n  _gridComp?: AXGridLayoutContainerComponent;\n}\nexport interface AXGridLayoutWidgetCompElement extends AXGridLayoutWidgetElement {\n  _gridWidgetComp?: AXGridLayoutWidgetComponent;\n}\n\n//Callback\nexport type AXSaveCallback = import('gridstack').SaveFcn;\n\n// //DYNAMIC\n// export type AXNgCompInputs = { [key: string]: any };\n// export type SelectorToType = { [key: string]: Type<object> }; // selector string to runtime Type mapping\n// export interface AXNgGridLayoutWidget extends AXGridLayoutWidget {\n//   selector?: string; //Angular tag selector for this component to create at runtime\n//   input?: AXNgCompInputs; // serialized data for the component input fields\n//   subGridOpts?: AXNgGridLayoutOptions; // nested grid options\n// }\n// export interface AXNgGridLayoutNode extends AXGridLayoutNode {\n//   selector?: string; // component type to create as content\n// }\n// export interface AXNgGridLayoutOptions extends AXGridLayoutOptions {\n//   children?: AXNgGridLayoutWidget[];\n//   subGridOpts?: AXNgGridLayoutOptions;\n// }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-grid-layout-builder.mjs","sources":["../../../../libs/components/grid-layout-builder/src/lib/grid-layout-widget.component.ts","../../../../libs/components/grid-layout-builder/src/lib/grid-layout-container.component.ts","../../../../libs/components/grid-layout-builder/src/lib/grid-layout-builder.module.ts","../../../../libs/components/grid-layout-builder/src/lib/types.ts","../../../../libs/components/grid-layout-builder/src/acorex-components-grid-layout-builder.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXGridLayoutNode, AXGridLayoutWidget, AXGridLayoutWidgetCompElement } from './types';\n\n/**\n * A component that represents a widget within the grid layout. It serves as an individual\n * item within a `gridstack` layout, providing options for customization and interaction.\n *\n * This widget component is used within the `AXGridLayoutContainerComponent` to manage the\n * layout of widgets in a grid system. The component interacts with the GridStack library\n * to offer features like resizing, movement, and customization of the widget's properties.\n *\n * @example\n * <ax-grid-layout-widget [options]=\"widgetOptions\">\n *   <div>Widget Content</div>\n * </ax-grid-layout-widget>\n */\n@Component({\n  selector: 'ax-grid-layout-widget',\n  template: ` <div class=\"grid-stack-item-content\">\n    <ng-template #container></ng-template>\n    <ng-content></ng-content>\n    {{ options().content }}\n  </div>`,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class AXGridLayoutWidgetComponent {\n  /**\n   * A reference to the native element of this widget component. It is used for interaction\n   * with the underlying DOM element and for updating the widget properties via GridStack.\n   */\n  private readonly elementRef: ElementRef<AXGridLayoutWidgetCompElement> = inject(ElementRef);\n  \n  /**\n   * The native element of the widget component.\n   */\n  public el: AXGridLayoutWidgetCompElement = this.elementRef.nativeElement;\n\n  /**\n   * The current options of the widget. These options are used to define the layout,\n   * content, and behavior of the widget within the grid.\n   *\n   * @internal\n   */\n  private _options?: AXGridLayoutNode;\n\n  /**\n   * Input property that represents the widget's configuration options.\n   *\n   * The options include properties such as position, size, content, and other\n   * configuration values. These options are updated dynamically.\n   *\n   * @param {AXGridLayoutNode} val The configuration object for the widget.\n   * @returns {AXGridLayoutWidgetCompElement} The element associated with the widget.\n   */\n  public options = input(null, {\n    transform: (val: AXGridLayoutNode) => {\n      const grid = this.el.gridstackNode?.grid;\n      if (grid) {\n        grid.update(this.el, val);\n      } else {\n        this._options = { ...val, el: this.el };\n      }\n      return this.el.gridstackNode || this._options || { el: this.el };\n    },\n  });\n\n  /**\n   * Clears the widget's options.\n   *\n   * This method removes any existing options set for the widget and resets it\n   * to its default state.\n   */\n  public clearOptions() {\n    this._options = null;\n  }\n\n  /**\n   * Constructor that initializes the widget component and sets the reference to\n   * the grid widget component in the element's properties.\n   */\n  constructor() {\n    this.el._gridWidgetComp = this;\n  }\n\n  /**\n   * Removes this widget from the grid.\n   *\n   * This method interacts with GridStack to remove the widget from the layout.\n   * Once removed, the widget will no longer be part of the grid.\n   */\n  public removeWidget() {\n    this.el.gridstackNode.grid.removeWidget(this.el);\n  }\n\n  /**\n   * Sets whether the widget can be locked (i.e., not resizable).\n   *\n   * @param {boolean} state Whether the widget should be locked or not.\n   * @remarks\n   * If the widget is locked, it cannot be resized.\n   */\n  public setlockable(state: boolean): void {\n    this.el.gridstackNode.grid.update(this.el, { noResize: state });\n  }\n\n  /**\n   * Sets whether the widget can be resized.\n   *\n   * @param {boolean} state Whether the widget should be resizable or not.\n   * @remarks\n   * If the widget is resizable, the user can change its size by dragging.\n   */\n  public setResizable(state: boolean): void {\n    this.el.gridstackNode.grid.update(this.el, { noMove: state });\n  }\n\n  /**\n   * Updates the options of the widget.\n   *\n   * @param {AXGridLayoutWidget} options The new options to apply to the widget.\n   */\n  setOptions(options: AXGridLayoutWidget) {\n    this.el.gridstackNode.grid.update(this.el, options);\n  }\n\n  /**\n   * Retrieves the current options of the widget.\n   *\n   * @returns {AXGridLayoutNode} The current configuration options of the widget.\n   * @remarks\n   * This method provides access to the widget's layout and configuration.\n   * If no specific options are set, it returns the default options.\n   */\n  getOptions(): AXGridLayoutNode {\n    const gridstackNode = this.el.gridstackNode;\n    if (gridstackNode) {\n      return {\n        ...gridstackNode,\n        el: this.el,\n      };\n    }\n    return this.options() || this._options || { el: this.el };\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  NgZone,\n  ViewEncapsulation,\n  WritableSignal,\n  computed,\n  contentChildren,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { merge } from 'lodash-es';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\nimport {\n  AXGridLayout,\n  AXGridLayoutContainerCompElement,\n  AXGridLayoutDroppedEvent,\n  AXGridLayoutElementEvent,\n  AXGridLayoutEventEvent,\n  AXGridLayoutNode,\n  AXGridLayoutNodesEvent,\n  AXGridLayoutOptions,\n  AXGridLayoutWidget,\n  AXGridLayoutWidgetCompElement,\n  AXGridLayoutWidgetElement,\n  AXSaveCallback,\n} from './types';\n\n/**\n * The `AXGridLayoutContainerComponent` is an Angular component that acts as a wrapper for the GridStack library.\n * It provides a flexible grid layout system for arranging items within a container. It integrates with GridStack.js\n * and allows dynamic manipulation of grid items (widgets), including adding, removing, resizing, and dragging.\n *\n * This component uses Angular's reactive signals, outputs, and lifecycle hooks to manage grid state and interactions.\n */\n@Component({\n  selector: 'ax-grid-layout-container',\n  template: ` <ng-template #container></ng-template>\n    <ng-content></ng-content>`,\n  styleUrl: './grid-layout-container.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  standalone: false,\n})\nexport class AXGridLayoutContainerComponent {\n  private serializedData?: AXGridLayoutOptions;\n  /**\n   * Content children elements of type `AXGridLayoutWidgetComponent` that are dynamically managed within the grid.\n   */\n  private items = contentChildren(AXGridLayoutWidgetComponent);\n\n  /**\n   * Input that holds options for configuring the GridStack grid layout.\n   */\n  public options = input<AXGridLayoutOptions>();\n\n  /**\n   * A computed signal that merges the provided `options` with the grid's existing configuration (if any).\n   */\n  private calcOptions = computed(() => this.grid()?.opts || this.options() || {});\n\n  /**\n   * A reference to the native element of the container component.\n   */\n  private readonly elementRef: ElementRef<AXGridLayoutContainerCompElement> = inject(ElementRef);\n\n  /**\n   * Angular's NgZone for running code outside Angular's change detection.\n   */\n  private ngZone = inject(NgZone);\n\n  /**\n   * A writable signal representing the current state of the grid.\n   */\n  private grid: WritableSignal<AXGridLayout | undefined> = signal(undefined);\n\n  /**\n   * Flag indicating whether the grid has been loaded with content.\n   */\n  private loaded?: boolean;\n\n  /**\n   * A reference to the native element representing the grid container.\n   */\n  private el: AXGridLayoutContainerCompElement = this.elementRef.nativeElement;\n\n  // Outputs\n\n  /**\n   * Output event emitted when a widget is added to the grid.\n   */\n  protected onAdded = output<AXGridLayoutNodesEvent>();\n\n  /**\n   * Output event emitted when a widget or layout is changed.\n   */\n  protected onChange = output<AXGridLayoutNodesEvent>();\n\n  /**\n   * Output event emitted when the grid is disabled.\n   */\n  protected onDisable = output<AXGridLayoutEventEvent>();\n\n  /**\n   * Output event emitted during a drag operation on a widget.\n   */\n  protected onDrag = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when drag starts on a widget.\n   */\n  protected onDragStart = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when drag stops on a widget.\n   */\n  protected onDragStop = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when a widget is dropped on the grid.\n   */\n  protected onDropped = output<AXGridLayoutDroppedEvent>();\n\n  /**\n   * Output event emitted when the grid is enabled.\n   */\n  protected onEnable = output<AXGridLayoutEventEvent>();\n\n  /**\n   * Output event emitted when a widget is removed from the grid.\n   */\n  protected onRemoved = output<AXGridLayoutNodesEvent>();\n\n  /**\n   * Output event emitted when a widget is resized.\n   */\n  protected onResize = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when resizing starts on a widget.\n   */\n  protected onResizeStart = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when resizing stops on a widget.\n   */\n  protected onResizeStop = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when the grid is rendered.\n   */\n  protected isRendered = output<boolean>();\n\n  // Model\n\n  /**\n   * Model that tracks whether the grid container is empty.\n   */\n  protected isEmpty = model(false);\n\n  // Lifecycle\n\n  /**\n   * Initializes the grid layout component and sets up the GridStack grid.\n   */\n  constructor() {\n    this.el._gridComp = this;\n  }\n\n  /**\n   * Angular lifecycle hook that initializes the grid once the component is created.\n   * It sets up GridStack and loads any initial layout configuration.\n   */\n  protected async ngOnInit(): Promise<void> {\n    this.ngZone.runOutsideAngular(async () => {\n      this.loaded = !!this.calcOptions()?.children?.length;\n      const { GridStack } = await import('gridstack');\n      this.grid.set(GridStack.init(this.calcOptions(), this.el));\n      this.checkEmpty();\n    });\n  }\n\n  /**\n   * Angular lifecycle hook that cleans up resources when the component is destroyed.\n   * It removes event listeners and destroys the GridStack instance.\n   */\n  protected ngOnDestroy(): void {\n    this.unhookEvents(this.grid());\n    this.grid()?.destroy();\n  }\n\n  // Effects\n\n  /**\n   * Effect that reacts to changes in the grid layout and updates the DOM accordingly.\n   */\n  private gridChange = effect(() => {\n    if (this.grid()) {\n      if (!this.loaded) this.updateAll();\n      this.hookEvents(this.grid());\n      this.isRendered.emit(true);\n      console.log('Grid Rendered!');\n    }\n  });\n\n  /**\n   * Effect that reacts to changes in child widgets and updates the grid layout.\n   */\n  private childChange = effect(() => {\n    if (this.items()) {\n      this.updateAll();\n    }\n  });\n\n  // Methods\n\n  /**\n   * Updates the grid layout with the current set of widgets, clearing previous options.\n   */\n  private updateAll() {\n    if (!this.grid()) return;\n    const layout: AXGridLayoutWidget[] = [];\n    this.items()?.forEach((item) => {\n      layout.push(item.options());\n      item.clearOptions();\n    });\n    this.grid().load(layout);\n  }\n\n  /**\n   * Checks whether the grid is empty and updates the `isEmpty` model accordingly.\n   */\n  private checkEmpty() {\n    if (this.grid()) {\n      const isEmpty = !this.grid().engine.nodes.length;\n      if (isEmpty === this.isEmpty()) return;\n      this.isEmpty.set(isEmpty);\n    }\n  }\n\n  // Event Listeners\n\n  /**\n   * Hooks event listeners to the grid for various grid events (e.g., add, remove, drag, resize).\n   */\n  private hookEvents(grid?: AXGridLayout): void {\n    if (grid) {\n      grid\n        .on('added', (event: Event, nodes: AXGridLayoutNode[]) => {\n          this.checkEmpty();\n          this.onAdded.emit({ event, nodes });\n        })\n        .on('removed', (event: Event, nodes: AXGridLayoutNode[]) => {\n          this.checkEmpty();\n          this.onRemoved.emit({ event, nodes });\n        })\n        .on('change', (event: Event, nodes: AXGridLayoutNode[]) => this.onChange.emit({ event, nodes }))\n        .on('disable', (event: Event) => this.onDisable.emit({ event }))\n        .on('drag', (event: Event, el: AXGridLayoutWidgetElement) => this.onDrag.emit({ event, el }))\n        .on('dragstart', (event: Event, el: AXGridLayoutWidgetElement) =>\n          this.onDragStart.emit({ event, el }),\n        )\n        .on('dragstop', (event: Event, el: AXGridLayoutWidgetElement) => this.onDragStop.emit({ event, el }))\n        .on('dropped', (event: Event, previousNode: AXGridLayoutNode, newNode: AXGridLayoutNode) =>\n          this.onDropped.emit({ event, previousNode, newNode }),\n        )\n        .on('enable', (event: Event) => this.onEnable.emit({ event }))\n        .on('resize', (event: Event, el: AXGridLayoutWidgetElement) => this.onResize.emit({ event, el }))\n        .on('resizestart', (event: Event, el: AXGridLayoutWidgetElement) =>\n          this.onResizeStart.emit({ event, el }),\n        )\n        .on('resizestop', (event: Event, el: AXGridLayoutWidgetElement) =>\n          this.onResizeStop.emit({ event, el }),\n        );\n    }\n  }\n\n  /**\n   * Removes all event listeners from the grid.\n   */\n  private unhookEvents(grid?: AXGridLayout) {\n    if (grid) {\n      grid.offAll();\n    }\n  }\n\n  //PUBLIC SETTER METHODS\n\n  /**\n   * Creates a new widget and returns it.\n   * @param w - Widget position/size options.\n   * @returns The created widget's HTML element, or `undefined` if the grid is not initialized.\n   */\n  public addWidget(w: AXGridLayoutWidget, withAutoArrange = false): AXGridLayoutWidgetElement | undefined {\n    if (withAutoArrange) {\n      this.compact();\n    }\n    return this.grid()?.addWidget(w);\n  }\n\n  /**\n   * Re-layout grid items to reclaim any empty space.\n   * @param layout - Compaction mode: 'list' or 'compact'. Default is 'compact'.\n   * @param doSort - Whether to sort items automatically. Default is `true`.\n   */\n  public compact(layout: 'list' | 'compact' = 'compact', doSort = true): void {\n    this.grid()?.compact(layout, doSort);\n  }\n\n  /**\n   * Updates the current cell height.\n   * @param val - The new cell height value.\n   * @param update - Whether to rebuild the internal CSS stylesheet. Default is `true`.\n   */\n  public setCellHeight(val: number, update = true): void {\n    this.grid()?.cellHeight(val, update);\n  }\n\n  /**\n   * Sets the number of columns in the grid and updates existing widgets to conform to the new layout.\n   * @param column - Number of columns (must be > 0). Default is 12.\n   * @param layout - Re-layout behavior: 'list', 'compact', 'moveScale', 'move', 'scale', 'none'.\n   *                Default is 'moveScale'.\n   */\n  public setColumn(\n    column: number,\n    layout: 'list' | 'compact' | 'moveScale' | 'move' | 'scale' | 'none' = 'moveScale',\n  ): void {\n    this.grid()?.column(column, layout);\n  }\n\n  /**\n   * Destroys the grid instance.\n   * @param removeDOM - If `false`, nodes and grid will not be removed from the DOM. Default is `true`.\n   */\n  public destroy(removeDOM = true): void {\n    this.grid()?.destroy(removeDOM);\n  }\n\n  /**\n   * Sets whether widgets in the grid can be moved (dragged).\n   *\n   * @param state If true, widgets are movable; otherwise, they are locked.\n   * @param recurse If true, the setting is applied to nested widgets as well.\n   */\n  public setMovable(state: boolean, recurse?: boolean) {\n    this.grid().enableMove(state, recurse);\n  }\n\n  /**\n   * Sets whether widgets in the grid can be resized.\n   *\n   * @param state If true, widgets are resizable; otherwise, they are fixed.\n   * @param recurse If true, the setting is applied to nested widgets as well.\n   */\n  public setResizable(state: boolean, recurse?: boolean) {\n    this.grid().enableResize(state, recurse);\n  }\n\n  /**\n   * Sets or gets the floating behavior of widgets.\n   * @param val - If provided, sets floating behavior (`true` or `false`). If not provided, returns the current value.\n   * @returns The current floating behavior if `val` is not provided.\n   */\n  public setFloat(val: boolean): void {\n    this.grid()?.float(val);\n  }\n\n  /**\n   * Sets the margin (gap) between grid items and their content.\n   * @param value - The margin value (number or string).\n   */\n  public setMargin(value: number | string): void {\n    this.grid()?.margin(value);\n  }\n\n  /**\n   * Removes a widget from the grid.\n   * @param el - The widget to remove.\n   * @param removeDOM - If `false`, the widget won't be removed from the DOM. Default is `true`.\n   * @param triggerEvent - If `false`, no 'removed' callbacks will be called. Default is `true`.\n   */\n  public removeWidget(el: AXGridLayoutWidgetElement, removeDOM = true, triggerEvent = true): void {\n    this.grid()?.removeWidget(el, removeDOM, triggerEvent);\n  }\n\n  /**\n   * Removes all widgets from the grid.\n   * @param removeDOM - If `false`, widgets won't be removed from the DOM. Default is `true`.\n   */\n  public removeAll(removeDOM = true): void {\n    this.grid()?.removeAll(removeDOM);\n  }\n\n  /**\n   * Rotates a widget by swapping its width and height.\n   * @param els - The widget or selector of widgets to rotate.\n   * @param relative - Optional pixel coordinates to rotate around (keeps that cell under the cursor).\n   */\n  public setRotate(element: AXGridLayoutWidgetCompElement) {\n    this.grid().rotate(element);\n  }\n\n  /**\n   * Toggles the grid animation state.\n   * @param doAnimate - If `true`, the grid will animate.\n   */\n  public setAnimation(doAnimate: boolean): void {\n    this.grid()?.setAnimation(doAnimate);\n  }\n\n  /**\n   * Saves the current state of the grid and its widgets.\n   *\n   * @param saveContent If true, the content of the widgets will be saved.\n   * @param saveGridOpt If true, the grid options will be saved.\n   * @param saveCallback Optional callback to invoke after saving the grid state.\n   * @returns The saved grid layout options.\n   */\n  public save(saveContent = false, saveGridOpt = true, saveCallback?: AXSaveCallback): AXGridLayoutOptions {\n    return (this.serializedData = this.grid().save(\n      saveContent,\n      saveGridOpt,\n      saveCallback,\n    ) as AXGridLayoutOptions);\n  }\n\n  /**\n   * Loads a serialized grid layout configuration into the grid.\n   *\n   * @param serializedData The serialized grid options to load.\n   * @param cleanBeforeLoad If true, the grid will be cleared before loading the new layout.\n   * @returns A promise that resolves to the loaded grid instance.\n   */\n  public async load(\n    serializedData: AXGridLayoutOptions = this.serializedData,\n    cleanBeforeLoad = true,\n  ): Promise<AXGridLayout> {\n    if (cleanBeforeLoad) {\n      this.grid().removeAll();\n    }\n    const { GridStack } = await import('gridstack');\n    return GridStack.addGrid(this.el, serializedData);\n  }\n\n  /**\n   * Sets up draggable functionality for external elements to be added to the grid.\n   *\n   * @param dragIn A CSS selector or an array of elements that can be dragged into the grid.\n   * @param widgets An optional set of widgets that are draggable into the grid.\n   */\n  public async setupDraggable(dragIn?: string | HTMLElement[], widgets?: AXGridLayoutWidget) {\n    if (typeof dragIn === 'string') {\n      document.querySelectorAll(dragIn).forEach((item) => {\n        if (!item.classList.contains('grid-stack-item')) {\n          item.classList.add('grid-stack-item');\n        }\n      });\n    }\n    const { GridStack } = await import('gridstack');\n    GridStack.setupDragIn(dragIn, undefined, [widgets]);\n  }\n\n  /**\n   * Sets grid layout options.\n   * @param options The new grid layout options to apply.\n   *\n   * `Experimental`\n   */\n  public setOption(options: AXGridLayoutOptions) {\n    this.grid().opts = merge({}, this.grid().opts, options);\n  }\n\n  // PUBLIC GETTER METHODS //\n\n  /**\n   * Retrieves the current grid layout options.\n   *\n   * @returns The current grid options.\n   */\n  public getOptions(): AXGridLayoutOptions {\n    return this.grid().opts;\n  }\n\n  /**\n   * Retrieves all the child nodes (widgets) in the grid layout.\n   *\n   * @returns An array of grid layout nodes representing the widgets.\n   */\n  public getChildren(): AXGridLayoutNode[] {\n    return this.grid().engine.nodes;\n  }\n}\n","/**\n * gridstack.component.ts 11.1.1-dev\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\n */\n\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AXGridLayoutContainerComponent } from './grid-layout-container.component';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\n\n@NgModule({\n  imports: [CommonModule],\n  declarations: [AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent],\n  exports: [AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent],\n})\nexport class AXGridLayoutBuilderModule {\n  // constructor() {\n  // set globally our method to create the right widget type\n  // GridStack.addRemoveCB = gsCreateNgComponents;\n  // GridStack.saveCB = gsSaveAdditionalNgInfo;\n  // }\n}\n","import { AXGridLayoutContainerComponent } from './grid-layout-container.component';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\n//TYPES\nexport type AXGridLayoutNode = import('gridstack').GridStackNode;\nexport type AXGridLayout = import('gridstack').GridStack;\nexport type AXGridLayoutOptions = import('gridstack').GridStackOptions;\nexport type AXGridLayoutWidget = import('gridstack').GridStackWidget & { data?: any };\nexport type AXGridLayoutContainerElement = import('gridstack').GridHTMLElement;\nexport type AXGridLayoutWidgetElement = import('gridstack').GridItemHTMLElement;\n//EVENTS\nexport type AXGridLayoutEventEvent = { event: Event };\nexport type AXGridLayoutElementEvent = { event: Event; el: AXGridLayoutWidgetElement };\nexport type AXGridLayoutNodesEvent = { event: Event; nodes: AXGridLayoutNode[] };\nexport type AXGridLayoutDroppedEvent = {\n  event: Event;\n  previousNode: AXGridLayoutNode;\n  newNode: AXGridLayoutNode;\n};\n//COMPONENTS\nexport interface AXGridLayoutContainerCompElement extends AXGridLayoutContainerElement {\n  _gridComp?: AXGridLayoutContainerComponent;\n}\nexport interface AXGridLayoutWidgetCompElement extends AXGridLayoutWidgetElement {\n  _gridWidgetComp?: AXGridLayoutWidgetComponent;\n}\n\n//Callback\nexport type AXSaveCallback = import('gridstack').SaveFcn;\n\n// //DYNAMIC\n// export type AXNgCompInputs = { [key: string]: any };\n// export type SelectorToType = { [key: string]: Type<object> }; // selector string to runtime Type mapping\n// export interface AXNgGridLayoutWidget extends AXGridLayoutWidget {\n//   selector?: string; //Angular tag selector for this component to create at runtime\n//   input?: AXNgCompInputs; // serialized data for the component input fields\n//   subGridOpts?: AXNgGridLayoutOptions; // nested grid options\n// }\n// export interface AXNgGridLayoutNode extends AXGridLayoutNode {\n//   selector?: string; // component type to create as content\n// }\n// export interface AXNgGridLayoutOptions extends AXGridLayoutOptions {\n//   children?: AXNgGridLayoutWidget[];\n//   subGridOpts?: AXNgGridLayoutOptions;\n// }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-image-editor.mjs

@@ -130,11 +130,11 @@ class AXImageEditorColorPickerComponent {
         return `.5rem`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXImageEditorColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXImageEditorColorPickerComponent, isStandalone: false, selector: "ax-image-editor-color-picker", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-color-box\n  axTooltip=\"Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"outline\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n", styles: ["ax-image-editor-color-picker{margin-inline:0!important}ax-image-editor-color-picker .ax-submit-color{border:1px solid rgba(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-image-editor-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i3.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.3", type: AXImageEditorColorPickerComponent, isStandalone: false, selector: "ax-image-editor-color-picker", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-color-box\n  axTooltip=\"Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"solid\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n", styles: ["ax-image-editor-color-picker{margin-inline:0!important}ax-image-editor-color-picker .ax-submit-color{border:1px solid rgba(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-image-editor-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2.AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "directive", type: i3.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: AXImageEditorColorPickerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-color-picker', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ax-color-box\n  axTooltip=\"Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"outline\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n", styles: ["ax-image-editor-color-picker{margin-inline:0!important}ax-image-editor-color-picker .ax-submit-color{border:1px solid rgba(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-image-editor-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"] }]
+            args: [{ selector: 'ax-image-editor-color-picker', encapsulation: ViewEncapsulation.None, standalone: false, template: "<ax-color-box\n  axTooltip=\"Color Picker\"\n  axTooltipPlacement=\"top\"\n  look=\"solid\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n", styles: ["ax-image-editor-color-picker{margin-inline:0!important}ax-image-editor-color-picker .ax-submit-color{border:1px solid rgba(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-image-editor-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"] }]
         }], propDecorators: { __hostClass: [{
                 type: HostBinding,
                 args: ['style.marginInline']