@kubex/zinc 1.1.132 → 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/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;
+  }
+}