@globalpayments/vega 2.45.0 → 2.47.0

package/dist/collection/components/vega-dropdown/slimmers/renderers/vega-dropdown-search-renderer.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 { h } from '@stencil/core';
+import { Fragment, h } from '@stencil/core';
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
@@ -17,7 +17,9 @@ export class VegaDropdownSearchRenderer extends VegaSlimmer {
         this.searchInputRef.value = '';
     };
     this.onInputSearch = (node) => {
-      this.searchInputRef = node;
+      if (node) {
+        this.searchInputRef = node;
+      }
       DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaChange, (input) => {
         this.search(input.detail, 'input');
       });
@@ -58,19 +60,21 @@ export class VegaDropdownSearchRenderer extends VegaSlimmer {
     }
   }
   render() {
-    return (this.searchable && (h("div", { class: "vega-dropdown-search" },
-      h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch, 
-        /*
-         * The below method is e2e-test covered in
-         * @see{module:vega-dropdown-enter-key-trigger-search-e2e}
-         */
-        /* eslint-disable-next-line react/jsx-no-bind */
-        onKeyDown: 
-        /* istanbul ignore next */ (e) => {
-          if (e.code === 'Enter') {
-            this.search(this.searchInputRef.value, 'enter');
-          }
-        } }))));
+    return (this.searchable && (h(Fragment, null,
+      h("div", { class: "vega-dropdown-search" },
+        h("vega-input", { "prefix-icon": "search", size: "small", autoValidation: false, ref: this.onInputSearch, 
+          /*
+           * The below method is e2e-test covered in
+           * @see{module:vega-dropdown-enter-key-trigger-search-e2e}
+           */
+          /* eslint-disable-next-line react/jsx-no-bind */
+          onKeyDown: 
+          /* istanbul ignore next */ (e) => {
+            if (e.code === 'Enter') {
+              this.search(this.searchInputRef.value, 'enter');
+            }
+          } })),
+      h("vega-divider", { margin: { y: 'size-4' } }))));
   }
 }
 __decorate([

package/dist/collection/components/vega-dropdown/vega-dropdown-content-box/vega-dropdown-content-box.css

@@ -11,8 +11,8 @@
 :host .vega-dropdown {
   box-shadow: var(--v-shadow-dropdown-menu, 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1));
   background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
-  padding-top: 8px;
-  padding-bottom: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
   text-align: left;
   border: 1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));
   border-radius: 8px;
@@ -25,10 +25,6 @@
   display: none;
 }
 
-:host .vega-dropdown.vega-dropdown-with-searchable {
-  padding-top: 0px;
-}
-
 :host .vega-dropdown .vega-dropdown-container {
   overflow-y: auto;
   position: relative;
@@ -43,16 +39,15 @@
 }
 
 :host .vega-dropdown .vega-dropdown-search {
-  padding-top: 16px;
-  padding-left: 12px;
-  padding-right: 12px;
-  padding-bottom: 12px;
-  margin-bottom: 4px;
-  background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
-  border-width: 0px;
-  border-bottom-width: 1px;
-  border-style: solid;
-  border-color: rgba(var(--v-border-color-divider, 171, 198, 216, 1));
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-left: 4px;
+  margin-right: 4px;
+}
+:host .vega-dropdown .vega-dropdown-search vega-input {
+  display: block;
 }
 
 :host .vega-dropdown .vega-dropdown-search vega-input::part(input-container) {
@@ -126,9 +121,9 @@
 
 :host .vega-dropdown .vega-dropdown-add-item {
   padding-top: 8px;
-  padding-left: 12px;
-  padding-right: 12px;
   padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
   margin-left: 4px;
   margin-right: 4px;
   background-color: rgba(var(--v-bg-primary, 252, 252, 252, 1));
@@ -179,9 +174,9 @@
 }
 
 :host .vega-dropdown .vega-dropdown-add-item:focus-visible {
-  box-shadow: 0 0 0 4px rgba(var(--v-ring-action-focus, 19, 98, 226, 0.25));
-  outline: 2px solid transparent;
-  outline-offset: 2px;
+  outline: 2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));
+  outline-offset: 0px;
+  border-radius: 4px;
 }
 
 :host .vega-dropdown .vega-dropdown-clear-icon {
@@ -234,4 +229,22 @@
   margin-top: 4px;
   margin-bottom: 4px;
   border-bottom: 1px solid rgb(171, 198, 216);
+}
+
+:host .vega-dropdown .vega-dropdown-reset {
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-left: 4px;
+  margin-right: 4px;
+  display: block;
+  cursor: pointer;
+}
+:host .vega-dropdown .vega-dropdown-reset:hover {
+  background-color: rgba(var(--v-bg-quaternary, 241, 248, 251, 1));
+  color: rgba(var(--v-text-link-hover, 4, 112, 236, 1));
+}
+:host .vega-dropdown .vega-dropdown-reset:focus-visible {
+  border: 2px solid rgba(var(--v-border-secondary-btn, 19, 98, 226, 1));
 }

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

@@ -22,7 +22,7 @@ import { VegaDropdownRenderModeController } from './slimmers/controllers/vega-dr
 import { createSubStateNotifySlimmer } from '../../helpers/slimmers/sub-state/sub-state-notify-slimmer';
 import { VegaDropdownChildrenController } from './slimmers/controllers/vega-dropdown-children-controller';
 import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/event-emit-slimmer';
-import { VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaSearchTrigger, } from '../../helpers/event-manager/event-id/vega-event-id';
+import { VegaCreate, VegaDropdownClick, VegaDropdownHide, VegaDropdownSearch, VegaDropdownShow, VegaReset, VegaSearchTrigger, } from '../../helpers/event-manager/event-id/vega-event-id';
 import { ChildNodesNotifyObserverSlimmer, } from '../../helpers/event-manager/slimmers/child-nodes-notify-observer-slimmer';
 import { DROPDOWN_ITEM_CLICK } from '../../helpers/change-manager/subject/static-subject/static-subject-title';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
@@ -30,6 +30,7 @@ import { VegaDropdownRuntimeMetricsPayloadDefinition } from '../../constants/run
 import { VegaDropdownScrollableController } from './slimmers/controllers/vega-dropdown-scrollable-controller';
 import { VegaDropdownRemoteInvocationController } from './slimmers/controllers/vega-dropdown-remote-invocation-controller';
 import { TranslationSlimmer } from '../../helpers/slimmers/translation';
+import { VegaDropdownResetRenderer } from './slimmers/renderers/vega-dropdown-reset-renderer';
 /**
  * @vegaVersion 1.3.0
  */
@@ -42,6 +43,7 @@ export class VegaDropdown {
     this.searchRenderer = new VegaDropdownSearchRenderer();
     this.createRenderer = new VegaDropdownCreateRenderer();
     this.listRenderer = new VegaDropdownListRenderer();
+    this.resetRenderer = new VegaDropdownResetRenderer();
     this.groupLevelRenderer = new VegaDropdownGroupLevelRenderer();
     this.itemLevelRenderer = new VegaDropdownItemLevelRenderer();
     this.keyboardController = new VegaDropdownKeyboardController();
@@ -63,6 +65,7 @@ export class VegaDropdown {
     this.showEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownShow);
     this.hideEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownHide);
     this.dropdownClickEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownClick);
+    this.resetEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaReset);
     this.createEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaCreate);
     this.searchEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaDropdownSearch);
     this.searchTriggerEventEmitter = createEventEmitSlimmer(VegaDropdown, VegaSearchTrigger);
@@ -227,6 +230,13 @@ export class VegaDropdown {
      * @vegaVersion 2.36.0
      */
     this.isScreenPosition = false;
+    /**
+     * Specifies whether the selected option in the dropdown can be cleared.
+     *    It allows users to reset the selectedSourceKey when a selection has already been made.
+     *
+     * @vegaVersion 2.46.0
+     */
+    this.resettable = false;
   }
   watchIsDropdownShow() {
     methodPlaceholder();
@@ -869,6 +879,27 @@ export class VegaDropdown {
       "attribute": "is-screen-position",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "resettable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.46.0"
+          }],
+        "text": "Specifies whether the selected option in the dropdown can be cleared.\n   It allows users to reset the selectedSourceKey when a selection has already been made."
+      },
+      "attribute": "resettable",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -1071,6 +1102,45 @@ export class VegaDropdown {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "vegaReset",
+      "name": "vegaReset",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.46.0"
+          }],
+        "text": "An event emitter notifying the reset event in the dropdown."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "reset",
+      "name": "reset",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.46.0"
+          }],
+        "text": "An event emitter notifying the reset event in the dropdown."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
     }, {
       "method": "vegaSearchTrigger",
       "name": "vegaSearchTrigger",
@@ -1291,6 +1361,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "listRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "resetRenderer", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "groupLevelRenderer", void 0);
@@ -1342,6 +1415,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "dropdownClickEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDropdown.prototype, "resetEventEmitter", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDropdown.prototype, "createEventEmitter", void 0);