@kubex/zinc 1.0.5 → 1.0.7

package/src/components/content-block/content-block.component.ts

@@ -1,10 +1,12 @@
 import {classMap} from "lit/directives/class-map.js";
+import {deepQuerySelectorAll} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
-import {html, unsafeCSS} from 'lit';
+import {html, nothing, unsafeCSS} from 'lit';
 import {property, queryAssignedNodes, queryAsync} from 'lit/decorators.js';
 import {unsafeHTML} from 'lit-html/directives/unsafe-html.js';
 import ZincElement from "../../internal/zinc-element";
 import type {PropertyValues} from 'lit';
+import type ZnTile from "../tile";
 
 import styles from './content-block.scss';
 
@@ -28,6 +30,7 @@ export default class ContentBlock extends ZincElement {
 
   @property({type: Boolean, reflect: true}) outbound = false;
   @property({type: Boolean, reflect: true}) short = false;
+  @property({attribute: 'default-display', reflect: true}) defaultDisplay: 'text' | 'html' = 'text';
 
   @queryAssignedNodes({slot: 'html', flatten: true}) htmlNodes!: Node[];
 
@@ -37,6 +40,9 @@ export default class ContentBlock extends ZincElement {
 
   private _textRows: TextRow[] = [];
 
+  private _footerObserver?: MutationObserver;
+  private _replaceDebounce: number = 0;
+
   connectedCallback() {
     super.connectedCallback();
     this.iframe.then((iframe) => {
@@ -49,37 +55,34 @@ export default class ContentBlock extends ZincElement {
           convertedHtml = convertedHtml.replace(/>/g, '>');
           convertedHtml = convertedHtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
 
-          const baseStyles = "<style>body,html{padding: 0; margin: 0; font-size: 13px; font-family: Arial;}img{max-width:100%; max-height: 500px;}</style>";
+          const baseStyles = "<style>body,html{background-color: #ffffff}img{max-width:100%; max-height: 500px;}</style>";
           iframe.srcdoc = baseStyles + convertedHtml;
         }
       }
 
       iframe.addEventListener("load", () => {
-        // Save original styles
-        const originalDisplay = iframe.style.display;
-        const originalVisibility = iframe.style.visibility;
-        const originalPosition = iframe.style.position;
-
-        // Make iframe render but stay hidden
-        iframe.style.display = 'block';
-        iframe.style.visibility = 'hidden';
-        iframe.style.position = 'absolute';
-
-        setTimeout(() => {
-          const iframeBody = iframe.contentDocument?.body;
-          if (iframeBody) {
-            const height = iframeBody.scrollHeight;
-            iframe.style.height = `${height + 30}px`;
-          }
-          // Restore original styles
-          iframe.style.display = originalDisplay;
-          iframe.style.visibility = originalVisibility;
-          iframe.style.position = originalPosition;
-        }, 50);
+        setTimeout(() => this._resizeIframe(iframe), 50);
       });
     });
   }
 
+  disconnectedCallback() {
+    try {
+      if (this._footerObserver) {
+        this._footerObserver.disconnect();
+        this._footerObserver = undefined;
+      }
+      if (this._replaceDebounce) {
+        clearTimeout(this._replaceDebounce);
+        this._replaceDebounce = 0;
+      }
+    } finally {
+      // Ensure base class cleanup
+      // @ts-ignore - base may or may not implement disconnectedCallback
+      super.disconnectedCallback?.();
+    }
+  }
+
   private _collapseContent(e: Event) {
     const target = e.target as HTMLElement;
     const headerClick = target.classList.contains('content-block-header') ||
@@ -88,6 +91,15 @@ export default class ContentBlock extends ZincElement {
     if (headerClick && target.slot !== 'nav') {
       this.short = !this.short;
       this.requestUpdate();
+      this.updateComplete.then(() => {
+        if (!this.short) {
+          this.iframe.then((iframe) => {
+            if (iframe && !iframe.classList.contains('hidden')) {
+              this._resizeIframe(iframe);
+            }
+          });
+        }
+      });
     }
   }
 
@@ -107,10 +119,46 @@ export default class ContentBlock extends ZincElement {
       if (textContent) {
         iframe.classList.remove('hidden');
         textContent.classList.add('hidden');
+        setTimeout(() => this._resizeIframe(iframe), 0);
       }
     });
   }
 
+  private _resizeIframe(iframe?: HTMLIFrameElement) {
+    const resize = (frame: HTMLIFrameElement) => {
+      const doc = frame.contentDocument;
+      if (!doc) return;
+
+      // Allow the iframe to shrink as well as grow
+      frame.style.height = 'auto';
+
+      const body = doc.body;
+      const element = doc.documentElement;
+
+      const heights = [
+        body?.scrollHeight ?? 0,
+        element?.scrollHeight ?? 0,
+        body?.offsetHeight ?? 0,
+        element?.offsetHeight ?? 0
+      ];
+      const height = Math.max(...heights);
+
+      if (height > 0) {
+        frame.style.height = `${height}px`;
+      }
+    };
+
+    if (iframe) {
+      resize(iframe);
+    } else {
+      this.iframe.then((frame) => {
+        if (frame?.contentDocument) {
+          requestAnimationFrame(() => resize(frame));
+        }
+      });
+    }
+  }
+
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
 
@@ -130,12 +178,16 @@ export default class ContentBlock extends ZincElement {
     const hasTextSlot = this.hasSlotController.test('text');
     const hasHtmlSlot = this.hasSlotController.test('html');
     const showActions = hasTextSlot && hasHtmlSlot;
+    const initialShowHtml = hasHtmlSlot && (!hasTextSlot || this.defaultDisplay === 'html');
 
     return html`
-      <zn-panel flush tabbed class="${classMap({
-        'content-block--outbound': this.outbound,
-        'content-block--short': this.short
-      })}">
+      <zn-panel flush
+                tabbed
+                flush-footer="${hasFooter || nothing}"
+                class="${classMap({
+                  'content-block--outbound': this.outbound,
+                  'content-block--short': this.short
+                })}">
 
         <zn-header class="content-block-header"
                    caption="${this.sender}"
@@ -167,10 +219,10 @@ export default class ContentBlock extends ZincElement {
         </zn-header>
 
         <zn-sp no-gap>
-          <iframe class="hidden" title="Content block HTML preview"></iframe>
+          <iframe class="${classMap({'hidden': !initialShowHtml})}" title="Content block HTML preview"></iframe>
           <slot class="html-content" name="html" style="display: none;"></slot>
           <slot name="text" style="display: none;"></slot>
-          <div class="text-content">
+          <div class="${classMap({'text-content': true, 'hidden': initialShowHtml})}">
             ${text.map((section) => html`
               ${section.type === 'reply' ? html`
                 <div class="toggle-reply" @click="${this.showReply}">...</div>` : ''}
@@ -187,7 +239,7 @@ export default class ContentBlock extends ZincElement {
         </zn-sp>
 
         ${hasFooter ? html`
-          <slot slot="footer" name="footer"></slot>` : ''}
+          <slot slot="footer" name="footer" @slotchange="${this._handleSlotChange}"></slot>` : ''}
       </zn-panel>
     `;
   }
@@ -199,6 +251,88 @@ export default class ContentBlock extends ZincElement {
     return trimmed.length > 32 ? trimmed.substring(0, 32) + '...' : trimmed;
   }
 
+  private _handleSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    const assignedEls: Element[] = slot.assignedElements({flatten: true});
+    if (!assignedEls || assignedEls.length === 0) return;
+
+    // Reset and attach a new observer to watch for dynamic content inside the footer subtree
+    if (this._footerObserver) {
+      this._footerObserver.disconnect();
+      this._footerObserver = undefined;
+    }
+
+    const obs = new MutationObserver(() => {
+      this._debouncedReplace();
+    });
+    this._footerObserver = obs;
+
+    assignedEls.forEach(el => {
+      obs.observe(el, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['href', 'download', 'caption']
+      });
+    });
+
+    // Run now and again shortly after to catch async rendering
+    this._replaceImagePlaceholders();
+    setTimeout(() => this._replaceImagePlaceholders(), 50);
+  }
+
+  private _debouncedReplace() {
+    if (this._replaceDebounce) {
+      clearTimeout(this._replaceDebounce);
+    }
+    this._replaceDebounce = window.setTimeout(() => this._replaceImagePlaceholders(), 50);
+  }
+
+  private _replaceImagePlaceholders() {
+    const textContainer = this.shadowRoot?.querySelector('.text-content') as HTMLDivElement | null;
+    if (!textContainer) {
+      // If the shadow content hasn't been rendered yet, try after the next update
+      this.updateComplete.then(() => this._replaceImagePlaceholders());
+      return;
+    }
+
+    const footer = this.querySelector(':scope > [slot="footer"]') as HTMLElement | null;
+    if (!footer) return;
+
+    const anchors = deepQuerySelectorAll('a[href]', footer, '') as HTMLAnchorElement[];
+    if (anchors.length === 0) return;
+
+    let textContent = textContainer.innerHTML;
+    const extensions = new Set(['png', 'jpg', 'jpeg', 'gif', 'bmp', 'webp', 'svg', 'heic', 'tiff', 'tif', 'avif']);
+    anchors.forEach((a) => {
+      const candidates = new Set<string>();
+      const tile = a.querySelector('zn-tile') as ZnTile | null;
+
+      const caption = (tile?.caption ?? tile?.getAttribute?.('caption') ?? '').trim();
+      if (caption) candidates.add(caption);
+
+      const downloadAttr = (a.getAttribute('download') || '').trim();
+      if (downloadAttr) candidates.add(downloadAttr);
+
+      const url = a.getAttribute('href') || '';
+      candidates.forEach((rawName) => {
+        const name = (rawName || '').trim();
+        if (!name) return;
+
+        const base = name.includes('/') ? name.split('/').pop()! : name;
+        const lowerBase = base.toLowerCase();
+        const ext = lowerBase.includes('.') ? lowerBase.split('.').pop()! : '';
+        if (ext && !extensions.has(ext)) return;
+
+        const alt = base.replace(/"/g, '&quot;');
+        textContent = textContent.replace(`[image: ${base}]`, () => `<img src="${url}" alt="${alt}" style="max-height: 500px; max-width: 100%">`);
+      });
+    });
+
+    // Update the generated content directly without triggering a re-render
+    textContainer.innerHTML = textContent;
+  }
+
   protected getTextSections(): TextRow[] {
     const textContent = this.querySelector('[slot="text"]') as HTMLDivElement | null;
     const textRows: TextRow[] = [];

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

@@ -7,13 +7,12 @@ import {
   emptyDataProvider,
   type LocalDataProvider,
 } from "./providers/provider";
+import {type CSSResultGroup, html, nothing, unsafeCSS, PropertyValues} from 'lit';
 import {FormControlController} from "../../internal/form";
-import {html, nothing, unsafeCSS} from 'lit';
 import {property, query} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
-import ZincElement from '../../internal/zinc-element';
-import type {CSSResultGroup} from 'lit';
 import type {ZincFormControl} from '../../internal/zinc-element';
+import ZincElement from '../../internal/zinc-element';
 import type ZnSelect from "../select";
 
 import styles from './data-select.scss';
@@ -37,15 +36,22 @@ import styles from './data-select.scss';
  */
 export default class ZnDataSelect extends ZincElement implements ZincFormControl {
   static styles: CSSResultGroup = unsafeCSS(styles);
+
   @query('#select') select: ZnSelect;
   @query('#select__prefix') selectPrefix: HTMLElement;
+
   /** The name of the select. Used for form submission. */
   @property() name: string;
+
   /** The value of the select. Used for form submission. */
   @property() value: string;
+
   /** The provider of the select. */
   @property() provider: 'color' | 'currency' | 'country' | 'phone';
+
+  /** The position of the icon. */
   @property({attribute: 'icon-position'}) iconPosition: 'start' | 'end' | 'none' = 'none';
+
   /** An array of keys to use for filtering the options in the selected provider. */
   @property({
     attribute: 'filter',
@@ -54,27 +60,39 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
       toAttribute: (value: string[]) => value.join(',')
     }
   }) filter: string[];
+
   /** The selects size. */
   @property({reflect: true}) size: 'small' | 'medium' | 'large' = 'medium';
+
   /** Should we show the clear button */
   @property({type: Boolean}) clearable: boolean;
+
   /** Include an "All" option at the top. */
   @property({type: Boolean, attribute: 'allow-all'}) allowAll = false;
+
   /** The selects label. If you need to display HTML, use the `label` slot instead. */
   @property() label = '';
+
   /** Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead. */
   @property({attribute: 'label-tooltip'}) labelTooltip = '';
+
   /** Text that appears above the input, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead. */
   @property({attribute: 'context-note'}) contextNote = '';
+
   /**
    * The preferred placement of the selects menu. Note that the actual placement may vary as needed to keep the listbox
    * inside the viewport.
    */
   @property({reflect: true}) placement: 'top' | 'bottom' = 'bottom';
+
   /** The selects help text. If you need to display HTML, use the `help-text` slot instead. */
   @property({attribute: 'help-text'}) helpText = '';
+
   /** The selects required attribute. */
   @property({type: Boolean, reflect: true}) required = false;
+
+  @property({attribute: "icon-only", type: Boolean, reflect: true}) iconOnly = false;
+
   protected readonly formControlController = new FormControlController(this);
 
   get validationMessage() {
@@ -85,6 +103,13 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
     return this.select.validity;
   }
 
+  constructor() {
+    super();
+    if (this.iconOnly && this.iconPosition === 'none') {
+      this.iconPosition = 'start';
+    }
+  }
+
   connectedCallback() {
     super.connectedCallback();
     window.addEventListener('keydown', this.closeOnTab);
@@ -95,6 +120,11 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
     window.removeEventListener('keydown', this.closeOnTab);
   }
 
+  protected firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
+    this._updatePrefix();
+  }
+
   checkValidity(): boolean {
     return this.select.checkValidity();
   }
@@ -185,15 +215,15 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
                  @zn-clear="${this.handleClear}"
                  @blur=${this.blur}
                  value="${this.value}"
-                 placeholder="Choose a ${localProvider.getName}"
+                 placeholder="${this.getPlaceholder(localProvider)}"
                  exportparts="combobox,expand-icon,form-control-help-text,form-control-input,display-input">
-        ${this.iconPosition !== 'none' ? html`
+        ${(this.iconPosition !== 'none' || this.iconOnly) ? html`
           <div id="select__prefix" slot="prefix" class="select__prefix"></div>` : ''}
         ${data.map((item: DataProviderOption) => html`
           <zn-option class="select__option" value="${item.key}">
-            ${this.iconPosition !== 'none' ? html`<span
+            ${(this.iconPosition !== 'none' || this.iconOnly) ? html`<span
               slot="${this.iconPosition === 'end' ? 'suffix' : 'prefix'}">${item.prefix}</span>` : ''}
-            ${item.value}
+            ${this.iconOnly ? undefined : item.value}
           </zn-option>`)}
       </zn-select>`;
   }
@@ -201,19 +231,30 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
   private _updatePrefix() {
     // Set the prefix of the select to the selected values prefix
     const selectedOption = this.select.selectedOptions[0];
-    if (selectedOption && (this.iconPosition !== 'none')) {
+    console.log('selectedOption', selectedOption);
+    if (selectedOption && (this.iconPosition !== 'none' || this.iconOnly) && this.selectPrefix) {
+      if (this.iconPosition === 'none' && this.iconOnly) {
+        this.iconPosition = 'start';
+      }
       const slot = this.iconPosition === 'start'
         ? selectedOption.querySelector('[slot="prefix"]')
         : selectedOption.querySelector('[slot="suffix"]');
-
       if (slot) {
         this.selectPrefix.innerHTML = '';
         this.selectPrefix.appendChild(slot.cloneNode(true));
       } else {
         this.selectPrefix.innerHTML = '';
       }
-    } else {
+    } else if (this.selectPrefix) {
       this.selectPrefix.innerHTML = '';
     }
   }
+
+  private getPlaceholder(localProvider: LocalDataProvider<any>) {
+    if (this.value) {
+      return '';
+    }
+
+    return `Choose a ${localProvider.getName}`
+  }
 }

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

@@ -19,7 +19,7 @@ import ZnHoverContainer from "../hover-container";
 import ZnMenu from "../menu";
 import ZnMenuItem from "../menu-item";
 import ZnSkeleton from "../skeleton";
-
+import ZnStyle from "../style";
 import type ZnDataSelect from "../data-select";
 import type ZnInput from "../input";
 import type ZnQueryBuilder from "../query-builder";
@@ -148,6 +148,7 @@ export default class ZnDataTable extends ZincElement {
     'zn-button-group': ZnButtonGroup,
     'zn-confirm': ZnConfirm,
     'zn-skeleton': ZnSkeleton,
+    'zn-style': ZnStyle,
   };
 
   @property({attribute: 'data-uri'}) dataUri: string;
@@ -183,7 +184,7 @@ export default class ZnDataTable extends ZincElement {
   @property({attribute: "empty-state-icon"}) emptyStateIcon: string = "data_alert";
 
   // Hide the checkbox column
-  @property({attribute: 'hide-checkboxes', type: Boolean}) hideCheckboxes: boolean;
+  @property({attribute: 'hide-checkboxes', type: Boolean}) hideCheckboxes: boolean = true;
 
   @property() filters: [] = [];
 
@@ -277,8 +278,6 @@ export default class ZnDataTable extends ZincElement {
 
   requestParams: Record<string, any> = {};
 
-  builtinRequestParams: Record<string, any> = {};
-
   refresh() {
     // Allow manual refresh to trigger the first data load when no-initial-load is set
     this._initialLoad = false;
@@ -330,12 +329,15 @@ export default class ZnDataTable extends ZincElement {
       || this.hasSlotController.test(ActionSlots.create.valueOf())
       || this.hasSlotController.test(ActionSlots.sort.valueOf())
       || this.hasSlotController.test(ActionSlots.filter.valueOf())
-      || this.hasSlotController.test(ActionSlots.filter_top.valueOf())
-      || this.hasSlotController.test(ActionSlots.inputs.valueOf());
+      || this.hasSlotController.test(ActionSlots.filter_top.valueOf());
+
+    const hasInputs = this.hasSlotController.test(ActionSlots.inputs.valueOf());
 
     // Headers do not need to be re-rendered with new data
     return html`
       <div class="table-container" ${ref((el) => (this.tableContainer = el))}>
+        ${hasInputs ? html`
+          <slot name="${ActionSlots.inputs.valueOf()}" style="display: none"></slot>` : null}
         ${hasActions ? this.getTableHeader() : html``}
         ${tableBody}
       </div>
@@ -420,7 +422,6 @@ export default class ZnDataTable extends ZincElement {
           'table': true,
           'table--standalone': this.standalone,
           'with-hover': !this.unsortable,
-          'table-with--checkboxes': !this.hideCheckboxes,
         })}">
           <thead>
           <tr>
@@ -435,11 +436,7 @@ export default class ZnDataTable extends ZincElement {
           </thead>
           <tbody>
           ${this._rows.map((row: Row) => html`
-            <tr>
-              ${this.hideCheckboxes ? html`` : html`
-                <td class="${classMap({'hidden': !hasSelectedRows})}">
-                  <div><input type="checkbox" @change="${this.selectRow}"></div>
-                </td>`}
+            <tr class="${classMap({'table__row--selected': this.isRowSelected(row)})}">
               ${row.cells.map((value: Cell, index: number) => this.renderCellBody(index, value))}
               ${this.rowHasActions ? this.renderActions(row) : null}
             </tr>`)}
@@ -454,7 +451,6 @@ export default class ZnDataTable extends ZincElement {
   getTableHeader() {
     return html`
       <slot name="${ActionSlots.filter_top.valueOf()}"></slot>
-      <slot name="${ActionSlots.inputs.valueOf()}" style="display: none"></slot>
       <div class="table__header">
         <div class="table__header__actions">
           ${this.getActions()}
@@ -487,7 +483,7 @@ export default class ZnDataTable extends ZincElement {
   }
 
   getRowsSelected() {
-    if (this.hideCheckboxes || this.selectedRows.length <= 0) return null;
+    if (this.selectedRows.length <= 0) return null;
 
     return html`
       <p>${this.numberOfRowsSelected} of ${this._rows.length} rows selected</p>`
@@ -621,7 +617,7 @@ export default class ZnDataTable extends ZincElement {
     const checked = checkbox.checked;
 
     // go through all the checkboxes and check them
-    for (const row of this.renderRoot.querySelectorAll('tbody input[type="checkbox"]')) {
+    for (const row of this.renderRoot.querySelectorAll('tbody zn-checkbox')) {
       (row as HTMLInputElement).checked = checked;
     }
 
@@ -631,34 +627,40 @@ export default class ZnDataTable extends ZincElement {
     this.requestUpdate();
   }
 
-  selectRow(e: PointerEvent) {
+  selectRow(e: Event) {
     if (!(e.target && (e.target instanceof Element))) {
       return;
     }
 
-    let target: HTMLElement = e.target as HTMLElement;
+    const target: Element | null = e.target;
     // if is a button or a link continue
-    if (target.tagName === 'ZN-BUTTON' || target.tagName === 'A' || target.tagName === 'BUTTON') {
-      return
+    if (target?.tagName === 'ZN-BUTTON' || target?.tagName === 'A' || target?.tagName === 'BUTTON') {
+      return;
     }
 
-    // traverse parent until we reach a tr
-    while (target && target.tagName !== 'TR') {
-      target = target.parentElement as HTMLElement;
+    // Find the parent row
+    let parent: Element | null = target.closest ? target.closest('tr') : target.parentElement;
+    while (parent && parent.tagName !== 'TR') {
+      parent = parent.parentElement;
     }
 
-    if (target === null) {
+    if (parent === null) {
       return;
     }
 
-    const checkbox = target.querySelector('input[type="checkbox"]') as HTMLInputElement;
-    if (checkbox) {
-      checkbox.checked = !checkbox.checked;
-    }
+    const rows = Array.from(this.renderRoot.querySelectorAll('tbody tr'));
+    const index = rows.indexOf(parent as HTMLTableRowElement);
+    if (index === -1) return;
 
-    this.selectedRows = this._rows.filter((_, index) => {
-      return (this.renderRoot.querySelectorAll('tbody input[type="checkbox"]')[index] as HTMLInputElement)?.checked;
-    });
+    const row = this._rows[index] as Row;
+    if (!row) return;
+
+    const alreadySelected = this.selectedRows.some((r: Row) => r.id === row.id);
+    if (alreadySelected) {
+      this.selectedRows = this.selectedRows.filter((r: Row) => r.id !== row.id);
+    } else {
+      this.selectedRows = [...(this.selectedRows as Row[]), row];
+    }
 
     this.numberOfRowsSelected = this.selectedRows.length;
     this.updateKeys();
@@ -669,13 +671,9 @@ export default class ZnDataTable extends ZincElement {
     const button = event.target as ZnButton;
     if (button.disabled) return;
 
-    (this.renderRoot.querySelectorAll('thead input[type="checkbox"]')[0] as HTMLInputElement).checked = false;
-    for (const row of this.renderRoot.querySelectorAll('tbody input[type="checkbox"]')) {
-      (row as HTMLInputElement).checked = false;
-    }
-
     this.selectedRows = [];
     this.numberOfRowsSelected = 0;
+    this.updateKeys();
     this.requestUpdate();
   }
 
@@ -690,12 +688,30 @@ export default class ZnDataTable extends ZincElement {
 
   renderCell(data: Cell) {
     if (data && typeof data === 'object') {
-      let content: TemplateResult = html`${data.text}`;
+      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');
+
+        if (tokens.has('bold') || tokens.has('strong')) {
+          content = html`<strong>${content}</strong>`;
+        }
+
+        if (tokens.has('italic')) {
+          content = html`<em>${content}</em>`;
+        }
+
         content = html`
-          <zn-style ${ifDefined(data.style || nothing)}
-                    color="${ifDefined(data.color || nothing)}">${content}
+          <zn-style
+            font="${isMono ? 'mono' : nothing}"
+            border="${isBorder || nothing}"
+            center="${isCenter || nothing}"
+            color="${ifDefined(data.color)}">${content}
           </zn-style>`;
       }
 
@@ -827,6 +843,10 @@ export default class ZnDataTable extends ZincElement {
       </td>`;
   }
 
+  private isRowSelected(row: Row): boolean {
+    return this.selectedRows.some((r: Row) => r.id === row.id);
+  }
+
   private getRows(data: Response): Row[] {
     const sourceRows = data.rows;