@firestitch/form 18.0.0 → 18.0.2

package/fesm2022/firestitch-form.mjs

@@ -253,9 +253,9 @@ class FsFormDirective {
     _dialogRef;
     _drawerRef;
     _route;
-    wrapperSelector = '.fs-form-wrapper,.mat-form-field';
-    messageSelector = '.fs-form-message,.mat-form-field-subscript-wrapper';
-    hintSelector = '.fs-form-hint,.mat-form-field-hint-wrapper';
+    wrapperSelector = '.fs-form-wrapper,.mat-mdc-form-field';
+    messageSelector = '.fs-form-message,.mat-mdc-form-field-subscript-wrapper';
+    hintSelector = '.fs-form-hint,.mat-mdc-form-field-hint-wrapper';
     labelSelector = '.fs-form-label,.mat-form-field-label';
     autocomplete = false;
     shortcuts = true; // Ctrl + s
@@ -1018,6 +1018,7 @@ class FsButtonDirective {
         if (this._matButton && !this.active) {
             this._previousDisabled = this._matButton.disabled;
             this._matButton.disabled = true;
+            this._matButton.disableRipple = true;
             this._cdRef.markForCheck();
         }
     }
@@ -1321,11 +1322,11 @@ function messageProviderFactory() {
 
 class FsControlDirective {
     _elementRef;
-    renderer2;
-    injector;
+    _renderer2;
+    _injector;
     _validateMessages;
-    ngControl;
-    formDirective;
+    _ngControl;
+    _formDirective;
     wrapperSelector;
     messageSelector;
     hintSelector;
@@ -1343,15 +1344,15 @@ class FsControlDirective {
     errors = [];
     _control;
     _destroy$ = new Subject();
-    constructor(_elementRef, renderer2, injector, _validateMessages, ngControl, formDirective) {
+    constructor(_elementRef, _renderer2, _injector, _validateMessages, _ngControl, _formDirective) {
         this._elementRef = _elementRef;
-        this.renderer2 = renderer2;
-        this.injector = injector;
+        this._renderer2 = _renderer2;
+        this._injector = _injector;
         this._validateMessages = _validateMessages;
-        this.ngControl = ngControl;
-        this.formDirective = formDirective;
-        if (ngControl) {
-            this._control = ngControl.control;
+        this._ngControl = _ngControl;
+        this._formDirective = _formDirective;
+        if (_ngControl) {
+            this._control = _ngControl.control;
         }
         else {
             console.error('The element does not have a valid ngModel', this._elementRef.nativeElement);
@@ -1374,8 +1375,8 @@ class FsControlDirective {
         if (this.messageSelector) {
             return this.messageSelector;
         }
-        else if (this.formDirective?.messageSelector) {
-            return this.formDirective.messageSelector;
+        else if (this._formDirective?.messageSelector) {
+            return this._formDirective.messageSelector;
         }
     }
     getHintWrapperSelector() {
@@ -1385,8 +1386,8 @@ class FsControlDirective {
         if (this.hintSelector) {
             return this.hintSelector;
         }
-        else if (this.formDirective?.hintSelector) {
-            return this.formDirective.hintSelector;
+        else if (this._formDirective?.hintSelector) {
+            return this._formDirective.hintSelector;
         }
     }
     getWrapperSelector() {
@@ -1396,8 +1397,8 @@ class FsControlDirective {
         if (this.wrapperSelector) {
             return this.wrapperSelector;
         }
-        else if (this.formDirective?.wrapperSelector) {
-            return this.formDirective.wrapperSelector;
+        else if (this._formDirective?.wrapperSelector) {
+            return this._formDirective.wrapperSelector;
         }
     }
     getlabelSelector() {
@@ -1407,12 +1408,12 @@ class FsControlDirective {
         if (this.labelSelector) {
             return this.labelSelector;
         }
-        else if (this.formDirective?.labelSelector) {
-            return this.formDirective.labelSelector;
+        else if (this._formDirective?.labelSelector) {
+            return this._formDirective.labelSelector;
         }
     }
     getWrapperElement() {
-        const wrapper = this.getWrapper(this._elementRef.nativeElement);
+        const wrapper = this._getWrapper(this._elementRef.nativeElement);
         if (wrapper) {
             return wrapper;
         }
@@ -1427,14 +1428,16 @@ class FsControlDirective {
         </div>
       </mat-form-field>
     */
+    get _shouldErrorBeRendered() {
+        return this._ngControl.invalid
+            && (this._ngControl.dirty || this._formDirective?.ngForm?.submitted);
+    }
     render() {
-        if (this.ngControl) {
-            const renderer = this.renderer2;
+        if (this._ngControl) {
+            const renderer = this._renderer2;
             const wrapper = this.getWrapperElement();
-            const error = this.ngControl.dirty ? this.getError(this.ngControl) : null;
-            const shouldErrorBeRendered = this.ngControl.invalid
-                && (this.ngControl.dirty || this.formDirective?.ngForm?.submitted);
-            if (shouldErrorBeRendered && error) {
+            const error = this._ngControl.dirty ? this._getError(this._ngControl) : null;
+            if (this._shouldErrorBeRendered && error) {
                 wrapper.classList.add('ng-invalid', 'ng-dirty');
             }
             else {
@@ -1445,43 +1448,42 @@ class FsControlDirective {
             }
             const messageWrapper = wrapper.querySelector(this.getMessageSelector());
             if (!messageWrapper) {
-                return console.warn(`Failed to locate ${this.getMessageSelector()}`, this._elementRef.nativeElement);
-            }
-            if (this.getlabelSelector()) {
-                const labelWrapper = wrapper.querySelector(this.getlabelSelector());
-                if (labelWrapper) {
-                    if (this.appendLabelClass) {
-                        this.renderer2.addClass(labelWrapper, this.appendLabelClass);
-                    }
-                }
+                return console
+                    .warn(`Failed to locate ${this.getMessageSelector()}`, this._elementRef.nativeElement);
             }
             if (this.appendMessageClass) {
                 renderer.addClass(messageWrapper, this.appendMessageClass);
             }
-            if (this.getHintWrapperSelector()) {
-                const hint = messageWrapper.querySelector(this.getHintWrapperSelector());
-                if (hint) {
-                    renderer.setStyle(hint, 'display', error ? 'none' : 'block');
-                    if (this.appendHintClass) {
-                        renderer.addClass(hint, this.appendHintClass);
-                    }
+            this._renderHint(error, messageWrapper);
+            this._renderError(wrapper, messageWrapper, error);
+        }
+    }
+    _renderHint(error, messageWrapper) {
+        if (this.getHintWrapperSelector()) {
+            const hints = messageWrapper.querySelectorAll('.mat-mdc-form-field-hint');
+            hints.forEach((hint) => {
+                this._renderer2.setStyle(hint, 'display', error ? 'none' : 'block');
+                if (this.appendHintClass) {
+                    this._renderer2.addClass(hint, this.appendHintClass);
                 }
-            }
-            let errorWrapper = wrapper.querySelector('.fs-form-error-target');
-            if (errorWrapper) {
-                errorWrapper.remove();
-            }
-            if (!shouldErrorBeRendered || !error) {
-                return;
-            }
-            errorWrapper = renderer.createElement('div');
-            renderer.addClass(errorWrapper, 'fs-form-error-target');
-            renderer.addClass(errorWrapper, this.appendErrorClass);
-            renderer.addClass(errorWrapper, `${this.appendErrorClass}-${error.name}`);
-            const errorText = renderer.createText(error.message);
-            renderer.appendChild(errorWrapper, errorText);
-            messageWrapper.appendChild(errorWrapper);
+            });
+        }
+    }
+    _renderError(wrapper, messageWrapper, error) {
+        let errorWrapper = wrapper.querySelector('.fs-form-error-target');
+        if (errorWrapper) {
+            errorWrapper.remove();
+        }
+        if (!this._shouldErrorBeRendered || !error) {
+            return;
         }
+        errorWrapper = this._renderer2.createElement('div');
+        this._renderer2.addClass(errorWrapper, 'fs-form-error-target');
+        this._renderer2.addClass(errorWrapper, this.appendErrorClass);
+        this._renderer2.addClass(errorWrapper, `${this.appendErrorClass}-${error.name}`);
+        const errorText = this._renderer2.createText(error.message);
+        this._renderer2.appendChild(errorWrapper, errorText);
+        messageWrapper.querySelector(this.getHintWrapperSelector()).prepend(errorWrapper);
     }
     _subscribeToStatusChagnes() {
         if (this._control) {
@@ -1490,30 +1492,30 @@ class FsControlDirective {
                 .subscribe(this.render.bind(this));
         }
     }
-    getWrapper(node, count = 0) {
+    _getWrapper(node, count = 0) {
         if (!node || count > 10) {
             return null;
         }
         if (node.parentNode && node.parentNode.querySelector(this.getWrapperSelector())) {
             return node;
         }
-        return this.getWrapper(node.parentNode, ++count);
+        return this._getWrapper(node.parentNode, ++count);
     }
-    parseErrorMessage(message, args) {
+    _parseErrorMessage(message, args) {
         values(args)
             .forEach((name) => {
             message = message.replace(/\$\(\d\)/, name);
         });
         return message;
     }
-    getError(controlRef) {
+    _getError(controlRef) {
         const name = keys(controlRef.control.errors)[0];
         if (!name) {
             return null;
         }
         let message = controlRef.control.errors[name];
         if (this._validateMessages[name]) {
-            message = this.parseErrorMessage(this._validateMessages[name], message);
+            message = this._parseErrorMessage(this._validateMessages[name], message);
         }
         return { name: name, message: message };
     }
@@ -1690,7 +1692,7 @@ class FsValidators {
         }
         catch (err) {
             const error = err instanceof Error ? err.message : err;
-            stream$ = throwError(error);
+            stream$ = throwError(() => error);
         }
         if (!stream$) {
             if (result instanceof Promise) {
@@ -1830,7 +1832,7 @@ class FsFormFunctionDirective extends FsControlDirective {
         this._control.updateValueAndValidity();
     }
     validateAsync(control) {
-        if (this.validateOnSubmit && !this.formDirective.validating) {
+        if (this.validateOnSubmit && !this._formDirective.validating) {
             return of(null);
         }
         return FsValidators.func(this._control, this.fsFormFunction, this.fsFormFunctionData);
@@ -2337,10 +2339,10 @@ class FsFormRequiredDirective extends FsControlDirective {
             // Adding class fs-form-label-requried adds the * to the label
             if (labelWrapper) {
                 if (this.required) {
-                    this.renderer2.addClass(labelWrapper, 'fs-form-label-required');
+                    this._renderer2.addClass(labelWrapper, 'fs-form-label-required');
                 }
                 else {
-                    this.renderer2.removeClass(labelWrapper, 'fs-form-label-required');
+                    this._renderer2.removeClass(labelWrapper, 'fs-form-label-required');
                 }
             }
         }
@@ -2415,14 +2417,14 @@ class FsFormValidateDirective extends FsControlDirective {
         this._control.updateValueAndValidity();
     }
     validateAsync(control) {
-        if (this.validateOnSubmit && !this.formDirective.validating) {
+        if (this.validateOnSubmit && !this._formDirective.validating) {
             return of(null);
         }
         return FsValidators.func(this._control, this.validateFn, this.validateFnData);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormValidateDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.7", type: FsFormValidateDirective, selector: "[validate]", inputs: { validateFn: ["validate", "validateFn"], validateFnData: ["validateData", "validateFnData"], validateOnSubmit: "validateOnSubmit" }, providers: [
-            VALIDATE_MESSAGE_PROVIDER
+            VALIDATE_MESSAGE_PROVIDER,
         ], usesInheritance: true, usesOnChanges: true, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: FsFormValidateDirective, decorators: [{
@@ -2430,7 +2432,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             args: [{
                     selector: '[validate]',
                     providers: [
-                        VALIDATE_MESSAGE_PROVIDER
+                        VALIDATE_MESSAGE_PROVIDER,
                     ],
                 }]
         }], propDecorators: { validateFn: [{