import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-442cf464.js';
import { d as debounceEvent, a as deferEvent } from './helpers-09d305fe.js';
import { c as createColorClasses } from './theme-a8bb96f5.js';

const comboBoxSelectionCss = ":host{display:inline-flex;flex-wrap:wrap;align-items:center;margin:0 4px 8px 0;padding-right:10px;padding-left:16px;border-radius:15px;font-size:14px;line-height:28px}:host lu-button{--button-padding-start:0;--button-padding-end:0;--button-height:15px;margin:0 4px}:host lu-button lu-icon{font-size:18px !important;}:host(.is-in-summary-view){background:#EEF3F9;color:#256EC1}";

const ComboBoxSelection = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.luComboBoxDeleteSelectionRequest = createEvent(this, "luComboBoxDeleteSelectionRequest", 7);
    /**
     * Sets the input as editable or displays the closable box
     */
    this.isEditing = false;
    this.handleDeleteRequest = (_ev) => {
      this.luComboBoxDeleteSelectionRequest.emit(this.selection.value);
    };
  }
  getSelectionText() {
    let returnText = '';
    if (this.selection.name) {
      returnText = this.selection.name;
    }
    else if (this.selection.value && typeof this.selection.value === 'string') {
      returnText = this.selection.value;
    }
    else {
      console.error('Attempt to use Combo Selection Box Selection without providing a name or string value');
    }
    return returnText;
  }
  render() {
    return (h(Host, { class: {
        'is-in-editing-mode': this.isEditing,
        'is-in-summary-view': !this.isEditing
      } }, this.getSelectionText(), !this.isEditing && h("lu-button", { fill: "clear", color: "lu-primary", onClick: this.handleDeleteRequest }, h("lu-icon", { slot: 'icon-only', name: "close" }))));
  }
};
ComboBoxSelection.style = comboBoxSelectionCss;

const inputCss = ":host{--lu-input-border-color:#686A6F;display:block;position:relative}:host lu-icon{top:50%;margin-top:-13px;font-size:24px;line-height:26px}:host(.lu-color){color:var(--lu-color-base)}.native-input{padding:9px 10px;width:100%;border:1px solid var(--lu-global-form-input-outline, var(--lu-input-border-color));outline:none;background-color:#FFFFFF;font-size:var(--lu-global-form-input-font-size, 16px);line-height:26px;box-sizing:border-box}:host([is-valid]) .native-input{border:2px solid #00854E}:host([is-invalid]) .native-input{border:2px solid #E4002B}:host([has-prefix]) .prefix-icon{left:13px;position:absolute}:host([has-prefix]) .native-input{padding-left:50px}:host([has-suffix]) .suffix-icon{right:13px;position:absolute}:host([has-suffix]) .native-input{padding-right:50px}:host([suffix-clickable]) .suffix-icon{cursor:pointer}:host([prefix-clickable]) .prefix-icon{cursor:pointer}:host(.has-focus) .native-input{border:2px solid #1B2C56}:host(.no-border) .native-input{border:none}";

const Input = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.luInput = createEvent(this, "luInput", 7);
    this.luChange = createEvent(this, "luChange", 7);
    this.luStyle = createEvent(this, "luStyle", 7);
    this.luBlur = createEvent(this, "luBlur", 7);
    this.luFocus = createEvent(this, "luFocus", 7);
    this.luInputDidLoad = createEvent(this, "luInputDidLoad", 7);
    this.luInputDidUnload = createEvent(this, "luInputDidUnload", 7);
    this.luSuffixClickedOrTapped = createEvent(this, "luSuffixClickedOrTapped", 7);
    this.luPrefixClickedOrTapped = createEvent(this, "luPrefixClickedOrTapped", 7);
    this.inputId = `lu-input-${inputIds++}`;
    this.didBlurAfterEdit = false;
    /**
     * Does element have focus?
     */
    this.hasFocus = false;
    /**
     * This is used when the parent form group receives the update event to tell the parent if it should validate or not.
     */
    this.isResetting = false;
    /**
     * Provides a way for users to specify the labeling elements. Pass the id's, separated by a space, to this prop.
     */
    this.ariaLabeledByAddition = '';
    /**
     * This attribute indicates if the input can be automatically completed by the browser, usually by remembering previous values the user has entered.
     * There are a lot of options... refer to docs. Defaults to "off"
     */
    this.autocomplete = 'off';
    /**
     * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user. Defaults to `"none"`.
     */
    this.autocapitalize = 'none';
    /**
     * Whether autocorrection should be enabled when the user is entering/editing the text value. Defaults to `"off"`.
     */
    this.autocorrect = 'off';
    /**
     * This Boolean attribute lets you specify that a form control should have input focus when the page loads. Defaults to `false`.
     */
    this.autofocus = false;
    /**
     * If true, a clear icon will appear in the input when there is a value. Clicking it clears the input. Defaults to `false`.
     */
    this.clearInput = false;
    /**
     * Set the amount of time, in milliseconds, to wait to trigger the `luChange` event after each keystroke. Default `0`.
     */
    this.debounce = 0;
    /**
     * @internal - used by the form group element to declare it's presence
     */
    this.hasFormGroup = false;
    /**
     * id set dynamically
     */
    this.useId = this.inputId + '-wrapper';
    /**
     * Declares input as invalid
     */
    this.invalid = false;
    /**
     * The name of the control, which is submitted with the form data.
     */
    this.name = this.inputId;
    /**
     * removes the border
     */
    this.noBorder = false;
    /**
     * This specifies what type of input it is.
     * button | checkbox | color | date | datetime-local | email | file | hidden | image | month | number | password
     * radio | range | reset | search | submit | tel | text | time | url | week
     */
    this.type = 'text';
    /**
     * Declares input as validated
     */
    this.valid = false;
    /**
     * The value of the input.
     */
    this.value = '';
    this.clearTextInput = () => {
      this.value = '';
    };
    this.onInput = (ev) => {
      const input = ev.target;
      if (input) {
        this.value = input.value || '';
      }
      this.luInput.emit(ev);
    };
    this.onBlur = () => {
      this.hasFocus = false;
      this.focusChanged();
      this.emitStyle();
      this.luBlur.emit();
    };
    this.onFocus = () => {
      this.hasFocus = true;
      this.focusChanged();
      this.emitStyle();
      this.luFocus.emit();
    };
    this.onKeydown = () => {
      if (this.clearOnEdit) {
        // Did the input value change after it was blurred and edited?
        if (this.didBlurAfterEdit && this.hasValue()) {
          // Clear the input
          this.clearTextInput();
        }
        // Reset the flag
        this.didBlurAfterEdit = false;
      }
    };
    this.onPrefixClickedOrTapped = () => {
      this.luPrefixClickedOrTapped.emit();
    };
    this.onSuffixClickedOrTapped = () => {
      if (this.clearInput)
        this.clearTextInput();
      this.luSuffixClickedOrTapped.emit();
    };
  }
  debounceChanged() {
    this.luChange = debounceEvent(this.luChange, this.debounce);
  }
  /**
   * Update the native input element when the value changes
   */
  valueChanged() {
    const inputEl = this.nativeInput;
    const value = this.getValue();
    if (inputEl && inputEl.value !== value) {
      inputEl.value = value;
    }
    this.emitStyle();
    this.luChange.emit({ value, isResetting: this.isResetting });
    this.isResetting = false;
  }
  componentWillLoad() {
    // By default, password inputs clear after focus when they have content
    if (this.clearOnEdit === undefined && this.type === 'password') {
      this.clearOnEdit = true;
    }
    // set clear input
    if (this.clearInput && !this.suffixIcon && this.suffixIcon !== '') {
      this.suffixIcon = 'close';
      this.suffixIconClickable = true;
    }
  }
  componentDidLoad() {
    this.luStyle = deferEvent(this.luStyle);
    this.debounceChanged();
    this.emitStyle();
    this.luInputDidLoad.emit();
  }
  componentDidUnload() {
    this.nativeInput = undefined;
    this.luInputDidUnload.emit();
  }
  /**
   * this gives us a handle to set focus on the element
   */
  async setFocus() {
    if (this.nativeInput) {
      this.nativeInput.focus();
    }
  }
  /**
   * this is used by the form validation/ form group to reset Value without initiating a validity check
   * @param update
   */
  async updateValue(update) {
    this.isResetting = true;
    this.value = update;
  }
  emitStyle() {
    this.luStyle.emit({
      'input': true,
      'has-value': this.hasValue(),
      'has-focus': this.hasFocus,
    });
  }
  focusChanged() {
    // If clearOnEdit is enabled and the input blurred but has a value, set a flag
    if (this.clearOnEdit && !this.hasFocus && this.hasValue()) {
      this.didBlurAfterEdit = true;
    }
  }
  hasValue() {
    return this.getValue().length > 0;
  }
  getValue() {
    return this.value || '';
  }
  getType() {
    let stringOfType = this.type;
    if (this.type.toLowerCase() === 'email' || this.type.toLowerCase() === 'password') {
      stringOfType = 'text';
    }
    return stringOfType;
  }
  render() {
    return (h(Host, { class: Object.assign(Object.assign({}, createColorClasses(this.color)), { 'has-value': this.hasValue(), 'has-focus': this.hasFocus, 'is-input': true, 'no-border': this.noBorder }), "is-invalid": this.invalid, "is-valid": this.valid, "has-prefix": this.prefixIcon && this.prefixIcon !== '', "has-suffix": this.suffixIcon && this.suffixIcon !== '', "suffix-clickable": this.suffixIconClickable, "prefix-clickable": this.prefixIconClickable, id: this.useId }, this.prefixIcon && this.prefixIcon !== '' && h("lu-icon", Object.assign({}, this.prefixIconClickable && { buttonRole: true }, { class: "prefix-icon", name: this.prefixIcon, onTouchStart: this.onPrefixClickedOrTapped, onMouseDown: this.onPrefixClickedOrTapped })), h("input", Object.assign({ ref: input => this.nativeInput = input, id: this.inputId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.valid ? 'false' : this.invalid ? 'true' : null, "aria-required": this.required ? 'true' : 'false' }, (this.hasFormGroup || (this.ariaLabeledByAddition && this.ariaLabeledByAddition.length > 0)) &&
      { 'aria-labelledby': `${this.ariaLabeledByAddition} ` + (this.hasFormGroup ? this.inputId + '-label' : '') }, this.ariaAutoComplete && { 'aria-autocomplete': this.ariaAutoComplete ? 'true' : 'false' }, this.ariaActiveDescendant && { 'aria-activedescendant': this.ariaActiveDescendant }, this.ariaControls && { 'aria-controls': this.ariaControls }, { accept: this.accept, autoComplete: this.autocomplete, autoCapitalize: this.autocapitalize, autoCorrect: this.autocorrect, autoFocus: this.autofocus, capture: this.capture, checked: this.checked, class: "native-input", disabled: this.disabled, form: this.form, inputMode: this.inputmode, list: this.list, max: this.max, maxLength: this.maxLength, min: this.min, minLength: this.minLength, multiple: this.multiple, name: this.name, placeholder: this.placeholder, readOnly: this.readOnly, size: this.size, spellCheck: this.spellcheck, step: this.step, tabIndex: this.tabIndexWanted, type: this.getType(), value: this.getValue(), onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown })), this.suffixIcon && this.suffixIcon !== '' && this.hasValue() && h("lu-icon", Object.assign({}, this.suffixIconClickable && { buttonRole: true }, { class: "suffix-icon", name: this.suffixIcon, onTouchStart: this.onSuffixClickedOrTapped, onMouseDown: this.onSuffixClickedOrTapped, onKeyDown: (event) => {
        if (event.keyCode === 13) {
          this.onSuffixClickedOrTapped();
        }
      } }))));
  }
  get luInputEl() { return getElement(this); }
  static get watchers() { return {
    "debounce": ["debounceChanged"],
    "value": ["valueChanged"]
  }; }
};
let inputIds = 0;
Input.style = inputCss;

const skeletonTextCss = ":host{--background:var(--lu-text-color, #000);display:inline-block;width:100%;pointer-events:none;user-select:none}span{display:inline-block;background:var(--background);font-size:8px}:host(.should-animate) span{background:linear-gradient(-45deg, #F1F1F1, #595B5F);background-size:200% 100%;-webkit-animation:AnimationName 2s ease infinite;-moz-animation:AnimationName 2s ease infinite;animation:AnimationName 2s ease infinite}@-webkit-keyframes AnimationName{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@-moz-keyframes AnimationName{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes AnimationName{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}";

const SkeletonText = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * Width for the element to render at.
     */
    this.width = '100%';
    /**
     * animate
     */
    this.shouldAnimate = false;
  }
  render() {
    return (h(Host, { class: {
        'should-animate': this.shouldAnimate
      } }, h("span", { style: { width: this.width } }, "\u00A0")));
  }
};
SkeletonText.style = skeletonTextCss;

export { ComboBoxSelection as lu_combo_box_selection, Input as lu_input, SkeletonText as lu_skeleton_text };

//# sourceMappingURL=lu-combo-box-selection_3.entry.js.map