@dile/ui 3.4.5 → 3.4.6

package/components/floating-feedback/index.js

@@ -1,5 +1,7 @@
 import { DileFloatingFeedback } from './src/DileFloatingFeedback.js';
 
-window.customElements.define('dile-floating-feedback', DileFloatingFeedback);
+if (!customElements.get('dile-floating-feedback')) {
+  window.customElements.define('dile-floating-feedback', DileFloatingFeedback);
+}
 
 export { DileFloatingFeedback };

package/components/floating-menu/floating-menu-item.js

@@ -1,2 +1,4 @@
 import { DileFloatingMenuItem } from './src/DileFloatingMenuItem.js';
-customElements.define('dile-floating-menu-item', DileFloatingMenuItem);
+if (!customElements.get('dile-floating-menu-item')) {
+  customElements.define('dile-floating-menu-item', DileFloatingMenuItem);
+}

package/components/floating-menu/floating-menu-item.spec.js

@@ -0,0 +1,27 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './floating-menu-item.js';
+
+describe('dile-floating-menu-item', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderItem(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-floating-menu-item');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted content inside a link with the href property', async () => {
+    const el = await renderItem('<dile-floating-menu-item href="/home">Home</dile-floating-menu-item>');
+    const link = el.shadowRoot.querySelector('a');
+    expect(link.getAttribute('href')).toBe('/home');
+    expect(el.textContent.trim()).toBe('Home');
+  });
+
+  it('sets role listitem on the host', async () => {
+    const el = await renderItem('<dile-floating-menu-item href="/home">Home</dile-floating-menu-item>');
+    expect(el.getAttribute('role')).toBe('listitem');
+  });
+});

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

@@ -1,2 +1,4 @@
 import { DileFloatingMenu } from './src/DileFloatingMenu.js';
-customElements.define('dile-floating-menu', DileFloatingMenu);
+if (!customElements.get('dile-floating-menu')) {
+  customElements.define('dile-floating-menu', DileFloatingMenu);
+}

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

@@ -0,0 +1,31 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './floating-menu.js';
+
+describe('dile-floating-menu', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderFloatingMenu(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-floating-menu');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders closed by default', async () => {
+    const el = await renderFloatingMenu('<dile-floating-menu></dile-floating-menu>');
+    expect(el.opened).toBe(false);
+    expect(el.shadowRoot.querySelector('button')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('.closed')).toBeTruthy();
+  });
+
+  it('toggles opened state when the button is clicked', async () => {
+    const el = await renderFloatingMenu('<dile-floating-menu></dile-floating-menu>');
+    el.shadowRoot.querySelector('button').click();
+    await el.updateComplete;
+
+    expect(el.opened).toBe(true);
+    expect(el.shadowRoot.querySelector('.opened')).toBeTruthy();
+  });
+});

package/components/form-separator/form-separator.js

@@ -1,2 +1,4 @@
 import { DileFormSeparator } from './src/DileFormSeparator.js';
-customElements.define('dile-form-separator', DileFormSeparator);
+if (!customElements.get('dile-form-separator')) {
+  customElements.define('dile-form-separator', DileFormSeparator);
+}

package/components/form-separator/form-separator.spec.js

@@ -0,0 +1,28 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './form-separator.js';
+
+describe('dile-form-separator', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderFormSeparator(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-form-separator');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders without a heading when label is not set', async () => {
+    const el = await renderFormSeparator('<dile-form-separator></dile-form-separator>');
+    expect(el.shadowRoot.querySelector('div')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('h3')).toBeNull();
+  });
+
+  it('renders the label as a heading when set', async () => {
+    const el = await renderFormSeparator('<dile-form-separator label="Section"></dile-form-separator>');
+    const heading = el.shadowRoot.querySelector('h3');
+    expect(heading).toBeTruthy();
+    expect(heading.textContent.trim()).toBe('Section');
+  });
+});

package/components/hamburger/hamburger.js

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

package/components/hamburger/hamburger.spec.js

@@ -0,0 +1,28 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './hamburger.js';
+
+describe('dile-hamburger', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderHamburger(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-hamburger');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a button without the is-active class by default', async () => {
+    const el = await renderHamburger('<dile-hamburger></dile-hamburger>');
+    const button = el.shadowRoot.querySelector('button.hamburger');
+    expect(button).toBeTruthy();
+    expect(button.classList.contains('is-active')).toBe(false);
+  });
+
+  it('adds the is-active class when active is set', async () => {
+    const el = await renderHamburger('<dile-hamburger active></dile-hamburger>');
+    const button = el.shadowRoot.querySelector('button.hamburger');
+    expect(button.classList.contains('is-active')).toBe(true);
+  });
+});

package/components/icon/icon.js

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

package/components/icon/icon.spec.js

@@ -0,0 +1,31 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { closeIcon } from '@dile/icons/index.js';
+import './icon.js';
+
+describe('dile-icon', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderIcon(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-icon');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the provided icon inside a span', async () => {
+    const el = await renderIcon('<dile-icon></dile-icon>');
+    el.icon = closeIcon;
+    await el.updateComplete;
+
+    const span = el.shadowRoot.querySelector('span');
+    expect(span).toBeTruthy();
+    expect(span.querySelector('svg')).toBeTruthy();
+  });
+
+  it('renders nothing extra when icon is not set', async () => {
+    const el = await renderIcon('<dile-icon></dile-icon>');
+    expect(el.shadowRoot.querySelector('span').querySelector('svg')).toBeNull();
+  });
+});

package/components/icon-switch/icon-switch-group.js

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

package/components/icon-switch/icon-switch-group.spec.js

@@ -0,0 +1,46 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { closeIcon } from '@dile/icons/index.js';
+import './icon-switch-group.js';
+import './icon-switch.js';
+
+describe('dile-icon-switch-group', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderGroup(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-icon-switch-group');
+    const switches = el.querySelectorAll('dile-icon-switch');
+    switches.forEach((s) => { s.icon = closeIcon; });
+    await el.updateComplete;
+    for (const s of switches) await s.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted dile-icon-switch children', async () => {
+    const el = await renderGroup(`
+      <dile-icon-switch-group>
+        <dile-icon-switch name="one"></dile-icon-switch>
+        <dile-icon-switch name="two"></dile-icon-switch>
+      </dile-icon-switch-group>
+    `);
+    expect(el.querySelectorAll('dile-icon-switch').length).toBe(2);
+  });
+
+  it('deactivates the other switches when one becomes active', async () => {
+    const el = await renderGroup(`
+      <dile-icon-switch-group>
+        <dile-icon-switch name="one" active></dile-icon-switch>
+        <dile-icon-switch name="two"></dile-icon-switch>
+      </dile-icon-switch-group>
+    `);
+    const [one, two] = el.querySelectorAll('dile-icon-switch');
+
+    two.shadowRoot.querySelector('dile-icon').click();
+    await el.updateComplete;
+
+    expect(two.active).toBe(true);
+    expect(one.active).toBe(false);
+  });
+});

package/components/icon-switch/icon-switch.js

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

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

@@ -0,0 +1,35 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import { closeIcon } from '@dile/icons/index.js';
+import './icon-switch.js';
+
+describe('dile-icon-switch', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderIconSwitch(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-icon-switch');
+    el.icon = closeIcon;
+    await el.updateComplete;
+    return el;
+  }
+
+  it('starts inactive by default', async () => {
+    const el = await renderIconSwitch('<dile-icon-switch name="one"></dile-icon-switch>');
+    expect(el.active).toBeFalsy();
+    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
+  });
+
+  it('toggles active and dispatches dile-icon-switch-changed on click', async () => {
+    const el = await renderIconSwitch('<dile-icon-switch name="one"></dile-icon-switch>');
+    let detail = null;
+    el.addEventListener('dile-icon-switch-changed', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelector('dile-icon').click();
+    await el.updateComplete;
+
+    expect(el.active).toBe(true);
+    expect(detail).toEqual({ active: true, name: 'one' });
+  });
+});

package/components/info-box/info-box.js

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

package/components/info-box/info-box.spec.js

@@ -0,0 +1,38 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './info-box.js';
+
+describe('dile-info-box', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInfoBox(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-info-box');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted content and a default info icon', async () => {
+    const el = await renderInfoBox('<dile-info-box>Some info</dile-info-box>');
+    expect(el.textContent.trim()).toBe('Some info');
+    expect(el.shadowRoot.querySelector('.info dile-icon, .info svg')).toBeTruthy();
+  });
+
+  it('renders the title when set', async () => {
+    const el = await renderInfoBox('<dile-info-box title="Heads up">Some info</dile-info-box>');
+    const title = el.shadowRoot.querySelector('.title');
+    expect(title).toBeTruthy();
+    expect(title.textContent.trim()).toBe('Heads up');
+  });
+
+  it('shows the close button only when showCloseButton is set', async () => {
+    const el = await renderInfoBox('<dile-info-box>Some info</dile-info-box>');
+    expect(el.shadowRoot.querySelector('.close')).toBeNull();
+
+    el.showCloseButton = true;
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('.close button')).toBeTruthy();
+  });
+});

package/components/inline-feedback/inline-feedback.js

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

package/components/inline-feedback/inline-feedback.spec.js

@@ -0,0 +1,46 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './inline-feedback.js';
+
+describe('dile-inline-feedback', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInlineFeedback(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-inline-feedback');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders an empty message section by default', async () => {
+    const el = await renderInlineFeedback('<dile-inline-feedback></dile-inline-feedback>');
+    const section = el.shadowRoot.querySelector('#msg');
+    expect(section).toBeTruthy();
+    expect(section.textContent.trim()).toBe('');
+  });
+
+  it('sets the message and status classes on positiveFeedback', async () => {
+    const el = await renderInlineFeedback('<dile-inline-feedback></dile-inline-feedback>');
+    el.positiveFeedback('Saved!');
+    await el.updateComplete;
+
+    expect(el.msg).toBe('Saved!');
+    expect(el.status).toBe('success');
+    expect(el.shadowRoot.querySelector('#msg').textContent.trim()).toBe('Saved!');
+    expect(el.shadowRoot.querySelector('#msg').classList.contains('success')).toBe(true);
+  });
+
+  it('clears the message and status on clear()', async () => {
+    const el = await renderInlineFeedback('<dile-inline-feedback></dile-inline-feedback>');
+    el.negativeFeedback('Oops');
+    await el.updateComplete;
+
+    el.clear();
+    await el.updateComplete;
+
+    expect(el.msg).toBe('');
+    expect(el.status).toBe('');
+    expect(el.opened).toBe(false);
+  });
+});

package/components/input/input-contact.js

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

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

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './input-contact.js';
+
+describe('dile-input-contact', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInputContact(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-input-contact');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a native text input with the given value', async () => {
+    const el = await renderInputContact('<dile-input-contact name="phone" value="123"></dile-input-contact>');
+    const input = el.shadowRoot.querySelector('input');
+    expect(input).toBeTruthy();
+    expect(input.value).toBe('123');
+  });
+
+  it('marks invalid phone values as errored on blur', async () => {
+    const el = await renderInputContact('<dile-input-contact name="phone" phone value="abc"></dile-input-contact>');
+    const input = el.shadowRoot.querySelector('input');
+    input.dispatchEvent(new Event('blur'));
+    await el.updateComplete;
+
+    expect(el.valid).toBe(false);
+    expect(el.errored).toBe(true);
+  });
+});

package/components/input/input-integer.js

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

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

@@ -0,0 +1,31 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './input-integer.js';
+
+describe('dile-input-integer', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInputInteger(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-input-integer');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a native text input with the given value', async () => {
+    const el = await renderInputInteger('<dile-input-integer name="qty" value="5"></dile-input-integer>');
+    const input = el.shadowRoot.querySelector('input');
+    expect(input).toBeTruthy();
+    expect(input.value).toBe('5');
+  });
+
+  it('formats the value to an integer on blur', async () => {
+    const el = await renderInputInteger('<dile-input-integer name="qty" value="5.9"></dile-input-integer>');
+    const input = el.shadowRoot.querySelector('input');
+    input.value = '5.9';
+    input.dispatchEvent(new Event('blur'));
+
+    expect(el.value).toBe(5);
+  });
+});

package/components/input/input-message.js

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

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

@@ -0,0 +1,27 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './input-message.js';
+
+describe('dile-input-message', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInputMessage(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-input-message');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders nothing when there is no message', async () => {
+    const el = await renderInputMessage('<dile-input-message></dile-input-message>');
+    expect(el.shadowRoot.querySelector('.message')).toBeNull();
+  });
+
+  it('renders the message text when set', async () => {
+    const el = await renderInputMessage('<dile-input-message message="Required"></dile-input-message>');
+    const message = el.shadowRoot.querySelector('.message span');
+    expect(message).toBeTruthy();
+    expect(message.textContent.trim()).toBe('Required');
+  });
+});

package/components/input/input-money.js

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

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

@@ -0,0 +1,30 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './input-money.js';
+
+describe('dile-input-money', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInputMoney(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-input-money');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a native text input with the given value', async () => {
+    const el = await renderInputMoney('<dile-input-money name="price" value="9.5"></dile-input-money>');
+    const input = el.shadowRoot.querySelector('input');
+    expect(input).toBeTruthy();
+    expect(input.value).toBe('9.5');
+  });
+
+  it('formats the value to two decimals via set()', async () => {
+    const el = await renderInputMoney('<dile-input-money name="price"></dile-input-money>');
+    el.set('9.5');
+    await el.updateComplete;
+
+    expect(el.value).toBe('9.50');
+  });
+});

package/components/input/input-number-mask.js

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

package/components/input/input-number-mask.spec.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './input-number-mask.js';
+
+describe('dile-input-number-mask', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInputNumberMask(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-input-number-mask');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a native text input', async () => {
+    const el = await renderInputNumberMask('<dile-input-number-mask name="code" mask="00-00"></dile-input-number-mask>');
+    expect(el.shadowRoot.querySelector('input')).toBeTruthy();
+  });
+
+  it('masks digit keydowns following the given pattern', async () => {
+    const el = await renderInputNumberMask('<dile-input-number-mask name="code" mask="00-00"></dile-input-number-mask>');
+    const input = el.shadowRoot.querySelector('input');
+
+    ['1', '2', '3'].forEach((key) => {
+      input.dispatchEvent(new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true }));
+    });
+    await el.updateComplete;
+
+    expect(el.maskedValue).toBe('12-3');
+  });
+});

package/components/input/input-percentage.js

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

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

@@ -0,0 +1,31 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './input-percentage.js';
+
+describe('dile-input-percentage', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderInputPercentage(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-input-percentage');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a native text input with the given value and a % label', async () => {
+    const el = await renderInputPercentage('<dile-input-percentage name="rate" value="10"></dile-input-percentage>');
+    const input = el.shadowRoot.querySelector('input');
+    expect(input).toBeTruthy();
+    expect(input.value).toBe('10');
+    expect(el.shadowRoot.querySelector('.labelright').textContent.trim()).toBe('%');
+  });
+
+  it('formats the value as a float via doFormat()', async () => {
+    const el = await renderInputPercentage('<dile-input-percentage name="rate" value="10.5"></dile-input-percentage>');
+    el.doFormat();
+    await el.updateComplete;
+
+    expect(el.value).toBe(10.5);
+  });
+});

package/components/input/input-search.js

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