@dile/ui 2.26.0 → 2.27.1

package/components/button/button.spec.js

@@ -0,0 +1,48 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './button.js';
+
+describe('dile-button', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderButton(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-button');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted content inside a native button', async () => {
+    const el = await renderButton('<dile-button>Click me</dile-button>');
+
+    expect(el.shadowRoot.querySelector('button')).toBeTruthy();
+    expect(el.textContent.trim()).toBe('Click me');
+  });
+
+  it('reflects the disabled property onto the native button', async () => {
+    const el = await renderButton('<dile-button disabled>Click me</dile-button>');
+
+    expect(el.shadowRoot.querySelector('button').disabled).toBe(true);
+  });
+
+  it('dispatches a click event when enabled', async () => {
+    const el = await renderButton('<dile-button>Click me</dile-button>');
+    let clicked = false;
+    el.addEventListener('click', () => { clicked = true; });
+
+    el.shadowRoot.querySelector('button').click();
+
+    expect(clicked).toBe(true);
+  });
+
+  it('shows a spinner icon while loading', async () => {
+    const el = await renderButton('<dile-button>Save</dile-button>');
+    expect(el.shadowRoot.querySelector('dile-spinner-icon')).toBeNull();
+
+    el.loading = true;
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('dile-spinner-icon')).toBeTruthy();
+  });
+});

package/components/otp-input/index.js

@@ -0,0 +1 @@
+export { DileOtpInput } from './src/DileOtpInput.js';

package/components/otp-input/otp-input.js

@@ -0,0 +1,3 @@
+import { DileOtpInput } from './src/DileOtpInput.js';
+
+window.customElements.define('dile-otp-input', DileOtpInput);

package/components/otp-input/src/DileOtpInput.js

@@ -0,0 +1,326 @@
+import { LitElement, html, css } from 'lit';
+import { DileEmmitChange } from '../../../mixins/form/index.js';
+import { messageStyles } from '../../input/index.js';
+import { sanitizeOtpValue } from '../../../lib/otp/sanitizeOtpValue.js';
+
+export class DileOtpInput extends DileEmmitChange(LitElement) {
+
+  /**
+   * Fired when user press enter key.
+   *
+   * @event enter-pressed
+   */
+
+  /**
+   * Fired when value changes, alongside the generic `element-changed` event.
+   *
+   * @event dile-otp-input-changed
+   */
+
+  /**
+   * Fired once, when the last empty box has just been filled and the code is complete.
+   *
+   * @event dile-otp-input-completed
+   */
+
+  static get properties() {
+    return {
+      /** Label to the element */
+      label: { type: String },
+
+      /** Number of characters (boxes) of the code */
+      length: { type: Number },
+
+      /** Set initial value to the input. This property syncs to each box value */
+      value: { type: String },
+
+      /** Name for this input field */
+      name: { type: String },
+
+      /** Disable the input field */
+      disabled: { type: Boolean },
+
+      /** ReadOnly attribute */
+      readonly: { type: Boolean },
+
+      /** Has error on this input field */
+      errored: { type: Boolean },
+
+      /** Message Displayed */
+      message: { type: String },
+
+      /** Hide errors on input */
+      hideErrorOnInput: { type: Boolean },
+
+      /** Set the application focus to this the input component after the initialization */
+      focusOnStart: { type: Boolean },
+    };
+  }
+
+  static get formAssociated() {
+    return true;
+  }
+
+  constructor() {
+    super();
+    this.label = '';
+    this.value = '';
+    this.name = '';
+    this.length = 6;
+    this.disabled = false;
+    this.internals = this.attachInternals();
+  }
+
+  firstUpdated() {
+    if (this.focusOnStart) {
+      this.focus();
+    }
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('value')) {
+      this.emmitChange();
+      this.internals.setFormValue(this.value);
+      this.dispatchEvent(new CustomEvent('dile-otp-input-changed', {
+        bubbles: true,
+        composed: true,
+        detail: {
+          name: this.name,
+          value: this.value
+        }
+      }));
+
+      const previousValue = changedProperties.get('value') || '';
+      if (this.value.length === this.length && previousValue.length !== this.length) {
+        this.dispatchEvent(new CustomEvent('dile-otp-input-completed', {
+          bubbles: true,
+          composed: true,
+          detail: {
+            name: this.name,
+            value: this.value
+          }
+        }));
+      }
+    }
+  }
+
+  static get styles() {
+    return [
+      messageStyles,
+      css`
+        * {
+          box-sizing: border-box;
+        }
+        :host {
+          display: block;
+          margin-bottom: 10px;
+        }
+        main {
+          width: var(--dile-otp-input-section-width, auto);
+        }
+        label {
+          display: block;
+          margin-bottom: var(--dile-otp-input-label-margin-bottom, 4px);
+          font-size: var(--dile-otp-input-label-font-size, 1em);
+          color: var(--dile-otp-input-label-color, #59e);
+          font-weight: var(--dile-otp-input-label-font-weight, normal);
+        }
+        section.for-input {
+          display: flex;
+          gap: var(--dile-otp-input-gap, 8px);
+        }
+        input {
+          box-sizing: border-box;
+          width: var(--dile-otp-input-box-size, 2.5em);
+          height: var(--dile-otp-input-box-size, 2.5em);
+          padding: 0;
+          text-align: center;
+          border-radius: var(--dile-otp-input-border-radius, 5px);
+          border: var(--dile-otp-input-border-width, 1px) solid var(--dile-otp-input-border-color, #888);
+          font-size: var(--dile-otp-input-font-size, 1.25em);
+          background-color: var(--dile-otp-input-background-color, #fff);
+          color: var(--dile-otp-input-color, #303030);
+        }
+        input:focus {
+          outline: none;
+          border-color: var(--dile-otp-input-focus-border-color, #6af);
+        }
+        input:disabled {
+          background-color: #f5f5f5;
+          border-color: var(--dile-otp-input-disabled-border-color, #eee);
+        }
+        .errored {
+          border-color: var(--dile-otp-input-error-border-color, #c00);
+          background-color: var(--dile-otp-input-error-background-color, var(--dile-otp-input-background-color, #fff));
+        }
+      `
+    ];
+  }
+
+  render() {
+    return html`
+      <main>
+        ${this.label
+          ? html`<label>${this.label}</label>`
+          : ''}
+        <section class="for-input">
+          ${this.boxesChars.map((char, index) => html`
+            <input
+              type="text"
+              inputmode="numeric"
+              pattern="[0-9]*"
+              maxlength="1"
+              autocomplete="${index === 0 ? 'one-time-code' : 'off'}"
+              ?disabled="${this.disabled}"
+              ?readonly="${this.readonly}"
+              .value="${char}"
+              class="${this.errored ? 'errored' : ''}"
+              @input="${(e) => this._onInput(e, index)}"
+              @keydown="${(e) => this._onKeydown(e, index)}"
+              @keypress="${this._lookForEnter}"
+              @paste="${(e) => this._onPaste(e)}"
+              @focus="${this._onFocus}"
+            />
+          `)}
+        </section>
+        ${this.messageTemplate}
+      </main>
+    `;
+  }
+
+  get messageTemplate() {
+    return html`
+      ${this.message
+        ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
+        : ''
+      }
+    `;
+  }
+
+  /**
+   * The current value split into one character per box, padded with empty strings.
+   */
+  get boxesChars() {
+    return Array.from({ length: this.length }, (_, index) => this.value.charAt(index));
+  }
+
+  /**
+   * The rendered box input elements, in order.
+   */
+  get boxes() {
+    return Array.from(this.shadowRoot.querySelectorAll('input'));
+  }
+
+  _setChar(index, char) {
+    const chars = this.boxesChars;
+    chars[index] = char;
+    this.value = chars.join('');
+  }
+
+  _onInput(e, index) {
+    const raw = e.target.value;
+
+    // Autofill (e.g. iOS/Android SMS autofill) can drop the whole code into a single box
+    if (raw.length > 1) {
+      const digits = sanitizeOtpValue(raw, this.length);
+      if (digits) {
+        if (this.hideErrorOnInput && this.errored) {
+          this.clearError();
+        }
+        this.value = digits;
+        this._focusBox(Math.min(digits.length, this.length - 1));
+      } else {
+        e.target.value = this.boxesChars[index];
+      }
+      return;
+    }
+
+    const digit = raw.replace(/\D/g, '');
+    if (!digit && raw !== '') {
+      e.target.value = this.boxesChars[index];
+      return;
+    }
+
+    if (this.hideErrorOnInput && this.errored) {
+      this.clearError();
+    }
+
+    this._setChar(index, digit);
+
+    if (digit && index < this.length - 1) {
+      this._focusBox(index + 1);
+    }
+  }
+
+  _onKeydown(e, index) {
+    if (e.key === 'Backspace' && !this.boxesChars[index] && index > 0) {
+      e.preventDefault();
+      this._focusBox(index - 1);
+      return;
+    }
+    if (e.key === 'ArrowLeft' && index > 0) {
+      e.preventDefault();
+      this._focusBox(index - 1);
+      return;
+    }
+    if (e.key === 'ArrowRight' && index < this.length - 1) {
+      e.preventDefault();
+      this._focusBox(index + 1);
+      return;
+    }
+    if (e.key.length === 1 && !/[0-9]/.test(e.key) && !e.ctrlKey && !e.metaKey) {
+      e.preventDefault();
+    }
+  }
+
+  _onPaste(e) {
+    e.preventDefault();
+    const pasted = (e.clipboardData || window.clipboardData).getData('text');
+    const digits = sanitizeOtpValue(pasted, this.length);
+    if (!digits) {
+      return;
+    }
+    if (this.hideErrorOnInput && this.errored) {
+      this.clearError();
+    }
+    this.value = digits;
+    this._focusBox(Math.min(digits.length, this.length - 1));
+  }
+
+  _onFocus(e) {
+    e.target.select();
+  }
+
+  _focusBox(index) {
+    const input = this.boxes[index];
+    if (input) {
+      input.focus();
+      input.select();
+    }
+  }
+
+  /**
+   * Private method to dispatch events on enter key pressed
+   */
+  _lookForEnter(e) {
+    let keycode = (e.keyCode ? e.keyCode : e.which);
+    if (keycode == '13') {
+      this.dispatchEvent(new CustomEvent('enter-pressed'));
+    }
+  }
+
+  clearError() {
+    this.errored = false;
+    this.message = '';
+  }
+
+  focus() {
+    const emptyIndex = this.boxesChars.findIndex((char) => !char);
+    this._focusBox(emptyIndex === -1 ? this.length - 1 : emptyIndex);
+  }
+
+  clear() {
+    this.value = '';
+    this.focus();
+  }
+}

package/components/toast/src/DileToast.js

@@ -1,4 +1,5 @@
 import { LitElement, html, css } from "lit";
+import { repeat } from "lit/directives/repeat.js";
 
 export class DileToast extends LitElement {
   static get properties() {
@@ -7,6 +8,8 @@ export class DileToast extends LitElement {
       messages: { type: Array },
       /* Miliseconds the feedback message remains on the screen */
       duration: { type: Number },
+      /* If true, shows a close icon on each toast so the user can dismiss it manually */
+      showCloseIcon: { type: Boolean },
     };
   }
 
@@ -15,6 +18,8 @@ export class DileToast extends LitElement {
     this.messages = [];
     this.duration = 3000;
     this.cleanTimeout = false;
+    this.showCloseIcon = false;
+    this._messageId = 0;
   }
 
   static get styles() {
@@ -31,11 +36,15 @@ export class DileToast extends LitElement {
 
   render() {
     return html`
-      ${this.messages.map(
+      ${repeat(
+        this.messages,
+        (msg) => msg.id,
         (msg) => html`
           <dile-toast-item
             .msg="${msg}"
+            .showCloseIcon="${this.showCloseIcon}"
             duration="${this.duration}"
+            @dile-toast-item-closed="${(e) => this._closeMessage(e.detail.id)}"
           ></dile-toast-item>
         `
       )}
@@ -51,6 +60,7 @@ export class DileToast extends LitElement {
     this.messages = [
       ...this.messages,
       {
+        id: ++this._messageId,
         text,
         toastType,
         hidden: false,
@@ -61,6 +71,27 @@ export class DileToast extends LitElement {
     this._programMessageHide();
   }
 
+  /**
+   * Closes a specific message before its automatic duration elapses, triggered by the user
+   */
+  _closeMessage(id) {
+    const message = this.messages.find((item) => item.id === id);
+    if (!message || message.hidden) return;
+    this.messages = this.messages.map((item) =>
+      item.id === id ? { ...item, hidden: true } : item
+    );
+    setTimeout(() => {
+      this.messages = this.messages.filter((item) => item.id !== id);
+    }, 500);
+    this.dispatchEvent(
+      new CustomEvent("dile-toast-closed-by-user", {
+        bubbles: true,
+        composed: true,
+        detail: { message },
+      })
+    );
+  }
+
   /**
    * Programs the hiding of the last message, after it's duration time
    */

package/components/toast/src/DileToastItem.js

@@ -1,9 +1,12 @@
 import { LitElement, html, css } from "lit";
+import { clearIcon } from "@dile/icons/index.js";
+import "../../icon/icon.js";
 
 export class DileToastItem extends LitElement {
   static get properties() {
     return {
       msg: { type: Object },
+      showCloseIcon: { type: Boolean },
     };
   }
 
@@ -15,6 +18,7 @@ export class DileToastItem extends LitElement {
       hidden: false,
       opening: true,
     };
+    this.showCloseIcon = false;
   }
 
   static get styles() {
@@ -26,6 +30,9 @@ export class DileToastItem extends LitElement {
         display: block;
       }
       div {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         color: var(--dile-toast-text-color, #fff);
         padding: var(--dile-toast-padding, 10px 15px);
         margin-top: 10px;
@@ -40,6 +47,16 @@ export class DileToastItem extends LitElement {
         font-weight: var(--dile-toast-font-weight, normal);
         border-radius: var(--dile-toast-border-radius, 0);
       }
+      .text {
+        flex-grow: 1;
+      }
+      .closeicon {
+        cursor: pointer;
+        flex-shrink: 0;
+        margin-left: 10px;
+        --dile-icon-color: var(--dile-toast-close-icon-color, var(--dile-toast-text-color, #fff));
+        --dile-icon-size: var(--dile-toast-close-icon-size, 16px);
+      }
       .hidden {
         top: 20px;
         opacity: 0;
@@ -68,11 +85,28 @@ export class DileToastItem extends LitElement {
           ? "opening"
           : ""} ${this.getClassType(this.msg.toastType)}"
       >
-        ${this.msg.text}
+        <span class="text">${this.msg.text}</span>
+        ${this.showCloseIcon
+          ? html`<dile-icon
+              .icon="${clearIcon}"
+              class="closeicon"
+              @click="${this.closeByUser}"
+            ></dile-icon>`
+          : ""}
       </div>
     `;
   }
 
+  closeByUser() {
+    this.dispatchEvent(
+      new CustomEvent("dile-toast-item-closed", {
+        bubbles: true,
+        composed: true,
+        detail: { id: this.msg.id, msg: this.msg },
+      })
+    );
+  }
+
   firstUpdated() {
     setTimeout(() => {
       this.msg.opening = false;

package/lib/otp/sanitizeOtpValue.js

@@ -0,0 +1,4 @@
+export function sanitizeOtpValue(rawText, length) {
+  const digits = String(rawText ?? '').replace(/\D/g, '');
+  return length ? digits.slice(0, length) : digits;
+}

package/lib/otp/sanitizeOtpValue.test.js

@@ -0,0 +1,24 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { sanitizeOtpValue } from './sanitizeOtpValue.js';
+
+test('returns empty string for empty input', () => {
+  assert.equal(sanitizeOtpValue('', 6), '');
+});
+
+test('strips non-digit characters', () => {
+  assert.equal(sanitizeOtpValue('12 34-56', 6), '123456');
+});
+
+test('truncates to the given length', () => {
+  assert.equal(sanitizeOtpValue('1234567890', 6), '123456');
+});
+
+test('returns empty string for null or undefined', () => {
+  assert.equal(sanitizeOtpValue(null, 6), '');
+  assert.equal(sanitizeOtpValue(undefined, 6), '');
+});
+
+test('keeps digits shorter than length untouched', () => {
+  assert.equal(sanitizeOtpValue('12', 6), '12');
+});

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@dile/ui",
-  "version": "2.26.0",
+  "version": "2.27.1",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -26,5 +27,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "90ebde5b908aab4093afeee3bda87ef3ad85904e"
+  "gitHead": "fec5662d02ad55763620b92b5748e45217f31b11"
 }