@dile/ui 3.5.1 → 3.5.2

package/components/select/select-overlay.spec.js

@@ -1,5 +1,7 @@
 import { describe, it, expect, afterEach, vi } from 'vitest';
 import './select-overlay.js';
+import '@dile/iconlib/lucide-icons/house.js';
+import '@dile/iconlib/material-icons/star.js';
 
 describe('dile-select-overlay', () => {
   afterEach(() => {
@@ -151,6 +153,93 @@ describe('dile-select-overlay', () => {
     });
   });
 
+  describe('Icons', () => {
+    it("shows the selected option's icon on the trigger, marked aria-hidden", async () => {
+      const el = await renderSelectOverlay(`
+        <dile-select-overlay value="2">
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2" data-icon="lucide.house">Option 2</option>
+          </select>
+        </dile-select-overlay>
+      `);
+
+      const icon = el.shadowRoot.querySelector('.trigger-text dile-iconlib');
+      expect(icon).toBeTruthy();
+      expect(icon.getAttribute('icon')).toBe('lucide.house');
+      expect(icon.getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it("does not show an icon on the trigger when the selected option has none", async () => {
+      const el = await renderSelectOverlay(`
+        <dile-select-overlay value="1">
+          <select slot="select">
+            <option value="1">Option 1</option>
+            <option value="2" data-icon="lucide.house">Option 2</option>
+          </select>
+        </dile-select-overlay>
+      `);
+
+      expect(el.shadowRoot.querySelector('.trigger-text dile-iconlib')).toBeNull();
+    });
+
+    it("shows each option's icon in the listbox, keeping the option text as its accessible name", async () => {
+      const el = await renderSelectOverlay(`
+        <dile-select-overlay>
+          <select slot="select">
+            <option value="1" data-icon="lucide.house">Option 1</option>
+            <option value="2" data-icon="material.star">Option 2</option>
+            <option value="3">Option 3</option>
+          </select>
+        </dile-select-overlay>
+      `);
+
+      await open(el);
+      const items = el.shadowRoot.querySelectorAll('[role="option"]');
+      expect(items[0].querySelector('dile-iconlib').getAttribute('icon')).toBe('lucide.house');
+      expect(items[0].textContent.trim()).toBe('Option 1');
+      expect(items[1].querySelector('dile-iconlib').getAttribute('icon')).toBe('material.star');
+      expect(items[2].querySelector('dile-iconlib')).toBeNull();
+    });
+
+    it('uses data-icon on the <select> as the default icon for options that do not declare their own', async () => {
+      const el = await renderSelectOverlay(`
+        <dile-select-overlay value="2">
+          <select slot="select" data-icon="lucide.house">
+            <option value="1">Option 1</option>
+            <option value="2" data-icon="material.star">Option 2</option>
+          </select>
+        </dile-select-overlay>
+      `);
+
+      await open(el);
+      const items = el.shadowRoot.querySelectorAll('[role="option"]');
+      // Option 1 has no icon of its own, so it falls back to the select-level default.
+      expect(items[0].querySelector('dile-iconlib').getAttribute('icon')).toBe('lucide.house');
+      // Option 2 declares its own icon, which takes precedence over the select-level default.
+      expect(items[1].querySelector('dile-iconlib').getAttribute('icon')).toBe('material.star');
+      // The trigger shows the selected option's own icon too.
+      expect(el.shadowRoot.querySelector('.trigger-text dile-iconlib').getAttribute('icon')).toBe('material.star');
+    });
+
+    it('warns and skips rendering an icon that has not been imported/registered', async () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const el = await renderSelectOverlay(`
+        <dile-select-overlay>
+          <select slot="select">
+            <option value="1" data-icon="lucide.this-icon-does-not-exist">Option 1</option>
+          </select>
+        </dile-select-overlay>
+      `);
+
+      await open(el);
+      const item = el.shadowRoot.querySelector('[role="option"]');
+      expect(item.querySelector('dile-iconlib')).toBeNull();
+      expect(warnSpy).toHaveBeenCalled();
+      warnSpy.mockRestore();
+    });
+  });
+
   describe('Opening and closing', () => {
     it('opens the listbox when the trigger is clicked', async () => {
       const el = await renderSelectOverlay(`

package/components/select/src/DileSelectAjaxOverlay.js

@@ -135,6 +135,12 @@ export class DileSelectAjaxOverlay extends DileEmmitChange(LitElement) {
       resultDataProperty: { type: String },
       displayProperty: { type: String },
       idProperty: { type: String },
+      /** Property in each data object holding a dile-iconlib "family.name" icon string, applied
+       *  per option. Leave unset if you don't need per-option icons. */
+      iconProperty: { type: String },
+      /** dile-iconlib "family.name" icon string applied to every option that has no icon of its
+       *  own via iconProperty. */
+      icon: { type: String },
       delay: { type: Number },
       keyword: {
         type: String,
@@ -342,9 +348,9 @@ export class DileSelectAjaxOverlay extends DileEmmitChange(LitElement) {
           ?disabled=${this.disabled}
           @element-changed=${this.doSelected}
         >
-          <select slot="select">
+          <select slot="select" data-icon="${ifDefined(this.icon)}">
             ${this.data.map(item => html`
-              <option value="${item[this.idProperty]}">${item[this.displayProperty]}</option>
+              <option value="${item[this.idProperty]}" data-icon="${ifDefined(this.iconProperty ? item[this.iconProperty] : undefined)}">${item[this.displayProperty]}</option>
             `)}
           </select>
         </dile-select-overlay>

package/components/select/src/DileSelectOverlay.js

@@ -4,8 +4,12 @@ import { DileEmmitChange } from '../../../mixins/form/index.js';
 import { DileOverlay } from '../../../mixins/overlay/index.js';
 import { DileCloseDocumentClick } from '../../../mixins/close-document-click/index.js';
 import { labelStyles, messageStyles } from '../../input/index.js';
+import '@dile/iconlib/dile-iconlib.js';
 
 const TYPEAHEAD_RESET_DELAY = 500;
+// Mirrors DileSelectorItem's renderIconlibIcon() folder map/registration-warning convention.
+const ICONLIB_FOLDERS = { material: 'material-icons', lucide: 'lucide-icons', fontawesome: 'fontawesome-icons' };
+const warnedIcons = new Set();
 
 export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEmmitChange(LitElement))) {
   static get styles() {
@@ -69,13 +73,28 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
         pointer-events: none;
       }
       .trigger-text {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
         overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
       }
       .trigger-text.placeholder {
         color: var(--dile-input-placeholder-color, #ccc);
       }
+      .trigger-label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      .option-icon {
+        display: flex;
+        align-items: center;
+        flex: none;
+      }
+      .option-icon dile-iconlib {
+        --dile-icon-size: var(--dile-select-overlay-option-icon-size, 16px);
+        --dile-icon-color: var(--dile-select-overlay-option-icon-color, currentColor);
+      }
       .arrow-icon {
         width: 18px;
         height: 18px;
@@ -115,6 +134,9 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
         transform: translateY(0);
       }
       .option {
+        display: flex;
+        align-items: center;
+        gap: 0.4rem;
         padding: var(--dile-select-overlay-option-padding, 7px 10px);
         cursor: pointer;
         color: var(--dile-select-overlay-color, #303030);
@@ -193,7 +215,7 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
 
   get options() {
     return this.elselect
-      ? Array.from(this.elselect.options).map(o => ({ value: o.value, text: o.textContent }))
+      ? Array.from(this.elselect.options).map(o => ({ value: o.value, text: o.textContent, icon: o.dataset.icon || this.elselect.dataset.icon }))
       : [];
   }
 
@@ -319,7 +341,10 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
         @click="${this._onTriggerClick}"
         @keydown="${this.handleExternalKeydown}"
       >
-        <span class="trigger-text ${selected ? '' : 'placeholder'}">${selected ? selected.text : this.placeholder}</span>
+        <span class="trigger-text ${selected ? '' : 'placeholder'}">
+          ${selected && selected.icon ? html`<span class="option-icon">${this.renderIconlibIcon(selected.icon)}</span>` : ''}
+          <span class="trigger-label">${selected ? selected.text : this.placeholder}</span>
+        </span>
         <span class="arrow-icon" aria-hidden="true">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 448" enable-background="new 0 0 256 448">
             <path d="M255.9 168c0-4.2-1.6-7.9-4.8-11.2-3.2-3.2-6.9-4.8-11.2-4.8H16c-4.2 0-7.9 1.6-11.2 4.8S0 163.8 0 168c0 4.4 1.6 8.2 4.8 11.4l112 112c3.1 3.1 6.8 4.6 11.2 4.6 4.4 0 8.2-1.5 11.4-4.6l112-112c3-3.2 4.5-7 4.5-11.4z"></path>
@@ -341,12 +366,32 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
             aria-selected="${opt.value === (this.value ?? '')}"
             @click="${() => this.selectOption(index)}"
             @mousemove="${() => this._setActiveIndex(index, false)}"
-          >${opt.text}</li>
+          >${opt.icon ? html`<span class="option-icon">${this.renderIconlibIcon(opt.icon)}</span>` : ''}${opt.text}</li>
         `)}
       </ul>
     `;
   }
 
+  renderIconlibIcon(icon) {
+    const dotIndex = icon.indexOf('.');
+    if (dotIndex === -1) {
+      return html`<dile-iconlib icon="${icon}" aria-hidden="true"></dile-iconlib>`;
+    }
+    const family = icon.slice(0, dotIndex);
+    const name = icon.slice(dotIndex + 1);
+    const tagName = `dile-${family}-icon-${name}`;
+    if (customElements.get(tagName)) {
+      return html`<dile-iconlib icon="${icon}" aria-hidden="true"></dile-iconlib>`;
+    }
+    if (!warnedIcons.has(icon)) {
+      warnedIcons.add(icon);
+      const folder = ICONLIB_FOLDERS[family] || family;
+      console.warn(`dile-select-overlay: icon "${icon}" is not registered. Import "@dile/iconlib/${folder}/${name}.js" before using it.`);
+    }
+    customElements.whenDefined(tagName).then(() => this.requestUpdate());
+    return '';
+  }
+
   _optionId(index) {
     return `${this.selectId}-option-${index}`;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.5.1",
+  "version": "3.5.2",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7bcf203fb23acc24867e9f3df4f3ca2367eabd97"
+  "gitHead": "352830a2d1bd846bd07ffc0084df32dc3f8bac83"
 }