@klippa/ngx-enhancy-forms 7.5.1 → 7.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bundles/klippa-ngx-enhancy-forms.umd.js +18 -7
- package/bundles/klippa-ngx-enhancy-forms.umd.js.map +1 -1
- package/bundles/klippa-ngx-enhancy-forms.umd.min.js +1 -1
- package/bundles/klippa-ngx-enhancy-forms.umd.min.js.map +1 -1
- package/esm2015/lib/elements/date-time-picker/date-time-picker.component.js +2 -2
- package/esm2015/lib/elements/email/email-input.component.js +2 -2
- package/esm2015/lib/elements/file-input/file-input.component.js +2 -2
- package/esm2015/lib/elements/number-input/number-input.component.js +16 -3
- package/esm2015/lib/elements/password-field/password-field.component.js +2 -2
- package/fesm2015/klippa-ngx-enhancy-forms.js +19 -6
- package/fesm2015/klippa-ngx-enhancy-forms.js.map +1 -1
- package/klippa-ngx-enhancy-forms.metadata.json +1 -1
- package/lib/elements/number-input/number-input.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -901,7 +901,7 @@
|
|
|
901
901
|
EmailInputComponent.decorators = [
|
|
902
902
|
{ type: core.Component, args: [{
|
|
903
903
|
selector: 'klp-form-email-input',
|
|
904
|
-
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",
|
|
904
|
+
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\t[disabled]=\"disabled\"\n/>\n",
|
|
905
905
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: EmailInputComponent, multi: true }],
|
|
906
906
|
styles: [":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#f6cdd1;border-color:#dc3545}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]
|
|
907
907
|
},] }
|
|
@@ -932,20 +932,31 @@
|
|
|
932
932
|
var NumberInputComponent = /** @class */ (function (_super) {
|
|
933
933
|
__extends(NumberInputComponent, _super);
|
|
934
934
|
function NumberInputComponent() {
|
|
935
|
-
|
|
935
|
+
var _this = _super.apply(this, __spread(arguments)) || this;
|
|
936
|
+
_this.parseNumber = false;
|
|
937
|
+
return _this;
|
|
936
938
|
}
|
|
939
|
+
NumberInputComponent.prototype.setInnerValueAndNotify = function (value) {
|
|
940
|
+
if (this.parseNumber && typeof value === "string") {
|
|
941
|
+
_super.prototype.setInnerValueAndNotify.call(this, Number(value));
|
|
942
|
+
}
|
|
943
|
+
else {
|
|
944
|
+
_super.prototype.setInnerValueAndNotify.call(this, value);
|
|
945
|
+
}
|
|
946
|
+
};
|
|
937
947
|
return NumberInputComponent;
|
|
938
948
|
}(ValueAccessorBase));
|
|
939
949
|
NumberInputComponent.decorators = [
|
|
940
950
|
{ type: core.Component, args: [{
|
|
941
951
|
selector: 'klp-form-number-input',
|
|
942
|
-
template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n/>\n",
|
|
952
|
+
template: "<input\n\ttype=\"number\"\n\tclass=\"form-control\"\n\t[(ngModel)]=\"innerValue\"\n\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t[ngClass]=\"{showErrors: isInErrorState()}\"\n\t[disabled]=\"disabled\"\n/>\n",
|
|
943
953
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: NumberInputComponent, multi: true }],
|
|
944
954
|
styles: [":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#f6cdd1;border-color:#dc3545}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]
|
|
945
955
|
},] }
|
|
946
956
|
];
|
|
947
957
|
NumberInputComponent.propDecorators = {
|
|
948
|
-
placeholder: [{ type: core.Input }]
|
|
958
|
+
placeholder: [{ type: core.Input }],
|
|
959
|
+
parseNumber: [{ type: core.Input }]
|
|
949
960
|
};
|
|
950
961
|
|
|
951
962
|
var PasswordFieldComponent = /** @class */ (function (_super) {
|
|
@@ -961,7 +972,7 @@
|
|
|
961
972
|
PasswordFieldComponent.decorators = [
|
|
962
973
|
{ type: core.Component, args: [{
|
|
963
974
|
selector: 'klp-form-password-field',
|
|
964
|
-
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",
|
|
975
|
+
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\t[disabled]=\"disabled\"\n/>\n",
|
|
965
976
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: PasswordFieldComponent, multi: true }],
|
|
966
977
|
styles: [":host,input{display:block}input{-moz-transition:all .2s ease-in;-ms-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;color:#888da8;font-size:14px;height:42px;outline:none;padding:.375rem .625rem;transition:all .2s ease-in;width:100%}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder,input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{border-color:#3ed778;box-shadow:none;outline:0 none}input.input-sm{height:30px}input.input-lg{height:50px}input.error{background-color:#f6cdd1;border-color:#dc3545}input.valid{background-color:#ebfaeb;border-color:#37c936;color:#278d26}.showErrors{border-color:#ff8000}"]
|
|
967
978
|
},] }
|
|
@@ -1751,7 +1762,7 @@
|
|
|
1751
1762
|
DateTimePickerComponent.decorators = [
|
|
1752
1763
|
{ type: core.Component, args: [{
|
|
1753
1764
|
selector: 'klp-form-date-time-picker',
|
|
1754
|
-
template: "<div class=\"componentContainer\" [ngClass]=\"{showErrors: isInErrorState()}\">\n\t<div class=\"dateContainer\" [ngClass]=\"{noRightBorder: !showTimeInput && clearable && !disabled, disabled: disabled}\">\n\t\t<mat-form-field floatLabel=\"never\">\n\t\t\t<div *ngIf=\"multiple\" class=\"daysSelectedCaption\" (click)=\"picker.open()\" [ngClass]=\"{disabled: disabled}\">\n\t\t\t\t<ng-container *ngIf=\"selectedDates.length >= 2\">\n\t\t\t\t\t<span>{{getTranslation('daysSelected', selectedDates.length)}}</span>\n\t\t\t\t\t<span *ngIf=\"getSelectedMonths() === 1\">{{getTranslation('selectedInMonth', selectedDates[0])}}</span>\n\t\t\t\t</ng-container>\n\t\t\t\t<span *ngIf=\"selectedDates.length === 1\">{{getTranslation('selectedDate', selectedDates[0])}}</span>\n\t\t\t\t<span *ngIf=\"selectedDates.length === 0\" class=\"placeholderForMultipleSelection\">{{getTranslation('selectDays')}}</span>\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t#nativeInput\n\t\t\t\tmatInput\n\t\t\t\t[matDatepicker]=\"picker\"\n\t\t\t\t[matDatepickerFilter]=\"filterDates\"\n\t\t\t\t[(ngModel)]=\"valueForMaterialDatePicker\"\n\t\t\t\t(dateInput)=\"dateChanged($event)\"\n\t\t\t\t(input)=\"nativeValueChanged()\"\n\t\t\t\t[min]=\"minDateStartOfDay\"\n\t\t\t\t[max]=\"maxDateEndOfDay\"\n\t\t\t\t[placeholder]=\"getTranslation('placeholder')\"\n\t\t\t\t(click)=\"picker.open()\"\n\t\t\t\t(blur)=\"touchDate()\"\n\t\t\t\t[ngClass]=\"{inputForMultipleDays: multiple}\"\n\t\t\t>\n\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t<mat-datepicker\n\t\t\t\t#picker\n\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t\t[startAt]=\"openPickerOnDate\"\n\t\t\t></mat-datepicker>\n\t\t</mat-form-field>\n\t</div>\n\t<div class=\"timeContainer\" *ngIf=\"showTimeInput\" [ngClass]=\"{disabled: disabled}\">\n\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (ngModelChange)=\"notifyNewDate()\" (blur)=\"formatTime(); touchHours()\">\n\t\t<div class=\"divider\">:</div>\n\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (ngModelChange)=\"notifyNewDate()\" (blur)=\"formatTime(); touchMinutes()\">\n\t</div>\n\t<button *ngIf=\"clearable && !disabled\" class=\"clearButton\" (click)=\"resetToNull()\" [ngClass]=\"{withoutSpacing: !showTimeInput}\">\u00D7</button>\n</div>\n",
|
|
1765
|
+
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\t[disabled]=\"disabled\"\n\t\t\t>\n\t\t\t<mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n\t\t\t<mat-datepicker\n\t\t\t\t#picker\n\t\t\t\t[dateClass]=\"isSelected\"\n\t\t\t\t[startAt]=\"openPickerOnDate\"\n\t\t\t></mat-datepicker>\n\t\t</mat-form-field>\n\t</div>\n\t<div class=\"timeContainer\" *ngIf=\"showTimeInput\" [ngClass]=\"{disabled: disabled}\">\n\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"hours\" (ngModelChange)=\"notifyNewDate()\" (blur)=\"formatTime(); touchHours()\">\n\t\t<div class=\"divider\">:</div>\n\t\t<input maxlength=\"2\" placeholder=\"__\" [disabled]=\"disabled\" [(ngModel)]=\"minutes\" (ngModelChange)=\"notifyNewDate()\" (blur)=\"formatTime(); touchMinutes()\">\n\t</div>\n\t<button *ngIf=\"clearable && !disabled\" class=\"clearButton\" (click)=\"resetToNull()\" [ngClass]=\"{withoutSpacing: !showTimeInput}\">\u00D7</button>\n</div>\n",
|
|
1755
1766
|
providers: [
|
|
1756
1767
|
{ provide: forms.NG_VALUE_ACCESSOR, useExisting: DateTimePickerComponent, multi: true },
|
|
1757
1768
|
{
|
|
@@ -1839,7 +1850,7 @@
|
|
|
1839
1850
|
FileInputComponent.decorators = [
|
|
1840
1851
|
{ type: core.Component, args: [{
|
|
1841
1852
|
selector: 'klp-form-file-input',
|
|
1842
|
-
template: "<div class=\"componentContainer\">\n\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\">\n\t\tUpload a file\n\t\t<input
|
|
1853
|
+
template: "<div class=\"componentContainer\">\n\t<klp-form-button class=\"uploadButton\" [isLoading]=\"isLoading\">\n\t\tUpload a file\n\t\t<input\n\t\t\ttype=\"file\"\n\t\t\t(change)=\"onChange($event.target.files)\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[disabled]=\"disabled\"\n\t\t>\n\t</klp-form-button>\n\t<div class=\"fileName\">\n\t\t{{getFileNames()}}\n\t</div>\n\t<klp-form-button class=\"clearButton\" variant=\"white\" *ngIf=\"shouldShowClearButton()\" (click)=\"resetToNull()\">X</klp-form-button>\n</div>\n",
|
|
1843
1854
|
providers: [{ provide: forms.NG_VALUE_ACCESSOR, useExisting: FileInputComponent, multi: true }],
|
|
1844
1855
|
styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{align-items:center;display:flex}.uploadButton{flex:0 0 auto;position:relative}.uploadButton input{bottom:0;cursor:pointer;left:0;opacity:0;position:absolute;right:0;top:0}.fileName{color:#515365;flex:1 1 0px;margin-left:.625rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.clearButton{flex:0 0 auto}"]
|
|
1845
1856
|
},] }
|