import { h } from "@stencil/core";
export class SpwTableCell {
    constructor() {
        /** Définit un style visuel qui met en avant la cellule (à appliquer sur spw-table-cell ou spw-table-header) */
        this.isHighlighted = false;
        /** Définit un alignement de texte pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) */
        this.textAlign = 'left';
        /** Définit un alignement vertical pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) */
        this.verticalAlign = 'middle';
        /** Définit une largeur si nécessaire (à appliquer sur spw-table-cell) */
        this.width = 'auto';
        /** Définit le padding pour la cellule (à appliquer sur spw-table-cell ou spw-table-header) */
        this.padding = 'medium';
        /** Permet de changer le state du spw-table-cell  */
        this.state = 'default';
        /** Rend la cellule sticky lors du défilement (à appliquer sur spw-table-header ou spw-table-cell) */
        this.sticky = false;
        /** Position du sticky : 'start' (left: 0) ou 'end' (right: 0) (à appliquer sur spw-table-header ou spw-table-cell) */
        this.stickyPosition = 'start';
        /** Décalage en pixels pour le sticky (utile pour empiler plusieurs colonnes sticky) (à appliquer sur spw-table-header ou spw-table-cell) */
        this.stickyOffset = 0;
        this.isFirst = false;
    }
    componentDidLoad() {
        this.checkIfFirst();
        this.observeRowSlot();
        // Marquer si le padding a été défini explicitement par l'utilisateur
        if (this.el.hasAttribute('padding')) {
            this.el.setAttribute('data-has-explicit-padding', 'true');
        }
    }
    disconnectedCallback() {
        var _a;
        (_a = this.slotObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
    }
    checkIfFirst() {
        const parentRow = this.el.closest('spw-table-row');
        if (!parentRow) {
            this.isFirst = false;
            return;
        }
        const cells = Array.from(parentRow.children).filter((el) => el.tagName === 'SPW-TABLE-CELL' || el.tagName === 'SPW-TABLE-HEADER' || el.tagName === 'TD' || el.tagName === 'TH');
        this.isFirst = cells[0] === this.el;
    }
    observeRowSlot() {
        const parentRow = this.el.closest('spw-table-row');
        if (!parentRow)
            return;
        this.slotObserver = new MutationObserver(() => this.checkIfFirst());
        this.slotObserver.observe(parentRow, { childList: true, subtree: false });
    }
    get elementClass() {
        return {
            'spw-table-cell': true,
            'spw-table-cell--is-highlighted': this.isHighlighted,
            [`spw-table-cell--text-align-${this.textAlign}`]: true,
            [`spw-table-cell--padding-${this.padding}`]: true,
            [`spw-table-cell--vertical-align-${this.verticalAlign}`]: true,
            [`spw-table-cell--${this.state}`]: true,
            'spw-table-cell--first-in-row': this.isFirst,
            'spw-table-cell--sticky': this.sticky,
            [`spw-table-cell--sticky-${this.stickyPosition}`]: this.sticky,
        };
    }
    render() {
        const attrs = {
            width: this.width,
            class: this.elementClass,
            part: 'cell',
        };
        if (this.colspan !== undefined)
            attrs.colSpan = this.colspan;
        if (this.rowspan !== undefined)
            attrs.rowSpan = this.rowspan;
        if (this.headers !== undefined)
            attrs.headers = this.headers;
        if (this.sticky) {
            const stickyStyles = {
                position: 'sticky',
                zIndex: '10',
            };
            if (this.stickyPosition === 'start') {
                stickyStyles.left = `${this.stickyOffset}px`;
            }
            else {
                stickyStyles.right = `${this.stickyOffset}px`;
            }
            attrs.style = stickyStyles;
        }
        return (h("td", Object.assign({ key: 'f9b278a91f81e51c4440065af95be6ebd4e9f53a' }, attrs), h("slot", { key: 'fc808a407475a1389437d9be17a5d6df20e931f8' })));
    }
    static get is() { return "spw-table-cell"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-table-cell.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-table-cell.css"]
        };
    }
    static get properties() {
        return {
            "colspan": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "HTMLTableCellElement['colSpan']",
                    "resolved": "number",
                    "references": {
                        "HTMLTableCellElement": {
                            "location": "global",
                            "id": "global::HTMLTableCellElement"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit un colspan pour la cellule (\u00E0 appliquer sur spw-table-cell ou spw-table-header)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "colspan"
            },
            "headers": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "HTMLTableCellElement['headers']",
                    "resolved": "string",
                    "references": {
                        "HTMLTableCellElement": {
                            "location": "global",
                            "id": "global::HTMLTableCellElement"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit un header relationnel pour la cellule, \u00E0 des fins d'accessibilit\u00E9 (\u00E0 appliquer sur spw-table-cell ou spw-table-header)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "headers"
            },
            "rowspan": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "HTMLTableCellElement['rowSpan']",
                    "resolved": "number",
                    "references": {
                        "HTMLTableCellElement": {
                            "location": "global",
                            "id": "global::HTMLTableCellElement"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit un rowspan pour la cellule (\u00E0 appliquer sur spw-table-cell ou spw-table-header)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "rowspan"
            },
            "isHighlighted": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit un style visuel qui met en avant la cellule (\u00E0 appliquer sur spw-table-cell ou spw-table-header)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-highlighted",
                "defaultValue": "false"
            },
            "textAlign": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'center' | 'left' | 'right'",
                    "resolved": "\"center\" | \"left\" | \"right\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit un alignement de texte pour la cellule (\u00E0 appliquer sur spw-table-cell ou spw-table-header)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "text-align",
                "defaultValue": "'left'"
            },
            "verticalAlign": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'top' | 'bottom' | 'middle'",
                    "resolved": "\"bottom\" | \"middle\" | \"top\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit un alignement vertical pour la cellule (\u00E0 appliquer sur spw-table-cell ou spw-table-header)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "vertical-align",
                "defaultValue": "'middle'"
            },
            "width": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit une largeur si n\u00E9cessaire (\u00E0 appliquer sur spw-table-cell)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "width",
                "defaultValue": "'auto'"
            },
            "padding": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'small' | 'medium'",
                    "resolved": "\"medium\" | \"small\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit le padding pour la cellule (\u00E0 appliquer sur spw-table-cell ou spw-table-header)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "padding",
                "defaultValue": "'medium'"
            },
            "state": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'default' | 'selected' | 'disabled'",
                    "resolved": "\"default\" | \"disabled\" | \"selected\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de changer le state du spw-table-cell"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "state",
                "defaultValue": "'default'"
            },
            "sticky": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Rend la cellule sticky lors du d\u00E9filement (\u00E0 appliquer sur spw-table-header ou spw-table-cell)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sticky",
                "defaultValue": "false"
            },
            "stickyPosition": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'start' | 'end'",
                    "resolved": "\"end\" | \"start\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Position du sticky : 'start' (left: 0) ou 'end' (right: 0) (\u00E0 appliquer sur spw-table-header ou spw-table-cell)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sticky-position",
                "defaultValue": "'start'"
            },
            "stickyOffset": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9calage en pixels pour le sticky (utile pour empiler plusieurs colonnes sticky) (\u00E0 appliquer sur spw-table-header ou spw-table-cell)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "sticky-offset",
                "defaultValue": "0"
            }
        };
    }
    static get states() {
        return {
            "isFirst": {}
        };
    }
    static get elementRef() { return "el"; }
}
