@kubex/zinc 1.0.5 → 1.0.7

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

@@ -21,7 +21,6 @@ table {
   &.table--standalone {
     background-color: rgb(var(--zn-panel));
     border-radius: var(--zn-border-radius-large);
-    box-shadow: var(--zn-shadow-medium);
     border: 1px solid rgb(var(--zn-border-color));
     overflow: hidden;
   }
@@ -35,7 +34,7 @@ table {
     border-bottom: 1px solid rgb(var(--zn-border-color)) !important;
   }
 
-  .table--with-checkboxes tbody tr:hover {
+  &.with-hover tbody tr:hover {
     background-color: rgba(var(--zn-primary), 0.05) !important;
     cursor: pointer;
   }
@@ -115,10 +114,10 @@ table {
       }
     }
 
-    &:first-of-type > div:has(input[type="checkbox"]) {
+    &:first-of-type > div:has(zn-checkbox) {
       justify-content: center;
 
-      input[type="checkbox"] {
+      zn-checkbox {
         margin: 0;
       }
     }
@@ -240,7 +239,7 @@ table {
     flex-direction: row;
     justify-content: space-between;
     align-items: baseline;
-    padding: var(--zn-spacing-small);
+    padding-block: var(--zn-spacing-small);
     gap: var(--zn-spacing-small);
 
     &__actions,
@@ -306,9 +305,7 @@ table {
         }
       }
     }
-
   }
-
 }
 
 .reduced-opacity .table tbody {
@@ -333,3 +330,73 @@ table {
   filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
   background-color: rgb(var(--zn-panel, 255, 255, 255));
 }
+
+/* Table Select Styles */
+table tbody tr.table__row--selected {
+  background-color: var(--zn-color-purple-100);
+
+  &:nth-of-type(even) {
+    background-color: hsla(from var(--zn-color-purple-200) h s l / 0.8);
+  }
+
+  &:hover {
+    background-color: var(--zn-color-purple-200) !important;
+  }
+
+  td {
+    border-top: 1px solid var(--zn-color-purple-600) !important;
+    border-bottom: 1px solid var(--zn-color-purple-600) !important;
+  }
+
+  td:first-of-type {
+    border-left: 1px solid var(--zn-color-purple-600);
+  }
+
+  td:last-of-type {
+    border-right: 1px solid var(--zn-color-purple-600);
+  }
+
+  &:last-of-type td:first-of-type {
+    border-bottom-left-radius: var(--zn-border-radius-large);
+  }
+
+  &:last-of-type td:last-of-type {
+    border-bottom-right-radius: var(--zn-border-radius-large);
+  }
+
+  & + tr td {
+    border-top: 0 !important;
+  }
+
+  & + tr.table__row--selected td {
+    &:first-of-type {
+      border-top-left-radius: 0;
+    }
+
+    &:last-of-type {
+      border-top-right-radius: 0;
+    }
+  }
+
+  &:has(+ tr.table__row--selected) td {
+    border-bottom: 0 !important;
+  }
+
+  &:first-of-type td {
+    border-top: 0 !important;
+  }
+
+  &:has(+ tr.table__row--selected) {
+    td:first-of-type {
+      border-bottom-left-radius: 0;
+    }
+
+    td:last-of-type {
+      border-bottom-right-radius: 0;
+    }
+  }
+}
+
+table:has(tbody tr:first-of-type.table__row--selected) thead tr th {
+  border-bottom-color: var(--zn-color-purple-600) !important;
+}

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

@@ -106,7 +106,7 @@ export default class ZnDataTableFilter extends ZincElement implements ZincFormCo
     return html`
       <zn-button id="slideout-trigger" color="transparent" size="x-small" icon="filter_alt" icon-size="22"
                  slot="trigger"
-                 tooltip="Open Filter">Filter
+                 tooltip="Filter">
       </zn-button>
       <zn-slideout class="slideout-basic" trigger="slideout-trigger" label="Filters">
 

package/src/components/editor/modules/attachment/attachment.ts

@@ -2,7 +2,7 @@ import type Quill from 'quill';
 import type Toolbar from "../toolbar/toolbar";
 
 interface AttachmentOptions {
-  upload: (file: File) => Promise<{ path: any, url: any, filename: any }>;
+  upload: (file: File) => Promise<{ path: any; url: any; filename: any }>;
   onFileUploaded?: (node: HTMLElement, {url}: { url: string }) => void;
   attachmentInput?: HTMLInputElement;
 }
@@ -26,6 +26,9 @@ export default class Attachment {
     if (typeof (this._options.upload) !== "function") {
       console.warn("[Quill Attachment Module] No upload function provided");
     }
+    if (typeof (this._options.onFileUploaded) !== "function") {
+      console.warn("[Quill Attachment Module] No file uploaded function provided");
+    }
 
     (this._quill
       .getModule('toolbar') as Toolbar)
@@ -48,24 +51,34 @@ export default class Attachment {
     }
 
     const file = this._fileHolder.files[0];
-    const attachmentId = generateId();
-    const fileReader = new FileReader();
+    this.addAttachment(file);
+  }
 
-    fileReader.addEventListener('load', () => {
-      const base64Content = fileReader.result as string;
-      this._insertAttachment({dataUrl: base64Content, file, id: attachmentId});
-    }, false);
+  public addAttachment(file: File, dataUrl?: string) {
+    const attachmentId = generateId();
+    const insertWithDataUrl = (base64: string) => {
+      this._insertAttachment({ dataUrl: base64, file, id: attachmentId });
+    };
 
-    if (file) {
+    if (dataUrl) {
+      insertWithDataUrl(dataUrl);
+    } else {
+      const fileReader = new FileReader();
+      fileReader.addEventListener('load', () => {
+        const base64Content = fileReader.result as string;
+        insertWithDataUrl(base64Content);
+      }, false);
       fileReader.readAsDataURL(file);
     }
 
-    this._options.upload(file).then(({path, url}) => {
-      this._uploadAttachment(file, url);
-      this._updateAttachment(attachmentId, url, path);
-    }).catch(err => {
-      console.warn(err.message);
-    });
+    if (typeof this._options.upload === 'function') {
+      this._options.upload(file).then(({ path, url }: { path: string; url: string }) => {
+        this._uploadAttachment(file, url);
+        this._updateAttachment(attachmentId, url, path);
+      }).catch((err: { message: string }) => {
+        console.warn(err.message);
+      });
+    }
   }
 
   private _attachmentContainer = document.createElement('div');
@@ -85,37 +98,36 @@ export default class Attachment {
     this._quill.container.appendChild(attachmentContainer);
   }
 
-  private _insertAttachment({dataUrl, file, id}: { dataUrl: string, file: File, id: string }) {
+  private _insertAttachment({dataUrl, file, id}: { dataUrl: string; file: File; id: string }) {
     this._attachmentContainer.appendChild(this._createAttachment(dataUrl, file, id));
   }
 
   private _updateAttachment(id: string, url: string, filename: string) {
-    const element = this._quill.container.querySelector(`#${id}`) as HTMLAnchorElement;
-    if (element) {
-      element.setAttribute('href', url);
-      let attachmentName = element.querySelector('.attachment-name');
-      if (attachmentName) {
-        if (filename) {
-          attachmentName.textContent = filename;
-        } else {
-          attachmentName.textContent = 'Error uploading file';
-        }
-      }
-
-      if (typeof this._options.onFileUploaded === 'function') {
-        this._options.onFileUploaded(element, {url});
+    const element = this._quill.container.querySelector(`#${id}`);
+    if (!element) return;
+
+    element.setAttribute('href', url);
+    const attachmentName = element.querySelector('.attachment-name');
+    if (attachmentName) {
+      if (filename) {
+        attachmentName.textContent = filename;
+      } else {
+        attachmentName.textContent = 'Error uploading file';
       }
+    }
 
+    if (this._options.onFileUploaded) {
+      this._options.onFileUploaded(element as HTMLElement, {url});
+    }
 
-      // add the url to the hidden input
-      const attachments = this._options.attachmentInput;
-      if (attachments && filename) {
-        // value should be an array of attachment names
-        const value = attachments.value;
-        const data = value ? JSON.parse(value) : [];
-        data.push(filename);
-        attachments.value = JSON.stringify(data);
-      }
+    // add the url to the hidden input
+    const attachments = this._options.attachmentInput;
+    if (attachments && filename) {
+      // value should be an array of attachment names
+      const value = attachments.value;
+      const data: string[] = value ? JSON.parse(value) as string[] : [];
+      data.push(filename);
+      attachments.value = JSON.stringify(data);
     }
   }
 
@@ -162,9 +174,9 @@ export default class Attachment {
     if (attachments) {
       // value should be an array of attachment names
       const value = attachments.value;
-      let attachmentName = attachment?.querySelector('.attachment-name');
-      const data = value ? JSON.parse(value) : [];
-      const index = data.indexOf(attachmentName ? attachmentName.textContent : '');
+      const attachmentName = attachment?.querySelector('.attachment-name');
+      const data: string[] = value ? JSON.parse(value) as string[] : [];
+      const index = data.indexOf(attachmentName?.textContent ? attachmentName.textContent : '');
       if (index > -1) {
         data.splice(index, 1);
         attachments.value = JSON.stringify(data);

package/src/components/editor/modules/toolbar/toolbar.ts

@@ -1,6 +1,7 @@
 import './toolbar.component';
 import Quill from "quill";
 import QuillToolbar from "quill/modules/toolbar";
+import type Attachment from "../attachment/attachment";
 import type DialogComponent from "../dialog/dialog.component";
 import type Emoji from "../emoji/emoji";
 import type ToolbarComponent from "./toolbar.component";
@@ -26,6 +27,7 @@ class Toolbar extends QuillToolbar {
     this.addHandler('redo', () => quill.history.redo());
     this.addHandler('undo', () => quill.history.undo());
     this.addHandler('dialog', (value: string) => this._openDialog(value));
+    this.addHandler('image', () => this._addImage());
 
     this._quill = quill;
     this._component = options.container;
@@ -323,6 +325,46 @@ class Toolbar extends QuillToolbar {
     const emoji = this._quill.getModule('emoji') as Emoji;
     emoji?.initPicker();
   }
+
+  private _addImage() {
+    const input = document.createElement('input')
+    input.setAttribute('type', 'file')
+    input.setAttribute('accept', 'image/*')
+    input.click()
+
+    input.onchange = () => {
+      const file = input.files?.[0];
+      if (!file?.type || !file.type.startsWith('image/')) return;
+
+      const reader = new window.FileReader();
+      reader.onload = () => {
+        const dataUrl = reader.result as string;
+        const selection = this._quill.getSelection(true);
+        const index = selection ? selection.index + selection.length : this._quill.getLength();
+
+        this._quill.insertEmbed(index, 'image', dataUrl, Quill.sources.USER);
+
+        const root = this._quill.root as HTMLElement;
+        const images = Array.from(root.querySelectorAll('img')) as HTMLImageElement[];
+        const inserted = images.reverse().find(img => img.getAttribute('src') === dataUrl) || null;
+        if (inserted) {
+          inserted.setAttribute('alt', file.name.replace(/\.[^/.]+$/, ''));
+          inserted.setAttribute('title', file.name);
+        }
+
+        this._quill.setSelection(index + 1, 0, Quill.sources.USER);
+        this._syncToolbarState();
+
+        try {
+          const attachmentModule = this._quill.getModule('attachment') as Attachment | undefined;
+          attachmentModule?.addAttachment(file, dataUrl);
+        } catch (err) {
+          console.warn('[Toolbar] Failed to process image with attachment handler', err);
+        }
+      };
+      reader.readAsDataURL(file);
+    }
+  }
 }
 
 export default Toolbar;

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/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/inline-edit/inline-edit.component.ts

@@ -105,6 +105,8 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     document.addEventListener('keydown', this.escKeyHandler);
     document.addEventListener('keydown', this.submitKeyHandler);
     document.addEventListener('click', this.mouseEventHandler);
+    this.addEventListener('mousedown', this.captureMouseDown, {capture: true});
+    this.addEventListener('keydown', this.captureKeyDown, {capture: true});
   }
 
   disconnectedCallback() {
@@ -112,6 +114,8 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     document.removeEventListener('keydown', this.escKeyHandler);
     document.removeEventListener('keydown', this.submitKeyHandler);
     document.removeEventListener('click', this.mouseEventHandler);
+    this.removeEventListener('mousedown', this.captureMouseDown, true);
+    this.removeEventListener('keydown', this.captureKeyDown, true);
   }
 
   async firstUpdated() {
@@ -157,6 +161,19 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
     }
   }
 
+  captureMouseDown = (e: MouseEvent) => {
+    if (this.disabled && !this.isEditing) {
+      e.stopPropagation();
+    }
+  }
+
+  captureKeyDown = (e: KeyboardEvent) => {
+    if (this.disabled && !this.isEditing) {
+      e.stopPropagation();
+      e.preventDefault();
+    }
+  }
+
   handleEditClick = (e: MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -183,6 +200,9 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
   };
 
   handleInput = (e: Event) => {
+    if (this.disabled || !this.isEditing) {
+      return;
+    }
     this.value = (e.target as (HTMLInputElement | HTMLSelectElement)).value;
   };
 
@@ -224,7 +244,7 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
         'ai--padded': this.padded,
       })}">
 
-        <div class="ai__left" @click="${this.handleEditClick}">
+        <div class="ai__left" @click="${this.disabled ? undefined : this.handleEditClick}">
           ${input}
         </div>
 
@@ -232,10 +252,11 @@ export default class ZnInlineEdit extends ZincElement implements ZincFormControl
           ${!this.isEditing ?
             html`
               ${hasEditText ? html`
-                <zn-button @click="${this.handleEditClick}" size="x-small" color="secondary">
+                <zn-button @click="${this.disabled ? undefined : this.handleEditClick}" size="x-small"
+                           color="secondary">
                   ${this.editText}
                 </zn-button>` : html`
-                <zn-button @click="${this.handleEditClick}"
+                <zn-button @click="${this.disabled ? undefined : this.handleEditClick}"
                            class="button--edit"
                            icon="edit"
                            size="x-small"

package/src/components/inline-edit/inline-edit.scss

@@ -133,7 +133,17 @@
     }
   }
 
-  &--disabled {
+  &--disabled:not(.ai--editing) {
+    .ai__input::part(input), .ai__input::part(combobox) {
+      text-decoration: none;
+      caret-color: transparent;
+      border-radius: 0;
+    }
+
+    .ai__input::part(display-input) {
+      cursor: text;
+    }
+
     .ai__right {
       display: none !important;
     }

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

@@ -4,7 +4,7 @@
   display: block;
   container-type: inline-size;
 
-  --zn-item-label-max-width: 300px;
+  --zn-item-label-max-width: 450px;
 }
 
 .item {
@@ -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) {
@@ -29,7 +29,7 @@
   &--has-icon {
     .item__icon {
       position: relative;
-      line-height: 33px;
+      line-height: var(--zn-line-height-loose);
       display: flex;
       justify-content: center;
       margin-right: var(--zn-spacing-small);
@@ -44,8 +44,6 @@
   &__header {
     display: flex;
     align-items: center;
-    max-width: var(--zn-item-label-max-width);
-    width: 100%;
 
     .item__caption {
       width: unset;
@@ -56,16 +54,22 @@
   &__headings {
     display: flex;
     flex-direction: column;
-    max-width: var(--zn-item-label-max-width);
-    width: 100%;
     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);
+  }
+
   &__content {
     width: 100%;
     display: flex;
     justify-content: space-between;
-    line-height: 33px;
+    line-height: var(--zn-line-height-loose);
   }
 
   &__content-inner {
@@ -84,14 +88,9 @@
   &__caption {
     font-weight: 500;
     color: rgb(var(--zn-text-heading));
-    line-height: var(--zn-line-height-normal);
-    max-width: var(--zn-item-label-max-width);
+    line-height: var(--zn-line-height-loose);
     width: 100%;
     flex-shrink: 0;
-
-    @include wc.container-query(null, sm) {
-      line-height: var(--zn-line-height-normal);
-    }
   }
 
   &__description {
@@ -100,9 +99,6 @@
     margin: var(--zn-spacing-2x-small) 0 0;
     font-size: var(--zn-font-size-small);
     color: rgb(var(--zn-text-color));
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 
   &__action-wrapper {
@@ -159,7 +155,6 @@
   }
 
   &--inline {
-
     gap: var(--zn-spacing-small);
 
     .item__header {

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

@@ -34,6 +34,7 @@ export default class ZnPanel extends ZincElement {
   @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 +82,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,

package/src/components/panel/panel.scss

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