import { unsafeCSS, LitElement, nothing } from "lit";
import { literal, html } from "lit/static-html.js";
import { property } from "lit/decorators.js";
import compentStyle from "./elevated-card.css.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit-html/directives/if-defined.js";
import "../button/button.js";
import { customElement } from "../../decorator.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 ObcElevatedCardPosition = /* @__PURE__ */ ((ObcElevatedCardPosition2) => {
  ObcElevatedCardPosition2["Regular"] = "regular";
  ObcElevatedCardPosition2["Top"] = "top";
  ObcElevatedCardPosition2["Bottom"] = "bottom";
  ObcElevatedCardPosition2["Center"] = "center";
  return ObcElevatedCardPosition2;
})(ObcElevatedCardPosition || {});
var ObcElevatedCardSize = /* @__PURE__ */ ((ObcElevatedCardSize2) => {
  ObcElevatedCardSize2["SingleLine"] = "single-line";
  ObcElevatedCardSize2["DoubleLine"] = "double-line";
  ObcElevatedCardSize2["MultiLine"] = "multi-line";
  return ObcElevatedCardSize2;
})(ObcElevatedCardSize || {});
var ObcElevatedCardTag = /* @__PURE__ */ ((ObcElevatedCardTag2) => {
  ObcElevatedCardTag2["Button"] = "button";
  ObcElevatedCardTag2["Anchor"] = "a";
  ObcElevatedCardTag2["Article"] = "article";
  ObcElevatedCardTag2["Div"] = "div";
  return ObcElevatedCardTag2;
})(ObcElevatedCardTag || {});
let ObcElevatedCard = class extends LitElement {
  constructor() {
    super(...arguments);
    this.position = "regular";
    this.size = "single-line";
    this.isClickable = true;
    this.info = false;
    this.graphicBorder = false;
    this.border = false;
    this.hasAction = false;
    this.hasLeadingIcon = false;
    this.hasTrailingIcon = false;
    this.hasGraphic = false;
    this.hasStatus = false;
    this.compact = false;
    this.directAction = false;
  }
  render() {
    let tag = this.href ? literal`a` : literal`button`;
    tag = !this.isClickable ? literal`article` : tag;
    if (this.overrideTag !== void 0) {
      switch (this.overrideTag) {
        case "a":
          tag = literal`a`;
          break;
        case "button":
          tag = literal`button`;
          break;
        case "article":
          tag = literal`article`;
          break;
        case "div":
          tag = literal`div`;
          break;
        default:
          throw new Error("Invalid tag");
      }
    }
    if (this.hasAction) {
      tag = literal`article`;
      this.isClickable = false;
    }
    return html`
    <div class="wrapper ${this.position}">
        <${tag} class=${classMap({
      button: true,
      [this.position]: true,
      [this.size]: true,
      "graphic-border": this.graphicBorder,
      info: this.info,
      border: this.border,
      "has-leading-icon": this.hasLeadingIcon,
      "has-trailing-icon": this.hasTrailingIcon,
      "has-graphic": this.hasGraphic,
      "has-status": this.hasStatus,
      "not-clickable": !this.isClickable,
      "has-action": this.hasAction,
      compact: this.compact,
      "direct-action": this.directAction
    })}
        part="wrapper" href=${ifDefined(this.href)} target=${ifDefined(this.target)}>
          ${this.hasGraphic ? html`<div class="graphic"><slot name="graphic"></slot></div>` : nothing}
          <div class="content-container" part="content-container">
            <div class="container-content">
              ${this.hasLeadingIcon ? html`<div class="leading-icon" part="leading-icon">
                      <slot name="leading-icon"></slot>
                    </div>` : nothing}
              <div class="content" part="label">
                <slot name="label"></slot>
                ${this.size === "single-line" ? nothing : html`<slot name="description"></slot>`}
              </div>
            </div>
            ${this.hasStatus ? html`<div class="status" part="status">
                    <slot name="status"></slot>
                  </div>` : nothing}
            ${this.hasAction ? html`<obc-button
                    variant="normal"
                    class="action"
                    part="action"
                    @click=${() => {
      this.dispatchEvent(new CustomEvent("action-click"));
    }}
                  >
                    <slot name="action"></slot>
                  </obc-button>` : nothing}
            ${this.hasTrailingIcon ? html`<div class="trailing-icon" part="trailing-icon">
                    <slot name="trailing-icon"></slot>
                  </div>` : nothing}
          </div>
        </${tag}>
        </div>
    `;
  }
};
ObcElevatedCard.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcElevatedCard.prototype, "position", 2);
__decorateClass([
  property({ type: String })
], ObcElevatedCard.prototype, "size", 2);
__decorateClass([
  property({ type: String })
], ObcElevatedCard.prototype, "overrideTag", 2);
__decorateClass([
  property({ type: Boolean, attribute: false })
], ObcElevatedCard.prototype, "isClickable", 2);
__decorateClass([
  property({ type: Boolean })
], ObcElevatedCard.prototype, "info", 2);
__decorateClass([
  property({ type: Boolean })
], ObcElevatedCard.prototype, "graphicBorder", 2);
__decorateClass([
  property({ type: Boolean })
], ObcElevatedCard.prototype, "border", 2);
__decorateClass([
  property({ type: Boolean })
], ObcElevatedCard.prototype, "hasAction", 2);
__decorateClass([
  property({ type: Boolean })
], ObcElevatedCard.prototype, "hasLeadingIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcElevatedCard.prototype, "hasTrailingIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcElevatedCard.prototype, "hasGraphic", 2);
__decorateClass([
  property({ type: Boolean })
], ObcElevatedCard.prototype, "hasStatus", 2);
__decorateClass([
  property({ type: Boolean })
], ObcElevatedCard.prototype, "compact", 2);
__decorateClass([
  property({ type: Boolean })
], ObcElevatedCard.prototype, "directAction", 2);
__decorateClass([
  property({ type: String })
], ObcElevatedCard.prototype, "href", 2);
__decorateClass([
  property({ type: String })
], ObcElevatedCard.prototype, "target", 2);
ObcElevatedCard = __decorateClass([
  customElement("obc-elevated-card")
], ObcElevatedCard);
export {
  ObcElevatedCard,
  ObcElevatedCardPosition,
  ObcElevatedCardSize,
  ObcElevatedCardTag
};
//# sourceMappingURL=elevated-card.js.map
