@libs-ui/components-buttons-tab 0.1.1-1
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 +157 -0
- package/esm2022/index.mjs +3 -0
- package/esm2022/interfaces/tab.interface.mjs +2 -0
- package/esm2022/libs-ui-components-buttons-tab.mjs +5 -0
- package/esm2022/tab.component.mjs +58 -0
- package/fesm2022/libs-ui-components-buttons-tab.mjs +65 -0
- package/fesm2022/libs-ui-components-buttons-tab.mjs.map +1 -0
- package/index.d.ts +2 -0
- package/interfaces/tab.interface.d.ts +19 -0
- package/package.json +28 -0
- package/tab.component.d.ts +15 -0
package/README.md
ADDED
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
# Button Tab
|
|
2
|
+
|
|
3
|
+
## Giới thiệu
|
|
4
|
+
|
|
5
|
+
`@libs-ui/components-buttons-tab` là một component Tab cho Angular, cho phép hiển thị danh sách tabs, hỗ trợ trạng thái active và tuỳ chỉnh màu cho type "other".
|
|
6
|
+
|
|
7
|
+
## Tính năng
|
|
8
|
+
|
|
9
|
+
- Hiển thị tabs dạng button theo danh sách đầu vào
|
|
10
|
+
- Two-way binding cho tab đang active (`keySelected`)
|
|
11
|
+
- Hỗ trợ vô hiệu hóa toàn bộ tabs (`disable`)
|
|
12
|
+
- Type `other` cho phép cấu hình màu chữ và nền riêng (`otherConfig`)
|
|
13
|
+
- Hỗ trợ hiển thị số lượng badge (`count`, `maxCount`, `modeCount`)
|
|
14
|
+
|
|
15
|
+
## Cài đặt
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @libs-ui/components-buttons-tab
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
hoặc
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
yarn add @libs-ui/components-buttons-tab
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Sử dụng
|
|
28
|
+
|
|
29
|
+
### Inline Template
|
|
30
|
+
|
|
31
|
+
```typescript
|
|
32
|
+
import { Component } from '@angular/core';
|
|
33
|
+
import { LibsUiComponentsButtonsTabComponent, IButtonTab, IOtherConfig } from '@libs-ui/components-buttons-tab';
|
|
34
|
+
|
|
35
|
+
@Component({
|
|
36
|
+
selector: 'app-example',
|
|
37
|
+
standalone: true,
|
|
38
|
+
imports: [LibsUiComponentsButtonsTabComponent],
|
|
39
|
+
template: `
|
|
40
|
+
<libs_ui-components-buttons-tab
|
|
41
|
+
[items]="tabs"
|
|
42
|
+
[disable]="isDisabled"
|
|
43
|
+
[(keySelected)]="selectedKey"
|
|
44
|
+
[otherConfig]="otherConfig"
|
|
45
|
+
(outKeySelected)="onSelect($event)"></libs_ui-components-buttons-tab>
|
|
46
|
+
`,
|
|
47
|
+
})
|
|
48
|
+
export class ExampleComponent {
|
|
49
|
+
tabs: IButtonTab[] = [
|
|
50
|
+
{ key: 'tab1', label: 'Tab 1', type: 'blue' },
|
|
51
|
+
{ key: 'tab2', label: 'Tab 2', type: 'red', count: 5 },
|
|
52
|
+
{ key: 'tab3', label: 'Tab 3', type: 'other' },
|
|
53
|
+
];
|
|
54
|
+
isDisabled = false;
|
|
55
|
+
selectedKey = 'tab1';
|
|
56
|
+
otherConfig: IOtherConfig = { color: '#000000', background: '#ffffff' };
|
|
57
|
+
|
|
58
|
+
onSelect(key: string) {
|
|
59
|
+
console.log('Selected tab:', key);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### File HTML riêng
|
|
65
|
+
|
|
66
|
+
```typescript
|
|
67
|
+
import { Component } from '@angular/core';
|
|
68
|
+
import { LibsUiComponentsButtonsTabComponent, IButtonTab, IOtherConfig } from '@libs-ui/components-buttons-tab';
|
|
69
|
+
|
|
70
|
+
@Component({
|
|
71
|
+
selector: 'app-example',
|
|
72
|
+
standalone: true,
|
|
73
|
+
imports: [LibsUiComponentsButtonsTabComponent],
|
|
74
|
+
templateUrl: './example.component.html',
|
|
75
|
+
})
|
|
76
|
+
export class ExampleComponent {
|
|
77
|
+
tabs: IButtonTab[] = [
|
|
78
|
+
/* ... */
|
|
79
|
+
];
|
|
80
|
+
isDisabled = false;
|
|
81
|
+
selectedKey = '';
|
|
82
|
+
otherConfig: IOtherConfig = { color: '#000000', background: '#ffffff' };
|
|
83
|
+
|
|
84
|
+
onSelect(key: string) {}
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
```html
|
|
89
|
+
<libs_ui-components-buttons-tab
|
|
90
|
+
[items]="tabs"
|
|
91
|
+
[disable]="isDisabled"
|
|
92
|
+
[(keySelected)]="selectedKey"
|
|
93
|
+
[otherConfig]="otherConfig"
|
|
94
|
+
(outKeySelected)="onSelect($event)"></libs_ui-components-buttons-tab>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Công nghệ sử dụng
|
|
98
|
+
|
|
99
|
+
- **Angular 18** standalone components, Signals
|
|
100
|
+
- **Tailwind CSS** 3.x
|
|
101
|
+
|
|
102
|
+
## API Reference
|
|
103
|
+
|
|
104
|
+
### Inputs
|
|
105
|
+
|
|
106
|
+
| Tên | Kiểu | Mặc định | Mô tả |
|
|
107
|
+
| ----------- | ------------------- | -------- | --------------------------------- |
|
|
108
|
+
| items | `Array<IButtonTab>` | required | Danh sách cấu hình tabs |
|
|
109
|
+
| disable | `boolean` | `false` | Vô hiệu hóa toàn bộ tabs |
|
|
110
|
+
| keySelected | `string` | `''` | Key của tab đang active (two-way) |
|
|
111
|
+
| otherConfig | `IOtherConfig` | n/a | Cấu hình màu cho type 'other' |
|
|
112
|
+
|
|
113
|
+
### Outputs
|
|
114
|
+
|
|
115
|
+
| Tên | Kiểu | Mô tả |
|
|
116
|
+
| -------------- | -------- | -------------------------- |
|
|
117
|
+
| outKeySelected | `string` | Emit key của tab được chọn |
|
|
118
|
+
|
|
119
|
+
### Interfaces
|
|
120
|
+
|
|
121
|
+
#### `IButtonTab`
|
|
122
|
+
|
|
123
|
+
| Property | Type | Required | Description |
|
|
124
|
+
| ---------- | ----------------- | -------- | ---------------------------------------------------------------------- |
|
|
125
|
+
| key | `string` | yes | Định danh duy nhất của tab, dùng cho two-way binding. |
|
|
126
|
+
| label | `string` | yes | Nội dung text hiển thị trên tab. |
|
|
127
|
+
| type | `TYPE_BUTTON_TAB` | yes | Chủ đề màu của tab; giá trị mặc định hoặc tuỳ chỉnh qua `otherConfig`. |
|
|
128
|
+
| count | `number` | no | Giá trị số (badge) hiển thị trên tab. |
|
|
129
|
+
| modeCount | `TYPE_BADGE_MODE` | no | Chế độ hiển thị badge khi `count` vượt quá `maxCount`. |
|
|
130
|
+
| maxCount | `number` | no | Số tối đa hiển thị trước khi chuyển sang định dạng `modeCount`. |
|
|
131
|
+
| class | `string` | no | Các class CSS thêm cho container tab. |
|
|
132
|
+
| classLabel | `string` | no | Các class CSS thêm cho label text. |
|
|
133
|
+
| disable | `boolean` | no | Nếu `true`: vô hiệu hoá tương tác click cho tab này. |
|
|
134
|
+
| data | `any` | no | Dữ liệu tuỳ ý gắn kèm với tab. |
|
|
135
|
+
|
|
136
|
+
#### `IOtherConfig`
|
|
137
|
+
|
|
138
|
+
| Property | Type | Required | Description |
|
|
139
|
+
| ---------------- | -------- | -------- | ---------------------------------------------------------- |
|
|
140
|
+
| color | `string` | yes | Màu chữ (label) cho tab đang active khi `type` là `other`. |
|
|
141
|
+
| background | `string` | no | Màu nền cho tab đang active khi `type` là `other`. |
|
|
142
|
+
| background_badge | `string` | no | Màu nền cho badge khi `type` là `other`. |
|
|
143
|
+
|
|
144
|
+
#### `TYPE_BUTTON_TAB`
|
|
145
|
+
|
|
146
|
+
| Value | Description |
|
|
147
|
+
| -------- | -------------------------------------------------------- |
|
|
148
|
+
| `blue` | Chủ đề màu xanh mặc định. |
|
|
149
|
+
| `green` | Chủ đề màu xanh lá (thành công). |
|
|
150
|
+
| `red` | Chủ đề màu đỏ (cảnh báo). |
|
|
151
|
+
| `orange` | Chủ đề màu cam (cảnh báo). |
|
|
152
|
+
| `yellow` | Chủ đề màu vàng (thông tin). |
|
|
153
|
+
| `cyan` | Chủ đề màu xanh lam nhạt (phụ). |
|
|
154
|
+
| `purple` | Chủ đề màu tím (nổi bật). |
|
|
155
|
+
| `brown` | Chủ đề màu nâu (trung tính). |
|
|
156
|
+
| `other` | Chủ đề tuỳ chỉnh; màu được định nghĩa qua `otherConfig`. |
|
|
157
|
+
| `string` | Các tên chủ đề tuỳ chỉnh khác. |
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export * from './tab.component';
|
|
2
|
+
export * from './interfaces/tab.interface';
|
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnV0dG9ucy90YWIvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsaUJBQWlCLENBQUM7QUFDaEMsY0FBYyw0QkFBNEIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vdGFiLmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2ludGVyZmFjZXMvdGFiLmludGVyZmFjZSc7XG4iXX0=
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3RhYi9zcmMvaW50ZXJmYWNlcy90YWIuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBUWVBFX0JBREdFX01PREUgfSBmcm9tICdAbGlicy11aS9jb21wb25lbnRzLWJhZGdlJztcblxuZXhwb3J0IGludGVyZmFjZSBJQnV0dG9uVGFiIHtcbiAga2V5OiBzdHJpbmc7XG4gIGxhYmVsOiBzdHJpbmc7XG4gIHR5cGU6IFRZUEVfQlVUVE9OX1RBQjtcbiAgY291bnQ/OiBudW1iZXI7XG4gIG1vZGVDb3VudD86IFRZUEVfQkFER0VfTU9ERTtcbiAgbWF4Q291bnQ/OiBudW1iZXI7XG4gIGNsYXNzPzogc3RyaW5nO1xuICBjbGFzc0xhYmVsPzogc3RyaW5nO1xuICBkaXNhYmxlPzogYm9vbGVhbjtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEB0eXBlc2NyaXB0LWVzbGludC9uby1leHBsaWNpdC1hbnlcbiAgZGF0YT86IGFueTtcbn1cblxuZXhwb3J0IGludGVyZmFjZSBJT3RoZXJDb25maWcge1xuICBjb2xvcjogc3RyaW5nO1xuICBiYWNrZ3JvdW5kPzogc3RyaW5nO1xuICBiYWNrZ3JvdW5kX2JhZGdlPzogc3RyaW5nO1xufVxuXG5leHBvcnQgdHlwZSBUWVBFX0JVVFRPTl9UQUIgPSAnYmx1ZScgfCAnZ3JlZW4nIHwgJ3JlZCcgfCAnb3JhbmdlJyB8ICd5ZWxsb3cnIHwgJ2N5YW4nIHwgJ3B1cnBsZScgfCAnYnJvd24nIHwgJ290aGVyJyB8IHN0cmluZztcbiJdfQ==
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generated bundle index. Do not edit.
|
|
3
|
+
*/
|
|
4
|
+
export * from './index';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLWJ1dHRvbnMtdGFiLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2J1dHRvbnMvdGFiL3NyYy9saWJzLXVpLWNvbXBvbmVudHMtYnV0dG9ucy10YWIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, effect, input, model, output, viewChild } from '@angular/core';
|
|
2
|
+
import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
|
|
3
|
+
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
4
|
+
import { colorStepContrastFromOrigin, escapeHtml } from '@libs-ui/utils';
|
|
5
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
6
|
+
import * as i0 from "@angular/core";
|
|
7
|
+
import * as i1 from "@ngx-translate/core";
|
|
8
|
+
export class LibsUiComponentsButtonsTabComponent {
|
|
9
|
+
otherStyleClassButtonTabEl = document.createElement('style');
|
|
10
|
+
// #region INPUT
|
|
11
|
+
items = input.required({ transform: (data) => data.map((item) => ({ ...item, label: escapeHtml(item.label) })) });
|
|
12
|
+
disable = input(false);
|
|
13
|
+
keySelected = model('');
|
|
14
|
+
otherConfig = input(); // required and only apply when type is other
|
|
15
|
+
// #region OUTPUT
|
|
16
|
+
outKeySelected = output();
|
|
17
|
+
/* VIEW CHILD */
|
|
18
|
+
buttonEl = viewChild('buttonEl');
|
|
19
|
+
constructor() {
|
|
20
|
+
effect(() => {
|
|
21
|
+
const config = this.otherConfig();
|
|
22
|
+
if (config) {
|
|
23
|
+
const background = config.background || colorStepContrastFromOrigin(config.color, 95)?.light;
|
|
24
|
+
const backgroundBadge = config.background_badge || colorStepContrastFromOrigin(config.color, 90)?.light;
|
|
25
|
+
const styles = `.libs-ui-button-tab-other[active="true"] {
|
|
26
|
+
background-color: ${background} !important;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.libs-ui-button-tab-other[active="true"] > .libs-ui-button-tab-label {
|
|
30
|
+
color: ${config.color} !important;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.libs-ui-button-tab-other[active="true"] > .libs-ui-button-tab-badge > .libs-ui-button-tab-badge-circle {
|
|
34
|
+
color: ${config.color} !important;
|
|
35
|
+
background-color: ${backgroundBadge} !important;
|
|
36
|
+
}`;
|
|
37
|
+
this.otherStyleClassButtonTabEl.innerHTML = styles;
|
|
38
|
+
this.buttonEl()?.nativeElement.append(this.otherStyleClassButtonTabEl);
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
/* FUNCTIONS */
|
|
43
|
+
async handlerSelectItem(event, item) {
|
|
44
|
+
event.stopPropagation();
|
|
45
|
+
if (this.disable() || item.disable) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
this.keySelected.set(item.key);
|
|
49
|
+
this.outKeySelected.emit(this.keySelected());
|
|
50
|
+
}
|
|
51
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
52
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsButtonsTabComponent, isStandalone: true, selector: "libs_ui-components-buttons-tab", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null }, otherConfig: { classPropertyName: "otherConfig", publicName: "otherConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", outKeySelected: "outKeySelected" }, viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["buttonEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #buttonEl\n class=\"flex\">\n @for (item of items(); track item) {\n <div\n class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-' + item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ disable() || item.disable ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span\n LibsUiComponentsPopoverDirective\n class=\"w-full libs-ui-button-tab-label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge\n class=\"libs-ui-button-tab-badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'libs-ui-button-tab-badge-circle libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n", styles: [":host ::ng-deep .libs-ui-button-tab{border-radius:4px}:host ::ng-deep .libs-ui-button-tab>[class*=libs-ui-button-tab-label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab>[class*=libs-ui-button-tab-badge]>[class*=libs-ui-button-tab-badge-circle]{color:#6a7383;background-color:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover{background:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover>[class*=libs-ui-button-tab-label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab:hover>[class*=libs-ui-button-tab-badge]>[class*=libs-ui-button-tab-badge-circle]{color:#6a7383;background-color:#e6e7ea}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
53
|
+
}
|
|
54
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsTabComponent, decorators: [{
|
|
55
|
+
type: Component,
|
|
56
|
+
args: [{ selector: 'libs_ui-components-buttons-tab', standalone: true, imports: [TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #buttonEl\n class=\"flex\">\n @for (item of items(); track item) {\n <div\n class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-' + item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ disable() || item.disable ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span\n LibsUiComponentsPopoverDirective\n class=\"w-full libs-ui-button-tab-label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge\n class=\"libs-ui-button-tab-badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'libs-ui-button-tab-badge-circle libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n", styles: [":host ::ng-deep .libs-ui-button-tab{border-radius:4px}:host ::ng-deep .libs-ui-button-tab>[class*=libs-ui-button-tab-label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab>[class*=libs-ui-button-tab-badge]>[class*=libs-ui-button-tab-badge-circle]{color:#6a7383;background-color:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover{background:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover>[class*=libs-ui-button-tab-label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab:hover>[class*=libs-ui-button-tab-badge]>[class*=libs-ui-button-tab-badge-circle]{color:#6a7383;background-color:#e6e7ea}\n"] }]
|
|
57
|
+
}], ctorParameters: () => [] });
|
|
58
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFiLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3RhYi9zcmMvdGFiLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3RhYi9zcmMvdGFiLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFjLEtBQUssRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUN4SCxPQUFPLEVBQUUsOEJBQThCLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMzRSxPQUFPLEVBQUUsZ0NBQWdDLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQztBQUMvRSxPQUFPLEVBQUUsMkJBQTJCLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDekUsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7QUFZdEQsTUFBTSxPQUFPLG1DQUFtQztJQUM3QiwwQkFBMEIsR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBRTlFLGdCQUFnQjtJQUNQLEtBQUssR0FBRyxLQUFLLENBQUMsUUFBUSxDQUF1QyxFQUFFLFNBQVMsRUFBRSxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLElBQUksRUFBRSxFQUFFLENBQUMsQ0FBQyxFQUFFLEdBQUcsSUFBSSxFQUFFLEtBQUssRUFBRSxVQUFVLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUMsQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUN4SixPQUFPLEdBQUcsS0FBSyxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ2hDLFdBQVcsR0FBRyxLQUFLLENBQVMsRUFBRSxDQUFDLENBQUM7SUFDaEMsV0FBVyxHQUFHLEtBQUssRUFBZ0IsQ0FBQyxDQUFDLDZDQUE2QztJQUUzRixpQkFBaUI7SUFDUixjQUFjLEdBQUcsTUFBTSxFQUFVLENBQUM7SUFFM0MsZ0JBQWdCO0lBQ0MsUUFBUSxHQUFHLFNBQVMsQ0FBYSxVQUFVLENBQUMsQ0FBQztJQUU5RDtRQUNFLE1BQU0sQ0FBQyxHQUFHLEVBQUU7WUFDVixNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsV0FBVyxFQUFFLENBQUM7WUFFbEMsSUFBSSxNQUFNLEVBQUUsQ0FBQztnQkFDWCxNQUFNLFVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxJQUFJLDJCQUEyQixDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsRUFBRSxDQUFDLEVBQUUsS0FBSyxDQUFDO2dCQUM3RixNQUFNLGVBQWUsR0FBRyxNQUFNLENBQUMsZ0JBQWdCLElBQUksMkJBQTJCLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxFQUFFLENBQUMsRUFBRSxLQUFLLENBQUM7Z0JBQ3hHLE1BQU0sTUFBTSxHQUFHO2tDQUNXLFVBQVU7Ozs7dUJBSXJCLE1BQU0sQ0FBQyxLQUFLOzs7O3VCQUlaLE1BQU0sQ0FBQyxLQUFLO2tDQUNELGVBQWU7Y0FDbkMsQ0FBQztnQkFDUCxJQUFJLENBQUMsMEJBQTBCLENBQUMsU0FBUyxHQUFHLE1BQU0sQ0FBQztnQkFDbkQsSUFBSSxDQUFDLFFBQVEsRUFBRSxFQUFFLGFBQWEsQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLDBCQUEwQixDQUFDLENBQUM7WUFDekUsQ0FBQztRQUNILENBQUMsQ0FBQyxDQUFDO0lBQ0wsQ0FBQztJQUVELGVBQWU7SUFDTCxLQUFLLENBQUMsaUJBQWlCLENBQUMsS0FBaUIsRUFBRSxJQUFnQjtRQUNuRSxLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDeEIsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1lBQ25DLE9BQU87UUFDVCxDQUFDO1FBQ0QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQy9CLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQyxDQUFDO0lBQy9DLENBQUM7d0dBaERVLG1DQUFtQzs0RkFBbkMsbUNBQW1DLHN6QkNoQmhELG1xQ0EyQkEsOG9CRGRZLGVBQWUsNEZBQUUsZ0NBQWdDLG9nQkFBRSw4QkFBOEI7OzRGQUdoRixtQ0FBbUM7a0JBVC9DLFNBQVM7K0JBRUUsZ0NBQWdDLGNBRzlCLElBQUksV0FDUCxDQUFDLGVBQWUsRUFBRSxnQ0FBZ0MsRUFBRSw4QkFBOEIsQ0FBQyxtQkFDM0UsdUJBQXVCLENBQUMsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGVmZmVjdCwgRWxlbWVudFJlZiwgaW5wdXQsIG1vZGVsLCBvdXRwdXQsIHZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1iYWRnZSc7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzUG9wb3ZlckNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtcG9wb3Zlcic7XG5pbXBvcnQgeyBjb2xvclN0ZXBDb250cmFzdEZyb21PcmlnaW4sIGVzY2FwZUh0bWwgfSBmcm9tICdAbGlicy11aS91dGlscyc7XG5pbXBvcnQgeyBUcmFuc2xhdGVNb2R1bGUgfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcbmltcG9ydCB7IElCdXR0b25UYWIsIElPdGhlckNvbmZpZyB9IGZyb20gJy4vaW50ZXJmYWNlcy90YWIuaW50ZXJmYWNlJztcblxuQENvbXBvbmVudCh7XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LXNlbGVjdG9yXG4gIHNlbGVjdG9yOiAnbGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtdGFiJyxcbiAgdGVtcGxhdGVVcmw6ICcuL3RhYi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90YWIuY29tcG9uZW50LnNjc3MnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbVHJhbnNsYXRlTW9kdWxlLCBMaWJzVWlDb21wb25lbnRzUG9wb3ZlckNvbXBvbmVudCwgTGlic1VpQ29tcG9uZW50c0JhZGdlQ29tcG9uZW50XSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNCdXR0b25zVGFiQ29tcG9uZW50IHtcbiAgcHJpdmF0ZSByZWFkb25seSBvdGhlclN0eWxlQ2xhc3NCdXR0b25UYWJFbCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoJ3N0eWxlJyk7XG5cbiAgLy8gI3JlZ2lvbiBJTlBVVFxuICByZWFkb25seSBpdGVtcyA9IGlucHV0LnJlcXVpcmVkPEFycmF5PElCdXR0b25UYWI+LCBBcnJheTxJQnV0dG9uVGFiPj4oeyB0cmFuc2Zvcm06IChkYXRhKSA9PiBkYXRhLm1hcCgoaXRlbSkgPT4gKHsgLi4uaXRlbSwgbGFiZWw6IGVzY2FwZUh0bWwoaXRlbS5sYWJlbCkgfSkpIH0pO1xuICByZWFkb25seSBkaXNhYmxlID0gaW5wdXQ8Ym9vbGVhbj4oZmFsc2UpO1xuICByZWFkb25seSBrZXlTZWxlY3RlZCA9IG1vZGVsPHN0cmluZz4oJycpO1xuICByZWFkb25seSBvdGhlckNvbmZpZyA9IGlucHV0PElPdGhlckNvbmZpZz4oKTsgLy8gcmVxdWlyZWQgYW5kIG9ubHkgYXBwbHkgd2hlbiB0eXBlIGlzIG90aGVyXG5cbiAgLy8gI3JlZ2lvbiBPVVRQVVRcbiAgcmVhZG9ubHkgb3V0S2V5U2VsZWN0ZWQgPSBvdXRwdXQ8c3RyaW5nPigpO1xuXG4gIC8qIFZJRVcgQ0hJTEQgKi9cbiAgcHJpdmF0ZSByZWFkb25seSBidXR0b25FbCA9IHZpZXdDaGlsZDxFbGVtZW50UmVmPignYnV0dG9uRWwnKTtcblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBlZmZlY3QoKCkgPT4ge1xuICAgICAgY29uc3QgY29uZmlnID0gdGhpcy5vdGhlckNvbmZpZygpO1xuXG4gICAgICBpZiAoY29uZmlnKSB7XG4gICAgICAgIGNvbnN0IGJhY2tncm91bmQgPSBjb25maWcuYmFja2dyb3VuZCB8fCBjb2xvclN0ZXBDb250cmFzdEZyb21PcmlnaW4oY29uZmlnLmNvbG9yLCA5NSk/LmxpZ2h0O1xuICAgICAgICBjb25zdCBiYWNrZ3JvdW5kQmFkZ2UgPSBjb25maWcuYmFja2dyb3VuZF9iYWRnZSB8fCBjb2xvclN0ZXBDb250cmFzdEZyb21PcmlnaW4oY29uZmlnLmNvbG9yLCA5MCk/LmxpZ2h0O1xuICAgICAgICBjb25zdCBzdHlsZXMgPSBgLmxpYnMtdWktYnV0dG9uLXRhYi1vdGhlclthY3RpdmU9XCJ0cnVlXCJdIHtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtiYWNrZ3JvdW5kfSAhaW1wb3J0YW50O1xuICAgICAgICAgICAgfVxuICAgICAgICAgIFxuICAgICAgICAgICAgLmxpYnMtdWktYnV0dG9uLXRhYi1vdGhlclthY3RpdmU9XCJ0cnVlXCJdID4gLmxpYnMtdWktYnV0dG9uLXRhYi1sYWJlbCB7XG4gICAgICAgICAgICAgIGNvbG9yOiAke2NvbmZpZy5jb2xvcn0gIWltcG9ydGFudDtcbiAgICAgICAgICAgIH1cbiAgICAgICAgICBcbiAgICAgICAgICAgIC5saWJzLXVpLWJ1dHRvbi10YWItb3RoZXJbYWN0aXZlPVwidHJ1ZVwiXSA+IC5saWJzLXVpLWJ1dHRvbi10YWItYmFkZ2UgPiAubGlicy11aS1idXR0b24tdGFiLWJhZGdlLWNpcmNsZSB7XG4gICAgICAgICAgICAgIGNvbG9yOiAke2NvbmZpZy5jb2xvcn0gIWltcG9ydGFudDtcbiAgICAgICAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtiYWNrZ3JvdW5kQmFkZ2V9ICFpbXBvcnRhbnQ7XG4gICAgICAgICAgICB9YDtcbiAgICAgICAgdGhpcy5vdGhlclN0eWxlQ2xhc3NCdXR0b25UYWJFbC5pbm5lckhUTUwgPSBzdHlsZXM7XG4gICAgICAgIHRoaXMuYnV0dG9uRWwoKT8ubmF0aXZlRWxlbWVudC5hcHBlbmQodGhpcy5vdGhlclN0eWxlQ2xhc3NCdXR0b25UYWJFbCk7XG4gICAgICB9XG4gICAgfSk7XG4gIH1cblxuICAvKiBGVU5DVElPTlMgKi9cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJTZWxlY3RJdGVtKGV2ZW50OiBNb3VzZUV2ZW50LCBpdGVtOiBJQnV0dG9uVGFiKSB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgaWYgKHRoaXMuZGlzYWJsZSgpIHx8IGl0ZW0uZGlzYWJsZSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLmtleVNlbGVjdGVkLnNldChpdGVtLmtleSk7XG4gICAgdGhpcy5vdXRLZXlTZWxlY3RlZC5lbWl0KHRoaXMua2V5U2VsZWN0ZWQoKSk7XG4gIH1cbn1cbiIsIjxkaXZcbiAgI2J1dHRvbkVsXG4gIGNsYXNzPVwiZmxleFwiPlxuICBAZm9yIChpdGVtIG9mIGl0ZW1zKCk7IHRyYWNrIGl0ZW0pIHtcbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIGxpYnMtdWktYnV0dG9uLXRhYiB7eyAnbGlicy11aS1idXR0b24tdGFiLScgKyBpdGVtLnR5cGUgfX0ge3sgaXRlbS5jbGFzcyB8fCAncHgtWzhweF0gbXgtWzhweF0gcHktWzRweF0nIH19IHt7IGRpc2FibGUoKSB8fCBpdGVtLmRpc2FibGUgPyAncG9pbnRlci1ldmVudHMtbm9uZSBjdXJzb3ItZGVmYXVsdCcgOiAnY3Vyc29yLXBvaW50ZXInIH19XCJcbiAgICAgIFthdHRyLmFjdGl2ZV09XCJpdGVtLmtleSA9PT0ga2V5U2VsZWN0ZWQoKVwiXG4gICAgICAoY2xpY2spPVwiaGFuZGxlclNlbGVjdEl0ZW0oJGV2ZW50LCBpdGVtKVwiPlxuICAgICAgPHNwYW5cbiAgICAgICAgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJEaXJlY3RpdmVcbiAgICAgICAgY2xhc3M9XCJ3LWZ1bGwgbGlicy11aS1idXR0b24tdGFiLWxhYmVsIHt7IGl0ZW0uY2xhc3NMYWJlbCB8fCAnbGlicy11aS1mb250LWg2cicgfX1cIlxuICAgICAgICBbY2xhc3MubGlicy11aS1kaXNhYmxlXT1cImRpc2FibGUoKSB8fCBpdGVtLmRpc2FibGVcIlxuICAgICAgICBbdHlwZV09XCIndGV4dCdcIlxuICAgICAgICBbYXR0ci5hY3RpdmVdPVwiaXRlbS5rZXkgPT09IGtleVNlbGVjdGVkKClcIlxuICAgICAgICBbaWdub3JlU3RvcFByb3BhZ2F0aW9uRXZlbnRdPVwidHJ1ZVwiXG4gICAgICAgIFtpbm5lckh0bWxdPVwiaXRlbS5sYWJlbCB8IHRyYW5zbGF0ZVwiPjwvc3Bhbj5cbiAgICAgIEBpZiAoaXRlbS5jb3VudCAhPT0gdW5kZWZpbmVkKSB7XG4gICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYmFkZ2VcbiAgICAgICAgICBjbGFzcz1cImxpYnMtdWktYnV0dG9uLXRhYi1iYWRnZVwiXG4gICAgICAgICAgW21vZGVdPVwiaXRlbS5tb2RlQ291bnQgfHwgJ3grJ1wiXG4gICAgICAgICAgW2NvdW50XT1cIml0ZW0uY291bnRcIlxuICAgICAgICAgIFttYXhDb3VudF09XCJpdGVtLm1heENvdW50IHx8IDk5XCJcbiAgICAgICAgICBbY2xhc3NDaXJjbGVdPVwiJ2xpYnMtdWktYnV0dG9uLXRhYi1iYWRnZS1jaXJjbGUgbGlicy11aS1mb250LWg2cidcIiAvPlxuICAgICAgfVxuICAgIDwvZGl2PlxuICB9XG48L2Rpdj5cbiJdfQ==
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, model, output, viewChild, effect, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';
|
|
4
|
+
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
5
|
+
import { escapeHtml, colorStepContrastFromOrigin } from '@libs-ui/utils';
|
|
6
|
+
import * as i1 from '@ngx-translate/core';
|
|
7
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
8
|
+
|
|
9
|
+
class LibsUiComponentsButtonsTabComponent {
|
|
10
|
+
otherStyleClassButtonTabEl = document.createElement('style');
|
|
11
|
+
// #region INPUT
|
|
12
|
+
items = input.required({ transform: (data) => data.map((item) => ({ ...item, label: escapeHtml(item.label) })) });
|
|
13
|
+
disable = input(false);
|
|
14
|
+
keySelected = model('');
|
|
15
|
+
otherConfig = input(); // required and only apply when type is other
|
|
16
|
+
// #region OUTPUT
|
|
17
|
+
outKeySelected = output();
|
|
18
|
+
/* VIEW CHILD */
|
|
19
|
+
buttonEl = viewChild('buttonEl');
|
|
20
|
+
constructor() {
|
|
21
|
+
effect(() => {
|
|
22
|
+
const config = this.otherConfig();
|
|
23
|
+
if (config) {
|
|
24
|
+
const background = config.background || colorStepContrastFromOrigin(config.color, 95)?.light;
|
|
25
|
+
const backgroundBadge = config.background_badge || colorStepContrastFromOrigin(config.color, 90)?.light;
|
|
26
|
+
const styles = `.libs-ui-button-tab-other[active="true"] {
|
|
27
|
+
background-color: ${background} !important;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.libs-ui-button-tab-other[active="true"] > .libs-ui-button-tab-label {
|
|
31
|
+
color: ${config.color} !important;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.libs-ui-button-tab-other[active="true"] > .libs-ui-button-tab-badge > .libs-ui-button-tab-badge-circle {
|
|
35
|
+
color: ${config.color} !important;
|
|
36
|
+
background-color: ${backgroundBadge} !important;
|
|
37
|
+
}`;
|
|
38
|
+
this.otherStyleClassButtonTabEl.innerHTML = styles;
|
|
39
|
+
this.buttonEl()?.nativeElement.append(this.otherStyleClassButtonTabEl);
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
/* FUNCTIONS */
|
|
44
|
+
async handlerSelectItem(event, item) {
|
|
45
|
+
event.stopPropagation();
|
|
46
|
+
if (this.disable() || item.disable) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
this.keySelected.set(item.key);
|
|
50
|
+
this.outKeySelected.emit(this.keySelected());
|
|
51
|
+
}
|
|
52
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
53
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsButtonsTabComponent, isStandalone: true, selector: "libs_ui-components-buttons-tab", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, keySelected: { classPropertyName: "keySelected", publicName: "keySelected", isSignal: true, isRequired: false, transformFunction: null }, otherConfig: { classPropertyName: "otherConfig", publicName: "otherConfig", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keySelected: "keySelectedChange", outKeySelected: "outKeySelected" }, viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["buttonEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n #buttonEl\n class=\"flex\">\n @for (item of items(); track item) {\n <div\n class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-' + item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ disable() || item.disable ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span\n LibsUiComponentsPopoverDirective\n class=\"w-full libs-ui-button-tab-label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge\n class=\"libs-ui-button-tab-badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'libs-ui-button-tab-badge-circle libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n", styles: [":host ::ng-deep .libs-ui-button-tab{border-radius:4px}:host ::ng-deep .libs-ui-button-tab>[class*=libs-ui-button-tab-label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab>[class*=libs-ui-button-tab-badge]>[class*=libs-ui-button-tab-badge-circle]{color:#6a7383;background-color:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover{background:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover>[class*=libs-ui-button-tab-label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab:hover>[class*=libs-ui-button-tab-badge]>[class*=libs-ui-button-tab-badge-circle]{color:#6a7383;background-color:#e6e7ea}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsBadgeComponent, selector: "libs_ui-components-badge", inputs: ["popoverConfig", "active", "count", "mode", "maxCount", "ignoreMarginDefault", "classCircle", "ignoreStopPropagationEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
54
|
+
}
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsTabComponent, decorators: [{
|
|
56
|
+
type: Component,
|
|
57
|
+
args: [{ selector: 'libs_ui-components-buttons-tab', standalone: true, imports: [TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n #buttonEl\n class=\"flex\">\n @for (item of items(); track item) {\n <div\n class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-' + item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ disable() || item.disable ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span\n LibsUiComponentsPopoverDirective\n class=\"w-full libs-ui-button-tab-label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge\n class=\"libs-ui-button-tab-badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'libs-ui-button-tab-badge-circle libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n", styles: [":host ::ng-deep .libs-ui-button-tab{border-radius:4px}:host ::ng-deep .libs-ui-button-tab>[class*=libs-ui-button-tab-label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab>[class*=libs-ui-button-tab-badge]>[class*=libs-ui-button-tab-badge-circle]{color:#6a7383;background-color:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover{background:#f8f9fa}:host ::ng-deep .libs-ui-button-tab:hover>[class*=libs-ui-button-tab-label]{color:#6a7383}:host ::ng-deep .libs-ui-button-tab:hover>[class*=libs-ui-button-tab-badge]>[class*=libs-ui-button-tab-badge-circle]{color:#6a7383;background-color:#e6e7ea}\n"] }]
|
|
58
|
+
}], ctorParameters: () => [] });
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Generated bundle index. Do not edit.
|
|
62
|
+
*/
|
|
63
|
+
|
|
64
|
+
export { LibsUiComponentsButtonsTabComponent };
|
|
65
|
+
//# sourceMappingURL=libs-ui-components-buttons-tab.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"libs-ui-components-buttons-tab.mjs","sources":["../../../../../../libs-ui/components/buttons/tab/src/tab.component.ts","../../../../../../libs-ui/components/buttons/tab/src/tab.component.html","../../../../../../libs-ui/components/buttons/tab/src/libs-ui-components-buttons-tab.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, effect, ElementRef, input, model, output, viewChild } from '@angular/core';\nimport { LibsUiComponentsBadgeComponent } from '@libs-ui/components-badge';\nimport { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { colorStepContrastFromOrigin, escapeHtml } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IButtonTab, IOtherConfig } from './interfaces/tab.interface';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-tab',\n templateUrl: './tab.component.html',\n styleUrl: './tab.component.scss',\n standalone: true,\n imports: [TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsBadgeComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsButtonsTabComponent {\n private readonly otherStyleClassButtonTabEl = document.createElement('style');\n\n // #region INPUT\n readonly items = input.required<Array<IButtonTab>, Array<IButtonTab>>({ transform: (data) => data.map((item) => ({ ...item, label: escapeHtml(item.label) })) });\n readonly disable = input<boolean>(false);\n readonly keySelected = model<string>('');\n readonly otherConfig = input<IOtherConfig>(); // required and only apply when type is other\n\n // #region OUTPUT\n readonly outKeySelected = output<string>();\n\n /* VIEW CHILD */\n private readonly buttonEl = viewChild<ElementRef>('buttonEl');\n\n constructor() {\n effect(() => {\n const config = this.otherConfig();\n\n if (config) {\n const background = config.background || colorStepContrastFromOrigin(config.color, 95)?.light;\n const backgroundBadge = config.background_badge || colorStepContrastFromOrigin(config.color, 90)?.light;\n const styles = `.libs-ui-button-tab-other[active=\"true\"] {\n background-color: ${background} !important;\n }\n \n .libs-ui-button-tab-other[active=\"true\"] > .libs-ui-button-tab-label {\n color: ${config.color} !important;\n }\n \n .libs-ui-button-tab-other[active=\"true\"] > .libs-ui-button-tab-badge > .libs-ui-button-tab-badge-circle {\n color: ${config.color} !important;\n background-color: ${backgroundBadge} !important;\n }`;\n this.otherStyleClassButtonTabEl.innerHTML = styles;\n this.buttonEl()?.nativeElement.append(this.otherStyleClassButtonTabEl);\n }\n });\n }\n\n /* FUNCTIONS */\n protected async handlerSelectItem(event: MouseEvent, item: IButtonTab) {\n event.stopPropagation();\n if (this.disable() || item.disable) {\n return;\n }\n this.keySelected.set(item.key);\n this.outKeySelected.emit(this.keySelected());\n }\n}\n","<div\n #buttonEl\n class=\"flex\">\n @for (item of items(); track item) {\n <div\n class=\"flex items-center libs-ui-button-tab {{ 'libs-ui-button-tab-' + item.type }} {{ item.class || 'px-[8px] mx-[8px] py-[4px]' }} {{ disable() || item.disable ? 'pointer-events-none cursor-default' : 'cursor-pointer' }}\"\n [attr.active]=\"item.key === keySelected()\"\n (click)=\"handlerSelectItem($event, item)\">\n <span\n LibsUiComponentsPopoverDirective\n class=\"w-full libs-ui-button-tab-label {{ item.classLabel || 'libs-ui-font-h6r' }}\"\n [class.libs-ui-disable]=\"disable() || item.disable\"\n [type]=\"'text'\"\n [attr.active]=\"item.key === keySelected()\"\n [ignoreStopPropagationEvent]=\"true\"\n [innerHtml]=\"item.label | translate\"></span>\n @if (item.count !== undefined) {\n <libs_ui-components-badge\n class=\"libs-ui-button-tab-badge\"\n [mode]=\"item.modeCount || 'x+'\"\n [count]=\"item.count\"\n [maxCount]=\"item.maxCount || 99\"\n [classCircle]=\"'libs-ui-button-tab-badge-circle libs-ui-font-h6r'\" />\n }\n </div>\n }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { TYPE_BADGE_MODE } from '@libs-ui/components-badge';
|
|
2
|
+
export interface IButtonTab {
|
|
3
|
+
key: string;
|
|
4
|
+
label: string;
|
|
5
|
+
type: TYPE_BUTTON_TAB;
|
|
6
|
+
count?: number;
|
|
7
|
+
modeCount?: TYPE_BADGE_MODE;
|
|
8
|
+
maxCount?: number;
|
|
9
|
+
class?: string;
|
|
10
|
+
classLabel?: string;
|
|
11
|
+
disable?: boolean;
|
|
12
|
+
data?: any;
|
|
13
|
+
}
|
|
14
|
+
export interface IOtherConfig {
|
|
15
|
+
color: string;
|
|
16
|
+
background?: string;
|
|
17
|
+
background_badge?: string;
|
|
18
|
+
}
|
|
19
|
+
export type TYPE_BUTTON_TAB = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other' | string;
|
package/package.json
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@libs-ui/components-buttons-tab",
|
|
3
|
+
"version": "0.1.1-1",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@angular/core": ">=18.0.0",
|
|
6
|
+
"@libs-ui/components-badge": "0.1.1-1",
|
|
7
|
+
"@libs-ui/components-popover": "0.1.1-1",
|
|
8
|
+
"@libs-ui/utils": "0.1.1-1",
|
|
9
|
+
"@ngx-translate/core": "^15.0.0"
|
|
10
|
+
},
|
|
11
|
+
"sideEffects": false,
|
|
12
|
+
"module": "fesm2022/libs-ui-components-buttons-tab.mjs",
|
|
13
|
+
"typings": "index.d.ts",
|
|
14
|
+
"exports": {
|
|
15
|
+
"./package.json": {
|
|
16
|
+
"default": "./package.json"
|
|
17
|
+
},
|
|
18
|
+
".": {
|
|
19
|
+
"types": "./index.d.ts",
|
|
20
|
+
"esm2022": "./esm2022/libs-ui-components-buttons-tab.mjs",
|
|
21
|
+
"esm": "./esm2022/libs-ui-components-buttons-tab.mjs",
|
|
22
|
+
"default": "./fesm2022/libs-ui-components-buttons-tab.mjs"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"tslib": "^2.3.0"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { IButtonTab, IOtherConfig } from './interfaces/tab.interface';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class LibsUiComponentsButtonsTabComponent {
|
|
4
|
+
private readonly otherStyleClassButtonTabEl;
|
|
5
|
+
readonly items: import("@angular/core").InputSignalWithTransform<IButtonTab[], IButtonTab[]>;
|
|
6
|
+
readonly disable: import("@angular/core").InputSignal<boolean>;
|
|
7
|
+
readonly keySelected: import("@angular/core").ModelSignal<string>;
|
|
8
|
+
readonly otherConfig: import("@angular/core").InputSignal<IOtherConfig | undefined>;
|
|
9
|
+
readonly outKeySelected: import("@angular/core").OutputEmitterRef<string>;
|
|
10
|
+
private readonly buttonEl;
|
|
11
|
+
constructor();
|
|
12
|
+
protected handlerSelectItem(event: MouseEvent, item: IButtonTab): Promise<void>;
|
|
13
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsButtonsTabComponent, never>;
|
|
14
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsButtonsTabComponent, "libs_ui-components-buttons-tab", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "disable": { "alias": "disable"; "required": false; "isSignal": true; }; "keySelected": { "alias": "keySelected"; "required": false; "isSignal": true; }; "otherConfig": { "alias": "otherConfig"; "required": false; "isSignal": true; }; }, { "keySelected": "keySelectedChange"; "outKeySelected": "outKeySelected"; }, never, never, true, never>;
|
|
15
|
+
}
|