@libs-ui/components-buttons-status 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 +139 -0
- package/esm2022/index.mjs +3 -0
- package/esm2022/interfaces/index.mjs +2 -0
- package/esm2022/interfaces/status.interface.mjs +2 -0
- package/esm2022/libs-ui-components-buttons-status.mjs +5 -0
- package/esm2022/status.component.mjs +36 -0
- package/fesm2022/libs-ui-components-buttons-status.mjs +43 -0
- package/fesm2022/libs-ui-components-buttons-status.mjs.map +1 -0
- package/index.d.ts +2 -0
- package/interfaces/index.d.ts +1 -0
- package/interfaces/status.interface.d.ts +16 -0
- package/package.json +28 -0
- package/status.component.d.ts +12 -0
package/README.md
ADDED
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
# Button Status
|
|
2
|
+
|
|
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 [config]="statusConfig"></libs_ui-components-buttons-status>
|
|
42
|
+
`,
|
|
43
|
+
})
|
|
44
|
+
export class ExampleComponent {
|
|
45
|
+
statusConfig: IButtonStatus = {
|
|
46
|
+
label: 'Đang hoạt động',
|
|
47
|
+
type: 'green',
|
|
48
|
+
};
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### File HTML riêng
|
|
53
|
+
|
|
54
|
+
```typescript
|
|
55
|
+
import { Component } from '@angular/core';
|
|
56
|
+
import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/components-buttons-status';
|
|
57
|
+
|
|
58
|
+
@Component({
|
|
59
|
+
selector: 'app-example',
|
|
60
|
+
standalone: true,
|
|
61
|
+
imports: [LibsUiComponentsButtonsStatusComponent],
|
|
62
|
+
templateUrl: './example.component.html',
|
|
63
|
+
})
|
|
64
|
+
export class ExampleComponent {
|
|
65
|
+
statusConfig: IButtonStatus = { label: 'Đang chờ', type: 'yellow' };
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
```html
|
|
70
|
+
<libs_ui-components-buttons-status [config]="statusConfig"></libs_ui-components-buttons-status>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Công nghệ sử dụng
|
|
74
|
+
|
|
75
|
+
- **Angular 18** standalone component, Signals
|
|
76
|
+
- **Tailwind CSS** 3.x
|
|
77
|
+
|
|
78
|
+
## API Reference
|
|
79
|
+
|
|
80
|
+
### Inputs
|
|
81
|
+
|
|
82
|
+
| Tên | Kiểu | Mặc định | Mô tả |
|
|
83
|
+
| ------ | --------------- | -------- | ------------------------------------------------------------- |
|
|
84
|
+
| config | `IButtonStatus` | required | Thông tin cấu hình cho trạng thái (nhãn, màu, icon, popover). |
|
|
85
|
+
|
|
86
|
+
### Outputs
|
|
87
|
+
|
|
88
|
+
Không có
|
|
89
|
+
|
|
90
|
+
### Interfaces
|
|
91
|
+
|
|
92
|
+
#### `IButtonStatus`
|
|
93
|
+
|
|
94
|
+
```typescript
|
|
95
|
+
export interface IButtonStatus {
|
|
96
|
+
label?: string;
|
|
97
|
+
type: TYPE_BUTTON_STATUS;
|
|
98
|
+
otherConfig?: {
|
|
99
|
+
color: string;
|
|
100
|
+
background?: string;
|
|
101
|
+
};
|
|
102
|
+
classInclude?: string;
|
|
103
|
+
classLabelInclude?: string;
|
|
104
|
+
classIconLeft?: string;
|
|
105
|
+
popoverIconLeft?: IPopover;
|
|
106
|
+
classIconRight?: string;
|
|
107
|
+
popoverIconRight?: IPopover;
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Mô tả:
|
|
112
|
+
|
|
113
|
+
- `label`: Nhãn hiển thị của trạng thái.
|
|
114
|
+
- `type`: Kiểu màu/trạng thái (`TYPE_BUTTON_STATUS`).
|
|
115
|
+
- `otherConfig`: Cấu hình màu chữ và nền khi `type` là `other`.
|
|
116
|
+
- `classInclude`: CSS class thêm cho container của status.
|
|
117
|
+
- `classLabelInclude`: CSS class thêm cho nhãn.
|
|
118
|
+
- `classIconLeft`: CSS class thêm cho icon bên trái.
|
|
119
|
+
- `popoverIconLeft`: Cấu hình popover cho icon bên trái.
|
|
120
|
+
- `classIconRight`: CSS class thêm cho icon bên phải.
|
|
121
|
+
- `popoverIconRight`: Cấu hình popover cho icon bên phải.
|
|
122
|
+
|
|
123
|
+
#### `TYPE_BUTTON_STATUS`
|
|
124
|
+
|
|
125
|
+
```typescript
|
|
126
|
+
export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other';
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
Mô tả:
|
|
130
|
+
|
|
131
|
+
- `blue`: Màu xanh dương (thông tin chung).
|
|
132
|
+
- `green`: Màu xanh lá cây (thành công).
|
|
133
|
+
- `red`: Màu đỏ (lỗi hoặc cảnh báo).
|
|
134
|
+
- `orange`: Màu cam (cảnh báo).
|
|
135
|
+
- `yellow`: Màu vàng (đang chờ, thông tin).
|
|
136
|
+
- `cyan`: Màu xanh da trời (thông tin phụ trợ).
|
|
137
|
+
- `purple`: Màu tím (nhấn mạnh, nổi bật).
|
|
138
|
+
- `brown`: Màu nâu (trung tính).
|
|
139
|
+
- `other`: Chủ đề tuỳ chỉnh; cấu hình qua `otherConfig`.
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export * from './status.component';
|
|
2
|
+
export * from './interfaces';
|
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnV0dG9ucy9zdGF0dXMvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3N0YXR1cy5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzJztcbiJdfQ==
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export * from './status.interface';
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnV0dG9ucy9zdGF0dXMvc3JjL2ludGVyZmFjZXMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxvQkFBb0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vc3RhdHVzLmludGVyZmFjZSc7XG4iXX0=
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhdHVzLmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3N0YXR1cy9zcmMvaW50ZXJmYWNlcy9zdGF0dXMuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJUG9wb3ZlciB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtcG9wb3Zlcic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSUJ1dHRvblN0YXR1cyB7XG4gIGxhYmVsPzogc3RyaW5nO1xuICB0eXBlOiBUWVBFX0JVVFRPTl9TVEFUVVM7XG4gIG90aGVyQ29uZmlnPzoge1xuICAgIGNvbG9yOiBzdHJpbmc7XG4gICAgYmFja2dyb3VuZD86IHN0cmluZztcbiAgfTsgLy8gcmVxdWlyZWQgYW5kIG9ubHkgYXBwbHkgd2hlbiB0eXBlIGlzIG90aGVyXG4gIGNsYXNzSW5jbHVkZT86IHN0cmluZztcbiAgY2xhc3NMYWJlbEluY2x1ZGU/OiBzdHJpbmc7XG4gIGNsYXNzSWNvbkxlZnQ/OiBzdHJpbmc7XG4gIHBvcG92ZXJJY29uTGVmdD86IElQb3BvdmVyO1xuICBjbGFzc0ljb25SaWdodD86IHN0cmluZztcbiAgcG9wb3Zlckljb25SaWdodD86IElQb3BvdmVyO1xufVxuXG5leHBvcnQgdHlwZSBUWVBFX0JVVFRPTl9TVEFUVVMgPSAnYmx1ZScgfCAnZ3JlZW4nIHwgJ3JlZCcgfCAnb3JhbmdlJyB8ICd5ZWxsb3cnIHwgJ2N5YW4nIHwgJ3B1cnBsZScgfCAnYnJvd24nIHwgJ290aGVyJztcbiJdfQ==
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Generated bundle index. Do not edit.
|
|
3
|
+
*/
|
|
4
|
+
export * from './index';
|
|
5
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLWJ1dHRvbnMtc3RhdHVzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2J1dHRvbnMvc3RhdHVzL3NyYy9saWJzLXVpLWNvbXBvbmVudHMtYnV0dG9ucy1zdGF0dXMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { ChangeDetectionStrategy, Component, effect, inject, input, signal, untracked, viewChild } from '@angular/core';
|
|
2
|
+
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
3
|
+
import { LibsUiConfigProjectService } from '@libs-ui/services-config-project';
|
|
4
|
+
import { colorStepContrastFromOrigin, get } 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 LibsUiComponentsButtonsStatusComponent {
|
|
9
|
+
// #region PROPERTY
|
|
10
|
+
classBinding = signal('');
|
|
11
|
+
configProjectService = inject(LibsUiConfigProjectService);
|
|
12
|
+
// #region INPUT
|
|
13
|
+
config = input.required();
|
|
14
|
+
/* VIEW CHILD */
|
|
15
|
+
buttonEl = viewChild('buttonEl');
|
|
16
|
+
constructor() {
|
|
17
|
+
effect(() => this.setClassByType());
|
|
18
|
+
}
|
|
19
|
+
/* FUNCTIONS */
|
|
20
|
+
async setClassByType() {
|
|
21
|
+
untracked(() => this.classBinding.set(`libs-ui-buttons-status ${this.config().classInclude}`));
|
|
22
|
+
const keys = ['color', 'background'];
|
|
23
|
+
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;
|
|
26
|
+
this.buttonEl()?.nativeElement.style.setProperty(`--libs-ui-button-status-${key}`, color);
|
|
27
|
+
});
|
|
28
|
+
}
|
|
29
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
30
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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\n #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i\n 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\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"label | translate\"></span>\n }\n @if (config().classIconRight) {\n <i\n 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
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsStatusComponent, decorators: [{
|
|
33
|
+
type: Component,
|
|
34
|
+
args: [{ selector: 'libs_ui-components-buttons-status', standalone: true, imports: [TranslateModule, LibsUiComponentsPopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i\n 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\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"label | translate\"></span>\n }\n @if (config().classIconRight) {\n <i\n 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"] }]
|
|
35
|
+
}], ctorParameters: () => [] });
|
|
36
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhdHVzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3N0YXR1cy9zcmMvc3RhdHVzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3N0YXR1cy9zcmMvc3RhdHVzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFjLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDcEksT0FBTyxFQUFFLGdDQUFnQyxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFL0UsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDOUUsT0FBTyxFQUFFLDJCQUEyQixFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBWXRELE1BQU0sT0FBTyxzQ0FBc0M7SUFDakQsbUJBQW1CO0lBQ1QsWUFBWSxHQUFHLE1BQU0sQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUU1QixvQkFBb0IsR0FBRyxNQUFNLENBQUMsMEJBQTBCLENBQUMsQ0FBQztJQUVsRSxnQkFBZ0I7SUFDUCxNQUFNLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBaUIsQ0FBQztJQUVsRCxnQkFBZ0I7SUFDQyxRQUFRLEdBQUcsU0FBUyxDQUFhLFVBQVUsQ0FBQyxDQUFDO0lBRTlEO1FBQ0UsTUFBTSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQyxDQUFDO0lBQ3RDLENBQUM7SUFFRCxlQUFlO0lBQ1AsS0FBSyxDQUFDLGNBQWM7UUFDMUIsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsR0FBRyxDQUFDLDBCQUEwQixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQy9GLE1BQU0sSUFBSSxHQUFHLENBQUMsT0FBTyxFQUFFLFlBQVksQ0FBQyxDQUFDO1FBQ3JDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxJQUFJLEtBQUssT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLG9CQUFvQixDQUFDLGtCQUFrQixFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVsSixJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsR0FBRyxFQUFFLEVBQUU7WUFDbkIsTUFBTSxLQUFLLEdBQUcsR0FBRyxDQUFDLE1BQU0sRUFBRSxHQUE0QixDQUFDLElBQUksMkJBQTJCLENBQUMsR0FBRyxDQUFDLE1BQU0sRUFBRSxPQUFPLEVBQUUsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLEVBQUUsS0FBSyxDQUFDO1lBRTVILElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxhQUFhLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQywyQkFBMkIsR0FBRyxFQUFFLEVBQUUsS0FBSyxDQUFDLENBQUM7UUFDNUYsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO3dHQTNCVSxzQ0FBc0M7NEZBQXRDLHNDQUFzQyx5VkNqQm5ELHcvQkEyQkEsb2pCRGJZLGVBQWUsNEZBQUUsZ0NBQWdDOzs0RkFHaEQsc0NBQXNDO2tCQVRsRCxTQUFTOytCQUVFLG1DQUFtQyxjQUdqQyxJQUFJLFdBQ1AsQ0FBQyxlQUFlLEVBQUUsZ0NBQWdDLENBQUMsbUJBQzNDLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBlZmZlY3QsIEVsZW1lbnRSZWYsIGluamVjdCwgaW5wdXQsIHNpZ25hbCwgdW50cmFja2VkLCB2aWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNQb3BvdmVyQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1wb3BvdmVyJztcbmltcG9ydCB7IFBhdGhPZiB9IGZyb20gJ0BsaWJzLXVpL2ludGVyZmFjZXMtdHlwZXMnO1xuaW1wb3J0IHsgTGlic1VpQ29uZmlnUHJvamVjdFNlcnZpY2UgfSBmcm9tICdAbGlicy11aS9zZXJ2aWNlcy1jb25maWctcHJvamVjdCc7XG5pbXBvcnQgeyBjb2xvclN0ZXBDb250cmFzdEZyb21PcmlnaW4sIGdldCB9IGZyb20gJ0BsaWJzLXVpL3V0aWxzJztcbmltcG9ydCB7IFRyYW5zbGF0ZU1vZHVsZSB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuaW1wb3J0IHsgSUJ1dHRvblN0YXR1cyB9IGZyb20gJy4vaW50ZXJmYWNlcyc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1idXR0b25zLXN0YXR1cycsXG4gIHRlbXBsYXRlVXJsOiAnLi9zdGF0dXMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vc3RhdHVzLmNvbXBvbmVudC5zY3NzJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW1RyYW5zbGF0ZU1vZHVsZSwgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJDb21wb25lbnRdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0J1dHRvbnNTdGF0dXNDb21wb25lbnQge1xuICAvLyAjcmVnaW9uIFBST1BFUlRZXG4gIHByb3RlY3RlZCBjbGFzc0JpbmRpbmcgPSBzaWduYWwoJycpO1xuXG4gIHByaXZhdGUgY29uZmlnUHJvamVjdFNlcnZpY2UgPSBpbmplY3QoTGlic1VpQ29uZmlnUHJvamVjdFNlcnZpY2UpO1xuXG4gIC8vICNyZWdpb24gSU5QVVRcbiAgcmVhZG9ubHkgY29uZmlnID0gaW5wdXQucmVxdWlyZWQ8SUJ1dHRvblN0YXR1cz4oKTtcblxuICAvKiBWSUVXIENISUxEICovXG4gIHByaXZhdGUgcmVhZG9ubHkgYnV0dG9uRWwgPSB2aWV3Q2hpbGQ8RWxlbWVudFJlZj4oJ2J1dHRvbkVsJyk7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgZWZmZWN0KCgpID0+IHRoaXMuc2V0Q2xhc3NCeVR5cGUoKSk7XG4gIH1cblxuICAvKiBGVU5DVElPTlMgKi9cbiAgcHJpdmF0ZSBhc3luYyBzZXRDbGFzc0J5VHlwZSgpIHtcbiAgICB1bnRyYWNrZWQoKCkgPT4gdGhpcy5jbGFzc0JpbmRpbmcuc2V0KGBsaWJzLXVpLWJ1dHRvbnMtc3RhdHVzICR7dGhpcy5jb25maWcoKS5jbGFzc0luY2x1ZGV9YCkpO1xuICAgIGNvbnN0IGtleXMgPSBbJ2NvbG9yJywgJ2JhY2tncm91bmQnXTtcbiAgICBjb25zdCBjb25maWcgPSB0aGlzLmNvbmZpZygpLnR5cGUgPT09ICdvdGhlcicgPyB0aGlzLmNvbmZpZygpLm90aGVyQ29uZmlnIDogZ2V0KHRoaXMuY29uZmlnUHJvamVjdFNlcnZpY2UuQ29uZmlnQnV0dG9uU3RhdHVzLCB0aGlzLmNvbmZpZygpLnR5cGUpO1xuXG4gICAga2V5cy5mb3JFYWNoKChrZXkpID0+IHtcbiAgICAgIGNvbnN0IGNvbG9yID0gZ2V0KGNvbmZpZywga2V5IGFzIFBhdGhPZjx0eXBlb2YgY29uZmlnPikgfHwgY29sb3JTdGVwQ29udHJhc3RGcm9tT3JpZ2luKGdldChjb25maWcsICdjb2xvcicsICcnKSwgOTApPy5saWdodDtcblxuICAgICAgdGhpcy5idXR0b25FbCgpPy5uYXRpdmVFbGVtZW50LnN0eWxlLnNldFByb3BlcnR5KGAtLWxpYnMtdWktYnV0dG9uLXN0YXR1cy0ke2tleX1gLCBjb2xvcik7XG4gICAgfSk7XG4gIH1cbn1cbiIsIjxidXR0b25cbiAgI2J1dHRvbkVsXG4gIFtjbGFzc109XCJjbGFzc0JpbmRpbmcoKVwiPlxuICBAaWYgKGNvbmZpZygpLmNsYXNzSWNvbkxlZnQpIHtcbiAgICA8aVxuICAgICAgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJEaXJlY3RpdmVcbiAgICAgIFtpZ25vcmVTaG93UG9wb3Zlcl09XCIhY29uZmlnKCkucG9wb3Zlckljb25MZWZ0IHx8IGNvbmZpZygpLnBvcG92ZXJJY29uTGVmdD8uaWdub3JlU2hvd1BvcG92ZXJcIlxuICAgICAgW3R5cGVdPVwiY29uZmlnKCkucG9wb3Zlckljb25MZWZ0Py50eXBlIHx8ICdvdGhlcidcIlxuICAgICAgW2NvbmZpZ109XCJjb25maWcoKS5wb3BvdmVySWNvbkxlZnQ/LmNvbmZpZ1wiXG4gICAgICBjbGFzcz1cInt7IGNvbmZpZygpLmNsYXNzSWNvbkxlZnQgfX1cIj48L2k+XG4gIH1cbiAgQGlmIChjb25maWcoKS5sYWJlbDsgYXMgbGFiZWwpIHtcbiAgICA8c3BhblxuICAgICAgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJEaXJlY3RpdmVcbiAgICAgIFt0eXBlXT1cIid0ZXh0J1wiXG4gICAgICBbY2xhc3NdPVwiY29uZmlnKCkuY2xhc3NMYWJlbEluY2x1ZGUgfHwgJ2xpYnMtdWktZm9udC1oNnInXCJcbiAgICAgIFtpbm5lckh0bWxdPVwibGFiZWwgfCB0cmFuc2xhdGVcIj48L3NwYW4+XG4gIH1cbiAgQGlmIChjb25maWcoKS5jbGFzc0ljb25SaWdodCkge1xuICAgIDxpXG4gICAgICBMaWJzVWlDb21wb25lbnRzUG9wb3ZlckRpcmVjdGl2ZVxuICAgICAgW2lnbm9yZVNob3dQb3BvdmVyXT1cIiFjb25maWcoKS5wb3BvdmVySWNvblJpZ2h0IHx8IGNvbmZpZygpLnBvcG92ZXJJY29uUmlnaHQ/Lmlnbm9yZVNob3dQb3BvdmVyXCJcbiAgICAgIFt0eXBlXT1cImNvbmZpZygpLnBvcG92ZXJJY29uUmlnaHQ/LnR5cGUgfHwgJ290aGVyJ1wiXG4gICAgICBbY29uZmlnXT1cImNvbmZpZygpLnBvcG92ZXJJY29uUmlnaHQ/LmNvbmZpZ1wiXG4gICAgICBjbGFzcz1cInt7IGNvbmZpZygpLmNsYXNzSWNvblJpZ2h0IH19XCI+PC9pPlxuICB9XG48L2J1dHRvbj5cbiJdfQ==
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { signal, inject, input, viewChild, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
4
|
+
import { LibsUiConfigProjectService } from '@libs-ui/services-config-project';
|
|
5
|
+
import { get, colorStepContrastFromOrigin } from '@libs-ui/utils';
|
|
6
|
+
import * as i1 from '@ngx-translate/core';
|
|
7
|
+
import { TranslateModule } from '@ngx-translate/core';
|
|
8
|
+
|
|
9
|
+
class LibsUiComponentsButtonsStatusComponent {
|
|
10
|
+
// #region PROPERTY
|
|
11
|
+
classBinding = signal('');
|
|
12
|
+
configProjectService = inject(LibsUiConfigProjectService);
|
|
13
|
+
// #region INPUT
|
|
14
|
+
config = input.required();
|
|
15
|
+
/* VIEW CHILD */
|
|
16
|
+
buttonEl = viewChild('buttonEl');
|
|
17
|
+
constructor() {
|
|
18
|
+
effect(() => this.setClassByType());
|
|
19
|
+
}
|
|
20
|
+
/* FUNCTIONS */
|
|
21
|
+
async setClassByType() {
|
|
22
|
+
untracked(() => this.classBinding.set(`libs-ui-buttons-status ${this.config().classInclude}`));
|
|
23
|
+
const keys = ['color', 'background'];
|
|
24
|
+
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;
|
|
27
|
+
this.buttonEl()?.nativeElement.style.setProperty(`--libs-ui-button-status-${key}`, color);
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
31
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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\n #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i\n 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\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"label | translate\"></span>\n }\n @if (config().classIconRight) {\n <i\n 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
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsStatusComponent, decorators: [{
|
|
34
|
+
type: Component,
|
|
35
|
+
args: [{ selector: 'libs_ui-components-buttons-status', standalone: true, imports: [TranslateModule, LibsUiComponentsPopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i\n 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\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"label | translate\"></span>\n }\n @if (config().classIconRight) {\n <i\n 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"] }]
|
|
36
|
+
}], ctorParameters: () => [] });
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* Generated bundle index. Do not edit.
|
|
40
|
+
*/
|
|
41
|
+
|
|
42
|
+
export { LibsUiComponentsButtonsStatusComponent };
|
|
43
|
+
//# sourceMappingURL=libs-ui-components-buttons-status.mjs.map
|
|
@@ -0,0 +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":["import { ChangeDetectionStrategy, Component, effect, ElementRef, inject, input, signal, untracked, viewChild } from '@angular/core';\nimport { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';\nimport { PathOf } from '@libs-ui/interfaces-types';\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 as PathOf<typeof config>) || colorStepContrastFromOrigin(get(config, 'color', ''), 90)?.light;\n\n this.buttonEl()?.nativeElement.style.setProperty(`--libs-ui-button-status-${key}`, color);\n });\n }\n}\n","<button\n #buttonEl\n [class]=\"classBinding()\">\n @if (config().classIconLeft) {\n <i\n 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\n LibsUiComponentsPopoverDirective\n [type]=\"'text'\"\n [class]=\"config().classLabelInclude || 'libs-ui-font-h6r'\"\n [innerHtml]=\"label | translate\"></span>\n }\n @if (config().classIconRight) {\n <i\n 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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"}
|
package/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './status.interface';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { IPopover } from '@libs-ui/components-popover';
|
|
2
|
+
export interface IButtonStatus {
|
|
3
|
+
label?: string;
|
|
4
|
+
type: TYPE_BUTTON_STATUS;
|
|
5
|
+
otherConfig?: {
|
|
6
|
+
color: string;
|
|
7
|
+
background?: string;
|
|
8
|
+
};
|
|
9
|
+
classInclude?: string;
|
|
10
|
+
classLabelInclude?: string;
|
|
11
|
+
classIconLeft?: string;
|
|
12
|
+
popoverIconLeft?: IPopover;
|
|
13
|
+
classIconRight?: string;
|
|
14
|
+
popoverIconRight?: IPopover;
|
|
15
|
+
}
|
|
16
|
+
export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other';
|
package/package.json
ADDED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@libs-ui/components-buttons-status",
|
|
3
|
+
"version": "0.1.1-1",
|
|
4
|
+
"peerDependencies": {
|
|
5
|
+
"@angular/core": ">=18.0.0",
|
|
6
|
+
"@libs-ui/components-popover": "0.1.1-1",
|
|
7
|
+
"@libs-ui/services-config-project": "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-status.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-status.mjs",
|
|
21
|
+
"esm": "./esm2022/libs-ui-components-buttons-status.mjs",
|
|
22
|
+
"default": "./fesm2022/libs-ui-components-buttons-status.mjs"
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
"dependencies": {
|
|
26
|
+
"tslib": "^2.3.0"
|
|
27
|
+
}
|
|
28
|
+
}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { IButtonStatus } from './interfaces';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
export declare class LibsUiComponentsButtonsStatusComponent {
|
|
4
|
+
protected classBinding: import("@angular/core").WritableSignal<string>;
|
|
5
|
+
private configProjectService;
|
|
6
|
+
readonly config: import("@angular/core").InputSignal<IButtonStatus>;
|
|
7
|
+
private readonly buttonEl;
|
|
8
|
+
constructor();
|
|
9
|
+
private setClassByType;
|
|
10
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsButtonsStatusComponent, never>;
|
|
11
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsButtonsStatusComponent, "libs_ui-components-buttons-status", never, { "config": { "alias": "config"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
|
|
12
|
+
}
|