@haiilo/catalyst 1.0.2 → 1.1.0

package/dist/components/cat-select2.js

@@ -504,7 +504,7 @@ var autosizeInput = function (element, options) {
   }
 };
 
-const catSelectCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:#d9340d}:host{display:flex;flex-direction:column;gap:0.5rem;position:relative;margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear;padding:0.25rem}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px #d9340d}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d9340d}.select-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#ebecf0;border-radius:0.125rem;white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem;z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem;--cat-avatar-size:1.25rem}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(105, 118, 135, 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
+const catSelectCss = ".hint-section{display:flex;gap:0.5rem;flex-direction:column}.hint-section .input-hint,.hint-section ::slotted([slot=hint]){font-size:0.875rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);margin:0 !important}:host-context(.cat-error) .hint-section{color:#d9340d}:host{display:flex;flex-direction:column;gap:0.5rem;position:relative;margin-bottom:1rem}:host([hidden]){display:none}label{align-self:flex-start}label.hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}.input-optional{margin-left:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:var(--cat-font-weight-body, 400);color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.select-wrapper{display:flex;align-items:flex-start;background:white;border-radius:0.25rem;box-shadow:0 0 0 1px #d7dbe0;transition:box-shadow 0.13s linear;padding:0.25rem}.select-wrapper:not(.select-disabled):hover{box-shadow:0 0 0 2px #d7dbe0}.select-wrapper:not(.select-disabled):focus-within{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255))}:host(.cat-error) .select-wrapper{box-shadow:0 0 0 1px #d9340d}:host(.cat-error) .select-wrapper:not(.input-disabled):hover{box-shadow:0 0 0 2px #d9340d}.select-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135));pointer-events:none}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:0.25rem;min-width:0}.select-wrapper-inner>cat-avatar{padding-left:0.25rem}.select-wrapper-inner cat-avatar{--cat-avatar-size:1.25rem}.select-input{font:inherit;background:none;border:none;outline:none;padding:0.375rem 0.5rem;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.select-disabled .select-input{cursor:inherit}.select-pills{display:contents}.pill{display:inline-flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;background:#f2f4f7;border-radius:0.125rem;white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis}.pill>cat-button{margin-right:-0.25rem;margin-left:-0.25rem}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:0.375rem}.select-btn-open{transform:rotate(180deg)}.select-dropdown{position:absolute;right:0;background:white;display:none;overflow:auto;box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem;z-index:100}.select-options-wrapper{max-height:16rem;width:100%}.select-empty{margin:1rem 0;padding:0 1.25rem}.select-options{list-style-type:none;margin:0;padding:0.5rem 0}.select-options cat-checkbox,.select-options .select-option-single{margin:0;padding:0.5rem 1rem}.select-option-inner{display:flex;gap:0.5rem;--cat-avatar-size:1.25rem}.select-option-single{cursor:pointer}.select-input-transparent-caret{caret-color:transparent}.select-option-empty,.select-option-loading{padding:0.5rem 1rem}.select-option:hover{background-color:rgba(105, 118, 135, 0.05)}.select-option-active{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:-2px}.select-option-label{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}.select-option-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}";
 
 const INIT_STATE = {
   term: '',
@@ -568,6 +568,10 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * 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);
@@ -587,11 +591,25 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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();
     }
@@ -612,7 +630,12 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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 });
@@ -624,8 +647,19 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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]);
@@ -634,6 +668,9 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           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();
@@ -644,11 +681,6 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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') {
@@ -657,7 +689,12 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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) {
@@ -695,12 +732,28 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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, (this.hasSlottedLabel || this.label) && (h("label", { htmlFor: this.id, class: { hidden: this.labelHidden } }, h("span", { part: "label" }, (this.hasSlottedLabel && h("slot", { name: "label" })) || this.label, !this.required && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", this.i18n.t('input.optional'), ")"))))), h("div", { class: { 'select-wrapper': true, 'select-disabled': this.disabled }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
@@ -710,16 +763,35 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "16-cross", iconOnly: true, a11yLabel: this.i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1 }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, initials: '' })) : null, h("input", { class: "select-input", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, onInput: () => this.onInput(), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", null), (this.state.selection.length || this.state.term.length) &&
       !this.disabled &&
       !this.state.isResolving &&
-      this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: this.i18n.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "chevron-down-outlined", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? this.i18n.t('select.close') : this.i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), 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.state.isLoading
+      this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "cross-circle-outlined", variant: "text", size: "s", a11yLabel: this.i18n.t('input.clear'), onClick: () => this.clear() })) : null, !this.state.isResolving && (h("cat-button", { iconOnly: true, icon: "chevron-down-outlined", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? this.i18n.t('select.close') : this.i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving }))), 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.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"]');
@@ -732,21 +804,27 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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 ids = this.initIds();
+    let tags;
+    if (this.tags) {
+      tags = this.initTags();
     }
-    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 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;
@@ -771,7 +849,6 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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) {
@@ -782,11 +859,13 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         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)) {
@@ -833,7 +912,12 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   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() {
@@ -871,52 +955,122 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     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');
+    }
+  }
   get hostElement() { return this; }
   static get watchers() { return {
     "connector": ["onConnectorChange"],
@@ -936,6 +1090,8 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "labelHidden": [4, "label-hidden"],
     "required": [4],
     "clearable": [4],
+    "tags": [4],
+    "tagHint": [1, "tag-hint"],
     "connector": [32],
     "state": [32],
     "hasSlottedLabel": [32],