import { Host, h } from "@stencil/core";
export class SpwListItem {
    constructor() {
        /** Type de variante d'élément de liste */
        this.variant = 'default';
        /** Attribut target, s'applique uniquement si href est rempli */
        this.target = '_self';
        /** Spécifie une icône à côté du titre */
        this.icon = 'fa-arrow-right';
        /** Permet de limiter le nombre de lignes du titre et de la description */
        this.lineClamp = '3';
        /** Permet de spécifier une icône pour la catégorie */
        this.categoryIcon = 'fa-file-signature';
        /** 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.variant}`;
            const surfaceClass = `--${this.surface}`;
            const iconClass = `--icon`;
            const titleElement = this.el.querySelector('spw-list-title');
            const descriptionElement = this.el.querySelector('spw-list-description');
            titleElement && titleElement.classList.add(variantClass);
            titleElement && titleElement.classList.add(surfaceClass);
            titleElement && this.icon && titleElement.setAttribute('icon', this.icon);
            if (titleElement && !titleElement.hasAttribute('line-clamp')) {
                titleElement.setAttribute('line-clamp', this.lineClamp);
            }
            descriptionElement && descriptionElement.classList.add(variantClass);
            descriptionElement && this.icon && descriptionElement.classList.add(iconClass);
            if (descriptionElement && !descriptionElement.hasAttribute('line-clamp')) {
                descriptionElement.setAttribute('line-clamp', this.lineClamp);
            }
        });
    }
    onMouseEnter() {
        this.setHovered(true);
    }
    onMouseLeave() {
        this.setHovered(false);
        this.setActive(false);
    }
    onTouchStart() {
        this.setActive(true);
    }
    onTouchEnd() {
        this.setActive(false);
    }
    onMouseDown() {
        this.setActive(true);
    }
    onMouseUp() {
        this.setActive(false);
    }
    onBlur() {
        this.setActive(false);
    }
    onFocus() {
        this.setActive(true);
    }
    setHovered(isHovered) {
        const titleElement = this.el.querySelector('spw-list-title');
        if (titleElement && this.href) {
            titleElement.classList.toggle('--hovered', isHovered);
        }
    }
    setActive(isActive) {
        const titleElement = this.el.querySelector('spw-list-title');
        if (titleElement && this.href) {
            titleElement.classList.toggle('--active', isActive);
        }
    }
    get elementClass() {
        return {
            'spw-list-item': true,
            'spw-list-item--hoverable': !!this.href,
            'spw-list-item--icon': (!!this.icon && this.icon !== '') || (!!this.categoryIcon && this.categoryIcon !== '' && !!this.category),
            [`spw-list-item--${this.variant}`]: true,
        };
    }
    get elementCatClass() {
        return {
            'spw-list-item__category': true,
            'spw-list-item__category--icon': !!this.categoryIcon,
            'spw-list-item__category--hoverable': !!this.categoryLink,
        };
    }
    handleClick() {
        if (this.categoryLink) {
            window.location.href = this.categoryLink;
        }
    }
    render() {
        const { href, target } = this;
        const TagType = this.href === undefined ? 'div' : 'a';
        const attrs = TagType === 'div'
            ? {}
            : {
                href,
                target,
            };
        return (h(Host, { key: 'f4137df597553595b7b7f37020c364bd4369d0d8' }, h("li", { key: '58305da3d69ef47f950c43a9b3baca3c501218f1', role: "listitem", class: this.elementClass }, this.category && (h("span", { key: '1da1ec09cf986e3453ee64790528016e839f83d3', class: this.elementCatClass, onClick: () => this.handleClick() }, this.categoryIcon && h("spw-icon", { key: '6d20a688a05a4de079bef689251dd61d0a40cf76', icon: this.categoryIcon }), " ", this.category)), h(TagType, Object.assign({ key: 'ad5cec4a272674c8735c802a9c420c3bb5b48191' }, attrs), h("slot", { key: 'fde395b5abb04a747d35c7f5e155250cf2102f9d' })), h("slot", { key: '1dd19acae38f423c7325aa6e350c87253ef13e66', name: "buttons" }))));
    }
    static get is() { return "spw-list-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["spw-list-item.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["spw-list-item.css"]
        };
    }
    static get properties() {
        return {
            "variant": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'shortcut' | 'default'",
                    "resolved": "\"default\" | \"shortcut\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Type de variante d'\u00E9l\u00E9ment de liste"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "variant",
                "defaultValue": "'default'"
            },
            "href": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sp\u00E9cifie le lien si n\u00E9cessaire"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "href"
            },
            "target": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Attribut target, s'applique uniquement si href est rempli"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "target",
                "defaultValue": "'_self'"
            },
            "icon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Sp\u00E9cifie une ic\u00F4ne \u00E0 c\u00F4t\u00E9 du titre"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "icon",
                "defaultValue": "'fa-arrow-right'"
            },
            "lineClamp": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string | 'none'",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Permet de limiter le nombre de lignes du titre et de la description"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "line-clamp",
                "defaultValue": "'3'"
            },
            "category": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de sp\u00E9cifier une cat\u00E9gorie pour l'\u00E9l\u00E9ment de liste"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "category"
            },
            "categoryLink": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de sp\u00E9cifier un lien pour la cat\u00E9gorie"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "category-link"
            },
            "categoryIcon": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Permet de sp\u00E9cifier une ic\u00F4ne pour la cat\u00E9gorie"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "category-icon",
                "defaultValue": "'fa-file-signature'"
            },
            "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
            }, {
                "name": "mouseenter",
                "method": "onMouseEnter",
                "target": undefined,
                "capture": false,
                "passive": true
            }, {
                "name": "mouseleave",
                "method": "onMouseLeave",
                "target": undefined,
                "capture": false,
                "passive": true
            }, {
                "name": "touchstart",
                "method": "onTouchStart",
                "target": undefined,
                "capture": false,
                "passive": true
            }, {
                "name": "touchend",
                "method": "onTouchEnd",
                "target": undefined,
                "capture": false,
                "passive": true
            }, {
                "name": "mousedown",
                "method": "onMouseDown",
                "target": undefined,
                "capture": false,
                "passive": true
            }, {
                "name": "mouseup",
                "method": "onMouseUp",
                "target": undefined,
                "capture": false,
                "passive": true
            }, {
                "name": "blur",
                "method": "onBlur",
                "target": undefined,
                "capture": false,
                "passive": false
            }, {
                "name": "focus",
                "method": "onFocus",
                "target": undefined,
                "capture": false,
                "passive": false
            }];
    }
}
