@globalpayments/vega 2.15.0 → 2.17.0

package/dist/collection/components/vega-dropdown/vega-dropdown-item/slimmers/renderers/vega-dropdown-item-renderer.js

@@ -43,16 +43,18 @@ export class VegaDropdownItemRenderer extends VegaSlimmer {
     return this.prefixIcon && h("vega-icon", { icon: this.prefixIcon, size: "size-16" });
   }
   renderLabel() {
-    if (this.label) {
+    // We prioritize slots, and when both slots and labels are defined, we can collect label information for component display,
+    // such as input select selected item display
+    if (this.host.childElementCount > 0 || this.host.textContent.trim() !== '') {
+      return (h("span", { class: "vega-dropdown-item-label" },
+        h("slot", null)));
+    }
+    else {
       return (h(Fragment, null,
         h("span", { innerHTML: this.label, class: "vega-dropdown-item-label" }),
         h("span", { class: "v-hidden" },
           h("slot", null))));
     }
-    else {
-      return (h("span", { class: "vega-dropdown-item-label" },
-        h("slot", null)));
-    }
   }
   renderCounter() {
     return (this.count > 0 && (h("div", { class: "item-counter" },

package/dist/collection/components/vega-dropdown/vega-dropdown-item/vega-dropdown-item.js

@@ -86,7 +86,7 @@ export class VegaDropdownItem {
         "text": "Specifies the key for the dropdown item."
       },
       "attribute": "item-key",
-      "reflect": false
+      "reflect": true
     },
     "count": {
       "type": "number",

package/dist/collection/components/vega-dropdown/vega-dropdown.js

@@ -27,6 +27,7 @@ import { ChildNodesNotifyObserverSlimmer, } from '../../helpers/event-manager/sl
 import { DROPDOWN_ITEM_CLICK } from '../../helpers/change-manager/subject/static-subject/staticSubjectTitle';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
 import { VegaDropdownRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-dropdown/runtime-metrics-payload-definition';
+import { VegaDropdownScrollableController } from './slimmers/controllers/vega-dropdown-scrollable-controller';
 export class VegaDropdown {
   constructor() {
     this.globalSlimmers = {};
@@ -47,6 +48,7 @@ export class VegaDropdown {
     this.childrenController = new VegaDropdownChildrenController();
     this.selectedController = new VegaDropdownSelectedController();
     this.renderModeController = new VegaDropdownRenderModeController();
+    this.scrollableController = new VegaDropdownScrollableController();
     this.selectTypeNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectType', 'watchSelectType');
     this.selectedSourceKeyNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'selectedSourceKey', 'watchSelectedSourceKey');
     this.prefixIconSlotNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'prefixIconSlot', 'watchPrefixIconSlot');
@@ -59,7 +61,6 @@ export class VegaDropdown {
     this.itemDisplayRuleNotifySlimmer = createSubStateNotifySlimmer(VegaDropdown, 'itemDisplayRule', 'watchItemDisplayRule');
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaDropdownRuntimeMetricsPayloadDefinition);
     this.searchString = null;
-    this.maxHeightOfItemsContainer = 400;
     this.isDropdownShow = false;
     /**
      * Specifies the trigger mode for the dropdown.
@@ -693,7 +694,6 @@ export class VegaDropdown {
   }; }
   static get states() { return {
     "searchString": {},
-    "maxHeightOfItemsContainer": {},
     "isDropdownShow": {},
     "sourceForRender": {}
   }; }
@@ -1036,6 +1036,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "renderModeController", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "scrollableController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "selectTypeNotifySlimmer", void 0);

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-dropdown-controller.js

@@ -4,21 +4,14 @@ 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 { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import { isArrayOfType, isSelectSourceItemType } from '../../../../types/typeGuard';
+import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/domNodeSubjectObserverFactory';
 import { VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, } from '../../../../helpers/event-manager/eventID/vegaEventId';
+import { VegaInternalDropdownTemplateItemsChange } from '../../../../helpers/event-manager/eventID/vegaInternalEventId';
 /** The `VegaInputSelectDropdownController` class is a TypeScript React component that controls the behavior of a dropdown select input. */
 export class VegaInputSelectDropdownController extends VegaSlimmer {
   constructor() {
     super(...arguments);
-    /**
-     * convert the dropdown source when the component watchSource call
-     */
-    this.handleSourceChange = () => {
-      this.source = isArrayOfType(this.source, isSelectSourceItemType) ? this.source : [];
-      this.convertToDropdownSource();
-    };
     /** The `onDropdownShow` function is setting the `isDropdownShow` property of the`VegaInputSelectDropdownController` class to `true`. This function is called when the dropdown select input is shown. */
     this.onDropdownShow = () => {
       this.isDropdownShow = true;
@@ -28,20 +21,6 @@ export class VegaInputSelectDropdownController extends VegaSlimmer {
       this.isDropdownShow = false;
     };
   }
-  /**
-   * call the method when component componentWillLoad call
-   */
-  handleWillLoad() {
-    this.convertToDropdownSource();
-  }
-  /**
-   * Append items to source
-   *
-   * @param {SelectSourceItem[]} items - Appendable items
-   */
-  appendSourceItems(items) {
-    this.source = [...this.source, ...items];
-  }
   /**
    * The function `addDropdownObserver` adds event observers to a dropdown element.
    *
@@ -60,21 +39,24 @@ export class VegaInputSelectDropdownController extends VegaSlimmer {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownSearch, (payload) => {
       this.searchEventEmitter.emit(payload.detail);
     });
-  }
-  /** update the dropdown list by source value */
-  convertToDropdownSource() {
-    this.dropdownSource = this.source.map((item) => ({
-      key: item.id,
-      label: item.displayName,
-    }));
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaInternalDropdownTemplateItemsChange, 
+    /*
+     * The below method is e2e-test covered in
+     * @see{module:vega-input-select-template-single-select-e2e}
+     * @see{module:vega-input-select-template-multiple-select-e2e}
+     */
+    /* istanbul ignore next */
+    (payload) => {
+      const addedItems = Array.from(payload)
+        .filter((item) => !this.source.find((sourceItem) => sourceItem.id === item.itemKey))
+        .map((item) => ({
+        id: item.itemKey,
+        displayName: item.label,
+      }));
+      this.sourceController.appendSourceItems(addedItems);
+    });
   }
 }
-__decorate([
-  MapToComponentField({ writable: true })
-], VegaInputSelectDropdownController.prototype, "source", void 0);
-__decorate([
-  MapToComponentField({ writable: true })
-], VegaInputSelectDropdownController.prototype, "dropdownSource", void 0);
 __decorate([
   MapToComponentField({ writable: true })
 ], VegaInputSelectDropdownController.prototype, "isDropdownShow", void 0);
@@ -88,8 +70,8 @@ __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownController.prototype, "vegaInputSelectValueController", void 0);
 __decorate([
-  MapToComponentMethod('componentWillLoad')
-], VegaInputSelectDropdownController.prototype, "handleWillLoad", null);
+  MapToComponentField()
+], VegaInputSelectDropdownController.prototype, "sourceController", void 0);
 __decorate([
-  MapToComponentMethod('watchSource')
-], VegaInputSelectDropdownController.prototype, "handleSourceChange", void 0);
+  MapToComponentField()
+], VegaInputSelectDropdownController.prototype, "source", void 0);

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-items-slot-controler.js

@@ -0,0 +1,62 @@
+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 { InjectVegaSlimmer, MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { MutationObserverSlimmer } from '../../../../helpers/slimmers/mutation-observer/mutationObserverSlimmer';
+import { TagNameMutationFilter } from '../../../../helpers/slimmers/mutation-observer/mutationObserverFilters';
+/**
+ * The class `VegaInputSelectItemsSlotController` extends `VegaSlimmer` and manages
+ * appending host items to a dropdown element.
+ */
+export class VegaInputSelectItemsSlotController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.mutationObserver = new MutationObserverSlimmer({
+      mutationFilter: TagNameMutationFilter('VEGA-DROPDOWN-ITEM'),
+      options: {
+        childList: true,
+        subtree: true,
+      },
+      callback: 
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:vega-input-select-template-slot-change-e2e}
+       */
+      /* istanbul ignore next */
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      () => this.appendHostItemsToDropdown(),
+    });
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]
+   */
+  componentDidLoad() {
+    this.appendHostItemsToDropdown();
+  }
+  /**
+   * The function appends host items to a dropdown element.
+   */
+  appendHostItemsToDropdown() {
+    const items = this.host.querySelector('[slot=items]');
+    const itemsSlotRef = this.vegaInputSelectDropdownRenderer.getItemsSlotRef();
+    if (items && itemsSlotRef) {
+      itemsSlotRef.remove();
+      this.vegaInputSelectDropdownRenderer.getDropdownRef().append(items);
+    }
+  }
+}
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelectItemsSlotController.prototype, "mutationObserver", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectItemsSlotController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectItemsSlotController.prototype, "vegaInputSelectDropdownRenderer", void 0);
+__decorate([
+  MapToComponentMethod('componentDidLoad')
+], VegaInputSelectItemsSlotController.prototype, "componentDidLoad", null);

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-lazy-load-controller.js

@@ -47,7 +47,7 @@ export class VegaInputSelectLazyLoadController extends VegaSlimmer {
       const response = await this.sourceLazyLoadCallback(payload.endIndex);
       this.hasMore = response.hasMore;
       if (response.items.length > 0) {
-        this.vegaInputSelectDropdownController.appendSourceItems(response.items);
+        this.sourceController.appendSourceItems(response.items);
       }
       this.isLazyLoading = false;
     }
@@ -61,7 +61,7 @@ __decorate([
 ], VegaInputSelectLazyLoadController.prototype, "isLazyLoading", void 0);
 __decorate([
   MapToComponentField()
-], VegaInputSelectLazyLoadController.prototype, "vegaInputSelectDropdownController", void 0);
+], VegaInputSelectLazyLoadController.prototype, "sourceController", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectLazyLoadController.prototype, "vegaInputSelectDropdownRenderer", void 0);

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-source-controller.js

@@ -0,0 +1,48 @@
+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 { isArrayOfType, isSelectSourceItemType } from '../../../../types/typeGuard';
+/**
+ * The `VegaInputSelectSourceController` class manages the source data for
+ * a dropdown input component in TypeScript.
+ */
+export class VegaInputSelectSourceController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * convert the dropdown source when the component watchSource call
+     */
+    this.handleSourceChange = () => {
+      this.source = isArrayOfType(this.source, isSelectSourceItemType) ? this.source : [];
+    };
+  }
+  /**
+   * Append items to source
+   *
+   * @param {SelectSourceItem[]} items - Appendable items
+   */
+  appendSourceItems(items) {
+    this.source = [...this.source, ...items];
+  }
+  /**
+   * This TypeScript function retrieves an item from a source array based on its ID.
+   *
+   * @param {SelectValueType<SelectType>} id - The `id` parameter in the `getItem` function is of type `SelectValueType<SelectType>`,
+   * which means it can accept a value that corresponds to the `SelectType` defined in the function.
+   * @returns { Nullable<SelectSourceItem>} The `getItem` function is returning a `SelectSourceItem` object that matches the provided
+   * `id`, or `null` if no matching item is found in the `source` array.
+   */
+  getItem(id) {
+    return this.source.find((item) => item.id === id);
+  }
+}
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaInputSelectSourceController.prototype, "source", void 0);
+__decorate([
+  MapToComponentMethod('watchSource')
+], VegaInputSelectSourceController.prototype, "handleSourceChange", void 0);

package/dist/collection/components/vega-input-select/slimmers/controllers/vega-input-select-value-controller.js

@@ -23,12 +23,9 @@ export class VegaInputSelectValueController extends VegaSlimmer {
       if (this.selectType === 'multiple') {
         newValue = newValue;
         oldValue = oldValue;
-        const validValue = [];
-        this.source.forEach((sourceItem) => {
-          if (newValue.includes(sourceItem.id)) {
-            validValue.push(sourceItem.id);
-          }
-        });
+        const validValue = newValue
+          ? newValue.filter((value) => this.sourceController.getItem(value))
+          : [];
         if (!isArrayEqual(validValue, oldValue, true)) {
           this.setValue(validValue);
           this.changeEventEmitter.emit(validValue);
@@ -43,7 +40,7 @@ export class VegaInputSelectValueController extends VegaSlimmer {
       }
       else {
         if (newValue !== oldValue) {
-          const sourceItem = this.source.find((sourceItem) => sourceItem.id === newValue);
+          const sourceItem = this.sourceController.getItem(newValue);
           this.setValue(sourceItem ? sourceItem.id : '');
           this.changeEventEmitter.emit(this.value);
           ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
@@ -89,15 +86,15 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "selectType", void 0);
-__decorate([
-  MapToComponentField()
-], VegaInputSelectValueController.prototype, "source", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "changeEventEmitter", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectValueController.prototype, "host", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectValueController.prototype, "sourceController", void 0);
 __decorate([
   MapToComponentMethod('watchValue')
 ], VegaInputSelectValueController.prototype, "handleValueChange", void 0);

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -43,7 +43,7 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
       }
     };
     this.renderSingleSelected = () => {
-      const item = this.source.find((item) => item.id === this.value);
+      const item = this.sourceController.getItem(this.value);
       if (item) {
         return h("span", { class: "vega-input-select-selected" }, item.displayName);
       }
@@ -67,11 +67,21 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   getInputSelectContainerRef() {
     return this.inputSelectContainer;
   }
+  getItemsSlotRef() {
+    return this.itemsSlotRef;
+  }
   render() {
-    return (h("vega-dropdown", Object.assign({ trigger: "click", source: this.dropdownSource, selectType: this.selectType, selectedSourceKey: this.value, matchTargetWidth: true }, this.getVegaDropdownProperties(), { ref: (ref) => {
+    return (h("vega-dropdown", Object.assign({ trigger: "click", source: this.getDropdownSource(), selectType: this.selectType, selectedSourceKey: this.value, matchTargetWidth: true }, this.getVegaDropdownProperties(), { ref: (ref) => {
         this.dropdown = ref;
         this.vegaInputSelectDropdownController.addDropdownObserver(ref);
-      }, isLazyLoading: this.isLazyLoading }), this.renderContainer()));
+      }, isLazyLoading: this.isLazyLoading }),
+      this.renderContainer(),
+      this.renderItemsSlot()));
+  }
+  renderItemsSlot() {
+    return (this.host.querySelector('[slot=items]') && (h("div", { slot: "items", ref: (ref) => {
+        this.itemsSlotRef = ref;
+      } })));
   }
   /*
    * The below method is e2e-test covered in
@@ -81,6 +91,12 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   preventBlur(e) {
     e.stopImmediatePropagation();
   }
+  getDropdownSource() {
+    return this.source.map((item) => ({
+      key: item.id,
+      label: item.displayName,
+    }));
+  }
 }
 (() => {
   VegaInternalIconManager.register({
@@ -94,6 +110,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "source", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "host", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "selectType", void 0);
@@ -103,9 +122,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "vegaDropdownProps", void 0);
-__decorate([
-  MapToComponentField()
-], VegaInputSelectDropdownRenderer.prototype, "dropdownSource", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "prefixIcon", void 0);
@@ -121,3 +137,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectDropdownRenderer.prototype, "vegaInputSelectDropdownController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectDropdownRenderer.prototype, "sourceController", void 0);

package/dist/collection/components/vega-input-select/vega-input-select.js

@@ -21,13 +21,17 @@ import { ChildNodesEventPreventSlimmer } from '../../helpers/event-manager/slimm
 import { VegaInputSelectLazyLoadController } from './slimmers/controllers/vega-input-select-lazy-load-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/componentUsageRuntimeMetrics';
 import { VegaInputSelectRuntimeMetricsPayloadDefinition } from '../../constants/runtime-metrics-payload-definition/vega-input-select/runtime-metrics-payload-definition';
+import { VegaInputSelectSourceController } from './slimmers/controllers/vega-input-select-source-controller';
+import { VegaInputSelectItemsSlotController } from './slimmers/controllers/vega-input-select-items-slot-controler';
 export class VegaInputSelect {
   constructor() {
     this.globalSlimmers = {};
+    this.sourceController = new VegaInputSelectSourceController();
     this.vegaInputSelectRenderer = new VegaInputSelectRenderer();
     this.vegaInputSelectDropdownController = new VegaInputSelectDropdownController();
     this.vegaInputSelectValueController = new VegaInputSelectValueController();
     this.vegaInputSelectDropdownRenderer = new VegaInputSelectDropdownRenderer();
+    this.vegaInputSelectItemsSlotController = new VegaInputSelectItemsSlotController();
     this.formFieldControllerSlimmer = new FormFieldControllerSlimmer({
       propertyRules: [
         {
@@ -48,7 +52,6 @@ export class VegaInputSelect {
     this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaSearch], () => this.host, true);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer(VegaInputSelectRuntimeMetricsPayloadDefinition);
     this.isDropdownShow = false;
-    this.dropdownSource = [];
     this.currentBreakpoint = getCurrentBreakpoint();
     this.isLazyLoading = false;
     /**
@@ -500,7 +503,6 @@ export class VegaInputSelect {
   }; }
   static get states() { return {
     "isDropdownShow": {},
-    "dropdownSource": {},
     "currentBreakpoint": {},
     "isLazyLoading": {}
   }; }
@@ -665,6 +667,9 @@ export class VegaInputSelect {
 __decorate([
   InjectVegaGlobalSlimmer()
 ], VegaInputSelect.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelect.prototype, "sourceController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "vegaInputSelectRenderer", void 0);
@@ -677,6 +682,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "vegaInputSelectDropdownRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaInputSelect.prototype, "vegaInputSelectItemsSlotController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaInputSelect.prototype, "formFieldControllerSlimmer", void 0);

package/dist/collection/components/vega-loading-indicator/vega-loading-indicator.js

@@ -63,8 +63,8 @@ export class VegaLoadingIndicator {
       const perimeter = Math.PI * 2 * r;
       const progress = this.status === 'error' ? perimeter : perimeter * percent;
       return (h("svg", { class: "circle-loader" },
-        h("circle", { r: r, class: "circle-loader-track" }),
-        h("circle", { r: r, class: "circle-loader-progress", "stroke-linecap": this.mode === 'indeterminate' ? 'round' : 'butt', "stroke-dasharray": [progress, perimeter].join(' ') }),
+        h("circle", { r: r, class: "circle-loader-track", part: "circle-loader-track" }),
+        h("circle", { r: r, class: "circle-loader-progress", part: "circle-loader-progress", "stroke-linecap": this.mode === 'indeterminate' ? 'round' : 'butt', "stroke-dasharray": [progress, perimeter].join(' ') }),
         this.mode === 'determinate' && (h("circle", { r: r, class: arrayToClassString(['circle-loader-progress-pointer', percent === 0 && 'v-hidden'].filter(Boolean)), "stroke-dashoffset": -progress, "stroke-dasharray": [0, perimeter].join(' ') }))));
     };
     this.renderBarLoader = () => {

package/dist/collection/components/vega-skeleton/vega-skeleton.css

@@ -70,8 +70,11 @@
   box-sizing: border-box;
   padding: 16px;
 }
-@media (max-width: 768px) {
+.vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(4), .vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(5) {
+  display: none;
+}
+@media (min-width: 768px) {
   .vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(4), .vega-skeleton-table .vega-skeleton-table-cell:nth-of-type(5) {
-    display: none;
+    display: table-cell;
   }
 }

package/dist/collection/constants/ui.js

@@ -68,7 +68,7 @@ export const VegaNativeEventName = [
   'dropdownSearch',
   'actionClick',
   'eventClick',
-  'dateClick',
+  'dateDblClick',
 ];
 // eslint-disable-next-line @typescript-eslint/typedef
 export const CssStates = ['default', 'hover', 'active', 'focus-visible'];

package/dist/collection/global/scripts/beforeVegaLoad.js

@@ -13,6 +13,7 @@ import VegaZIndexManager from '../../helpers/zindex/vegaZIndexManager';
 import { ValidCreditCardNumberRule } from '../../helpers/validator/rules/validCreditCardNumberRule';
 import vegaEnvManager from '../../helpers/vega-telemetry-helper/vegaEnvManager';
 import { waitForVega } from '../../helpers/common';
+import { VegaSkeletonLoader } from '../../helpers/skeleton-loader/vega-skeleton-loader-controller';
 /**
  * Default export function that will be used by stencil global script,
  * which will be invoked before library loaded.
@@ -33,6 +34,7 @@ export default function () {
   injectValidCreditCardNumberRuleIntoGlobal();
   initRuntimeMetricsTelemetryCollection();
   injectWaitForVegaIntoGlobal();
+  injectVegaSkeletonLoaderIntoGlobal();
 }
 /**
  * Disable feature flags from the client global defined lists.
@@ -146,3 +148,9 @@ function initRuntimeMetricsTelemetryCollection() {
 function injectWaitForVegaIntoGlobal() {
   globalThis['waitForVega'] = waitForVega;
 }
+/**
+ * Inject VegaSkeletonLoader to global as a public api
+ */
+function injectVegaSkeletonLoaderIntoGlobal() {
+  globalThis.VegaSkeletonLoader = VegaSkeletonLoader;
+}

package/dist/collection/helpers/calendar/calendar-date.js

@@ -100,4 +100,15 @@ export class CalendarDate {
     }
     return result;
   }
+  /**
+   * The function "equal" compares the year, month, and date of two CalendarDate objects and returns  true if they are equal.
+   *
+   * @param {CalendarDate} calendarDate - The `equal` method in the code snippet is a function that compares the year, month, and date of the current `CalendarDate` object with another
+   * `CalendarDate` object passed as a parameter. The method returns `true` if all three values (year, month, date) are equal
+   * @returns {boolean} The date is same day with current
+   */
+  equal(calendarDate) {
+    const { year, month, date } = calendarDate;
+    return this._year === year && this._month === month && this._date === date;
+  }
 }