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

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

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

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

@@ -1,186 +0,0 @@
-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: '37046262dfc9a47b690bb5f642b718f298a7d180', 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

@@ -1 +0,0 @@
-{"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"]}

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

@@ -1,75 +0,0 @@
-import { html } from 'lit-html';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-
-export default {
-  argTypes: extractArgTypes('pds-row'),
-  component: 'pds-row',
-  title: 'components/Layout/Row',
-};
-
-const BaseTemplate = (args) => html`
-<pds-row
-  align-items="${args.alignItems}"  
-  border="${args.border}"
-  component-id="${args.componentId}" 
-  col-gap="${args.colGap}"
-  justify-content="${args.justifyContent}"
-  min-height="${args.minHeight}"
-  no-wrap="${args.noWrap}"
->
-  <pds-box border>Item 1</pds-box>
-  <pds-box border direction="column">
-    <p>Content 1</p>
-    <p>Content 2</p>
-  </pds-box>
-</pds-row>
-`;
-
-export const Default = BaseTemplate.bind();
-Default.args = {
-  border: "true",
-  componentId: 'opt0',
-  colGap: '8px',
-};
-
-const GapTemplate = (args) => html`
-<pds-row
-  align-items="${args.alignItems}"  
-  border="${args.border}"
-  component-id="${args.componentId}" 
-  col-gap="${args.colGap}"
-  justify-content="${args.justifyContent}"
-  min-height="${args.minHeight}"
->
-  <pds-box size="4">
-    <pds-box
-      border="true"
-      border-radius="sm"
-      padding="sm"
-      shadow="sm"
-    >
-      Item 1
-    </pds-box>
-  </pds-box>
-  <pds-box size="8">
-    <pds-box
-      border="true"
-      border-radius="sm"
-      padding="sm"
-      shadow="sm"
-    >
-      Item 2
-    </pds-box>
-  </pds-box>
-</pds-row>
-`;
-
-
-export const Gap = GapTemplate.bind();
-Gap.args = {
-  border: "false",
-  componentId: 'opt0',
-  colGap: 'sm',
-};
-
-

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.css

@@ -1,63 +0,0 @@
-:host(.pds-sortable-item) {
-  --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);
-  align-items: center;
-  display: flex;
-  padding-block: var(--spacing-padding-block-xs);
-  padding-inline: var(--spacing-padding-inline);
-}
-:host(.pds-sortable-item) .pds-sortable-item__actions {
-  margin-inline-start: auto;
-  padding-inline-start: var(--spacing-padding-inline-start);
-}
-:host(.pds-sortable-item) .pds-sortable-item__handle {
-  line-height: 1;
-  margin-inline-end: var(--spacing-margin-inline-end);
-}
-.pds-sortable--bordered :host(.pds-sortable-item):first-child {
-  border-start-end-radius: var(--border-radius);
-  border-start-start-radius: var(--border-radius);
-}
-.pds-sortable--bordered :host(.pds-sortable-item):last-child {
-  border-end-end-radius: var(--border-radius);
-  border-end-start-radius: var(--border-radius);
-}
-.pds-sortable--divided :host(.pds-sortable-item) {
-  border-block-end: var(--border-default);
-}
-.pds-sortable--divided :host(.pds-sortable-item):last-child {
-  border-block-end: 0;
-}
-.pds-sortable--handle-type-row :host(.pds-sortable-item) {
-  cursor: grab;
-}
-.pds-sortable--handle-type-handle :host(.pds-sortable-item) .pds-sortable-item__handle {
-  cursor: grab;
-}
-
-:host(.pds-sortable-item):hover {
-  background-color: var(--color-background-interactive);
-}
-:host(.pds-sortable-item):hover pds-icon {
-  color: var(--color-interactive-handle);
-}
-
-:host(.pds-sortable-item--drag) {
-  background-color: var(--color-background-default);
-  border-radius: 0;
-  box-shadow: var(--box-shadow);
-  opacity: 1;
-}
-
-:host(.pds-sortable-item--ghost) {
-  background-color: var(--color-background-interactive);
-  border-radius: 0;
-}

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js

@@ -1,100 +0,0 @@
-import { Host, h } from "@stencil/core";
-import { handle as handleIcon } from "@pine-ds/icons/icons";
-/**
- * @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`.
- */
-export class PdsSortableItem {
-    constructor() {
-        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 (h(Host, { key: '61c57ebc93b66e4c8777fe52163c2c7f600361a5', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'f2bafa535db6cfa07113bd8f9a32d5b7a0bc694d', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '9ead72e13f881f9cdbe4cb910de09173c42c96c5', icon: handleIcon }))), h("slot", { key: '7322ce5649cd2f7765d9275ec47317570854e5f9' }), this.enableActions && (h("div", { key: '709a91c4160407b491fb7ed44c7c7c0a9e980262', class: "pds-sortable-item__actions" }, h("slot", { key: '280ed68aec92927b2a79581f56d3905188a27f1a', name: "sortable-item-actions" })))));
-    }
-    static get is() { return "pds-sortable-item"; }
-    static get encapsulation() { return "scoped"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-sortable-item.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-sortable-item.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "enableActions": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Determines whether `sortable-item-actions` slot should be enabled."
-                },
-                "attribute": "enable-actions",
-                "reflect": false,
-                "defaultValue": "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 sortable item `id` attribute."
-                },
-                "attribute": "component-id",
-                "reflect": false
-            },
-            "showHandle": {
-                "type": "boolean",
-                "mutable": true,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Determines whether `sortable-item` should have a handle."
-                },
-                "attribute": "show-handle",
-                "reflect": false,
-                "defaultValue": "false"
-            }
-        };
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=pds-sortable-item.js.map

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pds-sortable-item.js","sourceRoot":"","sources":["../../../../src/components/pds-sortable/pds-sortable-item/pds-sortable-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC5D;;GAEG;AAMH,MAAM,OAAO,eAAe;;6BAOF,KAAK;;0BAWS,KAAK;;IAE3C,mBAAmB;QACjB,sEAAsE;QACtE,+CAA+C;QAC/C,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,CAAC;YACjE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;QACzB,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,mBAAmB,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW;YACjD,IAAI,CAAC,UAAU,IAAI,CAClB,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,iEAAU,IAAI,EAAE,UAAU,GAAa,CACnC,CACP;YACD,8DAAa;YACZ,IAAI,CAAC,aAAa,IAAI,CACrB,4DAAK,KAAK,EAAC,4BAA4B;gBACrC,6DAAM,IAAI,EAAC,uBAAuB,GAAG,CACjC,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/pds-sortable/pds-sortable-item/stories/pds-sortable-item.stories.js

@@ -1,24 +0,0 @@
-import { html } from 'lit-html';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-
-export default {
-  argTypes: extractArgTypes('pds-sortable-item'),
-  component: 'pds-sortable-item',
-  title: 'components/Sortable/Sortable Item',
-};
-
-const BaseTemplate = (args) => html`
-<pds-sortable-item
-  action="${args.enableActions}"
-  component-id="${args.componentId}"
-  show-handle="${args.showHandle}"
->
-  Item
-</pds-sortable-item>`;
-
-export const Default = BaseTemplate.bind();
-Default.args = {
-  componentId: 'default',
-  enableActions: false,
-  showHandle: false,
-};

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

@@ -1,10 +0,0 @@
-:host(.pds-sortable) {
-  --border-radius: var(--pine-border-radius-050);
-  --border-default: var(--pine-border-width-thin) solid var(--pine-color-grey-300);
-  display: flex;
-  flex-direction: column;
-}
-:host(.pds-sortable).pds-sortable--bordered {
-  border: var(--border-default);
-  border-radius: var(--border-radius);
-}