@nova-design-system/nova-webcomponents 3.11.0 → 3.13.0

package/dist/collection/components/nv-fielddate/styles/nv-fielddate.css

@@ -196,6 +196,10 @@ nv-fielddate .input-wrapper .input-container > nv-iconbutton:focus-visible {
   border-radius: var(--button-md-border-radius);
   outline-offset: -3px;
 }
+nv-fielddate .input-wrapper .input-container > nv-iconbutton:last-of-type {
+  border-top-right-radius: var(--form-field-radius);
+  border-bottom-right-radius: var(--form-field-radius);
+}
 nv-fielddate .input-wrapper .input-container nv-icon.validation {
   color: var(--nv-field-border-default);
 }

package/dist/collection/components/nv-fielddaterange/styles/nv-fielddaterange.css

@@ -104,6 +104,7 @@ nv-fielddaterange nv-popover [data-scope=popover] {
   background-color: var(--components-list-dropdown-background);
   border: 1px solid var(--components-list-dropdown-border);
   width: auto;
+  z-index: 2;
 }
 nv-fielddaterange nv-popover [slot=content] {
   display: block;
@@ -203,6 +204,10 @@ nv-fielddaterange .input-wrapper .input-container > nv-iconbutton:focus-visible
   border-radius: var(--button-md-border-radius);
   outline-offset: -3px;
 }
+nv-fielddaterange .input-wrapper .input-container > nv-iconbutton:last-of-type {
+  border-top-right-radius: var(--form-field-radius);
+  border-bottom-right-radius: var(--form-field-radius);
+}
 nv-fielddaterange .input-wrapper .input-container nv-icon.validation {
   color: var(--nv-field-border-default);
 }
@@ -234,6 +239,7 @@ nv-fielddaterange .range-inputs {
   align-items: center;
   gap: 0;
   width: 100%;
+  z-index: 1;
 }
 nv-fielddaterange .range-inputs input {
   flex: 1;

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

@@ -227,6 +227,10 @@ nv-fielddropdown .input-container > nv-iconbutton:focus-visible {
   border-radius: var(--button-md-border-radius);
   outline-offset: -3px;
 }
+nv-fielddropdown .input-container > nv-iconbutton:last-of-type {
+  border-top-right-radius: var(--form-field-radius);
+  border-bottom-right-radius: var(--form-field-radius);
+}
 nv-fielddropdown .input-container nv-icon.validation {
   color: var(--nv-field-border-default);
 }

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

@@ -126,7 +126,6 @@ export class NvFieldmultiselect {
          * Handle badge close for options mode.
          */
         this.handleBadgeCloseOptions = () => {
-            console.info('handleBadgeCloseOptions:', this.value);
             this.value = [];
             this.valueChanged.emit(this.value);
             // Uncheck all elements
@@ -144,7 +143,6 @@ export class NvFieldmultiselect {
          * Handle badge close for slots mode.
          */
         this.handleBadgeCloseSlots = () => {
-            console.info('handleBadgeCloseSlots:', this.value);
             this.value = [];
             this.valueChanged.emit(this.value);
             // Uncheck all elements
@@ -353,7 +351,6 @@ export class NvFieldmultiselect {
             try {
                 // Get visible and enabled option values from DOM
                 const visibleOptionValues = this.getVisibleEnabledOptionItems();
-                console.info('[SelectAll][Options] toggleSelectAllOptions called. selectAll:', selectAll, 'visibleOptionValues:', visibleOptionValues, 'Current value:', this.value);
                 if (selectAll) {
                     // Select all visible options - merge with existing selections
                     this.value = [...new Set([...this.value, ...visibleOptionValues])];
@@ -362,7 +359,6 @@ export class NvFieldmultiselect {
                     // Deselect only the visible options, keep others that might be filtered out
                     this.value = this.value.filter(val => !visibleOptionValues.includes(val));
                 }
-                console.info('[SelectAll][Options] New value after toggle:', this.value);
                 // Emit the change event
                 this.valueChanged.emit(this.value);
                 // Synchronize child components
@@ -388,7 +384,6 @@ export class NvFieldmultiselect {
             try {
                 // Get visible and enabled items
                 const items = this.getVisibleEnabledSlotItems();
-                console.info('[SelectAll][Slots] toggleSelectAllSlots called. selectAll:', selectAll, 'visible slot items:', items.map(item => item.getAttribute('value') || item.getAttribute('label')), 'Current value:', this.value);
                 if (selectAll) {
                     // Select all visible items
                     const allActiveValues = items
@@ -403,7 +398,6 @@ export class NvFieldmultiselect {
                         .filter(value => value !== '');
                     this.value = this.value.filter(val => !visibleValues.includes(val));
                 }
-                console.info('[SelectAll][Slots] New value after toggle:', this.value);
                 // Emit the change event
                 this.valueChanged.emit(this.value);
                 // Force synchronization with a small delay to ensure DOM is updated
@@ -426,15 +420,12 @@ export class NvFieldmultiselect {
         this.handleSelectAllCheckboxOptionsClick = (event) => {
             event.stopPropagation();
             event.preventDefault();
-            console.info('[handleSelectAllCheckboxOptionsClick] event:', event);
             const currentState = this.getSelectAllCheckboxStateOptions();
-            console.info('[SelectAll][Options] Checkbox clicked. Current state:', currentState, 'Current value:', this.value);
             // Logic to handle the indeterminate state
             // - unchecked → select all
             // - indeterminate → select all (clicking on indeterminate will change to checked)
             // - checked → deselect all
             const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
-            console.info('[SelectAll][Options] shouldSelectAll:', shouldSelectAll);
             this.toggleSelectAllOptions(shouldSelectAll);
         };
         /**
@@ -444,15 +435,12 @@ export class NvFieldmultiselect {
         this.handleSelectAllCheckboxSlotsClick = (event) => {
             event.stopPropagation();
             event.preventDefault();
-            console.info('[handleSelectAllCheckboxSlotsClick] event:', event);
             const currentState = this.getSelectAllCheckboxStateSlots();
-            console.info('[SelectAll][Slots] Checkbox clicked. Current state:', currentState, 'Current value:', this.value);
             // Logic to handle the indeterminate state
             // - unchecked → select all
             // - indeterminate → select all (clicking on indeterminate will change to checked)
             // - checked → deselect all
             const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
-            console.info('[SelectAll][Slots] shouldSelectAll:', shouldSelectAll);
             this.toggleSelectAllSlots(shouldSelectAll);
         };
         //#endregion METHODS
@@ -495,8 +483,6 @@ export class NvFieldmultiselect {
     /****************************************************************************/
     //#region WATCHERS
     handleOptionsChange(newValue) {
-        console.info('[Watch:options] newValue:', newValue);
-        console.info('[Watch:options] current value before update:', this.value);
         if (!newValue)
             return;
         // If the parent has set a value prop, use it. Otherwise, derive from checked options.
@@ -505,22 +491,18 @@ export class NvFieldmultiselect {
             this.value = newValue
                 .filter(option => option.checked)
                 .map(option => option.value);
-            console.info('[Watch:options] updated value from checked options:', this.value);
         }
         else {
             // If value is set, ensure checked states in options match value
             newValue.forEach(option => {
                 option.checked = this.value.includes(option.value);
             });
-            console.info('[Watch:options] options checked state synced to value:', newValue);
         }
         this.reorderOptionsContent();
     }
     watchValueHandler() {
-        console.info('[Watch:value] Value changed:', this.value, 'isBulkOperation:', this.isBulkOperation);
         // Skip processing during bulk operations
         if (this.isBulkOperation) {
-            console.info('[Watch:value] Skipping syncChildComponents and options update due to bulk operation');
             return;
         }
         // Synchronize child components when value changes programmatically
@@ -569,11 +551,9 @@ export class NvFieldmultiselect {
     handleItemChecked(event) {
         if (this.disabled || this.readonly || this.isBulkOperation) {
             // Skip processing itemChecked events during bulk operations
-            console.info('[Event:itemChecked] Skipped due to bulk operation or disabled/readonly', event.detail);
             return;
         }
         const { value, checked } = event.detail;
-        console.info('[Event:itemChecked] value:', value, 'checked:', checked, 'current value:', this.value);
         if (value !== undefined && value !== null) {
             const newValue = [...this.value];
             const valueIndex = newValue.indexOf(value);
@@ -586,7 +566,6 @@ export class NvFieldmultiselect {
                 newValue.splice(valueIndex, 1);
                 hasChanged = true;
             }
-            console.info('[Event:itemChecked] newValue after update:', newValue);
             if (hasChanged) {
                 this.value = newValue;
                 this.valueChanged.emit(this.value);
@@ -620,7 +599,6 @@ export class NvFieldmultiselect {
      * Subscribe to click outside event.
      */
     connectedCallback() {
-        console.info('[Lifecycle] connectedCallback - value:', this.value);
         // Bind once and reuse the same reference for add/remove to avoid leaks
         if (!this._boundHandleClickOutside) {
             this._boundHandleClickOutside = this.handleClickOutside.bind(this);
@@ -632,7 +610,6 @@ export class NvFieldmultiselect {
      */
     componentWillLoad() {
         var _a;
-        console.info('[Lifecycle] componentWillLoad - value:', this.value, 'options:', this.options);
         // Don't call handleOptionsChange if we are in slots mode
         if (this.options) {
             this.handleOptionsChange(this.options);
@@ -666,7 +643,6 @@ export class NvFieldmultiselect {
      * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
      */
     componentDidLoad() {
-        console.info('[Lifecycle] componentDidLoad - value:', this.value, 'options:', this.options);
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
@@ -682,7 +658,6 @@ export class NvFieldmultiselect {
      * Unsubscribe from click outside event.
      */
     disconnectedCallback() {
-        console.info('[Lifecycle] disconnectedCallback - value:', this.value);
         if (this._boundHandleClickOutside) {
             document.removeEventListener('click', this._boundHandleClickOutside);
         }
@@ -727,7 +702,6 @@ export class NvFieldmultiselect {
      * @returns {string[]} The selected values.
      */
     async getSelectedValues() {
-        console.info('getSelectedValues:', this.value);
         return this.value;
     }
     /**
@@ -1208,12 +1182,10 @@ export class NvFieldmultiselect {
             return;
         }
         const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-        console.info('[syncChildComponents] value:', this.value);
         items.forEach(item => {
             // Get the effective value: use explicit value if present, otherwise use label
             const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
             const shouldBeChecked = this.value.includes(itemValue);
-            console.info('[syncChildComponents] itemValue:', itemValue, 'shouldBeChecked:', shouldBeChecked, 'item.checked(before):', item.checked);
             // Only update if the checked state differs to avoid triggering unnecessary events
             if (item.checked !== shouldBeChecked) {
                 // Set attribute and property, but avoid triggering itemChecked during bulk
@@ -1232,7 +1204,6 @@ export class NvFieldmultiselect {
                     item.checked = shouldBeChecked;
                 }
             }
-            console.info('[syncChildComponents] itemValue:', itemValue, 'item.checked(after):', item.checked);
         });
     }
     /**
@@ -1330,7 +1301,6 @@ export class NvFieldmultiselect {
             .map(item => item.getAttribute('value') || item.getAttribute('label') || '');
         // Combine with current this.value (set by code), ensuring uniqueness
         this.value = Array.from(new Set([...(this.value || []), ...checkedValues]));
-        console.info('[initializeValueFromSlots] checkedValues:', checkedValues, 'combined value:', this.value);
     }
     /**
      * Renders description and error description sections