@libs-ui/components-color-picker 0.2.320-0 → 0.2.322-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/esm2022/color-picker.component.mjs +3 -3
  2. package/fesm2022/libs-ui-components-color-picker.mjs +3 -3
  3. package/package.json +4 -4
package/esm2022/color-picker.component.mjs CHANGED
@@ -310,10 +310,10 @@ export class LibsUiComponentsColorPickerComponent {
310
310
  this.onDestroy.next();
311
311
  this.onDestroy.complete();
312
312
  }
313
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
314
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsColorPickerComponent, isStandalone: true, selector: "libs_ui-components-color_picker", inputs: { customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, noEmitEventColorWhenInitComponent: { classPropertyName: "noEmitEventColorWhenInitComponent", publicName: "noEmitEventColorWhenInitComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outColorChange: "outColorChange", outColorChangeMultipleType: "outColorChangeMultipleType" }, viewQueries: [{ propertyName: "hueEl", first: true, predicate: ["hueEl"], descendants: true, isSignal: true }, { propertyName: "huePointerEl", first: true, predicate: ["huePointerEl"], descendants: true, isSignal: true }, { propertyName: "slEl", first: true, predicate: ["slEl"], descendants: true, isSignal: true }, { propertyName: "slPointerEl", first: true, predicate: ["slPointerEl"], descendants: true, isSignal: true }, { propertyName: "alphaEl", first: true, predicate: ["alphaEl"], descendants: true, isSignal: true }, { propertyName: "alphaPointerEl", first: true, predicate: ["alphaPointerEl"], descendants: true, isSignal: true }, { propertyName: "previewEl", first: true, predicate: ["previewEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <div\n class=\"relative\"\n [style.width.px]=\"options().slBarSize[0]\">\n <div>\n <canvas\n #slEl\n class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div\n #slPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n <div class=\"relative\">\n <canvas\n #hueEl\n class=\"libs-ui-color-picker-background-transparent\"\n [class.rounded-bl-[4px]]=\"!options().showAlpha\"\n [class.rounded-br-[4px]]=\"!options().showAlpha\"></canvas>\n <div\n #huePointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n @if (options().showAlpha) {\n <div class=\"relative\">\n <canvas\n #alphaEl\n class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div\n #alphaPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n }\n <div class=\"flex items-end\">\n <div class=\"text-center mr-[16px]\">\n <div class=\"libs-ui-color-picker-background-transparent rounded-[4px]\">\n <div\n #previewEl\n class=\"w-[32px] h-[32px] rounded-[4px] cursor-pointer\"\n (click)=\"handlerCopyColor($event)\"></div>\n </div>\n </div>\n @if (options().showHex) {\n <div class=\"text-center mr-[12px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">HEX</span>\n <div class=\"w-[88px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"hex\"\n [classInclude]=\"'text-center !p-0'\"\n (outChange)=\"handlerValueChange($event, 'hex')\" />\n </div>\n </div>\n }\n <div>\n @if (options().showHsl) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">H</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"h\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"360\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'h')\"\n (outChange)=\"handlerValueChange($event, 'h')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">S</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"s\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 's')\"\n (outChange)=\"handlerValueChange($event, 's')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">L</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"l\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'l')\"\n (outChange)=\"handlerValueChange($event, 'l')\" />\n </div>\n </div>\n </div>\n }\n @if (options().showRgb) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">R</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"r\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'r')\"\n (outChange)=\"handlerValueChange($event, 'r')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">G</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"g\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'g')\"\n (outChange)=\"handlerValueChange($event, 'g')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">B</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"b\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'b')\"\n (outChange)=\"handlerValueChange($event, 'b')\" />\n </div>\n </div>\n <div class=\"text-center ml-[8px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">A</span>\n <div class=\"w-[78px]\">\n <libs_ui-components-inputs-valid\n [item]=\"{ aValue: a() * 100 }\"\n [fieldNameBind]=\"'aValue'\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [unitsRight]=\"[{ label: '%' }]\"\n [emitEmptyInDataTypeNumber]=\"true\"\n (outValueChange)=\"handlerValueChangeAlphaInput($event)\" />\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:11px 11px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:transparent;border:1px solid #ffffff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "typeInput", "modeInput", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "selectAllTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "iframeTextareaCustomStyle", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "resetAutoCompletePassword", "acceptOnlyClickIcon", "setIconRightColorSameColorDisableReadOnly", "onlyAcceptNegativeValue", "maxLengthNumberCount", "focusInput"], outputs: ["maxValueNumberChange", "minValueNumberChange", "fixedFloatChange", "acceptNegativeValueChange", "maxLengthChange", "valueChange", "maxLengthNumberCountChange", "outHeightAreaChange", "outChange", "outFocusAndBlurEvent", "outEnterEvent", "outInputEvent", "outIconLeft", "outIconRight", "outFunctionsControl", "outFilesDrop", "outFileDrop", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
313
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
314
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsColorPickerComponent, isStandalone: true, selector: "libs_ui-components-color_picker", inputs: { customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, noEmitEventColorWhenInitComponent: { classPropertyName: "noEmitEventColorWhenInitComponent", publicName: "noEmitEventColorWhenInitComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outColorChange: "outColorChange", outColorChangeMultipleType: "outColorChangeMultipleType" }, viewQueries: [{ propertyName: "hueEl", first: true, predicate: ["hueEl"], descendants: true, isSignal: true }, { propertyName: "huePointerEl", first: true, predicate: ["huePointerEl"], descendants: true, isSignal: true }, { propertyName: "slEl", first: true, predicate: ["slEl"], descendants: true, isSignal: true }, { propertyName: "slPointerEl", first: true, predicate: ["slPointerEl"], descendants: true, isSignal: true }, { propertyName: "alphaEl", first: true, predicate: ["alphaEl"], descendants: true, isSignal: true }, { propertyName: "alphaPointerEl", first: true, predicate: ["alphaPointerEl"], descendants: true, isSignal: true }, { propertyName: "previewEl", first: true, predicate: ["previewEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <div\n class=\"relative\"\n [style.width.px]=\"options().slBarSize[0]\">\n <div>\n <canvas\n #slEl\n class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div\n #slPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n <div class=\"relative\">\n <canvas\n #hueEl\n class=\"libs-ui-color-picker-background-transparent\"\n [class.rounded-bl-[4px]]=\"!options().showAlpha\"\n [class.rounded-br-[4px]]=\"!options().showAlpha\"></canvas>\n <div\n #huePointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n @if (options().showAlpha) {\n <div class=\"relative\">\n <canvas\n #alphaEl\n class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div\n #alphaPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n }\n <div class=\"flex items-end\">\n <div class=\"text-center mr-[16px]\">\n <div class=\"libs-ui-color-picker-background-transparent rounded-[4px]\">\n <div\n #previewEl\n class=\"w-[32px] h-[32px] rounded-[4px] cursor-pointer\"\n (click)=\"handlerCopyColor($event)\"></div>\n </div>\n </div>\n @if (options().showHex) {\n <div class=\"text-center mr-[12px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">HEX</span>\n <div class=\"w-[88px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"hex\"\n [classInclude]=\"'text-center !p-0'\"\n (outChange)=\"handlerValueChange($event, 'hex')\" />\n </div>\n </div>\n }\n <div>\n @if (options().showHsl) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">H</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"h\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"360\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'h')\"\n (outChange)=\"handlerValueChange($event, 'h')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">S</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"s\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 's')\"\n (outChange)=\"handlerValueChange($event, 's')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">L</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"l\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'l')\"\n (outChange)=\"handlerValueChange($event, 'l')\" />\n </div>\n </div>\n </div>\n }\n @if (options().showRgb) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">R</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"r\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'r')\"\n (outChange)=\"handlerValueChange($event, 'r')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">G</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"g\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'g')\"\n (outChange)=\"handlerValueChange($event, 'g')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">B</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"b\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'b')\"\n (outChange)=\"handlerValueChange($event, 'b')\" />\n </div>\n </div>\n <div class=\"text-center ml-[8px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">A</span>\n <div class=\"w-[78px]\">\n <libs_ui-components-inputs-valid\n [item]=\"{ aValue: a() * 100 }\"\n [fieldNameBind]=\"'aValue'\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [unitsRight]=\"[{ label: '%' }]\"\n [emitEmptyInDataTypeNumber]=\"true\"\n (outValueChange)=\"handlerValueChangeAlphaInput($event)\" />\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:11px 11px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:transparent;border:1px solid #ffffff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "typeInput", "modeInput", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "selectAllTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "iframeTextareaCustomStyle", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "resetAutoCompletePassword", "acceptOnlyClickIcon", "setIconRightColorSameColorDisableReadOnly", "onlyAcceptNegativeValue", "maxLengthNumberCount", "focusInput"], outputs: ["maxValueNumberChange", "minValueNumberChange", "fixedFloatChange", "acceptNegativeValueChange", "maxLengthChange", "valueChange", "maxLengthNumberCountChange", "outHeightAreaChange", "outChange", "outFocusAndBlurEvent", "outEnterEvent", "outInputEvent", "outIconLeft", "outIconRight", "outFunctionsControl", "outFilesDrop", "outFileDrop", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
315
315
  }
316
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsColorPickerComponent, decorators: [{
316
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsColorPickerComponent, decorators: [{
317
317
  type: Component,
318
318
  args: [{ selector: 'libs_ui-components-color_picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsInputsInputComponent, LibsUiComponentsInputsValidComponent], template: "<div>\n <div\n class=\"relative\"\n [style.width.px]=\"options().slBarSize[0]\">\n <div>\n <canvas\n #slEl\n class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div\n #slPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n <div class=\"relative\">\n <canvas\n #hueEl\n class=\"libs-ui-color-picker-background-transparent\"\n [class.rounded-bl-[4px]]=\"!options().showAlpha\"\n [class.rounded-br-[4px]]=\"!options().showAlpha\"></canvas>\n <div\n #huePointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n @if (options().showAlpha) {\n <div class=\"relative\">\n <canvas\n #alphaEl\n class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div\n #alphaPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n }\n <div class=\"flex items-end\">\n <div class=\"text-center mr-[16px]\">\n <div class=\"libs-ui-color-picker-background-transparent rounded-[4px]\">\n <div\n #previewEl\n class=\"w-[32px] h-[32px] rounded-[4px] cursor-pointer\"\n (click)=\"handlerCopyColor($event)\"></div>\n </div>\n </div>\n @if (options().showHex) {\n <div class=\"text-center mr-[12px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">HEX</span>\n <div class=\"w-[88px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"hex\"\n [classInclude]=\"'text-center !p-0'\"\n (outChange)=\"handlerValueChange($event, 'hex')\" />\n </div>\n </div>\n }\n <div>\n @if (options().showHsl) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">H</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"h\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"360\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'h')\"\n (outChange)=\"handlerValueChange($event, 'h')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">S</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"s\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 's')\"\n (outChange)=\"handlerValueChange($event, 's')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">L</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"l\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'l')\"\n (outChange)=\"handlerValueChange($event, 'l')\" />\n </div>\n </div>\n </div>\n }\n @if (options().showRgb) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">R</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"r\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'r')\"\n (outChange)=\"handlerValueChange($event, 'r')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">G</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"g\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'g')\"\n (outChange)=\"handlerValueChange($event, 'g')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">B</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"b\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'b')\"\n (outChange)=\"handlerValueChange($event, 'b')\" />\n </div>\n </div>\n <div class=\"text-center ml-[8px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">A</span>\n <div class=\"w-[78px]\">\n <libs_ui-components-inputs-valid\n [item]=\"{ aValue: a() * 100 }\"\n [fieldNameBind]=\"'aValue'\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [unitsRight]=\"[{ label: '%' }]\"\n [emitEmptyInDataTypeNumber]=\"true\"\n (outValueChange)=\"handlerValueChangeAlphaInput($event)\" />\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:11px 11px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:transparent;border:1px solid #ffffff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"] }]
319
319
  }], ctorParameters: () => [] });
package/fesm2022/libs-ui-components-color-picker.mjs CHANGED
@@ -673,10 +673,10 @@ class LibsUiComponentsColorPickerComponent {
673
673
  this.onDestroy.next();
674
674
  this.onDestroy.complete();
675
675
  }
676
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
677
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsColorPickerComponent, isStandalone: true, selector: "libs_ui-components-color_picker", inputs: { customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, noEmitEventColorWhenInitComponent: { classPropertyName: "noEmitEventColorWhenInitComponent", publicName: "noEmitEventColorWhenInitComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outColorChange: "outColorChange", outColorChangeMultipleType: "outColorChangeMultipleType" }, viewQueries: [{ propertyName: "hueEl", first: true, predicate: ["hueEl"], descendants: true, isSignal: true }, { propertyName: "huePointerEl", first: true, predicate: ["huePointerEl"], descendants: true, isSignal: true }, { propertyName: "slEl", first: true, predicate: ["slEl"], descendants: true, isSignal: true }, { propertyName: "slPointerEl", first: true, predicate: ["slPointerEl"], descendants: true, isSignal: true }, { propertyName: "alphaEl", first: true, predicate: ["alphaEl"], descendants: true, isSignal: true }, { propertyName: "alphaPointerEl", first: true, predicate: ["alphaPointerEl"], descendants: true, isSignal: true }, { propertyName: "previewEl", first: true, predicate: ["previewEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <div\n class=\"relative\"\n [style.width.px]=\"options().slBarSize[0]\">\n <div>\n <canvas\n #slEl\n class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div\n #slPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n <div class=\"relative\">\n <canvas\n #hueEl\n class=\"libs-ui-color-picker-background-transparent\"\n [class.rounded-bl-[4px]]=\"!options().showAlpha\"\n [class.rounded-br-[4px]]=\"!options().showAlpha\"></canvas>\n <div\n #huePointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n @if (options().showAlpha) {\n <div class=\"relative\">\n <canvas\n #alphaEl\n class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div\n #alphaPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n }\n <div class=\"flex items-end\">\n <div class=\"text-center mr-[16px]\">\n <div class=\"libs-ui-color-picker-background-transparent rounded-[4px]\">\n <div\n #previewEl\n class=\"w-[32px] h-[32px] rounded-[4px] cursor-pointer\"\n (click)=\"handlerCopyColor($event)\"></div>\n </div>\n </div>\n @if (options().showHex) {\n <div class=\"text-center mr-[12px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">HEX</span>\n <div class=\"w-[88px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"hex\"\n [classInclude]=\"'text-center !p-0'\"\n (outChange)=\"handlerValueChange($event, 'hex')\" />\n </div>\n </div>\n }\n <div>\n @if (options().showHsl) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">H</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"h\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"360\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'h')\"\n (outChange)=\"handlerValueChange($event, 'h')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">S</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"s\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 's')\"\n (outChange)=\"handlerValueChange($event, 's')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">L</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"l\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'l')\"\n (outChange)=\"handlerValueChange($event, 'l')\" />\n </div>\n </div>\n </div>\n }\n @if (options().showRgb) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">R</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"r\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'r')\"\n (outChange)=\"handlerValueChange($event, 'r')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">G</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"g\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'g')\"\n (outChange)=\"handlerValueChange($event, 'g')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">B</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"b\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'b')\"\n (outChange)=\"handlerValueChange($event, 'b')\" />\n </div>\n </div>\n <div class=\"text-center ml-[8px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">A</span>\n <div class=\"w-[78px]\">\n <libs_ui-components-inputs-valid\n [item]=\"{ aValue: a() * 100 }\"\n [fieldNameBind]=\"'aValue'\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [unitsRight]=\"[{ label: '%' }]\"\n [emitEmptyInDataTypeNumber]=\"true\"\n (outValueChange)=\"handlerValueChangeAlphaInput($event)\" />\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:11px 11px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:transparent;border:1px solid #ffffff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "typeInput", "modeInput", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "selectAllTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "iframeTextareaCustomStyle", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "resetAutoCompletePassword", "acceptOnlyClickIcon", "setIconRightColorSameColorDisableReadOnly", "onlyAcceptNegativeValue", "maxLengthNumberCount", "focusInput"], outputs: ["maxValueNumberChange", "minValueNumberChange", "fixedFloatChange", "acceptNegativeValueChange", "maxLengthChange", "valueChange", "maxLengthNumberCountChange", "outHeightAreaChange", "outChange", "outFocusAndBlurEvent", "outEnterEvent", "outInputEvent", "outIconLeft", "outIconRight", "outFunctionsControl", "outFilesDrop", "outFileDrop", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
676
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
677
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsColorPickerComponent, isStandalone: true, selector: "libs_ui-components-color_picker", inputs: { customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, noEmitEventColorWhenInitComponent: { classPropertyName: "noEmitEventColorWhenInitComponent", publicName: "noEmitEventColorWhenInitComponent", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { outColorChange: "outColorChange", outColorChangeMultipleType: "outColorChangeMultipleType" }, viewQueries: [{ propertyName: "hueEl", first: true, predicate: ["hueEl"], descendants: true, isSignal: true }, { propertyName: "huePointerEl", first: true, predicate: ["huePointerEl"], descendants: true, isSignal: true }, { propertyName: "slEl", first: true, predicate: ["slEl"], descendants: true, isSignal: true }, { propertyName: "slPointerEl", first: true, predicate: ["slPointerEl"], descendants: true, isSignal: true }, { propertyName: "alphaEl", first: true, predicate: ["alphaEl"], descendants: true, isSignal: true }, { propertyName: "alphaPointerEl", first: true, predicate: ["alphaPointerEl"], descendants: true, isSignal: true }, { propertyName: "previewEl", first: true, predicate: ["previewEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div>\n <div\n class=\"relative\"\n [style.width.px]=\"options().slBarSize[0]\">\n <div>\n <canvas\n #slEl\n class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div\n #slPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n <div class=\"relative\">\n <canvas\n #hueEl\n class=\"libs-ui-color-picker-background-transparent\"\n [class.rounded-bl-[4px]]=\"!options().showAlpha\"\n [class.rounded-br-[4px]]=\"!options().showAlpha\"></canvas>\n <div\n #huePointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n @if (options().showAlpha) {\n <div class=\"relative\">\n <canvas\n #alphaEl\n class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div\n #alphaPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n }\n <div class=\"flex items-end\">\n <div class=\"text-center mr-[16px]\">\n <div class=\"libs-ui-color-picker-background-transparent rounded-[4px]\">\n <div\n #previewEl\n class=\"w-[32px] h-[32px] rounded-[4px] cursor-pointer\"\n (click)=\"handlerCopyColor($event)\"></div>\n </div>\n </div>\n @if (options().showHex) {\n <div class=\"text-center mr-[12px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">HEX</span>\n <div class=\"w-[88px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"hex\"\n [classInclude]=\"'text-center !p-0'\"\n (outChange)=\"handlerValueChange($event, 'hex')\" />\n </div>\n </div>\n }\n <div>\n @if (options().showHsl) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">H</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"h\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"360\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'h')\"\n (outChange)=\"handlerValueChange($event, 'h')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">S</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"s\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 's')\"\n (outChange)=\"handlerValueChange($event, 's')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">L</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"l\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'l')\"\n (outChange)=\"handlerValueChange($event, 'l')\" />\n </div>\n </div>\n </div>\n }\n @if (options().showRgb) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">R</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"r\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'r')\"\n (outChange)=\"handlerValueChange($event, 'r')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">G</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"g\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'g')\"\n (outChange)=\"handlerValueChange($event, 'g')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">B</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"b\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'b')\"\n (outChange)=\"handlerValueChange($event, 'b')\" />\n </div>\n </div>\n <div class=\"text-center ml-[8px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">A</span>\n <div class=\"w-[78px]\">\n <libs_ui-components-inputs-valid\n [item]=\"{ aValue: a() * 100 }\"\n [fieldNameBind]=\"'aValue'\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [unitsRight]=\"[{ label: '%' }]\"\n [emitEmptyInDataTypeNumber]=\"true\"\n (outValueChange)=\"handlerValueChangeAlphaInput($event)\" />\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:11px 11px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:transparent;border:1px solid #ffffff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"], dependencies: [{ kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "typeInput", "modeInput", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "selectAllTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "iframeTextareaCustomStyle", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "resetAutoCompletePassword", "acceptOnlyClickIcon", "setIconRightColorSameColorDisableReadOnly", "onlyAcceptNegativeValue", "maxLengthNumberCount", "focusInput"], outputs: ["maxValueNumberChange", "minValueNumberChange", "fixedFloatChange", "acceptNegativeValueChange", "maxLengthChange", "valueChange", "maxLengthNumberCountChange", "outHeightAreaChange", "outChange", "outFocusAndBlurEvent", "outEnterEvent", "outInputEvent", "outIconLeft", "outIconRight", "outFunctionsControl", "outFilesDrop", "outFileDrop", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
678
678
  }
679
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsColorPickerComponent, decorators: [{
679
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsColorPickerComponent, decorators: [{
680
680
  type: Component,
681
681
  args: [{ selector: 'libs_ui-components-color_picker', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LibsUiComponentsInputsInputComponent, LibsUiComponentsInputsValidComponent], template: "<div>\n <div\n class=\"relative\"\n [style.width.px]=\"options().slBarSize[0]\">\n <div>\n <canvas\n #slEl\n class=\"rounded-tl-[4px] rounded-tr-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div\n #slPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n <div class=\"relative\">\n <canvas\n #hueEl\n class=\"libs-ui-color-picker-background-transparent\"\n [class.rounded-bl-[4px]]=\"!options().showAlpha\"\n [class.rounded-br-[4px]]=\"!options().showAlpha\"></canvas>\n <div\n #huePointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n @if (options().showAlpha) {\n <div class=\"relative\">\n <canvas\n #alphaEl\n class=\"rounded-bl-[4px] rounded-br-[4px] libs-ui-color-picker-background-transparent\"></canvas>\n <div\n #alphaPointerEl\n class=\"libs-ui-color-picker-dot\"></div>\n </div>\n }\n <div class=\"flex items-end\">\n <div class=\"text-center mr-[16px]\">\n <div class=\"libs-ui-color-picker-background-transparent rounded-[4px]\">\n <div\n #previewEl\n class=\"w-[32px] h-[32px] rounded-[4px] cursor-pointer\"\n (click)=\"handlerCopyColor($event)\"></div>\n </div>\n </div>\n @if (options().showHex) {\n <div class=\"text-center mr-[12px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">HEX</span>\n <div class=\"w-[88px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"hex\"\n [classInclude]=\"'text-center !p-0'\"\n (outChange)=\"handlerValueChange($event, 'hex')\" />\n </div>\n </div>\n }\n <div>\n @if (options().showHsl) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">H</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"h\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"360\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 's' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'h')\"\n (outChange)=\"handlerValueChange($event, 'h')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">S</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"s\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 's' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 's')\"\n (outChange)=\"handlerValueChange($event, 's')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">L</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"l\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 's' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'l')\"\n (outChange)=\"handlerValueChange($event, 'l')\" />\n </div>\n </div>\n </div>\n }\n @if (options().showRgb) {\n <div class=\"flex\">\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">R</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"r\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tr-none !rounded-br-none ' + (focus() === 'g' ? '!border-r-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'r')\"\n (outChange)=\"handlerValueChange($event, 'r')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">G</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"g\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-none ' + (focus() === 'g' ? '' : '!border-x-transparent')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'g')\"\n (outChange)=\"handlerValueChange($event, 'g')\" />\n </div>\n </div>\n <div class=\"text-center\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">B</span>\n <div class=\"w-[56px]\">\n <libs_ui-components-inputs-input\n [(value)]=\"b\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"255\"\n [classInclude]=\"'text-center !p-0 !rounded-tl-none !rounded-bl-none ' + (focus() === 'g' ? '!border-l-transparent' : '')\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlur($event, 'b')\"\n (outChange)=\"handlerValueChange($event, 'b')\" />\n </div>\n </div>\n <div class=\"text-center ml-[8px]\">\n <span class=\"libs-ui-font-h7r text-[#6a7383]\">A</span>\n <div class=\"w-[78px]\">\n <libs_ui-components-inputs-valid\n [item]=\"{ aValue: a() * 100 }\"\n [fieldNameBind]=\"'aValue'\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [unitsRight]=\"[{ label: '%' }]\"\n [emitEmptyInDataTypeNumber]=\"true\"\n (outValueChange)=\"handlerValueChangeAlphaInput($event)\" />\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", styles: [".libs-ui-color-picker-background-transparent{background-image:conic-gradient(rgba(0,0,0,.06) 0 25%,transparent 0 50%,rgba(0,0,0,.06) 0 75%,transparent 0);background-size:11px 11px}.libs-ui-color-picker-dot{position:absolute;width:14px;height:14px;top:3px;left:0;background:transparent;border:1px solid #ffffff;pointer-events:none;border-radius:50px;z-index:1;box-shadow:0 1px 2px #000000bf}\n"] }]
682
682
  }], ctorParameters: () => [] });
package/package.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
2
  "name": "@libs-ui/components-color-picker",
3
- "version": "0.2.320-0",
3
+ "version": "0.2.322-0",
4
4
  "peerDependencies": {
5
5
  "@angular/core": ">=18.0.0",
6
- "@libs-ui/components-inputs-input": "0.2.320-0",
7
- "@libs-ui/services-notification": "0.2.320-0",
8
- "@libs-ui/utils": "0.2.320-0",
6
+ "@libs-ui/components-inputs-input": "0.2.322-0",
7
+ "@libs-ui/services-notification": "0.2.322-0",
8
+ "@libs-ui/utils": "0.2.322-0",
9
9
  "rxjs": "~7.8.0"
10
10
  },
11
11
  "sideEffects": false,