genesys-spark-components 4.73.1 → 4.74.0

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/gux-form-field-text-like.js

@@ -33,6 +33,7 @@ export class GuxFormFieldTextLike {
         this.clearable = undefined;
         this.labelPosition = undefined;
         this.loading = false;
+        this.indicatorMark = 'required';
         this.hasPrefix = undefined;
         this.hasSuffix = undefined;
         this.computedLabelPosition = 'above';
@@ -111,15 +112,15 @@ export class GuxFormFieldTextLike {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '487f7ecc746cb8d202913f5726898d322ae4f5b4', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '94426d1118d18c24e6c8402667d8339adc9f35da', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '47f740f8dfedaf841341a041f751a5a9ba96b7a4', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '490873910e0a5f6622c8b5551452128af78bb5d7', variant: "required", required: this.required }), h("slot", { key: '0518c49fc7c0d869da118f398f816176a56952cf', name: "label-info" })), h("div", { key: '0811c689d98b6bef5af8b4fbdc4c7f26c3581b8f', class: "gux-input-and-error-container" }, h("div", { key: 'dc078ab42d4ca7713f2c8a6df68c3878beb50040', class: {
+        return (h(GuxFormFieldContainer, { key: 'beb98cc29449e9cc02943e698df8717b45114570', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'eedcf5016706b108e545817c98745ce7c52d161f', required: this.required, position: this.computedLabelPosition }, h("slot", { key: 'bf7acfde961586ee95edfdae121b5e280ee49af2', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '56a5c9ae8f38704d6de079b969ddc99089b67de2', variant: this.indicatorMark, required: this.required }), h("slot", { key: '72d14572d6103e889ed27846be8e2141a174498f', name: "label-info" })), h("div", { key: 'fc34558ec02f718f85f739a253f735e3487e7fd5', class: "gux-input-and-error-container" }, h("div", { key: 'd6ad5d2b24eeb0b3dcf234c4fe76cdc4b1bdf343', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '84730c4d68469d6ff6ff4bb7739fc909d262878a', class: {
+            } }, h("div", { key: 'd882278f448c04225ec3cca78767c08da0c868f3', class: {
                 'gux-input-container': true,
                 'gux-disabled': this.disabled,
                 'gux-has-prefix': this.hasPrefix,
                 'gux-has-suffix': this.hasSuffix
-            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: '0ae9a5497c1fc78616ee9540a093915a4726ec07', name: "prefix" }), h("slot", { key: '2ab922a873100294f1ea0a8d051b81235b4b3f94', name: "input" }), this.renderRadialLoading(), h("slot", { key: 'f6dc07482856ed60dbc9edf4bd0da4fb677bd71f', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '41b0e9de0bc67c55bb4add0264a011aff5ac5208', show: this.hasError }, h("slot", { key: '7221f73bcbd7a30cb097e60905f3d108a811cfea', name: "error" })), h(GuxFormFieldHelp, { key: '5eb33e2fa8dd0f9a92283e86fcec7a01a10bff7b', show: !this.hasError && this.hasHelp }, h("slot", { key: 'adc4801aac0b4a6249b3ced99b38dd643e94be4d', name: "help" })))));
+            }, onClick: () => focusInputElement(this.input) }, h("slot", { key: 'ded12095ab3b9133bee6f5069451e1d831146ea4', name: "prefix" }), h("slot", { key: '9d48cfd6c49f2be1fd1e8a8f01ebba2bcf24cd0a', name: "input" }), this.renderRadialLoading(), h("slot", { key: 'e4b8cbfa3e5cffb1e2aefe3d8e566c0ea8540c84', name: "suffix" }), this.clearable && this.hasContent && !this.disabled && (h("gux-form-field-input-clear-button", { onClick: () => clearInput(this.input) })))), h(GuxFormFieldError, { key: '1c763a24f321d889f596085e032a3cd9f915c437', show: this.hasError }, h("slot", { key: 'a9cfeb2acdd78458405f1d69e97abaf81c09b975', name: "error" })), h(GuxFormFieldHelp, { key: '2f789dd4ef977e7f9ec53a02991055c3b8e5b977', show: !this.hasError && this.hasHelp }, h("slot", { key: '5ae7376190c8c720fbc2c52eaedea99a717b78d8', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -221,6 +222,30 @@ export class GuxFormFieldTextLike {
                 "attribute": "loading",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "indicatorMark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxFormFieldIndicatorMark",
+                    "resolved": "\"optional\" | \"required\"",
+                    "references": {
+                        "GuxFormFieldIndicatorMark": {
+                            "location": "import",
+                            "path": "../../gux-form-field.types",
+                            "id": "src/components/stable/gux-form-field/gux-form-field.types.ts::GuxFormFieldIndicatorMark"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field indicator mark which can show *, (optional) or blank\nDefaults to required. When set to required, the component will display * for required fields and blank for optional\nWhen set to optional, the component will display (optional) for optional and blank for required."
+                },
+                "attribute": "indicator-mark",
+                "reflect": false,
+                "defaultValue": "'required'"
             }
         };
     }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-text-like/tests/gux-form-field-text-like.spec.js

@@ -156,5 +156,19 @@ describe('gux-form-field-text-like', () => {
                 });
             });
         });
+        describe('indicator marks', () => {
+            ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const html = `
+              <gux-form-field-text-like ${indicatorMark}>
+                <input slot="input" type="text" value="Sample text"/>
+                <label slot="label">Label</label>
+              </gux-form-field-text-like>
+            `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+        });
     });
 });

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-textarea/gux-form-field-textarea.js

@@ -29,6 +29,7 @@ export class GuxFormFieldTextarea {
     constructor() {
         this.resize = undefined;
         this.labelPosition = undefined;
+        this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
         this.disabled = undefined;
         this.required = true;
@@ -87,12 +88,12 @@ export class GuxFormFieldTextarea {
         }
     }
     render() {
-        return (h(GuxFormFieldContainer, { key: '198dd2ef1c21a3ac350fae1a8d88749b9117159e', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: '56993b85dcd05c1cd5ce35ac94e230a6f34a32f0', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '53f8676fe7e657cd62a1e743d4c106d1aafc01cb', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '1a04cf15e5163c26dcc7cb5e7a82dffe913df67c', variant: "required", required: this.required }), h("slot", { key: 'e9d7f02796566ab0f061b0e1a29e8bcba5b24681', name: "label-info" })), h("div", { key: '372fcac508ebebf2a15591a464cde415c820de8b', class: "gux-input-and-error-container" }, h("div", { key: '21b6454fae678bc21af948c1a8e901cb3cfc5f5b', ref: el => (this.textareaContainerElement = el), class: {
+        return (h(GuxFormFieldContainer, { key: 'd39811ffbb0bccc3055e42e8f8d9e9318a0b9d38', labelPosition: this.computedLabelPosition }, h(GuxFormFieldLabel, { key: 'ce0d140dda0b88c6a144aec28e92b5feddf6b352', required: this.required, position: this.computedLabelPosition }, h("slot", { key: '5373fa879b15f5dc8963a4708f3082705978ab9c', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '61ef2cf37235239dd3ecac077ca7d1d20442ab23', variant: this.indicatorMark, required: this.required }), h("slot", { key: '6420554f988a513a381d5c950abfba759aaa0688', name: "label-info" })), h("div", { key: '92903c916b70cd57b0962afd59f6abb0125a60ef', class: "gux-input-and-error-container" }, h("div", { key: '9edf94ff62e26d59710b067a3b35096b1a5f22ec', ref: el => (this.textareaContainerElement = el), class: {
                 'gux-input': true,
                 [`gux-resize-${this.resize}`]: true,
                 'gux-disabled': this.disabled,
                 'gux-input-error': this.hasError
-            } }, h("slot", { key: '1931194aab6fe3fbc03ab3aa446a56f4f3b9f65e', name: "input" })), h(GuxFormFieldError, { key: '0e875ab321f782677663f0b16ebded0e2a9ea684', show: this.hasError }, h("slot", { key: '419ad3f0277147bec4338ae3f4d3535cc3972273', name: "error" })), h(GuxFormFieldHelp, { key: '0e91d7aa554adbf00fc8092d391b8262b18b597e', show: !this.hasError && this.hasHelp }, h("slot", { key: '9a84fd0b9ccb1a51649f976e03f3adac029de0e6', name: "help" })))));
+            } }, h("slot", { key: 'caf68192f180b2bcb62621ae2b930f8e039c6b74', name: "input" })), h(GuxFormFieldError, { key: 'b6875b9559d10e2c086509fe4bad0f117762c658', show: this.hasError }, h("slot", { key: '8816580fa2953be7406e53a8df1809f0c907f23c', name: "error" })), h(GuxFormFieldHelp, { key: '9aee948c8db811d37b3ad6fa0c28e25814de59cd', show: !this.hasError && this.hasHelp }, h("slot", { key: '9fb4def3df2996fe2ba39c9a708f35a9bdc32edf', name: "help" })))));
     }
     get variant() {
         const labelPositionVariant = this.labelPosition
@@ -188,6 +189,30 @@ export class GuxFormFieldTextarea {
                 },
                 "attribute": "label-position",
                 "reflect": false
+            },
+            "indicatorMark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxFormFieldIndicatorMark",
+                    "resolved": "\"optional\" | \"required\"",
+                    "references": {
+                        "GuxFormFieldIndicatorMark": {
+                            "location": "import",
+                            "path": "../../gux-form-field.types",
+                            "id": "src/components/stable/gux-form-field/gux-form-field.types.ts::GuxFormFieldIndicatorMark"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field indicator mark which can show *, (optional) or blank\nDefaults to required. When set to required, the component will display * for required fields and blank for optional\nWhen set to optional, the component will display (optional) for optional and blank for required."
+                },
+                "attribute": "indicator-mark",
+                "reflect": false,
+                "defaultValue": "'required'"
             }
         };
     }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-textarea/tests/gux-form-field-textarea.spec.js

@@ -62,6 +62,20 @@ describe('gux-form-field-textarea', () => {
                 });
             });
         });
+        describe('indicator marks', () => {
+            ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const html = `
+              <gux-form-field-textarea ${indicatorMark}>
+                <textarea slot="input"></textarea>
+                <label slot="label">Label</label>
+              </gux-form-field-textarea>
+            `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+        });
         describe('help', () => {
             it('should render component as expected', async () => {
                 const html = `

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-picker/gux-form-field-time-picker.js

@@ -28,6 +28,7 @@ import componentResources from "./i18n/en.json";
 export class GuxFormFieldTimePicker {
     constructor() {
         this.labelPosition = undefined;
+        this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
         this.disabled = undefined;
         this.required = undefined;
@@ -92,14 +93,14 @@ export class GuxFormFieldTimePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: 'f69d3c2a0d279577d1a77356c469eec18ab50b43', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '0e06d1c0e16394ea157f3688e3c7f1b5102244fa' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: '4523324a01c3a70554c86c310e93c718de91b91a', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '78bd938da1f045af25101f37c74e662b6c186bde', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '1d7a80f4496bef8058c34566b0272a26a4e012d9', variant: "required", required: this.required }), h("slot", { key: '892f6fc6e39c6891aee2516100f95b886bcfd103', name: "label-info" })), h("div", { key: '15d68c6057d0df3784a131c01bfd9da851917775', class: "gux-input-and-error-container" }, h("div", { key: '620214bbf17854f16a1af6c45365a9c70fc2636e', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '807ca888be1318d9c630856017124378e121c7e2', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '7b179b2708a7c5bc7da0890188833da31b983dec' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'bba4cf762a128bc2f261c317de46e25a0e7e8039', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '54a3a9ea4fc256d763cfc49b58012a270f05497f', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '02ef21d3229a8bed1683c6030f17073cd2c32e2f', variant: this.indicatorMark, required: this.required }), h("slot", { key: 'f27f3814d92b789110ee2cd623380532b01c212c', name: "label-info" })), h("div", { key: 'edc9597ad40521a06e30aa05dbc004ed4e1c3c99', class: "gux-input-and-error-container" }, h("div", { key: 'd0e4760ef11117c5419d83840853a7c3a55d2883', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError
-            } }, h("div", { key: '3d6ad7bf30d8c3621896fadc515ade0c39a8108c', class: {
+            } }, h("div", { key: '01e3c4cc1d2830a893ba74efac5d4ceb8f68e75f', class: {
                 'gux-time-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: 'e0800e204437bfd92905bb7a0b8881eb4d81ed9e' }))), h(GuxFormFieldError, { key: '384273863f21240885684450c587cb1367feb827', show: this.hasError }, h("slot", { key: '2b301d47a375ed06c28f19a055ee26a2ada38aa4', name: "error" })), h(GuxFormFieldHelp, { key: 'b87d4e91887e0459b4302fa0f5c3f9dc2d4d88e0', show: !this.hasError && this.hasHelp }, h("slot", { key: '65792417d534a1dec4c05b879fc72db1b60f3f8e', name: "help" })))));
+            } }, h("slot", { key: '123ef8fa7f589f3b835bb83eb3b51055002a7508' }))), h(GuxFormFieldError, { key: '4280815a94277a7e0e5a599d1e1935ee8909cf8c', show: this.hasError }, h("slot", { key: '2943c7a654a3b34eb2c37930e4e000020d222ba2', name: "error" })), h(GuxFormFieldHelp, { key: '9ed9ef48efe9073b223ec0e80c8ae9d92d545ce7', show: !this.hasError && this.hasHelp }, h("slot", { key: 'b14414ca1b2afb6cc9e2fa2449d345363073b08e', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {
@@ -165,6 +166,30 @@ export class GuxFormFieldTimePicker {
                 },
                 "attribute": "label-position",
                 "reflect": false
+            },
+            "indicatorMark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxFormFieldIndicatorMark",
+                    "resolved": "\"optional\" | \"required\"",
+                    "references": {
+                        "GuxFormFieldIndicatorMark": {
+                            "location": "import",
+                            "path": "../../gux-form-field.types",
+                            "id": "src/components/stable/gux-form-field/gux-form-field.types.ts::GuxFormFieldIndicatorMark"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field indicator mark which can show *, (optional) or blank\nDefaults to required. When set to required, the component will display * for required fields and blank for optional\nWhen set to optional, the component will display (optional) for optional and blank for required."
+                },
+                "attribute": "indicator-mark",
+                "reflect": false,
+                "defaultValue": "'required'"
             }
         };
     }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-picker/tests/gux-form-field-time-picker.spec.js

@@ -34,6 +34,20 @@ describe('gux-form-field-time-picker', () => {
                     expect(page.root).toMatchSnapshot();
                 });
             });
+            describe('indicator marks', () => {
+                ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
+                    it(`should render component as expected (${index + 1})`, async () => {
+                        const html = `
+                <gux-form-field-time-picker ${indicatorMark}>
+                  <gux-time-picker value="07:00"></gux-time-picker>
+                  <label slot="label">Label</label>
+                </gux-form-field-time-picker>
+              `;
+                        const page = await newSpecPage({ components, html, language });
+                        expect(page.root).toMatchSnapshot();
+                    });
+                });
+            });
         });
         describe('intervals', () => {
             ['interval="15"', 'interval="30"', 'interval="60"'].forEach((componentAttribute, index) => {

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/gux-form-field-time-zone-picker.js

@@ -28,6 +28,7 @@ import componentResources from "./i18n/en.json";
 export class GuxFormFieldTimeZonePicker {
     constructor() {
         this.labelPosition = undefined;
+        this.indicatorMark = 'required';
         this.computedLabelPosition = 'above';
         this.disabled = undefined;
         this.required = undefined;
@@ -93,13 +94,13 @@ export class GuxFormFieldTimeZonePicker {
     }
     render() {
         var _a;
-        return (h(GuxFormFieldFieldsetContainer, { key: '5ecc8ac72d7e5228b769822c8a95a5cb08617a8a', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '76c3f3de71b2c2ae3c2745a06e3dcc6fdca1e403' }, (_a = this.label) === null || _a === void 0 ? void 0 :
-            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: 'a9728f2b5c0f4489e7abc42fde4541b6bcb5ec26', position: this.computedLabelPosition, required: this.required }, h("slot", { key: 'ad2991e2583d2ce992ae3676d5248ab4deac01aa', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '2013e893e4f67f165f99ffe85b0762a42ab0a191', variant: "required", required: this.required }), h("slot", { key: '212479f9a5a8df0668c16f00764a6784a8071de2', name: "label-info" })), h("slot", { key: 'e72de942358d617738857c1a8eb9dc41a5f0d71b', name: "label-info" }), h("div", { key: '2bc9186a753716cb24024cf68bccb3f7949c6997', class: "gux-input-and-error-container" }, h("div", { key: 'c93c6400659b86de793a3158353f81d4f3777cd1', class: {
+        return (h(GuxFormFieldFieldsetContainer, { key: '9ac7aa7d22c07fac90fe60d4689c9f66c753dddc', labelPosition: this.computedLabelPosition }, h(GuxFormFieldScreenreaderLabel, { key: '150c662ed536198b05d5ab1c327231027e85d531' }, (_a = this.label) === null || _a === void 0 ? void 0 :
+            _a.textContent, this.renderText(this.getI18nValue('required'), this.required), this.renderText(getSlotTextContent(this.root, 'error'), this.hasError), this.renderText(getSlotTextContent(this.root, 'label-info'), this.hasLabelInfo)), h(GuxFormFieldVisualLabel, { key: '8a1dd247b58194ede227ef623c202c890facca94', position: this.computedLabelPosition, required: this.required }, h("slot", { key: '62b5ed2595464018236fc3d783a79433468a24fa', name: "label", onSlotchange: () => this.setLabel() }), h("gux-form-field-label-indicator", { key: '66a69b9e02398a1ef6954a8e0376e61fd58a11b8', variant: this.indicatorMark, required: this.required }), h("slot", { key: '0e63e981ab0af5b61604c7893e250ead130f9d7d', name: "label-info" })), h("slot", { key: '880e4bda7852aa9d39e9c2b2b6ef6579482f5e40', name: "label-info" }), h("div", { key: '0645f927407893968861e085d2f0362f41a40dcc', class: "gux-input-and-error-container" }, h("div", { key: '210bf7b9426a1fd3700fa7716b1982b8e8058fbc', class: {
                 'gux-input': true,
                 'gux-input-error': this.hasError,
                 'gux-time-zone-picker-container': true,
                 'gux-disabled': this.disabled
-            } }, h("slot", { key: '141e377d5046a94a252fae3636c1f568a949e83f' })), h(GuxFormFieldError, { key: 'cb623eae001f2b4fcbf39e8ce3f94fa443716fbd', show: this.hasError }, h("slot", { key: '93814cf4f166b973eb6272a46371f89647eff116', name: "error" })), h(GuxFormFieldHelp, { key: '2255a62f3d23dd5494c9ebb02bba98a3aa89c855', show: !this.hasError && this.hasHelp }, h("slot", { key: '13116c871a16e95259a887b5cd73ccdafc414a6c', name: "help" })))));
+            } }, h("slot", { key: 'a890560813c8b6e4151518c7dd1f16dac58b9b87' })), h(GuxFormFieldError, { key: '93f5447ff575090900a051ab86a0a3d4ddb0b07f', show: this.hasError }, h("slot", { key: 'a69d6c7a55aa7cb8ad8a339c0163f4fc2418319f', name: "error" })), h(GuxFormFieldHelp, { key: '41285ad604a55ae2b47d878f2e5723d50c5f0bd5', show: !this.hasError && this.hasHelp }, h("slot", { key: '955959fb904c31cf622ccf3ce42e8804b49ee476', name: "help" })))));
     }
     renderText(text, condition = false) {
         if (condition) {
@@ -165,6 +166,30 @@ export class GuxFormFieldTimeZonePicker {
                 },
                 "attribute": "label-position",
                 "reflect": false
+            },
+            "indicatorMark": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GuxFormFieldIndicatorMark",
+                    "resolved": "\"optional\" | \"required\"",
+                    "references": {
+                        "GuxFormFieldIndicatorMark": {
+                            "location": "import",
+                            "path": "../../gux-form-field.types",
+                            "id": "src/components/stable/gux-form-field/gux-form-field.types.ts::GuxFormFieldIndicatorMark"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Field indicator mark which can show *, (optional) or blank\nDefaults to required. When set to required, the component will display * for required fields and blank for optional\nWhen set to optional, the component will display (optional) for optional and blank for required."
+                },
+                "attribute": "indicator-mark",
+                "reflect": false,
+                "defaultValue": "'required'"
             }
         };
     }

package/dist/collection/components/stable/gux-form-field/components/gux-form-field-time-zone-picker/tests/gux-form-field-time-zone-picker.spec.js

@@ -29,34 +29,53 @@ describe('gux-form-field-time-zone-picker', () => {
             ].forEach((componentAttribute, index) => {
                 it(`should render component as expected (${index + 1})`, async () => {
                     const html = `
-            <gux-form-field-time-zone-picker ${componentAttribute}>
+          <gux-form-field-time-zone-picker ${componentAttribute}>
             <gux-time-zone-picker-beta
-            value="Etc/GMT+1"
-            workspace-default="Etc/GMT"
-            local-default="America/Detroit"
-          >
-          </gux-time-zone-picker-beta>
-          <label slot="label">Select Time Zone</label>
-            </gux-form-field-time-zone-picker>
+              value="Etc/GMT+1"
+              workspace-default="Etc/GMT"
+              local-default="America/Detroit"
+            >
+            </gux-time-zone-picker-beta>
+            <label slot="label">Select Time Zone</label>
+          </gux-form-field-time-zone-picker>
           `;
                     const page = await newSpecPage({ components, html, language });
                     expect(page.root).toMatchSnapshot();
                 });
             });
         });
+        describe('indicator marks', () => {
+            ['', 'indicator-mark="optional"', 'indicator-mark="required"'].forEach((indicatorMark, index) => {
+                it(`should render component as expected (${index + 1})`, async () => {
+                    const html = `
+              <gux-form-field-time-zone-picker ${indicatorMark}>
+                <gux-time-zone-picker-beta
+                  value="Etc/GMT+1"
+                  workspace-default="Etc/GMT"
+                  local-default="America/Detroit"
+                >
+                </gux-time-zone-picker-beta>
+                <label slot="label">Select Time Zone</label>
+              </gux-form-field-time-zone-picker>
+              `;
+                    const page = await newSpecPage({ components, html, language });
+                    expect(page.root).toMatchSnapshot();
+                });
+            });
+        });
         describe('help', () => {
             it('should render component as expected', async () => {
                 const html = `
         <gux-form-field-time-zone-picker>
-        <gux-time-zone-picker-beta
-        value="Etc/GMT+1"
-        workspace-default="Etc/GMT"
-        local-default="America/Detroit"
-      >
-      </gux-time-zone-picker-beta>
-      <label slot="label">Select Time Zone</label>
-      <span slot="help">This is a help message</span>
-      </gux-form-field-time-zone-picker>
+          <gux-time-zone-picker-beta
+            value="Etc/GMT+1"
+            workspace-default="Etc/GMT"
+            local-default="America/Detroit"
+          >
+          </gux-time-zone-picker-beta>
+          <label slot="label">Select Time Zone</label>
+          <span slot="help">This is a help message</span>
+        </gux-form-field-time-zone-picker>
         `;
                 const page = await newSpecPage({ components, html, language });
                 expect(page.root).toMatchSnapshot();
@@ -67,16 +86,16 @@ describe('gux-form-field-time-zone-picker', () => {
                 const html = `
         <gux-form-field-time-zone-picker>
           <gux-time-zone-picker-beta
-          value="Etc/GMT+1"
-          workspace-default="Etc/GMT"
-          local-default="America/Detroit"
-        >
-        </gux-time-zone-picker-beta>
-        <label slot="label">Select Time Zone</label>
-        <gux-label-info-beta slot="label-info">
-          <span slot="content">This is some tooltip text</span>
-        </gux-label-info-beta>
-      </gux-form-field-time-zone-picker>
+            value="Etc/GMT+1"
+            workspace-default="Etc/GMT"
+            local-default="America/Detroit"
+          >
+          </gux-time-zone-picker-beta>
+          <label slot="label">Select Time Zone</label>
+          <gux-label-info-beta slot="label-info">
+            <span slot="content">This is some tooltip text</span>
+          </gux-label-info-beta>
+        </gux-form-field-time-zone-picker>
         `;
                 const page = await newSpecPage({ components, html, language });
                 expect(page.root).toMatchSnapshot();
@@ -86,15 +105,15 @@ describe('gux-form-field-time-zone-picker', () => {
             it('should render component as expected', async () => {
                 const html = `
           <gux-form-field-time-zone-picker>
-          <gux-time-zone-picker-beta
-          value="Etc/GMT+1"
-          workspace-default="Etc/GMT"
-          local-default="America/Detroit"
-        >
-        </gux-time-zone-picker-beta>
-        <label slot="label">Select Time Zone</label>
-        <span slot="error">This is an error message</span>
-        </gux-form-field-time-zone-picker>
+            <gux-time-zone-picker-beta
+              value="Etc/GMT+1"
+              workspace-default="Etc/GMT"
+              local-default="America/Detroit"
+            >
+            </gux-time-zone-picker-beta>
+            <label slot="label">Select Time Zone</label>
+            <span slot="error">This is an error message</span>
+          </gux-form-field-time-zone-picker>
           `;
                 const page = await newSpecPage({ components, html, language });
                 expect(page.root).toMatchSnapshot();
@@ -105,13 +124,13 @@ describe('gux-form-field-time-zone-picker', () => {
                 it(`should render component as expected (${index + 1})`, async () => {
                     const html = `
             <gux-form-field-time-zone-picker>
-            <gux-time-zone-picker-beta
-            value="Etc/GMT+1"
-            workspace-default="Etc/GMT"
-            local-default="America/Detroit"
-            ${inputAttribute}
-          >
-          </gux-time-zone-picker-beta>
+              <gux-time-zone-picker-beta
+                value="Etc/GMT+1"
+                workspace-default="Etc/GMT"
+                local-default="America/Detroit"
+                ${inputAttribute}
+              >
+              </gux-time-zone-picker-beta>
             </gux-form-field-time-zone-picker>
             `;
                     const page = await newSpecPage({ components, html, language });

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/gux-form-field-label-indicator.css

@@ -1,3 +1,12 @@
 .gux-form-field-label-indicator-required {
   color: var(--gse-ui-formControl-label-indicator-requiredColor);
+}
+
+.gux-form-field-label-indicator-optional {
+  margin-inline-start: var(--gse-ui-formControl-label-gap);
+  font-family: var(--gse-ui-formControl-label-indicator-text-fontFamily);
+  font-size: var(--gse-ui-formControl-label-indicator-text-fontSize);
+  font-weight: var(--gse-ui-formControl-label-indicator-text-fontWeight);
+  line-height: var(--gse-ui-formControl-label-indicator-text-lineHeight);
+  color: var(--gse-ui-formControl-label-indicator-optionalColor);
 }

package/dist/collection/components/stable/gux-form-field/helper-components/gux-form-field-optional-indicator/gux-form-field-label-indicator.js

@@ -1,15 +1,21 @@
 import { h } from "@stencil/core";
 import { trackComponent } from "../../../../../utils/tracking/usage";
+import { buildI18nForComponent } from "../../../../../i18n";
+import translationResources from "./i18n/en.json";
 export class GuxFormFieldLabelIndicator {
     constructor() {
         this.variant = 'required';
         this.required = false;
     }
-    componentWillLoad() {
+    async componentWillLoad() {
         trackComponent(this.root, { variant: this.variant });
+        this.i18n = await buildI18nForComponent(this.root, translationResources);
     }
     render() {
-        if (this.variant === 'required' && this.required) {
+        if (this.variant === 'optional' && !this.required) {
+            return (h("span", { class: "gux-form-field-label-indicator-optional" }, "(", this.i18n('optional'), ")"));
+        }
+        else if (this.variant === 'required' && this.required) {
             return (h("span", { class: "gux-form-field-label-indicator-required", "aria-hidden": "true" }, "*"));
         }
         else {