@dile/ui 3.4.5 → 3.5.0

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/index.js

@@ -1,3 +1,5 @@
 export { DileSelect } from './src/DileSelect.js';
 export { DileSelectAjax } from './src/DileSelectAjax.js';
-export { DileSelectBoolean } from './src/DileSelectBoolean.js';
+export { DileSelectBoolean } from './src/DileSelectBoolean.js';
+export { DileSelectOverlay } from './src/DileSelectOverlay.js';
+export { DileSelectAjaxOverlay } from './src/DileSelectAjaxOverlay.js';

package/components/select/select-ajax-overlay.js

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