udp-stencil-component-library 25.18.1 → 25.18.2-beta.2

package/dist/components/tally.js

@@ -51,14 +51,14 @@ const TallyDisplay = /*@__PURE__*/ proxyCustomElement(class TallyDisplay extends
         const isError = !!this.error;
         const answeredCount = this.yesCount + this.noCount + this.naCount;
         const unansweredCount = this.totalFields - answeredCount;
-        return (h(Host, { key: 'fed22627bce1ac7be18a2425bece6686869564d7', class: {
+        return (h(Host, { key: '9de3aacae1f977ca6f71842e6cf110226623020d', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
                 'udp-input--readonly': this.readonly,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: '971333eebb659bbb4eb934bb9950032a7909da18', class: "tally-container" }, this.label && (h("unity-typography", { key: '8444c7bcbcbe333f9e66026a5222ee29335e4de6', variant: "caption-text" }, h("label", { key: '98c8daa86aa2d29c2d1c5b4a5004ce6819d83349', htmlFor: this.id, class: "tally-label" }, this.label))), h("div", { key: '7b6a501d4ce95a2b27d3884e8c695e1faf06b2e8', class: "tally-content", id: this.id }, h("div", { key: '68454bc99bd9c1ce4680df8f983eaf5ae4e9767e', class: "tally-stats" }, h("div", { key: 'e0e1b18c29dccb79043e00475b5bc30adc987d4e', class: "tally-item tally-yes" }, h("unity-typography", { key: '18cc8a94d43cf31f6306b8de3d2f48d1396304a2', variant: "h4", class: "tally-count" }, this.yesCount), h("unity-typography", { key: 'd88c15dbf4bda174343aaa5bab8717d1c8cc0624', variant: "caption-text", class: "tally-label" }, "Yes")), h("div", { key: '3f5108ae238eb07f67e5c6de82eb396ade8224f8', class: "tally-item tally-no" }, h("unity-typography", { key: '371e592c1c36ecbb6dd03764f395c21f1d4d0be5', variant: "h4", class: "tally-count" }, this.noCount), h("unity-typography", { key: 'b808bcc32aa9c582046b368d1d13747d8e757b77', variant: "caption-text", class: "tally-label" }, "No")), h("div", { key: '78f58c21c1c20d6054c0ef0a31dd56de06fb0431', class: "tally-item tally-na" }, h("unity-typography", { key: 'bbf95119a828762d96ba783b24e6d33f4d21084c', variant: "h4", class: "tally-count" }, this.naCount), h("unity-typography", { key: 'c34245acdfe54eab110e4d21d3397a0902087ccd', variant: "caption-text", class: "tally-label" }, "Not Applicable")), unansweredCount > 0 && (h("div", { key: '7e56aeb2896950a6a8ba2b414250628bc15f73d0', class: "tally-item tally-unanswered" }, h("unity-typography", { key: '947f18fb83d02cb7544fc245aaad81ae188d5a98', variant: "h4", class: "tally-count" }, unansweredCount), h("unity-typography", { key: 'fb740e38f0086757ead6285834183fcc183dc07f', variant: "caption-text", class: "tally-label" }, "Unanswered")))), h("div", { key: '2c877a0a184fe0b51b75ed26073085c057ae6a40', class: "tally-summary" }, h("unity-typography", { key: '8479096b7addcedab23446a67ed9a0795dc5c8fe', variant: "caption-text" }, "Total Questions: ", this.totalFields))), isError && (h("div", { key: 'b686351f4926cc8bfbec445bf426ec3634c861a9', class: "error-message" }, h("unity-typography", { key: '4363a3cb9ffd25fd03b0ca1c74ea01281a451dbd', variant: "caption-text", color: "error" }, this.error))))));
+            } }, h("div", { key: '3d90baeaa376621f7befdd0d2aaf5162b640a92d', class: "tally-container" }, this.label && (h("unity-typography", { key: 'dbc30e26ace3de5a9c971b57a25f49a5f25a4d37', variant: "caption-text" }, h("label", { key: '3c17434ee48556b3e7c05a15ba17682801a4ee79', htmlFor: this.id, class: "tally-label" }, this.label))), h("div", { key: 'eda4e1acb3866a4af9129088eff7bf378582c3c0', class: "tally-content", id: this.id }, h("div", { key: '7169cd7335a3cc923a407f6bac36487e3c51e3a6', class: "tally-stats" }, h("div", { key: '4ae7daed9b4ef5e9e658868b993225b2d6d230bc', class: "tally-item tally-yes" }, h("unity-typography", { key: 'fb2e662654f07041157b3111fd6493c7abf956fe', variant: "h4", class: "tally-count" }, this.yesCount), h("unity-typography", { key: 'a9f2628e63a4fd7e0e78ed692e812c8be7df162d', variant: "caption-text", class: "tally-label" }, "Yes")), h("div", { key: '9a469360bdc4d019b8b9dfdd70e54e60ae44ea00', class: "tally-item tally-no" }, h("unity-typography", { key: 'c52e2e33623f50fd6ad777a82d193828cd9a8a68', variant: "h4", class: "tally-count" }, this.noCount), h("unity-typography", { key: '9936996f607fcb5016ef32917cdd04228e9fb78b', variant: "caption-text", class: "tally-label" }, "No")), h("div", { key: '6f6abc8c33d6ca4b516caa4a63b458e449806f71', class: "tally-item tally-na" }, h("unity-typography", { key: '7ae33f8cfa8fe27c0c5d9a1a32b61ec55c237eab', variant: "h4", class: "tally-count" }, this.naCount), h("unity-typography", { key: 'bfd96fc54a803756484cd3e5c965f28e6e97fa0e', variant: "caption-text", class: "tally-label" }, "Not Applicable")), unansweredCount > 0 && (h("div", { key: 'f56329ad0c4396846711955dc539413d453d3341', class: "tally-item tally-unanswered" }, h("unity-typography", { key: 'f81c44a5d86a43a5389d864783627130ebb41409', variant: "h4", class: "tally-count" }, unansweredCount), h("unity-typography", { key: 'f51b115cbb8d6cd11050e861f10696e406c8ae95', variant: "caption-text", class: "tally-label" }, "Unanswered")))), h("div", { key: 'bd121ac3682f79b9b06c65d5af4a34b247d8b724', class: "tally-summary" }, h("unity-typography", { key: '279e7a4eca040c52b83b4c6d15119034db44ff37', variant: "caption-text" }, "Total Questions: ", this.totalFields))), isError && (h("div", { key: '9853c7c215eeee120c3e09ab83a01c24d48fba44', class: "error-message" }, h("unity-typography", { key: '3f25998a2b9f9901bce9fa5baad3b7de65fed0e2', variant: "caption-text", color: "error" }, this.error))))));
     }
     static get style() { return tallyCss; }
 }, [257, "tally-display", {

package/dist/components/text-area2.js

@@ -214,7 +214,7 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends H {
     }
     render() {
         const { disabled, id, internalValue, label, placeholder, required, readonly, errorMessage, fullWidth, internalRows } = this;
-        return (h(Host, { key: 'bdf5a606994014065a28795c9e24f79c7c1ae736', class: {
+        return (h(Host, { key: '8030ffc085d6b53b0ae1a35f81d4da4c9e155c0e', class: {
                 'udp-input': true,
                 'udp-input--error': !!errorMessage,
                 'udp-input--disabled': disabled,
@@ -223,11 +223,11 @@ const TextArea = /*@__PURE__*/ proxyCustomElement(class TextArea extends H {
                 'udp-input--required': required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: 'c95cb5633731a96e60838e635fd005ccf276612c', class: "bx--form-item" }, h("unity-typography", { key: 'b83e5c04c3c058e3e0dad21280af3d50bc94c081', variant: "caption-text" }, h("label", { key: 'a4b8d120461ab32b7c0e05e79d4a1b887d46a492', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), h("textarea", { key: 'ab1784af9fe7378f2de47e5def267fc8b38178ee', ref: el => (this.textareaEl = el), id: id, class: {
+            } }, h("div", { key: '21806e67cd632ef1c0d141d57c356eaaeb68f098', class: "bx--form-item" }, h("unity-typography", { key: '4094220f657f8cd5fcee94cf60a7d7cd62108ca9', variant: "caption-text" }, h("label", { key: 'fcda510639bd39ad292d9fb4721acac7cc35e456', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), h("textarea", { key: 'd53d49eed9d2e7a7b342a59ee71215eab199206b', ref: el => (this.textareaEl = el), id: id, class: {
                 'bx--text-input': true,
                 'bx--text-input--error': !!errorMessage,
                 'text-area--disabled': disabled,
-            }, placeholder: placeholder, value: internalValue, required: required, disabled: disabled, readonly: readonly, maxLength: this.maxCharacter, rows: internalRows, onInput: this.onInput, onChange: this.onChange }, internalValue), errorMessage && (h("div", { key: '98f452d24e69252b9f47a4ef45e42311454aeee7', class: "error-message" }, h("unity-typography", { key: '6f85da551a04471d33b83637ccc1400d6dc87c79', variant: "caption-text", color: "error" }, errorMessage))))));
+            }, placeholder: placeholder, value: internalValue, required: required, disabled: disabled, readonly: readonly, maxLength: this.maxCharacter, rows: internalRows, onInput: this.onInput, onChange: this.onChange }, internalValue), errorMessage && (h("div", { key: 'faf6cd4d6bb621416dc36b660581b9a6dc94c057', class: "error-message" }, h("unity-typography", { key: '8433e5d11d1b43358baa1d2a961c4bfa3d7c95a7', variant: "caption-text", color: "error" }, errorMessage))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/text-field2.js

@@ -174,7 +174,7 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends H {
             'bx--text-input:user-invalid': isError,
             'text-field--disabled': this.disabled,
         };
-        return (h(Host, { key: '477fd126139a6614d43091da606ad4730d356fdc', class: {
+        return (h(Host, { key: '388dbeafb0b5a726b437ff4898735ec4a11d1e7d', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -182,9 +182,9 @@ const TextField = /*@__PURE__*/ proxyCustomElement(class TextField extends H {
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '4abd025ba834da3a2fb42bf1909413df6fa62a43', class: "bx--form-item" }, h("unity-typography", { key: 'dc66c2a29831519a99ce2582d740fb998359e988', variant: "caption-text" }, h("label", { key: 'c52efd8115a63e79d5d04b7792cde08f3bb12d05', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue })) : (h("input", { id: this.id, type: "text", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readonly: this.readonly, maxLength: this.maxCharacter, inputMode: this.inputMode, onInput: this.onInput, onChange: this.onChange,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '9d66a1d7ec9d2ccd74efa320ed8faebae66afc67', class: "bx--form-item" }, h("unity-typography", { key: '9743d1324aeabdf63e34d66b84391a163127ca68', variant: "caption-text" }, h("label", { key: '33d613ec484961c27197d0a38e6b3be09df11739', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), this.hidden ? (h("input", { id: this.id, type: "hidden", value: this.internalValue })) : (h("input", { id: this.id, type: "text", class: Object.assign({}, inputClass), placeholder: this.placeholder, value: this.internalValue, required: this.required, disabled: this.disabled, readonly: this.readonly, maxLength: this.maxCharacter, inputMode: this.inputMode, onInput: this.onInput, onChange: this.onChange,
             //@ts-ignore
-            udprecordid: 'udpRecord-text-field-' + this.id })), isError && (h("div", { key: '3a2d11f913e5d97befeb05df6e9f1943ba6fcc13', class: "error-message" }, h("unity-typography", { key: 'a4e9594fd4aa1980e20c2c3754af74fc8417d339', variant: "caption-text", color: "error" }, this.errorMessage))))));
+            udprecordid: 'udpRecord-text-field-' + this.id })), isError && (h("div", { key: '4f695e2ea3d0d83b0a8b64616458aff67ebaf009', class: "error-message" }, h("unity-typography", { key: '9399d49f19ccd3419f910497c01379e4b3d0d6a7', variant: "caption-text", color: "error" }, this.errorMessage))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/text-input-renderer2.js

@@ -14,12 +14,12 @@ const TextInputRenderer = /*@__PURE__*/ proxyCustomElement(class TextInputRender
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '035d9fdc8be25da7ecf0ae84eecde649a85e4322', class: "question-item-text-input-container" }, h("div", { key: 'e58baa0c927edc2ebc6fd22e50d70c67682489ca' }, h("numeric-field", { key: '6f7f4b1af132808dd2b46469816da4276047a98f', label: "Min Character Length", value: (_a = this.question.fieldProperties.minCharacter) === null || _a === void 0 ? void 0 : _a.toString(), disabled: this.isViewOnly, onChange: e => {
+        return (h("div", { key: '6eebecdd96b83ffcdd763a1914d88c978c7116fe', class: "question-item-text-input-container" }, h("div", { key: 'fef91549ea22ccf64a862777a1eda7f20d267cac' }, h("numeric-field", { key: 'ace5e308868c367a37e52fa0332518f5120b59e8', label: "Min Character Length", value: (_a = this.question.fieldProperties.minCharacter) === null || _a === void 0 ? void 0 : _a.toString(), disabled: this.isViewOnly, onChange: e => {
                 const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyMinMaxCharacter');
                 const mockEvent = { target: { value: e.detail } };
                 const updated = handler(mockEvent, this.formSectionsDraft, this.sIndex, this.qIndex, 'minCharacter');
                 this.onFormSectionsDraftChange(updated);
-            } })), h("div", { key: '7756e209db6840d3ec0342d97efdc73d7ab3d276' }, h("numeric-field", { key: 'bd03b53ffd847005b14e0694e7a1831ae9bca1b3', label: "Max Character Length", value: (_b = this.question.fieldProperties.maxCharacter) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isViewOnly, onChange: e => {
+            } })), h("div", { key: 'e92f0f7432e76ef14ffdabeeae737a331f5e4b9f' }, h("numeric-field", { key: 'd699b1f05579ad7973ce40cb760b0c2d8556e7f0', label: "Max Character Length", value: (_b = this.question.fieldProperties.maxCharacter) === null || _b === void 0 ? void 0 : _b.toString(), disabled: this.isViewOnly, onChange: e => {
                 const handler = this.getHandler(this.question.fieldTypeId, 'handleFieldPropertyMinMaxCharacter');
                 const mockEvent = { target: { value: e.detail } };
                 const updated = handler(mockEvent, this.formSectionsDraft, this.sIndex, this.qIndex, 'maxCharacter');

package/dist/components/udp-container-query-grid-item.js

@@ -22,7 +22,7 @@ const UdpContainerQueryGridItem$1 = /*@__PURE__*/ proxyCustomElement(class UdpCo
             .join('\n');
     }
     render() {
-        return (h(Host, { key: 'bd7ef62bce3706caec69d33a187d4361f4654630' }, h("style", { key: '1dea20fc5935d13b298565645168ee2305a4dfeb' }, this.getSpanStyles()), h("slot", { key: '0f9af3cdcdb67977d02d89cea86bc04bf58e3c30' })));
+        return (h(Host, { key: 'a12c7a9e3567019bfa3129cf0b45b9e5f9454044' }, h("style", { key: 'c41e5e648f8a78f965ff1044479ca1e7c785b598' }, this.getSpanStyles()), h("slot", { key: 'a6ac351a5a3ec74ce36667cdef91c88c1459482a' })));
     }
     static get style() { return udpContainerQueryGridItemCss; }
 }, [257, "udp-container-query-grid-item", {

package/dist/components/udp-container-query-grid.js

@@ -37,7 +37,7 @@ const UdpContainerQueryGrid$1 = /*@__PURE__*/ proxyCustomElement(class UdpContai
                 gap: `${this.gaps[breakpoint]}rem`,
             }));
         });
-        return (h(Host, { key: 'f1d07a630ddcfe444d36b496cdc91cb9f5cb1e80' }, h("udp-container-query", { key: '94d8cb6286439e57c2c9945a3854813fbf32dbb2', queries: queries }, h("div", { key: 'ff77ca14e2f8a5fb131fc9ad0b82e1ed27db9f45', class: "grid-container" }, h("slot", { key: '927273996e110c13610d49150f2a407fa42e8141' }))), h("style", { key: '67c1019407f263c493008c419d8692f5bd069f1b' }, `
+        return (h(Host, { key: '63e6f7902336ffc08bd3bb251907877325cf0d12' }, h("udp-container-query", { key: 'c8206e4612990b72e81105673e2c72e3e63410bb', queries: queries }, h("div", { key: 'cc01e88216ba2dd069ad1cd194ceb8c5026b4a37', class: "grid-container" }, h("slot", { key: '37b9a99849d97ef8e8c33d1e401f90b919115a51' }))), h("style", { key: '4ec725b30fc8e830798e4816ae1bc0c5a9b38fd4' }, `
           .grid-container {
             display: grid;
             grid-template-columns: repeat(${this.columns[0]}, 1fr);

package/dist/components/udp-container-query2.js

@@ -29,9 +29,9 @@ const UdpContainerQuery = /*@__PURE__*/ proxyCustomElement(class UdpContainerQue
         return styleRules;
     }
     render() {
-        return (h(Host, { key: '904cc72f590b5948dec552df97c7161981c4e4e5', class: {
+        return (h(Host, { key: '9bc9f62ca83c3c794e909ee966947675fb9870da', class: {
                 [this.customClass]: !!this.customClass,
-            } }, h("style", { key: 'd6d1a078d0cb0506a0de7a08ab8c95364ce6e1d4' }, this.getContainerQueryStyle()), h("slot", { key: 'f7f9aaa16f7be0d29314af0effdf09d33c2a6bbd' })));
+            } }, h("style", { key: '43ba2fd574da0e60066064c06413a84004e57d83' }, this.getContainerQueryStyle()), h("slot", { key: '17633bfe61d8993a986de0263a4a68399d0f9262' })));
     }
     static get style() { return udpContainerQueryCss; }
 }, [257, "udp-container-query", {

package/dist/components/udp-container2.js

@@ -23,12 +23,12 @@ const UdpContainer = /*@__PURE__*/ proxyCustomElement(class UdpContainer extends
         this.padding = true;
     }
     render() {
-        return (h("div", { key: '67a4785f07ff86b828f2e5efc565c4e83963111a', class: {
+        return (h("div", { key: '96b20d0a841faf192bb5c0d407701e6f95ed14ef', class: {
                 'udp-container': true,
                 'udp-container--fluid': this.fluid,
                 'udp-container--padded': this.padding,
                 [`udp-container--${this.maxWidth}`]: true,
-            } }, h("slot", { key: 'c093ce82b5a485b158eb3f1152d55174202e8f87' })));
+            } }, h("slot", { key: '09c87f19b0f7031dec7a41f9636bbc071db021f5' })));
     }
     static get style() { return udpContainerCss; }
 }, [257, "udp-container", {

package/dist/components/udp-date-range-selector.js

@@ -38,7 +38,7 @@ const UdpDateRangeSelector$1 = /*@__PURE__*/ proxyCustomElement(class UdpDateRan
             : this.variant === 'single'
                 ? 'calendar-date'
                 : 'calendar-range';
-        return (h(Host, { key: '34f21a17dcfaa40fa0e068e1ff2b3eb799718d35', style: { '--calendar-width': this.width } }, h(CalendarTag, { key: '69396b5dda3db71a322cce96d061eb270e7a6630', value: this.value, min: this.minDate, max: this.maxDate, firstDayOfWeek: 0, months: this.monthsToDisplay, showOutsideDays: true, pageBy: "single", isDateDisallowed: this.isDateDisallowed, getDayParts: this.getDayParts, onChange: this.handleChange }, h("udp-icon", { key: 'c8d15a18ac8cae807f62f61824fe173b47056f95', slot: "previous", iconName: 'chevronLeft16', color: "inherit" }), h("udp-icon", { key: '7ac71c49d0edbcc9b5ef8952ee65b6863cf5e6a7', slot: "next", iconName: 'chevronRight16', color: "inherit" }), h("div", { key: 'ff0e2d900d172a9c8378d91a1298ff76f8610b83', class: "grid" }, Array.from({ length: this.monthsToDisplay }).map((_, index) => (h("calendar-month", { offset: index })))))));
+        return (h(Host, { key: '98fb48f793658c67a5ae8e84daa712295a9e3080', style: { '--calendar-width': this.width } }, h(CalendarTag, { key: '03bd3adc716431fcfc7da2ab6bc40ccb804e9113', value: this.value, min: this.minDate, max: this.maxDate, firstDayOfWeek: 0, months: this.monthsToDisplay, showOutsideDays: true, pageBy: "single", isDateDisallowed: this.isDateDisallowed, getDayParts: this.getDayParts, onChange: this.handleChange }, h("udp-icon", { key: '7f8a4aa9e0ecebdc6e806c3d20fe9fb55559e0ab', slot: "previous", iconName: 'chevronLeft16', color: "inherit" }), h("udp-icon", { key: 'ab0efbca0d3bd404c2e9fe43864eac1f156a73d0', slot: "next", iconName: 'chevronRight16', color: "inherit" }), h("div", { key: 'aadb14be39e4ef95630514ae378aa254bcfb2d53', class: "grid" }, Array.from({ length: this.monthsToDisplay }).map((_, index) => (h("calendar-month", { offset: index })))))));
     }
     static get style() { return udpDateRangeSelectorCss; }
 }, [257, "udp-date-range-selector", {

package/dist/components/udp-date-selector2.js

@@ -129,7 +129,7 @@ const UdpDateSelector = /*@__PURE__*/ proxyCustomElement(class UdpDateSelector e
             classNames.push('bx--text-input--full-width');
         }
         const inputClass = classNames.join(' ');
-        return (h(Host, { key: 'ae9efad139a83656e0fee173704f354ba2331f6a', class: {
+        return (h(Host, { key: '6508c42efac96e7db1d320ec4faed15fd849540c', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -138,9 +138,9 @@ const UdpDateSelector = /*@__PURE__*/ proxyCustomElement(class UdpDateSelector e
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'da630f9378f12211581f119f79e5a1047b53ea8e', class: "bx--form-item" }, h("unity-typography", { key: 'bf1ae668de34df013001033fdb63f8641eb16a07', variant: "caption-text" }, h("label", { key: 'dccb79085b266c6c25102836f8773c6eb109eabc', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: '06faee995162621361fd90bc6b648d6e53ac8afa', type: "date", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onChange: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'ecd12c48810b985d702ce70ab89e0670f387c257', class: "bx--form-item" }, h("unity-typography", { key: '51a542e4f6c238965fc82312a10beb21386d4ead', variant: "caption-text" }, h("label", { key: 'af6d330c10eb905ee01e53e50d43038d10a0714f', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: '183af2eb4d561a24098dee7c8eebb2b3436606d2', type: "date", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onChange: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
             //@ts-ignore
-            udprecordid: 'udpRecord-udp-date-selector-' + this.id }), h("unity-typography", { key: '64381575296c32b4b1ad08cafa465ad061d981fd', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+            udprecordid: 'udpRecord-udp-date-selector-' + this.id }), h("unity-typography", { key: '3233342e07981927427787adbc0dc0cad28d302c', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
     }
     static get watchers() { return {
         "error": ["updateError"],

package/dist/components/udp-datetime-selector2.js

@@ -158,7 +158,7 @@ const UdpDateTimeSelector = /*@__PURE__*/ proxyCustomElement(class UdpDateTimeSe
             classNames.push('bx--text-input--full-width');
         }
         const inputClass = classNames.join(' ');
-        return (h(Host, { key: '7c8bef5171c52fc9fc0d11f589772c7415a972fc', class: {
+        return (h(Host, { key: '510b2b323027de453c53f54c4f2e07852e704559', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -167,9 +167,9 @@ const UdpDateTimeSelector = /*@__PURE__*/ proxyCustomElement(class UdpDateTimeSe
                 'udp-input--required': this.required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: '7188eec6d89b4294f1fc4cc8270c083796ecafb1', class: "bx--form-item" }, h("unity-typography", { key: '56ab355fb04821355bb30228627196a0dd9735c3', variant: "caption-text" }, h("label", { key: '903c287233f89699d9798585cbc36ea75ddb18f6', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: '9695e85ae15acc7e0ad98016e1daebd4c95a7ddb', type: "datetime-local", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
+            }, "aria-invalid": isError ? 'true' : 'false', "aria-required": this.required ? 'true' : 'false' }, h("div", { key: 'fc3b80d9a0613e7c85831183c7e73ee0ea6f5fa8', class: "bx--form-item" }, h("unity-typography", { key: '96d28577fb180ffbd021ff475028c93cd1c10262', variant: "caption-text" }, h("label", { key: '3f7eb4054fd21b7b684e6d0012fe249c5b164b3a', htmlFor: this.id, class: "bx--label" }, this.label, this.required ? '*' : '')), h("input", { key: 'e8d1d3f9228b9a49bb3a2a5cd860660d2ed1f6c4', type: "datetime-local", id: this.id, name: this.name, class: inputClass, value: this.internalValue, min: this.min ? this.formatDateForHtml(this.min) : null, max: this.max ? this.formatDateForHtml(this.max) : null, onInput: this.handleDateChange, onBlur: this.handleBlur, onFocus: this.handleFocus, disabled: this.disabled, readonly: this.readonly, required: this.required,
             //@ts-ignore
-            udprecordid: 'udpRecord-udp-datetime-selector-' + this.id }), h("unity-typography", { key: '355205378984339a63ef692d244cc77662065d78', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
+            udprecordid: 'udpRecord-udp-datetime-selector-' + this.id }), h("unity-typography", { key: '6a3b75c91e17283f5e36a782735d5b09eb927aee', class: "error-message", variant: "caption-text", color: "error" }, this.errorMessage))));
     }
     static get watchers() { return {
         "error": ["updateError"],

package/dist/components/udp-dynamic-container-with-menu2.js

@@ -126,7 +126,7 @@ const DynamicContainerWithMenu = /*@__PURE__*/ proxyCustomElement(class DynamicC
         this.udpChipClicked.emit(chipText);
     }
     render() {
-        return (h("div", { key: 'd3b85167e305ff00316a8265754e1c686e842371', class: "container" }, h("div", { key: 'bf3a7eb21bf2949608a6194919d609640c1ed660', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: '9287bc50db941f86f99c714f880c5159b6a19bb6', class: "overflow" }, h("udp-pop-over", { key: '85b2124352e62a633fcbc2ad187f51b76d533ccc', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: '005d1f2bd4bdbdf7e42c50cb00ac11a750555beb', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
+        return (h("div", { key: '7aa41191a2fd7b8852f465ac8a1957fb57a9791d', class: "container" }, h("div", { key: 'd62603a8717a3b95f6d4552c6ba44ad58885da3c', class: "chips" }, console.log('Received data for chips via executeQwith', this.visibleChildren), this.visibleChildren && this.visibleChildren.map((child, index) => (h("stencil-chip", { color: "secondary", key: index, text: child.description, "show-delete": "false", externalToggleString: this.externalToggle })))), h("div", { key: '584c495f74c2f53a0c6b53e3b23fe1dbbba481f4', class: "overflow" }, h("udp-pop-over", { key: '8ee9fb7ca327b54f6bf120d1e57fed80eb7211b4', isOpen: this.popoverOpen, anchorElement: document.getElementById('anchorElement') }, h("div", { key: '84ed96340e2c4eb20ee83dafb868301eea36b939', class: "menu" }, this.menuChildren && this.menuChildren.map((child, index) => (h("stencil-chip", { key: index, text: child.label, "show-delete": "false" }, " "))))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/udp-forms-builder-menu2.js

@@ -22,8 +22,8 @@ const UdpFormsBuilderMenu = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuild
     }
     render() {
         return [
-            h("div", { key: '68795e319ee119db34098c0984238abc5c6d9352', class: 'menu-header-container' }, h("unity-typography", { key: 'c1acecdeef282e600074287de2f641ddff70c52a', variant: "body1" }, "Choose a Question Type"), h("stencil-icon-button", { key: '796c233952bb7967b45520e0578a8721bd27c576', icon: getIconFromName('close16'), onClick: () => this.cancelClick.emit() })),
-            h("div", { key: '016a02f4c2cf5af71e7f1241d19fe0ef622e087e', class: "menu-options-container" }, this.questionsTemplate.map(q => (h("udp-button", { variant: "contained", color: "primary", onClick: () => this.addQuestion.emit(q), startIcon: h("udp-icon", { iconName: q.icon, color: 'inherit' }) }, q.questionTypeName)))),
+            h("div", { key: 'f490f7a9a90ad5b2950bb93b2295cb92093a64b8', class: 'menu-header-container' }, h("unity-typography", { key: '24bd89027e696522658a4408b81b0ca8288b4bfa', variant: "body1" }, "Choose a Question Type"), h("stencil-icon-button", { key: '3db3b42dfade4d548ac5b0111dad975c24e86052', icon: getIconFromName('close16'), onClick: () => this.cancelClick.emit() })),
+            h("div", { key: '172fcb129860019f0292c9f05086d3bb197bbe75', class: "menu-options-container" }, this.questionsTemplate.map(q => (h("udp-button", { variant: "contained", color: "primary", onClick: () => this.addQuestion.emit(q), startIcon: h("udp-icon", { iconName: q.icon, color: 'inherit' }) }, q.questionTypeName)))),
         ];
     }
     static get style() { return udpFormsBuilderMenuCss; }

package/dist/components/udp-forms-builder-style-override.js

@@ -70,7 +70,7 @@ const UdpFormsBuilderStyleOverride$1 = /*@__PURE__*/ proxyCustomElement(class Ud
     render() {
         // if (!this.isVisible) return null;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9;
-        return (h(Host, { key: '4009c6e83d90dd9d19d379f7685797d317929199' }, h("unity-typography", { key: 'b24f1321f16b06d6198bd59580ec44944228bd56', variant: "h6" }, "Backgrounds and Colors"), this.renderStyleTextField('Background Image', (_c = (_b = (_a = this.formMetadata) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b.backgroundImage) !== null && _c !== void 0 ? _c : '', 'background', 'backgroundImage'), this.renderStyleTextField('Background Color', (_f = (_e = (_d = this.formMetadata) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : '', 'background', 'backgroundColor'), this.renderStyleTextField('Header Background Color', (_h = (_g = this.formMetadata) === null || _g === void 0 ? void 0 : _g.headerBackgroundColor) !== null && _h !== void 0 ? _h : '', 'headerBackgroundColor'), h("udp-divider", { key: '2f55ef30ca29af61cb1169ce0a6f238ce0f945b3' }), h("unity-typography", { key: 'f6014d55e927a6be62b244117ac8d87d464a0374', variant: "h6" }, "Fonts"), this.renderStyleTextField('Font Family', (_k = (_j = this.formMetadata) === null || _j === void 0 ? void 0 : _j.fontFamily) !== null && _k !== void 0 ? _k : '', 'fontFamily'), this.renderStyleTextField('Question Text Font Family', (_o = (_m = (_l = this.formMetadata) === null || _l === void 0 ? void 0 : _l.questionText) === null || _m === void 0 ? void 0 : _m.fontFamily) !== null && _o !== void 0 ? _o : '', 'questionText', 'fontFamily'), this.renderStyleDropdownField('Question Text Typography', (_r = (_q = (_p = this.formMetadata) === null || _p === void 0 ? void 0 : _p.questionText) === null || _q === void 0 ? void 0 : _q.variant) !== null && _r !== void 0 ? _r : '', 'questionText', 'variant'), this.renderStyleTextField('Title Text Font Family', (_u = (_t = (_s = this.formMetadata) === null || _s === void 0 ? void 0 : _s.titleText) === null || _t === void 0 ? void 0 : _t.fontFamily) !== null && _u !== void 0 ? _u : '', 'titleText', 'fontFamily'), this.renderStyleDropdownField('Title Text Typography', (_x = (_w = (_v = this.formMetadata) === null || _v === void 0 ? void 0 : _v.titleText) === null || _w === void 0 ? void 0 : _w.variant) !== null && _x !== void 0 ? _x : '', 'titleText', 'variant'), this.renderStyleTextField('Paragraph Text Font Family', (_0 = (_z = (_y = this.formMetadata) === null || _y === void 0 ? void 0 : _y.paragraphText) === null || _z === void 0 ? void 0 : _z.fontFamily) !== null && _0 !== void 0 ? _0 : '', 'paragraphText', 'fontFamily'), this.renderStyleDropdownField('Paragraph Text Typography', (_3 = (_2 = (_1 = this.formMetadata) === null || _1 === void 0 ? void 0 : _1.paragraphText) === null || _2 === void 0 ? void 0 : _2.variant) !== null && _3 !== void 0 ? _3 : '', 'paragraphText', 'variant'), this.renderStyleTextField('Helper Text Font Family', (_6 = (_5 = (_4 = this.formMetadata) === null || _4 === void 0 ? void 0 : _4.helperText) === null || _5 === void 0 ? void 0 : _5.fontFamily) !== null && _6 !== void 0 ? _6 : '', 'helperText', 'fontFamily'), this.renderStyleDropdownField('Helper Text Typography', (_9 = (_8 = (_7 = this.formMetadata) === null || _7 === void 0 ? void 0 : _7.helperText) === null || _8 === void 0 ? void 0 : _8.variant) !== null && _9 !== void 0 ? _9 : '', 'helperText', 'variant')));
+        return (h(Host, { key: 'ad322bbae798a71e4c0e1bcf6ee1e0b19efd0b2d' }, h("unity-typography", { key: '69654e44f3287ca0ef7da615aa115d946bdc2267', variant: "h6" }, "Backgrounds and Colors"), this.renderStyleTextField('Background Image', (_c = (_b = (_a = this.formMetadata) === null || _a === void 0 ? void 0 : _a.background) === null || _b === void 0 ? void 0 : _b.backgroundImage) !== null && _c !== void 0 ? _c : '', 'background', 'backgroundImage'), this.renderStyleTextField('Background Color', (_f = (_e = (_d = this.formMetadata) === null || _d === void 0 ? void 0 : _d.background) === null || _e === void 0 ? void 0 : _e.backgroundColor) !== null && _f !== void 0 ? _f : '', 'background', 'backgroundColor'), this.renderStyleTextField('Header Background Color', (_h = (_g = this.formMetadata) === null || _g === void 0 ? void 0 : _g.headerBackgroundColor) !== null && _h !== void 0 ? _h : '', 'headerBackgroundColor'), h("udp-divider", { key: '0bf14bc71b0197d5825417b38758cb8b4be57f06' }), h("unity-typography", { key: '980dea5b0a0e044a3f5d83d58fd64a1ba3e97c42', variant: "h6" }, "Fonts"), this.renderStyleTextField('Font Family', (_k = (_j = this.formMetadata) === null || _j === void 0 ? void 0 : _j.fontFamily) !== null && _k !== void 0 ? _k : '', 'fontFamily'), this.renderStyleTextField('Question Text Font Family', (_o = (_m = (_l = this.formMetadata) === null || _l === void 0 ? void 0 : _l.questionText) === null || _m === void 0 ? void 0 : _m.fontFamily) !== null && _o !== void 0 ? _o : '', 'questionText', 'fontFamily'), this.renderStyleDropdownField('Question Text Typography', (_r = (_q = (_p = this.formMetadata) === null || _p === void 0 ? void 0 : _p.questionText) === null || _q === void 0 ? void 0 : _q.variant) !== null && _r !== void 0 ? _r : '', 'questionText', 'variant'), this.renderStyleTextField('Title Text Font Family', (_u = (_t = (_s = this.formMetadata) === null || _s === void 0 ? void 0 : _s.titleText) === null || _t === void 0 ? void 0 : _t.fontFamily) !== null && _u !== void 0 ? _u : '', 'titleText', 'fontFamily'), this.renderStyleDropdownField('Title Text Typography', (_x = (_w = (_v = this.formMetadata) === null || _v === void 0 ? void 0 : _v.titleText) === null || _w === void 0 ? void 0 : _w.variant) !== null && _x !== void 0 ? _x : '', 'titleText', 'variant'), this.renderStyleTextField('Paragraph Text Font Family', (_0 = (_z = (_y = this.formMetadata) === null || _y === void 0 ? void 0 : _y.paragraphText) === null || _z === void 0 ? void 0 : _z.fontFamily) !== null && _0 !== void 0 ? _0 : '', 'paragraphText', 'fontFamily'), this.renderStyleDropdownField('Paragraph Text Typography', (_3 = (_2 = (_1 = this.formMetadata) === null || _1 === void 0 ? void 0 : _1.paragraphText) === null || _2 === void 0 ? void 0 : _2.variant) !== null && _3 !== void 0 ? _3 : '', 'paragraphText', 'variant'), this.renderStyleTextField('Helper Text Font Family', (_6 = (_5 = (_4 = this.formMetadata) === null || _4 === void 0 ? void 0 : _4.helperText) === null || _5 === void 0 ? void 0 : _5.fontFamily) !== null && _6 !== void 0 ? _6 : '', 'helperText', 'fontFamily'), this.renderStyleDropdownField('Helper Text Typography', (_9 = (_8 = (_7 = this.formMetadata) === null || _7 === void 0 ? void 0 : _7.helperText) === null || _8 === void 0 ? void 0 : _8.variant) !== null && _9 !== void 0 ? _9 : '', 'helperText', 'variant')));
     }
     static get style() { return udpFormsBuilderStyleOverrideCss; }
 }, [257, "udp-forms-builder-style-override", {

package/dist/components/udp-forms-builder.js

@@ -7,10 +7,11 @@ import Sortable from 'sortablejs';
 import { v4 } from 'uuid';
 import { f as formMetadataDefault, d as deepCloneFormSections, a as formSectionDefault, s as styleOverrideDefault } from './forms-builder-utils.js';
 import { b as UdpFormsPageIdEnum, a as UdpFormsTypeEnum } from './enums.js';
-import { d as defineCustomElement$A } from './custom-button2.js';
-import { d as defineCustomElement$z } from './date-time-renderer2.js';
-import { d as defineCustomElement$y } from './file-upload-renderer2.js';
-import { d as defineCustomElement$x } from './fluent-dialog2.js';
+import { d as defineCustomElement$B } from './custom-button2.js';
+import { d as defineCustomElement$A } from './date-time-renderer2.js';
+import { d as defineCustomElement$z } from './file-upload-renderer2.js';
+import { d as defineCustomElement$y } from './fluent-dialog2.js';
+import { d as defineCustomElement$x } from './form-metadata-display-renderer2.js';
 import { d as defineCustomElement$w } from './list-options-renderer2.js';
 import { d as defineCustomElement$v } from './numeric-field2.js';
 import { d as defineCustomElement$u } from './primary-action-header2.js';
@@ -65,7 +66,7 @@ const UdpFormsBuilder$1 = /*@__PURE__*/ proxyCustomElement(class UdpFormsBuilder
         this.__attachShadow();
         this.isFollowUpFormConfigOn = false; // allow form engine to use follow-up forms feature
         this.isPublicFormConfigOn = false; // allow form engine to use public forms feature
-        this.isCommentingConfigOn = false; // allow form engine to use commenting feature
+        this.isCommentingConfigOn = true; // allow form engine to use commenting feature
         this.formsBuilderUrlPath = ''; // alternative path for redirect to the form builder page. If not provided, use default path.
         this.formMetadata = formMetadataDefault;
         this.formSections = [];
@@ -674,7 +675,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["udp-forms-builder", "custom-button", "date-time-renderer", "file-upload-renderer", "fluent-dialog", "list-options-renderer", "numeric-field", "primary-action-header", "question-configs-renderer", "question-specific-configs-renderer", "section-configs-renderer", "signature-renderer", "stencil-chip", "stencil-icon-button", "stencil-toggle", "text-area", "text-field", "text-input-renderer", "udp-ambient-tool-tip", "udp-avatar", "udp-badge", "udp-button", "udp-container", "udp-date-selector", "udp-datetime-selector", "udp-forms-builder-menu", "udp-forms-builder-question-item", "udp-icon", "udp-linear-loader", "udp-menu-item", "udp-pop-over", "udp-selector", "udp-side-sheet", "udp-tabs", "udp-time-selector", "unity-typography"];
+    const components = ["udp-forms-builder", "custom-button", "date-time-renderer", "file-upload-renderer", "fluent-dialog", "form-metadata-display-renderer", "list-options-renderer", "numeric-field", "primary-action-header", "question-configs-renderer", "question-specific-configs-renderer", "section-configs-renderer", "signature-renderer", "stencil-chip", "stencil-icon-button", "stencil-toggle", "text-area", "text-field", "text-input-renderer", "udp-ambient-tool-tip", "udp-avatar", "udp-badge", "udp-button", "udp-container", "udp-date-selector", "udp-datetime-selector", "udp-forms-builder-menu", "udp-forms-builder-question-item", "udp-icon", "udp-linear-loader", "udp-menu-item", "udp-pop-over", "udp-selector", "udp-side-sheet", "udp-tabs", "udp-time-selector", "unity-typography"];
     components.forEach(tagName => { switch (tagName) {
         case "udp-forms-builder":
             if (!customElements.get(tagName)) {
@@ -683,20 +684,25 @@ function defineCustomElement$1() {
             break;
         case "custom-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$A();
+                defineCustomElement$B();
             }
             break;
         case "date-time-renderer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$z();
+                defineCustomElement$A();
             }
             break;
         case "file-upload-renderer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$y();
+                defineCustomElement$z();
             }
             break;
         case "fluent-dialog":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$y();
+            }
+            break;
+        case "form-metadata-display-renderer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$x();
             }