forms-reactive
Version:
Reactive Form Web Component
2 lines • 7.63 kB
JavaScript
import{r as t,h as e,H as o,e as n}from"./p-3e1171f6.js";import{r as i,j as s,k as a,g as c,t as r}from"./p-c1432a35.js";import{h as d}from"./p-6a27012a.js";import{c as h,g as l}from"./p-9c83f640.js";const f=":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){transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{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{transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}";const u=f;const p=":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){transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{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{transition:none !important}}";const m=p;const g=class{constructor(e){t(this,e);this.updateListener=()=>this.updateState(false);this.setItemDefaults=()=>{const t=this.getSlottedHeaderIonItem();if(!t){return}t.button=true;t.detail=false;if(t.lines===undefined){t.lines="full"}};this.getSlottedHeaderIonItem=()=>{const{headerEl:t}=this;if(!t){return}const e=t.querySelector("slot");if(!e){return}if(e.assignedElements===undefined)return;return e.assignedElements().find((t=>t.tagName==="ION-ITEM"))};this.setAria=(t=false)=>{const e=this.getSlottedHeaderIonItem();if(!e){return}const o=c(e);const n=o.querySelector("button");if(!n){return}n.setAttribute("aria-expanded",`${t}`)};this.slotToggleIcon=()=>{const t=this.getSlottedHeaderIonItem();if(!t){return}const{toggleIconSlot:e,toggleIcon:o}=this;const n=t.querySelector(".ion-accordion-toggle-icon");if(n){return}const i=document.createElement("ion-icon");i.slot=e;i.lazy=false;i.classList.add("ion-accordion-toggle-icon");i.icon=o;i.setAttribute("aria-hidden","true");t.appendChild(i)};this.expandAccordion=(t=false)=>{const{contentEl:e,contentElWrapper:o}=this;if(t||e===undefined||o===undefined){this.state=4;return}if(this.state===4){return}if(this.currentRaf!==undefined){cancelAnimationFrame(this.currentRaf)}if(this.shouldAnimate()){i((()=>{this.state=8;this.currentRaf=i((async()=>{const t=o.offsetHeight;const n=r(e,2e3);e.style.setProperty("max-height",`${t}px`);await n;this.state=4;e.style.removeProperty("max-height")}))}))}else{this.state=4}};this.collapseAccordion=(t=false)=>{const{contentEl:e}=this;if(t||e===undefined){this.state=1;return}if(this.state===1){return}if(this.currentRaf!==undefined){cancelAnimationFrame(this.currentRaf)}if(this.shouldAnimate()){this.currentRaf=i((async()=>{const t=e.offsetHeight;e.style.setProperty("max-height",`${t}px`);i((async()=>{const t=r(e,2e3);this.state=2;await t;this.state=1;e.style.removeProperty("max-height")}))}))}else{this.state=1}};this.shouldAnimate=()=>{if(typeof window==="undefined"){return false}const t=matchMedia("(prefers-reduced-motion: reduce)").matches;if(t){return false}const e=h.get("animated",true);if(!e){return false}if(this.accordionGroupEl&&!this.accordionGroupEl.animated){return false}return true};this.updateState=async(t=false)=>{const e=this.accordionGroupEl;const o=this.value;if(!e){return}const n=e.value;const i=Array.isArray(n)?n.includes(o):n===o;if(i){this.expandAccordion(t);this.isNext=this.isPrevious=false}else{this.collapseAccordion(t);const e=this.getNextSibling();const o=e===null||e===void 0?void 0:e.value;if(o!==undefined){this.isPrevious=Array.isArray(n)?n.includes(o):n===o}const i=this.getPreviousSibling();const s=i===null||i===void 0?void 0:i.value;if(s!==undefined){this.isNext=Array.isArray(n)?n.includes(s):n===s}}};this.getNextSibling=()=>{if(!this.el){return}const t=this.el.nextElementSibling;if((t===null||t===void 0?void 0:t.tagName)!=="ION-ACCORDION"){return}return t};this.getPreviousSibling=()=>{if(!this.el){return}const t=this.el.previousElementSibling;if((t===null||t===void 0?void 0:t.tagName)!=="ION-ACCORDION"){return}return t};this.state=1;this.isNext=false;this.isPrevious=false;this.value=`ion-accordion-${b++}`;this.disabled=false;this.readonly=false;this.toggleIcon=d;this.toggleIconSlot="end"}valueChanged(){this.updateState()}connectedCallback(){var t;const e=this.accordionGroupEl=(t=this.el)===null||t===void 0?void 0:t.closest("ion-accordion-group");if(e){this.updateState(true);s(e,"ionValueChange",this.updateListener)}}disconnectedCallback(){const t=this.accordionGroupEl;if(t){a(t,"ionValueChange",this.updateListener)}}componentDidLoad(){this.setItemDefaults();this.slotToggleIcon();i((()=>{const t=this.state===4||this.state===8;this.setAria(t)}))}toggleExpanded(){const{accordionGroupEl:t,disabled:e,readonly:o,value:n,state:i}=this;if(e||o)return;if(t){const e=i===1||i===2;t.requestAccordionToggle(n,e)}}render(){const{disabled:t,readonly:n}=this;const i=l(this);const s=this.state===4||this.state===8;const a=s?"header expanded":"header";const c=s?"content expanded":"content";this.setAria(s);return e(o,{key:"073e1d02c18dcbc20c68648426e87c14750c031d",class:{[i]:true,"accordion-expanding":this.state===8,"accordion-expanded":this.state===4,"accordion-collapsing":this.state===2,"accordion-collapsed":this.state===1,"accordion-next":this.isNext,"accordion-previous":this.isPrevious,"accordion-disabled":t,"accordion-readonly":n,"accordion-animated":this.shouldAnimate()}},e("div",{key:"9b4cf326de8bb6b4033992903c0c1bfd7eea9bcc",onClick:()=>this.toggleExpanded(),id:"header",part:a,"aria-controls":"content",ref:t=>this.headerEl=t},e("slot",{key:"464c32a37f64655eacf4218284214f5f30b14a1e",name:"header"})),e("div",{key:"8bb52e6a62d7de0106b253201a89a32e79d9a594",id:"content",part:c,role:"region","aria-labelledby":"header",ref:t=>this.contentEl=t},e("div",{key:"1d9dfd952ad493754aaeea7a8f625b33c2dd90a0",id:"content-wrapper",ref:t=>this.contentElWrapper=t},e("slot",{key:"970dfbc55a612d739d0ca3b7b1a08e5c96d0c479",name:"content"}))))}static get delegatesFocus(){return true}get el(){return n(this)}static get watchers(){return{value:["valueChanged"]}}};let b=0;g.style={ios:u,md:m};export{g as ion_accordion};
//# sourceMappingURL=p-1cea6f70.entry.js.map