@libs-ui/components-buttons-status 0.2.306-4 → 0.2.306-6
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 +14 -12
- package/esm2022/index.mjs +1 -1
- package/esm2022/interfaces/status.interface.mjs +1 -1
- package/esm2022/status.component.mjs +3 -4
- package/fesm2022/libs-ui-components-buttons-status.mjs +2 -3
- package/fesm2022/libs-ui-components-buttons-status.mjs.map +1 -1
- package/interfaces/status.interface.d.ts +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -38,15 +38,13 @@ import { LibsUiComponentsButtonsStatusComponent, IButtonStatus, TYPE_BUTTON_STAT
|
|
|
38
38
|
standalone: true,
|
|
39
39
|
imports: [LibsUiComponentsButtonsStatusComponent],
|
|
40
40
|
template: `
|
|
41
|
-
<libs_ui-components-buttons-status
|
|
42
|
-
|
|
43
|
-
</libs_ui-components-buttons-status>
|
|
44
|
-
`
|
|
41
|
+
<libs_ui-components-buttons-status [config]="statusConfig"></libs_ui-components-buttons-status>
|
|
42
|
+
`,
|
|
45
43
|
})
|
|
46
44
|
export class ExampleComponent {
|
|
47
45
|
statusConfig: IButtonStatus = {
|
|
48
46
|
label: 'Đang hoạt động',
|
|
49
|
-
type: 'green'
|
|
47
|
+
type: 'green',
|
|
50
48
|
};
|
|
51
49
|
}
|
|
52
50
|
```
|
|
@@ -61,7 +59,7 @@ import { LibsUiComponentsButtonsStatusComponent, IButtonStatus } from '@libs-ui/
|
|
|
61
59
|
selector: 'app-example',
|
|
62
60
|
standalone: true,
|
|
63
61
|
imports: [LibsUiComponentsButtonsStatusComponent],
|
|
64
|
-
templateUrl: './example.component.html'
|
|
62
|
+
templateUrl: './example.component.html',
|
|
65
63
|
})
|
|
66
64
|
export class ExampleComponent {
|
|
67
65
|
statusConfig: IButtonStatus = { label: 'Đang chờ', type: 'yellow' };
|
|
@@ -69,9 +67,7 @@ export class ExampleComponent {
|
|
|
69
67
|
```
|
|
70
68
|
|
|
71
69
|
```html
|
|
72
|
-
<libs_ui-components-buttons-status
|
|
73
|
-
[config]="statusConfig">
|
|
74
|
-
</libs_ui-components-buttons-status>
|
|
70
|
+
<libs_ui-components-buttons-status [config]="statusConfig"></libs_ui-components-buttons-status>
|
|
75
71
|
```
|
|
76
72
|
|
|
77
73
|
## Công nghệ sử dụng
|
|
@@ -83,9 +79,9 @@ export class ExampleComponent {
|
|
|
83
79
|
|
|
84
80
|
### Inputs
|
|
85
81
|
|
|
86
|
-
| Tên
|
|
87
|
-
|
|
88
|
-
| config
|
|
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). |
|
|
89
85
|
|
|
90
86
|
### Outputs
|
|
91
87
|
|
|
@@ -94,6 +90,7 @@ Không có
|
|
|
94
90
|
### Interfaces
|
|
95
91
|
|
|
96
92
|
#### `IButtonStatus`
|
|
93
|
+
|
|
97
94
|
```typescript
|
|
98
95
|
export interface IButtonStatus {
|
|
99
96
|
label?: string;
|
|
@@ -110,7 +107,9 @@ export interface IButtonStatus {
|
|
|
110
107
|
popoverIconRight?: IPopover;
|
|
111
108
|
}
|
|
112
109
|
```
|
|
110
|
+
|
|
113
111
|
Mô tả:
|
|
112
|
+
|
|
114
113
|
- `label`: Nhãn hiển thị của trạng thái.
|
|
115
114
|
- `type`: Kiểu màu/trạng thái (`TYPE_BUTTON_STATUS`).
|
|
116
115
|
- `otherConfig`: Cấu hình màu chữ và nền khi `type` là `other`.
|
|
@@ -122,10 +121,13 @@ Mô tả:
|
|
|
122
121
|
- `popoverIconRight`: Cấu hình popover cho icon bên phải.
|
|
123
122
|
|
|
124
123
|
#### `TYPE_BUTTON_STATUS`
|
|
124
|
+
|
|
125
125
|
```typescript
|
|
126
126
|
export type TYPE_BUTTON_STATUS = 'blue' | 'green' | 'red' | 'orange' | 'yellow' | 'cyan' | 'purple' | 'brown' | 'other';
|
|
127
127
|
```
|
|
128
|
+
|
|
128
129
|
Mô tả:
|
|
130
|
+
|
|
129
131
|
- `blue`: Màu xanh dương (thông tin chung).
|
|
130
132
|
- `green`: Màu xanh lá cây (thành công).
|
|
131
133
|
- `red`: Màu đỏ (lỗi hoặc cảnh báo).
|
package/esm2022/index.mjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
export * from './status.component';
|
|
2
2
|
export * from './interfaces';
|
|
3
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
3
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnV0dG9ucy9zdGF0dXMvc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsb0JBQW9CLENBQUM7QUFDbkMsY0FBYyxjQUFjLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3N0YXR1cy5jb21wb25lbnQnO1xuZXhwb3J0ICogZnJvbSAnLi9pbnRlcmZhY2VzJztcbiJdfQ==
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhdHVzLmludGVyZmFjZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3N0YXR1cy9zcmMvaW50ZXJmYWNlcy9zdGF0dXMuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJUG9wb3ZlciB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtcG9wb3Zlcic7XG5cbmV4cG9ydCBpbnRlcmZhY2UgSUJ1dHRvblN0YXR1cyB7XG4gIGxhYmVsPzogc3RyaW5nO1xuICB0eXBlOiBUWVBFX0JVVFRPTl9TVEFUVVM7XG4gIG90aGVyQ29uZmlnPzoge1xuICAgIGNvbG9yOiBzdHJpbmc7XG4gICAgYmFja2dyb3VuZD86IHN0cmluZztcbiAgfTsgLy8gcmVxdWlyZWQgYW5kIG9ubHkgYXBwbHkgd2hlbiB0eXBlIGlzIG90aGVyXG4gIGNsYXNzSW5jbHVkZT86IHN0cmluZztcbiAgY2xhc3NMYWJlbEluY2x1ZGU/OiBzdHJpbmc7XG4gIGNsYXNzSWNvbkxlZnQ/OiBzdHJpbmc7XG4gIHBvcG92ZXJJY29uTGVmdD86IElQb3BvdmVyO1xuICBjbGFzc0ljb25SaWdodD86IHN0cmluZztcbiAgcG9wb3Zlckljb25SaWdodD86IElQb3BvdmVyO1xufVxuXG5leHBvcnQgdHlwZSBUWVBFX0JVVFRPTl9TVEFUVVMgPSAnYmx1ZScgfCAnZ3JlZW4nIHwgJ3JlZCcgfCAnb3JhbmdlJyB8ICd5ZWxsb3cnIHwgJ2N5YW4nIHwgJ3B1cnBsZScgfCAnYnJvd24nIHwgJ290aGVyJztcbiJdfQ==
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
2
1
|
import { ChangeDetectionStrategy, Component, effect, inject, input, signal, untracked, viewChild } from '@angular/core';
|
|
3
2
|
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
4
3
|
import { LibsUiConfigProjectService } from '@libs-ui/services-config-project';
|
|
@@ -28,10 +27,10 @@ export class LibsUiComponentsButtonsStatusComponent {
|
|
|
28
27
|
});
|
|
29
28
|
}
|
|
30
29
|
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
|
|
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\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
31
|
}
|
|
33
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsStatusComponent, decorators: [{
|
|
34
33
|
type: Component,
|
|
35
|
-
args: [{ selector: 'libs_ui-components-buttons-status', standalone: true, imports: [TranslateModule, LibsUiComponentsPopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button
|
|
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"] }]
|
|
36
35
|
}], ctorParameters: () => [] });
|
|
37
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
36
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RhdHVzLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3N0YXR1cy9zcmMvc3RhdHVzLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL3N0YXR1cy9zcmMvc3RhdHVzLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsTUFBTSxFQUFjLE1BQU0sRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDcEksT0FBTyxFQUFFLGdDQUFnQyxFQUFFLE1BQU0sNkJBQTZCLENBQUM7QUFFL0UsT0FBTyxFQUFFLDBCQUEwQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDOUUsT0FBTyxFQUFFLDJCQUEyQixFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQ2xFLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7O0FBWXRELE1BQU0sT0FBTyxzQ0FBc0M7SUFDakQsbUJBQW1CO0lBQ1QsWUFBWSxHQUFHLE1BQU0sQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUU1QixvQkFBb0IsR0FBRyxNQUFNLENBQUMsMEJBQTBCLENBQUMsQ0FBQztJQUVsRSxnQkFBZ0I7SUFDUCxNQUFNLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBaUIsQ0FBQztJQUVsRCxnQkFBZ0I7SUFDQyxRQUFRLEdBQUcsU0FBUyxDQUFhLFVBQVUsQ0FBQyxDQUFDO0lBRTlEO1FBQ0UsTUFBTSxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQyxDQUFDO0lBQ3RDLENBQUM7SUFFRCxlQUFlO0lBQ1AsS0FBSyxDQUFDLGNBQWM7UUFDMUIsU0FBUyxDQUFDLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsR0FBRyxDQUFDLDBCQUEwQixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsWUFBWSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQy9GLE1BQU0sSUFBSSxHQUFHLENBQUMsT0FBTyxFQUFFLFlBQVksQ0FBQyxDQUFDO1FBQ3JDLE1BQU0sTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxJQUFJLEtBQUssT0FBTyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsV0FBVyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLG9CQUFvQixDQUFDLGtCQUFrQixFQUFFLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUVsSixJQUFJLENBQUMsT0FBTyxDQUFDLENBQUMsR0FBRyxFQUFFLEVBQUU7WUFDbkIsTUFBTSxLQUFLLEdBQUcsR0FBRyxDQUFDLE1BQU0sRUFBRSxHQUE0QixDQUFDLElBQUksMkJBQTJCLENBQUMsR0FBRyxDQUFDLE1BQU0sRUFBRSxPQUFPLEVBQUUsRUFBRSxDQUFDLEVBQUUsRUFBRSxDQUFDLEVBQUUsS0FBSyxDQUFDO1lBRTVILElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxhQUFhLENBQUMsS0FBSyxDQUFDLFdBQVcsQ0FBQywyQkFBMkIsR0FBRyxFQUFFLEVBQUUsS0FBSyxDQUFDLENBQUM7UUFDNUYsQ0FBQyxDQUFDLENBQUM7SUFDTCxDQUFDO3dHQTNCVSxzQ0FBc0M7NEZBQXRDLHNDQUFzQyx5VkNqQm5ELHcvQkEyQkEsb2pCRGJZLGVBQWUsNEZBQUUsZ0NBQWdDOzs0RkFHaEQsc0NBQXNDO2tCQVRsRCxTQUFTOytCQUVFLG1DQUFtQyxjQUdqQyxJQUFJLFdBQ1AsQ0FBQyxlQUFlLEVBQUUsZ0NBQWdDLENBQUMsbUJBQzNDLHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBlZmZlY3QsIEVsZW1lbnRSZWYsIGluamVjdCwgaW5wdXQsIHNpZ25hbCwgdW50cmFja2VkLCB2aWV3Q2hpbGQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNQb3BvdmVyQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1wb3BvdmVyJztcbmltcG9ydCB7IFBhdGhPZiB9IGZyb20gJ0BsaWJzLXVpL2ludGVyZmFjZXMtdHlwZXMnO1xuaW1wb3J0IHsgTGlic1VpQ29uZmlnUHJvamVjdFNlcnZpY2UgfSBmcm9tICdAbGlicy11aS9zZXJ2aWNlcy1jb25maWctcHJvamVjdCc7XG5pbXBvcnQgeyBjb2xvclN0ZXBDb250cmFzdEZyb21PcmlnaW4sIGdldCB9IGZyb20gJ0BsaWJzLXVpL3V0aWxzJztcbmltcG9ydCB7IFRyYW5zbGF0ZU1vZHVsZSB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuaW1wb3J0IHsgSUJ1dHRvblN0YXR1cyB9IGZyb20gJy4vaW50ZXJmYWNlcyc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1idXR0b25zLXN0YXR1cycsXG4gIHRlbXBsYXRlVXJsOiAnLi9zdGF0dXMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vc3RhdHVzLmNvbXBvbmVudC5zY3NzJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW1RyYW5zbGF0ZU1vZHVsZSwgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJDb21wb25lbnRdLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0J1dHRvbnNTdGF0dXNDb21wb25lbnQge1xuICAvLyAjcmVnaW9uIFBST1BFUlRZXG4gIHByb3RlY3RlZCBjbGFzc0JpbmRpbmcgPSBzaWduYWwoJycpO1xuXG4gIHByaXZhdGUgY29uZmlnUHJvamVjdFNlcnZpY2UgPSBpbmplY3QoTGlic1VpQ29uZmlnUHJvamVjdFNlcnZpY2UpO1xuXG4gIC8vICNyZWdpb24gSU5QVVRcbiAgcmVhZG9ubHkgY29uZmlnID0gaW5wdXQucmVxdWlyZWQ8SUJ1dHRvblN0YXR1cz4oKTtcblxuICAvKiBWSUVXIENISUxEICovXG4gIHByaXZhdGUgcmVhZG9ubHkgYnV0dG9uRWwgPSB2aWV3Q2hpbGQ8RWxlbWVudFJlZj4oJ2J1dHRvbkVsJyk7XG5cbiAgY29uc3RydWN0b3IoKSB7XG4gICAgZWZmZWN0KCgpID0+IHRoaXMuc2V0Q2xhc3NCeVR5cGUoKSk7XG4gIH1cblxuICAvKiBGVU5DVElPTlMgKi9cbiAgcHJpdmF0ZSBhc3luYyBzZXRDbGFzc0J5VHlwZSgpIHtcbiAgICB1bnRyYWNrZWQoKCkgPT4gdGhpcy5jbGFzc0JpbmRpbmcuc2V0KGBsaWJzLXVpLWJ1dHRvbnMtc3RhdHVzICR7dGhpcy5jb25maWcoKS5jbGFzc0luY2x1ZGV9YCkpO1xuICAgIGNvbnN0IGtleXMgPSBbJ2NvbG9yJywgJ2JhY2tncm91bmQnXTtcbiAgICBjb25zdCBjb25maWcgPSB0aGlzLmNvbmZpZygpLnR5cGUgPT09ICdvdGhlcicgPyB0aGlzLmNvbmZpZygpLm90aGVyQ29uZmlnIDogZ2V0KHRoaXMuY29uZmlnUHJvamVjdFNlcnZpY2UuQ29uZmlnQnV0dG9uU3RhdHVzLCB0aGlzLmNvbmZpZygpLnR5cGUpO1xuXG4gICAga2V5cy5mb3JFYWNoKChrZXkpID0+IHtcbiAgICAgIGNvbnN0IGNvbG9yID0gZ2V0KGNvbmZpZywga2V5IGFzIFBhdGhPZjx0eXBlb2YgY29uZmlnPikgfHwgY29sb3JTdGVwQ29udHJhc3RGcm9tT3JpZ2luKGdldChjb25maWcsICdjb2xvcicsICcnKSwgOTApPy5saWdodDtcblxuICAgICAgdGhpcy5idXR0b25FbCgpPy5uYXRpdmVFbGVtZW50LnN0eWxlLnNldFByb3BlcnR5KGAtLWxpYnMtdWktYnV0dG9uLXN0YXR1cy0ke2tleX1gLCBjb2xvcik7XG4gICAgfSk7XG4gIH1cbn1cbiIsIjxidXR0b25cbiAgI2J1dHRvbkVsXG4gIFtjbGFzc109XCJjbGFzc0JpbmRpbmcoKVwiPlxuICBAaWYgKGNvbmZpZygpLmNsYXNzSWNvbkxlZnQpIHtcbiAgICA8aVxuICAgICAgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJEaXJlY3RpdmVcbiAgICAgIFtpZ25vcmVTaG93UG9wb3Zlcl09XCIhY29uZmlnKCkucG9wb3Zlckljb25MZWZ0IHx8IGNvbmZpZygpLnBvcG92ZXJJY29uTGVmdD8uaWdub3JlU2hvd1BvcG92ZXJcIlxuICAgICAgW3R5cGVdPVwiY29uZmlnKCkucG9wb3Zlckljb25MZWZ0Py50eXBlIHx8ICdvdGhlcidcIlxuICAgICAgW2NvbmZpZ109XCJjb25maWcoKS5wb3BvdmVySWNvbkxlZnQ/LmNvbmZpZ1wiXG4gICAgICBjbGFzcz1cInt7IGNvbmZpZygpLmNsYXNzSWNvbkxlZnQgfX1cIj48L2k+XG4gIH1cbiAgQGlmIChjb25maWcoKS5sYWJlbDsgYXMgbGFiZWwpIHtcbiAgICA8c3BhblxuICAgICAgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJEaXJlY3RpdmVcbiAgICAgIFt0eXBlXT1cIid0ZXh0J1wiXG4gICAgICBbY2xhc3NdPVwiY29uZmlnKCkuY2xhc3NMYWJlbEluY2x1ZGUgfHwgJ2xpYnMtdWktZm9udC1oNnInXCJcbiAgICAgIFtpbm5lckh0bWxdPVwibGFiZWwgfCB0cmFuc2xhdGVcIj48L3NwYW4+XG4gIH1cbiAgQGlmIChjb25maWcoKS5jbGFzc0ljb25SaWdodCkge1xuICAgIDxpXG4gICAgICBMaWJzVWlDb21wb25lbnRzUG9wb3ZlckRpcmVjdGl2ZVxuICAgICAgW2lnbm9yZVNob3dQb3BvdmVyXT1cIiFjb25maWcoKS5wb3BvdmVySWNvblJpZ2h0IHx8IGNvbmZpZygpLnBvcG92ZXJJY29uUmlnaHQ/Lmlnbm9yZVNob3dQb3BvdmVyXCJcbiAgICAgIFt0eXBlXT1cImNvbmZpZygpLnBvcG92ZXJJY29uUmlnaHQ/LnR5cGUgfHwgJ290aGVyJ1wiXG4gICAgICBbY29uZmlnXT1cImNvbmZpZygpLnBvcG92ZXJJY29uUmlnaHQ/LmNvbmZpZ1wiXG4gICAgICBjbGFzcz1cInt7IGNvbmZpZygpLmNsYXNzSWNvblJpZ2h0IH19XCI+PC9pPlxuICB9XG48L2J1dHRvbj5cbiJdfQ==
|
|
@@ -6,7 +6,6 @@ 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 */
|
|
10
9
|
class LibsUiComponentsButtonsStatusComponent {
|
|
11
10
|
// #region PROPERTY
|
|
12
11
|
classBinding = signal('');
|
|
@@ -29,11 +28,11 @@ class LibsUiComponentsButtonsStatusComponent {
|
|
|
29
28
|
});
|
|
30
29
|
}
|
|
31
30
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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
|
|
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\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 });
|
|
33
32
|
}
|
|
34
33
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsStatusComponent, decorators: [{
|
|
35
34
|
type: Component,
|
|
36
|
-
args: [{ selector: 'libs_ui-components-buttons-status', standalone: true, imports: [TranslateModule, LibsUiComponentsPopoverComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button
|
|
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"] }]
|
|
37
36
|
}], ctorParameters: () => [] });
|
|
38
37
|
|
|
39
38
|
/**
|
|
@@ -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":["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/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-buttons-status",
|
|
3
|
-
"version": "0.2.306-
|
|
3
|
+
"version": "0.2.306-6",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-popover": "0.2.306-
|
|
7
|
-
"@libs-ui/services-config-project": "0.2.306-
|
|
8
|
-
"@libs-ui/utils": "0.2.306-
|
|
6
|
+
"@libs-ui/components-popover": "0.2.306-6",
|
|
7
|
+
"@libs-ui/services-config-project": "0.2.306-6",
|
|
8
|
+
"@libs-ui/utils": "0.2.306-6",
|
|
9
9
|
"@ngx-translate/core": "^15.0.0"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|