'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-d337cd8a.js');

const icLayoutGridItemCss = ":host{grid-column:var(--ic-grid-item-col-start, 1) / span\n    var(--ic-grid-item-col-span, var(--ic-layout-grid-col-span, 1)) !important;grid-row:var(--ic-grid-item-row-start, 1) / span\n    var(--ic-grid-item-row-span, var(--ic-layout-grid-row-span, 1)) !important}@media only screen and (max-width: 576px){:host(.ic-layout-grid-hide-in-mobile){display:none}}";
const IcLayoutGridItemStyle0 = icLayoutGridItemCss;

const LayoutGridItem = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * 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 (index.h(index.Host, { key: '9f576040938030f0d7fc61f5885ca73ab37a508b', class: {
                "ic-layout-grid-hide-in-mobile": !!hideInMobileMode,
            } }, index.h("slot", { key: 'b8f66ba2ef9651e99a0ce3b3caec2f021a55e723' })));
    }
    get el() { return index.getElement(this); }
    static get watchers() { return {
        "colSpan": ["watchColSpan"],
        "colStart": ["watchColStart"],
        "rowSpan": ["watchRowSpan"],
        "rowStart": ["watchRowStart"]
    }; }
};
LayoutGridItem.style = IcLayoutGridItemStyle0;

exports.ic_layout_grid_item = LayoutGridItem;

//# sourceMappingURL=ic-layout-grid-item.cjs.entry.js.map