/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { Host, } from "@stencil/core";
import { h } from "../../utils/renderer";
/**
 * Show more or less from a collection of items.
 *
 * @version 6.0.0
 * @status stable
 *
 * @slot less - a button displayed when all fewer are shown. When clicked will show elements
 * @slot more - a button displayed when all items are shown. When clicked will hide elements
 * @slot - default slot displaying children elements to show or hide
 *
 * @part button-wrapper - wraps the 'more' / 'less' buttons
 * @part button-wrapper--more - wraps the 'more' button
 * @part button-wrapper--less - wraps the 'less' button
 * @part button - default 'more' / 'less' buttons
 * @part button--more - the default 'more' button
 * @part button--less - the default 'less' button
 */
export class Rating {
    host;
    /** The default state. `false` - excess items are hidden. `true` - excess items are shown. */
    show = false;
    /** Optional JS selector to target which elements to hide or show */
    childrenSelector;
    /** The maximum number of items to show when `show` is true.
     * Excess items will be hidden. */
    maxToShow = 3;
    /** Only show the 'show more' button */
    noHideBtn = false;
    get children() {
        let children;
        if (this.childrenSelector) {
            children = this.host.querySelectorAll(this.childrenSelector);
        }
        else {
            children = this.host.children;
        }
        return Array.from(children).filter((ele) => !ele.hasAttribute('slot'));
    }
    handleShowHideElements() {
        this.children.forEach((ele, i) => {
            if (this.show) {
                if (ele.style.display === 'none') {
                    ele.style.display = '';
                }
            }
            else {
                if (i >= this.maxToShow) {
                    ele.style.display = 'none';
                }
                else {
                    ele.style.display = '';
                }
            }
        });
    }
    handleClick(_e) {
        this.show = !this.show;
    }
    connectedCallback() {
        this.handleShowHideElements();
    }
    render() {
        return (h(Host, { key: 'b129148afdc959f912a16d1e2642c3e920a0a381', class: "nano-more-less" }, h("slot", { key: '92aa96b6301d14f7b4d9aee9cc4cafbf0ff75431', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
            h("div", { key: '73a5c457e8243cd8cf8e8ec1e681aa2c62244936', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, h("slot", { key: '48802275120ff78676a19b25f792806dd03db2c1', name: "less" }, h("button", { key: '703d054e4560cf22d571a29838dfbd649062f7ca', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
            !this.noHideBtn ? (h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, h("slot", { name: "more" }, h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
        ]));
    }
    static get is() { return "nano-more-less"; }
    static get encapsulation() { return "shadow"; }
    static get styles() { return ":host { display: contents; }"; }
    static get properties() {
        return {
            "show": {
                "type": "boolean",
                "attribute": "show",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The default state. `false` - excess items are hidden. `true` - excess items are shown."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "childrenSelector": {
                "type": "string",
                "attribute": "children-selector",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Optional JS selector to target which elements to hide or show"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "maxToShow": {
                "type": "number",
                "attribute": "max-to-show",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The maximum number of items to show when `show` is true.\nExcess items will be hidden."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "3"
            },
            "noHideBtn": {
                "type": "boolean",
                "attribute": "no-hide-btn",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Only show the 'show more' button"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
    static get elementRef() { return "host"; }
    static get watchers() {
        return [{
                "propName": "maxToShow",
                "methodName": "handleShowHideElements"
            }, {
                "propName": "show",
                "methodName": "handleShowHideElements"
            }, {
                "propName": "childrenSelector",
                "methodName": "handleShowHideElements"
            }];
    }
}
