@globalpayments/vega 2.42.0 → 2.43.0

package/dist/collection/components/vega-input-credit-card/vega-input-credit-card.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { Component, Host, h, Element, Prop, Event, Watch } from '@stencil/core';
+import { Component, Element, Event, h, Host, Prop, Watch } from '@stencil/core';
 import { CARDS_INFO } from '../../constants/card-config';
 import { RequiredFieldRule } from '../../helpers/validator/rules/required-field-rule';
 import { ValidCreditCardNumberRule } from '../../helpers/validator/rules/valid-credit-card-number-rule';
@@ -16,12 +16,13 @@ import ChangeManager from '../../helpers/change-manager/change-manager';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimmers/child-nodes-event-prevent-slimmer';
 import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaChange, VegaFocus, VegaBlur } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaBlur, VegaChange, VegaFocus } from '../../helpers/event-manager/event-id/vega-event-id';
 import { Icons } from './assets/icons';
 import { VegaInternalIconManager } from '../../helpers/icon/internal-icon-manager';
 import { FeatureFlag } from '../../helpers/feature-control/feature-flag-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaInputCreditCardRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-input-credit-card/runtime-metrics-payload-definition';
+import { VegaInternalPasteEvent } from '../../helpers/event-manager/event-id/vega-internal-event-id';
 /**
  * @vegaVersion 1.26.0
  */
@@ -148,17 +149,21 @@ export class VegaInputCreditCard {
     this.renderInputContainer = () => {
       var _a;
       const iconName = ((_a = this.getCreditCardType(this.value)) === null || _a === void 0 ? void 0 : _a.iconName) || 'regular-credit-card';
-      return (h("vega-input", { label: this.label, type: "number", prefixIcon: VegaInternalIconManager.getIconKey(iconName), maskConfig: this.getMaskConfig(), placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, showClearIcon: false, ref: (e) => {
-          this.inputRef = e;
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaChange, (input) => {
+      return (h("vega-input", { label: this.label, type: "number", prefixIcon: VegaInternalIconManager.getIconKey(iconName), maskConfig: this.getMaskConfig(this.value), placeholder: this.placeholder, disabled: this.disabled, size: this.size, value: this.value, hint: this.hint, required: this.required, showClearIcon: false, ref: (ref) => {
+          this.inputRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (input) => {
             this.handleVegaChange(input);
           });
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaBlur, () => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, () => {
             this.handleVegaBlur();
           });
-          DomNodeSubjectObserverFactory.addUniqueObserverToNode(e, VegaFocus, () => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaFocus, () => {
             this.handleVegaFocus();
           });
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalPasteEvent, (event) => {
+            const pastedValue = event.clipboardData.getData('text');
+            this.inputRef.maskConfig = this.getMaskConfig(pastedValue); // The mask should be updated before the value changed.
+          });
         } }));
     };
     this.handleVegaChange = (e) => {
@@ -202,12 +207,12 @@ export class VegaInputCreditCard {
   getCreditCardType(value) {
     return CARDS_INFO.filter((card) => card.pattern.test(value))[0];
   }
-  getMaskConfig() {
+  getMaskConfig(value) {
     const maskConfig = [];
-    const creditCardType = this.getCreditCardType(this.value);
+    const creditCardType = this.getCreditCardType(value);
     if (creditCardType) {
       maskConfig.push(creditCardType.maskConfig);
-      if (this.hideCardNumberOnBlur && this.value.trim().includes(' ')) {
+      if (this.hideCardNumberOnBlur && value.trim().includes(' ')) {
         this.maskConfig.options.mask = this.generateDynamicMask();
         maskConfig.push(this.maskConfig);
       }

package/dist/collection/components/vega-rich-text-editor/test/e2e-utils.js

@@ -0,0 +1,177 @@
+/* This file is the e2e test method of RTE*/
+import { find } from '../../../utils/e2e-utils';
+import { toolbarItems } from './fixture';
+/**
+ * set RTE toolbarItem
+ *
+ *@param {E2EPage} page - E2EPage
+ */
+export const setToolbarItems = async (page) => {
+  const vegaRichTextEditor = await page.find('vega-rich-text-editor');
+  vegaRichTextEditor.setProperty('toolbarItems', toolbarItems);
+  await page.waitForChanges();
+};
+/**
+ * focus On RTE Content
+ *
+ * @param {E2EPage} page - E2EPage
+ */
+export const focusOnContent = async (page) => {
+  const content = await page.find('vega-rich-text-editor >>> vega-rich-text-content');
+  await content.click();
+};
+/**
+ * click RTE Bold Button
+ *
+ * @param {E2EPage} page - E2EPage
+ */
+export const clickBoldButton = async (page) => {
+  const boldButton = await find(page, 'vega-rich-text-editor >>> .toolbar-btn-group:nth-of-type(3) vega-rich-text-editor-toolbar-button >>> button');
+  await boldButton.click();
+  await page.waitForChanges();
+};
+/**
+ * change RTE list style
+ *
+ * @param {E2EPage} page - E2EPage
+ * @param {string} style - the list style
+ */
+export const changeListStyle = async (page, style = 'number') => {
+  const listBtn = await find(page, 'vega-rich-text-editor >>> .toolbar-btn-group:nth-of-type(5) > vega-popover:nth-of-type(2) vega-rich-text-editor-toolbar-button >>> button');
+  await listBtn.click();
+  await page.waitForChanges();
+  if (style != 'number') {
+    const bulletsBtn = await find(page, 'vega-popover-content-box div:nth-of-type(1) vega-rich-text-editor-toolbar-button >>> button');
+    await bulletsBtn.click();
+  }
+  else {
+    const numberBtn = await find(page, 'vega-popover-content-box div:nth-of-type(2) vega-rich-text-editor-toolbar-button >>> button');
+    await numberBtn.click();
+  }
+};
+/**
+ * change RTE align style
+ *
+ * @param {E2EPage} page - E2EPage
+ * @param {string} style - the align style
+ */
+export const changeAlignStyle = async (page, style) => {
+  const alignBtn = await find(page, 'vega-rich-text-editor >>> .toolbar-btn-group:nth-of-type(5) > vega-popover:nth-of-type(1) vega-rich-text-editor-toolbar-button >>> button');
+  await alignBtn.click();
+  await page.waitForChanges();
+  switch (style) {
+    case 'left':
+      await (await find(page, 'vega-popover-content-box div:nth-of-type(1) vega-rich-text-editor-toolbar-button >>> button')).click();
+      break;
+    case 'center': {
+      const centerAlignBtn = await find(page, 'vega-popover-content-box div:nth-of-type(2) vega-rich-text-editor-toolbar-button >>> button');
+      await centerAlignBtn.click();
+      break;
+    }
+    case 'right': {
+      const rightAlignBtn = await page.find('vega-popover-content-box div:nth-of-type(3) vega-rich-text-editor-toolbar-button >>> button');
+      await rightAlignBtn.click();
+      break;
+    }
+    case 'justified':
+      await (await find(page, 'vega-popover-content-box div:nth-of-type(4) vega-rich-text-editor-toolbar-button >>> button')).click();
+      break;
+  }
+};
+/**
+ * change RTE Indent style
+ *
+ * @param {E2EPage} page - E2EPage
+ * @param {string} style - the align type
+ */
+export const changeIndent = async (page, style) => {
+  switch (style) {
+    case 'more': {
+      const moreButton = await find(page, 'vega-rich-text-editor >>> .toolbar-btn-group:nth-of-type(6) vega-tooltip:nth-of-type(1) vega-rich-text-editor-toolbar-button >>> button');
+      await moreButton.click();
+      break;
+    }
+    case 'less': {
+      const lessButton = await find(page, 'vega-rich-text-editor >>> .toolbar-btn-group:nth-of-type(6) vega-tooltip:nth-of-type(2) vega-rich-text-editor-toolbar-button >>> button');
+      await lessButton.click();
+      break;
+    }
+  }
+};
+/**
+ * click RTE clear style
+ *
+ * @param {E2EPage} page - E2EPage
+ */
+export const clickClearBtn = async (page) => {
+  const clearStyleButton = await find(page, 'vega-rich-text-editor >>> vega-rich-text-editor-toolbar-button >>> button');
+  await clearStyleButton.click();
+};
+/**
+ * set RTE link
+ *
+ * @param {E2EPage} page - E2EPage
+ * @param {string} url - the link url
+ * @param {string} text - the link text
+ */
+export const setLink = async (page, url = 'https://www.test.com', text = 'test') => {
+  const linkBtn = await find(page, 'vega-rich-text-editor >>> vega-rich-text-editor-toolbar-button >>> button');
+  await linkBtn.click();
+  await page.waitForChanges();
+  const urlContainer = await page.find('vega-popover-content-box  vega-input:nth-of-type(1)');
+  const urlInputContainer = await page.find('vega-popover-content-box  vega-input:nth-of-type(2) >>> input');
+  urlContainer.setProperty('value', url);
+  await page.waitForChanges();
+  await urlInputContainer.click();
+  await page.waitForChanges();
+  await page.keyboard.type(text);
+  await page.waitForChanges();
+  await page.keyboard.press('Enter');
+  await page.waitForChanges();
+};
+/**
+ * change RTE Indent style
+ *
+ * @param {E2EPage} page - E2EPage
+ * @param {string} behavior - the image behavior
+ * @param {object} config - the image parameters
+ * @param {string} config.size - the image size
+ * @param {string} config.text - the image text
+ */
+export const controlImage = async (page, behavior, config) => {
+  const imageElement = await find(page, 'vega-rich-text-editor >>> vega-rich-text-content >>>  vega-rich-text-image-editor img');
+  await page.waitForChanges();
+  await imageElement.click();
+  switch (behavior) {
+    case 'size':
+      if (config.size == 'large') {
+        const largeButton = await find(page, 'vega-popover-content-box vega-segment-control >>> button:nth-of-type(3)');
+        await largeButton.click();
+      }
+      else if (config.size == 'small') {
+        const smallerButton = await find(page, 'vega-popover-content-box vega-segment-control >>> button');
+        await smallerButton.click();
+      }
+      else {
+        const mediumButton = await find(page, 'vega-popover-content-box vega-segment-control >>> button:nth-of-type(2)');
+        await mediumButton.click();
+      }
+      break;
+    case 'text':
+      if (config.text) {
+        const alterButton = await find(page, 'vega-popover-content-box vega-button-group-item:nth-of-type(1) >>> vega-button-link >>> a');
+        await alterButton.click();
+        await page.waitForChanges();
+        await page.keyboard.type(config.text);
+        await page.waitForChanges();
+        await page.keyboard.press('Enter');
+        await page.waitForChanges();
+      }
+      break;
+    case 'delete': {
+      const deleteButton = await find(page, 'vega-popover-content-box vega-button-group-item:nth-of-type(2) >>> vega-button-link >>> a');
+      await deleteButton.click();
+      break;
+    }
+  }
+};

package/dist/collection/components/vega-rich-text-editor/test/fixture.js

@@ -0,0 +1,257 @@
+/* This file is the constant values of RTE test data */
+export const titleBlock = {
+  id: '11',
+  type: 'title',
+  nodes: [
+    {
+      id: '111',
+      type: 'text',
+      text: 'This is a title1.',
+      annotations: {
+        link: {
+          href: 'https://heartland.us',
+          groupKey: 'test1',
+        },
+      },
+    },
+    {
+      id: '111-1',
+      type: 'text',
+      text: 'This is a title2.This is a title3.',
+    },
+  ],
+  annotations: {
+    indent: 0,
+    textAlign: 'left',
+  },
+};
+export const SubtitleBlock = {
+  id: '12',
+  type: 'subtitle',
+  nodes: [
+    {
+      id: '112',
+      type: 'text',
+      text: 'This is a subtitle.',
+    },
+  ],
+  annotations: {
+    indent: 0,
+    textAlign: 'right',
+  },
+};
+export const SubtitleBlock1 = {
+  id: '12-1',
+  type: 'subtitle',
+  nodes: [
+    {
+      id: '112-1',
+      type: 'text',
+      text: 'This is a subtitle.',
+      annotations: {
+        link: {
+          href: 'https://gethired.atlassian.net/browse/VD-4819',
+          groupKey: 'test11',
+        },
+      },
+    },
+  ],
+  annotations: {
+    indent: 0,
+    textAlign: 'right',
+  },
+};
+export const ParagraphBlock = {
+  id: '13',
+  type: 'paragraph',
+  nodes: [
+    {
+      id: '113',
+      type: 'text',
+      text: 'This is a ParagraphBlock.',
+      annotations: {
+        textColor: 'green',
+        link: {
+          href: 'https://gethired.atlassian.net/browse/VD-4819',
+          groupKey: 'test11',
+        },
+      },
+    },
+    {
+      id: '113-1',
+      type: 'text',
+      text: 'This is a ParagraphBlock.',
+      annotations: { bold: true, italic: true, underline: true, strikethrough: true },
+    },
+  ],
+  annotations: {
+    indent: 0,
+    textAlign: 'center',
+  },
+};
+export const shortBlock = {
+  id: '13',
+  type: 'paragraph',
+  nodes: [
+    {
+      id: '113',
+      type: 'text',
+      text: 'paragraph',
+    },
+  ],
+  annotations: {
+    indent: 0,
+    textAlign: 'right',
+  },
+};
+export const HeadingBlock = {
+  id: '14',
+  type: 'heading-1',
+  nodes: [
+    {
+      id: '114',
+      type: 'text',
+      text: 'This is a HeadingBlock-1.',
+      annotations: {
+        link: {
+          href: 'https://gethired.atlassian.net/browse/VD-4819',
+          groupKey: 'test11',
+        },
+      },
+    },
+  ],
+  annotations: {
+    indent: 0,
+    textAlign: 'justify',
+  },
+};
+export const HeadingBlock2 = {
+  id: '14-2',
+  type: 'heading-2',
+  nodes: [
+    {
+      id: '114-3',
+      type: 'text',
+      text: 'This is a HeadingBlock-2.',
+      annotations: {
+        textColor: 'teal',
+      },
+    },
+  ],
+  annotations: {
+    indent: 0,
+    textAlign: 'justify',
+  },
+};
+export const HeadingBlock3 = {
+  id: '14-3',
+  type: 'heading-3',
+  nodes: [
+    {
+      id: '114-3',
+      type: 'text',
+      text: 'This is a HeadingBlock-3.',
+      annotations: {
+        textColor: 'purple',
+      },
+    },
+  ],
+  annotations: {
+    indent: 0,
+    textAlign: 'justify',
+  },
+};
+export const listItem1 = {
+  id: '14',
+  type: 'list-item',
+  nodes: [
+    {
+      id: '111',
+      type: 'text',
+      text: 'This is a list 1.',
+      annotations: {
+        link: {
+          href: 'https://heartland.us',
+          groupKey: 'test1',
+        },
+      },
+    },
+    {
+      id: '111',
+      type: 'text',
+      text: 'This is a list 2.',
+    },
+  ],
+};
+export const listItem2 = {
+  id: '14',
+  type: 'list-item',
+  nodes: [
+    {
+      id: '111',
+      type: 'text',
+      text: 'This is a list 2.',
+      annotations: {
+        textColor: 'green',
+      },
+    },
+  ],
+};
+export const listItem3 = {
+  id: '14',
+  type: 'list-item',
+  nodes: [
+    {
+      id: '111',
+      type: 'text',
+      text: 'This is a list 3.',
+    },
+  ],
+};
+export const numberList = {
+  id: '14',
+  type: 'number-list',
+  blocks: [listItem1, listItem2, listItem3],
+  annotations: {
+    indent: 1,
+  },
+};
+export const bulletList = {
+  id: '14',
+  type: 'bullet-list',
+  blocks: [listItem1, listItem2, listItem3],
+};
+export const listBlock = [bulletList, numberList];
+export const simpleBlock = [titleBlock, SubtitleBlock, shortBlock, HeadingBlock];
+export const ImageBlock = {
+  id: '14',
+  type: 'image',
+  nodes: [
+    {
+      id: '14',
+      type: 'image',
+      // eslint-disable-next-line spellcheck/spell-checker
+      url: 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDQ4IDQ4IiBmaWxsPSJub25lIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTQ4IDI0QzQ4IDM3LjI1NDggMzcuMjU0OCA0OCAyNCA0OEMxMC43NDUyIDQ4IDAgMzcuMjU0OCAwIDI0QzAgMTAuNzQ1MiAxMC43NDUyIDAgMjQgMEMzNy4yNTQ4IDAgNDggMTAuNzQ1MiA0OCAyNFpNMTYuMDAxIDEzLjkxMjVWMzQuNzgyMkgxOS44OTY2VjI1LjY2OUgyNy42ODhWMzQuNzgyMkgzMS41ODM2VjEzLjkxMjVIMjcuNjg4VjIxLjcwMzhIMTkuODk2NlYxMy45MTI1SDE2LjAwMVoiIGZpbGw9IiM1OTYwNjMiLz48L3N2Zz4=',
+    },
+  ],
+};
+export const wholeBlock = [
+  titleBlock,
+  SubtitleBlock,
+  SubtitleBlock1,
+  ParagraphBlock,
+  HeadingBlock,
+  HeadingBlock2,
+  HeadingBlock3,
+  ImageBlock,
+];
+export const toolbarItems = [
+  ['clearStyle'],
+  ['textStyles'],
+  ['bold', 'italic', 'underline', 'strikethrough', 'code'],
+  ['textColor'],
+  ['horizontalAlignment', 'bulletsNumbers'],
+  ['moreIndent', 'lessIndent'],
+  ['link'],
+  ['image'],
+];

package/dist/collection/helpers/event-manager/event-id/vega-internal-event-id.js

@@ -43,3 +43,5 @@ export const VegaInternalPopoverUpdateTarget = new VegaInternalEventID('popoverU
 export const VegaInternalRichTextEditDeleteSelectedNodes = new VegaInternalEventID('richTextEditDeleteSelectedNodes');
 export const VegaInternalPaginationPageSizeChange = new VegaInternalEventID('paginationPageSizeChange');
 export const VegaInternalPaginationCurrentChange = new VegaInternalEventID('paginationCurrentChange');
+export const VegaInternalPasteEvent = new VegaInternalEventID('pasteEvent');
+export const VegaInternalNestEAHierarchyTreeChange = new VegaInternalEventID('nestEAHierarchyTreeChange');

package/dist/collection/helpers/slimmers/element-appender/element-appender-hierarchy-tree-manager.js

@@ -0,0 +1,108 @@
+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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import ChangeManager from '../../change-manager/change-manager';
+import domNodeSubjectFactory from '../../change-manager/subject/dom-node-subject/dom-node-subject-factory';
+import { findParent } from '../../../utils/ui';
+import { VegaInternalNestEAHierarchyTreeChange } from '../../event-manager/event-id/vega-internal-event-id';
+import { DomNodeSubjectObserverFactory } from '../../change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
+var NestEANotifyType;
+(function (NestEANotifyType) {
+  NestEANotifyType["SHOW"] = "show";
+  NestEANotifyType["HIDE"] = "hide";
+})(NestEANotifyType || (NestEANotifyType = {}));
+/**
+ * Dynamically add parents and children of nest element appender while it show or hide.
+ */
+export class ElementAppenderHierarchyTreeManager extends VegaSlimmer {
+  constructor(currentEA) {
+    super();
+    this.childrenEA = [];
+    this.currentEA = currentEA;
+  }
+  /**
+   * Listen current element appender did load.
+   */
+  componentDidLoad() {
+    this.register();
+  }
+  /**
+   * Listen current element appender show.
+   */
+  onShow() {
+    this.notify(NestEANotifyType.SHOW);
+  }
+  /**
+   * Listen current element appender hide.
+   */
+  onHide() {
+    this.notify(NestEANotifyType.HIDE);
+  }
+  /**
+   * Get current parent of element appender.
+   *
+   * @returns {Nullable<ElementAppenderSlimmer>} - parent.
+   */
+  getParent() {
+    return this.parentEA;
+  }
+  /**
+   * Get current children of element appender.
+   *
+   * @returns {ElementAppenderSlimmer[]} - children.
+   */
+  getChildren() {
+    return this.childrenEA;
+  }
+  /**
+   * While current element appender show or hide we should notify nest element appender to add or remove chain.
+   *
+   * @param {NestEANotifyType} type - Notify type.
+   */
+  notify(type) {
+    const parent = findParent(this.showConfig.target, '.vega-element-appender-appendable');
+    if (parent) {
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(parent, VegaInternalNestEAHierarchyTreeChange), {
+        type: type,
+        child: this.currentEA,
+        callback: 
+        /* eslint-disable jsdoc/require-jsdoc */
+        (parentEASlimmer) => {
+          this.parentEA = parentEASlimmer;
+        },
+      });
+    }
+  }
+  /**
+   * Add a change manager to observer the nest element appender show or hide.
+   */
+  register() {
+    if (this.showConfig) {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.showConfig.appendableElement, VegaInternalNestEAHierarchyTreeChange, (payload) => {
+        if (payload.type === NestEANotifyType.SHOW) {
+          this.childrenEA.push(payload.child);
+        }
+        else if (payload.type === NestEANotifyType.HIDE) {
+          this.childrenEA = this.childrenEA.filter((child) => child !== payload.child);
+        }
+        payload.callback(this.currentEA);
+      });
+    }
+  }
+}
+__decorate([
+  MapToComponentField()
+], ElementAppenderHierarchyTreeManager.prototype, "showConfig", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], ElementAppenderHierarchyTreeManager.prototype, "componentDidLoad", null);
+__decorate([
+  MapToComponentMethod('show')
+], ElementAppenderHierarchyTreeManager.prototype, "onShow", null);
+__decorate([
+  MapToComponentMethod('hide')
+], ElementAppenderHierarchyTreeManager.prototype, "onHide", null);

package/dist/collection/helpers/slimmers/element-appender/element-appender-slimmer.js

@@ -4,15 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   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 { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { InjectVegaSlimmer, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { ElementAppender } from '../../ui/element-appender';
 import { findParent, isParent } from '../../../utils/ui';
 import ChangeManager from '../../change-manager/change-manager';
 import { SHADOW_ROOT_ELEMENT_SCROLLING } from '../../change-manager/subject/static-subject/static-subject-title';
 import { Observer } from '../../change-manager/observer/observer';
+import { ElementAppenderHierarchyTreeManager } from './element-appender-hierarchy-tree-manager';
 export class ElementAppenderSlimmer extends VegaSlimmer {
   constructor(showConfigFactory, getTrigger, isDropdownShowName = 'isDropdownShow', disableInteractiveGetter = () => false) {
     super();
+    this.hierarchyTreeManager = new ElementAppenderHierarchyTreeManager(this);
     /**
      * It adds event listeners to the target and the appendable element
      */
@@ -65,6 +67,8 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     /* 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 = () => {
+      var _a;
+      (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.elementMouseEnterHandler();
       if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
         this.clearDelayHideTimer();
       }
@@ -73,6 +77,8 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     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 = () => {
+      var _a;
+      (_a = this.hierarchyTreeManager.getParent()) === null || _a === void 0 ? void 0 : _a.elementMouseLeaveHandler();
       if (this.shouldListenerWork('hover') && !this.disableInteractiveGetter()) {
         this.createDelayHideTimer();
       }
@@ -82,10 +88,14 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
     hides the dropdown. */
     this.globalMouseDownHandler = (e) => {
       const currentTarget = e.composedPath()[0];
-      if (this.shouldListenerWork('custom') &&
+      const hasChildShowing = this.hierarchyTreeManager
+        .getChildren()
+        .some((child) => child.isShowing());
+      if (!hasChildShowing &&
+        this.shouldListenerWork('custom') &&
         this.isShowing() &&
         this.showConfig &&
-        !findParent(currentTarget, '.vega-element-appender-appendable') &&
+        !isParent(currentTarget, this.showConfig.appendableElement) &&
         !isParent(currentTarget, this.showConfig.target) &&
         findParent(currentTarget, 'vega-modal') === findParent(this.showConfig.target, 'vega-modal')) {
         this.hide();
@@ -152,6 +162,9 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
   hide() {
     this.elementAppender && this.elementAppender.hide();
     this[this.isDropdownShowName] = false;
+    this.hierarchyTreeManager.getChildren().map((child) => {
+      child.hide();
+    });
   }
   destroy() {
     this.destroyElementAppender();
@@ -222,6 +235,9 @@ export class ElementAppenderSlimmer extends VegaSlimmer {
   }
 }
 ElementAppenderSlimmer.DELAY_HIDE_TIME = 100;
+__decorate([
+  InjectVegaSlimmer()
+], ElementAppenderSlimmer.prototype, "hierarchyTreeManager", void 0);
 __decorate([
   MapToComponentMethod('connectedCallback')
 ], ElementAppenderSlimmer.prototype, "connectedCallback", null);