@bulmil/core
Version:
77 lines (72 loc) • 9.22 kB
JavaScript
/*!
* Bulmil - MIT License
*/
import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
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:hsl(0, 0%, 100%);border-color:hsl(0, 0%, 86%);border-radius:4px;color:hsl(0, 0%, 21%)}.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:hsl(0, 0%, 71%)}.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:hsl(0, 0%, 96%);border-color:hsl(0, 0%, 96%);box-shadow:none;color:hsl(0, 0%, 48%)}[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:hsl(0, 0%, 100%)}.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:hsl(0, 0%, 4%)}.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:hsl(0, 0%, 96%)}.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:hsl(0, 0%, 21%)}.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:hsl(207, 61%, 53%)}.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:hsl(153, 53%, 53%)}.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:hsl(44, 100%, 77%)}.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:hsl(348, 86%, 61%)}.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}";
const BmInputStyle0 = inputCss;
const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
constructor() {
super();
this.__registerHost();
this.controlClass = '';
this.placeholder = undefined;
this.value = undefined;
this.type = 'text';
this.color = undefined;
this.size = undefined;
this.state = undefined;
this.name = '';
this.required = false;
this.disabled = false;
this.readonly = false;
this.isRounded = false;
this.isLoading = false;
this.isStatic = false;
}
render() {
return (h("div", { key: '88de7362a48bec346712a3e02abf2fe1ace55426', class: {
control: true,
'is-loading': this.isLoading,
[this.controlClass]: Boolean(this.controlClass),
} }, h("input", { key: '94ec25fd61126daea811b24f136783e7a3e6a197', 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 })));
}
static get style() { return BmInputStyle0; }
}, [0, "bm-input", {
"controlClass": [1, "control-class"],
"placeholder": [1],
"value": [8],
"type": [1],
"color": [1],
"size": [1],
"state": [1],
"name": [1],
"required": [4],
"disabled": [4],
"readonly": [4],
"isRounded": [4, "is-rounded"],
"isLoading": [4, "is-loading"],
"isStatic": [4, "is-static"]
}]);
function defineCustomElement$1() {
if (typeof customElements === "undefined") {
return;
}
const components = ["bm-input"];
components.forEach(tagName => { switch (tagName) {
case "bm-input":
if (!customElements.get(tagName)) {
customElements.define(tagName, Input);
}
break;
} });
}
const BmInput = Input;
const defineCustomElement = defineCustomElement$1;
export { BmInput, defineCustomElement };