@libs-ui/components-inputs-color 0.2.356-9 → 0.2.357-1

package/README.md

@@ -1,40 +1,40 @@
 # @libs-ui/components-inputs-color
 
-> Component input chọn màu sắc (Color Picker) hỗ trợ độ mờ (opacity) và palette tùy chỉnh.
+> Component input chọn màu sắc (Color Picker) tích hợp palette mặc định, palette tùy chỉnh và điều chỉnh độ mờ (opacity).
 
 ## Giới thiệu
 
-`LibsUiComponentsInputsColorComponent` là một standalone Angular component để chọn màu sắc. Nó tích hợp một bảng màu mặc định, khả năng lưu bảng màu tùy chỉnh và thanh trượt độ mờ trực quan.
+`LibsUiComponentsInputsColorComponent` là một Standalone Angular component dùng để chọn màu sắc kết hợp điều chỉnh độ mờ. Component hiển thị dưới dạng một input thu gọn, khi click sẽ mở Popover chứa bảng màu mặc định, phần quản lý màu tùy chỉnh (tối đa 8 màu gần nhất), và một color picker nâng cao để thêm màu mới. Dữ liệu màu sắc và opacity được quản lý qua Angular `model()` cho phép two-way binding linh hoạt.
 
-### Tính năng
+## Tính năng
 
-- ✅ Chọn màu từ palette mặc định
-- ✅ Lưu và quản lý palette tùy chỉnh (tối đa 8 màu)
-- ✅ Điều chỉnh độ mờ (opacity) trực tiếp
-- ✅ Tích hợp Popover thông minh
-- ✅ Sử dụng Angular Signals cho hiệu năng cao
-- ✅ Standalone Component, dễ dàng tích hợp
+- ✅ Chọn màu từ palette mặc định (có thể cung cấp qua function hoặc dùng cache mặc định)
+- ✅ Lưu và quản lý palette màu tùy chỉnh (tự động giới hạn 8 màu gần nhất)
+- ✅ Điều chỉnh độ mờ (opacity) từ 0–100 trực tiếp trên input
+- ✅ Two-way binding với `[(data)]` qua Angular `model()`
+- ✅ Tích hợp Popover thông minh với `ignoreHiddenPopoverContentWhenMouseLeave`
+- ✅ Hỗ trợ custom provider functions để lấy/lưu danh sách màu từ API
+- ✅ Standalone Component, ChangeDetectionStrategy.OnPush
+- ✅ Tự động cleanup popover khi component bị destroy
 
 ## Khi nào sử dụng
 
-- Khi cần cho phép người dùng chọn màu sắc trong các form cấu hình.
-- Khi cần tích hợp tính năng quản lý màu cá nhân.
-- Khi cần điều chỉnh cả màu sắc và độ trong suốt của phần tử.
+- Khi cần cho phép người dùng chọn màu sắc trong form cấu hình giao diện, thiết kế chart, hoặc tùy biến theme.
+- Khi cần tích hợp quản lý bảng màu cá nhân của người dùng (lưu/tải từ API).
+- Khi cần điều chỉnh đồng thời cả màu sắc và độ trong suốt (opacity) của một phần tử.
+- Khi cần một component compact — hiển thị ô màu + mã hex + input opacity trong một hàng duy nhất.
 
 ## Cài đặt
 
 ```bash
-# npm
 npm install @libs-ui/components-inputs-color
-
-# yarn
-yarn add @libs-ui/components-inputs-color
 ```
 
 ## Import
 
 ```typescript
 import { LibsUiComponentsInputsColorComponent } from '@libs-ui/components-inputs-color';
+import { IColorPickerData } from '@libs-ui/components-inputs-color';
 
 @Component({
   standalone: true,
@@ -44,92 +44,211 @@ import { LibsUiComponentsInputsColorComponent } from '@libs-ui/components-inputs
 export class YourComponent {}
 ```
 
-## Ví dụ
+## Ví dụ sử dụng
+
+### Ví dụ 1 — Cơ bản (Two-way binding)
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { LibsUiComponentsInputsColorComponent, IColorPickerData } from '@libs-ui/components-inputs-color';
+
+@Component({
+  selector: 'app-basic-color',
+  standalone: true,
+  imports: [LibsUiComponentsInputsColorComponent],
+  template: `
+    <libs_ui-components-inputs-color [(data)]="colorData" />
+    <p>Màu hiện tại: {{ colorData().color }} — Opacity: {{ colorData().opacity }}%</p>
+  `,
+})
+export class BasicColorComponent {
+  colorData = signal<IColorPickerData>({ color: '#3b82f6', opacity: 100 });
+}
+```
+
+### Ví dụ 2 — Lắng nghe sự kiện thay đổi màu
+
+```typescript
+import { Component, signal } from '@angular/core';
+import { LibsUiComponentsInputsColorComponent, IColorPickerData } from '@libs-ui/components-inputs-color';
 
-### Cơ bản
+@Component({
+  selector: 'app-color-with-event',
+  standalone: true,
+  imports: [LibsUiComponentsInputsColorComponent],
+  template: `
+    <libs_ui-components-inputs-color
+      [(data)]="colorData"
+      (outColorChange)="handlerColorChange($event)"
+    />
+  `,
+})
+export class ColorWithEventComponent {
+  colorData = signal<IColorPickerData>({ color: '#ef4444', opacity: 80 });
 
-```html
-<libs_ui-components-inputs-color [(data)]="colorData" />
+  handlerColorChange(event: IColorPickerData): void {
+    event; // IColorPickerData không phải DOM Event, không cần stopPropagation
+    // Xử lý nghiệp vụ: lưu màu vào state, gọi API, v.v.
+  }
+}
 ```
 
-### Với Custom Provider
+### Ví dụ 3 — Custom Provider (tích hợp API)
 
-```html
-<libs_ui-components-inputs-color
-  [(data)]="colorData"
-  [functionGetListColorDefault]="getColors"
-  [functionSetListColorCustom]="saveColors" />
+```typescript
+import { Component, signal } from '@angular/core';
+import { LibsUiComponentsInputsColorComponent, IColorPickerData } from '@libs-ui/components-inputs-color';
+
+@Component({
+  selector: 'app-color-custom-provider',
+  standalone: true,
+  imports: [LibsUiComponentsInputsColorComponent],
+  template: `
+    <libs_ui-components-inputs-color
+      [(data)]="colorData"
+      [functionGetListColorDefault]="getColorsDefault"
+      [functionGetListColorCustom]="getColorsCustom"
+      [functionSetListColorCustom]="saveColorsCustom"
+      (outColorChange)="handlerColorChange($event)"
+    />
+  `,
+})
+export class ColorCustomProviderComponent {
+  colorData = signal<IColorPickerData>({ color: '#10b981', opacity: 100 });
+
+  getColorsDefault = async (): Promise<string[]> => {
+    // Ví dụ: gọi API hoặc trả về danh sách màu thương hiệu
+    return ['#ffffff', '#000000', '#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#8b5cf6'];
+  };
+
+  getColorsCustom = async (): Promise<string[]> => {
+    // Ví dụ: tải màu đã lưu của người dùng từ localStorage hoặc API
+    return JSON.parse(localStorage.getItem('user-colors') || '[]');
+  };
+
+  saveColorsCustom = async (colors: string[]): Promise<void> => {
+    // Ví dụ: lưu màu tùy chỉnh vào localStorage hoặc API
+    localStorage.setItem('user-colors', JSON.stringify(colors));
+  };
+
+  handlerColorChange(event: IColorPickerData): void {
+    // Cập nhật style preview hoặc notify component khác
+  }
+}
 ```
 
-## API
+### Ví dụ 4 — Tùy chỉnh Color Picker nâng cao
 
-### libs_ui-components-inputs-color
+```typescript
+import { Component, signal } from '@angular/core';
+import { LibsUiComponentsInputsColorComponent, IColorPickerData } from '@libs-ui/components-inputs-color';
+import { IPickerCustomOptions } from '@libs-ui/components-color-picker';
 
-#### Inputs
+@Component({
+  selector: 'app-color-advanced',
+  standalone: true,
+  imports: [LibsUiComponentsInputsColorComponent],
+  template: `
+    <libs_ui-components-inputs-color
+      [(data)]="colorData"
+      [customOptions]="pickerOptions"
+      [zIndex]="1300"
+    />
+  `,
+})
+export class ColorAdvancedComponent {
+  colorData = signal<IColorPickerData>({ color: '#8b5cf6', opacity: 90 });
+
+  pickerOptions: IPickerCustomOptions = {
+    showHex: true,
+    showRgb: false,
+    showHsl: false,
+    showAlpha: true,
+    format: 'hex',
+  };
+}
+```
 
-| Property                        | Type                                              | Default                       | Description                         |
-| ------------------------------- | ------------------------------------------------- | ----------------------------- | ----------------------------------- |
-| `[(data)]`                      | `model<IColorPickerData>`                         | `{ color: '', opacity: 100 }` | Dữ liệu màu sắc và độ mờ hiện tại   |
-| `[zIndex]`                      | `model<number>`                                   | `1200`                        | Z-index cho popover bảng màu        |
-| `[customOptions]`               | `input<IPickerCustomOptions>`                     | `undefined`                   | Cấu hình cho color picker bên trong |
-| `[functionGetListColorDefault]` | `input<() => Promise<Array<string>>>`             | `undefined`                   | Hàm lấy danh sách màu mặc định      |
-| `[functionGetListColorCustom]`  | `input<() => Promise<Array<string>>>`             | `undefined`                   | Hàm lấy danh sách màu tùy chỉnh     |
-| `[functionSetListColorCustom]`  | `input<(colors: Array<string>) => Promise<void>>` | `undefined`                   | Hàm lưu danh sách màu tùy chỉnh     |
+## @Input() / model()
 
-#### Outputs
+| Input | Type | Default | Mô tả | Ví dụ |
+|---|---|---|---|---|
+| `[(data)]` | `model<IColorPickerData>` | `{ color: '', opacity: 100 }` | Dữ liệu màu sắc (hex) và độ mờ (0–100). Hỗ trợ two-way binding. | `[(data)]="colorData"` |
+| `[(zIndex)]` | `model<number>` | `1200` | Z-index của Popover bảng màu chính. Color picker nâng cao tự động dùng `zIndex + 1`. | `[(zIndex)]="myZIndex"` |
+| `[customOptions]` | `IPickerCustomOptions \| undefined` | `undefined` | Tùy chỉnh giao diện color picker nâng cao (thanh hue, alpha, định dạng hiển thị). | `[customOptions]="pickerOptions"` |
+| `[functionGetListColorDefault]` | `(() => Promise<string[]>) \| undefined` | `undefined` | Function async trả về mảng hex màu mặc định. Nếu không cung cấp, dùng cache nội bộ. | `[functionGetListColorDefault]="getColors"` |
+| `[functionGetListColorCustom]` | `(() => Promise<string[]>) \| undefined` | `undefined` | Function async tải danh sách màu tùy chỉnh đã lưu của người dùng. | `[functionGetListColorCustom]="loadCustom"` |
+| `[functionSetListColorCustom]` | `((colors: string[]) => Promise<void>) \| undefined` | `undefined` | Function async lưu danh sách màu tùy chỉnh. Tự động giữ lại 8 màu gần nhất. | `[functionSetListColorCustom]="saveCustom"` |
 
-| Property           | Type               | Description                          |
-| ------------------ | ------------------ | ------------------------------------ |
-| `(outColorChange)` | `IColorPickerData` | Emit khi màu sắc hoặc độ mờ thay đổi |
+## @Output()
+
+| Output | Type | Mô tả | Handler TS | Binding HTML |
+|---|---|---|---|---|
+| `(outColorChange)` | `IColorPickerData` | Emit khi người dùng chọn màu mới từ palette hoặc thay đổi opacity. | `handlerColorChange(data: IColorPickerData): void { /* xử lý màu */ }` | `(outColorChange)="handlerColorChange($event)"` |
+
+> **Lưu ý:** `outColorChange` emit `IColorPickerData` (không phải DOM Event), vì vậy **không cần** gọi `event.stopPropagation()` trong handler này. Tuy nhiên nếu handler được gắn vào DOM event khác, vẫn áp dụng `stopPropagation()` theo convention.
 
 ## Types & Interfaces
 
+```typescript
+import { IColorPickerData } from '@libs-ui/components-inputs-color';
+import { IPickerCustomOptions } from '@libs-ui/components-color-picker';
+```
+
+### IColorPickerData
+
+Dữ liệu màu sắc truyền vào/ra component. Là kiểu dữ liệu cho `data` model và `outColorChange` output.
+
 ```typescript
 export interface IColorPickerData {
+  /** Mã màu hex (ví dụ: '#3b82f6', '#ffffff') */
   color: string;
+  /** Độ mờ từ 0 (trong suốt hoàn toàn) đến 100 (đục hoàn toàn) */
   opacity: number;
 }
+```
+
+### IPickerCustomOptions
+
+Tùy chỉnh giao diện và tính năng cho color picker nâng cao (truyền qua `[customOptions]`).
 
+```typescript
 export interface IPickerCustomOptions {
+  /** Kích thước thanh SL (Saturation-Lightness). Mặc định: [232, 150] */
   slBarSize?: Array<number>;
+  /** Kích thước thanh Hue. Mặc định: [232, 12] */
   hueBarSize?: Array<number>;
+  /** Kích thước thanh Alpha (opacity). Mặc định: [232, 12] */
   alphaBarSize?: Array<number>;
+  /** Hiển thị input HSL. Mặc định: true */
   showHsl?: boolean;
+  /** Hiển thị input RGB. Mặc định: true */
   showRgb?: boolean;
+  /** Hiển thị input HEX. Mặc định: true */
   showHex?: boolean;
+  /** Hiển thị thanh Alpha (opacity). Mặc định: true */
   showAlpha?: boolean;
+  /** Màu khởi tạo ban đầu cho color picker */
   color?: string | Array<number>;
+  /** Định dạng giá trị trả về */
   format?: 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'hex' | 'color';
 }
 ```
 
-## Công nghệ
+## Lưu ý quan trọng
 
-| Technology      | Version | Purpose          |
-| --------------- | ------- | ---------------- |
-| Angular         | 18+     | Framework        |
-| Angular Signals | -       | State management |
-| TailwindCSS     | 3.x     | Styling          |
-| OnPush          | -       | Change Detection |
+⚠️ **Cache nội bộ khi không cung cấp provider functions**: Nếu không truyền `functionGetListColorDefault`, `functionGetListColorCustom` hoặc `functionSetListColorCustom`, component sẽ tự động dùng `UtilsCache` với các key cố định nội bộ. Hành vi này có thể gây xung đột nếu nhiều instance dùng chung cache. Khuyến nghị luôn cung cấp đầy đủ 3 provider functions khi dùng trong production.
 
-## Demo
+⚠️ **Giới hạn màu tùy chỉnh**: Khi người dùng thêm màu mới qua color picker nâng cao, component tự động giữ lại **tối đa 8 màu gần nhất** (LIFO — màu mới nhất ở đầu). Màu cũ hơn sẽ bị loại bỏ.
 
-```bash
-npx nx serve core-ui
-```
+⚠️ **Z-index tự động tăng**: Popover color picker nâng cao (khi click "Thêm màu") tự động sử dụng `zIndex + 1` so với Popover bảng màu chính. Nếu component nằm trong các lớp overlay khác (dialog, drawer), hãy truyền `[zIndex]` phù hợp để tránh bị che khuất.
 
-Truy cập: `http://localhost:4500/inputs/color`
+⚠️ **Cleanup tự động**: Component tự gọi `removePopoverOverlay()` trong `ngOnDestroy`. Không cần xử lý cleanup popover thủ công từ component cha.
 
-## Unit Tests
+## Demo
 
 ```bash
-# Chạy tests
-npx nx test components-inputs-color
-
-# Coverage
-npx nx test components-inputs-color --coverage
+npx nx serve core-ui
 ```
 
-## License
-
-MIT
+Truy cập: http://localhost:4500/components/inputs/color

package/esm2022/inputs-color.component.mjs

@@ -131,10 +131,10 @@ export class LibsUiComponentsInputsColorComponent {
         this.popoverAddColorFunctionControl()?.removePopoverOverlay();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsColorComponent, isStandalone: true, selector: "libs_ui-components-inputs-color", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, functionGetListColorDefault: { classPropertyName: "functionGetListColorDefault", publicName: "functionGetListColorDefault", isSignal: true, isRequired: false, transformFunction: null }, functionGetListColorCustom: { classPropertyName: "functionGetListColorCustom", publicName: "functionGetListColorCustom", isSignal: true, isRequired: false, transformFunction: null }, functionSetListColorCustom: { classPropertyName: "functionSetListColorCustom", publicName: "functionSetListColorCustom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", zIndex: "zIndexChange", outColorChange: "outColorChange" }, ngImport: i0, template: "<div\n  class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div\n    LibsUiComponentsPopoverDirective\n    class=\"w-full flex\"\n    [mode]=\"'click-toggle'\"\n    [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n    [config]=\"{\n      template: element,\n      whiteTheme: true,\n      ignoreArrow: true,\n      widthByParent: false,\n      maxWidth: 500,\n      maxHeight: 500,\n      zIndex: zIndex(),\n      classInclude: 'w-[334px]',\n      direction: 'left',\n      directionDistance: 4,\n      position: {\n        mode: 'start',\n        distance: 0,\n      },\n    }\"\n    [flagMouse]=\"flagMouse()\"\n    (outEvent)=\"handlerPopoverEvent($event)\"\n    (outFunctionsControl)=\"handlerFunctionControl($event)\">\n    <div class=\"px-[16px] flex items-center\">\n      <span\n        class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n        [style.background-color]=\"data().color\"></span>\n      <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n    </div>\n  </div>\n  <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n    <libs_ui-components-inputs-valid\n      [noBorder]=\"true\"\n      [dataType]=\"'int'\"\n      [minValueNumber]=\"0\"\n      [maxValueNumber]=\"100\"\n      [(item)]=\"data\"\n      [fieldNameBind]=\"'opacity'\"\n      [unitsRight]=\"[{ id: '%', label: '%' }]\"\n      [keySelectedUnitRight]=\"'%'\"\n      [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n      [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n      (outValueChange)=\"handlerChangeOpacity()\" />\n  </div>\n</div>\n\n<ng-template #element>\n  <div class=\"p-[16px] w-full\">\n    <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n      @for (color of colorDefault(); track $index; let i = $index) {\n        <div class=\"py-[5px] px-[8px] relative\">\n          @if ((color | lowercase) === (data().color | lowercase)) {\n            <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n          }\n          <div\n            class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n            [style.background-color]=\"color\"\n            (click)=\"handlerSelectColor($event, color)\"></div>\n        </div>\n      }\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classIconLeft]=\"'libs-ui-icon-add'\"\n        [label]=\"'i18n_add_new'\"\n        [popover]=\"{\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() + 1,\n            classInclude: 'w-[350px]',\n            direction: 'left',\n            directionDistance: -100,\n            position: {\n              mode: 'start',\n              distance: -165,\n            },\n          },\n        }\"\n        [classInclude]=\"'py-[2px] px-[0]'\"\n        (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n        (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n    </div>\n    @if (colorCustom().length) {\n      <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n        @for (color of colorCustom(); track $index; let i = $index) {\n          <div class=\"py-[5px] px-[8px] relative\">\n            @if ((color | lowercase) === (data().color | lowercase)) {\n              <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n            }\n            <div\n              class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n              [style.background-color]=\"color\"\n              (click)=\"handlerSelectColor($event, color)\"></div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\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    <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  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { 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: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsColorPickerComponent, selector: "libs_ui-components-color_picker", inputs: ["customOptions", "noEmitEventColorWhenInitComponent"], outputs: ["outColorChange", "outColorChangeMultipleType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsColorComponent, isStandalone: true, selector: "libs_ui-components-inputs-color", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, functionGetListColorDefault: { classPropertyName: "functionGetListColorDefault", publicName: "functionGetListColorDefault", isSignal: true, isRequired: false, transformFunction: null }, functionGetListColorCustom: { classPropertyName: "functionGetListColorCustom", publicName: "functionGetListColorCustom", isSignal: true, isRequired: false, transformFunction: null }, functionSetListColorCustom: { classPropertyName: "functionSetListColorCustom", publicName: "functionSetListColorCustom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", zIndex: "zIndexChange", outColorChange: "outColorChange" }, ngImport: i0, template: "<div\n  class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div\n    LibsUiComponentsPopoverDirective\n    class=\"w-full flex\"\n    [mode]=\"'click-toggle'\"\n    [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n    [config]=\"{\n      template: element,\n      whiteTheme: true,\n      ignoreArrow: true,\n      widthByParent: false,\n      maxWidth: 500,\n      maxHeight: 500,\n      zIndex: zIndex(),\n      classInclude: 'w-[334px]',\n      direction: 'left',\n      directionDistance: 4,\n      position: {\n        mode: 'start',\n        distance: 0,\n      },\n    }\"\n    [flagMouse]=\"flagMouse()\"\n    (outEvent)=\"handlerPopoverEvent($event)\"\n    (outFunctionsControl)=\"handlerFunctionControl($event)\">\n    <div class=\"px-[16px] flex items-center\">\n      <span\n        class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n        [style.background-color]=\"data().color\"></span>\n      <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n    </div>\n  </div>\n  <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n    <libs_ui-components-inputs-valid\n      [noBorder]=\"true\"\n      [dataType]=\"'int'\"\n      [minValueNumber]=\"0\"\n      [maxValueNumber]=\"100\"\n      [(item)]=\"data\"\n      [fieldNameBind]=\"'opacity'\"\n      [unitsRight]=\"[{ id: '%', label: '%' }]\"\n      [keySelectedUnitRight]=\"'%'\"\n      [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n      [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n      (outValueChange)=\"handlerChangeOpacity()\" />\n  </div>\n</div>\n\n<ng-template #element>\n  <div class=\"p-[16px] w-full\">\n    <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n      @for (color of colorDefault(); track $index; let i = $index) {\n        <div class=\"py-[5px] px-[8px] relative\">\n          @if ((color | lowercase) === (data().color | lowercase)) {\n            <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n          }\n          <div\n            class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n            [style.background-color]=\"color\"\n            (click)=\"handlerSelectColor($event, color)\"\n            (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n        </div>\n      }\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classIconLeft]=\"'libs-ui-icon-add'\"\n        [label]=\"'i18n_add_new'\"\n        [popover]=\"{\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() + 1,\n            classInclude: 'w-[350px]',\n            direction: 'left',\n            directionDistance: -100,\n            position: {\n              mode: 'start',\n              distance: -165,\n            },\n          },\n        }\"\n        [classInclude]=\"'py-[2px] px-[0]'\"\n        (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n        (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n    </div>\n    @if (colorCustom().length) {\n      <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n        @for (color of colorCustom(); track $index; let i = $index) {\n          <div class=\"py-[5px] px-[8px] relative\">\n            @if ((color | lowercase) === (data().color | lowercase)) {\n              <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n            }\n            <div\n              class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n              [style.background-color]=\"color\"\n              (click)=\"handlerSelectColor($event, color)\"\n              (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\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    <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  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { 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: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "ignoreShowMessageError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsColorPickerComponent, selector: "libs_ui-components-color_picker", inputs: ["customOptions", "noEmitEventColorWhenInitComponent"], outputs: ["outColorChange", "outColorChangeMultipleType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsColorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-components-inputs-color', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LowerCasePipe, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsInputsValidComponent, LibsUiComponentsColorPickerComponent], template: "<div\n  class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div\n    LibsUiComponentsPopoverDirective\n    class=\"w-full flex\"\n    [mode]=\"'click-toggle'\"\n    [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n    [config]=\"{\n      template: element,\n      whiteTheme: true,\n      ignoreArrow: true,\n      widthByParent: false,\n      maxWidth: 500,\n      maxHeight: 500,\n      zIndex: zIndex(),\n      classInclude: 'w-[334px]',\n      direction: 'left',\n      directionDistance: 4,\n      position: {\n        mode: 'start',\n        distance: 0,\n      },\n    }\"\n    [flagMouse]=\"flagMouse()\"\n    (outEvent)=\"handlerPopoverEvent($event)\"\n    (outFunctionsControl)=\"handlerFunctionControl($event)\">\n    <div class=\"px-[16px] flex items-center\">\n      <span\n        class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n        [style.background-color]=\"data().color\"></span>\n      <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n    </div>\n  </div>\n  <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n    <libs_ui-components-inputs-valid\n      [noBorder]=\"true\"\n      [dataType]=\"'int'\"\n      [minValueNumber]=\"0\"\n      [maxValueNumber]=\"100\"\n      [(item)]=\"data\"\n      [fieldNameBind]=\"'opacity'\"\n      [unitsRight]=\"[{ id: '%', label: '%' }]\"\n      [keySelectedUnitRight]=\"'%'\"\n      [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n      [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n      (outValueChange)=\"handlerChangeOpacity()\" />\n  </div>\n</div>\n\n<ng-template #element>\n  <div class=\"p-[16px] w-full\">\n    <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n      @for (color of colorDefault(); track $index; let i = $index) {\n        <div class=\"py-[5px] px-[8px] relative\">\n          @if ((color | lowercase) === (data().color | lowercase)) {\n            <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n          }\n          <div\n            class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n            [style.background-color]=\"color\"\n            (click)=\"handlerSelectColor($event, color)\"></div>\n        </div>\n      }\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classIconLeft]=\"'libs-ui-icon-add'\"\n        [label]=\"'i18n_add_new'\"\n        [popover]=\"{\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() + 1,\n            classInclude: 'w-[350px]',\n            direction: 'left',\n            directionDistance: -100,\n            position: {\n              mode: 'start',\n              distance: -165,\n            },\n          },\n        }\"\n        [classInclude]=\"'py-[2px] px-[0]'\"\n        (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n        (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n    </div>\n    @if (colorCustom().length) {\n      <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n        @for (color of colorCustom(); track $index; let i = $index) {\n          <div class=\"py-[5px] px-[8px] relative\">\n            @if ((color | lowercase) === (data().color | lowercase)) {\n              <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n            }\n            <div\n              class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n              [style.background-color]=\"color\"\n              (click)=\"handlerSelectColor($event, color)\"></div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\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    <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  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'libs_ui-components-inputs-color', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LowerCasePipe, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsInputsValidComponent, LibsUiComponentsColorPickerComponent], template: "<div\n  class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div\n    LibsUiComponentsPopoverDirective\n    class=\"w-full flex\"\n    [mode]=\"'click-toggle'\"\n    [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n    [config]=\"{\n      template: element,\n      whiteTheme: true,\n      ignoreArrow: true,\n      widthByParent: false,\n      maxWidth: 500,\n      maxHeight: 500,\n      zIndex: zIndex(),\n      classInclude: 'w-[334px]',\n      direction: 'left',\n      directionDistance: 4,\n      position: {\n        mode: 'start',\n        distance: 0,\n      },\n    }\"\n    [flagMouse]=\"flagMouse()\"\n    (outEvent)=\"handlerPopoverEvent($event)\"\n    (outFunctionsControl)=\"handlerFunctionControl($event)\">\n    <div class=\"px-[16px] flex items-center\">\n      <span\n        class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n        [style.background-color]=\"data().color\"></span>\n      <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n    </div>\n  </div>\n  <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n    <libs_ui-components-inputs-valid\n      [noBorder]=\"true\"\n      [dataType]=\"'int'\"\n      [minValueNumber]=\"0\"\n      [maxValueNumber]=\"100\"\n      [(item)]=\"data\"\n      [fieldNameBind]=\"'opacity'\"\n      [unitsRight]=\"[{ id: '%', label: '%' }]\"\n      [keySelectedUnitRight]=\"'%'\"\n      [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n      [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n      (outValueChange)=\"handlerChangeOpacity()\" />\n  </div>\n</div>\n\n<ng-template #element>\n  <div class=\"p-[16px] w-full\">\n    <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n      @for (color of colorDefault(); track $index; let i = $index) {\n        <div class=\"py-[5px] px-[8px] relative\">\n          @if ((color | lowercase) === (data().color | lowercase)) {\n            <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n          }\n          <div\n            class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n            [style.background-color]=\"color\"\n            (click)=\"handlerSelectColor($event, color)\"\n            (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n        </div>\n      }\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classIconLeft]=\"'libs-ui-icon-add'\"\n        [label]=\"'i18n_add_new'\"\n        [popover]=\"{\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() + 1,\n            classInclude: 'w-[350px]',\n            direction: 'left',\n            directionDistance: -100,\n            position: {\n              mode: 'start',\n              distance: -165,\n            },\n          },\n        }\"\n        [classInclude]=\"'py-[2px] px-[0]'\"\n        (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n        (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n    </div>\n    @if (colorCustom().length) {\n      <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n        @for (color of colorCustom(); track $index; let i = $index) {\n          <div class=\"py-[5px] px-[8px] relative\">\n            @if ((color | lowercase) === (data().color | lowercase)) {\n              <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n            }\n            <div\n              class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n              [style.background-color]=\"color\"\n              (click)=\"handlerSelectColor($event, color)\"\n              (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\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    <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  </div>\n</ng-template>\n" }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXRzLWNvbG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9pbnB1dHMvY29sb3Ivc3JjL2lucHV0cy1jb2xvci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL2NvbG9yL3NyYy9pbnB1dHMtY29sb3IuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ2hELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBcUIsTUFBTSxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwSCxPQUFPLEVBQUUsc0NBQXNDLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUM1RixPQUFPLEVBQXdCLG9DQUFvQyxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDOUcsT0FBTyxFQUFFLG9DQUFvQyxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDeEYsT0FBTyxFQUE0QyxnQ0FBZ0MsRUFBc0IsTUFBTSw2QkFBNkIsQ0FBQztBQUM3SSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDNUMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7QUFHdEQ7OztHQUdHO0FBU0gsTUFBTSxPQUFPLG9DQUFvQztJQUMvQyxtQkFBbUI7SUFDVCxZQUFZLEdBQUcsTUFBTSxDQUFnQixFQUFFLENBQUMsQ0FBQztJQUN6QyxTQUFTLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ25DLFdBQVcsR0FBRyxNQUFNLENBQWdCLEVBQUUsQ0FBQyxDQUFDO0lBQ3hDLFNBQVMsR0FBRyxNQUFNLENBQWEsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLG1CQUFt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QixFQUFFLENBQUM7SUFDaEUsQ0FBQzt3R0FwSlUsb0NBQW9DOzRGQUFwQyxvQ0FBb0MsMG1DQ3RCakQsbWlLQXFJQSwyQ0RqSFksZUFBZSx1RkFBRSxhQUFhLGtEQUFFLGdDQUFnQyxvZ0JBQUUsc0NBQXNDLHNqQkFBRSxvQ0FBb0MsczFEQUFFLG9DQUFvQzs7NEZBRW5MLG9DQUFvQztrQkFSaEQsU0FBUzsrQkFFRSxpQ0FBaUMsY0FFL0IsSUFBSSxtQkFDQyx1QkFBdUIsQ0FBQyxNQUFNLFdBQ3RDLENBQUMsZUFBZSxFQUFFLGFBQWEsRUFBRSxnQ0FBZ0MsRUFBRSxzQ0FBc0MsRUFBRSxvQ0FBb0MsRUFBRSxvQ0FBb0MsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IExvd2VyQ2FzZVBpcGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksIENvbXBvbmVudCwgaW5wdXQsIG1vZGVsLCBPbkRlc3Ryb3ksIE9uSW5pdCwgb3V0cHV0LCBzaWduYWwgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNCdXR0b25zQnV0dG9uQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1idXR0b25zLWJ1dHRvbic7XG5pbXBvcnQgeyBJUGlja2VyQ3VzdG9tT3B0aW9ucywgTGlic1VpQ29tcG9uZW50c0NvbG9yUGlja2VyQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1jb2xvci1waWNrZXInO1xuaW1wb3J0IHsgTGlic1VpQ29tcG9uZW50c0lucHV0c1ZhbGlkQ29tcG9uZW50IH0gZnJvbSAnQGxpYnMtdWkvY29tcG9uZW50cy1pbnB1dHMtdmFsaWQnO1xuaW1wb3J0IHsgSUZsYWdNb3VzZSwgSVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudCwgTGlic1VpQ29tcG9uZW50c1BvcG92ZXJDb21wb25lbnQsIFRZUEVfUE9QT1ZFUl9FVkVOVCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtcG9wb3Zlcic7XG5pbXBvcnQgeyBVdGlsc0NhY2hlIH0gZnJvbSAnQGxpYnMtdWkvdXRpbHMnO1xuaW1wb3J0IHsgVHJhbnNsYXRlTW9kdWxlIH0gZnJvbSAnQG5neC10cmFuc2xhdGUvY29yZSc7XG5pbXBvcnQgeyBJQ29sb3JQaWNrZXJEYXRhIH0gZnJvbSAnLi9pbnRlcmZhY2VzL2NvbG9yLmludGVyZmFjZSc7XG5cbi8qKlxuICogQ29tcG9uZW50IGlucHV0IGNo4buNbiBtw6B1IHPhuq9jIChDb2xvciBQaWNrZXIpIGjhu5cgdHLhu6MgxJHhu5kgbeG7nSAob3BhY2l0eSlcbiAqIEN1bmcgY+G6pXAgYuG6o25nIG3DoHUgbeG6t2MgxJHhu4tuaCB2w6AgY2hvIHBow6lwIG5nxrDhu51pIGTDuW5nIGzGsHUgYuG6o25nIG3DoHUgdMO5eSBjaOG7iW5oXG4gKi9cbkBDb21wb25lbnQoe1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQGFuZ3VsYXItZXNsaW50L2NvbXBvbmVudC1zZWxlY3RvclxuICBzZWxlY3RvcjogJ2xpYnNfdWktY29tcG9uZW50cy1pbnB1dHMtY29sb3InLFxuICB0ZW1wbGF0ZVVybDogJy4vaW5wdXRzLWNvbG9yLmNvbXBvbmVudC5odG1sJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gIGltcG9ydHM6IFtUcmFuc2xhdGVNb2R1bGUsIExvd2VyQ2FzZVBpcGUsIExpYnNVaUNvbXBvbmVudHNQb3BvdmVyQ29tcG9uZW50LCBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudCwgTGlic1VpQ29tcG9uZW50c0lucHV0c1ZhbGlkQ29tcG9uZW50LCBMaWJzVWlDb21wb25lbnRzQ29sb3JQaWNrZXJDb21wb25lbnRdLFxufSlcbmV4cG9ydCBjbGFzcyBMaWJzVWlDb21wb25lbnRzSW5wdXRzQ29sb3JDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gIC8vICNyZWdpb24gUFJPUEVSVFlcbiAgcHJvdGVjdGVkIGNvbG9yRGVmYXVsdCA9IHNpZ25hbDxBcnJheTxzdHJpbmc+PihbXSk7XG4gIHByb3RlY3RlZCBzaG93UG9wdXAgPSBzaWduYWw8Ym9vbGVhbj4oZmFsc2UpO1xuICBwcm90ZWN0ZWQgY29sb3JDdXN0b20gPSBzaWduYWw8QXJyYXk8c3RyaW5nPj4oW10pO1xuICBwcm90ZWN0ZWQgZmxhZ01vdXNlID0gc2lnbmFsPElGbGFnTW91c2U+KHsgaXNNb3VzZUVudGVyOiBmYWxzZSwgaXNNb3VzZUVudGVyQ29udGVudDogZmFsc2UgfSk7XG5cbiAgcHJpdmF0ZSBjb2xvckFkZCA9IHNpZ25hbDxzdHJpbmcgfCB1bmRlZmluZWQ+KHVuZGVmaW5lZCk7XG4gIHByaXZhdGUgcG9wb3ZlckZ1bmN0aW9uQ29udHJvbCA9IHNpZ25hbDxJUG9wb3ZlckZ1bmN0aW9uQ29udHJvbEV2ZW50IHwgdW5kZWZpbmVkPih1bmRlZmluZWQpO1xuICBwcml2YXRlIHBvcG92ZXJBZGRDb2xvckZ1bmN0aW9uQ29udHJvbCA9IHNpZ25hbDxJUG9wb3ZlckZ1bmN0aW9uQ29udHJvbEV2ZW50IHwgdW5kZWZpbmVkPih1bmRlZmluZWQpO1xuXG4gIC8vICNyZWdpb24gSU5QVVRcbiAgLyoqIEThu68gbGnhu4d1IG3DoHUgc+G6r2MgdsOgIMSR4buZIG3hu50gaGnhu4duIHThuqFpICovXG4gIHJlYWRvbmx5IGRhdGEgPSBtb2RlbDxJQ29sb3JQaWNrZXJEYXRhPih7IGNvbG9yOiAnJywgb3BhY2l0eTogMTAwIH0pO1xuXG4gIC8qKiBaLWluZGV4IGNobyBwb3BvdmVyIGLhuqNuZyBtw6B1ICovXG4gIHJlYWRvbmx5IHpJbmRleCA9IG1vZGVsPG51bWJlcj4oMTIwMCk7XG5cbiAgLyoqIEPhuqV1IGjDrG5oIHTDuXkgY2jhu4luaCBjaG8gY29sb3IgcGlja2VyICovXG4gIHJlYWRvbmx5IGN1c3RvbU9wdGlvbnMgPSBpbnB1dDxJUGlja2VyQ3VzdG9tT3B0aW9ucz4oKTtcblxuICAvKiogRnVuY3Rpb24gbOG6pXkgZGFuaCBzw6FjaCBtw6B1IG3hurdjIMSR4buLbmggKi9cbiAgcmVhZG9ubHkgZnVuY3Rpb25HZXRMaXN0Q29sb3JEZWZhdWx0ID0gaW5wdXQ8KCkgPT4gUHJvbWlzZTxBcnJheTxzdHJpbmc+Pj4oKTtcblxuICAvKiogRnVuY3Rpb24gbOG6pXkgZGFuaCBzw6FjaCBtw6B1IHTDuXkgY2jhu4luaCDEkcOjIGzGsHUgKi9cbiAgcmVhZG9ubHkgZnVuY3Rpb25HZXRMaXN0Q29sb3JDdXN0b20gPSBpbnB1dDwoKSA9PiBQcm9taXNlPEFycmF5PHN0cmluZz4+PigpO1xuXG4gIC8qKiBGdW5jdGlvbiBsxrB1IGRhbmggc8OhY2ggbcOgdSB0w7l5IGNo4buJbmggbeG7m2kgKi9cbiAgcmVhZG9ubHkgZnVuY3Rpb25TZXRMaXN0Q29sb3JDdXN0b20gPSBpbnB1dDwoY29sb3JzOiBBcnJheTxzdHJpbmc+KSA9PiBQcm9taXNlPHZvaWQ+PigpO1xuXG4gIC8vICNyZWdpb24gT1VUUFVUXG4gIC8qKiBFbWl0IGtoaSBtw6B1IHPhuq9jIGhv4bq3YyDEkeG7mSBt4budIHRoYXkgxJHhu5VpICovXG4gIHJlYWRvbmx5IG91dENvbG9yQ2hhbmdlID0gb3V0cHV0PElDb2xvclBpY2tlckRhdGE+KCk7XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgdGhpcy5nZXRMaXN0Q29sb3JEZWZhdWx0KCk7XG4gIH1cblxuICAvKiBGVU5DVElPTlMgKi9cbiAgcHJpdmF0ZSBhc3luYyBnZXRMaXN0Q29sb3JEZWZhdWx0KCkge1xuICAgIGNvbnN0IGZ1bmN0aW9uR2V0TGlzdENvbG9yRGVmYXVsdCA9IHRoaXMuZnVuY3Rpb25HZXRMaXN0Q29sb3JEZWZhdWx0KCk7XG5cbiAgICBpZiAoZnVuY3Rpb25HZXRMaXN0Q29sb3JEZWZhdWx0KSB7XG4gICAgICB0aGlzLmNvbG9yRGVmYXVsdC5zZXQoYXdhaXQgZnVuY3Rpb25HZXRMaXN0Q29sb3JEZWZhdWx0KCkpO1xuXG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuY29sb3JEZWZhdWx0LnNldCgoYXdhaXQgVXRpbHNDYWNoZS5HZXRBc3luYygna25manNkZndlbmNsc2RuY2tqc2Rmc2Rmc2Rmc2hpbWRzamRmamtzdXdlc2ZzZGZzZGYnKSkgfHwgW10pO1xuICB9XG5cbiAgcHJpdmF0ZSBhc3luYyBnZXRMaXN0Q29sb3JDdXN0b20oKSB7XG4gICAgY29uc3QgZnVuY3Rpb25HZXRMaXN0Q29sb3JDdXN0b20gPSB0aGlzLmZ1bmN0aW9uR2V0TGlzdENvbG9yQ3VzdG9tKCk7XG5cbiAgICBpZiAoZnVuY3Rpb25HZXRMaXN0Q29sb3JDdXN0b20pIHtcbiAgICAgIHRoaXMuY29sb3JDdXN0b20uc2V0KGF3YWl0IGZ1bmN0aW9uR2V0TGlzdENvbG9yQ3VzdG9tKCkpO1xuXG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuY29sb3JDdXN0b20uc2V0KChhd2FpdCBVdGlsc0NhY2hlLkdldEFzeW5jKCdrbmZqc2Rmd2VuY2xzZG5ja2pzZGZzZGZzZGZzaGltZHNqZGZqa3N1ZHZzamFoZHZqYXNqZGh3ZXNmc2Rmc2RmJykpIHx8IFtdKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyUG9wb3ZlckV2ZW50KHR5cGU6IFRZUEVfUE9QT1ZFUl9FVkVOVCkge1xuICAgIGlmICh0eXBlID09PSAnc2hvdycpIHtcbiAgICAgIHRoaXMuc2hvd1BvcHVwLnNldCh0cnVlKTtcbiAgICAgIHRoaXMuZ2V0TGlzdENvbG9yQ3VzdG9tKCk7XG5cbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKHR5cGUgPT09ICdyZW1vdmUnKSB7XG4gICAgICB0aGlzLnNob3dQb3B1cC5zZXQoZmFsc2UpO1xuICAgIH1cbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyU2VsZWN0Q29sb3IoZXZlbnQ6IEV2ZW50LCBjb2xvcjogc3RyaW5nKSB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgdGhpcy5kYXRhLnVwZGF0ZSgodmFsdWUpID0+ICh7IC4uLnZhbHVlLCBjb2xvciB9KSk7XG4gICAgdGhpcy5vdXRDb2xvckNoYW5nZS5lbWl0KHRoaXMuZGF0YSgpIGFzIElDb2xvclBpY2tlckRhdGEpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJDaGFuZ2VPcGFjaXR5KCkge1xuICAgIHRoaXMub3V0Q29sb3JDaGFuZ2UuZW1pdCh0aGlzLmRhdGEoKSBhcyBJQ29sb3JQaWNrZXJEYXRhKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyQ29sb3JDaGFuZ2UoZXZlbnQ6IHN0cmluZykge1xuICAgIHRoaXMuY29sb3JBZGQuc2V0KGV2ZW50KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyUG9wb3ZlckFkZENvbG9yRXZlbnQodHlwZTogVFlQRV9QT1BPVkVSX0VWRU5UKSB7XG4gICAgaWYgKHR5cGUgPT09ICdzaG93Jykge1xuICAgICAgdGhpcy5mbGFnTW91c2Uuc2V0KHsgaXNNb3VzZUVudGVyOiB0cnVlLCBpc01vdXNlRW50ZXJDb250ZW50OiB0cnVlIH0pO1xuXG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGlmICh0eXBlID09PSAncmVtb3ZlJykge1xuICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgIHRoaXMuZmxhZ01vdXNlLnNldCh7IGlzTW91c2VFbnRlcjogZmFsc2UsIGlzTW91c2VFbnRlckNvbnRlbnQ6IGZhbHNlIH0pO1xuICAgICAgfSwgNTAwKTtcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgaGFuZGxlckZ1bmN0aW9uQ29udHJvbChldmVudDogSVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudCkge1xuICAgIHRoaXMucG9wb3ZlckZ1bmN0aW9uQ29udHJvbC5zZXQoZXZlbnQpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJBZGRDb2xvckZ1bmN0aW9uQ29udHJvbChldmVudDogSVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudCkge1xuICAgIHRoaXMucG9wb3ZlckFkZENvbG9yRnVuY3Rpb25Db250cm9sLnNldChldmVudCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaGFuZGxlckFjdGlvbihldmVudDogRXZlbnQsIGFjdGlvbjogJ2NhbmNlbCcgfCAnYXBwbHknKSB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgdGhpcy5wb3BvdmVyQWRkQ29sb3JGdW5jdGlvbkNvbnRyb2woKT8ucmVtb3ZlUG9wb3Zlck92ZXJsYXkoKTtcbiAgICBpZiAoYWN0aW9uID09PSAnY2FuY2VsJykge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBjb25zdCBjb2xvckFkZCA9IHRoaXMuY29sb3JBZGQoKTtcblxuICAgIGlmICghY29sb3JBZGQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5oYW5kbGVyU2VsZWN0Q29sb3IoZXZlbnQsIGNvbG9yQWRkKTtcbiAgICBpZiAodGhpcy5jb2xvckN1c3RvbSgpLmZpbmQoKGNvbG9yKSA9PiBjb2xvciA9PT0gY29sb3JBZGQpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuY29sb3JDdXN0b20udXBkYXRlKCh2YWx1ZSkgPT4ge1xuICAgICAgdmFsdWUudW5zaGlmdChjb2xvckFkZCk7XG4gICAgICBpZiAodmFsdWUubGVuZ3RoID4gOCkge1xuICAgICAgICB2YWx1ZS5zcGxpY2UoOCwgdmFsdWUubGVuZ3RoIC0gOCk7XG4gICAgICB9XG5cbiAgICAgIHJldHVybiBbLi4udmFsdWVdO1xuICAgIH0pO1xuICAgIHRoaXMuc2V0Q29sb3JDdXN0b20oKTtcbiAgfVxuXG4gIHByaXZhdGUgYXN5bmMgc2V0Q29sb3JDdXN0b20oKSB7XG4gICAgY29uc3QgZnVuY3Rpb25TZXRMaXN0Q29sb3JDdXN0b20gPSB0aGlzLmZ1bmN0aW9uU2V0TGlzdENvbG9yQ3VzdG9tKCk7XG5cbiAgICBpZiAoZnVuY3Rpb25TZXRMaXN0Q29sb3JDdXN0b20pIHtcbiAgICAgIGF3YWl0IGZ1bmN0aW9uU2V0TGlzdENvbG9yQ3VzdG9tKHRoaXMuY29sb3JDdXN0b20oKSk7XG5cbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgVXRpbHNDYWNoZS5TZXRBc3luYygna25manNkZndlbmNsc2RuY2tqc2Rmc2Rmc2Rmc2hpbWRzamRmamtzdWR2c2phaGR2amFzamRod2VzZnNkZnNkZicsIHRoaXMuY29sb3JDdXN0b20oKSwgVXRpbHNDYWNoZS5DQUNIRV9FWFBJUkVfTk9ORSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLnBvcG92ZXJGdW5jdGlvbkNvbnRyb2woKT8ucmVtb3ZlUG9wb3Zlck92ZXJsYXkoKTtcbiAgICB0aGlzLnBvcG92ZXJBZGRDb2xvckZ1bmN0aW9uQ29udHJvbCgpPy5yZW1vdmVQb3BvdmVyT3ZlcmxheSgpO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwidy1mdWxsIGZsZXgganVzdGlmeS1iZXR3ZWVuIHJvdW5kZWQtWzRweF0gaC1bMzJweF1cIlxuICBbY2xhc3MubGlicy11aS1ib3JkZXItZ2VuZXJhbF09XCIhc2hvd1BvcHVwKClcIlxuICBbY2xhc3MubGlicy11aS1ib3JkZXItcHJpbWFyeS1mb2N1cy1nZW5lcmFsXT1cInNob3dQb3B1cCgpXCI+XG4gIDxkaXZcbiAgICBMaWJzVWlDb21wb25lbnRzUG9wb3ZlckRpcmVjdGl2ZVxuICAgIGNsYXNzPVwidy1mdWxsIGZsZXhcIlxuICAgIFttb2RlXT1cIidjbGljay10b2dnbGUnXCJcbiAgICBbaWdub3JlSGlkZGVuUG9wb3ZlckNvbnRlbnRXaGVuTW91c2VMZWF2ZV09XCJ0cnVlXCJcbiAgICBbY29uZmlnXT1cIntcbiAgICAgIHRlbXBsYXRlOiBlbGVtZW50LFxuICAgICAgd2hpdGVUaGVtZTogdHJ1ZSxcbiAgICAgIGlnbm9yZUFycm93OiB0cnVlLFxuICAgICAgd2lkdGhCeVBhcmVudDogZmFsc2UsXG4gICAgICBtYXhXaWR0aDogNTAwLFxuICAgICAgbWF4SGVpZ2h0OiA1MDAsXG4gICAgICB6SW5kZXg6IHpJbmRleCgpLFxuICAgICAgY2xhc3NJbmNsdWRlOiAndy1bMzM0cHhdJyxcbiAgICAgIGRpcmVjdGlvbjogJ2xlZnQnLFxuICAgICAgZGlyZWN0aW9uRGlzdGFuY2U6IDQsXG4gICAgICBwb3NpdGlvbjoge1xuICAgICAgICBtb2RlOiAnc3RhcnQnLFxuICAgICAgICBkaXN0YW5jZTogMCxcbiAgICAgIH0sXG4gICAgfVwiXG4gICAgW2ZsYWdNb3VzZV09XCJmbGFnTW91c2UoKVwiXG4gICAgKG91dEV2ZW50KT1cImhhbmRsZXJQb3BvdmVyRXZlbnQoJGV2ZW50KVwiXG4gICAgKG91dEZ1bmN0aW9uc0NvbnRyb2wpPVwiaGFuZGxlckZ1bmN0aW9uQ29udHJvbCgkZXZlbnQpXCI+XG4gICAgPGRpdiBjbGFzcz1cInB4LVsxNnB4XSBmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgPHNwYW5cbiAgICAgICAgY2xhc3M9XCJ3LVsxNnB4XSBoLVsxNnB4XSByb3VuZGVkLVs0cHhdIGxpYnMtdWktYm9yZGVyLWdlbmVyYWxcIlxuICAgICAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJkYXRhKCkuY29sb3JcIj48L3NwYW4+XG4gICAgICA8c3BhbiBjbGFzcz1cImxpYnMtdWktZm9udC1oNXIgbWwtWzhweF1cIj57eyBkYXRhKCkuY29sb3IgfX08L3NwYW4+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwidy1bODBweF0gc2hyaW5rLTAgbGlicy11aS1ib3JkZXItbGVmdC1nZW5lcmFsXCI+XG4gICAgPGxpYnNfdWktY29tcG9uZW50cy1pbnB1dHMtdmFsaWRcbiAgICAgIFtub0JvcmRlcl09XCJ0cnVlXCJcbiAgICAgIFtkYXRhVHlwZV09XCInaW50J1wiXG4gICAgICBbbWluVmFsdWVOdW1iZXJdPVwiMFwiXG4gICAgICBbbWF4VmFsdWVOdW1iZXJdPVwiMTAwXCJcbiAgICAgIFsoaXRlbSldPVwiZGF0YVwiXG4gICAgICBbZmllbGROYW1lQmluZF09XCInb3BhY2l0eSdcIlxuICAgICAgW3VuaXRzUmlnaHRdPVwiW3sgaWQ6ICclJywgbGFiZWw6ICclJyB9XVwiXG4gICAgICBba2V5U2VsZWN0ZWRVbml0UmlnaHRdPVwiJyUnXCJcbiAgICAgIFtjbGFzc0luY2x1ZGVJbnB1dF09XCIndGV4dC1jZW50ZXIgIXAtMCAhaC1bMjhweF0gIW1pbi1oLVsyOHB4XSdcIlxuICAgICAgW2NvbmZpZ1VuaXRSaWdodF09XCJ7IGNsYXNzSW5jbHVkZTogJyFoLVszMHB4XScsIGZpZWxkS2V5OiAnaWQnLCBmaWVsZExhYmVsOiAnbGFiZWwnIH1cIlxuICAgICAgKG91dFZhbHVlQ2hhbmdlKT1cImhhbmRsZXJDaGFuZ2VPcGFjaXR5KClcIiAvPlxuICA8L2Rpdj5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI2VsZW1lbnQ+XG4gIDxkaXYgY2xhc3M9XCJwLVsxNnB4XSB3LWZ1bGxcIj5cbiAgICA8ZGl2IGNsYXNzPVwibWItWzE2cHhdIGdyaWQgZ2FwLXktWzRweF0gZ2FwLXgtWzJweF0gZ3JpZC1jb2xzLThcIj5cbiAgICAgIEBmb3IgKGNvbG9yIG9mIGNvbG9yRGVmYXVsdCgpOyB0cmFjayAkaW5kZXg7IGxldCBpID0gJGluZGV4KSB7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJweS1bNXB4XSBweC1bOHB4XSByZWxhdGl2ZVwiPlxuICAgICAgICAgIEBpZiAoKGNvbG9yIHwgbG93ZXJjYXNlKSA9PT0gKGRhdGEoKS5jb2xvciB8IGxvd2VyY2FzZSkpIHtcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ3LVszMHB4XSBoLVszMHB4XSByb3VuZGVkLVszMHB4XSB0b3AtMCBsZWZ0LVszcHhdIGFic29sdXRlIGxpYnMtdWktYm9yZGVyLXByaW1hcnktZ2VuZXJhbCAhYm9yZGVyLTJcIj48L2Rpdj5cbiAgICAgICAgICB9XG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgY2xhc3M9XCJ3LVsyMHB4XSBoLVsyMHB4XSByb3VuZGVkLVsyMHB4XSBjdXJzb3ItcG9pbnRlclwiXG4gICAgICAgICAgICBbY2xhc3MubGlicy11aS1ib3JkZXItZ2VuZXJhbF09XCIoY29sb3IgfCBsb3dlcmNhc2UpID09PSAnI2ZmZmZmZidcIlxuICAgICAgICAgICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiY29sb3JcIlxuICAgICAgICAgICAgKGNsaWNrKT1cImhhbmRsZXJTZWxlY3RDb2xvcigkZXZlbnQsIGNvbG9yKVwiPjwvZGl2PlxuICAgICAgICA8L2Rpdj5cbiAgICAgIH1cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1iZXR3ZWVuXCI+XG4gICAgICA8c3BhbiBjbGFzcz1cImxpYnMtdWktZm9udC1oNW0gY29sb3ItWyM2YTczODNdXCI+e3sgJ2kxOG5fY29sb3JfY3VzdG9tJyB8IHRyYW5zbGF0ZSB9fTwvc3Bhbj5cbiAgICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b25cbiAgICAgICAgW3R5cGVdPVwiJ2J1dHRvbi1saW5rLXByaW1hcnknXCJcbiAgICAgICAgW2NsYXNzSWNvbkxlZnRdPVwiJ2xpYnMtdWktaWNvbi1hZGQnXCJcbiAgICAgICAgW2xhYmVsXT1cIidpMThuX2FkZF9uZXcnXCJcbiAgICAgICAgW3BvcG92ZXJdPVwie1xuICAgICAgICAgIG1vZGU6ICdjbGljay10b2dnbGUnLFxuICAgICAgICAgIGlnbm9yZUhpZGRlblBvcG92ZXJDb250ZW50V2hlbk1vdXNlTGVhdmU6IHRydWUsXG4gICAgICAgICAgY29uZmlnOiB7XG4gICAgICAgICAgICB0ZW1wbGF0ZTogY29sb3JQaWNrZXIsXG4gICAgICAgICAgICB3aGl0ZVRoZW1lOiB0cnVlLFxuICAgICAgICAgICAgaWdub3JlQXJyb3c6IHRydWUsXG4gICAgICAgICAgICB3aWR0aEJ5UGFyZW50OiBmYWxzZSxcbiAgICAgICAgICAgIG1heFdpZHRoOiA1MDAsXG4gICAgICAgICAgICBtYXhIZWlnaHQ6IDUwMCxcbiAgICAgICAgICAgIHpJbmRleDogekluZGV4KCkgKyAxLFxuICAgICAgICAgICAgY2xhc3NJbmNsdWRlOiAndy1bMzUwcHhdJyxcbiAgICAgICAgICAgIGRpcmVjdGlvbjogJ2xlZnQnLFxuICAgICAgICAgICAgZGlyZWN0aW9uRGlzdGFuY2U6IC0xMDAsXG4gICAgICAgICAgICBwb3NpdGlvbjoge1xuICAgICAgICAgICAgICBtb2RlOiAnc3RhcnQnLFxuICAgICAgICAgICAgICBkaXN0YW5jZTogLTE2NSxcbiAgICAgICAgICAgIH0sXG4gICAgICAgICAgfSxcbiAgICAgICAgfVwiXG4gICAgICAgIFtjbGFzc0luY2x1ZGVdPVwiJ3B5LVsycHhdIHB4LVswXSdcIlxuICAgICAgICAob3V0UG9wb3ZlckV2ZW50KT1cImhhbmRsZXJQb3BvdmVyQWRkQ29sb3JFdmVudCgkZXZlbnQpXCJcbiAgICAgICAgKG91dEZ1bmN0aW9uc0NvbnRyb2wpPVwiaGFuZGxlckFkZENvbG9yRnVuY3Rpb25Db250cm9sKCRldmVudClcIiAvPlxuICAgIDwvZGl2PlxuICAgIEBpZiAoY29sb3JDdXN0b20oKS5sZW5ndGgpIHtcbiAgICAgIDxkaXYgY2xhc3M9XCJncmlkIGdhcC15LVs0cHhdIGdhcC14LVsycHhdIGdyaWQtY29scy04XCI+XG4gICAgICAgIEBmb3IgKGNvbG9yIG9mIGNvbG9yQ3VzdG9tKCk7IHRyYWNrICRpbmRleDsgbGV0IGkgPSAkaW5kZXgpIHtcbiAgICAgICAgICA8ZGl2IGNsYXNzPVwicHktWzVweF0gcHgtWzhweF0gcmVsYXRpdmVcIj5cbiAgICAgICAgICAgIEBpZiAoKGNvbG9yIHwgbG93ZXJjYXNlKSA9PT0gKGRhdGEoKS5jb2xvciB8IGxvd2VyY2FzZSkpIHtcbiAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInctWzMwcHhdIGgtWzMwcHhdIHJvdW5kZWQtWzMwcHhdIHRvcC0wIGxlZnQtWzNweF0gYWJzb2x1dGUgbGlicy11aS1ib3JkZXItcHJpbWFyeS1nZW5lcmFsICFib3JkZXItMlwiPjwvZGl2PlxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgPGRpdlxuICAgICAgICAgICAgICBjbGFzcz1cInctWzIwcHhdIGgtWzIwcHhdIHJvdW5kZWQtWzIwcHhdIGN1cnNvci1wb2ludGVyXCJcbiAgICAgICAgICAgICAgW2NsYXNzLmxpYnMtdWktYm9yZGVyLWdlbmVyYWxdPVwiKGNvbG9yIHwgbG93ZXJjYXNlKSA9PT0gJyNmZmZmZmYnXCJcbiAgICAgICAgICAgICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiY29sb3JcIlxuICAgICAgICAgICAgICAoY2xpY2spPVwiaGFuZGxlclNlbGVjdENvbG9yKCRldmVudCwgY29sb3IpXCI+PC9kaXY+XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICAgIDwvZGl2PlxuICAgIH1cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2NvbG9yUGlja2VyPlxuICA8ZGl2IGNsYXNzPVwicC1bMTZweF0gdy1hdXRvIGgtYXV0b1wiPlxuICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtY29sb3JfcGlja2VyXG4gICAgICBbY3VzdG9tT3B0aW9uc109XCJjdXN0b21PcHRpb25zKClcIlxuICAgICAgKG91dENvbG9yQ2hhbmdlKT1cImhhbmRsZXJDb2xvckNoYW5nZSgkZXZlbnQpXCIgLz5cbiAgICA8ZGl2IGNsYXNzPVwiZmxleCBpdGVtcy1jZW50ZXIganVzdGlmeS1lbmQgcHQtWzE2cHhdXCI+XG4gICAgICA8bGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uXG4gICAgICAgIFtsYWJlbF09XCInaTE4bl9jYW5jZWwnXCJcbiAgICAgICAgW3R5cGVdPVwiJ2J1dHRvbi10aGlyZCdcIlxuICAgICAgICAob3V0Q2xpY2spPVwiaGFuZGxlckFjdGlvbigkZXZlbnQsICdjYW5jZWwnKVwiIC8+XG4gICAgICA8bGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uXG4gICAgICAgIFtsYWJlbF09XCInaTE4bl9hcHBseSdcIlxuICAgICAgICBbY2xhc3NJbmNsdWRlXT1cIidtbC1bMTZweF0nXCJcbiAgICAgICAgKG91dENsaWNrKT1cImhhbmRsZXJBY3Rpb24oJGV2ZW50LCAnYXBwbHknKVwiIC8+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXRzLWNvbG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9pbnB1dHMvY29sb3Ivc3JjL2lucHV0cy1jb2xvci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL2NvbG9yL3NyYy9pbnB1dHMtY29sb3IuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ2hELE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBcUIsTUFBTSxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNwSCxPQUFPLEVBQUUsc0NBQXNDLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUM1RixPQUFPLEVBQXdCLG9DQUFvQyxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDOUcsT0FBTyxFQUFFLG9DQUFvQyxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDeEYsT0FBTyxFQUE0QyxnQ0FBZ0MsRUFBc0IsTUFBTSw2QkFBNkIsQ0FBQztBQUM3SSxPQUFPLEVBQUUsVUFBVSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDNUMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLHFCQUFxQixDQUFDOzs7QUFHdEQ7OztHQUdHO0FBU0gsTUFBTSxPQUFPLG9DQUFvQztJQUMvQyxtQkFBbUI7SUFDVCxZQUFZLEdBQUcsTUFBTSxDQUFnQixFQUFFLENBQUMsQ0FBQztJQUN6QyxTQUFTLEdBQUcsTUFBTSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQ25DLFdBQVcsR0FBRyxNQUFNLENBQWdCLEVBQUUsQ0FBQyxDQUFDO0lBQ3hDLFNBQVMsR0FBRyxNQUFNLENBQWEsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLG1CQUFt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RUFBRSxDQUFDO0lBQ2hFLENBQUM7d0dBcEpVLG9DQUFvQzs0RkFBcEMsb0NBQW9DLDBtQ0N0QmpELDJxS0F1SUEsMkNEbkhZLGVBQWUsdUZBQUUsYUFBYSxrREFBRSxnQ0FBZ0Msb2dCQUFFLHNDQUFzQyxzakJBQUUsb0NBQW9DLGczREFBRSxvQ0FBb0M7OzRGQUVuTCxvQ0FBb0M7a0JBUmhELFNBQVM7K0JBRUUsaUNBQWlDLGNBRS9CLElBQUksbUJBQ0MsdUJBQXVCLENBQUMsTUFBTSxXQUN0QyxDQUFDLGVBQWUsRUFBRSxhQUFhLEVBQUUsZ0NBQWdDLEVBQUUsc0NBQXNDLEVBQUUsb0NBQW9DLEVBQUUsb0NBQW9DLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBMb3dlckNhc2VQaXBlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCBDb21wb25lbnQsIGlucHV0LCBtb2RlbCwgT25EZXN0cm95LCBPbkluaXQsIG91dHB1dCwgc2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtYnV0dG9ucy1idXR0b24nO1xuaW1wb3J0IHsgSVBpY2tlckN1c3RvbU9wdGlvbnMsIExpYnNVaUNvbXBvbmVudHNDb2xvclBpY2tlckNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtY29sb3ItcGlja2VyJztcbmltcG9ydCB7IExpYnNVaUNvbXBvbmVudHNJbnB1dHNWYWxpZENvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtaW5wdXRzLXZhbGlkJztcbmltcG9ydCB7IElGbGFnTW91c2UsIElQb3BvdmVyRnVuY3Rpb25Db250cm9sRXZlbnQsIExpYnNVaUNvbXBvbmVudHNQb3BvdmVyQ29tcG9uZW50LCBUWVBFX1BPUE9WRVJfRVZFTlQgfSBmcm9tICdAbGlicy11aS9jb21wb25lbnRzLXBvcG92ZXInO1xuaW1wb3J0IHsgVXRpbHNDYWNoZSB9IGZyb20gJ0BsaWJzLXVpL3V0aWxzJztcbmltcG9ydCB7IFRyYW5zbGF0ZU1vZHVsZSB9IGZyb20gJ0BuZ3gtdHJhbnNsYXRlL2NvcmUnO1xuaW1wb3J0IHsgSUNvbG9yUGlja2VyRGF0YSB9IGZyb20gJy4vaW50ZXJmYWNlcy9jb2xvci5pbnRlcmZhY2UnO1xuXG4vKipcbiAqIENvbXBvbmVudCBpbnB1dCBjaOG7jW4gbcOgdSBz4bqvYyAoQ29sb3IgUGlja2VyKSBo4buXIHRy4bujIMSR4buZIG3hu50gKG9wYWNpdHkpXG4gKiBDdW5nIGPhuqVwIGLhuqNuZyBtw6B1IG3hurdjIMSR4buLbmggdsOgIGNobyBwaMOpcCBuZ8aw4budaSBkw7luZyBsxrB1IGLhuqNuZyBtw6B1IHTDuXkgY2jhu4luaFxuICovXG5AQ29tcG9uZW50KHtcbiAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIEBhbmd1bGFyLWVzbGludC9jb21wb25lbnQtc2VsZWN0b3JcbiAgc2VsZWN0b3I6ICdsaWJzX3VpLWNvbXBvbmVudHMtaW5wdXRzLWNvbG9yJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2lucHV0cy1jb2xvci5jb21wb25lbnQuaHRtbCcsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICBpbXBvcnRzOiBbVHJhbnNsYXRlTW9kdWxlLCBMb3dlckNhc2VQaXBlLCBMaWJzVWlDb21wb25lbnRzUG9wb3ZlckNvbXBvbmVudCwgTGlic1VpQ29tcG9uZW50c0J1dHRvbnNCdXR0b25Db21wb25lbnQsIExpYnNVaUNvbXBvbmVudHNJbnB1dHNWYWxpZENvbXBvbmVudCwgTGlic1VpQ29tcG9uZW50c0NvbG9yUGlja2VyQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgTGlic1VpQ29tcG9uZW50c0lucHV0c0NvbG9yQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0LCBPbkRlc3Ryb3kge1xuICAvLyAjcmVnaW9uIFBST1BFUlRZXG4gIHByb3RlY3RlZCBjb2xvckRlZmF1bHQgPSBzaWduYWw8QXJyYXk8c3RyaW5nPj4oW10pO1xuICBwcm90ZWN0ZWQgc2hvd1BvcHVwID0gc2lnbmFsPGJvb2xlYW4+KGZhbHNlKTtcbiAgcHJvdGVjdGVkIGNvbG9yQ3VzdG9tID0gc2lnbmFsPEFycmF5PHN0cmluZz4+KFtdKTtcbiAgcHJvdGVjdGVkIGZsYWdNb3VzZSA9IHNpZ25hbDxJRmxhZ01vdXNlPih7IGlzTW91c2VFbnRlcjogZmFsc2UsIGlzTW91c2VFbnRlckNvbnRlbnQ6IGZhbHNlIH0pO1xuXG4gIHByaXZhdGUgcmVhZG9ubHkgY29sb3JBZGQgPSBzaWduYWw8c3RyaW5nIHwgdW5kZWZpbmVkPih1bmRlZmluZWQpO1xuICBwcml2YXRlIHJlYWRvbmx5IHBvcG92ZXJGdW5jdGlvbkNvbnRyb2wgPSBzaWduYWw8SVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudCB8IHVuZGVmaW5lZD4odW5kZWZpbmVkKTtcbiAgcHJpdmF0ZSByZWFkb25seSBwb3BvdmVyQWRkQ29sb3JGdW5jdGlvbkNvbnRyb2wgPSBzaWduYWw8SVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudCB8IHVuZGVmaW5lZD4odW5kZWZpbmVkKTtcblxuICAvLyAjcmVnaW9uIElOUFVUXG4gIC8qKiBE4buvIGxp4buHdSBtw6B1IHPhuq9jIHbDoCDEkeG7mSBt4budIGhp4buHbiB04bqhaSAqL1xuICByZWFkb25seSBkYXRhID0gbW9kZWw8SUNvbG9yUGlja2VyRGF0YT4oeyBjb2xvcjogJycsIG9wYWNpdHk6IDEwMCB9KTtcblxuICAvKiogWi1pbmRleCBjaG8gcG9wb3ZlciBi4bqjbmcgbcOgdSAqL1xuICByZWFkb25seSB6SW5kZXggPSBtb2RlbDxudW1iZXI+KDEyMDApO1xuXG4gIC8qKiBD4bqldSBow6xuaCB0w7l5IGNo4buJbmggY2hvIGNvbG9yIHBpY2tlciAqL1xuICByZWFkb25seSBjdXN0b21PcHRpb25zID0gaW5wdXQ8SVBpY2tlckN1c3RvbU9wdGlvbnM+KCk7XG5cbiAgLyoqIEZ1bmN0aW9uIGzhuqV5IGRhbmggc8OhY2ggbcOgdSBt4bq3YyDEkeG7i25oICovXG4gIHJlYWRvbmx5IGZ1bmN0aW9uR2V0TGlzdENvbG9yRGVmYXVsdCA9IGlucHV0PCgpID0+IFByb21pc2U8QXJyYXk8c3RyaW5nPj4+KCk7XG5cbiAgLyoqIEZ1bmN0aW9uIGzhuqV5IGRhbmggc8OhY2ggbcOgdSB0w7l5IGNo4buJbmggxJHDoyBsxrB1ICovXG4gIHJlYWRvbmx5IGZ1bmN0aW9uR2V0TGlzdENvbG9yQ3VzdG9tID0gaW5wdXQ8KCkgPT4gUHJvbWlzZTxBcnJheTxzdHJpbmc+Pj4oKTtcblxuICAvKiogRnVuY3Rpb24gbMawdSBkYW5oIHPDoWNoIG3DoHUgdMO5eSBjaOG7iW5oIG3hu5tpICovXG4gIHJlYWRvbmx5IGZ1bmN0aW9uU2V0TGlzdENvbG9yQ3VzdG9tID0gaW5wdXQ8KGNvbG9yczogQXJyYXk8c3RyaW5nPikgPT4gUHJvbWlzZTx2b2lkPj4oKTtcblxuICAvLyAjcmVnaW9uIE9VVFBVVFxuICAvKiogRW1pdCBraGkgbcOgdSBz4bqvYyBob+G6t2MgxJHhu5kgbeG7nSB0aGF5IMSR4buVaSAqL1xuICByZWFkb25seSBvdXRDb2xvckNoYW5nZSA9IG91dHB1dDxJQ29sb3JQaWNrZXJEYXRhPigpO1xuXG4gIG5nT25Jbml0KCkge1xuICAgIHRoaXMuZ2V0TGlzdENvbG9yRGVmYXVsdCgpO1xuICB9XG5cbiAgLyogRlVOQ1RJT05TICovXG4gIHByaXZhdGUgYXN5bmMgZ2V0TGlzdENvbG9yRGVmYXVsdCgpIHtcbiAgICBjb25zdCBmdW5jdGlvbkdldExpc3RDb2xvckRlZmF1bHQgPSB0aGlzLmZ1bmN0aW9uR2V0TGlzdENvbG9yRGVmYXVsdCgpO1xuXG4gICAgaWYgKGZ1bmN0aW9uR2V0TGlzdENvbG9yRGVmYXVsdCkge1xuICAgICAgdGhpcy5jb2xvckRlZmF1bHQuc2V0KGF3YWl0IGZ1bmN0aW9uR2V0TGlzdENvbG9yRGVmYXVsdCgpKTtcblxuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLmNvbG9yRGVmYXVsdC5zZXQoKGF3YWl0IFV0aWxzQ2FjaGUuR2V0QXN5bmMoJ2tuZmpzZGZ3ZW5jbHNkbmNranNkZnNkZnNkZnNoaW1kc2pkZmprc3V3ZXNmc2Rmc2RmJykpIHx8IFtdKTtcbiAgfVxuXG4gIHByaXZhdGUgYXN5bmMgZ2V0TGlzdENvbG9yQ3VzdG9tKCkge1xuICAgIGNvbnN0IGZ1bmN0aW9uR2V0TGlzdENvbG9yQ3VzdG9tID0gdGhpcy5mdW5jdGlvbkdldExpc3RDb2xvckN1c3RvbSgpO1xuXG4gICAgaWYgKGZ1bmN0aW9uR2V0TGlzdENvbG9yQ3VzdG9tKSB7XG4gICAgICB0aGlzLmNvbG9yQ3VzdG9tLnNldChhd2FpdCBmdW5jdGlvbkdldExpc3RDb2xvckN1c3RvbSgpKTtcblxuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLmNvbG9yQ3VzdG9tLnNldCgoYXdhaXQgVXRpbHNDYWNoZS5HZXRBc3luYygna25manNkZndlbmNsc2RuY2tqc2Rmc2Rmc2Rmc2hpbWRzamRmamtzdWR2c2phaGR2amFzamRod2VzZnNkZnNkZicpKSB8fCBbXSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaGFuZGxlclBvcG92ZXJFdmVudCh0eXBlOiBUWVBFX1BPUE9WRVJfRVZFTlQpIHtcbiAgICBpZiAodHlwZSA9PT0gJ3Nob3cnKSB7XG4gICAgICB0aGlzLnNob3dQb3B1cC5zZXQodHJ1ZSk7XG4gICAgICB0aGlzLmdldExpc3RDb2xvckN1c3RvbSgpO1xuXG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGlmICh0eXBlID09PSAncmVtb3ZlJykge1xuICAgICAgdGhpcy5zaG93UG9wdXAuc2V0KGZhbHNlKTtcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgaGFuZGxlclNlbGVjdENvbG9yKGV2ZW50OiBFdmVudCwgY29sb3I6IHN0cmluZykge1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICAgIHRoaXMuZGF0YS51cGRhdGUoKHZhbHVlKSA9PiAoeyAuLi52YWx1ZSwgY29sb3IgfSkpO1xuICAgIHRoaXMub3V0Q29sb3JDaGFuZ2UuZW1pdCh0aGlzLmRhdGEoKSk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaGFuZGxlckNoYW5nZU9wYWNpdHkoKSB7XG4gICAgdGhpcy5vdXRDb2xvckNoYW5nZS5lbWl0KHRoaXMuZGF0YSgpKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyQ29sb3JDaGFuZ2UoZXZlbnQ6IHN0cmluZykge1xuICAgIHRoaXMuY29sb3JBZGQuc2V0KGV2ZW50KTtcbiAgfVxuXG4gIHByb3RlY3RlZCBoYW5kbGVyUG9wb3ZlckFkZENvbG9yRXZlbnQodHlwZTogVFlQRV9QT1BPVkVSX0VWRU5UKSB7XG4gICAgaWYgKHR5cGUgPT09ICdzaG93Jykge1xuICAgICAgdGhpcy5mbGFnTW91c2Uuc2V0KHsgaXNNb3VzZUVudGVyOiB0cnVlLCBpc01vdXNlRW50ZXJDb250ZW50OiB0cnVlIH0pO1xuXG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIGlmICh0eXBlID09PSAncmVtb3ZlJykge1xuICAgICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgIHRoaXMuZmxhZ01vdXNlLnNldCh7IGlzTW91c2VFbnRlcjogZmFsc2UsIGlzTW91c2VFbnRlckNvbnRlbnQ6IGZhbHNlIH0pO1xuICAgICAgfSwgNTAwKTtcbiAgICB9XG4gIH1cblxuICBwcm90ZWN0ZWQgaGFuZGxlckZ1bmN0aW9uQ29udHJvbChldmVudDogSVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudCkge1xuICAgIHRoaXMucG9wb3ZlckZ1bmN0aW9uQ29udHJvbC5zZXQoZXZlbnQpO1xuICB9XG5cbiAgcHJvdGVjdGVkIGhhbmRsZXJBZGRDb2xvckZ1bmN0aW9uQ29udHJvbChldmVudDogSVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudCkge1xuICAgIHRoaXMucG9wb3ZlckFkZENvbG9yRnVuY3Rpb25Db250cm9sLnNldChldmVudCk7XG4gIH1cblxuICBwcm90ZWN0ZWQgaGFuZGxlckFjdGlvbihldmVudDogRXZlbnQsIGFjdGlvbjogJ2NhbmNlbCcgfCAnYXBwbHknKSB7XG4gICAgZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG4gICAgdGhpcy5wb3BvdmVyQWRkQ29sb3JGdW5jdGlvbkNvbnRyb2woKT8ucmVtb3ZlUG9wb3Zlck92ZXJsYXkoKTtcbiAgICBpZiAoYWN0aW9uID09PSAnY2FuY2VsJykge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBjb25zdCBjb2xvckFkZCA9IHRoaXMuY29sb3JBZGQoKTtcblxuICAgIGlmICghY29sb3JBZGQpIHtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgdGhpcy5oYW5kbGVyU2VsZWN0Q29sb3IoZXZlbnQsIGNvbG9yQWRkKTtcbiAgICBpZiAodGhpcy5jb2xvckN1c3RvbSgpLmZpbmQoKGNvbG9yKSA9PiBjb2xvciA9PT0gY29sb3JBZGQpKSB7XG4gICAgICByZXR1cm47XG4gICAgfVxuICAgIHRoaXMuY29sb3JDdXN0b20udXBkYXRlKCh2YWx1ZSkgPT4ge1xuICAgICAgdmFsdWUudW5zaGlmdChjb2xvckFkZCk7XG4gICAgICBpZiAodmFsdWUubGVuZ3RoID4gOCkge1xuICAgICAgICB2YWx1ZS5zcGxpY2UoOCwgdmFsdWUubGVuZ3RoIC0gOCk7XG4gICAgICB9XG5cbiAgICAgIHJldHVybiBbLi4udmFsdWVdO1xuICAgIH0pO1xuICAgIHRoaXMuc2V0Q29sb3JDdXN0b20oKTtcbiAgfVxuXG4gIHByaXZhdGUgYXN5bmMgc2V0Q29sb3JDdXN0b20oKSB7XG4gICAgY29uc3QgZnVuY3Rpb25TZXRMaXN0Q29sb3JDdXN0b20gPSB0aGlzLmZ1bmN0aW9uU2V0TGlzdENvbG9yQ3VzdG9tKCk7XG5cbiAgICBpZiAoZnVuY3Rpb25TZXRMaXN0Q29sb3JDdXN0b20pIHtcbiAgICAgIGF3YWl0IGZ1bmN0aW9uU2V0TGlzdENvbG9yQ3VzdG9tKHRoaXMuY29sb3JDdXN0b20oKSk7XG5cbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgVXRpbHNDYWNoZS5TZXRBc3luYygna25manNkZndlbmNsc2RuY2tqc2Rmc2Rmc2Rmc2hpbWRzamRmamtzdWR2c2phaGR2amFzamRod2VzZnNkZnNkZicsIHRoaXMuY29sb3JDdXN0b20oKSwgVXRpbHNDYWNoZS5DQUNIRV9FWFBJUkVfTk9ORSk7XG4gIH1cblxuICBuZ09uRGVzdHJveSgpIHtcbiAgICB0aGlzLnBvcG92ZXJGdW5jdGlvbkNvbnRyb2woKT8ucmVtb3ZlUG9wb3Zlck92ZXJsYXkoKTtcbiAgICB0aGlzLnBvcG92ZXJBZGRDb2xvckZ1bmN0aW9uQ29udHJvbCgpPy5yZW1vdmVQb3BvdmVyT3ZlcmxheSgpO1xuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwidy1mdWxsIGZsZXgganVzdGlmeS1iZXR3ZWVuIHJvdW5kZWQtWzRweF0gaC1bMzJweF1cIlxuICBbY2xhc3MubGlicy11aS1ib3JkZXItZ2VuZXJhbF09XCIhc2hvd1BvcHVwKClcIlxuICBbY2xhc3MubGlicy11aS1ib3JkZXItcHJpbWFyeS1mb2N1cy1nZW5lcmFsXT1cInNob3dQb3B1cCgpXCI+XG4gIDxkaXZcbiAgICBMaWJzVWlDb21wb25lbnRzUG9wb3ZlckRpcmVjdGl2ZVxuICAgIGNsYXNzPVwidy1mdWxsIGZsZXhcIlxuICAgIFttb2RlXT1cIidjbGljay10b2dnbGUnXCJcbiAgICBbaWdub3JlSGlkZGVuUG9wb3ZlckNvbnRlbnRXaGVuTW91c2VMZWF2ZV09XCJ0cnVlXCJcbiAgICBbY29uZmlnXT1cIntcbiAgICAgIHRlbXBsYXRlOiBlbGVtZW50LFxuICAgICAgd2hpdGVUaGVtZTogdHJ1ZSxcbiAgICAgIGlnbm9yZUFycm93OiB0cnVlLFxuICAgICAgd2lkdGhCeVBhcmVudDogZmFsc2UsXG4gICAgICBtYXhXaWR0aDogNTAwLFxuICAgICAgbWF4SGVpZ2h0OiA1MDAsXG4gICAgICB6SW5kZXg6IHpJbmRleCgpLFxuICAgICAgY2xhc3NJbmNsdWRlOiAndy1bMzM0cHhdJyxcbiAgICAgIGRpcmVjdGlvbjogJ2xlZnQnLFxuICAgICAgZGlyZWN0aW9uRGlzdGFuY2U6IDQsXG4gICAgICBwb3NpdGlvbjoge1xuICAgICAgICBtb2RlOiAnc3RhcnQnLFxuICAgICAgICBkaXN0YW5jZTogMCxcbiAgICAgIH0sXG4gICAgfVwiXG4gICAgW2ZsYWdNb3VzZV09XCJmbGFnTW91c2UoKVwiXG4gICAgKG91dEV2ZW50KT1cImhhbmRsZXJQb3BvdmVyRXZlbnQoJGV2ZW50KVwiXG4gICAgKG91dEZ1bmN0aW9uc0NvbnRyb2wpPVwiaGFuZGxlckZ1bmN0aW9uQ29udHJvbCgkZXZlbnQpXCI+XG4gICAgPGRpdiBjbGFzcz1cInB4LVsxNnB4XSBmbGV4IGl0ZW1zLWNlbnRlclwiPlxuICAgICAgPHNwYW5cbiAgICAgICAgY2xhc3M9XCJ3LVsxNnB4XSBoLVsxNnB4XSByb3VuZGVkLVs0cHhdIGxpYnMtdWktYm9yZGVyLWdlbmVyYWxcIlxuICAgICAgICBbc3R5bGUuYmFja2dyb3VuZC1jb2xvcl09XCJkYXRhKCkuY29sb3JcIj48L3NwYW4+XG4gICAgICA8c3BhbiBjbGFzcz1cImxpYnMtdWktZm9udC1oNXIgbWwtWzhweF1cIj57eyBkYXRhKCkuY29sb3IgfX08L3NwYW4+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwidy1bODBweF0gc2hyaW5rLTAgbGlicy11aS1ib3JkZXItbGVmdC1nZW5lcmFsXCI+XG4gICAgPGxpYnNfdWktY29tcG9uZW50cy1pbnB1dHMtdmFsaWRcbiAgICAgIFtub0JvcmRlcl09XCJ0cnVlXCJcbiAgICAgIFtkYXRhVHlwZV09XCInaW50J1wiXG4gICAgICBbbWluVmFsdWVOdW1iZXJdPVwiMFwiXG4gICAgICBbbWF4VmFsdWVOdW1iZXJdPVwiMTAwXCJcbiAgICAgIFsoaXRlbSldPVwiZGF0YVwiXG4gICAgICBbZmllbGROYW1lQmluZF09XCInb3BhY2l0eSdcIlxuICAgICAgW3VuaXRzUmlnaHRdPVwiW3sgaWQ6ICclJywgbGFiZWw6ICclJyB9XVwiXG4gICAgICBba2V5U2VsZWN0ZWRVbml0UmlnaHRdPVwiJyUnXCJcbiAgICAgIFtjbGFzc0luY2x1ZGVJbnB1dF09XCIndGV4dC1jZW50ZXIgIXAtMCAhaC1bMjhweF0gIW1pbi1oLVsyOHB4XSdcIlxuICAgICAgW2NvbmZpZ1VuaXRSaWdodF09XCJ7IGNsYXNzSW5jbHVkZTogJyFoLVszMHB4XScsIGZpZWxkS2V5OiAnaWQnLCBmaWVsZExhYmVsOiAnbGFiZWwnIH1cIlxuICAgICAgKG91dFZhbHVlQ2hhbmdlKT1cImhhbmRsZXJDaGFuZ2VPcGFjaXR5KClcIiAvPlxuICA8L2Rpdj5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI2VsZW1lbnQ+XG4gIDxkaXYgY2xhc3M9XCJwLVsxNnB4XSB3LWZ1bGxcIj5cbiAgICA8ZGl2IGNsYXNzPVwibWItWzE2cHhdIGdyaWQgZ2FwLXktWzRweF0gZ2FwLXgtWzJweF0gZ3JpZC1jb2xzLThcIj5cbiAgICAgIEBmb3IgKGNvbG9yIG9mIGNvbG9yRGVmYXVsdCgpOyB0cmFjayAkaW5kZXg7IGxldCBpID0gJGluZGV4KSB7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJweS1bNXB4XSBweC1bOHB4XSByZWxhdGl2ZVwiPlxuICAgICAgICAgIEBpZiAoKGNvbG9yIHwgbG93ZXJjYXNlKSA9PT0gKGRhdGEoKS5jb2xvciB8IGxvd2VyY2FzZSkpIHtcbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ3LVszMHB4XSBoLVszMHB4XSByb3VuZGVkLVszMHB4XSB0b3AtMCBsZWZ0LVszcHhdIGFic29sdXRlIGxpYnMtdWktYm9yZGVyLXByaW1hcnktZ2VuZXJhbCAhYm9yZGVyLTJcIj48L2Rpdj5cbiAgICAgICAgICB9XG4gICAgICAgICAgPGRpdlxuICAgICAgICAgICAgY2xhc3M9XCJ3LVsyMHB4XSBoLVsyMHB4XSByb3VuZGVkLVsyMHB4XSBjdXJzb3ItcG9pbnRlclwiXG4gICAgICAgICAgICBbY2xhc3MubGlicy11aS1ib3JkZXItZ2VuZXJhbF09XCIoY29sb3IgfCBsb3dlcmNhc2UpID09PSAnI2ZmZmZmZidcIlxuICAgICAgICAgICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiY29sb3JcIlxuICAgICAgICAgICAgKGNsaWNrKT1cImhhbmRsZXJTZWxlY3RDb2xvcigkZXZlbnQsIGNvbG9yKVwiXG4gICAgICAgICAgICAoa2V5ZG93bi5lbnRlcik9XCJoYW5kbGVyU2VsZWN0Q29sb3IoJGV2ZW50LCBjb2xvcilcIj48L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgICB9XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIGp1c3RpZnktYmV0d2VlblwiPlxuICAgICAgPHNwYW4gY2xhc3M9XCJsaWJzLXVpLWZvbnQtaDVtIGNvbG9yLVsjNmE3MzgzXVwiPnt7ICdpMThuX2NvbG9yX2N1c3RvbScgfCB0cmFuc2xhdGUgfX08L3NwYW4+XG4gICAgICA8bGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtYnV0dG9uXG4gICAgICAgIFt0eXBlXT1cIididXR0b24tbGluay1wcmltYXJ5J1wiXG4gICAgICAgIFtjbGFzc0ljb25MZWZ0XT1cIidsaWJzLXVpLWljb24tYWRkJ1wiXG4gICAgICAgIFtsYWJlbF09XCInaTE4bl9hZGRfbmV3J1wiXG4gICAgICAgIFtwb3BvdmVyXT1cIntcbiAgICAgICAgICBtb2RlOiAnY2xpY2stdG9nZ2xlJyxcbiAgICAgICAgICBpZ25vcmVIaWRkZW5Qb3BvdmVyQ29udGVudFdoZW5Nb3VzZUxlYXZlOiB0cnVlLFxuICAgICAgICAgIGNvbmZpZzoge1xuICAgICAgICAgICAgdGVtcGxhdGU6IGNvbG9yUGlja2VyLFxuICAgICAgICAgICAgd2hpdGVUaGVtZTogdHJ1ZSxcbiAgICAgICAgICAgIGlnbm9yZUFycm93OiB0cnVlLFxuICAgICAgICAgICAgd2lkdGhCeVBhcmVudDogZmFsc2UsXG4gICAgICAgICAgICBtYXhXaWR0aDogNTAwLFxuICAgICAgICAgICAgbWF4SGVpZ2h0OiA1MDAsXG4gICAgICAgICAgICB6SW5kZXg6IHpJbmRleCgpICsgMSxcbiAgICAgICAgICAgIGNsYXNzSW5jbHVkZTogJ3ctWzM1MHB4XScsXG4gICAgICAgICAgICBkaXJlY3Rpb246ICdsZWZ0JyxcbiAgICAgICAgICAgIGRpcmVjdGlvbkRpc3RhbmNlOiAtMTAwLFxuICAgICAgICAgICAgcG9zaXRpb246IHtcbiAgICAgICAgICAgICAgbW9kZTogJ3N0YXJ0JyxcbiAgICAgICAgICAgICAgZGlzdGFuY2U6IC0xNjUsXG4gICAgICAgICAgICB9LFxuICAgICAgICAgIH0sXG4gICAgICAgIH1cIlxuICAgICAgICBbY2xhc3NJbmNsdWRlXT1cIidweS1bMnB4XSBweC1bMF0nXCJcbiAgICAgICAgKG91dFBvcG92ZXJFdmVudCk9XCJoYW5kbGVyUG9wb3ZlckFkZENvbG9yRXZlbnQoJGV2ZW50KVwiXG4gICAgICAgIChvdXRGdW5jdGlvbnNDb250cm9sKT1cImhhbmRsZXJBZGRDb2xvckZ1bmN0aW9uQ29udHJvbCgkZXZlbnQpXCIgLz5cbiAgICA8L2Rpdj5cbiAgICBAaWYgKGNvbG9yQ3VzdG9tKCkubGVuZ3RoKSB7XG4gICAgICA8ZGl2IGNsYXNzPVwiZ3JpZCBnYXAteS1bNHB4XSBnYXAteC1bMnB4XSBncmlkLWNvbHMtOFwiPlxuICAgICAgICBAZm9yIChjb2xvciBvZiBjb2xvckN1c3RvbSgpOyB0cmFjayAkaW5kZXg7IGxldCBpID0gJGluZGV4KSB7XG4gICAgICAgICAgPGRpdiBjbGFzcz1cInB5LVs1cHhdIHB4LVs4cHhdIHJlbGF0aXZlXCI+XG4gICAgICAgICAgICBAaWYgKChjb2xvciB8IGxvd2VyY2FzZSkgPT09IChkYXRhKCkuY29sb3IgfCBsb3dlcmNhc2UpKSB7XG4gICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ3LVszMHB4XSBoLVszMHB4XSByb3VuZGVkLVszMHB4XSB0b3AtMCBsZWZ0LVszcHhdIGFic29sdXRlIGxpYnMtdWktYm9yZGVyLXByaW1hcnktZ2VuZXJhbCAhYm9yZGVyLTJcIj48L2Rpdj5cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY2xhc3M9XCJ3LVsyMHB4XSBoLVsyMHB4XSByb3VuZGVkLVsyMHB4XSBjdXJzb3ItcG9pbnRlclwiXG4gICAgICAgICAgICAgIFtjbGFzcy5saWJzLXVpLWJvcmRlci1nZW5lcmFsXT1cIihjb2xvciB8IGxvd2VyY2FzZSkgPT09ICcjZmZmZmZmJ1wiXG4gICAgICAgICAgICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImNvbG9yXCJcbiAgICAgICAgICAgICAgKGNsaWNrKT1cImhhbmRsZXJTZWxlY3RDb2xvcigkZXZlbnQsIGNvbG9yKVwiXG4gICAgICAgICAgICAgIChrZXlkb3duLmVudGVyKT1cImhhbmRsZXJTZWxlY3RDb2xvcigkZXZlbnQsIGNvbG9yKVwiPjwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgICA8L2Rpdj5cbiAgICB9XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNjb2xvclBpY2tlcj5cbiAgPGRpdiBjbGFzcz1cInAtWzE2cHhdIHctYXV0byBoLWF1dG9cIj5cbiAgICA8bGlic191aS1jb21wb25lbnRzLWNvbG9yX3BpY2tlclxuICAgICAgW2N1c3RvbU9wdGlvbnNdPVwiY3VzdG9tT3B0aW9ucygpXCJcbiAgICAgIChvdXRDb2xvckNoYW5nZSk9XCJoYW5kbGVyQ29sb3JDaGFuZ2UoJGV2ZW50KVwiIC8+XG4gICAgPGRpdiBjbGFzcz1cImZsZXggaXRlbXMtY2VudGVyIGp1c3RpZnktZW5kIHB0LVsxNnB4XVwiPlxuICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1idXR0b25zLWJ1dHRvblxuICAgICAgICBbbGFiZWxdPVwiJ2kxOG5fY2FuY2VsJ1wiXG4gICAgICAgIFt0eXBlXT1cIididXR0b24tdGhpcmQnXCJcbiAgICAgICAgKG91dENsaWNrKT1cImhhbmRsZXJBY3Rpb24oJGV2ZW50LCAnY2FuY2VsJylcIiAvPlxuICAgICAgPGxpYnNfdWktY29tcG9uZW50cy1idXR0b25zLWJ1dHRvblxuICAgICAgICBbbGFiZWxdPVwiJ2kxOG5fYXBwbHknXCJcbiAgICAgICAgW2NsYXNzSW5jbHVkZV09XCInbWwtWzE2cHhdJ1wiXG4gICAgICAgIChvdXRDbGljayk9XCJoYW5kbGVyQWN0aW9uKCRldmVudCwgJ2FwcGx5JylcIiAvPlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=

package/fesm2022/libs-ui-components-inputs-color.mjs

@@ -1,6 +1,6 @@
 import { LowerCasePipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, model, input, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { signal, model, input, output, Component, ChangeDetectionStrategy } from '@angular/core';
 import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
 import { LibsUiComponentsColorPickerComponent } from '@libs-ui/components-color-picker';
 import { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';
@@ -132,11 +132,11 @@ class LibsUiComponentsInputsColorComponent {
         this.popoverAddColorFunctionControl()?.removePopoverOverlay();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsColorComponent, isStandalone: true, selector: "libs_ui-components-inputs-color", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, functionGetListColorDefault: { classPropertyName: "functionGetListColorDefault", publicName: "functionGetListColorDefault", isSignal: true, isRequired: false, transformFunction: null }, functionGetListColorCustom: { classPropertyName: "functionGetListColorCustom", publicName: "functionGetListColorCustom", isSignal: true, isRequired: false, transformFunction: null }, functionSetListColorCustom: { classPropertyName: "functionSetListColorCustom", publicName: "functionSetListColorCustom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", zIndex: "zIndexChange", outColorChange: "outColorChange" }, ngImport: i0, template: "<div\n  class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div\n    LibsUiComponentsPopoverDirective\n    class=\"w-full flex\"\n    [mode]=\"'click-toggle'\"\n    [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n    [config]=\"{\n      template: element,\n      whiteTheme: true,\n      ignoreArrow: true,\n      widthByParent: false,\n      maxWidth: 500,\n      maxHeight: 500,\n      zIndex: zIndex(),\n      classInclude: 'w-[334px]',\n      direction: 'left',\n      directionDistance: 4,\n      position: {\n        mode: 'start',\n        distance: 0,\n      },\n    }\"\n    [flagMouse]=\"flagMouse()\"\n    (outEvent)=\"handlerPopoverEvent($event)\"\n    (outFunctionsControl)=\"handlerFunctionControl($event)\">\n    <div class=\"px-[16px] flex items-center\">\n      <span\n        class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n        [style.background-color]=\"data().color\"></span>\n      <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n    </div>\n  </div>\n  <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n    <libs_ui-components-inputs-valid\n      [noBorder]=\"true\"\n      [dataType]=\"'int'\"\n      [minValueNumber]=\"0\"\n      [maxValueNumber]=\"100\"\n      [(item)]=\"data\"\n      [fieldNameBind]=\"'opacity'\"\n      [unitsRight]=\"[{ id: '%', label: '%' }]\"\n      [keySelectedUnitRight]=\"'%'\"\n      [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n      [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n      (outValueChange)=\"handlerChangeOpacity()\" />\n  </div>\n</div>\n\n<ng-template #element>\n  <div class=\"p-[16px] w-full\">\n    <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n      @for (color of colorDefault(); track $index; let i = $index) {\n        <div class=\"py-[5px] px-[8px] relative\">\n          @if ((color | lowercase) === (data().color | lowercase)) {\n            <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n          }\n          <div\n            class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n            [style.background-color]=\"color\"\n            (click)=\"handlerSelectColor($event, color)\"></div>\n        </div>\n      }\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classIconLeft]=\"'libs-ui-icon-add'\"\n        [label]=\"'i18n_add_new'\"\n        [popover]=\"{\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() + 1,\n            classInclude: 'w-[350px]',\n            direction: 'left',\n            directionDistance: -100,\n            position: {\n              mode: 'start',\n              distance: -165,\n            },\n          },\n        }\"\n        [classInclude]=\"'py-[2px] px-[0]'\"\n        (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n        (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n    </div>\n    @if (colorCustom().length) {\n      <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n        @for (color of colorCustom(); track $index; let i = $index) {\n          <div class=\"py-[5px] px-[8px] relative\">\n            @if ((color | lowercase) === (data().color | lowercase)) {\n              <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n            }\n            <div\n              class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n              [style.background-color]=\"color\"\n              (click)=\"handlerSelectColor($event, color)\"></div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\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    <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  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { 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: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsColorPickerComponent, selector: "libs_ui-components-color_picker", inputs: ["customOptions", "noEmitEventColorWhenInitComponent"], outputs: ["outColorChange", "outColorChangeMultipleType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsColorComponent, isStandalone: true, selector: "libs_ui-components-inputs-color", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, functionGetListColorDefault: { classPropertyName: "functionGetListColorDefault", publicName: "functionGetListColorDefault", isSignal: true, isRequired: false, transformFunction: null }, functionGetListColorCustom: { classPropertyName: "functionGetListColorCustom", publicName: "functionGetListColorCustom", isSignal: true, isRequired: false, transformFunction: null }, functionSetListColorCustom: { classPropertyName: "functionSetListColorCustom", publicName: "functionSetListColorCustom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", zIndex: "zIndexChange", outColorChange: "outColorChange" }, ngImport: i0, template: "<div\n  class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div\n    LibsUiComponentsPopoverDirective\n    class=\"w-full flex\"\n    [mode]=\"'click-toggle'\"\n    [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n    [config]=\"{\n      template: element,\n      whiteTheme: true,\n      ignoreArrow: true,\n      widthByParent: false,\n      maxWidth: 500,\n      maxHeight: 500,\n      zIndex: zIndex(),\n      classInclude: 'w-[334px]',\n      direction: 'left',\n      directionDistance: 4,\n      position: {\n        mode: 'start',\n        distance: 0,\n      },\n    }\"\n    [flagMouse]=\"flagMouse()\"\n    (outEvent)=\"handlerPopoverEvent($event)\"\n    (outFunctionsControl)=\"handlerFunctionControl($event)\">\n    <div class=\"px-[16px] flex items-center\">\n      <span\n        class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n        [style.background-color]=\"data().color\"></span>\n      <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n    </div>\n  </div>\n  <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n    <libs_ui-components-inputs-valid\n      [noBorder]=\"true\"\n      [dataType]=\"'int'\"\n      [minValueNumber]=\"0\"\n      [maxValueNumber]=\"100\"\n      [(item)]=\"data\"\n      [fieldNameBind]=\"'opacity'\"\n      [unitsRight]=\"[{ id: '%', label: '%' }]\"\n      [keySelectedUnitRight]=\"'%'\"\n      [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n      [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n      (outValueChange)=\"handlerChangeOpacity()\" />\n  </div>\n</div>\n\n<ng-template #element>\n  <div class=\"p-[16px] w-full\">\n    <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n      @for (color of colorDefault(); track $index; let i = $index) {\n        <div class=\"py-[5px] px-[8px] relative\">\n          @if ((color | lowercase) === (data().color | lowercase)) {\n            <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n          }\n          <div\n            class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n            [style.background-color]=\"color\"\n            (click)=\"handlerSelectColor($event, color)\"\n            (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n        </div>\n      }\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classIconLeft]=\"'libs-ui-icon-add'\"\n        [label]=\"'i18n_add_new'\"\n        [popover]=\"{\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() + 1,\n            classInclude: 'w-[350px]',\n            direction: 'left',\n            directionDistance: -100,\n            position: {\n              mode: 'start',\n              distance: -165,\n            },\n          },\n        }\"\n        [classInclude]=\"'py-[2px] px-[0]'\"\n        (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n        (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n    </div>\n    @if (colorCustom().length) {\n      <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n        @for (color of colorCustom(); track $index; let i = $index) {\n          <div class=\"py-[5px] px-[8px] relative\">\n            @if ((color | lowercase) === (data().color | lowercase)) {\n              <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n            }\n            <div\n              class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n              [style.background-color]=\"color\"\n              (click)=\"handlerSelectColor($event, color)\"\n              (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\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    <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  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { 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: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "ignoreShowMessageError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsColorPickerComponent, selector: "libs_ui-components-color_picker", inputs: ["customOptions", "noEmitEventColorWhenInitComponent"], outputs: ["outColorChange", "outColorChangeMultipleType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsColorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-components-inputs-color', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LowerCasePipe, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsInputsValidComponent, LibsUiComponentsColorPickerComponent], template: "<div\n  class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div\n    LibsUiComponentsPopoverDirective\n    class=\"w-full flex\"\n    [mode]=\"'click-toggle'\"\n    [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n    [config]=\"{\n      template: element,\n      whiteTheme: true,\n      ignoreArrow: true,\n      widthByParent: false,\n      maxWidth: 500,\n      maxHeight: 500,\n      zIndex: zIndex(),\n      classInclude: 'w-[334px]',\n      direction: 'left',\n      directionDistance: 4,\n      position: {\n        mode: 'start',\n        distance: 0,\n      },\n    }\"\n    [flagMouse]=\"flagMouse()\"\n    (outEvent)=\"handlerPopoverEvent($event)\"\n    (outFunctionsControl)=\"handlerFunctionControl($event)\">\n    <div class=\"px-[16px] flex items-center\">\n      <span\n        class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n        [style.background-color]=\"data().color\"></span>\n      <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n    </div>\n  </div>\n  <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n    <libs_ui-components-inputs-valid\n      [noBorder]=\"true\"\n      [dataType]=\"'int'\"\n      [minValueNumber]=\"0\"\n      [maxValueNumber]=\"100\"\n      [(item)]=\"data\"\n      [fieldNameBind]=\"'opacity'\"\n      [unitsRight]=\"[{ id: '%', label: '%' }]\"\n      [keySelectedUnitRight]=\"'%'\"\n      [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n      [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n      (outValueChange)=\"handlerChangeOpacity()\" />\n  </div>\n</div>\n\n<ng-template #element>\n  <div class=\"p-[16px] w-full\">\n    <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n      @for (color of colorDefault(); track $index; let i = $index) {\n        <div class=\"py-[5px] px-[8px] relative\">\n          @if ((color | lowercase) === (data().color | lowercase)) {\n            <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n          }\n          <div\n            class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n            [style.background-color]=\"color\"\n            (click)=\"handlerSelectColor($event, color)\"></div>\n        </div>\n      }\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classIconLeft]=\"'libs-ui-icon-add'\"\n        [label]=\"'i18n_add_new'\"\n        [popover]=\"{\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() + 1,\n            classInclude: 'w-[350px]',\n            direction: 'left',\n            directionDistance: -100,\n            position: {\n              mode: 'start',\n              distance: -165,\n            },\n          },\n        }\"\n        [classInclude]=\"'py-[2px] px-[0]'\"\n        (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n        (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n    </div>\n    @if (colorCustom().length) {\n      <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n        @for (color of colorCustom(); track $index; let i = $index) {\n          <div class=\"py-[5px] px-[8px] relative\">\n            @if ((color | lowercase) === (data().color | lowercase)) {\n              <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n            }\n            <div\n              class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n              [style.background-color]=\"color\"\n              (click)=\"handlerSelectColor($event, color)\"></div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\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    <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  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'libs_ui-components-inputs-color', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LowerCasePipe, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsInputsValidComponent, LibsUiComponentsColorPickerComponent], template: "<div\n  class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div\n    LibsUiComponentsPopoverDirective\n    class=\"w-full flex\"\n    [mode]=\"'click-toggle'\"\n    [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n    [config]=\"{\n      template: element,\n      whiteTheme: true,\n      ignoreArrow: true,\n      widthByParent: false,\n      maxWidth: 500,\n      maxHeight: 500,\n      zIndex: zIndex(),\n      classInclude: 'w-[334px]',\n      direction: 'left',\n      directionDistance: 4,\n      position: {\n        mode: 'start',\n        distance: 0,\n      },\n    }\"\n    [flagMouse]=\"flagMouse()\"\n    (outEvent)=\"handlerPopoverEvent($event)\"\n    (outFunctionsControl)=\"handlerFunctionControl($event)\">\n    <div class=\"px-[16px] flex items-center\">\n      <span\n        class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n        [style.background-color]=\"data().color\"></span>\n      <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n    </div>\n  </div>\n  <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n    <libs_ui-components-inputs-valid\n      [noBorder]=\"true\"\n      [dataType]=\"'int'\"\n      [minValueNumber]=\"0\"\n      [maxValueNumber]=\"100\"\n      [(item)]=\"data\"\n      [fieldNameBind]=\"'opacity'\"\n      [unitsRight]=\"[{ id: '%', label: '%' }]\"\n      [keySelectedUnitRight]=\"'%'\"\n      [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n      [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n      (outValueChange)=\"handlerChangeOpacity()\" />\n  </div>\n</div>\n\n<ng-template #element>\n  <div class=\"p-[16px] w-full\">\n    <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n      @for (color of colorDefault(); track $index; let i = $index) {\n        <div class=\"py-[5px] px-[8px] relative\">\n          @if ((color | lowercase) === (data().color | lowercase)) {\n            <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n          }\n          <div\n            class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n            [style.background-color]=\"color\"\n            (click)=\"handlerSelectColor($event, color)\"\n            (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n        </div>\n      }\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classIconLeft]=\"'libs-ui-icon-add'\"\n        [label]=\"'i18n_add_new'\"\n        [popover]=\"{\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() + 1,\n            classInclude: 'w-[350px]',\n            direction: 'left',\n            directionDistance: -100,\n            position: {\n              mode: 'start',\n              distance: -165,\n            },\n          },\n        }\"\n        [classInclude]=\"'py-[2px] px-[0]'\"\n        (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n        (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n    </div>\n    @if (colorCustom().length) {\n      <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n        @for (color of colorCustom(); track $index; let i = $index) {\n          <div class=\"py-[5px] px-[8px] relative\">\n            @if ((color | lowercase) === (data().color | lowercase)) {\n              <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n            }\n            <div\n              class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n              [style.background-color]=\"color\"\n              (click)=\"handlerSelectColor($event, color)\"\n              (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\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    <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  </div>\n</ng-template>\n" }]
         }] });
 
 /**

package/fesm2022/libs-ui-components-inputs-color.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"libs-ui-components-inputs-color.mjs","sources":["../../../../../../libs-ui/components/inputs/color/src/inputs-color.component.ts","../../../../../../libs-ui/components/inputs/color/src/inputs-color.component.html","../../../../../../libs-ui/components/inputs/color/src/libs-ui-components-inputs-color.ts"],"sourcesContent":["import { LowerCasePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, input, model, OnDestroy, OnInit, output, signal } from '@angular/core';\nimport { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IPickerCustomOptions, LibsUiComponentsColorPickerComponent } from '@libs-ui/components-color-picker';\nimport { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';\nimport { IFlagMouse, IPopoverFunctionControlEvent, LibsUiComponentsPopoverComponent, TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';\nimport { UtilsCache } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IColorPickerData } from './interfaces/color.interface';\n\n/**\n * Component input chọn màu sắc (Color Picker) hỗ trợ độ mờ (opacity)\n * Cung cấp bảng màu mặc định và cho phép người dùng lưu bảng màu tùy chỉnh\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-inputs-color',\n  templateUrl: './inputs-color.component.html',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [TranslateModule, LowerCasePipe, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsInputsValidComponent, LibsUiComponentsColorPickerComponent],\n})\nexport class LibsUiComponentsInputsColorComponent implements OnInit, OnDestroy {\n  // #region PROPERTY\n  protected colorDefault = signal<Array<string>>([]);\n  protected showPopup = signal<boolean>(false);\n  protected colorCustom = signal<Array<string>>([]);\n  protected flagMouse = signal<IFlagMouse>({ isMouseEnter: false, isMouseEnterContent: false });\n\n  private colorAdd = signal<string | undefined>(undefined);\n  private popoverFunctionControl = signal<IPopoverFunctionControlEvent | undefined>(undefined);\n  private popoverAddColorFunctionControl = signal<IPopoverFunctionControlEvent | undefined>(undefined);\n\n  // #region INPUT\n  /** Dữ liệu màu sắc và độ mờ hiện tại */\n  readonly data = model<IColorPickerData>({ color: '', opacity: 100 });\n\n  /** Z-index cho popover bảng màu */\n  readonly zIndex = model<number>(1200);\n\n  /** Cấu hình tùy chỉnh cho color picker */\n  readonly customOptions = input<IPickerCustomOptions>();\n\n  /** Function lấy danh sách màu mặc định */\n  readonly functionGetListColorDefault = input<() => Promise<Array<string>>>();\n\n  /** Function lấy danh sách màu tùy chỉnh đã lưu */\n  readonly functionGetListColorCustom = input<() => Promise<Array<string>>>();\n\n  /** Function lưu danh sách màu tùy chỉnh mới */\n  readonly functionSetListColorCustom = input<(colors: Array<string>) => Promise<void>>();\n\n  // #region OUTPUT\n  /** Emit khi màu sắc hoặc độ mờ thay đổi */\n  readonly outColorChange = output<IColorPickerData>();\n\n  ngOnInit() {\n    this.getListColorDefault();\n  }\n\n  /* FUNCTIONS */\n  private async getListColorDefault() {\n    const functionGetListColorDefault = this.functionGetListColorDefault();\n\n    if (functionGetListColorDefault) {\n      this.colorDefault.set(await functionGetListColorDefault());\n\n      return;\n    }\n    this.colorDefault.set((await UtilsCache.GetAsync('knfjsdfwenclsdnckjsdfsdfsdfshimdsjdfjksuwesfsdfsdf')) || []);\n  }\n\n  private async getListColorCustom() {\n    const functionGetListColorCustom = this.functionGetListColorCustom();\n\n    if (functionGetListColorCustom) {\n      this.colorCustom.set(await functionGetListColorCustom());\n\n      return;\n    }\n    this.colorCustom.set((await UtilsCache.GetAsync('knfjsdfwenclsdnckjsdfsdfsdfshimdsjdfjksudvsjahdvjasjdhwesfsdfsdf')) || []);\n  }\n\n  protected handlerPopoverEvent(type: TYPE_POPOVER_EVENT) {\n    if (type === 'show') {\n      this.showPopup.set(true);\n      this.getListColorCustom();\n\n      return;\n    }\n    if (type === 'remove') {\n      this.showPopup.set(false);\n    }\n  }\n\n  protected handlerSelectColor(event: Event, color: string) {\n    event.stopPropagation();\n    this.data.update((value) => ({ ...value, color }));\n    this.outColorChange.emit(this.data() as IColorPickerData);\n  }\n\n  protected handlerChangeOpacity() {\n    this.outColorChange.emit(this.data() as IColorPickerData);\n  }\n\n  protected handlerColorChange(event: string) {\n    this.colorAdd.set(event);\n  }\n\n  protected handlerPopoverAddColorEvent(type: TYPE_POPOVER_EVENT) {\n    if (type === 'show') {\n      this.flagMouse.set({ isMouseEnter: true, isMouseEnterContent: true });\n\n      return;\n    }\n    if (type === 'remove') {\n      setTimeout(() => {\n        this.flagMouse.set({ isMouseEnter: false, isMouseEnterContent: false });\n      }, 500);\n    }\n  }\n\n  protected handlerFunctionControl(event: IPopoverFunctionControlEvent) {\n    this.popoverFunctionControl.set(event);\n  }\n\n  protected handlerAddColorFunctionControl(event: IPopoverFunctionControlEvent) {\n    this.popoverAddColorFunctionControl.set(event);\n  }\n\n  protected handlerAction(event: Event, action: 'cancel' | 'apply') {\n    event.stopPropagation();\n    this.popoverAddColorFunctionControl()?.removePopoverOverlay();\n    if (action === 'cancel') {\n      return;\n    }\n    const colorAdd = this.colorAdd();\n\n    if (!colorAdd) {\n      return;\n    }\n    this.handlerSelectColor(event, colorAdd);\n    if (this.colorCustom().find((color) => color === colorAdd)) {\n      return;\n    }\n    this.colorCustom.update((value) => {\n      value.unshift(colorAdd);\n      if (value.length > 8) {\n        value.splice(8, value.length - 8);\n      }\n\n      return [...value];\n    });\n    this.setColorCustom();\n  }\n\n  private async setColorCustom() {\n    const functionSetListColorCustom = this.functionSetListColorCustom();\n\n    if (functionSetListColorCustom) {\n      await functionSetListColorCustom(this.colorCustom());\n\n      return;\n    }\n    UtilsCache.SetAsync('knfjsdfwenclsdnckjsdfsdfsdfshimdsjdfjksudvsjahdvjasjdhwesfsdfsdf', this.colorCustom(), UtilsCache.CACHE_EXPIRE_NONE);\n  }\n\n  ngOnDestroy() {\n    this.popoverFunctionControl()?.removePopoverOverlay();\n    this.popoverAddColorFunctionControl()?.removePopoverOverlay();\n  }\n}\n","<div\n  class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div\n    LibsUiComponentsPopoverDirective\n    class=\"w-full flex\"\n    [mode]=\"'click-toggle'\"\n    [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n    [config]=\"{\n      template: element,\n      whiteTheme: true,\n      ignoreArrow: true,\n      widthByParent: false,\n      maxWidth: 500,\n      maxHeight: 500,\n      zIndex: zIndex(),\n      classInclude: 'w-[334px]',\n      direction: 'left',\n      directionDistance: 4,\n      position: {\n        mode: 'start',\n        distance: 0,\n      },\n    }\"\n    [flagMouse]=\"flagMouse()\"\n    (outEvent)=\"handlerPopoverEvent($event)\"\n    (outFunctionsControl)=\"handlerFunctionControl($event)\">\n    <div class=\"px-[16px] flex items-center\">\n      <span\n        class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n        [style.background-color]=\"data().color\"></span>\n      <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n    </div>\n  </div>\n  <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n    <libs_ui-components-inputs-valid\n      [noBorder]=\"true\"\n      [dataType]=\"'int'\"\n      [minValueNumber]=\"0\"\n      [maxValueNumber]=\"100\"\n      [(item)]=\"data\"\n      [fieldNameBind]=\"'opacity'\"\n      [unitsRight]=\"[{ id: '%', label: '%' }]\"\n      [keySelectedUnitRight]=\"'%'\"\n      [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n      [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n      (outValueChange)=\"handlerChangeOpacity()\" />\n  </div>\n</div>\n\n<ng-template #element>\n  <div class=\"p-[16px] w-full\">\n    <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n      @for (color of colorDefault(); track $index; let i = $index) {\n        <div class=\"py-[5px] px-[8px] relative\">\n          @if ((color | lowercase) === (data().color | lowercase)) {\n            <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n          }\n          <div\n            class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n            [style.background-color]=\"color\"\n            (click)=\"handlerSelectColor($event, color)\"></div>\n        </div>\n      }\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classIconLeft]=\"'libs-ui-icon-add'\"\n        [label]=\"'i18n_add_new'\"\n        [popover]=\"{\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() + 1,\n            classInclude: 'w-[350px]',\n            direction: 'left',\n            directionDistance: -100,\n            position: {\n              mode: 'start',\n              distance: -165,\n            },\n          },\n        }\"\n        [classInclude]=\"'py-[2px] px-[0]'\"\n        (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n        (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n    </div>\n    @if (colorCustom().length) {\n      <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n        @for (color of colorCustom(); track $index; let i = $index) {\n          <div class=\"py-[5px] px-[8px] relative\">\n            @if ((color | lowercase) === (data().color | lowercase)) {\n              <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n            }\n            <div\n              class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n              [style.background-color]=\"color\"\n              (click)=\"handlerSelectColor($event, color)\"></div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\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    <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  </div>\n</ng-template>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"libs-ui-components-inputs-color.mjs","sources":["../../../../../../libs-ui/components/inputs/color/src/inputs-color.component.ts","../../../../../../libs-ui/components/inputs/color/src/inputs-color.component.html","../../../../../../libs-ui/components/inputs/color/src/libs-ui-components-inputs-color.ts"],"sourcesContent":["import { LowerCasePipe } from '@angular/common';\nimport { ChangeDetectionStrategy, Component, input, model, OnDestroy, OnInit, output, signal } from '@angular/core';\nimport { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IPickerCustomOptions, LibsUiComponentsColorPickerComponent } from '@libs-ui/components-color-picker';\nimport { LibsUiComponentsInputsValidComponent } from '@libs-ui/components-inputs-valid';\nimport { IFlagMouse, IPopoverFunctionControlEvent, LibsUiComponentsPopoverComponent, TYPE_POPOVER_EVENT } from '@libs-ui/components-popover';\nimport { UtilsCache } from '@libs-ui/utils';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { IColorPickerData } from './interfaces/color.interface';\n\n/**\n * Component input chọn màu sắc (Color Picker) hỗ trợ độ mờ (opacity)\n * Cung cấp bảng màu mặc định và cho phép người dùng lưu bảng màu tùy chỉnh\n */\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-inputs-color',\n  templateUrl: './inputs-color.component.html',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [TranslateModule, LowerCasePipe, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsInputsValidComponent, LibsUiComponentsColorPickerComponent],\n})\nexport class LibsUiComponentsInputsColorComponent implements OnInit, OnDestroy {\n  // #region PROPERTY\n  protected colorDefault = signal<Array<string>>([]);\n  protected showPopup = signal<boolean>(false);\n  protected colorCustom = signal<Array<string>>([]);\n  protected flagMouse = signal<IFlagMouse>({ isMouseEnter: false, isMouseEnterContent: false });\n\n  private readonly colorAdd = signal<string | undefined>(undefined);\n  private readonly popoverFunctionControl = signal<IPopoverFunctionControlEvent | undefined>(undefined);\n  private readonly popoverAddColorFunctionControl = signal<IPopoverFunctionControlEvent | undefined>(undefined);\n\n  // #region INPUT\n  /** Dữ liệu màu sắc và độ mờ hiện tại */\n  readonly data = model<IColorPickerData>({ color: '', opacity: 100 });\n\n  /** Z-index cho popover bảng màu */\n  readonly zIndex = model<number>(1200);\n\n  /** Cấu hình tùy chỉnh cho color picker */\n  readonly customOptions = input<IPickerCustomOptions>();\n\n  /** Function lấy danh sách màu mặc định */\n  readonly functionGetListColorDefault = input<() => Promise<Array<string>>>();\n\n  /** Function lấy danh sách màu tùy chỉnh đã lưu */\n  readonly functionGetListColorCustom = input<() => Promise<Array<string>>>();\n\n  /** Function lưu danh sách màu tùy chỉnh mới */\n  readonly functionSetListColorCustom = input<(colors: Array<string>) => Promise<void>>();\n\n  // #region OUTPUT\n  /** Emit khi màu sắc hoặc độ mờ thay đổi */\n  readonly outColorChange = output<IColorPickerData>();\n\n  ngOnInit() {\n    this.getListColorDefault();\n  }\n\n  /* FUNCTIONS */\n  private async getListColorDefault() {\n    const functionGetListColorDefault = this.functionGetListColorDefault();\n\n    if (functionGetListColorDefault) {\n      this.colorDefault.set(await functionGetListColorDefault());\n\n      return;\n    }\n    this.colorDefault.set((await UtilsCache.GetAsync('knfjsdfwenclsdnckjsdfsdfsdfshimdsjdfjksuwesfsdfsdf')) || []);\n  }\n\n  private async getListColorCustom() {\n    const functionGetListColorCustom = this.functionGetListColorCustom();\n\n    if (functionGetListColorCustom) {\n      this.colorCustom.set(await functionGetListColorCustom());\n\n      return;\n    }\n    this.colorCustom.set((await UtilsCache.GetAsync('knfjsdfwenclsdnckjsdfsdfsdfshimdsjdfjksudvsjahdvjasjdhwesfsdfsdf')) || []);\n  }\n\n  protected handlerPopoverEvent(type: TYPE_POPOVER_EVENT) {\n    if (type === 'show') {\n      this.showPopup.set(true);\n      this.getListColorCustom();\n\n      return;\n    }\n    if (type === 'remove') {\n      this.showPopup.set(false);\n    }\n  }\n\n  protected handlerSelectColor(event: Event, color: string) {\n    event.stopPropagation();\n    this.data.update((value) => ({ ...value, color }));\n    this.outColorChange.emit(this.data());\n  }\n\n  protected handlerChangeOpacity() {\n    this.outColorChange.emit(this.data());\n  }\n\n  protected handlerColorChange(event: string) {\n    this.colorAdd.set(event);\n  }\n\n  protected handlerPopoverAddColorEvent(type: TYPE_POPOVER_EVENT) {\n    if (type === 'show') {\n      this.flagMouse.set({ isMouseEnter: true, isMouseEnterContent: true });\n\n      return;\n    }\n    if (type === 'remove') {\n      setTimeout(() => {\n        this.flagMouse.set({ isMouseEnter: false, isMouseEnterContent: false });\n      }, 500);\n    }\n  }\n\n  protected handlerFunctionControl(event: IPopoverFunctionControlEvent) {\n    this.popoverFunctionControl.set(event);\n  }\n\n  protected handlerAddColorFunctionControl(event: IPopoverFunctionControlEvent) {\n    this.popoverAddColorFunctionControl.set(event);\n  }\n\n  protected handlerAction(event: Event, action: 'cancel' | 'apply') {\n    event.stopPropagation();\n    this.popoverAddColorFunctionControl()?.removePopoverOverlay();\n    if (action === 'cancel') {\n      return;\n    }\n    const colorAdd = this.colorAdd();\n\n    if (!colorAdd) {\n      return;\n    }\n    this.handlerSelectColor(event, colorAdd);\n    if (this.colorCustom().find((color) => color === colorAdd)) {\n      return;\n    }\n    this.colorCustom.update((value) => {\n      value.unshift(colorAdd);\n      if (value.length > 8) {\n        value.splice(8, value.length - 8);\n      }\n\n      return [...value];\n    });\n    this.setColorCustom();\n  }\n\n  private async setColorCustom() {\n    const functionSetListColorCustom = this.functionSetListColorCustom();\n\n    if (functionSetListColorCustom) {\n      await functionSetListColorCustom(this.colorCustom());\n\n      return;\n    }\n    UtilsCache.SetAsync('knfjsdfwenclsdnckjsdfsdfsdfshimdsjdfjksudvsjahdvjasjdhwesfsdfsdf', this.colorCustom(), UtilsCache.CACHE_EXPIRE_NONE);\n  }\n\n  ngOnDestroy() {\n    this.popoverFunctionControl()?.removePopoverOverlay();\n    this.popoverAddColorFunctionControl()?.removePopoverOverlay();\n  }\n}\n","<div\n  class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div\n    LibsUiComponentsPopoverDirective\n    class=\"w-full flex\"\n    [mode]=\"'click-toggle'\"\n    [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n    [config]=\"{\n      template: element,\n      whiteTheme: true,\n      ignoreArrow: true,\n      widthByParent: false,\n      maxWidth: 500,\n      maxHeight: 500,\n      zIndex: zIndex(),\n      classInclude: 'w-[334px]',\n      direction: 'left',\n      directionDistance: 4,\n      position: {\n        mode: 'start',\n        distance: 0,\n      },\n    }\"\n    [flagMouse]=\"flagMouse()\"\n    (outEvent)=\"handlerPopoverEvent($event)\"\n    (outFunctionsControl)=\"handlerFunctionControl($event)\">\n    <div class=\"px-[16px] flex items-center\">\n      <span\n        class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n        [style.background-color]=\"data().color\"></span>\n      <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n    </div>\n  </div>\n  <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n    <libs_ui-components-inputs-valid\n      [noBorder]=\"true\"\n      [dataType]=\"'int'\"\n      [minValueNumber]=\"0\"\n      [maxValueNumber]=\"100\"\n      [(item)]=\"data\"\n      [fieldNameBind]=\"'opacity'\"\n      [unitsRight]=\"[{ id: '%', label: '%' }]\"\n      [keySelectedUnitRight]=\"'%'\"\n      [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n      [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n      (outValueChange)=\"handlerChangeOpacity()\" />\n  </div>\n</div>\n\n<ng-template #element>\n  <div class=\"p-[16px] w-full\">\n    <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n      @for (color of colorDefault(); track $index; let i = $index) {\n        <div class=\"py-[5px] px-[8px] relative\">\n          @if ((color | lowercase) === (data().color | lowercase)) {\n            <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n          }\n          <div\n            class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n            [style.background-color]=\"color\"\n            (click)=\"handlerSelectColor($event, color)\"\n            (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n        </div>\n      }\n    </div>\n    <div class=\"flex items-center justify-between\">\n      <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n      <libs_ui-components-buttons-button\n        [type]=\"'button-link-primary'\"\n        [classIconLeft]=\"'libs-ui-icon-add'\"\n        [label]=\"'i18n_add_new'\"\n        [popover]=\"{\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() + 1,\n            classInclude: 'w-[350px]',\n            direction: 'left',\n            directionDistance: -100,\n            position: {\n              mode: 'start',\n              distance: -165,\n            },\n          },\n        }\"\n        [classInclude]=\"'py-[2px] px-[0]'\"\n        (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n        (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n    </div>\n    @if (colorCustom().length) {\n      <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n        @for (color of colorCustom(); track $index; let i = $index) {\n          <div class=\"py-[5px] px-[8px] relative\">\n            @if ((color | lowercase) === (data().color | lowercase)) {\n              <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n            }\n            <div\n              class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n              [style.background-color]=\"color\"\n              (click)=\"handlerSelectColor($event, color)\"\n              (keydown.enter)=\"handlerSelectColor($event, color)\"></div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\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    <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  </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/inputs-color.component.d.ts

@@ -12,9 +12,9 @@ export declare class LibsUiComponentsInputsColorComponent implements OnInit, OnD
     protected showPopup: import("@angular/core").WritableSignal<boolean>;
     protected colorCustom: import("@angular/core").WritableSignal<string[]>;
     protected flagMouse: import("@angular/core").WritableSignal<IFlagMouse>;
-    private colorAdd;
-    private popoverFunctionControl;
-    private popoverAddColorFunctionControl;
+    private readonly colorAdd;
+    private readonly popoverFunctionControl;
+    private readonly popoverAddColorFunctionControl;
     /** Dữ liệu màu sắc và độ mờ hiện tại */
     readonly data: import("@angular/core").ModelSignal<IColorPickerData>;
     /** Z-index cho popover bảng màu */

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@libs-ui/components-inputs-color",
-  "version": "0.2.356-9",
+  "version": "0.2.357-1",
   "peerDependencies": {
     "@angular/common": ">=18.0.0",
     "@angular/core": ">=18.0.0",
-    "@libs-ui/components-buttons-button": "0.2.356-9",
-    "@libs-ui/components-inputs-valid": "0.2.356-9",
-    "@libs-ui/components-popover": "0.2.356-9",
-    "@libs-ui/utils": "0.2.356-9",
+    "@libs-ui/components-buttons-button": "0.2.357-1",
+    "@libs-ui/components-inputs-valid": "0.2.357-1",
+    "@libs-ui/components-popover": "0.2.357-1",
+    "@libs-ui/utils": "0.2.357-1",
     "@ngx-translate/core": "^15.0.0",
-    "@libs-ui/components-color-picker": "0.2.356-9"
+    "@libs-ui/components-color-picker": "0.2.357-1"
   },
   "sideEffects": false,
   "module": "fesm2022/libs-ui-components-inputs-color.mjs",