ui-lit/tabs/tab.js

UI Elements on LIT

import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import '../button';
import { focusable } from '../mixins/focusable/index';
import { tabStyles } from './styles';
let LitTab = class LitTab extends focusable(LitElement) {
    constructor() {
        super(...arguments);
        this.value = "";
        this.selected = false;
        this.type = 'button';
        this._tabsHost = null;
        //private _keyPressController = new KeyDownController(this);
        this._currentX = 0;
        this._prevRect = null;
        this._currentWidthScale = 1;
        this.active = false;
        /*
        private _handlekeyDown = (e: KeyboardEvent) => {
            if(e.key === "ArrowRight"){
                (this.nextElementSibling as LitTab | null)?.focus?.()
            }
            if(e.key === "ArrowLeft"){
                (this.previousElementSibling as LitTab | null)?.focus?.()
            }
            if(e.key === "Enter" || e.key === " "){
                this._selectNotify();
            }
        }*/
    }
    setTabsHost(value) {
        this._tabsHost = value;
    }
    connectedCallback() {
        super.connectedCallback();
        this.dispatchEvent(new CustomEvent('tabConnected', {
            detail: this,
            bubbles: true
        }));
    }
    willUpdate(_changedProperties) {
        var _a;
        if (_changedProperties.has("selected") && this.selected && this._prevRect) {
            const rect = this.getBoundingClientRect();
            this._currentX = (((_a = this._prevRect) === null || _a === void 0 ? void 0 : _a.x) || 0) - rect.x;
            this._currentWidthScale = Math.round(this._prevRect.width / rect.width * 1e2) / 1e2;
        }
    }
    disconnectedCallback() {
        var _a;
        super.disconnectedCallback();
        (_a = this._tabsHost) === null || _a === void 0 ? void 0 : _a.disconncetTab(this);
    }
    setSelection(value, prevRect) {
        this._prevRect = prevRect;
        this.selected = value;
    }
    _selectNotify(e) {
        e.preventDefault();
        this.dispatchEvent(new CustomEvent('changed', {
            detail: this.value,
            bubbles: true
        }));
    }
    _prevent(e) {
        e.preventDefault();
    }
    render() {
        return html `
        <lit-button 
            .tabindex = "${-1}"
            @mousedown = "${this._prevent}" 
            @click = "${this._selectNotify}" 
            ?borderless = "${this.type === 'tab'}">
            <slot></slot>
        </lit-button>
        <div class = "border ${this.active ? 'active' : ''}" 
             style = "transform: translateX(${this._currentX}px)  scaleX(${this._currentWidthScale});"></div>`;
    }
    updated(_changedProperties) {
        if (this.selected) {
            if (!this.active) {
                setTimeout(() => this.active = true, 10);
            }
        }
        else {
            this.active = false;
        }
    }
};
LitTab.styles = tabStyles;
__decorate([
    property({ type: String })
], LitTab.prototype, "value", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], LitTab.prototype, "selected", void 0);
__decorate([
    property({ type: String, reflect: true })
], LitTab.prototype, "type", void 0);
__decorate([
    state()
], LitTab.prototype, "active", void 0);
LitTab = __decorate([
    customElement('lit-tab')
], LitTab);
export { LitTab };