@amwaljs/checkout-button 0.3.0 → 0.3.1

package/dist/esm/ion-accordion.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as config, h, H as Host, g as getElement } from './index-xxOnfNPU.js';
-import { g as getElementRoot, r as raf, b as addEventListener, d as removeEventListener, t as transitionEndAsync } from './helpers-BuFc0hrS.js';
-import { b as chevronDown } from './index-BmlsNFZH.js';
-import { g as getIonMode } from './ionic-global-BbOE2Sur.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-93OyAGoo.js';
+import { g as getElementRoot, d as raf, a as addEventListener, r as removeEventListener, t as transitionEndAsync } from './helpers-C6kqtbmV.js';
+import { b as chevronDown } from './index-C75BfBAE.js';
+import { c as config, g as getIonMode } from './ionic-global-DXXzPLPc.js';
 
 const 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){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}`;
 
@@ -10,82 +10,7 @@ const accordionMdCss = () => `:host{display:block;position:relative;width:100%;b
 const Accordion = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.accordionGroupUpdateHandler = () => {
-            /**
-             * Determine if this update will cause an actual state change.
-             * We only want to mark as "interacted" if the state is changing.
-             */
-            const accordionGroup = this.accordionGroupEl;
-            if (accordionGroup) {
-                const value = accordionGroup.value;
-                const accordionValue = this.value;
-                const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
-                const isExpanded = this.state === 4 /* AccordionState.Expanded */ || this.state === 8 /* AccordionState.Expanding */;
-                const stateWillChange = shouldExpand !== isExpanded;
-                /**
-                 * Only mark as interacted if:
-                 * 1. This is not the first update we've received with a defined value
-                 * 2. The state is actually changing (prevents redundant updates from enabling animations)
-                 */
-                if (this.hasReceivedFirstUpdate && stateWillChange) {
-                    this.hasInteracted = true;
-                }
-                /**
-                 * Only count this as the first update if the group value is defined.
-                 * This prevents the initial undefined value from the group's componentDidLoad
-                 * from being treated as the first real update.
-                 */
-                if (value !== undefined) {
-                    this.hasReceivedFirstUpdate = true;
-                }
-            }
-            this.updateState();
-        };
-        this.state = 1 /* AccordionState.Collapsed */;
-        this.isNext = false;
-        this.isPrevious = false;
-        /**
-         * Tracks whether a user-initiated interaction has occurred.
-         * Animations are disabled until the first interaction happens.
-         * This prevents the accordion from animating when it's programmatically
-         * set to an expanded or collapsed state on initial load.
-         */
-        this.hasInteracted = false;
-        /**
-         * Tracks if this accordion has ever been expanded.
-         * Used to prevent the first expansion from animating.
-         */
-        this.hasEverBeenExpanded = false;
-        /**
-         * Tracks if this accordion has received its first update from the group.
-         * Used to distinguish initial programmatic sets from user interactions.
-         */
-        this.hasReceivedFirstUpdate = false;
-        /**
-         * The value of the accordion. Defaults to an autogenerated
-         * value.
-         */
-        this.value = `ion-accordion-${accordionIds++}`;
-        /**
-         * If `true`, the accordion cannot be interacted with.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, the accordion cannot be interacted with,
-         * but does not alter the opacity.
-         */
-        this.readonly = false;
-        /**
-         * The toggle icon to use. This icon will be
-         * rotated when the accordion is expanded
-         * or collapsed.
-         */
-        this.toggleIcon = chevronDown;
-        /**
-         * The slot inside of `ion-item` to
-         * place the toggle icon. Defaults to `"end"`.
-         */
-        this.toggleIconSlot = 'end';
+        this.updateListener = () => this.updateState(false);
         this.setItemDefaults = () => {
             const ionItem = this.getSlottedHeaderIonItem();
             if (!ionItem) {
@@ -165,15 +90,10 @@ const Accordion = class {
             iconEl.setAttribute('aria-hidden', 'true');
             ionItem.appendChild(iconEl);
         };
-        this.expandAccordion = () => {
+        this.expandAccordion = (initialUpdate = false) => {
             const { contentEl, contentElWrapper } = this;
-            /**
-             * If the content elements aren't available yet, just set the state.
-             * This happens on initial render before the DOM is ready.
-             */
-            if (contentEl === undefined || contentElWrapper === undefined) {
+            if (initialUpdate || contentEl === undefined || contentElWrapper === undefined) {
                 this.state = 4 /* AccordionState.Expanded */;
-                this.hasEverBeenExpanded = true;
                 return;
             }
             if (this.state === 4 /* AccordionState.Expanded */) {
@@ -182,11 +102,6 @@ const Accordion = class {
             if (this.currentRaf !== undefined) {
                 cancelAnimationFrame(this.currentRaf);
             }
-            /**
-             * Mark that this accordion has been expanded at least once.
-             * This allows subsequent expansions to animate.
-             */
-            this.hasEverBeenExpanded = true;
             if (this.shouldAnimate()) {
                 raf(() => {
                     this.state = 8 /* AccordionState.Expanding */;
@@ -204,13 +119,9 @@ const Accordion = class {
                 this.state = 4 /* AccordionState.Expanded */;
             }
         };
-        this.collapseAccordion = () => {
+        this.collapseAccordion = (initialUpdate = false) => {
             const { contentEl } = this;
-            /**
-             * If the content element isn't available yet, just set the state.
-             * This happens on initial render before the DOM is ready.
-             */
-            if (contentEl === undefined) {
+            if (initialUpdate || contentEl === undefined) {
                 this.state = 1 /* AccordionState.Collapsed */;
                 return;
             }
@@ -245,18 +156,6 @@ const Accordion = class {
          * of what is set in the config.
          */
         this.shouldAnimate = () => {
-            /**
-             * Don't animate until after the first user interaction.
-             * This prevents animations on initial load when accordions
-             * start in an expanded or collapsed state programmatically.
-             *
-             * Additionally, don't animate the very first expansion even if
-             * hasInteracted is true. This handles edge cases like React StrictMode
-             * where effects run twice and might incorrectly mark as interacted.
-             */
-            if (!this.hasInteracted || !this.hasEverBeenExpanded) {
-                return false;
-            }
             if (typeof window === 'undefined') {
                 return false;
             }
@@ -273,7 +172,7 @@ const Accordion = class {
             }
             return true;
         };
-        this.updateState = async () => {
+        this.updateState = async (initialUpdate = false) => {
             const accordionGroup = this.accordionGroupEl;
             const accordionValue = this.value;
             if (!accordionGroup) {
@@ -282,11 +181,11 @@ const Accordion = class {
             const value = accordionGroup.value;
             const shouldExpand = Array.isArray(value) ? value.includes(accordionValue) : value === accordionValue;
             if (shouldExpand) {
-                this.expandAccordion();
+                this.expandAccordion(initialUpdate);
                 this.isNext = this.isPrevious = false;
             }
             else {
-                this.collapseAccordion();
+                this.collapseAccordion(initialUpdate);
                 /**
                  * When using popout or inset,
                  * the collapsed accordion items
@@ -326,6 +225,14 @@ const Accordion = class {
             }
             return previousSibling;
         };
+        this.state = 1 /* AccordionState.Collapsed */;
+        this.isNext = false;
+        this.isPrevious = false;
+        this.value = `ion-accordion-${accordionIds++}`;
+        this.disabled = false;
+        this.readonly = false;
+        this.toggleIcon = chevronDown;
+        this.toggleIconSlot = 'end';
     }
     valueChanged() {
         this.updateState();
@@ -334,14 +241,14 @@ const Accordion = class {
         var _a;
         const accordionGroupEl = (this.accordionGroupEl = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('ion-accordion-group'));
         if (accordionGroupEl) {
-            this.updateState();
-            addEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler);
+            this.updateState(true);
+            addEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
         }
     }
     disconnectedCallback() {
         const accordionGroupEl = this.accordionGroupEl;
         if (accordionGroupEl) {
-            removeEventListener(accordionGroupEl, 'ionValueChange', this.accordionGroupUpdateHandler);
+            removeEventListener(accordionGroupEl, 'ionValueChange', this.updateListener);
         }
     }
     componentDidLoad() {
@@ -365,11 +272,6 @@ const Accordion = class {
         const { accordionGroupEl, disabled, readonly, value, state } = this;
         if (disabled || readonly)
             return;
-        /**
-         * Mark that the user has interacted with the accordion.
-         * This enables animations for all future state changes.
-         */
-        this.hasInteracted = true;
         if (accordionGroupEl) {
             /**
              * Because the accordion group may or may
@@ -390,7 +292,7 @@ const Accordion = class {
         const headerPart = expanded ? 'header expanded' : 'header';
         const contentPart = expanded ? 'content expanded' : 'content';
         this.setAria(expanded);
-        return (h(Host, { key: '9c90bce01eff7e5774a19f69c872f3761d66cf3c', class: {
+        return (h(Host, { key: '073e1d02c18dcbc20c68648426e87c14750c031d', class: {
                 [mode]: true,
                 'accordion-expanding': this.state === 8 /* AccordionState.Expanding */,
                 'accordion-expanded': this.state === 4 /* AccordionState.Expanded */,
@@ -401,7 +303,7 @@ const Accordion = class {
                 'accordion-disabled': disabled,
                 'accordion-readonly': readonly,
                 'accordion-animated': this.shouldAnimate(),
-            } }, h("div", { key: 'cab40d5bcf3c93fd78e70b6d3906a541e725837d', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '672bc7fb3f9e18076b41e20fc9eaeab7cafcf3a2', name: "header" })), h("div", { key: 'fd777ca5b4ab04aa4f44c339d58c8cd987c52bcb', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '0aad70a71e2cd2c16b2e98fa0bdd40421d95fe16', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: 'd630e10ac7c56b4dbf943b523f26759b83aead55', name: "content" })))));
+            } }, h("div", { key: '9b4cf326de8bb6b4033992903c0c1bfd7eea9bcc', onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: (headerEl) => (this.headerEl = headerEl) }, h("slot", { key: '464c32a37f64655eacf4218284214f5f30b14a1e', name: "header" })), h("div", { key: '8bb52e6a62d7de0106b253201a89a32e79d9a594', id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: (contentEl) => (this.contentEl = contentEl) }, h("div", { key: '1d9dfd952ad493754aaeea7a8f625b33c2dd90a0', id: "content-wrapper", ref: (contentElWrapper) => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '970dfbc55a612d739d0ca3b7b1a08e5c96d0c479', name: "content" })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }