@momentum-ui/web-components 2.14.13 → 2.14.14

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

@@ -1,27 +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 "@/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

@@ -1,16 +0,0 @@
-$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

@@ -1,399 +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.
- *
-*/
-
-: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

@@ -1,150 +0,0 @@
-// 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

@@ -1,86 +0,0 @@
-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
-  ];
-}