@dile/ui 3.19.0 → 3.19.2

package/components/floating-menu/src/DileFloatingMenu.js

@@ -243,12 +243,7 @@ export class DileFloatingMenu extends DileOverlay(DileCloseOnEscPressed(LitEleme
     }
 
     _hideOverlay() {
-        // Closed during the opening delay of DileOverlay, where its close() would be ignored.
-        if (this._opening) {
-            this.cancelDelay();
-            this._opening = false;
-            this._overlayClass = 'opened';
-        }
+        // DileOverlay's close() also cancels an opening still in its delay.
         super.close();
     }
 

package/components/input/src/DileInput.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { DileEmmitChange } from '../../../mixins/form/index.js';
 import { labelStyles } from './label-styles.js';
 import { messageStyles } from './message-styles.js';
@@ -22,6 +23,9 @@ export class DileInput extends DileEmmitChange(LitElement) {
           /** Label to the element */
           label: { type: String },
 
+          /** Accessible name of the input, applied as aria-label only when there is no visible label */
+          accessibleLabel: { type: String },
+
           /** Input type */
           type: { type: String },
 
@@ -166,6 +170,7 @@ export class DileInput extends DileEmmitChange(LitElement) {
                 type="${this.availableType(this.type)}"
                 id="textField"
                 name="${this.name}"
+                aria-label="${ifDefined(this.inputAriaLabel)}"
                 placeholder="${this.placeholder}"
                 ?disabled="${this.disabled}"
                 ?readonly="${this.readonly}"
@@ -187,6 +192,11 @@ export class DileInput extends DileEmmitChange(LitElement) {
         `;
     }
 
+    /** aria-label for the inner input: accessibleLabel, only when there is no visible label */
+    get inputAriaLabel() {
+      return !this.label && this.accessibleLabel ? this.accessibleLabel : undefined;
+    }
+
     get messageTemplate() {
       return html`
         ${this.message

package/components/input/src/DileInputContact.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { DileInput } from '../../input/index.js';
 
 export class DileInputContact extends DileInput {
@@ -48,6 +49,7 @@ export class DileInputContact extends DileInput {
                 type="${this.availableType(this.type)}"
                 id="textField"
                 name="${this.name}"
+                aria-label="${ifDefined(this.inputAriaLabel)}"
                 placeholder="${this.placeholder}"
                 ?disabled="${this.disabled}"
                 ?readonly="${this.readonly}"

package/components/input/src/DileInputIcon.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { DileInput } from '../../input/index.js';
 import '@dile/iconlib/dile-iconlib.js';
 import '@dile/ui/components/tooltip/tooltip.js';
@@ -100,6 +101,7 @@ export class DileInputIcon extends DileInput {
         type="${this.availableType(this.type)}"
         id="textField"
         name="${this.name}"
+        aria-label="${ifDefined(this.inputAriaLabel)}"
         placeholder="${this.placeholder}"
         ?disabled="${this.disabled}"
         ?readonly="${this.readonly}"

package/components/select/src/DileSelect.js

@@ -97,6 +97,8 @@ export class DileSelect extends DileEmmitChange(LitElement) {
   static get properties() {
     return {
       label: { type: String },
+      /** Accessible name of the slotted select when there is no visible label. With label, the label text is used */
+      accessibleLabel: { type: String },
       value: { type: String },
       name: { type: String, reflect: true },
       disabled: { type: Boolean },
@@ -114,7 +116,7 @@ export class DileSelect extends DileEmmitChange(LitElement) {
     return html`
       <div>
         ${this.label
-          ? html`<label for="${this.selectId}">${this.label}</label>`
+          ? html`<label for="${this.selectId}" @click="${this._focusSelect}">${this.label}</label>`
           : ""
         }
         <div class="select-wrapper">
@@ -159,6 +161,11 @@ export class DileSelect extends DileEmmitChange(LitElement) {
       if (!this.elselect.id) {
         this.elselect.id = this.selectId;
       }
+      // aria-label / aria-description set by the author on the slotted select always win
+      if (this._authorAriaLabel === undefined) {
+        this._authorAriaLabel = this.elselect.hasAttribute("aria-label");
+        this._authorAriaDescription = this.elselect.hasAttribute("aria-description");
+      }
       this.elselect.addEventListener("change", this.changeHandler);
       this.updateSelectA11y();
     }
@@ -194,7 +201,8 @@ export class DileSelect extends DileEmmitChange(LitElement) {
       this.elselect.classList.toggle("disabled", this.disabled);
       this.elselect.setAttribute("aria-disabled", this.disabled);
     }
-    if(changedProperties.has("errored") || changedProperties.has("message")) {
+    if(changedProperties.has("errored") || changedProperties.has("message")
+      || changedProperties.has("label") || changedProperties.has("accessibleLabel")) {
       this.updateSelectA11y();
     }
   }
@@ -205,18 +213,39 @@ export class DileSelect extends DileEmmitChange(LitElement) {
     // Set aria-invalid when errored
     this.elselect.setAttribute("aria-invalid", this.errored);
     
-    // Set aria-describedby when message exists
-    const messageId = this.message ? `${this.selectId}-message` : null;
-    if (messageId) {
-      this.elselect.setAttribute("aria-describedby", messageId);
-    } else {
-      this.elselect.removeAttribute("aria-describedby");
+    // The message lives in the shadow DOM and the select in the light DOM, so an
+    // aria-describedby id reference cannot cross the boundary: use aria-description.
+    // aria-describedby is left to the author (e.g. help text in the light DOM).
+    if (!this._authorAriaDescription) {
+      if (this.message) {
+        this.elselect.setAttribute("aria-description", this.message);
+      } else {
+        this.elselect.removeAttribute("aria-description");
+      }
     }
     
+    // Accessible name. The <label for> lives in the shadow DOM and the select in the
+    // light DOM, so "for" cannot cross the boundary: name the select via aria-label.
+    if (!this._authorAriaLabel) {
+      const accessibleName = this.label || this.accessibleLabel;
+      if (accessibleName) {
+        this.elselect.setAttribute("aria-label", accessibleName);
+      } else {
+        this.elselect.removeAttribute("aria-label");
+      }
+    }
+
     // Update visual state
     this.elselect.classList.toggle("errored", this.errored);
   }
 
+  // <label for> cannot reach the slotted select, so replicate the native label click
+  _focusSelect() {
+    if (this.elselect && !this.disabled) {
+      this.elselect.focus();
+    }
+  }
+
   firstUpdated() {
     this.quiet = this.quietOnStart;
     if(this.value) {

package/components/select/src/DileSelectOverlay.js

@@ -150,6 +150,11 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
       .option[aria-selected="true"] {
         font-weight: var(--dile-select-overlay-selected-font-weight, 600);
       }
+      .option-content {
+        display: block;
+        flex: 1 1 auto;
+        min-width: 0;
+      }
       @media (forced-colors: active) {
         #trigger {
           border-width: var(--dile-input-border-width, 1px);
@@ -172,6 +177,8 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
   static get properties() {
     return {
       label: { type: String },
+      /** Accessible name of the combobox trigger and the listbox, applied as aria-label only when there is no visible label */
+      accessibleLabel: { type: String },
       value: { type: String },
       name: { type: String, reflect: true },
       disabled: { type: Boolean },
@@ -185,6 +192,12 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
       /** Suppresses the visible trigger box, letting a parent component drive open()/close()
        *  and forward keyboard events via handleExternalKeydown() while supplying its own visible control. */
       hideTrigger: { type: Boolean, reflect: true },
+      /** Optional custom renderer for the content of each option in the popup:
+       *  `(option, index) => TemplateResult | string`, where `option` is `{ value, text, icon, element }`
+       *  and `element` is the native <option> (useful to read its dataset). The <li role="option">
+       *  itself (ids, aria-selected, highlight, click) is still managed by the component, and the
+       *  trigger, typeahead, accessible name and highlightedText keep using the plain option text. */
+      optionRenderer: { attribute: false },
       _activeIndex: { state: true },
       /** Display text of the currently highlighted option, readable by an external composer. */
       highlightedText: { state: true },
@@ -218,7 +231,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, icon: o.dataset.icon || this.elselect.dataset.icon }))
+      ? Array.from(this.elselect.options).map(o => ({ value: o.value, text: o.textContent, icon: o.dataset.icon || this.elselect.dataset.icon, element: o }))
       : [];
   }
 
@@ -325,6 +338,11 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
     `;
   }
 
+  /** aria-label for the trigger and the listbox: accessibleLabel, only when there is no visible label */
+  get controlAriaLabel() {
+    return !this.label && this.accessibleLabel ? this.accessibleLabel : undefined;
+  }
+
   get triggerTemplate() {
     const selected = this.selectedOption;
     return html`
@@ -332,6 +350,7 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
         type="button"
         id="trigger"
         role="combobox"
+        aria-label="${ifDefined(this.controlAriaLabel)}"
         aria-haspopup="listbox"
         aria-expanded="${this.opened}"
         aria-controls="overlay"
@@ -360,21 +379,36 @@ export class DileSelectOverlay extends DileOverlay(DileCloseDocumentClick(DileEm
   get overlayTemplate() {
     const options = this.options;
     return html`
-      <ul id="overlay" class="${this._overlayClass}" role="listbox">
-        ${options.map((opt, index) => html`
+      <ul id="overlay" class="${this._overlayClass}" role="listbox" aria-label="${ifDefined(this.controlAriaLabel)}">
+        ${options.map((opt, index) => {
+          const highlighted = index === this._activeIndex;
+          const selected = opt.value === (this.value ?? '');
+          const parts = ['option', highlighted ? 'option-highlighted' : '', selected ? 'option-selected' : ''].filter(Boolean).join(' ');
+          return html`
           <li
             id="${this._optionId(index)}"
             role="option"
-            class="option ${index === this._activeIndex ? 'highlighted' : ''}"
-            aria-selected="${opt.value === (this.value ?? '')}"
+            part="${parts}"
+            class="option ${highlighted ? 'highlighted' : ''}"
+            aria-selected="${selected}"
+            aria-label="${ifDefined(this.optionRenderer ? opt.text.trim() : undefined)}"
             @click="${() => this.selectOption(index)}"
             @mousemove="${() => this._setActiveIndex(index, false)}"
-          >${opt.icon ? html`<span class="option-icon">${this.renderIconlibIcon(opt.icon)}</span>` : ''}${opt.text}</li>
-        `)}
+          >${this.optionContentTemplate(opt, index)}</li>
+        `;
+        })}
       </ul>
     `;
   }
 
+  /** Content of each <li role="option">: optionRenderer's output when set, icon + text otherwise. */
+  optionContentTemplate(opt, index) {
+    if (typeof this.optionRenderer === 'function') {
+      return html`<span class="option-content" part="option-content">${this.optionRenderer(opt, index)}</span>`;
+    }
+    return html`${opt.icon ? html`<span class="option-icon">${this.renderIconlibIcon(opt.icon)}</span>` : ''}${opt.text}`;
+  }
+
   renderIconlibIcon(icon) {
     const dotIndex = icon.indexOf('.');
     if (dotIndex === -1) {

package/components/select/src/DileSelectSearch.js

@@ -65,6 +65,8 @@ export class DileSelectSearch extends DileSelectSearchableBase {
       value: option.value,
       text: option.textContent.trim(),
       icon: option.dataset.icon || select.dataset.icon,
+      // The native <option>, so an optionRenderer can read its dataset.
+      element: option,
     }));
   }
 
@@ -91,7 +93,7 @@ export class DileSelectSearch extends DileSelectSearchableBase {
    * Template method: decide whether an option matches the keyword.
    * By default it searches the keyword anywhere in the option text, ignoring case and accents.
    * Override it in a subclass to customize the search (e.g. also match option.value).
-   * @param {{value: string, text: string, icon: string}} option
+   * @param {{value: string, text: string, icon: string, element: HTMLOptionElement}} option
    * @param {string} keyword
    * @returns {boolean}
    */

package/components/select/src/DileSelectSearchableBase.js

@@ -11,6 +11,8 @@ import { labelStyles } from '../../input/src/label-styles.js';
 import { messageStyles } from '../../input/src/message-styles.js';
 
 const NAVIGATION_KEYS = ['ArrowDown', 'ArrowUp', 'Home', 'End', 'Enter', 'Escape', 'Tab'];
+// Parts of the nested dile-select-overlay re-exported to this component's host.
+const OPTION_PARTS = ['option', 'option-highlighted', 'option-selected', 'option-content'];
 
 /**
  * Base class for the searchable members of the select family (dile-select-ajax-overlay,
@@ -158,6 +160,13 @@ export class DileSelectSearchableBase extends DileEmmitChange(LitElement) {
       /** dile-iconlib "family.name" icon string applied to every option that has no icon of its
        *  own via iconProperty. */
       icon: { type: String },
+      /** Optional custom renderer for the content of each result: `(item, index) => TemplateResult | string`,
+       *  receiving the original data object. The displayProperty text is still used for the accessible
+       *  name, the keyboard announcements and the selected text. */
+      optionRenderer: { attribute: false },
+      /** Space or comma separated extra part names used inside optionRenderer templates, re-exported
+       *  from the nested dile-select-overlay so they can be styled with ::part() from outside. */
+      optionParts: { type: String },
       delay: { type: Number },
       keyword: {
         type: String,
@@ -382,6 +391,8 @@ export class DileSelectSearchableBase extends DileEmmitChange(LitElement) {
           name="generated-select-field"
           placeholder="${this.placeholder}"
           ?disabled=${this.disabled}
+          exportparts="${this.exportedOptionParts}"
+          .optionRenderer=${this.nestedOptionRenderer}
           @element-changed=${this.doSelected}
         >
           <select slot="select" data-icon="${ifDefined(this.icon)}">
@@ -393,6 +404,39 @@ export class DileSelectSearchableBase extends DileEmmitChange(LitElement) {
     `;
   }
 
+  /** exportparts value for the nested dile-select-overlay: built-in option parts plus optionParts. */
+  get exportedOptionParts() {
+    const extra = (this.optionParts || '').split(/[\s,]+/).filter(Boolean);
+    return [...new Set([...OPTION_PARTS, ...extra])].join(', ');
+  }
+
+  /** Adapts optionRenderer (which receives data items) to the nested overlay's (option, index) signature.
+   *  Cached per optionRenderer so the nested component doesn't see a new function on every render. */
+  get nestedOptionRenderer() {
+    if (typeof this.optionRenderer !== 'function') {
+      return undefined;
+    }
+    if (this._nestedRendererFor !== this.optionRenderer) {
+      const renderer = this.optionRenderer;
+      this._nestedRendererFor = renderer;
+      this._nestedRenderer = (option, index) => {
+        const item = this.findItemForOption(option, index);
+        return item === undefined ? option.text : renderer(item, index);
+      };
+    }
+    return this._nestedRenderer;
+  }
+
+  /** Data item behind an option of the nested overlay: by index (options are generated from
+   *  `data` in order), checked against idProperty, falling back to a search by idProperty. */
+  findItemForOption(option, index) {
+    const byIndex = this.data[index];
+    if (byIndex && String(byIndex[this.idProperty]) === option.value) {
+      return byIndex;
+    }
+    return this.data.find(item => String(item[this.idProperty]) === option.value);
+  }
+
   get messageTemplate() {
     return html`
       ${this.message

package/mixins/close-document-click/src/DileCloseDocumentClick.js

@@ -28,7 +28,7 @@ export const DileCloseDocumentClick = (SuperClass) =>
           DileCloseDocumentClick.closeDocumentHandler = () => {
             if(DileCloseDocumentClick.elements) {
               for (let ele of DileCloseDocumentClick.elements) {
-                ele.close();
+                ele.closeFromDocumentClick();
               }
             }
           };
@@ -70,6 +70,15 @@ export const DileCloseDocumentClick = (SuperClass) =>
       });
     }
 
+    /**
+     * Close requested by a click in the document. Calls close() by default.
+     * Override it to ignore these closes in some states, as DileOverlay does
+     * while the overlay is opening.
+     */
+    closeFromDocumentClick() {
+      this.close();
+    }
+
     /**
      * This method only alerts the developer to create the close() method in his component
      */

package/mixins/form/src/DileForm.js

@@ -69,7 +69,9 @@ export const DileForm = (superclass) => class extends superclass {
             node.value = value;
           }
         }
-      } else if (!isArray && adaptedData[fieldName] !== undefined && adaptedData[fieldName] !== null) {
+      } else if (!isArray && adaptedData[fieldName] === null) {
+        this._clearNode(node);
+      } else if (!isArray && adaptedData[fieldName] !== undefined) {
         if (typeof node.set === "function") {
           node.set(adaptedData[fieldName]);
         } else {
@@ -80,13 +82,15 @@ export const DileForm = (superclass) => class extends superclass {
   }
 
   clearData() {
-    this.allNodeElements.forEach(node => {
-      if (typeof node.clear === "function") {
-        node.clear();
-      } else {
-        node.value = '';
-      }
-    });
+    this.allNodeElements.forEach(node => this._clearNode(node));
+  }
+
+  _clearNode(node) {
+    if (typeof node.clear === "function") {
+      node.clear();
+    } else {
+      node.value = '';
+    }
   }
 
   get allNodeElements() {
@@ -143,11 +147,7 @@ export const DileForm = (superclass) => class extends superclass {
   clearField(name) {
     const node = this.getNodeElement(name);
     if (node) {
-      if (typeof node.clear === "function") {
-        node.clear();
-      } else {
-        node.value = '';
-      }
+      this._clearNode(node);
     }
   }
 

package/mixins/overlay/src/DileOverlay.js

@@ -80,35 +80,63 @@ export const DileOverlay = function(superClass) {
     }
     /**
     * closes the overlay
+    *
+    * An explicit close() while the overlay is still opening (the 50ms delay of open())
+    * cancels the opening, so the overlay ends up closed.
     */
     close() {
-      if(!this._opening && this._overlayClass=='opened') {
+      if(this._opening) {
+        this.cancelDelay();
+        this._opening = false;
+        this._overlayClass = '';
+        this.overlay.style.display = 'none';
+        this._dispatchClosed();
+      } else if(this._overlayClass=='opened') {
         this._overlayClass = '';
         this._removePositionListeners();
         this.cancelDelay();
         this.delayId = setTimeout(() => {
           this.overlay.style.display = 'none'
         }, 500);
-        this.dispatchEvent(new CustomEvent('overlay-closed', {
+        this._dispatchClosed();
+      }
+    }
+    /**
+    * Close requested by a document click (DileCloseDocumentClick). It is ignored while
+    * the overlay is opening, because the same click that opens the overlay bubbles up
+    * to the document.
+    */
+    closeFromDocumentClick() {
+      if(!this._opening) {
+        this.close();
+      }
+    }
+    _dispatchClosed() {
+      this.dispatchEvent(new CustomEvent('overlay-closed', {
         bubbles: true,
         composed: true,
       }));
-      }
     }
     /**
     * opens the overlay
+    *
+    * overlay-opened is only dispatched when the overlay was closed, so every
+    * overlay-opened is paired with one overlay-closed.
     */
     open() {
-      this.dispatchEvent(new CustomEvent('overlay-opened', {
-        bubbles: true,
-        composed: true,
-      }));
+      if(!this._opening && this._overlayClass != 'opened') {
+        this.dispatchEvent(new CustomEvent('overlay-opened', {
+          bubbles: true,
+          composed: true,
+        }));
+      }
       if(!this._opening) {
         this._opening = true;
         this.updatePosition();
-        if(this.closeAll) {
-          this.closeAll();
-        };
+        // Close the other overlays, even if they are still opening.
+        if(this.closeOthers) {
+          this.closeOthers();
+        }
         this.overlay.style.display = 'block';
         this.cancelDelay();
         this.delayId = setTimeout(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.19.0",
+  "version": "3.19.2",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7cf15a5a6e19765b52bebf5902646c8b5e2e67f0"
+  "gitHead": "545b8f87465a4567904c577699562f3c5f676e68"
 }