import { unsafeCSS, LitElement, nothing, html } from "lit";
import { customElement } from "../../decorator.js";
import { classMap } from "lit/directives/class-map.js";
import compentStyle from "./tab-item.css.js";
import "../icon-button/icon-button.js";
import { property } from "lit/decorators.js";
import "../../icons/icon-close-google.js";
import { BadgeType, BadgeSize } from "../badge/badge.js";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let ObcTabItem = class extends LitElement {
  constructor() {
    super(...arguments);
    this.hug = false;
    this.centerContent = false;
    this.checked = false;
    this.hasClose = false;
    this.hasLeadingIcon = false;
    this.hasTitle = false;
    this.hasDivider = false;
    this.hasBadge = false;
    this.icon = "placeholder";
    this.title = "Tab title";
    this.disabled = false;
    this.badgeType = BadgeType.regular;
    this.badgeSize = BadgeSize.regular;
    this.badgeShowNumber = true;
    this.badgeCount = 0;
    this.showLeadingBadgeIcon = false;
  }
  handleClick(event) {
    if (this.disabled) {
      event.preventDefault();
      return;
    }
    const clickEvent = new CustomEvent("tab-click", {
      detail: { title: this.title },
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(clickEvent);
  }
  handleClose(event) {
    event.stopPropagation();
    const closeEvent = new CustomEvent("tab-close", {
      detail: { title: this.title },
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(closeEvent);
  }
  handleKeyDown(event) {
    if (event.key === "Enter" || event.key === " ") {
      event.preventDefault();
      this.handleClick(event);
    }
  }
  render() {
    const wrapperClasses = {
      wrapper: true,
      hug: this.hug,
      "has-close": this.hasClose,
      "has-leading-icon": this.hasLeadingIcon,
      "has-title": this.hasTitle,
      "has-divider": this.hasDivider && !this.checked,
      "has-badge": this.hasBadge,
      disabled: this.disabled,
      "center-content": this.centerContent
    };
    return html`
      <div
        class=${classMap(wrapperClasses)}
        role="tab"
        tabindex=${this.disabled ? "-1" : "0"}
        @click=${this.handleClick}
        @keydown=${this.handleKeyDown}
      >
        <div class="content">
          ${this.hasLeadingIcon ? html`
                <div class="leading-icon">
                  <slot name="leading-icon"></slot>
                </div>
              ` : nothing}
          ${this.hasTitle ? html`
                <div class="title">
                  <slot name="title">${this.title}</slot>
                </div>
              ` : nothing}
          ${this.centerContent && this.hasBadge ? html`
                <obc-badge
                  class="badge"
                  .number=${this.badgeCount}
                  .type=${this.badgeType || BadgeType.regular}
                  .size=${this.badgeSize || BadgeSize.regular}
                  .showNumber=${this.badgeShowNumber}
                  .showIcon=${this.showLeadingBadgeIcon}
                >
                  ${this.showLeadingBadgeIcon ? html`<slot name="badge-icon" slot="badge-icon"></slot>` : nothing}
                </obc-badge>
              ` : nothing}
        </div>
        ${!this.centerContent && this.hasBadge ? html`
              <obc-badge
                class="badge"
                .number=${this.badgeCount}
                .type=${this.badgeType || BadgeType.regular}
                .size=${this.badgeSize || BadgeSize.regular}
                .showNumber=${this.badgeShowNumber}
                .showIcon=${this.showLeadingBadgeIcon}
              >
                ${this.showLeadingBadgeIcon ? html`<slot name="badge-icon" slot="badge-icon"></slot>` : nothing}
              </obc-badge>
            ` : nothing}
        ${this.hasClose ? html`
              <obc-icon-button
                class="close-button"
                variant="flat"
                @click=${this.handleClose}
                aria-label="Close tab"
                .disabled=${this.disabled}
                ><obi-close-google></obi-close-google
              ></obc-icon-button>
            ` : nothing}
      </div>
    `;
  }
};
ObcTabItem.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Boolean })
], ObcTabItem.prototype, "hug", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTabItem.prototype, "centerContent", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], ObcTabItem.prototype, "checked", 2);
__decorateClass([
  property({ type: Boolean, attribute: "has-close" })
], ObcTabItem.prototype, "hasClose", 2);
__decorateClass([
  property({ type: Boolean, attribute: "has-leading-icon" })
], ObcTabItem.prototype, "hasLeadingIcon", 2);
__decorateClass([
  property({ type: Boolean, attribute: "has-title" })
], ObcTabItem.prototype, "hasTitle", 2);
__decorateClass([
  property({ type: Boolean, attribute: "has-divider" })
], ObcTabItem.prototype, "hasDivider", 2);
__decorateClass([
  property({ type: Boolean, attribute: "has-badge" })
], ObcTabItem.prototype, "hasBadge", 2);
__decorateClass([
  property({ type: String })
], ObcTabItem.prototype, "icon", 2);
__decorateClass([
  property({ type: String })
], ObcTabItem.prototype, "title", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTabItem.prototype, "disabled", 2);
__decorateClass([
  property({ type: String })
], ObcTabItem.prototype, "badgeType", 2);
__decorateClass([
  property({ type: String })
], ObcTabItem.prototype, "badgeSize", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcTabItem.prototype, "badgeShowNumber", 2);
__decorateClass([
  property({ type: Number })
], ObcTabItem.prototype, "badgeCount", 2);
__decorateClass([
  property({ type: Boolean })
], ObcTabItem.prototype, "showLeadingBadgeIcon", 2);
ObcTabItem = __decorateClass([
  customElement("obc-tab-item")
], ObcTabItem);
export {
  ObcTabItem
};
//# sourceMappingURL=tab-item.js.map
