import { h, Host } from "@stencil/core";
export class PdsBox {
    constructor() {
        this.alignItems = undefined;
        this.auto = undefined;
        this.backgroundColor = undefined;
        this.border = false;
        this.borderColor = undefined;
        this.borderRadius = undefined;
        this.direction = undefined;
        this.display = undefined;
        this.fit = undefined;
        this.gap = undefined;
        this.flex = undefined;
        this.justifyContent = undefined;
        this.minHeight = undefined;
        this.minWidth = undefined;
        this.offset = undefined;
        this.offsetXs = undefined;
        this.offsetSm = undefined;
        this.offsetMd = undefined;
        this.offsetLg = undefined;
        this.offsetXl = undefined;
        this.padding = undefined;
        this.shadow = undefined;
        this.size = undefined;
        this.sizeXs = undefined;
        this.sizeSm = undefined;
        this.sizeMd = undefined;
        this.sizeLg = undefined;
        this.sizeXl = undefined;
    }
    render() {
        const boxClasses = `
    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
    ${this.auto ? 'pds-box--auto' : ''}
    ${this.border ? 'pds-box--border' : ''}
    ${this.borderRadius !== undefined && this.borderRadius.trim() !== '' ? `pds-border-radius-${this.borderRadius}` : ''}
    ${this.direction !== undefined && this.direction.trim() !== '' ? `pds-box-direction-${this.direction}` : ''}
    ${this.display !== undefined && this.display.trim() !== '' ? `pds-box--display-${this.display}` : ''}
    ${this.fit ? 'pds-box--fit' : ''}
    ${this.gap !== undefined && this.gap.trim() !== '' ? `pds-box-gap-${this.gap}` : ''}
    ${this.flex !== undefined && this.flex.trim() !== '' ? `pds-box--flex-${this.flex}` : ''}
    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
    ${this.offset !== undefined && this.offset.trim() !== '' ? `pds-box-offset-${this.offset}` : ''}
    ${this.offsetXs !== undefined && this.offsetXs.trim() !== '' ? `pds-box-offset-xs-${this.offsetXs}` : ''}
    ${this.offsetSm !== undefined && this.offsetSm.trim() !== '' ? `pds-box-offset-sm-${this.offsetSm}` : ''}
    ${this.offsetMd !== undefined && this.offsetMd.trim() !== '' ? `pds-box-offset-md-${this.offsetMd}` : ''}
    ${this.offsetLg !== undefined && this.offsetLg.trim() !== '' ? `pds-box-offset-lg-${this.offsetLg}` : ''}
    ${this.offsetXl !== undefined && this.offsetXl.trim() !== '' ? `pds-box-offset-xl-${this.offsetXl}` : ''}
    ${this.padding !== undefined && this.padding.trim() !== '' ? `pds-padding-${this.padding}` : ''}
    ${this.shadow !== undefined && this.shadow.trim() !== '' ? `pds-shadow-${this.shadow}` : ''}
    ${this.size !== undefined && this.size.trim() !== '' ? `pds-box pds-box-${this.size}` : ''}
    ${this.sizeXs !== undefined && this.sizeXs.trim() !== '' ? `pds-box-xs-${this.sizeXs}` : ''}
    ${this.sizeSm !== undefined && this.sizeSm.trim() !== '' ? `pds-box-sm-${this.sizeSm}` : ''}
    ${this.sizeMd !== undefined && this.sizeMd.trim() !== '' ? `pds-box-md-${this.sizeMd}` : ''}
    ${this.sizeLg !== undefined && this.sizeLg.trim() !== '' ? `pds-box-lg-${this.sizeLg}` : ''}
    ${this.sizeXl !== undefined && this.sizeXl.trim() !== '' ? `pds-box-xl-${this.sizeXl}` : ''}
    ${this.size == undefined &&
            this.sizeSm == undefined &&
            this.sizeMd == undefined &&
            this.sizeLg == undefined &&
            this.sizeXl == undefined ? 'pds-box' : ''}
    `;
        const boxInlineStyles = Object.assign(Object.assign(Object.assign(Object.assign({}, (this.backgroundColor && { '--color-background-box': this.backgroundColor })), (this.borderColor && { '--color-border-box': this.borderColor })), (this.minHeight && { '--sizing-min-height-box': this.minHeight })), (this.minWidth && { '--sizing-min-height-box': this.minWidth }));
        return (h(Host, { key: '5293f99d80187d4345c4e7120bb1dd53887b4065', class: boxClasses, style: boxInlineStyles }));
    }
    static get is() { return "pds-box"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-box.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-box.css"]
        };
    }
    static get properties() {
        return {
            "alignItems": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`start` | `center` | `end` | `baseline` | `stretch`",
                    "resolved": "\"baseline\" | \"center\" | \"end\" | \"start\" | \"stretch\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "start"
                        }],
                    "text": "Defines the vertical alignment of the box items."
                },
                "attribute": "align-items",
                "reflect": false
            },
            "auto": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the box will be sized to fit its contents."
                },
                "attribute": "auto",
                "reflect": false
            },
            "backgroundColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the background-color of the box."
                },
                "attribute": "background-color",
                "reflect": false
            },
            "border": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, the box will have a border."
                },
                "attribute": "border",
                "reflect": false,
                "defaultValue": "false"
            },
            "borderColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Defines the border color of the box."
                },
                "attribute": "border-color",
                "reflect": false
            },
            "borderRadius": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`none` | `xs`| `sm` | `md` | `lg` | `circle`",
                    "resolved": "\"circle\" | \"lg\" | \"md\" | \"none\" | \"sm\" | \"xs\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "none"
                        }],
                    "text": "Defines how rounded the box corners are."
                },
                "attribute": "border-radius",
                "reflect": false
            },
            "direction": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`row` | `column`",
                    "resolved": "\"column\" | \"row\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "row"
                        }],
                    "text": "Defines the orientation of the box items."
                },
                "attribute": "direction",
                "reflect": false
            },
            "display": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`flex` | `inline-flex` | `block` | `inline-block`",
                    "resolved": "\"block\" | \"flex\" | \"inline-block\" | \"inline-flex\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "flex"
                        }],
                    "text": "Defines the display style of the box."
                },
                "attribute": "display",
                "reflect": false
            },
            "fit": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "If `true`, sets the box `max-width` to `100%`."
                },
                "attribute": "fit",
                "reflect": false
            },
            "gap": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxTShirtSizeType",
                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                    "references": {
                        "BoxTShirtSizeType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxTShirtSizeType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "none"
                        }],
                    "text": "Defines the spacing between the box items."
                },
                "attribute": "gap",
                "reflect": false
            },
            "flex": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`none` | `grow` | `shrink`",
                    "resolved": "\"grow\" | \"none\" | \"shrink\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "none"
                        }],
                    "text": "Defines how a box will grow or shrink to fit the space available in its container."
                },
                "attribute": "flex",
                "reflect": false
            },
            "justifyContent": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "`start` | `center` | `end` | `space-between` | `space-around`",
                    "resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"start\"",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "start"
                        }],
                    "text": "Defines the horizontal alignment of the box items."
                },
                "attribute": "justify-content",
                "reflect": false
            },
            "minHeight": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The minimum height of the row. Used in conjunction with alignment props"
                },
                "attribute": "min-height",
                "reflect": false
            },
            "minWidth": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The minimum width of the row. Used in conjunction with alignment props"
                },
                "attribute": "min-width",
                "reflect": false
            },
            "offset": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxColumnType",
                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
                    "references": {
                        "BoxColumnType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxColumnType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Move columns to the end direction of the row for all screen sizes. Increases the starting margin of a column by specified number of columns."
                },
                "attribute": "offset",
                "reflect": false
            },
            "offsetXs": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxColumnType",
                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
                    "references": {
                        "BoxColumnType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxColumnType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Move columns to the end direction of the row for `XS` screen sizes. Increases the starting margin of a column by specified number of columns."
                },
                "attribute": "offset-xs",
                "reflect": false
            },
            "offsetSm": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxColumnType",
                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
                    "references": {
                        "BoxColumnType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxColumnType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Move columns to the end direction of the row for `SM` screen sizes. Increases the starting margin of a column by specified number of columns."
                },
                "attribute": "offset-sm",
                "reflect": false
            },
            "offsetMd": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxColumnType",
                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
                    "references": {
                        "BoxColumnType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxColumnType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Move columns to the end direction of the row for `MD` screen sizes. Increases the starting margin of a column by specified number of columns."
                },
                "attribute": "offset-md",
                "reflect": false
            },
            "offsetLg": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxColumnType",
                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
                    "references": {
                        "BoxColumnType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxColumnType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Move columns to the end direction of the row for `LG` screen sizes. Increases the starting margin of a column by specified number of columns."
                },
                "attribute": "offset-lg",
                "reflect": false
            },
            "offsetXl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxColumnType",
                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
                    "references": {
                        "BoxColumnType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxColumnType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Move columns to the end direction of the row for `XL` screen sizes. Increases the starting margin of a column by specified number of columns."
                },
                "attribute": "offset-xl",
                "reflect": false
            },
            "padding": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxTShirtSizeType",
                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                    "references": {
                        "BoxTShirtSizeType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxTShirtSizeType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "none"
                        }],
                    "text": "Defines the spacing between the box items."
                },
                "attribute": "padding",
                "reflect": false
            },
            "shadow": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxTShirtSizeType",
                    "resolved": "\"lg\" | \"md\" | \"none\" | \"sm\" | \"xl\" | \"xs\" | \"xxl\" | \"xxs\"",
                    "references": {
                        "BoxTShirtSizeType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxTShirtSizeType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "none"
                        }],
                    "text": "Defines the box shadow."
                },
                "attribute": "shadow",
                "reflect": false
            },
            "size": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxColumnType",
                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
                    "references": {
                        "BoxColumnType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxColumnType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "Size of the column for all screen sizes that are not explicitly set."
                },
                "attribute": "size",
                "reflect": false
            },
            "sizeXs": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxColumnType",
                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
                    "references": {
                        "BoxColumnType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxColumnType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "At screen sizes less than the `XS` breakpoint, this will take the number of columns specified."
                },
                "attribute": "size-xs",
                "reflect": false
            },
            "sizeSm": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxColumnType",
                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
                    "references": {
                        "BoxColumnType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxColumnType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "At screen sizes greater than the `SM` breakpoint, this will take the number of columns specified."
                },
                "attribute": "size-sm",
                "reflect": false
            },
            "sizeMd": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxColumnType",
                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
                    "references": {
                        "BoxColumnType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxColumnType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "At screen sizes greater than the `MD` breakpoint, this will take the number of columns specified."
                },
                "attribute": "size-md",
                "reflect": false
            },
            "sizeLg": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxColumnType",
                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
                    "references": {
                        "BoxColumnType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxColumnType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "At screen sizes greater than the `LG` breakpoint, this will take the number of columns specified."
                },
                "attribute": "size-lg",
                "reflect": false
            },
            "sizeXl": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "BoxColumnType",
                    "resolved": "\"0\" | \"1\" | \"10\" | \"11\" | \"12\" | \"2\" | \"3\" | \"4\" | \"5\" | \"6\" | \"7\" | \"8\" | \"9\"",
                    "references": {
                        "BoxColumnType": {
                            "location": "import",
                            "path": "../../utils/types",
                            "id": "src/utils/types.ts::BoxColumnType"
                        }
                    }
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "At screen sizes greater than the `XL` breakpoint, this will take the number of columns specified."
                },
                "attribute": "size-xl",
                "reflect": false
            }
        };
    }
}
//# sourceMappingURL=pds-box.js.map
