@acontplus/ng-components 2.1.1 → 2.1.2

package/fesm2022/acontplus-ng-components.mjs

@@ -3935,5 +3935,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, createAutocompleteWrapperConfig };
+export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, createAutocompleteWrapperConfig };
 //# sourceMappingURL=acontplus-ng-components.mjs.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@acontplus/ng-components",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "Comprehensive Angular Material UI component library featuring dynamic Tabulator tables, theme toggle with dark mode, dialog wrappers, autocomplete components, cards, buttons, icons, input chips, spinners, directives, pipes, and SCSS styling utilities.",
   "peerDependencies": {
     "@acontplus/ui-kit": "^1.0.2",

package/types/acontplus-ng-components.d.ts

@@ -1327,6 +1327,88 @@ declare class DataGrid<T = any> implements AfterViewInit, OnDestroy, OnChanges {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<DataGrid<any>, "acp-data-grid", ["dataGrid"], { "showToolbar": { "alias": "showToolbar"; "required": false; "isSignal": true; }; "showColumnMenuButton": { "alias": "showColumnMenuButton"; "required": false; "isSignal": true; }; "toolbarTitle": { "alias": "toolbarTitle"; "required": false; "isSignal": true; }; "toolbarTemplate": { "alias": "toolbarTemplate"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "length": { "alias": "length"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "emptyValuePlaceholder": { "alias": "emptyValuePlaceholder"; "required": false; "isSignal": true; }; "trackBy": { "alias": "trackBy"; "required": false; "isSignal": true; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; "isSignal": true; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; "isSignal": true; }; "headerExtraTemplate": { "alias": "headerExtraTemplate"; "required": false; "isSignal": true; }; "noResultTemplate": { "alias": "noResultTemplate"; "required": false; "isSignal": true; }; "paginationTemplate": { "alias": "paginationTemplate"; "required": false; "isSignal": true; }; "summaryTemplate": { "alias": "summaryTemplate"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "headerCellTemplate": { "alias": "headerCellTemplate"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "expansionTemplate": { "alias": "expansionTemplate"; "required": false; "isSignal": true; }; "closeOthersOnExpand": { "alias": "closeOthersOnExpand"; "required": false; "isSignal": true; }; "pageOnFront": { "alias": "pageOnFront"; "required": false; "isSignal": true; }; "showPaginator": { "alias": "showPaginator"; "required": false; "isSignal": true; }; "pageDisabled": { "alias": "pageDisabled"; "required": false; "isSignal": true; }; "showFirstLastButtons": { "alias": "showFirstLastButtons"; "required": false; "isSignal": true; }; "pageIndex": { "alias": "pageIndex"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "hidePageSize": { "alias": "hidePageSize"; "required": false; "isSignal": true; }; "infiniteScroll": { "alias": "infiniteScroll"; "required": false; "isSignal": true; }; "infiniteScrollThreshold": { "alias": "infiniteScrollThreshold"; "required": false; "isSignal": true; }; "infiniteScrollDisabled": { "alias": "infiniteScrollDisabled"; "required": false; "isSignal": true; }; "keyboardNavigation": { "alias": "keyboardNavigation"; "required": false; "isSignal": true; }; "highlightedRowIndex": { "alias": "highlightedRowIndex"; "required": false; "isSignal": true; }; "sortOnFront": { "alias": "sortOnFront"; "required": false; "isSignal": true; }; "sortActive": { "alias": "sortActive"; "required": false; "isSignal": true; }; "sortDirection": { "alias": "sortDirection"; "required": false; "isSignal": true; }; "sortDisableClear": { "alias": "sortDisableClear"; "required": false; "isSignal": true; }; "sortDisabled": { "alias": "sortDisabled"; "required": false; "isSignal": true; }; "sortStart": { "alias": "sortStart"; "required": false; "isSignal": true; }; "rowHover": { "alias": "rowHover"; "required": false; "isSignal": true; }; "rowStriped": { "alias": "rowStriped"; "required": false; "isSignal": true; }; "rowSelectable": { "alias": "rowSelectable"; "required": false; "isSignal": true; }; "multiSelectable": { "alias": "multiSelectable"; "required": false; "isSignal": true; }; "multiSelectionWithClick": { "alias": "multiSelectionWithClick"; "required": false; "isSignal": true; }; "hideRowSelectionCheckbox": { "alias": "hideRowSelectionCheckbox"; "required": false; "isSignal": true; }; "disableRowClickSelection": { "alias": "disableRowClickSelection"; "required": false; "isSignal": true; }; "rowClassFormatter": { "alias": "rowClassFormatter"; "required": false; "isSignal": true; }; "rowSelected": { "alias": "rowSelected"; "required": false; "isSignal": true; }; "rowSelectionFormatter": { "alias": "rowSelectionFormatter"; "required": false; "isSignal": true; }; "cellSelectable": { "alias": "cellSelectable"; "required": false; "isSignal": true; }; "useContentRowTemplate": { "alias": "useContentRowTemplate"; "required": false; "isSignal": true; }; "useContentHeaderRowTemplate": { "alias": "useContentHeaderRowTemplate"; "required": false; "isSignal": true; }; "useContentFooterRowTemplate": { "alias": "useContentFooterRowTemplate"; "required": false; "isSignal": true; }; "showSummary": { "alias": "showSummary"; "required": false; "isSignal": true; }; "noResultText": { "alias": "noResultText"; "required": false; "isSignal": true; }; }, { "page": "page"; "sortChange": "sortChange"; "rowClick": "rowClick"; "rowSelectedChange": "rowSelectedChange"; "selectionChange": "selectionChange"; "cellClick": "cellClick"; "cellSelectedChange": "cellSelectedChange"; "expansionChange": "expansionChange"; "rowContextMenu": "rowContextMenu"; "infiniteScrollLoad": "infiniteScrollLoad"; "focusedRowChange": "focusedRowChange"; }, ["rowDefs", "headerRowDefs", "footerRowDefs"], never, true, never>;
 }
 
+/**
+ * Interfaz que define un elemento que puede recibir el foco y participar en la navegación por teclado.
+ */
+interface FocusableElement {
+    /** El ElementRef del elemento DOM */
+    element: ElementRef;
+    /** Un nombre único para identificar el elemento en el sistema de navegación */
+    name: string;
+    /** Callback opcional que se ejecuta cuando se presiona la flecha arriba y no hay más elementos arriba */
+    onArrowUp?: () => void;
+    /** Callback opcional que se ejecuta cuando se presiona la flecha abajo y no hay más elementos abajo */
+    onArrowDown?: () => void;
+    /** Callback opcional que se ejecuta cuando se presiona la flecha izquierda */
+    onArrowLeft?: () => void;
+    /** Callback opcional que se ejecuta cuando se presiona la flecha derecha */
+    onArrowRight?: () => void;
+    /** Callback opcional que se ejecuta cuando el elemento recibe el foco */
+    onFocus?: (index?: number) => void;
+    /** Callback opcional que se ejecuta cuando el índice enfocado dentro del elemento cambia (ej: una fila en una tabla) */
+    onFocusedChange?: (index: number) => void;
+}
+/**
+ * Servicio que gestiona la navegación por teclado entre componentes registrados.
+ * Permite mover el foco entre elementos usando las teclas de flecha y centraliza el estado del foco.
+ */
+declare class KeyboardNavigationService {
+    /** Array privado que contiene todos los elementos registrados para la navegación */
+    private focusableElements;
+    /** Signal que mantiene el índice del elemento actualmente enfocado en el array `focusableElements` */
+    private currentFocusIndex;
+    /** Subject para notificar la destrucción del servicio y limpiar suscripciones */
+    private destroy$;
+    /**
+     * Signal público que expone el índice de la fila enfocada (usado por componentes como DataGrid).
+     * Es un signal escribible porque el componente hijo (DataGrid) es quien actualiza su valor.
+     */
+    focusedRowIndex: _angular_core.WritableSignal<number>;
+    /**
+     * Signal público que expone el nombre del elemento actualmente enfocado.
+     * Es un signal `computed` que se deriva automáticamente del `currentFocusIndex` privado.
+     */
+    focusedElementName: _angular_core.Signal<string>;
+    /**
+     * Registra un nuevo elemento en el sistema de navegación por teclado.
+     * @param element El objeto FocusableElement a registrar.
+     */
+    registerElement(element: FocusableElement): void;
+    /**
+     * Elimina un elemento del sistema de navegación por teclado.
+     * @param element El ElementRef del elemento a desregistrar.
+     */
+    unregisterElement(element: ElementRef): void;
+    /**
+     * Mueve el foco a un elemento específico por su nombre.
+     * @param name El nombre único del elemento al que se quiere mover el foco.
+     * @param index Opcional: el índice interno a enfocar (ej: el índice de una fila en una tabla).
+     */
+    focusElement(name: string, index?: number): void;
+    /**
+     * Actualiza el índice enfocado (usado por componentes internos como una tabla).
+     * @param index El nuevo índice enfocado.
+     */
+    updateFocusedIndex(index: number): void;
+    /**
+     * Maneja la lógica de navegación basada en la tecla presionada.
+     * @param key La tecla presionada ('ArrowUp', 'ArrowDown', etc.).
+     */
+    private handleKeyNavigation;
+    /**
+     * Resetea el índice de la fila enfocada a -1.
+     * Útil cuando los datos de un componente cambian y el foco anterior ya no es válido.
+     */
+    resetFocusedRowIndex(): void;
+    /**
+     * Método de limpieza para ser llamado cuando el servicio se destruye.
+     * Cierra el Subject `destroy$` para completar todas las suscripciones activas.
+     */
+    onDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KeyboardNavigationService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<KeyboardNavigationService>;
+}
+
 interface DateRangePickerOptions extends DatexOptions {
     presetTheme?: 'default' | 'bootstrap' | 'material' | 'custom';
 }
@@ -1462,5 +1544,5 @@ declare class StatusDisplayPipe implements PipeTransform {
     static ɵpipe: _angular_core.ɵɵPipeDeclaration<StatusDisplayPipe, "statusDisplay", true>;
 }
 
-export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, createAutocompleteWrapperConfig };
-export type { AutocompleteWrapperActions, AutocompleteWrapperConfig, AutocompleteWrapperEventHandler, AutocompleteWrapperEvents, AutocompleteWrapperFilters, AutocompleteWrapperItem, AutocompleteWrapperItemProperty, AutocompleteWrapperPaginationInfo, AutocompleteWrapperSearchField, AutocompleteWrapperSearchFunction, AutocompleteWrapperSearchMode, AutocompleteWrapperSearchResult, AutocompleteWrapperState, AutocompleteWrapperStockOption, DataGridButtonType, DataGridCellTemplate, DataGridColumn, DataGridColumnButton, DataGridColumnButtonBadge, DataGridColumnButtonPop, DataGridColumnButtonTooltip, DataGridColumnPinOption, DataGridColumnPinValue, DataGridColumnTag, DataGridColumnTagValue, DataGridColumnType, DataGridColumnTypeParameter, DataGridDefaultOptions, DataGridMenuItem, DataGridRowClassFormatter, DataGridRowSelectionFormatter, DataGridSortProp, DateRangePickerOptions, DateRangeValue, DialogSize, DialogWrapperConfig, IconRegistryConfig, MatCustomDialogConfig, ReusableAutocompleteWrapperComponent, TabulatorColumn, TabulatorConfig, TabulatorEventHandlers, TabulatorTheme };
+export { AUTOCOMPLETE_WRAPPER_CUSTOMER_CONFIG, AUTOCOMPLETE_WRAPPER_DEFAULT_CONFIG, AUTOCOMPLETE_WRAPPER_LOCAL_CONFIG, AUTOCOMPLETE_WRAPPER_PAGINATED_CONFIG, AUTOCOMPLETE_WRAPPER_PRODUCT_CONFIG, AUTOCOMPLETE_WRAPPER_SIMPLE_CONFIG, AdvancedDialogService, AutocompleteWrapperService, Button, DATA_GRID_DEFAULT_OPTIONS, DataGrid, DateRangePicker, DialogWrapper, DynamicCard, DynamicSelect, GetTotalPipe, IconRegistryService, InputChip, KeyboardNavigationService, OverlayService, Pagination, ReusableAutocompleteComponent, Spinner, StatusDisplayPipe, SvgIcon, TabulatorTable, ThemeSwitcher, ThemeToggle, ToUpperCase, UserIcon, createAutocompleteWrapperConfig };
+export type { AutocompleteWrapperActions, AutocompleteWrapperConfig, AutocompleteWrapperEventHandler, AutocompleteWrapperEvents, AutocompleteWrapperFilters, AutocompleteWrapperItem, AutocompleteWrapperItemProperty, AutocompleteWrapperPaginationInfo, AutocompleteWrapperSearchField, AutocompleteWrapperSearchFunction, AutocompleteWrapperSearchMode, AutocompleteWrapperSearchResult, AutocompleteWrapperState, AutocompleteWrapperStockOption, DataGridButtonType, DataGridCellTemplate, DataGridColumn, DataGridColumnButton, DataGridColumnButtonBadge, DataGridColumnButtonPop, DataGridColumnButtonTooltip, DataGridColumnPinOption, DataGridColumnPinValue, DataGridColumnTag, DataGridColumnTagValue, DataGridColumnType, DataGridColumnTypeParameter, DataGridDefaultOptions, DataGridMenuItem, DataGridRowClassFormatter, DataGridRowSelectionFormatter, DataGridSortProp, DateRangePickerOptions, DateRangeValue, DialogSize, DialogWrapperConfig, FocusableElement, IconRegistryConfig, MatCustomDialogConfig, ReusableAutocompleteWrapperComponent, TabulatorColumn, TabulatorConfig, TabulatorEventHandlers, TabulatorTheme };