'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-140bcbcd.js');

const styleCss = ":host{--background-color:var(--smoothly-secondary-tint), 1;--color:var(--smoothly-secondary-contrast);--border-color:var(--smoothly-secondary-contrast), 1;--border-highlight-color:var(--smoothly-secondary-contrast), 1;--label-color:var(--smoothly-secondary-contrast), 0.8;--selected-item-border-radius:0.25rem;--selected-item-background-color:var(--smoothly-secondary-color), 1;--selected-item-color:255, 255, 255, 1}:host{display:block;position:relative;width:100%;cursor:pointer;--intergiro-transition:all 200ms cubic-bezier(0.645, 0.045, 0.355, 1);-webkit-transition:var(--intergiro-transition);transition:var(--intergiro-transition)}:host>div{display:-ms-flexbox;display:flex;min-height:3em;background-color:rgba(var(--background-color));-ms-flex-align:center;align-items:center;border:none;max-height:var(--max-height)}:host>div .icons>smoothly-icon{-ms-flex-negative:0;flex-shrink:0;padding-left:0.6em;stroke:rgba(var(--color), 0.4);fill:rgba(var(--color), 0.4);width:1.5em !important;height:1.5em !important}:host>div .icons>smoothly-icon:hover{fill:rgba(var(--color), 1)}:host>div input{width:100%;background-color:transparent;outline:none;border:none;cursor:pointer;color:rgb(var(--color));padding:0 1em;font-family:var(--smoothly-font-family);font-size:1.05em}:host>div input::-webkit-input-placeholder{opacity:1;text-overflow:ellipsis}:host>div input::-moz-placeholder{opacity:1;text-overflow:ellipsis}:host>div input:-ms-input-placeholder{opacity:1;text-overflow:ellipsis}:host>div input::-ms-input-placeholder{opacity:1;text-overflow:ellipsis}:host>div input::placeholder{opacity:1;text-overflow:ellipsis}:host(:not(:focus-within)[multiple]) ul>li:last-child{position:absolute;pointer-events:none}:host([label=\"\"]) ul,:host:not([label]) ul,:host([label-setting=hide]) ul{padding-top:0.1em;padding-bottom:0.1em}label{position:absolute;top:1em;left:1em;color:rgba(var(--label-color));-webkit-transition:var(--intergiro-transition);transition:var(--intergiro-transition);font-family:var(--smoothly-font-family);pointer-events:none;-webkit-transform-origin:left;transform-origin:left}:host([has-selection]) label{display:var(--label-display)}:host([has-selection]) label,:host(:focus-within) label{-webkit-transform:translateY(-1.2em) scale(0.7);transform:translateY(-1.2em) scale(0.7)}:host(:hover) smoothly-icon[data-arrow],:host(:focus-within) smoothly-icon[data-arrow]{stroke:rgba(var(--color), 1)}:host smoothly-icon[data-arrow]{pointer-events:none}:host(:not([is-open])) smoothly-icon[data-arrow=up]{display:none}:host([is-open]) smoothly-icon[data-arrow=down]{display:none}:host(:not([has-selection])) smoothly-icon:not([data-arrow]){display:none}:host smoothly-menu-options{position:absolute;z-index:1}:host(:not([is-open]))>smoothly-menu-options{display:none}";

const SmoothlyPicker = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.menuClose = index.createEvent(this, "menuClose", 7);
    this.keepFocusOnReRender = false;
    this.emptyMenuLabel = "No Options";
    this.multiple = false;
    this.selections = [];
    this.selectNoneName = "Select None";
  }
  isOpenChangeHander() {
    if (this.isOpen == false) {
      this.menuClose.emit(this.selections);
    }
  }
  componentDidRender() {
    this.filterOptions();
    if (this.keepFocusOnReRender) {
      this.inputElement.focus();
      this.keepFocusOnReRender = false;
    }
  }
  optionSelectHander(event) {
    this.toggle(event.detail);
    event.stopPropagation();
  }
  toggle(option) {
    option.value == "select-none"
      ? this.clearSelection()
      : this.selections.map(s => s.value).includes(option.value)
        ? this.unselect(option)
        : this.select(option);
  }
  clearSelection() {
    this.selections = [];
    this.inputElement.focus();
    this.keepFocusOnReRender = true;
  }
  unselect(selection) {
    const index = this.selections.map(selection => selection.value).indexOf(selection.value);
    if (index != -1) {
      this.selections = [
        ...this.selections.slice(0, index),
        ...this.selections.slice(index + 1, this.selections.length),
      ];
      this.keepFocusOnReRender = true;
    }
  }
  select(selection) {
    const isNewSelection = this.selections.reduce((acc, current) => acc && current.value != selection.value, true);
    if (isNewSelection)
      this.selections = this.multiple ? [...this.selections, selection] : [selection];
    this.inputElement.value = "";
    this.filterOptions();
    this.keepFocusOnReRender = true;
    this.isOpen = this.multiple;
  }
  toggleHighlighted() {
    var _a;
    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.getHighlighted().then((result) => {
      result && this.toggle(result);
    });
  }
  highlightDefault() {
    var _a;
    this.filterOptions();
    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.setHighlight(this.multiple || this.selections.length == 0 ? 0 : this.selections[0].value);
  }
  filterOptions() {
    var _a;
    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.filterOptions(this.inputElement.value, []);
  }
  onInput(event) {
    this.isOpen = this.inputElement.value != "" ? true : this.isOpen;
    this.highlightDefault();
  }
  onKeyDown(event) {
    var _a;
    if (event.key == "ArrowUp" || event.key == "ArrowDown") {
      (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.moveHighlight(event.key == "ArrowUp" ? -1 : 1);
      event.preventDefault();
    }
    else if (event.key == "Enter" && this.isOpen)
      this.toggleHighlighted();
    else if (event.key == "Escape") {
      this.inputElement.value = "";
      this.isOpen = false;
      this.filterOptions();
    }
    else if (event.key == " " && this.inputElement.value == "") {
      event.preventDefault();
      this.isOpen = true;
      this.filterOptions();
    }
  }
  onClick() {
    this.isOpen = !this.isOpen;
    this.inputElement.focus();
    this.highlightDefault();
    this.filterOptions();
  }
  onBlur() {
    this.inputElement.value = "";
    this.isOpen = false;
    this.filterOptions();
  }
  getCheckHtml() {
    return index.h("smoothly-icon", { name: "checkmark-sharp", size: "small" });
  }
  render() {
    var _a, _b, _c;
    const cssVariables = {
      "--max-height": (_a = this.maxHeight) !== null && _a !== void 0 ? _a : "inherit",
      "--label-display": this.labelSetting == "hide" ? "none" : "absolute",
    };
    (_b = this.options) === null || _b === void 0 ? void 0 : _b.forEach(o => {
      o.description = this.selections.map(s => s.value).includes(o.value) ? this.getCheckHtml() : "";
    });
    const options = [
      {
        value: "select-none",
        name: this.selectNoneName,
        description: this.selections.length == 0 ? this.getCheckHtml() : "",
      },
      ...((_c = this.options) !== null && _c !== void 0 ? _c : []),
    ];
    return (index.h(index.Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, index.h("div", null, index.h("label", null, this.label), index.h("input", { type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.selections.map(selection => selection.name).join(", "), onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) })), index.h("smoothly-menu-options", { style: { width: "100%" }, optionStyle: Object.assign({ padding: "0 1em", height: "2.5em" }, this.optionStyle), order: false, emptyMenuLabel: this.emptyMenuLabel, "max-menu-height": this.maxMenuHeight, ref: (el) => (this.menuElement = el !== null && el !== void 0 ? el : this.menuElement), onClick: e => e.stopPropagation(), resetHighlightOnOptionsChange: false, options: options })));
  }
  get element() { return index.getElement(this); }
  static get watchers() { return {
    "selections": ["isOpenChangeHander"],
    "isOpen": ["isOpenChangeHander"]
  }; }
};
SmoothlyPicker.style = styleCss;

exports.smoothly_picker = SmoothlyPicker;
