@haiilo/catalyst 0.14.2 → 0.15.1

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

@@ -0,0 +1,982 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as autoUpdate, c as computePosition, o as offset } from './floating-ui.dom.esm.js';
+import { C as CatI18nRegistry } from './cat-i18n-registry.js';
+import { l as loglevel } from './loglevel.js';
+import { C as CatFormHint } from './cat-form-hint.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 { 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);
+}
+
+const EmptyError = createErrorClass((_super) => function EmptyErrorImpl() {
+    _super(this);
+    this.name = 'EmptyError';
+    this.message = 'no elements in sequence';
+});
+
+function isValidDate(value) {
+    return value instanceof Date && !isNaN(value);
+}
+
+function concatAll() {
+    return mergeAll(1);
+}
+
+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;
+        let syncUnsub = false;
+        let handledResult;
+        innerSub = source.subscribe(createOperatorSubscriber(subscriber, undefined, undefined, (err) => {
+            handledResult = innerFrom(selector(err, catchError(selector)(source)));
+            if (innerSub) {
+                innerSub.unsubscribe();
+                innerSub = null;
+                handledResult.subscribe(subscriber);
+            }
+            else {
+                syncUnsub = true;
+            }
+        }));
+        if (syncUnsub) {
+            innerSub.unsubscribe();
+            innerSub = null;
+            handledResult.subscribe(subscriber);
+        }
+    });
+}
+
+function scanInternals(accumulator, seed, hasSeed, emitOnNext, emitBeforeComplete) {
+    return (source, subscriber) => {
+        let hasState = hasSeed;
+        let state = seed;
+        let index = 0;
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            const i = index++;
+            state = hasState
+                ?
+                    accumulator(state, value, i)
+                :
+                    ((hasState = true), value);
+            emitOnNext && subscriber.next(state);
+        }, emitBeforeComplete &&
+            (() => {
+                hasState && subscriber.next(state);
+                subscriber.complete();
+            })));
+    };
+}
+
+function debounce(durationSelector) {
+    return operate((source, subscriber) => {
+        let hasValue = false;
+        let lastValue = null;
+        let durationSubscriber = null;
+        const emit = () => {
+            durationSubscriber === null || durationSubscriber === void 0 ? void 0 : durationSubscriber.unsubscribe();
+            durationSubscriber = null;
+            if (hasValue) {
+                hasValue = false;
+                const value = lastValue;
+                lastValue = null;
+                subscriber.next(value);
+            }
+        };
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            durationSubscriber === null || durationSubscriber === void 0 ? void 0 : durationSubscriber.unsubscribe();
+            hasValue = true;
+            lastValue = value;
+            durationSubscriber = createOperatorSubscriber(subscriber, emit, noop);
+            innerFrom(durationSelector(value)).subscribe(durationSubscriber);
+        }, () => {
+            emit();
+            subscriber.complete();
+        }, undefined, () => {
+            lastValue = durationSubscriber = null;
+        }));
+    });
+}
+
+function defaultIfEmpty(defaultValue) {
+    return operate((source, subscriber) => {
+        let hasValue = false;
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            hasValue = true;
+            subscriber.next(value);
+        }, () => {
+            if (!hasValue) {
+                subscriber.next(defaultValue);
+            }
+            subscriber.complete();
+        }));
+    });
+}
+
+function take(count) {
+    return count <= 0
+        ?
+            () => EMPTY
+        : operate((source, subscriber) => {
+            let seen = 0;
+            source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+                if (++seen <= count) {
+                    subscriber.next(value);
+                    if (count <= seen) {
+                        subscriber.complete();
+                    }
+                }
+            }));
+        });
+}
+
+function throwIfEmpty(errorFactory = defaultErrorFactory) {
+    return operate((source, subscriber) => {
+        let hasValue = false;
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            hasValue = true;
+            subscriber.next(value);
+        }, () => (hasValue ? subscriber.complete() : subscriber.error(errorFactory()))));
+    });
+}
+function defaultErrorFactory() {
+    return new EmptyError();
+}
+
+function first(predicate, defaultValue) {
+    const hasDefaultValue = arguments.length >= 2;
+    return (source) => source.pipe(predicate ? filter((v, i) => predicate(v, i, source)) : identity, take(1), hasDefaultValue ? defaultIfEmpty(defaultValue) : throwIfEmpty(() => new EmptyError()));
+}
+
+function scan(accumulator, seed) {
+    return operate(scanInternals(accumulator, seed, arguments.length >= 2, true));
+}
+
+function startWith(...values) {
+    const scheduler = popScheduler(values);
+    return operate((source, subscriber) => {
+        (scheduler ? concat(values, source, scheduler) : concat(values, source)).subscribe(subscriber);
+    });
+}
+
+function switchMap(project, resultSelector) {
+    return operate((source, subscriber) => {
+        let innerSubscriber = null;
+        let index = 0;
+        let isComplete = false;
+        const checkComplete = () => isComplete && !innerSubscriber && subscriber.complete();
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            innerSubscriber === null || innerSubscriber === void 0 ? void 0 : innerSubscriber.unsubscribe();
+            let innerIndex = 0;
+            const outerIndex = index++;
+            innerFrom(project(value, outerIndex)).subscribe((innerSubscriber = createOperatorSubscriber(subscriber, (innerValue) => subscriber.next(resultSelector ? resultSelector(value, innerValue, outerIndex, innerIndex++) : innerValue), () => {
+                innerSubscriber = null;
+                checkComplete();
+            })));
+        }, () => {
+            isComplete = true;
+            checkComplete();
+        }));
+    });
+}
+
+function takeWhile(predicate, inclusive = false) {
+    return operate((source, subscriber) => {
+        let index = 0;
+        source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+            const result = predicate(value, index++);
+            (result || inclusive) && subscriber.next(value);
+            !result && subscriber.complete();
+        }));
+    });
+}
+
+function tap(observerOrNext, error, complete) {
+    const tapObserver = isFunction(observerOrNext) || error || complete
+        ?
+            { next: observerOrNext, error, complete }
+        : observerOrNext;
+    return tapObserver
+        ? operate((source, subscriber) => {
+            var _a;
+            (_a = tapObserver.subscribe) === null || _a === void 0 ? void 0 : _a.call(tapObserver);
+            let isUnsub = true;
+            source.subscribe(createOperatorSubscriber(subscriber, (value) => {
+                var _a;
+                (_a = tapObserver.next) === null || _a === void 0 ? void 0 : _a.call(tapObserver, value);
+                subscriber.next(value);
+            }, () => {
+                var _a;
+                isUnsub = false;
+                (_a = tapObserver.complete) === null || _a === void 0 ? void 0 : _a.call(tapObserver);
+                subscriber.complete();
+            }, (err) => {
+                var _a;
+                isUnsub = false;
+                (_a = tapObserver.error) === null || _a === void 0 ? void 0 : _a.call(tapObserver, err);
+                subscriber.error(err);
+            }, () => {
+                var _a, _b;
+                if (isUnsub) {
+                    (_a = tapObserver.unsubscribe) === null || _a === void 0 ? void 0 : _a.call(tapObserver);
+                }
+                (_b = tapObserver.finalize) === null || _b === void 0 ? void 0 : _b.call(tapObserver);
+            }));
+        })
+        :
+            identity;
+}
+
+var GHOST_ELEMENT_ID = '__autosizeInputGhost';
+
+var characterEntities = {
+  ' ': 'nbsp',
+  '<': 'lt',
+  '>': 'gt'
+};
+function mapSpecialCharacterToCharacterEntity (specialCharacter) {
+  return '&' + characterEntities[specialCharacter] + ';'
+}
+function escapeSpecialCharacters (string) {
+  return string.replace(/\s|<|>/g, mapSpecialCharacterToCharacterEntity)
+}
+
+// Create `ghostElement`, with inline styles to hide it and ensure that the text is all
+// on a single line.
+function createGhostElement () {
+  var ghostElement = document.createElement('div');
+  ghostElement.id = GHOST_ELEMENT_ID;
+  ghostElement.style.cssText =
+    'display:inline-block;height:0;overflow:hidden;position:absolute;top:0;visibility:hidden;white-space:nowrap;';
+  document.body.appendChild(ghostElement);
+  return ghostElement
+}
+
+var autosizeInput = function (element, options) {
+  var elementStyle = window.getComputedStyle(element);
+  // prettier-ignore
+  var elementCssText = 'box-sizing:' + elementStyle.boxSizing +
+                      ';border-left:' + elementStyle.borderLeftWidth + ' solid red' +
+                      ';border-right:' + elementStyle.borderRightWidth + ' solid red' +
+                      ';font-family:' + elementStyle.fontFamily +
+                      ';font-feature-settings:' + elementStyle.fontFeatureSettings +
+                      ';font-kerning:' + elementStyle.fontKerning +
+                      ';font-size:' + elementStyle.fontSize +
+                      ';font-stretch:' + elementStyle.fontStretch +
+                      ';font-style:' + elementStyle.fontStyle +
+                      ';font-variant:' + elementStyle.fontVariant +
+                      ';font-variant-caps:' + elementStyle.fontVariantCaps +
+                      ';font-variant-ligatures:' + elementStyle.fontVariantLigatures +
+                      ';font-variant-numeric:' + elementStyle.fontVariantNumeric +
+                      ';font-weight:' + elementStyle.fontWeight +
+                      ';letter-spacing:' + elementStyle.letterSpacing +
+                      ';margin-left:' + elementStyle.marginLeft +
+                      ';margin-right:' + elementStyle.marginRight +
+                      ';padding-left:' + elementStyle.paddingLeft +
+                      ';padding-right:' + elementStyle.paddingRight +
+                      ';text-indent:' + elementStyle.textIndent +
+                      ';text-transform:' + elementStyle.textTransform;
+
+  // Assigns an appropriate width to the given `element` based on its contents.
+  function setWidth () {
+    var string = element.value || element.getAttribute('placeholder') || '';
+    // Check if the `ghostElement` exists. If no, create it.
+    var ghostElement =
+      document.getElementById(GHOST_ELEMENT_ID) || createGhostElement();
+    // Copy all width-affecting styles to the `ghostElement`.
+    ghostElement.style.cssText += elementCssText;
+    ghostElement.innerHTML = escapeSpecialCharacters(string);
+    // Copy the width of `ghostElement` to `element`.
+    var width = window.getComputedStyle(ghostElement).width;
+    element.style.width = width;
+    return width
+  }
+
+  element.addEventListener('input', setWidth);
+
+  var width = setWidth();
+
+  // Set `min-width` only if `options.minWidth` was set, and only if the initial
+  // width is non-zero.
+  if (options && options.minWidth && width !== '0px') {
+    element.style.minWidth = width;
+  }
+
+  // Return a function for unbinding the event listener and removing the `ghostElement`.
+  return function () {
+    element.removeEventListener('input', setWidth);
+    var ghostElement = document.getElementById(GHOST_ELEMENT_ID);
+    if (ghostElement) {
+      ghostElement.parentNode.removeChild(ghostElement);
+    }
+  }
+};
+
+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 INIT_STATE = {
+  term: '',
+  isOpen: false,
+  isLoading: false,
+  isResolving: false,
+  options: [],
+  selection: [],
+  activeOptionIndex: -1,
+  activeSelectionIndex: -1
+};
+let nextUniqueId = 0;
+const CatSelectRemote = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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++}`;
+    this.term$ = new Subject();
+    this.more$ = new Subject();
+    this.state = INIT_STATE;
+    this.hasSlottedLabel = false;
+    /**
+     * Enable multiple selection.
+     */
+    this.multiple = false;
+    /**
+     * The debounce time for the search.
+     */
+    this.debounce = 250;
+    /**
+     * The placement of the select.
+     */
+    this.placement = 'bottom-start';
+    /**
+     * Whether the select is disabled.
+     */
+    this.disabled = false;
+    /**
+     * The label for the select.
+     */
+    this.label = '';
+    /**
+     * The name of the form control. Submitted with the form as part of a name/value pair.
+     */
+    this.name = '';
+    /**
+     * Visually hide the label, but still show it to assistive technologies like screen readers.
+     */
+    this.labelHidden = false;
+    /**
+     * A value is required or must be check for the form to be submittable.
+     */
+    this.required = false;
+    /**
+     * Whether the select should show a clear button.
+     */
+    this.clearable = false;
+  }
+  onConnectorChange(connector) {
+    this.reset(connector);
+    this.resolve();
+  }
+  onStateChange(newState, oldState) {
+    var _a;
+    const changed = (key) => newState[key] !== oldState[key];
+    if (changed('activeOptionIndex')) {
+      if (this.state.activeOptionIndex >= 0) {
+        const option = (_a = this.dropdown) === null || _a === void 0 ? void 0 : _a.querySelector(`#select-${this.id}-option-${this.state.activeOptionIndex}`);
+        option === null || option === void 0 ? void 0 : option.scrollIntoView({ block: 'nearest' });
+      }
+    }
+    if (changed('selection')) {
+      if (!this.multiple && this.state.selection.length) {
+        this.hide();
+      }
+      const idsSelected = this.state.selection.map(item => item.item.id);
+      if (this.multiple) {
+        this.value = idsSelected;
+      }
+      else {
+        this.value = idsSelected.length ? idsSelected[0] : '';
+      }
+      this.catChange.emit();
+    }
+  }
+  componentDidLoad() {
+    if (this.input) {
+      autosizeInput(this.input);
+    }
+    if (this.trigger && this.dropdown) {
+      autoUpdate(this.trigger, this.dropdown, () => this.update());
+    }
+  }
+  componentWillRender() {
+    this.hasSlottedLabel = !!this.hostElement.querySelector('[slot="label"]');
+    if (!this.label && !this.hasSlottedLabel) {
+      loglevel.error('[A11y] Missing ARIA label on select', this);
+    }
+  }
+  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;
+    const isInputFocused = ((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.input;
+    if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+      this.onArrowKeyDown(event);
+    }
+    else if (['Enter', ' '].includes(event.key)) {
+      if (isInputFocused && this.state.activeOptionIndex >= 0) {
+        event.preventDefault();
+        if (this.multiple) {
+          this.toggle(this.state.options[this.state.activeOptionIndex]);
+        }
+        else {
+          this.select(this.state.options[this.state.activeOptionIndex]);
+        }
+      }
+    }
+    else if (event.key === 'Escape') {
+      this.hide();
+    }
+    else if (event.key === 'Backspace' || event.key === 'Delete') {
+      (_b = this.input) === null || _b === void 0 ? void 0 : _b.focus();
+      if (!this.multiple || !this.state.term || (((_c = this.input) === null || _c === void 0 ? void 0 : _c.selectionStart) === 0 && event.key === 'Backspace')) {
+        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') {
+      (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.setAttribute('tabindex', '-1');
+      if (this.multiple) {
+        this.patchState({ activeSelectionIndex: -1, activeOptionIndex: -1 });
+      }
+      else if (this.state.activeOptionIndex >= 0) {
+        this.select(this.state.options[this.state.activeOptionIndex]);
+      }
+    }
+    else if (event.key.length === 1) {
+      (_e = this.input) === null || _e === void 0 ? void 0 : _e.focus();
+    }
+  }
+  onKeyUp(event) {
+    var _a, _b, _c, _d, _e;
+    if (event.key === 'Tab' && !event.shiftKey) {
+      ((_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) === this.trigger && ((_b = this.input) === null || _b === void 0 ? void 0 : _b.focus());
+      if (((_c = this.hostElement.shadowRoot) === null || _c === void 0 ? void 0 : _c.activeElement) === this.input) {
+        this.show();
+      }
+    }
+    else if (event.key === 'Tab' && event.shiftKey) {
+      const clearButton = (_d = this.trigger) === null || _d === void 0 ? void 0 : _d.querySelector(`#select-clear-btn-${this.id}`);
+      if (clearButton) {
+        ((_e = this.hostElement.shadowRoot) === null || _e === void 0 ? void 0 : _e.activeElement) === clearButton && this.show();
+      }
+      else {
+        this.show();
+      }
+    }
+  }
+  async connect(connector) {
+    var _a;
+    this.connector = connector;
+    let number$;
+    (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    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 => ({
+        item,
+        render: this.connectorSafe.render(item)
+      }))
+    }));
+  }
+  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: {
+        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) &&
+      !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: {
+        '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
+      ? 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'))))))));
+  }
+  get hintSection() {
+    const hasSlottedHint = !!this.hostElement.querySelector('[slot="hint"]');
+    return ((this.hint || hasSlottedHint) && (h(CatFormHint, { hint: this.hint, slottedHint: hasSlottedHint && h("slot", { name: "hint" }) })));
+  }
+  get connectorSafe() {
+    if (this.connector) {
+      return this.connector;
+    }
+    throw new Error('CatSelectRemoteConnector not set');
+  }
+  resolve() {
+    var _a;
+    this.patchState({ isResolving: true });
+    let ids;
+    if (this.multiple) {
+      ids = this.value;
+    }
+    else {
+      ids = [this.value];
+    }
+    const data$ = ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) ? this.connectorSafe.resolve(ids).pipe(first()) : of([]);
+    data$.pipe(catchError(() => of([]))).subscribe(items => this.patchState({
+      isResolving: false,
+      selection: items === null || items === void 0 ? void 0 : items.map(item => ({ item, render: this.connectorSafe.render(item) })),
+      term: !this.multiple && items.length ? this.connectorSafe.render(items[0]).label : ''
+    }));
+  }
+  show() {
+    var _a;
+    if (!this.state.isOpen) {
+      this.patchState({ isOpen: true });
+      this.catOpen.emit();
+      this.term$.next(this.state.term);
+      (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.remove('select-input-transparent-caret');
+    }
+  }
+  hide() {
+    if (this.state.isOpen) {
+      this.patchState({ isOpen: false, activeOptionIndex: -1 });
+      this.catClose.emit();
+    }
+  }
+  search(term) {
+    this.patchState({ term, activeOptionIndex: -1, activeSelectionIndex: -1 });
+    this.term$.next(term);
+  }
+  isSelected(id) {
+    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) {
+        newSelection = [...this.state.selection, item];
+      }
+      else {
+        newSelection = [item];
+        this.search(item.render.label);
+      }
+      this.patchState({ selection: newSelection });
+    }
+    if (!this.multiple) {
+      this.hide();
+      (_a = this.input) === null || _a === void 0 ? void 0 : _a.classList.add('select-input-transparent-caret');
+    }
+  }
+  deselect(id) {
+    if (this.isSelected(id)) {
+      this.patchState({
+        selection: this.state.selection.filter(item => item.item.id !== id),
+        activeSelectionIndex: -1
+      });
+    }
+  }
+  toggle(item) {
+    this.isSelected(item.item.id) ? this.deselect(item.item.id) : this.select(item);
+  }
+  clear() {
+    if (this.input && this.state.term) {
+      this.patchState({ selection: [], options: [], term: '', activeOptionIndex: -1 });
+      this.term$.next('');
+      this.input.value = '';
+    }
+    else {
+      this.patchState({ selection: [] });
+    }
+  }
+  reset(connector) {
+    var _a;
+    this.connector = connector !== null && connector !== void 0 ? connector : this.connector;
+    (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    this.subscription = undefined;
+    this.state = INIT_STATE;
+  }
+  onClick(event) {
+    var _a, _b;
+    const elem = event.target;
+    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('tabindex', '0');
+    (_b = this.input) === null || _b === void 0 ? void 0 : _b.focus();
+    if (elem === this.trigger ||
+      elem === this.input ||
+      elem.classList.contains('select-btn') ||
+      elem.nodeName === 'SPAN') {
+      this.state.isOpen ? this.hide() : this.show();
+    }
+  }
+  onInput() {
+    var _a;
+    this.search(((_a = this.input) === null || _a === void 0 ? void 0 : _a.value) || '');
+    this.show();
+  }
+  update() {
+    if (this.trigger && this.dropdown) {
+      computePosition(this.trigger, this.dropdown, {
+        placement: this.placement,
+        middleware: [offset(CatSelectRemote.DROPDOWN_OFFSET)]
+      }).then(({ x, y }) => {
+        if (this.dropdown) {
+          Object.assign(this.dropdown.style, {
+            left: `${x}px`,
+            top: `${y}px`
+          });
+        }
+      });
+    }
+  }
+  patchState(update) {
+    this.state = Object.assign(Object.assign({}, this.state), update);
+  }
+  isPillboxActive() {
+    return this.state.activeSelectionIndex >= 0;
+  }
+  get activeDescendant() {
+    let activeDescendant = undefined;
+    if (this.state.activeOptionIndex >= 0) {
+      activeDescendant = `select-${this.id}-option-${this.state.activeOptionIndex}`;
+    }
+    else if (this.state.activeSelectionIndex >= 0) {
+      activeDescendant = `select-${this.id}-selection-${this.state.activeSelectionIndex}`;
+    }
+    return activeDescendant;
+  }
+  onArrowKeyDown(event) {
+    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) {
+        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) {
+        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 });
+      }
+    }
+    if (preventDefault) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "connector": ["onConnectorChange"],
+    "state": ["onStateChange"]
+  }; }
+  static get style() { return catSelectRemoteCss; }
+}, [1, "cat-select-remote", {
+    "multiple": [4],
+    "debounce": [2],
+    "placement": [1],
+    "value": [1025],
+    "disabled": [4],
+    "placeholder": [1],
+    "hint": [1],
+    "label": [1],
+    "name": [1],
+    "labelHidden": [4, "label-hidden"],
+    "required": [4],
+    "clearable": [4],
+    "connector": [32],
+    "state": [32],
+    "hasSlottedLabel": [32],
+    "connect": [64]
+  }, [[0, "blur", "onBlur"], [0, "keydown", "onKeyDown"], [0, "keyup", "onKeyUp"]]]);
+CatSelectRemote.SKELETON_COUNT = 4;
+CatSelectRemote.DROPDOWN_OFFSET = 4;
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-select-remote", "cat-button", "cat-checkbox", "cat-icon", "cat-scrollable", "cat-skeleton", "cat-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-select-remote":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatSelectRemote);
+      }
+      break;
+    case "cat-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "cat-checkbox":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "cat-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "cat-scrollable":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "cat-skeleton":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "cat-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { CatSelectRemote as C, asyncScheduler as a, timer as b, concat as c, defineCustomElement as d, of as o, take as t };
+
+//# sourceMappingURL=cat-select-remote2.js.map