@ionic/core 8.7.8-dev.11761677762.1e345efd → 8.7.8-dev.11761831339.1f84c484

package/hydrate/index.mjs

@@ -4045,17 +4045,16 @@ class Accordion {
             const initialUpdate = (_b = (_a = ev.detail) === null || _a === void 0 ? void 0 : _a.initial) !== null && _b !== void 0 ? _b : false;
             this.updateState(initialUpdate);
         };
-        /**
-         * If true, the next animation will be skipped.
-         * We want to skip the animation when the accordion
-         * is expanded or collapsed on the initial load.
-         * This prevents the accordion from animating when
-         * it starts expanded or collapsed.
-         */
-        this.skipNextAnimation = true;
         this.state = 1 /* AccordionState.Collapsed */;
         this.isNext = false;
         this.isPrevious = false;
+        /**
+         * Tracks whether the component has completed its initial render.
+         * Animations are disabled until after the first render completes.
+         * This prevents the accordion from animating when it starts
+         * expanded or collapsed on initial load.
+         */
+        this.hasRendered = false;
         /**
          * The value of the accordion. Defaults to an autogenerated
          * value.
@@ -4226,7 +4225,12 @@ class Accordion {
          * of what is set in the config.
          */
         this.shouldAnimate = () => {
-            if (this.skipNextAnimation) {
+            /**
+             * Don't animate until after the first render cycle completes.
+             * This prevents animations on initial load when accordions
+             * start in an expanded or collapsed state.
+             */
+            if (!this.hasRendered) {
                 return false;
             }
             if (typeof window === 'undefined') {
@@ -4253,10 +4257,6 @@ class Accordion {
             }
             const value = accordionGroup.value;
             const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
-            const shouldDisableAnimation = initialUpdate && shouldExpand;
-            if (shouldDisableAnimation) {
-                this.skipNextAnimation = true;
-            }
             if (shouldExpand) {
                 this.expandAccordion(initialUpdate);
                 this.isNext = this.isPrevious = false;
@@ -4338,8 +4338,14 @@ class Accordion {
         });
     }
     componentDidRender() {
-        if (this.skipNextAnimation) {
-            this.skipNextAnimation = false;
+        /**
+         * After the first render completes, mark that we've rendered.
+         * Setting this state property triggers a re-render, at which point
+         * animations will be enabled. This ensures animations are disabled
+         * only for the initial render, avoiding unwanted animations on load.
+         */
+        if (!this.hasRendered) {
+            this.hasRendered = true;
         }
     }
     toggleExpanded() {
@@ -4366,7 +4372,7 @@ class Accordion {
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
         this.setAria(expanded);
-        return (hAsync(Host, { key: 'd8425e5c758533712eddf4b13a42aa72022b0dc0', class: {
+        return (hAsync(Host, { key: '7a1b3d2826dd701dc9f440c856dc41b95e518796', class: {
                 [mode]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
@@ -4377,7 +4383,7 @@ class Accordion {
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
-            } }, hAsync("div", { key: '1a7f7e95bb3bd7f9c81c753223763d304b630fe7', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, hAsync("slot", { key: 'c4c516d60111489346ab002f7c51bd54c89509bc', name: "header" })), hAsync("div", { key: 'beff73b33eb5a5adae60efae4945c98d423243af', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, hAsync("div", { key: '15046373eb2411d0536555f697e0d6672d7993f0', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, hAsync("slot", { key: 'fb0325497ee7bf4e4f581bb891b1e79886c21efb', name: "content" })))));
+            } }, hAsync("div", { key: '6d88ed234058d21af9c490780753ce4879e20ff0', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, hAsync("slot", { key: 'c9dbd253cf4cee7d4b68c289a2b4c728307d7fad', name: "header" })), hAsync("div", { key: 'ab8352f1376f9b4d81580d6ad56954021252c0e6', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, hAsync("div", { key: 'f4050ed3256ecd9ad4dc8e2fee2dc41618b94140', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, hAsync("slot", { key: '96bfcd6b48a8339e41b73af1c087aa00c6dcc20d', name: "content" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -4399,7 +4405,8 @@ class Accordion {
             "toggleIconSlot": [1, "toggle-icon-slot"],
             "state": [32],
             "isNext": [32],
-            "isPrevious": [32]
+            "isPrevious": [32],
+            "hasRendered": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.7.8-dev.11761677762.1e345efd",
+  "version": "8.7.8-dev.11761831339.1f84c484",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

package/dist/ionic/p-4b9e6867.entry.js

@@ -1,4 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-import{r as o,e as t,i,h as n,d as e,g as a,c as s,f as r}from"./p-C8IsBmNU.js";import{g as d,r as c,f as h,m as l,t as p}from"./p-CTfR9YZG.js";import{l as u}from"./p-DV3sJJW8.js";import{b as g}from"./p-BFvmZNyx.js";const x=class{constructor(i){o(this,i),this.updateListener=o=>{var t,i;const n=null!==(i=null===(t=o.detail)||void 0===t?void 0:t.initial)&&void 0!==i&&i;this.updateState(n)},this.skipNextAnimation=!0,this.state=1,this.isNext=!1,this.isPrevious=!1,this.value="ion-accordion-"+b++,this.disabled=!1,this.readonly=!1,this.toggleIcon=u,this.toggleIconSlot="end",this.setItemDefaults=()=>{const o=this.getSlottedHeaderIonItem();o&&(o.button=!0,o.detail=!1,void 0===o.lines&&(o.lines="full"))},this.getSlottedHeaderIonItem=()=>{const{headerEl:o}=this;if(!o)return;const t=o.querySelector("slot");return t&&void 0!==t.assignedElements?t.assignedElements().find((o=>"ION-ITEM"===o.tagName)):void 0},this.setAria=(o=!1)=>{const t=this.getSlottedHeaderIonItem();if(!t)return;const i=d(t).querySelector("button");i&&i.setAttribute("aria-expanded",`${o}`)},this.slotToggleIcon=()=>{const o=this.getSlottedHeaderIonItem();if(!o)return;const{toggleIconSlot:t,toggleIcon:i}=this;if(o.querySelector(".ion-accordion-toggle-icon"))return;const n=document.createElement("ion-icon");n.slot=t,n.lazy=!1,n.classList.add("ion-accordion-toggle-icon"),n.icon=i,n.setAttribute("aria-hidden","true"),o.appendChild(n)},this.expandAccordion=(o=!1)=>{const{contentEl:t,contentElWrapper:i}=this;o||void 0===t||void 0===i?this.state=4:4!==this.state&&(void 0!==this.currentRaf&&cancelAnimationFrame(this.currentRaf),this.shouldAnimate()?c((()=>{this.state=8,this.currentRaf=c((async()=>{const o=i.offsetHeight,n=p(t,2e3);t.style.setProperty("max-height",`${o}px`),await n,this.state=4,t.style.removeProperty("max-height")}))})):this.state=4)},this.collapseAccordion=(o=!1)=>{const{contentEl:t}=this;o||void 0===t?this.state=1: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 o=p(t,2e3);this.state=2,await o,this.state=1,t.style.removeProperty("max-height")}))})):this.state=1)},this.shouldAnimate=()=>!this.skipNextAnimation&&("undefined"!=typeof window&&(!matchMedia("(prefers-reduced-motion: reduce)").matches&&!(!t.get("animated",!0)||this.accordionGroupEl&&!this.accordionGroupEl.animated))),this.updateState=async(o=!1)=>{const t=this.accordionGroupEl,i=this.value;if(!t)return;const n=t.value,e=Array.isArray(n)?n.includes(i):n===i;if(o&&e&&(this.skipNextAnimation=!0),e)this.expandAccordion(o),this.isNext=this.isPrevious=!1;else{this.collapseAccordion(o);const t=this.getNextSibling(),i=null==t?void 0:t.value;void 0!==i&&(this.isPrevious=Array.isArray(n)?n.includes(i):n===i);const e=this.getPreviousSibling(),a=null==e?void 0:e.value;void 0!==a&&(this.isNext=Array.isArray(n)?n.includes(a):n===a)}},this.getNextSibling=()=>{if(!this.el)return;const o=this.el.nextElementSibling;return"ION-ACCORDION"===(null==o?void 0:o.tagName)?o:void 0},this.getPreviousSibling=()=>{if(!this.el)return;const o=this.el.previousElementSibling;return"ION-ACCORDION"===(null==o?void 0:o.tagName)?o:void 0}}valueChanged(){this.updateState()}connectedCallback(){var o;const t=this.accordionGroupEl=null===(o=this.el)||void 0===o?void 0:o.closest("ion-accordion-group");t&&(this.updateState(!0),h(t,"ionValueChange",this.updateListener))}disconnectedCallback(){const o=this.accordionGroupEl;o&&l(o,"ionValueChange",this.updateListener)}componentDidLoad(){this.setItemDefaults(),this.slotToggleIcon(),c((()=>{this.setAria(4===this.state||8===this.state)}))}componentDidRender(){this.skipNextAnimation&&(this.skipNextAnimation=!1,i(this))}toggleExpanded(){const{accordionGroupEl:o,disabled:t,readonly:i,value:n,state:e}=this;t||i||!o||o.requestAccordionToggle(n,1===e||2===e)}render(){const{disabled:o,readonly:t}=this,i=g(this),a=4===this.state||8===this.state,s=a?"header expanded":"header",r=a?"content expanded":"content";return this.setAria(a),n(e,{key:"d8425e5c758533712eddf4b13a42aa72022b0dc0",class:{[i]:!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":o,"accordion-readonly":t,"accordion-animated":this.shouldAnimate()}},n("div",{key:"1a7f7e95bb3bd7f9c81c753223763d304b630fe7",onClick:()=>this.toggleExpanded(),id:"header",part:s,"aria-controls":"content",ref:o=>this.headerEl=o},n("slot",{key:"c4c516d60111489346ab002f7c51bd54c89509bc",name:"header"})),n("div",{key:"beff73b33eb5a5adae60efae4945c98d423243af",id:"content",part:r,role:"region","aria-labelledby":"header",ref:o=>this.contentEl=o},n("div",{key:"15046373eb2411d0536555f697e0d6672d7993f0",id:"content-wrapper",ref:o=>this.contentElWrapper=o},n("slot",{key:"fb0325497ee7bf4e4f581bb891b1e79886c21efb",name:"content"}))))}static get delegatesFocus(){return!0}get el(){return a(this)}static get watchers(){return{value:["valueChanged"]}}};let b=0;x.style={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}}"};const m=class{constructor(t){o(this,t),this.ionChange=s(this,"ionChange",7),this.ionValueChange=s(this,"ionValueChange",7),this.animated=!0,this.disabled=!1,this.readonly=!1,this.expand="compact",this.hasEmittedInitialValue=!1,this.isUserInitiatedChange=!1}valueChanged(){this.emitValueChange(!1,this.isUserInitiatedChange),this.isUserInitiatedChange=!1}async disabledChanged(){const{disabled:o}=this,t=await this.getAccordions();for(const i of t)i.disabled=o}async readonlyChanged(){const{readonly:o}=this,t=await this.getAccordions();for(const i of t)i.readonly=o}async onKeydown(o){const t=document.activeElement;if(!t)return;if(!t.closest('ion-accordion [slot="header"]'))return;const i="ION-ACCORDION"===t.tagName?t:t.closest("ion-accordion");if(!i)return;if(i.closest("ion-accordion-group")!==this.el)return;const n=await this.getAccordions(),e=n.findIndex((o=>o===i));if(-1===e)return;let a;"ArrowDown"===o.key?a=this.findNextAccordion(n,e):"ArrowUp"===o.key?a=this.findPreviousAccordion(n,e):"Home"===o.key?a=n[0]:"End"===o.key&&(a=n[n.length-1]),void 0!==a&&a!==t&&a.focus()}async componentDidLoad(){this.disabled&&this.disabledChanged(),this.readonly&&this.readonlyChanged(),this.hasEmittedInitialValue||this.emitValueChange(!0)}setValue(o){this.isUserInitiatedChange=!0;const t=this.value=o;this.ionChange.emit({value:t})}async requestAccordionToggle(o,t){const{multiple:i,value:n,readonly:e,disabled:a}=this;if(!e&&!a)if(t)if(i){const t=null!=n?n:[],i=Array.isArray(t)?t:[t];void 0===i.find((t=>t===o))&&void 0!==o&&this.setValue([...i,o])}else this.setValue(o);else if(i){const t=null!=n?n:[],i=Array.isArray(t)?t:[t];this.setValue(i.filter((t=>t!==o)))}else this.setValue(void 0)}findNextAccordion(o,t){const i=o[t+1];return void 0===i?o[0]:i}findPreviousAccordion(o,t){const i=o[t-1];return void 0===i?o[o.length-1]:i}async getAccordions(){return Array.from(this.el.querySelectorAll(":scope > ion-accordion"))}emitValueChange(o,t=!1){const{value:i,multiple:n}=this;!n&&Array.isArray(i)&&r(`[ion-accordion-group] - An array of values was passed, but multiple is "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: [${i.map((o=>`'${o}'`)).join(", ")}]\n`,this.el),this.ionValueChange.emit({value:i,initial:o||!this.hasEmittedInitialValue&&void 0!==i&&!t}),void 0!==i&&(this.hasEmittedInitialValue=!0)}render(){const{disabled:o,readonly:t,expand:i}=this,a=g(this);return n(e,{key:"fd64cd203e2c8acdfc266005f372e26c29853847",class:{[a]:!0,"accordion-group-disabled":o,"accordion-group-readonly":t,[`accordion-group-expand-${i}`]:!0},role:"presentation"},n("slot",{key:"bdd9f419fc6e20f5de6f0f52ac93af7ec9a380ef"}))}get el(){return a(this)}static get watchers(){return{value:["valueChanged"],disabled:["disabledChanged"],readonly:["readonlyChanged"]}}};m.style={ios:":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}",md:":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}"};export{x as ion_accordion,m as ion_accordion_group}