@kubex/zinc 1.0.9 → 1.0.11

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

@@ -76,6 +76,8 @@ export default class ZnMenuItem extends ZincElement {
 
   @property({attribute: 'gaid'}) gaid: string;
 
+  @property({type: Boolean, reflect: true}) confirm = false;
+
   private readonly localize = new LocalizeController(this);
   private readonly hasSlotController = new HasSlotController(this, 'submenu');
   private submenuController: SubmenuController = new SubmenuController(this, this.hasSlotController, this.localize);
@@ -118,6 +120,8 @@ export default class ZnMenuItem extends ZincElement {
     if (!this.isSubmenu()) {
       const composedPath = event.composedPath();
       const closestMenu: Element | null = composedPath.find((el: Element) => el?.getAttribute?.('role') === 'menu') as Element;
+      if (this.confirm) return;
+
       (closestMenu?.closest('zn-dropdown') as ZnDropdown | null)?.hide();
       this.emit('zn-menu-select', {detail: {value: this.value, element: this}});
     }

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

@@ -38,49 +38,26 @@ export default class ZnNote extends ZincElement {
   // 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;
+    if (!container || this.collapseAtLines <= 0) {
       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();
   }
 
@@ -110,7 +87,7 @@ export default class ZnNote extends ZincElement {
         })}" style="--note-collapse-lines: ${this.collapseAtLines}">
           <slot class="note__body"></slot>
         </div>
-        ${this.collapseAtLines > 0 && this._isOverflowing ? html`
+        ${this.collapseAtLines > 0 ? html`
           <div class="note__toggle">
             <zn-button color="transparent"
                        size="content"

package/src/components/note/note.scss

@@ -51,13 +51,6 @@ $colors: (
     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);
   }

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

@@ -2,13 +2,16 @@
 
 
 .table {
-  display: table;
+  display: flex;
+  flex-direction: column;
   width: 100%;
 }
 
 
 .header {
-  display: table-header-group;
+  display: flex;
+  align-items: center;
+  width: 100%;
 }
 
 .header-item, .row-item {
@@ -32,11 +35,17 @@
   }
 
   @include wc.container-query(md) {
-    display: table-cell;
+    flex: 1;
     border-bottom: 1px solid rgb(var(--zn-border-color));
 
     &:first-child {
-      width: 50%;
+      width: 35%;
+      flex-basis: 35%;
+      align-items: flex-start;
+
+      &.row-caption {
+        text-align: left;
+      }
     }
 
     &:last-child {
@@ -66,6 +75,7 @@
   font-size: 14px;
   font-weight: 600;
   color: rgb(var(--zn-text-heading));
+  white-space: nowrap;
 }
 
 .row-caption .content {
@@ -78,10 +88,8 @@
 
 .rows {
   width: 100%;
-
-  @include wc.container-query(md) {
-    display: table-row-group;
-  }
+  display: flex;
+  flex-direction: column;
 }
 
 .row {
@@ -91,7 +99,6 @@
   width: 100%;
 
   @include wc.container-query(md) {
-    display: table-row;
     border-bottom: none;
   }
 }
@@ -111,7 +118,6 @@
   width: 100%;
 
   @include wc.container-query(md) {
-    display: table-row;
     border-bottom: none;
   }
 }

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

@@ -38,6 +38,7 @@ export default class ZnPanel extends ZincElement {
   @property({attribute: 'flush-y', type: Boolean}) flushY: boolean;
   @property({attribute: 'flush-footer', type: Boolean}) flushFooter: boolean;
   @property({type: Boolean}) transparent: boolean;
+  @property({type: Boolean}) shadow: boolean;
 
   protected firstUpdated(_changedProperties: PropertyValues) {
     super.firstUpdated(_changedProperties);
@@ -79,7 +80,7 @@ export default class ZnPanel extends ZincElement {
     const hasHeader = this.caption || hasActionSlot;
 
     return html`
-      <div part="base" class="${classMap({
+      <div class="${classMap({
         panel: true,
         'panel--flush': this.flush || this.tabbed,
         'panel--flush-x': this.flushX,
@@ -90,7 +91,8 @@ export default class ZnPanel extends ZincElement {
         'panel--has-actions': hasActionSlot,
         'panel--has-footer': hasFooterSlot,
         'panel--has-header': hasHeader,
-        'panel--cosmic': this.cosmic
+        'panel--cosmic': this.cosmic,
+        'panel--shadow': this.shadow
       })}">
 
         <div class="panel__inner">

package/src/components/panel/panel.scss

@@ -140,4 +140,8 @@
   &--cosmic {
     @include wc.cosmic-border();
   }
+
+  &--shadow {
+    box-shadow: 0 6px 20px 10px rgba(0, 0, 0, 0.25);
+  }
 }

package/src/components/popup/popup.component.ts

@@ -1,22 +1,11 @@
-import {
-  arrow,
-  autoUpdate,
-  computePosition,
-  flip,
-  offset,
-  platform,
-  shift,
-  size
-} from '@floating-ui/dom';
+import {arrow, autoUpdate, computePosition, flip, offset, platform, shift, size} from '@floating-ui/dom';
 import {classMap} from 'lit/directives/class-map.js';
 import {html, unsafeCSS} from 'lit';
 import {offsetParent} from 'composed-offset-position';
 import {property, query} from 'lit/decorators.js';
 import ZincElement from '../../internal/zinc-element';
 import type {CSSResultGroup} from 'lit';
-import type {
-  MiddlewareData
-} from '@floating-ui/dom';
+import type {MiddlewareData} from '@floating-ui/dom';
 
 import styles from './popup.scss';
 
@@ -210,7 +199,9 @@ export default class ZnPopup extends ZincElement {
 
     // Start the positioner after the first update
     await this.updateComplete;
-    this.start();
+    if (this.active) {
+      this.start();
+    }
   }
 
   disconnectedCallback() {
@@ -260,7 +251,7 @@ export default class ZnPopup extends ZincElement {
     }
 
     // If the anchor is valid, start it up
-    if (this.anchorEl) {
+    if (this.anchorEl && this.active) {
       this.start();
     }
   }
@@ -270,7 +261,6 @@ export default class ZnPopup extends ZincElement {
     if (!this.anchorEl) {
       return;
     }
-
     this.cleanup = autoUpdate(this.anchorEl, this.popup, () => {
       this.reposition();
     });
@@ -527,26 +517,26 @@ export default class ZnPopup extends ZincElement {
 
   render() {
     return html`
-      <slot class="anchor" name="anchor" @slotchange=${this.handleAnchorChange}></slot>
+      <slot class="anchor" name="anchor" @slotchange="${this.handleAnchorChange}"></slot>
 
       <span
         part="hover-bridge"
-        class=${classMap({
+        class="${classMap({
           'popup-hover-bridge': true,
           'popup-hover-bridge--visible': this.hoverBridge && this.active
-        })}
+        })}"
       ></span>
 
       <div
         id="popup"
         part="popup"
         popover
-        class=${classMap({
+        class="${classMap({
           popup: true,
           'popup--active': this.active,
           'popup--fixed': this.strategy === 'fixed',
           'popup--has-arrow': this.arrow
-        })}
+        })}"
       >
         <slot></slot>
         ${this.arrow ? html`

package/src/components/settings-container/settings-container.component.ts

@@ -202,25 +202,31 @@ export default class ZnSettingsContainer extends ZincElement {
         </div>
         <zn-dropdown placement="${placement}" class="${classMap({
           'setting-container__dropdown': true,
-          'setting-container__dropdown--top-end': this.position === 'top-end',
-          'setting-container__dropdown--top-start': this.position === 'top-start',
-          'setting-container__dropdown--bottom-end': this.position === 'bottom-end',
-          'setting-container__dropdown--bottom-start': this.position === 'bottom-start',
+          [`setting-container__dropdown--${this.position}`]: true,
         })}">
           <zn-icon class="setting-container__toggle-button" slot="trigger" size="24" src="settings" round></zn-icon>
-          <div class="settings-container__dropdown-content">
-            <slot name="filter" style="display: none;" @slotchange="${this.handleFiltersSlotChange}"></slot>
-            ${this.filters.map(filter => html`
-              <zn-checkbox class="settings-container__dropdown-item"
-                           data-attribute="${filter.attribute}"
-                           ?checked="${filter.checked}"
-                           @zn-change="${this.updateFilter}">
-                ${filter.label}
-              </zn-checkbox>
-            `)}
-          </div>
+          ${this.getDropdownContent()}
         </zn-dropdown>
       </div>
     `;
   }
+
+  private getDropdownContent() {
+    const hasDropdownContent = this.querySelector('[slot="dropdown-content"]');
+    if (hasDropdownContent) {
+      return html`
+        <slot name="dropdown-content"></slot>`;
+    }
+    return html`
+      <div class="settings-container__dropdown-content">
+        <slot name="filter" style="display: none;" @slotchange="${this.handleFiltersSlotChange}"></slot>
+        ${this.filters.map(filter => html`
+          <zn-checkbox class="settings-container__dropdown-item"
+                       data-attribute="${filter.attribute}"
+                       .checked=${filter.checked}
+                       @zn-change=${this.updateFilter}>
+            ${filter.label}
+          </zn-checkbox>`)}
+      </div>`;
+  }
 }

package/src/components/settings-container/settings-container.scss

@@ -31,7 +31,6 @@
   padding: 4px;
   background: rgba(var(--zn-panel, 0.8));
   box-shadow: var(--zn-shadow-small);
-  transition: bottom 0.2s ease;
   opacity: 0.7;
   transition-duration: 0.3s;
   transition-property: opacity;
@@ -70,13 +69,15 @@
   opacity: 1;
 }
 
+.setting-container__toggle-button::part(icon) {
+  rotate: 0deg;
+  transition: rotate 0.9s ease-in-out, color 0.9s ease-in-out;
+}
+
 .setting-container__dropdown[open] .setting-container__toggle-button::part(icon), .setting-container__toggle-button:hover::part(icon) {
   color: rgb(var(--zn-primary));
   cursor: pointer;
-  transition-duration: 0.9s;
-  transition-property: rotate, color;
   rotate: 380deg;
-  transition-timing-function: ease-in-out;
 }
 
 zn-button {

package/src/components/tooltip/tooltip.component.ts

@@ -191,14 +191,14 @@ export default class ZnTooltip extends ZincElement {
       <zn-popup
         part="base"
         exportparts="popup:base__popup,arrow:base__arrow"
-        class=${classMap({
+        class="${classMap({
           tooltip: true,
           'tooltip--open': this.open
-        })}
-        placement=${this.placement}
-        distance=${this.distance}
-        skidding=${this.skidding}
-        strategy=${this.hoist ? 'fixed' : 'absolute'}
+        })}"
+        placement="${this.placement}"
+        distance="${this.distance}"
+        skidding="${this.skidding}"
+        strategy="${this.hoist ? 'fixed' : 'absolute'}"
         flip
         shift
         arrow
@@ -206,7 +206,7 @@ export default class ZnTooltip extends ZincElement {
         <slot slot="anchor"></slot>
         <div part="body" id="tooltip" class="tooltip__body"
              role="tooltip"
-             aria-live=${this.open ? 'polite' : 'off'}
+             aria-live="${this.open ? 'polite' : 'off'}"
              aria-label="tooltip">
           <slot name="content">${this.content}</slot>
         </div>

package/src/zinc.ts

@@ -79,10 +79,16 @@ export {default as Skeleton} from './components/skeleton';
 export {default as Style} from './components/style';
 export {default as ContentBlock} from './components/content-block';
 export {default as FilterWrapper} from './components/filter-wrapper';
-export { default as SettingsContainer } from './components/settings-container';
+export {default as SettingsContainer} from './components/settings-container';
 /* plop:component */
 
+// Base Component
+export * from './internal/zinc-element';
+
 // Utilities
+export * from './utilities/on';
+export * from './utilities/query';
+export * from './utilities/lit-to-html';
 
 // Events
 export * from './events/events';