@kubex/zinc 1.1.39 → 1.1.40

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/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

package/src/components/style/style.test.ts

@@ -7,4 +7,75 @@ describe('<zn-style>', () => {
 
     expect(el).to.exist;
   });
+
+  describe('border', () => {
+    it('border="t" applies only zn-bt', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style border="t"></zn-style>`);
+      expect(el.classList.contains('zn-bt')).to.be.true;
+      expect(el.classList.contains('zn-bb')).to.be.false;
+      expect(el.classList.contains('zn-bl')).to.be.false;
+      expect(el.classList.contains('zn-br')).to.be.false;
+      expect(el.classList.contains('zn-border')).to.be.false;
+    });
+
+    it('border="tb" applies zn-bt and zn-bb', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style border="tb"></zn-style>`);
+      expect(el.classList.contains('zn-bt')).to.be.true;
+      expect(el.classList.contains('zn-bb')).to.be.true;
+      expect(el.classList.contains('zn-bl')).to.be.false;
+      expect(el.classList.contains('zn-br')).to.be.false;
+    });
+
+    it('border (attribute present but empty) applies zn-border (all four sides)', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style border></zn-style>`);
+      expect(el.classList.contains('zn-border')).to.be.true;
+    });
+
+    it('no border attribute applies no border classes', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style></zn-style>`);
+      expect(el.classList.contains('zn-border')).to.be.false;
+      expect(el.classList.contains('zn-bt')).to.be.false;
+      expect(el.classList.contains('zn-bb')).to.be.false;
+      expect(el.classList.contains('zn-bl')).to.be.false;
+      expect(el.classList.contains('zn-br')).to.be.false;
+    });
+  });
+
+  describe('size', () => {
+    it('size="s" applies zn-size-s', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style size="s"></zn-style>`);
+      expect(el.classList.contains('zn-size-s')).to.be.true;
+    });
+
+    it('size="xs" applies zn-size-xs', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style size="xs"></zn-style>`);
+      expect(el.classList.contains('zn-size-xs')).to.be.true;
+    });
+
+    it('size="xl" applies zn-size-xl', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style size="xl"></zn-style>`);
+      expect(el.classList.contains('zn-size-xl')).to.be.true;
+    });
+
+    it('size="m" applies no size class', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style size="m"></zn-style>`);
+      expect(el.classList.contains('zn-size-m')).to.be.false;
+      expect(el.classList.contains('zn-size-xs')).to.be.false;
+      expect(el.classList.contains('zn-size-s')).to.be.false;
+      expect(el.classList.contains('zn-size-l')).to.be.false;
+      expect(el.classList.contains('zn-size-xl')).to.be.false;
+    });
+  });
+
+  describe('muted', () => {
+    it('applies zn-muted class when present', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style muted></zn-style>`);
+      expect(el.classList.contains('zn-muted')).to.be.true;
+    });
+
+    it('does not apply zn-muted when absent', async () => {
+      const el = await fixture<HTMLElement>(html`<zn-style></zn-style>`);
+      expect(el.classList.contains('zn-muted')).to.be.false;
+    });
+  });
 });

package/src/utilities/query.test.ts

@@ -0,0 +1,63 @@
+import {expect, fixture, html} from '@open-wc/testing';
+import {deepQuery} from './query';
+
+describe('deepQuery', () => {
+  it('returns null when no element matches', async () => {
+    await fixture(html`<div></div>`);
+    expect(deepQuery('.does-not-exist')).to.be.null;
+  });
+
+  it('finds an element in the light DOM of document', async () => {
+    const el = await fixture<HTMLElement>(html`<div class="needle"></div>`);
+    expect(deepQuery('.needle')).to.equal(el);
+  });
+
+  it('finds an element nested inside a shadow root', async () => {
+    const host = await fixture<HTMLElement>(html`<div></div>`);
+    const shadow = host.attachShadow({mode: 'open'});
+    const needle = document.createElement('span');
+    needle.className = 'needle';
+    shadow.appendChild(needle);
+
+    expect(deepQuery('.needle')).to.equal(needle);
+  });
+
+  it('finds an element across two nested shadow roots', async () => {
+    const outer = await fixture<HTMLElement>(html`<div></div>`);
+    const outerShadow = outer.attachShadow({mode: 'open'});
+
+    const inner = document.createElement('div');
+    outerShadow.appendChild(inner);
+    const innerShadow = inner.attachShadow({mode: 'open'});
+
+    const needle = document.createElement('span');
+    needle.className = 'needle';
+    innerShadow.appendChild(needle);
+
+    expect(deepQuery('.needle')).to.equal(needle);
+  });
+
+  it('returns the first match in document order', async () => {
+    const root = await fixture<HTMLElement>(html`
+      <div>
+        <span class="needle" data-which="light"></span>
+      </div>
+    `);
+    const shadow = root.attachShadow({mode: 'open'});
+    const inShadow = document.createElement('span');
+    inShadow.className = 'needle';
+    inShadow.setAttribute('data-which', 'shadow');
+    shadow.appendChild(inShadow);
+
+    const hit = deepQuery<HTMLElement>('.needle');
+    expect(hit?.getAttribute('data-which')).to.equal('light');
+  });
+
+  it('accepts a custom root', async () => {
+    const a = await fixture<HTMLElement>(html`<div><span class="needle"></span></div>`);
+    const b = await fixture<HTMLElement>(html`<div></div>`);
+
+    expect(deepQuery('.needle', a)).to.exist;
+    expect(deepQuery('.needle', b)).to.be.null;
+  });
+});

package/src/utilities/query.ts

@@ -1,3 +1,30 @@
+export function deepQuery<T extends Element = Element>(
+  selector: string,
+  root: Document | ShadowRoot | Element = document,
+): T | null {
+  const direct = root.querySelector<T>(selector);
+  if (direct) return direct;
+  for (const el of root.querySelectorAll<Element>('*')) {
+    if (el.shadowRoot) {
+      const hit = deepQuery<T>(selector, el.shadowRoot);
+      if (hit) return hit;
+    }
+  }
+  return null;
+}
+
+export function deepQueryAll<T extends Element = Element>(
+  selector: string,
+  root: Document | ShadowRoot | Element = document,
+  out: T[] = [],
+): T[] {
+  out.push(...root.querySelectorAll<T>(selector));
+  for (const el of root.querySelectorAll<Element>('*')) {
+    if (el.shadowRoot) deepQueryAll<T>(selector, el.shadowRoot, out);
+  }
+  return out;
+}
+
 export function deepQuerySelectorAll(selector: string, element: Element, stopSelector: string): Element[] {
   const arr: Element[] = [];