@libs-ui/components-tags 0.2.66

package/fesm2022/libs-ui-components-tags.mjs

@@ -0,0 +1,759 @@
+import { NgTemplateOutlet, NgStyle } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Pipe, signal, computed, input, model, output, viewChild, inject, effect, untracked, Component, ChangeDetectionStrategy } from '@angular/core';
+import { LibsUiComponentsAvatarComponent } from '@libs-ui/components-avatar';
+import { LibsUiComponentsInputsInputComponent } from '@libs-ui/components-inputs-input';
+import { LibsUiComponentsLabelComponent } from '@libs-ui/components-label';
+import { getFieldKeyByType, LibsUiComponentsListComponent } from '@libs-ui/components-list';
+import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
+import { LibsUiHttpRequestService } from '@libs-ui/services-http-request';
+import { get, rgbToHex, colorStepContrastFromOrigin, uuid, set, isNil, cloneDeep, escapeHtml, ERROR_MESSAGE_EMPTY_VALID, ERROR_MESSAGE_MAX_VALID, ERROR_MESSAGE_PATTEN_VALID } from '@libs-ui/utils';
+import * as i1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { Subject, debounceTime, takeUntil } from 'rxjs';
+import { LibsUiComponentsClickOutsideDirective } from '@libs-ui/components-click-outside';
+
+class LibsUiComponentsTagsGetColorPipe {
+    transform(style, element) {
+        if (!style) {
+            return {};
+        }
+        let color = get(style, 'color');
+        let backgroundColor = get(style, 'backgroundColor') || get(style, 'background');
+        if (color && color.includes('rgb') && color.match(/d+/g)?.length) {
+            const [red, green, blue] = color.match(/d+/g);
+            color = rgbToHex({ red, green, blue });
+        }
+        if (backgroundColor && backgroundColor.includes('rgb') && backgroundColor.match(/\d+/g)?.length) {
+            const [red, green, blue] = backgroundColor.match(/\d+/g);
+            backgroundColor = rgbToHex({ red, green, blue });
+        }
+        if (color && /(^#)[a-z0-9]{3,6}/ig.test(color)) {
+            element.style.setProperty('--libs-ui-tags-item-icon-default', color);
+            element.style.setProperty('--libs-ui-tags-item-icon-background-hover', color);
+        }
+        if (backgroundColor && /(^#)[a-z0-9]{3,6}/ig.test(backgroundColor)) {
+            element.style.setProperty('--libs-ui-tags-item-icon-hover', backgroundColor);
+            element.style.setProperty('--libs-ui-tags-item-icon-active', backgroundColor);
+            element.style.setProperty('--libs-ui-tags-item-icon-background-active', colorStepContrastFromOrigin((backgroundColor), 60)?.light || '');
+        }
+        return style;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, isStandalone: true, name: "LibsUiComponentsTagsGetColorPipe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsGetColorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'LibsUiComponentsTagsGetColorPipe',
+                    standalone: true
+                }]
+        }] });
+
+class LibsUiComponentsTagsComponent {
+    /* PROPERTY */
+    flagMouse = signal({ isMouseEnter: false, isMouseEnterContent: false });
+    loading = signal(false);
+    loadingDetail = signal(false);
+    keySearch = signal('');
+    valueInput = signal('');
+    itemsSelected = signal([]);
+    showList = signal(false);
+    positionList = signal(undefined);
+    keysSelected = signal([]);
+    disableWhenMaxItem = signal(false);
+    itemChangeUnSelect = signal(undefined);
+    focus = signal(false);
+    error = signal(undefined);
+    fieldKey = signal('id');
+    functionGetItemAutoAddList = computed(() => {
+        if (!this.enterAutoAddTagToList()) {
+            return;
+        }
+        return () => this.itemsSelected().filter(item => `${item[this.fieldKey()]}`.search(this.fakeId()) === 0).reverse();
+    });
+    fakeId = signal(uuid());
+    timeOutFlag = signal(undefined);
+    timeOutChangeSearch = signal(undefined);
+    timeOutCheckViewChange = signal(undefined);
+    timeoutClickOutside = signal(undefined);
+    clientHeight = signal(undefined);
+    itemsOfList = signal([]);
+    keySearchChange = new Subject();
+    keySearchChangeSub = signal(undefined);
+    tempIgnoreEmit = signal(false);
+    popoverFunctionControl = signal(undefined);
+    inputFunctionControl = signal(undefined);
+    typePopover = signal(undefined);
+    listFunctionControl = signal(undefined);
+    defaultItemsSelectedCurrent = signal(undefined);
+    onDestroy = new Subject();
+    /* INPUT */
+    classIncludePopover = input();
+    enterAutoAddTagToList = input(false);
+    checkExitIsLabelInclude = input();
+    checkExitByFields = input();
+    parentBorderWidth = input();
+    functionCheckPermissionCreateTag = input(() => true);
+    placeholder = input();
+    httpRequestDetailItemByIds = input();
+    fieldLabel = input('label');
+    maxItemInput = input();
+    zIndex = input();
+    config = input();
+    disable = input();
+    readonly = input();
+    labelConfig = input();
+    defaultItemsSelected = input();
+    defaultKeysSelected = input();
+    listSearchConfig = input();
+    isSearchOnline = input(false);
+    listSearchPadding = input();
+    listDividerClassInclude = input();
+    listConfig = input();
+    listButtonsOther = input();
+    listClickExactly = input();
+    listBackgroundListCustom = input();
+    listMaxItemShow = input();
+    listHiddenInputSearchWhenHasSearchConfig = input();
+    removeTextSearchWhenBlurInput = input(true);
+    keysHiddenItem = model();
+    keysDisableItem = input();
+    ignoreEmitWhenSameDataSelected = input();
+    singleSelected = input();
+    classIncludeTagItem = input();
+    classIconRemoveTagItem = input();
+    showBorderActiveWhenFocusInput = input();
+    fieldGetImage = input();
+    imageSize = input(16);
+    fieldGetTextAvatar = input('user');
+    classAvatarInclude = input();
+    getLastTextAfterSpace = input();
+    validRequired = input();
+    validMaxItemSelected = input();
+    validPattern = input();
+    showListBellow = input();
+    hiddenInputWhenReadonly = input();
+    /* OUTPUT */
+    outSelectMultiItem = output();
+    outValidEvent = output();
+    outFunctionsControl = output();
+    outClickButtonOther = output();
+    outShowListEvent = output();
+    outChangStageFlagMouse = output();
+    outLoadingGetDetailSelected = output();
+    /* VIEW CHILD */
+    tagsEl = viewChild.required('tagsEl');
+    /* INJECT*/
+    httpRequestService = inject(LibsUiHttpRequestService);
+    constructor() {
+        effect(() => {
+            const maxItemInput = this.maxItemInput();
+            untracked(() => {
+                this.disableWhenMaxItem.set(false);
+                if (maxItemInput && maxItemInput <= this.itemsSelected().length) {
+                    this.disableWhenMaxItem.set(true);
+                }
+            });
+        });
+        effect(() => {
+            const listConfig = this.listConfig();
+            untracked(() => {
+                if (listConfig) {
+                    this.fieldKey.set(getFieldKeyByType(listConfig, 'id'));
+                }
+            });
+        });
+        effect(() => {
+            const currentItems = this.defaultItemsSelected() || [];
+            untracked(() => {
+                const previousItems = this.defaultItemsSelectedCurrent() || [];
+                this.defaultItemsSelectedCurrent.set(this.defaultItemsSelected());
+                if (previousItems.length !== currentItems.length) {
+                    this.updateItemsSelected(currentItems);
+                    return;
+                }
+                for (const prevItem of previousItems) {
+                    if (!currentItems.some(item => get(item, this.fieldKey()) === get(prevItem, this.fieldKey()))) {
+                        this.updateItemsSelected(currentItems);
+                        break;
+                    }
+                }
+            });
+        });
+        effect(() => {
+            const currentValue = this.defaultKeysSelected() || [];
+            untracked(() => {
+                const previousValue = this.keysSelected() || [];
+                if (previousValue.length !== currentValue.length) {
+                    this.getDetailByIds(currentValue);
+                    return;
+                }
+                const keysNew = currentValue.filter(key => !this.itemsSelected().some(item => item[this.fieldKey()] === key));
+                if (keysNew.length) {
+                    this.getDetailByIds(keysNew);
+                }
+            });
+        });
+    }
+    ngOnInit() {
+        if (!this.config()) {
+            return;
+        }
+        const httpRequestDetailItemByIds = this.httpRequestDetailItemByIds();
+        if (httpRequestDetailItemByIds && (!httpRequestDetailItemByIds.guideAutoUpdateArgumentsValue || !httpRequestDetailItemByIds.guideAutoUpdateArgumentsValue?.detailById)) {
+            throw 'Config getDetailByIds yêu cầu tối thiểu các tham số  guideAutoUpdateArgumentsValue, detailById';
+        }
+        const preprocessor = (keys) => {
+            if (!keys || !(keys instanceof Array) || !keys.length) {
+                return '';
+            }
+            return keys.join(';');
+        };
+        if (httpRequestDetailItemByIds?.guideAutoUpdateArgumentsValue?.detailById) {
+            httpRequestDetailItemByIds.guideAutoUpdateArgumentsValue.detailById.fieldGetValue = httpRequestDetailItemByIds.guideAutoUpdateArgumentsValue.detailById.fieldGetValue ?? 'keys';
+            httpRequestDetailItemByIds.guideAutoUpdateArgumentsValue.detailById.preprocessor = httpRequestDetailItemByIds.guideAutoUpdateArgumentsValue.detailById.preprocessor ?? preprocessor;
+        }
+        this.outFunctionsControl.emit({
+            valid: this.checkValid.bind(this),
+            removeList: async () => this.popoverFunctionControl()?.removePopoverOverlay(),
+            updateLabel: this.updateLabel.bind(this),
+            clearItemSelected: this.clearItemSelected.bind(this),
+            clearKeySearch: () => this.handlerValueChangeSearch(''),
+            focusInput: () => this.focusInput(),
+            getFakeId: async () => this.fakeId(),
+            createTag: this.handlerEnterEvent.bind(this),
+            removeItemSelected: this.handlerRemoveItemSelected.bind(this),
+            resetError: this.resetError.bind(this),
+            resetToDefaultDataSelected: this.resetToDefaultDataSelected.bind(this),
+            updateItemSelectedDisable: this.updateItemSelectedDisable.bind(this),
+            refreshListData: this.refreshListData.bind(this),
+            setError: this.setError.bind(this)
+        });
+    }
+    async setError(message) {
+        this.error.set({ message });
+    }
+    handlerPopoverFunctionControlEvent(event) {
+        this.popoverFunctionControl.set(event);
+    }
+    async updateLabel() {
+        if (!this.itemsSelected() || !this.itemsSelected().length) {
+            return;
+        }
+        this.itemsSelected.update(items => {
+            items.forEach(item => this.updateFieldLabel(item));
+            return [...items];
+        });
+    }
+    updateFieldLabel(item) {
+        const ref = get(item, 'ref') || item;
+        const getValue = this.config()?.getValue;
+        set(item, 'fieldLabel', `${get(ref, this.fieldLabel()) || ref.label || ref.name || ' '}`);
+        if (getValue) {
+            set(item, 'fieldLabel', getValue(ref) || ' ');
+        }
+    }
+    async clearItemSelected(ignoreValid = false) {
+        if (!this.itemsSelected() || !this.itemsSelected().length) {
+            return;
+        }
+        const length = this.itemsSelected().length - 1;
+        this.tempIgnoreEmit.set(true);
+        this.itemsSelected().forEach((item, index) => {
+            if (index === length) {
+                this.tempIgnoreEmit.set(false);
+            }
+            this.handlerRemoveItemSelected({ stopPropagation: () => { return; } }, item, ignoreValid);
+        });
+    }
+    updateItemsSelected(itemsSelected, ignoreValidate = true, ignoreEmitKeySelectedWhenItemsNotExitsEmpty) {
+        if (!itemsSelected || !itemsSelected.length) {
+            return;
+        }
+        const itemsNotExits = [];
+        itemsSelected.forEach(item => {
+            if (!item) {
+                return;
+            }
+            let fieldLabel = `${get(item, this.fieldLabel()) || get(item, 'label') || get(item, 'name') || ' '}`;
+            const getValue = this.config()?.getValue;
+            if (getValue) {
+                fieldLabel = getValue(item) || ' ';
+            }
+            const itemExits = this.checkExits(fieldLabel, get(item, this.fieldKey()));
+            if (itemExits?.isItemSelected) {
+                Object.assign(itemExits.item, item);
+                return;
+            }
+            itemsNotExits.push(item);
+        });
+        this.processData(itemsNotExits, ignoreValidate, ignoreEmitKeySelectedWhenItemsNotExitsEmpty);
+    }
+    handlerPopoverEvent(type) {
+        this.typePopover.set(type);
+        if (type === 'click') {
+            return;
+        }
+        if (type === 'remove') {
+            this.showList.set(false);
+            this.outShowListEvent.emit(false);
+            this.inputFunctionControl()?.blur();
+            return;
+        }
+        this.showList.set(true);
+        this.outShowListEvent.emit(true);
+        this.inputFunctionControl()?.focus();
+    }
+    handlerPopoverContentEvent(position) {
+        if (this.positionList() === position) {
+            return;
+        }
+        this.positionList.set(position);
+    }
+    async handlerRemoveItemSelected(event, itemRemove, ignoreValid) {
+        event.stopPropagation();
+        this.flagMouse.set({ isMouseEnter: true, isMouseEnterContent: true });
+        this.timeOutFlag.set(setTimeout(() => this.flagMouse.set({ isMouseEnter: false, isMouseEnterContent: false }), 250));
+        this.itemsSelected.update(items => items.filter(item => ((isNil(get(itemRemove, this.fieldKey())) || isNil(get(item, this.fieldKey()))) && get(itemRemove, 'fieldLabel').trim() !== item.fieldLabel.trim() || (!isNil(get(itemRemove, this.fieldKey())) && !isNil(get(item, this.fieldKey())) && get(itemRemove, this.fieldKey()) !== get(item, this.fieldKey())))));
+        this.itemChangeUnSelect.set(itemRemove);
+        if (itemRemove && !isNil(get(itemRemove, this.fieldKey())) && `${get(itemRemove, this.fieldKey())}`.search(this.fakeId()) >= 0) {
+            this.keysHiddenItem.update(items => ([...items || [], get(itemRemove, this.fieldKey())]));
+        }
+        this.keysSelected.set(Array.from(new Set(this.itemsSelected().map(item => get(item, this.fieldKey())))));
+        this.disableWhenMaxItem.set(false);
+        const maxItemInput = this.maxItemInput();
+        if (maxItemInput && maxItemInput <= this.itemsSelected().length) {
+            this.disableWhenMaxItem.set(true);
+        }
+        if (!this.showList()) {
+            this.outSelectMultiItem.emit(this.getItemSelected());
+            this.checkViewChange(true, ignoreValid);
+            return;
+        }
+        if (this.showList()) {
+            this.tempIgnoreEmit.set(true);
+        }
+        if (!ignoreValid) {
+            this.checkValid();
+        }
+        this.tempIgnoreEmit.set(false);
+    }
+    handlerInputFunctionControl(event) {
+        this.inputFunctionControl.set(event);
+    }
+    handlerFocusAndBlurEvent(event) {
+        this.focus.set(false);
+        if (event.name === 'focus') {
+            this.focus.set(true);
+        }
+        if (event.name === 'blur' && this.typePopover()?.includes('mouseleave') && this.validRequired() && (!this.itemsSelected() || !this.itemsSelected().length)) {
+            this.checkValid();
+        }
+    }
+    handlerClickOutside(event) {
+        event.stopPropagation();
+        clearTimeout(this.timeoutClickOutside());
+        this.timeoutClickOutside.set(setTimeout(() => {
+            if (this.showList() || !this.removeTextSearchWhenBlurInput()) {
+                return;
+            }
+            this.valueInput.set('');
+            this.keySearch.set('');
+            this.inputFunctionControl()?.resetValue();
+        }, 250));
+    }
+    async handlerEnterEvent() {
+        if (!this.valueInput() || !`${this.valueInput()}`.trim()) {
+            return;
+        }
+        if (this.config()?.ignoreEnterCreateNewItem) {
+            const itemExits = this.checkExits();
+            if (!itemExits || itemExits.isItemSelected) {
+                return;
+            }
+            this.processData([itemExits.item]);
+            this.handlerValueChangeSearch('');
+            return;
+        }
+        if (!this.functionCheckPermissionCreateTag()()) {
+            return;
+        }
+        const itemExits = this.checkExits();
+        const valueInput = `${this.valueInput()}`.trim();
+        const newItem = { [this.fieldLabel()]: valueInput };
+        if (this.fieldKey()) {
+            newItem[this.fieldKey()] = `${this.fakeId()}${valueInput}${uuid()}`;
+        }
+        if (!itemExits) {
+            if (this.checkPattern([newItem])) {
+                const itemBuildValue = { ...newItem };
+                const buildValue = this.config()?.buildValue;
+                if (buildValue) {
+                    buildValue(itemBuildValue, newItem[this.fieldLabel()]);
+                }
+                newItem[this.fieldLabel()] = itemBuildValue[this.fieldLabel()];
+                if (this.enterAutoAddTagToList()) {
+                    this.listFunctionControl()?.updateData({ newData: [newItem], functionCustomAddDataToStore: (newData, store) => store.update(value => ([...newData, ...value])) });
+                }
+                this.processData([newItem]);
+                this.handlerValueChangeSearch('');
+            }
+            return;
+        }
+        if (itemExits.isItemSelected) {
+            return;
+        }
+        this.processData([itemExits.item]);
+        this.handlerValueChangeSearch('');
+    }
+    async handlerValueChangeSearch(value) {
+        this.valueInput.set(`${value}`);
+        if (!`${value || ''}`.trim()) {
+            this.keySearchChangeSub()?.unsubscribe();
+            this.keySearchChangeSub.set(undefined);
+            this.timeOutChangeSearch.set(setTimeout(() => this.keySearch.set('')));
+            if (!this.config()?.ignoreEnterCreateNewItem) {
+                this.checkValid();
+            }
+            return;
+        }
+        if (this.config()?.ignoreInput) {
+            return;
+        }
+        if (!this.keySearchChangeSub()) {
+            this.setEventKeySearch();
+        }
+        this.keySearchChange.next(`${(value || '')}`.trim());
+    }
+    setEventKeySearch() {
+        if (this.keySearchChangeSub()) {
+            return;
+        }
+        this.keySearchChangeSub.set(this.keySearchChange.pipe(debounceTime(1500), takeUntil(this.onDestroy)).subscribe(value => this.keySearch.set(`${(value || '')}`.trim())));
+    }
+    processData(items, ignoreValidate = false, ignoreEmitKeySelectedWhenItemsNotExitsEmpty) {
+        if (!items || !items.length) {
+            const itemsSelected = this.getItemSelected();
+            if (!ignoreEmitKeySelectedWhenItemsNotExitsEmpty) {
+                this.outSelectMultiItem.emit(itemsSelected);
+            }
+            this.keysSelected.set(Array.from(new Set(itemsSelected?.map(item => get(item, this.fieldKey())))));
+            this.checkViewChange(false, ignoreValidate);
+            return;
+        }
+        const itemsMapping = items.map(item => {
+            const ref = get(item, 'ref') || item;
+            item = cloneDeep(ref);
+            set(item, 'ref', ref);
+            this.updateFieldLabel(item);
+            const getDisableItem = this.config()?.getDisableItem;
+            const getStyles = this.config()?.getStyles;
+            const getStylesTagSpecific = this.config()?.getStylesTagSpecific;
+            if (getDisableItem) {
+                set(item, 'disableItem', getDisableItem(item));
+            }
+            if (getStyles) {
+                set(item, 'ngStyles', getStyles(item));
+            }
+            if (getStylesTagSpecific) {
+                const type = getStylesTagSpecific(item);
+                if (type === 'specific_violet_color') {
+                    set(item, 'ngStyles', { color: '#7239EA', backgroundColor: '#F1EBFD' });
+                }
+            }
+            return item;
+        });
+        this.itemsSelected.update(items => [...items, ...itemsMapping]);
+        this.keysSelected.set(Array.from(new Set(this.itemsSelected().map(item => get(item, this.fieldKey())))));
+        this.outSelectMultiItem.emit(this.getItemSelected());
+        this.checkViewChange(false, ignoreValidate);
+    }
+    handlerDataChange(items) {
+        this.itemsOfList.set(items);
+        this.popoverFunctionControl()?.updatePopoverOverlayPosition();
+        if (!this.config()?.ignoreInput) {
+            this.inputFunctionControl()?.focus();
+        }
+    }
+    handlerLoading(event) {
+        this.loading.set(event);
+    }
+    checkViewChange(ignoreScrollBottom, ignoreValidate = false) {
+        this.disableWhenMaxItem.set(false);
+        const maxItemInput = this.maxItemInput();
+        if (maxItemInput && maxItemInput <= this.itemsSelected().length) {
+            this.disableWhenMaxItem.set(true);
+        }
+        this.timeOutCheckViewChange.set((setTimeout(() => {
+            const scrollHeight = this.tagsEl()?.nativeElement.scrollHeight;
+            if (!isNil(scrollHeight) && this.clientHeight() !== scrollHeight && this.positionList() !== 'top') {
+                this.popoverFunctionControl()?.updatePopoverOverlayPosition();
+            }
+            if (!ignoreScrollBottom && this.tagsEl() && this.tagsEl().nativeElement) {
+                this.tagsEl().nativeElement.scrollTop = scrollHeight;
+            }
+            this.clientHeight.set(scrollHeight);
+        }, 250)));
+        if (!ignoreValidate) {
+            this.checkValid();
+        }
+    }
+    checkExits(label, id) {
+        let itemExits;
+        if (!isNil(id) && !`${id}`.includes(this.fakeId()) && this.fieldKey()) {
+            itemExits = this.itemsSelected().find(item => !isNil(get(item, this.fieldKey())) && `${get(item, this.fieldKey())}`.trim() === `${id}`);
+            if (itemExits) {
+                return { item: itemExits, isItemSelected: !!itemExits };
+            }
+            return;
+        }
+        if (!label) {
+            label = `${(this.valueInput || '')}`.trim();
+        }
+        itemExits = this.itemsSelected().find(item => !isNil(get(item, 'fieldLabel')) && (get(item, 'fieldLabel').trim() === label?.trim()) || (this.checkExitIsLabelInclude() && get(item, 'fieldLabel').trim().includes(label?.trim())) || (this.checkExitByFields() && this.checkExitByFields()?.some(field => get(item, field)?.trim() === label?.trim() || get(item, field)?.trim() === escapeHtml(label?.trim() || '') || escapeHtml(get(item, field)?.trim() || ' ') === escapeHtml(label?.trim() || ''))));
+        if (itemExits) {
+            return { item: itemExits, isItemSelected: true };
+        }
+        itemExits = this.itemsOfList().find(item => !isNil(get(item, 'fieldLabel')) && (get(item, 'fieldLabel').trim().includes() === label?.trim()) || (this.checkExitIsLabelInclude() && get(item, 'fieldLabel').trim().includes(label?.trim())) || (this.checkExitByFields() && this.checkExitByFields()?.some(field => get(item, field)?.trim() === label?.trim() || escapeHtml(get(item, field)?.trim() || ' ') === escapeHtml(label?.trim() || '') || get(item, field)?.trim() === escapeHtml(label?.trim() || ''))));
+        if (itemExits) {
+            return { item: itemExits, isItemSelected: false };
+        }
+        return;
+    }
+    handlerSelectedKey(event) {
+        if (!event || !event.item) {
+            return;
+        }
+        if (!isNil(event?.key)) {
+            this.popoverFunctionControl()?.removePopoverOverlay();
+        }
+        if (this.itemsSelected()[0]) {
+            this.tempIgnoreEmit.set(true);
+            this.handlerRemoveItemSelected({ stopPropagation: () => { return; } }, this.itemsSelected()[0], this.itemsSelected()[0].disableItem);
+            this.tempIgnoreEmit.set(false);
+        }
+        this.updateItemsSelected([event.item], !!this.itemsSelected()[0]); // Bug #36075
+    }
+    getFlagEmitSelectedItem(keys) {
+        if (!this.ignoreEmitWhenSameDataSelected() || keys.length !== this.itemsSelected().length) {
+            return false;
+        }
+        for (const key of keys) {
+            if (!this.itemsSelected().some(item => get(item, this.fieldKey()) === key)) {
+                return false;
+            }
+        }
+        return true;
+    }
+    async handlerSelectMultiKey(event) {
+        if (!event) {
+            return;
+        }
+        const keys = [];
+        const items = [];
+        if (event.keys && event.keys.length && (!event.mapKeys || !event.mapKeys.length)) {
+            keys.push(...event.keys);
+        }
+        const ignoreEmitKeySelectedWhenItemsNotExitsEmpty = this.getFlagEmitSelectedItem(cloneDeep(event.keys ?? []));
+        event.mapKeys.forEach(mapKey => {
+            if (isNil(mapKey.key)) {
+                return;
+            }
+            if (mapKey.item) {
+                return items.push(mapKey.item);
+            }
+            if (!Array.isArray(this.itemsSelected)) {
+                return keys.push(mapKey.key);
+            }
+            const item = this.itemsSelected.find(item => get(item, this.fieldKey()) === mapKey.key);
+            if (item) {
+                return items.push(item);
+            }
+            return keys.push(mapKey.key);
+        });
+        if (keys.length) {
+            const resultData = await this.getDetailByIds(keys, true);
+            items.push(...resultData);
+        }
+        const messageEmpty = this.validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID;
+        let ignoreValidate = true;
+        if (messageEmpty === this.error()?.message) {
+            ignoreValidate = false;
+        }
+        const itemRemove = this.itemsSelected().find(itemSelected => get(itemSelected, this.fieldKey()) && !(items.some(item => get(itemSelected, this.fieldKey()) === get(item, this.fieldKey()))));
+        this.itemsSelected.update(itemsSelected => itemsSelected.filter(itemSelected => !get(itemSelected, this.fieldKey()) || (event.keys.length && items.some(item => get(itemSelected, this.fieldKey()) === get(item, this.fieldKey())))));
+        if (itemRemove) {
+            if (this.enterAutoAddTagToList() && !isNil(get(itemRemove, this.fieldKey())) && `${get(itemRemove, this.fieldKey())}`.search(this.fakeId()) >= 0) {
+                this.keysHiddenItem.update(items => [...(items || []), get(itemRemove, this.fieldKey())]);
+            }
+        }
+        if (!event.keys.length) {
+            this.checkValid();
+            this.keysSelected.set(Array.from(new Set(this.itemsSelected()?.map(item => get(item, this.fieldKey())))));
+            this.outSelectMultiItem.emit(this.getItemSelected());
+            this.checkViewChange(false, ignoreValidate);
+            return;
+        }
+        this.updateItemsSelected(items, ignoreValidate, ignoreEmitKeySelectedWhenItemsNotExitsEmpty);
+        this.checkValid();
+    }
+    async getDetailByIds(keys, isResponseData) {
+        const httpRequestDetailItemByIds = this.httpRequestDetailItemByIds();
+        if (!httpRequestDetailItemByIds || this.loadingDetail() || !(keys instanceof Array) || !keys.length) {
+            return [];
+        }
+        this.updateLoadingDetail(true);
+        const cloneHttpDetailConfig = cloneDeep(httpRequestDetailItemByIds);
+        try {
+            const { argumentsValue, guideAutoUpdateArgumentsValue } = cloneHttpDetailConfig;
+            if (!guideAutoUpdateArgumentsValue || !guideAutoUpdateArgumentsValue.detailById) {
+                return [];
+            }
+            guideAutoUpdateArgumentsValue.detailById.fieldGetValue = 'keys';
+            this.httpRequestService.updateArguments(argumentsValue, { keys: keys }, {}, '', false, false, guideAutoUpdateArgumentsValue);
+            const result = (await this.httpRequestService.callApi(cloneHttpDetailConfig));
+            if (!isResponseData) {
+                this.updateItemsSelected(result.data || []);
+                this.updateLoadingDetail(false);
+                return [];
+            }
+            this.updateLoadingDetail(false);
+            return result.data || [];
+        }
+        catch (error) {
+            console.log(error);
+            this.updateLoadingDetail(false);
+        }
+        return [];
+    }
+    async checkValid() {
+        const valid = this.itemsSelected() && this.itemsSelected().length ? true : false;
+        const stateError = !!this.error();
+        this.error.set(undefined);
+        if (this.validRequired() && !valid) {
+            this.error.set({ ...this.validRequired(), message: this.validRequired()?.message || ERROR_MESSAGE_EMPTY_VALID });
+        }
+        if (!this.error()) {
+            this.checkPattern(this.itemsSelected());
+            this.checkMaxItemSelectedValid();
+        }
+        if (!this.tempIgnoreEmit()) {
+            this.outValidEvent.emit(!this.error());
+        }
+        if (stateError !== !!this.error()) {
+            this.popoverFunctionControl()?.updatePopoverOverlayPosition();
+        }
+        return !this.error();
+    }
+    checkMaxItemSelectedValid() {
+        const validMaxItemSelected = this.validMaxItemSelected();
+        if (validMaxItemSelected && this.itemsSelected().length > validMaxItemSelected.value) {
+            this.error.set({ ...validMaxItemSelected, message: validMaxItemSelected.message || ERROR_MESSAGE_MAX_VALID, interpolateParams: { value: validMaxItemSelected.value } });
+            return false;
+        }
+        return true;
+    }
+    checkPattern(items) {
+        const validPattern = this.validPattern();
+        if (!validPattern || !validPattern.length || !items || !items.length) {
+            return true;
+        }
+        for (const valid of validPattern) {
+            if (valid.pattern && items.some(item => !valid.pattern.test(get(item, this.fieldLabel())))) {
+                this.error.set({ ...valid, message: valid.message || ERROR_MESSAGE_PATTEN_VALID });
+                return false;
+            }
+        }
+        return true;
+    }
+    handlerClickButtonOther(event) {
+        this.outClickButtonOther.emit(event);
+    }
+    getItemSelected() {
+        return this.itemsSelected().map(item => {
+            const itemMap = { ...item };
+            if (!isNil(get(itemMap, this.fieldKey())) && `${get(itemMap, this.fieldKey())}`.search(this.fakeId()) === 0) {
+                set(itemMap, this.fieldKey(), '');
+            }
+            return itemMap;
+        });
+    }
+    async resetToDefaultDataSelected(itemSelected) {
+        if (itemSelected && Array.isArray(itemSelected)) {
+            this.itemsSelected.set([]);
+            this.updateItemsSelected(itemSelected);
+            return;
+        }
+        itemSelected = new Array();
+        if (!this.fieldKey()) {
+            return;
+        }
+        const defaultKeysSelected = this.defaultKeysSelected();
+        if (defaultKeysSelected && Array.isArray(defaultKeysSelected)) {
+            this.itemsSelected.set([]);
+            this.getDetailByIds(defaultKeysSelected);
+            return;
+        }
+        const defaultItemsSelected = this.defaultItemsSelected();
+        if (defaultItemsSelected && Array.isArray(defaultItemsSelected)) {
+            this.itemsSelected.set([]);
+            this.updateItemsSelected(defaultItemsSelected);
+            return;
+        }
+    }
+    handlerFunctionControlList(event) {
+        this.listFunctionControl.set(event);
+    }
+    async focusInput() {
+        this.inputFunctionControl()?.focus();
+    }
+    handlerChangeFlagMouse(event) {
+        this.outChangStageFlagMouse.emit(event);
+    }
+    handlerChangStageFlagMouse(flag) {
+        this.flagMouse.set(flag);
+    }
+    async resetError() {
+        this.error.set(undefined);
+    }
+    updateLoadingDetail(event) {
+        this.loadingDetail.set(event);
+        this.outLoadingGetDetailSelected.emit(event);
+    }
+    async updateItemSelectedDisable() {
+        const getDisableItem = this.config()?.getDisableItem;
+        if (!getDisableItem) {
+            return;
+        }
+        this.itemsSelected.update(itemsSelected => itemsSelected.map(item => ({ ...item, disableItem: getDisableItem(item) })));
+    }
+    async refreshListData() {
+        this.listFunctionControl()?.refresh();
+    }
+    ngOnDestroy() {
+        this.onDestroy.next();
+        clearTimeout(this.timeOutFlag());
+        clearTimeout(this.timeOutChangeSearch());
+        clearTimeout(this.timeOutCheckViewChange());
+        clearTimeout(this.timeoutClickOutside());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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 }, 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 [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 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() || 1000,\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 class=\"relative\"\n      [class.cursor-pointer]=\"!disable() && !readonly()\">\n      @if (config()?.uiLikeDropdown) {\n        <i class=\"flex text-[16px] absolute right-[16px] top-[8px] libs-ui-icon-move-right rotate-90 z-[1]\"\n          [class.text-[#6a7383]]=\"!readonly() && !readonly()\"\n          [class.libs-ui-readonly]=\"readonly()\"\n          [class.libs-ui-disable]=\"disable()\">\n        </i>\n      }\n      <div #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.bg-[#f8f9fa]]=\"disable() || readonly()\"\n        [class.libs-ui-border-primary-general]=\"focus() && showBorderActiveWhenFocusInput()\"\n        LibsUiComponentsClickOutsideDirective\n        (outOutside)=\"handlerClickOutside($event)\">\n        @for (item of itemsSelected(); track item[fieldKey()]) {\n          <div [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            @if (fieldGetImage(); as fieldGetImage) {\n              <div class=\"flex items-center justify-center h-full\">\n                <libs_ui-components-avatar [classInclude]=\"classAvatarInclude() || 'mr-[8px]'\"\n                  [size]=\"imageSize()\"\n                  [linkAvatar]=\"item[fieldGetImage]\"\n                  [linkAvatarError]=\"config()?.linkImageError\"\n                  [idGenColor]=\"item[fieldGetTextAvatar()]\"\n                  [textAvatar]=\"item[fieldGetTextAvatar()]\"\n                  [getLastTextAfterSpace]=\"getLastTextAfterSpace()\" />\n              </div>\n            }\n            <span class=\"libs-ui-font-h6r\"\n              [innerHtml]=\"(item.fieldLabel || ' ') | translate\">\n            </span>\n            @if (!disable() && !item.disableItem && !readonly()) {\n              <div class=\"flex items-center justify-center ml-[8px]\">\n                <i #iconCloseEl\n                  [attr.specificStyle]=\"!!(item?.bullet || item?.ngStyles)\"\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]=\"(item?.bullet || item?.ngStyles) | LibsUiComponentsTagsGetColorPipe:iconCloseEl\"\n                  (click)=\"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 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 class=\"flex items-center pb-[4px] pt-[2px] ml-[11px] libs-ui-font-h5r\"\n              [class.text-[#9ca2ad]]=\"disable()\">\n              {{ (placeholder() || 'i18n_select_value') | translate }}\n            </div>\n          }\n        }\n      </div>\n      @if (error() && !config()?.ignoreShowError) {\n        <div class=\"text-[#ee2d41] libs-ui-font-h7r mt-[8px]\">{{ (error()?.message || ' ') | translate:(error()?.interpolateParams || {}) }}</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 [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]=\"keysDisableItem()\"\n      [dividerClassInclude]=\"listDividerClassInclude() ?? 'hidden'\"\n      [buttonsOther]=\"listButtonsOther()\"\n      [backgroundListCustom]=\"listBackgroundListCustom()\"\n      [itemChangeUnSelect]=\"itemChangeUnSelect()\"\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-]: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{background:var(--libs-ui-color-light-6, #D3E2FD)}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:active:before{background:var(--libs-ui-color-light-5, #BDD4FC)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]: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{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{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: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsInputsInputComponent, selector: "libs_ui-components-inputs-input", inputs: ["tagInput", "dataType", "tabInsertContentTagInput", "textAreaEnterNotNewLine", "emitEmptyInDataTypeNumber", "keepZeroInTypeInt", "autoAddZeroLessThan10InTypeInt", "ignoreBlockInputMaxValue", "hiddenContent", "maxValueNumber", "minValueNumber", "fixedFloat", "acceptNegativeValue", "valueUpDownNumber", "classInclude", "maxLength", "readonly", "disable", "noBorder", "backgroundNone", "borderError", "useColorModeExist", "placeholder", "keepPlaceholderOnly", "value", "autoRemoveEmoji", "defaultHeight", "minHeightTextArea", "maxHeightTextArea", "focusTimeOut", "blurTimeOut", "zIndexPopoverContent", "classContainerInput", "showCount", "ignoreStopPropagationEvent", "resize", "templateLeftBottomInput", "templateRightBottomInput", "classContainerBottomInput", "ignoreWidthInput100", "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: ["getLastTextAfterSpace", "typeShape", "classInclude", "size", "linkAvatar", "linkAvatarError", "idGenColor", "textAvatar", "classImageInclude"], outputs: ["outAvatarError"] }, { kind: "component", type: LibsUiComponentsListComponent, selector: "libs_ui-components-list", inputs: ["hiddenInputSearch", "dropdownTabKeyActive", "keySearch", "itemChangeUnSelect", "paddingLeftItem", "config", "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", "outLoading", "outFunctionsControl", "outChangStageFlagMousePopover", "outLoadItemsComplete"] }, { kind: "pipe", type: LibsUiComponentsTagsGetColorPipe, name: "LibsUiComponentsTagsGetColorPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsTagsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-tags', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        TranslateModule, NgTemplateOutlet, NgStyle, LibsUiComponentsClickOutsideDirective,
+                        LibsUiComponentsLabelComponent, LibsUiComponentsPopoverComponent,
+                        LibsUiComponentsInputsInputComponent, LibsUiComponentsAvatarComponent,
+                        LibsUiComponentsListComponent, LibsUiComponentsTagsGetColorPipe
+                    ], template: "<div class=\"flex flex-col w-full h-full\">\n  @if (labelConfig(); as labelConfig) {\n    <libs_ui-components-label [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 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() || 1000,\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 class=\"relative\"\n      [class.cursor-pointer]=\"!disable() && !readonly()\">\n      @if (config()?.uiLikeDropdown) {\n        <i class=\"flex text-[16px] absolute right-[16px] top-[8px] libs-ui-icon-move-right rotate-90 z-[1]\"\n          [class.text-[#6a7383]]=\"!readonly() && !readonly()\"\n          [class.libs-ui-readonly]=\"readonly()\"\n          [class.libs-ui-disable]=\"disable()\">\n        </i>\n      }\n      <div #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.bg-[#f8f9fa]]=\"disable() || readonly()\"\n        [class.libs-ui-border-primary-general]=\"focus() && showBorderActiveWhenFocusInput()\"\n        LibsUiComponentsClickOutsideDirective\n        (outOutside)=\"handlerClickOutside($event)\">\n        @for (item of itemsSelected(); track item[fieldKey()]) {\n          <div [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            @if (fieldGetImage(); as fieldGetImage) {\n              <div class=\"flex items-center justify-center h-full\">\n                <libs_ui-components-avatar [classInclude]=\"classAvatarInclude() || 'mr-[8px]'\"\n                  [size]=\"imageSize()\"\n                  [linkAvatar]=\"item[fieldGetImage]\"\n                  [linkAvatarError]=\"config()?.linkImageError\"\n                  [idGenColor]=\"item[fieldGetTextAvatar()]\"\n                  [textAvatar]=\"item[fieldGetTextAvatar()]\"\n                  [getLastTextAfterSpace]=\"getLastTextAfterSpace()\" />\n              </div>\n            }\n            <span class=\"libs-ui-font-h6r\"\n              [innerHtml]=\"(item.fieldLabel || ' ') | translate\">\n            </span>\n            @if (!disable() && !item.disableItem && !readonly()) {\n              <div class=\"flex items-center justify-center ml-[8px]\">\n                <i #iconCloseEl\n                  [attr.specificStyle]=\"!!(item?.bullet || item?.ngStyles)\"\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]=\"(item?.bullet || item?.ngStyles) | LibsUiComponentsTagsGetColorPipe:iconCloseEl\"\n                  (click)=\"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 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 class=\"flex items-center pb-[4px] pt-[2px] ml-[11px] libs-ui-font-h5r\"\n              [class.text-[#9ca2ad]]=\"disable()\">\n              {{ (placeholder() || 'i18n_select_value') | translate }}\n            </div>\n          }\n        }\n      </div>\n      @if (error() && !config()?.ignoreShowError) {\n        <div class=\"text-[#ee2d41] libs-ui-font-h7r mt-[8px]\">{{ (error()?.message || ' ') | translate:(error()?.interpolateParams || {}) }}</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 [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]=\"keysDisableItem()\"\n      [dividerClassInclude]=\"listDividerClassInclude() ?? 'hidden'\"\n      [buttonsOther]=\"listButtonsOther()\"\n      [backgroundListCustom]=\"listBackgroundListCustom()\"\n      [itemChangeUnSelect]=\"itemChangeUnSelect()\"\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-]: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{background:var(--libs-ui-color-light-6, #D3E2FD)}.libs-ui-tags .libs-ui-tags-item i[class*=libs-ui-icon-]:active:before{background:var(--libs-ui-color-light-5, #BDD4FC)}.libs-ui-tags .libs-ui-tags-item [specificStyle=true] i[class*=libs-ui-icon-]: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{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{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"] }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsTagsComponent };
+//# sourceMappingURL=libs-ui-components-tags.mjs.map