@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/components/slider/Slider.ts

@@ -1,274 +0,0 @@
-import { Key } from "@/constants";
-import { FocusMixin } from "@/mixins";
-import reset from "@/wc_scss/reset.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { html, internalProperty, LitElement, property, PropertyValues } from "lit-element";
-import { nothing } from "lit-html";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { repeat } from "lit-html/directives/repeat";
-import { styleMap } from "lit-html/directives/style-map";
-import styles from "./scss/module.scss";
-
-export namespace Slider {
-  @customElementWithCheck("md-slider")
-  export class ELEMENT extends FocusMixin(LitElement) {
-    private _disabled = false;
-    private _now = 0;
-    @property({ type: Number, reflect: true }) min = 0;
-    @property({ type: Number, reflect: true }) max = 100;
-    @property({ type: Boolean, attribute: "hide-value" }) hideValue = false;
-    @property({ type: Number, reflect: true })
-    get now() {
-      return this._now;
-    }
-    set now(value: number) {
-      const oldNow = this._now;
-      if (value < this.min || value > this.max) {
-        console.warn("Please select correct value");
-        return;
-      }
-      this._now = Math.round(value);
-      this.requestUpdate("now", oldNow);
-    }
-
-    @property({ type: Number }) text = 0;
-    @property({ type: String }) label = "slider";
-    @property({ type: Number, reflect: true }) step = 0;
-    @property({ type: Boolean, reflect: true })
-    get disabled() {
-      return this._disabled;
-    }
-    set disabled(value: boolean) {
-      const oldValue = this._disabled;
-      this._disabled = value;
-      this.setAttribute("aria-disabled", `${value}`);
-      if (value) {
-        this.tabIndex = -1;
-      } else {
-        this.tabIndex = 0;
-      }
-      this.requestUpdate("disabled", oldValue);
-    }
-
-    @internalProperty() private dragging = false;
-
-    private currentMouseEvent?: MouseEvent;
-
-    private get pointerPosition() {
-      const range = this.max - this.min;
-      const progress = this.now - this.min;
-
-      return (progress / range) * 100;
-    }
-
-    private calculateHandlePosition(event: MouseEvent) {
-      const { width, left } = this.getBoundingClientRect();
-      const { clientX } = event;
-
-      const percent = (clientX - left) / width;
-      const value = this.min + (this.max - this.min) * percent;
-
-      return value;
-    }
-
-    private moveSliderTo(value: number) {
-      if (!this.disabled) {
-        if (value > this.max) {
-          this.now = this.max;
-        } else if (value < this.min) {
-          this.now = this.min;
-        } else {
-          this.now = value;
-        }
-      }
-    }
-
-    private trackMouseEvent() {
-      if (!this.currentMouseEvent || !this.dragging) {
-        return;
-      }
-      const pointerPosition = this.calculateHandlePosition(this.currentMouseEvent);
-
-      this.moveSliderTo(pointerPosition);
-
-      requestAnimationFrame(() => {
-        this.trackMouseEvent();
-      });
-    }
-
-    private ticksTemplate() {
-      const { min, max, step } = this;
-      const tickCount = Math.round((max - min) / step);
-      const ticks = new Array(tickCount + 1)
-        .fill(0, 0, tickCount + 1)
-        .map((_, index) => min + index * step)
-        .filter(tick => tick >= min && tick <= max);
-      return html`
-        <div class="md-slider__hashlabel">
-          ${repeat(
-            ticks,
-            tick => html`
-              <div class="tick">
-                ${tick}
-              </div>
-            `
-          )}
-        </div>
-      `;
-    }
-
-    private displayValueTemplate() {
-      return html`
-        <span class="md-slider__value">
-          ${this.now}
-        </span>
-      `;
-    }
-
-    private notifyChanges() {
-      this.dispatchEvent(
-        new CustomEvent<{ value: number }>("slider-change", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            value: this.now
-          }
-        })
-      );
-    }
-
-    handleMouseDown(event: MouseEvent) {
-      event.preventDefault();
-
-      if (this.disabled) {
-        return;
-      }
-
-      const handleMouseMove = (event: MouseEvent) => {
-        this.currentMouseEvent = event;
-      };
-
-      const handleMouseUp = (event: MouseEvent) => {
-        this.focus();
-        this.currentMouseEvent = event;
-
-        document.removeEventListener("mousemove", handleMouseMove);
-        document.removeEventListener("mouseup", handleMouseUp);
-
-        requestAnimationFrame(() => {
-          this.dragging = false;
-          this.notifyChanges();
-        });
-      };
-
-      document.addEventListener("mousemove", handleMouseMove);
-      document.addEventListener("mouseup", handleMouseUp);
-
-      this.focus();
-
-      this.dragging = true;
-      this.currentMouseEvent = event;
-
-      requestAnimationFrame(() => {
-        this.trackMouseEvent();
-      });
-    }
-
-    handleKeyDown(event: KeyboardEvent) {
-      const { code } = event;
-
-      switch (code) {
-        case Key.ArrowLeft:
-        case Key.ArrowDown:
-          {
-            this.moveSliderTo(this.now - 1);
-          }
-          break;
-        case Key.ArrowRight:
-        case Key.ArrowUp:
-          {
-            this.moveSliderTo(this.now + 1);
-          }
-          break;
-        case Key.Home:
-          {
-            this.moveSliderTo(this.min);
-          }
-          break;
-        case Key.End:
-          {
-            this.moveSliderTo(this.max);
-          }
-          break;
-        default:
-          break;
-      }
-
-      const handleKeyUp = () => {
-        document.removeEventListener("keyup", handleKeyUp);
-        this.notifyChanges();
-      };
-
-      document.addEventListener("keyup", handleKeyUp);
-    }
-
-    get sliderPointerStyleMap() {
-      return {
-        left: `${this.pointerPosition}%`
-      };
-    }
-    get sliderSelectionStyleMap() {
-      return {
-        right: `calc(100% - ${this.pointerPosition}%)`
-      };
-    }
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    protected firstUpdated(changedProperties: PropertyValues) {
-      super.firstUpdated(changedProperties);
-      this.setAttribute("tabindex", this.disabled ? "-1" : "0");
-    }
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.addEventListener("keydown", this.handleKeyDown);
-      this.addEventListener("mousedown", this.handleMouseDown);
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.removeEventListener("keydown", this.handleKeyDown);
-      this.removeEventListener("mousedown", this.handleMouseDown);
-    }
-
-    render() {
-      return html`
-        <div class="md-slider">
-          <span class="md-slider__bar"></span>
-          <span class="md-slider__selection" style=${styleMap(this.sliderSelectionStyleMap)}></span>
-          <span
-            class="md-slider__pointer"
-            role="slider"
-            part="slider"
-            aria-valuemin=${this.min}
-            aria-valuemax=${this.max}
-            aria-valuenow=${this.now}
-            aria-label=${ifDefined(this.label)}
-            style=${styleMap(this.sliderPointerStyleMap)}
-          ></span>
-          ${this.step ? this.ticksTemplate() : nothing}
-          ${this.hideValue ? nothing : this.displayValueTemplate()}
-        </div>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-slider": Slider.ELEMENT;
-  }
-}

package/src/components/slider/scss/mixins.scss

@@ -1,5 +0,0 @@
-@mixin align-center() {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-}

package/src/components/slider/scss/module.scss

@@ -1,17 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/settings/rem";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/typography/settings";
-
-@import "@/wc_scss/tools/mixins/flex";
-@import "@/wc_scss/tools/mixins/core";
-@import "@/wc_scss/tools/mixins/focus";
-
-@import "./vars/md-slider-settings";
-
-@import "./settings";
-@import "./mixins";
-@import "./slider";

package/src/components/slider/scss/settings.scss

@@ -1,10 +0,0 @@
-$slider__indent: rem-calc(20);
-$slider__height: rem-calc(20);
-$slider__border-radius: rem-calc(4);
-$slider-bar__height: rem-calc(2);
-$slider-bar__border-radius: rem-calc(2);
-$slider-pointer__size: rem-calc(20);
-$slider-pointer__box-shadow: 0 2px 6px $black-16;
-$slider-pointer__box-shadow--focus: 0 0 0 8px rgba(0, 160, 209, 0.4);
-$slider__focus-shadow: 0 0 0 2px var(--slider-background-focus-selection, $md-slider-background-focus-selection-light), $slider-pointer__box-shadow;
-$slider-label__size: $font-size-base;

package/src/components/slider/scss/slider.scss

@@ -1,139 +0,0 @@
-:host(:focus) {
-  box-shadow: none;
-  outline: none !important;
-}
-
-:host(md-slider) {
-  display: flex;
-  flex: 1 1 auto;
-  padding: $slider__indent 0;
-
-  .md-slider {
-    border-radius: $slider__border-radius;
-    display: flex;
-    flex: 1 1 auto;
-    height: $slider__height;
-    margin-right: $slider-pointer__size;
-    position: relative;
-    width: calc(100% - #{$slider-pointer__size});
-
-    &__bar {
-      @include align-center();
-      background-color: var(--slider-background-bar, $md-slider-background-bar-light);
-      border-radius: $slider-bar__border-radius;
-      cursor: pointer;
-      height: $slider-bar__height;
-      left: 0;
-      right: -$slider-pointer__size;
-      z-index: 0;
-    }
-
-    &__selection {
-      @include align-center();
-      background-color: var(--slider-background-selection, $md-slider-background-selection-light);
-      border-radius: $slider-bar__border-radius;
-      height: $slider-bar__height;
-      left: 0;
-      transition: left 50ms, right 50ms;
-      z-index: 1;
-    }
-
-    &__pointer {
-      @include align-center();
-      border-radius: $slider__border-radius;
-      cursor: grabbing;
-      height: $slider-pointer__size;
-      transition: left 50ms, right 50ms;
-      width: $slider-pointer__size;
-      z-index: 2;
-
-      &::after {
-        background-color: var(--slider-background-pointer, $md-slider-background-pointer-light);
-        border-radius: 50%;
-        box-shadow: $slider-pointer__box-shadow;
-        content: "";
-        height: 100%;
-        position: absolute;
-        width: 100%;
-
-        @media screen and (-ms-high-contrast: active) {
-          filter: brightness(1) contrast(1) saturate(1.5);
-        }
-      }
-    }
-
-    &__hashlabel {
-      @include flex($jc: space-between);
-      bottom: -$slider__indent;
-      color: var(--slider-label, $md-slider-label-light);
-      font-size: $slider-label__size;
-      left: 0;
-      line-height: $slider-label__size;
-      position: absolute;
-      right: -$slider-pointer__size;
-      white-space: nowrap;
-    }
-
-    &__value {
-      color: var(--slider-label, $md-slider-label-light);
-      font-size: $slider-label__size;
-      line-height: $slider-label__size;
-      position: absolute;
-      right: -$slider-pointer__size;
-      top: -$slider__indent;
-    }
-  }
-}
-
-:host([disabled]) {
-  .md-slider {
-    &__bar {
-      cursor: not-allowed;
-    }
-
-    &__pointer {
-      cursor: not-allowed;
-
-      &::after {
-        background-color: var(--slider-background-disabled-pointer, $md-slider-background-disabled-pointer-light);
-      }
-    }
-
-    &__selection {
-      background-color: var(--slider-background-disabled-selection, $md-slider-background-disabled-selection-light);
-    }
-  }
-}
-
-:host([focus-visible]:not([disabled])) {
-  .md-slider__pointer::after {
-    box-shadow: $slider-pointer__box-shadow--focus;
-  }
-}
-
-:host([no-pointer][focus-visible]:not([disabled])) {
-  .md-slider {
-    box-shadow: $slider__focus-shadow;
-  }
-}
-
-:host(:hover:not([disabled])) {
-  .md-slider__pointer::after {
-    background-color: var(--slider-background-hover-pointer, $md-slider-background-hover-pointer-light);
-  }
-}
-
-:host([no-pointer]) {
-  .md-slider {
-    margin-right: 0 !important;
-
-    &__bar,
-    &__value {
-      right: 0;
-    }
-
-    &__pointer {
-      display: none;
-    }
-  }
-}

package/src/components/slider/tokens/lm-slider-token.js

@@ -1,57 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const slider = {
-  prefix: "lm",
-  component: "slider",
-  background: {
-    selection: {
-      light: colors.blue[50].name,
-      red: {
-        light: colors.red[50].name
-      },
-      green: {
-        light: colors.green[50].name
-      },
-      blue: {
-        light: colors.blue[50].name
-      }
-    },
-    pointer: {
-      light: colors.white[100].name
-    },
-    bar: {
-      light: colors.gray[10].name,
-      dark: colors.gray[40].name
-    },
-
-    hover: {
-      pointer: {
-        light: colors.blue[10].name
-      }
-    },
-
-    disabled: {
-      selection: {
-        light: colors.gray[30].name,
-        dark: colors.white[100].name
-      },
-      pointer: {
-        light: colors.gray[10].name,
-        dark: colors.gray[40].name
-      }
-    },
-    focus: {
-      pointer: {
-        light: colors.gray[40].name,
-        dark: colors.gray[40].name
-      },
-    },
-    label: {
-      light: colors.gray[70].name
-    }
-  }
-};
-
-module.exports = slider;

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

@@ -1,61 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const slider = {
-  prefix: "md",
-  component: "slider",
-  background: {
-    selection: {
-      light: colors.blue[50].name,
-      dark: colors.blue[50].name,
-    },
-    pointer: {
-      light: colors.white[100].name
-    },
-    bar: {
-      light: colors.gray[30].name,
-      dark: colors.gray[60].name
-    },
-
-    hover: {
-      pointer: {
-        light: colors.blue[10].name,
-        dark: colors.blue[10].name
-      }
-    },
-
-    disabled: {
-      selection: {
-        light: colors.gray[50].name,
-        dark: colors.gray[50].name,
-      },
-      pointer: {
-        light: colors.gray[30].name,
-        dark: colors.gray[60].name
-      }
-    },
-    focus: {
-      pointer: {
-        light: colors.blue[20].name,
-        dark: colors.gray[20].name
-      },
-      selection: {
-        light: colors.blue[60].name,
-        dark: colors.blue[20].name
-      }
-    }
-  },
-  focus: {
-    shadow: {
-      light: colors.blue[50].name,
-      dark: colors.blue[50].name
-    }
-  },
-  label: {
-    light: colors.gray[70].name,
-    dark: colors.gray[40].name
-  }
-};
-
-module.exports = slider;

package/src/components/spinner/Spinner.stories.ts

@@ -1,39 +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 { number, boolean, withKnobs } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-import "@/components/spinner/Spinner";
-import "@/components/theme/Theme";
-
-export default {
-  title: "Components/Spinner",
-  component: "md-spinner",
-  decorators: [withKnobs, withA11y],
-  argTypes: {
-    spinnerStyleMap: { table: { disable: true } }
-  },
-  parameters: {
-    a11y: {
-      element: "md-spinner"
-    }
-  }
-};
-
-export const Spinner = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const size = number("Size", 20);
-
-  return html`
-    <md-theme class="theme-toggle" id="spinner" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-spinner .size="${size}"></md-spinner>
-    </md-theme>
-  `;
-}

package/src/components/spinner/Spinner.test.ts

@@ -1,22 +0,0 @@
-import { fixture, fixtureCleanup } from "@open-wc/testing-helpers";
-import "./Spinner";
-import { html } from "lit-element";
-import { Spinner } from "./Spinner";
-
-describe("Spinner component", () => {
-  afterEach(fixtureCleanup);
-
-  test("should render correctly", async () => {
-    const element = await fixture<Spinner.ELEMENT>(`<md-spinner></md-spinner>`);
-    expect(element).toBeDefined();
-  });
-
-  test("should render size", async () => {
-    const element = await fixture<Spinner.ELEMENT>(
-      html`
-        <md-spinner size="20"></md-spinner>
-      `
-    );
-    expect(element.size).toEqual(20);
-  });
-});

package/src/components/spinner/Spinner.ts

@@ -1,42 +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 reset from "@/wc_scss/reset.scss";
-import { styleMap } from "lit-html/directives/style-map";
-import { html, LitElement, property } from "lit-element";
-import styles from "./scss/module.scss";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-
-export namespace Spinner {
-  @customElementWithCheck("md-spinner")
-  export class ELEMENT extends LitElement {
-    @property({ type: Number, reflect: true }) size = 56;
-    static get styles() {
-      return [reset, styles];
-    }
-
-    get spinnerStyleMap() {
-      return {
-        width: `${this.size}px`,
-        height: `${this.size}px`
-      };
-    }
-
-    render() {
-      return html`
-        <i class="md-spinner" part="spinner" style=${styleMap(this.spinnerStyleMap)}></i>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-spinner": Spinner.ELEMENT;
-  }
-}

package/src/components/spinner/scss/mixins.scss

@@ -1,34 +0,0 @@
-@mixin spinner-style(
-  $border: $spinner__bg-color,
-  $border-progress-left: $spinner__color,
-  $border-progress: transparent
-) {
-  border: 1px solid $border;
-
-  &::after {
-    border-bottom: 1px solid $border-progress;
-    border-left: 1px solid $border-progress-left;
-    border-right: 1px solid $border-progress;
-    border-top: 1px solid $border-progress;
-  }
-}
-
-@mixin spinner-progress-color($border, $progress) {
-  background-color: transparent;
-  box-shadow: inset 0 0 0 1px $border;
-
-  .md-spinner-progress__circle
-  .md-spinner-progress__mask
-  .md-spinner-progress__fill {
-    background-color: transparent;
-    box-shadow: inset 0 0 0 1px $progress;
-  }
-
-  .md-spinner-progress__inset-circle {
-    background-color: transparent;
-
-    .md-spinner-progress__percentage {
-      color: $progress;
-    }
-  }
-}