@pine-ds/core 1.3.0-dev.2 → 1.3.0-dev.4

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

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