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

const dvnInputCss = "dvn-input{--width:inherit;--min-width:256px;--base-color:var(--color-primary);--border-color:var(--color-border);--margin:var(--spacing-unit) calc(1.5 * var(--spacing-unit));position:relative;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;margin:var(--margin);width:var(--width);min-width:var(--min-width);}dvn-input.leaned{--margin:0}dvn-input.disabled{opacity:0.6;cursor:default}dvn-input.warning{--base-color:var(--color-warning);--border-color:var(--color-warning)}dvn-input.error{--base-color:var(--color-danger);--border-color:var(--color-danger)}dvn-input.small{--font-size:var(--font-size-small);--height:24px;--padding:calc(var(--spacing-unit) * 0.75) calc(1.5 * var(--spacing-unit))}dvn-input.medium{--font-size:var(--font-size-medium);--height:32px;--padding:var(--spacing-unit) calc(2 * var(--spacing-unit))}dvn-input.large{--font-size:var(--font-size-large);--height:40px;--padding:calc(1.5 * var(--spacing-unit)) calc(2.5 * var(--spacing-unit))}dvn-input.progressing.small{--padding:calc(var(--spacing-unit) * 0.75) calc(6 * var(--spacing-unit)) calc(var(--spacing-unit) * 0.75) calc(1.5 * var(--spacing-unit))}dvn-input.progressing.medium{--padding:var(--spacing-unit) calc(7 * var(--spacing-unit)) var(--spacing-unit) calc(2 * var(--spacing-unit))}dvn-input.progressing.large{--padding:calc(1.5 * var(--spacing-unit)) calc(8 * var(--spacing-unit)) calc(1.5 * var(--spacing-unit)) calc(2.5 * var(--spacing-unit))}dvn-input .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}dvn-input input,dvn-input textarea{outline:none;width:var(--width);min-width:var(--min-width);-webkit-transition:all 0.3s;transition:all 0.3s;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--color-text);font-family:var(--font-family);border:1px solid var(--border-color);border-radius:var(--corner-radius);background-color:var(--color-input-background);vertical-align:top;font-size:var(--font-size);height:var(--height);padding:var(--padding);-webkit-appearance:none}dvn-input textarea{height:unset;border-bottom-right-radius:3px}dvn-input input:disabled,dvn-input textarea:disabled{cursor:unset}dvn-input input:hover:enabled,dvn-input textarea:hover:enabled{border-color:var(--base-color)}dvn-input input:focus:enabled,dvn-input textarea:focus:enabled{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-input input::-webkit-input-placeholder,dvn-input textarea::-webkit-input-placeholder{color:var(--color-text-secondary)}dvn-input input::-moz-placeholder,dvn-input textarea::-moz-placeholder{color:var(--color-text-secondary)}dvn-input input:-ms-input-placeholder,dvn-input textarea:-ms-input-placeholder{color:var(--color-text-secondary)}dvn-input input::-ms-input-placeholder,dvn-input textarea::-ms-input-placeholder{color:var(--color-text-secondary)}dvn-input input::placeholder,dvn-input textarea::placeholder{color:var(--color-text-secondary)}";

const progressScales = {
  small: {
    size: 14,
    strokeWidth: 2,
  },
  medium: {
    size: 16,
    strokeWidth: 2,
  },
  large: {
    size: 18,
    strokeWidth: 2,
  },
};
const getProgressScale = ({ scale = 'medium' }) => progressScales[scale];
const DvnInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.change = createEvent(this, "change", 7);
    this.blur = createEvent(this, "blur", 7);
    this.focus = createEvent(this, "focus", 7);
    this.leaned = false;
    this.scale = 'medium';
    this.type = 'text';
    this.disabled = false;
    this.progressing = false;
    this.readonly = false;
    this.autoComplete = 'on';
    this.long = false;
    this.overrideStyle = {};
  }
  focusOnInput() {
    this.textInput.focus();
  }
  render() {
    const { disabled, enableClear, feedback, leaned, name, placeholder, progressing, scale, type, value, } = this;
    const vars = this.overrideStyle || {};
    if (this.width) {
      vars['--width'] = this.width;
      vars['--min-width'] = this.width;
    }
    const Tag = this.long ? 'textarea' : 'input';
    return (h(Host, { class: {
        leaned: leaned,
        [scale]: true,
        [feedback]: !!feedback,
        progressing: progressing,
        disabled: disabled,
      }, style: vars }, h(Tag, { ref: (el) => this.textInput = el, type: type, name: name, placeholder: placeholder, disabled: disabled, value: value, onFocus: (e) => {
        e.stopPropagation();
        this.focus.emit(e);
      }, onBlur: (e) => {
        e.stopPropagation();
        this.blur.emit(e);
      }, onInput: (e) => {
        e.stopPropagation();
        this.change.emit(e.target.value);
      }, onChange: (e) => e.stopPropagation(), readonly: this.readonly, autocomplete: this.autoComplete, style: this.overrideStyle }), progressing &&
      h("div", { class: "progress-container" }, h("dvn-progress", { indefinite: true, leaned: true, tint: "neutral", size: getProgressScale(this).size, strokeWidth: getProgressScale(this).strokeWidth })), (enableClear && value) &&
      h("div", { class: "progress-container" }, h("dvn-icon-button", { onClick: () => this.change.emit(undefined), iconName: "uil uil-times", leaned: true, scale: "small", tint: "neutral", view: "flat" }))));
  }
};
DvnInput.style = dvnInputCss;

export { DvnInput as dvn_input };
