import { h } from "@stencil/core";
import { LayoutColumnsElement } from "./layout-columns-element.enum";
import { LayoutColumnsVariation } from "./layout-columns-variation.enum";
import { LayoutColumnsGap } from "./layout-columns-column-gap.enum";
/**
 * @slot default - Kan innehålla vad som helst
 *
 * @enums LayoutColumnsVariation - layout-columns-variation.enum.ts
 * @enums LayoutColumnsElement - layout-columns-element.enum.ts
 * @swedishName Kolumner
 */
export class LayoutColumns {
    constructor() {
        this.afElement = LayoutColumnsElement.DIV;
        this.afVariation = undefined;
        this.afColumnGap = LayoutColumnsGap.DEFAULT;
    }
    get cssModifiers() {
        return {
            'digi-layout-columns--one': this.afVariation === LayoutColumnsVariation.ONE,
            'digi-layout-columns--two': this.afVariation === LayoutColumnsVariation.TWO,
            'digi-layout-columns--three': this.afVariation === LayoutColumnsVariation.THREE,
            'digi-layout-columns--four': this.afVariation === LayoutColumnsVariation.FOUR,
            'digi-layout-columns--column-gap-32': this.afColumnGap === LayoutColumnsGap.GAP_32
        };
    }
    render() {
        return (h(this.afElement, { key: '6dc9ed51631d90ea92f5e405d49edca25c5d800d', class: Object.assign({ 'digi-layout-columns': true }, this.cssModifiers) }, h("slot", { key: 'ffe0da97c5d4bd5d656da66441cc16367d810b0a' })));
    }
    static get is() { return "digi-layout-columns"; }
    static get encapsulation() { return "scoped"; }
    static get originalStyleUrls() {
        return {
            "$": ["layout-columns.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["layout-columns.css"]
        };
    }
    static get properties() {
        return {
            "afElement": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LayoutColumnsElement",
                    "resolved": "LayoutColumnsElement.DIV | LayoutColumnsElement.OL | LayoutColumnsElement.UL",
                    "references": {
                        "LayoutColumnsElement": {
                            "location": "import",
                            "path": "./layout-columns-element.enum",
                            "id": "src/components/_layout/layout-columns/layout-columns-element.enum.ts::LayoutColumnsElement"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set wrapper element type. can be 'div', 'ul' or 'ol'."
                        }],
                    "text": "S\u00E4tter elementtypen p\u00E5 det omslutande elementet. Kan vara 'div', 'ul' eller 'ol'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-element",
                "reflect": false,
                "defaultValue": "LayoutColumnsElement.DIV"
            },
            "afVariation": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LayoutColumnsVariation",
                    "resolved": "LayoutColumnsVariation.FOUR | LayoutColumnsVariation.NONE | LayoutColumnsVariation.ONE | LayoutColumnsVariation.THREE | LayoutColumnsVariation.TWO",
                    "references": {
                        "LayoutColumnsVariation": {
                            "location": "import",
                            "path": "./layout-columns-variation.enum",
                            "id": "src/components/_layout/layout-columns/layout-columns-variation.enum.ts::LayoutColumnsVariation"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set preset column variations. Can be 'two' or 'three'."
                        }],
                    "text": "S\u00E4tter f\u00F6rvalda kolumnvarianter. Kan vara 'two' eller 'three'."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-variation",
                "reflect": false
            },
            "afColumnGap": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "LayoutColumnsGap",
                    "resolved": "LayoutColumnsGap.DEFAULT | LayoutColumnsGap.GAP_32",
                    "references": {
                        "LayoutColumnsGap": {
                            "location": "import",
                            "path": "./layout-columns-column-gap.enum",
                            "id": "src/components/_layout/layout-columns/layout-columns-column-gap.enum.ts::LayoutColumnsGap"
                        }
                    }
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "en",
                            "text": "Set CSS-propety grid-column-gap, default is 16px (1rem).  Can be set to '32' or default."
                        }],
                    "text": "S\u00E4tter CSS-propertyn grid-column-gap, default \u00E4r 16px (1rem). Kan s\u00E4ttas till '32' eller default."
                },
                "getter": false,
                "setter": false,
                "attribute": "af-column-gap",
                "reflect": false,
                "defaultValue": "LayoutColumnsGap.DEFAULT"
            }
        };
    }
}
