@dile/utils 3.3.6 → 3.3.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dile/utils",
-  "version": "3.3.6",
+  "version": "3.3.7",
   "description": "Utility Components of Diverse Uses Based on the Lit Library and Web Components Standard.",
   "main": "index.js",
   "scripts": {
@@ -20,8 +20,8 @@
   },
   "homepage": "https://dile-components.com/",
   "dependencies": {
-    "@dile/iconlib": "^2.0.1",
-    "@dile/ui": "^3.18.0",
+    "@dile/iconlib": "^2.0.2",
+    "@dile/ui": "^3.18.1",
     "@lion/ui": "^0.21.0",
     "linkify-string": "^4.1.3",
     "linkifyjs": "^4.1.3",
@@ -31,5 +31,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1b065736666cc26f8afc1106ec7ffc98feaec60e"
+  "gitHead": "6724d25c93731ed35e6710228a6d0b18e5b6ebb1"
 }

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

@@ -1,35 +0,0 @@
-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/datepicker/calendar.spec.js

@@ -1,136 +0,0 @@
-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);
-  });
-
-  it('has accessible navigation buttons with aria-label', async () => {
-    const el = await renderCalendar('<dile-calendar></dile-calendar>');
-    await el.updateComplete;
-
-    const prevButtons = el.shadowRoot.querySelectorAll('.calendar__previous-button');
-    const nextButtons = el.shadowRoot.querySelectorAll('.calendar__next-button');
-
-    expect(prevButtons.length).toBe(2); // Year and Month prev
-    expect(nextButtons.length).toBe(2); // Year and Month next
-
-    prevButtons.forEach(btn => {
-      expect(btn.getAttribute('aria-label')).toBeTruthy();
-    });
-    nextButtons.forEach(btn => {
-      expect(btn.getAttribute('aria-label')).toBeTruthy();
-    });
-  });
-
-  it('has accessible grid semantics and screen-reader day labels', async () => {
-    const el = await renderCalendar('<dile-calendar></dile-calendar>');
-    await el.updateComplete;
-
-    const gridcells = el.shadowRoot.querySelectorAll('[role="gridcell"]');
-    expect(gridcells.length).toBeGreaterThan(0);
-
-    const dayButtons = el.shadowRoot.querySelectorAll('.calendar__day-button[role="button"]');
-    expect(dayButtons.length).toBeGreaterThan(0);
-
-    const srLabels = el.shadowRoot.querySelectorAll('.calendar__day-button .u-sr-only');
-    expect(srLabels.length).toBe(dayButtons.length);
-    expect(srLabels[0].textContent.trim().length).toBeGreaterThan(0);
-  });
-
-  it('supports roving tabindex where only one active date has tabindex 0', async () => {
-    const el = await renderCalendar('<dile-calendar></dile-calendar>');
-    await el.updateComplete;
-
-    const focusableDays = el.shadowRoot.querySelectorAll('.calendar__day-button[tabindex="0"]');
-    expect(focusableDays.length).toBe(1);
-
-    const unfocusableDays = el.shadowRoot.querySelectorAll('.calendar__day-button[tabindex="-1"]');
-    expect(unfocusableDays.length).toBeGreaterThan(0);
-  });
-
-  it('navigates days with keyboard arrow keys', async () => {
-    const el = await renderCalendar('<dile-calendar></dile-calendar>');
-    await el.updateComplete;
-
-    const initialDate = new Date(2026, 0, 15);
-    el.centralDate = initialDate;
-    await el.updateComplete;
-
-    const contentWrapper = el.shadowRoot.getElementById('js-content-wrapper');
-
-    // ArrowRight: next day
-    contentWrapper.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowRight', bubbles: true, composed: true }));
-    await el.updateComplete;
-    expect(el.centralDate.getDate()).toBe(16);
-
-    // ArrowLeft: previous day
-    contentWrapper.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowLeft', bubbles: true, composed: true }));
-    await el.updateComplete;
-    expect(el.centralDate.getDate()).toBe(15);
-
-    // ArrowDown: next week (+7 days)
-    contentWrapper.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true, composed: true }));
-    await el.updateComplete;
-    expect(el.centralDate.getDate()).toBe(22);
-
-    // ArrowUp: previous week (-7 days)
-    contentWrapper.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp', bubbles: true, composed: true }));
-    await el.updateComplete;
-    expect(el.centralDate.getDate()).toBe(15);
-  });
-
-  it('selects date when clicking a day button', async () => {
-    const el = await renderCalendar('<dile-calendar></dile-calendar>');
-    await el.updateComplete;
-
-    let selectedDate = null;
-    el.addEventListener('user-selected-date-changed', (e) => {
-      selectedDate = e.detail.selectedDate;
-    });
-
-    const activeDayButton = el.shadowRoot.querySelector('.calendar__day-button[tabindex="0"]');
-    activeDayButton.click();
-    await el.updateComplete;
-
-    expect(selectedDate).toBeTruthy();
-    expect(selectedDate instanceof Date).toBe(true);
-  });
-
-  it('navigates next and previous months and years', async () => {
-    const el = await renderCalendar('<dile-calendar></dile-calendar>');
-    el.centralDate = new Date(2026, 5, 15); // June 2026
-    await el.updateComplete;
-
-    el.goToNextMonth();
-    await el.updateComplete;
-    expect(el.centralDate.getMonth()).toBe(6); // July
-
-    el.goToPreviousMonth();
-    await el.updateComplete;
-    expect(el.centralDate.getMonth()).toBe(5); // June
-
-    el.goToNextYear();
-    await el.updateComplete;
-    expect(el.centralDate.getFullYear()).toBe(2027);
-
-    el.goToPreviousYear();
-    await el.updateComplete;
-    expect(el.centralDate.getFullYear()).toBe(2026);
-  });
-});

package/components/datepicker/datepicker.spec.js

@@ -1,45 +0,0 @@
-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-iconlib')).toBeTruthy();
-  });
-
-  it('updates value when a date is selected from the calendar and closes overlay', async () => {
-    const el = await renderDatepicker('<dile-datepicker name="birthdate"></dile-datepicker>');
-    const calendar = el.shadowRoot.querySelector('dile-calendar');
-    const menu = el.shadowRoot.getElementById('menu');
-
-    calendar.dispatchEvent(new CustomEvent('user-selected-date-changed', {
-      detail: { selectedDate: new Date(2024, 0, 15) },
-      bubbles: true,
-      composed: true,
-    }));
-    await el.updateComplete;
-
-    expect(el.value).toBeTruthy();
-    expect(menu._overlayClass).toBe('');
-  });
-
-  it('passes firstDayOfWeek to the dile-calendar child', async () => {
-    const el = await renderDatepicker('<dile-datepicker name="birthdate" firstDayOfWeek="1"></dile-datepicker>');
-    await el.updateComplete;
-    const calendar = el.shadowRoot.querySelector('dile-calendar');
-    expect(calendar.firstDayOfWeek).toBe(1);
-  });
-});

package/components/datepicker/datetimepicker.spec.js

@@ -1,55 +0,0 @@
-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, trigger icon, 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-iconlib')).toBeTruthy();
-    expect(el.icon).toBe('lucide.calendar-clock');
-    expect(el.shadowRoot.querySelector('dile-calendar')).toBeTruthy();
-    expect(el.shadowRoot.querySelector('dile-time-picker')).toBeTruthy();
-  });
-
-  it('renders an accessible accept button with aria-label and type="button"', async () => {
-    const el = await renderDatetimepicker('<dile-datetimepicker name="appointment" acceptLabel="Confirm selection"></dile-datetimepicker>');
-    const acceptBtn = el.shadowRoot.querySelector('.accept-button');
-
-    expect(acceptBtn).toBeTruthy();
-    expect(acceptBtn.tagName.toLowerCase()).toBe('button');
-    expect(acceptBtn.getAttribute('type')).toBe('button');
-    expect(acceptBtn.getAttribute('aria-label')).toBe('Confirm selection');
-    expect(acceptBtn.querySelector('dile-icon')).toBeTruthy();
-  });
-
-  it('updates value combining date and time when accepted via method', 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} /);
-  });
-
-  it('updates value and closes overlay when accept button is clicked', async () => {
-    const el = await renderDatetimepicker('<dile-datetimepicker name="appointment"></dile-datetimepicker>');
-    const acceptBtn = el.shadowRoot.querySelector('.accept-button');
-    const menu = el.shadowRoot.getElementById('menu');
-
-    acceptBtn.click();
-    await el.updateComplete;
-
-    expect(el.value).toMatch(/^\d{4}-\d{2}-\d{2} /);
-    expect(menu._overlayClass).toBe('');
-  });
-});

package/components/graph/graph.spec.js

@@ -1,38 +0,0 @@
-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.spec.js

@@ -1,25 +0,0 @@
-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();
-  });
-});