@kubex/zinc 1.1.35 → 1.1.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.35",
+  "version": "1.1.37",
   "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

@@ -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;
 
+  /** Hides the sender's name in the message header. */
+  @property({type: Boolean, reflect: true, attribute: 'hide-sender'}) hideSender = false;
+
   /** Whether any element is assigned to the `attachments` slot — drives the attachments row visibility. */
   @state() private hasAttachments = false;
 
@@ -199,7 +202,8 @@ export default class ZnChatMessage extends ZincElement {
   private renderHeader() {
     return html`
       <div part="header" class="message__header">
-        <span class="message__sender">${this.sender || (this.customerInitiated ? 'Customer' : 'You')}</span>
+        ${this.hideSender ? nothing : html`
+          <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`
           <zn-chip type="info">Internal Note</zn-chip>` : nothing}

package/src/components/page/page.scss

@@ -116,7 +116,7 @@
     font-weight: var(--zn-text-h1-font-weight);
     font-size: var(--zn-text-h1-font-size);
     color: rgba(var(--zn-text-panel-title), 100%);
-    line-height: 18px;
+    line-height: var(--zn-spacing-medium);
     margin: 0;
     overflow: hidden;
     white-space: nowrap;

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

@@ -15,6 +15,7 @@ interface SettingsContainerFilter {
   checked: boolean;
   label: string;
   itemSelector?: string;
+  toggleAttribute?: string;
 }
 
 /**
@@ -56,7 +57,9 @@ export default class ZnSettingsContainer extends ZincElement {
     config: {childList: true, subtree: true, attributes: true},
     callback: mutations => {
       for (const mutation of mutations) {
-        if (mutation.type === 'attributes' && mutation.attributeName === 'hidden') {
+        if (mutation.type === 'attributes' &&
+          (mutation.attributeName === 'hidden' ||
+            this.filters.some(f => f.toggleAttribute === mutation.attributeName))) {
           continue;
         }
         this.scheduleUpdateFilters();
@@ -159,7 +162,8 @@ export default class ZnSettingsContainer extends ZincElement {
       const checked = existingChecked.has(attribute) ? !!existingChecked.get(attribute) : defaultChecked;
       const label = filter.textContent || 'Unnamed Filter';
       const itemSelector = filter.getAttribute('item-selector') || '*';
-      nextFilters.push({attribute, checked, label, itemSelector});
+      const toggleAttribute = filter.getAttribute('toggle-attribute') || undefined;
+      nextFilters.push({attribute, checked, label, itemSelector, toggleAttribute});
     });
     this.filters = nextFilters;
   }
@@ -173,9 +177,18 @@ export default class ZnSettingsContainer extends ZincElement {
       items = this.querySelectorAll(filter.itemSelector + attrAppend);
     }
     items.forEach(item => {
+      if (filter.toggleAttribute) {
+        if (checked) {
+          item.removeAttribute(filter.toggleAttribute);
+        } else {
+          item.setAttribute(filter.toggleAttribute, 'true');
+        }
+        return;
+      }
+
       if (checked) {
         const shouldStayHidden = this.filters.some(f => {
-          if (f.attribute === filter.attribute || f.checked) return false;
+          if (f.attribute === filter.attribute || f.checked || f.toggleAttribute) return false;
           const fAttrAppend = f.attribute === "*" ? `` : `[${f.attribute}]`;
           let fItems;
           if (f.itemSelector && f.itemSelector.startsWith('>')) {