tailjng 0.0.20 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tailjng",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "peerDependencies": {
     "@angular/common": "^19.2.0",
     "@angular/core": "^19.2.0",

package/src/lib/components/filter/filter-complete/complete-filter.component.ts

@@ -3,13 +3,12 @@ import { Component, EventEmitter, Input, Output, OnDestroy, OnInit, ViewChild, E
 import { FormsModule } from '@angular/forms';
 import { LucideAngularModule } from 'lucide-angular';
 import { Subject, Subscription, debounceTime, filter, forkJoin } from 'rxjs';
-import { FilterButton, FilterSelect, JUploadFilterService, JAlertDialogService, JAlertToastService, JGenericCrudService, JIconsService, LoadingState, JExcelService, JExcelFilterService } from 'tailjng';
+import { TableColumn, FilterButton, FilterSelect, JUploadFilterService, JAlertDialogService, JAlertToastService, JGenericCrudService, JIconsService, LoadingState, JExcelService, JExcelFilterService } from 'tailjng';
 import { JDropdownSelectComponent } from '../../select/select-dropdown/dropdown-select.component';
 import { JMultiTableSelectComponent } from '../../select/select-multi-table/multi-table-select.component';
 import { JSwitchCheckboxComponent } from '../../checkbox/checkbox-switch/switch-checkbox.component';
 import { JDialogComponent } from '../../dialog/dialog.component';
 import { JButtonComponent } from '../../button/button.component';
-import { TableColumn } from '../../../interfaces/crud/crud.interface';
 
 @Component({
   selector: 'JFilter',
@@ -19,7 +18,7 @@ import { TableColumn } from '../../../interfaces/crud/crud.interface';
   styleUrls: ['./complete-filter.component.scss'],
   providers: [JDialogComponent]
 })
-export class JFilterComponent implements OnInit, OnDestroy {
+export class JCompleteFilterComponent implements OnInit, OnDestroy {
 
   @Output() afterUpload = new EventEmitter<void>();
 

package/src/lib/components/form/form-container/container-form.component.ts

@@ -2,12 +2,12 @@ import { NgClass } from '@angular/common';
 import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'JContainerForm',
+  selector: 'JFormContainer',
   imports: [NgClass],
   templateUrl: './container-form.component.html',
   styleUrl: './container-form.component.css'
 })
-export class JContainerFormComponent {
+export class JFormContainerComponent {
 
   @Input() columns: number = 1;
   @Input() rows: boolean = false;

package/src/lib/components/form/form-validation/validation-form.component.html

@@ -0,0 +1,7 @@
+@if (hasErrors) {
+  <div class="flex flex-col text-red-600 dark:text-red-300 text-sm">
+      @for (message of errors; track $index) {
+        <span [class]="classes">{{ message }}</span>
+      }
+  </div>
+}

package/src/lib/components/form/form-validation/validation-form.component.ts

@@ -0,0 +1,29 @@
+import { Component, Input } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AbstractControl } from '@angular/forms';
+
+@Component({
+  selector: 'JFormValidation',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './validation-form.component.html',
+  styleUrl: './validation-form.component.scss'
+})
+export class JFormValidationComponent {
+
+  @Input() control!: AbstractControl | null;
+  @Input() errorMessages: { [key: string]: string } = {};
+  @Input() classes: string = '';
+
+  get hasErrors(): boolean {
+    return !!this.control && this.control.invalid && this.control.touched;
+  }
+
+  get errors(): string[] {
+    if (!this.control || !this.control.errors) return [];
+    return Object.keys(this.control.errors)
+      .filter(errorKey => this.errorMessages[errorKey])
+      .map(errorKey => this.errorMessages[errorKey]);
+  }
+  
+}