UNPKG

@ionic/core

Version:

Base components for Ionic

ionicframework.com

ionic-team/ionic-framework

4 lines • 15.6 kB
1
2
3
4
import{__awaiter,__generator,__spreadArray}from"tslib"; /*! * (C) Ionic http://ionicframework.com - MIT License */import{r as registerInstance,h,e as Host,f as getElement,c as createEvent}from"./index-527b9e34.js";import{r as raf,t as transitionEndAsync,a as addEventListener,b as removeEventListener,g as getElementRoot}from"./helpers-78efeec3.js";import{l as chevronDown}from"./index-e2cf2ceb.js";import{c as config,b as getIonMode}from"./ionic-global-ca86cf32.js";import{p as printIonWarning}from"./index-738d7504.js";var accordionIosCss=":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}";var IonAccordionIosStyle0=accordionIosCss;var accordionMdCss=":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}}";var IonAccordionMdStyle0=accordionMdCss;var Accordion=function(){function n(n){var e=this;registerInstance(this,n);this.updateListener=function(){return e.updateState(false)};this.setItemDefaults=function(){var n=e.getSlottedHeaderIonItem();if(!n){return}n.button=true;n.detail=false;if(n.lines===undefined){n.lines="full"}};this.getSlottedHeaderIonItem=function(){var n=e.headerEl;if(!n){return}var t=n.querySelector("slot");if(!t){return}if(t.assignedElements===undefined)return;return t.assignedElements().find((function(n){return n.tagName==="ION-ITEM"}))};this.setAria=function(n){if(n===void 0){n=false}var t=e.getSlottedHeaderIonItem();if(!t){return}var i=getElementRoot(t);var r=i.querySelector("button");if(!r){return}r.setAttribute("aria-expanded","".concat(n))};this.slotToggleIcon=function(){var n=e.getSlottedHeaderIonItem();if(!n){return}var t=e,i=t.toggleIconSlot,r=t.toggleIcon;var o=n.querySelector(".ion-accordion-toggle-icon");if(o){return}var a=document.createElement("ion-icon");a.slot=i;a.lazy=false;a.classList.add("ion-accordion-toggle-icon");a.icon=r;a.setAttribute("aria-hidden","true");n.appendChild(a)};this.expandAccordion=function(n){if(n===void 0){n=false}var t=e,i=t.contentEl,r=t.contentElWrapper;if(n||i===undefined||r===undefined){e.state=4;return}if(e.state===4){return}if(e.currentRaf!==undefined){cancelAnimationFrame(e.currentRaf)}if(e.shouldAnimate()){raf((function(){e.state=8;e.currentRaf=raf((function(){return __awaiter(e,void 0,void 0,(function(){var n,e;return __generator(this,(function(t){switch(t.label){case 0:n=r.offsetHeight;e=transitionEndAsync(i,2e3);i.style.setProperty("max-height","".concat(n,"px"));return[4,e];case 1:t.sent();this.state=4;i.style.removeProperty("max-height");return[2]}}))}))}))}))}else{e.state=4}};this.collapseAccordion=function(n){if(n===void 0){n=false}var t=e.contentEl;if(n||t===undefined){e.state=1;return}if(e.state===1){return}if(e.currentRaf!==undefined){cancelAnimationFrame(e.currentRaf)}if(e.shouldAnimate()){e.currentRaf=raf((function(){return __awaiter(e,void 0,void 0,(function(){var n;var e=this;return __generator(this,(function(i){n=t.offsetHeight;t.style.setProperty("max-height","".concat(n,"px"));raf((function(){return __awaiter(e,void 0,void 0,(function(){var n;return __generator(this,(function(e){switch(e.label){case 0:n=transitionEndAsync(t,2e3);this.state=2;return[4,n];case 1:e.sent();this.state=1;t.style.removeProperty("max-height");return[2]}}))}))}));return[2]}))}))}))}else{e.state=1}};this.shouldAnimate=function(){if(typeof window==="undefined"){return false}var n=matchMedia("(prefers-reduced-motion: reduce)").matches;if(n){return false}var t=config.get("animated",true);if(!t){return false}if(e.accordionGroupEl&&!e.accordionGroupEl.animated){return false}return true};this.updateState=function(){var n=[];for(var t=0;t<arguments.length;t++){n[t]=arguments[t]}return __awaiter(e,__spreadArray([],n,true),void 0,(function(n){var e,t,i,r,o,a,s,c;if(n===void 0){n=false}return __generator(this,(function(d){e=this.accordionGroupEl;t=this.value;if(!e){return[2]}i=e.value;r=Array.isArray(i)?i.includes(t):i===t;if(r){this.expandAccordion(n);this.isNext=this.isPrevious=false}else{this.collapseAccordion(n);o=this.getNextSibling();a=o===null||o===void 0?void 0:o.value;if(a!==undefined){this.isPrevious=Array.isArray(i)?i.includes(a):i===a}s=this.getPreviousSibling();c=s===null||s===void 0?void 0:s.value;if(c!==undefined){this.isNext=Array.isArray(i)?i.includes(c):i===c}}return[2]}))}))};this.getNextSibling=function(){if(!e.el){return}var n=e.el.nextElementSibling;if((n===null||n===void 0?void 0:n.tagName)!=="ION-ACCORDION"){return}return n};this.getPreviousSibling=function(){if(!e.el){return}var n=e.el.previousElementSibling;if((n===null||n===void 0?void 0:n.tagName)!=="ION-ACCORDION"){return}return n};this.state=1;this.isNext=false;this.isPrevious=false;this.value="ion-accordion-".concat(accordionIds++);this.disabled=false;this.readonly=false;this.toggleIcon=chevronDown;this.toggleIconSlot="end"}n.prototype.valueChanged=function(){this.updateState()};n.prototype.connectedCallback=function(){var n;var e=this.accordionGroupEl=(n=this.el)===null||n===void 0?void 0:n.closest("ion-accordion-group");if(e){this.updateState(true);addEventListener(e,"ionValueChange",this.updateListener)}};n.prototype.disconnectedCallback=function(){var n=this.accordionGroupEl;if(n){removeEventListener(n,"ionValueChange",this.updateListener)}};n.prototype.componentDidLoad=function(){var n=this;this.setItemDefaults();this.slotToggleIcon();raf((function(){var e=n.state===4||n.state===8;n.setAria(e)}))};n.prototype.toggleExpanded=function(){var n=this,e=n.accordionGroupEl,t=n.disabled,i=n.readonly,r=n.value,o=n.state;if(t||i)return;if(e){var a=o===1||o===2;e.requestAccordionToggle(r,a)}};n.prototype.render=function(){var n;var e=this;var t=this,i=t.disabled,r=t.readonly;var o=getIonMode(this);var a=this.state===4||this.state===8;var s=a?"header expanded":"header";var c=a?"content expanded":"content";this.setAria(a);return h(Host,{key:"073e1d02c18dcbc20c68648426e87c14750c031d",class:(n={},n[o]=true,n["accordion-expanding"]=this.state===8,n["accordion-expanded"]=this.state===4,n["accordion-collapsing"]=this.state===2,n["accordion-collapsed"]=this.state===1,n["accordion-next"]=this.isNext,n["accordion-previous"]=this.isPrevious,n["accordion-disabled"]=i,n["accordion-readonly"]=r,n["accordion-animated"]=this.shouldAnimate(),n)},h("div",{key:"9b4cf326de8bb6b4033992903c0c1bfd7eea9bcc",onClick:function(){return e.toggleExpanded()},id:"header",part:s,"aria-controls":"content",ref:function(n){return e.headerEl=n}},h("slot",{key:"464c32a37f64655eacf4218284214f5f30b14a1e",name:"header"})),h("div",{key:"8bb52e6a62d7de0106b253201a89a32e79d9a594",id:"content",part:c,role:"region","aria-labelledby":"header",ref:function(n){return e.contentEl=n}},h("div",{key:"1d9dfd952ad493754aaeea7a8f625b33c2dd90a0",id:"content-wrapper",ref:function(n){return e.contentElWrapper=n}},h("slot",{key:"970dfbc55a612d739d0ca3b7b1a08e5c96d0c479",name:"content"}))))};Object.defineProperty(n,"delegatesFocus",{get:function(){return true},enumerable:false,configurable:true});Object.defineProperty(n.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"]}},enumerable:false,configurable:true});return n}();var accordionIds=0;Accordion.style={ios:IonAccordionIosStyle0,md:IonAccordionMdStyle0};var accordionGroupIosCss=":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){border-bottom:none}";var IonAccordionGroupIosStyle0=accordionGroupIosCss;var accordionGroupMdCss=":host{display:block}:host(.accordion-group-expand-inset){-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px;margin-top:16px;margin-bottom:16px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion){-webkit-box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);box-shadow:0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12)}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){margin-left:0;margin-right:0;margin-top:16px;margin-bottom:16px;border-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-previous){border-end-end-radius:6px;border-end-start-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next){border-start-start-radius:6px;border-start-end-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion):first-of-type{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";var IonAccordionGroupMdStyle0=accordionGroupMdCss;var AccordionGroup=function(){function n(n){registerInstance(this,n);this.ionChange=createEvent(this,"ionChange",7);this.ionValueChange=createEvent(this,"ionValueChange",7);this.animated=true;this.multiple=undefined;this.value=undefined;this.disabled=false;this.readonly=false;this.expand="compact"}n.prototype.valueChanged=function(){var n=this,e=n.value,t=n.multiple;if(!t&&Array.isArray(e)){printIonWarning('ion-accordion-group was passed an array of values, but multiple="false". This is incorrect usage and may result in unexpected behaviors. To dismiss this warning, pass a string to the "value" property when multiple="false".\n\n Value Passed: ['.concat(e.map((function(n){return"'".concat(n,"'")})).join(", "),"]\n"),this.el)}this.ionValueChange.emit({value:this.value})};n.prototype.disabledChanged=function(){return __awaiter(this,void 0,void 0,(function(){var n,e,t,i,r;return __generator(this,(function(o){switch(o.label){case 0:n=this.disabled;return[4,this.getAccordions()];case 1:e=o.sent();for(t=0,i=e;t<i.length;t++){r=i[t];r.disabled=n}return[2]}}))}))};n.prototype.readonlyChanged=function(){return __awaiter(this,void 0,void 0,(function(){var n,e,t,i,r;return __generator(this,(function(o){switch(o.label){case 0:n=this.readonly;return[4,this.getAccordions()];case 1:e=o.sent();for(t=0,i=e;t<i.length;t++){r=i[t];r.readonly=n}return[2]}}))}))};n.prototype.onKeydown=function(n){return __awaiter(this,void 0,void 0,(function(){var e,t,i,r,o,a,s;return __generator(this,(function(c){switch(c.label){case 0:e=document.activeElement;if(!e){return[2]}t=e.closest('ion-accordion [slot="header"]');if(!t){return[2]}i=e.tagName==="ION-ACCORDION"?e:e.closest("ion-accordion");if(!i){return[2]}r=i.closest("ion-accordion-group");if(r!==this.el){return[2]}return[4,this.getAccordions()];case 1:o=c.sent();a=o.findIndex((function(n){return n===i}));if(a===-1){return[2]}if(n.key==="ArrowDown"){s=this.findNextAccordion(o,a)}else if(n.key==="ArrowUp"){s=this.findPreviousAccordion(o,a)}else if(n.key==="Home"){s=o[0]}else if(n.key==="End"){s=o[o.length-1]}if(s!==undefined&&s!==e){s.focus()}return[2]}}))}))};n.prototype.componentDidLoad=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){if(this.disabled){this.disabledChanged()}if(this.readonly){this.readonlyChanged()}this.valueChanged();return[2]}))}))};n.prototype.setValue=function(n){var e=this.value=n;this.ionChange.emit({value:e})};n.prototype.requestAccordionToggle=function(n,e){return __awaiter(this,void 0,void 0,(function(){var t,i,r,o,a,s,c,d,s,c;return __generator(this,(function(u){t=this,i=t.multiple,r=t.value,o=t.readonly,a=t.disabled;if(o||a){return[2]}if(e){if(i){s=r!==null&&r!==void 0?r:[];c=Array.isArray(s)?s:[s];d=c.find((function(e){return e===n}));if(d===undefined&&n!==undefined){this.setValue(__spreadArray(__spreadArray([],c,true),[n],false))}}else{this.setValue(n)}}else{if(i){s=r!==null&&r!==void 0?r:[];c=Array.isArray(s)?s:[s];this.setValue(c.filter((function(e){return e!==n})))}else{this.setValue(undefined)}}return[2]}))}))};n.prototype.findNextAccordion=function(n,e){var t=n[e+1];if(t===undefined){return n[0]}return t};n.prototype.findPreviousAccordion=function(n,e){var t=n[e-1];if(t===undefined){return n[n.length-1]}return t};n.prototype.getAccordions=function(){return __awaiter(this,void 0,void 0,(function(){return __generator(this,(function(n){return[2,Array.from(this.el.querySelectorAll(":scope > ion-accordion"))]}))}))};n.prototype.render=function(){var n;var e=this,t=e.disabled,i=e.readonly,r=e.expand;var o=getIonMode(this);return h(Host,{key:"82f3e77066fabb4736638ee4c487ad56efd39c63",class:(n={},n[o]=true,n["accordion-group-disabled"]=t,n["accordion-group-readonly"]=i,n["accordion-group-expand-".concat(r)]=true,n),role:"presentation"},h("slot",{key:"a3c791ea887fc640b512f81d429be465ae902b3d"}))};Object.defineProperty(n.prototype,"el",{get:function(){return getElement(this)},enumerable:false,configurable:true});Object.defineProperty(n,"watchers",{get:function(){return{value:["valueChanged"],disabled:["disabledChanged"],readonly:["readonlyChanged"]}},enumerable:false,configurable:true});return n}();AccordionGroup.style={ios:IonAccordionGroupIosStyle0,md:IonAccordionGroupMdStyle0};export{Accordion as ion_accordion,AccordionGroup as ion_accordion_group};