@ionic/core/components/ion-accordion.js

Base components for Ionic

/*!
 * (C) Ionic http://ionicframework.com - MIT License
 */
import{d as t,t as i,H as o,e,h as n,f as s}from"./p-Ct2aBEue.js";import{g as a,r as c,t as d,a as r,b as h}from"./p-B4IBdPVJ.js";import{c as l}from"./p-LpMHEu3v.js";import{b as p}from"./p-HthJZjZ6.js";import{d as m}from"./p-ChkSQqfP.js";const b=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.accordionGroupUpdateHandler=()=>{const t=this.accordionGroupEl;if(t){const i=t.value,o=this.value,e=Array.isArray(i)?i.includes(o):i===o;this.hasReceivedFirstUpdate&&e!==(4===this.state||8===this.state)&&(this.hasInteracted=!0),void 0!==i&&(this.hasReceivedFirstUpdate=!0)}this.updateState()},this.state=1,this.isNext=!1,this.isPrevious=!1,this.hasInteracted=!1,this.hasEverBeenExpanded=!1,this.hasReceivedFirstUpdate=!1,this.value="ion-accordion-"+u++,this.disabled=!1,this.readonly=!1,this.toggleIcon=l,this.toggleIconSlot="end",this.setItemDefaults=()=>{const t=this.getSlottedHeaderIonItem();t&&(t.button=!0,t.detail=!1,void 0===t.lines&&(t.lines="full"))},this.getSlottedHeaderIonItem=()=>{const{headerEl:t}=this;if(!t)return;const i=t.querySelector("slot");return i&&void 0!==i.assignedElements?i.assignedElements().find((t=>"ION-ITEM"===t.tagName)):void 0},this.setAria=(t=!1)=>{const i=this.getSlottedHeaderIonItem();if(!i)return;const o=a(i).querySelector("button");o&&o.setAttribute("aria-expanded",""+t)},this.slotToggleIcon=()=>{const t=this.getSlottedHeaderIonItem();if(!t)return;const{toggleIconSlot:i,toggleIcon:o}=this;if(t.querySelector(".ion-accordion-toggle-icon"))return;const e=document.createElement("ion-icon");e.slot=i,e.lazy=!1,e.classList.add("ion-accordion-toggle-icon"),e.icon=o,e.setAttribute("aria-hidden","true"),t.appendChild(e)},this.expandAccordion=()=>{const{contentEl:t,contentElWrapper:i}=this;if(void 0===t||void 0===i)return this.state=4,void(this.hasEverBeenExpanded=!0);4!==this.state&&(void 0!==this.currentRaf&&cancelAnimationFrame(this.currentRaf),this.hasEverBeenExpanded=!0,this.shouldAnimate()?c((()=>{this.state=8,this.currentRaf=c((async()=>{const o=i.offsetHeight,e=d(t,2e3);t.style.setProperty("max-height",o+"px"),await e,this.state=4,t.style.removeProperty("max-height")}))})):this.state=4)},this.collapseAccordion=()=>{const{contentEl:t}=this;void 0!==t?1!==this.state&&(void 0!==this.currentRaf&&cancelAnimationFrame(this.currentRaf),this.shouldAnimate()?this.currentRaf=c((async()=>{t.style.setProperty("max-height",t.offsetHeight+"px"),c((async()=>{const i=d(t,2e3);this.state=2,await i,this.state=1,t.style.removeProperty("max-height")}))})):this.state=1):this.state=1},this.shouldAnimate=()=>!(!this.hasInteracted||!this.hasEverBeenExpanded)&&("undefined"!=typeof window&&(!matchMedia("(prefers-reduced-motion: reduce)").matches&&!(!e.get("animated",!0)||this.accordionGroupEl&&!this.accordionGroupEl.animated))),this.updateState=async()=>{const t=this.accordionGroupEl,i=this.value;if(!t)return;const o=t.value;if(Array.isArray(o)?o.includes(i):o===i)this.expandAccordion(),this.isNext=this.isPrevious=!1;else{this.collapseAccordion();const t=this.getNextSibling(),i=t?.value;void 0!==i&&(this.isPrevious=Array.isArray(o)?o.includes(i):o===i);const e=this.getPreviousSibling(),n=e?.value;void 0!==n&&(this.isNext=Array.isArray(o)?o.includes(n):o===n)}},this.getNextSibling=()=>{if(!this.el)return;const t=this.el.nextElementSibling;return"ION-ACCORDION"===t?.tagName?t:void 0},this.getPreviousSibling=()=>{if(!this.el)return;const t=this.el.previousElementSibling;return"ION-ACCORDION"===t?.tagName?t:void 0}}valueChanged(){this.updateState()}connectedCallback(){const t=this.accordionGroupEl=this.el?.closest("ion-accordion-group");t&&(this.updateState(),r(t,"ionValueChange",this.accordionGroupUpdateHandler))}disconnectedCallback(){const t=this.accordionGroupEl;t&&h(t,"ionValueChange",this.accordionGroupUpdateHandler)}componentDidLoad(){this.setItemDefaults(),this.slotToggleIcon(),c((()=>{this.setAria(4===this.state||8===this.state)}))}toggleExpanded(){const{accordionGroupEl:t,disabled:i,readonly:o,value:e,state:n}=this;i||o||(this.hasInteracted=!0,!t)||t.requestAccordionToggle(e,1===n||2===n)}render(){const{disabled:t,readonly:i}=this,o=p(this),e=4===this.state||8===this.state,a=e?"header expanded":"header",c=e?"content expanded":"content";return this.setAria(e),n(s,{key:"5c58b3809a4636d69f0f9957ecf1f50c42cdfc03",class:{[o]:!0,"accordion-expanding":8===this.state,"accordion-expanded":4===this.state,"accordion-collapsing":2===this.state,"accordion-collapsed":1===this.state,"accordion-next":this.isNext,"accordion-previous":this.isPrevious,"accordion-disabled":t,"accordion-readonly":i,"accordion-animated":this.shouldAnimate()},tabindex:t?"-1":void 0},n("div",{key:"f76bc02347639b41c9a5be8a9488a8be8559cba7",onClick:()=>this.toggleExpanded(),id:"header",part:a,"aria-controls":"content",ref:t=>this.headerEl=t},n("slot",{key:"e01744bf0af3200239e82c60c632ed36295db2da",name:"header"})),n("div",{key:"c613345a7e244ee361f76ff4ebed139d2a1b9572",id:"content",part:c,role:"region","aria-labelledby":"header",ref:t=>this.contentEl=t},n("div",{key:"943b65d9a129759b4c213974ae5ed777b5f6166e",id:"content-wrapper",ref:t=>this.contentElWrapper=t},n("slot",{key:"b0df520dad9d5557df63a35f8206ada4a765d238",name:"content"}))))}static get delegatesFocus(){return!0}get el(){return this}static get watchers(){return{value:[{valueChanged:0}]}}static get style(){return{ios:":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}",md:":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}"}}},[305,"ion-accordion",{value:[1],disabled:[4],readonly:[4],toggleIcon:[1,"toggle-icon"],toggleIconSlot:[1,"toggle-icon-slot"],state:[32],isNext:[32],isPrevious:[32],hasInteracted:[32]},void 0,{value:[{valueChanged:0}]}]);let u=0;const f=b,g=function(){"undefined"!=typeof customElements&&["ion-accordion","ion-icon"].forEach((t=>{switch(t){case"ion-accordion":customElements.get(i(t))||customElements.define(i(t),b);break;case"ion-icon":customElements.get(i(t))||m()}}))};export{f as IonAccordion,g as defineCustomElement}