@kubex/zinc 1.0.7 → 1.0.8

package/src/components/button/button.scss

@@ -23,6 +23,7 @@
   border-color: transparent;
   height: 100%;
   display: inline-flex;
+  position: relative;
 
   &.button--info {
     --btn-color: var(--zn-color-info);
@@ -39,6 +40,10 @@
   &.button--success {
     --btn-color: var(--zn-color-success);
   }
+
+  &__label--hidden {
+    visibility: hidden;
+  }
 }
 
 .button.button--muted-notification {
@@ -306,6 +311,116 @@
   }
 }
 
+.button--loading-bg {
+  background-color: #e0e0e0;
+
+  &-transparent {
+    background-color: transparent;
+  }
+}
+
+.button--loading {
+  &-fill {
+    pointer-events: none;
+    position: absolute;
+    z-index: 1;
+    background-color: rgba(var(--btn-color), .85);
+    border-radius: inherit;
+    transition: width 0s;
+    animation: loading-fill-grow var(--loading-duration, 2s) linear forwards;
+    inset: -1px;
+
+    &-transparent {
+      background-color: rgba(var(--zn-primary), 0.1);
+    }
+  }
+
+  &-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  &-text-bottom, &-text-top {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: inherit;
+    font-weight: inherit;
+    user-select: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+
+    .loading-countdown {
+      margin-left: 3px;
+    }
+
+    &-left {
+      justify-content: flex-start;
+      padding-inline-start: 7px;
+    }
+
+    &-right {
+      justify-content: flex-end;
+      padding-inline-end: 7px;
+    }
+  }
+
+  &-text-bottom {
+    z-index: 2;
+    color: rgba(var(--btn-color), .85);
+
+    &-transparent {
+      color: inherit;
+    }
+  }
+
+  &-text-top {
+    z-index: 3;
+    color: inherit;
+    /* Animate the reveal from left to right using a mask */
+    mask-image: linear-gradient(90deg, #000 0%, #000 100%);
+    mask-size: 0 100%;
+    mask-repeat: no-repeat;
+    animation: loading-text-reveal var(--loading-duration, 2s) linear forwards;
+  }
+}
+
+.button--relative-wrapper {
+  position: relative;
+  display: inline-flex;
+  height: 100%;
+  width: 100%;
+}
+
+@keyframes loading-fill-grow {
+  from {
+    width: 0;
+  }
+  to {
+    width: 100%;
+  }
+}
+
+@keyframes loading-text-reveal {
+  from {
+    mask-size: 0 100%;
+  }
+  to {
+    mask-size: 100% 100%;
+  }
+}
+
 :host([vertical-align="center"]) {
   align-self: center;
 }

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

@@ -1,11 +1,11 @@
 import {classMap} from "lit/directives/class-map.js";
 import {deepQuerySelectorAll} from "../../utilities/query";
 import {HasSlotController} from "../../internal/slot";
+import type {PropertyValues} 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';
@@ -29,7 +29,11 @@ export default class ContentBlock extends ZincElement {
   @property() avatar = '';
 
   @property({type: Boolean, reflect: true}) outbound = false;
+
+  @property({type: Boolean, attribute: "no-collapse"}) noCollapse = 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[];
@@ -84,6 +88,9 @@ export default class ContentBlock extends ZincElement {
   }
 
   private _collapseContent(e: Event) {
+    if (this.noCollapse) {
+      return;
+    }
     const target = e.target as HTMLElement;
     const headerClick = target.classList.contains('content-block-header') ||
       target.parentElement?.classList.contains('content-block-header');
@@ -186,20 +193,24 @@ export default class ContentBlock extends ZincElement {
                 flush-footer="${hasFooter || nothing}"
                 class="${classMap({
                   'content-block--outbound': this.outbound,
-                  'content-block--short': this.short
+                  'content-block--short': this.short,
+                  'content-block--collapsible': !this.noCollapse
                 })}">
 
         <zn-header class="content-block-header"
-                   caption="${this.sender}"
                    description="${this.truncateText()}"
                    @click="${this._collapseContent}">
 
-          <zn-icon src="${this.avatar}"
-                   library="avatar"
-                   round></zn-icon>
+          <slot name="icon">
+            <zn-icon src="${this.avatar}"
+                     library="avatar"
+                     round></zn-icon>
+          </slot>
+
+          <slot name="caption" slot="caption">${this.sender}</slot>
 
           <div slot="actions">
-            <small>${this.time}</small>
+            <slot name="actions"><small>${this.time}</small></slot>
             ${showActions ? html`
               <zn-dropdown>
                 <zn-button slot="trigger" icon="more_vert" icon-size="24" color="transparent"

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

@@ -19,8 +19,10 @@ zn-header div[slot='actions'] {
   gap: 10px;
 }
 
-zn-header::part(base) {
-  cursor: pointer;
+.content-block--collapsible {
+  zn-header::part(base) {
+    cursor: pointer;
+  }
 }
 
 zn-header::part(header-left) {

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

@@ -231,7 +231,6 @@ 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];
-    console.log('selectedOption', selectedOption);
     if (selectedOption && (this.iconPosition !== 'none' || this.iconOnly) && this.selectPrefix) {
       if (this.iconPosition === 'none' && this.iconOnly) {
         this.iconPosition = 'start';

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

@@ -2,7 +2,7 @@ import {classMap} from "lit/directives/class-map.js";
 import {type CSSResultGroup, html, nothing, type TemplateResult, unsafeCSS} from 'lit';
 import {HasSlotController} from "../../internal/slot";
 import {ifDefined} from "lit/directives/if-defined.js";
-import {property} from 'lit/decorators.js';
+import {property, query} from 'lit/decorators.js';
 import {ref} from "lit/directives/ref.js";
 import {Task} from "@lit/task";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
@@ -184,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 = true;
+  @property({attribute: 'hide-checkboxes', type: Boolean}) hideCheckboxes: boolean;
 
   @property() filters: [] = [];
 
@@ -192,6 +192,12 @@ export default class ZnDataTable extends ZincElement {
 
   @property({attribute: "no-initial-load", type: Boolean}) noInitialLoad: boolean = false;
 
+  @property({attribute: 'group-by'}) groupBy = '';
+
+  @property() groups = '';
+
+  @query('#select-all-rows') selectAllButton: ZnButton;
+
   // Data Table Properties
   private _initialLoad = true;
   private _lastTableContent: TemplateResult = html``;
@@ -226,6 +232,11 @@ export default class ZnDataTable extends ZincElement {
         return {rows: [], page: 1, perPage: this.itemsPerPage, total: 0};
       }
 
+      if (this.groupBy) {
+        // we want to load all the data possible so we can group and show multiple tables
+        this.itemsPerPage = 1000;
+      }
+
       const requestData: DataRequest = {
         page: this.page,
         perPage: this.itemsPerPage,
@@ -390,13 +401,58 @@ export default class ZnDataTable extends ZincElement {
       return this.emptyState();
     }
 
+    this._rows = this.getRows(data);
+
+    if (this.groupBy) {
+      // we need to group the rows by the group column
+      const groupedRows: Record<string, Row[]> = {};
+
+      // add groups to the current rows
+      const toAdd = this.groups.split(',').map(g => g.trim()).filter(g => g.length > 0);
+      toAdd.forEach((group) => {
+        if (!groupedRows[this.humanize(group)]) {
+          groupedRows[this.humanize(group)] = [];
+        }
+      });
+
+      this._rows.forEach((row: Row) => {
+        const groupCell = row.cells.find((cell: Cell) => cell.column === this.groupBy);
+        const groupValue = groupCell ? groupCell.text : 'Ungrouped';
+        if (!groupedRows[this.humanize(groupValue)] && (!this.groups || groupValue === 'Ungrouped')) {
+          groupedRows[this.humanize(groupValue)] = [];
+        }
+
+        if (groupedRows[this.humanize(groupValue)]) {
+          groupedRows[this.humanize(groupValue)].push(row);
+        }
+      });
+
+      // render a table for each group
+      return html`
+        <zn-sp flush>
+          ${Object.keys(groupedRows).map((groupKey) => html`
+            <div class="table-group">
+              <h3 class="table-group__title">${groupKey === "Ungrouped" ? "" : groupKey}</h3>
+              ${this.renderTableData(groupedRows[groupKey])}
+            </div>`
+          )}
+        </zn-sp>
+      `;
+    }
+
+
+    return this.renderTableData(this._rows);
+  }
+
+  public humanize(str: string) {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+  }
+
+  public renderTableData(data: any) {
     const filteredHeaders = Object.values(this.headers).filter((header) => {
       return !Object.values(this.hiddenColumns).includes(header.key);
     });
 
-    this._rows = this.getRows(data);
-
-    const hasSelectedRows = this.selectedRows.length > 0;
     this.rowHasActions = this._rows.some((row: Row) => row.actions && row.actions.length > 0);
 
     // To make sure the cells are in the same order as the headers, we need to map them cell.col to heading.key
@@ -421,21 +477,17 @@ export default class ZnDataTable extends ZincElement {
         <table class="${classMap({
           'table': true,
           'table--standalone': this.standalone,
-          'with-hover': !this.unsortable,
+          'with-hover': !this.unsortable && !this.hideCheckboxes,
         })}">
           <thead>
           <tr>
-            ${this.hideCheckboxes || !hasSelectedRows ? html`` : html`
-              <th>
-                <div><input type="checkbox" @change="${this.selectAll}"></div>
-              </th>`}
             ${filteredHeaders.map((header: HeaderConfig) => this.renderCellHeader(header))}
             ${this.rowHasActions ? html`
               <th></th>` : html``}
           </tr>
           </thead>
           <tbody>
-          ${this._rows.map((row: Row) => html`
+          ${data.map((row: Row) => html`
             <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}
@@ -552,10 +604,37 @@ export default class ZnDataTable extends ZincElement {
   getActions() {
     const actions = [];
 
+    const hasSlots = this.hasSlotController.test(ActionSlots.delete.valueOf())
+      || this.hasSlotController.test(ActionSlots.modify.valueOf())
+      || this.hasSlotController.test(ActionSlots.create.valueOf());
+
+    if(!hasSlots) {
+      return [];
+    }
+
+    if (!this.hideCheckboxes && this._rows.length > 0) {
+      actions.push(html`
+        <zn-button @click="${this.selectAll}"
+                   id="select-all-rows"
+                   color="transparent"
+                   size="x-small"
+                   icon="indeterminate_check_box"
+                   icon-size="22"
+                   icon-color="primary"
+                   tooltip="Select All"
+                   slot="trigger">
+        </zn-button>`);
+    }
+
     if (this.selectedRows.length > 0) {
       actions.push(html`
-        <zn-button @click="${this.clearSelectedRows}" size="small" outline>
-          Clear Selection
+        <zn-button @click="${this.clearSelectedRows}"
+                   color="transparent"
+                   size="x-small"
+                   icon="disabled_by_default"
+                   icon-size="22"
+                   tooltip="Clear Selection"
+                   slot="trigger">
         </zn-button>`);
 
       if (this.hasSlotController.test(ActionSlots.delete.valueOf())) {
@@ -613,21 +692,25 @@ export default class ZnDataTable extends ZincElement {
   }
 
   selectAll(event: Event) {
-    const checkbox = event.target as HTMLInputElement;
-    const checked = checkbox.checked;
+    const button = event.target as ZnButton;
+    if (button.disabled) return;
 
-    // go through all the checkboxes and check them
-    for (const row of this.renderRoot.querySelectorAll('tbody zn-checkbox')) {
-      (row as HTMLInputElement).checked = checked;
+    if (this.numberOfRowsSelected === this._rows.length) {
+      this.clearSelectedRows(event);
+      return;
     }
 
-    this.selectedRows = checked ? this._rows : [];
+    this.selectedRows = this._rows;
     this.numberOfRowsSelected = this.selectedRows.length;
     this.updateKeys();
     this.requestUpdate();
   }
 
   selectRow(e: Event) {
+    if (this.hideCheckboxes) {
+      return;
+    }
+
     if (!(e.target && (e.target instanceof Element))) {
       return;
     }
@@ -833,7 +916,7 @@ export default class ZnDataTable extends ZincElement {
 
     return html`
       <td
-        @click="${this.selectRow}"
+        @click="${this.hideCheckboxes ? undefined : this.selectRow}"
         class="${classMap({
           'table__cell': true,
           'table__cell--wide': headerKey === this.wideColumn,
@@ -889,10 +972,19 @@ export default class ZnDataTable extends ZincElement {
   }
 
   private updateKeys() {
+    this.updateSelectAll();
     this.updateModifyKeys();
     this.updateDeleteKeys();
   }
 
+  private updateSelectAll() {
+    if (this.numberOfRowsSelected === this._rows.length) {
+      this.selectAllButton.icon = 'check_box';
+    } else {
+      this.selectAllButton.icon = 'indeterminate_check_box';
+    }
+  }
+
   private updateModifyKeys() {
     this.updateActionKeys('modify-action');
   }

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

@@ -364,11 +364,9 @@ table tbody tr.table__row--selected {
     border-bottom-right-radius: var(--zn-border-radius-large);
   }
 
-  & + tr td {
+  & + tr.table__row--selected td {
     border-top: 0 !important;
-  }
 
-  & + tr.table__row--selected td {
     &:first-of-type {
       border-top-left-radius: 0;
     }
@@ -400,3 +398,16 @@ table tbody tr.table__row--selected {
 table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
   border-bottom-color: var(--zn-color-purple-600) !important;
 }
+
+
+.table-group__title {
+  font-weight: var(--zn-font-weight-semibold);
+  font-size: var(--zn-font-size-large);
+  color: rgba(var(--zn-text-panel-title), 100%);
+  line-height: var(--zn-line-height-looser);
+  padding-left: var(--zn-spacing-medium);
+  margin: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

package/src/components/editor/editor.scss

@@ -66,6 +66,7 @@
 
     img {
       max-width: 40%;
+      height: auto;
     }
   }
 

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