@libs-ui/components-buttons-select-color 0.2.306-3 → 0.2.306-5
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
CHANGED
|
@@ -52,9 +52,8 @@ import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components
|
|
|
52
52
|
[button]="{ label: 'Chọn màu', type: 'button-primary' }"
|
|
53
53
|
[customOptions]="{ /* cấu hình picker */ }"
|
|
54
54
|
[applyNow]="false"
|
|
55
|
-
(outColorChange)="onColorChange($event)">
|
|
56
|
-
|
|
57
|
-
`
|
|
55
|
+
(outColorChange)="onColorChange($event)"></libs_ui-components-buttons-select_color>
|
|
56
|
+
`,
|
|
58
57
|
})
|
|
59
58
|
export class ExampleComponent {
|
|
60
59
|
onColorChange(color: string) {
|
|
@@ -72,8 +71,7 @@ export class ExampleComponent {
|
|
|
72
71
|
[direction]="'top'"
|
|
73
72
|
[externalContent]="false"
|
|
74
73
|
[zIndex]="1500"
|
|
75
|
-
(outColorChangeMultipleType)="onMultiColorChange($event)">
|
|
76
|
-
</libs_ui-components-buttons-select_color>
|
|
74
|
+
(outColorChangeMultipleType)="onMultiColorChange($event)"></libs_ui-components-buttons-select_color>
|
|
77
75
|
```
|
|
78
76
|
|
|
79
77
|
```typescript
|
|
@@ -85,7 +83,7 @@ import { LibsUiComponentsButtonsSelectColorComponent } from '@libs-ui/components
|
|
|
85
83
|
selector: 'app-example',
|
|
86
84
|
standalone: true,
|
|
87
85
|
imports: [LibsUiComponentsButtonsSelectColorComponent],
|
|
88
|
-
templateUrl: './example.component.html'
|
|
86
|
+
templateUrl: './example.component.html',
|
|
89
87
|
})
|
|
90
88
|
export class ExampleComponent {}
|
|
91
89
|
```
|
|
@@ -99,21 +97,21 @@ export class ExampleComponent {}
|
|
|
99
97
|
|
|
100
98
|
### Inputs
|
|
101
99
|
|
|
102
|
-
| Tên
|
|
103
|
-
|
|
104
|
-
| button
|
|
105
|
-
| customOptions
|
|
106
|
-
| applyNow
|
|
107
|
-
| externalContent
|
|
108
|
-
| direction
|
|
109
|
-
| zIndex
|
|
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. |
|
|
110
108
|
|
|
111
109
|
### Outputs
|
|
112
110
|
|
|
113
|
-
| Tên
|
|
114
|
-
|
|
115
|
-
| outColorChange
|
|
116
|
-
| outColorChangeMultipleType
|
|
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. |
|
|
117
115
|
|
|
118
116
|
### Interfaces
|
|
119
117
|
|
|
@@ -40,15 +40,10 @@ export class LibsUiComponentsButtonsSelectColorComponent {
|
|
|
40
40
|
this.popoverFunctionControl()?.removePopoverOverlay();
|
|
41
41
|
}
|
|
42
42
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsSelectColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
43
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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
|
|
43
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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
44
|
}
|
|
45
45
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsSelectColorComponent, decorators: [{
|
|
46
46
|
type: Component,
|
|
47
|
-
args: [{ selector: 'libs_ui-components-buttons-select_color', standalone: true, imports: [
|
|
48
|
-
TranslateModule,
|
|
49
|
-
LibsUiComponentsPopoverComponent,
|
|
50
|
-
LibsUiComponentsButtonsButtonComponent,
|
|
51
|
-
LibsUiComponentsColorPickerComponent
|
|
52
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div 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 [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 [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 [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n }\n </div>\n</ng-template>\n" }]
|
|
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" }]
|
|
53
48
|
}] });
|
|
54
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
49
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYnV0dG9ucy1zZWxlY3QtY29sb3IuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2J1dHRvbnMvc2VsZWN0LWNvbG9yL3NyYy9idXR0b25zLXNlbGVjdC1jb2xvci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnV0dG9ucy9zZWxlY3QtY29sb3Ivc3JjL2J1dHRvbnMtc2VsZWN0LWNvbG9yLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBYSxNQUFNLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQzVHLE9BQU8sRUFBVyxzQ0FBc0MsRUFBRSxNQUFNLG9DQUFvQyxDQUFDO0FBQ3JHLE9BQU8sRUFBd0Qsb0NBQW9DLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUM5SSxPQUFPLEVBQWdDLGdDQUFnQyxFQUEwQixNQUFNLDZCQUE2QixDQUFDO0FBQ3JJLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQzs7QUFVdEQsTUFBTSxPQUFPLDJDQUEyQztJQUN0RCxtQkFBbUI7SUFDWCxLQUFLLEdBQUcsTUFBTSxDQUFTLEVBQUUsQ0FBQyxDQUFDO0lBQzNCLHNCQUFzQixHQUFHLE1BQU0sQ0FBMkMsU0FBUyxDQUFDLENBQUM7SUFFN0YsZ0JBQWdCO0lBQ1AsTUFBTSxHQUFHLEtBQUssQ0FBUyxJQUFJLENBQUMsQ0FBQztJQUM3QixhQUFhLEdBQUcsS0FBSyxFQUF3QixDQUFDO0lBQzlDLGVBQWUsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7SUFDeEMsU0FBUyxHQUFHLEtBQUssQ0FBeUIsUUFBUSxDQUFDLENBQUM7SUFDcEQsTUFBTSxHQUFHLEtBQUssRUFBVyxDQUFDO0lBQzFCLFFBQVEsR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7SUFFMUMsaUJBQWlCO0lBQ1IsY0FBYyxHQUFHLE1BQU0sRUFBVSxDQUFDO0lBQ2xDLDBCQUEwQixHQUFHLE1BQU0sRUFBa0MsQ0FBQztJQUUvRSxlQUFlO0lBQ0wsa0JBQWtCLENBQUMsS0FBYTtRQUN4QyxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRSxDQUFDO1lBQ3BCLElBQUksQ0FBQyxjQUFjLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBRWhDLE9BQU87UUFDVCxDQUFDO1FBQ0QsSUFBSSxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDeEIsQ0FBQztJQUVTLHNCQUFzQixDQUFDLEtBQW1DO1FBQ2xFLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDekMsQ0FBQztJQUVTLGFBQWEsQ0FBQyxLQUFZLEVBQUUsTUFBMEI7UUFDOUQsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxzQkFBc0IsRUFBRSxFQUFFLG9CQUFvQixFQUFFLENBQUM7UUFDdEQsSUFBSSxNQUFNLEtBQUssT0FBTyxFQUFFLENBQUM7WUFDdkIsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7UUFDekMsQ0FBQztJQUNILENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLHNCQUFzQixFQUFFLEVBQUUsb0JBQW9CLEVBQUUsQ0FBQztJQUN4RCxDQUFDO3dHQXpDVSwyQ0FBMkM7NEZBQTNDLDJDQUEyQyxpaENDZHhELGkvREEyREEsMkNEaERZLGVBQWUsK0JBQUUsZ0NBQWdDLG9nQkFBRSxzQ0FBc0Msc2pCQUFFLG9DQUFvQzs7NEZBRzlILDJDQUEyQztrQkFSdkQsU0FBUzsrQkFFRSx5Q0FBeUMsY0FFdkMsSUFBSSxXQUNQLENBQUMsZUFBZSxFQUFFLGdDQUFnQyxFQUFFLHNDQUFzQyxFQUFFLG9DQUFvQyxDQUFDLG1CQUN6SCx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5wdXQsIG1vZGVsLCBPbkRlc3Ryb3ksIG91dHB1dCwgc2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJQnV0dG9uLCBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtYnV0dG9ucy1idXR0b24nO1xuaW1wb3J0IHsgSU91dHB1dENvbG9yQ2hhbmdlTXVsdGlwbGVUeXBlLCBJUGlja2VyQ3VzdG9tT3B0aW9ucywgTGlic1VpQ29tcG9uZW50c0NvbG9yUGlja2VyQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1jb2xvci1waWNrZXInO1xuaW1wb3J0IHsgSVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudCwgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJDb21wb25lbnQsIFRZUEVfUE9QT1ZFUl9ESVJFQ1RJT04gfSBmcm9tICdAbGlicy11aS9jb21wb25lbnRzLXBvcG92ZXInO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlIH0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1idXR0b25zLXNlbGVjdF9jb2xvcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9idXR0b25zLXNlbGVjdC1jb2xvci5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtUcmFuc2xhdGVNb2R1bGUsIExpYnNVaUNvbXBvbmVudHNQb3BvdmVyQ29tcG9uZW50LCBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudCwgTGlic1VpQ29tcG9uZW50c0NvbG9yUGlja2VyQ29tcG9uZW50XSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIExpYnNVaUNvbXBvbmVudHNCdXR0b25zU2VsZWN0Q29sb3JDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICAvLyAjcmVnaW9uIFBST1BFUlRZXG4gIHByaXZhdGUgY29sb3IgPSBzaWduYWw8c3RyaW5nPignJyk7XG4gIHByaXZhdGUgcG9wb3ZlckZ1bmN0aW9uQ29udHJvbCA9IHNpZ25hbDxJUG9wb3ZlckZ1bmN0aW9uQ29udHJvbEV2ZW50IHwgdW5kZWZpbmVkPih1bmRlZmluZWQpO1xuXG4gIC8vICNyZWdpb24gSU5QVVRcbiAgcmVhZG9ubHkgekluZGV4ID0gbW9kZWw8bnVtYmVyPigxMjAwKTtcbiAgcmVhZG9ubHkgY3VzdG9tT3B0aW9ucyA9IGlucHV0PElQaWNrZXJDdXN0b21PcHRpb25zPigpO1xuICByZWFkb25seSBleHRlcm5hbENvbnRlbnQgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG4gIHJlYWRvbmx5IGRpcmVjdGlvbiA9IGlucHV0PFRZUEVfUE9QT1ZFUl9ESVJFQ1RJT04+KCdib3R0b20nKTtcbiAgcmVhZG9ubHkgYnV0dG9uID0gaW5wdXQ8SUJ1dHRvbj4oKTtcbiAgcmVhZG9ubHkgYXBwbHlOb3cgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG5cbiAgLy8gI3JlZ2lvbiBPVVRQVVRcbiAgcmVhZG9ubHkgb3V0Q29sb3JDaGFuZ2UgPSBvdXRwdXQ8c3RyaW5nPigpO1xuICByZWFkb25seSBvdXRDb2xvckNoYW5nZU11bHRpcGxlVHlwZSA9IG91dHB1dDxJT3V0cHV0Q29sb3JDaGFuZ2VNdWx0aXBsZVR5cGU+KCk7XG5cbiAgLyogRlVOQ1RJT05TICovXG4gIHByb3RlY3RlZCBoYW5kbGVyQ29sb3JDaGFuZ2UoZXZlbnQ6IHN0cmluZykge1xuICAgIGlmICh0aGlzLmFwcGx5Tm93KCkpIHtcbiAgICAgIHRoaXMub3V0Q29sb3JDaGFuZ2UuZW1pdChldmVudCk7XG5cbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5jb2xvci5zZXQoZXZlbnQpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJGdW5jdGlvbkNvbnRyb2woZXZlbnQ6IElQb3BvdmVyRnVuY3Rpb25Db250cm9sRXZlbnQpIHtcbiAgICB0aGlzLnBvcG92ZXJGdW5jdGlvbkNvbnRyb2wuc2V0KGV2ZW50KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyQWN0aW9uKGV2ZW50OiBFdmVudCwgYWN0aW9uOiAnY2FuY2VsJyB8ICdhcHBseScpIHtcbiAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcbiAgICB0aGlzLnBvcG92ZXJGdW5jdGlvbkNvbnRyb2woKT8ucmVtb3ZlUG9wb3Zlck92ZXJsYXkoKTtcbiAgICBpZiAoYWN0aW9uID09PSAnYXBwbHknKSB7XG4gICAgICB0aGlzLm91dENvbG9yQ2hhbmdlLmVtaXQodGhpcy5jb2xvcigpKTtcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICB0aGlzLnBvcG92ZXJGdW5jdGlvbkNvbnRyb2woKT8ucmVtb3ZlUG9wb3Zlck92ZXJsYXkoKTtcbiAgfVxufVxuIiwiPGRpdlxuICBjbGFzcz1cImZsZXhcIlxuICBMaWJzVWlDb21wb25lbnRzUG9wb3ZlckRpcmVjdGl2ZVxuICBbbW9kZV09XCInY2xpY2stdG9nZ2xlJ1wiXG4gIFtpZ25vcmVIaWRkZW5Qb3BvdmVyQ29udGVudFdoZW5Nb3VzZUxlYXZlXT1cInRydWVcIlxuICBbY29uZmlnXT1cIntcbiAgICB0ZW1wbGF0ZTogY29sb3JQaWNrZXIsXG4gICAgd2hpdGVUaGVtZTogdHJ1ZSxcbiAgICBpZ25vcmVBcnJvdzogdHJ1ZSxcbiAgICB3aWR0aEJ5UGFyZW50OiBmYWxzZSxcbiAgICBtYXhXaWR0aDogNTAwLFxuICAgIG1heEhlaWdodDogNTAwLFxuICAgIHpJbmRleDogekluZGV4KCksXG4gICAgY2xhc3NJbmNsdWRlOiAndy1bMzUwcHhdJyxcbiAgICBkaXJlY3Rpb246IGRpcmVjdGlvbigpLFxuICAgIGRpcmVjdGlvbkRpc3RhbmNlOiAyLFxuICAgIHBvc2l0aW9uOiB7XG4gICAgICBtb2RlOiAnc3RhcnQnLFxuICAgICAgZGlzdGFuY2U6IDAsXG4gICAgfSxcbiAgfVwiXG4gIChvdXRGdW5jdGlvbnNDb250cm9sKT1cImhhbmRsZXJGdW5jdGlvbkNvbnRyb2woJGV2ZW50KVwiPlxuICBAaWYgKGV4dGVybmFsQ29udGVudCgpKSB7XG4gICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiZGl2LmxpYnMtdWktYnV0dG9ucy1zZWxlY3QtY29sb3JcIj48L25nLWNvbnRlbnQ+XG4gIH0gQGVsc2Uge1xuICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b25cbiAgICAgIFt0eXBlXT1cImJ1dHRvbigpPy50eXBlIHx8ICdidXR0b24tcHJpbWFyeSdcIlxuICAgICAgW2NsYXNzSWNvbkxlZnRdPVwiYnV0dG9uKCk/LmNsYXNzSWNvbkxlZnQgfHwgJydcIlxuICAgICAgW2NsYXNzSWNvblJpZ2h0XT1cImJ1dHRvbigpPy5jbGFzc0ljb25SaWdodCB8fCAnJ1wiXG4gICAgICBbbGFiZWxdPVwiYnV0dG9uKCk/LmxhYmVsIHx8ICcnXCJcbiAgICAgIFtjbGFzc0xhYmVsXT1cImJ1dHRvbigpPy5jbGFzc0xhYmVsIHx8ICcnXCJcbiAgICAgIFtjbGFzc0luY2x1ZGVdPVwiYnV0dG9uKCk/LmNsYXNzSW5jbHVkZSB8fCAnJ1wiXG4gICAgICBbaWNvbk9ubHlUeXBlXT1cImJ1dHRvbigpPy5pY29uT25seVR5cGUgfHwgZmFsc2VcIlxuICAgICAgW3BvcG92ZXJdPVwiYnV0dG9uKCk/LnBvcG92ZXIgfHwge31cIlxuICAgICAgW2lnbm9yZVN0b3BQcm9wYWdhdGlvbkV2ZW50XT1cInRydWVcIiAvPlxuICB9XG48L2Rpdj5cblxuPG5nLXRlbXBsYXRlICNjb2xvclBpY2tlcj5cbiAgPGRpdiBjbGFzcz1cInAtWzE2cHhdIHctYXV0byBoLWF1dG9cIj5cbiAgICA8bGlic191aS1jb21wb25lbnRzLWNvbG9yX3BpY2tlclxuICAgICAgW2N1c3RvbU9wdGlvbnNdPVwiY3VzdG9tT3B0aW9ucygpXCJcbiAgICAgIChvdXRDb2xvckNoYW5nZSk9XCJoYW5kbGVyQ29sb3JDaGFuZ2UoJGV2ZW50KVwiXG4gICAgICBbbm9FbWl0RXZlbnRDb2xvcldoZW5Jbml0Q29tcG9uZW50XT1cImFwcGx5Tm93KClcIlxuICAgICAgKG91dENvbG9yQ2hhbmdlTXVsdGlwbGVUeXBlKT1cIm91dENvbG9yQ2hhbmdlTXVsdGlwbGVUeXBlLmVtaXQoJGV2ZW50KVwiIC8+XG4gICAgQGlmICghYXBwbHlOb3coKSkge1xuICAgICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIGp1c3RpZnktZW5kIHB0LVsxNnB4XVwiPlxuICAgICAgICA8bGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uXG4gICAgICAgICAgW2xhYmVsXT1cIidpMThuX2NhbmNlbCdcIlxuICAgICAgICAgIFt0eXBlXT1cIididXR0b24tdGhpcmQnXCJcbiAgICAgICAgICAob3V0Q2xpY2spPVwiaGFuZGxlckFjdGlvbigkZXZlbnQsICdjYW5jZWwnKVwiIC8+XG4gICAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b25cbiAgICAgICAgICBbbGFiZWxdPVwiJ2kxOG5fYXBwbHknXCJcbiAgICAgICAgICBbY2xhc3NJbmNsdWRlXT1cIidtbC1bMTZweF0nXCJcbiAgICAgICAgICAob3V0Q2xpY2spPVwiaGFuZGxlckFjdGlvbigkZXZlbnQsICdhcHBseScpXCIgLz5cbiAgICAgIDwvZGl2PlxuICAgIH1cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuIl19
|
|
@@ -41,16 +41,11 @@ class LibsUiComponentsButtonsSelectColorComponent {
|
|
|
41
41
|
this.popoverFunctionControl()?.removePopoverOverlay();
|
|
42
42
|
}
|
|
43
43
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsSelectColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
44
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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
|
|
44
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", 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
45
|
}
|
|
46
46
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsButtonsSelectColorComponent, decorators: [{
|
|
47
47
|
type: Component,
|
|
48
|
-
args: [{ selector: 'libs_ui-components-buttons-select_color', standalone: true, imports: [
|
|
49
|
-
TranslateModule,
|
|
50
|
-
LibsUiComponentsPopoverComponent,
|
|
51
|
-
LibsUiComponentsButtonsButtonComponent,
|
|
52
|
-
LibsUiComponentsColorPickerComponent
|
|
53
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div 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 [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 [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 [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n }\n </div>\n</ng-template>\n" }]
|
|
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" }]
|
|
54
49
|
}] });
|
|
55
50
|
|
|
56
51
|
/**
|
|
@@ -1 +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: [
|
|
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":";;;;;;;MAca,2CAA2C,CAAA;;AAE9C,IAAA,KAAK,GAAG,MAAM,CAAS,EAAE,CAAC;AAC1B,IAAA,sBAAsB,GAAG,MAAM,CAA2C,SAAS,CAAC;;AAGnF,IAAA,MAAM,GAAG,KAAK,CAAS,IAAI,CAAC;IAC5B,aAAa,GAAG,KAAK,EAAwB;AAC7C,IAAA,eAAe,GAAG,KAAK,CAAU,KAAK,CAAC;AACvC,IAAA,SAAS,GAAG,KAAK,CAAyB,QAAQ,CAAC;IACnD,MAAM,GAAG,KAAK,EAAW;AACzB,IAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,CAAC;;IAGhC,cAAc,GAAG,MAAM,EAAU;IACjC,0BAA0B,GAAG,MAAM,EAAkC;;AAGpE,IAAA,kBAAkB,CAAC,KAAa,EAAA;AACxC,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE,EAAE;AACnB,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC;YAE/B;QACF;AACA,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC;IACvB;AAEU,IAAA,sBAAsB,CAAC,KAAmC,EAAA;AAClE,QAAA,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC,KAAK,CAAC;IACxC;IAEU,aAAa,CAAC,KAAY,EAAE,MAA0B,EAAA;QAC9D,KAAK,CAAC,eAAe,EAAE;AACvB,QAAA,IAAI,CAAC,sBAAsB,EAAE,EAAE,oBAAoB,EAAE;AACrD,QAAA,IAAI,MAAM,KAAK,OAAO,EAAE;YACtB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QACxC;IACF;IAEA,WAAW,GAAA;AACT,QAAA,IAAI,CAAC,sBAAsB,EAAE,EAAE,oBAAoB,EAAE;IACvD;wGAzCW,2CAA2C,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;4FAA3C,2CAA2C,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,yCAAA,EAAA,MAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,aAAA,EAAA,EAAA,iBAAA,EAAA,eAAA,EAAA,UAAA,EAAA,eAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,eAAA,EAAA,EAAA,iBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,MAAA,EAAA,cAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,0BAAA,EAAA,4BAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECdxD,i/DA2DA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDhDY,eAAe,+BAAE,gCAAgC,EAAA,QAAA,EAAA,+DAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,kBAAA,EAAA,6BAAA,EAAA,cAAA,EAAA,0CAAA,EAAA,4BAAA,EAAA,kCAAA,EAAA,8BAAA,EAAA,oBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,wBAAA,EAAA,wBAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,sCAAsC,EAAA,QAAA,EAAA,mCAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,MAAA,EAAA,cAAA,EAAA,YAAA,EAAA,OAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,eAAA,EAAA,gBAAA,EAAA,YAAA,EAAA,cAAA,EAAA,SAAA,EAAA,4BAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,eAAA,EAAA,aAAA,EAAA,yBAAA,EAAA,+BAAA,EAAA,oBAAA,EAAA,UAAA,EAAA,mCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,UAAA,EAAA,iBAAA,EAAA,qBAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,oCAAoC,EAAA,QAAA,EAAA,iCAAA,EAAA,MAAA,EAAA,CAAA,eAAA,EAAA,mCAAA,CAAA,EAAA,OAAA,EAAA,CAAA,gBAAA,EAAA,4BAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;4FAG9H,2CAA2C,EAAA,UAAA,EAAA,CAAA;kBARvD,SAAS;AAEE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,yCAAyC,EAAA,UAAA,EAEvC,IAAI,EAAA,OAAA,EACP,CAAC,eAAe,EAAE,gCAAgC,EAAE,sCAAsC,EAAE,oCAAoC,CAAC,EAAA,eAAA,EACzH,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,i/DAAA,EAAA;;;AEZjD;;AAEG;;;;"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-buttons-select-color",
|
|
3
|
-
"version": "0.2.306-
|
|
3
|
+
"version": "0.2.306-5",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/core": ">=18.0.0",
|
|
6
|
-
"@libs-ui/components-buttons-button": "0.2.306-
|
|
7
|
-
"@libs-ui/components-color-picker": "0.2.306-
|
|
8
|
-
"@libs-ui/components-popover": "0.2.306-
|
|
6
|
+
"@libs-ui/components-buttons-button": "0.2.306-5",
|
|
7
|
+
"@libs-ui/components-color-picker": "0.2.306-5",
|
|
8
|
+
"@libs-ui/components-popover": "0.2.306-5",
|
|
9
9
|
"@ngx-translate/core": "^15.0.0"
|
|
10
10
|
},
|
|
11
11
|
"sideEffects": false,
|