@globalpayments/vega 2.87.0 → 2.89.0

package/dist/collection/components/vega-field-label/vega-field-label.js

@@ -11,6 +11,8 @@ import { createEventEmitSlimmer, } from '../../helpers/event-manager/slimmers/ev
 import { VegaClick, VegaLabelButtonClick } from '../../helpers/event-manager/event-id/vega-event-id';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { VegaFieldLabelSuffixElementRenderer } from './slimmers/renderers/vega-field-label-suffix-element-renderer';
+import { TranslationSlimmer } from '../../helpers/slimmers/translation/translation-slimmer';
+import { VegaFieldLabelLabelAnnouncementRenderer } from './slimmers/renderers/vega-field-label-label-announcement-renderer';
 /**
  * @vegaVersion 1.10.0
  */
@@ -25,6 +27,8 @@ export class VegaFieldLabel {
     this.suffixButtonClickEventEmitter = createEventEmitSlimmer(VegaFieldLabel, VegaLabelButtonClick);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.suffixElementRenderer = new VegaFieldLabelSuffixElementRenderer();
+    this.labelAnnouncementRenderer = new VegaFieldLabelLabelAnnouncementRenderer();
+    this.translationSlimmer = new TranslationSlimmer();
     /**
      * @deprecated Please use `suffixButtonConfig` instead
      *
@@ -69,6 +73,16 @@ export class VegaFieldLabel {
      * @vegaVersion 1.10.0
      */
     this.disabled = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `isFieldRequired` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.88.0
+     */
+    this.optional = false;
     /*
      * The below method is e2e-test covered in
      * @see{module:vega-field-label-vegaClick-event}
@@ -89,8 +103,13 @@ export class VegaFieldLabel {
         hidden: this.label === '',
         disabled: this.disabled,
       }, onClick: this.handleClick },
-      h("label", null,
+      this.labelAnnouncementRenderer.render(),
+      h("label", { "aria-hidden": "true" },
         h("span", { class: "vega-field-label" }, this.label),
+        !this.isFieldRequired && this.optional && (h("span", { class: "optional" },
+          "(",
+          this.translationSlimmer.t('Optional'),
+          ")")),
         h("span", { class: {
             'vega-field-label-required': true,
             'hidden': !this.isFieldRequired,
@@ -223,6 +242,30 @@ export class VegaFieldLabel {
       "attribute": "disabled",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `isFieldRequired` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get events() { return [{
@@ -300,3 +343,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaFieldLabel.prototype, "suffixElementRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFieldLabel.prototype, "labelAnnouncementRenderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaFieldLabel.prototype, "translationSlimmer", void 0);

package/dist/collection/components/vega-file-uploader/slimmers/renderers/vega-file-uploader-renderer.js

@@ -16,7 +16,7 @@ export class VegaFileUploaderRenderer extends VegaSlimmer {
    */
   render() {
     return (h(Fragment, null,
-      h("vega-field-label", { isFieldRequired: this.required, disabled: this.disabled, label: this.label }),
+      h("vega-field-label", { isFieldRequired: this.required, disabled: this.disabled, optional: this.optional, label: this.label }),
       this.vegaFileUploaderContainerRenderer.render(),
       this.hint ? h("vega-hint", null, this.hint) : null,
       this.vegaFileUploaderFileListRenderer.render()));
@@ -25,6 +25,9 @@ export class VegaFileUploaderRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaFileUploaderRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaFileUploaderRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], VegaFileUploaderRenderer.prototype, "disabled", void 0);

package/dist/collection/components/vega-file-uploader/vega-file-uploader.js

@@ -103,6 +103,16 @@ export class VegaFileUploader {
      * @vegaVersion 2.25.0
      */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.88.0
+     */
+    this.optional = false;
     /**
      * Defines custom validation rules for the File Uploader field.
      *
@@ -308,6 +318,30 @@ export class VegaFileUploader {
       "reflect": false,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "validationRules": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/vega-image-uploader/slimmers/renderers/vega-image-uploader-renderer.js

@@ -31,7 +31,7 @@ export class VegaImageUploaderRenderer extends VegaSlimmer {
       this.renderHint()));
   }
   renderLabelDom() {
-    return (h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, label: this.label }));
+    return (h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, optional: this.optional, label: this.label }));
   }
   renderContentByStatus() {
     if (this.status === 'uploading') {
@@ -85,6 +85,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaImageUploaderRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaImageUploaderRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], VegaImageUploaderRenderer.prototype, "width", void 0);

package/dist/collection/components/vega-image-uploader/vega-image-uploader.js

@@ -115,6 +115,16 @@ export class VegaImageUploader {
      * @vegaVersion 1.14.0
      */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.89.0
+     */
+    this.optional = false;
     /**
      * Specifies the validation status.
      *
@@ -372,6 +382,30 @@ export class VegaImageUploader {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "isValid": {
       "type": "boolean",
       "mutable": true,

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

@@ -38,7 +38,7 @@ export class VegaInputRenderer extends VegaSlimmer {
       : this.inputContainerRenderer.render();
   }
   renderLabelDom() {
-    return (h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonProps: this.labelSuffixButtonProps, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
+    return (h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, label: this.label, optional: this.optional, suffixButtonProps: this.labelSuffixButtonProps, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, this.handleLabelClick);
       } }));
@@ -69,6 +69,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputRenderer.prototype, "labelSuffixButtonConfig", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputRenderer.prototype, "labelButtonClickEventEmitter", void 0);

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

@@ -260,6 +260,16 @@ export class VegaInput {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.88.0
+     */
+    this.optional = false;
     /**
      * Sets the minimum allowable numeric value for the input.
      *
@@ -881,6 +891,30 @@ export class VegaInput {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "min": {
       "type": "number",
       "mutable": false,

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

@@ -47,7 +47,7 @@ export class VegaInputNumericRenderer extends VegaSlimmer {
     if (this.integerOnly) {
       maskOptions.precision = 0;
     }
-    return (h("vega-input", { value: this.value || '', showClearIcon: this.showClearIcon, disabled: this.disabled, label: this.label, hint: this.hint, required: this.required, type: "number", placeholder: this.placeholder, size: this.size === 'small' ? 'small' : 'default', prefixIcon: this.prefixIcon, ref: (ref) => {
+    return (h("vega-input", { value: this.value || '', showClearIcon: this.showClearIcon, disabled: this.disabled, label: this.label, hint: this.hint, required: this.required, optional: this.optional, type: "number", placeholder: this.placeholder, size: this.size === 'small' ? 'small' : 'default', prefixIcon: this.prefixIcon, ref: (ref) => {
         this.vegaInputRef = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (payload) => this.onInputChange(payload));
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaBlur, (payload) => this.onInputBlur(payload));
@@ -78,6 +78,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputNumericRenderer.prototype, "label", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputNumericRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputNumericRenderer.prototype, "hint", void 0);

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

@@ -148,6 +148,16 @@ export class VegaInputNumeric {
      * @vegaVersion 2.29.0
      */
     this.label = '';
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.89.0
+     */
+    this.optional = false;
     /**
      * An array of custom validation rules applied to the numeric input in
      * addition to the built-in rules (`RequiredFieldRule`, `MinNumberRule`,
@@ -576,6 +586,30 @@ export class VegaInputNumeric {
       "attribute": "required",
       "reflect": false
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "validationRules": {
       "type": "unknown",
       "mutable": false,

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

@@ -110,7 +110,7 @@ export class VegaInputPasscodeRenderer extends VegaSlimmer {
       this.hint && h("vega-hint", null, this.hint)));
   }
   renderLabel() {
-    return (h("vega-field-label", { onClick: this.focusInputPasscode, isFieldRequired: this.required, disabled: this.disabled, label: this.label }));
+    return (h("vega-field-label", { onClick: this.focusInputPasscode, isFieldRequired: this.required, disabled: this.disabled, optional: this.optional, label: this.label }));
   }
   /**
    * Find the index of the first empty input box for rendering purposes. If all boxes are filled, return -1.
@@ -192,6 +192,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputPasscodeRenderer.prototype, "valueController", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPasscodeRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentMethod('watchLengthAndInputType')
 ], VegaInputPasscodeRenderer.prototype, "watchLengthAndInputType", null);

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

@@ -127,6 +127,16 @@ export class VegaInputPasscode {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.88.0
+     */
+    this.optional = false;
     /**
      * An array of custom validation rules applied to the passcode input in
      * addition to the built-in `RequiredFieldRule`. Each rule must implement
@@ -384,6 +394,30 @@ export class VegaInputPasscode {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "validationRules": {
       "type": "unknown",
       "mutable": false,

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/vega-input-phone-number-renderer.js

@@ -24,7 +24,7 @@ export class VegaInputPhoneNumberRenderer extends VegaSlimmer {
    * @returns {HTMLVegaFieldLabelElement} An HTMLVegaFieldLabelElement is being returned.
    */
   renderLabel() {
-    return (h("vega-field-label", { onClick: this.countrySelectRenderer.openSelectDropdown, isFieldRequired: this.required, disabled: this.disabled, label: this.label }));
+    return (h("vega-field-label", { onClick: this.countrySelectRenderer.openSelectDropdown, isFieldRequired: this.required, disabled: this.disabled, optional: this.optional, label: this.label }));
   }
   /**
    * The function `renderHint` returns a label element with a hint text if the `hint` property is provided.
@@ -43,6 +43,9 @@ export class VegaInputPhoneNumberRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaInputPhoneNumberRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputPhoneNumberRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputPhoneNumberRenderer.prototype, "label", void 0);

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.js

@@ -99,6 +99,16 @@ export class VegaInputPhoneNumber {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.88.0
+     */
+    this.optional = false;
     /**
      * Specifies whether the phone number input field is disabled. When `true`,
      * both the country selector and the phone number text field become
@@ -309,6 +319,30 @@ export class VegaInputPhoneNumber {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disabled": {
       "type": "boolean",
       "mutable": false,

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

@@ -28,7 +28,7 @@ export class VegaInputRangeRenderer extends VegaSlimmer {
   render() {
     return (h(Fragment, null,
       h("vega-flex", { class: "vega-input-range-container", direction: this.stack !== 'horizontal' ? 'col' : 'row', alignItems: this.stack !== 'horizontal' ? 'start' : 'center', gap: "size-8", ref: (dom) => (this.inputRangeContainerRef = dom) },
-        h("vega-field-label", { onClick: this.inputRangeInputRenderer.focusFirstInput, isFieldRequired: this.required, disabled: this.disabled, label: this.label }),
+        h("vega-field-label", { onClick: this.inputRangeInputRenderer.focusFirstInput, isFieldRequired: this.required, optional: this.optional, disabled: this.disabled, label: this.label }),
         this.inputRangeInputRenderer.render()),
       this.renderHintDom()));
   }
@@ -49,6 +49,9 @@ export class VegaInputRangeRenderer extends VegaSlimmer {
 __decorate([
   MapToComponentField()
 ], VegaInputRangeRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputRangeRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputRangeRenderer.prototype, "disabled", void 0);

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

@@ -107,6 +107,16 @@ export class VegaInputRange {
      */
     /* eslint-disable-next-line @stencil/strict-mutable */
     this.required = false;
+    /**
+     * Indicates whether the field should be presented as optional.
+     *
+     * This property only takes effect when `required` is `false`.
+     * When `true`, an "optional" label is displayed next to the field label.
+     *
+     * @default false
+     * @vegaVersion 2.89.0
+     */
+    this.optional = false;
     /**
      * Indicates whether the current value in the field is considered valid
      *    based on the defined validation rules.
@@ -346,6 +356,30 @@ export class VegaInputRange {
       "reflect": true,
       "defaultValue": "false"
     },
+    "optional": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "false"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.89.0"
+          }],
+        "text": "Indicates whether the field should be presented as optional.\n\nThis property only takes effect when `required` is `false`.\nWhen `true`, an \"optional\" label is displayed next to the field label."
+      },
+      "attribute": "optional",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "isValid": {
       "type": "boolean",
       "mutable": true,

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

@@ -51,7 +51,7 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
           : // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
             this.selectedLabel.multiple(this.value, this.selectedItem);
         return (h("span", { class: "vega-input-select-selected" },
-          h("vega-text", { overflow: "ellipsis", tooltip: this.getSelectedLabelTooltipProps(), key: selectedLabelStr }, selectedLabelStr)));
+          h("vega-text", { overflow: "ellipsis", tooltip: this.getSelectedLabelTooltipProps(), text: selectedLabelStr, key: selectedLabelStr })));
       }
       else {
         return (h("div", { class: "vega-input-select-placeholder" }, this.translationSlimmer.t(this.placeholder)));
@@ -68,15 +68,15 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
         (typeof this.selectedLabel != 'function' && selectedLabelStr)) {
         if (typeof this.selectedLabel == 'function') {
           return (h("span", { class: "vega-input-select-selected", part: "selected-box" },
-            h("vega-text", { overflow: "ellipsis", tooltip: this.getSelectedLabelTooltipProps(), key: 
+            h("vega-text", { overflow: "ellipsis", tooltip: this.getSelectedLabelTooltipProps(), 
               // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-              selectedSourceItemItem.displayName }, 
-            // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
-            selectedSourceItemItem.displayName)));
+              text: selectedSourceItemItem.displayName, key: 
+              // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+              selectedSourceItemItem.displayName })));
         }
         else {
           return (h("span", { class: "vega-input-select-selected", part: "selected-box" },
-            h("vega-text", { overflow: "ellipsis", tooltip: this.getSelectedLabelTooltipProps(), key: selectedLabelStr }, selectedLabelStr)));
+            h("vega-text", { overflow: "ellipsis", tooltip: this.getSelectedLabelTooltipProps(), text: selectedLabelStr, key: selectedLabelStr })));
         }
       }
       else {

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

@@ -35,7 +35,7 @@ export class VegaInputSelectRenderer extends VegaSlimmer {
       this.hint && this.renderHelpMessage()));
   }
   renderLabel() {
-    return (this.label && (h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, label: this.label, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
+    return (this.label && (h("vega-field-label", { "is-field-required": this.required, disabled: this.disabled, optional: this.optional, label: this.label, suffixButtonConfig: this.labelSuffixButtonConfig, ref: (node) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaLabelButtonClick, this.handleLabelButtonClick);
       } })));
   }
@@ -55,6 +55,9 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "required", void 0);
+__decorate([
+  MapToComponentField()
+], VegaInputSelectRenderer.prototype, "optional", void 0);
 __decorate([
   MapToComponentField()
 ], VegaInputSelectRenderer.prototype, "labelSuffixButtonConfig", void 0);

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

@@ -9,6 +9,7 @@
   min-width: 0px;
   text-align: left;
   line-height: normal;
+  vertical-align: middle;
 }
 
 :host(.default) .vega-input-select-container {