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, h } from './index-9bc5455c.js';
var compositionListCss = "@-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}composition-list p{font-family:\"Caveat\", serif}composition-list .main-container{margin:0 8px;margin-left:12px}composition-list .main-container .header-container{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}composition-list .main-container .header-container .list-title{font-size:1.3em;margin-left:8px}composition-list .main-container .header-container .button-container button{padding:0.5em}composition-list .main-container .list-container{width:100%;display:-ms-inline-flexbox;display:inline-flex}composition-list .main-container .list-container .swiper-slide{-ms-flex-pack:start;justify-content:flex-start}";
var CompositionList = /** @class */ (function () {
    function class_1(hostRef) {
        registerInstance(this, hostRef);
        // Internal
        this.compositionSlider = null;
        // Props
        this.elementWidth = 0; // The width of a tour or a list
        this.listTitle = '';
        // States
        this.sliderOptions = null;
        this.randomId = Math.random() * 10000;
    }
    ////////////////////////////////////////////////////////////////
    // Life Cycle
    ////////////////////////////////////////////////////////////////
    /**
     * Override
     */
    class_1.prototype.componentDidLoad = function () {
        this.compositionSlider = this.getCompositionSlider();
        this.sliderOptions = this.getSliderOptions();
    };
    ////////////////////////////////////////////////////////////////
    // Public Methods
    ////////////////////////////////////////////////////////////////
    /**
     * Update the slider (must be called when an element has been added/or deleted)
     */
    class_1.prototype.updateSlider = function () {
        return __awaiter(this, void 0, void 0, function () {
            return __generator(this, function (_a) {
                this.compositionSlider.update();
                this.getCompositionSlider().stopAutoplay();
                return [2 /*return*/];
            });
        });
    };
    ////////////////////////////////////////////////////////////////
    // User Interactions
    ////////////////////////////////////////////////////////////////
    /**
     * The user wants to display the previous composition
     */
    class_1.prototype.previousComposition = function () {
        this.compositionSlider.slidePrev();
    };
    /**
    * The user wants to display the next composition
    */
    class_1.prototype.nextComposition = function () {
        this.compositionSlider.slideNext();
    };
    ////////////////////////////////////////////////////////////////
    // Private Methods
    ////////////////////////////////////////////////////////////////
    /**
     * Return an object containing the tour slider options
     */
    class_1.prototype.getSliderOptions = function () {
        return {
            width: this.elementWidth,
            spaceBetween: 8,
        };
    };
    ////////////////////////////////////////////////////////////////
    // Getters / Setters
    ////////////////////////////////////////////////////////////////
    /**
     * Return the Content slider
     */
    class_1.prototype.getCompositionSlider = function () {
        return document.getElementById('composition-slider' + this.randomId);
    };
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    class_1.prototype.render = function () {
        var _this = this;
        return (h("div", { class: 'main-container' }, h("div", { class: 'header-container' }, h("p", { class: 'list-title' }, this.listTitle), h("div", { class: 'button-container' }, h("ion-button", { onClick: function () { return _this.previousComposition(); }, fill: 'clear' }, h("ion-icon", { color: 'dark', name: 'ios-arrow-back' })), h("ion-button", { onClick: function () { return _this.nextComposition(); }, fill: 'clear' }, h("ion-icon", { color: 'dark', name: 'ios-arrow-forward' })))), h("div", { class: 'list-container' }, h("ion-slides", { id: 'composition-slider' + this.randomId, options: this.sliderOptions }, h("slot", null)))));
    };
    return class_1;
}());
CompositionList.style = compositionListCss;
export { CompositionList as composition_list };
