@libs-ui/components-inputs-color 0.2.321-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.
|
@@ -119,10 +119,10 @@ export class LibsUiComponentsInputsColorComponent {
|
|
|
119
119
|
this.popoverFunctionControl()?.removePopoverOverlay();
|
|
120
120
|
this.popoverAddColorFunctionControl()?.removePopoverOverlay();
|
|
121
121
|
}
|
|
122
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
123
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
122
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
123
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsColorComponent, isStandalone: true, selector: "libs_ui-components-inputs-color", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, functionGetListColorDefault: { classPropertyName: "functionGetListColorDefault", publicName: "functionGetListColorDefault", isSignal: true, isRequired: false, transformFunction: null }, functionGetListColorCustom: { classPropertyName: "functionGetListColorCustom", publicName: "functionGetListColorCustom", isSignal: true, isRequired: false, transformFunction: null }, functionSetListColorCustom: { classPropertyName: "functionSetListColorCustom", publicName: "functionSetListColorCustom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", zIndex: "zIndexChange", outColorChange: "outColorChange" }, ngImport: i0, template: "<div\n class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n [class.libs-ui-border-general]=\"!showPopup()\"\n [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n <div\n LibsUiComponentsPopoverDirective\n class=\"w-full flex\"\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n template: element,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex(),\n classInclude: 'w-[334px]',\n direction: 'left',\n directionDistance: 4,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n [flagMouse]=\"flagMouse()\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n <div class=\"px-[16px] flex items-center\">\n <span\n class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n [style.background-color]=\"data().color\"></span>\n <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n </div>\n </div>\n <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n <libs_ui-components-inputs-valid\n [noBorder]=\"true\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [(item)]=\"data\"\n [fieldNameBind]=\"'opacity'\"\n [unitsRight]=\"[{ id: '%', label: '%' }]\"\n [keySelectedUnitRight]=\"'%'\"\n [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n (outValueChange)=\"handlerChangeOpacity()\" />\n </div>\n</div>\n\n<ng-template #element>\n <div class=\"p-[16px] w-full\">\n <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n @for (color of colorDefault(); track $index; let i = $index) {\n <div class=\"py-[5px] px-[8px] relative\">\n @if ((color | lowercase) === (data().color | lowercase)) {\n <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n }\n <div\n class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n [style.background-color]=\"color\"\n (click)=\"handlerSelectColor($event, color)\"></div>\n </div>\n }\n </div>\n <div class=\"flex items-center justify-between\">\n <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n [classIconLeft]=\"'libs-ui-icon-add'\"\n [label]=\"'i18n_add_new'\"\n [popover]=\"{\n mode: 'click-toggle',\n ignoreHiddenPopoverContentWhenMouseLeave: true,\n config: {\n template: colorPicker,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex() + 1,\n classInclude: 'w-[350px]',\n direction: 'left',\n directionDistance: -100,\n position: {\n mode: 'start',\n distance: -165,\n },\n },\n }\"\n [classInclude]=\"'py-[2px] px-[0]'\"\n (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n </div>\n @if (colorCustom().length) {\n <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n @for (color of colorCustom(); track $index; let i = $index) {\n <div class=\"py-[5px] px-[8px] relative\">\n @if ((color | lowercase) === (data().color | lowercase)) {\n <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n }\n <div\n class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n [style.background-color]=\"color\"\n (click)=\"handlerSelectColor($event, color)\"></div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #colorPicker>\n <div class=\"p-[16px] w-auto h-auto\">\n <libs_ui-components-color_picker\n [customOptions]=\"customOptions()\"\n (outColorChange)=\"handlerColorChange($event)\" />\n <div class=\"flex items-center justify-end pt-[16px]\">\n <libs_ui-components-buttons-button\n [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button\n [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsColorPickerComponent, selector: "libs_ui-components-color_picker", inputs: ["customOptions", "noEmitEventColorWhenInitComponent"], outputs: ["outColorChange", "outColorChangeMultipleType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
124
124
|
}
|
|
125
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
125
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsColorComponent, decorators: [{
|
|
126
126
|
type: Component,
|
|
127
127
|
args: [{ selector: 'libs_ui-components-inputs-color', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LowerCasePipe, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsInputsValidComponent, LibsUiComponentsColorPickerComponent], template: "<div\n class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n [class.libs-ui-border-general]=\"!showPopup()\"\n [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n <div\n LibsUiComponentsPopoverDirective\n class=\"w-full flex\"\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n template: element,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex(),\n classInclude: 'w-[334px]',\n direction: 'left',\n directionDistance: 4,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n [flagMouse]=\"flagMouse()\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n <div class=\"px-[16px] flex items-center\">\n <span\n class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n [style.background-color]=\"data().color\"></span>\n <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n </div>\n </div>\n <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n <libs_ui-components-inputs-valid\n [noBorder]=\"true\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [(item)]=\"data\"\n [fieldNameBind]=\"'opacity'\"\n [unitsRight]=\"[{ id: '%', label: '%' }]\"\n [keySelectedUnitRight]=\"'%'\"\n [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n (outValueChange)=\"handlerChangeOpacity()\" />\n </div>\n</div>\n\n<ng-template #element>\n <div class=\"p-[16px] w-full\">\n <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n @for (color of colorDefault(); track $index; let i = $index) {\n <div class=\"py-[5px] px-[8px] relative\">\n @if ((color | lowercase) === (data().color | lowercase)) {\n <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n }\n <div\n class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n [style.background-color]=\"color\"\n (click)=\"handlerSelectColor($event, color)\"></div>\n </div>\n }\n </div>\n <div class=\"flex items-center justify-between\">\n <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n [classIconLeft]=\"'libs-ui-icon-add'\"\n [label]=\"'i18n_add_new'\"\n [popover]=\"{\n mode: 'click-toggle',\n ignoreHiddenPopoverContentWhenMouseLeave: true,\n config: {\n template: colorPicker,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex() + 1,\n classInclude: 'w-[350px]',\n direction: 'left',\n directionDistance: -100,\n position: {\n mode: 'start',\n distance: -165,\n },\n },\n }\"\n [classInclude]=\"'py-[2px] px-[0]'\"\n (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n </div>\n @if (colorCustom().length) {\n <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n @for (color of colorCustom(); track $index; let i = $index) {\n <div class=\"py-[5px] px-[8px] relative\">\n @if ((color | lowercase) === (data().color | lowercase)) {\n <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n }\n <div\n class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n [style.background-color]=\"color\"\n (click)=\"handlerSelectColor($event, color)\"></div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #colorPicker>\n <div class=\"p-[16px] w-auto h-auto\">\n <libs_ui-components-color_picker\n [customOptions]=\"customOptions()\"\n (outColorChange)=\"handlerColorChange($event)\" />\n <div class=\"flex items-center justify-end pt-[16px]\">\n <libs_ui-components-buttons-button\n [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button\n [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n </div>\n</ng-template>\n" }]
|
|
128
128
|
}] });
|
|
@@ -120,10 +120,10 @@ class LibsUiComponentsInputsColorComponent {
|
|
|
120
120
|
this.popoverFunctionControl()?.removePopoverOverlay();
|
|
121
121
|
this.popoverAddColorFunctionControl()?.removePopoverOverlay();
|
|
122
122
|
}
|
|
123
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.
|
|
124
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.
|
|
123
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
124
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsInputsColorComponent, isStandalone: true, selector: "libs_ui-components-inputs-color", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, customOptions: { classPropertyName: "customOptions", publicName: "customOptions", isSignal: true, isRequired: false, transformFunction: null }, functionGetListColorDefault: { classPropertyName: "functionGetListColorDefault", publicName: "functionGetListColorDefault", isSignal: true, isRequired: false, transformFunction: null }, functionGetListColorCustom: { classPropertyName: "functionGetListColorCustom", publicName: "functionGetListColorCustom", isSignal: true, isRequired: false, transformFunction: null }, functionSetListColorCustom: { classPropertyName: "functionSetListColorCustom", publicName: "functionSetListColorCustom", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { data: "dataChange", zIndex: "zIndexChange", outColorChange: "outColorChange" }, ngImport: i0, template: "<div\n class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n [class.libs-ui-border-general]=\"!showPopup()\"\n [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n <div\n LibsUiComponentsPopoverDirective\n class=\"w-full flex\"\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n template: element,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex(),\n classInclude: 'w-[334px]',\n direction: 'left',\n directionDistance: 4,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n [flagMouse]=\"flagMouse()\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n <div class=\"px-[16px] flex items-center\">\n <span\n class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n [style.background-color]=\"data().color\"></span>\n <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n </div>\n </div>\n <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n <libs_ui-components-inputs-valid\n [noBorder]=\"true\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [(item)]=\"data\"\n [fieldNameBind]=\"'opacity'\"\n [unitsRight]=\"[{ id: '%', label: '%' }]\"\n [keySelectedUnitRight]=\"'%'\"\n [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n (outValueChange)=\"handlerChangeOpacity()\" />\n </div>\n</div>\n\n<ng-template #element>\n <div class=\"p-[16px] w-full\">\n <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n @for (color of colorDefault(); track $index; let i = $index) {\n <div class=\"py-[5px] px-[8px] relative\">\n @if ((color | lowercase) === (data().color | lowercase)) {\n <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n }\n <div\n class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n [style.background-color]=\"color\"\n (click)=\"handlerSelectColor($event, color)\"></div>\n </div>\n }\n </div>\n <div class=\"flex items-center justify-between\">\n <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n [classIconLeft]=\"'libs-ui-icon-add'\"\n [label]=\"'i18n_add_new'\"\n [popover]=\"{\n mode: 'click-toggle',\n ignoreHiddenPopoverContentWhenMouseLeave: true,\n config: {\n template: colorPicker,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex() + 1,\n classInclude: 'w-[350px]',\n direction: 'left',\n directionDistance: -100,\n position: {\n mode: 'start',\n distance: -165,\n },\n },\n }\"\n [classInclude]=\"'py-[2px] px-[0]'\"\n (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n </div>\n @if (colorCustom().length) {\n <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n @for (color of colorCustom(); track $index; let i = $index) {\n <div class=\"py-[5px] px-[8px] relative\">\n @if ((color | lowercase) === (data().color | lowercase)) {\n <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n }\n <div\n class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n [style.background-color]=\"color\"\n (click)=\"handlerSelectColor($event, color)\"></div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #colorPicker>\n <div class=\"p-[16px] w-auto h-auto\">\n <libs_ui-components-color_picker\n [customOptions]=\"customOptions()\"\n (outColorChange)=\"handlerColorChange($event)\" />\n <div class=\"flex items-center justify-end pt-[16px]\">\n <libs_ui-components-buttons-button\n [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button\n [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n </div>\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "pipe", type: LowerCasePipe, name: "lowercase" }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsInputsValidComponent, selector: "libs_ui-components-inputs-valid", inputs: ["item", "labelConfig", "emitEmptyInDataTypeNumber", "ignoreBlockInputMaxValue", "fieldNameBind", "showCount", "typeComponentSelectItem", "valueComponentSelectItem", "disableComponentSelectItem", "tagInput", "dataType", "typeInput", "modeInput", "resetAutoCompletePassword", "textAreaEnterNotNewLine", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "ignoreWidthInput100", "classIncludeInput", "classContainerInput", "readonly", "disable", "noBorder", "backgroundNone", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "classContainerBottomInput", "autoRemoveEmoji", "defaultHeight", "maxHeightTextArea", "minHeightTextArea", "ignoreShowError", "borderError", "iconLeftClass", "popoverContentIconLeft", "iconRightClass", "popoverContentIconRight", "zIndexPopoverContent", "unitsLeft", "configUnitLeft", "keySelectedUnitLeft", "unitsRight", "configUnitRight", "keySelectedUnitRight", "maxValueNumber", "minValueNumber", "ignoreContentLeft", "ignoreContentRight", "isBaselineStyle", "valuePatternShowError", "validPattern", "validRequired", "validMinLength", "validMinValue", "validMaxValue", "validMaxLength", "functionValid", "maxLength", "positionMessageErrorStartInput", "classInclude", "resize", "templateLeftBottomInput", "templateRightBottomInput", "onlyAcceptNegativeValue", "autoAddZeroLessThan10InTypeInt", "maxLengthNumberCount", "classMessageErrorInclude", "ignoreStopPropagationEvent", "ignoreUnitRightClassReadOnly", "paddingRightCustomSpecific", "focusTimeOut", "debounceTimeValidate"], outputs: ["itemChange", "outValueChange", "outSelect", "outIconLeft", "outIconRight", "outClickButtonLabel", "outSwitchEventLabel", "outLabelRightClick", "outEnterInputEvent", "outHeightAreaChange", "outFunctionsControl", "outFocusAndBlur", "outChangeValueByButtonUpDown"] }, { kind: "component", type: LibsUiComponentsColorPickerComponent, selector: "libs_ui-components-color_picker", inputs: ["customOptions", "noEmitEventColorWhenInitComponent"], outputs: ["outColorChange", "outColorChangeMultipleType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
125
125
|
}
|
|
126
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.
|
|
126
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsColorComponent, decorators: [{
|
|
127
127
|
type: Component,
|
|
128
128
|
args: [{ selector: 'libs_ui-components-inputs-color', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [TranslateModule, LowerCasePipe, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsButtonComponent, LibsUiComponentsInputsValidComponent, LibsUiComponentsColorPickerComponent], template: "<div\n class=\"w-full flex justify-between rounded-[4px] h-[32px]\"\n [class.libs-ui-border-general]=\"!showPopup()\"\n [class.libs-ui-border-primary-focus-general]=\"showPopup()\">\n <div\n LibsUiComponentsPopoverDirective\n class=\"w-full flex\"\n [mode]=\"'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [config]=\"{\n template: element,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex(),\n classInclude: 'w-[334px]',\n direction: 'left',\n directionDistance: 4,\n position: {\n mode: 'start',\n distance: 0,\n },\n }\"\n [flagMouse]=\"flagMouse()\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outFunctionsControl)=\"handlerFunctionControl($event)\">\n <div class=\"px-[16px] flex items-center\">\n <span\n class=\"w-[16px] h-[16px] rounded-[4px] libs-ui-border-general\"\n [style.background-color]=\"data().color\"></span>\n <span class=\"libs-ui-font-h5r ml-[8px]\">{{ data().color }}</span>\n </div>\n </div>\n <div class=\"w-[80px] shrink-0 libs-ui-border-left-general\">\n <libs_ui-components-inputs-valid\n [noBorder]=\"true\"\n [dataType]=\"'int'\"\n [minValueNumber]=\"0\"\n [maxValueNumber]=\"100\"\n [(item)]=\"data\"\n [fieldNameBind]=\"'opacity'\"\n [unitsRight]=\"[{ id: '%', label: '%' }]\"\n [keySelectedUnitRight]=\"'%'\"\n [classIncludeInput]=\"'text-center !p-0 !h-[28px] !min-h-[28px]'\"\n [configUnitRight]=\"{ classInclude: '!h-[30px]', fieldKey: 'id', fieldLabel: 'label' }\"\n (outValueChange)=\"handlerChangeOpacity()\" />\n </div>\n</div>\n\n<ng-template #element>\n <div class=\"p-[16px] w-full\">\n <div class=\"mb-[16px] grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n @for (color of colorDefault(); track $index; let i = $index) {\n <div class=\"py-[5px] px-[8px] relative\">\n @if ((color | lowercase) === (data().color | lowercase)) {\n <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n }\n <div\n class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n [style.background-color]=\"color\"\n (click)=\"handlerSelectColor($event, color)\"></div>\n </div>\n }\n </div>\n <div class=\"flex items-center justify-between\">\n <span class=\"libs-ui-font-h5m color-[#6a7383]\">{{ 'i18n_color_custom' | translate }}</span>\n <libs_ui-components-buttons-button\n [type]=\"'button-link-primary'\"\n [classIconLeft]=\"'libs-ui-icon-add'\"\n [label]=\"'i18n_add_new'\"\n [popover]=\"{\n mode: 'click-toggle',\n ignoreHiddenPopoverContentWhenMouseLeave: true,\n config: {\n template: colorPicker,\n whiteTheme: true,\n ignoreArrow: true,\n widthByParent: false,\n maxWidth: 500,\n maxHeight: 500,\n zIndex: zIndex() + 1,\n classInclude: 'w-[350px]',\n direction: 'left',\n directionDistance: -100,\n position: {\n mode: 'start',\n distance: -165,\n },\n },\n }\"\n [classInclude]=\"'py-[2px] px-[0]'\"\n (outPopoverEvent)=\"handlerPopoverAddColorEvent($event)\"\n (outFunctionsControl)=\"handlerAddColorFunctionControl($event)\" />\n </div>\n @if (colorCustom().length) {\n <div class=\"grid gap-y-[4px] gap-x-[2px] grid-cols-8\">\n @for (color of colorCustom(); track $index; let i = $index) {\n <div class=\"py-[5px] px-[8px] relative\">\n @if ((color | lowercase) === (data().color | lowercase)) {\n <div class=\"w-[30px] h-[30px] rounded-[30px] top-0 left-[3px] absolute libs-ui-border-primary-general !border-2\"></div>\n }\n <div\n class=\"w-[20px] h-[20px] rounded-[20px] cursor-pointer\"\n [class.libs-ui-border-general]=\"(color | lowercase) === '#ffffff'\"\n [style.background-color]=\"color\"\n (click)=\"handlerSelectColor($event, color)\"></div>\n </div>\n }\n </div>\n }\n </div>\n</ng-template>\n\n<ng-template #colorPicker>\n <div class=\"p-[16px] w-auto h-auto\">\n <libs_ui-components-color_picker\n [customOptions]=\"customOptions()\"\n (outColorChange)=\"handlerColorChange($event)\" />\n <div class=\"flex items-center justify-end pt-[16px]\">\n <libs_ui-components-buttons-button\n [label]=\"'i18n_cancel'\"\n [type]=\"'button-third'\"\n (outClick)=\"handlerAction($event, 'cancel')\" />\n <libs_ui-components-buttons-button\n [label]=\"'i18n_apply'\"\n [classInclude]=\"'ml-[16px]'\"\n (outClick)=\"handlerAction($event, 'apply')\" />\n </div>\n </div>\n</ng-template>\n" }]
|
|
129
129
|
}] });
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@libs-ui/components-inputs-color",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.322-0",
|
|
4
4
|
"peerDependencies": {
|
|
5
5
|
"@angular/common": ">=18.0.0",
|
|
6
6
|
"@angular/core": ">=18.0.0",
|
|
7
|
-
"@libs-ui/components-buttons-button": "0.2.
|
|
8
|
-
"@libs-ui/components-inputs-valid": "0.2.
|
|
9
|
-
"@libs-ui/components-popover": "0.2.
|
|
10
|
-
"@libs-ui/utils": "0.2.
|
|
7
|
+
"@libs-ui/components-buttons-button": "0.2.322-0",
|
|
8
|
+
"@libs-ui/components-inputs-valid": "0.2.322-0",
|
|
9
|
+
"@libs-ui/components-popover": "0.2.322-0",
|
|
10
|
+
"@libs-ui/utils": "0.2.322-0",
|
|
11
11
|
"@ngx-translate/core": "^15.0.0",
|
|
12
|
-
"@libs-ui/components-color-picker": "0.2.
|
|
12
|
+
"@libs-ui/components-color-picker": "0.2.322-0"
|
|
13
13
|
},
|
|
14
14
|
"sideEffects": false,
|
|
15
15
|
"module": "fesm2022/libs-ui-components-inputs-color.mjs",
|