cat-documents-ng 1.0.37 → 1.0.38

package/README.md

@@ -1,322 +1,322 @@
-## Installation
-To install the library, use the following npm command:
-npm i cat-documents-ng
-
-# CatDocumentLib
-
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.0.
-
-## Using the Components
-To use the lib-document-container component in your project, include it in your template as follows:
-it needs an contextId to get document-container deatils.
-<lib-document-container [contextId]="contextId"></lib-document-container>
-
-Using the Document Viewer
-
-If you want to use the standalone document-viewer component, include it in your template like this:
-the document which you want to see pass it to the document-viewer.
-<document-viewer [selectedDocument]="selectedDocument"></document-viewer>
-
-Both components are designed to integrate seamlessly into your Angular application.
-
-## Usage
-
-Add DocumentModule to your module's imports
-
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app/app.component';
-
-import { DocumentModule } from 'cat-documents-ng';
-
-@NgModule({
-  imports: [BrowserModule, DocumentModule],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent]
-})
-
-class AppModule {}
-platformBrowserDynamic().bootstrapModule(AppModule);
-
-## DoumentContainer Overview
-The DocumentContainerComponent is a comprehensive Angular component for managing and displaying a list of documents, integrating services and folder components.
-
-Features
-
-Document Fetching:
-
-Fetches documents based on contextId using DocumentService.
-
-Handles subscription management for observables.
-
-Component Integration:
-
-Uses FolderContainerComponent to display folder panels.
-
-Displays documents via DocumentListComponent.
-
-Template Highlights
-
-Grid Layout: Organizes folder and document displays in a scrollable container.
-
-Component Embedding: Integrates lib-folder-container and lib-document-list for seamless functionality.
-
-Key Properties and Methods
-
-Properties:
-
-contextId: Input for context identification.
-
-documentList: Stores the list of documents fetched from the service.
-
-Methods:
-
-ngOnInit(): Fetches documents using DocumentService based on contextId.
-
-ngOnDestroy(): Cleans up subscriptions on component destruction.
-![Alt text for the image](../../projects/cat-document-lib/src/assets/images/Document%20interface.png)
-
-## DocumentUploadComponent Overview
-
-The DocumentUploadComponent is a robust Angular component for handling file uploads with real-time progress tracking and user-friendly interfaces.
-
-Features
-
-File Upload:
-
-Allows drag-and-drop or manual selection of files.
-
-Accepts .pdf and .png file formats.
-
-Supports multiple file uploads.
-
-Progress Tracking:
-
-Displays individual file upload progress.
-
-Shows overall progress as a percentage.
-
-Error Handling:
-
-Provides feedback for upload errors.
-
-Allows users to remove failed uploads.
-
-Template Highlights
-
-Drag-and-Drop Interface: Encourages intuitive file uploads.
-
-Progress Bars: Visualizes upload progress for individual files and total size.
-
-Dynamic Interaction: Includes removal options for uploaded or in-progress files.
-
-Key Properties and Methods
-
-Properties:
-
-contextId: Input for the context to associate with uploaded files.
-
-uploadedFiles: List of uploaded files.
-
-totalSizePercent: Tracks overall upload progress.
-
-Methods:
-
-choose(event, callback): Triggers file explorer.
-
-handleTemplatedUpload(file): Processes and uploads a single file.
-
-onSelectedFiles(event): Handles new file selections and initiates uploads.
-
-handleDocumentRemove(file, index): Removes a file from the upload list.
-
-getProgress(file): Retrieves upload progress for a specific file.
-
-## DocumentViewerComponent Overview
-
-The DocumentViewerComponent is an Angular component for managing and viewing detailed document information, including images and PDFs.
-
-Features
-
-Document Display:
-
-Displays documents as images or PDFs based on the content type.
-
-Alert and Summary Integration:
-
-Provides alerts and timeline summaries for document status.
-
-Editable Notes:
-
-Allows users to add and edit notes related to the document.
-
-Property Details:
-
-Displays detailed property information associated with the document.
-
-Template Highlights
-
-Content Viewer: Dynamically displays images or PDFs based on document type.
-
-Interactive Alerts: Shows verification status with interactive visuals.
-
-Timeline Summary: Uses a timeline to show document-related events.
-
-Property Details: Displays additional document-related property information.
-
-Key Properties and Methods
-
-Properties:
-
-selectedDocument: Input for the currently selected document.
-
-notes: Editable notes associated with the document.
-
-countries: List of countries for additional document metadata.
-
-propertyDetails: Additional details related to the document.
-
-alertData: Data for alerts and verification statuses.
-
-Methods:
-
-isImage(contentType): Determines if the document is an image based on MIME type.
-![Alt text for the image](../../projects/cat-document-lib/src/assets/images/Pdf%20viewer%20dialog.png)
-
-## DocumentListComponent Overview
-The DocumentListComponent is an Angular component designed to display a list of documents and manage interactions such as viewing document details and uploading new files. It integrates seamlessly with other components like the Document Viewer and Upload Sidebar to provide a comprehensive document management experience.
-
-Features
-
-Displays a list of documents using the lib-document-list-item component.
-
-Supports user interaction for viewing individual documents.
-
-Includes functionality to upload new documents via a sidebar.
-
-Configurable through input properties for customization and integration.
-
-Key Properties
-
-Input Properties
-
-contextId: (string)
-
-Represents the context identifier for document operations.
-
-Default Value: SHARED.EMPTY
-
-documentList: (DocumentModel[])
-
-An array of documents to display in the component.
-
-Default Value: []
-
-Internal Properties
-
-selectedDocument: (DocumentModel)
-
-Represents the currently selected document for viewing in the dialog.
-
-isSidebarVisible: (boolean)
-
-Determines the visibility of the document upload sidebar.
-
-Default Value: false
-
-isdialogVisible: (boolean)
-
-Determines the visibility of the document viewer dialog.
-
-Default Value: false
-
-Key Methods
-
-handleFileUploadClick(event: MouseEvent): void
-
-Handles the click event for the file upload button.
-
-Prevents event propagation and displays the upload sidebar.
-
-Parameters:
-
-event: The MouseEvent triggered by the button click.
-
-handleClickForDocument(document: DocumentModel): void
-
-Selects a document to view and displays it in the dialog.
-
-Parameters:
-
-document: The document clicked by the user.
-
-handleCloseModal(): void
-
-Closes the document viewer dialog and resets the selected document.
-
-## FolderBlockComponent Overview
-
-The FolderBlockComponent is an Angular component designed for displaying folder blocks with functionality to filter based on folder IDs.
-
-Features
-
-Folder Display:
-
-Renders a grid of folder blocks with details such as file count and status.
-
-Each folder block is represented by a FolderBlockModel.
-
-Status Indicators:
-
-Displays counts for missing and pending files using SHARED constants.
-
-Template Highlights
-
-Folder Details: Displays file counts, folder name, and dynamic status indicators.
-
-Filter Interaction: Allows users to filter documents by clicking on a folder.
-
-Key Properties and Methods
-
-Properties:
-
-folderBlocks: Input property for an array of FolderBlockModel representing folder data.
-
-missingFileCount & pendingFileCount: Display counts for missing and pending files.
-
-Methods:
-
-handleClickForFilter(folderBlockId): Validates the folder ID and triggers filtering logic.
-
-## FolderContainerComponent Overview
-
-The FolderContainerComponent is responsible for rendering a container that displays a list of documents along with associated folder panel data.
-
-Features
-
-Folder and Document Integration:
-
-Combines folder panel data (FOLDERPANEL) and a list of documents (DocumentModel[]).
-
-Displays folder blocks using FolderBlockComponent.
-
-Data Sourcing:
-
-Sources folder panel data from FOLDERPANEL.
-
-Accepts a document list as an input.
-
-Template Highlights
-
-Folder Blocks Display: Uses lib-folder-block to render folder panels.
-
-Key Properties
-
-Properties:
-
-documentList: Input for a list of documents to display.
-
-folderBlocks: Data sourced from FOLDERPANEL for folder blocks.
-
-## Additional Resources
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+## Installation
+To install the library, use the following npm command:
+npm i cat-documents-ng
+
+# CatDocumentLib
+
+This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.0.0.
+
+## Using the Components
+To use the lib-document-container component in your project, include it in your template as follows:
+it needs an contextId to get document-container deatils.
+<lib-document-container [contextId]="contextId"></lib-document-container>
+
+Using the Document Viewer
+
+If you want to use the standalone document-viewer component, include it in your template like this:
+the document which you want to see pass it to the document-viewer.
+<document-viewer [selectedDocument]="selectedDocument"></document-viewer>
+
+Both components are designed to integrate seamlessly into your Angular application.
+
+## Usage
+
+Add DocumentModule to your module's imports
+
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+
+import { DocumentModule } from 'cat-documents-ng';
+
+@NgModule({
+  imports: [BrowserModule, DocumentModule],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent]
+})
+
+class AppModule {}
+platformBrowserDynamic().bootstrapModule(AppModule);
+
+## DoumentContainer Overview
+The DocumentContainerComponent is a comprehensive Angular component for managing and displaying a list of documents, integrating services and folder components.
+
+Features
+
+Document Fetching:
+
+Fetches documents based on contextId using DocumentService.
+
+Handles subscription management for observables.
+
+Component Integration:
+
+Uses FolderContainerComponent to display folder panels.
+
+Displays documents via DocumentListComponent.
+
+Template Highlights
+
+Grid Layout: Organizes folder and document displays in a scrollable container.
+
+Component Embedding: Integrates lib-folder-container and lib-document-list for seamless functionality.
+
+Key Properties and Methods
+
+Properties:
+
+contextId: Input for context identification.
+
+documentList: Stores the list of documents fetched from the service.
+
+Methods:
+
+ngOnInit(): Fetches documents using DocumentService based on contextId.
+
+ngOnDestroy(): Cleans up subscriptions on component destruction.
+![Alt text for the image](../../projects/cat-document-lib/src/assets/images/Document%20interface.png)
+
+## DocumentUploadComponent Overview
+
+The DocumentUploadComponent is a robust Angular component for handling file uploads with real-time progress tracking and user-friendly interfaces.
+
+Features
+
+File Upload:
+
+Allows drag-and-drop or manual selection of files.
+
+Accepts .pdf and .png file formats.
+
+Supports multiple file uploads.
+
+Progress Tracking:
+
+Displays individual file upload progress.
+
+Shows overall progress as a percentage.
+
+Error Handling:
+
+Provides feedback for upload errors.
+
+Allows users to remove failed uploads.
+
+Template Highlights
+
+Drag-and-Drop Interface: Encourages intuitive file uploads.
+
+Progress Bars: Visualizes upload progress for individual files and total size.
+
+Dynamic Interaction: Includes removal options for uploaded or in-progress files.
+
+Key Properties and Methods
+
+Properties:
+
+contextId: Input for the context to associate with uploaded files.
+
+uploadedFiles: List of uploaded files.
+
+totalSizePercent: Tracks overall upload progress.
+
+Methods:
+
+choose(event, callback): Triggers file explorer.
+
+handleTemplatedUpload(file): Processes and uploads a single file.
+
+onSelectedFiles(event): Handles new file selections and initiates uploads.
+
+handleDocumentRemove(file, index): Removes a file from the upload list.
+
+getProgress(file): Retrieves upload progress for a specific file.
+
+## DocumentViewerComponent Overview
+
+The DocumentViewerComponent is an Angular component for managing and viewing detailed document information, including images and PDFs.
+
+Features
+
+Document Display:
+
+Displays documents as images or PDFs based on the content type.
+
+Alert and Summary Integration:
+
+Provides alerts and timeline summaries for document status.
+
+Editable Notes:
+
+Allows users to add and edit notes related to the document.
+
+Property Details:
+
+Displays detailed property information associated with the document.
+
+Template Highlights
+
+Content Viewer: Dynamically displays images or PDFs based on document type.
+
+Interactive Alerts: Shows verification status with interactive visuals.
+
+Timeline Summary: Uses a timeline to show document-related events.
+
+Property Details: Displays additional document-related property information.
+
+Key Properties and Methods
+
+Properties:
+
+selectedDocument: Input for the currently selected document.
+
+notes: Editable notes associated with the document.
+
+countries: List of countries for additional document metadata.
+
+propertyDetails: Additional details related to the document.
+
+alertData: Data for alerts and verification statuses.
+
+Methods:
+
+isImage(contentType): Determines if the document is an image based on MIME type.
+![Alt text for the image](../../projects/cat-document-lib/src/assets/images/Pdf%20viewer%20dialog.png)
+
+## DocumentListComponent Overview
+The DocumentListComponent is an Angular component designed to display a list of documents and manage interactions such as viewing document details and uploading new files. It integrates seamlessly with other components like the Document Viewer and Upload Sidebar to provide a comprehensive document management experience.
+
+Features
+
+Displays a list of documents using the lib-document-list-item component.
+
+Supports user interaction for viewing individual documents.
+
+Includes functionality to upload new documents via a sidebar.
+
+Configurable through input properties for customization and integration.
+
+Key Properties
+
+Input Properties
+
+contextId: (string)
+
+Represents the context identifier for document operations.
+
+Default Value: SHARED.EMPTY
+
+documentList: (DocumentModel[])
+
+An array of documents to display in the component.
+
+Default Value: []
+
+Internal Properties
+
+selectedDocument: (DocumentModel)
+
+Represents the currently selected document for viewing in the dialog.
+
+isSidebarVisible: (boolean)
+
+Determines the visibility of the document upload sidebar.
+
+Default Value: false
+
+isdialogVisible: (boolean)
+
+Determines the visibility of the document viewer dialog.
+
+Default Value: false
+
+Key Methods
+
+handleFileUploadClick(event: MouseEvent): void
+
+Handles the click event for the file upload button.
+
+Prevents event propagation and displays the upload sidebar.
+
+Parameters:
+
+event: The MouseEvent triggered by the button click.
+
+handleClickForDocument(document: DocumentModel): void
+
+Selects a document to view and displays it in the dialog.
+
+Parameters:
+
+document: The document clicked by the user.
+
+handleCloseModal(): void
+
+Closes the document viewer dialog and resets the selected document.
+
+## FolderBlockComponent Overview
+
+The FolderBlockComponent is an Angular component designed for displaying folder blocks with functionality to filter based on folder IDs.
+
+Features
+
+Folder Display:
+
+Renders a grid of folder blocks with details such as file count and status.
+
+Each folder block is represented by a FolderBlockModel.
+
+Status Indicators:
+
+Displays counts for missing and pending files using SHARED constants.
+
+Template Highlights
+
+Folder Details: Displays file counts, folder name, and dynamic status indicators.
+
+Filter Interaction: Allows users to filter documents by clicking on a folder.
+
+Key Properties and Methods
+
+Properties:
+
+folderBlocks: Input property for an array of FolderBlockModel representing folder data.
+
+missingFileCount & pendingFileCount: Display counts for missing and pending files.
+
+Methods:
+
+handleClickForFilter(folderBlockId): Validates the folder ID and triggers filtering logic.
+
+## FolderContainerComponent Overview
+
+The FolderContainerComponent is responsible for rendering a container that displays a list of documents along with associated folder panel data.
+
+Features
+
+Folder and Document Integration:
+
+Combines folder panel data (FOLDERPANEL) and a list of documents (DocumentModel[]).
+
+Displays folder blocks using FolderBlockComponent.
+
+Data Sourcing:
+
+Sources folder panel data from FOLDERPANEL.
+
+Accepts a document list as an input.
+
+Template Highlights
+
+Folder Blocks Display: Uses lib-folder-block to render folder panels.
+
+Key Properties
+
+Properties:
+
+documentList: Input for a list of documents to display.
+
+folderBlocks: Data sourced from FOLDERPANEL for folder blocks.
+
+## Additional Resources
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.