@dile/ui 3.4.5 → 3.5.0

package/components/slide-show/slide-show.spec.js

@@ -0,0 +1,34 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './slide-show.js';
+
+describe('dile-slide-show', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSlideShow(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-slide-show');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders closed by default with the showLabel text', async () => {
+    const el = await renderSlideShow('<dile-slide-show>Content</dile-slide-show>');
+    const link = el.shadowRoot.querySelector('a');
+
+    expect(link).toBeTruthy();
+    expect(link.textContent.trim()).toBe('Open');
+    expect(link.classList.contains('showmoreclose')).toBe(true);
+  });
+
+  it('opens and shows the hideLabel text', async () => {
+    const el = await renderSlideShow('<dile-slide-show hideLabel="Close it">Content</dile-slide-show>');
+    el.toggle();
+    await el.updateComplete;
+
+    const link = el.shadowRoot.querySelector('a');
+    expect(link.textContent.trim()).toBe('Close it');
+    expect(link.classList.contains('showmoreopen')).toBe(true);
+  });
+});

package/components/social-icon/social-icon.js

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

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

@@ -0,0 +1,26 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './social-icon.js';
+
+describe('dile-social-icon', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSocialIcon(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-social-icon');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('defaults to the facebook icon and renders an svg', async () => {
+    const el = await renderSocialIcon('<dile-social-icon></dile-social-icon>');
+    expect(el.icon).toBe('facebook');
+    expect(el.shadowRoot.querySelector('svg')).toBeTruthy();
+  });
+
+  it('renders a different icon based on the icon property', async () => {
+    const el = await renderSocialIcon('<dile-social-icon icon="twitter"></dile-social-icon>');
+    expect(el.shadowRoot.querySelector('svg')).toBeTruthy();
+  });
+});

package/components/spinner/spinner-bar.js

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

package/components/spinner/spinner-bar.spec.js

@@ -0,0 +1,26 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './spinner-bar.js';
+
+describe('dile-spinner-bar', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSpinnerBar(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-spinner-bar');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders nothing when inactive', async () => {
+    const el = await renderSpinnerBar('<dile-spinner-bar></dile-spinner-bar>');
+    expect(el.active).toBe(false);
+    expect(el.shadowRoot.querySelector('.bar')).toBeNull();
+  });
+
+  it('renders the bar when active', async () => {
+    const el = await renderSpinnerBar('<dile-spinner-bar active></dile-spinner-bar>');
+    expect(el.shadowRoot.querySelector('.bar')).toBeTruthy();
+  });
+});

package/components/spinner/spinner-block.js

@@ -1,4 +1,6 @@
 import './spinner.js';
 import { DileSpinnerBlock } from "./src/DileSpinnerBlock.js";
 
-window.customElements.define("dile-spinner-block", DileSpinnerBlock);
+if (!customElements.get("dile-spinner-block")) {
+  window.customElements.define("dile-spinner-block", DileSpinnerBlock);
+}

package/components/spinner/spinner-block.spec.js

@@ -0,0 +1,21 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './spinner-block.js';
+
+describe('dile-spinner-block', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  it('renders an active dile-spinner inside the loading section', async () => {
+    document.body.innerHTML = '<dile-spinner-block></dile-spinner-block>';
+    const el = document.body.querySelector('dile-spinner-block');
+    await el.updateComplete;
+
+    const section = el.shadowRoot.querySelector('section.loading');
+    expect(section).toBeTruthy();
+
+    const spinner = section.querySelector('dile-spinner');
+    expect(spinner).toBeTruthy();
+    expect(spinner.hasAttribute('active')).toBe(true);
+  });
+});

package/components/spinner/spinner-horizontal.js

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

package/components/spinner/spinner-horizontal.spec.js

@@ -0,0 +1,25 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './spinner-horizontal.js';
+
+describe('dile-spinner-horizontal', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSpinnerHorizontal(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-spinner-horizontal');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders nothing when inactive', async () => {
+    const el = await renderSpinnerHorizontal('<dile-spinner-horizontal></dile-spinner-horizontal>');
+    expect(el.shadowRoot.querySelector('.loader')).toBeNull();
+  });
+
+  it('renders the loader when active', async () => {
+    const el = await renderSpinnerHorizontal('<dile-spinner-horizontal active></dile-spinner-horizontal>');
+    expect(el.shadowRoot.querySelector('.loader')).toBeTruthy();
+  });
+});

package/components/spinner/spinner-icon.js

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

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

@@ -0,0 +1,25 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './spinner-icon.js';
+
+describe('dile-spinner-icon', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSpinnerIcon(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-spinner-icon');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('is inactive by default', async () => {
+    const el = await renderSpinnerIcon('<dile-spinner-icon></dile-spinner-icon>');
+    expect(el.active).toBe(false);
+  });
+
+  it('renders the loader icon when active', async () => {
+    const el = await renderSpinnerIcon('<dile-spinner-icon active></dile-spinner-icon>');
+    expect(el.shadowRoot.querySelector('dile-lucide-icon-loader-circle')).toBeTruthy();
+  });
+});

package/components/spinner/spinner-modal.js

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

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

@@ -0,0 +1,26 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './spinner-modal.js';
+
+describe('dile-spinner-modal', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSpinnerModal(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-spinner-modal');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders nothing when inactive', async () => {
+    const el = await renderSpinnerModal('<dile-spinner-modal></dile-spinner-modal>');
+    expect(el.shadowRoot.querySelector('div')).toBeNull();
+  });
+
+  it('renders the modal overlay with a spinner when active', async () => {
+    const el = await renderSpinnerModal('<dile-spinner-modal active></dile-spinner-modal>');
+    expect(el.shadowRoot.querySelector('div')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('dile-spinner')).toBeTruthy();
+  });
+});

package/components/spinner/spinner.js

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

package/components/spinner/spinner.spec.js

@@ -0,0 +1,26 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './spinner.js';
+
+describe('dile-spinner', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSpinner(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-spinner');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders nothing when inactive', async () => {
+    const el = await renderSpinner('<dile-spinner></dile-spinner>');
+    expect(el.active).toBe(false);
+    expect(el.shadowRoot.querySelector('i')).toBeNull();
+  });
+
+  it('renders the spinner markup when active', async () => {
+    const el = await renderSpinner('<dile-spinner active></dile-spinner>');
+    expect(el.shadowRoot.querySelector('i')).toBeTruthy();
+  });
+});

package/components/switch/switch.js

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

package/components/switch/switch.spec.js

@@ -0,0 +1,33 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './switch.js';
+
+describe('dile-switch', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSwitch(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-switch');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('starts unchecked by default', async () => {
+    const el = await renderSwitch('<dile-switch name="notify"></dile-switch>');
+    expect(el.checked).toBe(false);
+    expect(el.shadowRoot.querySelector('section button')).toBeTruthy();
+  });
+
+  it('toggles checked state and dispatches dile-switch-changed', async () => {
+    const el = await renderSwitch('<dile-switch name="notify"></dile-switch>');
+    let detail = null;
+    el.addEventListener('dile-switch-changed', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelector('div').click();
+    await el.updateComplete;
+
+    expect(el.checked).toBe(true);
+    expect(detail).toEqual({ checked: true, name: 'notify' });
+  });
+});

package/components/tabs/tab.js

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

package/components/tabs/tabs.js

@@ -1,4 +1,6 @@
 import './tab.js';
 import { DileTabs } from "./src/DileTabs.js";
 
-window.customElements.define("dile-tabs", DileTabs);
+if (!customElements.get("dile-tabs")) {
+  window.customElements.define("dile-tabs", DileTabs);
+}

package/components/tabs/tabs.spec.js

@@ -0,0 +1,45 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './tabs.js';
+
+describe('dile-tabs', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderTabs(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-tabs');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders slotted dile-tab items', async () => {
+    const el = await renderTabs(`
+      <dile-tabs selected="0">
+        <dile-tab>One</dile-tab>
+        <dile-tab>Two</dile-tab>
+      </dile-tabs>
+    `);
+
+    const tabs = el.querySelectorAll('dile-tab');
+    expect(tabs.length).toBe(2);
+    await tabs[0].updateComplete;
+    expect(tabs[0].selected).toBe(true);
+  });
+
+  it('selects a tab when clicked', async () => {
+    const el = await renderTabs(`
+      <dile-tabs>
+        <dile-tab>One</dile-tab>
+        <dile-tab>Two</dile-tab>
+      </dile-tabs>
+    `);
+
+    const tabs = el.querySelectorAll('dile-tab');
+    await tabs[1].updateComplete;
+    tabs[1].shadowRoot.querySelector('article').click();
+    await el.updateComplete;
+
+    expect(el.selected).toBe(1);
+  });
+});

package/components/textarea/textarea.js

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

package/components/textarea/textarea.spec.js

@@ -0,0 +1,39 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './textarea.js';
+
+describe('dile-textarea', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderTextarea(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-textarea');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a native textarea with the initial value', async () => {
+    const el = await renderTextarea('<dile-textarea name="bio" value="Hello"></dile-textarea>');
+    const textarea = el.shadowRoot.querySelector('textarea');
+
+    expect(textarea).toBeTruthy();
+    expect(textarea.value).toBe('Hello');
+  });
+
+  it('updates the value property on input', async () => {
+    const el = await renderTextarea('<dile-textarea name="bio"></dile-textarea>');
+    const textarea = el.shadowRoot.querySelector('textarea');
+    textarea.value = 'New text';
+    textarea.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+
+    expect(el.value).toBe('New text');
+  });
+
+  it('renders the label when provided', async () => {
+    const el = await renderTextarea('<dile-textarea name="bio" label="Bio"></dile-textarea>');
+    const label = el.shadowRoot.querySelector('label');
+    expect(label.textContent.trim()).toBe('Bio');
+  });
+});

package/components/time-picker/time-picker.js

@@ -1,2 +1,4 @@
 import { DileTimePicker } from "./src/DileTimePicker.js";
-customElements.define('dile-time-picker', DileTimePicker);
+if (!customElements.get('dile-time-picker')) {
+  customElements.define('dile-time-picker', DileTimePicker);
+}

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

@@ -0,0 +1,26 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './time-picker.js';
+
+describe('dile-time-picker', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderTimePicker(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-time-picker');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('defaults to 00:00:00 and renders three number pickers', async () => {
+    const el = await renderTimePicker('<dile-time-picker name="start"></dile-time-picker>');
+    expect(el.value).toBe('00:00:00');
+    expect(el.shadowRoot.querySelectorAll('dile-number-picker-element').length).toBe(3);
+  });
+
+  it('renders the label when provided', async () => {
+    const el = await renderTimePicker('<dile-time-picker label="Start time"></dile-time-picker>');
+    expect(el.shadowRoot.querySelector('label').textContent.trim()).toBe('Start time');
+  });
+});

package/components/timer/timer.js

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

package/components/timer/timer.spec.js

@@ -0,0 +1,31 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './timer.js';
+
+describe('dile-timer', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderTimer(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-timer');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('defaults to a 60s duration shown as 01:00', async () => {
+    const el = await renderTimer('<dile-timer></dile-timer>');
+    expect(el.duration).toBe(60_000);
+    expect(el.shadowRoot.querySelector('.display').textContent.trim()).toBe('01:00');
+  });
+
+  it('renders control buttons when controls is set', async () => {
+    const el = await renderTimer('<dile-timer controls></dile-timer>');
+    expect(el.shadowRoot.querySelectorAll('.controls dile-button').length).toBe(3);
+  });
+
+  it('renders the title when provided', async () => {
+    const el = await renderTimer('<dile-timer title="Countdown"></dile-timer>');
+    expect(el.shadowRoot.querySelector('.title').textContent.trim()).toBe('Countdown');
+  });
+});

package/components/toast/toast-item.js

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

package/components/toast/toast-persistent.js

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

package/components/toast/toast.js

@@ -1,4 +1,6 @@
 import { DileToast } from "./src/DileToast.js";
 import './toast-item.js';
 
-window.customElements.define("dile-toast", DileToast);
+if (!customElements.get("dile-toast")) {
+  window.customElements.define("dile-toast", DileToast);
+}

package/components/tooltip/chip-tooltip.js

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

package/components/tooltip/chip-tooltip.spec.js

@@ -0,0 +1,29 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './chip-tooltip.js';
+
+describe('dile-chip-tooltip', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderChipTooltip(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-chip-tooltip');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the label inside a dile-tooltip with the message', async () => {
+    const el = await renderChipTooltip('<dile-chip-tooltip label="Info" message="More info here"></dile-chip-tooltip>');
+    const tooltip = el.shadowRoot.querySelector('dile-tooltip');
+
+    expect(tooltip).toBeTruthy();
+    expect(tooltip.getAttribute('tooltip')).toBe('More info here');
+    expect(el.shadowRoot.querySelector('.label').textContent.trim()).toBe('Info');
+  });
+
+  it('defaults the position to bottom', async () => {
+    const el = await renderChipTooltip('<dile-chip-tooltip message="Info"></dile-chip-tooltip>');
+    expect(el.position).toBe('bottom');
+  });
+});

package/components/tooltip/tooltip.js

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

package/components/tooltip/tooltip.spec.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './tooltip.js';
+
+describe('dile-tooltip', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderTooltip(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-tooltip');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the tooltip text hidden by default', async () => {
+    const el = await renderTooltip('<dile-tooltip tooltip="Hello there">Trigger</dile-tooltip>');
+    const tooltipText = el.shadowRoot.querySelector('.tooltiptext');
+
+    expect(tooltipText).toBeTruthy();
+    expect(tooltipText.textContent.trim()).toBe('Hello there');
+    expect(tooltipText.classList.contains('show')).toBe(false);
+  });
+
+  it('shows the tooltip on mouseover', async () => {
+    const el = await renderTooltip('<dile-tooltip tooltip="Hello there">Trigger</dile-tooltip>');
+    el.doMouseover();
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('.tooltiptext').classList.contains('show')).toBe(true);
+  });
+});

package/components/web-visor/web-visor.js

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

package/components/web-visor/web-visor.spec.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './web-visor.js';
+
+describe('dile-web-visor', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderWebVisor(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-web-visor');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders an iframe pointing at the url', async () => {
+    const el = await renderWebVisor('<dile-web-visor url="https://example.com" title="Example"></dile-web-visor>');
+    const iframe = el.shadowRoot.querySelector('iframe');
+
+    expect(iframe).toBeTruthy();
+    expect(iframe.getAttribute('src')).toBe('https://example.com');
+  });
+
+  it('increases zoom when zoom in is clicked', async () => {
+    const el = await renderWebVisor('<dile-web-visor url="https://example.com"></dile-web-visor>');
+    const zoomInButton = el.shadowRoot.querySelectorAll('.controls dile-button')[1];
+    zoomInButton.click();
+    await el.updateComplete;
+
+    expect(el._zoom).toBeCloseTo(1.1);
+  });
+});