@amwaljs/checkout-button 0.3.0 → 0.3.2

package/dist/components/p-1785e30a.js

@@ -0,0 +1,318 @@
+import { d as doc } from './p-d7fe59ee.js';
+import { MENU_BACK_BUTTON_PRIORITY } from './p-d72e8d7b.js';
+import { p as printIonWarning } from './p-e187a77c.js';
+import { c as componentOnReady } from './p-2bb89b46.js';
+import { g as getIonMode } from './p-901c16c5.js';
+import { c as createAnimation } from './p-89c4c5cb.js';
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * baseAnimation
+ * Base class which is extended by the various types. Each
+ * type will provide their own animations for open and close
+ * and registers itself with Menu.
+ */
+const baseAnimation = (isIos) => {
+    // https://material.io/guidelines/motion/movement.html#movement-movement-in-out-of-screen-bounds
+    // https://material.io/guidelines/motion/duration-easing.html#duration-easing-natural-easing-curves
+    /**
+     * "Apply the sharp curve to items temporarily leaving the screen that may return
+     * from the same exit point. When they return, use the deceleration curve. On mobile,
+     * this transition typically occurs over 300ms" -- MD Motion Guide
+     */
+    return createAnimation().duration(isIos ? 400 : 300);
+};
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Menu Overlay Type
+ * The menu slides over the content. The content
+ * itself, which is under the menu, does not move.
+ */
+const menuOverlayAnimation = (menu) => {
+    let closedX;
+    let openedX;
+    const width = menu.width + 8;
+    const menuAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    if (menu.isEndSide) {
+        // right side
+        closedX = width + 'px';
+        openedX = '0px';
+    }
+    else {
+        // left side
+        closedX = -width + 'px';
+        openedX = '0px';
+    }
+    menuAnimation.addElement(menu.menuInnerEl).fromTo('transform', `translateX(${closedX})`, `translateX(${openedX})`);
+    const mode = getIonMode(menu);
+    const isIos = mode === 'ios';
+    const opacity = isIos ? 0.2 : 0.25;
+    backdropAnimation.addElement(menu.backdropEl).fromTo('opacity', 0.01, opacity);
+    return baseAnimation(isIos).addAnimation([menuAnimation, backdropAnimation]);
+};
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Menu Push Type
+ * The content slides over to reveal the menu underneath.
+ * The menu itself also slides over to reveal its bad self.
+ */
+const menuPushAnimation = (menu) => {
+    let contentOpenedX;
+    let menuClosedX;
+    const mode = getIonMode(menu);
+    const width = menu.width;
+    if (menu.isEndSide) {
+        contentOpenedX = -width + 'px';
+        menuClosedX = width + 'px';
+    }
+    else {
+        contentOpenedX = width + 'px';
+        menuClosedX = -width + 'px';
+    }
+    const menuAnimation = createAnimation()
+        .addElement(menu.menuInnerEl)
+        .fromTo('transform', `translateX(${menuClosedX})`, 'translateX(0px)');
+    const contentAnimation = createAnimation()
+        .addElement(menu.contentEl)
+        .fromTo('transform', 'translateX(0px)', `translateX(${contentOpenedX})`);
+    const backdropAnimation = createAnimation().addElement(menu.backdropEl).fromTo('opacity', 0.01, 0.32);
+    return baseAnimation(mode === 'ios').addAnimation([menuAnimation, contentAnimation, backdropAnimation]);
+};
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+/**
+ * Menu Reveal Type
+ * The content slides over to reveal the menu underneath.
+ * The menu itself, which is under the content, does not move.
+ */
+const menuRevealAnimation = (menu) => {
+    const mode = getIonMode(menu);
+    const openedX = menu.width * (menu.isEndSide ? -1 : 1) + 'px';
+    const contentOpen = createAnimation()
+        .addElement(menu.contentEl) // REVIEW
+        .fromTo('transform', 'translateX(0px)', `translateX(${openedX})`);
+    return baseAnimation(mode === 'ios').addAnimation(contentOpen);
+};
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const createMenuController = () => {
+    const menuAnimations = new Map();
+    const menus = [];
+    const open = async (menu) => {
+        const menuEl = await get(menu, true);
+        if (menuEl) {
+            return menuEl.open();
+        }
+        return false;
+    };
+    const close = async (menu) => {
+        const menuEl = await (menu !== undefined ? get(menu, true) : getOpen());
+        if (menuEl !== undefined) {
+            return menuEl.close();
+        }
+        return false;
+    };
+    const toggle = async (menu) => {
+        const menuEl = await get(menu, true);
+        if (menuEl) {
+            return menuEl.toggle();
+        }
+        return false;
+    };
+    const enable = async (shouldEnable, menu) => {
+        const menuEl = await get(menu);
+        if (menuEl) {
+            menuEl.disabled = !shouldEnable;
+        }
+        return menuEl;
+    };
+    const swipeGesture = async (shouldEnable, menu) => {
+        const menuEl = await get(menu);
+        if (menuEl) {
+            menuEl.swipeGesture = shouldEnable;
+        }
+        return menuEl;
+    };
+    const isOpen = async (menu) => {
+        if (menu != null) {
+            const menuEl = await get(menu);
+            // eslint-disable-next-line @typescript-eslint/prefer-optional-chain
+            return menuEl !== undefined && menuEl.isOpen();
+        }
+        else {
+            const menuEl = await getOpen();
+            return menuEl !== undefined;
+        }
+    };
+    const isEnabled = async (menu) => {
+        const menuEl = await get(menu);
+        if (menuEl) {
+            return !menuEl.disabled;
+        }
+        return false;
+    };
+    /**
+     * Finds and returns the menu specified by "menu" if registered.
+     * @param menu - The side or ID of the desired menu
+     * @param logOnMultipleSideMenus - If true, this function will log a warning
+     * if "menu" is a side but multiple menus on the same side were found. Since this function
+     * is used in multiple places, we default this log to false so that the calling
+     * functions can choose whether or not it is appropriate to log this warning.
+     */
+    const get = async (menu, logOnMultipleSideMenus = false) => {
+        await waitUntilReady();
+        if (menu === 'start' || menu === 'end') {
+            // there could be more than one menu on the same side
+            // so first try to get the enabled one
+            const menuRefs = menus.filter((m) => m.side === menu && !m.disabled);
+            if (menuRefs.length >= 1) {
+                if (menuRefs.length > 1 && logOnMultipleSideMenus) {
+                    printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${menuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, menuRefs.map((m) => m.el));
+                }
+                return menuRefs[0].el;
+            }
+            // didn't find a menu side that is enabled
+            // so try to get the first menu side found
+            const sideMenuRefs = menus.filter((m) => m.side === menu);
+            if (sideMenuRefs.length >= 1) {
+                if (sideMenuRefs.length > 1 && logOnMultipleSideMenus) {
+                    printIonWarning(`menuController queried for a menu on the "${menu}" side, but ${sideMenuRefs.length} menus were found. The first menu reference will be used. If this is not the behavior you want then pass the ID of the menu instead of its side.`, sideMenuRefs.map((m) => m.el));
+                }
+                return sideMenuRefs[0].el;
+            }
+        }
+        else if (menu != null) {
+            // the menuId was not left or right
+            // so try to get the menu by its "id"
+            return find((m) => m.menuId === menu);
+        }
+        // return the first enabled menu
+        const menuEl = find((m) => !m.disabled);
+        if (menuEl) {
+            return menuEl;
+        }
+        // get the first menu in the array, if one exists
+        return menus.length > 0 ? menus[0].el : undefined;
+    };
+    /**
+     * Get the instance of the opened menu. Returns `null` if a menu is not found.
+     */
+    const getOpen = async () => {
+        await waitUntilReady();
+        return _getOpenSync();
+    };
+    /**
+     * Get all menu instances.
+     */
+    const getMenus = async () => {
+        await waitUntilReady();
+        return getMenusSync();
+    };
+    /**
+     * Get whether or not a menu is animating. Returns `true` if any
+     * menu is currently animating.
+     */
+    const isAnimating = async () => {
+        await waitUntilReady();
+        return isAnimatingSync();
+    };
+    const registerAnimation = (name, animation) => {
+        menuAnimations.set(name, animation);
+    };
+    const _register = (menu) => {
+        if (menus.indexOf(menu) < 0) {
+            menus.push(menu);
+        }
+    };
+    const _unregister = (menu) => {
+        const index = menus.indexOf(menu);
+        if (index > -1) {
+            menus.splice(index, 1);
+        }
+    };
+    const _setOpen = async (menu, shouldOpen, animated) => {
+        if (isAnimatingSync()) {
+            return false;
+        }
+        if (shouldOpen) {
+            const openedMenu = await getOpen();
+            if (openedMenu && menu.el !== openedMenu) {
+                await openedMenu.setOpen(false, false);
+            }
+        }
+        return menu._setOpen(shouldOpen, animated);
+    };
+    const _createAnimation = (type, menuCmp) => {
+        const animationBuilder = menuAnimations.get(type); // TODO(FW-2832): type
+        if (!animationBuilder) {
+            throw new Error('animation not registered');
+        }
+        const animation = animationBuilder(menuCmp);
+        return animation;
+    };
+    const _getOpenSync = () => {
+        return find((m) => m._isOpen);
+    };
+    const getMenusSync = () => {
+        return menus.map((menu) => menu.el);
+    };
+    const isAnimatingSync = () => {
+        return menus.some((menu) => menu.isAnimating);
+    };
+    const find = (predicate) => {
+        const instance = menus.find(predicate);
+        if (instance !== undefined) {
+            return instance.el;
+        }
+        return undefined;
+    };
+    const waitUntilReady = () => {
+        return Promise.all(Array.from(document.querySelectorAll('ion-menu')).map((menu) => new Promise((resolve) => componentOnReady(menu, resolve))));
+    };
+    registerAnimation('reveal', menuRevealAnimation);
+    registerAnimation('push', menuPushAnimation);
+    registerAnimation('overlay', menuOverlayAnimation);
+    doc === null || doc === void 0 ? void 0 : doc.addEventListener('ionBackButton', (ev) => {
+        const openMenu = _getOpenSync();
+        if (openMenu) {
+            ev.detail.register(MENU_BACK_BUTTON_PRIORITY, () => {
+                return openMenu.close();
+            });
+        }
+    });
+    return {
+        registerAnimation,
+        get,
+        getMenus,
+        getOpen,
+        isEnabled,
+        swipeGesture,
+        isAnimating,
+        isOpen,
+        enable,
+        toggle,
+        close,
+        open,
+        _getOpenSync,
+        _createAnimation,
+        _register,
+        _unregister,
+        _setOpen,
+    };
+};
+const menuController = /*@__PURE__*/ createMenuController();
+
+export { menuController as m };

package/dist/{esm/helpers-BuFc0hrS.js → components/p-2bb89b46.js}

@@ -1,5 +1,3 @@
-import { p as printIonError } from './index-xxOnfNPU.js';
-
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
@@ -165,12 +163,43 @@ const ariaAttributes = [
  */
 const inheritAriaAttributes = (el, ignoreList) => {
     let attributesToInherit = ariaAttributes;
+    if (ignoreList && ignoreList.length > 0) {
+        attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+    }
     return inheritAttributes(el, attributesToInherit);
 };
 const addEventListener = (el, eventName, callback, opts) => {
+    var _a;
+    if (typeof window !== 'undefined') {
+        const win = window;
+        const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
+        if (config) {
+            const ael = config.get('_ael');
+            if (ael) {
+                return ael(el, eventName, callback, opts);
+            }
+            else if (config._ael) {
+                return config._ael(el, eventName, callback, opts);
+            }
+        }
+    }
     return el.addEventListener(eventName, callback, opts);
 };
 const removeEventListener = (el, eventName, callback, opts) => {
+    var _a;
+    if (typeof window !== 'undefined') {
+        const win = window;
+        const config = (_a = win === null || win === void 0 ? void 0 : win.Ionic) === null || _a === void 0 ? void 0 : _a.config;
+        if (config) {
+            const rel = config.get('_rel');
+            if (rel) {
+                return rel(el, eventName, callback, opts);
+            }
+            else if (config._rel) {
+                return config._rel(el, eventName, callback, opts);
+            }
+        }
+    }
     return el.removeEventListener(eventName, callback, opts);
 };
 /**
@@ -201,6 +230,13 @@ const raf = (h) => {
 const hasShadowDom = (el) => {
     return !!el.shadowRoot && !!el.attachShadow;
 };
+const findItemLabel = (componentEl) => {
+    const itemEl = componentEl.closest('ion-item');
+    if (itemEl) {
+        return itemEl.querySelector('ion-label');
+    }
+    return null;
+};
 const focusVisibleElement = (el) => {
     el.focus();
     /**
@@ -218,6 +254,52 @@ const focusVisibleElement = (el) => {
         }
     }
 };
+/**
+ * This method is used for Ionic's input components that use Shadow DOM. In
+ * order to properly label the inputs to work with screen readers, we need
+ * to get the text content of the label outside of the shadow root and pass
+ * it to the input inside of the shadow root.
+ *
+ * Referencing label elements by id from outside of the component is
+ * impossible due to the shadow boundary, read more here:
+ * https://developer.salesforce.com/blogs/2020/01/accessibility-for-web-components.html
+ *
+ * @param componentEl The shadow element that needs the aria label
+ * @param inputId The unique identifier for the input
+ */
+const getAriaLabel = (componentEl, inputId) => {
+    let labelText;
+    // If the user provides their own label via the aria-labelledby attr
+    // we should use that instead of looking for an ion-label
+    const labelledBy = componentEl.getAttribute('aria-labelledby');
+    // Grab the id off of the component in case they are using
+    // a custom label using the label element
+    const componentId = componentEl.id;
+    let labelId = labelledBy !== null && labelledBy.trim() !== '' ? labelledBy : inputId + '-lbl';
+    let label = labelledBy !== null && labelledBy.trim() !== '' ? document.getElementById(labelledBy) : findItemLabel(componentEl);
+    if (label) {
+        if (labelledBy === null) {
+            label.id = labelId;
+        }
+        labelText = label.textContent;
+        label.setAttribute('aria-hidden', 'true');
+        // if there is no label, check to see if the user has provided
+        // one by setting an id on the component and using the label element
+    }
+    else if (componentId.trim() !== '') {
+        label = document.querySelector(`label[for="${componentId}"]`);
+        if (label) {
+            if (label.id !== '') {
+                labelId = label.id;
+            }
+            else {
+                label.id = labelId = `${componentId}-lbl`;
+            }
+            labelText = label.textContent;
+        }
+    }
+    return { label, labelId, labelText };
+};
 /**
  * This method is used to add a hidden input to a host element that contains
  * a Shadow DOM. It does not add the input inside of the Shadow root which
@@ -231,7 +313,7 @@ const focusVisibleElement = (el) => {
  * @param disabled If true, the input is disabled
  */
 const renderHiddenInput = (always, container, name, value, disabled) => {
-    {
+    if (always || hasShadowDom(container)) {
         let input = container.querySelector('input.aux-input');
         if (!input) {
             input = container.ownerDocument.createElement('input');
@@ -250,11 +332,14 @@ const clamp = (min, n, max) => {
 const assert = (actual, reason) => {
     if (!actual) {
         const message = 'ASSERT: ' + reason;
-        printIonError(message);
+        console.error(message);
         debugger; // eslint-disable-line
         throw new Error(message);
     }
 };
+const now = (ev) => {
+    return ev.timeStamp || Date.now();
+};
 const pointerCoord = (ev) => {
     // get X coordinates for either a mouse click
     // or a touch depending on the given event
@@ -329,11 +414,5 @@ const shallowEqualStringMap = (map1, map2) => {
     }
     return true;
 };
-/**
- * Checks input for usable number. Not NaN and not Infinite.
- */
-const isSafeNumber = (input) => {
-    return typeof input === 'number' && !isNaN(input) && isFinite(input);
-};
 
-export { clamp as a, addEventListener as b, componentOnReady as c, removeEventListener as d, isEndSide as e, focusVisibleElement as f, getElementRoot as g, hasLazyBuild as h, inheritAttributes as i, inheritAriaAttributes as j, debounceEvent as k, assert as l, renderHiddenInput as m, isSafeNumber as n, debounce as o, pointerCoord as p, hasShadowDom as q, raf as r, shallowEqualStringMap as s, transitionEndAsync as t };
+export { addEventListener as a, raf as b, componentOnReady as c, inheritAttributes as d, renderHiddenInput as e, focusVisibleElement as f, getElementRoot as g, hasShadowDom as h, inheritAriaAttributes as i, getAriaLabel as j, findItemLabel as k, hasLazyBuild as l, clamp as m, debounceEvent as n, isEndSide as o, assert as p, debounce as q, removeEventListener as r, shallowEqualStringMap as s, transitionEndAsync as t, now as u, pointerCoord as v };

package/dist/components/p-2d7d745d.js

@@ -0,0 +1,224 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-ec0e3f3f.js';
+import { c as createColorClasses } from './p-350e7423.js';
+import { c as config, g as getIonMode } from './p-901c16c5.js';
+
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+const spinners = {
+    bubbles: {
+        dur: 1000,
+        circles: 9,
+        fn: (dur, index, total) => {
+            const animationDelay = `${(dur * index) / total - dur}ms`;
+            const angle = (2 * Math.PI * index) / total;
+            return {
+                r: 5,
+                style: {
+                    top: `${32 * Math.sin(angle)}%`,
+                    left: `${32 * Math.cos(angle)}%`,
+                    'animation-delay': animationDelay,
+                },
+            };
+        },
+    },
+    circles: {
+        dur: 1000,
+        circles: 8,
+        fn: (dur, index, total) => {
+            const step = index / total;
+            const animationDelay = `${dur * step - dur}ms`;
+            const angle = 2 * Math.PI * step;
+            return {
+                r: 5,
+                style: {
+                    top: `${32 * Math.sin(angle)}%`,
+                    left: `${32 * Math.cos(angle)}%`,
+                    'animation-delay': animationDelay,
+                },
+            };
+        },
+    },
+    circular: {
+        dur: 1400,
+        elmDuration: true,
+        circles: 1,
+        fn: () => {
+            return {
+                r: 20,
+                cx: 48,
+                cy: 48,
+                fill: 'none',
+                viewBox: '24 24 48 48',
+                transform: 'translate(0,0)',
+                style: {},
+            };
+        },
+    },
+    crescent: {
+        dur: 750,
+        circles: 1,
+        fn: () => {
+            return {
+                r: 26,
+                style: {},
+            };
+        },
+    },
+    dots: {
+        dur: 750,
+        circles: 3,
+        fn: (_, index) => {
+            const animationDelay = -(110 * index) + 'ms';
+            return {
+                r: 6,
+                style: {
+                    left: `${32 - 32 * index}%`,
+                    'animation-delay': animationDelay,
+                },
+            };
+        },
+    },
+    lines: {
+        dur: 1000,
+        lines: 8,
+        fn: (dur, index, total) => {
+            const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;
+            const animationDelay = `${(dur * index) / total - dur}ms`;
+            return {
+                y1: 14,
+                y2: 26,
+                style: {
+                    transform: transform,
+                    'animation-delay': animationDelay,
+                },
+            };
+        },
+    },
+    'lines-small': {
+        dur: 1000,
+        lines: 8,
+        fn: (dur, index, total) => {
+            const transform = `rotate(${(360 / total) * index + (index < total / 2 ? 180 : -180)}deg)`;
+            const animationDelay = `${(dur * index) / total - dur}ms`;
+            return {
+                y1: 12,
+                y2: 20,
+                style: {
+                    transform: transform,
+                    'animation-delay': animationDelay,
+                },
+            };
+        },
+    },
+    'lines-sharp': {
+        dur: 1000,
+        lines: 12,
+        fn: (dur, index, total) => {
+            const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
+            const animationDelay = `${(dur * index) / total - dur}ms`;
+            return {
+                y1: 17,
+                y2: 29,
+                style: {
+                    transform: transform,
+                    'animation-delay': animationDelay,
+                },
+            };
+        },
+    },
+    'lines-sharp-small': {
+        dur: 1000,
+        lines: 12,
+        fn: (dur, index, total) => {
+            const transform = `rotate(${30 * index + (index < 6 ? 180 : -180)}deg)`;
+            const animationDelay = `${(dur * index) / total - dur}ms`;
+            return {
+                y1: 12,
+                y2: 20,
+                style: {
+                    transform: transform,
+                    'animation-delay': animationDelay,
+                },
+            };
+        },
+    },
+};
+const SPINNERS = spinners;
+
+const spinnerCss = ":host{display:inline-block;position:relative;width:28px;height:28px;color:var(--color);user-select:none}:host(.ion-color){color:var(--ion-color-base)}svg{transform-origin:center;position:absolute;top:0;left:0;width:100%;height:100%;transform:translateZ(0)}:host-context([dir=rtl]) svg{transform-origin:calc(100% - center)}[dir=rtl] svg{transform-origin:calc(100% - center)}@supports selector(:dir(rtl)){svg:dir(rtl){transform-origin:calc(100% - center)}}:host(.spinner-lines) line,:host(.spinner-lines-small) line{stroke-width:7px}:host(.spinner-lines-sharp) line,:host(.spinner-lines-sharp-small) line{stroke-width:4px}:host(.spinner-lines) line,:host(.spinner-lines-small) line,:host(.spinner-lines-sharp) line,:host(.spinner-lines-sharp-small) line{stroke-linecap:round;stroke:currentColor}:host(.spinner-lines) svg,:host(.spinner-lines-small) svg,:host(.spinner-lines-sharp) svg,:host(.spinner-lines-sharp-small) svg{animation:spinner-fade-out 1s linear infinite}:host(.spinner-bubbles) svg{animation:spinner-scale-out 1s linear infinite;fill:currentColor}:host(.spinner-circles) svg{animation:spinner-fade-out 1s linear infinite;fill:currentColor}:host(.spinner-crescent) circle{fill:transparent;stroke-width:4px;stroke-dasharray:128px;stroke-dashoffset:82px;stroke:currentColor}:host(.spinner-crescent) svg{animation:spinner-rotate 1s linear infinite}:host(.spinner-dots) circle{stroke-width:0;fill:currentColor}:host(.spinner-dots) svg{animation:spinner-dots 1s linear infinite}:host(.spinner-circular) svg{animation:spinner-circular linear infinite}:host(.spinner-circular) circle{animation:spinner-circular-inner ease-in-out infinite;stroke:currentColor;stroke-dasharray:80px, 200px;stroke-dashoffset:0px;stroke-width:5.6;fill:none}:host(.spinner-paused),:host(.spinner-paused) svg,:host(.spinner-paused) circle{animation-play-state:paused}@keyframes spinner-fade-out{0%{opacity:1}100%{opacity:0}}@keyframes spinner-scale-out{0%{transform:scale(1, 1)}100%{transform:scale(0, 0)}}@keyframes spinner-rotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spinner-dots{0%{transform:scale(1, 1);opacity:0.9}50%{transform:scale(0.4, 0.4);opacity:0.3}100%{transform:scale(1, 1);opacity:0.9}}@keyframes spinner-circular{100%{transform:rotate(360deg)}}@keyframes spinner-circular-inner{0%{stroke-dasharray:1px, 200px;stroke-dashoffset:0px}50%{stroke-dasharray:100px, 200px;stroke-dashoffset:-15px}100%{stroke-dasharray:100px, 200px;stroke-dashoffset:-125px}}";
+
+const Spinner = /*@__PURE__*/ proxyCustomElement(class Spinner extends H {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.color = undefined;
+    this.duration = undefined;
+    this.name = undefined;
+    this.paused = false;
+  }
+  getName() {
+    const spinnerName = this.name || config.get('spinner');
+    const mode = getIonMode(this);
+    if (spinnerName) {
+      return spinnerName;
+    }
+    return mode === 'ios' ? 'lines' : 'circular';
+  }
+  render() {
+    var _a;
+    const self = this;
+    const mode = getIonMode(self);
+    const spinnerName = self.getName();
+    const spinner = (_a = SPINNERS[spinnerName]) !== null && _a !== void 0 ? _a : SPINNERS['lines'];
+    const duration = typeof self.duration === 'number' && self.duration > 10 ? self.duration : spinner.dur;
+    const svgs = [];
+    if (spinner.circles !== undefined) {
+      for (let i = 0; i < spinner.circles; i++) {
+        svgs.push(buildCircle(spinner, duration, i, spinner.circles));
+      }
+    }
+    else if (spinner.lines !== undefined) {
+      for (let i = 0; i < spinner.lines; i++) {
+        svgs.push(buildLine(spinner, duration, i, spinner.lines));
+      }
+    }
+    return (h(Host, { key: '9e08bf306b28bdd76884d353dcaaf31c1bb591f2', class: createColorClasses(self.color, {
+        [mode]: true,
+        [`spinner-${spinnerName}`]: true,
+        'spinner-paused': self.paused || config.getBoolean('_testing'),
+      }), role: "progressbar", style: spinner.elmDuration ? { animationDuration: duration + 'ms' } : {} }, svgs));
+  }
+  static get style() { return spinnerCss; }
+}, [1, "ion-spinner", {
+    "color": [513],
+    "duration": [2],
+    "name": [1],
+    "paused": [4]
+  }]);
+const buildCircle = (spinner, duration, index, total) => {
+  const data = spinner.fn(duration, index, total);
+  data.style['animation-duration'] = duration + 'ms';
+  return (h("svg", { viewBox: data.viewBox || '0 0 64 64', style: data.style }, h("circle", { transform: data.transform || 'translate(32,32)', cx: data.cx, cy: data.cy, r: data.r, style: spinner.elmDuration ? { animationDuration: duration + 'ms' } : {} })));
+};
+const buildLine = (spinner, duration, index, total) => {
+  const data = spinner.fn(duration, index, total);
+  data.style['animation-duration'] = duration + 'ms';
+  return (h("svg", { viewBox: data.viewBox || '0 0 64 64', style: data.style }, h("line", { transform: "translate(32,32)", y1: data.y1, y2: data.y2 })));
+};
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ion-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ion-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Spinner);
+      }
+      break;
+  } });
+}
+
+export { SPINNERS as S, Spinner as a, defineCustomElement as d };