@libs-ui/components-buttons-status 0.2.29 → 0.2.30-6.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +136 -2
- package/esm2022/interfaces/status.interface.mjs +1 -1
- package/esm2022/status.component.mjs +8 -10
- package/fesm2022/libs-ui-components-buttons-status.mjs +8 -10
- package/fesm2022/libs-ui-components-buttons-status.mjs.map +1 -1
- package/interfaces/status.interface.d.ts +6 -2
- package/package.json +6 -3
package/README.md
CHANGED
|
@@ -1,3 +1,137 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Button Status
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
## Giới thiệu
|
|
4
|
+
|
|
5
|
+
`@libs-ui/components-buttons-status` là một component hiển thị trạng thái dưới dạng button, hỗ trợ nhiều kiểu màu khác nhau và tuỳ chỉnh thông tin popover.
|
|
6
|
+
|
|
7
|
+
## Tính năng
|
|
8
|
+
|
|
9
|
+
- Hiển thị nhãn và icon status (nếu cấu hình)
|
|
10
|
+
- Hỗ trợ nhiều kiểu màu trạng thái qua input `type` (`blue`, `green`, `red`, `orange`, `yellow`, `cyan`, `purple`, `brown`, `other`)
|
|
11
|
+
- Cho phép cấu hình màu và background riêng cho type `other`
|
|
12
|
+
- Hỗ trợ popover cho icon bên trái hoặc phải qua `popoverIconLeft`/`popoverIconRight`
|
|
13
|
+
- Tuỳ chỉnh CSS classes: `classInclude`, `classLabelInclude`, `classIconLeft`, `classIconRight`
|
|
14
|
+
- Kích thước tự động phù hợp với nội dung
|
|
15
|
+
|
|
16
|
+
## Cài đặt
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @libs-ui/components-buttons-status
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
hoặc
|
|
23
|
+
|
|
24
|
+
```bash
|
|
25
|
+
yarn add @libs-ui/components-buttons-status
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Sử dụng
|
|
29
|
+
|
|
30
|
+
### Inline Template
|
|
31
|
+
|
|
32
|
+
```typescript
|
|
33
|
+
import { Component } from '@angular/core';
|
|
34
|
+
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus, TYPE_BUTTON_STATUS } from '@libs-ui/components-buttons-status';
|
|
35
|
+
|
|
36
|
+
@Component({
|
|
37
|
+
selector: 'app-example',
|
|
38
|
+
standalone: true,
|
|
39
|
+
imports: [LibsUiComponentsButtonsStatusComponent],
|
|
40
|
+
template: `
|
|
41
|
+
<libs_ui-components-buttons-status
|
|
42
|
+
[config]="statusConfig">
|
|
43
|
+
</libs_ui-components-buttons-status>
|
|
44
|
+
`
|
|
45
|
+
})
|
|
46
|
+
export class ExampleComponent {
|
|
47
|
+
statusConfig: IButtonStatus = {
|
|
48
|
+
label: 'Đang hoạt động',
|
|
49
|
+
type: 'green'
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
### File HTML riêng
|
|
55
|
+
|
|
56
|
+
```typescript
|
|
57
|
+
import { Component } from '@angular/core';
|
|
58
|
+
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
|
|
59
|
+
|
|
60
|
+
@Component({
|
|
61
|
+
selector: 'app-example',
|
|
62
|
+
standalone: true,
|
|
63
|
+
imports: [LibsUiComponentsButtonsStatusComponent],
|
|
64
|
+
templateUrl: './example.component.html'
|
|
65
|
+
})
|
|
66
|
+
export class ExampleComponent {
|
|
67
|
+
statusConfig: IButtonStatus = { label: 'Đang chờ', type: 'yellow' };
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
```html
|
|
72
|
+
<libs_ui-components-buttons-status
|
|
73
|
+
[config]="statusConfig">
|
|
74
|
+
</libs_ui-components-buttons-status>
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Công nghệ sử dụng
|
|
78
|
+
|
|
79
|
+
- **Angular 18** standalone component, Signals
|
|
80
|
+
- **Tailwind CSS** 3.x
|
|
81
|
+
|
|
82
|
+
## API Reference
|
|
83
|
+
|
|
84
|
+
### Inputs
|
|
85
|
+
|
|
86
|
+
| Tên | Kiểu | Mặc định | Mô tả |
|
|
87
|
+
|---------|-----------------|----------|--------------------------------------------------------------|
|
|
88
|
+
| config | `IButtonStatus` | required | Thông tin cấu hình cho trạng thái (nhãn, màu, icon, popover). |
|
|
89
|
+
|
|
90
|
+
### Outputs
|
|
91
|
+
|
|
92
|
+
Không có
|
|
93
|
+
|
|
94
|
+
### Interfaces
|
|
95
|
+
|
|
96
|
+
#### `IButtonStatus`
|
|
97
|
+
```typescript
|
|
98
|
+
export interface IButtonStatus {
|
|
99
|
+
label?: string;
|
|
100
|
+
type: TYPE_BUTTON_STATUS;
|
|
101
|
+
otherConfig?: {
|
|
102
|
+
color: string;
|
|
103
|
+
background?: string;
|
|
104
|
+
};
|
|
105
|
+
classInclude?: string;
|
|
106
|
+
classLabelInclude?: string;
|
|
107
|
+
classIconLeft?: string;
|
|
108
|
+
popoverIconLeft?: IPopover;
|
|
109
|
+
classIconRight?: string;
|
|
110
|
+
popoverIconRight?: IPopover;
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
Mô tả:
|
|
114
|
+
- `label`: Nhãn hiển thị của trạng thái.
|
|
115
|
+
- `type`: Kiểu màu/trạng thái (`TYPE_BUTTON_STATUS`).
|
|
116
|
+
- `otherConfig`: Cấu hình màu chữ và nền khi `type` là `other`.
|
|
117
|
+
- `classInclude`: CSS class thêm cho container của status.
|
|
118
|
+
- `classLabelInclude`: CSS class thêm cho nhãn.
|
|
119
|
+
- `classIconLeft`: CSS class thêm cho icon bên trái.
|
|
120
|
+
- `popoverIconLeft`: Cấu hình popover cho icon bên trái.
|
|
121
|
+
- `classIconRight`: CSS class thêm cho icon bên phải.
|
|
122
|
+
- `popoverIconRight`: Cấu hình popover cho icon bên phải.
|
|
123
|
+
|
|
124
|
+
#### `TYPE_BUTTON_STATUS`
|
|
125
|
+
```typescript
|
|
126
|
+
export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other';
|
|
127
|
+
```
|
|
128
|
+
Mô tả:
|
|
129
|
+
- `blue`: Màu xanh dương (thông tin chung).
|
|
130
|
+
- `green`: Màu xanh lá cây (thành công).
|
|
131
|
+
- `red`: Màu đỏ (lỗi hoặc cảnh báo).
|
|
132
|
+
- `orange`: Màu cam (cảnh báo).
|
|
133
|
+
- `yellow`: Màu vàng (đang chờ, thông tin).
|
|
134
|
+
- `cyan`: Màu xanh da trời (thông tin phụ trợ).
|
|
135
|
+
- `purple`: Màu tím (nhấn mạnh, nổi bật).
|
|
136
|
+
- `brown`: Màu nâu (trung tính).
|
|
137
|
+
- `other`: Chủ đề tuỳ chỉnh; cấu hình qua `otherConfig`.
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhdHVzLmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3N0YXR1cy9zcmMvaW50ZXJmYWNlcy9zdGF0dXMuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJUG9wb3ZlciB9IGZyb20gXCJAbGlicy11aS9jb21wb25lbnRzLXBvcG92ZXJcIjtcblxuZXhwb3J0IGludGVyZmFjZSBJQnV0dG9uU3RhdHVzIHtcbiAgbGFiZWw/OiBzdHJpbmc7XG4gIHR5cGU6IFRZUEVfQlVUVE9OX1NUQVRVUztcbiAgb3RoZXJDb25maWc/OiB7XG4gICAgY29sb3I6IHN0cmluZztcbiAgICBiYWNrZ3JvdW5kPzogc3RyaW5nO1xuICB9OyAvLyByZXF1aXJlZCBhbmQgb25seSBhcHBseSB3aGVuIHR5cGUgaXMgb3RoZXJcbiAgY2xhc3NJbmNsdWRlPzogc3RyaW5nO1xuICBjbGFzc0xhYmVsSW5jbHVkZT86IHN0cmluZztcbiAgY2xhc3NJY29uTGVmdD86IHN0cmluZztcbiAgcG9wb3Zlckljb25MZWZ0PzogSVBvcG92ZXI7XG4gIGNsYXNzSWNvblJpZ2h0Pzogc3RyaW5nO1xuICBwb3BvdmVySWNvblJpZ2h0PzogSVBvcG92ZXI7XG59XG5cbmV4cG9ydCB0eXBlIFRZUEVfQlVUVE9OX1NUQVRVUyA9ICdibHVlJyB8ICdncmVlbicgfCAncmVkJyB8ICdvcmFuZ2UnIHwgJ3llbGxvdycgfCAnY3lhbicgfCAncHVycGxlJyB8ICdicm93bicgfCAnb3RoZXInOyJdfQ==
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
1
2
|
import { ChangeDetectionStrategy, Component, effect, inject, input, signal, untracked, viewChild } from '@angular/core';
|
|
2
3
|
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
3
4
|
import { LibsUiConfigProjectService } from '@libs-ui/services-config-project';
|
|
@@ -6,10 +7,10 @@ import { TranslateModule } from '@ngx-translate/core';
|
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
7
8
|
import * as i1 from "@ngx-translate/core";
|
|
8
9
|
export class LibsUiComponentsButtonsStatusComponent {
|
|
9
|
-
|
|
10
|
+
// #region PROPERTY
|
|
10
11
|
classBinding = signal('');
|
|
11
12
|
configProjectService = inject(LibsUiConfigProjectService);
|
|
12
|
-
|
|
13
|
+
// #region INPUT
|
|
13
14
|
config = input.required();
|
|
14
15
|
/* VIEW CHILD */
|
|
15
16
|
buttonEl = viewChild('buttonEl');
|
|
@@ -21,19 +22,16 @@ export class LibsUiComponentsButtonsStatusComponent {
|
|
|
21
22
|
untracked(() => this.classBinding.set(`libs-ui-buttons-status ${this.config().classInclude}`));
|
|
22
23
|
const keys = ['color', 'background'];
|
|
23
24
|
const config = this.config().type === 'other' ? this.config().otherConfig : get(this.configProjectService.ConfigButtonStatus, this.config().type);
|
|
24
|
-
keys.forEach(key => {
|
|
25
|
-
const color = get(config, key) || colorStepContrastFromOrigin(get(config, 'color'), 90)?.light;
|
|
25
|
+
keys.forEach((key) => {
|
|
26
|
+
const color = get(config, key) || colorStepContrastFromOrigin(get(config, 'color', ''), 90)?.light;
|
|
26
27
|
this.buttonEl()?.nativeElement.style.setProperty(`--libs-ui-button-status-${key}`, color);
|
|
27
28
|
});
|
|
28
29
|
}
|
|
29
30
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsButtonsStatusComponent, isStandalone: true, selector: "libs_ui-components-buttons-status", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["buttonEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i class=\"{{ config().classIconLeft }}\"></i>\n }\n <span LibsUiComponentsPopoverDirective\n
|
|
31
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsButtonsStatusComponent, isStandalone: true, selector: "libs_ui-components-buttons-status", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["buttonEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconLeft || config().popoverIconLeft?.ignoreShowPopover\"\n [type]=\"config().popoverIconLeft?.type || 'other'\"\n [config]=\"config().popoverIconLeft?.config\"\n class=\"{{ config().classIconLeft }}\"></i>\n }\n @if (config().label; as label) {\n <span LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"label | translate\"></span>\n }\n @if (config().classIconRight) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconRight || config().popoverIconRight?.ignoreShowPopover\"\n [type]=\"config().popoverIconRight?.type || 'other'\"\n [config]=\"config().popoverIconRight?.config\"\n class=\"{{ config().classIconRight }}\"></i>\n }\n</button>\n", styles: [".libs-ui-buttons-status{display:flex;align-items:center;justify-content:center;padding:1px 6px;border:none;border-radius:10px;cursor:text;width:max-content;background-color:var(--libs-ui-button-status-background, #E9F1FE)}.libs-ui-buttons-status span,.libs-ui-buttons-status i{color:var(--libs-ui-button-status-color, #2B80FF)}.libs-ui-buttons-status span:before,.libs-ui-buttons-status i:before{color:var(--libs-ui-button-status-color, #2B80FF)}.libs-ui-buttons-status:focus{outline:none;box-shadow:none}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
31
32
|
}
|
|
32
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsStatusComponent, decorators: [{
|
|
33
34
|
type: Component,
|
|
34
|
-
args: [{ selector: 'libs_ui-components-buttons-status', standalone: true, imports: [
|
|
35
|
-
TranslateModule,
|
|
36
|
-
LibsUiComponentsPopoverComponent
|
|
37
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i class=\"{{ config().classIconLeft }}\"></i>\n }\n <span LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"config().label | translate\"></span>\n</button>\n", styles: [".libs-ui-buttons-status{display:flex;align-items:center;justify-content:center;padding:1px 6px;border:none;border-radius:10px;cursor:text;width:max-content;background-color:var(--libs-ui-button-status-background, #E9F1FE)}.libs-ui-buttons-status span,.libs-ui-buttons-status i{color:var(--libs-ui-button-status-color, #2B80FF)}.libs-ui-buttons-status span:before,.libs-ui-buttons-status i:before{color:var(--libs-ui-button-status-color, #2B80FF)}.libs-ui-buttons-status:focus{outline:none;box-shadow:none}\n"] }]
|
|
35
|
+
args: [{ selector: 'libs_ui-components-buttons-status', standalone: true, imports: [TranslateModule, LibsUiComponentsPopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconLeft || config().popoverIconLeft?.ignoreShowPopover\"\n [type]=\"config().popoverIconLeft?.type || 'other'\"\n [config]=\"config().popoverIconLeft?.config\"\n class=\"{{ config().classIconLeft }}\"></i>\n }\n @if (config().label; as label) {\n <span LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"label | translate\"></span>\n }\n @if (config().classIconRight) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconRight || config().popoverIconRight?.ignoreShowPopover\"\n [type]=\"config().popoverIconRight?.type || 'other'\"\n [config]=\"config().popoverIconRight?.config\"\n class=\"{{ config().classIconRight }}\"></i>\n }\n</button>\n", styles: [".libs-ui-buttons-status{display:flex;align-items:center;justify-content:center;padding:1px 6px;border:none;border-radius:10px;cursor:text;width:max-content;background-color:var(--libs-ui-button-status-background, #E9F1FE)}.libs-ui-buttons-status span,.libs-ui-buttons-status i{color:var(--libs-ui-button-status-color, #2B80FF)}.libs-ui-buttons-status span:before,.libs-ui-buttons-status i:before{color:var(--libs-ui-button-status-color, #2B80FF)}.libs-ui-buttons-status:focus{outline:none;box-shadow:none}\n"] }]
|
|
38
36
|
}], ctorParameters: () => [] });
|
|
39
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
37
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhdHVzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3N0YXR1cy9zcmMvc3RhdHVzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3N0YXR1cy9zcmMvc3RhdHVzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLHVEQUF1RDtBQUN2RCxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBYyxNQUFNLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxTQUFTLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BJLE9BQU8sRUFBRSxnQ0FBZ0MsRUFBRSxNQUFNLDZCQUE2QixDQUFDO0FBQy9FLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQzlFLE9BQU8sRUFBRSwyQkFBMkIsRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUNsRSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7OztBQVl0RCxNQUFNLE9BQU8sc0NBQXNDO0lBQ2pELG1CQUFtQjtJQUNULFlBQVksR0FBRyxNQUFNLENBQUMsRUFBRSxDQUFDLENBQUM7SUFFNUIsb0JBQW9CLEdBQUcsTUFBTSxDQUFDLDBCQUEwQixDQUFDLENBQUM7SUFFbEUsZ0JBQWdCO0lBQ1AsTUFBTSxHQUFHLEtBQUssQ0FBQyxRQUFRLEVBQWlCLENBQUM7SUFFbEQsZ0JBQWdCO0lBQ0MsUUFBUSxHQUFHLFNBQVMsQ0FBYSxVQUFVLENBQUMsQ0FBQztJQUU5RDtRQUNFLE1BQU0sQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsY0FBYyxFQUFFLENBQUMsQ0FBQztJQUN0QyxDQUFDO0lBRUQsZUFBZTtJQUNQLEtBQUssQ0FBQyxjQUFjO1FBQzFCLFNBQVMsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxJQUFJLENBQUMsWUFBWSxDQUFDLEdBQUcsQ0FBQywwQkFBMEIsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLFlBQVksRUFBRSxDQUFDLENBQUMsQ0FBQztRQUMvRixNQUFNLElBQUksR0FBRyxDQUFDLE9BQU8sRUFBRSxZQUFZLENBQUMsQ0FBQztRQUNyQyxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsSUFBSSxLQUFLLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLFdBQVcsQ0FBQyxDQUFDLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxrQkFBa0IsRUFBRSxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFbEosSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDLEdBQUcsRUFBRSxFQUFFO1lBQ25CLE1BQU0sS0FBSyxHQUFHLEdBQUcsQ0FBQyxNQUFNLEVBQUUsR0FBRyxDQUFDLElBQUksMkJBQTJCLENBQUMsR0FBRyxDQUFNLE1BQU0sRUFBRSxPQUFPLEVBQUUsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLEVBQUUsS0FBSyxDQUFDO1lBRXhHLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxhQUFhLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQywyQkFBMkIsR0FBRyxFQUFFLEVBQUUsS0FBSyxDQUFDLENBQUM7UUFDNUYsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO3dHQTNCVSxzQ0FBc0M7NEZBQXRDLHNDQUFzQyx5VkNqQm5ELGcrQkF1QkEsb2pCRFRZLGVBQWUsNEZBQUUsZ0NBQWdDOzs0RkFHaEQsc0NBQXNDO2tCQVRsRCxTQUFTOytCQUVFLG1DQUFtQyxjQUdqQyxJQUFJLFdBQ1AsQ0FBQyxlQUFlLEVBQUUsZ0NBQWdDLENBQUMsbUJBQzNDLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyIvKiBlc2xpbnQtZGlzYWJsZSBAdHlwZXNjcmlwdC1lc2xpbnQvbm8tZXhwbGljaXQtYW55ICovXG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBlZmZlY3QsIEVsZW1lbnRSZWYsIGluamVjdCwgaW5wdXQsIHNpZ25hbCwgdW50cmFja2VkLCB2aWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNQb3BvdmVyQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1wb3BvdmVyJztcbmltcG9ydCB7IExpYnNVaUNvbmZpZ1Byb2plY3RTZXJ2aWNlIH0gZnJvbSAnQGxpYnMtdWkvc2VydmljZXMtY29uZmlnLXByb2plY3QnO1xuaW1wb3J0IHsgY29sb3JTdGVwQ29udHJhc3RGcm9tT3JpZ2luLCBnZXQgfSBmcm9tICdAbGlicy11aS91dGlscyc7XG5pbXBvcnQgeyBUcmFuc2xhdGVNb2R1bGUgfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcbmltcG9ydCB7IElCdXR0b25TdGF0dXMgfSBmcm9tICcuL2ludGVyZmFjZXMnO1xuXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1zdGF0dXMnLFxuICB0ZW1wbGF0ZVVybDogJy4vc3RhdHVzLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3N0YXR1cy5jb21wb25lbnQuc2NzcycsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtUcmFuc2xhdGVNb2R1bGUsIExpYnNVaUNvbXBvbmVudHNQb3BvdmVyQ29tcG9uZW50XSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNCdXR0b25zU3RhdHVzQ29tcG9uZW50IHtcbiAgLy8gI3JlZ2lvbiBQUk9QRVJUWVxuICBwcm90ZWN0ZWQgY2xhc3NCaW5kaW5nID0gc2lnbmFsKCcnKTtcblxuICBwcml2YXRlIGNvbmZpZ1Byb2plY3RTZXJ2aWNlID0gaW5qZWN0KExpYnNVaUNvbmZpZ1Byb2plY3RTZXJ2aWNlKTtcblxuICAvLyAjcmVnaW9uIElOUFVUXG4gIHJlYWRvbmx5IGNvbmZpZyA9IGlucHV0LnJlcXVpcmVkPElCdXR0b25TdGF0dXM+KCk7XG5cbiAgLyogVklFVyBDSElMRCAqL1xuICBwcml2YXRlIHJlYWRvbmx5IGJ1dHRvbkVsID0gdmlld0NoaWxkPEVsZW1lbnRSZWY+KCdidXR0b25FbCcpO1xuXG4gIGNvbnN0cnVjdG9yKCkge1xuICAgIGVmZmVjdCgoKSA9PiB0aGlzLnNldENsYXNzQnlUeXBlKCkpO1xuICB9XG5cbiAgLyogRlVOQ1RJT05TICovXG4gIHByaXZhdGUgYXN5bmMgc2V0Q2xhc3NCeVR5cGUoKSB7XG4gICAgdW50cmFja2VkKCgpID0+IHRoaXMuY2xhc3NCaW5kaW5nLnNldChgbGlicy11aS1idXR0b25zLXN0YXR1cyAke3RoaXMuY29uZmlnKCkuY2xhc3NJbmNsdWRlfWApKTtcbiAgICBjb25zdCBrZXlzID0gWydjb2xvcicsICdiYWNrZ3JvdW5kJ107XG4gICAgY29uc3QgY29uZmlnID0gdGhpcy5jb25maWcoKS50eXBlID09PSAnb3RoZXInID8gdGhpcy5jb25maWcoKS5vdGhlckNvbmZpZyA6IGdldCh0aGlzLmNvbmZpZ1Byb2plY3RTZXJ2aWNlLkNvbmZpZ0J1dHRvblN0YXR1cywgdGhpcy5jb25maWcoKS50eXBlKTtcblxuICAgIGtleXMuZm9yRWFjaCgoa2V5KSA9PiB7XG4gICAgICBjb25zdCBjb2xvciA9IGdldChjb25maWcsIGtleSkgfHwgY29sb3JTdGVwQ29udHJhc3RGcm9tT3JpZ2luKGdldDxhbnk+KGNvbmZpZywgJ2NvbG9yJywgJycpLCA5MCk/LmxpZ2h0O1xuXG4gICAgICB0aGlzLmJ1dHRvbkVsKCk/Lm5hdGl2ZUVsZW1lbnQuc3R5bGUuc2V0UHJvcGVydHkoYC0tbGlicy11aS1idXR0b24tc3RhdHVzLSR7a2V5fWAsIGNvbG9yKTtcbiAgICB9KTtcbiAgfVxufVxuIiwiPGJ1dHRvbiAjYnV0dG9uRWxcbiAgW2NsYXNzXT1cImNsYXNzQmluZGluZygpXCI+XG4gIEBpZiAoY29uZmlnKCkuY2xhc3NJY29uTGVmdCkge1xuICAgIDxpIExpYnNVaUNvbXBvbmVudHNQb3BvdmVyRGlyZWN0aXZlXG4gICAgICBbaWdub3JlU2hvd1BvcG92ZXJdPVwiIWNvbmZpZygpLnBvcG92ZXJJY29uTGVmdCB8fCBjb25maWcoKS5wb3BvdmVySWNvbkxlZnQ/Lmlnbm9yZVNob3dQb3BvdmVyXCJcbiAgICAgIFt0eXBlXT1cImNvbmZpZygpLnBvcG92ZXJJY29uTGVmdD8udHlwZSB8fCAnb3RoZXInXCJcbiAgICAgIFtjb25maWddPVwiY29uZmlnKCkucG9wb3Zlckljb25MZWZ0Py5jb25maWdcIlxuICAgICAgY2xhc3M9XCJ7eyBjb25maWcoKS5jbGFzc0ljb25MZWZ0IH19XCI+PC9pPlxuICB9XG4gIEBpZiAoY29uZmlnKCkubGFiZWw7IGFzIGxhYmVsKSB7XG4gICAgPHNwYW4gTGlic1VpQ29tcG9uZW50c1BvcG92ZXJEaXJlY3RpdmVcbiAgICAgIFt0eXBlXT1cIid0ZXh0J1wiXG4gICAgICBbY2xhc3NdPVwiY29uZmlnKCkuY2xhc3NMYWJlbEluY2x1ZGUgfHwgJ2xpYnMtdWktZm9udC1oNnInXCJcbiAgICAgIFtpbm5lckh0bWxdPVwibGFiZWwgfCB0cmFuc2xhdGVcIj48L3NwYW4+XG4gIH1cbiAgQGlmIChjb25maWcoKS5jbGFzc0ljb25SaWdodCkge1xuICAgIDxpIExpYnNVaUNvbXBvbmVudHNQb3BvdmVyRGlyZWN0aXZlXG4gICAgICBbaWdub3JlU2hvd1BvcG92ZXJdPVwiIWNvbmZpZygpLnBvcG92ZXJJY29uUmlnaHQgfHwgY29uZmlnKCkucG9wb3Zlckljb25SaWdodD8uaWdub3JlU2hvd1BvcG92ZXJcIlxuICAgICAgW3R5cGVdPVwiY29uZmlnKCkucG9wb3Zlckljb25SaWdodD8udHlwZSB8fCAnb3RoZXInXCJcbiAgICAgIFtjb25maWddPVwiY29uZmlnKCkucG9wb3Zlckljb25SaWdodD8uY29uZmlnXCJcbiAgICAgIGNsYXNzPVwie3sgY29uZmlnKCkuY2xhc3NJY29uUmlnaHQgfX1cIj48L2k+XG4gIH1cbjwvYnV0dG9uPlxuIl19
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, inject, input, viewChild, effect, untracked,
|
|
2
|
+
import { signal, inject, input, viewChild, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
4
4
|
import { LibsUiConfigProjectService } from '@libs-ui/services-config-project';
|
|
5
5
|
import { get, colorStepContrastFromOrigin } from '@libs-ui/utils';
|
|
6
6
|
import * as i1 from '@ngx-translate/core';
|
|
7
7
|
import { TranslateModule } from '@ngx-translate/core';
|
|
8
8
|
|
|
9
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
9
10
|
class LibsUiComponentsButtonsStatusComponent {
|
|
10
|
-
|
|
11
|
+
// #region PROPERTY
|
|
11
12
|
classBinding = signal('');
|
|
12
13
|
configProjectService = inject(LibsUiConfigProjectService);
|
|
13
|
-
|
|
14
|
+
// #region INPUT
|
|
14
15
|
config = input.required();
|
|
15
16
|
/* VIEW CHILD */
|
|
16
17
|
buttonEl = viewChild('buttonEl');
|
|
@@ -22,20 +23,17 @@ class LibsUiComponentsButtonsStatusComponent {
|
|
|
22
23
|
untracked(() => this.classBinding.set(`libs-ui-buttons-status ${this.config().classInclude}`));
|
|
23
24
|
const keys = ['color', 'background'];
|
|
24
25
|
const config = this.config().type === 'other' ? this.config().otherConfig : get(this.configProjectService.ConfigButtonStatus, this.config().type);
|
|
25
|
-
keys.forEach(key => {
|
|
26
|
-
const color = get(config, key) || colorStepContrastFromOrigin(get(config, 'color'), 90)?.light;
|
|
26
|
+
keys.forEach((key) => {
|
|
27
|
+
const color = get(config, key) || colorStepContrastFromOrigin(get(config, 'color', ''), 90)?.light;
|
|
27
28
|
this.buttonEl()?.nativeElement.style.setProperty(`--libs-ui-button-status-${key}`, color);
|
|
28
29
|
});
|
|
29
30
|
}
|
|
30
31
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
31
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsButtonsStatusComponent, isStandalone: true, selector: "libs_ui-components-buttons-status", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["buttonEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i class=\"{{ config().classIconLeft }}\"></i>\n }\n <span LibsUiComponentsPopoverDirective\n
|
|
32
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsButtonsStatusComponent, isStandalone: true, selector: "libs_ui-components-buttons-status", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "buttonEl", first: true, predicate: ["buttonEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<button #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconLeft || config().popoverIconLeft?.ignoreShowPopover\"\n [type]=\"config().popoverIconLeft?.type || 'other'\"\n [config]=\"config().popoverIconLeft?.config\"\n class=\"{{ config().classIconLeft }}\"></i>\n }\n @if (config().label; as label) {\n <span LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"label | translate\"></span>\n }\n @if (config().classIconRight) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconRight || config().popoverIconRight?.ignoreShowPopover\"\n [type]=\"config().popoverIconRight?.type || 'other'\"\n [config]=\"config().popoverIconRight?.config\"\n class=\"{{ config().classIconRight }}\"></i>\n }\n</button>\n", styles: [".libs-ui-buttons-status{display:flex;align-items:center;justify-content:center;padding:1px 6px;border:none;border-radius:10px;cursor:text;width:max-content;background-color:var(--libs-ui-button-status-background, #E9F1FE)}.libs-ui-buttons-status span,.libs-ui-buttons-status i{color:var(--libs-ui-button-status-color, #2B80FF)}.libs-ui-buttons-status span:before,.libs-ui-buttons-status i:before{color:var(--libs-ui-button-status-color, #2B80FF)}.libs-ui-buttons-status:focus{outline:none;box-shadow:none}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
32
33
|
}
|
|
33
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsStatusComponent, decorators: [{
|
|
34
35
|
type: Component,
|
|
35
|
-
args: [{ selector: 'libs_ui-components-buttons-status', standalone: true, imports: [
|
|
36
|
-
TranslateModule,
|
|
37
|
-
LibsUiComponentsPopoverComponent
|
|
38
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i class=\"{{ config().classIconLeft }}\"></i>\n }\n <span LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"config().label | translate\"></span>\n</button>\n", styles: [".libs-ui-buttons-status{display:flex;align-items:center;justify-content:center;padding:1px 6px;border:none;border-radius:10px;cursor:text;width:max-content;background-color:var(--libs-ui-button-status-background, #E9F1FE)}.libs-ui-buttons-status span,.libs-ui-buttons-status i{color:var(--libs-ui-button-status-color, #2B80FF)}.libs-ui-buttons-status span:before,.libs-ui-buttons-status i:before{color:var(--libs-ui-button-status-color, #2B80FF)}.libs-ui-buttons-status:focus{outline:none;box-shadow:none}\n"] }]
|
|
36
|
+
args: [{ selector: 'libs_ui-components-buttons-status', standalone: true, imports: [TranslateModule, LibsUiComponentsPopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconLeft || config().popoverIconLeft?.ignoreShowPopover\"\n [type]=\"config().popoverIconLeft?.type || 'other'\"\n [config]=\"config().popoverIconLeft?.config\"\n class=\"{{ config().classIconLeft }}\"></i>\n }\n @if (config().label; as label) {\n <span LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"label | translate\"></span>\n }\n @if (config().classIconRight) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconRight || config().popoverIconRight?.ignoreShowPopover\"\n [type]=\"config().popoverIconRight?.type || 'other'\"\n [config]=\"config().popoverIconRight?.config\"\n class=\"{{ config().classIconRight }}\"></i>\n }\n</button>\n", styles: [".libs-ui-buttons-status{display:flex;align-items:center;justify-content:center;padding:1px 6px;border:none;border-radius:10px;cursor:text;width:max-content;background-color:var(--libs-ui-button-status-background, #E9F1FE)}.libs-ui-buttons-status span,.libs-ui-buttons-status i{color:var(--libs-ui-button-status-color, #2B80FF)}.libs-ui-buttons-status span:before,.libs-ui-buttons-status i:before{color:var(--libs-ui-button-status-color, #2B80FF)}.libs-ui-buttons-status:focus{outline:none;box-shadow:none}\n"] }]
|
|
39
37
|
}], ctorParameters: () => [] });
|
|
40
38
|
|
|
41
39
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"libs-ui-components-buttons-status.mjs","sources":["../../../../../../libs-ui/components/buttons/status/src/status.component.ts","../../../../../../libs-ui/components/buttons/status/src/status.component.html","../../../../../../libs-ui/components/buttons/status/src/libs-ui-components-buttons-status.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"libs-ui-components-buttons-status.mjs","sources":["../../../../../../libs-ui/components/buttons/status/src/status.component.ts","../../../../../../libs-ui/components/buttons/status/src/status.component.html","../../../../../../libs-ui/components/buttons/status/src/libs-ui-components-buttons-status.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, signal, untracked, viewChild } from '@angular/core';\nimport { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { LibsUiConfigProjectService } from '@libs-ui/services-config-project';\nimport { colorStepContrastFromOrigin, get } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IButtonStatus } from './interfaces';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-status',\n templateUrl: './status.component.html',\n styleUrl: './status.component.scss',\n standalone: true,\n imports: [TranslateModule, LibsUiComponentsPopoverComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsButtonsStatusComponent {\n // #region PROPERTY\n protected classBinding = signal('');\n\n private configProjectService = inject(LibsUiConfigProjectService);\n\n // #region INPUT\n readonly config = input.required<IButtonStatus>();\n\n /* VIEW CHILD */\n private readonly buttonEl = viewChild<ElementRef>('buttonEl');\n\n constructor() {\n effect(() => this.setClassByType());\n }\n\n /* FUNCTIONS */\n private async setClassByType() {\n untracked(() => this.classBinding.set(`libs-ui-buttons-status ${this.config().classInclude}`));\n const keys = ['color', 'background'];\n const config = this.config().type === 'other' ? this.config().otherConfig : get(this.configProjectService.ConfigButtonStatus, this.config().type);\n\n keys.forEach((key) => {\n const color = get(config, key) || colorStepContrastFromOrigin(get<any>(config, 'color', ''), 90)?.light;\n\n this.buttonEl()?.nativeElement.style.setProperty(`--libs-ui-button-status-${key}`, color);\n });\n }\n}\n","<button #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconLeft || config().popoverIconLeft?.ignoreShowPopover\"\n [type]=\"config().popoverIconLeft?.type || 'other'\"\n [config]=\"config().popoverIconLeft?.config\"\n class=\"{{ config().classIconLeft }}\"></i>\n }\n @if (config().label; as label) {\n <span LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"label | translate\"></span>\n }\n @if (config().classIconRight) {\n <i LibsUiComponentsPopoverDirective\n [ignoreShowPopover]=\"!config().popoverIconRight || config().popoverIconRight?.ignoreShowPopover\"\n [type]=\"config().popoverIconRight?.type || 'other'\"\n [config]=\"config().popoverIconRight?.config\"\n class=\"{{ config().classIconRight }}\"></i>\n }\n</button>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
|
+
import { IPopover } from "@libs-ui/components-popover";
|
|
1
2
|
export interface IButtonStatus {
|
|
2
|
-
label
|
|
3
|
+
label?: string;
|
|
3
4
|
type: TYPE_BUTTON_STATUS;
|
|
4
5
|
otherConfig?: {
|
|
5
6
|
color: string;
|
|
6
|
-
background
|
|
7
|
+
background?: string;
|
|
7
8
|
};
|
|
8
9
|
classInclude?: string;
|
|
9
10
|
classLabelInclude?: string;
|
|
10
11
|
classIconLeft?: string;
|
|
12
|
+
popoverIconLeft?: IPopover;
|
|
13
|
+
classIconRight?: string;
|
|
14
|
+
popoverIconRight?: IPopover;
|
|
11
15
|
}
|
|
12
16
|
export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other';
|
package/package.json
CHANGED
|
@@ -1,9 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-buttons-status",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.306.2",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@angular/
|
|
6
|
-
"@
|
|
5
|
+
"@angular/core": ">=18.0.0",
|
|
6
|
+
"@libs-ui/components-popover": "0.2.306.2",
|
|
7
|
+
"@libs-ui/services-config-project": "0.2.306.2",
|
|
8
|
+
"@libs-ui/utils": "0.2.306.2",
|
|
9
|
+
"@ngx-translate/core": "^15.0.0"
|
|
7
10
|
},
|
|
8
11
|
"sideEffects": false,
|
|
9
12
|
"module": "fesm2022/libs-ui-components-buttons-status.mjs",
|