@universal-material/web/tab-bar/tab.js

Material web components

import { __decorate } from "tslib";
import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { UmButtonWrapper } from '../shared/button-wrapper.js';
import { styles } from './tab.styles.js';
let UmTab = class UmTab extends UmButtonWrapper {
    static { this.styles = [UmButtonWrapper.styles, styles]; }
    #resizeObserver;
    get active() {
        return this._bar?.activeTab === this;
    }
    set active(active) {
        if (!this._bar) {
            return;
        }
        if (active) {
            this._bar.activeTab = this;
            return;
        }
        this._bar.activeTabIndex = 0;
    }
    constructor() {
        super();
        this._bar = null;
        this.#resizeObserver = new ResizeObserver(() => {
            if (this.active) {
                this._bar?._updateTabIndicator();
            }
        });
        this.hasIcon = false;
        this.#resizeObserver.observe(this);
    }
    renderContent() {
        const classes = { active: this.active, ['has-icon']: this.hasIcon };
        return html `
      <div class="tab-content ${classMap(classes)}">
        <div class="icon" part="icon">
          <slot name="icon" @slotchange=${this.#iconSlotChange}></slot>
        </div>
        <div class="label" part="label">
          <slot></slot>
        </div>
      </div>
    `;
    }
    connectedCallback() {
        super.connectedCallback();
        this._bar?._updateTabIndicator();
        this._bar?._setScrollIndicatorsActive();
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        if (!this._bar) {
            return;
        }
        if (this._bar.activeTab === this) {
            this._bar.activeTabIndex = 0;
        }
        this._bar._updateTabIndicator();
        this._bar._setScrollIndicatorsActive();
        this._bar = null;
    }
    handleClick(_) {
        super.handleClick(_);
        if (!this._bar) {
            return;
        }
        const changePrevented = !this._bar.dispatchEvent(new Event('changing', { bubbles: true, cancelable: true }));
        if (changePrevented) {
            return;
        }
        this._bar.activeTab = this;
        this._bar.dispatchEvent(new Event('change', { bubbles: true }));
    }
    #iconSlotChange(e) {
        const slot = e.target;
        this.hasIcon = !!slot.assignedElements({ flatten: true }).length;
    }
};
__decorate([
    state()
], UmTab.prototype, "active", null);
__decorate([
    property({ type: Boolean })
], UmTab.prototype, "hasIcon", void 0);
UmTab = __decorate([
    customElement('u-tab')
], UmTab);
export { UmTab };
//# sourceMappingURL=tab.js.map