npm - udp-stencil-component-library - Versions diffs - 1.0.2 → 1.0.3 - Mend

udp-stencil-component-library 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (638) hide show

package/dist/collection/components/my-component/UI/inputs/numeric-field/numeric-field.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"numeric-field.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/inputs/numeric-field/numeric-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Host,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { InputSize, InputMargin } from '../input-types';\n\n/*\n A standardized numeric input field component with validation, error handling, and number constraints.\n * Supports both controlled and uncontrolled modes.\n \n This component emits a custom `change` event with the committed value and also\n * propagates standard DOM events like `input`, `focus`, and `blur` from the\n * underlying input element.\n \n @example\n * ```tsx\n * // Uncontrolled component with initial value\n * <numeric-field\n * placeholder=\"Enter age\"\n * initialValue=\"25\"\n * min=\"0\"\n * max=\"120\"\n * onChange={(e) => console.log('Age:', e.detail)}\n * />\n \n // Controlled component\n * <numeric-field\n * placeholder=\"Enter price\"\n * value={priceValue}\n * step=\"0.01\"\n * min=\"0\"\n * onChange={(e) => setPriceValue(e.detail)}\n * />\n \n // With validation and constraints\n * <numeric-field\n * label=\"Quantity\"\n * placeholder=\"Enter quantity\"\n * required={true}\n * error={quantityError}\n * value={quantity}\n * min=\"1\"\n * max=\"999\"\n * step=\"1\"\n * onChange={handleQuantityChange}\n * />\n * ```\n /\n@Component({\n tag: 'numeric-field',\n styleUrl: 'numeric-field.css',\n shadow: true,\n})\nexport class NumericField {\n /\n Unique identifier for the input element. Used for form association and accessibility.\n /\n @Prop() id: string;\n\n /\n Name attribute for the input element. Used for form submission.\n /\n @Prop() name: string;\n\n /\n Label text displayed above the input field. Used for accessibility and user guidance.\n /\n @Prop() label: string;\n\n /\n Placeholder text shown when the input is empty. Provides hints about expected input format.\n /\n @Prop() placeholder: string;\n\n /\n Whether the field is required for form submission. Adds visual indicator () and validation.\n /\n @Prop() required: boolean;\n\n /*\n Whether the field is read-only. Users can see the value but cannot modify it.\n /\n @Prop() readOnly: boolean;\n\n /\n Whether the field is disabled. Users cannot interact with the field.\n /\n @Prop() disabled: boolean;\n\n /\n Maximum number of characters allowed in the input. Enforces character limits.\n /\n @Prop() maxCharacter: number;\n\n /\n Initial value for the numeric field. Used for uncontrolled components to set the default value.\n * Only used when `value` prop is not provided.\n /\n @Prop() initialValue: string;\n\n /\n Current value of the numeric field. When provided, makes this a controlled component.\n * The component will use this value and update it through events.\n /\n @Prop({ mutable: true }) value: string;\n\n /\n Whether the field should be hidden from display while maintaining form functionality.\n /\n @Prop() hidden: boolean;\n\n /\n Error message to display below the input field. Shows validation errors or other issues.\n /\n @Prop() error: string = '';\n\n /\n Input mode hint for mobile keyboards. Optimizes keyboard layout for numeric input.\n * Common values: 'numeric', 'decimal'\n /\n @Prop() inputMode: string;\n\n /\n Minimum value allowed for the numeric input. Enforces lower bounds validation.\n /\n @Prop() min: string;\n\n /\n Maximum value allowed for the numeric input. Enforces upper bounds validation.\n /\n @Prop() max: string;\n\n /\n Step value for numeric input increments. Defines the granularity of allowed values.\n * For example, \"0.01\" for currency, \"1\" for integers.\n /\n @Prop() step: string;\n\n /\n Size variant controlling the padding and spacing of the input.\n * - 'small': Compact spacing for data-heavy interfaces\n * - 'normal': Standard spacing (default)\n * - 'large': Generous spacing for accessibility\n /\n @Prop() size: InputSize = 'normal';\n\n /\n Margin variant for the input spacing.\n * - 'none': No margin\n * - 'dense': Minimal margin spacing\n * - 'normal': Standard margin spacing (default)\n /\n @Prop() margin: InputMargin = 'normal';\n\n /\n Internal value state. Manages the current input value independently of props.\n * @internal\n /\n @State() internalValue: string = '';\n\n /\n Internal error message state. Manages display of validation errors.\n * @internal\n /\n @State() errorMessage: string;\n\n /\n Emitted when the numeric field value changes (on blur, enter, etc.).\n * Provides the final committed value when user finishes editing.\n \n @event change\n * @param {string} value - The current value of the numeric field\n \n @example\n * ```tsx\n * <numeric-field onChange={(e) => handleValueChange(e.detail)} />\n * ```\n /\n @Event() change: EventEmitter<string>;\n\n\n /\n Updates the error message when the error prop changes.\n * @internal\n /\n @Watch('error')\n updateError() {\n this.errorMessage = this.error;\n }\n\n /\n Updates the internal value when initialValue prop changes.\n * Only updates if current value is empty or if this is an uncontrolled component.\n * @internal\n /\n @Watch('initialValue')\n initialValueChanged(newValue: string) {\n // Only update if we don't have a value yet or if this is uncontrolled (no value prop)\n if ((this.internalValue === '' \|\| this.internalValue === undefined) \|\| this.value === undefined) {\n if (newValue !== undefined) {\n this.internalValue = newValue;\n }\n }\n }\n\n /\n Updates the internal value when value prop changes.\n * For controlled components, the value prop takes precedence.\n * @internal\n /\n @Watch('value')\n valueChanged() {\n // If value prop is provided, this is a controlled component\n if (this.value !== undefined && this.value !== this.internalValue) {\n this.internalValue = this.value;\n }\n }\n\n /\n Component lifecycle method. Initializes error message and internal value.\n * @internal\n /\n componentWillLoad() {\n // Initialize value: use value prop if provided (controlled), otherwise use initialValue (uncontrolled)\n this.internalValue = this.value !== undefined ? this.value : (this.initialValue \|\| '');\n\n if (this.error) {\n this.errorMessage = this.error;\n }\n }\n\n /\n Handles input events (real-time typing). Updates internal state and emits input event.\n * For controlled components, also updates the value prop.\n * @param event - The native input event\n * @internal\n /\n private onInput = (event: InputEvent) => {\n const newValue = (event.target as HTMLInputElement).value;\n this.internalValue = newValue; // Update internal state\n\n // If this is a controlled component (value prop provided), update the value prop\n if (this.value !== undefined) {\n this.value = newValue;\n }\n }\n\n /\n Handles change events (committed changes on blur/enter). Emits change event.\n * @param event - The native change event\n * @internal\n /\n private onChange = (event: Event) => {\n const newValue = (event.target as HTMLInputElement).value;\n // Emit change event when user finishes editing (blur, enter, etc.)\n this.change.emit(newValue);\n }\n\n /\n Handles focus events. Event bubbles up to stencil-field automatically.\n * @internal\n /\n private onFocus = () => {\n // Event will bubble up to stencil-field automatically\n }\n\n /\n Handles blur events. Event bubbles up to stencil-field automatically.\n * @internal\n /\n private onBlur = () => {\n // Event will bubble up to stencil-field automatically\n }\n\n /\n Renders the numeric field component.\n * @returns JSX element\n * @internal\n /\n render() {\n const isError = !!this.errorMessage;\n\n const inputClass = {\n 'bx--text-input': true,\n 'bx--text-input--error': isError,\n 'text-field--disabled': this.disabled,\n };\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': isError,\n 'udp-input--disabled': this.disabled,\n 'udp-input--hidden': this.hidden,\n 'udp-input--required': this.required,\n 'udp-input--readonly': this.readOnly,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n aria-invalid={isError ? 'true' : 'false'}\n aria-required={this.required ? 'true' : 'false'}\n >\n <div class=\"bx--form-item\">\n <unity-typography variant=\"caption-text\">\n <label htmlFor={this.id} class=\"bx--label\">\n {this.label}\n {this.required ? '' : ''}\n </label>\n </unity-typography>\n {this.hidden ? (\n <input id={this.id} type=\"hidden\" value={this.internalValue} name={this.name} />\n ) : (\n <input\n id={this.id}\n name={this.name}\n type=\"number\"\n class={{ ...inputClass }}\n placeholder={this.placeholder}\n value={this.internalValue}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readOnly}\n onFocus={this.onFocus}\n onInput={this.onInput}\n onChange={this.onChange}\n onBlur={this.onBlur}\n inputMode={this.inputMode}\n min={this.min}\n max={this.max}\n step={this.step}\n //@ts-ignore\n udprecordid={'udpRecord-number-field-' + this.id}\n />\n )}\n {isError && (\n <div class=\"error-message\">\n <unity-typography variant=\"caption-text\" color=\"error\">{this.errorMessage}</unity-typography>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"numeric-field.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/inputs/numeric-field/numeric-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Host,\n State,\n Event,\n EventEmitter,\n Watch,\n} from '@stencil/core';\nimport { InputSize, InputMargin } from '../input-types';\n\n/*\n A standardized numeric input field component with validation, error handling, and number constraints.\n * Supports both controlled and uncontrolled modes.\n \n This component emits a custom `change` event with the committed value and also\n * propagates standard DOM events like `input`, `focus`, and `blur` from the\n * underlying input element.\n \n @example\n * ```tsx\n * // Uncontrolled component with initial value\n * <numeric-field\n * placeholder=\"Enter age\"\n * initialValue=\"25\"\n * min=\"0\"\n * max=\"120\"\n * onChange={(e) => console.log('Age:', e.detail)}\n * />\n \n // Controlled component\n * <numeric-field\n * placeholder=\"Enter price\"\n * value={priceValue}\n * step=\"0.01\"\n * min=\"0\"\n * onChange={(e) => setPriceValue(e.detail)}\n * />\n \n // With validation and constraints\n * <numeric-field\n * label=\"Quantity\"\n * placeholder=\"Enter quantity\"\n * required={true}\n * error={quantityError}\n * value={quantity}\n * min=\"1\"\n * max=\"999\"\n * step=\"1\"\n * onChange={handleQuantityChange}\n * />\n * ```\n /\n@Component({\n tag: 'numeric-field',\n styleUrl: 'numeric-field.css',\n shadow: true,\n})\nexport class NumericField {\n /\n Unique identifier for the input element. Used for form association and accessibility.\n /\n @Prop() id: string;\n\n /\n Name attribute for the input element. Used for form submission.\n /\n @Prop() name: string;\n\n /\n Label text displayed above the input field. Used for accessibility and user guidance.\n /\n @Prop() label: string;\n\n /\n Placeholder text shown when the input is empty. Provides hints about expected input format.\n /\n @Prop() placeholder: string;\n\n /\n Whether the field is required for form submission. Adds visual indicator () and validation.\n /\n @Prop() required: boolean;\n\n /*\n Whether the field is read-only. Users can see the value but cannot modify it.\n /\n @Prop() readonly: boolean;\n\n /\n Whether the field is disabled. Users cannot interact with the field.\n /\n @Prop() disabled: boolean;\n\n /\n Maximum number of characters allowed in the input. Enforces character limits.\n /\n @Prop() maxCharacter: number;\n\n /\n Initial value for the numeric field. Used for uncontrolled components to set the default value.\n * Only used when `value` prop is not provided.\n /\n @Prop() initialValue: string;\n\n /\n Current value of the numeric field. When provided, makes this a controlled component.\n * The component will use this value and update it through events.\n /\n @Prop({ mutable: true }) value: string;\n\n /\n Whether the field should be hidden from display while maintaining form functionality.\n /\n @Prop() hidden: boolean;\n\n /\n Error message to display below the input field. Shows validation errors or other issues.\n /\n @Prop() error: string = '';\n\n /\n Input mode hint for mobile keyboards. Optimizes keyboard layout for numeric input.\n * Common values: 'numeric', 'decimal'\n /\n @Prop() inputMode: string;\n\n /\n Minimum value allowed for the numeric input. Enforces lower bounds validation.\n /\n @Prop() min: string;\n\n /\n Maximum value allowed for the numeric input. Enforces upper bounds validation.\n /\n @Prop() max: string;\n\n /\n Step value for numeric input increments. Defines the granularity of allowed values.\n * For example, \"0.01\" for currency, \"1\" for integers.\n /\n @Prop() step: string;\n\n /\n Size variant controlling the padding and spacing of the input.\n * - 'small': Compact spacing for data-heavy interfaces\n * - 'normal': Standard spacing (default)\n * - 'large': Generous spacing for accessibility\n /\n @Prop() size: InputSize = 'normal';\n\n /\n Margin variant for the input spacing.\n * - 'none': No margin\n * - 'dense': Minimal margin spacing\n * - 'normal': Standard margin spacing (default)\n /\n @Prop() margin: InputMargin = 'normal';\n\n /\n Internal value state. Manages the current input value independently of props.\n * @internal\n /\n @State() internalValue: string = '';\n\n /\n Internal error message state. Manages display of validation errors.\n * @internal\n /\n @State() errorMessage: string;\n\n /\n Emitted when the numeric field value changes (on blur, enter, etc.).\n * Provides the final committed value when user finishes editing.\n \n @event change\n * @param {string} value - The current value of the numeric field\n \n @example\n * ```tsx\n * <numeric-field onChange={(e) => handleValueChange(e.detail)} />\n * ```\n /\n @Event() change: EventEmitter<string>;\n\n\n /\n Updates the error message when the error prop changes.\n * @internal\n /\n @Watch('error')\n updateError() {\n this.errorMessage = this.error;\n }\n\n /\n Updates the internal value when initialValue prop changes.\n * Only updates if current value is empty or if this is an uncontrolled component.\n * @internal\n /\n @Watch('initialValue')\n initialValueChanged(newValue: string) {\n // Only update if we don't have a value yet or if this is uncontrolled (no value prop)\n if ((this.internalValue === '' \|\| this.internalValue === undefined) \|\| this.value === undefined) {\n if (newValue !== undefined) {\n this.internalValue = newValue;\n }\n }\n }\n\n /\n Updates the internal value when value prop changes.\n * For controlled components, the value prop takes precedence.\n * @internal\n /\n @Watch('value')\n valueChanged() {\n // If value prop is provided, this is a controlled component\n if (this.value !== undefined && this.value !== this.internalValue) {\n this.internalValue = this.value;\n }\n }\n\n /\n Component lifecycle method. Initializes error message and internal value.\n * @internal\n /\n componentWillLoad() {\n // Initialize value: use value prop if provided (controlled), otherwise use initialValue (uncontrolled)\n this.internalValue = this.value !== undefined ? this.value : (this.initialValue \|\| '');\n\n if (this.error) {\n this.errorMessage = this.error;\n }\n }\n\n /\n Handles input events (real-time typing). Updates internal state and emits input event.\n * For controlled components, also updates the value prop.\n * @param event - The native input event\n * @internal\n /\n private onInput = (event: InputEvent) => {\n const newValue = (event.target as HTMLInputElement).value;\n this.internalValue = newValue; // Update internal state\n\n // If this is a controlled component (value prop provided), update the value prop\n if (this.value !== undefined) {\n this.value = newValue;\n }\n }\n\n /\n Handles change events (committed changes on blur/enter). Emits change event.\n * @param event - The native change event\n * @internal\n /\n private onChange = (event: Event) => {\n const newValue = (event.target as HTMLInputElement).value;\n // Emit change event when user finishes editing (blur, enter, etc.)\n this.change.emit(newValue);\n }\n\n /\n Handles focus events. Event bubbles up to stencil-field automatically.\n * @internal\n /\n private onFocus = () => {\n // Event will bubble up to stencil-field automatically\n }\n\n /\n Handles blur events. Event bubbles up to stencil-field automatically.\n * @internal\n /\n private onBlur = () => {\n // Event will bubble up to stencil-field automatically\n }\n\n /\n Renders the numeric field component.\n * @returns JSX element\n * @internal\n /\n render() {\n const isError = !!this.errorMessage;\n\n const inputClass = {\n 'bx--text-input': true,\n 'bx--text-input--error': isError,\n 'text-field--disabled': this.disabled,\n };\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': isError,\n 'udp-input--disabled': this.disabled,\n 'udp-input--hidden': this.hidden,\n 'udp-input--required': this.required,\n 'udp-input--readonly': this.readonly,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n aria-invalid={isError ? 'true' : 'false'}\n aria-required={this.required ? 'true' : 'false'}\n >\n <div class=\"bx--form-item\">\n <unity-typography variant=\"caption-text\">\n <label htmlFor={this.id} class=\"bx--label\">\n {this.label}\n {this.required ? '' : ''}\n </label>\n </unity-typography>\n {this.hidden ? (\n <input id={this.id} type=\"hidden\" value={this.internalValue} name={this.name} />\n ) : (\n <input\n id={this.id}\n name={this.name}\n type=\"number\"\n class={{ ...inputClass }}\n placeholder={this.placeholder}\n value={this.internalValue}\n required={this.required}\n disabled={this.disabled}\n readOnly={this.readonly}\n onFocus={this.onFocus}\n onInput={this.onInput}\n onChange={this.onChange}\n onBlur={this.onBlur}\n inputMode={this.inputMode}\n min={this.min}\n max={this.max}\n step={this.step}\n //@ts-ignore\n udprecordid={'udpRecord-number-field-' + this.id}\n />\n )}\n {isError && (\n <div class=\"error-message\">\n <unity-typography variant=\"caption-text\" color=\"error\">{this.errorMessage}</unity-typography>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/my-component/UI/inputs/signature-input/signature-input.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { isUdpDriveFile, downloadFileFromUdpDriveFile } from "../file-upload/udp-drive-utils";
+import { isUdpDriveFile, isFileReference, parseFileReference, downloadFileFromUdpDriveFile, createFileFromString, isFile, } from "../file-upload/udp-drive-utils";
 export class SignatureInput {
     constructor() {
         /**
@@ -74,30 +74,60 @@ export class SignatureInput {
         }
     }
     async onInitialValueChange(newValue) {
-        let file = newValue;
-        if (file) {
-            if (Array.isArray(file)) {
-                file = file[0]; // Handle case where initialValue is an array
-            }
-            if (isUdpDriveFile(file)) {
-                try {
-                    const loadedFile = await downloadFileFromUdpDriveFile(file);
-                    this.value = loadedFile;
-                    this.readonly = false;
-                }
-                catch (err) {
-                    console.error('Failed to fetch UdpDriveFile for signature:', err);
-                    return;
+        if (!newValue) {
+            return;
+        }
+        try {
+            const value = Array.isArray(newValue) ? newValue[0] : newValue;
+            if (!value)
+                return;
+            let loadedFile = null;
+            // Case 1: The value is a special reference string (e.g., "name|udp:id" or "name|b64:data")
+            if (typeof value === 'string' && isFileReference(value)) {
+                const parsedFile = await parseFileReference(value);
+                if (parsedFile) {
+                    // If it was a UDP reference, the parsed file is a placeholder. We need to download the content.
+                    if (parsedFile.driveFileId) {
+                        const udpInfo = {
+                            name: parsedFile.name,
+                            driveFileId: parsedFile.driveFileId,
+                            extension: parsedFile.name.split('.').pop() || '',
+                            tenantId: null, // Dummy value, assuming not needed for download
+                            productId: 0, // Dummy value
+                            path: '', // Dummy value
+                        };
+                        loadedFile = await downloadFileFromUdpDriveFile(udpInfo);
+                    }
+                    else {
+                        // If it was a base64 reference, the file content is already loaded.
+                        loadedFile = parsedFile;
+                    }
                 }
             }
-            else if (typeof newValue === 'string') {
-                this.value = await this.urlToFile(newValue, 'initial_signature.png');
+            // Case 2: The value is a UdpDriveFile object
+            else if (isUdpDriveFile(value)) {
+                loadedFile = await downloadFileFromUdpDriveFile(value);
+            }
+            // Case 3: The value is a standard URL or data-uri string
+            else if (typeof value === 'string') {
+                loadedFile = await createFileFromString(value, 'initial_signature.png');
+            }
+            // Case 4: The value is already a File object
+            else if (isFile(value)) {
+                loadedFile = value;
+            }
+            // If a file was successfully prepared, update the component
+            if (loadedFile) {
+                this.value = loadedFile;
+                this.resizeCanvasForDPR();
+                this.initializeSignaturePad();
             }
             else {
-                this.value = newValue;
+                console.warn('Initial value could not be processed into a valid file:', value);
             }
-            this.resizeCanvasForDPR();
-            this.initializeSignaturePad();
+        }
+        catch (err) {
+            console.error('Failed to process initial value for signature pad:', err);
         }
     }
     async componentWillLoad() {
@@ -218,7 +248,7 @@ export class SignatureInput {
             'readonly': this.readonly,
             'disabled': this.disabled,
         };
-        return (h(Host, { key: 'b56e3aa753999f61e26d33980c728ede6080b413', class: {
+        return (h(Host, { key: 'fbdb1a7c619c9d857b246cd0c22d76a2cdecbe5c', class: {
                 'udp-input': true,
                 'udp-input--error': isError,
                 'udp-input--disabled': this.disabled,
@@ -226,7 +256,7 @@ export class SignatureInput {
                 'udp-input--readonly': this.readonly,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: '8166da65f5dc1002d6e5de643331c2c8728bb2ca', class: "bx--form-item" }, this.label && (h("unity-typography", { key: 'e5811a0937a2b5f59fa8eba6a2abf44931d53c4e', variant: "caption-text" }, h("label", { key: 'bf44b8563f260bff1db5ff1f1e136c14d8a2f32b', htmlFor: this.id, class: "bx--label" }, this.label, this.required && '*'))), h("div", { key: '4ebc3753801e79d62da3b61aee8ed09203e22a42', class: containerClasses }, h("canvas", { key: '43860cbf141d3bb2f45ef62a88f0894697202161', ref: el => (this.canvasEl = el), class: { 'signature-canvas': true, 'readonly': this.readonly || this.disabled }, id: this.id }), !this.readonly && !this.disabled && (h("button", { key: '45d1ed0764057bfe908ee89ea1a22376ecaaf84c', type: "button", class: "clear-button", onClick: this.clearSignature, disabled: this.disabled }, "Clear"))), isError && (h("div", { key: '687f1694c19304cebdca3b03a32765ec177e72e6', class: "error-message" }, h("unity-typography", { key: 'ba66b72167f4b8165a72cd6f60dfc6a44707360a', variant: "caption-text", color: "error" }, this.internalError))))));
+            } }, h("div", { key: 'cc61b8c78a837a27815cefe6f05a44aa0cf79fd3', class: "bx--form-item" }, this.label && (h("unity-typography", { key: '68d20d02f044f0ca1c0a8318b6ac01cbf5878258', variant: "caption-text" }, h("label", { key: '33196dec5e0fda28b9e139837b8e0cad604731af', htmlFor: this.id, class: "bx--label" }, this.label, this.required && '*'))), h("div", { key: '59421fd7fc93eabec847a43d035bdf23a8d837ed', class: containerClasses }, h("canvas", { key: '66510e6aed0c582a24ada1dea11ebf0052288b0f', ref: el => (this.canvasEl = el), class: { 'signature-canvas': true, 'readonly': this.readonly || this.disabled }, id: this.id }), !this.readonly && !this.disabled && (h("button", { key: '42389616c9eff97410fe944d7b561dc3c34482ce', type: "button", class: "clear-button", onClick: this.clearSignature, disabled: this.disabled }, "Clear"))), isError && (h("div", { key: '560500b756625db1788770e2a5fb9c4c35f661ae', class: "error-message" }, h("unity-typography", { key: '6a9ced9c1052e3a537759ad308f10a008312802c', variant: "caption-text", color: "error" }, this.internalError))))));
     }
     static get is() { return "signature-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/inputs/signature-input/signature-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"signature-input.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/inputs/signature-input/signature-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, State, Watch, Event, EventEmitter, Element, Host } from '@stencil/core';\nimport type SignaturePad from 'signature_pad';\nimport { UdpDriveFile } from '../../../../../global/types';\nimport { InputSize, InputMargin } from '../input-types';\nimport {\n isUdpDriveFile,\n downloadFileFromUdpDriveFile\n} from '../file-upload/udp-drive-utils';\n\n@Component({\n tag: 'signature-input',\n styleUrl: 'signature-input.css',\n shadow: true,\n})\nexport class SignatureInput {\n @Element() el: HTMLElement;\n\n /*\n Label for the input field.\n /\n @Prop() label: string;\n\n /\n Unique identifier for the input.\n /\n @Prop() id: string;\n\n /\n Whether the field is required.\n /\n @Prop() required: boolean;\n\n /\n Whether the field is disabled.\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether the field is read-only.\n /\n @Prop() readonly: boolean = false;\n\n /\n Error message to display.\n /\n @Prop() error: string;\n\n /\n Size variant for the signature input.\n * - 'small': Compact signature area\n * - 'normal': Standard signature area (default)\n * - 'large': Generous signature area\n /\n @Prop() size: InputSize = 'normal';\n\n /\n Margin variant for the input spacing.\n * - 'none': No margin\n * - 'dense': Minimal margin spacing\n * - 'normal': Standard margin spacing (default)\n /\n @Prop() margin: InputMargin = 'normal';\n\n /\n The current value of the signature, can be a File or UdpDriveFile.\n /\n @Prop({ mutable: true }) value: File \| UdpDriveFile;\n\n /\n The initial value, used if `value` is not provided.\n /\n @Prop() initialValue: File \| UdpDriveFile \| string;\n\n /\n Emitted when the signature changes.\n /\n @Event() change: EventEmitter<File \| null>;\n\n @State() private internalError: string;\n @State() private signaturePad: SignaturePad;\n\n private canvasEl: HTMLCanvasElement;\n private SignaturePadLib: typeof SignaturePad;\n\n private lastCanvasRect: DOMRect;\n private resizeTimeout: any;\n\n @Watch('error')\n onErrorChange(newValue: string) {\n this.internalError = newValue;\n }\n\n @Watch('value')\n async onValueChange(newValue: File \| UdpDriveFile) {\n await this.loadSignaturePad();\n if (this.signaturePad) {\n this.signaturePad.clear();\n if (newValue) {\n this.loadSignature(newValue);\n }\n }\n }\n\n @Watch('initialValue')\n async onInitialValueChange(newValue: File \| UdpDriveFile \| string) {\n let file = newValue;\n if (file) {\n if(Array.isArray(file)) {\n file = file[0]; // Handle case where initialValue is an array\n }\n if (isUdpDriveFile(file)) {\n try {\n const loadedFile = await downloadFileFromUdpDriveFile(file as UdpDriveFile);\n this.value = loadedFile;\n this.readonly = false;\n } catch (err) {\n console.error('Failed to fetch UdpDriveFile for signature:', err);\n return;\n }\n } else if (typeof newValue === 'string') {\n this.value = await this.urlToFile(newValue as string, 'initial_signature.png');\n } else {\n this.value = newValue;\n }\n this.resizeCanvasForDPR();\n this.initializeSignaturePad();\n }\n }\n\n async componentWillLoad() {\n this.internalError = this.error;\n await this.loadSignaturePad();\n }\n\n async componentDidLoad() {\n let file = this.initialValue;\n if (file) {\n if(Array.isArray(file)) {\n file = file[0]; // Handle case where initialValue is an array\n }\n if (isUdpDriveFile(this.initialValue)) {\n // Try to fetch the file from UdpDriveFile\n console.log('Loading signature from UdpDriveFile:', this.initialValue);\n try {\n const file = await downloadFileFromUdpDriveFile(this.initialValue as UdpDriveFile);\n this.value = file;\n this.readonly = false; // Try editable first\n } catch (err) {\n console.error('Failed to fetch UdpDriveFile for signature:', err);\n this.value = this.initialValue;\n this.readonly = true; // Fallback to readonly if not editable\n }\n } else {\n this.value = await this.urlToFile(this.initialValue as string, 'initial_signature.png');\n }\n }\n this.resizeCanvasForDPR();\n this.initializeSignaturePad();\n this.lastCanvasRect = this.canvasEl.getBoundingClientRect();\n window.addEventListener('resize', this.handleResize);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n if (this.resizeTimeout) clearTimeout(this.resizeTimeout);\n }\n\n private handleResize = () => {\n if (this.resizeTimeout) clearTimeout(this.resizeTimeout);\n this.resizeTimeout = setTimeout(() => {\n const rect = this.canvasEl.getBoundingClientRect();\n if (!this.lastCanvasRect \|\| rect.width !== this.lastCanvasRect.width \|\| rect.height !== this.lastCanvasRect.height) {\n // Save current signature as dataURL\n let dataURL = this.signaturePad && !this.signaturePad.isEmpty() ? this.signaturePad.toDataURL() : null;\n this.resizeCanvasForDPR();\n this.initializeSignaturePad();\n this.lastCanvasRect = rect;\n // Restore signature if it existed\n if (dataURL && this.signaturePad) {\n this.signaturePad.fromDataURL(dataURL);\n }\n }\n }, 200);\n }\n\n private resizeCanvasForDPR() {\n if (!this.canvasEl) return;\n const ratio = window.devicePixelRatio \|\| 1;\n // Get the CSS size\n const rect = this.canvasEl.getBoundingClientRect();\n this.canvasEl.width = rect.width ratio;\n this.canvasEl.height = rect.height * ratio;\n this.canvasEl.getContext('2d').scale(ratio, ratio);\n }\n\n private async loadSignaturePad() {\n if (!this.SignaturePadLib) {\n try {\n const module = await import('signature_pad');\n this.SignaturePadLib = module.default;\n } catch (e) {\n console.error('Failed to load signature_pad library', e);\n }\n }\n }\n\n private initializeSignaturePad() {\n this.resizeCanvasForDPR();\n if (this.SignaturePadLib && this.canvasEl) {\n this.signaturePad = new this.SignaturePadLib(this.canvasEl);\n this.signaturePad.addEventListener(\"endStroke\", this.handleSignatureEnd);\n this.handleStateChange();\n if (this.value) {\n this.loadSignature(this.value);\n }\n }\n }\n\n @Watch('disabled')\n @Watch('readonly')\n handleStateChange() {\n if (this.signaturePad) {\n if (this.disabled \|\| this.readonly) {\n this.signaturePad.off();\n } else {\n this.signaturePad.on();\n }\n }\n }\n\n private handleSignatureEnd = async () => {\n if (this.signaturePad.isEmpty()) {\n this.value = null;\n this.change.emit(null);\n } else {\n const dataURL = this.signaturePad.toDataURL();\n const signatureFile = await this.urlToFile(dataURL, 'signature.png');\n this.value = signatureFile;\n this.change.emit(signatureFile);\n }\n };\n\n private async loadSignature(signatureValue: File \| UdpDriveFile \| string) {\n let imageUrl: string;\n if (typeof signatureValue === 'string') {\n imageUrl = signatureValue;\n } else if (isUdpDriveFile(signatureValue)) {\n try {\n const file = await downloadFileFromUdpDriveFile(signatureValue as UdpDriveFile);\n imageUrl = URL.createObjectURL(file);\n } catch (error) {\n console.error('Error loading signature image from UdpDriveFile:', error);\n return;\n }\n } else if (signatureValue instanceof File) {\n imageUrl = URL.createObjectURL(signatureValue);\n }\n\n if (imageUrl && this.signaturePad) {\n this.signaturePad.fromDataURL(imageUrl, {\n ratio: window.devicePixelRatio,\n width: this.canvasEl.width,\n height: this.canvasEl.height,\n });\n }\n }\n\n private async urlToFile(url: string, filename: string): Promise<File> {\n const res = await fetch(url);\n const blob = await res.blob();\n return new File([blob], filename, { type: blob.type });\n }\n\n private clearSignature = () => {\n if (this.signaturePad) {\n this.signaturePad.clear();\n this.handleSignatureEnd(); // to emit the change\n }\n };\n\n render() {\n const isError = !!this.internalError;\n const containerClasses = {\n 'signature-pad-container': true,\n 'readonly': this.readonly,\n 'disabled': this.disabled,\n };\n\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': isError,\n 'udp-input--disabled': this.disabled,\n 'udp-input--required': this.required,\n 'udp-input--readonly': this.readonly,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n >\n <div class=\"bx--form-item\">\n {this.label && (\n <unity-typography variant=\"caption-text\">\n <label htmlFor={this.id} class=\"bx--label\">\n {this.label}\n {this.required && '*'}\n </label>\n </unity-typography>\n )}\n <div class={containerClasses}>\n <canvas\n ref={el => (this.canvasEl = el as HTMLCanvasElement)}\n class={{ 'signature-canvas': true, 'readonly': this.readonly \|\| this.disabled }}\n id={this.id}\n ></canvas>\n {!this.readonly && !this.disabled && (\n <button\n type=\"button\"\n class=\"clear-button\"\n onClick={this.clearSignature}\n disabled={this.disabled}\n >\n Clear\n </button>\n )}\n </div>\n {isError && (\n <div class=\"error-message\">\n <unity-typography variant=\"caption-text\" color=\"error\">{this.internalError}</unity-typography>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"signature-input.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/inputs/signature-input/signature-input.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, State, Watch, Event, EventEmitter, Element, Host } from '@stencil/core';\nimport type SignaturePad from 'signature_pad';\nimport { UdpDriveFile } from '../../../../../global/types';\nimport { InputSize, InputMargin } from '../input-types';\nimport {\n isUdpDriveFile,\n isFileReference,\n parseFileReference,\n downloadFileFromUdpDriveFile,\n createFileFromString,\n isFile,\n} from '../file-upload/udp-drive-utils';\n\n@Component({\n tag: 'signature-input',\n styleUrl: 'signature-input.css',\n shadow: true,\n})\nexport class SignatureInput {\n @Element() el: HTMLElement;\n\n /*\n Label for the input field.\n /\n @Prop() label: string;\n\n /\n Unique identifier for the input.\n /\n @Prop() id: string;\n\n /\n Whether the field is required.\n /\n @Prop() required: boolean;\n\n /\n Whether the field is disabled.\n /\n @Prop() disabled: boolean = false;\n\n /\n Whether the field is read-only.\n /\n @Prop() readonly: boolean = false;\n\n /\n Error message to display.\n /\n @Prop() error: string;\n\n /\n Size variant for the signature input.\n * - 'small': Compact signature area\n * - 'normal': Standard signature area (default)\n * - 'large': Generous signature area\n /\n @Prop() size: InputSize = 'normal';\n\n /\n Margin variant for the input spacing.\n * - 'none': No margin\n * - 'dense': Minimal margin spacing\n * - 'normal': Standard margin spacing (default)\n /\n @Prop() margin: InputMargin = 'normal';\n\n /\n The current value of the signature, can be a File or UdpDriveFile.\n /\n @Prop({ mutable: true }) value: File \| UdpDriveFile;\n\n /\n The initial value, used if `value` is not provided.\n /\n @Prop() initialValue: File \| UdpDriveFile \| string;\n\n /\n Emitted when the signature changes.\n /\n @Event() change: EventEmitter<File \| null>;\n\n @State() private internalError: string;\n @State() private signaturePad: SignaturePad;\n\n private canvasEl: HTMLCanvasElement;\n private SignaturePadLib: typeof SignaturePad;\n\n private lastCanvasRect: DOMRect;\n private resizeTimeout: any;\n\n @Watch('error')\n onErrorChange(newValue: string) {\n this.internalError = newValue;\n }\n\n @Watch('value')\n async onValueChange(newValue: File \| UdpDriveFile) {\n await this.loadSignaturePad();\n if (this.signaturePad) {\n this.signaturePad.clear();\n if (newValue) {\n this.loadSignature(newValue);\n }\n }\n }\n\n @Watch('initialValue')\n async onInitialValueChange(newValue: any) {\n if (!newValue) {\n return;\n }\n\n try {\n const value = Array.isArray(newValue) ? newValue[0] : newValue;\n if (!value) return;\n\n let loadedFile: File \| null = null;\n\n // Case 1: The value is a special reference string (e.g., \"name\|udp:id\" or \"name\|b64:data\")\n if (typeof value === 'string' && isFileReference(value)) {\n const parsedFile = await parseFileReference(value);\n\n if (parsedFile) {\n // If it was a UDP reference, the parsed file is a placeholder. We need to download the content.\n if ((parsedFile as any).driveFileId) {\n const udpInfo: Partial<UdpDriveFile> = {\n name: parsedFile.name,\n driveFileId: (parsedFile as any).driveFileId,\n extension: parsedFile.name.split('.').pop() \|\| '',\n tenantId: null, // Dummy value, assuming not needed for download\n productId: 0, // Dummy value\n path: '', // Dummy value\n };\n loadedFile = await downloadFileFromUdpDriveFile(udpInfo);\n } else {\n // If it was a base64 reference, the file content is already loaded.\n loadedFile = parsedFile;\n }\n }\n }\n // Case 2: The value is a UdpDriveFile object\n else if (isUdpDriveFile(value)) {\n loadedFile = await downloadFileFromUdpDriveFile(value);\n }\n // Case 3: The value is a standard URL or data-uri string\n else if (typeof value === 'string') {\n loadedFile = await createFileFromString(value, 'initial_signature.png');\n }\n // Case 4: The value is already a File object\n else if (isFile(value)) {\n loadedFile = value;\n }\n\n // If a file was successfully prepared, update the component\n if (loadedFile) {\n this.value = loadedFile;\n this.resizeCanvasForDPR();\n this.initializeSignaturePad();\n } else {\n console.warn('Initial value could not be processed into a valid file:', value);\n }\n } catch (err) {\n console.error('Failed to process initial value for signature pad:', err);\n }\n }\n\n async componentWillLoad() {\n this.internalError = this.error;\n await this.loadSignaturePad();\n }\n\n async componentDidLoad() {\n let file = this.initialValue;\n if (file) {\n if(Array.isArray(file)) {\n file = file[0]; // Handle case where initialValue is an array\n }\n if (isUdpDriveFile(this.initialValue)) {\n // Try to fetch the file from UdpDriveFile\n console.log('Loading signature from UdpDriveFile:', this.initialValue);\n try {\n const file = await downloadFileFromUdpDriveFile(this.initialValue as UdpDriveFile);\n this.value = file;\n this.readonly = false; // Try editable first\n } catch (err) {\n console.error('Failed to fetch UdpDriveFile for signature:', err);\n this.value = this.initialValue;\n this.readonly = true; // Fallback to readonly if not editable\n }\n } else {\n this.value = await this.urlToFile(this.initialValue as string, 'initial_signature.png');\n }\n }\n this.resizeCanvasForDPR();\n this.initializeSignaturePad();\n this.lastCanvasRect = this.canvasEl.getBoundingClientRect();\n window.addEventListener('resize', this.handleResize);\n }\n\n disconnectedCallback() {\n window.removeEventListener('resize', this.handleResize);\n if (this.resizeTimeout) clearTimeout(this.resizeTimeout);\n }\n\n private handleResize = () => {\n if (this.resizeTimeout) clearTimeout(this.resizeTimeout);\n this.resizeTimeout = setTimeout(() => {\n const rect = this.canvasEl.getBoundingClientRect();\n if (!this.lastCanvasRect \|\| rect.width !== this.lastCanvasRect.width \|\| rect.height !== this.lastCanvasRect.height) {\n // Save current signature as dataURL\n let dataURL = this.signaturePad && !this.signaturePad.isEmpty() ? this.signaturePad.toDataURL() : null;\n this.resizeCanvasForDPR();\n this.initializeSignaturePad();\n this.lastCanvasRect = rect;\n // Restore signature if it existed\n if (dataURL && this.signaturePad) {\n this.signaturePad.fromDataURL(dataURL);\n }\n }\n }, 200);\n }\n\n private resizeCanvasForDPR() {\n if (!this.canvasEl) return;\n const ratio = window.devicePixelRatio \|\| 1;\n // Get the CSS size\n const rect = this.canvasEl.getBoundingClientRect();\n this.canvasEl.width = rect.width ratio;\n this.canvasEl.height = rect.height * ratio;\n this.canvasEl.getContext('2d').scale(ratio, ratio);\n }\n\n private async loadSignaturePad() {\n if (!this.SignaturePadLib) {\n try {\n const module = await import('signature_pad');\n this.SignaturePadLib = module.default;\n } catch (e) {\n console.error('Failed to load signature_pad library', e);\n }\n }\n }\n\n private initializeSignaturePad() {\n this.resizeCanvasForDPR();\n if (this.SignaturePadLib && this.canvasEl) {\n this.signaturePad = new this.SignaturePadLib(this.canvasEl);\n this.signaturePad.addEventListener(\"endStroke\", this.handleSignatureEnd);\n this.handleStateChange();\n if (this.value) {\n this.loadSignature(this.value);\n }\n }\n }\n\n @Watch('disabled')\n @Watch('readonly')\n handleStateChange() {\n if (this.signaturePad) {\n if (this.disabled \|\| this.readonly) {\n this.signaturePad.off();\n } else {\n this.signaturePad.on();\n }\n }\n }\n\n private handleSignatureEnd = async () => {\n if (this.signaturePad.isEmpty()) {\n this.value = null;\n this.change.emit(null);\n } else {\n const dataURL = this.signaturePad.toDataURL();\n const signatureFile = await this.urlToFile(dataURL, 'signature.png');\n this.value = signatureFile;\n this.change.emit(signatureFile);\n }\n };\n\n private async loadSignature(signatureValue: File \| UdpDriveFile \| string) {\n let imageUrl: string;\n if (typeof signatureValue === 'string') {\n imageUrl = signatureValue;\n } else if (isUdpDriveFile(signatureValue)) {\n try {\n const file = await downloadFileFromUdpDriveFile(signatureValue as UdpDriveFile);\n imageUrl = URL.createObjectURL(file);\n } catch (error) {\n console.error('Error loading signature image from UdpDriveFile:', error);\n return;\n }\n } else if (signatureValue instanceof File) {\n imageUrl = URL.createObjectURL(signatureValue);\n }\n\n if (imageUrl && this.signaturePad) {\n this.signaturePad.fromDataURL(imageUrl, {\n ratio: window.devicePixelRatio,\n width: this.canvasEl.width,\n height: this.canvasEl.height,\n });\n }\n }\n\n private async urlToFile(url: string, filename: string): Promise<File> {\n const res = await fetch(url);\n const blob = await res.blob();\n return new File([blob], filename, { type: blob.type });\n }\n\n private clearSignature = () => {\n if (this.signaturePad) {\n this.signaturePad.clear();\n this.handleSignatureEnd(); // to emit the change\n }\n };\n\n render() {\n const isError = !!this.internalError;\n const containerClasses = {\n 'signature-pad-container': true,\n 'readonly': this.readonly,\n 'disabled': this.disabled,\n };\n\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': isError,\n 'udp-input--disabled': this.disabled,\n 'udp-input--required': this.required,\n 'udp-input--readonly': this.readonly,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n >\n <div class=\"bx--form-item\">\n {this.label && (\n <unity-typography variant=\"caption-text\">\n <label htmlFor={this.id} class=\"bx--label\">\n {this.label}\n {this.required && '*'}\n </label>\n </unity-typography>\n )}\n <div class={containerClasses}>\n <canvas\n ref={el => (this.canvasEl = el as HTMLCanvasElement)}\n class={{ 'signature-canvas': true, 'readonly': this.readonly \|\| this.disabled }}\n id={this.id}\n ></canvas>\n {!this.readonly && !this.disabled && (\n <button\n type=\"button\"\n class=\"clear-button\"\n onClick={this.clearSignature}\n disabled={this.disabled}\n >\n Clear\n </button>\n )}\n </div>\n {isError && (\n <div class=\"error-message\">\n <unity-typography variant=\"caption-text\" color=\"error\">{this.internalError}</unity-typography>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/my-component/UI/inputs/tally/tally.js CHANGED Viewed

@@ -46,14 +46,14 @@ export class TallyDisplay {
         const isError = !!this.error;
         const answeredCount = this.yesCount + this.noCount + this.naCount;
         const unansweredCount = this.totalFields - answeredCount;
-        return (h(Host, { key: '5c6939381517962ec502c5b791892b352b8cfec3', class: {
+        return (h(Host, { key: 'e70832a7be82ea3f53df3bc06b0194ed46d05f07', 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: '03e9e1319a9014ddff1f4f9664d4a84992a48112', class: "tally-container" }, this.label && (h("unity-typography", { key: '343651c518a44fbc79fde58152a0216416b7a7fd', variant: "caption-text" }, h("label", { key: 'f5b9c1491ff19f7340e8072227556014c637f75f', htmlFor: this.id, class: "tally-label" }, this.label))), h("div", { key: '287e848fb535d892f6592bcec6d66e5f05a751c5', class: "tally-content", id: this.id }, h("div", { key: '5fdbadd48ffd431f58f522e9452b1183c3014b12', class: "tally-stats" }, h("div", { key: '43f04d18cc2ff6b9287e398d25484928e4ea3325', class: "tally-item tally-yes" }, h("unity-typography", { key: '75bfeb985b1f7f70ecaabec2b8ae699794c6de50', variant: "h4", class: "tally-count" }, this.yesCount), h("unity-typography", { key: 'ddbacb84823d5663879ef218fc023186b78ed87c', variant: "caption-text", class: "tally-label" }, "Yes")), h("div", { key: '573543db8b4ca95596a3fd6cc0d256802529c778', class: "tally-item tally-no" }, h("unity-typography", { key: '6124af32f94311cff91a051c46eda6fe7c956939', variant: "h4", class: "tally-count" }, this.noCount), h("unity-typography", { key: '37ccb28fb096bc09c9c51b5b050b5b58f69773d9', variant: "caption-text", class: "tally-label" }, "No")), h("div", { key: '3aabef56d09f22886f410677cb57ddbc17fa5b45', class: "tally-item tally-na" }, h("unity-typography", { key: 'ad92cae631bf923f2aeda0ac003129fa8d470e02', variant: "h4", class: "tally-count" }, this.naCount), h("unity-typography", { key: '43ed5d1f7380084c22872477f5ccd0dfd74cd008', variant: "caption-text", class: "tally-label" }, "Not Applicable")), unansweredCount > 0 && (h("div", { key: '069a7bc3a1dcf19d9c0f5ca0d4b00facdb07ecc4', class: "tally-item tally-unanswered" }, h("unity-typography", { key: '04469b55f4dcdae1e08f1eacdc1bce83ca86f214', variant: "h4", class: "tally-count" }, unansweredCount), h("unity-typography", { key: 'a3bd672ee1edcfc3df5a37587675fc96257020a1', variant: "caption-text", class: "tally-label" }, "Unanswered")))), h("div", { key: 'fcfdaf22626dd9776a6596baed5b8ee0257b2ba1', class: "tally-summary" }, h("unity-typography", { key: '234c4f194d2fca829d4f6c21190af688eedcbfe7', variant: "caption-text" }, "Total Questions: ", this.totalFields))), isError && (h("div", { key: '5ab59a32c6eac7ec4c52588880c72f39af322162', class: "error-message" }, h("unity-typography", { key: 'bba2f644f283270436ce30b21dceffd62bdad546', variant: "caption-text", color: "error" }, this.error))))));
+            } }, h("div", { key: '1926ed64b5652e92d39ebf735b18046dd7f906ad', class: "tally-container" }, this.label && (h("unity-typography", { key: 'a324b324caeab596ec7dc6587fe10f10ccc185cb', variant: "caption-text" }, h("label", { key: '23ef28f8d34e3003107cc121e031e5fc0cb122fe', htmlFor: this.id, class: "tally-label" }, this.label))), h("div", { key: '28c393290da3f3fee8c7d82dd686e8234d894844', class: "tally-content", id: this.id }, h("div", { key: '7104a0a1fcdfa61a1d865d8cda60464121befe45', class: "tally-stats" }, h("div", { key: 'c743c8e990a753b657cb39453c039efce5c66636', class: "tally-item tally-yes" }, h("unity-typography", { key: '9499309b4ccb1e321f04a42101887534452468cc', variant: "h4", class: "tally-count" }, this.yesCount), h("unity-typography", { key: '6ffbc0edd30df2be26ec61d66ecf93f3f036e962', variant: "caption-text", class: "tally-label" }, "Yes")), h("div", { key: '99fcf973f8b69622c32b64842894331f8740abf0', class: "tally-item tally-no" }, h("unity-typography", { key: 'cd6b12324049384b85f154e0cec72cebe56128f0', variant: "h4", class: "tally-count" }, this.noCount), h("unity-typography", { key: 'cc985586b310629ac16389225e116457361fe4b2', variant: "caption-text", class: "tally-label" }, "No")), h("div", { key: '603468dfe92a730e6d3448994e2be6b48b07b5e1', class: "tally-item tally-na" }, h("unity-typography", { key: 'd55ee6a1f72e355cb907768062c771c89a601cb7', variant: "h4", class: "tally-count" }, this.naCount), h("unity-typography", { key: '84217e46cacba4009a7079433e9ef56aa395727c', variant: "caption-text", class: "tally-label" }, "Not Applicable")), unansweredCount > 0 && (h("div", { key: 'ca2a789a78fa47312db0b0ba550e50b1be906734', class: "tally-item tally-unanswered" }, h("unity-typography", { key: '388bbaba571af7a2bbae6240b818237ad86c79a3', variant: "h4", class: "tally-count" }, unansweredCount), h("unity-typography", { key: '0bf1a145c8a081e576159ed98447b2626f7d23ff', variant: "caption-text", class: "tally-label" }, "Unanswered")))), h("div", { key: '22627fff48cab72e895f7f51728455ba6ae84bf2', class: "tally-summary" }, h("unity-typography", { key: 'd491c8295d698be02874cf6108220f0254473a34', variant: "caption-text" }, "Total Questions: ", this.totalFields))), isError && (h("div", { key: '27b0e582ed93014a938dc66b5df146639d65be82', class: "error-message" }, h("unity-typography", { key: '0a0ac562398899def5863296f9dff96ac9928c70', variant: "caption-text", color: "error" }, this.error))))));
     }
     static get is() { return "tally-display"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/my-component/UI/inputs/text-area/text-area.js CHANGED Viewed

@@ -70,6 +70,15 @@ export class TextArea {
             if (this.value !== undefined) {
                 this.value = newValue;
             }
+            // Re-evaluate validation on input if there's currently an error
+            // This provides immediate feedback when user corrects the error
+            if (this.errorMessage) {
+                const validationError = this.validateCharacterLength(newValue);
+                if (validationError !== this.errorMessage) {
+                    // Error state has changed, update it
+                    this.setAndDispatchError(validationError);
+                }
+            }
             this.adjustTextAreaHeight();
         };
         /**
@@ -80,6 +89,16 @@ export class TextArea {
                 return;
             }
             const newValue = event.target.value;
+            // Validate the new value for character length constraints
+            const validationError = this.validateCharacterLength(newValue);
+            if (validationError) {
+                // Character length validation failed
+                this.setAndDispatchError(validationError);
+            }
+            else {
+                // Character length validation passed, clear any existing error
+                this.setAndDispatchError('');
+            }
             this.change.emit(newValue);
         };
     }
@@ -112,6 +131,41 @@ export class TextArea {
             Promise.resolve().then(() => this.adjustTextAreaHeight());
         }
     }
+    /**
+     * Validates the text value against min/max character constraints
+     * @param value - The text value to validate
+     * @returns Error message if invalid, empty string if valid
+     */
+    validateCharacterLength(value) {
+        if (!value)
+            return '';
+        const length = value.length;
+        if (this.minCharacter && length < this.minCharacter) {
+            return `Must be at least ${this.minCharacter} characters`;
+        }
+        if (this.maxCharacter && length > this.maxCharacter) {
+            return `Must be no more than ${this.maxCharacter} characters`;
+        }
+        return '';
+    }
+    /**
+     * Sets error state and dispatches error event that bubbles to stencil-field
+     * @param errorMessage - The error message to set and dispatch
+     */
+    setAndDispatchError(errorMessage) {
+        console.log('Setting text area error:', errorMessage);
+        // Update internal error state
+        this.errorMessage = errorMessage;
+        // Emit Stencil error event
+        this.errorEvent.emit(errorMessage);
+        // Dispatch custom error event that bubbles up to stencil-field
+        const errorEvent = new CustomEvent('error', {
+            detail: errorMessage,
+            bubbles: true,
+            composed: true
+        });
+        this.el.dispatchEvent(errorEvent);
+    }
     /**
      * @internal
      */
@@ -130,6 +184,13 @@ export class TextArea {
             initialNumRows = Math.min(this.maxRows, initialNumRows);
         }
         this.internalRows = initialNumRows;
+        // Validate the initial value
+        if (this.internalValue) {
+            const validationError = this.validateCharacterLength(this.internalValue);
+            if (validationError) {
+                this.setAndDispatchError(validationError);
+            }
+        }
     }
     /**
      * @internal
@@ -179,7 +240,7 @@ export class TextArea {
     }
     render() {
         const { disabled, id, internalValue, label, placeholder, required, readonly, errorMessage, fullWidth, internalRows } = this;
-        return (h(Host, { key: '378e250cf30868845c696dd86b787d32a4437e63', class: {
+        return (h(Host, { key: 'faf105fdc0cc63272227337663356a245564ff12', class: {
                 'udp-input': true,
                 'udp-input--error': !!errorMessage,
                 'udp-input--disabled': disabled,
@@ -188,11 +249,11 @@ export class TextArea {
                 'udp-input--required': required,
                 [`udp-input--size-${this.size}`]: true,
                 [`udp-input--margin-${this.margin}`]: true,
-            } }, h("div", { key: '1369268dd7f253c7761a799cd416344e14c06e4c', class: "bx--form-item" }, h("unity-typography", { key: 'bfd1c9629383802d209ce3b9c43b752d5cc33c42', variant: "caption-text" }, h("label", { key: '79e84e7f6410ce0de70f857fc4a608857a221533', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), h("textarea", { key: '1801c9caaa02182f3e57885eba7c486b1a52a061', ref: el => (this.textareaEl = el), id: id, class: {
+            } }, h("div", { key: 'd8b0320b635c92debf9a35ad85e76c524fdce683', class: "bx--form-item" }, h("unity-typography", { key: 'eda91296822952f0eeb49d73df4ccde994e0fe22', variant: "caption-text" }, h("label", { key: '15f95f1b0d744a5555404c485bde82bc77ed22f2', htmlFor: id, class: "bx--label" }, label, required ? '*' : '')), h("textarea", { key: '0350ff25f0cc20448a3f0ec29447e289a80c6be8', 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: 'a9e97f1f0bb2fc27b148ecf21f2af7c36d2b32da', class: "error-message" }, h("unity-typography", { key: '67e29423ef72ed93c9f1389348f5823aa62f09cd', 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: '70b53e47ce10072d8703a3ac66c923251c5fdcfe', class: "error-message" }, h("unity-typography", { key: '43f511ccc1099252a9f683c0b4afbe9554e86978', variant: "caption-text", color: "error" }, errorMessage))))));
     }
     static get is() { return "text-area"; }
     static get encapsulation() { return "shadow"; }
@@ -398,6 +459,25 @@ export class TextArea {
                 "setter": false,
                 "reflect": false
             },
+            "minCharacter": {
+                "type": "number",
+                "attribute": "min-character",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Minimum number of characters required in the textarea. Enforces minimum character limits."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "maxCharacter": {
                 "type": "number",
                 "attribute": "max-character",
@@ -571,8 +651,24 @@ export class TextArea {
                     "resolved": "string",
                     "references": {}
                 }
+            }, {
+                "method": "errorEvent",
+                "name": "error",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when validation errors occur (e.g., character length outside min/max constraints).\nContains the error message string. Empty string indicates no error."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "error",

package/dist/collection/components/my-component/UI/inputs/text-area/text-area.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/inputs/text-area/text-area.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Host,\n State,\n Watch,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { InputSize, InputMargin } from '../input-types';\n\n/*\n A standardized textarea component with auto-resizing, error handling, and validation.\n * Supports both controlled and uncontrolled modes.\n \n This component emits a custom `change` event with the committed value and also\n * propagates standard DOM events like `input`, `focus`, and `blur` from the\n * underlying textarea element.\n \n @example\n * ```tsx\n * // Uncontrolled component with initial value\n * <text-area\n * placeholder=\"Enter your message\"\n * initialValue=\"Default message\"\n * onChange={(e) => console.log('Final value:', e.detail)}\n * />\n \n // Controlled component\n * <text-area\n * placeholder=\"Enter your message\"\n * value={messageValue}\n * onChange={(e) => setMessageValue(e.detail)}\n * />\n \n // With validation and auto-resize\n * <text-area\n * label=\"Description\"\n * placeholder=\"Enter description...\"\n * required={true}\n * error={descriptionError}\n * value={description}\n * minRows={3}\n * maxRows={10}\n * onChange={handleDescriptionChange}\n * />\n * ```\n /\n@Component({\n tag: 'text-area',\n styleUrl: 'text-area.css',\n shadow: true,\n})\nexport class TextArea {\n /\n Label text displayed above the textarea. Used for accessibility and user guidance.\n /\n @Prop() label: string;\n\n /\n Unique identifier for the textarea element. Used for form association and accessibility.\n /\n @Prop() id: string;\n\n /\n Name attribute for the textarea element. Used for form submission.\n /\n @Prop() name: string;\n\n /\n Placeholder text shown when the textarea is empty. Provides hints about expected input.\n /\n @Prop() placeholder: string;\n\n /\n Initial value for the textarea. Used for uncontrolled components to set the default value.\n * Only used when `value` prop is not provided.\n /\n @Prop() initialValue: string;\n\n /\n Current value of the textarea. When provided, makes this a controlled component.\n * The component will use this value and update it through events.\n /\n @Prop({ mutable: true }) value: string;\n\n /\n Error message to display below the textarea. Shows validation errors or other issues.\n /\n @Prop() error: string;\n\n /\n Whether the field is required for form submission. Adds visual indicator and validation.\n /\n @Prop() required: boolean;\n\n /\n Whether the field is disabled. Users cannot interact with the field.\n /\n @Prop() disabled: boolean;\n\n /\n Whether the textarea should take the full width of its container.\n /\n @Prop() fullWidth: boolean;\n\n /\n Maximum number of characters allowed in the textarea. Enforces character limits.\n /\n @Prop() maxCharacter?: number;\n\n /\n Initial number of rows for the textarea.\n /\n @Prop() rows: number;\n\n /\n Minimum number of rows for auto-resizing.\n /\n @Prop() minRows: number;\n\n /\n Maximum number of rows for auto-resizing.\n /\n @Prop() maxRows: number;\n\n /\n Size variant controlling the padding and spacing of the textarea.\n * - 'small': Compact spacing for data-heavy interfaces\n * - 'normal': Standard spacing (default)\n * - 'large': Generous spacing for accessibility\n /\n @Prop() size: InputSize = 'normal';\n\n /\n Margin variant for the input spacing.\n * - 'none': No margin\n * - 'dense': Minimal margin spacing\n * - 'normal': Standard margin spacing (default)\n /\n @Prop() margin: InputMargin = 'normal';\n\n /\n If `true`, the component is read-only.\n /\n @Prop() readonly = false;\n\n /\n Internal state for the component's value\n /\n @State() internalValue: string;\n\n /\n Internal state for the error message.\n /\n @State() errorMessage: string;\n\n /\n Internal state for the number of rows.\n /\n @State() internalRows: number;\n\n /\n Emitted when the value of the component changes (on blur).\n /\n @Event() change: EventEmitter<string>;\n\n\n private textareaEl: HTMLTextAreaElement;\n\n /\n Updates the error message when the error prop changes.\n * @internal\n /\n @Watch('error')\n updateError() {\n this.errorMessage = this.error;\n }\n\n /\n Updates the internal value when initialValue prop changes.\n * @internal\n /\n @Watch('initialValue')\n initialValueChanged(newValue: string) {\n if ((this.internalValue === '' \|\| this.internalValue === undefined) \|\| this.value === undefined) {\n if (newValue !== undefined) {\n this.internalValue = newValue;\n Promise.resolve().then(() => this.adjustTextAreaHeight());\n }\n }\n }\n\n /\n Updates the internal value when value prop changes.\n * @internal\n /\n @Watch('value')\n protected valueChanged() {\n if (this.value !== undefined && this.value !== this.internalValue) {\n this.internalValue = this.value;\n Promise.resolve().then(() => this.adjustTextAreaHeight());\n }\n }\n\n /\n @internal\n /\n componentWillLoad() {\n this.internalValue = this.value !== undefined ? this.value : (this.initialValue \|\| '');\n if (this.error) {\n this.errorMessage = this.error;\n }\n\n let initialNumRows = this.rows;\n const currentMinRows = this.minRows === undefined ? 1 : this.minRows;\n\n if (initialNumRows === undefined) {\n initialNumRows = currentMinRows;\n }\n\n initialNumRows = Math.max(currentMinRows, initialNumRows);\n\n if (this.maxRows !== undefined) {\n initialNumRows = Math.min(this.maxRows, initialNumRows);\n }\n this.internalRows = initialNumRows;\n }\n\n /\n @internal\n /\n componentDidLoad() {\n this.adjustTextAreaHeight();\n }\n\n /\n @internal\n /\n private adjustTextAreaHeight() {\n if (!this.textareaEl) {\n return;\n }\n\n const min = this.minRows === undefined ? 1 : this.minRows;\n const max = this.maxRows === undefined ? Number.MAX_SAFE_INTEGER : this.maxRows;\n const previousScrollTop = this.textareaEl.scrollTop;\n\n this.textareaEl.style.overflowY = 'hidden';\n this.textareaEl.style.height = 'auto';\n\n this.textareaEl.rows = min;\n let currentActualRows = min;\n\n while (this.textareaEl.scrollHeight > this.textareaEl.clientHeight && currentActualRows < max) {\n currentActualRows++;\n this.textareaEl.rows = currentActualRows;\n }\n\n if (currentActualRows < max \|\| max === Number.MAX_SAFE_INTEGER) {\n while (currentActualRows > min) {\n this.textareaEl.rows = currentActualRows - 1;\n if (this.textareaEl.scrollHeight > this.textareaEl.clientHeight) {\n this.textareaEl.rows = currentActualRows;\n break;\n }\n currentActualRows--;\n }\n }\n\n let newCalculatedRows = Math.max(min, Math.min(currentActualRows, max));\n\n this.textareaEl.style.height = '';\n this.textareaEl.style.overflowY = '';\n\n this.textareaEl.rows = newCalculatedRows;\n\n if (this.internalRows !== newCalculatedRows) {\n this.internalRows = newCalculatedRows;\n }\n\n Promise.resolve().then(() => {\n if (this.textareaEl) this.textareaEl.scrollTop = previousScrollTop;\n });\n }\n\n /\n @internal\n /\n private onInput = (event: InputEvent) => {\n if (this.readonly) {\n const input = event.target as HTMLTextAreaElement;\n input.value = this.internalValue;\n return;\n }\n const newValue = (event.target as HTMLTextAreaElement).value;\n this.internalValue = newValue;\n\n if (this.value !== undefined) {\n this.value = newValue;\n }\n\n this.adjustTextAreaHeight();\n };\n\n /\n @internal\n /\n private onChange = (event: Event) => {\n if (this.readonly) {\n return;\n }\n const newValue = (event.target as HTMLTextAreaElement).value;\n this.change.emit(newValue);\n };\n\n render() {\n const { disabled, id, internalValue, label, placeholder, required, readonly, errorMessage, fullWidth, internalRows } = this;\n\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': !!errorMessage,\n 'udp-input--disabled': disabled,\n 'udp-input--readonly': readonly,\n 'udp-input--full-width': fullWidth,\n 'udp-input--required': required,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n >\n <div class=\"bx--form-item\">\n <unity-typography variant=\"caption-text\">\n <label htmlFor={id} class=\"bx--label\">\n {label}\n {required ? '' : ''}\n </label>\n </unity-typography>\n <textarea\n ref={el => (this.textareaEl = el as HTMLTextAreaElement)}\n id={id}\n class={{\n 'bx--text-input': true,\n 'bx--text-input--error': !!errorMessage,\n 'text-area--disabled': disabled,\n }}\n placeholder={placeholder}\n value={internalValue}\n required={required}\n disabled={disabled}\n readonly={readonly}\n maxLength={this.maxCharacter}\n rows={internalRows}\n onInput={this.onInput}\n onChange={this.onChange}\n >\n {internalValue}\n </textarea>\n {errorMessage && (\n <div class=\"error-message\">\n <unity-typography variant=\"caption-text\" color=\"error\">{errorMessage}</unity-typography>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"text-area.js","sourceRoot":"","sources":["../../../../../../src/components/my-component/UI/inputs/text-area/text-area.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n h,\n Host,\n State,\n Watch,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { InputSize, InputMargin } from '../input-types';\n\n/*\n A standardized textarea component with auto-resizing, error handling, and validation.\n * Supports both controlled and uncontrolled modes.\n \n This component emits a custom `change` event with the committed value and also\n * propagates standard DOM events like `input`, `focus`, and `blur` from the\n * underlying textarea element.\n \n @example\n * ```tsx\n * // Uncontrolled component with initial value\n * <text-area\n * placeholder=\"Enter your message\"\n * initialValue=\"Default message\"\n * onChange={(e) => console.log('Final value:', e.detail)}\n * />\n \n // Controlled component\n * <text-area\n * placeholder=\"Enter your message\"\n * value={messageValue}\n * onChange={(e) => setMessageValue(e.detail)}\n * />\n \n // With validation and auto-resize\n * <text-area\n * label=\"Description\"\n * placeholder=\"Enter description...\"\n * required={true}\n * error={descriptionError}\n * value={description}\n * minRows={3}\n * maxRows={10}\n * onChange={handleDescriptionChange}\n * />\n * ```\n /\n@Component({\n tag: 'text-area',\n styleUrl: 'text-area.css',\n shadow: true,\n})\nexport class TextArea {\n @Element() el: HTMLElement;\n\n /\n Label text displayed above the textarea. Used for accessibility and user guidance.\n /\n @Prop() label: string;\n\n /\n Unique identifier for the textarea element. Used for form association and accessibility.\n /\n @Prop() id: string;\n\n /\n Name attribute for the textarea element. Used for form submission.\n /\n @Prop() name: string;\n\n /\n Placeholder text shown when the textarea is empty. Provides hints about expected input.\n /\n @Prop() placeholder: string;\n\n /\n Initial value for the textarea. Used for uncontrolled components to set the default value.\n * Only used when `value` prop is not provided.\n /\n @Prop() initialValue: string;\n\n /\n Current value of the textarea. When provided, makes this a controlled component.\n * The component will use this value and update it through events.\n /\n @Prop({ mutable: true }) value: string;\n\n /\n Error message to display below the textarea. Shows validation errors or other issues.\n /\n @Prop() error: string;\n\n /\n Whether the field is required for form submission. Adds visual indicator and validation.\n /\n @Prop() required: boolean;\n\n /\n Whether the field is disabled. Users cannot interact with the field.\n /\n @Prop() disabled: boolean;\n\n /\n Whether the textarea should take the full width of its container.\n /\n @Prop() fullWidth: boolean;\n\n /\n Minimum number of characters required in the textarea. Enforces minimum character limits.\n /\n @Prop() minCharacter: number;\n\n /\n Maximum number of characters allowed in the textarea. Enforces character limits.\n /\n @Prop() maxCharacter?: number;\n\n /\n Initial number of rows for the textarea.\n /\n @Prop() rows: number;\n\n /\n Minimum number of rows for auto-resizing.\n /\n @Prop() minRows: number;\n\n /\n Maximum number of rows for auto-resizing.\n /\n @Prop() maxRows: number;\n\n /\n Size variant controlling the padding and spacing of the textarea.\n * - 'small': Compact spacing for data-heavy interfaces\n * - 'normal': Standard spacing (default)\n * - 'large': Generous spacing for accessibility\n /\n @Prop() size: InputSize = 'normal';\n\n /\n Margin variant for the input spacing.\n * - 'none': No margin\n * - 'dense': Minimal margin spacing\n * - 'normal': Standard margin spacing (default)\n /\n @Prop() margin: InputMargin = 'normal';\n\n /\n If `true`, the component is read-only.\n /\n @Prop() readonly = false;\n\n /\n Internal state for the component's value\n /\n @State() internalValue: string;\n\n /\n Internal state for the error message.\n /\n @State() errorMessage: string;\n\n /\n Internal state for the number of rows.\n /\n @State() internalRows: number;\n\n /\n Emitted when the value of the component changes (on blur).\n /\n @Event() change: EventEmitter<string>;\n\n /\n Emitted when validation errors occur (e.g., character length outside min/max constraints).\n * Contains the error message string. Empty string indicates no error.\n /\n @Event({\n eventName: 'error',\n bubbles: true,\n composed: true,\n cancelable: true\n }) errorEvent: EventEmitter<string>;\n\n\n private textareaEl: HTMLTextAreaElement;\n\n /\n Updates the error message when the error prop changes.\n * @internal\n /\n @Watch('error')\n updateError() {\n this.errorMessage = this.error;\n }\n\n /\n Updates the internal value when initialValue prop changes.\n * @internal\n /\n @Watch('initialValue')\n initialValueChanged(newValue: string) {\n if ((this.internalValue === '' \|\| this.internalValue === undefined) \|\| this.value === undefined) {\n if (newValue !== undefined) {\n this.internalValue = newValue;\n Promise.resolve().then(() => this.adjustTextAreaHeight());\n }\n }\n }\n\n /\n Updates the internal value when value prop changes.\n * @internal\n /\n @Watch('value')\n protected valueChanged() {\n if (this.value !== undefined && this.value !== this.internalValue) {\n this.internalValue = this.value;\n Promise.resolve().then(() => this.adjustTextAreaHeight());\n }\n }\n\n /\n Validates the text value against min/max character constraints\n * @param value - The text value to validate\n * @returns Error message if invalid, empty string if valid\n /\n private validateCharacterLength(value: string): string {\n if (!value) return '';\n\n const length = value.length;\n\n if (this.minCharacter && length < this.minCharacter) {\n return `Must be at least ${this.minCharacter} characters`;\n }\n\n if (this.maxCharacter && length > this.maxCharacter) {\n return `Must be no more than ${this.maxCharacter} characters`;\n }\n\n return '';\n }\n\n /\n Sets error state and dispatches error event that bubbles to stencil-field\n * @param errorMessage - The error message to set and dispatch\n /\n private setAndDispatchError(errorMessage: string) {\n console.log('Setting text area error:', errorMessage);\n\n // Update internal error state\n this.errorMessage = errorMessage;\n\n // Emit Stencil error event\n this.errorEvent.emit(errorMessage);\n\n // Dispatch custom error event that bubbles up to stencil-field\n const errorEvent = new CustomEvent('error', {\n detail: errorMessage,\n bubbles: true,\n composed: true\n });\n this.el.dispatchEvent(errorEvent);\n }\n\n /\n @internal\n /\n componentWillLoad() {\n this.internalValue = this.value !== undefined ? this.value : (this.initialValue \|\| '');\n if (this.error) {\n this.errorMessage = this.error;\n }\n\n let initialNumRows = this.rows;\n const currentMinRows = this.minRows === undefined ? 1 : this.minRows;\n\n if (initialNumRows === undefined) {\n initialNumRows = currentMinRows;\n }\n\n initialNumRows = Math.max(currentMinRows, initialNumRows);\n\n if (this.maxRows !== undefined) {\n initialNumRows = Math.min(this.maxRows, initialNumRows);\n }\n this.internalRows = initialNumRows;\n\n // Validate the initial value\n if (this.internalValue) {\n const validationError = this.validateCharacterLength(this.internalValue);\n if (validationError) {\n this.setAndDispatchError(validationError);\n }\n }\n }\n\n /\n @internal\n /\n componentDidLoad() {\n this.adjustTextAreaHeight();\n }\n\n /\n @internal\n /\n private adjustTextAreaHeight() {\n if (!this.textareaEl) {\n return;\n }\n\n const min = this.minRows === undefined ? 1 : this.minRows;\n const max = this.maxRows === undefined ? Number.MAX_SAFE_INTEGER : this.maxRows;\n const previousScrollTop = this.textareaEl.scrollTop;\n\n this.textareaEl.style.overflowY = 'hidden';\n this.textareaEl.style.height = 'auto';\n\n this.textareaEl.rows = min;\n let currentActualRows = min;\n\n while (this.textareaEl.scrollHeight > this.textareaEl.clientHeight && currentActualRows < max) {\n currentActualRows++;\n this.textareaEl.rows = currentActualRows;\n }\n\n if (currentActualRows < max \|\| max === Number.MAX_SAFE_INTEGER) {\n while (currentActualRows > min) {\n this.textareaEl.rows = currentActualRows - 1;\n if (this.textareaEl.scrollHeight > this.textareaEl.clientHeight) {\n this.textareaEl.rows = currentActualRows;\n break;\n }\n currentActualRows--;\n }\n }\n\n let newCalculatedRows = Math.max(min, Math.min(currentActualRows, max));\n\n this.textareaEl.style.height = '';\n this.textareaEl.style.overflowY = '';\n\n this.textareaEl.rows = newCalculatedRows;\n\n if (this.internalRows !== newCalculatedRows) {\n this.internalRows = newCalculatedRows;\n }\n\n Promise.resolve().then(() => {\n if (this.textareaEl) this.textareaEl.scrollTop = previousScrollTop;\n });\n }\n\n /\n @internal\n /\n private onInput = (event: InputEvent) => {\n if (this.readonly) {\n const input = event.target as HTMLTextAreaElement;\n input.value = this.internalValue;\n return;\n }\n const newValue = (event.target as HTMLTextAreaElement).value;\n this.internalValue = newValue;\n\n if (this.value !== undefined) {\n this.value = newValue;\n }\n\n // Re-evaluate validation on input if there's currently an error\n // This provides immediate feedback when user corrects the error\n if (this.errorMessage) {\n const validationError = this.validateCharacterLength(newValue);\n\n if (validationError !== this.errorMessage) {\n // Error state has changed, update it\n this.setAndDispatchError(validationError);\n }\n }\n\n this.adjustTextAreaHeight();\n };\n\n /\n @internal\n /\n private onChange = (event: Event) => {\n if (this.readonly) {\n return;\n }\n const newValue = (event.target as HTMLTextAreaElement).value;\n\n // Validate the new value for character length constraints\n const validationError = this.validateCharacterLength(newValue);\n\n if (validationError) {\n // Character length validation failed\n this.setAndDispatchError(validationError);\n } else {\n // Character length validation passed, clear any existing error\n this.setAndDispatchError('');\n }\n\n this.change.emit(newValue);\n };\n\n render() {\n const { disabled, id, internalValue, label, placeholder, required, readonly, errorMessage, fullWidth, internalRows } = this;\n\n return (\n <Host\n class={{\n 'udp-input': true,\n 'udp-input--error': !!errorMessage,\n 'udp-input--disabled': disabled,\n 'udp-input--readonly': readonly,\n 'udp-input--full-width': fullWidth,\n 'udp-input--required': required,\n [`udp-input--size-${this.size}`]: true,\n [`udp-input--margin-${this.margin}`]: true,\n }}\n >\n <div class=\"bx--form-item\">\n <unity-typography variant=\"caption-text\">\n <label htmlFor={id} class=\"bx--label\">\n {label}\n {required ? '' : ''}\n </label>\n </unity-typography>\n <textarea\n ref={el => (this.textareaEl = el as HTMLTextAreaElement)}\n id={id}\n class={{\n 'bx--text-input': true,\n 'bx--text-input--error': !!errorMessage,\n 'text-area--disabled': disabled,\n }}\n placeholder={placeholder}\n value={internalValue}\n required={required}\n disabled={disabled}\n readonly={readonly}\n maxLength={this.maxCharacter}\n rows={internalRows}\n onInput={this.onInput}\n onChange={this.onChange}\n >\n {internalValue}\n </textarea>\n {errorMessage && (\n <div class=\"error-message\">\n <unity-typography variant=\"caption-text\" color=\"error\">{errorMessage}</unity-typography>\n </div>\n )}\n </div>\n </Host>\n );\n }\n}\n"]}