From 1377074f42abc694c42e83906f41cb7cb925157f Mon Sep 17 00:00:00 2001 From: Wouter Willems Date: Tue, 12 Mar 2024 11:13:17 +0100 Subject: [PATCH] trigger on warning changes --- .../demo/src/app/demo/demo.component.html | 4 +- projects/demo/src/app/demo/demo.component.ts | 68 ++++++++++--------- .../klippa/ngx-enhancy-forms/package.json | 2 +- .../lib/elements/select/select.component.scss | 19 ++---- .../form-element/form-element.component.scss | 1 - .../form-element/form-element.component.ts | 5 +- .../src/lib/form/form.component.ts | 24 ++++++- 7 files changed, 72 insertions(+), 51 deletions(-) diff --git a/projects/demo/src/app/demo/demo.component.html b/projects/demo/src/app/demo/demo.component.html index 2305b94..ba72d12 100644 --- a/projects/demo/src/app/demo/demo.component.html +++ b/projects/demo/src/app/demo/demo.component.html @@ -1,5 +1,5 @@ - +
@@ -40,7 +40,7 @@
- + diff --git a/projects/demo/src/app/demo/demo.component.ts b/projects/demo/src/app/demo/demo.component.ts index aed321d..39a9748 100644 --- a/projects/demo/src/app/demo/demo.component.ts +++ b/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(); 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([ + // [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 { - const result = new Map(); - 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; - } } diff --git a/projects/klippa/ngx-enhancy-forms/package.json b/projects/klippa/ngx-enhancy-forms/package.json index 3f65efa..be8825a 100644 --- a/projects/klippa/ngx-enhancy-forms/package.json +++ b/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" }, diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/elements/select/select.component.scss b/projects/klippa/ngx-enhancy-forms/src/lib/elements/select/select.component.scss index 6ac0e29..4a0740d 100644 --- a/projects/klippa/ngx-enhancy-forms/src/lib/elements/select/select.component.scss +++ b/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; -} diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.scss b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.scss index fa21c95..e1101e7 100644 --- a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.scss +++ b/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; diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts index 6b0154a..fa166b0 100644 --- a/projects/klippa/ngx-enhancy-forms/src/lib/form/form-element/form-element.component.ts +++ b/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('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 { diff --git a/projects/klippa/ngx-enhancy-forms/src/lib/form/form.component.ts b/projects/klippa/ngx-enhancy-forms/src/lib/form/form.component.ts index 4cf348c..297ae8f 100644 --- a/projects/klippa/ngx-enhancy-forms/src/lib/form/form.component.ts +++ b/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 => { + 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; }