import { __decorate } from "tslib";
import { customElement, css, display, html, ref, attribute } from "@hpcc-js/wc-core";
import { TabPanel, Widget } from "@lumino/widgets";
import { HPCCLuminoElement } from "./common";
import { tabbar, tabpanel, widget } from "./styles";
import { tabbar as tabbarTheme } from "./theme";
const template = html `\
<div ${ref("_div")}>
</div>
<slot ${ref("_slot")}></slot>`;
const styles = css `
${display("inline-block")} 

:host > slot {
    visibility: hidden;
}

${widget}
${tabbar}
${tabpanel}

${tabbarTheme}

.hpcc-LuminoAdapter {
    padding: 8px;
    border: 1px solid #c0c0c0;
}

:host-context([tab_placement="top"]) .hpcc-LuminoAdapter  {
    border-top: none;
}

:host-context([tab_placement="bottom"]) .hpcc-LuminoAdapter  {
    border-bottom: none;
}
`;
let HPCCTabPanelElement = class HPCCTabPanelElement extends HPCCLuminoElement {
    constructor() {
        super();
        /**
         *  Whether the tabs are movable by the user
         *
         * @defaultValue false
         */
        this.tabs_movable = false;
        /**
         *  Whether the button to add new tabs is enabled
         *
         * @defaultValue false
         */
        this.add_button_enabled = false;
        /**
         *  The placement of the tab bar relative to the content
         *
         * @defaultValue "top"
         */
        this.tab_placement = "top";
    }
    createPanel() {
        this._tabPanel = new TabPanel({ document: this.shadowRoot, tabsMovable: this.tabs_movable, addButtonEnabled: this.add_button_enabled, tabPlacement: this.tab_placement });
    }
    addWidget(w, _e, _ref) {
        this._tabPanel.addWidget(w);
    }
    enter() {
        super.enter();
        Widget.attach(this._tabPanel, this._div);
    }
    update(changes) {
        super.update(changes);
        this._tabPanel.tabsMovable = this.tabs_movable;
        this._tabPanel.addButtonEnabled = this.add_button_enabled;
        this._tabPanel.tabPlacement = this.tab_placement;
        this._tabPanel.node.style.width = `${this.clientWidth}px`;
        this._tabPanel.node.style.height = `${this.clientHeight}px`;
        this._tabPanel.update();
    }
    exit() {
        Widget.detach(this._tabPanel);
        super.exit();
    }
};
__decorate([
    attribute({ type: "boolean" })
], HPCCTabPanelElement.prototype, "tabs_movable", void 0);
__decorate([
    attribute({ type: "boolean" })
], HPCCTabPanelElement.prototype, "add_button_enabled", void 0);
__decorate([
    attribute
], HPCCTabPanelElement.prototype, "tab_placement", void 0);
HPCCTabPanelElement = __decorate([
    customElement("hpcc-tabpanel", { template, styles })
], HPCCTabPanelElement);
export { HPCCTabPanelElement };
//# sourceMappingURL=tabPanel.js.map