@haiilo/catalyst 0.15.0 → 0.15.3

package/dist/esm/cat-alert_24.entry.js

@@ -12918,7 +12918,7 @@ var autosizeInput = function (element, options) {
   }
 };
 
-const catSelectRemoteCss = ".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}:host{display:flex;flex-direction:column;gap:0.5rem;position:relative}: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:4px}.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))}.select-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.select-wrapper-inner{display:flex;flex:1 1 auto;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}.select-input{font:inherit;background:none;border:none;outline:none;padding:6px 8px;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:4px;padding:4px 8px;background:#ebecf0;border-radius:0.125rem;white-space:nowrap;min-width:0}.pill>span{overflow:hidden;text-overflow:ellipsis}.pill>cat-button{margin-right:-4px}.select-btn{transition:transform 0.13s linear}.select-btn::part(button){outline:none}cat-spinner{padding:6px}.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-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 catSelectRemoteCss = ".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}: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))}.select-disabled{background:#f8f8fb;cursor:not-allowed;color:rgb(var(--cat-font-color-muted, 105, 118, 135))}.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 INIT_STATE = {
   term: '',
@@ -12937,6 +12937,7 @@ const CatSelectRemote = class {
     this.catOpen = createEvent(this, "catOpen", 7);
     this.catClose = createEvent(this, "catClose", 7);
     this.catChange = createEvent(this, "catChange", 7);
+    this.catBlur = createEvent(this, "catBlur", 7);
     this.i18n = CatI18nRegistry.getInstance();
     this.id = `cat-input-${nextUniqueId$4++}`;
     this.term$ = new Subject();
@@ -12972,7 +12973,7 @@ const CatSelectRemote = class {
      */
     this.labelHidden = false;
     /**
-     * A value is required or must be check for the form to be submittable.
+     * A value is required or must be checked for the form to be submittable.
      */
     this.required = false;
     /**
@@ -13021,12 +13022,13 @@ const CatSelectRemote = class {
       loglevel.error('[A11y] Missing ARIA label on select', this);
     }
   }
-  onBlur() {
+  onBlur(event) {
     if (!this.multiple && this.state.activeOptionIndex >= 0) {
       this.select(this.state.options[this.state.activeOptionIndex]);
     }
     this.hide();
     this.patchState({ activeSelectionIndex: -1 });
+    this.catBlur.emit(event);
   }
   onKeyDown(event) {
     var _a, _b, _c, _d, _e;
@@ -13092,6 +13094,11 @@ const CatSelectRemote = class {
       }
     }
   }
+  /**
+   * Connect the functions of the select
+   *
+   * @param connector - The {@link CatSelectRemoteConnector} of the select.
+   */
   async connect(connector) {
     var _a;
     this.connector = connector;
@@ -13112,16 +13119,17 @@ const CatSelectRemote = class {
         pill: true,
         'select-no-open': true,
         'select-option-active': this.state.activeSelectionIndex === i
-      }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, 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 }))))))) : 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) &&
+      }, 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('select.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" }, h("span", { class: "select-option-label" }, item.render.label), h("span", { class: "select-option-description" }, item.render.description)))) : (h("div", { class: {
+      } }, 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 }, h("span", { class: "select-option-label" }, item.render.label), h("span", { class: "select-option-description" }, item.render.description)))))), this.state.isLoading
+      }, 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
       ? Array.from(Array(CatSelectRemote.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'))))))));
   }
@@ -13333,7 +13341,7 @@ const CatSelectRemoteTest = class {
     registerInstance(this, hostRef);
   }
   componentDidLoad() {
-    var _a, _b;
+    var _a, _b, _c, _d;
     (_a = this.multipleSelect) === null || _a === void 0 ? void 0 : _a.connect({
       resolve: (ids) => {
         console.info(`Resolving data... (${ids.join(', ')})`);
@@ -13364,7 +13372,41 @@ const CatSelectRemoteTest = class {
         description: user.desc
       })
     });
-    (_b = this.singleSelect) === null || _b === void 0 ? void 0 : _b.connect({
+    (_b = this.multipleSelectAvatar) === null || _b === void 0 ? void 0 : _b.connect({
+      resolve: (ids) => {
+        console.info(`Resolving data... (${ids.join(', ')})`);
+        return of(ids.map(id => ({
+          id,
+          firstName: 'John',
+          lastName: `Doe (${id})`,
+          desc: 'resolved'
+        }))).pipe(delay(500));
+      },
+      retrieve: (term, page) => {
+        console.info(`Retrieving data... ("${term}", ${page})`);
+        return term === 'no'
+          ? of({ last: true, content: [], totalElements: 0 })
+          : of({
+            last: false,
+            totalElements: 10000,
+            content: Array.from({ length: 10 }, (_, i) => ({
+              id: '' + (i + page * 10),
+              firstName: 'John',
+              lastName: `Doe (${i + page * 10})`,
+              desc: `"${term}": page ${page}`
+            }))
+          }).pipe(delay(500));
+      },
+      render: (user) => ({
+        label: `${user.firstName} ${user.lastName}`,
+        description: user.desc,
+        avatar: {
+          src: `https://picsum.photos/id/${Math.floor(Math.random() * 100)}/200`,
+          round: true
+        }
+      })
+    });
+    (_c = this.singleSelect) === null || _c === void 0 ? void 0 : _c.connect({
       resolve: (ids) => {
         console.info(`Resolving data... (${ids.join(', ')})`);
         return of(ids.map(id => countries.find(value => value.id === id))).pipe(delay(500));
@@ -13388,9 +13430,37 @@ const CatSelectRemoteTest = class {
         description: country.capital || 'No capital'
       })
     });
+    (_d = this.singleSelectAvatar) === null || _d === void 0 ? void 0 : _d.connect({
+      resolve: (ids) => {
+        console.info(`Resolving data... (${ids.join(', ')})`);
+        return of(ids.map(id => countries.find(value => value.id === id))).pipe(delay(500));
+      },
+      retrieve: (term, page) => {
+        console.info(`Retrieving data... ("${term}", ${page})`);
+        const filter = countries.filter(value => {
+          var _a;
+          return value.country.toLowerCase().indexOf(term.toLowerCase()) === 0 ||
+            ((_a = value.capital) === null || _a === void 0 ? void 0 : _a.toLowerCase().indexOf(term.toLowerCase())) === 0;
+        });
+        const slice = filter.slice(page * 10, page * 10 + 10);
+        return of({
+          last: slice.length < 10,
+          totalElements: filter.length,
+          content: slice
+        }).pipe(delay(500));
+      },
+      render: (country) => ({
+        label: country.country,
+        description: country.capital || 'No capital',
+        avatar: {
+          src: `https://picsum.photos/id/${Math.floor(Math.random() * 100)}/200`,
+          round: true
+        }
+      })
+    });
   }
   render() {
-    return (h(Host, { style: { display: 'flex', gap: '0.5rem', flexDirection: 'column' } }, h("cat-select-remote", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: e => console.log('Multiple', e), multiple: true, clearable: true }, h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select-remote", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), value: '1', placeholder: "Search for a country or capital", onCatChange: e => console.log('Single', e), clearable: true })));
+    return (h(Host, { style: { display: 'flex', flexDirection: 'column' } }, h("cat-select-remote", { label: "Multiple Select", hint: "This is a hint!", ref: el => (this.multipleSelect = el), value: ['1'], placeholder: "Hello World", onCatChange: e => console.log('Multiple', e), onCatBlur: e => console.log('Multiple blur', e), multiple: true, clearable: true }, h("span", { slot: "hint" }, "Searching for \"no\" -", '>', " no options are returned!")), h("cat-select-remote", { label: "Multiple with img", ref: el => (this.multipleSelectAvatar = el), value: ['1'], placeholder: "Hello World", multiple: true, clearable: true }), h("cat-select-remote", { label: "Single Select", hint: "This is a hint!", ref: el => (this.singleSelect = el), value: '1', placeholder: "Search for a country or capital", onCatChange: e => console.log('Single', e), onCatBlur: e => console.log('Single blur', e), clearable: true }), h("cat-select-remote", { label: "Single with img", ref: el => (this.singleSelectAvatar = el), value: '1', placeholder: "Search for a country or capital", clearable: true })));
   }
 };
 const countries = [