{"version":3,"names":["scTogglesCss","ScTogglesStyle0","ScToggles","getToggles","slotted","this","el","shadowRoot","querySelector","_c","_b","_a","assignedNodes","call","filter","node","nodeName","handleShowChange","e","target","tagName","accordion","map","details","open","handleCollapibleChange","collapsible","componentDidLoad","toggles","length","some","toggle","render","Tag","theme","h","key","class","part"],"sources":["src/components/ui/sc-toggles/sc-toggles.scss?tag=sc-toggles&encapsulation=shadow","src/components/ui/sc-toggles/sc-toggles.tsx"],"sourcesContent":[":host {\n  display: block;\n  --toggle-spacing: 0;\n}\n\n::slotted(*) {\n  margin-bottom: var(--toggle-spacing);\n}\n::slotted(:not(:first-child):not([style*=\"display: none\"])) {\n  border-top: 1px solid var(--sc-input-border-color);\n}\n","import { Component, Element, h, Listen, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'sc-toggles',\n  styleUrl: 'sc-toggles.scss',\n  shadow: true,\n})\nexport class ScToggles {\n  /** The element */\n  @Element() el: HTMLScTogglesElement;\n\n  /** Should this function as an accordion? */\n  @Prop() accordion: boolean = false;\n\n  /** Are these collapsible? */\n  @Prop() collapsible: boolean = true;\n\n  /** Theme for the toggles */\n  @Prop() theme: 'default' | 'container' = 'default';\n\n  getToggles() {\n    let slotted = this.el.shadowRoot.querySelector('slot') as HTMLSlotElement;\n    if (!slotted) return;\n    return (slotted?.assignedNodes?.()?.filter?.(node => node.nodeName === 'SC-TOGGLE') as HTMLScToggleElement[]) || [];\n  }\n\n  @Listen('scShow')\n  handleShowChange(e) {\n    if (e.target.tagName !== 'SC-TOGGLE') return;\n    if (this.accordion) {\n      this.getToggles().map(details => (details.open = e.target === details));\n    }\n  }\n\n  @Watch('collapsible')\n  handleCollapibleChange() {\n    this.getToggles().map(details => (details.collapsible = this.collapsible));\n  }\n\n  componentDidLoad() {\n    this.handleCollapibleChange();\n    const toggles = this.getToggles();\n    if (toggles?.length && !toggles.some(toggle => toggle.open)) {\n      toggles[0].open = true;\n    }\n  }\n\n  render() {\n    const Tag = 'container' === this.theme ? 'sc-card' : 'div';\n    return (\n      <Tag class={{ toggles: true, [`toggles--theme-${this.theme}`]: true }} part=\"base\" no-padding>\n        <slot></slot>\n      </Tag>\n    );\n  }\n}\n"],"mappings":"kDAAA,MAAMA,EAAe,yMACrB,MAAAC,EAAeD,E,MCMFE,EAAS,M,wCAKS,M,iBAGE,K,WAGU,S,CAEzC,UAAAC,G,UACE,IAAIC,EAAUC,KAAKC,GAAGC,WAAWC,cAAc,QAC/C,IAAKJ,EAAS,OACd,QAAQK,GAAAC,GAAAC,EAAAP,IAAO,MAAPA,SAAO,SAAPA,EAASQ,iBAAa,MAAAD,SAAA,SAAAA,EAAAE,KAAAT,MAAI,MAAAM,SAAA,SAAAA,EAAEI,UAAM,MAAAL,SAAA,SAAAA,EAAAI,KAAAH,GAAGK,GAAQA,EAAKC,WAAa,gBAA0C,E,CAInH,gBAAAC,CAAiBC,GACf,GAAIA,EAAEC,OAAOC,UAAY,YAAa,OACtC,GAAIf,KAAKgB,UAAW,CAClBhB,KAAKF,aAAamB,KAAIC,GAAYA,EAAQC,KAAON,EAAEC,SAAWI,G,EAKlE,sBAAAE,GACEpB,KAAKF,aAAamB,KAAIC,GAAYA,EAAQG,YAAcrB,KAAKqB,a,CAG/D,gBAAAC,GACEtB,KAAKoB,yBACL,MAAMG,EAAUvB,KAAKF,aACrB,IAAIyB,IAAO,MAAPA,SAAO,SAAPA,EAASC,UAAWD,EAAQE,MAAKC,GAAUA,EAAOP,OAAO,CAC3DI,EAAQ,GAAGJ,KAAO,I,EAItB,MAAAQ,GACE,MAAMC,EAAM,cAAgB5B,KAAK6B,MAAQ,UAAY,MACrD,OACEC,EAACF,EAAG,CAAAG,IAAA,2CAACC,MAAO,CAAET,QAAS,KAAM,CAAC,kBAAkBvB,KAAK6B,SAAU,MAAQI,KAAK,OAAM,mBAChFH,EAAA,QAAAC,IAAA,6C","ignoreList":[]}