@kubex/zinc 1.1.179 → 1.1.180

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.179",
+  "version": "1.1.180",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

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

@@ -368,7 +368,8 @@ export default class ZnDataTable extends ZincElement {
         inputs.forEach((input) => {
           const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-multiselect', 'zn-params-select', 'zn-datepicker', 'input', 'select', 'textarea'];
           if (allowedInputs.includes(input.tagName.toLowerCase())) {
-            const value = (input as AllowedInputElement).value as string || input.getAttribute('value');
+            const raw = (input as AllowedInputElement).value as string || input.getAttribute('value');
+            const value = typeof raw === 'string' ? raw.trim() : raw;
             const name = (input as AllowedInputElement).name || input.getAttribute('name');
             if (name) {
               params[name] = value;
@@ -836,7 +837,7 @@ export default class ZnDataTable extends ZincElement {
   searchChangeListener = (e: ZnSearchChangeEvent) => {
     const target = e.target as ZnDataTableSearch | null;
     if (target && target.tagName === 'ZN-DATA-TABLE-SEARCH') {
-      this.search = target.value as string;
+      this.search = (target.value as string).trim();
 
       // Get form data and search URI from event detail if available
       if (e.detail) {

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

@@ -278,8 +278,8 @@ export default class ZnDataTableFilter extends ZincElement implements ZincFormCo
 
   private emitChange() {
     const data = this._active
-      .filter(item => item.value.length > 0)
-      .map(item => ({key: item.key, comparator: item.comparator, value: item.value}));
+      .filter(item => item.value.trim().length > 0)
+      .map(item => ({key: item.key, comparator: item.comparator, value: item.value.trim()}));
 
     this.value = data.length > 0 ? btoa(JSON.stringify(data)) : '';
     this._formController.updateValidity();

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

@@ -114,7 +114,7 @@ export default class ZnDataTableSearch extends ZincElement implements ZincFormCo
     const collect = (element: Element): void => {
       if (!allowedInputs.includes(element.tagName.toLowerCase())) return;
       const input = element as AllowedInputElement;
-      const value = input.value as string;
+      const value: unknown = typeof input.value === 'string' ? input.value.trim() : input.value;
       const name = input.name || element.getAttribute('name');
       if (name) {
         params[name] = value;
@@ -174,7 +174,7 @@ export default class ZnDataTableSearch extends ZincElement implements ZincFormCo
     const formData = this.getFormData();
     this.emit('zn-search-change', {
       detail: {
-        value: this.value,
+        value: this.value.trim(),
         formData: formData,
         searchUri: this.searchUri
       }

package/src/components/defined-label/defined-label.component.ts

@@ -112,7 +112,7 @@ export default class ZnDefinedLabel extends ZincElement implements ZincFormContr
   }
 
   private getFilteredLabels(): PredefinedLabel[] {
-    const filter = this.value.toLowerCase();
+    const filter = this.value.trim().toLowerCase();
     return this.predefinedLabels
       .map(label => typeof label === 'string' ? {name: label} : label)
       .filter((label): label is PredefinedLabel => Boolean(label?.name))

package/src/components/filter-container/filter-container.component.ts

@@ -29,7 +29,7 @@ export default class ZnFilterContainer extends ZincElement {
   private _filterFrame = 0;
 
   public handleSearchChange(event: Event) {
-    const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
+    const searchTerm = (event.target as HTMLInputElement).value.trim().toLowerCase();
     cancelAnimationFrame(this._filterFrame);
     this._filterFrame = requestAnimationFrame(() => this.applyFilter(searchTerm));
   }

package/src/components/filter-wrapper/filter-wrapper.component.ts

@@ -1,5 +1,6 @@
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
 import {property} from "lit/decorators.js";
+import {trimControlValue} from '../../internal/form';
 import ZincElement from '../../internal/zinc-element';
 
 import type ZnDataSelect from "../data-select";
@@ -51,6 +52,7 @@ export default class ZnFilterWrapper extends ZincElement {
       const inputs = Array.from(this.querySelectorAll(allowedInputs.join(','))) as AllowedInputElement[];
       const params: Record<string, any> = {};
       inputs.forEach(input => {
+        trimControlValue(input);
         if (!input.value && input.hasAttribute('omit-empty')) {
           return;
         }

package/src/components/filter-wrapper/filter-wrapper.test.ts

@@ -1,5 +1,9 @@
 import '../../../dist/zn.min.js';
 import { expect, fixture, html } from '@open-wc/testing';
+import { sendKeys } from '@web/test-runner-commands';
+import type ZnDataTable from '../data-table';
+import type ZnFilterWrapper from './filter-wrapper.component';
+import type ZnInput from '../input';
 
 describe('<zn-filter-wrapper>', () => {
   it('should render a component', async () => {
@@ -7,4 +11,46 @@ describe('<zn-filter-wrapper>', () => {
 
     expect(el).to.exist;
   });
+
+  it('trims input values on submit', async () => {
+    const table = await fixture<ZnDataTable>(html`
+      <zn-data-table>
+        <zn-filter-wrapper>
+          <zn-input name="external_reference" value="  abc  "></zn-input>
+        </zn-filter-wrapper>
+      </zn-data-table>
+    `);
+    table.refresh = () => undefined;
+    const wrapper = table.querySelector<ZnFilterWrapper>('zn-filter-wrapper')!;
+    const input = table.querySelector<ZnInput>('zn-input')!;
+    await input.updateComplete;
+
+    wrapper.handleSubmit(new Event('click'));
+
+    expect(table.requestParams).to.deep.equal({external_reference: 'abc'});
+    expect(input.value).to.equal('abc');
+  });
+
+  it('clears displayed whitespace from a focused email input on submit', async () => {
+    const table = await fixture<ZnDataTable>(html`
+      <zn-data-table>
+        <zn-filter-wrapper slot="filter-top">
+          <zn-input name="email" type="email" style="width: 40px"></zn-input>
+          <zn-input name="clean" type="email" value="a@b.com" style="width: 40px"></zn-input>
+        </zn-filter-wrapper>
+      </zn-data-table>
+    `);
+    table.refresh = () => undefined;
+    const [input, clean] = table.querySelectorAll<ZnInput>('zn-input');
+    await input.updateComplete;
+
+    input.focus();
+    await sendKeys({type: '  a@b.com'});
+    expect(input.input.scrollWidth).to.be.greaterThan(clean.input.scrollWidth);
+
+    table.querySelector<ZnFilterWrapper>('zn-filter-wrapper')!.handleSubmit(new Event('click'));
+
+    expect(table.requestParams.email).to.equal('a@b.com');
+    expect(input.input.scrollWidth).to.equal(clean.input.scrollWidth);
+  });
 });

package/src/components/icon-picker/icon-picker.component.ts

@@ -264,7 +264,7 @@ export default class ZnIconPicker extends ZincElement implements ZincFormControl
 
   private handleSearchInput(e: Event) {
     const input = e.target as HTMLInputElement;
-    this._searchQuery = input.value.toLowerCase();
+    this._searchQuery = input.value.trim().toLowerCase();
     this.filterIcons();
   }
 

package/src/components/input/input.component.ts

@@ -607,6 +607,7 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
       // If invalid, keep the previous value
     } else {
       this.value = this.input.value;
+      this.syncEmailDisplay();
     }
 
     this.emit('zn-change');
@@ -644,6 +645,13 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     this.formControlController.emitInvalidEvent(event);
   }
 
+  // Email inputs already strip whitespace from .value but keep it on screen
+  private syncEmailDisplay() {
+    if (this.type === 'email') {
+      this.input.value = this.value;
+    }
+  }
+
   private handleKeyDown(event: KeyboardEvent) {
     // The slash menu claims its own keys; while it is open Escape closes it and Enter picks an item,
     // rather than blurring the field or submitting the form
@@ -660,6 +668,8 @@ export default class ZnInput extends ZincElement implements ZincFormControl {
     // Pressing enter when focused on the input should submit the form like a native input, be we wait a tick before
     // submitting to allow users to cancel the keydown event if they need to
     if (event.key === 'Enter' && !hasModifier) {
+      this.syncEmailDisplay();
+
       // When using a Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way
       // to check for this is to look at event.isComposing, which will be true when the IME is open.
       if (!event.defaultPrevented && !event.isComposing) {

package/src/components/remarkd-editor/remarkd-editor.component.ts

@@ -1314,7 +1314,7 @@ export default class ZnRemarkdEditor extends ZincElement implements ZincFormCont
     clearTimeout(this.linkSearchTimer);
     const token = ++this.linkSearchToken;
     this.linkSearchTimer = setTimeout(() => {
-      const url = `${this.linkUrl}${this.linkUrl.includes('?') ? '&' : '?'}q=${encodeURIComponent(term)}`;
+      const url = `${this.linkUrl}${this.linkUrl.includes('?') ? '&' : '?'}q=${encodeURIComponent(term.trim())}`;
       fetch(url, {headers: {Accept: 'application/json'}})
         .then(res => {
           if (!res.ok) throw new Error(`link search failed: ${res.status}`);

package/src/components/select/select.component.ts

@@ -788,7 +788,7 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     this._addOptionActive = false;
 
     this._searchDisplayValue = this.displayInput.value;
-    this._searchQuery = this._searchDisplayValue.toLowerCase();
+    this._searchQuery = this._searchDisplayValue.trim().toLowerCase();
 
     // Open the dropdown when the user starts typing
     if (!this.open) {

package/src/internal/form.ts

@@ -193,6 +193,22 @@ function removeStoredValuesByPrefix(storage: Storage, keyPrefix: string) {
   keys.forEach(key => storage.removeItem(key));
 }
 
+/** Trims a control's string value in place, so what's shown matches what's submitted. */
+export function trimControlValue(control: Element & { value?: unknown; type?: string; input?: unknown }) {
+  if (typeof control.value !== 'string' || control.type === 'password') return;
+
+  const trimmed = control.value.trim();
+  if (trimmed !== control.value) {
+    control.value = trimmed;
+  }
+
+  // Email inputs already strip whitespace from .value but keep it on screen
+  const field = control instanceof HTMLInputElement ? control : control.input;
+  if (control.type === 'email' && field instanceof HTMLInputElement) {
+    field.value = trimmed;
+  }
+}
+
 export function clearFormStoreValues(formOrStoreKey: HTMLFormElement | string) {
   const keyPrefix = typeof formOrStoreKey === 'string' ? formOrStoreKey : getFormStoreKey(formOrStoreKey);
 
@@ -476,9 +492,8 @@ export class FormControlController implements ReactiveController {
       } else {
         appendPrimitive(value as string | number | boolean);
 
-        const host = this.host as HTMLElement & { value?: unknown };
-        if (!isPassword && typeof value === 'string' && host.value === value && value.trim() !== value) {
-          host.value = value.trim();
+        if ((this.host as HTMLElement & { value?: unknown }).value === value) {
+          trimControlValue(this.host);
         }
       }