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

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

@@ -511,13 +511,12 @@ export class NvFieldmultiselect {
          * @returns {any} The JSX for options mode
          */
         this.renderOptionsMode = () => {
-            var _a, _b, _c, _d;
-            return (h(Host, { "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 && (h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0, label: `${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || 0} ${this.badgeLabel}`, "aria-label": `Clear all ${((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) || 0} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (h("input", Object.assign({ type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.getRequiredAttributes().useNativeRequired
+            return (h(Host, { "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect" }, h("slot", { name: "leading-input" }), (this.value?.length || 0) > 0 && (h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: (this.value?.length || 0) > 0, label: `${this.value?.length || 0} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value?.length || 0} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.getRequiredAttributes().useNativeRequired
                     ? this.required
-                    : undefined }, (this.getRequiredAttributes().ariaRequiredValue !==
-                undefined && {
-                'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
-            }), { disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` }))) : (h(Fragment, null, h("input", { id: this.inputId, type: "text", style: {
+                    : undefined, ...(this.getRequiredAttributes().ariaRequiredValue !==
+                    undefined && {
+                    'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
+                }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` })) : (h(Fragment, null, h("input", { id: this.inputId, type: "text", style: {
                     position: 'absolute',
                     opacity: '0',
                     width: '0',
@@ -533,13 +532,12 @@ export class NvFieldmultiselect {
          * @returns {any} The JSX for slots mode
          */
         this.renderSlotsMode = () => {
-            var _a, _b, _c, _d;
-            return (h(Host, { "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }), (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 && (h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0, label: `${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || 0} ${this.badgeLabel}`, "aria-label": `Clear all ${((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) || 0} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (h("input", Object.assign({ id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.getRequiredAttributes().useNativeRequired
+            return (h(Host, { "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { htmlFor: this.inputId }, h("slot", { name: "label" }, this.label))), h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, h("slot", { name: "before-input" }), h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, h("slot", { name: "leading-input" }), (this.value?.length || 0) > 0 && (h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: (this.value?.length || 0) > 0, label: `${this.value?.length || 0} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value?.length || 0} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.getRequiredAttributes().useNativeRequired
                     ? this.required
-                    : undefined }, (this.getRequiredAttributes().ariaRequiredValue !==
-                undefined && {
-                'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
-            }), { disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` }))) : (h(Fragment, null, h("input", { id: this.inputId, type: "text", style: {
+                    : undefined, ...(this.getRequiredAttributes().ariaRequiredValue !==
+                    undefined && {
+                    'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
+                }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` })) : (h(Fragment, null, h("input", { id: this.inputId, type: "text", style: {
                     position: 'absolute',
                     opacity: '0',
                     width: '0',
@@ -757,7 +755,6 @@ export class NvFieldmultiselect {
      * Set the mode state and handle options change.
      */
     componentWillLoad() {
-        var _a;
         // Don't call handleOptionsChange if we are in slots mode
         if (this.options) {
             this.handleOptionsChange(this.options);
@@ -778,7 +775,7 @@ export class NvFieldmultiselect {
         }
         // Initialize the sorted options array with the parsed options for initial rendering
         if (this.options) {
-            this.sortedOptions = [...((_a = this.options) !== null && _a !== void 0 ? _a : [])];
+            this.sortedOptions = [...(this.options ?? [])];
         }
         // Reset filter if needed
         if (!this.filterText) {
@@ -965,14 +962,13 @@ export class NvFieldmultiselect {
      * Uses the search engine for optimized filtering with configurable modes.
      */
     async filterItems() {
-        var _a, _b;
         const ul = this.el.querySelector('ul');
         if (!ul)
             return;
         this.effectiveFilterMode = getEffectiveFilterMode(this.filterMode);
         // Remove existing empty message and truncation message if any
-        (_a = ul.querySelector('[data-empty]')) === null || _a === void 0 ? void 0 : _a.remove();
-        (_b = ul.querySelector('[data-truncated]')) === null || _b === void 0 ? void 0 : _b.remove();
+        ul.querySelector('[data-empty]')?.remove();
+        ul.querySelector('[data-truncated]')?.remove();
         // Reset truncation state
         this.resultsTruncated = false;
         this.totalResults = 0;
@@ -1056,10 +1052,9 @@ export class NvFieldmultiselect {
      * Rebuilds the search index from current items (options prop or slot items).
      */
     async rebuildSearchIndex() {
-        var _a;
         // Build raw items array for indexing
         this.rawItems = [];
-        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) {
+        if (this.options?.length) {
             this.options.forEach((opt, index) => {
                 if (!opt.isDivider) {
                     this.rawItems.push({
@@ -1073,10 +1068,9 @@ export class NvFieldmultiselect {
             // Use slot items
             const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
             items.forEach((item, index) => {
-                var _a;
                 this.rawItems.push({
                     id: item.getAttribute('value') || `item-${index}`,
-                    label: item.getAttribute('label') || ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '',
+                    label: item.getAttribute('label') || item.textContent?.trim() || '',
                 });
             });
         }
@@ -1126,7 +1120,6 @@ export class NvFieldmultiselect {
      * @returns {Promise<SearchResult>} Resolves with the search results.
      */
     async performAdvancedSearch() {
-        var _a;
         // Ensure index is built
         if (!this.indexedItems.length) {
             await this.rebuildSearchIndex();
@@ -1134,7 +1127,7 @@ export class NvFieldmultiselect {
         const itemCount = this.rawItems.length;
         const threshold = clampWorkerThreshold(this.workerThreshold);
         const useWorker = shouldUseWorker(itemCount, this.effectiveFilterMode, threshold);
-        if (useWorker && ((_a = this.workerClient) === null || _a === void 0 ? void 0 : _a.isReady)) {
+        if (useWorker && this.workerClient?.isReady) {
             this.isSearching = true;
             try {
                 return await this.workerClient.search(this.filterText, this.effectiveFilterMode, this.maxResults, this.fuzzyThreshold);
@@ -1170,9 +1163,8 @@ export class NvFieldmultiselect {
      * @param {number} total - The total number of available items.
      */
     addTruncatedMessage(ul, shown, total) {
-        var _a;
         // Remove existing truncation message
-        (_a = ul.querySelector('[data-truncated]')) === null || _a === void 0 ? void 0 : _a.remove();
+        ul.querySelector('[data-truncated]')?.remove();
         // Get the text template: use provided text or auto-detect from locale
         const textTemplate = this.truncatedResultsText || getTruncatedResultsText(this.locale);
         const truncatedItem = document.createElement('li');