@klippa/ngx-enhancy-forms 5.5.2 → 7.0.1
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.
- package/bundles/klippa-ngx-enhancy-forms.umd.js +7 -7
- package/bundles/klippa-ngx-enhancy-forms.umd.min.js +2 -2
- package/bundles/klippa-ngx-enhancy-forms.umd.min.js.map +1 -1
- package/esm2015/lib/elements/button/button.component.js +1 -1
- package/esm2015/lib/elements/email/email-input.component.js +1 -1
- package/esm2015/lib/elements/number-input/number-input.component.js +1 -1
- package/esm2015/lib/elements/password-field/password-field.component.js +1 -1
- package/esm2015/lib/elements/select/select.component.js +1 -1
- package/esm2015/lib/elements/text-input/text-input.component.js +1 -1
- package/esm2015/lib/form/form-element/form-element.component.js +1 -1
- package/fesm2015/klippa-ngx-enhancy-forms.js +7 -7
- package/klippa-ngx-enhancy-forms.metadata.json +1 -1
- package/package.json +1 -1
|
@@ -309,7 +309,7 @@
|
|
|
309
309
|
{ type: core.Component, args: [{
|
|
310
310
|
selector: 'klp-form-element',
|
|
311
311
|
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()\"> *</div>\n\t\t</div>\n\t\t<div *ngIf=\"!captionRef\">{{caption}}<span *ngIf=\"isRequired()\"> *</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",
|
|
312
|
-
styles: [":host{display:block}.componentContainer{align-items:center;display:flex}.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%}"]
|
|
312
|
+
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%}"]
|
|
313
313
|
},] }
|
|
314
314
|
];
|
|
315
315
|
FormElementComponent.ctorParameters = function () { return [
|
|
@@ -457,7 +457,7 @@
|
|
|
457
457
|
{ type: core.Component, args: [{
|
|
458
458
|
selector: 'klp-form-button',
|
|
459
459
|
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",
|
|
460
|
-
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:#
|
|
460
|
+
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}"]
|
|
461
461
|
},] }
|
|
462
462
|
];
|
|
463
463
|
ButtonComponent.propDecorators = {
|
|
@@ -825,7 +825,7 @@
|
|
|
825
825
|
selector: 'klp-form-email-input',
|
|
826
826
|
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",
|
|
827
827
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }],
|
|
828
|
-
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:#
|
|
828
|
+
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:#f6cdd1;border-color:#dc3545}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]
|
|
829
829
|
},] }
|
|
830
830
|
];
|
|
831
831
|
EmailInputComponent.propDecorators = {
|
|
@@ -863,7 +863,7 @@
|
|
|
863
863
|
selector: 'klp-form-number-input',
|
|
864
864
|
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\t[ngClass]=\"{showErrors: isInErrorState()}\"\n/>\n",
|
|
865
865
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }],
|
|
866
|
-
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:#
|
|
866
|
+
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:#f6cdd1;border-color:#dc3545}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]
|
|
867
867
|
},] }
|
|
868
868
|
];
|
|
869
869
|
NumberInputComponent.propDecorators = {
|
|
@@ -885,7 +885,7 @@
|
|
|
885
885
|
selector: 'klp-form-password-field',
|
|
886
886
|
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]=\"isPasswordConfirm ? 'Confirm password': 'Password'\"\n\t(blur)=\"touch()\"\n/>\n",
|
|
887
887
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }],
|
|
888
|
-
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:#
|
|
888
|
+
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:#f6cdd1;border-color:#dc3545}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]
|
|
889
889
|
},] }
|
|
890
890
|
];
|
|
891
891
|
PasswordFieldComponent.propDecorators = {
|
|
@@ -934,7 +934,7 @@
|
|
|
934
934
|
selector: 'klp-form-select',
|
|
935
935
|
template: "<ng-select\n\t[placeholder]=\"getTranslation('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\t(input)=\"onTextInput($event.target.value)\"\n\t[selectOnTab]=\"true\"\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\t<ng-container *ngIf=\"multiple && multipleDisplayedAsAmount && innerValue?.length > 1\">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class=\"ng-value\">\n\t\t\t\t<span class=\"ng-value-label\">{{getTranslation('amountSelected', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf=\"footerElement\">\n\t\t<ng-container [ngTemplateOutlet]=\"footerElement\"></ng-container>\n\t</ng-template>\n</ng-select>\n",
|
|
936
936
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }],
|
|
937
|
-
styles: [":host{display:block}ng-select.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 .ng-value{background-color:#e7faee;border:1px solid #93e8b3;border-radius:2px;display:flex;font-size:.9em;margin-bottom:3px;margin-right:5px;margin-top:3px;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:#
|
|
937
|
+
styles: [":host{display:block}ng-select.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 .ng-value{background-color:#e7faee;border:1px solid #93e8b3;border-radius:2px;display:flex;font-size:.9em;margin-bottom:3px;margin-right:5px;margin-top:3px;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:#dc3545}: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}"]
|
|
938
938
|
},] }
|
|
939
939
|
];
|
|
940
940
|
SelectComponent.ctorParameters = function () { return [
|
|
@@ -1053,7 +1053,7 @@
|
|
|
1053
1053
|
selector: 'klp-form-text-input',
|
|
1054
1054
|
template: "<div class=\"componentContainer\">\n\t<ng-container *ngIf=\"icon?.length > 0\">\n\t\t<i class=\"ti-search\" *ngIf=\"icon === 'search'\"></i>\n\t</ng-container>\n\t<input\n\t\t[type]=\"type\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable}\"\n\t\t[(ngModel)]=\"innerValue\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch()\"\n\t\t[disabled]='disabled'\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n",
|
|
1055
1055
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }],
|
|
1056
|
-
styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{left:.625rem;position:absolute;top:14px}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;display:block;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:#
|
|
1056
|
+
styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{left:.625rem;position:absolute;top:14px}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;display:block;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:#f6cdd1;border-color:#dc3545}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}.clearIcon{cursor:pointer;font-size:18px;position:absolute;right:.625rem;top:7px}.showErrors{border-color:#ff8000}"]
|
|
1057
1057
|
},] }
|
|
1058
1058
|
];
|
|
1059
1059
|
TextInputComponent.propDecorators = {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
!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()"> *</div>\n\t\t</div>\n\t\t<div *ngIf="!captionRef">{{caption}}<span *ngIf="isRequired()"> *</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}.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:#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}"]}]}],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"]}]};
|
|
1
|
+
!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()"> *</div>\n\t\t</div>\n\t\t<div *ngIf="!captionRef">{{caption}}<span *ngIf="isRequired()"> *</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"]}]};
|
|
2
2
|
/*! *****************************************************************************
|
|
3
3
|
Copyright (c) Microsoft Corporation.
|
|
4
4
|
|
|
@@ -13,5 +13,5 @@
|
|
|
13
13
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
14
14
|
PERFORMANCE OF THIS SOFTWARE.
|
|
15
15
|
***************************************************************************** */
|
|
16
|
-
var D=function(t,e){return D=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},D(t,e)};function E(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}D(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}Object.create;function M(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var o,r,i=n.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(o=i.next()).done;)a.push(o.value)}catch(t){r={error:t}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return a}function S(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(M(arguments[e]));return t}Object.create;var A=function(t){function e(){var e=t.apply(this,S(arguments))||this;return e.renderUndefinedAsIndeterminate=!1,e}return E(e,t),e}(k);A.decorators=[{type:e.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 === true" 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\t\t\t<svg *ngIf="renderUndefinedAsIndeterminate && innerValue === undefined" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg">\n\t\t\t\t<path d="m0.5 2.11665 3.2333 0" stroke="currentColor" fill="none" stroke-width=".4646px" />\n\t\t\t</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:A,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}"]}]}],A.propDecorators={caption:[{type:e.Input}],renderUndefinedAsIndeterminate:[{type:e.Input}]};var F=function(t){function e(){var e=t.apply(this,S(arguments))||this;return e.placeholder="",e}return E(e,t),e}(k);F.decorators=[{type:e.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:F,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}"]}]}],F.propDecorators={placeholder:[{type:e.Input}]};var O=function(){this.variant="3dots",this.size="medium"};O.decorators=[{type:e.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:e.Input}],size:[{type:e.Input}]};var T=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return E(e,t),e}(k);T.decorators=[{type:e.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\t[ngClass]="{showErrors: isInErrorState()}"\n/>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:T,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}"]}]}],T.propDecorators={placeholder:[{type:e.Input}]};var V=function(t){function e(){var e=t.apply(this,S(arguments))||this;return e.placeholder="Password",e.isPasswordConfirm=!1,e}return E(e,t),e}(k);V.decorators=[{type:e.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]="isPasswordConfirm ? \'Confirm password\': \'Password\'"\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:e.Input}],isPasswordConfirm:[{type:e.Input}]};var N=new e.InjectionToken("klp.form.select.translations"),P=function(t){function n(n,o,r){var i=t.call(this,n,o)||this;return i.parent=n,i.controlContainer=o,i.translations=r,i.multiple=!1,i.multipleDisplayedAsAmount=!1,i.clearable=!0,i.onSearch=new e.EventEmitter,i}return E(n,t),n.prototype.onTextInput=function(t){this.currentQueryString=t,this.onSearch.emit(t)},n.prototype.getDefaultTranslation=function(t){switch(t){case"placeholder":return function(){return"Pick an option"};case"amountSelected":return function(t){return t+" selected"}}},n.prototype.getTranslation=function(t,e){var n,o,r;return void 0===e&&(e=null),"placeholder"===t&&h(this.placeholder)?this.placeholder:null!==(r=null===(o=null===(n=this.translations)||void 0===n?void 0:n[t])||void 0===o?void 0:o.call(n,e))&&void 0!==r?r:this.getDefaultTranslation(t)(e)},n}(k);P.decorators=[{type:e.Component,args:[{selector:"klp-form-select",template:'<ng-select\n\t[placeholder]="getTranslation(\'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\t(input)="onTextInput($event.target.value)"\n\t[selectOnTab]="true"\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\t<ng-container *ngIf="multiple && multipleDisplayedAsAmount && innerValue?.length > 1">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class="ng-value">\n\t\t\t\t<span class="ng-value-label">{{getTranslation(\'amountSelected\', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf="footerElement">\n\t\t<ng-container [ngTemplateOutlet]="footerElement"></ng-container>\n\t</ng-template>\n</ng-select>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:P,multi:!0}],styles:[":host{display:block}ng-select.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 .ng-value{background-color:#e7faee;border:1px solid #93e8b3;border-radius:2px;display:flex;font-size:.9em;margin-bottom:3px;margin-right:5px;margin-top:3px;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}"]}]}],P.ctorParameters=function(){return[{type:w,decorators:[{type:e.Optional},{type:e.Host}]},{type:o.ControlContainer,decorators:[{type:e.Optional},{type:e.Host}]},{type:void 0,decorators:[{type:e.Inject,args:[N]},{type:e.Optional}]}]},P.propDecorators={placeholder:[{type:e.Input}],options:[{type:e.Input}],multiple:[{type:e.Input}],multipleDisplayedAsAmount:[{type:e.Input}],clearable:[{type:e.Input}],dropdownPosition:[{type:e.Input}],customSearchFn:[{type:e.Input}],footerElement:[{type:e.Input}],onSearch:[{type:e.Output}]};var z=function(){};z.decorators=[{type:e.Component,args:[{selector:"klp-select-footer",template:'<div class="componentContainer">\n\t<span class="prefix">{{prefix}}</span>\n\t<span class="text">{{text}}</span>\n</div>\n',styles:[":host{display:block}.componentContainer{cursor:pointer;padding:6px 10px}.componentContainer:hover{background:#e7faee}.prefix{font-size:80%;padding-right:.625rem}"]}]}],z.propDecorators={prefix:[{type:e.Input}],text:[{type:e.Input}]};var R=function(t){function e(){var e=t.apply(this,S(arguments))||this;return e.sortableItemSize="lg",e.useCustomScroll=!1,e.scrollInterval=null,e.itemsOrderChanged=function(){e.setInnerValueAndNotify(e.innerValue)},e.onItemDrag=function(t){t.relatedRect.top<100?e.scrollPage(100):e.stopScrolling()},e.onEnd=function(){e.stopScrolling()},e}return E(e,t),e.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.useCustomScroll?this.sortablejsOptions={onUpdate:this.itemsOrderChanged,onMove:this.onItemDrag,onEnd:this.onEnd}:this.sortablejsOptions={onUpdate:this.itemsOrderChanged}},e.prototype.scrollPage=function(t){var e=this;f(this.scrollInterval)||(this.scrollInterval=setInterval((function(){window.scroll({top:document.scrollingElement.scrollTop-t,behavior:"smooth"}),document.scrollingElement.scrollTop<=100&&e.stopScrolling()}),100))},e.prototype.stopScrolling=function(){clearInterval(this.scrollInterval),this.scrollInterval=null},e}(k);R.decorators=[{type:e.Component,args:[{selector:"klp-form-sortable-items",template:'<ng-template #listItem>\n\t<li *ngFor="let item of innerValue; index as index"\n\t\t\tclass="sortableItem"\n\t\t\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\t\t[sortablejs]="innerValue"\n\t\t[sortablejsOptions]="sortablejsOptions"\n\t\tclass="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:R,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}"]}]}],R.propDecorators={template:[{type:e.ContentChild,args:[e.TemplateRef]}],sortableItemSize:[{type:e.Input}],useCustomScroll:[{type:e.Input}]};var _=function(t){function e(){var e=t.apply(this,S(arguments))||this;return e.type="text",e.clearable=!1,e}return E(e,t),e}(k);_.decorators=[{type:e.Component,args:[{selector:"klp-form-text-input",template:'<div class="componentContainer">\n\t<ng-container *ngIf="icon?.length > 0">\n\t\t<i class="ti-search" *ngIf="icon === \'search\'"></i>\n\t</ng-container>\n\t<input\n\t\t[type]="type"\n\t\t[ngClass]="{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable}"\n\t\t[(ngModel)]="innerValue"\n\t\t(input)="setInnerValueAndNotify($event.target.value)"\n\t\t[placeholder]="placeholder ? placeholder : \'\'"\n\t\t(blur)="touch()"\n\t\t[disabled]=\'disabled\'\n\t/>\n\t<div class="clearIcon" *ngIf="clearable && innerValue?.length > 0" (click)="resetToNull()">×</div>\n</div>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:_,multi:!0}],styles:[":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{left:.625rem;position:absolute;top:14px}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;display:block;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}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}.clearIcon{cursor:pointer;font-size:18px;position:absolute;right:.625rem;top:7px}.showErrors{border-color:#ff8000}"]}]}],_.propDecorators={placeholder:[{type:e.Input}],type:[{type:e.Input}],clearable:[{type:e.Input}],icon:[{type:e.Input}]};var L=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return E(e,t),e}(k);L.decorators=[{type:e.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:L,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 j=function(){function t(t){this.parent=t}return t.prototype.ngOnInit=function(){var t=this;setTimeout((function(){var e=t.parent.getAttachedControl();if(t.parent.registerCaption(t.contentRef),g(e))throw new Error("You added a Form Caption component without an attached Form Control")}))},t}();j.decorators=[{type:e.Component,args:[{selector:"klp-form-caption",template:"<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n",styles:[":host{display:block}"]}]}],j.ctorParameters=function(){return[{type:w,decorators:[{type:e.Host},{type:e.Optional}]}]},j.propDecorators={contentRef:[{type:e.ViewChild,args:["contentRef"]}]};var G=function(){function t(t){this.parent=t,this.showError=!1}return t.prototype.ngOnInit=function(){var t=this;setTimeout((function(){var e=t.parent.getAttachedControl();if(t.parent.registerErrorHandler(t.error,t.contentRef),g(e))throw new Error("You added a Form Error component without an attached Form Control")}))},t}();G.decorators=[{type:e.Component,args:[{selector:"klp-form-error",template:"<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n",styles:[":host{display:block}"]}]}],G.ctorParameters=function(){return[{type:w,decorators:[{type:e.Host},{type:e.Optional}]}]},G.propDecorators={error:[{type:e.Input}],contentRef:[{type:e.ViewChild,args:["contentRef"]}]};var H=function(){function t(t){this.parentForm=t,this.isLoading=!1,this.fullWidth=!1,this.variant="greenFilled"}return Object.defineProperty(t.prototype,"_",{get:function(){return this.fullWidth},enumerable:!1,configurable:!0}),t.prototype.submitForm=function(){var t=this;this.parentForm.trySubmit().then((function(e){t.isLoading=!0;var n=t.submitCallback(e);if(g(n))throw new Error("No promise is returned in your submit function.");return n.then((function(){return t.isLoading=!1})).catch((function(e){throw t.isLoading=!1,e}))})).catch((function(t){if(t!==b)throw t}))},t}();H.decorators=[{type:e.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%}"]}]}],H.ctorParameters=function(){return[{type:v,decorators:[{type:e.Host},{type:e.Optional}]}]},H.propDecorators={isLoading:[{type:e.Input}],fullWidth:[{type:e.Input}],variant:[{type:e.Input}],submitCallback:[{type:e.Input}],_:[{type:e.HostBinding,args:["class._fullWidth"]}]};var B=function(t){function e(e,n){var o=t.call(this,e,n)||this;return o.parent=e,o.controlContainer=n,o.multiple=!1,o}return E(e,t),e.prototype.writeValue=function(e){this.multiple?Array.isArray(e)?t.prototype.writeValue.call(this,e.filter(f)):t.prototype.writeValue.call(this,[e].filter(f)):Array.isArray(e)?t.prototype.writeValue.call(this,e[0]):t.prototype.writeValue.call(this,e)},e.prototype.setInnerValueAndNotify=function(e){this.multiple?Array.isArray(e)?t.prototype.setInnerValueAndNotify.call(this,e.filter(f)):t.prototype.setInnerValueAndNotify.call(this,[e].filter(f)):Array.isArray(e)?t.prototype.setInnerValueAndNotify.call(this,e[0]):t.prototype.setInnerValueAndNotify.call(this,e)},e}(k);B.decorators=[{type:e.Component,args:[{selector:"",template:""}]}],B.ctorParameters=function(){return[{type:w,decorators:[{type:e.Host},{type:e.Optional}]},{type:o.ControlContainer,decorators:[{type:e.Host},{type:e.Optional}]}]},B.propDecorators={multiple:[{type:e.Input}]};var q="--invalid_date--";var U=new e.InjectionToken("klp.form.date.translations"),W=function(t){function e(e,n,o){var r=t.call(this,e,n)||this;return r.parent=e,r.controlContainer=n,r.translations=o,r.minDate=void 0,r.maxDate=void 0,r.sameMonthOnly=!1,r.format="dd-MM-yyyy",r.clearable=!1,r}return E(e,t),e.prototype.writeValue=function(e){e===q?t.prototype.writeValue.call(this,q):g(e)?(this.dateValue=null,t.prototype.writeValue.call(this,null)):(Array.isArray(e)?this.dateValue=e.map((function(t){return l.parse(t,"yyyy-MM-dd",new Date)})):this.dateValue=l.parse(e,"yyyy-MM-dd",new Date),t.prototype.writeValue.call(this,e))},e.prototype.dateChanged=function(t){t===q?this.setInnerValueAndNotify(q):g(t)?(this.dateValue=null,this.setInnerValueAndNotify(null)):(this.dateValue=t,Array.isArray(t)?this.setInnerValueAndNotify(t.map((function(t){return l.format(t,"yyyy-MM-dd")}))):this.setInnerValueAndNotify(l.format(t,"yyyy-MM-dd")))},e.prototype.getDefaultTranslation=function(t){if("placeholder"===t)return function(){return"Select date"}},e.prototype.getTranslation=function(t,e){var n,o,r;return void 0===e&&(e=null),"placeholder"===t&&this.multiple?"":"placeholder"===t&&h(this.placeholder)?this.placeholder:null!==(r=null===(o=null===(n=this.translations)||void 0===n?void 0:n[t])||void 0===o?void 0:o.call(n,e))&&void 0!==r?r:this.getDefaultTranslation(t)(e)},e}(B);W.decorators=[{type:e.Component,args:[{selector:"klp-form-date-picker",template:'<div class="componentContainer" [ngClass]="{showErrors: isInErrorState()}">\n\t<klp-form-date-time-picker\n\t\t[multiple]="multiple"\n\t\t[disabled]="disabled"\n\t\t[(ngModel)]="dateValue"\n\t\t(ngModelChange)="dateChanged($event)"\n\t\t[minDate]="minDate"\n\t\t[maxDate]="maxDate"\n\t\t[sameMonthOnly]="sameMonthOnly"\n\t\t[format]="format"\n\t\t[placeholder]="getTranslation(\'placeholder\')"\n\t\t[clearable]="clearable"\n\t\t[showTimeInput]="false"\n\t\t(onTouch)="touch()"\n\t></klp-form-date-time-picker>\n</div>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:W,multi:!0}],styles:[":host{display:block}.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .clearButton,.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .dateContainer{border-color:#ff8000}"]}]}],W.ctorParameters=function(){return[{type:w,decorators:[{type:e.Host},{type:e.Optional}]},{type:o.ControlContainer,decorators:[{type:e.Host},{type:e.Optional}]},{type:void 0,decorators:[{type:e.Inject,args:[U]},{type:e.Optional}]}]},W.propDecorators={minDate:[{type:e.Input}],maxDate:[{type:e.Input}],sameMonthOnly:[{type:e.Input}],format:[{type:e.Input}],placeholder:[{type:e.Input}],clearable:[{type:e.Input}]};var $=new e.InjectionToken("klp.form.date.formats"),K=new e.InjectionToken("klp.form.dateTime.translations"),Y=new e.InjectionToken("klp.form.dateTime.locale");function Q(t,e){var n;return null!==(n=null==e?void 0:e(t.format))&&void 0!==n?n:s.MAT_NATIVE_DATE_FORMATS}var J=function(t){function e(e,n,o,r,i,a){var l=t.call(this,e,n)||this;return l.parent=e,l.controlContainer=n,l.translations=o,l.datePickerLocale=r,l.dateAdapter=i,l.cdr=a,l.minDate=void 0,l.maxDate=void 0,l.sameMonthOnly=!1,l.format="dd-MM-yyyy",l.clearable=!1,l.showTimeInput=!0,l.invalidTimeAsMidnight=!1,l.openPickerOnDate=null,l.minDateStartOfDay=void 0,l.maxDateEndOfDay=void 0,l.selectedDates=[],l.dateTouched=!1,l.hoursTouched=!1,l.minutesTouched=!1,l.isSelected=function(t){return l.multiple&&l.selectedDates.some((function(e){return e.getTime()===t.getTime()}))?"selected":""},l.filterDates=function(t){return!l.disabled},f(r)&&i.setLocale(r()),l}return E(e,t),e.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.multiple&&(this.placeholder="",this.showTimeInput=!1)},e.prototype.ngAfterViewInit=function(){this.multiple&&(this.datePickingClosingFn=this.datePickerRef.close)},e.prototype.ngOnChanges=function(t){t.minDate&&this.determineMinAndMaxDates(),t.maxDate&&this.determineMinAndMaxDates()},e.prototype.setMinDate=function(t){t?(this.minDateStartOfDay=new Date(t),this.minDateStartOfDay.setHours(0,0,0,0)):this.minDateStartOfDay=void 0},e.prototype.setMaxDate=function(t){t?(this.maxDateEndOfDay=new Date(t),this.maxDateEndOfDay.setHours(23,59,59,999)):this.maxDateEndOfDay=void 0},e.prototype.getSelectedMonths=function(){return(t=this.selectedDates.map((function(t){return l.format(t,"MMMM")})),t.filter((function(e,n){return n===t.findIndex((function(t){return t===e}))}))).length;var t},e.prototype.dateChanged=function(t){var e=this,n=t.value;if(this.multiple){this.datePickerRef.close=function(){},this.selectedDates.some((function(t){return t.getTime()===n.getTime()}))?this.selectedDates=this.selectedDates.filter((function(t){return t.getTime()!==n.getTime()})):this.selectedDates=S(this.selectedDates,[n]),this.cdr.detectChanges(),this.valueForMaterialDatePicker=null;var o=this.minDateStartOfDay;this.minDateStartOfDay=new Date(0),this.cdr.detectChanges(),this.minDateStartOfDay=o,this.sameMonthOnly&&(this.selectedDates.length>=2&&(n<l.startOfMonth(this.selectedDates[0])||n>l.endOfMonth(this.selectedDates[0]))&&(this.selectedDates=[n]),this.determineMinAndMaxDates()),this.setInnerValueAndNotify(this.selectedDates),setTimeout((function(){e.datePickerRef.close=e.datePickingClosingFn}))}else this.notifyNewDate()},e.prototype.determineMinAndMaxDates=function(){this.sameMonthOnly&&this.selectedDates.length>=2?(this.setMinDate(l.startOfMonth(this.selectedDates[0])),this.setMaxDate(l.endOfMonth(this.selectedDates[0]))):(this.setMinDate(this.minDate),this.setMaxDate(this.maxDate))},e.prototype.notifyNewDate=function(){var t=this.nativeInputRef.nativeElement.value,e=Number(this.hours),n=Number(this.minutes);if(!this.showTimeInput){if(!h(t))return void this.setInnerValueAndNotify(null);if(this.valueForMaterialDatePicker instanceof Date)return void this.setInnerValueAndNotify(this.valueForMaterialDatePicker)}if(h(t)||h(this.hours)||h(this.minutes))if(h(this.hours)&&Number.isFinite(e)&&e>=0&&e<=23&&h(this.minutes)&&Number.isFinite(n)&&n>=0&&n<=59&&this.valueForMaterialDatePicker instanceof Date){var o=new Date(this.valueForMaterialDatePicker.setHours(e)),r=new Date(o.setMinutes(n));this.setInnerValueAndNotify(r)}else this.invalidTimeAsMidnight&&this.valueForMaterialDatePicker instanceof Date?this.setInnerValueAndNotify(this.valueForMaterialDatePicker):this.setInnerValueAndNotify(q);else this.setInnerValueAndNotify(null)},e.prototype.writeValue=function(e){t.prototype.writeValue.call(this,e),Array.isArray(e)?(this.selectedDates=e,this.determineMinAndMaxDates(),this.valueForMaterialDatePicker=null,m(e)&&(this.openPickerOnDate=this.selectedDates[0])):(this.valueForMaterialDatePicker=e===q?null:e,e instanceof Date?(this.hours=String(e.getHours()),this.minutes=String(e.getMinutes()),this.formatTime(),this.openPickerOnDate=e):(this.hours="",this.minutes="",this.openPickerOnDate=null))},e.prototype.nativeValueChanged=function(){this.datePickerRef.opened&&this.datePickerRef.close(),this.notifyNewDate()},e.prototype.resetToNull=function(){this.setInnerValueAndNotify(null),this.valueForMaterialDatePicker=null,this.nativeInputRef.nativeElement.value=null,this.hours="",this.minutes="",this.selectedDates=[]},e.prototype.formatTime=function(){Number.isFinite(Number(this.hours))&&1===this.hours.length&&(this.hours="0"+this.hours),Number.isFinite(Number(this.minutes))&&1===this.minutes.length&&(this.minutes="0"+this.minutes)},e.prototype.touchDate=function(){this.dateTouched=!0,this.determineAllTouched()},e.prototype.touchHours=function(){this.hoursTouched=!0,this.determineAllTouched()},e.prototype.touchMinutes=function(){this.minutesTouched=!0,this.determineAllTouched()},e.prototype.determineAllTouched=function(){(this.dateTouched&&this.hoursTouched&&this.minutesTouched||this.dateTouched&&!this.showTimeInput)&&this.touch()},e.prototype.getDefaultTranslation=function(t){switch(t){case"placeholder":return function(){return"Select date"};case"selectDays":return function(){return"Select day(s)"};case"selectedDate":return function(t){return t.toLocaleDateString()};case"daysSelected":return function(t){return t+" days selected"};case"selectedInMonth":return function(t){return" in "+l.format(t,"MMMM")}}},e.prototype.getTranslation=function(t,e){var n,o,r;return void 0===e&&(e=null),"placeholder"===t&&this.multiple?"":"placeholder"===t&&h(this.placeholder)?this.placeholder:null!==(r=null===(o=null===(n=this.translations)||void 0===n?void 0:n[t])||void 0===o?void 0:o.call(n,e))&&void 0!==r?r:this.getDefaultTranslation(t)(e)},e}(B);J.decorators=[{type:e.Component,args:[{selector:"klp-form-date-time-picker",template:'<div class="componentContainer" [ngClass]="{showErrors: isInErrorState()}">\n\t<div class="dateContainer" [ngClass]="{noRightBorder: !showTimeInput && clearable && !disabled, disabled: disabled}">\n\t\t<mat-form-field floatLabel="never">\n\t\t\t<div *ngIf="multiple" class="daysSelectedCaption" (click)="picker.open()" [ngClass]="{disabled: disabled}">\n\t\t\t\t<ng-container *ngIf="selectedDates.length >= 2">\n\t\t\t\t\t<span>{{getTranslation(\'daysSelected\', selectedDates.length)}}</span>\n\t\t\t\t\t<span *ngIf="getSelectedMonths() === 1">{{getTranslation(\'selectedInMonth\', selectedDates[0])}}</span>\n\t\t\t\t</ng-container>\n\t\t\t\t<span *ngIf="selectedDates.length === 1">{{getTranslation(\'selectedDate\', selectedDates[0])}}</span>\n\t\t\t\t<span *ngIf="selectedDates.length === 0" class="placeholderForMultipleSelection">{{getTranslation(\'selectDays\')}}</span>\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#nativeInput\n\t\t\t\tmatInput\n\t\t\t\t[matDatepicker]="picker"\n\t\t\t\t[matDatepickerFilter]="filterDates"\n\t\t\t\t[(ngModel)]="valueForMaterialDatePicker"\n\t\t\t\t(dateInput)="dateChanged($event)"\n\t\t\t\t(input)="nativeValueChanged()"\n\t\t\t\t[min]="minDateStartOfDay"\n\t\t\t\t[max]="maxDateEndOfDay"\n\t\t\t\t[placeholder]="getTranslation(\'placeholder\')"\n\t\t\t\t(click)="picker.open()"\n\t\t\t\t(blur)="touchDate()"\n\t\t\t\t[ngClass]="{inputForMultipleDays: multiple}"\n\t\t\t>\n\t\t\t<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>\n\t\t\t<mat-datepicker\n\t\t\t\t#picker\n\t\t\t\t[dateClass]="isSelected"\n\t\t\t\t[startAt]="openPickerOnDate"\n\t\t\t></mat-datepicker>\n\t\t</mat-form-field>\n\t</div>\n\t<div class="timeContainer" *ngIf="showTimeInput" [ngClass]="{disabled: disabled}">\n\t\t<input maxlength="2" placeholder="__" [disabled]="disabled" [(ngModel)]="hours" (ngModelChange)="notifyNewDate()" (blur)="formatTime(); touchHours()">\n\t\t<div class="divider">:</div>\n\t\t<input maxlength="2" placeholder="__" [disabled]="disabled" [(ngModel)]="minutes" (ngModelChange)="notifyNewDate()" (blur)="formatTime(); touchMinutes()">\n\t</div>\n\t<button *ngIf="clearable && !disabled" class="clearButton" (click)="resetToNull()" [ngClass]="{withoutSpacing: !showTimeInput}">×</button>\n</div>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:J,multi:!0},{provide:s.MAT_DATE_FORMATS,deps:[J,[new e.Optional,$]],useFactory:Q}],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:0}:host ::ng-deep .mat-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .mat-form-field-infix{border-top:none;width:auto}: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}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}.componentContainer{border-radius:2px;color:#888da8;display:flex;position:relative}.componentContainer .placeholderForMultipleSelection{color:#adadad}.componentContainer.showErrors .clearButton.withoutSpacing,.componentContainer.showErrors .dateContainer,.componentContainer.showErrors .timeContainer{border-color:#ff8000}.componentContainer .clearButton{align-items:center;background:#fff;border:1px solid #e6ecf5;color:#7b7b7b;display:flex;flex:0 0 auto;font-size:18px;margin-left:1.25rem;padding:6px 14px}.componentContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .clearButton:disabled{background:#f9f9f9;border:1px solid #e6ecf5}.componentContainer .dateContainer{background:#fff;border:1px solid #e6ecf5;flex:1 1 auto;padding:6px}.componentContainer .dateContainer.noRightBorder{border-right:none}.componentContainer .dateContainer.disabled{background:#f9f9f9}.componentContainer .timeContainer{align-items:center;background:#fff;border:1px solid #e6ecf5;display:flex;flex:0 0 auto;margin-left:1.25rem;padding:6px .625rem}.componentContainer .timeContainer.disabled{background:#f9f9f9}.componentContainer .timeContainer input{border:none;color:#888da8;padding:0;text-align:center;width:20px}.componentContainer .timeContainer input::-moz-placeholder{color:#adadad}.componentContainer .timeContainer input:-ms-input-placeholder{color:#adadad}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}"]}]}],J.ctorParameters=function(){return[{type:w,decorators:[{type:e.Host},{type:e.Optional}]},{type:o.ControlContainer,decorators:[{type:e.Host},{type:e.Optional}]},{type:void 0,decorators:[{type:e.Inject,args:[K]},{type:e.Optional}]},{type:void 0,decorators:[{type:e.Inject,args:[Y]},{type:e.Optional}]},{type:s.DateAdapter},{type:e.ChangeDetectorRef}]},J.propDecorators={minDate:[{type:e.Input}],maxDate:[{type:e.Input}],sameMonthOnly:[{type:e.Input}],format:[{type:e.Input}],placeholder:[{type:e.Input}],clearable:[{type:e.Input}],showTimeInput:[{type:e.Input}],invalidTimeAsMidnight:[{type:e.Input}],nativeInputRef:[{type:e.ViewChild,args:["nativeInput"]}],datePickerRef:[{type:e.ViewChild,args:["picker"]}]};var X=function(){};X.decorators=[{type:e.NgModule,args:[{imports:[p.MatDatepickerModule,d.MatFormFieldModule,s.MatNativeDateModule,c.MatInputModule,u.MatButtonModule],exports:[p.MatDatepickerModule,d.MatFormFieldModule,s.MatNativeDateModule,c.MatInputModule,u.MatButtonModule],providers:[p.MatDatepickerModule]}]}];var Z=function(){};Z.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule,o.FormsModule,a.NgSelectModule,i.SortablejsModule,X],declarations:[k,B,I,A,W,J,F,O,T,V,P,z,R,_,L,j,w,G,H,v,y],exports:[k,B,I,W,J,A,F,O,T,V,P,z,R,_,L,j,w,G,H,v,y]}]}],t.ButtonComponent=I,t.CheckboxComponent=A,t.DATE_PICKER_LOCALE=Y,t.DATE_PICKER_TRANSLATIONS=U,t.DATE_TIME_PICKER_TRANSLATIONS=K,t.DEFAULT_ERROR_MESSAGES=C,t.DatePickerComponent=W,t.DateTimePickerComponent=J,t.EmailInputComponent=F,t.FORM_ERROR_MESSAGES=x,t.FormCaptionComponent=j,t.FormComponent=v,t.FormElementComponent=w,t.FormErrorComponent=G,t.FormSubmitButtonComponent=H,t.KLP_DATE_FORMATS=$,t.LoadingIndicatorComponent=O,t.MultipleValueAccessorBase=B,t.NgxEnhancyFormsModule=Z,t.NumberInputComponent=T,t.PasswordFieldComponent=V,t.SELECT_TRANSLATIONS=N,t.SelectComponent=P,t.SelectFooterComponent=z,t.SortableItemsComponent=R,t.SubFormDirective=y,t.TextInputComponent=_,t.ToggleComponent=L,t.ValueAccessorBase=k,t.dateValidator=function(t){return t.value===q?{date:t.value}:null},t.invalidDateKey=q,t.invalidFieldsSymbol=b,t.matDateFormatsFactory=Q,t["ɵa"]=X,Object.defineProperty(t,"__esModule",{value:!0})}));
|
|
16
|
+
var D=function(t,e){return D=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(t[n]=e[n])},D(t,e)};function E(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function n(){this.constructor=t}D(t,e),t.prototype=null===e?Object.create(e):(n.prototype=e.prototype,new n)}Object.create;function M(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var o,r,i=n.call(t),a=[];try{for(;(void 0===e||e-- >0)&&!(o=i.next()).done;)a.push(o.value)}catch(t){r={error:t}}finally{try{o&&!o.done&&(n=i.return)&&n.call(i)}finally{if(r)throw r.error}}return a}function S(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(M(arguments[e]));return t}Object.create;var A=function(t){function e(){var e=t.apply(this,S(arguments))||this;return e.renderUndefinedAsIndeterminate=!1,e}return E(e,t),e}(k);A.decorators=[{type:e.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 === true" 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\t\t\t<svg *ngIf="renderUndefinedAsIndeterminate && innerValue === undefined" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg">\n\t\t\t\t<path d="m0.5 2.11665 3.2333 0" stroke="currentColor" fill="none" stroke-width=".4646px" />\n\t\t\t</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:A,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}"]}]}],A.propDecorators={caption:[{type:e.Input}],renderUndefinedAsIndeterminate:[{type:e.Input}]};var F=function(t){function e(){var e=t.apply(this,S(arguments))||this;return e.placeholder="",e}return E(e,t),e}(k);F.decorators=[{type:e.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:F,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:#f6cdd1;border-color:#dc3545}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]}]}],F.propDecorators={placeholder:[{type:e.Input}]};var O=function(){this.variant="3dots",this.size="medium"};O.decorators=[{type:e.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:e.Input}],size:[{type:e.Input}]};var T=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return E(e,t),e}(k);T.decorators=[{type:e.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\t[ngClass]="{showErrors: isInErrorState()}"\n/>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:T,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:#f6cdd1;border-color:#dc3545}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]}]}],T.propDecorators={placeholder:[{type:e.Input}]};var V=function(t){function e(){var e=t.apply(this,S(arguments))||this;return e.placeholder="Password",e.isPasswordConfirm=!1,e}return E(e,t),e}(k);V.decorators=[{type:e.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]="isPasswordConfirm ? \'Confirm password\': \'Password\'"\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:#f6cdd1;border-color:#dc3545}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]}]}],V.propDecorators={placeholder:[{type:e.Input}],isPasswordConfirm:[{type:e.Input}]};var N=new e.InjectionToken("klp.form.select.translations"),P=function(t){function n(n,o,r){var i=t.call(this,n,o)||this;return i.parent=n,i.controlContainer=o,i.translations=r,i.multiple=!1,i.multipleDisplayedAsAmount=!1,i.clearable=!0,i.onSearch=new e.EventEmitter,i}return E(n,t),n.prototype.onTextInput=function(t){this.currentQueryString=t,this.onSearch.emit(t)},n.prototype.getDefaultTranslation=function(t){switch(t){case"placeholder":return function(){return"Pick an option"};case"amountSelected":return function(t){return t+" selected"}}},n.prototype.getTranslation=function(t,e){var n,o,r;return void 0===e&&(e=null),"placeholder"===t&&h(this.placeholder)?this.placeholder:null!==(r=null===(o=null===(n=this.translations)||void 0===n?void 0:n[t])||void 0===o?void 0:o.call(n,e))&&void 0!==r?r:this.getDefaultTranslation(t)(e)},n}(k);P.decorators=[{type:e.Component,args:[{selector:"klp-form-select",template:'<ng-select\n\t[placeholder]="getTranslation(\'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\t(input)="onTextInput($event.target.value)"\n\t[selectOnTab]="true"\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\t<ng-container *ngIf="multiple && multipleDisplayedAsAmount && innerValue?.length > 1">\n\t\t<ng-template ng-multi-label-tmp>\n\t\t\t<div class="ng-value">\n\t\t\t\t<span class="ng-value-label">{{getTranslation(\'amountSelected\', innerValue?.length)}}</span>\n\t\t\t</div>\n\t\t</ng-template>\n\t</ng-container>\n\t<ng-template ng-footer-tmp *ngIf="footerElement">\n\t\t<ng-container [ngTemplateOutlet]="footerElement"></ng-container>\n\t</ng-template>\n</ng-select>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:P,multi:!0}],styles:[":host{display:block}ng-select.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 .ng-value{background-color:#e7faee;border:1px solid #93e8b3;border-radius:2px;display:flex;font-size:.9em;margin-bottom:3px;margin-right:5px;margin-top:3px;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:#dc3545}: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}"]}]}],P.ctorParameters=function(){return[{type:w,decorators:[{type:e.Optional},{type:e.Host}]},{type:o.ControlContainer,decorators:[{type:e.Optional},{type:e.Host}]},{type:void 0,decorators:[{type:e.Inject,args:[N]},{type:e.Optional}]}]},P.propDecorators={placeholder:[{type:e.Input}],options:[{type:e.Input}],multiple:[{type:e.Input}],multipleDisplayedAsAmount:[{type:e.Input}],clearable:[{type:e.Input}],dropdownPosition:[{type:e.Input}],customSearchFn:[{type:e.Input}],footerElement:[{type:e.Input}],onSearch:[{type:e.Output}]};var z=function(){};z.decorators=[{type:e.Component,args:[{selector:"klp-select-footer",template:'<div class="componentContainer">\n\t<span class="prefix">{{prefix}}</span>\n\t<span class="text">{{text}}</span>\n</div>\n',styles:[":host{display:block}.componentContainer{cursor:pointer;padding:6px 10px}.componentContainer:hover{background:#e7faee}.prefix{font-size:80%;padding-right:.625rem}"]}]}],z.propDecorators={prefix:[{type:e.Input}],text:[{type:e.Input}]};var R=function(t){function e(){var e=t.apply(this,S(arguments))||this;return e.sortableItemSize="lg",e.useCustomScroll=!1,e.scrollInterval=null,e.itemsOrderChanged=function(){e.setInnerValueAndNotify(e.innerValue)},e.onItemDrag=function(t){t.relatedRect.top<100?e.scrollPage(100):e.stopScrolling()},e.onEnd=function(){e.stopScrolling()},e}return E(e,t),e.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.useCustomScroll?this.sortablejsOptions={onUpdate:this.itemsOrderChanged,onMove:this.onItemDrag,onEnd:this.onEnd}:this.sortablejsOptions={onUpdate:this.itemsOrderChanged}},e.prototype.scrollPage=function(t){var e=this;f(this.scrollInterval)||(this.scrollInterval=setInterval((function(){window.scroll({top:document.scrollingElement.scrollTop-t,behavior:"smooth"}),document.scrollingElement.scrollTop<=100&&e.stopScrolling()}),100))},e.prototype.stopScrolling=function(){clearInterval(this.scrollInterval),this.scrollInterval=null},e}(k);R.decorators=[{type:e.Component,args:[{selector:"klp-form-sortable-items",template:'<ng-template #listItem>\n\t<li *ngFor="let item of innerValue; index as index"\n\t\t\tclass="sortableItem"\n\t\t\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\t\t[sortablejs]="innerValue"\n\t\t[sortablejsOptions]="sortablejsOptions"\n\t\tclass="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:R,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}"]}]}],R.propDecorators={template:[{type:e.ContentChild,args:[e.TemplateRef]}],sortableItemSize:[{type:e.Input}],useCustomScroll:[{type:e.Input}]};var _=function(t){function e(){var e=t.apply(this,S(arguments))||this;return e.type="text",e.clearable=!1,e}return E(e,t),e}(k);_.decorators=[{type:e.Component,args:[{selector:"klp-form-text-input",template:'<div class="componentContainer">\n\t<ng-container *ngIf="icon?.length > 0">\n\t\t<i class="ti-search" *ngIf="icon === \'search\'"></i>\n\t</ng-container>\n\t<input\n\t\t[type]="type"\n\t\t[ngClass]="{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable}"\n\t\t[(ngModel)]="innerValue"\n\t\t(input)="setInnerValueAndNotify($event.target.value)"\n\t\t[placeholder]="placeholder ? placeholder : \'\'"\n\t\t(blur)="touch()"\n\t\t[disabled]=\'disabled\'\n\t/>\n\t<div class="clearIcon" *ngIf="clearable && innerValue?.length > 0" (click)="resetToNull()">×</div>\n</div>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:_,multi:!0}],styles:[":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{left:.625rem;position:absolute;top:14px}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;display:block;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:#f6cdd1;border-color:#dc3545}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}.clearIcon{cursor:pointer;font-size:18px;position:absolute;right:.625rem;top:7px}.showErrors{border-color:#ff8000}"]}]}],_.propDecorators={placeholder:[{type:e.Input}],type:[{type:e.Input}],clearable:[{type:e.Input}],icon:[{type:e.Input}]};var L=function(t){function e(){return null!==t&&t.apply(this,arguments)||this}return E(e,t),e}(k);L.decorators=[{type:e.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:L,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 j=function(){function t(t){this.parent=t}return t.prototype.ngOnInit=function(){var t=this;setTimeout((function(){var e=t.parent.getAttachedControl();if(t.parent.registerCaption(t.contentRef),g(e))throw new Error("You added a Form Caption component without an attached Form Control")}))},t}();j.decorators=[{type:e.Component,args:[{selector:"klp-form-caption",template:"<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n",styles:[":host{display:block}"]}]}],j.ctorParameters=function(){return[{type:w,decorators:[{type:e.Host},{type:e.Optional}]}]},j.propDecorators={contentRef:[{type:e.ViewChild,args:["contentRef"]}]};var G=function(){function t(t){this.parent=t,this.showError=!1}return t.prototype.ngOnInit=function(){var t=this;setTimeout((function(){var e=t.parent.getAttachedControl();if(t.parent.registerErrorHandler(t.error,t.contentRef),g(e))throw new Error("You added a Form Error component without an attached Form Control")}))},t}();G.decorators=[{type:e.Component,args:[{selector:"klp-form-error",template:"<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n",styles:[":host{display:block}"]}]}],G.ctorParameters=function(){return[{type:w,decorators:[{type:e.Host},{type:e.Optional}]}]},G.propDecorators={error:[{type:e.Input}],contentRef:[{type:e.ViewChild,args:["contentRef"]}]};var H=function(){function t(t){this.parentForm=t,this.isLoading=!1,this.fullWidth=!1,this.variant="greenFilled"}return Object.defineProperty(t.prototype,"_",{get:function(){return this.fullWidth},enumerable:!1,configurable:!0}),t.prototype.submitForm=function(){var t=this;this.parentForm.trySubmit().then((function(e){t.isLoading=!0;var n=t.submitCallback(e);if(g(n))throw new Error("No promise is returned in your submit function.");return n.then((function(){return t.isLoading=!1})).catch((function(e){throw t.isLoading=!1,e}))})).catch((function(t){if(t!==b)throw t}))},t}();H.decorators=[{type:e.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%}"]}]}],H.ctorParameters=function(){return[{type:v,decorators:[{type:e.Host},{type:e.Optional}]}]},H.propDecorators={isLoading:[{type:e.Input}],fullWidth:[{type:e.Input}],variant:[{type:e.Input}],submitCallback:[{type:e.Input}],_:[{type:e.HostBinding,args:["class._fullWidth"]}]};var B=function(t){function e(e,n){var o=t.call(this,e,n)||this;return o.parent=e,o.controlContainer=n,o.multiple=!1,o}return E(e,t),e.prototype.writeValue=function(e){this.multiple?Array.isArray(e)?t.prototype.writeValue.call(this,e.filter(f)):t.prototype.writeValue.call(this,[e].filter(f)):Array.isArray(e)?t.prototype.writeValue.call(this,e[0]):t.prototype.writeValue.call(this,e)},e.prototype.setInnerValueAndNotify=function(e){this.multiple?Array.isArray(e)?t.prototype.setInnerValueAndNotify.call(this,e.filter(f)):t.prototype.setInnerValueAndNotify.call(this,[e].filter(f)):Array.isArray(e)?t.prototype.setInnerValueAndNotify.call(this,e[0]):t.prototype.setInnerValueAndNotify.call(this,e)},e}(k);B.decorators=[{type:e.Component,args:[{selector:"",template:""}]}],B.ctorParameters=function(){return[{type:w,decorators:[{type:e.Host},{type:e.Optional}]},{type:o.ControlContainer,decorators:[{type:e.Host},{type:e.Optional}]}]},B.propDecorators={multiple:[{type:e.Input}]};var q="--invalid_date--";var U=new e.InjectionToken("klp.form.date.translations"),W=function(t){function e(e,n,o){var r=t.call(this,e,n)||this;return r.parent=e,r.controlContainer=n,r.translations=o,r.minDate=void 0,r.maxDate=void 0,r.sameMonthOnly=!1,r.format="dd-MM-yyyy",r.clearable=!1,r}return E(e,t),e.prototype.writeValue=function(e){e===q?t.prototype.writeValue.call(this,q):g(e)?(this.dateValue=null,t.prototype.writeValue.call(this,null)):(Array.isArray(e)?this.dateValue=e.map((function(t){return l.parse(t,"yyyy-MM-dd",new Date)})):this.dateValue=l.parse(e,"yyyy-MM-dd",new Date),t.prototype.writeValue.call(this,e))},e.prototype.dateChanged=function(t){t===q?this.setInnerValueAndNotify(q):g(t)?(this.dateValue=null,this.setInnerValueAndNotify(null)):(this.dateValue=t,Array.isArray(t)?this.setInnerValueAndNotify(t.map((function(t){return l.format(t,"yyyy-MM-dd")}))):this.setInnerValueAndNotify(l.format(t,"yyyy-MM-dd")))},e.prototype.getDefaultTranslation=function(t){if("placeholder"===t)return function(){return"Select date"}},e.prototype.getTranslation=function(t,e){var n,o,r;return void 0===e&&(e=null),"placeholder"===t&&this.multiple?"":"placeholder"===t&&h(this.placeholder)?this.placeholder:null!==(r=null===(o=null===(n=this.translations)||void 0===n?void 0:n[t])||void 0===o?void 0:o.call(n,e))&&void 0!==r?r:this.getDefaultTranslation(t)(e)},e}(B);W.decorators=[{type:e.Component,args:[{selector:"klp-form-date-picker",template:'<div class="componentContainer" [ngClass]="{showErrors: isInErrorState()}">\n\t<klp-form-date-time-picker\n\t\t[multiple]="multiple"\n\t\t[disabled]="disabled"\n\t\t[(ngModel)]="dateValue"\n\t\t(ngModelChange)="dateChanged($event)"\n\t\t[minDate]="minDate"\n\t\t[maxDate]="maxDate"\n\t\t[sameMonthOnly]="sameMonthOnly"\n\t\t[format]="format"\n\t\t[placeholder]="getTranslation(\'placeholder\')"\n\t\t[clearable]="clearable"\n\t\t[showTimeInput]="false"\n\t\t(onTouch)="touch()"\n\t></klp-form-date-time-picker>\n</div>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:W,multi:!0}],styles:[":host{display:block}.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .clearButton,.componentContainer.showErrors ::ng-deep klp-form-date-time-picker .dateContainer{border-color:#ff8000}"]}]}],W.ctorParameters=function(){return[{type:w,decorators:[{type:e.Host},{type:e.Optional}]},{type:o.ControlContainer,decorators:[{type:e.Host},{type:e.Optional}]},{type:void 0,decorators:[{type:e.Inject,args:[U]},{type:e.Optional}]}]},W.propDecorators={minDate:[{type:e.Input}],maxDate:[{type:e.Input}],sameMonthOnly:[{type:e.Input}],format:[{type:e.Input}],placeholder:[{type:e.Input}],clearable:[{type:e.Input}]};var $=new e.InjectionToken("klp.form.date.formats"),K=new e.InjectionToken("klp.form.dateTime.translations"),Y=new e.InjectionToken("klp.form.dateTime.locale");function Q(t,e){var n;return null!==(n=null==e?void 0:e(t.format))&&void 0!==n?n:s.MAT_NATIVE_DATE_FORMATS}var J=function(t){function e(e,n,o,r,i,a){var l=t.call(this,e,n)||this;return l.parent=e,l.controlContainer=n,l.translations=o,l.datePickerLocale=r,l.dateAdapter=i,l.cdr=a,l.minDate=void 0,l.maxDate=void 0,l.sameMonthOnly=!1,l.format="dd-MM-yyyy",l.clearable=!1,l.showTimeInput=!0,l.invalidTimeAsMidnight=!1,l.openPickerOnDate=null,l.minDateStartOfDay=void 0,l.maxDateEndOfDay=void 0,l.selectedDates=[],l.dateTouched=!1,l.hoursTouched=!1,l.minutesTouched=!1,l.isSelected=function(t){return l.multiple&&l.selectedDates.some((function(e){return e.getTime()===t.getTime()}))?"selected":""},l.filterDates=function(t){return!l.disabled},f(r)&&i.setLocale(r()),l}return E(e,t),e.prototype.ngOnInit=function(){t.prototype.ngOnInit.call(this),this.multiple&&(this.placeholder="",this.showTimeInput=!1)},e.prototype.ngAfterViewInit=function(){this.multiple&&(this.datePickingClosingFn=this.datePickerRef.close)},e.prototype.ngOnChanges=function(t){t.minDate&&this.determineMinAndMaxDates(),t.maxDate&&this.determineMinAndMaxDates()},e.prototype.setMinDate=function(t){t?(this.minDateStartOfDay=new Date(t),this.minDateStartOfDay.setHours(0,0,0,0)):this.minDateStartOfDay=void 0},e.prototype.setMaxDate=function(t){t?(this.maxDateEndOfDay=new Date(t),this.maxDateEndOfDay.setHours(23,59,59,999)):this.maxDateEndOfDay=void 0},e.prototype.getSelectedMonths=function(){return(t=this.selectedDates.map((function(t){return l.format(t,"MMMM")})),t.filter((function(e,n){return n===t.findIndex((function(t){return t===e}))}))).length;var t},e.prototype.dateChanged=function(t){var e=this,n=t.value;if(this.multiple){this.datePickerRef.close=function(){},this.selectedDates.some((function(t){return t.getTime()===n.getTime()}))?this.selectedDates=this.selectedDates.filter((function(t){return t.getTime()!==n.getTime()})):this.selectedDates=S(this.selectedDates,[n]),this.cdr.detectChanges(),this.valueForMaterialDatePicker=null;var o=this.minDateStartOfDay;this.minDateStartOfDay=new Date(0),this.cdr.detectChanges(),this.minDateStartOfDay=o,this.sameMonthOnly&&(this.selectedDates.length>=2&&(n<l.startOfMonth(this.selectedDates[0])||n>l.endOfMonth(this.selectedDates[0]))&&(this.selectedDates=[n]),this.determineMinAndMaxDates()),this.setInnerValueAndNotify(this.selectedDates),setTimeout((function(){e.datePickerRef.close=e.datePickingClosingFn}))}else this.notifyNewDate()},e.prototype.determineMinAndMaxDates=function(){this.sameMonthOnly&&this.selectedDates.length>=2?(this.setMinDate(l.startOfMonth(this.selectedDates[0])),this.setMaxDate(l.endOfMonth(this.selectedDates[0]))):(this.setMinDate(this.minDate),this.setMaxDate(this.maxDate))},e.prototype.notifyNewDate=function(){var t=this.nativeInputRef.nativeElement.value,e=Number(this.hours),n=Number(this.minutes);if(!this.showTimeInput){if(!h(t))return void this.setInnerValueAndNotify(null);if(this.valueForMaterialDatePicker instanceof Date)return void this.setInnerValueAndNotify(this.valueForMaterialDatePicker)}if(h(t)||h(this.hours)||h(this.minutes))if(h(this.hours)&&Number.isFinite(e)&&e>=0&&e<=23&&h(this.minutes)&&Number.isFinite(n)&&n>=0&&n<=59&&this.valueForMaterialDatePicker instanceof Date){var o=new Date(this.valueForMaterialDatePicker.setHours(e)),r=new Date(o.setMinutes(n));this.setInnerValueAndNotify(r)}else this.invalidTimeAsMidnight&&this.valueForMaterialDatePicker instanceof Date?this.setInnerValueAndNotify(this.valueForMaterialDatePicker):this.setInnerValueAndNotify(q);else this.setInnerValueAndNotify(null)},e.prototype.writeValue=function(e){t.prototype.writeValue.call(this,e),Array.isArray(e)?(this.selectedDates=e,this.determineMinAndMaxDates(),this.valueForMaterialDatePicker=null,m(e)&&(this.openPickerOnDate=this.selectedDates[0])):(this.valueForMaterialDatePicker=e===q?null:e,e instanceof Date?(this.hours=String(e.getHours()),this.minutes=String(e.getMinutes()),this.formatTime(),this.openPickerOnDate=e):(this.hours="",this.minutes="",this.openPickerOnDate=null))},e.prototype.nativeValueChanged=function(){this.datePickerRef.opened&&this.datePickerRef.close(),this.notifyNewDate()},e.prototype.resetToNull=function(){this.setInnerValueAndNotify(null),this.valueForMaterialDatePicker=null,this.nativeInputRef.nativeElement.value=null,this.hours="",this.minutes="",this.selectedDates=[]},e.prototype.formatTime=function(){Number.isFinite(Number(this.hours))&&1===this.hours.length&&(this.hours="0"+this.hours),Number.isFinite(Number(this.minutes))&&1===this.minutes.length&&(this.minutes="0"+this.minutes)},e.prototype.touchDate=function(){this.dateTouched=!0,this.determineAllTouched()},e.prototype.touchHours=function(){this.hoursTouched=!0,this.determineAllTouched()},e.prototype.touchMinutes=function(){this.minutesTouched=!0,this.determineAllTouched()},e.prototype.determineAllTouched=function(){(this.dateTouched&&this.hoursTouched&&this.minutesTouched||this.dateTouched&&!this.showTimeInput)&&this.touch()},e.prototype.getDefaultTranslation=function(t){switch(t){case"placeholder":return function(){return"Select date"};case"selectDays":return function(){return"Select day(s)"};case"selectedDate":return function(t){return t.toLocaleDateString()};case"daysSelected":return function(t){return t+" days selected"};case"selectedInMonth":return function(t){return" in "+l.format(t,"MMMM")}}},e.prototype.getTranslation=function(t,e){var n,o,r;return void 0===e&&(e=null),"placeholder"===t&&this.multiple?"":"placeholder"===t&&h(this.placeholder)?this.placeholder:null!==(r=null===(o=null===(n=this.translations)||void 0===n?void 0:n[t])||void 0===o?void 0:o.call(n,e))&&void 0!==r?r:this.getDefaultTranslation(t)(e)},e}(B);J.decorators=[{type:e.Component,args:[{selector:"klp-form-date-time-picker",template:'<div class="componentContainer" [ngClass]="{showErrors: isInErrorState()}">\n\t<div class="dateContainer" [ngClass]="{noRightBorder: !showTimeInput && clearable && !disabled, disabled: disabled}">\n\t\t<mat-form-field floatLabel="never">\n\t\t\t<div *ngIf="multiple" class="daysSelectedCaption" (click)="picker.open()" [ngClass]="{disabled: disabled}">\n\t\t\t\t<ng-container *ngIf="selectedDates.length >= 2">\n\t\t\t\t\t<span>{{getTranslation(\'daysSelected\', selectedDates.length)}}</span>\n\t\t\t\t\t<span *ngIf="getSelectedMonths() === 1">{{getTranslation(\'selectedInMonth\', selectedDates[0])}}</span>\n\t\t\t\t</ng-container>\n\t\t\t\t<span *ngIf="selectedDates.length === 1">{{getTranslation(\'selectedDate\', selectedDates[0])}}</span>\n\t\t\t\t<span *ngIf="selectedDates.length === 0" class="placeholderForMultipleSelection">{{getTranslation(\'selectDays\')}}</span>\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#nativeInput\n\t\t\t\tmatInput\n\t\t\t\t[matDatepicker]="picker"\n\t\t\t\t[matDatepickerFilter]="filterDates"\n\t\t\t\t[(ngModel)]="valueForMaterialDatePicker"\n\t\t\t\t(dateInput)="dateChanged($event)"\n\t\t\t\t(input)="nativeValueChanged()"\n\t\t\t\t[min]="minDateStartOfDay"\n\t\t\t\t[max]="maxDateEndOfDay"\n\t\t\t\t[placeholder]="getTranslation(\'placeholder\')"\n\t\t\t\t(click)="picker.open()"\n\t\t\t\t(blur)="touchDate()"\n\t\t\t\t[ngClass]="{inputForMultipleDays: multiple}"\n\t\t\t>\n\t\t\t<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>\n\t\t\t<mat-datepicker\n\t\t\t\t#picker\n\t\t\t\t[dateClass]="isSelected"\n\t\t\t\t[startAt]="openPickerOnDate"\n\t\t\t></mat-datepicker>\n\t\t</mat-form-field>\n\t</div>\n\t<div class="timeContainer" *ngIf="showTimeInput" [ngClass]="{disabled: disabled}">\n\t\t<input maxlength="2" placeholder="__" [disabled]="disabled" [(ngModel)]="hours" (ngModelChange)="notifyNewDate()" (blur)="formatTime(); touchHours()">\n\t\t<div class="divider">:</div>\n\t\t<input maxlength="2" placeholder="__" [disabled]="disabled" [(ngModel)]="minutes" (ngModelChange)="notifyNewDate()" (blur)="formatTime(); touchMinutes()">\n\t</div>\n\t<button *ngIf="clearable && !disabled" class="clearButton" (click)="resetToNull()" [ngClass]="{withoutSpacing: !showTimeInput}">×</button>\n</div>\n',providers:[{provide:o.NG_VALUE_ACCESSOR,useExisting:J,multi:!0},{provide:s.MAT_DATE_FORMATS,deps:[J,[new e.Optional,$]],useFactory:Q}],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:0}:host ::ng-deep .mat-form-field-flex{flex-direction:row-reverse}:host ::ng-deep .mat-form-field-infix{border-top:none;width:auto}: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}:host ::ng-deep .daysSelectedCaption{cursor:pointer}:host ::ng-deep .daysSelectedCaption.disabled{cursor:zoom-in}:host ::ng-deep .inputForMultipleDays{display:none}.componentContainer{border-radius:2px;color:#888da8;display:flex;position:relative}.componentContainer .placeholderForMultipleSelection{color:#adadad}.componentContainer.showErrors .clearButton.withoutSpacing,.componentContainer.showErrors .dateContainer,.componentContainer.showErrors .timeContainer{border-color:#ff8000}.componentContainer .clearButton{align-items:center;background:#fff;border:1px solid #e6ecf5;color:#7b7b7b;display:flex;flex:0 0 auto;font-size:18px;margin-left:1.25rem;padding:6px 14px}.componentContainer .clearButton.withoutSpacing{border-left:none;margin-left:0}.componentContainer .clearButton:disabled{background:#f9f9f9;border:1px solid #e6ecf5}.componentContainer .dateContainer{background:#fff;border:1px solid #e6ecf5;flex:1 1 auto;padding:6px}.componentContainer .dateContainer.noRightBorder{border-right:none}.componentContainer .dateContainer.disabled{background:#f9f9f9}.componentContainer .timeContainer{align-items:center;background:#fff;border:1px solid #e6ecf5;display:flex;flex:0 0 auto;margin-left:1.25rem;padding:6px .625rem}.componentContainer .timeContainer.disabled{background:#f9f9f9}.componentContainer .timeContainer input{border:none;color:#888da8;padding:0;text-align:center;width:20px}.componentContainer .timeContainer input::-moz-placeholder{color:#adadad}.componentContainer .timeContainer input:-ms-input-placeholder{color:#adadad}.componentContainer .timeContainer input::placeholder{color:#adadad}.componentContainer .timeContainer .divider{margin:0 .3125rem}"]}]}],J.ctorParameters=function(){return[{type:w,decorators:[{type:e.Host},{type:e.Optional}]},{type:o.ControlContainer,decorators:[{type:e.Host},{type:e.Optional}]},{type:void 0,decorators:[{type:e.Inject,args:[K]},{type:e.Optional}]},{type:void 0,decorators:[{type:e.Inject,args:[Y]},{type:e.Optional}]},{type:s.DateAdapter},{type:e.ChangeDetectorRef}]},J.propDecorators={minDate:[{type:e.Input}],maxDate:[{type:e.Input}],sameMonthOnly:[{type:e.Input}],format:[{type:e.Input}],placeholder:[{type:e.Input}],clearable:[{type:e.Input}],showTimeInput:[{type:e.Input}],invalidTimeAsMidnight:[{type:e.Input}],nativeInputRef:[{type:e.ViewChild,args:["nativeInput"]}],datePickerRef:[{type:e.ViewChild,args:["picker"]}]};var X=function(){};X.decorators=[{type:e.NgModule,args:[{imports:[p.MatDatepickerModule,d.MatFormFieldModule,s.MatNativeDateModule,c.MatInputModule,u.MatButtonModule],exports:[p.MatDatepickerModule,d.MatFormFieldModule,s.MatNativeDateModule,c.MatInputModule,u.MatButtonModule],providers:[p.MatDatepickerModule]}]}];var Z=function(){};Z.decorators=[{type:e.NgModule,args:[{imports:[n.CommonModule,o.FormsModule,a.NgSelectModule,i.SortablejsModule,X],declarations:[k,B,I,A,W,J,F,O,T,V,P,z,R,_,L,j,w,G,H,v,y],exports:[k,B,I,W,J,A,F,O,T,V,P,z,R,_,L,j,w,G,H,v,y]}]}],t.ButtonComponent=I,t.CheckboxComponent=A,t.DATE_PICKER_LOCALE=Y,t.DATE_PICKER_TRANSLATIONS=U,t.DATE_TIME_PICKER_TRANSLATIONS=K,t.DEFAULT_ERROR_MESSAGES=C,t.DatePickerComponent=W,t.DateTimePickerComponent=J,t.EmailInputComponent=F,t.FORM_ERROR_MESSAGES=x,t.FormCaptionComponent=j,t.FormComponent=v,t.FormElementComponent=w,t.FormErrorComponent=G,t.FormSubmitButtonComponent=H,t.KLP_DATE_FORMATS=$,t.LoadingIndicatorComponent=O,t.MultipleValueAccessorBase=B,t.NgxEnhancyFormsModule=Z,t.NumberInputComponent=T,t.PasswordFieldComponent=V,t.SELECT_TRANSLATIONS=N,t.SelectComponent=P,t.SelectFooterComponent=z,t.SortableItemsComponent=R,t.SubFormDirective=y,t.TextInputComponent=_,t.ToggleComponent=L,t.ValueAccessorBase=k,t.dateValidator=function(t){return t.value===q?{date:t.value}:null},t.invalidDateKey=q,t.invalidFieldsSymbol=b,t.matDateFormatsFactory=Q,t["ɵa"]=X,Object.defineProperty(t,"__esModule",{value:!0})}));
|
|
17
17
|
//# sourceMappingURL=klippa-ngx-enhancy-forms.umd.min.js.map
|