@pine-ds/core 1.1.0 → 1.3.0-dev.0

package/dist/collection/components/pds-box/pds-box.js

@@ -1,678 +0,0 @@
-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