@libs-ui/components-inputs-input 0.2.5
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.
- package/README.md +3 -0
- package/defines/index-iframe-area.define.d.ts +1 -0
- package/esm2022/defines/index-iframe-area.define.mjs +119 -0
- package/esm2022/index.mjs +3 -0
- package/esm2022/input.component.mjs +781 -0
- package/esm2022/interfaces/focus-and-blur-event.interface.mjs +2 -0
- package/esm2022/interfaces/function-control-event.interface.mjs +2 -0
- package/esm2022/interfaces/index.mjs +3 -0
- package/esm2022/libs-ui-components-inputs-input.mjs +5 -0
- package/fesm2022/libs-ui-components-inputs-input.mjs +906 -0
- package/fesm2022/libs-ui-components-inputs-input.mjs.map +1 -0
- package/index.d.ts +2 -0
- package/input.component.d.ts +127 -0
- package/interfaces/focus-and-blur-event.interface.d.ts +4 -0
- package/interfaces/function-control-event.interface.d.ts +8 -0
- package/interfaces/index.d.ts +2 -0
- package/package.json +25 -0
|
@@ -0,0 +1,906 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { signal, computed, input, model, output, viewChild, inject, Renderer2, effect, untracked, Component, ChangeDetectionStrategy } from '@angular/core';
|
|
3
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
4
|
+
import { LibsUiComponentsButtonsSortComponent } from '@libs-ui/components-buttons-sort';
|
|
5
|
+
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
6
|
+
import { LibsUiConfigProjectService } from '@libs-ui/services-config-project';
|
|
7
|
+
import { viewDataNumberByLanguage, UtilsKeyCodeConstant, UtilsCache, UtilsLanguageConstants, isNil, formatNumber, removeEmoji, uuid, setCaretPosition } from '@libs-ui/utils';
|
|
8
|
+
import * as i1 from '@ngx-translate/core';
|
|
9
|
+
import { TranslateService, TranslateModule } from '@ngx-translate/core';
|
|
10
|
+
import { Subject, fromEvent } from 'rxjs';
|
|
11
|
+
import { take, tap, mergeMap, filter, takeUntil, debounceTime } from 'rxjs/operators';
|
|
12
|
+
|
|
13
|
+
const indexInputHtml = (borderColor) => `
|
|
14
|
+
<!DOCTYPE html>
|
|
15
|
+
<html>
|
|
16
|
+
<head>
|
|
17
|
+
<base href="/" />
|
|
18
|
+
</head>
|
|
19
|
+
<style type="text/css">
|
|
20
|
+
::-webkit-scrollbar {
|
|
21
|
+
width: 8px;
|
|
22
|
+
height: 8px;
|
|
23
|
+
cursor: default;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
::-webkit-scrollbar-track {
|
|
27
|
+
border-radius: 0;
|
|
28
|
+
background: #fff;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
::-webkit-scrollbar-track:hover {
|
|
33
|
+
background: rgba(78, 78, 78, 0.05);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
::-webkit-scrollbar-track:focus {
|
|
37
|
+
background: #b3b3b3;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
::-webkit-scrollbar-track:checked {
|
|
41
|
+
background: #b3b3b3;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
::-webkit-scrollbar-thumb {
|
|
46
|
+
border-radius: 0;
|
|
47
|
+
background: rgba(78, 78, 78, 0.15);
|
|
48
|
+
box-shadow: inset 1px 1px 2px 0 rgba(78, 78, 78, 0.3);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
::-webkit-scrollbar-thumb:hover {
|
|
52
|
+
background: #dadada;
|
|
53
|
+
box-shadow: inset 1px 1px 2px 0 rgba(78, 78, 78, 0.3);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
::-webkit-scrollbar-thumb:focus {
|
|
57
|
+
background: #b3b3b3;
|
|
58
|
+
box-shadow: inset 1px 1px 2px 0 rgba(78, 78, 78, 0.3);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
::-webkit-scrollbar-thumb:checked {
|
|
62
|
+
background: #b3b3b3;
|
|
63
|
+
box-shadow: inset 1px 1px 2px 0 rgba(78, 78, 78, 0.3);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
body{
|
|
67
|
+
max-width: 100vw;
|
|
68
|
+
max-height:100vh;
|
|
69
|
+
padding: 0;
|
|
70
|
+
margin: 0;
|
|
71
|
+
overflow: hidden;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
textarea{
|
|
75
|
+
max-width: 100vw;
|
|
76
|
+
max-height:100vh;
|
|
77
|
+
resize: none;
|
|
78
|
+
border: none;
|
|
79
|
+
border: ${borderColor ? ' 1px solid #e6e7ea;' : 'none'};
|
|
80
|
+
width: 100%;
|
|
81
|
+
border-radius: 4px;
|
|
82
|
+
font-size: 14px;
|
|
83
|
+
font-weight: normal;
|
|
84
|
+
font-style: normal;
|
|
85
|
+
line-height: 16px;
|
|
86
|
+
height: auto;
|
|
87
|
+
color: #4e4e4e;
|
|
88
|
+
padding: 6px 12px;
|
|
89
|
+
background-color: #fff;
|
|
90
|
+
font-size: 12px !important;
|
|
91
|
+
font-family:var(--libs-ui-font-family-name) !important;
|
|
92
|
+
overflow: hidden;
|
|
93
|
+
margin: 0;
|
|
94
|
+
resize: none;
|
|
95
|
+
}
|
|
96
|
+
${borderColor ? `textarea:focus:not(:read-only):not(:disabled) {
|
|
97
|
+
border: 1px solid ${borderColor};
|
|
98
|
+
}` : ''}
|
|
99
|
+
|
|
100
|
+
textarea::-webkit-input-placeholder {
|
|
101
|
+
color: rgba(78, 78, 78, 0.5) !important;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
textarea:-moz-placeholder {
|
|
105
|
+
/* Firefox 18- */
|
|
106
|
+
color: rgba(78, 78, 78, 0.5) !important;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
textarea::-moz-placeholder {
|
|
110
|
+
/* Firefox 19+ */
|
|
111
|
+
color: rgba(78, 78, 78, 0.5) !important;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
textarea:-ms-input-placeholder {
|
|
115
|
+
color: rgba(78, 78, 78, 0.5) !important;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
textarea:focus {
|
|
119
|
+
outline: none;
|
|
120
|
+
}
|
|
121
|
+
*, ::after, ::before {
|
|
122
|
+
box-sizing: border-box;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
</style>
|
|
126
|
+
|
|
127
|
+
<body>
|
|
128
|
+
<textarea></textarea>
|
|
129
|
+
</body>
|
|
130
|
+
</html>`;
|
|
131
|
+
|
|
132
|
+
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
133
|
+
class LibsUiComponentsInputsInputComponent {
|
|
134
|
+
/* PROPERTY */
|
|
135
|
+
disableAsc = signal(false);
|
|
136
|
+
disableDesc = signal(false);
|
|
137
|
+
htmlIframeArea = signal(undefined);
|
|
138
|
+
countDisplay = computed(this.countDisplayComputed.bind(this));
|
|
139
|
+
maxLengthDisplay = computed(() => `${viewDataNumberByLanguage(this.maxLength() || 0, false)}`);
|
|
140
|
+
paddingRightCustom = signal(0);
|
|
141
|
+
inputIframeRef = signal(undefined);
|
|
142
|
+
DEFAULT_MAX_HEIGHT_TEXT_AREA = 250;
|
|
143
|
+
charFirstIsZero = signal(false);
|
|
144
|
+
preHeightArea = signal(0);
|
|
145
|
+
iframeRef;
|
|
146
|
+
dataTextPaste = signal('');
|
|
147
|
+
onDestroy = new Subject();
|
|
148
|
+
/* INPUT */
|
|
149
|
+
tagInput = input('input', { transform: value => value ?? 'input' });
|
|
150
|
+
dataType = input('string');
|
|
151
|
+
tabInsertContentTagInput = input(false);
|
|
152
|
+
textAreaEnterNotNewLine = input(false);
|
|
153
|
+
emitEmptyInDataTypeNumber = input(false);
|
|
154
|
+
keepZeroInTypeInt = input(false);
|
|
155
|
+
autoAddZeroLessThan10InTypeInt = input(false);
|
|
156
|
+
ignoreBlockInputMaxValue = input();
|
|
157
|
+
hiddenContent = input(false); // sử dụng để set type cho input dạng text hay password
|
|
158
|
+
maxValueNumber = model();
|
|
159
|
+
minValueNumber = model();
|
|
160
|
+
fixedFloat = model();
|
|
161
|
+
acceptNegativeValue = model(false);
|
|
162
|
+
valueUpDownNumber = input();
|
|
163
|
+
classInclude = input(' w-full ', { transform: (value) => value || ' w-full ' });
|
|
164
|
+
maxLength = model();
|
|
165
|
+
readonly = input(false);
|
|
166
|
+
disable = input(false);
|
|
167
|
+
noBorder = input();
|
|
168
|
+
backgroundNone = input(false);
|
|
169
|
+
borderError = input(false);
|
|
170
|
+
useColorModeExist = input(false);
|
|
171
|
+
placeholder = input(' ', { transform: (value) => value || ' ' });
|
|
172
|
+
keepPlaceholderOnly = input(false);
|
|
173
|
+
value = model('');
|
|
174
|
+
autoRemoveEmoji = input(false);
|
|
175
|
+
defaultHeight = input(32, { transform: (value) => value || 32 });
|
|
176
|
+
minHeightTextArea = input();
|
|
177
|
+
maxHeightTextArea = input(this.DEFAULT_MAX_HEIGHT_TEXT_AREA, { transform: (value) => value || this.DEFAULT_MAX_HEIGHT_TEXT_AREA });
|
|
178
|
+
focusTimeOut = input(600, { transform: value => value ?? 600 });
|
|
179
|
+
blurTimeOut = input(32, { transform: (value) => value || 32 });
|
|
180
|
+
zIndexPopoverContent = input(10, { transform: (value) => value || 10 });
|
|
181
|
+
classContainerInput = input('w-full', { transform: (value) => value || 'w-full' });
|
|
182
|
+
showCount = input();
|
|
183
|
+
ignoreStopPropagationEvent = input();
|
|
184
|
+
resize = input('auto', { transform: (value) => value || 'auto' });
|
|
185
|
+
templateLeftBottomInput = input();
|
|
186
|
+
templateRightBottomInput = input();
|
|
187
|
+
classContainerBottomInput = input(' ', { transform: (value) => value || ' ' });
|
|
188
|
+
ignoreWidthInput100 = input();
|
|
189
|
+
iconLeftClass = input('', { transform: (value) => value || '' });
|
|
190
|
+
popoverContentIconLeft = input('', { transform: (value) => value || '' });
|
|
191
|
+
iconRightClass = input('', { transform: (value) => value || '' });
|
|
192
|
+
popoverContentIconRight = input('', { transform: (value) => value || '' });
|
|
193
|
+
resetAutoCompletePassword = input(false, { transform: value => value ?? false });
|
|
194
|
+
acceptOnlyClickIcon = input(false);
|
|
195
|
+
setIconRightColorSameColorDisableReadOnly = input(false);
|
|
196
|
+
onlyAcceptNegativeValue = input(false);
|
|
197
|
+
maxLengthNumberCount = model();
|
|
198
|
+
focusInput = input(false);
|
|
199
|
+
/* OUTPUT */
|
|
200
|
+
outHeightAreaChange = output();
|
|
201
|
+
outChange = output();
|
|
202
|
+
outFocusAndBlurEvent = output();
|
|
203
|
+
outEnterEvent = output();
|
|
204
|
+
outInputEvent = output(); // emit pure event input
|
|
205
|
+
outIconLeft = output();
|
|
206
|
+
outIconRight = output();
|
|
207
|
+
outFunctionsControl = output();
|
|
208
|
+
outFilesDrop = output();
|
|
209
|
+
outFileDrop = output();
|
|
210
|
+
outChangeValueByButtonUpDown = output();
|
|
211
|
+
/* VIEW CHILD */
|
|
212
|
+
inputRef = viewChild('inputRef');
|
|
213
|
+
textCountRef = viewChild('textCountRef');
|
|
214
|
+
elementRightRef = viewChild('elementRightRef');
|
|
215
|
+
/* INJECT */
|
|
216
|
+
renderer = inject(Renderer2);
|
|
217
|
+
configProjectService = inject(LibsUiConfigProjectService);
|
|
218
|
+
translateService = inject(TranslateService);
|
|
219
|
+
sanitizer = inject(DomSanitizer);
|
|
220
|
+
constructor() {
|
|
221
|
+
effect(() => {
|
|
222
|
+
if (this.onlyAcceptNegativeValue()) {
|
|
223
|
+
this.acceptNegativeValue.set(true);
|
|
224
|
+
}
|
|
225
|
+
if (!this.Element) {
|
|
226
|
+
return;
|
|
227
|
+
}
|
|
228
|
+
if (this.dataType() === 'string') {
|
|
229
|
+
if (this.Element.value !== this.value()) {
|
|
230
|
+
this.init();
|
|
231
|
+
}
|
|
232
|
+
return;
|
|
233
|
+
}
|
|
234
|
+
this.updateMaxLengthMinMaxValueByDataType();
|
|
235
|
+
const value = this.parseValueByDataType(this.Element.value);
|
|
236
|
+
if ((this.Element.value !== '' && value === this.value()) || (this.Element.value === '' && this.emitEmptyInDataTypeNumber() && this.value() === undefined)) {
|
|
237
|
+
return;
|
|
238
|
+
}
|
|
239
|
+
this.init();
|
|
240
|
+
}, { allowSignalWrites: true });
|
|
241
|
+
effect(() => {
|
|
242
|
+
untracked(() => this.afterViewInit());
|
|
243
|
+
});
|
|
244
|
+
}
|
|
245
|
+
ngOnInit() {
|
|
246
|
+
this.htmlIframeArea.set(this.sanitizer.bypassSecurityTrustHtml(indexInputHtml(this.noBorder() ? '' : `${this.configProjectService.colorStepContrastFromOrigin(20)?.light}`)));
|
|
247
|
+
}
|
|
248
|
+
afterViewInit() {
|
|
249
|
+
if (!this.Element) {
|
|
250
|
+
return;
|
|
251
|
+
}
|
|
252
|
+
this.outHeightAreaChange.emit({ isChange: false, height: this.Element?.scrollHeight });
|
|
253
|
+
this.outFunctionsControl.emit({
|
|
254
|
+
focus: this.focus.bind(this),
|
|
255
|
+
blur: this.blur.bind(this),
|
|
256
|
+
insertContent: this.addDataToSelectionInput.bind(this),
|
|
257
|
+
resetValue: this.resetValue.bind(this),
|
|
258
|
+
getElementValue: this.getElementValue.bind(this),
|
|
259
|
+
checkAndDisableUpDownButton: this.checkAndDisableUpDownButton.bind(this)
|
|
260
|
+
});
|
|
261
|
+
this.init();
|
|
262
|
+
this.initEvent('focus', this.ignoreStopPropagationEvent()).subscribe((e) => this.outFocusAndBlurEvent.emit({ name: 'focus', event: e }));
|
|
263
|
+
this.initEvent('blur', this.ignoreStopPropagationEvent()).subscribe((e) => this.outFocusAndBlurEvent.emit({ name: 'blur', event: e }));
|
|
264
|
+
const mouseDownEvent = this.initEvent('mousedown', this.ignoreStopPropagationEvent()).pipe(take(1));
|
|
265
|
+
const keyDownEvent = this.initEvent('keydown', this.ignoreStopPropagationEvent());
|
|
266
|
+
const inputEvent = this.initEvent('input', this.ignoreStopPropagationEvent());
|
|
267
|
+
const cutEvent = this.initEvent('cut', this.ignoreStopPropagationEvent());
|
|
268
|
+
const pasteEvent = this.initEvent('paste', this.ignoreStopPropagationEvent());
|
|
269
|
+
const keyupEvent = this.initEvent('keyup', this.ignoreStopPropagationEvent());
|
|
270
|
+
this.initEvent('click', this.ignoreStopPropagationEvent() ?? true).subscribe();
|
|
271
|
+
this.initEvent('dragover', this.ignoreStopPropagationEvent()).pipe(tap((event) => {
|
|
272
|
+
event.preventDefault();
|
|
273
|
+
event.stopPropagation();
|
|
274
|
+
event.dataTransfer.dropEffect = 'copy';
|
|
275
|
+
})).subscribe();
|
|
276
|
+
this.initEvent('drop', this.ignoreStopPropagationEvent()).subscribe(this.checkAndEmitFiles.bind(this));
|
|
277
|
+
pasteEvent.subscribe(this.checkAndEmitFiles.bind(this));
|
|
278
|
+
this.combineObservable(mouseDownEvent, pasteEvent);
|
|
279
|
+
this.combineObservable(mouseDownEvent, cutEvent);
|
|
280
|
+
keyDownEvent.pipe(take(1), tap((e) => this.checkTypeNumber(e, 'key')), mergeMap(() => inputEvent), tap((e) => this.checkTypeNumber(e, 'data'))).subscribe((e) => {
|
|
281
|
+
if (this.dataType() === 'string' && this.maxLength() && (e.inputType === 'insertCompositionText' || e.inputType === 'insertText') && e.target.value?.length > (this.maxLength() || 0)) {
|
|
282
|
+
e.target.value = e.target.value.slice(0, this.maxLength());
|
|
283
|
+
}
|
|
284
|
+
this.processEventAndEmitValue(e);
|
|
285
|
+
});
|
|
286
|
+
keyupEvent.pipe(filter((event) => event.keyCode === UtilsKeyCodeConstant.ENTER), filter((event) => !this.textAreaEnterNotNewLine() || (this.textAreaEnterNotNewLine() && !event.shiftKey))).subscribe((event) => this.outEnterEvent.emit(event));
|
|
287
|
+
if (this.dataType() === 'string' && (this.tagInput() !== 'input' || (this.tagInput() === 'input' && this.tabInsertContentTagInput()))) {
|
|
288
|
+
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) => {
|
|
289
|
+
if (this.readonly() || this.disable()) {
|
|
290
|
+
return;
|
|
291
|
+
}
|
|
292
|
+
this.insetValueToSelectionStart('\t', event);
|
|
293
|
+
})).subscribe();
|
|
294
|
+
}
|
|
295
|
+
if (this.textAreaEnterNotNewLine()) {
|
|
296
|
+
keyDownEvent.pipe(filter((event) => event.keyCode === UtilsKeyCodeConstant.ENTER && !event.shiftKey), tap((e) => e.preventDefault())).subscribe();
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
/* FUNCTIONS*/
|
|
300
|
+
updateMaxLengthMinMaxValueByDataType() {
|
|
301
|
+
if (this.dataType() === 'int' || this.dataType() === 'float') {
|
|
302
|
+
this.maxLength.update(value => {
|
|
303
|
+
return !value || value > 21 ? 21 : value;
|
|
304
|
+
});
|
|
305
|
+
this.minValueNumber.update(value => value || Number.MIN_SAFE_INTEGER);
|
|
306
|
+
this.maxValueNumber.update(value => value || Number.MAX_SAFE_INTEGER);
|
|
307
|
+
}
|
|
308
|
+
if (this.dataType() === 'bigint') {
|
|
309
|
+
this.maxLength.update(value => !value || value > 25 ? 25 : value);
|
|
310
|
+
this.fixedFloat.update(value => value ?? 4);
|
|
311
|
+
this.maxLengthNumberCount.update(value => value ?? 19);
|
|
312
|
+
}
|
|
313
|
+
}
|
|
314
|
+
async getElementValue() {
|
|
315
|
+
return this.Element?.value;
|
|
316
|
+
}
|
|
317
|
+
checkAndEmitFiles(event) {
|
|
318
|
+
const files = event.dataTransfer?.files || event.clipboardData?.files;
|
|
319
|
+
const text = (event.clipboardData || window.clipboardData)?.getData('text');
|
|
320
|
+
this.dataTextPaste.set(text);
|
|
321
|
+
if (!files || !files.length) {
|
|
322
|
+
return;
|
|
323
|
+
}
|
|
324
|
+
if (!text) {
|
|
325
|
+
event.preventDefault();
|
|
326
|
+
}
|
|
327
|
+
event.stopPropagation();
|
|
328
|
+
const fileList = [];
|
|
329
|
+
for (const file of files) {
|
|
330
|
+
if (Object.prototype.toString.call(file) === '[object File]') {
|
|
331
|
+
this.outFileDrop.emit(file);
|
|
332
|
+
fileList.push(file);
|
|
333
|
+
}
|
|
334
|
+
}
|
|
335
|
+
this.outFilesDrop.emit(fileList);
|
|
336
|
+
}
|
|
337
|
+
insetValueToSelectionStart(text, event) {
|
|
338
|
+
event.preventDefault();
|
|
339
|
+
event.stopPropagation();
|
|
340
|
+
this.Element.setRangeText(text, this.Element.selectionStart, this.Element.selectionStart, 'end');
|
|
341
|
+
this.processEventAndEmitValue(event);
|
|
342
|
+
}
|
|
343
|
+
get Element() {
|
|
344
|
+
return this.inputIframeRef()?.nativeElement || this.inputRef()?.nativeElement;
|
|
345
|
+
}
|
|
346
|
+
handlerChangeValue(data) {
|
|
347
|
+
data.reset();
|
|
348
|
+
if (this.disable() || this.readonly()) {
|
|
349
|
+
return;
|
|
350
|
+
}
|
|
351
|
+
const operator = data.mode === 'asc' ? 1 : -1;
|
|
352
|
+
let value = +this.value() || 0;
|
|
353
|
+
const separator = UtilsCache.getLang() === UtilsLanguageConstants.VI ? '.' : ',';
|
|
354
|
+
const splitValue = (this.value() || this.minValueNumber() || 0).toString().split(separator);
|
|
355
|
+
const dataBehindSeparator = splitValue?.[1];
|
|
356
|
+
if (this.dataType() === 'bigint') {
|
|
357
|
+
value = +(splitValue?.[0] || 0);
|
|
358
|
+
}
|
|
359
|
+
value = value + (this.valueUpDownNumber() ?? 1) * operator;
|
|
360
|
+
if (!this.acceptNegativeValue() && value < 0) {
|
|
361
|
+
value = 0;
|
|
362
|
+
}
|
|
363
|
+
const dataEmit = this.dataType() === 'bigint' ? `${value}${dataBehindSeparator ? separator : ''}${dataBehindSeparator}` : value;
|
|
364
|
+
this.value.set(dataEmit);
|
|
365
|
+
this.outChange.emit(dataEmit);
|
|
366
|
+
this.outChangeValueByButtonUpDown.emit();
|
|
367
|
+
this.checkAndDisableUpDownButton(value);
|
|
368
|
+
}
|
|
369
|
+
handlerEventIconLeft(e, eventName) {
|
|
370
|
+
e.stopPropagation();
|
|
371
|
+
if ((this.disable() || this.readonly()) && !this.acceptOnlyClickIcon()) {
|
|
372
|
+
return;
|
|
373
|
+
}
|
|
374
|
+
this.outIconLeft.emit(eventName);
|
|
375
|
+
}
|
|
376
|
+
handlerEventIconRight(e, eventName) {
|
|
377
|
+
e.stopPropagation();
|
|
378
|
+
if ((this.disable() || this.readonly()) && !this.acceptOnlyClickIcon()) {
|
|
379
|
+
return;
|
|
380
|
+
}
|
|
381
|
+
this.outIconRight.emit(eventName);
|
|
382
|
+
}
|
|
383
|
+
async checkAndDisableUpDownButton(value) {
|
|
384
|
+
if (this.dataType() !== 'int' && this.dataType() !== 'float' && this.dataType() !== 'bigint') {
|
|
385
|
+
return;
|
|
386
|
+
}
|
|
387
|
+
this.disableAsc.set(false);
|
|
388
|
+
this.disableDesc.set(false);
|
|
389
|
+
this.minValueNumber.update(value => value ?? Number.MIN_SAFE_INTEGER);
|
|
390
|
+
this.maxValueNumber.update(value => value ?? Number.MAX_SAFE_INTEGER);
|
|
391
|
+
value = value ?? 0;
|
|
392
|
+
if (!isNil(this.maxValueNumber()) && value >= (this.maxValueNumber() ?? Number.MAX_SAFE_INTEGER)) {
|
|
393
|
+
this.disableAsc.set(true);
|
|
394
|
+
}
|
|
395
|
+
if (!isNil(this.minValueNumber()) && value <= (this.minValueNumber() || 0)) {
|
|
396
|
+
this.disableDesc.set(true);
|
|
397
|
+
}
|
|
398
|
+
}
|
|
399
|
+
initEvent(eventName, ignoreStopPropagationEvent) {
|
|
400
|
+
return fromEvent(this.Element, eventName).pipe(tap((e) => {
|
|
401
|
+
if (!ignoreStopPropagationEvent) {
|
|
402
|
+
e.stopPropagation();
|
|
403
|
+
}
|
|
404
|
+
this.outInputEvent.emit(e);
|
|
405
|
+
}), takeUntil(this.onDestroy));
|
|
406
|
+
}
|
|
407
|
+
convertValue(value) {
|
|
408
|
+
if (value && this.dataType() === 'bigint') {
|
|
409
|
+
const separator = (UtilsCache.getLang() === UtilsLanguageConstants.VI) ? '.' : ',';
|
|
410
|
+
let [int, decimal] = value.split(separator);
|
|
411
|
+
const decimalSplit = decimal ? decimal.split('') : [];
|
|
412
|
+
const decimalEveryZero = decimalSplit.every(item => item === '0');
|
|
413
|
+
if (int === '-0' && (!decimal || decimalEveryZero)) {
|
|
414
|
+
int = '0';
|
|
415
|
+
}
|
|
416
|
+
if (!decimal || decimalEveryZero) {
|
|
417
|
+
decimal = '0';
|
|
418
|
+
}
|
|
419
|
+
if (decimalSplit.some(item => item !== '0')) {
|
|
420
|
+
const decimalReverse = decimalSplit.reverse().join('');
|
|
421
|
+
decimal = decimalReverse.replace(/(^[0]+)/, '').split('').reverse().join('');
|
|
422
|
+
}
|
|
423
|
+
return `${int}${separator}${decimal}`;
|
|
424
|
+
}
|
|
425
|
+
return value;
|
|
426
|
+
}
|
|
427
|
+
init() {
|
|
428
|
+
if (!this.maxLength()) {
|
|
429
|
+
this.updateMaxLengthMinMaxValueByDataType();
|
|
430
|
+
}
|
|
431
|
+
if (!this.Element) {
|
|
432
|
+
return;
|
|
433
|
+
}
|
|
434
|
+
let elementValue = this.convertValue(`${this.value() ?? ''}`);
|
|
435
|
+
if (this.dataType() !== 'string') {
|
|
436
|
+
elementValue = elementValue.replace((new RegExp(`[^0-9.,${this.acceptNegativeValue() ? '-' : ''}]`, 'g')), '');
|
|
437
|
+
if (UtilsCache.getLang() === UtilsLanguageConstants.EN) {
|
|
438
|
+
elementValue = elementValue.replace(/[,]/, '');
|
|
439
|
+
}
|
|
440
|
+
}
|
|
441
|
+
this.Element.value = elementValue;
|
|
442
|
+
const eventFake = { preventDefault: () => { return; }, target: this.Element, data: elementValue, fakeEvent: true };
|
|
443
|
+
this.checkTypeNumber(eventFake, 'data');
|
|
444
|
+
this.processEventAndEmitValue(eventFake);
|
|
445
|
+
}
|
|
446
|
+
processEventAndEmitValue(e) {
|
|
447
|
+
const value = this.parseValueByDataType(e.target.value);
|
|
448
|
+
if (this.dataType() !== 'string' && !this.ignoreBlockInputMaxValue() && !isNil(this.maxValueNumber()) && value > (this.maxValueNumber() || 0) && this.value() < value) {
|
|
449
|
+
const valueDisplay = viewDataNumberByLanguage(`${this.value()}`.replace(/[.]/g, ','), this.acceptNegativeValue(), (this.fixedFloat() ?? 14));
|
|
450
|
+
e.target.value = `${this.getCheckZero(+valueDisplay, e.target.value)}${valueDisplay}`;
|
|
451
|
+
return this.processEventAndEmitValue(e);
|
|
452
|
+
}
|
|
453
|
+
if (this.dataType() !== 'string' && isNil(value)) {
|
|
454
|
+
e.target.value = 0;
|
|
455
|
+
return this.processEventAndEmitValue(e);
|
|
456
|
+
}
|
|
457
|
+
if (e.fakeEvent && (`${this.value() ?? ''}` === `${value}` || (this.emitEmptyInDataTypeNumber() && e.target.value.trim() === ''))) {
|
|
458
|
+
this.checkAndDisableUpDownButton(this.dataType() === 'bigint' ? value : +value);
|
|
459
|
+
setTimeout(() => {
|
|
460
|
+
this.calculatorHeightTextArea(e);
|
|
461
|
+
}, 250);
|
|
462
|
+
return;
|
|
463
|
+
}
|
|
464
|
+
this.value.set(value);
|
|
465
|
+
if (this.emitEmptyInDataTypeNumber() && e.target.value.trim() === '') {
|
|
466
|
+
const dataEmit = this.dataType() === 'string' ? '' : undefined;
|
|
467
|
+
this.value.set(dataEmit);
|
|
468
|
+
}
|
|
469
|
+
this.outChange.emit(this.value());
|
|
470
|
+
this.checkAndDisableUpDownButton(this.dataType() === 'bigint' ? value : +value);
|
|
471
|
+
this.calculatorHeightTextArea(e);
|
|
472
|
+
}
|
|
473
|
+
checkMaxLengthNumberAndSetValue(valueDisplay, e) {
|
|
474
|
+
if (isNil(this.value()) || (+this.value() > 0 && this.parseValueByDataType(valueDisplay) < this.value()) || (+this.value() < 0 && this.parseValueByDataType(valueDisplay) > this.value())) {
|
|
475
|
+
return false;
|
|
476
|
+
}
|
|
477
|
+
const valueCompare = formatNumber(valueDisplay).toString();
|
|
478
|
+
const numbers = valueCompare.split('.');
|
|
479
|
+
let lengthValueCompare = 0;
|
|
480
|
+
let maxLength = (this.acceptNegativeValue() && typeof +this.value() === 'number' && +this.value() < 0) ? (this.maxLength() || 21) + 1 : (this.maxLength() || 21);
|
|
481
|
+
if (this.dataType() === 'float') {
|
|
482
|
+
maxLength--;
|
|
483
|
+
}
|
|
484
|
+
if (numbers && numbers[0]) {
|
|
485
|
+
lengthValueCompare = viewDataNumberByLanguage(`${numbers[0]}`.replace(/[.]/g, ','), this.acceptNegativeValue(), (this.fixedFloat() ?? 14)).length;
|
|
486
|
+
}
|
|
487
|
+
if (numbers && numbers[1]) {
|
|
488
|
+
lengthValueCompare += 1 + numbers[1].length;
|
|
489
|
+
}
|
|
490
|
+
if (maxLength && lengthValueCompare >= maxLength) {
|
|
491
|
+
const valueDisplay = viewDataNumberByLanguage((lengthValueCompare === maxLength ? valueCompare : `${this.value()}`).replace(/[.]/g, ','), this.acceptNegativeValue(), (this.fixedFloat() ?? 14));
|
|
492
|
+
e.target.value = `${this.getCheckZero(+valueDisplay, e.target.value)}${valueDisplay}`;
|
|
493
|
+
return true;
|
|
494
|
+
}
|
|
495
|
+
return false;
|
|
496
|
+
}
|
|
497
|
+
checkTypeNumber(e, fieldName) {
|
|
498
|
+
const currentLang = UtilsCache.getLang();
|
|
499
|
+
const separator = (currentLang === UtilsLanguageConstants.VI) ? '.' : ',';
|
|
500
|
+
const separatorRevert = (currentLang === UtilsLanguageConstants.VI) ? ',' : '.';
|
|
501
|
+
let valueTarget = e.target.value;
|
|
502
|
+
const selectionStart = e.target.selectionStart - 1;
|
|
503
|
+
const { data, keyCode } = e;
|
|
504
|
+
this.charFirstIsZero.set(false);
|
|
505
|
+
if (valueTarget.charAt(0) === '0') {
|
|
506
|
+
this.charFirstIsZero.set(true);
|
|
507
|
+
}
|
|
508
|
+
if (this.dataType() === 'string') {
|
|
509
|
+
if (this.autoRemoveEmoji()) {
|
|
510
|
+
e.target.value = removeEmoji(valueTarget);
|
|
511
|
+
}
|
|
512
|
+
return;
|
|
513
|
+
}
|
|
514
|
+
if (/[0-9]/g.test(data) && valueTarget.charAt(selectionStart + 1) === '-') {
|
|
515
|
+
valueTarget = valueTarget.replaceAt(0, '');
|
|
516
|
+
}
|
|
517
|
+
let strRegex = `[^0-9.,${this.acceptNegativeValue() ? '-' : ''}]`;
|
|
518
|
+
if ((new RegExp(strRegex, 'gi')).test(e[fieldName]) && keyCode !== UtilsKeyCodeConstant.BACKSPACE) {
|
|
519
|
+
e.preventDefault();
|
|
520
|
+
e.target.value = valueTarget = e.target.value.replace((new RegExp(strRegex, 'gi')), '');
|
|
521
|
+
}
|
|
522
|
+
if (!e.fakeEvent) {
|
|
523
|
+
switch (data) {
|
|
524
|
+
case separator:
|
|
525
|
+
valueTarget = valueTarget.replace((new RegExp(`[${separator}]`, 'gi')), '');
|
|
526
|
+
break;
|
|
527
|
+
case separatorRevert:
|
|
528
|
+
{
|
|
529
|
+
if (currentLang === UtilsLanguageConstants.VI && this.dataType() === 'int') {
|
|
530
|
+
e.target.value = valueTarget.replace((new RegExp(`[${separatorRevert}]`, 'gi')), '');
|
|
531
|
+
return;
|
|
532
|
+
}
|
|
533
|
+
if (valueTarget === separatorRevert) {
|
|
534
|
+
e.target.value = '';
|
|
535
|
+
return;
|
|
536
|
+
}
|
|
537
|
+
if (valueTarget && valueTarget.length === 2 && valueTarget.charAt(0) === '-' && data && !/[0-9]/g.test(data)) {
|
|
538
|
+
e.target.value = '-';
|
|
539
|
+
return;
|
|
540
|
+
}
|
|
541
|
+
const occurrencesByCharacter = valueTarget.occurrencesByCharacter(separatorRevert);
|
|
542
|
+
if (occurrencesByCharacter > 1) {
|
|
543
|
+
valueTarget = valueTarget.replaceAt(e.target.selectionStart - 1, '');
|
|
544
|
+
break;
|
|
545
|
+
}
|
|
546
|
+
let maxLength = this.dataType() === 'float' ? (this.maxLength() || 21) - 1 : (this.maxLength() || 21);
|
|
547
|
+
if (valueTarget.indexOf('-') >= 0) {
|
|
548
|
+
maxLength++;
|
|
549
|
+
}
|
|
550
|
+
if (occurrencesByCharacter === 1 && valueTarget.length === maxLength && valueTarget.indexOf(separatorRevert) === valueTarget.length - 1) {
|
|
551
|
+
valueTarget = valueTarget.replaceAt(e.target.selectionStart - 1, '');
|
|
552
|
+
break;
|
|
553
|
+
}
|
|
554
|
+
if (this.onlyAcceptNegativeValue() && valueTarget === `0${separatorRevert}`) {
|
|
555
|
+
e.target.value = '0';
|
|
556
|
+
}
|
|
557
|
+
return;
|
|
558
|
+
}
|
|
559
|
+
}
|
|
560
|
+
valueTarget = formatNumber(valueTarget);
|
|
561
|
+
}
|
|
562
|
+
const indexesOfDash = valueTarget.indexesOfCharacter?.('-') || [];
|
|
563
|
+
if (indexesOfDash.length) {
|
|
564
|
+
const [firstIndex, secondIndex] = indexesOfDash;
|
|
565
|
+
const indexReplace = firstIndex || secondIndex; // firstIndex=0 thì ko xóa
|
|
566
|
+
if (indexReplace) {
|
|
567
|
+
valueTarget = valueTarget.replaceAll(indexReplace, '-', '');
|
|
568
|
+
}
|
|
569
|
+
}
|
|
570
|
+
if (this.acceptNegativeValue() && valueTarget === '-') {
|
|
571
|
+
e.target.value = valueTarget;
|
|
572
|
+
return;
|
|
573
|
+
}
|
|
574
|
+
switch (this.dataType()) {
|
|
575
|
+
case 'int':
|
|
576
|
+
{
|
|
577
|
+
strRegex = `[^0-9${this.acceptNegativeValue() ? '-' : ''}]`;
|
|
578
|
+
if (!e.fakeEvent) {
|
|
579
|
+
valueTarget = valueTarget.replace(new RegExp(strRegex, 'gi'), '');
|
|
580
|
+
const maxTotalNumber = valueTarget.includes('-') ? 17 : 16;
|
|
581
|
+
if (valueTarget.length > maxTotalNumber) {
|
|
582
|
+
valueTarget = valueTarget.slice(0, maxTotalNumber);
|
|
583
|
+
}
|
|
584
|
+
if (Math.abs(parseInt(valueTarget)) > (this.maxValueNumber() || 9007199254740991)) {
|
|
585
|
+
valueTarget = valueTarget.slice(0, maxTotalNumber - 1);
|
|
586
|
+
}
|
|
587
|
+
if (this.onlyAcceptNegativeValue() && valueTarget[0] !== '-' && valueTarget[0] !== '0') {
|
|
588
|
+
valueTarget = '';
|
|
589
|
+
}
|
|
590
|
+
if (valueTarget && /(^-)?(^[0]+)/.test(valueTarget)) {
|
|
591
|
+
const id = uuid();
|
|
592
|
+
valueTarget = valueTarget.replace(/(^-)?(^[0]+)/, `$1${id}`).replace(id, '0');
|
|
593
|
+
}
|
|
594
|
+
if (valueTarget === '-0') {
|
|
595
|
+
valueTarget = '0';
|
|
596
|
+
}
|
|
597
|
+
if (valueTarget && /(^[0])([1-9])([0-9]+)?/.test(valueTarget)) {
|
|
598
|
+
valueTarget = valueTarget.replace(/(^[0])([1-9])([0-9]+)?/, '$2$3');
|
|
599
|
+
}
|
|
600
|
+
const valueDisplay = viewDataNumberByLanguage(valueTarget, (this.acceptNegativeValue() || false), 0);
|
|
601
|
+
if (this.checkMaxLengthNumberAndSetValue(valueDisplay, e)) {
|
|
602
|
+
break;
|
|
603
|
+
}
|
|
604
|
+
e.target.value = `${this.getCheckZero(+valueDisplay, e.target.value)}${valueDisplay}`;
|
|
605
|
+
break;
|
|
606
|
+
}
|
|
607
|
+
const indexOfDot = valueTarget.indexOf('.');
|
|
608
|
+
const indexOfComma = valueTarget.indexOf(',');
|
|
609
|
+
let indexChoose = indexOfDot;
|
|
610
|
+
if (indexOfDot < 0 || indexOfDot > indexOfComma) {
|
|
611
|
+
indexChoose = indexOfComma;
|
|
612
|
+
}
|
|
613
|
+
if (indexChoose >= 0) {
|
|
614
|
+
valueTarget = valueTarget.substring(0, indexChoose);
|
|
615
|
+
}
|
|
616
|
+
const valueDisplay = viewDataNumberByLanguage(valueTarget, (this.acceptNegativeValue() || false), 0);
|
|
617
|
+
if (this.checkMaxLengthNumberAndSetValue(valueDisplay, e)) {
|
|
618
|
+
break;
|
|
619
|
+
}
|
|
620
|
+
e.target.value = `${this.getCheckZero(+valueDisplay, e.target.value)}${valueDisplay}`;
|
|
621
|
+
break;
|
|
622
|
+
}
|
|
623
|
+
case 'float':
|
|
624
|
+
// eslint-disable-next-line no-fallthrough
|
|
625
|
+
case 'bigint':
|
|
626
|
+
this.getValueFormat(e, valueTarget, separator, separatorRevert, currentLang);
|
|
627
|
+
break;
|
|
628
|
+
}
|
|
629
|
+
if (valueTarget === 'NaN') {
|
|
630
|
+
e.target.value = '';
|
|
631
|
+
}
|
|
632
|
+
if (e.fakeEvent || data === undefined) {
|
|
633
|
+
return;
|
|
634
|
+
}
|
|
635
|
+
this.setCaretPosition(e, selectionStart + 1);
|
|
636
|
+
}
|
|
637
|
+
getValueFormat(e, valueTarget, separator, separatorRevert, currentLang) {
|
|
638
|
+
let strRegex = `[^0-9${separator}${currentLang === UtilsLanguageConstants.EN ? '.' : ''}${this.acceptNegativeValue() ? '-' : ''}]`;
|
|
639
|
+
if (!e.fakeEvent) {
|
|
640
|
+
valueTarget = valueTarget.replace(new RegExp(strRegex, 'gi'), '');
|
|
641
|
+
}
|
|
642
|
+
const indexesOfSeparator = valueTarget.indexesOfCharacter(separator);
|
|
643
|
+
const [firstIndex, secondIndex] = indexesOfSeparator;
|
|
644
|
+
if (secondIndex) {
|
|
645
|
+
valueTarget = e.target.value.replaceAll(secondIndex, separator, '');
|
|
646
|
+
}
|
|
647
|
+
if (firstIndex && valueTarget.substring(firstIndex + 1).length >= (this.fixedFloat() ?? 14)) {
|
|
648
|
+
valueTarget = valueTarget.substring(0, firstIndex + (this.fixedFloat() ?? 14) + 1);
|
|
649
|
+
}
|
|
650
|
+
strRegex = `[${separator}]`;
|
|
651
|
+
valueTarget = valueTarget.replace(new RegExp(strRegex, 'g'), separatorRevert);
|
|
652
|
+
let valueFormat = '';
|
|
653
|
+
let [fontSeparatorNumber, behindSeparatorNumber] = valueTarget.split(separatorRevert);
|
|
654
|
+
let maxFontTotalNumber = (fontSeparatorNumber && fontSeparatorNumber.includes('-')) ? 16 : 15;
|
|
655
|
+
if (this.dataType() === 'bigint') {
|
|
656
|
+
maxFontTotalNumber = (this.maxLengthNumberCount() ?? 19) - (this.fixedFloat() ?? 4) + (fontSeparatorNumber.includes('-') ? 1 : 0);
|
|
657
|
+
}
|
|
658
|
+
const fontOverMaxTotalNumber = fontSeparatorNumber && fontSeparatorNumber.length >= maxFontTotalNumber;
|
|
659
|
+
if (fontOverMaxTotalNumber) {
|
|
660
|
+
fontSeparatorNumber = fontSeparatorNumber.slice(0, maxFontTotalNumber);
|
|
661
|
+
if (this.dataType() === 'float') {
|
|
662
|
+
behindSeparatorNumber = '';
|
|
663
|
+
}
|
|
664
|
+
}
|
|
665
|
+
switch (this.dataType()) {
|
|
666
|
+
case 'float':
|
|
667
|
+
if (!fontOverMaxTotalNumber && behindSeparatorNumber && behindSeparatorNumber.length) {
|
|
668
|
+
behindSeparatorNumber = behindSeparatorNumber.slice(0, maxFontTotalNumber - fontSeparatorNumber.length);
|
|
669
|
+
}
|
|
670
|
+
behindSeparatorNumber = `${behindSeparatorNumber ?? ''}`;
|
|
671
|
+
break;
|
|
672
|
+
case 'bigint':
|
|
673
|
+
if (behindSeparatorNumber && behindSeparatorNumber.length && behindSeparatorNumber.length > (this.fixedFloat() ?? 4)) {
|
|
674
|
+
behindSeparatorNumber = behindSeparatorNumber.slice(0, (this.fixedFloat() ?? 4));
|
|
675
|
+
}
|
|
676
|
+
break;
|
|
677
|
+
}
|
|
678
|
+
const indexOfSeparatorRevert = valueTarget.indexOf(separatorRevert);
|
|
679
|
+
if (this.onlyAcceptNegativeValue() && fontSeparatorNumber[0] !== '-' && fontSeparatorNumber[0] !== '0') {
|
|
680
|
+
fontSeparatorNumber = '';
|
|
681
|
+
}
|
|
682
|
+
if (this.onlyAcceptNegativeValue() && indexOfSeparatorRevert >= 0 && fontSeparatorNumber[0] !== '-') {
|
|
683
|
+
fontSeparatorNumber = '0';
|
|
684
|
+
behindSeparatorNumber = this.dataType() === 'bigint' ? '0' : '';
|
|
685
|
+
}
|
|
686
|
+
if (fontSeparatorNumber && /(^-)([0]+)/.test(fontSeparatorNumber)) {
|
|
687
|
+
const id = uuid();
|
|
688
|
+
fontSeparatorNumber = fontSeparatorNumber.replace(/(^-)([0]+)/, `$1${id}`).replace(id, '0');
|
|
689
|
+
}
|
|
690
|
+
if (fontSeparatorNumber && /(^[0]+)/.test(fontSeparatorNumber)) {
|
|
691
|
+
fontSeparatorNumber = fontSeparatorNumber.replace(/(^[0]+)/, '0');
|
|
692
|
+
}
|
|
693
|
+
if (/(^-)([0]+)([1-9])([0-9.]+)?/.test(fontSeparatorNumber)) {
|
|
694
|
+
fontSeparatorNumber = fontSeparatorNumber.replace(/(^-)([0]+)([1-9])([0-9.]+)?/, '$1$3$4');
|
|
695
|
+
}
|
|
696
|
+
if (/(^[0]+)([1-9])([0-9.]+)?/.test(fontSeparatorNumber)) {
|
|
697
|
+
fontSeparatorNumber = fontSeparatorNumber.replace(/(^[0]+)([1-9])([0-9.]+)?/, '$2$3');
|
|
698
|
+
}
|
|
699
|
+
switch (this.dataType()) {
|
|
700
|
+
case 'float':
|
|
701
|
+
if (/(^[0]{6})/.test(behindSeparatorNumber)) {
|
|
702
|
+
behindSeparatorNumber = behindSeparatorNumber.replace(/(^[0]{6})/, '00000');
|
|
703
|
+
}
|
|
704
|
+
break;
|
|
705
|
+
case 'bigint':
|
|
706
|
+
if (/(^[0]{4})/.test(behindSeparatorNumber)) {
|
|
707
|
+
behindSeparatorNumber = behindSeparatorNumber.replace(/(^[0]{4})/, '0000');
|
|
708
|
+
}
|
|
709
|
+
break;
|
|
710
|
+
}
|
|
711
|
+
if (fontSeparatorNumber) {
|
|
712
|
+
fontSeparatorNumber = viewDataNumberByLanguage(fontSeparatorNumber, this.acceptNegativeValue(), (this.fixedFloat() ?? (this.dataType() === 'bigint' ? 4 : 14)));
|
|
713
|
+
}
|
|
714
|
+
const hasSeparatorRevert = (this.dataType() === 'bigint' ? true : !fontOverMaxTotalNumber) && indexOfSeparatorRevert >= 0;
|
|
715
|
+
valueFormat = `${fontSeparatorNumber ?? ''}${hasSeparatorRevert ? separatorRevert : ''}${behindSeparatorNumber ?? ''}`;
|
|
716
|
+
if (valueFormat && this.onlyAcceptNegativeValue() && valueFormat[0] !== '-' && valueFormat[0] !== '0') {
|
|
717
|
+
valueFormat = '0';
|
|
718
|
+
}
|
|
719
|
+
if (this.checkMaxLengthNumberAndSetValue(valueFormat, e)) {
|
|
720
|
+
valueTarget = e.target.value;
|
|
721
|
+
return;
|
|
722
|
+
}
|
|
723
|
+
valueTarget = e.target.value = valueFormat;
|
|
724
|
+
}
|
|
725
|
+
getCheckZero(value, targetCurrent) {
|
|
726
|
+
let zero = '';
|
|
727
|
+
if (this.dataType() !== 'int') {
|
|
728
|
+
return zero;
|
|
729
|
+
}
|
|
730
|
+
if (this.charFirstIsZero() && this.keepZeroInTypeInt() && value !== 0) {
|
|
731
|
+
zero = '0';
|
|
732
|
+
}
|
|
733
|
+
if (this.charFirstIsZero() && this.autoAddZeroLessThan10InTypeInt() && ((value > 0 && value < 10 && !/(^0)+/.test(`${targetCurrent}`)) || (targetCurrent && targetCurrent.match(/^[0]{2,}$/)?.length && value === 0))) {
|
|
734
|
+
zero = '0';
|
|
735
|
+
}
|
|
736
|
+
return zero;
|
|
737
|
+
}
|
|
738
|
+
setCaretPosition(e, selectionStart) {
|
|
739
|
+
const { keyCode, inputType } = e;
|
|
740
|
+
if (keyCode === UtilsKeyCodeConstant.UP_ARROW || keyCode === UtilsKeyCodeConstant.DOWN_ARROW || keyCode === UtilsKeyCodeConstant.LEFT_ARROW || keyCode === UtilsKeyCodeConstant.RIGHT_ARROW) {
|
|
741
|
+
return;
|
|
742
|
+
}
|
|
743
|
+
const valueTarget = e.target.value.replace('-', '');
|
|
744
|
+
let value = UtilsCache.getLang() === UtilsLanguageConstants.VI ? `${this.value() || 0}`.replace('.', ',') : `${this.value() || 0}`;
|
|
745
|
+
value = viewDataNumberByLanguage(value, this.acceptNegativeValue(), (this.fixedFloat() ?? 14));
|
|
746
|
+
value = `${value}`.replace('-', '');
|
|
747
|
+
if (value === valueTarget && value !== '0' && value !== '-') {
|
|
748
|
+
setCaretPosition(this.Element, selectionStart);
|
|
749
|
+
return;
|
|
750
|
+
}
|
|
751
|
+
let factor = 0;
|
|
752
|
+
const distance = valueTarget.length - value.length;
|
|
753
|
+
if (distance < -1) {
|
|
754
|
+
factor = -1;
|
|
755
|
+
}
|
|
756
|
+
if (distance > 1) {
|
|
757
|
+
factor = 1;
|
|
758
|
+
}
|
|
759
|
+
selectionStart += factor;
|
|
760
|
+
if (inputType === 'insertFromPaste' && this.dataTextPaste()) {
|
|
761
|
+
const dataTextDisplay = `${viewDataNumberByLanguage(this.dataTextPaste(), this.acceptNegativeValue(), (this.fixedFloat() ?? 14))}`;
|
|
762
|
+
const indexes = e.target.value.indexesByString(dataTextDisplay);
|
|
763
|
+
selectionStart -= factor;
|
|
764
|
+
if (indexes.some(index => index === selectionStart) || !indexes.length) {
|
|
765
|
+
return setCaretPosition(this.Element, selectionStart);
|
|
766
|
+
}
|
|
767
|
+
let newSelectionStart = indexes[0];
|
|
768
|
+
for (const index of indexes) {
|
|
769
|
+
let replaceValue = formatNumber(`${valueTarget.substring(0, index)}${valueTarget.substring(index + dataTextDisplay.length + 1, valueTarget.length)}`);
|
|
770
|
+
replaceValue = viewDataNumberByLanguage(replaceValue, this.acceptNegativeValue(), (this.fixedFloat() ?? 14));
|
|
771
|
+
if (value === replaceValue) {
|
|
772
|
+
newSelectionStart = index;
|
|
773
|
+
break;
|
|
774
|
+
}
|
|
775
|
+
}
|
|
776
|
+
if (newSelectionStart >= 0) {
|
|
777
|
+
selectionStart = newSelectionStart + dataTextDisplay.length + 1;
|
|
778
|
+
return setCaretPosition(this.Element, selectionStart);
|
|
779
|
+
}
|
|
780
|
+
}
|
|
781
|
+
setCaretPosition(this.Element, selectionStart);
|
|
782
|
+
}
|
|
783
|
+
parseValueByDataType(value) {
|
|
784
|
+
switch (this.dataType()) {
|
|
785
|
+
case 'string':
|
|
786
|
+
return value;
|
|
787
|
+
case 'int':
|
|
788
|
+
if (this.acceptNegativeValue() && (value === '-' || value === ',' || value === '.')) {
|
|
789
|
+
return 0;
|
|
790
|
+
}
|
|
791
|
+
return +(formatNumber(value));
|
|
792
|
+
case 'float':
|
|
793
|
+
if (this.acceptNegativeValue() && (value === '-' || value === ',' || value === '.')) {
|
|
794
|
+
return 0;
|
|
795
|
+
}
|
|
796
|
+
return parseFloat((+formatNumber(value)).toFixed(this.fixedFloat() ?? 14));
|
|
797
|
+
case 'bigint':
|
|
798
|
+
if (this.acceptNegativeValue() && (value === '-' || value === ',' || value === '.')) {
|
|
799
|
+
return '0';
|
|
800
|
+
}
|
|
801
|
+
return formatNumber(value);
|
|
802
|
+
}
|
|
803
|
+
}
|
|
804
|
+
calculatorHeightTextArea(e) {
|
|
805
|
+
if (this.tagInput() === 'input') {
|
|
806
|
+
return;
|
|
807
|
+
}
|
|
808
|
+
const target = e.target;
|
|
809
|
+
target.style.overflow = 'hidden';
|
|
810
|
+
target.style.height = `${this.defaultHeight()}px`;
|
|
811
|
+
const { scrollHeight } = target;
|
|
812
|
+
const height = scrollHeight + 2; // border top + bottom = 2
|
|
813
|
+
if (!this.preHeightArea() && this.preHeightArea() !== height) {
|
|
814
|
+
this.outHeightAreaChange.emit({ isChange: true, height: height });
|
|
815
|
+
}
|
|
816
|
+
if (height > (this.maxHeightTextArea() ?? 32)) {
|
|
817
|
+
target.style.overflow = 'auto';
|
|
818
|
+
}
|
|
819
|
+
if (this.iframeRef) {
|
|
820
|
+
this.iframeRef.style.height = `${height}px`;
|
|
821
|
+
}
|
|
822
|
+
target.style.height = `${height}px`;
|
|
823
|
+
this.preHeightArea.set(height);
|
|
824
|
+
}
|
|
825
|
+
combineObservable(mouseDownEvent, observableMerge) {
|
|
826
|
+
mouseDownEvent.pipe(mergeMap(() => observableMerge), debounceTime(0), tap((e) => this.checkTypeNumber(e, 'key'))).subscribe((e) => this.processEventAndEmitValue(e));
|
|
827
|
+
}
|
|
828
|
+
async focus() {
|
|
829
|
+
setTimeout(() => {
|
|
830
|
+
this.Element?.focus();
|
|
831
|
+
}, this.focusTimeOut());
|
|
832
|
+
}
|
|
833
|
+
async blur() {
|
|
834
|
+
setTimeout(() => {
|
|
835
|
+
this.Element?.blur();
|
|
836
|
+
}, this.blurTimeOut());
|
|
837
|
+
}
|
|
838
|
+
async addDataToSelectionInput(data) {
|
|
839
|
+
const target = this.Element;
|
|
840
|
+
const selectionStart = target.selectionStart;
|
|
841
|
+
const value = this.Element.value;
|
|
842
|
+
const beforeValue = value.substring(0, selectionStart);
|
|
843
|
+
const afterValue = value.substring(selectionStart);
|
|
844
|
+
this.Element.value = `${beforeValue}${data}${afterValue}`;
|
|
845
|
+
setCaretPosition(this.Element, selectionStart + data.toString().length);
|
|
846
|
+
const eventFake = { preventDefault: () => { return; }, target: this.Element, data: '', fakeEvent: true };
|
|
847
|
+
this.processEventAndEmitValue(eventFake);
|
|
848
|
+
}
|
|
849
|
+
handlerOnLoad(e, element) {
|
|
850
|
+
e.stopPropagation();
|
|
851
|
+
this.iframeRef = element;
|
|
852
|
+
const iframe = element.contentWindow || element.contentDocument;
|
|
853
|
+
this.configProjectService.setupFontFamily(iframe.document);
|
|
854
|
+
this.inputIframeRef.set({ nativeElement: iframe.document.getElementsByTagName('TEXTAREA')[0] });
|
|
855
|
+
if (this.Element) {
|
|
856
|
+
this.renderer.setAttribute(this.Element, 'placeholder', this.translateService.instant(this.placeholder()));
|
|
857
|
+
if (this.disable()) {
|
|
858
|
+
this.renderer.setAttribute(this.Element, 'disabled', 'true');
|
|
859
|
+
}
|
|
860
|
+
this.afterViewInit();
|
|
861
|
+
}
|
|
862
|
+
}
|
|
863
|
+
async resetValue() {
|
|
864
|
+
this.Element.value = '';
|
|
865
|
+
}
|
|
866
|
+
countDisplayComputed() {
|
|
867
|
+
if (!this.showCount() || this.dataType() !== 'string' || typeof this.value() !== 'string') {
|
|
868
|
+
return '0';
|
|
869
|
+
}
|
|
870
|
+
setTimeout(() => {
|
|
871
|
+
this.paddingRightCustom.set((this.elementRightRef()?.nativeElement.getBoundingClientRect().width || 0) + 12);
|
|
872
|
+
if (this.showCount()) {
|
|
873
|
+
if (this.textCountRef()) {
|
|
874
|
+
this.paddingRightCustom.set(this.textCountRef()?.nativeElement.clientWidth + 16);
|
|
875
|
+
}
|
|
876
|
+
if (this.tagInput() === 'input') {
|
|
877
|
+
this.paddingRightCustom.update(value => {
|
|
878
|
+
return value + (this.elementRightRef()?.nativeElement.getBoundingClientRect().width || 0);
|
|
879
|
+
});
|
|
880
|
+
}
|
|
881
|
+
}
|
|
882
|
+
});
|
|
883
|
+
return `${viewDataNumberByLanguage(this.value().length, false)}`;
|
|
884
|
+
}
|
|
885
|
+
ngOnDestroy() {
|
|
886
|
+
this.onDestroy.next();
|
|
887
|
+
this.onDestroy.complete();
|
|
888
|
+
}
|
|
889
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
890
|
+
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 }, 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 }, hiddenContent: { classPropertyName: "hiddenContent", publicName: "hiddenContent", 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 }, 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 }, 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 ' + 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]=\"hiddenContent() ? 'password':'text'\"\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]=\"paddingRightCustom()\"\n [style.maxHeight.px]=\"maxHeightTextArea()\"\n [style.resize]=\"resize()\"\n [class.w-full]=\"!ignoreWidthInput100()\"\n [class]=\"'libs-ui-input 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\n <div class=\"libs-ui-input-text-bottom {{ classContainerBottomInput() }}\"\n [style.right.px]=\"(tagInput() === 'input' ? (elementRightRef.clientWidth || 0) : 0) + 8\">\n @if (templateLeftBottomInput()) {\n <ng-container *ngTemplateOutlet=\"templateLeftBottomInput()\" />\n }\n @if (dataType() === 'string' && showCount()) {\n <div #textCountRef\n class=\"text-[#9ca2ad] libs-ui-font-h7r\">\n <span>{{ countDisplay() }}</span>\n @if (maxLength()) {\n <span>/{{ maxLengthDisplay() }}</span>\n }\n </div>\n }\n @if (templateRightBottomInput()) {\n <ng-container *ngTemplateOutlet=\"templateRightBottomInput()\" />\n }\n </div>\n</div>\n", styles: [".libs-ui-input{max-width:100%;border-radius:none;font-family:var(--libs-ui-font-family-name, \"Arial\");font-weight:400;font-size:12px;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: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsSortComponent, selector: "libs_ui-components-buttons-sort", inputs: ["size", "mode", "fieldSort", "disable", "disableAsc", "disableDesc", "onlyEmit"], outputs: ["modeChange", "outChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
891
|
+
}
|
|
892
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsInputComponent, decorators: [{
|
|
893
|
+
type: Component,
|
|
894
|
+
args: [{ selector: 'libs_ui-components-inputs-input', standalone: true, imports: [
|
|
895
|
+
TranslateModule,
|
|
896
|
+
LibsUiComponentsPopoverComponent,
|
|
897
|
+
LibsUiComponentsButtonsSortComponent
|
|
898
|
+
], 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 ' + 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]=\"hiddenContent() ? 'password':'text'\"\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]=\"paddingRightCustom()\"\n [style.maxHeight.px]=\"maxHeightTextArea()\"\n [style.resize]=\"resize()\"\n [class.w-full]=\"!ignoreWidthInput100()\"\n [class]=\"'libs-ui-input 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\n <div class=\"libs-ui-input-text-bottom {{ classContainerBottomInput() }}\"\n [style.right.px]=\"(tagInput() === 'input' ? (elementRightRef.clientWidth || 0) : 0) + 8\">\n @if (templateLeftBottomInput()) {\n <ng-container *ngTemplateOutlet=\"templateLeftBottomInput()\" />\n }\n @if (dataType() === 'string' && showCount()) {\n <div #textCountRef\n class=\"text-[#9ca2ad] libs-ui-font-h7r\">\n <span>{{ countDisplay() }}</span>\n @if (maxLength()) {\n <span>/{{ maxLengthDisplay() }}</span>\n }\n </div>\n }\n @if (templateRightBottomInput()) {\n <ng-container *ngTemplateOutlet=\"templateRightBottomInput()\" />\n }\n </div>\n</div>\n", styles: [".libs-ui-input{max-width:100%;border-radius:none;font-family:var(--libs-ui-font-family-name, \"Arial\");font-weight:400;font-size:12px;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"] }]
|
|
899
|
+
}], ctorParameters: () => [] });
|
|
900
|
+
|
|
901
|
+
/**
|
|
902
|
+
* Generated bundle index. Do not edit.
|
|
903
|
+
*/
|
|
904
|
+
|
|
905
|
+
export { LibsUiComponentsInputsInputComponent };
|
|
906
|
+
//# sourceMappingURL=libs-ui-components-inputs-input.mjs.map
|