@aquera/nile-elements 2.0.12 → 2.0.14

package/dist/src/nile-virtual-select/nile-virtual-select.test.d.ts

@@ -1 +1,2 @@
 import './nile-virtual-select';
+import '../nile-input/nile-input';

package/dist/src/nile-virtual-select/nile-virtual-select.test.js

@@ -1,5 +1,6 @@
-import { aTimeout, expect, fixture, html, nextFrame } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, nextFrame, waitUntil } from '@open-wc/testing';
 import './nile-virtual-select';
+import '../nile-input/nile-input';
 describe('NileVirtualSelect', () => {
     it('1. renders', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el).to.exist; });
     it('2. shadow root', async () => { const el = await fixture(html `<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot).to.not.be.null; });
@@ -131,7 +132,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
     }
     it('V1. multiple + no max-options-visible + autoResize=false renders fitted chips', async () => {
         const host = await fixture(html `<div style="width: 320px">
-        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        <nile-virtual-select showtooltip multiple .data=${DATA} .value=${LABELS}>
         </nile-virtual-select>
       </div>`);
         const el = host.querySelector('nile-virtual-select');
@@ -143,7 +144,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
     });
     it('V2. multiple + no max-options-visible + autoResize=true refits when the container resizes', async () => {
         const host = await fixture(html `<div style="width: 480px">
-        <nile-virtual-select multiple autoresize .data=${DATA} .value=${LABELS}>
+        <nile-virtual-select showtooltip multiple autoresize .data=${DATA} .value=${LABELS}>
         </nile-virtual-select>
       </div>`);
         const el = host.querySelector('nile-virtual-select');
@@ -158,7 +159,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
     });
     it('V3. explicit max-options-visible switches to fixed-count layout', async () => {
         const host = await fixture(html `<div style="width: 320px">
-        <nile-virtual-select
+        <nile-virtual-select showtooltip
           multiple
           max-options-visible="2"
           .data=${DATA}
@@ -174,7 +175,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
     });
     it('V3b. max-options-visible set as a property also switches to fixed-count layout', async () => {
         const host = await fixture(html `<div style="width: 320px">
-        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        <nile-virtual-select showtooltip multiple .data=${DATA} .value=${LABELS}>
         </nile-virtual-select>
       </div>`);
         const el = host.querySelector('nile-virtual-select');
@@ -187,7 +188,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
     });
     it('V3c. the default max-options-visible is still 3 and reading it does not opt out', async () => {
         const host = await fixture(html `<div style="width: 320px">
-        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        <nile-virtual-select showtooltip multiple .data=${DATA} .value=${LABELS}>
         </nile-virtual-select>
       </div>`);
         const el = host.querySelector('nile-virtual-select');
@@ -226,9 +227,9 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
     });
     it('V7. nile-select and nile-virtual-select agree on when fitting is active', async () => {
         const host = await fixture(html `<div style="width: 320px">
-        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        <nile-virtual-select showtooltip multiple .data=${DATA} .value=${LABELS}>
         </nile-virtual-select>
-        <nile-virtual-select
+        <nile-virtual-select showtooltip
           multiple
           max-options-visible="2"
           .data=${DATA}
@@ -264,16 +265,21 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
             return content.scrollWidth > content.clientWidth + 1;
         }).length;
     }
-    it('V12. without showtooltip a fitted chip is never truncated', async () => {
+    it('V12. without showtooltip the pre-2.0.9 chip row is used', async () => {
         const host = await fixture(html `<div style="width: 480px">
         <nile-virtual-select multiple .data=${DATA} .value=${LABELS}></nile-virtual-select>
       </div>`);
         const el = host.querySelector('nile-virtual-select');
         await settle(el);
+        await aTimeout(20);
+        await settle(el);
         expect(el.showTooltip).to.be.false;
-        expect(clippedChipCount(el)).to.equal(0);
-        // The chips that could not fit went into the +N button, not into an ellipsis.
-        expect(hiddenChips(el).length).to.be.greaterThan(0);
+        expect(tagsRoot(el).classList.contains('select__tags--fitted')).to.be.false;
+        expect(el.shadowRoot.querySelector('button.select__tags-count')).to.not.exist;
+        expect(chips(el).every(chip => !chip.style.maxWidth)).to.be.true;
+        const overflowCount = el.shadowRoot.querySelector('span.select__tags-count');
+        expect(overflowCount).to.exist;
+        expect(overflowCount.textContent).to.contain('More');
     });
     it('V13. showtooltip is what allows a fitted chip to be truncated', async () => {
         const host = await fixture(html `<div style="width: 480px">
@@ -289,7 +295,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
         expect(el.showTooltip).to.be.true;
         expect(clippedChipCount(el)).to.be.greaterThan(0);
     });
-    it('V8. no showtooltip attribute hides the chip tooltip', async () => {
+    it('V8. no showtooltip attribute renders no chip tooltips', async () => {
         const host = await fixture(html `<div style="width: 200px">
         <nile-virtual-select multiple .data=${DATA} .value=${LABELS}></nile-virtual-select>
       </div>`);
@@ -297,8 +303,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
         await settle(el);
         expect(el.showTooltip).to.be.false;
         expect(el.hasAttribute('showtooltip')).to.be.false;
-        expect(tips(el).length).to.be.greaterThan(0);
-        expect(liveTips(el).length).to.equal(0);
+        expect(tips(el).length).to.equal(0);
     });
     it('V9. showtooltip shows the chip tooltip', async () => {
         const host = await fixture(html `<div style="width: 200px">
@@ -327,7 +332,7 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
     });
     it('V11. the overflow button label and text never disagree, including first paint', async () => {
         const host = await fixture(html `<div style="width: 220px">
-        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        <nile-virtual-select showtooltip multiple .data=${DATA} .value=${LABELS}>
         </nile-virtual-select>
       </div>`);
         const el = host.querySelector('nile-virtual-select');
@@ -356,5 +361,315 @@ describe('NileVirtualSelect chip fitting behaviour matrix', () => {
         expect(el.shadowRoot.querySelector('button.select__tags-count')).to.not
             .exist;
     });
+    it('G1. default chips are not capped by the 2.0.9 chip styles; showtooltip caps them', async () => {
+        const host = await fixture(html `<div style="width: 480px">
+        <nile-virtual-select multiple .data=${DATA} .value=${LABELS.slice(0, 2)}></nile-virtual-select>
+        <nile-virtual-select multiple showtooltip .data=${DATA} .value=${LABELS.slice(0, 2)}></nile-virtual-select>
+      </div>`);
+        const [plain, tooltip] = Array.from(host.querySelectorAll('nile-virtual-select'));
+        await settle(plain);
+        await settle(tooltip);
+        const [plainChip] = chips(plain);
+        const [tooltipChip] = chips(tooltip);
+        expect(plainChip, 'plain select rendered no chips').to.exist;
+        expect(tooltipChip, 'tooltip select rendered no chips').to.exist;
+        expect(getComputedStyle(plainChip).maxWidth).to.equal('none');
+        expect(getComputedStyle(tooltipChip).maxWidth).to.not.equal('none');
+    });
+});
+describe('NileVirtualSelect chipMinWidth / chipMaxWidth attributes', () => {
+    const LABELS = ['Engineering Operations Team', 'Human Resources Department'];
+    const DATA = LABELS.map(label => ({ label, value: label }));
+    async function settle(el) {
+        await el.updateComplete;
+        await nextFrame();
+        await nextFrame();
+        await el.updateComplete;
+    }
+    const firstChip = (el) => el.shadowRoot.querySelector('.select__tags nile-tag');
+    it('R4a. defaults are 110 / 180 and are not written to the host', async () => {
+        const el = await fixture(html `<nile-virtual-select multiple .data=${DATA}></nile-virtual-select>`);
+        await settle(el);
+        expect(el.chipMinWidth).to.equal(110);
+        expect(el.chipMaxWidth).to.equal(180);
+        expect(el.hasAttribute('chipminwidth')).to.be.false;
+        expect(el.hasAttribute('chipmaxwidth')).to.be.false;
+    });
+    it('R4b. attributes still set the properties; properties do not add attributes', async () => {
+        const el = await fixture(html `<nile-virtual-select multiple .data=${DATA} chipminwidth="90" chipmaxwidth="150"></nile-virtual-select>`);
+        await settle(el);
+        expect(el.chipMinWidth).to.equal(90);
+        expect(el.chipMaxWidth).to.equal(150);
+        const plain = await fixture(html `<nile-virtual-select multiple .data=${DATA}></nile-virtual-select>`);
+        plain.chipMaxWidth = 140;
+        await settle(plain);
+        expect(plain.chipMaxWidth).to.equal(140);
+        expect(plain.hasAttribute('chipmaxwidth')).to.be.false;
+    });
+    it('R4c. showtooltip still caps squeezed chips at chipMaxWidth', async () => {
+        const host = await fixture(html `<div style="width: 300px">
+      <nile-virtual-select multiple showtooltip chipmaxwidth="150" .data=${DATA} .value=${LABELS}></nile-virtual-select>
+    </div>`);
+        const el = host.querySelector('nile-virtual-select');
+        await settle(el);
+        const chip = firstChip(el);
+        expect(chip, 'select rendered no chips').to.exist;
+        expect(chip.getBoundingClientRect().width).to.be.within(1, 150.5);
+        el.chipMaxWidth = 120;
+        await settle(el);
+        await nextFrame();
+        expect(firstChip(el).getBoundingClientRect().width).to.be.within(1, 120.5);
+    });
+});
+describe('NileVirtualSelect footer width with and without noWidthSync', () => {
+    const DATA = [{ label: 'a', value: 'a' }, { label: 'b', value: 'b' }];
+    async function openSelect(width, noWidthSync, portal = false) {
+        const host = await fixture(html `<div style="width: ${width}px">
+      <nile-virtual-select multiple .noWidthSync=${noWidthSync} .portal=${portal} .data=${DATA} .value=${['a']}></nile-virtual-select>
+    </div>`);
+        const el = host.querySelector('nile-virtual-select');
+        await el.updateComplete;
+        el.open = true;
+        const listbox = () => (portal
+            ? document.body.querySelector('.nile-virtual-select-portal-append #listbox')
+            : el.shadowRoot.querySelector('#listbox'));
+        await waitUntil(() => (listbox()?.getBoundingClientRect().width ?? 0) > 0, 'listbox never opened');
+        await nextFrame();
+        const box = listbox();
+        const footer = box.querySelector('.select__footer');
+        const combobox = el.shadowRoot.querySelector('[part~="combobox"]');
+        return { el, listbox: box, footer, combobox };
+    }
+    const labelShown = (footer, selector) => getComputedStyle(footer.querySelector(selector)).display !== 'none';
+    before(() => document.documentElement.style.setProperty('--nile-display-flex', 'flex'));
+    after(() => document.documentElement.style.removeProperty('--nile-display-flex'));
+    afterEach(async () => {
+        document.body.querySelectorAll('.nile-virtual-select-portal-append').forEach(n => n.remove());
+        document.head.querySelectorAll('style[id^="nile-virtual-select-styles-"]').forEach(n => n.remove());
+    });
+    for (const width of [120, 400]) {
+        it(`R3a. noWidthSync + multiple at ${width}px does not collapse and shows the whole footer`, async () => {
+            const { listbox, footer } = await openSelect(width, true);
+            expect(listbox.offsetWidth).to.be.greaterThan(60);
+            expect(listbox.offsetWidth).to.be.at.least(footer.offsetWidth);
+            expect(footer.scrollWidth).to.be.at.most(footer.clientWidth + 1);
+            expect(labelShown(footer, '.select__clear .select__footer-label')).to.be.true;
+            expect(labelShown(footer, '.select__footer-action .select__footer-label')).to.be.true;
+        });
+    }
+    it('R3b. width sync at normal width keeps the dropdown as wide as the trigger', async () => {
+        const { listbox, combobox, footer } = await openSelect(400, false);
+        expect(Math.abs(listbox.offsetWidth - combobox.offsetWidth)).to.be.below(2);
+        expect(labelShown(footer, '.select__clear .select__footer-label')).to.be.true;
+    });
+    it('R3c. width sync at a narrow width still collapses the footer labels (container queries kept)', async () => {
+        const { listbox, combobox, footer } = await openSelect(130, false);
+        expect(Math.abs(listbox.offsetWidth - combobox.offsetWidth)).to.be.below(2);
+        expect(labelShown(footer, '.select__clear .select__footer-label')).to.be.false;
+    });
+    for (const noWidthSync of [false, true]) {
+        it(`R3d. portal (noWidthSync=${noWidthSync}) pins the width and keeps the narrow-footer queries`, async () => {
+            const { el, listbox, combobox, footer } = await openSelect(130, noWidthSync, true);
+            expect(listbox.offsetWidth).to.be.within(combobox.offsetWidth - 8, combobox.offsetWidth);
+            expect(labelShown(footer, '.select__clear .select__footer-label')).to.be.false;
+            el.open = false;
+            await waitUntil(() => !document.body.querySelector('.nile-virtual-select-portal-append'), 'portal not cleaned up');
+        });
+    }
+});
+describe('NileVirtualSelect showtooltip chip layout taken while hidden', () => {
+    const LABELS = ['Engineering Operations Team', 'Human Resources Department'];
+    const DATA = LABELS.map(label => ({ label, value: label }));
+    async function frames(n = 3) {
+        for (let i = 0; i < n; i++)
+            await nextFrame();
+    }
+    const chipsOf = (el) => Array.from(el.shadowRoot.querySelectorAll('.select__tags nile-tag'));
+    async function hiddenSelect(showTooltip) {
+        const host = await fixture(html `<div style="display: none; width: 600px">
+      <nile-virtual-select multiple ?showtooltip=${showTooltip} .data=${DATA} .value=${LABELS}></nile-virtual-select>
+    </div>`);
+        const el = host.querySelector('nile-virtual-select');
+        await el.updateComplete;
+        await frames();
+        await el.updateComplete;
+        return { host, el };
+    }
+    it('R5a. showtooltip chips measured while hidden get real widths once shown', async () => {
+        const { host, el } = await hiddenSelect(true);
+        host.style.display = 'block';
+        await frames(4);
+        await el.updateComplete;
+        const chips = chipsOf(el);
+        expect(chips.length).to.equal(2);
+        for (const chip of chips) {
+            expect(chip.style.width).to.not.equal('0px');
+            expect(chip.offsetWidth).to.be.greaterThan(50);
+        }
+    });
+    it('R5c. without showtooltip a hidden-then-shown select is unaffected (no inline widths)', async () => {
+        const { host, el } = await hiddenSelect(false);
+        host.style.display = 'block';
+        await frames(4);
+        for (const chip of chipsOf(el)) {
+            expect(chip.style.width).to.equal('');
+            expect(chip.offsetWidth).to.be.greaterThan(50);
+        }
+    });
+});
+describe('NileVirtualSelect 2.0.8 compatibility matrix', () => {
+    const DATA = ['a', 'b', 'c'].map(v => ({ label: `L${v}`, value: v }));
+    async function settle(el) {
+        await el.updateComplete;
+        await nextFrame();
+        await nextFrame();
+        await el.updateComplete;
+    }
+    const chipCount = (el) => el.shadowRoot.querySelectorAll('.select__tags nile-tag').length;
+    function record(el, names) {
+        const seen = [];
+        names.forEach(name => el.addEventListener(name, () => seen.push(name)));
+        return seen;
+    }
+    it('CV1. a value set before data arrives is kept, and survives the data being replaced', async () => {
+        const el = await fixture(html `<nile-virtual-select multiple .value=${['b']}></nile-virtual-select>`);
+        await settle(el);
+        el.data = DATA;
+        await settle(el);
+        expect(el.value).to.deep.equal(['b']);
+        expect(chipCount(el)).to.equal(1);
+        el.data = [...DATA];
+        await settle(el);
+        expect(el.value).to.deep.equal(['b']);
+        expect(chipCount(el)).to.equal(1);
+    });
+    it('CV2. programmatic value updates the chips', async () => {
+        const el = await fixture(html `<nile-virtual-select multiple .data=${DATA}></nile-virtual-select>`);
+        await settle(el);
+        el.value = ['a', 'c'];
+        await settle(el);
+        expect(chipCount(el)).to.equal(2);
+        el.value = [];
+        await settle(el);
+        expect(chipCount(el)).to.equal(0);
+    });
+    it('CV3. removing a chip updates the value and emits tag-remove', async () => {
+        const el = await fixture(html `<nile-virtual-select multiple .data=${DATA} .value=${['a', 'b']}></nile-virtual-select>`);
+        await settle(el);
+        const seen = record(el, ['nile-tag-remove']);
+        const chip = el.shadowRoot.querySelector('.select__tags nile-tag');
+        expect(chip, 'select rendered no chips').to.exist;
+        chip.dispatchEvent(new CustomEvent('nile-remove', { bubbles: true, composed: true }));
+        await settle(el);
+        expect(el.value).to.deep.equal(['b']);
+        expect(seen).to.deep.equal(['nile-tag-remove']);
+    });
+    it('CV4. the clear button empties the value and emits nile-clear', async () => {
+        const el = await fixture(html `<nile-virtual-select multiple clearable .data=${DATA} .value=${['a', 'b']}></nile-virtual-select>`);
+        await settle(el);
+        const seen = record(el, ['nile-clear']);
+        const clear = el.shadowRoot.querySelector('[part~="clear-button"]');
+        expect(clear, 'clear button rendered').to.exist;
+        clear.click();
+        await settle(el);
+        expect(el.value).to.deep.equal([]);
+        expect(chipCount(el)).to.equal(0);
+        expect(seen).to.include('nile-clear');
+    });
+    it('CV5. form reset restores the value attribute', async () => {
+        const form = await fixture(html `<form>
+      <nile-virtual-select name="s" multiple .data=${DATA} value="a"></nile-virtual-select>
+    </form>`);
+        const el = form.querySelector('nile-virtual-select');
+        await settle(el);
+        el.value = ['c'];
+        await settle(el);
+        form.reset();
+        await settle(el);
+        expect(el.value).to.deep.equal(['a']);
+    });
+    it('CV6. portal + search: typing in the portalled search keeps the value', async () => {
+        const el = await fixture(html `<nile-virtual-select multiple portal searchEnabled .data=${DATA} .value=${['a']}></nile-virtual-select>`);
+        await settle(el);
+        el.open = true;
+        await waitUntil(() => document.body.querySelector('.nile-virtual-select-portal-append .select__search nile-input'), 'portal search never rendered');
+        const search = document.body.querySelector('.nile-virtual-select-portal-append .select__search nile-input');
+        await search.updateComplete;
+        const input = search.shadowRoot.querySelector('input');
+        input.value = 'Lb';
+        input.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+        await settle(el);
+        expect(el.value).to.deep.equal(['a']);
+        el.open = false;
+        await waitUntil(() => !document.body.querySelector('.nile-virtual-select-portal-append'), 'portal not cleaned up');
+    });
+    it('CV7. reconnecting without showtooltip keeps value and chips', async () => {
+        const host = await fixture(html `<div style="width: 500px">
+      <nile-virtual-select multiple .data=${DATA} .value=${['a', 'b']}></nile-virtual-select>
+    </div>`);
+        const el = host.querySelector('nile-virtual-select');
+        await settle(el);
+        el.remove();
+        host.appendChild(el);
+        await settle(el);
+        expect(el.value).to.deep.equal(['a', 'b']);
+        expect(chipCount(el)).to.equal(2);
+    });
+});
+describe('NileVirtualSelect showtooltip tooltip on sub-pixel truncation', () => {
+    const A = 'Engineering Operations';
+    const B = 'Human Resources Department And Payroll';
+    async function frames(n = 5) {
+        for (let i = 0; i < n; i++)
+            await nextFrame();
+    }
+    async function mount(width, chipMaxWidth) {
+        const host = await fixture(html `<div style="width: ${width}px">
+      <nile-virtual-select multiple showtooltip chipminwidth="40" chipmaxwidth=${chipMaxWidth} .data=${[A, B].map(v => ({ label: v, value: v }))} .value=${[A, B]}></nile-virtual-select>
+    </div>`);
+        const el = host.querySelector('nile-virtual-select');
+        await el.updateComplete;
+        await frames();
+        await el.updateComplete;
+        await frames(2);
+        return el;
+    }
+    function visiblyCut(chip) {
+        const content = chip.shadowRoot.querySelector('[part="content"]');
+        const text = content.assignedNodes({ flatten: true }).find(n => n.textContent?.trim());
+        const range = document.createRange();
+        range.selectNodeContents(text);
+        const over = range.getBoundingClientRect().right - content.getBoundingClientRect().right;
+        return { cut: over > 1 / 64, over, pxGap: content.scrollWidth - content.clientWidth };
+    }
+    function chipsAndTips(el) {
+        const chips = Array.from(el.shadowRoot.querySelectorAll('.select__tags nile-tag'));
+        const tips = Array.from(el.shadowRoot.querySelectorAll('.select__tags nile-lite-tooltip'));
+        return chips
+            .map((chip, i) => ({ chip, tipOn: !!tips[i] && !tips[i].hasAttribute('disabled') }))
+            .filter(({ chip }) => chip.style.display !== 'none');
+    }
+    it('TT1. every visibly cut chip has its tooltip, every uncut chip has none (sweep across the edge)', async () => {
+        const wide = await mount(900, 400);
+        const natural = chipsAndTips(wide)[0].chip.offsetWidth;
+        let subPixelCuts = 0;
+        for (let max = natural - 4; max <= natural + 1; max += 0.25) {
+            const el = await mount(330, max);
+            for (const { chip, tipOn } of chipsAndTips(el)) {
+                const { cut, pxGap } = visiblyCut(chip);
+                expect(tipOn, `chipMaxWidth ${max}: tooltip ${tipOn} but cut ${cut}`).to.equal(cut);
+                if (cut && pxGap <= 1)
+                    subPixelCuts++;
+            }
+        }
+        expect(subPixelCuts, 'sweep reached the sub-pixel truncation window').to.be.greaterThan(0);
+    });
+    it('TT2. chips at their natural width get no tooltip', async () => {
+        const el = await mount(900, 400);
+        for (const { chip, tipOn } of chipsAndTips(el)) {
+            expect(visiblyCut(chip).cut).to.be.false;
+            expect(tipOn).to.be.false;
+        }
+    });
 });
 //# sourceMappingURL=nile-virtual-select.test.js.map