import { Host, h } from "@stencil/core";
export class SpwMosaicItem {
    constructor() {
        this.parentColsMobile = 1;
        this.parentColsTablet = 2;
        this.parentColsDesktop = 3;
    }
    componentDidLoad() {
        var _a;
        (_a = this.el.closest('spw-mosaic')) === null || _a === void 0 ? void 0 : _a.addEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));
        this.applyColSpans();
    }
    disconnectedCallback() {
        var _a;
        (_a = this.el.closest('spw-mosaic')) === null || _a === void 0 ? void 0 : _a.removeEventListener('mosaicConfigurationChanged', this.handleConfigurationChange.bind(this));
    }
    colSpanChanged() {
        this.applyColSpans();
    }
    handleConfigurationChange(event) {
        const { colsMobile, colsTablet, colsDesktop } = event.detail;
        this.parentColsMobile = colsMobile;
        this.parentColsTablet = colsTablet;
        this.parentColsDesktop = colsDesktop;
        this.applyColSpans();
    }
    applyColSpans() {
        if (this.colSpanMobile) {
            this.el.style.setProperty('--spw-mosaic-item-width-mobile', `calc(100% / ${this.parentColsMobile} * ${this.colSpanMobile})`);
        }
        else {
            this.el.style.setProperty('--spw-mosaic-item-width-mobile', `calc(100% / ${this.parentColsMobile})`);
        }
        if (this.colSpanTablet) {
            this.el.style.setProperty('--spw-mosaic-item-width-tablet', `calc(100% / ${this.parentColsTablet} * ${this.colSpanTablet})`);
        }
        else {
            this.el.style.setProperty('--spw-mosaic-item-width-tablet', `calc(100% / ${this.parentColsTablet})`);
        }
        if (this.colSpanDesktop) {
            this.el.style.setProperty('--spw-mosaic-item-width-desktop', `calc(100% / ${this.parentColsDesktop} * ${this.colSpanDesktop})`);
        }
        else {
            this.el.style.setProperty('--spw-mosaic-item-width-desktop', `calc(100% / ${this.parentColsDesktop})`);
        }
    }
    render() {
        return (h(Host, { key: '82c0e3a358daf0c96c0c4799fdf208e6e22e0e88' }, h("slot", { key: '5e094652b85b1fa2eddcf611b9e4fd74159fcbb3' })));
    }
    static get is() { return "spw-mosaic-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-mosaic-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-mosaic-item.css"]
        };
    }
    static get properties() {
        return {
            "colSpanMobile": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Nombre de colonnes que l'item doit occuper en vue mobile (override la valeur h\u00E9rit\u00E9e du parent)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "col-span-mobile"
            },
            "colSpanTablet": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Nombre de colonnes que l'item doit occuper en vue tablette (override la valeur h\u00E9rit\u00E9e du parent)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "col-span-tablet"
            },
            "colSpanDesktop": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Nombre de colonnes que l'item doit occuper en vue desktop (override la valeur h\u00E9rit\u00E9e du parent)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "col-span-desktop"
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "colSpanMobile",
                "methodName": "colSpanChanged"
            }, {
                "propName": "colSpanTablet",
                "methodName": "colSpanChanged"
            }, {
                "propName": "colSpanDesktop",
                "methodName": "colSpanChanged"
            }];
    }
}
