@momentum-ui/web-components 2.16.6 → 2.16.8

package/src/components/dropdown/tokens/mdv2-dropdown-tokens.js

@@ -0,0 +1,74 @@
+/**
+ * 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.
+ *
+ */
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable no-undef */
+
+const dropdown = {
+  prefix: "mdv2",
+  component: "dropdown",
+  "bg-color": {
+    common: "$mds-color-theme-background-primary-ghost",
+    hover: {
+      common: "$mds-color-theme-background-primary-hover"
+    },
+    active: {
+      common: "$mds-color-theme-background-primary-active"
+    },
+    disabled: {
+      common: "$mds-color-theme-background-primary-disabled"
+    },
+    focus: {
+      common: "$mds-color-theme-background-primary-active"
+    }
+  },
+  "border-color": {
+    common: "$mds-color-theme-outline-input-normal",
+    focus: {
+      common: "$mds-color-theme-outline-theme-normal"
+    },
+    disabled: {
+      common: "$mds-color-theme-outline-primary-disabled"
+    }
+  },
+  label: {
+    radius: {
+      common: "0.25rem"
+    }
+  },
+  list: {
+    "bg-color": {
+      common: "$mds-color-theme-background-solid-primary-normal"
+    },
+    "border-color": {
+      common: "$mds-color-theme-outline-secondary-normal"
+    },
+    padding: {
+      common: "8"
+    },
+    item: {
+      "bg-color-hover": {
+        common: "$mds-color-theme-background-primary-hover"
+      },
+      "bg-color-focus": {
+        common: "$mds-color-theme-background-primary-active"
+      },
+      "border-focus": {
+        common: "$mds-color-theme-outline-theme-normal"
+      },
+      "border-radius": {
+        common: "8"
+      },
+      height: {
+        common: "36"
+      }
+    }
+  }
+};
+
+module.exports = dropdown;

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

@@ -0,0 +1,93 @@
+/**
+ * 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/editable-textfield/EditableTextfield";
+import { Args } from "@storybook/web-components";
+import { html } from "lit-html";
+import { numInputTypes } from "../../utils/enums"; // Keep type import as a relative path
+import { Input } from "../input/Input"; // Keep type import as a relative path
+import { alignment } from "./EditableTextfield"; // Keep type import as a relative path
+
+const successMessageArr: Input.Message = {
+  message: "This is where the message would be.",
+  type: "success"
+};
+const errorMessageArr: Input.Message = {
+  message: "This is where the message would be.",
+  type: "error"
+};
+const warningMessageArr: Input.Message = {
+  message: "This is where the message would be.",
+  type: "warning"
+};
+
+type EditableMap = { [key: string]: Input.Message };
+
+const messages: EditableMap = {
+  success: successMessageArr,
+  error: errorMessageArr,
+  warning: warningMessageArr
+};
+
+export const EditableTextfield = (args: Args) => {
+  if (args.messageStatus) {
+    return html`
+      <md-editable-field .message=${{ ...messages[args.message] }}> ${args.message} Status </md-editable-field>
+    `;
+  } else if (args.inputDiff) {
+    return html` <md-editable-field .message=${errorMessageArr} type=${args.inputType}> 12345 </md-editable-field> `;
+  } else if (args.inputValid) {
+    return html`
+      <md-editable-field .message=${errorMessageArr} .pattern=${args.regexString}>
+        Test Regex Match . . .
+      </md-editable-field>
+    `;
+  } else {
+    return html`
+      <md-editable-field
+        max-lines="2"
+        ?disabled=${args.disabledSetting}
+        .alignment=${args.fieldAlignment}
+        content="Text from Content Attribute"
+      >
+        Test editable text in slot
+      </md-editable-field>
+    `;
+  }
+};
+
+export default {
+  title: "Components/Editable Textfield",
+  component: "md-editable-field",
+  argTypes: {
+    isEditing: { table: { disable: true } },
+    alert: { table: { disable: true } },
+    hideMessage: { table: { disable: true } },
+    editableField: { table: { disable: true } },
+    reportValidity: { table: { disable: true } },
+    checkValidity: { table: { disable: true } },
+    handleFocus: { table: { disable: true } },
+    handleKeydown: { table: { disable: true } },
+    handleBlur: { table: { disable: true } },
+    overflowStyles: { table: { disable: true } },
+    maxLines: { control: "number", defaultValue: 2 },
+    fieldAlignment: { control: { type: "select", options: alignment }, defaultValue: "left" },
+    disabledSetting: { control: "boolean", defaultValue: false },
+    messageStatus: { control: "boolean", defaultValue: false },
+    inputDiff: { control: "boolean", defaultValue: false },
+    inputValid: { control: "boolean", defaultValue: false },
+    message: { control: { type: "select", options: ["success", "error", "warning"] }, defaultValue: "error" },
+    inputType: { control: { type: "select", options: numInputTypes }, defaultValue: "text" },
+    regexString: { control: "text", description: "Regex String", defaultValue: "^([+-]?[1-9]\\d*|0)$" }
+  },
+  parameters: {
+    a11y: {
+      element: "md-editable-field"
+    }
+  }
+};

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

@@ -0,0 +1,219 @@
+import { Input } from "@/components/input/Input";
+import { elementUpdated, fixture, fixtureCleanup, html } from "@open-wc/testing-helpers";
+import "./EditableTextfield";
+import { EditableTextfield } from "./EditableTextfield";
+
+const validInputs = {
+  text: "text",
+  integer: "123",
+  decimal: "123.321",
+  boolean: "false",
+  date: "10/10/2010",
+  time: "10:30PM"
+};
+const invalidInputs = {
+  text: 123,
+  integer: "1a2-3",
+  decimal: ".123.321",
+  boolean: "f ",
+  date: "15/20/2010",
+  time: "10:0PM"
+};
+
+const fixtureFactory = async (fieldAlignment: EditableTextfield.Alignment): Promise<EditableTextfield.ELEMENT> => {
+  return await fixture(html` <md-editable-field .alignment="${fieldAlignment}">Test text Message</md-editable-field> `);
+};
+
+const errorMessageArr: Input.Message = {
+  message: "This is where the message would be.",
+  type: "error"
+};
+
+describe("Editable Textfield component", () => {
+  afterEach(() => {
+    fixtureCleanup();
+  });
+
+  test("should render component", async () => {
+    expect.hasAssertions();
+    const component = await fixtureFactory("left");
+    expect(component).not.toBeNull();
+    expect(component.disabled).toBeFalsy;
+  });
+
+  test("should change isEditing property to true after click", async () => {
+    const component = await fixtureFactory("left");
+    await elementUpdated(component);
+
+    component.handleFocus();
+    await elementUpdated(component);
+
+    expect(component.isEditing).toBeTruthy;
+  });
+
+  test("shouldn't change property if component is disabled", async () => {
+    const component = await fixtureFactory("left");
+    component.disabled = true;
+    await elementUpdated(component);
+
+    component.handleFocus();
+    await elementUpdated(component);
+
+    expect(component.isEditing).toBeFalsy;
+  });
+
+  test("should change class if change property", async () => {
+    const component = await fixtureFactory("center");
+    await elementUpdated(component);
+
+    const el = component.shadowRoot?.querySelector("div.md-editable-textfield");
+    let expectedClassList = ["md-editable-textfield", "md-editable-textfield--center"];
+    expect(el?.classList?.length).toEqual(expectedClassList.length);
+    expect(expectedClassList.every((className) => el?.classList?.contains(className))).toBe(true);
+
+    component.alignment = "right";
+    await elementUpdated(component);
+
+    expectedClassList = ["md-editable-textfield", "md-editable-textfield--right"];
+    expect(el?.classList?.length).toEqual(expectedClassList.length);
+    expect(expectedClassList.every((className) => el?.classList?.contains(className))).toBe(true);
+  });
+
+  test("should update slot element's contenteditable attribute when clicked", async () => {
+    const originalText = "test text";
+    const component: EditableTextfield.ELEMENT = await fixture(html`
+      <md-editable-field content=${originalText}></md-editable-field>
+    `);
+
+    const innerElement = component.shadowRoot?.querySelector(".md-editable-textfield");
+    innerElement?.dispatchEvent(new MouseEvent("click"));
+
+    await elementUpdated(component);
+    expect(component.handleFocus).toHaveBeenCalled;
+    expect(component.isEditing).toBeTruthy;
+    expect(innerElement?.getAttribute("contenteditable")).toBeTruthy;
+  });
+  test("should update slot element's contenteditable attribute when field blur()", async () => {
+    const component: EditableTextfield.ELEMENT = await fixture(html`
+      <md-editable-field>test text</md-editable-field>
+    `);
+
+    const innerElement = component.querySelector(".md-editable-textfield");
+    innerElement?.dispatchEvent(new FocusEvent("blur"));
+    await elementUpdated(component);
+    expect(component.isEditing).toBeFalsy;
+    expect(innerElement?.getAttribute("contenteditable")).toBeFalsy;
+  });
+
+  test("should render default text", async () => {
+    const element: EditableTextfield.ELEMENT = await fixture(html` <md-editable-field></md-editable-field> `);
+    expect(element.innerText.trim()).toEqual(element.content);
+  });
+  test("should reset the alert when renewing validation", async () => {
+    const element: EditableTextfield.ELEMENT = await fixture(html` <md-editable-field></md-editable-field> `);
+    element.handleBlur();
+    expect(element.alert).toBeFalsy;
+  });
+  test("should trigger validation function on blur", async () => {
+    const element: EditableTextfield.ELEMENT = await fixture(html` <md-editable-field></md-editable-field> `);
+    const validationFunc = jest.spyOn(element, "handleValidation");
+    element.handleBlur();
+    expect(validationFunc).toHaveBeenCalled;
+  });
+  test("should trigger checkValidity when inputType is present", async () => {
+    const element: EditableTextfield.ELEMENT = await fixture(html`
+      <md-editable-field numberType="integer"></md-editable-field>
+    `);
+    const validationFunc = jest.spyOn(element, "checkValidity");
+    element.handleBlur();
+    expect(validationFunc).toHaveBeenCalled;
+  });
+  test("should trigger checkValidity when pattern is present", async () => {
+    const element: EditableTextfield.ELEMENT = await fixture(html`
+      <md-editable-field pattern="^([+-]?[1-9]\\d*|0)$"></md-editable-field>
+    `);
+    const validationFunc = jest.spyOn(element, "checkValidity");
+    element.handleBlur();
+    expect(validationFunc).toHaveBeenCalled;
+  });
+  test("should NOT checkValidity when pattern or inputType are missing", async () => {
+    const element: EditableTextfield.ELEMENT = await fixture(html` <md-editable-field></md-editable-field> `);
+    const validationFunc = jest.spyOn(element, "checkValidity");
+    element.handleBlur();
+    expect(validationFunc).not.toHaveBeenCalled;
+  });
+
+  test("should return true if there is no validation error", async () => {
+    const el: EditableTextfield.ELEMENT = await fixture(html` <md-editable-field></md-editable-field> `);
+    el.type = "integer";
+    await el.updateComplete;
+    expect(el.checkValidity && el.checkValidity(validInputs.integer)).toBeTruthy;
+    el.type = "decimal";
+    await el.updateComplete;
+    expect(el.checkValidity && el.checkValidity(validInputs.decimal)).toBeTruthy;
+  });
+  test("should check keydown entry for type violation", async () => {
+    const el: EditableTextfield.ELEMENT = await fixture(html`
+      <md-editable-field numberType="integer">1236</md-editable-field>
+    `);
+    const keyEvent = jest.spyOn(el, "handleKeydown");
+    const event = new KeyboardEvent("keydown", {
+      key: ".",
+      code: "Period"
+    });
+    el.dispatchEvent(event);
+    await el.updateComplete;
+    expect(keyEvent).toHaveBeenCalled;
+    expect(event.preventDefault).toHaveBeenCalled;
+  });
+  test("should return true for valid pattern", async () => {
+    const el: EditableTextfield.ELEMENT = await fixture(html`
+      <md-editable-field pattern="^([+-]?[1-9]\\d*|0)$"></md-editable-field>
+    `);
+    expect(el.checkValidity && el.checkValidity(validInputs.integer)).toBeTruthy;
+  });
+  test("should return false for invalid pattern", async () => {
+    const el: EditableTextfield.ELEMENT = await fixture(html`
+      <md-editable-field pattern="^([+-]?[1-9]\\d*|0)$"></md-editable-field>
+    `);
+    expect(el.checkValidity && el.checkValidity(invalidInputs.integer)).toBeTruthy;
+  });
+  test("should return error message if there is a validation error", async () => {
+    const el: EditableTextfield.ELEMENT = await fixture(html` <md-editable-field></md-editable-field> `);
+    expect(el.checkValidity && el.checkValidity(invalidInputs.integer)).not.toBeNull;
+    expect(el.checkValidity && el.checkValidity(invalidInputs.decimal)).not.toBeNull;
+    expect(el.checkValidity && el.checkValidity(invalidInputs.date)).not.toBeNull;
+    expect(el.checkValidity && el.checkValidity(invalidInputs.time)).not.toBeNull;
+    expect(el.checkValidity && el.checkValidity(invalidInputs.boolean)).not.toBeNull;
+  });
+
+  test("should render message when provided", async () => {
+    const component: EditableTextfield.ELEMENT = await fixture(html`
+      <md-editable-field alert .message=${{ ...errorMessageArr } as Input.Message}>
+        <div>Error Status</div>
+      </md-editable-field>
+    `);
+    expect(component.messagesTemplate).toBeCalled;
+    expect(component.shadowRoot!.querySelector("md-help-text")?.textContent?.trim()).toEqual(errorMessageArr.message);
+    expect(component.shadowRoot!.querySelector(".md-editable-textfield--error")).not.toBeNull;
+    expect(component.shadowRoot!.querySelector(".md-editable-textfield")?.getAttribute("aria-invalid")).toEqual("true");
+  });
+  test("should render role and other aria fields", async () => {
+    const component: EditableTextfield.ELEMENT = await fixture(
+      ` <md-editable-field ariaLabel="test field" aria-described-by="test Described details"></md-editable-field> `
+    );
+    const editComponent = component?.shadowRoot?.querySelector("div");
+    expect(editComponent?.getAttribute("role")).toContain("textbox");
+    expect(editComponent?.getAttribute("aria-label")).toMatch("test field");
+    expect(editComponent?.getAttribute("aria-describedby")).toMatch("test Described details");
+  });
+  test("should not render role and aria fields when disabled", async () => {
+    const component: EditableTextfield.ELEMENT = await fixture(
+      ` <md-editable-field disabled ariaLabel="test field" aria-described-by="test Described details"></md-editable-field> `
+    );
+    const editComponent = component?.shadowRoot?.querySelector("div");
+    expect(editComponent?.getAttribute("role")).toBeNull();
+    expect(editComponent?.getAttribute("aria-label")).toBeNull();
+    expect(editComponent?.getAttribute("aria-describedby")).toBeNull();
+  });
+});

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

@@ -0,0 +1,262 @@
+/**
+ * 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 }) 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(".")) ||
+        ((this.type === "integer" || this.type === "decimal") && code.match("Space"))
+      ) {
+        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=${ifDefined(!this.disabled ? "textbox" : undefined)}
+          tabindex=${this.disabled ? "-1" : "0"}
+          ?contenteditable=${this.isEditing}
+          @focus=${this.handleFocus}
+          @blur=${this.handleBlur}
+          @keydown=${(e: KeyboardEvent) => {
+            this.handleKeydown(e);
+          }}
+          aria-invalid=${ifDefined(!this.disabled ? (this.alert ? "true" : "false") : undefined)}
+          aria-label=${ifDefined(!this.disabled ? this.ariaLabel : undefined)}
+          aria-describedby=${ifDefined(!this.disabled ? this.ariaDescribedBy : undefined)}
+        >
+          ${dompurify.sanitize(this.content)}
+        </div>
+        ${this.messagesTemplate()}
+      `;
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-editable-field": EditableTextfield.ELEMENT;
+  }
+}