@cerca/design-system 1.0.2 → 1.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cerca/design-system",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "peerDependencies": {
     "@angular/common": "^21.1.0",
     "@angular/core": "^21.1.0"

package/src/lib/styles/_index.scss

@@ -0,0 +1,7 @@
+@forward '../tokens';
+@forward 'theme';
+@forward 'overrides';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/lib/styles/_overrides.scss

@@ -0,0 +1,4 @@
+/* =========================================
+   OVERRIDES
+   Global style overrides (Cleaned of ng-zorro)
+   ========================================= */

package/src/lib/styles/_theme.scss

@@ -0,0 +1,87 @@
+/* =========================================
+   DESIGN SYSTEM THEME
+   Mapeo de Design System Tokens
+   ========================================= */
+
+@use '../tokens/colors' as *;
+@use '../tokens/typography' as *;
+@use '../tokens/spacing' as *;
+@use '../tokens/radius' as *;
+@use '../tokens/elevations' as *;
+
+/* --- Primary Theme Colors (Cerca Brand) --- */
+$primary-color: var(--color-primary); // Sky-600 (#0284C7)
+$success-color: var(--color-success); // Emerald-500 (#10B981)
+$error-color: var(--color-alert); // Rose-500 (#F43F5E)
+$warning-color: var(--color-warning); // Amber-500 (#F59E0B)
+$info-color: var(--color-primary); // Blue-500 (#3B82F6)
+
+/* --- Text Colors --- */
+$text-color: var(--color-slate-900); // Stone-900
+$text-color-secondary: var(--color-secondary); // Stone-600
+$heading-color: var(--color-slate-900);
+$disabled-color: var(--color-slate-400);
+
+/* --- Background Colors --- */
+$body-background: var(--color-background); // Stone-50
+$component-background: var(--color-surface); // White
+$background-color-light: var(--color-background);
+$background-color-base: var(--color-slate-100);
+
+/* --- Border Colors --- */
+$border-color-base: var(--color-border);
+$border-color-split: var(--color-border);
+
+/* --- Border Radius (from Design System) --- */
+$border-radius-base: var(--radius-cerca); // 8px
+$border-radius-sm: var(--radius-cerca-sm); // 4px
+
+/* --- Shadows (from Design System) --- */
+$box-shadow-base: var(--shadow-premium);
+$shadow-1-up: var(--shadow-premium);
+$shadow-1-down: var(--shadow-premium);
+$shadow-2: var(--shadow-premium-hover);
+
+/* --- Typography --- */
+$font-family: $font-family-base;
+$font-size-base: $font-size-md; // 16px
+$font-size-lg: $font-size-lg; // 18px
+$font-size-sm: $font-size-sm; // 14px
+
+/* --- Layout --- */
+$layout-header-background: var(--color-surface);
+$layout-body-background: var(--color-background);
+$layout-sider-background: var(--color-slate-900);
+
+/* --- Animation --- */
+$animation-duration-slow: 0.3s;
+$animation-duration-base: 0.2s;
+$animation-duration-fast: 0.1s;
+
+/* --- Utilities --- */
+.accent-text {
+   background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-accent, #00d2ff) 100%);
+   -webkit-background-clip: text;
+   background-clip: text;
+   -webkit-text-fill-color: transparent;
+   margin-left: 0.3rem;
+
+   // Auto-apply dark mode styles
+   :host-context(.dark) &,
+   .dark & {
+      background: linear-gradient(135deg, #38BDF8 0%, #22D3EE 100%);
+      /* Sky-400 to Cyan-400 */
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+   }
+}
+
+.accent-text-dark {
+   background: linear-gradient(135deg, #38BDF8 0%, #22D3EE 100%);
+   /* Sky-400 to Cyan-400 */
+   -webkit-background-clip: text;
+   background-clip: text;
+   -webkit-text-fill-color: transparent;
+   margin-left: 0.3rem;
+}

package/types/cerca-design-system.d.ts

@@ -12,7 +12,7 @@ declare class DesignSystem {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DesignSystem, "ad-design-system", never, {}, {}, never, never, true, never>;
 }
 
-type FieldType = 'input' | 'select' | 'checkbox' | 'switch' | 'datepicker' | 'textarea' | 'number-input' | 'text-input' | 'select-input' | 'custom';
+type FieldType = 'input' | 'select' | 'checkbox' | 'switch' | 'datepicker' | 'textarea' | 'number-input' | 'text-input' | 'select-input' | 'currency' | 'custom';
 type LayoutType = 'row' | 'col' | 'card' | 'stack';
 interface FieldOption {
     label: string;
@@ -57,6 +57,8 @@ interface FormSchema {
     fields?: (FieldSchema | LayoutSchema)[];
     submitLabel?: string;
     cancelLabel?: string;
+    transparentContainer?: boolean;
+    footerAlign?: 'left' | 'right' | 'center';
 }
 
 type ColumnType = 'text' | 'number' | 'date' | 'currency' | 'status' | 'actions' | 'custom';
@@ -74,6 +76,7 @@ interface TableColumn {
     filterable?: boolean;
     width?: string;
     templateRef?: string;
+    sticky?: 'left' | 'right';
 }
 interface TableSchema {
     columns: TableColumn[];
@@ -81,6 +84,7 @@ interface TableSchema {
     selectable?: boolean;
     actions?: TableAction[];
     globalActions?: TableAction[];
+    stickyActions?: boolean;
 }
 
 type ResourceType = 'form' | 'table' | 'dashboard' | 'custom';
@@ -143,7 +147,7 @@ declare class AdModalService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<AdModalService>;
 }
 
-declare class FormEngineComponent implements OnInit {
+declare class AdFormEngineComponent implements OnInit {
     schema: _angular_core.InputSignal<FormSchema>;
     model: _angular_core.InputSignal<any>;
     showCancel: _angular_core.InputSignal<boolean>;
@@ -156,8 +160,8 @@ declare class FormEngineComponent implements OnInit {
     ngOnInit(): void;
     submit(): void;
     onCancel(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FormEngineComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FormEngineComponent, "ad-form-engine", never, { "schema": { "alias": "schema"; "required": true; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; "showCancel": { "alias": "showCancel"; "required": false; "isSignal": true; }; "showSubmit": { "alias": "showSubmit"; "required": false; "isSignal": true; }; }, { "formSubmit": "formSubmit"; "formCancel": "formCancel"; }, never, never, true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AdFormEngineComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AdFormEngineComponent, "ad-form-engine", never, { "schema": { "alias": "schema"; "required": true; "isSignal": true; }; "model": { "alias": "model"; "required": false; "isSignal": true; }; "showCancel": { "alias": "showCancel"; "required": false; "isSignal": true; }; "showSubmit": { "alias": "showSubmit"; "required": false; "isSignal": true; }; }, { "formSubmit": "formSubmit"; "formCancel": "formCancel"; }, never, never, true, never>;
 }
 
 declare class FormEngineService {
@@ -188,7 +192,12 @@ declare class TableEngineComponent {
     protected Math: Math;
     displayColumns: _angular_core.Signal<TableColumn[]>;
     hasActions: _angular_core.Signal<boolean>;
+    stickyActions: _angular_core.Signal<boolean>;
     getActions: _angular_core.Signal<TableAction[]>;
+    /**
+     * Returns the box-shadow for a sticky column to create a visual separator
+     */
+    getStickyColumnShadow(sticky?: 'left' | 'right'): string | null;
     mapVariant(color?: string): 'primary' | 'secondary' | 'ghost' | 'danger';
     onPageChange(newPageIndex: number): void;
     onActionClick(action: string, data: any): void;
@@ -223,19 +232,22 @@ declare class AdInputComponent implements ControlValueAccessor {
     size: _angular_core.InputSignal<"default" | "large" | "small">;
     prefix: _angular_core.InputSignal<string | undefined>;
     suffix: _angular_core.InputSignal<string | undefined>;
+    mask: _angular_core.InputSignal<"currency" | undefined>;
     value: string;
     passwordVisible: _angular_core.WritableSignal<boolean>;
     onChange: any;
     onTouched: any;
     inputType: _angular_core.Signal<string>;
+    isIcon(name: string | undefined): boolean;
     onInputChange(event: Event): void;
+    private formatCurrencyDisplay;
     togglePasswordVisibility(): void;
     writeValue(value: any): void;
     registerOnChange(fn: any): void;
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AdInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AdInputComponent, "ad-input", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AdInputComponent, "ad-input", never, { "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "error": { "alias": "error"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "prefix": { "alias": "prefix"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "mask": { "alias": "mask"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
 interface SelectOption {
@@ -452,6 +464,8 @@ declare const DescriptionHeaderResourceSchema: z.ZodObject<{
         onModalCancel: z.ZodOptional<z.ZodCustom<() => void, () => void>>;
     }, z.core.$strip>>>;
     showDivider: z.ZodOptional<z.ZodBoolean>;
+    backButton: z.ZodOptional<z.ZodBoolean>;
+    onBack: z.ZodOptional<z.ZodCustom<() => void, () => void>>;
 }, z.core.$strip>;
 type DescriptionHeaderButton = z.infer<typeof DescriptionHeaderButtonSchema>;
 type DescriptionHeaderResource = z.infer<typeof DescriptionHeaderResourceSchema>;
@@ -505,6 +519,8 @@ declare class AdDescriptionHeaderComponent {
             onModalCancel?: (() => void) | undefined;
         }[] | undefined;
         showDivider?: boolean | undefined;
+        backButton?: boolean | undefined;
+        onBack?: (() => void) | undefined;
     }>;
     title: _angular_core.Signal<string>;
     accentedTitle: _angular_core.Signal<string | undefined>;
@@ -523,12 +539,18 @@ declare class AdDescriptionHeaderComponent {
         onModalCancel?: (() => void) | undefined;
     }[] | undefined>;
     showDivider: _angular_core.Signal<boolean | undefined>;
+    backButton: _angular_core.Signal<boolean | undefined>;
+    onBack: _angular_core.Signal<(() => void) | undefined>;
     getModalTriggerResource(button: DescriptionHeaderButton): ModalTriggerResource;
     /**
      * Maneja el clic en un botón
      * @param onClick Callback del botón
      */
     handleButtonClick(onClick: (() => void) | undefined): void;
+    /**
+     * Maneja el clic en el botón de regresar
+     */
+    handleBack(): void;
     /**
      * Maneja la confirmación de un modal
      * @param onConfirm Callback de confirmación
@@ -924,8 +946,8 @@ declare const AdTableColumnSchema: z.ZodObject<{
     width: z.ZodOptional<z.ZodString>;
     align: z.ZodOptional<z.ZodEnum<{
         left: "left";
-        center: "center";
         right: "right";
+        center: "center";
     }>>;
     pipe_to_apply: z.ZodOptional<z.ZodString>;
     function_to_exec: z.ZodOptional<z.ZodString>;
@@ -939,8 +961,8 @@ declare const TableResourceSchema: z.ZodObject<{
         width: z.ZodOptional<z.ZodString>;
         align: z.ZodOptional<z.ZodEnum<{
             left: "left";
-            center: "center";
             right: "right";
+            center: "center";
         }>>;
         pipe_to_apply: z.ZodOptional<z.ZodString>;
         function_to_exec: z.ZodOptional<z.ZodString>;
@@ -961,7 +983,7 @@ declare class AdTableComponent implements OnInit, OnDestroy {
             key: string;
             label: string;
             width?: string | undefined;
-            align?: "left" | "center" | "right" | undefined;
+            align?: "left" | "right" | "center" | undefined;
             pipe_to_apply?: string | undefined;
             function_to_exec?: string | undefined;
         }[];
@@ -977,7 +999,7 @@ declare class AdTableComponent implements OnInit, OnDestroy {
         key: string;
         label: string;
         width?: string | undefined;
-        align?: "left" | "center" | "right" | undefined;
+        align?: "left" | "right" | "center" | undefined;
         pipe_to_apply?: string | undefined;
         function_to_exec?: string | undefined;
     }[]>;
@@ -1344,5 +1366,5 @@ declare const ListPageTemplateResourceSchema: z.ZodObject<{
 }, z.core.$strip>;
 type ListPageTemplateResource = z.infer<typeof ListPageTemplateResourceSchema>;
 
-export { AdAdminLayoutComponent, AdAuthLayoutComponent, AdBadgeComponent, AdButtonComponent, AdCardComponent, AdDashboardTemplateComponent, AdDataTableComponent, AdDescriptionHeaderComponent, AdDocViewerComponent, AdDocumentationWrapperComponent, AdFormFieldComponent, AdFormLayoutComponent, AdFormPageTemplateComponent, AdFormSectionComponent, AdHeaderComponent, AdIconComponent, AdInputComponent, AdLabelComponent, AdListPageTemplateComponent, AdLoadingComponent, AdLoginComponent, AdModalComponent, AdModalService, AdModalTriggerComponent, AdModalWrapperComponent, AdSearchBarComponent, AdSelectComponent, AdSidebarComponent, AdStatCardComponent, AdSwitchComponent, AdTableColumnSchema, AdTableComponent, AdminLayoutResourceSchema, AdminSectionCardActionSchema, AdminSectionCardComponent, AdminSectionCardResourceSchema, AuthLayoutResourceSchema, CardResourceSchema, ComponentApiInputSchema, ComponentApiOutputSchema, ComponentVariantSchema, DashboardTemplateResourceSchema, DataTableColumnSchema, DataTableResourceSchema, DescriptionHeaderButtonSchema, DescriptionHeaderResourceSchema, DesignSystem, DocStatusSchema, DocViewerResourceSchema, DocumentationWrapperResourceSchema, FieldRendererRegistry, FormEngineComponent, FormEngineService, FormFieldResourceSchema, FormLayoutResourceSchema, FormPageTemplateResourceSchema, FormSectionResourceSchema, HeaderResourceSchema, ListPageTemplateResourceSchema, LoginResourceSchema, ModalResourceSchema, ModalTriggerResourceSchema, NavItemSchema, STAT_CARD_COLOR_MAP, SearchBarResourceSchema, SidebarResourceSchema, StatCardColorSchema, StatCardResourceSchema, TableEngineComponent, TableResourceSchema, UserSchema, ValidatorRegistry };
+export { AdAdminLayoutComponent, AdAuthLayoutComponent, AdBadgeComponent, AdButtonComponent, AdCardComponent, AdDashboardTemplateComponent, AdDataTableComponent, AdDescriptionHeaderComponent, AdDocViewerComponent, AdDocumentationWrapperComponent, AdFormEngineComponent, AdFormFieldComponent, AdFormLayoutComponent, AdFormPageTemplateComponent, AdFormSectionComponent, AdHeaderComponent, AdIconComponent, AdInputComponent, AdLabelComponent, AdListPageTemplateComponent, AdLoadingComponent, AdLoginComponent, AdModalComponent, AdModalService, AdModalTriggerComponent, AdModalWrapperComponent, AdSearchBarComponent, AdSelectComponent, AdSidebarComponent, AdStatCardComponent, AdSwitchComponent, AdTableColumnSchema, AdTableComponent, AdminLayoutResourceSchema, AdminSectionCardActionSchema, AdminSectionCardComponent, AdminSectionCardResourceSchema, AuthLayoutResourceSchema, CardResourceSchema, ComponentApiInputSchema, ComponentApiOutputSchema, ComponentVariantSchema, DashboardTemplateResourceSchema, DataTableColumnSchema, DataTableResourceSchema, DescriptionHeaderButtonSchema, DescriptionHeaderResourceSchema, DesignSystem, DocStatusSchema, DocViewerResourceSchema, DocumentationWrapperResourceSchema, FieldRendererRegistry, FormEngineService, FormFieldResourceSchema, FormLayoutResourceSchema, FormPageTemplateResourceSchema, FormSectionResourceSchema, HeaderResourceSchema, ListPageTemplateResourceSchema, LoginResourceSchema, ModalResourceSchema, ModalTriggerResourceSchema, NavItemSchema, STAT_CARD_COLOR_MAP, SearchBarResourceSchema, SidebarResourceSchema, StatCardColorSchema, StatCardResourceSchema, TableEngineComponent, TableResourceSchema, UserSchema, ValidatorRegistry };
 export type { AdTableColumn, AdminLayoutResource, AdminSectionCardAction, AdminSectionCardResource, AuthLayoutResource, BadgeType, BadgeVariant, BaseSchema, CardResource, ColumnType, ComponentApiInput, ComponentApiOutput, ComponentVariant, DashboardTemplateResource, DataTableColumn, DataTableResource, DescriptionHeaderButton, DescriptionHeaderResource, DocStatus, DocTab, DocViewerResource, DocumentationWrapperResource, FieldOption, FieldSchema, FieldType, FormFieldResource, FormLayoutResource, FormPageTemplateResource, FormSchema, FormSectionResource, HeaderResource, LayoutSchema, LayoutType, ListPageTemplateResource, LoginResource, ModalResource, ModalTriggerResource, NavItem, ResourceType, ScreenResource, SearchBarResource, SectionSchema, SelectOption, SidebarResource, StatCardColor, StatCardResource, SwitchOption, TableAction, TableColumn, TableResource, TableSchema, User };