@haiilo/catalyst 1.0.2 → 1.1.0

package/dist/collection/components/cat-select/cat-select.js

@@ -69,6 +69,10 @@ export class CatSelect {
      * Whether the select should show a clear button.
      */
     this.clearable = false;
+    /**
+     * Whether the select should add new items.
+     */
+    this.tags = false;
   }
   onConnectorChange(connector) {
     this.reset(connector);
@@ -88,11 +92,25 @@ export class CatSelect {
         this.hide();
       }
       const idsSelected = this.state.selection.map(item => item.item.id);
-      if (this.multiple) {
-        this.value = idsSelected;
+      if (!this.tags) {
+        if (this.multiple) {
+          this.value = idsSelected;
+        }
+        else {
+          this.value = idsSelected.length ? idsSelected[0] : '';
+        }
       }
       else {
-        this.value = idsSelected.length ? idsSelected[0] : '';
+        const ids = idsSelected.filter(id => !id.startsWith(`select-${this.id}-tag`));
+        const tags = this.state.selection
+          .filter(item => item.item.id.startsWith(`select-${this.id}-tag`))
+          .map(item => item.render.label);
+        if (this.multiple) {
+          this.value = { ids, tags };
+        }
+        else {
+          this.value = { id: ids.length ? ids[0] : '', tag: tags.length ? tags[0] : '' };
+        }
       }
       this.catChange.emit();
     }
@@ -113,7 +131,12 @@ export class CatSelect {
   }
   onBlur(event) {
     if (!this.multiple && this.state.activeOptionIndex >= 0) {
-      this.select(this.state.options[this.state.activeOptionIndex]);
+      if (this.tags && this.state.options[this.state.activeOptionIndex].item.id === `select-${this.id}-option-tag`) {
+        this.createTag(this.state.term);
+      }
+      else {
+        this.select(this.state.options[this.state.activeOptionIndex]);
+      }
     }
     this.hide();
     this.patchState({ activeSelectionIndex: -1 });
@@ -125,8 +148,19 @@ export class CatSelect {
     if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
       this.onArrowKeyDown(event);
     }
-    else if (['Enter', ' '].includes(event.key)) {
-      if (isInputFocused && this.state.activeOptionIndex >= 0) {
+    else if (['Enter', ' '].includes(event.key) && isInputFocused) {
+      if (this.tags &&
+        this.state.activeOptionIndex === 0 &&
+        this.state.options[0].item.id === `select-${this.id}-option-tag`) {
+        event.preventDefault();
+        if (this.multiple) {
+          this.toggleTag(this.state.options[0]);
+        }
+        else {
+          this.createTag(this.state.options[0].render.label);
+        }
+      }
+      else if (this.state.activeOptionIndex >= 0) {
         event.preventDefault();
         if (this.multiple) {
           this.toggle(this.state.options[this.state.activeOptionIndex]);
@@ -135,6 +169,9 @@ export class CatSelect {
           this.select(this.state.options[this.state.activeOptionIndex]);
         }
       }
+      else if (this.tags && event.key === 'Enter' && this.state.activeOptionIndex < 0) {
+        this.createTag(this.state.term);
+      }
     }
     else if (event.key === 'Escape') {
       this.hide();
@@ -145,11 +182,6 @@ export class CatSelect {
         if (this.state.activeSelectionIndex >= 0) {
           this.deselect(this.state.selection[this.state.activeSelectionIndex].item.id);
         }
-        else if (this.state.selection.length) {
-          const selectionClone = [...this.state.selection];
-          selectionClone.pop();
-          this.patchState({ selection: selectionClone });
-        }
       }
     }
     else if (event.key === 'Tab') {
@@ -158,7 +190,12 @@ export class CatSelect {
         this.patchState({ activeSelectionIndex: -1, activeOptionIndex: -1 });
       }
       else if (this.state.activeOptionIndex >= 0) {
-        this.select(this.state.options[this.state.activeOptionIndex]);
+        if (this.tags && this.state.options[this.state.activeOptionIndex].item.id === `select-${this.id}-option-tag`) {
+          this.createTag(this.state.term);
+        }
+        else {
+          this.select(this.state.options[this.state.activeOptionIndex]);
+        }
       }
     }
     else if (event.key.length === 1) {
@@ -196,12 +233,28 @@ export class CatSelect {
     this.subscription = this.term$
       .asObservable()
       .pipe(debounce(term => (term ? timer(this.debounce) : of(0))), distinctUntilChanged(), tap(() => (number$ = this.more$.pipe(filter(() => !this.state.isLoading), scan(n => n + 1, 0), startWith(0)))), tap(() => this.patchState({ options: [] })), switchMap(term => number$.pipe(tap(() => this.patchState({ isLoading: true })), switchMap(number => this.connectorSafe.retrieve(term, number)), tap(page => this.patchState({ isLoading: false, totalElements: page.totalElements })), takeWhile(page => !page.last, true), scan((items, page) => [...items, ...page.content], []))))
-      .subscribe(items => this.patchState({
-      options: items === null || items === void 0 ? void 0 : items.map(item => ({
+      .subscribe(items => {
+      var _a;
+      const options = items === null || items === void 0 ? void 0 : items.map(item => ({
         item,
         render: this.connectorSafe.render(item)
-      }))
-    }));
+      }));
+      if (this.tags &&
+        this.state.term.trim().length &&
+        !options.find(value1 => value1.render.label.toLowerCase() === this.state.term.toLowerCase())) {
+        let label;
+        if (this.isAlreadyCreated(this.state.term)) {
+          label = (_a = this.state.selection.find(item => item.render.label.toLowerCase() === this.state.term.toLowerCase())) === null || _a === void 0 ? void 0 : _a.render.label;
+        }
+        options.unshift({
+          item: { id: `select-${this.id}-option-tag` },
+          render: { label: label ? label : this.state.term }
+        });
+      }
+      this.patchState({
+        options
+      });
+    });
   }
   render() {
     return (h(Host, null,
@@ -232,28 +285,47 @@ export class CatSelect {
       this.hintSection,
       h("div", { class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() },
         h("ul", { class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` },
-          this.state.options.map((item, i) => (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": this.isSelected(item.item.id) ? 'true' : 'false' }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: this.isSelected(item.item.id), tabIndex: -1, labelLeft: true, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onCatChange: e => {
-              this.toggle(item);
-              e.stopPropagation();
-            } },
-            h("span", { slot: "label", class: "select-option-inner" },
-              item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: '' })) : null,
-              h("span", { class: "select-option-text" },
-                h("span", { class: "select-option-label" }, item.render.label),
-                h("span", { class: "select-option-description" }, item.render.description))))) : (h("div", { class: {
-              'select-option-inner': true,
-              'select-option-single': true,
-              'select-option-active': this.state.activeOptionIndex === i
-            }, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onClick: () => this.select(item), tabIndex: -1 },
-            item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: '' })) : null,
-            h("span", { class: "select-option-text" },
-              h("span", { class: "select-option-label" }, item.render.label),
-              h("span", { class: "select-option-description" }, item.render.description))))))),
+          this.optionsList,
           this.state.isLoading
             ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" },
               h("cat-skeleton", { variant: "body", lines: 1 }),
               h("cat-skeleton", { variant: "body", lines: 1 }))))
-            : !this.state.options.length && h("li", { class: "select-option-empty" }, this.i18n.t('select.empty'))))))));
+            : !this.state.options.length &&
+              !this.tags && h("li", { class: "select-option-empty" }, this.i18n.t('select.empty'))))))));
+  }
+  get optionsList() {
+    return this.state.options.map((item, i) => {
+      const isTagOption = this.tags && item.item.id === `select-${this.id}-option-tag`;
+      const getAriaSelected = () => {
+        if (isTagOption) {
+          return this.isAlreadyCreated(item.render.label) ? 'true' : 'false';
+        }
+        return this.isSelected(item.item.id) ? 'true' : 'false';
+      };
+      const getLabel = () => {
+        if (isTagOption) {
+          return item.render.label + this.tagTextHelp;
+        }
+        return item.render.label;
+      };
+      return (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": getAriaSelected() }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: !isTagOption ? this.isSelected(item.item.id) : this.isAlreadyCreated(item.render.label), tabIndex: -1, labelLeft: true, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onCatChange: e => {
+          !isTagOption ? this.toggle(item) : this.toggleTag(item);
+          e.stopPropagation();
+        } },
+        h("span", { slot: "label", class: "select-option-inner" },
+          item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: '' })) : null,
+          h("span", { class: "select-option-text" },
+            h("span", { class: "select-option-label" }, getLabel()),
+            h("span", { class: "select-option-description" }, item.render.description))))) : (h("div", { class: {
+          'select-option-inner': true,
+          'select-option-single': true,
+          'select-option-active': this.state.activeOptionIndex === i
+        }, onFocus: () => { var _a; return (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus(); }, onClick: () => (isTagOption ? this.createTag(item.render.label) : this.select(item)), tabIndex: -1 },
+        item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: '' })) : null,
+        h("span", { class: "select-option-text" },
+          h("span", { class: "select-option-label" }, getLabel()),
+          h("span", { class: "select-option-description" }, item.render.description))))));
+    });
   }
   get hintSection() {
     const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
@@ -266,21 +338,27 @@ export class CatSelect {
     throw new Error('CatSelectConnector not set');
   }
   resolve() {
-    var _a;
     this.patchState({ isResolving: true });
-    let ids;
-    if (this.multiple) {
-      ids = this.value;
-    }
-    else {
-      ids = [this.value];
-    }
-    const data$ = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.connectorSafe.resolve(ids).pipe(first()) : of([]);
-    data$.pipe(catchError(() => of([]))).subscribe(items => this.patchState({
-      isResolving: false,
-      selection: items === null || items === void 0 ? void 0 : items.map(item => ({ item, render: this.connectorSafe.render(item) })),
-      term: !this.multiple && items.length ? this.connectorSafe.render(items[0]).label : ''
-    }));
+    const ids = this.initIds();
+    let tags;
+    if (this.tags) {
+      tags = this.initTags();
+    }
+    const data$ = ids.length ? this.connectorSafe.resolve(ids).pipe(first()) : of([]);
+    data$.pipe(catchError(() => of([]))).subscribe(items => {
+      const selection = items.length ? items === null || items === void 0 ? void 0 : items.map(item => ({ item, render: this.connectorSafe.render(item) })) : [];
+      if (this.tags) {
+        tags === null || tags === void 0 ? void 0 : tags.forEach((tag, index) => {
+          const item = { id: `select-${this.id}-tag-${index}`, name: tag };
+          selection.push({ item, render: { label: item.name } });
+        });
+      }
+      this.patchState({
+        isResolving: false,
+        selection,
+        term: !this.multiple && selection.length ? selection[0].render.label : ''
+      });
+    });
   }
   show() {
     var _a;
@@ -305,7 +383,6 @@ export class CatSelect {
     return this.state.selection.findIndex(s => s.item.id === id) >= 0;
   }
   select(item) {
-    var _a;
     if (!this.isSelected(item.item.id)) {
       let newSelection;
       if (this.multiple) {
@@ -316,11 +393,13 @@ export class CatSelect {
         this.search(item.render.label);
       }
       this.patchState({ selection: newSelection });
+      if (this.multiple && this.state.term.trim() && this.input) {
+        this.patchState({ term: '', activeOptionIndex: -1 });
+        this.term$.next('');
+        this.input.value = '';
+      }
     }
-    if (!this.multiple) {
-      this.hide();
-      (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.add('select-input-transparent-caret');
-    }
+    this.setTransparentCaret();
   }
   deselect(id) {
     if (this.isSelected(id)) {
@@ -367,7 +446,12 @@ export class CatSelect {
   }
   onInput() {
     var _a;
-    this.search(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || '');
+    this.search(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value.trim()) || '');
+    if (!this.multiple && this.state.selection.length) {
+      const selectionClone = [...this.state.selection];
+      selectionClone.pop();
+      this.patchState({ selection: selectionClone });
+    }
     this.show();
   }
   update() {
@@ -405,52 +489,122 @@ export class CatSelect {
     var _a, _b;
     let preventDefault = false;
     (_a = this.input) === null || _a === void 0 ? void 0 : _a.focus();
-    if (event.key === 'ArrowDown') {
-      preventDefault = true;
-      this.state.isOpen
-        ? this.patchState({
-          activeOptionIndex: Math.min(this.state.activeOptionIndex + 1, this.state.options.length - 1),
-          activeSelectionIndex: -1
-        })
-        : this.show();
-    }
-    else if (event.key === 'ArrowUp') {
-      preventDefault = true;
-      this.state.activeOptionIndex >= 0
-        ? this.patchState({
-          activeOptionIndex: Math.max(this.state.activeOptionIndex - 1, -1),
-          activeSelectionIndex: -1
-        })
-        : this.hide();
-    }
-    else if (event.key === 'ArrowLeft') {
-      if (((_b = this.input) === null || _b === void 0 ? void 0 : _b.selectionStart) === 0) {
+    switch (event.key) {
+      case 'ArrowDown':
         preventDefault = true;
-        let index;
-        this.state.activeSelectionIndex > 0
-          ? (index = Math.max(this.state.activeSelectionIndex - 1, -1))
-          : (index = this.state.selection.length - 1);
-        this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
-      }
-    }
-    else if (event.key === 'ArrowRight') {
-      if (this.state.activeSelectionIndex >= 0) {
+        this.state.isOpen
+          ? this.patchState({
+            activeOptionIndex: Math.min(this.state.activeOptionIndex + 1, this.state.options.length - 1),
+            activeSelectionIndex: -1
+          })
+          : this.show();
+        break;
+      case 'ArrowUp':
         preventDefault = true;
-        let index = -1;
-        if (this.state.activeSelectionIndex < this.state.selection.length - 1) {
-          index = Math.min(this.state.activeSelectionIndex + 1, this.state.selection.length - 1);
+        this.state.activeOptionIndex >= 0
+          ? this.patchState({
+            activeOptionIndex: Math.max(this.state.activeOptionIndex - 1, -1),
+            activeSelectionIndex: -1
+          })
+          : this.hide();
+        break;
+      case 'ArrowLeft':
+        if (((_b = this.input) === null || _b === void 0 ? void 0 : _b.selectionStart) === 0) {
+          preventDefault = true;
+          let index;
+          this.state.activeSelectionIndex > 0
+            ? (index = Math.max(this.state.activeSelectionIndex - 1, -1))
+            : (index = this.state.selection.length - 1);
+          this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
         }
-        else if (!this.state.term) {
-          index = 0;
+        break;
+      case 'ArrowRight':
+        if (this.state.activeSelectionIndex >= 0) {
+          preventDefault = true;
+          let index = -1;
+          if (this.state.activeSelectionIndex < this.state.selection.length - 1) {
+            index = Math.min(this.state.activeSelectionIndex + 1, this.state.selection.length - 1);
+          }
+          else if (!this.state.term) {
+            index = 0;
+          }
+          this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
         }
-        this.patchState({ activeSelectionIndex: index, activeOptionIndex: -1 });
-      }
     }
     if (preventDefault) {
       event.preventDefault();
       event.stopPropagation();
     }
   }
+  get tagTextHelp() {
+    return this.tagHint && !this.isAlreadyCreated(this.state.term) ? ' (' + this.tagHint + ')' : '';
+  }
+  isAlreadyCreated(term) {
+    return this.state.selection.findIndex(item => item.render.label.toLowerCase() === term.toLowerCase()) >= 0;
+  }
+  createTag(term) {
+    if (term.trim().length && !this.isAlreadyCreated(term)) {
+      const value = this.value;
+      const tags = value === null || value === void 0 ? void 0 : value.tags;
+      const tag = { id: `select-${this.id}-tag-${tags ? tags.length : 0}`, name: term };
+      this.select({ item: tag, render: { label: tag.name } });
+    }
+    this.setTransparentCaret();
+  }
+  initIds() {
+    let ids = [];
+    if (this.value) {
+      if (!this.tags) {
+        if (this.multiple) {
+          ids = this.value;
+        }
+        else {
+          ids = [this.value];
+        }
+      }
+      else {
+        if (this.multiple) {
+          const value = this.value;
+          ids = value.ids ? value.ids : [];
+        }
+        else {
+          const value = this.value;
+          ids = value.id ? [value.id] : [];
+        }
+      }
+    }
+    return ids;
+  }
+  initTags() {
+    let tags = [];
+    if (this.value) {
+      if (this.multiple) {
+        const value = this.value;
+        tags = value.tags ? value.tags : [];
+      }
+      else {
+        const value = this.value;
+        tags = value.tag ? [value.tag] : [];
+      }
+    }
+    return tags;
+  }
+  toggleTag(item) {
+    this.isAlreadyCreated(item.render.label) ? this.removeTag(item.render.label) : this.createTag(item.render.label);
+  }
+  removeTag(label) {
+    if (this.isAlreadyCreated(label)) {
+      const item = this.state.selection.find(item => item.render.label.toLowerCase() === label.toLowerCase());
+      item && this.deselect(item.item.id);
+    }
+  }
+  setTransparentCaret() {
+    var _a;
+    if (!this.multiple) {
+      this.hide();
+      (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.add('select-input-transparent-caret');
+    }
+  }
   static get is() { return "cat-select"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -523,15 +677,22 @@ export class CatSelect {
       "type": "string",
       "mutable": true,
       "complexType": {
-        "original": "string | string[]",
-        "resolved": "string | string[] | undefined",
-        "references": {}
+        "original": "string | string[] | CatSelectTaggingValue | CatSelectMultipleTaggingValue",
+        "resolved": "CatSelectMultipleTaggingValue | CatSelectTaggingValue | string | string[] | undefined",
+        "references": {
+          "CatSelectTaggingValue": {
+            "location": "local"
+          },
+          "CatSelectMultipleTaggingValue": {
+            "location": "local"
+          }
+        }
       },
       "required": false,
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The value of the select."
+        "text": "The value of the select.\n\nThe value of the select depends on whether it is allowed to choose a single item or several items.\nWhen only one item can be selected, the value is the id of the item, in case several items can be selected, the value is an array of ids of the selected items.\n\nIn case the user can add new items to the select (tags activated), the value in the single select is an object (CatSelectTaggingValue) with the id of the item or the name of the created item,\nin the case of multiple select, it is an object (CatSelectMultipleTaggingValue) with the array of the ids of the items selected and the array of the names of the items created"
       },
       "attribute": "value",
       "reflect": false
@@ -677,6 +838,41 @@ export class CatSelect {
       "attribute": "clearable",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "tags": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Whether the select should add new items."
+      },
+      "attribute": "tags",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "tagHint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Optional hint text to be displayed on the new item to be added."
+      },
+      "attribute": "tag-hint",
+      "reflect": false
     }
   }; }
   static get states() { return {