@libs-ui/components-inputs-input 0.2.356-38 → 0.2.356-40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -347,7 +347,7 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
347
347
|
const files = event.dataTransfer?.files || event.clipboardData?.files;
|
|
348
348
|
const text = (event.clipboardData || window.clipboardData)?.getData('text');
|
|
349
349
|
this.dataTextPaste.set(text);
|
|
350
|
-
if (!files
|
|
350
|
+
if (!files?.length) {
|
|
351
351
|
return;
|
|
352
352
|
}
|
|
353
353
|
if (!text) {
|
|
@@ -389,7 +389,8 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
389
389
|
if (!this.acceptNegativeValue() && value < 0) {
|
|
390
390
|
value = 0;
|
|
391
391
|
}
|
|
392
|
-
const
|
|
392
|
+
const separatorStr = dataBehindSeparator ? separator : '';
|
|
393
|
+
const dataEmit = this.dataType() === 'bigint' ? `${value}${separatorStr}${dataBehindSeparator}` : value;
|
|
393
394
|
this.value.set(dataEmit);
|
|
394
395
|
this.outChange.emit(dataEmit);
|
|
395
396
|
this.outChangeValueByButtonUpDown.emit();
|
|
@@ -446,12 +447,9 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
446
447
|
decimal = '0';
|
|
447
448
|
}
|
|
448
449
|
if (decimalSplit.some((item) => item !== '0')) {
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
.split('')
|
|
453
|
-
.reverse()
|
|
454
|
-
.join('');
|
|
450
|
+
decimalSplit.reverse();
|
|
451
|
+
const decimalReverse = decimalSplit.join('');
|
|
452
|
+
decimal = decimalReverse.replace(/(^0+)/, '').split('').reverse().join('');
|
|
455
453
|
}
|
|
456
454
|
return `${int}${separator}${decimal}`;
|
|
457
455
|
}
|
|
@@ -468,7 +466,7 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
468
466
|
if (this.dataType() !== 'string') {
|
|
469
467
|
elementValue = elementValue.replace(new RegExp(`[^0-9.,${this.acceptNegativeValue() ? '-' : ''}]`, 'g'), '');
|
|
470
468
|
if (UtilsCache.getLang() === UtilsLanguageConstants.EN) {
|
|
471
|
-
elementValue = elementValue.replace(
|
|
469
|
+
elementValue = elementValue.replace(/,/, '');
|
|
472
470
|
}
|
|
473
471
|
}
|
|
474
472
|
this.Element.value = elementValue;
|
|
@@ -486,7 +484,7 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
486
484
|
processEventAndEmitValue(e) {
|
|
487
485
|
const value = this.parseValueByDataType(e.target.value);
|
|
488
486
|
if (this.dataType() !== 'string' && !this.ignoreBlockInputMaxValue() && !isNil(this.maxValueNumber()) && value > (this.maxValueNumber() || 0) && this.value() < value) {
|
|
489
|
-
const valueDisplay = viewDataNumberByLanguage(`${this.value()}`.replace(
|
|
487
|
+
const valueDisplay = viewDataNumberByLanguage(`${this.value()}`.replace(/\./g, ','), this.acceptNegativeValue(), this.fixedFloat() ?? 14);
|
|
490
488
|
e.target.value = `${this.getCheckZero(+valueDisplay, e.target.value)}${valueDisplay}`;
|
|
491
489
|
return this.processEventAndEmitValue(e);
|
|
492
490
|
}
|
|
@@ -521,14 +519,14 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
521
519
|
if (this.dataType() === 'float') {
|
|
522
520
|
maxLength--;
|
|
523
521
|
}
|
|
524
|
-
if (numbers
|
|
525
|
-
lengthValueCompare = viewDataNumberByLanguage(`${numbers[0]}`.replace(
|
|
522
|
+
if (numbers?.[0]) {
|
|
523
|
+
lengthValueCompare = viewDataNumberByLanguage(`${numbers[0]}`.replace(/\./g, ','), this.acceptNegativeValue(), this.fixedFloat() ?? 14).length;
|
|
526
524
|
}
|
|
527
|
-
if (numbers
|
|
525
|
+
if (numbers?.[1]) {
|
|
528
526
|
lengthValueCompare += 1 + numbers[1].length;
|
|
529
527
|
}
|
|
530
528
|
if (maxLength && lengthValueCompare >= maxLength) {
|
|
531
|
-
const valueDisplay = viewDataNumberByLanguage((lengthValueCompare === maxLength ? valueCompare : `${this.value()}`).replace(
|
|
529
|
+
const valueDisplay = viewDataNumberByLanguage((lengthValueCompare === maxLength ? valueCompare : `${this.value()}`).replace(/\./g, ','), this.acceptNegativeValue(), this.fixedFloat() ?? 14);
|
|
532
530
|
e.target.value = `${this.getCheckZero(+valueDisplay, e.target.value)}${valueDisplay}`;
|
|
533
531
|
return true;
|
|
534
532
|
}
|
|
@@ -542,7 +540,7 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
542
540
|
const selectionStart = e.target.selectionStart - 1;
|
|
543
541
|
const { data, keyCode } = e;
|
|
544
542
|
this.charFirstIsZero.set(false);
|
|
545
|
-
if (valueTarget.
|
|
543
|
+
if (valueTarget.startsWith('0')) {
|
|
546
544
|
this.charFirstIsZero.set(true);
|
|
547
545
|
}
|
|
548
546
|
if (this.dataType() === 'string') {
|
|
@@ -551,7 +549,7 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
551
549
|
}
|
|
552
550
|
return;
|
|
553
551
|
}
|
|
554
|
-
if (/
|
|
552
|
+
if (/\d/g.test(data) && valueTarget.charAt(selectionStart + 1) === '-') {
|
|
555
553
|
valueTarget = valueTarget.replaceAt(0, '');
|
|
556
554
|
}
|
|
557
555
|
let strRegex = `[^0-9.,${this.acceptNegativeValue() ? '-' : ''}]`;
|
|
@@ -573,7 +571,7 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
573
571
|
e.target.value = '';
|
|
574
572
|
return;
|
|
575
573
|
}
|
|
576
|
-
if (valueTarget && valueTarget.length === 2 && valueTarget.
|
|
574
|
+
if (valueTarget && valueTarget.length === 2 && valueTarget.startsWith('-') && data && !/\d/g.test(data)) {
|
|
577
575
|
e.target.value = '-';
|
|
578
576
|
return;
|
|
579
577
|
}
|
|
@@ -628,18 +626,18 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
628
626
|
if (Math.abs(parseInt(valueTarget)) > (this.maxValueNumber() ?? 9007199254740991)) {
|
|
629
627
|
valueTarget = valueTarget.slice(0, maxTotalNumber - 1);
|
|
630
628
|
}
|
|
631
|
-
if (this.onlyAcceptNegativeValue() && valueTarget
|
|
629
|
+
if (this.onlyAcceptNegativeValue() && !valueTarget.startsWith('-') && !valueTarget.startsWith('0')) {
|
|
632
630
|
valueTarget = '';
|
|
633
631
|
}
|
|
634
|
-
if (valueTarget && /(^-)?(^
|
|
632
|
+
if (valueTarget && /(^-)?(^0+)/.test(valueTarget)) {
|
|
635
633
|
const id = uuid();
|
|
636
|
-
valueTarget = valueTarget.replace(/(^-)?(^
|
|
634
|
+
valueTarget = valueTarget.replace(/(^-)?(^0+)/, `$1${id}`).replace(id, '0');
|
|
637
635
|
}
|
|
638
636
|
if (valueTarget === '-0') {
|
|
639
637
|
valueTarget = '0';
|
|
640
638
|
}
|
|
641
|
-
if (valueTarget && /(^
|
|
642
|
-
valueTarget = valueTarget.replace(/(^
|
|
639
|
+
if (valueTarget && /(^0)([1-9])(\d+)?/.test(valueTarget)) {
|
|
640
|
+
valueTarget = valueTarget.replace(/(^0)([1-9])(\d+)?/, '$2$3');
|
|
643
641
|
}
|
|
644
642
|
const valueDisplay = viewDataNumberByLanguage(valueTarget, this.acceptNegativeValue() || false, 0);
|
|
645
643
|
if (this.checkMaxLengthNumberAndSetValue(valueDisplay, e)) {
|
|
@@ -695,7 +693,7 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
695
693
|
valueTarget = valueTarget.replace(new RegExp(strRegex, 'g'), separatorRevert);
|
|
696
694
|
let valueFormat = '';
|
|
697
695
|
let [fontSeparatorNumber, behindSeparatorNumber] = valueTarget.split(separatorRevert);
|
|
698
|
-
let maxFontTotalNumber = fontSeparatorNumber
|
|
696
|
+
let maxFontTotalNumber = fontSeparatorNumber?.includes('-') ? 16 : 15;
|
|
699
697
|
if (this.dataType() === 'bigint') {
|
|
700
698
|
maxFontTotalNumber = (this.maxLengthNumberCount() ?? 19) - (this.fixedFloat() ?? 4) + (fontSeparatorNumber.includes('-') ? 1 : 0);
|
|
701
699
|
}
|
|
@@ -708,47 +706,47 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
708
706
|
}
|
|
709
707
|
switch (this.dataType()) {
|
|
710
708
|
case 'float':
|
|
711
|
-
if (!fontOverMaxTotalNumber && behindSeparatorNumber
|
|
709
|
+
if (!fontOverMaxTotalNumber && behindSeparatorNumber?.length) {
|
|
712
710
|
behindSeparatorNumber = behindSeparatorNumber.slice(0, maxFontTotalNumber - fontSeparatorNumber.length);
|
|
713
711
|
}
|
|
714
712
|
behindSeparatorNumber = `${behindSeparatorNumber ?? ''}`;
|
|
715
713
|
break;
|
|
716
714
|
case 'bigint':
|
|
717
|
-
if (behindSeparatorNumber
|
|
715
|
+
if (behindSeparatorNumber?.length && behindSeparatorNumber.length > (this.fixedFloat() ?? 4)) {
|
|
718
716
|
behindSeparatorNumber = behindSeparatorNumber.slice(0, this.fixedFloat() ?? 4);
|
|
719
717
|
}
|
|
720
718
|
break;
|
|
721
719
|
}
|
|
722
720
|
const indexOfSeparatorRevert = valueTarget.indexOf(separatorRevert);
|
|
723
|
-
if (this.onlyAcceptNegativeValue() && fontSeparatorNumber
|
|
721
|
+
if (this.onlyAcceptNegativeValue() && !fontSeparatorNumber.startsWith('-') && !fontSeparatorNumber.startsWith('0')) {
|
|
724
722
|
fontSeparatorNumber = '';
|
|
725
723
|
}
|
|
726
|
-
if (this.onlyAcceptNegativeValue() && indexOfSeparatorRevert >= 0 && fontSeparatorNumber
|
|
724
|
+
if (this.onlyAcceptNegativeValue() && indexOfSeparatorRevert >= 0 && !fontSeparatorNumber.startsWith('-')) {
|
|
727
725
|
fontSeparatorNumber = '0';
|
|
728
726
|
behindSeparatorNumber = this.dataType() === 'bigint' ? '0' : '';
|
|
729
727
|
}
|
|
730
|
-
if (fontSeparatorNumber && /(^-)(
|
|
728
|
+
if (fontSeparatorNumber && /(^-)(0+)/.test(fontSeparatorNumber)) {
|
|
731
729
|
const id = uuid();
|
|
732
|
-
fontSeparatorNumber = fontSeparatorNumber.replace(/(^-)(
|
|
730
|
+
fontSeparatorNumber = fontSeparatorNumber.replace(/(^-)(0+)/, `$1${id}`).replace(id, '0');
|
|
733
731
|
}
|
|
734
|
-
if (fontSeparatorNumber && /(^
|
|
735
|
-
fontSeparatorNumber = fontSeparatorNumber.replace(/(^
|
|
732
|
+
if (fontSeparatorNumber && /(^0+)/.test(fontSeparatorNumber)) {
|
|
733
|
+
fontSeparatorNumber = fontSeparatorNumber.replace(/(^0+)/, '0');
|
|
736
734
|
}
|
|
737
|
-
if (/(^-)(
|
|
738
|
-
fontSeparatorNumber = fontSeparatorNumber.replace(/(^-)(
|
|
735
|
+
if (/(^-)(0+)([1-9])([\d.]+)?/.test(fontSeparatorNumber)) {
|
|
736
|
+
fontSeparatorNumber = fontSeparatorNumber.replace(/(^-)(0+)([1-9])([\d.]+)?/, '$1$3$4');
|
|
739
737
|
}
|
|
740
|
-
if (/(^
|
|
741
|
-
fontSeparatorNumber = fontSeparatorNumber.replace(/(^
|
|
738
|
+
if (/(^0+)([1-9])([\d.]+)?/.test(fontSeparatorNumber)) {
|
|
739
|
+
fontSeparatorNumber = fontSeparatorNumber.replace(/(^0+)([1-9])([\d.]+)?/, '$2$3');
|
|
742
740
|
}
|
|
743
741
|
switch (this.dataType()) {
|
|
744
742
|
case 'float':
|
|
745
|
-
if (/(^
|
|
746
|
-
behindSeparatorNumber = behindSeparatorNumber.replace(/(^
|
|
743
|
+
if (/(^0{6})/.test(behindSeparatorNumber)) {
|
|
744
|
+
behindSeparatorNumber = behindSeparatorNumber.replace(/(^0{6})/, '00000');
|
|
747
745
|
}
|
|
748
746
|
break;
|
|
749
747
|
case 'bigint':
|
|
750
|
-
if (/(^
|
|
751
|
-
behindSeparatorNumber = behindSeparatorNumber.replace(/(^
|
|
748
|
+
if (/(^0{4})/.test(behindSeparatorNumber)) {
|
|
749
|
+
behindSeparatorNumber = behindSeparatorNumber.replace(/(^0{4})/, '0000');
|
|
752
750
|
}
|
|
753
751
|
break;
|
|
754
752
|
}
|
|
@@ -757,14 +755,13 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
757
755
|
}
|
|
758
756
|
const hasSeparatorRevert = (this.dataType() === 'bigint' ? true : !fontOverMaxTotalNumber) && indexOfSeparatorRevert >= 0;
|
|
759
757
|
valueFormat = `${fontSeparatorNumber ?? ''}${hasSeparatorRevert ? separatorRevert : ''}${behindSeparatorNumber ?? ''}`;
|
|
760
|
-
if (valueFormat && this.onlyAcceptNegativeValue() && valueFormat
|
|
758
|
+
if (valueFormat && this.onlyAcceptNegativeValue() && !valueFormat.startsWith('-') && !valueFormat.startsWith('0')) {
|
|
761
759
|
valueFormat = '0';
|
|
762
760
|
}
|
|
763
761
|
if (this.checkMaxLengthNumberAndSetValue(valueFormat, e)) {
|
|
764
|
-
valueTarget = e.target.value;
|
|
765
762
|
return;
|
|
766
763
|
}
|
|
767
|
-
|
|
764
|
+
e.target.value = valueFormat;
|
|
768
765
|
}
|
|
769
766
|
getCheckZero(value, targetCurrent) {
|
|
770
767
|
let zero = '';
|
|
@@ -774,7 +771,7 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
774
771
|
if (this.charFirstIsZero() && this.keepZeroInTypeInt() && value !== 0) {
|
|
775
772
|
zero = '0';
|
|
776
773
|
}
|
|
777
|
-
if (this.charFirstIsZero() && this.autoAddZeroLessThan10InTypeInt() && ((value > 0 && value < 10 && !/(^0)+/.test(`${targetCurrent}`)) || (
|
|
774
|
+
if (this.charFirstIsZero() && this.autoAddZeroLessThan10InTypeInt() && ((value > 0 && value < 10 && !/(^0)+/.test(`${targetCurrent}`)) || (/^0{2,}$/.exec(targetCurrent ?? '')?.length && value === 0))) {
|
|
778
775
|
zero = '0';
|
|
779
776
|
}
|
|
780
777
|
return zero;
|
|
@@ -959,11 +956,11 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
959
956
|
this.onDestroy.complete();
|
|
960
957
|
}
|
|
961
958
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
962
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 });
|
|
959
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", 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 title=\"Content frame\"\n [style.maxHeight.px]=\"maxHeightTextArea()\"\n [style.height.px]=\"defaultHeight()\"\n [srcdoc]=\"htmlIframeArea()\"\n class=\"w-full border-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')\"\n (keyup.enter)=\"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')\"\n (keyup.enter)=\"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 });
|
|
963
960
|
}
|
|
964
961
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsInputsInputComponent, decorators: [{
|
|
965
962
|
type: Component,
|
|
966
|
-
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
|
|
963
|
+
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 title=\"Content frame\"\n [style.maxHeight.px]=\"maxHeightTextArea()\"\n [style.height.px]=\"defaultHeight()\"\n [srcdoc]=\"htmlIframeArea()\"\n class=\"w-full border-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')\"\n (keyup.enter)=\"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')\"\n (keyup.enter)=\"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"] }]
|
|
967
964
|
}], ctorParameters: () => [] });
|
|
968
965
|
|
|
969
966
|
/**
|