@bulmil/core/dist/esm/bm-input.entry.js

/*!
 * Bulmil - MIT License
 */
import { r as registerInstance, h } from './index-8f15c9d4.js';

const inputCss = ".textarea,.input{-moz-appearance:none;-webkit-appearance:none;-ms-flex-align:center;align-items:center;border:1px solid transparent;border-radius:4px;box-shadow:none;display:-ms-inline-flexbox;display:inline-flex;font-size:1rem;height:2.5em;-ms-flex-pack:start;justify-content:flex-start;line-height:1.5;padding-bottom:calc(0.5em - 1px);padding-left:calc(0.75em - 1px);padding-right:calc(0.75em - 1px);padding-top:calc(0.5em - 1px);position:relative;vertical-align:top}.textarea:focus,.input:focus,.is-focused.textarea,.is-focused.input,.textarea:active,.input:active,.is-active.textarea,.is-active.input{outline:none}[disabled].textarea,[disabled].input,fieldset[disabled] .textarea,fieldset[disabled] .input{cursor:not-allowed}.textarea,.input{background-color:white;border-color:#dbdbdb;border-radius:4px;color:#363636}.textarea::-moz-placeholder,.input::-moz-placeholder{color:rgba(54, 54, 54, 0.3)}.textarea::-webkit-input-placeholder,.input::-webkit-input-placeholder{color:rgba(54, 54, 54, 0.3)}.textarea:-moz-placeholder,.input:-moz-placeholder{color:rgba(54, 54, 54, 0.3)}.textarea:-ms-input-placeholder,.input:-ms-input-placeholder{color:rgba(54, 54, 54, 0.3)}.textarea:hover,.input:hover,.is-hovered.textarea,.is-hovered.input{border-color:#b5b5b5}.textarea:focus,.input:focus,.is-focused.textarea,.is-focused.input,.textarea:active,.input:active,.is-active.textarea,.is-active.input{border-color:#5851ff;box-shadow:0 0 0 0.125em rgba(88, 81, 255, 0.25)}[disabled].textarea,[disabled].input,fieldset[disabled] .textarea,fieldset[disabled] .input{background-color:whitesmoke;border-color:whitesmoke;box-shadow:none;color:#7a7a7a}[disabled].textarea::-moz-placeholder,[disabled].input::-moz-placeholder,fieldset[disabled] .textarea::-moz-placeholder,fieldset[disabled] .input::-moz-placeholder{color:rgba(122, 122, 122, 0.3)}[disabled].textarea::-webkit-input-placeholder,[disabled].input::-webkit-input-placeholder,fieldset[disabled] .textarea::-webkit-input-placeholder,fieldset[disabled] .input::-webkit-input-placeholder{color:rgba(122, 122, 122, 0.3)}[disabled].textarea:-moz-placeholder,[disabled].input:-moz-placeholder,fieldset[disabled] .textarea:-moz-placeholder,fieldset[disabled] .input:-moz-placeholder{color:rgba(122, 122, 122, 0.3)}[disabled].textarea:-ms-input-placeholder,[disabled].input:-ms-input-placeholder,fieldset[disabled] .textarea:-ms-input-placeholder,fieldset[disabled] .input:-ms-input-placeholder{color:rgba(122, 122, 122, 0.3)}.textarea,.input{box-shadow:inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);max-width:100%;width:100%}[readonly].textarea,[readonly].input{box-shadow:none}.is-white.textarea,.is-white.input{border-color:white}.is-white.textarea:focus,.is-white.input:focus,.is-white.is-focused.textarea,.is-white.is-focused.input,.is-white.textarea:active,.is-white.input:active,.is-white.is-active.textarea,.is-white.is-active.input{box-shadow:0 0 0 0.125em rgba(255, 255, 255, 0.25)}.is-black.textarea,.is-black.input{border-color:#0a0a0a}.is-black.textarea:focus,.is-black.input:focus,.is-black.is-focused.textarea,.is-black.is-focused.input,.is-black.textarea:active,.is-black.input:active,.is-black.is-active.textarea,.is-black.is-active.input{box-shadow:0 0 0 0.125em rgba(10, 10, 10, 0.25)}.is-light.textarea,.is-light.input{border-color:whitesmoke}.is-light.textarea:focus,.is-light.input:focus,.is-light.is-focused.textarea,.is-light.is-focused.input,.is-light.textarea:active,.is-light.input:active,.is-light.is-active.textarea,.is-light.is-active.input{box-shadow:0 0 0 0.125em rgba(245, 245, 245, 0.25)}.is-dark.textarea,.is-dark.input{border-color:#363636}.is-dark.textarea:focus,.is-dark.input:focus,.is-dark.is-focused.textarea,.is-dark.is-focused.input,.is-dark.textarea:active,.is-dark.input:active,.is-dark.is-active.textarea,.is-dark.is-active.input{box-shadow:0 0 0 0.125em rgba(54, 54, 54, 0.25)}.is-primary.textarea,.is-primary.input{border-color:#5851ff}.is-primary.textarea:focus,.is-primary.input:focus,.is-primary.is-focused.textarea,.is-primary.is-focused.input,.is-primary.textarea:active,.is-primary.input:active,.is-primary.is-active.textarea,.is-primary.is-active.input{box-shadow:0 0 0 0.125em rgba(88, 81, 255, 0.25)}.is-link.textarea,.is-link.input{border-color:#5851ff}.is-link.textarea:focus,.is-link.input:focus,.is-link.is-focused.textarea,.is-link.is-focused.input,.is-link.textarea:active,.is-link.input:active,.is-link.is-active.textarea,.is-link.is-active.input{box-shadow:0 0 0 0.125em rgba(88, 81, 255, 0.25)}.is-info.textarea,.is-info.input{border-color:#3e8ed0}.is-info.textarea:focus,.is-info.input:focus,.is-info.is-focused.textarea,.is-info.is-focused.input,.is-info.textarea:active,.is-info.input:active,.is-info.is-active.textarea,.is-info.is-active.input{box-shadow:0 0 0 0.125em rgba(62, 142, 208, 0.25)}.is-success.textarea,.is-success.input{border-color:#48c78e}.is-success.textarea:focus,.is-success.input:focus,.is-success.is-focused.textarea,.is-success.is-focused.input,.is-success.textarea:active,.is-success.input:active,.is-success.is-active.textarea,.is-success.is-active.input{box-shadow:0 0 0 0.125em rgba(72, 199, 142, 0.25)}.is-warning.textarea,.is-warning.input{border-color:#ffe08a}.is-warning.textarea:focus,.is-warning.input:focus,.is-warning.is-focused.textarea,.is-warning.is-focused.input,.is-warning.textarea:active,.is-warning.input:active,.is-warning.is-active.textarea,.is-warning.is-active.input{box-shadow:0 0 0 0.125em rgba(255, 224, 138, 0.25)}.is-danger.textarea,.is-danger.input{border-color:#f14668}.is-danger.textarea:focus,.is-danger.input:focus,.is-danger.is-focused.textarea,.is-danger.is-focused.input,.is-danger.textarea:active,.is-danger.input:active,.is-danger.is-active.textarea,.is-danger.is-active.input{box-shadow:0 0 0 0.125em rgba(241, 70, 104, 0.25)}.is-small.textarea,.is-small.input{border-radius:2px;font-size:0.75rem}.is-medium.textarea,.is-medium.input{font-size:1.25rem}.is-large.textarea,.is-large.input{font-size:1.5rem}.is-fullwidth.textarea,.is-fullwidth.input{display:block;width:100%}.is-inline.textarea,.is-inline.input{display:inline;width:auto}.input.is-rounded{border-radius:9999px;padding-left:calc(calc(0.75em - 1px) + 0.375em);padding-right:calc(calc(0.75em - 1px) + 0.375em)}.input.is-static{background-color:transparent;border-color:transparent;box-shadow:none;padding-left:0;padding-right:0}.textarea{display:block;max-width:100%;min-width:100%;padding:calc(0.75em - 1px);resize:vertical}.textarea:not([rows]){max-height:40em;min-height:8em}.textarea[rows]{height:initial}.textarea.has-fixed-size{resize:none}";

let Input = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    /**
     * Control Classes
     */
    this.controlClass = '';
    /**
     * Type
     */
    this.type = 'text';
    /**
     * Name
     */
    this.name = '';
    /**
     * Required
     */
    this.required = false;
    /**
     * Disabled state
     */
    this.disabled = false;
    /**
     * The input will look similar to a normal one, but is not editable and has no shadow
     */
    this.readonly = false;
    /**
     * Rounded
     */
    this.isRounded = false;
    /**
     * Loading state
     */
    this.isLoading = false;
    /**
     * Removes the background, border, shadow, and horizontal padding
     */
    this.isStatic = false;
  }
  render() {
    return (h("div", { class: {
        control: true,
        'is-loading': this.isLoading,
        [this.controlClass]: Boolean(this.controlClass),
      } }, h("input", { class: {
        input: true,
        [this.color]: Boolean(this.color),
        [this.size]: Boolean(this.size),
        [this.state]: Boolean(this.state),
        'is-rounded': this.isRounded,
        'is-static': this.isStatic,
      }, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, name: this.name, type: this.type, value: this.value })));
  }
};
Input.style = inputCss;

export { Input as bm_input };