@kubex/zinc 1.1.39 → 1.1.40

package/docs/_utilities/code-previews.cjs

@@ -89,18 +89,22 @@ module.exports = function (doc, options)
   });
 
   // Wrap code preview scripts in anonymous helpers so they don't run in the global scope
+  const jsTypes = new Set(['', 'text/javascript', 'application/javascript', 'application/ecmascript', 'text/ecmascript']);
   doc.querySelectorAll('.code-preview__preview script').forEach(script =>
   {
-    if(script.type === 'module')
+    const type = (script.getAttribute('type') || '').toLowerCase();
+    if(type === 'module')
     {
       // Modules are already scoped
       script.textContent = script.innerHTML;
     }
-    else
+    else if(jsTypes.has(type))
     {
       // Wrap non-modules in an anonymous function so they don't run in the global scope
       script.textContent = `(() => { ${script.innerHTML} })();`;
     }
+    // Otherwise leave alone: data blocks (e.g. type="application/json", type="zn-templates")
+    // are inert by spec and components read their original textContent directly.
   });
 
   return doc;

package/docs/pages/components/datepicker.md

@@ -168,7 +168,6 @@ Combine `min-date` and `max-date` to constrain the selectable date range.
   help-text="Select dates within the conference period (March 1-15, 2026)">
 </zn-datepicker>
 ```
-
 ### Clearable
 
 Use the `clearable` attribute to add a "Clear" button to the calendar popup, allowing users to easily remove a selected date.
@@ -417,4 +416,14 @@ Use [CSS parts](#css-parts) to customize the way form controls are drawn. This e
 </style>
 ```
 
+### Date Time
+
+Displays time.
 
+```html:preview
+<zn-datepicker
+  time-picker
+  label="Conference dates"
+  help-text="Select date and time">
+</zn-datepicker>
+```

package/docs/pages/components/style.md

@@ -104,3 +104,49 @@ layout: component
 <div class="style-abg"><zn-style border a-margin=a>ALL Margin</zn-style></div>
 ```
 
+### Border
+
+Accepts any combination of `t`, `b`, `l`, `r` to render specific sides. Use `a` (or the equivalent `tblr`) as a shortcut for all four sides. The bare `border` attribute (no value) is equivalent to `border="a"` and is kept for backward compatibility.
+
+```html:preview
+<zn-style border="t" pad=a>Top only</zn-style>
+<zn-style border="b" pad=a>Bottom only</zn-style>
+<zn-style border="l" pad=a>Left only</zn-style>
+<zn-style border="r" pad=a>Right only</zn-style>
+<zn-style border="tb" pad=a>Top + Bottom</zn-style>
+<zn-style border="lr" pad=a>Left + Right</zn-style>
+<zn-style border="tl" pad=a>Top + Left</zn-style>
+<zn-style border="a"  pad=a>All sides (a)</zn-style>
+<zn-style border      pad=a>All sides (bare attribute)</zn-style>
+```
+
+### Size
+
+Adjusts font size in five steps mapped to the zinc font-size tokens. `m` is the default and applies no class.
+
+| value | token                       |
+| ----- | --------------------------- |
+| `xs`  | `--zn-font-size-x-small`    |
+| `s`   | `--zn-font-size-small`      |
+| `m`   | inherits (no class applied) |
+| `l`   | `--zn-font-size-large`      |
+| `xl`  | `--zn-font-size-x-large`    |
+
+```html:preview
+<zn-style size="xs">Extra small</zn-style>
+<zn-style size="s">Small</zn-style>
+<zn-style size="m">Medium (default)</zn-style>
+<zn-style size="l">Large</zn-style>
+<zn-style size="xl">Extra large</zn-style>
+```
+
+### Muted
+
+Dims the content with reduced opacity. Useful for placeholder-like values, em-dashes for empty cells, or any text you want visually de-emphasized without changing its colour.
+
+```html:preview
+<zn-style>Regular text</zn-style>
+<zn-style muted>Muted text</zn-style>
+<zn-style muted>&mdash;</zn-style>
+```
+

package/package.json

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

package/scss/_root.scss

@@ -108,7 +108,27 @@
 }
 
 .zn-mono {
-  font-family: var(--zn-font-family-mono, "monospace");
+  font-family: var(--zn-font-family-mono), monospace;
+}
+
+.zn-muted {
+  color: var(--zn-color-muted-text);
+}
+
+.zn-size-xs {
+  font-size: var(--zn-font-size-x-small);
+}
+
+.zn-size-s {
+  font-size: var(--zn-font-size-small);
+}
+
+.zn-size-l {
+  font-size: var(--zn-font-size-large);
+}
+
+.zn-size-xl {
+  font-size: var(--zn-font-size-x-large);
 }
 
 :root, [t="light"], .theme-light, [t="dark"], .theme-dark {

package/scss/air-datapicker.scss

@@ -0,0 +1,50 @@
+
+// External components
+@use "../node_modules/air-datepicker/air-datepicker.css";
+
+.air-datepicker {
+  --adp-color: rgba(var(--zn-text), var(--zn-text-opacity));
+  --adp-nav-color-secondary: rgb(var(--zn-purple-text));
+
+  --adp-day-name-color: var(--zn-color-primary-600);
+  --adp-day-name-color-hover: var(--zn-color-primary-700);
+  --adp-cell-background-color-selected: var(--zn-color-primary-600);
+  --adp-cell-background-color-selected-hover: var(--zn-color-primary-700);
+  --adp-color-current-date: var(--zn-color-primary-600);
+
+  --adp-background-color: var(--zn-input-background-color);
+  --adp-background-color-hover: var(--zn-input-background-color-hover);
+  --adp-background-color-active: var(--zn-input-background-color-hover);
+  --adp-background-color-selected-other-month: var(--zn-color-primary-300);
+  --adp-background-color-in-range: var(--zn-color-primary-100);
+
+  --adp-border-color: rgb(var(--zn-border-color));
+  --adp-border-color-inline: rgb(var(--zn-border-color));
+  --adp-border-color-inner: rgb(var(--zn-border-color));
+
+  --adp-cell-background-color-in-range: var(--zn-color-primary-100);
+  --adp-cell-background-color-in-range-hover: var(--zn-color-primary-200);
+}
+
+.air-datepicker--pointer:after {
+  background-color: var(--zn-input-background-color);
+}
+
+.air-datepicker-global-container {
+  z-index: 1000000;
+}
+
+.air-datepicker-button {
+  border: none;
+  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
+  border-radius: var(--adp-border-radius);
+  font-family: var(--adp-font-family), sans-serif;
+  font-size: var(--zn-font-size-medium);
+  font-weight: var(--zn-font-weight-normal);
+  cursor: pointer;
+  color: rgba(var(--zn-text), var(--zn-text-opacity));
+
+  &:hover {
+    background-color: var(--zn-input-background-color-hover) !important;
+  }
+}

package/scss/boot.scss

@@ -9,55 +9,8 @@
 // Needed components for positioning
 @use "./shared";
 
-// External components
-@use "../node_modules/air-datepicker/air-datepicker.css";
+@use "./air-datapicker";
 
-.air-datepicker {
-  --adp-color: rgba(var(--zn-text), var(--zn-text-opacity));
-  --adp-nav-color-secondary: rgb(var(--zn-purple-text));
-
-  --adp-day-name-color: var(--zn-color-primary-600);
-  --adp-day-name-color-hover: var(--zn-color-primary-700);
-  --adp-cell-background-color-selected: var(--zn-color-primary-600);
-  --adp-cell-background-color-selected-hover: var(--zn-color-primary-700);
-  --adp-color-current-date: var(--zn-color-primary-600);
-
-  --adp-background-color: var(--zn-input-background-color);
-  --adp-background-color-hover: var(--zn-input-background-color-hover);
-  --adp-background-color-active: var(--zn-input-background-color-hover);
-  --adp-background-color-selected-other-month: var(--zn-color-primary-300);
-  --adp-background-color-in-range: var(--zn-color-primary-100);
-
-  --adp-border-color: rgb(var(--zn-border-color));
-  --adp-border-color-inline: rgb(var(--zn-border-color));
-  --adp-border-color-inner: rgb(var(--zn-border-color));
-
-  --adp-cell-background-color-in-range: var(--zn-color-primary-100);
-  --adp-cell-background-color-in-range-hover: var(--zn-color-primary-200);
-}
-
-.air-datepicker--pointer:after {
-  background-color: var(--zn-input-background-color);
-}
-
-.air-datepicker-global-container {
-  z-index: 1000000;
-}
-
-.air-datepicker-button {
-  border: none;
-  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
-  border-radius: var(--adp-border-radius);
-  font-family: var(--adp-font-family), sans-serif;
-  font-size: var(--zn-font-size-medium);
-  font-weight: var(--zn-font-weight-normal);
-  cursor: pointer;
-  color: rgba(var(--zn-text), var(--zn-text-opacity));
-
-  &:hover {
-    background-color: var(--zn-input-background-color-hover) !important;
-  }
-}
 
 // Utility to minimize flashing of undefined web components
 .zn-cloak:has(:not(:defined)) {

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

@@ -3,8 +3,8 @@ import {type CSSResultGroup, html, nothing, type TemplateResult, unsafeCSS} from
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, query} from 'lit/decorators.js';
-import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {ref} from "lit/directives/ref.js";
+import {ResizeController} from '@lit-labs/observers/resize-controller.js';
 import {Task} from "@lit/task";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import {type ZnFilterChangeEvent} from "../../events/zn-filter-change";
@@ -40,6 +40,8 @@ interface Cell {
   style?: string;
   iconSrc?: string;
   iconColor?: string;
+  iconSize?: number;
+  iconStyle?: string;
   hoverContent?: string;
   hoverPlacement?: string;
   chipColor?: string;
@@ -100,8 +102,27 @@ interface HeaderConfig {
   hideHeader?: boolean;
   hideColumn?: boolean;
   secondary?: boolean;
+  type?: string;
+  cellTemplate ?: Cell;
+  ifEmpty ?:Cell;
 }
 
+type DisplayTemplate = (cell: Cell, row: Row, header: HeaderConfig) =>
+  TemplateResult | string;
+
+
+const defaultTemplates = {
+  dateTime: ((cell) => {
+    const t = cell.text || '';
+    return html`
+      <div class="table__collum--datetime">
+        <span><strong>${t.slice(0, 10)}</strong></span>
+        <zn-style size="s" muted>${t.slice(11)}</zn-style>
+      </div>`
+  }) satisfies DisplayTemplate
+};
+
+
 interface DataRequest {
   page: number;
   perPage: number;
@@ -171,7 +192,7 @@ export default class ZnDataTable extends ZincElement {
   };
 
   @property({attribute: 'data-uri'}) dataUri: string;
-  @property({attribute: 'data', type: Object, reflect: true}) data: any;
+  @property({attribute: 'data', type: Object}) data: Row[] | Row = [];
   @property({attribute: 'sort-column'}) sortColumn: string;
   @property({attribute: 'sort-direction'}) sortDirection: string = "asc";
   @property({attribute: 'local-sort', type: Boolean}) localSort: boolean = false;
@@ -181,6 +202,8 @@ export default class ZnDataTable extends ZincElement {
   @property({attribute: 'key'}) key: string = 'id';
   @property({attribute: 'headers', type: Object}) headers: Record<string, HeaderConfig> = {};
 
+  @property({attribute: false}) displayTemplates: Record<string, DisplayTemplate> = {};
+
   // Hide header text keeping the content - e.g. Action buttons without a header
   @property({attribute: 'hide-headers', type: Object}) hiddenHeaders = '{}';
 
@@ -217,6 +240,7 @@ export default class ZnDataTable extends ZincElement {
 
   @property() groups = '';
 
+  @property({attribute: 'per-page-size', type:Number}) itemsPerPage:number = DEFAULT_PER_PAGE;
   @query('#select-all-rows') selectAllButton: ZnButton;
 
   // Data Table Properties
@@ -232,7 +256,7 @@ export default class ZnDataTable extends ZincElement {
     },
   });
 
-  private itemsPerPage: number = DEFAULT_PER_PAGE;
+  // private itemsPerPage: number = DEFAULT_PER_PAGE;
   private page: number = DEFAULT_PAGE;
   private totalPages: number;
 
@@ -292,7 +316,6 @@ export default class ZnDataTable extends ZincElement {
         Object.assign(requestData, params);
       }
 
-
       // Add any extra request params
       if (requestParams && typeof requestParams === 'object') {
         Object.assign(requestData, requestParams);
@@ -320,6 +343,7 @@ export default class ZnDataTable extends ZincElement {
   private _expandedRows: Set<string> = new Set();
   private _hiddenCells: Map<string, Cell[]> = new Map();
   private _secondaryHeaders: HeaderConfig[];
+  private _formatTemplates: Record<string, DisplayTemplate> = defaultTemplates;
 
   requestParams: Record<string, any> = {};
 
@@ -330,12 +354,13 @@ export default class ZnDataTable extends ZincElement {
   }
 
   render() {
+
     // If no-initial-load is set, do not invoke the Task on the first render
-    let tableBody: TemplateResult;
+    let tableBody: TemplateResult = html``;
     if (this.noInitialLoad && this._initialLoad) {
       tableBody = html`
         <slot name="empty-state"></slot>`;
-    } else {
+    } else if (this.dataUri) {
       tableBody = this._dataTask.render({
         pending: () => {
           if (this._initialLoad) {
@@ -367,6 +392,18 @@ export default class ZnDataTable extends ZincElement {
             <div>${error}</div>`
         }
       }) as TemplateResult;
+    } else if (Array.isArray(this.data) ? this.data.length > 0 : !!this.data) {
+      const rows: Row[] = Array.isArray(this.data) ? this.data : [this.data];
+      const response: Response = {
+        rows,
+        perPage: rows.length,
+        total: rows.length,
+        page: 1,
+      };
+      this._initialLoad = false;
+      this._lastTableContent = html`
+            <div>${this.renderTable(response)}</div>`;
+      tableBody = this._lastTableContent;
     }
 
     const hasActions = this.hasSlotController.test(ActionSlots.delete.valueOf())
@@ -396,6 +433,10 @@ export default class ZnDataTable extends ZincElement {
     this.addEventListener('zn-search-change', this.searchChangeListener);
   }
 
+  private getTemplate(name: string): DisplayTemplate | undefined {
+    return this.displayTemplates[name] ?? this._formatTemplates[name];
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this.removeEventListener('zn-filter-change', this.filterChangeListener);
@@ -616,7 +657,7 @@ export default class ZnDataTable extends ZincElement {
               'table__row--data': true,
             })}" data-row-id="${row.id}">
               ${anyHidden ? this.renderExpanderCell(row) : nothing}
-              ${(visibleRowCells.get(row.id) || row.cells).map((value: Cell, index: number) => this.renderCellBody(index, value))}
+              ${(visibleRowCells.get(row.id) || row.cells).map((value: Cell, index: number) => this.renderCellBody(index, value, row))}
               ${this.rowHasActions ? this.renderActions(row) : nothing}
             </tr>
             ${this._expandedRows.has(row.id) ? this.renderDetailsRow(row, colCount) : nothing}
@@ -922,91 +963,128 @@ export default class ZnDataTable extends ZincElement {
     };
   }
 
-  renderCell(data: Cell) {
-    if (data && typeof data === 'object') {
-      let content: TemplateResult | ZincElement = html`${data.text}`;
+  renderCell(data: Cell, row?: Row, header?: HeaderConfig): TemplateResult | ZincElement {
+    const fn = (header?.type ? this.getTemplate(header.type) : undefined);
 
-      if (data.style || data.color) {
-        const styleStr = typeof data.style === 'string' ? data.style : '';
-        const tokens = new Set(styleStr.split(',').filter(Boolean));
+    if((!data.text && !data.iconSrc) && header?.ifEmpty !== undefined) {
+      const header2 = {...header, type: undefined, render: undefined, renderTemplate: undefined};
+      return this.renderCell({...data, ...header.ifEmpty}, row, header2)
+    }
 
-        const isMono = tokens.has('mono') || tokens.has('code');
-        const isBorder = tokens.has('border');
-        const isCenter = tokens.has('center');
+    if (fn && row && header) {
+      const out = fn(data, row, header);
+      return typeof out === 'string' ? html`${unsafeHTML(out)}` : out;
+    }
 
-        if (tokens.has('bold') || tokens.has('strong')) {
-          content = html`<strong>${content}</strong>`;
-        }
+    if(!data || typeof data !== 'object') {
+      return data;
+    }
 
-        if (tokens.has('italic')) {
-          content = html`<em>${content}</em>`;
-        }
+    if(header?.cellTemplate !== undefined) {
+      data = {...header.cellTemplate, ...data}
+    }
 
-        content = html`
-          <zn-style
-            font="${isMono ? 'mono' : nothing}"
-            border="${isBorder || nothing}"
-            center="${isCenter || nothing}"
-            color="${ifDefined(data.color)}">${content}
-          </zn-style>`;
-      }
+    let content: TemplateResult | ZincElement = html`${data.text}`;
+
+    if (data.style || data.color) {
+      const styleStr = typeof data.style === 'string' ? data.style : '';
+      const tokens = new Set(styleStr.split(',').filter(Boolean));
+
+      const isMono = tokens.has('mono') || tokens.has('code');
+      const isBorder = tokens.has('border');
+      const isCenter = tokens.has('center');
+      const isMuted = tokens.has('muted');
 
-      if (data.uri) {
-        content = html`
-          <a href="${data.uri}"
-             data-target="${ifDefined(data.target || nothing)}"
-             gaid="${ifDefined(data.gaid || nothing)}">${content}</a>`;
+      if (tokens.has('bold') || tokens.has('strong')) {
+        content = html`<strong>${content}</strong>`;
       }
 
-      if (data.chipColor) {
-        return html`
-          <zn-chip type="${data.chipColor}">${content}</zn-chip>`;
+      if (tokens.has('italic')) {
+        content = html`<em>${content}</em>`;
       }
 
-      if (data.hoverContent) {
-        const placement = data.hoverPlacement ?? 'top';
+      content = html`
+        <zn-style
+          font="${isMono ? 'mono' : nothing}"
+          border="${isBorder || nothing}"
+          center="${isCenter || nothing}"
+          muted="${isMuted || nothing}"
+          color="${ifDefined(data.color)}">${content}
+        </zn-style>`;
+    }
 
-        if (data.iconSrc) {
-          const src = data.iconSrc;
-          const color = data.iconColor ?? '';
+    if (data.uri) {
+      content = html`
+        <a href="${data.uri}"
+           data-target="${ifDefined(data.target || nothing)}"
+           gaid="${ifDefined(data.gaid || nothing)}">${content}</a>`;
+    }
 
-          return html`
-            ${content}
-            <zn-hover-container placement="${placement}"
-                                flip>
-              <zn-icon src="${src}" color="${color}"></zn-icon>
-              <div slot="content">
-                ${unsafeHTML(data.hoverContent)}
-              </div>
-            </zn-hover-container>`;
-        }
+    if (data.chipColor) {
+      return html`
+        <zn-chip type="${data.chipColor}">${content}</zn-chip>`;
+    }
 
-        return html`
-          <zn-hover-container placement="${placement}"
-                              flip>
-            <div slot="anchor">${content}</div>
-            ${unsafeHTML(data.hoverContent)}
-          </zn-hover-container>`;
-      }
+    if (data.hoverContent) {
+      const placement = data.hoverPlacement ?? 'top';
 
       if (data.iconSrc) {
         const src = data.iconSrc;
-        const color = data.iconColor ?? '';
+        const color = data.iconColor;
+        const size = data.iconSize;
+        const tokens = (data.iconStyle ?? '').split(',').map(s => s.trim()).filter(Boolean);
 
-        return html`
-          <zn-icon src="${src}" color="${color}"></zn-icon> ${content}`;
-      }
-
-      if (data.copyable) {
         return html`
           ${content}
-          <zn-copy-button value="${data.text}"></zn-copy-button>`;
+          <zn-hover-container placement="${placement}" flip>
+            <zn-icon
+              src="${src}"
+              size="${ifDefined(size)}"
+              color="${ifDefined(color)}"
+              ${ref(el => {
+                if (!el) return;
+                tokens.forEach(t => el.setAttribute(t, ''));
+              })}
+            ></zn-icon>
+            <div slot="content">
+              ${unsafeHTML(data.hoverContent)}
+            </div>
+          </zn-hover-container>`;
       }
 
-      return content;
+      return html`
+        <zn-hover-container placement="${placement}" flip>
+          <div slot="anchor">${content}</div>
+          ${unsafeHTML(data.hoverContent)}
+        </zn-hover-container>`;
     }
 
-    return data;
+    if (data.iconSrc) {
+      const src = data.iconSrc;
+      const color = data.iconColor;
+      const size = data.iconSize;
+      const tokens = (data.iconStyle ?? '').split(',').map(s => s.trim()).filter(Boolean);
+
+      return html`
+        <zn-icon
+          src="${src}"
+          size="${ifDefined(size)}"
+          color="${ifDefined(color)}"
+          ${ref(el => {
+            if (!el) return;
+            tokens.forEach(t => el.setAttribute(t, ''));
+          })}
+        ></zn-icon> ${content}`;
+    }
+
+    if (data.copyable) {
+      return html`
+        ${content}
+        <zn-copy-button value="${data.text}"></zn-copy-button>`;
+    }
+
+    return content;
+
   }
 
   private updateActionKeys(slotName: string) {
@@ -1076,7 +1154,7 @@ export default class ZnDataTable extends ZincElement {
     `;
   }
 
-  private renderCellBody(index: number, value: Cell) {
+  private renderCellBody(index: number, value: Cell, row: Row) {
     const filteredHeaders = Object.values(this.headers).filter((header: HeaderConfig) => {
       if (header.hideHeader || header.hideColumn) return false;
 
@@ -1084,7 +1162,8 @@ export default class ZnDataTable extends ZincElement {
 
       return !header.secondary;
     });
-    const headerKey: string = filteredHeaders[index]?.key;
+    const header: HeaderConfig | undefined = filteredHeaders[index];
+    const headerKey: string = header?.key;
 
     return html`
       <td
@@ -1094,7 +1173,7 @@ export default class ZnDataTable extends ZincElement {
           'table__cell--wide': headerKey === this.wideColumn,
           'table__cell--last': index === filteredHeaders.length - 1,
         })}">
-        <div>${this.renderCell(value)}</div>
+        <div>${this.renderCell(value, row, header)}</div>
       </td>`;
   }
 
@@ -1136,7 +1215,7 @@ export default class ZnDataTable extends ZincElement {
               return html`
                 <div class="table__details__item">
                   <div class="table__details__label">${label}</div>
-                  <div class="table__details__value">${this.renderCell(cell)}</div>
+                  <div class="table__details__value">${this.renderCell(cell, row, header)}</div>
                 </div>`;
             })}
           </div>

package/src/components/data-table/data-table.scss

@@ -422,3 +422,9 @@ table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
   text-overflow: ellipsis;
 }
 
+.table__collum--datetime{
+  display:flex;
+  flex-direction:column;
+  align-items: flex-end;
+  gap:2px;
+}

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())) {