@klippa/ngx-enhancy-forms 14.22.16 → 14.22.18

package/fesm2020/klippa-ngx-enhancy-forms.mjs

@@ -188,9 +188,9 @@ class FormComponent {
                 }
                 const valueBeforeInject = injectInto.at(injectAt)?.value;
                 if (isValueSet(valueBeforeInject)) {
-                    this.formGroup.patchValue(valueBeforeInject, { emitEvent: false });
+                    this.formGroup.patchValue(valueBeforeInject);
                 }
-                injectInto.setControl(injectAt, this.formGroup, { emitEvent: false });
+                injectInto.setControl(injectAt, this.formGroup);
                 this.onInjected.emit(valueBeforeInject);
             }
             else if (injectInto instanceof UntypedFormGroup) {
@@ -202,9 +202,9 @@ class FormComponent {
                 }
                 const valueBeforeInject = injectInto.get(injectAt)?.value;
                 if (isValueSet(valueBeforeInject)) {
-                    this.formGroup.patchValue(valueBeforeInject, { emitEvent: false });
+                    this.formGroup.patchValue(valueBeforeInject);
                 }
-                injectInto.setControl(injectAt, this.formGroup, { emitEvent: false });
+                injectInto.setControl(injectAt, this.formGroup);
                 this.onInjected.emit(valueBeforeInject);
             }
         }
@@ -1550,6 +1550,7 @@ class TextInputComponent extends ValueAccessorBase {
         this.clearable = false;
         this.hasBorderLeft = true;
         this.hasBorderRight = true;
+        this.size = 'medium';
         this.onBlur = new EventEmitter();
     }
     togglePeakPassword() {
@@ -1563,10 +1564,10 @@ class TextInputComponent extends ValueAccessorBase {
     }
 }
 TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-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", 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"] }] });
+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", 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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImport: i0, type: TextInputComponent, decorators: [{
             type: Component,
-            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"] }]
+            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"] }]
         }], propDecorators: { placeholder: [{
                 type: Input
             }], type: [{
@@ -1581,6 +1582,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.8", ngImpor
                 type: Input
             }], passwordPeekIcon: [{
                 type: Input
+            }], size: [{
+                type: Input
             }], onBlur: [{
                 type: Output
             }] } });