bulmil/dist/cjs/bm-input.cjs.entry.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-849db034.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;-webkit-box-shadow:none;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;-webkit-box-shadow:0 0 0 0.125em rgba(88, 81, 255, 0.25);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;-webkit-box-shadow:none;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{-webkit-box-shadow:inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);box-shadow:inset 0 0.0625em 0.125em rgba(10, 10, 10, 0.05);max-width:100%;width:100%}[readonly].textarea,[readonly].input{-webkit-box-shadow:none;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{-webkit-box-shadow:0 0 0 0.125em rgba(255, 255, 255, 0.25);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{-webkit-box-shadow:0 0 0 0.125em rgba(10, 10, 10, 0.25);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{-webkit-box-shadow:0 0 0 0.125em rgba(245, 245, 245, 0.25);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{-webkit-box-shadow:0 0 0 0.125em rgba(54, 54, 54, 0.25);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{-webkit-box-shadow:0 0 0 0.125em rgba(88, 81, 255, 0.25);box-shadow:0 0 0 0.125em rgba(88, 81, 255, 0.25)}.is-info.textarea,.is-info.input{border-color:#3298dc}.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{-webkit-box-shadow:0 0 0 0.125em rgba(50, 152, 220, 0.25);box-shadow:0 0 0 0.125em rgba(50, 152, 220, 0.25)}.is-success.textarea,.is-success.input{border-color:#48c774}.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{-webkit-box-shadow:0 0 0 0.125em rgba(72, 199, 116, 0.25);box-shadow:0 0 0 0.125em rgba(72, 199, 116, 0.25)}.is-warning.textarea,.is-warning.input{border-color:#ffdd57}.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{-webkit-box-shadow:0 0 0 0.125em rgba(255, 221, 87, 0.25);box-shadow:0 0 0 0.125em rgba(255, 221, 87, 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{-webkit-box-shadow:0 0 0 0.125em rgba(241, 70, 104, 0.25);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:290486px;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;-webkit-box-shadow:none;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}";

class Input {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        /**
         * CSS Classes
         */
        this.class = '';
        /**
         * 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 (index.h("div", { class: {
                control: true,
                'is-loading': this.isLoading,
                [this.controlClass]: Boolean(this.controlClass),
            } }, index.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,
                [this.class]: Boolean(this.class),
            }, placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, name: this.name, type: this.type, value: this.value })));
    }
}
Input.style = inputCss;

exports.bm_input = Input;