@dile/ui 3.5.5 → 3.6.0

package/components/input/index.js

@@ -1,4 +1,5 @@
 export { DileInput } from './src/DileInput.js';
+export { DileInputIcon } from './src/DileInputIcon.js';
 export { DileInputInteger } from './src/DileInputInteger.js';
 export { DileInputMessage } from './src/DileInputMessage.js';
 export { DileInputMoney } from './src/DileInputMoney.js';

package/components/input/input-icon.js

@@ -0,0 +1,5 @@
+import { DileInputIcon } from './src/DileInputIcon.js';
+
+if (!customElements.get('dile-input-icon')) {
+  window.customElements.define('dile-input-icon', DileInputIcon);
+}

package/components/input/input-icon.spec.js

@@ -0,0 +1,166 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import './input-icon.js';
+import '@dile/iconlib/lucide-icons/dot.js';
+
+describe('dile-input-icon', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInputIcon(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-input-icon');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a text input with the given value', async () => {
+    const el = await renderInputIcon('<dile-input-icon name="test" value="hello"></dile-input-icon>');
+    const input = el.shadowRoot.querySelector('input');
+    expect(input).toBeTruthy();
+    expect(input.value).toBe('hello');
+    expect(input.type).toBe('text');
+  });
+
+  it('renders the label when set', async () => {
+    const el = await renderInputIcon('<dile-input-icon label="Username"></dile-input-icon>');
+    const label = el.shadowRoot.querySelector('label');
+    expect(label).toBeTruthy();
+    expect(label.textContent.trim()).toBe('Username');
+  });
+
+  it('does not render icon button when icon is not set', async () => {
+    const el = await renderInputIcon('<dile-input-icon></dile-input-icon>');
+    const button = el.shadowRoot.querySelector('.input-icon-btn');
+    expect(button).toBeFalsy();
+  });
+
+  it('renders icon button when icon is set', async () => {
+    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot"></dile-input-icon>');
+    await new Promise(resolve => setTimeout(resolve, 50)); // Small delay for icon registration
+    const button = el.shadowRoot.querySelector('.input-icon-btn');
+    expect(button).toBeTruthy();
+  });
+
+  it('disables the icon button when input is disabled', async () => {
+    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" disabled></dile-input-icon>');
+    const button = el.shadowRoot.querySelector('.input-icon-btn');
+    expect(button).toBeTruthy();
+    expect(button.disabled).toBe(true);
+  });
+
+  it('dispatches dile-input-icon-clicked event when icon button is clicked', async () => {
+    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" value="test-value"></dile-input-icon>');
+    const button = el.shadowRoot.querySelector('.input-icon-btn');
+    
+    let eventData = null;
+    el.addEventListener('dile-input-icon-clicked', (e) => {
+      eventData = e.detail;
+    });
+
+    button.click();
+    await el.updateComplete;
+
+    expect(eventData).toBeTruthy();
+    expect(eventData.icon).toBe('lucide.dot');
+    expect(eventData.value).toBe('test-value');
+  });
+
+  it('calls onIconClick callback when icon button is clicked', async () => {
+    const callback = vi.fn();
+    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" value="test"></dile-input-icon>');
+    
+    el.onIconClick = callback;
+    const button = el.shadowRoot.querySelector('.input-icon-btn');
+    button.click();
+    await el.updateComplete;
+
+    expect(callback).toHaveBeenCalledWith(el);
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+
+  it('callback receives component instance with access to value property', async () => {
+    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" value="secret"></dile-input-icon>');
+    
+    let receivedComponent = null;
+    el.onIconClick = (component) => {
+      receivedComponent = component;
+    };
+
+    const button = el.shadowRoot.querySelector('.input-icon-btn');
+    button.click();
+    await el.updateComplete;
+
+    expect(receivedComponent).toBe(el);
+    expect(receivedComponent.value).toBe('secret');
+  });
+
+  it('renders a message when set', async () => {
+    const el = await renderInputIcon('<dile-input-icon></dile-input-icon>');
+    el.message = 'Required field';
+    await el.updateComplete;
+
+    const message = el.shadowRoot.querySelector('.message span');
+    expect(message).toBeTruthy();
+    expect(message.textContent.trim()).toBe('Required field');
+  });
+
+  it('updates the value property on user input', async () => {
+    const el = await renderInputIcon('<dile-input-icon name="test"></dile-input-icon>');
+    const input = el.shadowRoot.querySelector('input');
+    input.value = 'typed';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+
+    expect(el.value).toBe('typed');
+  });
+
+  it('does not render tooltip wrapper when tooltip is not set', async () => {
+    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot"></dile-input-icon>');
+    const tooltip = el.shadowRoot.querySelector('dile-tooltip');
+    expect(tooltip).toBeFalsy();
+  });
+
+  it('renders dile-tooltip when tooltip property is set', async () => {
+    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" tooltip="Help text"></dile-input-icon>');
+    await el.updateComplete;
+    const tooltip = el.shadowRoot.querySelector('dile-tooltip');
+    expect(tooltip).toBeTruthy();
+    expect(tooltip.getAttribute('tooltip')).toBe('Help text');
+  });
+
+  it('maps tooltipPosition to tooltip position attribute', async () => {
+    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" tooltip="Help" tooltipPosition="bottom"></dile-input-icon>');
+    await el.updateComplete;
+    const tooltip = el.shadowRoot.querySelector('dile-tooltip');
+    expect(tooltip.getAttribute('position')).toBe('bottom');
+  });
+
+  it('maps tooltipFadeIn to tooltip fadeIn attribute', async () => {
+    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" tooltip="Help" tooltipFadeIn></dile-input-icon>');
+    await el.updateComplete;
+    const tooltip = el.shadowRoot.querySelector('dile-tooltip');
+    expect(tooltip.getAttribute('fadeIn')).toBe('');
+  });
+
+  it('maps tooltipArrow to tooltip arrow attribute', async () => {
+    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" tooltip="Help" tooltipArrow></dile-input-icon>');
+    await el.updateComplete;
+    const tooltip = el.shadowRoot.querySelector('dile-tooltip');
+    expect(tooltip.getAttribute('arrow')).toBe('');
+  });
+
+  it('button is still clickable when wrapped in tooltip', async () => {
+    const callback = vi.fn();
+    const el = await renderInputIcon('<dile-input-icon icon="lucide.dot" tooltip="Help"></dile-input-icon>');
+    el.onIconClick = callback;
+    await el.updateComplete;
+
+    const button = el.shadowRoot.querySelector('.input-icon-btn');
+    expect(button).toBeTruthy();
+    button.click();
+    await el.updateComplete;
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});

package/components/input/src/DileInputIcon.js

@@ -0,0 +1,181 @@
+import { LitElement, html, css } from 'lit';
+import { DileInput } from '../../input/index.js';
+import '@dile/iconlib/dile-iconlib.js';
+import '@dile/ui/components/tooltip/tooltip.js';
+
+export class DileInputIcon extends DileInput {
+
+  static get properties() {
+    return {
+      ...super.properties,
+      /** Icon to display in the button, format: "family.name" (e.g., "lucide.eye") */
+      icon: { type: String },
+      /** Callback function that receives the component instance when icon button is clicked */
+      onIconClick: { type: Function },
+      /** Tooltip text to show on icon hover */
+      tooltip: { type: String },
+      /** Tooltip position: "top", "bottom", "left", "right" */
+      tooltipPosition: { type: String },
+      /** Enable fade-in animation for tooltip */
+      tooltipFadeIn: { type: Boolean },
+      /** Show arrow pointing to the icon on tooltip */
+      tooltipArrow: { type: Boolean },
+    };
+  }
+
+  static get styles() {
+    return [
+      ...super.styles,
+      css`
+        .input-icon-btn {
+          background: none;
+          border: none;
+          cursor: pointer;
+          padding: var(--dile-input-icon-padding, var(--dile-input-padding, 5px));
+          margin: var(--dile-input-icon-margin, 0 5px);
+          color: var(--dile-input-icon-color, var(--dile-on-background-color, #303030));
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--dile-input-icon-width, 32px);
+          height: var(--dile-input-icon-height, 32px);
+          border-radius: var(--dile-input-icon-border-radius, var(--dile-input-border-radius, 5px));
+          transition: var(--dile-input-icon-transition, background-color 0.2s);
+        }
+        .input-icon-btn:hover {
+          background-color: var(--dile-input-icon-hover-bg, rgba(0, 0, 0, 0.05));
+        }
+        .input-icon-btn:active {
+          background-color: var(--dile-input-icon-active-bg, rgba(0, 0, 0, 0.1));
+        }
+        .input-icon-btn:disabled {
+          cursor: not-allowed;
+          opacity: 0.5;
+        }
+        .input-icon-btn dile-iconlib {
+          --dile-icon-color: var(--dile-input-icon-color, var(--dile-on-background-color, #303030));
+          --dile-icon-size: var(--dile-input-icon-size, 20px);
+        }
+      `
+    ];
+  }
+
+  constructor() {
+    super();
+    this.icon = '';
+    this.onIconClick = null;
+    this.tooltip = '';
+    this.tooltipPosition = 'top';
+    this.tooltipFadeIn = false;
+    this.tooltipArrow = false;
+  }
+
+  render() {
+    const inputType = this.type || 'text';
+    
+    return html`
+    <div>
+      ${this.label
+        ? html`<label for="textField">${this.label}</label>`
+        : ''
+      }
+      <section class="for-input">
+        <input
+          type="${inputType}"
+          id="textField"
+          name="${this.name}"
+          placeholder="${this.placeholder}"
+          ?disabled="${this.disabled}"
+          ?readonly="${this.readonly}"
+          @keypress="${this._lookForEnter}"
+          @input="${this._input}"
+          @blur="${this.doBlur}"
+          @focus="${this.doFocus}"
+          .value="${this.value}"
+          class="${this.errored ? 'errored' : ''}"
+          autocomplete="${this.disableAutocomplete ? 'off' : 'on'}"
+          ?selectonfocus="${this.selectOnFocus}"
+        >
+        ${this.icon
+          ? this.renderIconButton()
+          : ''
+        }
+      </section>
+      ${this.message
+        ? html`<div class="message ${this.errored ? 'errored-msg' : ''}"><span>${this.message}</span></div>`
+        : ''
+      }
+    </div>
+    `;
+  }
+
+  /**
+   * Renders an icon using dile-iconlib
+   * Supports format "family.name" (e.g., "lucide.eye", "material.home")
+   * dile-iconlib handles warnings if icon is not registered
+   * @param {string} iconName - Icon in "family.name" format
+   * @returns {TemplateResult}
+   */
+  renderIconlibIcon(iconName) {
+    if (!iconName || typeof iconName !== 'string' || !iconName.includes('.')) {
+      console.warn(`Invalid icon format: "${iconName}". Use "family.name" (e.g., "lucide.eye")`);
+      return html``;
+    }
+
+    const [family, name] = iconName.split('.');
+    if (!family || !name) {
+      console.warn(`Invalid icon format: "${iconName}". Use "family.name" (e.g., "lucide.eye")`);
+      return html``;
+    }
+
+    // Always render dile-iconlib, it will handle non-registered icons
+    return html`<dile-iconlib icon="${iconName}"></dile-iconlib>`;
+  }
+
+  /**
+   * Renders the icon button, optionally wrapped with a tooltip
+   * @returns {TemplateResult}
+   */
+  renderIconButton() {
+    const button = html`<button
+      class="input-icon-btn"
+      type="button"
+      @click="${this._handleIconClick}"
+      ?disabled="${this.disabled}"
+      aria-label="Icon action button"
+    >
+      ${this.renderIconlibIcon(this.icon)}
+    </button>`;
+
+    // If tooltip is defined, wrap button with dile-tooltip
+    if (this.tooltip) {
+      return html`<dile-tooltip
+        tooltip="${this.tooltip}"
+        position="${this.tooltipPosition}"
+        ?fadeIn="${this.tooltipFadeIn}"
+        ?arrow="${this.tooltipArrow}"
+      >
+        ${button}
+      </dile-tooltip>`;
+    }
+
+    return button;
+  }
+
+  _handleIconClick() {
+    // Dispatch custom event
+    this.dispatchEvent(new CustomEvent('dile-input-icon-clicked', {
+      bubbles: true,
+      composed: true,
+      detail: {
+        icon: this.icon,
+        value: this.value,
+      }
+    }));
+
+    // Execute callback if provided
+    if (typeof this.onIconClick === 'function') {
+      this.onIconClick(this);
+    }
+  }
+}

package/components/spinner/src/DileSpinnerIcon.js

@@ -9,7 +9,7 @@ export class DileSpinnerIcon extends DileSpinnerMixin(LitElement) {
         display: none;
       }
       :host([active]) {
-        display: inline-block;
+        display: inline-flex;
       }
       dile-lucide-icon-loader-circle {
         animation: spin var(--dile-spinner-icon-animation-time, 1s) linear infinite;

package/components/tooltip/src/DileTooltip.js

@@ -76,7 +76,7 @@ export class DileTooltip extends LitElement {
         transform: translateX(-50%);
         border-width: 5px;
         border-style: solid;
-        border-color: transparent transparent var(--dile-tooltip-background-color, #e74c3c) transparent;
+        border-color: transparent transparent var(--dile-tooltip-background-color, var(--dile-primary-color, #e74c3c)) transparent;
       }
       
       .animation{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/ui",
-  "version": "3.5.5",
+  "version": "3.6.0",
   "description": "UI Core components from dile-components.",
   "main": "index.js",
   "type": "module",
@@ -28,5 +28,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "eaa249f1df1f0e86d83924de110ab86cf05e1c11"
+  "gitHead": "38fa60c43d27a6b9d083a0d5be2e3be4b2a67f00"
 }