@libs-ui/components-buttons-select-color 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.
Files changed (9) hide show
  1. package/README.md +148 -0
  2. package/buttons-select-color.component.d.ts +23 -0
  3. package/esm2022/buttons-select-color.component.mjs +49 -0
  4. package/esm2022/index.mjs +2 -0
  5. package/esm2022/libs-ui-components-buttons-select-color.mjs +5 -0
  6. package/fesm2022/libs-ui-components-buttons-select-color.mjs +56 -0
  7. package/fesm2022/libs-ui-components-buttons-select-color.mjs.map +1 -0
  8. package/index.d.ts +1 -0
  9. package/package.json +28 -0
package/README.md ADDED
@@ -0,0 +1,148 @@
1
+ # Buttons Select Color
2
+
3
+ ## Giới thiệu
4
+
5
+ `select-color` là một component nút kết hợp bộ chọn màu (Color Picker) cho Angular. Cho phép người dùng chọn màu sắc từ popover, hỗ trợ cấu hình tùy chỉnh, áp dụng ngay hoặc chờ xác nhận, và tùy chỉnh hiển thị nút.
6
+
7
+ ## Tính năng
8
+
9
+ - Mở popover Color Picker khi click vào nút tùy chỉnh
10
+ - Tùy chỉnh trigger button (nhãn, icon, kiểu, class)
11
+ - Hỗ trợ cấu hình `customOptions` cho Color Picker
12
+ - Hỗ trợ `applyNow`: tự động emit khi chọn màu nếu `true`
13
+ - Hỗ trợ `externalContent`: sử dụng nội dung bên ngoài làm trigger
14
+ - Tùy chọn hướng hiển thị `direction` và `zIndex` của popover
15
+ - Phát sự kiện `outColorChange` và `outColorChangeMultipleType` khi màu thay đổi
16
+
17
+ ## Cài đặt
18
+
19
+ ### Yêu cầu
20
+
21
+ - Angular 18.0.0 trở lên
22
+ - Tailwind CSS 3.3.0 trở lên
23
+
24
+ ### Hướng dẫn
25
+
26
+ Để cài đặt component `select-color`, sử dụng npm hoặc yarn:
27
+
28
+ ```bash
29
+ npm install @libs-ui/components-buttons-select-color
30
+ ```
31
+
32
+ hoặc
33
+
34
+ ```bash
35
+ yarn add @libs-ui/components-buttons-select-color
36
+ ```
37
+
38
+ ## Sử dụng
39
+
40
+ ### Cách 1: Import inline template
41
+
42
+ ```typescript
43
+ import { Component } from '@angular/core';
44
+ import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
45
+
46
+ @Component({
47
+ selector: 'app-example',
48
+ standalone: true,
49
+ imports: [LibsUiComponentsButtonsSelectColorComponent],
50
+ template: `
51
+ <libs_ui-components-buttons-select_color
52
+ [button]="{ label: 'Chọn màu', type: 'button-primary' }"
53
+ [customOptions]="{ /* cấu hình picker */ }"
54
+ [applyNow]="false"
55
+ (outColorChange)="onColorChange($event)"></libs_ui-components-buttons-select_color>
56
+ `,
57
+ })
58
+ export class ExampleComponent {
59
+ onColorChange(color: string) {
60
+ console.log('Màu đã chọn:', color);
61
+ }
62
+ }
63
+ ```
64
+
65
+ ### Cách 2: Sử dụng file HTML riêng biệt
66
+
67
+ ```html
68
+ <!-- example.component.html -->
69
+ <libs_ui-components-buttons-select_color
70
+ [button]="{ label: 'Chọn màu', classIconLeft: 'text-red-500', type: 'button-outline' }"
71
+ [direction]="'top'"
72
+ [externalContent]="false"
73
+ [zIndex]="1500"
74
+ (outColorChangeMultipleType)="onMultiColorChange($event)"></libs_ui-components-buttons-select_color>
75
+ ```
76
+
77
+ ```typescript
78
+ // example.component.ts
79
+ import { Component } from '@angular/core';
80
+ import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components-buttons-select-color';
81
+
82
+ @Component({
83
+ selector: 'app-example',
84
+ standalone: true,
85
+ imports: [LibsUiComponentsButtonsSelectColorComponent],
86
+ templateUrl: './example.component.html',
87
+ })
88
+ export class ExampleComponent {}
89
+ ```
90
+
91
+ ## Công nghệ sử dụng
92
+
93
+ - **Angular 18**: standalone components, signals, control flow
94
+ - **Tailwind CSS**: quản lý style, tiện lợi để xây dựng demo
95
+
96
+ ## API Reference
97
+
98
+ ### Inputs
99
+
100
+ | Tên | Kiểu dữ liệu | Mặc định | Mô tả |
101
+ | --------------- | ------------------------ | ---------- | ----------------------------------------------------------- |
102
+ | button | `IButton` | - | Cấu hình trigger button (label, icon, class, popover, ...). |
103
+ | customOptions | `IPickerCustomOptions` | - | Tùy chọn cấu hình cho Color Picker. |
104
+ | applyNow | `boolean` | `false` | Nếu `true`, emit `outColorChange` ngay khi chọn màu. |
105
+ | externalContent | `boolean` | `false` | Sử dụng nội dung bên ngoài làm trigger. |
106
+ | direction | `TYPE_POPOVER_DIRECTION` | `'bottom'` | Hướng hiển thị của popover. |
107
+ | zIndex | `number` | `1200` | Z-index của popover. |
108
+
109
+ ### Outputs
110
+
111
+ | Tên | Kiểu dữ liệu | Mô tả |
112
+ | -------------------------- | -------------------------------- | ------------------------------------------- |
113
+ | outColorChange | `string` | Sự kiện emit màu khi chọn (dạng hex). |
114
+ | outColorChangeMultipleType | `IOutputColorChangeMultipleType` | Sự kiện emit nhiều định dạng màu khác nhau. |
115
+
116
+ ### Interfaces
117
+
118
+ #### IPickerCustomOptions
119
+
120
+ ```typescript
121
+ export interface IPickerCustomOptions {
122
+ slBarSize?: number[];
123
+ hueBarSize?: number[];
124
+ alphaBarSize?: number[];
125
+ showHsl?: boolean;
126
+ showRgb?: boolean;
127
+ showHex?: boolean;
128
+ showAlpha?: boolean;
129
+ color?: string | number[];
130
+ format?: 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hex' | 'color';
131
+ }
132
+ ```
133
+
134
+ Mô tả: Tùy chọn cấu hình cho Color Picker.
135
+
136
+ #### IOutputColorChangeMultipleType
137
+
138
+ ```typescript
139
+ export interface IOutputColorChangeMultipleType {
140
+ rgba: string;
141
+ rgb: string;
142
+ hex: string;
143
+ hsl: string;
144
+ hsla: string;
145
+ }
146
+ ```
147
+
148
+ Mô tả: Đối tượng chứa nhiều định dạng giá trị màu khi chọn.
package/buttons-select-color.component.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { OnDestroy } from '@angular/core';
2
+ import { IButton } from '@libs-ui/components-buttons-button';
3
+ import { IOutputColorChangeMultipleType, IPickerCustomOptions } from '@libs-ui/components-color-picker';
4
+ import { IPopoverFunctionControlEvent, TYPE_POPOVER_DIRECTION } from '@libs-ui/components-popover';
5
+ import * as i0 from "@angular/core";
6
+ export declare class LibsUiComponentsButtonsSelectColorComponent implements OnDestroy {
7
+ private color;
8
+ private popoverFunctionControl;
9
+ readonly zIndex: import("@angular/core").ModelSignal<number>;
10
+ readonly customOptions: import("@angular/core").InputSignal<IPickerCustomOptions | undefined>;
11
+ readonly externalContent: import("@angular/core").InputSignal<boolean>;
12
+ readonly direction: import("@angular/core").InputSignal<TYPE_POPOVER_DIRECTION>;
13
+ readonly button: import("@angular/core").InputSignal<IButton | undefined>;
14
+ readonly applyNow: import("@angular/core").InputSignal<boolean>;
15
+ readonly outColorChange: import("@angular/core").OutputEmitterRef<string>;
16
+ readonly outColorChangeMultipleType: import("@angular/core").OutputEmitterRef<IOutputColorChangeMultipleType>;
17
+ protected handlerColorChange(event: string): void;
18
+ protected handlerFunctionControl(event: IPopoverFunctionControlEvent): void;
19
+ protected handlerAction(event: Event, action: 'cancel' | 'apply'): void;
20
+ ngOnDestroy(): void;
21
+ static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsButtonsSelectColorComponent, never>;
22
+ static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsButtonsSelectColorComponent, "libs_ui-components-buttons-select_color", never, { "zIndex": { "alias": "zIndex"; "required": false; "isSignal": true; }; "customOptions": { "alias": "customOptions"; "required": false; "isSignal": true; }; "externalContent": { "alias": "externalContent"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "button": { "alias": "button"; "required": false; "isSignal": true; }; "applyNow": { "alias": "applyNow"; "required": false; "isSignal": true; }; }, { "zIndex": "zIndexChange"; "outColorChange": "outColorChange"; "outColorChangeMultipleType": "outColorChangeMultipleType"; }, never, ["div.libs-ui-buttons-select-color"], true, never>;
23
+ }
package/esm2022/buttons-select-color.component.mjs ADDED
@@ -0,0 +1,49 @@
1
+ import { ChangeDetectionStrategy, Component, input, model, output, signal } from '@angular/core';
2
+ import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
3
+ import { LibsUiComponentsColorPickerComponent } from '@libs-ui/components-color-picker';
4
+ import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
5
+ import { TranslateModule } from '@ngx-translate/core';
6
+ import * as i0 from "@angular/core";
7
+ export class LibsUiComponentsButtonsSelectColorComponent {
8
+ // #region PROPERTY
9
+ color = signal('');
10
+ popoverFunctionControl = signal(undefined);
11
+ // #region INPUT
12
+ zIndex = model(1200);
13
+ customOptions = input();
14
+ externalContent = input(false);
15
+ direction = input('bottom');
16
+ button = input();
17
+ applyNow = input(false);
18
+ // #region OUTPUT
19
+ outColorChange = output();
20
+ outColorChangeMultipleType = output();
21
+ /* FUNCTIONS */
22
+ handlerColorChange(event) {
23
+ if (this.applyNow()) {
24
+ this.outColorChange.emit(event);
25
+ return;
26
+ }
27
+ this.color.set(event);
28
+ }
29
+ handlerFunctionControl(event) {
30
+ this.popoverFunctionControl.set(event);
31
+ }
32
+ handlerAction(event, action) {
33
+ event.stopPropagation();
34
+ this.popoverFunctionControl()?.removePopoverOverlay();
35
+ if (action === 'apply') {
36
+ this.outColorChange.emit(this.color());
37
+ }
38
+ }
39
+ ngOnDestroy() {
40
+ this.popoverFunctionControl()?.removePopoverOverlay();
41
+ }
42
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsSelectColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
43
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsButtonsSelectColorComponent, isStandalone: true, selector: "libs_ui-components-buttons-select_color", inputs: { zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, externalContent: { classPropertyName: "externalContent", publicName: "externalContent", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, applyNow: { classPropertyName: "applyNow", publicName: "applyNow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zIndex: "zIndexChange", outColorChange: "outColorChange", outColorChangeMultipleType: "outColorChangeMultipleType" }, ngImport: i0, template: "<div\n class=\"flex\"\n LibsUiComponentsPopoverDirective\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n template: colorPicker,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex(),\n classInclude: 'w-[350px]',\n direction: direction(),\n directionDistance: 2,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n @if (externalContent()) {\n <ng-content select=\"div.libs-ui-buttons-select-color\"></ng-content>\n } @else {\n <libs_ui-components-buttons-button\n [type]=\"button()?.type || 'button-primary'\"\n [classIconLeft]=\"button()?.classIconLeft || ''\"\n [classIconRight]=\"button()?.classIconRight || ''\"\n [label]=\"button()?.label || ''\"\n [classLabel]=\"button()?.classLabel || ''\"\n [classInclude]=\"button()?.classInclude || ''\"\n [iconOnlyType]=\"button()?.iconOnlyType || false\"\n [popover]=\"button()?.popover || {}\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n</div>\n\n<ng-template #colorPicker>\n <div class=\"p-[16px] w-auto h-auto\">\n <libs_ui-components-color_picker\n [customOptions]=\"customOptions()\"\n (outColorChange)=\"handlerColorChange($event)\"\n [noEmitEventColorWhenInitComponent]=\"applyNow()\"\n (outColorChangeMultipleType)=\"outColorChangeMultipleType.emit($event)\" />\n @if (!applyNow()) {\n <div class=\"flex items-center justify-end pt-[16px]\">\n <libs_ui-components-buttons-button\n [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button\n [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n }\n </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsColorPickerComponent, selector: "libs_ui-components-color_picker", inputs: ["customOptions", "noEmitEventColorWhenInitComponent"], outputs: ["outColorChange", "outColorChangeMultipleType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
44
+ }
45
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsSelectColorComponent, decorators: [{
46
+ type: Component,
47
+ args: [{ selector: 'libs_ui-components-buttons-select_color', standalone: true, imports: [TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsColorPickerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"flex\"\n LibsUiComponentsPopoverDirective\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n template: colorPicker,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex(),\n classInclude: 'w-[350px]',\n direction: direction(),\n directionDistance: 2,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n @if (externalContent()) {\n <ng-content select=\"div.libs-ui-buttons-select-color\"></ng-content>\n } @else {\n <libs_ui-components-buttons-button\n [type]=\"button()?.type || 'button-primary'\"\n [classIconLeft]=\"button()?.classIconLeft || ''\"\n [classIconRight]=\"button()?.classIconRight || ''\"\n [label]=\"button()?.label || ''\"\n [classLabel]=\"button()?.classLabel || ''\"\n [classInclude]=\"button()?.classInclude || ''\"\n [iconOnlyType]=\"button()?.iconOnlyType || false\"\n [popover]=\"button()?.popover || {}\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n</div>\n\n<ng-template #colorPicker>\n <div class=\"p-[16px] w-auto h-auto\">\n <libs_ui-components-color_picker\n [customOptions]=\"customOptions()\"\n (outColorChange)=\"handlerColorChange($event)\"\n [noEmitEventColorWhenInitComponent]=\"applyNow()\"\n (outColorChangeMultipleType)=\"outColorChangeMultipleType.emit($event)\" />\n @if (!applyNow()) {\n <div class=\"flex items-center justify-end pt-[16px]\">\n <libs_ui-components-buttons-button\n [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button\n [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n }\n </div>\n</ng-template>\n" }]
48
+ }] });
49
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9ucy1zZWxlY3QtY29sb3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2J1dHRvbnMvc2VsZWN0LWNvbG9yL3NyYy9idXR0b25zLXNlbGVjdC1jb2xvci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnV0dG9ucy9zZWxlY3QtY29sb3Ivc3JjL2J1dHRvbnMtc2VsZWN0LWNvbG9yLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVHLE9BQU8sRUFBVyxzQ0FBc0MsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3JHLE9BQU8sRUFBd0Qsb0NBQW9DLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUM5SSxPQUFPLEVBQWdDLGdDQUFnQyxFQUEwQixNQUFNLDZCQUE2QixDQUFDO0FBQ3JJLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7QUFVdEQsTUFBTSxPQUFPLDJDQUEyQztJQUN0RCxtQkFBbUI7SUFDWCxLQUFLLEdBQUcsTUFBTSxDQUFTLEVBQUUsQ0FBQyxDQUFDO0lBQzNCLHNCQUFzQixHQUFHLE1BQU0sQ0FBMkMsU0FBUyxDQUFDLENBQUM7SUFFN0YsZ0JBQWdCO0lBQ1AsTUFBTSxHQUFHLEtBQUssQ0FBUyxJQUFJLENBQUMsQ0FBQztJQUM3QixhQUFhLEdBQUcsS0FBSyxFQUF3QixDQUFDO0lBQzlDLGVBQWUsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7SUFDeEMsU0FBUyxHQUFHLEtBQUssQ0FBeUIsUUFBUSxDQUFDLENBQUM7SUFDcEQsTUFBTSxHQUFHLEtBQUssRUFBVyxDQUFDO0lBQzFCLFFBQVEsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7SUFFMUMsaUJBQWlCO0lBQ1IsY0FBYyxHQUFHLE1BQU0sRUFBVSxDQUFDO0lBQ2xDLDBCQUEwQixHQUFHLE1BQU0sRUFBa0MsQ0FBQztJQUUvRSxlQUFlO0lBQ0wsa0JBQWtCLENBQUMsS0FBYTtRQUN4QyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDO1lBQ3BCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRWhDLE9BQU87UUFDVCxDQUFDO1FBQ0QsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDeEIsQ0FBQztJQUVTLHNCQUFzQixDQUFDLEtBQW1DO1FBQ2xFLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVTLGFBQWEsQ0FBQyxLQUFZLEVBQUUsTUFBMEI7UUFDOUQsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxFQUFFLG9CQUFvQixFQUFFLENBQUM7UUFDdEQsSUFBSSxNQUFNLEtBQUssT0FBTyxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDekMsQ0FBQztJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLHNCQUFzQixFQUFFLEVBQUUsb0JBQW9CLEVBQUUsQ0FBQztJQUN4RCxDQUFDO3dHQXpDVSwyQ0FBMkM7NEZBQTNDLDJDQUEyQyxpaENDZHhELGkvREEyREEsMkNEaERZLGVBQWUsK0JBQUUsZ0NBQWdDLG9nQkFBRSxzQ0FBc0Msc2pCQUFFLG9DQUFvQzs7NEZBRzlILDJDQUEyQztrQkFSdkQsU0FBUzsrQkFFRSx5Q0FBeUMsY0FFdkMsSUFBSSxXQUNQLENBQUMsZUFBZSxFQUFFLGdDQUFnQyxFQUFFLHNDQUFzQyxFQUFFLG9DQUFvQyxDQUFDLG1CQUN6SCx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5wdXQsIG1vZGVsLCBPbkRlc3Ryb3ksIG91dHB1dCwgc2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJQnV0dG9uLCBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtYnV0dG9ucy1idXR0b24nO1xuaW1wb3J0IHsgSU91dHB1dENvbG9yQ2hhbmdlTXVsdGlwbGVUeXBlLCBJUGlja2VyQ3VzdG9tT3B0aW9ucywgTGlic1VpQ29tcG9uZW50c0NvbG9yUGlja2VyQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1jb2xvci1waWNrZXInO1xuaW1wb3J0IHsgSVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudCwgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJDb21wb25lbnQsIFRZUEVfUE9QT1ZFUl9ESVJFQ1RJT04gfSBmcm9tICdAbGlicy11aS9jb21wb25lbnRzLXBvcG92ZXInO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlIH0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1idXR0b25zLXNlbGVjdF9jb2xvcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b25zLXNlbGVjdC1jb2xvci5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtUcmFuc2xhdGVNb2R1bGUsIExpYnNVaUNvbXBvbmVudHNQb3BvdmVyQ29tcG9uZW50LCBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudCwgTGlic1VpQ29tcG9uZW50c0NvbG9yUGlja2VyQ29tcG9uZW50XSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNCdXR0b25zU2VsZWN0Q29sb3JDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICAvLyAjcmVnaW9uIFBST1BFUlRZXG4gIHByaXZhdGUgY29sb3IgPSBzaWduYWw8c3RyaW5nPignJyk7XG4gIHByaXZhdGUgcG9wb3ZlckZ1bmN0aW9uQ29udHJvbCA9IHNpZ25hbDxJUG9wb3ZlckZ1bmN0aW9uQ29udHJvbEV2ZW50IHwgdW5kZWZpbmVkPih1bmRlZmluZWQpO1xuXG4gIC8vICNyZWdpb24gSU5QVVRcbiAgcmVhZG9ubHkgekluZGV4ID0gbW9kZWw8bnVtYmVyPigxMjAwKTtcbiAgcmVhZG9ubHkgY3VzdG9tT3B0aW9ucyA9IGlucHV0PElQaWNrZXJDdXN0b21PcHRpb25zPigpO1xuICByZWFkb25seSBleHRlcm5hbENvbnRlbnQgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IGRpcmVjdGlvbiA9IGlucHV0PFRZUEVfUE9QT1ZFUl9ESVJFQ1RJT04+KCdib3R0b20nKTtcbiAgcmVhZG9ubHkgYnV0dG9uID0gaW5wdXQ8SUJ1dHRvbj4oKTtcbiAgcmVhZG9ubHkgYXBwbHlOb3cgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG5cbiAgLy8gI3JlZ2lvbiBPVVRQVVRcbiAgcmVhZG9ubHkgb3V0Q29sb3JDaGFuZ2UgPSBvdXRwdXQ8c3RyaW5nPigpO1xuICByZWFkb25seSBvdXRDb2xvckNoYW5nZU11bHRpcGxlVHlwZSA9IG91dHB1dDxJT3V0cHV0Q29sb3JDaGFuZ2VNdWx0aXBsZVR5cGU+KCk7XG5cbiAgLyogRlVOQ1RJT05TICovXG4gIHByb3RlY3RlZCBoYW5kbGVyQ29sb3JDaGFuZ2UoZXZlbnQ6IHN0cmluZykge1xuICAgIGlmICh0aGlzLmFwcGx5Tm93KCkpIHtcbiAgICAgIHRoaXMub3V0Q29sb3JDaGFuZ2UuZW1pdChldmVudCk7XG5cbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5jb2xvci5zZXQoZXZlbnQpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJGdW5jdGlvbkNvbnRyb2woZXZlbnQ6IElQb3BvdmVyRnVuY3Rpb25Db250cm9sRXZlbnQpIHtcbiAgICB0aGlzLnBvcG92ZXJGdW5jdGlvbkNvbnRyb2wuc2V0KGV2ZW50KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyQWN0aW9uKGV2ZW50OiBFdmVudCwgYWN0aW9uOiAnY2FuY2VsJyB8ICdhcHBseScpIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB0aGlzLnBvcG92ZXJGdW5jdGlvbkNvbnRyb2woKT8ucmVtb3ZlUG9wb3Zlck92ZXJsYXkoKTtcbiAgICBpZiAoYWN0aW9uID09PSAnYXBwbHknKSB7XG4gICAgICB0aGlzLm91dENvbG9yQ2hhbmdlLmVtaXQodGhpcy5jb2xvcigpKTtcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnBvcG92ZXJGdW5jdGlvbkNvbnRyb2woKT8ucmVtb3ZlUG9wb3Zlck92ZXJsYXkoKTtcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cImZsZXhcIlxuICBMaWJzVWlDb21wb25lbnRzUG9wb3ZlckRpcmVjdGl2ZVxuICBbbW9kZV09XCInY2xpY2stdG9nZ2xlJ1wiXG4gIFtpZ25vcmVIaWRkZW5Qb3BvdmVyQ29udGVudFdoZW5Nb3VzZUxlYXZlXT1cInRydWVcIlxuICBbY29uZmlnXT1cIntcbiAgICB0ZW1wbGF0ZTogY29sb3JQaWNrZXIsXG4gICAgd2hpdGVUaGVtZTogdHJ1ZSxcbiAgICBpZ25vcmVBcnJvdzogdHJ1ZSxcbiAgICB3aWR0aEJ5UGFyZW50OiBmYWxzZSxcbiAgICBtYXhXaWR0aDogNTAwLFxuICAgIG1heEhlaWdodDogNTAwLFxuICAgIHpJbmRleDogekluZGV4KCksXG4gICAgY2xhc3NJbmNsdWRlOiAndy1bMzUwcHhdJyxcbiAgICBkaXJlY3Rpb246IGRpcmVjdGlvbigpLFxuICAgIGRpcmVjdGlvbkRpc3RhbmNlOiAyLFxuICAgIHBvc2l0aW9uOiB7XG4gICAgICBtb2RlOiAnc3RhcnQnLFxuICAgICAgZGlzdGFuY2U6IDAsXG4gICAgfSxcbiAgfVwiXG4gIChvdXRGdW5jdGlvbnNDb250cm9sKT1cImhhbmRsZXJGdW5jdGlvbkNvbnRyb2woJGV2ZW50KVwiPlxuICBAaWYgKGV4dGVybmFsQ29udGVudCgpKSB7XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiZGl2LmxpYnMtdWktYnV0dG9ucy1zZWxlY3QtY29sb3JcIj48L25nLWNvbnRlbnQ+XG4gIH0gQGVsc2Uge1xuICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b25cbiAgICAgIFt0eXBlXT1cImJ1dHRvbigpPy50eXBlIHx8ICdidXR0b24tcHJpbWFyeSdcIlxuICAgICAgW2NsYXNzSWNvbkxlZnRdPVwiYnV0dG9uKCk/LmNsYXNzSWNvbkxlZnQgfHwgJydcIlxuICAgICAgW2NsYXNzSWNvblJpZ2h0XT1cImJ1dHRvbigpPy5jbGFzc0ljb25SaWdodCB8fCAnJ1wiXG4gICAgICBbbGFiZWxdPVwiYnV0dG9uKCk/LmxhYmVsIHx8ICcnXCJcbiAgICAgIFtjbGFzc0xhYmVsXT1cImJ1dHRvbigpPy5jbGFzc0xhYmVsIHx8ICcnXCJcbiAgICAgIFtjbGFzc0luY2x1ZGVdPVwiYnV0dG9uKCk/LmNsYXNzSW5jbHVkZSB8fCAnJ1wiXG4gICAgICBbaWNvbk9ubHlUeXBlXT1cImJ1dHRvbigpPy5pY29uT25seVR5cGUgfHwgZmFsc2VcIlxuICAgICAgW3BvcG92ZXJdPVwiYnV0dG9uKCk/LnBvcG92ZXIgfHwge31cIlxuICAgICAgW2lnbm9yZVN0b3BQcm9wYWdhdGlvbkV2ZW50XT1cInRydWVcIiAvPlxuICB9XG48L2Rpdj5cblxuPG5nLXRlbXBsYXRlICNjb2xvclBpY2tlcj5cbiAgPGRpdiBjbGFzcz1cInAtWzE2cHhdIHctYXV0byBoLWF1dG9cIj5cbiAgICA8bGlic191aS1jb21wb25lbnRzLWNvbG9yX3BpY2tlclxuICAgICAgW2N1c3RvbU9wdGlvbnNdPVwiY3VzdG9tT3B0aW9ucygpXCJcbiAgICAgIChvdXRDb2xvckNoYW5nZSk9XCJoYW5kbGVyQ29sb3JDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICBbbm9FbWl0RXZlbnRDb2xvcldoZW5Jbml0Q29tcG9uZW50XT1cImFwcGx5Tm93KClcIlxuICAgICAgKG91dENvbG9yQ2hhbmdlTXVsdGlwbGVUeXBlKT1cIm91dENvbG9yQ2hhbmdlTXVsdGlwbGVUeXBlLmVtaXQoJGV2ZW50KVwiIC8+XG4gICAgQGlmICghYXBwbHlOb3coKSkge1xuICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIGp1c3RpZnktZW5kIHB0LVsxNnB4XVwiPlxuICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uXG4gICAgICAgICAgW2xhYmVsXT1cIidpMThuX2NhbmNlbCdcIlxuICAgICAgICAgIFt0eXBlXT1cIididXR0b24tdGhpcmQnXCJcbiAgICAgICAgICAob3V0Q2xpY2spPVwiaGFuZGxlckFjdGlvbigkZXZlbnQsICdjYW5jZWwnKVwiIC8+XG4gICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b25cbiAgICAgICAgICBbbGFiZWxdPVwiJ2kxOG5fYXBwbHknXCJcbiAgICAgICAgICBbY2xhc3NJbmNsdWRlXT1cIidtbC1bMTZweF0nXCJcbiAgICAgICAgICAob3V0Q2xpY2spPVwiaGFuZGxlckFjdGlvbigkZXZlbnQsICdhcHBseScpXCIgLz5cbiAgICAgIDwvZGl2PlxuICAgIH1cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19
package/esm2022/index.mjs ADDED
@@ -0,0 +1,2 @@
1
+ export * from './buttons-select-color.component';
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnV0dG9ucy9zZWxlY3QtY29sb3Ivc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsa0NBQWtDLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2J1dHRvbnMtc2VsZWN0LWNvbG9yLmNvbXBvbmVudCc7XG4iXX0=
package/esm2022/libs-ui-components-buttons-select-color.mjs ADDED
@@ -0,0 +1,5 @@
1
+ /**
2
+ * Generated bundle index. Do not edit.
3
+ */
4
+ export * from './index';
5
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLWJ1dHRvbnMtc2VsZWN0LWNvbG9yLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2J1dHRvbnMvc2VsZWN0LWNvbG9yL3NyYy9saWJzLXVpLWNvbXBvbmVudHMtYnV0dG9ucy1zZWxlY3QtY29sb3IudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=
package/fesm2022/libs-ui-components-buttons-select-color.mjs ADDED
@@ -0,0 +1,56 @@
1
+ import * as i0 from '@angular/core';
2
+ import { signal, model, input, output, ChangeDetectionStrategy, Component } from '@angular/core';
3
+ import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
4
+ import { LibsUiComponentsColorPickerComponent } from '@libs-ui/components-color-picker';
5
+ import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
6
+ import { TranslateModule } from '@ngx-translate/core';
7
+
8
+ class LibsUiComponentsButtonsSelectColorComponent {
9
+ // #region PROPERTY
10
+ color = signal('');
11
+ popoverFunctionControl = signal(undefined);
12
+ // #region INPUT
13
+ zIndex = model(1200);
14
+ customOptions = input();
15
+ externalContent = input(false);
16
+ direction = input('bottom');
17
+ button = input();
18
+ applyNow = input(false);
19
+ // #region OUTPUT
20
+ outColorChange = output();
21
+ outColorChangeMultipleType = output();
22
+ /* FUNCTIONS */
23
+ handlerColorChange(event) {
24
+ if (this.applyNow()) {
25
+ this.outColorChange.emit(event);
26
+ return;
27
+ }
28
+ this.color.set(event);
29
+ }
30
+ handlerFunctionControl(event) {
31
+ this.popoverFunctionControl.set(event);
32
+ }
33
+ handlerAction(event, action) {
34
+ event.stopPropagation();
35
+ this.popoverFunctionControl()?.removePopoverOverlay();
36
+ if (action === 'apply') {
37
+ this.outColorChange.emit(this.color());
38
+ }
39
+ }
40
+ ngOnDestroy() {
41
+ this.popoverFunctionControl()?.removePopoverOverlay();
42
+ }
43
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsSelectColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
44
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsButtonsSelectColorComponent, isStandalone: true, selector: "libs_ui-components-buttons-select_color", inputs: { zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, externalContent: { classPropertyName: "externalContent", publicName: "externalContent", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, button: { classPropertyName: "button", publicName: "button", isSignal: true, isRequired: false, transformFunction: null }, applyNow: { classPropertyName: "applyNow", publicName: "applyNow", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { zIndex: "zIndexChange", outColorChange: "outColorChange", outColorChangeMultipleType: "outColorChangeMultipleType" }, ngImport: i0, template: "<div\n class=\"flex\"\n LibsUiComponentsPopoverDirective\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n template: colorPicker,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex(),\n classInclude: 'w-[350px]',\n direction: direction(),\n directionDistance: 2,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n @if (externalContent()) {\n <ng-content select=\"div.libs-ui-buttons-select-color\"></ng-content>\n } @else {\n <libs_ui-components-buttons-button\n [type]=\"button()?.type || 'button-primary'\"\n [classIconLeft]=\"button()?.classIconLeft || ''\"\n [classIconRight]=\"button()?.classIconRight || ''\"\n [label]=\"button()?.label || ''\"\n [classLabel]=\"button()?.classLabel || ''\"\n [classInclude]=\"button()?.classInclude || ''\"\n [iconOnlyType]=\"button()?.iconOnlyType || false\"\n [popover]=\"button()?.popover || {}\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n</div>\n\n<ng-template #colorPicker>\n <div class=\"p-[16px] w-auto h-auto\">\n <libs_ui-components-color_picker\n [customOptions]=\"customOptions()\"\n (outColorChange)=\"handlerColorChange($event)\"\n [noEmitEventColorWhenInitComponent]=\"applyNow()\"\n (outColorChangeMultipleType)=\"outColorChangeMultipleType.emit($event)\" />\n @if (!applyNow()) {\n <div class=\"flex items-center justify-end pt-[16px]\">\n <libs_ui-components-buttons-button\n [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button\n [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n }\n </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsColorPickerComponent, selector: "libs_ui-components-color_picker", inputs: ["customOptions", "noEmitEventColorWhenInitComponent"], outputs: ["outColorChange", "outColorChangeMultipleType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
45
+ }
46
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsSelectColorComponent, decorators: [{
47
+ type: Component,
48
+ args: [{ selector: 'libs_ui-components-buttons-select_color', standalone: true, imports: [TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsColorPickerComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"flex\"\n LibsUiComponentsPopoverDirective\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n template: colorPicker,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex(),\n classInclude: 'w-[350px]',\n direction: direction(),\n directionDistance: 2,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n @if (externalContent()) {\n <ng-content select=\"div.libs-ui-buttons-select-color\"></ng-content>\n } @else {\n <libs_ui-components-buttons-button\n [type]=\"button()?.type || 'button-primary'\"\n [classIconLeft]=\"button()?.classIconLeft || ''\"\n [classIconRight]=\"button()?.classIconRight || ''\"\n [label]=\"button()?.label || ''\"\n [classLabel]=\"button()?.classLabel || ''\"\n [classInclude]=\"button()?.classInclude || ''\"\n [iconOnlyType]=\"button()?.iconOnlyType || false\"\n [popover]=\"button()?.popover || {}\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n</div>\n\n<ng-template #colorPicker>\n <div class=\"p-[16px] w-auto h-auto\">\n <libs_ui-components-color_picker\n [customOptions]=\"customOptions()\"\n (outColorChange)=\"handlerColorChange($event)\"\n [noEmitEventColorWhenInitComponent]=\"applyNow()\"\n (outColorChangeMultipleType)=\"outColorChangeMultipleType.emit($event)\" />\n @if (!applyNow()) {\n <div class=\"flex items-center justify-end pt-[16px]\">\n <libs_ui-components-buttons-button\n [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button\n [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n }\n </div>\n</ng-template>\n" }]
49
+ }] });
50
+
51
+ /**
52
+ * Generated bundle index. Do not edit.
53
+ */
54
+
55
+ export { LibsUiComponentsButtonsSelectColorComponent };
56
+ //# sourceMappingURL=libs-ui-components-buttons-select-color.mjs.map
package/fesm2022/libs-ui-components-buttons-select-color.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"libs-ui-components-buttons-select-color.mjs","sources":["../../../../../../libs-ui/components/buttons/select-color/src/buttons-select-color.component.ts","../../../../../../libs-ui/components/buttons/select-color/src/buttons-select-color.component.html","../../../../../../libs-ui/components/buttons/select-color/src/libs-ui-components-buttons-select-color.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, OnDestroy, output, signal } from '@angular/core';\nimport { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IOutputColorChangeMultipleType, IPickerCustomOptions, LibsUiComponentsColorPickerComponent } from '@libs-ui/components-color-picker';\nimport { IPopoverFunctionControlEvent, LibsUiComponentsPopoverComponent, TYPE_POPOVER_DIRECTION } from '@libs-ui/components-popover';\nimport { TranslateModule } from '@ngx-translate/core';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'libs_ui-components-buttons-select_color',\n templateUrl: './buttons-select-color.component.html',\n standalone: true,\n imports: [TranslateModule, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsColorPickerComponent],\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsButtonsSelectColorComponent implements OnDestroy {\n // #region PROPERTY\n private color = signal<string>('');\n private popoverFunctionControl = signal<IPopoverFunctionControlEvent | undefined>(undefined);\n\n // #region INPUT\n readonly zIndex = model<number>(1200);\n readonly customOptions = input<IPickerCustomOptions>();\n readonly externalContent = input<boolean>(false);\n readonly direction = input<TYPE_POPOVER_DIRECTION>('bottom');\n readonly button = input<IButton>();\n readonly applyNow = input<boolean>(false);\n\n // #region OUTPUT\n readonly outColorChange = output<string>();\n readonly outColorChangeMultipleType = output<IOutputColorChangeMultipleType>();\n\n /* FUNCTIONS */\n protected handlerColorChange(event: string) {\n if (this.applyNow()) {\n this.outColorChange.emit(event);\n\n return;\n }\n this.color.set(event);\n }\n\n protected handlerFunctionControl(event: IPopoverFunctionControlEvent) {\n this.popoverFunctionControl.set(event);\n }\n\n protected handlerAction(event: Event, action: 'cancel' | 'apply') {\n event.stopPropagation();\n this.popoverFunctionControl()?.removePopoverOverlay();\n if (action === 'apply') {\n this.outColorChange.emit(this.color());\n }\n }\n\n ngOnDestroy(): void {\n this.popoverFunctionControl()?.removePopoverOverlay();\n }\n}\n","<div\n class=\"flex\"\n LibsUiComponentsPopoverDirective\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n template: colorPicker,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex(),\n classInclude: 'w-[350px]',\n direction: direction(),\n directionDistance: 2,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n @if (externalContent()) {\n <ng-content select=\"div.libs-ui-buttons-select-color\"></ng-content>\n } @else {\n <libs_ui-components-buttons-button\n [type]=\"button()?.type || 'button-primary'\"\n [classIconLeft]=\"button()?.classIconLeft || ''\"\n [classIconRight]=\"button()?.classIconRight || ''\"\n [label]=\"button()?.label || ''\"\n [classLabel]=\"button()?.classLabel || ''\"\n [classInclude]=\"button()?.classInclude || ''\"\n [iconOnlyType]=\"button()?.iconOnlyType || false\"\n [popover]=\"button()?.popover || {}\"\n [ignoreStopPropagationEvent]=\"true\" />\n }\n</div>\n\n<ng-template #colorPicker>\n <div class=\"p-[16px] w-auto h-auto\">\n <libs_ui-components-color_picker\n [customOptions]=\"customOptions()\"\n (outColorChange)=\"handlerColorChange($event)\"\n [noEmitEventColorWhenInitComponent]=\"applyNow()\"\n (outColorChangeMultipleType)=\"outColorChangeMultipleType.emit($event)\" />\n @if (!applyNow()) {\n <div class=\"flex items-center justify-end pt-[16px]\">\n <libs_ui-components-buttons-button\n [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button\n [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n }\n </div>\n</ng-template>\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 './buttons-select-color.component';
package/package.json ADDED
@@ -0,0 +1,28 @@
1
+ {
2
+ "name": "@libs-ui/components-buttons-select-color",
3
+ "version": "0.1.1-1",
4
+ "peerDependencies": {
5
+ "@angular/core": ">=18.0.0",
6
+ "@libs-ui/components-buttons-button": "0.1.1-1",
7
+ "@libs-ui/components-color-picker": "0.1.1-1",
8
+ "@libs-ui/components-popover": "0.1.1-1",
9
+ "@ngx-translate/core": "^15.0.0"
10
+ },
11
+ "sideEffects": false,
12
+ "module": "fesm2022/libs-ui-components-buttons-select-color.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-select-color.mjs",
21
+ "esm": "./esm2022/libs-ui-components-buttons-select-color.mjs",
22
+ "default": "./fesm2022/libs-ui-components-buttons-select-color.mjs"
23
+ }
24
+ },
25
+ "dependencies": {
26
+ "tslib": "^2.3.0"
27
+ }
28
+ }