@kubex/zinc 1.1.12 → 1.1.14

package/src/components/channel-tile/channel-tile.scss

@@ -0,0 +1,197 @@
+:host {
+  --channel-tile-color: var(--zn-color-border);
+
+  flex: 1 1 280px;
+  width: 280px;
+  min-width: 180px;
+  max-width: 320px;
+  display: block;
+}
+
+.channel-tile {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  cursor: pointer;
+  border-right: 1px solid rgb(var(--zn-border-color));
+  background-color: rgb(var(--zn-body));
+  transition: background-color 0.15s ease;
+  user-select: none;
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--zn-primary));
+    outline-offset: -2px;
+  }
+}
+
+:host(.active) .channel-tile {
+  background-color: rgb(var(--zn-panel));
+  cursor: default;
+}
+
+:host(:not(.active)) .channel-tile--active:hover {
+  background-color: rgb(var(--zn-panel));
+}
+
+.channel-tile--incoming {
+  background-color: rgba(var(--zn-color-success), 0.15);
+
+  &:hover {
+    background-color: rgba(var(--zn-color-success), 0.22);
+  }
+}
+
+.channel-tile--disabled .channel-tile__body {
+  opacity: 0.6;
+}
+
+.channel-tile__header {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  height: 24px;
+  padding: 0 var(--zn-spacing-small);
+  background-color: rgb(var(--zn-color-tab));
+
+  h3 {
+    margin: 0;
+    font-size: var(--zn-text-h3-font-size);
+    line-height: var(--zn-text-h3-line-height);
+    font-weight: var(--zn-text-h3-font-weight);
+    color: rgb(var(--zn-text-heading));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+}
+
+.channel-tile__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 0;
+  background-color: rgba(var(--zn-color-success), 0.55);
+  transition: width 0.2s linear;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.channel-tile__body {
+  position: relative;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--zn-spacing-small);
+  padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
+  width: 100%;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.channel-tile__content {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  gap: 4px;
+  overflow: hidden;
+
+  @container (max-width: 200px) {
+    display: none;
+  }
+}
+
+.channel-tile__title {
+  margin: 0;
+  font-size: var(--zn-text-heading-section-font-size);
+  line-height: var(--zn-text-heading-section-line-height);
+  font-weight: var(--zn-text-heading-section-font-weight);
+  color: var(--zn-text-heading-section-color);
+  text-transform: var(--zn-text-heading-section-transform);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.channel-tile__subtitle {
+  margin: 0;
+  font-size: var(--zn-text-subheading-small-font-size);
+  line-height: var(--zn-text-subheading-small-line-height);
+  font-weight: var(--zn-text-subheading-small-font-weight);
+  color: var(--zn-text-subheading-small-color);
+  text-transform: var(--zn-text-subheading-small-transform);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.channel-tile__footer {
+  display: flex;
+  align-items: center;
+  align-self: flex-start;
+  gap: var(--zn-spacing-small);
+}
+
+.channel-tile__reject {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background-color: rgb(var(--zn-panel));
+  color: rgb(var(--zn-color-error));
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+
+  &:hover {
+    background-color: rgba(var(--zn-color-error), 0.1);
+  }
+}
+
+.channel-tile__bar {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background-color: rgba(var(--zn-shadow), 0.2);
+  overflow: hidden;
+  z-index: 1;
+
+  &-fill {
+    height: 100%;
+    width: 0;
+    transition: width 0.5s linear, background-color 0.5s ease;
+  }
+}
+
+.channel-tile--primary {
+  --channel-tile-color: var(--zn-color-primary);
+}
+
+.channel-tile--info {
+  --channel-tile-color: var(--zn-color-info);
+}
+
+.channel-tile--success {
+  --channel-tile-color: var(--zn-color-success);
+}
+
+.channel-tile--warning {
+  --channel-tile-color: var(--zn-color-warning);
+}
+
+.channel-tile--error {
+  --channel-tile-color: var(--zn-color-error);
+}
+
+.channel-tile--disabled {
+  --channel-tile-color: var(--zn-color-disabled, 204, 204, 204);
+}

package/src/components/channel-tile/index.ts

@@ -0,0 +1,12 @@
+import ZnChannelTile from './channel-tile.component';
+
+export * from './channel-tile.component';
+export default ZnChannelTile;
+
+ZnChannelTile.define('zn-channel-tile');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-channel-tile': ZnChannelTile;
+  }
+}

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

@@ -23,6 +23,8 @@ export type ChatMessageActionType = '' | 'connected.agent' | 'attachment.added'
  *
  * @slot - The message content. Ignored when the `message` attribute is set.
  * @slot badge - Rendered in the header after the sender and time (e.g. an INTERNAL NOTE chip).
+ * @slot attachments - Attachments displayed beneath the message content. Use `zn-chat-message-attachment`,
+ * which auto-assigns itself to this slot.
  * @slot edit-dialog-trigger - Action rendered at the end of the bubble (e.g. a remove icon button).
  * @slot edit-dialog - Pass-through for an associated dialog element.
  *
@@ -32,9 +34,10 @@ export type ChatMessageActionType = '' | 'connected.agent' | 'attachment.added'
  * @csspart header - The sender/time/badge row.
  * @csspart bubble - The message bubble.
  * @csspart content - The message content within the bubble.
+ * @csspart attachments - The attachments row beneath the message content.
  * @csspart system-card - The card rendered for system action types.
  *
- * @cssproperty --message-background - The bubble's background colour.
+ * @cssproperty --message-background - The bubble's background color.
  */
 export default class ZnChatMessage extends ZincElement {
   static styles: CSSResultGroup = unsafeCSS(styles);
@@ -117,8 +120,12 @@ export default class ZnChatMessage extends ZincElement {
         <div part="body" class="message__body">
           ${sending ? null : this.renderHeader()}
           <div part="bubble" class="message__bubble ${sending ? 'message__bubble--sending' : ''}">
-            <div part="content" class="message__content">${this.renderContent()}</div>
-            ${sending ? html`<div class="message__meta">Sending...</div>` : html`
+            <div class="message__main">
+              <div part="content" class="message__content">${this.renderContent()}</div>
+              <slot name="attachments" part="attachments" class="message__attachments"></slot>
+            </div>
+            ${sending ? html`
+              <div class="message__meta">Sending...</div>` : html`
               <div class="message__actions">
                 <slot name="edit-dialog-trigger"></slot>
               </div>`}
@@ -172,14 +179,16 @@ export default class ZnChatMessage extends ZincElement {
       <div part="header" class="message__header">
         <span class="message__sender">${this.sender || (this.customerInitiated ? 'Customer' : 'You')}</span>
         ${this.time ? html`<span class="message__time">${this.getSentTime()}</span>` : nothing}
-        ${this.actionType === 'internal' ? html`<span class="message__badge">INTERNAL</span>` : nothing}
+        ${this.actionType === 'internal' ? html`
+          <zn-chip type="info">Internal</zn-chip>` : nothing}
         <slot name="badge"></slot>
       </div>`;
   }
 
   private renderContent() {
     if (!this.message) {
-      return html`<slot></slot>`;
+      return html`
+        <slot></slot>`;
     }
 
     let content = cleanHTML(this.message);

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

@@ -2,6 +2,7 @@
 
 :host {
   display: block;
+  padding-inline: calc(var(--zn-gutter, 0) + var(--zn-base-gap, 0));
 }
 
 .message {
@@ -38,18 +39,6 @@
     @include wc.text-style(subheading-small);
   }
 
-  &__badge {
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 0.5px;
-    padding: 2px 6px;
-    border-radius: var(--zn-border-radius);
-    border: 1px solid rgba(var(--zn-color-info), 0.4);
-    color: rgb(var(--zn-color-info));
-    background: rgba(var(--zn-color-info), 0.08);
-    text-transform: uppercase;
-  }
-
   &__bubble {
     box-sizing: border-box;
     display: flex;
@@ -67,6 +56,29 @@
     }
   }
 
+  &__main {
+    flex: 1 1 auto;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--zn-spacing-small);
+  }
+
+  &__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);
+
+    ::slotted(zn-chat-message-attachment) {
+      min-width: 0;
+    }
+  }
+
   &__content {
     @include wc.text-style(chat);
 
@@ -74,6 +86,12 @@
     min-width: 0;
     overflow-wrap: anywhere;
 
+    // Bodies passed through the default slot (e.g. alongside attachments) must
+    // match the chat type scale, not inherit the host's default size.
+    ::slotted(*) {
+      @include wc.text-style(chat);
+    }
+
     p {
       margin: 0;
       padding: 0;
@@ -150,6 +168,13 @@
   }
 }
 
+// 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

@@ -0,0 +1,78 @@
+import {type CSSResultGroup, html, nothing, unsafeCSS} from 'lit';
+import {property} from "lit/decorators.js";
+import ZincElement from '../../internal/zinc-element';
+import ZnIcon from "../icon";
+
+import styles from './chat-message-attachment.scss';
+
+/**
+ * @summary A single file or link attachment for a `zn-chat-message`. Renders an
+ * icon and a label as a link, styled to match the message's attachments row. It is
+ * intended to be used only inside a `zn-chat-message` and is automatically placed in
+ * that component's `attachments` slot.
+ * @documentation https://zinc.style/components/chat-message-attachment
+ * @status experimental
+ * @since 1.0
+ *
+ * @dependency zn-icon
+ *
+ * @slot - The attachment label. Falls back to the `name` attribute when empty.
+ *
+ * @csspart base - The attachment link.
+ * @csspart icon - The leading icon.
+ * @csspart label - The attachment label.
+ */
+export default class ZnChatMessageAttachment extends ZincElement {
+  static styles: CSSResultGroup = unsafeCSS(styles);
+  static dependencies = {
+    'zn-icon': ZnIcon
+  };
+
+  /** The URL the attachment links to. */
+  @property() href: string = '';
+
+  /** The attachment label (e.g. the file name). Used when the default slot is empty. */
+  @property() name: string = '';
+
+  /** The leading icon name. */
+  @property() icon: string = 'attach_file';
+
+  /** Where to open the link. Defaults to a new tab. */
+  @property() target: string = '_blank';
+
+  /** Prompt a download rather than navigating to the link. */
+  @property({type: Boolean}) download = false;
+
+  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')) {
+      console.warn('<zn-chat-message-attachment> can only be used inside a <zn-chat-message>.', this);
+    }
+  }
+
+  protected render() {
+    const newTab = this.target === '_blank';
+
+    return html`
+      <a
+        part="base"
+        class="attachment"
+        href=${this.href || '#'}
+        target=${this.target || nothing}
+        rel=${newTab ? 'noreferrer noopener' : nothing}
+        ?download=${this.download}
+      >
+        ${this.icon ? html`
+          <zn-icon part="icon" class="paperclip@lu" src=${this.icon} size="20"></zn-icon>` : nothing}
+        <span part="label" class="attachment__label"><slot>${this.name}</slot></span>
+      </a>
+    `;
+  }
+}

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

@@ -0,0 +1,32 @@
+@use "../../wc";
+
+:host {
+  display: inline-flex;
+  min-width: 0;
+}
+
+.attachment {
+  @include wc.text-style(paragraph);
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--zn-spacing-2x-small);
+  color: rgb(var(--zn-text));
+  text-decoration: none;
+  min-width: 0;
+
+  &__icon {
+    flex: 0 0 auto;
+  }
+
+  &__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &:hover .attachment__label {
+    text-decoration: underline;
+  }
+}

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

@@ -0,0 +1,36 @@
+import '../../../dist/zn.min.js';
+import { expect, fixture, html } from '@open-wc/testing';
+
+describe('<zn-chat-message-attachment>', () => {
+  it('should render a component', async () => {
+    const el = await fixture(html`
+      <zn-chat-message>
+        <zn-chat-message-attachment href="#" name="file.pdf"></zn-chat-message-attachment>
+      </zn-chat-message>`);
+
+    const attachment = el.querySelector('zn-chat-message-attachment');
+    expect(attachment).to.exist;
+  });
+
+  it('should auto-assign itself to the attachments slot', async () => {
+    const el = await fixture(html`
+      <zn-chat-message>
+        <zn-chat-message-attachment href="#" name="file.pdf"></zn-chat-message-attachment>
+      </zn-chat-message>`);
+
+    const attachment = el.querySelector('zn-chat-message-attachment');
+    expect(attachment?.getAttribute('slot')).to.equal('attachments');
+  });
+
+  it('should render the name in the link', async () => {
+    const el = await fixture<HTMLElement>(html`
+      <zn-chat-message>
+        <zn-chat-message-attachment href="https://example.com/file.pdf" name="file.pdf"></zn-chat-message-attachment>
+      </zn-chat-message>`);
+
+    const attachment = el.querySelector('zn-chat-message-attachment')!;
+    const link = attachment.shadowRoot!.querySelector('a')!;
+    expect(link.getAttribute('href')).to.equal('https://example.com/file.pdf');
+    expect(link.textContent).to.contain('file.pdf');
+  });
+});

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

@@ -0,0 +1,12 @@
+import ZnChatMessageAttachment from './chat-message-attachment.component';
+
+export * from './chat-message-attachment.component';
+export default ZnChatMessageAttachment;
+
+ZnChatMessageAttachment.define('zn-chat-message-attachment');
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'zn-chat-message-attachment': ZnChatMessageAttachment;
+  }
+}