@vue-interface/btn-activity 1.0.1 → 1.1.0

package/dist/btn-activity.css

@@ -1 +1 @@
-.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:scale(1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale(0)}}@keyframes activity-indicator-grid{0%,70%,to{-webkit-transform:scale3D(1,1,1);transform:scale(1)}35%{-webkit-transform:scale3D(0,0,1);transform:scale(0)}}.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)}}@-webkit-keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@-webkit-keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}.btn-activity-top,.btn.btn-activity-top,.btn-activity-bottom,.btn.btn-activity-bottom,.btn-activity-left,.btn.btn-activity-left,.btn-activity-right,.btn.btn-activity-right{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-transition:all 166.5ms ease-in;transition:all 166.5ms ease-in}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator,.btn-activity-left .activity-indicator,.btn-activity-right .activity-indicator{opacity:0;position:absolute;visibility:hidden;-webkit-transition:opacity 333ms ease-in;transition:opacity 333ms ease-in}.btn-activity-top,.btn-activity-bottom{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator{margin-left:auto;margin-right:auto}.btn-activity-top{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.btn-activity-top .activity-indicator{padding-bottom:1em}.btn-activity-bottom .activity-indicator{padding-top:1em}.btn-activity-left,.btn-activity-right{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.btn-activity-left{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.btn-activity-left .activity-indicator{padding-right:1em}.btn-activity-right .activity-indicator{padding-left:1em}.btn-activity:not(.btn-link){-webkit-animation:btn-activity-in 333ms;animation:btn-activity-in 333ms}.btn-hide-activity:not(.btn-link){-webkit-animation:btn-activity-out 333ms;animation:btn-activity-out 333ms}.btn-activity.btn-hide-activity .activity-indicator{opacity:0}.btn-activity .activity-indicator{opacity:1;visibility:visible;position:relative;font-size:.55em}
+.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)}}@-webkit-keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-in{0%,to{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scale(.98);transform:scale(.98)}}@-webkit-keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}@keyframes btn-activity-out{0%,to{-webkit-transform:scale(1);transform:scale(1)}70%{-webkit-transform:scale(.98);transform:scale(.98)}}.btn-activity-top,.btn.btn-activity-top,.btn-activity-bottom,.btn.btn-activity-bottom,.btn-activity-left,.btn.btn-activity-left,.btn-activity-right,.btn.btn-activity-right{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;position:relative;-webkit-transition:all 166.5ms ease-in;transition:all 166.5ms ease-in}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator,.btn-activity-left .activity-indicator,.btn-activity-right .activity-indicator{opacity:0;position:absolute;visibility:hidden;-webkit-transition:opacity 333ms ease-in;transition:opacity 333ms ease-in}.btn-activity-top,.btn-activity-bottom{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.btn-activity-top .activity-indicator,.btn-activity-bottom .activity-indicator{margin-left:auto;margin-right:auto}.btn-activity-top{-webkit-box-orient:vertical;-webkit-box-direction:reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}.btn-activity-top .activity-indicator{padding-bottom:1em}.btn-activity-bottom .activity-indicator{padding-top:1em}.btn-activity-left,.btn-activity-right{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.btn-activity-left{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.btn-activity-left .activity-indicator{padding-right:1em}.btn-activity-right .activity-indicator{padding-left:1em}.btn-activity:not(.btn-link){-webkit-animation:btn-activity-in 333ms;animation:btn-activity-in 333ms}.btn-hide-activity:not(.btn-link){-webkit-animation:btn-activity-out 333ms;animation:btn-activity-out 333ms}.btn-activity.btn-hide-activity .activity-indicator{opacity:0}.btn-activity .activity-indicator{opacity:1;visibility:visible;position:relative;font-size:.55em}

package/dist/btn-activity.es.js

@@ -128,7 +128,7 @@ function _nonIterableRest() {
   throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 }
 var _assign = function __assign() {
-  _assign = Object.assign || function __assign2(t) {
+  _assign = Object.assign || function __assign22(t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
       for (var p in s) {
@@ -140,17 +140,17 @@ var _assign = function __assign() {
   };
   return _assign.apply(this, arguments);
 };
-function lowerCase(str) {
+function lowerCase$1(str) {
   return str.toLowerCase();
 }
-var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
-var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
-function noCase(input, options) {
+var DEFAULT_SPLIT_REGEXP$1 = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
+var DEFAULT_STRIP_REGEXP$1 = /[^A-Z0-9]+/gi;
+function noCase$1(input, options) {
   if (options === void 0) {
     options = {};
   }
-  var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
-  var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
+  var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP$1 : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP$1 : _b, _c = options.transform, transform = _c === void 0 ? lowerCase$1 : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
+  var result = replace$1(replace$1(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
   var start = 0;
   var end = result.length;
   while (result.charAt(start) === "\0") {
@@ -161,26 +161,26 @@ function noCase(input, options) {
   }
   return result.slice(start, end).split("\0").map(transform).join(delimiter);
 }
-function replace(input, re, value) {
+function replace$1(input, re, value) {
   if (re instanceof RegExp)
     return input.replace(re, value);
   return re.reduce(function(input2, re2) {
     return input2.replace(re2, value);
   }, input);
 }
-function dotCase(input, options) {
+function dotCase$1(input, options) {
   if (options === void 0) {
     options = {};
   }
-  return noCase(input, _assign({
+  return noCase$1(input, _assign({
     delimiter: "."
   }, options));
 }
-function paramCase(input, options) {
+function paramCase$1(input, options) {
   if (options === void 0) {
     options = {};
   }
-  return dotCase(input, _assign({
+  return dotCase$1(input, _assign({
     delimiter: "-"
   }, options));
 }
@@ -196,17 +196,9 @@ var ComponentRegistry = /* @__PURE__ */ function() {
     });
   }
   _createClass(ComponentRegistry2, [{
-    key: "validate",
-    value: function validate(value) {
-      if (_typeof(value) === "object" || typeof value === "function") {
-        return value;
-      }
-      throw new Error("Invalid data type `".concat(_typeof(value), "`. Should be type `object` or `function`."));
-    }
-  }, {
     key: "get",
     value: function get(name) {
-      var match = this.components[name = paramCase(name)];
+      var match = this.components[name = paramCase$1(name)];
       if (match) {
         return match;
       }
@@ -219,17 +211,17 @@ var ComponentRegistry = /* @__PURE__ */ function() {
       if (_typeof(name) === "object") {
         Object.entries(name).forEach(function(_ref3) {
           var _ref4 = _slicedToArray(_ref3, 2), name2 = _ref4[0], module = _ref4[1];
-          _this2.register(paramCase(name2), module);
+          _this2.register(paramCase$1(name2), module);
         });
         return this;
       }
-      this.components[paramCase(name)] = this.validate(value);
+      this.components[paramCase$1(name)] = value;
       return this;
     }
   }, {
     key: "remove",
     value: function remove(name) {
-      delete this.components[paramCase(name)];
+      delete this.components[paramCase$1(name)];
       return this;
     }
   }, {
@@ -248,13 +240,13 @@ function factory() {
   return _construct(ComponentRegistry, args);
 }
 const registry = factory();
-var render$1 = function() {
+var render$2 = function() {
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
   return _c("div", { staticClass: "activity-indicator", class: _vm.classes, style: _vm.style }, [_c("div", { staticClass: "activity-indicator-content" }, [_c(_vm.component, { tag: "component", staticClass: "mx-auto" }), _vm.label ? _c("div", { staticClass: "activity-indicator-label" }, [_vm._v(" " + _vm._s(_vm.label) + " ")]) : _vm._e()], 1)]);
 };
-var staticRenderFns$1 = [];
+var staticRenderFns$2 = [];
 var ActivityIndicator_vue_vue_type_style_index_0_lang = "";
 function normalizeComponent(scriptExports, render2, staticRenderFns2, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
   var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
@@ -310,7 +302,7 @@ function normalizeComponent(scriptExports, render2, staticRenderFns2, functional
 function unit(value, uom = "px") {
   return value !== null && value !== void 0 && value !== false && isFinite(value) ? `${value}${uom}` : value;
 }
-const __vue2_script$1 = {
+const __vue2_script$2 = {
   name: "ActivityIndicator",
   props: {
     absolute: Boolean,
@@ -369,15 +361,15 @@ const __vue2_script$1 = {
     }
   }
 };
-const __cssModules$1 = {};
-var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, render$1, staticRenderFns$1, false, __vue2_injectStyles$1, null, null, null);
-function __vue2_injectStyles$1(context) {
-  for (let o in __cssModules$1) {
-    this[o] = __cssModules$1[o];
+const __cssModules$2 = {};
+var __component__$2 = /* @__PURE__ */ normalizeComponent(__vue2_script$2, render$2, staticRenderFns$2, false, __vue2_injectStyles$2, null, null, null);
+function __vue2_injectStyles$2(context) {
+  for (let o in __cssModules$2) {
+    this[o] = __cssModules$2[o];
   }
 }
 var ActivityIndicator = /* @__PURE__ */ function() {
-  return __component__$1.exports;
+  return __component__$2.exports;
 }();
 var Chase_vue_vue_type_style_index_0_lang = "";
 var CircleFade_vue_vue_type_style_index_0_lang = "";
@@ -393,11 +385,195 @@ var Spotify_vue_vue_type_style_index_0_lang = "";
 var Square_vue_vue_type_style_index_0_lang = "";
 var SquareFold_vue_vue_type_style_index_0_lang = "";
 var SquareOrbit_vue_vue_type_style_index_0_lang = "";
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+var __assign2 = function() {
+  __assign2 = Object.assign || function __assign22(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p))
+          t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign2.apply(this, arguments);
+};
+function lowerCase(str) {
+  return str.toLowerCase();
+}
+var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
+var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
+function noCase(input, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d;
+  var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
+  var start = 0;
+  var end = result.length;
+  while (result.charAt(start) === "\0")
+    start++;
+  while (result.charAt(end - 1) === "\0")
+    end--;
+  return result.slice(start, end).split("\0").map(transform).join(delimiter);
+}
+function replace(input, re, value) {
+  if (re instanceof RegExp)
+    return input.replace(re, value);
+  return re.reduce(function(input2, re2) {
+    return input2.replace(re2, value);
+  }, input);
+}
+function dotCase(input, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return noCase(input, __assign2({
+    delimiter: "."
+  }, options));
+}
+function paramCase(input, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return dotCase(input, __assign2({
+    delimiter: "-"
+  }, options));
+}
+var Sizeable = {
+  props: {
+    size: String,
+    sizePrefix: {
+      type: String,
+      default() {
+        return this.$options.name;
+      }
+    }
+  },
+  computed: {
+    sizeableClassPrefix() {
+      return this.sizePrefix && paramCase(this.sizePrefix);
+    },
+    sizeableClass() {
+      if (!this.size || !this.sizeableClassPrefix) {
+        return "";
+      }
+      return `${this.sizeableClassPrefix}-${this.size}`;
+    }
+  }
+};
+var Variant = {
+  props: {
+    variant: String,
+    variantPrefix: {
+      type: String,
+      default() {
+        return this.$options.name && this.$options.name.toLowerCase();
+      }
+    }
+  },
+  computed: {
+    variantClassPrefix() {
+      return this.variantPrefix;
+    },
+    variantClass() {
+      if (!this.variant || !this.variantClassPrefix) {
+        return "";
+      }
+      return `${this.variantClassPrefix}-${this.variant}`;
+    }
+  }
+};
+var render$1 = function() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c(_vm.component, { tag: "component", class: _vm.classes, attrs: { "disabled": _vm.disabled, "role": "button" }, on: { "click": function($event) {
+    !_vm.disabled && _vm.$emit("click", $event);
+  } } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  })], 2);
+};
+var staticRenderFns$1 = [];
+const __vue2_script$1 = {
+  name: "Btn",
+  mixins: [
+    Sizeable,
+    Variant
+  ],
+  props: {
+    active: Boolean,
+    block: Boolean,
+    disabled: Boolean,
+    label: String,
+    outline: Boolean,
+    tag: String,
+    variant: {
+      type: String,
+      default: "primary"
+    }
+  },
+  computed: {
+    classes() {
+      return [
+        "btn",
+        this.variantClass,
+        this.sizeableClass,
+        this.active && "active",
+        this.block && "btn-block",
+        this.disabled && "disabled"
+      ];
+    },
+    component() {
+      if (this.tag) {
+        return this.tag;
+      }
+      if (this.$attrs.to) {
+        return "router-link";
+      }
+      if (this.$attrs.href) {
+        return "a";
+      }
+      return "button";
+    },
+    variantClassPrefix() {
+      return this.variantPrefix + (this.outline ? "-outline" : "");
+    }
+  }
+};
+const __cssModules$1 = {};
+var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, render$1, staticRenderFns$1, false, __vue2_injectStyles$1, null, null, null);
+function __vue2_injectStyles$1(context) {
+  for (let o in __cssModules$1) {
+    this[o] = __cssModules$1[o];
+  }
+}
+var Btn = /* @__PURE__ */ function() {
+  return __component__$1.exports;
+}();
 var render = function() {
+  var this$1$1 = this;
   var _vm = this;
   var _h = _vm.$createElement;
   var _c = _vm._self._c || _h;
-  return _c("button", { staticClass: "btn", class: _vm.classes, attrs: { "type": _vm.type }, on: { "click": _vm.onClick } }, [_vm.icon ? _c("i", { class: _vm.icon }) : _vm._e(), _vm._v(" " + _vm._s(_vm.label) + " "), _vm._t("default"), _c("activity-indicator", _vm._b({}, "activity-indicator", _vm.indicatorProps, false))], 2);
+  return _c("btn", { class: _vm.classes, attrs: { "active": _vm.active, "block": _vm.block, "disabled": _vm.disabled, "size": _vm.size, "tag": _vm.tag, "variant": _vm.variant }, on: { "click": function(e) {
+    return !_vm.disabled && _vm.$emit("click", e, this$1$1);
+  } } }, [_vm._t("default", function() {
+    return [_vm._v(_vm._s(_vm.label))];
+  }), _c("activity-indicator", _vm._b({}, "activity-indicator", _vm.indicatorProps, false))], 2);
 };
 var staticRenderFns = [];
 var BtnActivity_vue_vue_type_style_index_0_lang = "";
@@ -426,43 +602,45 @@ const animated = function(el, callback) {
 const __vue2_script = {
   name: "BtnActivity",
   components: {
-    ActivityIndicator
+    ActivityIndicator,
+    Btn
   },
   props: {
     active: Boolean,
     activity: Boolean,
     block: Boolean,
     disabled: Boolean,
+    indicator: {
+      type: [Object, String],
+      default: "spinner"
+    },
     label: String,
-    icon: String,
-    type: String,
+    orientation: {
+      type: String,
+      default: "right"
+    },
     size: {
       type: String,
       default: "md"
     },
+    tag: String,
     variant: {
       type: String,
       default: "primary"
-    },
-    indicator: {
-      type: [Object, String],
-      default: "spinner"
-    },
-    orientation: {
-      type: String,
-      default: "right"
     }
   },
+  data() {
+    return {
+      currentActivity: this.activity
+    };
+  },
   computed: {
     classes() {
       const classes = {
         "disabled": this.disabled,
         "active": this.active,
-        "btn-block": this.block,
         "btn-activity": this.activity
       };
-      classes["btn-" + this.size.replace("btn-", "")] = !!this.size;
-      classes["btn-" + this.variant.replace("btn-", "")] = !!this.variant;
       classes["btn-activity-" + this.orientation.replace("btn-activity-", "")] = !!this.orientation;
       classes["btn-activity-indicator-" + this.indicatorProps.type.replace("btn-activity-indicator-", "")] = !!this.indicatorProps.type;
       return classes;
@@ -484,33 +662,42 @@ const __vue2_script = {
       }
     }
   },
+  mounted() {
+    if (this.activity) {
+      this.showActivity();
+    }
+  },
   methods: {
     disable() {
       this.$el.disabled = true;
+      this.$el.classList.add("disabled");
     },
     enable() {
       this.$el.disabled = false;
-    },
-    showActivity() {
-      this.disable();
-      animated(this.$el, () => {
-        this.$el.classList.add("btn-activity");
-        this.$emit("show-activity");
-      });
+      this.$el.classList.remove("disabled");
     },
     hideActivity() {
       this.$el.classList.add("btn-hide-activity");
       animated(this.$el, () => {
         this.enable();
+        this.currentActivity = false;
         this.$el.classList.remove("btn-activity", "btn-hide-activity");
         this.$emit("hide-activity");
       });
     },
-    onClick(event) {
-      if (!this.disabled) {
-        this.$emit("click", event);
+    showActivity() {
+      this.currentActivity = true;
+      this.disable();
+      animated(this.$el, () => {
+        this.$el.classList.add("btn-activity");
+        this.$emit("show-activity");
+      });
+    },
+    toggle() {
+      if (!this.currentActivity) {
+        this.showActivity();
       } else {
-        event.preventDefault();
+        this.hideActivity();
       }
     }
   }

package/dist/btn-activity.umd.js

@@ -1,2 +1,15 @@
-(function(f,_){typeof exports=="object"&&typeof module!="undefined"?_(exports):typeof define=="function"&&define.amd?define(["exports"],_):(f=typeof globalThis!="undefined"?globalThis:f||self,_(f.BtnActivity={}))})(this,function(f){"use strict";function _(t){return _=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_(t)}function k(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function g(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function E(t,e,n){return e&&g(t.prototype,e),n&&g(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function b(t,e){return b=Object.setPrototypeOf||function(i,r){return i.__proto__=r,i},b(t,e)}function j(){if(typeof Reflect=="undefined"||!Reflect.construct||Reflect.construct.sham)return!1;if(typeof Proxy=="function")return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch{return!1}}function h(t,e,n){return j()?h=Reflect.construct:h=function(r,s,o){var u=[null];u.push.apply(u,s);var a=Function.bind.apply(r,u),c=new a;return o&&b(c,o.prototype),c},h.apply(null,arguments)}function S(t,e){return B(t)||I(t,e)||F(t,e)||z()}function B(t){if(Array.isArray(t))return t}function I(t,e){var n=t==null?null:typeof Symbol!="undefined"&&t[Symbol.iterator]||t["@@iterator"];if(n!=null){var i=[],r=!0,s=!1,o,u;try{for(n=n.call(t);!(r=(o=n.next()).done)&&(i.push(o.value),!(e&&i.length===e));r=!0);}catch(a){s=!0,u=a}finally{try{!r&&n.return!=null&&n.return()}finally{if(s)throw u}}return i}}function F(t,e){if(!!t){if(typeof t=="string")return A(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);if(n==="Object"&&t.constructor&&(n=t.constructor.name),n==="Map"||n==="Set")return Array.from(t);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return A(t,e)}}function A(t,e){(e==null||e>t.length)&&(e=t.length);for(var n=0,i=new Array(e);n<e;n++)i[n]=t[n];return i}function z(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
-In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var p=function(){return p=Object.assign||function(n){for(var i,r=1,s=arguments.length;r<s;r++){i=arguments[r];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(n[o]=i[o])}return n},p.apply(this,arguments)};function N(t){return t.toLowerCase()}var D=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],L=/[^A-Z0-9]+/gi;function W(t,e){e===void 0&&(e={});for(var n=e.splitRegexp,i=n===void 0?D:n,r=e.stripRegexp,s=r===void 0?L:r,o=e.transform,u=o===void 0?N:o,a=e.delimiter,c=a===void 0?" ":a,y=C(C(t,i,"$1\0$2"),s,"\0"),d=0,l=y.length;y.charAt(d)==="\0";)d++;for(;y.charAt(l-1)==="\0";)l--;return y.slice(d,l).split("\0").map(u).join(c)}function C(t,e,n){return e instanceof RegExp?t.replace(e,n):e.reduce(function(i,r){return i.replace(r,n)},t)}function H(t,e){return e===void 0&&(e={}),W(t,p({delimiter:"."},e))}function m(t,e){return e===void 0&&(e={}),H(t,p({delimiter:"-"},e))}var w=function(){function t(){var e=this,n=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};k(this,t),this.components={},Object.entries(n).forEach(function(i){var r=S(i,2),s=r[0],o=r[1];e.register(s,o)})}return E(t,[{key:"validate",value:function(n){if(_(n)==="object"||typeof n=="function")return n;throw new Error("Invalid data type `".concat(_(n),"`. Should be type `object` or `function`."))}},{key:"get",value:function(n){var i=this.components[n=m(n)];if(i)return i;throw new Error('"'.concat(n,'" has not been registered yet!'))}},{key:"register",value:function(n,i){var r=this;return _(n)==="object"?(Object.entries(n).forEach(function(s){var o=S(s,2),u=o[0],a=o[1];r.register(m(u),a)}),this):(this.components[m(n)]=this.validate(i),this)}},{key:"remove",value:function(n){return delete this.components[m(n)],this}},{key:"reset",value:function(){return this.components={},this}}]),t}();function M(){for(var t=arguments.length,e=new Array(t),n=0;n<t;n++)e[n]=arguments[n];return h(w,e)}const $=M();var U=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"activity-indicator",class:t.classes,style:t.style},[n("div",{staticClass:"activity-indicator-content"},[n(t.component,{tag:"component",staticClass:"mx-auto"}),t.label?n("div",{staticClass:"activity-indicator-label"},[t._v(" "+t._s(t.label)+" ")]):t._e()],1)])},q=[],rt="";function x(t,e,n,i,r,s,o,u){var a=typeof t=="function"?t.options:t;e&&(a.render=e,a.staticRenderFns=n,a._compiled=!0),i&&(a.functional=!0),s&&(a._scopeId="data-v-"+s);var c;if(o?(c=function(l){l=l||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!l&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(l=__VUE_SSR_CONTEXT__),r&&r.call(this,l),l&&l._registeredComponents&&l._registeredComponents.add(o)},a._ssrRegister=c):r&&(c=u?function(){r.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:r),c)if(a.functional){a._injectStyles=c;var y=a.render;a.render=function(it,T){return c.call(T),y(it,T)}}else{var d=a.beforeCreate;a.beforeCreate=d?[].concat(d,c):[c]}return{exports:t,options:a}}function v(t,e="px"){return t!=null&&t!==!1&&isFinite(t)?`${t}${e}`:t}const V={name:"ActivityIndicator",props:{absolute:Boolean,center:Boolean,label:String,size:{type:String,default:"md"},registry:{type:w,default(){return $}},type:{type:String,required:!0},height:[String,Number],maxHeight:[String,Number],minHeight:[String,Number],width:[String,Number],maxWidth:[String,Number],minWidth:[String,Number]},computed:{classes(){return{"activity-indicator-center":this.center,"activity-indicator-absolute":this.absolute,[this.size&&`activity-indicator-${this.size}`]:!!this.size}},style(){return{width:v(this.width),maxWidth:v(this.maxWidth),minWidth:v(this.minWidth),height:v(this.height),maxHeight:v(this.maxHeight),minHeight:v(this.minHeight)}},component(){return()=>{const t=$.get(this.type);return t instanceof Promise?t:typeof t=="function"?t():Promise.resolve(t)}}}},R={};var X=x(V,U,q,!1,Z,null,null,null);function Z(t){for(let e in R)this[e]=R[e]}var G=function(){return X.exports}(),at="",ot="",st="",ct="",lt="",ut="",_t="",ft="",vt="",yt="",dt="",ht="",pt="",mt="",J=function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("button",{staticClass:"btn",class:t.classes,attrs:{type:t.type},on:{click:t.onClick}},[t.icon?n("i",{class:t.icon}):t._e(),t._v(" "+t._s(t.label)+" "),t._t("default"),n("activity-indicator",t._b({},"activity-indicator",t.indicatorProps,!1))],2)},K=[],bt="";const Q=function(t){const e=parseFloat(t||0,10),n=t&&t.match(/m?s/),i=n?n[0]:!1;let r;switch(i){case"s":r=e*1e3;break;case"ms":default:r=e;break}return r||0},O=function(t,e){const n=(t.ownerDocument||document).defaultView;setTimeout(()=>{e.apply()},Q(n.getComputedStyle(t).animationDuration))},Y={name:"BtnActivity",components:{ActivityIndicator:G},props:{active:Boolean,activity:Boolean,block:Boolean,disabled:Boolean,label:String,icon:String,type:String,size:{type:String,default:"md"},variant:{type:String,default:"primary"},indicator:{type:[Object,String],default:"spinner"},orientation:{type:String,default:"right"}},computed:{classes(){const t={disabled:this.disabled,active:this.active,"btn-block":this.block,"btn-activity":this.activity};return t["btn-"+this.size.replace("btn-","")]=!!this.size,t["btn-"+this.variant.replace("btn-","")]=!!this.variant,t["btn-activity-"+this.orientation.replace("btn-activity-","")]=!!this.orientation,t["btn-activity-indicator-"+this.indicatorProps.type.replace("btn-activity-indicator-","")]=!!this.indicatorProps.type,t},indicatorProps(){return Object.assign({type:"spinner"},(typeof this.indicator=="string"?{type:this.indicator}:this.indicator)||{})}},watch:{activity(t){t?this.showActivity():this.hideActivity()}},methods:{disable(){this.$el.disabled=!0},enable(){this.$el.disabled=!1},showActivity(){this.disable(),O(this.$el,()=>{this.$el.classList.add("btn-activity"),this.$emit("show-activity")})},hideActivity(){this.$el.classList.add("btn-hide-activity"),O(this.$el,()=>{this.enable(),this.$el.classList.remove("btn-activity","btn-hide-activity"),this.$emit("hide-activity")})},onClick(t){this.disabled?t.preventDefault():this.$emit("click",t)}}},P={};var tt=x(Y,J,K,!1,et,null,null,null);function et(t){for(let e in P)this[e]=P[e]}var nt=function(){return tt.exports}();f.BtnActivity=nt,Object.defineProperty(f,"__esModule",{value:!0}),f[Symbol.toStringTag]="Module"});
+(function(d,v){typeof exports=="object"&&typeof module!="undefined"?v(exports):typeof define=="function"&&define.amd?define(["exports"],v):(d=typeof globalThis!="undefined"?globalThis:d||self,v(d.BtnActivity={}))})(this,function(d){"use strict";function v(t){return v=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},v(t)}function B(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function S(t,e){for(var i=0;i<e.length;i++){var n=e[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function j(t,e,i){return e&&S(t.prototype,e),i&&S(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t}function b(t,e){return b=Object.setPrototypeOf||function(n,r){return n.__proto__=r,n},b(t,e)}function L(){if(typeof Reflect=="undefined"||!Reflect.construct||Reflect.construct.sham)return!1;if(typeof Proxy=="function")return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch{return!1}}function y(t,e,i){return L()?y=Reflect.construct:y=function(r,o,s){var u=[null];u.push.apply(u,o);var a=Function.bind.apply(r,u),c=new a;return s&&b(c,s.prototype),c},y.apply(null,arguments)}function x(t,e){return F(t)||I(t,e)||D(t,e)||N()}function F(t){if(Array.isArray(t))return t}function I(t,e){var i=t==null?null:typeof Symbol!="undefined"&&t[Symbol.iterator]||t["@@iterator"];if(i!=null){var n=[],r=!0,o=!1,s,u;try{for(i=i.call(t);!(r=(s=i.next()).done)&&(n.push(s.value),!(e&&n.length===e));r=!0);}catch(a){o=!0,u=a}finally{try{!r&&i.return!=null&&i.return()}finally{if(o)throw u}}return n}}function D(t,e){if(!!t){if(typeof t=="string")return A(t,e);var i=Object.prototype.toString.call(t).slice(8,-1);if(i==="Object"&&t.constructor&&(i=t.constructor.name),i==="Map"||i==="Set")return Array.from(t);if(i==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return A(t,e)}}function A(t,e){(e==null||e>t.length)&&(e=t.length);for(var i=0,n=new Array(e);i<e;i++)n[i]=t[i];return n}function N(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
+In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}var p=function(){return p=Object.assign||function(i){for(var n,r=1,o=arguments.length;r<o;r++){n=arguments[r];for(var s in n)Object.prototype.hasOwnProperty.call(n,s)&&(i[s]=n[s])}return i},p.apply(this,arguments)};function W(t){return t.toLowerCase()}var Z=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],H=/[^A-Z0-9]+/gi;function U(t,e){e===void 0&&(e={});for(var i=e.splitRegexp,n=i===void 0?Z:i,r=e.stripRegexp,o=r===void 0?H:r,s=e.transform,u=s===void 0?W:s,a=e.delimiter,c=a===void 0?" ":a,f=C(C(t,n,"$1\0$2"),o,"\0"),_=0,l=f.length;f.charAt(_)==="\0";)_++;for(;f.charAt(l-1)==="\0";)l--;return f.slice(_,l).split("\0").map(u).join(c)}function C(t,e,i){return e instanceof RegExp?t.replace(e,i):e.reduce(function(n,r){return n.replace(r,i)},t)}function M(t,e){return e===void 0&&(e={}),U(t,p({delimiter:"."},e))}function m(t,e){return e===void 0&&(e={}),M(t,p({delimiter:"-"},e))}var P=function(){function t(){var e=this,i=arguments.length>0&&arguments[0]!==void 0?arguments[0]:{};B(this,t),this.components={},Object.entries(i).forEach(function(n){var r=x(n,2),o=r[0],s=r[1];e.register(o,s)})}return j(t,[{key:"get",value:function(i){var n=this.components[i=m(i)];if(n)return n;throw new Error('"'.concat(i,'" has not been registered yet!'))}},{key:"register",value:function(i,n){var r=this;return v(i)==="object"?(Object.entries(i).forEach(function(o){var s=x(o,2),u=s[0],a=s[1];r.register(m(u),a)}),this):(this.components[m(i)]=n,this)}},{key:"remove",value:function(i){return delete this.components[m(i)],this}},{key:"reset",value:function(){return this.components={},this}}]),t}();function X(){for(var t=arguments.length,e=new Array(t),i=0;i<t;i++)e[i]=arguments[i];return y(P,e)}const w=X();var G=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"activity-indicator",class:t.classes,style:t.style},[i("div",{staticClass:"activity-indicator-content"},[i(t.component,{tag:"component",staticClass:"mx-auto"}),t.label?i("div",{staticClass:"activity-indicator-label"},[t._v(" "+t._s(t.label)+" ")]):t._e()],1)])},V=[],$t="";function $(t,e,i,n,r,o,s,u){var a=typeof t=="function"?t.options:t;e&&(a.render=e,a.staticRenderFns=i,a._compiled=!0),n&&(a.functional=!0),o&&(a._scopeId="data-v-"+o);var c;if(s?(c=function(l){l=l||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,!l&&typeof __VUE_SSR_CONTEXT__!="undefined"&&(l=__VUE_SSR_CONTEXT__),r&&r.call(this,l),l&&l._registeredComponents&&l._registeredComponents.add(s)},a._ssrRegister=c):r&&(c=u?function(){r.call(this,(a.functional?this.parent:this).$root.$options.shadowRoot)}:r),c)if(a.functional){a._injectStyles=c;var f=a.render;a.render=function(bt,k){return c.call(k),f(bt,k)}}else{var _=a.beforeCreate;a.beforeCreate=_?[].concat(_,c):[c]}return{exports:t,options:a}}function h(t,e="px"){return t!=null&&t!==!1&&isFinite(t)?`${t}${e}`:t}const q={name:"ActivityIndicator",props:{absolute:Boolean,center:Boolean,label:String,size:{type:String,default:"md"},registry:{type:P,default(){return w}},type:{type:String,required:!0},height:[String,Number],maxHeight:[String,Number],minHeight:[String,Number],width:[String,Number],maxWidth:[String,Number],minWidth:[String,Number]},computed:{classes(){return{"activity-indicator-center":this.center,"activity-indicator-absolute":this.absolute,[this.size&&`activity-indicator-${this.size}`]:!!this.size}},style(){return{width:h(this.width),maxWidth:h(this.maxWidth),minWidth:h(this.minWidth),height:h(this.height),maxHeight:h(this.maxHeight),minHeight:h(this.minHeight)}},component(){return()=>{const t=w.get(this.type);return t instanceof Promise?t:typeof t=="function"?t():Promise.resolve(t)}}}},R={};var J=$(q,G,V,!1,K,null,null,null);function K(t){for(let e in R)this[e]=R[e]}var Q=function(){return J.exports}(),St="",xt="",At="",Ct="",Pt="",wt="",Rt="",zt="",Ot="",Tt="",Et="",kt="",Bt="",jt="";/*! *****************************************************************************
+  Copyright (c) Microsoft Corporation.
+
+  Permission to use, copy, modify, and/or distribute this software for any
+  purpose with or without fee is hereby granted.
+
+  THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+  REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+  AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+  INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+  PERFORMANCE OF THIS SOFTWARE.
+  ***************************************************************************** */var g=function(){return g=Object.assign||function(e){for(var i,n=1,r=arguments.length;n<r;n++){i=arguments[n];for(var o in i)Object.prototype.hasOwnProperty.call(i,o)&&(e[o]=i[o])}return e},g.apply(this,arguments)};function Y(t){return t.toLowerCase()}var tt=[/([a-z0-9])([A-Z])/g,/([A-Z])([A-Z][a-z])/g],et=/[^A-Z0-9]+/gi;function it(t,e){e===void 0&&(e={});for(var i=e.splitRegexp,n=i===void 0?tt:i,r=e.stripRegexp,o=r===void 0?et:r,s=e.transform,u=s===void 0?Y:s,a=e.delimiter,c=a===void 0?" ":a,f=z(z(t,n,"$1\0$2"),o,"\0"),_=0,l=f.length;f.charAt(_)==="\0";)_++;for(;f.charAt(l-1)==="\0";)l--;return f.slice(_,l).split("\0").map(u).join(c)}function z(t,e,i){return e instanceof RegExp?t.replace(e,i):e.reduce(function(n,r){return n.replace(r,i)},t)}function nt(t,e){return e===void 0&&(e={}),it(t,g({delimiter:"."},e))}function rt(t,e){return e===void 0&&(e={}),nt(t,g({delimiter:"-"},e))}var at={props:{size:String,sizePrefix:{type:String,default(){return this.$options.name}}},computed:{sizeableClassPrefix(){return this.sizePrefix&&rt(this.sizePrefix)},sizeableClass(){return!this.size||!this.sizeableClassPrefix?"":`${this.sizeableClassPrefix}-${this.size}`}}},st={props:{variant:String,variantPrefix:{type:String,default(){return this.$options.name&&this.$options.name.toLowerCase()}}},computed:{variantClassPrefix(){return this.variantPrefix},variantClass(){return!this.variant||!this.variantClassPrefix?"":`${this.variantClassPrefix}-${this.variant}`}}},ot=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i(t.component,{tag:"component",class:t.classes,attrs:{disabled:t.disabled,role:"button"},on:{click:function(n){!t.disabled&&t.$emit("click",n)}}},[t._t("default",function(){return[t._v(t._s(t.label))]})],2)},lt=[];const ct={name:"Btn",mixins:[at,st],props:{active:Boolean,block:Boolean,disabled:Boolean,label:String,outline:Boolean,tag:String,variant:{type:String,default:"primary"}},computed:{classes(){return["btn",this.variantClass,this.sizeableClass,this.active&&"active",this.block&&"btn-block",this.disabled&&"disabled"]},component(){return this.tag?this.tag:this.$attrs.to?"router-link":this.$attrs.href?"a":"button"},variantClassPrefix(){return this.variantPrefix+(this.outline?"-outline":"")}}},O={};var ut=$(ct,ot,lt,!1,ft,null,null,null);function ft(t){for(let e in O)this[e]=O[e]}var _t=function(){return ut.exports}(),vt=function(){var t=this,e=this,i=e.$createElement,n=e._self._c||i;return n("btn",{class:e.classes,attrs:{active:e.active,block:e.block,disabled:e.disabled,size:e.size,tag:e.tag,variant:e.variant},on:{click:function(r){return!e.disabled&&e.$emit("click",r,t)}}},[e._t("default",function(){return[e._v(e._s(e.label))]}),n("activity-indicator",e._b({},"activity-indicator",e.indicatorProps,!1))],2)},dt=[],Lt="";const ht=function(t){const e=parseFloat(t||0,10),i=t&&t.match(/m?s/),n=i?i[0]:!1;let r;switch(n){case"s":r=e*1e3;break;case"ms":default:r=e;break}return r||0},T=function(t,e){const i=(t.ownerDocument||document).defaultView;setTimeout(()=>{e.apply()},ht(i.getComputedStyle(t).animationDuration))},yt={name:"BtnActivity",components:{ActivityIndicator:Q,Btn:_t},props:{active:Boolean,activity:Boolean,block:Boolean,disabled:Boolean,indicator:{type:[Object,String],default:"spinner"},label:String,orientation:{type:String,default:"right"},size:{type:String,default:"md"},tag:String,variant:{type:String,default:"primary"}},data(){return{currentActivity:this.activity}},computed:{classes(){const t={disabled:this.disabled,active:this.active,"btn-activity":this.activity};return t["btn-activity-"+this.orientation.replace("btn-activity-","")]=!!this.orientation,t["btn-activity-indicator-"+this.indicatorProps.type.replace("btn-activity-indicator-","")]=!!this.indicatorProps.type,t},indicatorProps(){return Object.assign({type:"spinner"},(typeof this.indicator=="string"?{type:this.indicator}:this.indicator)||{})}},watch:{activity(t){t?this.showActivity():this.hideActivity()}},mounted(){this.activity&&this.showActivity()},methods:{disable(){this.$el.disabled=!0,this.$el.classList.add("disabled")},enable(){this.$el.disabled=!1,this.$el.classList.remove("disabled")},hideActivity(){this.$el.classList.add("btn-hide-activity"),T(this.$el,()=>{this.enable(),this.currentActivity=!1,this.$el.classList.remove("btn-activity","btn-hide-activity"),this.$emit("hide-activity")})},showActivity(){this.currentActivity=!0,this.disable(),T(this.$el,()=>{this.$el.classList.add("btn-activity"),this.$emit("show-activity")})},toggle(){this.currentActivity?this.hideActivity():this.showActivity()}}},E={};var pt=$(yt,vt,dt,!1,mt,null,null,null);function mt(t){for(let e in E)this[e]=E[e]}var gt=function(){return pt.exports}();d.BtnActivity=gt,Object.defineProperties(d,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/btn-activity",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A Vue activity button component.",
   "files": [
     "index.js",
@@ -40,7 +40,7 @@
   "homepage": "https://github.com/vue-interface/btn-activity/docs#readme",
   "dependencies": {
     "@vue-interface/activity-indicator": "^1.0.4",
-    "@vue-interface/btn": "^1.0.6",
+    "@vue-interface/btn": "^2.0.0",
     "vue": "^2.6.14"
   },
   "devDependencies": {

package/src/BtnActivity.vue

@@ -1,13 +1,21 @@
 <template>
-    <button :type="type" class="btn" :class="classes" @click="onClick">
-        <i v-if="icon" :class="icon" /> {{ label }}
-        <slot />
+    <btn
+        :active="active"
+        :block="block"
+        :disabled="disabled"
+        :size="size"
+        :tag="tag"
+        :variant="variant"
+        :class="classes"
+        @click="(e) => !disabled && $emit('click', e, this)">
+        <slot>{{ label }}</slot>
         <activity-indicator v-bind="indicatorProps" />
-    </button>
+    </btn>
 </template>
 
 <script>
 import { ActivityIndicator } from '@vue-interface/activity-indicator';
+import { Btn } from '@vue-interface/btn';
 
 const convertAnimationDelayToInt = function(delay) {
     const num = parseFloat(delay || 0, 10);
@@ -40,9 +48,10 @@ const animated = function(el, callback) {
 export default {
 
     name: 'BtnActivity',
-
+    
     components: {
-        ActivityIndicator
+        ActivityIndicator,
+        Btn
     },
 
     props: {
@@ -69,33 +78,38 @@ export default {
         block: Boolean,
 
         /**
-         * Make the button appear with the disabled state.
+         * Disable the button.
          *
          * @property {Boolean}
          */
         disabled: Boolean,
 
         /**
-         * The button label. If not passed as a property, label must be passed
-         * inside the element's html.
+         * The type of activity indicator inside the button.
          *
          * @property {String}
          */
-        label: String,
+        indicator: {
+            type: [Object, String],
+            default: 'spinner'
+        },
 
         /**
-         * The button icon
+         * The button label.
          *
          * @property {String}
          */
-        icon: String,
+        label: String,
 
         /**
-         * The `type` attribute for the button element.
+         * The orientation of the activity button inside the button.
          *
          * @property {String}
          */
-        type: String,
+        orientation: {
+            type: String,
+            default: 'right'
+        },
 
         /**
          * The size of the button.
@@ -108,35 +122,28 @@ export default {
         },
 
         /**
-         * The variant of the button.
-         *
-         * @property {String}
-         */
-        variant: {
-            type: String,
-            default: 'primary'
-        },
-
-        /**
-         * The type of activity indicator inside the button.
+         * The HTML tag.
          *
          * @property {String}
          */
-        indicator: {
-            type: [Object, String],
-            default: 'spinner'
-        },
+        tag: String,
 
         /**
-         * The orientation of the activity button inside the button.
+         * The variant of the button.
          *
          * @property {String}
          */
-        orientation: {
+        variant: {
             type: String,
-            default: 'right'
+            default: 'primary'
         }
     },
+    
+    data() {
+        return {
+            currentActivity: this.activity
+        };
+    },
 
     computed: {
 
@@ -149,12 +156,9 @@ export default {
             const classes = {
                 'disabled': this.disabled,
                 'active': this.active,
-                'btn-block': this.block,
                 'btn-activity': this.activity
             };
 
-            classes['btn-' + this.size.replace('btn-', '')] = !!this.size;
-            classes['btn-' + this.variant.replace('btn-', '')] = !!this.variant;
             classes['btn-activity-' + this.orientation.replace('btn-activity-', '')] = !!this.orientation;
             classes['btn-activity-indicator-' + this.indicatorProps.type.replace('btn-activity-indicator-', '')] = !!this.indicatorProps.type;
 
@@ -184,6 +188,12 @@ export default {
 
     },
 
+    mounted() {
+        if(this.activity) {
+            this.showActivity();
+        }
+    },
+
     methods: {
 
         /**
@@ -193,6 +203,7 @@ export default {
          */
         disable() {
             this.$el.disabled = true;
+            this.$el.classList.add('disabled');
         },
 
         /**
@@ -202,48 +213,51 @@ export default {
          */
         enable() {
             this.$el.disabled = false;
+            this.$el.classList.remove('disabled');
         },
 
         /**
-         * Show the activity indicator inside the button.
+         * Hide the activity indicator inside the button.
          *
          * @return void
          */
-        showActivity() {
-            this.disable();
+        hideActivity() {
+            this.$el.classList.add('btn-hide-activity');
 
             animated(this.$el, () => {
-                this.$el.classList.add('btn-activity');
-                this.$emit('show-activity');
+                this.enable();
+                this.currentActivity = false;
+                this.$el.classList.remove('btn-activity', 'btn-hide-activity');
+                this.$emit('hide-activity');
             });
         },
 
         /**
-         * Hide the activity indicator inside the button.
+         * Show the activity indicator inside the button.
          *
          * @return void
          */
-        hideActivity() {
-            this.$el.classList.add('btn-hide-activity');
+        showActivity() {
+            this.currentActivity = true;
+            this.disable();
 
             animated(this.$el, () => {
-                this.enable();
-                this.$el.classList.remove('btn-activity', 'btn-hide-activity');
-                this.$emit('hide-activity');
+                this.$el.classList.add('btn-activity');
+                this.$emit('show-activity');
             });
         },
 
         /**
-         * The click callback function
+         * Show the activity indicator inside the button.
          *
          * @return void
          */
-        onClick(event) {
-            if(!this.disabled) {
-                this.$emit('click', event);
+        toggle() {
+            if(!this.currentActivity) {
+                this.showActivity();
             }
             else {
-                event.preventDefault();
+                this.hideActivity();
             }
         }