@dile/ui 3.4.4 → 3.4.6

package/components/selector/selector.spec.js

@@ -0,0 +1,45 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './selector.js';
+import './selector-item.js';
+
+describe('dile-selector', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSelector(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-selector');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a slot with the selector items', async () => {
+    const el = await renderSelector(`
+      <dile-selector>
+        <dile-selector-item>One</dile-selector-item>
+        <dile-selector-item>Two</dile-selector-item>
+      </dile-selector>
+    `);
+
+    expect(el.shadowRoot.querySelector('slot')).toBeTruthy();
+    expect(el.querySelectorAll('dile-selector-item').length).toBe(2);
+  });
+
+  it('selects an item by index when clicked, marking it selected', async () => {
+    const el = await renderSelector(`
+      <dile-selector>
+        <dile-selector-item>One</dile-selector-item>
+        <dile-selector-item>Two</dile-selector-item>
+      </dile-selector>
+    `);
+
+    const items = el.querySelectorAll('dile-selector-item');
+    items[1].shadowRoot.querySelector('article').click();
+    await el.updateComplete;
+
+    expect(el.selected).toBe(1);
+    expect(items[1].selected).toBe(true);
+    expect(items[0].selected).toBe(false);
+  });
+});

package/components/slide-menu/slide-menu.js

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

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

@@ -0,0 +1,38 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './slide-menu.js';
+
+describe('dile-slide-menu', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSlideMenu(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-slide-menu');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders closed by default with a nav control', async () => {
+    const el = await renderSlideMenu('<dile-slide-menu>Content</dile-slide-menu>');
+    expect(el.opened).toBe(false);
+
+    const nav = el.shadowRoot.querySelector('nav');
+    expect(nav).toBeTruthy();
+    expect(nav.getAttribute('aria-expanded')).toBe('false');
+  });
+
+  it('opens when toggled', async () => {
+    const el = await renderSlideMenu('<dile-slide-menu>Content</dile-slide-menu>');
+    el.toggle();
+    await el.updateComplete;
+
+    expect(el.opened).toBe(true);
+    expect(el.shadowRoot.querySelector('nav').getAttribute('aria-expanded')).toBe('true');
+  });
+
+  it('uses the label property in the nav control', async () => {
+    const el = await renderSlideMenu('<dile-slide-menu label="Options">Content</dile-slide-menu>');
+    expect(el.shadowRoot.querySelector('nav').getAttribute('aria-label')).toBe('Options');
+  });
+});

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

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

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/src/DileTextarea.js

@@ -58,7 +58,7 @@ export class DileTextarea extends DileEmmitChange(LitElement) {
 
   static get properties() {
     return {
-      name: { type: String },
+      name: { type: String, reflect: true },
       label: { type: String },
       errored: { 
         type: Boolean,

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/src/DileTimePicker.js

@@ -37,7 +37,7 @@ export class DileTimePicker extends DileEmmitChange(LitElement) {
       errored: { type: Boolean },
       hideErrorOnInput: { type: Boolean },
       focusOnStart: { type: Boolean },
-      name: { type: String },
+      name: { type: String, reflect: true },
     };
   }
 

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);
+}