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: '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 }))))));
    }
    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",
                "attribute": "container-size",
                "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,
                "defaultValue": "''"
            },
            "size": {
                "type": "string",
                "attribute": "size",
                "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,
                "defaultValue": "''"
            },
            "color": {
                "type": "string",
                "attribute": "color",
                "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,
                "defaultValue": "'purple'"
            },
            "shape": {
                "type": "boolean",
                "attribute": "shape",
                "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,
                "defaultValue": "false"
            },
            "shapeVariation": {
                "type": "string",
                "attribute": "shape-variation",
                "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
            },
            "shapeRotation": {
                "type": "string",
                "attribute": "shape-rotation",
                "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
            }
        };
    }
}
