nath-angular-ui 0.3.0 → 0.4.0

package/fesm2022/nath-angular-ui.mjs

@@ -10,13 +10,13 @@ import { RouterModule, Router, NavigationEnd, RouterLink, RouterLinkActive } fro
 import * as i1$2 from '@angular/forms';
 import { FormsModule, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
 import { BasePortalOutlet, CdkPortalOutlet, TemplatePortal, ComponentPortal } from '@angular/cdk/portal';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { toObservable, toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@angular/cdk/drag-drop';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { filter } from 'rxjs/operators';
+import { of, fromEvent } from 'rxjs';
 import { DomSanitizer } from '@angular/platform-browser';
 import { CdkVirtualScrollViewport, ScrollingModule } from '@angular/cdk/scrolling';
-import { fromEvent } from 'rxjs';
 import { Tabs, TabList, Tab, TabPanel, TabContent } from '@angular/aria/tabs';
 
 class NathAutocomplete {
@@ -1103,38 +1103,75 @@ class NathShowErrors {
         maxValue: (message) => message,
         integer: () => `Must be an integer`,
     };
-    signalField = input.required(/* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "signalField" }] : /* istanbul ignore next */ []));
+    signalField = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "signalField" }] : /* istanbul ignore next */ []));
+    control = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "control" }] : /* istanbul ignore next */ []));
+    controlValue = toSignal(this.control()?.valueChanges ?? of(null));
+    controlErrors = computed(() => {
+        this.controlValue();
+        return this.listOfErrors();
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "controlErrors" }] : /* istanbul ignore next */ []));
     static getMessage(type, params) {
         return NathShowErrors.errorMessages[type](params);
     }
     shouldShowErrors() {
         const fieldState = this.signalField();
-        return !!fieldState && !!fieldState.errors() && (fieldState.dirty() || fieldState.touched());
+        const control = this.control();
+        return ((!!fieldState && !!fieldState.errors() && (fieldState.dirty() || fieldState.touched())) ||
+            (!!control && !!control.errors && (control.dirty || control.touched)));
+    }
+    listOfErrors() {
+        const result = [];
+        const control = this.control();
+        if (control?.errors) {
+            for (const errorsKey in control.errors) {
+                result.push({
+                    kind: errorsKey,
+                    message: NathShowErrors.getMessage(errorsKey, control?.errors?.[errorsKey]),
+                });
+            }
+        }
+        return result;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathShowErrors, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathShowErrors, isStandalone: true, selector: "nath-show-errors", inputs: { signalField: { classPropertyName: "signalField", publicName: "signalField", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: `
-    @if (shouldShowErrors()) {
-      <div class="nath-show-errors-container">
-        @for (error of signalField().errors(); track error.kind) {
-          <div class="nath-show-errors-item">{{ error.message }}</div>
-        }
-      </div>
-    }
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathShowErrors, isStandalone: true, selector: "nath-show-errors", inputs: { signalField: { classPropertyName: "signalField", publicName: "signalField", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    @if (shouldShowErrors()) {
+      <div class="nath-show-errors-container">
+        @if (signalField()) {
+          @for (error of signalField()!.errors(); track error.kind) {
+            <div class="nath-show-errors-item">{{ error.message }}</div>
+          }
+        }
+        @if (control()) {
+          @for (error of controlErrors(); track error.message) {
+            <div class="nath-show-errors-item">{{ error.message }}</div>
+          }
+        }
+      </div>
+    }
   `, isInline: true, styles: ["nath-show-errors,.nath-show-errors-theme{--nath-show-errors-gap: .5rem;--nath-show-errors-text: var(--color-danger-500, oklch(55% .22 25));display:block;padding:0}.dark nath-show-errors,.dark .nath-show-errors-theme{--nath-show-errors-text: var(--color-danger-400, oklch(65% .22 25))}.nath-show-errors-container{display:flex;flex-direction:column;gap:var(--nath-show-errors-gap)}.nath-show-errors-item{color:var(--nath-show-errors-text)}.ng-invalid.ng-dirty+nath-show-errors,.ng-invalid.ng-touched+nath-show-errors{color:var(--nath-show-errors-text)}\n"], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathShowErrors, decorators: [{
             type: Component,
-            args: [{ selector: 'nath-show-errors', imports: [], template: `
-    @if (shouldShowErrors()) {
-      <div class="nath-show-errors-container">
-        @for (error of signalField().errors(); track error.kind) {
-          <div class="nath-show-errors-item">{{ error.message }}</div>
-        }
-      </div>
-    }
+            args: [{ selector: 'nath-show-errors', imports: [], template: `
+    @if (shouldShowErrors()) {
+      <div class="nath-show-errors-container">
+        @if (signalField()) {
+          @for (error of signalField()!.errors(); track error.kind) {
+            <div class="nath-show-errors-item">{{ error.message }}</div>
+          }
+        }
+        @if (control()) {
+          @for (error of controlErrors(); track error.message) {
+            <div class="nath-show-errors-item">{{ error.message }}</div>
+          }
+        }
+      </div>
+    }
   `, encapsulation: ViewEncapsulation.None, styles: ["nath-show-errors,.nath-show-errors-theme{--nath-show-errors-gap: .5rem;--nath-show-errors-text: var(--color-danger-500, oklch(55% .22 25));display:block;padding:0}.dark nath-show-errors,.dark .nath-show-errors-theme{--nath-show-errors-text: var(--color-danger-400, oklch(65% .22 25))}.nath-show-errors-container{display:flex;flex-direction:column;gap:var(--nath-show-errors-gap)}.nath-show-errors-item{color:var(--nath-show-errors-text)}.ng-invalid.ng-dirty+nath-show-errors,.ng-invalid.ng-touched+nath-show-errors{color:var(--nath-show-errors-text)}\n"] }]
-        }], propDecorators: { signalField: [{ type: i0.Input, args: [{ isSignal: true, alias: "signalField", required: true }] }] } });
+        }], propDecorators: { signalField: [{ type: i0.Input, args: [{ isSignal: true, alias: "signalField", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }] } });
 
 class NathFormField {
     inputId = input(null, /* @ts-ignore */
@@ -1172,7 +1209,7 @@ class NathFormField {
         <nath-show-errors [signalField]="signalField()!" />
       }
     </div>
-  `, isInline: true, styles: ["nath-form-field,.nath-form-field-theme{--nath-form-field-gap: .5rem;--nath-form-field-label-color: var(--color-zinc-900, oklch(21% .006 285.885));--nath-form-field-label-font-size: .875rem;--nath-form-field-label-font-weight: 500;--nath-form-field-required-color: var(--color-red-500, oklch(63.7% .237 25.331));--nath-form-field-error-color: var(--color-red-600, oklch(57.7% .245 27.325))}.dark nath-form-field,.dark .nath-form-field-theme{--nath-form-field-label-color: var(--color-zinc-200, oklch(92% .004 286.32))}nath-form-field{display:block}.nath-form-field-container{display:flex;width:100%;flex-direction:column;gap:var(--nath-form-field-gap)}.nath-form-field-label{width:100%;color:var(--nath-form-field-label-color);font-size:var(--nath-form-field-label-font-size);font-weight:var(--nath-form-field-label-font-weight)}.nath-form-field-label--required:after{content:\"*\";margin-left:.25rem;color:var(--nath-form-field-required-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: NathShowErrors, selector: "nath-show-errors", inputs: ["signalField"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
+  `, isInline: true, styles: ["nath-form-field,.nath-form-field-theme{--nath-form-field-gap: .5rem;--nath-form-field-label-color: var(--color-zinc-900, oklch(21% .006 285.885));--nath-form-field-label-font-size: .875rem;--nath-form-field-label-font-weight: 500;--nath-form-field-required-color: var(--color-red-500, oklch(63.7% .237 25.331));--nath-form-field-error-color: var(--color-red-600, oklch(57.7% .245 27.325))}.dark nath-form-field,.dark .nath-form-field-theme{--nath-form-field-label-color: var(--color-zinc-200, oklch(92% .004 286.32))}nath-form-field{display:block}.nath-form-field-container{display:flex;width:100%;flex-direction:column;gap:var(--nath-form-field-gap)}.nath-form-field-label{width:100%;color:var(--nath-form-field-label-color);font-size:var(--nath-form-field-label-font-size);font-weight:var(--nath-form-field-label-font-weight)}.nath-form-field-label--required:after{content:\"*\";margin-left:.25rem;color:var(--nath-form-field-required-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: NathShowErrors, selector: "nath-show-errors", inputs: ["signalField", "control"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathFormField, decorators: [{
             type: Component,
@@ -5484,5 +5521,5 @@ function isSortOrderValid(order) {
  * Generated bundle index. Do not edit.
  */
 
-export { BreadcrumbService, ConfirmationService, DARK_THEME_CLASS, DIALOG_DATA, DialogRef, DialogService, NathAutocomplete, NathBooleanControl, NathBreadcrumbs, NathCodeViewer, NathConfirmationDialog, NathDatepicker, NathDialogContainer, NathDrawer, NathFileUpload, NathFloatingLabel, NathFormField, NathImagePreview, NathMenu, NathMenuList, NathMultiselect, NathPaginatedView, NathPaginator, NathPanel, NathPickList, NathProgressBar, NathProgressCircle, NathRadioButtonGroup, NathRatingHeart, NathRatingInput, NathSelect, NathSkeleton, NathSlider, NathSortIcon, NathSplitButton, NathTabs, NathThemeSwitch, NathToastContainer, NathToc, NathTooltipContainer, NathTooltipDirective, ORDER, RATING_MAP, THEME_CONFIG, TabDirective, TabPanelDirective, ThemeService, ToastService, getRatingColor, hasRequiredValidator, isRequired, isSortOrderValid, isTruthy, next, provideThemeConfig, rangeMinMax, rangeNotMinMax, validateAllFormFields };
+export { BreadcrumbService, ConfirmationService, DARK_THEME_CLASS, DIALOG_DATA, DialogRef, DialogService, NathAutocomplete, NathBooleanControl, NathBreadcrumbs, NathCodeViewer, NathConfirmationDialog, NathDatepicker, NathDialogContainer, NathDrawer, NathFileUpload, NathFloatingLabel, NathFormField, NathImagePreview, NathMenu, NathMenuList, NathMultiselect, NathPaginatedView, NathPaginator, NathPanel, NathPickList, NathProgressBar, NathProgressCircle, NathRadioButtonGroup, NathRatingHeart, NathRatingInput, NathSelect, NathShowErrors, NathSkeleton, NathSlider, NathSortIcon, NathSplitButton, NathTabs, NathThemeSwitch, NathToastContainer, NathToc, NathTooltipContainer, NathTooltipDirective, ORDER, RATING_MAP, THEME_CONFIG, TabDirective, TabPanelDirective, ThemeService, ToastService, getRatingColor, hasRequiredValidator, isRequired, isSortOrderValid, isTruthy, next, provideThemeConfig, rangeMinMax, rangeNotMinMax, validateAllFormFields };
 //# sourceMappingURL=nath-angular-ui.mjs.map