npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.1.0 → 3.2.0 - Mend

@nova-design-system/nova-webcomponents 3.1.0 → 3.2.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 (409) hide show

package/dist/collection/components/nv-fieldslider/test/nv-fieldslider.utils.test.js ADDED Viewed

@@ -0,0 +1,159 @@
+import { describe, it, expect } from "vitest";
+import { clamp, valueToPercent, snapToStep, generateTicks, snapToTicks, } from "../nv-fieldslider.utils";
+describe('nv-fieldslider -> utils', () => {
+    describe('clamp', () => {
+        it('should clamp value to min when value is below min', () => {
+            expect(clamp(-10, 0, 100)).toBe(0);
+        });
+        it('should clamp value to max when value is above max', () => {
+            expect(clamp(150, 0, 100)).toBe(100);
+        });
+        it('should return value when it is within range', () => {
+            expect(clamp(50, 0, 100)).toBe(50);
+        });
+        it('should handle edge cases', () => {
+            expect(clamp(0, 0, 100)).toBe(0);
+            expect(clamp(100, 0, 100)).toBe(100);
+        });
+        it('should handle negative ranges', () => {
+            expect(clamp(-150, -200, -100)).toBe(-150);
+            expect(clamp(-50, -200, -100)).toBe(-100);
+            expect(clamp(-250, -200, -100)).toBe(-200);
+        });
+    });
+    describe('valueToPercent', () => {
+        it('should convert value to percentage within range', () => {
+            expect(valueToPercent(50, 0, 100)).toBe(50);
+            expect(valueToPercent(25, 0, 100)).toBe(25);
+            expect(valueToPercent(75, 0, 100)).toBe(75);
+        });
+        it('should handle values outside the range', () => {
+            expect(valueToPercent(-10, 0, 100)).toBe(-10);
+            expect(valueToPercent(150, 0, 100)).toBe(150);
+        });
+        it('should handle custom ranges', () => {
+            expect(valueToPercent(30, 20, 40)).toBe(50);
+            expect(valueToPercent(10, -10, 10)).toBe(100);
+            expect(valueToPercent(0, -10, 10)).toBe(50);
+            expect(valueToPercent(-10, -10, 10)).toBe(0);
+        });
+        it('should return 0 when min equals max', () => {
+            expect(valueToPercent(50, 50, 50)).toBe(0);
+            expect(valueToPercent(100, 100, 100)).toBe(0);
+        });
+        it('should handle negative ranges', () => {
+            expect(valueToPercent(-150, -200, -100)).toBe(50);
+        });
+        it('should handle decimal values', () => {
+            expect(valueToPercent(2.5, 0, 5)).toBe(50);
+            expect(valueToPercent(0.5, 0, 1)).toBe(50);
+        });
+    });
+    describe('snapToStep', () => {
+        it('should snap value to nearest step', () => {
+            expect(snapToStep(42, 0, 100, 5)).toBe(40);
+            expect(snapToStep(43, 0, 100, 5)).toBe(45);
+            expect(snapToStep(2.7, 0, 10, 0.5)).toBe(2.5);
+            expect(snapToStep(2.8, 0, 10, 0.5)).toBe(3);
+        });
+        it('should clamp value to min when below min', () => {
+            expect(snapToStep(-10, 0, 100, 5)).toBe(0);
+        });
+        it('should clamp value to max when above max', () => {
+            expect(snapToStep(110, 0, 100, 5)).toBe(100);
+        });
+        it('should handle edge cases', () => {
+            // Exactly on a step
+            expect(snapToStep(20, 0, 100, 5)).toBe(20);
+            // Min and max values
+            expect(snapToStep(0, 0, 100, 5)).toBe(0);
+            expect(snapToStep(100, 0, 100, 5)).toBe(100);
+            // Value between min and first step
+            expect(snapToStep(2, 0, 100, 5)).toBe(0);
+            expect(snapToStep(3, 0, 100, 5)).toBe(5);
+        });
+        it('should handle negative ranges', () => {
+            expect(snapToStep(-152, -200, -100, 10)).toBe(-150);
+        });
+        it("should handle step sizes that don't divide evenly into the range", () => {
+            expect(snapToStep(97, 0, 100, 30)).toBe(90);
+            expect(snapToStep(98, 0, 100, 30)).toBe(90); // Not 120 because it's clamped to max (100)
+        });
+    });
+    describe('generateTicks', () => {
+        it('should generate ticks for a simple range', () => {
+            const ticks = generateTicks(0, 10, 2);
+            expect(ticks).toEqual([0, 2, 4, 6, 8, 10]);
+        });
+        it('should include max value when it falls on a step', () => {
+            const ticks = generateTicks(0, 10, 5);
+            expect(ticks).toEqual([0, 5, 10]);
+        });
+        it("should include max value even when it doesn't fall on a step", () => {
+            const ticks = generateTicks(0, 11, 5);
+            expect(ticks).toEqual([0, 5, 10, 11]);
+        });
+        it('should handle negative ranges', () => {
+            const ticks = generateTicks(-10, 0, 2);
+            expect(ticks).toEqual([-10, -8, -6, -4, -2, 0]);
+        });
+        it('should handle floating point step sizes', () => {
+            const ticks = generateTicks(0, 1, 0.2);
+            // Using toEqual with approximate values due to floating point precision
+            expect(ticks).toEqual([0, 0.2, 0.4, 0.6, 0.8, 1]);
+        });
+        it('should handle small step sizes correctly', () => {
+            const ticks = generateTicks(0, 0.5, 0.1);
+            expect(ticks).toEqual([0, 0.1, 0.2, 0.3, 0.4, 0.5]);
+        });
+        it('should handle case when min equals max', () => {
+            const ticks = generateTicks(10, 10, 5);
+            expect(ticks).toEqual([10]);
+        });
+    });
+    describe('snapToTicks', () => {
+        it('should snap value to closest tick', () => {
+            const ticks = [
+                { value: 0 },
+                { value: 25 },
+                { value: 50 },
+                { value: 75 },
+                { value: 100 },
+            ];
+            expect(snapToTicks(12, ticks)).toBe(0); // Closer to 0
+            expect(snapToTicks(13, ticks)).toBe(25); // Closer to 25
+            expect(snapToTicks(37, ticks)).toBe(25); // Closer to 25
+            expect(snapToTicks(38, ticks)).toBe(50); // Closer to 50
+            expect(snapToTicks(87, ticks)).toBe(75); // Closer to 75
+            expect(snapToTicks(88, ticks)).toBe(100); // Closer to 100
+        });
+        it('should return original value when ticks is empty or undefined', () => {
+            expect(snapToTicks(42, [])).toBe(42);
+            expect(snapToTicks(42, undefined)).toBe(42);
+        });
+        it('should return tick value when input exactly matches a tick', () => {
+            const ticks = [{ value: 0 }, { value: 50 }, { value: 100 }];
+            expect(snapToTicks(0, ticks)).toBe(0);
+            expect(snapToTicks(50, ticks)).toBe(50);
+            expect(snapToTicks(100, ticks)).toBe(100);
+        });
+        it('should handle equidistant values by taking the first encountered tick', () => {
+            const ticks = [{ value: 0 }, { value: 10 }];
+            // Value 5 is exactly equidistant from 0 and 10
+            expect(snapToTicks(5, ticks)).toBe(0);
+        });
+        it('should handle negative and decimal values', () => {
+            const ticks = [
+                { value: -10 },
+                { value: -5.5 },
+                { value: 0 },
+                { value: 2.25 },
+            ];
+            expect(snapToTicks(-8, ticks)).toBe(-10);
+            expect(snapToTicks(-3, ticks)).toBe(-5.5);
+            expect(snapToTicks(1, ticks)).toBe(0);
+            expect(snapToTicks(1.5, ticks)).toBe(2.25);
+        });
+    });
+});
+//# sourceMappingURL=nv-fieldslider.utils.test.js.map

package/dist/collection/components/nv-fieldslider/test/nv-fieldslider.utils.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"nv-fieldslider.utils.test.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldslider/test/nv-fieldslider.utils.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { describe, it, expect } from 'vitest';\nimport {\n clamp,\n valueToPercent,\n snapToStep,\n generateTicks,\n snapToTicks,\n} from '../nv-fieldslider.utils';\n\ndescribe('nv-fieldslider -> utils', () => {\n describe('clamp', () => {\n it('should clamp value to min when value is below min', () => {\n expect(clamp(-10, 0, 100)).toBe(0);\n });\n\n it('should clamp value to max when value is above max', () => {\n expect(clamp(150, 0, 100)).toBe(100);\n });\n\n it('should return value when it is within range', () => {\n expect(clamp(50, 0, 100)).toBe(50);\n });\n\n it('should handle edge cases', () => {\n expect(clamp(0, 0, 100)).toBe(0);\n expect(clamp(100, 0, 100)).toBe(100);\n });\n\n it('should handle negative ranges', () => {\n expect(clamp(-150, -200, -100)).toBe(-150);\n expect(clamp(-50, -200, -100)).toBe(-100);\n expect(clamp(-250, -200, -100)).toBe(-200);\n });\n });\n\n describe('valueToPercent', () => {\n it('should convert value to percentage within range', () => {\n expect(valueToPercent(50, 0, 100)).toBe(50);\n expect(valueToPercent(25, 0, 100)).toBe(25);\n expect(valueToPercent(75, 0, 100)).toBe(75);\n });\n\n it('should handle values outside the range', () => {\n expect(valueToPercent(-10, 0, 100)).toBe(-10);\n expect(valueToPercent(150, 0, 100)).toBe(150);\n });\n\n it('should handle custom ranges', () => {\n expect(valueToPercent(30, 20, 40)).toBe(50);\n expect(valueToPercent(10, -10, 10)).toBe(100);\n expect(valueToPercent(0, -10, 10)).toBe(50);\n expect(valueToPercent(-10, -10, 10)).toBe(0);\n });\n\n it('should return 0 when min equals max', () => {\n expect(valueToPercent(50, 50, 50)).toBe(0);\n expect(valueToPercent(100, 100, 100)).toBe(0);\n });\n\n it('should handle negative ranges', () => {\n expect(valueToPercent(-150, -200, -100)).toBe(50);\n });\n\n it('should handle decimal values', () => {\n expect(valueToPercent(2.5, 0, 5)).toBe(50);\n expect(valueToPercent(0.5, 0, 1)).toBe(50);\n });\n });\n\n describe('snapToStep', () => {\n it('should snap value to nearest step', () => {\n expect(snapToStep(42, 0, 100, 5)).toBe(40);\n expect(snapToStep(43, 0, 100, 5)).toBe(45);\n expect(snapToStep(2.7, 0, 10, 0.5)).toBe(2.5);\n expect(snapToStep(2.8, 0, 10, 0.5)).toBe(3);\n });\n\n it('should clamp value to min when below min', () => {\n expect(snapToStep(-10, 0, 100, 5)).toBe(0);\n });\n\n it('should clamp value to max when above max', () => {\n expect(snapToStep(110, 0, 100, 5)).toBe(100);\n });\n\n it('should handle edge cases', () => {\n // Exactly on a step\n expect(snapToStep(20, 0, 100, 5)).toBe(20);\n // Min and max values\n expect(snapToStep(0, 0, 100, 5)).toBe(0);\n expect(snapToStep(100, 0, 100, 5)).toBe(100);\n // Value between min and first step\n expect(snapToStep(2, 0, 100, 5)).toBe(0);\n expect(snapToStep(3, 0, 100, 5)).toBe(5);\n });\n\n it('should handle negative ranges', () => {\n expect(snapToStep(-152, -200, -100, 10)).toBe(-150);\n });\n\n it(\"should handle step sizes that don't divide evenly into the range\", () => {\n expect(snapToStep(97, 0, 100, 30)).toBe(90);\n expect(snapToStep(98, 0, 100, 30)).toBe(90); // Not 120 because it's clamped to max (100)\n });\n });\n\n describe('generateTicks', () => {\n it('should generate ticks for a simple range', () => {\n const ticks = generateTicks(0, 10, 2);\n expect(ticks).toEqual([0, 2, 4, 6, 8, 10]);\n });\n\n it('should include max value when it falls on a step', () => {\n const ticks = generateTicks(0, 10, 5);\n expect(ticks).toEqual([0, 5, 10]);\n });\n\n it(\"should include max value even when it doesn't fall on a step\", () => {\n const ticks = generateTicks(0, 11, 5);\n expect(ticks).toEqual([0, 5, 10, 11]);\n });\n\n it('should handle negative ranges', () => {\n const ticks = generateTicks(-10, 0, 2);\n expect(ticks).toEqual([-10, -8, -6, -4, -2, 0]);\n });\n\n it('should handle floating point step sizes', () => {\n const ticks = generateTicks(0, 1, 0.2);\n // Using toEqual with approximate values due to floating point precision\n expect(ticks).toEqual([0, 0.2, 0.4, 0.6, 0.8, 1]);\n });\n\n it('should handle small step sizes correctly', () => {\n const ticks = generateTicks(0, 0.5, 0.1);\n expect(ticks).toEqual([0, 0.1, 0.2, 0.3, 0.4, 0.5]);\n });\n\n it('should handle case when min equals max', () => {\n const ticks = generateTicks(10, 10, 5);\n expect(ticks).toEqual([10]);\n });\n });\n\n describe('snapToTicks', () => {\n it('should snap value to closest tick', () => {\n const ticks = [\n { value: 0 },\n { value: 25 },\n { value: 50 },\n { value: 75 },\n { value: 100 },\n ];\n\n expect(snapToTicks(12, ticks)).toBe(0); // Closer to 0\n expect(snapToTicks(13, ticks)).toBe(25); // Closer to 25\n expect(snapToTicks(37, ticks)).toBe(25); // Closer to 25\n expect(snapToTicks(38, ticks)).toBe(50); // Closer to 50\n expect(snapToTicks(87, ticks)).toBe(75); // Closer to 75\n expect(snapToTicks(88, ticks)).toBe(100); // Closer to 100\n });\n\n it('should return original value when ticks is empty or undefined', () => {\n expect(snapToTicks(42, [])).toBe(42);\n expect(snapToTicks(42, undefined)).toBe(42);\n });\n\n it('should return tick value when input exactly matches a tick', () => {\n const ticks = [{ value: 0 }, { value: 50 }, { value: 100 }];\n\n expect(snapToTicks(0, ticks)).toBe(0);\n expect(snapToTicks(50, ticks)).toBe(50);\n expect(snapToTicks(100, ticks)).toBe(100);\n });\n\n it('should handle equidistant values by taking the first encountered tick', () => {\n const ticks = [{ value: 0 }, { value: 10 }];\n\n // Value 5 is exactly equidistant from 0 and 10\n expect(snapToTicks(5, ticks)).toBe(0);\n });\n\n it('should handle negative and decimal values', () => {\n const ticks = [\n { value: -10 },\n { value: -5.5 },\n { value: 0 },\n { value: 2.25 },\n ];\n\n expect(snapToTicks(-8, ticks)).toBe(-10);\n expect(snapToTicks(-3, ticks)).toBe(-5.5);\n expect(snapToTicks(1, ticks)).toBe(0);\n expect(snapToTicks(1.5, ticks)).toBe(2.25);\n });\n });\n});\n"]}

package/dist/collection/components/nv-fieldtext/nv-fieldtext.css CHANGED Viewed

@@ -30,7 +30,7 @@ nv-fieldtext[error]:not([error=false]) {
   --nv-field-border-focus: var(--nv-field-border-default);
   --nv-field-border-disabled: var(--nv-field-border-default);
   --nv-field-border-readonly: var(--nv-field-border-default);
-  --nv-field-focus-box-shadow: var(--color-focus-destructive);
+  --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);
 }
 nv-fieldtext[success]:not([success=false]) {
   --nv-field-border-default: var(--components-form-field-border-success);
@@ -95,6 +95,10 @@ nv-fieldtext > .input-wrapper .input-container:has(input:disabled) {
   background-color: var(--components-form-field-background-disabled);
   border-color: var(--nv-field-border-disabled);
 }
+nv-fieldtext > .input-wrapper .input-container > [slot=leading-input] {
+  display: block;
+  margin-left: var(--form-field-padding-x);
+}
 nv-fieldtext > .input-wrapper .input-container input {
   display: flex;
   align-items: center;
@@ -126,8 +130,15 @@ nv-fieldtext > .input-wrapper .input-container nv-icon.validation {
   color: var(--nv-field-border-default);
   margin-right: var(--form-gap-x);
 }
+nv-fieldtext > .input-wrapper .input-container > [slot=trailing-input] {
+  display: block;
+  margin-right: var(--form-field-padding-x);
+}
 nv-fieldtext > .description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);
@@ -135,7 +146,10 @@ nv-fieldtext > .description {
   line-height: var(--form-description-line-height);
 }
 nv-fieldtext > .error-description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);

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

@@ -169,7 +169,15 @@ const NvFieldtextDocs = {
             args: {
                 label: 'Leading Input',
             },
-            template: (h("nv-fieldtext", { "data-storybook-args": true }, h("nv-badge", { slot: "leading-input", label: "test", dismissible: true, "data-class": "ml-1" }))),
+            template: (h("nv-fieldtext", { "data-storybook-args": true }, h("nv-badge", { slot: "leading-input", label: "test", dismissible: true }))),
+        },
+        {
+            name: 'trailingInputSlot',
+            description: 'Content to be placed after the input text, within the input container.',
+            args: {
+                label: 'Trailing Input',
+            },
+            template: (h("nv-fieldtext", { "data-storybook-args": true }, h("span", { slot: "trailing-input" }, "MWh"))),
         },
         {
             name: 'labelSlot',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldtext.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtext/nv-fieldtext.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';\n\nconst NvFieldtextDocs: NovaDocs<Components.NvFieldtext> = {\n component: 'nv-fieldtext',\n subcomponents: ['nv-badge', 'nv-button'],\n stories: [\n {\n name: 'Default',\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.label),\n args: {\n label: 'Textfield Label',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.description),\n args: {\n label: 'Textfield Description',\n description: 'Description will show here',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.placeholder),\n args: {\n label: 'Textfield Placeholder',\n placeholder: 'Type something...',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.name),\n args: {\n label: 'Textfield Name',\n name: 'name',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.value),\n args: {\n label: 'Textfield Value',\n value: 'value',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.type),\n args: {\n label: 'Textfield Type',\n type: 'email',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.disabled),\n args: {\n label: 'Textfield Disabled',\n disabled: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.readonly),\n args: {\n label: 'Textfield Readonly',\n readonly: true,\n value: 'This input is readonly',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.required),\n args: {\n label: 'Textfield Required',\n required: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.error),\n args: {\n label: 'Textfield Error',\n error: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.errorDescription),\n args: {\n label: 'Textfield Error Description',\n description: 'Make sure to be valid.',\n error: true,\n errorDescription: 'This input has an error.',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.success),\n args: {\n label: 'Textfield Success',\n success: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.maxlength),\n args: {\n label: 'Textfield Max Length',\n maxlength: 10,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.minlength),\n args: {\n label: 'Textfield Min Length',\n minlength: 10,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.pattern),\n args: {\n label: 'Textfield Pattern',\n pattern: '[0-9]+',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.autocomplete),\n args: {\n label: 'Textfield Autocomplete',\n autocomplete: 'on',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.multiple),\n args: {\n label: 'Textfield Multiple',\n type: 'email',\n multiple: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.autofocus),\n args: {\n label: 'Textfield Autofocus',\n autofocus: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.fluid),\n args: {\n label: 'Fluid',\n fluid: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: 'leadingInputSlot',\n description:\n 'Content to be placed before the input text, within the input container.',\n args: {\n label: 'Leading Input',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <nv-badge\n slot=\"leading-input\"\n label=\"test\"\n dismissible\n data-class=\"ml-1\"\n ></nv-badge>\n </nv-fieldtext>\n ),\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-fieldtext data-storybook-args>\n <span slot=\"label\">Label Slot</span>\n </nv-fieldtext>\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-fieldtext data-storybook-args>\n <span slot=\"description\">Custom Description</span>\n </nv-fieldtext>\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-fieldtext data-storybook-args>\n <span slot=\"error-description\">Custom Error Description</span>\n </nv-fieldtext>\n ),\n },\n {\n name: 'beforeInputSlot',\n description:\n 'Content to be placed before the input text, outside the input container.',\n args: {\n label: 'Before Input Slot',\n description: 'Description will show here',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n </nv-fieldtext>\n ),\n },\n {\n name: 'afterInputSlot',\n description:\n 'Content to be placed after the input text, outside the input container.',\n args: {\n label: 'After Input Slot',\n description: 'Description will show here',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <nv-button slot=\"after-input\">After Input Slot</nv-button>\n </nv-fieldtext>\n ),\n },\n ],\n};\n\nexport default NvFieldtextDocs;\n"]}
1	+ {"version":3,"file":"nv-fieldtext.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtext/nv-fieldtext.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';\n\nconst NvFieldtextDocs: NovaDocs<Components.NvFieldtext> = {\n component: 'nv-fieldtext',\n subcomponents: ['nv-badge', 'nv-button'],\n stories: [\n {\n name: 'Default',\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.label),\n args: {\n label: 'Textfield Label',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.description),\n args: {\n label: 'Textfield Description',\n description: 'Description will show here',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.placeholder),\n args: {\n label: 'Textfield Placeholder',\n placeholder: 'Type something...',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.name),\n args: {\n label: 'Textfield Name',\n name: 'name',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.value),\n args: {\n label: 'Textfield Value',\n value: 'value',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.type),\n args: {\n label: 'Textfield Type',\n type: 'email',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.disabled),\n args: {\n label: 'Textfield Disabled',\n disabled: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.readonly),\n args: {\n label: 'Textfield Readonly',\n readonly: true,\n value: 'This input is readonly',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.required),\n args: {\n label: 'Textfield Required',\n required: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.error),\n args: {\n label: 'Textfield Error',\n error: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.errorDescription),\n args: {\n label: 'Textfield Error Description',\n description: 'Make sure to be valid.',\n error: true,\n errorDescription: 'This input has an error.',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.success),\n args: {\n label: 'Textfield Success',\n success: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.maxlength),\n args: {\n label: 'Textfield Max Length',\n maxlength: 10,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.minlength),\n args: {\n label: 'Textfield Min Length',\n minlength: 10,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.pattern),\n args: {\n label: 'Textfield Pattern',\n pattern: '[0-9]+',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.autocomplete),\n args: {\n label: 'Textfield Autocomplete',\n autocomplete: 'on',\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.multiple),\n args: {\n label: 'Textfield Multiple',\n type: 'email',\n multiple: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtext>(x => x.autofocus),\n args: {\n label: 'Textfield Autofocus',\n autofocus: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: nameof<Components.NvFieldtextarea>(x => x.fluid),\n args: {\n label: 'Fluid',\n fluid: true,\n },\n template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n },\n {\n name: 'leadingInputSlot',\n description:\n 'Content to be placed before the input text, within the input container.',\n args: {\n label: 'Leading Input',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <nv-badge slot=\"leading-input\" label=\"test\" dismissible></nv-badge>\n </nv-fieldtext>\n ),\n },\n {\n name: 'trailingInputSlot',\n description:\n 'Content to be placed after the input text, within the input container.',\n args: {\n label: 'Trailing Input',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <span slot=\"trailing-input\">MWh</span>\n </nv-fieldtext>\n ),\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-fieldtext data-storybook-args>\n <span slot=\"label\">Label Slot</span>\n </nv-fieldtext>\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-fieldtext data-storybook-args>\n <span slot=\"description\">Custom Description</span>\n </nv-fieldtext>\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-fieldtext data-storybook-args>\n <span slot=\"error-description\">Custom Error Description</span>\n </nv-fieldtext>\n ),\n },\n {\n name: 'beforeInputSlot',\n description:\n 'Content to be placed before the input text, outside the input container.',\n args: {\n label: 'Before Input Slot',\n description: 'Description will show here',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n </nv-fieldtext>\n ),\n },\n {\n name: 'afterInputSlot',\n description:\n 'Content to be placed after the input text, outside the input container.',\n args: {\n label: 'After Input Slot',\n description: 'Description will show here',\n },\n template: (\n <nv-fieldtext data-storybook-args>\n <nv-button slot=\"after-input\">After Input Slot</nv-button>\n </nv-fieldtext>\n ),\n },\n ],\n};\n\nexport default NvFieldtextDocs;\n"]}

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

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { v4 as uuidv4 } from "uuid";
 /**
  * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot trailing-input - Content to be placed after the input text, within the input container.
  * @slot before-input - Content to be placed before the input text, outside the input container.
  * @slot after-input - Content to be placed after the input text, outside the input container.
  * @slot label - Content to be placed as the label, will override the label prop.
@@ -110,9 +111,9 @@ export class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '665db2bee3d93ad7a21f641bc93b0c9d31bf9caf' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '96d2e16c149fdd538f56710ec8bae7a39e89de25', htmlFor: this.inputId }, h("slot", { key: '67b7b1d0419586aedf4fee36535b8f6cd1547c6a', name: "label" }, this.label))), h("div", { key: 'fe6fd071352f58280a472238578861869427c44b', class: "input-wrapper" }, h("slot", { key: '064dae2965497936609689003e6ee46b5f860951', name: "before-input" }), h("div", { key: '2488ba16be15c15652e79e0f1b977b8eae5cc01e', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '9100ed738f0ad58787aefdea48fe03c07903366b', name: "leading-input" }), h("input", { key: '82f96798277edfe64cc570c62b3cb42e034d7199', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (h("nv-icon", { key: 'e7502bb7e97f50ec5b768248b1656364c6dec78c', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '1d20db97498c253b7d537c2bd2b083aa7a3fb59a', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: 'f5c711f25dfc635b507b10db4b91bfa9910988d2', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '1eca7c8d8b44f2c58a42f3c82b328148b6922a36', class: "description" }, h("slot", { key: 'ab645d19fc865f3e45c1adc164c5ea47600e7cc5', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '7e76601eab36ebfd9f17113f602f1070c2ac27cc', hidden: !this.error, class: "error-description" }, h("slot", { key: '26b8af79934a57af720a1058f75c82fe51edf221', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '852a919f0fcf19b0b67ddf6b0cc2762fc41c9388' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '3c99f456e76ddbc6ec21d3390aea76f849d72b88', htmlFor: this.inputId }, h("slot", { key: '5a11c6f3f0f56b8ab05d0390fec6bd1b15763d02', name: "label" }, this.label))), h("div", { key: 'a305c2ffb63cfd66c70d0074fc62c823cce37f8e', class: "input-wrapper" }, h("slot", { key: '0efd115ea0805160dee0c4b58ad137be2aabc741', name: "before-input" }), h("div", { key: 'ccaaa74adf0df1667bc971eaedb4b9883061851d', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'f81025cb44b30e185b3057527cdc2a1662f5252a', name: "leading-input" }), h("input", { key: 'a8b2356d0b5372823f3da9f053d0de8e28bf8c08', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: 'aa531021a4d3db52839c280cda21d06be6deaa79', name: "trailing-input" }), this.error && (h("nv-icon", { key: 'fc590ef5879887b2990912b16cc247db875af237', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '68023589dc8340647b1aa5fa07f1b9bda248049d', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '3d0a53914d87559eab76f4d0b8165ad1d7e4eccf', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '8641ee0c8638ec43d5a3da0d08ed29991cedfc6a', class: "description" }, h("slot", { key: 'fe4ee537f946b69ef9908f1d086046b03c777f90', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '865c34d486b86223fbbbc81f22cd3428e4110af8', hidden: !this.error, class: "error-description" }, h("slot", { key: 'ac80b543c58bed6db534b8f1571a70aabf811918', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtext"; }
     static get formAssociated() { return true; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldtext.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtext/nv-fieldtext.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/*\n @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\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-fieldtext',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtext.scss',\n})\nexport class NvFieldtext {\n @Element() el: HTMLNvFieldtextElement;\n private inputElement!: HTMLInputElement;\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 /\n Type of the input.\n * @deprecated use type instead.\n /\n @Prop({ reflect: true })\n readonly textInputType: 'text' \| 'tel' \| 'email';\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 * input 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 input 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 input 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 input 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 input’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 input field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the input’s value is managed by the component’s state.\n /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /\n The type prop lets you specify what kind of information the input field\n * should accept. Choose 'text' for general words or sentences, 'tel' for\n * phone numbers, or 'email' for email addresses. This makes sure users get\n * the right keyboard and validation for what they need to enter.\n /\n @Prop({ reflect: true, mutable: true })\n type: 'text' \| 'tel' \| 'email' = 'text';\n\n /\n The disabled prop lets you turn off the input 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 input 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 input 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 input 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 A description that appears when there is an error related to the textfield\n * field.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /\n Changes the input field’s appearance to indicate successful input 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 input field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their input 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 * input 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 Set rules for how the input should be formatted. For example, you can\n * require that a phone number includes only digits or that an email address\n * has the correct format. If users don’t follow these rules, they’ll get a\n * prompt to correct their input after the form is submitted.\n /\n @Prop({ reflect: true })\n readonly pattern: string;\n\n /\n The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they’ve used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n /\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}`;\n\n /\n When used with the email input type, this prop enables the field to accept\n * multiple email addresses. Users can enter several addresses, separating\n * each one with a comma, allowing the form to handle multiple recipients.\n /\n @Prop({ reflect: true })\n readonly multiple: 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 an <input>\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 input value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the input event on the input element.\n * Emits the inputChanged event with the new value.\n * @param {Event} event - Event object of the input event.\n /\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.valueChanged.emit(input.value);\n };\n\n /\n Handles focus when the input container is clicked.\n /\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.textInputType) {\n this.type = this.textInputType;\n }\n\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 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=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type={this.type}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n autofocus={this.autofocus}\n autocomplete={this.autocomplete}\n multiple={this.multiple}\n value={this.value}\n onInput={this.handleInput}\n />\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\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-fieldtext.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtext/nv-fieldtext.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/*\n @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\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-fieldtext',\n shadow: false,\n formAssociated: true,\n styleUrl: 'nv-fieldtext.scss',\n})\nexport class NvFieldtext {\n @Element() el: HTMLNvFieldtextElement;\n private inputElement!: HTMLInputElement;\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 /\n Type of the input.\n * @deprecated use type instead.\n /\n @Prop({ reflect: true })\n readonly textInputType: 'text' \| 'tel' \| 'email';\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 * input 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 input 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 input 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 input 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 input’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 input field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the input’s value is managed by the component’s state.\n /\n @Prop({ reflect: true, mutable: true })\n value: string;\n\n /\n The type prop lets you specify what kind of information the input field\n * should accept. Choose 'text' for general words or sentences, 'tel' for\n * phone numbers, or 'email' for email addresses. This makes sure users get\n * the right keyboard and validation for what they need to enter.\n /\n @Prop({ reflect: true, mutable: true })\n type: 'text' \| 'tel' \| 'email' = 'text';\n\n /\n The disabled prop lets you turn off the input 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 input 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 input 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 input 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 A description that appears when there is an error related to the textfield\n * field.\n * @validator message\n /\n @Prop({ reflect: true, mutable: true })\n errorDescription?: string;\n\n /\n Changes the input field’s appearance to indicate successful input 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 input field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their input 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 * input 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 Set rules for how the input should be formatted. For example, you can\n * require that a phone number includes only digits or that an email address\n * has the correct format. If users don’t follow these rules, they’ll get a\n * prompt to correct their input after the form is submitted.\n /\n @Prop({ reflect: true })\n readonly pattern: string;\n\n /\n The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they’ve used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n /\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}`;\n\n /\n When used with the email input type, this prop enables the field to accept\n * multiple email addresses. Users can enter several addresses, separating\n * each one with a comma, allowing the form to handle multiple recipients.\n /\n @Prop({ reflect: true })\n readonly multiple: 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 an <input>\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 input value changes.\n * @bind value\n /\n @Event()\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n /\n * Handles the input event on the input element.\n * Emits the inputChanged event with the new value.\n * @param {Event} event - Event object of the input event.\n /\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value;\n this.valueChanged.emit(input.value);\n };\n\n /\n Handles focus when the input container is clicked.\n /\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n //#endregion METHODS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillRender() {\n if (this.textInputType) {\n this.type = this.textInputType;\n }\n\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 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=\"input-wrapper\">\n <slot name=\"before-input\"></slot>\n\n <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n <slot name=\"leading-input\"></slot>\n\n <input\n id={this.inputId}\n ref={e => (this.inputElement = e)}\n placeholder={this.placeholder}\n name={this.name}\n type={this.type}\n disabled={this.disabled}\n readOnly={this.readonly}\n required={this.required}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n autofocus={this.autofocus}\n autocomplete={this.autocomplete}\n multiple={this.multiple}\n value={this.value}\n onInput={this.handleInput}\n />\n\n <slot name=\"trailing-input\"></slot>\n\n {this.error && (\n <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n )}\n {this.success && (\n <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n )}\n </div>\n\n <slot name=\"after-input\"></slot>\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-fieldtextarea/nv-fieldtextarea.css CHANGED Viewed

@@ -37,7 +37,7 @@ nv-fieldtextarea[error]:not([error=false]) {
   --nv-field-border-focus: var(--nv-field-border-default);
   --nv-field-border-disabled: var(--nv-field-border-default);
   --nv-field-border-readonly: var(--nv-field-border-default);
-  --nv-field-focus-box-shadow: var(--color-focus-destructive);
+  --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);
 }
 nv-fieldtextarea[success]:not([success=false]) {
   --nv-field-border-default: var(--components-form-field-border-success);
@@ -146,7 +146,10 @@ nv-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation {
   color: var(--nv-field-border-default);
 }
 nv-fieldtextarea .description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);
@@ -154,7 +157,10 @@ nv-fieldtextarea .description {
   line-height: var(--form-description-line-height);
 }
 nv-fieldtextarea .error-description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);

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

@@ -177,9 +177,9 @@ export class NvFieldtextarea {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '26197bbab1a4b4571fdb55c8191e6b7879d58504' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'f3f9465b6917b669cd2f8a363bbe719259bda4c4', htmlFor: this.inputId }, h("slot", { key: '81cda2c75f3dbaeace4c0a713083ba1d71738334', name: "label" }, this.label))), h("div", { key: '7c8ce38e9ae3b5524205017add5470ba46cecc20', class: "textarea-wrapper" }, h("div", { key: 'c32da51694a84c55c092838a62801b4e57ab12ac', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '1b3d130b68595c7f49097494e98848e5523ba34d', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, 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.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: 'ed32145e5c6eb3b5c481835e578c264f24e7a576', class: "description" }, h("slot", { key: '9ca5a874ff2bb5deb377ce8d5fb91235ec754ab0', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'e858235ef7f47e0849757a718617ebc2877f4ac7', hidden: !this.error, class: "error-description" }, h("slot", { key: '91e053ef76274532046acad6db63e40787a3059f', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '405a8423bb391cc8c1e32d8d64ab587c71b355d1' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'dc5a90e0f9cde1946966cb5b2ad98050c6740869', htmlFor: this.inputId }, h("slot", { key: 'a2c78f23289fcdb742000fa949b98359441268dc', name: "label" }, this.label))), h("div", { key: 'be9840925f442ad964597e77d7c6b9b29b5bae0f', class: "textarea-wrapper" }, h("div", { key: '11b986940cfff801c6599f03850b1fc8c5cf2800', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: 'b4d7bbec6ed6d38545935eef997fbc73499bdc15', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, 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.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: 'fc2b00df7fccc60ee9ff1f04cd81e059839b29c0', class: "description" }, h("slot", { key: '9cfaf267dfec3412a5a09ee8fe64b244fda69c7b', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'a56439ef49efeffe303d13f56a0b00f648a7979d', hidden: !this.error, class: "error-description" }, h("slot", { key: '5337f43770894cf6898fcbdc3b77f8a337061597', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }

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

@@ -970,26 +970,26 @@ export class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (h(Host, { key: '35103e6a56955d04ad395b286aaaeaca1493a20e', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '38ffb7ddf37dc7d3f355975c3ae348f5581d384a', htmlFor: this.inputId }, h("slot", { key: '1c41f684aaefd52ae677837ffd55a9895b95524a', name: "label" }, this.label))), h("nv-popover", { key: '325272affdd386690964974b73579f7314e8b464', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '707b2fcd563ea92b818bf5599f8f68f7425fbdc6', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '813597cca8808f9f298eadc8a0dde73714bfcff3', name: "before-input" }), h("div", { key: '47f26e41427825610e37380c929b24dcddb2dc62', class: "input-container" }, h("slot", { key: 'fd17ba01bb66bfcb9972a8145f31f94c8ef21fe1', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
-            h("input", { key: '759608690e370bdb8a61f2d622133558c77c6d0c', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
+        return (h(Host, { key: 'f2e316b464ef324043fca47a25d7511fed662fe9', onclick: e => this.handleHostClick(e) }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '738dd3f9ba307a21ad7f16f77eb09f4f9fed8ccb', htmlFor: this.inputId }, h("slot", { key: '8106132899c67bbc7e9ffb82caf575d599239b9a', name: "label" }, this.label))), h("nv-popover", { key: '8306d0204039862466d83c7e5e2f42b87ea331c4', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { key: '0355aee332a5c5cd2492f22b7d820625273c74e6', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'a6aaeaba4901b4fe0b0266796c84531d57fbb719', name: "before-input" }), h("div", { key: 'ae78ff8fc1a857a0da7be6e3c29464dbc0b80771', class: "input-container" }, h("slot", { key: '6455a51b2f1edf565ac754e61ac773a920f319d4', name: "leading-input" }), startsWithIgnoreCase(this.format, 'HH') && [
+            h("input", { key: '9a48b8ea04698b9443774a2e2bf41383144ba29a', ref: el => (this.inputElements[TimeType.Hours] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.hours, onInput: e => this.handleInputChange(e, TimeType.Hours), placeholder: this.format.includes('hh') ? 'hh' : 'HH', inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Hours), name: this.name
                     ? `${TimeType.Hours}-${this.name}`
                     : TimeType.Hours, id: this.inputId, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('mm') && [
-            h("span", { key: 'a377170431ef27f284d368e56d6236c64067e0ca' }, ":"),
-            h("input", { key: '6cc8faeed02d689a1353966888b0b4dedd8ecb98', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
+            h("span", { key: '5f75d09a90c0a8f6f106eb3e24f4f342fcc36d67' }, ":"),
+            h("input", { key: 'b3cc508705147ea07218a037f21f425deb9b94af', ref: el => (this.inputElements[TimeType.Minutes] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.minutes, onInput: e => this.handleInputChange(e, TimeType.Minutes), placeholder: "mm", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Minutes), name: this.name
                     ? `${TimeType.Minutes}-${this.name}`
                     : TimeType.Minutes, id: `${this.inputId}-minutes`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
         ], this.format.includes('ss') && [
-            h("span", { key: '13da159f3ff13969d501968881569658d06c50fb' }, ":"),
-            h("input", { key: 'cbac3e8a980397c8f32e1f1056aec8b7aab3be0b', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
+            h("span", { key: '00b9320c275b027f9b2fbbebc1f56431783c874e' }, ":"),
+            h("input", { key: '3421fb11a4c9d9ba58bbf6f809070ce35d3d1ad6', ref: el => (this.inputElements[TimeType.Seconds] = el), type: "number", autofocus: this.autofocus, class: "time-input", pattern: "[0-9]*", maxlength: "3", value: this.seconds, onInput: e => this.handleInputChange(e, TimeType.Seconds), placeholder: "ss", inputMode: "numeric", onFocus: () => this.handleFocus(TimeType.Seconds), name: this.name
                     ? `${TimeType.Seconds}-${this.name}`
                     : TimeType.Seconds, id: `${this.inputId}-seconds`, readonly: this.readonly, disabled: this.disabled, required: this.required, onKeyDown: e => this.handleKeyDown(e), onBlur: () => this.handleInputBlur() }),
-        ], h("nv-iconbutton", { key: 'a1a59be923f3529d1d2dbad02b322306fdd6dcb6', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: '7f51d7b568096e6aee23560d5fe6e52018711aa3', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '1c94f8138e808ec3a7690079dc8c8ea210ebb1da', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '7aa247775d7f59eb452fa9f4b511b3a92c88b8fe', name: "after-input" })), h("div", { key: 'b4dab6c5161e69b217748916026f41d9157bb786', class: "time-dropdown", slot: "content" }, h("div", { key: '6d865e6aa3b4d278e4ebff064d417ea42c1d4fe1', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
+        ], h("nv-iconbutton", { key: 'c61dc8780e1d668f2bf11ac2ace21b89ed460fdb', name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', "aria-pressed": this.open.toString(), onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: '5963651793c9c1ec5d47be2a8cea9fed22490bb9', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '79953118d4206363f97ffb8d69dd76545795e419', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: 'd0a8c104a671f997e6a9da223baa2a37dd3bf349', name: "after-input" })), h("div", { key: '7dec8335599d59e116065bdb0053a9096acaae88', class: "time-dropdown", slot: "content" }, h("div", { key: 'be7d3a3fa7b4def66a7ebdf2f29b489540fa5802', class: "time-columns" }, startsWithIgnoreCase(this.format, 'HH') &&
             this.RenderTimeOptionsColumn(TimeType.Hours), this.format.includes('mm') &&
             this.RenderTimeOptionsColumn(TimeType.Minutes), this.format.includes('ss') &&
             this.RenderTimeOptionsColumn(TimeType.Seconds)))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '03922dee26128b93d4e8d7f936ada9d3981d1e36', class: "description" }, h("slot", { key: '4aa71a2b10e488c845106aace0a972df790eb450', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '657232381bcc3644eae65a1beae302c8136b9e8b', hidden: !this.error, class: "error-description" }, h("slot", { key: '0559dbdb62c70b19c73839a2795dc23fa97eddb1', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ec98cc31482efab33ace4e0bf62c6d5d82890df5', class: "description" }, h("slot", { key: '307b134933cca699d6f00d891a440281f2427d79', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '71763de75be4e9f14e1cd1788ca06f2265a46d7e', hidden: !this.error, class: "error-description" }, h("slot", { key: 'dbe05c00515a5ccf1b4ba4736b943cfd8cefaaa0', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtime"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fieldtime/styles/nv-fieldtime.css CHANGED Viewed

@@ -34,7 +34,7 @@ nv-fieldtime[error]:not([error=false]) {
   --nv-field-border-focus: var(--nv-field-border-default);
   --nv-field-border-disabled: var(--nv-field-border-default);
   --nv-field-border-readonly: var(--nv-field-border-default);
-  --nv-field-focus-box-shadow: var(--color-focus-destructive);
+  --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);
 }
 nv-fieldtime[success]:not([success=false]) {
   --nv-field-border-default: var(--components-form-field-border-success);
@@ -184,7 +184,10 @@ nv-fieldtime .input-container:focus, nv-fieldtime .input-container:focus-within
   box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--color-focus-brand);
 }
 nv-fieldtime .description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);
@@ -192,7 +195,10 @@ nv-fieldtime .description {
   line-height: var(--form-description-line-height);
 }
 nv-fieldtime .error-description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);

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

@@ -48,7 +48,7 @@ export class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2d362e97f36cae0caf67d7110726cab752d87479', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: 'd5bf8a4f2d733f6e5b0cdb5063c1dbafa13ea25c', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: '1bd69a2350e76dbcfdec3fa4ecc5c0fca9da0a9f', href: `#${this.name}` }))));
+        return (h(Host, { key: '107d58f8858951a11af7bc23be7ae8564ece6b15', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '3e7d4827757d59019b3661a5994d99c5eca995f2', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: '0bc93cc49237854d5a8ca2bb50c25e7660c2dfa1', href: `#${this.name}` }))));
     }
     static get is() { return "nv-icon"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-icon/nv-icons.js CHANGED Viewed

@@ -34,6 +34,7 @@ export const iconNames = [
     'arrows-move',
     'aspect-ratio',
     'atom',
+    'ban',
     'basket',
     'battery-1',
     'battery-2',