@dile/ui 3.4.5 → 3.5.0

package/components/accordion/accordion-item.js

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

package/components/accordion/accordion.js

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

package/components/app-drawer/app-drawer.js

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

package/components/avatar/avatar.js

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

package/components/avatar/avatar.spec.js

@@ -0,0 +1,25 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './avatar.js';
+
+describe('dile-avatar', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderAvatar(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-avatar');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders an image placeholder div when no initial is set', async () => {
+    const el = await renderAvatar('<dile-avatar></dile-avatar>');
+    expect(el.shadowRoot.querySelector('#img')).toBeTruthy();
+  });
+
+  it('renders the first letter of the initial property', async () => {
+    const el = await renderAvatar('<dile-avatar initial="Miguel"></dile-avatar>');
+    expect(el.shadowRoot.querySelector('.initial').textContent.trim()).toBe('M');
+  });
+});

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

@@ -1,2 +1,4 @@
 import { DileBoxSelectorItem } from './src/DileBoxSelectorItem.js';
-customElements.define("dile-box-selector-item", DileBoxSelectorItem);
+if (!customElements.get("dile-box-selector-item")) {
+  customElements.define("dile-box-selector-item", DileBoxSelectorItem);
+}

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

@@ -0,0 +1,27 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './box-selector-item.js';
+
+describe('dile-box-selector-item', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderItem(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-box-selector-item');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the label property', async () => {
+    const el = await renderItem('<dile-box-selector-item label="Option A"></dile-box-selector-item>');
+    expect(el.shadowRoot.textContent.trim()).toBe('Option A');
+  });
+
+  it('reflects selected attribute when clicked', async () => {
+    const el = await renderItem('<dile-box-selector-item label="Option A"></dile-box-selector-item>');
+    el.select();
+    await el.updateComplete;
+    expect(el.selected).toBe(false);
+  });
+});

package/components/box-selector/box-selector.js

@@ -1,2 +1,4 @@
 import { DileBoxSelector } from './src/DileBoxSelector.js'
-customElements.define("dile-box-selector", DileBoxSelector);
+if (!customElements.get("dile-box-selector")) {
+  customElements.define("dile-box-selector", DileBoxSelector);
+}

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

@@ -0,0 +1,27 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './box-selector.js';
+import './box-selector-item.js';
+
+describe('dile-box-selector', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderSelector(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-box-selector');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted items', async () => {
+    const el = await renderSelector(`
+      <dile-box-selector>
+        <dile-box-selector-item label="One"></dile-box-selector-item>
+        <dile-box-selector-item label="Two"></dile-box-selector-item>
+      </dile-box-selector>
+    `);
+    expect(el.shadowRoot.querySelector('slot')).toBeTruthy();
+    expect(el.querySelectorAll('dile-box-selector-item').length).toBe(2);
+  });
+});

package/components/breadcrumbs/breadcrumbs-item.js

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

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

@@ -0,0 +1,28 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './breadcrumbs-item.js';
+
+describe('dile-breadcrumbs-item', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderItem(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-breadcrumbs-item');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders an anchor when href is set', async () => {
+    const el = await renderItem('<dile-breadcrumbs-item href="/home">Home</dile-breadcrumbs-item>');
+    const anchor = el.shadowRoot.querySelector('a');
+    expect(anchor).toBeTruthy();
+    expect(anchor.getAttribute('href')).toBe('/home');
+  });
+
+  it('renders a span when href is not set', async () => {
+    const el = await renderItem('<dile-breadcrumbs-item>Current</dile-breadcrumbs-item>');
+    expect(el.shadowRoot.querySelector('span')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('a')).toBeNull();
+  });
+});

package/components/breadcrumbs/breadcrumbs.js

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

package/components/breadcrumbs/breadcrumbs.spec.js

@@ -0,0 +1,33 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './breadcrumbs.js';
+
+describe('dile-breadcrumbs', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderBreadcrumbs(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-breadcrumbs');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders slotted breadcrumb items', async () => {
+    const el = await renderBreadcrumbs(`
+      <dile-breadcrumbs>
+        <dile-breadcrumbs-item href="/">Home</dile-breadcrumbs-item>
+        <dile-breadcrumbs-item>Current</dile-breadcrumbs-item>
+      </dile-breadcrumbs>
+    `);
+    expect(el.querySelectorAll('dile-breadcrumbs-item').length).toBe(2);
+  });
+
+  it('renders items from the items property', async () => {
+    const el = await renderBreadcrumbs('<dile-breadcrumbs></dile-breadcrumbs>');
+    el.items = [{ text: 'Home', href: '/' }, { text: 'Page' }];
+    await el.updateComplete;
+
+    expect(el.shadowRoot.querySelectorAll('dile-breadcrumbs-item').length).toBe(2);
+  });
+});

package/components/button/button-icon.js

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

package/components/button/button.js

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

package/components/card/card-slide.js

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

package/components/card/card-slide.spec.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './card-slide.js';
+
+describe('dile-card-slide', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderCardSlide(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-card-slide');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the title as a toggle button', async () => {
+    const el = await renderCardSlide('<dile-card-slide title="My title">Content</dile-card-slide>');
+    const button = el.shadowRoot.querySelector('.card-title button');
+    expect(button).toBeTruthy();
+    expect(el.opened).toBe(false);
+  });
+
+  it('toggles opened state when clicked', async () => {
+    const el = await renderCardSlide('<dile-card-slide title="My title">Content</dile-card-slide>');
+    el.shadowRoot.querySelector('.card-title button').click();
+    await el.updateComplete;
+
+    expect(el.opened).toBe(true);
+  });
+});

package/components/card/card.js

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

package/components/card/card.spec.js

@@ -0,0 +1,26 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './card.js';
+
+describe('dile-card', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderCard(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-card');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the title and slotted content', async () => {
+    const el = await renderCard('<dile-card title="My title">Content</dile-card>');
+    expect(el.shadowRoot.querySelector('.card-title').textContent.trim()).toBe('My title');
+    expect(el.textContent.trim()).toBe('Content');
+  });
+
+  it('does not render a title element when title is not set', async () => {
+    const el = await renderCard('<dile-card>Content</dile-card>');
+    expect(el.shadowRoot.querySelector('.card-title')).toBeNull();
+  });
+});

package/components/checkbox/checkbox.js

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

package/components/chip/chip.js

@@ -1,2 +1,4 @@
 import { DileChip } from "./src/DileChip.js";
-customElements.define('dile-chip', DileChip);
+if (!customElements.get('dile-chip')) {
+  customElements.define('dile-chip', DileChip);
+}

package/components/chip/chip.spec.js

@@ -0,0 +1,31 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './chip.js';
+
+describe('dile-chip', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderChip(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-chip');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted content and a close icon', async () => {
+    const el = await renderChip('<dile-chip>Tag</dile-chip>');
+    expect(el.textContent.trim()).toBe('Tag');
+    expect(el.shadowRoot.querySelector('dile-icon')).toBeTruthy();
+  });
+
+  it('dispatches dile-chip-icon-click with the name when the icon is clicked', async () => {
+    const el = await renderChip('<dile-chip name="tag1">Tag</dile-chip>');
+    let detail = null;
+    el.addEventListener('dile-chip-icon-click', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelector('dile-icon').click();
+
+    expect(detail).toEqual({ name: 'tag1' });
+  });
+});

package/components/color-picker/color-picker.js

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

package/components/confirm/confirm.js

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

package/components/confirm/confirm.spec.js

@@ -0,0 +1,32 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './confirm.js';
+
+describe('dile-confirm', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderConfirm(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-confirm');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a dile-modal with the default action labels', async () => {
+    const el = await renderConfirm('<dile-confirm>Are you sure?</dile-confirm>');
+    expect(el.shadowRoot.querySelector('dile-modal')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('.accept').textContent.trim()).toBe('Accept');
+    expect(el.shadowRoot.querySelector('.cancel').textContent.trim()).toBe('Cancell');
+  });
+
+  it('dispatches dile-confirm-accepted when accept is clicked', async () => {
+    const el = await renderConfirm('<dile-confirm>Are you sure?</dile-confirm>');
+    let accepted = false;
+    el.addEventListener('dile-confirm-accepted', () => { accepted = true; });
+
+    el.shadowRoot.querySelector('.accept').click();
+
+    expect(accepted).toBe(true);
+  });
+});

package/components/confirm-text/confirm-text.js

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

package/components/confirm-text/confirm-text.spec.js

@@ -0,0 +1,29 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './confirm-text.js';
+
+describe('dile-confirm-text', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderConfirmText(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-confirm-text');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the title and an input to type the confirmation text', async () => {
+    const el = await renderConfirmText('<dile-confirm-text title="Delete item">This cannot be undone</dile-confirm-text>');
+    expect(el.shadowRoot.querySelector('.title').textContent.trim()).toBe('Delete item');
+    expect(el.shadowRoot.querySelector('dile-input')).toBeTruthy();
+  });
+
+  it('shows negative feedback when accepting with an empty text field', async () => {
+    const el = await renderConfirmText('<dile-confirm-text>Confirm</dile-confirm-text>');
+    el.shadowRoot.querySelector('.accept').click();
+    await el.updateComplete;
+
+    expect(el.feedback.shadowRoot.textContent).toContain(el.emptyTextMessage);
+  });
+});

package/components/copy-markdown-url/copy-markdown-url.spec.js

@@ -0,0 +1,27 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './copy-markdown-url.js';
+
+describe('dile-copy-markdown-url', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderCopyMarkdownUrl(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-copy-markdown-url');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders a dile-copy-text with the slotted content', async () => {
+    const el = await renderCopyMarkdownUrl('<dile-copy-markdown-url url="/doc.md">Copy link</dile-copy-markdown-url>');
+    expect(el.shadowRoot.querySelector('dile-copy-text')).toBeTruthy();
+    expect(el.textContent.trim()).toBe('Copy link');
+  });
+
+  it('defaults to an empty url and content', async () => {
+    const el = await renderCopyMarkdownUrl('<dile-copy-markdown-url></dile-copy-markdown-url>');
+    expect(el.url).toBe('');
+    expect(el.content).toBe('');
+  });
+});

package/components/copy-markdown-url/index.js

@@ -1,5 +1,7 @@
 import { DileCopyMarkdownUrl } from './src/DileCopyMarkdownUrl.js';
 
-window.customElements.define('dile-copy-markdown-url', DileCopyMarkdownUrl);
+if (!customElements.get('dile-copy-markdown-url')) {
+  window.customElements.define('dile-copy-markdown-url', DileCopyMarkdownUrl);
+}
 
 export { DileCopyMarkdownUrl };

package/components/copy-text/copy-text.spec.js

@@ -0,0 +1,38 @@
+import { describe, it, expect, afterEach, vi } from 'vitest';
+import './copy-text.js';
+
+describe('dile-copy-text', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderCopyText(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-copy-text');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted content inside a clickable link', async () => {
+    const el = await renderCopyText('<dile-copy-text content="hello">Copy me</dile-copy-text>');
+    const link = el.shadowRoot.querySelector('a');
+    expect(link).toBeTruthy();
+    expect(el.textContent.trim()).toBe('Copy me');
+  });
+
+  it('dispatches dile-text-copied with the content on copy()', async () => {
+    const el = await renderCopyText('<dile-copy-text content="hello">Copy me</dile-copy-text>');
+    const writeText = vi.fn().mockResolvedValue(undefined);
+    vi.stubGlobal('navigator', { ...navigator, clipboard: { writeText } });
+
+    let detail = null;
+    el.addEventListener('dile-text-copied', (e) => { detail = e.detail; });
+
+    await el.copy();
+
+    expect(writeText).toHaveBeenCalledWith('hello');
+    expect(detail).toEqual({ text: 'hello' });
+
+    vi.unstubAllGlobals();
+  });
+});

package/components/copy-text/index.js

@@ -1,5 +1,7 @@
 import { DileCopyText } from './src/DileCopyText.js';
 
-window.customElements.define('dile-copy-text', DileCopyText);
+if (!customElements.get('dile-copy-text')) {
+  window.customElements.define('dile-copy-text', DileCopyText);
+}
 
 export { DileCopyText };

package/components/drop-file/drop-file.js

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

package/components/drop-file/drop-file.spec.js

@@ -0,0 +1,33 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './drop-file.js';
+
+describe('dile-drop-file', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderDropFile(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-drop-file');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the drop zone with label and file input', async () => {
+    const el = await renderDropFile('<dile-drop-file label="Upload"></dile-drop-file>');
+    expect(el.shadowRoot.querySelector('#dropZone')).toBeTruthy();
+    expect(el.shadowRoot.querySelector('label').textContent.trim()).toBe('Upload');
+    expect(el.shadowRoot.querySelector('input[type="file"]')).toBeTruthy();
+  });
+
+  it('clears the selected file name', async () => {
+    const el = await renderDropFile('<dile-drop-file></dile-drop-file>');
+    el.fileName = 'test.png';
+    await el.updateComplete;
+
+    el.clear();
+    await el.updateComplete;
+
+    expect(el.fileName).toBe('');
+  });
+});

package/components/drop-file/file-preview.js

@@ -1,2 +1,4 @@
 import { DileFilePreview } from "./src/DileFilePreview.js";
-customElements.define('dile-file-preview', DileFilePreview);
+if (!customElements.get('dile-file-preview')) {
+  customElements.define('dile-file-preview', DileFilePreview);
+}

package/components/drop-file/file-preview.spec.js

@@ -0,0 +1,35 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './file-preview.js';
+
+describe('dile-file-preview', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  async function renderFilePreview(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-file-preview');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders nothing when there is no fileName', async () => {
+    const el = await renderFilePreview('<dile-file-preview></dile-file-preview>');
+    expect(el.shadowRoot.querySelector('div')).toBeNull();
+  });
+
+  it('renders the file name and a clear link when fileName is set', async () => {
+    const el = await renderFilePreview('<dile-file-preview fileName="report.pdf" selectedFileLabel="Selected"></dile-file-preview>');
+    expect(el.shadowRoot.querySelector('div span').textContent).toContain('report.pdf');
+  });
+
+  it('dispatches dile-file-clear when the clear link is clicked', async () => {
+    const el = await renderFilePreview('<dile-file-preview fileName="report.pdf"></dile-file-preview>');
+    let detail = null;
+    el.addEventListener('dile-file-clear', (e) => { detail = e.detail; });
+
+    el.shadowRoot.querySelector('a').click();
+
+    expect(detail).toEqual({ fileName: 'report.pdf' });
+  });
+});

package/components/floating-feedback/floating-feedback.spec.js

@@ -0,0 +1,30 @@
+import { describe, it, expect, afterEach } from 'vitest';
+import './floating-feedback.js';
+
+describe('dile-floating-feedback', () => {
+  afterEach(() => {
+    document.body.innerHTML = '';
+    const styles = document.getElementById('dile-floating-feedback-styles');
+    if (styles) styles.remove();
+  });
+
+  async function renderFloatingFeedback(html) {
+    document.body.innerHTML = html;
+    const el = document.body.querySelector('dile-floating-feedback');
+    await el.updateComplete;
+    return el;
+  }
+
+  it('renders the slotted content', async () => {
+    const el = await renderFloatingFeedback('<dile-floating-feedback feedback="Copied!"><button>Click</button></dile-floating-feedback>');
+    expect(el.shadowRoot.querySelector('slot')).toBeTruthy();
+    expect(el.textContent.trim()).toBe('Click');
+  });
+
+  it('creates a floating text element in the document body when shown', async () => {
+    const el = await renderFloatingFeedback('<dile-floating-feedback feedback="Copied!"><button>Click</button></dile-floating-feedback>');
+    el.show();
+
+    expect(document.body.querySelector('.dile-floating-feedback-text')).toBeTruthy();
+  });
+});