@kubex/zinc 1.1.39 → 1.1.41

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

@@ -14,4 +14,19 @@ describe('<zn-data-table>', () => {
 
     expect(() => (el as unknown as { updateKeys: () => void }).updateKeys()).not.to.throw();
   });
+
+  it('accepts a single Row object on the data property', async () => {
+    const el = await fixture<ZnDataTable>(html` <zn-data-table></zn-data-table> `);
+    (el as unknown as {data: unknown}).data = {
+      id: '1',
+      cells: [{text: 'Solo', column: 'name'}],
+    };
+    expect(() => (el as unknown as {requestUpdate: () => void}).requestUpdate()).not.to.throw();
+  });
+
+  it('exposes displayTemplates as an object property', async () => {
+    const el = await fixture<ZnDataTable>(html` <zn-data-table></zn-data-table> `);
+    const templates = (el as unknown as {displayTemplates: Record<string, unknown>}).displayTemplates;
+    expect(templates).to.be.an('object');
+  });
 });

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

@@ -98,7 +98,19 @@ export default class ZnDataTableSearch extends ZincElement implements ZincFormCo
     if (!slot) return params;
 
     const elements = slot.assignedElements({flatten: true});
-    const allowedInputs = ['zn-input', 'zn-select', 'zn-query-builder', 'zn-multiselect', 'zn-params-select', 'zn-datepicker', 'input', 'select', 'textarea'];
+    const allowedInputs = [
+      'zn-input',
+      'zn-select',
+      'zn-query-builder',
+      'zn-multiselect',
+      'zn-params-select',
+      'zn-datepicker',
+      'input',
+      'select',
+      'textarea',
+      'zn-cols',
+      'zn-input-group',
+    ];
 
     elements.forEach((element) => {
       if (allowedInputs.includes(element.tagName.toLowerCase())) {

package/src/components/datepicker/datepicker.component.ts

@@ -153,9 +153,39 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
    */
   @property() format: string = 'MM/dd/yyyy';
 
+  /** Display time selector. **/
+  @property({attribute: 'time-picker',type: Boolean, reflect: true}) timePicker?: boolean = false;
+
+  /** Display only time selector, without date. **/
+  @property({attribute: 'only-time'}) onlyTimepicker?: boolean = false;
+
+  /**
+   * Time format for display and input selector. Uses AirDatepicker format tokens.
+   * Default : hh:mm AA
+   *
+   * Possible symbols:
+   * h — hours in 12-hour mode
+   * hh — hours in 12-hour mode with leading zero
+   * H — hours in 24-hour mode
+   * HH — hours in 24-hour mode with leading zero
+   * m — minutes
+   * mm — minutes with leading zero
+   * aa — day period lower case
+   * AA — day period upper case
+   */
+  @property({attribute: 'format-time'}) timeFormat?: string = "hh:mm AA";
+  @property({attribute: 'container'}) container?: string | HTMLElement;
+
+
+
   private _instance: AirDatepicker<HTMLInputElement>;
 
 
+  get timestamp(): number {
+    const timestamp = (this.input.parentElement!.querySelector("#date-picker-timestamp")! as HTMLInputElement).value  ?? '';
+    return Number(timestamp);
+  }
+
   /** Gets the validity state object */
   get validity() {
     return this.input?.validity;
@@ -194,6 +224,8 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
   @watch('minDate', {waitUntilFirstUpdate: true})
   @watch('maxDate', {waitUntilFirstUpdate: true})
   @watch('disablePastDates', {waitUntilFirstUpdate: true})
+  @watch('timePicker', {waitUntilFirstUpdate: true})
+  @watch('timeFormat', {waitUntilFirstUpdate: true})
   handleDatepickerOptionsChange() {
     this.init();
   }
@@ -241,24 +273,44 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
       }
     }
 
-    const inputElement = this.shadowRoot?.querySelector('input') as HTMLInputElement;
+    const inputElement = this.shadowRoot!.querySelector('input')! as HTMLInputElement;
     if (inputElement) {
+      const timestampField = this.shadowRoot!.querySelector("#date-picker-timestamp")! as  HTMLElement;
+
       const options: AirDatepickerOptions = {
         locale: enLocale,
         dateFormat: this.format,
         range: this.range,
         toggleSelected: false,
+        timepicker: this.timePicker,
+        onlyTimepicker: this.onlyTimepicker,
+        timeFormat: this.timeFormat,
+        container: this.container,
+        altField: timestampField,
         onSelect: ({date}) => {
+        // Blur the input after selection to prevent invisible keyboard navigation
+        if (this.timePicker || this.onlyTimepicker){
+          return
+        }
+        if (date && !this.range) {
+          // For single date selection, blur immediately
+          this.input.blur();
           this.handleChange();
-          // Blur the input after selection to prevent invisible keyboard navigation
-          if (date && !this.range) {
-            // For single date selection, blur immediately
-            this.input.blur();
-          } else if (date && this.range && Array.isArray(date) && date.length === 2) {
-            // For range selection, blur only after both dates are selected
-            this.input.blur();
-          }
+        } else if (date && this.range && Array.isArray(date) && date.length === 2) {
+           // For range selection, blur only after both dates are selected
+           this.input.blur();
+           this.handleChange();
         }
+        },
+        onHide:(isAnimationComplete) => {
+          if (!isAnimationComplete) {
+            return
+          }
+
+          if (this.timePicker || this.onlyTimepicker){
+            this.handleChange();
+          }
+        },
       };
 
       if (this.minDate) {
@@ -532,8 +584,11 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
     return formatted;
   }
 
-  protected updated(_changedProperties: PropertyValues) {
+  updated(_changedProperties: PropertyValues) {
     super.updated(_changedProperties);
+  }
+
+  firstUpdated(){
     this.init();
   }
 
@@ -617,13 +672,12 @@ export default class ZnDatepicker extends ZincElement implements ZincFormControl
                    ?autofocus=${this.autofocus}
                    spellcheck=${this.spellcheck}
                    aria-describedby="help-text"
-                   @change=${this.handleChange}
                    @input=${this.handleInput}
                    @invalid=${this.handleInvalid}
                    @keydown=${this.handleKeyDown}
                    @paste=${this.handlePaste}
                    @blur=${this.handleBlur}>
-
+            <input id="date-picker-timestamp" type="hidden">
             <span part="suffix" class="input__suffix">
               <slot name="suffix"></slot>
             </span>

package/src/components/datepicker/datepicker.scss

@@ -1,6 +1,7 @@
 @use "../../wc";
 @use "../../form-control";
 
+
 :host {
   display: block;
 }

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

@@ -3,6 +3,7 @@ import {deepQuerySelectorAll} from "../../utilities/query";
 import {FormControlController} from '../../internal/form';
 import {on} from "../../utilities/on";
 import {property, query} from 'lit/decorators.js';
+import {Store} from "../../internal/storage";
 import Attachment from "./modules/attachment/attachment";
 import ContextMenu from "./modules/context-menu/context-menu";
 import DatePicker from "./modules/date-picker/date-picker";
@@ -90,6 +91,21 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   @property({attribute: 'ai', type: Boolean}) aiEnabled: boolean = false;
   @property({attribute: 'ai-path'}) aiPath: string = '';
 
+  /**
+   * Caches unsent content while typing and restores it when the editor next loads,
+   * so agent replies in tickets/chats survive reloads and navigation. Use a key
+   * unique to the conversation (e.g. the ticket ID). The cache is cleared on submit.
+   */
+  @property({attribute: 'store-key', reflect: true}) storeKey: string = "";
+
+  /** Cached-content expiry in seconds. Defaults to 1 day. */
+  @property({attribute: 'store-ttl', type: Number, reflect: true}) storeTtl = 86400;
+
+  /** Cache to localStorage instead of sessionStorage, persisting across tabs and browser restarts. */
+  @property({attribute: 'local-storage', type: Boolean, reflect: true}) localStorage: boolean;
+
+  protected _store: Store;
+
   private quillElement: Quill;
   private _content: string = '';
   private _selectionRange: Range = {index: 0, length: 0};
@@ -119,6 +135,11 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     this.formControlController.updateValidity();
   }
 
+  connectedCallback() {
+    super.connectedCallback();
+    this._store = new Store(this.localStorage ? window.localStorage : window.sessionStorage, "zned:", this.storeTtl);
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     this.formControlController.updateValidity();
 
@@ -261,6 +282,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
     this.quillElement = quill;
 
     this.getForm()?.addEventListener('submit', () => {
+      this._clearCachedContent();
       setTimeout(() => {
         const attachmentModule = this.quillElement.getModule('attachment') as Attachment;
         attachmentModule?.reset();
@@ -372,6 +394,14 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
       this._selectionRange = range ?? oldRange;
     });
 
+    if (this.storeKey && this._isEmpty(this.value ?? '')) {
+      const cached = this._store.get(this.storeKey);
+      if (cached) {
+        this.value = cached;
+        this.editorHtml.value = cached;
+      }
+    }
+
     const delta = quill.clipboard.convert({html: this.value});
     quill.setContents(delta, Quill.sources.SILENT);
 
@@ -382,15 +412,30 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
   private _handleTextChange() {
     this.value = this.quillElement.getSemanticHTML();
     this.editorHtml.value = this.value;
+    this._cacheContent();
     this.emit('zn-change');
   }
 
-  private _getQuillKeyboardBindings() {
-    const empty = (value: string) => {
-      const match = value.match(/[^<pbr\s>/]/);
-      return match === null;
-    };
+  private _isEmpty(value: string) {
+    return value.match(/[^<pbr\s>/]/) === null;
+  }
+
+  private _cacheContent() {
+    if (!this.storeKey || !this._store) return;
+    if (this._isEmpty(this.value)) {
+      this._store.remove(this.storeKey);
+    } else {
+      this._store.set(this.storeKey, this.value);
+    }
+  }
 
+  private _clearCachedContent() {
+    if (this.storeKey && this._store) {
+      this._store.remove(this.storeKey);
+    }
+  }
+
+  private _getQuillKeyboardBindings() {
     // Always add an Enter binding to support emoji selection in all interaction types
     return {
       'enter': {
@@ -406,7 +451,7 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
           if (this.interactionType === 'chat') {
             const form = this.closest('form');
-            const hasText = !!this.value && this.value.trim().length > 0 && !empty(this.value);
+            const hasText = !!this.value && this.value.trim().length > 0 && !this._isEmpty(this.value);
             const attachmentInput = form?.querySelector('input[name="attachments"]') as HTMLInputElement | null;
             const hasAttachments = !!attachmentInput?.value && attachmentInput.value !== '[]';
             if (form && (hasText || hasAttachments)) {

package/src/components/editor/editor.test.ts

@@ -1,5 +1,6 @@
 import '../../../dist/zn.min.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import {expect, fixture, html} from '@open-wc/testing';
+import type ZnEditor from './editor.component';
 
 describe('<zn-editor>', () => {
   it('should render a component', async () => {
@@ -7,4 +8,64 @@ describe('<zn-editor>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('content caching', () => {
+    const KEY = 'zned:test-draft';
+
+    afterEach(() => {
+      sessionStorage.removeItem(KEY);
+      localStorage.removeItem(KEY);
+    });
+
+    it('should restore cached content into an empty editor', async () => {
+      sessionStorage.setItem(KEY, '0,<p>Hello draft</p>');
+      const el = await fixture<ZnEditor>(html`
+        <zn-editor store-key="test-draft"></zn-editor>`);
+
+      expect(el.value).to.contain('Hello draft');
+    });
+
+    it('should not overwrite an initial value with cached content', async () => {
+      sessionStorage.setItem(KEY, '0,<p>Hello draft</p>');
+      const el = await fixture<ZnEditor>(html`
+        <zn-editor store-key="test-draft" .value=${'<p>Existing</p>'}></zn-editor>`);
+
+      expect(el.value).to.contain('Existing');
+      expect(el.value).to.not.contain('Hello draft');
+    });
+
+    it('should read from localStorage when local-storage is set', async () => {
+      localStorage.setItem(KEY, '0,<p>Local draft</p>');
+      const el = await fixture<ZnEditor>(html`
+        <zn-editor store-key="test-draft" local-storage></zn-editor>`);
+
+      expect(el.value).to.contain('Local draft');
+    });
+
+    it('should cache content when the editor changes', async () => {
+      const el = await fixture<ZnEditor>(html`
+        <zn-editor store-key="test-draft" .value=${'<p>Typed reply</p>'}></zn-editor>`);
+
+      document.dispatchEvent(new Event('zn-editor-update'));
+      await el.updateComplete;
+
+      // Quill's getSemanticHTML encodes spaces as &nbsp;
+      expect(sessionStorage.getItem(KEY)).to.contain('Typed&nbsp;reply');
+    });
+
+    it('should clear cached content on form submit', async () => {
+      const form = await fixture<HTMLFormElement>(html`
+        <form @submit=${(e: Event) => e.preventDefault()}>
+          <zn-editor store-key="test-draft" .value=${'<p>Typed reply</p>'}></zn-editor>
+        </form>`);
+      const el = form.querySelector<ZnEditor>('zn-editor')!;
+
+      document.dispatchEvent(new Event('zn-editor-update'));
+      await el.updateComplete;
+      expect(sessionStorage.getItem(KEY)).to.contain('Typed&nbsp;reply');
+
+      form.requestSubmit();
+      expect(sessionStorage.getItem(KEY)).to.equal(null);
+    });
+  });
 });

package/src/components/query-builder/query-builder.component.ts

@@ -13,6 +13,7 @@ import type {ZnChangeEvent} from "../../events/zn-change";
 import type {ZnInputEvent} from "../../events/zn-input";
 
 import styles from './query-builder.scss';
+import type ZnDatepicker from "../datepicker";
 
 export type QueryBuilderData = QueryBuilderItem[];
 
@@ -22,10 +23,24 @@ export interface QueryBuilderItem {
   type?: QueryBuilderType;
   options?: QueryBuilderOptions;
   operators: QueryBuilderOperators[];
+  dateSubmitFormat?: QueryBuilderDateSubmitFormat;
   maxOptionsVisible?: string;
 }
 
-export type QueryBuilderType = 'bool' | 'boolean' | 'date' | 'number';
+/**
+ * Controls how `date` and `dateTime` filter values are serialized when the
+ * query is submitted.
+ *
+ * - `'iso'` — RFC 3339 / ISO 8601 (e.g. `2026-06-09T16:05:00Z`).
+ * - `'timestamp'` — Unix timestamp in seconds since epoch.
+ * - `'legacy'` — whatever format the current system emits. Kept so existing
+ *                   backends keep working while consumers migrate to one of the
+ *                   formats above. - DEFAULT
+ */
+export type QueryBuilderDateSubmitFormat = 'iso' | 'timestamp' | 'legacy';
+
+export type QueryBuilderType = 'bool' | 'boolean' | 'date' | 'dateTime' | 'number';
+
 
 export interface QueryBuilderOptions {
   [key: string | number]: string | number;
@@ -187,6 +202,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
             </zn-option>`)}
         </zn-select>
         <input id="main-input" name="${this.name}" value="${this.value}" hidden>
+        <div id="air-datepicker-query-builder-container" class="air-datepicker-global-container"></div>
       </div>
     `;
   }
@@ -214,6 +230,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
     if (filter === undefined) return;
 
     const uniqueId = Math.random().toString(36).substring(7);
+
     this._selectedRules.set(uniqueId, {
       id: filter.id,
       name: filter.name,
@@ -306,7 +323,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
   }
 
   private _createInput(filter: QueryBuilderItem, uniqueId: string, selectedComparator: QueryBuilderOperators) {
-    let input: ZnSelect | ZnInput | null;
+    let input: ZnSelect | ZnInput | ZnDatepicker | null;
     switch (filter.type) {
       case 'bool':
       case 'boolean': {
@@ -318,7 +335,11 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
         break;
       }
       case 'date': {
-        input = this._createDateInput(uniqueId);
+        input = this._createDateInput(uniqueId, false, filter.dateSubmitFormat);
+        break;
+      }
+      case 'dateTime': {
+        input = this._createDateInput(uniqueId, true , filter.dateSubmitFormat);
         break;
       }
       default: {
@@ -373,13 +394,19 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
     return litToHTML<ZnInput>(input);
   }
 
-  private _createDateInput(uniqueId: string): ZnInput | null {
+  private _createDateInput(uniqueId: string, hasTime: boolean, submitFormat: QueryBuilderDateSubmitFormat = 'legacy'): ZnDatepicker | null {
     const input = html`
-      <zn-input type="date"
-                class="query-builder__value"
-                @zn-input="${(e: ZnInputEvent) => this._updateDateValue(uniqueId, e)}">
-      </zn-input>`;
-    return litToHTML<ZnInput>(input);
+      <zn-datepicker
+        name="${uniqueId}"
+        format-time="HH:mm"
+        .container=${this.container.querySelector('#air-datepicker-query-builder-container')}
+        time-picker="${hasTime}"
+        class="query-builder__value"
+        @zn-change="${(e: ZnChangeEvent) => this._updateDateValue(uniqueId, e, submitFormat)}"
+        >
+      </zn-datepicker>
+      `;
+    return litToHTML<ZnDatepicker>(input);
   }
 
   private _createSelectInput(uniqueId: string, filter: QueryBuilderItem, selectedComparator: QueryBuilderOperators): ZnSelect | null {
@@ -426,23 +453,36 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
     this._handleChange();
   }
 
-  private _updateDateValue(id: string, event: Event | { target: ZnSelect | ZnInput | HTMLDivElement }) {
+  private _updateDateValue(id: string, event: Event | { target: ZnDatepicker | HTMLDivElement }, submitFormat: QueryBuilderDateSubmitFormat = 'legacy') {
     const filter = this._selectedRules.get(id);
     if (!filter) return;
-    const input = event.target as ZnSelect | ZnInput;
-    const operator = filter.operator as QueryBuilderOperators;
-    let timestamp: string;
 
-    if (operator === QueryBuilderOperators.Eq || operator === QueryBuilderOperators.Neq) {
-      timestamp = (Date.parse(input.value as string) / 1000).toString();
-    } else {
-      // Dodgy logic to offset backend filter comparator values
-      // Ref: backend/src/Infrastructure/Helpers/AdvancedFilterHelper.php:106
-      const multiplier = operator === QueryBuilderOperators.Before ? -1 : 1;
-      timestamp = (Math.floor((Date.now() - Date.parse(input.value as string)) / 1000 / 60) * multiplier).toString();
+    const input = event.target as ZnDatepicker;
+    const operator = filter.operator as QueryBuilderOperators;
+    let d: Date;
+    let value: string;
+
+    switch (submitFormat) {
+      case "legacy":
+        if (operator === QueryBuilderOperators.Eq || operator === QueryBuilderOperators.Neq) {
+          value = (input.timestamp / 1000).toString();
+        } else {
+          // Dodgy logic to offset backend filter comparator values
+          // Ref: backend/src/Infrastructure/Helpers/AdvancedFilterHelper.php:106
+          const multiplier = operator === QueryBuilderOperators.Before ? -1 : 1;
+          value = (Math.floor((Date.now() - input.timestamp) / 1000 / 60) * multiplier).toString();
+        }
+        break;
+      case "timestamp":
+        value = input.timestamp.toString();
+        break;
+      case "iso":
+        d = new Date(input.timestamp);
+        value = new Date(d.getTime() - d.getTimezoneOffset() * 60_000).toISOString();
+        break;
     }
 
-    filter.value = timestamp as string;
+    filter.value = value;
 
     this._selectedRules.set(id, filter);
     this._handleChange();
@@ -459,6 +499,7 @@ export default class ZnQueryBuilder extends ZincElement implements ZincFormContr
     this._handleChange();
   }
 
+
   private updateInValue(id: string, event: Event) {
     const filter = this._selectedRules.get(id);
     if (!filter) return;

package/src/components/query-builder/query-builder.scss

@@ -1,6 +1,10 @@
 @use "../../wc";
 @use "../../../scss/shared/form-elements";
 
+
+@use "../../../scss/air-datapicker";
+
+
 :host {
   display: contents;
 

package/src/components/style/style.component.ts

@@ -1,10 +1,11 @@
 import {type CSSResultGroup, unsafeCSS} from 'lit';
+import {customElement, property} from 'lit/decorators.js';
 import {LocalizeController} from '../../utilities/localize';
-import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './style.scss';
 
+@customElement('zn-style')
 export default class ZnStyle extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
@@ -12,7 +13,8 @@ export default class ZnStyle extends ZincElement {
   private readonly localize = new LocalizeController(this);
 
   @property() color = '';
-  @property({type: Boolean}) border = false;
+  @property() border = '';
+  @property() size = '';
   @property({type: Boolean}) error = false;
   @property({type: Boolean}) success = false;
   @property({type: Boolean}) info = false;
@@ -26,6 +28,7 @@ export default class ZnStyle extends ZincElement {
   @property() height = '';
   @property() pad = '';
   @property() margin = '';
+  @property({type: Boolean}) muted = false;
   @property({type: Boolean}) gutter = false;
   @property({attribute: 'a-margin'}) autoMargin = '';
 
@@ -81,9 +84,34 @@ export default class ZnStyle extends ZincElement {
       this.classList.toggle('h-full', true);
     }
 
-    if (this.border) {
+    // border accepts any combination of t/b/l/r, plus 'a' (or 'tblr') as a
+    // shortcut for all four sides. Existing `<zn-style border>` (boolean
+    // attribute → empty string value with attribute present) keeps rendering
+    // all four sides; pure absence renders no border.
+    const borderSides = this.hasAttribute('border')
+      ? (this.border || 'a')
+      : '';
+    if (borderSides) {
       display = 'inline-block'
-      this.classList.toggle('zn-border', true);
+      for (const c of borderSides) {
+        switch (c) {
+          case 'a':
+            this.classList.toggle('zn-border', true);
+            break;
+          case 't':
+            this.classList.toggle('zn-bt', true);
+            break;
+          case 'b':
+            this.classList.toggle('zn-bb', true);
+            break;
+          case 'l':
+            this.classList.toggle('zn-bl', true);
+            break;
+          case 'r':
+            this.classList.toggle('zn-br', true);
+            break;
+        }
+      }
     }
 
     if (this.pad) {
@@ -174,6 +202,17 @@ export default class ZnStyle extends ZincElement {
       }
     }
 
+    if (this.muted) {
+      display = 'inline-block';
+      this.classList.toggle('zn-muted', true);
+    }
+
+    // size: xs/s/l/xl each toggle a sizing class. 'm' (and empty) are the
+    // default and apply no class.
+    if (this.size && this.size !== 'm') {
+      this.classList.toggle('zn-size-' + this.size, true);
+    }
+
     if (this.display) {
       // Force attribute display
       display = this.display