@kubex/zinc 1.1.14 → 1.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "description": "A collection of web components for building web applications based off of @shoelace-style/Shoelace",
   "keywords": [
     "web components",

package/src/components/chat-message/chat-message.component.ts

@@ -1,6 +1,6 @@
 import {cleanHTML} from "./clean-message";
 import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
-import {property} from "lit/decorators.js";
+import {property, state} from "lit/decorators.js";
 import {unsafeHTML} from "lit/directives/unsafe-html.js";
 import ZincElement from '../../internal/zinc-element';
 import ZnIcon from "../icon";
@@ -80,6 +80,9 @@ export default class ZnChatMessage extends ZincElement {
   /** Marks the message as initiated by an agent (affects styling and grouping). */
   @property({type: Boolean, reflect: true, attribute: 'agent-initiated'}) agentInitiated = false;
 
+  /** Whether any element is assigned to the `attachments` slot — drives the attachments row visibility. */
+  @state() private hasAttachments = false;
+
   connectedCallback() {
     const isContent = !this.actionType || this.actionType === 'internal';
     const agentInitiated = isContent && this.agentInitiated;
@@ -122,7 +125,12 @@ export default class ZnChatMessage extends ZincElement {
           <div part="bubble" class="message__bubble ${sending ? 'message__bubble--sending' : ''}">
             <div class="message__main">
               <div part="content" class="message__content">${this.renderContent()}</div>
-              <slot name="attachments" part="attachments" class="message__attachments"></slot>
+              <slot
+                name="attachments"
+                part="attachments"
+                class="message__attachments ${this.hasAttachments ? 'message__attachments--visible' : ''}"
+                @slotchange=${this.handleAttachmentsSlotChange}
+              ></slot>
             </div>
             ${sending ? html`
               <div class="message__meta">Sending...</div>` : html`
@@ -136,6 +144,20 @@ export default class ZnChatMessage extends ZincElement {
     `;
   }
 
+  protected firstUpdated() {
+    this.syncHasAttachments();
+    Promise.resolve().then(() => this.syncHasAttachments());
+  }
+
+  private handleAttachmentsSlotChange() {
+    this.syncHasAttachments();
+  }
+
+  private syncHasAttachments() {
+    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="attachments"]');
+    this.hasAttachments = !!slot && slot.assignedElements().length > 0;
+  }
+
   private isSystemMessage() {
     return ZnChatMessage.SYSTEM_ACTION_TYPES.includes(this.actionType);
   }

package/src/components/chat-message/chat-message.scss

@@ -65,15 +65,16 @@
   }
 
   &__attachments {
-    // Always rendered so projection is reliable regardless of when children are
-    // parsed/added, but kept out of flow (no phantom gap below the bubble) until
-    // an attachment actually exists — toggled on via :host(:has(...)) below.
     display: none;
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
     gap: var(--zn-spacing-small);
 
+    &--visible {
+      display: flex;
+    }
+
     ::slotted(zn-chat-message-attachment) {
       min-width: 0;
     }
@@ -168,13 +169,6 @@
   }
 }
 
-// Reveal the attachments row only when an attachment is actually present. Using
-// :has on the host keeps this live and parse-order independent — no reliance on
-// conditional rendering that could miss a child added during parsing.
-:host(:has([slot="attachments"])) .message__attachments {
-  display: flex;
-}
-
 // Bubble tints by message origin / type.
 :host([agent-initiated]) .message__bubble {
   background: var(--message-background, rgba(var(--zn-color-info), 0.1));

package/src/components/chat-message-attachment/chat-message-attachment.component.ts

@@ -35,7 +35,7 @@ export default class ZnChatMessageAttachment extends ZincElement {
   @property() name: string = '';
 
   /** The leading icon name. */
-  @property() icon: string = 'attach_file';
+  @property() icon: string = 'paperclip@lu';
 
   /** Where to open the link. Defaults to a new tab. */
   @property() target: string = '_blank';
@@ -46,13 +46,11 @@ export default class ZnChatMessageAttachment extends ZincElement {
   connectedCallback() {
     super.connectedCallback();
 
-    // This component is only meaningful inside the attachments row of a chat message —
-    // slot it there automatically so consumers don't have to.
-    if (!this.slot) {
-      this.slot = 'attachments';
-    }
-
-    if (!this.closest('zn-chat-message')) {
+    if (this.closest('zn-chat-message')) {
+      if (!this.slot) {
+        this.slot = 'attachments';
+      }
+    } else {
       console.warn('<zn-chat-message-attachment> can only be used inside a <zn-chat-message>.', this);
     }
   }

package/src/components/chat-message-attachment/chat-message-attachment.test.ts

@@ -22,6 +22,17 @@ describe('<zn-chat-message-attachment>', () => {
     expect(attachment?.getAttribute('slot')).to.equal('attachments');
   });
 
+  it('should reveal the attachments row when an attachment is slotted in', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-chat-message message="Test">
+        <zn-chat-message-attachment href="#" name="file.pdf"></zn-chat-message-attachment>
+      </zn-chat-message>`);
+
+    const row = el.shadowRoot!.querySelector('.message__attachments') as HTMLElement;
+    // The row is display:none until something is slotted in; a slotted attachment must reveal it.
+    expect(getComputedStyle(row).display).to.not.equal('none');
+  });
+
   it('should render the name in the link', async () => {
     const el = await fixture<HTMLElement>(html`
       <zn-chat-message>

package/src/components/editor/editor.component.ts

@@ -261,6 +261,13 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
     this.quillElement = quill;
 
+    this.getForm()?.addEventListener('submit', () => {
+      setTimeout(() => {
+        const attachmentModule = this.quillElement.getModule('attachment') as Attachment;
+        attachmentModule?.reset();
+      }, 0);
+    });
+
     // @ts-expect-error getSelection is available it lies.
     const hasShadowRootSelection = !!(document.createElement('div').attachShadow({mode: 'open'}).getSelection);
     // Each browser engine has a different implementation for retrieving the Range
@@ -400,7 +407,10 @@ export default class ZnEditor extends ZincElement implements ZincFormControl {
 
           if (this.interactionType === 'chat') {
             const form = this.closest('form');
-            if (form && this.value && this.value.trim().length > 0 && !empty(this.value)) {
+            const hasText = !!this.value && this.value.trim().length > 0 && !empty(this.value);
+            const attachmentInput = form?.querySelector('input[name="attachments"]') as HTMLInputElement | null;
+            const hasAttachments = !!attachmentInput?.value && attachmentInput.value !== '[]';
+            if (form && (hasText || hasAttachments)) {
               this.emit('zn-submit', {detail: {value: this.value, element: this}});
               form.requestSubmit();
               this.quillElement.setText('');

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

@@ -57,7 +57,7 @@ export default class Attachment {
   public addAttachment(file: File, dataUrl?: string) {
     const attachmentId = generateId();
     const insertWithDataUrl = (base64: string) => {
-      this._insertAttachment({ dataUrl: base64, file, id: attachmentId });
+      this._insertAttachment({dataUrl: base64, file, id: attachmentId});
     };
 
     if (dataUrl) {
@@ -72,8 +72,8 @@ export default class Attachment {
     }
 
     if (typeof this._options.upload === 'function') {
-      this._options.upload(file).then(({ path, url }: { path: string; url: string }) => {
-        this._uploadAttachment(file, url);
+      this._options.upload(file).then(async ({path, url}: { path: string; url: string }) => {
+        await this._uploadAttachment(file, url);
         this._updateAttachment(attachmentId, url, path);
       }).catch((err: { message: string }) => {
         console.warn(err.message);
@@ -163,6 +163,15 @@ export default class Attachment {
     return attachment;
   }
 
+  /** Clear every staged attachment preview and reset the backing form input. */
+  public reset() {
+    this._attachmentContainer.replaceChildren();
+    const attachments = this._options.attachmentInput;
+    if (attachments) {
+      attachments.value = '';
+    }
+  }
+
   private _removeAttachment(id: string) {
     const attachment = this._quill.container.querySelector(`#${id}`);
     if (attachment) {
@@ -184,24 +193,26 @@ export default class Attachment {
     }
   }
 
-  private _uploadAttachment(file: File, url: string) {
-    const xhr = new XMLHttpRequest();
+  private _uploadAttachment(file: File, url: string): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      const xhr = new XMLHttpRequest();
 
-    xhr.open('PUT', url, true);
-    xhr.setRequestHeader('Content-Type', file.type);
+      xhr.open('PUT', url, true);
+      xhr.setRequestHeader('Content-Type', file.type);
 
-    xhr.onload = () => {
-      if (xhr.status >= 200 && xhr.status < 300) {
-        console.log(`[Quill Attachment Module] File uploaded successfully to ${url}`);
-      } else {
-        console.error(`[Quill Attachment Module] Failed to upload file. Status: ${xhr.status}`);
-      }
-    };
+      xhr.onload = () => {
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve();
+        } else {
+          reject(new Error(`[Quill Attachment Module] Failed to upload file. Status: ${xhr.status}`));
+        }
+      };
 
-    xhr.onerror = () => {
-      console.error(`[Quill Attachment Module] Error occurred while uploading file.`);
-    };
+      xhr.onerror = () => {
+        reject(new Error(`[Quill Attachment Module] Error occurred while uploading file.`));
+      };
 
-    xhr.send(file);
+      xhr.send(file);
+    });
   }
 }

package/src/components/input/input.scss

@@ -167,7 +167,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--x-small .input__control {
   height: calc(var(--zn-input-height-x-small) - var(--zn-input-border-width) * 2);
-  padding: 0 var(--zn-input-spacing-small);
+  padding: 0 var(--zn-input-spacing-small) 0 var(--zn-spacing-small);
 }
 
 .input--x-small .input__clear,
@@ -201,7 +201,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--small .input__control {
   height: calc(var(--zn-input-height-small) - var(--zn-input-border-width) * 2);
-  padding: 0 var(--zn-input-spacing-small);
+  padding: 0 var(--zn-input-spacing-small) 0 var(--zn-spacing-small);
 }
 
 .input--small .input__clear,
@@ -235,7 +235,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--medium .input__control {
   height: calc(var(--zn-input-height-medium) - var(--zn-input-border-width) * 2);
-  padding: 0 var(--zn-input-spacing-small);
+  padding: 0 var(--zn-input-spacing-small) 0 var(--zn-spacing-small);
 }
 
 .input--medium .input__clear,
@@ -283,7 +283,7 @@ input[type='text'].input__control[data-color-input] {
 
 .input--large .input__control {
   height: calc(var(--zn-input-height-large) - var(--zn-input-border-width) * 2);
-  padding: 0 var(--zn-input-spacing-medium);
+  padding: 0 var(--zn-input-spacing-medium) 0 var(--zn-spacing-small);
 }
 
 .input--large .input__clear,

package/src/components/select/select.scss

@@ -208,7 +208,7 @@
   font-size: var(--zn-input-font-size-small);
   min-height: var(--zn-input-height-small);
   padding-block: 0;
-  padding-inline: var(--zn-input-spacing-small);
+  padding-inline: var(--zn-spacing-small);
 }
 
 .select--small .select__clear {
@@ -233,7 +233,7 @@
   font-size: var(--zn-input-font-size-medium);
   min-height: var(--zn-input-height-medium);
   padding-block: 0;
-  padding-inline: var(--zn-input-spacing-medium);
+  padding-inline: var(--zn-spacing-small);
 }
 
 .select--has-input-prefix.select--medium .select__combobox {
@@ -262,7 +262,7 @@
   font-size: var(--zn-input-font-size-large);
   min-height: var(--zn-input-height-large);
   padding-block: 0;
-  padding-inline: var(--zn-input-spacing-large);
+  padding-inline: var(--zn-spacing-small);
 }
 
 .select--has-input-prefix.select--large .select__combobox {

package/src/components/toggle/toggle.scss

@@ -9,17 +9,18 @@
 }
 
 .switch__input-wrapper {
+  box-sizing: border-box;
   text-align: left;
   position: relative;
   display: inline-flex;
-  width: 50px;
-  height: 25px;
+  width: 42px;
+  height: 24px;
   flex-shrink: 0;
   cursor: pointer;
-  border-radius: 20px;
+  border-radius: 12px;
   align-items: center;
-  background: rgba(0, 0, 0, 0.15);
-  border-width: 1px !important;
+  background-color: rgba(0, 0, 0, 0.15);
+  border: 0.92px solid transparent;
   margin: var(--zn-toggle-margin);
   transition: color .2s ease-in-out, background-color .4s ease-in-out, border-color .2s ease-in-out;
 }
@@ -29,12 +30,11 @@
 }
 
 :host([checked]) .switch__input-wrapper {
-  background: rgba(var(--zn-primary), 0.8);
+  background-color: rgb(var(--zn-color-primary));
+  border-color: rgb(var(--zn-color-primary));
 
   .switch__control {
-    transform: translateX(calc(100% - 1px)) scale(0.8);
-    background: rgba(255, 255, 255, 1);
-    width: 25px;
+    transform: translate(16px, -50%);
   }
 }
 
@@ -52,19 +52,18 @@
 
 .switch__control {
   pointer-events: none;
-  display: inline-block;
-  width: 100%;
-  height: 25px;
-  border-radius: 100px;
-  background: rgba(255, 255, 255, 0.9);
-  box-shadow: rgb(255, 255, 255) 0 0 0 0, rgba(59, 130, 246, 0.5) 0 0 0 0, rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px;
+  position: absolute;
+  top: 50%;
+  left: 3px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #fff;
+  box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0, rgba(0, 0, 0, 0.1) 0 1px 2px -1px;
 
-  position: relative;
-  top: 0;
-  transform: scale(0.8);
-  transition: transform .3s ease-in-out, background-color .4s ease-in-out, opacity .2s ease-in-out, max-width .2s, width .4s;
+  transform: translateY(-50%);
+  transition: transform .3s ease-in-out, background-color .4s ease-in-out;
   outline: none;
-  max-width: 25px;
 }
 
 .switch__input {
@@ -81,17 +80,17 @@
   width: 35px;
 }
 
+.switch__wrapper--small .switch__control {
+  width: 14px;
+  height: 14px;
+}
+
 :host([checked]) .switch__wrapper--small .switch__input-wrapper {
   .switch__control {
-    transform: translateX(calc(100% - 7px)) scale(0.8);
+    transform: translate(13px, -50%);
   }
 }
 
-.switch__wrapper--small .switch__control {
-  max-width: 20px;
-  height: 20px;
-}
-
 // Support inline label
 .switch__wrapper--inline label {
   align-items: center;