@libs-ui/components-badge 0.2.279 → 0.2.280

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 (8) hide show
  1. package/README.md +76 -82
  2. package/esm2022/index.mjs +1 -2
  3. package/fesm2022/libs-ui-components-badge.mjs +1 -163
  4. package/fesm2022/libs-ui-components-badge.mjs.map +1 -1
  5. package/index.d.ts +0 -1
  6. package/package.json +3 -3
  7. package/demo/badge-demo.component.d.ts +0 -41
  8. package/esm2022/demo/badge-demo.component.mjs +0 -165
package/README.md CHANGED
@@ -1,40 +1,38 @@
1
- # Badge Component
1
+ # Badge
2
2
 
3
- Một component Angular linh hoạt để hiển thị các chỉ số số học.
3
+ ## Giới thiệu
4
4
 
5
- ## Tổng quan
6
-
7
- Badge component được thiết kế để hiển thị các giá trị số học theo nhiều định dạng khác nhau. Nó hoàn hảo cho việc hiển thị số lượng thông báo, chỉ báo trạng thái và bất kỳ ngữ cảnh nào mà bạn cần hiển thị một giá trị số học nổi bật trực quan.
5
+ `@libs-ui/components-badge` là một component Angular linh hoạt để hiển thị các chỉ số số học như thông báo, trạng thái và số liệu quan trọng. Component hỗ trợ nhiều chế độ hiển thị, trạng thái active và tooltip tùy chỉnh.
8
6
 
9
7
  ## Tính năng
10
8
 
11
- - 🔢 **Định dạng số**: Hiển thị số theo nhiều định dạng: thông thường, với tiền tố/hậu tố, hoặc viết tắt (K cho hàng nghìn).
12
- - 🎨 **Trạng thái hiển thị**: Chuyển đổi giữa trạng thái active và mặc định dựa trên nhu cầu của ứng dụng.
13
- - 💬 **Hỗ trợ Tooltip**: Thêm tooltip thông tin cho các badge với nội dung và vị trí tùy chỉnh.
14
- - 📏 **Tùy biến linh hoạt**: Tùy chỉnh giao diện với các lớp CSS và điều khiển margin.
9
+ - Định dạng số: hiển thị số nguyên, với dấu cộng, viết tắt K (nghìn) và M (triệu)
10
+ - Hỗ trợ trạng thái `active`
11
+ - Tooltip thông tin với cấu hình linh hoạt (`IPopoverOverlay`)
12
+ - Tùy chỉnh giao diện bằng CSS class và điều khiển margin
15
13
 
16
14
  ## Cài đặt
17
15
 
18
16
  ### Yêu cầu
19
17
 
20
- - Angular: 18.0.0 trở lên
21
- - Tailwind CSS: 3.3.0 trở lên
18
+ - Angular 18.0.0 trở lên
19
+ - Tailwind CSS 3.3.0 trở lên
20
+
21
+ Để cài đặt component `badge`, sử dụng npm hoặc yarn:
22
22
 
23
23
  ```bash
24
- # Sử dụng npm
25
24
  npm install @libs-ui/components-badge
25
+ ```
26
26
 
27
- # Sử dụng yarn
27
+ hoặc
28
+
29
+ ```bash
28
30
  yarn add @libs-ui/components-badge
29
31
  ```
30
32
 
31
- ## Cách sử dụng
32
-
33
- ### Sử dụng cơ bản
33
+ ## Sử dụng
34
34
 
35
- ```html
36
- <libs_ui-components-badge [count]="5"></libs_ui-components-badge>
37
- ```
35
+ ### Inline Template
38
36
 
39
37
  ```typescript
40
38
  import { Component } from '@angular/core';
@@ -44,47 +42,21 @@ import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
44
42
  selector: 'app-example',
45
43
  standalone: true,
46
44
  imports: [LibsUiComponentsBadgeComponent],
47
- templateUrl: './example.component.html'
48
- })
49
- export class ExampleComponent {}
50
- ```
51
-
52
- ### Với các chế độ hiển thị khác nhau
53
-
54
- ```html
55
- <div class="flex gap-4 items-center">
56
- <div>
57
- Tiêu chuẩn: <libs_ui-components-badge
58
- [count]="25"
59
- mode="x">
60
- </libs_ui-components-badge>
61
- </div>
62
-
63
- <div>
64
- Với dấu cộng: <libs_ui-components-badge
65
- [count]="25"
66
- mode="x+">
67
- </libs_ui-components-badge>
68
- </div>
69
-
70
- <div>
71
- Định dạng K: <libs_ui-components-badge
72
- [count]="1500"
73
- mode="k">
45
+ template: `
46
+ <libs_ui-components-badge
47
+ [count]="newMessages"
48
+ [mode]="'k'"
49
+ [active]="true"
50
+ [popoverConfig]="{ content: newMessages + ' tin nhắn mới' }">
74
51
  </libs_ui-components-badge>
75
- </div>
76
- </div>
52
+ `
53
+ })
54
+ export class ExampleComponent {
55
+ newMessages = 12;
56
+ }
77
57
  ```
78
58
 
79
- ### Với Tooltip
80
-
81
- ```html
82
- <libs_ui-components-badge
83
- [count]="newMessages"
84
- [popoverConfig]="{ content: newMessages + ' tin nhắn mới' }"
85
- [active]="true">
86
- </libs_ui-components-badge>
87
- ```
59
+ ### File HTML riêng
88
60
 
89
61
  ```typescript
90
62
  import { Component } from '@angular/core';
@@ -101,32 +73,62 @@ export class TooltipExampleComponent {
101
73
  }
102
74
  ```
103
75
 
104
- ## Tài liệu API
76
+ ```html
77
+ <libs_ui-components-badge
78
+ [count]="newMessages"
79
+ [popoverConfig]="{ content: newMessages + ' tin nhắn mới' }"
80
+ [active]="true">
81
+ </libs_ui-components-badge>
82
+ ```
83
+
84
+ ## Công nghệ sử dụng
85
+
86
+ - **Angular 18**: standalone components, Signals
87
+ - **Tailwind CSS**: cho styling
105
88
 
106
- ### Đầu vào (Inputs)
89
+ ## API Reference
107
90
 
108
- | Tên | Kiểu | Mặc định | Mô tả |
109
- |------|------|---------|-------------|
110
- | count | number | 0 | Số cần hiển thị trong badge |
111
- | mode | TYPE_BADGE_MODE | undefined | Chế độ hiển thị cho badge. Tùy chọn: x, x+, +x, k, 0x |
112
- | active | boolean | undefined | Xác định badge có đang ở trạng thái active hay không |
113
- | maxCount | number | Number.MAX_SAFE_INTEGER | Số tối đa để hiển thị trước khi áp dụng định dạng |
114
- | popoverConfig | IPopoverOverlay | undefined | Cấu hình cho popover khi di chuột qua badge |
115
- | ignoreMarginDefault | boolean | undefined | Có bỏ qua margin mặc định bên trái của badge hay không |
116
- | classCircle | string | 'libs-ui-font-h6r' | Lớp CSS để tạo kiểu cho vòng tròn badge |
117
- | ignoreStopPropagationEvent | boolean | true | Có bỏ qua việc lan truyền sự kiện khi nhấp vào badge hay không |
91
+ ### Inputs
92
+
93
+ | Tên | Kiểu | Mặc định | Mô tả |
94
+ |-----------------------------|--------------------------------|---------------------------|-------------------------------------------------------------------------------|
95
+ | count | `number` | `0` | Số cần hiển thị trong badge |
96
+ | mode | `TYPE_BADGE_MODE` | `undefined` | Chế độ hiển thị: `'x'` &#124; `'x+'` &#124; `'+x'` &#124; `'k'` &#124; `'0x'` |
97
+ | active | `boolean` | `undefined` | Xác định badge có đang ở trạng thái active hay không |
98
+ | maxCount | `number` | `Number.MAX_SAFE_INTEGER` | Số tối đa để hiển thị trước khi áp dụng định dạng |
99
+ | popoverConfig | `IPopoverOverlay` | `undefined` | Cấu hình popover khi di chuột qua badge |
100
+ | ignoreMarginDefault | `boolean` | `undefined` | Bỏ qua margin mặc định bên trái của badge |
101
+ | classCircle | `string` | `libs-ui-font-h6r` | CSS class cho vòng tròn badge |
102
+ | ignoreStopPropagationEvent | `boolean` | `true` | Bỏ qua việc lan truyền sự kiện khi nhấp vào badge |
103
+
104
+ ### Outputs
105
+
106
+ Thư viện không có Outputs.
118
107
 
119
108
  ### Interfaces
120
109
 
121
- #### TYPE_BADGE_MODE
110
+ #### `IBadge`
122
111
 
123
112
  ```typescript
124
- type TYPE_BADGE_MODE = 'x' | 'x+' | '+x' | 'k' | '0x';
113
+ export interface IBadge {
114
+ mode?: TYPE_BADGE_MODE;
115
+ count?: number;
116
+ maxCount?: number;
117
+ classCircle?: string;
118
+ }
125
119
  ```
126
120
 
127
- Định nghĩa kiểu cho các chế độ hiển thị badge. Mỗi chế độ thay đổi cách hiển thị số.
121
+ Định nghĩa cấu hình badge (inputs).
128
122
 
129
- #### IPopoverOverlay
123
+ #### `TYPE_BADGE_MODE`
124
+
125
+ ```typescript
126
+ export type TYPE_BADGE_MODE = 'x' | 'x+' | '+x' | 'k' | '0x';
127
+ ```
128
+
129
+ Định nghĩa các chế độ hiển thị badge.
130
+
131
+ #### `IPopoverOverlay`
130
132
 
131
133
  ```typescript
132
134
  interface IPopoverOverlay {
@@ -138,12 +140,4 @@ interface IPopoverOverlay {
138
140
  }
139
141
  ```
140
142
 
141
- Interface để cấu hình popover xuất hiện khi di chuột qua badge.
142
-
143
- ## Giải thích các chế độ hiển thị
144
-
145
- - **x**: Hiển thị số nguyên (ví dụ: "25")
146
- - **x+**: Hiển thị số với dấu cộng ở sau nếu cout > maxCount (ví dụ: "25+")
147
- - **+x**: Hiển thị số với dấu cộng ở trước (ví dụ: "+25")
148
- - **k**: Hiển thị số lớn ở định dạng nghìn (ví dụ: "1.5K")
149
- - **0x**: Hiển thị số có một chữ số với số 0 ở đầu (ví dụ: "05")
143
+ Định nghĩa cấu hình cho popover hiển thị khi di chuột qua badge.
package/esm2022/index.mjs CHANGED
@@ -1,4 +1,3 @@
1
1
  export * from './badge.component';
2
2
  export * from './interfaces';
3
- export * from './demo/badge-demo.component';
4
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYmFkZ2Uvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxjQUFjLENBQUM7QUFDN0IsY0FBYyw2QkFBNkIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vYmFkZ2UuY29tcG9uZW50JztcbmV4cG9ydCAqIGZyb20gJy4vaW50ZXJmYWNlcyc7XG5leHBvcnQgKiBmcm9tICcuL2RlbW8vYmFkZ2UtZGVtby5jb21wb25lbnQnOyJdfQ==
3
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYmFkZ2Uvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsbUJBQW1CLENBQUM7QUFDbEMsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2JhZGdlLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMnOyJdfQ==
package/fesm2022/libs-ui-components-badge.mjs CHANGED
@@ -3,9 +3,6 @@ import { computed, input, ChangeDetectionStrategy, Component } from '@angular/co
3
3
  import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
4
4
  import { viewDataNumberByLanguage } from '@libs-ui/utils';
5
5
  import { Subject } from 'rxjs';
6
- import * as i1 from '@angular/forms';
7
- import { FormsModule } from '@angular/forms';
8
- import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
9
6
 
10
7
  class LibsUiComponentsBadgeComponent {
11
8
  // #region PROPERTY
@@ -72,168 +69,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
72
69
  args: [{ selector: 'libs_ui-components-badge', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsPopoverComponent], template: "<span class=\"libs-ui-badge {{ classCircle () }}\"\n [class.libs-ui-badge-active]=\"active()\"\n [class.ml-0]=\"ignoreMarginDefault()\"\n LibsUiComponentsPopoverDirective\n [type]=\"popoverConfig() ? 'other':'text'\"\n [config]=\"popoverConfig() ?? {content:countDisplay()}\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\">\n {{ countDisplay() }}\n</span>\n", styles: [".libs-ui-badge{width:fit-content;height:20px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#6a7383;background:#e6e7ea;margin-left:8px;padding:2px 6px}.libs-ui-badge-active{color:var(--libs-ui-color-default, #226FF5);background:var(--libs-ui-color-light-3, #F4F8FF)}\n"] }]
73
70
  }] });
74
71
 
75
- class LibsUiComponentsBadgeDemoComponent {
76
- inputsDoc = [
77
- {
78
- name: 'count',
79
- type: 'number',
80
- default: '0',
81
- description: 'Số cần hiển thị trong badge'
82
- },
83
- {
84
- name: 'mode',
85
- type: 'TYPE_BADGE_MODE',
86
- default: 'undefined',
87
- description: 'Chế độ hiển thị cho badge. Tùy chọn: x, x+, +x, k, 0x'
88
- },
89
- {
90
- name: 'active',
91
- type: 'boolean',
92
- default: 'undefined',
93
- description: 'Xác định badge có đang ở trạng thái active hay không'
94
- },
95
- {
96
- name: 'maxCount',
97
- type: 'number',
98
- default: 'Number.MAX_SAFE_INTEGER',
99
- description: 'Số tối đa để hiển thị trước khi áp dụng định dạng'
100
- },
101
- {
102
- name: 'popoverConfig',
103
- type: 'IPopoverOverlay',
104
- default: 'undefined',
105
- description: 'Cấu hình cho popover khi di chuột qua badge'
106
- },
107
- {
108
- name: 'ignoreMarginDefault',
109
- type: 'boolean',
110
- default: 'undefined',
111
- description: 'Có bỏ qua margin mặc định bên trái của badge hay không'
112
- },
113
- {
114
- name: 'classCircle',
115
- type: 'string',
116
- default: 'libs-ui-font-h6r',
117
- description: 'Lớp CSS để tạo kiểu cho vòng tròn badge'
118
- },
119
- {
120
- name: 'ignoreStopPropagationEvent',
121
- type: 'boolean',
122
- default: 'true',
123
- description: 'Có bỏ qua việc lan truyền sự kiện khi nhấp vào badge hay không'
124
- }
125
- ];
126
- interfacesDoc = [
127
- {
128
- name: 'TYPE_BADGE_MODE',
129
- code: "type TYPE_BADGE_MODE = 'x' | 'x+' | '+x' | 'k' | '0x';",
130
- description: 'Định nghĩa kiểu cho các chế độ hiển thị badge. Mỗi chế độ thay đổi cách hiển thị số.'
131
- },
132
- {
133
- name: 'IPopoverOverlay',
134
- code: "interface IPopoverOverlay {\n content: string | TemplateRef<any>;\n width?: string;\n position?: string;\n zIndex?: number;\n offset?: { x?: number; y?: number; };\n}",
135
- description: 'Interface để cấu hình popover xuất hiện khi di chuột qua badge.'
136
- }
137
- ];
138
- features = [
139
- {
140
- id: 1,
141
- icon: '🔢',
142
- title: 'Định dạng số',
143
- description: 'Hiển thị số theo nhiều định dạng: thông thường, với tiền tố/hậu tố, hoặc viết tắt (K cho hàng nghìn).'
144
- },
145
- {
146
- id: 2,
147
- icon: '🎨',
148
- title: 'Trạng thái hiển thị',
149
- description: 'Chuyển đổi giữa trạng thái active và mặc định dựa trên nhu cầu của ứng dụng.'
150
- },
151
- {
152
- id: 3,
153
- icon: '💬',
154
- title: 'Hỗ trợ Tooltip',
155
- description: 'Thêm tooltip thông tin cho các badge với nội dung và vị trí tùy chỉnh.'
156
- },
157
- {
158
- id: 4,
159
- icon: '📏',
160
- title: 'Tùy biến linh hoạt',
161
- description: 'Tùy chỉnh giao diện với các lớp CSS và điều khiển margin.'
162
- }
163
- ];
164
- // Demo properties
165
- demoCount = 25;
166
- demoMaxCount = 99;
167
- demoActive = true;
168
- demoMode = 'x';
169
- demoModes = ['x', 'x+', '+x', 'k', '0x'];
170
- demoPopoverConfig = { content: 'Badge Tooltip' };
171
- demoUseMaxCount = true;
172
- // Methods for demo interaction
173
- incrementCount() {
174
- this.demoCount += 5;
175
- }
176
- decrementCount() {
177
- if (this.demoCount > 0) {
178
- this.demoCount -= 5;
179
- }
180
- }
181
- validateCount() {
182
- if (isNaN(this.demoCount) || this.demoCount < 0) {
183
- this.demoCount = 0;
184
- }
185
- else {
186
- this.demoCount = Math.floor(this.demoCount);
187
- }
188
- }
189
- validateMaxCount() {
190
- if (isNaN(this.demoMaxCount) || this.demoMaxCount < 1) {
191
- this.demoMaxCount = 99;
192
- }
193
- else {
194
- this.demoMaxCount = Math.floor(this.demoMaxCount);
195
- }
196
- }
197
- setLargeCount() {
198
- this.demoCount = 1250;
199
- }
200
- resetCount() {
201
- this.demoCount = 25;
202
- this.demoMaxCount = 99;
203
- }
204
- toggleActive() {
205
- this.demoActive = !this.demoActive;
206
- }
207
- toggleUseMaxCount() {
208
- this.demoUseMaxCount = !this.demoUseMaxCount;
209
- }
210
- changeMode(mode) {
211
- this.demoMode = mode;
212
- }
213
- copyToClipboard(text) {
214
- navigator.clipboard.writeText(text)
215
- .then(() => {
216
- console.log('Text copied to clipboard');
217
- })
218
- .catch((err) => {
219
- console.error('Could not copy text: ', err);
220
- });
221
- }
222
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsBadgeDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
223
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsBadgeDemoComponent, isStandalone: true, selector: "lib-badge-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> l\u00E0 m\u1ED9t component\n Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc theo nhi\u1EC1u \u0111\u1ECBnh d\u1EA1ng kh\u00E1c nhau. N\u00F3 ho\u00E0n h\u1EA3o cho vi\u1EC7c hi\u1EC3n th\u1ECB s\u1ED1\n l\u01B0\u1EE3ng th\u00F4ng b\u00E1o, ch\u1EC9 b\u00E1o tr\u1EA1ng th\u00E1i v\u00E0 b\u1EA5t k\u1EF3 ng\u1EEF c\u1EA3nh n\u00E0o m\u00E0 b\u1EA1n c\u1EA7n hi\u1EC3n th\u1ECB m\u1ED9t gi\u00E1 tr\u1ECB s\u1ED1 h\u1ECDc n\u1ED5i b\u1EADt tr\u1EF1c\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n\n <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge T\u01B0\u01A1ng t\u00E1c</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Gi\u1EDBi h\u1EA1n t\u1ED1i \u0111a:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuy\u1EC3n \u0111\u1ED5i Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t s\u1ED1 l\u1EDBn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t l\u1EA1i\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">M\u1EB7c \u0111\u1ECBnh:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">V\u1EDBi Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng r\u1EA5t l\u1EDBn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">S\u1EED d\u1EE5ng c\u01A1 b\u1EA3n</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi c\u00E1c ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB kh\u00E1c nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Ti\u00EAu chu\u1EA9n: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n V\u1EDBi d\u1EA5u c\u1ED9ng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n \u0110\u1ECBnh d\u1EA1ng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Ti\u00EAu chu\u1EA9n:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n V\u1EDBi d\u1EA5u c\u1ED9ng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n \u0110\u1ECBnh d\u1EA1ng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nh\u1EAFn m\u1EDBi' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0110\u1EA7u v\u00E0o (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }] });
224
- }
225
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsBadgeDemoComponent, decorators: [{
226
- type: Component,
227
- args: [{ selector: 'lib-badge-demo', standalone: true, imports: [
228
- FormsModule,
229
- LibsUiComponentsBadgeComponent,
230
- LibsUiComponentsButtonsButtonComponent
231
- ], template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> l\u00E0 m\u1ED9t component\n Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc theo nhi\u1EC1u \u0111\u1ECBnh d\u1EA1ng kh\u00E1c nhau. N\u00F3 ho\u00E0n h\u1EA3o cho vi\u1EC7c hi\u1EC3n th\u1ECB s\u1ED1\n l\u01B0\u1EE3ng th\u00F4ng b\u00E1o, ch\u1EC9 b\u00E1o tr\u1EA1ng th\u00E1i v\u00E0 b\u1EA5t k\u1EF3 ng\u1EEF c\u1EA3nh n\u00E0o m\u00E0 b\u1EA1n c\u1EA7n hi\u1EC3n th\u1ECB m\u1ED9t gi\u00E1 tr\u1ECB s\u1ED1 h\u1ECDc n\u1ED5i b\u1EADt tr\u1EF1c\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n\n <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge T\u01B0\u01A1ng t\u00E1c</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Gi\u1EDBi h\u1EA1n t\u1ED1i \u0111a:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuy\u1EC3n \u0111\u1ED5i Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t s\u1ED1 l\u1EDBn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t l\u1EA1i\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">M\u1EB7c \u0111\u1ECBnh:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">V\u1EDBi Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng r\u1EA5t l\u1EDBn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">S\u1EED d\u1EE5ng c\u01A1 b\u1EA3n</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi c\u00E1c ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB kh\u00E1c nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Ti\u00EAu chu\u1EA9n: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n V\u1EDBi d\u1EA5u c\u1ED9ng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n \u0110\u1ECBnh d\u1EA1ng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Ti\u00EAu chu\u1EA9n:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n V\u1EDBi d\u1EA5u c\u1ED9ng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n \u0110\u1ECBnh d\u1EA1ng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nh\u1EAFn m\u1EDBi' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0110\u1EA7u v\u00E0o (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n" }]
232
- }] });
233
-
234
72
  /**
235
73
  * Generated bundle index. Do not edit.
236
74
  */
237
75
 
238
- export { LibsUiComponentsBadgeComponent, LibsUiComponentsBadgeDemoComponent };
76
+ export { LibsUiComponentsBadgeComponent };
239
77
  //# sourceMappingURL=libs-ui-components-badge.mjs.map
package/fesm2022/libs-ui-components-badge.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"libs-ui-components-badge.mjs","sources":["../../../../../libs-ui/components/badge/src/badge.component.ts","../../../../../libs-ui/components/badge/src/badge.component.html","../../../../../libs-ui/components/badge/src/demo/badge-demo.component.ts","../../../../../libs-ui/components/badge/src/demo/badge-demo.component.html","../../../../../libs-ui/components/badge/src/libs-ui-components-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, OnDestroy, computed, input } from '@angular/core';\nimport { IPopoverOverlay, LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { viewDataNumberByLanguage } from '@libs-ui/utils';\nimport { Subject } from 'rxjs';\nimport { TYPE_BADGE_MODE } from './interfaces/mode.type';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-badge',\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [LibsUiComponentsPopoverComponent]\n})\nexport class LibsUiComponentsBadgeComponent implements OnDestroy {\n // #region PROPERTY\n protected countDisplay = computed(this.countDisplayComputed.bind(this));\n\n private onDestroy = new Subject<void>();\n\n // #region INPUT\n readonly popoverConfig = input<IPopoverOverlay>();\n readonly active = input<boolean>();\n readonly count = input<number, number>(0, { transform: (value) => value ?? 0 });\n readonly mode = input<TYPE_BADGE_MODE>(); // không truyền mặc định các giá trị < 10 sẽ có số 0 ở đầu\n readonly maxCount = input<number, number>(Number.MAX_SAFE_INTEGER, { transform: (value) => value ?? Number.MAX_SAFE_INTEGER }); // nếu count > maxCount sẽ xem xét mode để hiển thị.\n readonly ignoreMarginDefault = input<boolean>();\n readonly classCircle = input<string, string>('libs-ui-font-h6r', { transform: (value) => value ?? 'libs-ui-font-h6r' });\n readonly ignoreStopPropagationEvent = input<boolean, boolean>(true, { transform: (value) => value ?? true });\n\n /* COMPUTED PROPERTIES FUNCTION */\n private countDisplayComputed() {\n if (this.mode() === 'k' && this.count() > 999) {\n const count = this.count() / 1000;\n\n if (count > 1000) {\n return `${viewDataNumberByLanguage(count / 1000, true, 1, false, true)}M`;\n }\n\n return `${viewDataNumberByLanguage(count, true, 1, false, true)}K`;\n }\n\n if (this.mode() === 'x+' && this.count() > this.maxCount()) {\n const countFormat = viewDataNumberByLanguage(this.maxCount(), true);\n\n return `${countFormat}+`;\n }\n\n if (!this.count()) {\n switch (this.mode()) {\n case '+x':\n return '+00';\n\n case 'x+':\n return '00';\n\n case 'x':\n return '0';\n\n case '0x':\n return '00';\n }\n }\n\n if (this.count() < 10) {\n switch (this.mode()) {\n case '+x':\n return `+0${this.count()}`;\n\n case 'x+':\n return `0${this.count()}`;\n\n case 'x':\n return `${this.count()}`;\n\n case '0x':\n return `0${this.count()}`;\n }\n }\n const countFormat = viewDataNumberByLanguage(this.count(), true);\n\n return this.mode() === '+x' ? `+${countFormat}` : `${countFormat}`;\n }\n\n ngOnDestroy(): void {\n this.onDestroy.next();\n this.onDestroy.complete();\n }\n}\n","<span class=\"libs-ui-badge {{ classCircle () }}\"\n [class.libs-ui-badge-active]=\"active()\"\n [class.ml-0]=\"ignoreMarginDefault()\"\n LibsUiComponentsPopoverDirective\n [type]=\"popoverConfig() ? 'other':'text'\"\n [config]=\"popoverConfig() ?? {content:countDisplay()}\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\">\n {{ countDisplay() }}\n</span>\n","import { Component } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IPopoverOverlay } from '@libs-ui/components-popover';\nimport { LibsUiComponentsBadgeComponent } from '../badge.component';\nimport { TYPE_BADGE_MODE } from '../interfaces/mode.type';\n\n@Component({\n selector: 'lib-badge-demo',\n templateUrl: './badge-demo.component.html',\n standalone: true,\n imports: [\n FormsModule,\n LibsUiComponentsBadgeComponent,\n LibsUiComponentsButtonsButtonComponent\n ]\n})\nexport class LibsUiComponentsBadgeDemoComponent {\n inputsDoc = [\n {\n name: 'count',\n type: 'number',\n default: '0',\n description: 'Số cần hiển thị trong badge'\n },\n {\n name: 'mode',\n type: 'TYPE_BADGE_MODE',\n default: 'undefined',\n description: 'Chế độ hiển thị cho badge. Tùy chọn: x, x+, +x, k, 0x'\n },\n {\n name: 'active',\n type: 'boolean',\n default: 'undefined',\n description: 'Xác định badge có đang ở trạng thái active hay không'\n },\n {\n name: 'maxCount',\n type: 'number',\n default: 'Number.MAX_SAFE_INTEGER',\n description: 'Số tối đa để hiển thị trước khi áp dụng định dạng'\n },\n {\n name: 'popoverConfig',\n type: 'IPopoverOverlay',\n default: 'undefined',\n description: 'Cấu hình cho popover khi di chuột qua badge'\n },\n {\n name: 'ignoreMarginDefault',\n type: 'boolean',\n default: 'undefined',\n description: 'Có bỏ qua margin mặc định bên trái của badge hay không'\n },\n {\n name: 'classCircle',\n type: 'string',\n default: 'libs-ui-font-h6r',\n description: 'Lớp CSS để tạo kiểu cho vòng tròn badge'\n },\n {\n name: 'ignoreStopPropagationEvent',\n type: 'boolean',\n default: 'true',\n description: 'Có bỏ qua việc lan truyền sự kiện khi nhấp vào badge hay không'\n }\n ];\n\n interfacesDoc = [\n {\n name: 'TYPE_BADGE_MODE',\n code: \"type TYPE_BADGE_MODE = 'x' | 'x+' | '+x' | 'k' | '0x';\",\n description: 'Định nghĩa kiểu cho các chế độ hiển thị badge. Mỗi chế độ thay đổi cách hiển thị số.'\n },\n {\n name: 'IPopoverOverlay',\n code: \"interface IPopoverOverlay {\\n content: string | TemplateRef<any>;\\n width?: string;\\n position?: string;\\n zIndex?: number;\\n offset?: { x?: number; y?: number; };\\n}\",\n description: 'Interface để cấu hình popover xuất hiện khi di chuột qua badge.'\n }\n ];\n\n features = [\n {\n id: 1,\n icon: '🔢',\n title: 'Định dạng số',\n description: 'Hiển thị số theo nhiều định dạng: thông thường, với tiền tố/hậu tố, hoặc viết tắt (K cho hàng nghìn).'\n },\n {\n id: 2,\n icon: '🎨',\n title: 'Trạng thái hiển thị',\n description: 'Chuyển đổi giữa trạng thái active và mặc định dựa trên nhu cầu của ứng dụng.'\n },\n {\n id: 3,\n icon: '💬',\n title: 'Hỗ trợ Tooltip',\n description: 'Thêm tooltip thông tin cho các badge với nội dung và vị trí tùy chỉnh.'\n },\n {\n id: 4,\n icon: '📏',\n title: 'Tùy biến linh hoạt',\n description: 'Tùy chỉnh giao diện với các lớp CSS và điều khiển margin.'\n }\n ];\n\n // Demo properties\n demoCount = 25;\n demoMaxCount = 99;\n demoActive = true;\n demoMode: TYPE_BADGE_MODE = 'x';\n demoModes: TYPE_BADGE_MODE[] = ['x', 'x+', '+x', 'k', '0x'];\n demoPopoverConfig: IPopoverOverlay = { content: 'Badge Tooltip' };\n demoUseMaxCount = true;\n\n // Methods for demo interaction\n incrementCount() {\n this.demoCount += 5;\n }\n\n decrementCount() {\n if (this.demoCount > 0) {\n this.demoCount -= 5;\n }\n }\n\n validateCount() {\n if (isNaN(this.demoCount) || this.demoCount < 0) {\n this.demoCount = 0;\n } else {\n this.demoCount = Math.floor(this.demoCount);\n }\n }\n\n validateMaxCount() {\n if (isNaN(this.demoMaxCount) || this.demoMaxCount < 1) {\n this.demoMaxCount = 99;\n } else {\n this.demoMaxCount = Math.floor(this.demoMaxCount);\n }\n }\n\n setLargeCount() {\n this.demoCount = 1250;\n }\n\n resetCount() {\n this.demoCount = 25;\n this.demoMaxCount = 99;\n }\n\n toggleActive() {\n this.demoActive = !this.demoActive;\n }\n\n toggleUseMaxCount() {\n this.demoUseMaxCount = !this.demoUseMaxCount;\n }\n\n changeMode(mode: TYPE_BADGE_MODE) {\n this.demoMode = mode;\n }\n\n copyToClipboard(text: string) {\n navigator.clipboard.writeText(text)\n .then(() => {\n console.log('Text copied to clipboard');\n })\n .catch((err) => {\n console.error('Could not copy text: ', err);\n });\n }\n} ","<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh hoạt để hiển thị các chỉ số số học</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Giới thiệu</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> là một component\n Angular linh hoạt để hiển thị các chỉ số số học theo nhiều định dạng khác nhau. Nó hoàn hảo cho việc hiển thị số\n lượng thông báo, chỉ báo trạng thái và bất kỳ ngữ cảnh nào mà bạn cần hiển thị một giá trị số học nổi bật trực\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Cài đặt</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Yêu cầu</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 trở lên</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 trở lên</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">Để cài đặt thư viện, sử dụng npm hoặc yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao chép\n </button>\n </div>\n\n <p class=\"mb-4\">Hoặc với yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao chép\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Trực tiếp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge Tương tác</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">Số lượng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Giới hạn tối đa:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuyển đổi Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"Đặt số lớn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"Đặt lại\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Chế độ hiển thị:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">Kết quả</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">Mặc định:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">Với Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">Số lượng rất lớn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Cách sử dụng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Sử dụng cơ bản</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Với các chế độ hiển thị khác nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Tiêu chuẩn: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n Với dấu cộng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n Định dạng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">Kết quả</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Tiêu chuẩn:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n Với dấu cộng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n Định dạng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Với Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nhắn mới' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Tài liệu API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Đầu vào (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Tên</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Kiểu</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mặc định\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Mô tả\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Tính năng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"libs-ui-components-badge.mjs","sources":["../../../../../libs-ui/components/badge/src/badge.component.ts","../../../../../libs-ui/components/badge/src/badge.component.html","../../../../../libs-ui/components/badge/src/libs-ui-components-badge.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, OnDestroy, computed, input } from '@angular/core';\nimport { IPopoverOverlay, LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { viewDataNumberByLanguage } from '@libs-ui/utils';\nimport { Subject } from 'rxjs';\nimport { TYPE_BADGE_MODE } from './interfaces/mode.type';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-badge',\n templateUrl: './badge.component.html',\n styleUrls: ['./badge.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [LibsUiComponentsPopoverComponent]\n})\nexport class LibsUiComponentsBadgeComponent implements OnDestroy {\n // #region PROPERTY\n protected countDisplay = computed(this.countDisplayComputed.bind(this));\n\n private onDestroy = new Subject<void>();\n\n // #region INPUT\n readonly popoverConfig = input<IPopoverOverlay>();\n readonly active = input<boolean>();\n readonly count = input<number, number>(0, { transform: (value) => value ?? 0 });\n readonly mode = input<TYPE_BADGE_MODE>(); // không truyền mặc định các giá trị < 10 sẽ có số 0 ở đầu\n readonly maxCount = input<number, number>(Number.MAX_SAFE_INTEGER, { transform: (value) => value ?? Number.MAX_SAFE_INTEGER }); // nếu count > maxCount sẽ xem xét mode để hiển thị.\n readonly ignoreMarginDefault = input<boolean>();\n readonly classCircle = input<string, string>('libs-ui-font-h6r', { transform: (value) => value ?? 'libs-ui-font-h6r' });\n readonly ignoreStopPropagationEvent = input<boolean, boolean>(true, { transform: (value) => value ?? true });\n\n /* COMPUTED PROPERTIES FUNCTION */\n private countDisplayComputed() {\n if (this.mode() === 'k' && this.count() > 999) {\n const count = this.count() / 1000;\n\n if (count > 1000) {\n return `${viewDataNumberByLanguage(count / 1000, true, 1, false, true)}M`;\n }\n\n return `${viewDataNumberByLanguage(count, true, 1, false, true)}K`;\n }\n\n if (this.mode() === 'x+' && this.count() > this.maxCount()) {\n const countFormat = viewDataNumberByLanguage(this.maxCount(), true);\n\n return `${countFormat}+`;\n }\n\n if (!this.count()) {\n switch (this.mode()) {\n case '+x':\n return '+00';\n\n case 'x+':\n return '00';\n\n case 'x':\n return '0';\n\n case '0x':\n return '00';\n }\n }\n\n if (this.count() < 10) {\n switch (this.mode()) {\n case '+x':\n return `+0${this.count()}`;\n\n case 'x+':\n return `0${this.count()}`;\n\n case 'x':\n return `${this.count()}`;\n\n case '0x':\n return `0${this.count()}`;\n }\n }\n const countFormat = viewDataNumberByLanguage(this.count(), true);\n\n return this.mode() === '+x' ? `+${countFormat}` : `${countFormat}`;\n }\n\n ngOnDestroy(): void {\n this.onDestroy.next();\n this.onDestroy.complete();\n }\n}\n","<span class=\"libs-ui-badge {{ classCircle () }}\"\n [class.libs-ui-badge-active]=\"active()\"\n [class.ml-0]=\"ignoreMarginDefault()\"\n LibsUiComponentsPopoverDirective\n [type]=\"popoverConfig() ? 'other':'text'\"\n [config]=\"popoverConfig() ?? {content:countDisplay()}\"\n [ignoreStopPropagationEvent]=\"ignoreStopPropagationEvent()\">\n {{ countDisplay() }}\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/index.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  export * from './badge.component';
2
2
  export * from './interfaces';
3
- export * from './demo/badge-demo.component';
package/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@libs-ui/components-badge",
3
- "version": "0.2.279",
3
+ "version": "0.2.280",
4
4
  "peerDependencies": {
5
5
  "@angular/core": "^18.2.0",
6
- "@libs-ui/components-popover": "^0.2.279",
7
- "@libs-ui/utils": "^0.2.279",
6
+ "@libs-ui/components-popover": "^0.2.280",
7
+ "@libs-ui/utils": "^0.2.280",
8
8
  "rxjs": "~7.8.0"
9
9
  },
10
10
  "sideEffects": false,
package/demo/badge-demo.component.d.ts DELETED
@@ -1,41 +0,0 @@
1
- import { IPopoverOverlay } from '@libs-ui/components-popover';
2
- import { TYPE_BADGE_MODE } from '../interfaces/mode.type';
3
- import * as i0 from "@angular/core";
4
- export declare class LibsUiComponentsBadgeDemoComponent {
5
- inputsDoc: {
6
- name: string;
7
- type: string;
8
- default: string;
9
- description: string;
10
- }[];
11
- interfacesDoc: {
12
- name: string;
13
- code: string;
14
- description: string;
15
- }[];
16
- features: {
17
- id: number;
18
- icon: string;
19
- title: string;
20
- description: string;
21
- }[];
22
- demoCount: number;
23
- demoMaxCount: number;
24
- demoActive: boolean;
25
- demoMode: TYPE_BADGE_MODE;
26
- demoModes: TYPE_BADGE_MODE[];
27
- demoPopoverConfig: IPopoverOverlay;
28
- demoUseMaxCount: boolean;
29
- incrementCount(): void;
30
- decrementCount(): void;
31
- validateCount(): void;
32
- validateMaxCount(): void;
33
- setLargeCount(): void;
34
- resetCount(): void;
35
- toggleActive(): void;
36
- toggleUseMaxCount(): void;
37
- changeMode(mode: TYPE_BADGE_MODE): void;
38
- copyToClipboard(text: string): void;
39
- static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsBadgeDemoComponent, never>;
40
- static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsBadgeDemoComponent, "lib-badge-demo", never, {}, {}, never, never, true, never>;
41
- }
package/esm2022/demo/badge-demo.component.mjs DELETED
@@ -1,165 +0,0 @@
1
- import { Component } from '@angular/core';
2
- import { FormsModule } from '@angular/forms';
3
- import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
4
- import { LibsUiComponentsBadgeComponent } from '../badge.component';
5
- import * as i0 from "@angular/core";
6
- import * as i1 from "@angular/forms";
7
- export class LibsUiComponentsBadgeDemoComponent {
8
- inputsDoc = [
9
- {
10
- name: 'count',
11
- type: 'number',
12
- default: '0',
13
- description: 'Số cần hiển thị trong badge'
14
- },
15
- {
16
- name: 'mode',
17
- type: 'TYPE_BADGE_MODE',
18
- default: 'undefined',
19
- description: 'Chế độ hiển thị cho badge. Tùy chọn: x, x+, +x, k, 0x'
20
- },
21
- {
22
- name: 'active',
23
- type: 'boolean',
24
- default: 'undefined',
25
- description: 'Xác định badge có đang ở trạng thái active hay không'
26
- },
27
- {
28
- name: 'maxCount',
29
- type: 'number',
30
- default: 'Number.MAX_SAFE_INTEGER',
31
- description: 'Số tối đa để hiển thị trước khi áp dụng định dạng'
32
- },
33
- {
34
- name: 'popoverConfig',
35
- type: 'IPopoverOverlay',
36
- default: 'undefined',
37
- description: 'Cấu hình cho popover khi di chuột qua badge'
38
- },
39
- {
40
- name: 'ignoreMarginDefault',
41
- type: 'boolean',
42
- default: 'undefined',
43
- description: 'Có bỏ qua margin mặc định bên trái của badge hay không'
44
- },
45
- {
46
- name: 'classCircle',
47
- type: 'string',
48
- default: 'libs-ui-font-h6r',
49
- description: 'Lớp CSS để tạo kiểu cho vòng tròn badge'
50
- },
51
- {
52
- name: 'ignoreStopPropagationEvent',
53
- type: 'boolean',
54
- default: 'true',
55
- description: 'Có bỏ qua việc lan truyền sự kiện khi nhấp vào badge hay không'
56
- }
57
- ];
58
- interfacesDoc = [
59
- {
60
- name: 'TYPE_BADGE_MODE',
61
- code: "type TYPE_BADGE_MODE = 'x' | 'x+' | '+x' | 'k' | '0x';",
62
- description: 'Định nghĩa kiểu cho các chế độ hiển thị badge. Mỗi chế độ thay đổi cách hiển thị số.'
63
- },
64
- {
65
- name: 'IPopoverOverlay',
66
- code: "interface IPopoverOverlay {\n content: string | TemplateRef<any>;\n width?: string;\n position?: string;\n zIndex?: number;\n offset?: { x?: number; y?: number; };\n}",
67
- description: 'Interface để cấu hình popover xuất hiện khi di chuột qua badge.'
68
- }
69
- ];
70
- features = [
71
- {
72
- id: 1,
73
- icon: '🔢',
74
- title: 'Định dạng số',
75
- description: 'Hiển thị số theo nhiều định dạng: thông thường, với tiền tố/hậu tố, hoặc viết tắt (K cho hàng nghìn).'
76
- },
77
- {
78
- id: 2,
79
- icon: '🎨',
80
- title: 'Trạng thái hiển thị',
81
- description: 'Chuyển đổi giữa trạng thái active và mặc định dựa trên nhu cầu của ứng dụng.'
82
- },
83
- {
84
- id: 3,
85
- icon: '💬',
86
- title: 'Hỗ trợ Tooltip',
87
- description: 'Thêm tooltip thông tin cho các badge với nội dung và vị trí tùy chỉnh.'
88
- },
89
- {
90
- id: 4,
91
- icon: '📏',
92
- title: 'Tùy biến linh hoạt',
93
- description: 'Tùy chỉnh giao diện với các lớp CSS và điều khiển margin.'
94
- }
95
- ];
96
- // Demo properties
97
- demoCount = 25;
98
- demoMaxCount = 99;
99
- demoActive = true;
100
- demoMode = 'x';
101
- demoModes = ['x', 'x+', '+x', 'k', '0x'];
102
- demoPopoverConfig = { content: 'Badge Tooltip' };
103
- demoUseMaxCount = true;
104
- // Methods for demo interaction
105
- incrementCount() {
106
- this.demoCount += 5;
107
- }
108
- decrementCount() {
109
- if (this.demoCount > 0) {
110
- this.demoCount -= 5;
111
- }
112
- }
113
- validateCount() {
114
- if (isNaN(this.demoCount) || this.demoCount < 0) {
115
- this.demoCount = 0;
116
- }
117
- else {
118
- this.demoCount = Math.floor(this.demoCount);
119
- }
120
- }
121
- validateMaxCount() {
122
- if (isNaN(this.demoMaxCount) || this.demoMaxCount < 1) {
123
- this.demoMaxCount = 99;
124
- }
125
- else {
126
- this.demoMaxCount = Math.floor(this.demoMaxCount);
127
- }
128
- }
129
- setLargeCount() {
130
- this.demoCount = 1250;
131
- }
132
- resetCount() {
133
- this.demoCount = 25;
134
- this.demoMaxCount = 99;
135
- }
136
- toggleActive() {
137
- this.demoActive = !this.demoActive;
138
- }
139
- toggleUseMaxCount() {
140
- this.demoUseMaxCount = !this.demoUseMaxCount;
141
- }
142
- changeMode(mode) {
143
- this.demoMode = mode;
144
- }
145
- copyToClipboard(text) {
146
- navigator.clipboard.writeText(text)
147
- .then(() => {
148
- console.log('Text copied to clipboard');
149
- })
150
- .catch((err) => {
151
- console.error('Could not copy text: ', err);
152
- });
153
- }
154
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsBadgeDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
155
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsBadgeDemoComponent, isStandalone: true, selector: "lib-badge-demo", ngImport: i0, template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> l\u00E0 m\u1ED9t component\n Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc theo nhi\u1EC1u \u0111\u1ECBnh d\u1EA1ng kh\u00E1c nhau. N\u00F3 ho\u00E0n h\u1EA3o cho vi\u1EC7c hi\u1EC3n th\u1ECB s\u1ED1\n l\u01B0\u1EE3ng th\u00F4ng b\u00E1o, ch\u1EC9 b\u00E1o tr\u1EA1ng th\u00E1i v\u00E0 b\u1EA5t k\u1EF3 ng\u1EEF c\u1EA3nh n\u00E0o m\u00E0 b\u1EA1n c\u1EA7n hi\u1EC3n th\u1ECB m\u1ED9t gi\u00E1 tr\u1ECB s\u1ED1 h\u1ECDc n\u1ED5i b\u1EADt tr\u1EF1c\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n\n <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge T\u01B0\u01A1ng t\u00E1c</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Gi\u1EDBi h\u1EA1n t\u1ED1i \u0111a:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuy\u1EC3n \u0111\u1ED5i Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t s\u1ED1 l\u1EDBn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t l\u1EA1i\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">M\u1EB7c \u0111\u1ECBnh:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">V\u1EDBi Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng r\u1EA5t l\u1EDBn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">S\u1EED d\u1EE5ng c\u01A1 b\u1EA3n</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi c\u00E1c ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB kh\u00E1c nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Ti\u00EAu chu\u1EA9n: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n V\u1EDBi d\u1EA5u c\u1ED9ng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n \u0110\u1ECBnh d\u1EA1ng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Ti\u00EAu chu\u1EA9n:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n V\u1EDBi d\u1EA5u c\u1ED9ng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n \u0110\u1ECBnh d\u1EA1ng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nh\u1EAFn m\u1EDBi' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0110\u1EA7u v\u00E0o (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }] });
156
- }
157
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsBadgeDemoComponent, decorators: [{
158
- type: Component,
159
- args: [{ selector: 'lib-badge-demo', standalone: true, imports: [
160
- FormsModule,
161
- LibsUiComponentsBadgeComponent,
162
- LibsUiComponentsButtonsButtonComponent
163
- ], template: "<div class=\"max-w-6xl mx-auto p-5 font-sans text-gray-800\">\n <header class=\"text-center py-10 bg-white rounded-lg mb-8 shadow-sm\">\n <h1 class=\"text-4xl font-bold text-gray-800 mb-2\">Demo Badge Component</h1>\n <p class=\"text-xl text-gray-500\">Component Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc</p>\n </header>\n\n <main>\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Gi\u1EDBi thi\u1EC7u</h2>\n <p>\n <code class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">&#64;libs-ui/components-badge</code> l\u00E0 m\u1ED9t component\n Angular linh ho\u1EA1t \u0111\u1EC3 hi\u1EC3n th\u1ECB c\u00E1c ch\u1EC9 s\u1ED1 s\u1ED1 h\u1ECDc theo nhi\u1EC1u \u0111\u1ECBnh d\u1EA1ng kh\u00E1c nhau. N\u00F3 ho\u00E0n h\u1EA3o cho vi\u1EC7c hi\u1EC3n th\u1ECB s\u1ED1\n l\u01B0\u1EE3ng th\u00F4ng b\u00E1o, ch\u1EC9 b\u00E1o tr\u1EA1ng th\u00E1i v\u00E0 b\u1EA5t k\u1EF3 ng\u1EEF c\u1EA3nh n\u00E0o m\u00E0 b\u1EA1n c\u1EA7n hi\u1EC3n th\u1ECB m\u1ED9t gi\u00E1 tr\u1ECB s\u1ED1 h\u1ECDc n\u1ED5i b\u1EADt tr\u1EF1c\n quan.\n </p>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E0i \u0111\u1EB7t</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-3\">Y\u00EAu c\u1EA7u</h3>\n <ul class=\"list-disc pl-5 space-y-2 text-gray-600\">\n <li><span class=\"font-semibold\">Angular</span>: 18.0.0 tr\u1EDF l\u00EAn</li>\n <li><span class=\"font-semibold\">Tailwind CSS</span>: 3.3.0 tr\u1EDF l\u00EAn</li>\n </ul>\n </div>\n\n <p class=\"mb-4\">\u0110\u1EC3 c\u00E0i \u0111\u1EB7t th\u01B0 vi\u1EC7n, s\u1EED d\u1EE5ng npm ho\u1EB7c yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>npm install &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('npm install @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n\n <p class=\"mb-4\">Ho\u1EB7c v\u1EDBi yarn:</p>\n\n <div class=\"flex items-center bg-gray-100 p-4 rounded-lg mb-6\">\n <pre class=\"flex-1 text-sm overflow-x-auto\"><code>yarn add &#64;libs-ui/components-badge</code></pre>\n <button class=\"ml-4 px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors\"\n (click)=\"copyToClipboard('yarn add @libs-ui/components-badge')\">\n Sao ch\u00E9p\n </button>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">Demo Tr\u1EF1c ti\u1EBFp</h2>\n\n <div class=\"mb-6\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Badge T\u01B0\u01A1ng t\u00E1c</h3>\n <div class=\"flex flex-wrap items-center gap-4 mb-6\">\n <div class=\"flex items-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng:</span>\n <div class=\"flex items-center bg-gray-100 overflow-hidden\">\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center border-solid border-gray-300 rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoCount\"\n (blur)=\"validateCount()\">\n </div>\n </div>\n\n <div class=\"flex items-center\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\"\n id=\"useMaxCount\"\n class=\"mr-1\"\n [(ngModel)]=\"demoUseMaxCount\"\n (change)=\"toggleUseMaxCount()\">\n <label for=\"useMaxCount\"\n class=\"mr-2\">Gi\u1EDBi h\u1EA1n t\u1ED1i \u0111a:</label>\n <input type=\"number\"\n class=\"w-[100px] px-2 py-1 text-center rounded-[4px] border-[1px] focus:outline-none\"\n [(ngModel)]=\"demoMaxCount\"\n (blur)=\"validateMaxCount()\"\n [disabled]=\"!demoUseMaxCount\">\n </div>\n </div>\n\n <libs_ui-components-buttons-button label=\"Chuy\u1EC3n \u0111\u1ED5i Active\"\n (click)=\"toggleActive()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t s\u1ED1 l\u1EDBn (1250)\"\n (click)=\"setLargeCount()\">\n </libs_ui-components-buttons-button>\n\n <libs_ui-components-buttons-button label=\"\u0110\u1EB7t l\u1EA1i\"\n (click)=\"resetCount()\">\n </libs_ui-components-buttons-button>\n </div>\n\n <div class=\"mb-6\">\n <h4 class=\"font-semibold mb-2\">Ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB:</h4>\n <div class=\"flex flex-wrap gap-2\">\n @for (mode of demoModes; track $index) {\n <button class=\"px-3 py-1 border rounded-md\"\n [class.bg-blue-100]=\"demoMode === mode\"\n (click)=\"changeMode(mode)\">\n {{ mode }}\n </button>\n }\n </div>\n </div>\n\n <div class=\"p-8 bg-gray-50 rounded-lg mb-6\">\n <h4 class=\"font-semibold mb-6 text-center\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"flex flex-col items-center justify-center gap-6\">\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">M\u1EB7c \u0111\u1ECBnh:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">V\u1EDBi Tooltip:</span>\n <libs_ui-components-badge [count]=\"demoCount\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\"\n [popoverConfig]=\"demoPopoverConfig\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center justify-center\">\n <span class=\"mr-2\">S\u1ED1 l\u01B0\u1EE3ng r\u1EA5t l\u1EDBn (9999):</span>\n <libs_ui-components-badge [count]=\"demoCount*1000\"\n [mode]=\"demoMode\"\n [active]=\"demoActive\"\n [maxCount]=\"demoUseMaxCount ? demoMaxCount : 99\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">C\u00E1ch s\u1EED d\u1EE5ng</h2>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">S\u1EED d\u1EE5ng c\u01A1 b\u1EA3n</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"5\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './example.component.html'\n&#125;)\nexport class ExampleComponent &#123;&#125;</code></pre>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi c\u00E1c ch\u1EBF \u0111\u1ED9 hi\u1EC3n th\u1ECB kh\u00E1c nhau</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (modes-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;div class=\"flex gap-4 items-center\"&gt;\n &lt;div&gt;\n Ti\u00EAu chu\u1EA9n: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n V\u1EDBi d\u1EA5u c\u1ED9ng: &lt;libs_ui-components-badge\n [count]=\"25\"\n mode=\"x+\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n \n &lt;div&gt;\n \u0110\u1ECBnh d\u1EA1ng K: &lt;libs_ui-components-badge\n [count]=\"1500\"\n mode=\"k\"&gt;\n &lt;/libs_ui-components-badge&gt;\n &lt;/div&gt;\n&lt;/div&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">K\u1EBFt qu\u1EA3</h4>\n <div class=\"p-4 bg-gray-50 rounded-lg flex flex-col gap-4\">\n <div class=\"flex gap-4 items-center\">\n <div class=\"flex items-center\">\n Ti\u00EAu chu\u1EA9n:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n V\u1EDBi d\u1EA5u c\u1ED9ng:\n <libs_ui-components-badge [count]=\"25\"\n mode=\"x+\">\n </libs_ui-components-badge>\n </div>\n\n <div class=\"flex items-center\">\n \u0110\u1ECBnh d\u1EA1ng K:\n <libs_ui-components-badge [count]=\"1500\"\n mode=\"k\">\n </libs_ui-components-badge>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"mb-8\">\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">V\u1EDBi Tooltip</h3>\n\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6 mb-4\">\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">HTML (tooltip-example.component.html)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>&lt;libs_ui-components-badge\n [count]=\"newMessages\"\n [popoverConfig]=\"&#123; content: newMessages + ' tin nh\u1EAFn m\u1EDBi' &#125;\"\n [active]=\"true\"&gt;\n&lt;/libs_ui-components-badge&gt;</code></pre>\n </div>\n\n <div>\n <h4 class=\"font-semibold mb-2 text-gray-700\">TypeScript (tooltip-example.component.ts)</h4>\n <pre class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm\"><code>import &#123; Component &#125; from '&#64;angular/core';\nimport &#123; LibsUiComponentsBadgeComponent &#125; from '&#64;libs-ui/components-badge';\n\n&#64;Component(&#123;\n selector: 'app-tooltip-example',\n standalone: true,\n imports: [LibsUiComponentsBadgeComponent],\n templateUrl: './tooltip-example.component.html'\n&#125;)\nexport class TooltipExampleComponent &#123;\n newMessages = 12;\n&#125;</code></pre>\n </div>\n </div>\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00E0i li\u1EC7u API</h2>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">\u0110\u1EA7u v\u00E0o (Inputs)</h3>\n <div class=\"overflow-x-auto mb-8\">\n <table class=\"min-w-full bg-white border border-gray-200\">\n <thead>\n <tr>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">T\u00EAn</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">Ki\u1EC3u</th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u1EB7c \u0111\u1ECBnh\n </th>\n <th class=\"py-3 px-4 border-b border-gray-200 bg-gray-100 text-left font-semibold text-gray-700\">M\u00F4 t\u1EA3\n </th>\n </tr>\n </thead>\n <tbody>\n @for (input of inputsDoc; track input.name) {\n <tr>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.name }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\"><code\n class=\"text-sm bg-gray-100 px-1.5 py-0.5 rounded\">{{ input.type }}</code></td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.default }}</td>\n <td class=\"py-2 px-4 border-b border-gray-200\">{{ input.description }}</td>\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <h3 class=\"text-xl font-semibold text-gray-700 mb-4\">Interfaces</h3>\n <div class=\"space-y-6\">\n @for (interfaceItem of interfacesDoc; track interfaceItem.name) {\n <div class=\"bg-gray-50 p-6 rounded-lg\">\n <h4 class=\"text-lg font-semibold text-gray-700 mb-3\">{{ interfaceItem.name }}</h4>\n <pre\n class=\"bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm mb-3\"><code>{{ interfaceItem.code }}</code></pre>\n <p class=\"text-gray-600\">{{ interfaceItem.description }}</p>\n </div>\n }\n </div>\n </section>\n\n <section class=\"bg-white rounded-lg p-8 mb-8 shadow-sm\">\n <h2 class=\"text-2xl font-bold text-gray-800 mb-5 pb-3 border-b border-gray-200\">T\u00EDnh n\u0103ng</h2>\n <ul class=\"space-y-6\">\n @for (feature of features; track feature.id) {\n <li class=\"flex items-start\">\n <span class=\"text-2xl text-blue-500\">{{ feature.icon }}</span>\n <div>\n <h3 class=\"text-lg font-semibold text-gray-700 mb-1\">{{ feature.title }}</h3>\n <p class=\"text-gray-600\">{{ feature.description }}</p>\n </div>\n </li>\n }\n </ul>\n </section>\n </main>\n</div>\n" }]
164
- }] });
165
- //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYmFkZ2UtZGVtby5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYmFkZ2Uvc3JjL2RlbW8vYmFkZ2UtZGVtby5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYmFkZ2Uvc3JjL2RlbW8vYmFkZ2UtZGVtby5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzFDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsc0NBQXNDLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUU1RixPQUFPLEVBQUUsOEJBQThCLEVBQUUsTUFBTSxvQkFBb0IsQ0FBQzs7O0FBYXBFLE1BQU0sT0FBTyxrQ0FBa0M7SUFDN0MsU0FBUyxHQUFHO1FBQ1Y7WUFDRSxJQUFJLEVBQUUsT0FBTztZQUNiLElBQUksRUFBRSxRQUFRO1lBQ2QsT0FBTyxFQUFFLEdBQUc7WUFDWixXQUFXLEVBQUUsNkJBQTZCO1NBQzNDO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsTUFBTTtZQUNaLElBQUksRUFBRSxpQkFBaUI7WUFDdkIsT0FBTyxFQUFFLFdBQVc7WUFDcEIsV0FBVyxFQUFFLHVEQUF1RDtTQUNyRTtRQUNEO1lBQ0UsSUFBSSxFQUFFLFFBQVE7WUFDZCxJQUFJLEVBQUUsU0FBUztZQUNmLE9BQU8sRUFBRSxXQUFXO1lBQ3BCLFdBQVcsRUFBRSxzREFBc0Q7U0FDcEU7UUFDRDtZQUNFLElBQUksRUFBRSxVQUFVO1lBQ2hCLElBQUksRUFBRSxRQUFRO1lBQ2QsT0FBTyxFQUFFLHlCQUF5QjtZQUNsQyxXQUFXLEVBQUUsbURBQW1EO1NBQ2pFO1FBQ0Q7WUFDRSxJQUFJLEVBQUUsZUFBZTtZQUNyQixJQUFJLEVBQUUsaUJBQWlCO1lB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cG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRm9ybXNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtYnV0dG9ucy1idXR0b24nO1xuaW1wb3J0IHsgSVBvcG92ZXJPdmVybGF5IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1wb3BvdmVyJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNCYWRnZUNvbXBvbmVudCB9IGZyb20gJy4uL2JhZGdlLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBUWVBFX0JBREdFX01PREUgfSBmcm9tICcuLi9pbnRlcmZhY2VzL21vZGUudHlwZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi1iYWRnZS1kZW1vJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2JhZGdlLWRlbW8uY29tcG9uZW50Lmh0bWwnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbXG4gICAgRm9ybXNNb2R1bGUsXG4gICAgTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50LFxuICAgIExpYnNVaUNvbXBvbmVudHNCdXR0b25zQnV0dG9uQ29tcG9uZW50XG4gIF1cbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0JhZGdlRGVtb0NvbXBvbmVudCB7XG4gIGlucHV0c0RvYyA9IFtcbiAgICB7XG4gICAgICBuYW1lOiAnY291bnQnLFxuICAgICAgdHlwZTogJ251bWJlcicsXG4gICAgICBkZWZhdWx0OiAnMCcsXG4gICAgICBkZXNjcmlwdGlvbjogJ1Phu5EgY+G6p24gaGnhu4NuIHRo4buLIHRyb25nIGJhZGdlJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ21vZGUnLFxuICAgICAgdHlwZTogJ1RZUEVfQkFER0VfTU9ERScsXG4gICAgICBkZWZhdWx0OiAndW5kZWZpbmVkJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnQ2jhur8gxJHhu5kgaGnhu4NuIHRo4buLIGNobyBiYWRnZS4gVMO5eSBjaOG7jW46IHgsIHgrLCAreCwgaywgMHgnXG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiAnYWN0aXZlJyxcbiAgICAgIHR5cGU6ICdib29sZWFuJyxcbiAgICAgIGRlZmF1bHQ6ICd1bmRlZmluZWQnLFxuICAgICAgZGVzY3JpcHRpb246ICdYw6FjIMSR4buLbmggYmFkZ2UgY8OzIMSRYW5nIOG7nyB0cuG6oW5nIHRow6FpIGFjdGl2ZSBoYXkga2jDtG5nJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ21heENvdW50JyxcbiAgICAgIHR5cGU6ICdudW1iZXInLFxuICAgICAgZGVmYXVsdDogJ051bWJlci5NQVhfU0FGRV9JTlRFR0VSJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnU+G7kSB04buRaSDEkWEgxJHhu4MgaGnhu4NuIHRo4buLIHRyxrDhu5tjIGtoaSDDoXAgZOG7pW5nIMSR4buLbmggZOG6oW5nJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ3BvcG92ZXJDb25maWcnLFxuICAgICAgdHlwZTogJ0lQb3BvdmVyT3ZlcmxheScsXG4gICAgICBkZWZhdWx0OiAndW5kZWZpbmVkJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnQ+G6pXUgaMOsbmggY2hvIHBvcG92ZXIga2hpIGRpIGNodeG7mXQgcXVhIGJhZGdlJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ2lnbm9yZU1hcmdpbkRlZmF1bHQnLFxuICAgICAgdHlwZTogJ2Jvb2xlYW4nLFxuICAgICAgZGVmYXVsdDogJ3VuZGVmaW5lZCcsXG4gICAgICBkZXNjcmlwdGlvbjogJ0PDsyBi4buPIHF1YSBtYXJnaW4gbeG6t2MgxJHhu4tuaCBiw6puIHRyw6FpIGPhu6dhIGJhZGdlIGhheSBraMO0bmcnXG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiAnY2xhc3NDaXJjbGUnLFxuICAgICAgdHlwZTogJ3N0cmluZycsXG4gICAgICBkZWZhdWx0OiAnbGlicy11aS1mb250LWg2cicsXG4gICAgICBkZXNjcmlwdGlvbjogJ0zhu5twIENTUyDEkeG7gyB04bqhbyBraeG7g3UgY2hvIHbDsm5nIHRyw7JuIGJhZGdlJ1xuICAgIH0sXG4gICAge1xuICAgICAgbmFtZTogJ2lnbm9yZVN0b3BQcm9wYWdhdGlvbkV2ZW50JyxcbiAgICAgIHR5cGU6ICdib29sZWFuJyxcbiAgICAgIGRlZmF1bHQ6ICd0cnVlJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnQ8OzIGLhu48gcXVhIHZp4buHYyBsYW4gdHJ1eeG7gW4gc+G7sSBraeG7h24ga2hpIG5o4bqlcCB2w6BvIGJhZGdlIGhheSBraMO0bmcnXG4gICAgfVxuICBdO1xuXG4gIGludGVyZmFjZXNEb2MgPSBbXG4gICAge1xuICAgICAgbmFtZTogJ1RZUEVfQkFER0VfTU9ERScsXG4gICAgICBjb2RlOiBcInR5cGUgVFlQRV9CQURHRV9NT0RFID0gJ3gnIHwgJ3grJyB8ICcreCcgfCAnaycgfCAnMHgnO1wiLFxuICAgICAgZGVzY3JpcHRpb246ICfEkOG7i25oIG5naMSpYSBraeG7g3UgY2hvIGPDoWMgY2jhur8gxJHhu5kgaGnhu4NuIHRo4buLIGJhZGdlLiBN4buXaSBjaOG6vyDEkeG7mSB0aGF5IMSR4buVaSBjw6FjaCBoaeG7g24gdGjhu4sgc+G7kS4nXG4gICAgfSxcbiAgICB7XG4gICAgICBuYW1lOiAnSVBvcG92ZXJPdmVybGF5JyxcbiAgICAgIGNvZGU6IFwiaW50ZXJmYWNlIElQb3BvdmVyT3ZlcmxheSB7XFxuICBjb250ZW50OiBzdHJpbmcgfCBUZW1wbGF0ZVJlZjxhbnk+O1xcbiAgd2lkdGg/OiBzdHJpbmc7XFxuICBwb3NpdGlvbj86IHN0cmluZztcXG4gIHpJbmRleD86IG51bWJlcjtcXG4gIG9mZnNldD86IHsgeD86IG51bWJlcjsgeT86IG51bWJlcjsgfTtcXG59XCIsXG4gICAgICBkZXNjcmlwdGlvbjogJ0ludGVyZmFjZSDEkeG7gyBj4bqldSBow6xuaCBwb3BvdmVyIHh14bqldCBoaeG7h24ga2hpIGRpIGNodeG7mXQgcXVhIGJhZGdlLidcbiAgICB9XG4gIF07XG5cbiAgZmVhdHVyZXMgPSBbXG4gICAge1xuICAgICAgaWQ6IDEsXG4gICAgICBpY29uOiAn8J+UoicsXG4gICAgICB0aXRsZTogJ8SQ4buLbmggZOG6oW5nIHPhu5EnLFxuICAgICAgZGVzY3JpcHRpb246ICdIaeG7g24gdGjhu4sgc+G7kSB0aGVvIG5oaeG7gXUgxJHhu4tuaCBk4bqhbmc6IHRow7RuZyB0aMaw4budbmcsIHbhu5tpIHRp4buBbiB04buRL2jhuq11IHThu5EsIGhv4bq3YyB2aeG6v3QgdOG6r3QgKEsgY2hvIGjDoG5nIG5naMOsbikuJ1xuICAgIH0sXG4gICAge1xuICAgICAgaWQ6IDIsXG4gICAgICBpY29uOiAn8J+OqCcsXG4gICAgICB0aXRsZTogJ1Ry4bqhbmcgdGjDoWkgaGnhu4NuIHRo4buLJyxcbiAgICAgIGRlc2NyaXB0aW9uOiAnQ2h1eeG7g24gxJHhu5VpIGdp4buvYSB0cuG6oW5nIHRow6FpIGFjdGl2ZSB2w6AgbeG6t2MgxJHhu4tuaCBk4buxYSB0csOqbiBuaHUgY+G6p3UgY+G7p2Eg4bupbmcgZOG7pW5nLidcbiAgICB9LFxuICAgIHtcbiAgICAgIGlkOiAzLFxuICAgICAgaWNvbjogJ/CfkqwnLFxuICAgICAgdGl0bGU6ICdI4buXIHRy4bujIFRvb2x0aXAnLFxuICAgICAgZGVzY3JpcHRpb246ICdUaMOqbSB0b29sdGlwIHRow7RuZyB0aW4gY2hvIGPDoWMgYmFkZ2UgduG7m2kgbuG7mWkgZHVuZyB2w6AgduG7iyB0csOtIHTDuXkgY2jhu4luaC4nXG4gICAgfSxcbiAgICB7XG4gICAgICBpZDogNCxcbiAgICAgIGljb246ICfwn5OPJyxcbiAgICAgIHRpdGxlOiAnVMO5eSBiaeG6v24gbGluaCBob+G6oXQnLFxuICAgICAgZGVzY3JpcHRpb246ICdUw7l5IGNo4buJbmggZ2lhbyBkaeG7h24gduG7m2kgY8OhYyBs4bubcCBDU1MgdsOgIMSRaeG7gXUga2hp4buDbiBtYXJnaW4uJ1xuICAgIH1cbiAgXTtcblxuICAvLyBEZW1vIHByb3BlcnRpZXNcbiAgZGVtb0NvdW50ID0gMjU7XG4gIGRlbW9NYXhDb3VudCA9IDk5O1xuICBkZW1vQWN0aXZlID0gdHJ1ZTtcbiAgZGVtb01vZGU6IFRZUEVfQkFER0VfTU9ERSA9ICd4JztcbiAgZGVtb01vZGVzOiBUWVBFX0JBREdFX01PREVbXSA9IFsneCcsICd4KycsICcreCcsICdrJywgJzB4J107XG4gIGRlbW9Qb3BvdmVyQ29uZmlnOiBJUG9wb3Zlck92ZXJsYXkgPSB7IGNvbnRlbnQ6ICdCYWRnZSBUb29sdGlwJyB9O1xuICBkZW1vVXNlTWF4Q291bnQgPSB0cnVlO1xuXG4gIC8vIE1ldGhvZHMgZm9yIGRlbW8gaW50ZXJhY3Rpb25cbiAgaW5jcmVtZW50Q291bnQoKSB7XG4gICAgdGhpcy5kZW1vQ291bnQgKz0gNTtcbiAgfVxuXG4gIGRlY3JlbWVudENvdW50KCkge1xuICAgIGlmICh0aGlzLmRlbW9Db3VudCA+IDApIHtcbiAgICAgIHRoaXMuZGVtb0NvdW50IC09IDU7XG4gICAgfVxuICB9XG5cbiAgdmFsaWRhdGVDb3VudCgpIHtcbiAgICBpZiAoaXNOYU4odGhpcy5kZW1vQ291bnQpIHx8IHRoaXMuZGVtb0NvdW50IDwgMCkge1xuICAgICAgdGhpcy5kZW1vQ291bnQgPSAwO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmRlbW9Db3VudCA9IE1hdGguZmxvb3IodGhpcy5kZW1vQ291bnQpO1xuICAgIH1cbiAgfVxuXG4gIHZhbGlkYXRlTWF4Q291bnQoKSB7XG4gICAgaWYgKGlzTmFOKHRoaXMuZGVtb01heENvdW50KSB8fCB0aGlzLmRlbW9NYXhDb3VudCA8IDEpIHtcbiAgICAgIHRoaXMuZGVtb01heENvdW50ID0gOTk7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuZGVtb01heENvdW50ID0gTWF0aC5mbG9vcih0aGlzLmRlbW9NYXhDb3VudCk7XG4gICAgfVxuICB9XG5cbiAgc2V0TGFyZ2VDb3VudCgpIHtcbiAgICB0aGlzLmRlbW9Db3VudCA9IDEyNTA7XG4gIH1cblxuICByZXNldENvdW50KCkge1xuICAgIHRoaXMuZGVtb0NvdW50ID0gMjU7XG4gICAgdGhpcy5kZW1vTWF4Q291bnQgPSA5OTtcbiAgfVxuXG4gIHRvZ2dsZUFjdGl2ZSgpIHtcbiAgICB0aGlzLmRlbW9BY3RpdmUgPSAhdGhpcy5kZW1vQWN0aXZlO1xuICB9XG5cbiAgdG9nZ2xlVXNlTWF4Q291bnQoKSB7XG4gICAgdGhpcy5kZW1vVXNlTWF4Q291bnQgPSAhdGhpcy5kZW1vVXNlTWF4Q291bnQ7XG4gIH1cblxuICBjaGFuZ2VNb2RlKG1vZGU6IFRZUEVfQkFER0VfTU9ERSkge1xuICAgIHRoaXMuZGVtb01vZGUgPSBtb2RlO1xuICB9XG5cbiAgY29weVRvQ2xpcGJvYXJkKHRleHQ6IHN0cmluZykge1xuICAgIG5hdmlnYXRvci5jbGlwYm9hcmQud3JpdGVUZXh0KHRleHQpXG4gICAgICAudGhlbigoKSA9PiB7XG4gICAgICAgIGNvbnNvbGUubG9nKCdUZXh0IGNvcGllZCB0byBjbGlwYm9hcmQnKTtcbiAgICAgIH0pXG4gICAgICAuY2F0Y2goKGVycikgPT4ge1xuICAgICAgICBjb25zb2xlLmVycm9yKCdDb3VsZCBub3QgY29weSB0ZXh0OiAnLCBlcnIpO1xuICAgICAgfSk7XG4gIH1cbn0gIiwiPGRpdiBjbGFzcz1cIm1heC13LTZ4bCBteC1hdXRvIHAtNSBmb250LXNhbnMgdGV4dC1ncmF5LTgwMFwiPlxuICA8aGVhZGVyIGNsYXNzPVwidGV4dC1jZW50ZXIgcHktMTAgYmctd2hpdGUgcm91bmRlZC1sZyBtYi04IHNoYWRvdy1zbVwiPlxuICAgIDxoMSBjbGFzcz1cInRleHQtNHhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTJcIj5EZW1vIEJhZGdlIENvbXBvbmVudDwvaDE+XG4gICAgPHAgY2xhc3M9XCJ0ZXh0LXhsIHRleHQtZ3JheS01MDBcIj5Db21wb25lbnQgQW5ndWxhciBsaW5oIGhv4bqhdCDEkeG7gyBoaeG7g24gdGjhu4sgY8OhYyBjaOG7iSBz4buRIHPhu5EgaOG7jWM8L3A+XG4gIDwvaGVhZGVyPlxuXG4gIDxtYWluPlxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5HaeG7m2kgdGhp4buHdTwvaDI+XG4gICAgICA8cD5cbiAgICAgICAgPGNvZGUgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPiYjNjQ7bGlicy11aS9jb21wb25lbnRzLWJhZGdlPC9jb2RlPiBsw6AgbeG7mXQgY29tcG9uZW50XG4gICAgICAgIEFuZ3VsYXIgbGluaCBob+G6oXQgxJHhu4MgaGnhu4NuIHRo4buLIGPDoWMgY2jhu4kgc+G7kSBz4buRIGjhu41jIHRoZW8gbmhp4buBdSDEkeG7i25oIGThuqFuZyBraMOhYyBuaGF1LiBOw7MgaG/DoG4gaOG6o28gY2hvIHZp4buHYyBoaeG7g24gdGjhu4sgc+G7kVxuICAgICAgICBsxrDhu6NuZyB0aMO0bmcgYsOhbywgY2jhu4kgYsOhbyB0cuG6oW5nIHRow6FpIHbDoCBi4bqldCBr4buzIG5n4buvIGPhuqNuaCBuw6BvIG3DoCBi4bqhbiBj4bqnbiBoaeG7g24gdGjhu4sgbeG7mXQgZ2nDoSB0cuG7iyBz4buRIGjhu41jIG7hu5VpIGLhuq10IHRy4buxY1xuICAgICAgICBxdWFuLlxuICAgICAgPC9wPlxuICAgIDwvc2VjdGlvbj5cblxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Dw6BpIMSR4bq3dDwvaDI+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJtYi02XCI+XG4gICAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTNcIj5Zw6p1IGPhuqd1PC9oMz5cbiAgICAgICAgPHVsIGNsYXNzPVwibGlzdC1kaXNjIHBsLTUgc3BhY2UteS0yIHRleHQtZ3JheS02MDBcIj5cbiAgICAgICAgICA8bGk+PHNwYW4gY2xhc3M9XCJmb250LXNlbWlib2xkXCI+QW5ndWxhcjwvc3Bhbj46IDE4LjAuMCB0cuG7nyBsw6puPC9saT5cbiAgICAgICAgICA8bGk+PHNwYW4gY2xhc3M9XCJmb250LXNlbWlib2xkXCI+VGFpbHdpbmQgQ1NTPC9zcGFuPjogMy4zLjAgdHLhu58gbMOqbjwvbGk+XG4gICAgICAgIDwvdWw+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPHAgY2xhc3M9XCJtYi00XCI+xJDhu4MgY8OgaSDEkeG6t3QgdGjGsCB2aeG7h24sIHPhu60gZOG7pW5nIG5wbSBob+G6t2MgeWFybjo8L3A+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBtYi02XCI+XG4gICAgICAgIDxwcmUgY2xhc3M9XCJmbGV4LTEgdGV4dC1zbSBvdmVyZmxvdy14LWF1dG9cIj48Y29kZT5ucG0gaW5zdGFsbCAmIzY0O2xpYnMtdWkvY29tcG9uZW50cy1iYWRnZTwvY29kZT48L3ByZT5cbiAgICAgICAgPGJ1dHRvbiBjbGFzcz1cIm1sLTQgcHgtMyBweS0xIGJnLWJsdWUtNTAwIHRleHQtd2hpdGUgcm91bmRlZCBob3ZlcjpiZy1ibHVlLTYwMCB0cmFuc2l0aW9uLWNvbG9yc1wiXG4gICAgICAgICAgKGNsaWNrKT1cImNvcHlUb0NsaXBib2FyZCgnbnBtIGluc3RhbGwgQGxpYnMtdWkvY29tcG9uZW50cy1iYWRnZScpXCI+XG4gICAgICAgICAgU2FvIGNow6lwXG4gICAgICAgIDwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxwIGNsYXNzPVwibWItNFwiPkhv4bq3YyB24bubaSB5YXJuOjwvcD5cblxuICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIGJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG1iLTZcIj5cbiAgICAgICAgPHByZSBjbGFzcz1cImZsZXgtMSB0ZXh0LXNtIG92ZXJmbG93LXgtYXV0b1wiPjxjb2RlPnlhcm4gYWRkICYjNjQ7bGlicy11aS9jb21wb25lbnRzLWJhZGdlPC9jb2RlPjwvcHJlPlxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwibWwtNCBweC0zIHB5LTEgYmctYmx1ZS01MDAgdGV4dC13aGl0ZSByb3VuZGVkIGhvdmVyOmJnLWJsdWUtNjAwIHRyYW5zaXRpb24tY29sb3JzXCJcbiAgICAgICAgICAoY2xpY2spPVwiY29weVRvQ2xpcGJvYXJkKCd5YXJuIGFkZCBAbGlicy11aS9jb21wb25lbnRzLWJhZGdlJylcIj5cbiAgICAgICAgICBTYW8gY2jDqXBcbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG5cbiAgICA8c2VjdGlvbiBjbGFzcz1cImJnLXdoaXRlIHJvdW5kZWQtbGcgcC04IG1iLTggc2hhZG93LXNtXCI+XG4gICAgICA8aDIgY2xhc3M9XCJ0ZXh0LTJ4bCBmb250LWJvbGQgdGV4dC1ncmF5LTgwMCBtYi01IHBiLTMgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+RGVtbyBUcuG7sWMgdGnhur9wPC9oMj5cblxuICAgICAgPGRpdiBjbGFzcz1cIm1iLTZcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPkJhZGdlIFTGsMahbmcgdMOhYzwvaDM+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGZsZXgtd3JhcCBpdGVtcy1jZW50ZXIgZ2FwLTQgbWItNlwiPlxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJtci0yXCI+U+G7kSBsxrDhu6NuZzo8L3NwYW4+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIgYmctZ3JheS0xMDAgIG92ZXJmbG93LWhpZGRlblwiPlxuICAgICAgICAgICAgICA8aW5wdXQgdHlwZT1cIm51bWJlclwiXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJ3LVsxMDBweF0gcHgtMiBweS0xIHRleHQtY2VudGVyIGJvcmRlci1zb2xpZCBib3JkZXItZ3JheS0zMDAgcm91bmRlZC1bNHB4XSBib3JkZXItWzFweF0gZm9jdXM6b3V0bGluZS1ub25lXCJcbiAgICAgICAgICAgICAgICBbKG5nTW9kZWwpXT1cImRlbW9Db3VudFwiXG4gICAgICAgICAgICAgICAgKGJsdXIpPVwidmFsaWRhdGVDb3VudCgpXCI+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyXCI+XG4gICAgICAgICAgICAgIDxpbnB1dCB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgICAgIGlkPVwidXNlTWF4Q291bnRcIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwibXItMVwiXG4gICAgICAgICAgICAgICAgWyhuZ01vZGVsKV09XCJkZW1vVXNlTWF4Q291bnRcIlxuICAgICAgICAgICAgICAgIChjaGFuZ2UpPVwidG9nZ2xlVXNlTWF4Q291bnQoKVwiPlxuICAgICAgICAgICAgICA8bGFiZWwgZm9yPVwidXNlTWF4Q291bnRcIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwibXItMlwiPkdp4bubaSBo4bqhbiB04buRaSDEkWE6PC9sYWJlbD5cbiAgICAgICAgICAgICAgPGlucHV0IHR5cGU9XCJudW1iZXJcIlxuICAgICAgICAgICAgICAgIGNsYXNzPVwidy1bMTAwcHhdIHB4LTIgcHktMSB0ZXh0LWNlbnRlciByb3VuZGVkLVs0cHhdIGJvcmRlci1bMXB4XSBmb2N1czpvdXRsaW5lLW5vbmVcIlxuICAgICAgICAgICAgICAgIFsobmdNb2RlbCldPVwiZGVtb01heENvdW50XCJcbiAgICAgICAgICAgICAgICAoYmx1cik9XCJ2YWxpZGF0ZU1heENvdW50KClcIlxuICAgICAgICAgICAgICAgIFtkaXNhYmxlZF09XCIhZGVtb1VzZU1heENvdW50XCI+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b24gbGFiZWw9XCJDaHV54buDbiDEkeG7lWkgQWN0aXZlXCJcbiAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVBY3RpdmUoKVwiPlxuICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uPlxuXG4gICAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1idXR0b25zLWJ1dHRvbiBsYWJlbD1cIsSQ4bq3dCBz4buRIGzhu5tuICgxMjUwKVwiXG4gICAgICAgICAgICAoY2xpY2spPVwic2V0TGFyZ2VDb3VudCgpXCI+XG4gICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b24+XG5cbiAgICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uIGxhYmVsPVwixJDhurd0IGzhuqFpXCJcbiAgICAgICAgICAgIChjbGljayk9XCJyZXNldENvdW50KClcIj5cbiAgICAgICAgICA8L2xpYnNfdWktY29tcG9uZW50cy1idXR0b25zLWJ1dHRvbj5cbiAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cIm1iLTZcIj5cbiAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTJcIj5DaOG6vyDEkeG7mSBoaeG7g24gdGjhu4s6PC9oND5cbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBmbGV4LXdyYXAgZ2FwLTJcIj5cbiAgICAgICAgICAgIEBmb3IgKG1vZGUgb2YgZGVtb01vZGVzOyB0cmFjayAkaW5kZXgpIHtcbiAgICAgICAgICAgICAgPGJ1dHRvbiBjbGFzcz1cInB4LTMgcHktMSBib3JkZXIgcm91bmRlZC1tZFwiXG4gICAgICAgICAgICAgICAgW2NsYXNzLmJnLWJsdWUtMTAwXT1cImRlbW9Nb2RlID09PSBtb2RlXCJcbiAgICAgICAgICAgICAgICAoY2xpY2spPVwiY2hhbmdlTW9kZShtb2RlKVwiPlxuICAgICAgICAgICAgICAgIHt7IG1vZGUgfX1cbiAgICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgICAgICB9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZGl2PlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJwLTggYmctZ3JheS01MCByb3VuZGVkLWxnIG1iLTZcIj5cbiAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTYgdGV4dC1jZW50ZXJcIj5L4bq/dCBxdeG6ozwvaDQ+XG4gICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggZmxleC1jb2wgaXRlbXMtY2VudGVyIGp1c3RpZnktY2VudGVyIGdhcC02XCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1jZW50ZXJcIj5cbiAgICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJtci0yXCI+TeG6t2MgxJHhu4tuaDo8L3NwYW4+XG4gICAgICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UgW2NvdW50XT1cImRlbW9Db3VudFwiXG4gICAgICAgICAgICAgICAgW21vZGVdPVwiZGVtb01vZGVcIlxuICAgICAgICAgICAgICAgIFthY3RpdmVdPVwiZGVtb0FjdGl2ZVwiXG4gICAgICAgICAgICAgICAgW21heENvdW50XT1cImRlbW9Vc2VNYXhDb3VudCA/IGRlbW9NYXhDb3VudCA6IDk5XCI+XG4gICAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJhZGdlPlxuICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlclwiPlxuICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm1yLTJcIj5W4bubaSBUb29sdGlwOjwvc3Bhbj5cbiAgICAgICAgICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1iYWRnZSBbY291bnRdPVwiZGVtb0NvdW50XCJcbiAgICAgICAgICAgICAgICBbbW9kZV09XCJkZW1vTW9kZVwiXG4gICAgICAgICAgICAgICAgW2FjdGl2ZV09XCJkZW1vQWN0aXZlXCJcbiAgICAgICAgICAgICAgICBbbWF4Q291bnRdPVwiZGVtb1VzZU1heENvdW50ID8gZGVtb01heENvdW50IDogOTlcIlxuICAgICAgICAgICAgICAgIFtwb3BvdmVyQ29uZmlnXT1cImRlbW9Qb3BvdmVyQ29uZmlnXCI+XG4gICAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJhZGdlPlxuICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlciBqdXN0aWZ5LWNlbnRlclwiPlxuICAgICAgICAgICAgICA8c3BhbiBjbGFzcz1cIm1yLTJcIj5T4buRIGzGsOG7o25nIHLhuqV0IGzhu5tuICg5OTk5KTo8L3NwYW4+XG4gICAgICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UgW2NvdW50XT1cImRlbW9Db3VudCoxMDAwXCJcbiAgICAgICAgICAgICAgICBbbW9kZV09XCJkZW1vTW9kZVwiXG4gICAgICAgICAgICAgICAgW2FjdGl2ZV09XCJkZW1vQWN0aXZlXCJcbiAgICAgICAgICAgICAgICBbbWF4Q291bnRdPVwiZGVtb1VzZU1heENvdW50ID8gZGVtb01heENvdW50IDogOTlcIj5cbiAgICAgICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYmFkZ2U+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG5cbiAgICA8c2VjdGlvbiBjbGFzcz1cImJnLXdoaXRlIHJvdW5kZWQtbGcgcC04IG1iLTggc2hhZG93LXNtXCI+XG4gICAgICA8aDIgY2xhc3M9XCJ0ZXh0LTJ4bCBmb250LWJvbGQgdGV4dC1ncmF5LTgwMCBtYi01IHBiLTMgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+Q8OhY2ggc+G7rSBk4bulbmc8L2gyPlxuXG4gICAgICA8ZGl2IGNsYXNzPVwibWItOFwiPlxuICAgICAgICA8aDMgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMCBtYi00XCI+U+G7rSBk4bulbmcgY8ahIGLhuqNuPC9oMz5cblxuICAgICAgICA8ZGl2IGNsYXNzPVwiZ3JpZCBncmlkLWNvbHMtMSBtZDpncmlkLWNvbHMtMiBnYXAtNiBtYi00XCI+XG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+SFRNTCAoZXhhbXBsZS5jb21wb25lbnQuaHRtbCk8L2g0PlxuICAgICAgICAgICAgPHByZSBjbGFzcz1cImJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG92ZXJmbG93LXgtYXV0byB0ZXh0LXNtXCI+PGNvZGU+Jmx0O2xpYnNfdWktY29tcG9uZW50cy1iYWRnZVxuICBbY291bnRdPVwiNVwiJmd0O1xuJmx0Oy9saWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UmZ3Q7PC9jb2RlPjwvcHJlPlxuICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+VHlwZVNjcmlwdCAoZXhhbXBsZS5jb21wb25lbnQudHMpPC9oND5cbiAgICAgICAgICAgIDxwcmUgY2xhc3M9XCJiZy1ncmF5LTEwMCBwLTQgcm91bmRlZC1sZyBvdmVyZmxvdy14LWF1dG8gdGV4dC1zbVwiPjxjb2RlPmltcG9ydCAmIzEyMzsgQ29tcG9uZW50ICYjMTI1OyBmcm9tICcmIzY0O2FuZ3VsYXIvY29yZSc7XG5pbXBvcnQgJiMxMjM7IExpYnNVaUNvbXBvbmVudHNCYWRnZUNvbXBvbmVudCAmIzEyNTsgZnJvbSAnJiM2NDtsaWJzLXVpL2NvbXBvbmVudHMtYmFkZ2UnO1xuXG4mIzY0O0NvbXBvbmVudCgmIzEyMztcbiAgc2VsZWN0b3I6ICdhcHAtZXhhbXBsZScsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtMaWJzVWlDb21wb25lbnRzQmFkZ2VDb21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vZXhhbXBsZS5jb21wb25lbnQuaHRtbCdcbiYjMTI1OylcbmV4cG9ydCBjbGFzcyBFeGFtcGxlQ29tcG9uZW50ICYjMTIzOyYjMTI1OzwvY29kZT48L3ByZT5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cblxuICAgICAgPGRpdiBjbGFzcz1cIm1iLThcIj5cbiAgICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPlbhu5tpIGPDoWMgY2jhur8gxJHhu5kgaGnhu4NuIHRo4buLIGtow6FjIG5oYXU8L2gzPlxuXG4gICAgICAgIDxkaXYgY2xhc3M9XCJncmlkIGdyaWQtY29scy0xIG1kOmdyaWQtY29scy0yIGdhcC02IG1iLTRcIj5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPGg0IGNsYXNzPVwiZm9udC1zZW1pYm9sZCBtYi0yIHRleHQtZ3JheS03MDBcIj5IVE1MIChtb2Rlcy1leGFtcGxlLmNvbXBvbmVudC5odG1sKTwvaDQ+XG4gICAgICAgICAgICA8cHJlIGNsYXNzPVwiYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgb3ZlcmZsb3cteC1hdXRvIHRleHQtc21cIj48Y29kZT4mbHQ7ZGl2IGNsYXNzPVwiZmxleCBnYXAtNCBpdGVtcy1jZW50ZXJcIiZndDtcbiAgJmx0O2RpdiZndDtcbiAgICBUacOqdSBjaHXhuqluOiAmbHQ7bGlic191aS1jb21wb25lbnRzLWJhZGdlXG4gICAgICBbY291bnRdPVwiMjVcIlxuICAgICAgbW9kZT1cInhcIiZndDtcbiAgICAmbHQ7L2xpYnNfdWktY29tcG9uZW50cy1iYWRnZSZndDtcbiAgJmx0Oy9kaXYmZ3Q7XG4gIFxuICAmbHQ7ZGl2Jmd0O1xuICAgIFbhu5tpIGThuqV1IGPhu5luZzogJmx0O2xpYnNfdWktY29tcG9uZW50cy1iYWRnZVxuICAgICAgW2NvdW50XT1cIjI1XCJcbiAgICAgIG1vZGU9XCJ4K1wiJmd0O1xuICAgICZsdDsvbGlic191aS1jb21wb25lbnRzLWJhZGdlJmd0O1xuICAmbHQ7L2RpdiZndDtcbiAgXG4gICZsdDtkaXYmZ3Q7XG4gICAgxJDhu4tuaCBk4bqhbmcgSzogJmx0O2xpYnNfdWktY29tcG9uZW50cy1iYWRnZVxuICAgICAgW2NvdW50XT1cIjE1MDBcIlxuICAgICAgbW9kZT1cImtcIiZndDtcbiAgICAmbHQ7L2xpYnNfdWktY29tcG9uZW50cy1iYWRnZSZndDtcbiAgJmx0Oy9kaXYmZ3Q7XG4mbHQ7L2RpdiZndDs8L2NvZGU+PC9wcmU+XG4gICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICA8ZGl2PlxuICAgICAgICAgICAgPGg0IGNsYXNzPVwiZm9udC1zZW1pYm9sZCBtYi0yIHRleHQtZ3JheS03MDBcIj5L4bq/dCBxdeG6ozwvaDQ+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwicC00IGJnLWdyYXktNTAgcm91bmRlZC1sZyBmbGV4IGZsZXgtY29sIGdhcC00XCI+XG4gICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGdhcC00IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgICAgICAgVGnDqnUgY2h14bqpbjpcbiAgICAgICAgICAgICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UgW2NvdW50XT1cIjI1XCJcbiAgICAgICAgICAgICAgICAgICAgbW9kZT1cInhcIj5cbiAgICAgICAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJhZGdlPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyXCI+XG4gICAgICAgICAgICAgICAgICBW4bubaSBk4bqldSBj4buZbmc6XG4gICAgICAgICAgICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJhZGdlIFtjb3VudF09XCIyNVwiXG4gICAgICAgICAgICAgICAgICAgIG1vZGU9XCJ4K1wiPlxuICAgICAgICAgICAgICAgICAgPC9saWJzX3VpLWNvbXBvbmVudHMtYmFkZ2U+XG4gICAgICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgICAgICAgICAgIMSQ4buLbmggZOG6oW5nIEs6XG4gICAgICAgICAgICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJhZGdlIFtjb3VudF09XCIxNTAwXCJcbiAgICAgICAgICAgICAgICAgICAgbW9kZT1cImtcIj5cbiAgICAgICAgICAgICAgICAgIDwvbGlic191aS1jb21wb25lbnRzLWJhZGdlPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8ZGl2IGNsYXNzPVwibWItOFwiPlxuICAgICAgICA8aDMgY2xhc3M9XCJ0ZXh0LXhsIGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMCBtYi00XCI+VuG7m2kgVG9vbHRpcDwvaDM+XG5cbiAgICAgICAgPGRpdiBjbGFzcz1cImdyaWQgZ3JpZC1jb2xzLTEgbWQ6Z3JpZC1jb2xzLTIgZ2FwLTYgbWItNFwiPlxuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8aDQgY2xhc3M9XCJmb250LXNlbWlib2xkIG1iLTIgdGV4dC1ncmF5LTcwMFwiPkhUTUwgKHRvb2x0aXAtZXhhbXBsZS5jb21wb25lbnQuaHRtbCk8L2g0PlxuICAgICAgICAgICAgPHByZSBjbGFzcz1cImJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG92ZXJmbG93LXgtYXV0byB0ZXh0LXNtXCI+PGNvZGU+Jmx0O2xpYnNfdWktY29tcG9uZW50cy1iYWRnZVxuICBbY291bnRdPVwibmV3TWVzc2FnZXNcIlxuICBbcG9wb3ZlckNvbmZpZ109XCImIzEyMzsgY29udGVudDogbmV3TWVzc2FnZXMgKyAnIHRpbiBuaOG6r24gbeG7m2knICYjMTI1O1wiXG4gIFthY3RpdmVdPVwidHJ1ZVwiJmd0O1xuJmx0Oy9saWJzX3VpLWNvbXBvbmVudHMtYmFkZ2UmZ3Q7PC9jb2RlPjwvcHJlPlxuICAgICAgICAgIDwvZGl2PlxuXG4gICAgICAgICAgPGRpdj5cbiAgICAgICAgICAgIDxoNCBjbGFzcz1cImZvbnQtc2VtaWJvbGQgbWItMiB0ZXh0LWdyYXktNzAwXCI+VHlwZVNjcmlwdCAodG9vbHRpcC1leGFtcGxlLmNvbXBvbmVudC50cyk8L2g0PlxuICAgICAgICAgICAgPHByZSBjbGFzcz1cImJnLWdyYXktMTAwIHAtNCByb3VuZGVkLWxnIG92ZXJmbG93LXgtYXV0byB0ZXh0LXNtXCI+PGNvZGU+aW1wb3J0ICYjMTIzOyBDb21wb25lbnQgJiMxMjU7IGZyb20gJyYjNjQ7YW5ndWxhci9jb3JlJztcbmltcG9ydCAmIzEyMzsgTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50ICYjMTI1OyBmcm9tICcmIzY0O2xpYnMtdWkvY29tcG9uZW50cy1iYWRnZSc7XG5cbiYjNjQ7Q29tcG9uZW50KCYjMTIzO1xuICBzZWxlY3RvcjogJ2FwcC10b29sdGlwLWV4YW1wbGUnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50XSxcbiAgdGVtcGxhdGVVcmw6ICcuL3Rvb2x0aXAtZXhhbXBsZS5jb21wb25lbnQuaHRtbCdcbiYjMTI1OylcbmV4cG9ydCBjbGFzcyBUb29sdGlwRXhhbXBsZUNvbXBvbmVudCAmIzEyMztcbiAgbmV3TWVzc2FnZXMgPSAxMjtcbiYjMTI1OzwvY29kZT48L3ByZT5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICA8L2Rpdj5cbiAgICA8L3NlY3Rpb24+XG5cbiAgICA8c2VjdGlvbiBjbGFzcz1cImJnLXdoaXRlIHJvdW5kZWQtbGcgcC04IG1iLTggc2hhZG93LXNtXCI+XG4gICAgICA8aDIgY2xhc3M9XCJ0ZXh0LTJ4bCBmb250LWJvbGQgdGV4dC1ncmF5LTgwMCBtYi01IHBiLTMgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+VMOgaSBsaeG7h3UgQVBJPC9oMj5cblxuICAgICAgPGgzIGNsYXNzPVwidGV4dC14bCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItNFwiPsSQ4bqndSB2w6BvIChJbnB1dHMpPC9oMz5cbiAgICAgIDxkaXYgY2xhc3M9XCJvdmVyZmxvdy14LWF1dG8gbWItOFwiPlxuICAgICAgICA8dGFibGUgY2xhc3M9XCJtaW4tdy1mdWxsIGJnLXdoaXRlIGJvcmRlciBib3JkZXItZ3JheS0yMDBcIj5cbiAgICAgICAgICA8dGhlYWQ+XG4gICAgICAgICAgICA8dHI+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTMgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPlTDqm48L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0zIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5LaeG7g3U8L3RoPlxuICAgICAgICAgICAgICA8dGggY2xhc3M9XCJweS0zIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwIGJnLWdyYXktMTAwIHRleHQtbGVmdCBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDBcIj5N4bq3YyDEkeG7i25oXG4gICAgICAgICAgICAgIDwvdGg+XG4gICAgICAgICAgICAgIDx0aCBjbGFzcz1cInB5LTMgcHgtNCBib3JkZXItYiBib3JkZXItZ3JheS0yMDAgYmctZ3JheS0xMDAgdGV4dC1sZWZ0IGZvbnQtc2VtaWJvbGQgdGV4dC1ncmF5LTcwMFwiPk3DtCB04bqjXG4gICAgICAgICAgICAgIDwvdGg+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgIDwvdGhlYWQ+XG4gICAgICAgICAgPHRib2R5PlxuICAgICAgICAgICAgQGZvciAoaW5wdXQgb2YgaW5wdXRzRG9jOyB0cmFjayBpbnB1dC5uYW1lKSB7XG4gICAgICAgICAgICAgIDx0cj5cbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnt7IGlucHV0Lm5hbWUgfX08L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+PGNvZGVcbiAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LXNtIGJnLWdyYXktMTAwIHB4LTEuNSBweS0wLjUgcm91bmRlZFwiPnt7IGlucHV0LnR5cGUgfX08L2NvZGU+PC90ZD5cbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJweS0yIHB4LTQgYm9yZGVyLWIgYm9yZGVyLWdyYXktMjAwXCI+e3sgaW5wdXQuZGVmYXVsdCB9fTwvdGQ+XG4gICAgICAgICAgICAgICAgPHRkIGNsYXNzPVwicHktMiBweC00IGJvcmRlci1iIGJvcmRlci1ncmF5LTIwMFwiPnt7IGlucHV0LmRlc2NyaXB0aW9uIH19PC90ZD5cbiAgICAgICAgICAgICAgPC90cj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICA8L3Rib2R5PlxuICAgICAgICA8L3RhYmxlPlxuICAgICAgPC9kaXY+XG5cbiAgICAgIDxoMyBjbGFzcz1cInRleHQteGwgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTRcIj5JbnRlcmZhY2VzPC9oMz5cbiAgICAgIDxkaXYgY2xhc3M9XCJzcGFjZS15LTZcIj5cbiAgICAgICAgQGZvciAoaW50ZXJmYWNlSXRlbSBvZiBpbnRlcmZhY2VzRG9jOyB0cmFjayBpbnRlcmZhY2VJdGVtLm5hbWUpIHtcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwiYmctZ3JheS01MCBwLTYgcm91bmRlZC1sZ1wiPlxuICAgICAgICAgICAgPGg0IGNsYXNzPVwidGV4dC1sZyBmb250LXNlbWlib2xkIHRleHQtZ3JheS03MDAgbWItM1wiPnt7IGludGVyZmFjZUl0ZW0ubmFtZSB9fTwvaDQ+XG4gICAgICAgICAgICA8cHJlXG4gICAgICAgICAgICAgIGNsYXNzPVwiYmctZ3JheS0xMDAgcC00IHJvdW5kZWQtbGcgb3ZlcmZsb3cteC1hdXRvIHRleHQtc20gbWItM1wiPjxjb2RlPnt7IGludGVyZmFjZUl0ZW0uY29kZSB9fTwvY29kZT48L3ByZT5cbiAgICAgICAgICAgIDxwIGNsYXNzPVwidGV4dC1ncmF5LTYwMFwiPnt7IGludGVyZmFjZUl0ZW0uZGVzY3JpcHRpb24gfX08L3A+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICAgIDwvZGl2PlxuICAgIDwvc2VjdGlvbj5cblxuICAgIDxzZWN0aW9uIGNsYXNzPVwiYmctd2hpdGUgcm91bmRlZC1sZyBwLTggbWItOCBzaGFkb3ctc21cIj5cbiAgICAgIDxoMiBjbGFzcz1cInRleHQtMnhsIGZvbnQtYm9sZCB0ZXh0LWdyYXktODAwIG1iLTUgcGItMyBib3JkZXItYiBib3JkZXItZ3JheS0yMDBcIj5Uw61uaCBuxINuZzwvaDI+XG4gICAgICA8dWwgY2xhc3M9XCJzcGFjZS15LTZcIj5cbiAgICAgICAgQGZvciAoZmVhdHVyZSBvZiBmZWF0dXJlczsgdHJhY2sgZmVhdHVyZS5pZCkge1xuICAgICAgICAgIDxsaSBjbGFzcz1cImZsZXggaXRlbXMtc3RhcnRcIj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidGV4dC0yeGwgdGV4dC1ibHVlLTUwMFwiPnt7IGZlYXR1cmUuaWNvbiB9fTwvc3Bhbj5cbiAgICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICAgIDxoMyBjbGFzcz1cInRleHQtbGcgZm9udC1zZW1pYm9sZCB0ZXh0LWdyYXktNzAwIG1iLTFcIj57eyBmZWF0dXJlLnRpdGxlIH19PC9oMz5cbiAgICAgICAgICAgICAgPHAgY2xhc3M9XCJ0ZXh0LWdyYXktNjAwXCI+e3sgZmVhdHVyZS5kZXNjcmlwdGlvbiB9fTwvcD5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvbGk+XG4gICAgICAgIH1cbiAgICAgIDwvdWw+XG4gICAgPC9zZWN0aW9uPlxuICA8L21haW4+XG48L2Rpdj5cbiJdfQ==