ets-fe-ng-sdk 20.0.0 → 20.0.2

package/fesm2022/ets-fe-ng-sdk.mjs

@@ -1,9 +1,9 @@
 import * as i2$2 from '@angular/forms';
 import { FormControl, Validators, FormGroup, FormArray, FormBuilder, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule, UntypedFormArray } from '@angular/forms';
-import { ReplaySubject, filter, debounceTime, lastValueFrom, Observable, BehaviorSubject, isObservable, merge, of, firstValueFrom, throwError, interval, switchMap, map as map$1, startWith, tap as tap$1, forkJoin, catchError as catchError$1, first, distinctUntilChanged, fromEvent, mergeMap, debounce, timer, Subject, distinct, concat } from 'rxjs';
+import { ReplaySubject, filter, debounceTime, lastValueFrom, Observable, BehaviorSubject, isObservable, merge, of, firstValueFrom, throwError, interval, map as map$1, startWith, switchMap, forkJoin, catchError as catchError$1, first, distinctUntilChanged, tap as tap$1, fromEvent, mergeMap, debounce, timer, Subject, distinct, concat } from 'rxjs';
 import 'zone.js/plugins/zone-error';
 import * as i0 from '@angular/core';
-import { signal, computed, Injectable, inject, APP_INITIALIZER, isDevMode, Pipe, NgModule, input, Directive, booleanAttribute, ChangeDetectorRef, model, output, effect, ViewChild, Input, ChangeDetectionStrategy, Component, EventEmitter, Output, forwardRef, HostListener, HostBinding, viewChild, linkedSignal, viewChildren, Inject, DestroyRef, contentChild, ElementRef, InjectionToken, ErrorHandler } from '@angular/core';
+import { signal, computed, Injectable, inject, APP_INITIALIZER, isDevMode, Pipe, NgModule, input, Directive, booleanAttribute, ChangeDetectorRef, model, output, effect, ViewChild, Input, Component, EventEmitter, Output, forwardRef, ChangeDetectionStrategy, HostListener, HostBinding, viewChild, linkedSignal, viewChildren, Inject, DestroyRef, contentChild, ElementRef, InjectionToken, ErrorHandler } from '@angular/core';
 import * as i1$1 from '@angular/common';
 import { Location, CurrencyPipe, TitleCasePipe, DatePipe, DecimalPipe, CommonModule, NgClass, JsonPipe, AsyncPipe, NgIf, NgFor, UpperCasePipe, NgTemplateOutlet, NgSwitch, NgSwitchCase, NgSwitchDefault, NgStyle } from '@angular/common';
 import { faSpoon, faTable, faCircleExclamation, faHandshake, faPercent, faPlay, faArrowsH, faBank, faReceipt, faTag, faTruck, faStop, faRecycle, faUsers, faUnlock, faUpload, faBellSlash, faEye, faSearch, faSave, faArrowLeft, faPen, faPause, faArrowRight, faLock, faInfoCircle, faFileImport, faHome, faHistory, faUserShield, faPenFancy, faFilter, faFile, faFileExport, faEdit, faDownload, faTrash, faCogs, faClone, faListAlt, faCheck, faCancel, faMoneyCheck, faSlidersH, faPlus } from '@fortawesome/free-solid-svg-icons';
@@ -25,7 +25,7 @@ import { AES, enc } from 'crypto-js';
 import * as i3 from '@angular/cdk/layout';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import Papa from 'papaparse';
-import { toSignal, toObservable, rxResource, outputFromObservable } from '@angular/core/rxjs-interop';
+import { toSignal, rxResource, toObservable, outputFromObservable } from '@angular/core/rxjs-interop';
 import * as Sentry from '@sentry/angular';
 import * as i2$1 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
@@ -5986,33 +5986,38 @@ class BtnComponent {
         /** Form to bind to the button for validation */
         this.form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
         /** Subject for form changes */
-        this.form$ = new ReplaySubject(1);
+        this.formStateRes = rxResource({
+            params: () => this.form(),
+            stream: (o) => (o.params ? o.params.events.pipe(map$1(() => o.params.valid == true)) : of(null)),
+        });
         /** Signal for form validity state */
-        this.formState = toSignal(this.form$.pipe(switchMap((form) => (this.form() ? this.form().events.pipe(map$1(() => this.form().valid == true)) : of(null)))), { initialValue: this.form()?.valid === true });
+        this.formState = computed(() => this.formStateRes.value(), ...(ngDevMode ? [{ debugName: "formState" }] : []));
         /** Multiple forms to bind to the button for validation */
         this.forms = input(...(ngDevMode ? [undefined, { debugName: "forms" }] : []));
-        /** Subject for forms changes */
-        this.forms$ = new ReplaySubject(1);
         /** Signal for multiple forms validity state */
-        this.formsState = toSignal(this.forms$.pipe(switchMap((forms) => forms?.length
-            ? merge(...forms.map((form) => form.events)).pipe(debounceTime(300), map$1(() => {
-                const forms = this.forms();
-                if (!forms?.length)
-                    return null;
-                const fs = {
-                    // pending: true,
-                    // dirty: true,
-                    // invalid: true,
-                    // pristine: true,
-                    valid: true,
-                };
-                forms.forEach((x) => {
-                    if (!x.valid)
-                        fs.valid = false;
-                });
-                return fs;
-            }))
-            : of(null))));
+        this.formsStateRes = rxResource({
+            params: () => this.forms(),
+            stream: (o) => o.params?.length
+                ? merge(...o.params.map((form) => form.events)).pipe(debounceTime(300), map$1(() => {
+                    const forms = this.forms();
+                    if (!forms?.length)
+                        return null;
+                    const fs = {
+                        // pending: true,
+                        // dirty: true,
+                        // invalid: true,
+                        // pristine: true,
+                        valid: true,
+                    };
+                    forms.forEach((x) => {
+                        if (!x.valid)
+                            fs.valid = false;
+                    });
+                    return fs;
+                }))
+                : of(null),
+        });
+        this.formsState = computed(() => this.formStateRes.value(), ...(ngDevMode ? [{ debugName: "formsState" }] : []));
         /** Tooltip message to display */
         this.help = input(...(ngDevMode ? [undefined, { debugName: "help" }] : []));
         /** Delay before showing tooltip in milliseconds */
@@ -6064,8 +6069,7 @@ class BtnComponent {
             const disabled = this.disabled(), valid = this.valid() !== false, onFormInvalid = this.onFormInvalid(), formIsValid = this.formState(), forms = this.formsState();
             return (disabled ||
                 !valid ||
-                (onFormInvalid == OnFormInvalid.disable &&
-                    (formIsValid === false || forms?.valid === false)) ||
+                (onFormInvalid == OnFormInvalid.disable && (formIsValid === false || forms === false)) ||
                 false);
         }, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
         effect(() => {
@@ -6073,14 +6077,6 @@ class BtnComponent {
             if (this.debug())
                 debugger;
         });
-        effect(() => {
-            this.form$.next(this.form() || null);
-            this.cdr.detectChanges();
-        });
-        effect(() => {
-            this.forms$.next(this.forms() || null);
-            this.cdr.detectChanges();
-        });
     }
     ngAfterViewChecked() {
         //Called after every check of the component's view. Applies to components only.
@@ -6130,11 +6126,11 @@ class BtnComponent {
         this.disabled.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: BtnComponent, isStandalone: true, selector: "app-btn", inputs: { formSchema: { classPropertyName: "formSchema", publicName: "formSchema", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, centerBtn: { classPropertyName: "centerBtn", publicName: "centerBtn", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, verbose: { classPropertyName: "verbose", publicName: "verbose", isSignal: true, isRequired: false, transformFunction: null }, translatorOptions: { classPropertyName: "translatorOptions", publicName: "translatorOptions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, _icon: { classPropertyName: "_icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, _rightIcon: { classPropertyName: "_rightIcon", publicName: "rightIcon", isSignal: false, isRequired: false, transformFunction: null }, _leftIcon: { classPropertyName: "_leftIcon", publicName: "leftIcon", isSignal: false, isRequired: false, transformFunction: null }, _type: { classPropertyName: "_type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, _group: { classPropertyName: "_group", publicName: "group", isSignal: false, isRequired: false, transformFunction: null }, actionType: { classPropertyName: "actionType", publicName: "actionType", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, excludeLogging: { classPropertyName: "excludeLogging", publicName: "excludeLogging", isSignal: false, isRequired: false, transformFunction: booleanAttribute2 }, loggingValue: { classPropertyName: "loggingValue", publicName: "loggingValue", isSignal: false, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, customIcon: { classPropertyName: "customIcon", publicName: "customIcon", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, forms: { classPropertyName: "forms", publicName: "forms", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "help", isSignal: true, isRequired: false, transformFunction: null }, helpShowDelay: { classPropertyName: "helpShowDelay", publicName: "helpShowDelay", isSignal: true, isRequired: false, transformFunction: null }, _iconBtn: { classPropertyName: "_iconBtn", publicName: "iconBtn", isSignal: false, isRequired: false, transformFunction: booleanAttribute2 }, mclass: { classPropertyName: "mclass", publicName: "mclass", isSignal: true, isRequired: false, transformFunction: null }, showHelpIcon: { classPropertyName: "showHelpIcon", publicName: "showHelpIcon", isSignal: true, isRequired: false, transformFunction: null }, _rightCustomIcon: { classPropertyName: "_rightCustomIcon", publicName: "rightCustomIcon", isSignal: false, isRequired: false, transformFunction: null }, leftCustomIcon: { classPropertyName: "leftCustomIcon", publicName: "leftCustomIcon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null }, onFormInvalid: { classPropertyName: "onFormInvalid", publicName: "onFormInvalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", leftCustomIcon: "leftCustomIconChange", mclick: "mclick", disabled: "disabledChange" }, viewQueries: [{ propertyName: "innerText", first: true, predicate: ["innerText"], descendants: true }], ngImport: i0, template: "@if (verbose()) {\n  <div class=\"\">formState():{{ formState() | json }}</div>\n  <div class=\"\">form():{{ form()?.getRawValue() | json }}</div>\n}\n<span\n  class=\"{{ class() }}  d-flex  align-items-center justify-content-center\"\n  [ngClass]=\"{ disabled: isDisabled(), mini: mini() }\"\n  (click)=\"btnS.checkForm(this)\">\n  @if (showHelpIcon() && help()) {\n    <i\n      class=\"fa fa-info-circle me-2 text-primary\"\n      [matTooltipShowDelay]=\"helpShowDelay()\"\n      [matTooltip]=\"help() | appTranslate: translatorOptions() | async\"></i>\n  }\n  <button\n    type=\"{{ actionType() }}\"\n    class=\"{{ mclass() }} {{ _mclass() || 'btn' }} d-flex align-items-center \"\n    [matBadge]=\"badge()\"\n    [ngClass]=\"ngClass()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"click($event)\"\n    [matTooltipShowDelay]=\"helpShowDelay()\"\n    [matTooltip]=\"showHelpIcon() ? null : (help() | appTranslate: translatorOptions() | async)\">\n    @if (showLeftDisabledIcon()) {\n      <fa-icon [icon]=\"lockedIcon()\" />\n    } @else if (showLeftCustomIcon()) {\n      <i class=\"{{ leftCustomIcon() }}\"></i>\n    } @else if (showLeftIcon()) {\n      <fa-icon [icon]=\"leftIcon()\" />\n    }\n\n    @if (computedText()) {\n      <span\n        class=\"\"\n        [ngClass]=\"{\n          'ms-1': leftIcon() || leftCustomIcon(),\n          'me-1': rightIcon() || rightCustomIcon(),\n        }\">\n        {{ computedText() | appTranslate: translatorOptions() | async }}\n      </span>\n    } @else {\n      <span\n        class=\" \"\n        [ngClass]=\"{\n          'ms-1': innerText.innerText && (leftIcon() || leftCustomIcon()),\n          'me-1': innerText.innerText && (rightIcon() || rightCustomIcon()),\n        }\"\n        #innerText\n        [debug]=\"debug()\"\n        appTranslator>\n        <ng-content></ng-content>\n      </span>\n    }\n\n    @if (loading()) {\n      <span class=\"fa fa-spinner ms-{{ iconBtn() ? '' : '2' }} fa-spin\"></span>\n    } @else if (showRightDisabledIcon()) {\n      <fa-icon [icon]=\"lockedIcon()\" />\n    } @else if (showRightCustomIcon()) {\n      <i class=\"{{ rightCustomIcon() }}\"></i>\n    } @else if (showRightIcon()) {\n      <fa-icon [icon]=\"rightIcon()\" />\n    }\n  </button>\n</span>\n", styles: [".lite{padding:0}.disabled{cursor:not-allowed}.invalid{border:3px solid var(--bs-danger)}.mini button{height:auto!important;min-height:unset;padding:2px 5px}@keyframes animateDanger{0%{background-color:red;border-color:red;background-image:none;color:#fff}50%{background-color:red;border-color:red;background-image:none;color:#fff}}@keyframes animateWarning{0%{background-color:#ff8107;border-color:#ff8107;background-image:none;color:#000}50%{background-color:#ff8107;border-color:#ff8107;background-image:none;color:#000}}.isDanger{animation-name:animateDanger;animation-duration:1s;animation-iteration-count:infinite}.isWarning{animation-name:animateWarning;animation-duration:1s;animation-iteration-count:infinite}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: TranslatorDirective, selector: "[appTranslator]", inputs: ["appTranslator", "debug", "translateOptions"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: BtnComponent, isStandalone: true, selector: "app-btn", inputs: { formSchema: { classPropertyName: "formSchema", publicName: "formSchema", isSignal: true, isRequired: false, transformFunction: null }, debug: { classPropertyName: "debug", publicName: "debug", isSignal: true, isRequired: false, transformFunction: null }, centerBtn: { classPropertyName: "centerBtn", publicName: "centerBtn", isSignal: true, isRequired: false, transformFunction: null }, danger: { classPropertyName: "danger", publicName: "danger", isSignal: true, isRequired: false, transformFunction: null }, warning: { classPropertyName: "warning", publicName: "warning", isSignal: true, isRequired: false, transformFunction: null }, verbose: { classPropertyName: "verbose", publicName: "verbose", isSignal: true, isRequired: false, transformFunction: null }, translatorOptions: { classPropertyName: "translatorOptions", publicName: "translatorOptions", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, _icon: { classPropertyName: "_icon", publicName: "icon", isSignal: false, isRequired: false, transformFunction: null }, _rightIcon: { classPropertyName: "_rightIcon", publicName: "rightIcon", isSignal: false, isRequired: false, transformFunction: null }, _leftIcon: { classPropertyName: "_leftIcon", publicName: "leftIcon", isSignal: false, isRequired: false, transformFunction: null }, _type: { classPropertyName: "_type", publicName: "type", isSignal: false, isRequired: false, transformFunction: null }, _group: { classPropertyName: "_group", publicName: "group", isSignal: false, isRequired: false, transformFunction: null }, actionType: { classPropertyName: "actionType", publicName: "actionType", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, excludeLogging: { classPropertyName: "excludeLogging", publicName: "excludeLogging", isSignal: false, isRequired: false, transformFunction: booleanAttribute2 }, loggingValue: { classPropertyName: "loggingValue", publicName: "loggingValue", isSignal: false, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null }, customIcon: { classPropertyName: "customIcon", publicName: "customIcon", isSignal: false, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, forms: { classPropertyName: "forms", publicName: "forms", isSignal: true, isRequired: false, transformFunction: null }, help: { classPropertyName: "help", publicName: "help", isSignal: true, isRequired: false, transformFunction: null }, helpShowDelay: { classPropertyName: "helpShowDelay", publicName: "helpShowDelay", isSignal: true, isRequired: false, transformFunction: null }, _iconBtn: { classPropertyName: "_iconBtn", publicName: "iconBtn", isSignal: false, isRequired: false, transformFunction: booleanAttribute2 }, mclass: { classPropertyName: "mclass", publicName: "mclass", isSignal: true, isRequired: false, transformFunction: null }, showHelpIcon: { classPropertyName: "showHelpIcon", publicName: "showHelpIcon", isSignal: true, isRequired: false, transformFunction: null }, _rightCustomIcon: { classPropertyName: "_rightCustomIcon", publicName: "rightCustomIcon", isSignal: false, isRequired: false, transformFunction: null }, leftCustomIcon: { classPropertyName: "leftCustomIcon", publicName: "leftCustomIcon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null }, mini: { classPropertyName: "mini", publicName: "mini", isSignal: true, isRequired: false, transformFunction: null }, onFormInvalid: { classPropertyName: "onFormInvalid", publicName: "onFormInvalid", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { loading: "loadingChange", leftCustomIcon: "leftCustomIconChange", mclick: "mclick", disabled: "disabledChange" }, viewQueries: [{ propertyName: "innerText", first: true, predicate: ["innerText"], descendants: true }], ngImport: i0, template: "@if (verbose()) {\n  <div class=\"\">formState():{{ formState() | json }}</div>\n  <div class=\"\">form():{{ form()?.getRawValue() | json }}</div>\n}\n<span\n  class=\"{{ class() }}  d-flex  align-items-center justify-content-center\"\n  [ngClass]=\"{ disabled: isDisabled(), mini: mini() }\"\n  (click)=\"btnS.checkForm(this)\">\n  @if (showHelpIcon() && help()) {\n    <i\n      class=\"fa fa-info-circle me-2 text-primary\"\n      [matTooltipShowDelay]=\"helpShowDelay()\"\n      [matTooltip]=\"help() | appTranslate: translatorOptions() | async\"></i>\n  }\n  <button\n    type=\"{{ actionType() }}\"\n    class=\"{{ mclass() }} {{ _mclass() || 'btn' }} d-flex align-items-center \"\n    [matBadge]=\"badge()\"\n    [ngClass]=\"ngClass()\"\n    [disabled]=\"isDisabled()\"\n    (click)=\"click($event)\"\n    [matTooltipShowDelay]=\"helpShowDelay()\"\n    [matTooltip]=\"showHelpIcon() ? null : (help() | appTranslate: translatorOptions() | async)\">\n    @if (showLeftDisabledIcon()) {\n      <fa-icon [icon]=\"lockedIcon()\" />\n    } @else if (showLeftCustomIcon()) {\n      <i class=\"{{ leftCustomIcon() }}\"></i>\n    } @else if (showLeftIcon()) {\n      <fa-icon [icon]=\"leftIcon()\" />\n    }\n\n    @if (computedText()) {\n      <span\n        class=\"\"\n        [ngClass]=\"{\n          'ms-1': leftIcon() || leftCustomIcon(),\n          'me-1': rightIcon() || rightCustomIcon(),\n        }\">\n        {{ computedText() | appTranslate: translatorOptions() | async }}\n      </span>\n    } @else {\n      <span\n        class=\" \"\n        [ngClass]=\"{\n          'ms-1': innerText.innerText && (leftIcon() || leftCustomIcon()),\n          'me-1': innerText.innerText && (rightIcon() || rightCustomIcon()),\n        }\"\n        #innerText\n        [debug]=\"debug()\"\n        appTranslator>\n        <ng-content></ng-content>\n      </span>\n    }\n\n    @if (loading()) {\n      <span class=\"fa fa-spinner ms-{{ iconBtn() ? '' : '2' }} fa-spin\"></span>\n    } @else if (showRightDisabledIcon()) {\n      <fa-icon [icon]=\"lockedIcon()\" />\n    } @else if (showRightCustomIcon()) {\n      <i class=\"{{ rightCustomIcon() }}\"></i>\n    } @else if (showRightIcon()) {\n      <fa-icon [icon]=\"rightIcon()\" />\n    }\n  </button>\n</span>\n", styles: [".lite{padding:0}.disabled{cursor:not-allowed}.invalid{border:3px solid var(--bs-danger)}.mini button{height:auto!important;min-height:unset;padding:2px 5px}@keyframes animateDanger{0%{background-color:red;border-color:red;background-image:none;color:#fff}50%{background-color:red;border-color:red;background-image:none;color:#fff}}@keyframes animateWarning{0%{background-color:#ff8107;border-color:#ff8107;background-image:none;color:#000}50%{background-color:#ff8107;border-color:#ff8107;background-image:none;color:#000}}.isDanger{animation-name:animateDanger;animation-duration:1s;animation-iteration-count:infinite}.isWarning{animation-name:animateWarning;animation-duration:1s;animation-iteration-count:infinite}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatBadgeModule }, { kind: "directive", type: i2.MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2$1.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"], outputs: ["iconChange", "titleChange", "animationChange", "maskChange", "flipChange", "sizeChange", "pullChange", "borderChange", "inverseChange", "symbolChange", "rotateChange", "fixedWidthChange", "transformChange", "a11yRoleChange"] }, { kind: "directive", type: TranslatorDirective, selector: "[appTranslator]", inputs: ["appTranslator", "debug", "translateOptions"] }, { kind: "pipe", type: JsonPipe, name: "json" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: BtnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-btn', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+            args: [{ selector: 'app-btn', imports: [
                         NgClass,
                         MatTooltipModule,
                         MatBadgeModule,
@@ -8293,11 +8289,15 @@ class ValidationMessageComponent {
         /** Computed control that resolves to either the direct control or the one from the input component */
         this.computedControl = computed(() => this.control() || this.input()?.control(), ...(ngDevMode ? [{ debugName: "computedControl" }] : []));
         /** Signal that notifies when the form field changes */
-        this.formFieldNotifier = toSignal(toObservable(this.computedControl).pipe(startWith(this.control()), switchMap((control) => (control ? control.events : of(null))), tap$1((e) => {
-            e;
+        this.formEventsRes = rxResource({
+            params: () => this.computedControl(),
+            stream: (o) => o.params?.events,
+        });
+        this.formFieldNotifier = computed(() => {
             if (this.debug())
                 debugger;
-        })));
+            return this.formEventsRes.value();
+        }, ...(ngDevMode ? [{ debugName: "formFieldNotifier" }] : []));
         /** Computed minimum length from various sources */
         this.minLength = computed(() => {
             const t = this._minLength(), i = this.input()?.minLength(), i2 = this.input()?.minSignal();
@@ -8377,7 +8377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         SDKTranslatePipe,
                         forwardRef(() => ErrorMessagePipe),
                         MatTooltipModule,
-                        SDKTranslateNoLoaderPipe
+                        SDKTranslateNoLoaderPipe,
                     ], template: "<div class=\"text-danger\" [class.applyMargin]=\"applyMargin()\" (click)=\"logErrors()\" [ngClass]=\"{ hideOverflow: hideOverflow() }\" #el>\n  @for (error of computedErrors(); track error) {\n    <div class=\"d-flex gap-1\">\n      <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n      <span\n        class=\"me-2 errormssg\"\n        [matTooltip]=\"ele.innerText\"\n        [matTooltipDisabled]=\"\n          ele.scrollHeight <= ele.offsetHeight && ele.scrollWidth <= ele.offsetWidth\n        \"\n        [innerHTML]=\"error | appTranslateNL: translationConfig | async\"\n        #ele></span>\n    </div>\n  }\n</div>\n", styles: [".text-danger{min-height:25px;position:relative}.applyMargin{margin-top:5px}.errormssg{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;font-size:.8rem}.hideOverflow{height:25px;overflow:hidden}\n"] }]
         }] });
 /**
@@ -10513,8 +10513,11 @@ class InputBase {
         };
         /** Observable of value changes from the control */
         this.valueChanges = toObservable(this.control).pipe(startWith(this.control()), filter((c) => !!c), switchMap((c) => c?.valueChanges?.pipe(startWith(c?.getRawValue()), map$1(() => c?.getRawValue()))));
-        this.formChanged = toObservable(this.control).pipe(startWith(this.control()), filter((c) => !!c), switchMap((c) => c?.events?.pipe()));
-        this.formFieldNotifier = toSignal(this.formChanged.pipe(map$1(() => performance.now())));
+        this.formChangedRes = rxResource({
+            params: () => this.control(),
+            stream: (o) => (o.params ? o.params.events?.pipe() : of(null)),
+        });
+        this.formFieldNotifier = computed(() => this.formChangedRes.value(), ...(ngDevMode ? [{ debugName: "formFieldNotifier" }] : []));
         /** Signal for whether the input is valid */
         this.validSignal = computed(() => {
             this.formFieldNotifier();
@@ -17287,44 +17290,44 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
  * in nested form structures.
  */
 class FormErrorComponent {
-    // readonly errors = signal<{ formControl: AbstractControl; label: string; parent?: string }[]>([]);
-    set form(v) {
-        // debugger;
-        this.sub?.clear();
-        this.sub.push((Array.isArray(v)
-            ? merge(...v.map((f) => f.statusChanges)).pipe(debounceTime(600), map$1((formStatus) => {
-                if (formStatus == 'INVALID' ||
-                    formStatus == 'PENDING' ||
-                    v.some((f) => f.status == 'INVALID' || f.status == 'PENDING'))
-                    return (uniqBy(v.flatMap((f) => this.getErrorMessages(f)), (i) => i.label) || []);
-                else {
-                    return [];
-                }
-            }))
-            : v.statusChanges.pipe(debounceTime(600), map$1((formStatus) => {
-                if (v.status == 'INVALID' || v.status == 'PENDING')
-                    return this.getErrorMessages(v);
-                else {
-                    return [];
-                }
-            }))).subscribe((r) => this.errors.set(r)));
-    }
     /**
      * Creates an instance of FormErrorComponent.
      * @param el Reference to the component's host element
      * @param uS Utility service for formatting and other operations
      * @param destroyerRef Reference for handling component destruction
      */
-    constructor(el, uS, destroyerRef) {
+    constructor(el, uS) {
         this.el = el;
         this.uS = uS;
-        this.destroyerRef = destroyerRef;
-        /** Subscription manager for handling form status changes */
-        this.sub = this.uS.createSubscriptionManager();
+        // readonly errors = signal<{ formControl: AbstractControl; label: string; parent?: string }[]>([]);
+        this.form = input(...(ngDevMode ? [undefined, { debugName: "form" }] : []));
+        this.formErrorRes = rxResource({
+            params: () => this.form(),
+            stream: (o) => {
+                const v = o.params;
+                if (!v)
+                    return of(null);
+                return Array.isArray(v)
+                    ? merge(...v.map((f) => f.statusChanges)).pipe(debounceTime(600), map$1((formStatus) => {
+                        if (formStatus == 'INVALID' ||
+                            formStatus == 'PENDING' ||
+                            v.some((f) => f.status == 'INVALID' || f.status == 'PENDING'))
+                            return (uniqBy(v.flatMap((f) => this.getErrorMessages(f)), (i) => i.label) || []);
+                        else {
+                            return [];
+                        }
+                    }))
+                    : v.statusChanges.pipe(debounceTime(600), map$1((formStatus) => {
+                        if (v.status == 'INVALID' || v.status == 'PENDING')
+                            return this.getErrorMessages(v);
+                        else {
+                            return [];
+                        }
+                    }));
+            },
+        });
         /** Signal containing all errors from the monitored form(s) */
-        this.errors = signal([], ...(ngDevMode ? [{ debugName: "errors" }] : []));
-        /** Computed signal filtering to only invalid or pending form controls */
-        this.cErrors = computed(() => this.errors()?.filter((x) => x.formControl.invalid || x.formControl.pending), ...(ngDevMode ? [{ debugName: "cErrors" }] : []));
+        this.errors = computed(() => this.formErrorRes.value()?.filter((x) => x.formControl.invalid || x.formControl.pending), ...(ngDevMode ? [{ debugName: "errors" }] : []));
         // protected form?: Form;
         // protected forms?: Form[];
         /** Input signal to enable custom result display */
@@ -17336,18 +17339,11 @@ class FormErrorComponent {
         /** Input signal for extra-large grid column count */
         this.xxlGridNo = input(3, ...(ngDevMode ? [{ debugName: "xxlGridNo" }] : []));
         /** Computed signal indicating if any errors exist */
-        this.hasError = computed(() => this.cErrors()?.length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+        this.hasError = computed(() => this.errors()?.length > 0, ...(ngDevMode ? [{ debugName: "hasError" }] : []));
         /** Reference to the result template */
         this.resultTemplateRef = viewChild('resultTemplate', ...(ngDevMode ? [{ debugName: "resultTemplateRef" }] : []));
         /** Reference to the error container element */
         this.errContRef = viewChild('errCont', ...(ngDevMode ? [{ debugName: "errContRef" }] : []));
-        // effect(() => {
-        //   console.log('errored forms', this.errors());
-        //   console.log('cErrored forms', this.cErrors());
-        // });
-        this.destroyerRef.onDestroy(() => {
-            this.sub?.clear();
-        });
     }
     /**
      * Recursively collects error messages from a form or form control.
@@ -17399,8 +17395,8 @@ class FormErrorComponent {
             errCont.scrollIntoView();
         }, 500);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FormErrorComponent, deps: [{ token: i0.ElementRef }, { token: UtilityService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FormErrorComponent, isStandalone: true, selector: "form-error", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: false, isRequired: false, transformFunction: null }, customResult: { classPropertyName: "customResult", publicName: "customResult", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, lgGridNo: { classPropertyName: "lgGridNo", publicName: "lgGridNo", isSignal: true, isRequired: false, transformFunction: null }, xxlGridNo: { classPropertyName: "xxlGridNo", publicName: "xxlGridNo", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resultTemplateRef", first: true, predicate: ["resultTemplate"], descendants: true, isSignal: true }, { propertyName: "errContRef", first: true, predicate: ["errCont"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasError()) {\n  <div class=\"d-flex justify-content-end\" [class.mt-2]=\"!inline()\">\n    <app-btn\n      text=\"Form Errors\"\n      icon=\"info\"\n      type=\"clear\"\n      mclass=\"btn-outline-warning\"\n      (mclick)=\"toggleErrors()\" />\n  </div>\n}\n@if (!customResult()) {\n  <ng-container *ngTemplateOutlet=\"resultTemplate\" />\n}\n<ng-template #resultTemplate>\n  @if (hasError()) { \n    <div class=\"border form-error-container p-3 mt-2\" #errCont [hidden]=\"true\">\n      <div class=\"row row-cols-lg-{{ lgGridNo() }} row-cols-xxl-{{ xxlGridNo() }}\">\n        @if (false) {\n          <div class=\"col-lg-12 d-flex\">\n            <div>\n              <div class=\"pe-3\">{{ 'Form errors' | appTranslate | async }}</div>\n              <!-- <hr class=\"my-0\"> -->\n            </div>\n          </div>\n        }\n        @for (item of cErrors(); track item.label + item.parent) {\n          @if (item.formControl) {\n            <div class=\"error-item-case\">\n              @if (item.parent) {\n                <app-info-icon text=\"Group: {{ item.parent }}\" />\n                <!-- <div class=\"\" [matTooltip]=\"item.parent\">Parent</div> -->\n              }\n              <app-validation-message\n                [label]=\"item.label | titlecase\"\n                [ignoreDirtiness]=\"true\"\n                [applyMargin]=\"false\"\n                [control]=\"item.formControl\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .errormssg{color:#870000}:host .form-error-container{border-radius:10px}:host app-info-icon{margin-right:5px;height:18px}:host app-info-icon ::ng-deep i{font-size:18px}:host .error-item-case{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FormErrorComponent, deps: [{ token: i0.ElementRef }, { token: UtilityService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: FormErrorComponent, isStandalone: true, selector: "form-error", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, customResult: { classPropertyName: "customResult", publicName: "customResult", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, lgGridNo: { classPropertyName: "lgGridNo", publicName: "lgGridNo", isSignal: true, isRequired: false, transformFunction: null }, xxlGridNo: { classPropertyName: "xxlGridNo", publicName: "xxlGridNo", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "resultTemplateRef", first: true, predicate: ["resultTemplate"], descendants: true, isSignal: true }, { propertyName: "errContRef", first: true, predicate: ["errCont"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasError()) {\n  <div class=\"d-flex justify-content-end\" [class.mt-2]=\"!inline()\">\n    <app-btn\n      text=\"Form Errors\"\n      icon=\"info\"\n      type=\"clear\"\n      mclass=\"btn-outline-warning\"\n      (mclick)=\"toggleErrors()\" />\n  </div>\n}\n@if (!customResult()) {\n  <ng-container *ngTemplateOutlet=\"resultTemplate\" />\n}\n<ng-template #resultTemplate>\n  @if (hasError()) { \n    <div class=\"border form-error-container p-3 mt-2\" #errCont [hidden]=\"true\">\n      <div class=\"row row-cols-lg-{{ lgGridNo() }} row-cols-xxl-{{ xxlGridNo() }}\">\n        @if (false) {\n          <div class=\"col-lg-12 d-flex\">\n            <div>\n              <div class=\"pe-3\">{{ 'Form errors' | appTranslate | async }}</div>\n              <!-- <hr class=\"my-0\"> -->\n            </div>\n          </div>\n        }\n        @for (item of errors(); track item.label + item.parent) {\n          @if (item.formControl) {\n            <div class=\"error-item-case\">\n              @if (item.parent) {\n                <app-info-icon text=\"Group: {{ item.parent }}\" />\n                <!-- <div class=\"\" [matTooltip]=\"item.parent\">Parent</div> -->\n              }\n              <app-validation-message\n                [label]=\"item.label | titlecase\"\n                [ignoreDirtiness]=\"true\"\n                [applyMargin]=\"false\"\n                [control]=\"item.formControl\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .errormssg{color:#870000}:host .form-error-container{border-radius:10px}:host app-info-icon{margin-right:5px;height:18px}:host app-info-icon ::ng-deep i{font-size:18px}:host .error-item-case{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ValidationMessageComponent, selector: "app-validation-message", inputs: ["maxLength", "minLength", "control", "customMessage", "debug", "applyMargin", "ignoreDirtiness", "input", "label", "hideOverflow"], outputs: ["labelChange"] }, { kind: "component", type: BtnComponent, selector: "app-btn", inputs: ["formSchema", "debug", "centerBtn", "danger", "warning", "verbose", "translatorOptions", "loading", "icon", "rightIcon", "leftIcon", "type", "group", "actionType", "animate", "excludeLogging", "loggingValue", "badge", "class", "customIcon", "form", "forms", "help", "helpShowDelay", "iconBtn", "mclass", "showHelpIcon", "rightCustomIcon", "leftCustomIcon", "text", "valid", "mini", "onFormInvalid", "disabled"], outputs: ["loadingChange", "leftCustomIconChange", "mclick", "disabledChange"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "component", type: InfoIconComponent, selector: "app-info-icon", inputs: ["text", "coloured", "left", "right"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: SDKTranslatePipe, name: "appTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: FormErrorComponent, decorators: [{
             type: Component,
@@ -17411,10 +17407,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
                         BtnComponent,
                         MatTooltipModule,
                         InfoIconComponent,
-                    ], template: "@if (hasError()) {\n  <div class=\"d-flex justify-content-end\" [class.mt-2]=\"!inline()\">\n    <app-btn\n      text=\"Form Errors\"\n      icon=\"info\"\n      type=\"clear\"\n      mclass=\"btn-outline-warning\"\n      (mclick)=\"toggleErrors()\" />\n  </div>\n}\n@if (!customResult()) {\n  <ng-container *ngTemplateOutlet=\"resultTemplate\" />\n}\n<ng-template #resultTemplate>\n  @if (hasError()) { \n    <div class=\"border form-error-container p-3 mt-2\" #errCont [hidden]=\"true\">\n      <div class=\"row row-cols-lg-{{ lgGridNo() }} row-cols-xxl-{{ xxlGridNo() }}\">\n        @if (false) {\n          <div class=\"col-lg-12 d-flex\">\n            <div>\n              <div class=\"pe-3\">{{ 'Form errors' | appTranslate | async }}</div>\n              <!-- <hr class=\"my-0\"> -->\n            </div>\n          </div>\n        }\n        @for (item of cErrors(); track item.label + item.parent) {\n          @if (item.formControl) {\n            <div class=\"error-item-case\">\n              @if (item.parent) {\n                <app-info-icon text=\"Group: {{ item.parent }}\" />\n                <!-- <div class=\"\" [matTooltip]=\"item.parent\">Parent</div> -->\n              }\n              <app-validation-message\n                [label]=\"item.label | titlecase\"\n                [ignoreDirtiness]=\"true\"\n                [applyMargin]=\"false\"\n                [control]=\"item.formControl\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .errormssg{color:#870000}:host .form-error-container{border-radius:10px}:host app-info-icon{margin-right:5px;height:18px}:host app-info-icon ::ng-deep i{font-size:18px}:host .error-item-case{display:flex}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: UtilityService }, { type: i0.DestroyRef }], propDecorators: { form: [{
-                type: Input
-            }] } });
+                    ], template: "@if (hasError()) {\n  <div class=\"d-flex justify-content-end\" [class.mt-2]=\"!inline()\">\n    <app-btn\n      text=\"Form Errors\"\n      icon=\"info\"\n      type=\"clear\"\n      mclass=\"btn-outline-warning\"\n      (mclick)=\"toggleErrors()\" />\n  </div>\n}\n@if (!customResult()) {\n  <ng-container *ngTemplateOutlet=\"resultTemplate\" />\n}\n<ng-template #resultTemplate>\n  @if (hasError()) { \n    <div class=\"border form-error-container p-3 mt-2\" #errCont [hidden]=\"true\">\n      <div class=\"row row-cols-lg-{{ lgGridNo() }} row-cols-xxl-{{ xxlGridNo() }}\">\n        @if (false) {\n          <div class=\"col-lg-12 d-flex\">\n            <div>\n              <div class=\"pe-3\">{{ 'Form errors' | appTranslate | async }}</div>\n              <!-- <hr class=\"my-0\"> -->\n            </div>\n          </div>\n        }\n        @for (item of errors(); track item.label + item.parent) {\n          @if (item.formControl) {\n            <div class=\"error-item-case\">\n              @if (item.parent) {\n                <app-info-icon text=\"Group: {{ item.parent }}\" />\n                <!-- <div class=\"\" [matTooltip]=\"item.parent\">Parent</div> -->\n              }\n              <app-validation-message\n                [label]=\"item.label | titlecase\"\n                [ignoreDirtiness]=\"true\"\n                [applyMargin]=\"false\"\n                [control]=\"item.formControl\" />\n            </div>\n          }\n        }\n      </div>\n    </div>\n  }\n</ng-template>\n", styles: [":host ::ng-deep .errormssg{color:#870000}:host .form-error-container{border-radius:10px}:host app-info-icon{margin-right:5px;height:18px}:host app-info-icon ::ng-deep i{font-size:18px}:host .error-item-case{display:flex}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: UtilityService }] });
 /**
  * Utility function to check if a control has validation errors.
  * @param control The form control to check