import { h, Host } from "@stencil/core";
import { BEM } from "../../utils/bem";
export class Stage {
    constructor() {
        /**
         * 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 }))))));
    }
    static get is() { return "bal-stage"; }
    static get originalStyleUrls() {
        return {
            "$": ["bal-stage.sass"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["bal-stage.css"]
        };
    }
    static get properties() {
        return {
            "containerSize": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalStageContainer",
                    "resolved": "string",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines content width of the stage"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "container-size",
                "defaultValue": "''"
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalStageSize",
                    "resolved": "\"\" | \"large\" | \"small\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines size of the stage"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "size",
                "defaultValue": "''"
            },
            "color": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalStageColor",
                    "resolved": "\"blue\" | \"green\" | \"purple\" | \"red\" | \"yellow\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Defines the background color of the stage section"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "color",
                "defaultValue": "'purple'"
            },
            "shape": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "If true the Baloise Shape is set"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "shape",
                "defaultValue": "false"
            },
            "shapeVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalShapeVariation",
                    "resolved": "\"1\" | \"2\" | \"3\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Shape Variation"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "shape-variation"
            },
            "shapeRotation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BalProps.BalShapeRotation",
                    "resolved": "\"0\" | \"180\" | \"270\" | \"90\"",
                    "references": {
                        "BalProps": {
                            "location": "global",
                            "id": "global::BalProps"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Shape Rotation"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "shape-rotation"
            }
        };
    }
}
