/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import{r as n,c as o,g as a,a as e}from"./index-BM3Om9WE.js";import{h as t}from"./renderer-DpNDfhNy.js";import{a as i}from"./style-Ds52s5za.js";const r=class{constructor(a){n(this,a),this.nanoToggle=o(this,"nanoToggle",7)}get details(){return this.el.querySelectorAll("nano-details")}get el(){return a(this)}open=!1;showLabel="Show details";hideLabel="Hide details";nanoToggle;handleOpenChange(){this.details?.forEach((n=>{n.open=!!this.open})),this.nanoToggle.emit(this.open)}handleClick=()=>{this.open=!this.open};getToggleLabel=()=>this.open?this.hideLabel:this.showLabel;componentWillLoad(){i(this.el.shadowRoot)}componentDidLoad(){this.open&&this.details?.forEach((n=>{n.open=!0}))}render(){return t(e,{key:"5cced0d90a9447ca3b8ee481478aacbeeb4d4484",class:"nano-collapsible-comparison"},t("div",{key:"ae25da89fa04b0a5c89210ba8292cf1db8190a30",class:"collapsible-comparison"},t("div",{key:"7cfd1c96cc5c1553d50193a8bec9abd260e08dfc",part:"header"},t("div",{key:"ccc5102295b9ca9404d3c358f4d9a885d45b5885",class:"header"},t("slot",{key:"7d5b2f2d074b3d6b99f126b4bec77afa1d285ea8",name:"heading"}),t("nano-cta",{key:"a10b35f5779d035d1331cdbd55c42d3007d7ce2c",size:"large",icon:this.open?"up":"down",secondary:!0},t("button",{key:"59fde8b32c34ec3df61f96c767ce44e18482a2d5",onClick:this.handleClick},this.getToggleLabel())),t("nano-icon-button",{key:"7f9174c6d81455fc4d3fcae99b684e26de44d7ec",label:this.getToggleLabel(),onClick:this.handleClick,iconName:"light/chevron-down",class:this.open?"open":""})),t("div",{key:"1f92af4c863a0a643e47e225781bb67e32efea3e",class:"headings"},t("slot",{key:"5744549ec533f0d1019138325310cdd6a6dd1d55",name:"comparison-headings"}))),t("div",{key:"fb9b8acb4315686fcabd5771989c2f2bed298895",class:"content"},t("slot",{key:"77821b17b1e3384126a1d7f7714f8779924b4b2d",name:"content"}))))}static get watchers(){return{open:["handleOpenChange"]}}};r.style=":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}";export{r as nano_collapsible_comparison}