@klippa/ngx-enhancy-forms 18.22.2 → 18.22.3
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.
|
@@ -12,6 +12,7 @@ export class TextInputComponent extends ValueAccessorBase {
|
|
|
12
12
|
this.clearable = false;
|
|
13
13
|
this.hasBorderLeft = true;
|
|
14
14
|
this.hasBorderRight = true;
|
|
15
|
+
this.size = 'medium';
|
|
15
16
|
this.onBlur = new EventEmitter();
|
|
16
17
|
}
|
|
17
18
|
togglePeakPassword() {
|
|
@@ -24,11 +25,11 @@ export class TextInputComponent extends ValueAccessorBase {
|
|
|
24
25
|
return this.isPeekingPassword ? 'text' : 'password';
|
|
25
26
|
}
|
|
26
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
27
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", passwordPeekIcon: "passwordPeekIcon" }, 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]=\"getType()\"\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=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t\t<button class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</button>\n\t</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}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.peakBtn{border:none;background:transparent;height:100%;padding:0}.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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] }); }
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", passwordPeekIcon: "passwordPeekIcon", size: "size" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{smallSized: size === 'small'}\">\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]=\"getType()\"\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=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t\t<button class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</button>\n\t</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}.componentContainer.smallSized input{height:32px}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}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.peakBtn{border:none;background:transparent;height:100%;padding:0}.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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] }); }
|
|
28
29
|
}
|
|
29
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
30
31
|
type: Component,
|
|
31
|
-
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]=\"getType()\"\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=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t\t<button class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</button>\n\t</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}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.peakBtn{border:none;background:transparent;height:100%;padding:0}.showErrors{border-color:#ff8000}\n"] }]
|
|
32
|
+
args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{smallSized: size === 'small'}\">\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]=\"getType()\"\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=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t\t<button class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</button>\n\t</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}.componentContainer.smallSized input{height:32px}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}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.peakBtn{border:none;background:transparent;height:100%;padding:0}.showErrors{border-color:#ff8000}\n"] }]
|
|
32
33
|
}], propDecorators: { placeholder: [{
|
|
33
34
|
type: Input
|
|
34
35
|
}], type: [{
|
|
@@ -43,7 +44,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
43
44
|
type: Input
|
|
44
45
|
}], passwordPeekIcon: [{
|
|
45
46
|
type: Input
|
|
47
|
+
}], size: [{
|
|
48
|
+
type: Input
|
|
46
49
|
}], onBlur: [{
|
|
47
50
|
type: Output
|
|
48
51
|
}] } });
|
|
49
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
52
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1pbnB1dC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9rbGlwcGEvbmd4LWVuaGFuY3ktZm9ybXMvc3JjL2xpYi9lbGVtZW50cy90ZXh0LWlucHV0L3RleHQtaW5wdXQuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMva2xpcHBhL25neC1lbmhhbmN5LWZvcm1zL3NyYy9saWIvZWxlbWVudHMvdGV4dC1pbnB1dC90ZXh0LWlucHV0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyxTQUFTLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQWMsTUFBTSxlQUFlLENBQUM7QUFDbEYsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sZ0JBQWdCLENBQUM7QUFDakQsT0FBTyxFQUFDLGlCQUFpQixFQUFDLE1BQU0sc0RBQXNELENBQUM7Ozs7QUFRdkYsTUFBTSxPQUFPLGtCQUFtQixTQUFRLGlCQUF5QjtJQU5qRTs7UUFPUyxzQkFBaUIsR0FBRyxLQUFLLENBQUM7UUFHekIsU0FBSSxHQUF3QixNQUFNLENBQUM7UUFDbkMsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUVsQixrQkFBYSxHQUFHLElBQUksQ0FBQztRQUNyQixtQkFBYyxHQUFHLElBQUksQ0FBQztRQUV0QixTQUFJLEdBQXVCLFFBQVEsQ0FBQztRQUNuQyxXQUFNLEdBQUcsSUFBSSxZQUFZLEVBQVEsQ0FBQztLQVk1QztJQVZPLGtCQUFrQjtRQUN4QixJQUFJLENBQUMsaUJBQWlCLEdBQUcsQ0FBQyxJQUFJLENBQUMsaUJBQWlCLENBQUM7SUFDbEQsQ0FBQztJQUVNLE9BQU87UUFDYixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssTUFBTSxFQUFFLENBQUM7WUFDMUIsT0FBTyxNQUFNLENBQUM7UUFDZixDQUFDO1FBQ0QsT0FBTyxJQUFJLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsVUFBVSxDQUFDO0lBQ3JELENBQUM7OEdBdEJXLGtCQUFrQjtrR0FBbEIsa0JBQWtCLCtSQUZuQixDQUFDLEVBQUMsT0FBTyxFQUFFLGlCQUFpQixFQUFFLFdBQVcsRUFBRSxrQkFBa0IsRUFBRSxLQUFLLEVBQUUsSUFBSSxFQUFDLENBQUMsaURDUnhGLDZqQ0FzQkE7OzJGRFphLGtCQUFrQjtrQkFOOUIsU0FBUzsrQkFDQyxxQkFBcUIsYUFHcEIsQ0FBQyxFQUFDLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxXQUFXLG9CQUFvQixFQUFFLEtBQUssRUFBRSxJQUFJLEVBQUMsQ0FBQzs4QkFLOUUsV0FBVztzQkFBbkIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxjQUFjO3NCQUF0QixLQUFLO2dCQUNHLGdCQUFnQjtzQkFBeEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0ksTUFBTTtzQkFBZixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE91dHB1dCwgVGVtcGxhdGVSZWZ9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtOR19WQUxVRV9BQ0NFU1NPUn0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtWYWx1ZUFjY2Vzc29yQmFzZX0gZnJvbSAnLi4vdmFsdWUtYWNjZXNzb3ItYmFzZS92YWx1ZS1hY2Nlc3Nvci1iYXNlLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuXHRzZWxlY3RvcjogJ2tscC1mb3JtLXRleHQtaW5wdXQnLFxuXHR0ZW1wbGF0ZVVybDogJy4vdGV4dC1pbnB1dC5jb21wb25lbnQuaHRtbCcsXG5cdHN0eWxlVXJsczogWycuL3RleHQtaW5wdXQuY29tcG9uZW50LnNjc3MnXSxcblx0cHJvdmlkZXJzOiBbe3Byb3ZpZGU6IE5HX1ZBTFVFX0FDQ0VTU09SLCB1c2VFeGlzdGluZzogVGV4dElucHV0Q29tcG9uZW50LCBtdWx0aTogdHJ1ZX1dLFxufSlcbmV4cG9ydCBjbGFzcyBUZXh0SW5wdXRDb21wb25lbnQgZXh0ZW5kcyBWYWx1ZUFjY2Vzc29yQmFzZTxzdHJpbmc+IHtcblx0cHJpdmF0ZSBpc1BlZWtpbmdQYXNzd29yZCA9IGZhbHNlO1xuXG5cdEBJbnB1dCgpIHBsYWNlaG9sZGVyOiBzdHJpbmc7XG5cdEBJbnB1dCgpIHR5cGU6ICd0ZXh0JyB8ICdwYXNzd29yZCcgPSAndGV4dCc7XG5cdEBJbnB1dCgpIGNsZWFyYWJsZSA9IGZhbHNlO1xuXHRASW5wdXQoKSBpY29uOiAnc2VhcmNoJztcblx0QElucHV0KCkgaGFzQm9yZGVyTGVmdCA9IHRydWU7XG5cdEBJbnB1dCgpIGhhc0JvcmRlclJpZ2h0ID0gdHJ1ZTtcblx0QElucHV0KCkgcGFzc3dvcmRQZWVrSWNvbjogVGVtcGxhdGVSZWY8YW55Pjtcblx0QElucHV0KCkgc2l6ZTogJ3NtYWxsJyB8ICdtZWRpdW0nID0gJ21lZGl1bSc7XG5cdEBPdXRwdXQoKSBvbkJsdXIgPSBuZXcgRXZlbnRFbWl0dGVyPHZvaWQ+KCk7XG5cblx0cHVibGljIHRvZ2dsZVBlYWtQYXNzd29yZCgpOiB2b2lkIHtcblx0XHR0aGlzLmlzUGVla2luZ1Bhc3N3b3JkID0gIXRoaXMuaXNQZWVraW5nUGFzc3dvcmQ7XG5cdH1cblxuXHRwdWJsaWMgZ2V0VHlwZSgpOiAndGV4dCcgfCAncGFzc3dvcmQnIHtcblx0XHRpZiAodGhpcy50eXBlID09PSAndGV4dCcpIHtcblx0XHRcdHJldHVybiAndGV4dCc7XG5cdFx0fVxuXHRcdHJldHVybiB0aGlzLmlzUGVla2luZ1Bhc3N3b3JkID8gJ3RleHQnIDogJ3Bhc3N3b3JkJztcblx0fVxufVxuIiwiPGRpdiBjbGFzcz1cImNvbXBvbmVudENvbnRhaW5lclwiIFtuZ0NsYXNzXT1cIntzbWFsbFNpemVkOiBzaXplID09PSAnc21hbGwnfVwiPlxuXHQ8bmctY29udGFpbmVyICpuZ0lmPVwiaWNvbj8ubGVuZ3RoID4gMFwiPlxuXHRcdDxpIGNsYXNzPVwidGktc2VhcmNoXCIgKm5nSWY9XCJpY29uID09PSAnc2VhcmNoJ1wiPjwvaT5cblx0PC9uZy1jb250YWluZXI+XG5cdDxpbnB1dFxuXHRcdFt0eXBlXT1cImdldFR5cGUoKVwiXG5cdFx0WyhuZ01vZGVsKV09XCJpbm5lclZhbHVlXCJcblx0XHRbbmdDbGFzc109XCJ7c2hvd0Vycm9yczogaXNJbkVycm9yU3RhdGUoKSwgaGFzSWNvbjogaWNvbj8ubGVuZ3RoID4gMCwgaGFzQ2xlYXJCdXR0b246IGNsZWFyYWJsZSwgbm9Cb3JkZXJMZWZ0OiAhaGFzQm9yZGVyTGVmdCwgbm9Cb3JkZXJSaWdodDogIWhhc0JvcmRlclJpZ2h0fVwiXG5cdFx0KGlucHV0KT1cInNldElubmVyVmFsdWVBbmROb3RpZnkoJGV2ZW50LnRhcmdldC52YWx1ZSlcIlxuXHRcdFtwbGFjZWhvbGRlcl09XCJwbGFjZWhvbGRlciA/IHBsYWNlaG9sZGVyIDogJydcIlxuXHRcdChibHVyKT1cInRvdWNoKCk7IG9uQmx1ci5lbWl0KClcIlxuXHRcdFtkaXNhYmxlZF09J2Rpc2FibGVkJ1xuXHRcdCNuYXRpdmVJbnB1dFJlZlxuXHQvPlxuXHQ8ZGl2IGNsYXNzPVwidGFpbFwiPlxuXHRcdDxuZy1jb250YWluZXIgW25nVGVtcGxhdGVPdXRsZXRdPVwiZ2V0VGFpbFRwbCgpXCI+PC9uZy1jb250YWluZXI+XG5cdFx0PGRpdiBjbGFzcz1cImNsZWFySWNvblwiICpuZ0lmPVwiY2xlYXJhYmxlICYmIGlubmVyVmFsdWU/Lmxlbmd0aCA+IDBcIiAoY2xpY2spPVwicmVzZXRUb051bGwoKVwiPsOXPC9kaXY+XG5cdFx0PGJ1dHRvbiBjbGFzcz1cInBlYWtCdG5cIiAoY2xpY2spPVwidG9nZ2xlUGVha1Bhc3N3b3JkKClcIiAqbmdJZj1cInBhc3N3b3JkUGVla0ljb24gJiYgdHlwZSA9PT0gJ3Bhc3N3b3JkJ1wiPlxuXHRcdFx0PG5nLWNvbnRhaW5lciBbbmdUZW1wbGF0ZU91dGxldF09XCJwYXNzd29yZFBlZWtJY29uXCI+PC9uZy1jb250YWluZXI+XG5cdFx0PC9idXR0b24+XG5cdDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -1566,6 +1566,7 @@ class TextInputComponent extends ValueAccessorBase {
|
|
|
1566
1566
|
this.clearable = false;
|
|
1567
1567
|
this.hasBorderLeft = true;
|
|
1568
1568
|
this.hasBorderRight = true;
|
|
1569
|
+
this.size = 'medium';
|
|
1569
1570
|
this.onBlur = new EventEmitter();
|
|
1570
1571
|
}
|
|
1571
1572
|
togglePeakPassword() {
|
|
@@ -1578,11 +1579,11 @@ class TextInputComponent extends ValueAccessorBase {
|
|
|
1578
1579
|
return this.isPeekingPassword ? 'text' : 'password';
|
|
1579
1580
|
}
|
|
1580
1581
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1581
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", passwordPeekIcon: "passwordPeekIcon" }, 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]=\"getType()\"\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=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t\t<button class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</button>\n\t</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}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.peakBtn{border:none;background:transparent;height:100%;padding:0}.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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] }); }
|
|
1582
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: TextInputComponent, selector: "klp-form-text-input", inputs: { placeholder: "placeholder", type: "type", clearable: "clearable", icon: "icon", hasBorderLeft: "hasBorderLeft", hasBorderRight: "hasBorderRight", passwordPeekIcon: "passwordPeekIcon", size: "size" }, outputs: { onBlur: "onBlur" }, providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"componentContainer\" [ngClass]=\"{smallSized: size === 'small'}\">\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]=\"getType()\"\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=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t\t<button class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</button>\n\t</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}.componentContainer.smallSized input{height:32px}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}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.peakBtn{border:none;background:transparent;height:100%;padding:0}.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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }] }); }
|
|
1582
1583
|
}
|
|
1583
1584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
1584
1585
|
type: Component,
|
|
1585
|
-
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]=\"getType()\"\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=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t\t<button class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</button>\n\t</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}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.peakBtn{border:none;background:transparent;height:100%;padding:0}.showErrors{border-color:#ff8000}\n"] }]
|
|
1586
|
+
args: [{ selector: 'klp-form-text-input', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: TextInputComponent, multi: true }], template: "<div class=\"componentContainer\" [ngClass]=\"{smallSized: size === 'small'}\">\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]=\"getType()\"\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=\"tail\">\n\t\t<ng-container [ngTemplateOutlet]=\"getTailTpl()\"></ng-container>\n\t\t<div class=\"clearIcon\" *ngIf=\"clearable && innerValue?.length > 0\" (click)=\"resetToNull()\">\u00D7</div>\n\t\t<button class=\"peakBtn\" (click)=\"togglePeakPassword()\" *ngIf=\"passwordPeekIcon && type === 'password'\">\n\t\t\t<ng-container [ngTemplateOutlet]=\"passwordPeekIcon\"></ng-container>\n\t\t</button>\n\t</div>\n</div>\n", styles: [":host{display:block}:host input:disabled{cursor:not-allowed}.componentContainer{position:relative}.componentContainer.smallSized input{height:32px}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}.tail{position:absolute;right:.625rem;display:flex;align-items:center;top:0;bottom:0;gap:.625rem}.tail .clearIcon{transform:translateY(-2px);font-size:18px;cursor:pointer}.peakBtn{border:none;background:transparent;height:100%;padding:0}.showErrors{border-color:#ff8000}\n"] }]
|
|
1586
1587
|
}], propDecorators: { placeholder: [{
|
|
1587
1588
|
type: Input
|
|
1588
1589
|
}], type: [{
|
|
@@ -1597,6 +1598,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
1597
1598
|
type: Input
|
|
1598
1599
|
}], passwordPeekIcon: [{
|
|
1599
1600
|
type: Input
|
|
1601
|
+
}], size: [{
|
|
1602
|
+
type: Input
|
|
1600
1603
|
}], onBlur: [{
|
|
1601
1604
|
type: Output
|
|
1602
1605
|
}] } });
|