/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
import { h } from './renderer.js';
import { a as addGlobalStylesheetToShadow } from './style.js';
import { d as defineCustomElement$5 } from './cta.js';
import { d as defineCustomElement$4 } from './icon.js';
import { d as defineCustomElement$3 } from './icon-button.js';
import { d as defineCustomElement$2 } from './tooltip.js';

const collapsibleComparisonCss = ":host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host,\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n[hidden] {\n  display: none !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    :host,\n    *,\n    *::before,\n    *::after {\n      animation-duration: 0.01ms !important;\n      animation-iteration-count: 1 !important;\n      transition-duration: 0.01ms !important;\n      scroll-behavior: auto !important;\n    }\n  }:host {\n  /**\n  * @prop --color-bg - Background color of the component. Defaults to var(--nano-color-base-0).\n  * @prop --color-border - Border color of the component. Defaults to var(--nano-color-neutral-200).\n  * @prop --outer-spacing - Horizontal padding of the component. Defaults to var(--nano-spacing-l1-default).\n  */\n}\n:host .collapsible-comparison {\n  background-color: var(--color-bg);\n  color: var(--nano-color-neutral-1400);\n  padding: var(--outer-spacing) 0;\n  container-type: inline-size;\n}\n:host .header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-block-end: var(--nano-spacing-xl);\n}\n:host .headings {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--nano-spacing-xl);\n}\n:host nano-icon-button {\n  display: none;\n}\n@container (max-width: 400px) {\n  :host nano-cta {\n    display: none;\n  }\n  :host nano-icon-button {\n    --color: var(--nano-color-primary-1100);\n    display: block;\n    margin-inline-start: auto;\n    font-size: var(--nano-font-size-xl);\n    transition: 0.3s ease transform;\n  }\n  :host nano-icon-button.open {\n    transform: rotate(180deg);\n  }\n}";

const CollapsibleComparison = /*@__PURE__*/ proxyCustomElement(class CollapsibleComparison extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        this.nanoToggle = createEvent(this, "nanoToggle", 7);
    }
    get details() {
        return this.el.querySelectorAll('nano-details');
    }
    get el() { return this; }
    /**
     * 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 watchers() { return {
        "open": ["handleOpenChange"]
    }; }
    static get style() { return collapsibleComparisonCss; }
}, [257, "nano-collapsible-comparison", {
        "open": [1540],
        "showLabel": [1, "show-label"],
        "hideLabel": [1, "hide-label"]
    }, undefined, {
        "open": ["handleOpenChange"]
    }]);
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["nano-collapsible-comparison", "nano-cta", "nano-icon", "nano-icon-button", "nano-tooltip"];
    components.forEach(tagName => { switch (tagName) {
        case "nano-collapsible-comparison":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, CollapsibleComparison);
            }
            break;
        case "nano-cta":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "nano-icon":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "nano-icon-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "nano-tooltip":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
    } });
}

const NanoCollapsibleComparison = CollapsibleComparison;
const defineCustomElement = defineCustomElement$1;

export { NanoCollapsibleComparison, defineCustomElement };
