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

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

@@ -1,150 +0,0 @@
-import { Host, h } from "@stencil/core";
-import Sortable from "sortablejs";
-export class PdsSortable {
-    constructor() {
-        this.border = false;
-        this.componentId = undefined;
-        this.dividers = false;
-        this.handleType = 'row';
-    }
-    classNames() {
-        const classNames = ['pds-sortable'];
-        if (this.border) {
-            classNames.push('pds-sortable--bordered');
-        }
-        if (this.dividers) {
-            classNames.push('pds-sortable--divided');
-        }
-        if (this.handleType !== undefined) {
-            classNames.push(`pds-sortable--handle-type-${this.handleType}`);
-        }
-        return classNames.join('  ');
-    }
-    componentDidLoad() {
-        let sortableOptions = {
-            animation: 150,
-            ghostClass: 'pds-sortable-item--ghost',
-            dragClass: 'pds-sortable-item--drag',
-            onEnd: (evt) => {
-                this.pdsSortableItemMoved.emit(evt);
-            },
-        };
-        if (this.handleType === 'handle') {
-            sortableOptions = Object.assign(Object.assign({}, sortableOptions), { handle: '.pds-sortable-item__handle' });
-        }
-        Sortable.create(this.el, sortableOptions);
-    }
-    render() {
-        return (h(Host, { key: 'f7a4d29675fcb46ca76dc014e8cc57ac243d07fa', class: this.classNames(), id: this.componentId }, h("slot", { key: '2c851fb0e61f3373345b1e170520c3327ab3fa0c' })));
-    }
-    static get is() { return "pds-sortable"; }
-    static get encapsulation() { return "scoped"; }
-    static get originalStyleUrls() {
-        return {
-            "$": ["pds-sortable.scss"]
-        };
-    }
-    static get styleUrls() {
-        return {
-            "$": ["pds-sortable.css"]
-        };
-    }
-    static get properties() {
-        return {
-            "border": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "defaultValue",
-                            "text": "false"
-                        }],
-                    "text": "Determines whether `sortable` should have a border."
-                },
-                "attribute": "border",
-                "reflect": true,
-                "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 sortable container `id` attribute."
-                },
-                "attribute": "component-id",
-                "reflect": false
-            },
-            "dividers": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Deternines whether `sortable` items should be divided with border."
-                },
-                "attribute": "dividers",
-                "reflect": true,
-                "defaultValue": "false"
-            },
-            "handleType": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "'handle' | 'row'",
-                    "resolved": "\"handle\" | \"row\"",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Determines the grabbable area for the `pds-sortable-item`."
-                },
-                "attribute": "handle-type",
-                "reflect": false,
-                "defaultValue": "'row'"
-            }
-        };
-    }
-    static get events() {
-        return [{
-                "method": "pdsSortableItemMoved",
-                "name": "pdsSortableItemMoved",
-                "bubbles": true,
-                "cancelable": true,
-                "composed": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Event emitted when a sortable item is moved."
-                },
-                "complexType": {
-                    "original": "any",
-                    "resolved": "any",
-                    "references": {}
-                }
-            }];
-    }
-    static get elementRef() { return "el"; }
-}
-//# sourceMappingURL=pds-sortable.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"pds-sortable.js","sourceRoot":"","sources":["../../../src/components/pds-sortable/pds-sortable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEvF,OAAO,QAAQ,MAAM,YAAY,CAAC;AAOlC,MAAM,OAAO,WAAW;;sBAYY,KAAK;;wBAUH,KAAK;0BAKF,KAAK;;IAEpC,UAAU;QAChB,MAAM,UAAU,GAAG,CAAC,cAAc,CAAC,CAAC;QAEpC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,UAAU,CAAC,IAAI,CAAC,wBAAwB,CAAC,CAAC;QAC5C,CAAC;QAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,UAAU,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC3C,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;YAClC,UAAU,CAAC,IAAI,CAAC,6BAA6B,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC;QAED,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC;IAED,gBAAgB;QAEd,IAAI,eAAe,GAAiB;YAClC,SAAS,EAAE,GAAG;YACd,UAAU,EAAE,0BAA0B;YACtC,SAAS,EAAE,yBAAyB;YACpC,KAAK,EAAE,CAAC,GAAG,EAAE,EAAE;gBACb,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;YACtC,CAAC;SACF,CAAC;QAEF,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YACjC,eAAe,mCACV,eAAe,KAClB,MAAM,EAAE,4BAA4B,GACrC,CAAC;QACJ,CAAC;QAED,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,eAAe,CAAC,CAAC;IAC5C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,WAAW;YAClD,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, h, Prop } from '@stencil/core';\nimport { SortableType } from './sortable-interface';\nimport Sortable from 'sortablejs';\n\n@Component({\n  tag: 'pds-sortable',\n  styleUrl: 'pds-sortable.scss',\n  scoped: true,\n})\nexport class PdsSortable {\n  @Element() el: HTMLPdsSortableElement;\n\n  /**\n   * Event emitted when a sortable item is moved.\n   */\n  @Event() pdsSortableItemMoved: EventEmitter;\n\n  /**\n   * Determines whether `sortable` should have a border.\n   * @defaultValue false\n   */\n  @Prop({ reflect: true }) border = false;\n\n  /**\n   * A unique identifier used for the sortable container `id` attribute.\n   */\n  @Prop() componentId!: string;\n\n  /**\n   * Deternines whether `sortable` items should be divided with border.\n   */\n  @Prop({ reflect: true }) dividers = false;\n\n  /**\n   * Determines the grabbable area for the `pds-sortable-item`.\n   */\n  @Prop() handleType: 'handle' | 'row' = 'row';\n\n  private classNames() {\n    const classNames = ['pds-sortable'];\n\n    if (this.border) {\n      classNames.push('pds-sortable--bordered');\n    }\n\n    if (this.dividers) {\n      classNames.push('pds-sortable--divided');\n    }\n\n    if (this.handleType !== undefined) {\n      classNames.push(`pds-sortable--handle-type-${this.handleType}`);\n    }\n\n    return classNames.join('  ');\n  }\n\n  componentDidLoad() {\n\n    let sortableOptions: SortableType = {\n      animation: 150,\n      ghostClass: 'pds-sortable-item--ghost',\n      dragClass: 'pds-sortable-item--drag',\n      onEnd: (evt) => {\n        this.pdsSortableItemMoved.emit(evt);\n      },\n    };\n\n    if (this.handleType === 'handle') {\n      sortableOptions = {\n        ...sortableOptions,\n        handle: '.pds-sortable-item__handle',\n      };\n    }\n\n    Sortable.create(this.el, sortableOptions);\n  }\n\n  render() {\n    return (\n      <Host class={this.classNames()} id={this.componentId}>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=sortable-interface.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"sortable-interface.js","sourceRoot":"","sources":["../../../src/components/pds-sortable/sortable-interface.ts"],"names":[],"mappings":"","sourcesContent":["export interface SortableType {\n  animation: number;\n  ghostClass: string;\n  dragClass: string;\n  onEnd: (evt: Event) => void;\n  handle?: string;\n}"]}

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

@@ -1,130 +0,0 @@
-import { html } from 'lit-html';
-import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
-import { withActions } from '@storybook/addon-actions/decorator';
-
-export default {
-  argTypes: extractArgTypes('pds-sortable'),
-  component: 'pds-sortable',
-  decorators: [withActions],
-  parameters: {
-    actions: {
-      handles: ['onchange', 'pdsSortableItemMoved'],
-    },
-  },
-  title: 'components/Sortable',
-};
-
-const BaseTemplate = (args) => html`
-<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
-  <pds-sortable-item>Item 1</pds-sortable-item>
-  <pds-sortable-item>Item 2</pds-sortable-item>
-  <pds-sortable-item>Item 3</pds-sortable-item>
-</pds-sortable>`;
-
-const HandleTemplate = (args) => html`
-<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
-  <pds-sortable-item>Item 1</pds-sortable-item>
-  <pds-sortable-item>Item 2</pds-sortable-item>
-  <pds-sortable-item>Item 3</pds-sortable-item>
-</pds-sortable>`;
-
-const ActionsTemplate = (args) => html`
-<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
-  <pds-sortable-item enable-actions>
-    <div>Item 1</div>
-    <div slot="sortable-item-actions">
-      <pds-link href="#" variant="plain">action</pds-link>
-    </div>
-  </pds-sortable-item>
-  <pds-sortable-item enable-actions>
-    <div>Item 2</div>
-    <div slot="sortable-item-actions">
-      <pds-link href="#" variant="plain">action</pds-link>
-    </div>
-  </pds-sortable-item>
-  <pds-sortable-item enable-actions>
-    <div>Item 3</div>
-    <div slot="sortable-item-actions">
-      <pds-link href="#" variant="plain">action</pds-link>
-    </div>
-  </pds-sortable-item>
-</pds-sortable>`;
-
-const FullDemoTemplate = (args) => html`
-<pds-sortable border="${args.border}" component-id="${args.componentId}" dividers="${args.dividers}" handle-type="${args.handleType}">
-  <pds-sortable-item enable-actions>
-    <div>
-      <div><strong>Item 1</strong></div>
-      <div>Item 1 description copy text</div>
-    </div>
-    <div slot="sortable-item-actions">
-      <pds-link href="#" variant="plain">action</pds-link>
-    </div>
-  </pds-sortable-item>
-  <pds-sortable-item enable-actions>
-    <div>
-      <div><strong>Item 2</strong></div>
-      <div>Item 2 description copy text</div>
-    </div>
-    <div slot="sortable-item-actions">
-      <pds-link href="#" variant="plain">action</pds-link>
-    </div>
-  </pds-sortable-item>
-  <pds-sortable-item enable-actions>
-    <div>
-      <div><strong>Item 3</strong></div>
-      <div>Item 3 description copy text</div>
-    </div>
-    <div slot="sortable-item-actions">
-      <pds-link href="#" variant="plain">action</pds-link>
-    </div>
-  </pds-sortable-item>
-</pds-sortable>`;
-
-export const Default = BaseTemplate.bind();
-Default.args = {
-  componentId: 'default',
-  border: false,
-  dividers: false,
-  handleType: 'row',
-};
-
-export const Bordered = BaseTemplate.bind();
-Bordered.args = {
-  componentId: 'bordered',
-  border: true,
-  dividers: false,
-  handleType: 'row',
-};
-
-export const Dividers = BaseTemplate.bind();
-Dividers.args = {
-  componentId: 'dividers',
-  border: false,
-  dividers: true,
-  handleType: 'row',
-};
-
-export const Handle = HandleTemplate.bind();
-Handle.args = {
-  componentId: 'handle',
-  border: false,
-  dividers: false,
-  handleType: 'handle',
-};
-
-export const Actions = ActionsTemplate.bind();
-Actions.args = {
-  componentId: 'actions',
-  border: false,
-  dividers: false,
-  handleType: 'row',
-};
-
-export const FullDemo = FullDemoTemplate.bind();
-FullDemo.args = {
-  componentId: 'demo',
-  border: true,
-  dividers: true,
-  handleType: 'row',
-};

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

@@ -1,136 +0,0 @@
-:host {
-  --border-radius-input: var(--pine-border-radius-200);
-  --box-shadow-focus: 0 0 0 2px var(--color-outline-focus);
-  --box-shadow-focus-error: 0 0 0 2px var(--color-outline-focus-error);
-  --box-shadow-input-toggle: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);
-  --color-background-checked: var(--pine-color-charcoal-400);
-  --color-background-checked-hover: var(--pine-color-charcoal-400);
-  --color-background-disabled: var(--pine-color-grey-300);
-  --color-background-hover: var(--pine-color-grey-500);
-  --color-background-input-default: var(--pine-color-grey-400);
-  --color-input-toggle: var(--pine-color-white);
-  --color-message-text: var(--pine-color-charcoal-200);
-  --color-outline-focus: var(--pine-color-blue-200);
-  --color-outline-focus-error: var(--pine-color-red-200);
-  --color-text-default: var(--pine-color-charcoal-400);
-  --color-text-disabled: var(--pine-color-grey-500);
-  --color-text-error: var(--pine-color-red-300);
-  --dimension-input-height: 20px;
-  --dimension-input-width: 36px;
-  --line-height-label: var(--pine-line-height-150);
-  --sizing-input-toggle-size: calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));
-  --spacing-label-gap-size: var(--pine-spacing-150);
-  --spacing-input-toggle-offset: calc(var(--pine-spacing-050) / 2);
-  --spacing-message-block: var(--pine-spacing-050);
-  --spacing-message-inline: calc(var(--dimension-input-width) + var(--spacing-label-gap-size));
-  --number-transition-timing: 0.15s ease-out;
-  align-items: flex-start;
-  color: var(--color-text-default);
-  display: inline-flex;
-  flex-flow: row wrap;
-  margin-block-end: var(--pine-spacing-md);
-  position: relative;
-}
-
-:host(.pds-switch--error) {
-  color: var(--color-text-error);
-}
-:host(.pds-switch--error) input,
-:host(.pds-switch--error) input:checked,
-:host(.pds-switch--error) input:hover:not(:disabled):not(:checked) {
-  background-color: var(--color-text-error);
-}
-:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked) {
-  box-shadow: var(--box-shadow-focus-error);
-}
-
-input {
-  appearance: none;
-  background: var(--color-background-input-default);
-  border: 0;
-  border-radius: var(--border-radius-input);
-  cursor: pointer;
-  display: inline-block;
-  height: var(--dimension-input-height);
-  margin: 0;
-  padding: 0;
-  position: relative;
-  transform: translateY(2px);
-  transition: var(--number-transition-timing);
-  transition-property: background, border, color;
-  width: var(--dimension-input-width);
-}
-input::after {
-  background: var(--color-input-toggle);
-  border-radius: 50%;
-  box-shadow: var(--box-shadow-input-toggle);
-  content: "";
-  display: block;
-  height: var(--sizing-input-toggle-size);
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-  position: absolute;
-  transform: translate3d(-100%, -50%, 0);
-  transition: transform var(--number-transition-timing);
-  width: var(--sizing-input-toggle-size);
-}
-
-label {
-  cursor: pointer;
-  display: inline-flex;
-  flex-grow: 1;
-  line-height: var(--line-height-label);
-  margin-inline-start: var(--spacing-label-gap-size);
-}
-.pds-switch--error label {
-  color: inherit;
-}
-
-.pds-switch__message {
-  color: var(--color-message-text);
-  flex: 1 0 100%;
-  font-size: var(--pine-font-size-body-sm);
-  line-height: var(--pine-line-height-sm);
-  margin-inline-start: var(--spacing-message-inline);
-}
-.pds-switch__message + .pds-switch__message {
-  margin-block-start: var(--spacing-message-block);
-}
-
-.pds-switch__message--error {
-  color: inherit;
-}
-
-input:disabled {
-  background-color: var(--color-background-disabled);
-  cursor: not-allowed;
-}
-input:disabled ~ label {
-  color: var(--color-text-disabled);
-  cursor: initial;
-}
-input:disabled .pds-switch__message {
-  color: initial;
-}
-
-input:hover:not(:disabled) {
-  background-color: var(--color-background-hover);
-}
-
-input:focus-visible:not(:disabled) {
-  box-shadow: var(--box-shadow-focus);
-  outline: none;
-}
-
-input:checked::after {
-  transform: translate3d(0, -50%, 0);
-}
-
-input:checked:not(:disabled) {
-  background-color: currentColor;
-  color: var(--color-background-checked);
-}
-input:checked:not(:disabled):hover {
-  border-color: currentColor;
-  color: var(--color-background-checked-hover);
-}