tailjng 0.0.55 → 0.0.56

package/lib/interfaces/crud/crud.interface.d.ts

@@ -1,5 +1,8 @@
-type KeyPath<T> = T extends object ? {
-    [K in keyof T]: K extends string | number ? `${K}` | `${K}.${KeyPath<T[K]>}` : never;
+type Prev = [never, 0, 1, 2, 3, 4, 5];
+type KeyPath<T, D extends number = 3> = [
+    D
+] extends [never] ? never : T extends object ? {
+    [K in keyof T]: K extends string | number ? NonNullable<T[K]> extends object ? `${K}` | `${K}.${KeyPath<NonNullable<T[K]>, Prev[D]>}` : `${K}` : never;
 }[keyof T] : never;
 type ExtraColumnKeys = 'total' | 'expand' | 'extra';
 type ExtendedKeyPath<T> = KeyPath<T> | ExtraColumnKeys;

package/lib/interfaces/crud/filter.interface.d.ts

@@ -42,12 +42,14 @@ export interface ExportFileExcel {
 type FilterButtonWithChangeIcon = CommonFilterButtonProps & {
     isChangeIcon: boolean | (() => boolean);
     iconChange: any;
+    isLoading?: boolean | (() => boolean);
     nameSheet?: string;
     styles?: ExcelStyleConfig;
 };
 type FilterButtonWithoutChangeIcon = CommonFilterButtonProps & {
     isChangeIcon?: undefined;
     iconChange?: any;
+    isLoading?: boolean | (() => boolean);
     nameSheet?: string;
     styles?: ExcelStyleConfig;
 };
@@ -64,6 +66,7 @@ export interface DropdownFilterSelect {
     onSelected?: (value: any) => void;
     optionLabel?: string | string[];
     optionValue?: string;
+    labelSeparator?: string;
     placeholder?: string;
     showClear?: boolean;
     options: any[];
@@ -81,6 +84,7 @@ export interface SearchableFilterSelect {
     isSearch?: boolean;
     optionLabel: string | string[];
     optionValue: string;
+    labelSeparator?: string;
     placeholder?: string;
     showClear?: boolean;
     loadOnInit?: boolean;

package/package.json

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

package/src/lib/components/card/card-complete/complete-card.component.html

@@ -0,0 +1,104 @@
+<div class="w-full mb-3">
+  @if (isSearch) {
+    <JFilter
+      [params]="params"
+      [columns]="columns"
+      [endpoint]="endpoint"
+      [mainEndpoint]="mainEndpoint"
+      [data]="data"
+      [(searchQuery)]="searchQuery"
+      (search)="onSearch()"
+      [searchPlaceholder]="searchPlaceholder"
+      [(itemsPerPage)]="itemsPerPage"
+      [itemsPerPageOptions]="itemsPerPageOptions"
+      (onItemsPerPageChangeEvent)="onItemsPerPageChange()"
+      [isLoadingSearch]="isLoading('search')"
+      [isLoadingPerPage]="isLoading('itemsPerPage')"
+      [isLoadingAditionalButtons]="loadingStates.aditionalButtons"
+      (clearFilters)="onClearFilters($event)"
+      [filtersButton]="filtersButton"
+      [filtersSelect]="filtersSelect"
+
+      [isShowColumns]="false"
+
+      [checked]="checked"
+      [titleChecked]="titleChecked"
+      [isChecked]="isChecked"
+      [isLoadingChecked]="isLoading('checked')"
+      (checkActiveInactive)="checkActiveInactive($event)"
+    />
+  }
+
+  @if (isPaginator) {
+    <div class="my-4">
+      <JCompletePaginator
+        [currentPage]="currentPage"
+        [itemsPerPageOptions]="itemsPerPageOptions"
+        [itemsPerPage]="itemsPerPage"
+        [totalItems]="totalItems"
+        [pages]="pages"
+        (pageChange)="handlePageChange($event)"
+        [isLoading]="isLoading('pagination')"
+      />
+    </div>
+  }
+
+  @if (isLoading('initialLoad') && displayData.length === 0) {
+    <div class="j-crud-card w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border">
+      <div class="flex flex-col gap-3 items-center justify-center py-4">
+        <lucide-icon [name]="iconsService.icons.loading" size="30" class="text-primary animate-spin"></lucide-icon>
+        <p>Cargando datos...</p>
+      </div>
+    </div>
+  } @else if (displayData.length > 0) {
+
+    @if (itemTemplate) {
+      <div class="j-crud-card grid grid-cols-4 items-start max-[1300px]:grid-cols-3 max-[1150px]:grid-cols-2 max-[800px]:grid-cols-1 gap-4 my-4">
+        @for (item of displayData; track trackById($index, item)) {
+          <div class="flex flex-col gap-3 rounded-xl border border-border dark:border-dark-border bg-white dark:bg-foreground shadow-sm hover:shadow-lg hover:border-primary/50 hover:dark:border-primary transition-all duration-300">
+            <ng-container
+              *ngTemplateOutlet="itemTemplate; context: {
+                $implicit: item,
+                getValue: getValue.bind(this),
+                columns: columns,
+                item: item,
+                template: getTemplate,
+                toggleExpanded: toggleExpanded.bind(this),
+                isExpanded: isExpanded.bind(this),
+                expandData: getExpandData.bind(this),
+                expandTemplate: expandTemplate,
+                isLoadingExpand: isLoadingExpand.bind(this),
+              }"
+            />
+          </div>
+        }
+      </div>
+
+
+    } @else {
+      <div class="j-crud-card w-full flex justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px]">
+        <p>No se ha definido ninguna plantilla personalizada (<code>itemTemplate</code>).</p>
+      </div>
+    }
+
+  } @else if (!isLoading('pagination')) {
+    <div class="j-crud-card w-full flex flex-col gap-3 justify-center items-center h-100 bg-white dark:bg-foreground rounded-[20px] border border-border dark:border-dark-border hover:border-primary/50 hover:dark:border-primary">
+      <lucide-icon [name]="iconsService.icons.info" size="35" class="text-primary"></lucide-icon>
+      <p class="text-black dark:text-white">No hay datos disponibles</p>
+    </div>
+  }
+
+  @if (isPaginator) {
+    <div class="my-4">
+      <JCompletePaginator
+        [currentPage]="currentPage"
+        [itemsPerPageOptions]="itemsPerPageOptions"
+        [itemsPerPage]="itemsPerPage"
+        [totalItems]="totalItems"
+        [pages]="pages"
+        (pageChange)="handlePageChange($event)"
+        [isLoading]="isLoading('pagination')"
+      />
+    </div>
+  }
+</div>

package/src/lib/components/card/card-complete/complete-card.component.scss

@@ -0,0 +1,35 @@
+/*
+===============================================
+Component and Function Library - tailjNg
+===============================================
+Description:
+  This library is designed to provide a set of reusable components and optimized functions
+  to facilitate the development of user interfaces and data management in web applications.
+  It includes tools to improve the developer experience and user interaction.
+
+Purpose:
+  - Create modular and customizable components.
+  - Improve front-end development efficiency through reusable tools.
+  - Provide scalable solutions that are easy to integrate with existing applications.
+
+Usage:
+  To access full functionality, simply import the necessary modules and use the
+  components according to your use case. Be sure to review the official documentation for detailed examples 
+  on implementation and customization.
+
+Authors:
+  Armando Josue Velasquez Delgado - Lead Developer
+
+License:
+  This project is licensed under the BSD 3-Clause - see the LICENSE file for more details.
+
+Version: 0.0.25
+Creation Date: 2025-01-04
+===============================================
+*/
+
+.j-crud-card {
+    @media (max-width: 470px) {
+          width: 485px !important;
+    }
+}