@kubex/zinc 1.0.4 → 1.0.6

package/src/components/collapsible/collapsible.component.ts

@@ -1,10 +1,11 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
-import {property} from 'lit/decorators.js';
+import {property, state} from 'lit/decorators.js';
 import {Store} from "../../internal/storage";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './collapsible.scss';
+import {HasSlotController} from "../../internal/slot";
 
 /**
  * @summary Toggles between showing and hiding content when clicked
@@ -26,6 +27,11 @@ export default class ZnCollapsible extends ZincElement {
 
   @property({reflect: true}) label = '';
 
+  @property({type: Boolean, attribute: 'show-number', reflect: true}) showNumber: boolean = false;
+
+  // what element name to count
+  @property({type: String, attribute: 'count-element'}) countElement: string = '*';
+
   @property({type: Boolean, reflect: true}) expanded: boolean = false;
 
   @property({attribute: 'default'}) defaultState: 'open' | 'closed';
@@ -38,8 +44,14 @@ export default class ZnCollapsible extends ZincElement {
 
   @property({attribute: 'flush', type: Boolean, reflect: true}) flush: boolean = false;
 
+  @state() numberOfItems: number = 0;
+
   protected _store: Store;
 
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'header', 'caption', 'label');
+
+  private observer: MutationObserver;
+
   connectedCallback() {
     super.connectedCallback();
     this._store = new Store(this.localStorage ? window.localStorage : window.sessionStorage, "zncla:", this.storeTtl);
@@ -51,6 +63,22 @@ export default class ZnCollapsible extends ZincElement {
         this.expanded = hasPref === "true";
       }
     }
+
+    if (this.showNumber) {
+      // add a mutation observer to the default slot to recalculate the number of items when it changes
+      const slot = this as HTMLElement;
+      this.observer = new MutationObserver(() => {
+        this.recalculateNumberOfItems();
+      });
+      this.observer.observe(slot, {childList: true, subtree: true});
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.observer) {
+      this.observer.disconnect();
+    }
   }
 
   handleCollapse = (e: MouseEvent) => {
@@ -60,7 +88,23 @@ export default class ZnCollapsible extends ZincElement {
     }
   }
 
+  public recalculateNumberOfItems = () => {
+    const assignedElements = this.hasSlotController.getDefaultSlot()
+      .filter(node => node.nodeType === Node.ELEMENT_NODE) as HTMLElement[];
+
+    // query all direct children that match the countElement tag name
+    if (this.countElement === '*') {
+      this.numberOfItems = assignedElements.length;
+      return;
+    }
+
+    const children = assignedElements.flatMap(el => Array.from(el.querySelectorAll(this.countElement)));
+    this.numberOfItems = children.length;
+  }
+
   render() {
+    this.recalculateNumberOfItems();
+
     return html`
       <div @click="${() => (!this.expanded ? (this.expanded = true) : '')}">
         <slot name="header" class="header" @click="${this.handleCollapse}">
@@ -72,6 +116,8 @@ export default class ZnCollapsible extends ZincElement {
           </div>
           <div class="header__right">
             <slot name="label"><p class="label">${this.label}</p></slot>
+            ${this.showNumber && !this.expanded ? html`
+              <zn-chip size="small" type="primary">${this.numberOfItems}</zn-chip>` : ''}
             <zn-icon library="material-outlined" src="expand_more" class="expand"></zn-icon>
           </div>
         </slot>
@@ -79,7 +125,7 @@ export default class ZnCollapsible extends ZincElement {
           'content': true,
           'content--flush': this.flush,
         })}">
-          <slot></slot>
+          <slot @slotchange="${this.requestUpdate}"></slot>
         </div>
       </div>`;
   }

package/src/components/cols/cols.component.ts

@@ -25,7 +25,6 @@ import styles from './cols.scss';
 export default class ZnCols extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-
   @property({reflect: true, attribute: 'layout'}) layout: string = '';
 
   @property({attribute: 'mc', type: Number, reflect: true}) maxColumns: number = 0;
@@ -35,7 +34,11 @@ export default class ZnCols extends ZincElement {
   @property({type: Boolean}) border: boolean = false;
 
   @property({type: Boolean}) pad: boolean;
+
+  @property({type: Boolean}) divide: boolean = false;
+
   @property({attribute: 'pad-x', type: Boolean}) padX: boolean;
+
   @property({attribute: 'pad-y', type: Boolean}) padY: boolean;
 
   render() {
@@ -47,7 +50,7 @@ export default class ZnCols extends ZincElement {
 
     this.layout = layout.join(',');
 
-    this.maxColumns = Math.min(5, layout.reduce((a, b) => a + b, 0));
+    this.maxColumns = layout.reduce((a, b) => a + b, 0);
 
     const prefix = 'zn-col-';
     this.querySelectorAll(':scope > *').forEach((element: HTMLElement, index) => {
@@ -66,7 +69,8 @@ export default class ZnCols extends ZincElement {
         'cols--pad': this.pad,
         'cols--pad-x': this.padX,
         'cols--pad-y': this.padY,
-        [`cols--layout-${this.layout.replace(',', '')}`]: !!this.layout,
+        'cols--divide': this.divide,
+        [`cols--layout-${this.layout.replaceAll(',', '')}`]: !!this.layout,
         [`cols--mc-${this.maxColumns}`]: !!this.maxColumns,
       })}">
         <slot></slot>

package/src/components/cols/cols.scss

@@ -26,20 +26,10 @@
     }
   }
 
-  &--mc-2 {
-    --col-width: 40%;
-  }
-
-  &--mc-3 {
-    --col-width: 30%;
-  }
-
-  &--mc-4 {
-    --col-width: 23%;
-  }
-
-  &--mc-5 {
-    --col-width: 18%;
+  @for $i from 1 through 12 {
+    &--mc-#{$i} {
+      --col-width: calc(100% / #{$i + 1});
+    }
   }
 
   &--layout-121 {
@@ -54,6 +44,24 @@
     }
   }
 
+  &--divide {
+    ::slotted(*:not(:last-child)) {
+      position: relative;
+
+      &:after {
+        content: "";
+        position: absolute;
+        display: block;
+        width: 1px;
+        top: 0;
+        height: 100%;
+        max-height: 100%;
+        right: calc((var(--zn-spacing-small) / 2) * -1);
+        background-color: rgb(var(--zn-border-color));
+      }
+    }
+  }
+
   &--no-gap {
     gap: 0;
   }

package/src/components/confirm/confirm.component.ts

@@ -1,5 +1,6 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, type PropertyValues, unsafeCSS} from 'lit';
+import {deepQuerySelectorAll} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
 import {property, query} from 'lit/decorators.js';
@@ -7,7 +8,6 @@ import ZincElement from "../../internal/zinc-element";
 import ZnDialog from "../dialog";
 
 import styles from './confirm.scss';
-import {deepQuerySelectorAll} from "../../utilities/query";
 
 /**
  * @summary Short summary of the component's intended use.
@@ -85,7 +85,6 @@ export default class ZnConfirm extends ZincElement {
   connectedCallback() {
     super.connectedCallback();
 
-
     if (this.hasSlotController.test('trigger')) {
       const trigger = this.hasSlotController.getSlot('trigger');
       trigger?.addEventListener('click', this.show);

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

@@ -28,6 +28,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,25 +38,82 @@ export default class ContentBlock extends ZincElement {
 
   private _textRows: TextRow[] = [];
 
+  private _themeChangeObserver?: MutationObserver;
+
   connectedCallback() {
     super.connectedCallback();
     this.iframe.then((iframe) => {
-      if (iframe.contentDocument) {
+      const rebuild = () => {
         const div = this.htmlNodes[0] as HTMLDivElement;
-        if (div) {
-          let convertedHtml = div?.innerHTML ?? '';
-          convertedHtml = convertedHtml.replace(/ /g, ' ');
-          convertedHtml = convertedHtml.replace(/&lt;/g, '<');
-          convertedHtml = convertedHtml.replace(/&gt;/g, '>');
-          convertedHtml = convertedHtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
-
-          const baseStyles = "<style>body,html{padding: 0; margin: 0; font-size: 13px; font-family: Arial;}</style>";
-          iframe.srcdoc = baseStyles + convertedHtml;
-        }
-      }
+        if (!div) return;
+
+        let convertedHtml = div?.innerHTML ?? '';
+        convertedHtml = convertedHtml.replace(/&nbsp;/g, ' ');
+        convertedHtml = convertedHtml.replace(/&lt;/g, '<');
+        convertedHtml = convertedHtml.replace(/&gt;/g, '>');
+        convertedHtml = convertedHtml.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+
+        const themeAttr = document.documentElement.getAttribute('t') || document.body.getAttribute('t') || '';
+
+        // Pull stylesheet links from host to inherit Zinc styles
+        const linkTags = Array.from(document.head.querySelectorAll('link[rel="stylesheet"]'))
+          .map((element: Element) => {
+            const href = (element as HTMLLinkElement).getAttribute('href') || (element as HTMLLinkElement).href || '';
+            return href ? `<link rel="stylesheet" href="${href}">` : '';
+          })
+          .join('');
+
+        const baseStyles = `<style>
+          html, body {
+            background-color: var(--zn-panel-background-color);
+            container-type: size;
+            margin: 0;
+          }
+
+          hr {
+            height: 0;
+            border: none;
+            border-top: 1px solid rgb(var(--zn-border-color));
+          }
+
+          code, kbd, samp, pre, .mono {
+            font-family: var(--zn-font-family-mono),sans-serif;
+            font-size: 1em;
+          }
+
+          small {
+            font-size: 80%;
+          }
+        </style>`;
+
+        const head = `${linkTags}${baseStyles}`;
+        const htmlAttrs = `${themeAttr ? ` t="${themeAttr}"` : ''}`;
+        const baseHref = document.baseURI || window.location.href;
+
+        iframe.srcdoc = `<!doctype html><html${htmlAttrs}><head><base href="${baseHref}" target="_blank">${head}</head><body>${convertedHtml}</body></html>`;
+      };
+
+      rebuild();
+
+      // Observe theme changes on both attribute and theme classes on html and body
+      this._themeChangeObserver = new MutationObserver(() => rebuild());
+      this._themeChangeObserver.observe(document.documentElement, {attributes: true, attributeFilter: ['t', 'class']});
+      this._themeChangeObserver.observe(document.body, {attributes: true, attributeFilter: ['t', 'class']});
+
+      const doc = iframe.contentDocument;
+      if (!doc) return;
+
+      iframe.style.height = (75 + doc.body.scrollHeight) + 'px';
+      iframe.style.width = '100%';
+      iframe.style.border = '0';
     });
   }
 
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._themeChangeObserver?.disconnect();
+  }
+
   private _collapseContent(e: Event) {
     const target = e.target as HTMLElement;
     const headerClick = target.classList.contains('content-block-header') ||
@@ -106,6 +164,7 @@ 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({
@@ -143,10 +202,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>` : ''}
@@ -196,6 +255,7 @@ export default class ContentBlock extends ZincElement {
         if (row.startsWith('Sent from')) type = 'reply';
         if (row.trim() === '' && previousType === 'reply') type = 'reply';
         if (type === 'reply' && row.startsWith('>')) row = row.substring(1).trim();
+        row = this.transformLineForImages(row);
 
         if (previousType === type) {
           if (textRows.length === 0) {
@@ -215,6 +275,36 @@ export default class ContentBlock extends ZincElement {
     return this._textRows;
   }
 
+  private transformLineForImages(line: string): string {
+    let out = line;
+
+    // Replace Markdown image syntax ![alt](url) for http(s)
+    const mdHttpImg = /!\[([^\]]*)\]\((https?:\/\/[^\s)]+?\.(?:png|jpe?g|gif|webp|bmp|svg))\)/gi;
+    out = out.replace(mdHttpImg, (_match, alt, url) => {
+      return `<img src="${url}" alt="${alt || 'image'}" loading="lazy" style="max-width:100%;max-height:500px;">`;
+    });
+
+    // Replace Markdown image syntax with data URI (base64)
+    const mdDataImg = /!\[([^\]]*)\]\((data:image\/[a-zA-Z0-9.+-]+;base64,[A-Za-z0-9+/=]+)\)/gi;
+    out = out.replace(mdDataImg, (_match, alt, url) => {
+      return `<img src="${url}" alt="${alt || 'image'}" loading="lazy" style="max-width:100%;max-height:500px;">`;
+    });
+
+    // Replace bare http(s) image URLs with <img>
+    const httpImg = /(https?:\/\/[^\s]+?\.(?:png|jpe?g|gif|webp|bmp|svg))(?!\S)/gi;
+    out = out.replace(httpImg, (_m, url) => {
+      return `<img src="${url}" alt="image" loading="lazy" style="max-width:100%;max-height:500px;">`;
+    });
+
+    // Replace bare data URI images with <img>
+    const dataImg = /(data:image\/[a-zA-Z0-9.+-]+;base64,[A-Za-z0-9+/=]+)(?!\S)/gi;
+    out = out.replace(dataImg, (_m, url) => {
+      return `<img src="${url}" alt="image" loading="lazy" style="max-width:100%;max-height:500px;">`;
+    });
+
+    return out;
+  }
+
   showReply(e: MouseEvent) {
     const target = e.target as HTMLElement;
     const nextElement = target.nextElementSibling;

package/src/components/content-block/content-block.scss

@@ -1,3 +1,5 @@
+@use "../../wc";
+
 :host {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -45,6 +47,12 @@ zn-panel.content-block--short::part(mid) {
   display: none;
 }
 
+zn-panel.content-block--short zn-header::part(header-description) {
+  @include wc.container-query(null, ph) {
+    display: none;
+  }
+}
+
 zn-panel:not(.content-block--short) zn-header::part(header-description) {
   display: none;
 }

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

@@ -186,7 +186,7 @@ export default class ZnDataSelect extends ZincElement implements ZincFormControl
                  @blur=${this.blur}
                  value="${this.value}"
                  placeholder="Choose a ${localProvider.getName}"
-                 exportparts="combobox,expand-icon,form-control-help-text,form-control-input">
+                 exportparts="combobox,expand-icon,form-control-help-text,form-control-input,display-input">
         ${this.iconPosition !== 'none' ? html`
           <div id="select__prefix" slot="prefix" class="select__prefix"></div>` : ''}
         ${data.map((item: DataProviderOption) => html`