@libs-ui/components-inputs-color 0.2.279 → 0.2.281

package/esm2022/inputs-color.component.mjs

@@ -120,7 +120,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 }, 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 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 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 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 !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\n              class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\">\n            </div>\n          }\n          <div 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]\">{{\n        'i18n_color_custom' | translate\n        }}</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            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\n                class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\">\n              </div>\n            }\n            <div 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 [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: "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", "deboundTimeValiate"], 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", "outColorChangeMutilType"] }], 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 }, 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 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 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 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 !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\n              class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\">\n            </div>\n          }\n          <div 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]\">{{\n        'i18n_color_custom' | translate\n        }}</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            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\n                class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\">\n              </div>\n            }\n            <div 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 [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: "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", "deboundTimeValiate"], 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.13", ngImport: i0, type: LibsUiComponentsInputsColorComponent, decorators: [{
             type: Component,

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

@@ -121,7 +121,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 }, 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 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 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 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 !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\n              class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\">\n            </div>\n          }\n          <div 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]\">{{\n        'i18n_color_custom' | translate\n        }}</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            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\n                class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\">\n              </div>\n            }\n            <div 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 [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: "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", "deboundTimeValiate"], 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", "outColorChangeMutilType"] }], 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 }, 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 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 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 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 !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\n              class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\">\n            </div>\n          }\n          <div 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]\">{{\n        'i18n_color_custom' | translate\n        }}</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            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\n                class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\">\n              </div>\n            }\n            <div 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 [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: "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", "deboundTimeValiate"], 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.13", ngImport: i0, type: LibsUiComponentsInputsColorComponent, decorators: [{
             type: Component,

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 { ChangeDetectionStrategy, Component, input, model, OnDestroy, OnInit, output, signal } from \"@angular/core\";\nimport { LibsUiComponentsButtonsButtonComponent } from \"@libs-ui/components-buttons-button\";\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\";\nimport { IPickerCustomOptions, LibsUiComponentsColorPickerComponent } from \"@libs-ui/components-color-picker\";\nimport { LowerCasePipe } from \"@angular/common\";\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: [\n    TranslateModule, LowerCasePipe,\n    LibsUiComponentsPopoverComponent,\n    LibsUiComponentsButtonsButtonComponent,\n    LibsUiComponentsInputsValidComponent,\n    LibsUiComponentsColorPickerComponent\n  ]\n})\nexport class LibsUiComponentsInputsColorComponent implements OnInit, OnDestroy {\n\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  readonly data = model<IColorPickerData>({ color: '', opacity: 100 });\n  readonly zIndex = model<number>(1200);\n  readonly customOptions = input<IPickerCustomOptions>();\n  readonly functionGetListColorDefault = input<() => Promise<Array<string>>>();\n  readonly functionGetListColorCustom = input<() => Promise<Array<string>>>();\n  readonly functionSetListColorCustom = input<(colors: Array<string>) => Promise<void>>();\n\n  // #region OUTPUT\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 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 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 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 !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\n              class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\">\n            </div>\n          }\n          <div 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]\">{{\n        'i18n_color_custom' | translate\n        }}</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            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\n                class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\">\n              </div>\n            }\n            <div 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 [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","/**\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 { ChangeDetectionStrategy, Component, input, model, OnDestroy, OnInit, output, signal } from \"@angular/core\";\nimport { LibsUiComponentsButtonsButtonComponent } from \"@libs-ui/components-buttons-button\";\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\";\nimport { IPickerCustomOptions, LibsUiComponentsColorPickerComponent } from \"@libs-ui/components-color-picker\";\nimport { LowerCasePipe } from \"@angular/common\";\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: [\n    TranslateModule, LowerCasePipe,\n    LibsUiComponentsPopoverComponent,\n    LibsUiComponentsButtonsButtonComponent,\n    LibsUiComponentsInputsValidComponent,\n    LibsUiComponentsColorPickerComponent\n  ]\n})\nexport class LibsUiComponentsInputsColorComponent implements OnInit, OnDestroy {\n\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  readonly data = model<IColorPickerData>({ color: '', opacity: 100 });\n  readonly zIndex = model<number>(1200);\n  readonly customOptions = input<IPickerCustomOptions>();\n  readonly functionGetListColorDefault = input<() => Promise<Array<string>>>();\n  readonly functionGetListColorCustom = input<() => Promise<Array<string>>>();\n  readonly functionSetListColorCustom = input<(colors: Array<string>) => Promise<void>>();\n\n  // #region OUTPUT\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 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 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 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 !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\n              class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\">\n            </div>\n          }\n          <div 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]\">{{\n        'i18n_color_custom' | translate\n        }}</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            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\n                class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\">\n              </div>\n            }\n            <div 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 [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","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

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