@trixwell/ngx-parl 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +56 -42
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,63 +1,77 @@
1
1
  # NgxParl
2
2
 
3
- This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.3.0.
3
+ ## Overview
4
4
 
5
- ## Code scaffolding
5
+ ![img_1.png](img_1.png)
6
6
 
7
- Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
7
+ NgxParl is an Angular chat component that renders a fully interactive, customizable messaging interface. It supports features such as real-time message updates from external sources, sending and editing messages, deleting messages, day separators, and smooth auto-scrolling. The component is backend-agnostic, works with any data source, and integrates seamlessly with Angular Material, making it easy to plug into different projects as an open-source chat UI.
8
8
 
9
- ```bash
10
- ng generate component component-name
11
- ```
9
+ # GitHub Repository: [Trixwell/parl](https://github.com/Trixwell/parl)
12
10
 
13
- For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
11
+ ## Installation
12
+ To use NgxParl, ensure you have Angular and Angular Material installed. Then, import the component into your module:
14
13
 
15
- ```bash
16
- ng generate --help
17
14
  ```
18
-
19
- ## Building
20
-
21
- To build the library, run:
22
-
23
- ```bash
24
- ng build ngx-parl
15
+ npm install @trixwell/ngx-parl
25
16
  ```
26
17
 
27
- This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
18
+ ## Required peer dependencies:
28
19
 
29
- ### Publishing the Library
20
+ ```
21
+ npm install @angular/material
22
+ ```
30
23
 
31
- Once the project is built, you can publish your library by following these steps:
24
+ In your app.module.ts:
32
25
 
33
- 1. Navigate to the `dist` directory:
34
- ```bash
35
- cd dist/ngx-parl
36
- ```
26
+ ```
27
+ import { NgxParl } from 'ngx-parl';
28
+
29
+ @NgModule({
30
+ declarations: [AppComponent],
31
+ imports: [NgxParl],
32
+ bootstrap: [AppComponent],
33
+ })
34
+ export class AppModule {}
35
+ ```
37
36
 
38
- 2. Run the `npm publish` command to publish your library to the npm registry:
39
- ```bash
40
- npm publish
41
- ```
37
+ Signal Data
42
38
 
43
- ## Running unit tests
39
+ | Name | Type | Description |
40
+ |:-------------:|:-------------:|:-----------------------------------------------------------------:|
41
+ | header | boolean | Display the chat title with the name of the interlocutor |
42
+ | messageList | ChatMessage[] | List of chat messages, user information |
43
+ | messageUpdate | ChatMessage | Subject / Observable / Signal, який надсилає нове повідомлення |
44
44
 
45
- To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
45
+ # Example Usage
46
46
 
47
- ```bash
48
- ng test
47
+ ## Component Setup
49
48
  ```
50
-
51
- ## Running end-to-end tests
52
-
53
- For end-to-end (e2e) testing, run:
54
-
55
- ```bash
56
- ng e2e
49
+ public header = input<boolean>(true);
50
+ public messageList = model<ChatMessage[]>([]);
51
+ public messageUpdate = model<ChatMessage>();
57
52
  ```
58
53
 
59
- Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
60
-
61
- ## Additional Resources
54
+ ## Entity
55
+ ```
56
+ export interface ChatMessageDTO {
57
+ id: number;
58
+ chat_id: number;
59
+ cr_time: string; // ISO or 'YYYY-MM-DD HH:mm:ss'
60
+ type: ChatMessageType;
61
+ user: string;
62
+ content: string;
63
+ avatar?: string | null;
64
+ file_path?: string[] | null;
65
+ checked?: boolean | null;
66
+ }
67
+
68
+ export type ChatMessageType = 'incoming' | 'outgoing';
69
+ ```
62
70
 
63
- 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.
71
+ ## Template
72
+ ```
73
+ <ngx-parl [header]="header()"
74
+ [(messageList)]="messageList"
75
+ [(messageUpdate)]="messageUpdate">
76
+ </ngx-parl>
77
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trixwell/ngx-parl",
3
- "version": "1.0.0",
3
+ "version": "1.0.2",
4
4
  "license": "LGPL-3.0",
5
5
  "description": "Highly customizable Angular Material chat component",
6
6
  "keywords": [