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

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

@@ -0,0 +1,261 @@
+import { Host, h } from "@stencil/core";
+import { assignDescription, messageId } from "../../utils/form";
+import { PdsLabel } from "../_internal/pds-label/pds-label";
+export class PdsRadio {
+    constructor() {
+        this.handleRadioChange = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            const target = e.target;
+            const isChecked = target.checked;
+            this.pdsRadioChange.emit(isChecked);
+        };
+        this.checked = false;
+        this.disabled = false;
+        this.errorMessage = undefined;
+        this.invalid = false;
+        this.componentId = undefined;
+        this.label = undefined;
+        this.helperMessage = undefined;
+        this.name = undefined;
+        this.required = false;
+        this.value = undefined;
+    }
+    classNames() {
+        const classNames = [];
+        if (this.invalid) {
+            classNames.push('is-invalid');
+        }
+        if (this.disabled) {
+            classNames.push('is-disabled');
+        }
+        return classNames.join('  ');
+    }
+    render() {
+        return (h(Host, { key: 'e23a00c8941dfce9d9d6a99a554654b7bd2259c4', class: this.classNames() }, h("input", { key: '571d2e6656cd94573253f54028b1926a3c5e1499', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange }), h(PdsLabel, { key: '42c2c95ed36e194f43367f2c28ed81660d82b096', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+            h("div", { key: '32be02934f23b2832c6c1d0e56c3dceda8c9ccc9', class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'c670effc6a381f872800c8dd58095c2dce49016e', class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+    }
+    static get is() { return "pds-radio"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-radio.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-radio.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the radio is checked."
+                },
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the radio is disabled."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays message text describing an invalid state."
+                },
+                "attribute": "error-message",
+                "reflect": false
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the radio is invalid."
+                },
+                "attribute": "invalid",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute and the label `for` attribute."
+                },
+                "attribute": "component-id",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for label text next to radio."
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for helper message below radio."
+                },
+                "attribute": "helper-message",
+                "reflect": false
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "String used for radio `name` attribute."
+                },
+                "attribute": "name",
+                "reflect": false
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "false"
+                        }],
+                    "text": "Determines whether or not the radio is required."
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the radio that is submitted with a form."
+                },
+                "attribute": "value",
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsRadioChange",
+                "name": "pdsRadioChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits a boolean indicating whether the checkbox is currently checked or unchecked."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=pds-radio.js.map

package/dist/collection/components/pds-radio/pds-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-radio.js","sourceRoot":"","sources":["../../../src/components/pds-radio/pds-radio.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAC9E,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAO5D,MAAM,OAAO,QAAQ;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ,EAAE,EAAE;YACvC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YAED,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;YAC5C,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC;YAEjC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACtC,CAAC,CAAA;uBAhEiB,KAAK;wBAMJ,KAAK;;uBAWN,KAAK;;;;;wBA0BJ,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,CAAC;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjC,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;YAC5B,kFACoB,iBAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC/C,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,WAAW,EACpB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,iBAAiB,GAChC;YACF,EAAC,QAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI;YACxD,IAAI,CAAC,aAAa;gBACjB,4DACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf;YAEP,IAAI,CAAC,YAAY;gBAChB,4DACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAE,SAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { assignDescription, messageId } from '../../utils/form';\nimport { PdsLabel } from '../_internal/pds-label/pds-label';\n\n@Component({\n  tag: 'pds-radio',\n  styleUrl: 'pds-radio.scss',\n  scoped: true,\n})\nexport class PdsRadio {\n  /**\n   * Determines whether or not the radio is checked.\n   * @defaultValue false\n   */\n  @Prop() checked = false;\n\n  /**\n   * Determines whether or not the radio is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Displays message text describing an invalid state.\n   */\n  @Prop() errorMessage: string;\n\n  /**\n   * Determines whether or not the radio is invalid.\n   * @defaultValue false\n   */\n  @Prop() invalid = false;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * String used for label text next to radio.\n   */\n  @Prop() label: string;\n\n  /**\n   * String used for helper message below radio.\n   */\n  @Prop() helperMessage: string;\n\n  /**\n   * String used for radio `name` attribute.\n   */\n  @Prop() name: string;\n\n  /**\n   * Determines whether or not the radio is required.\n   * @defaultValue false\n   */\n  @Prop() required = false;\n\n  /**\n   * The value of the radio that is submitted with a form.\n   */\n  @Prop() value: string;\n\n  /**\n   * Emits a boolean indicating whether the checkbox is currently checked or unchecked.\n   */\n  @Event() pdsRadioChange: EventEmitter<boolean>;\n\n  private handleRadioChange = (e: Event) => {\n    if (this.disabled) {\n      return;\n    }\n\n    const target = e.target as HTMLInputElement;\n    const isChecked = target.checked;\n\n    this.pdsRadioChange.emit(isChecked);\n  }\n\n  private classNames() {\n    const classNames = [];\n\n    if (this.invalid) {\n      classNames.push('is-invalid');\n    }\n    if (this.disabled) {\n      classNames.push('is-disabled');\n    }\n\n    return classNames.join('  ');\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()}>\n        <input\n          aria-describedby={assignDescription(this.componentId, this.invalid, this.helperMessage)}\n          aria-invalid={this.invalid ? \"true\" : undefined}\n          type=\"radio\"\n          id={this.componentId}\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={this.handleRadioChange}\n        />\n        <PdsLabel htmlFor={this.componentId} text={this.label} />\n        {this.helperMessage &&\n          <div\n            class={'pds-radio__message'}\n            id={messageId(this.componentId, 'helper')}\n          >\n            {this.helperMessage}\n          </div>\n        }\n        {this.errorMessage &&\n          <div\n            class={`pds-radio__message pds-radio__message--error`}\n            id={messageId(this.componentId, 'error')}\n            aria-live=\"assertive\"\n          >\n            {this.errorMessage}\n          </div>\n        }\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/pds-radio/stories/pds-radio.stories.js

@@ -0,0 +1,71 @@
+import { html } from 'lit';
+import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  args: {
+    checked: false,
+    disabled: false,
+    invalid: false,
+    required: false,
+  },
+  argTypes: extractArgTypes('pds-radio'),
+  component: 'pds-radio',
+  decorators: [withActions],
+  parameters: {
+    actions: {
+      handles: ['onchange', 'pdsRadioChange'],
+    },
+  },
+  title: 'components/Radio',
+}
+
+const BaseTemplate = (args) =>
+  html` <pds-radio
+    component-id=${args.componentId}
+    label=${args.label}
+    checked=${args.checked}
+    disabled=${args.disabled}
+    error-message=${args.errorMessage}
+    helper-message=${args.helperMessage}
+    name=${args.name}
+    indeterminate=${args.indeterminate}
+    required=${args.required}
+    value=${args.value}
+    invalid=${args.invalid}
+  />`;
+
+export const Default = BaseTemplate.bind();
+Default.args = {
+  componentId: 'default',
+  label: 'Label text',
+};
+
+export const Checked = BaseTemplate.bind();
+Checked.args = {
+  componentId: 'checked',
+  label: 'Label text',
+  checked: true,
+};
+
+export const Disabled = BaseTemplate.bind();
+Disabled.args = {
+  componentId: 'disabled',
+  label: 'Label text',
+  disabled: true,
+};
+
+export const withMessage = BaseTemplate.bind();
+withMessage.args = {
+  componentId: 'with-message',
+  label: 'Label text',
+  helperMessage: 'This is short message text',
+};
+
+export const Invalid = BaseTemplate.bind();
+Invalid.args = {
+  componentId: 'invalid',
+  errorMessage: 'This is a short error message',
+  label: 'Label text',
+  invalid: true,
+};

package/dist/collection/components/pds-row/pds-row.css

@@ -0,0 +1,78 @@
+:host {
+  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
+  --row-gap-y: calc(var(--pine-spacing-250) / 2);
+  --row-gap-x: 10px;
+  display: block;
+  margin-block-end: calc(var(--row-gap-y) * -1);
+  margin-block-start: calc(var(--row-gap-y) * -1);
+  margin-inline-end: calc(var(--row-gap-x) * -0.5);
+  margin-inline-start: calc(var(--row-gap-x) * -0.5);
+}
+
+.pds-row {
+  display: flex;
+  flex-grow: 1;
+  flex-wrap: wrap;
+  margin-block-end: calc(var(--row-gap-y) * -1);
+  margin-block-start: calc(var(--row-gap-y) * -1);
+  margin-inline-end: calc(var(--row-gap-x) * -1);
+  margin-inline-start: calc(var(--row-gap-x) * -1);
+}
+.pds-row > * {
+  padding-block-end: calc(var(--row-gap-y));
+  padding-block-start: calc(var(--row-gap-y));
+  padding-inline-end: calc(var(--row-gap-x));
+  padding-inline-start: calc(var(--row-gap-x));
+}
+
+.pds-row--no-wrap {
+  flex-wrap: nowrap;
+}
+
+.pds-row--border {
+  border: var(--border-default);
+}
+
+.pds-justify-content-start {
+  justify-content: start;
+}
+
+.pds-justify-content-center {
+  justify-content: center;
+}
+
+.pds-justify-content-end {
+  justify-content: end;
+}
+
+.pds-justify-content-space-between {
+  justify-content: space-between;
+}
+
+.pds-justify-content-space-around {
+  justify-content: space-around;
+}
+
+.pds-justify-content-space-evenly {
+  justify-content: space-evenly;
+}
+
+.pds-align-items-start {
+  align-items: start;
+}
+
+.pds-align-items-center {
+  align-items: center;
+}
+
+.pds-align-items-end {
+  align-items: end;
+}
+
+.pds-align-items-stretch {
+  align-items: stretch;
+}
+
+.pds-align-items-baseline {
+  align-items: baseline;
+}

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

@@ -0,0 +1,186 @@
+import { h, Host } from "@stencil/core";
+export class PdsRow {
+    constructor() {
+        this.colGapMap = {
+            none: '0',
+            xxs: '.25rem',
+            xs: '.5rem',
+            sm: '1rem',
+            md: '1.5rem',
+            lg: '2.25rem',
+            xl: '3rem',
+            xxl: '4rem',
+        };
+        this.alignItems = undefined;
+        this.border = false;
+        this.colGap = undefined;
+        this.componentId = undefined;
+        this.justifyContent = undefined;
+        this.minHeight = undefined;
+        this.noWrap = false;
+    }
+    render() {
+        const rowClasses = `
+    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}
+    ${this.border ? 'pds-row--border' : ''}
+    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}
+    ${this.noWrap ? 'pds-row--no-wrap' : ''}
+  `;
+        const rowInlineStyles = Object.assign(Object.assign({}, (this.colGap && {
+            '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
+            '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',
+        })), (this.minHeight && {
+            'min-height': this.minHeight,
+        }));
+        return h(Host, { key: 'b764491968a34ae8f1e3e329111cb4ba0887bdef', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+    }
+    static get is() { return "pds-row"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-row.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-row.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 row items."
+                },
+                "attribute": "align-items",
+                "reflect": false
+            },
+            "border": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the row will have a border."
+                },
+                "attribute": "border",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "colGap": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BoxTShirtSizeType | null",
+                    "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": [],
+                    "text": "Defines the spacing between the row items."
+                },
+                "attribute": "col-gap",
+                "reflect": false
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "attribute": "component-id",
+                "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 row 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
+            },
+            "noWrap": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the row items will not wrap to the next line if horizontal space is not available."
+                },
+                "attribute": "no-wrap",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+}
+//# sourceMappingURL=pds-row.js.map

package/dist/collection/components/pds-row/pds-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pds-row.js","sourceRoot":"","sources":["../../../src/components/pds-row/pds-row.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,MAAM;;QAsCT,cAAS,GAA2C;YAC1D,IAAI,EAAE,GAAG;YACT,GAAG,EAAE,QAAQ;YACb,EAAE,EAAE,OAAO;YACX,EAAE,EAAE,MAAM;YACV,EAAE,EAAE,QAAQ;YACZ,EAAE,EAAE,SAAS;YACb,EAAE,EAAE,MAAM;YACV,GAAG,EAAE,MAAM;SACZ,CAAC;;sBArCgB,KAAK;;;;;sBA0BL,KAAK;;IAavB,MAAM;QACJ,MAAM,UAAU,GAAG;MACjB,IAAI,CAAC,UAAU,KAAK,SAAS,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,mBAAmB,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,EAAE;MAC1G,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;MACpC,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,uBAAuB,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,EAAE;MAC1H,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE;GACxC,CAAC;QAEA,MAAM,eAAe,mCAChB,CAAC,IAAI,CAAC,MAAM,IAAI;YACjB,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;YACxG,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE;SACzG,CAAC,GACC,CAAC,IAAI,CAAC,SAAS,IAAI;YACpB,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,CAAC,CACH,CAAC;QAEF,OAAO,EAAC,IAAI,qDAAC,KAAK,EAAE,WAAW,UAAU,EAAE,EAAE,KAAK,EAAE,eAAe,GAAS,CAAC;IAC/E,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\n\nimport { BoxTShirtSizeType } from '../../utils/types';\n\n@Component({\n  tag: 'pds-row',\n  styleUrl: 'pds-row.scss',\n})\nexport class PdsRow {\n  /**\n   * Defines the vertical alignment of the row items.\n   * @defaultValue start\n   */\n  @Prop() alignItems?: `start` | `center` | `end` | `baseline` | `stretch`;\n\n  /**\n   * If `true`, the row will have a border.\n   */\n  @Prop() border? = false;\n\n  /**\n   * Defines the spacing between the row items.\n   */\n  @Prop() colGap?: BoxTShirtSizeType | null;\n\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Defines the horizontal alignment of the row items.\n   * @defaultValue start\n   */\n  @Prop() justifyContent?: `start` | `center` | `end` | `space-between` | `space-around`;\n\n  /**\n   * The minimum height of the row. Used in conjunction with alignment props\n   */\n  @Prop() minHeight?: string;\n\n  /**\n   * If `true`, the row items will not wrap to the next line if horizontal space is not available.\n   */\n  @Prop() noWrap? = false;\n\n  private colGapMap: { [key in BoxTShirtSizeType]: string } = {\n    none: '0',\n    xxs: '.25rem',\n    xs: '.5rem',\n    sm: '1rem',\n    md: '1.5rem',\n    lg: '2.25rem',\n    xl: '3rem',\n    xxl: '4rem',\n  };\n\n  render() {\n    const rowClasses = `\n    ${this.alignItems !== undefined && this.alignItems.trim() !== '' ? `pds-align-items-${this.alignItems}` : ''}\n    ${this.border ? 'pds-row--border' : ''}\n    ${this.justifyContent !== undefined && this.justifyContent.trim() !== '' ? `pds-justify-content-${this.justifyContent}` : ''}\n    ${this.noWrap ? 'pds-row--no-wrap' : ''}\n  `;\n\n    const rowInlineStyles = {\n      ...(this.colGap && {\n        '--row-gap-x': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n        '--row-gap-y': this.colGap !== undefined && this.colGap.trim() !== '' ? this.colGapMap[this.colGap] : '',\n      }),\n      ...(this.minHeight && {\n        'min-height': this.minHeight,\n      }),\n    };\n\n    return <Host class={`pds-row ${rowClasses}`} style={rowInlineStyles}></Host>;\n  }\n}\n"]}