@dile/ui 3.4.5 → 3.4.6

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

@@ -0,0 +1,39 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './input-search.js';
+
+describe('dile-input-search', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInputSearch(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-input-search');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a native text input and a search icon', async () => {
+    const el = await renderInputSearch('<dile-input-search placeholder="Search..."></dile-input-search>');
+    const input = el.shadowRoot.querySelector('input');
+    expect(input).toBeTruthy();
+    expect(input.placeholder).toBe('Search...');
+    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
+  });
+
+  it('updates the value on input and dispatches dile-input-search after the delay', async () => {
+    const el = await renderInputSearch('<dile-input-search delay="10"></dile-input-search>');
+    const input = el.shadowRoot.querySelector('input');
+    let detail = null;
+    el.addEventListener('dile-input-search', (e) => { detail = e.detail; });
+
+    input.value = 'lit';
+    input.dispatchEvent(new Event('input', { bubbles: true }));
+    await el.updateComplete;
+
+    expect(el.value).toBe('lit');
+
+    await new Promise((resolve) => setTimeout(resolve, 30));
+    expect(detail).toEqual({ keyword: 'lit' });
+  });
+});

package/components/input/input.js

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

package/components/input/input.spec.js

@@ -0,0 +1,47 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './input.js';
+
+describe('dile-input', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInput(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-input');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a native text input with the given value', async () => {
+    const el = await renderInput('<dile-input name="first" value="hello"></dile-input>');
+    const input = el.shadowRoot.querySelector('input');
+    expect(input).toBeTruthy();
+    expect(input.value).toBe('hello');
+  });
+
+  it('renders the label when set', async () => {
+    const el = await renderInput('<dile-input label="First name"></dile-input>');
+    const label = el.shadowRoot.querySelector('label');
+    expect(label).toBeTruthy();
+    expect(label.textContent.trim()).toBe('First name');
+  });
+
+  it('updates the value property on user input', async () => {
+    const el = await renderInput('<dile-input name="first"></dile-input>');
+    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('renders a message when the message property is set', async () => {
+    const el = await renderInput('<dile-input></dile-input>');
+    el.message = 'Required field';
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('.message span').textContent.trim()).toBe('Required field');
+  });
+});

package/components/light-mode-switch/light-mode-switch.js

@@ -1,3 +1,5 @@
 import { DileLightModeSwitch } from "./src/DileLightModeSwitch.js";
 
-window.customElements.define("dile-light-mode-switch", DileLightModeSwitch);
+if (!customElements.get("dile-light-mode-switch")) {
+  window.customElements.define("dile-light-mode-switch", DileLightModeSwitch);
+}

package/components/light-mode-switch/light-mode-switch.spec.js

@@ -0,0 +1,34 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './light-mode-switch.js';
+
+describe('dile-light-mode-switch', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    localStorage.removeItem('dile_light_mode_switch_state');
+    document.documentElement.classList.remove('dark-theme');
+  });
+
+  async function renderLightModeSwitch(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-light-mode-switch');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders an icon and a switch', async () => {
+    const el = await renderLightModeSwitch('<dile-light-mode-switch></dile-light-mode-switch>');
+    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('dile-switch')).toBeTruthy();
+  });
+
+  it('toggles darkMode and reflects the attribute', async () => {
+    const el = await renderLightModeSwitch('<dile-light-mode-switch></dile-light-mode-switch>');
+    const initial = el.darkMode;
+
+    el.toggle();
+    await el.updateComplete;
+
+    expect(el.darkMode).toBe(!initial);
+    expect(el.hasAttribute('darkMode')).toBe(!initial);
+  });
+});

package/components/menu-hamburger/menu-hamburger.js

@@ -1,3 +1,5 @@
 import { DileMenuHamburger } from './src/DileMenuHamburger.js';
 
-window.customElements.define('dile-menu-hamburger', DileMenuHamburger);
+if (!customElements.get('dile-menu-hamburger')) {
+  window.customElements.define('dile-menu-hamburger', DileMenuHamburger);
+}

package/components/menu-hamburger/menu-hamburger.spec.js

@@ -0,0 +1,34 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './menu-hamburger.js';
+
+describe('dile-menu-hamburger', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderMenuHamburger(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-menu-hamburger');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a hamburger and a drawer, closed by default', async () => {
+    const el = await renderMenuHamburger('<dile-menu-hamburger><nav slot="menu">Links</nav></dile-menu-hamburger>');
+    expect(el.opened).toBe(false);
+    expect(el.shadowRoot.querySelector('dile-hamburger')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('dile-app-drawer')).toBeTruthy();
+  });
+
+  it('opens on toggle and dispatches dile-menu-hamburger-opened', async () => {
+    const el = await renderMenuHamburger('<dile-menu-hamburger><nav slot="menu">Links</nav></dile-menu-hamburger>');
+    let opened = false;
+    el.addEventListener('dile-menu-hamburger-opened', () => { opened = true; });
+
+    el.toggle();
+    await el.updateComplete;
+
+    expect(el.opened).toBe(true);
+    expect(opened).toBe(true);
+  });
+});

package/components/menu-overlay/menu-overlay.js

@@ -1,3 +1,5 @@
 import { DileMenuOverlay } from './src/DileMenuOverlay.js';
 
-customElements.define("dile-menu-overlay", DileMenuOverlay);
+if (!customElements.get("dile-menu-overlay")) {
+  customElements.define("dile-menu-overlay", DileMenuOverlay);
+}

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

@@ -0,0 +1,44 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './menu-overlay.js';
+
+describe('dile-menu-overlay', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderMenuOverlay(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-menu-overlay');
+    await el.updateComplete;
+    return el;
+  }
+
+  function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+  }
+
+  it('renders the trigger and content slots', async () => {
+    const el = await renderMenuOverlay(`
+      <dile-menu-overlay>
+        <button slot="trigger">Open</button>
+        <div slot="content">Menu content</div>
+      </dile-menu-overlay>
+    `);
+    expect(el.shadowRoot.getElementById('trigger')).toBeTruthy();
+    expect(el.shadowRoot.getElementById('overlay')).toBeTruthy();
+  });
+
+  it('opens the overlay when the trigger is clicked', async () => {
+    const el = await renderMenuOverlay(`
+      <dile-menu-overlay>
+        <button slot="trigger">Open</button>
+        <div slot="content">Menu content</div>
+      </dile-menu-overlay>
+    `);
+
+    el.shadowRoot.getElementById('trigger').click();
+    await wait(100);
+
+    expect(el.shadowRoot.getElementById('overlay').classList.contains('opened')).toBe(true);
+  });
+});

package/components/message/message.js

@@ -1,3 +1,5 @@
 import { DileMessage } from './src/DileMessage.js';
 
-window.customElements.define('dile-message', DileMessage);
+if (!customElements.get('dile-message')) {
+  window.customElements.define('dile-message', DileMessage);
+}

package/components/message/message.spec.js

@@ -0,0 +1,42 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './message.js';
+
+describe('dile-message', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderMessage(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-message');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders closed by default with a close icon', async () => {
+    const el = await renderMessage('<dile-message></dile-message>');
+    expect(el.opened).toBe(false);
+    expect(el.shadowRoot.querySelector('dile-icon.icon')).toBeTruthy();
+  });
+
+  it('opens and shows the message text via openMessage()', async () => {
+    const el = await renderMessage('<dile-message></dile-message>');
+    el.openMessage('Saved successfully');
+    await el.updateComplete;
+
+    expect(el.opened).toBe(true);
+    expect(el.shadowRoot.querySelector('.content').textContent.trim()).toBe('Saved successfully');
+  });
+
+  it('dispatches dile-message-closed-by-user when the close icon is clicked', async () => {
+    const el = await renderMessage('<dile-message opened></dile-message>');
+    let closed = false;
+    el.addEventListener('dile-message-closed-by-user', () => { closed = true; });
+
+    el.shadowRoot.querySelector('dile-icon.icon').click();
+    await el.updateComplete;
+
+    expect(closed).toBe(true);
+    expect(el.opened).toBe(false);
+  });
+});

package/components/modal/modal-help.js

@@ -1,4 +1,6 @@
 import './modal.js';
 import { DileModalHelp } from './src/DileModalHelp.js';
 
-customElements.define("dile-modal-help", DileModalHelp);
+if (!customElements.get("dile-modal-help")) {
+  customElements.define("dile-modal-help", DileModalHelp);
+}

package/components/modal/modal-help.spec.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './modal-help.js';
+
+describe('dile-modal-help', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderModalHelp(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-modal-help');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a trigger button with the default label and a closed inner modal', async () => {
+    const el = await renderModalHelp('<dile-modal-help>Help content</dile-modal-help>');
+    const button = el.shadowRoot.querySelector('dile-button-icon');
+    expect(button).toBeTruthy();
+    expect(button.textContent.trim()).toBe('Help');
+    expect(el.elmodal.opened).toBe(false);
+  });
+
+  it('opens the inner modal on open()', async () => {
+    const el = await renderModalHelp('<dile-modal-help title="Info">Help content</dile-modal-help>');
+    el.open();
+    await el.elmodal.updateComplete;
+
+    expect(el.elmodal.opened).toBe(true);
+    expect(el.shadowRoot.querySelector('h1').textContent.trim()).toBe('Info');
+  });
+});

package/components/modal/modal.js

@@ -1,3 +1,5 @@
 import { DileModal } from './src/DileModal.js';
 
-customElements.define("dile-modal", DileModal);
+if (!customElements.get("dile-modal")) {
+  customElements.define("dile-modal", DileModal);
+}

package/components/modal/modal.spec.js

@@ -0,0 +1,46 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './modal.js';
+
+describe('dile-modal', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderModal(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-modal');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders closed by default with slotted content', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    expect(el.opened).toBe(false);
+    expect(el.textContent.trim()).toBe('Modal content');
+    expect(el.shadowRoot.querySelector('section').classList.contains('opaque')).toBe(false);
+  });
+
+  it('opens the modal via open()', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+
+    expect(el.opened).toBe(true);
+    expect(el.shadowRoot.querySelector('section').classList.contains('opened')).toBe(true);
+  });
+
+  it('closes and dispatches dile-modal-closed via close()', async () => {
+    const el = await renderModal('<dile-modal>Modal content</dile-modal>');
+    el.open();
+    await el.updateComplete;
+
+    let closed = false;
+    el.addEventListener('dile-modal-closed', () => { closed = true; });
+
+    el.close();
+    await el.updateComplete;
+
+    expect(el.opened).toBe(false);
+    expect(closed).toBe(true);
+  });
+});

package/components/nav/nav.js

@@ -1,3 +1,5 @@
 import { DileNav } from './src/DileNav.js';
 
-window.customElements.define('dile-nav', DileNav);
+if (!customElements.get('dile-nav')) {
+  window.customElements.define('dile-nav', DileNav);
+}

package/components/nav/nav.spec.js

@@ -0,0 +1,33 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './nav.js';
+
+describe('dile-nav', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderNav(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-nav');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the menu, title and actions slots', async () => {
+    const el = await renderNav(`
+      <dile-nav>
+        <span slot="title">My App</span>
+      </dile-nav>
+    `);
+
+    expect(el.shadowRoot.querySelector('slot[name="menu"]')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('slot[name="title"]')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('slot[name="actions"]')).toBeTruthy();
+    expect(el.menu).toBe('left');
+  });
+
+  it('reflects the menu property as an attribute', async () => {
+    const el = await renderNav('<dile-nav menu="right"></dile-nav>');
+    expect(el.getAttribute('menu')).toBe('right');
+  });
+});

package/components/number-picker/number-picker-element.js

@@ -1,3 +1,5 @@
 import { DileNumberPickerElement } from './src/DileNumberPickerElement.js';
 
-window.customElements.define('dile-number-picker-element', DileNumberPickerElement);
+if (!customElements.get('dile-number-picker-element')) {
+  window.customElements.define('dile-number-picker-element', DileNumberPickerElement);
+}

package/components/number-picker/number-picker-element.spec.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './number-picker-element.js';
+
+describe('dile-number-picker-element', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderNumberPickerElement(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-number-picker-element');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders an input and increment/decrement icons', async () => {
+    const el = await renderNumberPickerElement('<dile-number-picker-element value="3"></dile-number-picker-element>');
+
+    expect(el.shadowRoot.querySelector('input')).toBeTruthy();
+    expect(el.shadowRoot.querySelectorAll('dile-icon').length).toBe(2);
+  });
+
+  it('increments the value when calling increment()', async () => {
+    const el = await renderNumberPickerElement('<dile-number-picker-element value="3" step="1"></dile-number-picker-element>');
+    el.increment();
+    await el.updateComplete;
+
+    expect(el.value).toBe('4');
+  });
+});

package/components/number-picker/number-picker.js

@@ -1,3 +1,5 @@
 import { DileNumberPicker } from './src/DileNumberPicker.js';
 
-customElements.define('dile-number-picker', DileNumberPicker);
+if (!customElements.get('dile-number-picker')) {
+  customElements.define('dile-number-picker', DileNumberPicker);
+}

package/components/number-picker/number-picker.spec.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './number-picker.js';
+
+describe('dile-number-picker', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderNumberPicker(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-number-picker');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders an inner dile-number-picker-element with the given value', async () => {
+    const el = await renderNumberPicker('<dile-number-picker name="qty" value="5"></dile-number-picker>');
+
+    const inner = el.shadowRoot.querySelector('dile-number-picker-element');
+    expect(inner).toBeTruthy();
+    expect(el.value).toBe('5');
+  });
+
+  it('renders the label when set', async () => {
+    const el = await renderNumberPicker('<dile-number-picker label="Quantity"></dile-number-picker>');
+    const label = el.shadowRoot.querySelector('label');
+    expect(label).toBeTruthy();
+    expect(label.textContent.trim()).toBe('Quantity');
+  });
+});

package/components/order-switch/order-switch.js

@@ -1,3 +1,5 @@
 import { DileOrderSwitch } from "./src/DileOrderSwitch.js";
 
-window.customElements.define("dile-order-switch", DileOrderSwitch);
+if (!customElements.get("dile-order-switch")) {
+  window.customElements.define("dile-order-switch", DileOrderSwitch);
+}

package/components/order-switch/order-switch.spec.js

@@ -0,0 +1,31 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './order-switch.js';
+
+describe('dile-order-switch', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderOrderSwitch(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-order-switch');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('defaults to ascending order', async () => {
+    const el = await renderOrderSwitch('<dile-order-switch label="Name"></dile-order-switch>');
+
+    expect(el.value).toBe('asc');
+    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('span').textContent.trim()).toBe('Name');
+  });
+
+  it('toggles between asc and desc', async () => {
+    const el = await renderOrderSwitch('<dile-order-switch></dile-order-switch>');
+    el.toggle();
+    await el.updateComplete;
+
+    expect(el.value).toBe('desc');
+  });
+});

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

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

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

@@ -0,0 +1,41 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './otp-input.js';
+
+describe('dile-otp-input', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderOtpInput(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-otp-input');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders one input box per digit', async () => {
+    const el = await renderOtpInput('<dile-otp-input name="code" length="4"></dile-otp-input>');
+
+    expect(el.shadowRoot.querySelectorAll('input').length).toBe(4);
+  });
+
+  it('renders the slotted-in value across the boxes', async () => {
+    const el = await renderOtpInput('<dile-otp-input length="4" value="12"></dile-otp-input>');
+    const boxes = el.shadowRoot.querySelectorAll('input');
+
+    expect(boxes[0].value).toBe('1');
+    expect(boxes[1].value).toBe('2');
+    expect(boxes[2].value).toBe('');
+  });
+
+  it('dispatches dile-otp-input-completed when the last box is filled', async () => {
+    const el = await renderOtpInput('<dile-otp-input name="code" length="2"></dile-otp-input>');
+    let detail = null;
+    el.addEventListener('dile-otp-input-completed', (e) => { detail = e.detail; });
+
+    el.value = '12';
+    await el.updateComplete;
+
+    expect(detail).toEqual({ name: 'code', value: '12' });
+  });
+});

package/components/pages/pages.js

@@ -1,3 +1,5 @@
 import { DilePages } from "./src/DilePages.js";
 
-window.customElements.define("dile-pages", DilePages);
+if (!customElements.get("dile-pages")) {
+  window.customElements.define("dile-pages", DilePages);
+}

package/components/pages/pages.spec.js

@@ -0,0 +1,44 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './pages.js';
+
+describe('dile-pages', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderPages(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-pages');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('shows only the selected page', async () => {
+    const el = await renderPages(`
+      <dile-pages selected="1">
+        <div>Page 0</div>
+        <div>Page 1</div>
+      </dile-pages>
+    `);
+
+    const [page0, page1] = el.children;
+    expect(page0.style.display).toBe('none');
+    expect(page1.style.display).toBe('block');
+  });
+
+  it('hides the previous page and shows the new one when selected changes', async () => {
+    const el = await renderPages(`
+      <dile-pages selected="0">
+        <div>Page 0</div>
+        <div>Page 1</div>
+      </dile-pages>
+    `);
+
+    el.selected = 1;
+    await el.updateComplete;
+
+    const [page0, page1] = el.children;
+    expect(page0.style.display).toBe('none');
+    expect(page1.style.display).toBe('block');
+  });
+});

package/components/password/password.js

@@ -1,3 +1,5 @@
 import { DilePassword } from './src/DilePassword.js';
 
-window.customElements.define('dile-password', DilePassword);
+if (!customElements.get('dile-password')) {
+  window.customElements.define('dile-password', DilePassword);
+}