@libs-ui/components-inputs-input 0.2.306 → 0.2.307-0

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

@@ -93,9 +93,11 @@ const indexInputHtml = (customStyle) => `
 		margin: 0;
 		resize: none;
 	}
-	${customStyle.borderColor ? `textarea:focus:not(:read-only):not(:disabled) {
+	${customStyle.borderColor
+    ? `textarea:focus:not(:read-only):not(:disabled) {
 		border: 1px solid ${customStyle.borderColor};
-	}` : ''}
+	}`
+    : ''}
 
 	textarea::-webkit-input-placeholder {
 		color: rgba(78, 78, 78, 0.5) !important;
@@ -146,10 +148,10 @@ class LibsUiComponentsInputsInputComponent {
     dataTextPaste = signal('');
     onDestroy = new Subject();
     // #region INPUT
-    tagInput = input('input', { transform: value => value || 'input' });
-    dataType = input('string', { transform: val => val || 'string' });
-    typeInput = input('text', { transform: val => val || 'text' });
-    modeInput = input('text', { transform: val => val || 'text' });
+    tagInput = input('input', { transform: (value) => value || 'input' });
+    dataType = input('string', { transform: (val) => val || 'string' });
+    typeInput = input('text', { transform: (val) => val || 'text' });
+    modeInput = input('text', { transform: (val) => val || 'text' });
     tabInsertContentTagInput = input(false);
     textAreaEnterNotNewLine = input(false);
     emitEmptyInDataTypeNumber = input(false);
@@ -176,8 +178,8 @@ class LibsUiComponentsInputsInputComponent {
     defaultHeight = input(32, { transform: (value) => value || 32 });
     minHeightTextArea = input();
     maxHeightTextArea = input(this.DEFAULT_MAX_HEIGHT_TEXT_AREA, { transform: (value) => value || this.DEFAULT_MAX_HEIGHT_TEXT_AREA });
-    focusTimeOut = input(600, { transform: value => value ?? 600 });
-    selectAllTimeOut = input(600, { transform: value => value ?? 600 });
+    focusTimeOut = input(600, { transform: (value) => value ?? 600 });
+    selectAllTimeOut = input(600, { transform: (value) => value ?? 600 });
     blurTimeOut = input(32, { transform: (value) => value || 32 });
     zIndexPopoverContent = input(10, { transform: (value) => value || 10 });
     classContainerInput = input('w-full', { transform: (value) => value || 'w-full' });
@@ -193,7 +195,7 @@ class LibsUiComponentsInputsInputComponent {
     popoverContentIconLeft = input('', { transform: (value) => value || '' });
     iconRightClass = input();
     popoverContentIconRight = input('', { transform: (value) => value || '' });
-    resetAutoCompletePassword = input(false, { transform: value => value ?? false });
+    resetAutoCompletePassword = input(false, { transform: (value) => value ?? false });
     acceptOnlyClickIcon = input(false);
     setIconRightColorSameColorDisableReadOnly = input(false);
     onlyAcceptNegativeValue = input(false);
@@ -256,15 +258,7 @@ class LibsUiComponentsInputsInputComponent {
             return;
         }
         this.outHeightAreaChange.emit({ isChange: false, height: this.Element?.scrollHeight });
-        this.outFunctionsControl.emit({
-            focus: this.focus.bind(this),
-            blur: this.blur.bind(this),
-            insertContent: this.addDataToSelectionInput.bind(this),
-            resetValue: this.resetValue.bind(this),
-            getElementValue: this.getElementValue.bind(this),
-            checkAndDisableUpDownButton: this.checkAndDisableUpDownButton.bind(this),
-            selectAllContent: this.selectAllContent.bind(this)
-        });
+        this.outFunctionsControl.emit(this.FunctionsControl);
         this.init();
         this.initEvent('focus', this.ignoreStopPropagationEvent()).subscribe((e) => this.outFocusAndBlurEvent.emit({ name: 'focus', event: e }));
         this.initEvent('blur', this.ignoreStopPropagationEvent()).subscribe((e) => this.outFocusAndBlurEvent.emit({ name: 'blur', event: e }));
@@ -275,50 +269,71 @@ class LibsUiComponentsInputsInputComponent {
         const pasteEvent = this.initEvent('paste', this.ignoreStopPropagationEvent());
         const keyupEvent = this.initEvent('keyup', this.ignoreStopPropagationEvent());
         this.initEvent('click', this.ignoreStopPropagationEvent() ?? true).subscribe();
-        this.initEvent('dragover', this.ignoreStopPropagationEvent()).pipe(tap((event) => {
+        this.initEvent('dragover', this.ignoreStopPropagationEvent())
+            .pipe(tap((event) => {
             event.preventDefault();
             event.stopPropagation();
             if (event.dataTransfer) {
                 event.dataTransfer.dropEffect = 'copy';
             }
-        })).subscribe();
+        }))
+            .subscribe();
         this.initEvent('drop', this.ignoreStopPropagationEvent()).subscribe(this.checkAndEmitFiles.bind(this));
         pasteEvent.subscribe(this.checkAndEmitFiles.bind(this));
         this.combineObservable(mouseDownEvent, pasteEvent);
         this.combineObservable(mouseDownEvent, cutEvent);
-        keyDownEvent.pipe(take(1), tap((e) => this.checkTypeNumber(e, 'key')), mergeMap(() => inputEvent), tap((e) => this.checkTypeNumber(e, 'data'))).subscribe((e) => {
+        keyDownEvent
+            .pipe(take(1), tap((e) => this.checkTypeNumber(e, 'key')), mergeMap(() => inputEvent), tap((e) => this.checkTypeNumber(e, 'data')))
+            .subscribe((e) => {
             if (this.dataType() === 'string' && this.maxLength() && (e.inputType === 'insertCompositionText' || e.inputType === 'insertText') && e.target.value?.length > (this.maxLength() || 0)) {
                 e.target.value = e.target.value.slice(0, this.maxLength());
             }
             this.processEventAndEmitValue(e);
         });
-        keyupEvent.pipe(filter((event) => event.keyCode === UtilsKeyCodeConstant.ENTER), filter((event) => !this.textAreaEnterNotNewLine() || (this.textAreaEnterNotNewLine() && !event.shiftKey))).subscribe((event) => this.outEnterEvent.emit(event));
+        keyupEvent
+            .pipe(filter((event) => event.keyCode === UtilsKeyCodeConstant.ENTER), filter((event) => !this.textAreaEnterNotNewLine() || (this.textAreaEnterNotNewLine() && !event.shiftKey)))
+            .subscribe((event) => this.outEnterEvent.emit(event));
         if (this.dataType() === 'string' && (this.tagInput() !== 'input' || (this.tagInput() === 'input' && this.tabInsertContentTagInput()))) {
-            keyDownEvent.pipe(filter((event) => event.keyCode === UtilsKeyCodeConstant.TAB), tap((event) => event.preventDefault()), filter((event) => !event.target.value || !this.maxLength() || event.target.value.length < (this.maxLength() || 25)), tap((event) => {
+            keyDownEvent
+                .pipe(filter((event) => event.keyCode === UtilsKeyCodeConstant.TAB), tap((event) => event.preventDefault()), filter((event) => !event.target.value || !this.maxLength() || event.target.value.length < (this.maxLength() || 25)), tap((event) => {
                 if (this.readonly() || this.disable()) {
                     return;
                 }
                 this.insetValueToSelectionStart('\t', event);
-            })).subscribe();
+            }))
+                .subscribe();
         }
         if (this.textAreaEnterNotNewLine()) {
-            keyDownEvent.pipe(filter((event) => event.keyCode === UtilsKeyCodeConstant.ENTER && !event.shiftKey), tap((e) => e.preventDefault())).subscribe();
+            keyDownEvent
+                .pipe(filter((event) => event.keyCode === UtilsKeyCodeConstant.ENTER && !event.shiftKey), tap((e) => e.preventDefault()))
+                .subscribe();
         }
         this.countDisplayComputed();
     }
     // #region FUNCTIONS
+    get FunctionsControl() {
+        return {
+            focus: this.focus.bind(this),
+            blur: this.blur.bind(this),
+            insertContent: this.addDataToSelectionInput.bind(this),
+            resetValue: this.resetValue.bind(this),
+            getElementValue: this.getElementValue.bind(this),
+            checkAndDisableUpDownButton: this.checkAndDisableUpDownButton.bind(this),
+            selectAllContent: this.selectAllContent.bind(this),
+        };
+    }
     updateMaxLengthMinMaxValueByDataType() {
         if (this.dataType() === 'int' || this.dataType() === 'float') {
-            this.maxLength.update(value => {
+            this.maxLength.update((value) => {
                 return !value || value > 21 ? 21 : value;
             });
-            this.minValueNumber.update(value => value ?? Number.MIN_SAFE_INTEGER);
-            this.maxValueNumber.update(value => value ?? Number.MAX_SAFE_INTEGER);
+            this.minValueNumber.update((value) => value ?? Number.MIN_SAFE_INTEGER);
+            this.maxValueNumber.update((value) => value ?? Number.MAX_SAFE_INTEGER);
         }
         if (this.dataType() === 'bigint') {
-            this.maxLength.update(value => !value || value > 25 ? 25 : value);
-            this.fixedFloat.update(value => value ?? 4);
-            this.maxLengthNumberCount.update(value => value ?? 19);
+            this.maxLength.update((value) => (!value || value > 25 ? 25 : value));
+            this.fixedFloat.update((value) => value ?? 4);
+            this.maxLengthNumberCount.update((value) => value ?? 19);
         }
     }
     async getElementValue() {
@@ -396,8 +411,8 @@ class LibsUiComponentsInputsInputComponent {
         }
         this.disableAsc.set(false);
         this.disableDesc.set(false);
-        this.minValueNumber.update(value => value ?? Number.MIN_SAFE_INTEGER);
-        this.maxValueNumber.update(value => value ?? Number.MAX_SAFE_INTEGER);
+        this.minValueNumber.update((value) => value ?? Number.MIN_SAFE_INTEGER);
+        this.maxValueNumber.update((value) => value ?? Number.MAX_SAFE_INTEGER);
         value = value ?? 0;
         if (!isNil(this.maxValueNumber()) && value >= (this.maxValueNumber() ?? Number.MAX_SAFE_INTEGER)) {
             this.disableAsc.set(true);
@@ -416,19 +431,23 @@ class LibsUiComponentsInputsInputComponent {
     }
     convertValue(value) {
         if (value && this.dataType() === 'bigint') {
-            const separator = (UtilsCache.getLang() === UtilsLanguageConstants.VI) ? '.' : ',';
+            const separator = UtilsCache.getLang() === UtilsLanguageConstants.VI ? '.' : ',';
             let [int, decimal] = value.split(separator);
             const decimalSplit = decimal ? decimal.split('') : [];
-            const decimalEveryZero = decimalSplit.every(item => item === '0');
+            const decimalEveryZero = decimalSplit.every((item) => item === '0');
             if (int === '-0' && (!decimal || decimalEveryZero)) {
                 int = '0';
             }
             if (!decimal || decimalEveryZero) {
                 decimal = '0';
             }
-            if (decimalSplit.some(item => item !== '0')) {
+            if (decimalSplit.some((item) => item !== '0')) {
                 const decimalReverse = decimalSplit.reverse().join('');
-                decimal = decimalReverse.replace(/(^[0]+)/, '').split('').reverse().join('');
+                decimal = decimalReverse
+                    .replace(/(^[0]+)/, '')
+                    .split('')
+                    .reverse()
+                    .join('');
             }
             return `${int}${separator}${decimal}`;
         }
@@ -443,20 +462,27 @@ class LibsUiComponentsInputsInputComponent {
         }
         let elementValue = this.convertValue(`${this.value() ?? ''}`);
         if (this.dataType() !== 'string') {
-            elementValue = elementValue.replace((new RegExp(`[^0-9.,${this.acceptNegativeValue() ? '-' : ''}]`, 'g')), '');
+            elementValue = elementValue.replace(new RegExp(`[^0-9.,${this.acceptNegativeValue() ? '-' : ''}]`, 'g'), '');
             if (UtilsCache.getLang() === UtilsLanguageConstants.EN) {
                 elementValue = elementValue.replace(/[,]/, '');
             }
         }
         this.Element.value = elementValue;
-        const eventFake = { preventDefault: () => { return; }, target: this.Element, data: elementValue, fakeEvent: true };
+        const eventFake = {
+            preventDefault: () => {
+                return;
+            },
+            target: this.Element,
+            data: elementValue,
+            fakeEvent: true,
+        };
         this.checkTypeNumber(eventFake, 'data');
         this.processEventAndEmitValue(eventFake);
     }
     processEventAndEmitValue(e) {
         const value = this.parseValueByDataType(e.target.value);
         if (this.dataType() !== 'string' && !this.ignoreBlockInputMaxValue() && !isNil(this.maxValueNumber()) && value > (this.maxValueNumber() || 0) && this.value() < value) {
-            const valueDisplay = viewDataNumberByLanguage(`${this.value()}`.replace(/[.]/g, ','), this.acceptNegativeValue(), (this.fixedFloat() ?? 14));
+            const valueDisplay = viewDataNumberByLanguage(`${this.value()}`.replace(/[.]/g, ','), this.acceptNegativeValue(), this.fixedFloat() ?? 14);
             e.target.value = `${this.getCheckZero(+valueDisplay, e.target.value)}${valueDisplay}`;
             return this.processEventAndEmitValue(e);
         }
@@ -487,18 +513,18 @@ class LibsUiComponentsInputsInputComponent {
         const valueCompare = formatNumber(valueDisplay).toString();
         const numbers = valueCompare.split('.');
         let lengthValueCompare = 0;
-        let maxLength = (this.acceptNegativeValue() && typeof +this.value() === 'number' && +this.value() < 0) ? (this.maxLength() || 21) + 1 : (this.maxLength() || 21);
+        let maxLength = this.acceptNegativeValue() && typeof +this.value() === 'number' && +this.value() < 0 ? (this.maxLength() || 21) + 1 : this.maxLength() || 21;
         if (this.dataType() === 'float') {
             maxLength--;
         }
         if (numbers && numbers[0]) {
-            lengthValueCompare = viewDataNumberByLanguage(`${numbers[0]}`.replace(/[.]/g, ','), this.acceptNegativeValue(), (this.fixedFloat() ?? 14)).length;
+            lengthValueCompare = viewDataNumberByLanguage(`${numbers[0]}`.replace(/[.]/g, ','), this.acceptNegativeValue(), this.fixedFloat() ?? 14).length;
         }
         if (numbers && numbers[1]) {
             lengthValueCompare += 1 + numbers[1].length;
         }
         if (maxLength && lengthValueCompare >= maxLength) {
-            const valueDisplay = viewDataNumberByLanguage((lengthValueCompare === maxLength ? valueCompare : `${this.value()}`).replace(/[.]/g, ','), this.acceptNegativeValue(), (this.fixedFloat() ?? 14));
+            const valueDisplay = viewDataNumberByLanguage((lengthValueCompare === maxLength ? valueCompare : `${this.value()}`).replace(/[.]/g, ','), this.acceptNegativeValue(), this.fixedFloat() ?? 14);
             e.target.value = `${this.getCheckZero(+valueDisplay, e.target.value)}${valueDisplay}`;
             return true;
         }
@@ -506,8 +532,8 @@ class LibsUiComponentsInputsInputComponent {
     }
     checkTypeNumber(e, fieldName) {
         const currentLang = UtilsCache.getLang();
-        const separator = (currentLang === UtilsLanguageConstants.VI) ? '.' : ',';
-        const separatorRevert = (currentLang === UtilsLanguageConstants.VI) ? ',' : '.';
+        const separator = currentLang === UtilsLanguageConstants.VI ? '.' : ',';
+        const separatorRevert = currentLang === UtilsLanguageConstants.VI ? ',' : '.';
         let valueTarget = e.target.value;
         const selectionStart = e.target.selectionStart - 1;
         const { data, keyCode } = e;
@@ -525,47 +551,46 @@ class LibsUiComponentsInputsInputComponent {
             valueTarget = valueTarget.replaceAt(0, '');
         }
         let strRegex = `[^0-9.,${this.acceptNegativeValue() ? '-' : ''}]`;
-        if ((new RegExp(strRegex, 'gi')).test(e[fieldName]) && keyCode !== UtilsKeyCodeConstant.BACKSPACE) {
+        if (new RegExp(strRegex, 'gi').test(e[fieldName]) && keyCode !== UtilsKeyCodeConstant.BACKSPACE) {
             e.preventDefault();
-            e.target.value = valueTarget = e.target.value.replace((new RegExp(strRegex, 'gi')), '');
+            e.target.value = valueTarget = e.target.value.replace(new RegExp(strRegex, 'gi'), '');
         }
         if (!e.fakeEvent) {
             switch (data) {
                 case separator:
-                    valueTarget = valueTarget.replace((new RegExp(`[${separator}]`, 'gi')), '');
+                    valueTarget = valueTarget.replace(new RegExp(`[${separator}]`, 'gi'), '');
                     break;
-                case separatorRevert:
-                    {
-                        if (currentLang === UtilsLanguageConstants.VI && this.dataType() === 'int') {
-                            e.target.value = valueTarget.replace((new RegExp(`[${separatorRevert}]`, 'gi')), '');
-                            return;
-                        }
-                        if (valueTarget === separatorRevert) {
-                            e.target.value = '';
-                            return;
-                        }
-                        if (valueTarget && valueTarget.length === 2 && valueTarget.charAt(0) === '-' && data && !/[0-9]/g.test(data)) {
-                            e.target.value = '-';
-                            return;
-                        }
-                        const occurrencesByCharacter = valueTarget.occurrencesByCharacter(separatorRevert);
-                        if (occurrencesByCharacter > 1) {
-                            valueTarget = valueTarget.replaceAt(e.target.selectionStart - 1, '');
-                            break;
-                        }
-                        let maxLength = this.dataType() === 'float' ? (this.maxLength() || 21) - 1 : (this.maxLength() || 21);
-                        if (valueTarget.indexOf('-') >= 0) {
-                            maxLength++;
-                        }
-                        if (occurrencesByCharacter === 1 && valueTarget.length === maxLength && valueTarget.indexOf(separatorRevert) === valueTarget.length - 1) {
-                            valueTarget = valueTarget.replaceAt(e.target.selectionStart - 1, '');
-                            break;
-                        }
-                        if (this.onlyAcceptNegativeValue() && valueTarget === `0${separatorRevert}`) {
-                            e.target.value = '0';
-                        }
+                case separatorRevert: {
+                    if (currentLang === UtilsLanguageConstants.VI && this.dataType() === 'int') {
+                        e.target.value = valueTarget.replace(new RegExp(`[${separatorRevert}]`, 'gi'), '');
                         return;
                     }
+                    if (valueTarget === separatorRevert) {
+                        e.target.value = '';
+                        return;
+                    }
+                    if (valueTarget && valueTarget.length === 2 && valueTarget.charAt(0) === '-' && data && !/[0-9]/g.test(data)) {
+                        e.target.value = '-';
+                        return;
+                    }
+                    const occurrencesByCharacter = valueTarget.occurrencesByCharacter(separatorRevert);
+                    if (occurrencesByCharacter > 1) {
+                        valueTarget = valueTarget.replaceAt(e.target.selectionStart - 1, '');
+                        break;
+                    }
+                    let maxLength = this.dataType() === 'float' ? (this.maxLength() || 21) - 1 : this.maxLength() || 21;
+                    if (valueTarget.indexOf('-') >= 0) {
+                        maxLength++;
+                    }
+                    if (occurrencesByCharacter === 1 && valueTarget.length === maxLength && valueTarget.indexOf(separatorRevert) === valueTarget.length - 1) {
+                        valueTarget = valueTarget.replaceAt(e.target.selectionStart - 1, '');
+                        break;
+                    }
+                    if (this.onlyAcceptNegativeValue() && valueTarget === `0${separatorRevert}`) {
+                        e.target.value = '0';
+                    }
+                    return;
+                }
             }
             valueTarget = formatNumber(valueTarget);
         }
@@ -582,54 +607,53 @@ class LibsUiComponentsInputsInputComponent {
             return;
         }
         switch (this.dataType()) {
-            case 'int':
-                {
-                    strRegex = `[^0-9${this.acceptNegativeValue() ? '-' : ''}]`;
-                    if (!e.fakeEvent) {
-                        valueTarget = valueTarget.replace(new RegExp(strRegex, 'gi'), '');
-                        const maxTotalNumber = valueTarget.includes('-') ? 17 : 16;
-                        if (valueTarget.length > maxTotalNumber) {
-                            valueTarget = valueTarget.slice(0, maxTotalNumber);
-                        }
-                        if (Math.abs(parseInt(valueTarget)) > (this.maxValueNumber() ?? 9007199254740991)) {
-                            valueTarget = valueTarget.slice(0, maxTotalNumber - 1);
-                        }
-                        if (this.onlyAcceptNegativeValue() && valueTarget[0] !== '-' && valueTarget[0] !== '0') {
-                            valueTarget = '';
-                        }
-                        if (valueTarget && /(^-)?(^[0]+)/.test(valueTarget)) {
-                            const id = uuid();
-                            valueTarget = valueTarget.replace(/(^-)?(^[0]+)/, `$1${id}`).replace(id, '0');
-                        }
-                        if (valueTarget === '-0') {
-                            valueTarget = '0';
-                        }
-                        if (valueTarget && /(^[0])([1-9])([0-9]+)?/.test(valueTarget)) {
-                            valueTarget = valueTarget.replace(/(^[0])([1-9])([0-9]+)?/, '$2$3');
-                        }
-                        const valueDisplay = viewDataNumberByLanguage(valueTarget, (this.acceptNegativeValue() || false), 0);
-                        if (this.checkMaxLengthNumberAndSetValue(valueDisplay, e)) {
-                            break;
-                        }
-                        e.target.value = `${this.getCheckZero(+valueDisplay, e.target.value)}${valueDisplay}`;
-                        break;
+            case 'int': {
+                strRegex = `[^0-9${this.acceptNegativeValue() ? '-' : ''}]`;
+                if (!e.fakeEvent) {
+                    valueTarget = valueTarget.replace(new RegExp(strRegex, 'gi'), '');
+                    const maxTotalNumber = valueTarget.includes('-') ? 17 : 16;
+                    if (valueTarget.length > maxTotalNumber) {
+                        valueTarget = valueTarget.slice(0, maxTotalNumber);
+                    }
+                    if (Math.abs(parseInt(valueTarget)) > (this.maxValueNumber() ?? 9007199254740991)) {
+                        valueTarget = valueTarget.slice(0, maxTotalNumber - 1);
                     }
-                    const indexOfDot = valueTarget.indexOf('.');
-                    const indexOfComma = valueTarget.indexOf(',');
-                    let indexChoose = indexOfDot;
-                    if (indexOfDot < 0 || indexOfDot > indexOfComma) {
-                        indexChoose = indexOfComma;
+                    if (this.onlyAcceptNegativeValue() && valueTarget[0] !== '-' && valueTarget[0] !== '0') {
+                        valueTarget = '';
                     }
-                    if (indexChoose >= 0) {
-                        valueTarget = valueTarget.substring(0, indexChoose);
+                    if (valueTarget && /(^-)?(^[0]+)/.test(valueTarget)) {
+                        const id = uuid();
+                        valueTarget = valueTarget.replace(/(^-)?(^[0]+)/, `$1${id}`).replace(id, '0');
                     }
-                    const valueDisplay = viewDataNumberByLanguage(valueTarget, (this.acceptNegativeValue() || false), 0);
+                    if (valueTarget === '-0') {
+                        valueTarget = '0';
+                    }
+                    if (valueTarget && /(^[0])([1-9])([0-9]+)?/.test(valueTarget)) {
+                        valueTarget = valueTarget.replace(/(^[0])([1-9])([0-9]+)?/, '$2$3');
+                    }
+                    const valueDisplay = viewDataNumberByLanguage(valueTarget, this.acceptNegativeValue() || false, 0);
                     if (this.checkMaxLengthNumberAndSetValue(valueDisplay, e)) {
                         break;
                     }
                     e.target.value = `${this.getCheckZero(+valueDisplay, e.target.value)}${valueDisplay}`;
                     break;
                 }
+                const indexOfDot = valueTarget.indexOf('.');
+                const indexOfComma = valueTarget.indexOf(',');
+                let indexChoose = indexOfDot;
+                if (indexOfDot < 0 || indexOfDot > indexOfComma) {
+                    indexChoose = indexOfComma;
+                }
+                if (indexChoose >= 0) {
+                    valueTarget = valueTarget.substring(0, indexChoose);
+                }
+                const valueDisplay = viewDataNumberByLanguage(valueTarget, this.acceptNegativeValue() || false, 0);
+                if (this.checkMaxLengthNumberAndSetValue(valueDisplay, e)) {
+                    break;
+                }
+                e.target.value = `${this.getCheckZero(+valueDisplay, e.target.value)}${valueDisplay}`;
+                break;
+            }
             case 'float':
             // eslint-disable-next-line no-fallthrough
             case 'bigint':
@@ -661,7 +685,7 @@ class LibsUiComponentsInputsInputComponent {
         valueTarget = valueTarget.replace(new RegExp(strRegex, 'g'), separatorRevert);
         let valueFormat = '';
         let [fontSeparatorNumber, behindSeparatorNumber] = valueTarget.split(separatorRevert);
-        let maxFontTotalNumber = (fontSeparatorNumber && fontSeparatorNumber.includes('-')) ? 16 : 15;
+        let maxFontTotalNumber = fontSeparatorNumber && fontSeparatorNumber.includes('-') ? 16 : 15;
         if (this.dataType() === 'bigint') {
             maxFontTotalNumber = (this.maxLengthNumberCount() ?? 19) - (this.fixedFloat() ?? 4) + (fontSeparatorNumber.includes('-') ? 1 : 0);
         }
@@ -681,7 +705,7 @@ class LibsUiComponentsInputsInputComponent {
                 break;
             case 'bigint':
                 if (behindSeparatorNumber && behindSeparatorNumber.length && behindSeparatorNumber.length > (this.fixedFloat() ?? 4)) {
-                    behindSeparatorNumber = behindSeparatorNumber.slice(0, (this.fixedFloat() ?? 4));
+                    behindSeparatorNumber = behindSeparatorNumber.slice(0, this.fixedFloat() ?? 4);
                 }
                 break;
         }
@@ -719,7 +743,7 @@ class LibsUiComponentsInputsInputComponent {
                 break;
         }
         if (fontSeparatorNumber) {
-            fontSeparatorNumber = viewDataNumberByLanguage(fontSeparatorNumber, this.acceptNegativeValue(), (this.fixedFloat() ?? (this.dataType() === 'bigint' ? 4 : 14)));
+            fontSeparatorNumber = viewDataNumberByLanguage(fontSeparatorNumber, this.acceptNegativeValue(), this.fixedFloat() ?? (this.dataType() === 'bigint' ? 4 : 14));
         }
         const hasSeparatorRevert = (this.dataType() === 'bigint' ? true : !fontOverMaxTotalNumber) && indexOfSeparatorRevert >= 0;
         valueFormat = `${fontSeparatorNumber ?? ''}${hasSeparatorRevert ? separatorRevert : ''}${behindSeparatorNumber ?? ''}`;
@@ -752,7 +776,7 @@ class LibsUiComponentsInputsInputComponent {
         }
         const valueTarget = e.target.value.replace('-', '');
         let value = UtilsCache.getLang() === UtilsLanguageConstants.VI ? `${this.value() || 0}`.replace('.', ',') : `${this.value() || 0}`;
-        value = viewDataNumberByLanguage(value, this.acceptNegativeValue(), (this.fixedFloat() ?? 14));
+        value = viewDataNumberByLanguage(value, this.acceptNegativeValue(), this.fixedFloat() ?? 14);
         value = `${value}`.replace('-', '');
         if (value === valueTarget && value !== '0' && value !== '-') {
             setCaretPosition(this.Element, selectionStart);
@@ -768,16 +792,16 @@ class LibsUiComponentsInputsInputComponent {
         }
         selectionStart += factor;
         if (inputType === 'insertFromPaste' && this.dataTextPaste()) {
-            const dataTextDisplay = `${viewDataNumberByLanguage(this.dataTextPaste(), this.acceptNegativeValue(), (this.fixedFloat() ?? 14))}`;
+            const dataTextDisplay = `${viewDataNumberByLanguage(this.dataTextPaste(), this.acceptNegativeValue(), this.fixedFloat() ?? 14)}`;
             const indexes = e.target.value.indexesByString(dataTextDisplay);
             selectionStart -= factor;
-            if (indexes.some(index => index === selectionStart) || !indexes.length) {
+            if (indexes.some((index) => index === selectionStart) || !indexes.length) {
                 return setCaretPosition(this.Element, selectionStart);
             }
             let newSelectionStart = indexes[0];
             for (const index of indexes) {
                 let replaceValue = formatNumber(`${valueTarget.substring(0, index)}${valueTarget.substring(index + dataTextDisplay.length + 1, valueTarget.length)}`);
-                replaceValue = viewDataNumberByLanguage(replaceValue, this.acceptNegativeValue(), (this.fixedFloat() ?? 14));
+                replaceValue = viewDataNumberByLanguage(replaceValue, this.acceptNegativeValue(), this.fixedFloat() ?? 14);
                 if (value === replaceValue) {
                     newSelectionStart = index;
                     break;
@@ -798,7 +822,7 @@ class LibsUiComponentsInputsInputComponent {
                 if (this.acceptNegativeValue() && (value === '-' || value === ',' || value === '.')) {
                     return 0;
                 }
-                return +(formatNumber(value));
+                return +formatNumber(value);
             case 'float':
                 if (this.acceptNegativeValue() && (value === '-' || value === ',' || value === '.')) {
                     return 0;
@@ -833,7 +857,9 @@ class LibsUiComponentsInputsInputComponent {
         this.preHeightArea.set(height);
     }
     combineObservable(mouseDownEvent, observableMerge) {
-        mouseDownEvent.pipe(mergeMap(() => observableMerge), debounceTime(0), tap((e) => this.checkTypeNumber(e, 'key'))).subscribe((e) => this.processEventAndEmitValue(e));
+        mouseDownEvent
+            .pipe(mergeMap(() => observableMerge), debounceTime(0), tap((e) => this.checkTypeNumber(e, 'key')))
+            .subscribe((e) => this.processEventAndEmitValue(e));
     }
     async focus() {
         setTimeout(() => {
@@ -853,7 +879,14 @@ class LibsUiComponentsInputsInputComponent {
         const afterValue = value.substring(selectionStart);
         this.Element.value = `${beforeValue}${data}${afterValue}`;
         setCaretPosition(this.Element, selectionStart + data.toString().length);
-        const eventFake = { preventDefault: () => { return; }, target: this.Element, data: '', fakeEvent: true };
+        const eventFake = {
+            preventDefault: () => {
+                return;
+            },
+            target: this.Element,
+            data: '',
+            fakeEvent: true,
+        };
         this.processEventAndEmitValue(eventFake);
     }
     handlerOnLoad(e, element) {
@@ -892,7 +925,7 @@ class LibsUiComponentsInputsInputComponent {
                     this.paddingRightCustom.set(this.textCountRef()?.nativeElement.clientWidth + 16);
                 }
                 if (this.tagInput() === 'input') {
-                    this.paddingRightCustom.update(value => {
+                    this.paddingRightCustom.update((value) => {
                         return value + (this.elementRightRef()?.nativeElement.getBoundingClientRect().width || 0);
                     });
                 }
@@ -910,15 +943,11 @@ class LibsUiComponentsInputsInputComponent {
         this.onDestroy.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsInputComponent, isStandalone: true, selector: "libs_ui-components-inputs-input", inputs: { tagInput: { classPropertyName: "tagInput", publicName: "tagInput", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, typeInput: { classPropertyName: "typeInput", publicName: "typeInput", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "modeInput", isSignal: true, isRequired: false, transformFunction: null }, tabInsertContentTagInput: { classPropertyName: "tabInsertContentTagInput", publicName: "tabInsertContentTagInput", isSignal: true, isRequired: false, transformFunction: null }, textAreaEnterNotNewLine: { classPropertyName: "textAreaEnterNotNewLine", publicName: "textAreaEnterNotNewLine", isSignal: true, isRequired: false, transformFunction: null }, emitEmptyInDataTypeNumber: { classPropertyName: "emitEmptyInDataTypeNumber", publicName: "emitEmptyInDataTypeNumber", isSignal: true, isRequired: false, transformFunction: null }, keepZeroInTypeInt: { classPropertyName: "keepZeroInTypeInt", publicName: "keepZeroInTypeInt", isSignal: true, isRequired: false, transformFunction: null }, autoAddZeroLessThan10InTypeInt: { classPropertyName: "autoAddZeroLessThan10InTypeInt", publicName: "autoAddZeroLessThan10InTypeInt", isSignal: true, isRequired: false, transformFunction: null }, ignoreBlockInputMaxValue: { classPropertyName: "ignoreBlockInputMaxValue", publicName: "ignoreBlockInputMaxValue", isSignal: true, isRequired: false, transformFunction: null }, maxValueNumber: { classPropertyName: "maxValueNumber", publicName: "maxValueNumber", isSignal: true, isRequired: false, transformFunction: null }, minValueNumber: { classPropertyName: "minValueNumber", publicName: "minValueNumber", isSignal: true, isRequired: false, transformFunction: null }, fixedFloat: { classPropertyName: "fixedFloat", publicName: "fixedFloat", isSignal: true, isRequired: false, transformFunction: null }, acceptNegativeValue: { classPropertyName: "acceptNegativeValue", publicName: "acceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, valueUpDownNumber: { classPropertyName: "valueUpDownNumber", publicName: "valueUpDownNumber", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null }, backgroundNone: { classPropertyName: "backgroundNone", publicName: "backgroundNone", isSignal: true, isRequired: false, transformFunction: null }, borderError: { classPropertyName: "borderError", publicName: "borderError", isSignal: true, isRequired: false, transformFunction: null }, useColorModeExist: { classPropertyName: "useColorModeExist", publicName: "useColorModeExist", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, keepPlaceholderOnly: { classPropertyName: "keepPlaceholderOnly", publicName: "keepPlaceholderOnly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, autoRemoveEmoji: { classPropertyName: "autoRemoveEmoji", publicName: "autoRemoveEmoji", isSignal: true, isRequired: false, transformFunction: null }, defaultHeight: { classPropertyName: "defaultHeight", publicName: "defaultHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeightTextArea: { classPropertyName: "minHeightTextArea", publicName: "minHeightTextArea", isSignal: true, isRequired: false, transformFunction: null }, maxHeightTextArea: { classPropertyName: "maxHeightTextArea", publicName: "maxHeightTextArea", isSignal: true, isRequired: false, transformFunction: null }, focusTimeOut: { classPropertyName: "focusTimeOut", publicName: "focusTimeOut", isSignal: true, isRequired: false, transformFunction: null }, selectAllTimeOut: { classPropertyName: "selectAllTimeOut", publicName: "selectAllTimeOut", isSignal: true, isRequired: false, transformFunction: null }, blurTimeOut: { classPropertyName: "blurTimeOut", publicName: "blurTimeOut", isSignal: true, isRequired: false, transformFunction: null }, zIndexPopoverContent: { classPropertyName: "zIndexPopoverContent", publicName: "zIndexPopoverContent", isSignal: true, isRequired: false, transformFunction: null }, classContainerInput: { classPropertyName: "classContainerInput", publicName: "classContainerInput", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, templateLeftBottomInput: { classPropertyName: "templateLeftBottomInput", publicName: "templateLeftBottomInput", isSignal: true, isRequired: false, transformFunction: null }, templateRightBottomInput: { classPropertyName: "templateRightBottomInput", publicName: "templateRightBottomInput", isSignal: true, isRequired: false, transformFunction: null }, classContainerBottomInput: { classPropertyName: "classContainerBottomInput", publicName: "classContainerBottomInput", isSignal: true, isRequired: false, transformFunction: null }, ignoreWidthInput100: { classPropertyName: "ignoreWidthInput100", publicName: "ignoreWidthInput100", isSignal: true, isRequired: false, transformFunction: null }, iframeTextareaCustomStyle: { classPropertyName: "iframeTextareaCustomStyle", publicName: "iframeTextareaCustomStyle", isSignal: true, isRequired: false, transformFunction: null }, iconLeftClass: { classPropertyName: "iconLeftClass", publicName: "iconLeftClass", isSignal: true, isRequired: false, transformFunction: null }, popoverContentIconLeft: { classPropertyName: "popoverContentIconLeft", publicName: "popoverContentIconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRightClass: { classPropertyName: "iconRightClass", publicName: "iconRightClass", isSignal: true, isRequired: false, transformFunction: null }, popoverContentIconRight: { classPropertyName: "popoverContentIconRight", publicName: "popoverContentIconRight", isSignal: true, isRequired: false, transformFunction: null }, resetAutoCompletePassword: { classPropertyName: "resetAutoCompletePassword", publicName: "resetAutoCompletePassword", isSignal: true, isRequired: false, transformFunction: null }, acceptOnlyClickIcon: { classPropertyName: "acceptOnlyClickIcon", publicName: "acceptOnlyClickIcon", isSignal: true, isRequired: false, transformFunction: null }, setIconRightColorSameColorDisableReadOnly: { classPropertyName: "setIconRightColorSameColorDisableReadOnly", publicName: "setIconRightColorSameColorDisableReadOnly", isSignal: true, isRequired: false, transformFunction: null }, onlyAcceptNegativeValue: { classPropertyName: "onlyAcceptNegativeValue", publicName: "onlyAcceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, maxLengthNumberCount: { classPropertyName: "maxLengthNumberCount", publicName: "maxLengthNumberCount", isSignal: true, isRequired: false, transformFunction: null }, focusInput: { classPropertyName: "focusInput", publicName: "focusInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { maxValueNumber: "maxValueNumberChange", minValueNumber: "minValueNumberChange", fixedFloat: "fixedFloatChange", acceptNegativeValue: "acceptNegativeValueChange", maxLength: "maxLengthChange", value: "valueChange", maxLengthNumberCount: "maxLengthNumberCountChange", outHeightAreaChange: "outHeightAreaChange", outChange: "outChange", outFocusAndBlurEvent: "outFocusAndBlurEvent", outEnterEvent: "outEnterEvent", outInputEvent: "outInputEvent", outIconLeft: "outIconLeft", outIconRight: "outIconRight", outFunctionsControl: "outFunctionsControl", outFilesDrop: "outFilesDrop", outFileDrop: "outFileDrop", outChangeValueByButtonUpDown: "outChangeValueByButtonUpDown" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "textCountRef", first: true, predicate: ["textCountRef"], descendants: true, isSignal: true }, { propertyName: "elementRightRef", first: true, predicate: ["elementRightRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"'flex relative !text-[#9ca2ad] ' + classContainerInput()\"\n  [class.libs-ui-components-input-textarea-container]=\"tagInput() === 'textarea' && resize() === 'auto'\">\n  @if (tagInput() === 'input') {\n    <input #inputRef\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      [style.height.px]=\"defaultHeight()\"\n      [style.minHeight.px]=\"defaultHeight()\"\n      [style.paddingRight.px.important]=\"paddingRightCustom()\"\n      [class.w-full]=\"!ignoreWidthInput100()\"\n      [class]=\"'libs-ui-input libs-ui-font-h5r ' + classInclude()\"\n      [class.border-primary-focus-general]=\"focusInput()\"\n      [class.libs-ui-input-not-border]=\"noBorder()\"\n      [class.libs-ui-bg-special-none]=\"backgroundNone()\"\n      [class.libs-ui-border-error-general]=\"borderError()\"\n      [class.text-[#29c7cc]]=\"useColorModeExist()\"\n      [class.!pl-[40px]]=\"iconLeftClass()\"\n      [attr.maxLength]=\"maxLength() || undefined\"\n      [placeholder]=\"placeholder() | translate\"\n      [attr.type]=\"typeInput()\"\n      [attr.inputmode]=\"modeInput()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"disable()\"\n      [autocomplete]=\"resetAutoCompletePassword()? 'new-password':''\" />\n  }\n  @if (tagInput() === 'textarea') {\n    @if (resize() === 'auto') {\n      <div class=\"libs-ui-components-input-textarea-container-resize-icon\"></div>\n    }\n    <textarea #inputRef\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      [style.height.px]=\"defaultHeight()\"\n      [style.minHeight.px]=\"minHeightTextArea() ?? defaultHeight()\"\n      [style.paddingRight.px.important]=\"paddingRightCustom()\"\n      [style.maxHeight.px]=\"maxHeightTextArea()\"\n      [style.resize]=\"resize()\"\n      [class.w-full]=\"!ignoreWidthInput100()\"\n      [class]=\"'libs-ui-input libs-ui-font-h5r libs-ui-cursor-auto ' + classInclude()\"\n      [class.libs-ui-input-not-border]=\"noBorder()\"\n      [class.libs-ui-bg-special-none]=\"backgroundNone()\"\n      [class.libs-ui-border-error-general]=\"borderError()\"\n      [class.text-[#29c7cc]]=\"useColorModeExist()\"\n      [class.pl-[32px]]=\"iconLeftClass()\"\n      [attr.maxLength]=\"maxLength() || undefined\"\n      [placeholder]=\"placeholder() | translate\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"disable()\">\n      </textarea>\n  }\n\n  @if (tagInput() === 'iframe-textarea' && htmlIframeArea()) {\n    <span class=\"d-none\">\n    </span>\n    <iframe #iframeRef\n      [style.maxHeight.px]=\"maxHeightTextArea()\"\n      [style.height.px]=\"defaultHeight()\"\n      [srcdoc]=\"htmlIframeArea()\"\n      class=\"w-full\"\n      frameBorder=\"0\"\n      (load)=\"handlerOnLoad($event,iframeRef)\">\n    </iframe>\n  }\n  @if (iconLeftClass()) {\n    <libs_ui-components-popover [ignoreShowPopover]=\"!popoverContentIconLeft()\"\n      [config]=\"{maxWidth:250,direction:'bottom',content:popoverContentIconLeft(),zIndex: zIndexPopoverContent()}\">\n      <i [attr.tagInput]=\"tagInput()\"\n        [class]=\"iconLeftClass() +' libs-ui-input-icon-left !text-[#9ca2ad]'\"\n        (click)=\"handlerEventIconLeft($event,'click')\">\n      </i>\n    </libs_ui-components-popover>\n  }\n  <div #elementRightRef\n    class=\"absolute flex items-center h-full top-0 right-0\">\n    @if (value() && placeholder().trim() && keepPlaceholderOnly()) {\n      <span [class]=\"'libs-ui-input-placeholder-custom libs-ui-font-h5r'\">\n        {{ placeholder() }}\n      </span>\n    }\n    @if (dataType() !=='string' && valueUpDownNumber()) {\n      <libs_ui-components-buttons-sort class=\"mr-[12px]\"\n        [disableAsc]=\"disableAsc()\"\n        [disableDesc]=\"disableDesc()\"\n        [attr.tagInput]=\"tagInput()\"\n        [onlyEmit]=\"true\"\n        [disable]=\"disable() || readonly()\"\n        (outChange)=\"handlerChangeValue($event)\" />\n    }\n    @if (iconRightClass()) {\n      <libs_ui-components-popover class=\"flex\"\n        [ignoreShowPopover]=\"!popoverContentIconRight()\"\n        [config]=\"{maxWidth:250,direction:'bottom',content:popoverContentIconRight(),zIndex: zIndexPopoverContent()}\">\n        <i [attr.tagInput]=\"tagInput()\"\n          [class.text-[#6a7383]]=\"(!disable() && !readonly()) || acceptOnlyClickIcon()\"\n          [class.text-[#cdd0d6]]='((disable() || readonly()) && !acceptOnlyClickIcon()) || setIconRightColorSameColorDisableReadOnly()'\n          [class]=\"iconRightClass() +' libs-ui-input-icon-right'\"\n          (click)=\"handlerEventIconRight($event,'click')\">\n        </i>\n      </libs_ui-components-popover>\n    }\n  </div>\n  <div class=\"libs-ui-input-text-bottom {{ classContainerBottomInput() }}\"\n    [style.right.px]=\"(tagInput() === 'input' ? (elementRightRef.clientWidth || 0) : 0) + 8\">\n    @if (templateLeftBottomInput(); as templateLeftBottomInput) {\n      <ng-container *ngTemplateOutlet=\"templateLeftBottomInput\" />\n    }\n      <div #textCountRef\n        class=\"text-[#9ca2ad] libs-ui-font-h7r\"\n        [class.hidden]=\"dataType() !== 'string' || !showCount()\">\n        <span>{{ countDisplay() }}</span>\n        @if (maxLength()) {\n          <span>/{{ maxLengthDisplay() }}</span>\n          }\n      </div>\n      @if (templateRightBottomInput(); as templateRightBottomInput) {\n        <ng-container *ngTemplateOutlet=\"templateRightBottomInput\" />\n      }\n  </div>\n</div>\n", styles: [".libs-ui-input{max-width:100%;border-radius:none;color:#071631;padding:7px 12px;background-color:#fff;background-clip:padding-box;min-height:32px}.libs-ui-input:not(.libs-ui-input-not-border){border:1px solid #e6e7ea;border-radius:4px}.libs-ui-input:focus{outline:none}.libs-ui-input:focus:not(:read-only):not(:disabled):not(.libs-ui-input-not-border){border:1px solid var(--libs-ui-color-light-1, #4e8cf7)}.libs-ui-input .libs-ui-input-valid-check{position:absolute;left:-27px}.libs-ui-input-not-border{border:transparent}libs-ui-components-button-sort{position:absolute;right:12px;top:0}libs-ui-components-button-sort[tagInput=textarea]{top:-10px}.libs-ui-input-icon-left{position:absolute;top:8px;left:16px;font-size:16px}.libs-ui-input-icon-right{font-size:16px;margin-right:8px}.libs-ui-input-text-bottom{display:flex;align-items:center;position:absolute;bottom:8px}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-credentials-auto-fill-button{margin-right:8px!important}textarea::-webkit-resizer{border:transparent;outline:none}.libs-ui-components-input-textarea-container:after{content:\"\";border-top:1.5px solid #9ca2ad;width:15px;transform:rotate(-45deg);background:transparent;position:absolute;right:0;bottom:8px;pointer-events:none;border-radius:25%}.libs-ui-components-input-textarea-container .libs-ui-components-input-textarea-container-resize-icon{border-top:1.5px solid #9ca2ad;width:7px;transform:rotate(-45deg);position:absolute;bottom:5px;right:1px;pointer-events:none;border-radius:25%}.libs-ui-input-placeholder-custom{color:#6a7378;margin-right:16px;background:inherit}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: LibsUiComponentsButtonsSortComponent, selector: "libs_ui-components-buttons-sort", inputs: ["size", "mode", "fieldSort", "disable", "disableAsc", "disableDesc", "onlyEmit"], outputs: ["modeChange", "outChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsInputComponent, isStandalone: true, selector: "libs_ui-components-inputs-input", inputs: { tagInput: { classPropertyName: "tagInput", publicName: "tagInput", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, typeInput: { classPropertyName: "typeInput", publicName: "typeInput", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "modeInput", isSignal: true, isRequired: false, transformFunction: null }, tabInsertContentTagInput: { classPropertyName: "tabInsertContentTagInput", publicName: "tabInsertContentTagInput", isSignal: true, isRequired: false, transformFunction: null }, textAreaEnterNotNewLine: { classPropertyName: "textAreaEnterNotNewLine", publicName: "textAreaEnterNotNewLine", isSignal: true, isRequired: false, transformFunction: null }, emitEmptyInDataTypeNumber: { classPropertyName: "emitEmptyInDataTypeNumber", publicName: "emitEmptyInDataTypeNumber", isSignal: true, isRequired: false, transformFunction: null }, keepZeroInTypeInt: { classPropertyName: "keepZeroInTypeInt", publicName: "keepZeroInTypeInt", isSignal: true, isRequired: false, transformFunction: null }, autoAddZeroLessThan10InTypeInt: { classPropertyName: "autoAddZeroLessThan10InTypeInt", publicName: "autoAddZeroLessThan10InTypeInt", isSignal: true, isRequired: false, transformFunction: null }, ignoreBlockInputMaxValue: { classPropertyName: "ignoreBlockInputMaxValue", publicName: "ignoreBlockInputMaxValue", isSignal: true, isRequired: false, transformFunction: null }, maxValueNumber: { classPropertyName: "maxValueNumber", publicName: "maxValueNumber", isSignal: true, isRequired: false, transformFunction: null }, minValueNumber: { classPropertyName: "minValueNumber", publicName: "minValueNumber", isSignal: true, isRequired: false, transformFunction: null }, fixedFloat: { classPropertyName: "fixedFloat", publicName: "fixedFloat", isSignal: true, isRequired: false, transformFunction: null }, acceptNegativeValue: { classPropertyName: "acceptNegativeValue", publicName: "acceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, valueUpDownNumber: { classPropertyName: "valueUpDownNumber", publicName: "valueUpDownNumber", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null }, backgroundNone: { classPropertyName: "backgroundNone", publicName: "backgroundNone", isSignal: true, isRequired: false, transformFunction: null }, borderError: { classPropertyName: "borderError", publicName: "borderError", isSignal: true, isRequired: false, transformFunction: null }, useColorModeExist: { classPropertyName: "useColorModeExist", publicName: "useColorModeExist", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, keepPlaceholderOnly: { classPropertyName: "keepPlaceholderOnly", publicName: "keepPlaceholderOnly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, autoRemoveEmoji: { classPropertyName: "autoRemoveEmoji", publicName: "autoRemoveEmoji", isSignal: true, isRequired: false, transformFunction: null }, defaultHeight: { classPropertyName: "defaultHeight", publicName: "defaultHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeightTextArea: { classPropertyName: "minHeightTextArea", publicName: "minHeightTextArea", isSignal: true, isRequired: false, transformFunction: null }, maxHeightTextArea: { classPropertyName: "maxHeightTextArea", publicName: "maxHeightTextArea", isSignal: true, isRequired: false, transformFunction: null }, focusTimeOut: { classPropertyName: "focusTimeOut", publicName: "focusTimeOut", isSignal: true, isRequired: false, transformFunction: null }, selectAllTimeOut: { classPropertyName: "selectAllTimeOut", publicName: "selectAllTimeOut", isSignal: true, isRequired: false, transformFunction: null }, blurTimeOut: { classPropertyName: "blurTimeOut", publicName: "blurTimeOut", isSignal: true, isRequired: false, transformFunction: null }, zIndexPopoverContent: { classPropertyName: "zIndexPopoverContent", publicName: "zIndexPopoverContent", isSignal: true, isRequired: false, transformFunction: null }, classContainerInput: { classPropertyName: "classContainerInput", publicName: "classContainerInput", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, templateLeftBottomInput: { classPropertyName: "templateLeftBottomInput", publicName: "templateLeftBottomInput", isSignal: true, isRequired: false, transformFunction: null }, templateRightBottomInput: { classPropertyName: "templateRightBottomInput", publicName: "templateRightBottomInput", isSignal: true, isRequired: false, transformFunction: null }, classContainerBottomInput: { classPropertyName: "classContainerBottomInput", publicName: "classContainerBottomInput", isSignal: true, isRequired: false, transformFunction: null }, ignoreWidthInput100: { classPropertyName: "ignoreWidthInput100", publicName: "ignoreWidthInput100", isSignal: true, isRequired: false, transformFunction: null }, iframeTextareaCustomStyle: { classPropertyName: "iframeTextareaCustomStyle", publicName: "iframeTextareaCustomStyle", isSignal: true, isRequired: false, transformFunction: null }, iconLeftClass: { classPropertyName: "iconLeftClass", publicName: "iconLeftClass", isSignal: true, isRequired: false, transformFunction: null }, popoverContentIconLeft: { classPropertyName: "popoverContentIconLeft", publicName: "popoverContentIconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRightClass: { classPropertyName: "iconRightClass", publicName: "iconRightClass", isSignal: true, isRequired: false, transformFunction: null }, popoverContentIconRight: { classPropertyName: "popoverContentIconRight", publicName: "popoverContentIconRight", isSignal: true, isRequired: false, transformFunction: null }, resetAutoCompletePassword: { classPropertyName: "resetAutoCompletePassword", publicName: "resetAutoCompletePassword", isSignal: true, isRequired: false, transformFunction: null }, acceptOnlyClickIcon: { classPropertyName: "acceptOnlyClickIcon", publicName: "acceptOnlyClickIcon", isSignal: true, isRequired: false, transformFunction: null }, setIconRightColorSameColorDisableReadOnly: { classPropertyName: "setIconRightColorSameColorDisableReadOnly", publicName: "setIconRightColorSameColorDisableReadOnly", isSignal: true, isRequired: false, transformFunction: null }, onlyAcceptNegativeValue: { classPropertyName: "onlyAcceptNegativeValue", publicName: "onlyAcceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, maxLengthNumberCount: { classPropertyName: "maxLengthNumberCount", publicName: "maxLengthNumberCount", isSignal: true, isRequired: false, transformFunction: null }, focusInput: { classPropertyName: "focusInput", publicName: "focusInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { maxValueNumber: "maxValueNumberChange", minValueNumber: "minValueNumberChange", fixedFloat: "fixedFloatChange", acceptNegativeValue: "acceptNegativeValueChange", maxLength: "maxLengthChange", value: "valueChange", maxLengthNumberCount: "maxLengthNumberCountChange", outHeightAreaChange: "outHeightAreaChange", outChange: "outChange", outFocusAndBlurEvent: "outFocusAndBlurEvent", outEnterEvent: "outEnterEvent", outInputEvent: "outInputEvent", outIconLeft: "outIconLeft", outIconRight: "outIconRight", outFunctionsControl: "outFunctionsControl", outFilesDrop: "outFilesDrop", outFileDrop: "outFileDrop", outChangeValueByButtonUpDown: "outChangeValueByButtonUpDown" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "textCountRef", first: true, predicate: ["textCountRef"], descendants: true, isSignal: true }, { propertyName: "elementRightRef", first: true, predicate: ["elementRightRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n  [class]=\"'flex relative !text-[#9ca2ad] ' + classContainerInput()\"\n  [class.libs-ui-components-input-textarea-container]=\"tagInput() === 'textarea' && resize() === 'auto'\">\n  @if (tagInput() === 'input') {\n    <input\n      #inputRef\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      [style.height.px]=\"defaultHeight()\"\n      [style.minHeight.px]=\"defaultHeight()\"\n      [style.paddingRight.px.important]=\"paddingRightCustom()\"\n      [class.w-full]=\"!ignoreWidthInput100()\"\n      [class]=\"'libs-ui-input libs-ui-font-h5r ' + classInclude()\"\n      [class.border-primary-focus-general]=\"focusInput()\"\n      [class.libs-ui-input-not-border]=\"noBorder()\"\n      [class.libs-ui-bg-special-none]=\"backgroundNone()\"\n      [class.libs-ui-border-error-general]=\"borderError()\"\n      [class.text-[#29c7cc]]=\"useColorModeExist()\"\n      [class.!pl-[40px]]=\"iconLeftClass()\"\n      [attr.maxLength]=\"maxLength() || undefined\"\n      [placeholder]=\"placeholder() | translate\"\n      [attr.type]=\"typeInput()\"\n      [attr.inputmode]=\"modeInput()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"disable()\"\n      [autocomplete]=\"resetAutoCompletePassword() ? 'new-password' : ''\" />\n  }\n  @if (tagInput() === 'textarea') {\n    @if (resize() === 'auto') {\n      <div class=\"libs-ui-components-input-textarea-container-resize-icon\"></div>\n    }\n    <textarea\n      #inputRef\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      [style.height.px]=\"defaultHeight()\"\n      [style.minHeight.px]=\"minHeightTextArea() ?? defaultHeight()\"\n      [style.paddingRight.px.important]=\"paddingRightCustom()\"\n      [style.maxHeight.px]=\"maxHeightTextArea()\"\n      [style.resize]=\"resize()\"\n      [class.w-full]=\"!ignoreWidthInput100()\"\n      [class]=\"'libs-ui-input libs-ui-font-h5r libs-ui-cursor-auto ' + classInclude()\"\n      [class.libs-ui-input-not-border]=\"noBorder()\"\n      [class.libs-ui-bg-special-none]=\"backgroundNone()\"\n      [class.libs-ui-border-error-general]=\"borderError()\"\n      [class.text-[#29c7cc]]=\"useColorModeExist()\"\n      [class.pl-[32px]]=\"iconLeftClass()\"\n      [attr.maxLength]=\"maxLength() || undefined\"\n      [placeholder]=\"placeholder() | translate\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"disable()\"></textarea>\n  }\n\n  @if (tagInput() === 'iframe-textarea' && htmlIframeArea()) {\n    <span class=\"d-none\"></span>\n    <iframe\n      #iframeRef\n      [style.maxHeight.px]=\"maxHeightTextArea()\"\n      [style.height.px]=\"defaultHeight()\"\n      [srcdoc]=\"htmlIframeArea()\"\n      class=\"w-full\"\n      frameBorder=\"0\"\n      (load)=\"handlerOnLoad($event, iframeRef)\"></iframe>\n  }\n  @if (iconLeftClass()) {\n    <libs_ui-components-popover\n      [ignoreShowPopover]=\"!popoverContentIconLeft()\"\n      [config]=\"{ maxWidth: 250, direction: 'bottom', content: popoverContentIconLeft(), zIndex: zIndexPopoverContent() }\">\n      <i\n        [attr.tagInput]=\"tagInput()\"\n        [class]=\"iconLeftClass() + ' libs-ui-input-icon-left !text-[#9ca2ad]'\"\n        (click)=\"handlerEventIconLeft($event, 'click')\"></i>\n    </libs_ui-components-popover>\n  }\n  <div\n    #elementRightRef\n    class=\"absolute flex items-center h-full top-0 right-0\">\n    @if (value() && placeholder().trim() && keepPlaceholderOnly()) {\n      <span [class]=\"'libs-ui-input-placeholder-custom libs-ui-font-h5r'\">\n        {{ placeholder() }}\n      </span>\n    }\n    @if (dataType() !== 'string' && valueUpDownNumber()) {\n      <libs_ui-components-buttons-sort\n        class=\"mr-[12px]\"\n        [disableAsc]=\"disableAsc()\"\n        [disableDesc]=\"disableDesc()\"\n        [attr.tagInput]=\"tagInput()\"\n        [onlyEmit]=\"true\"\n        [disable]=\"disable() || readonly()\"\n        (outChange)=\"handlerChangeValue($event)\" />\n    }\n    @if (iconRightClass()) {\n      <libs_ui-components-popover\n        class=\"flex\"\n        [ignoreShowPopover]=\"!popoverContentIconRight()\"\n        [config]=\"{ maxWidth: 250, direction: 'bottom', content: popoverContentIconRight(), zIndex: zIndexPopoverContent() }\">\n        <i\n          [attr.tagInput]=\"tagInput()\"\n          [class.text-[#6a7383]]=\"(!disable() && !readonly()) || acceptOnlyClickIcon()\"\n          [class.text-[#cdd0d6]]=\"((disable() || readonly()) && !acceptOnlyClickIcon()) || setIconRightColorSameColorDisableReadOnly()\"\n          [class]=\"iconRightClass() + ' libs-ui-input-icon-right'\"\n          (click)=\"handlerEventIconRight($event, 'click')\"></i>\n      </libs_ui-components-popover>\n    }\n  </div>\n  <div\n    class=\"libs-ui-input-text-bottom {{ classContainerBottomInput() }}\"\n    [style.right.px]=\"(tagInput() === 'input' ? elementRightRef.clientWidth || 0 : 0) + 8\">\n    @if (templateLeftBottomInput(); as templateLeftBottomInput) {\n      <ng-container *ngTemplateOutlet=\"templateLeftBottomInput\" />\n    }\n    <div\n      #textCountRef\n      class=\"text-[#9ca2ad] libs-ui-font-h7r\"\n      [class.hidden]=\"dataType() !== 'string' || !showCount()\">\n      <span>{{ countDisplay() }}</span>\n      @if (maxLength()) {\n        <span>/{{ maxLengthDisplay() }}</span>\n      }\n    </div>\n    @if (templateRightBottomInput(); as templateRightBottomInput) {\n      <ng-container *ngTemplateOutlet=\"templateRightBottomInput\" />\n    }\n  </div>\n</div>\n", styles: [".libs-ui-input{max-width:100%;border-radius:none;color:#071631;padding:7px 12px;background-color:#fff;background-clip:padding-box;min-height:32px}.libs-ui-input:not(.libs-ui-input-not-border){border:1px solid #e6e7ea;border-radius:4px}.libs-ui-input:focus{outline:none}.libs-ui-input:focus:not(:read-only):not(:disabled):not(.libs-ui-input-not-border){border:1px solid var(--libs-ui-color-light-1, #4e8cf7)}.libs-ui-input .libs-ui-input-valid-check{position:absolute;left:-27px}.libs-ui-input-not-border{border:transparent}libs-ui-components-button-sort{position:absolute;right:12px;top:0}libs-ui-components-button-sort[tagInput=textarea]{top:-10px}.libs-ui-input-icon-left{position:absolute;top:8px;left:16px;font-size:16px}.libs-ui-input-icon-right{font-size:16px;margin-right:8px}.libs-ui-input-text-bottom{display:flex;align-items:center;position:absolute;bottom:8px}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-credentials-auto-fill-button{margin-right:8px!important}textarea::-webkit-resizer{border:transparent;outline:none}.libs-ui-components-input-textarea-container:after{content:\"\";border-top:1.5px solid #9ca2ad;width:15px;transform:rotate(-45deg);background:transparent;position:absolute;right:0;bottom:8px;pointer-events:none;border-radius:25%}.libs-ui-components-input-textarea-container .libs-ui-components-input-textarea-container-resize-icon{border-top:1.5px solid #9ca2ad;width:7px;transform:rotate(-45deg);position:absolute;bottom:5px;right:1px;pointer-events:none;border-radius:25%}.libs-ui-input-placeholder-custom{color:#6a7378;margin-right:16px;background:inherit}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: LibsUiComponentsButtonsSortComponent, selector: "libs_ui-components-buttons-sort", inputs: ["size", "mode", "fieldSort", "disable", "disableAsc", "disableDesc", "onlyEmit"], outputs: ["modeChange", "outChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'libs_ui-components-inputs-input', standalone: true, imports: [
-                        TranslateModule, NgTemplateOutlet,
-                        LibsUiComponentsPopoverComponent,
-                        LibsUiComponentsButtonsSortComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'flex relative !text-[#9ca2ad] ' + classContainerInput()\"\n  [class.libs-ui-components-input-textarea-container]=\"tagInput() === 'textarea' && resize() === 'auto'\">\n  @if (tagInput() === 'input') {\n    <input #inputRef\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      [style.height.px]=\"defaultHeight()\"\n      [style.minHeight.px]=\"defaultHeight()\"\n      [style.paddingRight.px.important]=\"paddingRightCustom()\"\n      [class.w-full]=\"!ignoreWidthInput100()\"\n      [class]=\"'libs-ui-input libs-ui-font-h5r ' + classInclude()\"\n      [class.border-primary-focus-general]=\"focusInput()\"\n      [class.libs-ui-input-not-border]=\"noBorder()\"\n      [class.libs-ui-bg-special-none]=\"backgroundNone()\"\n      [class.libs-ui-border-error-general]=\"borderError()\"\n      [class.text-[#29c7cc]]=\"useColorModeExist()\"\n      [class.!pl-[40px]]=\"iconLeftClass()\"\n      [attr.maxLength]=\"maxLength() || undefined\"\n      [placeholder]=\"placeholder() | translate\"\n      [attr.type]=\"typeInput()\"\n      [attr.inputmode]=\"modeInput()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"disable()\"\n      [autocomplete]=\"resetAutoCompletePassword()? 'new-password':''\" />\n  }\n  @if (tagInput() === 'textarea') {\n    @if (resize() === 'auto') {\n      <div class=\"libs-ui-components-input-textarea-container-resize-icon\"></div>\n    }\n    <textarea #inputRef\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      [style.height.px]=\"defaultHeight()\"\n      [style.minHeight.px]=\"minHeightTextArea() ?? defaultHeight()\"\n      [style.paddingRight.px.important]=\"paddingRightCustom()\"\n      [style.maxHeight.px]=\"maxHeightTextArea()\"\n      [style.resize]=\"resize()\"\n      [class.w-full]=\"!ignoreWidthInput100()\"\n      [class]=\"'libs-ui-input libs-ui-font-h5r libs-ui-cursor-auto ' + classInclude()\"\n      [class.libs-ui-input-not-border]=\"noBorder()\"\n      [class.libs-ui-bg-special-none]=\"backgroundNone()\"\n      [class.libs-ui-border-error-general]=\"borderError()\"\n      [class.text-[#29c7cc]]=\"useColorModeExist()\"\n      [class.pl-[32px]]=\"iconLeftClass()\"\n      [attr.maxLength]=\"maxLength() || undefined\"\n      [placeholder]=\"placeholder() | translate\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"disable()\">\n      </textarea>\n  }\n\n  @if (tagInput() === 'iframe-textarea' && htmlIframeArea()) {\n    <span class=\"d-none\">\n    </span>\n    <iframe #iframeRef\n      [style.maxHeight.px]=\"maxHeightTextArea()\"\n      [style.height.px]=\"defaultHeight()\"\n      [srcdoc]=\"htmlIframeArea()\"\n      class=\"w-full\"\n      frameBorder=\"0\"\n      (load)=\"handlerOnLoad($event,iframeRef)\">\n    </iframe>\n  }\n  @if (iconLeftClass()) {\n    <libs_ui-components-popover [ignoreShowPopover]=\"!popoverContentIconLeft()\"\n      [config]=\"{maxWidth:250,direction:'bottom',content:popoverContentIconLeft(),zIndex: zIndexPopoverContent()}\">\n      <i [attr.tagInput]=\"tagInput()\"\n        [class]=\"iconLeftClass() +' libs-ui-input-icon-left !text-[#9ca2ad]'\"\n        (click)=\"handlerEventIconLeft($event,'click')\">\n      </i>\n    </libs_ui-components-popover>\n  }\n  <div #elementRightRef\n    class=\"absolute flex items-center h-full top-0 right-0\">\n    @if (value() && placeholder().trim() && keepPlaceholderOnly()) {\n      <span [class]=\"'libs-ui-input-placeholder-custom libs-ui-font-h5r'\">\n        {{ placeholder() }}\n      </span>\n    }\n    @if (dataType() !=='string' && valueUpDownNumber()) {\n      <libs_ui-components-buttons-sort class=\"mr-[12px]\"\n        [disableAsc]=\"disableAsc()\"\n        [disableDesc]=\"disableDesc()\"\n        [attr.tagInput]=\"tagInput()\"\n        [onlyEmit]=\"true\"\n        [disable]=\"disable() || readonly()\"\n        (outChange)=\"handlerChangeValue($event)\" />\n    }\n    @if (iconRightClass()) {\n      <libs_ui-components-popover class=\"flex\"\n        [ignoreShowPopover]=\"!popoverContentIconRight()\"\n        [config]=\"{maxWidth:250,direction:'bottom',content:popoverContentIconRight(),zIndex: zIndexPopoverContent()}\">\n        <i [attr.tagInput]=\"tagInput()\"\n          [class.text-[#6a7383]]=\"(!disable() && !readonly()) || acceptOnlyClickIcon()\"\n          [class.text-[#cdd0d6]]='((disable() || readonly()) && !acceptOnlyClickIcon()) || setIconRightColorSameColorDisableReadOnly()'\n          [class]=\"iconRightClass() +' libs-ui-input-icon-right'\"\n          (click)=\"handlerEventIconRight($event,'click')\">\n        </i>\n      </libs_ui-components-popover>\n    }\n  </div>\n  <div class=\"libs-ui-input-text-bottom {{ classContainerBottomInput() }}\"\n    [style.right.px]=\"(tagInput() === 'input' ? (elementRightRef.clientWidth || 0) : 0) + 8\">\n    @if (templateLeftBottomInput(); as templateLeftBottomInput) {\n      <ng-container *ngTemplateOutlet=\"templateLeftBottomInput\" />\n    }\n      <div #textCountRef\n        class=\"text-[#9ca2ad] libs-ui-font-h7r\"\n        [class.hidden]=\"dataType() !== 'string' || !showCount()\">\n        <span>{{ countDisplay() }}</span>\n        @if (maxLength()) {\n          <span>/{{ maxLengthDisplay() }}</span>\n          }\n      </div>\n      @if (templateRightBottomInput(); as templateRightBottomInput) {\n        <ng-container *ngTemplateOutlet=\"templateRightBottomInput\" />\n      }\n  </div>\n</div>\n", styles: [".libs-ui-input{max-width:100%;border-radius:none;color:#071631;padding:7px 12px;background-color:#fff;background-clip:padding-box;min-height:32px}.libs-ui-input:not(.libs-ui-input-not-border){border:1px solid #e6e7ea;border-radius:4px}.libs-ui-input:focus{outline:none}.libs-ui-input:focus:not(:read-only):not(:disabled):not(.libs-ui-input-not-border){border:1px solid var(--libs-ui-color-light-1, #4e8cf7)}.libs-ui-input .libs-ui-input-valid-check{position:absolute;left:-27px}.libs-ui-input-not-border{border:transparent}libs-ui-components-button-sort{position:absolute;right:12px;top:0}libs-ui-components-button-sort[tagInput=textarea]{top:-10px}.libs-ui-input-icon-left{position:absolute;top:8px;left:16px;font-size:16px}.libs-ui-input-icon-right{font-size:16px;margin-right:8px}.libs-ui-input-text-bottom{display:flex;align-items:center;position:absolute;bottom:8px}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-credentials-auto-fill-button{margin-right:8px!important}textarea::-webkit-resizer{border:transparent;outline:none}.libs-ui-components-input-textarea-container:after{content:\"\";border-top:1.5px solid #9ca2ad;width:15px;transform:rotate(-45deg);background:transparent;position:absolute;right:0;bottom:8px;pointer-events:none;border-radius:25%}.libs-ui-components-input-textarea-container .libs-ui-components-input-textarea-container-resize-icon{border-top:1.5px solid #9ca2ad;width:7px;transform:rotate(-45deg);position:absolute;bottom:5px;right:1px;pointer-events:none;border-radius:25%}.libs-ui-input-placeholder-custom{color:#6a7378;margin-right:16px;background:inherit}\n"] }]
+            args: [{ selector: 'libs_ui-components-inputs-input', standalone: true, imports: [TranslateModule, NgTemplateOutlet, LibsUiComponentsPopoverComponent, LibsUiComponentsButtonsSortComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  [class]=\"'flex relative !text-[#9ca2ad] ' + classContainerInput()\"\n  [class.libs-ui-components-input-textarea-container]=\"tagInput() === 'textarea' && resize() === 'auto'\">\n  @if (tagInput() === 'input') {\n    <input\n      #inputRef\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      [style.height.px]=\"defaultHeight()\"\n      [style.minHeight.px]=\"defaultHeight()\"\n      [style.paddingRight.px.important]=\"paddingRightCustom()\"\n      [class.w-full]=\"!ignoreWidthInput100()\"\n      [class]=\"'libs-ui-input libs-ui-font-h5r ' + classInclude()\"\n      [class.border-primary-focus-general]=\"focusInput()\"\n      [class.libs-ui-input-not-border]=\"noBorder()\"\n      [class.libs-ui-bg-special-none]=\"backgroundNone()\"\n      [class.libs-ui-border-error-general]=\"borderError()\"\n      [class.text-[#29c7cc]]=\"useColorModeExist()\"\n      [class.!pl-[40px]]=\"iconLeftClass()\"\n      [attr.maxLength]=\"maxLength() || undefined\"\n      [placeholder]=\"placeholder() | translate\"\n      [attr.type]=\"typeInput()\"\n      [attr.inputmode]=\"modeInput()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"disable()\"\n      [autocomplete]=\"resetAutoCompletePassword() ? 'new-password' : ''\" />\n  }\n  @if (tagInput() === 'textarea') {\n    @if (resize() === 'auto') {\n      <div class=\"libs-ui-components-input-textarea-container-resize-icon\"></div>\n    }\n    <textarea\n      #inputRef\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      [style.height.px]=\"defaultHeight()\"\n      [style.minHeight.px]=\"minHeightTextArea() ?? defaultHeight()\"\n      [style.paddingRight.px.important]=\"paddingRightCustom()\"\n      [style.maxHeight.px]=\"maxHeightTextArea()\"\n      [style.resize]=\"resize()\"\n      [class.w-full]=\"!ignoreWidthInput100()\"\n      [class]=\"'libs-ui-input libs-ui-font-h5r libs-ui-cursor-auto ' + classInclude()\"\n      [class.libs-ui-input-not-border]=\"noBorder()\"\n      [class.libs-ui-bg-special-none]=\"backgroundNone()\"\n      [class.libs-ui-border-error-general]=\"borderError()\"\n      [class.text-[#29c7cc]]=\"useColorModeExist()\"\n      [class.pl-[32px]]=\"iconLeftClass()\"\n      [attr.maxLength]=\"maxLength() || undefined\"\n      [placeholder]=\"placeholder() | translate\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"disable()\"></textarea>\n  }\n\n  @if (tagInput() === 'iframe-textarea' && htmlIframeArea()) {\n    <span class=\"d-none\"></span>\n    <iframe\n      #iframeRef\n      [style.maxHeight.px]=\"maxHeightTextArea()\"\n      [style.height.px]=\"defaultHeight()\"\n      [srcdoc]=\"htmlIframeArea()\"\n      class=\"w-full\"\n      frameBorder=\"0\"\n      (load)=\"handlerOnLoad($event, iframeRef)\"></iframe>\n  }\n  @if (iconLeftClass()) {\n    <libs_ui-components-popover\n      [ignoreShowPopover]=\"!popoverContentIconLeft()\"\n      [config]=\"{ maxWidth: 250, direction: 'bottom', content: popoverContentIconLeft(), zIndex: zIndexPopoverContent() }\">\n      <i\n        [attr.tagInput]=\"tagInput()\"\n        [class]=\"iconLeftClass() + ' libs-ui-input-icon-left !text-[#9ca2ad]'\"\n        (click)=\"handlerEventIconLeft($event, 'click')\"></i>\n    </libs_ui-components-popover>\n  }\n  <div\n    #elementRightRef\n    class=\"absolute flex items-center h-full top-0 right-0\">\n    @if (value() && placeholder().trim() && keepPlaceholderOnly()) {\n      <span [class]=\"'libs-ui-input-placeholder-custom libs-ui-font-h5r'\">\n        {{ placeholder() }}\n      </span>\n    }\n    @if (dataType() !== 'string' && valueUpDownNumber()) {\n      <libs_ui-components-buttons-sort\n        class=\"mr-[12px]\"\n        [disableAsc]=\"disableAsc()\"\n        [disableDesc]=\"disableDesc()\"\n        [attr.tagInput]=\"tagInput()\"\n        [onlyEmit]=\"true\"\n        [disable]=\"disable() || readonly()\"\n        (outChange)=\"handlerChangeValue($event)\" />\n    }\n    @if (iconRightClass()) {\n      <libs_ui-components-popover\n        class=\"flex\"\n        [ignoreShowPopover]=\"!popoverContentIconRight()\"\n        [config]=\"{ maxWidth: 250, direction: 'bottom', content: popoverContentIconRight(), zIndex: zIndexPopoverContent() }\">\n        <i\n          [attr.tagInput]=\"tagInput()\"\n          [class.text-[#6a7383]]=\"(!disable() && !readonly()) || acceptOnlyClickIcon()\"\n          [class.text-[#cdd0d6]]=\"((disable() || readonly()) && !acceptOnlyClickIcon()) || setIconRightColorSameColorDisableReadOnly()\"\n          [class]=\"iconRightClass() + ' libs-ui-input-icon-right'\"\n          (click)=\"handlerEventIconRight($event, 'click')\"></i>\n      </libs_ui-components-popover>\n    }\n  </div>\n  <div\n    class=\"libs-ui-input-text-bottom {{ classContainerBottomInput() }}\"\n    [style.right.px]=\"(tagInput() === 'input' ? elementRightRef.clientWidth || 0 : 0) + 8\">\n    @if (templateLeftBottomInput(); as templateLeftBottomInput) {\n      <ng-container *ngTemplateOutlet=\"templateLeftBottomInput\" />\n    }\n    <div\n      #textCountRef\n      class=\"text-[#9ca2ad] libs-ui-font-h7r\"\n      [class.hidden]=\"dataType() !== 'string' || !showCount()\">\n      <span>{{ countDisplay() }}</span>\n      @if (maxLength()) {\n        <span>/{{ maxLengthDisplay() }}</span>\n      }\n    </div>\n    @if (templateRightBottomInput(); as templateRightBottomInput) {\n      <ng-container *ngTemplateOutlet=\"templateRightBottomInput\" />\n    }\n  </div>\n</div>\n", styles: [".libs-ui-input{max-width:100%;border-radius:none;color:#071631;padding:7px 12px;background-color:#fff;background-clip:padding-box;min-height:32px}.libs-ui-input:not(.libs-ui-input-not-border){border:1px solid #e6e7ea;border-radius:4px}.libs-ui-input:focus{outline:none}.libs-ui-input:focus:not(:read-only):not(:disabled):not(.libs-ui-input-not-border){border:1px solid var(--libs-ui-color-light-1, #4e8cf7)}.libs-ui-input .libs-ui-input-valid-check{position:absolute;left:-27px}.libs-ui-input-not-border{border:transparent}libs-ui-components-button-sort{position:absolute;right:12px;top:0}libs-ui-components-button-sort[tagInput=textarea]{top:-10px}.libs-ui-input-icon-left{position:absolute;top:8px;left:16px;font-size:16px}.libs-ui-input-icon-right{font-size:16px;margin-right:8px}.libs-ui-input-text-bottom{display:flex;align-items:center;position:absolute;bottom:8px}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-credentials-auto-fill-button{margin-right:8px!important}textarea::-webkit-resizer{border:transparent;outline:none}.libs-ui-components-input-textarea-container:after{content:\"\";border-top:1.5px solid #9ca2ad;width:15px;transform:rotate(-45deg);background:transparent;position:absolute;right:0;bottom:8px;pointer-events:none;border-radius:25%}.libs-ui-components-input-textarea-container .libs-ui-components-input-textarea-container-resize-icon{border-top:1.5px solid #9ca2ad;width:7px;transform:rotate(-45deg);position:absolute;bottom:5px;right:1px;pointer-events:none;border-radius:25%}.libs-ui-input-placeholder-custom{color:#6a7378;margin-right:16px;background:inherit}\n"] }]
         }], ctorParameters: () => [] });
 
 /**