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

package/dist/cjs/pds-radio.cjs.entry.js

@@ -0,0 +1,54 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-11f95019.js');
+const pdsLabel = require('./pds-label-7acec6ab.js');
+
+const pdsRadioCss = ".sc-pds-radio-h{--border-interactive-default:var(--pine-border-width-thin) solid var( --pine-color-grey-400);--border-radius:50%;--box-shadow-focus:0 0 0 2px var(--color-focus);--box-shadow-focus-error:0 0 0 2px var(--color-invalid-focus);--color:var(--pine-color-charcoal-200);--color-background:var(--pine-color-white);--color-background-hover:var(--pine-color-grey-100);--color-background-disabled:var(--pine-color-grey-200);--color-border-hover:var(--pine-color-grey-500);--color-border-disabled:var(--pine-color-grey-300);--color-checked:var(--pine-color-charcoal-500);--color-disabled:var(---pine-color-grey-500);--color-focus:var(--pine-color-blue-200);--color-invalid:var(--pine-color-red-300);--color-invalid-focus:var(--pine-color-red-200);--font-size:var(--pine-font-size-087);--sizing-check-size:6px;--sizing-input-size:16px;--sizing-margin-block-start:6px;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-flow:row wrap;flex-flow:row wrap}.is-invalid.sc-pds-radio-h input.sc-pds-radio{border-color:var(--color-invalid)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:checked{background:var(--color-invalid)}.is-invalid.sc-pds-radio-h input.sc-pds-radio:focus-visible{-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error);outline:none}.is-invalid.sc-pds-radio-h label.sc-pds-radio,.is-invalid.sc-pds-radio-h .pds-radio__message--error.sc-pds-radio{color:var(--color-invalid)}input.sc-pds-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:var(--border-interactive-default);border-radius:var(--border-radius);height:var(--sizing-input-size);margin:0;position:relative;width:var(--sizing-input-size)}input.sc-pds-radio:hover{background:var(--color-background-hover);border-color:var(--color-border-hover)}input.sc-pds-radio:checked{background:var(--color-checked);border-color:var(--color-checked)}input.sc-pds-radio:checked::after{background:var(--color-background);border-radius:50%;content:\"\";display:block;height:var(--sizing-check-size);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--sizing-check-size)}input.sc-pds-radio:disabled{background:var(--color-background-disabled);border-color:var(--color-border-disabled);cursor:not-allowed}input.sc-pds-radio:disabled:checked{background:var(--color-disabled);border-color:var(--color-border-disabled)}input.sc-pds-radio:disabled:checked::after{border-color:var(--color-border-disabled)}input.sc-pds-radio:disabled+label.sc-pds-radio{color:var(--color-border-hover);cursor:not-allowed}input.sc-pds-radio:disabled~.pds-radio__message.sc-pds-radio{color:var(--color-disabled)}input.sc-pds-radio:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}label.sc-pds-radio{-webkit-margin-start:10px;margin-inline-start:10px}.pds-radio__message.sc-pds-radio{color:var(--color);font-size:var(--font-size);-webkit-margin-before:var(--sizing-margin-block-start);margin-block-start:var(--sizing-margin-block-start);-webkit-margin-start:26px;margin-inline-start:26px;width:100%}";
+const PdsRadioStyle0 = pdsRadioCss;
+
+const PdsRadio = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pdsRadioChange = index.createEvent(this, "pdsRadioChange", 7);
+        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 (index.h(index.Host, { key: 'e23a00c8941dfce9d9d6a99a554654b7bd2259c4', class: this.classNames() }, index.h("input", { key: '571d2e6656cd94573253f54028b1926a3c5e1499', "aria-describedby": pdsLabel.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 }), index.h(pdsLabel.PdsLabel, { key: '42c2c95ed36e194f43367f2c28ed81660d82b096', htmlFor: this.componentId, text: this.label }), this.helperMessage &&
+            index.h("div", { key: '32be02934f23b2832c6c1d0e56c3dceda8c9ccc9', class: 'pds-radio__message', id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            index.h("div", { key: 'c670effc6a381f872800c8dd58095c2dce49016e', class: `pds-radio__message pds-radio__message--error`, id: pdsLabel.messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+    }
+};
+PdsRadio.style = PdsRadioStyle0;
+
+exports.pds_radio = PdsRadio;
+
+//# sourceMappingURL=pds-radio.cjs.entry.js.map

package/dist/cjs/pds-radio.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pds-radio.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,skGAAskG,CAAC;AAC3lG,uBAAe,WAAW;;MCQb,QAAQ;;;;QA4DX,sBAAiB,GAAG,CAAC,CAAQ;YACnC,IAAI,IAAI,CAAC,QAAQ,EAAE;gBACjB,OAAO;aACR;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;SACrC,CAAA;uBAhEiB,KAAK;wBAMJ,KAAK;;uBAWN,KAAK;;;;;wBA0BJ,KAAK;;;IAuBhB,UAAU;QAChB,MAAM,UAAU,GAAG,EAAE,CAAC;QAEtB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SAC/B;QACD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;SAChC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC9B;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC5BD,wFACoBE,0BAAiB,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,kBACzE,IAAI,CAAC,OAAO,GAAG,MAAM,GAAG,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,EACFF,QAACG,iBAAQ,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,GAAI,EACxD,IAAI,CAAC,aAAa;YACjBH,kEACE,KAAK,EAAE,oBAAoB,EAC3B,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,QAAQ,CAAC,IAExC,IAAI,CAAC,aAAa,CACf,EAEP,IAAI,CAAC,YAAY;YAChBJ,kEACE,KAAK,EAAE,8CAA8C,EACrD,EAAE,EAAEI,kBAAS,CAAC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC,eAC9B,WAAW,IAEpB,IAAI,CAAC,YAAY,CACd,CAEH,EACP;KACH;;;;;;","names":["h","Host","assignDescription","PdsLabel","messageId"],"sources":["src/components/pds-radio/pds-radio.scss?tag=pds-radio&encapsulation=scoped","src/components/pds-radio/pds-radio.tsx"],"sourcesContent":[":host {\n  --border-interactive-default: var(--pine-border-width-thin) solid var( --pine-color-grey-400);\n  --border-radius: 50%;\n\n  --box-shadow-focus: 0 0 0 2px var(--color-focus);\n  --box-shadow-focus-error: 0 0 0 2px var(--color-invalid-focus);\n\n  --color: var(--pine-color-charcoal-200);\n  --color-background: var(--pine-color-white);\n  --color-background-hover: var(--pine-color-grey-100);\n  --color-background-disabled: var(--pine-color-grey-200);\n  --color-border-hover: var(--pine-color-grey-500);\n  --color-border-disabled: var(--pine-color-grey-300);\n  --color-checked: var(--pine-color-charcoal-500);\n  --color-disabled: var(---pine-color-grey-500);\n  --color-focus: var(--pine-color-blue-200);\n  --color-invalid: var(--pine-color-red-300);\n  --color-invalid-focus: var(--pine-color-red-200);\n\n  --font-size: var(--pine-font-size-087);\n\n  --sizing-check-size: 6px;\n  --sizing-input-size: 16px;\n  --sizing-margin-block-start: 6px;\n\n  align-items: center;\n  display: flex;\n  flex-flow: row wrap;\n}\n\n:host(.is-invalid) {\n  input {\n    border-color: var(--color-invalid);\n\n    &:checked {\n      background: var(--color-invalid);\n    }\n\n    &:focus-visible {\n      box-shadow: var(--box-shadow-focus-error);\n      outline: none;\n    }\n  }\n\n  label,\n  .pds-radio__message--error {\n    color: var(--color-invalid);\n  }\n}\n\ninput {\n  appearance: none;\n  border: var(--border-interactive-default);\n  border-radius: var(--border-radius);\n  height: var(--sizing-input-size);\n  margin: 0;\n  position: relative;\n  width: var(--sizing-input-size);\n\n  &:hover {\n    background: var(--color-background-hover);\n    border-color: var(--color-border-hover);\n  }\n\n  &:checked {\n    background: var(--color-checked);\n    border-color: var(--color-checked);\n\n    &::after {\n      background: var(--color-background);\n      border-radius: 50%;\n      content: \"\";\n      display: block;\n      height: var(--sizing-check-size);\n      left: 50%;\n      position: absolute;\n      top: 50%;\n      transform: translate(-50%, -50%);\n      width: var(--sizing-check-size);\n    }\n  }\n\n  &:disabled {\n    background: var(--color-background-disabled);\n    border-color: var(--color-border-disabled);\n    cursor: not-allowed;\n\n    &:checked {\n      background: var(--color-disabled);\n      border-color: var(--color-border-disabled);\n\n      &::after {\n        border-color: var(--color-border-disabled);\n      }\n    }\n\n    + label {\n      color: var(--color-border-hover);\n      cursor: not-allowed;\n    }\n\n    ~ .pds-radio__message {\n      color: var(--color-disabled);\n    }\n  }\n\n  &:focus-visible {\n    box-shadow: var(--box-shadow-focus);\n    outline: none;\n  }\n\n}\n\nlabel {\n  margin-inline-start: 10px;\n}\n\n.pds-radio__message {\n  color: var(--color);\n  font-size: var(--font-size);\n  margin-block-start: var(--sizing-margin-block-start);\n  margin-inline-start: 26px;\n  width: 100%;\n}\n","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"],"version":3}

package/dist/cjs/pds-row.cjs.entry.js

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-11f95019.js');
+
+const pdsRowCss = ":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;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -0.5);margin-inline-end:calc(var(--row-gap-x) * -0.5);-webkit-margin-start:calc(var(--row-gap-x) * -0.5);margin-inline-start:calc(var(--row-gap-x) * -0.5)}.pds-row{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-margin-after:calc(var(--row-gap-y) * -1);margin-block-end:calc(var(--row-gap-y) * -1);-webkit-margin-before:calc(var(--row-gap-y) * -1);margin-block-start:calc(var(--row-gap-y) * -1);-webkit-margin-end:calc(var(--row-gap-x) * -1);margin-inline-end:calc(var(--row-gap-x) * -1);-webkit-margin-start:calc(var(--row-gap-x) * -1);margin-inline-start:calc(var(--row-gap-x) * -1)}.pds-row>*{-webkit-padding-after:calc(var(--row-gap-y));padding-block-end:calc(var(--row-gap-y));-webkit-padding-before:calc(var(--row-gap-y));padding-block-start:calc(var(--row-gap-y));-webkit-padding-end:calc(var(--row-gap-x));padding-inline-end:calc(var(--row-gap-x));-webkit-padding-start:calc(var(--row-gap-x));padding-inline-start:calc(var(--row-gap-x))}.pds-row--no-wrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.pds-row--border{border:var(--border-default)}.pds-justify-content-start{-ms-flex-pack:start;justify-content:start}.pds-justify-content-center{-ms-flex-pack:center;justify-content:center}.pds-justify-content-end{-ms-flex-pack:end;justify-content:end}.pds-justify-content-space-between{-ms-flex-pack:justify;justify-content:space-between}.pds-justify-content-space-around{-ms-flex-pack:distribute;justify-content:space-around}.pds-justify-content-space-evenly{-ms-flex-pack:space-evenly;justify-content:space-evenly}.pds-align-items-start{-ms-flex-align:start;align-items:start}.pds-align-items-center{-ms-flex-align:center;align-items:center}.pds-align-items-end{-ms-flex-align:end;align-items:end}.pds-align-items-stretch{-ms-flex-align:stretch;align-items:stretch}.pds-align-items-baseline{-ms-flex-align:baseline;align-items:baseline}";
+const PdsRowStyle0 = pdsRowCss;
+
+const PdsRow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        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 index.h(index.Host, { key: 'b764491968a34ae8f1e3e329111cb4ba0887bdef', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+    }
+};
+PdsRow.style = PdsRowStyle0;
+
+exports.pds_row = PdsRow;
+
+//# sourceMappingURL=pds-row.cjs.entry.js.map

package/dist/cjs/pds-row.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pds-row.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,wvEAAwvE,CAAC;AAC3wE,qBAAe,SAAS;;MCOX,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,GAAG,mBAAmB,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE;MAC1G,IAAI,CAAC,MAAM,GAAG,iBAAiB,GAAG,EAAE;MACpC,IAAI,CAAC,cAAc,KAAK,SAAS,IAAI,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,uBAAuB,IAAI,CAAC,cAAc,EAAE,GAAG,EAAE;MAC1H,IAAI,CAAC,MAAM,GAAG,kBAAkB,GAAG,EAAE;GACxC,CAAC;QAEA,MAAM,eAAe,oCACf,IAAI,CAAC,MAAM,IAAI;YACjB,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;YACxG,aAAa,EAAE,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;SACzG,KACG,IAAI,CAAC,SAAS,IAAI;YACpB,YAAY,EAAE,IAAI,CAAC,SAAS;SAC7B,EACF,CAAC;QAEF,OAAOA,QAACC,UAAI,qDAAC,KAAK,EAAE,WAAW,UAAU,EAAE,EAAE,KAAK,EAAE,eAAe,GAAS,CAAC;KAC9E;;;;;;","names":["h","Host"],"sources":["src/components/pds-row/pds-row.scss?tag=pds-row","src/components/pds-row/pds-row.tsx"],"sourcesContent":[":host {\n  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n  --row-gap-y: calc(var(--pine-spacing-250) / 2);\n  --row-gap-x: 10px;\n\n  display: block;\n  margin-block-end: calc(var(--row-gap-y) * -1);\n  margin-block-start: calc(var(--row-gap-y) * -1);\n  margin-inline-end: calc(var(--row-gap-x) * -0.5);\n  margin-inline-start: calc(var(--row-gap-x) * -0.5);\n}\n\n.pds-row {\n  display: flex;\n  flex-grow: 1;\n  flex-wrap: wrap;\n  margin-block-end: calc(var(--row-gap-y) * -1);\n  margin-block-start: calc(var(--row-gap-y) * -1);\n  margin-inline-end: calc(var(--row-gap-x) * -1);\n  margin-inline-start: calc(var(--row-gap-x) * -1);\n\n  > * {\n    padding-block-end: calc(var(--row-gap-y));\n    padding-block-start: calc(var(--row-gap-y));\n    padding-inline-end: calc(var(--row-gap-x));\n    padding-inline-start: calc(var(--row-gap-x));\n  }\n}\n\n.pds-row--no-wrap {\n  flex-wrap: nowrap;\n}\n\n.pds-row--border {\n  border: var(--border-default);\n}\n\n// Justify Content helpers\n.pds-justify-content-start {\n  justify-content: start;\n}\n\n.pds-justify-content-center {\n  justify-content: center;\n}\n\n.pds-justify-content-end {\n  justify-content: end;\n}\n\n.pds-justify-content-space-between {\n  justify-content: space-between;\n}\n\n.pds-justify-content-space-around {\n  justify-content: space-around;\n}\n\n.pds-justify-content-space-evenly {\n  justify-content: space-evenly;\n}\n\n// Align Items helpers\n.pds-align-items-start {\n  align-items: start;\n}\n\n.pds-align-items-center {\n  align-items: center;\n}\n\n.pds-align-items-end {\n  align-items: end;\n}\n\n.pds-align-items-stretch {\n  align-items: stretch;\n}\n\n.pds-align-items-baseline {\n  align-items: baseline;\n}\n","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"],"version":3}

package/dist/cjs/pds-sortable-item.cjs.entry.js

@@ -0,0 +1,35 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-11f95019.js');
+const index$1 = require('./index-dd191bbe.js');
+
+const pdsSortableItemCss = ".pds-sortable-item.sc-pds-sortable-item-h{--border-radius:var(--pine-border-radius-125);--border-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--box-shadow:var(--pine-box-shadow-lg);--color-background-default:var(--pine-color-white);--color-background-interactive:var(--pine-color-grey-200);--color-interactive-handle:var(--pine-color-blue-300);--spacing-margin-inline-end:var(--pine-spacing-300);--spacing-padding-block-xs:var(--pine-spacing-100);--spacing-padding-inline:var(--pine-spacing-300);--spacing-padding-inline-start:var(--pine-spacing-300);-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;padding-block:var(--spacing-padding-block-xs);padding-inline:var(--spacing-padding-inline)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__actions.sc-pds-sortable-item{-webkit-margin-start:auto;margin-inline-start:auto;-webkit-padding-start:var(--spacing-padding-inline-start);padding-inline-start:var(--spacing-padding-inline-start)}.pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{line-height:1;-webkit-margin-end:var(--spacing-margin-inline-end);margin-inline-end:var(--spacing-margin-inline-end)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:first-child{border-start-end-radius:var(--border-radius);border-start-start-radius:var(--border-radius)}.pds-sortable--bordered .pds-sortable-item.sc-pds-sortable-item-h:last-child{border-end-end-radius:var(--border-radius);border-end-start-radius:var(--border-radius)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h{-webkit-border-after:var(--border-default);border-block-end:var(--border-default)}.pds-sortable--divided .pds-sortable-item.sc-pds-sortable-item-h:last-child{-webkit-border-after:0;border-block-end:0}.pds-sortable--handle-type-row .pds-sortable-item.sc-pds-sortable-item-h{cursor:-webkit-grab;cursor:grab}.pds-sortable--handle-type-handle .pds-sortable-item.sc-pds-sortable-item-h .pds-sortable-item__handle.sc-pds-sortable-item{cursor:-webkit-grab;cursor:grab}.pds-sortable-item.sc-pds-sortable-item-h:hover{background-color:var(--color-background-interactive)}.pds-sortable-item.sc-pds-sortable-item-h:hover pds-icon.sc-pds-sortable-item{color:var(--color-interactive-handle)}.pds-sortable-item--drag.sc-pds-sortable-item-h{background-color:var(--color-background-default);border-radius:0;-webkit-box-shadow:var(--box-shadow);box-shadow:var(--box-shadow);opacity:1}.pds-sortable-item--ghost.sc-pds-sortable-item-h{background-color:var(--color-background-interactive);border-radius:0}";
+const PdsSortableItemStyle0 = pdsSortableItemCss;
+
+const PdsSortableItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.enableActions = false;
+        this.componentId = undefined;
+        this.showHandle = false;
+    }
+    componentWillRender() {
+        // When the parent sortable has a type of 'handle', the sortable items
+        // will automatically set showHandle to 'true'.
+        this.sortableRef = this.el.closest('pds-sortable');
+        if (this.sortableRef && this.sortableRef.handleType === 'handle') {
+            this.showHandle = true;
+        }
+    }
+    render() {
+        return (index.h(index.Host, { key: '60214e183314736338f9b38cb93a9c5989e16cdf', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (index.h("div", { key: '7cc252c99598f384a87518c101d0772a4ce344e4', class: "pds-sortable-item__handle" }, index.h("pds-icon", { key: 'e2b219927cf717fa53112066ba3fe0ac12688edd', icon: index$1.handle }))), index.h("slot", { key: 'e259bfbf7e8c848567d07639e62adfe5781f29b8' }), this.enableActions && (index.h("div", { key: 'e83d28d55b6fee971575433a3e3f8b1d5b7e52fe', class: "pds-sortable-item__actions" }, index.h("slot", { key: '7ac52a8109e49cfff96cead45a3b318646c7f064', name: "sortable-item-actions" })))));
+    }
+    get el() { return index.getElement(this); }
+};
+PdsSortableItem.style = PdsSortableItemStyle0;
+
+exports.pds_sortable_item = PdsSortableItem;
+
+//# sourceMappingURL=pds-sortable-item.cjs.entry.js.map

package/dist/cjs/pds-sortable-item.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"pds-sortable-item.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,iiFAAiiF,CAAC;AAC7jF,8BAAe,kBAAkB;;MCUpB,eAAe;;;6BAOF,KAAK;;0BAWS,KAAK;;IAE3C,mBAAmB;;;QAGjB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,cAAc,CAA2B,CAAC;QAE7E,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,KAAK,QAAQ,EAAE;YAChE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;SACxB;KACF;IAED,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,IACjD,IAAI,CAAC,UAAU,KACdD,kEAAK,KAAK,EAAC,2BAA2B,IACpCA,uEAAU,IAAI,EAAEE,cAAU,GAAa,CACnC,CACP,EACDF,oEAAa,EACZ,IAAI,CAAC,aAAa,KACjBA,kEAAK,KAAK,EAAC,4BAA4B,IACrCA,mEAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACP,CACI,EACP;KACH;;;;;;;","names":["h","Host","handleIcon"],"sources":["src/components/pds-sortable/pds-sortable-item/pds-sortable-item.scss?tag=pds-sortable-item&encapsulation=scoped","src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx"],"sourcesContent":[":host(.pds-sortable-item) {\n  --border-radius: var(--pine-border-radius-125);\n\n  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);\n\n  --box-shadow: var(--pine-box-shadow-lg);\n\n  --color-background-default: var(--pine-color-white);\n  --color-background-interactive: var(--pine-color-grey-200);\n  --color-interactive-handle: var(--pine-color-blue-300);\n\n  --spacing-margin-inline-end: var(--pine-spacing-300);\n  --spacing-padding-block-xs: var(--pine-spacing-100);\n  --spacing-padding-inline: var(--pine-spacing-300);\n  --spacing-padding-inline-start: var(--pine-spacing-300);\n\n  align-items: center;\n  display: flex;\n  padding-block: var(--spacing-padding-block-xs);\n  padding-inline: var(--spacing-padding-inline);\n\n  .pds-sortable-item__actions {\n    margin-inline-start: auto;\n    padding-inline-start: var(--spacing-padding-inline-start);\n  }\n\n  .pds-sortable-item__handle {\n    line-height: 1;\n    margin-inline-end: var(--spacing-margin-inline-end);\n  }\n\n  // styles when sortable is bordered\n  .pds-sortable--bordered & {\n    &:first-child {\n      border-start-end-radius: var(--border-radius);\n      border-start-start-radius: var(--border-radius);\n    }\n\n    &:last-child {\n      border-end-end-radius: var(--border-radius);\n      border-end-start-radius: var(--border-radius);\n    }\n  }\n\n  // styles when sortable is divided\n  .pds-sortable--divided & {\n    border-block-end: var(--border-default);\n\n    &:last-child {\n      border-block-end: 0;\n    }\n  }\n\n  // cursor styles based on handle-type\n  .pds-sortable--handle-type-row & {\n    cursor: grab;\n  }\n\n  .pds-sortable--handle-type-handle & {\n    .pds-sortable-item__handle {\n      cursor: grab;\n    }\n  }\n}\n\n:host(.pds-sortable-item):hover {\n  background-color: var(--color-background-interactive);\n\n  pds-icon {\n    color: var(--color-interactive-handle)\n  }\n}\n\n:host(.pds-sortable-item--drag) {\n  background-color: var(--color-background-default);\n  border-radius: 0;\n  box-shadow: var(--box-shadow);\n  opacity: 1;\n}\n\n:host(.pds-sortable-item--ghost) {\n  background-color: var(--color-background-interactive);\n  border-radius: 0;\n}\n","import { Component, Element, Host, h, Prop } from '@stencil/core';\n\nimport { handle as handleIcon } from '@pine-ds/icons/icons';\n/**\n * @slot sortable-item-actions - Content is placed within the `pds-sortable-item__actions` element as children. This slot is only rendered if `actions` is set to `true`.\n */\n@Component({\n  tag: 'pds-sortable-item',\n  styleUrl: 'pds-sortable-item.scss',\n  scoped: true,\n})\nexport class PdsSortableItem {\n  @Element() el: HTMLPdsSortableItemElement;\n  sortableRef: HTMLPdsSortableElement;\n  /**\n   * Determines whether `sortable-item-actions` slot should be enabled.\n   * @defaultValue false\n   */\n  @Prop() enableActions = false;\n\n  /**\n   * A unique identifier used for the sortable item `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * Determines whether `sortable-item` should have a handle.\n   * @defaultValue false\n   */\n  @Prop({ mutable: true }) showHandle = false;\n\n  componentWillRender() {\n    // When the parent sortable has a type of 'handle', the sortable items\n    // will automatically set showHandle to 'true'.\n    this.sortableRef = this.el.closest('pds-sortable') as HTMLPdsSortableElement;\n\n    if (this.sortableRef && this.sortableRef.handleType === 'handle') {\n      this.showHandle = true;\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"pds-sortable-item\" id={this.componentId}>\n        {this.showHandle && (\n          <div class=\"pds-sortable-item__handle\">\n            <pds-icon icon={handleIcon}></pds-icon>\n          </div>\n        )}\n        <slot></slot>\n        {this.enableActions && (\n          <div class=\"pds-sortable-item__actions\">\n            <slot name=\"sortable-item-actions\" />\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"version":3}