npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.23.0 → 3.24.0 - Mend

@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

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

Files changed (792) hide show

package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.docs.js CHANGED Viewed

@@ -5,10 +5,12 @@ const NvFieldtextareaDocs = {
     component: 'nv-fieldtextarea',
     subcomponents: ['nv-badge', 'nv-button'],
     stories: [
+        // Default
         {
             name: 'Default',
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // label
         {
             name: nameof(x => x.label),
             args: {
@@ -16,6 +18,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // description
         {
             name: nameof(x => x.description),
             args: {
@@ -24,6 +27,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // placeholder
         {
             name: nameof(x => x.placeholder),
             args: {
@@ -32,6 +36,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // name
         {
             name: nameof(x => x.name),
             args: {
@@ -40,6 +45,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // value
         {
             name: nameof(x => x.value),
             args: {
@@ -48,6 +54,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // disabled
         {
             name: nameof(x => x.disabled),
             args: {
@@ -56,6 +63,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // readonly
         {
             name: nameof(x => x.readonly),
             args: {
@@ -65,6 +73,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // required
         {
             name: nameof(x => x.required),
             args: {
@@ -73,6 +82,16 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // ariaRequiredAttr
+        {
+            name: nameof(x => x.ariaRequiredAttr),
+            args: {
+                label: 'Aria Required Textfield',
+                ariaRequiredAttr: true,
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        // error
         {
             name: nameof(x => x.error),
             args: {
@@ -81,6 +100,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // errorDescription
         {
             name: nameof(x => x.errorDescription),
             args: {
@@ -91,6 +111,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // success
         {
             name: nameof(x => x.success),
             args: {
@@ -99,6 +120,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // maxlength
         {
             name: nameof(x => x.maxlength),
             args: {
@@ -107,6 +129,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // minlength
         {
             name: nameof(x => x.minlength),
             args: {
@@ -115,6 +138,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // rows
         {
             name: nameof(x => x.rows),
             args: {
@@ -123,6 +147,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // resize
         {
             name: nameof(x => x.resize),
             args: {
@@ -131,6 +156,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // autosize
         {
             name: nameof(x => x.autosize),
             args: {
@@ -142,6 +168,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // autofocus
         {
             name: nameof(x => x.autofocus),
             args: {
@@ -150,6 +177,7 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // fluid
         {
             name: nameof(x => x.fluid),
             args: {
@@ -158,16 +186,48 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        // message
+        {
+            name: nameof(x => x.message),
+            description: "Deprecated: Use 'description' instead. Message defines a 'hint' message for the Text Field.",
+            args: {
+                label: 'Message (Deprecated)',
+                message: 'This is a hint message',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        // validation
+        {
+            name: nameof(x => x.validation),
+            description: 'Deprecated: Use errorDescription and set the error prop instead. Add the message to the validation state.',
+            args: {
+                label: 'Validation (Deprecated)',
+                validation: 'This is a validation message',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        // inputId
+        {
+            name: nameof(x => x.inputId),
+            description: 'Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.',
+            args: {
+                label: 'Textarea with Custom ID',
+                inputId: 'custom-textarea-id',
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
+        // SlotLabel
         {
-            name: 'labelSlot',
+            name: 'SlotLabel',
             description: 'Content to be placed as the label, will override the label prop.',
             args: {
                 label: 'Original Label',
             },
             template: (h("nv-fieldtextarea", { "data-storybook-args": true }, h("span", { slot: "label" }, "Label Slot"))),
         },
+        // SlotDescription
         {
-            name: 'descriptionSlot',
+            name: 'SlotDescription',
             description: 'Content to be placed as the description, will override the description prop.',
             args: {
                 label: 'Description Slot',
@@ -175,8 +235,9 @@ const NvFieldtextareaDocs = {
             },
             template: (h("nv-fieldtextarea", { "data-storybook-args": true }, h("span", { slot: "description" }, "Custom Description"))),
         },
+        // SlotErrorDescription
         {
-            name: 'errorDescriptionSlot',
+            name: 'SlotErrorDescription',
             description: 'Content to be placed as the error description, will override the errorDescription prop.',
             args: {
                 label: 'Error Description Slot',

package/dist/collection/components/nv-fieldtextarea/nv-fieldtextarea.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldtextarea.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldtextarea/nv-fieldtextarea.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\nimport { faker } from '@faker-js/faker';\n\nconst NvFieldtextareaDocs: NovaDocs<Components.NvFieldtextarea> = {\n component: 'nv-fieldtextarea',\n subcomponents: ['nv-badge', 'nv-button'],\n stories: [\n {\n name: 'Default',\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.label),\n args: {\n label: 'Textfield Label',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.description),\n args: {\n label: 'Textfield Description',\n description: 'Description will show here',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.placeholder),\n args: {\n label: 'Textfield Placeholder',\n placeholder: 'Type something...',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.name),\n args: {\n label: 'Textfield Name',\n name: 'name',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.value),\n args: {\n label: 'Textfield Value',\n value: 'value',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.disabled),\n args: {\n label: 'Textfield Disabled',\n disabled: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.readonly),\n args: {\n label: 'Textfield Readonly',\n readonly: true,\n value: 'This textarea is readonly',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.required),\n args: {\n label: 'Textfield Required',\n required: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.error),\n args: {\n label: 'Textfield Error',\n error: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.errorDescription),\n args: {\n label: 'Textfield Error Description',\n description: 'Make sure to be valid.',\n error: true,\n errorDescription: 'This textarea has an error.',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.success),\n args: {\n label: 'Textfield Success',\n success: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.maxlength),\n args: {\n label: 'Textfield Max Length',\n maxlength: 10,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.minlength),\n args: {\n label: 'Textfield Min Length',\n minlength: 10,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.rows),\n args: {\n label: 'Textarea Rows',\n rows: 4,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.resize),\n args: {\n label: 'Textarea Resize',\n resize: 'horizontal',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.autosize),\n args: {\n label: 'Textarea Autosize',\n autosize: true,\n rows: 4,\n value: faker.lorem.paragraph(30),\n resize: 'none',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.autofocus),\n args: {\n label: 'Autofocus',\n autofocus: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.fluid),\n args: {\n label: 'Fluid',\n fluid: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n {\n name: 'labelSlot',\n description:\n 'Content to be placed as the label, will override the label prop.',\n args: {\n label: 'Original Label',\n },\n template: (\n <nv-fieldtextarea data-storybook-args>\n <span slot=\"label\">Label Slot</span>\n </nv-fieldtextarea>\n ),\n },\n {\n name: 'descriptionSlot',\n description:\n 'Content to be placed as the description, will override the description prop.',\n args: {\n label: 'Description Slot',\n description: 'Original description',\n },\n template: (\n <nv-fieldtextarea data-storybook-args>\n <span slot=\"description\">Custom Description</span>\n </nv-fieldtextarea>\n ),\n },\n {\n name: 'errorDescriptionSlot',\n description:\n 'Content to be placed as the error description, will override the errorDescription prop.',\n args: {\n label: 'Error Description Slot',\n errorDescription: 'Original error description',\n error: true,\n },\n template: (\n <nv-fieldtextarea data-storybook-args>\n <span slot=\"error-description\">Custom Error Description</span>\n </nv-fieldtextarea>\n ),\n },\n ],\n};\n\nexport default NvFieldtextareaDocs;\n"]}
1	+ {"version":3,"file":"nv-fieldtextarea.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldtextarea/nv-fieldtextarea.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\nimport { faker } from '@faker-js/faker';\n\nconst NvFieldtextareaDocs: NovaDocs<Components.NvFieldtextarea> = {\n component: 'nv-fieldtextarea',\n subcomponents: ['nv-badge', 'nv-button'],\n stories: [\n // Default\n {\n name: 'Default',\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // label\n {\n name: nameof<Components.NvFieldtextarea>(x => x.label),\n args: {\n label: 'Textfield Label',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // description\n {\n name: nameof<Components.NvFieldtextarea>(x => x.description),\n args: {\n label: 'Textfield Description',\n description: 'Description will show here',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // placeholder\n {\n name: nameof<Components.NvFieldtextarea>(x => x.placeholder),\n args: {\n label: 'Textfield Placeholder',\n placeholder: 'Type something...',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // name\n {\n name: nameof<Components.NvFieldtextarea>(x => x.name),\n args: {\n label: 'Textfield Name',\n name: 'name',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // value\n {\n name: nameof<Components.NvFieldtextarea>(x => x.value),\n args: {\n label: 'Textfield Value',\n value: 'value',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // disabled\n {\n name: nameof<Components.NvFieldtextarea>(x => x.disabled),\n args: {\n label: 'Textfield Disabled',\n disabled: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // readonly\n {\n name: nameof<Components.NvFieldtextarea>(x => x.readonly),\n args: {\n label: 'Textfield Readonly',\n readonly: true,\n value: 'This textarea is readonly',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // required\n {\n name: nameof<Components.NvFieldtextarea>(x => x.required),\n args: {\n label: 'Textfield Required',\n required: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // ariaRequiredAttr\n {\n name: nameof<Components.NvFieldtextarea>(x => x.ariaRequiredAttr),\n args: {\n label: 'Aria Required Textfield',\n ariaRequiredAttr: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // error\n {\n name: nameof<Components.NvFieldtextarea>(x => x.error),\n args: {\n label: 'Textfield Error',\n error: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // errorDescription\n {\n name: nameof<Components.NvFieldtextarea>(x => x.errorDescription),\n args: {\n label: 'Textfield Error Description',\n description: 'Make sure to be valid.',\n error: true,\n errorDescription: 'This textarea has an error.',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // success\n {\n name: nameof<Components.NvFieldtextarea>(x => x.success),\n args: {\n label: 'Textfield Success',\n success: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // maxlength\n {\n name: nameof<Components.NvFieldtextarea>(x => x.maxlength),\n args: {\n label: 'Textfield Max Length',\n maxlength: 10,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // minlength\n {\n name: nameof<Components.NvFieldtextarea>(x => x.minlength),\n args: {\n label: 'Textfield Min Length',\n minlength: 10,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // rows\n {\n name: nameof<Components.NvFieldtextarea>(x => x.rows),\n args: {\n label: 'Textarea Rows',\n rows: 4,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // resize\n {\n name: nameof<Components.NvFieldtextarea>(x => x.resize),\n args: {\n label: 'Textarea Resize',\n resize: 'horizontal',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // autosize\n {\n name: nameof<Components.NvFieldtextarea>(x => x.autosize),\n args: {\n label: 'Textarea Autosize',\n autosize: true,\n rows: 4,\n value: faker.lorem.paragraph(30),\n resize: 'none',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // autofocus\n {\n name: nameof<Components.NvFieldtextarea>(x => x.autofocus),\n args: {\n label: 'Autofocus',\n autofocus: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // fluid\n {\n name: nameof<Components.NvFieldtextarea>(x => x.fluid),\n args: {\n label: 'Fluid',\n fluid: true,\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // message\n {\n name: nameof<Components.NvFieldtextarea>(x => x.message),\n description:\n \"Deprecated: Use 'description' instead. Message defines a 'hint' message for the Text Field.\",\n args: {\n label: 'Message (Deprecated)',\n message: 'This is a hint message',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // validation\n {\n name: nameof<Components.NvFieldtextarea>(x => x.validation),\n description:\n 'Deprecated: Use errorDescription and set the error prop instead. Add the message to the validation state.',\n args: {\n label: 'Validation (Deprecated)',\n validation: 'This is a validation message',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // inputId\n {\n name: nameof<Components.NvFieldtextarea>(x => x.inputId),\n description:\n 'Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.',\n args: {\n label: 'Textarea with Custom ID',\n inputId: 'custom-textarea-id',\n },\n template: <nv-fieldtextarea data-storybook-args></nv-fieldtextarea>,\n },\n // SlotLabel\n {\n name: 'SlotLabel',\n description:\n 'Content to be placed as the label, will override the label prop.',\n args: {\n label: 'Original Label',\n },\n template: (\n <nv-fieldtextarea data-storybook-args>\n <span slot=\"label\">Label Slot</span>\n </nv-fieldtextarea>\n ),\n },\n // SlotDescription\n {\n name: 'SlotDescription',\n description:\n 'Content to be placed as the description, will override the description prop.',\n args: {\n label: 'Description Slot',\n description: 'Original description',\n },\n template: (\n <nv-fieldtextarea data-storybook-args>\n <span slot=\"description\">Custom Description</span>\n </nv-fieldtextarea>\n ),\n },\n // SlotErrorDescription\n {\n name: 'SlotErrorDescription',\n description:\n 'Content to be placed as the error description, will override the errorDescription prop.',\n args: {\n label: 'Error Description Slot',\n errorDescription: 'Original error description',\n error: true,\n },\n template: (\n <nv-fieldtextarea data-storybook-args>\n <span slot=\"error-description\">Custom Error Description</span>\n </nv-fieldtextarea>\n ),\n },\n ],\n};\n\nexport default NvFieldtextareaDocs;\n"]}

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

@@ -114,12 +114,11 @@ export class NvFieldtextarea {
      * min-height, if false, we need to remove the height property.
      */
     autosizeChanged() {
-        var _a;
         if (this.autosize) {
             this.adjustTextareaHeight();
         }
         else {
-            (_a = this.textareaElement) === null || _a === void 0 ? void 0 : _a.style.removeProperty('height');
+            this.textareaElement?.style.removeProperty('height');
         }
     }
     /**
@@ -214,11 +213,11 @@ export class NvFieldtextarea {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '1a80078701925171e8f908d656becc54d74f381d' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '0e6489c64873d866ec87733debed0473f3f35649', htmlFor: this.inputId }, h("slot", { key: 'f250da58a83a5be5b8ec055e89f7a703e391e664', name: "label" }, this.label))), h("div", { key: '29ea5f2f4c545b12feda1e8e3c2c025c4f70036a', class: "textarea-wrapper" }, h("div", { key: 'd911e08b43456c954245c9c40af2867e8df117cf', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", Object.assign({ key: '96bb78ad0353fb2d86205c2d0f2323d2b66b6311', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined }, (ariaRequiredValue !== undefined && {
-            'aria-required': String(ariaRequiredValue),
-        }), { maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') })))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c6e647895b1daf84a7f648ba24057a1387998667', class: "description" }, h("slot", { key: '766f8786b18dac2da463aa94b182ab62ff525cfb', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'f65d303bdce41da093ac8d6c4a1f4fd084ae6b64', hidden: !this.error, class: "error-description" }, h("slot", { key: '46862decf5c0a3c10efb02edff70a28a8a4b6d92', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '0800e702f2212313aba04685710981ea5c9f1e13' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'e5978fdc5f8588aba9e04571e0beb772d6c1843e', htmlFor: this.inputId }, h("slot", { key: 'f846862e07c1196e8f7d2c007846f40f90dea6c1', name: "label" }, this.label))), h("div", { key: 'a61a7551075e23adf63bb62c8a44b22fc78af72d', class: "textarea-wrapper" }, h("div", { key: '0e57bca81abbad3752875f3acfad7e94b1aa8f8e', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '9348dedab4d701980656c180d197db720061964a', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+                'aria-required': String(ariaRequiredValue),
+            }), maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '75e01c35855b9275c45546bbe8f1b9129365e208', class: "description" }, h("slot", { key: 'a0ecbbcef8a51b4d0dfaf14f3781a2e6d3d7cac3', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '8fc8170fa84865844cb544bfbd202b459707247a', hidden: !this.error, class: "error-description" }, h("slot", { key: '58d1774d57bf08c42e7c953b9606c5d9b0954ffc', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }

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

	@@ -1 +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({ reflect: true })\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({ reflect: true })\n readonly validation: string;\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 * @note This uses the native HTML `required` attribute, which triggers browser validation.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Marks the textarea field as required for accessibility purposes without triggering\n * native HTML validation. Use this when implementing custom validation logic.\n * @note When set, this uses `aria-required` instead of the native `required` attribute.\n * This allows developers to implement custom validation while maintaining accessibility.\n * @note If this prop is not explicitly set, the component will check for the HTML attribute\n * 'aria-required' directly to determine if it should be applied.\n /\n @Prop({ reflect: true, attribute: 'aria-required' })\n readonly ariaRequiredAttr: 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 /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on a <textarea>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n /\n Allows the field to stretch and fill the entire width of its container.\n /\n @Prop({ reflect: true })\n readonly fluid: 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({ bubbles: false })\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 /\n Make sure to adjust the height of the textarea when the value changes\n * programmatically or by typing when autosize is on.\n /\n @Watch('value')\n handleValueChange() {\n if (this.autosize) {\n this.adjustTextareaHeight();\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\n private handleTextareaContainerClick = () => {\n this.textareaElement.focus();\n };\n\n private adjustTextareaHeight() {\n if (this.textareaElement && this.autosize) {\n /\n * The first requestAnimationFrame ensures that the DOM has applied any\n * pending changes (e.g., value updates or attribute changes) before\n * proceeding to the next frame.\n /\n requestAnimationFrame(() => {\n /\n The second requestAnimationFrame ensures that the browser has fully\n * recalculated layout and styles based on the updated DOM, such as\n * recalculating scrollHeight for the textarea after the new value is\n * rendered.\n /\n requestAnimationFrame(() => {\n this.textareaElement.style.height = 'auto';\n\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\n //#endregion METHODS\n /**************************************************************************/\n //#region LIFECYCLE\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 componentDidLoad() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n // Check aria-required from multiple sources:\n // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set\n // 2. JavaScript prop (when prop is explicitly set via JavaScript)\n // We use hasAttribute to determine if the attribute was explicitly set by the user,\n // since the prop now defaults to false (to maintain Blazor compatibility)\n const hasAriaRequiredAttr =\n this.el.hasAttribute('aria-required') \|\|\n this.el.hasAttribute('aria-required-attr');\n\n const ariaRequiredFromAttr = hasAriaRequiredAttr\n ? this.el.getAttribute('aria-required') \|\|\n this.el.getAttribute('aria-required-attr')\n : null;\n\n // Use aria-required if the attribute was explicitly set\n // With reflect: true, setting the prop will also set the attribute\n const useAriaRequired = hasAriaRequiredAttr;\n\n // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)\n // If attribute doesn't exist, the prop was never set and we don't use aria-required\n const ariaRequiredAttrValue = hasAriaRequiredAttr\n ? ariaRequiredFromAttr\n : null;\n\n // Determine which attributes to use\n // If aria-required HTML attribute is present, use it (convert string to boolean)\n // If required is set and aria-required is not \"false\", use native required\n // If aria-required is \"false\", don't use native required even if required is set\n const ariaRequiredValue = useAriaRequired\n ? ariaRequiredAttrValue === 'true' \|\| ariaRequiredAttrValue === ''\n : undefined;\n\n const useNativeRequired =\n this.required && (!useAriaRequired \|\| ariaRequiredValue === true);\n\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 autofocus={this.autofocus}\n name={this.name}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={useNativeRequired ? this.required : undefined}\n {...(ariaRequiredValue !== undefined && {\n 'aria-required': String(ariaRequiredValue),\n })}\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(\n this.resize === 'none' && 'resize-none',\n this.resize === 'vertical' && 'resize-y',\n this.resize === 'horizontal' && 'resize-x',\n this.resize === 'both' && 'resize',\n )}\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"]}
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({ reflect: true })\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({ reflect: true })\n readonly validation: string;\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 * @note This uses the native HTML `required` attribute, which triggers browser validation.\n /\n @Prop({ reflect: true })\n readonly required: boolean = false;\n\n /\n Marks the textarea field as required for accessibility purposes without triggering\n * native HTML validation. Use this when implementing custom validation logic.\n * @note When set, this uses `aria-required` instead of the native `required` attribute.\n * This allows developers to implement custom validation while maintaining accessibility.\n * @note If this prop is not explicitly set, the component will check for the HTML attribute\n * 'aria-required' directly to determine if it should be applied.\n /\n @Prop({ reflect: true, attribute: 'aria-required' })\n readonly ariaRequiredAttr: 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 /\n Applies focus to the input field as soon as the component is mounted. This\n * is equivalent to setting the native autofocus attribute on a <textarea>\n * element.\n /\n @Prop({ reflect: true })\n // eslint-disable-next-line @stencil-community/reserved-member-names\n readonly autofocus: boolean = false;\n\n /\n Allows the field to stretch and fill the entire width of its container.\n /\n @Prop({ reflect: true })\n readonly fluid: 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({ bubbles: false })\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 /\n Make sure to adjust the height of the textarea when the value changes\n * programmatically or by typing when autosize is on.\n /\n @Watch('value')\n handleValueChange() {\n if (this.autosize) {\n this.adjustTextareaHeight();\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\n private handleTextareaContainerClick = () => {\n this.textareaElement.focus();\n };\n\n private adjustTextareaHeight() {\n if (this.textareaElement && this.autosize) {\n /\n * The first requestAnimationFrame ensures that the DOM has applied any\n * pending changes (e.g., value updates or attribute changes) before\n * proceeding to the next frame.\n /\n requestAnimationFrame(() => {\n /\n The second requestAnimationFrame ensures that the browser has fully\n * recalculated layout and styles based on the updated DOM, such as\n * recalculating scrollHeight for the textarea after the new value is\n * rendered.\n /\n requestAnimationFrame(() => {\n this.textareaElement.style.height = 'auto';\n\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\n //#endregion METHODS\n /**************************************************************************/\n //#region LIFECYCLE\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 componentDidLoad() {\n if (this.autosize) {\n this.adjustTextareaHeight();\n }\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n // Check aria-required from multiple sources:\n // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set\n // 2. JavaScript prop (when prop is explicitly set via JavaScript)\n // We use hasAttribute to determine if the attribute was explicitly set by the user,\n // since the prop now defaults to false (to maintain Blazor compatibility)\n const hasAriaRequiredAttr =\n this.el.hasAttribute('aria-required') \|\|\n this.el.hasAttribute('aria-required-attr');\n\n const ariaRequiredFromAttr = hasAriaRequiredAttr\n ? this.el.getAttribute('aria-required') \|\|\n this.el.getAttribute('aria-required-attr')\n : null;\n\n // Use aria-required if the attribute was explicitly set\n // With reflect: true, setting the prop will also set the attribute\n const useAriaRequired = hasAriaRequiredAttr;\n\n // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)\n // If attribute doesn't exist, the prop was never set and we don't use aria-required\n const ariaRequiredAttrValue = hasAriaRequiredAttr\n ? ariaRequiredFromAttr\n : null;\n\n // Determine which attributes to use\n // If aria-required HTML attribute is present, use it (convert string to boolean)\n // If required is set and aria-required is not \"false\", use native required\n // If aria-required is \"false\", don't use native required even if required is set\n const ariaRequiredValue = useAriaRequired\n ? ariaRequiredAttrValue === 'true' \|\| ariaRequiredAttrValue === ''\n : undefined;\n\n const useNativeRequired =\n this.required && (!useAriaRequired \|\| ariaRequiredValue === true);\n\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 autofocus={this.autofocus}\n name={this.name}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={useNativeRequired ? this.required : undefined}\n {...(ariaRequiredValue !== undefined && {\n 'aria-required': String(ariaRequiredValue),\n })}\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(\n this.resize === 'none' && 'resize-none',\n this.resize === 'vertical' && 'resize-y',\n this.resize === 'horizontal' && 'resize-x',\n this.resize === 'both' && 'resize',\n )}\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/collection/components/nv-fieldtime/nv-fieldtime.docs.js CHANGED Viewed

@@ -9,97 +9,103 @@ const NvFieldtimeDocs = {
             name: 'Default',
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Value
+        // value
         {
             name: nameof(x => x.value),
             args: { value: '12:34:56' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Label
+        // label
         {
             name: nameof(x => x.label),
             args: { label: 'Label' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Readonly
+        // readonly
         {
             name: nameof(x => x.readonly),
             args: { readonly: true },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Disabled
+        // disabled
         {
             name: nameof(x => x.disabled),
             args: { disabled: true },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Required
+        // required
         {
             name: nameof(x => x.required),
             args: { required: true, label: 'Required' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Name
+        // ariaRequiredAttr
+        {
+            name: nameof(x => x.ariaRequiredAttr),
+            args: { ariaRequiredAttr: true, label: 'Aria Required' },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        // name
         {
             name: nameof(x => x.name),
             args: { name: 'name' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Success
+        // success
         {
             name: nameof(x => x.success),
             args: { success: true },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Error
+        // error
         {
             name: nameof(x => x.error),
             args: { error: true },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // ErrorDescription
+        // errorDescription
         {
             name: nameof(x => x.errorDescription),
             args: { error: true, errorDescription: 'Error Description' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Max
+        // max
         {
             name: nameof(x => x.max),
             args: { max: '20:59:59' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Min
+        // min
         {
             name: nameof(x => x.min),
             args: { min: '01:00:00' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Format
+        // format
         {
             name: nameof(x => x.format),
             args: { format: 'HH:mm:ss' },
             template: (h("div", { "data-class": "flex flex-col gap-4 items-center w-full" }, h("nv-fieldtime", { "data-class": "w-full", label: "format", "data-storybook-args": true }), h("div", { "data-class": "flex flex-row gap-4 items-center w-full" }, h("nv-fieldtime", { "data-class": "w-full", label: "hh", format: "hh" }), h("nv-fieldtime", { "data-class": "w-full", label: "HH", format: "HH" })), h("div", { "data-class": "flex flex-row gap-4 items-center w-full" }, h("nv-fieldtime", { "data-class": "w-full", label: "hh:mm", format: "hh:mm" }), h("nv-fieldtime", { "data-class": "w-full", label: "HH:mm", format: "HH:mm" })), h("div", { "data-class": "flex flex-row gap-4 items-center w-full" }, h("nv-fieldtime", { "data-class": "w-full", label: "hh:mm:ss", format: "hh:mm:ss" }), h("nv-fieldtime", { "data-class": "w-full", label: "HH:mm:ss", format: "HH:mm:ss" })))),
         },
-        // Description
+        // description
         {
             name: nameof(x => x.description),
             args: { description: 'Description' },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Open
+        // open
         {
             name: nameof(x => x.open),
             args: { open: true },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Step
+        // step
         {
             name: nameof(x => x.step),
             args: { step: 7200000 },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
-        // Autofocus
+        // autofocus
         {
             name: nameof(x => x.autofocus),
             args: {
@@ -108,6 +114,19 @@ const NvFieldtimeDocs = {
             },
             template: h("nv-fieldtime", { "data-storybook-args": true }),
         },
+        // inputId
+        {
+            name: nameof(x => x.inputId),
+            description: 'Sets the ID for the input element and the for attribute of the associated label. If no ID is provided, a random one will be automatically generated to ensure unique identification, facilitating proper label association and accessibility.',
+            args: { inputId: 'custom-time-input-id', label: 'Time Input' },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
+        // FormatConsistency
+        {
+            name: 'FormatConsistency',
+            args: { format: 'HH:mm:ss', value: '14:30:45' },
+            template: h("nv-fieldtime", { "data-storybook-args": true }),
+        },
         // SlotLabel
         {
             name: 'SlotLabel',
@@ -118,6 +137,12 @@ const NvFieldtimeDocs = {
             name: 'SlotBeforeInput',
             template: (h("nv-fieldtime", { "data-storybook-args": true }, h("span", { slot: "before-input" }, "Before Input Slot"))),
         },
+        // SlotDescription
+        {
+            name: 'SlotDescription',
+            description: 'Content to be placed as the description, will override the description prop.',
+            template: (h("nv-fieldtime", { "data-storybook-args": true }, h("span", { slot: "description" }, "Custom description content"))),
+        },
         // SlotAfterInput
         {
             name: 'SlotAfterInput',
@@ -134,12 +159,6 @@ const NvFieldtimeDocs = {
             args: { error: true },
             template: (h("nv-fieldtime", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Error Description Slot"))),
         },
-        // FormatConsistency
-        {
-            name: 'FormatConsistency',
-            args: { format: 'HH:mm:ss', value: '14:30:45' },
-            template: h("nv-fieldtime", { "data-storybook-args": true }),
-        },
     ],
 };
 export default NvFieldtimeDocs;