@dile/utils 3.0.17 → 3.0.19

package/components/country-select/country-select.spec.js

@@ -0,0 +1,35 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './country-select.js';
+
+describe('dile-country-select', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderCountrySelect(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-country-select');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a dile-select with country options', async () => {
+    const el = await renderCountrySelect('<dile-country-select name="country"></dile-country-select>');
+    const select = el.shadowRoot.querySelector('dile-select');
+    expect(select).toBeTruthy();
+    expect(el.shadowRoot.querySelectorAll('option').length).toBeGreaterThan(1);
+  });
+
+  it('updates value and dispatches country-changed on selection change', async () => {
+    const el = await renderCountrySelect('<dile-country-select name="country"></dile-country-select>');
+    let detail = null;
+    el.addEventListener('country-changed', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelector('dile-select').dispatchEvent(
+      new CustomEvent('element-changed', { detail: { value: 'ES' } })
+    );
+
+    expect(el.value).toBe('ES');
+    expect(detail).toEqual({ value: 'ES' });
+  });
+});

package/components/country-select/fct-country-select.js

@@ -48,4 +48,6 @@ export class FctCountrySelect extends LitElement {
     this.value = e.detail.value;
   }
 }
-customElements.define('fct-country-select', FctCountrySelect);
+if (!customElements.get('fct-country-select')) {
+  customElements.define('fct-country-select', FctCountrySelect);
+}

package/components/country-select/src/DileCountrySelect.js

@@ -138,4 +138,6 @@ export class DileCountrySelect extends LitElement {
   }
 }
 
-customElements.define('dile-country-select', DileCountrySelect);
+if (!customElements.get('dile-country-select')) {
+  customElements.define('dile-country-select', DileCountrySelect);
+}

package/components/datepicker/calendar.js

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

package/components/datepicker/calendar.spec.js

@@ -0,0 +1,22 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './calendar.js';
+
+describe('dile-calendar', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderCalendar(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-calendar');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the month navigation and day grid', async () => {
+    const el = await renderCalendar('<dile-calendar></dile-calendar>');
+    await el.updateComplete;
+    expect(el.shadowRoot.querySelector('.calendar__navigation')).toBeTruthy();
+    expect(el.shadowRoot.querySelectorAll('.calendar__day-button').length).toBeGreaterThan(0);
+  });
+});

package/components/datepicker/datepicker.js

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

package/components/datepicker/datepicker.spec.js

@@ -0,0 +1,33 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './datepicker.js';
+
+describe('dile-datepicker', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderDatepicker(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-datepicker');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the text input and a calendar trigger icon', async () => {
+    const el = await renderDatepicker('<dile-datepicker name="birthdate" label="Birthdate"></dile-datepicker>');
+    expect(el.shadowRoot.querySelector('input')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('dile-menu-overlay')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
+  });
+
+  it('updates value when a date is selected from the calendar', async () => {
+    const el = await renderDatepicker('<dile-datepicker name="birthdate"></dile-datepicker>');
+    const calendar = el.shadowRoot.querySelector('dile-calendar');
+    calendar.dispatchEvent(new CustomEvent('user-selected-date-changed', {
+      detail: { selectedDate: new Date(2024, 0, 15) },
+    }));
+    await el.updateComplete;
+
+    expect(el.value).toBeTruthy();
+  });
+});

package/components/datepicker/datetimepicker.js

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

package/components/datepicker/datetimepicker.spec.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './datetimepicker.js';
+
+describe('dile-datetimepicker', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderDatetimepicker(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-datetimepicker');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the text input, calendar and time picker inside the overlay', async () => {
+    const el = await renderDatetimepicker('<dile-datetimepicker name="appointment"></dile-datetimepicker>');
+    expect(el.shadowRoot.querySelector('input')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('dile-calendar')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('dile-time-picker')).toBeTruthy();
+  });
+
+  it('updates value combining date and time when accepted', async () => {
+    const el = await renderDatetimepicker('<dile-datetimepicker name="appointment"></dile-datetimepicker>');
+    el.acceptTime();
+    await el.updateComplete;
+
+    expect(el.value).toMatch(/^\d{4}-\d{2}-\d{2} /);
+  });
+});

package/components/graph/graph.js

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

package/components/graph/graph.spec.js

@@ -0,0 +1,38 @@
+import { describe, it, expect, afterEach, beforeEach } from 'vitest';
+import './graph.js';
+
+// DileGraph relies on a global `Chart` (Chart.js), normally loaded via <script> tag
+// in consuming pages, not a module import. Stub it so firstUpdated() doesn't throw.
+describe('dile-graph', () => {
+  beforeEach(() => {
+    window.Chart = class {
+      constructor(ctx, config) {
+        this.ctx = ctx;
+        this.config = config;
+      }
+    };
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+    delete window.Chart;
+  });
+
+  async function renderGraph(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-graph');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a canvas and initializes a Chart instance', async () => {
+    const el = await renderGraph('<dile-graph></dile-graph>');
+    expect(el.shadowRoot.querySelector('canvas')).toBeTruthy();
+    expect(el.myChart).toBeInstanceOf(window.Chart);
+  });
+
+  it('defaults chartType to line', async () => {
+    const el = await renderGraph('<dile-graph></dile-graph>');
+    expect(el.chartType).toBe('line');
+  });
+});

package/components/html-transform/html-transform.js

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

package/components/html-transform/html-transform.spec.js

@@ -0,0 +1,25 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './html-transform.js';
+
+describe('dile-html-transform', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderHtmlTransform(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-html-transform');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the plain text when no conversion flags are set', async () => {
+    const el = await renderHtmlTransform('<dile-html-transform text="hello world"></dile-html-transform>');
+    expect(el.shadowRoot.textContent.trim()).toBe('hello world');
+  });
+
+  it('converts a link when convertLinks is set', async () => {
+    const el = await renderHtmlTransform('<dile-html-transform text="visit example.com" convertLinks></dile-html-transform>');
+    expect(el.shadowRoot.querySelector('a')).toBeTruthy();
+  });
+});

package/components/local-time/local-time.js

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

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

@@ -0,0 +1,25 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './local-time.js';
+
+describe('dile-local-time', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderLocalTime(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-local-time');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the formatted local time from isoDatetime', async () => {
+    const el = await renderLocalTime('<dile-local-time isoDatetime="2024-01-15T10:30:00Z"></dile-local-time>');
+    expect(el.shadowRoot.textContent.trim().length).toBeGreaterThan(0);
+  });
+
+  it('renders empty when isoDatetime is not set', async () => {
+    const el = await renderLocalTime('<dile-local-time></dile-local-time>');
+    expect(el.shadowRoot.textContent.trim()).toBe('');
+  });
+});

package/components/media-query/media-query.js

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

package/components/media-query/media-query.spec.js

@@ -0,0 +1,34 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './media-query.js';
+
+describe('dile-media-query', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderMediaQuery(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-media-query');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders without throwing and creates a matcher for the query', async () => {
+    const el = await renderMediaQuery('<dile-media-query query="(min-width: 10px)"></dile-media-query>');
+    await el.updateComplete;
+    expect(el.matcher).toBeInstanceOf(MediaQueryList);
+    expect(el._match).toBe(true);
+  });
+
+  it('dispatches dile-media-query-changed when the match state is set', async () => {
+    const el = await renderMediaQuery('<dile-media-query query="(min-width: 10px)"></dile-media-query>');
+    let detail = null;
+    el.addEventListener('dile-media-query-changed', (e) => { detail = e.detail; });
+
+    el.query = '(max-width: 5px)';
+    await el.updateComplete;
+    await el.updateComplete;
+
+    expect(detail).toEqual({ value: false });
+  });
+});

package/components/network/network.js

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

package/components/network/network.spec.js

@@ -0,0 +1,33 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './network.js';
+
+describe('dile-network', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderNetwork(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-network');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('reflects the current navigator.onLine status', async () => {
+    const el = await renderNetwork('<dile-network></dile-network>');
+    expect(el.onLine).toBe(window.navigator.onLine);
+  });
+
+  it('does not render the offline toast when online and showOffLineStatus is unset', async () => {
+    const el = await renderNetwork('<dile-network></dile-network>');
+    expect(el.shadowRoot.querySelector('#eltoast')).toBeNull();
+  });
+
+  it('renders the offline toast when forced offline with showOffLineStatus', async () => {
+    const el = await renderNetwork('<dile-network showOffLineStatus></dile-network>');
+    el.onLine = false;
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelector('#eltoast')).toBeTruthy();
+  });
+});

package/components/smooth-scroll/smooth-scroll.js

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

package/components/smooth-scroll/smooth-scroll.spec.js

@@ -0,0 +1,26 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './smooth-scroll.js';
+
+describe('dile-smooth-scroll', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSmoothScroll(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-smooth-scroll');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders without throwing', async () => {
+    const el = await renderSmoothScroll('<dile-smooth-scroll></dile-smooth-scroll>');
+    expect(el).toBeTruthy();
+  });
+
+  it('exposes smooth scroll methods without throwing when invoked', async () => {
+    const el = await renderSmoothScroll('<dile-smooth-scroll></dile-smooth-scroll>');
+    expect(typeof el.smoothScrollToTop).toBe('function');
+    expect(() => el.smoothScrollToTop()).not.toThrow();
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/utils",
-  "version": "3.0.17",
+  "version": "3.0.19",
   "description": "Utility Components of Diverse Uses Based on the Lit Library and Web Components Standard.",
   "main": "index.js",
   "scripts": {
@@ -20,7 +20,7 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/ui": "^3.4.4",
+    "@dile/ui": "^3.4.6",
     "@lion/ui": "^0.11.2",
     "linkify-string": "^4.1.3",
     "linkifyjs": "^4.1.3",
@@ -29,5 +29,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "addd7ce4fc5edbd5145fbe1202e61894b42e0c0a"
+  "gitHead": "57a54e50de1a24d64dcf478fa6d39624e1f775eb"
 }