@kubex/zinc 1.1.178 → 1.1.180

package/docs/pages/components/chart.md

@@ -187,6 +187,19 @@ Use the `xaxis` attribute to specify the x-axis type. Common values include `dat
 When using `xaxis="datetime"`, provide data in the format `[{x: timestamp, y: value}]` where `x` is a Unix timestamp in milliseconds. The chart will automatically format the dates on the x-axis.
 :::
 
+### Expected Range Bands
+
+Each series accepts optional `stack`, `areaStyle`, `lineStyle`, `symbol`, `silent` and `z` settings, which apply to that series only. Draw a shaded band with two series sharing a `stack`: an invisible base holding the lower bound, then a filled series holding the band's height. Giving both the same `name` lets the legend toggle the band as one. `silent` series ignore the mouse and stay out of tooltips.
+
+```html:preview
+<zn-chart
+  type="line"
+  xaxis="datetime"
+  data="[{&quot;name&quot;:&quot;Expected range&quot;,&quot;data&quot;:[[1609459200000,20],[1609462800000,25],[1609466400000,28],[1609470000000,30],[1609473600000,26],[1609477200000,22]],&quot;stack&quot;:&quot;band&quot;,&quot;areaStyle&quot;:{&quot;opacity&quot;:0},&quot;lineStyle&quot;:{&quot;opacity&quot;:0},&quot;symbol&quot;:&quot;none&quot;,&quot;silent&quot;:true,&quot;color&quot;:&quot;#93c5fd&quot;},{&quot;name&quot;:&quot;Expected range&quot;,&quot;data&quot;:[[1609459200000,20],[1609462800000,20],[1609466400000,22],[1609470000000,24],[1609473600000,22],[1609477200000,20]],&quot;stack&quot;:&quot;band&quot;,&quot;areaStyle&quot;:{&quot;opacity&quot;:0.25},&quot;lineStyle&quot;:{&quot;opacity&quot;:0},&quot;symbol&quot;:&quot;none&quot;,&quot;silent&quot;:true,&quot;color&quot;:&quot;#93c5fd&quot;},{&quot;name&quot;:&quot;Traffic&quot;,&quot;data&quot;:[[1609459200000,30],[1609462800000,38],[1609466400000,70],[1609470000000,44],[1609473600000,40],[1609477200000,33]],&quot;color&quot;:&quot;#2563eb&quot;}]"
+  height="300">
+</zn-chart>
+```
+
 ### Enable Animations
 
 By default, animations are disabled for better performance. Add the `enable-animations` attribute to animate on first render — bars grow from the baseline and lines draw in. Pass a number (milliseconds) to control the duration; bare `enable-animations` defaults to `1500`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.178",
+  "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/chart/builders.test.ts

@@ -123,6 +123,38 @@ describe('buildLineOption', () => {
   });
 });
 
+describe('per-series options', () => {
+  const band = (overrides: Partial<BuilderProps> = {}) => buildLineOption({
+    ...baseProps,
+    xAxisType: 'datetime',
+    data: [
+      { name: 'Expected range', data: [[1, 10], [2, 12]], stack: 'band', areaStyle: { opacity: 0 }, lineStyle: { opacity: 0 }, symbol: 'none', silent: true },
+      { name: 'Expected range', data: [[1, 5], [2, 6]], stack: 'band', areaStyle: { opacity: 0.15 }, lineStyle: { opacity: 0 }, symbol: 'none', silent: true },
+      { name: 'Events', data: [[1, 12], [2, 30]] },
+    ],
+    ...overrides,
+  });
+
+  it('draws a band from stacked series without styling other series', () => {
+    const series = band().series as any[];
+    expect(series[0].stack).to.equal('band');
+    expect(series[1].stack).to.equal('band');
+    expect(series[1].areaStyle).to.deep.equal({ opacity: 0.15 });
+    expect(series[0].symbol).to.equal('none');
+    expect(series[0].silent).to.equal(true);
+    expect(series[0].tooltip).to.deep.equal({ show: false });
+    expect(series[2].stack).to.be.undefined;
+    expect(series[2].areaStyle).to.be.undefined;
+    expect(series[2].silent).to.be.undefined;
+  });
+
+  it('keeps a per-series stack when the chart is stacked', () => {
+    const series = band({ stacked: true }).series as any[];
+    expect(series[0].stack).to.equal('band');
+    expect(series[2].stack).to.equal('total');
+  });
+});
+
 describe('buildAreaOption', () => {
   const baseAreaProps: BuilderProps = {
     type: 'area',

package/src/components/chart/builders.ts

@@ -20,6 +20,15 @@ export interface SeriesItem {
   name: string;
   data: any[];
   color?: string;
+  /** Series sharing a stack ID are stacked, overriding the chart-wide `stacked` setting. */
+  stack?: string;
+  /** Fill below a line, for example `{ opacity: 0.15 }`; `{ opacity: 0 }` keeps a stacked base invisible. */
+  areaStyle?: Record<string, unknown>;
+  lineStyle?: Record<string, unknown>;
+  symbol?: string;
+  /** Excludes the series from mouse interaction and tooltips. */
+  silent?: boolean;
+  z?: number;
 }
 
 export interface SankeyEdge {
@@ -168,14 +177,28 @@ function seriesFromProps(
     name: s.name,
     data: normalizeData(s.data),
     ...(s.color ? { itemStyle: { color: s.color } } : {}),
-    ...(props.stacked ? { stack: 'total' } : {}),
+    ...(s.stack ? { stack: s.stack } : props.stacked ? { stack: 'total' } : {}),
     ...(props.enableAnimations !== false && props.enableAnimations !== 0 && seriesType === 'bar'
       ? { animationDelay: (idx: number) => idx * 50 }
       : {}),
     ...extra(s),
+    ...seriesStyle(s),
   }));
 }
 
+// seriesStyle applies a series' own display options, which take precedence
+// over chart-wide defaults. Bands are drawn as an invisible stacked base
+// followed by a filled series holding the band's height.
+function seriesStyle(s: SeriesItem): Record<string, unknown> {
+  return {
+    ...(s.areaStyle ? { areaStyle: s.areaStyle } : {}),
+    ...(s.lineStyle ? { lineStyle: s.lineStyle } : {}),
+    ...(s.symbol ? { symbol: s.symbol } : {}),
+    ...(s.silent ? { silent: true, tooltip: { show: false } } : {}),
+    ...(s.z !== undefined ? { z: s.z } : {}),
+  };
+}
+
 export function buildBarOption(props: BuilderProps): EChartsOption {
   return {
     ...commonOption(props),

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/input/input.test.ts

@@ -11,6 +11,28 @@ describe('<zn-input>', () => {
     expect(el).to.exist;
   });
 
+  describe('form data', () => {
+    it('trims surrounding whitespace, except for passwords', async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form>
+          <zn-input name="search" value="  foo bar  "></zn-input>
+          <zn-input name="pass" type="password" value=" secret "></zn-input>
+        </form>
+      `);
+      const [search, pass] = form.querySelectorAll<ZnInput>('zn-input');
+      await search.updateComplete;
+
+      const data = new FormData(form);
+      expect(data.get('search')).to.equal('foo bar');
+      expect(data.get('pass')).to.equal(' secret ');
+
+      await search.updateComplete;
+      expect(search.value).to.equal('foo bar');
+      expect(search.input.value).to.equal('foo bar');
+      expect(pass.value).to.equal(' secret ');
+    });
+  });
+
   describe('Escape key', () => {
     it('blurs the inner input and stops propagation when focused', async () => {
       const wrapper = await fixture<HTMLDivElement>(html`

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);
 
@@ -429,8 +445,10 @@ export class FormControlController implements ReactiveController {
       name.length > 0 &&
       typeof value !== 'undefined'
     ) {
+      const isPassword = (this.host as HTMLElement & { type?: string }).type === 'password';
       const appendPrimitive = (val: string | number | boolean) => {
-        event.formData.append(name, val.toString());
+        const str = val.toString();
+        event.formData.append(name, isPassword ? str : str.trim());
       };
       const appendFile = (file: Blob, filename?: string) => {
         // If a filename is provided or it's a File (has name), FormData will use it properly
@@ -473,6 +491,10 @@ export class FormControlController implements ReactiveController {
         });
       } else {
         appendPrimitive(value as string | number | boolean);
+
+        if ((this.host as HTMLElement & { value?: unknown }).value === value) {
+          trimControlValue(this.host);
+        }
       }
 
       this.host.dispatchEvent(new CustomEvent('zn-formdata', {bubbles: true, composed: true}));