@momentum-ui/web-components 2.5.7 → 2.6.0

package/src/components/chip/Chip.ts

@@ -1,241 +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 { Key } from "@/constants";
-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 { classMap } from "lit-html/directives/class-map";
-import "@/components/icon/Icon";
-import "@/components/progress-bar/ProgressBar";
-import "@/components/tooltip/Tooltip";
-import styles from "./scss/module.scss";
-
-export namespace Chip {
-  export type Role = "group" | "option";
-
-  @customElementWithCheck("md-chip")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) color = "";
-    @property({ type: String }) bgColor = "";
-    @property({ type: String }) textColor = "";
-    @property({ type: String }) height = "";
-    @property({ type: String }) icon = "";
-    @property({ type: String }) iconColor = "";
-    @property({ type: String }) role: Chip.Role = "group";
-    @property({ type: String, reflect: true }) id = "";
-    @property({ type: Boolean }) small = false;
-    @property({ type: Boolean }) readonly = false;
-    @property({ type: Boolean, reflect: true }) selected = false;
-    @property({ type: Boolean }) disabled = false;
-    @property({ type: Number }) determinateProgress = 0;
-    @property({ type: Boolean }) indeterminateProgress = false;
-    @property({
-      type: String,
-      hasChanged(newVal, oldVal) {
-        return newVal !== oldVal;
-      }
-    })
-    value = "";
-
-    @internalProperty({
-      hasChanged(newVal, oldVal) {
-        return newVal !== oldVal;
-      }
-    })
-    private textOverflow = false;
-    @internalProperty()
-    private renderedText = "";
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.truncStringPortion(this.value);
-      this.setAttribute("role", this.role);
-    }
-
-    updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      this.truncStringPortion(this.value);
-    }
-
-    // String truncation parameters
-    MAX_LENGTH = 18;
-    PRE_TRUNC_CHARS = 6;
-    POST_TRUNC_CHARS = 9;
-    DOT_COUNT = 3;
-
-    truncStringPortion(
-      str: string,
-      firstCharCount = this.PRE_TRUNC_CHARS,
-      endCharCount = this.POST_TRUNC_CHARS,
-      dotCount = this.DOT_COUNT
-    ): void {
-      if (this.value.length > this.MAX_LENGTH) {
-        let convertedStr = "";
-        convertedStr += str.substring(0, firstCharCount);
-        convertedStr += ".".repeat(dotCount);
-        convertedStr += str.substring(str.length - endCharCount, str.length);
-        this.renderedText = convertedStr;
-        this.textOverflow = true;
-      } else {
-        this.renderedText = this.value;
-      }
-    }
-
-    protected selectionChange = (newState: boolean) => {
-      this.dispatchEvent(
-        new CustomEvent<{ selected: boolean }>("chip-selected", {
-          composed: true,
-          bubbles: true,
-          detail: { selected: newState }
-        })
-      );
-    };
-
-    public handleClear = (chipId: string) => {
-      this.dispatchEvent(
-        new CustomEvent<{ id: string }>("chip-deleted", {
-          composed: true,
-          bubbles: true,
-          detail: { id: chipId }
-        })
-      );
-    };
-
-    public handleSelect = () => {
-      // sets selected state to true and dispatches event
-      if (!this.disabled) {
-        this.selected = true;
-        this.selectionChange(true);
-      }
-    };
-
-    public handleDeSelect = () => {
-      // sets selected state to false and dispatches event
-      this.selected = false;
-      this.selectionChange(false);
-    };
-
-    handleClick(e: MouseEvent) {
-      this.dispatchEvent(
-        new CustomEvent("chip-interaction", {
-          composed: true,
-          bubbles: true,
-          detail: { id: this.id }
-        })
-      );
-    }
-
-    protected handleKeydown(event: KeyboardEvent) {
-      switch (event.code) {
-        case Key.Space:
-        case Key.Enter:
-          this.handleSelect();
-          this.handleClick((event as unknown) as MouseEvent);
-          break;
-
-        default:
-          break;
-      }
-    }
-
-    protected renderBgColor = () => {
-      return this.bgColor ? `background-color: ${this.bgColor};` : nothing;
-    };
-    protected renderTextColor = () => {
-      return this.textColor ? `color: ${this.textColor};` : nothing;
-    };
-    protected renderHeight = () => {
-      return this.height ? `height: ${this.height};` : nothing;
-    };
-
-    protected getStyles = () => {
-      if (this.bgColor || this.textColor || this.height) {
-        return html`
-          <style>
-            :host .md-chip {
-              ${this.renderBgColor()};
-              ${this.renderTextColor()};
-              ${this.renderHeight()};
-            }
-          </style>
-        `;
-      } else return nothing;
-    };
-
-    static get styles() {
-      return [reset, styles];
-    }
-
-    protected loadingTemplate() {
-      if (this.determinateProgress || this.indeterminateProgress) {
-        return this.determinateProgress
-          ? html`
-              <md-progress-bar
-                class="md-chip--loading"
-                type="determinate"
-                value="${this.determinateProgress}"
-                displayFormat="none"
-              >
-              </md-progress-bar>
-            `
-          : html`
-              <md-progress-bar class="md-chip--loading" type="indeterminate" displayFormat="none"></md-progress-bar>
-            `;
-      } else return nothing;
-    }
-
-    protected iconTemplate() {
-      const iconColor = !this.disabled ? this.iconColor : "";
-      return this.icon
-        ? html`
-            <md-icon class="md-chip--icon" part="chip-icon" name="${this.icon}" color="${iconColor}"></md-icon>
-          `
-        : nothing;
-    }
-
-    render() {
-      const classNamesInfo = {
-        "md-chip--small": this.small,
-        "md-chip--disabled": this.disabled,
-        [`md-chip--${this.color}`]: this.color
-      };
-
-      return html`
-        ${this.getStyles()}
-        <md-tooltip ?disabled=${!this.textOverflow} message="${this.value}">
-          <span
-            tabindex="0"
-            class="md-chip ${classMap(classNamesInfo)}"
-            part="chip"
-            aria-selected=${this.selected}
-            aria-readonly=${this.readonly}
-            @click=${(e: MouseEvent) => {
-              this.handleClick(e);
-            }}
-            @keydown=${(e: KeyboardEvent) => {
-              this.handleKeydown(e);
-            }}
-          >
-            ${this.loadingTemplate()} ${this.iconTemplate()}
-            <slot name="custom-left-content" part="chip-left"> </slot>
-            <span class="md-chip--textcontent"> ${this.renderedText}</span>
-            <slot name="custom-right-content" part="chip-right"> </slot>
-          </span>
-        </md-tooltip>
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-chip": Chip.ELEMENT;
-  }
-}

package/src/components/chip/scss/chip.scss

@@ -1,379 +0,0 @@
-:focus {
-  outline: none;
-}
-
-.md-chip {
-  @include chip-base();
-  @include badge-size;
-
-  &--small {
-    @include badge-size($padding: rem-calc(3 12));
-    height: rem-calc(24);
-    min-width: auto;
-  }
-
-  &:focus {
-    @include focus-boxshadow(rem-calc(1), var(--md-default-focus-outline-color, $md-blue-70));
-  }
-
-  &:hover {
-    background-color: var(--md-tertiary-bg-color, $md-gray-10);
-  }
-
-  &:active,
-  &[aria-selected="true"] {
-    background-color: var(--md-quaternary-bg-color, $md-gray-20);
-  }
-
-  &--blue,
-  &--cobalt {
-    @include color-chip(
-      var(--badge-blue-bg-color, $lm-badge-blue-bg-color-light),
-      false,
-      var(--badge-blue-text-color, $lm-badge-blue-text-color-light),
-      var(--badge-blue-bg-color, $lm-badge-blue-bg-color-light),
-      var(--badge-blue-text-color, $lm-badge-blue-text-color-light)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-blue-hover-bg-color, $lm-badge-blue-hover-bg-color-light),
-        false,
-        var(--badge-blue-text-color, $lm-badge-blue-text-color-light),
-        var(--badge-blue-hover-bg-color, $lm-badge-blue-hover-bg-color-light),
-        var(--badge-blue-text-color, $lm-badge-blue-text-color-light)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-blue-active-bg-color, $lm-badge-blue-active-bg-color-light),
-        false,
-        var(--badge-blue-text-color, $lm-badge-blue-text-color-light),
-        var(--badge-blue-active-bg-color, $lm-badge-blue-active-bg-color-light),
-        var(--badge-blue-text-color, $lm-badge-blue-text-color-light)
-      );
-    }
-  }
-
-  &--gray {
-    @include color-chip(
-      var(--badge-gray-bg-color, $lm-badge-gray-bg-color-light),
-      false,
-      var(--badge-gray-text-color, $lm-badge-gray-text-color-light),
-      var(--badge-gray-bg-color, $lm-badge-gray-bg-color-light),
-      var(--badge-gray-text-color, $lm-badge-gray-text-color-light)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-gray-hover-bg-color, $lm-badge-gray-hover-bg-color-light),
-        false,
-        var(--badge-gray-text-color, $lm-badge-gray-text-color-light),
-        var(--badge-gray-hover-bg-color, $lm-badge-gray-hover-bg-color-light),
-        var(--badge-gray-text-color, $lm-badge-gray-text-color-light)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-gray-active-bg-color, $lm-badge-gray-active-bg-color-light),
-        false,
-        var(--badge-gray-text-color, $lm-badge-gray-text-color-light),
-        var(--badge-gray-active-bg-color, $lm-badge-gray-active-bg-color-light),
-        var(--badge-gray-text-color, $lm-badge-gray-text-color-light)
-      );
-    }
-  }
-
-  &--mint {
-    @include color-chip(
-      var(--badge-mint-bg-color, $lm-badge-mint-bg-color-light),
-      false,
-      var(--badge-mint-text-color, $lm-badge-mint-text-color-light),
-      var(--badge-mint-bg-color, $lm-badge-mint-bg-color-light),
-      var(--badge-mint-text-color, $lm-badge-mint-text-color-light)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-mint-hover-bg-color, $lm-badge-mint-hover-bg-color-light),
-        false,
-        var(--badge-mint-text-color, $lm-badge-mint-text-color-light),
-        var(--badge-mint-hover-bg-color, $lm-badge-mint-hover-bg-color-light),
-        var(--badge-mint-text-color, $lm-badge-mint-text-color-light)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-mint-active-bg-color, $lm-badge-mint-active-bg-color-light),
-        false,
-        var(--badge-mint-text-color, $lm-badge-mint-text-color-light),
-        var(--badge-mint-active-bg-color, $lm-badge-mint-active-bg-color-light),
-        var(--badge-mint-text-color, $lm-badge-mint-text-color-light)
-      );
-    }
-  }
-
-  &--darkmint {
-    @include color-chip(
-      var(--badge-darkmint-bg-color, $lm-badge-darkmint-bg-color-light),
-      false,
-      var(--badge-darkmint-text-color, $lm-badge-darkmint-text-color-light),
-      var(--badge-darkmint-bg-color, $lm-badge-darkmint-bg-color-light),
-      var(--badge-darkmint-text-color, $lm-badge-darkmint-text-color-light)
-    );
-  }
-
-  &--green {
-    @include color-chip(
-      var(--badge-green-bg-color, $lm-badge-green-bg-color-light),
-      false,
-      var(--badge-green-text-color, $lm-badge-green-text-color-light),
-      var(--badge-green-bg-color, $lm-badge-green-bg-color-light),
-      var(--badge-green-text-color, $lm-badge-green-text-color-light)
-    );
-  }
-
-  &--yellow {
-    @include color-chip(
-      var(--badge-yellow-bg-color, $lm-badge-yellow-bg-color-light),
-      false,
-      var(--badge-yellow-text-color, $lm-badge-yellow-text-color-light),
-      var(--badge-yellow-bg-color, $lm-badge-yellow-bg-color-light),
-      var(--badge-yellow-text-color, $lm-badge-yellow-text-color-light)
-    );
-  }
-
-  &--red {
-    @include color-chip(
-      var(--badge-red-bg-color, $lm-badge-red-bg-color-light),
-      false,
-      var(--badge-red-text-color, $lm-badge-red-text-color-light),
-      var(--badge-red-bg-color, $lm-badge-red-bg-color-light),
-      var(--badge-red-text-color, $lm-badge-red-text-color-light)
-    );
-  }
-
-  &--orange {
-    @include color-chip(
-      var(--badge-orange-bg-color, $lm-badge-orange-bg-color-light),
-      false,
-      var(--badge-orange-text-color, $lm-badge-orange-text-color-light),
-      var(--badge-orange-bg-color, $lm-badge-orange-bg-color-light),
-      var(--badge-orange-text-color, $lm-badge-orange-text-color-light)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-orange-hover-bg-color, $lm-badge-orange-hover-bg-color-light),
-        false,
-        var(--badge-orange-text-color, $lm-badge-orange-text-color-light),
-        var(--badge-orange-hover-bg-color, $lm-badge-orange-hover-bg-color-light),
-        var(--badge-orange-text-color, $lm-badge-orange-text-color-light)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-orange-active-bg-color, $lm-badge-orange-active-bg-color-light),
-        false,
-        var(--badge-orange-text-color, $lm-badge-orange-text-color-light),
-        var(--badge-orange-active-bg-color, $lm-badge-orange-active-bg-color-light),
-        var(--badge-orange-text-color, $lm-badge-orange-text-color-light)
-      );
-    }
-  }
-
-  &--gold {
-    @include color-chip(
-      var(--badge-gold-bg-color, $lm-badge-gold-bg-color-light),
-      false,
-      var(--badge-gold-text-color, $lm-badge-gold-text-color-light),
-      var(--badge-gold-bg-color, $lm-badge-gold-bg-color-light),
-      var(--badge-gold-text-color, $lm-badge-gold-text-color-light)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-gold-hover-bg-color, $lm-badge-gold-hover-bg-color-light),
-        false,
-        var(--badge-gold-text-color, $lm-badge-gold-text-color-light),
-        var(--badge-gold-hover-bg-color, $lm-badge-gold-hover-bg-color-light),
-        var(--badge-gold-text-color, $lm-badge-gold-text-color-light)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-gold-active-bg-color, $lm-badge-gold-active-bg-color-light),
-        false,
-        var(--badge-gold-text-color, $lm-badge-gold-text-color-light),
-        var(--badge-gold-active-bg-color, $lm-badge-gold-active-bg-color-light),
-        var(--badge-gold-text-color, $lm-badge-gold-text-color-light)
-      );
-    }
-  }
-
-  &--lime {
-    @include color-chip(
-      var(--badge-lime-bg-color, $lm-badge-lime-bg-color-light),
-      false,
-      var(--badge-lime-text-color, $lm-badge-lime-text-color-light),
-      var(--badge-lime-bg-color, $lm-badge-lime-bg-color-light),
-      var(--badge-lime-text-color, $lm-badge-lime-text-color-light)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-lime-hover-bg-color, $lm-badge-lime-hover-bg-color-light),
-        false,
-        var(--badge-lime-text-color, $lm-badge-lime-text-color-light),
-        var(--badge-lime-hover-bg-color, $lm-badge-lime-hover-bg-color-light),
-        var(--badge-lime-text-color, $lm-badge-lime-text-color-light)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-lime-active-bg-color, $lm-badge-lime-active-bg-color-light),
-        false,
-        var(--badge-lime-text-color, $lm-badge-lime-text-color-light),
-        var(--badge-lime-active-bg-color, $lm-badge-lime-active-bg-color-light),
-        var(--badge-lime-text-color, $lm-badge-lime-text-color-light)
-      );
-    }
-  }
-
-  &--pink {
-    @include color-chip(
-      var(--badge-pink-bg-color, $lm-badge-pink-bg-color-light),
-      false,
-      var(--badge-pink-text-color, $lm-badge-pink-text-color-light),
-      var(--badge-pink-bg-color, $lm-badge-pink-bg-color-light),
-      var(--badge-pink-text-color, $lm-badge-pink-text-color-light)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-pink-hover-bg-color, $lm-badge-pink-hover-bg-color-light),
-        false,
-        var(--badge-pink-text-color, $lm-badge-pink-text-color-light),
-        var(--badge-pink-hover-bg-color, $lm-badge-pink-hover-bg-color-light),
-        var(--badge-pink-text-color, $lm-badge-pink-text-color-light)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-pink-active-bg-color, $lm-badge-pink-active-bg-color-light),
-        false,
-        var(--badge-pink-text-color, $lm-badge-pink-text-color-light),
-        var(--badge-pink-active-bg-color, $lm-badge-pink-active-bg-color-light),
-        var(--badge-pink-text-color, $lm-badge-pink-text-color-light)
-      );
-    }
-  }
-
-  &--purple {
-    @include color-chip(
-      var(--badge-purple-bg-color, $lm-badge-purple-bg-color-light),
-      false,
-      var(--badge-purple-text-color, $lm-badge-purple-text-color-light),
-      var(--badge-purple-bg-color, $lm-badge-purple-bg-color-light),
-      var(--badge-purple-text-color, $lm-badge-purple-text-color-light)
-    );
-  }
-
-  &--violet {
-    @include color-chip(
-      var(--badge-violet-bg-color, $lm-badge-violet-bg-color-light),
-      false,
-      var(--badge-violet-text-color, $lm-badge-violet-text-color-light),
-      var(--badge-violet-bg-color, $lm-badge-violet-bg-color-light),
-      var(--badge-violet-text-color, $lm-badge-violet-text-color-light)
-    );
-
-    &:hover {
-      @include color-chip(
-        var(--badge-violet-hover-bg-color, $lm-badge-violet-hover-bg-color-light),
-        false,
-        var(--badge-violet-text-color, $lm-badge-violet-text-color-light),
-        var(--badge-violet-hover-bg-color, $lm-badge-violet-hover-bg-color-light),
-        var(--badge-violet-text-color, $lm-badge-violet-text-color-light)
-      );
-    }
-
-    &:active {
-      @include color-chip(
-        var(--badge-violet-active-bg-color, $lm-badge-violet-active-bg-color-light),
-        false,
-        var(--badge-violet-text-color, $lm-badge-violet-text-color-light),
-        var(--badge-violet-active-bg-color, $lm-badge-violet-active-bg-color-light),
-        var(--badge-violet-text-color, $lm-badge-violet-text-color-light)
-      );
-    }
-  }
-
-  &--cyan {
-    @include color-chip(
-      var(--badge-cyan-bg-color, $lm-badge-cyan-bg-color-light),
-      false,
-      var(--badge-cyan-text-color, $lm-badge-cyan-text-color-light),
-      var(--badge-cyan-bg-color, $lm-badge-cyan-bg-color-light),
-      var(--badge-cyan-text-color, $lm-badge-cyan-text-color-light)
-    );
-  }
-
-  .md-chip--clear {
-    @include modal-close-button(
-      $size: rem-calc(14),
-      $font-size: rem-calc(14),
-      $top-offset: rem-calc(12),
-      $right-offset: rem-calc(12)
-    );
-    display: flow-root;
-    margin-left: $chip-inner-content-margin;
-    margin-right: 0;
-  }
-
-  .md-chip--loading {
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    top: rem-calc(-2);
-    width: 100%;
-  }
-
-  .md-chip--textcontent {
-    max-width: $chip-text-max-width;
-  }
-
-  md-icon {
-    display: flex;
-    margin-right: $chip-inner-content-margin;
-  }
-
-  &.md-chip--disabled {
-    @include chip-base();
-    color: var(--md-disabled-text-color, $md-gray-40);
-    cursor: default;
-
-    md-icon {
-      color: var(--md-disabled-text-color, $md-gray-40);
-    }
-  }
-}
-
-::slotted(*) {
-  line-height: normal;
-}
-
-::slotted([slot="custom-left-content"]) {
-  margin-right: $chip-inner-content-margin;
-}
-
-::slotted([slot="custom-right-content"]) {
-  margin-left: $chip-inner-content-margin;
-}

package/src/components/chip/scss/mixins.scss

@@ -1,53 +0,0 @@
-@mixin chip-base() {
-  @include radius($radius: $chip-radius);
-  align-items: center;
-  background-color: var(--md-secondary-bg-color, $md-gray-05);
-  color: var(--md-primary-text-color, $md-gray-100);
-  cursor: pointer;
-  display: inline-flex;
-  font-family: $badge__font-family;
-  font-weight: $badge__font-weight;
-  height: $chip-height;
-  justify-content: space-between;
-  line-height: rem-calc(16);
-  margin-bottom: auto;
-  max-width: $chip-max-width;
-  overflow: auto;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  white-space: nowrap;
-  width: auto;
-}
-
-@mixin color-chip(
-  $bg: var(--badge-default-bg-color, $lm-badge-default-bg-color-light),
-  $radius: false,
-  $color: var(--badge-default-text-color, $lm-badge-default-text-color-light),
-  $hover-bg-color: var(--badge-default-bg-color, $lm-badge-default-bg-color-light),
-  $hover-color: var(--badge-default-text-color, $lm-badge-default-text-color-light)
-) {
-  @if $bg {
-    background-color: $bg;
-
-    @if $color {
-      color: $color;
-    }
-  }
-
-  @if $radius==true {
-    @include radius($badge__radius);
-  } @else if $radius {
-    @include radius($radius);
-  }
-
-  &:hover {
-    background-color: $hover-bg-color;
-    color: $hover-color;
-  }
-
-  &:active {
-    background-color: $hover-bg-color;
-    color: $hover-color;
-  }
-}

package/src/components/chip/scss/module.scss

@@ -1,21 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/tools/mixins/core";
-
-@import "@/wc_scss/settings/rem";
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/tools/mixins/focus";
-
-@import "@/wc_scss/typography/settings";
-
-// @import "./vars/lm-chip-settings";
-
-@import "@/components/badge/scss/vars/md-badge-settings.scss";
-@import "@/components/badge/scss/vars/lm-badge-settings.scss";
-@import "@/components/badge/scss/settings";
-@import "@/components/badge/scss/mixins";
-@import "@/components/modal/scss/mixins";
-
-@import "./settings";
-@import "./mixins";
-@import "./chip"

package/src/components/chip/scss/settings.scss

@@ -1,5 +0,0 @@
-$chip-height: rem-calc(32);
-$chip-radius: rem-calc(18);
-$chip-max-width: rem-calc(200);
-$chip-text-max-width: rem-calc(150);
-$chip-inner-content-margin: rem-calc(10);