ui-lit/select/listbox.js

UI Elements on LIT

import { __decorate } from "tslib";
import { LitElement, html, nothing } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { mobileAndTabletCheck } from 'kailib';
import { scrollbar } from '../styles/scrollbar';
import { listboxStyles } from './styles';
let ListBox = class ListBox extends LitElement {
    constructor() {
        super(...arguments);
        this.position = 'auto';
        this.open = false;
        this.mobile = mobileAndTabletCheck();
        this._onClick = (e) => {
            let clickInOption = false;
            for (const el of e.composedPath()) {
                const tag = (el.tagName || '').toLowerCase();
                if (tag === 'lit-option') {
                    clickInOption = true;
                    break;
                }
            }
            if (!clickInOption) {
                this.dispatchEvent(new CustomEvent('listboxClose', {
                    detail: true,
                    composed: true,
                    bubbles: true
                }));
            }
            else {
                this._calcPosition();
            }
        };
    }
    _calcPosition() {
        var _a;
        if (!this.isConnected || this.mobile)
            return;
        const host = (_a = this.parentNode.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".wrapper");
        const wrapper = this.shadowRoot.querySelector(".wrapper");
        if (!host)
            return;
        const rect = host.getBoundingClientRect();
        const topAvailable = rect.top;
        const bottomAvailable = window.visualViewport.height - rect.bottom;
        const floatRight = window.visualViewport.width / 2 - rect.left < 0;
        this.style.minWidth = rect.width + "px";
        if (floatRight) {
            this.style.right = '0';
            this.style.left = 'initial';
        }
        else {
            this.style.right = 'initial';
            this.style.left = '0';
        }
        if (topAvailable > bottomAvailable && this.position === 'auto') {
            this.style.top = '0';
            this.style.transform = 'translateY(calc(-100% - 1px))';
            if (wrapper) {
                wrapper.style.maxHeight = (topAvailable - 2) + "px";
            }
            this.style.setProperty('--shadow-pos', "-1");
        }
        else {
            this.style.top = host.clientHeight + "px";
            this.style.transform = 'none';
            if (wrapper) {
                wrapper.style.maxHeight = (bottomAvailable - 2) + "px";
            }
            this.style.setProperty('--shadow-pos', "1");
        }
    }
    willUpdate(_changedProperties) {
        if (_changedProperties.has('open')) {
            this._calcPosition();
        }
    }
    updated(_changedProperties) {
        setTimeout(() => {
            if (_changedProperties.has('open')) {
                if (this.open) {
                    document.addEventListener("click", this._onClick);
                }
                else {
                    document.removeEventListener("click", this._onClick);
                }
            }
        });
    }
    render() {
        if (!this.open)
            return nothing;
        return html `<div class = "wrapper ff-scrollbar"><slot></slot></div>`;
    }
};
ListBox.styles = [listboxStyles, scrollbar];
__decorate([
    property({ type: String })
], ListBox.prototype, "position", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ListBox.prototype, "open", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], ListBox.prototype, "mobile", void 0);
ListBox = __decorate([
    customElement("lit-listbox")
], ListBox);
export { ListBox };