@klippa/ngx-enhancy-forms 7.1.3 → 7.1.4

package/bundles/klippa-ngx-enhancy-forms.umd.js

@@ -842,7 +842,7 @@
     LoadingIndicatorComponent.decorators = [
         { type: core.Component, args: [{
                     selector: 'klp-form-loading-indicator',
-                    template: "<div class=\"threeDots\" [class]=\"size\" *ngIf=\"variant === '3dots'\">\n\t<div></div>\n\t<div></div>\n\t<div></div>\n\t<div></div>\n</div>\n\n<div class=\"spinner\" [class]=\"size\" *ngIf=\"variant === 'spinner'\">\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n\t\t<circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n\t\t<circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n\t\t<circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n\t\t<circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n\t\t<circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n\t\t<circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n\t\t<circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n\t\t<circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n\t\t<circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n\t\t<circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n\t</svg>\n</div>\n\n<div class=\"textInput\" *ngIf=\"variant === 'textInput'\">\n\t<input\n\t\tdisabled\n\t\ttype=\"text\"\n\t\tclass=\"form-control\"\n\t\tplaceholder=\"Loading...\"\n\t>\n</div>\n\n<div class=\"picker\" *ngIf=\"variant === 'picker'\">\n\t<input\n\t\tdisabled\n\t\ttype=\"text\"\n\t\tclass=\"form-control\"\n\t\tplaceholder=\"Loading...\"\n\t>\n\t<div class=\"chevronDown\"></div>\n</div>\n",
+                    template: "<div class=\"threeDots\" [ngClass]=\"[size]\" *ngIf=\"variant === '3dots'\">\n\t<div></div>\n\t<div></div>\n\t<div></div>\n\t<div></div>\n</div>\n\n<div class=\"spinner\" [ngClass]=\"[size]\" *ngIf=\"variant === 'spinner'\">\n\t<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\">\n\t\t<circle cx=\"24\" cy=\"4\" r=\"4\" fill=\"currentColor\" />\n\t\t<circle cx=\"12.19\" cy=\"7.86\" r=\"3.7\" fill=\"currentColor\" />\n\t\t<circle cx=\"5.02\" cy=\"17.68\" r=\"3.4\" fill=\"currentColor\" />\n\t\t<circle cx=\"5.02\" cy=\"30.32\" r=\"3.1\" fill=\"currentColor\" />\n\t\t<circle cx=\"12.19\" cy=\"40.14\" r=\"2.8\" fill=\"currentColor\" />\n\t\t<circle cx=\"24\" cy=\"44\" r=\"2.5\" fill=\"currentColor\" />\n\t\t<circle cx=\"35.81\" cy=\"40.14\" r=\"2.2\" fill=\"currentColor\" />\n\t\t<circle cx=\"42.98\" cy=\"30.32\" r=\"1.9\" fill=\"currentColor\" />\n\t\t<circle cx=\"42.98\" cy=\"17.68\" r=\"1.6\" fill=\"currentColor\" />\n\t\t<circle cx=\"35.81\" cy=\"7.86\" r=\"1.3\" fill=\"currentColor\" />\n\t</svg>\n</div>\n\n<div class=\"textInput\" *ngIf=\"variant === 'textInput'\">\n\t<input\n\t\tdisabled\n\t\ttype=\"text\"\n\t\tclass=\"form-control\"\n\t\tplaceholder=\"Loading...\"\n\t>\n</div>\n\n<div class=\"picker\" *ngIf=\"variant === 'picker'\">\n\t<input\n\t\tdisabled\n\t\ttype=\"text\"\n\t\tclass=\"form-control\"\n\t\tplaceholder=\"Loading...\"\n\t>\n\t<div class=\"chevronDown\"></div>\n</div>\n",
                     styles: [".threeDots,:host{display:block}.threeDots{height:var(--base);position:relative;width:calc(var(--base)*4)}.threeDots.tiny{--base:4px}.threeDots.small{--base:8px}.threeDots.medium{--base:12px}.threeDots.large{--base:18px}.threeDots.huge{--base:26px}.threeDots div{-webkit-animation-timing-function:cubic-bezier(0,1,1,0);animation-timing-function:cubic-bezier(0,1,1,0);background:#27bb5f;border-radius:50%;height:var(--base);position:absolute;top:0;width:var(--base)}.threeDots div:first-child{-webkit-animation:lds-ellipsis1 .6s infinite;animation:lds-ellipsis1 .6s infinite}.threeDots div:nth-child(2),.threeDots div:nth-child(3){-webkit-animation:lds-ellipsis2 .6s infinite;animation:lds-ellipsis2 .6s infinite}.threeDots div:nth-child(3){left:calc(var(--base)*1.5)}.threeDots div:nth-child(4){-webkit-animation:lds-ellipsis3 .6s infinite;animation:lds-ellipsis3 .6s infinite;left:calc(var(--base)*3)}@-webkit-keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes lds-ellipsis1{0%{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}to{transform:scale(0)}}@-webkit-keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}@keyframes lds-ellipsis2{0%{transform:translate(0)}to{transform:translate(150%)}}.spinner.tiny svg{height:1rem;width:1rem}.spinner.small svg{height:1.6rem;width:1.6rem}.spinner.medium svg{height:2.5rem;width:2.5rem}.spinner.large svg{height:3rem;width:3rem}.spinner.huge svg{height:4rem;width:4rem}.spinner svg{-moz-animation-duration:1.2s;-moz-animation-iteration-count:infinite;-moz-animation-name:rotate;-moz-animation-timing-function:linear;-moz-transition-property:-moz-transform;-webkit-animation-duration:1.2s;-webkit-animation-iteration-count:infinite;-webkit-animation-name:rotate;-webkit-animation-timing-function:linear;-webkit-transition-duration:1.2s;-webkit-transition-property:-webkit-transform;animation-duration:1.2s;animation-iteration-count:infinite;animation-name:rotate;animation-timing-function:linear;transition-property:transform}@-webkit-keyframes rotate{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(1turn)}}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.picker{position:relative}.picker .chevronDown{border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #888da8;height:0;position:absolute;right:23px;top:18px;width:0}"]
                 },] }
     ];