import { h, Fragment, Host } from "@stencil/core";
export class SpwTabsNavigationItem {
    constructor() {
        /** Définit si le tab est actif ou non (hérité du parent, pas modifiable directement) */
        this.active = false;
        /** Définit si le tab est disabled ou non */
        this.disabled = false;
        /** Prévoit la présence d'une pastille sur l'élément de navigation */
        this.bubble = false;
        /** Variante du tag à afficher sur le spw-tabs-navigation-item */
        this.tagVariant = 'default';
        /** Présence d'une icône ou non sur le tag du spw-tabs-navigation-item */
        this.tagIcon = false;
        this.slotText = '';
        this.handleClick = (event) => {
            event.preventDefault();
            event.stopPropagation();
            if (!this.disabled) {
                this.tabSelected.emit(this.tabId);
            }
        };
        this.handleKeyDown = (event) => {
            if (this.disabled)
                return;
            const key = event.key;
            if (key === 'Enter' || key === ' ') {
                event.preventDefault();
                event.stopPropagation();
                this.tabSelected.emit(this.tabId);
            }
        };
    }
    componentDidLoad() {
        this.updateSlotText();
    }
    handleSlotChange() {
        this.updateSlotText();
    }
    updateSlotText() {
        var _a;
        const slot = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
        if (slot) {
            const assignedNodes = slot.assignedNodes({ flatten: true });
            const text = assignedNodes
                .filter(n => n.nodeType === Node.TEXT_NODE || n.nodeType === Node.ELEMENT_NODE)
                .map(n => { var _a; return (_a = n.textContent) === null || _a === void 0 ? void 0 : _a.trim(); })
                .join(' ')
                .trim();
            this.slotText = text || '';
        }
    }
    get elementClass() {
        return {
            'spw-tabs-navigation-item': true,
            'spw-tabs-navigation-item--active': this.active,
            'spw-tabs-navigation-item--disabled': this.disabled,
            'spw-tabs-navigation-item--bubble': this.bubble,
            'spw-tabs-navigation-item--ellipsis': this.hasEllipsis,
        };
    }
    render() {
        const iconPosition = this.icon && !this.iconPosition ? 'right' : this.iconPosition;
        const iconClass = `spw-icon--${iconPosition}`;
        const iconElement = this.icon ? h("spw-icon", { class: iconClass, icon: this.icon }) : null;
        const tagElement = this.tagText ? (h("spw-tag", { size: "small", "has-icon": this.tagIcon ? 'true' : 'false', variant: this.tagVariant }, this.tagText)) : null;
        return (h(Host, { key: 'f6a682fb5b5e2c366978f5d2d5e026c83bf770c5', class: this.active ? '--active' : '' }, h("li", { key: '24f7c44dc52de4f136fae4d9c337bb0c520a9cd4', id: `tab-${this.tabId}`, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.accAriaLabel || this.slotText, onKeyDown: this.handleKeyDown, tabIndex: this.disabled ? -1 : 0, class: this.elementClass, onClick: this.handleClick }, this.hasEllipsis && (h("spw-tooltip", { key: '6c9c3e76e5f614e35284d23ffbeafee4cf07b7a5', cursor: this.disabled ? 'disabled' : 'pointer', class: "spw-tooltip--has-ellipsis", tooltipText: this.slotText }, iconPosition === 'left' && iconElement, h("slot", { key: 'b7a9c7048e1de57d7afede58a53fa5d6a6be693d' }), iconPosition === 'right' && iconElement, tagElement)), !this.hasEllipsis && (h(Fragment, { key: '95a7d2d657abbf2b8ccd896e54879e5b3d29481c' }, iconPosition === 'left' && iconElement, h("slot", { key: '637a18e4faa6ac5a02b8f94fd1657a89cd6886a4' }), iconPosition === 'right' && iconElement, tagElement)), ' ', this.bubble && h("span", { key: '4c89b0d10720d4731def6b7100fad8a17356244f', class: "bubble" }))));
    }
    static get is() { return "spw-tabs-navigation-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-tabs-navigation-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-tabs-navigation-item.css"]
        };
    }
    static get properties() {
        return {
            "tabId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit un id pour le tab"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tab-id"
            },
            "active": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit si le tab est actif ou non (h\u00E9rit\u00E9 du parent, pas modifiable directement)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "active",
                "defaultValue": "false"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit si le tab est disabled ou non"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "bubble": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Pr\u00E9voit la pr\u00E9sence d'une pastille sur l'\u00E9l\u00E9ment de navigation"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "bubble",
                "defaultValue": "false"
            },
            "hasEllipsis": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9finit si le texte doit \u00EAtre coup\u00E9 pour les onglets au titre trop long"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "has-ellipsis"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Si rempli, vous pouvez utiliser une r\u00E9f\u00E9rence d'ic\u00F4ne font-awesome sur le spw-tabs-navigation-item"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon"
            },
            "iconPosition": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'left' | 'right'",
                    "resolved": "\"left\" | \"right\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Position de l'ic\u00F4ne \u00E0 l'int\u00E9rieur du bouton sur le spw-tabs-navigation-item"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon-position"
            },
            "tagText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Texte du tag \u00E0 afficher sur le spw-tabs-navigation-item"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tag-text"
            },
            "tagVariant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'grey' | 'blue' | 'green' | 'orange' | 'red' | 'purple' | 'default'",
                    "resolved": "\"blue\" | \"default\" | \"green\" | \"grey\" | \"orange\" | \"purple\" | \"red\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Variante du tag \u00E0 afficher sur le spw-tabs-navigation-item"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tag-variant",
                "defaultValue": "'default'"
            },
            "tagIcon": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Pr\u00E9sence d'une ic\u00F4ne ou non sur le tag du spw-tabs-navigation-item"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tag-icon",
                "defaultValue": "false"
            },
            "accAriaLabel": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Remplit l'attribut aria-label, utilis\u00E9 \u00E0 des fins d'accessibilit\u00E9"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "acc-aria-label"
            }
        };
    }
    static get states() {
        return {
            "slotText": {}
        };
    }
    static get events() {
        return [{
                "method": "tabSelected",
                "name": "tabSelected",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get listeners() {
        return [{
                "name": "slotchange",
                "method": "handleSlotChange",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
