import { Host, h } from "@stencil/core";
export class LayoutGrid {
    constructor() {
        this.COL_WIDTH_CSS_PROP = "--ic-layout-grid-col-width";
        /**
         * The alignment of the grid.
         */
        this.aligned = "left";
        /**
         * The default column span for grid items.
         */
        this.defaultColSpan = 1;
        /**
         * The default column width for grid items.
         * This is used when the grid type is set to "fixed".
         */
        this.defaultColWidth = "64px";
        /**
         * The default row span for grid items.
         */
        this.defaultRowSpan = 1;
        /**
         * If `true`, the standard vertical padding from the grid will be removed.
         */
        this.fullHeight = false;
        /**
         * The space between grid items, in multiples of the base spacing unit (`var(--ic-space-xs)`).
         */
        this.gridSpacing = 2;
        /**
         * The number of rows in the grid.
         */
        this.rows = 1;
        /**
         * The layout type of the grid.
         */
        this.type = "fixed";
        this.getColumns = () => {
            if (typeof this.columns === "number") {
                this.el.style.setProperty("--ic-layout-grid-columns", this.columns.toString());
            }
            else if (typeof this.columns === "object") {
                Object.entries(this.columns).forEach(([breakpoint, value]) => {
                    if (value !== undefined) {
                        this.el.style.setProperty(`--ic-layout-grid-columns-${breakpoint}`, value.toString());
                    }
                });
            }
        };
        this.getColSpan = () => {
            if (this.defaultColSpan !== undefined) {
                if (typeof this.defaultColSpan === "number") {
                    Array.from(this.el.children).forEach((child) => {
                        child.style.setProperty("--ic-layout-grid-col-span", `${this.defaultColSpan}`);
                    });
                }
                else if (typeof this.defaultColSpan === "object") {
                    Object.entries(this.defaultColSpan).forEach(([breakpoint, value]) => {
                        if (value !== undefined) {
                            this.el.style.setProperty(`--ic-layout-grid-col-span-${breakpoint}`, value.toString());
                        }
                    });
                }
            }
        };
        this.getGridSpacing = () => {
            this.el.style.setProperty("--ic-layout-grid-spacing", `calc(var(--ic-space-xs) * ${this.gridSpacing})`);
        };
    }
    watchColumns() {
        this.getColumns();
    }
    watchDefaultColSpan() {
        this.getColSpan();
    }
    watchDefaultColWidth(newValue) {
        if (this.type === "fixed") {
            this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, newValue);
        }
    }
    watchDefaultRowSpan(newValue) {
        this.el.style.setProperty("--ic-layout-grid-row-span", `${newValue}`);
    }
    watchGridSpacing() {
        this.getGridSpacing();
    }
    watchRows(newValue) {
        this.el.style.setProperty("--ic-layout-grid-rows", `${newValue}`);
    }
    watchType(newValue) {
        this.getColumns();
        if (newValue === "fixed" && this.defaultColWidth) {
            this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);
        }
        else {
            this.el.style.removeProperty(this.COL_WIDTH_CSS_PROP);
        }
    }
    componentWillLoad() {
        if (this.columns === undefined) {
            if (this.type === "fixed") {
                this.columns = 12;
            }
            else if (this.type === "fluid") {
                this.columns = {
                    xs: 2,
                    sm: 4,
                    md: 8,
                    lg: 12,
                    xl: 12,
                };
            }
        }
        this.getColumns();
        this.getColSpan();
        this.getGridSpacing();
        if (this.type === "fixed" && this.defaultColWidth) {
            this.el.style.setProperty(this.COL_WIDTH_CSS_PROP, this.defaultColWidth);
        }
        if (this.rows) {
            this.el.style.setProperty("--ic-layout-grid-rows", `${this.rows}`);
            this.el.style.setProperty("--ic-layout-grid-row-span", `${this.defaultRowSpan}`);
        }
    }
    render() {
        const { aligned, fullHeight } = this;
        return (h(Host, { key: 'fb70bb0fe2085ce0eba37572f3a12e6d56c6c195', class: {
                [`ic-layout-grid-aligned-${aligned}`]: true,
                ["ic-layout-grid-no-vertical-padding"]: !!fullHeight,
            } }, h("slot", { key: '852c50adaf3b8c743353429659198845f363de62' })));
    }
    static get is() { return "ic-layout-grid"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-layout-grid.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-layout-grid.css"]
        };
    }
    static get properties() {
        return {
            "aligned": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcAlignment",
                    "resolved": "\"center\" | \"full-width\" | \"left\" | undefined",
                    "references": {
                        "IcAlignment": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::IcAlignment"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The alignment of the grid."
                },
                "getter": false,
                "setter": false,
                "attribute": "aligned",
                "reflect": false,
                "defaultValue": "\"left\""
            },
            "columns": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "IcGridBreakpoints",
                    "resolved": "number | undefined | { xs?: number | undefined; sm?: number | undefined; md?: number | undefined; lg?: number | undefined; xl?: number | undefined; }",
                    "references": {
                        "IcGridBreakpoints": {
                            "location": "import",
                            "path": "./ic-layout-grid.types",
                            "id": "src/components/ic-layout-grid/ic-layout-grid.types.ts::IcGridBreakpoints"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The number of columns in the grid.\nThis can be a number or an object specifying different values for each breakpoint."
                },
                "getter": false,
                "setter": false,
                "attribute": "columns",
                "reflect": false
            },
            "defaultColSpan": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "IcGridBreakpoints",
                    "resolved": "number | undefined | { xs?: number | undefined; sm?: number | undefined; md?: number | undefined; lg?: number | undefined; xl?: number | undefined; }",
                    "references": {
                        "IcGridBreakpoints": {
                            "location": "import",
                            "path": "./ic-layout-grid.types",
                            "id": "src/components/ic-layout-grid/ic-layout-grid.types.ts::IcGridBreakpoints"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The default column span for grid items."
                },
                "getter": false,
                "setter": false,
                "attribute": "default-col-span",
                "reflect": false,
                "defaultValue": "1"
            },
            "defaultColWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The default column width for grid items.\nThis is used when the grid type is set to \"fixed\"."
                },
                "getter": false,
                "setter": false,
                "attribute": "default-col-width",
                "reflect": false,
                "defaultValue": "\"64px\""
            },
            "defaultRowSpan": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The default row span for grid items."
                },
                "getter": false,
                "setter": false,
                "attribute": "default-row-span",
                "reflect": false,
                "defaultValue": "1"
            },
            "fullHeight": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the standard vertical padding from the grid will be removed."
                },
                "getter": false,
                "setter": false,
                "attribute": "full-height",
                "reflect": false,
                "defaultValue": "false"
            },
            "gridSpacing": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The space between grid items, in multiples of the base spacing unit (`var(--ic-space-xs)`)."
                },
                "getter": false,
                "setter": false,
                "attribute": "grid-spacing",
                "reflect": false,
                "defaultValue": "2"
            },
            "rows": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The number of rows in the grid."
                },
                "getter": false,
                "setter": false,
                "attribute": "rows",
                "reflect": false,
                "defaultValue": "1"
            },
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "IcGridType",
                    "resolved": "\"fixed\" | \"fluid\"",
                    "references": {
                        "IcGridType": {
                            "location": "import",
                            "path": "./ic-layout-grid.types",
                            "id": "src/components/ic-layout-grid/ic-layout-grid.types.ts::IcGridType"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The layout type of the grid."
                },
                "getter": false,
                "setter": false,
                "attribute": "type",
                "reflect": false,
                "defaultValue": "\"fixed\""
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "columns",
                "methodName": "watchColumns"
            }, {
                "propName": "defaultColSpan",
                "methodName": "watchDefaultColSpan"
            }, {
                "propName": "defaultColWidth",
                "methodName": "watchDefaultColWidth"
            }, {
                "propName": "defaultRowSpan",
                "methodName": "watchDefaultRowSpan"
            }, {
                "propName": "gridSpacing",
                "methodName": "watchGridSpacing"
            }, {
                "propName": "rows",
                "methodName": "watchRows"
            }, {
                "propName": "type",
                "methodName": "watchType"
            }];
    }
}
//# sourceMappingURL=ic-layout-grid.js.map
