@momentum-ui/web-components 2.16.1 → 2.16.3

package/src/components/code-editor/CodeEditor.ts

@@ -0,0 +1,183 @@
+import "@/components/badge/Badge";
+import "@/components/button/Button";
+import { customElementWithCheck } from "@/mixins";
+import reset from "@/wc_scss/reset.scss";
+import hljs from "highlight.js/lib/core";
+import { html, internalProperty, LitElement, property, PropertyValues, query, queryAssignedNodes } from "lit-element";
+import styles from "./scss/module.scss";
+
+export type Method = "get" | "post";
+
+export namespace CodeEditor {
+  @customElementWithCheck("md-code-editor")
+  export class ELEMENT extends LitElement {
+    @property({ type: String }) copyLocalization = "cURL";
+    @property({ type: String }) copiedLocalization = "Copied";
+    @property({ type: String }) method: Method = "get";
+    @property({ type: String, attribute: "accept-language" }) acceptLanguage = "javascript";
+    @property({ type: String }) url = "javascript";
+
+    @query("input[type='file']") input!: HTMLInputElement;
+    @query(".md-code-editor-code-block") codeBlock!: HTMLPreElement;
+    @query(".md-code-editor-url") codeUrl!: HTMLSpanElement;
+
+    @internalProperty() private disableCopyButton = true;
+    @internalProperty() private acceptTypes = "";
+    @internalProperty() private copied = false;
+
+    @queryAssignedNodes("code-block") slotNodes!: Node[];
+    @queryAssignedNodes("code-url") slotUrl!: Node[];
+
+    static get styles() {
+      return [reset, styles];
+    }
+
+    handleSlotChange() {
+      if (this.slotNodes && this.slotNodes.length) {
+        const codeBlock = this.slotNodes.find((node) => (node as Element).tagName === "CODE");
+        if (codeBlock) {
+          const codeBlockText = codeBlock.textContent;
+          if (codeBlockText) {
+            this.highlightBlock(codeBlockText);
+          }
+        }
+      }
+    }
+
+    handleUrlSlotChange() {
+      this.copied = false;
+      if (this.slotUrl && this.slotUrl.length) {
+        const codeUrl = this.slotUrl.find((node) => node as HTMLSpanElement);
+        if (codeUrl) {
+          const codeUrlText = codeUrl.textContent;
+          if (codeUrlText) {
+            this.copyUrl(codeUrlText);
+          }
+        }
+      }
+    }
+
+    private highlightBlock(text?: string) {
+      if (text) {
+        this.codeBlock.innerText = text;
+      }
+      hljs.highlightElement(this.codeBlock);
+    }
+
+    private copyUrl(copyUrl: string) {
+      this.codeUrl.innerText = copyUrl;
+      this.disableCopyButton = false;
+    }
+
+    copyClipboard() {
+      if (!this.disableCopyButton) {
+        this.codeUrl.innerText;
+        this.selectTarget(this.codeUrl);
+      }
+    }
+
+    private copyText() {
+      try {
+        document.execCommand("copy");
+        this.copied = true;
+      } catch (err) {
+        console.warn("Copy text failed");
+        this.copied = false;
+      }
+    }
+
+    private select(element: HTMLElement) {
+      const selection = window.getSelection();
+      const range = document.createRange();
+
+      range.selectNodeContents(element);
+
+      if (selection) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+    }
+
+    private selectTarget(target: HTMLElement) {
+      this.select(target);
+      this.copyText();
+    }
+
+    private async importLanguage(language: string) {
+      try {
+        const { default: importLanguage } = await import(`highlight.js/lib/languages/${language}`);
+        hljs.registerLanguage(`${language}`, importLanguage);
+        this.setAcceptTypes();
+      } catch {
+        console.warn("Please set correct language name");
+      }
+    }
+
+    private getAllAcceptTypes() {
+      const listLanguages = hljs.listLanguages();
+      if (listLanguages.length) {
+        return listLanguages
+          .map((language: string) => hljs.getLanguage(`${language}`).aliases)
+          .map((aliases: string[]) => aliases.map((alias: string) => `.${alias}`))
+          .join(",");
+      }
+      return "";
+    }
+
+    private setAcceptTypes() {
+      this.acceptTypes = this.getAllAcceptTypes();
+    }
+
+    protected updated(changedProperties: PropertyValues) {
+      super.updated(changedProperties);
+      if (changedProperties.has("acceptLanguage")) {
+        this.importLanguage(this.acceptLanguage);
+      }
+      if (changedProperties.has("acceptTypes")) {
+        this.highlightBlock();
+      }
+    }
+
+    render() {
+      return html`
+        <div class="md-code-editor" part="code-editor">
+          <div class="md-code-editor-header">
+            <div class="md-code-editor-name">
+              <md-badge color="blue">
+                <slot name="method" method=${this.method}></slot>
+              </md-badge>
+              <span class="md-code-editor-url">
+                <slot name="code-url" @slotchange=${this.handleUrlSlotChange}>${this.url}</slot>
+              </span>
+            </div>
+            <div class="md-code-editor-copy">
+              <span>${this.copied ? this.copiedLocalization.trim() : this.copyLocalization.trim()}</span>
+              <md-button
+                circle
+                size="20"
+                ?disabled=${this.disableCopyButton}
+                @click=${this.copyClipboard}
+                class="md-code-editor-copy-btn"
+              >
+                <md-icon slot="icon" name="icon-copy_16"></md-icon>
+              </md-button>
+            </div>
+          </div>
+          <div class="md-code-editor-content">
+            <pre class="md-code-editor-code-block">
+            <slot name="code-block" @slotchange=${this.handleSlotChange}>
+              <code class=${this.acceptLanguage}>
+              </code>
+            </slot>
+          </pre>
+          </div>
+        </div>
+      `;
+    }
+  }
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "md-code-editor": CodeEditor.ELEMENT;
+  }
+}

package/src/components/code-editor/scss/code-editor.scss

@@ -0,0 +1,157 @@
+:host(md-code-editor) {
+  .md-code-editor {
+    background: $md-code-editor-bg;
+    border-radius: $md-code-editor-border-radius;
+    color: $md-code-editor-color;
+    min-height: $md-code-editor-height;
+    overflow: hidden;
+
+    &-header {
+      @include flex($jc: space-between);
+      align-items: center;
+      background: $md-code-editor-header-bg;
+      flex: 0 0 auto;
+      font-size: $font-size-base;
+      padding: $md-code-editor-indent;
+    }
+
+    &-name {
+      @include flex;
+    }
+
+    md-badge::part(badge) {
+      border-radius: $md-code-editor-border-radius;
+      height: $md-code-editor-badge-size;
+      margin-right: $md-code-editor-indent;
+      padding: $md-code-editor-badge-indent;
+      text-transform: capitalize;
+    }
+
+    &-copy {
+      @include flex();
+      line-height: 1;
+
+      &-btn {
+        &::part(button) {
+          background: none;
+          color: $md-code-editor-copy-color;
+          margin-left: $md-code-editor-indent;
+
+        }
+
+        &[disabled] {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+
+  .hljs-comment,
+  .hljs-quote {
+    color: $md-yellow-10;
+  }
+
+  /* Red */
+  .hljs-variable,
+  .hljs-template-variable,
+  .hljs-tag,
+  .hljs-name,
+  .hljs-selector-id,
+  .hljs-selector-class,
+  .hljs-regexp,
+  .hljs-deletion {
+    color: $md-orange-40;
+  }
+
+  /* Orange */
+  .hljs-number,
+  .hljs-built_in,
+  .hljs-builtin-name,
+  .hljs-literal,
+  .hljs-type,
+  .hljs-params,
+  .hljs-meta,
+  .hljs-link {
+    color: $md-yellow-40;
+  }
+
+  /* Yellow */
+  .hljs-attribute {
+    color: $md-gold-30;
+  }
+
+  /* Green */
+  .hljs-string,
+  .hljs-symbol,
+  .hljs-bullet,
+  .hljs-addition {
+    color: $md-lime-40;
+  }
+
+  /* Blue */
+  .hljs-title,
+  .hljs-section {
+    color: $md-cyan-40;
+  }
+
+  /* Purple */
+  .hljs-keyword,
+  .hljs-selector-tag {
+    color: $md-violet-20;
+  }
+
+  .hljs {
+    background: transparent;
+    color: $md-gray-20;
+    display: block;
+    overflow-x: auto;
+    padding: 0.5em;
+  }
+
+  .hljs-emphasis {
+    font-style: italic;
+  }
+
+  .hljs-strong {
+    font-weight: bold;
+  }
+
+  @media screen and (-ms-high-contrast: active) {
+    .hljs-addition,
+    .hljs-attribute,
+    .hljs-built_in,
+    .hljs-builtin-name,
+    .hljs-bullet,
+    .hljs-comment,
+    .hljs-link,
+    .hljs-literal,
+    .hljs-meta,
+    .hljs-number,
+    .hljs-params,
+    .hljs-string,
+    .hljs-symbol,
+    .hljs-type,
+    .hljs-quote {
+      color: highlight;
+    }
+
+    .hljs-keyword,
+    .hljs-selector-tag {
+      font-weight: bold;
+    }
+  }
+}
+
+
+@media(forced-colors:active) {
+  :host(md-code-editor) {
+    .md-code-editor {
+      outline: 1px solid CanvasText;
+
+      &-header {
+       outline: 1px solid CanvasText;
+      }
+    }
+  }
+}

package/src/components/code-editor/scss/module.scss

@@ -0,0 +1,12 @@
+@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/typography/settings";
+@import "@/wc_scss/tools/mixins/flex";
+
+@import "./settings";
+@import "./code-editor";

package/src/components/code-editor/scss/settings.scss

@@ -0,0 +1,10 @@
+$md-code-editor-height: rem-calc(300);
+$md-code-editor-indent: rem-calc(10);
+$md-code-editor-color: $md-white-100;
+$md-code-editor-bg: $md-blue-95;
+$md-code-editor-header-bg: $md-blue-90;
+$md-code-editor-badge-size: rem-calc(20);
+$md-code-editor-badge-indent: rem-calc(4 6);
+$md-code-editor-indent: rem-calc(10);
+$md-code-editor-copy-color: $md-blue-50;
+$md-code-editor-border-radius: rem-calc(4);

package/src/components/combobox/ComboBox.stories.ts

@@ -0,0 +1,162 @@
+/**
+ * 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 { comboBoxObjectOptions, comboBoxOptions } from "@/[sandbox]/sandbox.mock";
+import "@/components/combobox/ComboBox";
+import "@/components/icon/Icon";
+import { Args } from "@storybook/web-components";
+import { html } from "lit-html";
+
+export default {
+  title: "Components/Combobox",
+  component: "md-combobox",
+  argTypes: {
+    comboboxClassMap: { table: { disable: true } },
+    autofocus: { table: { disable: true } },
+    align: { table: { disable: true } },
+    placeholder: { control: "text", defaultValue: "Add Country" },
+    disabled: { control: "boolean" },
+    trimSpace: { control: "boolean" },
+    init: { control: "boolean" },
+    customValue: { control: "boolean" },
+    multi: { control: "boolean" },
+    multiInit: { control: "boolean" },
+    object: { control: "boolean" },
+    objectInit: { control: "boolean" },
+    customContent: { control: "boolean" },
+    customContentInit: { control: "boolean" },
+    ariaLabel: { control: "text", defaultValue: "Select the country" },
+    searchSpecificAriaLabel: { control: "text", defaultValue: "Select the country, {{count}} results found" },
+    newMomentum: { control: "boolean", defaultValue: true }
+  },
+  parameters: {
+    a11y: {
+      element: "md-combobox"
+    }
+  }
+};
+
+export const Combobox = (args: Args) => {
+  if (args.init) {
+    return html`
+      <md-combobox
+        placeholder=${args.placeholder}
+        .options=${args.comboBoxOptions}
+        ?disabled=${args.disabled}
+        ?search-trim-space=${args.trimSpace}
+        .value=${[comboBoxOptions[3]]}
+        ariaLabel=${args.ariaLabel}
+        search-result-aria-label=${args.searchSpecificAriaLabel}
+        ?newMomentum="${args.newMomentum}"
+      ></md-combobox>
+    `;
+  } else if (args.multi) {
+    return html` <md-combobox placeholder=${args.placeholder} .options=${comboBoxOptions} is-multi></md-combobox> `;
+  } else if (args.customValue) {
+    return html`
+      <md-combobox
+        placeholder=${args.placeholder}
+        .options=${args.comboBoxOptions}
+        ?is-multi=${args.multi}
+        allow-custom-value
+        ?newMomentum="${args.newMomentum}"
+      ></md-combobox>
+    `;
+  } else if (args.multiInit) {
+    return html`
+      <md-combobox
+        placeholder=${args.placeholder}
+        .options=${comboBoxOptions}
+        is-multi
+        .value=${[comboBoxOptions[3], comboBoxOptions[5]]}
+        ?newMomentum="${args.newMomentum}"
+      ></md-combobox>
+    `;
+  } else if (args.object) {
+    return html`
+      <md-combobox
+        placeholder=${args.placeholder}
+        .options=${comboBoxObjectOptions}
+        option-id="id"
+        option-value="country"
+        ?is-multi=${args.multi}
+        ?newMomentum="${args.newMomentum}"
+      ></md-combobox>
+    `;
+  } else if (args.objectInit) {
+    return html`
+      <md-combobox
+        placeholder=${args.placeholder}
+        .options=${comboBoxObjectOptions}
+        option-id="id"
+        option-value="country"
+        ?is-multi=${args.multi}
+        .value=${[comboBoxObjectOptions[4]]}
+        ?search-trim-space=${args.trimSpace}
+        ?newMomentum="${args.newMomentum}"
+      ></md-combobox>
+    `;
+  } else if (args.customContent) {
+    return html`
+      <md-combobox with-custom-content ?is-multi=${args.multi} ?newMomentum="${args.newMomentum}">
+        <div slot="one" aria-label="Facebook" display-value="Facebook">
+          <span>Facebook</span>
+          <md-icon name="icon-facebook_16"></md-icon>
+        </div>
+        <div slot="two" aria-label="Twitter" display-value="Twitter">
+          <span class="company-value">Twitter</span>
+          <md-icon name="icon-twitter_16"></md-icon>
+        </div>
+        <div slot="three" aria-label="Wikipedia" display-value="Wikipedia">
+          <span class="company-value">Wikipedia</span>
+          <md-icon name="icon-wikipedia_16"></md-icon>
+        </div>
+        <div slot="four" aria-label="Google" display-value="Google">
+          <span class="company-value">Google</span>
+          <md-icon name="icon-google_16"></md-icon>
+        </div>
+      </md-combobox>
+    `;
+  } else if (args.customContentInit) {
+    return html`
+      <md-combobox
+        with-custom-content
+        is-multi
+        .value=${[{ id: "Wikipedia", value: "Wikipedia" }]}
+        ?newMomentum="${args.newMomentum}"
+      >
+        <div slot="one" aria-label="Facebook" display-value="Facebook">
+          <span>Facebook</span>
+          <md-icon name="icon-facebook_16"></md-icon>
+        </div>
+        <div slot="two" aria-label="Twitter" display-value="Twitter">
+          <span class="company-value">Twitter</span>
+          <md-icon name="icon-twitter_16"></md-icon>
+        </div>
+        <div slot="three" aria-label="Wikipedia" display-value="Wikipedia">
+          <span class="company-value">Wikipedia</span>
+          <md-icon name="icon-wikipedia_16"></md-icon>
+        </div>
+        <div slot="four" aria-label="Google" display-value="Google">
+          <span class="company-value">Google</span>
+          <md-icon name="icon-google_16"></md-icon>
+        </div>
+      </md-combobox>
+    `;
+  } else {
+    return html`
+      <md-combobox
+        .options=${comboBoxOptions}
+        placeholder=${args.placeholder}
+        ?disabled=${args.disabled}
+        ?search-trim-space=${args.trimSpace}
+        ?newMomentum="${args.newMomentum}"
+      ></md-combobox>
+    `;
+  }
+};