@dodlhuat/basix 1.2.0 → 1.2.2

package/js/virtual-dropdown.js

@@ -28,20 +28,20 @@ class VirtualDropdown {
         this.updateTrigger();
     }
     renderBase() {
-        this.container.innerHTML = `
-      <div class="dropdown-trigger" tabindex="0" role="button" aria-haspopup="listbox" aria-expanded="false">
-        <span class="trigger-text">${this.escapeHtml(this.placeholder)}</span>
-        <span class="trigger-arrow" aria-hidden="true">▼</span>
-      </div>
-      <div class="dropdown-menu" role="listbox">
-        ${this.searchable ? '<div class="dropdown-search"><input type="text" placeholder="Search..." aria-label="Search options"></div>' : ''}
-        <div class="dropdown-list-wrapper">
-          <div class="dropdown-list-scroller">
-            <div class="virtual-spacer"></div>
-            <div class="virtual-content"></div>
-          </div>
-        </div>
-      </div>
+        this.container.innerHTML = `
+      <div class="dropdown-trigger" tabindex="0" role="button" aria-haspopup="listbox" aria-expanded="false">
+        <span class="trigger-text">${this.escapeHtml(this.placeholder)}</span>
+        <span class="trigger-arrow" aria-hidden="true">▼</span>
+      </div>
+      <div class="dropdown-menu" role="listbox">
+        ${this.searchable ? '<div class="dropdown-search"><input type="text" placeholder="Search..." aria-label="Search options"></div>' : ''}
+        <div class="dropdown-list-wrapper">
+          <div class="dropdown-list-scroller">
+            <div class="virtual-spacer"></div>
+            <div class="virtual-content"></div>
+          </div>
+        </div>
+      </div>
     `;
         this.trigger = this.querySelector('.dropdown-trigger');
         this.triggerText = this.querySelector('.trigger-text');
@@ -144,17 +144,17 @@ class VirtualDropdown {
             .map((opt, idx) => {
             const realIdx = renderStart + idx;
             const isSelected = this.selectedValues.has(opt.value);
-            return `
-          <div class="dropdown-item ${isSelected ? 'selected' : ''}"
-               data-value="${this.escapeHtml(String(opt.value))}"
-               data-idx="${realIdx}"
-               role="option"
-               aria-selected="${isSelected}"
-               tabindex="0"
-               style="height: ${this.itemHeight}px; line-height: ${this.itemHeight}px;">
-            ${this.multiSelect ? `<input type="checkbox" ${isSelected ? 'checked' : ''} tabindex="-1" aria-hidden="true">` : ''}
-            <span class="item-label">${this.escapeHtml(opt.label)}</span>
-          </div>
+            return `
+          <div class="dropdown-item ${isSelected ? 'selected' : ''}"
+               data-value="${this.escapeHtml(String(opt.value))}"
+               data-idx="${realIdx}"
+               role="option"
+               aria-selected="${isSelected}"
+               tabindex="0"
+               style="height: ${this.itemHeight}px; line-height: ${this.itemHeight}px;">
+            ${this.multiSelect ? `<input type="checkbox" ${isSelected ? 'checked' : ''} tabindex="-1" aria-hidden="true">` : ''}
+            <span class="item-label">${this.escapeHtml(opt.label)}</span>
+          </div>
         `;
         })
             .join('');