@klippa/ngx-enhancy-forms 7.0.0 → 7.0.1

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

@@ -309,7 +309,7 @@
         { type: core.Component, args: [{
                     selector: 'klp-form-element',
                     template: "<ng-template #errorRef>\n\t<div *ngIf=\"shouldShowErrorMessages() && getErrorToShow()\" class=\"errorContainer\" [ngClass]=\"{hasCaption: caption || captionRef, 'd30-70': spaceDistribution === '30-70'}\">\n\t\t<div *ngIf=\"showDefaultError('min')\">{{substituteParameters(getErrorMessage(\"min\"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf=\"showDefaultError('max')\">{{substituteParameters(getErrorMessage(\"max\"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf=\"showDefaultError('required')\">{{getErrorMessage(\"required\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('email')\">{{getErrorMessage(\"email\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('minlength')\">{{substituteParameters(getErrorMessage(\"minLength\"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('maxlength')\">{{substituteParameters(getErrorMessage(\"maxLength\"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf=\"showDefaultError('pattern')\">{{getErrorMessage(\"pattern\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('MatchPassword')\">{{getErrorMessage(\"matchPassword\")}}</div>\n\t\t<div *ngIf=\"showDefaultError('date')\">{{getErrorMessage(\"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\n<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\n<div class=\"componentContainer\" [ngClass]=\"{vertical: direction === 'vertical', reverseOrder: swapInputAndCaption}\" #internalComponentRef>\n\t<div class=\"caption\" *ngIf=\"caption || captionRef\" [ngClass]=\"{ hasErrors: getErrorToShow() && attachedControl.touched, percentageSpacing: captionSpacing === 'percentages', 'd30-70': spaceDistribution === '30-70' }\">\n\t\t<div *ngIf=\"captionRef\" class=\"captionRefContainer\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"captionRef\"></ng-container>\n\t\t\t<div *ngIf=\"isRequired()\">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\">{{caption}}<span *ngIf=\"isRequired()\">&nbsp;*</span></div>\n\t</div>\n\t<ng-container *ngIf=\"direction === 'vertical'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\n\t<div class=\"inputContainer\" [ngClass]=\"{ percentageSpacing: captionSpacing === 'percentages', 'd30-70': spaceDistribution === '30-70' }\">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n",
-                    styles: [":host{display:block}.componentContainer{align-items:center;display:flex;min-height:42px}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.captionRefContainer{display:flex}.caption{color:#515365;flex:0 0 auto;font-weight:700}.caption.percentageSpacing{flex:0 0 40%}.caption.percentageSpacing.d30-70{flex-basis:30%}.caption.hasErrors{color:#ff8000}.inputContainer{flex:1}.inputContainer.percentageSpacing{flex:0 0 60%}.inputContainer.percentageSpacing.d30-70{flex-basis:70%}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:40%}.errorContainer.hasCaption.d30-70{margin-left:30%}"]
+                    styles: [":host{display:block}.componentContainer{align-items:center;display:flex;min-height:42px}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.componentContainer.vertical .caption{padding-right:0}.captionRefContainer{display:flex}.caption{color:#515365;flex:0 0 auto;font-weight:700;padding-right:1.25rem}.caption.percentageSpacing{flex:0 0 40%}.caption.percentageSpacing.d30-70{flex-basis:30%}.caption.hasErrors{color:#ff8000}.inputContainer{flex:1}.inputContainer.percentageSpacing{flex:0 0 60%}.inputContainer.percentageSpacing.d30-70{flex-basis:70%}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:40%}.errorContainer.hasCaption.d30-70{margin-left:30%}"]
                 },] }
     ];
     FormElementComponent.ctorParameters = function () { return [

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

@@ -1,4 +1,4 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("lodash"),require("ngx-sortablejs"),require("@ng-select/ng-select"),require("date-fns"),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","date-fns","@angular/material/core","@angular/material/datepicker","@angular/material/form-field","@angular/material/input","@angular/material/button"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).klippa=t.klippa||{},t.klippa["ngx-enhancy-forms"]={}),t.ng.core,t.ng.common,t.ng.forms,t.lodash,t.ngxSortablejs,t.ngSelect,t.dateFns,t.ng.material.core,t.ng.material.datepicker,t.ng.material.formField,t.ng.material.input,t.ng.material.button)}(this,(function(t,e,n,o,r,i,a,l,s,p,d,c,u){"use strict";function h(t){return r.isString(t)&&t.length>0}function g(t){return null==t}function f(t){return null!=t}function m(t){return null!=t&&t.length>0}var b=Symbol("Not all fields are valid"),y=function(){};y.decorators=[{type:e.Directive,args:[{selector:"klp-sub-form"}]}],y.propDecorators={injectInto:[{type:e.Input}],at:[{type:e.Input}]};var v=function(){function t(t,e){this.parent=t,this.subFormPlaceholder=e,this.showErrorMessages=!0,this.activeControls=[]}return t.prototype.ngOnInit=function(){if(f(this.parent)&&f(this.subFormPlaceholder)){var t=this.subFormPlaceholder.injectInto,e=this.subFormPlaceholder.at;if(t instanceof o.FormArray){if("number"!=typeof e)throw new Error("cannot index FormArray with "+typeof e);t.setControl(e,this.formGroup)}else if(t instanceof o.FormGroup){if("string"!=typeof e)throw new Error("cannot index FormGroup with "+typeof e);t.setControl(e,this.formGroup)}}f(this.patchValueInterceptor)&&this.addSupportForPatchValueInterceptor()},t.prototype.ngOnDestroy=function(){var t=this;if(f(this.parent)&&f(this.subFormPlaceholder)){var e=this.subFormPlaceholder.injectInto,n=this.subFormPlaceholder.at;if(e instanceof o.FormArray){var r=e.controls.findIndex((function(e){return e===t.formGroup}));e.removeAt(r)}else if(e instanceof o.FormGroup){if("string"!=typeof n)throw new Error("cannot index FormGroup with "+typeof n);e.removeControl(n)}}},t.prototype.addSupportForPatchValueInterceptor=function(){var t=this,e=this.formGroup.patchValue;this.formGroup.patchValue=function(n,o){t.patchValueInterceptor(n).then((function(n){setTimeout((function(){e.call(t.formGroup,n,o)}))}))}},t.prototype.registerControl=function(t,e){this.activeControls.push({formControl:t,formElement:e}),this.parent&&this.parent.registerControl(t,e)},t.prototype.unregisterControl=function(t){this.activeControls=this.activeControls.filter((function(e){return e.formControl!==t})),this.parent&&this.parent.unregisterControl(t)},t.prototype.addFormGroupControls=function(t,e){var n=this;Object.values(t.controls).forEach((function(t){t instanceof o.FormGroup?n.addFormGroupControls(t,e):t instanceof o.FormArray?n.addFormArrayControls(t,e):t instanceof o.FormControl&&n.addFormControl(t,e)}))},t.prototype.addFormArrayControls=function(t,e){var n=this;t.controls.forEach((function(t){t instanceof o.FormGroup?n.addFormGroupControls(t,e):t instanceof o.FormArray?n.addFormArrayControls(t,e):t instanceof o.FormControl&&n.addFormControl(t,e)}))},t.prototype.getAllFormControls=function(){var t=[];return this.addFormGroupControls(this.formGroup,t),t},t.prototype.addFormControl=function(t,e){e.push(t)},t.prototype.disableInactiveFormControl=function(t){this.activeControls.some((function(e){return e.formControl===t}))||t.disable()},t.prototype.trySubmit=function(){var t,e,n=this;this.formGroup.markAllAsTouched();var o=this.getAllFormControls(),r=o.map((function(t){return{control:t,disabled:t.disabled}}));o.forEach((function(t){return n.disableInactiveFormControl(t)})),o.forEach((function(t){return t.updateValueAndValidity()}));var i=this.formGroup.value;return this.formGroup.valid?(this.setDisabledStatesForAllControls(r),Promise.resolve(i)):(null===(e=null===(t=this.activeControls.find((function(t){return!t.formControl.valid})))||void 0===t?void 0:t.formElement)||void 0===e||e.scrollTo(),this.setDisabledStatesForAllControls(r),Promise.reject(b))},t.prototype.setDisabledStatesForAllControls=function(t){t.forEach((function(t){t.disabled?t.control.disable():t.control.enable()}))},t}();v.decorators=[{type:e.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}"]}]}],v.ctorParameters=function(){return[{type:v,decorators:[{type:e.SkipSelf},{type:e.Optional}]},{type:y,decorators:[{type:e.Optional}]}]},v.propDecorators={showErrorMessages:[{type:e.Input}],formGroup:[{type:e.Input}],patchValueInterceptor:[{type:e.Input}]};var x=new e.InjectionToken("form.error.messages"),C={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"},w=function(){function t(t,e){this.parent=t,this.customMessages=e,this.direction="horizontal",this.captionSpacing="percentages",this.spaceDistribution="40-60",this.swapInputAndCaption=!1,this.errorMessages=C,this.customErrorHandlers=[]}return t.prototype.shouldShowErrorMessages=function(){var t;return!1!==(null===(t=this.parent)||void 0===t?void 0:t.showErrorMessages)},t.prototype.substituteParameters=function(t,e){return Object.keys(e).reduce((function(t,n){return t.replace("%"+n+"%",e[n])}),t)},t.prototype.registerControl=function(t,e){void 0===e&&(e=null),this.attachedControl=t,this.parent.registerControl(t,this),this.input=e},t.prototype.unregisterControl=function(t){this.attachedControl=null,this.parent.unregisterControl(t)},t.prototype.getAttachedControl=function(){return this.attachedControl},t.prototype.registerErrorHandler=function(t,e){this.customErrorHandlers.push({error:t,templateRef:e})},t.prototype.registerCaption=function(t){this.captionRef=t},t.prototype.getErrorToShow=function(){var t,e,n;return!0===(null===(t=this.attachedControl)||void 0===t?void 0:t.touched)&&(null===(e=this.attachedControl)||void 0===e?void 0:e.errors)?Object.keys(null===(n=this.attachedControl)||void 0===n?void 0:n.errors)[0]:null},t.prototype.getCustomErrorHandler=function(t){return this.customErrorHandlers.find((function(e){return e.error===t}))},t.prototype.showDefaultError=function(t){return this.getErrorToShow()===t&&!this.customErrorHandlers.some((function(e){return e.error===t}))},t.prototype.getScrollableParent=function(t){return null==t?null:t.scrollHeight>t.clientHeight?t:this.getScrollableParent(t.parentNode)},t.prototype.scrollTo=function(){var t;this.internalComponentRef.nativeElement.scrollIntoView(!0),null===(t=this.getScrollableParent(this.internalComponentRef.nativeElement))||void 0===t||t.scrollBy(0,-100)},t.prototype.isRequired=function(){return!!f(this.input)&&this.input.hasValidator("required")},t.prototype.getErrorMessage=function(t){var e,n,o;return null!==(o=null===(n=null===(e=this.customMessages)||void 0===e?void 0:e[t])||void 0===n?void 0:n.call(e))&&void 0!==o?o:this.errorMessages[t]},t}();w.decorators=[{type:e.Component,args:[{selector:"klp-form-element",template:'<ng-template #errorRef>\n\t<div *ngIf="shouldShowErrorMessages() && getErrorToShow()" class="errorContainer" [ngClass]="{hasCaption: caption || captionRef, \'d30-70\': spaceDistribution === \'30-70\'}">\n\t\t<div *ngIf="showDefaultError(\'min\')">{{substituteParameters(getErrorMessage("min"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf="showDefaultError(\'max\')">{{substituteParameters(getErrorMessage("max"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf="showDefaultError(\'required\')">{{getErrorMessage("required")}}</div>\n\t\t<div *ngIf="showDefaultError(\'email\')">{{getErrorMessage("email")}}</div>\n\t\t<div *ngIf="showDefaultError(\'minlength\')">{{substituteParameters(getErrorMessage("minLength"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf="showDefaultError(\'maxlength\')">{{substituteParameters(getErrorMessage("maxLength"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf="showDefaultError(\'pattern\')">{{getErrorMessage("pattern")}}</div>\n\t\t<div *ngIf="showDefaultError(\'MatchPassword\')">{{getErrorMessage("matchPassword")}}</div>\n\t\t<div *ngIf="showDefaultError(\'date\')">{{getErrorMessage("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\n<ng-container *ngIf="direction === \'horizontal\'" [ngTemplateOutlet]="errorRef"></ng-container>\n\n<div class="componentContainer" [ngClass]="{vertical: direction === \'vertical\', reverseOrder: swapInputAndCaption}" #internalComponentRef>\n\t<div class="caption" *ngIf="caption || captionRef" [ngClass]="{ hasErrors: getErrorToShow() && attachedControl.touched, percentageSpacing: captionSpacing === \'percentages\', \'d30-70\': spaceDistribution === \'30-70\' }">\n\t\t<div *ngIf="captionRef" class="captionRefContainer">\n\t\t\t<ng-container [ngTemplateOutlet]="captionRef"></ng-container>\n\t\t\t<div *ngIf="isRequired()">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf="!captionRef">{{caption}}<span *ngIf="isRequired()">&nbsp;*</span></div>\n\t</div>\n\t<ng-container *ngIf="direction === \'vertical\'" [ngTemplateOutlet]="errorRef"></ng-container>\n\t<div class="inputContainer" [ngClass]="{ percentageSpacing: captionSpacing === \'percentages\', \'d30-70\': spaceDistribution === \'30-70\' }">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n',styles:[":host{display:block}.componentContainer{align-items:center;display:flex;min-height:42px}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.captionRefContainer{display:flex}.caption{color:#515365;flex:0 0 auto;font-weight:700}.caption.percentageSpacing{flex:0 0 40%}.caption.percentageSpacing.d30-70{flex-basis:30%}.caption.hasErrors{color:#ff8000}.inputContainer{flex:1}.inputContainer.percentageSpacing{flex:0 0 60%}.inputContainer.percentageSpacing.d30-70{flex-basis:70%}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:40%}.errorContainer.hasCaption.d30-70{margin-left:30%}"]}]}],w.ctorParameters=function(){return[{type:v,decorators:[{type:e.Host},{type:e.Optional}]},{type:void 0,decorators:[{type:e.Inject,args:[x]},{type:e.Optional}]}]},w.propDecorators={caption:[{type:e.Input}],direction:[{type:e.Input}],captionSpacing:[{type:e.Input}],spaceDistribution:[{type:e.Input}],swapInputAndCaption:[{type:e.Input}],internalComponentRef:[{type:e.ViewChild,args:["internalComponentRef"]}]};var k=function(){function t(t,n){this.parent=t,this.controlContainer=n,this.changed=new Array,this.touched=new Array,this.disabled=!1,this.formControlName=null,this.formControl=null,this.onTouch=new e.EventEmitter,this.validators=[]}return t.prototype.ngOnInit=function(){var t,e,n,o,r=this;if(this.formControl)this.attachedFormControl=this.formControl;else if(h(this.formControlName)&&(this.attachedFormControl=null===(t=this.controlContainer)||void 0===t?void 0:t.control.get(this.formControlName),g(this.attachedFormControl)))throw new Error("Form element '"+this.formControlName+"' with caption '"+(null===(e=this.parent)||void 0===e?void 0:e.caption)+"' is not declared in your FormGroup.");if(this.attachedFormControl&&(this.disabled=this.attachedFormControl.disabled,this.attachedFormControl.statusChanges.subscribe((function(){r.disabled=r.attachedFormControl.disabled})),null===(n=this.parent)||void 0===n||n.registerControl(this.attachedFormControl,this),null===(o=this.attachedFormControl)||void 0===o?void 0:o.validator)){var i=this.attachedFormControl.validator({});f(i)?this.validators=Object.keys(i):this.validators=[]}},t.prototype.isInErrorState=function(){return this.attachedFormControl&&"INVALID"===this.attachedFormControl.status&&this.attachedFormControl.touched},t.prototype.ngOnDestroy=function(){var t;this.attachedFormControl&&(null===(t=this.parent)||void 0===t||t.unregisterControl(this.attachedFormControl))},t.prototype.touch=function(){this.touched.forEach((function(t){return t()}))},t.prototype.writeValue=function(t){this.innerValue=t},t.prototype.registerOnChange=function(t){this.changed.push(t)},t.prototype.registerOnTouched=function(t){this.touched.push(t)},t.prototype.setInnerValueAndNotify=function(t){this.innerValue=t,this.changed.forEach((function(e){return e(t)}))},t.prototype.resetToNull=function(){this.setInnerValueAndNotify(null)},t.prototype.hasValidator=function(t){return!!m(this.validators)&&this.validators.includes(t)},t}();k.decorators=[{type:e.Component,args:[{selector:"",template:""}]}],k.ctorParameters=function(){return[{type:w,decorators:[{type:e.Host},{type:e.Optional}]},{type:o.ControlContainer,decorators:[{type:e.Host},{type:e.Optional}]}]},k.propDecorators={disabled:[{type:e.Input}],formControlName:[{type:e.Input}],formControl:[{type:e.Input}],onTouch:[{type:e.Output}]};var I=function(){function t(){this.variant="white",this.size="medium",this.fullWidth=!1,this.hasBorder=!0,this.disabled=!1,this.isLoading=!1,this.type="button"}return Object.defineProperty(t.prototype,"_",{get:function(){return this.fullWidth},enumerable:!1,configurable:!0}),t.prototype.onClick=function(t){this.disabled&&t.stopPropagation()},t}();I.decorators=[{type:e.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:#dc3545;border-color:#dc3545;color:#fff}.redFilled:hover{background-color:#e04b59;border-color:#e04b59;color:#fff}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#d32535;border-color:#d32535}.redOutlined{background-color:#fff;border-color:#dc3545;color:#dc3545}.redOutlined:hover{background-color:#e04b59;border-color:#e04b59;color:#fff}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#d32535;border-color:#d32535}.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}"]}]}],I.propDecorators={variant:[{type:e.Input}],size:[{type:e.Input}],fullWidth:[{type:e.Input}],hasBorder:[{type:e.Input}],disabled:[{type:e.Input}],isLoading:[{type:e.Input}],type:[{type:e.Input}],_:[{type:e.HostBinding,args:["class._fullWidth"]}]};
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common"),require("@angular/forms"),require("lodash"),require("ngx-sortablejs"),require("@ng-select/ng-select"),require("date-fns"),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","date-fns","@angular/material/core","@angular/material/datepicker","@angular/material/form-field","@angular/material/input","@angular/material/button"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).klippa=t.klippa||{},t.klippa["ngx-enhancy-forms"]={}),t.ng.core,t.ng.common,t.ng.forms,t.lodash,t.ngxSortablejs,t.ngSelect,t.dateFns,t.ng.material.core,t.ng.material.datepicker,t.ng.material.formField,t.ng.material.input,t.ng.material.button)}(this,(function(t,e,n,o,r,i,a,l,s,p,d,c,u){"use strict";function h(t){return r.isString(t)&&t.length>0}function g(t){return null==t}function f(t){return null!=t}function m(t){return null!=t&&t.length>0}var b=Symbol("Not all fields are valid"),y=function(){};y.decorators=[{type:e.Directive,args:[{selector:"klp-sub-form"}]}],y.propDecorators={injectInto:[{type:e.Input}],at:[{type:e.Input}]};var v=function(){function t(t,e){this.parent=t,this.subFormPlaceholder=e,this.showErrorMessages=!0,this.activeControls=[]}return t.prototype.ngOnInit=function(){if(f(this.parent)&&f(this.subFormPlaceholder)){var t=this.subFormPlaceholder.injectInto,e=this.subFormPlaceholder.at;if(t instanceof o.FormArray){if("number"!=typeof e)throw new Error("cannot index FormArray with "+typeof e);t.setControl(e,this.formGroup)}else if(t instanceof o.FormGroup){if("string"!=typeof e)throw new Error("cannot index FormGroup with "+typeof e);t.setControl(e,this.formGroup)}}f(this.patchValueInterceptor)&&this.addSupportForPatchValueInterceptor()},t.prototype.ngOnDestroy=function(){var t=this;if(f(this.parent)&&f(this.subFormPlaceholder)){var e=this.subFormPlaceholder.injectInto,n=this.subFormPlaceholder.at;if(e instanceof o.FormArray){var r=e.controls.findIndex((function(e){return e===t.formGroup}));e.removeAt(r)}else if(e instanceof o.FormGroup){if("string"!=typeof n)throw new Error("cannot index FormGroup with "+typeof n);e.removeControl(n)}}},t.prototype.addSupportForPatchValueInterceptor=function(){var t=this,e=this.formGroup.patchValue;this.formGroup.patchValue=function(n,o){t.patchValueInterceptor(n).then((function(n){setTimeout((function(){e.call(t.formGroup,n,o)}))}))}},t.prototype.registerControl=function(t,e){this.activeControls.push({formControl:t,formElement:e}),this.parent&&this.parent.registerControl(t,e)},t.prototype.unregisterControl=function(t){this.activeControls=this.activeControls.filter((function(e){return e.formControl!==t})),this.parent&&this.parent.unregisterControl(t)},t.prototype.addFormGroupControls=function(t,e){var n=this;Object.values(t.controls).forEach((function(t){t instanceof o.FormGroup?n.addFormGroupControls(t,e):t instanceof o.FormArray?n.addFormArrayControls(t,e):t instanceof o.FormControl&&n.addFormControl(t,e)}))},t.prototype.addFormArrayControls=function(t,e){var n=this;t.controls.forEach((function(t){t instanceof o.FormGroup?n.addFormGroupControls(t,e):t instanceof o.FormArray?n.addFormArrayControls(t,e):t instanceof o.FormControl&&n.addFormControl(t,e)}))},t.prototype.getAllFormControls=function(){var t=[];return this.addFormGroupControls(this.formGroup,t),t},t.prototype.addFormControl=function(t,e){e.push(t)},t.prototype.disableInactiveFormControl=function(t){this.activeControls.some((function(e){return e.formControl===t}))||t.disable()},t.prototype.trySubmit=function(){var t,e,n=this;this.formGroup.markAllAsTouched();var o=this.getAllFormControls(),r=o.map((function(t){return{control:t,disabled:t.disabled}}));o.forEach((function(t){return n.disableInactiveFormControl(t)})),o.forEach((function(t){return t.updateValueAndValidity()}));var i=this.formGroup.value;return this.formGroup.valid?(this.setDisabledStatesForAllControls(r),Promise.resolve(i)):(null===(e=null===(t=this.activeControls.find((function(t){return!t.formControl.valid})))||void 0===t?void 0:t.formElement)||void 0===e||e.scrollTo(),this.setDisabledStatesForAllControls(r),Promise.reject(b))},t.prototype.setDisabledStatesForAllControls=function(t){t.forEach((function(t){t.disabled?t.control.disable():t.control.enable()}))},t}();v.decorators=[{type:e.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}"]}]}],v.ctorParameters=function(){return[{type:v,decorators:[{type:e.SkipSelf},{type:e.Optional}]},{type:y,decorators:[{type:e.Optional}]}]},v.propDecorators={showErrorMessages:[{type:e.Input}],formGroup:[{type:e.Input}],patchValueInterceptor:[{type:e.Input}]};var x=new e.InjectionToken("form.error.messages"),C={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"},w=function(){function t(t,e){this.parent=t,this.customMessages=e,this.direction="horizontal",this.captionSpacing="percentages",this.spaceDistribution="40-60",this.swapInputAndCaption=!1,this.errorMessages=C,this.customErrorHandlers=[]}return t.prototype.shouldShowErrorMessages=function(){var t;return!1!==(null===(t=this.parent)||void 0===t?void 0:t.showErrorMessages)},t.prototype.substituteParameters=function(t,e){return Object.keys(e).reduce((function(t,n){return t.replace("%"+n+"%",e[n])}),t)},t.prototype.registerControl=function(t,e){void 0===e&&(e=null),this.attachedControl=t,this.parent.registerControl(t,this),this.input=e},t.prototype.unregisterControl=function(t){this.attachedControl=null,this.parent.unregisterControl(t)},t.prototype.getAttachedControl=function(){return this.attachedControl},t.prototype.registerErrorHandler=function(t,e){this.customErrorHandlers.push({error:t,templateRef:e})},t.prototype.registerCaption=function(t){this.captionRef=t},t.prototype.getErrorToShow=function(){var t,e,n;return!0===(null===(t=this.attachedControl)||void 0===t?void 0:t.touched)&&(null===(e=this.attachedControl)||void 0===e?void 0:e.errors)?Object.keys(null===(n=this.attachedControl)||void 0===n?void 0:n.errors)[0]:null},t.prototype.getCustomErrorHandler=function(t){return this.customErrorHandlers.find((function(e){return e.error===t}))},t.prototype.showDefaultError=function(t){return this.getErrorToShow()===t&&!this.customErrorHandlers.some((function(e){return e.error===t}))},t.prototype.getScrollableParent=function(t){return null==t?null:t.scrollHeight>t.clientHeight?t:this.getScrollableParent(t.parentNode)},t.prototype.scrollTo=function(){var t;this.internalComponentRef.nativeElement.scrollIntoView(!0),null===(t=this.getScrollableParent(this.internalComponentRef.nativeElement))||void 0===t||t.scrollBy(0,-100)},t.prototype.isRequired=function(){return!!f(this.input)&&this.input.hasValidator("required")},t.prototype.getErrorMessage=function(t){var e,n,o;return null!==(o=null===(n=null===(e=this.customMessages)||void 0===e?void 0:e[t])||void 0===n?void 0:n.call(e))&&void 0!==o?o:this.errorMessages[t]},t}();w.decorators=[{type:e.Component,args:[{selector:"klp-form-element",template:'<ng-template #errorRef>\n\t<div *ngIf="shouldShowErrorMessages() && getErrorToShow()" class="errorContainer" [ngClass]="{hasCaption: caption || captionRef, \'d30-70\': spaceDistribution === \'30-70\'}">\n\t\t<div *ngIf="showDefaultError(\'min\')">{{substituteParameters(getErrorMessage("min"), {min: attachedControl.errors.min.min})}}</div>\n\t\t<div *ngIf="showDefaultError(\'max\')">{{substituteParameters(getErrorMessage("max"), {max: attachedControl.errors.max.max})}}</div>\n\t\t<div *ngIf="showDefaultError(\'required\')">{{getErrorMessage("required")}}</div>\n\t\t<div *ngIf="showDefaultError(\'email\')">{{getErrorMessage("email")}}</div>\n\t\t<div *ngIf="showDefaultError(\'minlength\')">{{substituteParameters(getErrorMessage("minLength"), {minLength: attachedControl.errors.minlength.requiredLength})}}</div>\n\t\t<div *ngIf="showDefaultError(\'maxlength\')">{{substituteParameters(getErrorMessage("maxLength"), {maxLength: attachedControl.errors.maxlength.requiredLength})}}</div>\n\t\t<div *ngIf="showDefaultError(\'pattern\')">{{getErrorMessage("pattern")}}</div>\n\t\t<div *ngIf="showDefaultError(\'MatchPassword\')">{{getErrorMessage("matchPassword")}}</div>\n\t\t<div *ngIf="showDefaultError(\'date\')">{{getErrorMessage("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\n<ng-container *ngIf="direction === \'horizontal\'" [ngTemplateOutlet]="errorRef"></ng-container>\n\n<div class="componentContainer" [ngClass]="{vertical: direction === \'vertical\', reverseOrder: swapInputAndCaption}" #internalComponentRef>\n\t<div class="caption" *ngIf="caption || captionRef" [ngClass]="{ hasErrors: getErrorToShow() && attachedControl.touched, percentageSpacing: captionSpacing === \'percentages\', \'d30-70\': spaceDistribution === \'30-70\' }">\n\t\t<div *ngIf="captionRef" class="captionRefContainer">\n\t\t\t<ng-container [ngTemplateOutlet]="captionRef"></ng-container>\n\t\t\t<div *ngIf="isRequired()">&nbsp;*</div>\n\t\t</div>\n\t\t<div *ngIf="!captionRef">{{caption}}<span *ngIf="isRequired()">&nbsp;*</span></div>\n\t</div>\n\t<ng-container *ngIf="direction === \'vertical\'" [ngTemplateOutlet]="errorRef"></ng-container>\n\t<div class="inputContainer" [ngClass]="{ percentageSpacing: captionSpacing === \'percentages\', \'d30-70\': spaceDistribution === \'30-70\' }">\n\t\t<ng-content></ng-content>\n\t</div>\n</div>\n',styles:[":host{display:block}.componentContainer{align-items:center;display:flex;min-height:42px}.componentContainer.reverseOrder{flex-direction:row-reverse;justify-content:flex-end}.componentContainer.vertical{display:block}.componentContainer.vertical .inputContainer{margin-top:.3125rem}.componentContainer.vertical .errorContainer{margin-left:0}.componentContainer.vertical .caption{padding-right:0}.captionRefContainer{display:flex}.caption{color:#515365;flex:0 0 auto;font-weight:700;padding-right:1.25rem}.caption.percentageSpacing{flex:0 0 40%}.caption.percentageSpacing.d30-70{flex-basis:30%}.caption.hasErrors{color:#ff8000}.inputContainer{flex:1}.inputContainer.percentageSpacing{flex:0 0 60%}.inputContainer.percentageSpacing.d30-70{flex-basis:70%}.errorContainer{color:#ff8000}.errorContainer.hasCaption{margin-left:40%}.errorContainer.hasCaption.d30-70{margin-left:30%}"]}]}],w.ctorParameters=function(){return[{type:v,decorators:[{type:e.Host},{type:e.Optional}]},{type:void 0,decorators:[{type:e.Inject,args:[x]},{type:e.Optional}]}]},w.propDecorators={caption:[{type:e.Input}],direction:[{type:e.Input}],captionSpacing:[{type:e.Input}],spaceDistribution:[{type:e.Input}],swapInputAndCaption:[{type:e.Input}],internalComponentRef:[{type:e.ViewChild,args:["internalComponentRef"]}]};var k=function(){function t(t,n){this.parent=t,this.controlContainer=n,this.changed=new Array,this.touched=new Array,this.disabled=!1,this.formControlName=null,this.formControl=null,this.onTouch=new e.EventEmitter,this.validators=[]}return t.prototype.ngOnInit=function(){var t,e,n,o,r=this;if(this.formControl)this.attachedFormControl=this.formControl;else if(h(this.formControlName)&&(this.attachedFormControl=null===(t=this.controlContainer)||void 0===t?void 0:t.control.get(this.formControlName),g(this.attachedFormControl)))throw new Error("Form element '"+this.formControlName+"' with caption '"+(null===(e=this.parent)||void 0===e?void 0:e.caption)+"' is not declared in your FormGroup.");if(this.attachedFormControl&&(this.disabled=this.attachedFormControl.disabled,this.attachedFormControl.statusChanges.subscribe((function(){r.disabled=r.attachedFormControl.disabled})),null===(n=this.parent)||void 0===n||n.registerControl(this.attachedFormControl,this),null===(o=this.attachedFormControl)||void 0===o?void 0:o.validator)){var i=this.attachedFormControl.validator({});f(i)?this.validators=Object.keys(i):this.validators=[]}},t.prototype.isInErrorState=function(){return this.attachedFormControl&&"INVALID"===this.attachedFormControl.status&&this.attachedFormControl.touched},t.prototype.ngOnDestroy=function(){var t;this.attachedFormControl&&(null===(t=this.parent)||void 0===t||t.unregisterControl(this.attachedFormControl))},t.prototype.touch=function(){this.touched.forEach((function(t){return t()}))},t.prototype.writeValue=function(t){this.innerValue=t},t.prototype.registerOnChange=function(t){this.changed.push(t)},t.prototype.registerOnTouched=function(t){this.touched.push(t)},t.prototype.setInnerValueAndNotify=function(t){this.innerValue=t,this.changed.forEach((function(e){return e(t)}))},t.prototype.resetToNull=function(){this.setInnerValueAndNotify(null)},t.prototype.hasValidator=function(t){return!!m(this.validators)&&this.validators.includes(t)},t}();k.decorators=[{type:e.Component,args:[{selector:"",template:""}]}],k.ctorParameters=function(){return[{type:w,decorators:[{type:e.Host},{type:e.Optional}]},{type:o.ControlContainer,decorators:[{type:e.Host},{type:e.Optional}]}]},k.propDecorators={disabled:[{type:e.Input}],formControlName:[{type:e.Input}],formControl:[{type:e.Input}],onTouch:[{type:e.Output}]};var I=function(){function t(){this.variant="white",this.size="medium",this.fullWidth=!1,this.hasBorder=!0,this.disabled=!1,this.isLoading=!1,this.type="button"}return Object.defineProperty(t.prototype,"_",{get:function(){return this.fullWidth},enumerable:!1,configurable:!0}),t.prototype.onClick=function(t){this.disabled&&t.stopPropagation()},t}();I.decorators=[{type:e.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:#dc3545;border-color:#dc3545;color:#fff}.redFilled:hover{background-color:#e04b59;border-color:#e04b59;color:#fff}.redFilled:focus{text-decoration:underline}.redFilled:active{background-color:#d32535;border-color:#d32535}.redOutlined{background-color:#fff;border-color:#dc3545;color:#dc3545}.redOutlined:hover{background-color:#e04b59;border-color:#e04b59;color:#fff}.redOutlined:focus{text-decoration:underline}.redOutlined:active{background-color:#d32535;border-color:#d32535}.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}"]}]}],I.propDecorators={variant:[{type:e.Input}],size:[{type:e.Input}],fullWidth:[{type:e.Input}],hasBorder:[{type:e.Input}],disabled:[{type:e.Input}],isLoading:[{type:e.Input}],type:[{type:e.Input}],_:[{type:e.HostBinding,args:["class._fullWidth"]}]};
 /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.