@dile/ui 3.4.4 → 3.4.6

package/components/otp-input/src/DileOtpInput.js

@@ -35,7 +35,7 @@ export class DileOtpInput extends DileEmmitChange(LitElement) {
       value: { type: String },
 
       /** Name for this input field */
-      name: { type: String },
+      name: { type: String, reflect: true },
 
       /** Disable the input field */
       disabled: { type: Boolean },

package/components/pages/pages.js

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

package/components/pages/pages.spec.js

@@ -0,0 +1,44 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './pages.js';
+
+describe('dile-pages', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderPages(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-pages');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('shows only the selected page', async () => {
+    const el = await renderPages(`
+      <dile-pages selected="1">
+        <div>Page 0</div>
+        <div>Page 1</div>
+      </dile-pages>
+    `);
+
+    const [page0, page1] = el.children;
+    expect(page0.style.display).toBe('none');
+    expect(page1.style.display).toBe('block');
+  });
+
+  it('hides the previous page and shows the new one when selected changes', async () => {
+    const el = await renderPages(`
+      <dile-pages selected="0">
+        <div>Page 0</div>
+        <div>Page 1</div>
+      </dile-pages>
+    `);
+
+    el.selected = 1;
+    await el.updateComplete;
+
+    const [page0, page1] = el.children;
+    expect(page0.style.display).toBe('none');
+    expect(page1.style.display).toBe('block');
+  });
+});

package/components/password/password.js

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

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/radio-group/src/DileRadioGroup.js

@@ -26,7 +26,7 @@ export class DileRadioGroup extends DileEmmitChange(LitElement) {
     return {
       label: { type: String },
       value: { type: String },
-      name: { type: String },
+      name: { type: String, reflect: true },
       message: { type: String },
       errored: { type: Boolean },
       hideErrorOnInput: { type: Boolean },

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

@@ -96,7 +96,7 @@ export class DileRange extends DileEmmitChange(LitElement) {
       min: { type: Number },
       step: { type: Number },
       value: { type: Number },
-      name: { type: String },
+      name: { type: String, reflect: true },
       label: { type: String },
       message: { type: String },
       errored: { type: Boolean, reflect: true },

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/select/select.spec.js

@@ -531,5 +531,44 @@ describe('dile-select', () => {
 
       expect(el.internals.form).toBeDefined();
     });
+
+    it('participates in FormData when name is set as an attribute', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-select name="fruit" value="1">
+            <select slot="select">
+              <option value="1">Option 1</option>
+              <option value="2">Option 2</option>
+            </select>
+          </dile-select>
+        </form>
+      `;
+      const el = document.body.querySelector('dile-select');
+      await el.updateComplete;
+
+      const data = new FormData(document.getElementById('testForm'));
+      expect(data.get('fruit')).toBe('1');
+    });
+
+    it('participates in FormData when name is set as a JS property', async () => {
+      document.body.innerHTML = `
+        <form id="testForm">
+          <dile-select value="1">
+            <select slot="select">
+              <option value="1">Option 1</option>
+              <option value="2">Option 2</option>
+            </select>
+          </dile-select>
+        </form>
+      `;
+      const el = document.body.querySelector('dile-select');
+      el.name = 'fruit';
+      await el.updateComplete;
+
+      expect(el.getAttribute('name')).toBe('fruit');
+
+      const data = new FormData(document.getElementById('testForm'));
+      expect(data.get('fruit')).toBe('1');
+    });
   });
 });

package/components/select/src/DileSelect.js

@@ -98,7 +98,7 @@ export class DileSelect extends DileEmmitChange(LitElement) {
     return {
       label: { type: String },
       value: { type: String },
-      name: { type: String },
+      name: { type: String, reflect: true },
       disabled: { type: Boolean },
       errored: { type: Boolean },
       message: { type: String },

package/components/select/src/DileSelectAjax.js

@@ -66,7 +66,7 @@ export class DileSelectAjax  extends DileEmmitChange(LitElement) {
       endpoint: { type: String },
       label: { type: String },
       value: { type: String },
-      name: { type: String },
+      name: { type: String, reflect: true },
       disabled: { type: Boolean },
       errored: { type: Boolean },
       data: { type: Array },

package/components/select/src/DileSelectBoolean.js

@@ -19,7 +19,7 @@ export class DileSelectBoolean extends DileEmmitChange(LitElement) {
     return {
       label: { type: String },
       value: {},
-      name: { type: String },
+      name: { type: String, reflect: true },
       disabled: { type: Boolean },
       errored: { type: Boolean },
       message: { type: String },

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