nath-angular-ui 0.2.4 → 0.4.0

package/fesm2022/nath-angular-ui.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ElementRef, model, input, output, contentChild, TemplateRef, viewChild, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, InjectionToken, Injector, EnvironmentInjector, ApplicationRef, createEnvironmentInjector, createComponent, Service, Renderer2, viewChildren, SecurityContext, untracked, HostListener, ViewChild, booleanAttribute, Directive, contentChildren, ViewContainerRef } from '@angular/core';
+import { inject, ElementRef, model, input, output, contentChild, TemplateRef, viewChild, signal, computed, effect, ViewEncapsulation, ChangeDetectionStrategy, Component, Injectable, Pipe, InjectionToken, Injector, EnvironmentInjector, ApplicationRef, createEnvironmentInjector, createComponent, Service, Renderer2, viewChildren, SecurityContext, untracked, HostListener, ViewChild, booleanAttribute, Directive, contentChildren, ViewContainerRef } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, DOCUMENT, NgStyle, NgClass, KeyValuePipe } from '@angular/common';
 import * as i2 from '@angular/cdk/overlay';
@@ -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 {
@@ -349,6 +349,77 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
             args: [{ selector: 'nath-breadcrumbs', imports: [RouterModule], encapsulation: ViewEncapsulation.None, template: "@if (breadcrumbs().length > 0) {\r\n  <nav aria-label=\"breadcrumb\" class=\"nath-breadcrumb-container\">\r\n    <ol class=\"nath-breadcrumb-list\">\r\n      @for (crumb of breadcrumbs(); track crumb.label; let last = $last) {\r\n        <li class=\"nath-breadcrumb-item\" [class.is-active]=\"last\">\r\n          @if (crumb.routerLink && !last) {\r\n            <a\r\n              class=\"nath-breadcrumb-link\"\r\n              [routerLink]=\"crumb.routerLink\"\r\n              [queryParams]=\"crumb.queryParams\"\r\n              [routerLinkActive]=\"crumb.routerLinkActive ?? []\"\r\n              [routerLinkActiveOptions]=\"\r\n                crumb.routerLinkActiveOptions ?? { exact: false }\r\n              \"\r\n              >{{ crumb.label }}</a\r\n            >\r\n          } @else {\r\n            <span class=\"nath-breadcrumb-current\" aria-current=\"page\">{{ crumb.label }}</span>\r\n          }\r\n        </li>\r\n      }\r\n    </ol>\r\n  </nav>\r\n}\r\n", styles: ["nath-breadcrumbs,.nath-breadcrumbs-theme{--nath-breadcrumb-gap: .5rem;--nath-breadcrumb-padding-y: 1rem;--nath-breadcrumb-separator: \"/\";--nath-breadcrumb-separator-margin: .5rem;--nath-breadcrumb-separator-color: #a1a1aa;--nath-breadcrumb-link-color: #3b82f6;--nath-breadcrumb-link-hover-color: #2563eb;--nath-breadcrumb-active-color: #6c757d;--nath-breadcrumb-active-font-weight: 500}.dark nath-breadcrumbs,.dark .nath-breadcrumbs-theme{--nath-breadcrumb-separator-color: #52525b;--nath-breadcrumb-link-color: #60a5fa;--nath-breadcrumb-link-hover-color: #93c5fd;--nath-breadcrumb-active-color: #a1a1aa}.nath-breadcrumb-container{display:block}.nath-breadcrumb-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--nath-breadcrumb-gap);padding-top:var(--nath-breadcrumb-padding-y);padding-bottom:var(--nath-breadcrumb-padding-y);list-style:none;margin:0}.nath-breadcrumb-item{display:flex;align-items:center}.nath-breadcrumb-item:not(:last-child):after{content:var(--nath-breadcrumb-separator);margin-left:var(--nath-breadcrumb-separator-margin);color:var(--nath-breadcrumb-separator-color)}.nath-breadcrumb-link{color:var(--nath-breadcrumb-link-color);text-decoration:none;transition:color .2s ease-in-out}.nath-breadcrumb-link:hover{color:var(--nath-breadcrumb-link-hover-color);text-decoration:underline}.nath-breadcrumb-current{color:var(--nath-breadcrumb-active-color);font-weight:var(--nath-breadcrumb-active-font-weight)}\n"] }]
         }] });
 
+class CodeFileTabNamePipe {
+    transform(value, showFullPath) {
+        return showFullPath ? value : (value.split('/').at(-1) ?? '');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CodeFileTabNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: CodeFileTabNamePipe, isStandalone: true, name: "nathCodeFileTabName" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CodeFileTabNamePipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'nathCodeFileTabName',
+                }]
+        }] });
+
+class NathCodeViewer {
+    // Signal inputs
+    files = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "files" }] : /* istanbul ignore next */ []));
+    showLineNumbers = input(true, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showLineNumbers" }] : /* istanbul ignore next */ []));
+    // If true, show the full path instead of just the file name
+    showFullPaths = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "showFullPaths" }] : /* istanbul ignore next */ []));
+    // Active tab track index state
+    activeIndex = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeIndex" }] : /* istanbul ignore next */ []));
+    copied = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    // Derived state for the currently active file
+    activeFile = computed(() => {
+        const list = this.files();
+        const index = this.activeIndex();
+        return list[index] ?? list[0];
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeFile" }] : /* istanbul ignore next */ []));
+    // Derived state to split the active file's code into individual lines
+    lines = computed(() => {
+        const file = this.activeFile();
+        if (!file?.content)
+            return [];
+        return file.content.split('\n');
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "lines" }] : /* istanbul ignore next */ []));
+    selectTab(index) {
+        this.activeIndex.set(index);
+    }
+    copyToClipboard() {
+        const file = this.activeFile();
+        if (!file)
+            return;
+        navigator.clipboard
+            .writeText(file.content)
+            .then(() => {
+            this.copied.set(true);
+            setTimeout(() => this.copied.set(false), 2000);
+        })
+            .catch((err) => {
+            console.error('Failed to copy code: ', err);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathCodeViewer, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathCodeViewer, isStandalone: true, selector: "nath-code-viewer", inputs: { files: { classPropertyName: "files", publicName: "files", isSignal: true, isRequired: true, transformFunction: null }, showLineNumbers: { classPropertyName: "showLineNumbers", publicName: "showLineNumbers", isSignal: true, isRequired: false, transformFunction: null }, showFullPaths: { classPropertyName: "showFullPaths", publicName: "showFullPaths", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.has-copied": "copied()" }, classAttribute: "docs-code-container" }, ngImport: i0, template: "<div class=\"code-header\">\n  <div class=\"tabs-list\" role=\"tablist\" aria-label=\"File selections\">\n    @for (file of files(); track file.name) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"tab-button\"\n        [class.active]=\"activeIndex() === $index\"\n        [attr.aria-selected]=\"activeIndex() === $index\"\n        [attr.aria-controls]=\"'panel-' + $index\"\n        [attr.id]=\"'tab-' + $index\"\n        (click)=\"selectTab($index)\"\n      >\n        {{ file.name | nathCodeFileTabName: showFullPaths() }}\n      </button>\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    class=\"copy-button\"\n    [attr.aria-label]=\"copied() ? 'Copied code to clipboard' : 'Copy code to clipboard'\"\n    (click)=\"copyToClipboard()\"\n  >\n    {{ copied() ? 'Copied!' : 'Copy' }}\n  </button>\n</div>\n\n<div\n  class=\"code-body\"\n  role=\"tabpanel\"\n  [attr.id]=\"'panel-' + activeIndex()\"\n  [attr.aria-labelledby]=\"'tab-' + activeIndex()\"\n>\n  @if (showLineNumbers()) {\n    <div class=\"line-numbers\" aria-hidden=\"true\">\n      @for (line of lines(); track $index) {\n        <span>{{ $index + 1 }}</span>\n      }\n    </div>\n  }\n\n  <pre><code>@for (line of lines(); track $index) {<span class=\"code-line\">{{ line || '\\n' }}</span>}</code></pre>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background-color:#1e1e1e;color:#d4d4d4;border-radius:8px;overflow:hidden;font-family:Courier New,Courier,monospace;margin:16px 0;box-shadow:0 4px 6px #0000001a;min-width:0;width:100%}.code-header{display:flex;justify-content:space-between;align-items:center;background-color:#252526;border-bottom:1px solid #3c3c3c;padding:0 16px;flex-shrink:0}.tabs-list{display:flex;gap:4px;overflow-x:auto}.tab-button{background:transparent;color:#858585;border:none;border-bottom:2px solid transparent;padding:12px 16px;cursor:pointer;font-size:.85rem;font-family:inherit;transition:color .2s,border-color .2s}.tab-button:hover{color:#e0e0e0}.tab-button.active{color:#fff;border-bottom-color:#007acc;background-color:#1e1e1e}.tab-button:focus-visible{outline:2px solid #007acc;outline-offset:-2px}.copy-button{background-color:#333;color:#ccc;border:1px solid #444444;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8rem;transition:background-color .2s,color .2s}.copy-button:hover{background-color:#444;color:#fff}.copy-button:focus-visible{outline:2px solid #007acc;outline-offset:2px}.code-body{display:flex;padding:16px 0;overflow-x:auto;font-size:.9rem;line-height:1.5;width:100%}.line-numbers{display:flex;flex-direction:column;align-items:flex-end;padding:0 16px;color:#858585;-webkit-user-select:none;user-select:none;border-right:1px solid #2d2d2d;text-align:right;min-width:24px;flex-shrink:0}pre{margin:0;padding:0 16px;flex-grow:1;min-width:0}code{display:block}.code-line{display:block;white-space:pre}\n"], dependencies: [{ kind: "pipe", type: CodeFileTabNamePipe, name: "nathCodeFileTabName" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathCodeViewer, decorators: [{
+            type: Component,
+            args: [{ selector: 'nath-code-viewer', host: {
+                        class: 'docs-code-container',
+                        '[class.has-copied]': 'copied()',
+                    }, imports: [CodeFileTabNamePipe], template: "<div class=\"code-header\">\n  <div class=\"tabs-list\" role=\"tablist\" aria-label=\"File selections\">\n    @for (file of files(); track file.name) {\n      <button\n        type=\"button\"\n        role=\"tab\"\n        class=\"tab-button\"\n        [class.active]=\"activeIndex() === $index\"\n        [attr.aria-selected]=\"activeIndex() === $index\"\n        [attr.aria-controls]=\"'panel-' + $index\"\n        [attr.id]=\"'tab-' + $index\"\n        (click)=\"selectTab($index)\"\n      >\n        {{ file.name | nathCodeFileTabName: showFullPaths() }}\n      </button>\n    }\n  </div>\n\n  <button\n    type=\"button\"\n    class=\"copy-button\"\n    [attr.aria-label]=\"copied() ? 'Copied code to clipboard' : 'Copy code to clipboard'\"\n    (click)=\"copyToClipboard()\"\n  >\n    {{ copied() ? 'Copied!' : 'Copy' }}\n  </button>\n</div>\n\n<div\n  class=\"code-body\"\n  role=\"tabpanel\"\n  [attr.id]=\"'panel-' + activeIndex()\"\n  [attr.aria-labelledby]=\"'tab-' + activeIndex()\"\n>\n  @if (showLineNumbers()) {\n    <div class=\"line-numbers\" aria-hidden=\"true\">\n      @for (line of lines(); track $index) {\n        <span>{{ $index + 1 }}</span>\n      }\n    </div>\n  }\n\n  <pre><code>@for (line of lines(); track $index) {<span class=\"code-line\">{{ line || '\\n' }}</span>}</code></pre>\n</div>\n", styles: [":host{display:flex;flex-direction:column;background-color:#1e1e1e;color:#d4d4d4;border-radius:8px;overflow:hidden;font-family:Courier New,Courier,monospace;margin:16px 0;box-shadow:0 4px 6px #0000001a;min-width:0;width:100%}.code-header{display:flex;justify-content:space-between;align-items:center;background-color:#252526;border-bottom:1px solid #3c3c3c;padding:0 16px;flex-shrink:0}.tabs-list{display:flex;gap:4px;overflow-x:auto}.tab-button{background:transparent;color:#858585;border:none;border-bottom:2px solid transparent;padding:12px 16px;cursor:pointer;font-size:.85rem;font-family:inherit;transition:color .2s,border-color .2s}.tab-button:hover{color:#e0e0e0}.tab-button.active{color:#fff;border-bottom-color:#007acc;background-color:#1e1e1e}.tab-button:focus-visible{outline:2px solid #007acc;outline-offset:-2px}.copy-button{background-color:#333;color:#ccc;border:1px solid #444444;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:.8rem;transition:background-color .2s,color .2s}.copy-button:hover{background-color:#444;color:#fff}.copy-button:focus-visible{outline:2px solid #007acc;outline-offset:2px}.code-body{display:flex;padding:16px 0;overflow-x:auto;font-size:.9rem;line-height:1.5;width:100%}.line-numbers{display:flex;flex-direction:column;align-items:flex-end;padding:0 16px;color:#858585;-webkit-user-select:none;user-select:none;border-right:1px solid #2d2d2d;text-align:right;min-width:24px;flex-shrink:0}pre{margin:0;padding:0 16px;flex-grow:1;min-width:0}code{display:block}.code-line{display:block;white-space:pre}\n"] }]
+        }], propDecorators: { files: [{ type: i0.Input, args: [{ isSignal: true, alias: "files", required: true }] }], showLineNumbers: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLineNumbers", required: false }] }], showFullPaths: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFullPaths", required: false }] }] } });
+
 class NathDatepicker {
     // --- I/O ---
     withTime = input(false, /* @ts-ignore */
@@ -420,13 +491,13 @@ class NathDatepicker {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathDatepicker, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathDatepicker, isStandalone: true, selector: "nath-datepicker", inputs: { withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, dateInputValue: { classPropertyName: "dateInputValue", publicName: "dateInputValue", isSignal: true, isRequired: false, transformFunction: null }, dateTimeInputValue: { classPropertyName: "dateTimeInputValue", publicName: "dateTimeInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", dirty: "dirtyChange", value: "valueChange", dateInputValue: "dateInputValueChange", dateTimeInputValue: "dateTimeInputValueChange" }, host: { classAttribute: "nath-datepicker-host" }, ngImport: i0, template: "@if (withTime()) {\n  <input\n    type=\"datetime-local\"\n    [(ngModel)]=\"dateTimeInputValue\"\n    [attr.id]=\"inputId() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    class=\"nath-datepicker-datetime-input\"\n    (input)=\"onDateTimeInputChange($event)\"\n  />\n} @else {\n  <input\n    type=\"date\"\n    [(ngModel)]=\"dateInputValue\"\n    [attr.id]=\"inputId() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    class=\"nath-datepicker-date-input\"\n    (input)=\"onDateInputChange($event)\"\n  />\n}\n", styles: ["nath-datepicker,.nath-datepicker-theme{--nath-datepicker-date-width: 100%;--nath-datepicker-date-max-width: 9.5rem;--nath-datepicker-datetime-width: 100%;--nath-datepicker-datetime-max-width: 12.5rem}.nath-datepicker-host{display:flex;gap:.5rem}.nath-datepicker-date-input{display:block;width:var(--nath-datepicker-date-width);max-width:var(--nath-datepicker-date-max-width)}.nath-datepicker-host ::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-calendar-icon lucide-calendar\"><path d=\"M8 2v4\"/><path d=\"M16 2v4\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"/><path d=\"M3 10h18\"/></svg>')}.nath-datepicker-datetime-input{display:block;width:var(--nath-datepicker-datetime-width);max-width:var(--nath-datepicker-datetime-max-width)}.dark .nath-datepicker-host ::-webkit-calendar-picker-indicator{filter:invert(100%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: NathDatepicker, isStandalone: true, selector: "nath-datepicker", inputs: { withTime: { classPropertyName: "withTime", publicName: "withTime", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, language: { classPropertyName: "language", publicName: "language", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, touched: { classPropertyName: "touched", publicName: "touched", isSignal: true, isRequired: false, transformFunction: null }, dirty: { classPropertyName: "dirty", publicName: "dirty", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, dateInputValue: { classPropertyName: "dateInputValue", publicName: "dateInputValue", isSignal: true, isRequired: false, transformFunction: null }, dateTimeInputValue: { classPropertyName: "dateTimeInputValue", publicName: "dateTimeInputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { touched: "touchedChange", dirty: "dirtyChange", value: "valueChange", dateInputValue: "dateInputValueChange", dateTimeInputValue: "dateTimeInputValueChange" }, host: { classAttribute: "nath-datepicker-host" }, ngImport: i0, template: "@if (withTime()) {\n  <input\n    type=\"datetime-local\"\n    [(ngModel)]=\"dateTimeInputValue\"\n    [attr.id]=\"inputId() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    class=\"nath-datepicker-datetime-input\"\n    (input)=\"onDateTimeInputChange($event)\"\n  />\n} @else {\n  <input\n    type=\"date\"\n    [(ngModel)]=\"dateInputValue\"\n    [attr.id]=\"inputId() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    class=\"nath-datepicker-date-input\"\n    [lang]=\"language()\"\n    (input)=\"onDateInputChange($event)\"\n  />\n}\n", styles: ["nath-datepicker,.nath-datepicker-theme{--nath-datepicker-date-width: 100%;--nath-datepicker-date-max-width: 9.5rem;--nath-datepicker-datetime-width: 100%;--nath-datepicker-datetime-max-width: 12.5rem}.nath-datepicker-host{display:flex;gap:.5rem}.nath-datepicker-date-input{display:block;width:var(--nath-datepicker-date-width);max-width:var(--nath-datepicker-date-max-width)}.nath-datepicker-host ::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-calendar-icon lucide-calendar\"><path d=\"M8 2v4\"/><path d=\"M16 2v4\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"/><path d=\"M3 10h18\"/></svg>')}.nath-datepicker-datetime-input{display:block;width:var(--nath-datepicker-datetime-width);max-width:var(--nath-datepicker-datetime-max-width)}.dark .nath-datepicker-host ::-webkit-calendar-picker-indicator{filter:invert(100%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: NathDatepicker, decorators: [{
             type: Component,
             args: [{ selector: 'nath-datepicker', imports: [CommonModule, OverlayModule, FormsModule], encapsulation: ViewEncapsulation.None, host: {
                         class: 'nath-datepicker-host',
-                    }, template: "@if (withTime()) {\n  <input\n    type=\"datetime-local\"\n    [(ngModel)]=\"dateTimeInputValue\"\n    [attr.id]=\"inputId() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    class=\"nath-datepicker-datetime-input\"\n    (input)=\"onDateTimeInputChange($event)\"\n  />\n} @else {\n  <input\n    type=\"date\"\n    [(ngModel)]=\"dateInputValue\"\n    [attr.id]=\"inputId() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    class=\"nath-datepicker-date-input\"\n    (input)=\"onDateInputChange($event)\"\n  />\n}\n", styles: ["nath-datepicker,.nath-datepicker-theme{--nath-datepicker-date-width: 100%;--nath-datepicker-date-max-width: 9.5rem;--nath-datepicker-datetime-width: 100%;--nath-datepicker-datetime-max-width: 12.5rem}.nath-datepicker-host{display:flex;gap:.5rem}.nath-datepicker-date-input{display:block;width:var(--nath-datepicker-date-width);max-width:var(--nath-datepicker-date-max-width)}.nath-datepicker-host ::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-calendar-icon lucide-calendar\"><path d=\"M8 2v4\"/><path d=\"M16 2v4\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"/><path d=\"M3 10h18\"/></svg>')}.nath-datepicker-datetime-input{display:block;width:var(--nath-datepicker-datetime-width);max-width:var(--nath-datepicker-datetime-max-width)}.dark .nath-datepicker-host ::-webkit-calendar-picker-indicator{filter:invert(100%)}\n"] }]
+                    }, template: "@if (withTime()) {\n  <input\n    type=\"datetime-local\"\n    [(ngModel)]=\"dateTimeInputValue\"\n    [attr.id]=\"inputId() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    class=\"nath-datepicker-datetime-input\"\n    (input)=\"onDateTimeInputChange($event)\"\n  />\n} @else {\n  <input\n    type=\"date\"\n    [(ngModel)]=\"dateInputValue\"\n    [attr.id]=\"inputId() || null\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"disabled()\"\n    class=\"nath-datepicker-date-input\"\n    [lang]=\"language()\"\n    (input)=\"onDateInputChange($event)\"\n  />\n}\n", styles: ["nath-datepicker,.nath-datepicker-theme{--nath-datepicker-date-width: 100%;--nath-datepicker-date-max-width: 9.5rem;--nath-datepicker-datetime-width: 100%;--nath-datepicker-datetime-max-width: 12.5rem}.nath-datepicker-host{display:flex;gap:.5rem}.nath-datepicker-date-input{display:block;width:var(--nath-datepicker-date-width);max-width:var(--nath-datepicker-date-max-width)}.nath-datepicker-host ::-webkit-calendar-picker-indicator{background-image:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-calendar-icon lucide-calendar\"><path d=\"M8 2v4\"/><path d=\"M16 2v4\"/><rect width=\"18\" height=\"18\" x=\"3\" y=\"4\" rx=\"2\"/><path d=\"M3 10h18\"/></svg>')}.nath-datepicker-datetime-input{display:block;width:var(--nath-datepicker-datetime-width);max-width:var(--nath-datepicker-datetime-max-width)}.dark .nath-datepicker-host ::-webkit-calendar-picker-indicator{filter:invert(100%)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { withTime: [{ type: i0.Input, args: [{ isSignal: true, alias: "withTime", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], language: [{ type: i0.Input, args: [{ isSignal: true, alias: "language", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], touched: [{ type: i0.Input, args: [{ isSignal: true, alias: "touched", required: false }] }, { type: i0.Output, args: ["touchedChange"] }], dirty: [{ type: i0.Input, args: [{ isSignal: true, alias: "dirty", required: false }] }, { type: i0.Output, args: ["dirtyChange"] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], dateInputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateInputValue", required: false }] }, { type: i0.Output, args: ["dateInputValueChange"] }], dateTimeInputValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "dateTimeInputValue", required: false }] }, { type: i0.Output, args: ["dateTimeInputValueChange"] }] } });
 
 const DIALOG_DATA = new InjectionToken('DIALOG_DATA');
@@ -1032,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 */
@@ -1101,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,
@@ -5413,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, 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