@aquera/nile-elements 2.0.8 → 2.0.9

package/src/nile-select/virtual-scroll-helper.ts

@@ -20,6 +20,9 @@ export class VirtualScrollHelper {
           .name=${component.name}
           .value=${component.value}
           .autoResize=${component.autoResize}
+          .showTooltip=${component.showTooltip}
+          .chipMinWidth=${component.chipMinWidth}
+          .chipMaxWidth=${component.chipMaxWidth}
           .placeholder=${component.placeholder}
           .size=${component.size}
           .searchEnabled=${component.searchEnabled}
@@ -47,7 +50,6 @@ export class VirtualScrollHelper {
           .renderItemConfig=${component.renderItemConfig}
           .blockValueChange=${component.blockValueChange}
           .noWidthSync=${component.noWidthSync}
-          .maxOptionsVisible=${component.maxOptionsVisible}
           .enableTabClose=${component.enableTabClose}
           .data=${component.data}
           .open=${component.open}

package/src/nile-virtual-select/nile-virtual-select.css.ts

@@ -206,7 +206,7 @@ export const styles = css`
     display: flex;
     flex: 1;
     align-items: center;
-    flex-wrap: no-wrap;
+    flex-wrap: nowrap;
     margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));
     width: 100%;
     overflow: hidden;
@@ -227,6 +227,98 @@ export const styles = css`
     margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
   }
 
+  button.select__tags-count {
+    appearance: none;
+    -webkit-appearance: none;
+    background: none;
+    text-align: inherit;
+  }
+
+  button.select__tags-count:disabled {
+    cursor: not-allowed;
+  }
+
+  .select__tags--fitted {
+    min-width: 0;
+  }
+
+  .select__tags nile-lite-tooltip.select__tag-tip {
+    display: contents;
+  }
+
+  .select__tags nile-tag {
+    flex: 0 1 auto;
+    cursor: pointer;
+    min-width: 0;
+  }
+
+  /* A chip is capped - and so truncated - only when a tooltip can reveal the
+     full value. Without one it keeps its natural width and the fit pass moves
+     the surplus into the +N button instead. */
+  :host([showtooltip]) .select__tags nile-tag {
+    max-width: var(--nile-width-180px, var(--ng-height-180px));
+  }
+
+  /* Only the fitted layout can move a chip into the +N button, so only there
+     can a chip refuse to shrink. */
+  :host(:not([showtooltip])) .select__tags--fitted nile-tag {
+    flex-shrink: 0;
+  }
+
+  .select__tags nile-tag::part(base) {
+    max-width: 100%;
+  }
+
+  .select__tags nile-tag::part(prefix_content_wrapper) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  .select__tags nile-tag::part(content) {
+    display: block;
+    flex: 1 1 auto;
+    min-width: 0;
+    /* The tag's line-height of 1 leaves the clip box shorter than the glyph
+       box, so descenders are cut. Pad the clip box, negate it in layout. */
+    padding-block: 3px;
+    margin-block: -3px;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  :host([showtooltip]) .select__tags nile-tag::part(content) {
+    text-overflow: ellipsis;
+  }
+
+  .select__tags nile-tag::part(remove-button) {
+    flex: 0 0 auto;
+  }
+
+  .select__tags--fitted nile-tag:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    outline-offset: 1px;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
+
+  .select__tags--fitted .select__tags-count {
+    flex: 0 0 auto;
+    margin: 0;
+    padding: 0 var(--nile-spacing-xsmall, var(--ng-spacing-md));
+    height: var(--nile-height-26px, var(--ng-height-26px));
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    cursor: pointer;
+    border: 1px dashed
+      var(--nile-colors-neutral-500, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
+
+  .select__tags--fitted .select__tags-count:focus-visible {
+    outline: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
+    outline-offset: 1px;
+  }
+
   .select__tags::slotted(nile-tag) {
     cursor: pointer !important;
   }
@@ -457,9 +549,41 @@ export const styles = css`
     flex-direction: row;
     align-items: center;
     padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
-    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    gap: var(--nile-spacing-none, var(--ng-spacing-none));
     justify-content: space-between;
     box-sizing: unset;
+    container-type: inline-size;
+    container-name: nile-select-footer;
+  }
+
+  .select__footer-action,
+  .select__footer .select__clear {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    min-width: 0;
+  }
+
+  .select__footer-glyph {
+    flex: 0 0 auto;
+    display: inline-flex;
+    vertical-align: middle;
+  }
+
+  .select__footer-label {
+    white-space: nowrap;
+  }
+
+  @container nile-select-footer (max-width: 148px) {
+    .select__clear .select__footer-label {
+      display: none;
+    }
+  }
+
+  @container nile-select-footer (max-width: 113px) {
+    .select__footer-label {
+      display: none;
+    }
   }
 
   .tag__prefix[slot='prefix'] {
@@ -496,10 +620,6 @@ export const styles = css`
     }
   }
 
-  .select__invisible{
-    opacity: 0;
-  }
-
   .select__prefix--from-options {
     margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
   }

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

@@ -1,4 +1,4 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, nextFrame } from '@open-wc/testing';
 import './nile-virtual-select';
 import type { NileVirtualSelect } from './nile-virtual-select';
 
@@ -104,3 +104,354 @@ describe('NileVirtualSelect', () => {
   it('99. no nile-calendar', async () => { const el = await fixture<NileVirtualSelect>(html`<nile-virtual-select></nile-virtual-select>`); expect(el.shadowRoot!.querySelector('nile-calendar')).to.be.null; });
   it('100. full integration', async () => { const el = await fixture<NileVirtualSelect>(html`<nile-virtual-select class="vs" id="vs1"></nile-virtual-select>`); expect(el.id).to.equal('vs1'); expect(el.shadowRoot).to.not.be.null; expect(el.shadowRoot!.querySelector('nile-popup')).to.exist; expect(el.shadowRoot!.querySelector('.select__combobox')).to.exist; });
 });
+
+describe('NileVirtualSelect chip fitting behaviour matrix', () => {
+  const LABELS = [
+    'Engineering Operations Team',
+    'Human Resources Department',
+    'Finance And Accounting Group',
+    'Customer Success Organisation',
+    'Product Design Studio Unit'
+  ];
+
+  const DATA = LABELS.map(label => ({ label, value: label }));
+
+  async function settle(el: NileVirtualSelect) {
+    await el.updateComplete;
+    await nextFrame();
+    await nextFrame();
+    await el.updateComplete;
+  }
+
+  function tagsRoot(el: NileVirtualSelect) {
+    return el.shadowRoot!.querySelector('.select__tags');
+  }
+
+  function chips(el: NileVirtualSelect) {
+    return Array.from(
+      el.shadowRoot!.querySelectorAll('.select__tags nile-tag')
+    ) as HTMLElement[];
+  }
+
+  function hiddenChips(el: NileVirtualSelect) {
+    return chips(el).filter(chip => chip.style.display === 'none');
+  }
+
+  it('V1. multiple + no max-options-visible + autoResize=false renders fitted chips', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 320px">
+        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        </nile-virtual-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await settle(el);
+
+    expect(el.autoResize).to.be.false;
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.true;
+    expect(el.shadowRoot!.querySelector('button.select__tags-count')).to.exist;
+    expect(chips(el).length).to.equal(LABELS.length);
+  });
+
+  it('V2. multiple + no max-options-visible + autoResize=true refits when the container resizes', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 480px">
+        <nile-virtual-select multiple autoresize .data=${DATA} .value=${LABELS}>
+        </nile-virtual-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await settle(el);
+
+    expect(el.autoResize).to.be.true;
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.true;
+    const wideHidden = hiddenChips(el).length;
+
+    host.style.width = '180px';
+    await aTimeout(200);
+    await settle(el);
+
+    expect(hiddenChips(el).length).to.be.at.least(wideHidden);
+  });
+
+  it('V3. explicit max-options-visible switches to fixed-count layout', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 320px">
+        <nile-virtual-select
+          multiple
+          max-options-visible="2"
+          .data=${DATA}
+          .value=${LABELS}
+        ></nile-virtual-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await settle(el);
+
+    expect(el.maxOptionsVisible).to.equal(2);
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.false;
+    expect(chips(el).length).to.equal(2);
+    expect(el.shadowRoot!.querySelector('span.select__tags-count')).to.exist;
+  });
+
+  it('V3b. max-options-visible set as a property also switches to fixed-count layout', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 320px">
+        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        </nile-virtual-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await settle(el);
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.true;
+
+    el.maxOptionsVisible = 1;
+    await settle(el);
+
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.false;
+    expect(chips(el).length).to.equal(1);
+  });
+
+  it('V3c. the default max-options-visible is still 3 and reading it does not opt out', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 320px">
+        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        </nile-virtual-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await settle(el);
+
+    expect(el.maxOptionsVisible).to.equal(3);
+    expect(el.maxOptionsVisible).to.equal(3);
+    await settle(el);
+    expect(tagsRoot(el)!.classList.contains('select__tags--fitted')).to.be.true;
+  });
+
+  it('V5. autoresize works as a markup attribute', async () => {
+    const b = await fixture<NileVirtualSelect>(
+      html`<nile-virtual-select multiple autoresize></nile-virtual-select>`
+    );
+    await b.updateComplete;
+    expect(b.autoResize).to.be.true;
+
+    const c = await fixture<NileVirtualSelect>(
+      html`<nile-virtual-select multiple></nile-virtual-select>`
+    );
+    await c.updateComplete;
+    expect(c.autoResize).to.be.false;
+  });
+
+  it('V6. the +N button count matches the number of hidden chips', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 220px">
+        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        </nile-virtual-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await settle(el);
+
+    const overflow = el.shadowRoot!.querySelector(
+      'button.select__tags-count'
+    ) as HTMLElement | null;
+    const hidden = hiddenChips(el).length;
+
+    if (hidden > 0) {
+      expect(overflow).to.exist;
+      expect(overflow!.textContent!.trim()).to.equal(`+${hidden}`);
+      expect(overflow!.getAttribute('aria-label')).to.equal(
+        `${hidden} more selected`
+      );
+    } else {
+      // Nothing overflows, so the button is not rendered at all.
+      expect(overflow).to.not.exist;
+    }
+  });
+
+  it('V7. nile-select and nile-virtual-select agree on when fitting is active', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 320px">
+        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        </nile-virtual-select>
+        <nile-virtual-select
+          multiple
+          max-options-visible="2"
+          .data=${DATA}
+          .value=${LABELS}
+        ></nile-virtual-select>
+      </div>`
+    );
+    const [fitted, fixed] = Array.from(
+      host.querySelectorAll('nile-virtual-select')
+    ) as NileVirtualSelect[];
+    await settle(fitted);
+    await settle(fixed);
+
+    expect(tagsRoot(fitted)!.classList.contains('select__tags--fitted')).to.be
+      .true;
+    expect(tagsRoot(fixed)!.classList.contains('select__tags--fitted')).to.be
+      .false;
+  });
+
+  // The tooltip is opt-in: `showtooltip` present, and the chip's text clipped.
+  function tips(el: NileVirtualSelect) {
+    return Array.from(
+      el.shadowRoot!.querySelectorAll('.select__tag-tip')
+    ) as HTMLElement[];
+  }
+
+  function liveTips(el: NileVirtualSelect) {
+    return tips(el).filter(tip => !tip.hasAttribute('disabled'));
+  }
+
+  // Truncation is bound to the tooltip: a clipped chip is only acceptable when
+  // something can reveal the value it hid. A chip wider than the whole field is
+  // the one exception - there is nowhere for it to go.
+  function chipContent(chip: HTMLElement) {
+    return chip.shadowRoot!.querySelector('[part~="content"]') as HTMLElement;
+  }
+
+  function clippedChipCount(el: NileVirtualSelect) {
+    return chips(el)
+      .filter(chip => chip.style.display !== 'none')
+      .filter(chip => {
+        const content = chipContent(chip);
+        return content.scrollWidth > content.clientWidth + 1;
+      }).length;
+  }
+
+  it('V12. without showtooltip a fitted chip is never truncated', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 480px">
+        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}></nile-virtual-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    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);
+  });
+
+  it('V13. showtooltip is what allows a fitted chip to be truncated', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 480px">
+        <nile-virtual-select
+          multiple
+          showtooltip
+          .data=${DATA}
+          .value=${LABELS}
+        ></nile-virtual-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await settle(el);
+
+    expect(el.showTooltip).to.be.true;
+    expect(clippedChipCount(el)).to.be.greaterThan(0);
+  });
+
+  it('V8. no showtooltip attribute hides the chip tooltip', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 200px">
+        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}></nile-virtual-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    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);
+  });
+
+  it('V9. showtooltip shows the chip tooltip', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 200px">
+        <nile-virtual-select multiple showtooltip .data=${DATA} .value=${LABELS}></nile-virtual-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await settle(el);
+
+    expect(el.showTooltip).to.be.true;
+    expect(liveTips(el).length).to.be.greaterThan(0);
+  });
+
+  it('V10. removing showtooltip hides the chip tooltip again', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 200px">
+        <nile-virtual-select multiple showtooltip .data=${DATA} .value=${LABELS}></nile-virtual-select>
+        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}></nile-virtual-select>
+      </div>`
+    );
+    const [el, control] = Array.from(
+      host.querySelectorAll('nile-virtual-select')
+    ) as NileVirtualSelect[];
+    await settle(el);
+    await settle(control);
+
+    expect(liveTips(el).length).to.be.greaterThan(0);
+
+    el.removeAttribute('showtooltip');
+    await settle(el);
+
+    expect(el.showTooltip).to.be.false;
+    expect(liveTips(el).length).to.equal(0);
+    // Removing the attribute must land back on the default.
+    expect(tips(el).map(tip => tip.hasAttribute('disabled'))).to.deep.equal(
+      tips(control).map(tip => tip.hasAttribute('disabled'))
+    );
+  });
+
+  it('V11. the overflow button label and text never disagree, including first paint', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 220px">
+        <nile-virtual-select multiple .data=${DATA} .value=${LABELS}>
+        </nile-virtual-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+
+    // Before the layout frame runs, no button may claim a count it cannot back up.
+    await el.updateComplete;
+    const early = el.shadowRoot!.querySelector('button.select__tags-count');
+    if (early) {
+      const shown = early.textContent!.trim().replace('+', '');
+      expect(early.getAttribute('aria-label')).to.equal(
+        `${shown} more selected`
+      );
+    }
+
+    await settle(el);
+
+    const overflow = el.shadowRoot!.querySelector(
+      'button.select__tags-count'
+    ) as HTMLElement | null;
+    expect(overflow).to.exist;
+    const shown = overflow!.textContent!.trim().replace('+', '');
+    expect(overflow!.getAttribute('aria-label')).to.equal(
+      `${shown} more selected`
+    );
+    expect(Number(shown)).to.equal(hiddenChips(el).length);
+  });
+
+  it('V12. no overflow button is rendered when every chip fits', async () => {
+    const host = await fixture<HTMLElement>(
+      html`<div style="width: 1200px">
+        <nile-virtual-select multiple .data=${DATA} .value=${LABELS.slice(0, 1)}>
+        </nile-virtual-select>
+      </div>`
+    );
+    const el = host.querySelector('nile-virtual-select') as NileVirtualSelect;
+    await settle(el);
+
+    expect(hiddenChips(el).length).to.equal(0);
+    expect(el.shadowRoot!.querySelector('button.select__tags-count')).to.not
+      .exist;
+  });
+});