import { Host, h } from "@stencil/core";
export class LayoutGridItem {
    constructor() {
        /**
         * The number of columns the grid item should span.
         */
        this.colSpan = 1;
        /**
         * The column the grid item should start at.
         */
        this.colStart = 1;
        /**
         * If `true`, the grid item will be hidden on smaller screens.
         */
        this.hideInMobileMode = false;
        /**
         * The number of rows the grid item should span.
         */
        this.rowSpan = 1;
        /**
         * The row the grid item should start at.
         */
        this.rowStart = 1;
    }
    watchColSpan(newValue) {
        this.el.style.setProperty("--ic-grid-item-col-span", `${newValue}`);
    }
    watchColStart(newValue) {
        this.el.style.setProperty("--ic-grid-item-col-start", `${newValue}`);
    }
    watchRowSpan(newValue) {
        this.el.style.setProperty("--ic-grid-item-row-span", `${newValue}`);
    }
    watchRowStart(newValue) {
        this.el.style.setProperty("--ic-grid-item-row-start", `${newValue}`);
    }
    componentWillLoad() {
        this.el.style.setProperty("--ic-grid-item-col-start", `${this.colStart}`);
        this.el.style.setProperty("--ic-grid-item-col-span", `${this.colSpan}`);
        this.el.style.setProperty("--ic-grid-item-row-start", `${this.rowStart}`);
        this.el.style.setProperty("--ic-grid-item-row-span", `${this.rowSpan}`);
    }
    render() {
        const { hideInMobileMode } = this;
        return (h(Host, { key: '9f576040938030f0d7fc61f5885ca73ab37a508b', class: {
                "ic-layout-grid-hide-in-mobile": !!hideInMobileMode,
            } }, h("slot", { key: 'b8f66ba2ef9651e99a0ce3b3caec2f021a55e723' })));
    }
    static get is() { return "ic-layout-grid-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["ic-layout-grid-item.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["ic-layout-grid-item.css"]
        };
    }
    static get properties() {
        return {
            "colSpan": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The number of columns the grid item should span."
                },
                "getter": false,
                "setter": false,
                "attribute": "col-span",
                "reflect": false,
                "defaultValue": "1"
            },
            "colStart": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The column the grid item should start at."
                },
                "getter": false,
                "setter": false,
                "attribute": "col-start",
                "reflect": false,
                "defaultValue": "1"
            },
            "hideInMobileMode": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the grid item will be hidden on smaller screens."
                },
                "getter": false,
                "setter": false,
                "attribute": "hide-in-mobile-mode",
                "reflect": false,
                "defaultValue": "false"
            },
            "rowSpan": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The number of rows the grid item should span."
                },
                "getter": false,
                "setter": false,
                "attribute": "row-span",
                "reflect": false,
                "defaultValue": "1"
            },
            "rowStart": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number | undefined",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The row the grid item should start at."
                },
                "getter": false,
                "setter": false,
                "attribute": "row-start",
                "reflect": false,
                "defaultValue": "1"
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "colSpan",
                "methodName": "watchColSpan"
            }, {
                "propName": "colStart",
                "methodName": "watchColStart"
            }, {
                "propName": "rowSpan",
                "methodName": "watchRowSpan"
            }, {
                "propName": "rowStart",
                "methodName": "watchRowStart"
            }];
    }
}
//# sourceMappingURL=ic-layout-grid-item.js.map
