@synergy-design-system/components/dist/chunks/chunk.LPGTHYDQ.js

import {
  tab_custom_styles_default
} from "./chunk.XC4GHHH2.js";
import {
  tab_styles_default
} from "./chunk.JDYQ7EFG.js";
import {
  SynIconButton
} from "./chunk.5XHXH7QA.js";
import {
  LocalizeController
} from "./chunk.ZXMSJF2M.js";
import {
  watch
} from "./chunk.UR2E7Y2Q.js";
import {
  component_styles_default
} from "./chunk.2NT3B5WJ.js";
import {
  SynergyElement
} from "./chunk.L2IYPRPF.js";
import {
  __decorateClass
} from "./chunk.VK2FVWOF.js";

// src/components/tab/tab.component.ts
import { classMap } from "lit/directives/class-map.js";
import { html } from "lit";
import { property, query } from "lit/decorators.js";
var id = 0;
var SynTab = class extends SynergyElement {
  constructor() {
    super(...arguments);
    this.localize = new LocalizeController(this);
    this.attrId = ++id;
    this.componentId = `syn-tab-${this.attrId}`;
    this.panel = "";
    this.active = false;
    this.closable = false;
    this.disabled = false;
    this.tabIndex = 0;
  }
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute("role", "tab");
  }
  handleCloseClick(event) {
    event.stopPropagation();
    this.emit("syn-close");
  }
  handleActiveChange() {
    this.setAttribute("aria-selected", this.active ? "true" : "false");
  }
  handleDisabledChange() {
    this.setAttribute("aria-disabled", this.disabled ? "true" : "false");
    if (this.disabled && !this.active) {
      this.tabIndex = -1;
    } else {
      this.tabIndex = 0;
    }
  }
  render() {
    this.id = this.id.length > 0 ? this.id : this.componentId;
    return html`
      <div
        part="base"
        class=${classMap({
      tab: true,
      "tab--active": this.active,
      "tab--closable": this.closable,
      "tab--disabled": this.disabled
    })}
      >
        <slot></slot>
        ${this.closable ? html`
              <syn-icon-button
                part="close-button"
                exportparts="base:close-button__base"
                name="x-lg"
                library="system"
                label=${this.localize.term("close")}
                class="tab__close-button"
                @click=${this.handleCloseClick}
                tabindex="-1"
              ></syn-icon-button>
            ` : ""}
      </div>
    `;
  }
};
SynTab.styles = [component_styles_default, tab_styles_default, tab_custom_styles_default];
SynTab.dependencies = { "syn-icon-button": SynIconButton };
__decorateClass([
  query(".tab")
], SynTab.prototype, "tab", 2);
__decorateClass([
  property({ reflect: true })
], SynTab.prototype, "panel", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SynTab.prototype, "active", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SynTab.prototype, "closable", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], SynTab.prototype, "disabled", 2);
__decorateClass([
  property({ type: Number, reflect: true })
], SynTab.prototype, "tabIndex", 2);
__decorateClass([
  watch("active")
], SynTab.prototype, "handleActiveChange", 1);
__decorateClass([
  watch("disabled")
], SynTab.prototype, "handleDisabledChange", 1);

export {
  SynTab
};
//# sourceMappingURL=chunk.LPGTHYDQ.js.map