@vue-interface/input-field 1.0.0-beta.0 → 1.0.0-beta.2

package/dist/input-field.umd.cjs

@@ -0,0 +1 @@
+(function(u,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],i):(u=typeof globalThis<"u"?globalThis:u||self,i(u.InputField={},u.Vue))})(this,function(u,i){"use strict";function a(e,t="px"){return e!=null&&e!==!1&&isFinite(e)?`${e}${t}`:e}const Y=i.defineComponent({props:{absolute:Boolean,center:Boolean,label:String,size:{type:String,default:"md"},registry:{type:String,default:"indicators"},type:{type:String,required:!0},height:[String,Number],maxHeight:[String,Number],minHeight:[String,Number],width:[String,Number],maxWidth:[String,Number],minWidth:[String,Number]},data:()=>({is:null}),setup(e){return{registryInstance:i.inject(e.registry||"indicators")}},computed:{classes(){return{"activity-indicator-center":this.center,"activity-indicator-absolute":this.absolute,[this.size&&`activity-indicator-${this.size}`]:!!this.size}},style(){return{width:a(this.width),maxWidth:a(this.maxWidth),minWidth:a(this.minWidth),height:a(this.height),maxHeight:a(this.maxHeight),minHeight:a(this.minHeight)}}},async mounted(){const e=await this.component();this.is=()=>e},methods:{async component(){let e=this.registryInstance.get(this.type);return e instanceof Promise?e:(typeof e=="function"&&(e=await e()),e.default?e.default:e)}}}),J=(e,t)=>{const n=e.__vccOpts||e;for(const[o,r]of t)n[o]=r;return n},K={class:"activity-indicator-content"},Q={key:1,class:"activity-indicator-label"};function X(e,t,n,o,r,s){return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(["activity-indicator",e.classes]),style:i.normalizeStyle(e.style)},[i.createElementVNode("div",K,[e.is?(i.openBlock(),i.createBlock(i.resolveDynamicComponent(e.is()),{key:0,class:"mx-auto"})):i.createCommentVNode("",!0),e.label?(i.openBlock(),i.createElementBlock("div",Q,i.toDisplayString(e.label),1)):i.createCommentVNode("",!0)])],6)}const ee=J(Y,[["render",X]]);var te=Object.defineProperty,ie=(e,t,n)=>t in e?te(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,ne=(e,t,n)=>(ie(e,typeof t!="symbol"?t+"":t,n),n),m=function(){return m=Object.assign||function(e){for(var t,n=1,o=arguments.length;n<o;n++){t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},m.apply(this,arguments)};function re(e){return e.toLowerCase()}var oe=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],se=/[^A-Z0-9]+/gi;function ue(e,t){t===void 0&&(t={});for(var n=t.splitRegexp,o=n===void 0?oe:n,r=t.stripRegexp,s=r===void 0?se:r,g=t.transform,C=g===void 0?re:g,c=t.delimiter,Nt=c===void 0?" ":c,b=$($(e,o,"$1\0$2"),s,"\0"),E=0,S=b.length;b.charAt(E)==="\0";)E++;for(;b.charAt(S-1)==="\0";)S--;return b.slice(E,S).split("\0").map(C).join(Nt)}function $(e,t,n){return t instanceof RegExp?e.replace(t,n):t.reduce(function(o,r){return o.replace(r,n)},e)}function ae(e,t){return t===void 0&&(t={}),ue(e,m({delimiter:"."},t))}function y(e,t){return t===void 0&&(t={}),ae(e,m({delimiter:"-"},t))}class le{constructor(t={}){ne(this,"components"),this.components=new Map,Object.entries(t).forEach(([n,o])=>{this.register(n,o)})}get(t){const n=this.components.get(t=y(t));if(n)return n;throw new Error(`"${t}" has not been registered yet!`)}register(t,n){return typeof t=="object"?(Object.entries(t).forEach(([o,r])=>{this.register(y(o),r)}),this):(this.components.set(y(t),n),this)}remove(t){return this.components.delete(y(t)),this}reset(){return this.components=new Map,this}}function de(e={}){return new le(e)}de();const h={};function f(...e){if(!e.length)return h;const[t,n]=e;return typeof t=="string"?typeof h[t]<"u"?h[t]:n:Array.isArray(t)?t.reduce((o,r)=>Object.assign(o,{[r]:h[r]}),{}):Object.assign(h,...e)}const ce=i.defineComponent({props:{dropShadow:{type:[Boolean,String],default:void 0},dropShadowableClassPrefix:{type:String,default:"drop-shadow"},shadow:{type:[Boolean,String],default:void 0},shadowableClassPrefix:{type:String,default:"shadow"}},computed:{shadowableClass(){const e=this.dropShadow===!0?"":this.dropShadow&&`-${this.dropShadow}`,t=this.shadow===!0?"":this.shadow&&`-${this.shadow}`;return{[`${this.dropShadowableClassPrefix}${e}`]:!!this.dropShadow,[`${this.shadowableClassPrefix}${t}`]:!!this.shadow}}}});var he=typeof global=="object"&&global&&global.Object===Object&&global;const fe=he;var pe=typeof self=="object"&&self&&self.Object===Object&&self,me=fe||pe||Function("return this")(),ye=me.Symbol;const l=ye;var A=Object.prototype,ge=A.hasOwnProperty,be=A.toString,p=l?l.toStringTag:void 0;function ve(e){var t=ge.call(e,p),n=e[p];try{e[p]=void 0;var o=!0}catch{}var r=be.call(e);return o&&(t?e[p]=n:delete e[p]),r}var Ce=Object.prototype,Ee=Ce.toString;function Se(e){return Ee.call(e)}var $e="[object Null]",Ae="[object Undefined]",F=l?l.toStringTag:void 0;function Fe(e){return e==null?e===void 0?Ae:$e:F&&F in Object(e)?ve(e):Se(e)}function ke(e){return e!=null&&typeof e=="object"}var Be="[object Symbol]";function xe(e){return typeof e=="symbol"||ke(e)&&Fe(e)==Be}function je(e,t){for(var n=-1,o=e==null?0:e.length,r=Array(o);++n<o;)r[n]=t(e[n],n,e);return r}var De=Array.isArray;const we=De;var ze=1/0,k=l?l.prototype:void 0,B=k?k.toString:void 0;function x(e){if(typeof e=="string")return e;if(we(e))return je(e,x)+"";if(xe(e))return B?B.call(e):"";var t=e+"";return t=="0"&&1/e==-ze?"-0":t}function j(e){return e==null?"":x(e)}function Oe(e,t,n,o){var r=-1,s=e==null?0:e.length;for(o&&s&&(n=e[++r]);++r<s;)n=t(n,e[r],r,e);return n}function Ne(e){return function(t){return e==null?void 0:e[t]}}var Ie={\u00C0:"A",\u00C1:"A",\u00C2:"A",\u00C3:"A",\u00C4:"A",\u00C5:"A",\u00E0:"a",\u00E1:"a",\u00E2:"a",\u00E3:"a",\u00E4:"a",\u00E5:"a",\u00C7:"C",\u00E7:"c",\u00D0:"D",\u00F0:"d",\u00C8:"E",\u00C9:"E",\u00CA:"E",\u00CB:"E",\u00E8:"e",\u00E9:"e",\u00EA:"e",\u00EB:"e",\u00CC:"I",\u00CD:"I",\u00CE:"I",\u00CF:"I",\u00EC:"i",\u00ED:"i",\u00EE:"i",\u00EF:"i",\u00D1:"N",\u00F1:"n",\u00D2:"O",\u00D3:"O",\u00D4:"O",\u00D5:"O",\u00D6:"O",\u00D8:"O",\u00F2:"o",\u00F3:"o",\u00F4:"o",\u00F5:"o",\u00F6:"o",\u00F8:"o",\u00D9:"U",\u00DA:"U",\u00DB:"U",\u00DC:"U",\u00F9:"u",\u00FA:"u",\u00FB:"u",\u00FC:"u",\u00DD:"Y",\u00FD:"y",\u00FF:"y",\u00C6:"Ae",\u00E6:"ae",\u00DE:"Th",\u00FE:"th",\u00DF:"ss",\u0100:"A",\u0102:"A",\u0104:"A",\u0101:"a",\u0103:"a",\u0105:"a",\u0106:"C",\u0108:"C",\u010A:"C",\u010C:"C",\u0107:"c",\u0109:"c",\u010B:"c",\u010D:"c",\u010E:"D",\u0110:"D",\u010F:"d",\u0111:"d",\u0112:"E",\u0114:"E",\u0116:"E",\u0118:"E",\u011A:"E",\u0113:"e",\u0115:"e",\u0117:"e",\u0119:"e",\u011B:"e",\u011C:"G",\u011E:"G",\u0120:"G",\u0122:"G",\u011D:"g",\u011F:"g",\u0121:"g",\u0123:"g",\u0124:"H",\u0126:"H",\u0125:"h",\u0127:"h",\u0128:"I",\u012A:"I",\u012C:"I",\u012E:"I",\u0130:"I",\u0129:"i",\u012B:"i",\u012D:"i",\u012F:"i",\u0131:"i",\u0134:"J",\u0135:"j",\u0136:"K",\u0137:"k",\u0138:"k",\u0139:"L",\u013B:"L",\u013D:"L",\u013F:"L",\u0141:"L",\u013A:"l",\u013C:"l",\u013E:"l",\u0140:"l",\u0142:"l",\u0143:"N",\u0145:"N",\u0147:"N",\u014A:"N",\u0144:"n",\u0146:"n",\u0148:"n",\u014B:"n",\u014C:"O",\u014E:"O",\u0150:"O",\u014D:"o",\u014F:"o",\u0151:"o",\u0154:"R",\u0156:"R",\u0158:"R",\u0155:"r",\u0157:"r",\u0159:"r",\u015A:"S",\u015C:"S",\u015E:"S",\u0160:"S",\u015B:"s",\u015D:"s",\u015F:"s",\u0161:"s",\u0162:"T",\u0164:"T",\u0166:"T",\u0163:"t",\u0165:"t",\u0167:"t",\u0168:"U",\u016A:"U",\u016C:"U",\u016E:"U",\u0170:"U",\u0172:"U",\u0169:"u",\u016B:"u",\u016D:"u",\u016F:"u",\u0171:"u",\u0173:"u",\u0174:"W",\u0175:"w",\u0176:"Y",\u0177:"y",\u0178:"Y",\u0179:"Z",\u017B:"Z",\u017D:"Z",\u017A:"z",\u017C:"z",\u017E:"z",\u0132:"IJ",\u0133:"ij",\u0152:"Oe",\u0153:"oe",\u0149:"'n",\u017F:"s"},Te=Ne(Ie);const Le=Te;var Ve=/[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g,He="\\u0300-\\u036f",Me="\\ufe20-\\ufe2f",Ze="\\u20d0-\\u20ff",Re=He+Me+Ze,Pe="["+Re+"]",Ue=RegExp(Pe,"g");function Ge(e){return e=j(e),e&&e.replace(Ve,Le).replace(Ue,"")}var We=/[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;function _e(e){return e.match(We)||[]}var qe=/[a-z][A-Z]|[A-Z]{2}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;function Ye(e){return qe.test(e)}var D="\\ud800-\\udfff",Je="\\u0300-\\u036f",Ke="\\ufe20-\\ufe2f",Qe="\\u20d0-\\u20ff",Xe=Je+Ke+Qe,w="\\u2700-\\u27bf",z="a-z\\xdf-\\xf6\\xf8-\\xff",et="\\xac\\xb1\\xd7\\xf7",tt="\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf",it="\\u2000-\\u206f",nt=" \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000",O="A-Z\\xc0-\\xd6\\xd8-\\xde",rt="\\ufe0e\\ufe0f",N=et+tt+it+nt,I="['\u2019]",T="["+N+"]",ot="["+Xe+"]",L="\\d+",st="["+w+"]",V="["+z+"]",H="[^"+D+N+L+w+z+O+"]",ut="\\ud83c[\\udffb-\\udfff]",at="(?:"+ot+"|"+ut+")",lt="[^"+D+"]",M="(?:\\ud83c[\\udde6-\\uddff]){2}",Z="[\\ud800-\\udbff][\\udc00-\\udfff]",d="["+O+"]",dt="\\u200d",R="(?:"+V+"|"+H+")",ct="(?:"+d+"|"+H+")",P="(?:"+I+"(?:d|ll|m|re|s|t|ve))?",U="(?:"+I+"(?:D|LL|M|RE|S|T|VE))?",G=at+"?",W="["+rt+"]?",ht="(?:"+dt+"(?:"+[lt,M,Z].join("|")+")"+W+G+")*",ft="\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])",pt="\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])",mt=W+G+ht,yt="(?:"+[st,M,Z].join("|")+")"+mt,gt=RegExp([d+"?"+V+"+"+P+"(?="+[T,d,"$"].join("|")+")",ct+"+"+U+"(?="+[T,d+R,"$"].join("|")+")",d+"?"+R+"+"+P,d+"+"+U,pt,ft,L,yt].join("|"),"g");function bt(e){return e.match(gt)||[]}function vt(e,t,n){return e=j(e),t=n?void 0:t,t===void 0?Ye(e)?bt(e):_e(e):e.match(t)||[]}var Ct="['\u2019]",Et=RegExp(Ct,"g");function St(e){return function(t){return Oe(vt(Ge(t).replace(Et,"")),e,"")}}var $t=St(function(e,t,n){return e+(n?"-":"")+t.toLowerCase()});const _=$t;function v(e,t,n="-"){const o=String(t).replace(new RegExp(`^${e}${n}?`),"");return[_(o),e].filter(r=>!!r).join(n)}function q(e){return!Array.isArray(e)&&typeof e=="object"}function At(e){return e===void 0}const Ft=i.defineComponent({directives:{bindEvents:{beforeMount(e,t){var n,o;(o=(n=t.instance)==null?void 0:n.bindEvents)==null||o.call(n,e)}}},mixins:[ce],inheritAttrs:!1,props:{activity:{type:Boolean,default:!1},animated:{type:Boolean,default:()=>f("animated",!1)},nativeEvents:{type:Array,default(){return["focus","blur","change","click","keypress","keyup","keydown","progress","paste"]}},defaultControlClass:{type:String,default:()=>f("defaultControlClass","form-control")},error:{type:[String,Array,Boolean],default:void 0},errors:{type:[Array,Object,Boolean],default(){return{}}},feedback:{type:[String,Array],default:void 0},group:{type:Boolean,default:()=>f("group",!0)},helpText:{type:[Number,String],default:void 0},hideLabel:Boolean,indicator:{type:[String,Boolean],default:()=>f("indicator","spinner")},indicatorSize:{type:String,default:void 0},inline:Boolean,invalid:Boolean,label:{type:[Number,String],default:void 0},labelClass:{type:[Object,String],default:()=>f("labelClass","form-label")},modelValue:{default:void 0},pill:Boolean,plaintext:Boolean,size:{type:String,default:void 0},spacing:{type:String,default:void 0},valid:Boolean},data(){return{defaultEmpty:!1,hasChanged:!1,hasFocus:!1,isEmpty:!0}},computed:{id(){return this.$attrs.id||this.$attrs.name||(Math.random()+1).toString(36).substring(7)},componentName(){return this.$options.name},controlAttributes(){return Object.fromEntries(Object.entries(this.$attrs).concat([["id",this.id],["class",this.controlClasses]]))},controlClass(){return this.defaultControlClass},controlSizeClass(){return v(this.size,this.controlClass)},formGroupClasses(){return{[_(this.componentName)]:!!this.componentName,[this.size&&v(this.size,this.componentName)]:!!this.size,animated:this.animated,"default-empty":this.defaultEmpty,"form-group":this.group,[this.size&&v(this.size,"form-group")]:!!this.size,"has-activity":this.activity,"has-changed":this.hasChanged,"has-focus":this.hasFocus,"has-icon":!!this.$slots.icon,"is-empty":this.isEmpty,"is-invalid":!!(this.invalid||this.invalidFeedback),"is-valid":!!(this.valid||this.validFeedback),[this.$attrs.class]:!!this.$attrs.class,[this.$attrs.id]:!!this.$attrs.id}},controlClasses(){return Object.assign({[this.controlClass]:!!this.controlClass,[this.controlSizeClass]:!!this.controlSizeClass,"form-control-icon":!!this.$slots.icon,"is-valid":!!(this.valid||this.validFeedback),"is-invalid":!!(this.invalid||this.invalidFeedback),[this.pillClasses]:this.pill,[this.plaintextClass]:this.plaintext,[this.spacing]:!!this.spacing},this.shadowableClass)},hasDefaultSlot(){return!!this.$slots.default},invalidFeedback(){if(this.error==="")return null;if(this.error)return this.error;const e=this.getFieldErrors();return Array.isArray(e)?e.filter(t=>t&&typeof t=="string").join("<br>"):e},pillClasses(){return"rounded rounded-pill"},plaintextClass(){return"form-control-plaintext"},validFeedback(){return Array.isArray(this.feedback)?this.feedback.join("<br>"):this.feedback}},watch:{hasFocus(){this.shouldChangeOnFocus()&&(this.hasChanged=!0)},defaultEmpty(){this.hasChanged=!0}},methods:{bindEvents(e,t){var n;t||(t=this.onInput);const o=e instanceof HTMLSelectElement?(n=e.querySelectorAll("option"))==null?void 0:n[e.selectedIndex]:null;At(this.modelValue)?o&&(e.value=o==null?void 0:o.value):e.value=this.modelValue,e.value&&t(e.value),this.hasChanged=!!e.value,this.isEmpty=!e.value,e.addEventListener("focus",()=>{this.hasFocus=!0}),e.addEventListener("blur",()=>{this.hasFocus=!1}),e.addEventListener("input",()=>{this.isEmpty=!1,this.hasChanged=!0}),e.addEventListener(e.tagName==="SELECT"?"change":"input",()=>t(e.value)),this.nativeEvents.forEach(r=>{e.addEventListener(r,s=>{this.$emit(r,s)})})},blur(){this.getInputField()&&this.getInputField().blur()},focus(){this.getInputField()&&this.getInputField().focus()},getInputField(){return this.$el.querySelector(".form-control, input, select, textarea")},getFieldErrors(){let e=this.error||this.errors;return this.errors&&q(this.errors)&&(e=this.errors[this.$attrs.name||this.$attrs.id]),!e||Array.isArray(e)||q(e)?e:[e]},shouldChangeOnFocus(){return!this.getInputField().readOnly},onInput(e){this.$emit("update:modelValue",e)}}}),kt=i.defineComponent({components:{ActivityIndicator:ee},mixins:[Ft]}),Tt="",Bt=(e,t)=>{const n=e.__vccOpts||e;for(const[o,r]of t)n[o]=r;return n},xt=["for","innerHTML"],jt={class:"form-group-inner"},Dt=["innerHTML"],wt=["innerHTML"];function zt(e,t,n,o,r,s){const g=i.resolveComponent("activity-indicator"),C=i.resolveDirective("bind-events");return i.openBlock(),i.createElementBlock("div",{class:i.normalizeClass(e.formGroupClasses)},[i.renderSlot(e.$slots,"label",{},()=>[e.label?(i.openBlock(),i.createElementBlock("label",{key:0,ref:"label",for:e.id,class:i.normalizeClass(e.labelClass),onClick:t[0]||(t[0]=(...c)=>e.focus&&e.focus(...c)),innerHTML:e.label},null,10,xt)):i.createCommentVNode("",!0)]),i.createElementVNode("div",jt,[i.renderSlot(e.$slots,"control",{bindEvents:e.bindEvents,controlAttributes:e.controlAttributes,focus:e.focus},()=>[e.$slots.icon?(i.openBlock(),i.createElementBlock("div",{key:0,class:"form-group-inner-icon",onClick:t[1]||(t[1]=(...c)=>e.focus&&e.focus(...c))},[i.renderSlot(e.$slots,"icon")])):i.createCommentVNode("",!0),i.withDirectives(i.createElementVNode("input",i.mergeProps({ref:"field"},e.controlAttributes),null,16),[[C]])]),i.renderSlot(e.$slots,"activity",{},()=>[i.createVNode(i.Transition,{name:"input-field-fade"},{default:i.withCtx(()=>[e.activity?(i.openBlock(),i.createBlock(g,{key:"activity",ref:"activity",type:e.indicator,size:e.indicatorSize||e.size},null,8,["type","size"])):i.createCommentVNode("",!0)]),_:1})])]),i.renderSlot(e.$slots,"feedback",{},()=>[e.invalidFeedback?(i.openBlock(),i.createElementBlock("div",{key:0,class:"invalid-feedback",invalid:"",innerHTML:e.invalidFeedback},null,8,Dt)):e.validFeedback?(i.openBlock(),i.createElementBlock("div",{key:1,class:"valid-feedback",valid:"",innerHTML:e.validFeedback},null,8,wt)):i.createCommentVNode("",!0)]),i.renderSlot(e.$slots,"help",{},()=>[e.helpText?(i.openBlock(),i.createElementBlock("small",{key:0,ref:"help"},i.toDisplayString(e.helpText),513)):i.createCommentVNode("",!0)])],2)}const Ot=Bt(kt,[["render",zt]]);u.InputField=Ot,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/src/InputField.vue.d.ts

@@ -0,0 +1,249 @@
+declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").DefineComponent<{
+    activity: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    animated: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
+    nativeEvents: {
+        type: ArrayConstructor;
+        default(): string[];
+    };
+    defaultControlClass: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    error: {
+        type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    errors: {
+        type: (BooleanConstructor | ArrayConstructor | ObjectConstructor)[];
+        default(): {};
+    };
+    feedback: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    group: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
+    helpText: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    hideLabel: BooleanConstructor;
+    indicator: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: () => any;
+    };
+    indicatorSize: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    inline: BooleanConstructor;
+    invalid: BooleanConstructor;
+    label: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    labelClass: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: () => any;
+    };
+    modelValue: {
+        default: undefined;
+    };
+    pill: BooleanConstructor;
+    plaintext: BooleanConstructor;
+    size: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    spacing: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    valid: BooleanConstructor;
+}, unknown, {
+    defaultEmpty: boolean;
+    hasChanged: boolean;
+    hasFocus: boolean;
+    isEmpty: boolean;
+}, {
+    id(): any;
+    componentName(): any;
+    controlAttributes(): {
+        [k: string]: unknown;
+    };
+    controlClass(): any;
+    controlSizeClass(): string;
+    formGroupClasses(): {
+        [x: string]: any;
+        [x: number]: boolean;
+        animated: any;
+        'default-empty': any;
+        'form-group': any;
+        'has-activity': any;
+        'has-changed': any;
+        'has-focus': any;
+        'has-icon': boolean;
+        'is-empty': any;
+        'is-invalid': boolean;
+        'is-valid': boolean;
+    };
+    controlClasses(): any;
+    hasDefaultSlot(): boolean;
+    invalidFeedback(): any;
+    pillClasses(): "rounded rounded-pill";
+    plaintextClass(): "form-control-plaintext";
+    validFeedback(): any;
+}, {
+    bindEvents(el: HTMLOptionElement | HTMLSelectElement, fn: Function): void;
+    blur(): void;
+    focus(): void;
+    getInputField(): any;
+    getFieldErrors(): any;
+    shouldChangeOnFocus(): boolean;
+    onInput(value: any): void;
+}, import("vue").DefineComponent<{
+    dropShadow: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    dropShadowableClassPrefix: {
+        type: StringConstructor;
+        default: string;
+    };
+    shadow: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    shadowableClassPrefix: {
+        type: StringConstructor;
+        default: string;
+    };
+}, unknown, unknown, {
+    shadowableClass(): {
+        [x: string]: boolean;
+    };
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    dropShadow: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    dropShadowableClassPrefix: {
+        type: StringConstructor;
+        default: string;
+    };
+    shadow: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: undefined;
+    };
+    shadowableClassPrefix: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    shadow: string | boolean;
+    dropShadow: string | boolean;
+    dropShadowableClassPrefix: string;
+    shadowableClassPrefix: string;
+}>, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    activity: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    animated: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
+    nativeEvents: {
+        type: ArrayConstructor;
+        default(): string[];
+    };
+    defaultControlClass: {
+        type: StringConstructor;
+        default: () => any;
+    };
+    error: {
+        type: (BooleanConstructor | StringConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    errors: {
+        type: (BooleanConstructor | ArrayConstructor | ObjectConstructor)[];
+        default(): {};
+    };
+    feedback: {
+        type: (StringConstructor | ArrayConstructor)[];
+        default: undefined;
+    };
+    group: {
+        type: BooleanConstructor;
+        default: () => any;
+    };
+    helpText: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    hideLabel: BooleanConstructor;
+    indicator: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: () => any;
+    };
+    indicatorSize: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    inline: BooleanConstructor;
+    invalid: BooleanConstructor;
+    label: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: undefined;
+    };
+    labelClass: {
+        type: (StringConstructor | ObjectConstructor)[];
+        default: () => any;
+    };
+    modelValue: {
+        default: undefined;
+    };
+    pill: BooleanConstructor;
+    plaintext: BooleanConstructor;
+    size: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    spacing: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    valid: BooleanConstructor;
+}>>, {
+    activity: boolean;
+    animated: boolean;
+    nativeEvents: unknown[];
+    defaultControlClass: string;
+    error: string | boolean | unknown[];
+    errors: boolean | unknown[] | Record<string, any>;
+    feedback: string | unknown[];
+    group: boolean;
+    helpText: string | number;
+    hideLabel: boolean;
+    indicator: string | boolean;
+    indicatorSize: string;
+    inline: boolean;
+    invalid: boolean;
+    label: string | number;
+    labelClass: string | Record<string, any>;
+    modelValue: undefined;
+    pill: boolean;
+    plaintext: boolean;
+    size: string;
+    spacing: string;
+    valid: boolean;
+}>, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _sfc_main;

package/dist/style.css

@@ -0,0 +1 @@
+.input-field,.input-field .form-group-inner{position:relative;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.input-field .activity-indicator{position:absolute;right:0;top:50%;-webkit-transform:translate(-1rem,-50%);transform:translate(-1rem,-50%);-webkit-transition:all .15s ease-in;transition:all .15s ease-in}.input-field .activity-indicator-xs{font-size:.5em}.input-field.has-activity .form-control-xs{padding-right:3.75em}.input-field .activity-indicator-sm{font-size:.5em}.input-field.has-activity .form-control-sm{padding-right:3em}.input-field .activity-indicator-md{font-size:.666em}.input-field.has-activity .form-control-md{padding-right:3em}.input-field .activity-indicator-lg{font-size:.75em}.input-field.has-activity .form-control-lg{padding-right:3em}.input-field .activity-indicator-xl{font-size:1em}.input-field.has-activity .activity-indicator-xl~.form-control-xl{padding-right:3.75em}.input-field .activity-indicator{opacity:1}.input-field .input-field-fade-enter,.input-field .input-field-fade-leave-to{opacity:0}.input-field.is-valid .valid-feedback,.input-field.is-invalid .invalid-feedback{display:-webkit-box;display:-ms-flexbox;display:flex}.input-field .form-control-icon{padding-left:2em}.input-field .form-group-inner-icon{position:absolute;top:50%;left:.666em;width:1rem;font-size:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.input-field-sm .form-group-inner-icon{position:absolute;top:50%;left:.666rem;width:.75em;font-size:1.5em;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.input-field-lg .form-group-inner-icon{position:absolute;top:50%;left:.666rem;width:1.25em;font-size:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}

package/package.json

@@ -1,14 +1,21 @@
 {
   "name": "@vue-interface/input-field",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.2",
   "description": "A Vue input field component.",
   "files": [
-    "index.js",
-    "dist",
-    "src"
+    "dist"
   ],
-  "main": "./dist/input-field.umd.js",
-  "module": "./index.js",
+  "type": "module",
+  "main": "./dist/input-field.umd.cjs",
+  "module": "./dist/input-field.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/input-field.js",
+      "require": "./dist/input-field.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
   "browserslist": "last 2 versions, > 0.5%, ie >= 11",
   "scripts": {
     "dev": "vite",
@@ -40,7 +47,7 @@
   "homepage": "https://github.com/vue-interface/input-field/docs#readme",
   "dependencies": {
     "@vue-interface/activity-indicator": "^2.0.0-beta.0",
-    "@vue-interface/form-control": "^1.0.0-beta.0"
+    "@vue-interface/form-control": "^1.0.0-beta.8"
   },
   "peerDependencies": {
     "vue": "^3.0.0"
@@ -58,6 +65,7 @@
     "postcss": "^8.4.6",
     "tailwindcss": "^3.0.18",
     "vite": "^3.0.0",
+    "vite-plugin-dts": "^1.7.1",
     "vue": "^3.2.37"
   }
 }

package/dist/input-field.css

@@ -1 +0,0 @@
-.activity-indicator-label{margin-top:.75rem;text-align:center}.activity-indicator-xs{font-size:.5rem}.activity-indicator-sm{font-size:.75rem}.activity-indicator-md{font-size:1rem}.activity-indicator-lg{font-size:1.25rem}.activity-indicator-xl{font-size:1.75rem}.activity-indicator-center{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:auto}.activity-indicator-absolute{position:absolute;width:100%;height:100%;top:0;left:0}.activity-indicator-chase{width:2.5em;height:2.5em;position:relative;-webkit-animation:activity-indicator-chase 2.5s infinite linear both;animation:activity-indicator-chase 2.5s infinite linear both}.activity-indicator-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;-webkit-animation:activity-indicator-chase-dot 2s infinite ease-in-out both;animation:activity-indicator-chase-dot 2s infinite ease-in-out both}.activity-indicator-chase-dot:before{content:"";display:block;width:25%;height:25%;background-color:currentColor;border-radius:100%;-webkit-animation:activity-indicator-chase-dot-before 2s infinite ease-in-out both;animation:activity-indicator-chase-dot-before 2s infinite ease-in-out both}.activity-indicator-chase-dot:nth-child(1){-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.activity-indicator-chase-dot:nth-child(2){-webkit-animation-delay:-1s;animation-delay:-1s}.activity-indicator-chase-dot:nth-child(3){-webkit-animation-delay:-.9s;animation-delay:-.9s}.activity-indicator-chase-dot:nth-child(4){-webkit-animation-delay:-.8s;animation-delay:-.8s}.activity-indicator-chase-dot:nth-child(5){-webkit-animation-delay:-.7s;animation-delay:-.7s}.activity-indicator-chase-dot:nth-child(6){-webkit-animation-delay:-.6s;animation-delay:-.6s}.activity-indicator-chase-dot:nth-child(1):before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.activity-indicator-chase-dot:nth-child(2):before{-webkit-animation-delay:-1s;animation-delay:-1s}.activity-indicator-chase-dot:nth-child(3):before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.activity-indicator-chase-dot:nth-child(4):before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.activity-indicator-chase-dot:nth-child(5):before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.activity-indicator-chase-dot:nth-child(6):before{-webkit-animation-delay:-.6s;animation-delay:-.6s}@-webkit-keyframes activity-indicator-chase{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes activity-indicator-chase{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes activity-indicator-chase-dot{80%,to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes activity-indicator-chase-dot{80%,to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes activity-indicator-chase-dot-before{50%{-webkit-transform:scale(.4);transform:scale(.4)}to,0%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes activity-indicator-chase-dot-before{50%{-webkit-transform:scale(.4);transform:scale(.4)}to,0%{-webkit-transform:scale(1);transform:scale(1)}}.activity-indicator-circle-fade{width:2.5em;height:2.5em;position:relative}.activity-indicator-circle-fade .activity-indicator-circle{width:100%;height:100%;position:absolute;left:0;top:0}.activity-indicator-circle-fade .activity-indicator-circle:before{content:"";display:block;margin:0 auto;width:15%;height:15%;background-color:#333;border-radius:100%;-webkit-animation:activity-indicator-circle-fade 1.2s infinite ease-in-out both;animation:activity-indicator-circle-fade 1.2s infinite ease-in-out both}.activity-indicator-circle-fade .activity-indicator-circle2{-webkit-transform:rotate(30deg);transform:rotate(30deg)}.activity-indicator-circle-fade .activity-indicator-circle3{-webkit-transform:rotate(60deg);transform:rotate(60deg)}.activity-indicator-circle-fade .activity-indicator-circle4{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.activity-indicator-circle-fade .activity-indicator-circle5{-webkit-transform:rotate(120deg);transform:rotate(120deg)}.activity-indicator-circle-fade .activity-indicator-circle6{-webkit-transform:rotate(150deg);transform:rotate(150deg)}.activity-indicator-circle-fade .activity-indicator-circle7{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.activity-indicator-circle-fade .activity-indicator-circle8{-webkit-transform:rotate(210deg);transform:rotate(210deg)}.activity-indicator-circle-fade .activity-indicator-circle9{-webkit-transform:rotate(240deg);transform:rotate(240deg)}.activity-indicator-circle-fade .activity-indicator-circle10{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.activity-indicator-circle-fade .activity-indicator-circle11{-webkit-transform:rotate(300deg);transform:rotate(300deg)}.activity-indicator-circle-fade .activity-indicator-circle12{-webkit-transform:rotate(330deg);transform:rotate(330deg)}.activity-indicator-circle-fade .activity-indicator-circle2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.activity-indicator-circle-fade .activity-indicator-circle3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.activity-indicator-circle-fade .activity-indicator-circle4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.activity-indicator-circle-fade .activity-indicator-circle5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.activity-indicator-circle-fade .activity-indicator-circle6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.activity-indicator-circle-fade .activity-indicator-circle7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.activity-indicator-circle-fade .activity-indicator-circle8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.activity-indicator-circle-fade .activity-indicator-circle9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.activity-indicator-circle-fade .activity-indicator-circle10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.activity-indicator-circle-fade .activity-indicator-circle11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.activity-indicator-circle-fade .activity-indicator-circle12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes activity-indicator-circle-fade{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes activity-indicator-circle-fade{0%,39%,to{opacity:0}40%{opacity:1}}.activity-indicator-circle-orbit{width:2.5em;height:2.5em;position:relative;text-align:center;-webkit-animation:activity-indicator-circle-orbit-rotate 2s infinite linear;animation:activity-indicator-circle-orbit-rotate 2s infinite linear}.activity-indicator-circle-orbit-dot1,.activity-indicator-circle-orbit-dot2{width:60%;height:60%;display:inline-block;position:absolute;top:0;background-color:currentColor;border-radius:100%;-webkit-animation:activity-indicator-circle-orbit-bounce 2s infinite ease-in-out;animation:activity-indicator-circle-orbit-bounce 2s infinite ease-in-out}.activity-indicator-circle-orbit-dot2{top:auto;bottom:0;-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes activity-indicator-circle-orbit-rotate{to{-webkit-transform:rotate(360deg)}}@keyframes activity-indicator-circle-orbit-rotate{to{transform:rotate(360deg);-webkit-transform:rotate(360deg)}}@-webkit-keyframes activity-indicator-circle-orbit-bounce{0%,to{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes activity-indicator-circle-orbit-bounce{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.activity-indicator-circle-trail{width:2.5em;height:2.5em;position:relative}.activity-indicator-circle-trail .activity-indicator-child{width:100%;height:100%;position:absolute;left:0;top:0}.activity-indicator-circle-trail .activity-indicator-child:before{content:"";display:block;margin:0 auto;width:.4em;height:.4em;background-color:currentColor;border-radius:100%;-webkit-animation:activity-indicator-circle-trail 1.2s infinite ease-in-out both;animation:activity-indicator-circle-trail 1.2s infinite ease-in-out both}.activity-indicator-circle-trail .activity-indicator-circle-trail2{-webkit-transform:rotate(30deg);transform:rotate(30deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail3{-webkit-transform:rotate(60deg);transform:rotate(60deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail4{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail5{-webkit-transform:rotate(120deg);transform:rotate(120deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail6{-webkit-transform:rotate(150deg);transform:rotate(150deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail7{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail8{-webkit-transform:rotate(210deg);transform:rotate(210deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail9{-webkit-transform:rotate(240deg);transform:rotate(240deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail10{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail11{-webkit-transform:rotate(300deg);transform:rotate(300deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail12{-webkit-transform:rotate(330deg);transform:rotate(330deg)}.activity-indicator-circle-trail .activity-indicator-circle-trail2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.activity-indicator-circle-trail .activity-indicator-circle-trail3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.activity-indicator-circle-trail .activity-indicator-circle-trail4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.activity-indicator-circle-trail .activity-indicator-circle-trail5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.activity-indicator-circle-trail .activity-indicator-circle-trail6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.activity-indicator-circle-trail .activity-indicator-circle-trail7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.activity-indicator-circle-trail .activity-indicator-circle-trail8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.activity-indicator-circle-trail .activity-indicator-circle-trail9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.activity-indicator-circle-trail .activity-indicator-circle-trail10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.activity-indicator-circle-trail .activity-indicator-circle-trail11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.activity-indicator-circle-trail .activity-indicator-circle-trail12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes activity-indicator-circle-trail{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes activity-indicator-circle-trail{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.activity-indicator-dots{font-size:1em;position:relative}.activity-indicator-dots>div{width:1em;height:1em;background-color:currentColor;border-radius:100%;display:inline-block;-webkit-animation:activity-indicator-dots 1.4s infinite ease-in-out both;animation:activity-indicator-dots 1.4s infinite ease-in-out both}.activity-indicator-dots>div:not(:last-child){margin-right:.2em}.activity-indicator-dots .activity-indicator-dots-bounce1{-webkit-animation-delay:-.32s;animation-delay:-.32s}.activity-indicator-dots .activity-indicator-dots-bounce2{-webkit-animation-delay:-.16s;animation-delay:-.16s}@-webkit-keyframes activity-indicator-dots{0%,80%,to{-webkit-transform:scale(0)}40%{-webkit-transform:scale(1)}}@keyframes activity-indicator-dots{0%,80%,to{-webkit-transform:scale(0);transform:scale(0)}40%{-webkit-transform:scale(1);transform:scale(1)}}.activity-indicator-double-pulse{width:2.5em;height:2.5em;position:relative}.activity-indicator-double-pulse-bounce1,.activity-indicator-double-pulse-bounce2{width:100%;height:100%;border-radius:50%;background-color:currentColor;opacity:.66;position:absolute;top:0;left:0;-webkit-animation:activity-indicator-double-pulse 2s infinite ease-in-out;animation:activity-indicator-double-pulse 2s infinite ease-in-out}.activity-indicator-double-pulse-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes activity-indicator-double-pulse{0%,to{-webkit-transform:scale(0)}50%{-webkit-transform:scale(1)}}@keyframes activity-indicator-double-pulse{0%,to{transform:scale(0);-webkit-transform:scale(0)}50%{transform:scale(1);-webkit-transform:scale(1)}}.activity-indicator-facebook{height:4em}.activity-indicator-facebook>div{background-color:#333;height:100%;width:6px;margin-right:2px;display:inline-block;-webkit-animation:activity-indicator-facebook 1.2s infinite ease-in-out;animation:activity-indicator-facebook 1.2s infinite ease-in-out}.activity-indicator-facebook .activity-indicator-facebook-rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.activity-indicator-facebook .activity-indicator-facebook-rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.activity-indicator-facebook .activity-indicator-facebook-rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.activity-indicator-facebook .activity-indicator-facebook-rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes activity-indicator-facebook{0%,40%,to{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes activity-indicator-facebook{0%,40%,to{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}.activity-indicator-grid{width:2.5em;height:2.5em}.activity-indicator-grid .activity-indicator-grid{width:33%;height:33%;background-color:currentColor;float:left;-webkit-animation:activity-indicator-grid 1.3s infinite ease-in-out;animation:activity-indicator-grid 1.3s infinite ease-in-out}.activity-indicator-grid .activity-indicator-grid1{-webkit-animation-delay:.2s;animation-delay:.2s}.activity-indicator-grid .activity-indicator-grid2{-webkit-animation-delay:.3s;animation-delay:.3s}.activity-indicator-grid .activity-indicator-grid3{-webkit-animation-delay:.4s;animation-delay:.4s}.activity-indicator-grid .activity-indicator-grid4{-webkit-animation-delay:.1s;animation-delay:.1s}.activity-indicator-grid .activity-indicator-grid5{-webkit-animation-delay:.2s;animation-delay:.2s}.activity-indicator-grid .activity-indicator-grid6{-webkit-animation-delay:.3s;animation-delay:.3s}.activity-indicator-grid .activity-indicator-grid7{-webkit-animation-delay:0s;animation-delay:0s}.activity-indicator-grid .activity-indicator-grid8{-webkit-animation-delay:.1s;animation-delay:.1s}.activity-indicator-grid .activity-indicator-grid9{-webkit-animation-delay:.2s;animation-delay:.2s}@-webkit-keyframes activity-indicator-grid{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scaleZ(1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}@keyframes activity-indicator-grid{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scaleZ(1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale3D(0,0,1)}}.activity-indicator-pulse{width:2.5em;height:2.5em;background-color:currentColor;border-radius:100%;-webkit-animation:activity-indicator-pulse 1s infinite ease-in-out;animation:activity-indicator-pulse 1s infinite ease-in-out}@-webkit-keyframes activity-indicator-pulse{0%{-webkit-transform:scale(0)}to{-webkit-transform:scale(1);opacity:0}}@keyframes activity-indicator-pulse{0%{-webkit-transform:scale(0);transform:scale(0)}to{-webkit-transform:scale(1);transform:scale(1);opacity:0}}.activity-indicator-spinner{width:2.5em;height:2.5em;position:relative}.activity-indicator-spinner .activity-indicator-spinner{width:100%;height:100%;position:absolute;left:0;top:0}.activity-indicator-spinner .activity-indicator-spinner:before{content:"";display:block;margin:0 auto;width:10%;height:33.333%;background-color:currentColor;-webkit-animation:activity-indicator-spinner 1.2s infinite ease-in-out both;animation:activity-indicator-spinner 1.2s infinite ease-in-out both}.activity-indicator-spinner .activity-indicator-spinner2{-webkit-transform:rotate(30deg);transform:rotate(30deg)}.activity-indicator-spinner .activity-indicator-spinner3{-webkit-transform:rotate(60deg);transform:rotate(60deg)}.activity-indicator-spinner .activity-indicator-spinner4{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.activity-indicator-spinner .activity-indicator-spinner5{-webkit-transform:rotate(120deg);transform:rotate(120deg)}.activity-indicator-spinner .activity-indicator-spinner6{-webkit-transform:rotate(150deg);transform:rotate(150deg)}.activity-indicator-spinner .activity-indicator-spinner7{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.activity-indicator-spinner .activity-indicator-spinner8{-webkit-transform:rotate(210deg);transform:rotate(210deg)}.activity-indicator-spinner .activity-indicator-spinner9{-webkit-transform:rotate(240deg);transform:rotate(240deg)}.activity-indicator-spinner .activity-indicator-spinner10{-webkit-transform:rotate(270deg);transform:rotate(270deg)}.activity-indicator-spinner .activity-indicator-spinner11{-webkit-transform:rotate(300deg);transform:rotate(300deg)}.activity-indicator-spinner .activity-indicator-spinner12{-webkit-transform:rotate(330deg);transform:rotate(330deg)}.activity-indicator-spinner .activity-indicator-spinner2:before{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.activity-indicator-spinner .activity-indicator-spinner3:before{-webkit-animation-delay:-1s;animation-delay:-1s}.activity-indicator-spinner .activity-indicator-spinner4:before{-webkit-animation-delay:-.9s;animation-delay:-.9s}.activity-indicator-spinner .activity-indicator-spinner5:before{-webkit-animation-delay:-.8s;animation-delay:-.8s}.activity-indicator-spinner .activity-indicator-spinner6:before{-webkit-animation-delay:-.7s;animation-delay:-.7s}.activity-indicator-spinner .activity-indicator-spinner7:before{-webkit-animation-delay:-.6s;animation-delay:-.6s}.activity-indicator-spinner .activity-indicator-spinner8:before{-webkit-animation-delay:-.5s;animation-delay:-.5s}.activity-indicator-spinner .activity-indicator-spinner9:before{-webkit-animation-delay:-.4s;animation-delay:-.4s}.activity-indicator-spinner .activity-indicator-spinner10:before{-webkit-animation-delay:-.3s;animation-delay:-.3s}.activity-indicator-spinner .activity-indicator-spinner11:before{-webkit-animation-delay:-.2s;animation-delay:-.2s}.activity-indicator-spinner .activity-indicator-spinner12:before{-webkit-animation-delay:-.1s;animation-delay:-.1s}@-webkit-keyframes activity-indicator-spinner{0%,39%,to{opacity:0}40%{opacity:1}}@keyframes activity-indicator-spinner{0%,39%,to{opacity:0}40%{opacity:1}}.activity-indicator-spotify{width:2em;height:2em;border-radius:50%;background:conic-gradient(white,black);position:relative;-webkit-animation:activity-indicator-spotify 1.4s linear infinite;animation:activity-indicator-spotify 1.4s linear infinite;-webkit-transform:translateZ(0);transform:translateZ(0)}.activity-indicator-spotify:after{background:white;width:75%;height:75%;border-radius:50%;content:"";margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}@-webkit-keyframes activity-indicator-spotify{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes activity-indicator-spotify{0%{-webkit-transform:rotate(0deg);transform:rotate(0)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.activity-indicator-square{width:2.5em;height:2.5em;background-color:currentColor;-webkit-animation:activity-indicator-square 1.2s infinite ease-in-out;animation:activity-indicator-square 1.2s infinite ease-in-out}@-webkit-keyframes activity-indicator-square{0%{-webkit-transform:perspective(120px)}50%{-webkit-transform:perspective(120px) rotateY(180deg)}to{-webkit-transform:perspective(120px) rotateY(180deg) rotateX(180deg)}}@keyframes activity-indicator-square{0%{transform:perspective(120px) rotateX(0) rotateY(0);-webkit-transform:perspective(120px) rotateX(0deg) rotateY(0deg)}50%{transform:perspective(120px) rotateX(-180.1deg) rotateY(0);-webkit-transform:perspective(120px) rotateX(-180.1deg) rotateY(0deg)}to{transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg);-webkit-transform:perspective(120px) rotateX(-180deg) rotateY(-179.9deg)}}.activity-indicator-square-fold{margin:1em;width:2.5em;height:2.5em;position:relative;-webkit-transform:rotateZ(45deg);transform:rotate(45deg)}.activity-indicator-square-fold .activity-indicator-square-fold-square{float:left;width:50%;height:50%;position:relative;-webkit-transform:scale(1.1);transform:scale(1.1)}.activity-indicator-square-fold .activity-indicator-square-fold-square:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#333;-webkit-animation:activity-indicator-square-fold 2.4s infinite linear both;animation:activity-indicator-square-fold 2.4s infinite linear both;-webkit-transform-origin:100% 100%;transform-origin:100% 100%}.activity-indicator-square-fold .activity-indicator-square-fold-square2{-webkit-transform:scale(1.1) rotateZ(90deg);transform:scale(1.1) rotate(90deg)}.activity-indicator-square-fold .activity-indicator-square-fold-square3{-webkit-transform:scale(1.1) rotateZ(180deg);transform:scale(1.1) rotate(180deg)}.activity-indicator-square-fold .activity-indicator-square-fold-square4{-webkit-transform:scale(1.1) rotateZ(270deg);transform:scale(1.1) rotate(270deg)}.activity-indicator-square-fold .activity-indicator-square-fold-square2:before{-webkit-animation-delay:.3s;animation-delay:.3s}.activity-indicator-square-fold .activity-indicator-square-fold-square3:before{-webkit-animation-delay:.6s;animation-delay:.6s}.activity-indicator-square-fold .activity-indicator-square-fold-square4:before{-webkit-animation-delay:.9s;animation-delay:.9s}@-webkit-keyframes activity-indicator-square-fold{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}@keyframes activity-indicator-square-fold{0%,10%{-webkit-transform:perspective(140px) rotateX(-180deg);transform:perspective(140px) rotateX(-180deg);opacity:0}25%,75%{-webkit-transform:perspective(140px) rotateX(0deg);transform:perspective(140px) rotateX(0);opacity:1}90%,to{-webkit-transform:perspective(140px) rotateY(180deg);transform:perspective(140px) rotateY(180deg);opacity:0}}.activity-indicator-square-orbit{margin:.5em;width:3em;height:3em;position:relative}.activity-indicator-square-orbit-cube1,.activity-indicator-square-orbit-cube2{background-color:#333;width:1em;height:1em;position:absolute;top:0;left:0;-webkit-animation:activity-indicator-square-orbit 1.8s infinite ease-in-out;animation:activity-indicator-square-orbit 1.8s infinite ease-in-out}.activity-indicator-square-orbit-cube2{-webkit-animation-delay:-.9s;animation-delay:-.9s}@-webkit-keyframes activity-indicator-square-orbit{25%{-webkit-transform:translateX(2em) rotate(-90deg) scale(.5)}50%{-webkit-transform:translateX(2em) translateY(2em) rotate(-180deg)}75%{-webkit-transform:translateX(0px) translateY(2em) rotate(-270deg) scale(.5)}to{-webkit-transform:rotate(-360deg)}}@keyframes activity-indicator-square-orbit{25%{transform:translate(2em) rotate(-90deg) scale(.5);-webkit-transform:translateX(2em) rotate(-90deg) scale(.5)}50%{transform:translate(2em) translateY(2em) rotate(-179deg);-webkit-transform:translateX(2em) translateY(2em) rotate(-179deg)}50.1%{transform:translate(2em) translateY(2em) rotate(-180deg);-webkit-transform:translateX(2em) translateY(2em) rotate(-180deg)}75%{transform:translate(0) translateY(2em) rotate(-270deg) scale(.5);-webkit-transform:translateX(0px) translateY(2em) rotate(-270deg) scale(.5)}to{transform:rotate(-360deg);-webkit-transform:rotate(-360deg)}}.input-field,.input-field .form-group-inner{position:relative;-webkit-transition:all .25s ease-in-out;transition:all .25s ease-in-out}.input-field .activity-indicator{position:absolute;right:0;top:50%;-webkit-transform:translate(-1rem,-50%);transform:translate(-1rem,-50%);-webkit-transition:all .15s ease-in;transition:all .15s ease-in}.input-field .activity-indicator-xs{font-size:.5em}.input-field.has-activity .form-control-xs{padding-right:3.75em}.input-field .activity-indicator-sm{font-size:.5em}.input-field.has-activity .form-control-sm{padding-right:3em}.input-field .activity-indicator-md{font-size:.666em}.input-field.has-activity .form-control-md{padding-right:3em}.input-field .activity-indicator-lg{font-size:.75em}.input-field.has-activity .form-control-lg{padding-right:3em}.input-field .activity-indicator-xl{font-size:1em}.input-field.has-activity .activity-indicator-xl~.form-control-xl{padding-right:3.75em}.input-field .activity-indicator{opacity:1}.input-field .input-field-fade-enter,.input-field .input-field-fade-leave-to{opacity:0}.input-field.is-valid .valid-feedback,.input-field.is-invalid .invalid-feedback{display:-webkit-box;display:-ms-flexbox;display:flex}.input-field .form-control-icon{padding-left:2em}.input-field .form-group-inner-icon{position:absolute;top:50%;left:.666em;width:1rem;font-size:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.input-field-sm .form-group-inner-icon{position:absolute;top:50%;left:.666rem;width:.75em;font-size:1.5em;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.input-field-lg .form-group-inner-icon{position:absolute;top:50%;left:.666rem;width:1.25em;font-size:1em;-webkit-transform:translateY(-50%);transform:translateY(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}