import { r as registerInstance, c as createEvent, h } from './index-9bc5455c.js';
import { M as MediaTool } from './media-tool-c38b2fcf.js';

/**
* Remote or local representation of a media
*/
class MediaElement {
    constructor() {
        this.name = null;
        this.type = '';
        this.media = '';
        this.large = '';
        this.medium = '';
        this.thumbnail = '';
        this.storageId = '';
        this.overlay = 80;
        this.alt = '';
        this.description = '';
        this.year = 0;
        this.copyrights = '';
        this.source = '';
    }
}

const mainPlaceAnnouncementCss = "@-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}main-place-announcement p{font-family:\"Nunito\", serif;margin:0em}main-place-announcement .main-container{width:300px;height:300px;margin-left:auto;margin-right:auto}main-place-announcement .main-container .main-subcontainer{position:relative;width:100%;left:0%}main-place-announcement .main-container .main-subcontainer .picture-container{width:300px;height:300px;margin:0px auto;background-size:cover;background-position:center;background-blend-mode:overlay;border-radius:50%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-webkit-box-shadow:inset 0px 0px 12px 4px rgba(0, 0, 0, 0.4);-moz-box-shadow:inset 0px 0px 12px 4px rgba(0, 0, 0, 0.4);box-shadow:inset 0px 0px 12px 4px rgba(0, 0, 0, 0.4);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}main-place-announcement .main-container .main-subcontainer .picture-container .picture-subcontainer{margin-top:12px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}main-place-announcement .main-container .main-subcontainer .picture-container .picture-subcontainer .place-title{font-family:\"Caveat\", serif;text-transform:uppercase;color:white;font-size:2em;font-weight:600;margin:4px 0px;text-align:center}main-place-announcement .main-container .main-subcontainer .picture-container .place-index{position:absolute;background-color:white;color:var(--ion-color-tertiary);width:100px;height:100px;left:-12px;top:-12px;line-height:100px;text-align:center;border-radius:50%;font-family:\"Caveat\", serif;font-size:2em;font-weight:600}main-place-announcement .main-container .main-subcontainer .picture-container .inside-button{position:absolute;bottom:24px;right:12px;font-family:\"Caveat\", serif;font-size:1em;text-transform:uppercase}";

const MainPlaceAnnouncement = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
        this.mainPlaceClicked = createEvent(this, "mainPlaceClicked", 7);
        // Props
        this.image = new MediaElement();
        this.placeTitle = '';
        this.placeIndex = 1;
        this.placeTotalCount = 1;
        this.placeId = '';
        this.buttonText = this.placeIndex === 1 ? 'Discover the place' : 'Discover';
        // States
        this.clicked = false;
    }
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * Click on the title
     */
    onClick() {
        this.mainPlaceClicked.emit(this.placeId);
        this.clicked = true;
    }
    ////////////////////////////////////////////////////////////////
    // Utils
    ////////////////////////////////////////////////////////////////
    /**
     * Replace .undefined extension by .jpg
     * Fix a bug
     * @param imageUrl
     */
    fixImage(imageUrl) {
        return imageUrl.replace('.undefined', '.jpg');
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    render() {
        return (h("div", { class: 'main-container' }, h("div", { class: 'main-subcontainer' }, h("div", { style: {
                backgroundImage: 'url(' + this.fixImage(MediaTool.imageM(this.image)) + ')',
                backgroundColor: 'rgba(0,0,0,' + this.image.overlay / 100 + ')'
            }, onClick: () => this.onClick(), class: 'picture-container' }, h("div", { class: 'picture-subcontainer' }, h("h3", { class: 'place-title' }, this.placeTitle)), h("ion-fab-button", { color: 'secondary', class: 'inside-button ' + (this.clicked ? '' : 'heartbeat-button'), onClick: () => this.onClick() }, h("ion-icon", { name: 'play-outline' })), h("p", { class: 'place-index' }, this.placeIndex, "/", this.placeTotalCount)))));
    }
};
MainPlaceAnnouncement.style = mainPlaceAnnouncementCss;

export { MainPlaceAnnouncement as main_place_announcement };
