@libs-ui/components-buttons-sort 0.2.356-42 → 0.2.356-43

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.
package/README.md CHANGED
@@ -1,27 +1,30 @@
1
- # Buttons Sort Component
1
+ # @libs-ui/components-buttons-sort
2
2
 
3
- > Version: `0.2.355-14`
4
- >
5
- > Component nút sort (asc/desc) gọn nhẹ, hỗ trợ disable theo chiều và emit payload `ISort` kèm hàm `reset()`.
3
+ > Component nút sort asc/desc gọn nhẹ, hỗ trợ two-way binding, disable từng chiều và emit payload `ISort` kèm hàm `reset()`.
6
4
 
7
5
  ## Giới thiệu
8
6
 
9
- Package `@libs-ui/components-buttons-sort` cung cấp 2 component:
10
-
11
- - `LibsUiComponentsButtonsSortComponent`: 2 nút riêng cho `asc` và `desc`
12
- - `LibsUiComponentsButtonsSortArrowComponent`: 1 nút toggle `asc` ↔ `desc`, có thể bật popover mô tả
7
+ Package `@libs-ui/components-buttons-sort` cung cấp 2 component sắp xếp dữ liệu cho bảng và danh sách. `LibsUiComponentsButtonsSortComponent` hiển thị 2 nút riêng biệt cho chiều tăng dần (asc) và giảm dần (desc). `LibsUiComponentsButtonsSortArrowComponent` là kiểu toggle 1 nút mũi tên chuyển đổi giữa asc và desc, tích hợp thêm popover mô tả trạng thái hiện tại.
13
8
 
14
9
  ## Tính năng
15
10
 
16
- - ✅ 2 kiểu UI: **2 nút (Sort)** và **1 nút toggle (Arrow)**
17
- - ✅ Sort 2 chiều: `asc` / `desc`
18
- - ✅ Two-way binding qua `[(mode)]`
19
- - ✅ Emit payload `(outChange)` kiểu `ISort`
20
- - ✅ Hỗ trợ disable toàn bộ hoặc disable từng chiều (`disableAsc`, `disableDesc`)
21
- - ✅ Hỗ trợ `onlyEmit` để luôn emit event theo click
22
- - ✅ Arrow hỗ trợ `defaultMode` popover content (asc/desc)
23
- - ✅ OnPush Change Detection
24
- - ✅ Angular Signals
11
+ - ✅ Hai kiểu UI: **Sort** (2 nút riêng) và **Arrow** (1 nút toggle)
12
+ - ✅ Two-way binding qua `[(mode)]` đồng bộ trạng thái với component cha
13
+ - ✅ Emit payload `(outChange)` kiểu `ISort` kèm hàm `reset()` để xóa sort
14
+ - ✅ Disable toàn bộ (`[disable]`) hoặc disable từng chiều (`[disableAsc]`, `[disableDesc]`)
15
+ - ✅ `[onlyEmit]` luôn emit event kể cả khi click vào chiều đang active
16
+ - ✅ Arrow hỗ trợ `[defaultMode]` chiều sort mặc định khi click lần đầu
17
+ - ✅ Arrow hỗ trợ popover tả asc/desc (`[popoverContentAsc]`, `[popoverContentDesc]`)
18
+ - ✅ Tùy chỉnh kích thước icon qua `[size]`
19
+ - ✅ Standalone component + OnPush Change Detection + Angular Signals
20
+
21
+ ## Khi nào sử dụng
22
+
23
+ - Khi cần UI sort asc/desc cho cột trong bảng dữ liệu
24
+ - Khi cần binding trạng thái sort qua `[(mode)]` để đồng bộ với state bên ngoài
25
+ - Khi cần disable toàn bộ sort hoặc disable riêng từng chiều (chỉ cho phép sắp xếp 1 chiều)
26
+ - Khi muốn sort button luôn emit event mà không bị chặn khi click lại chiều đang active (`onlyEmit`)
27
+ - Khi cần kiểu toggle 1 nút (Arrow) với popover giải thích ý nghĩa asc/desc cho người dùng
25
28
 
26
29
  ## Cài đặt
27
30
 
@@ -32,54 +35,97 @@ npm install @libs-ui/components-buttons-sort
32
35
  ## Import
33
36
 
34
37
  ```typescript
35
- import { Component } from '@angular/core';
36
- import { LibsUiComponentsButtonsSortArrowComponent, LibsUiComponentsButtonsSortComponent, ISort, TYPE_SORT_TYPE } from '@libs-ui/components-buttons-sort';
38
+ import {
39
+ LibsUiComponentsButtonsSortComponent,
40
+ LibsUiComponentsButtonsSortArrowComponent,
41
+ ISort,
42
+ TYPE_SORT_TYPE,
43
+ } from '@libs-ui/components-buttons-sort';
44
+ ```
45
+
46
+ ## Ví dụ sử dụng
47
+
48
+ ### 1. Sort cơ bản — 2 nút asc/desc
49
+
50
+ `example.component.html`
51
+
52
+ ```html
53
+ <libs_ui-components-buttons-sort
54
+ [fieldSort]="'name'"
55
+ [(mode)]="sortMode"
56
+ (outChange)="handlerSortChange($event)"
57
+ />
58
+ ```
59
+
60
+ `example.component.ts`
61
+
62
+ ```typescript
63
+ import { Component, signal } from '@angular/core';
64
+ import {
65
+ LibsUiComponentsButtonsSortComponent,
66
+ ISort,
67
+ TYPE_SORT_TYPE,
68
+ } from '@libs-ui/components-buttons-sort';
37
69
 
38
70
  @Component({
71
+ selector: 'app-example',
39
72
  standalone: true,
40
- imports: [LibsUiComponentsButtonsSortArrowComponent, LibsUiComponentsButtonsSortComponent],
41
- template: '',
73
+ imports: [LibsUiComponentsButtonsSortComponent],
74
+ templateUrl: './example.component.html',
42
75
  })
43
- export class ExampleComponent {}
76
+ export class ExampleComponent {
77
+ readonly sortMode = signal<TYPE_SORT_TYPE>('');
78
+
79
+ handlerSortChange(sort: ISort): void {
80
+ sort.stopPropagation?.();
81
+ console.log(sort.mode, sort.fieldSort, sort.modeNumber);
82
+ // Gọi sort.reset() để đưa mode về '' khi cần xóa sort
83
+ }
84
+ }
44
85
  ```
45
86
 
46
- ## Cách sử dụng
87
+ ### 2. Sort với custom size và disable chiều asc
47
88
 
48
- ### 1. Ví dụ inline template
89
+ `example.component.html`
49
90
 
50
91
  ```html
51
92
  <libs_ui-components-buttons-sort
52
- [fieldSort]="'name'"
53
- [(mode)]="mode"
54
- (outChange)="onChange($event)"
93
+ [size]="14"
94
+ [disableAsc]="true"
95
+ [fieldSort]="'createdAt'"
96
+ [(mode)]="sortMode"
97
+ (outChange)="handlerSortChange($event)"
55
98
  />
56
99
  ```
57
100
 
101
+ `example.component.ts`
102
+
58
103
  ```typescript
59
104
  import { Component, signal } from '@angular/core';
60
- import { LibsUiComponentsButtonsSortComponent, ISort, TYPE_SORT_TYPE } from '@libs-ui/components-buttons-sort';
105
+ import {
106
+ LibsUiComponentsButtonsSortComponent,
107
+ ISort,
108
+ TYPE_SORT_TYPE,
109
+ } from '@libs-ui/components-buttons-sort';
61
110
 
62
111
  @Component({
112
+ selector: 'app-example-size',
63
113
  standalone: true,
64
114
  imports: [LibsUiComponentsButtonsSortComponent],
65
- template: `
66
- <libs_ui-components-buttons-sort
67
- [fieldSort]="'name'"
68
- [(mode)]="mode()"
69
- (outChange)="onChange($event)"
70
- />
71
- `,
115
+ templateUrl: './example.component.html',
72
116
  })
73
- export class InlineExampleComponent {
74
- readonly mode = signal<TYPE_SORT_TYPE>('');
117
+ export class ExampleSizeComponent {
118
+ readonly sortMode = signal<TYPE_SORT_TYPE>('');
75
119
 
76
- onChange(sort: ISort): void {
77
- console.log(sort.mode, sort.fieldSort);
120
+ handlerSortChange(sort: ISort): void {
121
+ console.log('sort changed', sort);
78
122
  }
79
123
  }
80
124
  ```
81
125
 
82
- ### 2. Arrow - 1 nút toggle (có thể bật popover)
126
+ ### 3. Arrow toggle 1 nút với popover
127
+
128
+ `example.component.html`
83
129
 
84
130
  ```html
85
131
  <libs_ui-components-buttons-sort-arrow
@@ -88,22 +134,8 @@ export class InlineExampleComponent {
88
134
  [popoverContentAsc]="'Sắp xếp tăng dần (A → Z)'"
89
135
  [popoverContentDesc]="'Sắp xếp giảm dần (Z → A)'"
90
136
  [defaultMode]="'asc'"
91
- [(mode)]="mode"
92
- (outChange)="onChange($event)"
93
- />
94
- ```
95
-
96
- ### 2. Ví dụ với file HTML riêng
97
-
98
- `example.component.html`
99
-
100
- ```html
101
- <libs_ui-components-buttons-sort
102
- [size]="14"
103
- [disableAsc]="true"
104
- [fieldSort]="'createdAt'"
105
- [(mode)]="mode"
106
- (outChange)="onChange($event)"
137
+ [(mode)]="arrowMode"
138
+ (outChange)="handlerArrowChange($event)"
107
139
  />
108
140
  ```
109
141
 
@@ -111,76 +143,117 @@ export class InlineExampleComponent {
111
143
 
112
144
  ```typescript
113
145
  import { Component, signal } from '@angular/core';
114
- import { LibsUiComponentsButtonsSortComponent, ISort, TYPE_SORT_TYPE } from '@libs-ui/components-buttons-sort';
146
+ import {
147
+ LibsUiComponentsButtonsSortArrowComponent,
148
+ ISort,
149
+ TYPE_SORT_TYPE,
150
+ } from '@libs-ui/components-buttons-sort';
115
151
 
116
152
  @Component({
153
+ selector: 'app-example-arrow',
117
154
  standalone: true,
118
- imports: [LibsUiComponentsButtonsSortComponent],
155
+ imports: [LibsUiComponentsButtonsSortArrowComponent],
119
156
  templateUrl: './example.component.html',
120
157
  })
121
- export class HtmlFileExampleComponent {
122
- readonly mode = signal<TYPE_SORT_TYPE>('');
158
+ export class ExampleArrowComponent {
159
+ readonly arrowMode = signal<TYPE_SORT_TYPE>('');
123
160
 
124
- onChange(sort: ISort): void {
125
- // sort.reset() thể dùng để reset mode về ''
126
- console.log(sort);
161
+ handlerArrowChange(sort: ISort): void {
162
+ console.log('arrow sort changed', sort.mode, sort.fieldSort);
127
163
  }
128
164
  }
129
165
  ```
130
166
 
131
- ## Công nghệ
167
+ ### 4. Sort disable toàn bộ
132
168
 
133
- | Technology | Version | Purpose |
134
- |------------|---------|---------|
135
- | Angular | 18+ | Framework |
136
- | Angular Signals | - | State management |
137
- | TailwindCSS | 3.x | Styling (demo) |
138
- | OnPush | - | Change Detection |
169
+ ```html
170
+ <libs_ui-components-buttons-sort
171
+ [disable]="true"
172
+ [fieldSort]="'status'"
173
+ [(mode)]="sortMode"
174
+ />
175
+ ```
139
176
 
140
- ## API
177
+ ### 5. Sort với onlyEmit — luôn emit dù click lại chiều đang active
141
178
 
142
- ### libs_ui-components-buttons-sort
179
+ ```html
180
+ <libs_ui-components-buttons-sort
181
+ [onlyEmit]="true"
182
+ [fieldSort]="'name'"
183
+ [(mode)]="sortMode"
184
+ (outChange)="handlerSortChange($event)"
185
+ />
186
+ ```
187
+
188
+ ## @Input() — `libs_ui-components-buttons-sort`
189
+
190
+ | Input | Type | Default | Mô tả | Ví dụ |
191
+ |---|---|---|---|---|
192
+ | `[disable]` | `boolean` | `false` | Disable toàn bộ sort button, không thể click cả 2 chiều | `[disable]="true"` |
193
+ | `[disableAsc]` | `boolean` | `false` | Disable riêng chiều tăng dần (asc) | `[disableAsc]="true"` |
194
+ | `[disableDesc]` | `boolean` | `false` | Disable riêng chiều giảm dần (desc) | `[disableDesc]="true"` |
195
+ | `[fieldSort]` | `string` | `''` | Tên field đang sort — được trả về nguyên vẹn trong payload `ISort.fieldSort` | `[fieldSort]="'name'"` |
196
+ | `[(mode)]` | `TYPE_SORT_TYPE` | `''` | Two-way binding mode sort hiện tại: `'asc'` / `'desc'` / `''` (không sort) | `[(mode)]="sortMode"` |
197
+ | `[onlyEmit]` | `boolean` | `false` | Khi `true`: vẫn emit event kể cả khi click lại chiều đang active (không bị chặn) | `[onlyEmit]="true"` |
198
+ | `[size]` | `number` | `10` | Kích thước icon sort theo đơn vị px | `[size]="14"` |
199
+
200
+ ## @Output() — `libs_ui-components-buttons-sort`
143
201
 
144
- #### Inputs
202
+ | Output | Type | Mô tả | Handler TS | Binding HTML |
203
+ |---|---|---|---|---|
204
+ | `(outChange)` | `ISort` | Emit khi người dùng click 1 trong 2 nút sort, trả về object `ISort` gồm mode, modeNumber, fieldSort và hàm reset() | `handlerSortChange(sort: ISort): void { sort.reset; console.log(sort); }` | `(outChange)="handlerSortChange($event)"` |
145
205
 
146
- | Property | Type | Default | Description |
147
- |----------|------|---------|-------------|
148
- | `[disable]` | `boolean` | `false` | Disable toàn bộ sort |
149
- | `[disableAsc]` | `boolean` | `false` | Disable chiều asc |
150
- | `[disableDesc]` | `boolean` | `false` | Disable chiều desc |
151
- | `[defaultMode]` | `TYPE_SORT_TYPE` | `''` | Chỉ áp dụng cho Arrow: mode mặc định khi click lần đầu |
152
- | `[fieldSort]` | `string` | `''` | Field đang sort (được trả về trong `ISort`) |
153
- | `[ignorePopoverContent]` | `boolean` | `true` | Chỉ áp dụng cho Arrow: bỏ qua hiển thị popover content |
154
- | `[onlyEmit]` | `boolean` | `false` | Chỉ emit event, không chặn khi mode đang trùng |
155
- | `[popoverContentAsc]` | `string \| undefined` | `undefined` | Chỉ áp dụng cho Arrow: nội dung popover khi asc |
156
- | `[popoverContentDesc]` | `string \| undefined` | `undefined` | Chỉ áp dụng cho Arrow: nội dung popover khi desc |
157
- | `[size]` | `number` | `10` | Kích thước icon sort (px) |
158
- | `[zIndex]` | `number` | `10` | Chỉ áp dụng cho Arrow: zIndex của popover |
159
- | `[(mode)]` | `TYPE_SORT_TYPE` | `''` | Mode sort hiện tại: `asc` / `desc` / `''` |
206
+ ## @Input() `libs_ui-components-buttons-sort-arrow` (Sub-component)
160
207
 
161
- #### Outputs
208
+ | Input | Type | Default | Mô tả | Ví dụ |
209
+ |---|---|---|---|---|
210
+ | `[defaultMode]` | `TYPE_SORT_TYPE` | `''` | Mode sort mặc định khi người dùng click lần đầu (khi mode hiện tại đang rỗng) | `[defaultMode]="'asc'"` |
211
+ | `[disable]` | `boolean` | `false` | Disable sort arrow button, không thể click | `[disable]="true"` |
212
+ | `[fieldSort]` | `string` | `''` | Tên field đang sort — được trả về nguyên vẹn trong payload `ISort.fieldSort` | `[fieldSort]="'name'"` |
213
+ | `[ignorePopoverContent]` | `boolean` | `true` | Khi `false`: hiển thị popover khi hover, cần truyền `popoverContentAsc`/`popoverContentDesc` | `[ignorePopoverContent]="false"` |
214
+ | `[(mode)]` | `TYPE_SORT_TYPE` | `''` | Two-way binding mode sort hiện tại: `'asc'` / `'desc'` / `''` | `[(mode)]="arrowMode"` |
215
+ | `[popoverContentAsc]` | `string \| undefined` | `undefined` | Nội dung text hiển thị trong popover khi mode đang là `asc` | `[popoverContentAsc]="'Sắp xếp A → Z'"` |
216
+ | `[popoverContentDesc]` | `string \| undefined` | `undefined` | Nội dung text hiển thị trong popover khi mode đang là `desc` | `[popoverContentDesc]="'Sắp xếp Z → A'"` |
217
+ | `[size]` | `number` | `16` | Kích thước icon mũi tên theo đơn vị px | `[size]="20"` |
218
+ | `[zIndex]` | `number` | `10` | z-index của popover overlay | `[zIndex]="100"` |
162
219
 
163
- | Property | Type | Description |
164
- |----------|------|-------------|
165
- | `(outChange)` | `EventEmitter<ISort>` | Emit khi người dùng click sort, trả về payload `ISort` |
220
+ ## @Output() `libs_ui-components-buttons-sort-arrow` (Sub-component)
221
+
222
+ | Output | Type | tả | Handler TS | Binding HTML |
223
+ |---|---|---|---|---|
224
+ | `(outChange)` | `ISort` | Emit khi người dùng click nút arrow, trả về object `ISort` gồm mode, modeNumber, fieldSort và hàm reset() | `handlerArrowChange(sort: ISort): void { console.log(sort.mode); }` | `(outChange)="handlerArrowChange($event)"` |
166
225
 
167
226
  ## Types & Interfaces
168
227
 
169
228
  ```typescript
229
+ import { ISort, TYPE_SORT_TYPE } from '@libs-ui/components-buttons-sort';
230
+
231
+ // Kiểu mode sort
170
232
  export type TYPE_SORT_TYPE = 'asc' | 'desc' | '';
171
233
 
234
+ // Payload emit ra khi sort thay đổi
172
235
  export interface ISort {
173
- mode: TYPE_SORT_TYPE;
174
- modeNumber: 1 | 2; // 1: asc; 2:desc
175
- fieldSort: string;
176
- reset: () => void;
236
+ mode: TYPE_SORT_TYPE; // Chiều sort hiện tại: 'asc' | 'desc' | ''
237
+ modeNumber: 1 | 2; // 1 = asc, 2 = desc
238
+ fieldSort: string; // Tên field đang sort (từ input [fieldSort])
239
+ reset: () => void; // Gọi để reset mode về '' (xóa sort)
177
240
  }
178
241
  ```
179
242
 
180
- ### Mô tả Types
243
+ ### Mô tả
244
+
245
+ - **`TYPE_SORT_TYPE`**: Union type cho trạng thái sort. Giá trị `''` (chuỗi rỗng) biểu thị không có sort nào đang active.
246
+ - **`ISort`**: Object được emit qua `(outChange)`. Trường `modeNumber` tiện dụng khi gửi tham số số lên API (`1` = asc, `2` = desc). Hàm `reset()` đưa mode về `''` — có thể gọi trực tiếp từ payload: `sort.reset()`.
247
+
248
+ ## Lưu ý quan trọng
181
249
 
182
- - **TYPE_SORT_TYPE**: Kiểu mode sort: `asc`, `desc`, hoặc rỗng (không sort).
183
- - **ISort**: Payload emit ra khi sort thay đổi, có `reset()` để reset mode.
250
+ ⚠️ **Two-way binding với signal**: Khi dùng `[(mode)]` cùng Angular Signal, phải truyền giá trị signal đã gọi `()`: `[(mode)]="sortMode()"` trong inline template hoặc khai báo biến `readonly sortMode = signal<TYPE_SORT_TYPE>('')` và dùng `[(mode)]="sortMode"` trong template file riêng — Angular sẽ tự xử lý.
251
+
252
+ ⚠️ **`onlyEmit` và `disableAsc`/`disableDesc` kết hợp**: Khi `onlyEmit` là `true`, logic `disableAsc`/`disableDesc` vẫn hoạt động — click vào chiều bị disable sẽ không emit dù `onlyEmit` bật.
253
+
254
+ ⚠️ **Arrow popover cần `ignorePopoverContent="false"`**: Mặc định `ignorePopoverContent` là `true` (bỏ qua popover). Phải đặt `[ignorePopoverContent]="false"` mới kích hoạt popover — đồng thời cần truyền `popoverContentAsc` hoặc `popoverContentDesc` để có nội dung hiển thị.
255
+
256
+ ⚠️ **`reset()` trong `ISort`**: Hàm `reset()` được bind vào instance component — gọi `sort.reset()` sẽ đặt lại `mode` về `''` trực tiếp trên component gốc. Dùng khi cần reset sort từ bên ngoài (vd: clear filter).
184
257
 
185
258
  ## Demo
186
259
 
@@ -188,5 +261,4 @@ export interface ISort {
188
261
  npx nx serve core-ui
189
262
  ```
190
263
 
191
- Truy cập: `http://localhost:4500/buttons/sort`
192
-
264
+ Truy cập: http://localhost:4500/buttons/sort
@@ -1,5 +1,5 @@
1
1
  import * as i0 from '@angular/core';
2
- import { input, model, output, ChangeDetectionStrategy, Component, computed } from '@angular/core';
2
+ import { input, model, output, Component, ChangeDetectionStrategy, computed } from '@angular/core';
3
3
  import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
4
4
 
5
5
  class LibsUiComponentsButtonsSortComponent {
@@ -1 +1 @@
1
- {"version":3,"file":"libs-ui-components-buttons-sort.mjs","sources":["../../../../../../libs-ui/components/buttons/sort/src/sort.component.ts","../../../../../../libs-ui/components/buttons/sort/src/sort.component.html","../../../../../../libs-ui/components/buttons/sort/src/arrow/icon/icon.component.ts","../../../../../../libs-ui/components/buttons/sort/src/arrow/icon/icon.component.html","../../../../../../libs-ui/components/buttons/sort/src/arrow/arrow.component.ts","../../../../../../libs-ui/components/buttons/sort/src/arrow/arrow.component.html","../../../../../../libs-ui/components/buttons/sort/src/libs-ui-components-buttons-sort.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { ISort, TYPE_SORT_TYPE } from './interfaces';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-sort',\n templateUrl: './sort.component.html',\n styleUrls: ['./sort.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsButtonsSortComponent {\n // #region INPUT\n readonly size = input<number>(10);\n readonly mode = model<TYPE_SORT_TYPE>('');\n readonly fieldSort = input<string>('');\n readonly disable = input<boolean | undefined, boolean | undefined>(false, { transform: (value) => value ?? false });\n readonly disableAsc = input<boolean | undefined, boolean | undefined>(false, { transform: (value) => value ?? false });\n readonly disableDesc = input<boolean | undefined, boolean | undefined>(false, { transform: (value) => value ?? false });\n readonly onlyEmit = input<boolean | undefined, boolean | undefined>(false, { transform: (value) => value ?? false });\n\n // #region OUTPUT\n readonly outChange = output<ISort>();\n\n /* FUNCTIONS */\n protected async handlerClickSort(event: Event, mode: TYPE_SORT_TYPE) {\n event.stopPropagation();\n if ((this.disable() || this.mode() === mode) && !this.onlyEmit) {\n return;\n }\n if (this.mode() === 'asc' && this.disableAsc()) {\n return;\n }\n if (this.mode() === 'desc' && this.disableDesc()) {\n return;\n }\n this.mode.set(mode);\n this.outChange.emit(await this.getMode());\n }\n\n private async getMode() {\n return {\n mode: this.mode(),\n modeNumber: this.mode() === 'asc' ? 1 : 2,\n fieldSort: this.fieldSort(),\n reset: this.reset.bind(this),\n } as ISort;\n }\n\n private async reset() {\n this.mode.set('');\n }\n}\n","<div class=\"libs-ui-button-sort flex flex-col justify-center\">\n <i\n class=\"libs-ui-icon-move-right rotate-[270deg]\"\n tabindex=\"0\"\n [style.--sort-size.px]=\"size()\"\n [attr.active]=\"mode() === 'asc'\"\n [attr.disable]=\"disableAsc() || !!disable()\"\n (click)=\"handlerClickSort($event, 'asc')\"\n (keydown.enter)=\"handlerClickSort($any($event), 'asc')\"\n (keydown.space)=\"handlerClickSort($any($event), 'asc')\"></i>\n\n <i\n class=\"libs-ui-icon-move-right rotate-[90deg] mt-[2px]\"\n tabindex=\"0\"\n [style.--sort-size.px]=\"size()\"\n [attr.active]=\"mode() === 'desc'\"\n [attr.disable]=\"disableDesc() || !!disable()\"\n (click)=\"handlerClickSort($event, 'desc')\"\n (keydown.enter)=\"handlerClickSort($any($event), 'desc')\"\n (keydown.space)=\"handlerClickSort($any($event), 'desc')\"></i>\n</div>\n","import { Component, input } from '@angular/core';\nimport { TYPE_SORT_TYPE } from '../../interfaces';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-button-sort-arrow-icon',\n templateUrl: './icon.component.html',\n styleUrls: ['./icon.component.scss'],\n standalone: true,\n})\nexport class LibsUiComponentsButtonSortArrowIconComponent {\n // #region INPUT\n readonly size = input<number>(16);\n readonly sortType = input<TYPE_SORT_TYPE>();\n readonly disable = input<boolean>(false);\n}\n","<svg\n class=\"libs-ui-core-ui-components-button-sort-arrow-icon\"\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n [attr.disable]=\"disable()\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n class=\"libs-ui-core-ui-components-button-sort-arrow-icon-left\"\n [attr.disable]=\"disable()\"\n [attr.active]=\"sortType() === 'asc'\"\n d=\"M4.71258 3.19102C4.96726 2.93633 5.3802 2.93633 5.63488 3.19102L7.80879 5.36492C8.06348 5.61961 8.06348 6.03254 7.80879 6.28723C7.5541 6.54192 7.14117 6.54192 6.88648 6.28723L5.8259 5.22665V12.3478C5.8259 12.708 5.53391 13 5.17373 13C4.81355 13 4.52156 12.708 4.52156 12.3478V5.22665L3.46098 6.28723C3.20629 6.54192 2.79336 6.54192 2.53867 6.28723C2.28398 6.03254 2.28398 5.61961 2.53867 5.36492L4.71258 3.19102Z\" />\n <path\n fill-rule=\"evenodd\"\n class=\"libs-ui-core-ui-components-button-sort-arrow-icon-right\"\n [attr.disable]=\"disable()\"\n [attr.active]=\"sortType() === 'desc'\"\n clip-rule=\"evenodd\"\n d=\"M10.1739 10.7733V3.65217C10.1739 3.29199 10.4659 3 10.8261 3C11.1863 3 11.4782 3.29199 11.4782 3.65217V10.7733L12.5388 9.71273C12.7935 9.45804 13.2064 9.45804 13.4611 9.71273C13.7158 9.96741 13.7158 10.3803 13.4611 10.635L11.2872 12.8089C11.0325 13.0636 10.6196 13.0636 10.3649 12.8089L8.19102 10.635C7.93633 10.3803 7.93633 9.96741 8.19102 9.71273C8.44571 9.45804 8.85864 9.45804 9.11333 9.71273L10.1739 10.7733Z\" />\n</svg>\n","import { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';\nimport { IPopoverFunctionControlEvent, IPopoverOverlay, LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { ISort, TYPE_SORT_TYPE } from '../interfaces';\nimport { LibsUiComponentsButtonSortArrowIconComponent } from './icon/icon.component';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-sort-arrow',\n templateUrl: './arrow.component.html',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [LibsUiComponentsButtonSortArrowIconComponent, LibsUiComponentsPopoverComponent],\n})\nexport class LibsUiComponentsButtonsSortArrowComponent {\n // #region PROPERTY\n private popoverFunctionControlEvent?: IPopoverFunctionControlEvent;\n protected config = computed<IPopoverOverlay>(() => {\n return { zIndex: this.zIndex(), content: (this.mode() && this.mode() === 'asc') || (!this.mode() && this.defaultMode() === 'desc') ? this.popoverContentDesc() : this.popoverContentAsc() };\n });\n\n // #region INPUT\n readonly size = input<number>(16);\n readonly mode = model<TYPE_SORT_TYPE>('');\n readonly fieldSort = input<string>('');\n readonly disable = input<boolean>(false);\n readonly ignorePopoverContent = input<boolean>(true);\n readonly popoverContentAsc = input<string>();\n readonly popoverContentDesc = input<string>();\n readonly defaultMode = input<TYPE_SORT_TYPE>('');\n readonly zIndex = input<number>(10);\n\n // #region OUTPUT\n readonly outChange = output<ISort>();\n\n /* FUNCTIONS */\n protected async handlerClickSort(event: Event) {\n event.stopPropagation();\n if (this.disable()) {\n return;\n }\n this.updateMode();\n this.outChange.emit(await this.getMode());\n this.popoverFunctionControlEvent?.updatePopoverOverlay();\n }\n\n private async updateMode() {\n if (!this.mode()) {\n this.mode.set(this.defaultMode() || 'asc');\n\n return;\n }\n this.mode.update((value) => (value === 'asc' ? 'desc' : 'asc'));\n }\n\n private async getMode(): Promise<ISort> {\n return {\n mode: this.mode(),\n modeNumber: this.mode() === 'asc' ? 1 : 2,\n fieldSort: this.fieldSort(),\n reset: this.reset.bind(this),\n };\n }\n\n private async reset() {\n this.mode.set('');\n }\n\n protected async handlerPopoverFunctionControl(event: IPopoverFunctionControlEvent) {\n this.popoverFunctionControlEvent = event;\n }\n}\n","<div\n class=\"flex\"\n LibsUiComponentsPopoverDirective\n [config]=\"config()\"\n [ignoreShowPopover]=\"ignorePopoverContent() || disable()\"\n (outFunctionsControl)=\"handlerPopoverFunctionControl($event)\">\n <libs_ui-components-button-sort-arrow-icon\n tabindex=\"0\"\n [size]=\"size()\"\n [sortType]=\"mode()\"\n [disable]=\"disable()\"\n (click)=\"handlerClickSort($event)\"\n (keydown.enter)=\"handlerClickSort($any($event))\"\n (keydown.space)=\"handlerClickSort($any($event))\" />\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-buttons-sort.mjs","sources":["../../../../../../libs-ui/components/buttons/sort/src/sort.component.ts","../../../../../../libs-ui/components/buttons/sort/src/sort.component.html","../../../../../../libs-ui/components/buttons/sort/src/arrow/icon/icon.component.ts","../../../../../../libs-ui/components/buttons/sort/src/arrow/icon/icon.component.html","../../../../../../libs-ui/components/buttons/sort/src/arrow/arrow.component.ts","../../../../../../libs-ui/components/buttons/sort/src/arrow/arrow.component.html","../../../../../../libs-ui/components/buttons/sort/src/libs-ui-components-buttons-sort.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output } from '@angular/core';\nimport { ISort, TYPE_SORT_TYPE } from './interfaces';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-sort',\n templateUrl: './sort.component.html',\n styleUrls: ['./sort.component.scss'],\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsButtonsSortComponent {\n // #region INPUT\n readonly size = input<number>(10);\n readonly mode = model<TYPE_SORT_TYPE>('');\n readonly fieldSort = input<string>('');\n readonly disable = input<boolean | undefined, boolean | undefined>(false, { transform: (value) => value ?? false });\n readonly disableAsc = input<boolean | undefined, boolean | undefined>(false, { transform: (value) => value ?? false });\n readonly disableDesc = input<boolean | undefined, boolean | undefined>(false, { transform: (value) => value ?? false });\n readonly onlyEmit = input<boolean | undefined, boolean | undefined>(false, { transform: (value) => value ?? false });\n\n // #region OUTPUT\n readonly outChange = output<ISort>();\n\n /* FUNCTIONS */\n protected async handlerClickSort(event: Event, mode: TYPE_SORT_TYPE) {\n event.stopPropagation();\n if ((this.disable() || this.mode() === mode) && !this.onlyEmit) {\n return;\n }\n if (this.mode() === 'asc' && this.disableAsc()) {\n return;\n }\n if (this.mode() === 'desc' && this.disableDesc()) {\n return;\n }\n this.mode.set(mode);\n this.outChange.emit(await this.getMode());\n }\n\n private async getMode() {\n return {\n mode: this.mode(),\n modeNumber: this.mode() === 'asc' ? 1 : 2,\n fieldSort: this.fieldSort(),\n reset: this.reset.bind(this),\n } as ISort;\n }\n\n private async reset() {\n this.mode.set('');\n }\n}\n","<div class=\"libs-ui-button-sort flex flex-col justify-center\">\n <i\n class=\"libs-ui-icon-move-right rotate-[270deg]\"\n tabindex=\"0\"\n [style.--sort-size.px]=\"size()\"\n [attr.active]=\"mode() === 'asc'\"\n [attr.disable]=\"disableAsc() || !!disable()\"\n (click)=\"handlerClickSort($event, 'asc')\"\n (keydown.enter)=\"handlerClickSort($any($event), 'asc')\"\n (keydown.space)=\"handlerClickSort($any($event), 'asc')\"></i>\n\n <i\n class=\"libs-ui-icon-move-right rotate-[90deg] mt-[2px]\"\n tabindex=\"0\"\n [style.--sort-size.px]=\"size()\"\n [attr.active]=\"mode() === 'desc'\"\n [attr.disable]=\"disableDesc() || !!disable()\"\n (click)=\"handlerClickSort($event, 'desc')\"\n (keydown.enter)=\"handlerClickSort($any($event), 'desc')\"\n (keydown.space)=\"handlerClickSort($any($event), 'desc')\"></i>\n</div>\n","import { Component, input } from '@angular/core';\nimport { TYPE_SORT_TYPE } from '../../interfaces';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-button-sort-arrow-icon',\n templateUrl: './icon.component.html',\n styleUrls: ['./icon.component.scss'],\n standalone: true,\n})\nexport class LibsUiComponentsButtonSortArrowIconComponent {\n // #region INPUT\n readonly size = input<number>(16);\n readonly sortType = input<TYPE_SORT_TYPE>();\n readonly disable = input<boolean>(false);\n}\n","<svg\n class=\"libs-ui-core-ui-components-button-sort-arrow-icon\"\n [attr.width]=\"size()\"\n [attr.height]=\"size()\"\n [attr.disable]=\"disable()\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n class=\"libs-ui-core-ui-components-button-sort-arrow-icon-left\"\n [attr.disable]=\"disable()\"\n [attr.active]=\"sortType() === 'asc'\"\n d=\"M4.71258 3.19102C4.96726 2.93633 5.3802 2.93633 5.63488 3.19102L7.80879 5.36492C8.06348 5.61961 8.06348 6.03254 7.80879 6.28723C7.5541 6.54192 7.14117 6.54192 6.88648 6.28723L5.8259 5.22665V12.3478C5.8259 12.708 5.53391 13 5.17373 13C4.81355 13 4.52156 12.708 4.52156 12.3478V5.22665L3.46098 6.28723C3.20629 6.54192 2.79336 6.54192 2.53867 6.28723C2.28398 6.03254 2.28398 5.61961 2.53867 5.36492L4.71258 3.19102Z\" />\n <path\n fill-rule=\"evenodd\"\n class=\"libs-ui-core-ui-components-button-sort-arrow-icon-right\"\n [attr.disable]=\"disable()\"\n [attr.active]=\"sortType() === 'desc'\"\n clip-rule=\"evenodd\"\n d=\"M10.1739 10.7733V3.65217C10.1739 3.29199 10.4659 3 10.8261 3C11.1863 3 11.4782 3.29199 11.4782 3.65217V10.7733L12.5388 9.71273C12.7935 9.45804 13.2064 9.45804 13.4611 9.71273C13.7158 9.96741 13.7158 10.3803 13.4611 10.635L11.2872 12.8089C11.0325 13.0636 10.6196 13.0636 10.3649 12.8089L8.19102 10.635C7.93633 10.3803 7.93633 9.96741 8.19102 9.71273C8.44571 9.45804 8.85864 9.45804 9.11333 9.71273L10.1739 10.7733Z\" />\n</svg>\n","import { ChangeDetectionStrategy, Component, computed, input, model, output } from '@angular/core';\nimport { IPopoverFunctionControlEvent, IPopoverOverlay, LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { ISort, TYPE_SORT_TYPE } from '../interfaces';\nimport { LibsUiComponentsButtonSortArrowIconComponent } from './icon/icon.component';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-sort-arrow',\n templateUrl: './arrow.component.html',\n standalone: true,\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [LibsUiComponentsButtonSortArrowIconComponent, LibsUiComponentsPopoverComponent],\n})\nexport class LibsUiComponentsButtonsSortArrowComponent {\n // #region PROPERTY\n private popoverFunctionControlEvent?: IPopoverFunctionControlEvent;\n protected config = computed<IPopoverOverlay>(() => {\n return { zIndex: this.zIndex(), content: (this.mode() && this.mode() === 'asc') || (!this.mode() && this.defaultMode() === 'desc') ? this.popoverContentDesc() : this.popoverContentAsc() };\n });\n\n // #region INPUT\n readonly size = input<number>(16);\n readonly mode = model<TYPE_SORT_TYPE>('');\n readonly fieldSort = input<string>('');\n readonly disable = input<boolean>(false);\n readonly ignorePopoverContent = input<boolean>(true);\n readonly popoverContentAsc = input<string>();\n readonly popoverContentDesc = input<string>();\n readonly defaultMode = input<TYPE_SORT_TYPE>('');\n readonly zIndex = input<number>(10);\n\n // #region OUTPUT\n readonly outChange = output<ISort>();\n\n /* FUNCTIONS */\n protected async handlerClickSort(event: Event) {\n event.stopPropagation();\n if (this.disable()) {\n return;\n }\n this.updateMode();\n this.outChange.emit(await this.getMode());\n this.popoverFunctionControlEvent?.updatePopoverOverlay();\n }\n\n private async updateMode() {\n if (!this.mode()) {\n this.mode.set(this.defaultMode() || 'asc');\n\n return;\n }\n this.mode.update((value) => (value === 'asc' ? 'desc' : 'asc'));\n }\n\n private async getMode(): Promise<ISort> {\n return {\n mode: this.mode(),\n modeNumber: this.mode() === 'asc' ? 1 : 2,\n fieldSort: this.fieldSort(),\n reset: this.reset.bind(this),\n };\n }\n\n private async reset() {\n this.mode.set('');\n }\n\n protected async handlerPopoverFunctionControl(event: IPopoverFunctionControlEvent) {\n this.popoverFunctionControlEvent = event;\n }\n}\n","<div\n class=\"flex\"\n LibsUiComponentsPopoverDirective\n [config]=\"config()\"\n [ignoreShowPopover]=\"ignorePopoverContent() || disable()\"\n (outFunctionsControl)=\"handlerPopoverFunctionControl($event)\">\n <libs_ui-components-button-sort-arrow-icon\n tabindex=\"0\"\n [size]=\"size()\"\n [sortType]=\"mode()\"\n [disable]=\"disable()\"\n (click)=\"handlerClickSort($event)\"\n (keydown.enter)=\"handlerClickSort($any($event))\"\n (keydown.space)=\"handlerClickSort($any($event))\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,9 +1,9 @@
1
1
  {
2
2
  "name": "@libs-ui/components-buttons-sort",
3
- "version": "0.2.356-42",
3
+ "version": "0.2.356-43",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18.0.0",
6
- "@libs-ui/components-popover": "0.2.356-42"
6
+ "@libs-ui/components-popover": "0.2.356-43"
7
7
  },
8
8
  "sideEffects": false,
9
9
  "module": "fesm2022/libs-ui-components-buttons-sort.mjs",