nath-angular-ui 0.3.0 → 0.4.1

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 {
@@ -641,7 +641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
   `, encapsulation: ViewEncapsulation.None, host: {}, styles: ["nath-dialog-container,.nath-dialog-theme{--nath-dialog-bg: #ffffff;--nath-dialog-border: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-radius: .75rem;--nath-dialog-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--nath-dialog-mask-bg: rgba(0, 0, 0, .4);--nath-dialog-mask-blur: 4px;--nath-dialog-header-border: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-text-main: var(--color-zinc-900, oklch(21% .006 285.885));--nath-dialog-text-muted: var(--color-zinc-500, oklch(55.2% .016 285.938));--nath-dialog-text-title: var(--color-zinc-900, oklch(21% .006 285.885));--nath-dialog-btn-hover-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-btn-icon-color: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-dialog-btn-icon-hover: var(--color-zinc-600, oklch(44.2% .017 285.786));--nath-dialog-btn-default-bg: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-btn-default-text: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-default-hover: var(--color-zinc-200, oklch(92% .004 286.32))}.dark nath-dialog-container,.dark .nath-dialog-theme{--nath-dialog-bg: var(--color-zinc-900, oklch(14.1% .005 285.823));--nath-dialog-border: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-header-border: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-text-main: var(--color-zinc-100, oklch(96.7% .001 286.375));--nath-dialog-text-muted: var(--color-zinc-400, oklch(70.5% .015 286.067));--nath-dialog-text-title: #ffffff;--nath-dialog-btn-hover-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-icon-hover: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-btn-default-bg: var(--color-zinc-800, oklch(27.4% .006 286.033));--nath-dialog-btn-default-text: var(--color-zinc-200, oklch(92% .004 286.32));--nath-dialog-btn-default-hover: var(--color-zinc-700, oklch(37% .013 285.805))}nath-dialog-container{display:contents}.nath-dialog-mask{position:fixed;inset:0;z-index:50;background-color:var(--nath-dialog-mask-bg);-webkit-backdrop-filter:blur(var(--nath-dialog-mask-blur));backdrop-filter:blur(var(--nath-dialog-mask-blur));display:flex;align-items:center;justify-content:center;padding:1rem}.nath-dialog-window{background-color:var(--nath-dialog-bg);color:var(--nath-dialog-text-main);border:1px solid var(--nath-dialog-border);border-radius:var(--nath-dialog-radius);box-shadow:var(--nath-dialog-shadow);max-width:90vw;max-height:90vh;display:flex;flex-direction:column;pointer-events:auto;cursor:default;overflow:hidden}.nath-dialog-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid var(--nath-dialog-header-border);cursor:move;-webkit-user-select:none;user-select:none;flex-shrink:0}.nath-dialog-title{font-size:1.125rem;font-weight:600;line-height:1.75rem;letter-spacing:-.025em;color:var(--nath-dialog-text-title);margin:0}.nath-dialog-header-actions{display:flex;gap:.5rem}.nath-dialog-action-btn{color:var(--nath-dialog-btn-icon-color);border-radius:.5rem;padding:.25rem;transition:colors .2s;cursor:pointer;background:transparent;border:none;display:flex;align-items:center;justify-content:center}.nath-dialog-action-btn:hover{color:var(--nath-dialog-btn-icon-hover);background-color:var(--nath-dialog-btn-hover-bg)}.nath-dialog-body{padding:1rem;overflow-y:auto;flex-grow:1}.nath-dialog-footer{padding:1rem;display:flex;justify-content:end;gap:1rem;position:sticky;bottom:-1px;background-color:var(--nath-dialog-bg)}.nath-dialog-btn{padding:.5rem 1rem;font-size:.875rem;font-weight:500;border-radius:.5rem;transition:colors .2s;cursor:pointer;border:none;display:inline-flex;align-items:center;justify-content:center}.nath-dialog-btn--default{background-color:var(--nath-dialog-btn-default-bg);color:var(--nath-dialog-btn-default-text)}.nath-dialog-btn--default:hover{background-color:var(--nath-dialog-btn-default-hover)}.nath-dialog-window.dialog-maximized{max-width:100vw!important;max-height:100vh!important;width:100vw!important;height:100vh!important;border-radius:0!important;transform:none!important}.nath-dialog-content-text{font-size:.875rem;color:var(--nath-dialog-text-muted)}.nath-confirmation-dialog{display:flex;flex-direction:column;gap:1rem}\n"] }]
         }], propDecorators: { portalOutlet: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkPortalOutlet), { isSignal: true }] }] } });
 
-class DialogService {
+class NathDialogService {
     injector = inject(Injector);
     environmentInjector = inject(EnvironmentInjector);
     appRef = inject(ApplicationRef);
@@ -709,10 +709,10 @@ class DialogService {
             containerRef.destroy();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -822,7 +822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
         }] });
 
 class ConfirmationService {
-    dialogService = inject(DialogService);
+    dialogService = inject(NathDialogService);
     /** Spawns a type-safe confirmation window */
     confirm(config) {
         return this.dialogService.open(NathConfirmationDialog, {
@@ -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, NathAutocomplete, NathBooleanControl, NathBreadcrumbs, NathCodeViewer, NathConfirmationDialog, NathDatepicker, NathDialogContainer, NathDialogService, 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