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: '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() } }, h("section", { key: '74dee713cafc1bb4bc420b8614f6a3cd5e938600', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: 'db3dcfa410828da23c0fcc888f53cd110992a847' }), this.shape && (h("div", { key: '586c8b26d0d00d7073bd4dde471302037f0446ea', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: 'cf707bdfc9937d0fbe2a62080dbe2eda2771973d', 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: 'd3f7b6738547d41aa1768247cc35dab99f910ce7', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'd176f07817f6e739a23102e3635884c2ee6b999f', class: {
                'link': true,
                'is-inverted': this.inverted,
            }, href: this.href, rel: this.rel }, h("bal-icon", { key: 'd782a08f95a20f3477e75dc80e51f7d762e34913', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: '8a5305d0e2145cf91cffcb7d9c627222ad623177' }))));
    }
    get el() { return getElement(this); }
};

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

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

const StageHead = class {
    constructor(hostRef) {
        registerInstance(this, hostRef);
    }
    render() {
        return (h(Host, { key: 'bdd7bfc5c154aa8fdb3c0a51ec38303faf981dd5', class: "hero-head" }, h("slot", { key: '72412afb15d629dea3c3ff8040b6e668fe92a241' })));
    }
    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: 'a328489d91f055d488a89e4e2f4297db63d2eec1', 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 };
