import { unsafeCSS, LitElement, nothing, html } from "lit";
import { customElement } from "../../decorator.js";
import compentStyle from "./integration-button.css.js";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.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 ObcIntegrationButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.hasTrailingIcon = false;
    this.hasTrailingIcon2 = false;
    this.hasLeadingIcon = false;
    this.readouts = [];
    this.disabled = false;
    this.selected = false;
    this.dividerBottom = false;
  }
  render() {
    return html`
      <button
        class=${classMap({
      wrapper: true,
      selected: this.selected
    })}
        ?disabled=${this.disabled}
      >
        <div class="main-container">
          ${this.hasLeadingIcon ? html`<div class="icon leading">
                <slot name="leading-icon"></slot>
              </div>` : nothing}
          <div class="text-container">
            <div class="label"><slot name="label"></slot></div>
            <div class="status"><slot name="status"></slot></div>
          </div>
          ${this.hasTrailingIcon ? html`<div class="icon-container">
                ${this.hasTrailingIcon2 ? html`<slot
                      name="trailing-icon2"
                      class="icon trailing"
                    ></slot>` : nothing}
                <slot name="trailing-icon" class="icon trailing"></slot>
              </div>` : nothing}
        </div>
        <div class="info-container">
          <div class="info-item">
            <slot class="info-label" name="info-label"></slot>
            <slot class="info-status" name="info-status"></slot>
          </div>
          ${this.readouts.map(
      (readout) => html`
              <div class="info-readout-item">
                <div class="info-item-label">${readout.label}</div>
                <div class="info-item-value">${readout.value}</div>
                <div class="info-item-unit">${readout.unit}</div>
              </div>
            `
    )}
        </div>
      </button>
      ${this.dividerBottom ? html`<div class="divider-bottom"></div>` : nothing}
    `;
  }
};
ObcIntegrationButton.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Boolean })
], ObcIntegrationButton.prototype, "hasTrailingIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcIntegrationButton.prototype, "hasTrailingIcon2", 2);
__decorateClass([
  property({ type: Boolean })
], ObcIntegrationButton.prototype, "hasLeadingIcon", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcIntegrationButton.prototype, "readouts", 2);
__decorateClass([
  property({ type: Boolean })
], ObcIntegrationButton.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean })
], ObcIntegrationButton.prototype, "selected", 2);
__decorateClass([
  property({ type: Boolean })
], ObcIntegrationButton.prototype, "dividerBottom", 2);
ObcIntegrationButton = __decorateClass([
  customElement("obc-integration-button")
], ObcIntegrationButton);
export {
  ObcIntegrationButton
};
//# sourceMappingURL=integration-button.js.map
