import { unsafeCSS, LitElement, html } from "lit";
import { customElement } from "../../decorator.js";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import compentStyle from "./rich-button.css.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;
};
var RichButtonDirection = /* @__PURE__ */ ((RichButtonDirection2) => {
  RichButtonDirection2["Vertical"] = "vertical";
  RichButtonDirection2["Horizontal"] = "horizontal";
  return RichButtonDirection2;
})(RichButtonDirection || {});
let ObcRichButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.label = "";
    this.description = "";
    this.direction = "vertical";
    this.hasLeadingIcon = false;
    this.hasTrailingIcon = false;
    this.disabled = false;
    this.fullWidth = false;
    this.fullHeight = false;
  }
  handleClick() {
    if (this.disabled) return;
    this.dispatchEvent(
      new CustomEvent("rich-button-click", {
        detail: {
          label: this.label,
          description: this.description
        }
      })
    );
  }
  renderContent() {
    return html`
      ${this.hasLeadingIcon ? html`
            <div class="icon-container leading-icon">
              <slot name="leading-icon"></slot>
            </div>
          ` : ""}

      <div class="content-container">
        <div class="label">${this.label}</div>
        ${this.description ? html`<div class="description">${this.description}</div>` : ""}
      </div>

      ${this.hasTrailingIcon ? html`
            <div class="icon-container trailing-icon">
              <slot name="trailing-icon"></slot>
            </div>
          ` : ""}
    `;
  }
  render() {
    return html`
      <button
        class=${classMap({
      "rich-button": true,
      "direction-vertical": this.direction === "vertical",
      "direction-horizontal": this.direction === "horizontal",
      "has-leading-icon": this.hasLeadingIcon,
      "has-trailing-icon": this.hasTrailingIcon,
      disabled: this.disabled,
      "full-width": this.fullWidth,
      "full-height": this.fullHeight
    })}
        @click=${this.handleClick}
        ?disabled=${this.disabled}
      >
        ${this.renderContent()}
      </button>
    `;
  }
};
ObcRichButton.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcRichButton.prototype, "label", 2);
__decorateClass([
  property({ type: String })
], ObcRichButton.prototype, "description", 2);
__decorateClass([
  property({ type: String })
], ObcRichButton.prototype, "direction", 2);
__decorateClass([
  property({ type: Boolean })
], ObcRichButton.prototype, "hasLeadingIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcRichButton.prototype, "hasTrailingIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcRichButton.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean })
], ObcRichButton.prototype, "fullWidth", 2);
__decorateClass([
  property({ type: Boolean })
], ObcRichButton.prototype, "fullHeight", 2);
ObcRichButton = __decorateClass([
  customElement("obc-rich-button")
], ObcRichButton);
export {
  ObcRichButton,
  RichButtonDirection
};
//# sourceMappingURL=rich-button.js.map
