@globalpayments/vega 2.20.1 → 2.22.0

package/dist/collection/components/vega-selection-chip/vega-selection-chip.js

@@ -0,0 +1,335 @@
+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 { Component, Prop, Element, Event, State, Watch } from '@stencil/core';
+import { sanitizeVegaComponent } from '../../utils/component';
+import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from 'vega-slimmer/core';
+import { VegaSelectionChipRenderer } from './slimmers/renderers/vega-selection-chip-renderer';
+import { VegaSelectionChipCheckedController } from './slimmers/controllers/vega-selection-chip-checked-cotroller';
+import { VegaSelectionChipStateController } from './slimmers/controllers/vega-selection-chip-state-controller';
+import { VegaSelectionChipShowErrorController } from './slimmers/controllers/vega-selection-chip-show-error-controller';
+import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
+import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
+import { getCurrentBreakpoint } from '../../utils/breakpoints';
+import { VegaChange } from '../../helpers/event-manager/event-id/vega-event-id';
+import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
+export class VegaSelectionChip {
+  constructor() {
+    this.globalSlimmers = {};
+    this.renderer = new VegaSelectionChipRenderer();
+    this.checkedController = new VegaSelectionChipCheckedController();
+    this.stateController = new VegaSelectionChipStateController();
+    this.showErrorController = new VegaSelectionChipShowErrorController();
+    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaSelectionChip, VegaChange);
+    /**
+     * Indicates whether the parent selection chip group shows error message.
+     */
+    this.showError = false;
+    this.currentBreakpoint = getCurrentBreakpoint();
+    /**
+     * Specifies the label or title for the selection chip.
+     * It provides descriptive text that helps identify
+     *    the purpose of the selection chip.
+     */
+    this.label = '';
+    /**
+     * Specifies the size of the selection chip.
+     */
+    this.size = 'medium';
+    /**
+     * Determines the rendering style for the selection chip.
+     */
+    this.variant = 'text';
+    /**
+     * Indicates if the selection chip is disabled.
+     */
+    /* eslint-disable @stencil/strict-mutable */
+    this.disabled = false;
+    /**
+     * Defines the display behavior of the selection chip.
+     * This property controls how the chip is presented
+     *    in relation to surrounding elements.
+     */
+    this.block = false;
+    /**
+     * Defines the background color of the swatch.
+     * It accepts a string value representing a valid
+     *    background color token,
+     *    which customizes the chip appearance.
+     */
+    this.swatchColor = 'bg-status-info';
+  }
+  watchSize() {
+    methodPlaceholder();
+  }
+  componentWillRender() {
+    methodPlaceholder();
+  }
+  render() {
+    return sanitizeVegaComponent(this.renderer.render(), this.host);
+  }
+  static get is() { return "vega-selection-chip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vega-selection-chip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vega-selection-chip.css"]
+  }; }
+  static get properties() { return {
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the label or title for the selection chip.\nIt provides descriptive text that helps identify\n   the purpose of the selection chip."
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ResponsiveType<VegaSelectionChipSize>",
+        "resolved": "\"extra-small\" | \"large\" | \"medium\" | \"small\" | { S?: VegaSelectionChipSize; M?: VegaSelectionChipSize; L?: VegaSelectionChipSize; XL?: VegaSelectionChipSize; default?: VegaSelectionChipSize; }",
+        "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../types/ui.type"
+          },
+          "VegaSelectionChipSize": {
+            "location": "import",
+            "path": "./interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the size of the selection chip."
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'medium'"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaSelectionChipVariant",
+        "resolved": "\"swatch\" | \"text\"",
+        "references": {
+          "VegaSelectionChipVariant": {
+            "location": "import",
+            "path": "./interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines the rendering style for the selection chip."
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'text'"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates if the selection chip is disabled."
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Determines if the selection chip is checked."
+      },
+      "attribute": "checked",
+      "reflect": true
+    },
+    "block": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the display behavior of the selection chip.\nThis property controls how the chip is presented\n   in relation to surrounding elements."
+      },
+      "attribute": "block",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabledTooltip": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "VegaSelectionChipTooltipProps",
+        "resolved": "{ alignment?: ElementAppenderAlignmentType; maxWidth?: ResponsiveType<SizeType>; minWidth?: ResponsiveType<SizeType>; placement?: ElementAppenderPlacementType; positionRelativeTo?: string; size?: ResponsiveType<SizeType>; trigger?: \"click\" | \"hover\" | \"none\"; content?: string; disableInteractive?: boolean; text?: string; }",
+        "references": {
+          "VegaSelectionChipTooltipProps": {
+            "location": "import",
+            "path": "./interface"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies the tooltip displayed for the selection chip\n   when it is in a disabled state.\nThis provides additional context or information about the chip's\n   functionality or reason for being disabled."
+      }
+    },
+    "swatchColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "BackgroundColorsTokenType",
+        "resolved": "\"bg-brand\" | \"bg-page\" | \"bg-primary\" | \"bg-secondary\" | \"bg-tertiary\" | \"bg-quaternary\" | \"bg-inverted-primary\" | \"bg-inverted-secondary\" | \"bg-inverted-tertiary\" | \"bg-inverted-quaternary\" | \"bg-action\" | \"bg-action-hover\" | \"bg-action-focus\" | \"bg-action-active\" | \"bg-action-quaternary\" | \"bg-action-quaternary-hover\" | \"bg-action-quaternary-active\" | \"bg-action-secondary\" | \"bg-action-secondary-hover\" | \"bg-action-secondary-active\" | \"bg-action-tertiary\" | \"bg-action-tertiary-hover\" | \"bg-action-tertiary-active\" | \"bg-app-header\" | \"bg-backdrop-modal\" | \"bg-backdrop-popover\" | \"bg-backdrop-sidebar\" | \"bg-chip\" | \"bg-chip-hover\" | \"bg-chip-active\" | \"bg-danger\" | \"bg-danger-hover\" | \"bg-danger-focus\" | \"bg-danger-active\" | \"bg-danger-tertiary\" | \"bg-danger-tertiary-hover\" | \"bg-danger-tertiary-active\" | \"bg-disabled\" | \"bg-divider\" | \"bg-divider-secondary\" | \"bg-keypad-btn-active\" | \"bg-loading-progress\" | \"bg-loading-track\" | \"bg-segment-hover\" | \"bg-segment-control\" | \"bg-selected\" | \"bg-sidebar\" | \"bg-sidebar-icon\" | \"bg-sidebar-icon-hover\" | \"bg-sidebar-icon-selected\" | \"bg-sidebar-item-hover\" | \"bg-sidebar-item-selected\" | \"bg-site-footer\" | \"bg-site-footer-action\" | \"bg-site-footer-action-hover\" | \"bg-site-footer-action-active\" | \"bg-site-footer-field\" | \"bg-slider-handle\" | \"bg-status-error\" | \"bg-status-info\" | \"bg-status-success\" | \"bg-status-warning\" | \"bg-tab\" | \"bg-tab-hover\" | \"bg-tab-selected\" | \"bg-table-alt-row\" | \"bg-table-header\" | \"bg-table-row-hover\" | \"bg-table-row-selected-expanded\" | \"bg-table-selected-row\" | \"bg-textarea-count\" | \"bg-tile\" | \"bg-tile-hover\" | \"bg-tile-selected\" | \"bg-tile-selected-hover\" | \"bg-toggle-switch\" | \"bg-toggle-switch-hover\" | \"bg-toggle-switch-selected-disabled\" | \"bg-transparent\" | \"bg-accent1-primary\" | \"bg-accent1-secondary\" | \"bg-accent1-tertiary\" | \"bg-accent2-primary\" | \"bg-accent2-secondary\" | \"bg-accent2-tertiary\" | \"bg-accent3-primary\" | \"bg-accent3-secondary\" | \"bg-accent3-tertiary\" | \"bg-accent4-primary\" | \"bg-accent4-secondary\" | \"bg-accent4-tertiary\" | \"bg-accent5-primary\" | \"bg-accent5-secondary\" | \"bg-accent5-tertiary\" | \"bg-accent6-primary\" | \"bg-accent6-secondary\" | \"bg-accent6-tertiary\" | \"bg-accent7-primary\" | \"bg-accent7-secondary\" | \"bg-accent7-tertiary\" | \"bg-accent8-primary\" | \"bg-accent8-secondary\" | \"bg-accent8-tertiary\" | \"bg-accent9-primary\" | \"bg-accent9-secondary\" | \"bg-accent9-tertiary\" | \"bg-accent10-primary\" | \"bg-accent10-secondary\" | \"bg-accent10-tertiary\" | \"bg-date-picker-range\"",
+        "references": {
+          "BackgroundColorsTokenType": {
+            "location": "import",
+            "path": "../../types/design-token.type"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Defines the background color of the swatch.\nIt accepts a string value representing a valid\n   background color token,\n   which customizes the chip appearance."
+      },
+      "attribute": "swatch-color",
+      "reflect": false,
+      "defaultValue": "'bg-status-info'"
+    },
+    "value": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Stores the value associated with the selection chip\n   when it is checked or unchecked."
+      },
+      "attribute": "value",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "showError": {},
+    "currentBreakpoint": {},
+    "selectType": {}
+  }; }
+  static get events() { return [{
+      "method": "vegaChange",
+      "name": "vegaChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "An event emitter notifying changes in the value of the selection chip,\n   whether triggered programmatically or through user interaction."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "change",
+      "name": "change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }],
+        "text": "An event emitter notifying changes in the value of the selection chip,\n   whether triggered programmatically or through user interaction."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+  static get watchers() { return [{
+      "propName": "size",
+      "methodName": "watchSize"
+    }]; }
+}
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaSelectionChip.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSelectionChip.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSelectionChip.prototype, "checkedController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSelectionChip.prototype, "stateController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSelectionChip.prototype, "showErrorController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSelectionChip.prototype, "pageResizeObserverSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSelectionChip.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaSelectionChip.prototype, "changeEventEmitter", void 0);

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-data-source-controller.js

@@ -133,9 +133,7 @@ export class VegaTableDataSourceController extends VegaSlimmer {
       ? this.columns.filter((column) => column.sorter && column.sorter !== 'event' && this.sortersMap.has(column.prop))
       : [];
     if (sortedColumns.length > 0) {
-      const sortProp = sortedColumns[sortedColumns.length - 1].prop;
-      const sortedOrder = this.sortersMap.get(sortProp).order;
-      this.setCurrentData(this.vegaTableSortController.sortData(this.dataSource, sortProp, sortedOrder));
+      this.setCurrentData(this.vegaTableSortController.sortData(this.dataSource, Array.from(this.sortersMap.values())));
     }
     else {
       this.setCurrentData(this.dataSource);

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-sort-controller.js

@@ -6,32 +6,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { isNonNullable } from '../../../../types/type-guard';
+import { VegaTableSorter } from './vega-table-sorter';
 /**
  * The sort controller for the vega-table
  */
 export class VegaTableSortController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    /**
-     * The method to sort the data by sorter which include prop name and order
-     *
-     * @param {VegaTableDataSourceItem[]} data - The source that will be sorted
-     * @param {string} sortProp - The prop name of which prop you want to sort by
-     * @param {VegaTableSortOrderType} sortOrder - The order of the sorter
-     * @returns {VegaTableDataSourceItem[]} The sorted data source
-     */
-    this.sortData = (data, sortProp, sortOrder) => {
-      const sorter = this.columns.find((column) => typeof column.sorter === 'function' && column.prop === sortProp).sorter;
-      const cloneData = data.slice();
-      if (!sortOrder) {
-        return cloneData;
-      }
-      return cloneData.sort((a, b) => {
-        const compareResult = sorter(a, b);
-        return sortOrder === 'asc' ? compareResult : -compareResult;
-      });
-    };
-  }
   /**
    * The callback of [watchColumns]{@link VegaTable.watchColumns}
    */
@@ -45,16 +24,23 @@ export class VegaTableSortController extends VegaSlimmer {
    * @param {VegaTableSortOrderType} nextSortOrder - The next sorter order
    */
   handleHeadSortClick(column, nextSortOrder) {
-    if (this.sortersMap.has(column.prop)) {
-      this.sortersMap.delete(column.prop);
+    if (this.sortConfig.type === 'single') {
+      this.sortersMap.clear();
+    }
+    if (!nextSortOrder) {
+      if (this.sortersMap.has(column.prop)) {
+        this.sortersMap.delete(column.prop);
+      }
     }
-    if (nextSortOrder) {
-      this.sortersMap.set(column.prop, { order: nextSortOrder, prop: column.prop });
+    else {
+      this.sortersMap.set(column.prop, new VegaTableSorter(column.prop, nextSortOrder, column.sorter));
     }
     if (column.sorter !== 'event') {
-      this.vegaTableDataSourceController.setCurrentData(this.sortData(this.vegaTableDataSourceController.getDataSource(), column.prop, nextSortOrder));
+      this.vegaTableDataSourceController.setCurrentData(this.sortData(this.vegaTableDataSourceController.getDataSource(), Array.from(this.sortersMap.values())));
     }
-    this.changeEventEmitter.emit({ sorters: [...this.sortersMap.values()] });
+    this.changeEventEmitter.emit({
+      sorters: Array.from(this.sortersMap.values()).map((s) => s.toExternalFormat()),
+    });
   }
   /**
    * Sync the default sort order from the columns
@@ -63,7 +49,25 @@ export class VegaTableSortController extends VegaSlimmer {
     this.columns
       .filter((column) => isNonNullable(column.sorter) && isNonNullable(column.sortOrder))
       .forEach((item) => {
-      this.sortersMap.set(item.prop, { order: item.sortOrder, prop: item.prop });
+      this.sortersMap.set(item.prop, new VegaTableSorter(item.prop, item.sortOrder, item.sorter));
+    });
+  }
+  /**
+   * The method to sort the data by sorter which include prop name and order
+   *
+   * @param {VegaTableDataSourceItem[]} data - The source that will be sorted
+   * @param {VegaTableSorter[]} sorters - array of sorters ordered by sequence of columns to be sorted
+   * @returns {VegaTableDataSourceItem[]} The sorted data source
+   */
+  sortData(data, sorters) {
+    return [...data].sort((a, b) => {
+      for (const sorter of sorters) {
+        const result = sorter.sort(a, b);
+        if (isNonNullable(result)) {
+          return result;
+        }
+      }
+      return 0;
     });
   }
 }
@@ -79,6 +83,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaTableSortController.prototype, "vegaTableDataSourceController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableSortController.prototype, "sortConfig", void 0);
 __decorate([
   MapToComponentMethod('watchColumns')
 ], VegaTableSortController.prototype, "watchColumns", null);

package/dist/collection/components/vega-table/slimmers/controllers/vega-table-sorter.js

@@ -0,0 +1,41 @@
+/**
+ * Vega Table Sorter
+ * This is a helper class for sorting table data based on defined columns to be sorted
+ * Supports multi-column sorting
+ */
+export class VegaTableSorter {
+  constructor(prop, order, sorter) {
+    this.prop = prop;
+    this.order = order;
+    this.sorter = sorter;
+  }
+  /**
+   * Sort utility
+   *
+   * @param {VegaTableDataSourceItem} a column value
+   * @param {VegaTableDataSourceItem} b column value
+   * @returns {Nullable<number>} compare result
+   */
+  sort(a, b) {
+    const compareResult = this.sorter(a, b);
+    if (compareResult !== 0) {
+      return this.order === 'asc' ? compareResult : -compareResult;
+    }
+  }
+  /**
+   * Get params from sorter object for external use
+   *
+   * @returns {{VegaTableSorterType}} sorter prop and order
+   */
+  toExternalFormat() {
+    return { prop: this.prop, order: this.order };
+  }
+  /**
+   * Get sorter order value
+   *
+   * @returns {{VegaTableSortOrderType}} sorter order
+   */
+  getSortOrder() {
+    return this.order;
+  }
+}

package/dist/collection/components/vega-table/slimmers/renderers/vega-table-header-renderer.js

@@ -13,7 +13,8 @@ export class VegaTableHeaderRenderer extends VegaSlimmer {
     super(...arguments);
     this.renderHeaderColumnCells = () => {
       return this.columns.map((column) => {
-        return (h("vega-table-head-cell", { key: column.key || column.prop, textAlign: column.align, sorter: column.sorter, sortOrder: column.sortOrder, breakpoint: column.breakpoint, 
+        var _a;
+        return (h("vega-table-head-cell", { key: column.key || column.prop, textAlign: column.align, sorter: column.sorter, sortOrder: (_a = this.sortersMap.get(column.prop)) === null || _a === void 0 ? void 0 : _a.getSortOrder(), breakpoint: column.breakpoint, 
           /* eslint-disable-next-line react/jsx-no-bind */
           ref: (ref) => {
             DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (input) => {
@@ -33,6 +34,9 @@ export class VegaTableHeaderRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "showHeader", void 0);
+__decorate([
+  MapToComponentField()
+], VegaTableHeaderRenderer.prototype, "sortersMap", void 0);
 __decorate([
   MapToComponentField()
 ], VegaTableHeaderRenderer.prototype, "columns", void 0);