@momentum-ui/web-components 2.16.6 → 2.16.8

package/src/components/table-advanced/scss/module.scss

@@ -0,0 +1,27 @@
+/**
+ * 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 "@/wc_scss/tools/functions/core";
+
+@import "~@momentum-ui/icons/scss/variables";
+
+@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-table-advanced-settings.scss";
+@import "./vars/lm-table-advanced-settings.scss";
+
+@import "./settings";
+@import "./table-advanced";

package/src/components/table-advanced/scss/settings.scss

@@ -0,0 +1,16 @@
+$advanced-table-main-border: 1px solid var(--table-advanced-border-color, $lm-table-advanced-border-color-light);
+$advanced-table-filter-border: 1px solid
+  var(--table-advanced-filter-border-color, $lm-table-advanced-filter-border-color-light);
+$advanced-table-dragarea-border: 2px dashed
+  var(--table-advanced-filter-border-color, $lm-table-advanced-filter-border-color-light);
+$advanced-table-focus-border: 2px solid var(--md-focus-border-color);
+$advanced-table-main-indent: rem-calc(4);
+$advanced-table-row-height: rem-calc(40);
+$advanced-table-sort-icon: rem-calc(16);
+$advanced-table-overlay-position: rem-calc(6);
+$advanced-table-header-sticky-indent: rem-calc(1);
+$advanced-table-resize-width: rem-calc(4);
+$advanced-table-collapse-btn: rem-calc(20);
+$advanced-table-filter-btn: rem-calc(24);
+$advanced-table-filter-height: rem-calc(14);
+$advanced-table-row-focus: 0 0 0 rem-calc(2);

package/src/components/table-advanced/scss/table-advanced.scss

@@ -0,0 +1,399 @@
+/**
+ * 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.
+ *
+*/
+
+:host {
+  display: block;
+}
+
+.md-table-advanced {
+  width: 100%;
+}
+
+table {
+  border-collapse: separate;
+  border-spacing: 0;
+  max-width: 100%;
+  position: relative;
+  width: 100%;
+
+  &.sticky-header {
+    height: 100%;
+
+    thead {
+      th:first-child {
+        border-left: 1px solid var(--table-advanced-border-color, $lm-table-advanced-border-color-light);
+      }
+
+      th {
+        background-color: var(--table-advanced-header-bg-color, $lm-table-advanced-header-bg-color-light);
+        border-left: 0;
+        border-top: 0;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+
+        &::before {
+          border-top: $advanced-table-main-border;
+          bottom: 0;
+          content: " ";
+          left: 0;
+          position: absolute;
+          top: 0;
+          width: 100%;
+        }
+      }
+
+      tr:last-child th {
+        top: $advanced-table-row-height;
+
+        &::before {
+          border-bottom: $advanced-table-main-border;
+          border-top: $advanced-table-main-border;
+        }
+      }
+
+      tr:first-child th {
+        height: calc(#{$advanced-table-row-height} + #{$advanced-table-header-sticky-indent} * 2);
+        top: 0;
+
+        &::before {
+          border-bottom: $advanced-table-main-border;
+          border-top: $advanced-table-main-border;
+        }
+      }
+
+      tr:focus {
+        outline: none;
+
+        th {
+          &:first-child {
+            border-left: $advanced-table-focus-border;
+          }
+          &:last-child {
+            border-right: $advanced-table-focus-border;
+          }
+
+          &::before {
+            border-bottom: $advanced-table-focus-border;
+            border-top: $advanced-table-focus-border;
+          }
+        }
+      }
+    }
+  }
+}
+
+thead {
+  th:first-child {
+    border-left: 1px solid var(--table-advanced-border-color, $lm-table-advanced-border-color-light);
+  }
+
+  th {
+    background-color: var(--table-advanced-header-bg-color, $lm-table-advanced-header-bg-color-light);
+    border: $advanced-table-main-border;
+    border-left: 0;
+    color: var(--md-secondary-text-color);
+    font-family: $brand-font-regular;
+    font-size: $font-size-base;
+    height: $advanced-table-row-height;
+    max-width: 0;
+    padding: 0 calc(0.375rem);
+    position: relative;
+    text-align: left;
+
+    .filter {
+      display: inline-block;
+      height: auto;
+      margin-top: calc(#{$advanced-table-resize-width} / 2);
+    }
+
+    .resize {
+      background-color: transparent;
+      cursor: col-resize;
+      height: 100%;
+      left: calc(-#{$advanced-table-resize-width} / 2);
+      position: absolute;
+      top: 0;
+      width: $advanced-table-resize-width;
+      z-index: 1;
+    }
+  }
+
+  .head-inner-cell {
+    align-items: center;
+    display: flex;
+    min-width: $advanced-table-filter-height;
+
+    .filter-wrap {
+      align-items: center;
+      display: inline-flex;
+      flex: 1;
+      justify-content: flex-end;
+    }
+
+    .filter-icon {
+      color: var(--md-secondary-text-color);
+      cursor: pointer;
+      display: inline-block;
+      height: $advanced-table-filter-btn;
+      min-width: $advanced-table-collapse-btn;
+      position: relative;
+      z-index: 1;
+
+      &::part(button) {
+        padding: $advanced-table-main-indent;
+        text-align: center;
+        width: $advanced-table-filter-btn;
+      }
+
+      &:hover {
+        background-color: var(--table-advanced-filter-hover-bg-color, $lm-table-advanced-filter-hover-bg-color-light);
+      }
+
+      &:active {
+        background-color: var(
+          --table-advanced-filter-pressed-bg-color,
+          $lm-table-advanced-filter-pressed-bg-color-light
+        );
+      }
+    }
+
+    span {
+      display: inline-block;
+      overflow: hidden;
+      padding-right: calc(#{$advanced-table-main-indent} * 1.25);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+    }
+
+    .sortable {
+      background: transparent;
+      border: 0;
+      color: var(--md-secondary-text-color);
+      display: inline-flex;
+      align-items: center;
+      min-width: calc(#{$advanced-table-sort-icon} * 2.5);
+      overflow: hidden;
+      padding-right: calc(#{$advanced-table-main-indent} * 4);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: auto;
+    }
+  }
+
+  md-menu-overlay::part(overlay) {
+    top: -$advanced-table-overlay-position;
+    white-space: normal;
+  }
+
+  @supports (-moz-appearance: none) {
+    md-menu-overlay::part(overlay) {
+      top: -$advanced-table-main-indent;
+      white-space: normal;
+    }
+  }
+
+  .drag-area-col {
+    cursor: grab;
+    display: block;
+    height: calc(#{$advanced-table-main-indent} * 10);
+    left: $advanced-table-main-indent;
+    position: absolute;
+    right: $advanced-table-main-indent;
+    top: 0;
+    z-index: 1;
+
+    &.drag {
+      border: $advanced-table-dragarea-border;
+      opacity: 1;
+    }
+
+    &.over {
+      background-color: $md-violet-50;
+      height: 100%;
+      opacity: 0.1;
+    }
+  }
+
+  .sortable {
+    cursor: pointer;
+    z-index: 1;
+    gap: 0.5rem;
+    
+  }
+}
+
+.filter-active {
+  display: inline-block;
+  height: $advanced-table-collapse-btn;
+  text-align: center;
+  vertical-align: bottom;
+  width: $advanced-table-collapse-btn;
+
+  &::part(icon) {
+    line-height: $advanced-table-filter-height;
+  }
+}
+
+.filter-menu {
+  background-color: var(--table-advanced-filter-bg-color, $lm-table-advanced-filter-bg-color-light);
+  padding: calc(#{$advanced-table-main-indent} * 3);
+  position: relative;
+  z-index: 1;
+
+  select {
+    background-color: var(--table-advanced-filter-bg-color, $lm-table-advanced-filter-bg-color-light);
+    border: $advanced-table-filter-border;
+    color: var(--md-secondary-text-color);
+    min-height: calc(#{$advanced-table-filter-height} * 1.8);
+    width: 100%;
+  }
+
+  input {
+    background-color: var(--table-advanced-filter-bg-color, $lm-table-advanced-filter-bg-color-light);
+    border: $advanced-table-filter-border;
+    color: var(--md-secondary-text-color);
+    margin-top: calc(#{$advanced-table-main-indent} * 2);
+    width: 100%;
+  }
+}
+
+tbody {
+  tr {
+    position: relative;
+
+    td:first-child {
+      border-left: 1px solid var(--table-advanced-border-color, $lm-table-advanced-border-color-light);
+    }
+
+    td {
+      border-bottom: 1px solid var(--table-advanced-border-color, $lm-table-advanced-border-color-light);
+      border-right: 1px solid var(--table-advanced-border-color, $lm-table-advanced-border-color-light);
+      font-size: $font-size-base;
+      height: $advanced-table-row-height;
+      max-width: 0;
+      padding: calc(#{$advanced-table-main-indent} * 1.5);
+      position: relative;
+    }
+
+    th:first-child {
+      border-top: 1px solid var(--table-advanced-border-color, $lm-table-advanced-border-color-light);
+    }
+
+    th {
+      background-color: var(--table-advanced-header-bg-color, $lm-table-advanced-header-bg-color-light);
+      border-bottom: 1px solid var(--table-advanced-border-color, $lm-table-advanced-border-color-light);
+      border-right: 1px solid var(--table-advanced-border-color, $lm-table-advanced-border-color-light);
+      font-size: $font-size-base;
+      max-width: 0;
+      padding: 0 calc(#{$advanced-table-main-indent} * 4);
+      position: relative;
+      text-align: left;
+    }
+
+    .inner-cell {
+      display: flex;
+      white-space: nowrap;
+      align-items: center;
+
+      .warn-icon {
+        display: inline-block;
+        margin-left: $advanced-table-main-indent;
+        max-height: $advanced-table-collapse-btn;
+        position: relative;
+        vertical-align: middle;
+        z-index: 0;
+      }
+
+      md-icon::part(icon) {
+        line-height: $advanced-table-collapse-btn;
+      }
+
+      span {
+        align-self: center;
+        display: inline-block;
+        flex: 1;
+        overflow: hidden;
+        padding: 0 $advanced-table-main-indent;
+        text-overflow: ellipsis;
+        vertical-align: middle;
+      }
+    }
+
+    .drag-handle {
+      cursor: grab;
+      float: left;
+      margin-right: calc(#{$advanced-table-main-indent} * 1.5);
+    }
+
+    .drag-area {
+      height: 50%;
+      left: 0;
+      opacity: 0.3;
+      position: absolute;
+      right: 0;
+
+      &.top {
+        top: 0;
+      }
+
+      &.bottom {
+        background-color: transparent;
+        bottom: 0;
+      }
+    }
+
+    &.ghost {
+      opacity: 0.3;
+    }
+
+    &:hover {
+      background-color: var(--table-advanced-hover-bg-color, $lm-table-advanced-hover-bg-color-light);
+
+      td,
+      th {
+        background-color: var(--table-advanced-hover-bg-color, $lm-table-advanced-hover-bg-color-light);
+      }
+    }
+
+    &:active,
+    &.selected {
+      background-color: var(--table-advanced-selected-bg-color, $lm-table-advanced-selected-bg-color-light);
+
+      td,
+      th {
+        background-color: var(--table-advanced-selected-bg-color, $lm-table-advanced-selected-bg-color-light);
+      }
+    }
+  }
+}
+
+button.row-collapsible {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  height: $advanced-table-collapse-btn;
+  width: $advanced-table-collapse-btn;
+  margin-right: calc(#{$advanced-table-main-indent} * 1.5);
+
+  background-color: transparent;
+  border: 1px solid var(--table-advanced-border-color);
+  border-radius: 2px;
+
+  &:hover {
+    background-color: var(--table-advanced-filter-hover-bg-color, $lm-table-advanced-filter-hover-bg-color-light);
+    border: 0;
+  }
+
+  &:active {
+    background-color: var(--table-advanced-filter-pressed-bg-color);
+    border: 0;
+  }
+}

package/src/components/table-advanced/src/decorators.ts

@@ -0,0 +1,150 @@
+// DEBOUNCE decorator
+// --------------------------------------
+
+export function debounce(ms = 250) {
+  return function (target: any, key: string, descriptor: PropertyDescriptor) {
+    let timeout: number;
+    // eslint-disable-next-line @typescript-eslint/ban-types
+    return decorateFunction({ target, key, descriptor }, function (funcOriginal: Function, args: any[]) {
+      clearTimeout(timeout);
+      /* istanbul ignore next */
+      timeout = window.setTimeout(() => {
+        clearTimeout(timeout);
+        funcOriginal.apply(this, args);
+      }, ms);
+    });
+  };
+}
+
+function decorateFunction(p: Payload, funcWrap: FuncWrap): PropertyDescriptor {
+  p.descriptor = p.descriptor || Object.getOwnPropertyDescriptor(p.target, p.key);
+
+  if (typeof p.descriptor.value !== "function") {
+    console.warn(p.key, "Decorator must be used on function");
+    return p.descriptor;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/ban-types
+  const funcOriginal: Function = p.descriptor.value;
+  const className: string = p.target.constructor.name;
+
+  p.descriptor.value = function wrap(this: any, ...args: any[]) {
+    return funcWrap.call(this, funcOriginal, args, className);
+  };
+
+  return p.descriptor;
+}
+
+type Payload = {
+  target: any;
+  key: string;
+  descriptor: PropertyDescriptor;
+};
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type FuncWrap = (this: any, funcOriginal: Function, args: any[], className: string) => any;
+
+// EVT decorator
+// --------------------------------------
+
+export function evt() {
+  return (protoOrDescriptor: any, name: string): any => {
+    const descriptor = {
+      get(this: HTMLElement) {
+        return new Evt(this, name !== undefined ? name : protoOrDescriptor.key);
+      },
+      enumerable: true,
+      configurable: true
+    };
+
+    if (name !== undefined) {
+      // legacy TS decorator
+      return Object.defineProperty(protoOrDescriptor, name, descriptor);
+    } else {
+      // TC39 Decorators proposal
+      return {
+        kind: "method",
+        placement: "prototype",
+        key: protoOrDescriptor.key,
+        descriptor
+      };
+    }
+  };
+}
+
+type Detail<T> = { detail: T };
+
+export class Evt<T extends Detail<V>, V = any> {
+  constructor(
+    private target: HTMLElement,
+    private eventName: string
+  ) {}
+
+  emit(
+    value: T extends Detail<infer U> ? U : never,
+    options: { bubbles?: boolean; composed?: boolean; cancelable?: boolean } = {
+      bubbles: true,
+      composed: true,
+      cancelable: false
+    }
+  ) {
+    this.target.dispatchEvent(
+      new CustomEvent<T extends Detail<infer U> ? U : never>(this.eventName, { detail: value, ...options })
+    );
+  }
+}
+
+// TEMPLATE decorator
+// --------------------------------------
+
+import { directive, NodePart, Part } from "lit-html";
+
+interface PreviousValue {
+  readonly template: HTMLTemplateElement;
+  readonly fragment: DocumentFragment;
+}
+
+const previousValues = new WeakMap<NodePart, PreviousValue>();
+
+export type TemplateInfo = {
+  content: string;
+  insertIndex: number;
+  col: number;
+  row: number;
+};
+
+type TCallback = TemplateInfo & {
+  fragment: DocumentFragment;
+};
+
+type TPayload = TemplateInfo & {
+  template: HTMLTemplateElement;
+  cb: TemplateCallback;
+};
+
+export type TemplateCallback = (p: TCallback) => void;
+
+export const templateCallback = directive((p: TPayload) => (part: Part): void => {
+  if (!(part instanceof NodePart)) {
+    throw new Error("templateCallback can only be used in text bindings");
+  }
+
+  const previousValue = previousValues.get(part);
+
+  if (previousValue !== undefined && p.template === previousValue.template && part.value === previousValue.fragment) {
+    return;
+  }
+
+  const fragment = document.importNode(p.template.content, true);
+
+  p.cb({
+    content: p.content,
+    row: p.row,
+    col: p.col,
+    insertIndex: p.insertIndex,
+    fragment
+  });
+
+  part.setValue(fragment);
+  previousValues.set(part, { template: p.template, fragment });
+});

package/src/components/table-advanced/src/filter.ts

@@ -0,0 +1,86 @@
+export namespace Filter {
+  export type Options = {
+    label: string;
+    input: {
+      placeholder: string;
+      maxlength?: number;
+      pattern?: string;
+    };
+    predicate: (data: string, input: string) => boolean;
+  };
+
+  const input = { placeholder: "Filter..." };
+  export const OPTIONS = {
+    equals: {
+      label: "Equals",
+      input,
+      predicate: (x, v) => x == v
+    } as Options,
+    notEqual: {
+      label: "Not equal",
+      input,
+      predicate: (x, v) => x != v
+    } as Options,
+    // STRING
+    contains: {
+      label: "Contains",
+      input,
+      predicate: (x, v) => x.includes(v)
+    } as Options,
+    notContains: {
+      label: "Not contains",
+      input,
+      predicate: (x, v) => !x.includes(v)
+    } as Options,
+    startsWith: {
+      label: "Starts with",
+      input,
+      predicate: (x, v) => x.startsWith(v)
+    } as Options,
+    endsWith: {
+      label: "Ends with",
+      input,
+      predicate: (x, v) => x.endsWith(v)
+    } as Options,
+
+    // NUMBER
+    lessThan: {
+      label: "Less than",
+      input,
+      predicate: (x, v) => x < v
+    } as Options,
+    lessThanOrEquals: {
+      label: "Less than or equals",
+      input,
+      predicate: (x, v) => x <= v
+    } as Options,
+    greaterThan: {
+      label: "Greater than",
+      input,
+      predicate: (x, v) => x > v
+    } as Options,
+    greaterThanOrEquals: {
+      label: "Greater than or equals",
+      input,
+      predicate: (x, v) => x >= v
+    } as Options
+  };
+
+  export const optionsString = [
+    OPTIONS.equals,
+    OPTIONS.notEqual,
+    OPTIONS.contains,
+    OPTIONS.notContains,
+    OPTIONS.startsWith,
+    OPTIONS.endsWith
+  ];
+
+  export const optionsNumber = [
+    OPTIONS.equals,
+    OPTIONS.notEqual,
+    OPTIONS.lessThan,
+    OPTIONS.lessThanOrEquals,
+    OPTIONS.greaterThan,
+    OPTIONS.greaterThanOrEquals
+  ];
+}