UNPKG

10.5 kBJavaScriptView Raw
1System.register(['./index-1a441b18.system.js'], function (exports) {
2 'use strict';
3 var registerInstance, h;
4 return {
5 setters: [function (module) {
6 registerInstance = module.r;
7 h = module.h;
8 }],
9 execute: function () {
10 var 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}";
11 var Input = /** @class */ (function () {
12 function Input(hostRef) {
13 registerInstance(this, hostRef);
14 /**
15 * CSS Classes
16 */
17 this.class = '';
18 /**
19 * Control Classes
20 */
21 this.controlClass = '';
22 /**
23 * Type
24 */
25 this.type = 'text';
26 /**
27 * Name
28 */
29 this.name = '';
30 /**
31 * Required
32 */
33 this.required = false;
34 /**
35 * Disabled state
36 */
37 this.disabled = false;
38 /**
39 * The input will look similar to a normal one, but is not editable and has no shadow
40 */
41 this.readonly = false;
42 /**
43 * Rounded
44 */
45 this.isRounded = false;
46 /**
47 * Loading state
48 */
49 this.isLoading = false;
50 /**
51 * Removes the background, border, shadow, and horizontal padding
52 */
53 this.isStatic = false;
54 }
55 Input.prototype.render = function () {
56 var _a, _b;
57 return (h("div", { class: (_a = {
58 control: true,
59 'is-loading': this.isLoading
60 },
61 _a[this.controlClass] = Boolean(this.controlClass),
62 _a) }, h("input", { class: (_b = {
63 input: true
64 },
65 _b[this.color] = Boolean(this.color),
66 _b[this.size] = Boolean(this.size),
67 _b[this.state] = Boolean(this.state),
68 _b['is-rounded'] = this.isRounded,
69 _b['is-static'] = this.isStatic,
70 _b[this.class] = Boolean(this.class),
71 _b), placeholder: this.placeholder, required: this.required, disabled: this.disabled, readonly: this.readonly, name: this.name, type: this.type, value: this.value })));
72 };
73 return Input;
74 }());
75 exports('bm_input', Input);
76 Input.style = inputCss;
77 }
78 };
79});