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

const dvnInputGroupCss = "dvn-input-group{--margin:var(--spacing-unit) calc(1.5 * var(--spacing-unit));vertical-align:top;position:relative;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-sizing:border-box;box-sizing:border-box;margin:var(--margin)}dvn-input-group.leaned{margin:0}dvn-input-group dvn-button{margin:0 !important}dvn-input-group dvn-button:not(:only-child) button,dvn-input-group dvn-button:not(:only-child) input{margin:0 0 0 0 !important;border-radius:0}dvn-input-group dvn-button:first-child:not(:last-child) button,dvn-input-group dvn-button:first-child:not(:last-child) input{margin-left:0 !important;border-top-left-radius:var(--corner-radius);border-bottom-left-radius:var(--corner-radius)}dvn-input-group dvn-button:last-child:not(:first-child) button,dvn-input-group dvn-button:last-child:not(:first-child) input{border-top-right-radius:var(--corner-radius);border-bottom-right-radius:var(--corner-radius)}dvn-input-group dvn-icon-button{margin:0 !important}dvn-input-group dvn-icon-button:not(:only-child) button,dvn-input-group dvn-icon-button:not(:only-child) input{margin:0 0 0 0 !important;border-radius:0}dvn-input-group dvn-icon-button:first-child:not(:last-child) button,dvn-input-group dvn-icon-button:first-child:not(:last-child) input{margin-left:0 !important;border-top-left-radius:var(--corner-radius);border-bottom-left-radius:var(--corner-radius)}dvn-input-group dvn-icon-button:last-child:not(:first-child) button,dvn-input-group dvn-icon-button:last-child:not(:first-child) input{border-top-right-radius:var(--corner-radius);border-bottom-right-radius:var(--corner-radius)}dvn-input-group dvn-date-picker:not(:only-child) dvn-input>input{margin:0 0 0 -1px !important;border-radius:0 !important}dvn-input-group dvn-date-picker:first-child:not(:last-child) dvn-input>input{margin-left:0 !important;border-top-left-radius:var(--corner-radius);border-bottom-left-radius:var(--corner-radius)}dvn-input-group dvn-date-picker:last-child:not(:first-child) dvn-input>input{border-top-right-radius:var(--corner-radius);border-bottom-right-radius:var(--corner-radius)}dvn-input-group dvn-input{margin:0 !important}dvn-input-group dvn-input:not(:only-child) input{margin:0 0 0 -1px !important;border-radius:0}dvn-input-group dvn-input:first-child:not(:last-child) input{margin-left:0 !important;border-top-left-radius:var(--corner-radius);border-bottom-left-radius:var(--corner-radius)}dvn-input-group dvn-input:last-child:not(:first-child) input{border-top-right-radius:var(--corner-radius);border-bottom-right-radius:var(--corner-radius)}dvn-input-group dvn-select{margin:0 !important}dvn-input-group dvn-select:not(:only-child),dvn-input-group dvn-select:not(:only-child) dvn-select-option.selected,dvn-input-group dvn-select:not(:only-child) dvn-select-option.empty{margin:0 0 0 -1px !important;border-radius:0}dvn-input-group dvn-select:not(:only-child) dvn-input input,dvn-input-group dvn-select:not(:only-child) dvn-select-option.selected dvn-input input,dvn-input-group dvn-select:not(:only-child) dvn-select-option.empty dvn-input input{border-radius:0}dvn-input-group dvn-select:first-child:not(:last-child),dvn-input-group dvn-select:first-child:not(:last-child) dvn-select-option.selected,dvn-input-group dvn-select:first-child:not(:last-child) dvn-select-option.empty{margin-left:0 !important;border-top-left-radius:var(--corner-radius);border-bottom-left-radius:var(--corner-radius)}dvn-input-group dvn-select:first-child:not(:last-child) dvn-input input,dvn-input-group dvn-select:first-child:not(:last-child) dvn-select-option.selected dvn-input input,dvn-input-group dvn-select:first-child:not(:last-child) dvn-select-option.empty dvn-input input{border-top-left-radius:var(--corner-radius);border-bottom-left-radius:var(--corner-radius)}dvn-input-group dvn-select:last-child:not(:first-child),dvn-input-group dvn-select:last-child:not(:first-child) dvn-select-option.selected,dvn-input-group dvn-select:last-child:not(:first-child) dvn-select-option.empty{border-top-right-radius:var(--corner-radius);border-bottom-right-radius:var(--corner-radius)}dvn-input-group dvn-select:last-child:not(:first-child) dvn-input input,dvn-input-group dvn-select:last-child:not(:first-child) dvn-select-option.selected dvn-input input,dvn-input-group dvn-select:last-child:not(:first-child) dvn-select-option.empty dvn-input input{border-top-right-radius:var(--corner-radius);border-bottom-right-radius:var(--corner-radius)}dvn-input-group dvn-select .options-container.expanded dvn-select-option.selected{border-radius:0 !important}";

const DvnInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.leaned = false;
    this.overrideStyle = {};
  }
  render() {
    return (h(Host, { class: {
        leaned: this.leaned,
      }, style: this.overrideStyle }, h("slot", null)));
  }
};
DvnInput.style = dvnInputGroupCss;

const dvnSelectCss = "dvn-select{--width:inherit;--min-width:256px;--margin:var(--spacing-unit) calc(1.5 * var(--spacing-unit));--base-color:var(--color-primary);--border-color:var(--color-border);--options-container-max-height:300px;background-color:var(--color-input-background);position:relative;margin:var(--margin);outline:none;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;vertical-align:top;height:var(--select-height);width:var(--width);min-width:var(--min-width);font-size:var(--font-size);border-radius:var(--corner-radius);border:1px solid var(--border-color);-webkit-transition:border 0.3s;transition:border 0.3s;cursor:pointer;}dvn-select:hover:not(.disabled){border-color:var(--base-color)}dvn-select:hover:not(.disabled):after{border-color:var(--base-color) transparent transparent transparent}dvn-select.expanded:after{content:unset}dvn-select:active:not(.disabled),dvn-select:focus:not(.disabled){border-color:var(--base-color);-webkit-box-shadow:0px 0px 0px 1px var(--base-color);box-shadow:0px 0px 0px 1px var(--base-color)}dvn-select:active:not(.disabled):after,dvn-select:focus:not(.disabled):after{border-color:var(--base-color) transparent transparent transparent}dvn-select.with-caret:after{top:var(--caret-top);pointer-events:none;-webkit-transition:all 0.3s;transition:all 0.3s;position:absolute;display:block;-webkit-transform:none;transform:none;bottom:inherit;content:\"\";right:10px;width:0;height:0;border:6px solid transparent;border-color:var(--color-neutral) transparent transparent transparent}dvn-select.clear-shown.expanded.with-caret:after{display:none;content:none}dvn-select.progressing:after{display:none}dvn-select.leaned{margin:0}dvn-select.disabled{opacity:0.5;cursor:unset}dvn-select.warning{--base-color:var(--color-warning);--border-color:var(--color-warning)}dvn-select.error{--base-color:var(--color-danger);--border-color:var(--color-danger)}dvn-select.small{--select-height:24px;--select-option-height:22px;--font-size:var(--font-size-small);--padding:calc(var(--spacing-unit) / 2) calc(2 * var(--spacing-unit))}dvn-select.medium{--select-height:32px;--select-option-height:30px;--font-size:var(--font-size-medium);--padding:var(--spacing-unit) calc(3 * var(--spacing-unit))}dvn-select.large{--select-height:40px;--select-option-height:38px;--font-size:var(--font-size-large);--padding:var(--spacing-unit) calc(3 * var(--spacing-unit))}dvn-select.small.with-caret{--caret-top:8px;--padding:calc(var(--spacing-unit) / 4) calc(4 * var(--spacing-unit)) calc(var(--spacing-unit) / 2) calc(2 * var(--spacing-unit))}dvn-select.medium.with-caret{--caret-top:12px;--padding:var(--spacing-unit) calc(6 * var(--spacing-unit)) var(--spacing-unit) calc(3 * var(--spacing-unit))}dvn-select.large.with-caret{--caret-top:16px;--padding:var(--spacing-unit) calc(6 * var(--spacing-unit)) var(--spacing-unit) calc(3 * var(--spacing-unit))}@-webkit-keyframes options-container-appear{0%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}100%{-webkit-transform:translateY(0px);transform:translateY(0px);opacity:1}}@keyframes options-container-appear{0%{-webkit-transform:translateY(-10px);transform:translateY(-10px);opacity:0}100%{-webkit-transform:translateY(0px);transform:translateY(0px);opacity:1}}dvn-select .options-container.expanded{outline:1px solid var(--color-border);position:absolute;top:105%;left:0;right:0;z-index:99;margin:0;padding:0;max-height:var(--options-container-max-height);overflow-y:auto;border-radius:var(--corner-radius);background:var(--color-elevated-item-background);-webkit-box-shadow:0 2px 8px rgba(var(--color-elevated-item-shadow), 0.1);box-shadow:0 2px 8px rgba(var(--color-elevated-item-shadow), 0.1);-webkit-animation:0.1s ease-out 0s 1 options-container-appear;animation:0.1s ease-out 0s 1 options-container-appear}dvn-select ::-webkit-scrollbar{width:calc(2 * var(--spacing-unit))}dvn-select ::-webkit-scrollbar-track{background:var(--color-background-primary)}dvn-select ::-webkit-scrollbar-thumb{background:var(--color-neutral)}dvn-select .options-container.no-scrollbar::-webkit-scrollbar{display:none}dvn-select .options-container.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none;}dvn-select dvn-select-option{padding:var(--padding);display:none}dvn-select dvn-select-option.multiple-value{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}dvn-select:not(.multiple) dvn-select-option.selected{display:-ms-flexbox;display:flex}dvn-select.expanded dvn-select-option.empty,dvn-select:not(.with-value) dvn-select-option.empty{display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}dvn-select .options-container.expanded dvn-select-option.selected span{overflow:unset;white-space:unset;text-overflow:ellipsis}dvn-select:not(.without-check) .options-container.expanded dvn-select-option.selected:not(.empty):after{content:\"\"}dvn-select .options-container.expanded dvn-select-option{display:-ms-flexbox;display:flex}dvn-select .options-container dvn-select-option.filtered{display:none}dvn-select .options-container.expanded dvn-select-option.selected{background:var(--color-background-primary);border-radius:0}dvn-select .search-input-container{position:absolute;top:-1px;left:-1px;display:none;width:100%}dvn-select.expanded .search-input-container{display:block}dvn-select .progress-container{position:absolute;right:calc(2 * var(--spacing-unit));top:0;bottom:0;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;z-index:10}";

const progressScales = {
  small: {
    size: 14,
    strokeWidth: 2,
  },
  medium: {
    size: 16,
    strokeWidth: 2,
  },
  large: {
    size: 18,
    strokeWidth: 2,
  },
};
const getProgressScale = ({ scale = 'medium' }) => progressScales[scale];
const DvnSelect = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.change = createEvent(this, "change", 7);
    this.expanded = false;
    this.hasDefaultValue = false;
    this.progressing = false;
    this.scale = 'medium';
    this.leaned = false;
    this.disabled = false;
    this.multiple = false;
    this.hideCaret = false;
    this.hideCheck = false;
    this.hideScrollbar = false;
  }
  componentWillLoad() {
    this.internalValue = this.value;
    this.toggleSelectedValues();
    if (this.dataProvider) {
      this.progressing = true;
      this.dataProvider.getInitialData().then(options => {
        this.progressing = false;
        this.optionsFromProvider = options;
      });
    }
  }
  focusOnInput() {
    this.el.focus();
    this.expandOptions();
  }
  watchHandler(newValue) {
    this.internalValue = newValue;
    this.toggleSelectedValues();
  }
  click(event) {
    if (event.target['nodeName'].toLowerCase() === 'dvn-select' && !this.expanded) {
      // select border :) is clicked, expand the options
      this.expandOptions();
      return;
    }
    if (event.target['nodeName'].toLowerCase() !== 'dvn-select-option') {
      // ignore if the clicked item is not the option
      return;
    }
    if (!this.expanded) {
      // selected option is clicked to expand the options
      this.expandOptions();
      return;
    }
    const clickedOptionValue = event.target['value'];
    if (clickedOptionValue === undefined) {
      // placeholder is clicked
      this.expanded = false;
      return;
    }
    if (!this.multiple) {
      if (this.internalValue === clickedOptionValue) {
        this.internalValue = undefined;
        this.change.emit(undefined);
      }
      else {
        // set the only value and close options
        this.internalValue = clickedOptionValue;
        this.change.emit(clickedOptionValue);
      }
      this.expanded = false;
    }
    else {
      // add/remove the clicked option from the value
      let newValue;
      if (this.internalValue && this.internalValue.includes(clickedOptionValue)) {
        newValue = this.internalValue.filter(v => v !== clickedOptionValue);
      }
      else {
        newValue = [...(this.internalValue || []), clickedOptionValue];
      }
      this.internalValue = newValue;
      this.change.emit(newValue);
      if (this.enableSearch) {
        this.focusOnSearchInput();
      }
    }
    this.toggleSelectedValues();
  }
  toggleSelectedValues() {
    this.el.querySelectorAll('dvn-select-option').forEach((option) => {
      option.selected = false;
      if (!this.placeholder && option.value === undefined && option.slot !== 'multiple-value') {
        // remove empty option from its' parent and show it as placeholder outside of options container
        this.hasDefaultValue = true;
        option.remove();
        this.placeholder = h("dvn-select-option", { key: "placeholder", innerHTML: option.innerHTML });
        // show default value if there is no internal value
        option.selected = !this.internalValue;
      }
      else if (!this.multiple && this.internalValue && this.internalValue !== '') {
        option.selected = option.value === this.internalValue;
      }
      else if (this.multiple && this.internalValue && this.internalValue !== []) {
        option.selected = this.internalValue.includes(option.value);
      }
    });
  }
  getMultipleValueLabel() {
    if (!this.value) {
      return '';
    }
    const labels = [];
    // search through the options child elements and get the labels from them
    this.el.querySelectorAll('dvn-select-option').forEach((option) => {
      if (this.value.includes(option.value)) {
        labels.push(option.textContent);
      }
    });
    return labels.join(', ');
  }
  expandOptions() {
    if (this.disabled) {
      return;
    }
    this.expanded = true;
    if (this.dataProvider) {
      this.fetchOptions();
    }
    if (this.enableSearch || (this.dataProvider && this.dataProvider.isQuickSearchEnabled())) {
      this.focusOnSearchInput();
    }
  }
  focusOnSearchInput() {
    setTimeout(() => { var _a; return (_a = this.el.getElementsByTagName('dvn-input').item(0)) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
  }
  fetchOptions() {
    this.progressing = true;
    this.dataProvider.getData().then(options => {
      this.progressing = false;
      this.optionsFromProvider = options;
    });
  }
  render() {
    var _a;
    const { enableClear, enableSearch = (this.dataProvider && this.dataProvider.isQuickSearchEnabled()), } = this;
    const vars = {};
    if (this.width) {
      vars['--width'] = this.width;
      vars['--min-width'] = this.width;
    }
    if (this.optionsContainerMaxHeight) {
      vars['--options-container-max-height'] = this.optionsContainerMaxHeight;
    }
    return (h(Host, { class: {
        leaned: this.leaned,
        multiple: this.multiple,
        disabled: this.disabled,
        expanded: this.expanded,
        'clear-shown': enableClear,
        progressing: this.progressing,
        'with-value': !!this.internalValue,
        'with-caret': !this.hideCaret,
        'without-check': this.hideCheck,
        [this.scale]: true,
        [this.feedback]: !!this.feedback,
      }, onFocus: () => {
        if (this.hasDefaultValue || !!this.internalValue) {
          // let option click event to handle expand
          return;
        }
        this.expandOptions();
      }, onBlur: (e) => {
        const targetNode = e.relatedTarget;
        if (!targetNode || targetNode.closest('dvn-select') !== this.el) {
          // some node outside of this component is focused
          this.expanded = false;
        }
      }, tabindex: this.disabled ? -1 : 0, style: vars }, this.placeholder, (this.multiple && !this.expanded) &&
      h("dvn-select-option", { class: "multiple-value", slot: "multiple-value" }, this.getMultipleValueLabel()), enableSearch &&
      h("div", { class: "search-input-container" }, h("dvn-input", { enableClear: enableClear, feedback: this.feedback, leaned: true, onBlur: (e) => {
          e.stopPropagation();
          if (e.type !== 'blur') {
            return;
          }
          const focusedNode = e.detail.relatedTarget;
          let clickedSomethingInsideSelect = false;
          if (focusedNode) {
            const closestSelectToFocusedNode = focusedNode.closest('dvn-select');
            const closestSelectToInput = e.target.closest('dvn-select');
            clickedSomethingInsideSelect = closestSelectToFocusedNode === null || closestSelectToFocusedNode === void 0 ? void 0 : closestSelectToFocusedNode.isSameNode(closestSelectToInput);
          }
          if (!focusedNode || !clickedSomethingInsideSelect) {
            // focused target doesn't belong to the same dvn-select
            this.expanded = false;
          }
        }, onChange: (e) => {
          e.stopPropagation();
          this.filterOptions(e.detail);
        }, value: (_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.getQuickSearchText(), width: "100%" })), h("div", { class: {
        'options-container': true,
        expanded: this.expanded,
        'no-scrollbar': this.hideScrollbar,
      } }, h("slot", null), (this.optionsFromProvider && this.dataAdapter) && this.optionsFromProvider.map(option => (h("dvn-select-option", { key: this.dataAdapter.value(option), value: this.dataAdapter.value(option), selected: this.dataAdapter.value(option) === this.internalValue }, this.dataAdapter.label(option))))), this.progressing &&
      h("div", { class: "progress-container" }, h("dvn-progress", { indefinite: true, leaned: true, tint: "neutral", size: getProgressScale(this).size, strokeWidth: getProgressScale(this).strokeWidth }))));
  }
  filterOptions(query) {
    var _a;
    if (!query && !!((_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.getQuickSearchText())) {
      // filter is cleared
      this.dataProvider.setQuickSearchText(undefined);
      this.change.emit(undefined);
      this.expanded = false;
    }
    if (this.dataProvider) {
      clearTimeout(this.quickSearchDelayTimer);
      this.quickSearchDelayTimer = setTimeout(() => {
        this.dataProvider.setQuickSearchText(query);
        this.fetchOptions();
      }, 500);
      return;
    }
    this.el.querySelectorAll('dvn-select-option').forEach(option => {
      if (query && query !== '' && option.innerHTML.toLocaleLowerCase().indexOf(query.toLocaleLowerCase()) < 0) {
        option.classList.add('filtered');
      }
      else {
        option.classList.remove('filtered');
      }
    });
  }
  get el() { return getElement(this); }
  static get watchers() { return {
    "value": ["watchHandler"]
  }; }
};
DvnSelect.style = dvnSelectCss;

const dvnSelectOptionCss = "dvn-select-option{position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text);font-family:var(--font-family);-webkit-transition:background-color 0.3s;transition:background-color 0.3s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:var(--select-option-height);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}dvn-select-option:after{position:absolute;top:0;bottom:0;right:16px;margin:auto;width:4px;height:8px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border:solid var(--color-primary);border-width:0 2px 2px 0}dvn-select-option:first-child{border-top-left-radius:var(--corner-radius);border-top-right-radius:var(--corner-radius)}dvn-select-option:last-child{border-bottom-left-radius:var(--corner-radius);border-bottom-right-radius:var(--corner-radius)}dvn-select-option:hover{background-color:var(--color-background-primary)}dvn-select-option.selected{background-color:transparent;border-radius:var(--corner-radius);color:var(--color-text)}dvn-select-option.selected span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}dvn-select-option *{pointer-events:none}dvn-select-option.multiple-value{border-radius:var(--corner-radius);height:var(--select-option-height)}dvn-select-option.empty:not(.multiple-value){opacity:0.6;border-radius:var(--corner-radius)}dvn-select-option.empty>span{vertical-align:middle}";

const DvnSelectOption = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    // @Prop() disabled: boolean = false;
    this.selected = false;
  }
  render() {
    return (h(Host, { class: {
        // disabled: this.disabled,
        selected: this.selected,
        empty: this.value === undefined,
      }, value: this.value, selected: this.selected }, h("span", null, h("slot", null))));
  }
};
DvnSelectOption.style = dvnSelectOptionCss;

export { DvnInput as dvn_input_group, DvnSelect as dvn_select, DvnSelectOption as dvn_select_option };
