import { __awaiter, __generator } from "tslib";
import { r as registerInstance, d as createEvent, w as writeTask, c as getIonMode, h, e as getElement, H as Host } from './core-feeeff0d.js';
import { b as config } from './config-3c7f3790.js';
import { g as getElementRoot, c as clamp, t as transitionEndAsync, r as raf } from './helpers-8a56ec51.js';
import { c as createAnimation } from './animation-48850358.js';
import { s as sanitizeDOMString } from './index-3476b023.js';
import { S as SPINNERS } from './spinner-configs-354aeceb.js';
import { g as getTimeGivenProgression, P as Point } from './cubic-bezier-2812fda3.js';
var getRefresherAnimationType = function (contentEl) {
    var previousSibling = contentEl.previousElementSibling;
    var hasHeader = previousSibling !== null && previousSibling.tagName === 'ION-HEADER';
    return hasHeader ? 'translate' : 'scale';
};
var createPullingAnimation = function (type, pullingSpinner, refresherEl) {
    return type === 'scale' ? createScaleAnimation(pullingSpinner, refresherEl) : createTranslateAnimation(pullingSpinner, refresherEl);
};
var createBaseAnimation = function (pullingRefresherIcon) {
    var spinner = pullingRefresherIcon.querySelector('ion-spinner');
    var circle = spinner.shadowRoot.querySelector('circle');
    var spinnerArrowContainer = pullingRefresherIcon.querySelector('.spinner-arrow-container');
    var arrowContainer = pullingRefresherIcon.querySelector('.arrow-container');
    var arrow = (arrowContainer) ? arrowContainer.querySelector('ion-icon') : null;
    var baseAnimation = createAnimation()
        .duration(1000)
        .easing('ease-out');
    var spinnerArrowContainerAnimation = createAnimation()
        .addElement(spinnerArrowContainer)
        .keyframes([
        { offset: 0, opacity: '0.3' },
        { offset: 0.45, opacity: '0.3' },
        { offset: 0.55, opacity: '1' },
        { offset: 1, opacity: '1' }
    ]);
    var circleInnerAnimation = createAnimation()
        .addElement(circle)
        .keyframes([
        { offset: 0, strokeDasharray: '1px, 200px' },
        { offset: 0.20, strokeDasharray: '1px, 200px' },
        { offset: 0.55, strokeDasharray: '100px, 200px' },
        { offset: 1, strokeDasharray: '100px, 200px' }
    ]);
    var circleOuterAnimation = createAnimation()
        .addElement(spinner)
        .keyframes([
        { offset: 0, transform: 'rotate(-90deg)' },
        { offset: 1, transform: 'rotate(210deg)' }
    ]);
    /**
     * Only add arrow animation if present
     * this allows users to customize the spinners
     * without errors being thrown
     */
    if (arrowContainer && arrow) {
        var arrowContainerAnimation = createAnimation()
            .addElement(arrowContainer)
            .keyframes([
            { offset: 0, transform: 'rotate(0deg)' },
            { offset: 0.30, transform: 'rotate(0deg)' },
            { offset: 0.55, transform: 'rotate(280deg)' },
            { offset: 1, transform: 'rotate(400deg)' }
        ]);
        var arrowAnimation = createAnimation()
            .addElement(arrow)
            .keyframes([
            { offset: 0, transform: 'translateX(2px) scale(0)' },
            { offset: 0.30, transform: 'translateX(2px) scale(0)' },
            { offset: 0.55, transform: 'translateX(-1.5px) scale(1)' },
            { offset: 1, transform: 'translateX(-1.5px) scale(1)' }
        ]);
        baseAnimation.addAnimation([arrowContainerAnimation, arrowAnimation]);
    }
    return baseAnimation.addAnimation([spinnerArrowContainerAnimation, circleInnerAnimation, circleOuterAnimation]);
};
var createScaleAnimation = function (pullingRefresherIcon, refresherEl) {
    /**
     * Do not take the height of the refresher icon
     * because at this point the DOM has not updated,
     * so the refresher icon is still hidden with
     * display: none.
     * The `ion-refresher` container height
     * is roughly the amount we need to offset
     * the icon by when pulling down.
     */
    var height = refresherEl.clientHeight;
    var spinnerAnimation = createAnimation()
        .addElement(pullingRefresherIcon)
        .keyframes([
        { offset: 0, transform: "scale(0) translateY(-" + height + "px)" },
        { offset: 1, transform: 'scale(1) translateY(100px)' }
    ]);
    return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
};
var createTranslateAnimation = function (pullingRefresherIcon, refresherEl) {
    /**
     * Do not take the height of the refresher icon
     * because at this point the DOM has not updated,
     * so the refresher icon is still hidden with
     * display: none.
     * The `ion-refresher` container height
     * is roughly the amount we need to offset
     * the icon by when pulling down.
     */
    var height = refresherEl.clientHeight;
    var spinnerAnimation = createAnimation()
        .addElement(pullingRefresherIcon)
        .keyframes([
        { offset: 0, transform: "translateY(-" + height + "px)" },
        { offset: 1, transform: 'translateY(100px)' }
    ]);
    return createBaseAnimation(pullingRefresherIcon).addAnimation([spinnerAnimation]);
};
var createSnapBackAnimation = function (pullingRefresherIcon) {
    return createAnimation()
        .duration(125)
        .addElement(pullingRefresherIcon)
        .fromTo('transform', 'translateY(var(--ion-pulling-refresher-translate, 100px))', 'translateY(0px)');
};
var Refresher = /** @class */ (function () {
    function class_1(hostRef) {
        registerInstance(this, hostRef);
        // @ts-ignore
        this.appliedStyles = false;
        // @ts-ignore
        this.didStart = false;
        this.progress = 0;
        this.nativeRefresher = false;
        this.animations = [];
        this.pointerDown = false;
        // @ts-ignore
        this.needsCompletion = false;
        // @ts-ignore
        this.didRefresh = 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 /* Inactive */;
        /**
         * The minimum distance the user must pull down until the
         * refresher will go into the `refreshing` state.
         */
        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`.
         */
        this.pullMax = this.pullMin + 60;
        /**
         * Time it takes to close the refresher.
         */
        this.closeDuration = '280ms';
        /**
         * Time it takes the refresher to to snap back to the `refreshing` state.
         */
        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.
         */
        this.pullFactor = 1;
        /**
         * If `true`, the refresher will be hidden.
         */
        this.disabled = false;
        this.ionRefresh = createEvent(this, "ionRefresh", 7);
        this.ionPull = createEvent(this, "ionPull", 7);
        this.ionStart = createEvent(this, "ionStart", 7);
        this.initialized = createEvent(this, "initialized", 7);
    }
    class_1.prototype.disabledChanged = function () {
        if (this.gesture) {
            this.gesture.setDisabled(this.disabled);
        }
    };
    class_1.prototype.setupMDNativeRefresher = function (contentEl, pullingSpinner, refreshingSpinner) {
        return __awaiter(this, void 0, void 0, function () {
            var circle, pullingRefresherIcon, refreshingCircle, _a;
            var _this = this;
            return __generator(this, function (_b) {
                switch (_b.label) {
                    case 0:
                        circle = getElementRoot(pullingSpinner).querySelector('circle');
                        pullingRefresherIcon = this.el.querySelector('ion-refresher-content .refresher-pulling-icon');
                        refreshingCircle = getElementRoot(refreshingSpinner).querySelector('circle');
                        if (circle !== null && refreshingCircle !== null) {
                            writeTask(function () {
                                circle.style.setProperty('animation', 'none');
                                // This lines up the animation on the refreshing spinner with the pulling spinner
                                refreshingSpinner.style.setProperty('animation-delay', '-655ms');
                                refreshingCircle.style.setProperty('animation-delay', '-655ms');
                            });
                        }
                        _a = this;
                        return [4 /*yield*/, import('./index-624eea58.js')];
                    case 1:
                        _a.gesture = (_b.sent()).createGesture({
                            el: this.scrollEl,
                            gestureName: 'refresher',
                            gesturePriority: 31,
                            direction: 'y',
                            threshold: 5,
                            canStart: function () { return _this.state !== 8 /* Refreshing */ && _this.state !== 32 /* Completing */ && _this.scrollEl.scrollTop === 0; },
                            onStart: function (ev) {
                                ev.data = { animation: undefined, didStart: false, cancelled: false };
                            },
                            onMove: function (ev) {
                                if ((ev.velocityY < 0 && _this.progress === 0 && !ev.data.didStart) || ev.data.cancelled) {
                                    ev.data.cancelled = true;
                                    return;
                                }
                                if (!ev.data.didStart) {
                                    ev.data.didStart = true;
                                    _this.state = 2 /* Pulling */;
                                    writeTask(function () { return _this.scrollEl.style.setProperty('--overflow', 'hidden'); });
                                    var animationType = getRefresherAnimationType(contentEl);
                                    var animation = createPullingAnimation(animationType, pullingRefresherIcon, _this.el);
                                    ev.data.animation = animation;
                                    animation.progressStart(false);
                                    _this.ionStart.emit();
                                    _this.animations.push(animation);
                                    return;
                                }
                                // Since we are using an easing curve, slow the gesture tracking down a bit
                                _this.progress = clamp(0, (ev.deltaY / 180) * 0.5, 1);
                                ev.data.animation.progressStep(_this.progress);
                                _this.ionPull.emit();
                            },
                            onEnd: function (ev) {
                                if (!ev.data.didStart) {
                                    return;
                                }
                                writeTask(function () { return _this.scrollEl.style.removeProperty('--overflow'); });
                                if (_this.progress <= 0.4) {
                                    // this.gesture!.enable(false);
                                    _this.gesture.setDisabled(true);
                                    ev.data.animation
                                        .progressEnd(0, _this.progress, 500)
                                        .onFinish(function () {
                                        _this.animations.forEach(function (ani) { return ani.destroy(); });
                                        _this.animations = [];
                                        // this.gesture!.enable(true);
                                        _this.gesture.setDisabled(false);
                                        _this.state = 1 /* Inactive */;
                                    });
                                    return;
                                }
                                var progress = getTimeGivenProgression(new Point(0, 0), new Point(0, 0), new Point(1, 1), new Point(1, 1), _this.progress);
                                var snapBackAnimation = createSnapBackAnimation(pullingRefresherIcon);
                                _this.animations.push(snapBackAnimation);
                                writeTask(function () { return __awaiter(_this, void 0, void 0, function () {
                                    return __generator(this, function (_a) {
                                        switch (_a.label) {
                                            case 0:
                                                pullingRefresherIcon.style.setProperty('--ion-pulling-refresher-translate', (progress * 100) + "px");
                                                ev.data.animation.progressEnd(1, 1);
                                                return [4 /*yield*/, snapBackAnimation.play()];
                                            case 1:
                                                _a.sent();
                                                this.beginRefresh();
                                                ev.data.animation.destroy();
                                                return [2 /*return*/];
                                        }
                                    });
                                }); });
                            }
                        });
                        this.disabledChanged();
                        return [2 /*return*/];
                }
            });
        });
    };
    class_1.prototype.setupNativeRefresher = function (contentEl) {
        return __awaiter(this, void 0, void 0, function () {
            var pullingSpinner, refreshingSpinner;
            return __generator(this, function (_a) {
                if (this.scrollListenerCallback || !contentEl || this.nativeRefresher || !this.scrollEl) {
                    return [2 /*return*/];
                }
                /**
                 * If using non-native refresher before make sure
                 * we clean up any old CSS. This can happen when
                 * a user manually calls the refresh method in a
                 * component create callback before the native
                 * refresher is setup.
                 */
                this.setCss(0, '', false, '');
                this.nativeRefresher = true;
                pullingSpinner = this.el.querySelector('ion-refresher-content .refresher-pulling ion-spinner');
                refreshingSpinner = this.el.querySelector('ion-refresher-content .refresher-refreshing ion-spinner');
                this.setupMDNativeRefresher(contentEl, pullingSpinner, refreshingSpinner);
                return [2 /*return*/];
            });
        });
    };
    class_1.prototype.connectedCallback = function () {
        return __awaiter(this, void 0, void 0, function () {
            var contentEl, _a;
            return __generator(this, function (_b) {
                switch (_b.label) {
                    case 0:
                        if (this.el.getAttribute('slot') !== 'fixed') {
                            console.error('Make sure you use: <ion-refresher slot="fixed">');
                            return [2 /*return*/];
                        }
                        contentEl = this.el.closest('ion-content');
                        if (!contentEl) {
                            console.error('<ion-refresher> must be used inside an <ion-content>');
                            return [2 /*return*/];
                        }
                        _a = this;
                        return [4 /*yield*/, contentEl.getScrollElement()];
                    case 1:
                        _a.scrollEl = _b.sent();
                        this.backgroundContentEl = getElementRoot(contentEl).querySelector('#background-content');
                        this.setupNativeRefresher(contentEl);
                        this.initialized.emit();
                        return [2 /*return*/];
                }
            });
        });
    };
    class_1.prototype.disconnectedCallback = function () {
        this.destroyNativeRefresher();
        this.scrollEl = undefined;
        if (this.gesture) {
            this.gesture.destroy();
            this.gesture = undefined;
        }
    };
    class_1.prototype.componentDidUpdate = function () {
        this.checkNativeRefresher();
    };
    class_1.prototype.checkNativeRefresher = function () {
        return __awaiter(this, void 0, void 0, function () {
            var contentEl;
            return __generator(this, function (_a) {
                if (!this.nativeRefresher) {
                    contentEl = this.el.closest('ion-content');
                    this.setupNativeRefresher(contentEl);
                }
                return [2 /*return*/];
            });
        });
    };
    class_1.prototype.destroyNativeRefresher = function () {
        if (this.scrollEl && this.scrollListenerCallback) {
            this.scrollEl.removeEventListener('scroll', this.scrollListenerCallback);
            this.scrollListenerCallback = undefined;
        }
        this.nativeRefresher = false;
    };
    class_1.prototype.resetNativeRefresher = function (__el, state) {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                switch (_a.label) {
                    case 0:
                        this.state = state;
                        return [4 /*yield*/, transitionEndAsync(this.el.querySelector('.refresher-refreshing-icon'), 200)];
                    case 1:
                        _a.sent();
                        this.didRefresh = false;
                        this.needsCompletion = false;
                        this.pointerDown = false;
                        this.animations.forEach(function (ani) { return ani.destroy(); });
                        this.animations = [];
                        this.progress = 0;
                        this.state = 1 /* Inactive */;
                        return [2 /*return*/];
                }
            });
        });
    };
    /**
     * Call `complete()` when your async operation has completed.
     * For example, the `refreshing` state is while the app is performing
     * an asynchronous operation, such as receiving more data from an
     * AJAX request. Once the data has been received, you then call this
     * method to signify that the refreshing has completed and to close
     * the refresher. This method also changes the refresher's state from
     * `refreshing` to `completing`.
     */
    class_1.prototype.complete = function () {
        return __awaiter(this, void 0, void 0, function () {
            var _this = this;
            return __generator(this, function (_a) {
                if (this.nativeRefresher) {
                    this.needsCompletion = true;
                    // Do not reset scroll el until user removes pointer from screen
                    if (!this.pointerDown) {
                        raf(function () { return raf(function () { return _this.resetNativeRefresher(undefined, 32 /* Completing */); }); });
                    }
                }
                else {
                    this.close(32 /* Completing */, '120ms');
                }
                return [2 /*return*/];
            });
        });
    };
    /**
     * Changes the refresher's state from `refreshing` to `cancelling`.
     */
    class_1.prototype.cancel = function () {
        return __awaiter(this, void 0, void 0, function () {
            var _this = this;
            return __generator(this, function (_a) {
                if (this.nativeRefresher) {
                    // Do not reset scroll el until user removes pointer from screen
                    if (!this.pointerDown) {
                        raf(function () { return raf(function () { return _this.resetNativeRefresher(undefined, 16 /* Cancelling */); }); });
                    }
                }
                else {
                    this.close(16 /* Cancelling */, '');
                }
                return [2 /*return*/];
            });
        });
    };
    /**
     * A number representing how far down the user has pulled.
     * The number `0` represents the user hasn't pulled down at all. The
     * number `1`, and anything greater than `1`, represents that the user
     * has pulled far enough down that when they let go then the refresh will
     * happen. If they let go and the number is less than `1`, then the
     * refresh will not happen, and the content will return to it's original
     * position.
     */
    class_1.prototype.getProgress = function () {
        return Promise.resolve(this.progress);
    };
    /**
     * programmatically trigger refresh
     *
     */
    class_1.prototype.autoRefresh = function () {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                if (!this.canStart()) {
                    return [2 /*return*/, false];
                }
                if ((this.state & 56 /* _BUSY_ */) !== 0) {
                    return [2 /*return*/, false];
                }
                this.progress = 100;
                this.didStart = true;
                this.ionStart.emit();
                this.beginRefresh();
                return [2 /*return*/, true];
            });
        });
    };
    class_1.prototype.canStart = function () {
        if (!this.scrollEl) {
            return false;
        }
        if (this.state !== 1 /* Inactive */) {
            return false;
        }
        // if the scrollTop is greater than zero then it's
        // not possible to pull the content down yet
        if (this.scrollEl.scrollTop > 0) {
            return false;
        }
        return true;
    };
    class_1.prototype.beginRefresh = function () {
        // assumes we're already back in a zone
        // they pulled down far enough, so it's ready to refresh
        this.state = 8 /* Refreshing */;
        // place the content in a hangout position while it thinks
        this.setCss(this.pullMin, this.snapbackDuration, true, '');
        // emit "refresh" because it was pulled down far enough
        // and they let go to begin refreshing
        this.ionRefresh.emit({
            complete: this.complete.bind(this)
        });
    };
    class_1.prototype.close = function (state, delay) {
        var _this = this;
        // create fallback timer incase something goes wrong with transitionEnd event
        setTimeout(function () {
            _this.state = 1 /* Inactive */;
            _this.progress = 0;
            _this.didStart = false;
            _this.setCss(0, '0ms', false, '');
        }, 600);
        // reset set the styles on the scroll element
        // set that the refresh is actively cancelling/completing
        this.state = state;
        this.setCss(0, this.closeDuration, true, delay);
        // TODO: stop gesture
    };
    class_1.prototype.setCss = function (y, duration, overflowVisible, delay) {
        var _this = this;
        if (this.nativeRefresher) {
            return;
        }
        this.appliedStyles = (y > 0);
        writeTask(function () {
            if (_this.scrollEl && _this.backgroundContentEl) {
                var scrollStyle = _this.scrollEl.style;
                var backgroundStyle = _this.backgroundContentEl.style;
                scrollStyle.transform = backgroundStyle.transform = ((y > 0) ? "translateY(" + y + "px) translateZ(0px)" : '');
                scrollStyle.transitionDuration = backgroundStyle.transitionDuration = duration;
                scrollStyle.transitionDelay = backgroundStyle.transitionDelay = delay;
                scrollStyle.overflow = (overflowVisible ? 'hidden' : '');
            }
        });
    };
    class_1.prototype.render = function () {
        var _a;
        var mode = getIonMode(this);
        return (h(Host, { slot: "fixed", class: (_a = {},
                _a[mode] = true,
                // Used internally for styling
                _a["refresher-" + mode] = true,
                _a['refresher-native'] = this.nativeRefresher,
                _a['refresher-active'] = this.state !== 1 /* Inactive */,
                _a['refresher-pulling'] = this.state === 2 /* Pulling */,
                _a['refresher-ready'] = this.state === 4 /* Ready */,
                _a['refresher-refreshing'] = this.state === 8 /* Refreshing */,
                _a['refresher-cancelling'] = this.state === 16 /* Cancelling */,
                _a['refresher-completing'] = this.state === 32 /* Completing */,
                _a) }));
    };
    Object.defineProperty(class_1.prototype, "el", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(class_1, "watchers", {
        get: function () {
            return {
                "disabled": ["disabledChanged"]
            };
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(class_1, "style", {
        get: function () { return "ion-refresher{left:0;top:0;display:none;position:absolute;width:100%;height:60px;pointer-events:none;z-index:-1}:host-context([dir=rtl]) ion-refresher,[dir=rtl] ion-refresher{left:unset;right:unset;right:0}ion-refresher.refresher-active{display:block}ion-refresher-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;height:100%}.refresher-pulling,.refresher-refreshing{display:none;width:100%}.refresher-pulling-icon,.refresher-refreshing-icon{-webkit-transform-origin:center;transform-origin:center;-webkit-transition:.2s;transition:.2s;font-size:30px;text-align:center}:host-context([dir=rtl]) .refresher-pulling-icon,:host-context([dir=rtl]) .refresher-refreshing-icon,[dir=rtl] .refresher-pulling-icon,[dir=rtl] .refresher-refreshing-icon{-webkit-transform-origin:calc(100% - center);transform-origin:calc(100% - center)}.refresher-pulling-text,.refresher-refreshing-text{font-size:16px;text-align:center}ion-refresher-content .arrow-container{display:none}.refresher-pulling ion-refresher-content .refresher-pulling,.refresher-ready ion-refresher-content .refresher-pulling{display:block}.refresher-ready ion-refresher-content .refresher-pulling-icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.refresher-cancelling ion-refresher-content .refresher-pulling,.refresher-refreshing ion-refresher-content .refresher-refreshing{display:block}.refresher-cancelling ion-refresher-content .refresher-pulling-icon{-webkit-transform:scale(0);transform:scale(0)}.refresher-completing ion-refresher-content .refresher-refreshing{display:block}.refresher-completing ion-refresher-content .refresher-refreshing-icon{-webkit-transform:scale(0);transform:scale(0)}.refresher-native .refresher-pulling-text,.refresher-native .refresher-refreshing-text{display:none}.refresher-ios .refresher-pulling-icon,.refresher-ios .refresher-pulling-text,.refresher-ios .refresher-refreshing-icon,.refresher-ios .refresher-refreshing-text{color:var(--ion-text-color,#000)}.refresher-ios .refresher-refreshing .spinner-crescent circle,.refresher-ios .refresher-refreshing .spinner-lines-ios line,.refresher-ios .refresher-refreshing .spinner-lines-small-ios line{stroke:var(--ion-text-color,#000)}.refresher-ios .refresher-refreshing .spinner-bubbles circle,.refresher-ios .refresher-refreshing .spinner-circles circle,.refresher-ios .refresher-refreshing .spinner-dots circle{fill:var(--ion-text-color,#000)}"; },
        enumerable: true,
        configurable: true
    });
    return class_1;
}());
var RefresherContent = /** @class */ (function () {
    function RefresherContent(hostRef) {
        registerInstance(this, hostRef);
    }
    RefresherContent.prototype.componentWillLoad = function () {
        if (this.pullingIcon === undefined) {
            this.pullingIcon = config.get('refreshingIcon', 'circular');
        }
        if (this.refreshingSpinner === undefined) {
            // const mode = getIonMode(this);
            this.refreshingSpinner = config.get('refreshingSpinner', config.get('spinner', 'circular'));
        }
    };
    RefresherContent.prototype.render = function () {
        var pullingIcon = this.pullingIcon;
        var hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] !== undefined;
        var mode = 'md';
        return (h(Host, { class: mode }, h("div", { class: "refresher-pulling" }, this.pullingIcon && hasSpinner &&
            h("div", { class: "refresher-pulling-icon" }, h("div", { class: "spinner-arrow-container" }, h("ion-spinner", { name: this.pullingIcon, paused: true }), this.pullingIcon === 'circular' &&
                h("div", { class: "arrow-container" }, h("ion-icon", { icon: "arrowBack" })))), this.pullingIcon && !hasSpinner &&
            h("div", { class: "refresher-pulling-icon" }, h("ion-icon", { icon: this.pullingIcon, lazy: false })), this.pullingText &&
            h("div", { class: "refresher-pulling-text", innerHTML: sanitizeDOMString(this.pullingText) })), h("div", { class: "refresher-refreshing" }, this.refreshingSpinner &&
            h("div", { class: "refresher-refreshing-icon" }, h("ion-spinner", { name: this.refreshingSpinner })), this.refreshingText &&
            h("div", { class: "refresher-refreshing-text", innerHTML: sanitizeDOMString(this.refreshingText) }))));
    };
    Object.defineProperty(RefresherContent.prototype, "el", {
        get: function () { return getElement(this); },
        enumerable: true,
        configurable: true
    });
    return RefresherContent;
}());
export { Refresher as ion_refresher, RefresherContent as ion_refresher_content };
