@nova-design-system/nova-webcomponents 3.0.0-beta.25 → 3.0.0-beta.27

package/dist/blazor-docs.json

@@ -5908,6 +5908,28 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "inputId",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "input-id",
+          "reflectToAttr": true,
+          "docs": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility.",
+          "docsTags": [],
+          "default": "uuidv4()",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "label",
           "type": "string",
@@ -6163,28 +6185,6 @@
           "optional": false,
           "required": false
         },
-        {
-          "name": "textareaId",
-          "type": "string",
-          "complexType": {
-            "original": "string",
-            "resolved": "string",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "textarea-id",
-          "reflectToAttr": true,
-          "docs": "Sets the ID for the textarea element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility.",
-          "docsTags": [],
-          "default": "uuidv4()",
-          "values": [
-            {
-              "type": "string"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "validation",
           "type": "string",

package/dist/cjs/app-globals-d8cbb987.js.map

@@ -1 +1 @@
-{"file":"app-globals-d8cbb987.js","mappings":";;;;;;AACY,MAAC,aAAa,GAAGA;;;;","names":["appGlobalScript"],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["import appGlobalScript from '/Users/admin/Sites/elia/nova-3/packages/native/src/global.ts';\nexport const globalScripts = appGlobalScript;\n"],"version":3}
+{"file":"app-globals-d8cbb987.js","mappings":";;;;;;AACY,MAAC,aAAa,GAAGA;;;;","names":["appGlobalScript"],"sources":["@stencil/core/internal/app-globals"],"sourcesContent":["import appGlobalScript from '/Users/admin/Sites/elia/nova-design-system/packages/native/src/global.ts';\nexport const globalScripts = appGlobalScript;\n"],"version":3}

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-d8cbb987.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["nv-fielddropdown.cjs",[[68,"nv-fielddropdown",{"inputId":[513,"input-id"],"label":[513],"description":[513],"placeholder":[513],"name":[513],"open":[1540],"autocomplete":[513],"value":[1537],"required":[516],"error":[516],"errorDescription":[513,"error-description"],"readonly":[516],"disabled":[516],"emptyresult":[513],"filterable":[1540],"filterText":[32],"isFilterable":[32],"selectedValues":[32],"getFilterText":[64]},[[0,"itemSelected","handleItemSelected"],[0,"openChanged","handleOpenChanged"],[0,"keydown","handleKeyDown"]],{"filterable":["watchFilterableHandler"],"value":["watchValueHandler"]}]]],["nv-fieldpassword.cjs",[[68,"nv-fieldpassword",{"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"value":[1537],"disabled":[516],"readonly":[516],"required":[516],"error":[516],"errorDescription":[513,"error-description"],"success":[516],"maxlength":[514],"minlength":[514],"pattern":[513],"mode":[513],"autocomplete":[513],"hidePasswordIcon":[516,"hide-password-icon"],"showPassword":[516,"show-password"],"showPasswordState":[32]},null,{"showPassword":["handleShowPasswordChange"]}]]],["nv-alert.cjs",[[4,"nv-alert",{"color":[1],"feedback":[1537],"message":[513],"heading":[513],"icon":[513],"dismissible":[516],"preventAutoClose":[516,"prevent-auto-close"],"hidden":[1540]},null,{"hidden":["handleHiddenChange"]}]]],["nv-avatar.cjs",[[4,"nv-avatar",{"xsmall":[4],"small":[4],"medium":[4],"large":[4],"xlarge":[4],"text":[1],"url":[1],"alt":[513],"src":[1537],"initials":[1537],"size":[1537],"color":[513]}]]],["nv-badge.cjs",[[4,"nv-badge",{"dismissal":[4],"icon":[1],"iconLocation":[513,"icon-location"],"color":[513],"label":[513],"leadIcon":[1537,"lead-icon"],"dismissible":[1540],"hidden":[1540],"preventAutoClose":[516,"prevent-auto-close"],"_isHidden":[32]},null,{"dismissal":["handleDismissalChange"],"icon":["handleIconChange"],"hidden":["handleHiddenChange"]}]]],["nv-button.cjs",[[68,"nv-button",{"size":[513],"emphasis":[513],"danger":[516],"loading":[1540],"disabled":[1540],"fluid":[516],"type":[513]},null,{"loading":["handleLoadingChange"],"disabled":["handleDisabledChange"]}]]],["nv-fieldnumber.cjs",[[68,"nv-fieldnumber",{"message":[1],"validation":[1],"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"max":[514],"min":[514],"step":[514],"value":[1538]},null,{"value":["watchValueHandler"]}]]],["nv-fieldselect.cjs",[[68,"nv-fieldselect",{"message":[1],"validation":[1],"selectId":[513,"select-id"],"label":[513],"description":[1537],"name":[513],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"multiple":[516],"value":[1537],"displayValue":[516,"display-value"],"computedDisplayValue":[32],"internalReadonly":[32]},null,{"value":["updateDisplayValueWatcher"],"displayValue":["handleDisplayValueChange"],"readonly":["handleReadonlyChange"]}]]],["nv-fieldtext.cjs",[[68,"nv-fieldtext",{"message":[1],"validation":[1],"textInputType":[1,"text-input-type"],"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"value":[1537],"type":[1537],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"maxlength":[514],"minlength":[514],"pattern":[513],"autocomplete":[513],"multiple":[516]}]]],["nv-menu.cjs",[[4,"nv-menu",{"open":[1540],"nested":[4],"disableCloseOnSelect":[4,"disable-close-on-select"],"placement":[1],"show":[64],"close":[64]},[[2,"click","handleMenuClick"],[0,"keydown","handleKeydown"],[0,"openChanged","handleOpenChanged"]]]]],["nv-menuitem.cjs",[[4,"nv-menuitem",{"icon":[513],"disabled":[516],"shortcut":[513],"hasSubmenu":[516,"has-submenu"]}]]],["nv-popover.cjs",[[4,"nv-popover",{"triggerElement":[1040],"open":[1540],"triggerMode":[1,"trigger-mode"],"placement":[1],"groupName":[1,"group-name"],"offset":[2],"hasArrow":[4,"has-arrow"],"disableFlip":[4,"disable-flip"],"shiftPadding":[2,"shift-padding"],"enterDelay":[2,"enter-delay"],"nested":[516],"show":[64],"hide":[64],"toggle":[64]},[[4,"openChanged","handleOpenChanged"],[4,"click","handleDocumentClick"],[5,"touchstart","handleDocumentTouch"]],{"open":["handleOpenChange"]}]]],["nv-tooltip.cjs",[[4,"nv-tooltip",{"message":[1],"placement":[1],"enterDelay":[2,"enter-delay"]}]]],["nv-base.cjs",[[4,"nv-base"]]],["nv-col.cjs",[[4,"nv-col",{"size":[514]}]]],["nv-fieldcheckbox.cjs",[[4,"nv-fieldcheckbox",{"message":[1],"validation":[1],"labelBefore":[4,"label-before"],"inputId":[513,"input-id"],"name":[513],"value":[513],"label":[513],"labelPlacement":[1537,"label-placement"],"hideLabel":[516,"hide-label"],"description":[1537],"error":[516],"errorDescription":[1537,"error-description"],"checked":[1540],"indeterminate":[1540],"disabled":[516],"readonly":[516],"required":[516]},[[0,"change","handleChange"]],{"checked":["onCheckedChanged"]}]]],["nv-fieldradio.cjs",[[68,"nv-fieldradio",{"message":[1],"labelBefore":[4,"label-before"],"inputId":[513,"input-id"],"name":[513],"value":[513],"label":[513],"labelPlacement":[1537,"label-placement"],"description":[1537],"error":[516],"errorDescription":[513,"error-description"],"checked":[1540],"disabled":[516]},[[0,"change","handleChange"]],{"checked":["handleCheckedChange"]}]]],["nv-fieldtextarea.cjs",[[68,"nv-fieldtextarea",{"message":[1],"validation":[1],"textareaId":[513,"textarea-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"value":[1537],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"maxlength":[514],"minlength":[514],"rows":[514],"resize":[513],"autosize":[516]},null,{"rows":["rowsChanged"],"autosize":["autosizeChanged"]}]]],["nv-fieldtoggle.cjs",[[4,"nv-fieldtoggle",{"inputId":[1,"input-id"],"name":[1],"value":[1],"label":[1],"labelPlacement":[513,"label-placement"],"hideLabel":[4,"hide-label"],"description":[513],"checked":[1540],"disabled":[4],"readonly":[4]},[[0,"change","handleChange"]],{"checked":["onCheckedChanged"]}]]],["nv-row.cjs",[[4,"nv-row"]]],["nv-stack.cjs",[[4,"nv-stack",{"gutter":[514],"fill":[516],"flex":[516],"full":[516],"vertical":[516]}]]],["nv-icon.cjs",[[0,"nv-icon",{"xsmall":[4],"small":[4],"medium":[4],"large":[4],"xlarge":[4],"color":[1],"name":[513],"size":[1537],"spriteUrl":[32]}]]],["nv-fielddropdownitem.cjs",[[4,"nv-fielddropdownitem",{"disabled":[516],"selected":[1540],"value":[513],"label":[513]}]]],["nv-loader.cjs",[[0,"nv-loader",{"size":[513],"color":[513]}]]],["nv-iconbutton.cjs",[[68,"nv-iconbutton",{"size":[513],"emphasis":[513],"loading":[1540],"disabled":[1540],"active":[516],"name":[513],"type":[513],"shape":[513]},null,{"loading":["handleLoadingChange"],"disabled":["handleDisabledChange"]}]]]], options);
+  return index.bootstrapLazy([["nv-fielddropdown.cjs",[[68,"nv-fielddropdown",{"inputId":[513,"input-id"],"label":[513],"description":[513],"placeholder":[513],"name":[513],"open":[1540],"autocomplete":[513],"value":[1537],"required":[516],"error":[516],"errorDescription":[513,"error-description"],"readonly":[516],"disabled":[516],"emptyresult":[513],"filterable":[1540],"filterText":[32],"isFilterable":[32],"selectedValues":[32],"getFilterText":[64]},[[0,"itemSelected","handleItemSelected"],[0,"openChanged","handleOpenChanged"],[0,"keydown","handleKeyDown"]],{"filterable":["watchFilterableHandler"],"value":["watchValueHandler"]}]]],["nv-fieldpassword.cjs",[[68,"nv-fieldpassword",{"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"value":[1537],"disabled":[516],"readonly":[516],"required":[516],"error":[516],"errorDescription":[513,"error-description"],"success":[516],"maxlength":[514],"minlength":[514],"pattern":[513],"mode":[513],"autocomplete":[513],"hidePasswordIcon":[516,"hide-password-icon"],"showPassword":[516,"show-password"],"showPasswordState":[32]},null,{"showPassword":["handleShowPasswordChange"]}]]],["nv-alert.cjs",[[4,"nv-alert",{"color":[1],"feedback":[1537],"message":[513],"heading":[513],"icon":[513],"dismissible":[516],"preventAutoClose":[516,"prevent-auto-close"],"hidden":[1540]},null,{"hidden":["handleHiddenChange"]}]]],["nv-avatar.cjs",[[4,"nv-avatar",{"xsmall":[4],"small":[4],"medium":[4],"large":[4],"xlarge":[4],"text":[1],"url":[1],"alt":[513],"src":[1537],"initials":[1537],"size":[1537],"color":[513]}]]],["nv-badge.cjs",[[4,"nv-badge",{"dismissal":[4],"icon":[1],"iconLocation":[513,"icon-location"],"color":[513],"label":[513],"leadIcon":[1537,"lead-icon"],"dismissible":[1540],"hidden":[1540],"preventAutoClose":[516,"prevent-auto-close"],"_isHidden":[32]},null,{"dismissal":["handleDismissalChange"],"icon":["handleIconChange"],"hidden":["handleHiddenChange"]}]]],["nv-button.cjs",[[68,"nv-button",{"size":[513],"emphasis":[513],"danger":[516],"loading":[1540],"disabled":[1540],"fluid":[516],"type":[513]},null,{"loading":["handleLoadingChange"],"disabled":["handleDisabledChange"]}]]],["nv-fieldnumber.cjs",[[68,"nv-fieldnumber",{"message":[1],"validation":[1],"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"max":[514],"min":[514],"step":[514],"value":[1538]},null,{"value":["watchValueHandler"]}]]],["nv-fieldselect.cjs",[[68,"nv-fieldselect",{"message":[1],"validation":[1],"selectId":[513,"select-id"],"label":[513],"description":[1537],"name":[513],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"multiple":[516],"value":[1537],"displayValue":[516,"display-value"],"computedDisplayValue":[32],"internalReadonly":[32]},null,{"value":["updateDisplayValueWatcher"],"displayValue":["handleDisplayValueChange"],"readonly":["handleReadonlyChange"]}]]],["nv-fieldtext.cjs",[[68,"nv-fieldtext",{"message":[1],"validation":[1],"textInputType":[1,"text-input-type"],"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"value":[1537],"type":[1537],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"maxlength":[514],"minlength":[514],"pattern":[513],"autocomplete":[513],"multiple":[516]}]]],["nv-menu.cjs",[[4,"nv-menu",{"open":[1540],"nested":[4],"disableCloseOnSelect":[4,"disable-close-on-select"],"placement":[1],"show":[64],"close":[64]},[[2,"click","handleMenuClick"],[0,"keydown","handleKeydown"],[0,"openChanged","handleOpenChanged"]]]]],["nv-menuitem.cjs",[[4,"nv-menuitem",{"icon":[513],"disabled":[516],"shortcut":[513],"hasSubmenu":[516,"has-submenu"]}]]],["nv-popover.cjs",[[4,"nv-popover",{"triggerElement":[1040],"open":[1540],"triggerMode":[1,"trigger-mode"],"placement":[1],"groupName":[1,"group-name"],"offset":[2],"hasArrow":[4,"has-arrow"],"disableFlip":[4,"disable-flip"],"shiftPadding":[2,"shift-padding"],"enterDelay":[2,"enter-delay"],"nested":[516],"show":[64],"hide":[64],"toggle":[64]},[[4,"openChanged","handleOpenChanged"],[4,"click","handleDocumentClick"],[5,"touchstart","handleDocumentTouch"]],{"open":["handleOpenChange"]}]]],["nv-tooltip.cjs",[[4,"nv-tooltip",{"message":[1],"placement":[1],"enterDelay":[2,"enter-delay"]}]]],["nv-base.cjs",[[4,"nv-base"]]],["nv-col.cjs",[[4,"nv-col",{"size":[514]}]]],["nv-fieldcheckbox.cjs",[[4,"nv-fieldcheckbox",{"message":[1],"validation":[1],"labelBefore":[4,"label-before"],"inputId":[513,"input-id"],"name":[513],"value":[513],"label":[513],"labelPlacement":[1537,"label-placement"],"hideLabel":[516,"hide-label"],"description":[1537],"error":[516],"errorDescription":[1537,"error-description"],"checked":[1540],"indeterminate":[1540],"disabled":[516],"readonly":[516],"required":[516]},[[0,"change","handleChange"]],{"checked":["onCheckedChanged"]}]]],["nv-fieldradio.cjs",[[68,"nv-fieldradio",{"message":[1],"labelBefore":[4,"label-before"],"inputId":[513,"input-id"],"name":[513],"value":[513],"label":[513],"labelPlacement":[1537,"label-placement"],"description":[1537],"error":[516],"errorDescription":[513,"error-description"],"checked":[1540],"disabled":[516]},[[0,"change","handleChange"]],{"checked":["handleCheckedChange"]}]]],["nv-fieldtextarea.cjs",[[68,"nv-fieldtextarea",{"message":[1],"validation":[1],"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"value":[1537],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"maxlength":[514],"minlength":[514],"rows":[514],"resize":[513],"autosize":[516]},null,{"rows":["rowsChanged"],"autosize":["autosizeChanged"]}]]],["nv-fieldtoggle.cjs",[[4,"nv-fieldtoggle",{"inputId":[1,"input-id"],"name":[1],"value":[1],"label":[1],"labelPlacement":[513,"label-placement"],"hideLabel":[4,"hide-label"],"description":[513],"checked":[1540],"disabled":[4],"readonly":[4]},[[0,"change","handleChange"]],{"checked":["onCheckedChanged"]}]]],["nv-row.cjs",[[4,"nv-row"]]],["nv-stack.cjs",[[4,"nv-stack",{"gutter":[514],"fill":[516],"flex":[516],"full":[516],"vertical":[516]}]]],["nv-icon.cjs",[[0,"nv-icon",{"xsmall":[4],"small":[4],"medium":[4],"large":[4],"xlarge":[4],"color":[1],"name":[513],"size":[1537],"spriteUrl":[32]}]]],["nv-fielddropdownitem.cjs",[[4,"nv-fielddropdownitem",{"disabled":[516],"selected":[1540],"value":[513],"label":[513]}]]],["nv-loader.cjs",[[0,"nv-loader",{"size":[513],"color":[513]}]]],["nv-iconbutton.cjs",[[68,"nv-iconbutton",{"size":[513],"emphasis":[513],"loading":[1540],"disabled":[1540],"active":[516],"name":[513],"type":[513],"shape":[513]},null,{"loading":["handleLoadingChange"],"disabled":["handleDisabledChange"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/native.cjs.js

@@ -40,7 +40,7 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["nv-fielddropdown.cjs",[[68,"nv-fielddropdown",{"inputId":[513,"input-id"],"label":[513],"description":[513],"placeholder":[513],"name":[513],"open":[1540],"autocomplete":[513],"value":[1537],"required":[516],"error":[516],"errorDescription":[513,"error-description"],"readonly":[516],"disabled":[516],"emptyresult":[513],"filterable":[1540],"filterText":[32],"isFilterable":[32],"selectedValues":[32],"getFilterText":[64]},[[0,"itemSelected","handleItemSelected"],[0,"openChanged","handleOpenChanged"],[0,"keydown","handleKeyDown"]],{"filterable":["watchFilterableHandler"],"value":["watchValueHandler"]}]]],["nv-fieldpassword.cjs",[[68,"nv-fieldpassword",{"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"value":[1537],"disabled":[516],"readonly":[516],"required":[516],"error":[516],"errorDescription":[513,"error-description"],"success":[516],"maxlength":[514],"minlength":[514],"pattern":[513],"mode":[513],"autocomplete":[513],"hidePasswordIcon":[516,"hide-password-icon"],"showPassword":[516,"show-password"],"showPasswordState":[32]},null,{"showPassword":["handleShowPasswordChange"]}]]],["nv-alert.cjs",[[4,"nv-alert",{"color":[1],"feedback":[1537],"message":[513],"heading":[513],"icon":[513],"dismissible":[516],"preventAutoClose":[516,"prevent-auto-close"],"hidden":[1540]},null,{"hidden":["handleHiddenChange"]}]]],["nv-avatar.cjs",[[4,"nv-avatar",{"xsmall":[4],"small":[4],"medium":[4],"large":[4],"xlarge":[4],"text":[1],"url":[1],"alt":[513],"src":[1537],"initials":[1537],"size":[1537],"color":[513]}]]],["nv-badge.cjs",[[4,"nv-badge",{"dismissal":[4],"icon":[1],"iconLocation":[513,"icon-location"],"color":[513],"label":[513],"leadIcon":[1537,"lead-icon"],"dismissible":[1540],"hidden":[1540],"preventAutoClose":[516,"prevent-auto-close"],"_isHidden":[32]},null,{"dismissal":["handleDismissalChange"],"icon":["handleIconChange"],"hidden":["handleHiddenChange"]}]]],["nv-button.cjs",[[68,"nv-button",{"size":[513],"emphasis":[513],"danger":[516],"loading":[1540],"disabled":[1540],"fluid":[516],"type":[513]},null,{"loading":["handleLoadingChange"],"disabled":["handleDisabledChange"]}]]],["nv-fieldnumber.cjs",[[68,"nv-fieldnumber",{"message":[1],"validation":[1],"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"max":[514],"min":[514],"step":[514],"value":[1538]},null,{"value":["watchValueHandler"]}]]],["nv-fieldselect.cjs",[[68,"nv-fieldselect",{"message":[1],"validation":[1],"selectId":[513,"select-id"],"label":[513],"description":[1537],"name":[513],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"multiple":[516],"value":[1537],"displayValue":[516,"display-value"],"computedDisplayValue":[32],"internalReadonly":[32]},null,{"value":["updateDisplayValueWatcher"],"displayValue":["handleDisplayValueChange"],"readonly":["handleReadonlyChange"]}]]],["nv-fieldtext.cjs",[[68,"nv-fieldtext",{"message":[1],"validation":[1],"textInputType":[1,"text-input-type"],"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"value":[1537],"type":[1537],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"maxlength":[514],"minlength":[514],"pattern":[513],"autocomplete":[513],"multiple":[516]}]]],["nv-menu.cjs",[[4,"nv-menu",{"open":[1540],"nested":[4],"disableCloseOnSelect":[4,"disable-close-on-select"],"placement":[1],"show":[64],"close":[64]},[[2,"click","handleMenuClick"],[0,"keydown","handleKeydown"],[0,"openChanged","handleOpenChanged"]]]]],["nv-menuitem.cjs",[[4,"nv-menuitem",{"icon":[513],"disabled":[516],"shortcut":[513],"hasSubmenu":[516,"has-submenu"]}]]],["nv-popover.cjs",[[4,"nv-popover",{"triggerElement":[1040],"open":[1540],"triggerMode":[1,"trigger-mode"],"placement":[1],"groupName":[1,"group-name"],"offset":[2],"hasArrow":[4,"has-arrow"],"disableFlip":[4,"disable-flip"],"shiftPadding":[2,"shift-padding"],"enterDelay":[2,"enter-delay"],"nested":[516],"show":[64],"hide":[64],"toggle":[64]},[[4,"openChanged","handleOpenChanged"],[4,"click","handleDocumentClick"],[5,"touchstart","handleDocumentTouch"]],{"open":["handleOpenChange"]}]]],["nv-tooltip.cjs",[[4,"nv-tooltip",{"message":[1],"placement":[1],"enterDelay":[2,"enter-delay"]}]]],["nv-base.cjs",[[4,"nv-base"]]],["nv-col.cjs",[[4,"nv-col",{"size":[514]}]]],["nv-fieldcheckbox.cjs",[[4,"nv-fieldcheckbox",{"message":[1],"validation":[1],"labelBefore":[4,"label-before"],"inputId":[513,"input-id"],"name":[513],"value":[513],"label":[513],"labelPlacement":[1537,"label-placement"],"hideLabel":[516,"hide-label"],"description":[1537],"error":[516],"errorDescription":[1537,"error-description"],"checked":[1540],"indeterminate":[1540],"disabled":[516],"readonly":[516],"required":[516]},[[0,"change","handleChange"]],{"checked":["onCheckedChanged"]}]]],["nv-fieldradio.cjs",[[68,"nv-fieldradio",{"message":[1],"labelBefore":[4,"label-before"],"inputId":[513,"input-id"],"name":[513],"value":[513],"label":[513],"labelPlacement":[1537,"label-placement"],"description":[1537],"error":[516],"errorDescription":[513,"error-description"],"checked":[1540],"disabled":[516]},[[0,"change","handleChange"]],{"checked":["handleCheckedChange"]}]]],["nv-fieldtextarea.cjs",[[68,"nv-fieldtextarea",{"message":[1],"validation":[1],"textareaId":[513,"textarea-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"value":[1537],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"maxlength":[514],"minlength":[514],"rows":[514],"resize":[513],"autosize":[516]},null,{"rows":["rowsChanged"],"autosize":["autosizeChanged"]}]]],["nv-fieldtoggle.cjs",[[4,"nv-fieldtoggle",{"inputId":[1,"input-id"],"name":[1],"value":[1],"label":[1],"labelPlacement":[513,"label-placement"],"hideLabel":[4,"hide-label"],"description":[513],"checked":[1540],"disabled":[4],"readonly":[4]},[[0,"change","handleChange"]],{"checked":["onCheckedChanged"]}]]],["nv-row.cjs",[[4,"nv-row"]]],["nv-stack.cjs",[[4,"nv-stack",{"gutter":[514],"fill":[516],"flex":[516],"full":[516],"vertical":[516]}]]],["nv-icon.cjs",[[0,"nv-icon",{"xsmall":[4],"small":[4],"medium":[4],"large":[4],"xlarge":[4],"color":[1],"name":[513],"size":[1537],"spriteUrl":[32]}]]],["nv-fielddropdownitem.cjs",[[4,"nv-fielddropdownitem",{"disabled":[516],"selected":[1540],"value":[513],"label":[513]}]]],["nv-loader.cjs",[[0,"nv-loader",{"size":[513],"color":[513]}]]],["nv-iconbutton.cjs",[[68,"nv-iconbutton",{"size":[513],"emphasis":[513],"loading":[1540],"disabled":[1540],"active":[516],"name":[513],"type":[513],"shape":[513]},null,{"loading":["handleLoadingChange"],"disabled":["handleDisabledChange"]}]]]], options);
+  return index.bootstrapLazy([["nv-fielddropdown.cjs",[[68,"nv-fielddropdown",{"inputId":[513,"input-id"],"label":[513],"description":[513],"placeholder":[513],"name":[513],"open":[1540],"autocomplete":[513],"value":[1537],"required":[516],"error":[516],"errorDescription":[513,"error-description"],"readonly":[516],"disabled":[516],"emptyresult":[513],"filterable":[1540],"filterText":[32],"isFilterable":[32],"selectedValues":[32],"getFilterText":[64]},[[0,"itemSelected","handleItemSelected"],[0,"openChanged","handleOpenChanged"],[0,"keydown","handleKeyDown"]],{"filterable":["watchFilterableHandler"],"value":["watchValueHandler"]}]]],["nv-fieldpassword.cjs",[[68,"nv-fieldpassword",{"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"value":[1537],"disabled":[516],"readonly":[516],"required":[516],"error":[516],"errorDescription":[513,"error-description"],"success":[516],"maxlength":[514],"minlength":[514],"pattern":[513],"mode":[513],"autocomplete":[513],"hidePasswordIcon":[516,"hide-password-icon"],"showPassword":[516,"show-password"],"showPasswordState":[32]},null,{"showPassword":["handleShowPasswordChange"]}]]],["nv-alert.cjs",[[4,"nv-alert",{"color":[1],"feedback":[1537],"message":[513],"heading":[513],"icon":[513],"dismissible":[516],"preventAutoClose":[516,"prevent-auto-close"],"hidden":[1540]},null,{"hidden":["handleHiddenChange"]}]]],["nv-avatar.cjs",[[4,"nv-avatar",{"xsmall":[4],"small":[4],"medium":[4],"large":[4],"xlarge":[4],"text":[1],"url":[1],"alt":[513],"src":[1537],"initials":[1537],"size":[1537],"color":[513]}]]],["nv-badge.cjs",[[4,"nv-badge",{"dismissal":[4],"icon":[1],"iconLocation":[513,"icon-location"],"color":[513],"label":[513],"leadIcon":[1537,"lead-icon"],"dismissible":[1540],"hidden":[1540],"preventAutoClose":[516,"prevent-auto-close"],"_isHidden":[32]},null,{"dismissal":["handleDismissalChange"],"icon":["handleIconChange"],"hidden":["handleHiddenChange"]}]]],["nv-button.cjs",[[68,"nv-button",{"size":[513],"emphasis":[513],"danger":[516],"loading":[1540],"disabled":[1540],"fluid":[516],"type":[513]},null,{"loading":["handleLoadingChange"],"disabled":["handleDisabledChange"]}]]],["nv-fieldnumber.cjs",[[68,"nv-fieldnumber",{"message":[1],"validation":[1],"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"max":[514],"min":[514],"step":[514],"value":[1538]},null,{"value":["watchValueHandler"]}]]],["nv-fieldselect.cjs",[[68,"nv-fieldselect",{"message":[1],"validation":[1],"selectId":[513,"select-id"],"label":[513],"description":[1537],"name":[513],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"multiple":[516],"value":[1537],"displayValue":[516,"display-value"],"computedDisplayValue":[32],"internalReadonly":[32]},null,{"value":["updateDisplayValueWatcher"],"displayValue":["handleDisplayValueChange"],"readonly":["handleReadonlyChange"]}]]],["nv-fieldtext.cjs",[[68,"nv-fieldtext",{"message":[1],"validation":[1],"textInputType":[1,"text-input-type"],"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"value":[1537],"type":[1537],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"maxlength":[514],"minlength":[514],"pattern":[513],"autocomplete":[513],"multiple":[516]}]]],["nv-menu.cjs",[[4,"nv-menu",{"open":[1540],"nested":[4],"disableCloseOnSelect":[4,"disable-close-on-select"],"placement":[1],"show":[64],"close":[64]},[[2,"click","handleMenuClick"],[0,"keydown","handleKeydown"],[0,"openChanged","handleOpenChanged"]]]]],["nv-menuitem.cjs",[[4,"nv-menuitem",{"icon":[513],"disabled":[516],"shortcut":[513],"hasSubmenu":[516,"has-submenu"]}]]],["nv-popover.cjs",[[4,"nv-popover",{"triggerElement":[1040],"open":[1540],"triggerMode":[1,"trigger-mode"],"placement":[1],"groupName":[1,"group-name"],"offset":[2],"hasArrow":[4,"has-arrow"],"disableFlip":[4,"disable-flip"],"shiftPadding":[2,"shift-padding"],"enterDelay":[2,"enter-delay"],"nested":[516],"show":[64],"hide":[64],"toggle":[64]},[[4,"openChanged","handleOpenChanged"],[4,"click","handleDocumentClick"],[5,"touchstart","handleDocumentTouch"]],{"open":["handleOpenChange"]}]]],["nv-tooltip.cjs",[[4,"nv-tooltip",{"message":[1],"placement":[1],"enterDelay":[2,"enter-delay"]}]]],["nv-base.cjs",[[4,"nv-base"]]],["nv-col.cjs",[[4,"nv-col",{"size":[514]}]]],["nv-fieldcheckbox.cjs",[[4,"nv-fieldcheckbox",{"message":[1],"validation":[1],"labelBefore":[4,"label-before"],"inputId":[513,"input-id"],"name":[513],"value":[513],"label":[513],"labelPlacement":[1537,"label-placement"],"hideLabel":[516,"hide-label"],"description":[1537],"error":[516],"errorDescription":[1537,"error-description"],"checked":[1540],"indeterminate":[1540],"disabled":[516],"readonly":[516],"required":[516]},[[0,"change","handleChange"]],{"checked":["onCheckedChanged"]}]]],["nv-fieldradio.cjs",[[68,"nv-fieldradio",{"message":[1],"labelBefore":[4,"label-before"],"inputId":[513,"input-id"],"name":[513],"value":[513],"label":[513],"labelPlacement":[1537,"label-placement"],"description":[1537],"error":[516],"errorDescription":[513,"error-description"],"checked":[1540],"disabled":[516]},[[0,"change","handleChange"]],{"checked":["handleCheckedChange"]}]]],["nv-fieldtextarea.cjs",[[68,"nv-fieldtextarea",{"message":[1],"validation":[1],"inputId":[513,"input-id"],"label":[513],"description":[1537],"placeholder":[513],"name":[513],"value":[1537],"disabled":[516],"readonly":[516],"required":[516],"error":[1540],"errorDescription":[1537,"error-description"],"success":[516],"maxlength":[514],"minlength":[514],"rows":[514],"resize":[513],"autosize":[516]},null,{"rows":["rowsChanged"],"autosize":["autosizeChanged"]}]]],["nv-fieldtoggle.cjs",[[4,"nv-fieldtoggle",{"inputId":[1,"input-id"],"name":[1],"value":[1],"label":[1],"labelPlacement":[513,"label-placement"],"hideLabel":[4,"hide-label"],"description":[513],"checked":[1540],"disabled":[4],"readonly":[4]},[[0,"change","handleChange"]],{"checked":["onCheckedChanged"]}]]],["nv-row.cjs",[[4,"nv-row"]]],["nv-stack.cjs",[[4,"nv-stack",{"gutter":[514],"fill":[516],"flex":[516],"full":[516],"vertical":[516]}]]],["nv-icon.cjs",[[0,"nv-icon",{"xsmall":[4],"small":[4],"medium":[4],"large":[4],"xlarge":[4],"color":[1],"name":[513],"size":[1537],"spriteUrl":[32]}]]],["nv-fielddropdownitem.cjs",[[4,"nv-fielddropdownitem",{"disabled":[516],"selected":[1540],"value":[513],"label":[513]}]]],["nv-loader.cjs",[[0,"nv-loader",{"size":[513],"color":[513]}]]],["nv-iconbutton.cjs",[[68,"nv-iconbutton",{"size":[513],"emphasis":[513],"loading":[1540],"disabled":[1540],"active":[516],"name":[513],"type":[513],"shape":[513]},null,{"loading":["handleLoadingChange"],"disabled":["handleDisabledChange"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/nv-fieldtextarea.cjs.entry.js

@@ -29,7 +29,7 @@ const NvFieldtextarea = class {
         };
         this.message = undefined;
         this.validation = undefined;
-        this.textareaId = v4.v4();
+        this.inputId = v4.v4();
         this.label = undefined;
         this.description = undefined;
         this.placeholder = undefined;
@@ -133,9 +133,9 @@ const NvFieldtextarea = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'b2d6c6960de6f0345aa68d6a7745736bbc17af63' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '208a64d1a050d9660feddc5a9da12fdf5cbba3b5', htmlFor: this.textareaId }, index.h("slot", { key: 'c6a6c34c0a9947552b24acd1a036b960d475989c', name: "label" }, this.label))), index.h("div", { key: '4f843961c1411ee913394e62b340854073a7af76', class: "textarea-wrapper" }, index.h("div", { key: '622dc04df7e02c63f3880b55787000f81e8450a8', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: '3da5d56fed71c6a4d2ace78610a94e6fa873bc85', id: this.textareaId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx.clsx(this.getResize()) }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '3f7dee56c20b55baa0f57cb366e54048cb247599', class: "description" }, index.h("slot", { key: '3aaa22737a238e6a26818a9b0f5556aff70c1273', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b0849984658ba6794ee510cdc24f000b791c095e', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '952f86cfe6f319cfcaeba136ef21f3bf1695dbec', name: "error-description" }, this.errorDescription)))));
+        return (index.h(index.Host, { key: '535238832a686d98bed7a743ba994515be7fa43b' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'ee8ee83154d8ebd436f697fb69235ad431aed0fd', htmlFor: this.inputId }, index.h("slot", { key: 'cf261fdd000fb29094888419a51f82dfa3fd8648', name: "label" }, this.label))), index.h("div", { key: '4b0573cf4c17e9a7c1ef2ff7ab4d1d08fe3e4848', class: "textarea-wrapper" }, index.h("div", { key: '36817cc56f30858fd5c4d2fe0acb29ebcbcaa2b8', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: '6586b1d3dd17b29edccb96e556b6d01b721025b5', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx.clsx(this.getResize()) }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '068a1b72b760fed02ef647a866016ff6a39ed8e8', class: "description" }, index.h("slot", { key: '2d8e34b3c44a5ca3943dadbe91a98efdfc9e1df2', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '35fea730fcc254764c545f275298d3b03917b608', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '58e300e380166c82e9857aa9d2929bdd11d798bf', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/nv-fieldtextarea.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"nv-fieldtextarea.entry.cjs.js","mappings":"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","names":["uuidv4","h","Host","clsx"],"sources":["src/components/nv-fieldtextarea/nv-fieldtextarea.scss?tag=nv-fieldtextarea","src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-textarea-wrapper() {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\n\n@mixin form-field-textarea-container() {\n  display: flex;\n  flex-grow: 1;\n  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n  justify-content: center;\n  align-items: center;\n  gap: var(--form-field-gap);\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n\n  &:hover {\n    border-color: var(--nv-field-border-hover);\n  }\n\n  &:focus-within {\n    border-color: var(--nv-field-border-focus);\n    box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n  }\n  // Keep  ReadOnly before Disabled\n  &:has(textarea:read-only) {\n    // opacity: var(--components-form-opacity-readonly, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-readonly);\n    border-color: var(--nv-field-border-readonly);\n  }\n\n  &:has(textarea:disabled) {\n    // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-disabled);\n    border-color: var(--nv-field-border-disabled);\n  }\n}\n\n@mixin form-field-textarea() {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n\n  &:focus {\n    outline: none;\n  }\n\n  &::placeholder {\n    overflow: hidden;\n    color: var(--components-form-field-content-placeholder);\n    text-overflow: ellipsis;\n    font-family: \"TT Norms Pro\", sans-serif;\n    font-size: var(--form-field-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--form-field-line-height);\n  }\n}\n\nnv-fieldtextarea {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly=\"false\"]) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error=\"false\"]) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success=\"false\"]) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required=\"false\"]) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .textarea-wrapper {\n    @include form-field-textarea-wrapper();\n\n    .textarea-container {\n      @include form-field-textarea-container();\n\n      textarea {\n        @include form-field-textarea();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtextarea',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n  @Element() el: HTMLNvFieldtextareaElement;\n  private textareaElement!: HTMLTextAreaElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated use errorDescription and set the error prop instead.\n   */\n  @Prop()\n  readonly validation: string;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the textarea element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly textareaId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * textarea field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text textarea field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the textarea field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the textarea field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the textarea’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the textarea field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the textarea’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the textarea field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the textarea field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the textarea field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the textarea field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the textarea field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the textarea field’s appearance to indicate successful textarea or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the textarea field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their textarea within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * textarea field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * The number of visible text lines for the control. The default is 3. This\n   * can be useful when you want to limit the size of the textarea field or when\n   * you want to make the textarea field smaller to fit a specific layout. The\n   * textarea field will expand vertically to fit the text as the user types.\n   */\n  @Prop({ reflect: true })\n  readonly rows: number = 3;\n\n  /**\n   * Controls the resize property of a textarea. It can be set to none, both,\n   * horizontal, or vertical. The default is vertical.\n   */\n  @Prop({ reflect: true })\n  readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Enable this to make the textarea automatically resize as the user types,\n   * adjusting the height to fit the content. For the best experience, avoid\n   * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n   * can still be allowed if desired.\n   */\n  @Prop({ reflect: true })\n  readonly autosize: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the textarea value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * If autosize is true, we need to make sure to update the min-height when\n   * the rows change.\n   */\n  @Watch('rows')\n  rowsChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  /**\n   * If autosize is true, we need to make sure to update the height and\n   * min-height, if false, we need to remove the height property.\n   */\n  @Watch('autosize')\n  autosizeChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    } else {\n      this.textareaElement?.style.removeProperty('height');\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleTextarea = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement;\n    this.value = textarea.value;\n    this.valueChanged.emit(textarea.value);\n\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  };\n\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      this.textareaElement.style.height = 'auto';\n\n      // Get computed styles\n      const computedStyle = window.getComputedStyle(this.textareaElement);\n      const lineHeight = parseFloat(computedStyle.lineHeight);\n      const paddingTop = parseFloat(computedStyle.paddingTop);\n      const paddingBottom = parseFloat(computedStyle.paddingBottom);\n      const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n      const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n      // Calculate min-height based on rows\n      const minHeight =\n        lineHeight * this.rows +\n        paddingTop +\n        paddingBottom +\n        borderTopWidth +\n        borderBottomWidth;\n\n      this.textareaElement.style.minHeight = `${minHeight}px`;\n      this.textareaElement.style.height =\n        this.textareaElement.scrollHeight + 'px';\n    }\n  }\n\n  /**\n   * Class        Properties\n   * resize-none\tresize: none;\n   * resize-y\t    resize: vertical;\n   * resize-x\t    resize: horizontal;\n   * resize\t      resize: both;\n   * @returns {string} The resize class.\n   */\n  private getResize() {\n    if (this.resize === 'none') return 'resize-none';\n    if (this.resize === 'vertical') return 'resize-y';\n    if (this.resize === 'horizontal') return 'resize-x';\n    if (this.resize === 'both') return 'resize';\n    return 'resize-none';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.textareaId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"textarea-wrapper\">\n          <div\n            class=\"textarea-container\"\n            onClick={this.handleTextareaContainerClick}\n          >\n            <textarea\n              id={this.textareaId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              autocomplete=\"off\"\n              value={this.value}\n              onInput={this.handleTextarea}\n              rows={this.rows}\n              class={clsx(this.getResize())}\n            />\n          </div>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-fieldtextarea.entry.cjs.js","mappings":"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","names":["uuidv4","h","Host","clsx"],"sources":["src/components/nv-fieldtextarea/nv-fieldtextarea.scss?tag=nv-fieldtextarea","src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-textarea-wrapper() {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\n\n@mixin form-field-textarea-container() {\n  display: flex;\n  flex-grow: 1;\n  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n  justify-content: center;\n  align-items: center;\n  gap: var(--form-field-gap);\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n\n  &:hover {\n    border-color: var(--nv-field-border-hover);\n  }\n\n  &:focus-within {\n    border-color: var(--nv-field-border-focus);\n    box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n  }\n  // Keep  ReadOnly before Disabled\n  &:has(textarea:read-only) {\n    // opacity: var(--components-form-opacity-readonly, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-readonly);\n    border-color: var(--nv-field-border-readonly);\n  }\n\n  &:has(textarea:disabled) {\n    // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-disabled);\n    border-color: var(--nv-field-border-disabled);\n  }\n}\n\n@mixin form-field-textarea() {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n\n  &:focus {\n    outline: none;\n  }\n\n  &::placeholder {\n    overflow: hidden;\n    color: var(--components-form-field-content-placeholder);\n    text-overflow: ellipsis;\n    font-family: \"TT Norms Pro\", sans-serif;\n    font-size: var(--form-field-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--form-field-line-height);\n  }\n}\n\nnv-fieldtextarea {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly=\"false\"]) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error=\"false\"]) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success=\"false\"]) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required=\"false\"]) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .textarea-wrapper {\n    @include form-field-textarea-wrapper();\n\n    .textarea-container {\n      @include form-field-textarea-container();\n\n      textarea {\n        @include form-field-textarea();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtextarea',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n  @Element() el: HTMLNvFieldtextareaElement;\n  private textareaElement!: HTMLTextAreaElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated use errorDescription and set the error prop instead.\n   */\n  @Prop()\n  readonly validation: string;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * textarea field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text textarea field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the textarea field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the textarea field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the textarea’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the textarea field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the textarea’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the textarea field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the textarea field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the textarea field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the textarea field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the textarea field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the textarea field’s appearance to indicate successful textarea or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the textarea field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their textarea within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * textarea field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * The number of visible text lines for the control. The default is 3. This\n   * can be useful when you want to limit the size of the textarea field or when\n   * you want to make the textarea field smaller to fit a specific layout. The\n   * textarea field will expand vertically to fit the text as the user types.\n   */\n  @Prop({ reflect: true })\n  readonly rows: number = 3;\n\n  /**\n   * Controls the resize property of a textarea. It can be set to none, both,\n   * horizontal, or vertical. The default is vertical.\n   */\n  @Prop({ reflect: true })\n  readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Enable this to make the textarea automatically resize as the user types,\n   * adjusting the height to fit the content. For the best experience, avoid\n   * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n   * can still be allowed if desired.\n   */\n  @Prop({ reflect: true })\n  readonly autosize: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the textarea value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * If autosize is true, we need to make sure to update the min-height when\n   * the rows change.\n   */\n  @Watch('rows')\n  rowsChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  /**\n   * If autosize is true, we need to make sure to update the height and\n   * min-height, if false, we need to remove the height property.\n   */\n  @Watch('autosize')\n  autosizeChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    } else {\n      this.textareaElement?.style.removeProperty('height');\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleTextarea = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement;\n    this.value = textarea.value;\n    this.valueChanged.emit(textarea.value);\n\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  };\n\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      this.textareaElement.style.height = 'auto';\n\n      // Get computed styles\n      const computedStyle = window.getComputedStyle(this.textareaElement);\n      const lineHeight = parseFloat(computedStyle.lineHeight);\n      const paddingTop = parseFloat(computedStyle.paddingTop);\n      const paddingBottom = parseFloat(computedStyle.paddingBottom);\n      const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n      const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n      // Calculate min-height based on rows\n      const minHeight =\n        lineHeight * this.rows +\n        paddingTop +\n        paddingBottom +\n        borderTopWidth +\n        borderBottomWidth;\n\n      this.textareaElement.style.minHeight = `${minHeight}px`;\n      this.textareaElement.style.height =\n        this.textareaElement.scrollHeight + 'px';\n    }\n  }\n\n  /**\n   * Class        Properties\n   * resize-none\tresize: none;\n   * resize-y\t    resize: vertical;\n   * resize-x\t    resize: horizontal;\n   * resize\t      resize: both;\n   * @returns {string} The resize class.\n   */\n  private getResize() {\n    if (this.resize === 'none') return 'resize-none';\n    if (this.resize === 'vertical') return 'resize-y';\n    if (this.resize === 'horizontal') return 'resize-x';\n    if (this.resize === 'both') return 'resize';\n    return 'resize-none';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"textarea-wrapper\">\n          <div\n            class=\"textarea-container\"\n            onClick={this.handleTextareaContainerClick}\n          >\n            <textarea\n              id={this.inputId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              autocomplete=\"off\"\n              value={this.value}\n              onInput={this.handleTextarea}\n              rows={this.rows}\n              class={clsx(this.getResize())}\n            />\n          </div>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js

@@ -24,7 +24,7 @@ export class NvFieldtextarea {
         };
         this.message = undefined;
         this.validation = undefined;
-        this.textareaId = uuidv4();
+        this.inputId = uuidv4();
         this.label = undefined;
         this.description = undefined;
         this.placeholder = undefined;
@@ -128,9 +128,9 @@ export class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b2d6c6960de6f0345aa68d6a7745736bbc17af63' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '208a64d1a050d9660feddc5a9da12fdf5cbba3b5', htmlFor: this.textareaId }, h("slot", { key: 'c6a6c34c0a9947552b24acd1a036b960d475989c', name: "label" }, this.label))), h("div", { key: '4f843961c1411ee913394e62b340854073a7af76', class: "textarea-wrapper" }, h("div", { key: '622dc04df7e02c63f3880b55787000f81e8450a8', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '3da5d56fed71c6a4d2ace78610a94e6fa873bc85', id: this.textareaId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.getResize()) }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '3f7dee56c20b55baa0f57cb366e54048cb247599', class: "description" }, h("slot", { key: '3aaa22737a238e6a26818a9b0f5556aff70c1273', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b0849984658ba6794ee510cdc24f000b791c095e', hidden: !this.error, class: "error-description" }, h("slot", { key: '952f86cfe6f319cfcaeba136ef21f3bf1695dbec', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '535238832a686d98bed7a743ba994515be7fa43b' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ee8ee83154d8ebd436f697fb69235ad431aed0fd', htmlFor: this.inputId }, h("slot", { key: 'cf261fdd000fb29094888419a51f82dfa3fd8648', name: "label" }, this.label))), h("div", { key: '4b0573cf4c17e9a7c1ef2ff7ab4d1d08fe3e4848', class: "textarea-wrapper" }, h("div", { key: '36817cc56f30858fd5c4d2fe0acb29ebcbcaa2b8', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '6586b1d3dd17b29edccb96e556b6d01b721025b5', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.getResize()) }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '068a1b72b760fed02ef647a866016ff6a39ed8e8', class: "description" }, h("slot", { key: '2d8e34b3c44a5ca3943dadbe91a98efdfc9e1df2', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '35fea730fcc254764c545f275298d3b03917b608', hidden: !this.error, class: "error-description" }, h("slot", { key: '58e300e380166c82e9857aa9d2929bdd11d798bf', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }
@@ -186,7 +186,7 @@ export class NvFieldtextarea {
                 "attribute": "validation",
                 "reflect": false
             },
-            "textareaId": {
+            "inputId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -198,9 +198,9 @@ export class NvFieldtextarea {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the ID for the textarea element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
+                    "text": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
                 },
-                "attribute": "textarea-id",
+                "attribute": "input-id",
                 "reflect": true,
                 "defaultValue": "uuidv4()"
             },

package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldtextarea.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtextarea',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n  @Element() el: HTMLNvFieldtextareaElement;\n  private textareaElement!: HTMLTextAreaElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated use errorDescription and set the error prop instead.\n   */\n  @Prop()\n  readonly validation: string;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the textarea element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly textareaId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * textarea field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text textarea field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the textarea field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the textarea field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the textarea’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the textarea field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the textarea’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the textarea field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the textarea field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the textarea field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the textarea field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the textarea field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the textarea field’s appearance to indicate successful textarea or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the textarea field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their textarea within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * textarea field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * The number of visible text lines for the control. The default is 3. This\n   * can be useful when you want to limit the size of the textarea field or when\n   * you want to make the textarea field smaller to fit a specific layout. The\n   * textarea field will expand vertically to fit the text as the user types.\n   */\n  @Prop({ reflect: true })\n  readonly rows: number = 3;\n\n  /**\n   * Controls the resize property of a textarea. It can be set to none, both,\n   * horizontal, or vertical. The default is vertical.\n   */\n  @Prop({ reflect: true })\n  readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Enable this to make the textarea automatically resize as the user types,\n   * adjusting the height to fit the content. For the best experience, avoid\n   * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n   * can still be allowed if desired.\n   */\n  @Prop({ reflect: true })\n  readonly autosize: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the textarea value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * If autosize is true, we need to make sure to update the min-height when\n   * the rows change.\n   */\n  @Watch('rows')\n  rowsChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  /**\n   * If autosize is true, we need to make sure to update the height and\n   * min-height, if false, we need to remove the height property.\n   */\n  @Watch('autosize')\n  autosizeChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    } else {\n      this.textareaElement?.style.removeProperty('height');\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleTextarea = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement;\n    this.value = textarea.value;\n    this.valueChanged.emit(textarea.value);\n\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  };\n\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      this.textareaElement.style.height = 'auto';\n\n      // Get computed styles\n      const computedStyle = window.getComputedStyle(this.textareaElement);\n      const lineHeight = parseFloat(computedStyle.lineHeight);\n      const paddingTop = parseFloat(computedStyle.paddingTop);\n      const paddingBottom = parseFloat(computedStyle.paddingBottom);\n      const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n      const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n      // Calculate min-height based on rows\n      const minHeight =\n        lineHeight * this.rows +\n        paddingTop +\n        paddingBottom +\n        borderTopWidth +\n        borderBottomWidth;\n\n      this.textareaElement.style.minHeight = `${minHeight}px`;\n      this.textareaElement.style.height =\n        this.textareaElement.scrollHeight + 'px';\n    }\n  }\n\n  /**\n   * Class        Properties\n   * resize-none\tresize: none;\n   * resize-y\t    resize: vertical;\n   * resize-x\t    resize: horizontal;\n   * resize\t      resize: both;\n   * @returns {string} The resize class.\n   */\n  private getResize() {\n    if (this.resize === 'none') return 'resize-none';\n    if (this.resize === 'vertical') return 'resize-y';\n    if (this.resize === 'horizontal') return 'resize-x';\n    if (this.resize === 'both') return 'resize';\n    return 'resize-none';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.textareaId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"textarea-wrapper\">\n          <div\n            class=\"textarea-container\"\n            onClick={this.handleTextareaContainerClick}\n          >\n            <textarea\n              id={this.textareaId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              autocomplete=\"off\"\n              value={this.value}\n              onInput={this.handleTextarea}\n              rows={this.rows}\n              class={clsx(this.getResize())}\n            />\n          </div>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-fieldtextarea.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtextarea',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n  @Element() el: HTMLNvFieldtextareaElement;\n  private textareaElement!: HTMLTextAreaElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated use errorDescription and set the error prop instead.\n   */\n  @Prop()\n  readonly validation: string;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * textarea field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text textarea field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the textarea field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the textarea field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the textarea’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the textarea field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the textarea’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the textarea field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the textarea field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the textarea field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the textarea field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the textarea field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the textarea field’s appearance to indicate successful textarea or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the textarea field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their textarea within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * textarea field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * The number of visible text lines for the control. The default is 3. This\n   * can be useful when you want to limit the size of the textarea field or when\n   * you want to make the textarea field smaller to fit a specific layout. The\n   * textarea field will expand vertically to fit the text as the user types.\n   */\n  @Prop({ reflect: true })\n  readonly rows: number = 3;\n\n  /**\n   * Controls the resize property of a textarea. It can be set to none, both,\n   * horizontal, or vertical. The default is vertical.\n   */\n  @Prop({ reflect: true })\n  readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Enable this to make the textarea automatically resize as the user types,\n   * adjusting the height to fit the content. For the best experience, avoid\n   * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n   * can still be allowed if desired.\n   */\n  @Prop({ reflect: true })\n  readonly autosize: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the textarea value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * If autosize is true, we need to make sure to update the min-height when\n   * the rows change.\n   */\n  @Watch('rows')\n  rowsChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  /**\n   * If autosize is true, we need to make sure to update the height and\n   * min-height, if false, we need to remove the height property.\n   */\n  @Watch('autosize')\n  autosizeChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    } else {\n      this.textareaElement?.style.removeProperty('height');\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleTextarea = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement;\n    this.value = textarea.value;\n    this.valueChanged.emit(textarea.value);\n\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  };\n\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      this.textareaElement.style.height = 'auto';\n\n      // Get computed styles\n      const computedStyle = window.getComputedStyle(this.textareaElement);\n      const lineHeight = parseFloat(computedStyle.lineHeight);\n      const paddingTop = parseFloat(computedStyle.paddingTop);\n      const paddingBottom = parseFloat(computedStyle.paddingBottom);\n      const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n      const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n      // Calculate min-height based on rows\n      const minHeight =\n        lineHeight * this.rows +\n        paddingTop +\n        paddingBottom +\n        borderTopWidth +\n        borderBottomWidth;\n\n      this.textareaElement.style.minHeight = `${minHeight}px`;\n      this.textareaElement.style.height =\n        this.textareaElement.scrollHeight + 'px';\n    }\n  }\n\n  /**\n   * Class        Properties\n   * resize-none\tresize: none;\n   * resize-y\t    resize: vertical;\n   * resize-x\t    resize: horizontal;\n   * resize\t      resize: both;\n   * @returns {string} The resize class.\n   */\n  private getResize() {\n    if (this.resize === 'none') return 'resize-none';\n    if (this.resize === 'vertical') return 'resize-y';\n    if (this.resize === 'horizontal') return 'resize-x';\n    if (this.resize === 'both') return 'resize';\n    return 'resize-none';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"textarea-wrapper\">\n          <div\n            class=\"textarea-container\"\n            onClick={this.handleTextareaContainerClick}\n          >\n            <textarea\n              id={this.inputId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              autocomplete=\"off\"\n              value={this.value}\n              onInput={this.handleTextarea}\n              rows={this.rows}\n              class={clsx(this.getResize())}\n            />\n          </div>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

package/dist/components/nv-fieldtextarea.js

@@ -26,7 +26,7 @@ const NvFieldtextarea$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtextarea
         };
         this.message = undefined;
         this.validation = undefined;
-        this.textareaId = v4();
+        this.inputId = v4();
         this.label = undefined;
         this.description = undefined;
         this.placeholder = undefined;
@@ -130,9 +130,9 @@ const NvFieldtextarea$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtextarea
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b2d6c6960de6f0345aa68d6a7745736bbc17af63' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '208a64d1a050d9660feddc5a9da12fdf5cbba3b5', htmlFor: this.textareaId }, h("slot", { key: 'c6a6c34c0a9947552b24acd1a036b960d475989c', name: "label" }, this.label))), h("div", { key: '4f843961c1411ee913394e62b340854073a7af76', class: "textarea-wrapper" }, h("div", { key: '622dc04df7e02c63f3880b55787000f81e8450a8', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '3da5d56fed71c6a4d2ace78610a94e6fa873bc85', id: this.textareaId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.getResize()) }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '3f7dee56c20b55baa0f57cb366e54048cb247599', class: "description" }, h("slot", { key: '3aaa22737a238e6a26818a9b0f5556aff70c1273', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b0849984658ba6794ee510cdc24f000b791c095e', hidden: !this.error, class: "error-description" }, h("slot", { key: '952f86cfe6f319cfcaeba136ef21f3bf1695dbec', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '535238832a686d98bed7a743ba994515be7fa43b' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ee8ee83154d8ebd436f697fb69235ad431aed0fd', htmlFor: this.inputId }, h("slot", { key: 'cf261fdd000fb29094888419a51f82dfa3fd8648', name: "label" }, this.label))), h("div", { key: '4b0573cf4c17e9a7c1ef2ff7ab4d1d08fe3e4848', class: "textarea-wrapper" }, h("div", { key: '36817cc56f30858fd5c4d2fe0acb29ebcbcaa2b8', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '6586b1d3dd17b29edccb96e556b6d01b721025b5', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.getResize()) }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '068a1b72b760fed02ef647a866016ff6a39ed8e8', class: "description" }, h("slot", { key: '2d8e34b3c44a5ca3943dadbe91a98efdfc9e1df2', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '35fea730fcc254764c545f275298d3b03917b608', hidden: !this.error, class: "error-description" }, h("slot", { key: '58e300e380166c82e9857aa9d2929bdd11d798bf', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -144,7 +144,7 @@ const NvFieldtextarea$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldtextarea
 }, [68, "nv-fieldtextarea", {
         "message": [1],
         "validation": [1],
-        "textareaId": [513, "textarea-id"],
+        "inputId": [513, "input-id"],
         "label": [513],
         "description": [1537],
         "placeholder": [513],

package/dist/components/nv-fieldtextarea.js.map

@@ -1 +1 @@
-{"file":"nv-fieldtextarea.js","mappings":"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","names":["NvFieldtextarea","uuidv4"],"sources":["src/components/nv-fieldtextarea/nv-fieldtextarea.scss?tag=nv-fieldtextarea","src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-textarea-wrapper() {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\n\n@mixin form-field-textarea-container() {\n  display: flex;\n  flex-grow: 1;\n  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n  justify-content: center;\n  align-items: center;\n  gap: var(--form-field-gap);\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n\n  &:hover {\n    border-color: var(--nv-field-border-hover);\n  }\n\n  &:focus-within {\n    border-color: var(--nv-field-border-focus);\n    box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n  }\n  // Keep  ReadOnly before Disabled\n  &:has(textarea:read-only) {\n    // opacity: var(--components-form-opacity-readonly, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-readonly);\n    border-color: var(--nv-field-border-readonly);\n  }\n\n  &:has(textarea:disabled) {\n    // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-disabled);\n    border-color: var(--nv-field-border-disabled);\n  }\n}\n\n@mixin form-field-textarea() {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n\n  &:focus {\n    outline: none;\n  }\n\n  &::placeholder {\n    overflow: hidden;\n    color: var(--components-form-field-content-placeholder);\n    text-overflow: ellipsis;\n    font-family: \"TT Norms Pro\", sans-serif;\n    font-size: var(--form-field-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--form-field-line-height);\n  }\n}\n\nnv-fieldtextarea {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly=\"false\"]) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error=\"false\"]) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success=\"false\"]) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required=\"false\"]) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .textarea-wrapper {\n    @include form-field-textarea-wrapper();\n\n    .textarea-container {\n      @include form-field-textarea-container();\n\n      textarea {\n        @include form-field-textarea();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtextarea',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n  @Element() el: HTMLNvFieldtextareaElement;\n  private textareaElement!: HTMLTextAreaElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated use errorDescription and set the error prop instead.\n   */\n  @Prop()\n  readonly validation: string;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the textarea element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly textareaId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * textarea field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text textarea field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the textarea field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the textarea field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the textarea’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the textarea field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the textarea’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the textarea field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the textarea field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the textarea field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the textarea field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the textarea field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the textarea field’s appearance to indicate successful textarea or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the textarea field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their textarea within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * textarea field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * The number of visible text lines for the control. The default is 3. This\n   * can be useful when you want to limit the size of the textarea field or when\n   * you want to make the textarea field smaller to fit a specific layout. The\n   * textarea field will expand vertically to fit the text as the user types.\n   */\n  @Prop({ reflect: true })\n  readonly rows: number = 3;\n\n  /**\n   * Controls the resize property of a textarea. It can be set to none, both,\n   * horizontal, or vertical. The default is vertical.\n   */\n  @Prop({ reflect: true })\n  readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Enable this to make the textarea automatically resize as the user types,\n   * adjusting the height to fit the content. For the best experience, avoid\n   * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n   * can still be allowed if desired.\n   */\n  @Prop({ reflect: true })\n  readonly autosize: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the textarea value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * If autosize is true, we need to make sure to update the min-height when\n   * the rows change.\n   */\n  @Watch('rows')\n  rowsChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  /**\n   * If autosize is true, we need to make sure to update the height and\n   * min-height, if false, we need to remove the height property.\n   */\n  @Watch('autosize')\n  autosizeChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    } else {\n      this.textareaElement?.style.removeProperty('height');\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleTextarea = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement;\n    this.value = textarea.value;\n    this.valueChanged.emit(textarea.value);\n\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  };\n\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      this.textareaElement.style.height = 'auto';\n\n      // Get computed styles\n      const computedStyle = window.getComputedStyle(this.textareaElement);\n      const lineHeight = parseFloat(computedStyle.lineHeight);\n      const paddingTop = parseFloat(computedStyle.paddingTop);\n      const paddingBottom = parseFloat(computedStyle.paddingBottom);\n      const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n      const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n      // Calculate min-height based on rows\n      const minHeight =\n        lineHeight * this.rows +\n        paddingTop +\n        paddingBottom +\n        borderTopWidth +\n        borderBottomWidth;\n\n      this.textareaElement.style.minHeight = `${minHeight}px`;\n      this.textareaElement.style.height =\n        this.textareaElement.scrollHeight + 'px';\n    }\n  }\n\n  /**\n   * Class        Properties\n   * resize-none\tresize: none;\n   * resize-y\t    resize: vertical;\n   * resize-x\t    resize: horizontal;\n   * resize\t      resize: both;\n   * @returns {string} The resize class.\n   */\n  private getResize() {\n    if (this.resize === 'none') return 'resize-none';\n    if (this.resize === 'vertical') return 'resize-y';\n    if (this.resize === 'horizontal') return 'resize-x';\n    if (this.resize === 'both') return 'resize';\n    return 'resize-none';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.textareaId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"textarea-wrapper\">\n          <div\n            class=\"textarea-container\"\n            onClick={this.handleTextareaContainerClick}\n          >\n            <textarea\n              id={this.textareaId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              autocomplete=\"off\"\n              value={this.value}\n              onInput={this.handleTextarea}\n              rows={this.rows}\n              class={clsx(this.getResize())}\n            />\n          </div>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-fieldtextarea.js","mappings":"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","names":["NvFieldtextarea","uuidv4"],"sources":["src/components/nv-fieldtextarea/nv-fieldtextarea.scss?tag=nv-fieldtextarea","src/components/nv-fieldtextarea/nv-fieldtextarea.tsx"],"sourcesContent":["@import \"../../styles/form-field\";\n\n@mixin form-field-textarea-wrapper() {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\n\n@mixin form-field-textarea-container() {\n  display: flex;\n  flex-grow: 1;\n  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n  justify-content: center;\n  align-items: center;\n  gap: var(--form-field-gap);\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n\n  &:hover {\n    border-color: var(--nv-field-border-hover);\n  }\n\n  &:focus-within {\n    border-color: var(--nv-field-border-focus);\n    box-shadow: 0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n  }\n  // Keep  ReadOnly before Disabled\n  &:has(textarea:read-only) {\n    // opacity: var(--components-form-opacity-readonly, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-readonly);\n    border-color: var(--nv-field-border-readonly);\n  }\n\n  &:has(textarea:disabled) {\n    // opacity: var(--components-form-opacity-disabled, 0.5); broken token generation, is 50px instead of 0.5\n    opacity: 0.5;\n    background-color: var(--components-form-field-background-disabled);\n    border-color: var(--nv-field-border-disabled);\n  }\n}\n\n@mixin form-field-textarea() {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  text-overflow: ellipsis;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: 500;\n  line-height: var(--form-field-line-height);\n\n  &:focus {\n    outline: none;\n  }\n\n  &::placeholder {\n    overflow: hidden;\n    color: var(--components-form-field-content-placeholder);\n    text-overflow: ellipsis;\n    font-family: \"TT Norms Pro\", sans-serif;\n    font-size: var(--form-field-font-size);\n    font-style: normal;\n    font-weight: 400;\n    line-height: var(--form-field-line-height);\n  }\n}\n\nnv-fieldtextarea {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly=\"false\"]) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error=\"false\"]) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success=\"false\"]) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required=\"false\"]) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .textarea-wrapper {\n    @include form-field-textarea-wrapper();\n\n    .textarea-container {\n      @include form-field-textarea-container();\n\n      textarea {\n        @include form-field-textarea();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport clsx from 'clsx';\n\n/**\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtextarea',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtextarea.scss',\n})\nexport class NvFieldtextarea {\n  @Element() el: HTMLNvFieldtextareaElement;\n  private textareaElement!: HTMLTextAreaElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated use errorDescription and set the error prop instead.\n   */\n  @Prop()\n  readonly validation: string;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * textarea field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text textarea field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the textarea field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the textarea field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the textarea’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the textarea field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the textarea’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The disabled prop lets you turn off the textarea field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the textarea field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the textarea field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the textarea field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the textarea field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the textarea field’s appearance to indicate successful textarea or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the textarea field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their textarea within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * textarea field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * The number of visible text lines for the control. The default is 3. This\n   * can be useful when you want to limit the size of the textarea field or when\n   * you want to make the textarea field smaller to fit a specific layout. The\n   * textarea field will expand vertically to fit the text as the user types.\n   */\n  @Prop({ reflect: true })\n  readonly rows: number = 3;\n\n  /**\n   * Controls the resize property of a textarea. It can be set to none, both,\n   * horizontal, or vertical. The default is vertical.\n   */\n  @Prop({ reflect: true })\n  readonly resize: 'none' | 'both' | 'horizontal' | 'vertical' = 'vertical';\n\n  /**\n   * Enable this to make the textarea automatically resize as the user types,\n   * adjusting the height to fit the content. For the best experience, avoid\n   * vertical resizing, as it’s controlled by this feature. Horizontal resizing\n   * can still be allowed if desired.\n   */\n  @Prop({ reflect: true })\n  readonly autosize: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the textarea value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * If autosize is true, we need to make sure to update the min-height when\n   * the rows change.\n   */\n  @Watch('rows')\n  rowsChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  /**\n   * If autosize is true, we need to make sure to update the height and\n   * min-height, if false, we need to remove the height property.\n   */\n  @Watch('autosize')\n  autosizeChanged() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    } else {\n      this.textareaElement?.style.removeProperty('height');\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleTextarea = (event: Event) => {\n    const textarea = event.target as HTMLTextAreaElement;\n    this.value = textarea.value;\n    this.valueChanged.emit(textarea.value);\n\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  };\n\n  private handleTextareaContainerClick = () => {\n    this.textareaElement.focus();\n  };\n\n  private adjustTextareaHeight() {\n    if (this.textareaElement && this.autosize) {\n      this.textareaElement.style.height = 'auto';\n\n      // Get computed styles\n      const computedStyle = window.getComputedStyle(this.textareaElement);\n      const lineHeight = parseFloat(computedStyle.lineHeight);\n      const paddingTop = parseFloat(computedStyle.paddingTop);\n      const paddingBottom = parseFloat(computedStyle.paddingBottom);\n      const borderTopWidth = parseFloat(computedStyle.borderTopWidth);\n      const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);\n\n      // Calculate min-height based on rows\n      const minHeight =\n        lineHeight * this.rows +\n        paddingTop +\n        paddingBottom +\n        borderTopWidth +\n        borderBottomWidth;\n\n      this.textareaElement.style.minHeight = `${minHeight}px`;\n      this.textareaElement.style.height =\n        this.textareaElement.scrollHeight + 'px';\n    }\n  }\n\n  /**\n   * Class        Properties\n   * resize-none\tresize: none;\n   * resize-y\t    resize: vertical;\n   * resize-x\t    resize: horizontal;\n   * resize\t      resize: both;\n   * @returns {string} The resize class.\n   */\n  private getResize() {\n    if (this.resize === 'none') return 'resize-none';\n    if (this.resize === 'vertical') return 'resize-y';\n    if (this.resize === 'horizontal') return 'resize-x';\n    if (this.resize === 'both') return 'resize';\n    return 'resize-none';\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentDidLoad() {\n    if (this.autosize) {\n      this.adjustTextareaHeight();\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"textarea-wrapper\">\n          <div\n            class=\"textarea-container\"\n            onClick={this.handleTextareaContainerClick}\n          >\n            <textarea\n              id={this.inputId}\n              ref={e => (this.textareaElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              autocomplete=\"off\"\n              value={this.value}\n              onInput={this.handleTextarea}\n              rows={this.rows}\n              class={clsx(this.getResize())}\n            />\n          </div>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}