@klippa/ngx-enhancy-forms 3.0.0 → 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/bundles/klippa-ngx-enhancy-forms.umd.js +398 -391
  2. package/bundles/klippa-ngx-enhancy-forms.umd.js.map +1 -1
  3. package/bundles/klippa-ngx-enhancy-forms.umd.min.js +3 -2
  4. package/bundles/klippa-ngx-enhancy-forms.umd.min.js.map +1 -1
  5. package/esm2015/lib/form/form.component.js +30 -19
  6. package/fesm2015/klippa-ngx-enhancy-forms.js +31 -20
  7. package/fesm2015/klippa-ngx-enhancy-forms.js.map +1 -1
  8. package/klippa-ngx-enhancy-forms.metadata.json +1 -1
  9. package/lib/form/form.component.d.ts +6 -7
  10. package/package.json +1 -1
package/bundles/klippa-ngx-enhancy-forms.umd.min.js CHANGED
@@ -1,4 +1,4 @@
1
- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("lodash"),require("ngx-sortablejs"),require("@ng-select/ng-select"),require("@angular/material/core"),require("@angular/material/datepicker"),require("@angular/material/form-field"),require("@angular/material/input"),require("@angular/material/button")):"function"==typeof define&&define.amd?define("@klippa/ngx-enhancy-forms",["exports","@angular/core","@angular/common","@angular/forms","lodash","ngx-sortablejs","@ng-select/ng-select","@angular/material/core","@angular/material/datepicker","@angular/material/form-field","@angular/material/input","@angular/material/button"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).klippa=e.klippa||{},e.klippa["ngx-enhancy-forms"]={}),e.ng.core,e.ng.common,e.ng.forms,e.lodash,e.ngxSortablejs,e.ngSelect,e.ng.material.core,e.ng.material.datepicker,e.ng.material.formField,e.ng.material.input,e.ng.material.button)}(this,(function(e,t,n,o,r,i,a,l,s,d,p,c){"use strict";
1
+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("lodash"),require("ngx-sortablejs"),require("@ng-select/ng-select"),require("@angular/material/core"),require("@angular/material/datepicker"),require("@angular/material/form-field"),require("@angular/material/input"),require("@angular/material/button")):"function"==typeof define&&define.amd?define("@klippa/ngx-enhancy-forms",["exports","@angular/core","@angular/common","@angular/forms","lodash","ngx-sortablejs","@ng-select/ng-select","@angular/material/core","@angular/material/datepicker","@angular/material/form-field","@angular/material/input","@angular/material/button"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).klippa=e.klippa||{},e.klippa["ngx-enhancy-forms"]={}),e.ng.core,e.ng.common,e.ng.forms,e.lodash,e.ngxSortablejs,e.ngSelect,e.ng.material.core,e.ng.material.datepicker,e.ng.material.formField,e.ng.material.input,e.ng.material.button)}(this,(function(e,t,n,o,r,i,a,l,s,p,d,c){"use strict";function u(e){return r.isString(e)&&e.length>0}function g(e){return null==e}function f(e){return null!=e}var h=Symbol("Not all fields are valid"),m=function(){};m.decorators=[{type:t.Directive,args:[{selector:"klp-sub-form"}]}],m.propDecorators={injectInto:[{type:t.Input}],at:[{type:t.Input}]};var b=function(){function e(e,t){this.parent=e,this.subFormPlaceholder=t,this.activeControls=[]}return e.prototype.ngOnInit=function(){if(f(this.parent)&&f(this.subFormPlaceholder)){var e=this.subFormPlaceholder.injectInto,t=this.subFormPlaceholder.at;if(e instanceof o.FormArray){if("number"!=typeof t)throw new Error("cannot index FormArray with "+typeof t);e.setControl(t,this.formGroup)}else if(e instanceof o.FormGroup){if("string"!=typeof t)throw new Error("cannot index FormGroup with "+typeof t);e.setControl(t,this.formGroup)}}},e.prototype.ngOnDestroy=function(){var e=this;if(f(this.parent)&&f(this.subFormPlaceholder)){var t=this.subFormPlaceholder.injectInto,n=this.subFormPlaceholder.at;if(t instanceof o.FormArray){var r=t.controls.findIndex((function(t){return t===e.formGroup}));t.removeAt(r)}else if(t instanceof o.FormGroup){if("string"!=typeof n)throw new Error("cannot index FormGroup with "+typeof n);t.removeControl(n)}}},e.prototype.registerControl=function(e,t){this.activeControls.push({formControl:e,formElement:t}),this.parent&&this.parent.registerControl(e,t)},e.prototype.unregisterControl=function(e){this.activeControls=this.activeControls.filter((function(t){return t.formControl!==e})),this.parent&&this.parent.unregisterControl(e)},e.prototype.addFormGroupControls=function(e,t){var n=this;Object.values(e.controls).forEach((function(e){e instanceof o.FormGroup?n.addFormGroupControls(e,t):e instanceof o.FormArray?n.addFormArrayControls(e,t):e instanceof o.FormControl&&n.addFormControl(e,t)}))},e.prototype.addFormArrayControls=function(e,t){var n=this;e.controls.forEach((function(e){e instanceof o.FormGroup?n.addFormGroupControls(e,t):e instanceof o.FormArray?n.addFormArrayControls(e,t):e instanceof o.FormControl&&n.addFormControl(e,t)}))},e.prototype.getAllFormControls=function(){var e=[];return this.addFormGroupControls(this.formGroup,e),e},e.prototype.addFormControl=function(e,t){t.push(e)},e.prototype.disableInactiveFormControl=function(e){this.activeControls.some((function(t){return t.formControl===e}))||e.disable()},e.prototype.trySubmit=function(){var e,t,n=this;this.formGroup.markAllAsTouched();var o=this.getAllFormControls(),r=o.map((function(e){return{control:e,disabled:e.disabled}}));o.forEach((function(e){return n.disableInactiveFormControl(e)}));var i=this.formGroup.value;return this.formGroup.valid?(this.setDisabledStatesForAllControls(r),Promise.resolve(i)):(null===(t=null===(e=this.activeControls.find((function(e){return!e.formControl.valid})))||void 0===e?void 0:e.formElement)||void 0===t||t.scrollTo(),this.setDisabledStatesForAllControls(r),Promise.reject(h))},e.prototype.setDisabledStatesForAllControls=function(e){e.forEach((function(e){e.disabled?e.control.disable():e.control.enable()}))},e}();b.decorators=[{type:t.Component,args:[{selector:"klp-form",template:"<form>\n\t<ng-content></ng-content>\n</form>\n\n\n",styles:[":host{display:block}:host.row{display:flex}"]}]}],b.ctorParameters=function(){return[{type:b,decorators:[{type:t.SkipSelf},{type:t.Optional}]},{type:m,decorators:[{type:t.Optional}]}]},b.propDecorators={formGroup:[{type:t.Input}]};var v=new t.InjectionToken("form.error.messages"),y={min:"Use a number larger than %min%",max:"Use a number smaller than %max%",required:"This field is required",email:"Use a valid email address",minLength:"Has to be longer than %minLength% character(s)",maxLength:"Has to be shorter than %maxLength% character(s)",pattern:"This input is not valid",matchPassword:"Passwords must match",date:"Enter a valid date"},x=function(){function e(e,t){this.parent=e,this.customMessages=t,this.direction="horizontal",this.captionSpacing="percentages",this.swapInputAndCaption=!1,this.errorMessages=y,this.customErrorHandlers=[]}return e.prototype.substituteParameters=function(e,t){return Object.keys(t).reduce((function(e,n){return e.replace("%"+n+"%",t[n])}),e)},e.prototype.registerControl=function(e){this.attachedControl=e,this.parent.registerControl(e,this)},e.prototype.unregisterControl=function(e){this.attachedControl=null,this.parent.unregisterControl(e)},e.prototype.getAttachedControl=function(){return this.attachedControl},e.prototype.registerErrorHandler=function(e,t){this.customErrorHandlers.push({error:e,templateRef:t})},e.prototype.registerCaption=function(e){this.captionRef=e},e.prototype.getErrorToShow=function(){var e,t,n;return!0===(null===(e=this.attachedControl)||void 0===e?void 0:e.touched)&&(null===(t=this.attachedControl)||void 0===t?void 0:t.errors)?Object.keys(null===(n=this.attachedControl)||void 0===n?void 0:n.errors)[0]:null},e.prototype.getCustomErrorHandler=function(e){return this.customErrorHandlers.find((function(t){return t.error===e}))},e.prototype.showDefaultError=function(e){return this.getErrorToShow()===e&&!this.customErrorHandlers.some((function(t){return t.error===e}))},e.prototype.getScrollableParent=function(e){return null==e?null:e.scrollHeight>e.clientHeight?e:this.getScrollableParent(e.parentNode)},e.prototype.scrollTo=function(){var e;this.internalComponentRef.nativeElement.scrollIntoView(!0),null===(e=this.getScrollableParent(this.internalComponentRef.nativeElement))||void 0===e||e.scrollBy(0,-100)},e.prototype.getErrorMessages=function(e){var t,n,o;return null!==(o=null===(n=null===(t=this.customMessages)||void 0===t?void 0:t[e])||void 0===n?void 0:n.call(t))&&void 0!==o?o:this.errorMessages[e]},e}();x.decorators=[{type:t.Component,args:[{selector:"klp-form-element",template:'<ng-template #errorRef>\n\t<div *ngIf="getErrorToShow()" class="errorContainer">\n\t\t<div *ngIf="showDefaultError(\'min\')">{{substituteParameters(getErrorMessages("min"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf="showDefaultError(\'max\')">{{substituteParameters(getErrorMessages("max"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf="showDefaultError(\'required\')">{{getErrorMessages("required")}}</div>\n\t\t<div *ngIf="showDefaultError(\'email\')">{{getErrorMessages("email")}}</div>\n\t\t<div *ngIf="showDefaultError(\'minlength\')">{{substituteParameters(getErrorMessages("minLength"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf="showDefaultError(\'maxlength\')">{{substituteParameters(getErrorMessages("maxLength"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf="showDefaultError(\'pattern\')">{{getErrorMessages("pattern")}}</div>\n\t\t<div *ngIf="showDefaultError(\'MatchPassword\')">{{getErrorMessages("matchPassword")}}</div>\n\t\t<div *ngIf="showDefaultError(\'date\')">{{getErrorMessages("date")}}</div>\n\t\t<div *ngIf="showDefaultError(\'message\')">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]="getCustomErrorHandler(getErrorToShow())?.templateRef"></div>\n\t</div>\n</ng-template>\n<ng-container *ngIf="direction === \'horizontal\'" [ngTemplateOutlet]="errorRef"></ng-container>\n<div *ngIf="attachedControl" class="componentContainer" [ngClass]="{vertical: direction === \'vertical\', reverseOrder: swapInputAndCaption}" #internalComponentRef>\n\t<div class="caption" [ngClass]="{ hasErrors: getErrorToShow() && attachedControl.touched, percentageSpacing: captionSpacing === \'percentages\' }">\n\t\t<div *ngIf="captionRef" [ngTemplateOutlet]="captionRef"></div>\n\t\t<div *ngIf="!captionRef">{{caption}}</div>\n\t</div>\n\t<ng-container *ngIf="direction === \'vertical\'" [ngTemplateOutlet]="errorRef"></ng-container>\n\t<div class="inputContainer" [ngClass]="{ percentageSpacing: captionSpacing === \'percentages\' }">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n',styles:[":host{display:block;margin-top:1.25rem}.componentContainer{align-items:center;display:flex}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block;margin-bottom:1rem}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.caption{color:#515365;flex:0 0 auto;font-weight:700}.caption.percentageSpacing{flex:0 0 40%}.caption.hasErrors{color:#ff8000}.inputContainer{flex:0 0 auto}.inputContainer.percentageSpacing{flex:0 0 60%}.errorContainer{color:#ff8000;margin-left:40%}"]}]}],x.ctorParameters=function(){return[{type:b,decorators:[{type:t.Host},{type:t.Optional}]},{type:void 0,decorators:[{type:t.Inject,args:[v]},{type:t.Optional}]}]},x.propDecorators={caption:[{type:t.Input}],direction:[{type:t.Input}],captionSpacing:[{type:t.Input}],swapInputAndCaption:[{type:t.Input}],internalComponentRef:[{type:t.ViewChild,args:["internalComponentRef"]}]};var w=function(){function e(e,t){this.parent=e,this.controlContainer=t,this.changed=new Array,this.touched=new Array,this.disabled=!1,this.formControlName=null,this.formControl=null}return e.prototype.ngOnInit=function(){var e,t,n,o=this;if(this.formControl)this.attachedFormControl=this.formControl;else if(u(this.formControlName)&&(this.attachedFormControl=null===(e=this.controlContainer)||void 0===e?void 0:e.control.get(this.formControlName),g(this.attachedFormControl)))throw new Error("Form element '"+this.formControlName+"' with caption '"+(null===(t=this.parent)||void 0===t?void 0:t.caption)+"' is not declared in your FormGroup.");this.attachedFormControl&&(this.disabled=this.attachedFormControl.disabled,this.attachedFormControl.statusChanges.subscribe((function(){o.disabled=o.attachedFormControl.disabled})),null===(n=this.parent)||void 0===n||n.registerControl(this.attachedFormControl))},e.prototype.isInErrorState=function(){return this.attachedFormControl&&"INVALID"===this.attachedFormControl.status&&this.attachedFormControl.touched},e.prototype.ngOnDestroy=function(){var e;this.attachedFormControl&&(null===(e=this.parent)||void 0===e||e.unregisterControl(this.attachedFormControl))},e.prototype.touch=function(){this.touched.forEach((function(e){return e()}))},e.prototype.writeValue=function(e){this.innerValue=e},e.prototype.registerOnChange=function(e){this.changed.push(e)},e.prototype.registerOnTouched=function(e){this.touched.push(e)},e.prototype.setInnerValueAndNotify=function(e){this.innerValue=e,this.changed.forEach((function(t){return t(e)}))},e.prototype.resetToNull=function(){this.setInnerValueAndNotify(null)},e}();w.decorators=[{type:t.Component,args:[{selector:"",template:""}]}],w.ctorParameters=function(){return[{type:x,decorators:[{type:t.Host},{type:t.Optional}]},{type:o.ControlContainer,decorators:[{type:t.Host},{type:t.Optional}]}]},w.propDecorators={disabled:[{type:t.Input}],formControlName:[{type:t.Input}],formControl:[{type:t.Input}]};var C=function(){function e(){this.variant="white",this.size="medium",this.fullWidth=!1,this.hasBorder=!0,this.disabled=!1,this.isLoading=!1,this.type="button"}return Object.defineProperty(e.prototype,"_",{get:function(){return this.fullWidth},enumerable:!1,configurable:!0}),e.prototype.onClick=function(e){this.disabled&&e.stopPropagation()},e}();C.decorators=[{type:t.Component,args:[{selector:"klp-form-button",template:'<button class="buttonFundamentals"\n\t[ngClass]="[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? \'fullWidth\' : \'\',\n\t\thasBorder ? \'\' : \'no-border\',\n\t\tdisabled ? \'disabled\' : \'\'\n\t]"\n\t[type]="type"\n\t(click)="onClick($event)"\n>\n\t<div class="caption" [ngClass]="{invisible: isLoading}">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class="loadingSpinnerContainer" *ngIf="isLoading">\n\t\t<klp-form-loading-indicator variant="spinner" size="small"></klp-form-loading-indicator>\n\t</div>\n</button>\n',styles:[":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{border:1px solid #e6ecf5;border-radius:5px;color:#888da8;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:1px;padding:10px 20px}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.small{padding-bottom:.375rem;padding-top:.375rem}.large{line-height:2}.white{background-color:#fff;border-color:#d4deee;color:#515365;font-weight:500}.white:active,.white:hover{background-color:#edf2f8;border-color:#edf2f8;color:#515365}.white:focus{text-decoration:underline}.greenFilled{background-color:#27bb5f;border-color:#27bb5f;color:#fff}.greenFilled:hover{background-color:#2bd06a;border-color:#2bd06a;color:#fff}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#23a654;border-color:#23a654}.greenOutlined{background-color:#fff;border-color:#27bb5f;color:#27bb5f}.greenOutlined:hover{background-color:#2bd06a;border-color:#2bd06a;color:#fff}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#23a654;border-color:#23a654}.greenLink{background:none;border:none;color:#27bb5f;padding:0}.greenLink:focus,.greenLink:hover{text-decoration:underline}.contextMenuItem{background-color:#fff;border-color:#fff;color:#888da8}.contextMenuItem:hover{background-color:#f6f7fb;border-color:#f6f7fb}.contextMenuItem:active,.contextMenuItem:focus{text-decoration:underline}.redFilled{background-color:#ff3c7e;border-color:#ff3c7e;color:#fff}.redFilled:hover{background-color:#ff568f;border-color:#ff568f;color:#fff}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#ff236d;border-color:#ff236d}.redOutlined{background-color:#fff;border-color:#ff3c7e;color:#ff3c7e}.redOutlined:hover{background-color:#ff568f;border-color:#ff568f;color:#fff}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#ff236d;border-color:#ff236d}.orangeFilled{background-color:#ff8000;border-color:#ff8000;color:#fff}.orangeFilled:hover{background-color:#ff8d1a;border-color:#ff8d1a;color:#fff}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}"]}]}],C.propDecorators={variant:[{type:t.Input}],size:[{type:t.Input}],fullWidth:[{type:t.Input}],hasBorder:[{type:t.Input}],disabled:[{type:t.Input}],isLoading:[{type:t.Input}],type:[{type:t.Input}],_:[{type:t.HostBinding,args:["class._fullWidth"]}]};
2
2
  /*! *****************************************************************************
3
3
  Copyright (c) Microsoft Corporation.
4
4
 
@@ -12,5 +12,6 @@
12
12
  LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
13
13
  OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
14
14
  PERFORMANCE OF THIS SOFTWARE.
15
- ***************************************************************************** */var u=function(e,t){return u=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},u(e,t)};function g(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}u(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}Object.create;function f(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(o=i.next()).done;)a.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return a}function h(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(f(arguments[t]));return e}Object.create;function m(e){return r.isString(e)&&e.length>0}function b(e){return null==e}function v(e){return null!=e}var y=Symbol("Not all fields are valid"),x=function(){};x.decorators=[{type:t.Directive,args:[{selector:"klp-sub-form"}]}],x.propDecorators={injectInto:[{type:t.Input}]};var w=function(e){function t(){return e.call(this,{},null)||this}return g(t,e),t}(o.FormGroup),C=function(){function e(e,t){this.parent=e,this.subFormPlaceholder=t,this.activeControls=[]}return e.prototype.ngOnInit=function(){var e=this;if(v(this.parent)&&v(this.subFormPlaceholder)){var t=this.subFormPlaceholder.injectInto.parent;if(t instanceof o.FormArray){var n=t.controls.findIndex((function(t){return t===e.subFormPlaceholder.injectInto}));t.setControl(n,this.formGroup)}else if(t instanceof o.FormGroup){var r=Object.entries(t.controls).find((function(t){var n=f(t,2);n[0];return n[1]===e.subFormPlaceholder.injectInto}));if(!((null==r?void 0:r[1])instanceof w))throw new Error("You are trying to inject a subForm ('"+(null==r?void 0:r[0])+"') within something that is not annotated as such.");t.setControl(r[0],this.formGroup)}}},e.prototype.registerControl=function(e,t){this.activeControls.push({formControl:e,formElement:t}),this.parent&&this.parent.registerControl(e,t)},e.prototype.unregisterControl=function(e){this.activeControls=this.activeControls.filter((function(t){return t.formControl!==e})),this.parent&&this.parent.unregisterControl(e)},e.prototype.addFormGroupControls=function(e,t){var n=this;Object.values(e.controls).forEach((function(e){e instanceof o.FormGroup?n.addFormGroupControls(e,t):e instanceof o.FormArray?n.addFormArrayControls(e,t):e instanceof o.FormControl&&n.addFormControl(e,t)}))},e.prototype.addFormArrayControls=function(e,t){var n=this;e.controls.forEach((function(e){e instanceof o.FormGroup?n.addFormGroupControls(e,t):e instanceof o.FormArray?n.addFormArrayControls(e,t):e instanceof o.FormControl&&n.addFormControl(e,t)}))},e.prototype.getAllFormControls=function(){var e=[];return this.addFormGroupControls(this.formGroup,e),e},e.prototype.addFormControl=function(e,t){t.push(e)},e.prototype.disableInactiveFormControl=function(e){this.activeControls.some((function(t){return t.formControl===e}))||e.disable()},e.prototype.trySubmit=function(){var e,t,n=this;this.formGroup.markAllAsTouched();var o=this.getAllFormControls(),r=o.map((function(e){return{control:e,disabled:e.disabled}}));o.forEach((function(e){return n.disableInactiveFormControl(e)}));var i=this.formGroup.value;return this.formGroup.valid?(this.setDisabledStatesForAllControls(r),Promise.resolve(i)):(null===(t=null===(e=this.activeControls.find((function(e){return!e.formControl.valid})))||void 0===e?void 0:e.formElement)||void 0===t||t.scrollTo(),this.setDisabledStatesForAllControls(r),Promise.reject(y))},e.prototype.setDisabledStatesForAllControls=function(e){e.forEach((function(e){e.disabled?e.control.disable():e.control.enable()}))},e}();C.decorators=[{type:t.Component,args:[{selector:"klp-form",template:"<form>\n\t<ng-content></ng-content>\n</form>\n\n\n",styles:[":host{display:block}:host.row{display:flex}"]}]}],C.ctorParameters=function(){return[{type:C,decorators:[{type:t.SkipSelf},{type:t.Optional}]},{type:x,decorators:[{type:t.Optional}]}]},C.propDecorators={formGroup:[{type:t.Input}]};var k=new t.InjectionToken("form.error.messages"),I={min:"Use a number larger than %min%",max:"Use a number smaller than %max%",required:"This field is required",email:"Use a valid email address",minLength:"Has to be longer than %minLength% character(s)",maxLength:"Has to be shorter than %maxLength% character(s)",pattern:"This input is not valid",matchPassword:"Passwords must match",date:"Enter a valid date"},E=function(){function e(e,t){this.parent=e,this.customMessages=t,this.direction="horizontal",this.captionSpacing="percentages",this.swapInputAndCaption=!1,this.errorMessages=I,this.customErrorHandlers=[]}return e.prototype.substituteParameters=function(e,t){return Object.keys(t).reduce((function(e,n){return e.replace("%"+n+"%",t[n])}),e)},e.prototype.registerControl=function(e){this.attachedControl=e,this.parent.registerControl(e,this)},e.prototype.unregisterControl=function(e){this.attachedControl=null,this.parent.unregisterControl(e)},e.prototype.getAttachedControl=function(){return this.attachedControl},e.prototype.registerErrorHandler=function(e,t){this.customErrorHandlers.push({error:e,templateRef:t})},e.prototype.registerCaption=function(e){this.captionRef=e},e.prototype.getErrorToShow=function(){var e,t,n;return!0===(null===(e=this.attachedControl)||void 0===e?void 0:e.touched)&&(null===(t=this.attachedControl)||void 0===t?void 0:t.errors)?Object.keys(null===(n=this.attachedControl)||void 0===n?void 0:n.errors)[0]:null},e.prototype.getCustomErrorHandler=function(e){return this.customErrorHandlers.find((function(t){return t.error===e}))},e.prototype.showDefaultError=function(e){return this.getErrorToShow()===e&&!this.customErrorHandlers.some((function(t){return t.error===e}))},e.prototype.getScrollableParent=function(e){return null==e?null:e.scrollHeight>e.clientHeight?e:this.getScrollableParent(e.parentNode)},e.prototype.scrollTo=function(){var e;this.internalComponentRef.nativeElement.scrollIntoView(!0),null===(e=this.getScrollableParent(this.internalComponentRef.nativeElement))||void 0===e||e.scrollBy(0,-100)},e.prototype.getErrorMessages=function(e){var t,n,o;return null!==(o=null===(n=null===(t=this.customMessages)||void 0===t?void 0:t[e])||void 0===n?void 0:n.call(t))&&void 0!==o?o:this.errorMessages[e]},e}();E.decorators=[{type:t.Component,args:[{selector:"klp-form-element",template:'<ng-template #errorRef>\n\t<div *ngIf="getErrorToShow()" class="errorContainer">\n\t\t<div *ngIf="showDefaultError(\'min\')">{{substituteParameters(getErrorMessages("min"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf="showDefaultError(\'max\')">{{substituteParameters(getErrorMessages("max"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf="showDefaultError(\'required\')">{{getErrorMessages("required")}}</div>\n\t\t<div *ngIf="showDefaultError(\'email\')">{{getErrorMessages("email")}}</div>\n\t\t<div *ngIf="showDefaultError(\'minlength\')">{{substituteParameters(getErrorMessages("minLength"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf="showDefaultError(\'maxlength\')">{{substituteParameters(getErrorMessages("maxLength"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf="showDefaultError(\'pattern\')">{{getErrorMessages("pattern")}}</div>\n\t\t<div *ngIf="showDefaultError(\'MatchPassword\')">{{getErrorMessages("matchPassword")}}</div>\n\t\t<div *ngIf="showDefaultError(\'date\')">{{getErrorMessages("date")}}</div>\n\t\t<div *ngIf="showDefaultError(\'message\')">{{attachedControl.errors.message.value}}</div>\n\t\t<div [ngTemplateOutlet]="getCustomErrorHandler(getErrorToShow())?.templateRef"></div>\n\t</div>\n</ng-template>\n<ng-container *ngIf="direction === \'horizontal\'" [ngTemplateOutlet]="errorRef"></ng-container>\n<div *ngIf="attachedControl" class="componentContainer" [ngClass]="{vertical: direction === \'vertical\', reverseOrder: swapInputAndCaption}" #internalComponentRef>\n\t<div class="caption" [ngClass]="{ hasErrors: getErrorToShow() && attachedControl.touched, percentageSpacing: captionSpacing === \'percentages\' }">\n\t\t<div *ngIf="captionRef" [ngTemplateOutlet]="captionRef"></div>\n\t\t<div *ngIf="!captionRef">{{caption}}</div>\n\t</div>\n\t<ng-container *ngIf="direction === \'vertical\'" [ngTemplateOutlet]="errorRef"></ng-container>\n\t<div class="inputContainer" [ngClass]="{ percentageSpacing: captionSpacing === \'percentages\' }">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n',styles:[":host{display:block;margin-top:1.25rem}.componentContainer{align-items:center;display:flex}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block;margin-bottom:1rem}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.caption{color:#515365;flex:0 0 auto;font-weight:700}.caption.percentageSpacing{flex:0 0 40%}.caption.hasErrors{color:#ff8000}.inputContainer{flex:0 0 auto}.inputContainer.percentageSpacing{flex:0 0 60%}.errorContainer{color:#ff8000;margin-left:40%}"]}]}],E.ctorParameters=function(){return[{type:C,decorators:[{type:t.Host},{type:t.Optional}]},{type:void 0,decorators:[{type:t.Inject,args:[k]},{type:t.Optional}]}]},E.propDecorators={caption:[{type:t.Input}],direction:[{type:t.Input}],captionSpacing:[{type:t.Input}],swapInputAndCaption:[{type:t.Input}],internalComponentRef:[{type:t.ViewChild,args:["internalComponentRef"]}]};var D=function(){function e(e,t){this.parent=e,this.controlContainer=t,this.changed=new Array,this.touched=new Array,this.disabled=!1,this.formControlName=null,this.formControl=null}return e.prototype.ngOnInit=function(){var e,t,n,o=this;if(this.formControl)this.attachedFormControl=this.formControl;else if(m(this.formControlName)&&(this.attachedFormControl=null===(e=this.controlContainer)||void 0===e?void 0:e.control.get(this.formControlName),b(this.attachedFormControl)))throw new Error("Form element '"+this.formControlName+"' with caption '"+(null===(t=this.parent)||void 0===t?void 0:t.caption)+"' is not declared in your FormGroup.");this.attachedFormControl&&(this.disabled=this.attachedFormControl.disabled,this.attachedFormControl.statusChanges.subscribe((function(){o.disabled=o.attachedFormControl.disabled})),null===(n=this.parent)||void 0===n||n.registerControl(this.attachedFormControl))},e.prototype.isInErrorState=function(){return this.attachedFormControl&&"INVALID"===this.attachedFormControl.status&&this.attachedFormControl.touched},e.prototype.ngOnDestroy=function(){var e;this.attachedFormControl&&(null===(e=this.parent)||void 0===e||e.unregisterControl(this.attachedFormControl))},e.prototype.touch=function(){this.touched.forEach((function(e){return e()}))},e.prototype.writeValue=function(e){this.innerValue=e},e.prototype.registerOnChange=function(e){this.changed.push(e)},e.prototype.registerOnTouched=function(e){this.touched.push(e)},e.prototype.setInnerValueAndNotify=function(e){this.innerValue=e,this.changed.forEach((function(t){return t(e)}))},e.prototype.resetToNull=function(){this.setInnerValueAndNotify(null)},e}();D.decorators=[{type:t.Component,args:[{selector:"",template:""}]}],D.ctorParameters=function(){return[{type:E,decorators:[{type:t.Host},{type:t.Optional}]},{type:o.ControlContainer,decorators:[{type:t.Host},{type:t.Optional}]}]},D.propDecorators={disabled:[{type:t.Input}],formControlName:[{type:t.Input}],formControl:[{type:t.Input}]};var F=function(){function e(){this.variant="white",this.size="medium",this.fullWidth=!1,this.hasBorder=!0,this.disabled=!1,this.isLoading=!1,this.type="button"}return Object.defineProperty(e.prototype,"_",{get:function(){return this.fullWidth},enumerable:!1,configurable:!0}),e.prototype.onClick=function(e){this.disabled&&e.stopPropagation()},e}();F.decorators=[{type:t.Component,args:[{selector:"klp-form-button",template:'<button class="buttonFundamentals"\n\t[ngClass]="[\n\t\tvariant,\n\t\tsize,\n\t\tfullWidth ? \'fullWidth\' : \'\',\n\t\thasBorder ? \'\' : \'no-border\',\n\t\tdisabled ? \'disabled\' : \'\'\n\t]"\n\t[type]="type"\n\t(click)="onClick($event)"\n>\n\t<div class="caption" [ngClass]="{invisible: isLoading}">\n\t\t<ng-content></ng-content>\n\t</div>\n\t<div class="loadingSpinnerContainer" *ngIf="isLoading">\n\t\t<klp-form-loading-indicator variant="spinner" size="small"></klp-form-loading-indicator>\n\t</div>\n</button>\n',styles:[":host{display:inline-block}:host._fullWidth{display:block}.buttonFundamentals{border:1px solid #e6ecf5;border-radius:5px;color:#888da8;cursor:pointer;font-size:13px;font-weight:700;letter-spacing:1px;padding:10px 20px}.fullWidth{width:100%}.no-border{border:none}.caption.invisible{visibility:hidden}button{position:relative}.loadingSpinnerContainer{align-items:center;bottom:0;display:flex;justify-content:center;left:0;position:absolute;right:0;top:0}.small{padding-bottom:.375rem;padding-top:.375rem}.large{line-height:2}.white{background-color:#fff;border-color:#d4deee;color:#515365;font-weight:500}.white:active,.white:hover{background-color:#edf2f8;border-color:#edf2f8;color:#515365}.white:focus{text-decoration:underline}.greenFilled{background-color:#27bb5f;border-color:#27bb5f;color:#fff}.greenFilled:hover{background-color:#2bd06a;border-color:#2bd06a;color:#fff}.greenFilled:focus{text-decoration:underline}.greenFilled:active{background-color:#23a654;border-color:#23a654}.greenOutlined{background-color:#fff;border-color:#27bb5f;color:#27bb5f}.greenOutlined:hover{background-color:#2bd06a;border-color:#2bd06a;color:#fff}.greenOutlined:focus{text-decoration:underline}.greenOutlined:active{background-color:#23a654;border-color:#23a654}.greenLink{background:none;border:none;color:#27bb5f;padding:0}.greenLink:focus,.greenLink:hover{text-decoration:underline}.contextMenuItem{background-color:#fff;border-color:#fff;color:#888da8}.contextMenuItem:hover{background-color:#f6f7fb;border-color:#f6f7fb}.contextMenuItem:active,.contextMenuItem:focus{text-decoration:underline}.redFilled{background-color:#ff3c7e;border-color:#ff3c7e;color:#fff}.redFilled:hover{background-color:#ff568f;border-color:#ff568f;color:#fff}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#ff236d;border-color:#ff236d}.redOutlined{background-color:#fff;border-color:#ff3c7e;color:#ff3c7e}.redOutlined:hover{background-color:#ff568f;border-color:#ff568f;color:#fff}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#ff236d;border-color:#ff236d}.orangeFilled{background-color:#ff8000;border-color:#ff8000;color:#fff}.orangeFilled:hover{background-color:#ff8d1a;border-color:#ff8d1a;color:#fff}.orangeFilled:focus{text-decoration:underline}.orangeFilled:active{background-color:#e67300;border-color:#e67300}"]}]}],F.propDecorators={variant:[{type:t.Input}],size:[{type:t.Input}],fullWidth:[{type:t.Input}],hasBorder:[{type:t.Input}],disabled:[{type:t.Input}],isLoading:[{type:t.Input}],type:[{type:t.Input}],_:[{type:t.HostBinding,args:["class._fullWidth"]}]};var S=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return g(t,e),t}(D);S.decorators=[{type:t.Component,args:[{selector:"klp-form-checkbox",template:'<label class="componentContainer">\n\t<div class="checkboxContainer">\n\t\t<input type="checkbox" class="checkboxNative"\n\t\t\t[(ngModel)]="innerValue"\n\t\t\t(change)="setInnerValueAndNotify(innerValue); touch()"\n\t\t\t[disabled]="disabled"\n\t\t/>\n <div class="checkboxVisual">\n <svg *ngIf="innerValue" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg">\n <path d="m0.17014 2.7065 1.3073 1.1798 2.5656-3.7404" stroke="currentColor" fill="none" stroke-width=".4646px" />\n </svg>\n </div>\n\t</div>\n\t<div *ngIf="caption" class="caption">{{ caption }}</div>\n</label>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:S,multi:!0}],styles:[":host{display:block}.componentContainer{display:flex;margin-bottom:0}.checkboxContainer{position:relative}.caption{color:#888da8;cursor:pointer;font-weight:700}.checkboxNative{left:0;opacity:0;position:absolute;top:0}.checkboxNative,.checkboxVisual{cursor:pointer;height:22px;width:22px}.checkboxVisual{background-color:#fff;border:2px solid #e6ecf5;border-radius:3px;color:#27bb5f;display:inline-block;font-size:15px;font-weight:400;line-height:19px;margin-right:10px;padding:.125rem;pointer-events:none;text-align:center;vertical-align:bottom}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual:before{color:#666}"]}]}],S.propDecorators={caption:[{type:t.Input}],disabled:[{type:t.Input}]};var O=function(e){function t(){var t=e.apply(this,h(arguments))||this;return t.placeholder="",t}return g(t,e),t}(D);O.decorators=[{type:t.Component,args:[{selector:"klp-form-email-input",template:'<input\n\ttype="email"\n\tclass="form-control"\n\t[(ngModel)]="innerValue"\n\t(input)="setInnerValueAndNotify($event.target.value)"\n\t[placeholder]="placeholder"\n\t(blur)="touch()"\n/>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:O,multi:!0}],styles:[":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]}]}],O.propDecorators={placeholder:[{type:t.Input}]};var M=function(){this.variant="3dots",this.size="medium"};M.decorators=[{type:t.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',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}"]}]}],M.propDecorators={variant:[{type:t.Input}],size:[{type:t.Input}]};var z=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return g(t,e),t}(D);z.decorators=[{type:t.Component,args:[{selector:"klp-form-number-input",template:'<input\n\ttype="number"\n\tclass="form-control"\n\t[(ngModel)]="innerValue"\n\t(input)="setInnerValueAndNotify($event.target.value)"\n\t[placeholder]="placeholder ? placeholder : \'\'"\n/>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:z,multi:!0}],styles:[":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]}]}],z.propDecorators={placeholder:[{type:t.Input}]};var V=function(e){function t(){var t=e.apply(this,h(arguments))||this;return t.placeholder="Password",t}return g(t,e),t}(D);V.decorators=[{type:t.Component,args:[{selector:"klp-form-password-field",template:'<input\n\ttype="password"\n\tclass="form-control"\n [ngClass]="{showErrors: isInErrorState()}"\n\t[(ngModel)]="innerValue"\n\t(input)="setInnerValueAndNotify($event.target.value)"\n\t[placeholder]="placeholder"\n\t(blur)="touch()"\n/>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:V,multi:!0}],styles:[":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]}]}],V.propDecorators={placeholder:[{type:t.Input}]};var A=function(e){function n(n,o){var r=e.call(this,n,o)||this;return r.parent=n,r.controlContainer=o,r.placeholder="Pick an option",r.multiple=!1,r.clearable=!0,r.onSearch=new t.EventEmitter,r}return g(n,e),n}(D);A.decorators=[{type:t.Component,args:[{selector:"klp-form-select",template:'<ng-select\n\t[placeholder]="placeholder"\n\tbindLabel="name"\n\tbindValue="id"\n\t[items]="options"\n\t[clearable]="clearable"\n\t[(ngModel)]="innerValue"\n\t[ngClass]="{showErrors: isInErrorState()}"\n\t(change)="setInnerValueAndNotify(innerValue)"\n\t[multiple]="multiple"\n\t[disabled]="disabled"\n\t(blur)="touch()"\n\t(search)="onSearch.emit($event.term)"\n\t[dropdownPosition]="dropdownPosition"\n\t[searchFn]="customSearchFn"\n>\n\t<ng-template let-item="item" ng-option-tmp>\n\t\t{{ item.name }}\n\t\t<div *ngIf="item.description" class="dropdown-item-description">\n\t\t\t{{ item.description }}\n\t\t</div>\n\t</ng-template>\n</ng-select>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:A,multi:!0}],styles:[":host{display:block}.showErrors ::ng-deep .ng-select-container,:host.showErrors ::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{color:#888da8}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#3ed778}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{border-color:transparent transparent #999;border-width:0 5px 5px;top:-2px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-left-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select .ng-select-container{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid #e6ecf5;border-radius:4px;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#888da8;display:flex;flex-direction:row;font-size:1rem;font-size:14px;line-height:1.5;margin:0;min-height:42px;outline:none;overflow:visible;padding:.375rem .75rem;transition-delay:0s;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;overflow:hidden;padding-left:10px}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-left:7px;padding-right:10px;padding-top:2px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:#e7faee;border:1px solid #93e8b3;border-radius:2px;display:flex;font-size:.9em;margin-bottom:5px;margin-right:5px;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;overflow:hidden;padding:0 5px;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:3px;padding-left:3px;position:static;top:5px}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#ff3c7e}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{padding-right:5px;width:25px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #3ed778;box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-color:#e6e6e6;margin-top:-1px;top:100%}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-bottom-color:#e6e6e6;border-top-left-radius:4px;border-top-right-radius:4px;bottom:100%;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:4px;border-top-right-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;color:rgba(0,0,0,.54);cursor:default;cursor:pointer;font-weight:500;padding:8px 10px;user-select:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:rgba(0,0,0,.87);padding:8px 10px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{color:#888da8;top:9px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option,:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#888da8}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}"]}]}],A.ctorParameters=function(){return[{type:E,decorators:[{type:t.Optional},{type:t.Host}]},{type:o.ControlContainer,decorators:[{type:t.Optional},{type:t.Host}]}]},A.propDecorators={placeholder:[{type:t.Input}],options:[{type:t.Input}],multiple:[{type:t.Input}],clearable:[{type:t.Input}],dropdownPosition:[{type:t.Input}],customSearchFn:[{type:t.Input}],onSearch:[{type:t.Output}]};var N=function(e){function t(){var t=e.apply(this,h(arguments))||this;return t.sortableItemSize="lg",t.itemsOrderChanged=function(){t.setInnerValueAndNotify(t.innerValue)},t}return g(t,e),t}(D);N.decorators=[{type:t.Component,args:[{selector:"klp-form-sortable-items",template:'<ng-template #listItem>\n\t<li *ngFor="let item of innerValue; index as index"\n\t class="sortableItem"\n\t [ngClass]="{\n\t\t\tlargeSortableItem: sortableItemSize === \'lg\',\n\t\t \tsmallSortableItem: sortableItemSize === \'sm\'\n\t\t }"\n\t>\n\t\t<ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index:index }" ></ng-container>\n\t</li>\n</ng-template>\n\n<ol *ngIf=\'!disabled\'\n [sortablejs]="innerValue"\n [sortablejsOptions]="{ onUpdate: itemsOrderChanged }"\n class="itemsContainer"\n>\n\t<ng-container *ngTemplateOutlet="listItem"></ng-container>\n</ol>\n\n<ol *ngIf=\'disabled\' class="itemsContainer disabled-mouse-cursor">\n\t<ng-container *ngTemplateOutlet="listItem"></ng-container>\n</ol>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:N,multi:!0}],styles:[":host{display:block}.itemsContainer{border:1px solid #e6ecf5;border-radius:5px;margin-bottom:0;padding:0}.sortableItem{border-top:1px solid #e6ecf5;cursor:-webkit-grab;cursor:grab;list-style:none}.sortableItem:hover{background:#f8f9fa}.sortableItem:first-child{border-top:none}.largeSortableItem{padding:15px}.smallSortableItem{padding:0 10px}.disabled-mouse-cursor li{cursor:no-drop}"]}]}],N.propDecorators={template:[{type:t.ContentChild,args:[t.TemplateRef]}],sortableItemSize:[{type:t.Input}]};var R=function(e){function t(){var t=e.apply(this,h(arguments))||this;return t.type="text",t}return g(t,e),t}(D);R.decorators=[{type:t.Component,args:[{selector:"klp-form-text-input",template:'<input\n\t[type]="type"\n\tclass="form-control"\n\t[ngClass]="{showErrors: isInErrorState()}"\n\t[(ngModel)]="innerValue"\n\t(input)="setInnerValueAndNotify($event.target.value)"\n\t[placeholder]="placeholder ? placeholder : \'\'"\n\t(blur)="touch()"\n\t[disabled]=\'disabled\'\n/>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:R,multi:!0}],styles:[":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]}]}],R.propDecorators={placeholder:[{type:t.Input}],type:[{type:t.Input}]};var _=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return g(t,e),t}(D);_.decorators=[{type:t.Component,args:[{selector:"klp-form-toggle",template:'<div class="componentContainer" [ngClass]="{disabled: disabled}">\n\t<input type="checkbox" class="nativeCheckbox"\n\t\t[(ngModel)]="innerValue"\n\t\t(input)="setInnerValueAndNotify($event.target.checked); touch()"\n\t\t[disabled]="disabled"\n\t\t[ngClass]="{showErrors: isInErrorState()}"\n\t/>\n\t<div class="toggleVisual"></div>\n</div>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:_,multi:!0}],styles:[':host{display:block}.componentContainer{position:relative}.nativeCheckbox{cursor:pointer;height:20px;left:0;opacity:0;position:absolute;top:0;width:35px}.toggleVisual{-moz-transition:.4s ease;-ms-transition:.4s ease;-o-transition:.4s ease;-webkit-transition:.4s ease;border:1px solid #e6ecf5;border-radius:35px;display:block;height:20px;pointer-events:none;position:relative;transition:.4s ease;width:35px}.toggleVisual:before{-moz-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);border-radius:30px;height:18px;left:-1px;margin:1px;transition:.2s cubic-bezier(.24,0,.5,1);width:33px}.toggleVisual:after,.toggleVisual:before{content:"";display:block;position:absolute;top:-1px}.toggleVisual:after{-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;border-radius:60px;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 0 rgba(0,0,0,.04),0 4px 9px rgba(0,0,0,.13),0 3px 3px rgba(0,0,0,.05);height:20px;left:0;transition:.35s cubic-bezier(.54,1.6,.5,1);width:20px}.nativeCheckbox:checked+.toggleVisual:before{-moz-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.showErrors+.toggleVisual:before{border:1px solid #ff8000}']}]}];var P=function(){function e(e){this.parent=e}return e.prototype.ngOnInit=function(){var e=this;setTimeout((function(){var t=e.parent.getAttachedControl();if(e.parent.registerCaption(e.contentRef),b(t))throw new Error("You added a Form Caption component without an attached Form Control")}))},e}();P.decorators=[{type:t.Component,args:[{selector:"klp-form-caption",template:"<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n",styles:[":host{display:block}"]}]}],P.ctorParameters=function(){return[{type:E,decorators:[{type:t.Host},{type:t.Optional}]}]},P.propDecorators={contentRef:[{type:t.ViewChild,args:["contentRef"]}]};var L=function(){function e(e){this.parent=e,this.showError=!1}return e.prototype.ngOnInit=function(){var e=this;setTimeout((function(){var t=e.parent.getAttachedControl();if(e.parent.registerErrorHandler(e.error,e.contentRef),b(t))throw new Error("You added a Form Error component without an attached Form Control")}))},e}();L.decorators=[{type:t.Component,args:[{selector:"klp-form-error",template:"<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n",styles:[":host{display:block}"]}]}],L.ctorParameters=function(){return[{type:E,decorators:[{type:t.Host},{type:t.Optional}]}]},L.propDecorators={error:[{type:t.Input}],contentRef:[{type:t.ViewChild,args:["contentRef"]}]};var T=function(){function e(e){this.parentForm=e,this.isLoading=!1,this.fullWidth=!1,this.variant="greenFilled"}return Object.defineProperty(e.prototype,"_",{get:function(){return this.fullWidth},enumerable:!1,configurable:!0}),e.prototype.submitForm=function(){var e=this;this.parentForm.trySubmit().then((function(t){e.isLoading=!0;var n=e.submitCallback(t);if(b(n))throw new Error("No promise is returned in your submit function.");return n.then((function(){return e.isLoading=!1})).catch((function(t){throw e.isLoading=!1,t}))})).catch((function(e){if(e!==y)throw e}))},e}();T.decorators=[{type:t.Component,args:[{selector:"klp-form-submit-button",template:'<klp-form-button\n\t\t[variant]="variant"\n\t\t(click)="submitForm()"\n\t\t[disabled]="isLoading"\n\t\t[isLoading]="isLoading"\n\t\t[fullWidth]="fullWidth"\n\t\ttype="submit"\n\t\t[ngClass]="fullWidth ? \'fullWidth\' : \'\'"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n',styles:[":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}"]}]}],T.ctorParameters=function(){return[{type:C,decorators:[{type:t.Host},{type:t.Optional}]}]},T.propDecorators={isLoading:[{type:t.Input}],fullWidth:[{type:t.Input}],variant:[{type:t.Input}],submitCallback:[{type:t.Input}],_:[{type:t.HostBinding,args:["class._fullWidth"]}]};var j="--invalid_date--";var G=new t.InjectionToken("klp.form.date.formats");function H(e,t){var n;return null!==(n=null==t?void 0:t(e.format))&&void 0!==n?n:l.MAT_NATIVE_DATE_FORMATS}var W=function(e){function t(){var t=e.apply(this,h(arguments))||this;return t.minDate=void 0,t.maxDate=void 0,t.placeholder="Select date",t.clearable=!1,t.minDateStartOfDay=void 0,t.maxDateEndOfDay=void 0,t}return g(t,e),t.prototype.ngOnChanges=function(e){e.minDate&&this.setMinDate(e.minDate.currentValue),e.maxDate&&this.setMaxDate(e.maxDate.currentValue)},t.prototype.setMinDate=function(e){e?(this.minDateStartOfDay=new Date(e),this.minDateStartOfDay.setHours(0,0,0,0)):this.minDateStartOfDay=void 0},t.prototype.setMaxDate=function(e){e?(this.maxDateEndOfDay=new Date(e),this.maxDateEndOfDay.setHours(23,59,59,999)):this.maxDateEndOfDay=void 0},t.prototype.dateChanged=function(e){var t=this.nativeInputRef.nativeElement.value,n=e.value;b(n)&&m(t)?this.setInnerValueAndNotify(j):this.setInnerValueAndNotify(n)},t.prototype.writeValue=function(t){e.prototype.writeValue.call(this,t),this.valueForMaterialDatePicker=t===j?null:t},t.prototype.nativeValueChanged=function(e){var t=e.target.value,n=this.valueForMaterialDatePicker;this.datePickerRef.opened&&this.datePickerRef.close(),b(n)&&m(t)?this.setInnerValueAndNotify(j):this.setInnerValueAndNotify(n)},t.prototype.resetToNull=function(){this.setInnerValueAndNotify(null),this.valueForMaterialDatePicker=null,this.nativeInputRef.nativeElement.value=null},t}(D);W.decorators=[{type:t.Component,args:[{selector:"klp-form-datepicker",template:'<div class="componentContainer" [ngClass]="{showErrors: isInErrorState()}">\n\t<mat-form-field [floatLabel]="\'never\'">\n\t\t<input\n\t\t\t#nativeInput\n\t\t\tmatInput\n\t\t\t[matDatepicker]="picker"\n\t\t\t[(ngModel)]="valueForMaterialDatePicker"\n\t\t\t(dateInput)="dateChanged($event)"\n\t\t\t(input)="nativeValueChanged($event)"\n\t\t\t[min]="minDateStartOfDay"\n\t\t\t[max]="maxDateEndOfDay"\n\t\t\t[placeholder]="placeholder"\n\t\t\t(click)="picker.open()"\n\t\t\t(blur)="touch()"\n\t\t>\n\t\t<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>\n\t\t<mat-datepicker #picker\n\t\t></mat-datepicker>\n\t</mat-form-field>\n\t<button *ngIf="clearable" class="clearButton" (click)="resetToNull()">×</button>\n</div>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:W,multi:!0},{provide:l.MAT_DATE_FORMATS,deps:[W,[new t.Optional,G]],useFactory:H}],styles:[":host{display:block}:host ::ng-deep mat-form-field{display:block;height:100%}:host ::ng-deep mat-form-field.mat-focused .mat-form-field-label,:host ::ng-deep mat-form-field .mat-form-field-label{color:#adadad}:host ::ng-deep .mat-datepicker-toggle-active{color:#666}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:none}:host ::ng-deep .mat-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .mat-form-field-infix{border-top:none}:host ::ng-deep .mat-form-field-suffix{margin-right:.625rem}:host ::ng-deep .mat-form-field-suffix:hover .mat-button-focus-overlay{opacity:.1}:host ::ng-deep .mat-form-field-underline{display:none}.componentContainer{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;display:block;font-size:14px;height:42px;padding:.375rem .625rem;position:relative;transition:all .2s ease-in;width:100%}.componentContainer::-webkit-input-placeholder{color:#adadad}.componentContainer:-moz-placeholder,.componentContainer::-moz-placeholder{color:#adadad}.componentContainer:-ms-input-placeholder{color:#adadad}.componentContainer:focus{border-color:#3ed778;box-shadow:none;outline:0 none}.componentContainer.input-sm{height:30px}.componentContainer.input-lg{height:50px}.componentContainer.error{background-color:#ffeff4;border-color:#ff3c7e}.componentContainer.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.componentContainer.showErrors{border-color:#ff8000}.componentContainer .clearButton{align-items:center;background:none;border:none;bottom:0;color:#7b7b7b;display:flex;font-size:18px;position:absolute;right:1.25rem;top:0}"]}]}],W.propDecorators={minDate:[{type:t.Input}],maxDate:[{type:t.Input}],format:[{type:t.Input}],placeholder:[{type:t.Input}],clearable:[{type:t.Input}],nativeInputRef:[{type:t.ViewChild,args:["nativeInput"]}],datePickerRef:[{type:t.ViewChild,args:["picker"]}]};var q=function(){};q.decorators=[{type:t.NgModule,args:[{imports:[s.MatDatepickerModule,d.MatFormFieldModule,l.MatNativeDateModule,p.MatInputModule,c.MatButtonModule],exports:[s.MatDatepickerModule,d.MatFormFieldModule,l.MatNativeDateModule,p.MatInputModule,c.MatButtonModule],providers:[s.MatDatepickerModule]}]}];var B=function(){};B.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,o.FormsModule,a.NgSelectModule,i.SortablejsModule,q],declarations:[D,F,S,W,O,M,z,V,A,N,R,_,P,E,L,T,C,x],exports:[D,F,W,S,O,M,z,V,A,N,R,_,P,E,L,T,C,x]}]}],e.ButtonComponent=F,e.CheckboxComponent=S,e.DEFAULT_ERROR_MESSAGES=I,e.DatepickerComponent=W,e.EmailInputComponent=O,e.FORM_ERROR_MESSAGES=k,e.FormCaptionComponent=P,e.FormComponent=C,e.FormElementComponent=E,e.FormErrorComponent=L,e.FormSubmitButtonComponent=T,e.KLP_DATE_FORMATS=G,e.LoadingIndicatorComponent=M,e.NgxEnhancyFormsModule=B,e.NumberInputComponent=z,e.PasswordFieldComponent=V,e.SelectComponent=A,e.SortableItemsComponent=N,e.SubForm=w,e.SubFormDirective=x,e.TextInputComponent=R,e.ToggleComponent=_,e.ValueAccessorBase=D,e.dateValidator=function(e){return e.value===j?{date:e.value}:null},e.invalidDateKey=j,e.invalidFieldsSymbol=y,e.matDateFormatsFactory=H,e["ɵa"]=q,Object.defineProperty(e,"__esModule",{value:!0})}));
15
+ ***************************************************************************** */
16
+ var k=function(e,t){return k=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},k(e,t)};function I(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}k(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}Object.create;function E(e,t){var n="function"==typeof Symbol&&e[Symbol.iterator];if(!n)return e;var o,r,i=n.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(o=i.next()).done;)a.push(o.value)}catch(e){r={error:e}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return a}function F(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(E(arguments[t]));return e}Object.create;var D=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return I(t,e),t}(w);D.decorators=[{type:t.Component,args:[{selector:"klp-form-checkbox",template:'<label class="componentContainer">\n\t<div class="checkboxContainer">\n\t\t<input type="checkbox" class="checkboxNative"\n\t\t\t[(ngModel)]="innerValue"\n\t\t\t(change)="setInnerValueAndNotify(innerValue); touch()"\n\t\t\t[disabled]="disabled"\n\t\t/>\n <div class="checkboxVisual">\n <svg *ngIf="innerValue" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg">\n <path d="m0.17014 2.7065 1.3073 1.1798 2.5656-3.7404" stroke="currentColor" fill="none" stroke-width=".4646px" />\n </svg>\n </div>\n\t</div>\n\t<div *ngIf="caption" class="caption">{{ caption }}</div>\n</label>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:D,multi:!0}],styles:[":host{display:block}.componentContainer{display:flex;margin-bottom:0}.checkboxContainer{position:relative}.caption{color:#888da8;cursor:pointer;font-weight:700}.checkboxNative{left:0;opacity:0;position:absolute;top:0}.checkboxNative,.checkboxVisual{cursor:pointer;height:22px;width:22px}.checkboxVisual{background-color:#fff;border:2px solid #e6ecf5;border-radius:3px;color:#27bb5f;display:inline-block;font-size:15px;font-weight:400;line-height:19px;margin-right:10px;padding:.125rem;pointer-events:none;text-align:center;vertical-align:bottom}.checkboxNative[disabled]{cursor:not-allowed}.checkboxNative[disabled]+.checkboxVisual:before{color:#666}"]}]}],D.propDecorators={caption:[{type:t.Input}],disabled:[{type:t.Input}]};var S=function(e){function t(){var t=e.apply(this,F(arguments))||this;return t.placeholder="",t}return I(t,e),t}(w);S.decorators=[{type:t.Component,args:[{selector:"klp-form-email-input",template:'<input\n\ttype="email"\n\tclass="form-control"\n\t[(ngModel)]="innerValue"\n\t(input)="setInnerValueAndNotify($event.target.value)"\n\t[placeholder]="placeholder"\n\t(blur)="touch()"\n/>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:S,multi:!0}],styles:[":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]}]}],S.propDecorators={placeholder:[{type:t.Input}]};var O=function(){this.variant="3dots",this.size="medium"};O.decorators=[{type:t.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',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}"]}]}],O.propDecorators={variant:[{type:t.Input}],size:[{type:t.Input}]};var M=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return I(t,e),t}(w);M.decorators=[{type:t.Component,args:[{selector:"klp-form-number-input",template:'<input\n\ttype="number"\n\tclass="form-control"\n\t[(ngModel)]="innerValue"\n\t(input)="setInnerValueAndNotify($event.target.value)"\n\t[placeholder]="placeholder ? placeholder : \'\'"\n/>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:M,multi:!0}],styles:[":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]}]}],M.propDecorators={placeholder:[{type:t.Input}]};var A=function(e){function t(){var t=e.apply(this,F(arguments))||this;return t.placeholder="Password",t}return I(t,e),t}(w);A.decorators=[{type:t.Component,args:[{selector:"klp-form-password-field",template:'<input\n\ttype="password"\n\tclass="form-control"\n [ngClass]="{showErrors: isInErrorState()}"\n\t[(ngModel)]="innerValue"\n\t(input)="setInnerValueAndNotify($event.target.value)"\n\t[placeholder]="placeholder"\n\t(blur)="touch()"\n/>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:A,multi:!0}],styles:[":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]}]}],A.propDecorators={placeholder:[{type:t.Input}]};var z=function(e){function n(n,o){var r=e.call(this,n,o)||this;return r.parent=n,r.controlContainer=o,r.placeholder="Pick an option",r.multiple=!1,r.clearable=!0,r.onSearch=new t.EventEmitter,r}return I(n,e),n}(w);z.decorators=[{type:t.Component,args:[{selector:"klp-form-select",template:'<ng-select\n\t[placeholder]="placeholder"\n\tbindLabel="name"\n\tbindValue="id"\n\t[items]="options"\n\t[clearable]="clearable"\n\t[(ngModel)]="innerValue"\n\t[ngClass]="{showErrors: isInErrorState()}"\n\t(change)="setInnerValueAndNotify(innerValue)"\n\t[multiple]="multiple"\n\t[disabled]="disabled"\n\t(blur)="touch()"\n\t(search)="onSearch.emit($event.term)"\n\t[dropdownPosition]="dropdownPosition"\n\t[searchFn]="customSearchFn"\n>\n\t<ng-template let-item="item" ng-option-tmp>\n\t\t{{ item.name }}\n\t\t<div *ngIf="item.description" class="dropdown-item-description">\n\t\t\t{{ item.description }}\n\t\t</div>\n\t</ng-template>\n</ng-select>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:z,multi:!0}],styles:[":host{display:block}.showErrors ::ng-deep .ng-select-container,:host.showErrors ::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{color:#888da8}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#3ed778}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{border-color:transparent transparent #999;border-width:0 5px 5px;top:-2px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-left-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select .ng-select-container{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid #e6ecf5;border-radius:4px;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#888da8;display:flex;flex-direction:row;font-size:1rem;font-size:14px;line-height:1.5;margin:0;min-height:42px;outline:none;overflow:visible;padding:.375rem .75rem;transition-delay:0s;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;overflow:hidden;padding-left:10px}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container{padding-left:7px;padding-right:10px;padding-top:2px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:#e7faee;border:1px solid #93e8b3;border-radius:2px;display:flex;font-size:.9em;margin-bottom:5px;margin-right:5px;overflow:hidden}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value.ng-value-disabled .ng-value-label{padding-left:5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-label{display:inline-block;overflow:hidden;padding:0 5px;text-overflow:ellipsis}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon{display:inline-block;padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon:hover{background-color:#93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.left{border-right:1px solid #93e8b3}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:1px solid #c2e0ff}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-input{padding-bottom:3px;padding-left:3px}:host ::ng-deep ng-select.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-bottom:3px;padding-left:3px;position:static;top:5px}:host ::ng-deep .ng-select .ng-clear-wrapper{color:#999}:host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{color:#ff3c7e}:host ::ng-deep .ng-select .ng-spinner-zone{padding-right:5px;padding-top:5px}:host ::ng-deep .ng-select .ng-arrow-wrapper{padding-right:5px;width:25px}:host ::ng-deep .ng-select .ng-arrow-wrapper:hover .ng-arrow{border-top-color:#666}:host ::ng-deep .ng-select .ng-arrow-wrapper .ng-arrow{border-color:#999 transparent transparent;border-style:solid;border-width:5px 5px 2.5px}:host ::ng-deep .ng-dropdown-panel{background-color:#fff;border:1px solid #3ed778;box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom{border-bottom-left-radius:4px;border-bottom-right-radius:4px;border-top-color:#e6e6e6;margin-top:-1px;top:100%}:host ::ng-deep .ng-dropdown-panel.ng-select-bottom .ng-dropdown-panel-items .ng-option:last-child{border-bottom-left-radius:4px;border-bottom-right-radius:4px}:host ::ng-deep .ng-dropdown-panel.ng-select-top{border-bottom-color:#e6e6e6;border-top-left-radius:4px;border-top-right-radius:4px;bottom:100%;margin-bottom:-1px}:host ::ng-deep .ng-dropdown-panel.ng-select-top .ng-dropdown-panel-items .ng-option:first-child{border-top-left-radius:4px;border-top-right-radius:4px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-header{border-bottom:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-footer{border-top:1px solid #ccc;padding:5px 7px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{margin-bottom:1px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup{-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;color:rgba(0,0,0,.54);cursor:default;cursor:pointer;font-weight:500;padding:8px 10px;user-select:none}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-disabled{cursor:default}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-marked{background-color:#ebf5ff}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-optgroup.ng-option-selected{background-color:#f5faff;font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{background-color:#fff;color:rgba(0,0,0,.87);padding:8px 10px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected .ng-option-label{font-weight:600}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:#e7faee;color:#333}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled{color:#ccc}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-child{padding-left:22px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option .ng-tag-label{font-size:80%;font-weight:400;padding-right:5px}:host ::ng-deep ng-select.ng-select .ng-select-container .ng-value-container{padding-left:0}:host ::ng-deep ng-select.ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{color:#888da8;top:9px}:host ::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option,:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-input>input{color:#888da8}:host ::ng-deep .ng-select.ng-select-auto-grow{max-width:inherit}:host ::ng-deep .ng-select.ng-select-auto-grow .ng-dropdown-panel{width:auto}"]}]}],z.ctorParameters=function(){return[{type:x,decorators:[{type:t.Optional},{type:t.Host}]},{type:o.ControlContainer,decorators:[{type:t.Optional},{type:t.Host}]}]},z.propDecorators={placeholder:[{type:t.Input}],options:[{type:t.Input}],multiple:[{type:t.Input}],clearable:[{type:t.Input}],dropdownPosition:[{type:t.Input}],customSearchFn:[{type:t.Input}],onSearch:[{type:t.Output}]};var V=function(e){function t(){var t=e.apply(this,F(arguments))||this;return t.sortableItemSize="lg",t.itemsOrderChanged=function(){t.setInnerValueAndNotify(t.innerValue)},t}return I(t,e),t}(w);V.decorators=[{type:t.Component,args:[{selector:"klp-form-sortable-items",template:'<ng-template #listItem>\n\t<li *ngFor="let item of innerValue; index as index"\n\t class="sortableItem"\n\t [ngClass]="{\n\t\t\tlargeSortableItem: sortableItemSize === \'lg\',\n\t\t \tsmallSortableItem: sortableItemSize === \'sm\'\n\t\t }"\n\t>\n\t\t<ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index:index }" ></ng-container>\n\t</li>\n</ng-template>\n\n<ol *ngIf=\'!disabled\'\n [sortablejs]="innerValue"\n [sortablejsOptions]="{ onUpdate: itemsOrderChanged }"\n class="itemsContainer"\n>\n\t<ng-container *ngTemplateOutlet="listItem"></ng-container>\n</ol>\n\n<ol *ngIf=\'disabled\' class="itemsContainer disabled-mouse-cursor">\n\t<ng-container *ngTemplateOutlet="listItem"></ng-container>\n</ol>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:V,multi:!0}],styles:[":host{display:block}.itemsContainer{border:1px solid #e6ecf5;border-radius:5px;margin-bottom:0;padding:0}.sortableItem{border-top:1px solid #e6ecf5;cursor:-webkit-grab;cursor:grab;list-style:none}.sortableItem:hover{background:#f8f9fa}.sortableItem:first-child{border-top:none}.largeSortableItem{padding:15px}.smallSortableItem{padding:0 10px}.disabled-mouse-cursor li{cursor:no-drop}"]}]}],V.propDecorators={template:[{type:t.ContentChild,args:[t.TemplateRef]}],sortableItemSize:[{type:t.Input}]};var N=function(e){function t(){var t=e.apply(this,F(arguments))||this;return t.type="text",t}return I(t,e),t}(w);N.decorators=[{type:t.Component,args:[{selector:"klp-form-text-input",template:'<input\n\t[type]="type"\n\tclass="form-control"\n\t[ngClass]="{showErrors: isInErrorState()}"\n\t[(ngModel)]="innerValue"\n\t(input)="setInnerValueAndNotify($event.target.value)"\n\t[placeholder]="placeholder ? placeholder : \'\'"\n\t(blur)="touch()"\n\t[disabled]=\'disabled\'\n/>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:N,multi:!0}],styles:[":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#ffeff4;border-color:#ff3c7e}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]}]}],N.propDecorators={placeholder:[{type:t.Input}],type:[{type:t.Input}]};var P=function(e){function t(){return null!==e&&e.apply(this,arguments)||this}return I(t,e),t}(w);P.decorators=[{type:t.Component,args:[{selector:"klp-form-toggle",template:'<div class="componentContainer" [ngClass]="{disabled: disabled}">\n\t<input type="checkbox" class="nativeCheckbox"\n\t\t[(ngModel)]="innerValue"\n\t\t(input)="setInnerValueAndNotify($event.target.checked); touch()"\n\t\t[disabled]="disabled"\n\t\t[ngClass]="{showErrors: isInErrorState()}"\n\t/>\n\t<div class="toggleVisual"></div>\n</div>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:P,multi:!0}],styles:[':host{display:block}.componentContainer{position:relative}.nativeCheckbox{cursor:pointer;height:20px;left:0;opacity:0;position:absolute;top:0;width:35px}.toggleVisual{-moz-transition:.4s ease;-ms-transition:.4s ease;-o-transition:.4s ease;-webkit-transition:.4s ease;border:1px solid #e6ecf5;border-radius:35px;display:block;height:20px;pointer-events:none;position:relative;transition:.4s ease;width:35px}.toggleVisual:before{-moz-transition:.2s cubic-bezier(.24,0,.5,1);-ms-transition:.2s cubic-bezier(.24,0,.5,1);-o-transition:.2s cubic-bezier(.24,0,.5,1);-webkit-transition:.2s cubic-bezier(.24,0,.5,1);border-radius:30px;height:18px;left:-1px;margin:1px;transition:.2s cubic-bezier(.24,0,.5,1);width:33px}.toggleVisual:after,.toggleVisual:before{content:"";display:block;position:absolute;top:-1px}.toggleVisual:after{-moz-transition:.35s cubic-bezier(.54,1.6,.5,1);-ms-transition:.35s cubic-bezier(.54,1.6,.5,1);-o-transition:.35s cubic-bezier(.54,1.6,.5,1);-webkit-transition:.35s cubic-bezier(.54,1.6,.5,1);background:#f7f7f7;border-radius:60px;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 0 rgba(0,0,0,.04),0 4px 9px rgba(0,0,0,.13),0 3px 3px rgba(0,0,0,.05);height:20px;left:0;transition:.35s cubic-bezier(.54,1.6,.5,1);width:20px}.nativeCheckbox:checked+.toggleVisual:before{-moz-transition:width .2s cubic-bezier(0,0,0,.1);-ms-transition:width .2s cubic-bezier(0,0,0,.1);-o-transition:width .2s cubic-bezier(0,0,0,.1);-webkit-transition:width .2s cubic-bezier(0,0,0,.1);background:#37c936;transition:width .2s cubic-bezier(0,0,0,.1)}.nativeCheckbox:checked+.toggleVisual:after{left:18px}.disabled{opacity:.6}.showErrors+.toggleVisual:before{border:1px solid #ff8000}']}]}];var R=function(){function e(e){this.parent=e}return e.prototype.ngOnInit=function(){var e=this;setTimeout((function(){var t=e.parent.getAttachedControl();if(e.parent.registerCaption(e.contentRef),g(t))throw new Error("You added a Form Caption component without an attached Form Control")}))},e}();R.decorators=[{type:t.Component,args:[{selector:"klp-form-caption",template:"<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n",styles:[":host{display:block}"]}]}],R.ctorParameters=function(){return[{type:x,decorators:[{type:t.Host},{type:t.Optional}]}]},R.propDecorators={contentRef:[{type:t.ViewChild,args:["contentRef"]}]};var _=function(){function e(e){this.parent=e,this.showError=!1}return e.prototype.ngOnInit=function(){var e=this;setTimeout((function(){var t=e.parent.getAttachedControl();if(e.parent.registerErrorHandler(e.error,e.contentRef),g(t))throw new Error("You added a Form Error component without an attached Form Control")}))},e}();_.decorators=[{type:t.Component,args:[{selector:"klp-form-error",template:"<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n",styles:[":host{display:block}"]}]}],_.ctorParameters=function(){return[{type:x,decorators:[{type:t.Host},{type:t.Optional}]}]},_.propDecorators={error:[{type:t.Input}],contentRef:[{type:t.ViewChild,args:["contentRef"]}]};var L=function(){function e(e){this.parentForm=e,this.isLoading=!1,this.fullWidth=!1,this.variant="greenFilled"}return Object.defineProperty(e.prototype,"_",{get:function(){return this.fullWidth},enumerable:!1,configurable:!0}),e.prototype.submitForm=function(){var e=this;this.parentForm.trySubmit().then((function(t){e.isLoading=!0;var n=e.submitCallback(t);if(g(n))throw new Error("No promise is returned in your submit function.");return n.then((function(){return e.isLoading=!1})).catch((function(t){throw e.isLoading=!1,t}))})).catch((function(e){if(e!==h)throw e}))},e}();L.decorators=[{type:t.Component,args:[{selector:"klp-form-submit-button",template:'<klp-form-button\n\t\t[variant]="variant"\n\t\t(click)="submitForm()"\n\t\t[disabled]="isLoading"\n\t\t[isLoading]="isLoading"\n\t\t[fullWidth]="fullWidth"\n\t\ttype="submit"\n\t\t[ngClass]="fullWidth ? \'fullWidth\' : \'\'"\n\t>\n\t<ng-content></ng-content>\n</klp-form-button>\n',styles:[":host{display:inline-block}:host._fullWidth{display:block}.fullWidth{width:100%}"]}]}],L.ctorParameters=function(){return[{type:b,decorators:[{type:t.Host},{type:t.Optional}]}]},L.propDecorators={isLoading:[{type:t.Input}],fullWidth:[{type:t.Input}],variant:[{type:t.Input}],submitCallback:[{type:t.Input}],_:[{type:t.HostBinding,args:["class._fullWidth"]}]};var T="--invalid_date--";var G=new t.InjectionToken("klp.form.date.formats");function j(e,t){var n;return null!==(n=null==t?void 0:t(e.format))&&void 0!==n?n:l.MAT_NATIVE_DATE_FORMATS}var H=function(e){function t(){var t=e.apply(this,F(arguments))||this;return t.minDate=void 0,t.maxDate=void 0,t.placeholder="Select date",t.clearable=!1,t.minDateStartOfDay=void 0,t.maxDateEndOfDay=void 0,t}return I(t,e),t.prototype.ngOnChanges=function(e){e.minDate&&this.setMinDate(e.minDate.currentValue),e.maxDate&&this.setMaxDate(e.maxDate.currentValue)},t.prototype.setMinDate=function(e){e?(this.minDateStartOfDay=new Date(e),this.minDateStartOfDay.setHours(0,0,0,0)):this.minDateStartOfDay=void 0},t.prototype.setMaxDate=function(e){e?(this.maxDateEndOfDay=new Date(e),this.maxDateEndOfDay.setHours(23,59,59,999)):this.maxDateEndOfDay=void 0},t.prototype.dateChanged=function(e){var t=this.nativeInputRef.nativeElement.value,n=e.value;g(n)&&u(t)?this.setInnerValueAndNotify(T):this.setInnerValueAndNotify(n)},t.prototype.writeValue=function(t){e.prototype.writeValue.call(this,t),this.valueForMaterialDatePicker=t===T?null:t},t.prototype.nativeValueChanged=function(e){var t=e.target.value,n=this.valueForMaterialDatePicker;this.datePickerRef.opened&&this.datePickerRef.close(),g(n)&&u(t)?this.setInnerValueAndNotify(T):this.setInnerValueAndNotify(n)},t.prototype.resetToNull=function(){this.setInnerValueAndNotify(null),this.valueForMaterialDatePicker=null,this.nativeInputRef.nativeElement.value=null},t}(w);H.decorators=[{type:t.Component,args:[{selector:"klp-form-datepicker",template:'<div class="componentContainer" [ngClass]="{showErrors: isInErrorState()}">\n\t<mat-form-field [floatLabel]="\'never\'">\n\t\t<input\n\t\t\t#nativeInput\n\t\t\tmatInput\n\t\t\t[matDatepicker]="picker"\n\t\t\t[(ngModel)]="valueForMaterialDatePicker"\n\t\t\t(dateInput)="dateChanged($event)"\n\t\t\t(input)="nativeValueChanged($event)"\n\t\t\t[min]="minDateStartOfDay"\n\t\t\t[max]="maxDateEndOfDay"\n\t\t\t[placeholder]="placeholder"\n\t\t\t(click)="picker.open()"\n\t\t\t(blur)="touch()"\n\t\t>\n\t\t<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>\n\t\t<mat-datepicker #picker\n\t\t></mat-datepicker>\n\t</mat-form-field>\n\t<button *ngIf="clearable" class="clearButton" (click)="resetToNull()">×</button>\n</div>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:H,multi:!0},{provide:l.MAT_DATE_FORMATS,deps:[H,[new t.Optional,G]],useFactory:j}],styles:[":host{display:block}:host ::ng-deep mat-form-field{display:block;height:100%}:host ::ng-deep mat-form-field.mat-focused .mat-form-field-label,:host ::ng-deep mat-form-field .mat-form-field-label{color:#adadad}:host ::ng-deep .mat-datepicker-toggle-active{color:#666}:host ::ng-deep .mat-form-field-wrapper{padding-bottom:none}:host ::ng-deep .mat-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .mat-form-field-infix{border-top:none}:host ::ng-deep .mat-form-field-suffix{margin-right:.625rem}:host ::ng-deep .mat-form-field-suffix:hover .mat-button-focus-overlay{opacity:.1}:host ::ng-deep .mat-form-field-underline{display:none}.componentContainer{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;display:block;font-size:14px;height:42px;padding:.375rem .625rem;position:relative;transition:all .2s ease-in;width:100%}.componentContainer::-webkit-input-placeholder{color:#adadad}.componentContainer:-moz-placeholder,.componentContainer::-moz-placeholder{color:#adadad}.componentContainer:-ms-input-placeholder{color:#adadad}.componentContainer:focus{border-color:#3ed778;box-shadow:none;outline:0 none}.componentContainer.input-sm{height:30px}.componentContainer.input-lg{height:50px}.componentContainer.error{background-color:#ffeff4;border-color:#ff3c7e}.componentContainer.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.componentContainer.showErrors{border-color:#ff8000}.componentContainer .clearButton{align-items:center;background:none;border:none;bottom:0;color:#7b7b7b;display:flex;font-size:18px;position:absolute;right:1.25rem;top:0}"]}]}],H.propDecorators={minDate:[{type:t.Input}],maxDate:[{type:t.Input}],format:[{type:t.Input}],placeholder:[{type:t.Input}],clearable:[{type:t.Input}],nativeInputRef:[{type:t.ViewChild,args:["nativeInput"]}],datePickerRef:[{type:t.ViewChild,args:["picker"]}]};var W=function(){};W.decorators=[{type:t.NgModule,args:[{imports:[s.MatDatepickerModule,p.MatFormFieldModule,l.MatNativeDateModule,d.MatInputModule,c.MatButtonModule],exports:[s.MatDatepickerModule,p.MatFormFieldModule,l.MatNativeDateModule,d.MatInputModule,c.MatButtonModule],providers:[s.MatDatepickerModule]}]}];var q=function(){};q.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule,o.FormsModule,a.NgSelectModule,i.SortablejsModule,W],declarations:[w,C,D,H,S,O,M,A,z,V,N,P,R,x,_,L,b,m],exports:[w,C,H,D,S,O,M,A,z,V,N,P,R,x,_,L,b,m]}]}],e.ButtonComponent=C,e.CheckboxComponent=D,e.DEFAULT_ERROR_MESSAGES=y,e.DatepickerComponent=H,e.EmailInputComponent=S,e.FORM_ERROR_MESSAGES=v,e.FormCaptionComponent=R,e.FormComponent=b,e.FormElementComponent=x,e.FormErrorComponent=_,e.FormSubmitButtonComponent=L,e.KLP_DATE_FORMATS=G,e.LoadingIndicatorComponent=O,e.NgxEnhancyFormsModule=q,e.NumberInputComponent=M,e.PasswordFieldComponent=A,e.SelectComponent=z,e.SortableItemsComponent=V,e.SubFormDirective=m,e.TextInputComponent=N,e.ToggleComponent=P,e.ValueAccessorBase=w,e.dateValidator=function(e){return e.value===T?{date:e.value}:null},e.invalidDateKey=T,e.invalidFieldsSymbol=h,e.matDateFormatsFactory=j,e["ɵa"]=W,Object.defineProperty(e,"__esModule",{value:!0})}));
16
17
  //# sourceMappingURL=klippa-ngx-enhancy-forms.umd.min.js.map