udp-stencil-component-library 1.0.0

package/dist/collection/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-forms-ui.js

@@ -0,0 +1,382 @@
+import { h } from "@stencil/core";
+import { UdpFormsFieldTypeEnum } from "../enums";
+import { fontOverrideMapping, overrideFont } from "../utils";
+export class UdpFormsUi {
+    constructor() {
+        this.initialValues = {};
+        this.submitSuccessful = false;
+        this.loading = false;
+        this.isSaving = false;
+        this.saveError = null;
+        this.showAutoSaveStatus = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.titleId = 'udp-forms-title';
+        this.descriptionId = 'udp-forms-description';
+        this.validate = (values, errors) => {
+            var _a;
+            // Validate required fields
+            for (const question of ((_a = this.form) === null || _a === void 0 ? void 0 : _a.formQuestions) || []) {
+                if (question.required) {
+                    const value = values[question.name];
+                    if (!value || (typeof value === 'string' && value.trim() === '')) {
+                        errors[question.name] = 'This field is required';
+                    }
+                }
+            }
+            return errors;
+        };
+    }
+    componentDidLoad() {
+        this.overrideStyles();
+    }
+    componentDidUpdate() {
+        this.overrideStyles();
+    }
+    overrideStyles() {
+        var _a;
+        const shadowRoot = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot;
+        shadowRoot === null || shadowRoot === void 0 ? void 0 : shadowRoot.querySelectorAll('unity-typography').forEach(element => {
+            var _a, _b, _c, _d;
+            const styleOverride = element.id === this.titleId ? (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.styleOverrides) === null || _b === void 0 ? void 0 : _b.titleText :
+                element.id === this.descriptionId ? (_d = (_c = this.form) === null || _c === void 0 ? void 0 : _c.styleOverrides) === null || _d === void 0 ? void 0 : _d.paragraphText :
+                    {};
+            if ((styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.fontFamily) && fontOverrideMapping[styleOverride.fontFamily]) {
+                overrideFont(element, fontOverrideMapping[styleOverride.fontFamily]);
+            }
+            if (styleOverride === null || styleOverride === void 0 ? void 0 : styleOverride.variant) {
+                element.setAttribute('variant', styleOverride.variant);
+            }
+        });
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        if (!this.form) {
+            return h("div", null, "Loading...");
+        }
+        let questionNumber = 1;
+        const sectionSet = new Set();
+        this.form.formQuestions.forEach(fq => sectionSet.add(fq.section));
+        const orderedSectionNumbers = [...sectionSet].sort((a, b) => a - b);
+        const hiddenQuestionTypes = [UdpFormsFieldTypeEnum.Hidden, UdpFormsFieldTypeEnum.Paragraph];
+        const backgroundOverrides = {};
+        if ((_c = (_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.styleOverrides) === null || _b === void 0 ? void 0 : _b.background) === null || _c === void 0 ? void 0 : _c.backgroundImage) {
+            // uncomment when we want to allow background images
+            //backgroundOverrides.backgroundImage = `url(${this.form?.styleOverrides?.background?.backgroundImage})`;
+        }
+        else if ((_f = (_e = (_d = this.form) === null || _d === void 0 ? void 0 : _d.styleOverrides) === null || _e === void 0 ? void 0 : _e.background) === null || _f === void 0 ? void 0 : _f.backgroundColor) {
+            backgroundOverrides.backgroundColor = (_j = (_h = (_g = this.form) === null || _g === void 0 ? void 0 : _g.styleOverrides) === null || _h === void 0 ? void 0 : _h.background) === null || _j === void 0 ? void 0 : _j.backgroundColor;
+        }
+        return (h("div", { class: 'background', style: backgroundOverrides }, h("udp-container", { maxWidth: "md" }, h("div", { class: "form-container" }, !this.submitSuccessful ? (h("stencil-form", { handleSubmit: this.onSubmit, initialValues: this.initialValues, validate: this.validate, handleFormChange: this.onChange }, orderedSectionNumbers.map((sectionNumber, i) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            return (h("div", null, sectionNumber === orderedSectionNumbers[0] && (
+            // @ts-ignore
+            h("div", { class: "header", style: ((_b = (_a = this.form) === null || _a === void 0 ? void 0 : _a.styleOverrides) === null || _b === void 0 ? void 0 : _b.headerBackgroundColor) ? { backgroundColor: (_d = (_c = this.form) === null || _c === void 0 ? void 0 : _c.styleOverrides) === null || _d === void 0 ? void 0 : _d.headerBackgroundColor } : '' }, h("unity-typography", { id: this.titleId, variant: 'h6', color: "inherit" }, this.form.name), h("unity-typography", { id: this.descriptionId, variant: (_h = (_g = (_f = (_e = this.form) === null || _e === void 0 ? void 0 : _e.styleOverrides) === null || _f === void 0 ? void 0 : _f.paragraphText) === null || _g === void 0 ? void 0 : _g.variant) !== null && _h !== void 0 ? _h : 'body', color: "inherit" }, this.form.description), this.showAutoSaveStatus && (h("div", { class: "auto-save-status" }, this.isSaving && (h("unity-typography", { variant: "body", color: "primary" }, "Saving...")), this.saveError && (h("unity-typography", { variant: "body", color: "secondary" }, this.saveError)))))), h("div", { class: "form-content" }, h("div", { class: "items" }, this.form.formQuestions
+                .filter(fq => fq.section === sectionNumber)
+                .sort((a, b) => a.questionOrder - b.questionOrder)
+                .map((question) => {
+                var _a, _b, _c;
+                const isHidden = hiddenQuestionTypes.includes(question.fieldTypeId);
+                const num = questionNumber;
+                if (!isHidden)
+                    questionNumber++;
+                return (h("div", { class: "item" }, h("udp-question", { styleOverrides: {
+                        helperText: (_a = this.form.styleOverrides) === null || _a === void 0 ? void 0 : _a.helperText,
+                        paragraphText: (_b = this.form.styleOverrides) === null || _b === void 0 ? void 0 : _b.paragraphText,
+                        questionText: (_c = this.form.styleOverrides) === null || _c === void 0 ? void 0 : _c.questionText,
+                    }, question: question, questionNumber: num, value: this.initialValues[question.name], disabled: this.disabled, readonly: this.readonly })));
+            })), i === orderedSectionNumbers.length - 1 && (h("div", { class: "footer" }, h("input", { disabled: this.loading || this.disabled || this.readonly, type: "submit", value: "Submit", class: "submit", id: "udpRecord-udp-forms-renderer-Submit",
+                //@ts-ignore
+                udprecordid: "udpRecord-udp-forms-renderer-Submit" }))))));
+        }))) : (
+        //if the form has been submit, display success message with a button to trigger the action associated to the form
+        h("div", { class: "center-div" }, h("udp-ambient-card", null, h("div", { class: "submit-card" }, h("unity-typography", null, "Thank you for your submission!"), h("div", { class: "finish-button" }, h("custom-button", { onClick: this.onFinish }, "Finish"))))))))));
+    }
+    static get is() { return "udp-forms-ui"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-forms-renderer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-forms-renderer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "form": {
+                "type": "unknown",
+                "attribute": "form",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpForm",
+                    "resolved": "UdpForm",
+                    "references": {
+                        "UdpForm": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/my-component/UI/forms/udp-forms/types.ts::UdpForm"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "initialValues": {
+                "type": "unknown",
+                "attribute": "initial-values",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ [name: string]: any }",
+                    "resolved": "{ [name: string]: any; }",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "submitSuccessful": {
+                "type": "boolean",
+                "attribute": "submit-successful",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "attribute": "loading",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isSaving": {
+                "type": "boolean",
+                "attribute": "is-saving",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "saveError": {
+                "type": "string",
+                "attribute": "save-error",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "showAutoSaveStatus": {
+                "type": "boolean",
+                "attribute": "show-auto-save-status",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "onSubmit": {
+                "type": "unknown",
+                "attribute": "on-submit",
+                "mutable": false,
+                "complexType": {
+                    "original": "(values: any) => Promise<void>",
+                    "resolved": "(values: any) => Promise<void>",
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "onChange": {
+                "type": "unknown",
+                "attribute": "on-change",
+                "mutable": false,
+                "complexType": {
+                    "original": "(values: { [name: string]: any }) => void",
+                    "resolved": "(values: { [name: string]: any; }) => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "onAction": {
+                "type": "unknown",
+                "attribute": "on-action",
+                "mutable": false,
+                "complexType": {
+                    "original": "(actionId: Guid, params: Object) => void",
+                    "resolved": "(actionId: string, params: Object) => void",
+                    "references": {
+                        "Guid": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/my-component/UI/forms/udp-forms/types.ts::Guid"
+                        },
+                        "Object": {
+                            "location": "global",
+                            "id": "global::Object"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "onFinish": {
+                "type": "unknown",
+                "attribute": "on-finish",
+                "mutable": false,
+                "complexType": {
+                    "original": "() => void",
+                    "resolved": "() => void",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=udp-forms-ui.js.map

package/dist/collection/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-forms-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"udp-forms-ui.js","sourceRoot":"","sources":["../../../../../../../src/components/my-component/UI/forms/udp-forms/udp-forms-renderer/udp-forms-ui.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport { Guid, UdpForm, UdpFormQuestion } from '../types';\nimport { UdpFormsFieldTypeEnum } from '../enums';\nimport { fontOverrideMapping, overrideFont } from '../utils';\n\n@Component({\n  tag: 'udp-forms-ui',\n  styleUrl: 'udp-forms-renderer.css', // Reuse the same styles\n  shadow: true,\n})\nexport class UdpFormsUi {\n  @Prop() form: UdpForm;\n  @Prop() initialValues: { [name: string]: any } = {};\n  @Prop() submitSuccessful: boolean = false;\n  @Prop() loading: boolean = false;\n  @Prop() isSaving: boolean = false;\n  @Prop() saveError: string | null = null;\n  @Prop() showAutoSaveStatus: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() readonly: boolean = false;\n  @Prop() onSubmit: (values: any) => Promise<void>;\n  @Prop() onChange: (values: { [name: string]: any }) => void;\n  @Prop() onAction: (actionId: Guid, params: Object) => void;\n  @Prop() onFinish: () => void;\n\n  private titleId: string = 'udp-forms-title';\n  private descriptionId: string = 'udp-forms-description';\n\n  componentDidLoad() {\n    this.overrideStyles();\n  }\n\n  componentDidUpdate() {\n    this.overrideStyles();\n  }\n\n  overrideStyles() {\n    const shadowRoot = (this as any).el?.shadowRoot;\n    shadowRoot?.querySelectorAll('unity-typography').forEach(element => {\n      const styleOverride =\n        element.id === this.titleId ? this.form?.styleOverrides?.titleText :\n        element.id === this.descriptionId ? this.form?.styleOverrides?.paragraphText :\n        ({} as any);\n\n      if (styleOverride?.fontFamily && fontOverrideMapping[styleOverride.fontFamily]) {\n        overrideFont(element, fontOverrideMapping[styleOverride.fontFamily]);\n      }\n      if (styleOverride?.variant) {\n        element.setAttribute('variant', styleOverride.variant);\n      }\n    });\n  }\n\n  private validate = (values: Object, errors: Object) => {\n    // Validate required fields\n    for (const question of this.form?.formQuestions || []) {\n      if (question.required) {\n        const value = values[question.name];\n        if (!value || (typeof value === 'string' && value.trim() === '')) {\n          errors[question.name] = 'This field is required';\n        }\n      }\n    }\n    return errors;\n  };\n\n  render() {\n    if (!this.form) {\n      return <div>Loading...</div>;\n    }\n\n    let questionNumber = 1;\n\n    const sectionSet = new Set();\n    this.form.formQuestions.forEach(fq => sectionSet.add(fq.section));\n    const orderedSectionNumbers = [...sectionSet].sort((a: number, b: number) => a - b);\n\n    const hiddenQuestionTypes = [UdpFormsFieldTypeEnum.Hidden, UdpFormsFieldTypeEnum.Paragraph];\n\n    const backgroundOverrides: { backgroundImage?: string | null; backgroundColor?: string | null } = {};\n    if (this.form?.styleOverrides?.background?.backgroundImage) {\n      // uncomment when we want to allow background images\n      //backgroundOverrides.backgroundImage = `url(${this.form?.styleOverrides?.background?.backgroundImage})`;\n    } else if (this.form?.styleOverrides?.background?.backgroundColor) {\n      backgroundOverrides.backgroundColor = this.form?.styleOverrides?.background?.backgroundColor;\n    }\n\n    return (\n      <div class={'background'} style={backgroundOverrides}>\n        <udp-container maxWidth=\"md\">\n          <div class=\"form-container\">\n            {!this.submitSuccessful ? (\n              <stencil-form\n                handleSubmit={this.onSubmit}\n                initialValues={this.initialValues}\n                validate={this.validate}\n                handleFormChange={this.onChange}\n              >\n                {/********** QUESTIONS *********/}\n                {orderedSectionNumbers.map((sectionNumber, i) => (\n                  <div>\n                    {sectionNumber === orderedSectionNumbers[0] && (\n                      // @ts-ignore\n                      <div class=\"header\" style={this.form?.styleOverrides?.headerBackgroundColor ? { backgroundColor: this.form?.styleOverrides?.headerBackgroundColor } : ''}>\n                        <unity-typography id={this.titleId} variant={'h6'} color=\"inherit\">\n                          {this.form.name}\n                        </unity-typography>\n                        <unity-typography\n                          id={this.descriptionId}\n                          variant={this.form?.styleOverrides?.paragraphText?.variant ?? 'body'}\n                          color=\"inherit\"\n                        >\n                          {this.form.description}\n                        </unity-typography>\n\n                        {/* Auto-save status indicator for authenticated users */}\n                        {this.showAutoSaveStatus && (\n                          <div class=\"auto-save-status\">\n                            {this.isSaving && (\n                              <unity-typography variant=\"body\" color=\"primary\">\n                                Saving...\n                              </unity-typography>\n                            )}\n                            {this.saveError && (\n                              <unity-typography variant=\"body\" color=\"secondary\">\n                                {this.saveError}\n                              </unity-typography>\n                            )}\n                          </div>\n                        )}\n                      </div>\n                    )}\n                    <div class=\"form-content\">\n                      <div class=\"items\">\n                        {this.form.formQuestions\n                          .filter(fq => fq.section === sectionNumber)\n                          .sort((a, b) => a.questionOrder - b.questionOrder)\n                          .map((question: UdpFormQuestion) => {\n                            const isHidden = hiddenQuestionTypes.includes(question.fieldTypeId);\n                            const num: number = questionNumber;\n                            if (!isHidden) questionNumber++;\n                            return (\n                              <div class=\"item\">\n                                <udp-question\n                                  styleOverrides={{\n                                    helperText: this.form.styleOverrides?.helperText,\n                                    paragraphText: this.form.styleOverrides?.paragraphText,\n                                    questionText: this.form.styleOverrides?.questionText,\n                                  }}\n                                  question={question}\n                                  questionNumber={num}\n                                  value={this.initialValues[question.name]}\n                                  disabled={this.disabled}\n                                  readonly={this.readonly}\n                                />\n                              </div>\n                            );\n                          })}\n                      </div>\n                      {i === orderedSectionNumbers.length - 1 && (\n                        <div class=\"footer\">\n                          <input\n                            disabled={this.loading || this.disabled || this.readonly}\n                            type=\"submit\"\n                            value=\"Submit\"\n                            class=\"submit\"\n                            id=\"udpRecord-udp-forms-renderer-Submit\"\n                            //@ts-ignore\n                            udprecordid=\"udpRecord-udp-forms-renderer-Submit\"\n                          />\n                        </div>\n                      )}\n                    </div>\n                  </div>\n                ))}\n              </stencil-form>\n            ) : (\n              //if the form has been submit, display success message with a button to trigger the action associated to the form\n              <div class=\"center-div\">\n                <udp-ambient-card>\n                  <div class=\"submit-card\">\n                    <unity-typography>Thank you for your submission!</unity-typography>\n                    <div class=\"finish-button\">\n                      <custom-button onClick={this.onFinish}>Finish</custom-button>\n                    </div>\n                  </div>\n                </udp-ambient-card>\n              </div>\n            )}\n          </div>\n        </udp-container>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/my-component/UI/forms/udp-forms/udp-question/udp-question.css

@@ -0,0 +1,4 @@
+
+.hidden {
+    display: none;
+}

package/dist/collection/components/my-component/UI/forms/udp-forms/udp-question/udp-question.js

@@ -0,0 +1,216 @@
+import { h } from "@stencil/core";
+import { UdpFormsFieldTypeEnum } from "../enums";
+import { fontOverrideMapping, overrideFont } from "../utils";
+export class UdpQuestion {
+    constructor() {
+        this.disabled = false;
+        this.readonly = false;
+    }
+    getFieldComponent() {
+        var _a, _b, _c, _d, _e, _f;
+        const props = {
+            name: (_a = this.question.name) !== null && _a !== void 0 ? _a : `question-${this.questionNumber}`,
+            required: this.question.required,
+        };
+        const fieldProps = Object.assign(Object.assign({}, this.question.fieldProperties), { id: this.questionNumber, disabled: this.disabled, readonly: this.readonly });
+        switch (this.question.fieldTypeId) {
+            case UdpFormsFieldTypeEnum.SingleLineText:
+                return (h("stencil-field", Object.assign({}, props), h("text-field", Object.assign({}, fieldProps))));
+            case UdpFormsFieldTypeEnum.MultiLineText:
+                return (h("stencil-field", Object.assign({}, props), h("text-area", Object.assign({ fullWidth: true }, fieldProps))));
+            case UdpFormsFieldTypeEnum.Checkbox:
+                return (h("stencil-field", Object.assign({}, props), h("selectable-list", Object.assign({ valueKey: "value", displayKey: "display", multiSelect: true, useCheckbox: true }, fieldProps))));
+            case UdpFormsFieldTypeEnum.RadioButton:
+                return (h("stencil-field", Object.assign({}, props), h("selectable-list", Object.assign({ valueKey: "value", displayKey: "display", useCheckbox: true }, fieldProps))));
+            case UdpFormsFieldTypeEnum.DropdownSingleSelect:
+            case UdpFormsFieldTypeEnum.DropdownMultipleSelect:
+                let options = (_c = (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.items) === null || _b === void 0 ? void 0 : _b.map) === null || _c === void 0 ? void 0 : _c.call(_b, items => (Object.assign({ label: items.display, value: items.value }, fieldProps)));
+                return (h("stencil-field", Object.assign({}, props), h("udp-selector", Object.assign({ options: options !== null && options !== void 0 ? options : [], multiSelect: this.question.fieldTypeId === UdpFormsFieldTypeEnum.DropdownMultipleSelect }, fieldProps))));
+            case UdpFormsFieldTypeEnum.ListMultiSelect:
+                return (h("stencil-field", Object.assign({}, props), h("selectable-list", Object.assign({ valueKey: "value", displayKey: "display", multiSelect: true }, fieldProps))));
+            case UdpFormsFieldTypeEnum.DateSelector:
+                return (h("stencil-field", Object.assign({}, props), h("udp-date-selector", Object.assign({ min: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.minDate, max: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.maxDate }, fieldProps))));
+            case UdpFormsFieldTypeEnum.TimeSelector:
+                return (h("stencil-field", Object.assign({}, props), h("udp-time-selector", Object.assign({ min: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.minTime, max: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.maxTime }, fieldProps))));
+            case UdpFormsFieldTypeEnum.DateTimeSelector:
+                return (h("stencil-field", Object.assign({}, props), h("udp-datetime-selector", Object.assign({ max: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.maxDateTime, min: fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.minDateTime }, fieldProps))));
+            case UdpFormsFieldTypeEnum.FileUpload:
+                return (h("stencil-field", Object.assign({}, props), h("file-upload", Object.assign({ fullWidth: true, allowMultiple: false }, fieldProps))));
+            case UdpFormsFieldTypeEnum.Paragraph:
+                return this.value ? h("unity-typography", { id: `paragraphText${this.question.name}`, variant: (_f = (_e = (_d = this.styleOverrides) === null || _d === void 0 ? void 0 : _d.paragraphText) === null || _e === void 0 ? void 0 : _e.variant) !== null && _f !== void 0 ? _f : 'body' }, this.value) : h("div", null);
+            case UdpFormsFieldTypeEnum.Hidden:
+            default:
+                return h("div", null);
+        }
+    }
+    componentDidLoad() {
+        var _a, _b, _c, _d;
+        // override the fonts based on style overrides
+        const variantsAndOverrides = [];
+        for (const override in this.styleOverrides) {
+            variantsAndOverrides.push({
+                id: override + this.question.name,
+                fontOverride: (_b = (_a = this.styleOverrides) === null || _a === void 0 ? void 0 : _a[override]) === null || _b === void 0 ? void 0 : _b.fontFamily,
+                variant: (_d = (_c = this.styleOverrides) === null || _c === void 0 ? void 0 : _c[override]) === null || _d === void 0 ? void 0 : _d.variant
+            });
+        }
+        variantsAndOverrides.forEach(override => {
+            var _a, _b, _c;
+            if (!fontOverrideMapping[override === null || override === void 0 ? void 0 : override.fontOverride] || !this.el || !this.el.shadowRoot)
+                return;
+            overrideFont((_c = (_b = (_a = this.el) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById) === null || _c === void 0 ? void 0 : _c.call(_b, override.id), fontOverrideMapping[override === null || override === void 0 ? void 0 : override.fontOverride]);
+        });
+    }
+    render() {
+        var _a, _b, _c, _d, _e, _f;
+        const component = this.getFieldComponent();
+        const titleText = `${this.question.fieldTypeId === UdpFormsFieldTypeEnum.Paragraph ? '' : `${this.questionNumber}.`} ${this.question.questionText}  ${this.question.required && this.question.fieldTypeId !== UdpFormsFieldTypeEnum.Paragraph ? '*' : ''}`;
+        if (!component)
+            return null;
+        return (h("div", { class: this.question.fieldTypeId === UdpFormsFieldTypeEnum.Hidden ? 'hidden' : '' }, this.question.questionText ? h("unity-typography", { id: `questionText${this.question.name}`, variant: (_c = (_b = (_a = this.styleOverrides) === null || _a === void 0 ? void 0 : _a.questionText) === null || _b === void 0 ? void 0 : _b.variant) !== null && _c !== void 0 ? _c : 'h3' }, titleText) : '', component, h("unity-typography", { id: `helperText${this.question.name}`, variant: (_f = (_e = (_d = this.styleOverrides) === null || _d === void 0 ? void 0 : _d.helperText) === null || _e === void 0 ? void 0 : _e.variant) !== null && _f !== void 0 ? _f : 'caption-text' }, this.question.helperText)));
+    }
+    static get is() { return "udp-question"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["udp-question.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["udp-question.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "question": {
+                "type": "unknown",
+                "attribute": "question",
+                "mutable": false,
+                "complexType": {
+                    "original": "UdpFormQuestion",
+                    "resolved": "UdpFormQuestion",
+                    "references": {
+                        "UdpFormQuestion": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/my-component/UI/forms/udp-forms/types.ts::UdpFormQuestion"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "questionNumber": {
+                "type": "number",
+                "attribute": "question-number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "attribute": "readonly",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "styleOverrides": {
+                "type": "unknown",
+                "attribute": "style-overrides",
+                "mutable": false,
+                "complexType": {
+                    "original": "{\n    helperText: FontOverrides;\n    questionText: FontOverrides;\n    paragraphText: FontOverrides;\n  }",
+                    "resolved": "{ helperText: FontOverrides; questionText: FontOverrides; paragraphText: FontOverrides; }",
+                    "references": {
+                        "FontOverrides": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/my-component/UI/forms/udp-forms/types.ts::FontOverrides"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=udp-question.js.map