@haiilo/catalyst 3.0.0 → 3.0.2

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

@@ -4,8 +4,8 @@ import { d as defineCustomElement$9 } from './cat-button2.js';
 import { d as defineCustomElement$8 } from './cat-checkbox2.js';
 import { d as defineCustomElement$7 } from './cat-dropdown2.js';
 import { d as defineCustomElement$6 } from './cat-icon2.js';
-import { o as operate, c as createOperatorSubscriber, n as noop, m as map, a as mergeMap, d as defineCustomElement$5 } from './cat-scrollable2.js';
-import { c as concat, t as take, a as asyncScheduler, b as timer, o as of, d as defineCustomElement$4 } from './cat-select2.js';
+import { o as operate, c as createOperatorSubscriber, n as noop, m as map, a as mergeMap, b as asyncScheduler, t as timer, d as defineCustomElement$5 } from './cat-scrollable2.js';
+import { c as concat, t as take, o as of, d as defineCustomElement$4 } from './cat-select2.js';
 import { d as defineCustomElement$3 } from './cat-skeleton2.js';
 import { d as defineCustomElement$2 } from './cat-spinner2.js';
 

package/dist/components/cat-select2.js

@@ -7,161 +7,10 @@ import { d as defineCustomElement$7 } from './cat-avatar2.js';
 import { d as defineCustomElement$6 } from './cat-button2.js';
 import { d as defineCustomElement$5 } from './cat-checkbox2.js';
 import { d as defineCustomElement$4 } from './cat-icon2.js';
-import { S as Subscription, b as arrRemove, f as from, p as popScheduler, e as createErrorClass, g as mergeAll, O as Observable, i as isScheduler, o as operate, c as createOperatorSubscriber, h as innerFrom, n as noop, E as EMPTY, j as filter, k as identity, l as isFunction, q as Subject, r as distinctUntilChanged, d as defineCustomElement$3 } from './cat-scrollable2.js';
+import { f as from, p as popScheduler, e as createErrorClass, g as mergeAll, o as operate, c as createOperatorSubscriber, i as innerFrom, n as noop, E as EMPTY, h as filter, j as identity, k as isFunction, S as Subject, l as distinctUntilChanged, d as defineCustomElement$3, t as timer } from './cat-scrollable2.js';
 import { d as defineCustomElement$2 } from './cat-skeleton2.js';
 import { d as defineCustomElement$1 } from './cat-spinner2.js';
 
-const dateTimestampProvider = {
-    now() {
-        return (dateTimestampProvider.delegate || Date).now();
-    },
-    delegate: undefined,
-};
-
-class Action extends Subscription {
-    constructor(scheduler, work) {
-        super();
-    }
-    schedule(state, delay = 0) {
-        return this;
-    }
-}
-
-const intervalProvider = {
-    setInterval(handler, timeout, ...args) {
-        const { delegate } = intervalProvider;
-        if (delegate === null || delegate === void 0 ? void 0 : delegate.setInterval) {
-            return delegate.setInterval(handler, timeout, ...args);
-        }
-        return setInterval(handler, timeout, ...args);
-    },
-    clearInterval(handle) {
-        const { delegate } = intervalProvider;
-        return ((delegate === null || delegate === void 0 ? void 0 : delegate.clearInterval) || clearInterval)(handle);
-    },
-    delegate: undefined,
-};
-
-class AsyncAction extends Action {
-    constructor(scheduler, work) {
-        super(scheduler, work);
-        this.scheduler = scheduler;
-        this.work = work;
-        this.pending = false;
-    }
-    schedule(state, delay = 0) {
-        if (this.closed) {
-            return this;
-        }
-        this.state = state;
-        const id = this.id;
-        const scheduler = this.scheduler;
-        if (id != null) {
-            this.id = this.recycleAsyncId(scheduler, id, delay);
-        }
-        this.pending = true;
-        this.delay = delay;
-        this.id = this.id || this.requestAsyncId(scheduler, this.id, delay);
-        return this;
-    }
-    requestAsyncId(scheduler, _id, delay = 0) {
-        return intervalProvider.setInterval(scheduler.flush.bind(scheduler, this), delay);
-    }
-    recycleAsyncId(_scheduler, id, delay = 0) {
-        if (delay != null && this.delay === delay && this.pending === false) {
-            return id;
-        }
-        intervalProvider.clearInterval(id);
-        return undefined;
-    }
-    execute(state, delay) {
-        if (this.closed) {
-            return new Error('executing a cancelled action');
-        }
-        this.pending = false;
-        const error = this._execute(state, delay);
-        if (error) {
-            return error;
-        }
-        else if (this.pending === false && this.id != null) {
-            this.id = this.recycleAsyncId(this.scheduler, this.id, null);
-        }
-    }
-    _execute(state, _delay) {
-        let errored = false;
-        let errorValue;
-        try {
-            this.work(state);
-        }
-        catch (e) {
-            errored = true;
-            errorValue = e ? e : new Error('Scheduled action threw falsy error');
-        }
-        if (errored) {
-            this.unsubscribe();
-            return errorValue;
-        }
-    }
-    unsubscribe() {
-        if (!this.closed) {
-            const { id, scheduler } = this;
-            const { actions } = scheduler;
-            this.work = this.state = this.scheduler = null;
-            this.pending = false;
-            arrRemove(actions, this);
-            if (id != null) {
-                this.id = this.recycleAsyncId(scheduler, id, null);
-            }
-            this.delay = null;
-            super.unsubscribe();
-        }
-    }
-}
-
-class Scheduler {
-    constructor(schedulerActionCtor, now = Scheduler.now) {
-        this.schedulerActionCtor = schedulerActionCtor;
-        this.now = now;
-    }
-    schedule(work, delay = 0, state) {
-        return new this.schedulerActionCtor(this, work).schedule(state, delay);
-    }
-}
-Scheduler.now = dateTimestampProvider.now;
-
-class AsyncScheduler extends Scheduler {
-    constructor(SchedulerAction, now = Scheduler.now) {
-        super(SchedulerAction, now);
-        this.actions = [];
-        this._active = false;
-        this._scheduled = undefined;
-    }
-    flush(action) {
-        const { actions } = this;
-        if (this._active) {
-            actions.push(action);
-            return;
-        }
-        let error;
-        this._active = true;
-        do {
-            if ((error = action.execute(action.state, action.delay))) {
-                break;
-            }
-        } while ((action = actions.shift()));
-        this._active = false;
-        if (error) {
-            while ((action = actions.shift())) {
-                action.unsubscribe();
-            }
-            throw error;
-        }
-    }
-}
-
-const asyncScheduler = new AsyncScheduler(AsyncAction);
-const async = asyncScheduler;
-
 function of(...args) {
     const scheduler = popScheduler(args);
     return from(args, scheduler);
@@ -173,10 +22,6 @@ const EmptyError = createErrorClass((_super) => function EmptyErrorImpl() {
     this.message = 'no elements in sequence';
 });
 
-function isValidDate(value) {
-    return value instanceof Date && !isNaN(value);
-}
-
 function concatAll() {
     return mergeAll(1);
 }
@@ -185,36 +30,6 @@ function concat(...args) {
     return concatAll()(from(args, popScheduler(args)));
 }
 
-function timer(dueTime = 0, intervalOrScheduler, scheduler = async) {
-    let intervalDuration = -1;
-    if (intervalOrScheduler != null) {
-        if (isScheduler(intervalOrScheduler)) {
-            scheduler = intervalOrScheduler;
-        }
-        else {
-            intervalDuration = intervalOrScheduler;
-        }
-    }
-    return new Observable((subscriber) => {
-        let due = isValidDate(dueTime) ? +dueTime - scheduler.now() : dueTime;
-        if (due < 0) {
-            due = 0;
-        }
-        let n = 0;
-        return scheduler.schedule(function () {
-            if (!subscriber.closed) {
-                subscriber.next(n++);
-                if (0 <= intervalDuration) {
-                    this.schedule(undefined, intervalDuration);
-                }
-                else {
-                    subscriber.complete();
-                }
-            }
-        }, due);
-    });
-}
-
 function catchError(selector) {
     return operate((source, subscriber) => {
         let innerSub = null;
@@ -769,11 +584,14 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     });
   }
   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 && this.requiredMarker.startsWith('optional') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), 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 ? 'true' : false, "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: {
-        pill: true,
-        'select-no-open': true,
-        'select-option-active': this.state.activeSelectionIndex === i
-      }, 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: catI18nRegistry.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) &&
+    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 && this.requiredMarker.startsWith('optional') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker.startsWith('required') && (h("span", { class: "input-optional", "aria-hidden": "true" }, "(", catI18nRegistry.t('input.required'), ")"))))), 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 ? 'true' : false, "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) => {
+      var _a;
+      return (h("span", { 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}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, initials: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "16-cross", iconOnly: true, a11yLabel: catI18nRegistry.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: catI18nRegistry.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 ? catI18nRegistry.t('select.close') : catI18nRegistry.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
@@ -783,6 +601,7 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   get optionsList() {
     return this.state.options.map((item, i) => {
+      var _a, _b;
       const isTagOption = this.tags && item.item.id === `select-${this.id}-option-tag`;
       const isOptionSelected = this.isSelected(item.item.id) || (this.tags && this.isTagSelected(item.render.label));
       const getLabel = () => {
@@ -794,11 +613,11 @@ const CatSelect = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": isOptionSelected ? 'true' : 'false' }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: isOptionSelected, 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: {
+        } }, 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: (_a = item.render.avatar.initials) !== null && _a !== void 0 ? _a : '' })) : 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))))));
+        }, 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: (_b = item.render.avatar.initials) !== null && _b !== void 0 ? _b : '' })) : 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() {
@@ -1170,6 +989,6 @@ function defineCustomElement() {
   } });
 }
 
-export { CatSelect as C, asyncScheduler as a, timer as b, concat as c, defineCustomElement as d, of as o, take as t };
+export { CatSelect as C, concat as c, defineCustomElement as d, of as o, take as t };
 
 //# sourceMappingURL=cat-select2.js.map