trigger on warning changes

projects/demo/src/app/demo/demo.component.html

@@ -1,5 +1,5 @@
 
-<klp-form [formGroup]="myForm" [warnings]="getWarnings()" errorMessageLocation="rightOfCaption" [readOnly]="false">
+<klp-form [formGroup]="myForm" [warnings]="formWarnings" errorMessageLocation="rightOfCaption" [readOnly]="false">
 	<div style="height: 520px; overflow: auto; display: flex; gap: 30px">
 		<app-deep-input  *ngIf="false" >
 		</app-deep-input>
@@ -40,7 +40,7 @@
 		</div>
 		<div style="flex: 3 1 0px; margin-top: 5rem; margin-bottom: 10rem; max-width: 250px">
 			<klp-form-element caption="Pick me" direction="vertical">
-				<klp-form-select [truncateOptions]="false" [options]="options" formControlName="picker"></klp-form-select>
+				<klp-form-select [truncateOptions]="false" [options]="options" formControlName="picker" [multiple]="true"></klp-form-select>
 			</klp-form-element>
 
 			<klp-form-element caption="A nice date" direction="vertical">

projects/demo/src/app/demo/demo.component.ts

@@ -3,36 +3,49 @@ import {AbstractControl, FormBuilder, UntypedFormArray, UntypedFormGroup, Valida
 import {AppSelectOptions, SelectComponent} from '@klippa/ngx-enhancy-forms';
 
 @Component({
-  selector: 'app-demo',
-  templateUrl: './demo.component.html',
-  styleUrls: ['./demo.component.scss']
+	selector: 'app-demo',
+	templateUrl: './demo.component.html',
+	styleUrls: ['./demo.component.scss']
 })
 export class DemoComponent {
-
+	public formWarnings = new Map<AbstractControl, string>();
 	constructor(private fb: FormBuilder) {
-		setTimeout(() => {
-			this.options = [...this.options, {id : this.options.length, name: 'BLAAAAAAAAAAAAAAAAAAAAAAAT'}];
-		}, 5000);
-		this.myForm.patchValue({
-			oli: {
-				name: 'zaag'
-			}
-		});
-		setTimeout(() => {
-			this.showSubForm = true;
-		}, 2000);
 
+		this.formWarnings.set(this.myForm.get('name'), 'This is a warning about your name');
 		setTimeout(() => {
-			this.myForm.patchValue({
-				oli: {
-					name: 'zaag222'
-				}
-			});
-		}, 4000);
+			// this.formWarnings.delete(this.myForm.get('name'));
+		}, 1500);
 
 		setTimeout(() => {
-			this.myForm.get('name').enable();
-		}, 1000);
+			// this.formWarnings = new Map<AbstractControl, string>([
+			// 	[this.myForm.get('name'), 'This is a ewgewgewgewname'],
+			// ]);
+			this.formWarnings.set(this.myForm.get('name'), 'another');
+		}, 2500);
+
+		// setTimeout(() => {
+		// 	this.options = [...this.options, {id : this.options.length, name: 'BLAAAAAAAAAAAAAAAAAAAAAAAT'}];
+		// }, 5000);
+		// this.myForm.patchValue({
+		// 	oli: {
+		// 		name: 'zaag'
+		// 	}
+		// });
+		// setTimeout(() => {
+		// 	this.showSubForm = true;
+		// }, 2000);
+		//
+		// setTimeout(() => {
+		// 	this.myForm.patchValue({
+		// 		oli: {
+		// 			name: 'zaag222'
+		// 		}
+		// 	});
+		// }, 4000);
+		//
+		// setTimeout(() => {
+		// 	this.myForm.get('name').enable();
+		// }, 1000);
 	}
 
 	public get emails(): any[] {
@@ -91,7 +104,7 @@ export class DemoComponent {
 		name5: this.nameConfig,
 		name6: this.nameConfig,
 		name7: this.nameConfig,
-		picker: [null, Validators.required],
+		picker: [null, [Validators.required, Validators.max(-1)]],
 		date: [null, Validators.required],
 		hourMinute: [null, Validators.required],
 		email: [null, Validators.required],
@@ -218,11 +231,4 @@ export class DemoComponent {
 		this.myValue = [...(this.myValue ?? []), $event];
 		this.selectComponent.close();
 	}
-
-	getWarnings(): Map<AbstractControl, string> {
-		const result = new Map<AbstractControl, string>();
-		result.set(this.myForm.get('name'), 'This is a warning about your name');
-		result.set(this.myForm.get('name5'), 'This is a warning about your name5');
-		return result;
-	}
 }

projects/klippa/ngx-enhancy-forms/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klippa/ngx-enhancy-forms",
-  "version": "14.17.2",
+  "version": "14.17.3",
   "publishConfig": {
     "access": "public"
   },

projects/klippa/ngx-enhancy-forms/src/lib/elements/select/select.component.scss

@@ -64,21 +64,18 @@ ng-select.showErrors {
 }
 :host ::ng-deep .ng-select .ng-select-container{
   display: flex;
+	gap: 0.4rem;
   flex-direction: row;
   background-color:#fff;
-  border-radius:4px;
-  border:1px solid #ccc;
   min-height:42px;
   align-items:center;
 
   background-clip: padding-box;
-  background-color: #fff;
   border: 1px solid #e6ecf5;
   border-radius: 2px;
   box-shadow: none;
   box-sizing: border-box;
   color: #888da8;
-  font-size: 1rem;
   font-size: 14px;
   line-height: 1.5;
   margin: 0;
@@ -107,8 +104,8 @@ ng-select.showErrors {
 }
 :host ::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-input{
   left:0;
-  padding-left:10px;
-  padding-right:50px;
+  padding-left: 10px;
+  padding-right: 4.5rem;
   top:5px;
 }
 :host ::ng-deep .ng-select.ng-select-multiple.ng-select-disabled>.ng-select-container .ng-value-container .ng-value{
@@ -169,7 +166,8 @@ ng-select.showErrors {
 }
 
 :host ::ng-deep .ng-select .ng-clear-wrapper{
-  color:#999
+  color:#999;
+	width: initial;
 }
 :host ::ng-deep .ng-select .ng-clear-wrapper .ng-clear:hover{
   color:$default-danger;
@@ -179,8 +177,7 @@ ng-select.showErrors {
   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
@@ -336,7 +333,3 @@ ng-select.showErrors {
 		}
 	}
 }
-
-.tail {
-	margin-right: 0.4rem;
-}

projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.scss

@@ -207,7 +207,6 @@ $triangleSize: 8px;
 		&.noPointerEvents {
 			pointer-events: none;
 		}
-		font-size: 1rem;
 		word-wrap: break-word;
 		position: absolute;
 		top: -0.6rem;

projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts

@@ -15,7 +15,7 @@ import {ValueAccessorBase} from '../../elements/value-accessor-base/value-access
 import {CustomErrorMessages, FormErrorMessages} from '../../types';
 import {isValueSet, stringIsSetAndFilled} from '../../util/values';
 import {FormComponent} from '../form.component';
-import {awaitableForNextCycle} from "../../util/angular";
+import {awaitableForNextCycle} from '../../util/angular';
 
 
 export const FORM_ERROR_MESSAGES = new InjectionToken<CustomErrorMessages>('form.error.messages');
@@ -93,7 +93,7 @@ export class FormElementComponent implements AfterViewInit {
 		this.determinePopupState();
 	}
 
-	private determinePopupState(): void {
+	public determinePopupState(): void {
 		if (stringIsSetAndFilled(this.getErrorToShow())) {
 			this.popupState = 'onHover';
 			return;
@@ -102,6 +102,7 @@ export class FormElementComponent implements AfterViewInit {
 			this.popupState = 'lockedOpen';
 			return;
 		}
+		this.popupState = 'onHover';
 	}
 
 	public unregisterControl(formControl: UntypedFormControl): void {

projects/klippa/ngx-enhancy-forms/src/lib/form/form.component.ts

@@ -90,6 +90,9 @@ export class FormComponent implements OnInit, OnDestroy, OnChanges {
 		if (simpleChanges.readOnly?.currentValue === true) {
 			this.activeControls.forEach(e => e.formControl.disable());
 		}
+		if (isValueSet(simpleChanges.warnings?.currentValue)) {
+			this.patchFormWarningsMap();
+		}
 	}
 
 	ngOnDestroy(): void {
@@ -108,6 +111,25 @@ export class FormComponent implements OnInit, OnDestroy, OnChanges {
 		}
 	}
 
+	private patchFormWarningsMap(): void {
+		const setFn = this.warnings.set;
+		this.warnings.set = (key: AbstractControl, value: string): Map<AbstractControl, string> => {
+			const prevVal = this.warnings.get(key);
+			const result = setFn.call(this.warnings, key, value);
+			if (prevVal !== value) {
+				this.getFormElementByFormControl(key)?.determinePopupState();
+			}
+			return result;
+		};
+
+		const deleteFn = this.warnings.delete;
+		this.warnings.delete = (key: AbstractControl): boolean => {
+			const result = deleteFn.call(this.warnings, key);
+			this.getFormElementByFormControl(key)?.determinePopupState();
+			return result;
+		};
+	}
+
 	private addSupportForPatchValueInterceptor(): void {
 		const fn = this.formGroup.patchValue;
 		const newFn = (
@@ -191,7 +213,7 @@ export class FormComponent implements OnInit, OnDestroy, OnChanges {
 		}
 	}
 
-	public getFormElementByFormControl(control: UntypedFormControl): FormElementComponent {
+	public getFormElementByFormControl(control: AbstractControl): FormElementComponent {
 		return this.activeControls.find((e) => e.formControl === control)?.formElement;
 	}