@triptease/tt-combobox 5.7.0 → 5.7.2

package/dist/cjs/src/TtCombobox.js

@@ -0,0 +1,507 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtCombobox = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const if_defined_js_1 = require("lit/directives/if-defined.js");
+const repeat_js_1 = require("lit/directives/repeat.js");
+const unsafe_html_js_1 = require("lit/directives/unsafe-html.js");
+const unsafe_svg_js_1 = require("lit/directives/unsafe-svg.js");
+const guard_js_1 = require("lit/directives/guard.js");
+const icons_1 = require("@triptease/icons");
+const styles_js_1 = require("./styles.js");
+class TtCombobox extends lit_1.LitElement {
+    get form() {
+        return this.internals.form;
+    }
+    get _isAllSelected() {
+        return (Boolean(this._visibleOptionsNotSelectAll.length) &&
+            Array.from(this._visibleOptionsNotSelectAll).every((option) => this.value.includes(option.value)));
+    }
+    get _selectedVisibleOptions() {
+        return Array.from(this._visibleOptions).filter((option) => this.value.includes(option.value));
+    }
+    get _selectedOptions() {
+        return Array.from(this._visibleOptionsNotSelectAll).filter((option) => this.value.includes(option.value));
+    }
+    constructor() {
+        super();
+        this.multiselect = false;
+        this.disabled = false;
+        this.invalid = false;
+        this.displaySelectAll = false;
+        this.required = false;
+        this.name = '';
+        this.ariaLabelledby = lit_1.nothing;
+        this.hideCaret = false;
+        this.openUpward = false;
+        this._activeOption = -1;
+        this._expanded = false;
+        this._filter = '';
+        this.value = [];
+        this._slotObserver = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes') {
+                    this.requestUpdate('options');
+                }
+            });
+        });
+        this._valueChanged = () => {
+            this._selectableOptions.forEach((option) => {
+                if (this.value.includes(option.value)) {
+                    this._checkOption(option);
+                }
+                else {
+                    this._uncheckOption(option);
+                }
+            });
+            this.internals.setFormValue(JSON.stringify(this.value));
+        };
+        this._listenForOptionChange = () => {
+            this.options.forEach((option) => {
+                this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });
+            });
+        };
+        this._selectAll = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            // If filtering, and all visible options are selected, deselect only visible options
+            // Else if filtering, select all visible options
+            if (this._filter !== '' && this._isAllSelected) {
+                const selectedVisibleValues = this._selectedVisibleOptions.map((option) => option.value);
+                this.value = this.value.filter((value) => !selectedVisibleValues.includes(value));
+            }
+            else if (this._filter !== '') {
+                this.value = Array.from(new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.value)]));
+            }
+            else if (this.value.length === this._selectableOptions.length) {
+                this.value = [];
+            }
+            else {
+                this.value = Array.from(this._selectableOptions).map((option) => option.value);
+            }
+        };
+        this._renderSelectAll = () => {
+            if (!this.multiselect || !this.displaySelectAll) {
+                return lit_1.nothing;
+            }
+            const id = `${this.id}-option-select-all`;
+            const active = this._getActiveOptionId() === id;
+            const selected = this._isAllSelected;
+            return (0, lit_1.html) `
+      <tt-option
+        id="${id}"
+        class="select-all"
+        ?selected=${selected}
+        ?active=${active}
+        include-checkbox
+        @click="${this._selectAll}"
+        exportparts="option, checkbox"
+        part="option"
+        value="select-all"
+        >Select all</tt-option
+      >
+    `;
+        };
+        this._renderChevron = () => (0, lit_1.html) `
+    <button
+      type="button"
+      aria-label="Expand"
+      @click="${this._onChevronClick}"
+      aria-expanded="${this._expanded}"
+      aria-controls="${this.id}-list"
+      tabindex="-1"
+      ?disabled=${this.disabled}
+      part="arrow"
+    >
+      ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.chevronDown)}
+    </button>
+  `;
+        this.internals = this.attachInternals();
+    }
+    _handleFocusOut(e) {
+        if (!this.shadowRoot.contains(e.relatedTarget)) {
+            this._expanded = false;
+        }
+        this._filter = '';
+    }
+    _onFocus() {
+        this._comboboxInput.focus();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('focus', this._onFocus);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('focus', this._onFocus);
+    }
+    firstUpdated(changedProperties) {
+        this.internals.setFormValue(JSON.stringify(this.value));
+        this._reportValidity();
+        this._listenForOptionChange();
+        super.firstUpdated(changedProperties);
+    }
+    update(changedProperties) {
+        if (changedProperties.has('value')) {
+            this._valueChanged();
+            if (changedProperties.get('value') !== undefined &&
+                JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {
+                this._dispatchSelectedOptions();
+                this._reportValidity();
+            }
+        }
+        if (changedProperties.has('_expanded') && changedProperties.get('_expanded') && !this._expanded) {
+            this.internals.states.add('interacted');
+        }
+        if (changedProperties.has('options')) {
+            this.updateComplete.then(() => {
+                const selectedAssignedOptions = Array.from(this.options).filter((option) => option.selected);
+                this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map((option) => option.value)]));
+                this._listenForOptionChange();
+            });
+        }
+        super.update(changedProperties);
+    }
+    _reportValidity() {
+        if (this.required && !this.value.length) {
+            const errorMessage = this.multiselect ? 'Please select at least one option' : 'Please select an option';
+            this.internals.setValidity({
+                valueMissing: true,
+            }, errorMessage, this._comboboxInput);
+            this.internals.states.add('--invalid');
+        }
+        else if (!this.internals.validity.valid) {
+            this.internals.setValidity({});
+            if (this.internals.states.has('--invalid')) {
+                this.internals.states.delete('--invalid');
+            }
+        }
+    }
+    get labels() {
+        return [...this.internals.labels];
+    }
+    get labelContent() {
+        if (this.ariaLabel !== null) {
+            return this.ariaLabel;
+        }
+        return this.labels.map((label) => label.innerText).join(', ');
+    }
+    _onKeyUp(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                if (!this._expanded) {
+                    this._expanded = true;
+                    this._activeOption = -1;
+                }
+                else {
+                    this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);
+                }
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                if (this._expanded) {
+                    this._activeOption = Math.max(0, this._activeOption - 1);
+                }
+                break;
+            case 'Escape':
+                event.preventDefault();
+                if (this._expanded) {
+                    this._expanded = false;
+                }
+                else if (this._filter !== '') {
+                    this._filter = '';
+                }
+                break;
+            case 'Enter':
+                event.preventDefault();
+                if (this._expanded) {
+                    this._visibleOptions[this._activeOption].click();
+                }
+                break;
+            default:
+                break;
+        }
+    }
+    _uncheckOption(option) {
+        if (option.dataset.deselectable !== 'true')
+            return;
+        option.setAttribute('aria-selected', 'false');
+        const checkbox = option.querySelector('input[type="checkbox"]');
+        if (checkbox) {
+            checkbox.checked = false;
+        }
+    }
+    _checkOption(option) {
+        if (!this.multiselect) {
+            this._selectableOptions.forEach((opt) => {
+                this._uncheckOption(opt);
+            });
+        }
+        option.setAttribute('aria-selected', 'true');
+        const checkbox = option.querySelector('input[type="checkbox"]');
+        if (checkbox) {
+            checkbox.checked = true;
+        }
+    }
+    _getActiveOptionId() {
+        if (this._activeOption === -1 || this._visibleOptions.length === 0) {
+            return undefined;
+        }
+        const option = this._visibleOptions[this._activeOption];
+        return option.id;
+    }
+    _onClick() {
+        this._expanded = !this._expanded;
+        if (this._expanded) {
+            this.shadowRoot?.querySelector('input[role="combobox"]')?.focus();
+        }
+    }
+    _onChevronClick() {
+        this.shadowRoot?.querySelector('input[role="combobox"]')?.focus();
+    }
+    _onClickOption(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        const option = event.currentTarget;
+        if (option.disabled)
+            return;
+        const selectedValue = option.value;
+        if (this.multiselect) {
+            if (this.value.includes(selectedValue)) {
+                this.value = this.value.filter((value) => value !== selectedValue);
+            }
+            else {
+                this.value = [...this.value, selectedValue];
+            }
+        }
+        else {
+            this.value = [selectedValue];
+            this._expanded = false;
+        }
+    }
+    _onInput(event) {
+        const input = event.target;
+        const filter = input.value;
+        if (filter !== '' && !this._expanded) {
+            this._expanded = true;
+        }
+        this._activeOption = -1;
+        this._filter = filter;
+    }
+    _dispatchSelectedOptions() {
+        this.dispatchEvent(new Event('change', {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    get _isValid() {
+        return this.internals.validity.valid && !this.invalid;
+    }
+    _renderCombobox() {
+        const placeHolderValue = (0, guard_js_1.guard)([this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder, this._filter], () => {
+            if (this.placeholder) {
+                return this.placeholder;
+            }
+            if (this.disabled) {
+                return 'Disabled';
+            }
+            if (!this.value.length) {
+                return 'No options selected';
+            }
+            if (this.value.length === 1) {
+                return Array.from(this._selectableVisibleOptions)
+                    .find((option) => option.value === this.value[0])
+                    ?.textContent?.trim();
+            }
+            // Count all selected values, excluding only those that correspond to permanently hidden options
+            const permanentlyHiddenValues = Array.from(this.options)
+                .filter((option) => option.hidden)
+                .map((option) => option.value);
+            const selectedCount = this.value.filter((val) => !permanentlyHiddenValues.includes(val)).length;
+            // Only show "All options selected" when truly all non-hidden options are selected
+            const totalSelectableCount = this.options.length - permanentlyHiddenValues.length;
+            if (this._filter === '' && selectedCount === totalSelectableCount && totalSelectableCount > 0) {
+                return this.selectAllPlaceholder || 'All options selected';
+            }
+            return `${selectedCount} options selected`;
+        });
+        return (0, lit_1.html) ` <input
+      type="text"
+      id="${this.id}"
+      name="${this.name}"
+      autocomplete="off"
+      aria-label="${this.labelContent}"
+      aria-labelledby="${this.ariaLabelledby}"
+      role="combobox"
+      aria-controls="${this.id}-list"
+      aria-expanded="${this._expanded}"
+      aria-autocomplete="list"
+      aria-haspopup="listbox"
+      aria-disabled="${this.disabled}"
+      aria-invalid="${!this._isValid}"
+      aria-errormessage="${!this._isValid ? `error-msg-${this.id}` : lit_1.nothing}"
+      aria-required="${this.required}"
+      ?disabled=${this.disabled}
+      aria-activedescendant="${(0, if_defined_js_1.ifDefined)(this._getActiveOptionId())}"
+      @input="${this._onInput}"
+      .value="${this._filter}"
+      .placeholder="${placeHolderValue}"
+      @focusout="${this._handleFocusOut}"
+      part="input"
+      class=${this.hideCaret ? 'hide-caret' : ''}
+    />`;
+    }
+    _renderOption(option) {
+        const hidden = Boolean((this._filter !== '' &&
+            !option.value.toLowerCase().includes(this._filter.toLowerCase()) &&
+            !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) ||
+            option.hidden);
+        const id = `${this.id}-option-${option.value}`;
+        const active = this._getActiveOptionId() === id;
+        const selected = this.value.includes(option.value);
+        return (0, lit_1.html) `
+      <tt-option
+        id="${id}"
+        value="${option.value}"
+        ?selected=${selected}
+        ?disabled=${option.disabled}
+        ?active=${active}
+        ?include-checkbox=${this.multiselect}
+        ?hidden=${hidden}
+        @click="${this._onClickOption}"
+      >
+        ${(0, unsafe_html_js_1.unsafeHTML)(option.innerHTML)}
+      </tt-option>
+    `;
+    }
+    _hasErrorContent() {
+        return this.errorElements?.length > 0;
+    }
+    render() {
+        return (0, lit_1.html) `
+      <div
+        class="tt-combobox-container"
+        @focus="${this._onFocus}"
+        @keydown="${this._onKeyUp}"
+        @click="${this._onClick}"
+        aria-disabled="${this.disabled}"
+        part="container"
+      >
+        <slot name="icon" part="icon"></slot>
+        ${this._renderCombobox()} ${this._renderChevron()}
+        <ul
+          id="${this.id}-list"
+          role="listbox"
+          aria-multiselectable="${this.multiselect}"
+          aria-label="${this.labelContent}"
+          part="listbox"
+          ?data-open-upward="${this.openUpward}"
+        >
+          ${this._renderSelectAll()} ${(0, repeat_js_1.repeat)(this.options, (opt) => opt.value, this._renderOption.bind(this))}
+
+          <li part="no-results" class="no-results">No results</li>
+        </ul>
+      </div>
+      <slot name="option" @slotchange=${() => this.requestUpdate('options')}></slot>
+      <div
+        class="errormessage"
+        id="error-msg-${this.id}"
+        role="alert"
+        aria-atomic="true"
+        ?data-hidden="${!this._hasErrorContent()}"
+        part="error"
+      >
+        ${(0, unsafe_svg_js_1.unsafeSVG)(icons_1.alert)}
+        <slot name="error"></slot>
+      </div>
+    `;
+    }
+}
+exports.TtCombobox = TtCombobox;
+TtCombobox.styles = styles_js_1.styles;
+TtCombobox.formAssociated = true;
+TtCombobox.shadowRootOptions = {
+    ...lit_1.LitElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], TtCombobox.prototype, "multiselect", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], TtCombobox.prototype, "disabled", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], TtCombobox.prototype, "invalid", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, attribute: 'display-select-all' })
+], TtCombobox.prototype, "displaySelectAll", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], TtCombobox.prototype, "required", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], TtCombobox.prototype, "name", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'aria-labelledby' })
+], TtCombobox.prototype, "ariaLabelledby", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, attribute: 'hide-caret' })
+], TtCombobox.prototype, "hideCaret", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], TtCombobox.prototype, "placeholder", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: 'select-all-placeholder' })
+], TtCombobox.prototype, "selectAllPlaceholder", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean, attribute: 'open-upward' })
+], TtCombobox.prototype, "openUpward", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], TtCombobox.prototype, "_activeOption", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], TtCombobox.prototype, "_expanded", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], TtCombobox.prototype, "_filter", void 0);
+__decorate([
+    (0, decorators_js_1.queryAssignedElements)({ slot: 'option', selector: 'option' })
+], TtCombobox.prototype, "options", void 0);
+__decorate([
+    (0, decorators_js_1.queryAssignedElements)({ slot: 'option', selector: 'tt-option:not([disabled])' })
+], TtCombobox.prototype, "activeOptions", void 0);
+__decorate([
+    (0, decorators_js_1.queryAssignedElements)({ slot: 'error' })
+], TtCombobox.prototype, "errorElements", void 0);
+__decorate([
+    (0, decorators_js_1.queryAll)('tt-option:not([hidden], [disabled])')
+], TtCombobox.prototype, "_visibleOptions", void 0);
+__decorate([
+    (0, decorators_js_1.queryAll)('tt-option:not([hidden], .select-all)')
+], TtCombobox.prototype, "_visibleOptionsNotSelectAll", void 0);
+__decorate([
+    (0, decorators_js_1.queryAll)('tt-option:not([disabled], .select-all)')
+], TtCombobox.prototype, "_selectableOptions", void 0);
+__decorate([
+    (0, decorators_js_1.queryAll)('tt-option:not([disabled], [hidden], .select-all)')
+], TtCombobox.prototype, "_selectableVisibleOptions", void 0);
+__decorate([
+    (0, decorators_js_1.query)('input[role="combobox"]')
+], TtCombobox.prototype, "_comboboxInput", void 0);
+__decorate([
+    (0, decorators_js_1.query)('button:has(svg)')
+], TtCombobox.prototype, "_chevronButton", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: (Array), attribute: 'value' })
+], TtCombobox.prototype, "value", void 0);
+//# sourceMappingURL=TtCombobox.js.map

package/dist/cjs/src/TtCombobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../../src/TtCombobox.ts"],"names":[],"mappings":";;;;;;;;;AAAA,6BAAgE;AAChE,qDAA4F;AAC5F,gEAAyD;AACzD,wDAAkD;AAClD,kEAA2D;AAC3D,gEAAyD;AACzD,sDAAgD;AAChD,4CAAsD;AACtD,2CAAqC;AAGrC,MAAa,UAAW,SAAQ,gBAAU;IA2CxC,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IA2CD,IAAY,cAAc;QACxB,OAAO,CACL,OAAO,CAAC,IAAI,CAAC,2BAA2B,CAAC,MAAM,CAAC;YAChD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAClG,CAAC;IACJ,CAAC;IAED,IAAc,uBAAuB;QACnC,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAChG,CAAC;IAED,IAAc,gBAAgB;QAC5B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC5G,CAAC;IAUD;QACE,KAAK,EAAE,CAAC;QArGV,gBAAW,GAAG,KAAK,CAAC;QAGpB,aAAQ,GAAG,KAAK,CAAC;QAGjB,YAAO,GAAG,KAAK,CAAC;QAGhB,qBAAgB,GAAG,KAAK,CAAC;QAGzB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,EAAE,CAAC;QAGV,mBAAc,GAAG,aAAO,CAAC;QAGzB,cAAS,GAAG,KAAK,CAAC;QASlB,eAAU,GAAG,KAAK,CAAC;QAOT,kBAAa,GAAW,CAAC,CAAC,CAAC;QAG3B,cAAS,GAAG,KAAK,CAAC;QAGlB,YAAO,GAAW,EAAE,CAAC;QAgCxB,UAAK,GAAa,EAAE,CAAC;QAiBpB,kBAAa,GAAqB,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;YAC3E,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;gBAC7B,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;oBACnC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;gBAChC,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAkEK,kBAAa,GAAG,GAAG,EAAE;YAC3B,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;gBACzC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAM,CAAC,EAAE,CAAC;oBACvC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;gBAC5B,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;gBAC9B,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAC1D,CAAC,CAAC;QAEM,2BAAsB,GAAG,GAAG,EAAE;YACpC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;gBAC9B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,CAAC,CAAC;YAChH,CAAC,CAAC,CAAC;QACL,CAAC,CAAC;QA4JM,eAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;YACzC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,oFAAoF;YACpF,gDAAgD;YAEhD,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBAC/C,MAAM,qBAAqB,GAAG,IAAI,CAAC,uBAAuB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;gBACzF,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,qBAAqB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;YACpF,CAAC;iBAAM,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,EAAE,CAAC;gBAC/B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CACrB,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CACtG,CAAC;YACJ,CAAC;iBAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC;gBAChE,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAClB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YACjF,CAAC;QACH,CAAC,CAAC;QAsEM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAChD,OAAO,aAAO,CAAC;YACjB,CAAC;YACD,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC,EAAE,oBAAoB,CAAC;YAC1C,MAAM,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,CAAC;YAChD,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC;YAErC,OAAO,IAAA,UAAI,EAAA;;cAED,EAAE;;oBAEI,QAAQ;kBACV,MAAM;;kBAEN,IAAI,CAAC,UAAU;;;;;;KAM5B,CAAC;QACJ,CAAC,CAAC;QA8BM,mBAAc,GAAG,GAAG,EAAE,CAAC,IAAA,UAAI,EAAA;;;;gBAIrB,IAAI,CAAC,eAAe;uBACb,IAAI,CAAC,SAAS;uBACd,IAAI,CAAC,EAAE;;kBAEZ,IAAI,CAAC,QAAQ;;;QAGvB,IAAA,yBAAS,EAAC,mBAAW,CAAC;;GAE3B,CAAC;QApYA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IAC1C,CAAC;IAEO,eAAe,CAAC,CAAa;QACnC,IAAI,CAAC,IAAI,CAAC,UAAW,CAAC,QAAQ,CAAC,CAAC,CAAC,aAA4B,CAAC,EAAE,CAAC;YAC/D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;QACD,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;IACpB,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC;IAC9B,CAAC;IAEM,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,CAAC;IAEM,oBAAoB;QACzB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IACnD,CAAC;IAES,YAAY,CAAC,iBAAiC;QACtD,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QAExD,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAE9B,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;IACxC,CAAC;IAES,MAAM,CAAC,iBAAiC;QAChD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACnC,IAAI,CAAC,aAAa,EAAE,CAAC;YAErB,IACE,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,SAAS;gBAC5C,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAC7E,CAAC;gBACD,IAAI,CAAC,wBAAwB,EAAE,CAAC;gBAChC,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,CAAC;QACH,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YAChG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;QAC1C,CAAC;QAED,IAAI,iBAAiB,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;gBAC5B,MAAM,uBAAuB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;gBAC7F,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,uBAAuB,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAM,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC7G,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAChC,CAAC,CAAC,CAAC;QACL,CAAC;QACD,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAClC,CAAC;IAoBO,eAAe;QACrB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YACxC,MAAM,YAAY,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,mCAAmC,CAAC,CAAC,CAAC,yBAAyB,CAAC;YAExG,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB;gBACE,YAAY,EAAE,IAAI;aACnB,EACD,YAAY,EACZ,IAAI,CAAC,cAAc,CACpB,CAAC;YACF,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzC,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAC;YAC1C,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAE/B,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;gBAC3C,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC;YAC5C,CAAC;QACH,CAAC;IACH,CAAC;IAED,IAAY,MAAM;QAChB,OAA2B,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC;IAED,IAAY,YAAY;QACtB,IAAI,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,CAAC;YAC5B,OAAO,IAAI,CAAC,SAAS,CAAC;QACxB,CAAC;QAED,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChE,CAAC;IAEO,QAAQ,CAAC,KAAoB;QACnC,QAAQ,KAAK,CAAC,GAAG,EAAE,CAAC;YAClB,KAAK,WAAW;gBACd,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;oBACpB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;oBACtB,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;gBAC1B,CAAC;qBAAM,CAAC;oBACN,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,CAAC,EAAE,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;gBACzF,CAAC;gBACD,MAAM;YACR,KAAK,SAAS;gBACZ,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACnB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;gBAC3D,CAAC;gBACD,MAAM;YACR,KAAK,QAAQ;gBACX,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACzB,CAAC;qBAAM,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,EAAE,CAAC;oBAC/B,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;gBACpB,CAAC;gBACD,MAAM;YACR,KAAK,OAAO;gBACV,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;oBACnB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE,CAAC;gBACnD,CAAC;gBACD,MAAM;YACR;gBACE,MAAM;QACV,CAAC;IACH,CAAC;IAEO,cAAc,CAAC,MAAmB;QACxC,IAAI,MAAM,CAAC,OAAO,CAAC,YAAY,KAAK,MAAM;YAAE,OAAO;QAEnD,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;QAC9C,MAAM,QAAQ,GAAqB,MAAM,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAClF,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QAC3B,CAAC;IACH,CAAC;IAEO,YAAY,CAAC,MAAmB;QACtC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;gBACtC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;YAC3B,CAAC,CAAC,CAAC;QACL,CAAC;QAED,MAAM,CAAC,YAAY,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAqB,MAAM,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAClF,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,CAAC;IACH,CAAC;IAEO,kBAAkB;QACxB,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACnE,OAAO,SAAS,CAAC;QACnB,CAAC;QAED,MAAM,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACxD,OAAO,MAAM,CAAC,EAAE,CAAC;IACnB,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;QAEjC,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACL,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,wBAAwB,CAAE,EAAE,KAAK,EAAE,CAAC;QACnF,CAAC;IACH,CAAC;IAEO,eAAe;QACP,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,wBAAwB,CAAE,EAAE,KAAK,EAAE,CAAC;IACnF,CAAC;IAEO,cAAc,CAAC,KAAiB;QACtC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,MAAM,MAAM,GAAG,KAAK,CAAC,aAAyB,CAAC;QAC/C,IAAI,MAAM,CAAC,QAAQ;YAAE,OAAO;QAE5B,MAAM,aAAa,GAAG,MAAM,CAAC,KAAe,CAAC;QAE7C,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC;gBACvC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,KAAK,aAAa,CAAC,CAAC;YACrE,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;YAC9C,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,CAAC,aAAa,CAAC,CAAC;YAC7B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAEO,QAAQ,CAAC,KAAY;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC;QAC3B,IAAI,MAAM,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;YACrC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;QACD,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,CAAC;QACxB,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;IACxB,CAAC;IAEO,wBAAwB;QAC9B,IAAI,CAAC,aAAa,CAChB,IAAI,KAAK,CAAC,QAAQ,EAAE;YAClB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAC;IACJ,CAAC;IAuBD,IAAY,QAAQ;QAClB,OAAO,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;IACxD,CAAC;IAEO,eAAe;QACrB,MAAM,gBAAgB,GAAG,IAAA,gBAAK,EAC5B,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,EACjH,GAAG,EAAE;YACH,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;gBACrB,OAAO,IAAI,CAAC,WAAW,CAAC;YAC1B,CAAC;YAED,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO,UAAU,CAAC;YACpB,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBACvB,OAAO,qBAAqB,CAAC;YAC/B,CAAC;YACD,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAC5B,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC;qBAC9C,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;oBACjD,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;YAC1B,CAAC;YAED,gGAAgG;YAChG,MAAM,uBAAuB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;iBACrD,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC;iBACjC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;YAEjC,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,uBAAuB,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;YAEhG,kFAAkF;YAClF,MAAM,oBAAoB,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,uBAAuB,CAAC,MAAM,CAAC;YAClF,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,IAAI,aAAa,KAAK,oBAAoB,IAAI,oBAAoB,GAAG,CAAC,EAAE,CAAC;gBAC9F,OAAO,IAAI,CAAC,oBAAoB,IAAI,sBAAsB,CAAC;YAC7D,CAAC;YAED,OAAO,GAAG,aAAa,mBAAmB,CAAC;QAC7C,CAAC,CACF,CAAC;QAEF,OAAO,IAAA,UAAI,EAAA;;YAEH,IAAI,CAAC,EAAE;cACL,IAAI,CAAC,IAAI;;oBAEH,IAAI,CAAC,YAAY;yBACZ,IAAI,CAAC,cAAc;;uBAErB,IAAI,CAAC,EAAE;uBACP,IAAI,CAAC,SAAS;;;uBAGd,IAAI,CAAC,QAAQ;sBACd,CAAC,IAAI,CAAC,QAAQ;2BACT,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,aAAO;uBACrD,IAAI,CAAC,QAAQ;kBAClB,IAAI,CAAC,QAAQ;+BACA,IAAA,yBAAS,EAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACnD,IAAI,CAAC,QAAQ;gBACb,IAAI,CAAC,OAAO;sBACN,gBAAgB;mBACnB,IAAI,CAAC,eAAe;;cAEzB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE;OACzC,CAAC;IACN,CAAC;IA0BO,aAAa,CAAC,MAAyB;QAC7C,MAAM,MAAM,GAAG,OAAO,CACpB,CAAC,IAAI,CAAC,OAAO,KAAK,EAAE;YAClB,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;YAChE,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC,CAAC;YACrE,MAAM,CAAC,MAAM,CAChB,CAAC;QAEF,MAAM,EAAE,GAAG,GAAG,IAAI,CAAC,EAAE,WAAW,MAAM,CAAC,KAAK,EAAE,CAAC;QAC/C,MAAM,MAAM,GAAG,IAAI,CAAC,kBAAkB,EAAE,KAAK,EAAE,CAAC;QAChD,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAEnD,OAAO,IAAA,UAAI,EAAA;;cAED,EAAE;iBACC,MAAM,CAAC,KAAK;oBACT,QAAQ;oBACR,MAAM,CAAC,QAAQ;kBACjB,MAAM;4BACI,IAAI,CAAC,WAAW;kBAC1B,MAAM;kBACN,IAAI,CAAC,cAAc;;UAE3B,IAAA,2BAAU,EAAC,MAAM,CAAC,SAAS,CAAC;;KAEjC,CAAC;IACJ,CAAC;IAiBO,gBAAgB;QACtB,OAAO,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAA,UAAI,EAAA;;;kBAGG,IAAI,CAAC,QAAQ;oBACX,IAAI,CAAC,QAAQ;kBACf,IAAI,CAAC,QAAQ;yBACN,IAAI,CAAC,QAAQ;;;;UAI5B,IAAI,CAAC,eAAe,EAAE,IAAI,IAAI,CAAC,cAAc,EAAE;;gBAEzC,IAAI,CAAC,EAAE;;kCAEW,IAAI,CAAC,WAAW;wBAC1B,IAAI,CAAC,YAAY;;+BAEV,IAAI,CAAC,UAAU;;YAElC,IAAI,CAAC,gBAAgB,EAAE,IAAI,IAAA,kBAAM,EAAC,IAAI,CAAC,OAAO,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;;wCAKtE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC;;;wBAGnD,IAAI,CAAC,EAAE;;;wBAGP,CAAC,IAAI,CAAC,gBAAgB,EAAE;;;UAGtC,IAAA,yBAAS,EAAC,aAAK,CAAC;;;KAGrB,CAAC;IACJ,CAAC;;AAjiBH,gCAkiBC;AAjiBQ,iBAAM,GAAG,kBAAM,AAAT,CAAU;AAEhB,yBAAc,GAAG,IAAI,AAAP,CAAQ;AAEtB,4BAAiB,GAAG;IACzB,GAAG,gBAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuB,CAGtB;AAGF;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;+CACR;AAGpB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACX;AAGjB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACZ;AAGhB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;oDACpC;AAGzB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CACX;AAGjB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCACjB;AAGV;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;kDAChC;AAGzB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;6CACnC;AAGlB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACN;AAGrB;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,wBAAwB,EAAE,CAAC;wDAClC;AAG9B;IADC,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC;8CACnC;AAOT;IADT,IAAA,qBAAK,GAAE;iDAC6B;AAG3B;IADT,IAAA,qBAAK,GAAE;6CACoB;AAGlB;IADT,IAAA,qBAAK,GAAE;2CACuB;AAG/B;IADC,IAAA,qCAAqB,EAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;2CAC3B;AAGnC;IADC,IAAA,qCAAqB,EAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,2BAA2B,EAAE,CAAC;iDACxC;AAG/B;IADT,IAAA,qCAAqB,EAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;iDACI;AAGnC;IADT,IAAA,wBAAQ,EAAC,qCAAqC,CAAC;mDACJ;AAGlC;IADT,IAAA,wBAAQ,EAAC,sCAAsC,CAAC;+DACO;AAG9C;IADT,IAAA,wBAAQ,EAAC,wCAAwC,CAAC;sDACC;AAG1C;IADT,IAAA,wBAAQ,EAAC,kDAAkD,CAAC;6DACF;AAGjD;IADT,IAAA,qBAAK,EAAC,wBAAwB,CAAC;kDACY;AAGlC;IADT,IAAA,qBAAK,EAAC,iBAAiB,CAAC;kDACoB;AAKtC;IADN,IAAA,wBAAQ,EAAC,EAAE,IAAI,EAAE,CAAA,KAAa,CAAA,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;yCAC1B","sourcesContent":["import { html, LitElement, nothing, PropertyValues } from 'lit';\nimport { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js';\nimport { guard } from 'lit/directives/guard.js';\nimport { alert, chevronDown } from '@triptease/icons';\nimport { styles } from './styles.js';\nimport { TtOption } from './tt-option/TtOption.js';\n\nexport class TtCombobox extends LitElement {\n  static styles = styles;\n\n  static formAssociated = true;\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  @property({ type: Boolean })\n  multiselect = false;\n\n  @property({ type: Boolean })\n  disabled = false;\n\n  @property({ type: Boolean })\n  invalid = false;\n\n  @property({ type: Boolean, attribute: 'display-select-all' })\n  displaySelectAll = false;\n\n  @property({ type: Boolean })\n  required = false;\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String, attribute: 'aria-labelledby' })\n  ariaLabelledby = nothing;\n\n  @property({ type: Boolean, attribute: 'hide-caret' })\n  hideCaret = false;\n\n  @property({ type: String })\n  placeholder?: string;\n\n  @property({ type: String, attribute: 'select-all-placeholder' })\n  selectAllPlaceholder?: string;\n\n  @property({ type: Boolean, attribute: 'open-upward' })\n  openUpward = false;\n\n  get form(): HTMLFormElement | null {\n    return this.internals.form;\n  }\n\n  @state()\n  protected _activeOption: number = -1;\n\n  @state()\n  protected _expanded = false;\n\n  @state()\n  protected _filter: string = '';\n\n  @queryAssignedElements({ slot: 'option', selector: 'option' })\n  options!: Array<HTMLOptionElement>;\n\n  @queryAssignedElements({ slot: 'option', selector: 'tt-option:not([disabled])' })\n  activeOptions!: Array<HTMLOptionElement>;\n\n  @queryAssignedElements({ slot: 'error' })\n  protected errorElements!: Array<HTMLElement>;\n\n  @queryAll('tt-option:not([hidden], [disabled])')\n  protected _visibleOptions!: Array<TtOption>;\n\n  @queryAll('tt-option:not([hidden], .select-all)')\n  protected _visibleOptionsNotSelectAll!: Array<TtOption>;\n\n  @queryAll('tt-option:not([disabled], .select-all)')\n  protected _selectableOptions!: NodeListOf<TtOption>;\n\n  @queryAll('tt-option:not([disabled], [hidden], .select-all)')\n  protected _selectableVisibleOptions!: NodeListOf<TtOption>;\n\n  @query('input[role=\"combobox\"]')\n  protected _comboboxInput!: HTMLInputElement;\n\n  @query('button:has(svg)')\n  protected _chevronButton!: HTMLButtonElement;\n\n  public internals: ReturnType<typeof this.attachInternals>;\n\n  @property({ type: Array<string>, attribute: 'value' })\n  public value: string[] = [];\n\n  private get _isAllSelected(): boolean {\n    return (\n      Boolean(this._visibleOptionsNotSelectAll.length) &&\n      Array.from(this._visibleOptionsNotSelectAll).every((option) => this.value.includes(option.value))\n    );\n  }\n\n  protected get _selectedVisibleOptions(): Array<TtOption> {\n    return Array.from(this._visibleOptions).filter((option) => this.value.includes(option.value));\n  }\n\n  protected get _selectedOptions(): Array<TtOption> {\n    return Array.from(this._visibleOptionsNotSelectAll).filter((option) => this.value.includes(option.value));\n  }\n\n  private _slotObserver: MutationObserver = new MutationObserver((mutations) => {\n    mutations.forEach((mutation) => {\n      if (mutation.type === 'attributes') {\n        this.requestUpdate('options');\n      }\n    });\n  });\n\n  constructor() {\n    super();\n    this.internals = this.attachInternals();\n  }\n\n  private _handleFocusOut(e: FocusEvent) {\n    if (!this.shadowRoot!.contains(e.relatedTarget as Node | null)) {\n      this._expanded = false;\n    }\n    this._filter = '';\n  }\n\n  private _onFocus() {\n    this._comboboxInput.focus();\n  }\n\n  public connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('focus', this._onFocus);\n  }\n\n  public disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('focus', this._onFocus);\n  }\n\n  protected firstUpdated(changedProperties: PropertyValues) {\n    this.internals.setFormValue(JSON.stringify(this.value));\n\n    this._reportValidity();\n    this._listenForOptionChange();\n\n    super.firstUpdated(changedProperties);\n  }\n\n  protected update(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      this._valueChanged();\n\n      if (\n        changedProperties.get('value') !== undefined &&\n        JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)\n      ) {\n        this._dispatchSelectedOptions();\n        this._reportValidity();\n      }\n    }\n\n    if (changedProperties.has('_expanded') && changedProperties.get('_expanded') && !this._expanded) {\n      this.internals.states.add('interacted');\n    }\n\n    if (changedProperties.has('options')) {\n      this.updateComplete.then(() => {\n        const selectedAssignedOptions = Array.from(this.options).filter((option) => option.selected);\n        this.value = Array.from(new Set([...this.value, ...selectedAssignedOptions.map((option) => option.value!)]));\n        this._listenForOptionChange();\n      });\n    }\n    super.update(changedProperties);\n  }\n\n  private _valueChanged = () => {\n    this._selectableOptions.forEach((option) => {\n      if (this.value.includes(option.value!)) {\n        this._checkOption(option);\n      } else {\n        this._uncheckOption(option);\n      }\n    });\n\n    this.internals.setFormValue(JSON.stringify(this.value));\n  };\n\n  private _listenForOptionChange = () => {\n    this.options.forEach((option) => {\n      this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });\n    });\n  };\n\n  private _reportValidity() {\n    if (this.required && !this.value.length) {\n      const errorMessage = this.multiselect ? 'Please select at least one option' : 'Please select an option';\n\n      this.internals.setValidity(\n        {\n          valueMissing: true,\n        },\n        errorMessage,\n        this._comboboxInput\n      );\n      this.internals.states.add('--invalid');\n    } else if (!this.internals.validity.valid) {\n      this.internals.setValidity({});\n\n      if (this.internals.states.has('--invalid')) {\n        this.internals.states.delete('--invalid');\n      }\n    }\n  }\n\n  private get labels(): Array<HTMLElement> {\n    return <Array<HTMLElement>>[...this.internals.labels];\n  }\n\n  private get labelContent(): string {\n    if (this.ariaLabel !== null) {\n      return this.ariaLabel;\n    }\n\n    return this.labels.map((label) => label.innerText).join(', ');\n  }\n\n  private _onKeyUp(event: KeyboardEvent) {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        if (!this._expanded) {\n          this._expanded = true;\n          this._activeOption = -1;\n        } else {\n          this._activeOption = Math.min(this._visibleOptions.length - 1, this._activeOption + 1);\n        }\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        if (this._expanded) {\n          this._activeOption = Math.max(0, this._activeOption - 1);\n        }\n        break;\n      case 'Escape':\n        event.preventDefault();\n        if (this._expanded) {\n          this._expanded = false;\n        } else if (this._filter !== '') {\n          this._filter = '';\n        }\n        break;\n      case 'Enter':\n        event.preventDefault();\n        if (this._expanded) {\n          this._visibleOptions[this._activeOption].click();\n        }\n        break;\n      default:\n        break;\n    }\n  }\n\n  private _uncheckOption(option: HTMLElement) {\n    if (option.dataset.deselectable !== 'true') return;\n\n    option.setAttribute('aria-selected', 'false');\n    const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n    if (checkbox) {\n      checkbox.checked = false;\n    }\n  }\n\n  private _checkOption(option: HTMLElement) {\n    if (!this.multiselect) {\n      this._selectableOptions.forEach((opt) => {\n        this._uncheckOption(opt);\n      });\n    }\n\n    option.setAttribute('aria-selected', 'true');\n    const checkbox = <HTMLInputElement>option.querySelector('input[type=\"checkbox\"]');\n    if (checkbox) {\n      checkbox.checked = true;\n    }\n  }\n\n  private _getActiveOptionId(): string | undefined {\n    if (this._activeOption === -1 || this._visibleOptions.length === 0) {\n      return undefined;\n    }\n\n    const option = this._visibleOptions[this._activeOption];\n    return option.id;\n  }\n\n  private _onClick() {\n    this._expanded = !this._expanded;\n\n    if (this._expanded) {\n      (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n    }\n  }\n\n  private _onChevronClick() {\n    (<HTMLElement>this.shadowRoot?.querySelector('input[role=\"combobox\"]'))?.focus();\n  }\n\n  private _onClickOption(event: MouseEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const option = event.currentTarget as TtOption;\n    if (option.disabled) return;\n\n    const selectedValue = option.value as string;\n\n    if (this.multiselect) {\n      if (this.value.includes(selectedValue)) {\n        this.value = this.value.filter((value) => value !== selectedValue);\n      } else {\n        this.value = [...this.value, selectedValue];\n      }\n    } else {\n      this.value = [selectedValue];\n      this._expanded = false;\n    }\n  }\n\n  private _onInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    const filter = input.value;\n    if (filter !== '' && !this._expanded) {\n      this._expanded = true;\n    }\n    this._activeOption = -1;\n    this._filter = filter;\n  }\n\n  private _dispatchSelectedOptions() {\n    this.dispatchEvent(\n      new Event('change', {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private _selectAll = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    // If filtering, and all visible options are selected, deselect only visible options\n    // Else if filtering, select all visible options\n\n    if (this._filter !== '' && this._isAllSelected) {\n      const selectedVisibleValues = this._selectedVisibleOptions.map((option) => option.value);\n      this.value = this.value.filter((value) => !selectedVisibleValues.includes(value));\n    } else if (this._filter !== '') {\n      this.value = Array.from(\n        new Set([...this.value, ...Array.from(this._selectableVisibleOptions).map((option) => option.value)])\n      );\n    } else if (this.value.length === this._selectableOptions.length) {\n      this.value = [];\n    } else {\n      this.value = Array.from(this._selectableOptions).map((option) => option.value);\n    }\n  };\n\n  private get _isValid(): boolean {\n    return this.internals.validity.valid && !this.invalid;\n  }\n\n  private _renderCombobox() {\n    const placeHolderValue = guard(\n      [this.placeholder, this.disabled, this.value, this.activeOptions.length, this.selectAllPlaceholder, this._filter],\n      () => {\n        if (this.placeholder) {\n          return this.placeholder;\n        }\n\n        if (this.disabled) {\n          return 'Disabled';\n        }\n        if (!this.value.length) {\n          return 'No options selected';\n        }\n        if (this.value.length === 1) {\n          return Array.from(this._selectableVisibleOptions)\n            .find((option) => option.value === this.value[0])\n            ?.textContent?.trim();\n        }\n\n        // Count all selected values, excluding only those that correspond to permanently hidden options\n        const permanentlyHiddenValues = Array.from(this.options)\n          .filter((option) => option.hidden)\n          .map((option) => option.value);\n\n        const selectedCount = this.value.filter((val) => !permanentlyHiddenValues.includes(val)).length;\n\n        // Only show \"All options selected\" when truly all non-hidden options are selected\n        const totalSelectableCount = this.options.length - permanentlyHiddenValues.length;\n        if (this._filter === '' && selectedCount === totalSelectableCount && totalSelectableCount > 0) {\n          return this.selectAllPlaceholder || 'All options selected';\n        }\n\n        return `${selectedCount} options selected`;\n      }\n    );\n\n    return html` <input\n      type=\"text\"\n      id=\"${this.id}\"\n      name=\"${this.name}\"\n      autocomplete=\"off\"\n      aria-label=\"${this.labelContent}\"\n      aria-labelledby=\"${this.ariaLabelledby}\"\n      role=\"combobox\"\n      aria-controls=\"${this.id}-list\"\n      aria-expanded=\"${this._expanded}\"\n      aria-autocomplete=\"list\"\n      aria-haspopup=\"listbox\"\n      aria-disabled=\"${this.disabled}\"\n      aria-invalid=\"${!this._isValid}\"\n      aria-errormessage=\"${!this._isValid ? `error-msg-${this.id}` : nothing}\"\n      aria-required=\"${this.required}\"\n      ?disabled=${this.disabled}\n      aria-activedescendant=\"${ifDefined(this._getActiveOptionId())}\"\n      @input=\"${this._onInput}\"\n      .value=\"${this._filter}\"\n      .placeholder=\"${placeHolderValue}\"\n      @focusout=\"${this._handleFocusOut}\"\n      part=\"input\"\n      class=${this.hideCaret ? 'hide-caret' : ''}\n    />`;\n  }\n\n  private _renderSelectAll = () => {\n    if (!this.multiselect || !this.displaySelectAll) {\n      return nothing;\n    }\n    const id = `${this.id}-option-select-all`;\n    const active = this._getActiveOptionId() === id;\n    const selected = this._isAllSelected;\n\n    return html`\n      <tt-option\n        id=\"${id}\"\n        class=\"select-all\"\n        ?selected=${selected}\n        ?active=${active}\n        include-checkbox\n        @click=\"${this._selectAll}\"\n        exportparts=\"option, checkbox\"\n        part=\"option\"\n        value=\"select-all\"\n        >Select all</tt-option\n      >\n    `;\n  };\n\n  private _renderOption(option: HTMLOptionElement) {\n    const hidden = Boolean(\n      (this._filter !== '' &&\n        !option.value.toLowerCase().includes(this._filter.toLowerCase()) &&\n        !option.innerText.toLowerCase().includes(this._filter.toLowerCase())) ||\n        option.hidden\n    );\n\n    const id = `${this.id}-option-${option.value}`;\n    const active = this._getActiveOptionId() === id;\n    const selected = this.value.includes(option.value);\n\n    return html`\n      <tt-option\n        id=\"${id}\"\n        value=\"${option.value}\"\n        ?selected=${selected}\n        ?disabled=${option.disabled}\n        ?active=${active}\n        ?include-checkbox=${this.multiselect}\n        ?hidden=${hidden}\n        @click=\"${this._onClickOption}\"\n      >\n        ${unsafeHTML(option.innerHTML)}\n      </tt-option>\n    `;\n  }\n\n  private _renderChevron = () => html`\n    <button\n      type=\"button\"\n      aria-label=\"Expand\"\n      @click=\"${this._onChevronClick}\"\n      aria-expanded=\"${this._expanded}\"\n      aria-controls=\"${this.id}-list\"\n      tabindex=\"-1\"\n      ?disabled=${this.disabled}\n      part=\"arrow\"\n    >\n      ${unsafeSVG(chevronDown)}\n    </button>\n  `;\n\n  private _hasErrorContent(): boolean {\n    return this.errorElements?.length > 0;\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"tt-combobox-container\"\n        @focus=\"${this._onFocus}\"\n        @keydown=\"${this._onKeyUp}\"\n        @click=\"${this._onClick}\"\n        aria-disabled=\"${this.disabled}\"\n        part=\"container\"\n      >\n        <slot name=\"icon\" part=\"icon\"></slot>\n        ${this._renderCombobox()} ${this._renderChevron()}\n        <ul\n          id=\"${this.id}-list\"\n          role=\"listbox\"\n          aria-multiselectable=\"${this.multiselect}\"\n          aria-label=\"${this.labelContent}\"\n          part=\"listbox\"\n          ?data-open-upward=\"${this.openUpward}\"\n        >\n          ${this._renderSelectAll()} ${repeat(this.options, (opt) => opt.value, this._renderOption.bind(this))}\n\n          <li part=\"no-results\" class=\"no-results\">No results</li>\n        </ul>\n      </div>\n      <slot name=\"option\" @slotchange=${() => this.requestUpdate('options')}></slot>\n      <div\n        class=\"errormessage\"\n        id=\"error-msg-${this.id}\"\n        role=\"alert\"\n        aria-atomic=\"true\"\n        ?data-hidden=\"${!this._hasErrorContent()}\"\n        part=\"error\"\n      >\n        ${unsafeSVG(alert)}\n        <slot name=\"error\"></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-combobox': TtCombobox;\n  }\n}\n"]}

package/dist/cjs/src/index.js

@@ -0,0 +1,21 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TtCombobox = void 0;
+__exportStar(require("./types.js"), exports);
+var tt_combobox_js_1 = require("./tt-combobox.js");
+Object.defineProperty(exports, "TtCombobox", { enumerable: true, get: function () { return tt_combobox_js_1.TtCombobox; } });
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,6CAA2B;AAC3B,mDAA8C;AAArC,4GAAA,UAAU,OAAA","sourcesContent":["export * from './types.js';\nexport { TtCombobox } from './tt-combobox.js';\n"]}