import { Host, h } from "@stencil/core";
export class SpwList {
    constructor() {
        /** Spécifie l'écart entre les éléments de liste */
        this.gap = 'medium';
        /** Permet de choisir la surface d'arrière-plan de la liste */
        this.surface = 'light';
    }
    componentWillLoad() {
        this.applyVariantToChildren();
    }
    slotChanged() {
        this.applyVariantToChildren();
    }
    applyVariantToChildren() {
        requestAnimationFrame(() => {
            const variantClass = `--${this.surface}`;
            const contentElements = this.el.querySelectorAll('spw-list-item');
            contentElements.forEach(contentElement => {
                contentElement.classList.add(variantClass);
                contentElement.setAttribute('surface', this.surface);
            });
        });
    }
    get elementClass() {
        return {
            'spw-list': true,
            [`spw-list--${this.gap}`]: true,
        };
    }
    render() {
        return (h(Host, { key: 'f0d761c29dcd8d941405051fe61ab5d34530a6ba' }, h("ul", { key: '5bc5e5b4a6698383f77925db8115d7706389e61a', role: "list", class: this.elementClass }, h("slot", { key: '47f63bb4ba132b5187c0c71456e83eea7e5f50f0' }))));
    }
    static get is() { return "spw-list"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-list.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-list.css"]
        };
    }
    static get properties() {
        return {
            "gap": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'small' | 'medium' | 'large'",
                    "resolved": "\"large\" | \"medium\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sp\u00E9cifie l'\u00E9cart entre les \u00E9l\u00E9ments de liste"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "gap",
                "defaultValue": "'medium'"
            },
            "surface": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'light' | 'dark'",
                    "resolved": "\"dark\" | \"light\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de choisir la surface d'arri\u00E8re-plan de la liste"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "surface",
                "defaultValue": "'light'"
            }
        };
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "slotchange",
                "method": "slotChanged",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
