import { unsafeCSS, LitElement, html } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./stepper-box.css.js";
import "../../icons/icon-down-iec.js";
import "../icon-button/icon-button.js";
import "../../icons/icon-up-iec.js";
import "../../icons/icon-chevron-up-google.js";
import "../../icons/icon-chevron-down-google.js";
import "../../icons/icon-chevron-right-google.js";
import "../../icons/icon-chevron-left-google.js";
import { customElement } from "../../decorator.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;
};
var ObcStepperBoxType = /* @__PURE__ */ ((ObcStepperBoxType2) => {
  ObcStepperBoxType2["upDown"] = "up-down";
  ObcStepperBoxType2["leftRight"] = "left-right";
  ObcStepperBoxType2["plusMinus"] = "plus-minus";
  return ObcStepperBoxType2;
})(ObcStepperBoxType || {});
let ObcStepperBox = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "plus-minus";
    this.hasHelperText = false;
    this.disabled = false;
  }
  get leftIcon() {
    if (this.type === "up-down") {
      return html`<obi-chevron-down-google></obi-chevron-down-google>`;
    } else if (this.type === "left-right") {
      return html`<obi-chevron-left-google></obi-chevron-left-google>`;
    } else {
      return html`<obi-down-iec></obi-down-iec>`;
    }
  }
  get rightIcon() {
    if (this.type === "up-down") {
      return html`<obi-chevron-up-google></obi-chevron-up-google>`;
    } else if (this.type === "left-right") {
      return html`<obi-chevron-right-google></obi-chevron-right-google>`;
    } else {
      return html`<obi-up-iec></obi-up-iec>`;
    }
  }
  render() {
    const wrapperClasses = {
      wrapper: true,
      disabled: this.disabled
    };
    return html`
      <div class=${classMap(wrapperClasses)} aria-disabled=${this.disabled}>
        <obc-icon-button
          cornerleft
          ?disabled=${this.disabled}
          @click=${() => this.down()}
        >
          ${this.leftIcon}
        </obc-icon-button>
        <div class="display">
          <div class="value">
            <slot></slot>
          </div>
          <div class="unit">
            <slot name="unit"></slot>
          </div>
        </div>
        <obc-icon-button
          cornerright
          ?disabled=${this.disabled}
          @click=${() => this.up()}
        >
          ${this.rightIcon}
        </obc-icon-button>
      </div>
      ${this.hasHelperText ? html`<div
            class=${classMap({ "helper-text": true, disabled: this.disabled })}
          >
            <slot name="helper-text"></slot>
          </div>` : ""}
    `;
  }
  /**
   * Dispatches the `down` event when the decrement button is clicked.
   * @fires down
   */
  down() {
    if (this.disabled) {
      return;
    }
    this.dispatchEvent(new CustomEvent("down"));
  }
  /**
   * Dispatches the `up` event when the increment button is clicked.
   * @fires up
   */
  up() {
    if (this.disabled) {
      return;
    }
    this.dispatchEvent(new CustomEvent("up"));
  }
};
ObcStepperBox.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: String })
], ObcStepperBox.prototype, "type", 2);
__decorateClass([
  property({ type: Boolean })
], ObcStepperBox.prototype, "hasHelperText", 2);
__decorateClass([
  property({ type: Boolean })
], ObcStepperBox.prototype, "disabled", 2);
ObcStepperBox = __decorateClass([
  customElement("obc-stepper-box")
], ObcStepperBox);
export {
  ObcStepperBox,
  ObcStepperBoxType
};
//# sourceMappingURL=stepper-box.js.map
