import { Host, h } from "@stencil/core";
export class SpwGroup {
    constructor() {
        /** Type d'éléments contenus dans le groupe (buttons, checkboxes, radios, links) */
        this.type = 'buttons';
        /** Orientation du groupe (horizontal ou vertical) */
        this.orientation = 'horizontal';
        /** Alignement horizontal du groupe */
        this.alignment = 'left';
        /** Détermine si le groupe est désactivé */
        this.disabled = false;
        /** Texte à afficher au-dessus de l'élément de formulaire */
        this.label = '';
        /** Si `true`, l'ordre des boutons est inversé en mobile (uniquement valable en cas d'alignement left) */
        this.isReversed = false;
        /** Si vrai, le groupe prend toute la largeur */
        this.isFullWidth = false;
        /** Comportement du flex-wrap sur le container */
        this.flexWrap = 'nowrap';
        /** Message d'erreur à afficher sous le groupe (pour les types checkboxes et radios) */
        this.error = '';
        /** Message d'indication (hint) à afficher sous le groupe (pour les types checkboxes et radios) */
        this.hint = '';
        /** Message de succès à afficher sous le groupe (pour les types checkboxes et radios) */
        this.success = '';
        /** Message de warning à afficher sous le groupe (pour les types checkboxes et radios) */
        this.warning = '';
        /** Positionnement du tooltip */
        this.tooltipDirection = 'top';
        /** Curseur du tooltip */
        this.tooltipCursor = 'help';
    }
    get isCheckboxOrRadio() {
        return this.type === 'checkboxes' || this.type === 'radios';
    }
    componentDidLoad() {
        this.handleSlotChange();
    }
    handleSlotChange() {
        var _a;
        const elements = ((_a = this.slotEl) === null || _a === void 0 ? void 0 : _a.assignedElements) ? this.slotEl.assignedElements() : Array.from(this.host.querySelectorAll('*'));
        elements.forEach(element => {
            if (this.disabled) {
                element.setAttribute('disabled', '');
            }
            else {
                element.removeAttribute('disabled');
            }
            if (this.isCheckboxOrRadio && this.error) {
                element.setAttribute('error', '');
            }
            else {
                element.removeAttribute('error');
            }
        });
    }
    get groupClasses() {
        return {
            'spw-group': true,
            'spw-group--horizontal': this.orientation === 'horizontal',
            'spw-group--vertical': this.orientation === 'vertical',
            'spw-group--reversed': this.isReversed,
            'spw-group--disabled': this.disabled,
            'spw-group--is-error': !!(this.error && this.isCheckboxOrRadio),
            'spw-group--is-full-width': this.isFullWidth,
            [`spw-group--${this.type}`]: true,
            [`spw-group--align-${this.alignment}`]: true,
        };
    }
    renderMessages() {
        if (!this.isCheckboxOrRadio)
            return;
        return [
            this.error && h("spw-field-message", { variant: "error" }, this.error),
            this.hint && h("spw-field-message", { variant: "hint" }, this.hint),
            this.success && h("spw-field-message", { variant: "success" }, this.success),
            this.warning && h("spw-field-message", { variant: "warning" }, this.warning),
        ];
    }
    render() {
        return (h(Host, { key: '2d8438c4e41a748a04c282991d6fa0c9811626ef' }, h("div", { key: '3cedc33a257bdb112e0b03dbf703d3eba07f262f', class: this.groupClasses }, this.label && (h("spw-field-label", { key: '9b9988718669bc2f832d280549f32f72b2580e0e', class: "spw-group__field-label", label: this.label, name: this.name, required: this.required, tooltipTitle: this.tooltipTitle, tooltipText: this.tooltipText, tooltipMaxWidth: this.tooltipMaxWidth, tooltipDirection: this.tooltipDirection, tooltipCursor: this.tooltipCursor })), this.isCheckboxOrRadio && this.assistiveText && (h("spw-field-message", { key: '3ffbe7cdc69048a63fbd89342024c86787502a0e', class: "spw-group__field-message", variant: "hint", showIcon: false }, this.assistiveText)), h("div", { key: '50533c9bd5cca52ba2620e005a86a19e23237daa', class: "spw-group__container", style: { flexWrap: this.flexWrap } }, h("slot", { key: '91c0a8fd562f4eaa2edacb5489fc14703c8f88f8', ref: el => (this.slotEl = el) })), this.renderMessages())));
    }
    static get is() { return "spw-group"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-group.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-group.css"]
        };
    }
    static get properties() {
        return {
            "type": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'buttons' | 'checkboxes' | 'radios' | 'links'",
                    "resolved": "\"buttons\" | \"checkboxes\" | \"links\" | \"radios\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Type d'\u00E9l\u00E9ments contenus dans le groupe (buttons, checkboxes, radios, links)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "type",
                "defaultValue": "'buttons'"
            },
            "orientation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'horizontal' | 'vertical'",
                    "resolved": "\"horizontal\" | \"vertical\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Orientation du groupe (horizontal ou vertical)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "orientation",
                "defaultValue": "'horizontal'"
            },
            "alignment": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'left' | 'center' | 'right'",
                    "resolved": "\"center\" | \"left\" | \"right\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Alignement horizontal du groupe"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "alignment",
                "defaultValue": "'left'"
            },
            "disabled": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "D\u00E9termine si le groupe est d\u00E9sactiv\u00E9"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "disabled",
                "defaultValue": "false"
            },
            "label": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Texte \u00E0 afficher au-dessus de l'\u00E9l\u00E9ment de formulaire"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "label",
                "defaultValue": "''"
            },
            "required": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Si `true`, le label comporte une ast\u00E9risque"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "required"
            },
            "isReversed": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Si `true`, l'ordre des boutons est invers\u00E9 en mobile (uniquement valable en cas d'alignement left)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-reversed",
                "defaultValue": "false"
            },
            "name": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Attribut `name` de l'\u00E9l\u00E9ment input"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "name"
            },
            "isFullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Si vrai, le groupe prend toute la largeur"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "is-full-width",
                "defaultValue": "false"
            },
            "flexWrap": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Comportement du flex-wrap sur le container"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "flex-wrap",
                "defaultValue": "'nowrap'"
            },
            "assistiveText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Texte d'assistance \u00E0 afficher sous le label (pour les types checkboxes et radios)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "assistive-text"
            },
            "error": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Message d'erreur \u00E0 afficher sous le groupe (pour les types checkboxes et radios)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "error",
                "defaultValue": "''"
            },
            "hint": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Message d'indication (hint) \u00E0 afficher sous le groupe (pour les types checkboxes et radios)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "hint",
                "defaultValue": "''"
            },
            "success": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Message de succ\u00E8s \u00E0 afficher sous le groupe (pour les types checkboxes et radios)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "success",
                "defaultValue": "''"
            },
            "warning": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Message de warning \u00E0 afficher sous le groupe (pour les types checkboxes et radios)"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "warning",
                "defaultValue": "''"
            },
            "tooltipTitle": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Titre du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-title"
            },
            "tooltipText": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Texte du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-text"
            },
            "tooltipMaxWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Largeur maximale du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-max-width"
            },
            "tooltipDirection": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'top' | 'bottom' | 'left' | 'right'",
                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Positionnement du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-direction",
                "defaultValue": "'top'"
            },
            "tooltipCursor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'pointer' | 'default' | 'help' | 'disabled'",
                    "resolved": "\"default\" | \"disabled\" | \"help\" | \"pointer\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Curseur du tooltip"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "tooltip-cursor",
                "defaultValue": "'help'"
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "disabled",
                "methodName": "handleSlotChange"
            }, {
                "propName": "error",
                "methodName": "handleSlotChange"
            }];
    }
}
