@kubex/zinc 1.0.6 → 1.0.8

package/src/components/empty-state/empty-state.component.ts

@@ -1,7 +1,8 @@
-import {property} from 'lit/decorators.js';
+import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {HasSlotController} from "../../internal/slot";
+import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
-import {classMap} from "lit/directives/class-map.js";
 
 import styles from './empty-state.scss';
 
@@ -35,6 +36,8 @@ export default class ZnEmptyState extends ZincElement {
 
   @property({type: Boolean}) padded: boolean = false;
 
+  private readonly hasSlotController = new HasSlotController(this, '[default]', 'caption', 'description');
+
   render() {
     return html`
       <div class="${classMap({
@@ -45,16 +48,21 @@ export default class ZnEmptyState extends ZincElement {
         'empty-state--padded': this.padded
       })}">
         <div class="empty-state__wrapper">
-          ${this.icon
-            ? html`<zn-icon src="${this.icon}" size="48" color="${this.type ? this.type : 'primary'}"></zn-icon>`
+          ${this.icon || this.hasSlotController.test('icon')
+            ? html`
+              <zn-icon src="${this.icon}" size="48" color="${this.type ? this.type : 'primary'}"></zn-icon>`
             : ''}
-          ${this.caption
+          ${this.caption || this.hasSlotController.test('caption')
             ? html`
-              <div class="caption">${this.caption}</div>`
+              <div class="caption">
+                <slot name="caption">${this.caption}</slot>
+              </div>`
             : ''}
-          ${this.description
+          ${this.description || this.hasSlotController.test('description')
             ? html`
-              <div class="description">${this.description}</div>`
+              <div class="description">
+                <slot name="description">${this.description}</slot>
+              </div>`
             : ''}
           <slot></slot>
         </div>

package/src/components/expanding-action/expanding-action.component.ts

@@ -231,7 +231,7 @@ export default class ZnExpandingAction extends ZincElement {
         this.color = color;
       }
     } catch {
-      console.log('Unable to fetch context headers');
+      //console.log('Unable to fetch context headers');
     }
   }
 

package/src/components/header/header.component.ts

@@ -39,6 +39,7 @@ export default class ZnHeader extends ZincElement {
   @property({type: Boolean}) transparent: boolean = false;
 
   @property() caption: string;
+  @property() icon: string;
 
   @property() description: string;
 
@@ -136,7 +137,8 @@ export default class ZnHeader extends ZincElement {
 
 
         <div class="content" part="content">
-          ${hasBreadcrumb ? html`<slot name="breadcrumb" class="breadcrumb"></slot>` : null}
+          ${hasBreadcrumb ? html`
+            <slot name="breadcrumb" class="breadcrumb"></slot>` : null}
 
           ${hasPreviousPath ? html`
             <a href="${this.previousPath}" class="caption__back"
@@ -151,7 +153,11 @@ export default class ZnHeader extends ZincElement {
 
           <div class="caption">
             <div part="header-left" class="header__left">
-              <span class="header__caption" part="header-caption">${this.caption}</span>
+              <span class="header__caption" part="header-caption">
+                ${this.icon ? html`
+                  <zn-icon class="header__icon" src="${this.icon}"></zn-icon>` : null}
+                <slot name="caption">${this.caption}</slot>
+                </span>
               ${this.description ? html`
                   <span class="header__description"
                         part="header-description">${this.description}</span>`

package/src/components/header/header.scss

@@ -24,6 +24,10 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
+    display: flex;
+    gap: var(--zn-spacing-x-small);
+    align-items: center;
+    text-wrap: auto;
   }
 
   &--has-breadcrumb {
@@ -195,7 +199,7 @@
       text-decoration: none;
     }
 
-    zn-icon {
+    a zn-icon {
       cursor: pointer;
 
       &:hover {

package/src/components/icon/icon.component.ts

@@ -64,6 +64,7 @@ export default class ZnIcon extends ZincElement {
   @property({reflect: true}) color: IconColor;
 
   @property({type: Boolean}) padded: boolean = false;
+  @property({type: Boolean}) blink: boolean = false;
 
   @property({type: Boolean}) squared: boolean = false;
 
@@ -192,6 +193,7 @@ export default class ZnIcon extends ZincElement {
           'icon--grey': this.color === "grey",
           'icon--avatar': this.library === "avatar",
           'icon--padded': this.padded,
+          'icon--blink': this.blink,
           'icon--squared': this.squared,
         })}" style="${styleMap({
           '--icon-size': this.size + "px",

package/src/components/icon/icon.scss

@@ -119,6 +119,10 @@
     border-radius: 50%;
   }
 
+  &--blink {
+    animation: blink-animation 1.5s steps(5, start) infinite;
+  }
+
   &--avatar {
     background-color: var(--avatar-color, var(--icon-color));
     color: hsl(from var(--avatar-color, var(--icon-color)) h s 95);
@@ -197,3 +201,12 @@
     vertical-align: middle;
   }
 }
+
+@keyframes blink-animation {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

package/src/components/item/item.component.ts

@@ -63,6 +63,12 @@ export default class ZnItem extends ZincElement {
     if (inlineEdit) {
       inlineEdit.setAttribute('size', this.size);
     }
+    this.shadowRoot?.querySelector('.item')?.classList.toggle('item--with-content', this._hasContent());
+  }
+
+  protected _hasContent(): boolean {
+    const slotContent = this.querySelectorAll(":scope > :not([slot])")?.length || 0;
+    return slotContent > 0 || this.innerText.length > 0 || !(this.value === undefined || this.value === null)
   }
 
   render() {
@@ -71,13 +77,15 @@ export default class ZnItem extends ZincElement {
     const headings = html`
       <div class="item__headings">
         <div class="item__caption" part="caption">${this.caption}</div>
-        ${this.description ? html`<div class="item__description">${this.description}</div>` : ''}
+        ${this.description ? html`
+          <div class="item__description">${this.description}</div>` : ''}
       </div>`;
 
     return html`
       <div
-        class=${classMap({
+        class="${classMap({
           'item': true,
+          'item--with-content': this._hasContent(),
           'item--stacked': this.stacked,
           'item--edit-on-hover': this.editOnHover,
           'item--inline': this.inline,
@@ -88,7 +96,7 @@ export default class ZnItem extends ZincElement {
           'item--has-icon': hasIcon,
           'item--no-padding': this.noPadding,
           'item--align-end': this.alignEnd
-        })}
+        })}"
         part="base">
 
         ${this.icon ? html`

package/src/components/item/item.scss

@@ -14,11 +14,11 @@
   gap: var(--zn-spacing-2x-small);
 
   @include wc.container-query(null, md) {
-    --zn-item-label-max-width: 200px;
+    --zn-item-label-max-width: 220px;
   }
 
   @include wc.container-query(null, smp) {
-    --zn-item-label-max-width: 150px;
+    --zn-item-label-max-width: 180px;
   }
 
   @include wc.container-query(null, sm) {
@@ -54,12 +54,15 @@
   &__headings {
     display: flex;
     flex-direction: column;
-    max-width: 40%;
+    flex-shrink: 0;
+  }
+
+  &--with-content &__headings {
+    max-width: 45%;
     @include wc.container-query(null, sm) {
       max-width: unset;
     }
     width: var(--zn-item-label-max-width);
-    flex-shrink: 0;
   }
 
   &__content {

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

@@ -123,6 +123,7 @@ export default class ZnLinkedSelect extends ZincElement implements ZincFormContr
   }
 
   public handleLinkedSelectChange = () => {
+    this.value = "";
     this.requestUpdate();
     this.formControlController.updateValidity();
   };

package/src/components/menu/menu.component.ts

@@ -169,7 +169,6 @@ export default class ZnMenu extends ZincElement {
     // get the parent dropdown and close it
     (closestMenu?.closest('zn-dropdown') as ZnDropdown | null)?.hide();
 
-    console.log('emitting select')
     this.emit('zn-select', {detail: {item}});
   }
 

package/src/components/navbar/navbar.component.ts

@@ -182,7 +182,7 @@ export default class ZnNavbar extends ZincElement {
   }
 
   showMore() {
-    console.log("Showing More")
+    //console.log("Showing More")
   }
 
   render() {

package/src/components/note/note.component.ts

@@ -1,7 +1,7 @@
 import {classMap} from "lit/directives/class-map.js";
 import {type colors} from "../data-select/providers/color-data-provider";
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
-import {property} from "lit/decorators.js";
+import {property, state} from "lit/decorators.js";
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './note.scss';
@@ -32,6 +32,58 @@ export default class ZnNote extends ZincElement {
   @property({reflect: true}) date: string = '';
   @property({type: HTMLElement, reflect: true}) body: string = '';
 
+  // Number of lines at which the note body collapses; 0 disables collapsing
+  @property({type: Number, attribute: 'collapse-at-lines', reflect: true}) collapseAtLines: number = 3;
+
+  // Internal state: whether the body is currently expanded
+  @state() private expanded = false;
+
+  // Internal state: whether the content actually overflows the clamp
+  @state() private _isOverflowing = false;
+
+  private _toggleExpand = () => {
+    this.expanded = !this.expanded;
+    // re-evaluate overflow after toggle (in case of dynamic content)
+    this.updateComplete.then(() => this._measureOverflow());
+  }
+
+  private _measureOverflow() {
+    // Only relevant when collapseAtLines is set and not expanded
+    const container = this.shadowRoot?.querySelector('.note__body-container') as HTMLElement | null;
+    if (!container) {
+      this._isOverflowing = false;
+      return;
+    }
+
+    if (this.collapseAtLines <= 0) {
+      this._isOverflowing = false;
+      return;
+    }
+
+    // Temporarily ensure clamped styles are applied to measure
+    container.style.setProperty('--note-collapse-lines', String(this.collapseAtLines));
+    container.classList.toggle('note__body--clamped', !this.expanded);
+
+    // element starts hidden, cannot measure
+    if (container.clientHeight === 0) {
+      this._isOverflowing = false;
+      return;
+    }
+
+    // Measure overflow
+    this._isOverflowing = container.scrollHeight > container.clientHeight + 1;  // +1 for rounding errors
+  }
+
+  protected firstUpdated() {
+    // Initial measurement of overflow
+    this._measureOverflow();
+  }
+
+  protected updated() {
+    // Re-measure on any update to catch slot/content changes
+    this._measureOverflow();
+  }
+
   protected render(): unknown {
     return html`
       <div class="${classMap({
@@ -52,7 +104,23 @@ export default class ZnNote extends ZincElement {
             <small>${this.date}</small>
           </slot>
         </div>
-        <slot class="note__body"></slot>
+        <div class="${classMap({
+          'note__body-container': true,
+          'note__body--clamped': this.collapseAtLines > 0 && !this.expanded
+        })}" style="--note-collapse-lines: ${this.collapseAtLines}">
+          <slot class="note__body"></slot>
+        </div>
+        ${this.collapseAtLines > 0 && this._isOverflowing ? html`
+          <div class="note__toggle">
+            <zn-button color="transparent"
+                       size="content"
+                       class="note__toggle__btn"
+                       @click="${this._toggleExpand}"
+                       aria-expanded="${String(this.expanded)}">
+              ${this.expanded ? 'Show less' : 'Show more'}
+            </zn-button>
+          </div>
+        ` : ''}
         <slot name="footer" class="note__footer"></slot>
       </div>
     `;

package/src/components/note/note.scss

@@ -42,13 +42,35 @@ $colors: (
     }
   }
 
-  &__body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--zn-spacing-3x-small);
+  &__body-container {
+    position: relative;
     max-width: var(--zn-container-md);
   }
 
+  &__body {
+    display: block;
+  }
+
+  &__body--clamped {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--note-collapse-lines, 0);
+    overflow: hidden;
+  }
+
+  &__toggle {
+    margin-top: var(--zn-spacing-2x-small);
+  }
+
+  &__toggle__btn {
+    background: none;
+    border: none;
+    color: var(--zn-color-primary-500, currentColor);
+    font: inherit;
+    cursor: pointer;
+    padding: 0;
+  }
+
   @each $name, $color in $colors {
     &--#{'' + $name} {
       .note__header__caption {

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

@@ -1,9 +1,28 @@
-import {property} from 'lit/decorators.js';
 import {type CSSResultGroup, html, unsafeCSS} from 'lit';
+import {property} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 
 import styles from './order-table.scss';
 
+interface OrderTableData {
+  headers: string[];
+  items: {
+    caption?: string;
+    summary?: string;
+    data: string[];
+    sub?: {
+      caption?: string;
+      summary?: string;
+      data: string[];
+    }[];
+  }[];
+  tax?: string;
+  discount?: string;
+  total?: string;
+  paid?: string;
+  remaining?: string;
+}
+
 /**
  * @summary Short summary of the component's intended use.
  * @documentation https://zinc.style/components/order-table
@@ -24,35 +43,23 @@ import styles from './order-table.scss';
 export default class ZnOrderTable extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
 
-  @property({type: Object, reflect: true}) data: Object;
+  @property({type: Object, reflect: true}) data: OrderTableData;
 
   private isMobile: boolean = false;
-  private modifiedData: any = null;
-
-  constructor() {
-    super();
-    this.modifiedData = this.data;
-  }
-
+  private modifiedData: OrderTableData;
 
   connectedCallback() {
     this.isMobile = window.innerWidth < 768;
+    this.modifiedData = this.data;
 
-    window.addEventListener('resize', () => {
-      if (window.innerWidth < 768 && !this.isMobile) {
-        this.isMobile = true;
-        this.requestUpdate();
-      } else if (window.innerWidth >= 768 && this.isMobile) {
-        this.isMobile = false;
-        this.requestUpdate();
-      }
-    });
+    window.addEventListener('resize', this.resizeEventHandler);
 
     if (this.data === null || this.data === undefined) {
       if (this.childNodes.length > 0 && this.childNodes[0].nodeType === 3) {
-        const data: any = this.childNodes[0];
+        // @ts-ignore
+        const data: ChildNode & { textContent: string } = this.childNodes[0];
         try {
-          this.data = JSON.parse(data.textContent);
+          this.data = JSON.parse(data?.textContent) as OrderTableData;
         } catch (e) { /* empty */
         }
       }
@@ -61,6 +68,20 @@ export default class ZnOrderTable extends ZincElement {
     super.connectedCallback();
   }
 
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.resizeEventHandler);
+  }
+
+  resizeEventHandler = () => {
+    if (window.innerWidth < 768 && !this.isMobile) {
+      this.isMobile = true;
+      this.requestUpdate();
+    } else if (window.innerWidth >= 768 && this.isMobile) {
+      this.isMobile = false;
+      this.requestUpdate();
+    }
+  }
+
   render() {
     this.modifiedData = this.data;
     if (this.isMobile) {
@@ -107,7 +128,7 @@ export default class ZnOrderTable extends ZincElement {
     const rows = [];
 
 
-    if (data && data['items']) {
+    if (data?.['items']) {
       for (const item of data['items']) {
         const caption = this.getCaption(item);
         const rowData = item['data'];
@@ -136,8 +157,8 @@ export default class ZnOrderTable extends ZincElement {
   }
 
   getCaption(item: any) {
-    const caption = item['caption'];
-    const summary = item['summary'];
+    const caption: string = item['caption'];
+    const summary: string = item['summary'];
 
     return html`
       <div class="row-item row-caption">
@@ -184,7 +205,7 @@ export default class ZnOrderTable extends ZincElement {
 
   getSummary() {
     let tax = html``;
-    if (this.modifiedData && this.modifiedData['tax']) {
+    if (this.modifiedData?.['tax']) {
       tax = html`
         <div class="summary-item">
           <div class="summary-item-title">Tax</div>
@@ -193,7 +214,7 @@ export default class ZnOrderTable extends ZincElement {
     }
 
     let discount = html``;
-    if (this.modifiedData && this.modifiedData['discount']) {
+    if (this.modifiedData?.['discount']) {
       discount = html`
         <div class="summary-item">
           <div class="summary-item-title">Discount</div>
@@ -202,7 +223,7 @@ export default class ZnOrderTable extends ZincElement {
     }
 
     let total = html``;
-    if (this.modifiedData && this.modifiedData['total']) {
+    if (this.modifiedData?.['total']) {
       total = html`
         <div class="summary-item">
           <div class="summary-item-title">Grand Total</div>
@@ -212,7 +233,7 @@ export default class ZnOrderTable extends ZincElement {
 
 
     let paid = html``;
-    if (this.modifiedData && this.modifiedData['paid']) {
+    if (this.modifiedData?.['paid']) {
       paid = html`
         <div class="summary-item">
           <div class="summary-item-title">Amount Paid</div>
@@ -222,7 +243,7 @@ export default class ZnOrderTable extends ZincElement {
 
 
     let remaining = html``;
-    if (this.modifiedData && this.modifiedData['remaining']) {
+    if (this.modifiedData?.['remaining']) {
       remaining = html`
         <div class="summary-item">
           <div class="summary-item-title">Amount Outstanding</div>

package/src/components/panel/panel.component.ts

@@ -28,12 +28,14 @@ export default class ZnPanel extends ZincElement {
 
   @property({attribute: 'basis-px', type: Number}) basis: number;
   @property() caption: string;
+  @property() icon: string;
   @property() description: string;
   @property({type: Boolean}) tabbed: boolean;
   @property({type: Boolean}) cosmic: boolean;
   @property({type: Boolean}) flush: boolean;
   @property({attribute: 'flush-x', type: Boolean}) flushX: boolean;
   @property({attribute: 'flush-y', type: Boolean}) flushY: boolean;
+  @property({attribute: 'flush-footer', type: Boolean}) flushFooter: boolean;
   @property({type: Boolean}) transparent: boolean;
 
   protected firstUpdated(_changedProperties: PropertyValues) {
@@ -81,6 +83,7 @@ export default class ZnPanel extends ZincElement {
         'panel--flush': this.flush || this.tabbed,
         'panel--flush-x': this.flushX,
         'panel--flush-y': this.flushY,
+        'panel--flush-footer': this.flushFooter,
         'panel--tabbed': this.tabbed,
         'panel--transparent': this.transparent,
         'panel--has-actions': hasActionSlot,
@@ -92,8 +95,9 @@ export default class ZnPanel extends ZincElement {
         <div class="panel__inner">
           ${hasHeader ? html`
             <zn-header class="panel__header"
+                       icon="${this.icon}"
                        caption="${this.caption}"
-                       description=${ifDefined(this.description)}
+                       description="${ifDefined(this.description)}"
                        transparent>
               ${hasActionSlot ? html`
                 <slot name="actions" slot="actions" class="panel__header__actions"></slot>` : null}

package/src/components/panel/panel.scss

@@ -120,6 +120,12 @@
     }
   }
 
+  &--flush-footer {
+    .panel__footer {
+      padding: 0;
+    }
+  }
+
   &--transparent {
     .panel__header {
       padding-left: 0;

package/src/components/rating/rating.component.ts

@@ -54,7 +54,9 @@ export default class ZnRating extends ZincElement implements ZincFormControl {
 
   @property({type: Boolean}) disabled: boolean = false;
 
-  @property() getSymbol: (value: number) => string = () => '<zn-icon src="warning"></zn-icon>';
+  @property({}) size: 'small' | 'medium' | 'large' = 'medium';
+
+  @property() getSymbol: (value: number) => string = () => '<zn-icon src="star" library="material"></zn-icon>';
 
   /** Gets the validity state object */
   get validity() {
@@ -170,6 +172,9 @@ export default class ZnRating extends ZincElement implements ZincFormControl {
           rating: true,
           'rating--readonly': this.readonly,
           'rating--disabled': this.disabled,
+          'rating--small': this.size === 'small',
+          'rating--medium': this.size === 'medium',
+          'rating--large': this.size === 'large'
         })}"
         role="slider"
         aria-label="${this.label}"
@@ -196,21 +201,18 @@ export default class ZnRating extends ZincElement implements ZincFormControl {
                     'rating__partial-symbol-container': true,
                     'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1
                   })}
-                  role="presentation"
-                >
+                  role="presentation">
                   <div
                     style=${styleMap({
                       clipPath: `inset(0 0 0 ${(displayValue - index) * 100}%)`
-                    })}
-                  >
+                    })}>
                     ${unsafeHTML(this.getSymbol(index + 1))}
                   </div>
                   <div
                     class="rating__partial--filled"
                     style=${styleMap({
                       clipPath: `inset(0 ${100 - (displayValue - index) * 100}% 0 0)`
-                    })}
-                  >
+                    })}>
                     ${unsafeHTML(this.getSymbol(index + 1))}
                   </div>
                 </span>
@@ -223,8 +225,7 @@ export default class ZnRating extends ZincElement implements ZincFormControl {
                   'rating__symbol--hover': this.isHovering && Math.ceil(displayValue) === index + 1,
                   'rating__symbol--active': displayValue >= index + 1
                 })}
-                role="presentation"
-              >
+                role="presentation">
                 ${unsafeHTML(this.getSymbol(index + 1))}
               </span>`;
           })}

package/src/components/rating/rating.scss

@@ -2,7 +2,7 @@
 
 :host {
   --symbol-color: rgb(var(--zn-border-color));
-  --symbol-color-active: rgb(var(--zn-primary));
+  --symbol-color-active: var(--zn-color-amber-400);
   --symbol-size: 1.2rem;
   --symbol-spacing: 4px;
 
@@ -79,4 +79,18 @@
   &--disabled .rating__symbols {
     cursor: not-allowed;
   }
+
+  &--small {
+    --symbol-size: 1rem;
+    --symbol-spacing: 2px;
+  }
+
+  &--medium {
+    --symbol-size: 1.2rem;
+  }
+
+  &--large {
+    --symbol-size: 1.5rem;
+    --symbol-spacing: 6px;
+  }
 }