@momentum-ui/web-components 2.16.8 → 2.16.10

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

@@ -1,68 +0,0 @@
-/* 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

@@ -1,91 +0,0 @@
-/* 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

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

@@ -1,166 +0,0 @@
-/**
- * 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>
-  `;
-};