@ionic/core 9.0.1-dev.11787177893.1979eb13 → 9.0.1-dev.11787248963.10a00c73

package/dist/cjs/ion-refresher_2.cjs.entry.js

@@ -3,15 +3,15 @@
  */
 'use strict';
 
-var index = require('./index-uvry__L4.js');
+var index = require('./index-BrVMoqUk.js');
 var cubicBezier = require('./cubic-bezier-DAjy1V-e.js');
-var index$1 = require('./index-zVCah4Uz.js');
-var helpers = require('./helpers-YPQybDph.js');
+var index$1 = require('./index-C8zH6b3d.js');
+var helpers = require('./helpers-Dj5o76mq.js');
 var haptic = require('./haptic-Ch-X4gRx.js');
-var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
-var animation = require('./animation-C0mOHzej.js');
+var ionicGlobal = require('./ionic-global-DvgIzM2F.js');
+var animation = require('./animation-D-OqR4a4.js');
 var config = require('./config-CjUbvdPW.js');
-var index$3 = require('./index-B7zJsYWS.js');
+var index$3 = require('./index-EJLjthTK.js');
 var index$2 = require('./index-wOmugbdg.js');
 var spinnerConfigs = require('./spinner-configs-DxHKnd3-.js');
 require('./dir-zwDPRE5K.js');
@@ -218,114 +218,79 @@ const Refresher = class {
         this.ionStart = index.createEvent(this, "ionStart", 7);
         this.ionPullStart = index.createEvent(this, "ionPullStart", 7);
         this.ionPullEnd = index.createEvent(this, "ionPullEnd", 7);
+        this.appliedStyles = false;
+        this.didStart = false;
+        this.progress = 0;
+        this.pointerDown = false;
+        this.needsCompletion = false;
+        this.didRefresh = false;
+        this.contentFullscreen = false;
+        this.lastVelocityY = 0;
+        this.animations = [];
+        this.nativeRefresher = false;
+        /**
+         * The current state which the refresher is in. The refresher's states include:
+         *
+         * - `inactive` - The refresher is not being pulled down or refreshing and is currently hidden.
+         * - `pulling` - The user is actively pulling down the refresher, but has not reached the point yet that if the user lets go, it'll refresh.
+         * - `cancelling` - The user pulled down the refresher and let go, but did not pull down far enough to kick off the `refreshing` state. After letting go, the refresher is in the `cancelling` state while it is closing, and will go back to the `inactive` state once closed.
+         * - `ready` - The user has pulled down the refresher far enough that if they let go, it'll begin the `refreshing` state.
+         * - `refreshing` - The refresher is actively waiting on the async operation to end. Once the refresh handler calls `complete()` it will begin the `completing` state.
+         * - `completing` - The `refreshing` state has finished and the refresher is in the way of closing itself. Once closed, the refresher will go back to the `inactive` state.
+         */
+        this.state = 1 /* RefresherState.Inactive */;
+        /**
+         * The minimum distance the user must pull down until the
+         * refresher will go into the `refreshing` state.
+         * Does not apply when the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
+        this.pullMin = 60;
+        /**
+         * The maximum distance of the pull until the refresher
+         * will automatically go into the `refreshing` state.
+         * Defaults to the result of `pullMin + 60`.
+         * Does not apply when  the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
+        this.pullMax = this.pullMin + 60;
+        /**
+         * Time it takes to close the refresher.
+         * Does not apply when the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
+        this.closeDuration = '280ms';
+        /**
+         * Time it takes the refresher to snap back to the `refreshing` state.
+         * Does not apply when the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
+        this.snapbackDuration = '280ms';
+        /**
+         * How much to multiply the pull speed by. To slow the pull animation down,
+         * pass a number less than `1`. To speed up the pull, pass a number greater
+         * than `1`. The default value is `1` which is equal to the speed of the cursor.
+         * If a negative value is passed in, the factor will be `1` instead.
+         *
+         * For example, If the value passed is `1.2` and the content is dragged by
+         * `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels
+         * (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
+         * will be `8` pixels, less than the amount the cursor has moved.
+         *
+         * Does not apply when the refresher content uses a spinner,
+         * enabling the native refresher.
+         */
+        this.pullFactor = 1;
+        /**
+         * If `true`, the refresher will be hidden.
+         */
+        this.disabled = false;
     }
-    appliedStyles = false;
-    didStart = false;
-    progress = 0;
-    scrollEl;
-    backgroundContentEl;
-    scrollListenerCallback;
-    gesture;
-    overflowStyles;
-    pointerDown = false;
-    needsCompletion = false;
-    didRefresh = false;
-    contentFullscreen = false;
-    lastVelocityY = 0;
-    elementToTransform;
-    animations = [];
-    nativeRefresher = false;
-    get el() { return index.getElement(this); }
-    /**
-     * The current state which the refresher is in. The refresher's states include:
-     *
-     * - `inactive` - The refresher is not being pulled down or refreshing and is currently hidden.
-     * - `pulling` - The user is actively pulling down the refresher, but has not reached the point yet that if the user lets go, it'll refresh.
-     * - `cancelling` - The user pulled down the refresher and let go, but did not pull down far enough to kick off the `refreshing` state. After letting go, the refresher is in the `cancelling` state while it is closing, and will go back to the `inactive` state once closed.
-     * - `ready` - The user has pulled down the refresher far enough that if they let go, it'll begin the `refreshing` state.
-     * - `refreshing` - The refresher is actively waiting on the async operation to end. Once the refresh handler calls `complete()` it will begin the `completing` state.
-     * - `completing` - The `refreshing` state has finished and the refresher is in the way of closing itself. Once closed, the refresher will go back to the `inactive` state.
-     */
-    state = 1 /* RefresherState.Inactive */;
-    /**
-     * The minimum distance the user must pull down until the
-     * refresher will go into the `refreshing` state.
-     * Does not apply when the refresher content uses a spinner,
-     * enabling the native refresher.
-     */
-    pullMin = 60;
-    /**
-     * The maximum distance of the pull until the refresher
-     * will automatically go into the `refreshing` state.
-     * Defaults to the result of `pullMin + 60`.
-     * Does not apply when  the refresher content uses a spinner,
-     * enabling the native refresher.
-     */
-    pullMax = this.pullMin + 60;
-    /**
-     * Time it takes to close the refresher.
-     * Does not apply when the refresher content uses a spinner,
-     * enabling the native refresher.
-     */
-    closeDuration = '280ms';
-    /**
-     * Time it takes the refresher to snap back to the `refreshing` state.
-     * Does not apply when the refresher content uses a spinner,
-     * enabling the native refresher.
-     */
-    snapbackDuration = '280ms';
-    /**
-     * How much to multiply the pull speed by. To slow the pull animation down,
-     * pass a number less than `1`. To speed up the pull, pass a number greater
-     * than `1`. The default value is `1` which is equal to the speed of the cursor.
-     * If a negative value is passed in, the factor will be `1` instead.
-     *
-     * For example, If the value passed is `1.2` and the content is dragged by
-     * `10` pixels, instead of `10` pixels, the content will be pulled by `12` pixels
-     * (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
-     * will be `8` pixels, less than the amount the cursor has moved.
-     *
-     * Does not apply when the refresher content uses a spinner,
-     * enabling the native refresher.
-     */
-    pullFactor = 1;
-    /**
-     * If `true`, the refresher will be hidden.
-     */
-    disabled = false;
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
         }
     }
-    /**
-     * Emitted when the user lets go of the content and has pulled down
-     * further than the `pullMin` or pulls the content down and exceeds the pullMax.
-     * Updates the refresher state to `refreshing`. The `complete()` method should be
-     * called when the async operation has completed.
-     */
-    ionRefresh;
-    /**
-     * Emitted while the user is pulling down the content and exposing the refresher.
-     */
-    ionPull;
-    // TODO(FW-7044): Remove this in a major release
-    /**
-     * Emitted when the user begins to start pulling down.
-     *
-     * @deprecated Use `ionPullStart` instead.
-     */
-    ionStart;
-    /**
-     * Emitted when the user begins to start pulling down.
-     */
-    ionPullStart;
-    /**
-     * Emitted when the refresher has returned to the inactive state
-     * after a pull gesture. This fires whether the refresh completed
-     * successfully or was canceled.
-     */
-    ionPullEnd;
     async checkNativeRefresher() {
         const useNativeRefresher = await shouldUseNativeRefresher(this.el, ionicGlobal.getIonMode(this));
         if (useNativeRefresher && !this.nativeRefresher) {
@@ -442,7 +407,7 @@ const Refresher = class {
             });
         };
         this.scrollEl.addEventListener('scroll', this.scrollListenerCallback);
-        const { createGesture } = await Promise.resolve().then(function () { return require('./index-DwlRtFZe.js'); });
+        const { createGesture } = await Promise.resolve().then(function () { return require('./index-DRPqwSvU.js'); });
         /**
          * Awaiting the dynamic import yields to the event loop, so the component can
          * disconnect before it resolves. disconnectedCallback clears scrollEl, so a
@@ -511,7 +476,7 @@ const Refresher = class {
                 refreshingCircle.style.setProperty('animation-delay', '-655ms');
             });
         }
-        const { createGesture } = await Promise.resolve().then(function () { return require('./index-DwlRtFZe.js'); });
+        const { createGesture } = await Promise.resolve().then(function () { return require('./index-DRPqwSvU.js'); });
         /**
          * Awaiting the dynamic import yields to the event loop, so the component can
          * disconnect before it resolves. disconnectedCallback clears scrollEl, so a
@@ -618,10 +583,10 @@ const Refresher = class {
         this.checkNativeRefresher();
     }
     /**
-     * Checked here rather than in `connectedCallback`, which with the custom elements
-     * build runs while the element is being inserted, before frameworks like React
-     * assign the slot. Rendering puts `slot="fixed"` on the host, so this is also the
-     * last point where the developer's own markup is still visible.
+     * Validate the slot attribute before rendering, while the host still reflects the
+     * developer's original markup. `connectedCallback` is too early: in the custom
+     * elements build it runs during insertion, before frameworks such as React assign
+     * the slot.
      */
     componentWillLoad() {
         if (this.el.getAttribute('slot') !== 'fixed') {
@@ -661,7 +626,7 @@ const Refresher = class {
                 this.setupNativeRefresher(contentEl);
             }
             else {
-                const { createGesture } = await Promise.resolve().then(function () { return require('./index-DwlRtFZe.js'); });
+                const { createGesture } = await Promise.resolve().then(function () { return require('./index-DRPqwSvU.js'); });
                 /**
                  * Awaiting the dynamic import yields to the event loop, so the component can
                  * disconnect before it resolves. A disconnected contentEl means there is
@@ -988,7 +953,7 @@ const Refresher = class {
     }
     render() {
         const mode = ionicGlobal.getIonMode(this);
-        return (index.h(index.Host, { key: '4eeb3adcc6269264c83087ee6f0318011d6cf5db', slot: "fixed", class: {
+        return (index.h(index.Host, { key: 'fd9c8e51155d56f12148e8eb547e45c05807b4b5', slot: "fixed", class: {
                 [mode]: true,
                 // Used internally for styling
                 [`refresher-${mode}`]: true,
@@ -1001,6 +966,7 @@ const Refresher = class {
                 'refresher-completing': this.state === 32 /* RefresherState.Completing */,
             } }));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "disabled": [{
                 "disabledChanged": 0
@@ -1015,47 +981,8 @@ Refresher.style = {
 const RefresherContent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.customHTMLEnabled = index.config.get('innerHTMLTemplatesEnabled', config.ENABLE_HTML_CONTENT_DEFAULT);
     }
-    customHTMLEnabled = index.config.get('innerHTMLTemplatesEnabled', config.ENABLE_HTML_CONTENT_DEFAULT);
-    get el() { return index.getElement(this); }
-    /**
-     * A static icon or a spinner to display when you begin to pull down.
-     * A spinner name can be provided to gradually show tick marks
-     * when pulling down on iOS devices.
-     */
-    pullingIcon;
-    /**
-     * The text you want to display when you begin to pull down.
-     * `pullingText` can accept either plaintext or HTML as a string.
-     * To display characters normally reserved for HTML, they
-     * must be escaped. For example `<Ionic>` would become
-     * `&lt;Ionic&gt;`
-     *
-     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
-     *
-     * Content is parsed as plaintext by default.
-     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
-     * before custom HTML can be used.
-     */
-    pullingText;
-    /**
-     * An animated SVG spinner that shows when refreshing begins
-     */
-    refreshingSpinner;
-    /**
-     * The text you want to display when performing a refresh.
-     * `refreshingText` can accept either plaintext or HTML as a string.
-     * To display characters normally reserved for HTML, they
-     * must be escaped. For example `<Ionic>` would become
-     * `&lt;Ionic&gt;`
-     *
-     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
-     *
-     * Content is parsed as plaintext by default.
-     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
-     * before custom HTML can be used.
-     */
-    refreshingText;
     componentWillLoad() {
         if (this.pullingIcon === undefined) {
             /**
@@ -1093,6 +1020,7 @@ const RefresherContent = class {
         const mode = ionicGlobal.getIonMode(this);
         return (index.h(index.Host, { key: 'a1546008813bbcfa70f97e9b9025846ee0aed722', class: mode }, index.h("div", { key: '5422771d67fe201e22d4f9d7db6b685f3db5d99d', class: "refresher-pulling" }, this.pullingIcon && hasSpinner && (index.h("div", { key: '5c2b6dfc3f01b42586ea83380548d454b220a7ca', class: "refresher-pulling-icon" }, index.h("div", { key: '2c3799ca3f66960d7081c63c5a0840951f694baf', class: "spinner-arrow-container" }, index.h("ion-spinner", { key: '03f766a9b9354dcb8f6975757a9b882c2eb5cf4a', name: this.pullingIcon, paused: true }), mode === 'md' && this.pullingIcon === 'circular' && (index.h("div", { key: 'e5f4ba7c6a70adb71f8985af0e23aca07d7b005a', class: "arrow-container" }, index.h("ion-icon", { key: 'ddccbd9164ae8daa97178fc53b52f74f1fd298ef', icon: index$2.caretBackSharp, "aria-hidden": "true" })))))), this.pullingIcon && !hasSpinner && (index.h("div", { key: '6fb742f47f9149fa6dc3daefe5aaa77f925da4bd', class: "refresher-pulling-icon" }, index.h("ion-icon", { key: '907657135eeac4c394be1eae4a659664a7bfacb0', icon: this.pullingIcon, lazy: false, "aria-hidden": "true" }))), this.pullingText !== undefined && this.renderPullingText()), index.h("div", { key: 'fb3094b3ed7e100ab9641c3221770889088e27f3', class: "refresher-refreshing" }, this.refreshingSpinner && (index.h("div", { key: 'bc8078f94e7cea3cb6f03a09e98540f0e0b38721', class: "refresher-refreshing-icon" }, index.h("ion-spinner", { key: '8f39524f073aa828e941bcdd4d48e4d5dfc759c6', name: this.refreshingSpinner }))), this.refreshingText !== undefined && this.renderRefreshingText())));
     }
+    get el() { return index.getElement(this); }
 };
 
 exports.ion_refresher = Refresher;

package/dist/cjs/ion-reorder_2.cjs.entry.js

@@ -3,11 +3,11 @@
  */
 'use strict';
 
-var index = require('./index-uvry__L4.js');
+var index = require('./index-BrVMoqUk.js');
 var index$1 = require('./index-wOmugbdg.js');
-var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
-var index$2 = require('./index-zVCah4Uz.js');
-var helpers = require('./helpers-YPQybDph.js');
+var ionicGlobal = require('./ionic-global-DvgIzM2F.js');
+var index$2 = require('./index-C8zH6b3d.js');
+var helpers = require('./helpers-Dj5o76mq.js');
 var haptic = require('./haptic-Ch-X4gRx.js');
 require('./dir-zwDPRE5K.js');
 require('./capacitor-DmA66EwP.js');
@@ -21,7 +21,6 @@ const Reorder = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
-    get el() { return index.getElement(this); }
     onClick(ev) {
         const reorderGroup = this.el.closest('ion-reorder-group');
         ev.preventDefault();
@@ -36,6 +35,7 @@ const Reorder = class {
         const reorderIcon = mode === 'ios' ? index$1.reorderThreeOutline : index$1.reorderTwoSharp;
         return (index.h(index.Host, { key: 'f278c473b4695a6a93565100e4fcaa7f9e3e9ff5', class: mode }, index.h("slot", { key: 'cc26b5ed297f68a0bea82e27e34a7fe945186f4e' }, index.h("ion-icon", { key: '696f5e4c2b09e64bd08abf0d0818b1554cd29737', icon: reorderIcon, lazy: false, class: "reorder-icon", part: "icon", "aria-hidden": "true" }))));
     }
+    get el() { return index.getElement(this); }
 };
 Reorder.style = {
     ios: reorderIosCss(),
@@ -51,61 +51,30 @@ const ReorderGroup = class {
         this.ionReorderStart = index.createEvent(this, "ionReorderStart", 7);
         this.ionReorderMove = index.createEvent(this, "ionReorderMove", 7);
         this.ionReorderEnd = index.createEvent(this, "ionReorderEnd", 7);
+        this.lastToIndex = -1;
+        this.cachedHeights = [];
+        this.scrollElTop = 0;
+        this.scrollElBottom = 0;
+        this.scrollElInitial = 0;
+        this.containerTop = 0;
+        this.containerBottom = 0;
+        this.state = 0 /* ReorderGroupState.Idle */;
+        /**
+         * If `true`, the reorder will be hidden.
+         */
+        this.disabled = true;
     }
-    selectedItemEl;
-    selectedItemHeight;
-    lastToIndex = -1;
-    cachedHeights = [];
-    scrollEl;
-    gesture;
-    scrollElTop = 0;
-    scrollElBottom = 0;
-    scrollElInitial = 0;
-    containerTop = 0;
-    containerBottom = 0;
-    state = 0 /* ReorderGroupState.Idle */;
-    get el() { return index.getElement(this); }
-    /**
-     * If `true`, the reorder will be hidden.
-     */
-    disabled = true;
     disabledChanged() {
         if (this.gesture) {
             this.gesture.enable(!this.disabled);
         }
     }
-    // TODO(FW-6590): Remove this in a major release.
-    /**
-     * Event that needs to be listened to in order to complete the reorder action.
-     * @deprecated Use `ionReorderEnd` instead. If you are accessing
-     * `event.detail.from` or `event.detail.to` and relying on them
-     * being different you should now add checks as they are always emitted
-     * in `ionReorderEnd`, even when they are the same.
-     */
-    ionItemReorder;
-    /**
-     * Event that is emitted when the reorder gesture starts.
-     */
-    ionReorderStart;
-    /**
-     * Event that is emitted as the reorder gesture moves.
-     */
-    ionReorderMove;
-    /**
-     * Event that is emitted when the reorder gesture ends.
-     * The from and to properties are always available, regardless of
-     * if the reorder gesture moved the item. If the item did not change
-     * from its start position, the from and to properties will be the same.
-     * Once the event has been emitted, the `complete()` method then needs
-     * to be called in order to finalize the reorder action.
-     */
-    ionReorderEnd;
     async connectedCallback() {
         const contentEl = index$2.findClosestIonContent(this.el);
         if (contentEl) {
             this.scrollEl = await index$2.getScrollElement(contentEl);
         }
-        this.gesture = (await Promise.resolve().then(function () { return require('./index-DwlRtFZe.js'); })).createGesture({
+        this.gesture = (await Promise.resolve().then(function () { return require('./index-DRPqwSvU.js'); })).createGesture({
             el: this.el,
             gestureName: 'reorder',
             gesturePriority: 110,
@@ -333,6 +302,7 @@ const ReorderGroup = class {
                 'reorder-list-active': this.state !== 0 /* ReorderGroupState.Idle */,
             } }));
     }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "disabled": [{
                 "disabledChanged": 0

package/dist/cjs/ion-ripple-effect.cjs.entry.js

@@ -3,26 +3,25 @@
  */
 'use strict';
 
-var index = require('./index-uvry__L4.js');
-var ionicGlobal = require('./ionic-global-k6hOWWpn.js');
+var index = require('./index-BrVMoqUk.js');
+var ionicGlobal = require('./ionic-global-DvgIzM2F.js');
 
 const rippleEffectCss = () => `:host{left:0;right:0;top:0;bottom:0;position:absolute;contain:strict;pointer-events:none}:host(.unbounded){contain:layout size style}.ripple-effect{border-radius:50%;position:absolute;background-color:currentColor;color:inherit;contain:strict;opacity:0;-webkit-animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;animation:225ms rippleAnimation forwards, 75ms fadeInAnimation forwards;will-change:transform, opacity;pointer-events:none}.fade-out{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1));-webkit-animation:150ms fadeOutAnimation forwards;animation:150ms fadeOutAnimation forwards}@-webkit-keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@keyframes rippleAnimation{from{-webkit-animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);animation-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transform:scale(1);transform:scale(1)}to{-webkit-transform:translate(var(--translate-end)) scale(var(--final-scale, 1));transform:translate(var(--translate-end)) scale(var(--final-scale, 1))}}@-webkit-keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@keyframes fadeInAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0}to{opacity:0.16}}@-webkit-keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}@keyframes fadeOutAnimation{from{-webkit-animation-timing-function:linear;animation-timing-function:linear;opacity:0.16}to{opacity:0}}`;
 
 const RippleEffect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Sets the type of ripple-effect:
+         *
+         * - `bounded`: the ripple effect expands from the user's click position
+         * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
+         *
+         * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
+         * while surfaces for unbounded ripples should have it set to visible.
+         */
+        this.type = 'bounded';
     }
-    get el() { return index.getElement(this); }
-    /**
-     * Sets the type of ripple-effect:
-     *
-     * - `bounded`: the ripple effect expands from the user's click position
-     * - `unbounded`: the ripple effect expands from the center of the button and overflows the container.
-     *
-     * NOTE: Surfaces for bounded ripples should have the overflow property set to hidden,
-     * while surfaces for unbounded ripples should have it set to visible.
-     */
-    type = 'bounded';
     /**
      * Adds the ripple effect to the parent element.
      *
@@ -80,6 +79,7 @@ const RippleEffect = class {
                 unbounded: this.unbounded,
             } }));
     }
+    get el() { return index.getElement(this); }
 };
 const removeRipple = (ripple) => {
     ripple.classList.add('fade-out');