@sparkle-learning/core 0.0.27 → 0.0.30

package/dist/esm/index.js

@@ -1,9 +1,10 @@
-import './index-55fc9f5e.js';
-import './ionic-global-1f9287cc.js';
-export { A as AuthService, P as PrivateRoute, i as initSetupEnvironmentConfig, s as setupEnvironmentConfig } from './PrivateRoute-9f0973bb.js';
+export { A as AuthService, P as PrivateRoute, i as initSetupEnvironmentConfig, s as setupEnvironmentConfig } from './PrivateRoute-b9937c45.js';
 export { E as EnvironmentConfigService } from './environment-config.service-2b5d692b.js';
 export { A as AssetsService } from './assets.service-66e848b8.js';
-export { A as AuthStore } from './auth.store-dd944bc2.js';
-import './helpers-e7f66b2b.js';
-import './hardware-back-button-508e48cf.js';
-import './overlays-8363621c.js';
+export { A as AuthStore } from './auth.store-3ed2389e.js';
+import './index-5568e3fa.js';
+import './localstorage.service-4bf408c8.js';
+import './overlays-34cfa9e0.js';
+import './ionic-global-0939c477.js';
+import './hardware-back-button-b6ccf74a.js';
+import './helpers-39367fe1.js';

package/dist/esm/{input-shims-3a97fa86.js → input-shims-cc98ea92.js}

@@ -1,5 +1,8 @@
-import { a as addEventListener, r as removeEventListener, p as pointerCoord } from './helpers-e7f66b2b.js';
+import { a as addEventListener, r as removeEventListener, k as raf, p as pointerCoord, c as componentOnReady } from './helpers-39367fe1.js';
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const cloneMap = new WeakMap();
 const relocateInput = (componentEl, inputEl, shouldRelocate, inputRelativeY = 0) => {
   if (cloneMap.has(componentEl) === shouldRelocate) {
@@ -47,6 +50,9 @@ const removeClone = (componentEl, inputEl) => {
   inputEl.style.transform = '';
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const enableHideCaretOnScroll = (componentEl, inputEl, scrollEl) => {
   if (!scrollEl || !inputEl) {
     return () => { return; };
@@ -69,7 +75,10 @@ const enableHideCaretOnScroll = (componentEl, inputEl, scrollEl) => {
   };
 };
 
-const SKIP_SELECTOR = 'input, textarea, [no-blur]';
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const SKIP_SELECTOR = 'input, textarea, [no-blur], [contenteditable]';
 const enableInputBlurring = () => {
   let focused = true;
   let didScroll = false;
@@ -120,6 +129,9 @@ const enableInputBlurring = () => {
   };
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const SCROLL_ASSIST_SPEED = 0.3;
 const getScrollData = (componentEl, contentEl, keyboardHeight) => {
   const itemEl = componentEl.closest('ion-item,[ion-item]') || componentEl;
@@ -158,6 +170,9 @@ const calcScrollData = (inputRect, contentRect, keyboardHeight, platformHeight)
   };
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardHeight) => {
   let coord;
   const touchStart = (ev) => {
@@ -173,7 +188,6 @@ const enableScrollAssist = (componentEl, inputEl, contentEl, footerEl, keyboardH
     // focus this input if the pointer hasn't moved XX pixels
     // and the input doesn't already have focus
     if (!hasPointerMoved(6, coord, endCoord) && !isFocused(inputEl)) {
-      ev.preventDefault();
       ev.stopPropagation();
       // begin the input focus process
       jsSetFocus(componentEl, inputEl, contentEl, footerEl, keyboardHeight);
@@ -202,6 +216,12 @@ const jsSetFocus = async (componentEl, inputEl, contentEl, footerEl, keyboardHei
   // at this point the native text input still does not have focus
   relocateInput(componentEl, inputEl, true, scrollData.inputSafeY);
   inputEl.focus();
+  /**
+   * Relocating/Focusing input causes the
+   * click event to be cancelled, so
+   * manually fire one here.
+   */
+  raf(() => componentEl.click());
   /* tslint:disable-next-line */
   if (typeof window !== 'undefined') {
     let scrollContentTimeout;
@@ -278,6 +298,9 @@ const hasPointerMoved = (threshold, startCoord, endCoord) => {
   return false;
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const PADDING_TIMER_KEY = '$ionPaddingTimer';
 const enableScrollPadding = (keyboardHeight) => {
   const doc = document;
@@ -324,6 +347,9 @@ const setScrollPadding = (input, keyboardHeight) => {
   }
 };
 
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
 const INPUT_BLURRING = true;
 const SCROLL_PADDING = true;
 const startInputShims = (config) => {
@@ -337,9 +363,7 @@ const startInputShims = (config) => {
   const hideCaretMap = new WeakMap();
   const scrollAssistMap = new WeakMap();
   const registerInput = async (componentEl) => {
-    if (componentEl.componentOnReady) {
-      await componentEl.componentOnReady();
-    }
+    await new Promise(resolve => componentOnReady(componentEl, resolve));
     const inputRoot = componentEl.shadowRoot || componentEl;
     const inputEl = inputRoot.querySelector('input') || inputRoot.querySelector('textarea');
     const scrollEl = componentEl.closest('ion-content');
@@ -347,24 +371,24 @@ const startInputShims = (config) => {
     if (!inputEl) {
       return;
     }
-    if ( !!scrollEl && hideCaret && !hideCaretMap.has(componentEl)) {
+    if (!!scrollEl && hideCaret && !hideCaretMap.has(componentEl)) {
       const rmFn = enableHideCaretOnScroll(componentEl, inputEl, scrollEl);
       hideCaretMap.set(componentEl, rmFn);
     }
-    if ( (!!scrollEl || !!footerEl) && scrollAssist && !scrollAssistMap.has(componentEl)) {
+    if ((!!scrollEl || !!footerEl) && scrollAssist && !scrollAssistMap.has(componentEl)) {
       const rmFn = enableScrollAssist(componentEl, inputEl, scrollEl, footerEl, keyboardHeight);
       scrollAssistMap.set(componentEl, rmFn);
     }
   };
   const unregisterInput = (componentEl) => {
-    if ( hideCaret) {
+    if (hideCaret) {
       const fn = hideCaretMap.get(componentEl);
       if (fn) {
         fn();
       }
       hideCaretMap.delete(componentEl);
     }
-    if ( scrollAssist) {
+    if (scrollAssist) {
       const fn = scrollAssistMap.get(componentEl);
       if (fn) {
         fn();

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

@@ -0,0 +1,193 @@
+import { r as registerInstance, i as createEvent, h, H as Host, e as getElement } from './index-5568e3fa.js';
+import { g as getIonMode } from './ionic-global-0939c477.js';
+
+const accordionGroupIosCss = ":host{display:block}:host(.accordion-group-expand-inset){margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.accordion-group-expand-inset){margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){border-bottom:none}";
+
+const accordionGroupMdCss = ":host{display:block}:host(.accordion-group-expand-inset){margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.accordion-group-expand-inset){margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}:host(.accordion-group-expand-inset) ::slotted(ion-accordion){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-bottom-right-radius:6px;border-bottom-left-radius:6px}:host-context([dir=rtl]):host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-previous),:host-context([dir=rtl]).accordion-group-expand-inset ::slotted(ion-accordion.accordion-previous){border-bottom-right-radius:6px;border-bottom-left-radius:6px}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next){border-top-left-radius:6px;border-top-right-radius:6px}:host-context([dir=rtl]):host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-next),:host-context([dir=rtl]).accordion-group-expand-inset ::slotted(ion-accordion.accordion-next){border-top-left-radius:6px;border-top-right-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}";
+
+const AccordionGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.ionChange = createEvent(this, "ionChange", 7);
+    /**
+     * If `true`, all accordions inside of the
+     * accordion group will animate when expanding
+     * or collapsing.
+     */
+    this.animated = true;
+    /**
+     * If `true`, the accordion group cannot be interacted with.
+     */
+    this.disabled = false;
+    /**
+     * If `true`, the accordion group cannot be interacted with,
+     * but does not alter the opacity.
+     */
+    this.readonly = false;
+    /**
+     * Describes the expansion behavior for each accordion.
+     * Possible values are `"compact"` and `"inset"`.
+     * Defaults to `"compact"`.
+     */
+    this.expand = 'compact';
+  }
+  valueChanged() {
+    const { value, multiple } = this;
+    /**
+     * If accordion group does not
+     * let multiple accordions be open
+     * at once, but user passes an array
+     * just grab the first value.
+     */
+    if (!multiple && Array.isArray(value)) {
+      this.value = value[0];
+    }
+    else {
+      this.ionChange.emit({ value: this.value });
+    }
+  }
+  async disabledChanged() {
+    const { disabled } = this;
+    const accordions = await this.getAccordions();
+    for (const accordion of accordions) {
+      accordion.disabled = disabled;
+    }
+  }
+  async readonlyChanged() {
+    const { readonly } = this;
+    const accordions = await this.getAccordions();
+    for (const accordion of accordions) {
+      accordion.readonly = readonly;
+    }
+  }
+  async onKeydown(ev) {
+    const activeElement = document.activeElement;
+    if (!activeElement) {
+      return;
+    }
+    const accordionEl = (activeElement.tagName === 'ION-ACCORDION') ? activeElement : activeElement.closest('ion-accordion');
+    if (!accordionEl) {
+      return;
+    }
+    const closestGroup = accordionEl.closest('ion-accordion-group');
+    if (closestGroup !== this.el) {
+      return;
+    }
+    // If the active accordion is not in the current array of accordions, do not do anything
+    const accordions = await this.getAccordions();
+    const startingIndex = accordions.findIndex(a => a === accordionEl);
+    if (startingIndex === -1) {
+      return;
+    }
+    let accordion;
+    if (ev.key === 'ArrowDown') {
+      accordion = this.findNextAccordion(accordions, startingIndex);
+    }
+    else if (ev.key === 'ArrowUp') {
+      accordion = this.findPreviousAccordion(accordions, startingIndex);
+    }
+    else if (ev.key === 'Home') {
+      accordion = accordions[0];
+    }
+    else if (ev.key === 'End') {
+      accordion = accordions[accordions.length - 1];
+    }
+    if (accordion !== undefined && accordion !== activeElement) {
+      accordion.focus();
+    }
+  }
+  async componentDidLoad() {
+    if (this.disabled) {
+      this.disabledChanged();
+    }
+    if (this.readonly) {
+      this.readonlyChanged();
+    }
+  }
+  /**
+   * @internal
+   */
+  async requestAccordionToggle(accordionValue, accordionExpand) {
+    const { multiple, value, readonly, disabled } = this;
+    if (readonly || disabled) {
+      return;
+    }
+    if (accordionExpand) {
+      /**
+       * If group accepts multiple values
+       * check to see if value is already in
+       * in values array. If not, add it
+       * to the array.
+       */
+      if (multiple) {
+        const groupValue = value || [];
+        const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue];
+        const valueExists = processedValue.find(v => v === accordionValue);
+        if (valueExists === undefined && accordionValue !== undefined) {
+          this.value = [...processedValue, accordionValue];
+        }
+      }
+      else {
+        this.value = accordionValue;
+      }
+    }
+    else {
+      /**
+       * If collapsing accordion, either filter the value
+       * out of the values array or unset the value.
+       */
+      if (multiple) {
+        const groupValue = value || [];
+        const processedValue = Array.isArray(groupValue) ? groupValue : [groupValue];
+        this.value = processedValue.filter(v => v !== accordionValue);
+      }
+      else {
+        this.value = undefined;
+      }
+    }
+  }
+  findNextAccordion(accordions, startingIndex) {
+    const nextAccordion = accordions[startingIndex + 1];
+    // tslint:disable-next-line:strict-type-predicates
+    if (nextAccordion === undefined) {
+      return accordions[0];
+    }
+    return nextAccordion;
+  }
+  findPreviousAccordion(accordions, startingIndex) {
+    const prevAccordion = accordions[startingIndex - 1];
+    // tslint:disable-next-line:strict-type-predicates
+    if (prevAccordion === undefined) {
+      return accordions[accordions.length - 1];
+    }
+    return prevAccordion;
+  }
+  /**
+   * @internal
+   */
+  async getAccordions() {
+    return Array.from(this.el.querySelectorAll(':scope > ion-accordion'));
+  }
+  render() {
+    const { disabled, readonly, expand } = this;
+    const mode = getIonMode(this);
+    return (h(Host, { class: {
+        [mode]: true,
+        'accordion-group-disabled': disabled,
+        'accordion-group-readonly': readonly,
+        [`accordion-group-expand-${expand}`]: true
+      }, role: "presentation" }, h("slot", null)));
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "value": ["valueChanged"],
+    "disabled": ["disabledChanged"],
+    "readonly": ["readonlyChanged"]
+  }; }
+};
+AccordionGroup.style = {
+  ios: accordionGroupIosCss,
+  md: accordionGroupMdCss
+};
+
+export { AccordionGroup as ion_accordion_group };

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

@@ -0,0 +1,336 @@
+import { r as registerInstance, h, H as Host, e as getElement } from './index-5568e3fa.js';
+import { a as chevronDown } from './index-dc61f152.js';
+import { c as config, g as getIonMode } from './ionic-global-0939c477.js';
+import { k as raf, a as addEventListener, r as removeEventListener, g as getElementRoot, t as transitionEndAsync } from './helpers-39367fe1.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-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 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){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-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 Accordion = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.updateListener = () => this.updateState(false);
+    this.state = 1 /* Collapsed */;
+    this.isNext = false;
+    this.isPrevious = 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.setItemDefaults = () => {
+      const ionItem = this.getSlottedHeaderIonItem();
+      if (!ionItem) {
+        return;
+      }
+      /**
+       * For a11y purposes, we make
+       * the ion-item a button so users
+       * can tab to it and use keyboard
+       * navigation to get around.
+       */
+      ionItem.button = true;
+      ionItem.detail = false;
+      /**
+       * By default, the lines in an
+       * item should be full here, but
+       * only do that if a user has
+       * not explicitly overridden them
+       */
+      if (ionItem.lines === undefined) {
+        ionItem.lines = 'full';
+      }
+    };
+    this.getSlottedHeaderIonItem = () => {
+      const { headerEl } = this;
+      if (!headerEl) {
+        return;
+      }
+      /**
+       * Get the first ion-item
+       * slotted in the header slot
+       */
+      const slot = headerEl.querySelector('slot');
+      if (!slot) {
+        return;
+      }
+      // This is not defined in unit tests
+      const ionItem = slot.assignedElements && slot.assignedElements().find(el => el.tagName === 'ION-ITEM');
+      return ionItem;
+    };
+    this.setAria = (expanded = false) => {
+      const ionItem = this.getSlottedHeaderIonItem();
+      if (!ionItem) {
+        return;
+      }
+      /**
+       * Get the native <button> element inside of
+       * ion-item because that is what will be focused
+       */
+      const root = getElementRoot(ionItem);
+      const button = root.querySelector('button');
+      if (!button) {
+        return;
+      }
+      button.setAttribute('aria-expanded', `${expanded}`);
+    };
+    this.slotToggleIcon = () => {
+      const ionItem = this.getSlottedHeaderIonItem();
+      if (!ionItem) {
+        return;
+      }
+      const { toggleIconSlot, toggleIcon } = this;
+      /**
+       * Check if there already is a toggle icon.
+       * If so, do not add another one.
+       */
+      const existingToggleIcon = ionItem.querySelector('.ion-accordion-toggle-icon');
+      if (existingToggleIcon) {
+        return;
+      }
+      const iconEl = document.createElement('ion-icon');
+      iconEl.slot = toggleIconSlot;
+      iconEl.lazy = false;
+      iconEl.classList.add('ion-accordion-toggle-icon');
+      iconEl.icon = toggleIcon;
+      iconEl.setAttribute('aria-hidden', 'true');
+      ionItem.appendChild(iconEl);
+    };
+    this.expandAccordion = (initialUpdate = false) => {
+      if (initialUpdate) {
+        this.state = 4 /* Expanded */;
+        return;
+      }
+      if (this.state === 4 /* Expanded */) {
+        return;
+      }
+      const { contentEl, contentElWrapper } = this;
+      if (contentEl === undefined || contentElWrapper === undefined) {
+        return;
+      }
+      if (this.currentRaf !== undefined) {
+        cancelAnimationFrame(this.currentRaf);
+      }
+      if (this.shouldAnimate()) {
+        raf(() => {
+          this.state = 8 /* Expanding */;
+          this.currentRaf = raf(async () => {
+            const contentHeight = contentElWrapper.offsetHeight;
+            const waitForTransition = transitionEndAsync(contentEl, 2000);
+            contentEl.style.setProperty('max-height', `${contentHeight}px`);
+            await waitForTransition;
+            this.state = 4 /* Expanded */;
+            contentEl.style.removeProperty('max-height');
+          });
+        });
+      }
+      else {
+        this.state = 4 /* Expanded */;
+      }
+    };
+    this.collapseAccordion = (initialUpdate = false) => {
+      if (initialUpdate) {
+        this.state = 1 /* Collapsed */;
+        return;
+      }
+      if (this.state === 1 /* Collapsed */) {
+        return;
+      }
+      const { contentEl } = this;
+      if (contentEl === undefined) {
+        return;
+      }
+      if (this.currentRaf !== undefined) {
+        cancelAnimationFrame(this.currentRaf);
+      }
+      if (this.shouldAnimate()) {
+        this.currentRaf = raf(async () => {
+          const contentHeight = contentEl.offsetHeight;
+          contentEl.style.setProperty('max-height', `${contentHeight}px`);
+          raf(async () => {
+            const waitForTransition = transitionEndAsync(contentEl, 2000);
+            this.state = 2 /* Collapsing */;
+            await waitForTransition;
+            this.state = 1 /* Collapsed */;
+            contentEl.style.removeProperty('max-height');
+          });
+        });
+      }
+      else {
+        this.state = 1 /* Collapsed */;
+      }
+    };
+    /**
+     * Helper function to determine if
+     * something should animate.
+     * If prefers-reduced-motion is set
+     * then we should not animate, regardless
+     * of what is set in the config.
+     */
+    this.shouldAnimate = () => {
+      if (typeof window === 'undefined') {
+        return false;
+      }
+      const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
+      if (prefersReducedMotion) {
+        return false;
+      }
+      const animated = config.get('animated', true);
+      if (!animated) {
+        return false;
+      }
+      if (this.accordionGroupEl && !this.accordionGroupEl.animated) {
+        return false;
+      }
+      return true;
+    };
+    this.updateState = async (initialUpdate = false) => {
+      const accordionGroup = this.accordionGroupEl;
+      const accordionValue = this.value;
+      if (!accordionGroup) {
+        return;
+      }
+      const value = accordionGroup.value;
+      const shouldExpand = (Array.isArray(value)) ? value.includes(accordionValue) : value === accordionValue;
+      if (shouldExpand) {
+        this.expandAccordion(initialUpdate);
+        this.isNext = this.isPrevious = false;
+      }
+      else {
+        this.collapseAccordion(initialUpdate);
+        /**
+         * When using popout or inset,
+         * the collapsed accordion items
+         * may need additional border radius
+         * applied. Check to see if the
+         * next or previous accordion is selected.
+         */
+        const nextAccordion = this.getNextSibling();
+        const nextAccordionValue = nextAccordion && nextAccordion.value;
+        if (nextAccordionValue !== undefined) {
+          this.isPrevious = (Array.isArray(value)) ? value.includes(nextAccordionValue) : value === nextAccordionValue;
+        }
+        const previousAccordion = this.getPreviousSibling();
+        const previousAccordionValue = previousAccordion && previousAccordion.value;
+        if (previousAccordionValue !== undefined) {
+          this.isNext = (Array.isArray(value)) ? value.includes(previousAccordionValue) : value === previousAccordionValue;
+        }
+      }
+    };
+    this.getNextSibling = () => {
+      if (!this.el) {
+        return;
+      }
+      const nextSibling = this.el.nextElementSibling;
+      if ((nextSibling === null || nextSibling === void 0 ? void 0 : nextSibling.tagName) !== 'ION-ACCORDION') {
+        return;
+      }
+      return nextSibling;
+    };
+    this.getPreviousSibling = () => {
+      if (!this.el) {
+        return;
+      }
+      const previousSibling = this.el.previousElementSibling;
+      if ((previousSibling === null || previousSibling === void 0 ? void 0 : previousSibling.tagName) !== 'ION-ACCORDION') {
+        return;
+      }
+      return previousSibling;
+    };
+  }
+  connectedCallback() {
+    const accordionGroupEl = this.accordionGroupEl = this.el && this.el.closest('ion-accordion-group');
+    if (accordionGroupEl) {
+      this.updateState(true);
+      addEventListener(accordionGroupEl, 'ionChange', this.updateListener);
+    }
+  }
+  disconnectedCallback() {
+    const accordionGroupEl = this.accordionGroupEl;
+    if (accordionGroupEl) {
+      removeEventListener(accordionGroupEl, 'ionChange', this.updateListener);
+    }
+  }
+  componentDidLoad() {
+    this.setItemDefaults();
+    this.slotToggleIcon();
+    /**
+     * We need to wait a tick because we
+     * just set ionItem.button = true and
+     * the button has not have been rendered yet.
+     */
+    raf(() => {
+      /**
+       * Set aria label on button inside of ion-item
+       * once the inner content has been rendered.
+       */
+      const expanded = this.state === 4 /* Expanded */ || this.state === 8 /* Expanding */;
+      this.setAria(expanded);
+    });
+  }
+  toggleExpanded() {
+    const { accordionGroupEl, value, state } = this;
+    if (accordionGroupEl) {
+      /**
+       * Because the accordion group may or may
+       * not allow multiple accordions open, we
+       * need to request the toggling of this
+       * accordion and the accordion group will
+       * make the decision on whether or not
+       * to allow it.
+       */
+      const expand = state === 1 /* Collapsed */ || state === 2 /* Collapsing */;
+      accordionGroupEl.requestAccordionToggle(value, expand);
+    }
+  }
+  render() {
+    const { disabled, readonly } = this;
+    const mode = getIonMode(this);
+    const expanded = this.state === 4 /* Expanded */ || this.state === 8 /* Expanding */;
+    const headerPart = expanded ? 'header expanded' : 'header';
+    const contentPart = expanded ? 'content expanded' : 'content';
+    this.setAria(expanded);
+    return (h(Host, { class: {
+        [mode]: true,
+        'accordion-expanding': this.state === 8 /* Expanding */,
+        'accordion-expanded': this.state === 4 /* Expanded */,
+        'accordion-collapsing': this.state === 2 /* Collapsing */,
+        'accordion-collapsed': this.state === 1 /* Collapsed */,
+        'accordion-next': this.isNext,
+        'accordion-previous': this.isPrevious,
+        'accordion-disabled': disabled,
+        'accordion-readonly': readonly,
+        'accordion-animated': config.getBoolean('animated', true)
+      } }, h("div", { onClick: () => this.toggleExpanded(), id: "header", part: headerPart, "aria-controls": "content", ref: headerEl => this.headerEl = headerEl }, h("slot", { name: "header" })), h("div", { id: "content", part: contentPart, role: "region", "aria-labelledby": "header", ref: contentEl => this.contentEl = contentEl }, h("div", { id: "content-wrapper", ref: contentElWrapper => this.contentElWrapper = contentElWrapper }, h("slot", { name: "content" })))));
+  }
+  static get delegatesFocus() { return true; }
+  get el() { return getElement(this); }
+};
+let accordionIds = 0;
+Accordion.style = {
+  ios: accordionIosCss,
+  md: accordionMdCss
+};
+
+export { Accordion as ion_accordion };