import { MDCRipple } from '@material/ripple';
import { h } from "@stencil/core";
export class ListItem {
    constructor() {
        this.disabled = false;
        this.divider = false;
        /**
         * Coupe le text par defaut.
         */
        this.textWrap = false;
    }
    componentDidLoad() {
        const itemStart = this.host.shadowRoot.querySelector('.mdc-list-item__graphic');
        if (!itemStart.querySelector('slot').assignedNodes().length) {
            itemStart.remove();
        }
        const itemEnd = this.host.shadowRoot.querySelector('.mdc-list-item__meta');
        if (!itemEnd.querySelector('slot').assignedNodes().length) {
            itemEnd.remove();
        }
        MDCRipple.attachTo(this.host.shadowRoot.querySelector('.mdc-list-item'));
    }
    getClasses() {
        return {
            'mdc-typography': true,
            'mdc-ripple-surface': true,
            'mdc-list-item': true,
            'mdc-list--non-interactive': this.disabled,
            'mdc-list-item--selected': this.selected,
            'mdc-ripple-upgraded': this.selected,
            'mdc-ripple-upgraded--background-focused': this.selected,
            'mdc-list-divider': this.divider,
            'no-padding': this.noPadding
        };
    }
    setHeight() {
        const css = {
            'height': ''
        };
        if (this.size === 'medium')
            css.height = '36px';
        if (this.size === 'small')
            css.height = '26px';
        return css;
    }
    render() {
        return (h("li", { class: this.getClasses(), style: this.setHeight(), role: this.role, tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled },
            h("div", { class: "mdc-list-item__graphic", style: this.itemStartStyle },
                h("slot", { name: "item-start" })),
            this.label && h("label", { class: { 'gmv-label-nowrap': !this.textWrap }, title: this.label }, this.label),
            h("slot", null),
            h("div", { class: "mdc-list-item__meta", style: this.itemEndStyle },
                h("slot", { name: "item-end" }))));
    }
    static get is() { return "materials-list-item"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["list-item.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["list-item.css"]
    }; }
    static get properties() { return {
        "role": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "role",
            "reflect": false
        },
        "disabled": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "disabled",
            "reflect": false,
            "defaultValue": "false"
        },
        "selected": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "selected",
            "reflect": true
        },
        "divider": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "divider",
            "reflect": false,
            "defaultValue": "false"
        },
        "itemStartStyle": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "item-start-style",
            "reflect": false
        },
        "itemEndStyle": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "item-end-style",
            "reflect": false
        },
        "noPadding": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "no-padding",
            "reflect": false
        },
        "label": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Prefere le label au <slot /> pour beneficier du textWrap."
            },
            "attribute": "label",
            "reflect": false
        },
        "textWrap": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "Coupe le text par defaut."
            },
            "attribute": "text-wrap",
            "reflect": false,
            "defaultValue": "false"
        },
        "size": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "'medium' | 'small'",
                "resolved": "\"medium\" | \"small\"",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": "override la height par defaut du composant list-item."
            },
            "attribute": "size",
            "reflect": false
        }
    }; }
    static get elementRef() { return "host"; }
}
