'use strict';

var index = require('./index-CJK1u2Q5.js');
var bem = require('./bem-p0PWVN8n.js');
var attributes = require('./attributes-Cp0kpySW.js');

const balStageCss = ":root{--bal-stage-background-red:var(--bal-color-red);--bal-stage-background-yellow:var(--bal-color-yellow);--bal-stage-background-green:var(--bal-color-green);--bal-stage-background-purple:var(--bal-color-purple);--bal-stage-back-font-family:var(--bal-font-family-title);--bal-stage-back-font-weight:var(--bal-font-weight-bold)}.bal-stage{display:block;position:relative}.bal-stage--is-purple{background:var(--bal-stage-background-purple)}.bal-stage--is-green{background:var(--bal-stage-background-green)}.bal-stage--is-red{background:var(--bal-stage-background-red)}.bal-stage--is-yellow{background:var(--bal-stage-background-yellow)}.bal-stage .bal-stage-content{display:block;position:static}.bal-stage .bal-stage-content .bal-stage-image{overflow:hidden}.bal-stage .bal-stage-content .bal-stage-image img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.bal-stage .bal-stage-content .bal-stage-body{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding-top:calc(var(--bal-space-xxxx-large) + 4rem);padding-bottom:var(--bal-space-xxx-large)}@media screen and (min-width: 769px),print{.bal-stage .bal-stage-content .bal-stage-body{padding-top:calc(var(--bal-space-xxxx-large-tablet) + 4rem);padding-bottom:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stage .bal-stage-content .bal-stage-body{padding-top:calc(var(--bal-space-xxxx-large-desktop) + 3rem);padding-bottom:var(--bal-space-xx-large-desktop)}}.bal-stage .bal-stage-content .bal-stage-back-link--shadow{text-shadow:var(--bal-text-shadow-normal)}@media screen and (max-width: 1023px){.bal-stage .bal-stage-content .bal-stage-back-link{display:none}}@media screen and (min-width: 1024px){.bal-stage .bal-stage-content .bal-stage-back-link a{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-family:var(--bal-stage-back-font-family);font-weight:var(--bal-stage-back-font-weight);text-decoration:none}.bal-stage .bal-stage-content .bal-stage-back-link a:hover{text-decoration:underline}.bal-stage .bal-stage-content .bal-stage-back-link a:active{text-decoration:underline}}@media screen and (min-width: 1024px){.bal-stage--is-medium .bal-stage-content .bal-stage-body{min-height:25rem}}.bal-stage--is-large .bal-stage-content .bal-stage-body{min-height:23.438rem}@media screen and (min-width: 769px),print{.bal-stage--is-large .bal-stage-content .bal-stage-body{min-height:35rem}}@media screen and (min-width: 1024px){.bal-stage--is-large .bal-stage-content .bal-stage-body{min-height:52.5rem}}.bal-stage--has-shape .bal-stage-content{margin-bottom:1.375rem}@media screen and (min-width: 769px),print{.bal-stage--has-shape .bal-stage-content{margin-bottom:2.5rem}}@media screen and (min-width: 1024px){.bal-stage--has-shape .bal-stage-content{margin-bottom:4.125rem}}@media screen and (min-width: 769px),print{.bal-stage--has-shape .bal-stage-content .bal-stage-body>*{max-width:calc(100% - 7.5rem)}}@media screen and (min-width: 1024px){.bal-stage--has-shape .bal-stage-content .bal-stage-body>*{max-width:calc(100% - 12.375rem)}}.bal-stage--has-shape .bal-stage-content .bal-shape{position:absolute;bottom:-1.375rem;right:0}@media screen and (min-width: 769px),print{.bal-stage--has-shape .bal-stage-content .bal-shape{bottom:-2.5rem}}@media screen and (min-width: 1024px){.bal-stage--has-shape .bal-stage-content .bal-shape{bottom:-4.125rem}}";

const Stage = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * Defines content width of the stage
         */
        this.containerSize = '';
        /**
         * Defines size of the stage
         */
        this.size = '';
        /**
         * Defines the background color of the stage section
         */
        this.color = 'purple';
        /**
         * If true the Baloise Shape is set
         */
        this.shape = false;
        this.getContainerWidth = () => {
            switch (this.containerSize) {
                case 'is-detail-page':
                case 'detail-page':
                    return '680px';
                case 'is-compact':
                case 'compact':
                    return '832px';
                case 'is-blog-page':
                case 'blog-page':
                    return '920px';
                case 'is-fluid':
                case 'fluid':
                    return '100vw';
                case 'is-wide':
                case 'wide':
                default:
                    return '1400px';
            }
        };
    }
    get containerClass() {
        if (this.containerSize.includes('wide')) {
            return '';
        }
        if (this.containerSize.startsWith('is-')) {
            return this.containerSize;
        }
        return `is-${this.containerSize}`;
    }
    render() {
        const block = bem.BEM.block('stage');
        const element = bem.BEM.block('stage-content');
        return (index.h(index.Host, { key: '0a0f187c1f276c239346ce3f8cebcc0dbb78aafb', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, index.h("section", { key: '74dee713cafc1bb4bc420b8614f6a3cd5e938600', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, index.h("slot", { key: 'db3dcfa410828da23c0fcc888f53cd110992a847' }), this.shape && (index.h("div", { key: '586c8b26d0d00d7073bd4dde471302037f0446ea', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, index.h("bal-shape", { key: 'cf707bdfc9937d0fbe2a62080dbe2eda2771973d', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
    }
};
Stage.style = balStageCss;

const StageBackLink = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * If `true` adds a text shadow to improve readability on image background
         * */
        this.shadow = false;
        /**
         * If `true` the color gets inverted for dark backgrounds
         */
        this.inverted = false;
    }
    render() {
        const block = bem.BEM.block('stage-back-link');
        return (index.h(index.Host, { key: '8a96e969901e8dbb9e29587c7bfac3aa475331f3', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, index.h("a", { key: '488c839fe831fbaf64703a0e3ad3fe80caef2968', class: {
                'link': true,
                'is-inverted': this.inverted,
            }, href: this.href, rel: this.rel }, index.h("bal-icon", { key: '12ced75ad0f38cb7a7ef0f70b9cf5babbaf13842', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), index.h("slot", { key: 'f9bb274429697778e37dab9d89f91315230c93f3' }))));
    }
    get el() { return index.getElement(this); }
};

const StageBody = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    render() {
        const block = bem.BEM.block('stage-body');
        return (index.h(index.Host, { key: '02186af6d627121ecd4f6e1ed64fe02f31f39c38', class: Object.assign({}, block.class()) }, index.h("slot", { key: '0c48731c5a7e2bbcdaddaf984dfa89e282ac437e' })));
    }
    get el() { return index.getElement(this); }
};

const StageFoot = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    render() {
        return (index.h(index.Host, { key: '04004ec95c9a7698132f56c9efa511c02d157965', class: "hero-foot" }, index.h("slot", { key: '1bdac86f51886901490c1a8fe74fb53f1eb3568f' })));
    }
    get el() { return index.getElement(this); }
};

const StageHead = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
    }
    render() {
        return (index.h(index.Host, { key: '77f405fb5a84be341f5709ea9451fd5b01eae1a5', class: "hero-head" }, index.h("slot", { key: '7b93751fe0fd796422cdf0d669404bf22f1312c8' })));
    }
    get el() { return index.getElement(this); }
};

const StageImage = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.imageInheritAttributes = {};
        this.isOnLoadEventDone = false;
    }
    componentDidLoad() {
        index.rOnLoad(() => {
            this.isOnLoadEventDone = true;
        });
    }
    componentWillLoad() {
        this.imageInheritAttributes = attributes.inheritAttributes(this.el, ['alt']);
    }
    render() {
        const block = bem.BEM.block('stage-image');
        const imageSrc = this.fallback ? this.fallback : this.srcSet.split(',')[0];
        return (index.h(index.Host, { key: 'b587dc5614e4d0a355712bc09fd28d2848469ca5', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (index.h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
    }
    get el() { return index.getElement(this); }
};

exports.bal_stage = Stage;
exports.bal_stage_back_link = StageBackLink;
exports.bal_stage_body = StageBody;
exports.bal_stage_foot = StageFoot;
exports.bal_stage_head = StageHead;
exports.bal_stage_image = StageImage;
