@klippa/ngx-enhancy-forms 5.2.1 → 5.3.2
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 +29 -13
- package/bundles/klippa-ngx-enhancy-forms.umd.js.map +1 -1
- 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/date-time-picker/date-time-picker.component.js +13 -5
- package/esm2015/lib/form/form.component.js +10 -4
- package/fesm2015/klippa-ngx-enhancy-forms.js +21 -7
- package/fesm2015/klippa-ngx-enhancy-forms.js.map +1 -1
- package/klippa-ngx-enhancy-forms.metadata.json +1 -1
- package/lib/elements/date-time-picker/date-time-picker.component.d.ts +5 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"__symbolic":"module","version":4,"metadata":{"NgxEnhancyFormsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":28,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":30,"character":2},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":31,"character":2},{"__symbolic":"reference","module":"@ng-select/ng-select","name":"NgSelectModule","line":32,"character":2},{"__symbolic":"reference","module":"ngx-sortablejs","name":"SortablejsModule","line":33,"character":2},{"__symbolic":"reference","name":"ɵa"}],"declarations":[{"__symbolic":"reference","name":"ValueAccessorBase"},{"__symbolic":"reference","name":"MultipleValueAccessorBase"},{"__symbolic":"reference","name":"ButtonComponent"},{"__symbolic":"reference","name":"CheckboxComponent"},{"__symbolic":"reference","name":"DatePickerComponent"},{"__symbolic":"reference","name":"DateTimePickerComponent"},{"__symbolic":"reference","name":"EmailInputComponent"},{"__symbolic":"reference","name":"LoadingIndicatorComponent"},{"__symbolic":"reference","name":"NumberInputComponent"},{"__symbolic":"reference","name":"PasswordFieldComponent"},{"__symbolic":"reference","name":"SelectComponent"},{"__symbolic":"reference","name":"SelectFooterComponent"},{"__symbolic":"reference","name":"SortableItemsComponent"},{"__symbolic":"reference","name":"TextInputComponent"},{"__symbolic":"reference","name":"ToggleComponent"},{"__symbolic":"reference","name":"FormCaptionComponent"},{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","name":"FormErrorComponent"},{"__symbolic":"reference","name":"FormSubmitButtonComponent"},{"__symbolic":"reference","name":"FormComponent"},{"__symbolic":"reference","name":"SubFormDirective"}],"exports":[{"__symbolic":"reference","name":"ValueAccessorBase"},{"__symbolic":"reference","name":"MultipleValueAccessorBase"},{"__symbolic":"reference","name":"ButtonComponent"},{"__symbolic":"reference","name":"DatePickerComponent"},{"__symbolic":"reference","name":"DateTimePickerComponent"},{"__symbolic":"reference","name":"CheckboxComponent"},{"__symbolic":"reference","name":"EmailInputComponent"},{"__symbolic":"reference","name":"LoadingIndicatorComponent"},{"__symbolic":"reference","name":"NumberInputComponent"},{"__symbolic":"reference","name":"PasswordFieldComponent"},{"__symbolic":"reference","name":"SelectComponent"},{"__symbolic":"reference","name":"SelectFooterComponent"},{"__symbolic":"reference","name":"SortableItemsComponent"},{"__symbolic":"reference","name":"TextInputComponent"},{"__symbolic":"reference","name":"ToggleComponent"},{"__symbolic":"reference","name":"FormCaptionComponent"},{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","name":"FormErrorComponent"},{"__symbolic":"reference","name":"FormSubmitButtonComponent"},{"__symbolic":"reference","name":"FormComponent"},{"__symbolic":"reference","name":"SubFormDirective"}]}]}],"members":{}},"ButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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}"]}]}],"members":{"variant":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":2}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":2}}]}],"fullWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":2}}]}],"hasBorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":2}}]}],"isLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":2}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":2}}]}],"_":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":24,"character":2},"arguments":["class._fullWidth"]}]}],"onClick":[{"__symbolic":"method"}]}},"CheckboxComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-checkbox","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":24},"useExisting":{"__symbolic":"reference","name":"CheckboxComponent"},"multi":true}],"template":"<label class=\"componentContainer\">\n\t<div class=\"checkboxContainer\">\n\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t[disabled]=\"disabled\"\n\t\t/>\n <div class=\"checkboxVisual\">\n <svg *ngIf=\"innerValue\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"m0.17014 2.7065 1.3073 1.1798 2.5656-3.7404\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n </svg>\n </div>\n\t</div>\n\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n</label>\n","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}"]}]}],"members":{"caption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":2}}]}]}},"DATE_PICKER_TRANSLATIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":8,"character":44},"arguments":["klp.form.date.translations"]},"DatePickerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"MultipleValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"klp-form-date-picker","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":14,"character":23},"useExisting":{"__symbolic":"reference","name":"DatePickerComponent"},"multi":true}],"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","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}"]}]}],"members":{"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":2}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":2}}]}],"sameMonthOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":2}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":2}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":2}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":27,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":27,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":28,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":28,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":29,"character":3},"arguments":[{"__symbolic":"reference","name":"DATE_PICKER_TRANSLATIONS"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":29,"character":37}}]],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","module":"@angular/forms","name":"ControlContainer","line":28,"character":50},{"__symbolic":"reference","name":"any"}]}],"writeValue":[{"__symbolic":"method"}],"dateChanged":[{"__symbolic":"method"}],"getDefaultTranslation":[{"__symbolic":"method"}],"getTranslation":[{"__symbolic":"method"}]}},"KLP_DATE_FORMATS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":25,"character":36},"arguments":["klp.form.date.formats"]},"DATE_TIME_PICKER_TRANSLATIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":26,"character":49},"arguments":["klp.form.dateTime.translations"]},"matDateFormatsFactory":{"__symbolic":"function","parameters":["component","dateFormats"],"value":{"__symbolic":"binop","operator":"??","left":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"dateFormats"},"arguments":[{"__symbolic":"select","expression":{"__symbolic":"reference","name":"component"},"member":"format"}]},"right":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_NATIVE_DATE_FORMATS","line":29,"character":43}}},"DateTimePickerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"MultipleValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":32,"character":1},"arguments":[{"selector":"klp-form-date-time-picker","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":37,"character":12},"useExisting":{"__symbolic":"reference","name":"DateTimePickerComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":39,"character":12},"deps":[{"__symbolic":"reference","name":"DateTimePickerComponent"},[{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":40,"character":40}},{"__symbolic":"reference","name":"KLP_DATE_FORMATS"}]],"useFactory":{"__symbolic":"reference","name":"matDateFormatsFactory"}}],"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></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","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}"]}]}],"members":{"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":2}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":2}}]}],"sameMonthOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":2}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":2}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":2}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":2}}]}],"showTimeInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":2}}]}],"invalidTimeAsMidnight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":2}}]}],"nativeInputRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":55,"character":2},"arguments":["nativeInput"]}]}],"datePickerRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":2},"arguments":["picker"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":74,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":74,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":75,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":75,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":76,"character":3},"arguments":[{"__symbolic":"reference","name":"DATE_TIME_PICKER_TRANSLATIONS"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":76,"character":42}}],null],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","module":"@angular/forms","name":"ControlContainer","line":75,"character":50},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":77,"character":15}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setMinDate":[{"__symbolic":"method"}],"setMaxDate":[{"__symbolic":"method"}],"getSelectedMonths":[{"__symbolic":"method"}],"dateChanged":[{"__symbolic":"method"}],"determineMinAndMaxDates":[{"__symbolic":"method"}],"notifyNewDate":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"nativeValueChanged":[{"__symbolic":"method"}],"resetToNull":[{"__symbolic":"method"}],"formatTime":[{"__symbolic":"method"}],"touchDate":[{"__symbolic":"method"}],"touchHours":[{"__symbolic":"method"}],"touchMinutes":[{"__symbolic":"method"}],"determineAllTouched":[{"__symbolic":"method"}],"getDefaultTranslation":[{"__symbolic":"method"}],"getTranslation":[{"__symbolic":"method"}]}},"EmailInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-email-input","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":23},"useExisting":{"__symbolic":"reference","name":"EmailInputComponent"},"multi":true}],"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","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}"]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}]}},"LoadingIndicatorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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}"]}]}],"members":{"variant":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":2}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":2}}]}]}},"NumberInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-number-input","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":24},"useExisting":{"__symbolic":"reference","name":"NumberInputComponent"},"multi":true}],"template":"<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n/>\n","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}"]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}]}},"PasswordFieldComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-password-field","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":23},"useExisting":{"__symbolic":"reference","name":"PasswordFieldComponent"},"multi":true}],"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","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}"]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}],"isPasswordConfirm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":2}}]}]}},"SelectFooterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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}"]}]}],"members":{"prefix":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":2}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":2}}]}]}},"AppSelectOptions":{"__symbolic":"interface"},"SELECT_TRANSLATIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":15,"character":39},"arguments":["klp.form.select.translations"]},"SelectComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"klp-form-select","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":21,"character":23},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true}],"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>\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","styles":[":host{display:block}.showErrors ::ng-deep .ng-select-container,:host.showErrors ::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{color:#888da8}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#3ed778}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{border-color:transparent transparent #999;border-width:0 5px 5px;top:-2px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-left-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select .ng-select-container{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid #e6ecf5;border-radius:4px;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#888da8;display:flex;flex-direction:row;font-size:1rem;font-size:14px;line-height:1.5;margin:0;min-height:42px;outline:none;overflow:visible;padding:.375rem .75rem;transition-delay:0s;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;overflow:hidden;padding-left:10px}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .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}"]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":2}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":2}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":2}}]}],"multipleDisplayedAsAmount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":2}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":2}}]}],"dropdownPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":2}}]}],"customSearchFn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":2}}]}],"footerElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":2}}]}],"onSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":36,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":36,"character":15}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":37,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":37,"character":15}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":38,"character":3},"arguments":[{"__symbolic":"reference","name":"SELECT_TRANSLATIONS"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":38,"character":32}}]],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","module":"@angular/forms","name":"ControlContainer","line":37,"character":50},{"__symbolic":"reference","name":"any"}]}],"onTextInput":[{"__symbolic":"method"}],"getDefaultTranslation":[{"__symbolic":"method"}],"getTranslation":[{"__symbolic":"method"}]}},"SortableItemsComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"klp-form-sortable-items","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":10,"character":23},"useExisting":{"__symbolic":"reference","name":"SortableItemsComponent"},"multi":true}],"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","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}"]}]}],"members":{"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":13,"character":2},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":13,"character":15}]}]}],"sortableItemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":2}}]}],"useCustomScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":2}}]}],"ngOnInit":[{"__symbolic":"method"}],"scrollPage":[{"__symbolic":"method"}],"stopScrolling":[{"__symbolic":"method"}]}},"TextInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-text-input","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":24},"useExisting":{"__symbolic":"reference","name":"TextInputComponent"},"multi":true}],"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","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}"]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":2}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":2}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":2}}]}]}},"ToggleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-toggle","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":23},"useExisting":{"__symbolic":"reference","name":"ToggleComponent"},"multi":true}],"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","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}"]}]}],"members":{}},"ValueAccessorBase":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"","template":""}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":2}}]}],"formControlName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":2}}]}],"formControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":2}}]}],"onTouch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":34,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":34,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":35,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":35,"character":11}}]],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","module":"@angular/forms","name":"ControlContainer","line":35,"character":50}]}],"ngOnInit":[{"__symbolic":"method"}],"isInErrorState":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"touch":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setInnerValueAndNotify":[{"__symbolic":"method"}],"resetToNull":[{"__symbolic":"method"}],"hasValidator":[{"__symbolic":"method"}]}},"MultipleValueAccessorBase":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"","template":""}]}],"members":{"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":14,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":14,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":15,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":15,"character":11}}]],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","module":"@angular/forms","name":"ControlContainer","line":15,"character":50}]}],"writeValue":[{"__symbolic":"method"}],"setInnerValueAndNotify":[{"__symbolic":"method"}]}},"invalidFieldsSymbol":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"Symbol"},"arguments":["Not all fields are valid"]},"SubFormDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"klp-sub-form"}]}],"members":{"injectInto":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":2}}]}],"at":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":2}}]}]}},"FormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"klp-form","template":"<form>\n\t<ng-content></ng-content>\n</form>\n\n\n","styles":[":host{display:block}:host.row{display:flex}"]}]}],"members":{"formGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":2}}]}],"patchValueInterceptor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":31,"character":14}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":31,"character":26}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":31,"character":69}}]],"parameters":[{"__symbolic":"reference","name":"FormComponent"},{"__symbolic":"reference","name":"SubFormDirective"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"addSupportForPatchValueInterceptor":[{"__symbolic":"method"}],"registerControl":[{"__symbolic":"method"}],"unregisterControl":[{"__symbolic":"method"}],"addFormGroupControls":[{"__symbolic":"method"}],"addFormArrayControls":[{"__symbolic":"method"}],"getAllFormControls":[{"__symbolic":"method"}],"addFormControl":[{"__symbolic":"method"}],"disableInactiveFormControl":[{"__symbolic":"method"}],"trySubmit":[{"__symbolic":"method"}],"setDisabledStatesForAllControls":[{"__symbolic":"method"}]}},"FormCaptionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-caption","template":"<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n","styles":[":host{display:block}"]}]}],"members":{"contentRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":10,"character":2},"arguments":["contentRef"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":12,"character":14}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":12,"character":22}}]],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"FORM_ERROR_MESSAGES":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":7,"character":39},"arguments":["form.error.messages"]},"DEFAULT_ERROR_MESSAGES":{"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"},"FormElementComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"klp-form-element","template":"<ng-template #errorRef>\n\t<div *ngIf=\"getErrorToShow()\" class=\"errorContainer\">\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<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\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;margin-bottom:1rem}.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;margin-left:40%}.errorContainer.d30-70{margin-left:30%}"]}]}],"members":{"caption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":2}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":2}}]}],"captionSpacing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":2}}]}],"spaceDistribution":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":2}}]}],"swapInputAndCaption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":2}}]}],"internalComponentRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":33,"character":2},"arguments":["internalComponentRef"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":41,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":41,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":42,"character":3},"arguments":[{"__symbolic":"reference","name":"FORM_ERROR_MESSAGES"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":42,"character":32}}]],"parameters":[{"__symbolic":"reference","name":"FormComponent"},{"__symbolic":"reference","name":"CustomErrorMessages"}]}],"substituteParameters":[{"__symbolic":"method"}],"registerControl":[{"__symbolic":"method"}],"unregisterControl":[{"__symbolic":"method"}],"getAttachedControl":[{"__symbolic":"method"}],"registerErrorHandler":[{"__symbolic":"method"}],"registerCaption":[{"__symbolic":"method"}],"getErrorToShow":[{"__symbolic":"method"}],"getCustomErrorHandler":[{"__symbolic":"method"}],"showDefaultError":[{"__symbolic":"method"}],"getScrollableParent":[{"__symbolic":"method"}],"scrollTo":[{"__symbolic":"method"}],"isRequired":[{"__symbolic":"method"}],"getErrorMessage":[{"__symbolic":"method"}]}},"FormErrorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"klp-form-error","template":"<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n","styles":[":host{display:block}"]}]}],"members":{"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}],"contentRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":13,"character":2},"arguments":["contentRef"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":14,"character":14}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":14,"character":22}}]],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"FormSubmitButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"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%}"]}]}],"members":{"isLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":2}}]}],"fullWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}],"variant":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":2}}]}],"submitCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":2}}]}],"_":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":15,"character":2},"arguments":["class._fullWidth"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":19,"character":14}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":19,"character":22}}]],"parameters":[{"__symbolic":"reference","name":"FormComponent"}]}],"submitForm":[{"__symbolic":"method"}]}},"invalidDateKey":"--invalid_date--","dateValidator":{"__symbolic":"function"},"FormErrorMessages":{"__symbolic":"interface"},"CustomErrorMessages":{"__symbolic":"interface"},"KlpDateFormats":{"__symbolic":"interface"},"ErrorTypes":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":10,"character":11},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":10,"character":32},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":10,"character":52},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":10,"character":73},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":10,"character":89}],"exports":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":11,"character":11},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":11,"character":32},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":11,"character":52},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":11,"character":73},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":11,"character":89}],"providers":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":12,"character":13}]}]}],"members":{}}},"origins":{"NgxEnhancyFormsModule":"./lib/ngx-enhancy-forms.module","ButtonComponent":"./lib/elements/button/button.component","CheckboxComponent":"./lib/elements/checkbox/checkbox.component","DATE_PICKER_TRANSLATIONS":"./lib/elements/date-picker/date-picker.component","DatePickerComponent":"./lib/elements/date-picker/date-picker.component","KLP_DATE_FORMATS":"./lib/elements/date-time-picker/date-time-picker.component","DATE_TIME_PICKER_TRANSLATIONS":"./lib/elements/date-time-picker/date-time-picker.component","matDateFormatsFactory":"./lib/elements/date-time-picker/date-time-picker.component","DateTimePickerComponent":"./lib/elements/date-time-picker/date-time-picker.component","EmailInputComponent":"./lib/elements/email/email-input.component","LoadingIndicatorComponent":"./lib/elements/loading-indicator/loading-indicator.component","NumberInputComponent":"./lib/elements/number-input/number-input.component","PasswordFieldComponent":"./lib/elements/password-field/password-field.component","SelectFooterComponent":"./lib/elements/select/select-footer/select-footer.component","AppSelectOptions":"./lib/elements/select/select.component","SELECT_TRANSLATIONS":"./lib/elements/select/select.component","SelectComponent":"./lib/elements/select/select.component","SortableItemsComponent":"./lib/elements/sortable-items/sortable-items.component","TextInputComponent":"./lib/elements/text-input/text-input.component","ToggleComponent":"./lib/elements/toggle/toggle.component","ValueAccessorBase":"./lib/elements/value-accessor-base/value-accessor-base.component","MultipleValueAccessorBase":"./lib/elements/value-accessor-base/multiple-value-accessor-base.component","invalidFieldsSymbol":"./lib/form/form.component","SubFormDirective":"./lib/form/form.component","FormComponent":"./lib/form/form.component","FormCaptionComponent":"./lib/form/form-caption/form-caption.component","FORM_ERROR_MESSAGES":"./lib/form/form-element/form-element.component","DEFAULT_ERROR_MESSAGES":"./lib/form/form-element/form-element.component","FormElementComponent":"./lib/form/form-element/form-element.component","FormErrorComponent":"./lib/form/form-error/form-error.component","FormSubmitButtonComponent":"./lib/form/form-submit-button/form-submit-button.component","invalidDateKey":"./lib/validators/dateValidator","dateValidator":"./lib/validators/dateValidator","FormErrorMessages":"./lib/types","CustomErrorMessages":"./lib/types","KlpDateFormats":"./lib/types","ErrorTypes":"./lib/types","ɵa":"./lib/material.module"},"importAs":"@klippa/ngx-enhancy-forms"}
|
|
1
|
+
{"__symbolic":"module","version":4,"metadata":{"NgxEnhancyFormsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":28,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":30,"character":2},{"__symbolic":"reference","module":"@angular/forms","name":"FormsModule","line":31,"character":2},{"__symbolic":"reference","module":"@ng-select/ng-select","name":"NgSelectModule","line":32,"character":2},{"__symbolic":"reference","module":"ngx-sortablejs","name":"SortablejsModule","line":33,"character":2},{"__symbolic":"reference","name":"ɵa"}],"declarations":[{"__symbolic":"reference","name":"ValueAccessorBase"},{"__symbolic":"reference","name":"MultipleValueAccessorBase"},{"__symbolic":"reference","name":"ButtonComponent"},{"__symbolic":"reference","name":"CheckboxComponent"},{"__symbolic":"reference","name":"DatePickerComponent"},{"__symbolic":"reference","name":"DateTimePickerComponent"},{"__symbolic":"reference","name":"EmailInputComponent"},{"__symbolic":"reference","name":"LoadingIndicatorComponent"},{"__symbolic":"reference","name":"NumberInputComponent"},{"__symbolic":"reference","name":"PasswordFieldComponent"},{"__symbolic":"reference","name":"SelectComponent"},{"__symbolic":"reference","name":"SelectFooterComponent"},{"__symbolic":"reference","name":"SortableItemsComponent"},{"__symbolic":"reference","name":"TextInputComponent"},{"__symbolic":"reference","name":"ToggleComponent"},{"__symbolic":"reference","name":"FormCaptionComponent"},{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","name":"FormErrorComponent"},{"__symbolic":"reference","name":"FormSubmitButtonComponent"},{"__symbolic":"reference","name":"FormComponent"},{"__symbolic":"reference","name":"SubFormDirective"}],"exports":[{"__symbolic":"reference","name":"ValueAccessorBase"},{"__symbolic":"reference","name":"MultipleValueAccessorBase"},{"__symbolic":"reference","name":"ButtonComponent"},{"__symbolic":"reference","name":"DatePickerComponent"},{"__symbolic":"reference","name":"DateTimePickerComponent"},{"__symbolic":"reference","name":"CheckboxComponent"},{"__symbolic":"reference","name":"EmailInputComponent"},{"__symbolic":"reference","name":"LoadingIndicatorComponent"},{"__symbolic":"reference","name":"NumberInputComponent"},{"__symbolic":"reference","name":"PasswordFieldComponent"},{"__symbolic":"reference","name":"SelectComponent"},{"__symbolic":"reference","name":"SelectFooterComponent"},{"__symbolic":"reference","name":"SortableItemsComponent"},{"__symbolic":"reference","name":"TextInputComponent"},{"__symbolic":"reference","name":"ToggleComponent"},{"__symbolic":"reference","name":"FormCaptionComponent"},{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","name":"FormErrorComponent"},{"__symbolic":"reference","name":"FormSubmitButtonComponent"},{"__symbolic":"reference","name":"FormComponent"},{"__symbolic":"reference","name":"SubFormDirective"}]}]}],"members":{}},"ButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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}"]}]}],"members":{"variant":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":2}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":2}}]}],"fullWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":2}}]}],"hasBorder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":2}}]}],"isLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":2}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":2}}]}],"_":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":24,"character":2},"arguments":["class._fullWidth"]}]}],"onClick":[{"__symbolic":"method"}]}},"CheckboxComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-checkbox","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":24},"useExisting":{"__symbolic":"reference","name":"CheckboxComponent"},"multi":true}],"template":"<label class=\"componentContainer\">\n\t<div class=\"checkboxContainer\">\n\t\t<input type=\"checkbox\" class=\"checkboxNative\"\n\t\t\t[(ngModel)]=\"innerValue\"\n\t\t\t(change)=\"setInnerValueAndNotify(innerValue); touch()\"\n\t\t\t[disabled]=\"disabled\"\n\t\t/>\n <div class=\"checkboxVisual\">\n <svg *ngIf=\"innerValue\" version=\"1.1\" viewBox=\"0 0 4.2333 4.2333\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"m0.17014 2.7065 1.3073 1.1798 2.5656-3.7404\" stroke=\"currentColor\" fill=\"none\" stroke-width=\".4646px\" />\n </svg>\n </div>\n\t</div>\n\t<div *ngIf=\"caption\" class=\"caption\">{{ caption }}</div>\n</label>\n","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}"]}]}],"members":{"caption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}],"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":2}}]}]}},"DATE_PICKER_TRANSLATIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":8,"character":44},"arguments":["klp.form.date.translations"]},"DatePickerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"MultipleValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"klp-form-date-picker","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":14,"character":23},"useExisting":{"__symbolic":"reference","name":"DatePickerComponent"},"multi":true}],"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","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}"]}]}],"members":{"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":2}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":2}}]}],"sameMonthOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":2}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":2}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":2}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":27,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":27,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":28,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":28,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":29,"character":3},"arguments":[{"__symbolic":"reference","name":"DATE_PICKER_TRANSLATIONS"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":29,"character":37}}]],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","module":"@angular/forms","name":"ControlContainer","line":28,"character":50},{"__symbolic":"reference","name":"any"}]}],"writeValue":[{"__symbolic":"method"}],"dateChanged":[{"__symbolic":"method"}],"getDefaultTranslation":[{"__symbolic":"method"}],"getTranslation":[{"__symbolic":"method"}]}},"KLP_DATE_FORMATS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":25,"character":36},"arguments":["klp.form.date.formats"]},"DATE_TIME_PICKER_TRANSLATIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":26,"character":49},"arguments":["klp.form.dateTime.translations"]},"DATE_PICKER_LOCALE":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":27,"character":38},"arguments":["klp.form.dateTime.locale"]},"matDateFormatsFactory":{"__symbolic":"function","parameters":["component","dateFormats"],"value":{"__symbolic":"binop","operator":"??","left":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"dateFormats"},"arguments":[{"__symbolic":"select","expression":{"__symbolic":"reference","name":"component"},"member":"format"}]},"right":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_NATIVE_DATE_FORMATS","line":30,"character":43}}},"DateTimePickerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"MultipleValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":33,"character":1},"arguments":[{"selector":"klp-form-date-time-picker","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":38,"character":12},"useExisting":{"__symbolic":"reference","name":"DateTimePickerComponent"},"multi":true},{"provide":{"__symbolic":"reference","module":"@angular/material/core","name":"MAT_DATE_FORMATS","line":40,"character":12},"deps":[{"__symbolic":"reference","name":"DateTimePickerComponent"},[{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":41,"character":40}},{"__symbolic":"reference","name":"KLP_DATE_FORMATS"}]],"useFactory":{"__symbolic":"reference","name":"matDateFormatsFactory"}}],"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></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","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}"]}]}],"members":{"minDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":47,"character":2}}]}],"maxDate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":48,"character":2}}]}],"sameMonthOnly":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":2}}]}],"format":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":2}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":51,"character":2}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":52,"character":2}}]}],"showTimeInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":2}}]}],"invalidTimeAsMidnight":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":54,"character":2}}]}],"nativeInputRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":56,"character":2},"arguments":["nativeInput"]}]}],"datePickerRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":57,"character":2},"arguments":["picker"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":75,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":75,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":76,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":76,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":77,"character":3},"arguments":[{"__symbolic":"reference","name":"DATE_TIME_PICKER_TRANSLATIONS"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":77,"character":42}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":78,"character":3},"arguments":[{"__symbolic":"reference","name":"DATE_PICKER_LOCALE"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":78,"character":31}}],null,null],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","module":"@angular/forms","name":"ControlContainer","line":76,"character":50},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"any"},{"__symbolic":"reference","name":"DateAdapter","module":"@angular/material/core","arguments":[{"__symbolic":"reference","name":"Date"}]},{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":80,"character":15}]}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}],"setMinDate":[{"__symbolic":"method"}],"setMaxDate":[{"__symbolic":"method"}],"getSelectedMonths":[{"__symbolic":"method"}],"dateChanged":[{"__symbolic":"method"}],"determineMinAndMaxDates":[{"__symbolic":"method"}],"notifyNewDate":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"nativeValueChanged":[{"__symbolic":"method"}],"resetToNull":[{"__symbolic":"method"}],"formatTime":[{"__symbolic":"method"}],"touchDate":[{"__symbolic":"method"}],"touchHours":[{"__symbolic":"method"}],"touchMinutes":[{"__symbolic":"method"}],"determineAllTouched":[{"__symbolic":"method"}],"getDefaultTranslation":[{"__symbolic":"method"}],"getTranslation":[{"__symbolic":"method"}]}},"EmailInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-email-input","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":23},"useExisting":{"__symbolic":"reference","name":"EmailInputComponent"},"multi":true}],"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","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}"]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}]}},"LoadingIndicatorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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}"]}]}],"members":{"variant":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":2}}]}],"size":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":2}}]}]}},"NumberInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-number-input","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":24},"useExisting":{"__symbolic":"reference","name":"NumberInputComponent"},"multi":true}],"template":"<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n/>\n","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}"]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}]}},"PasswordFieldComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-password-field","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":23},"useExisting":{"__symbolic":"reference","name":"PasswordFieldComponent"},"multi":true}],"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","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}"]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}],"isPasswordConfirm":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":2}}]}]}},"SelectFooterComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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}"]}]}],"members":{"prefix":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":8,"character":2}}]}],"text":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":9,"character":2}}]}]}},"AppSelectOptions":{"__symbolic":"interface"},"SELECT_TRANSLATIONS":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":15,"character":39},"arguments":["klp.form.select.translations"]},"SelectComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"klp-form-select","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":21,"character":23},"useExisting":{"__symbolic":"reference","name":"SelectComponent"},"multi":true}],"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>\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","styles":[":host{display:block}.showErrors ::ng-deep .ng-select-container,:host.showErrors ::ng-deep .ng-select-container{border-color:#ff8000}:host ::ng-deep ng-select.ng-select .ng-select-container{color:#888da8}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#fff;border-color:#3ed778}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container:hover{box-shadow:none}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow{border-color:transparent transparent #999;border-width:0 5px 5px;top:-2px}:host ::ng-deep .ng-select.ng-select-opened>.ng-select-container .ng-arrow:hover{border-color:transparent transparent #666}:host ::ng-deep .ng-select.ng-select-opened.ng-select-bottom>.ng-select-container{border-bottom-left-radius:0;border-bottom-right-radius:0}:host ::ng-deep .ng-select.ng-select-opened.ng-select-top>.ng-select-container{border-top-left-radius:0;border-top-right-radius:0}:host ::ng-deep .ng-select.ng-select-disabled>.ng-select-container{background-color:#f9f9f9}:host ::ng-deep .ng-select .ng-has-value .ng-placeholder{display:none}:host ::ng-deep .ng-select .ng-select-container{align-items:center;background-clip:padding-box;background-color:#fff;border:1px solid #e6ecf5;border-radius:4px;border-radius:2px;box-shadow:none;box-sizing:border-box;color:#888da8;display:flex;flex-direction:row;font-size:1rem;font-size:14px;line-height:1.5;margin:0;min-height:42px;outline:none;overflow:visible;padding:.375rem .75rem;transition-delay:0s;transition-duration:.2s;transition-property:all;transition-timing-function:ease-in;width:100%}:host ::ng-deep .ng-select .ng-select-container:hover{box-shadow:0 1px 0 rgba(0,0,0,.06)}:host ::ng-deep .ng-select .ng-select-container .ng-value-container{align-items:center;overflow:hidden;padding-left:10px}:host ::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#aaa}:host ::ng-deep .ng-select.ng-select-single .ng-select-container{height:42px}:host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{left:0;padding-left:10px;padding-right:50px;top:5px}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{background-color:#f9f9f9;border:1px solid #e3e3e3}:host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value .ng-value-label{padding:0 5px}:host ::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .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}"]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":2}}]}],"options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":25,"character":2}}]}],"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":2}}]}],"multipleDisplayedAsAmount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":2}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":2}}]}],"dropdownPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":2}}]}],"customSearchFn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":2}}]}],"footerElement":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":2}}]}],"onSearch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":36,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":36,"character":15}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":37,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":37,"character":15}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":38,"character":3},"arguments":[{"__symbolic":"reference","name":"SELECT_TRANSLATIONS"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":38,"character":32}}]],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","module":"@angular/forms","name":"ControlContainer","line":37,"character":50},{"__symbolic":"reference","name":"any"}]}],"onTextInput":[{"__symbolic":"method"}],"getDefaultTranslation":[{"__symbolic":"method"}],"getTranslation":[{"__symbolic":"method"}]}},"SortableItemsComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"klp-form-sortable-items","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":10,"character":23},"useExisting":{"__symbolic":"reference","name":"SortableItemsComponent"},"multi":true}],"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","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}"]}]}],"members":{"template":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":13,"character":2},"arguments":[{"__symbolic":"reference","module":"@angular/core","name":"TemplateRef","line":13,"character":15}]}]}],"sortableItemSize":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":2}}]}],"useCustomScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":2}}]}],"ngOnInit":[{"__symbolic":"method"}],"scrollPage":[{"__symbolic":"method"}],"stopScrolling":[{"__symbolic":"method"}]}},"TextInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-text-input","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":24},"useExisting":{"__symbolic":"reference","name":"TextInputComponent"},"multi":true}],"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","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}"]}]}],"members":{"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}],"type":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":2}}]}],"clearable":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":2}}]}],"icon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":2}}]}]}},"ToggleComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-toggle","providers":[{"provide":{"__symbolic":"reference","module":"@angular/forms","name":"NG_VALUE_ACCESSOR","line":8,"character":23},"useExisting":{"__symbolic":"reference","name":"ToggleComponent"},"multi":true}],"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","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}"]}]}],"members":{}},"ValueAccessorBase":{"__symbolic":"class","arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":15,"character":1},"arguments":[{"selector":"","template":""}]}],"members":{"disabled":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":2}}]}],"formControlName":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":2}}]}],"formControl":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":2}}]}],"onTouch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":28,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":34,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":34,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":35,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":35,"character":11}}]],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","module":"@angular/forms","name":"ControlContainer","line":35,"character":50}]}],"ngOnInit":[{"__symbolic":"method"}],"isInErrorState":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"touch":[{"__symbolic":"method"}],"writeValue":[{"__symbolic":"method"}],"registerOnChange":[{"__symbolic":"method"}],"registerOnTouched":[{"__symbolic":"method"}],"setInnerValueAndNotify":[{"__symbolic":"method"}],"resetToNull":[{"__symbolic":"method"}],"hasValidator":[{"__symbolic":"method"}]}},"MultipleValueAccessorBase":{"__symbolic":"class","arity":1,"extends":{"__symbolic":"reference","name":"ValueAccessorBase"},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"","template":""}]}],"members":{"multiple":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":14,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":14,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":15,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":15,"character":11}}]],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"},{"__symbolic":"reference","module":"@angular/forms","name":"ControlContainer","line":15,"character":50}]}],"writeValue":[{"__symbolic":"method"}],"setInnerValueAndNotify":[{"__symbolic":"method"}]}},"invalidFieldsSymbol":{"__symbolic":"call","expression":{"__symbolic":"reference","name":"Symbol"},"arguments":["Not all fields are valid"]},"SubFormDirective":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Directive","line":7,"character":1},"arguments":[{"selector":"klp-sub-form"}]}],"members":{"injectInto":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":2}}]}],"at":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":2}}]}]}},"FormComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":16,"character":1},"arguments":[{"selector":"klp-form","template":"<form>\n\t<ng-content></ng-content>\n</form>\n\n\n","styles":[":host{display:block}:host.row{display:flex}"]}]}],"members":{"formGroup":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":22,"character":2}}]}],"patchValueInterceptor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":2}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":31,"character":14}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":31,"character":26}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":31,"character":69}}]],"parameters":[{"__symbolic":"reference","name":"FormComponent"},{"__symbolic":"reference","name":"SubFormDirective"}]}],"ngOnInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"addSupportForPatchValueInterceptor":[{"__symbolic":"method"}],"registerControl":[{"__symbolic":"method"}],"unregisterControl":[{"__symbolic":"method"}],"addFormGroupControls":[{"__symbolic":"method"}],"addFormArrayControls":[{"__symbolic":"method"}],"getAllFormControls":[{"__symbolic":"method"}],"addFormControl":[{"__symbolic":"method"}],"disableInactiveFormControl":[{"__symbolic":"method"}],"trySubmit":[{"__symbolic":"method"}],"setDisabledStatesForAllControls":[{"__symbolic":"method"}]}},"FormCaptionComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"klp-form-caption","template":"<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n","styles":[":host{display:block}"]}]}],"members":{"contentRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":10,"character":2},"arguments":["contentRef"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":12,"character":14}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":12,"character":22}}]],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"FORM_ERROR_MESSAGES":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":7,"character":39},"arguments":["form.error.messages"]},"DEFAULT_ERROR_MESSAGES":{"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"},"FormElementComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":21,"character":1},"arguments":[{"selector":"klp-form-element","template":"<ng-template #errorRef>\n\t<div *ngIf=\"getErrorToShow()\" class=\"errorContainer\">\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<ng-container *ngIf=\"direction === 'horizontal'\" [ngTemplateOutlet]=\"errorRef\"></ng-container>\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;margin-bottom:1rem}.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;margin-left:40%}.errorContainer.d30-70{margin-left:30%}"]}]}],"members":{"caption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":2}}]}],"direction":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":2}}]}],"captionSpacing":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":2}}]}],"spaceDistribution":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":2}}]}],"swapInputAndCaption":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":2}}]}],"internalComponentRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":33,"character":2},"arguments":["internalComponentRef"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":41,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":41,"character":11}}],[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":42,"character":3},"arguments":[{"__symbolic":"reference","name":"FORM_ERROR_MESSAGES"}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":42,"character":32}}]],"parameters":[{"__symbolic":"reference","name":"FormComponent"},{"__symbolic":"reference","name":"CustomErrorMessages"}]}],"substituteParameters":[{"__symbolic":"method"}],"registerControl":[{"__symbolic":"method"}],"unregisterControl":[{"__symbolic":"method"}],"getAttachedControl":[{"__symbolic":"method"}],"registerErrorHandler":[{"__symbolic":"method"}],"registerCaption":[{"__symbolic":"method"}],"getErrorToShow":[{"__symbolic":"method"}],"getCustomErrorHandler":[{"__symbolic":"method"}],"showDefaultError":[{"__symbolic":"method"}],"getScrollableParent":[{"__symbolic":"method"}],"scrollTo":[{"__symbolic":"method"}],"isRequired":[{"__symbolic":"method"}],"getErrorMessage":[{"__symbolic":"method"}]}},"FormErrorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"klp-form-error","template":"<ng-template #contentRef>\n\t<ng-content></ng-content>\n</ng-template>\n","styles":[":host{display:block}"]}]}],"members":{"error":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}],"contentRef":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":13,"character":2},"arguments":["contentRef"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":14,"character":14}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":14,"character":22}}]],"parameters":[{"__symbolic":"reference","name":"FormElementComponent"}]}],"ngOnInit":[{"__symbolic":"method"}]}},"FormSubmitButtonComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"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%}"]}]}],"members":{"isLoading":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":2}}]}],"fullWidth":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":2}}]}],"variant":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":2}}]}],"submitCallback":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":2}}]}],"_":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":15,"character":2},"arguments":["class._fullWidth"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Host","line":19,"character":14}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":19,"character":22}}]],"parameters":[{"__symbolic":"reference","name":"FormComponent"}]}],"submitForm":[{"__symbolic":"method"}]}},"invalidDateKey":"--invalid_date--","dateValidator":{"__symbolic":"function"},"FormErrorMessages":{"__symbolic":"interface"},"CustomErrorMessages":{"__symbolic":"interface"},"KlpDateFormats":{"__symbolic":"interface"},"ErrorTypes":{"__symbolic":"interface"},"ɵa":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"imports":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":10,"character":11},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":10,"character":32},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":10,"character":52},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":10,"character":73},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":10,"character":89}],"exports":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":11,"character":11},{"__symbolic":"reference","module":"@angular/material/form-field","name":"MatFormFieldModule","line":11,"character":32},{"__symbolic":"reference","module":"@angular/material/core","name":"MatNativeDateModule","line":11,"character":52},{"__symbolic":"reference","module":"@angular/material/input","name":"MatInputModule","line":11,"character":73},{"__symbolic":"reference","module":"@angular/material/button","name":"MatButtonModule","line":11,"character":89}],"providers":[{"__symbolic":"reference","module":"@angular/material/datepicker","name":"MatDatepickerModule","line":12,"character":13}]}]}],"members":{}}},"origins":{"NgxEnhancyFormsModule":"./lib/ngx-enhancy-forms.module","ButtonComponent":"./lib/elements/button/button.component","CheckboxComponent":"./lib/elements/checkbox/checkbox.component","DATE_PICKER_TRANSLATIONS":"./lib/elements/date-picker/date-picker.component","DatePickerComponent":"./lib/elements/date-picker/date-picker.component","KLP_DATE_FORMATS":"./lib/elements/date-time-picker/date-time-picker.component","DATE_TIME_PICKER_TRANSLATIONS":"./lib/elements/date-time-picker/date-time-picker.component","DATE_PICKER_LOCALE":"./lib/elements/date-time-picker/date-time-picker.component","matDateFormatsFactory":"./lib/elements/date-time-picker/date-time-picker.component","DateTimePickerComponent":"./lib/elements/date-time-picker/date-time-picker.component","EmailInputComponent":"./lib/elements/email/email-input.component","LoadingIndicatorComponent":"./lib/elements/loading-indicator/loading-indicator.component","NumberInputComponent":"./lib/elements/number-input/number-input.component","PasswordFieldComponent":"./lib/elements/password-field/password-field.component","SelectFooterComponent":"./lib/elements/select/select-footer/select-footer.component","AppSelectOptions":"./lib/elements/select/select.component","SELECT_TRANSLATIONS":"./lib/elements/select/select.component","SelectComponent":"./lib/elements/select/select.component","SortableItemsComponent":"./lib/elements/sortable-items/sortable-items.component","TextInputComponent":"./lib/elements/text-input/text-input.component","ToggleComponent":"./lib/elements/toggle/toggle.component","ValueAccessorBase":"./lib/elements/value-accessor-base/value-accessor-base.component","MultipleValueAccessorBase":"./lib/elements/value-accessor-base/multiple-value-accessor-base.component","invalidFieldsSymbol":"./lib/form/form.component","SubFormDirective":"./lib/form/form.component","FormComponent":"./lib/form/form.component","FormCaptionComponent":"./lib/form/form-caption/form-caption.component","FORM_ERROR_MESSAGES":"./lib/form/form-element/form-element.component","DEFAULT_ERROR_MESSAGES":"./lib/form/form-element/form-element.component","FormElementComponent":"./lib/form/form-element/form-element.component","FormErrorComponent":"./lib/form/form-error/form-error.component","FormSubmitButtonComponent":"./lib/form/form-submit-button/form-submit-button.component","invalidDateKey":"./lib/validators/dateValidator","dateValidator":"./lib/validators/dateValidator","FormErrorMessages":"./lib/types","CustomErrorMessages":"./lib/types","KlpDateFormats":"./lib/types","ErrorTypes":"./lib/types","ɵa":"./lib/material.module"},"importAs":"@klippa/ngx-enhancy-forms"}
|
|
@@ -2,17 +2,20 @@ import { AfterViewInit, ChangeDetectorRef, ElementRef, InjectionToken, OnChanges
|
|
|
2
2
|
import { ControlContainer } from '@angular/forms';
|
|
3
3
|
import { invalidDateKey } from '../../validators/dateValidator';
|
|
4
4
|
import { DateFilterFn, MatDatepicker } from '@angular/material/datepicker';
|
|
5
|
-
import { MatDateFormats } from '@angular/material/core';
|
|
5
|
+
import { DateAdapter, MatDateFormats } from '@angular/material/core';
|
|
6
6
|
import { KlpDateFormats } from '../../types';
|
|
7
7
|
import { FormElementComponent } from '../../form/form-element/form-element.component';
|
|
8
8
|
import { MultipleValueAccessorBase } from '../value-accessor-base/multiple-value-accessor-base.component';
|
|
9
9
|
export declare const KLP_DATE_FORMATS: InjectionToken<KlpDateFormats>;
|
|
10
10
|
export declare const DATE_TIME_PICKER_TRANSLATIONS: InjectionToken<any>;
|
|
11
|
+
export declare const DATE_PICKER_LOCALE: InjectionToken<any>;
|
|
11
12
|
export declare function matDateFormatsFactory(component: DateTimePickerComponent, dateFormats?: KlpDateFormats): MatDateFormats;
|
|
12
13
|
export declare class DateTimePickerComponent extends MultipleValueAccessorBase<Date | typeof invalidDateKey> implements OnInit, AfterViewInit, OnChanges {
|
|
13
14
|
protected parent: FormElementComponent;
|
|
14
15
|
protected controlContainer: ControlContainer;
|
|
15
16
|
private translations;
|
|
17
|
+
private datePickerLocale;
|
|
18
|
+
private dateAdapter;
|
|
16
19
|
private cdr;
|
|
17
20
|
minDate: Date;
|
|
18
21
|
maxDate: Date;
|
|
@@ -34,7 +37,7 @@ export declare class DateTimePickerComponent extends MultipleValueAccessorBase<D
|
|
|
34
37
|
private dateTouched;
|
|
35
38
|
private hoursTouched;
|
|
36
39
|
private minutesTouched;
|
|
37
|
-
constructor(parent: FormElementComponent, controlContainer: ControlContainer, translations: any, cdr: ChangeDetectorRef);
|
|
40
|
+
constructor(parent: FormElementComponent, controlContainer: ControlContainer, translations: any, datePickerLocale: any, dateAdapter: DateAdapter<Date>, cdr: ChangeDetectorRef);
|
|
38
41
|
ngOnInit(): void;
|
|
39
42
|
ngAfterViewInit(): void;
|
|
40
43
|
ngOnChanges(changes: SimpleChanges): void;
|