var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        if (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            if (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
import { r as registerInstance, c as createEvent, h, H as Host, e as getElement } from './index-9bc5455c.js';
import { g as getIonMode } from './ionic-global-54ea523e.js';
import { h as hostContext, o as openURL, c as createColorClasses } from './theme-1706d6ff.js';
var flipCardCss = "@-webkit-keyframes fade{0%{opacity:0}100%{opacity:1}}@keyframes fade{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes corner-expand{0%{width:0;opacity:0}100%{width:20px;opacity:1}}@keyframes corner-expand{0%{width:0;opacity:0}100%{width:20px;opacity:1}}@-webkit-keyframes slide-right{0%{opacity:0;-webkit-transform:translateX(-200px);transform:translateX(-200px)}}@keyframes slide-right{0%{opacity:0;-webkit-transform:translateX(-200px);transform:translateX(-200px)}}@keyframes bounce2{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}60%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@-webkit-keyframes bounce2{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}60%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@-webkit-keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}8%{-webkit-transform:scale(0.94);transform:scale(0.94);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}14%{-webkit-transform:scale(0.98);transform:scale(0.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}28%{-webkit-transform:scale(0.92);transform:scale(0.92);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}8%{-webkit-transform:scale(0.94);transform:scale(0.94);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}14%{-webkit-transform:scale(0.98);transform:scale(0.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}28%{-webkit-transform:scale(0.92);transform:scale(0.92);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}:root{--ion-color-primary:#00b7b3;--ion-color-primary-rgb:0, 183, 179;--ion-color-primary-contrast:#ffffff;--ion-color-primary-contrast-rgb:255, 255, 255;--ion-color-primary-shade:#00a19e;--ion-color-primary-tint:#1abebb;--ion-color-secondary:#00B1D0;--ion-color-secondary-rgb:0, 177, 208;--ion-color-secondary-contrast:#ffffff;--ion-color-secondary-contrast-rgb:255, 255, 255;--ion-color-secondary-shade:#009cb7;--ion-color-secondary-tint:#1ab9d5;--ion-color-tertiary:#3b3f3f;--ion-color-tertiary-rgb:76, 110, 121;--ion-color-tertiary-contrast:#ffffff;--ion-color-tertiary-contrast-rgb:255, 255, 255;--ion-color-tertiary-shade:#343737;--ion-color-tertiary-tint:#4f5252;--ion-color-success:#10dc60;--ion-color-success-rgb:16, 220, 96;--ion-color-success-contrast:#fff;--ion-color-success-contrast-rgb:255, 255, 255;--ion-color-success-shade:#0ec254;--ion-color-success-tint:#28e070;--ion-color-warning:#ffce00;--ion-color-warning-rgb:255, 206, 0;--ion-color-warning-contrast:#000;--ion-color-warning-contrast-rgb:0, 0, 0;--ion-color-warning-shade:#e0b500;--ion-color-warning-tint:#ffd31a;--ion-color-danger:#f53d3d;--ion-color-danger-rgb:245, 61, 61;--ion-color-danger-contrast:#fff;--ion-color-danger-contrast-rgb:255, 255, 255;--ion-color-danger-shade:#d83636;--ion-color-danger-tint:#f65050;--ion-color-light:#fdfdfd;--ion-color-light-rgb:244, 244, 244;--ion-color-light-contrast:#000;--ion-color-light-contrast-rgb:0, 0, 0;--ion-color-light-shade:#d7d7d7;--ion-color-light-tint:#f5f5f5;--ion-color-medium:#989aa2;--ion-color-medium-rgb:152, 154, 162;--ion-color-medium-contrast:#000;--ion-color-medium-contrast-rgb:0, 0, 0;--ion-color-medium-shade:#86888f;--ion-color-medium-tint:#a2a4ab;--ion-color-dark:#222;--ion-color-dark-rgb:34, 34, 34;--ion-color-dark-contrast:#fff;--ion-color-dark-contrast-rgb:255, 255, 255;--ion-color-dark-shade:#1e1e1e;--ion-color-dark-tint:#383838;--ion-color-mainPlaces:#c06457;--ion-color-mainPlaces-rgb:192, 100, 87;--ion-color-mainPlaces-contrast:#ffffff;--ion-color-mainPlaces-contrast-rgb:255, 255, 255;--ion-color-mainPlaces-shade:#a9584d;--ion-color-mainPlaces-tint:#c67468;--ion-color-aroundPlaces:#222;--ion-color-aroundPlaces-rgb:34, 34, 34;--ion-color-aroundPlaces-contrast:#fff;--ion-color-aroundPlaces-contrast-rgb:255, 255, 255;--ion-color-aroundPlaces-shade:#1e1e1e;--ion-color-aroundPlaces-tint:#383838;--ion-toolbar-md-background-color:var(--ion-color-primary);--ion-toolbar-md-text-color:#fff;--ion-color-gold:#b9b029}body{margin:0px !important;padding:0px;font-family:\"Raleway\", serif}.hidden{opacity:0}.heartbeat-button{-webkit-animation:heartbeat 1.5s ease-in-out infinite both;animation:heartbeat 1.5s ease-in-out infinite both}p,h1,h2,h3,h4,h5,h6{font-family:\"Nunito\", serif}.title{text-transform:uppercase;font-size:1.2em;font-weight:600}@keyframes fade{0%{opacity:0}100%{opacity:1}}@keyframes corner-expand{0%{width:0;opacity:0}100%{width:20px;opacity:1}}@keyframes slide-right{0%{opacity:0;-webkit-transform:translateX(-200px);transform:translateX(-200px)}}@keyframes bounce2{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}60%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@-webkit-keyframes bounce2{0%,20%,50%,80%,100%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-20px);transform:translateY(-20px)}60%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}}@-webkit-keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}8%{-webkit-transform:scale(0.94);transform:scale(0.94);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}14%{-webkit-transform:scale(0.98);transform:scale(0.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}28%{-webkit-transform:scale(0.92);transform:scale(0.92);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes heartbeat{from{-webkit-transform:scale(1);transform:scale(1);-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}8%{-webkit-transform:scale(0.94);transform:scale(0.94);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}14%{-webkit-transform:scale(0.98);transform:scale(0.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}28%{-webkit-transform:scale(0.92);transform:scale(0.92);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}40%{-webkit-transform:scale(1);transform:scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}:root{--ion-color-primary:#00b7b3;--ion-color-primary-rgb:0, 183, 179;--ion-color-primary-contrast:#ffffff;--ion-color-primary-contrast-rgb:255, 255, 255;--ion-color-primary-shade:#00a19e;--ion-color-primary-tint:#1abebb;--ion-color-secondary:#00B1D0;--ion-color-secondary-rgb:0, 177, 208;--ion-color-secondary-contrast:#ffffff;--ion-color-secondary-contrast-rgb:255, 255, 255;--ion-color-secondary-shade:#009cb7;--ion-color-secondary-tint:#1ab9d5;--ion-color-tertiary:#3b3f3f;--ion-color-tertiary-rgb:76, 110, 121;--ion-color-tertiary-contrast:#ffffff;--ion-color-tertiary-contrast-rgb:255, 255, 255;--ion-color-tertiary-shade:#343737;--ion-color-tertiary-tint:#4f5252;--ion-color-success:#10dc60;--ion-color-success-rgb:16, 220, 96;--ion-color-success-contrast:#fff;--ion-color-success-contrast-rgb:255, 255, 255;--ion-color-success-shade:#0ec254;--ion-color-success-tint:#28e070;--ion-color-warning:#ffce00;--ion-color-warning-rgb:255, 206, 0;--ion-color-warning-contrast:#000;--ion-color-warning-contrast-rgb:0, 0, 0;--ion-color-warning-shade:#e0b500;--ion-color-warning-tint:#ffd31a;--ion-color-danger:#f53d3d;--ion-color-danger-rgb:245, 61, 61;--ion-color-danger-contrast:#fff;--ion-color-danger-contrast-rgb:255, 255, 255;--ion-color-danger-shade:#d83636;--ion-color-danger-tint:#f65050;--ion-color-light:#fdfdfd;--ion-color-light-rgb:244, 244, 244;--ion-color-light-contrast:#000;--ion-color-light-contrast-rgb:0, 0, 0;--ion-color-light-shade:#d7d7d7;--ion-color-light-tint:#f5f5f5;--ion-color-medium:#989aa2;--ion-color-medium-rgb:152, 154, 162;--ion-color-medium-contrast:#000;--ion-color-medium-contrast-rgb:0, 0, 0;--ion-color-medium-shade:#86888f;--ion-color-medium-tint:#a2a4ab;--ion-color-dark:#222;--ion-color-dark-rgb:34, 34, 34;--ion-color-dark-contrast:#fff;--ion-color-dark-contrast-rgb:255, 255, 255;--ion-color-dark-shade:#1e1e1e;--ion-color-dark-tint:#383838;--ion-color-mainPlaces:#c06457;--ion-color-mainPlaces-rgb:192, 100, 87;--ion-color-mainPlaces-contrast:#ffffff;--ion-color-mainPlaces-contrast-rgb:255, 255, 255;--ion-color-mainPlaces-shade:#a9584d;--ion-color-mainPlaces-tint:#c67468;--ion-color-aroundPlaces:#222;--ion-color-aroundPlaces-rgb:34, 34, 34;--ion-color-aroundPlaces-contrast:#fff;--ion-color-aroundPlaces-contrast-rgb:255, 255, 255;--ion-color-aroundPlaces-shade:#1e1e1e;--ion-color-aroundPlaces-tint:#383838;--ion-toolbar-md-background-color:var(--ion-color-primary);--ion-toolbar-md-text-color:#fff;--ion-color-gold:#b9b029}body{margin:0px !important;padding:0px;font-family:\"Raleway\", serif}.hidden{opacity:0}.heartbeat-button{-webkit-animation:heartbeat 1.5s ease-in-out infinite both;animation:heartbeat 1.5s ease-in-out infinite both}p,h1,h2,h3,h4,h5,h6{font-family:\"Nunito\", serif}.title{text-transform:uppercase;font-size:1.2em;font-weight:600}flip-card{}flip-card .flip-container{width:100%;height:100%;min-height:220px;-webkit-perspective:1000px;perspective:1000px;overflow:hidden;}flip-card .flip-container .flipper{width:100%;height:100%;-webkit-transition:0.6s;transition:0.6s;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}flip-card .flip-container .flipper .front{z-index:2;-webkit-transform:rotateY(0deg);transform:rotateY(0deg);height:100%;width:100%;background-position:center;background-size:cover}flip-card .flip-container .flipper .back{padding:16px;height:100%;width:100%;-webkit-transform:rotateY(180deg);transform:rotateY(180deg);overflow:auto;background-position:center;background-size:cover}flip-card .flip-container .flipper .front,flip-card .flip-container .flipper .back{font-family:\"Nunito\", serif;font-size:1em;position:absolute;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;background-color:#ecf0f1;-webkit-backface-visibility:hidden;backface-visibility:hidden;padding:10px}flip-card .flip-container .flipper .front .icon-span,flip-card .flip-container .flipper .back .icon-span{margin-top:-9%;margin-right:8px}flip-card .flip-container .flipper .front .icon-span ion-icon,flip-card .flip-container .flipper .back .icon-span ion-icon{float:right}flip-card .flip-container .flipper .flip-button{position:absolute;bottom:-26px}flip-card .flip-container .flipper .flip-button ion-icon{position:absolute;font-size:2em;bottom:26px}flip-card .flip-container .flipper .front-flip-button{right:4px}flip-card .flip-container .flipper .back-flip-button{left:4px}flip-card .flip-container.flipped .flipper{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}";
var FlipCard = /** @class */ (function () {
    function FlipCard(hostRef) {
        registerInstance(this, hostRef);
        this.frontFaceFlipped = createEvent(this, "frontFaceFlipped", 7);
        this.backFaceFlipped = createEvent(this, "backFaceFlipped", 7);
        // Properties
        this.demoOnStart = true;
        this.demoDelayOnStart = 1500;
        this.demoDuration = 1500;
        this.switchCard = false;
        this.frontImage = '';
        this.showBackImage = false;
        this.showFrontFlipButton = true;
        this.showBackFlipButton = true;
        this.backImage = '';
        this.frontIconColor = 'light';
        this.backIconColor = 'light';
        // States
        this.flipped = false;
    }
    // Watch
    FlipCard.prototype.switch = function (newValue, oldValue) {
        var _this = this;
        if (!oldValue) {
            setTimeout(function () {
                _this.flip();
            }, 1000);
        }
    };
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    /**
     * Override
     */
    FlipCard.prototype.componentDidLoad = function () {
        var _this = this;
        // Play a little demo if required
        if (this.demoOnStart) {
            setTimeout(function () {
                _this.flip();
            }, this.demoDelayOnStart);
            setTimeout(function () {
                _this.flip();
            }, (this.demoDuration + this.demoDelayOnStart));
        }
    };
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * The user flips the card by clicking on it
     */
    FlipCard.prototype.flip = function () {
        this.flipped = !this.flipped;
        this.flipped ? this.frontFaceFlipped.emit() : this.backFaceFlipped.emit();
    };
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    FlipCard.prototype.render = function () {
        var _this = this;
        return (h("div", { class: 'flip-container' + (this.flipped ? ' flipped' : ''), onClick: function () { return _this.flip(); } }, h("div", { class: 'flipper' }, h("div", { style: { backgroundImage: 'url(' + this.frontImage + ')' }, class: 'front' }, this.showFrontFlipButton &&
            h("ion-fab", { class: 'flip-button front-flip-button' }, h("ion-fab-button", { color: 'secondary' }, h("ion-icon", { name: 'arrow-redo-outline', color: this.frontIconColor })))), this.showBackImage
            ? h("div", { style: { backgroundImage: 'url(' + this.backImage + ')' }, class: 'back' }, this.showBackFlipButton
                ? h("ion-fab", { class: 'flip-button back-flip-button' }, h("ion-fab-button", { color: 'secondary' }, h("ion-icon", { name: 'arrow-undo-outline', color: this.frontIconColor })))
                : '')
            : h("div", { class: 'back' }, h("span", null, this.details), h("span", { class: 'icon-span' }, this.showBackFlipButton &&
                h("ion-fab", { class: 'flip-button back-flip-button' }, h("ion-fab-button", { color: 'secondary' }, h("ion-icon", { name: 'arrow-undo-outline', color: this.backIconColor }))))))));
    };
    Object.defineProperty(FlipCard, "watchers", {
        get: function () {
            return {
                "switchCard": ["switch"]
            };
        },
        enumerable: false,
        configurable: true
    });
    return FlipCard;
}());
FlipCard.style = flipCardCss;
var fabCss = ":host{position:absolute;z-index:999}:host(.fab-horizontal-center){left:50%;margin-left:-28px}:host-context([dir=rtl]):host(.fab-horizontal-center),:host-context([dir=rtl]).fab-horizontal-center{left:unset;right:unset;right:50%}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.fab-horizontal-center){margin-left:unset;-webkit-margin-start:-28px;margin-inline-start:-28px}}:host(.fab-horizontal-start){left:calc(10px + var(--ion-safe-area-left, 0px))}:host-context([dir=rtl]):host(.fab-horizontal-start),:host-context([dir=rtl]).fab-horizontal-start{left:unset;right:unset;right:calc(10px + var(--ion-safe-area-left, 0px))}:host(.fab-horizontal-end){right:calc(10px + var(--ion-safe-area-right, 0px))}:host-context([dir=rtl]):host(.fab-horizontal-end),:host-context([dir=rtl]).fab-horizontal-end{left:unset;right:unset;left:calc(10px + var(--ion-safe-area-right, 0px))}:host(.fab-vertical-top){top:10px}:host(.fab-vertical-top.fab-edge){top:-28px}:host(.fab-vertical-bottom){bottom:10px}:host(.fab-vertical-bottom.fab-edge){bottom:-28px}:host(.fab-vertical-center){margin-top:-28px;top:50%}";
var Fab = /** @class */ (function () {
    function class_1(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        /**
         * If `true`, the fab will display on the edge of the header if
         * `vertical` is `"top"`, and on the edge of the footer if
         * it is `"bottom"`. Should be used with a `fixed` slot.
         */
        this.edge = false;
        /**
         * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.
         * That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
         */
        this.activated = false;
        this.onClick = function () {
            var hasList = !!_this.el.querySelector('ion-fab-list');
            var getButton = _this.getFab();
            var isButtonDisabled = getButton && getButton.disabled;
            if (hasList && !isButtonDisabled) {
                _this.activated = !_this.activated;
            }
        };
    }
    class_1.prototype.activatedChanged = function () {
        var activated = this.activated;
        var fab = this.getFab();
        if (fab) {
            fab.activated = activated;
        }
        Array.from(this.el.querySelectorAll('ion-fab-list')).forEach(function (list) {
            list.activated = activated;
        });
    };
    class_1.prototype.componentDidLoad = function () {
        if (this.activated) {
            this.activatedChanged();
        }
    };
    /**
     * Close an active FAB list container.
     */
    class_1.prototype.close = function () {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                this.activated = false;
                return [2 /*return*/];
            });
        });
    };
    class_1.prototype.getFab = function () {
        return this.el.querySelector('ion-fab-button');
    };
    class_1.prototype.render = function () {
        var _a;
        var _b = this, horizontal = _b.horizontal, vertical = _b.vertical, edge = _b.edge;
        var mode = getIonMode(this);
        return (h(Host, { onClick: this.onClick, class: (_a = {},
                _a[mode] = true,
                _a["fab-horizontal-" + horizontal] = horizontal !== undefined,
                _a["fab-vertical-" + vertical] = vertical !== undefined,
                _a['fab-edge'] = edge,
                _a) }, h("slot", null)));
    };
    Object.defineProperty(class_1.prototype, "el", {
        get: function () { return getElement(this); },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(class_1, "watchers", {
        get: function () {
            return {
                "activated": ["activatedChanged"]
            };
        },
        enumerable: false,
        configurable: true
    });
    return class_1;
}());
Fab.style = fabCss;
var fabButtonIosCss = ":host{--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--background-hover:var(--ion-color-primary-contrast, #fff);--background-hover-opacity:.08;--transition:background-color, opacity 100ms linear;--ripple-color:currentColor;--border-radius:50%;--border-width:0;--border-style:none;--border-color:initial;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:56px;height:56px;font-size:14px;text-align:center;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:var(--border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;-webkit-transform:var(--transform);transform:var(--transform);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);background-clip:padding-box;color:var(--color);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:strict;cursor:pointer;overflow:hidden;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}::slotted(ion-icon){line-height:1}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{left:0;right:0;top:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-transition:all ease-in-out 300ms;transition:all ease-in-out 300ms;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;z-index:1}:host(.fab-button-disabled){cursor:default;opacity:0.5;pointer-events:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-activated) .button-native{color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}::slotted(ion-icon){line-height:1}:host(.fab-button-small){margin-left:8px;margin-right:8px;margin-top:8px;margin-bottom:8px;width:40px;height:40px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.fab-button-small){margin-left:unset;margin-right:unset;-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px}}.close-icon{margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;left:0;right:0;top:0;position:absolute;height:100%;-webkit-transform:scale(0.4) rotateZ(-45deg);transform:scale(0.4) rotateZ(-45deg);-webkit-transition:all ease-in-out 300ms;transition:all ease-in-out 300ms;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;font-size:var(--close-icon-font-size);opacity:0;z-index:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.close-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host(.fab-button-close-active) .close-icon{-webkit-transform:scale(1) rotateZ(0deg);transform:scale(1) rotateZ(0deg);opacity:1}:host(.fab-button-close-active) .button-inner{-webkit-transform:scale(0.4) rotateZ(45deg);transform:scale(0.4) rotateZ(45deg);opacity:0}ion-ripple-effect{color:var(--ripple-color)}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.fab-button-translucent) .button-native{-webkit-backdrop-filter:var(--backdrop-filter);backdrop-filter:var(--backdrop-filter)}}:host(.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{--background:var(--ion-color-primary, #3880ff);--background-activated:var(--ion-color-primary-shade, #3171e0);--background-focused:var(--ion-color-primary-shade, #3171e0);--background-hover:var(--ion-color-primary-tint, #4c8dff);--background-activated-opacity:1;--background-focused-opacity:1;--background-hover-opacity:1;--color:var(--ion-color-primary-contrast, #fff);--box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);--transition:0.2s transform cubic-bezier(0.25, 1.11, 0.78, 1.59);--close-icon-font-size:28px}:host(.ion-activated){--box-shadow:0 4px 16px rgba(0, 0, 0, 0.12);--transform:scale(1.1);--transition:0.2s transform ease-out}::slotted(ion-icon){font-size:28px}:host(.fab-button-in-list){--background:var(--ion-color-light, #f4f5f8);--background-activated:var(--ion-color-light-shade, #d7d8da);--background-focused:var(--background-activated);--background-hover:var(--ion-color-light-tint, #f5f6f9);--color:var(--ion-color-light-contrast, #000);--color-activated:var(--ion-color-light-contrast, #000);--color-focused:var(--color-activated);--transition:transform 200ms ease 10ms, opacity 200ms ease 10ms}:host(.fab-button-in-list) ::slotted(ion-icon){font-size:18px}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-shade)}:host(.ion-color.ion-focused) .button-native,:host(.ion-color.ion-activated) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .button-native::after,:host(.ion-color.ion-activated) .button-native::after{background:var(--ion-color-shade)}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-contrast)}:host(.ion-color:hover) .button-native::after{background:var(--ion-color-tint)}}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.fab-button-translucent){--background:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.9);--background-hover:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.8);--background-focused:rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.82);--backdrop-filter:saturate(180%) blur(20px)}:host(.fab-button-translucent-in-list){--background:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.9);--background-hover:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.8);--background-focused:rgba(var(--ion-color-light-rgb, 244, 245, 248), 0.82)}}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){@media (any-hover: hover){:host(.fab-button-translucent.ion-color:hover) .button-native{background:rgba(var(--ion-color-base-rgb), 0.8)}}:host(.ion-color.fab-button-translucent) .button-native{background:rgba(var(--ion-color-base-rgb), 0.9)}:host(.ion-color.ion-focused.fab-button-translucent) .button-native,:host(.ion-color.ion-activated.fab-button-translucent) .button-native{background:var(--ion-color-base)}}";
var fabButtonMdCss = ":host{--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--background-hover:var(--ion-color-primary-contrast, #fff);--background-hover-opacity:.08;--transition:background-color, opacity 100ms linear;--ripple-color:currentColor;--border-radius:50%;--border-width:0;--border-style:none;--border-color:initial;--padding-top:0;--padding-end:0;--padding-bottom:0;--padding-start:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;display:block;width:56px;height:56px;font-size:14px;text-align:center;text-overflow:ellipsis;text-transform:none;white-space:nowrap;-webkit-font-kerning:none;font-kerning:none}.button-native{border-radius:var(--border-radius);padding-left:var(--padding-start);padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;display:block;position:relative;width:100%;height:100%;-webkit-transform:var(--transform);transform:var(--transform);-webkit-transition:var(--transition);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);background-clip:padding-box;color:var(--color);-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);contain:strict;cursor:pointer;overflow:hidden;z-index:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-box-sizing:border-box;box-sizing:border-box}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.button-native{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--padding-start);padding-inline-start:var(--padding-start);-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}::slotted(ion-icon){line-height:1}.button-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0}.button-inner{left:0;right:0;top:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-flow:row nowrap;flex-flow:row nowrap;-ms-flex-negative:0;flex-shrink:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-transition:all ease-in-out 300ms;transition:all ease-in-out 300ms;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;z-index:1}:host(.fab-button-disabled){cursor:default;opacity:0.5;pointer-events:none}@media (any-hover: hover){:host(:hover) .button-native{color:var(--color-hover)}:host(:hover) .button-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}}:host(.ion-focused) .button-native{color:var(--color-focused)}:host(.ion-focused) .button-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.ion-activated) .button-native{color:var(--color-activated)}:host(.ion-activated) .button-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}::slotted(ion-icon){line-height:1}:host(.fab-button-small){margin-left:8px;margin-right:8px;margin-top:8px;margin-bottom:8px;width:40px;height:40px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){:host(.fab-button-small){margin-left:unset;margin-right:unset;-webkit-margin-start:8px;margin-inline-start:8px;-webkit-margin-end:8px;margin-inline-end:8px}}.close-icon{margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;left:0;right:0;top:0;position:absolute;height:100%;-webkit-transform:scale(0.4) rotateZ(-45deg);transform:scale(0.4) rotateZ(-45deg);-webkit-transition:all ease-in-out 300ms;transition:all ease-in-out 300ms;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;font-size:var(--close-icon-font-size);opacity:0;z-index:1}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.close-icon{margin-left:unset;margin-right:unset;-webkit-margin-start:auto;margin-inline-start:auto;-webkit-margin-end:auto;margin-inline-end:auto}}:host(.fab-button-close-active) .close-icon{-webkit-transform:scale(1) rotateZ(0deg);transform:scale(1) rotateZ(0deg);opacity:1}:host(.fab-button-close-active) .button-inner{-webkit-transform:scale(0.4) rotateZ(45deg);transform:scale(0.4) rotateZ(45deg);opacity:0}ion-ripple-effect{color:var(--ripple-color)}@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))){:host(.fab-button-translucent) .button-native{-webkit-backdrop-filter:var(--backdrop-filter);backdrop-filter:var(--backdrop-filter)}}:host(.ion-color) .button-native{background:var(--ion-color-base);color:var(--ion-color-contrast)}:host{--background:var(--ion-color-primary, #3880ff);--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.24;--background-hover-opacity:.08;--color:var(--ion-color-primary-contrast, #fff);--box-shadow:0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);--transition:box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1), background-color 280ms cubic-bezier(0.4, 0, 0.2, 1), color 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 15ms linear 30ms, transform 270ms cubic-bezier(0, 0, 0.2, 1) 0ms;--close-icon-font-size:24px}:host(.ion-activated){--box-shadow:0 7px 8px -4px rgba(0, 0, 0, 0.2), 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12)}::slotted(ion-icon){font-size:24px}:host(.fab-button-in-list){--color:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);--color-activated:rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);--color-focused:var(--color-activated);--background:var(--ion-color-light, #f4f5f8);--background-activated:transparent;--background-focused:var(--ion-color-light-shade, #d7d8da);--background-hover:var(--ion-color-light-tint, #f5f6f9)}:host(.fab-button-in-list) ::slotted(ion-icon){font-size:18px}:host(.ion-color.ion-focused) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-focused) .button-native::after{background:var(--ion-color-contrast)}:host(.ion-color.ion-activated) .button-native{color:var(--ion-color-contrast)}:host(.ion-color.ion-activated) .button-native::after{background:transparent}@media (any-hover: hover){:host(.ion-color:hover) .button-native{color:var(--ion-color-contrast)}:host(.ion-color:hover) .button-native::after{background:var(--ion-color-contrast)}}";
var FabButton = /** @class */ (function () {
    function FabButton(hostRef) {
        var _this = this;
        registerInstance(this, hostRef);
        this.ionFocus = createEvent(this, "ionFocus", 7);
        this.ionBlur = createEvent(this, "ionBlur", 7);
        /**
         * If `true`, the fab button will be show a close icon.
         */
        this.activated = false;
        /**
         * If `true`, the user cannot interact with the fab button.
         */
        this.disabled = false;
        /**
         * When using a router, it specifies the transition direction when navigating to
         * another page using `href`.
         */
        this.routerDirection = 'forward';
        /**
         * If `true`, the fab button will show when in a fab-list.
         */
        this.show = false;
        /**
         * If `true`, the fab button will be translucent.
         * Only applies when the mode is `"ios"` and the device supports
         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
         */
        this.translucent = false;
        /**
         * The type of the button.
         */
        this.type = 'button';
        /**
         * The icon name to use for the close icon. This will appear when the fab button
         * is pressed. Only applies if it is the main button inside of a fab containing a
         * fab list.
         */
        this.closeIcon = 'close';
        this.onFocus = function () {
            _this.ionFocus.emit();
        };
        this.onBlur = function () {
            _this.ionBlur.emit();
        };
    }
    FabButton.prototype.render = function () {
        var _a;
        var _this = this;
        var _b = this, el = _b.el, disabled = _b.disabled, color = _b.color, href = _b.href, activated = _b.activated, show = _b.show, translucent = _b.translucent, size = _b.size;
        var inList = hostContext('ion-fab-list', el);
        var mode = getIonMode(this);
        var TagType = href === undefined ? 'button' : 'a';
        var attrs = (TagType === 'button')
            ? { type: this.type }
            : {
                download: this.download,
                href: href,
                rel: this.rel,
                target: this.target
            };
        return (h(Host, { "aria-disabled": disabled ? 'true' : null, class: createColorClasses(color, (_a = {},
                _a[mode] = true,
                _a['fab-button-in-list'] = inList,
                _a['fab-button-translucent-in-list'] = inList && translucent,
                _a['fab-button-close-active'] = activated,
                _a['fab-button-show'] = show,
                _a['fab-button-disabled'] = disabled,
                _a['fab-button-translucent'] = translucent,
                _a['ion-activatable'] = true,
                _a['ion-focusable'] = true,
                _a["fab-button-" + size] = size !== undefined,
                _a)) }, h(TagType, Object.assign({}, attrs, { class: "button-native", part: "native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: function (ev) { return openURL(href, ev, _this.routerDirection, _this.routerAnimation); } }), h("ion-icon", { icon: this.closeIcon, part: "close-icon", class: "close-icon", lazy: false }), h("span", { class: "button-inner" }, h("slot", null)), mode === 'md' && h("ion-ripple-effect", null))));
    };
    Object.defineProperty(FabButton.prototype, "el", {
        get: function () { return getElement(this); },
        enumerable: false,
        configurable: true
    });
    return FabButton;
}());
FabButton.style = {
    ios: fabButtonIosCss,
    md: fabButtonMdCss
};
export { FlipCard as flip_card, Fab as ion_fab, FabButton as ion_fab_button };
