import { Host, h } from "@stencil/core";
export class SpwGrid {
    constructor() {
        /** Nombre de colonnes à afficher en vue mobile */
        this.colsMobile = 1;
        /** Nombre de colonnes à afficher en vue tablette */
        this.colsTablet = 2;
        /** Nombre de colonnes à afficher en vue desktop */
        this.colsDesktop = 3;
        /** Espacement entre les éléments de grille */
        this.gap = 'medium';
    }
    emitConfigurationChanged() {
        const event = new CustomEvent('gridConfigurationChanged', {
            detail: {
                colsMobile: this.colsMobile,
                colsTablet: this.colsTablet,
                colsDesktop: this.colsDesktop,
            },
            bubbles: true,
            composed: true,
        });
        this.el.dispatchEvent(event);
    }
    configurationChanged() {
        this.emitConfigurationChanged();
    }
    componentDidLoad() {
        this.emitConfigurationChanged();
    }
    render() {
        return (h(Host, { key: 'e3b1f2084c0ee57485f9fa19f2a55c24d6be564e' }, h("div", { key: '351ab4d7a6fa6888ca7dc84387a9569f5764d4dd', class: { 'spw-grid': true, [`spw-grid--gap-${this.gap}`]: !!this.gap }, style: {
                '--spw-grid-cols-mobile': this.colsMobile.toString(),
                '--spw-grid-cols-tablet': this.colsTablet.toString(),
                '--spw-grid-cols-desktop': this.colsDesktop.toString(),
            } }, h("slot", { key: '1fcb8e4df8931825d68301b35ae5e9d53f216418' }))));
    }
    static get is() { return "spw-grid"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-grid.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-grid.css"]
        };
    }
    static get properties() {
        return {
            "colsMobile": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Nombre de colonnes \u00E0 afficher en vue mobile"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "cols-mobile",
                "defaultValue": "1"
            },
            "colsTablet": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Nombre de colonnes \u00E0 afficher en vue tablette"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "cols-tablet",
                "defaultValue": "2"
            },
            "colsDesktop": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Nombre de colonnes \u00E0 afficher en vue desktop"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "cols-desktop",
                "defaultValue": "3"
            },
            "gap": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'none' | 'small' | 'medium' | 'large'",
                    "resolved": "\"large\" | \"medium\" | \"none\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Espacement entre les \u00E9l\u00E9ments de grille"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "gap",
                "defaultValue": "'medium'"
            }
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "colsMobile",
                "methodName": "configurationChanged"
            }, {
                "propName": "colsTablet",
                "methodName": "configurationChanged"
            }, {
                "propName": "colsDesktop",
                "methodName": "configurationChanged"
            }];
    }
}
