@kubex/zinc 1.1.131 → 1.1.133

package/src/components/data-table-filter/data-table-filter.test.ts

@@ -333,4 +333,46 @@ describe('<zn-data-table-filter>', () => {
     expect(pills(el)).to.deep.equal([]);
     expect(el.value).to.equal('');
   });
+
+  // Setting `value` (the inverse of emitChange) rebuilds the active pills, so a filter restored
+  // from a shared URL renders exactly as it was when encoded.
+  describe('restore from value', () => {
+    const encode = (conditions: {key: string; comparator: string; value: string}[]) =>
+      btoa(JSON.stringify(conditions));
+
+    it('rebuilds the active pills from an encoded value', async () => {
+      const value = encode([
+        {key: 'status', comparator: 'eq', value: 'active'},
+        {key: 'email', comparator: 'contains', value: 'acme'},
+      ]);
+
+      const el = await fixture<ZnDataTableFilter>(html`
+        <zn-data-table-filter .filters="${FILTERS}" .value="${value}"></zn-data-table-filter>`);
+      await el.updateComplete;
+
+      expect(pills(el)).to.deep.equal(['Status: Active', 'Email: acme']);
+    });
+
+    it('renders no pills for an absent value', async () => {
+      const el = await fixture<ZnDataTableFilter>(html`
+        <zn-data-table-filter .filters="${FILTERS}"></zn-data-table-filter>`);
+      await el.updateComplete;
+
+      expect(pills(el)).to.deep.equal([]);
+    });
+
+    // The production flow sets `value` after `filters` (and after default-filters seeds an empty
+    // pill), so a later value must still win over the valueless default pill.
+    it('lets a value set after default-filters win over the empty default pill', async () => {
+      const el = await fixture<ZnDataTableFilter>(html`
+        <zn-data-table-filter default-filters="role" .filters="${FILTERS}"></zn-data-table-filter>`);
+      await el.updateComplete;
+      expect(pills(el)).to.deep.equal(['Role']);
+
+      el.value = encode([{key: 'status', comparator: 'eq', value: 'active'}]);
+      await el.updateComplete;
+
+      expect(pills(el)).to.deep.equal(['Status: Active']);
+    });
+  });
 });

package/src/components/data-table-search/data-table-search.component.ts

@@ -39,7 +39,7 @@ type AllowedInputElement =
  * @property {string} placeholder - The placeholder text for the search input (default: "Search...").
  * @property {string} helpText - Help text, shown from an information icon inside the search input.
  * @property {string} searchUri - Optional URI to use for search operations.
- * @property {number} debounceDelay - The delay in milliseconds before triggering a search (default: 500).
+ * @property {number} debounceDelay - The delay in milliseconds before triggering a search (default: 350).
  */
 export default class ZnDataTableSearch extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -97,10 +97,6 @@ export default class ZnDataTableSearch extends ZincElement implements ZincFormCo
    */
   getFormData(): Record<string, any> {
     const params: Record<string, any> = {};
-    const slot = this.shadowRoot?.querySelector('slot');
-    if (!slot) return params;
-
-    const elements = slot.assignedElements({flatten: true});
     const allowedInputs = [
       'zn-input',
       'zn-select',
@@ -115,15 +111,22 @@ export default class ZnDataTableSearch extends ZincElement implements ZincFormCo
       'zn-input-group',
     ];
 
-    elements.forEach((element) => {
-      if (allowedInputs.includes(element.tagName.toLowerCase())) {
-        const input = element as AllowedInputElement;
-        const value = input.value as string || element.getAttribute('value');
-        const name = input.name || element.getAttribute('name');
-        if (name) {
-          params[name] = value;
-        }
+    const collect = (element: Element): void => {
+      if (!allowedInputs.includes(element.tagName.toLowerCase())) return;
+      const input = element as AllowedInputElement;
+      const value = input.value as string;
+      const name = input.name || element.getAttribute('name');
+      if (name) {
+        params[name] = value;
       }
+    };
+
+    const slots = this.shadowRoot?.querySelectorAll('slot');
+    slots?.forEach((slot) => {
+      slot.assignedElements({flatten: true}).forEach((element) => {
+        collect(element);
+        element.querySelectorAll(allowedInputs.join(',')).forEach((descendant) => collect(descendant));
+      });
     });
 
     return params;

package/src/components/data-table-search/data-table-search.test.ts

@@ -1,5 +1,7 @@
+import '../../../dist/zn.min.js';
 import {expect, fixture, html} from '@open-wc/testing';
 import type ZnDataTableSearch from './data-table-search.component';
+import type ZnSelect from '../select/select.component';
 
 describe('<zn-data-table-search>', () => {
   it('should render a component', async () => {
@@ -8,4 +10,26 @@ describe('<zn-data-table-search>', () => {
 
     expect(el).to.exist;
   });
+
+  // getFormData must read each slotted field's live `.value` property, not a stale `value` attribute.
+  // On a zn-select the `value` attribute even binds to a separate default-value property, so reading
+  // the attribute would return the wrong (initial) value.
+  it('reads a slotted field\'s live value property rather than its stale value attribute', async () => {
+    const el = await fixture<ZnDataTableSearch>(html`
+      <zn-data-table-search>
+        <zn-select name="status" value="open">
+          <zn-option value="open">Open</zn-option>
+          <zn-option value="closed">Closed</zn-option>
+        </zn-select>
+      </zn-data-table-search>`);
+
+    const select = el.querySelector<ZnSelect>('zn-select')!;
+    await select.updateComplete;
+
+    // Diverge the live property from the attribute the element was rendered with.
+    select.value = 'closed';
+    expect(select.getAttribute('value')).to.equal('open');
+
+    expect(el.getFormData().status).to.equal('closed');
+  });
 });

package/src/components/panel/panel.component.ts

@@ -92,27 +92,25 @@ export default class ZnPanel extends ZincElement {
     this.resizeObserver = null;
   }
 
-  private get bodySlot(): HTMLSlotElement | null {
-    return this.renderRoot?.querySelector('.panel__body > slot') ?? null;
-  }
-
-  // Slotted content can grow without the body's own box changing, so the observers go on the
-  // slotted elements rather than the body.
   private observeBodyContent() {
-    const slot = this.bodySlot;
-    if (!slot) return;
+    const body = this.renderRoot?.querySelector('.panel__body');
+    if (!body) return;
 
     this.resizeObserver ??= new ResizeObserver(() => this.measureBodyContent());
     this.resizeObserver.disconnect();
-    slot.assignedElements({flatten: true}).forEach(el => this.resizeObserver!.observe(el));
+    this.resizeObserver.observe(body);
     this.measureBodyContent();
   }
 
+  // Measured on the body, not on the slotted elements: `display: contents` hosts such as zn-stat
+  // render content but have no box of their own to read or observe.
   private measureBodyContent() {
-    const nodes = this.bodySlot?.assignedNodes({flatten: true}) ?? [];
-    this.bodyEmpty = !nodes.some(node => node.nodeType === Node.TEXT_NODE
-      ? node.textContent!.trim() !== ''
-      : (node as Element).getBoundingClientRect().height > 0);
+    const body = this.renderRoot?.querySelector('.panel__body');
+    if (!body) return;
+
+    const style = getComputedStyle(body);
+    const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
+    this.bodyEmpty = body.scrollHeight - padding <= 0;
   }
 
   protected render(): unknown {

package/src/components/panel/panel.test.ts

@@ -1,5 +1,5 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
 
 describe('<zn-panel>', () => {
   it('should render a component', async () => {
@@ -41,6 +41,20 @@ describe('<zn-panel>', () => {
     expect(el.shadowRoot!.querySelector('.panel')!.classList.contains('panel--empty')).to.be.true;
   });
 
+  it('keeps the padded body when slotted content has no box of its own', async () => {
+    const el = await fixture(html` <zn-panel caption="Example">
+      <div style="display: contents">
+        <div style="height: 20px"></div>
+      </div>
+    </zn-panel> `);
+    const header = el.shadowRoot!.querySelector('.panel__header')!;
+
+    await aTimeout(50);
+
+    expect(header.classList.contains('panel__header--underline')).to.be.true;
+    expect(el.shadowRoot!.querySelector('.panel')!.classList.contains('panel--empty')).to.be.false;
+  });
+
   it('restores the header underline when slotted content gains height', async () => {
     const el = await fixture(html` <zn-panel caption="Example">
       <div id="wrapper"></div>

package/src/components/toggle/toggle.scss

@@ -169,3 +169,13 @@
 .switch__wrapper--inline.switch__wrapper--label-right label {
   flex-direction: row-reverse;
 }
+
+/* Disabled */
+.switch__wrapper--disabled {
+  opacity: 0.5;
+
+  label,
+  .switch__input-wrapper {
+    cursor: not-allowed;
+  }
+}