@libs-ui/components-tags 0.2.321-0 → 0.2.323-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.
@@ -27,10 +27,10 @@ export class LibsUiComponentsTagsGetColorPipe {
27
27
  }
28
28
  return style;
29
29
  }
30
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
31
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, isStandalone: true, name: "LibsUiComponentsTagsGetColorPipe" });
30
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
31
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, isStandalone: true, name: "LibsUiComponentsTagsGetColorPipe" });
32
32
  }
33
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, decorators: [{
33
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, decorators: [{
34
34
  type: Pipe,
35
35
  args: [{
36
36
  name: 'LibsUiComponentsTagsGetColorPipe',
@@ -759,10 +759,10 @@ export class LibsUiComponentsTagsComponent {
759
759
  if (this.keySearchChangeSub())
760
760
  this.keySearchChangeSub()?.unsubscribe();
761
761
  }
762
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
763
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsTagsComponent, isStandalone: true, selector: "libs_ui-components-tags", inputs: { classIncludePopover: { classPropertyName: "classIncludePopover", publicName: "classIncludePopover", isSignal: true, isRequired: false, transformFunction: null }, enterAutoAddTagToList: { classPropertyName: "enterAutoAddTagToList", publicName: "enterAutoAddTagToList", isSignal: true, isRequired: false, transformFunction: null }, checkExitIsLabelInclude: { classPropertyName: "checkExitIsLabelInclude", publicName: "checkExitIsLabelInclude", isSignal: true, isRequired: false, transformFunction: null }, checkExitByFields: { classPropertyName: "checkExitByFields", publicName: "checkExitByFields", isSignal: true, isRequired: false, transformFunction: null }, parentBorderWidth: { classPropertyName: "parentBorderWidth", publicName: "parentBorderWidth", isSignal: true, isRequired: false, transformFunction: null }, functionCheckPermissionCreateTag: { classPropertyName: "functionCheckPermissionCreateTag", publicName: "functionCheckPermissionCreateTag", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDetailItemByIds: { classPropertyName: "httpRequestDetailItemByIds", publicName: "httpRequestDetailItemByIds", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, maxItemInput: { classPropertyName: "maxItemInput", publicName: "maxItemInput", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, defaultItemsSelected: { classPropertyName: "defaultItemsSelected", publicName: "defaultItemsSelected", isSignal: true, isRequired: false, transformFunction: null }, defaultKeysSelected: { classPropertyName: "defaultKeysSelected", publicName: "defaultKeysSelected", isSignal: true, isRequired: false, transformFunction: null }, listSearchConfig: { classPropertyName: "listSearchConfig", publicName: "listSearchConfig", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, listSearchPadding: { classPropertyName: "listSearchPadding", publicName: "listSearchPadding", isSignal: true, isRequired: false, transformFunction: null }, listDividerClassInclude: { classPropertyName: "listDividerClassInclude", publicName: "listDividerClassInclude", isSignal: true, isRequired: false, transformFunction: null }, listConfig: { classPropertyName: "listConfig", publicName: "listConfig", isSignal: true, isRequired: false, transformFunction: null }, listButtonsOther: { classPropertyName: "listButtonsOther", publicName: "listButtonsOther", isSignal: true, isRequired: false, transformFunction: null }, listClickExactly: { classPropertyName: "listClickExactly", publicName: "listClickExactly", isSignal: true, isRequired: false, transformFunction: null }, listBackgroundListCustom: { classPropertyName: "listBackgroundListCustom", publicName: "listBackgroundListCustom", isSignal: true, isRequired: false, transformFunction: null }, listMaxItemShow: { classPropertyName: "listMaxItemShow", publicName: "listMaxItemShow", isSignal: true, isRequired: false, transformFunction: null }, listHiddenInputSearchWhenHasSearchConfig: { classPropertyName: "listHiddenInputSearchWhenHasSearchConfig", publicName: "listHiddenInputSearchWhenHasSearchConfig", isSignal: true, isRequired: false, transformFunction: null }, removeTextSearchWhenBlurInput: { classPropertyName: "removeTextSearchWhenBlurInput", publicName: "removeTextSearchWhenBlurInput", isSignal: true, isRequired: false, transformFunction: null }, keysHiddenItem: { classPropertyName: "keysHiddenItem", publicName: "keysHiddenItem", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreEmitWhenSameDataSelected: { classPropertyName: "ignoreEmitWhenSameDataSelected", publicName: "ignoreEmitWhenSameDataSelected", isSignal: true, isRequired: false, transformFunction: null }, singleSelected: { classPropertyName: "singleSelected", publicName: "singleSelected", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTagItem: { classPropertyName: "classIncludeTagItem", publicName: "classIncludeTagItem", isSignal: true, isRequired: false, transformFunction: null }, classIconRemoveTagItem: { classPropertyName: "classIconRemoveTagItem", publicName: "classIconRemoveTagItem", isSignal: true, isRequired: false, transformFunction: null }, showBorderActiveWhenFocusInput: { classPropertyName: "showBorderActiveWhenFocusInput", publicName: "showBorderActiveWhenFocusInput", isSignal: true, isRequired: false, transformFunction: null }, fieldGetImage: { classPropertyName: "fieldGetImage", publicName: "fieldGetImage", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, linkImageError: { classPropertyName: "linkImageError", publicName: "linkImageError", isSignal: true, isRequired: false, transformFunction: null }, fieldGetTextAvatar: { classPropertyName: "fieldGetTextAvatar", publicName: "fieldGetTextAvatar", isSignal: true, isRequired: false, transformFunction: null }, classAvatarInclude: { classPropertyName: "classAvatarInclude", publicName: "classAvatarInclude", isSignal: true, isRequired: false, transformFunction: null }, getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, validMaxItemSelected: { classPropertyName: "validMaxItemSelected", publicName: "validMaxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, validPattern: { classPropertyName: "validPattern", publicName: "validPattern", isSignal: true, isRequired: false, transformFunction: null }, showListBellow: { classPropertyName: "showListBellow", publicName: "showListBellow", isSignal: true, isRequired: false, transformFunction: null }, hiddenInputWhenReadonly: { classPropertyName: "hiddenInputWhenReadonly", publicName: "hiddenInputWhenReadonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keysHiddenItem: "keysHiddenItemChange", outSelectMultiItem: "outSelectMultiItem", outValidEvent: "outValidEvent", outFunctionsControl: "outFunctionsControl", outClickButtonOther: "outClickButtonOther", outShowListEvent: "outShowListEvent", outChangStageFlagMouse: "outChangStageFlagMouse", outLoadingGetDetailSelected: "outLoadingGetDetailSelected" }, viewQueries: [{ propertyName: "tagsEl", first: true, predicate: ["tagsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n @if (labelConfig(); as labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"labelConfig.classInclude\"\n [labelLeft]=\"labelConfig.labelLeft\"\n [labelLeftClass]=\"labelConfig.labelLeftClass\"\n [required]=\"labelConfig.required\"\n [description]=\"labelConfig.description\"\n [descriptionClass]=\"labelConfig.descriptionClass\"\n [labelRight]=\"labelConfig.labelRight\"\n [labelRightClass]=\"labelConfig.labelRightClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [buttonsLeft]=\"labelConfig.buttonsLeft\"\n [buttonsRight]=\"labelConfig.buttonsRight\"\n [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable() || loading() || loadingDetail()\"\n [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable() || loading() || loadingDetail()\"\n [hasToggle]=\"labelConfig.hasToggle\"\n [toggleActive]=\"labelConfig.toggleActive\"\n [toggleActive]=\"labelConfig.toggleDisable || disable() || loading() || loadingDetail()\"\n [popover]=\"labelConfig.popover\"\n [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [limitLength]=\"labelConfig.limitLength\"\n [buttonsDescription]=\"labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"labelConfig.count\" />\n }\n <libs_ui-components-popover\n class=\"w-full h-full\"\n [ignoreShowPopover]=\"disable() || readonly() || !!config()?.ignoreShowList || false\"\n [ignoreCursorPointerModeLikeClick]=\"true\"\n [elementRefCustom]=\"tagsEl\"\n [mode]=\"!config()?.ignoreInput ? 'click' : 'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [flagMouse]=\"flagMouse()\"\n [config]=\"{\n animationConfig: config()?.animationConfig || {},\n zIndex: zIndex(),\n widthByParent: true,\n parentBorderWidth: parentBorderWidth() ?? 0,\n maxHeight: 2048,\n maxWidth: 2048,\n direction: config()?.directionList || 'bottom',\n directionDistance: 2,\n template: !showListBellow() ? listViewEl : undefined,\n whiteTheme: true,\n ignoreArrow: true,\n classInclude: 'rounded-[4px] ' + classIncludePopover() + (!listConfig()?.ignoreShowDataWhenNotSearch || keySearch() ? ' libs-ui-border-general' : ''),\n position: { mode: 'start', distance: 0 },\n }\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outEventPopoverContent)=\"handlerPopoverContentEvent($event)\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\">\n <div\n class=\"relative\"\n [class.cursor-pointer]=\"!disable() && !readonly()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.libs-ui-disable]=\"disable()\"\n [class.libs-ui-disable-background]=\"disable()\">\n @if (config()?.uiLikeDropdown) {\n <i\n class=\"flex text-[16px] absolute right-[16px] top-[8px] libs-ui-icon-move-right rotate-90 z-[1]\"\n [class.text-[#6a7383]]=\"!readonly() && !disable()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n <div\n #tagsEl\n [class]=\"'libs-ui-tags ' + (config()?.classInclude || '') + (readonly() ? config()?.classCustomWhenReadOnly || ' libs-ui-readonly' : '')\"\n [class.libs-ui-tags-not-popup]=\"(!showList() && !showBorderActiveWhenFocusInput()) || (!focus() && showBorderActiveWhenFocusInput())\"\n [class.libs-ui-tags-error]=\"!!error() && !config()?.ignoreShowError\"\n [class.!pr-[32px]]=\"config()?.uiLikeDropdown\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.libs-ui-disable-background]=\"disable()\"\n [class.libs-ui-border-primary-general]=\"focus() && showBorderActiveWhenFocusInput()\"\n LibsUiComponentsClickOutsideDirective\n LibsUiComponentsScrollOverlayDirective\n (outOutside)=\"handlerClickOutside($event)\">\n @for (item of itemsSelected(); track item[fieldKey()]) {\n <div\n LibsUiComponentsPopoverDirective\n [type]=\"item?.tooltip?.type || 'other'\"\n [config]=\"item?.tooltip?.config || { zIndex: zIndex() + 2 }\"\n [ignoreShowPopover]=\"!item?.tooltip || item.tooltip.ignoreShowPopover\"\n [ngStyle]=\"item?.bullet || item?.ngStyles\"\n [class]=\"classIncludeTagItem() || ''\"\n [class.libs-ui-tags-readonly]=\"item.disableItem\"\n [class.libs-ui-tags-item]=\"!item.disableItem\"\n [class.cursor-default]=\"disable() || readonly()\"\n (pointerdown)=\"handlerClickTagItem($event)\">\n @if (fieldGetImage() || config()?.fieldGetImage; as fieldGetImage) {\n <div class=\"flex items-center justify-center h-full\">\n <libs_ui-components-avatar\n [classInclude]=\"classAvatarInclude() || config()?.classAvatarInclude || 'mr-[8px]'\"\n [size]=\"imageSize() || config()?.imageSize\"\n [linkAvatar]=\"item[fieldGetImage]\"\n [linkAvatarError]=\"linkImageError() || config()?.linkImageError\"\n [idGenColor]=\"item[fieldGetTextAvatar() || config()?.fieldGetTextAvatar || '']\"\n [getLastTextAfterSpace]=\"getLastTextAfterSpace() || config()?.getLastTextAfterSpace\"\n [textAvatar]=\"item[fieldGetTextAvatar() || config()?.fieldGetTextAvatar || 'user']\" />\n </div>\n }\n @let constHtmlLabel = item.fieldLabel || ' ';\n <span\n class=\"libs-ui-font-h6r\"\n [innerHtml]=\"constHtmlLabel | translate\"></span>\n @if (!disable() && !item.disableItem && !readonly()) {\n <div class=\"flex items-center justify-center ml-[8px]\">\n @let constHtmlStyle = item?.bullet || item?.ngStyles;\n <i\n #iconCloseEl\n [attr.specificStyle]=\"!!constHtmlStyle\"\n [class]=\"'flex text-[16px] ' + (classIconRemoveTagItem() || 'libs-ui-icon-close')\"\n [class.cursor-pointer]=\"!disable() && !loading() && !loadingDetail()\"\n [class.pointer-events-none]=\"disable() || loading() || loadingDetail()\"\n [ngStyle]=\"constHtmlStyle | LibsUiComponentsTagsGetColorPipe: iconCloseEl\"\n (pointerdown)=\"handlerRemoveItemSelected($event, item)\"></i>\n </div>\n }\n </div>\n }\n @if (!singleSelected() || (singleSelected() && !itemsSelected().length)) {\n @if (!config()?.ignoreInput && !config()?.uiLikeDropdown && (!hiddenInputWhenReadonly() || (hiddenInputWhenReadonly() && !readonly()))) {\n <libs_ui-components-inputs-input\n class=\"grow\"\n [class.mb-[4px]]=\"itemsSelected().length\"\n [classInclude]=\"'w-full bg-transparent ' + (config()?.classInputInclude || 'px-[4px] min-w-[30px]')\"\n [defaultHeight]=\"24\"\n [placeholder]=\"readonly() ? '' : placeholder() || 'i18n_import_content'\"\n [noBorder]=\"true\"\n [(value)]=\"valueInput\"\n [disable]=\"disable() || loading() || loadingDetail() || disableWhenMaxItem()\"\n [readonly]=\"readonly()\"\n (outEnterEvent)=\"handlerEnterEvent()\"\n (valueChange)=\"handlerValueChangeSearch($event)\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlurEvent($event)\"\n (outFunctionsControl)=\"handlerInputFunctionControl($event)\" />\n }\n @if (config()?.ignoreInput && config()?.uiLikeDropdown && !itemsSelected().length) {\n <div\n class=\"flex items-center pb-[4px] pt-[2px] ml-[11px] libs-ui-font-h5r\"\n [class.text-[#9ca2ad]]=\"disable()\">\n @let constHtmlPlaceholder = placeholder() || 'i18n_select_value';\n {{ constHtmlPlaceholder | translate }}\n </div>\n }\n }\n </div>\n @if (error() && !config()?.ignoreShowError) {\n <div class=\"text-[#ee2d41] libs-ui-font-h7r mt-[8px]\">\n @let constHtmlMessage = error()?.message || ' ';\n {{ constHtmlMessage | translate: error()?.interpolateParams || {} }}\n </div>\n }\n </div>\n </libs_ui-components-popover>\n</div>\n@if (showListBellow()) {\n <ng-container *ngTemplateOutlet=\"listViewEl\"></ng-container>\n}\n<ng-template #listViewEl>\n @if (listConfig(); as listConfig) {\n <libs_ui-components-list\n [searchConfig]=\"listSearchConfig() || { classInclude: 'hidden', iconLeftClass: 'hidden' }\"\n [isSearchOnline]=\"isSearchOnline()\"\n [zIndex]=\"zIndex()\"\n [keySearch]=\"keySearch()\"\n [config]=\"listConfig\"\n [disable]=\"disable() || loadingDetail() || disableWhenMaxItem()\"\n [searchPadding]=\"listSearchPadding()\"\n [maxItemShow]=\"listMaxItemShow() || 6\"\n [multiKeySelected]=\"keysSelected()\"\n [clickExactly]=\"false\"\n [keysHiddenItem]=\"keysHiddenItem()\"\n [keysDisableItem]=\"listKeyDisable()\"\n [dividerClassInclude]=\"listDividerClassInclude() ?? 'hidden'\"\n [buttonsOther]=\"listButtonsOther()\"\n [backgroundListCustom]=\"listBackgroundListCustom()\"\n [functionGetItemsAutoAddList]=\"functionGetItemAutoAddList()\"\n [hiddenInputSearch]=\"listHiddenInputSearchWhenHasSearchConfig()\"\n (outFunctionsControl)=\"handlerFunctionControlList($event)\"\n (outSelectKey)=\"handlerSelectedKey($event)\"\n (outSelectMultiKey)=\"handlerSelectMultiKey($event)\"\n (outChangeView)=\"handlerDataChange($event)\"\n (outClickButtonOther)=\"handlerClickButtonOther($event)\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outLoading)=\"handlerLoading($event)\" />\n }\n</ng-template>\n", styles: [".libs-ui-tags{position:relative;display:flex;flex-wrap:wrap;border:1px solid var(--libs-ui-color-default, #226ff5);max-height:100px;overflow:auto;border-radius:4px;padding:3px 0 0 4px;min-height:32px}.libs-ui-tags-not-popup{border:1px solid #e6e7ea}.libs-ui-tags-error{border-color:#ff5454}.libs-ui-tags .libs-ui-tags-item{display:flex;align-items:center;margin:0 4px 3px 0;padding:4px 8px;color:var(--libs-ui-color-default, #226ff5);border-radius:20px;background-color:var(--libs-ui-color-light-2, #e9f1fe);word-break:break-word!important;overflow-wrap:break-word!important;cursor:default}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-],.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]{border-radius:50%}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:before,.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]:before{border-radius:50%;font-size:16px;color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:hover:before,.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]:hover:before{background:var(--libs-ui-color-light-6, #d3e2fd)}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:active:before,.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]:active:before{background:var(--libs-ui-color-light-5, #bdd4fc)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-],.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]{border-radius:50%}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]:before,.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]:before{border-radius:50%;font-size:16px;color:var(--libs-ui-tags-item-icon-default)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]:hover:before,.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]:hover:before{color:var(--libs-ui-tags-item-icon-hover);background:var(--libs-ui-tags-item-icon-background-hover)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]:active:before,.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]:active:before{color:var(--libs-ui-tags-item-icon-active);background:var(--libs-ui-tags-item-icon-background-active)}.libs-ui-tags-disable{background:#f8f9fa;color:#9ca2ad}.libs-ui-tags-readonly{background:#f1ebfd;color:#7239ea;display:flex;align-items:center;margin:0 4px 4px 0;padding:4px 8px;border-radius:20px;word-break:break-word!important;overflow-wrap:break-word!important}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: LibsUiComponentsClickOutsideDirective, selector: "[LibsUiComponentsClickOutsideDirective]", outputs: ["outOutside", "outInSide"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { 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: 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: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "pipe", type: LibsUiComponentsTagsGetColorPipe, name: "LibsUiComponentsTagsGetColorPipe" }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
762
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
763
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTagsComponent, isStandalone: true, selector: "libs_ui-components-tags", inputs: { classIncludePopover: { classPropertyName: "classIncludePopover", publicName: "classIncludePopover", isSignal: true, isRequired: false, transformFunction: null }, enterAutoAddTagToList: { classPropertyName: "enterAutoAddTagToList", publicName: "enterAutoAddTagToList", isSignal: true, isRequired: false, transformFunction: null }, checkExitIsLabelInclude: { classPropertyName: "checkExitIsLabelInclude", publicName: "checkExitIsLabelInclude", isSignal: true, isRequired: false, transformFunction: null }, checkExitByFields: { classPropertyName: "checkExitByFields", publicName: "checkExitByFields", isSignal: true, isRequired: false, transformFunction: null }, parentBorderWidth: { classPropertyName: "parentBorderWidth", publicName: "parentBorderWidth", isSignal: true, isRequired: false, transformFunction: null }, functionCheckPermissionCreateTag: { classPropertyName: "functionCheckPermissionCreateTag", publicName: "functionCheckPermissionCreateTag", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDetailItemByIds: { classPropertyName: "httpRequestDetailItemByIds", publicName: "httpRequestDetailItemByIds", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, maxItemInput: { classPropertyName: "maxItemInput", publicName: "maxItemInput", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, defaultItemsSelected: { classPropertyName: "defaultItemsSelected", publicName: "defaultItemsSelected", isSignal: true, isRequired: false, transformFunction: null }, defaultKeysSelected: { classPropertyName: "defaultKeysSelected", publicName: "defaultKeysSelected", isSignal: true, isRequired: false, transformFunction: null }, listSearchConfig: { classPropertyName: "listSearchConfig", publicName: "listSearchConfig", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, listSearchPadding: { classPropertyName: "listSearchPadding", publicName: "listSearchPadding", isSignal: true, isRequired: false, transformFunction: null }, listDividerClassInclude: { classPropertyName: "listDividerClassInclude", publicName: "listDividerClassInclude", isSignal: true, isRequired: false, transformFunction: null }, listConfig: { classPropertyName: "listConfig", publicName: "listConfig", isSignal: true, isRequired: false, transformFunction: null }, listButtonsOther: { classPropertyName: "listButtonsOther", publicName: "listButtonsOther", isSignal: true, isRequired: false, transformFunction: null }, listClickExactly: { classPropertyName: "listClickExactly", publicName: "listClickExactly", isSignal: true, isRequired: false, transformFunction: null }, listBackgroundListCustom: { classPropertyName: "listBackgroundListCustom", publicName: "listBackgroundListCustom", isSignal: true, isRequired: false, transformFunction: null }, listMaxItemShow: { classPropertyName: "listMaxItemShow", publicName: "listMaxItemShow", isSignal: true, isRequired: false, transformFunction: null }, listHiddenInputSearchWhenHasSearchConfig: { classPropertyName: "listHiddenInputSearchWhenHasSearchConfig", publicName: "listHiddenInputSearchWhenHasSearchConfig", isSignal: true, isRequired: false, transformFunction: null }, removeTextSearchWhenBlurInput: { classPropertyName: "removeTextSearchWhenBlurInput", publicName: "removeTextSearchWhenBlurInput", isSignal: true, isRequired: false, transformFunction: null }, keysHiddenItem: { classPropertyName: "keysHiddenItem", publicName: "keysHiddenItem", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreEmitWhenSameDataSelected: { classPropertyName: "ignoreEmitWhenSameDataSelected", publicName: "ignoreEmitWhenSameDataSelected", isSignal: true, isRequired: false, transformFunction: null }, singleSelected: { classPropertyName: "singleSelected", publicName: "singleSelected", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTagItem: { classPropertyName: "classIncludeTagItem", publicName: "classIncludeTagItem", isSignal: true, isRequired: false, transformFunction: null }, classIconRemoveTagItem: { classPropertyName: "classIconRemoveTagItem", publicName: "classIconRemoveTagItem", isSignal: true, isRequired: false, transformFunction: null }, showBorderActiveWhenFocusInput: { classPropertyName: "showBorderActiveWhenFocusInput", publicName: "showBorderActiveWhenFocusInput", isSignal: true, isRequired: false, transformFunction: null }, fieldGetImage: { classPropertyName: "fieldGetImage", publicName: "fieldGetImage", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, linkImageError: { classPropertyName: "linkImageError", publicName: "linkImageError", isSignal: true, isRequired: false, transformFunction: null }, fieldGetTextAvatar: { classPropertyName: "fieldGetTextAvatar", publicName: "fieldGetTextAvatar", isSignal: true, isRequired: false, transformFunction: null }, classAvatarInclude: { classPropertyName: "classAvatarInclude", publicName: "classAvatarInclude", isSignal: true, isRequired: false, transformFunction: null }, getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, validMaxItemSelected: { classPropertyName: "validMaxItemSelected", publicName: "validMaxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, validPattern: { classPropertyName: "validPattern", publicName: "validPattern", isSignal: true, isRequired: false, transformFunction: null }, showListBellow: { classPropertyName: "showListBellow", publicName: "showListBellow", isSignal: true, isRequired: false, transformFunction: null }, hiddenInputWhenReadonly: { classPropertyName: "hiddenInputWhenReadonly", publicName: "hiddenInputWhenReadonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keysHiddenItem: "keysHiddenItemChange", outSelectMultiItem: "outSelectMultiItem", outValidEvent: "outValidEvent", outFunctionsControl: "outFunctionsControl", outClickButtonOther: "outClickButtonOther", outShowListEvent: "outShowListEvent", outChangStageFlagMouse: "outChangStageFlagMouse", outLoadingGetDetailSelected: "outLoadingGetDetailSelected" }, viewQueries: [{ propertyName: "tagsEl", first: true, predicate: ["tagsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n @if (labelConfig(); as labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"labelConfig.classInclude\"\n [labelLeft]=\"labelConfig.labelLeft\"\n [labelLeftClass]=\"labelConfig.labelLeftClass\"\n [required]=\"labelConfig.required\"\n [description]=\"labelConfig.description\"\n [descriptionClass]=\"labelConfig.descriptionClass\"\n [labelRight]=\"labelConfig.labelRight\"\n [labelRightClass]=\"labelConfig.labelRightClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [buttonsLeft]=\"labelConfig.buttonsLeft\"\n [buttonsRight]=\"labelConfig.buttonsRight\"\n [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable() || loading() || loadingDetail()\"\n [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable() || loading() || loadingDetail()\"\n [hasToggle]=\"labelConfig.hasToggle\"\n [toggleActive]=\"labelConfig.toggleActive\"\n [toggleActive]=\"labelConfig.toggleDisable || disable() || loading() || loadingDetail()\"\n [popover]=\"labelConfig.popover\"\n [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [limitLength]=\"labelConfig.limitLength\"\n [buttonsDescription]=\"labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"labelConfig.count\" />\n }\n <libs_ui-components-popover\n class=\"w-full h-full\"\n [ignoreShowPopover]=\"disable() || readonly() || !!config()?.ignoreShowList || false\"\n [ignoreCursorPointerModeLikeClick]=\"true\"\n [elementRefCustom]=\"tagsEl\"\n [mode]=\"!config()?.ignoreInput ? 'click' : 'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [flagMouse]=\"flagMouse()\"\n [config]=\"{\n animationConfig: config()?.animationConfig || {},\n zIndex: zIndex(),\n widthByParent: true,\n parentBorderWidth: parentBorderWidth() ?? 0,\n maxHeight: 2048,\n maxWidth: 2048,\n direction: config()?.directionList || 'bottom',\n directionDistance: 2,\n template: !showListBellow() ? listViewEl : undefined,\n whiteTheme: true,\n ignoreArrow: true,\n classInclude: 'rounded-[4px] ' + classIncludePopover() + (!listConfig()?.ignoreShowDataWhenNotSearch || keySearch() ? ' libs-ui-border-general' : ''),\n position: { mode: 'start', distance: 0 },\n }\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outEventPopoverContent)=\"handlerPopoverContentEvent($event)\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\">\n <div\n class=\"relative\"\n [class.cursor-pointer]=\"!disable() && !readonly()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.libs-ui-disable]=\"disable()\"\n [class.libs-ui-disable-background]=\"disable()\">\n @if (config()?.uiLikeDropdown) {\n <i\n class=\"flex text-[16px] absolute right-[16px] top-[8px] libs-ui-icon-move-right rotate-90 z-[1]\"\n [class.text-[#6a7383]]=\"!readonly() && !disable()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n <div\n #tagsEl\n [class]=\"'libs-ui-tags ' + (config()?.classInclude || '') + (readonly() ? config()?.classCustomWhenReadOnly || ' libs-ui-readonly' : '')\"\n [class.libs-ui-tags-not-popup]=\"(!showList() && !showBorderActiveWhenFocusInput()) || (!focus() && showBorderActiveWhenFocusInput())\"\n [class.libs-ui-tags-error]=\"!!error() && !config()?.ignoreShowError\"\n [class.!pr-[32px]]=\"config()?.uiLikeDropdown\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.libs-ui-disable-background]=\"disable()\"\n [class.libs-ui-border-primary-general]=\"focus() && showBorderActiveWhenFocusInput()\"\n LibsUiComponentsClickOutsideDirective\n LibsUiComponentsScrollOverlayDirective\n (outOutside)=\"handlerClickOutside($event)\">\n @for (item of itemsSelected(); track item[fieldKey()]) {\n <div\n LibsUiComponentsPopoverDirective\n [type]=\"item?.tooltip?.type || 'other'\"\n [config]=\"item?.tooltip?.config || { zIndex: zIndex() + 2 }\"\n [ignoreShowPopover]=\"!item?.tooltip || item.tooltip.ignoreShowPopover\"\n [ngStyle]=\"item?.bullet || item?.ngStyles\"\n [class]=\"classIncludeTagItem() || ''\"\n [class.libs-ui-tags-readonly]=\"item.disableItem\"\n [class.libs-ui-tags-item]=\"!item.disableItem\"\n [class.cursor-default]=\"disable() || readonly()\"\n (pointerdown)=\"handlerClickTagItem($event)\">\n @if (fieldGetImage() || config()?.fieldGetImage; as fieldGetImage) {\n <div class=\"flex items-center justify-center h-full\">\n <libs_ui-components-avatar\n [classInclude]=\"classAvatarInclude() || config()?.classAvatarInclude || 'mr-[8px]'\"\n [size]=\"imageSize() || config()?.imageSize\"\n [linkAvatar]=\"item[fieldGetImage]\"\n [linkAvatarError]=\"linkImageError() || config()?.linkImageError\"\n [idGenColor]=\"item[fieldGetTextAvatar() || config()?.fieldGetTextAvatar || '']\"\n [getLastTextAfterSpace]=\"getLastTextAfterSpace() || config()?.getLastTextAfterSpace\"\n [textAvatar]=\"item[fieldGetTextAvatar() || config()?.fieldGetTextAvatar || 'user']\" />\n </div>\n }\n @let constHtmlLabel = item.fieldLabel || ' ';\n <span\n class=\"libs-ui-font-h6r\"\n [innerHtml]=\"constHtmlLabel | translate\"></span>\n @if (!disable() && !item.disableItem && !readonly()) {\n <div class=\"flex items-center justify-center ml-[8px]\">\n @let constHtmlStyle = item?.bullet || item?.ngStyles;\n <i\n #iconCloseEl\n [attr.specificStyle]=\"!!constHtmlStyle\"\n [class]=\"'flex text-[16px] ' + (classIconRemoveTagItem() || 'libs-ui-icon-close')\"\n [class.cursor-pointer]=\"!disable() && !loading() && !loadingDetail()\"\n [class.pointer-events-none]=\"disable() || loading() || loadingDetail()\"\n [ngStyle]=\"constHtmlStyle | LibsUiComponentsTagsGetColorPipe: iconCloseEl\"\n (pointerdown)=\"handlerRemoveItemSelected($event, item)\"></i>\n </div>\n }\n </div>\n }\n @if (!singleSelected() || (singleSelected() && !itemsSelected().length)) {\n @if (!config()?.ignoreInput && !config()?.uiLikeDropdown && (!hiddenInputWhenReadonly() || (hiddenInputWhenReadonly() && !readonly()))) {\n <libs_ui-components-inputs-input\n class=\"grow\"\n [class.mb-[4px]]=\"itemsSelected().length\"\n [classInclude]=\"'w-full bg-transparent ' + (config()?.classInputInclude || 'px-[4px] min-w-[30px]')\"\n [defaultHeight]=\"24\"\n [placeholder]=\"readonly() ? '' : placeholder() || 'i18n_import_content'\"\n [noBorder]=\"true\"\n [(value)]=\"valueInput\"\n [disable]=\"disable() || loading() || loadingDetail() || disableWhenMaxItem()\"\n [readonly]=\"readonly()\"\n (outEnterEvent)=\"handlerEnterEvent()\"\n (valueChange)=\"handlerValueChangeSearch($event)\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlurEvent($event)\"\n (outFunctionsControl)=\"handlerInputFunctionControl($event)\" />\n }\n @if (config()?.ignoreInput && config()?.uiLikeDropdown && !itemsSelected().length) {\n <div\n class=\"flex items-center pb-[4px] pt-[2px] ml-[11px] libs-ui-font-h5r\"\n [class.text-[#9ca2ad]]=\"disable()\">\n @let constHtmlPlaceholder = placeholder() || 'i18n_select_value';\n {{ constHtmlPlaceholder | translate }}\n </div>\n }\n }\n </div>\n @if (error() && !config()?.ignoreShowError) {\n <div class=\"text-[#ee2d41] libs-ui-font-h7r mt-[8px]\">\n @let constHtmlMessage = error()?.message || ' ';\n {{ constHtmlMessage | translate: error()?.interpolateParams || {} }}\n </div>\n }\n </div>\n </libs_ui-components-popover>\n</div>\n@if (showListBellow()) {\n <ng-container *ngTemplateOutlet=\"listViewEl\"></ng-container>\n}\n<ng-template #listViewEl>\n @if (listConfig(); as listConfig) {\n <libs_ui-components-list\n [searchConfig]=\"listSearchConfig() || { classInclude: 'hidden', iconLeftClass: 'hidden' }\"\n [isSearchOnline]=\"isSearchOnline()\"\n [zIndex]=\"zIndex()\"\n [keySearch]=\"keySearch()\"\n [config]=\"listConfig\"\n [disable]=\"disable() || loadingDetail() || disableWhenMaxItem()\"\n [searchPadding]=\"listSearchPadding()\"\n [maxItemShow]=\"listMaxItemShow() || 6\"\n [multiKeySelected]=\"keysSelected()\"\n [clickExactly]=\"false\"\n [keysHiddenItem]=\"keysHiddenItem()\"\n [keysDisableItem]=\"listKeyDisable()\"\n [dividerClassInclude]=\"listDividerClassInclude() ?? 'hidden'\"\n [buttonsOther]=\"listButtonsOther()\"\n [backgroundListCustom]=\"listBackgroundListCustom()\"\n [functionGetItemsAutoAddList]=\"functionGetItemAutoAddList()\"\n [hiddenInputSearch]=\"listHiddenInputSearchWhenHasSearchConfig()\"\n (outFunctionsControl)=\"handlerFunctionControlList($event)\"\n (outSelectKey)=\"handlerSelectedKey($event)\"\n (outSelectMultiKey)=\"handlerSelectMultiKey($event)\"\n (outChangeView)=\"handlerDataChange($event)\"\n (outClickButtonOther)=\"handlerClickButtonOther($event)\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outLoading)=\"handlerLoading($event)\" />\n }\n</ng-template>\n", styles: [".libs-ui-tags{position:relative;display:flex;flex-wrap:wrap;border:1px solid var(--libs-ui-color-default, #226ff5);max-height:100px;overflow:auto;border-radius:4px;padding:3px 0 0 4px;min-height:32px}.libs-ui-tags-not-popup{border:1px solid #e6e7ea}.libs-ui-tags-error{border-color:#ff5454}.libs-ui-tags .libs-ui-tags-item{display:flex;align-items:center;margin:0 4px 3px 0;padding:4px 8px;color:var(--libs-ui-color-default, #226ff5);border-radius:20px;background-color:var(--libs-ui-color-light-2, #e9f1fe);word-break:break-word!important;overflow-wrap:break-word!important;cursor:default}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-],.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]{border-radius:50%}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:before,.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]:before{border-radius:50%;font-size:16px;color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:hover:before,.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]:hover:before{background:var(--libs-ui-color-light-6, #d3e2fd)}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:active:before,.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]:active:before{background:var(--libs-ui-color-light-5, #bdd4fc)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-],.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]{border-radius:50%}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]:before,.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]:before{border-radius:50%;font-size:16px;color:var(--libs-ui-tags-item-icon-default)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]:hover:before,.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]:hover:before{color:var(--libs-ui-tags-item-icon-hover);background:var(--libs-ui-tags-item-icon-background-hover)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]:active:before,.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]:active:before{color:var(--libs-ui-tags-item-icon-active);background:var(--libs-ui-tags-item-icon-background-active)}.libs-ui-tags-disable{background:#f8f9fa;color:#9ca2ad}.libs-ui-tags-readonly{background:#f1ebfd;color:#7239ea;display:flex;align-items:center;margin:0 4px 4px 0;padding:4px 8px;border-radius:20px;word-break:break-word!important;overflow-wrap:break-word!important}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: LibsUiComponentsClickOutsideDirective, selector: "[LibsUiComponentsClickOutsideDirective]", outputs: ["outOutside", "outInSide"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { 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: 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: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "pipe", type: LibsUiComponentsTagsGetColorPipe, name: "LibsUiComponentsTagsGetColorPipe" }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
764
764
  }
765
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsComponent, decorators: [{
765
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTagsComponent, decorators: [{
766
766
  type: Component,
767
767
  args: [{ selector: 'libs_ui-components-tags', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
768
768
  TranslateModule,
@@ -40,10 +40,10 @@ class LibsUiComponentsTagsGetColorPipe {
40
40
  }
41
41
  return style;
42
42
  }
43
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
44
- static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, isStandalone: true, name: "LibsUiComponentsTagsGetColorPipe" });
43
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
44
+ static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, isStandalone: true, name: "LibsUiComponentsTagsGetColorPipe" });
45
45
  }
46
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, decorators: [{
46
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, decorators: [{
47
47
  type: Pipe,
48
48
  args: [{
49
49
  name: 'LibsUiComponentsTagsGetColorPipe',
@@ -796,10 +796,10 @@ class LibsUiComponentsTagsComponent {
796
796
  if (this.keySearchChangeSub())
797
797
  this.keySearchChangeSub()?.unsubscribe();
798
798
  }
799
- static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
800
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsTagsComponent, isStandalone: true, selector: "libs_ui-components-tags", inputs: { classIncludePopover: { classPropertyName: "classIncludePopover", publicName: "classIncludePopover", isSignal: true, isRequired: false, transformFunction: null }, enterAutoAddTagToList: { classPropertyName: "enterAutoAddTagToList", publicName: "enterAutoAddTagToList", isSignal: true, isRequired: false, transformFunction: null }, checkExitIsLabelInclude: { classPropertyName: "checkExitIsLabelInclude", publicName: "checkExitIsLabelInclude", isSignal: true, isRequired: false, transformFunction: null }, checkExitByFields: { classPropertyName: "checkExitByFields", publicName: "checkExitByFields", isSignal: true, isRequired: false, transformFunction: null }, parentBorderWidth: { classPropertyName: "parentBorderWidth", publicName: "parentBorderWidth", isSignal: true, isRequired: false, transformFunction: null }, functionCheckPermissionCreateTag: { classPropertyName: "functionCheckPermissionCreateTag", publicName: "functionCheckPermissionCreateTag", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDetailItemByIds: { classPropertyName: "httpRequestDetailItemByIds", publicName: "httpRequestDetailItemByIds", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, maxItemInput: { classPropertyName: "maxItemInput", publicName: "maxItemInput", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, defaultItemsSelected: { classPropertyName: "defaultItemsSelected", publicName: "defaultItemsSelected", isSignal: true, isRequired: false, transformFunction: null }, defaultKeysSelected: { classPropertyName: "defaultKeysSelected", publicName: "defaultKeysSelected", isSignal: true, isRequired: false, transformFunction: null }, listSearchConfig: { classPropertyName: "listSearchConfig", publicName: "listSearchConfig", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, listSearchPadding: { classPropertyName: "listSearchPadding", publicName: "listSearchPadding", isSignal: true, isRequired: false, transformFunction: null }, listDividerClassInclude: { classPropertyName: "listDividerClassInclude", publicName: "listDividerClassInclude", isSignal: true, isRequired: false, transformFunction: null }, listConfig: { classPropertyName: "listConfig", publicName: "listConfig", isSignal: true, isRequired: false, transformFunction: null }, listButtonsOther: { classPropertyName: "listButtonsOther", publicName: "listButtonsOther", isSignal: true, isRequired: false, transformFunction: null }, listClickExactly: { classPropertyName: "listClickExactly", publicName: "listClickExactly", isSignal: true, isRequired: false, transformFunction: null }, listBackgroundListCustom: { classPropertyName: "listBackgroundListCustom", publicName: "listBackgroundListCustom", isSignal: true, isRequired: false, transformFunction: null }, listMaxItemShow: { classPropertyName: "listMaxItemShow", publicName: "listMaxItemShow", isSignal: true, isRequired: false, transformFunction: null }, listHiddenInputSearchWhenHasSearchConfig: { classPropertyName: "listHiddenInputSearchWhenHasSearchConfig", publicName: "listHiddenInputSearchWhenHasSearchConfig", isSignal: true, isRequired: false, transformFunction: null }, removeTextSearchWhenBlurInput: { classPropertyName: "removeTextSearchWhenBlurInput", publicName: "removeTextSearchWhenBlurInput", isSignal: true, isRequired: false, transformFunction: null }, keysHiddenItem: { classPropertyName: "keysHiddenItem", publicName: "keysHiddenItem", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreEmitWhenSameDataSelected: { classPropertyName: "ignoreEmitWhenSameDataSelected", publicName: "ignoreEmitWhenSameDataSelected", isSignal: true, isRequired: false, transformFunction: null }, singleSelected: { classPropertyName: "singleSelected", publicName: "singleSelected", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTagItem: { classPropertyName: "classIncludeTagItem", publicName: "classIncludeTagItem", isSignal: true, isRequired: false, transformFunction: null }, classIconRemoveTagItem: { classPropertyName: "classIconRemoveTagItem", publicName: "classIconRemoveTagItem", isSignal: true, isRequired: false, transformFunction: null }, showBorderActiveWhenFocusInput: { classPropertyName: "showBorderActiveWhenFocusInput", publicName: "showBorderActiveWhenFocusInput", isSignal: true, isRequired: false, transformFunction: null }, fieldGetImage: { classPropertyName: "fieldGetImage", publicName: "fieldGetImage", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, linkImageError: { classPropertyName: "linkImageError", publicName: "linkImageError", isSignal: true, isRequired: false, transformFunction: null }, fieldGetTextAvatar: { classPropertyName: "fieldGetTextAvatar", publicName: "fieldGetTextAvatar", isSignal: true, isRequired: false, transformFunction: null }, classAvatarInclude: { classPropertyName: "classAvatarInclude", publicName: "classAvatarInclude", isSignal: true, isRequired: false, transformFunction: null }, getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, validMaxItemSelected: { classPropertyName: "validMaxItemSelected", publicName: "validMaxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, validPattern: { classPropertyName: "validPattern", publicName: "validPattern", isSignal: true, isRequired: false, transformFunction: null }, showListBellow: { classPropertyName: "showListBellow", publicName: "showListBellow", isSignal: true, isRequired: false, transformFunction: null }, hiddenInputWhenReadonly: { classPropertyName: "hiddenInputWhenReadonly", publicName: "hiddenInputWhenReadonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keysHiddenItem: "keysHiddenItemChange", outSelectMultiItem: "outSelectMultiItem", outValidEvent: "outValidEvent", outFunctionsControl: "outFunctionsControl", outClickButtonOther: "outClickButtonOther", outShowListEvent: "outShowListEvent", outChangStageFlagMouse: "outChangStageFlagMouse", outLoadingGetDetailSelected: "outLoadingGetDetailSelected" }, viewQueries: [{ propertyName: "tagsEl", first: true, predicate: ["tagsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n @if (labelConfig(); as labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"labelConfig.classInclude\"\n [labelLeft]=\"labelConfig.labelLeft\"\n [labelLeftClass]=\"labelConfig.labelLeftClass\"\n [required]=\"labelConfig.required\"\n [description]=\"labelConfig.description\"\n [descriptionClass]=\"labelConfig.descriptionClass\"\n [labelRight]=\"labelConfig.labelRight\"\n [labelRightClass]=\"labelConfig.labelRightClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [buttonsLeft]=\"labelConfig.buttonsLeft\"\n [buttonsRight]=\"labelConfig.buttonsRight\"\n [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable() || loading() || loadingDetail()\"\n [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable() || loading() || loadingDetail()\"\n [hasToggle]=\"labelConfig.hasToggle\"\n [toggleActive]=\"labelConfig.toggleActive\"\n [toggleActive]=\"labelConfig.toggleDisable || disable() || loading() || loadingDetail()\"\n [popover]=\"labelConfig.popover\"\n [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [limitLength]=\"labelConfig.limitLength\"\n [buttonsDescription]=\"labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"labelConfig.count\" />\n }\n <libs_ui-components-popover\n class=\"w-full h-full\"\n [ignoreShowPopover]=\"disable() || readonly() || !!config()?.ignoreShowList || false\"\n [ignoreCursorPointerModeLikeClick]=\"true\"\n [elementRefCustom]=\"tagsEl\"\n [mode]=\"!config()?.ignoreInput ? 'click' : 'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [flagMouse]=\"flagMouse()\"\n [config]=\"{\n animationConfig: config()?.animationConfig || {},\n zIndex: zIndex(),\n widthByParent: true,\n parentBorderWidth: parentBorderWidth() ?? 0,\n maxHeight: 2048,\n maxWidth: 2048,\n direction: config()?.directionList || 'bottom',\n directionDistance: 2,\n template: !showListBellow() ? listViewEl : undefined,\n whiteTheme: true,\n ignoreArrow: true,\n classInclude: 'rounded-[4px] ' + classIncludePopover() + (!listConfig()?.ignoreShowDataWhenNotSearch || keySearch() ? ' libs-ui-border-general' : ''),\n position: { mode: 'start', distance: 0 },\n }\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outEventPopoverContent)=\"handlerPopoverContentEvent($event)\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\">\n <div\n class=\"relative\"\n [class.cursor-pointer]=\"!disable() && !readonly()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.libs-ui-disable]=\"disable()\"\n [class.libs-ui-disable-background]=\"disable()\">\n @if (config()?.uiLikeDropdown) {\n <i\n class=\"flex text-[16px] absolute right-[16px] top-[8px] libs-ui-icon-move-right rotate-90 z-[1]\"\n [class.text-[#6a7383]]=\"!readonly() && !disable()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n <div\n #tagsEl\n [class]=\"'libs-ui-tags ' + (config()?.classInclude || '') + (readonly() ? config()?.classCustomWhenReadOnly || ' libs-ui-readonly' : '')\"\n [class.libs-ui-tags-not-popup]=\"(!showList() && !showBorderActiveWhenFocusInput()) || (!focus() && showBorderActiveWhenFocusInput())\"\n [class.libs-ui-tags-error]=\"!!error() && !config()?.ignoreShowError\"\n [class.!pr-[32px]]=\"config()?.uiLikeDropdown\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.libs-ui-disable-background]=\"disable()\"\n [class.libs-ui-border-primary-general]=\"focus() && showBorderActiveWhenFocusInput()\"\n LibsUiComponentsClickOutsideDirective\n LibsUiComponentsScrollOverlayDirective\n (outOutside)=\"handlerClickOutside($event)\">\n @for (item of itemsSelected(); track item[fieldKey()]) {\n <div\n LibsUiComponentsPopoverDirective\n [type]=\"item?.tooltip?.type || 'other'\"\n [config]=\"item?.tooltip?.config || { zIndex: zIndex() + 2 }\"\n [ignoreShowPopover]=\"!item?.tooltip || item.tooltip.ignoreShowPopover\"\n [ngStyle]=\"item?.bullet || item?.ngStyles\"\n [class]=\"classIncludeTagItem() || ''\"\n [class.libs-ui-tags-readonly]=\"item.disableItem\"\n [class.libs-ui-tags-item]=\"!item.disableItem\"\n [class.cursor-default]=\"disable() || readonly()\"\n (pointerdown)=\"handlerClickTagItem($event)\">\n @if (fieldGetImage() || config()?.fieldGetImage; as fieldGetImage) {\n <div class=\"flex items-center justify-center h-full\">\n <libs_ui-components-avatar\n [classInclude]=\"classAvatarInclude() || config()?.classAvatarInclude || 'mr-[8px]'\"\n [size]=\"imageSize() || config()?.imageSize\"\n [linkAvatar]=\"item[fieldGetImage]\"\n [linkAvatarError]=\"linkImageError() || config()?.linkImageError\"\n [idGenColor]=\"item[fieldGetTextAvatar() || config()?.fieldGetTextAvatar || '']\"\n [getLastTextAfterSpace]=\"getLastTextAfterSpace() || config()?.getLastTextAfterSpace\"\n [textAvatar]=\"item[fieldGetTextAvatar() || config()?.fieldGetTextAvatar || 'user']\" />\n </div>\n }\n @let constHtmlLabel = item.fieldLabel || ' ';\n <span\n class=\"libs-ui-font-h6r\"\n [innerHtml]=\"constHtmlLabel | translate\"></span>\n @if (!disable() && !item.disableItem && !readonly()) {\n <div class=\"flex items-center justify-center ml-[8px]\">\n @let constHtmlStyle = item?.bullet || item?.ngStyles;\n <i\n #iconCloseEl\n [attr.specificStyle]=\"!!constHtmlStyle\"\n [class]=\"'flex text-[16px] ' + (classIconRemoveTagItem() || 'libs-ui-icon-close')\"\n [class.cursor-pointer]=\"!disable() && !loading() && !loadingDetail()\"\n [class.pointer-events-none]=\"disable() || loading() || loadingDetail()\"\n [ngStyle]=\"constHtmlStyle | LibsUiComponentsTagsGetColorPipe: iconCloseEl\"\n (pointerdown)=\"handlerRemoveItemSelected($event, item)\"></i>\n </div>\n }\n </div>\n }\n @if (!singleSelected() || (singleSelected() && !itemsSelected().length)) {\n @if (!config()?.ignoreInput && !config()?.uiLikeDropdown && (!hiddenInputWhenReadonly() || (hiddenInputWhenReadonly() && !readonly()))) {\n <libs_ui-components-inputs-input\n class=\"grow\"\n [class.mb-[4px]]=\"itemsSelected().length\"\n [classInclude]=\"'w-full bg-transparent ' + (config()?.classInputInclude || 'px-[4px] min-w-[30px]')\"\n [defaultHeight]=\"24\"\n [placeholder]=\"readonly() ? '' : placeholder() || 'i18n_import_content'\"\n [noBorder]=\"true\"\n [(value)]=\"valueInput\"\n [disable]=\"disable() || loading() || loadingDetail() || disableWhenMaxItem()\"\n [readonly]=\"readonly()\"\n (outEnterEvent)=\"handlerEnterEvent()\"\n (valueChange)=\"handlerValueChangeSearch($event)\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlurEvent($event)\"\n (outFunctionsControl)=\"handlerInputFunctionControl($event)\" />\n }\n @if (config()?.ignoreInput && config()?.uiLikeDropdown && !itemsSelected().length) {\n <div\n class=\"flex items-center pb-[4px] pt-[2px] ml-[11px] libs-ui-font-h5r\"\n [class.text-[#9ca2ad]]=\"disable()\">\n @let constHtmlPlaceholder = placeholder() || 'i18n_select_value';\n {{ constHtmlPlaceholder | translate }}\n </div>\n }\n }\n </div>\n @if (error() && !config()?.ignoreShowError) {\n <div class=\"text-[#ee2d41] libs-ui-font-h7r mt-[8px]\">\n @let constHtmlMessage = error()?.message || ' ';\n {{ constHtmlMessage | translate: error()?.interpolateParams || {} }}\n </div>\n }\n </div>\n </libs_ui-components-popover>\n</div>\n@if (showListBellow()) {\n <ng-container *ngTemplateOutlet=\"listViewEl\"></ng-container>\n}\n<ng-template #listViewEl>\n @if (listConfig(); as listConfig) {\n <libs_ui-components-list\n [searchConfig]=\"listSearchConfig() || { classInclude: 'hidden', iconLeftClass: 'hidden' }\"\n [isSearchOnline]=\"isSearchOnline()\"\n [zIndex]=\"zIndex()\"\n [keySearch]=\"keySearch()\"\n [config]=\"listConfig\"\n [disable]=\"disable() || loadingDetail() || disableWhenMaxItem()\"\n [searchPadding]=\"listSearchPadding()\"\n [maxItemShow]=\"listMaxItemShow() || 6\"\n [multiKeySelected]=\"keysSelected()\"\n [clickExactly]=\"false\"\n [keysHiddenItem]=\"keysHiddenItem()\"\n [keysDisableItem]=\"listKeyDisable()\"\n [dividerClassInclude]=\"listDividerClassInclude() ?? 'hidden'\"\n [buttonsOther]=\"listButtonsOther()\"\n [backgroundListCustom]=\"listBackgroundListCustom()\"\n [functionGetItemsAutoAddList]=\"functionGetItemAutoAddList()\"\n [hiddenInputSearch]=\"listHiddenInputSearchWhenHasSearchConfig()\"\n (outFunctionsControl)=\"handlerFunctionControlList($event)\"\n (outSelectKey)=\"handlerSelectedKey($event)\"\n (outSelectMultiKey)=\"handlerSelectMultiKey($event)\"\n (outChangeView)=\"handlerDataChange($event)\"\n (outClickButtonOther)=\"handlerClickButtonOther($event)\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outLoading)=\"handlerLoading($event)\" />\n }\n</ng-template>\n", styles: [".libs-ui-tags{position:relative;display:flex;flex-wrap:wrap;border:1px solid var(--libs-ui-color-default, #226ff5);max-height:100px;overflow:auto;border-radius:4px;padding:3px 0 0 4px;min-height:32px}.libs-ui-tags-not-popup{border:1px solid #e6e7ea}.libs-ui-tags-error{border-color:#ff5454}.libs-ui-tags .libs-ui-tags-item{display:flex;align-items:center;margin:0 4px 3px 0;padding:4px 8px;color:var(--libs-ui-color-default, #226ff5);border-radius:20px;background-color:var(--libs-ui-color-light-2, #e9f1fe);word-break:break-word!important;overflow-wrap:break-word!important;cursor:default}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-],.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]{border-radius:50%}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:before,.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]:before{border-radius:50%;font-size:16px;color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:hover:before,.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]:hover:before{background:var(--libs-ui-color-light-6, #d3e2fd)}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:active:before,.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]:active:before{background:var(--libs-ui-color-light-5, #bdd4fc)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-],.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]{border-radius:50%}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]:before,.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]:before{border-radius:50%;font-size:16px;color:var(--libs-ui-tags-item-icon-default)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]:hover:before,.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]:hover:before{color:var(--libs-ui-tags-item-icon-hover);background:var(--libs-ui-tags-item-icon-background-hover)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]:active:before,.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]:active:before{color:var(--libs-ui-tags-item-icon-active);background:var(--libs-ui-tags-item-icon-background-active)}.libs-ui-tags-disable{background:#f8f9fa;color:#9ca2ad}.libs-ui-tags-readonly{background:#f1ebfd;color:#7239ea;display:flex;align-items:center;margin:0 4px 4px 0;padding:4px 8px;border-radius:20px;word-break:break-word!important;overflow-wrap:break-word!important}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: LibsUiComponentsClickOutsideDirective, selector: "[LibsUiComponentsClickOutsideDirective]", outputs: ["outOutside", "outInSide"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { 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: 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: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "pipe", type: LibsUiComponentsTagsGetColorPipe, name: "LibsUiComponentsTagsGetColorPipe" }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
799
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
800
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsTagsComponent, isStandalone: true, selector: "libs_ui-components-tags", inputs: { classIncludePopover: { classPropertyName: "classIncludePopover", publicName: "classIncludePopover", isSignal: true, isRequired: false, transformFunction: null }, enterAutoAddTagToList: { classPropertyName: "enterAutoAddTagToList", publicName: "enterAutoAddTagToList", isSignal: true, isRequired: false, transformFunction: null }, checkExitIsLabelInclude: { classPropertyName: "checkExitIsLabelInclude", publicName: "checkExitIsLabelInclude", isSignal: true, isRequired: false, transformFunction: null }, checkExitByFields: { classPropertyName: "checkExitByFields", publicName: "checkExitByFields", isSignal: true, isRequired: false, transformFunction: null }, parentBorderWidth: { classPropertyName: "parentBorderWidth", publicName: "parentBorderWidth", isSignal: true, isRequired: false, transformFunction: null }, functionCheckPermissionCreateTag: { classPropertyName: "functionCheckPermissionCreateTag", publicName: "functionCheckPermissionCreateTag", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, httpRequestDetailItemByIds: { classPropertyName: "httpRequestDetailItemByIds", publicName: "httpRequestDetailItemByIds", isSignal: true, isRequired: false, transformFunction: null }, fieldLabel: { classPropertyName: "fieldLabel", publicName: "fieldLabel", isSignal: true, isRequired: false, transformFunction: null }, maxItemInput: { classPropertyName: "maxItemInput", publicName: "maxItemInput", isSignal: true, isRequired: false, transformFunction: null }, zIndex: { classPropertyName: "zIndex", publicName: "zIndex", isSignal: true, isRequired: false, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, labelConfig: { classPropertyName: "labelConfig", publicName: "labelConfig", isSignal: true, isRequired: false, transformFunction: null }, defaultItemsSelected: { classPropertyName: "defaultItemsSelected", publicName: "defaultItemsSelected", isSignal: true, isRequired: false, transformFunction: null }, defaultKeysSelected: { classPropertyName: "defaultKeysSelected", publicName: "defaultKeysSelected", isSignal: true, isRequired: false, transformFunction: null }, listSearchConfig: { classPropertyName: "listSearchConfig", publicName: "listSearchConfig", isSignal: true, isRequired: false, transformFunction: null }, isSearchOnline: { classPropertyName: "isSearchOnline", publicName: "isSearchOnline", isSignal: true, isRequired: false, transformFunction: null }, listSearchPadding: { classPropertyName: "listSearchPadding", publicName: "listSearchPadding", isSignal: true, isRequired: false, transformFunction: null }, listDividerClassInclude: { classPropertyName: "listDividerClassInclude", publicName: "listDividerClassInclude", isSignal: true, isRequired: false, transformFunction: null }, listConfig: { classPropertyName: "listConfig", publicName: "listConfig", isSignal: true, isRequired: false, transformFunction: null }, listButtonsOther: { classPropertyName: "listButtonsOther", publicName: "listButtonsOther", isSignal: true, isRequired: false, transformFunction: null }, listClickExactly: { classPropertyName: "listClickExactly", publicName: "listClickExactly", isSignal: true, isRequired: false, transformFunction: null }, listBackgroundListCustom: { classPropertyName: "listBackgroundListCustom", publicName: "listBackgroundListCustom", isSignal: true, isRequired: false, transformFunction: null }, listMaxItemShow: { classPropertyName: "listMaxItemShow", publicName: "listMaxItemShow", isSignal: true, isRequired: false, transformFunction: null }, listHiddenInputSearchWhenHasSearchConfig: { classPropertyName: "listHiddenInputSearchWhenHasSearchConfig", publicName: "listHiddenInputSearchWhenHasSearchConfig", isSignal: true, isRequired: false, transformFunction: null }, removeTextSearchWhenBlurInput: { classPropertyName: "removeTextSearchWhenBlurInput", publicName: "removeTextSearchWhenBlurInput", isSignal: true, isRequired: false, transformFunction: null }, keysHiddenItem: { classPropertyName: "keysHiddenItem", publicName: "keysHiddenItem", isSignal: true, isRequired: false, transformFunction: null }, keysDisableItem: { classPropertyName: "keysDisableItem", publicName: "keysDisableItem", isSignal: true, isRequired: false, transformFunction: null }, ignoreEmitWhenSameDataSelected: { classPropertyName: "ignoreEmitWhenSameDataSelected", publicName: "ignoreEmitWhenSameDataSelected", isSignal: true, isRequired: false, transformFunction: null }, singleSelected: { classPropertyName: "singleSelected", publicName: "singleSelected", isSignal: true, isRequired: false, transformFunction: null }, classIncludeTagItem: { classPropertyName: "classIncludeTagItem", publicName: "classIncludeTagItem", isSignal: true, isRequired: false, transformFunction: null }, classIconRemoveTagItem: { classPropertyName: "classIconRemoveTagItem", publicName: "classIconRemoveTagItem", isSignal: true, isRequired: false, transformFunction: null }, showBorderActiveWhenFocusInput: { classPropertyName: "showBorderActiveWhenFocusInput", publicName: "showBorderActiveWhenFocusInput", isSignal: true, isRequired: false, transformFunction: null }, fieldGetImage: { classPropertyName: "fieldGetImage", publicName: "fieldGetImage", isSignal: true, isRequired: false, transformFunction: null }, imageSize: { classPropertyName: "imageSize", publicName: "imageSize", isSignal: true, isRequired: false, transformFunction: null }, linkImageError: { classPropertyName: "linkImageError", publicName: "linkImageError", isSignal: true, isRequired: false, transformFunction: null }, fieldGetTextAvatar: { classPropertyName: "fieldGetTextAvatar", publicName: "fieldGetTextAvatar", isSignal: true, isRequired: false, transformFunction: null }, classAvatarInclude: { classPropertyName: "classAvatarInclude", publicName: "classAvatarInclude", isSignal: true, isRequired: false, transformFunction: null }, getLastTextAfterSpace: { classPropertyName: "getLastTextAfterSpace", publicName: "getLastTextAfterSpace", isSignal: true, isRequired: false, transformFunction: null }, validRequired: { classPropertyName: "validRequired", publicName: "validRequired", isSignal: true, isRequired: false, transformFunction: null }, validMaxItemSelected: { classPropertyName: "validMaxItemSelected", publicName: "validMaxItemSelected", isSignal: true, isRequired: false, transformFunction: null }, validPattern: { classPropertyName: "validPattern", publicName: "validPattern", isSignal: true, isRequired: false, transformFunction: null }, showListBellow: { classPropertyName: "showListBellow", publicName: "showListBellow", isSignal: true, isRequired: false, transformFunction: null }, hiddenInputWhenReadonly: { classPropertyName: "hiddenInputWhenReadonly", publicName: "hiddenInputWhenReadonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { keysHiddenItem: "keysHiddenItemChange", outSelectMultiItem: "outSelectMultiItem", outValidEvent: "outValidEvent", outFunctionsControl: "outFunctionsControl", outClickButtonOther: "outClickButtonOther", outShowListEvent: "outShowListEvent", outChangStageFlagMouse: "outChangStageFlagMouse", outLoadingGetDetailSelected: "outLoadingGetDetailSelected" }, viewQueries: [{ propertyName: "tagsEl", first: true, predicate: ["tagsEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"flex flex-col w-full h-full\">\n @if (labelConfig(); as labelConfig) {\n <libs_ui-components-label\n [classInclude]=\"labelConfig.classInclude\"\n [labelLeft]=\"labelConfig.labelLeft\"\n [labelLeftClass]=\"labelConfig.labelLeftClass\"\n [required]=\"labelConfig.required\"\n [description]=\"labelConfig.description\"\n [descriptionClass]=\"labelConfig.descriptionClass\"\n [labelRight]=\"labelConfig.labelRight\"\n [labelRightClass]=\"labelConfig.labelRightClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [buttonsLeft]=\"labelConfig.buttonsLeft\"\n [buttonsRight]=\"labelConfig.buttonsRight\"\n [disableButtonsLeft]=\"labelConfig.disableButtonsLeft || disable() || loading() || loadingDetail()\"\n [disableButtonsRight]=\"labelConfig.disableButtonsRight || disable() || loading() || loadingDetail()\"\n [hasToggle]=\"labelConfig.hasToggle\"\n [toggleActive]=\"labelConfig.toggleActive\"\n [toggleActive]=\"labelConfig.toggleDisable || disable() || loading() || loadingDetail()\"\n [popover]=\"labelConfig.popover\"\n [iconPopoverClass]=\"labelConfig.iconPopoverClass\"\n [onlyShowCount]=\"labelConfig.onlyShowCount\"\n [limitLength]=\"labelConfig.limitLength\"\n [buttonsDescription]=\"labelConfig.buttonsDescription\"\n [disableButtonsDescription]=\"labelConfig.disableButtonsDescription || disable()\"\n [buttonsDescriptionContainerClass]=\"labelConfig.buttonsDescriptionContainerClass\"\n [count]=\"labelConfig.count\" />\n }\n <libs_ui-components-popover\n class=\"w-full h-full\"\n [ignoreShowPopover]=\"disable() || readonly() || !!config()?.ignoreShowList || false\"\n [ignoreCursorPointerModeLikeClick]=\"true\"\n [elementRefCustom]=\"tagsEl\"\n [mode]=\"!config()?.ignoreInput ? 'click' : 'click-toggle'\"\n [ignoreHiddenPopoverContentWhenMouseLeave]=\"true\"\n [flagMouse]=\"flagMouse()\"\n [config]=\"{\n animationConfig: config()?.animationConfig || {},\n zIndex: zIndex(),\n widthByParent: true,\n parentBorderWidth: parentBorderWidth() ?? 0,\n maxHeight: 2048,\n maxWidth: 2048,\n direction: config()?.directionList || 'bottom',\n directionDistance: 2,\n template: !showListBellow() ? listViewEl : undefined,\n whiteTheme: true,\n ignoreArrow: true,\n classInclude: 'rounded-[4px] ' + classIncludePopover() + (!listConfig()?.ignoreShowDataWhenNotSearch || keySearch() ? ' libs-ui-border-general' : ''),\n position: { mode: 'start', distance: 0 },\n }\"\n (outFunctionsControl)=\"handlerPopoverFunctionControlEvent($event)\"\n (outEvent)=\"handlerPopoverEvent($event)\"\n (outEventPopoverContent)=\"handlerPopoverContentEvent($event)\"\n (outChangStageFlagMouse)=\"handlerChangeFlagMouse($event)\">\n <div\n class=\"relative\"\n [class.cursor-pointer]=\"!disable() && !readonly()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.libs-ui-disable]=\"disable()\"\n [class.libs-ui-disable-background]=\"disable()\">\n @if (config()?.uiLikeDropdown) {\n <i\n class=\"flex text-[16px] absolute right-[16px] top-[8px] libs-ui-icon-move-right rotate-90 z-[1]\"\n [class.text-[#6a7383]]=\"!readonly() && !disable()\"\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-disable]=\"disable()\"></i>\n }\n <div\n #tagsEl\n [class]=\"'libs-ui-tags ' + (config()?.classInclude || '') + (readonly() ? config()?.classCustomWhenReadOnly || ' libs-ui-readonly' : '')\"\n [class.libs-ui-tags-not-popup]=\"(!showList() && !showBorderActiveWhenFocusInput()) || (!focus() && showBorderActiveWhenFocusInput())\"\n [class.libs-ui-tags-error]=\"!!error() && !config()?.ignoreShowError\"\n [class.!pr-[32px]]=\"config()?.uiLikeDropdown\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.libs-ui-disable-background]=\"disable()\"\n [class.libs-ui-border-primary-general]=\"focus() && showBorderActiveWhenFocusInput()\"\n LibsUiComponentsClickOutsideDirective\n LibsUiComponentsScrollOverlayDirective\n (outOutside)=\"handlerClickOutside($event)\">\n @for (item of itemsSelected(); track item[fieldKey()]) {\n <div\n LibsUiComponentsPopoverDirective\n [type]=\"item?.tooltip?.type || 'other'\"\n [config]=\"item?.tooltip?.config || { zIndex: zIndex() + 2 }\"\n [ignoreShowPopover]=\"!item?.tooltip || item.tooltip.ignoreShowPopover\"\n [ngStyle]=\"item?.bullet || item?.ngStyles\"\n [class]=\"classIncludeTagItem() || ''\"\n [class.libs-ui-tags-readonly]=\"item.disableItem\"\n [class.libs-ui-tags-item]=\"!item.disableItem\"\n [class.cursor-default]=\"disable() || readonly()\"\n (pointerdown)=\"handlerClickTagItem($event)\">\n @if (fieldGetImage() || config()?.fieldGetImage; as fieldGetImage) {\n <div class=\"flex items-center justify-center h-full\">\n <libs_ui-components-avatar\n [classInclude]=\"classAvatarInclude() || config()?.classAvatarInclude || 'mr-[8px]'\"\n [size]=\"imageSize() || config()?.imageSize\"\n [linkAvatar]=\"item[fieldGetImage]\"\n [linkAvatarError]=\"linkImageError() || config()?.linkImageError\"\n [idGenColor]=\"item[fieldGetTextAvatar() || config()?.fieldGetTextAvatar || '']\"\n [getLastTextAfterSpace]=\"getLastTextAfterSpace() || config()?.getLastTextAfterSpace\"\n [textAvatar]=\"item[fieldGetTextAvatar() || config()?.fieldGetTextAvatar || 'user']\" />\n </div>\n }\n @let constHtmlLabel = item.fieldLabel || ' ';\n <span\n class=\"libs-ui-font-h6r\"\n [innerHtml]=\"constHtmlLabel | translate\"></span>\n @if (!disable() && !item.disableItem && !readonly()) {\n <div class=\"flex items-center justify-center ml-[8px]\">\n @let constHtmlStyle = item?.bullet || item?.ngStyles;\n <i\n #iconCloseEl\n [attr.specificStyle]=\"!!constHtmlStyle\"\n [class]=\"'flex text-[16px] ' + (classIconRemoveTagItem() || 'libs-ui-icon-close')\"\n [class.cursor-pointer]=\"!disable() && !loading() && !loadingDetail()\"\n [class.pointer-events-none]=\"disable() || loading() || loadingDetail()\"\n [ngStyle]=\"constHtmlStyle | LibsUiComponentsTagsGetColorPipe: iconCloseEl\"\n (pointerdown)=\"handlerRemoveItemSelected($event, item)\"></i>\n </div>\n }\n </div>\n }\n @if (!singleSelected() || (singleSelected() && !itemsSelected().length)) {\n @if (!config()?.ignoreInput && !config()?.uiLikeDropdown && (!hiddenInputWhenReadonly() || (hiddenInputWhenReadonly() && !readonly()))) {\n <libs_ui-components-inputs-input\n class=\"grow\"\n [class.mb-[4px]]=\"itemsSelected().length\"\n [classInclude]=\"'w-full bg-transparent ' + (config()?.classInputInclude || 'px-[4px] min-w-[30px]')\"\n [defaultHeight]=\"24\"\n [placeholder]=\"readonly() ? '' : placeholder() || 'i18n_import_content'\"\n [noBorder]=\"true\"\n [(value)]=\"valueInput\"\n [disable]=\"disable() || loading() || loadingDetail() || disableWhenMaxItem()\"\n [readonly]=\"readonly()\"\n (outEnterEvent)=\"handlerEnterEvent()\"\n (valueChange)=\"handlerValueChangeSearch($event)\"\n (outFocusAndBlurEvent)=\"handlerFocusAndBlurEvent($event)\"\n (outFunctionsControl)=\"handlerInputFunctionControl($event)\" />\n }\n @if (config()?.ignoreInput && config()?.uiLikeDropdown && !itemsSelected().length) {\n <div\n class=\"flex items-center pb-[4px] pt-[2px] ml-[11px] libs-ui-font-h5r\"\n [class.text-[#9ca2ad]]=\"disable()\">\n @let constHtmlPlaceholder = placeholder() || 'i18n_select_value';\n {{ constHtmlPlaceholder | translate }}\n </div>\n }\n }\n </div>\n @if (error() && !config()?.ignoreShowError) {\n <div class=\"text-[#ee2d41] libs-ui-font-h7r mt-[8px]\">\n @let constHtmlMessage = error()?.message || ' ';\n {{ constHtmlMessage | translate: error()?.interpolateParams || {} }}\n </div>\n }\n </div>\n </libs_ui-components-popover>\n</div>\n@if (showListBellow()) {\n <ng-container *ngTemplateOutlet=\"listViewEl\"></ng-container>\n}\n<ng-template #listViewEl>\n @if (listConfig(); as listConfig) {\n <libs_ui-components-list\n [searchConfig]=\"listSearchConfig() || { classInclude: 'hidden', iconLeftClass: 'hidden' }\"\n [isSearchOnline]=\"isSearchOnline()\"\n [zIndex]=\"zIndex()\"\n [keySearch]=\"keySearch()\"\n [config]=\"listConfig\"\n [disable]=\"disable() || loadingDetail() || disableWhenMaxItem()\"\n [searchPadding]=\"listSearchPadding()\"\n [maxItemShow]=\"listMaxItemShow() || 6\"\n [multiKeySelected]=\"keysSelected()\"\n [clickExactly]=\"false\"\n [keysHiddenItem]=\"keysHiddenItem()\"\n [keysDisableItem]=\"listKeyDisable()\"\n [dividerClassInclude]=\"listDividerClassInclude() ?? 'hidden'\"\n [buttonsOther]=\"listButtonsOther()\"\n [backgroundListCustom]=\"listBackgroundListCustom()\"\n [functionGetItemsAutoAddList]=\"functionGetItemAutoAddList()\"\n [hiddenInputSearch]=\"listHiddenInputSearchWhenHasSearchConfig()\"\n (outFunctionsControl)=\"handlerFunctionControlList($event)\"\n (outSelectKey)=\"handlerSelectedKey($event)\"\n (outSelectMultiKey)=\"handlerSelectMultiKey($event)\"\n (outChangeView)=\"handlerDataChange($event)\"\n (outClickButtonOther)=\"handlerClickButtonOther($event)\"\n (outChangStageFlagMousePopover)=\"handlerChangStageFlagMouse($event)\"\n (outLoading)=\"handlerLoading($event)\" />\n }\n</ng-template>\n", styles: [".libs-ui-tags{position:relative;display:flex;flex-wrap:wrap;border:1px solid var(--libs-ui-color-default, #226ff5);max-height:100px;overflow:auto;border-radius:4px;padding:3px 0 0 4px;min-height:32px}.libs-ui-tags-not-popup{border:1px solid #e6e7ea}.libs-ui-tags-error{border-color:#ff5454}.libs-ui-tags .libs-ui-tags-item{display:flex;align-items:center;margin:0 4px 3px 0;padding:4px 8px;color:var(--libs-ui-color-default, #226ff5);border-radius:20px;background-color:var(--libs-ui-color-light-2, #e9f1fe);word-break:break-word!important;overflow-wrap:break-word!important;cursor:default}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-],.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]{border-radius:50%}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:before,.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]:before{border-radius:50%;font-size:16px;color:var(--libs-ui-color-default, #226ff5)}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:hover:before,.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]:hover:before{background:var(--libs-ui-color-light-6, #d3e2fd)}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:active:before,.libs-ui-tags .libs-ui-tags-item i[class*=icon-font-3rd]:active:before{background:var(--libs-ui-color-light-5, #bdd4fc)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-],.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]{border-radius:50%}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]:before,.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]:before{border-radius:50%;font-size:16px;color:var(--libs-ui-tags-item-icon-default)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]:hover:before,.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]:hover:before{color:var(--libs-ui-tags-item-icon-hover);background:var(--libs-ui-tags-item-icon-background-hover)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]:active:before,.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=icon-font-3rd]:active:before{color:var(--libs-ui-tags-item-icon-active);background:var(--libs-ui-tags-item-icon-background-active)}.libs-ui-tags-disable{background:#f8f9fa;color:#9ca2ad}.libs-ui-tags-readonly{background:#f1ebfd;color:#7239ea;display:flex;align-items:center;margin:0 4px 4px 0;padding:4px 8px;border-radius:20px;word-break:break-word!important;overflow-wrap:break-word!important}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: LibsUiComponentsClickOutsideDirective, selector: "[LibsUiComponentsClickOutsideDirective]", outputs: ["outOutside", "outInSide"] }, { kind: "component", type: LibsUiComponentsLabelComponent, selector: "libs_ui-components-label", inputs: ["iconPopoverClass", "classInclude", "labelLeft", "labelLeftClass", "labelLeftBehindToggleButton", "popover", "required", "buttonsLeft", "disableButtonsLeft", "buttonsRight", "disableButtonsRight", "labelRight", "labelRightClass", "labelRightRequired", "hasToggle", "toggleSize", "toggleActive", "toggleDisable", "description", "descriptionClass", "buttonsDescription", "disableButtonsDescription", "buttonsDescriptionContainerClass", "onlyShowCount", "zIndexPopover", "timerDestroyPopover", "count", "limitLength"], outputs: ["outClickButton", "outSwitchEvent", "outLabelRightClick", "outLabelLeftClick"] }, { 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: 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: LibsUiComponentsAvatarComponent, selector: "libs_ui-components-avatar", inputs: ["typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "classImageInclude", "zIndexPreviewImage", "clickPreviewImage", "idGenColor", "getLastTextAfterSpace", "textAvatar", "textAvatarClassInclude", "containertextAvatarClassInclude"], outputs: ["outAvatarError", "outEventPreviewImage"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "paddingLeftItem", "config", "autoSelectedFirstItemCallOutsideBefore", "isSearchOnline", "disable", "disableLabel", "labelConfig", "searchConfig", "searchPadding", "dividerClassInclude", "hasDivider", "buttonsOther", "hasButtonUnSelectOption", "clickExactly", "backgroundListCustom", "maxItemShow", "keySelected", "multiKeySelected", "keysDisableItem", "keysHiddenItem", "focusInputSearch", "skipFocusInputWhenKeySearchStoreUndefined", "functionGetItemsAutoAddList", "validRequired", "showValidateBottom", "zIndex", "loadingIconSize", "templateRefSearchNoData", "resetKeyWhenSelectAllKeyDropdown", "ignoreClassDisableDefaultWhenUseKeysDisableItem"], outputs: ["outSelectKey", "outSelectMultiKey", "outUnSelectMultiKey", "outClickButtonOther", "outFieldKey", "outChangeView", "outKeySearch", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "pipe", type: LibsUiComponentsTagsGetColorPipe, name: "LibsUiComponentsTagsGetColorPipe" }, { kind: "directive", type: LibsUiComponentsScrollOverlayDirective, selector: "[LibsUiComponentsScrollOverlayDirective]", inputs: ["debugMode", "ignoreInit", "classContainer", "options", "elementCheckScrollX", "elementCheckScrollY", "elementScroll"], outputs: ["outScroll", "outScrollX", "outScrollY", "outScrollTop", "outScrollBottom"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
801
801
  }
802
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsComponent, decorators: [{
802
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsTagsComponent, decorators: [{
803
803
  type: Component,
804
804
  args: [{ selector: 'libs_ui-components-tags', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
805
805
  TranslateModule,
package/package.json CHANGED
@@ -1,24 +1,24 @@
1
1
  {
2
2
  "name": "@libs-ui/components-tags",
3
- "version": "0.2.321-0",
3
+ "version": "0.2.323-0",
4
4
  "peerDependencies": {
5
5
  "@angular/common": ">=18.0.0",
6
6
  "@angular/core": ">=18.0.0",
7
- "@libs-ui/components-avatar": "0.2.321-0",
8
- "@libs-ui/components-popover": "0.2.321-0",
9
- "@libs-ui/utils": "0.2.321-0",
10
- "@libs-ui/components-buttons-button": "0.2.321-0",
11
- "@libs-ui/components-dropdown": "0.2.321-0",
12
- "@libs-ui/components-inputs-input": "0.2.321-0",
13
- "@libs-ui/components-inputs-search": "0.2.321-0",
14
- "@libs-ui/components-inputs-valid": "0.2.321-0",
15
- "@libs-ui/components-label": "0.2.321-0",
16
- "@libs-ui/components-list": "0.2.321-0",
17
- "@libs-ui/interfaces-types": "0.2.321-0",
18
- "@libs-ui/services-http-request": "0.2.321-0",
7
+ "@libs-ui/components-avatar": "0.2.323-0",
8
+ "@libs-ui/components-popover": "0.2.323-0",
9
+ "@libs-ui/utils": "0.2.323-0",
10
+ "@libs-ui/components-buttons-button": "0.2.323-0",
11
+ "@libs-ui/components-dropdown": "0.2.323-0",
12
+ "@libs-ui/components-inputs-input": "0.2.323-0",
13
+ "@libs-ui/components-inputs-search": "0.2.323-0",
14
+ "@libs-ui/components-inputs-valid": "0.2.323-0",
15
+ "@libs-ui/components-label": "0.2.323-0",
16
+ "@libs-ui/components-list": "0.2.323-0",
17
+ "@libs-ui/interfaces-types": "0.2.323-0",
18
+ "@libs-ui/services-http-request": "0.2.323-0",
19
19
  "@ngx-translate/core": "^15.0.0",
20
20
  "rxjs": "~7.8.0",
21
- "@libs-ui/components-click-outside": "0.2.321-0"
21
+ "@libs-ui/components-click-outside": "0.2.323-0"
22
22
  },
23
23
  "sideEffects": false,
24
24
  "module": "fesm2022/libs-ui-components-tags.mjs",