import { r as registerInstance, h, H as Host, a as getElement } from './index-Co4V4Zk-.js';

const spwListItemCss = () => `html{line-height:1.3;-webkit-text-size-adjust:100%;}h1,h2,h3,h4,h5,h6,p,ul,li{padding:0;margin:0}ul{list-style:none}:host{box-sizing:border-box;line-height:1.3;-webkit-text-size-adjust:100%;font-size:100%}:host *,:host *::before,:host *::after{box-sizing:inherit;font-family:var(--spw-ds-font-main)}body{margin:0}hr{box-sizing:content-box;height:0;overflow:visible;}pre{font-family:monospace, monospace;font-size:1em;}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted;}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em;}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0;}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px;}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--spw-ds-container-xl:1232px;--spw-ds-container-lg:1024px;--spw-ds-container-md:768px;--spw-ds-container-sm:640px}.spw-ds-container{width:100%;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto}@media (min-width: 460px){.spw-ds-container{max-width:var(--spw-ds-container-sm)}}@media (min-width: 768px){.spw-ds-container{max-width:var(--spw-ds-container-md)}}@media (min-width: 1024px){.spw-ds-container{max-width:var(--spw-ds-container-lg)}}@media (min-width: 1350px){.spw-ds-container{max-width:var(--spw-ds-container-xl)}}:host{display:contents}.spw-list-item{position:relative;color:var(--spw-color-themes-grey-grey-900);transition:all 0.3s ease-in-out;text-decoration:none}:host(.--dark) .spw-list-item{color:var(--spw-ds-white)}.spw-list-item a{text-decoration:none}.spw-list-item--icon{padding-left:28px}.spw-list-item__category{display:inline-block;position:relative;margin-bottom:6px;color:var(--spw-ds-primary);font-weight:700;font-size:16px;line-height:1.5}.spw-list-item__category spw-icon{position:absolute;top:2px;left:-28px}.spw-list-item__category--hoverable{cursor:pointer}.spw-list-item__category--hoverable:hover{text-decoration:underline}.spw-list-item ::slotted([slot=buttons]){display:block;margin-top:12px}`;

const SpwListItem = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /** 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" }))));
    }
    get el() { return getElement(this); }
};
SpwListItem.style = spwListItemCss();

export { SpwListItem as spw_list_item };
