@momentum-ui/web-components 2.16.5 → 2.16.8

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

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

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

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

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

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

@@ -0,0 +1,10 @@
+$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

@@ -0,0 +1,188 @@
+: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

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