@momentum-ui/web-components 2.16.1 → 2.16.3

package/src/components/datepicker/tokens/md-datepicker-tokens.js

@@ -0,0 +1,68 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const datepicker = {
+  prefix: "md",
+  component: "datepicker",
+  default: {
+    hover: {
+      "bg-color": {
+        light: colors.gray[20].name,
+        dark: colors.gray[70].name
+      }
+    }
+  },
+  selected: {
+    today: {
+      "text-color": {
+        light: colors.white[100].name,
+        dark: colors.gray["05"].name
+      }
+    },
+    "text-color": {
+      light: colors.gray["05"].name,
+      dark: colors.gray[100].name
+    },
+    "bg-color": {
+      light: colors.gray[100].name,
+      dark: colors.gray["05"].name
+    },
+    hover: {
+      "bg-color": {
+        light: colors.gray[95].name,
+        dark: colors.gray[10].name
+      }
+    },
+    pressed: {
+      "bg-color": {
+        light: colors.gray[90].name,
+        dark: colors.gray[10].name
+      }
+    }
+  },
+  range: {
+    "text-color": {
+      light: colors.gray[100].name,
+      dark: colors.gray["05"].name
+    },
+    "bg-color": {
+      light: colors.gray[20].name,
+      dark: colors.gray[60].name
+    },
+    hover: {
+      "bg-color": {
+        light: colors.gray[30].name,
+        dark: colors.gray[70].name
+      }
+    },
+    edge: {
+      "bg-color": {
+        light: colors.gray[100].name,
+        dark: colors.gray["05"].name
+      }
+    }
+  }
+};
+
+module.exports = datepicker;

package/src/components/datepicker/tokens/mdv2-datepicker-tokens.js

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+const colors = require("@momentum-ui/tokens/dist/colors.json");
+
+const datepicker = {
+  prefix: "mdv2",
+  component: "datepicker",
+  default: {
+    navigation: {
+      label: {
+        common: "$mds-color-theme-text-primary-normal"
+      },
+      button: {
+        common: "$mds-color-theme-text-primary-normal"
+      }
+    },
+    days: {
+      common: "$mds-color-theme-text-secondary-normal"
+    },
+    number: {
+      color: {
+        common: "$mds-color-theme-text-secondary-normal"
+      }
+    },
+    hover: {
+      "bg-color": {
+        common: "$mds-color-theme-button-secondary-hover"
+      }
+    }
+  },
+  invalid: {
+    "text-color": {
+      common: "$mds-color-theme-text-primary-disabled"
+    }
+  },
+  selected: {
+    "text-color": {
+      common: "$mds-color-theme-common-text-primary-normal"
+    },
+    today: {
+      border: {
+        common: "1px solid $mds-color-theme-outline-button-normal"
+      }
+    },
+    "bg-color": {
+      common: "$mds-color-theme-background-accent-normal"
+    },
+    hover: {
+      "bg-color": {
+        common: "$mds-color-theme-button-accent-hover"
+      }
+    },
+    pressed: {
+      "bg-color": {
+        common: "$mds-color-theme-button-accent-pressed"
+      }
+    }
+  },
+  hover: {
+    "bg-color": {
+      common: "$mds-color-theme-button-secondary-hover"
+    }
+  },
+  pressed: {
+    "bg-color": {
+      common: "$mds-color-theme-button-secondary-pressed"
+    }
+  },
+  range: {
+    "text-color": {
+      common: "$mds-color-theme-text-primary-normal"
+    },
+    "bg-color": {
+      light: colors.gray[20].name,
+      dark: colors.gray[60].name
+    },
+    hover: {
+      "bg-color": {
+        light: colors.gray[30].name,
+        dark: colors.gray[70].name
+      }
+    },
+    edge: {
+      "bg-color": {
+        common: "$mds-color-theme-background-accent-normal"
+      }
+    }
+  }
+};
+
+module.exports = datepicker;

package/src/components/draggable/Draggable.mdx

@@ -0,0 +1,258 @@
+# Draggable Component Configuration (Using [SortableJS](https://github.com/SortableJS/Sortable))
+
+`Draggable` is a component used for reorder drag-and-drop lists. Its purpose is to drag from one list to another or within the same list using `md-draggable` and `md-draggable-item` components.
+
+By default `md-draggable` component specifies slotable `md-draggable-item` components that can be inserted into and should be draggable. Also by default `Draggable` component disallow sorting inside list or between lists.
+To change this, please set property `sort` to attributes in markup to `md-draggable`.
+
+The `SortableJS` has many configuration options. Using different combinations of those properties. The `Draggable` component exposes these options via Lit-Element properties and attributes.
+** Please Note that by default all `Boolean` properties set to `false` and all `String` properties set to `""` (empty string) **:
+
+## ** group (by default `null`) ** ##
+
+_Object property_. To drag elements from one list into another, both lists must have the same group value. You can also define whether lists can give away, give and keep a copy (clone), and receive elements.
+
+- name: `String` — group name
+- pull: `true|false|["foo", "bar"]|'clone'|function` — ability to move from the list. clone — copy the item, rather than move. Or an array of group names which the elements may be put in. Defaults to true.
+- put: `true|false|["baz", "qux"]|function` — whether elements can be added from other lists, or an array of group names from which elements can be added.
+- revertClone: `boolean` — revert cloned element to initial position after moving to a another list.
+
+Example:
+
+```
+ <md-draggable sort .group=${{ name: "LeftList", pull: true, put: ["RightList] }}>
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+or
+
+ ```
+ <md-draggable sort group="ListGroup">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** sort ** ##
+
+_Boolean property_. Allow sorting inside list.
+
+Example:
+ ```
+ <md-draggable sort>
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** delay ** ##
+
+_Number property_. Time in milliseconds to define when the sorting should start. Unfortunately, due to browser restrictions, delaying is not possible on IE or Edge with native drag & drop.
+
+## ** animation (in ms time) ** ##
+
+Number property. Animation speed moving items when sorting, `0` — without animation.
+
+## ** handle ** ##
+
+_String property_. To make list items draggable, Sortable disables text selection by the user. That's not always desirable. To allow text selection, define a drag handler, which is an area of every list element that allows it to be dragged around.
+
+Example:
+
+ ```
+ <md-draggable sort handle="md-icon[name='icon-drag_16']">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** filter ** ##
+
+_String property_. Selectors that do not lead to dragging.
+
+Example:
+
+ ```
+ <md-draggable sort filter="md-draggable-item[disabled]">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** direction (will be `vertical` if not given) ** ##
+
+_String property_. Direction of sortable items
+
+## ** draggable (`md-draggable-item` by default) ** ##
+
+_String property_. Specifies which items inside the element should be draggable.
+
+Example:
+
+```
+ <md-draggable draggable-items="md-draggable-items">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** ghostClass ** ##
+
+_String property_. Class name for the drop placeholder.
+
+Example:
+
+```
+ <md-draggable ghost-class="your-custom-ghost-class">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** chosenClass ** ##
+
+_String property_. Class name for the chosen item.
+
+Example:
+
+```
+ <md-draggable chosen-class="your-custom-chosen-class">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** dragClass ** ##
+
+_String property_. Class name for the dragging item.
+
+Example:
+
+```
+ <md-draggable drag-class="your-custom-drag-class">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** forceFallback ** ##
+
+_Boolean property_. Ignore the HTML5 DnD behaviour and force the fallback to kick in.
+
+Example:
+
+```
+ <md-draggable force-fallback>
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** fallbackClass (to use this please set `forceFallback` property to `true`) ** ##
+
+_String property_. Class name for the cloned DOM Element when using forceFallback.
+
+Example:
+
+```
+ <md-draggable fallback-class="your-custom-fallback-class">
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+## ** disabled ** ##
+
+_Boolean property_. Disables the sortable if set to true.
+
+Example:
+
+```
+ <md-draggable disabled>
+   <md-draggable-item slot="draggable-item">
+     <md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)
+   </md-draggable-item>
+   <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+   <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+ </md-draggable>
+```
+
+***
+
+`Draggable` component contain event listeners that are fired when a specific option is updated. The table describe when event is calling (To see object detail, please follow link in `Event Type` table section):
+
+| Event | Description | Event Type |
+| :-: | :-: | :-: |
+| drag-change | Dragging element changes position | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-clone | Creating a clone of element | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-unchoose | Element is unchosen | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-choose | Element is chosen | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-remove | Element is removed from the list into another list | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-add | Element is dropped into the list from another list | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-end | Element dragging ended | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-start | Element dragging started | [SortableEvent](https://github.com/SortableJS/Sortable#event-object-demo) |
+| drag-move | Event when you move an item in the list or between lists | [MoveEvent](https://github.com/SortableJS/Sortable#move-event-object) |
+
+
+
+
+
+

package/src/components/draggable/Draggable.stories.ts

@@ -0,0 +1,166 @@
+/**
+ * Copyright (c) Cisco Systems, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import "@/components/draggable/Draggable";
+import "@/components/draggable/DraggableItem";
+import "@/components/icon/Icon";
+import { Args } from "@storybook/web-components";
+import { html } from "lit-html";
+import { GroupOptions } from "sortablejs";
+import mdx from "./Draggable.mdx";
+
+export default {
+  title: "Components/Draggable",
+  component: "md-draggable",
+  argTypes: {
+    leftSort: { control: "boolean", description: "Allow sorting inside left draggable list", defaultValue: false },
+    leftDisabled: { control: "boolean", description: "Disables the left sortable", defaultValue: false },
+    leftFiltered: {
+      control: "text",
+      description: "Left list items that will be filtered out",
+      defaultValue: "md-draggable-item[disabled]"
+    },
+    leftGroupName: { control: "text", description: "Group name", defaultValue: "shared-list" },
+    leftGroupPull: {
+      control: { type: "select", options: ["clone", true, false, ["shared-list"]] },
+      description: "Select pull option",
+      defaultValue: "clone"
+    },
+    leftGroupPut: {
+      control: { type: "select", options: [true, false, ["shared-list"]] },
+      description: "Select left put option",
+      defaultValue: true
+    },
+    leftHandle: {
+      control: "text",
+      description: "Drag handle selector within left list items",
+      defaultValue: "md-draggable-item"
+    },
+    rightSort: { control: "boolean", description: "Allow sorting inside right draggable list", defaultValue: false },
+    rightDisabled: { control: "boolean", description: "Disables the right sortable", defaultValue: false },
+    rightFiltered: {
+      control: "text",
+      description: "Right list items that will be filtered out",
+      defaultValue: "md-draggable-item[disabled]"
+    },
+    rightGroupName: { control: "text", description: "Group name", defaultValue: "shared-list" },
+    rightGroupPull: {
+      control: { type: "select", options: ["clone", true, false, ["shared-list"]] },
+      description: "Select pull option",
+      defaultValue: "clone"
+    },
+    rightGroupPut: {
+      control: { type: "select", options: [true, false, ["shared-list"]] },
+      description: "Select right put option",
+      defaultValue: true
+    },
+    rightHandle: {
+      control: "text",
+      description: "Drag handle selector within right list items",
+      defaultValue: "md-draggable-item"
+    },
+    ghostClass: { control: "color", description: "Class name for the drop placeholder", defaultValue: "#c8ebfb" },
+    chooseClass: { control: "color", description: "Class name for the chosen item", defaultValue: "#ddc74e" }
+  },
+  parameters: {
+    docs: {
+      page: mdx
+    },
+    a11y: {
+      element: "md-draggable"
+    },
+    parameters: {
+      description: {
+        component: "For more information please look: https://sortablejs.github.io/Sortable/"
+      }
+    }
+  }
+};
+
+export const Draggable = (args: Args) => {
+  return html`
+    <style>
+      md-draggable-item {
+        border: 1px solid rgba(0, 0, 0, 0.125);
+        display: flex;
+        justify-content: center;
+        padding: 0.5rem 1rem;
+        position: relative;
+      }
+
+      md-draggable-item[disabled] {
+        background-color: #dc3545;
+      }
+
+      .custom-ghost {
+        background-color: ${args.ghostClass};
+      }
+
+      .custom-choose {
+        border: 3px dashed ${args.chooseClass};
+      }
+
+      .draggable-wrapper {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-evenly;
+      }
+
+      md-icon[name="icon-drag_16"] {
+        margin-right: 10px;
+      }
+    </style>
+    <div class="draggable-wrapper">
+      <md-draggable
+        ?sort=${args.leftSort}
+        ?disabled=${args.leftDisabled}
+        .filter=${args.leftFiltered}
+        .handle=${args.leftHandle}
+        .group=${{
+          name: args.leftGroupName,
+          pull: args.leftGroupPull as unknown,
+          put: args.leftGroupPut as unknown
+        } as GroupOptions}
+        ghost-class="custom-ghost"
+        chosen-class="custom-choose"
+        draggable-items="md-draggable-item"
+      >
+        <md-draggable-item slot="draggable-item"
+          ><md-icon name="icon-drag_16"></md-icon>Sortable Item1 (Handle)</md-draggable-item
+        >
+        <md-draggable-item slot="draggable-item" disabled>Sortable Item2 (Disabled)</md-draggable-item>
+        <md-draggable-item slot="draggable-item">Sortable Item3</md-draggable-item>
+        <md-draggable-item slot="draggable-item">Sortable Item4</md-draggable-item>
+        <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
+      </md-draggable>
+
+      <md-draggable
+        ?sort=${args.rightSort}
+        ?disabled=${args.rightDisabled}
+        .filter=${args.rightFiltered}
+        .handle=${args.rightHandle}
+        .group=${{
+          name: args.rightGroupName,
+          pull: args.rightGroupPull as unknown,
+          put: args.rightGroupPut as unknown
+        } as GroupOptions}
+        ghost-class="custom-ghost"
+        chosen-class="custom-choose"
+        draggable-items="md-draggable-item"
+      >
+        <md-draggable-item slot="draggable-item">Sortable Item6</md-draggable-item>
+        <md-draggable-item slot="draggable-item"
+          ><md-icon name="icon-drag_16"></md-icon>Sortable Item7 (Handle)</md-draggable-item
+        >
+        <md-draggable-item slot="draggable-item">Sortable Item8</md-draggable-item>
+        <md-draggable-item slot="draggable-item" disabled>Sortable Item9 (Disabled)</md-draggable-item>
+        <md-draggable-item slot="draggable-item">Sortable Item10</md-draggable-item>
+      </md-draggable>
+    </div>
+  `;
+};