@heartlandone/vega-sandbox-pr-1502-f2b46cbb169f5aa182a703f2787b17ceb39ee111 2.28.0

package/dist/collection/constants/ui.js

@@ -0,0 +1,85 @@
+export const BreakpointKeys = ['default', 'S', 'M', 'L', 'XL'];
+export const DefaultModalSize = {
+  default: 200,
+  S: 'min(calc(100vw - 32px), 480px)',
+  M: 616,
+  L: 820,
+  XL: 1134,
+};
+// eslint-disable-next-line @typescript-eslint/typedef
+export const Placements = ['top', 'left', 'bottom', 'right'];
+// eslint-disable-next-line @typescript-eslint/typedef
+export const Alignments = ['start', 'center', 'end'];
+export const ItemToggleTransitionMillisecond = 1500;
+// eslint-disable-next-line @typescript-eslint/typedef
+export const FlexDirections = ['row', 'col', 'row-reverse', 'col-reverse'];
+// eslint-disable-next-line @typescript-eslint/typedef
+export const FlexAlignItem = ['start', 'center', 'end', 'baseline', 'stretch'];
+// eslint-disable-next-line @typescript-eslint/typedef
+export const FlexJustifyContent = [
+  'start',
+  'center',
+  'end',
+  'space-around',
+  'space-between',
+  'space-evenly',
+];
+// eslint-disable-next-line @typescript-eslint/typedef
+export const FlexWrap = ['nowrap', 'wrap', 'wrap-reverse'];
+// eslint-disable-next-line @typescript-eslint/typedef
+export const BoxDisplay = ['block', 'inline-block', 'none'];
+// eslint-disable-next-line @typescript-eslint/typedef
+export const BorderStyle = ['solid', 'dashed', 'dotted', 'double', 'none'];
+// eslint-disable-next-line @typescript-eslint/typedef
+export const TextAlign = ['start', 'end', 'left', 'right', 'center', 'justify'];
+// eslint-disable-next-line @typescript-eslint/typedef
+export const VegaNativeEventName = [
+  'change',
+  'click',
+  'focus',
+  'blur',
+  'close',
+  'modalOpen',
+  'validate',
+  'formSubmit',
+  'formReset',
+  'rowClick',
+  'rowExpand',
+  'selectChange',
+  'selectAllChange',
+  'pageSizeChange',
+  'dropdownClick',
+  'create',
+  'search',
+  'hide',
+  'show',
+  'popoverShow',
+  'popoverHide',
+  'cancel',
+  'remove',
+  'pageUpdate',
+  'currentStepUpdate',
+  'toggleStatus',
+  'stateUpdate',
+  'groupClick',
+  'menuClick',
+  'accordionExpand',
+  'dropdownShow',
+  'dropdownHide',
+  'dropdownSearch',
+  'actionClick',
+  'eventClick',
+  'dateDblClick',
+  'countryChange',
+  'actionButtonClick',
+  'moreActionClick',
+  'expand',
+  'rowSelect',
+  'rowSelectAll',
+  'retry',
+  'selectedFileChange',
+  'preview',
+  'labelButtonClick',
+];
+// eslint-disable-next-line @typescript-eslint/typedef
+export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/constants/validator.js

@@ -0,0 +1,7 @@
+/**
+ * This email regex from https://stackoverflow.com/a/201378
+ * Added valid complete email by this ticket https://gethired.atlassian.net/browse/VD-2616
+ */
+export const EMAIL_VALIDATION_REGEX = 
+// eslint-disable-next-line no-control-regex
+/^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)])$/;

package/dist/collection/decorators/method-decorators/component-load-required.js

@@ -0,0 +1,44 @@
+/**
+ * Wrap the method to make sure when the method is invoked, it will only be essentially running after the component is load
+ * For example in {@link VegaDatePicker},
+ * we want to make sure when {@code @Watch('value')} method is invoked, it should wait for the component is loaded before executing
+ *
+ * @returns {Function} The function decorated
+ */
+export function ComponentLoadRequired() {
+  return (componentClass, _decoratedMethodName, decoratedMethod) => {
+    const renderedInstanceSet = new Set();
+    const { componentDidLoad, disconnectedCallback, connectedCallback } = componentClass;
+    /* eslint-disable jsdoc/require-jsdoc */
+    componentClass.componentDidLoad = function () {
+      renderedInstanceSet.add(this);
+      return componentDidLoad && componentDidLoad.call(this);
+    };
+    componentClass.disconnectedCallback = function () {
+      renderedInstanceSet.delete(this);
+      this.componentDidLoadedFlag = true;
+      return disconnectedCallback && disconnectedCallback.call(this);
+    };
+    componentClass.connectedCallback = function () {
+      this.componentDidLoadedFlag && renderedInstanceSet.add(this);
+      return connectedCallback && connectedCallback.call(this);
+    };
+    const originalMethodBody = decoratedMethod.value;
+    /* eslint-disable jsdoc/require-jsdoc */
+    decoratedMethod.value = function (...args) {
+      if (renderedInstanceSet.has(this)) {
+        return originalMethodBody.apply(this, args);
+      }
+      return new Promise((resolve) => {
+        const waitForComponentReady = () => {
+          if (renderedInstanceSet.has(this)) {
+            return resolve(originalMethodBody.apply(this, args));
+          }
+          setTimeout(waitForComponentReady, 30);
+        };
+        waitForComponentReady();
+      });
+    };
+    return decoratedMethod;
+  };
+}

package/dist/collection/decorators/method-decorators/tests/component-load-required.test.js

@@ -0,0 +1,114 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { ComponentLoadRequired } from '../component-load-required';
+describe('@ComponentLoadRequired() decorator test suite', () => {
+  const mockedDecoratedMethod = jest.fn();
+  const mockedComponentDidLoadMethod = jest.fn();
+  const mockedComponentDisconnectedCallbackMethod = jest.fn();
+  const mockedComponentConnectedCallbackMethod = jest.fn();
+  class MockedComponent {
+    connectedCallback() {
+      mockedComponentConnectedCallbackMethod();
+    }
+    disconnectedCallback() {
+      mockedComponentDisconnectedCallbackMethod();
+    }
+    componentDidLoad() {
+      mockedComponentDidLoadMethod();
+    }
+    decoratedMethod() {
+      mockedDecoratedMethod();
+      return this;
+    }
+  }
+  __decorate([
+    ComponentLoadRequired()
+  ], MockedComponent.prototype, "decoratedMethod", null);
+  beforeEach(() => {
+    mockedDecoratedMethod.mockClear();
+    mockedComponentDidLoadMethod.mockClear();
+    mockedComponentDisconnectedCallbackMethod.mockClear();
+  });
+  test('ComponentLoadRequired() should return a function', () => {
+    expect(typeof ComponentLoadRequired()).toBe('function');
+  });
+  test('decorated method is invoked after component did load', () => {
+    jest.useFakeTimers();
+    const mockedComponent = new MockedComponent();
+    mockedComponent.decoratedMethod();
+    expect(mockedDecoratedMethod).not.toHaveBeenCalled();
+    mockedComponent.componentDidLoad();
+    expect(mockedComponentDidLoadMethod).toHaveBeenCalledTimes(1);
+    jest.runOnlyPendingTimers();
+    expect(mockedDecoratedMethod).toHaveBeenCalledTimes(1);
+    mockedComponent.decoratedMethod();
+    expect(mockedDecoratedMethod).toHaveBeenCalledTimes(2);
+  });
+  test('decorated method is never invoked if component never load', () => {
+    jest.useFakeTimers();
+    const mockedComponent = new MockedComponent();
+    mockedComponent.decoratedMethod();
+    expect(mockedDecoratedMethod).not.toHaveBeenCalled();
+    jest.runOnlyPendingTimers();
+    expect(mockedDecoratedMethod).not.toHaveBeenCalled();
+    mockedComponent.decoratedMethod();
+    expect(mockedDecoratedMethod).not.toHaveBeenCalled();
+  });
+  test("decorated method shouldn't be invoked if component is disconnected", () => {
+    jest.useFakeTimers();
+    const mockedComponent = new MockedComponent();
+    mockedComponent.decoratedMethod();
+    expect(mockedDecoratedMethod).not.toHaveBeenCalled();
+    mockedComponent.componentDidLoad();
+    expect(mockedComponentDidLoadMethod).toHaveBeenCalledTimes(1);
+    jest.runOnlyPendingTimers();
+    expect(mockedDecoratedMethod).toHaveBeenCalledTimes(1);
+    mockedComponent.disconnectedCallback();
+    mockedComponent.decoratedMethod();
+    expect(mockedDecoratedMethod).toHaveBeenCalledTimes(1);
+  });
+  test('decorated method should be invoked if component is connected again', () => {
+    jest.useFakeTimers();
+    const mockedComponent = new MockedComponent();
+    mockedComponent.componentDidLoad();
+    mockedComponent.disconnectedCallback();
+    mockedComponent.decoratedMethod();
+    jest.runOnlyPendingTimers();
+    expect(mockedDecoratedMethod).toHaveBeenCalledTimes(0);
+    mockedComponent.connectedCallback();
+    jest.runOnlyPendingTimers();
+    expect(mockedDecoratedMethod).toHaveBeenCalledTimes(1);
+  });
+  test("decorated method shouldn't be invoked if component is connected at first time", () => {
+    jest.useFakeTimers();
+    const mockedComponent = new MockedComponent();
+    mockedComponent.decoratedMethod();
+    mockedComponent.connectedCallback();
+    jest.runOnlyPendingTimers();
+    expect(mockedDecoratedMethod).toHaveBeenCalledTimes(0);
+    mockedComponent.componentDidLoad();
+    jest.runOnlyPendingTimers();
+    expect(mockedDecoratedMethod).toHaveBeenCalledTimes(1);
+  });
+  test('decorated method should only be invoked for the instance that is actually interacted', async () => {
+    jest.useFakeTimers();
+    const mockedComponentA = new MockedComponent();
+    const mockedComponentB = new MockedComponent();
+    expect(mockedDecoratedMethod).not.toHaveBeenCalled();
+    mockedComponentA.componentDidLoad();
+    mockedComponentB.componentDidLoad();
+    expect(mockedComponentDidLoadMethod).toHaveBeenCalledTimes(2);
+    jest.runOnlyPendingTimers();
+    expect(mockedDecoratedMethod).not.toHaveBeenCalled();
+    const thisInstanceFromA = await mockedComponentA.decoratedMethod();
+    expect(mockedDecoratedMethod).toHaveBeenCalledTimes(1);
+    const thisInstanceFromB = await mockedComponentB.decoratedMethod();
+    expect(mockedDecoratedMethod).toHaveBeenCalledTimes(2);
+    expect(thisInstanceFromA).toBe(mockedComponentA);
+    expect(thisInstanceFromB).toBe(mockedComponentB);
+  });
+});

package/dist/collection/decorators/property-decorators/inject-element-appender.js

@@ -0,0 +1,203 @@
+import { ElementAppender } from '../../helpers/ui/element-appender';
+import { findParent, isParent } from '../../utils/ui';
+/**
+ * It creates a proxy for the `ElementAppender` class and attaches it to the component class as a
+ * property
+ *
+ * @param {ShowConfigFactoryType} showConfigFactory - A function that returns a ShowConfig object.
+ * @param {GetTriggerType} [getTrigger] - The name of the property that will trigger the dropdown to
+ * show/hide.
+ * @param {string} [isDropdownShowName] - The name of the property that will be used to determine if
+ * the dropdown is shown or not.
+ * @returns {void} A function that takes a component class and a string.
+ */
+export function InjectElementAppender(showConfigFactory, getTrigger, isDropdownShowName) {
+  return (componentClass, elementAppenderName) => {
+    const { componentDidLoad, disconnectedCallback, connectedCallback } = componentClass;
+    /* eslint-disable jsdoc/require-jsdoc */
+    const setElementAppender = (host) => {
+      const elementAppender = new ElementAppender(showConfigFactory, host);
+      host[elementAppenderName] = new Proxy(elementAppender, {
+        get(target, prop) {
+          const value = target[prop];
+          if (value instanceof Function) {
+            return function (...args) {
+              const result = value.apply(target, args);
+              if (prop === 'show') {
+                host[isDropdownShowName] = true;
+              }
+              else if (prop === 'hide') {
+                host[isDropdownShowName] = false;
+              }
+              else if (prop === 'destroy') {
+                host[elementAppenderName] = null;
+                host[isDropdownShowName] = false;
+              }
+              return result;
+            };
+          }
+          return value;
+        },
+      });
+    };
+    const registerElementAppenderListener = (host) => {
+      host.elementAppenderListener = new ElementAppenderListener(host, elementAppenderName, getTrigger, isDropdownShowName, showConfigFactory(host));
+      host.elementAppenderListener.register();
+    };
+    const unRegisterElementAppenderListener = (host) => {
+      host.elementAppenderListener.unRegister();
+    };
+    componentClass.componentDidLoad = function () {
+      setElementAppender(this);
+      registerElementAppenderListener(this);
+      return componentDidLoad === null || componentDidLoad === void 0 ? void 0 : componentDidLoad.call(this);
+    };
+    componentClass.connectedCallback = function () {
+      if (this[elementAppenderName] === null) {
+        setElementAppender(this);
+        registerElementAppenderListener(this);
+      }
+      return connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
+    };
+    componentClass.disconnectedCallback = function () {
+      unRegisterElementAppenderListener(this);
+      this.elementAppenderListener = null;
+      this[elementAppenderName].destroy();
+      this[elementAppenderName] = null;
+      return disconnectedCallback === null || disconnectedCallback === void 0 ? void 0 : disconnectedCallback.call(this);
+    };
+  };
+}
+/* It listens to events on the target and the appendable
+element, and then it shows or hides the dropdown based on the trigger property */
+class ElementAppenderListener {
+  /**
+   * It creates a new instance of the `ElementAppender` class, and then returns it
+   *
+   * @param {ComponentInterface} component - ComponentInterface - the component that will be used to
+   * append the element
+   * @param {string} elementAppenderName - The name of the property that will be used to access the
+   * ElementAppender instance.
+   * @param {GetTriggerType} getTrigger - The name of the property that will trigger the dropdown to
+   * show.
+   * @param {string} isDropdownShowName - The name of the property that will be used to determine if the
+   * dropdown is shown or not.
+   * @param {ElementAppenderShowConfig} showConfigFactory - ElementAppenderShowConfig - this is the
+   * factory that creates the show config.
+   */
+  constructor(component, elementAppenderName, getTrigger, isDropdownShowName, showConfigFactory) {
+    /* It's a function that listens to the click event on the dropdown. It checks if the trigger
+    property is equal to 'click'. If it is, then it toggles the dropdown. */
+    this.targetClickHandler = () => {
+      if (this.shouldListenerWork('click')) {
+        this.component[this.isDropdownShowName]
+          ? this.component[this.elementAppenderName].hide()
+          : this.component[this.elementAppenderName].show();
+      }
+    };
+    /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it clears the timer. */
+    this.targetMouseEnterHandler = () => {
+      if (this.shouldListenerWork('hover')) {
+        this.component[this.isDropdownShowName] === false &&
+          this.component[this.elementAppenderName].show();
+        this.clearDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
+    certain amount of time. */
+    this.targetMouseLeaveHandler = () => {
+      if (this.shouldListenerWork('hover')) {
+        this.createDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the mouseenter event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it clears the timer. */
+    this.elementMouseEnterHandler = () => {
+      if (this.shouldListenerWork('hover')) {
+        this.clearDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the mouseleave event on the dropdown. It checks if the trigger
+    property is equal to 'hover'. If it is, then it creates a timer that will hide the dropdown after a
+    certain amount of time. */
+    this.elementMouseLeaveHandler = () => {
+      if (this.shouldListenerWork('hover')) {
+        this.createDelayHideTimer();
+      }
+    };
+    /* It's a function that listens to the global mousedown event. It checks if the dropdown is showing,
+    and if the target of the event is not a child of the dropdown or the trigger. If it is, then it
+    hides the dropdown. */
+    this.globalMouseDownHandler = (e) => {
+      const currentTarget = e.composedPath()[0];
+      if (this.shouldListenerWork('custom') &&
+        this.component[this.isDropdownShowName] &&
+        !isParent(currentTarget, this.appendableElement) &&
+        !isParent(currentTarget, this.target) &&
+        findParent(currentTarget, 'vega-modal') === findParent(this.target, 'vega-modal')) {
+        this.component[this.elementAppenderName].hide();
+      }
+    };
+    /* A timer that will hide the dropdown after a certain amount of time. */
+    this.createDelayHideTimer = () => {
+      this.delayHideTimer = setTimeout(() => {
+        if (this.component[this.elementAppenderName]) {
+          this.component[this.elementAppenderName].hide();
+        }
+        clearTimeout(this.delayHideTimer);
+      }, ElementAppenderListener.DELAY_HIDE_TIME);
+    };
+    /* A function that clears the timer. */
+    this.clearDelayHideTimer = () => {
+      this.delayHideTimer && clearTimeout(this.delayHideTimer);
+    };
+    /* It's a function that checks if the listener should work or not. */
+    this.shouldListenerWork = (trigger) => {
+      const currentTrigger = this.getTrigger(this.component);
+      switch (trigger) {
+        case 'custom':
+          return currentTrigger !== 'none';
+        case 'click':
+          return currentTrigger === 'click';
+        case 'hover':
+          return currentTrigger === 'hover';
+      }
+    };
+    this.component = component;
+    this.target = showConfigFactory.target;
+    this.appendableElement = showConfigFactory.appendableElement;
+    this.getTrigger = getTrigger;
+    this.isDropdownShowName = isDropdownShowName;
+    this.elementAppenderName = elementAppenderName;
+  }
+  /**
+   * It adds event listeners to the target and the appendable element
+   */
+  register() {
+    var _a, _b, _c, _d, _e, _f;
+    this.unRegister();
+    (_a = this.target) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.targetClickHandler);
+    (_b = this.target) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseenter', this.targetMouseEnterHandler);
+    (_c = this.target) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', this.targetMouseLeaveHandler);
+    (_d = this.target) === null || _d === void 0 ? void 0 : _d.addEventListener('focusout', this.targetMouseLeaveHandler);
+    (_e = this.appendableElement) === null || _e === void 0 ? void 0 : _e.addEventListener('mouseenter', this.elementMouseEnterHandler);
+    (_f = this.appendableElement) === null || _f === void 0 ? void 0 : _f.addEventListener('mouseleave', this.elementMouseLeaveHandler);
+    window.addEventListener('mousedown', this.globalMouseDownHandler);
+  }
+  /**
+   * It removes all event listeners that were added in the `register()` function
+   */
+  unRegister() {
+    var _a, _b, _c, _d, _e, _f;
+    (_a = this.target) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.targetClickHandler);
+    (_b = this.target) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseenter', this.targetMouseEnterHandler);
+    (_c = this.target) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', this.targetMouseLeaveHandler);
+    (_d = this.target) === null || _d === void 0 ? void 0 : _d.removeEventListener('focusout', this.targetMouseLeaveHandler);
+    (_e = this.appendableElement) === null || _e === void 0 ? void 0 : _e.removeEventListener('mouseenter', this.elementMouseEnterHandler);
+    (_f = this.appendableElement) === null || _f === void 0 ? void 0 : _f.removeEventListener('mouseleave', this.elementMouseLeaveHandler);
+    window.removeEventListener('mousedown', this.globalMouseDownHandler);
+  }
+}
+ElementAppenderListener.DELAY_HIDE_TIME = 100;

package/dist/collection/decorators/property-decorators/inject-keyboard-manager.js

@@ -0,0 +1,32 @@
+import KeyboardManager from '../../helpers/keyboard/keyboard-manager';
+/**
+ * It takes a function that returns an array of keyboard event listeners, and returns a decorator
+ * function that takes a component class and a property name, and registers the listeners returned by
+ * the function with the keyboard manager when the component is loaded, and remove registers them when the
+ * component is disconnected
+ *
+ * @param {(instance: ComponentInterface) => KeyboardEventListener[]} listenersRetriever - (instance: ComponentInterface) => KeyboardEventListener[]
+ * @returns {void} A decorator function that takes a component class and a property name.
+ */
+export function InjectKeyboardManager(listenersRetriever) {
+  /* A decorator function that takes a component class and a property name. */
+  return (componentClass) => {
+    const { connectedCallback, componentDidLoad, disconnectedCallback } = componentClass;
+    /* eslint-disable jsdoc/require-jsdoc */
+    componentClass.connectedCallback = function () {
+      const { keyboardEventListeners = [] } = this;
+      KeyboardManager.register(keyboardEventListeners);
+      return connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
+    };
+    componentClass.componentDidLoad = function () {
+      this.keyboardEventListeners = listenersRetriever(this);
+      KeyboardManager.register(this.keyboardEventListeners);
+      return componentDidLoad === null || componentDidLoad === void 0 ? void 0 : componentDidLoad.call(this);
+    };
+    componentClass.disconnectedCallback = function () {
+      const { keyboardEventListeners = [] } = this;
+      KeyboardManager.deregister(keyboardEventListeners);
+      return disconnectedCallback === null || disconnectedCallback === void 0 ? void 0 : disconnectedCallback.call(this);
+    };
+  };
+}