@globalpayments/vega 2.87.0 → 2.88.0

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/controllers/vega-date-picker-calendar-size-controller.js

@@ -0,0 +1,46 @@
+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 } from 'vega-slimmer/core';
+import responsiveFormatFacade from '../../../../../helpers/formatter/responsive-map-formatter/responsive-format-facade';
+import { PageResizeObserverSlimmer } from '../../../../../helpers/slimmers/page-resize-observer-slimmer';
+/**
+ * Controller for managing the size of the Vega date picker calendar.
+ */
+export class VegaDatePickerCalendarSizeController extends PageResizeObserverSlimmer {
+  constructor() {
+    super({
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      callback: () => {
+        this.currentSize = this.getCurrentSize();
+      },
+    });
+  }
+  /**
+   * Updates the current size of the date picker calendar whenever the component is about to load or when the size prop changes.
+   */
+  updateCurrentSize() {
+    this.currentSize = this.getCurrentSize();
+  }
+  /**
+   * Returns the current size of the date picker calendar, formatted as a DatePickerCalendarSizeType.
+   *
+   * @returns {DatePickerCalendarSizeType} The current size of the date picker calendar.
+   */
+  getCurrentSize() {
+    return responsiveFormatFacade.formatCustom(this.size);
+  }
+}
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarSizeController.prototype, "size", void 0);
+__decorate([
+  MapToComponentField({ writable: true })
+], VegaDatePickerCalendarSizeController.prototype, "currentSize", void 0);
+__decorate([
+  MapToComponentMethod('componentWillLoad'),
+  MapToComponentMethod('watchSize')
+], VegaDatePickerCalendarSizeController.prototype, "updateCurrentSize", null);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-calendar-header-render.js

@@ -51,18 +51,19 @@ export class VegaDatePickerCalendarHeaderRenderer extends VegaSlimmer {
       }, size: this.getNavigationIconSize(), iconColor: isDisabled ? 'text-disabled' : 'text-link', disabled: isDisabled }));
   }
   renderToday() {
-    const hasLabel = this.isDualMonths && this.size !== 'small';
+    const hasLabel = this.isDualMonths && this.currentSize !== 'small';
     return (h("vega-button-link", { class: {
         'button-today': true,
         'with-label': hasLabel,
       }, "data-aria-label": this.translationSlimmer.t('Today'), label: hasLabel ? this.translationSlimmer.t('Today') : '', ref: (ref) => {
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, () => {
           this.currentPeriodController.updateCalendarPeriod(new MonthPeriod(this.today, true, this.timezone));
+          this.todayClickEventEmitter.emit(this.today.toString());
         });
-      }, size: this.size === 'large' ? 'default' : 'small', icon: VegaInternalIconManager.getIconKey('bulls-eye') }));
+      }, size: this.currentSize === 'large' ? 'default' : 'small', icon: VegaInternalIconManager.getIconKey('bulls-eye') }));
   }
   getNavigationIconSize() {
-    if (this.size === 'large')
+    if (this.currentSize === 'large')
       return 'small';
     return 'extra-small';
   }
@@ -97,10 +98,13 @@ __decorate([
 ], VegaDatePickerCalendarHeaderRenderer.prototype, "minCalendarDate", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarHeaderRenderer.prototype, "size", void 0);
+], VegaDatePickerCalendarHeaderRenderer.prototype, "currentSize", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarHeaderRenderer.prototype, "timezone", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarHeaderRenderer.prototype, "isDualMonths", void 0);
+__decorate([
+  MapToComponentField()
+], VegaDatePickerCalendarHeaderRenderer.prototype, "todayClickEventEmitter", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-calendar-year-month-switcher-renderer.js

@@ -99,13 +99,13 @@ export class VegaDatePickerCalendarYearMonthSwitcherRenderer extends VegaSlimmer
   }
   renderCurrentMonth() {
     const label = this.translationSlimmer.t(this.currentPeriod.current.getMonthName());
-    return this.size === 'small' && this.showYearMonthDropdowns ? (h("vega-button-link", { class: "small-month-item-name", size: "small", label: label })) : (h("div", { class: "month-item-name", role: this.showYearMonthDropdowns ? 'button' : undefined, tabIndex: this.showYearMonthDropdowns ? 0 : undefined, "aria-label": this.showYearMonthDropdowns ? label : undefined, onKeyDown: this.showYearMonthDropdowns ? createEnterKeyHandlerToTriggerClick() : undefined },
+    return this.currentSize === 'small' && this.showYearMonthDropdowns ? (h("vega-button-link", { class: "small-month-item-name", size: "small", label: label })) : (h("div", { class: "month-item-name", role: this.showYearMonthDropdowns ? 'button' : undefined, tabIndex: this.showYearMonthDropdowns ? 0 : undefined, "aria-label": this.showYearMonthDropdowns ? label : undefined, onKeyDown: this.showYearMonthDropdowns ? createEnterKeyHandlerToTriggerClick() : undefined },
       h("span", null, label),
       this.renderDropdownSwitchIcon()));
   }
   renderCurrentYear() {
     const label = this.currentPeriod.current.year.toString();
-    return this.size === 'small' && this.showYearMonthDropdowns ? (h("vega-button-link", { class: "small-month-item-year", size: "small", label: label })) : (h("div", { class: "month-item-year", role: this.showYearMonthDropdowns ? 'button' : undefined, tabIndex: this.showYearMonthDropdowns ? 0 : undefined, "aria-label": this.showYearMonthDropdowns ? label : undefined, onKeyDown: this.showYearMonthDropdowns ? createEnterKeyHandlerToTriggerClick() : undefined },
+    return this.currentSize === 'small' && this.showYearMonthDropdowns ? (h("vega-button-link", { class: "small-month-item-year", size: "small", label: label })) : (h("div", { class: "month-item-year", role: this.showYearMonthDropdowns ? 'button' : undefined, tabIndex: this.showYearMonthDropdowns ? 0 : undefined, "aria-label": this.showYearMonthDropdowns ? label : undefined, onKeyDown: this.showYearMonthDropdowns ? createEnterKeyHandlerToTriggerClick() : undefined },
       h("span", null, label),
       this.renderDropdownSwitchIcon()));
   }
@@ -156,7 +156,7 @@ __decorate([
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentPeriod", void 0);
 __decorate([
   MapToComponentField()
-], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "size", void 0);
+], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "currentSize", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerCalendarYearMonthSwitcherRenderer.prototype, "mode", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/slimmers/renderers/vega-date-picker-month-item-renderer.js

@@ -127,9 +127,6 @@ __decorate([
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "fillContainer", void 0);
-__decorate([
-  MapToComponentField()
-], VegaDatePickerMonthItemRenderer.prototype, "size", void 0);
 __decorate([
   MapToComponentField()
 ], VegaDatePickerMonthItemRenderer.prototype, "isDualMonths", void 0);

package/dist/collection/components/vega-date-picker/vega-date-picker-calendar/vega-date-picker-calendar.js

@@ -14,7 +14,7 @@ import { VegaDatePickerCalendarCurrentPeriodController } from './slimmers/contro
 import { VegaDatePickerCalendarTodayController } from './slimmers/controllers/vega-date-picker-calendar-today-controller';
 import { sanitizeVegaComponent } from '../../../utils/component';
 import { VegaDatePickerMonthItemRenderer } from './slimmers/renderers/vega-date-picker-month-item-renderer';
-import { VegaClear, VegaMonthYearChange, VegaSelectionChange, } from '../../../helpers/event-manager/event-id/vega-event-id';
+import { VegaClear, VegaMonthYearChange, VegaSelectionChange, VegaTodayClick, } from '../../../helpers/event-manager/event-id/vega-event-id';
 import { createEventEmitSlimmer, } from '../../../helpers/event-manager/slimmers/event-emit-slimmer';
 import { VegaDatePickerCalendarSelectionController } from './slimmers/controllers/vega-date-picker-calendar-selection-controller';
 import { VegaDatePickerCalendarMinMaxDateController } from './slimmers/controllers/vega-date-picker-calendar-min-max-date-controller';
@@ -23,6 +23,7 @@ import { DeviceType } from '../../../types/ui.type';
 import { getDeviceType } from '../../../utils/ui';
 import { VegaDatePickerCalendarHeaderRenderer } from './slimmers/renderers/vega-date-picker-calendar-header-render';
 import { VegaDatePickerCalendarIsDualMonthsController } from './slimmers/controllers/vega-date-picker-calendar-is-dual-months-controller';
+import { VegaDatePickerCalendarSizeController } from './slimmers/controllers/vega-date-picker-calendar-size-controller';
 /**
  * @vegaVersion 2.0.0
  */
@@ -41,12 +42,16 @@ export class VegaDatePickerCalendar {
     this.yearMonthSwitcherRender = new VegaDatePickerCalendarYearMonthSwitcherRenderer();
     this.allowRepickController = new VegaDatePickerCalendarAllowRepickController();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.calendarSizeController = new VegaDatePickerCalendarSizeController();
     this.clearEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaClear);
     this.monthYearChangeEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaMonthYearChange);
     this.vegaSelectionChangeEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaSelectionChange);
+    this.todayClickEventEmitter = createEventEmitSlimmer(VegaDatePickerCalendar, VegaTodayClick);
+    this.currentSize = 'regular';
     this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
     /**
-     * Renders the calendar picker in different sizes. Defaults to regular size
+     * Renders the calendar picker in different sizes. Defaults to regular size.
+     *    Responsive sizing is supported starting with version 2.88.0.
      *
      * @vegaVersion 2.72.0
      */
@@ -140,6 +145,9 @@ export class VegaDatePickerCalendar {
   watchMinCalendarDate() {
     methodPlaceholder();
   }
+  watchSize() {
+    methodPlaceholder();
+  }
   watchMode() {
     methodPlaceholder();
   }
@@ -176,7 +184,7 @@ export class VegaDatePickerCalendar {
   }
   render() {
     return sanitizeVegaComponent(h(Host, { class: {
-        [this.size]: true,
+        [this.currentSize]: true,
         [this.mode]: true,
         'fill-container': this.fillContainer,
         'mobile': this.isMobileDevice,
@@ -196,9 +204,13 @@ export class VegaDatePickerCalendar {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DatePickerCalendarSizeType",
-        "resolved": "\"large\" | \"regular\" | \"small\"",
+        "original": "ResponsiveType<DatePickerCalendarSizeType>",
+        "resolved": "\"large\" | \"regular\" | \"small\" | { S?: DatePickerCalendarSizeType; M?: DatePickerCalendarSizeType; L?: DatePickerCalendarSizeType; XL?: DatePickerCalendarSizeType; default?: DatePickerCalendarSizeType; }",
         "references": {
+          "ResponsiveType": {
+            "location": "import",
+            "path": "../../../types/ui.type"
+          },
           "DatePickerCalendarSizeType": {
             "location": "import",
             "path": "../types"
@@ -212,7 +224,7 @@ export class VegaDatePickerCalendar {
             "name": "vegaVersion",
             "text": "2.72.0"
           }],
-        "text": "Renders the calendar picker in different sizes. Defaults to regular size"
+        "text": "Renders the calendar picker in different sizes. Defaults to regular size.\n   Responsive sizing is supported starting with version 2.88.0."
       },
       "attribute": "size",
       "reflect": false,
@@ -539,6 +551,7 @@ export class VegaDatePickerCalendar {
     }
   }; }
   static get states() { return {
+    "currentSize": {},
     "isMobileDevice": {},
     "today": {},
     "currentPeriod": {},
@@ -675,6 +688,45 @@ export class VegaDatePickerCalendar {
         "resolved": "string | string[]",
         "references": {}
       }
+    }, {
+      "method": "vegaTodayClick",
+      "name": "vegaTodayClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "An event emitter notifying the today button is clicked in the date picker."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "todayClick",
+      "name": "todayClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "name": "eventSemantics",
+            "text": "namespace:native"
+          }, {
+            "name": "vegaVersion",
+            "text": "2.88.0"
+          }],
+        "text": "An event emitter notifying the today button is clicked in the date picker."
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
     }]; }
   static get methods() { return {
     "reset": {
@@ -736,6 +788,9 @@ export class VegaDatePickerCalendar {
     }, {
       "propName": "minCalendarDate",
       "methodName": "watchMinCalendarDate"
+    }, {
+      "propName": "size",
+      "methodName": "watchSize"
     }, {
       "propName": "mode",
       "methodName": "watchMode"
@@ -795,6 +850,9 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePickerCalendar.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "calendarSizeController", void 0);
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePickerCalendar.prototype, "clearEventEmitter", void 0);
@@ -804,3 +862,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaDatePickerCalendar.prototype, "vegaSelectionChangeEventEmitter", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaDatePickerCalendar.prototype, "todayClickEventEmitter", void 0);

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

@@ -69,4 +69,41 @@ label:first-of-type {
   display: inline-block;
   margin-left: 4px;
   vertical-align: top;
+}
+
+.optional {
+  margin-left: 4px;
+  font-family: "Inter", sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+  letter-spacing: 0px;
+  color: rgba(var(--v-text-secondary, 107, 116, 125, 1));
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .optional {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1439px) {
+  .optional {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0px;
+  }
+}
+@media screen and (min-width: 1440px) and (max-width: 9999px) {
+  .optional {
+    font-family: "Inter", sans-serif;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+    letter-spacing: 0px;
+  }
 }

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

@@ -11,6 +11,7 @@ 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';
 /**
  * @vegaVersion 1.10.0
  */
@@ -25,6 +26,7 @@ export class VegaFieldLabel {
     this.suffixButtonClickEventEmitter = createEventEmitSlimmer(VegaFieldLabel, VegaLabelButtonClick);
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
     this.suffixElementRenderer = new VegaFieldLabelSuffixElementRenderer();
+    this.translationSlimmer = new TranslationSlimmer();
     /**
      * @deprecated Please use `suffixButtonConfig` instead
      *
@@ -69,6 +71,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}
@@ -91,6 +103,7 @@ export class VegaFieldLabel {
       }, onClick: this.handleClick },
       h("label", null,
         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 +236,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 +337,6 @@ __decorate([
 __decorate([
   InjectVegaSlimmer()
 ], VegaFieldLabel.prototype, "suffixElementRenderer", 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-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-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);