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

@nova-design-system/nova-webcomponents 3.2.0 → 3.4.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 (431) hide show

package/dist/collection/components/nv-fielddaterange/test/nv-fielddaterange.logic.test.js ADDED Viewed

@@ -0,0 +1,137 @@
+/* eslint-disable jsdoc/require-jsdoc */
+import { describe, it, expect } from "vitest";
+/**
+ * Logic tests for nv-fielddaterange basic functionality
+ *
+ * These tests validate basic utility functions and logic
+ * without testing the full component implementation.
+ */
+/**
+ * Utility function to validate date format
+ * @param {string} dateString - Date string to validate
+ * @param {string} format - Expected format (e.g., 'DD/MM/YYYY')
+ * @returns {boolean} Whether the date matches the format
+ */
+function isValidDateFormat(dateString, format) {
+    if (!dateString || !format)
+        return false;
+    const formatMap = {
+        'DD/MM/YYYY': /^\d{2}\/\d{2}\/\d{4}$/,
+        'YYYY-MM-DD': /^\d{4}-\d{2}-\d{2}$/,
+        'MM/DD/YYYY': /^\d{2}\/\d{2}\/\d{4}$/,
+    };
+    const regex = formatMap[format];
+    return regex ? regex.test(dateString) : false;
+}
+/**
+ * Utility function to check if a date range is valid
+ * @param {string} startDate - Start date string
+ * @param {string} endDate - End date string
+ * @returns {boolean} Whether the range is valid (start <= end)
+ */
+function isValidDateRange(startDate, endDate) {
+    if (!startDate || !endDate)
+        return false;
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    return !isNaN(start.getTime()) && !isNaN(end.getTime()) && start <= end;
+}
+/**
+ * Utility function to format date according to pattern
+ * @param {Date} date - Date object to format
+ * @param {string} format - Format pattern
+ * @returns {string} Formatted date string
+ */
+function formatDate(date, format) {
+    if (!date || isNaN(date.getTime()))
+        return '';
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = (date.getMonth() + 1).toString().padStart(2, '0');
+    const year = date.getFullYear().toString();
+    switch (format) {
+        case 'DD/MM/YYYY':
+            return `${day}/${month}/${year}`;
+        case 'YYYY-MM-DD':
+            return `${year}-${month}-${day}`;
+        case 'MM/DD/YYYY':
+            return `${month}/${day}/${year}`;
+        default:
+            return date.toISOString().split('T')[0];
+    }
+}
+describe('nv-fielddaterange - Logic Tests', () => {
+    describe('Date Format Validation', () => {
+        it('should validate DD/MM/YYYY format correctly', () => {
+            expect(isValidDateFormat('15/03/2025', 'DD/MM/YYYY')).toBe(true);
+            expect(isValidDateFormat('1/3/2025', 'DD/MM/YYYY')).toBe(false);
+            expect(isValidDateFormat('15-03-2025', 'DD/MM/YYYY')).toBe(false);
+            expect(isValidDateFormat('', 'DD/MM/YYYY')).toBe(false);
+        });
+        it('should validate YYYY-MM-DD format correctly', () => {
+            expect(isValidDateFormat('2025-03-15', 'YYYY-MM-DD')).toBe(true);
+            expect(isValidDateFormat('25-3-15', 'YYYY-MM-DD')).toBe(false);
+            expect(isValidDateFormat('2025/03/15', 'YYYY-MM-DD')).toBe(false);
+            expect(isValidDateFormat('', 'YYYY-MM-DD')).toBe(false);
+        });
+        it('should handle invalid inputs gracefully', () => {
+            expect(isValidDateFormat(null, 'DD/MM/YYYY')).toBe(false);
+            expect(isValidDateFormat('15/03/2025', null)).toBe(false);
+            expect(isValidDateFormat('15/03/2025', 'INVALID_FORMAT')).toBe(false);
+        });
+    });
+    describe('Date Range Validation', () => {
+        it('should validate correct date ranges', () => {
+            expect(isValidDateRange('2025-03-15', '2025-03-20')).toBe(true);
+            expect(isValidDateRange('2025-03-15', '2025-03-15')).toBe(true); // Same date
+            expect(isValidDateRange('2025-01-01', '2025-12-31')).toBe(true);
+        });
+        it('should reject invalid date ranges', () => {
+            expect(isValidDateRange('2025-03-20', '2025-03-15')).toBe(false); // End before start
+            expect(isValidDateRange('invalid-date', '2025-03-20')).toBe(false);
+            expect(isValidDateRange('2025-03-15', 'invalid-date')).toBe(false);
+        });
+        it('should handle empty inputs', () => {
+            expect(isValidDateRange('', '2025-03-20')).toBe(false);
+            expect(isValidDateRange('2025-03-15', '')).toBe(false);
+            expect(isValidDateRange('', '')).toBe(false);
+        });
+    });
+    describe('Date Formatting', () => {
+        const testDate = new Date(2025, 2, 15); // March 15, 2025
+        it('should format date in DD/MM/YYYY format', () => {
+            expect(formatDate(testDate, 'DD/MM/YYYY')).toBe('15/03/2025');
+        });
+        it('should format date in YYYY-MM-DD format', () => {
+            expect(formatDate(testDate, 'YYYY-MM-DD')).toBe('2025-03-15');
+        });
+        it('should format date in MM/DD/YYYY format', () => {
+            expect(formatDate(testDate, 'MM/DD/YYYY')).toBe('03/15/2025');
+        });
+        it('should handle invalid dates', () => {
+            const invalidDate = new Date('invalid');
+            expect(formatDate(invalidDate, 'DD/MM/YYYY')).toBe('');
+        });
+        it('should handle unknown formats with fallback', () => {
+            // Force the date in UTC to avoid timezone variations
+            const utcDate = new Date(Date.UTC(2025, 2, 15));
+            expect(formatDate(utcDate, 'UNKNOWN_FORMAT')).toBe('2025-03-15');
+        });
+    });
+    describe('Edge Cases', () => {
+        it('should handle leap year dates', () => {
+            const leapYearDate = new Date(2024, 1, 29); // Feb 29, 2024
+            expect(formatDate(leapYearDate, 'DD/MM/YYYY')).toBe('29/02/2024');
+            expect(isValidDateFormat('29/02/2024', 'DD/MM/YYYY')).toBe(true);
+        });
+        it('should handle year boundaries', () => {
+            expect(isValidDateRange('2024-12-31', '2025-01-01')).toBe(true);
+            expect(isValidDateRange('2025-01-01', '2024-12-31')).toBe(false);
+        });
+        it('should handle single digit dates with padding', () => {
+            const singleDigitDate = new Date(2025, 0, 5); // Jan 5, 2025
+            expect(formatDate(singleDigitDate, 'DD/MM/YYYY')).toBe('05/01/2025');
+            expect(formatDate(singleDigitDate, 'YYYY-MM-DD')).toBe('2025-01-05');
+        });
+    });
+});
+//# sourceMappingURL=nv-fielddaterange.logic.test.js.map

package/dist/collection/components/nv-fielddaterange/test/nv-fielddaterange.logic.test.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"nv-fielddaterange.logic.test.js","sourceRoot":"","sources":["../../../../src/components/nv-fielddaterange/test/nv-fielddaterange.logic.test.ts"],"names":[],"mappings":"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","sourcesContent":["/* eslint-disable jsdoc/require-jsdoc */\nimport { describe, it, expect } from 'vitest';\n\n/**\n * Logic tests for nv-fielddaterange basic functionality\n *\n * These tests validate basic utility functions and logic\n * without testing the full component implementation.\n */\n\n/**\n * Utility function to validate date format\n * @param {string} dateString - Date string to validate\n * @param {string} format - Expected format (e.g., 'DD/MM/YYYY')\n * @returns {boolean} Whether the date matches the format\n */\nfunction isValidDateFormat(dateString: string, format: string): boolean {\n if (!dateString || !format) return false;\n\n const formatMap = {\n 'DD/MM/YYYY': /^\\d{2}\\/\\d{2}\\/\\d{4}$/,\n 'YYYY-MM-DD': /^\\d{4}-\\d{2}-\\d{2}$/,\n 'MM/DD/YYYY': /^\\d{2}\\/\\d{2}\\/\\d{4}$/,\n };\n\n const regex = formatMap[format as keyof typeof formatMap];\n return regex ? regex.test(dateString) : false;\n}\n\n/**\n * Utility function to check if a date range is valid\n * @param {string} startDate - Start date string\n * @param {string} endDate - End date string\n * @returns {boolean} Whether the range is valid (start <= end)\n */\nfunction isValidDateRange(startDate: string, endDate: string): boolean {\n if (!startDate || !endDate) return false;\n\n const start = new Date(startDate);\n const end = new Date(endDate);\n\n return !isNaN(start.getTime()) && !isNaN(end.getTime()) && start <= end;\n}\n\n/**\n * Utility function to format date according to pattern\n * @param {Date} date - Date object to format\n * @param {string} format - Format pattern\n * @returns {string} Formatted date string\n */\nfunction formatDate(date: Date, format: string): string {\n if (!date || isNaN(date.getTime())) return '';\n\n const day = date.getDate().toString().padStart(2, '0');\n const month = (date.getMonth() + 1).toString().padStart(2, '0');\n const year = date.getFullYear().toString();\n\n switch (format) {\n case 'DD/MM/YYYY':\n return `${day}/${month}/${year}`;\n case 'YYYY-MM-DD':\n return `${year}-${month}-${day}`;\n case 'MM/DD/YYYY':\n return `${month}/${day}/${year}`;\n default:\n return date.toISOString().split('T')[0];\n }\n}\n\ndescribe('nv-fielddaterange - Logic Tests', () => {\n describe('Date Format Validation', () => {\n it('should validate DD/MM/YYYY format correctly', () => {\n expect(isValidDateFormat('15/03/2025', 'DD/MM/YYYY')).toBe(true);\n expect(isValidDateFormat('1/3/2025', 'DD/MM/YYYY')).toBe(false);\n expect(isValidDateFormat('15-03-2025', 'DD/MM/YYYY')).toBe(false);\n expect(isValidDateFormat('', 'DD/MM/YYYY')).toBe(false);\n });\n\n it('should validate YYYY-MM-DD format correctly', () => {\n expect(isValidDateFormat('2025-03-15', 'YYYY-MM-DD')).toBe(true);\n expect(isValidDateFormat('25-3-15', 'YYYY-MM-DD')).toBe(false);\n expect(isValidDateFormat('2025/03/15', 'YYYY-MM-DD')).toBe(false);\n expect(isValidDateFormat('', 'YYYY-MM-DD')).toBe(false);\n });\n\n it('should handle invalid inputs gracefully', () => {\n expect(isValidDateFormat(null as unknown as string, 'DD/MM/YYYY')).toBe(\n false,\n );\n expect(isValidDateFormat('15/03/2025', null as unknown as string)).toBe(\n false,\n );\n expect(isValidDateFormat('15/03/2025', 'INVALID_FORMAT')).toBe(false);\n });\n });\n\n describe('Date Range Validation', () => {\n it('should validate correct date ranges', () => {\n expect(isValidDateRange('2025-03-15', '2025-03-20')).toBe(true);\n expect(isValidDateRange('2025-03-15', '2025-03-15')).toBe(true); // Same date\n expect(isValidDateRange('2025-01-01', '2025-12-31')).toBe(true);\n });\n\n it('should reject invalid date ranges', () => {\n expect(isValidDateRange('2025-03-20', '2025-03-15')).toBe(false); // End before start\n expect(isValidDateRange('invalid-date', '2025-03-20')).toBe(false);\n expect(isValidDateRange('2025-03-15', 'invalid-date')).toBe(false);\n });\n\n it('should handle empty inputs', () => {\n expect(isValidDateRange('', '2025-03-20')).toBe(false);\n expect(isValidDateRange('2025-03-15', '')).toBe(false);\n expect(isValidDateRange('', '')).toBe(false);\n });\n });\n\n describe('Date Formatting', () => {\n const testDate = new Date(2025, 2, 15); // March 15, 2025\n\n it('should format date in DD/MM/YYYY format', () => {\n expect(formatDate(testDate, 'DD/MM/YYYY')).toBe('15/03/2025');\n });\n\n it('should format date in YYYY-MM-DD format', () => {\n expect(formatDate(testDate, 'YYYY-MM-DD')).toBe('2025-03-15');\n });\n\n it('should format date in MM/DD/YYYY format', () => {\n expect(formatDate(testDate, 'MM/DD/YYYY')).toBe('03/15/2025');\n });\n\n it('should handle invalid dates', () => {\n const invalidDate = new Date('invalid');\n expect(formatDate(invalidDate, 'DD/MM/YYYY')).toBe('');\n });\n\n it('should handle unknown formats with fallback', () => {\n // Force the date in UTC to avoid timezone variations\n const utcDate = new Date(Date.UTC(2025, 2, 15));\n expect(formatDate(utcDate, 'UNKNOWN_FORMAT')).toBe('2025-03-15');\n });\n });\n\n describe('Edge Cases', () => {\n it('should handle leap year dates', () => {\n const leapYearDate = new Date(2024, 1, 29); // Feb 29, 2024\n expect(formatDate(leapYearDate, 'DD/MM/YYYY')).toBe('29/02/2024');\n expect(isValidDateFormat('29/02/2024', 'DD/MM/YYYY')).toBe(true);\n });\n\n it('should handle year boundaries', () => {\n expect(isValidDateRange('2024-12-31', '2025-01-01')).toBe(true);\n expect(isValidDateRange('2025-01-01', '2024-12-31')).toBe(false);\n });\n\n it('should handle single digit dates with padding', () => {\n const singleDigitDate = new Date(2025, 0, 5); // Jan 5, 2025\n expect(formatDate(singleDigitDate, 'DD/MM/YYYY')).toBe('05/01/2025');\n expect(formatDate(singleDigitDate, 'YYYY-MM-DD')).toBe('2025-01-05');\n });\n });\n});\n"]}

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

@@ -1,3 +1,41 @@
+/* TODO: integrate this logic in the proper structure */
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {
+  background: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {
+  border-color: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider[error] .slider-container .track-container .track .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:hover {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-handler-background-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:focus {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
 /**
  * Scrollbar mixin for the Nova Design System
  * This mixin provides consistent scrollbar styling for components
@@ -157,6 +195,7 @@ nv-fielddropdown .input-container p.non-filterable-text {
   font-weight: 500;
   line-height: var(--form-field-line-height);
   width: 100%;
+  /* Hide Edge built-in password reveal and clear icons */
 }
 nv-fielddropdown .input-container input:focus,
 nv-fielddropdown .input-container p.non-filterable-text:focus {
@@ -173,6 +212,13 @@ nv-fielddropdown .input-container p.non-filterable-text::placeholder {
   font-weight: 400;
   line-height: var(--form-field-line-height);
 }
+nv-fielddropdown .input-container input[type=password]::-ms-clear, nv-fielddropdown .input-container input[type=password]::-ms-reveal,
+nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-clear,
+nv-fielddropdown .input-container p.non-filterable-text[type=password]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
 nv-fielddropdown .input-container > nv-iconbutton {
   border: 0px;
   border-radius: 0px;

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

@@ -1,3 +1,41 @@
+/* TODO: integrate this logic in the proper structure */
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {
+  background: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {
+  border-color: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider[error] .slider-container .track-container .track .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:hover {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-handler-background-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:focus {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
 /**
  * Scrollbar mixin for the Nova Design System
  * This mixin provides consistent scrollbar styling for components
@@ -163,6 +201,7 @@ nv-fieldmultiselect .input-container-multiselect p.non-filterable-text {
   font-weight: 500;
   line-height: var(--form-field-line-height);
   width: 100%;
+  /* Hide Edge built-in password reveal and clear icons */
   width: 100%;
   flex-grow: 1;
   margin: 0;
@@ -184,6 +223,13 @@ nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placehol
   font-weight: 400;
   line-height: var(--form-field-line-height);
 }
+nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-clear, nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,
+nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-clear,
+nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
 nv-fieldmultiselect .input-container-multiselect > nv-iconbutton {
   border: 0px;
   border-radius: 0px;

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

@@ -1,3 +1,41 @@
+/* TODO: integrate this logic in the proper structure */
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {
+  background: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {
+  border-color: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider[error] .slider-container .track-container .track .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:hover {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-handler-background-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:focus {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
 nv-fieldnumber {
   --nv-field-border-default: var(--components-form-field-border-default);
   --nv-field-border-hover: var(--components-form-field-border-hover);
@@ -112,6 +150,7 @@ nv-fieldnumber .input-wrapper .input-container input {
   font-weight: 500;
   line-height: var(--form-field-line-height);
   width: 100%;
+  /* Hide Edge built-in password reveal and clear icons */
   width: 100%;
   appearance: textfield;
 }
@@ -128,6 +167,11 @@ nv-fieldnumber .input-wrapper .input-container input::placeholder {
   font-weight: 400;
   line-height: var(--form-field-line-height);
 }
+nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-clear, nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
 nv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {
   appearance: none;
   margin: 0;

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

@@ -164,6 +164,14 @@ const NvFieldnumberDocs = {
             },
             template: (h("nv-fieldnumber", { "data-storybook-args": true }, h("nv-badge", { slot: "leading-input", label: "Leading", dismissible: true, "data-class": "ml-1" }))),
         },
+        {
+            name: 'trailingInputSlot',
+            description: 'Content to be placed after the number input, within the input container.',
+            args: {
+                label: 'Trailing Input',
+            },
+            template: (h("nv-fieldnumber", { "data-storybook-args": true }, h("span", { slot: "trailing-input", "data-class": "mr-1" }, "EUR"))),
+        },
         {
             name: 'labelSlot',
             description: 'Content to be placed as the label, will override the label prop.',

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldnumber.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldnumber/nv-fieldnumber.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 NvFieldnumberDocs: NovaDocs<Components.NvFieldnumber> = {\n component: 'nv-fieldnumber',\n subcomponents: ['nv-button', 'nv-badge'],\n stories: [\n {\n name: 'Default',\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.label),\n args: {\n label: 'Fieldnumber Label',\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.description),\n args: {\n label: 'Fieldnumber Description',\n description: 'Description will show here',\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.placeholder),\n args: {\n label: 'Fieldnumber Placeholder',\n placeholder: 'Type something...',\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.name),\n args: {\n label: 'Fieldnumber Name',\n name: 'name',\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.value),\n args: {\n label: 'Fieldnumber Value',\n value: 123,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.disabled),\n args: {\n label: 'Fieldnumber Disabled',\n disabled: true,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.readonly),\n args: {\n label: 'Fieldnumber Readonly',\n readonly: true,\n value: 123,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.required),\n args: {\n label: 'Fieldnumber Required',\n required: true,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.error),\n args: {\n label: 'Fieldnumber Error',\n error: true,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.errorDescription),\n args: {\n label: 'Fieldnumber Error Description',\n description: 'Make sure to be valid.',\n error: true,\n errorDescription: 'This input has an error.',\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.success),\n args: {\n label: 'Fieldnumber Success',\n success: true,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.min),\n args: {\n label: 'Fieldnumber Min',\n min: 0,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.max),\n args: {\n label: 'Fieldnumber Max',\n max: 10,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.step),\n args: {\n label: 'Fieldnumber Step',\n step: 2,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.autofocus),\n args: {\n label: 'Autofocus',\n autofocus: true,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.fluid),\n args: {\n label: 'Fluid',\n fluid: true,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: 'beforeInputSlot',\n description:\n 'Content to be placed before the number input, outside the input container.',\n args: {\n label: 'Before Input Slot',\n description: 'This is placed before the number field',\n },\n template: (\n <nv-fieldnumber data-storybook-args>\n <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n </nv-fieldnumber>\n ),\n },\n {\n name: 'afterInputSlot',\n description:\n 'Content to be placed after the number input, outside the input container.',\n args: {\n label: 'After Input Slot',\n description: 'This is placed after the number field',\n },\n template: (\n <nv-fieldnumber data-storybook-args>\n <nv-button slot=\"after-input\">After Input Slot</nv-button>\n </nv-fieldnumber>\n ),\n },\n {\n name: 'leadingInputSlot',\n description:\n 'Content to be placed before the number input, within the input container.',\n args: {\n label: 'Leading Input',\n },\n template: (\n <nv-fieldnumber data-storybook-args>\n <nv-badge\n slot=\"leading-input\"\n label=\"Leading\"\n dismissible\n data-class=\"ml-1\"\n ></nv-badge>\n </nv-fieldnumber>\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-fieldnumber data-storybook-args>\n <span slot=\"label\">Custom Label</span>\n </nv-fieldnumber>\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-fieldnumber data-storybook-args>\n <span slot=\"description\">Custom Description</span>\n </nv-fieldnumber>\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-fieldnumber data-storybook-args>\n <span slot=\"error-description\">Custom Error Description</span>\n </nv-fieldnumber>\n ),\n },\n ],\n};\n\nexport default NvFieldnumberDocs;\n"]}
1	+ {"version":3,"file":"nv-fieldnumber.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldnumber/nv-fieldnumber.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 NvFieldnumberDocs: NovaDocs<Components.NvFieldnumber> = {\n component: 'nv-fieldnumber',\n subcomponents: ['nv-button', 'nv-badge'],\n stories: [\n {\n name: 'Default',\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.label),\n args: {\n label: 'Fieldnumber Label',\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.description),\n args: {\n label: 'Fieldnumber Description',\n description: 'Description will show here',\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.placeholder),\n args: {\n label: 'Fieldnumber Placeholder',\n placeholder: 'Type something...',\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.name),\n args: {\n label: 'Fieldnumber Name',\n name: 'name',\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.value),\n args: {\n label: 'Fieldnumber Value',\n value: 123,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.disabled),\n args: {\n label: 'Fieldnumber Disabled',\n disabled: true,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.readonly),\n args: {\n label: 'Fieldnumber Readonly',\n readonly: true,\n value: 123,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.required),\n args: {\n label: 'Fieldnumber Required',\n required: true,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.error),\n args: {\n label: 'Fieldnumber Error',\n error: true,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.errorDescription),\n args: {\n label: 'Fieldnumber Error Description',\n description: 'Make sure to be valid.',\n error: true,\n errorDescription: 'This input has an error.',\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.success),\n args: {\n label: 'Fieldnumber Success',\n success: true,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.min),\n args: {\n label: 'Fieldnumber Min',\n min: 0,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.max),\n args: {\n label: 'Fieldnumber Max',\n max: 10,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.step),\n args: {\n label: 'Fieldnumber Step',\n step: 2,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.autofocus),\n args: {\n label: 'Autofocus',\n autofocus: true,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: nameof<Components.NvFieldnumber>(x => x.fluid),\n args: {\n label: 'Fluid',\n fluid: true,\n },\n template: <nv-fieldnumber data-storybook-args></nv-fieldnumber>,\n },\n {\n name: 'beforeInputSlot',\n description:\n 'Content to be placed before the number input, outside the input container.',\n args: {\n label: 'Before Input Slot',\n description: 'This is placed before the number field',\n },\n template: (\n <nv-fieldnumber data-storybook-args>\n <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n </nv-fieldnumber>\n ),\n },\n {\n name: 'afterInputSlot',\n description:\n 'Content to be placed after the number input, outside the input container.',\n args: {\n label: 'After Input Slot',\n description: 'This is placed after the number field',\n },\n template: (\n <nv-fieldnumber data-storybook-args>\n <nv-button slot=\"after-input\">After Input Slot</nv-button>\n </nv-fieldnumber>\n ),\n },\n {\n name: 'leadingInputSlot',\n description:\n 'Content to be placed before the number input, within the input container.',\n args: {\n label: 'Leading Input',\n },\n template: (\n <nv-fieldnumber data-storybook-args>\n <nv-badge\n slot=\"leading-input\"\n label=\"Leading\"\n dismissible\n data-class=\"ml-1\"\n ></nv-badge>\n </nv-fieldnumber>\n ),\n },\n {\n name: 'trailingInputSlot',\n description:\n 'Content to be placed after the number input, within the input container.',\n args: {\n label: 'Trailing Input',\n },\n template: (\n <nv-fieldnumber data-storybook-args>\n <span slot=\"trailing-input\" data-class=\"mr-1\">\n EUR\n </span>\n </nv-fieldnumber>\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-fieldnumber data-storybook-args>\n <span slot=\"label\">Custom Label</span>\n </nv-fieldnumber>\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-fieldnumber data-storybook-args>\n <span slot=\"description\">Custom Description</span>\n </nv-fieldnumber>\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-fieldnumber data-storybook-args>\n <span slot=\"error-description\">Custom Error Description</span>\n </nv-fieldnumber>\n ),\n },\n ],\n};\n\nexport default NvFieldnumberDocs;\n"]}

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

@@ -2,6 +2,7 @@ import { h, Host, } 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.
@@ -114,9 +115,9 @@ export class NvFieldnumber {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'ff097af3b023ea85fe549331219fd147aaf5d587' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'fbb5a460baf515c9f41068126db0dfc80f3aba64', htmlFor: this.inputId }, h("slot", { key: '27963c9e2f61213b1897e117a68a2cb0d56e7d0f', name: "label" }, this.label))), h("div", { key: 'f1f53b27aabd76cfe478ca0de182fd0d181e1c4b', class: "input-wrapper" }, h("slot", { key: 'f5f0fe6e8fbaa63bb961a5216eba0d0a10ca4cf7', name: "before-input" }), h("div", { key: '6d615f206e6b0ed3b228c75601fd7608b1aa4869', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'd4cbd09db77e7998020289b44d43be1c37c1197a', name: "leading-input" }), h("input", { key: 'fa8620fa422b1b96a05630da3f5bed20281b8d19', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), this.error && (h("nv-icon", { key: '0787893a02fbebf2bec97f4285d4b396fc1a474d', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'd2d244b7a2280c3b7719927d6550a28c75743a48', name: "circle-check", class: "validation", size: "md" })), h("div", { key: 'ebe05dafe4b7ec67dbe59d5da612f2f5e6951e3f', class: "stepper" }, h("nv-iconbutton", { key: '3112ee0b6f5b3982290cd1ec006653d48d3db626', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), h("nv-iconbutton", { key: 'e3cdf3ca761ebd647e13f23df44c4e18879b8913', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), h("slot", { key: 'c6de7aaff35002e78e5a27d5f37fe06297b3693f', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'e2c1ea1eb866593cee0eb4218dba9665cd8a321c', class: "description" }, h("slot", { key: '1fd324333be676116f5d614bb2dc7448ecd7d3a1', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'adb8565f5204849caff31758f739d732f2eb5a01', hidden: !this.error, class: "error-description" }, h("slot", { key: '0f2ec09a50e98855cc3f2451c75bd6dca4a6baec', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: 'bc6961e9cfb030f0ded61180836826bc67215432' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '98542b998a5db7572209167ccda6e143797efe02', htmlFor: this.inputId }, h("slot", { key: '59ee59722d9a05bc62307f12db55965b29ec5ac2', name: "label" }, this.label))), h("div", { key: 'dd63f77ae0110620d37d5e7d9e02baafd7384a18', class: "input-wrapper" }, h("slot", { key: '0c73ca84d755675012c82d0e963c619839551965', name: "before-input" }), h("div", { key: 'bcc8edc6ff5d2f57d1237f22de0d6b6d190ff8e3', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '6ae97f06dae32a6bf00bb73eddfe556ad2e92453', name: "leading-input" }), h("input", { key: '1799946e5b38ef77e3241a4ace04e37afdec98a4', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: this.required, max: this.max, min: this.min, step: this.step, value: this.value, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), h("slot", { key: 'b0861939aa926e51777caa62bf01ed6a0a39dc50', name: "trailing-input" }), this.error && (h("nv-icon", { key: '57df54aa50deab4ad077692cc4592561b31e0d42', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'e57297c4fab2826fb50943c47983f73eb3a8f5b0', name: "circle-check", class: "validation", size: "md" })), h("div", { key: '6096c2878876dd4324b112cf3067bfc3cf9d35f2', class: "stepper" }, h("nv-iconbutton", { key: '7e03c767f0f0c44f70435bfed2bae02f409ed23b', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), h("nv-iconbutton", { key: '06a5b8af32c99bab407ce427c4d634fb0209674c', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), h("slot", { key: '32dc74a736303088b40fff6b8dd53efb9c0e3832', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c0cb59d63dfa4a16820ddf1b3438e287a4e94aaa', class: "description" }, h("slot", { key: 'bcb6d46402b596401ac7f9f01fb6cfb3e4b58feb', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '093f05eadee4cf3802be34b98907596d64febcb6', hidden: !this.error, class: "error-description" }, h("slot", { key: '93572b4f780e085a2be652a687e561275ebbc428', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldnumber"; }
     static get formAssociated() { return true; }

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

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldnumber.js","sourceRoot":"","sources":["../../../src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\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-fieldnumber',\n styleUrl: 'nv-fieldnumber.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldnumber {\n @Element() el: HTMLNvFieldnumberElement;\n private inputElement!: HTMLInputElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the number 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 * 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 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 Show a helpful message under the input 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 input field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n The maximum value that the input field can accept. Use this in combination\n * with min to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly max: number;\n\n /\n The minimum value that the input field can accept. Use this in combination\n * with max to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly min: number;\n\n /\n Define the increment value for the input field. It determines how much the\n * value will increase or decrease when the user clicks the stepper buttons.\n /\n @Prop({ reflect: true })\n readonly step: number = 1;\n\n /\n The value of the input field. It’s the text that users type in or the value\n * that you set programmatically. This is the main way to interact with the\n * input field, and it’s essential for creating forms that users can fill out.\n /\n @Prop({ reflect: true, mutable: true })\n value: number;\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<number>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n watchValueHandler(newValue: number) {\n this.valueChanged.emit(newValue);\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = Number(input.value);\n };\n\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n private handlePlus = () => {\n this.inputElement.stepUp();\n this.value = Number(this.inputElement.value);\n };\n\n private handleMinus = () => {\n this.inputElement.stepDown();\n this.value = Number(this.inputElement.value);\n };\n\n // prevents text selection when clicking the buttons multiple times\n private preventSelection = (event: Event) => {\n event.preventDefault();\n };\n\n private isMinValueReached = (): boolean => {\n return this.min !== undefined && this.value <= this.min;\n };\n\n private isMaxValueReached = (): boolean => {\n return this.max !== undefined && this.value >= this.max;\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 //#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=\"number\"\n autofocus={this.autofocus}\n required={this.required}\n max={this.max}\n min={this.min}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\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\n <div class=\"stepper\">\n <nv-iconbutton\n size=\"md\"\n name=\"minus\"\n emphasis=\"lower\"\n onClick={this.handleMinus}\n disabled={this.isMinValueReached()}\n onMouseDown={this.preventSelection}\n tabindex=\"-1\"\n ></nv-iconbutton>\n <nv-iconbutton\n size=\"md\"\n name=\"plus\"\n emphasis=\"lower\"\n onClick={this.handlePlus}\n disabled={this.isMaxValueReached()}\n onMouseDown={this.preventSelection}\n tabindex=\"-1\"\n />\n </div>\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-fieldnumber.js","sourceRoot":"","sources":["../../../src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\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-fieldnumber',\n styleUrl: 'nv-fieldnumber.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldnumber {\n @Element() el: HTMLNvFieldnumberElement;\n private inputElement!: HTMLInputElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Message defines a 'hint ' message for the number 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 * 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 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 Show a helpful message under the input 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 input field’s appearance to indicate successful input or\n * validation.\n /\n @Prop({ reflect: true })\n readonly success: boolean = false;\n\n /\n The maximum value that the input field can accept. Use this in combination\n * with min to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly max: number;\n\n /\n The minimum value that the input field can accept. Use this in combination\n * with max to create a range of valid values.\n /\n @Prop({ reflect: true })\n readonly min: number;\n\n /\n Define the increment value for the input field. It determines how much the\n * value will increase or decrease when the user clicks the stepper buttons.\n /\n @Prop({ reflect: true })\n readonly step: number = 1;\n\n /\n The value of the input field. It’s the text that users type in or the value\n * that you set programmatically. This is the main way to interact with the\n * input field, and it’s essential for creating forms that users can fill out.\n /\n @Prop({ reflect: true, mutable: true })\n value: number;\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<number>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n watchValueHandler(newValue: number) {\n this.valueChanged.emit(newValue);\n }\n\n //#endregion WATCHERS\n /************************************************************************/\n //#region METHODS\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = Number(input.value);\n };\n\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n private handlePlus = () => {\n this.inputElement.stepUp();\n this.value = Number(this.inputElement.value);\n };\n\n private handleMinus = () => {\n this.inputElement.stepDown();\n this.value = Number(this.inputElement.value);\n };\n\n // prevents text selection when clicking the buttons multiple times\n private preventSelection = (event: Event) => {\n event.preventDefault();\n };\n\n private isMinValueReached = (): boolean => {\n return this.min !== undefined && this.value <= this.min;\n };\n\n private isMaxValueReached = (): boolean => {\n return this.max !== undefined && this.value >= this.max;\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 //#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=\"number\"\n autofocus={this.autofocus}\n required={this.required}\n max={this.max}\n min={this.min}\n step={this.step}\n value={this.value}\n disabled={this.disabled}\n readOnly={this.readonly}\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\n <div class=\"stepper\">\n <nv-iconbutton\n size=\"md\"\n name=\"minus\"\n emphasis=\"lower\"\n onClick={this.handleMinus}\n disabled={this.isMinValueReached()}\n onMouseDown={this.preventSelection}\n tabindex=\"-1\"\n ></nv-iconbutton>\n <nv-iconbutton\n size=\"md\"\n name=\"plus\"\n emphasis=\"lower\"\n onClick={this.handlePlus}\n disabled={this.isMaxValueReached()}\n onMouseDown={this.preventSelection}\n tabindex=\"-1\"\n />\n </div>\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-fieldpassword/nv-fieldpassword.css CHANGED Viewed

@@ -1,3 +1,41 @@
+/* TODO: integrate this logic in the proper structure */
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {
+  background: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {
+  border-color: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider[error] .slider-container .track-container .track .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:hover {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-handler-background-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:focus {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
 nv-fieldpassword {
   --nv-field-border-default: var(--components-form-field-border-default);
   --nv-field-border-hover: var(--components-form-field-border-hover);
@@ -109,6 +147,7 @@ nv-fieldpassword .input-wrapper .input-container input {
   font-weight: 500;
   line-height: var(--form-field-line-height);
   width: 100%;
+  /* Hide Edge built-in password reveal and clear icons */
 }
 nv-fieldpassword .input-wrapper .input-container input:focus {
   outline: none;
@@ -123,6 +162,11 @@ nv-fieldpassword .input-wrapper .input-container input::placeholder {
   font-weight: 400;
   line-height: var(--form-field-line-height);
 }
+nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-clear, nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
 nv-fieldpassword .input-wrapper .input-container > nv-iconbutton {
   border: 0px;
   border-radius: 0px;