'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b7293b2f.js');

const tabCss = ":host{--lu-tab-background-color:#ffffff;--lu-tab-flex:auto;display:flex;position:relative;flex:auto;flex:var(--lu-tab-flex);align-items:center;justify-content:center;cursor:pointer;overflow:hidden}.tab-container{padding:var(--lu-tab-button-padding-top, 1px) var(--lu-tab-button-padding-right, 6px) var(--lu-tab-button-padding-bottom, 1px) var(--lu-tab-button-padding-left, 6px);width:100%;border-style:none;background-color:var(--lu-tab-background-color);color:var(--lu-tab-inactive-color, #222222);cursor:pointer}.tab-container:focus{outline:var(--lu-tab-outline, none)}.inner-container{padding:var(--lu-tab-padding-top, 14px) var(--lu-tab-padding-right, 12px) var(--lu-tab-padding-bottom, 14px) var(--lu-tab-padding-left, 14px);position:relative;font-size:var(--lu-tab-font-size, 16px);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host(.is-active){cursor:auto}:host(.is-active) .tab-container{color:var(--lu-tab-active-color, #222222);cursor:auto}:host(.is-active.no-slide){border-bottom:3px solid var(--lu-tab-active-border-color, #256EC1)}.focus-box{left:0;right:0;display:none;position:absolute;bottom:0;height:3px;background-color:var(--lu-tab-focus-bar-color, #9BC7EE);z-index:1}:host(:focus){outline:var(--lu-tab-outline, none)}:host(:focus) .focus-box{display:block}";

const Tab = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.luTabDidLoad = index.createEvent(this, "luTabDidLoad", 7);
    this.luTabDidDisconnect = index.createEvent(this, "luTabDidDisconnect", 7);
    this.luTabSelect = index.createEvent(this, "luTabSelect", 7);
    this.tabFocus = index.createEvent(this, "tabFocus", 7);
    this.tabBlur = index.createEvent(this, "tabBlur", 7);
    this.isFocused = false;
  }
  componentDidLoad() {
    this.luTabDidLoad.emit();
  }
  disconnectedCallback() {
    this.luTabDidDisconnect.emit();
  }
  onClick() {
    this.luTabSelect.emit({ name: this.name, tabWasActive: this.active });
    if (!this.active) {
      this.active = true;
    }
  }
  handleKeyDown(ev) {
    if (ev.key === "Enter" || ev.key === " " || ev.key === "Spacebar") {
      ev.preventDefault();
      this.luTabSelect.emit({ name: this.name, tabWasActive: this.active });
      if (!this.active) {
        this.active = true;
      }
    }
  }
  handleLuTabFocused() {
    this.isFocused = true;
  }
  handleLuTabBlurred() {
    this.isFocused = false;
  }
  render() {
    return (index.h(index.Host, { "aria-selected": this.active ? "true" : "false", class: {
        "no-slide": this.noSlide,
        "is-active": this.active,
      }, onBlur: () => this.tabBlur.emit(), onFocus: () => this.tabFocus.emit(), role: "tab", tabindex: !this.isFocused && this.active ? 0 : -1 }, index.h("button", { class: "tab-container", tabindex: -1 }, index.h("div", { class: "inner-container" }, index.h("slot", null)), index.h("div", { class: "focus-box" }))));
  }
};
Tab.style = tabCss;

exports.lu_tab = Tab;

//# sourceMappingURL=lu-tab.cjs.entry.js.map