import { h } from "@stencil/core";
import { LayoutContainerVariation } from "./layout-container-variation.enum";
import { LayoutContainerMaxWidth } from "./layout-container-max-width.enum";
/**
 * @slot default - Kan innehålla vad som helst
 *
 * @enums LayoutContainerVariation - layout-container-variation.enum.ts
 * @enums LayoutContainerMaxWidth - layout-container-max-width.enum.ts
 * @swedishName Container
 */
export class LayoutContainer {
    constructor() {
        this._variation = LayoutContainerVariation.STATIC;
        this.afVariation = LayoutContainerVariation.STATIC;
        this.afMaxWidth = LayoutContainerMaxWidth.WIDTH_1400;
        this.afNoGutter = undefined;
        this.afVerticalPadding = undefined;
        this.afMarginTop = undefined;
        this.afMarginBottom = undefined;
    }
    variationChangeHandler() {
        this._variation = this.afVariation;
    }
    componentWillLoad() {
        this.variationChangeHandler();
    }
    get cssModifiers() {
        if (this._variation === LayoutContainerVariation.NONE) {
            return {};
        }
        return {
            'digi-layout-container': true,
            'digi-layout-container--static': this._variation === LayoutContainerVariation.STATIC,
            'digi-layout-container--fluid': this._variation === LayoutContainerVariation.FLUID,
            'digi-layout-container--max-width-1200': this.afMaxWidth === LayoutContainerMaxWidth.WIDTH_1200,
            'digi-layout-container--no-gutter': this.afNoGutter,
            'digi-layout-container--vertical-padding': this.afVerticalPadding,
            'digi-layout-container--margin-top': this.afMarginTop,
            'digi-layout-container--margin-bottom': this.afMarginBottom
        };
    }
    render() {
        return (h("div", { key: '0dc19859f25ece31e266ad11bea2af0b1ad0db13', class: Object.assign({}, this.cssModifiers) }, h("slot", { key: '36ac6345da26289a63cf0bf8fc2e70ffd2ced85e' })));
    }
    static get is() { return "digi-layout-container"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["layout-container.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["layout-container.css"]
        };
    }
    static get properties() {
        return {
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LayoutContainerVariation",
                    "resolved": "LayoutContainerVariation.FLUID | LayoutContainerVariation.NONE | LayoutContainerVariation.STATIC",
                    "references": {
                        "LayoutContainerVariation": {
                            "location": "import",
                            "path": "./layout-container-variation.enum",
                            "id": "src/components/_layout/layout-container/layout-container-variation.enum.ts::LayoutContainerVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set container variation. Can be 'static' or 'fluid'."
                        }],
                    "text": "S\u00E4tter containervarianten. Kan vara 'static' eller 'fluid'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false,
                "defaultValue": "LayoutContainerVariation.STATIC"
            },
            "afMaxWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LayoutContainerMaxWidth",
                    "resolved": "LayoutContainerMaxWidth.WIDTH_1200 | LayoutContainerMaxWidth.WIDTH_1400",
                    "references": {
                        "LayoutContainerMaxWidth": {
                            "location": "import",
                            "path": "./layout-container-max-width.enum",
                            "id": "src/components/_layout/layout-container/layout-container-max-width.enum.ts::LayoutContainerMaxWidth"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Sets max-width to the container."
                        }],
                    "text": "Styr max-bredden p\u00E5 containern, vi rekommenderar att du beh\u00E5ller default-max-width. L\u00E4s mer om dom olika bredderna under designm\u00F6nster f\u00F6r grid och brytpunkter."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-max-width",
                "reflect": false,
                "defaultValue": "LayoutContainerMaxWidth.WIDTH_1400"
            },
            "afNoGutter": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Remove gutters from container sides"
                        }],
                    "text": "Tar bort marginalen fr\u00E5n sidorna av containern"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-no-gutter",
                "reflect": false
            },
            "afVerticalPadding": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Adds vertical padding inside the container"
                        }],
                    "text": "L\u00E4gger till vertikal padding inuti containern"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-vertical-padding",
                "reflect": false
            },
            "afMarginTop": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Adds margin on top of the container"
                        }],
                    "text": "L\u00E4gger till marginal i toppen p\u00E5 containern"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-margin-top",
                "reflect": false
            },
            "afMarginBottom": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Adds margin at bottom of the container"
                        }],
                    "text": "L\u00E4gger till marginal i botten p\u00E5 containern"
                },
                "getter": false,
                "setter": false,
                "attribute": "af-margin-bottom",
                "reflect": false
            }
        };
    }
    static get states() {
        return {
            "_variation": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "afVariation",
                "methodName": "variationChangeHandler"
            }];
    }
}
