@kubex/zinc 1.0.4 → 1.0.5

package/src/components/button-menu/button-menu.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 {property} from 'lit/decorators.js';
 import {watch} from "../../internal/watch";
 import ZincElement from '../../internal/zinc-element';
@@ -40,6 +41,8 @@ export default class ZnButtonMenu extends ZincElement {
 
   @property({}) size: 'content' | 'x-small' | 'small' | 'medium' | 'large' = 'medium';
 
+  @property({type: Number, attribute: 'icon-size', reflect: true}) iconSize: number = 24;
+
   @property({type: Boolean, attribute: 'no-gap'}) public noGap: boolean;
 
   @property({type: Boolean, attribute: 'no-padding'}) public noPadding: boolean;
@@ -174,6 +177,9 @@ export default class ZnButtonMenu extends ZincElement {
         if (!button.button.hasAttribute('color')) {
           button.button.setAttribute('color', button.button.hasAttribute('primary') ? 'primary' : button.button.hasAttribute('secondary') ? 'secondary' : 'transparent');
         }
+        if (button.button.hasAttribute('primary') || button.button.hasAttribute('secondary')) {
+          button.button.setAttribute('text', "");
+        }
         button.button.setAttribute('size', this.size);
       }
     });
@@ -256,8 +262,9 @@ export default class ZnButtonMenu extends ZincElement {
       }
     }
 
-    // check if there are an zn-confirms attached
-    const confirms: NodeListOf<ZnConfirm> = this.querySelectorAll('zn-confirm');
+    // check if there are any zn-confirms attached
+    // @ts-ignore
+    const confirms: NodeListOf<ZnConfirm> = deepQuerySelectorAll('zn-confirm', this, '');
     confirms.forEach(confirm => {
       confirm.updateTriggers(); // update the triggers for the confirm dialog
     })
@@ -272,7 +279,7 @@ export default class ZnButtonMenu extends ZincElement {
       })}>
         <div class="button-menu__container"></div>
         <zn-dropdown placement="bottom-end">
-          <zn-button slot="trigger" icon="more_vert" icon-size="24" color="transparent" size="${this.size}"></zn-button>
+          <zn-button slot="trigger" icon="more_vert" icon-size="${this.iconSize}" color="transparent" size="${this.size}"></zn-button>
           <zn-menu></zn-menu>
         </zn-dropdown>
         <slot></slot>
@@ -331,21 +338,22 @@ export default class ZnButtonMenu extends ZincElement {
   }
 
   public removeAllButtons() {
-    // remove all buttons that have the zn-button-menu__added class
-    const buttons = this.querySelectorAll('.zn-button-menu__added');
-    buttons.forEach((button: ZnButton) => {
-      button.remove();
-    });
+    const buttons = this.shadowRoot?.querySelectorAll('zn-button.zn-button-menu__added');
+    if (buttons) {
+      buttons.forEach((button: ZnButton) => {
+        button.remove();
+      });
+    }
 
-    // remove all zn-menu-item elements
-    const menuItems = this.shadowRoot?.querySelectorAll('zn-menu-item');
-    menuItems?.forEach((menuItem: ZnMenuItem) => {
-      menuItem.remove();
-    });
+    const menuItems = this.shadowRoot?.querySelectorAll('zn-menu-item.zn-button-menu__added');
+    if (menuItems) {
+      menuItems?.forEach((menuItem: ZnMenuItem) => {
+        menuItem.remove();
+      });
+    }
 
-    // reset the original buttons list
-    this._originalButtons = [];
     this._buttons = [];
+    this._originalButtons = this._originalButtons.filter(b => !b.button.classList.contains('zn-button-menu__added'));
 
     // Recalculate the visible buttons
     this.calculateVisibleButtons();

package/src/components/button-menu/button-menu.scss

@@ -3,7 +3,7 @@
 :host {
   display: block;
   max-width: 100%;
-  --menu-gap: var(--zn-spacing-x-small);
+  --menu-gap: var(--zn-spacing-2x-small);
 }
 
 .button-menu--no-gap {
@@ -17,7 +17,7 @@
   padding: var(--zn-spacing-small) 0;
   margin: 0;
 
-  min-width: 35px;
+  min-width: 34px;
   max-width: var(--zn-max-width);
 
   gap: var(--menu-gap);
@@ -31,11 +31,11 @@
     flex-direction: row;
     gap: var(--menu-gap);
     margin: 0;
-    max-width: calc(100% - 35px);
+    max-width: calc(100% - 34px);
   }
 
   zn-button {
-    min-width: 35px;
+    min-width: 34px;
     flex-shrink: 0;
   }
 }

package/src/components/checkbox/checkbox.component.ts

@@ -7,9 +7,9 @@ import {ifDefined} from "lit/directives/if-defined.js";
 import {live} from "lit/directives/live.js";
 import {property, query, state} from 'lit/decorators.js';
 import {watch} from '../../internal/watch';
+import type {ZincFormControl} from '../../internal/zinc-element';
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
-import type {ZincFormControl} from '../../internal/zinc-element';
 
 import styles from './checkbox.scss';
 
@@ -110,6 +110,10 @@ export default class ZnCheckbox extends ZincElement implements ZincFormControl {
     return this.input?.validity;
   }
 
+  get isChecked() {
+    return this.checked;
+  }
+
   /** Gets the validation message */
   get validationMessage() {
     return this.input.validationMessage;

package/src/components/checkbox/checkbox.scss

@@ -57,7 +57,7 @@
   justify-content: center;
   width: var(--toggle-size);
   height: var(--toggle-size);
-  box-shadow: var(--zn-shadow-medium);
+  box-shadow: var(--zn-shadow-x-small);
   border: solid var(--zn-input-border-width) var(--zn-input-border-color);
   border-radius: 2px;
   background-color: var(--zn-input-background-color);

package/src/components/chip/chip.component.ts

@@ -40,9 +40,13 @@ export default class ZnChip extends ZincElement {
   private readonly hasSlotController = new HasSlotController(this, '[default]', 'action');
 
   render() {
+    const hasContent = this.hasSlotController.test('[default]')
     return html`
-      <div class=${classMap({
+      <div class="${classMap({
         'chip': true,
+        'chip--with-content': hasContent,
+        'chip--no-content': !hasContent,
+        'chip--with-icon': this.icon,
         'chip--flush': this.flush,
         'chip--flush-x': this.flushX,
         'chip--flush-y': this.flushY,
@@ -57,10 +61,10 @@ export default class ZnChip extends ZincElement {
         'chip--small': this.size === 'small',
         'chip--medium': this.size === 'medium',
         'chip--large': this.size === 'large',
-      })}>
+      })}">
         ${this.icon ? html`
           <zn-icon src="${this.icon}" size="18"></zn-icon>` : ''}
-        ${this.hasSlotController.test('[default]') ? html`
+        ${hasContent ? html`
           <slot></slot>` : ''}
         ${this.hasSlotController.test('action') ? html`
           <slot name="action" class="chip__action"></slot>` : ''}

package/src/components/chip/chip.scss

@@ -7,7 +7,7 @@
 .chip {
   display: inline-flex;
   border-radius: 7px;
-  padding: var(--zn-spacing-2x-small) var(--zn-spacing-x-small);
+  padding: var(--zn-spacing-3x-small) var(--zn-spacing-x-small);
   text-align: center;
   font-size: 12px;
   gap: 4px;
@@ -99,3 +99,11 @@
   font-size: var(--zn-font-size-large);
   padding: var(--zn-spacing-x-small) var(--zn-spacing-x-large);
 }
+
+.chip--no-content {
+  padding: var(--zn-spacing-3x-small) var(--zn-spacing-2x-small);
+}
+
+.chip--with-icon {
+  padding-left: var(--zn-spacing-2x-small);
+}

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

@@ -49,10 +49,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;}</style>";
+          const baseStyles = "<style>body,html{padding: 0; margin: 0; font-size: 13px; font-family: Arial;}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);
+      });
     });
   }
 

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`