@momentum-ui/web-components 2.5.7 → 2.5.8

package/src/components/editable-textfield/EditableTextfield.ts

@@ -1,258 +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 { numInputTypes } from "../../utils/enums"; // Keep type import as a relative path
-import { ValidationRegex } from "@/utils/validations";
-import reset from "@/wc_scss/reset.scss";
-import dompurify from "dompurify";
-import { customElementWithCheck } from "@/mixins/CustomElementCheck";
-import { CSSResultArray, html, LitElement, property, PropertyValues, query } from "lit-element";
-import { nothing } from "lit-html";
-import { classMap } from "lit-html/directives/class-map";
-import { ifDefined } from "lit-html/directives/if-defined";
-import "@/components/input/Input";
-import { Input } from "../input/Input"; // Keep type import as a relative path
-import styles from "./scss/module.scss";
-
-export const alignment = ["left", "right", "center"] as const;
-
-export namespace EditableTextfield {
-  export type Alignment = typeof alignment[number];
-  export type InputType = typeof numInputTypes[number];
-
-  @customElementWithCheck("md-editable-field")
-  export class ELEMENT extends LitElement {
-    @property({ type: String }) alignment: EditableTextfield.Alignment = "left";
-    @property({ type: Boolean }) disabled = false;
-    @property({ type: Boolean }) isEditing = false;
-    @property({ type: String, attribute: "max-lines", reflect: true }) maxLines = "";
-    @property({ type: String, reflect: true }) content = "Click to edit text";
-    @property({ type: Object }) message: Input.Message | undefined = {
-      type: "error",
-      message: `That is not a valid input.`
-    };
-    @property({ type: Boolean, reflect: true }) alert = false;
-    @property({ type: Boolean }) hideMessage = false;
-    @property({ type: String }) pattern = "";
-    @property({ type: String }) type: EditableTextfield.InputType[number] | null = null;
-    @property({ type: String, attribute: "aria-label" }) ariaLabel = "editable field";
-    @property({ type: String, attribute: "aria-described-by" }) ariaDescribedBy = "";
-
-    private readonly messageController: Input.MessageController = new Input.MessageController();
-
-    @query(".md-editable-textfield") editableField: HTMLElement | undefined;
-
-    connectedCallback() {
-      super.connectedCallback();
-      this.addEventListener("focus", this.handleFocus);
-    }
-
-    disconnectedCallback() {
-      super.disconnectedCallback();
-      this.removeEventListener("focus", this.handleFocus);
-    }
-
-    protected firstUpdated(changedProperties: PropertyValues) {
-      super.firstUpdated(changedProperties);
-      if (this.innerText && this.innerText.length > 0) {
-        this.content = this.innerText.trim();
-      } else {
-        this.innerText = dompurify.sanitize(this.content);
-      }
-    }
-
-    protected updated(changedProperties: PropertyValues) {
-      super.updated(changedProperties);
-      if (changedProperties.has("content")) {
-        if (this.editableField) {
-          this.editableField.innerText = dompurify.sanitize(this.content);
-        }
-      }
-    }
-
-    reportValidity = () => {
-      this.dispatchEvent(
-        new Event("invalid", {
-          bubbles: false,
-          cancelable: true,
-          composed: true
-        })
-      );
-    };
-
-    checkValidity = (input: string): boolean => {
-      let result = true;
-      const regexTester = (regex: RegExp): void => {
-        if (input.match(regex) === null) {
-          result = false;
-        }
-      };
-      if (this.pattern) {
-        const regex = new RegExp(this.pattern);
-        regexTester(regex);
-      } else if (input && this.type) {
-        switch (this.type) {
-          case "integer":
-            regexTester(new RegExp(ValidationRegex.integerString));
-            break;
-          case "decimal":
-            regexTester(new RegExp(ValidationRegex.decimalString));
-            break;
-          default:
-            break;
-        }
-      }
-      return result;
-    };
-
-    handleFocus = () => {
-      if (this.disabled) {
-        return;
-      } else {
-        this.isEditing = true;
-        this.setRange();
-      }
-    };
-
-    setRange() {
-      if (this.editableField) {
-        const range = document.createRange();
-        const sel = window.getSelection();
-        const position = this.editableField.childNodes[0].nodeValue?.length;
-        range.setStart(this.editableField.childNodes[0], position ? position : 0);
-        range.collapse(true);
-
-        if (sel && sel.toString().length === 0) {
-          sel.removeAllRanges();
-          sel.addRange(range);
-        } else {
-          return;
-        }
-
-        if (this.maxLines.length > 0) {
-          this.editableField.scrollTop = this.editableField.scrollHeight;
-        }
-      }
-    }
-
-    handleKeydown = (e: KeyboardEvent) => {
-      const flaggedKeys = ["Tab", "Meta", "Shift", "Delete", "Backspace", "Arrow"];
-      const { key, code } = e;
-      if (flaggedKeys.some(s => code.includes(s))) {
-        return;
-      }
-
-      if (this.type === "integer" && key.includes(".")) {
-        e.preventDefault();
-      }
-
-      const currentString = this.editableField?.innerText.trim() + key;
-      if (this.type) {
-        if (isNaN(Number(currentString))) {
-          e.preventDefault();
-        } else if (this.type === "integer" && !Number.isInteger(Number(currentString))) {
-          e.preventDefault();
-        } else {
-          return;
-        }
-      }
-    };
-
-    handleBlur = () => {
-      this.isEditing = false;
-      if (this.maxLines.length > 0) {
-        this.editableField && this.editableField.scrollTo(0, 0);
-      }
-      this.content = this.editableField?.innerText.trim() || "";
-      this.alert = false;
-      this.handleValidation();
-    };
-
-    handleValidation() {
-      if (this.type || this.pattern) {
-        const valid = this.checkValidity && this.checkValidity(this.content);
-        if (!valid) {
-          this.reportValidity();
-          this.showAlert();
-        }
-      } else {
-        return;
-      }
-    }
-
-    showAlert(): void {
-      this.alert = true;
-    }
-
-    static get styles(): CSSResultArray {
-      return [reset, styles];
-    }
-
-    get overflowStyles() {
-      return (
-        this.maxLines.length &&
-        this.maxLines.length > 0 &&
-        `max-height: ${2 * parseInt(this.maxLines)}rem; -webkit-line-clamp: ${this.maxLines}; word-break: break-all;`
-      );
-    }
-
-    messagesTemplate() {
-      return this.alert
-        ? html`
-            <div class="md-editable-textfield__messages" style="display: ${this.hideMessage ? "none" : "block"}">
-              <md-help-text
-                id="alert-message"
-                role="alert"
-                aria-live="assertive"
-                .messageType=${this.message?.type}
-                aria-errormessage=${ifDefined(this.message?.message)}
-              >
-                ${this.message?.message}
-              </md-help-text>
-            </div>
-          `
-        : nothing;
-    }
-
-    render() {
-      const classes = {
-        [`md-editable-textfield--${this.alignment}`]: this.alignment,
-        "md-editable-textfield--disabled": this.disabled,
-        [`md-editable-textfield--${this.message?.type}`]: this.alert && !!this.message,
-        "md-editable-textfield--textoverflow": this.maxLines.length > 0 && !this.isEditing
-      };
-
-      return html`
-        <div
-          style="${this.overflowStyles}"
-          class="md-editable-textfield ${classMap(classes)}"
-          role="textbox"
-          tabindex=${this.disabled ? "-1" : "0"}
-          ?contenteditable=${this.isEditing}
-          @focus=${this.handleFocus}
-          @blur=${this.handleBlur}
-          @keydown=${(e: KeyboardEvent) => {
-            this.handleKeydown(e);
-          }}
-          aria-invalid=${this.alert ? "true" : "false"}
-          aria-label=${this.ariaLabel}
-          aria-describedby=${this.ariaDescribedBy}
-        >
-          ${dompurify.sanitize(this.content)}
-        </div>
-        ${this.messagesTemplate()}
-      `;
-    }
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "md-editable-field": EditableTextfield.ELEMENT;
-  }
-}

package/src/components/editable-textfield/scss/editable-textfield.scss

@@ -1,108 +0,0 @@
-/** @component editable-textfield */
-
-:focus {
-  outline: none;
-}
-
-@include exports("md-editable-textfield") {
-  .md-editable-textfield {
-    border-radius: $field-border-radius;
-    line-height: $field-line-height;
-    min-height: 2rem;
-    overflow-y: auto;
-    padding: $field-padding;
-
-    &:hover {
-      background-color: var(--editable-textfield-default-hover-bg-color, $md-gray-10);
-    }
-
-    &:active {
-      background-color: var(--editable-textfield-default-pressed-bg-color, $md-gray-20);
-    }
-
-    &:focus {
-      @include focus-boxshadow(rem-calc(1), var(--md-default-focus-outline-color, $md-blue-60));
-    }
-
-    &--left {
-      .md-input {
-        text-align: left;
-      }
-    }
-
-    &--center {
-      .md-input {
-        text-align: center;
-      }
-    }
-
-    &--center ::slotted(*) {
-      text-align: center;
-    }
-
-    &--right {
-      .md-input {
-        text-align: right;
-      }
-    }
-
-    &--right ::slotted(*) {
-      text-align: right;
-    }
-
-    &--disabled {
-      background-color: transparent;
-      color: var(--md-secondary-text-color, $md-gray-70);
-      cursor: default;
-
-      &:hover {
-        background-color: transparent;
-      }
-
-      &:focus {
-        @include remove-focus;
-      }
-    }
-
-    &--error {
-      background-color: var(--md-alert-error-bg-color, $md-red-10);
-      border: 1px solid var(--editable-textfield-error-border-color, $md-red-70);
-      color: var(--md-alert-error-text-color, $md-red-70);
-
-      &:focus {
-        @include remove-focus;
-      }
-    }
-
-    &--warning {
-      background-color: var(--md-alert-warning-bg-color, $md-yellow-10);
-      border: 1px solid var(--editable-textfield-warning-border-color, $md-yellow-50);
-      color: var(--md-alert-warning-text-color, $md-yellow-70);
-
-      &:focus {
-        @include remove-focus;
-      }
-    }
-
-    &--success {
-      background-color: var(--md-alert-success-bg-color, $md-green-10);
-      border: 1px solid var(--editable-textfield-success-border-color, $md-green-50);
-      color: var(--md-alert-success-text-color, $md-green-70);
-
-      &:focus {
-        @include remove-focus;
-      }
-    }
-
-    &--textoverflow {
-      -webkit-box-orient: vertical;
-      display: -webkit-box;
-      overflow-y: hidden;
-      text-overflow: ellipsis;
-    }
-  }
-
-  .md-editable-textfield__messages {
-    padding: $field-message-padding;
-  }
-}

package/src/components/editable-textfield/scss/module.scss

@@ -1,14 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-@import "@/wc_scss/tools/mixins/core";
-
-@import "@/wc_scss/colors/settings";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/tools/mixins/focus";
-
-@import "@/wc_scss/typography/settings";
-
-@import "@/wc_scss/settings/input.scss";
-
-@import "./settings";
-@import "./editable-textfield";

package/src/components/editable-textfield/scss/settings.scss

@@ -1,6 +0,0 @@
-$field-height: rem-calc(32);
-$field-line-height: calc(19 / 14)rem;
-$field-padding: 0 rem-calc(6) 0 rem-calc(6);
-$field-message-padding: rem-calc(6) 0 0 rem-calc(16);
-$field-lineheight: 1.1875rem;
-$field-border-radius: rem-calc(4);

package/src/components/editable-textfield/tokens/lm-editabletextfield-tokens.js

@@ -1,130 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const editableTextfield = {
-  prefix: "lm",
-  component: "editable-textfield",
-  default: {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[100].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[10].name,
-        dark: colors.gray[90].name
-      }
-    },
-    "read-only": {
-      "bg-color": {
-        light: colors.gray[10].name,
-        dark: colors.gray[90].name
-      }
-    },
-    focus: {
-      "border-color": {
-        light: colors.blue[60].name,
-        dark: colors.blue[40].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.gray[20].name,
-        dark: colors.gray[80].name
-      },
-      "border-color": {
-        light: colors.gray[40].name,
-        dark: colors.gray[70].name
-      }
-    }
-  },
-  disabled: {
-    "bg-color": {
-      light: colors.gray["05"].name,
-      dark: colors.gray[95].name
-    },
-    "text-color": {
-      light: colors.gray[40].name,
-      dark: colors.gray[70].name
-    }
-  },
-  error: {
-    "bg-color": {
-      light: colors.red[10].name,
-      dark: colors.red[90].name
-    },
-    "border-color": {
-      light: colors.red[50].name,
-      dark: colors.red[50].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    },
-    "message-text-color": {
-      light: colors.red[70].name,
-      dark: colors.red[50].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.red[20].name,
-        dark: colors.red[80].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.red[30].name,
-        dark: colors.red[70].name
-      }
-    }
-  },
-  success: {
-    "border-color": {
-      light: colors.green[50].name,
-      dark: colors.blue[40].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.green[20].name,
-        dark: colors.green[80].name
-      }
-    }
-  },
-  warning: {
-    "border-color": {
-      light: colors.yellow[50].name,
-      dark: colors.yellow[40].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.yellow[20].name,
-        dark: colors.yellow[80].name
-      }
-    }
-  },
-  filled: {
-    "bg-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[90].name
-    },
-    disabled: {
-      "bg-color": {
-        light: colors.gray[10].name,
-        dark: colors.gray[90].name
-      }
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[20].name,
-        dark: colors.gray[70].name
-      }
-    }
-  }
-};
-
-module.exports = editableTextfield;

package/src/components/editable-textfield/tokens/md-editabletextfield-tokens.js

@@ -1,118 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const editableTextfield = {
-  prefix: "md",
-  component: "editable-textfield",
-  default: {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[100].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[10].name,
-        dark: colors.gray[90].name
-      }
-    },
-    "read-only": {
-      "bg-color": {
-        light: colors.gray[10].name,
-        dark: colors.gray[90].name
-      }
-    },
-    focus: {
-      "border-color": {
-        light: colors.blue[60].name,
-        dark: colors.blue[40].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.gray[20].name,
-        dark: colors.gray[80].name
-      },
-      "border-color": {
-        light: colors.gray[40].name,
-        dark: colors.gray[70].name
-      }
-    }
-  },
-  disabled: {
-    "bg-color": {
-      light: colors.gray["05"].name,
-      dark: colors.gray[95].name
-    },
-    "text-color": {
-      light: colors.gray[40].name,
-      dark: colors.gray[70].name
-    }
-  },
-  error: {
-    "bg-color": {
-      light: colors.red[10].name,
-      dark: colors.red[90].name
-    },
-    "border-color": {
-      light: colors.red[50].name,
-      dark: colors.red[50].name
-    },
-    "text-color": {
-      light: colors.gray[100].name,
-      dark: colors.gray["05"].name
-    },
-    "message-text-color": {
-      light: colors.red[70].name,
-      dark: colors.red[50].name
-    },
-    hover: {
-      "bg-color": {
-        light: colors.red[20].name,
-        dark: colors.red[80].name
-      }
-    },
-    pressed: {
-      "bg-color": {
-        light: colors.red[30].name,
-        dark: colors.red[70].name
-      }
-    }
-  },
-  succes: {
-    "border-color": {
-      light: colors.green[50].name,
-      dark: colors.blue[40].name
-    }
-  },
-  warning: {
-    "border-color": {
-      light: colors.yellow[50].name,
-      dark: colors.yellow[40].name
-    }
-  },
-  filled: {
-    "bg-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[90].name
-    },
-    disabled: {
-      "bg-color": {
-        light: colors.gray[10].name,
-        dark: colors.gray[90].name
-      }
-    },
-    hover: {
-      "bg-color": {
-        light: colors.gray[20].name,
-        dark: colors.gray[70].name
-      }
-    }
-  }
-};
-
-module.exports = editableTextfield;

package/src/components/favorite/Favorite.stories.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 "@/components/favorite/Favorite";
-import "@/components/theme/Theme";
-import { withA11y } from "@storybook/addon-a11y";
-import { boolean, withKnobs } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-import { action } from '@storybook/addon-actions';
-
-export default {
-  title: "Components/Favorite",
-  component: "md-favorite",
-  decorators: [withKnobs, withA11y],
-  argTypes: {
-    toggleSwitchClassMap: { table: { disable: true } },
-    autofocus: { table: { disable: true } }
-  },
-  parameters: {
-    a11y: {
-      element: "md-favorite"
-    }
-  }
-};
-
-export const Favorite = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const active = boolean("Checked", false);
-  const disabled = boolean("Disabled", false);
-
-  return html`
-  <md-theme class="theme-toggle" id="toggle" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-    <md-favorite @favorite-elect=${(action('favorite-elect'))} id="favorite-switch" ?active=${active} ?disabled=${disabled}></md-favorite>
-  </md-theme>
-  `;
-};