@haiilo/catalyst 1.1.0 → 1.1.1

package/dist/cjs/cat-alert_23.cjs.entry.js

@@ -5,6 +5,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-8ab22379.js');
 const catNotification = require('./cat-notification-bcb9fb86.js');
 
+function setAttributeDefault(host, attr, value) {
+  if (!host.hostElement.hasAttribute(attr) && value != null) {
+    host.hostElement.setAttribute(attr, String(value));
+  }
+}
+function setPropertyDefault(host, prop) {
+  setAttributeDefault(host, String(prop), host[prop]);
+}
+
 const catAlertCss = ":host{display:flex;gap:0.5rem;padding:1.25rem;border-radius:0.5rem;margin-bottom:1rem}:host([hidden]){display:none}:host(:focus-visible){outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.content{align-self:center}::slotted(:last-child){margin-bottom:0 !important}:host([color=primary]){background-color:rgba(var(--cat-primary-bg, 32, 127, 138), 0.1)}:host([color=primary]) cat-icon{color:#207f8a}:host([color=secondary]){background-color:rgba(105, 118, 135, 0.1)}:host([color=secondary]) cat-icon{color:#697687}:host([color=success]){background-color:rgba(0, 132, 88, 0.1)}:host([color=success]) cat-icon{color:#008458}:host([color=warning]){background-color:rgba(255, 206, 128, 0.1)}:host([color=warning]) cat-icon{color:#ebb663}:host([color=danger]){background-color:rgba(217, 52, 13, 0.1)}:host([color=danger]) cat-icon{color:#d9340d}";
 
 const CatAlert = class {
@@ -33,14 +42,13 @@ const CatAlert = class {
      */
     this.noIcon = false;
   }
-  render() {
-    return (index.h(index.Host, { tabindex: this.tabIndex, role: this.role }, !this.noIcon && index.h("cat-icon", { size: "l", icon: this.icon ? this.icon : this.mapIcon.get(this.color) }), index.h("div", { class: "content" }, index.h("slot", null))));
-  }
-  get tabIndex() {
-    return this.hostElement.getAttribute('tabindex') || '0';
+  connectedCallback() {
+    setAttributeDefault(this, 'tabindex', 0);
+    setAttributeDefault(this, 'role', this.mapRole.get(this.color));
+    setPropertyDefault(this, 'color');
   }
-  get role() {
-    return this.hostElement.getAttribute('role') || this.mapRole.get(this.color) || null;
+  render() {
+    return (index.h(index.Host, null, !this.noIcon && index.h("cat-icon", { size: "l", icon: this.icon ? this.icon : this.mapIcon.get(this.color) }), index.h("div", { class: "content" }, index.h("slot", null))));
   }
   get hostElement() { return index.getElement(this); }
 };
@@ -61,7 +69,7 @@ const loadImg = (src) => {
   });
 };
 
-const catAvatarCss = ":host{display:inline-block;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}:host([hidden]){display:none}.avatar{display:flex;align-items:center;justify-content:center;border-radius:0.25rem;text-decoration:inherit;color:var(--cat-avatar-fill, white);background-color:var(--cat-avatar-bg, #697687);background-size:cover;background-position:center;white-space:nowrap;overflow:hidden}.avatar:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.avatar-round{border-radius:50%}.avatar-xs{width:var(--cat-avatar-size, 1.5rem);height:var(--cat-avatar-size, 1.5rem);line-height:var(--cat-avatar-size, 1.5rem);font-size:var(--cat-avatar-font-size, 0.75rem)}.avatar-s{width:var(--cat-avatar-size, 2rem);height:var(--cat-avatar-size, 2rem);line-height:var(--cat-avatar-size, 2rem);font-size:var(--cat-avatar-font-size, 0.875rem)}.avatar-m{width:var(--cat-avatar-size, 2.5rem);height:var(--cat-avatar-size, 2.5rem);line-height:var(--cat-avatar-size, 2.5rem);font-size:var(--cat-avatar-font-size, 0.9375rem)}.avatar-l{width:var(--cat-avatar-size, 3rem);height:var(--cat-avatar-size, 3rem);line-height:var(--cat-avatar-size, 3rem);font-size:var(--cat-avatar-font-size, 1.125rem)}.avatar-xl{width:var(--cat-avatar-size, 3.5rem);height:var(--cat-avatar-size, 3.5rem);line-height:var(--cat-avatar-size, 3.5rem);font-size:var(--cat-avatar-font-size, 1.25rem)}";
+const catAvatarCss = ":host{display:contents}:host([hidden]){display:none}.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:0.25rem;text-decoration:inherit;color:var(--cat-avatar-fill, white);background-color:var(--cat-avatar-bg, #697687);background-size:cover;background-position:center;white-space:nowrap;overflow:hidden;vertical-align:middle;-webkit-user-select:none;-ms-user-select:none;user-select:none;}.avatar:focus-visible{outline:2px solid rgb(var(--cat-border-color-focus, 0, 113, 255));outline-offset:1px}.avatar-round{border-radius:50%}.avatar-xs{width:var(--cat-avatar-size, 1.5rem);height:var(--cat-avatar-size, 1.5rem);line-height:var(--cat-avatar-size, 1.5rem);font-size:var(--cat-avatar-font-size, 0.75rem)}.avatar-s{width:var(--cat-avatar-size, 2rem);height:var(--cat-avatar-size, 2rem);line-height:var(--cat-avatar-size, 2rem);font-size:var(--cat-avatar-font-size, 0.875rem)}.avatar-m{width:var(--cat-avatar-size, 2.5rem);height:var(--cat-avatar-size, 2.5rem);line-height:var(--cat-avatar-size, 2.5rem);font-size:var(--cat-avatar-font-size, 0.9375rem)}.avatar-l{width:var(--cat-avatar-size, 3rem);height:var(--cat-avatar-size, 3rem);line-height:var(--cat-avatar-size, 3rem);font-size:var(--cat-avatar-font-size, 1.125rem)}.avatar-xl{width:var(--cat-avatar-size, 3.5rem);height:var(--cat-avatar-size, 3.5rem);line-height:var(--cat-avatar-size, 3.5rem);font-size:var(--cat-avatar-font-size, 1.25rem)}";
 
 const CatAvatar = class {
   constructor(hostRef) {
@@ -131,7 +139,7 @@ const CatAvatar = class {
 };
 CatAvatar.style = catAvatarCss;
 
-const catBadgeCss = ":host{display:inline-block;max-width:100%;vertical-align:baseline}:host([hidden]){display:none}.badge{font:inherit;display:inline-flex;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;box-sizing:border-box;width:100%;line-height:1}.badge slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.badge-round{border-radius:10rem}.badge-filled{background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}.badge-outlined{background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}.badge-primary{--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}.badge-secondary{--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}.badge-success{--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}.badge-warning{--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}.badge-danger{--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}.badge-xs{height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem}.badge-s{height:1.5rem;min-width:1.5rem;font-size:0.75rem;padding:0 0.5rem}.badge-m{height:2rem;min-width:2rem;font-size:0.875rem;padding:0 0.75rem}.badge-l{height:2.5rem;min-width:2.5rem;font-size:0.9375rem;padding:0 1rem}.badge-xl{height:3rem;min-width:3rem;font-size:1.125rem;padding:0 1rem}.badge-pulse.badge-filled{animation:1.5s ease 0s infinite normal none running pulse}.badge-pulse.badge-outlined{animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
+const catBadgeCss = ":host([hidden]){display:none}:host{display:inline-flex;max-width:100%;vertical-align:baseline;align-items:center;justify-content:center;border-radius:0.125rem;text-decoration:none;line-height:1}:host slot{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}:host([round]){border-radius:10rem}:host([variant=filled]){background-color:rgb(var(--bg));color:rgb(var(--fill));font-weight:600;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:greyscale}:host([variant=outlined]){background-color:white;box-shadow:inset 0 0 0 1px rgba(var(--border), 0.2);color:rgb(var(--text))}:host([color=primary]){--bg:var(--cat-primary-bg, 32, 127, 138);--fill:var(--cat-primary-fill, 255, 255, 255);--text:var(--cat-primary-text, 32, 127, 138);--border:var(--cat-primary-text, 32, 127, 138)}:host([color=secondary]){--bg:105, 118, 135;--fill:255, 255, 255;--text:0, 0, 0;--border:105, 118, 135}:host([color=success]){--bg:0, 132, 88;--fill:255, 255, 255;--text:0, 132, 88;--border:0, 132, 88}:host([color=warning]){--bg:255, 206, 128;--fill:0, 0, 0;--text:159, 97, 0;--border:159, 97, 0}:host([color=danger]){--bg:217, 52, 13;--fill:255, 255, 255;--text:217, 52, 13;--border:217, 52, 13}:host([size=xs]){height:1rem;min-width:1rem;font-size:0.75rem;padding:0 0.25rem}:host([size=s]){height:1.5rem;min-width:1.5rem;font-size:0.75rem;padding:0 0.5rem}:host([size=m]){height:2rem;min-width:2rem;font-size:0.875rem;padding:0 0.75rem}:host([size=l]){height:2.5rem;min-width:2.5rem;font-size:0.9375rem;padding:0 1rem}:host([size=xl]){height:3rem;min-width:3rem;font-size:1.125rem;padding:0 1rem}:host([pulse][variant=filled]){animation:1.5s ease 0s infinite normal none running pulse}:host([pulse][variant=outlined]){animation:1.5s ease 0s infinite normal none running pulse-outlined}@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--bg))}70%{box-shadow:transparent 0 0 0 0.5rem}100%{box-shadow:transparent 0 0 0 0}}@keyframes pulse-outlined{0%{box-shadow:0 0 0 0 rgb(var(--bg)), inset 0 0 0 1px rgba(var(--border), 0.2)}70%{box-shadow:transparent 0 0 0 0.5rem, inset 0 0 0 1px rgba(var(--border), 0.2)}100%{box-shadow:transparent 0 0 0 0, inset 0 0 0 1px rgba(var(--border), 0.2)}}";
 
 const CatBadge = class {
   constructor(hostRef) {
@@ -157,16 +165,15 @@ const CatBadge = class {
      */
     this.pulse = false;
   }
+  connectedCallback() {
+    setPropertyDefault(this, 'variant');
+    setPropertyDefault(this, 'color');
+    setPropertyDefault(this, 'size');
+  }
   render() {
-    return (index.h("span", { part: "badge", class: {
-        badge: true,
-        'badge-round': this.round,
-        'badge-pulse': this.pulse,
-        [`badge-${this.variant}`]: Boolean(this.variant),
-        [`badge-${this.color}`]: Boolean(this.color),
-        [`badge-${this.size}`]: Boolean(this.size)
-      } }, index.h("slot", null)));
+    return index.h("slot", null);
   }
+  get hostElement() { return index.getElement(this); }
 };
 CatBadge.style = catBadgeCss;
 
@@ -469,7 +476,7 @@ const CatCard = class {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", null)));
+    return index.h("slot", null);
   }
 };
 CatCard.style = catCardCss;
@@ -5225,7 +5232,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:#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 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;flex:1 1 0%}.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-text{flex:1 1 0%}.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: '',
@@ -5400,6 +5407,11 @@ const CatSelect = class {
         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') {
@@ -5454,7 +5466,7 @@ const CatSelect = class {
       .subscribe(items => {
       var _a;
       const options = items === null || items === void 0 ? void 0 : items.map(item => ({
-        item,
+        item: Object.assign(Object.assign({}, item), { id: this.connectorSafe.customId ? this.connectorSafe.customId(item) : item.id }),
         render: this.connectorSafe.render(item)
       }));
       if (this.tags &&
@@ -5870,7 +5882,7 @@ const CatSelectTest = class {
         }
       })
     });
-    (_c = this.multipleSelectTagging) === null || _c === void 0 ? void 0 : _c.connect(this.countryConnector);
+    (_c = this.multipleSelectTagging) === null || _c === void 0 ? void 0 : _c.connect(Object.assign(Object.assign({}, this.countryConnector), { customId: (item) => item.country }));
     (_d = this.singleSelect) === null || _d === void 0 ? void 0 : _d.connect({
       resolve: (ids) => {
         console.info(`Resolving data... (${ids.join(', ')})`);
@@ -5901,11 +5913,11 @@ const CatSelectTest = class {
         description: user.desc
       })
     });
-    (_e = this.singleSelectAvatar) === null || _e === void 0 ? void 0 : _e.connect(this.countryConnector);
+    (_e = this.singleSelectAvatar) === null || _e === void 0 ? void 0 : _e.connect(Object.assign(Object.assign({}, this.countryConnector), { customId: (item) => item.country }));
     (_f = this.singleSelectTagging) === null || _f === void 0 ? void 0 : _f.connect(this.countryConnector);
   }
   render() {
-    return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true }), index.h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '1', tag: '' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true })));
+    return (index.h(index.Host, { style: { display: 'flex', flexDirection: 'column' } }, index.h("cat-select", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: () => { var _a; return console.log((_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.value); }, onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, index.h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), index.h("cat-select", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), index.h("cat-select", { label: "Multiple with tagging support", hint: "This is a hint!", ref: el => (this.multipleSelectTagging = el), value: { ids: ['1'], tags: ['Test', 'Albania'] }, placeholder: "Select country", onCatChange: () => { var _a; return console.log((_a = this.multipleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, multiple: true, tags: true, clearable: true }), index.h("cat-select", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), placeholder: "Search for a country or capital", onCatBlur: e => console.log('Single blur', e), clearable: true }), index.h("cat-select", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', onCatChange: () => { var _a; return console.log((_a = this.singleSelectAvatar) === null || _a === void 0 ? void 0 : _a.value); }, placeholder: "Search for a country or capital", clearable: true }), index.h("cat-select", { label: "Single with tagging support", ref: el => (this.singleSelectTagging = el), value: { id: '1', tag: '' }, placeholder: "Search for a country or capital", onCatChange: () => { var _a; return console.log('Single', (_a = this.singleSelectTagging) === null || _a === void 0 ? void 0 : _a.value); }, tagHint: "new country", tags: true, clearable: true })));
   }
   get countryConnector() {
     return {