@triptease/tt-combobox 5.0.3

package/dist/src/TtCombobox.d.ts

@@ -0,0 +1,77 @@
+import { LitElement, PropertyValues } from 'lit';
+export declare class TtCombobox extends LitElement {
+    static styles: import("lit").CSSResult;
+    static formAssociated: boolean;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    multiselect: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    _extValue: string[];
+    displaySelectAll: boolean;
+    required: boolean;
+    name: string;
+    ariaLabelledby: symbol;
+    hideCaret: boolean;
+    placeholder?: string;
+    get form(): HTMLFormElement | null;
+    protected _activeOption: number;
+    protected _expanded: boolean;
+    protected _filter: string;
+    options: Array<HTMLOptionElement>;
+    activeOptions: Array<HTMLOptionElement>;
+    protected errorElements: Array<HTMLElement>;
+    protected _visibleOptions: Array<HTMLOptionElement>;
+    protected _selectableOptions: Array<HTMLOptionElement>;
+    protected _selectableVisibleOptions: Array<HTMLOptionElement>;
+    protected _selectedOptions: Array<HTMLOptionElement>;
+    protected _selectedVisibleOptions: NodeListOf<HTMLOptionElement>;
+    protected _comboboxInput: HTMLInputElement;
+    protected _chevronButton: HTMLButtonElement;
+    internals: ReturnType<typeof this.attachInternals>;
+    get value(): string[];
+    set value(selection: string[]);
+    private get _isAllSelected();
+    private _slotObserver;
+    constructor();
+    private _handleFocusOut;
+    private _onFocus;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected update(changedProperties: PropertyValues): void;
+    private _listenForOptionChange;
+    reportValidity(): void;
+    private _reportValidity;
+    private get labels();
+    private get labelContent();
+    private _onKeyUp;
+    private _uncheckOption;
+    private _checkOption;
+    private _toggleOption;
+    private _getActiveOptionId;
+    private _onClick;
+    private _onChevronClick;
+    private _onClickOption;
+    private _onInput;
+    private _dispatchSelectedOptions;
+    private _selectAll;
+    private get _isValid();
+    private _renderCombobox;
+    private _renderSelectAll;
+    private _renderOption;
+    private _renderChevron;
+    private _hasErrorContent;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'tt-combobox': TtCombobox;
+    }
+}

package/dist/src/TtCombobox.js

@@ -0,0 +1,456 @@
+import { __decorate } from "tslib";
+/* eslint-disable lit-a11y/click-events-have-key-events */
+import { html, LitElement, nothing } from 'lit';
+import { property, query, queryAll, queryAssignedElements, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { repeat } from 'lit/directives/repeat.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { guard } from 'lit/directives/guard.js';
+import { alert, chevronDown } from '@triptease/icons';
+import { styles } from './styles.js';
+export class TtCombobox extends LitElement {
+    get form() {
+        return this.internals.form;
+    }
+    get value() {
+        return Array.from(this._selectedOptions).map(option => option.dataset.value);
+    }
+    set value(selection) {
+        this._selectableOptions.forEach(option => {
+            if (selection.includes(option.dataset.value)) {
+                this._checkOption(option);
+            }
+            else {
+                this._uncheckOption(option);
+            }
+        });
+    }
+    get _isAllSelected() {
+        return Array.from(this._selectableVisibleOptions).every(option => Array.from(this._selectedVisibleOptions).includes(option));
+    }
+    constructor() {
+        super();
+        this.multiselect = false;
+        this.disabled = false;
+        this.invalid = false;
+        this._extValue = [];
+        this.displaySelectAll = false;
+        this.required = false;
+        this.name = '';
+        this.ariaLabelledby = nothing;
+        this.hideCaret = false;
+        this._activeOption = -1;
+        this._expanded = false;
+        this._filter = '';
+        this._slotObserver = new MutationObserver((mutations) => {
+            mutations.forEach(mutation => {
+                if (mutation.type === 'attributes') {
+                    this.requestUpdate('options');
+                }
+            });
+        });
+        this._listenForOptionChange = () => {
+            this.options.forEach(option => {
+                this._slotObserver.observe(option, { attributes: true, attributeFilter: ['selected', 'disabled', 'hidden'] });
+            });
+        };
+        this._selectAll = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            const oldValue = [...this.value];
+            if (this.value.length === this._selectableOptions.length) {
+                // this.value = this.value.filter(value => ![...this._selectableOptions].some(option => option.dataset.value === value));
+                this._selectableOptions.forEach(option => this._uncheckOption(option));
+            }
+            else {
+                this._selectableOptions.forEach(option => this._checkOption(option));
+            }
+            this.requestUpdate('value', oldValue);
+        };
+        this._renderSelectAll = () => {
+            if (!this.multiselect || !this.displaySelectAll) {
+                return nothing;
+            }
+            const id = `${this.id}-option-select-all`;
+            const active = this._getActiveOptionId() === id;
+            const selected = this._isAllSelected;
+            // eslint-disable-next-line lit-a11y/click-events-have-key-events
+            return html `
+      <li
+        class="select-all"
+        role="option"
+        id="${this.id}-option-select-all"
+        aria-selected="${selected}"
+        data-active=${active}
+        @click="${this._selectAll}"
+        @mousedown="${(evt) => evt.preventDefault()}"
+        data-value="select-all"
+        part="option"
+      >
+        <input type="checkbox" ?checked=${selected} role="presentation" tabindex="-1" part="checkbox">
+        Select all
+      </li>`;
+        };
+        this._renderChevron = () => 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">
+      ${unsafeSVG(chevronDown)}
+    </button>
+  `;
+        this.internals = this.attachInternals();
+    }
+    _handleFocusOut(e) {
+        if (!this.shadowRoot.contains(e.relatedTarget)) {
+            this._expanded = false;
+        }
+    }
+    _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();
+        super.firstUpdated(changedProperties);
+    }
+    update(changedProperties) {
+        if (changedProperties.has('value') && 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(() => {
+                this.value = Array.from(new Set([...this.value, ...Array.from(this._selectedOptions).map(option => option.dataset.value)]));
+                this._listenForOptionChange();
+            });
+        }
+        super.update(changedProperties);
+    }
+    reportValidity() {
+        if (!this._isValid) {
+            this.internals.states.add('--invalid');
+        }
+        else if (this.internals.states.has('--invalid')) {
+            this.internals.states.delete('--invalid');
+        }
+        this.internals.reportValidity();
+    }
+    _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);
+        }
+        else if (!this.internals.validity.valid) {
+            this.internals.setValidity({});
+        }
+    }
+    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;
+        }
+    }
+    _toggleOption(option) {
+        if (option.getAttribute('aria-selected') === 'true') {
+            this._uncheckOption(option);
+        }
+        else {
+            this._checkOption(option);
+        }
+    }
+    _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 oldValue = [...this.value];
+        this._toggleOption(event.currentTarget);
+        this.requestUpdate('value', oldValue);
+    }
+    _onInput(event) {
+        const input = event.target;
+        const filter = input.value.toLowerCase();
+        if (filter !== '' && !this._expanded) {
+            this._expanded = true;
+        }
+        this._activeOption = -1;
+        this._filter = filter;
+    }
+    _dispatchSelectedOptions() {
+        this.dispatchEvent(new Event('change', {
+            bubbles: true,
+            composed: true
+        }));
+        this.internals.setFormValue(JSON.stringify(this.value));
+    }
+    get _isValid() {
+        return this.internals.validity.valid && !this.invalid;
+    }
+    _renderCombobox() {
+        const placeHolderValue = guard([this.placeholder, this.disabled, this.value, this.activeOptions.length], () => {
+            if (this.placeholder) {
+                return this.placeholder;
+            }
+            if (this.disabled) {
+                return 'Disabled';
+            }
+            if (!this._selectedVisibleOptions.length) {
+                return 'No options selected';
+            }
+            if (this._selectedVisibleOptions.length === 1) {
+                return this._selectedVisibleOptions[0].innerText?.trim();
+            }
+            if (this._isAllSelected) {
+                return 'All options selected';
+            }
+            return `${this._selectedVisibleOptions.length} options selected`;
+        });
+        return 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}` : nothing}"
+        aria-required="${this.required}"
+        ?disabled=${this.disabled}
+        aria-activedescendant="${ifDefined(this._getActiveOptionId())}"
+        @input="${this._onInput}"
+        .value="${this._filter}"
+        .placeholder="${placeHolderValue}"
+        @focusout="${this._handleFocusOut}"
+        part="input"
+        class=${this.hideCaret ? 'hide-caret' : ''}
+      />`;
+    }
+    _renderOption(option) {
+        if (this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) {
+            return nothing;
+        }
+        const id = `${this.id}-option-${option.value}`;
+        const active = this._getActiveOptionId() === id;
+        const selected = Boolean(this.multiselect && option.selected);
+        return html `
+      <li
+        role="option"
+        id="${this.id}-option-${option.value}"
+        aria-selected=${this.multiselect && option.selected}
+        data-active=${active}
+        @click="${this._onClickOption}"
+        @mousedown="${(event) => event.preventDefault()}"
+        data-value="${option.value}"
+        aria-disabled=${option.disabled}
+        aria-hidden=${option.hidden || nothing}
+        data-deselectable=${!option.selected}
+        part="option"
+      >
+        ${this.multiselect ? html `<input type="checkbox" ?checked=${selected}
+                                         role="presentation" tabindex="-1" part="checkbox">` : nothing}
+        <span>${unsafeHTML(option.innerHTML)}</span>
+      </li>`;
+    }
+    _hasErrorContent() {
+        return this.errorElements?.length > 0;
+    }
+    render() {
+        return 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"
+        >
+                ${this._renderSelectAll()}
+
+                ${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">
+        ${unsafeSVG(alert)}
+        <slot name="error"></slot>
+      </div>
+    `;
+    }
+}
+TtCombobox.styles = styles;
+TtCombobox.formAssociated = true;
+TtCombobox.shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true
+};
+__decorate([
+    property({ type: Boolean })
+], TtCombobox.prototype, "multiselect", void 0);
+__decorate([
+    property({ type: Boolean })
+], TtCombobox.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean })
+], TtCombobox.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'display-select-all' })
+], TtCombobox.prototype, "displaySelectAll", void 0);
+__decorate([
+    property({ type: Boolean })
+], TtCombobox.prototype, "required", void 0);
+__decorate([
+    property({ type: String })
+], TtCombobox.prototype, "name", void 0);
+__decorate([
+    property({ type: String, attribute: 'aria-labelledby' })
+], TtCombobox.prototype, "ariaLabelledby", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'hide-caret' })
+], TtCombobox.prototype, "hideCaret", void 0);
+__decorate([
+    property({ type: String })
+], TtCombobox.prototype, "placeholder", void 0);
+__decorate([
+    state()
+], TtCombobox.prototype, "_activeOption", void 0);
+__decorate([
+    state()
+], TtCombobox.prototype, "_expanded", void 0);
+__decorate([
+    state()
+], TtCombobox.prototype, "_filter", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'option', selector: 'option' })
+], TtCombobox.prototype, "options", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'option', selector: 'option:not([disabled])' })
+], TtCombobox.prototype, "activeOptions", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'error' })
+], TtCombobox.prototype, "errorElements", void 0);
+__decorate([
+    queryAll('li[role="option"]:not([aria-disabled="true"], [aria-hidden="true"])')
+], TtCombobox.prototype, "_visibleOptions", void 0);
+__decorate([
+    queryAll('li[role="option"]:not([aria-disabled="true"], [data-value="select-all"])')
+], TtCombobox.prototype, "_selectableOptions", void 0);
+__decorate([
+    queryAll('li[role="option"]:not([aria-disabled="true"], [data-value="select-all"], [aria-hidden="true"])')
+], TtCombobox.prototype, "_selectableVisibleOptions", void 0);
+__decorate([
+    queryAll('li[role="option"]:not([data-value="select-all"])[aria-selected="true"]')
+], TtCombobox.prototype, "_selectedOptions", void 0);
+__decorate([
+    queryAll('li[role="option"]:not([data-value="select-all"], [aria-hidden="true"])[aria-selected="true"]')
+], TtCombobox.prototype, "_selectedVisibleOptions", void 0);
+__decorate([
+    query('input[role="combobox"]')
+], TtCombobox.prototype, "_comboboxInput", void 0);
+__decorate([
+    query('button:has(svg)')
+], TtCombobox.prototype, "_chevronButton", void 0);
+__decorate([
+    property({ type: (Array), attribute: 'value' })
+], TtCombobox.prototype, "value", null);
+//# sourceMappingURL=TtCombobox.js.map

package/dist/src/TtCombobox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TtCombobox.js","sourceRoot":"","sources":["../../src/TtCombobox.ts"],"names":[],"mappings":";AAAA,0DAA0D;AAC1D,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,OAAO,EAAkB,MAAM,KAAK,CAAC;AAChE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC5F,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAGrC,MAAM,OAAO,UAAW,SAAS,UAAU;IAwCzC,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;IAC7B,CAAC;IA2CD,IAAW,KAAK;QACd,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,KAAM,CAAC,CAAC;IAChF,CAAC;IAGD,IAAW,KAAK,CAAC,SAAmB;QAClC,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACvC,IAAI,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,KAAM,CAAC,EAAE,CAAC;gBAC9C,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;YAC5B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;YAC9B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAY,cAAc;QACxB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,uBAAuB,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;IAC/H,CAAC;IAUD;QACE,KAAK,EAAE,CAAC;QAtGV,gBAAW,GAAG,KAAK,CAAC;QAGpB,aAAQ,GAAG,KAAK,CAAC;QAGjB,YAAO,GAAG,KAAK,CAAC;QAGhB,cAAS,GAAa,EAAE,CAAC;QAGzB,qBAAgB,GAAG,KAAK,CAAC;QAGzB,aAAQ,GAAG,KAAK,CAAC;QAGjB,SAAI,GAAG,EAAE,CAAC;QAGV,mBAAc,GAAG,OAAO,CAAC;QAGzB,cAAS,GAAG,KAAK,CAAC;QAUR,kBAAa,GAAW,CAAC,CAAC,CAAC;QAG3B,cAAS,GAAG,KAAK,CAAC;QAGlB,YAAO,GAAW,EAAE,CAAC;QAqDvB,kBAAa,GAAqB,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;YAC3E,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;gBAC3B,IAAI,QAAQ,CAAC,IAAI,KAAK,YAAY,EAAE,CAAC;oBACnC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;gBAChC,CAAC;YACH,CAAC,CAAC,CAAA;QACJ,CAAC,CAAC,CAAC;QAwDK,2BAAsB,GAAG,GAAG,EAAE;YACpC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBAC5B,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAC,CAAC,CAAC;YAC/G,CAAC,CAAC,CAAA;QACJ,CAAC,CAAA;QAuJO,eAAU,GAAG,CAAC,KAAiB,EAAE,EAAE;YACzC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YAExB,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;YAEjC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,KAAK,IAAI,CAAC,kBAAkB,CAAC,MAAM,EAAE,CAAC;gBACzD,yHAAyH;gBACzH,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;YACzE,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,kBAAkB,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC;YACvE,CAAC;YAED,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QACxC,CAAC,CAAC;QA2DM,qBAAgB,GAAG,GAAG,EAAE;YAC9B,IAAI,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAChD,OAAO,OAAO,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;YACrC,iEAAiE;YACjE,OAAO,IAAI,CAAA;;;;cAID,IAAI,CAAC,EAAE;yBACI,QAAQ;sBACX,MAAM;kBACV,IAAI,CAAC,UAAU;sBACX,CAAC,GAAe,EAAE,EAAE,CAAC,GAAG,CAAC,cAAc,EAAE;;;;0CAIrB,QAAQ;;YAEtC,CAAC;QACX,CAAC,CAAC;QA8BM,mBAAc,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;wDACmB,IAAI,CAAC,eAAe,oBAAoB,IAAI,CAAC,SAAS;6BACjF,IAAI,CAAC,EAAE,kCAAkC,IAAI,CAAC,QAAQ;QAC3E,SAAS,CAAC,WAAW,CAAC;;GAE3B,CAAC;QAlVA,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;IACH,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;QAEvB,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;IACxC,CAAC;IAES,MAAM,CAAC,iBAAiC;QAChD,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,KAAK,SAAS,IAAI,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;YACpK,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAChC,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,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,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,OAAO,CAAC,KAAM,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC7H,IAAI,CAAC,sBAAsB,EAAE,CAAC;YAChC,CAAC,CAAC,CAAA;QACJ,CAAC;QACD,KAAK,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;IAClC,CAAC;IAQM,cAAc;QACnB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;QACzC,CAAC;aAAM,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAClD,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,CAAA;QAC3C,CAAC;QACD,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAC;IAClC,CAAC;IAEO,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,CAAC;gBACzB,YAAY,EAAE,IAAI;aACnB,EAAE,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACxC,CAAC;aAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,EAAC,CAAC;YACzC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QACjC,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,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC9D,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,GAAG,CAAC,EAAE;gBACpC,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,aAAa,CAAC,MAAmB;QACvC,IAAI,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC,KAAK,MAAM,EAAE,CAAC;YACpD,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;QAC9B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC;QAC5B,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;QACxB,MAAM,QAAQ,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,aAA4B,CAAC,CAAC;QACvD,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;IACxC,CAAC;IAEO,QAAQ,CAAC,KAAY;QAC3B,MAAM,KAAK,GAAG,KAAK,CAAC,MAA0B,CAAC;QAC/C,MAAM,MAAM,GAAG,KAAK,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;QACzC,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,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE;YACrC,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;QAEJ,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1D,CAAC;IAkBD,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,KAAK,CAC5B,CAAC,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,EACxE,GAAG,EAAE;YACL,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,uBAAuB,CAAC,MAAM,EAAE,CAAC;gBACzC,OAAO,qBAAqB,CAAC;YAC/B,CAAC;YACD,IAAI,IAAI,CAAC,uBAAuB,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;gBAC9C,OAAO,IAAI,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;YAC3D,CAAC;YAED,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;gBACxB,OAAO,sBAAsB,CAAC;YAChC,CAAC;YAED,OAAO,GAAG,IAAI,CAAC,uBAAuB,CAAC,MAAM,mBAAmB,CAAC;QACnE,CAAC,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;;;cAGD,IAAI,CAAC,EAAE;gBACL,IAAI,CAAC,IAAI;;sBAEH,IAAI,CAAC,YAAY;2BACZ,IAAI,CAAC,cAAc;;yBAErB,IAAI,CAAC,EAAE;yBACP,IAAI,CAAC,SAAS;;;yBAGd,IAAI,CAAC,QAAQ;wBACd,CAAC,IAAI,CAAC,QAAQ;6BACT,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,IAAI,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO;yBACrD,IAAI,CAAC,QAAQ;oBAClB,IAAI,CAAC,QAAQ;iCACA,SAAS,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC;kBACnD,IAAI,CAAC,QAAQ;kBACb,IAAI,CAAC,OAAO;wBACN,gBAAgB;qBACnB,IAAI,CAAC,eAAe;;gBAEzB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE;SACzC,CAAC;IACR,CAAC;IA2BO,aAAa,CAAC,MAAyB;QAC7C,IAAI,IAAI,CAAC,OAAO,KAAK,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;YACxI,OAAO,OAAO,CAAC;QACjB,CAAC;QAED,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,OAAO,CAAC,IAAI,CAAC,WAAW,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC;QAC9D,OAAO,IAAI,CAAA;;;cAGD,IAAI,CAAC,EAAE,WAAW,MAAM,CAAC,KAAK;wBACpB,IAAI,CAAC,WAAW,IAAI,MAAM,CAAC,QAAQ;sBACrC,MAAM;kBACV,IAAI,CAAC,cAAc;sBACf,CAAC,KAAiB,EAAE,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE;sBAC7C,MAAM,CAAC,KAAK;wBACV,MAAM,CAAC,QAAQ;sBACjB,MAAM,CAAC,MAAM,IAAI,OAAO;4BAClB,CAAC,MAAM,CAAC,QAAQ;;;UAGlC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAA,mCAAmC,QAAQ;4FACgB,CAAC,CAAC,CAAC,OAAO;gBACtF,UAAU,CAAC,MAAM,CAAC,SAAS,CAAC;YAChC,CAAC;IACX,CAAC;IASO,gBAAgB;QACtB,OAAO,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,CAAC,CAAC;IACxC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;mDACoC,IAAI,CAAC,QAAQ,eAAe,IAAI,CAAC,QAAQ,aAAa,IAAI,CAAC,QAAQ;4BAC1F,IAAI,CAAC,QAAQ;;UAE/B,IAAI,CAAC,eAAe,EAAE;UACtB,IAAI,CAAC,cAAc,EAAE;;gBAEf,IAAI,CAAC,EAAE;;kCAEW,IAAI,CAAC,WAAW;wBAC1B,IAAI,CAAC,YAAY;;;kBAGvB,IAAI,CAAC,gBAAgB,EAAE;;kBAEvB,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;;;;wCAK/C,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC;gDAC3B,IAAI,CAAC,EAAE,mDAAmD,CAAC,IAAI,CAAC,gBAAgB,EAAE;UACxH,SAAS,CAAC,KAAK,CAAC;;;KAGrB,CAAC;IACJ,CAAC;;AApeM,iBAAM,GAAG,MAAM,AAAT,CAAU;AAEhB,yBAAc,GAAG,IAAI,AAAP,CAAQ;AAEtB,4BAAiB,GAAG;IACzB,GAAG,UAAU,CAAC,iBAAiB;IAC/B,cAAc,EAAE,IAAI;CACrB,AAHuB,CAGtB;AAGF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;+CACN;AAGpB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CACT;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;2CACV;AAMhB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAC,CAAC;oDAClC;AAGzB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;4CACT;AAGjB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;wCACf;AAGV;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;kDAC/B;AAGzB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAC,CAAC;6CACjC;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACN;AAOX;IADT,KAAK,EAAE;iDAC6B;AAG3B;IADT,KAAK,EAAE;6CACoB;AAGlB;IADT,KAAK,EAAE;2CACuB;AAG/B;IADC,qBAAqB,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAC,CAAC;2CACzB;AAGnC;IADC,qBAAqB,CAAC,EAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,wBAAwB,EAAC,CAAC;iDACnC;AAG/B;IADT,qBAAqB,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;iDACM;AAGnC;IADT,QAAQ,CAAC,qEAAqE,CAAC;mDAC3B;AAG3C;IADT,QAAQ,CAAC,0EAA0E,CAAC;sDAC7B;AAG9C;IADT,QAAQ,CAAC,gGAAgG,CAAC;6DAC5C;AAGrD;IADT,QAAQ,CAAC,wEAAwE,CAAC;oDAC7B;AAG5C;IADT,QAAQ,CAAC,8FAA8F,CAAC;2DACvC;AAGxD;IADT,KAAK,CAAC,wBAAwB,CAAC;kDACY;AAGlC;IADT,KAAK,CAAC,iBAAiB,CAAC;kDACoB;AAS7C;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,CAAA,KAAa,CAAA,EAAE,SAAS,EAAE,OAAO,EAAC,CAAC;uCASnD","sourcesContent":["/* eslint-disable lit-a11y/click-events-have-key-events */\nimport { 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';\n\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\n  _extValue: string[] = [];\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  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: 'option:not([disabled])'})\n  activeOptions!: Array<HTMLOptionElement>;\n\n  @queryAssignedElements({slot: 'error'})\n  protected errorElements!: Array<HTMLElement>;\n\n  @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [aria-hidden=\"true\"])')\n  protected _visibleOptions!: Array<HTMLOptionElement>;\n\n  @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"])')\n  protected _selectableOptions!: Array<HTMLOptionElement>;\n\n  @queryAll('li[role=\"option\"]:not([aria-disabled=\"true\"], [data-value=\"select-all\"], [aria-hidden=\"true\"])')\n  protected _selectableVisibleOptions!: Array<HTMLOptionElement>;\n\n  @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"])[aria-selected=\"true\"]')\n  protected _selectedOptions!: Array<HTMLOptionElement>;\n\n  @queryAll('li[role=\"option\"]:not([data-value=\"select-all\"], [aria-hidden=\"true\"])[aria-selected=\"true\"]')\n  protected _selectedVisibleOptions!: NodeListOf<HTMLOptionElement>;\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  public get value(): string[] {\n    return Array.from(this._selectedOptions).map(option => option.dataset.value!);\n  }\n\n  @property({type: Array<String>, attribute: 'value'})\n  public set value(selection: string[]) {\n    this._selectableOptions.forEach(option => {\n      if (selection.includes(option.dataset.value!)) {\n        this._checkOption(option);\n      } else {\n        this._uncheckOption(option);\n      }\n    });\n  }\n\n  private get _isAllSelected(): boolean {\n    return Array.from(this._selectableVisibleOptions).every(option => Array.from(this._selectedVisibleOptions).includes(option));\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  }\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\n    super.firstUpdated(changedProperties);\n  }\n\n  protected update(changedProperties: PropertyValues) {\n    if (changedProperties.has('value') && changedProperties.get('value') !== undefined && JSON.stringify(changedProperties.get('value')) !== JSON.stringify(this.value)) {\n      this._dispatchSelectedOptions();\n      this._reportValidity();\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        this.value = Array.from(new Set([...this.value, ...Array.from(this._selectedOptions).map(option => option.dataset.value!)]));\n        this._listenForOptionChange();\n      })\n    }\n    super.update(changedProperties);\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  public reportValidity() {\n    if (!this._isValid) {\n      this.internals.states.add('--invalid');\n    } else if (this.internals.states.has('--invalid')) {\n      this.internals.states.delete('--invalid')\n    }\n    this.internals.reportValidity();\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        valueMissing: true\n      }, errorMessage, this._comboboxInput);\n    } else if (!this.internals.validity.valid){\n      this.internals.setValidity({});\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 _toggleOption(option: HTMLElement) {\n    if (option.getAttribute('aria-selected') === 'true') {\n      this._uncheckOption(option);\n    } else {\n      this._checkOption(option);\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    const oldValue = [...this.value];\n    this._toggleOption(event.currentTarget as HTMLElement);\n    this.requestUpdate('value', oldValue);\n  }\n\n  private _onInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    const filter = input.value.toLowerCase();\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(new Event('change', {\n      bubbles: true,\n      composed: true\n    }));\n\n    this.internals.setFormValue(JSON.stringify(this.value));\n  }\n\n  private _selectAll = (event: MouseEvent) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    const oldValue = [...this.value];\n\n    if (this.value.length === this._selectableOptions.length) {\n      // this.value = this.value.filter(value => ![...this._selectableOptions].some(option => option.dataset.value === value));\n      this._selectableOptions.forEach(option => this._uncheckOption(option));\n    } else {\n      this._selectableOptions.forEach(option => this._checkOption(option));\n    }\n\n    this.requestUpdate('value', oldValue);\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],\n      () => {\n      if (this.placeholder) {\n        return this.placeholder;\n      }\n\n      if (this.disabled) {\n        return 'Disabled';\n      }\n      if (!this._selectedVisibleOptions.length) {\n        return 'No options selected';\n      }\n      if (this._selectedVisibleOptions.length === 1) {\n        return this._selectedVisibleOptions[0].innerText?.trim();\n      }\n\n      if (this._isAllSelected) {\n        return 'All options selected';\n      }\n\n      return `${this._selectedVisibleOptions.length} options selected`;\n    });\n\n    return html`\n      <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    // eslint-disable-next-line lit-a11y/click-events-have-key-events\n    return html`\n      <li\n        class=\"select-all\"\n        role=\"option\"\n        id=\"${this.id}-option-select-all\"\n        aria-selected=\"${selected}\"\n        data-active=${active}\n        @click=\"${this._selectAll}\"\n        @mousedown=\"${(evt: MouseEvent) => evt.preventDefault()}\"\n        data-value=\"select-all\"\n        part=\"option\"\n      >\n        <input type=\"checkbox\" ?checked=${selected} role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">\n        Select all\n      </li>`;\n  };\n\n  private _renderOption(option: HTMLOptionElement) {\n    if (this._filter !== '' && !option.value.toLowerCase().includes(this._filter) && !option.innerText.toLowerCase().includes(this._filter)) {\n      return nothing;\n    }\n\n    const id = `${this.id}-option-${option.value}`;\n    const active = this._getActiveOptionId() === id;\n    const selected = Boolean(this.multiselect && option.selected);\n    return html`\n      <li\n        role=\"option\"\n        id=\"${this.id}-option-${option.value}\"\n        aria-selected=${this.multiselect && option.selected}\n        data-active=${active}\n        @click=\"${this._onClickOption}\"\n        @mousedown=\"${(event: MouseEvent) => event.preventDefault()}\"\n        data-value=\"${option.value}\"\n        aria-disabled=${option.disabled}\n        aria-hidden=${option.hidden || nothing}\n        data-deselectable=${!option.selected}\n        part=\"option\"\n      >\n        ${this.multiselect ? html`<input type=\"checkbox\" ?checked=${selected}\n                                         role=\"presentation\" tabindex=\"-1\" part=\"checkbox\">` : nothing}\n        <span>${unsafeHTML(option.innerHTML)}</span>\n      </li>`;\n  }\n\n  private _renderChevron = () => html`\n    <button type=\"button\" aria-label=\"Expand\" @click=\"${this._onChevronClick}\" aria-expanded=\"${this._expanded}\"\n            aria-controls=\"${this.id}-list\" tabindex=\"-1\" ?disabled=${this.disabled} part=\"arrow\">\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 class=\"tt-combobox-container\" @focus=\"${this._onFocus}\" @keydown=\"${this._onKeyUp}\" @click=\"${this._onClick}\"\n           aria-disabled=\"${this.disabled}\" part=\"container\">\n        <slot name=\"icon\" part=\"icon\"></slot>\n        ${this._renderCombobox()}\n        ${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        >\n                ${this._renderSelectAll()}\n\n                ${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 class=\"errormessage\" id=\"error-msg-${this.id}\" role=\"alert\" aria-atomic=\"true\" ?data-hidden=\"${!this._hasErrorContent()}\" part=\"error\">\n        ${unsafeSVG(alert)}\n        <slot name=\"error\"></slot>\n      </div>\n    `;\n  }\n}\n\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'tt-combobox': TtCombobox;\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export { TtCombobox } from './tt-combobox.js';

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export { TtCombobox } from './tt-combobox.js';
+//# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC","sourcesContent":["export { TtCombobox } from './tt-combobox.js';\n"]}

package/dist/src/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;