import { h, Host } from "@stencil/core";
export class DgaFlex {
    constructor() {
        /** Direction of stack items: 'row' (horizontal) or 'column' (vertical) */
        this.direction = 'row';
        /** Spacing between stack items */
        this.spacing = 0;
        /** Horizontal alignment of stack items */
        this.align = 'start';
        /** Vertical alignment of stack items */
        this.justify = 'start';
        /** Controls if items should wrap */
        this.wrap = false;
    }
    render() {
        const styles = {
            display: 'flex',
            flexDirection: this.direction,
            gap: `${this.spacing}px`,
            alignItems: this.align,
            justifyContent: this.justify === 'between' ? 'space-between' : this.justify,
            flexWrap: this.wrap ? 'wrap' : 'nowrap',
        };
        return (h(Host, { key: '63eca122d0ce7a0b8340b76c9a89d9f8cd6b3004', style: styles }, h("slot", { key: 'cf5b1583a460cf73fc413cbc23a073d093b70ddb' })));
    }
    static get is() { return "dga-flex"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["dga-flex.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["dga-flex.css"]
        };
    }
    static get properties() {
        return {
            "direction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'row' | 'column'",
                    "resolved": "\"column\" | \"row\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Direction of stack items: 'row' (horizontal) or 'column' (vertical)"
                },
                "getter": false,
                "setter": false,
                "attribute": "direction",
                "reflect": false,
                "defaultValue": "'row'"
            },
            "spacing": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Spacing between stack items"
                },
                "getter": false,
                "setter": false,
                "attribute": "spacing",
                "reflect": false,
                "defaultValue": "0"
            },
            "align": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'start' | 'center' | 'end' | 'stretch'",
                    "resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Horizontal alignment of stack items"
                },
                "getter": false,
                "setter": false,
                "attribute": "align",
                "reflect": false,
                "defaultValue": "'start'"
            },
            "justify": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "'start' | 'center' | 'end' | 'between'",
                    "resolved": "\"between\" | \"center\" | \"end\" | \"start\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Vertical alignment of stack items"
                },
                "getter": false,
                "setter": false,
                "attribute": "justify",
                "reflect": false,
                "defaultValue": "'start'"
            },
            "wrap": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Controls if items should wrap"
                },
                "getter": false,
                "setter": false,
                "attribute": "wrap",
                "reflect": false,
                "defaultValue": "false"
            }
        };
    }
}
//# sourceMappingURL=dga-flex.js.map
