@libs-ui/components-inputs-color 0.2.10 → 0.2.11

package/esm2022/inputs-color.component.mjs

@@ -124,7 +124,7 @@ export class LibsUiComponentsInputsColorComponent {
         this.popoverAddColorFunctionControl()?.removePopoverOverlay();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsColorComponent, isStandalone: true, selector: "libs_ui-components-inputs-color", inputs: { data: { classPropertyName: "data", publicName: "data", 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", outColorChange: "outColorChange" }, ngImport: i0, template: "<div class=\"w-full flex justify-between rounded-[4px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div LibsUiComponentsPopoverDirective\n    class=\"w-full\"\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    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=\"py-[8px] px-[16px] flex items-center\">\n      <span 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 [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'\"\n      (moValueChange)=\"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.toLowerCase() === data()?.color?.toLowerCase()) {\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 class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"color.toLowerCase() === '#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 [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            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.toLowerCase() === data()?.color?.toLowerCase()) {\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 class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"color.toLowerCase() === '#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 [customOptions]=\"customOptions()\"\n      (outColorChange)=\"handlerColorChange($event)\" />\n    <div class=\"flex items-center justify-end pt-[16px]\">\n      <libs_ui-components-buttons-button [label]=\"'i18n_cancel'\"\n        [type]=\"'button-third'\"\n        (outClick)=\"handlerAction($event, 'cancel')\" />\n      <libs_ui-components-buttons-button [label]=\"'i18n_apply'\"\n        [classInclude]=\"'ml-[16px]'\"\n        (outClick)=\"handlerAction($event, 'apply')\" />\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], 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", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "hiddenContent", "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"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outToggleEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsColorPickerComponent, selector: "libs_ui-components-color_picker", inputs: ["customOptions"], outputs: ["outColorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsColorComponent, isStandalone: true, selector: "libs_ui-components-inputs-color", inputs: { data: { classPropertyName: "data", publicName: "data", 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", outColorChange: "outColorChange" }, ngImport: i0, template: "<div class=\"w-full flex justify-between rounded-[4px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div LibsUiComponentsPopoverDirective\n    class=\"w-full\"\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    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=\"py-[8px] px-[16px] flex items-center\">\n      <span 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 [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'\"\n      (moValueChange)=\"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.toLowerCase() === data()?.color?.toLowerCase()) {\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 class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"color.toLowerCase() === '#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 [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            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.toLowerCase() === data()?.color?.toLowerCase()) {\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 class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"color.toLowerCase() === '#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 [customOptions]=\"customOptions()\"\n      (outColorChange)=\"handlerColorChange($event)\" />\n    <div class=\"flex items-center justify-end pt-[16px]\">\n      <libs_ui-components-buttons-button [label]=\"'i18n_cancel'\"\n        [type]=\"'button-third'\"\n        (outClick)=\"handlerAction($event, 'cancel')\" />\n      <libs_ui-components-buttons-button [label]=\"'i18n_apply'\"\n        [classInclude]=\"'ml-[16px]'\"\n        (outClick)=\"handlerAction($event, 'apply')\" />\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], 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", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "hiddenContent", "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"], 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"], outputs: ["outColorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsColorComponent, decorators: [{
             type: Component,

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

@@ -125,7 +125,7 @@ class LibsUiComponentsInputsColorComponent {
         this.popoverAddColorFunctionControl()?.removePopoverOverlay();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsColorComponent, isStandalone: true, selector: "libs_ui-components-inputs-color", inputs: { data: { classPropertyName: "data", publicName: "data", 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", outColorChange: "outColorChange" }, ngImport: i0, template: "<div class=\"w-full flex justify-between rounded-[4px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div LibsUiComponentsPopoverDirective\n    class=\"w-full\"\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    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=\"py-[8px] px-[16px] flex items-center\">\n      <span 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 [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'\"\n      (moValueChange)=\"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.toLowerCase() === data()?.color?.toLowerCase()) {\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 class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"color.toLowerCase() === '#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 [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            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.toLowerCase() === data()?.color?.toLowerCase()) {\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 class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"color.toLowerCase() === '#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 [customOptions]=\"customOptions()\"\n      (outColorChange)=\"handlerColorChange($event)\" />\n    <div class=\"flex items-center justify-end pt-[16px]\">\n      <libs_ui-components-buttons-button [label]=\"'i18n_cancel'\"\n        [type]=\"'button-third'\"\n        (outClick)=\"handlerAction($event, 'cancel')\" />\n      <libs_ui-components-buttons-button [label]=\"'i18n_apply'\"\n        [classInclude]=\"'ml-[16px]'\"\n        (outClick)=\"handlerAction($event, 'apply')\" />\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], 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", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "hiddenContent", "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"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outToggleEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsColorPickerComponent, selector: "libs_ui-components-color_picker", inputs: ["customOptions"], outputs: ["outColorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsColorComponent, isStandalone: true, selector: "libs_ui-components-inputs-color", inputs: { data: { classPropertyName: "data", publicName: "data", 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", outColorChange: "outColorChange" }, ngImport: i0, template: "<div class=\"w-full flex justify-between rounded-[4px]\"\n  [class.libs-ui-border-general]=\"!showPopup()\"\n  [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n  <div LibsUiComponentsPopoverDirective\n    class=\"w-full\"\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    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=\"py-[8px] px-[16px] flex items-center\">\n      <span 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 [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'\"\n      (moValueChange)=\"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.toLowerCase() === data()?.color?.toLowerCase()) {\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 class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n            [class.libs-ui-border-general]=\"color.toLowerCase() === '#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 [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            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.toLowerCase() === data()?.color?.toLowerCase()) {\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 class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n              [class.libs-ui-border-general]=\"color.toLowerCase() === '#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 [customOptions]=\"customOptions()\"\n      (outColorChange)=\"handlerColorChange($event)\" />\n    <div class=\"flex items-center justify-end pt-[16px]\">\n      <libs_ui-components-buttons-button [label]=\"'i18n_cancel'\"\n        [type]=\"'button-third'\"\n        (outClick)=\"handlerAction($event, 'cancel')\" />\n      <libs_ui-components-buttons-button [label]=\"'i18n_apply'\"\n        [classInclude]=\"'ml-[16px]'\"\n        (outClick)=\"handlerAction($event, 'apply')\" />\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive"], 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", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "hiddenContent", "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"], 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"], outputs: ["outColorChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsColorComponent, decorators: [{
             type: Component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@libs-ui/components-inputs-color",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "peerDependencies": {
     "@angular/common": "^18.2.0",
     "@angular/core": "^18.2.0"