@klippa/ngx-enhancy-forms 14.3.0 → 14.5.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/esm2020/lib/elements/text-input/text-input.component.mjs +9 -3
- package/fesm2015/klippa-ngx-enhancy-forms.mjs +8 -2
- package/fesm2015/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/fesm2020/klippa-ngx-enhancy-forms.mjs +8 -2
- package/fesm2020/klippa-ngx-enhancy-forms.mjs.map +1 -1
- package/lib/elements/text-input/text-input.component.d.ts +3 -1
- package/package.json +1 -1
|
@@ -9,14 +9,16 @@ export class TextInputComponent extends ValueAccessorBase {
|
|
|
9
9
|
super(...arguments);
|
|
10
10
|
this.type = 'text';
|
|
11
11
|
this.clearable = false;
|
|
12
|
+
this.hasBorderLeft = true;
|
|
13
|
+
this.hasBorderRight = true;
|
|
12
14
|
this.onBlur = new EventEmitter();
|
|
13
15
|
}
|
|
14
16
|
}
|
|
15
17
|
TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
-
TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, 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
|
|
18
|
+
TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, 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[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.noBorderLeft{border-left:none}input.noBorderRight{border-right:none}.clearIcon{position:absolute;right:.625rem;top:7px;font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
17
19
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
18
20
|
type: Component,
|
|
19
|
-
args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: 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
|
|
21
|
+
args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: 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[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.noBorderLeft{border-left:none}input.noBorderRight{border-right:none}.clearIcon{position:absolute;right:.625rem;top:7px;font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"] }]
|
|
20
22
|
}], propDecorators: { placeholder: [{
|
|
21
23
|
type: Input
|
|
22
24
|
}], type: [{
|
|
@@ -25,7 +27,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
25
27
|
type: Input
|
|
26
28
|
}], icon: [{
|
|
27
29
|
type: Input
|
|
30
|
+
}], hasBorderLeft: [{
|
|
31
|
+
type: Input
|
|
32
|
+
}], hasBorderRight: [{
|
|
33
|
+
type: Input
|
|
28
34
|
}], onBlur: [{
|
|
29
35
|
type: Output
|
|
30
36
|
}] } });
|
|
31
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGlwcGEvbmd4LWVuaGFuY3ktZm9ybXMvc3JjL2xpYi9lbGVtZW50cy90ZXh0LWlucHV0L3RleHQtaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvdGV4dC1pbnB1dC90ZXh0LWlucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDckUsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDakQsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sc0RBQXNELENBQUM7Ozs7QUFRdkYsTUFBTSxPQUFPLGtCQUFtQixTQUFRLGlCQUF5QjtJQU5qRTs7UUFRVSxTQUFJLEdBQXdCLE1BQU0sQ0FBQztRQUNuQyxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBRWxCLGtCQUFhLEdBQUcsSUFBSSxDQUFDO1FBQ3JCLG1CQUFjLEdBQUcsSUFBSSxDQUFDO1FBQ3JCLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBUSxDQUFDO0tBQzVDOzsrR0FSWSxrQkFBa0I7bUdBQWxCLGtCQUFrQiwyT0FGbkIsQ0FBQyxFQUFDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxXQUFXLEVBQUUsa0JBQWtCLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBQyxDQUFDLGlEQ1J4RixpdEJBZ0JBOzJGRE5hLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDQyxxQkFBcUIsYUFHcEIsQ0FBQyxFQUFDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxXQUFXLG9CQUFvQixFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUMsQ0FBQzs4QkFHOUUsV0FBVztzQkFBbkIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNJLE1BQU07c0JBQWYsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtOR19WQUxVRV9BQ0NFU1NPUn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtWYWx1ZUFjY2Vzc29yQmFzZX0gZnJvbSAnLi4vdmFsdWUtYWNjZXNzb3ItYmFzZS92YWx1ZS1hY2Nlc3Nvci1iYXNlLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogJ2tscC1mb3JtLXRleHQtaW5wdXQnLFxuXHR0ZW1wbGF0ZVVybDogJy4vdGV4dC1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG5cdHN0eWxlVXJsczogWycuL3RleHQtaW5wdXQuY29tcG9uZW50LnNjc3MnXSxcblx0cHJvdmlkZXJzOiBbe3Byb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLCB1c2VFeGlzdGluZzogVGV4dElucHV0Q29tcG9uZW50LCBtdWx0aTogdHJ1ZX1dLFxufSlcbmV4cG9ydCBjbGFzcyBUZXh0SW5wdXRDb21wb25lbnQgZXh0ZW5kcyBWYWx1ZUFjY2Vzc29yQmFzZTxzdHJpbmc+IHtcblx0QElucHV0KCkgcGxhY2Vob2xkZXI6IHN0cmluZztcblx0QElucHV0KCkgdHlwZTogJ3RleHQnIHwgJ3Bhc3N3b3JkJyA9ICd0ZXh0Jztcblx0QElucHV0KCkgY2xlYXJhYmxlID0gZmFsc2U7XG5cdEBJbnB1dCgpIGljb246ICdzZWFyY2gnO1xuXHRASW5wdXQoKSBoYXNCb3JkZXJMZWZ0ID0gdHJ1ZTtcblx0QElucHV0KCkgaGFzQm9yZGVyUmlnaHQgPSB0cnVlO1xuXHRAT3V0cHV0KCkgb25CbHVyID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xufVxuIiwiPGRpdiBjbGFzcz1cImNvbXBvbmVudENvbnRhaW5lclwiPlxuXHQ8bmctY29udGFpbmVyICpuZ0lmPVwiaWNvbj8ubGVuZ3RoID4gMFwiPlxuXHRcdDxpIGNsYXNzPVwidGktc2VhcmNoXCIgKm5nSWY9XCJpY29uID09PSAnc2VhcmNoJ1wiPjwvaT5cblx0PC9uZy1jb250YWluZXI+XG5cdDxpbnB1dFxuXHRcdFt0eXBlXT1cInR5cGVcIlxuXHRcdFsobmdNb2RlbCldPVwiaW5uZXJWYWx1ZVwiXG5cdFx0W25nQ2xhc3NdPVwie3Nob3dFcnJvcnM6IGlzSW5FcnJvclN0YXRlKCksIGhhc0ljb246IGljb24/Lmxlbmd0aCA+IDAsIGhhc0NsZWFyQnV0dG9uOiBjbGVhcmFibGUsIG5vQm9yZGVyTGVmdDogIWhhc0JvcmRlckxlZnQsIG5vQm9yZGVyUmlnaHQ6ICFoYXNCb3JkZXJSaWdodH1cIlxuXHRcdChpbnB1dCk9XCJzZXRJbm5lclZhbHVlQW5kTm90aWZ5KCRldmVudC50YXJnZXQudmFsdWUpXCJcblx0XHRbcGxhY2Vob2xkZXJdPVwicGxhY2Vob2xkZXIgPyBwbGFjZWhvbGRlciA6ICcnXCJcblx0XHQoYmx1cik9XCJ0b3VjaCgpOyBvbkJsdXIuZW1pdCgpXCJcblx0XHRbZGlzYWJsZWRdPSdkaXNhYmxlZCdcblx0XHQjbmF0aXZlSW5wdXRSZWZcblx0Lz5cblx0PGRpdiBjbGFzcz1cImNsZWFySWNvblwiICpuZ0lmPVwiY2xlYXJhYmxlICYmIGlubmVyVmFsdWU/Lmxlbmd0aCA+IDBcIiAoY2xpY2spPVwicmVzZXRUb051bGwoKVwiPsOXPC9kaXY+XG48L2Rpdj5cbiJdfQ==
|
|
@@ -1066,14 +1066,16 @@ class TextInputComponent extends ValueAccessorBase {
|
|
|
1066
1066
|
super(...arguments);
|
|
1067
1067
|
this.type = 'text';
|
|
1068
1068
|
this.clearable = false;
|
|
1069
|
+
this.hasBorderLeft = true;
|
|
1070
|
+
this.hasBorderRight = true;
|
|
1069
1071
|
this.onBlur = new EventEmitter();
|
|
1070
1072
|
}
|
|
1071
1073
|
}
|
|
1072
1074
|
TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1073
|
-
TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, 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
|
|
1075
|
+
TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.8", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, 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[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.noBorderLeft{border-left:none}input.noBorderRight{border-right:none}.clearIcon{position:absolute;right:.625rem;top:7px;font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1074
1076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
1075
1077
|
type: Component,
|
|
1076
|
-
args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: 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
|
|
1078
|
+
args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: 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[(ngModel)]=\"innerValue\"\n\t\t[ngClass]=\"{showErrors: isInErrorState(), hasIcon: icon?.length > 0, hasClearButton: clearable, noBorderLeft: !hasBorderLeft, noBorderRight: !hasBorderRight}\"\n\t\t(input)=\"setInnerValueAndNotify($event.target.value)\"\n\t\t[placeholder]=\"placeholder ? placeholder : ''\"\n\t\t(blur)=\"touch(); onBlur.emit()\"\n\t\t[disabled]='disabled'\n\t\t#nativeInputRef\n\t/>\n\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}i{position:absolute;left:.625rem;top:14px}input{outline:none;display:block;border:1px solid #e6ecf5;border-radius:2px;box-shadow:none;height:42px;width:100%;padding:.375rem .625rem;font-size:14px;color:#888da8;transition:all .2s ease-in;-webkit-transition:all .2s ease-in;-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-ms-transition:all .2s ease-in}input::-webkit-input-placeholder{color:#adadad}input:-moz-placeholder{color:#adadad}input::-moz-placeholder{color:#adadad}input:-ms-input-placeholder{color:#adadad}input:focus{outline:0 none;box-shadow:none;border-color:#3ed778}input.input-sm{height:30px}input.input-lg{height:50px}input.error{border-color:#dc3545;background-color:#f6cdd1}input.valid{border-color:#37c936;background-color:#ebfaeb;color:#278d26}input.hasIcon{padding-left:1.875rem}input.hasClearButton{padding-right:1.875rem}input.noBorderLeft{border-left:none}input.noBorderRight{border-right:none}.clearIcon{position:absolute;right:.625rem;top:7px;font-size:18px;cursor:pointer}.showErrors{border-color:#ff8000}\n"] }]
|
|
1077
1079
|
}], propDecorators: { placeholder: [{
|
|
1078
1080
|
type: Input
|
|
1079
1081
|
}], type: [{
|
|
@@ -1082,6 +1084,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
|
|
|
1082
1084
|
type: Input
|
|
1083
1085
|
}], icon: [{
|
|
1084
1086
|
type: Input
|
|
1087
|
+
}], hasBorderLeft: [{
|
|
1088
|
+
type: Input
|
|
1089
|
+
}], hasBorderRight: [{
|
|
1090
|
+
type: Input
|
|
1085
1091
|
}], onBlur: [{
|
|
1086
1092
|
type: Output
|
|
1087
1093
|
}] } });
|