@dile/ui 3.4.5 → 3.4.6

package/components/password/password.spec.js

@@ -0,0 +1,35 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './password.js';
+
+describe('dile-password', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderPassword(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-password');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a password type input by default', async () => {
+    const el = await renderPassword('<dile-password name="pwd"></dile-password>');
+    const input = el.shadowRoot.querySelector('input');
+
+    expect(input).toBeTruthy();
+    expect(input.type).toBe('password');
+  });
+
+  it('toggles input type to text when the visibility toggle is shown and clicked', async () => {
+    const el = await renderPassword('<dile-password name="pwd" showPasswordToggle></dile-password>');
+    const toggle = el.shadowRoot.querySelector('.password-toggle-btn');
+    expect(toggle).toBeTruthy();
+
+    toggle.click();
+    await el.updateComplete;
+
+    expect(el.passwordVisible).toBe(true);
+    expect(el.shadowRoot.querySelector('input').type).toBe('text');
+  });
+});

package/components/progress-bar/progress-bar.js

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

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

@@ -0,0 +1,28 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './progress-bar.js';
+
+describe('dile-progress-bar', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderProgressBar(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-progress-bar');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the progress bar width and percentage from the value property', async () => {
+    const el = await renderProgressBar('<dile-progress-bar value="42"></dile-progress-bar>');
+    const bar = el.shadowRoot.querySelector('.progress-bar');
+
+    expect(bar.getAttribute('style')).toContain('width: 42%');
+    expect(bar.querySelector('span').textContent.trim()).toBe('42%');
+  });
+
+  it('renders the title when set', async () => {
+    const el = await renderProgressBar('<dile-progress-bar title="Loading"></dile-progress-bar>');
+    expect(el.shadowRoot.querySelector('.progress-bar-title').textContent.trim()).toBe('Loading');
+  });
+});

package/components/radio-group/radio-group.js

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

package/components/radio-group/radio-group.spec.js

@@ -0,0 +1,44 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './radio-group.js';
+
+describe('dile-radio-group', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderRadioGroup(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-radio-group');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted radios and label', async () => {
+    const el = await renderRadioGroup(`
+      <dile-radio-group name="opt" label="Choose one">
+        <dile-radio value="a" label="A"></dile-radio>
+        <dile-radio value="b" label="B"></dile-radio>
+      </dile-radio-group>
+    `);
+
+    expect(el.shadowRoot.querySelector('.label').textContent.trim()).toBe('Choose one');
+    expect(el.querySelectorAll('dile-radio').length).toBe(2);
+  });
+
+  it('updates value and selection when a radio is clicked', async () => {
+    const el = await renderRadioGroup(`
+      <dile-radio-group name="opt">
+        <dile-radio value="a" label="A"></dile-radio>
+        <dile-radio value="b" label="B"></dile-radio>
+      </dile-radio-group>
+    `);
+
+    const radios = el.querySelectorAll('dile-radio');
+    radios[1].shadowRoot.querySelector('article').click();
+    await el.updateComplete;
+
+    expect(el.value).toBe('b');
+    expect(radios[1].selected).toBe(true);
+    expect(radios[0].selected).toBe(false);
+  });
+});

package/components/radio-group/radio.js

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

package/components/radio-group/radio.spec.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './radio.js';
+
+describe('dile-radio', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderRadio(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-radio');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the label and starts unselected', async () => {
+    const el = await renderRadio('<dile-radio value="a" label="Option A"></dile-radio>');
+
+    expect(el.selected).toBe(false);
+    expect(el.shadowRoot.querySelector('.label').textContent.trim()).toBe('Option A');
+  });
+
+  it('dispatches dile-radio-selected with value and label on click', async () => {
+    const el = await renderRadio('<dile-radio value="a" label="Option A"></dile-radio>');
+    let detail = null;
+    el.addEventListener('dile-radio-selected', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelector('article').click();
+
+    expect(detail).toEqual({ value: 'a', label: 'Option A' });
+  });
+});

package/components/range/range.js

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

package/components/range/range.spec.js

@@ -0,0 +1,36 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './range.js';
+
+describe('dile-range', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderRange(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-range');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a native range input with min/max/value', async () => {
+    const el = await renderRange('<dile-range name="vol" min="0" max="20" value="5"></dile-range>');
+    const input = el.shadowRoot.querySelector('input[type="range"]');
+
+    expect(input).toBeTruthy();
+    expect(input.min).toBe('0');
+    expect(input.max).toBe('20');
+    expect(input.value).toBe('5');
+  });
+
+  it('updates the value property when the input changes', async () => {
+    const el = await renderRange('<dile-range name="vol"></dile-range>');
+    const input = el.shadowRoot.querySelector('input[type="range"]');
+
+    input.value = '7';
+    input.dispatchEvent(new Event('input'));
+    await el.updateComplete;
+
+    expect(el.value).toBe('7');
+  });
+});

package/components/rating/rating.js

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

package/components/rating/rating.spec.js

@@ -0,0 +1,34 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './rating.js';
+
+describe('dile-rating', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderRating(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-rating');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders five dile-star elements', async () => {
+    const el = await renderRating('<dile-rating value="3"></dile-rating>');
+    expect(el.shadowRoot.querySelectorAll('dile-star').length).toBe(5);
+    expect(el.value).toBe(3);
+  });
+
+  it('updates value and dispatches dile-rating-selected when a star is selected', async () => {
+    const el = await renderRating('<dile-rating value="0"></dile-rating>');
+    let detail = null;
+    el.addEventListener('dile-rating-selected', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelectorAll('dile-star')[2].dispatchEvent(new CustomEvent('dile-star-selected', {
+      detail: { index: 2 },
+    }));
+
+    expect(el.value).toBe(3);
+    expect(detail).toEqual({ value: 3 });
+  });
+});

package/components/rating/star.js

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

package/components/rating/star.spec.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './star.js';
+
+describe('dile-star', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderStar(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-star');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders an inner dile-icon', async () => {
+    const el = await renderStar('<dile-star value="1" index="0"></dile-star>');
+    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
+  });
+
+  it('dispatches dile-star-selected with the index on click', async () => {
+    const el = await renderStar('<dile-star value="1" index="2"></dile-star>');
+    let detail = null;
+    el.addEventListener('dile-star-selected', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelector('dile-icon').dispatchEvent(new Event('click'));
+
+    expect(detail).toEqual({ index: 2 });
+  });
+});

package/components/rating-scale-question/rating-scale-option.js

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

package/components/rating-scale-question/rating-scale-option.spec.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './rating-scale-option.js';
+
+describe('dile-rating-scale-option', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderOption(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-rating-scale-option');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the label and starts unselected', async () => {
+    const el = await renderOption('<dile-rating-scale-option value="3" label="Agree"></dile-rating-scale-option>');
+
+    expect(el.selected).toBe(false);
+    expect(el.shadowRoot.querySelector('.radio_label').textContent.trim()).toBe('Agree');
+  });
+
+  it('dispatches dile-rating-scale-option-selected with the value on click', async () => {
+    const el = await renderOption('<dile-rating-scale-option value="3"></dile-rating-scale-option>');
+    let detail = null;
+    el.addEventListener('dile-rating-scale-option-selected', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelector('span').click();
+
+    expect(detail).toEqual({ value: '3' });
+  });
+});

package/components/rating-scale-question/rating-scale-question.js

@@ -1,4 +1,6 @@
 import './rating-scale-option.js';
 import { DileRatingScaleQuestion } from "./src/DileRatingScaleQuestion.js";
 
-window.customElements.define("dile-rating-scale-question", DileRatingScaleQuestion);
+if (!customElements.get("dile-rating-scale-question")) {
+  window.customElements.define("dile-rating-scale-question", DileRatingScaleQuestion);
+}

package/components/rating-scale-question/rating-scale-question.spec.js

@@ -0,0 +1,35 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './rating-scale-question.js';
+
+describe('dile-rating-scale-question', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderQuestion(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-rating-scale-question');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the label and default 7-point options', async () => {
+    const el = await renderQuestion('<dile-rating-scale-question name="q1" label="How satisfied are you?"></dile-rating-scale-question>');
+
+    expect(el.shadowRoot.querySelector('legend').textContent.trim()).toBe('How satisfied are you?');
+    expect(el.shadowRoot.querySelectorAll('dile-rating-scale-option').length).toBe(7);
+  });
+
+  it('updates value when an option is selected', async () => {
+    const el = await renderQuestion('<dile-rating-scale-question name="q1"></dile-rating-scale-question>');
+    const option = el.shadowRoot.querySelector('dile-rating-scale-option');
+    option.dispatchEvent(new CustomEvent('dile-rating-scale-option-selected', {
+      bubbles: true,
+      composed: true,
+      detail: { value: option.value },
+    }));
+    await el.updateComplete;
+
+    expect(el.value).toBe(option.value);
+  });
+});

package/components/select/select-ajax.js

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

package/components/select/select-boolean.js

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

package/components/select/select.js

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

package/components/selector/selector-item.js

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

package/components/selector/selector-item.spec.js

@@ -0,0 +1,40 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './selector-item.js';
+
+describe('dile-selector-item', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSelectorItem(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-selector-item');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted content and starts unselected', async () => {
+    const el = await renderSelectorItem('<dile-selector-item>Option A</dile-selector-item>');
+
+    expect(el.selected).toBe(false);
+    expect(el.textContent.trim()).toBe('Option A');
+    expect(el.shadowRoot.querySelector('article')).toBeTruthy();
+  });
+
+  it('dispatches dile-item-selected with itself when clicked', async () => {
+    const el = await renderSelectorItem('<dile-selector-item>Option A</dile-selector-item>');
+    let detail = null;
+    el.addEventListener('dile-item-selected', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelector('article').click();
+
+    expect(detail).toBe(el);
+  });
+
+  it('wraps content in a link when href is set', async () => {
+    const el = await renderSelectorItem('<dile-selector-item href="/foo">Go</dile-selector-item>');
+    const link = el.shadowRoot.querySelector('a');
+    expect(link).toBeTruthy();
+    expect(link.getAttribute('href')).toBe('/foo');
+  });
+});

package/components/selector/selector-overlay.js

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

package/components/selector/selector.js

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

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