@momentum-ui/web-components 2.16.8 → 2.16.10

package/src/components/slider/Slider.test.ts

@@ -1,128 +0,0 @@
-import { Key } from "@/constants";
-import { elementUpdated, fixture, fixtureCleanup, nextFrame, oneEvent } from "@open-wc/testing-helpers";
-import { html } from "lit-element";
-import "./Slider";
-import { Slider } from "./Slider";
-
-describe("Slider Component", () => {
-  let element: Slider.ELEMENT;
-
-  afterEach(fixtureCleanup);
-
-  beforeEach(async () => {
-    element = await fixture<Slider.ELEMENT>(html` <md-slider></md-slider> `);
-  });
-
-  test("should handle click event", async () => {
-    element.dispatchEvent(new KeyboardEvent("mousedown"));
-
-    await elementUpdated(element);
-    expect(element["dragging"]).toBeTruthy();
-    expect(document.activeElement).toEqual(element);
-
-    document.dispatchEvent(new MouseEvent("mouseup"));
-
-    await nextFrame();
-    expect(element["dragging"]).toBeFalsy();
-
-    setTimeout(() => element["notifyChanges"]());
-
-    const { detail } = await oneEvent(element, "slider-change");
-    expect(detail).toBeDefined();
-
-    element.disabled = true;
-    await elementUpdated(element);
-
-    element.dispatchEvent(new KeyboardEvent("mousedown"));
-    await elementUpdated(element);
-
-    await nextFrame();
-    expect(element["dragging"]).toBeFalsy();
-  });
-
-  test("should handle keyboard event", async () => {
-    const createEvent = (code: string) =>
-      new KeyboardEvent("keydown", {
-        code
-      });
-
-    element.dispatchEvent(createEvent(Key.ArrowLeft));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(0);
-
-    element.dispatchEvent(createEvent(Key.ArrowLeft));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(0);
-
-    element.dispatchEvent(createEvent(Key.ArrowRight));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(1);
-
-    element.dispatchEvent(createEvent(Key.ArrowUp));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(2);
-
-    element.now = 100;
-
-    await elementUpdated(element);
-
-    element.dispatchEvent(createEvent(Key.ArrowUp));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(100);
-
-    element.dispatchEvent(createEvent(Key.Home));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(0);
-
-    element.dispatchEvent(createEvent(Key.End));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(100);
-
-    element.dispatchEvent(createEvent("KeyA"));
-    await elementUpdated(element);
-
-    expect(element.now).toEqual(100);
-
-    document.dispatchEvent(new KeyboardEvent("keyup"));
-
-    setTimeout(() => element["notifyChanges"]());
-
-    const { detail } = await oneEvent(element, "slider-change");
-    expect(detail).toBeDefined();
-  });
-
-  test("should set disabled", async () => {
-    expect(element.tabIndex).toEqual(0);
-
-    element.disabled = true;
-    await elementUpdated(element);
-
-    expect(element.tabIndex).toEqual(-1);
-    expect(element.getAttribute("aria-disabled")).toEqual("true");
-
-    element.disabled = false;
-    await elementUpdated(element);
-
-    expect(element.tabIndex).toEqual(0);
-    expect(element.getAttribute("aria-disabled")).toEqual("false");
-  });
-
-  test("should render steps", async () => {
-    element.step = 20;
-    await elementUpdated(element);
-
-    expect(element.shadowRoot!.querySelectorAll(".tick").length).toEqual(6);
-
-    element.step = 15;
-    await elementUpdated(element);
-
-    expect(element.shadowRoot!.querySelectorAll(".tick").length).toEqual(7);
-  });
-});

package/src/components/slider/Slider.ts

@@ -1,283 +0,0 @@
-import { Key } from "@/constants";
-import { FocusMixin } from "@/mixins";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import reset from "@/wc_scss/reset.scss";
-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);
-
-      const oldValue = this.now;
-      this.moveSliderTo(pointerPosition);
-      this.notifyChanging(oldValue, this.now);
-
-      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
-          }
-        })
-      );
-    }
-
-    private notifyChanging(oldValue: number, newValue: number) {
-      if (oldValue === newValue) {
-        return;
-      }
-
-      this.dispatchEvent(
-        new CustomEvent<{ oldValue: number; newValue: number }>("slider-changing", {
-          bubbles: true,
-          composed: true,
-          detail: {
-            oldValue: oldValue,
-            newValue: newValue
-          }
-        })
-      );
-    }
-
-    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;
-
-      const oldValue = this.now;
-
-      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;
-      }
-
-      this.notifyChanging(oldValue, this.now);
-
-      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,188 +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%;
-        border: 1px solid var(--slider-background-pointerBorder);
-
-        @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;
-      background-color: var(
-        --slider-background-disabled-bar,
-        var(--slider-background-bar, $md-slider-background-bar-light)
-      );
-    }
-
-    &__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: var(--slider-background-focus-shadow, $slider-pointer__box-shadow--focus);
-  }
-}
-
-:host([no-pointer][focus-visible]:not([disabled])) {
-  .md-slider {
-    box-shadow: var(--slider-background-focus-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;
-    }
-  }
-}
-
-@media (forced-colors: active) {
-  :host(md-slider) {
-    .md-slider {
-      &__bar {
-        background-color: CanvasText;
-      }
-      &__selection {
-        background-color: Highlight;
-      }
-      &__pointer::after {
-        background-color: Highlight;
-      }
-    }
-  }
-
-  :host(:hover:not([disabled])) {
-    .md-slider__pointer::after {
-      background-color: Highlight;
-    }
-  }
-
-  :host([no-pointer][focus-visible]:not([disabled])) {
-    .md-slider {
-      outline: 1px solid Highlight;
-    }
-  }
-
-  :host([focus-visible]:not([disabled])) {
-    .md-slider__pointer {
-      outline: 2px solid Highlight;
-    }
-  }
-
-  :host([disabled]) {
-    .md-slider {
-      &__pointer {
-        &::after {
-          background-color: GrayText;
-        }
-      }
-    }
-  }
-}

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;