UNPKG

9.42 kBJavaScriptView Raw
1import { r as registerInstance, h } from './index-c5baf484.js';
2var 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:#3273dc;-webkit-box-shadow:0 0 0 0.125em rgba(50, 115, 220, 0.25);box-shadow:0 0 0 0.125em rgba(50, 115, 220, 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-link.textarea,.is-link.input{border-color:#3273dc}.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{-webkit-box-shadow:0 0 0 0.125em rgba(50, 115, 220, 0.25);box-shadow:0 0 0 0.125em rgba(50, 115, 220, 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}";
3var Input = /** @class */ (function () {
4 function Input(hostRef) {
5 registerInstance(this, hostRef);
6 /**
7 * CSS Classes
8 */
9 this.class = '';
10 /**
11 * Control Classes
12 */
13 this.controlClass = '';
14 /**
15 * Type
16 */
17 this.type = 'text';
18 /**
19 * Name
20 */
21 this.name = '';
22 /**
23 * Required
24 */
25 this.required = false;
26 /**
27 * Disabled state
28 */
29 this.disabled = false;
30 /**
31 * The input will look similar to a normal one, but is not editable and has no shadow
32 */
33 this.readonly = false;
34 /**
35 * Rounded
36 */
37 this.isRounded = false;
38 /**
39 * Loading state
40 */
41 this.isLoading = false;
42 /**
43 * Removes the background, border, shadow, and horizontal padding
44 */
45 this.isStatic = false;
46 }
47 Input.prototype.render = function () {
48 var _a, _b;
49 return (h("div", { class: (_a = {
50 control: true,
51 'is-loading': this.isLoading
52 },
53 _a[this.controlClass] = Boolean(this.controlClass),
54 _a) }, h("input", { class: (_b = {
55 input: true
56 },
57 _b[this.color] = Boolean(this.color),
58 _b[this.size] = Boolean(this.size),
59 _b[this.state] = Boolean(this.state),
60 _b['is-rounded'] = this.isRounded,
61 _b['is-static'] = this.isStatic,
62 _b[this.class] = Boolean(this.class),
63 _b), placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, name: this.name, type: this.type, value: this.value })));
64 };
65 return Input;
66}());
67Input.style = inputCss;
68export { Input as bm_input };