/*!
 * Custom elements for Nanopore-Digital Web applications
 */
'use strict';

var index = require('./index-DGttnXif.js');
var renderer = require('./renderer-jVpDRMfV.js');

const Rating = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    get host() { return index.getElement(this); }
    /** 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 (renderer.h(index.Host, { key: 'b129148afdc959f912a16d1e2642c3e920a0a381', class: "nano-more-less" }, renderer.h("slot", { key: '92aa96b6301d14f7b4d9aee9cc4cafbf0ff75431', onSlotchange: () => this.handleShowHideElements() }), this.children?.length > this.maxToShow && [
            renderer.h("div", { key: '73a5c457e8243cd8cf8e8ec1e681aa2c62244936', style: { display: this.show ? 'none' : 'contents' }, class: "button-wrapper", part: "button-wrapper button-wrapper--less", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { key: '48802275120ff78676a19b25f792806dd03db2c1', name: "less" }, renderer.h("button", { key: '703d054e4560cf22d571a29838dfbd649062f7ca', part: "button button--less" }, "Show more (+", this.children.length - this.maxToShow, ")"))),
            !this.noHideBtn ? (renderer.h("div", { style: { display: this.show ? 'contents' : 'none' }, class: "button-wrapper", part: "button-wrapper button-wrapper--more", onClick: (e) => this.handleClick(e) }, renderer.h("slot", { name: "more" }, renderer.h("button", { part: "button button--more" }, "Show less (-", this.children.length - this.maxToShow, ")")))) : (''),
        ]));
    }
    static get watchers() { return {
        "maxToShow": ["handleShowHideElements"],
        "show": ["handleShowHideElements"],
        "childrenSelector": ["handleShowHideElements"]
    }; }
};
Rating.style = ":host { display: contents; }";

exports.nano_more_less = Rating;
