import { r as registerInstance, c as createEvent, h, H as Host } from './index-442cf464.js';

const toggleCss = ":host{display:inline-block}.container{border-radius:2px;display:flex;border:1px solid #686a6f}.toggle{padding:var(--lu-toggle-padding-top, 0.563em) var(--lu-toggle-padding-end, 2em) var(--lu-toggle-padding-bottom, 0.563em) var(--lu-toggle-padding-start, 3em);position:relative;border-style:none;background-color:#ffffff;font-family:var(--lu-toggle-font-family, \"Roboto\", sans-serif);font-size:var(--lu-toggle-font-size, 16px)}button{margin:0}.left-toggle{display:flex;align-items:center;justify-content:end;border-right:1px solid #686a6f}.right-toggle{display:flex;align-items:center;justify-content:end;border-left:none}:host([data-start-active]) .left-toggle{padding-left:var(--lu-toggle-active-padding-start, 3em);padding-right:var(--lu-toggle-padding-end, 2em);box-shadow:0 0 4px 0 rgba(0, 0, 0, 0.2)}:host([data-start-active]) .right-toggle{background-color:#c6c7c9;cursor:pointer}:host([data-end-active]) .right-toggle{padding-left:var(--lu-toggle-active-padding-start, 3em);padding-right:var(--lu-toggle-padding-end, 2em);box-shadow:0 0 4px 0 rgba(0, 0, 0, 0.2)}:host([data-end-active]) .left-toggle{background-color:#c6c7c9;cursor:pointer}.toggle lu-icon{left:0.5em;position:absolute;font-size:var(--lu-toggle-check-icon-font-size, 23px)}";

const Toggle = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.luToggleChanged = createEvent(this, "luToggleChanged", 7);
    /**
     * When true left side is selected... when false right/end side is selected
     */
    this.startSelected = true;
  }
  startSelectedHandler(newValue, oldValue) {
    if (newValue !== oldValue) {
      if (newValue) {
        this.toggler('start');
      }
      else {
        this.toggler('end');
      }
    }
  }
  valueWatcher(newValue, oldValue) {
    this.luToggleChanged.emit({ value: newValue, oldValue });
  }
  componentWillLoad() {
    this.value = this.startSelected ? this.startValue : this.endValue;
  }
  toggler(side) {
    if (side === 'start') {
      if (!this.startSelected) {
        this.value = this.startValue;
        this.startSelected = true;
      }
    }
    if (side === 'end') {
      if (this.startSelected) {
        this.value = this.endValue;
        this.startSelected = false;
      }
    }
  }
  hostData() {
    return {
      'data-start-active': this.startSelected,
      'data-end-active': !this.startSelected
    };
  }
  __stencil_render() {
    return (h("div", { class: "container" }, h("button", { type: "button", class: "toggle left-toggle", onClick: () => this.toggler('start') }, this.startSelected ? h("lu-icon", { name: "md-checkmark" }) : null, this.startText), h("button", { type: "button", class: "toggle right-toggle", onClick: () => this.toggler('end') }, !this.startSelected ? h("lu-icon", { name: "md-checkmark" }) : null, this.endText)));
  }
  static get watchers() { return {
    "startSelected": ["startSelectedHandler"],
    "value": ["valueWatcher"]
  }; }
  render() { return h(Host, this.hostData(), this.__stencil_render()); }
};
Toggle.style = toggleCss;

export { Toggle as lu_toggle };

//# sourceMappingURL=lu-toggle.entry.js.map