ui-lit/tabs/tabs.js

UI Elements on LIT

import { __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { formAssociated } from '../mixins/form-associated/index';
import { property, customElement } from 'lit/decorators.js';
import { scrollbar } from '../styles/scrollbar';
import { focusable } from '../mixins/focusable/index';
import { tabsStyles } from './styles';
let LitTabs = class LitTabs extends focusable(formAssociated(LitElement)) {
    constructor() {
        super(...arguments);
        this.type = 'tab';
        this._tabs = [];
        this._value = '';
        this._updateSelected = (prevRect) => {
            this._tabs.forEach(it => {
                it.setSelection(it.value === this._value, prevRect);
            });
        };
        this._updateType = () => {
            this._tabs.forEach(it => it.type = this.type);
        };
        this._tabConnected = (e) => {
            this._tabs.push(e.detail);
            e.detail.type = this.type;
            this._updateSelected();
        };
        this._handleSelect = (e) => {
            this.value = e.detail;
        };
        this._handleKeyEvent = (e) => {
            if (e.key === 'ArrowLeft') {
                this.selectedIndex = this.selectedIndex - 1;
            }
            else if (e.key === 'ArrowRight') {
                this.selectedIndex = this.selectedIndex + 1;
            }
        };
    }
    static get styles() {
        return [...super.elementStyles, tabsStyles, scrollbar];
    }
    set selectedIndex(value) {
        if (value > this._tabs.length || value < 0)
            return;
        this.value = this._tabs[value].value;
        this.dispatchEvent(new CustomEvent('changed', {
            detail: this.value,
            bubbles: true
        }));
    }
    get selectedIndex() {
        for (let i = 0; i < this._tabs.length; i++) {
            if (this._value === this._tabs[i].value)
                return i;
        }
        return -1;
    }
    get value() {
        return this._value;
    }
    set value(value) {
        var _a;
        if (value === this._value)
            return;
        const prevRect = (_a = this._tabs.find(it => it.value === this._value)) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
        this._value = value;
        this._updateSelected(prevRect);
    }
    willUpdate(_changedProperties) {
        if (_changedProperties.has('type')) {
            this._updateType();
        }
    }
    connectedCallback() {
        super.connectedCallback();
        this.addEventListener('changed', this._handleSelect);
        this.addEventListener('tabConnected', this._tabConnected);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        this.removeEventListener('changed', this._handleSelect);
        this.removeEventListener('tabConnected', this._tabConnected);
    }
    disconncetTab(value) {
        const index = this._tabs.findIndex(it => it === value);
        if (~index) {
            this._tabs.splice(index, 1);
        }
    }
    render() {
        return html `
        <div 
            tabindex = "0" 
            @keydown = "${this._handleKeyEvent}" 
            class = "wrapper"><slot></slot></div>
        `;
    }
};
__decorate([
    property({ type: String })
], LitTabs.prototype, "type", void 0);
LitTabs = __decorate([
    customElement("lit-tabs")
], LitTabs);
export { LitTabs };