/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { Build, Host, } from "@stencil/core";
import { h } from "../../utils/renderer";
import { addGlobalStylesheetToShadow } from "../../utils/style";
/**
 * Collapsible comparison allows users to compare two short lists of titles which can be expanded to reveal more detail about each item.
 *
 * @version 8.0.0
 * @status new
 *
 * @slot heading - the heading of the comparison
 * @slot comparison-headings - the headings of the comparison
 * @slot content - the content of the comparison
 *
 * @part header - the header of the comparison
 */
export class CollapsibleComparison {
    get details() {
        return this.el.querySelectorAll('nano-details');
    }
    el;
    /**
     * Controls whether the comparison is open or closed.
     */
    open = false;
    /**
     * Optional toggle button label to show details
     */
    showLabel = 'Show details';
    /**
     * Optional toggle button label to hide details
     */
    hideLabel = 'Hide details';
    /**
     * Emits when the comparison is opened and closed.
     */
    nanoToggle;
    handleOpenChange() {
        this.details?.forEach((detail) => {
            if (this.open) {
                detail.open = true;
            }
            else {
                detail.open = false;
            }
        });
        this.nanoToggle.emit(this.open);
    }
    handleClick = () => {
        this.open = !this.open;
    };
    getToggleLabel = () => {
        return this.open ? this.hideLabel : this.showLabel;
    };
    componentWillLoad() {
        if (Build.isBrowser)
            addGlobalStylesheetToShadow(this.el.shadowRoot);
    }
    componentDidLoad() {
        if (this.open) {
            this.details?.forEach((detail) => {
                detail.open = true;
            });
        }
    }
    render() {
        return (h(Host, { key: '5cced0d90a9447ca3b8ee481478aacbeeb4d4484', class: "nano-collapsible-comparison" }, h("div", { key: 'ae25da89fa04b0a5c89210ba8292cf1db8190a30', class: "collapsible-comparison" }, h("div", { key: '7cfd1c96cc5c1553d50193a8bec9abd260e08dfc', part: "header" }, h("div", { key: 'ccc5102295b9ca9404d3c358f4d9a885d45b5885', class: "header" }, h("slot", { key: '7d5b2f2d074b3d6b99f126b4bec77afa1d285ea8', name: "heading" }), h("nano-cta", { key: 'a10b35f5779d035d1331cdbd55c42d3007d7ce2c', size: "large", icon: this.open ? 'up' : 'down', secondary: true }, h("button", { key: '59fde8b32c34ec3df61f96c767ce44e18482a2d5', onClick: this.handleClick }, this.getToggleLabel())), h("nano-icon-button", { key: '7f9174c6d81455fc4d3fcae99b684e26de44d7ec', label: this.getToggleLabel(), onClick: this.handleClick, iconName: "light/chevron-down", class: this.open ? 'open' : '' })), h("div", { key: '1f92af4c863a0a643e47e225781bb67e32efea3e', class: "headings" }, h("slot", { key: '5744549ec533f0d1019138325310cdd6a6dd1d55', name: "comparison-headings" }))), h("div", { key: 'fb9b8acb4315686fcabd5771989c2f2bed298895', class: "content" }, h("slot", { key: '77821b17b1e3384126a1d7f7714f8779924b4b2d', name: "content" })))));
    }
    static get is() { return "nano-collapsible-comparison"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["collapsible-comparison.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["collapsible-comparison.css"]
        };
    }
    static get properties() {
        return {
            "open": {
                "type": "boolean",
                "attribute": "open",
                "mutable": true,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Controls whether the comparison is open or closed."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "defaultValue": "false"
            },
            "showLabel": {
                "type": "string",
                "attribute": "show-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Optional toggle button label to show details"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Show details'"
            },
            "hideLabel": {
                "type": "string",
                "attribute": "hide-label",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Optional toggle button label to hide details"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'Hide details'"
            }
        };
    }
    static get events() {
        return [{
                "method": "nanoToggle",
                "name": "nanoToggle",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emits when the comparison is opened and closed."
                },
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "open",
                "methodName": "handleOpenChange"
            }];
    }
}
