import { r as registerInstance, j as createEvent, h, k as Host, g as getElement } from './index-07845439.js';

const styleCss = ":host{--background-color:var(--smoothly-secondary-tint), 1;--color:var(--smoothly-secondary-contrast), 1;--border-radius:0;--border-width:1px;--border-color:var(--smoothly-secondary-contrast), 0.5;--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:85%;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(:focus-within)>ul{border-color:rgba(var(--border-highlight-color))}ul{overflow-y:auto;max-height:var(--max-height);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-align:baseline;align-items:baseline;list-style-type:none;-webkit-transition:var(--intergiro-transition);transition:var(--intergiro-transition);background-color:rgba(var(--background-color));border:var(--border-width) solid rgba(var(--border-color));border-radius:var(--border-radius);-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:1em 3.2em 0.2em 0.2em;font-family:var(--smoothly-font-family)}ul li{width:-webkit-min-content;width:-moz-min-content;width:min-content;margin:0.1rem 0.1rem;padding:0.25rem;-ms-flex-align:center;align-items:center}ul li:not(:last-child){white-space:nowrap;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;background-color:rgba(var(--selected-item-background-color));border-radius:var(--selected-item-border-radius);color:rgba(var(--selected-item-color));fill:rgba(var(--selected-item-color));font-size:small}ul li:last-child{-ms-flex-positive:1;flex-grow:1;min-width:100px}ul li:last-child input{width:100%;background-color:transparent;outline:none;border:none;cursor:pointer;color:rgba(var(--color))}ul li:last-child input::-webkit-input-placeholder{opacity:1}ul li:last-child input::-moz-placeholder{opacity:1}ul li:last-child input:-ms-input-placeholder{opacity:1}ul li:last-child input::-ms-input-placeholder{opacity:1}ul li:last-child input::placeholder{opacity:1}label{position:absolute;top:1em;left:0.5rem;color:rgba(var(--label-color));-webkit-transition:var(--intergiro-transition);transition:var(--intergiro-transition);font-family:var(--smoothly-font-family)}:host([has-selection]) label{display:var(--label-display)}:host([has-selection]) label,:host(:focus-within) label{-webkit-transform:translateY(-0.8em);transform:translateY(-0.8em);font-size:70%}:host>smoothly-icon{stroke:rgba(var(--color));fill:rgba(var(--color));position:absolute;bottom:0.5rem}:host>smoothly-icon:not([data-arrow]){right:1.8rem}:host>smoothly-icon[data-arrow]{right:0.5rem}: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:last-of-type{display:none}:host smoothly-menu-options{position:absolute;z-index:999}:host(:not([is-open]))>smoothly-menu-options{display:none}";

const SmoothlyPicker = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.menuClose = createEvent(this, "menuClose", 7);
    this.keepFocusOnReRender = false;
    this.emptyMenuLabel = "No Options";
    this.multiple = false;
    this.selections = [];
  }
  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.select(event.detail);
    event.stopPropagation();
  }
  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;
  }
  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;
    }
  }
  selectHighlighted() {
    var _a;
    (_a = this.menuElement) === null || _a === void 0 ? void 0 : _a.getHighlighted().then((result) => {
      result ? this.select(result) : undefined;
    });
  }
  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() {
    this.menuElement.filterOptions(this.inputElement.value, this.multiple ? this.selections.map(selection => selection.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.selectHighlighted();
    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();
    }
    else if ((event.key == "Backspace" || event.key == "Delete") &&
      this.inputElement.value == "" &&
      this.selections.length > 0) {
      this.unselect(this.selections[this.selections.length - 1]);
    }
  }
  onClick() {
    this.isOpen = !this.isOpen;
    this.inputElement.focus();
    this.highlightDefault();
    this.filterOptions();
  }
  onBlur() {
    this.inputElement.value = "";
    this.isOpen = false;
    this.filterOptions();
  }
  onCrossClick(event) {
    this.selections = [];
    this.isOpen = false;
    this.inputElement.focus();
    this.keepFocusOnReRender = true;
    event.stopPropagation();
  }
  render() {
    var _a;
    const cssVariables = {
      "--max-height": (_a = this.maxHeight) !== null && _a !== void 0 ? _a : "inherit",
      "--label-display": this.labelSetting == "hide" ? "none" : "absolute",
    };
    const selectionList = this.multiple
      ? this.selections.map(selection => (h("li", { "data-value": selection.value }, selection.name, h("smoothly-icon", { onClick: e => {
          this.unselect(selection);
          e.stopPropagation();
        }, name: "close", size: "small" }))))
      : null;
    return (h(Host, { style: cssVariables, "has-selection": this.selections.length > 0, "is-open": this.isOpen ? "" : undefined, onMouseDown: (e) => e.preventDefault(), onClick: () => this.onClick() }, h("ul", null, selectionList, h("li", null, h("input", { type: "text", ref: (el) => (this.inputElement = el ? el : this.inputElement), onFocus: () => this.highlightDefault(), onBlur: () => this.onBlur(), placeholder: this.multiple ? "" : this.selections.length > 0 ? this.selections[0].name : "", onKeyDown: e => this.onKeyDown(e), onInput: (e) => this.onInput(e) }))), h("label", null, this.label), h("smoothly-icon", { name: "chevron-up", "data-arrow": "up" }), h("smoothly-icon", { name: "chevron-down", "data-arrow": "down" }), h("smoothly-icon", { name: "close", onClick: (e) => this.onCrossClick(e) }), h("smoothly-menu-options", { style: { width: "100%" }, optionStyle: this.optionStyle, order: true, emptyMenuLabel: this.emptyMenuLabel, "max-menu-height": this.maxMenuHeight, ref: (el) => (this.menuElement = el), onClick: e => e.stopPropagation(), options: this.options })));
  }
  get element() { return getElement(this); }
  static get watchers() { return {
    "selections": ["isOpenChangeHander"],
    "isOpen": ["isOpenChangeHander"]
  }; }
};
SmoothlyPicker.style = styleCss;

export { SmoothlyPicker as smoothly_picker };
