@nyaruka/temba-components 0.120.1 → 0.120.2

package/src/compose/Compose.ts

@@ -166,10 +166,6 @@ export class Compose extends FormElement {
       temba-shortcuts {
         flex-grow: 1;
       }
-
-      .quick-replies {
-        background: #f9f9f9;
-      }
     `;
   }
 
@@ -182,6 +178,9 @@ export class Compose extends FormElement {
   @property({ type: Number })
   maxLength = 640;
 
+  @property({ type: Number })
+  maxQuickReplies = 10;
+
   @property({ type: Boolean })
   completion: boolean;
 
@@ -668,9 +667,11 @@ export class Compose extends FormElement {
               .count=${this.currentQuickReplies.length}
             >
               <temba-select
-                class="quick-replies"
                 @change=${this.handleQuickReplyChange}
                 .values=${this.currentQuickReplies}
+                maxItems=${this.maxQuickReplies}
+                maxItemsText="You can only add ${this
+                  .maxQuickReplies} Quick Replies"
                 class="quick-replies"
                 tags
                 multi

package/src/select/Select.ts

@@ -358,6 +358,12 @@ export class Select<T extends SelectOption> extends FormElement {
   @property({ type: String })
   valueKey = 'value';
 
+  @property({ type: Number })
+  maxItems = 0;
+
+  @property({ type: String })
+  maxItemsText: string = 'Maximum items reached';
+
   @property({ attribute: false })
   currentFunction: CompletionOption;
 
@@ -807,6 +813,17 @@ export class Select<T extends SelectOption> extends FormElement {
   }
 
   public handleOptionSelection(event: CustomEvent) {
+    if (
+      this.multi &&
+      this.maxItems > 0 &&
+      this.values.length >= this.maxItems
+    ) {
+      this.infoText = this.maxItemsText;
+      return;
+    } else {
+      this.infoText = '';
+    }
+
     const selected = event.detail.selected;
     // check if we should post it
     if (selected.post && this.endpoint) {
@@ -953,6 +970,15 @@ export class Select<T extends SelectOption> extends FormElement {
       }
     }
 
+    if (
+      this.multi &&
+      this.maxItems > 0 &&
+      this.values.length >= this.maxItems
+    ) {
+      options = [];
+      this.infoText = this.maxItemsText;
+    }
+
     // finally sort
     if (this.sortFunction) {
       options.sort(this.sortFunction);
@@ -1129,6 +1155,14 @@ export class Select<T extends SelectOption> extends FormElement {
       this.visibleOptions = [];
       this.cursorIndex = 0;
     }
+
+    if (
+      this.multi &&
+      this.maxItems > 0 &&
+      this.values.length >= this.maxItems
+    ) {
+      this.infoText = '';
+    }
   }
 
   private handleClick(): void {
@@ -1347,12 +1381,14 @@ export class Select<T extends SelectOption> extends FormElement {
       this.values.splice(idx, 1);
     }
     this.requestUpdate('values', oldValues);
+    this.infoText = '';
   }
 
   public popValue() {
     const oldValues = [...this.values];
     this.values.pop();
     this.requestUpdate('values', oldValues);
+    this.infoText = '';
   }
 
   public clear() {

package/test/temba-select.test.ts

@@ -319,6 +319,40 @@ describe('temba-select', () => {
       );
     });
 
+    it('can select multiple options until maxitems', async () => {
+      const select = await createSelect(
+        clock,
+        getSelectHTML(colors, { placeholder: 'Select a color', multi: true, maxItems: 2 })
+      );
+      expect(select.values.length).to.equal(0);
+
+      const changeEvent = sinon.spy();
+      select.addEventListener('change', changeEvent);
+
+      // select the first option 3 times, only 2 (maxitems) options are handled and added
+      await openAndClick(clock, select, 0);
+      assert(changeEvent.called, 'change event not fired');
+
+      changeEvent.resetHistory();
+      await openAndClick(clock, select, 0);
+      assert(changeEvent.called, 'change event not fired');
+
+      changeEvent.resetHistory();
+      await open(clock, select);
+      assert.equal(select.visibleOptions.length, 0);
+      assert(!changeEvent.called, 'change event should not be fired');
+
+      // but we should have red and green selected only, no blue
+      expect(select.values.length).to.equal(2);
+      expect(select.shadowRoot.innerHTML).to.contain('Red');
+      expect(select.shadowRoot.innerHTML).to.contain('Green');
+
+      await assertScreenshot(
+        'select/selected-multi-maxitems-reached',
+        getClipWithOptions(select)
+      );
+    });
+
     it('shows multiple values on initialization', async () => {
       const select = await createSelect(
         clock,