@momentum-ui/web-components 2.5.7 → 2.5.8

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

@@ -1,52 +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
-      }
-    }
-  },
-  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: {
-      "text-color": {
-        light: colors.gray["05"].name,
-        dark: colors.gray[100].name
-      },
-      "bg-color": {
-        light: colors.gray[100].name,
-        dark: colors.gray["05"].name
-      }
-    }
-  }
-};
-
-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,181 +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 { withA11y } from "@storybook/addon-a11y";
-import { boolean, withKnobs, color, text, select } from "@storybook/addon-knobs";
-import mdx from "./Draggable.mdx";
-import "@/components/draggable/Draggable";
-import "@/components/draggable/DraggableItem";
-import "@/components/icon/Icon";
-import { html } from "lit-element";
-import { GroupOptions } from "sortablejs";
-import { SelectTypeKnobValue } from "@storybook/addon-knobs/dist/components/types";
-
-export default {
-  title: "Components/Draggable",
-  component: "md-draggable",
-  decorators: [withKnobs, withA11y],
-  parameters: {
-    docs: {
-      page: mdx
-    },
-    a11y: {
-      element: "md-draggable"
-    },
-    parameters: {
-      description: {
-        component: "For more information please look: https://sortablejs.github.io/Sortable/"
-      }
-    }
-  }
-};
-
-export const Draggable = () => {
-  const darkTheme = boolean("Dark Mode", false);
-  const lumosTheme = boolean("Lumos Theme", false);
-
-  const leftSort = boolean("Allow sorting inside left draggable list", false, "Left List");
-  const leftDisabled = boolean("Disables the left sortable", false, "Left List");
-  const leftFiltered = text("Left list items that will be filtered out", "md-draggable-item[disabled]", "Left List");
-  const leftGroupName = text("Group name", "shared-list", "Left List");
-  const leftGroupPull = select(
-    "Select pull option",
-    {
-      clone: "clone",
-      TurnOn: (true as unknown) as SelectTypeKnobValue,
-      TurnOff: (false as unknown) as SelectTypeKnobValue,
-      GroupArray: [leftGroupName]
-    },
-    "clone",
-    "Left List"
-  );
-  const leftGroupPut = select(
-    "Select left put option",
-    {
-      TurnOn: (true as unknown) as SelectTypeKnobValue,
-      TurnOff: (false as unknown) as SelectTypeKnobValue,
-      GroupArray: [leftGroupName]
-    },
-    (true as unknown) as SelectTypeKnobValue,
-    "Left List"
-  );
-  const leftHandle = text("Drag handle selector within left list items", "md-draggable-item", "Left List");
-
-  const rightSort = boolean("Allow sorting inside right draggable list", false, "Right List");
-  const rightDisabled = boolean("Disables the right sortable", false, "Right List");
-  const rightFiltered = text("Right list items that will be filtered out", "md-draggable-item[disabled]", "Right List");
-  const rightGroupName = text("Group name", "shared-list", "Right List");
-  const rightGroupPull = select(
-    "Select pull option",
-    {
-      clone: "clone",
-      TurnOn: (true as unknown) as SelectTypeKnobValue,
-      TurnOff: (false as unknown) as SelectTypeKnobValue,
-      GroupArray: [rightGroupName]
-    },
-    "clone",
-    "Right List"
-  );
-  const rightGroupPut = select(
-    "Select right put option",
-    {
-      TurnOn: (true as unknown) as SelectTypeKnobValue,
-      TurnOff: (false as unknown) as SelectTypeKnobValue,
-      GroupArray: [rightGroupName]
-    },
-    (true as unknown) as SelectTypeKnobValue,
-    "Right List"
-  );
-  const rightHandle = text("Drag handle selector within right list items", "md-draggable-item", "Right List");
-
-  const ghostClass = color("Class name for the drop placeholder", "#c8ebfb");
-  const chooseClass = color("Class name for the chosen item", "#ddc74e");
-
-  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: ${ghostClass};
-      }
-
-      .custom-choose {
-        border: 3px dashed ${chooseClass};
-      }
-
-      .draggable-wrapper {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-evenly;
-      }
-
-      md-icon[name="icon-drag_16"] {
-        margin-right: 10px;
-      }
-    </style>
-    <md-theme class="theme-toggle" ?darkTheme=${darkTheme} ?lumos=${lumosTheme}>
-      <div class="draggable-wrapper">
-        <md-draggable
-          ?sort=${leftSort}
-          ?disabled=${leftDisabled}
-          .filter=${leftFiltered}
-          .handle=${leftHandle}
-          .group=${{
-            name: leftGroupName,
-            pull: leftGroupPull as unknown,
-            put: 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=${rightSort}
-          ?disabled=${rightDisabled}
-          .filter=${rightFiltered}
-          .handle=${rightHandle}
-          .group=${{
-            name: rightGroupName,
-            pull: rightGroupPull as unknown,
-            put: 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>
-    </md-theme>
-  `;
-};

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

@@ -1,121 +0,0 @@
-import { elementUpdated, fixture, fixtureCleanup, html, oneEvent } from "@open-wc/testing-helpers";
-import { mocked } from "ts-jest/utils";
-import "./Draggable";
-import "./DraggableItem";
-import { Draggable } from "./Draggable";
-import Sortable, { SortableEvent, SortableOptions } from "sortablejs";
-import { DraggableItem } from "./DraggableItem";
-
-jest.mock("sortablejs");
-
-const mockedSortable = mocked(Sortable, true);
-
-const resetMocks = () => {
-  mockedSortable.mockClear();
-  jest.restoreAllMocks();
-};
-
-describe("Draggable Component", () => {
-  let element: Draggable.ELEMENT;
-
-  afterEach(fixtureCleanup);
-
-  beforeEach(async () => {
-    resetMocks();
-
-    element = await fixture<Draggable.ELEMENT>(
-      html`
-        <md-draggable>
-          <md-draggable-item slot="draggable-item">Sortable Item1</md-draggable-item>
-          <md-draggable-item slot="draggable-item">Sortable Item2</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>
-      `
-    );
-  });
-
-  test("should create sortable instance with options", async () => {
-    expect(mockedSortable.create.mock.calls).toHaveLength(2);
-    const parameters = mockedSortable.create.mock.calls[0];
-    expect(parameters[0]).toBe(element);
-  });
-
-  test.each([
-    ["choose", "handleOnChoose"],
-    ["unchoose", "handleOnUnchoose"],
-    ["move", "handleOnMove"],
-    ["end", "handleOnEnd"],
-    ["clone", "handleOnClone"],
-    ["start", "handleOnStart"],
-    ["add", "handleOnAdd"],
-    ["remove", "handleOnRemove"],
-    ["change", "handleOnChange"]
-  ])("emitted `%s` event from sortable", async (event: string, functionName: string) => {
-    const mockSortableEvent = new CustomEvent<SortableEvent>(event, {
-      detail: {
-        from: (jest.fn().mockReturnValue(element) as unknown) as HTMLElement,
-        clone: (jest.fn().mockReturnValue(element) as unknown) as HTMLElement,
-        item: (jest.fn().mockReturnValue(element) as unknown) as HTMLElement,
-        target: (jest.fn().mockReturnValue(element) as unknown) as HTMLElement,
-        to: (jest.fn().mockReturnValue(element) as unknown) as HTMLElement,
-        newIndex: (jest.fn().mockReturnValue(0) as unknown) as number,
-        oldIndex: (jest.fn().mockReturnValue(1) as unknown) as number
-      } as SortableEvent
-    });
-
-    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
-    // @ts-ignore
-    setTimeout(() => element[functionName](mockSortableEvent));
-
-    const { detail } = await oneEvent(element, `drag-${event}`);
-
-    expect(detail).toBeDefined();
-    expect(detail.srcEvent).toEqual(mockSortableEvent);
-  });
-
-  test("should cleanup sortable instance after disconnected from DOM", async () => {
-    element["sortableInstance"] = (jest.fn().mockReturnValue(({
-      el: element
-    } as unknown) as SortableOptions) as unknown) as Sortable;
-
-    const mockDestroy = jest.fn();
-
-    element["sortableInstance"].destroy = mockDestroy;
-
-    element.parentElement!.removeChild(element);
-    setTimeout(() => element.disconnectedCallback());
-
-    expect(mockDestroy).toHaveBeenCalled();
-  });
-
-  test("should initialize sortable instance after slot `change` event", async () => {
-    const initializeSortableMock = jest.fn();
-    element["slottedChanged"] = initializeSortableMock;
-
-    const draggableItem = await fixture<DraggableItem.ELEMENT>(
-      html`
-        <md-draggable-item slot="draggable-item">Sortable Item5</md-draggable-item>
-      `
-    );
-    element.append(draggableItem);
-    await elementUpdated(element);
-
-    expect(initializeSortableMock).toHaveBeenCalled();
-  });
-
-  test("should update sortable options if any related property changed", async () => {
-    element["sortableInstance"] = (jest.fn().mockReturnValue(({
-      el: element
-    } as unknown) as SortableOptions) as unknown) as Sortable;
-
-    const optionMock = jest.fn();
-    element["sortableInstance"].destroy = jest.fn();
-    element["sortableInstance"].option = optionMock.mockImplementation(() => true);
-
-    element.delay = 100;
-    await elementUpdated(element);
-
-    expect(optionMock).toHaveBeenCalled();
-  });
-});