@breadstone/mosaik-elements-foundation 0.0.228 → 0.0.230

package/Controls/Components/Layouts/Grid/GridElement.js

@@ -8,19 +8,20 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 var __metadata = (this && this.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
+import { CssLength } from '@breadstone/mosaik-themes';
+import { Alignable } from '../../../Behaviors/Alignable';
 import { Themeable } from '../../../Behaviors/Themeable';
 import { Attribute } from '../../../Decorators/AttributeDecorator';
 import { Component } from '../../../Decorators/ComponentDecorator';
-import { Property } from '../../../Decorators/PropertyDecorator';
-import { HorizontalAlignment } from '../../../Types/HorizontalAlignment';
-import { VerticalAlignment } from '../../../Types/VerticalAlignment';
+import { Watch } from '../../../Decorators/WatchDecorator';
 import { LayoutElement } from '../Abstracts/LayoutElement';
 import { ColumnDefinitions } from './ColumnDefinitions';
 import { gridElementTemplate } from './GridElementTemplate';
+import { parseGridLayoutGap } from './IGridLayoutGap';
 import { RowDefinitions } from './RowDefinitions';
+import { gridElementCosmopolitanStyle } from './Themes/GridElement.Cosmopolitan';
 import { gridElementJoyStyle } from './Themes/GridElement.Joy';
 import { gridElementMemphisStyle } from './Themes/GridElement.Memphis';
-import { gridElementCosmopolitanStyle } from './Themes/GridElement.Cosmopolitan';
 // #endregion
 /**
  * Grid - A layout system that arranges elements in a structured grid pattern.
@@ -37,23 +38,32 @@ import { gridElementCosmopolitanStyle } from './Themes/GridElement.Cosmopolitan'
  * @slot - The default slot for grid items.
  *
  * @example
+ * Dashboard with a fixed sidebar and a flexible main content area:
  * ```html
- * <mosaik-grid>
- *   <mosaik-grid-item row="1" column="1">Item 1</mosaik-grid-item>
- *   <mosaik-grid-item row="1" column="2">Item 2</mosaik-grid-item>
- *   <mosaik-grid-item row="2" column="1,2">Item 3</mosaik-grid-item>
+ * <mosaik-grid column-definitions="240 *" row-definitions="auto *" gap="16">
+ *   <mosaik-grid-item column="1" row="1" row-span="2">Sidebar</mosaik-grid-item>
+ *   <mosaik-grid-item column="2" row="1">Header</mosaik-grid-item>
+ *   <mosaik-grid-item column="2" row="2">Main Content</mosaik-grid-item>
+ * </mosaik-grid>
+ * ```
+ *
+ * @example
+ * Equal-width card layout with consistent spacing:
+ * ```html
+ * <mosaik-grid column-definitions="* * *" row-definitions="auto" gap="24">
+ *   <mosaik-grid-item column="1" row="1">Card 1</mosaik-grid-item>
+ *   <mosaik-grid-item column="2" row="1">Card 2</mosaik-grid-item>
+ *   <mosaik-grid-item column="3" row="1">Card 3</mosaik-grid-item>
  * </mosaik-grid>
  * ```
  *
  * @public
  */
-let GridElement = class GridElement extends Themeable(LayoutElement) {
+let GridElement = class GridElement extends Alignable(Themeable(LayoutElement)) {
     // #region Fields
     _rowDefinitions;
     _columnDefinitions;
     _gap;
-    _horizontalAlignment;
-    _verticalAlignment;
     // #endregion
     // #region Ctor
     /**
@@ -66,8 +76,6 @@ let GridElement = class GridElement extends Themeable(LayoutElement) {
         this._rowDefinitions = [];
         this._columnDefinitions = [];
         this._gap = 0;
-        this._horizontalAlignment = HorizontalAlignment.Stretch;
-        this._verticalAlignment = VerticalAlignment.Stretch;
     }
     // #endregion
     // #region Properties
@@ -84,17 +92,24 @@ let GridElement = class GridElement extends Themeable(LayoutElement) {
     }
     /**
      * Gets or sets the `rowDefinitions` property.
-     * Specifies the number of rows and their height
      *
-     * Accepts an array, which serves two purposes:
+     * Specifies the number of rows and their heights using `GridLength` sizing.
+     * The array length defines the number of rows; each element defines the sizing of one row track.
+     *
+     * **Accepted forms**
+     * - Array of `RowDefinitionInput` entries (JavaScript property binding).
+     * - Space-separated string of grid-length tokens (HTML attribute), e.g. `"auto * 2* 100"`.
+     *
+     * **Accepted element / token forms**
+     * - `number` - fixed height in pixels/DIPs (e.g. `100`).
+     * - `string` - `"auto"`, `"*"`, `"n*"`, or a numeric string (e.g. `"2*"`).
+     * - `IRowDefinition` - `{ height, minHeight?, maxHeight? }` (array form only).
      *
-     * The number of elements in the array defines the number of rows.
-     * Each array element defines the size of the corresponding row. The possible array values are:
-     * * `number` - Defines the size in pixels.
-     * * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
-     * * `IRowDefinition` - Configuration object, which accepts a `height` key.
+     * CSS units (`px`, `em`, `%`, `fr`, …) are **not** supported and will
+     * throw. Negative values are rejected.
      *
      * @public
+     * @attr row-definitions
      */
     get rowDefinitions() {
         return this._rowDefinitions;
@@ -108,17 +123,24 @@ let GridElement = class GridElement extends Themeable(LayoutElement) {
     }
     /**
      * Gets or sets the `columnDefinitions` property.
-     * Specifies the number of columns and their widths
      *
-     * Accepts an array, which serves two purposes:
+     * Specifies the number of columns and their widths using `GridLength` sizing.
+     * The array length defines the number of columns; each element defines the sizing of one column track.
      *
-     * The number of elements in the array defines the number of columns.
-     * Each array element defines the size of the corresponding column. The possible array values are:
-     * * `number` - Defines the size in pixels.
-     * * `string` - Enables the usage of arbitrary units e.g. `20%` or `auto`.
-     * * `IColumnDefinition` - Configuration object, which accepts a `width` key.
+     * **Accepted forms**
+     * - Array of `ColumnDefinitionInput` entries (JavaScript property binding).
+     * - Space-separated string of grid-length tokens (HTML attribute), e.g. `"* 2* auto 120"`.
+     *
+     * **Accepted element / token forms**
+     * - `number` - fixed width in pixels/DIPs (e.g. `120`).
+     * - `string` - `"auto"`, `"*"`, `"n*"`, or a numeric string (e.g. `"2*"`).
+     * - `IColumnDefinition` - `{ width, minWidth?, maxWidth? }` (array form only).
+     *
+     * CSS units (`px`, `em`, `%`, `fr`, …) are **not** supported and will
+     * throw. Negative values are rejected.
      *
      * @public
+     * @attr column-definitions
      */
     get columnDefinitions() {
         return this._columnDefinitions;
@@ -132,9 +154,22 @@ let GridElement = class GridElement extends Themeable(LayoutElement) {
     }
     /**
      * Gets or sets the `gap` property.
-     * Specifies the gaps between the elements. The default value is `0`
      *
+     * Specifies the spacing between grid tracks (rows and columns).
+     *
+     * **Accepted forms**
+     * - `number` - uniform gap in pixels on both axes (e.g. `16`).
+     * - `CssLength` string - uniform gap with a CSS unit (e.g. `'1rem'`, `'8px'`).
+     * - `IGridLayoutGap` object - separate gap per axis (`{ rows, columns }`) (JS only).
+     *
+     * When set via HTML attribute, the value is parsed as a CSS length
+     * string (e.g. `gap="16"`, `gap="1rem"`).
+     *
+     * Negative values are rejected.
+     *
+     * @defaultValue `0`
      * @public
+     * @attr gap
      */
     get gap() {
         return this._gap;
@@ -146,137 +181,208 @@ let GridElement = class GridElement extends Themeable(LayoutElement) {
             this.requestUpdate('gap');
         }
     }
+    // #endregion
+    // #region Methods
     /**
-     * Gets or sets the `horizontalAlignment` property.
+     * Called when the `rowDefinitions` property changes.
+     * Re-evaluates child item positions against the updated row track count.
      *
-     * @public
-     * @attr
+     * @protected
      */
-    get horizontalAlignment() {
-        return this._horizontalAlignment;
-    }
-    set horizontalAlignment(value) {
-        if (this._horizontalAlignment !== value) {
-            this._horizontalAlignment = value;
-            this.requestUpdate('horizontalAlignment');
-        }
+    onRowDefinitionsChanged() {
+        this.invalidateItemPositions();
     }
     /**
-     * Gets or sets the `verticalAlignment` property.
+     * Called when the `columnDefinitions` property changes.
+     * Re-evaluates child item positions against the updated column track count.
      *
-     * @public
-     * @attr
+     * @protected
      */
-    get verticalAlignment() {
-        return this._verticalAlignment;
+    onColumnDefinitionsChanged() {
+        this.invalidateItemPositions();
     }
-    set verticalAlignment(value) {
-        if (this._verticalAlignment !== value) {
-            this._verticalAlignment = value;
-            this.requestUpdate('verticalAlignment');
-        }
+    /**
+     * @protected
+     * @override
+     */
+    onItemsChanged() {
+        super.onItemsChanged();
+        this.invalidateItemPositions();
     }
-    // #endregion
-    // #region Methods
     /**
+     * Resolves the `gap` property into a CSS `gap` shorthand value.
+     *
+     * Delegates to `parseGridLayoutGap` for validation and
+     * normalisation, then produces the shortest valid CSS `gap` string.
+     *
      * @private
+     * @param gap - A `GridLayoutGap` input.
+     * @returns A CSS `gap` value string.
      */
     generateGapStyle(gap) {
-        const parsedGap = typeof gap === 'number' || typeof gap === 'string'
-            ? {
-                columns: gap,
-                rows: gap
-            }
-            : {
-                columns: gap.columns ?? 0,
-                rows: gap.rows ?? 0
-            };
-        return parsedGap.rows === parsedGap.columns
-            ? typeof parsedGap.rows === 'number'
-                ? `${parsedGap.rows}px`
-                : parsedGap.rows
-            : `${typeof parsedGap.rows === 'number'
-                ? `${parsedGap.rows}px`
-                : parsedGap.rows} ${typeof parsedGap.columns === 'number' ? `${parsedGap.columns}px` : parsedGap.columns}`;
+        const parsed = parseGridLayoutGap(gap);
+        return parsed.rows === parsed.columns
+            ? parsed.rows
+            : `${parsed.rows} ${parsed.columns}`;
     }
     /**
+     * Generates a CSS `grid-template-columns` value from the parsed `ColumnDefinitions`.
+     *
      * @private
+     * @param definition The raw column definitions array.
+     * @returns A space-separated CSS track-list string.
      */
     generateColumnStyle(definition) {
-        return ColumnDefinitions.parse(definition).map((x) => {
-            let style = '';
-            if (x.width.isAbsolute) {
-                // TODO: this here is a very dumm logic, because the value is always in px.
-                return x.width
-                    ? `${x.width.value}px`
-                    : '0px';
-            }
-            if (x.width.isAuto) {
-                // TODO: check this, before it was auto-fit
-                return 'auto';
-            }
-            if (x.width.isStar) {
-                return '1fr';
-            }
-            if (x.minWidth !== 0 && x.maxWidth !== Number.MAX_SAFE_INTEGER) {
-                style += ` minmax(${x.minWidth},${x.maxWidth})`;
-            }
-            return style;
-        })
+        return ColumnDefinitions.parse(definition)
+            .map((column) => this.generateTrack(column.width, column.minWidth, column.maxWidth))
             .join(' ');
     }
     /**
+     * Generates a CSS `grid-template-rows` value from the parsed `RowDefinitions`.
+     *
      * @private
+     * @param definition The raw row definitions array.
+     * @returns A space-separated CSS track-list string.
      */
     generateRowStyle(definition) {
-        return RowDefinitions.parse(definition).map((x) => {
-            let style = '';
-            if (x.height.isAbsolute) {
-                // TODO: this here is a very dumm logic, because the value is always in px.
-                style = x.height
-                    ? `${x.height.value}px`
-                    : '0px';
+        return RowDefinitions.parse(definition)
+            .map((row) => this.generateTrack(row.height, row.minHeight, row.maxHeight))
+            .join(' ');
+    }
+    /**
+     * Converts a `GridLength` with optional min/max constraints into
+     * an equivalent CSS `grid-template-*` track size string.
+     *
+     * **Mapping rules**
+     *
+     * | GridLength type | No constraints  | With min/max                   |
+     * |-----------------|-----------------|--------------------------------|
+     * | `pixel`         | `{value}px`     | `{clamp(min, value, max)}px`   |
+     * | `auto`          | `auto`          | `minmax({min}px, {max/auto})`  |
+     * | `star`          | `{factor}fr`    | `minmax({min}px, {max/Nfr})`   |
+     *
+     * @private
+     * @param length The grid length specification.
+     * @param minBound Minimum track size in pixels (0 = unconstrained).
+     * @param maxBound Maximum track size in pixels (MAX_SAFE_INTEGER = unbounded).
+     * @returns A CSS track-size value string.
+     */
+    generateTrack(length, minBound, maxBound) {
+        const hasMin = minBound > 0;
+        const hasMax = maxBound < Number.MAX_SAFE_INTEGER;
+        // Absolute (pixel) - clamp the fixed value directly
+        if (length.isAbsolute) {
+            const clamped = Math.max(minBound, Math.min(maxBound, length.value));
+            return `${clamped}px`;
+        }
+        // Auto sizing
+        if (length.isAuto) {
+            if (hasMin && hasMax) {
+                return `minmax(${minBound}px, ${maxBound}px)`;
             }
-            if (x.height.isAuto) {
-                // TODO: check this, before it was auto-fit
-                style = 'auto';
+            if (hasMin) {
+                return `minmax(${minBound}px, auto)`;
             }
-            if (x.height.isStar) {
-                style = 'auto-fill';
+            if (hasMax) {
+                return `minmax(auto, ${maxBound}px)`;
             }
-            if (x.minHeight !== 0 && x.maxHeight !== Number.MAX_SAFE_INTEGER) {
-                style += ` minmax(${x.minHeight},${x.maxHeight})`;
+            return 'auto';
+        }
+        // Star (proportional) sizing
+        if (hasMin && hasMax) {
+            return `minmax(${minBound}px, ${maxBound}px)`;
+        }
+        if (hasMin) {
+            return `minmax(${minBound}px, ${length.value}fr)`;
+        }
+        if (hasMax) {
+            return `minmax(0px, ${maxBound}px)`;
+        }
+        return `${length.value}fr`;
+    }
+    /**
+     * Iterates all slotted child items and requests each `GridItemElement`
+     * to re-evaluate its CSS `grid-area` placement against the current
+     * column/row definitions.
+     *
+     * @private
+     */
+    invalidateItemPositions() {
+        const items = this.items;
+        if (!items) {
+            return;
+        }
+        for (const item of items) {
+            if ('invalidatePosition' in item
+                && typeof item['invalidatePosition'] === 'function') {
+                item.invalidatePosition();
             }
-            return style;
-        })
-            .join(' ');
+        }
     }
 };
 __decorate([
-    Property({ type: RowDefinitions }),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
+    Attribute({
+        type: String,
+        converter: {
+            fromAttribute: (value) => {
+                if (value === null || value.trim().length === 0) {
+                    return [];
+                }
+                return RowDefinitions.fromString(value);
+            },
+            toAttribute: (value) => {
+                return RowDefinitions.toString(value);
+            }
+        }
+    }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
 ], GridElement.prototype, "rowDefinitions", null);
 __decorate([
-    Property({ type: ColumnDefinitions }),
-    __metadata("design:type", Array),
-    __metadata("design:paramtypes", [Array])
+    Attribute({
+        type: String,
+        converter: {
+            fromAttribute: (value) => {
+                if (value === null || value.trim().length === 0) {
+                    return [];
+                }
+                return ColumnDefinitions.fromString(value);
+            },
+            toAttribute: (value) => {
+                return ColumnDefinitions.toString(value);
+            }
+        }
+    }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
 ], GridElement.prototype, "columnDefinitions", null);
 __decorate([
-    Property({ type: Object }),
+    Attribute({
+        type: String,
+        converter: {
+            fromAttribute: (value) => {
+                if (value === null || value.trim().length === 0) {
+                    return 0;
+                }
+                return CssLength.tryParse(value) ?? 0;
+            }
+        }
+    }),
     __metadata("design:type", Object),
     __metadata("design:paramtypes", [Object])
 ], GridElement.prototype, "gap", null);
 __decorate([
-    Attribute({ type: String }),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], GridElement.prototype, "horizontalAlignment", null);
+    Watch('rowDefinitions'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], GridElement.prototype, "onRowDefinitionsChanged", null);
 __decorate([
-    Attribute({ type: String }),
-    __metadata("design:type", String),
-    __metadata("design:paramtypes", [String])
-], GridElement.prototype, "verticalAlignment", null);
+    Watch('columnDefinitions'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], GridElement.prototype, "onColumnDefinitionsChanged", null);
 GridElement = __decorate([
     Component({
         selector: 'mosaik-grid',

package/Controls/Components/Layouts/Grid/GridElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Grid/GridElement.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"GridElement.js","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Grid/GridElement.ts"],"names":[],"mappings":"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"}

package/Controls/Components/Layouts/Grid/GridElementTemplate.d.ts

@@ -1,7 +1,7 @@
 import { type TemplateResult } from '../../../../Dom/Html';
 import type { GridElement } from './GridElement';
 /**
- * The template of the {@link GridElement}.
+ * The template of the `GridElement`.
  *
  * @public
  */

package/Controls/Components/Layouts/Grid/GridElementTemplate.js

@@ -2,7 +2,7 @@
 import { html } from '../../../../Dom/Html';
 // #endregion
 /**
- * The template of the {@link GridElement}.
+ * The template of the `GridElement`.
  *
  * @public
  */

package/Controls/Components/Layouts/Grid/GridItemElement.d.ts

@@ -4,10 +4,30 @@ declare const GridItemElement_base: (abstract new (...args: Array<any>) => impor
 /**
  * Grid Item - An element within a grid layout, organized in rows and columns.
  *
+ * @description
+ * The Grid Item component is placed inside a `GridElement`
+ * and defines its position and span within the grid via the `column`, `row`, `column-span`, and `row-span` attributes.
+ *
+ * Positions are 1-based. A value of `0` means auto-placement.
+ * Positions and spans that exceed the parent grid's explicit track
+ * definitions are clamped to `auto` to prevent implicit track creation.
+ *
+ * @name Grid Item
  * @element mosaik-grid-item
+ * @category Layout
  *
  * @slot - The default slot.
  *
+ * @example
+ * Item spanning two columns in a content layout:
+ * ```html
+ * <mosaik-grid column-definitions="* * *" row-definitions="auto auto" gap="16">
+ *   <mosaik-grid-item column="1" row="1" column-span="2">Wide Content</mosaik-grid-item>
+ *   <mosaik-grid-item column="3" row="1">Aside</mosaik-grid-item>
+ *   <mosaik-grid-item column="1" row="2" column-span="3">Full-Width Footer</mosaik-grid-item>
+ * </mosaik-grid>
+ * ```
+ *
  * @public
  */
 export declare class GridItemElement extends GridItemElement_base implements IGridItemElementProps {
@@ -33,6 +53,7 @@ export declare class GridItemElement extends GridItemElement_base implements IGr
      * Gets or sets the `column` property.
      *
      * @public
+     * @attr column
      */
     get column(): number;
     set column(value: number);
@@ -40,6 +61,7 @@ export declare class GridItemElement extends GridItemElement_base implements IGr
      * Gets or sets the `columnSpan` property.
      *
      * @public
+     * @attr column-span
      */
     get columnSpan(): number;
     set columnSpan(value: number);
@@ -47,6 +69,7 @@ export declare class GridItemElement extends GridItemElement_base implements IGr
      * Gets or sets the `row` property.
      *
      * @public
+     * @attr row
      */
     get row(): number;
     set row(value: number);
@@ -54,13 +77,25 @@ export declare class GridItemElement extends GridItemElement_base implements IGr
      * Gets or sets the `rowSpan` property.
      *
      * @public
+     * @attr row-span
      */
     get rowSpan(): number;
     set rowSpan(value: number);
     /**
      * @public
+     * @override
      */
     connectedCallback(): void;
+    /**
+     * Re-evaluates and applies the CSS `grid-area` placement of this item.
+     *
+     * Called by the parent `GridElement` when `columnDefinitions` or
+     * `rowDefinitions` change so that out-of-bounds positions are clamped
+     * to `auto`, preventing CSS Grid from creating implicit tracks.
+     *
+     * @public
+     */
+    invalidatePosition(): void;
     /**
      * @protected
      */
@@ -78,9 +113,51 @@ export declare class GridItemElement extends GridItemElement_base implements IGr
      */
     protected onColumnSpanPropertyChanged(): void;
     /**
+     * Computes and applies the CSS `grid-area` style based on the configured
+     * row/column positions and spans, clamped against the parent grid's
+     * explicit track definitions.
+     *
      * @private
      */
     private setItemStyle;
+    /**
+     * Resolves a 1-based track position against the available track count.
+     * Returns `'auto'` when the position is unset (`0`) or exceeds the
+     * explicit grid tracks defined by the parent.
+     *
+     * @param position - The 1-based track position (`0` = unset).
+     * @param maxTracks - Number of explicitly defined tracks (`0` = unconstrained).
+     * @returns The position value or `'auto'`.
+     *
+     * @private
+     */
+    private resolvePosition;
+    /**
+     * Resolves a track span against the available grid space.
+     * When the resolved position is `'auto'` (out of bounds or unset), the span is
+     * clamped to `maxTracks` to prevent implicit track creation.
+     * When the position is in bounds, the span is clamped so the item does not
+     * extend beyond the explicit grid.
+     *
+     * @param span - Requested span count (`0` = no span).
+     * @param resolvedPosition - Already-resolved position (`number` or `'auto'`).
+     * @param maxTracks - Number of explicitly defined tracks (`0` = unconstrained).
+     * @returns A CSS span value string (e.g. `'span 2'`) or `'auto'`.
+     *
+     * @private
+     */
+    private resolveSpan;
+    /**
+     * Reads the number of explicitly defined tracks from the parent grid element.
+     * Uses duck-typing (`property in parent`) so that `GridItemElement` does not
+     * import `GridElement`, avoiding any risk of circular module dependencies.
+     *
+     * @param property - The parent property name (`'columnDefinitions'` or `'rowDefinitions'`).
+     * @returns The number of explicit track definitions, or `0` when unconstrained.
+     *
+     * @private
+     */
+    private getParentTrackCount;
 }
 /**
  * @public

package/Controls/Components/Layouts/Grid/GridItemElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridItemElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Grid/GridItemElement.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAOrE;;;;;;;;GAQG;AACH,qBASa,eACT,SAAQ,oBACR,YAAW,qBAAqB;IAIhC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,QAAQ,CAAS;IAMzB;;;;OAIG;;IAcH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;OAIG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAE9B;IAED;;;;OAIG;IACH,IACW,UAAU,IAAI,MAAM,CAE9B;IACD,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAElC;IAED;;;;OAIG;IACH,IACW,GAAG,IAAI,MAAM,CAEvB;IACD,IAAW,GAAG,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;;;OAIG;IACH,IACW,OAAO,IAAI,MAAM,CAE3B;IACD,IAAW,OAAO,CAAC,KAAK,EAAE,MAAM,EAE/B;IAID;;OAEG;IACa,iBAAiB,IAAI,IAAI;IAKzC;;OAEG;IAEH,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAItC;;OAEG;IAEH,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAIzC;;OAEG;IAEH,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C;;OAEG;IAEH,SAAS,CAAC,2BAA2B,IAAI,IAAI;IAI7C;;OAEG;IACH,OAAO,CAAC,YAAY;CAUvB;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IAEX,UAAU,qBAAqB;QAE3B,kBAAkB,EAAE,eAAe,CAAC;KACvC;CACJ"}
+{"version":3,"file":"GridItemElement.d.ts","sourceRoot":"","sources":["../../../../../src/Controls/Components/Layouts/Grid/GridItemElement.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;;AAOrE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBASa,eACT,SAAQ,oBACR,YAAW,qBAAqB;IAIhC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,IAAI,CAAS;IACrB,OAAO,CAAC,QAAQ,CAAS;IAMzB;;;;OAIG;;IAcH;;;;;;MAME;IACF,WAAkB,EAAE,IAAI,MAAM,CAE7B;IAED;;;;;OAKG;IACH,IACW,MAAM,IAAI,MAAM,CAE1B;IACD,IAAW,MAAM,CAAC,KAAK,EAAE,MAAM,EAE9B;IAED;;;;;OAKG;IACH,IACW,UAAU,IAAI,MAAM,CAE9B;IACD,IAAW,UAAU,CAAC,KAAK,EAAE,MAAM,EAElC;IAED;;;;;OAKG;IACH,IACW,GAAG,IAAI,MAAM,CAEvB;IACD,IAAW,GAAG,CAAC,KAAK,EAAE,MAAM,EAE3B;IAED;;;;;OAKG;IACH,IACW,OAAO,IAAI,MAAM,CAE3B;IACD,IAAW,OAAO,CAAC,KAAK,EAAE,MAAM,EAE/B;IAMD;;;OAGG;IACa,iBAAiB,IAAI,IAAI;IAKzC;;;;;;;;OAQG;IACI,kBAAkB,IAAI,IAAI;IAIjC;;OAEG;IAEH,SAAS,CAAC,oBAAoB,IAAI,IAAI;IAItC;;OAEG;IAEH,SAAS,CAAC,uBAAuB,IAAI,IAAI;IAIzC;;OAEG;IAEH,SAAS,CAAC,wBAAwB,IAAI,IAAI;IAI1C;;OAEG;IAEH,SAAS,CAAC,2BAA2B,IAAI,IAAI;IAI7C;;;;;;OAMG;IACH,OAAO,CAAC,YAAY;IAapB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,eAAe;IAYvB;;;;;;;;;;;;;OAaG;IACH,OAAO,CAAC,WAAW;IA4BnB;;;;;;;;;OASG;IACH,OAAO,CAAC,mBAAmB;CAgB9B;AAED;;GAEG;AACH,yBAAiB,eAAe,CAAC;IAC7B,KAAY,KAAK,GAAG,qBAAqB,CAAC;CAC7C;AAED;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,eAAe,CAAC;KACvC;CACJ"}