import { r as registerInstance, c as createEvent, h, d as getIonMode, H as Host, e as getElement } from './core-880715f2.js';
import { h as hostContext, o as openURL, c as createColorClasses } from './theme-215399f6.js';

const FlipCard = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        // 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;
        this.frontFaceFlipped = createEvent(this, "frontFaceFlipped", 7);
        this.backFaceFlipped = createEvent(this, "backFaceFlipped", 7);
    }
    // Watch
    switch(newValue, oldValue) {
        if (!oldValue) {
            setTimeout(() => {
                this.flip();
            }, 1000);
        }
    }
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    /**
     * Override
     */
    componentDidLoad() {
        // Play a little demo if required
        if (this.demoOnStart) {
            setTimeout(() => {
                this.flip();
            }, this.demoDelayOnStart);
            setTimeout(() => {
                this.flip();
            }, (this.demoDuration + this.demoDelayOnStart));
        }
    }
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * The user flips the card by clicking on it
     */
    flip() {
        this.flipped = !this.flipped;
        this.flipped ? this.frontFaceFlipped.emit() : this.backFaceFlipped.emit();
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: 'flip-container' + (this.flipped ? ' flipped' : ''), onClick: () => 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 }))))))));
    }
    static get watchers() { return {
        "switchCard": ["switch"]
    }; }
    static get style() { return "html.ios{--ion-default-font:-apple-system,BlinkMacSystemFont,\"Helvetica Neue\",\"Roboto\",sans-serif}html.md{--ion-default-font:\"Roboto\",\"Helvetica Neue\",sans-serif}html{--ion-font-family:var(--ion-default-font)}body{background:var(--ion-background-color)}body.backdrop-no-scroll{overflow:hidden}ion-modal.modal-card .ion-page>ion-header>ion-toolbar:first-child{padding-top:0}.ion-color-primary{--ion-color-base:var(--ion-color-primary,#3880ff)!important;--ion-color-base-rgb:var(--ion-color-primary-rgb,56,128,255)!important;--ion-color-contrast:var(--ion-color-primary-contrast,#fff)!important;--ion-color-contrast-rgb:var(--ion-color-primary-contrast-rgb,255,255,255)!important;--ion-color-shade:var(--ion-color-primary-shade,#3171e0)!important;--ion-color-tint:var(--ion-color-primary-tint,#4c8dff)!important}.ion-color-secondary{--ion-color-base:var(--ion-color-secondary,#3dc2ff)!important;--ion-color-base-rgb:var(--ion-color-secondary-rgb,61,194,255)!important;--ion-color-contrast:var(--ion-color-secondary-contrast,#fff)!important;--ion-color-contrast-rgb:var(--ion-color-secondary-contrast-rgb,255,255,255)!important;--ion-color-shade:var(--ion-color-secondary-shade,#36abe0)!important;--ion-color-tint:var(--ion-color-secondary-tint,#50c8ff)!important}.ion-color-tertiary{--ion-color-base:var(--ion-color-tertiary,#5260ff)!important;--ion-color-base-rgb:var(--ion-color-tertiary-rgb,82,96,255)!important;--ion-color-contrast:var(--ion-color-tertiary-contrast,#fff)!important;--ion-color-contrast-rgb:var(--ion-color-tertiary-contrast-rgb,255,255,255)!important;--ion-color-shade:var(--ion-color-tertiary-shade,#4854e0)!important;--ion-color-tint:var(--ion-color-tertiary-tint,#6370ff)!important}.ion-color-success{--ion-color-base:var(--ion-color-success,#2dd36f)!important;--ion-color-base-rgb:var(--ion-color-success-rgb,45,211,111)!important;--ion-color-contrast:var(--ion-color-success-contrast,#fff)!important;--ion-color-contrast-rgb:var(--ion-color-success-contrast-rgb,255,255,255)!important;--ion-color-shade:var(--ion-color-success-shade,#28ba62)!important;--ion-color-tint:var(--ion-color-success-tint,#42d77d)!important}.ion-color-warning{--ion-color-base:var(--ion-color-warning,#ffc409)!important;--ion-color-base-rgb:var(--ion-color-warning-rgb,255,196,9)!important;--ion-color-contrast:var(--ion-color-warning-contrast,#000)!important;--ion-color-contrast-rgb:var(--ion-color-warning-contrast-rgb,0,0,0)!important;--ion-color-shade:var(--ion-color-warning-shade,#e0ac08)!important;--ion-color-tint:var(--ion-color-warning-tint,#ffca22)!important}.ion-color-danger{--ion-color-base:var(--ion-color-danger,#eb445a)!important;--ion-color-base-rgb:var(--ion-color-danger-rgb,235,68,90)!important;--ion-color-contrast:var(--ion-color-danger-contrast,#fff)!important;--ion-color-contrast-rgb:var(--ion-color-danger-contrast-rgb,255,255,255)!important;--ion-color-shade:var(--ion-color-danger-shade,#cf3c4f)!important;--ion-color-tint:var(--ion-color-danger-tint,#ed576b)!important}.ion-color-light{--ion-color-base:var(--ion-color-light,#f4f5f8)!important;--ion-color-base-rgb:var(--ion-color-light-rgb,244,245,248)!important;--ion-color-contrast:var(--ion-color-light-contrast,#000)!important;--ion-color-contrast-rgb:var(--ion-color-light-contrast-rgb,0,0,0)!important;--ion-color-shade:var(--ion-color-light-shade,#d7d8da)!important;--ion-color-tint:var(--ion-color-light-tint,#f5f6f9)!important}.ion-color-medium{--ion-color-base:var(--ion-color-medium,#92949c)!important;--ion-color-base-rgb:var(--ion-color-medium-rgb,146,148,156)!important;--ion-color-contrast:var(--ion-color-medium-contrast,#fff)!important;--ion-color-contrast-rgb:var(--ion-color-medium-contrast-rgb,255,255,255)!important;--ion-color-shade:var(--ion-color-medium-shade,#808289)!important;--ion-color-tint:var(--ion-color-medium-tint,#9d9fa6)!important}.ion-color-dark{--ion-color-base:var(--ion-color-dark,#222428)!important;--ion-color-base-rgb:var(--ion-color-dark-rgb,34,36,40)!important;--ion-color-contrast:var(--ion-color-dark-contrast,#fff)!important;--ion-color-contrast-rgb:var(--ion-color-dark-contrast-rgb,255,255,255)!important;--ion-color-shade:var(--ion-color-dark-shade,#1e2023)!important;--ion-color-tint:var(--ion-color-dark-tint,#383a3e)!important}.ion-page{left:0;right:0;top:0;bottom:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;contain:layout size style;overflow:hidden;z-index:0}.split-pane-visible>.ion-page.split-pane-main{position:relative}.ion-page-hidden,[hidden],ion-action-sheet-controller,ion-alert-controller,ion-loading-controller,ion-menu-controller,ion-modal-controller,ion-nav-controller,ion-picker-controller,ion-popover-controller,ion-route,ion-route-redirect,ion-router,ion-select-option,ion-toast-controller{display:none!important}.ion-page-invisible{opacity:0}.can-go-back>ion-header ion-back-button{display:block}html.plt-ios.plt-hybrid,html.plt-ios.plt-pwa{--ion-statusbar-padding:20px}\@supports (padding-top:20px){html{--ion-safe-area-top:var(--ion-statusbar-padding)}}\@supports (padding-top:constant(safe-area-inset-top)){html{--ion-safe-area-top:constant(safe-area-inset-top);--ion-safe-area-bottom:constant(safe-area-inset-bottom);--ion-safe-area-left:constant(safe-area-inset-left);--ion-safe-area-right:constant(safe-area-inset-right)}}\@supports (padding-top:env(safe-area-inset-top)){html{--ion-safe-area-top:env(safe-area-inset-top);--ion-safe-area-bottom:env(safe-area-inset-bottom);--ion-safe-area-left:env(safe-area-inset-left);--ion-safe-area-right:env(safe-area-inset-right)}}ion-card-header.ion-color .ion-inherit-color,ion-card.ion-color .ion-inherit-color{color:inherit}.menu-content{-webkit-transform:translateZ(0);transform:translateZ(0)}.menu-content-open{cursor:pointer;-ms-touch-action:manipulation;touch-action:manipulation;pointer-events:none}.ios .menu-content-reveal{-webkit-box-shadow:-8px 0 42px rgba(0,0,0,.08);box-shadow:-8px 0 42px rgba(0,0,0,.08)}[dir=rtl].ios .menu-content-reveal{-webkit-box-shadow:8px 0 42px rgba(0,0,0,.08);box-shadow:8px 0 42px rgba(0,0,0,.08)}.md .menu-content-push,.md .menu-content-reveal{-webkit-box-shadow:4px 0 16px rgba(0,0,0,.18);box-shadow:4px 0 16px rgba(0,0,0,.18)}audio,canvas,progress,video{vertical-align:baseline}audio:not([controls]){display:none;height:0}b,strong{font-weight:700}img{max-width:100%;border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:1px;border-width:0;-webkit-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}input,label,select,textarea{font-family:inherit;line-height:normal}textarea{overflow:auto;height:auto;font:inherit;color:inherit}textarea::-webkit-input-placeholder{padding-left:2px}textarea::-moz-placeholder{padding-left:2px}textarea:-ms-input-placeholder{padding-left:2px}textarea::-ms-input-placeholder{padding-left:2px}textarea::placeholder{padding-left:2px}form,input,optgroup,select{margin:0;font:inherit;color:inherit}html input[type=button],input[type=reset],input[type=submit]{cursor:pointer;-webkit-appearance:button}.ion-tappable,[tappable],[tappable] div,[tappable] ion-icon,[tappable] ion-label,[tappable] span,a,a div,a ion-icon,a ion-label,a span,button,button div,button ion-icon,button ion-label,button span,input,textarea{-ms-touch-action:manipulation;touch-action:manipulation}a ion-label,button ion-label{pointer-events:none}button{border:0;border-radius:0;font-family:inherit;font-style:inherit;font-variant:inherit;line-height:1;text-transform:none;-webkit-appearance:button}[tappable],button{cursor:pointer}a[disabled],button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input[type=checkbox],input[type=radio]{padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}html{width:100%;height:100%;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}html:not(.hydrated) body{display:none}html.plt-pwa{height:100vh}body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;position:fixed;width:100%;max-width:100%;height:100%;max-height:100%;text-rendering:optimizeLegibility;overflow:hidden;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-drag:none;-ms-content-zooming:none;word-wrap:break-word;overscroll-behavior-y:none;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}html{font-family:var(--ion-font-family)}a{background-color:transparent;color:var(--ion-color-primary,#3880ff)}h1,h2,h3,h4,h5,h6{margin-top:16px;margin-bottom:10px;font-weight:500;line-height:1.2}h1{margin-top:20px;font-size:26px}h2{margin-top:18px;font-size:24px}h3{font-size:22px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}small,sub,sup{font-size:75%}sub,sup{position:relative;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}.ion-no-padding{--padding-start:0;--padding-end:0;--padding-top:0;--padding-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0}.ion-padding{--padding-start:var(--ion-padding,16px);--padding-end:var(--ion-padding,16px);--padding-top:var(--ion-padding,16px);--padding-bottom:var(--ion-padding,16px);padding-left:var(--ion-padding,16px);padding-right:var(--ion-padding,16px);padding-top:var(--ion-padding,16px);padding-bottom:var(--ion-padding,16px)}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.ion-padding{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-padding,16px);padding-inline-start:var(--ion-padding,16px);-webkit-padding-end:var(--ion-padding,16px);padding-inline-end:var(--ion-padding,16px)}}.ion-padding-top{--padding-top:var(--ion-padding,16px);padding-top:var(--ion-padding,16px)}.ion-padding-start{--padding-start:var(--ion-padding,16px);padding-left:var(--ion-padding,16px)}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.ion-padding-start{padding-left:unset;-webkit-padding-start:var(--ion-padding,16px);padding-inline-start:var(--ion-padding,16px)}}.ion-padding-end{--padding-end:var(--ion-padding,16px);padding-right:var(--ion-padding,16px)}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.ion-padding-end{padding-right:unset;-webkit-padding-end:var(--ion-padding,16px);padding-inline-end:var(--ion-padding,16px)}}.ion-padding-bottom,.ion-padding-vertical{--padding-bottom:var(--ion-padding,16px);padding-bottom:var(--ion-padding,16px)}.ion-padding-vertical{--padding-top:var(--ion-padding,16px);padding-top:var(--ion-padding,16px)}.ion-padding-horizontal{--padding-start:var(--ion-padding,16px);--padding-end:var(--ion-padding,16px);padding-left:var(--ion-padding,16px);padding-right:var(--ion-padding,16px)}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.ion-padding-horizontal{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--ion-padding,16px);padding-inline-start:var(--ion-padding,16px);-webkit-padding-end:var(--ion-padding,16px);padding-inline-end:var(--ion-padding,16px)}}.ion-no-margin{--margin-start:0;--margin-end:0;--margin-top:0;--margin-bottom:0;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}.ion-margin{--margin-start:var(--ion-margin,16px);--margin-end:var(--ion-margin,16px);--margin-top:var(--ion-margin,16px);--margin-bottom:var(--ion-margin,16px);margin-left:var(--ion-margin,16px);margin-right:var(--ion-margin,16px);margin-top:var(--ion-margin,16px);margin-bottom:var(--ion-margin,16px)}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.ion-margin{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--ion-margin,16px);margin-inline-start:var(--ion-margin,16px);-webkit-margin-end:var(--ion-margin,16px);margin-inline-end:var(--ion-margin,16px)}}.ion-margin-top{--margin-top:var(--ion-margin,16px);margin-top:var(--ion-margin,16px)}.ion-margin-start{--margin-start:var(--ion-margin,16px);margin-left:var(--ion-margin,16px)}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.ion-margin-start{margin-left:unset;-webkit-margin-start:var(--ion-margin,16px);margin-inline-start:var(--ion-margin,16px)}}.ion-margin-end{--margin-end:var(--ion-margin,16px);margin-right:var(--ion-margin,16px)}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.ion-margin-end{margin-right:unset;-webkit-margin-end:var(--ion-margin,16px);margin-inline-end:var(--ion-margin,16px)}}.ion-margin-bottom,.ion-margin-vertical{--margin-bottom:var(--ion-margin,16px);margin-bottom:var(--ion-margin,16px)}.ion-margin-vertical{--margin-top:var(--ion-margin,16px);margin-top:var(--ion-margin,16px)}.ion-margin-horizontal{--margin-start:var(--ion-margin,16px);--margin-end:var(--ion-margin,16px);margin-left:var(--ion-margin,16px);margin-right:var(--ion-margin,16px)}\@supports ((-webkit-margin-start:0) or (margin-inline-start:0)) or (-webkit-margin-start:0){.ion-margin-horizontal{margin-left:unset;margin-right:unset;-webkit-margin-start:var(--ion-margin,16px);margin-inline-start:var(--ion-margin,16px);-webkit-margin-end:var(--ion-margin,16px);margin-inline-end:var(--ion-margin,16px)}}.ion-float-left{float:left!important}.ion-float-right{float:right!important}.ion-float-start{float:left!important}.ion-float-end,:host-context([dir=rtl]) .ion-float-start,[dir=rtl] .ion-float-start{float:right!important}:host-context([dir=rtl]) .ion-float-end,[dir=rtl] .ion-float-end{float:left!important}\@media (min-width:576px){.ion-float-sm-left{float:left!important}.ion-float-sm-right{float:right!important}.ion-float-sm-start{float:left!important}.ion-float-sm-end,:host-context([dir=rtl]) .ion-float-sm-start,[dir=rtl] .ion-float-sm-start{float:right!important}:host-context([dir=rtl]) .ion-float-sm-end,[dir=rtl] .ion-float-sm-end{float:left!important}}\@media (min-width:768px){.ion-float-md-left{float:left!important}.ion-float-md-right{float:right!important}.ion-float-md-start{float:left!important}.ion-float-md-end,:host-context([dir=rtl]) .ion-float-md-start,[dir=rtl] .ion-float-md-start{float:right!important}:host-context([dir=rtl]) .ion-float-md-end,[dir=rtl] .ion-float-md-end{float:left!important}}\@media (min-width:992px){.ion-float-lg-left{float:left!important}.ion-float-lg-right{float:right!important}.ion-float-lg-start{float:left!important}.ion-float-lg-end,:host-context([dir=rtl]) .ion-float-lg-start,[dir=rtl] .ion-float-lg-start{float:right!important}:host-context([dir=rtl]) .ion-float-lg-end,[dir=rtl] .ion-float-lg-end{float:left!important}}\@media (min-width:1200px){.ion-float-xl-left{float:left!important}.ion-float-xl-right{float:right!important}.ion-float-xl-start{float:left!important}.ion-float-xl-end,:host-context([dir=rtl]) .ion-float-xl-start,[dir=rtl] .ion-float-xl-start{float:right!important}:host-context([dir=rtl]) .ion-float-xl-end,[dir=rtl] .ion-float-xl-end{float:left!important}}.ion-text-center{text-align:center!important}.ion-text-justify{text-align:justify!important}.ion-text-start{text-align:start!important}.ion-text-end{text-align:end!important}.ion-text-left{text-align:left!important}.ion-text-right{text-align:right!important}.ion-text-nowrap{white-space:nowrap!important}.ion-text-wrap{white-space:normal!important}\@media (min-width:576px){.ion-text-sm-center{text-align:center!important}.ion-text-sm-justify{text-align:justify!important}.ion-text-sm-start{text-align:start!important}.ion-text-sm-end{text-align:end!important}.ion-text-sm-left{text-align:left!important}.ion-text-sm-right{text-align:right!important}.ion-text-sm-nowrap{white-space:nowrap!important}.ion-text-sm-wrap{white-space:normal!important}}\@media (min-width:768px){.ion-text-md-center{text-align:center!important}.ion-text-md-justify{text-align:justify!important}.ion-text-md-start{text-align:start!important}.ion-text-md-end{text-align:end!important}.ion-text-md-left{text-align:left!important}.ion-text-md-right{text-align:right!important}.ion-text-md-nowrap{white-space:nowrap!important}.ion-text-md-wrap{white-space:normal!important}}\@media (min-width:992px){.ion-text-lg-center{text-align:center!important}.ion-text-lg-justify{text-align:justify!important}.ion-text-lg-start{text-align:start!important}.ion-text-lg-end{text-align:end!important}.ion-text-lg-left{text-align:left!important}.ion-text-lg-right{text-align:right!important}.ion-text-lg-nowrap{white-space:nowrap!important}.ion-text-lg-wrap{white-space:normal!important}}\@media (min-width:1200px){.ion-text-xl-center{text-align:center!important}.ion-text-xl-justify{text-align:justify!important}.ion-text-xl-start{text-align:start!important}.ion-text-xl-end{text-align:end!important}.ion-text-xl-left{text-align:left!important}.ion-text-xl-right{text-align:right!important}.ion-text-xl-nowrap{white-space:nowrap!important}.ion-text-xl-wrap{white-space:normal!important}}.ion-text-uppercase{text-transform:uppercase!important}.ion-text-lowercase{text-transform:lowercase!important}.ion-text-capitalize{text-transform:capitalize!important}\@media (min-width:576px){.ion-text-sm-uppercase{text-transform:uppercase!important}.ion-text-sm-lowercase{text-transform:lowercase!important}.ion-text-sm-capitalize{text-transform:capitalize!important}}\@media (min-width:768px){.ion-text-md-uppercase{text-transform:uppercase!important}.ion-text-md-lowercase{text-transform:lowercase!important}.ion-text-md-capitalize{text-transform:capitalize!important}}\@media (min-width:992px){.ion-text-lg-uppercase{text-transform:uppercase!important}.ion-text-lg-lowercase{text-transform:lowercase!important}.ion-text-lg-capitalize{text-transform:capitalize!important}}\@media (min-width:1200px){.ion-text-xl-uppercase{text-transform:uppercase!important}.ion-text-xl-lowercase{text-transform:lowercase!important}.ion-text-xl-capitalize{text-transform:capitalize!important}}.ion-align-self-start{-ms-flex-item-align:start!important;align-self:flex-start!important}.ion-align-self-end{-ms-flex-item-align:end!important;align-self:flex-end!important}.ion-align-self-center{-ms-flex-item-align:center!important;align-self:center!important}.ion-align-self-stretch{-ms-flex-item-align:stretch!important;align-self:stretch!important}.ion-align-self-baseline{-ms-flex-item-align:baseline!important;align-self:baseline!important}.ion-align-self-auto{-ms-flex-item-align:auto!important;align-self:auto!important}.ion-wrap{-ms-flex-wrap:wrap!important;flex-wrap:wrap!important}.ion-nowrap{-ms-flex-wrap:nowrap!important;flex-wrap:nowrap!important}.ion-wrap-reverse{-ms-flex-wrap:wrap-reverse!important;flex-wrap:wrap-reverse!important}.ion-justify-content-start{-ms-flex-pack:start!important;justify-content:flex-start!important}.ion-justify-content-center{-ms-flex-pack:center!important;justify-content:center!important}.ion-justify-content-end{-ms-flex-pack:end!important;justify-content:flex-end!important}.ion-justify-content-around{-ms-flex-pack:distribute!important;justify-content:space-around!important}.ion-justify-content-between{-ms-flex-pack:justify!important;justify-content:space-between!important}.ion-justify-content-evenly{-ms-flex-pack:space-evenly!important;justify-content:space-evenly!important}.ion-align-items-start{-ms-flex-align:start!important;align-items:flex-start!important}.ion-align-items-center{-ms-flex-align:center!important;align-items:center!important}.ion-align-items-end{-ms-flex-align:end!important;align-items:flex-end!important}.ion-align-items-stretch{-ms-flex-align:stretch!important;align-items:stretch!important}.ion-align-items-baseline{-ms-flex-align:baseline!important;align-items:baseline!important}\@-webkit-keyframes fade{0%{opacity:0}to{opacity:1}}\@-webkit-keyframes corner-expand{0%{width:0;opacity:0}to{width:20px;opacity:1}}\@-webkit-keyframes slide-right{0%{opacity:0;-webkit-transform:translateX(-200px);transform:translateX(-200px)}}\@keyframes fade{0%{opacity:0}to{opacity:1}}\@keyframes corner-expand{0%{width:0;opacity:0}to{width:20px;opacity:1}}\@keyframes slide-right{0%{opacity:0;-webkit-transform:translateX(-200px);transform:translateX(-200px)}}\@keyframes bounce2{0%,20%,50%,80%,to{-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%,to{-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{0%{-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(.94);transform:scale(.94);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}14%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}28%{-webkit-transform:scale(.92);transform:scale(.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{0%{-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(.94);transform:scale(.94);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}14%{-webkit-transform:scale(.98);transform:scale(.98);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}28%{-webkit-transform:scale(.92);transform:scale(.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:#fff;--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:#fff;--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:#fff;--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:#fff;--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:0!important;padding:0;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}h1,h2,h3,h4,h5,h6,p{font-family:Nunito,serif}.title{text-transform:uppercase;font-size:1.2em;font-weight:600}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:.6s;transition:.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:50%;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:50%;background-size:cover}flip-card .flip-container .flipper .back,flip-card .flip-container .flipper .front{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 .back .icon-span,flip-card .flip-container .flipper .front .icon-span{margin-top:-9%;margin-right:8px}flip-card .flip-container .flipper .back .icon-span ion-icon,flip-card .flip-container .flipper .front .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)}"; }
};

const Fab = class {
    constructor(hostRef) {
        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 = () => {
            const hasList = !!this.el.querySelector('ion-fab-list');
            const getButton = this.getFab();
            const isButtonDisabled = getButton && getButton.disabled;
            if (hasList && !isButtonDisabled) {
                this.activated = !this.activated;
            }
        };
    }
    activatedChanged() {
        const activated = this.activated;
        const fab = this.getFab();
        if (fab) {
            fab.activated = activated;
        }
        Array.from(this.el.querySelectorAll('ion-fab-list')).forEach(list => {
            list.activated = activated;
        });
    }
    componentDidLoad() {
        if (this.activated) {
            this.activatedChanged();
        }
    }
    /**
     * Close an active FAB list container.
     */
    async close() {
        this.activated = false;
    }
    getFab() {
        return this.el.querySelector('ion-fab-button');
    }
    render() {
        const { horizontal, vertical, edge } = this;
        const mode = getIonMode(this);
        return (h(Host, { onClick: this.onClick, class: {
                [mode]: true,
                [`fab-horizontal-${horizontal}`]: horizontal !== undefined,
                [`fab-vertical-${vertical}`]: vertical !== undefined,
                'fab-edge': edge
            } }, h("slot", null)));
    }
    get el() { return getElement(this); }
    static get watchers() { return {
        "activated": ["activatedChanged"]
    }; }
    static get style() { return ":host{position:absolute;z-index:999}:host(.fab-horizontal-center){left:50%;margin-left:-28px}:host-context([dir=rtl]).fab-horizontal-center,:host-context([dir=rtl]):host(.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]).fab-horizontal-start,:host-context([dir=rtl]):host(.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]).fab-horizontal-end,:host-context([dir=rtl]):host(.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%}"; }
};

const FabButton = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        /**
         * 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';
        this.onFocus = () => {
            this.ionFocus.emit();
        };
        this.onBlur = () => {
            this.ionBlur.emit();
        };
        this.ionFocus = createEvent(this, "ionFocus", 7);
        this.ionBlur = createEvent(this, "ionBlur", 7);
    }
    render() {
        const { el, disabled, color, href, activated, show, translucent, size } = this;
        const inList = hostContext('ion-fab-list', el);
        const mode = getIonMode(this);
        const TagType = href === undefined ? 'button' : 'a';
        const attrs = (TagType === 'button')
            ? { type: this.type }
            : {
                download: this.download,
                href,
                rel: this.rel,
                target: this.target
            };
        return (h(Host, { "aria-disabled": disabled ? 'true' : null, class: Object.assign(Object.assign({}, createColorClasses(color)), { [mode]: true, 'fab-button-in-list': inList, 'fab-button-translucent-in-list': inList && translucent, 'fab-button-close-active': activated, 'fab-button-show': show, 'fab-button-disabled': disabled, 'fab-button-translucent': translucent, 'ion-activatable': true, 'ion-focusable': true, [`fab-button-${size}`]: size !== undefined }) }, h(TagType, Object.assign({}, attrs, { class: "button-native", disabled: disabled, onFocus: this.onFocus, onBlur: this.onBlur, onClick: (ev) => openURL(href, ev, this.routerDirection) }), h("span", { class: "close-icon" }, h("ion-icon", { name: "close", lazy: false })), h("span", { class: "button-inner" }, h("slot", null)), mode === 'md' && h("ion-ripple-effect", null))));
    }
    get el() { return getElement(this); }
    static get style() { return ":host{--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--background-hover:var(--ion-color-primary-contrast,#fff);--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)}}.button-native:after{bottom:0;content:\"\";opacity:0}.button-inner,.button-native:after{left:0;right:0;top:0;position:absolute}.button-inner{display:-ms-flexbox;display:flex;-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 .3s ease-in-out;transition:all .3s ease-in-out;-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:.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{left:0;right:0;top:0;display:-ms-flexbox;display:flex;position:absolute;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;height:100%;-webkit-transform:scale(.4) rotate(-45deg);transform:scale(.4) rotate(-45deg);-webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-transition-property:opacity,-webkit-transform;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;opacity:0;z-index:1}:host(.fab-button-close-active) .close-icon{-webkit-transform:scale(1) rotate(0deg);transform:scale(1) rotate(0deg);opacity:1}:host(.fab-button-close-active) .button-inner{-webkit-transform:scale(.4) rotate(45deg);transform:scale(.4) rotate(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}: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)}.close-icon,::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)}}"; }
};

export { FlipCard as flip_card, Fab as ion_fab, FabButton as ion_fab_button };
