@kubex/zinc 1.1.34 → 1.1.36

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubex/zinc",
-  "version": "1.1.34",
+  "version": "1.1.36",
   "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/select/select.component.ts

@@ -1079,6 +1079,10 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
         } else {
           this.setSelectedOptions(initiallySelectedOptions[0]);
         }
+
+        if (!this.defaultValue || this.defaultValue.length === 0) {
+          this.defaultValue = this.value;
+        }
       }
     }
 
@@ -1096,6 +1100,8 @@ export default class ZnSelect extends ZincElement implements ZincFormControl {
     event.stopImmediatePropagation();
 
     if (!this.disabled) {
+      this.valueHasChanged = true;
+
       // Deselecting drops the backing element for free-text values via selectionChanged's cleanup.
       this.toggleOptionSelection(option, false);
 

package/src/components/select/select.test.ts

@@ -231,6 +231,33 @@ describe('<zn-select>', () => {
       const chip = el.shadowRoot!.querySelector<HTMLElement>('.select__tags zn-chip')!;
       expect(getComputedStyle(chip).cursor).to.equal('default');
     });
+
+    it('removes a value when the tag remove icon is clicked before any other interaction', async () => {
+      const el = await fixture<ZnSelect>(html`
+        <zn-select multiple value="a b c">
+          <zn-option value="a">Option 1</zn-option>
+          <zn-option value="b">Option 2</zn-option>
+          <zn-option value="c">Option 3</zn-option>
+        </zn-select>
+      `);
+      await el.updateComplete;
+      expect(el.value).to.deep.equal(['a', 'b', 'c']);
+
+      let changed = false;
+      el.addEventListener('zn-change', () => {
+        changed = true;
+      });
+
+      const removeIcon = el.shadowRoot!.querySelector<HTMLElement>('.select__tags zn-icon[slot="action"]')!;
+      removeIcon.click();
+      await el.updateComplete;
+      // handleValueChange runs as a @watch on the next update cycle; give it a beat
+      await el.updateComplete;
+
+      expect(el.value).to.deep.equal(['b', 'c']);
+      expect(el.shadowRoot!.querySelectorAll('.select__tags zn-chip').length).to.equal(2);
+      expect(changed).to.be.true;
+    });
   });
 
   describe('free-text', () => {

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('>')) {