import { r as registerInstance, h, H as Host, g as getElement } from './index-BdVwMG9u.js';
import { B as BEM } from './bem-ByiN-QjD.js';
import { l as rOnLoad } from './helpers-BNj87EbG.js';
import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
import './browser-B1u-Mq75.js';
import './config.utils-B7jugjyM.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) {
        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.block('stage');
        const element = BEM.block('stage-content');
        return (h(Host, { key: '9bde68d498d4ed263cb6e7ec0f72505b66436c6a', 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() } }, h("section", { key: '0e96a3b8597f3607c98c6689b1658110d11dfa24', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: '3c2ca52c3a5750955adab54a9f7eed4c4da08d7c' }), this.shape && (h("div", { key: 'e69202693e9d45a5258c61c121d9499bde7b4bc8', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: 'fea5cb01b1062316da0ca04a600dd5cae4f91be0', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
    }
};
Stage.style = balStageCss;

const StageBackLink = class {
    constructor(hostRef) {
        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.block('stage-back-link');
        return (h(Host, { key: '4b980500cb525ce37993b2660d3e6f47afee0f4e', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'afadcd09a4c0c669d387d12a28c712d3de376a41', class: {
                'link': true,
                'is-inverted': this.inverted,
            }, href: this.href, rel: this.rel }, h("bal-icon", { key: '764fd4ed183e8542d921d2a57e1850adc590b348', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: 'e3c1b6d3ede82a002ce474cb72ad888586502201' }))));
    }
    get el() { return getElement(this); }
};

const StageBody = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    render() {
        const block = BEM.block('stage-body');
        return (h(Host, { key: '3b059393f680516ee22d093cb77927211f1b2a2a', class: Object.assign({}, block.class()) }, h("slot", { key: '739898aeda435256a9cf052dfe265d6f28115b94' })));
    }
    get el() { return getElement(this); }
};

const StageFoot = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    render() {
        return (h(Host, { key: '351793d066e2d3018a0a4c40cdb2b69495127199', class: "hero-foot" }, h("slot", { key: '76c2593eac606f7aed4c15ac6148780a37555b54' })));
    }
    get el() { return getElement(this); }
};

const StageHead = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    render() {
        return (h(Host, { key: '19fdb481ea37cab182e426f7582270ecdce23147', class: "hero-head" }, h("slot", { key: '69273fb5da2cd217de773a37eb5000adda15bbbf' })));
    }
    get el() { return getElement(this); }
};

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

export { Stage as bal_stage, StageBackLink as bal_stage_back_link, StageBody as bal_stage_body, StageFoot as bal_stage_foot, StageHead as bal_stage_head, StageImage as bal_stage_image };
