@libs-ui/components-inputs-input 0.2.28 → 0.2.30-6.1
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/defines/index-iframe-area.define.d.ts +2 -1
- package/esm2022/defines/index-iframe-area.define.mjs +11 -12
- package/esm2022/input.component.mjs +50 -26
- package/esm2022/interfaces/focus-and-blur-event.interface.mjs +1 -1
- package/esm2022/interfaces/function-control-event.interface.mjs +1 -1
- package/esm2022/interfaces/index.mjs +2 -1
- package/esm2022/interfaces/input.interface.mjs +2 -0
- package/fesm2022/libs-ui-components-inputs-input.mjs +60 -37
- package/fesm2022/libs-ui-components-inputs-input.mjs.map +1 -1
- package/input.component.d.ts +13 -8
- package/interfaces/focus-and-blur-event.interface.d.ts +9 -0
- package/interfaces/function-control-event.interface.d.ts +1 -0
- package/interfaces/index.d.ts +1 -0
- package/interfaces/input.interface.d.ts +5 -0
- package/package.json +10 -3
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm9jdXMtYW5kLWJsdXItZXZlbnQuaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2lucHV0cy9pbnB1dC9zcmMvaW50ZXJmYWNlcy9mb2N1cy1hbmQtYmx1ci1ldmVudC5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCBpbnRlcmZhY2UgSUZvY3VzQW5kQmx1ckV2ZW50IHtcbiAgbmFtZTogJ2ZvY3VzJyB8ICdibHVyJyxcbiAgZXZlbnQ6IEV2ZW50O1xufVxuXG5leHBvcnQgaW50ZXJmYWNlIElJZnJhbWVUZXh0YXJlYUN1c3RvbVN0eWxlIHtcbiAgYm9yZGVyQ29sb3I/OiBzdHJpbmc7XG4gIHBhZGRpbmc/OiBzdHJpbmc7XG4gIGxpbmVIZWlnaHQ/OiBzdHJpbmc7XG4gIGZvbnRTaXplPzogc3RyaW5nO1xuICBoZWlnaHQ/OiBzdHJpbmc7XG4gIGNvbG9yPzogc3RyaW5nO1xuICBiYWNrZ3JvdW5kQ29sb3I/OiBzdHJpbmc7XG59Il19
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnVuY3Rpb24tY29udHJvbC1ldmVudC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL2lucHV0L3NyYy9pbnRlcmZhY2VzL2Z1bmN0aW9uLWNvbnRyb2wtZXZlbnQuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJcblxuZXhwb3J0IGludGVyZmFjZSBJSW5wdXRGdW5jdGlvbkNvbnRyb2xFdmVudCB7XG4gIGZvY3VzOiAoKSA9PiBQcm9taXNlPHZvaWQ+O1xuICBibHVyOiAoKSA9PiBQcm9taXNlPHZvaWQ+O1xuICBpbnNlcnRDb250ZW50OiAoZGF0YTogc3RyaW5nIHwgbnVtYmVyKSA9PiBQcm9taXNlPHZvaWQ+O1xuICByZXNldFZhbHVlOiAoKSA9PiBQcm9taXNlPHZvaWQ+O1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICBnZXRFbGVtZW50VmFsdWU6ICgpID0+
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnVuY3Rpb24tY29udHJvbC1ldmVudC5pbnRlcmZhY2UuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL2lucHV0L3NyYy9pbnRlcmZhY2VzL2Z1bmN0aW9uLWNvbnRyb2wtZXZlbnQuaW50ZXJmYWNlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiIiLCJzb3VyY2VzQ29udGVudCI6WyJcblxuZXhwb3J0IGludGVyZmFjZSBJSW5wdXRGdW5jdGlvbkNvbnRyb2xFdmVudCB7XG4gIGZvY3VzOiAoKSA9PiBQcm9taXNlPHZvaWQ+O1xuICBibHVyOiAoKSA9PiBQcm9taXNlPHZvaWQ+O1xuICBpbnNlcnRDb250ZW50OiAoZGF0YTogc3RyaW5nIHwgbnVtYmVyKSA9PiBQcm9taXNlPHZvaWQ+O1xuICByZXNldFZhbHVlOiAoKSA9PiBQcm9taXNlPHZvaWQ+O1xuICAvLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgQHR5cGVzY3JpcHQtZXNsaW50L25vLWV4cGxpY2l0LWFueVxuICBnZXRFbGVtZW50VmFsdWU6ICgpID0+IFByb21pc2U8YW55PiB8IHVuZGVmaW5lZDtcbiAgY2hlY2tBbmREaXNhYmxlVXBEb3duQnV0dG9uOiAodmFsdWU6IG51bWJlcikgPT4gUHJvbWlzZTx2b2lkPjtcbiAgc2VsZWN0QWxsQ29udGVudDogKCkgPT4gUHJvbWlzZTx2b2lkPjtcbn1cblxuIl19
|
|
@@ -1,3 +1,4 @@
|
|
|
1
1
|
export * from './focus-and-blur-event.interface';
|
|
2
2
|
export * from './function-control-event.interface';
|
|
3
|
-
|
|
3
|
+
export * from './input.interface';
|
|
4
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvaW5wdXRzL2lucHV0L3NyYy9pbnRlcmZhY2VzL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyxvQ0FBb0MsQ0FBQztBQUNuRCxjQUFjLG1CQUFtQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi9mb2N1cy1hbmQtYmx1ci1ldmVudC5pbnRlcmZhY2UnO1xuZXhwb3J0ICogZnJvbSAnLi9mdW5jdGlvbi1jb250cm9sLWV2ZW50LmludGVyZmFjZSc7XG5leHBvcnQgKiBmcm9tICcuL2lucHV0LmludGVyZmFjZSc7Il19
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export {};
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5wdXQuaW50ZXJmYWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2lucHV0cy9pbnB1dC9zcmMvaW50ZXJmYWNlcy9pbnB1dC5pbnRlcmZhY2UudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB0eXBlIFRZUEVfSU5QVVQgPSAndGV4dCcgfCAnbnVtYmVyJyB8ICdwYXNzd29yZCc7XG5leHBvcnQgdHlwZSBUWVBFX0RBVEFfVFlQRV9JTlBVVCA9ICdzdHJpbmcnIHwgJ2ludCcgfCAnZmxvYXQnIHwgJ2JpZ2ludCc7XG5leHBvcnQgdHlwZSBUWVBFX1RBR19JTlBVVCA9ICdpbnB1dCcgfCAndGV4dGFyZWEnIHwgJ2lmcmFtZS10ZXh0YXJlYSc7XG5leHBvcnQgdHlwZSBUWVBFX01PREVfSU5QVVQgPSAnbm9uZScgfCAndGV4dCcgfCAndGVsJyB8ICd1cmwnIHwgJ2VtYWlsJyB8ICdudW1lcmljJyB8ICdkZWNpbWFsJztcbmV4cG9ydCB0eXBlIFRZUEVfSU5QVVRfUkVTSVpFX01PREUgPSAnYXV0bycgfCAndmVydGljYWwnIHwgJ2hvcml6b250YWwnIHwgJ25vbmUnIHwgdW5kZWZpbmVkOyJdfQ==
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { signal, computed, input, model, output, viewChild, inject, Renderer2, effect, untracked,
|
|
2
|
+
import { signal, computed, input, model, output, viewChild, inject, Renderer2, effect, untracked, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
3
|
import { DomSanitizer } from '@angular/platform-browser';
|
|
4
4
|
import { LibsUiComponentsButtonsSortComponent } from '@libs-ui/components-buttons-sort';
|
|
5
5
|
import { LibsUiComponentsPopoverComponent } from '@libs-ui/components-popover';
|
|
6
6
|
import { LibsUiConfigProjectService } from '@libs-ui/services-config-project';
|
|
7
|
-
import { viewDataNumberByLanguage, UtilsKeyCodeConstant, UtilsCache, UtilsLanguageConstants, isNil, formatNumber, removeEmoji, uuid, setCaretPosition } from '@libs-ui/utils';
|
|
7
|
+
import { viewDataNumberByLanguage, UtilsKeyCodeConstant, isTypeFile, UtilsCache, UtilsLanguageConstants, isNil, formatNumber, removeEmoji, uuid, setCaretPosition } from '@libs-ui/utils';
|
|
8
8
|
import * as i1 from '@ngx-translate/core';
|
|
9
9
|
import { TranslateService, TranslateModule } from '@ngx-translate/core';
|
|
10
10
|
import { Subject, fromEvent } from 'rxjs';
|
|
11
11
|
import { take, tap, mergeMap, filter, takeUntil, debounceTime } from 'rxjs/operators';
|
|
12
|
+
import { NgTemplateOutlet } from '@angular/common';
|
|
12
13
|
|
|
13
|
-
const indexInputHtml = (
|
|
14
|
+
const indexInputHtml = (customStyle) => `
|
|
14
15
|
<!DOCTYPE html>
|
|
15
16
|
<html>
|
|
16
17
|
<head>
|
|
@@ -76,25 +77,24 @@ const indexInputHtml = (borderColor) => `
|
|
|
76
77
|
max-height:100vh;
|
|
77
78
|
resize: none;
|
|
78
79
|
border: none;
|
|
79
|
-
border: ${borderColor ? ' 1px solid #e6e7ea;' : 'none'};
|
|
80
|
+
border: ${customStyle.borderColor ? ' 1px solid #e6e7ea;' : 'none'};
|
|
80
81
|
width: 100%;
|
|
81
82
|
border-radius: 4px;
|
|
82
|
-
font-size: 14px;
|
|
83
83
|
font-weight: normal;
|
|
84
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
|
|
85
|
+
line-height: ${customStyle.lineHeight ?? '16px'};
|
|
86
|
+
height: ${customStyle.height ?? 'auto'};
|
|
87
|
+
color: ${customStyle.color ?? '#4e4e4e'};
|
|
88
|
+
padding: ${customStyle.padding ?? '6px 12px'};
|
|
89
|
+
background-color: ${customStyle.backgroundColor ?? '#fff'};
|
|
90
|
+
font-size: ${customStyle.fontSize ?? '12px'};
|
|
91
91
|
font-family:var(--libs-ui-font-family-name) !important;
|
|
92
92
|
overflow: hidden;
|
|
93
93
|
margin: 0;
|
|
94
94
|
resize: none;
|
|
95
95
|
}
|
|
96
|
-
${borderColor ? `textarea:focus:not(:read-only):not(:disabled) {
|
|
97
|
-
border: 1px solid ${borderColor};
|
|
96
|
+
${customStyle.borderColor ? `textarea:focus:not(:read-only):not(:disabled) {
|
|
97
|
+
border: 1px solid ${customStyle.borderColor};
|
|
98
98
|
}` : ''}
|
|
99
99
|
|
|
100
100
|
textarea::-webkit-input-placeholder {
|
|
@@ -131,13 +131,13 @@ const indexInputHtml = (borderColor) => `
|
|
|
131
131
|
|
|
132
132
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
133
133
|
class LibsUiComponentsInputsInputComponent {
|
|
134
|
-
|
|
134
|
+
// #region PROPERTY
|
|
135
135
|
disableAsc = signal(false);
|
|
136
136
|
disableDesc = signal(false);
|
|
137
137
|
htmlIframeArea = signal(undefined);
|
|
138
138
|
countDisplay = computed(this.countDisplayComputed.bind(this));
|
|
139
139
|
maxLengthDisplay = computed(() => `${viewDataNumberByLanguage(this.maxLength() || 0, false)}`);
|
|
140
|
-
paddingRightCustom = signal(
|
|
140
|
+
paddingRightCustom = signal(undefined);
|
|
141
141
|
inputIframeRef = signal(undefined);
|
|
142
142
|
DEFAULT_MAX_HEIGHT_TEXT_AREA = 250;
|
|
143
143
|
charFirstIsZero = signal(false);
|
|
@@ -145,16 +145,17 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
145
145
|
iframeRef;
|
|
146
146
|
dataTextPaste = signal('');
|
|
147
147
|
onDestroy = new Subject();
|
|
148
|
-
|
|
149
|
-
tagInput = input('input', { transform: value => value
|
|
150
|
-
dataType = input('string');
|
|
148
|
+
// #region INPUT
|
|
149
|
+
tagInput = input('input', { transform: value => value || 'input' });
|
|
150
|
+
dataType = input('string', { transform: val => val || 'string' });
|
|
151
|
+
typeInput = input('text', { transform: val => val || 'text' });
|
|
152
|
+
modeInput = input('text', { transform: val => val || 'text' });
|
|
151
153
|
tabInsertContentTagInput = input(false);
|
|
152
154
|
textAreaEnterNotNewLine = input(false);
|
|
153
155
|
emitEmptyInDataTypeNumber = input(false);
|
|
154
156
|
keepZeroInTypeInt = input(false);
|
|
155
157
|
autoAddZeroLessThan10InTypeInt = input(false);
|
|
156
158
|
ignoreBlockInputMaxValue = input();
|
|
157
|
-
hiddenContent = input(false); // sử dụng để set type cho input dạng text hay password
|
|
158
159
|
maxValueNumber = model();
|
|
159
160
|
minValueNumber = model();
|
|
160
161
|
fixedFloat = model();
|
|
@@ -176,19 +177,21 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
176
177
|
minHeightTextArea = input();
|
|
177
178
|
maxHeightTextArea = input(this.DEFAULT_MAX_HEIGHT_TEXT_AREA, { transform: (value) => value || this.DEFAULT_MAX_HEIGHT_TEXT_AREA });
|
|
178
179
|
focusTimeOut = input(600, { transform: value => value ?? 600 });
|
|
180
|
+
selectAllTimeOut = input(600, { transform: value => value ?? 600 });
|
|
179
181
|
blurTimeOut = input(32, { transform: (value) => value || 32 });
|
|
180
182
|
zIndexPopoverContent = input(10, { transform: (value) => value || 10 });
|
|
181
183
|
classContainerInput = input('w-full', { transform: (value) => value || 'w-full' });
|
|
182
184
|
showCount = input();
|
|
183
185
|
ignoreStopPropagationEvent = input();
|
|
184
|
-
resize = input('
|
|
186
|
+
resize = input('vertical', { transform: (value) => value || 'vertical' });
|
|
185
187
|
templateLeftBottomInput = input();
|
|
186
188
|
templateRightBottomInput = input();
|
|
187
189
|
classContainerBottomInput = input(' ', { transform: (value) => value || ' ' });
|
|
188
190
|
ignoreWidthInput100 = input();
|
|
191
|
+
iframeTextareaCustomStyle = input();
|
|
189
192
|
iconLeftClass = input('', { transform: (value) => value || '' });
|
|
190
193
|
popoverContentIconLeft = input('', { transform: (value) => value || '' });
|
|
191
|
-
iconRightClass = input(
|
|
194
|
+
iconRightClass = input();
|
|
192
195
|
popoverContentIconRight = input('', { transform: (value) => value || '' });
|
|
193
196
|
resetAutoCompletePassword = input(false, { transform: value => value ?? false });
|
|
194
197
|
acceptOnlyClickIcon = input(false);
|
|
@@ -196,7 +199,7 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
196
199
|
onlyAcceptNegativeValue = input(false);
|
|
197
200
|
maxLengthNumberCount = model();
|
|
198
201
|
focusInput = input(false);
|
|
199
|
-
|
|
202
|
+
// #region OUTPUT
|
|
200
203
|
outHeightAreaChange = output();
|
|
201
204
|
outChange = output();
|
|
202
205
|
outFocusAndBlurEvent = output();
|
|
@@ -212,7 +215,7 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
212
215
|
inputRef = viewChild('inputRef');
|
|
213
216
|
textCountRef = viewChild('textCountRef');
|
|
214
217
|
elementRightRef = viewChild('elementRightRef');
|
|
215
|
-
|
|
218
|
+
// #region INJECT
|
|
216
219
|
renderer = inject(Renderer2);
|
|
217
220
|
configProjectService = inject(LibsUiConfigProjectService);
|
|
218
221
|
translateService = inject(TranslateService);
|
|
@@ -239,11 +242,14 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
239
242
|
this.init();
|
|
240
243
|
}, { allowSignalWrites: true });
|
|
241
244
|
effect(() => {
|
|
242
|
-
|
|
245
|
+
if (this.Element) {
|
|
246
|
+
this.onDestroy.next();
|
|
247
|
+
untracked(() => this.afterViewInit());
|
|
248
|
+
}
|
|
243
249
|
});
|
|
244
250
|
}
|
|
245
251
|
ngOnInit() {
|
|
246
|
-
this.htmlIframeArea.set(this.sanitizer.bypassSecurityTrustHtml(indexInputHtml(this.noBorder() ? '' : `${this.configProjectService.colorStepContrastFromOrigin(20)?.light}`)));
|
|
252
|
+
this.htmlIframeArea.set(this.sanitizer.bypassSecurityTrustHtml(indexInputHtml(this.iframeTextareaCustomStyle() || { borderColor: this.noBorder() ? '' : `${this.configProjectService.colorStepContrastFromOrigin(20)?.light}` })));
|
|
247
253
|
}
|
|
248
254
|
afterViewInit() {
|
|
249
255
|
if (!this.Element) {
|
|
@@ -256,7 +262,8 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
256
262
|
insertContent: this.addDataToSelectionInput.bind(this),
|
|
257
263
|
resetValue: this.resetValue.bind(this),
|
|
258
264
|
getElementValue: this.getElementValue.bind(this),
|
|
259
|
-
checkAndDisableUpDownButton: this.checkAndDisableUpDownButton.bind(this)
|
|
265
|
+
checkAndDisableUpDownButton: this.checkAndDisableUpDownButton.bind(this),
|
|
266
|
+
selectAllContent: this.selectAllContent.bind(this)
|
|
260
267
|
});
|
|
261
268
|
this.init();
|
|
262
269
|
this.initEvent('focus', this.ignoreStopPropagationEvent()).subscribe((e) => this.outFocusAndBlurEvent.emit({ name: 'focus', event: e }));
|
|
@@ -271,7 +278,9 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
271
278
|
this.initEvent('dragover', this.ignoreStopPropagationEvent()).pipe(tap((event) => {
|
|
272
279
|
event.preventDefault();
|
|
273
280
|
event.stopPropagation();
|
|
274
|
-
event.dataTransfer
|
|
281
|
+
if (event.dataTransfer) {
|
|
282
|
+
event.dataTransfer.dropEffect = 'copy';
|
|
283
|
+
}
|
|
275
284
|
})).subscribe();
|
|
276
285
|
this.initEvent('drop', this.ignoreStopPropagationEvent()).subscribe(this.checkAndEmitFiles.bind(this));
|
|
277
286
|
pasteEvent.subscribe(this.checkAndEmitFiles.bind(this));
|
|
@@ -295,15 +304,16 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
295
304
|
if (this.textAreaEnterNotNewLine()) {
|
|
296
305
|
keyDownEvent.pipe(filter((event) => event.keyCode === UtilsKeyCodeConstant.ENTER && !event.shiftKey), tap((e) => e.preventDefault())).subscribe();
|
|
297
306
|
}
|
|
307
|
+
this.countDisplayComputed();
|
|
298
308
|
}
|
|
299
|
-
|
|
309
|
+
// #region FUNCTIONS
|
|
300
310
|
updateMaxLengthMinMaxValueByDataType() {
|
|
301
311
|
if (this.dataType() === 'int' || this.dataType() === 'float') {
|
|
302
312
|
this.maxLength.update(value => {
|
|
303
313
|
return !value || value > 21 ? 21 : value;
|
|
304
314
|
});
|
|
305
|
-
this.minValueNumber.update(value => value
|
|
306
|
-
this.maxValueNumber.update(value => value
|
|
315
|
+
this.minValueNumber.update(value => value ?? Number.MIN_SAFE_INTEGER);
|
|
316
|
+
this.maxValueNumber.update(value => value ?? Number.MAX_SAFE_INTEGER);
|
|
307
317
|
}
|
|
308
318
|
if (this.dataType() === 'bigint') {
|
|
309
319
|
this.maxLength.update(value => !value || value > 25 ? 25 : value);
|
|
@@ -326,8 +336,8 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
326
336
|
}
|
|
327
337
|
event.stopPropagation();
|
|
328
338
|
const fileList = [];
|
|
329
|
-
for (const file of files) {
|
|
330
|
-
if (
|
|
339
|
+
for (const file of Array.from(files)) {
|
|
340
|
+
if (isTypeFile(file)) {
|
|
331
341
|
this.outFileDrop.emit(file);
|
|
332
342
|
fileList.push(file);
|
|
333
343
|
}
|
|
@@ -581,7 +591,7 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
581
591
|
if (valueTarget.length > maxTotalNumber) {
|
|
582
592
|
valueTarget = valueTarget.slice(0, maxTotalNumber);
|
|
583
593
|
}
|
|
584
|
-
if (Math.abs(parseInt(valueTarget)) > (this.maxValueNumber()
|
|
594
|
+
if (Math.abs(parseInt(valueTarget)) > (this.maxValueNumber() ?? 9007199254740991)) {
|
|
585
595
|
valueTarget = valueTarget.slice(0, maxTotalNumber - 1);
|
|
586
596
|
}
|
|
587
597
|
if (this.onlyAcceptNegativeValue() && valueTarget[0] !== '-' && valueTarget[0] !== '0') {
|
|
@@ -861,9 +871,17 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
861
871
|
}
|
|
862
872
|
}
|
|
863
873
|
async resetValue() {
|
|
864
|
-
|
|
874
|
+
const value = '';
|
|
875
|
+
this.Element.value = value;
|
|
876
|
+
this.value.set(value);
|
|
877
|
+
this.outChange.emit(value);
|
|
865
878
|
}
|
|
866
879
|
countDisplayComputed() {
|
|
880
|
+
if ((this.dataType() !== 'string' && this.valueUpDownNumber()) || !isNil(this.iconRightClass())) {
|
|
881
|
+
setTimeout(() => {
|
|
882
|
+
this.paddingRightCustom.set((this.elementRightRef()?.nativeElement.getBoundingClientRect().width || 0) + 12);
|
|
883
|
+
});
|
|
884
|
+
}
|
|
867
885
|
if (!this.showCount() || this.dataType() !== 'string' || typeof this.value() !== 'string') {
|
|
868
886
|
return '0';
|
|
869
887
|
}
|
|
@@ -882,20 +900,25 @@ class LibsUiComponentsInputsInputComponent {
|
|
|
882
900
|
});
|
|
883
901
|
return `${viewDataNumberByLanguage(this.value().length, false)}`;
|
|
884
902
|
}
|
|
903
|
+
async selectAllContent() {
|
|
904
|
+
setTimeout(() => {
|
|
905
|
+
this.Element?.select();
|
|
906
|
+
}, this.selectAllTimeOut());
|
|
907
|
+
}
|
|
885
908
|
ngOnDestroy() {
|
|
886
909
|
this.onDestroy.next();
|
|
887
910
|
this.onDestroy.complete();
|
|
888
911
|
}
|
|
889
912
|
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 });
|
|
913
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: LibsUiComponentsInputsInputComponent, isStandalone: true, selector: "libs_ui-components-inputs-input", inputs: { tagInput: { classPropertyName: "tagInput", publicName: "tagInput", isSignal: true, isRequired: false, transformFunction: null }, dataType: { classPropertyName: "dataType", publicName: "dataType", isSignal: true, isRequired: false, transformFunction: null }, typeInput: { classPropertyName: "typeInput", publicName: "typeInput", isSignal: true, isRequired: false, transformFunction: null }, modeInput: { classPropertyName: "modeInput", publicName: "modeInput", isSignal: true, isRequired: false, transformFunction: null }, tabInsertContentTagInput: { classPropertyName: "tabInsertContentTagInput", publicName: "tabInsertContentTagInput", isSignal: true, isRequired: false, transformFunction: null }, textAreaEnterNotNewLine: { classPropertyName: "textAreaEnterNotNewLine", publicName: "textAreaEnterNotNewLine", isSignal: true, isRequired: false, transformFunction: null }, emitEmptyInDataTypeNumber: { classPropertyName: "emitEmptyInDataTypeNumber", publicName: "emitEmptyInDataTypeNumber", isSignal: true, isRequired: false, transformFunction: null }, keepZeroInTypeInt: { classPropertyName: "keepZeroInTypeInt", publicName: "keepZeroInTypeInt", isSignal: true, isRequired: false, transformFunction: null }, autoAddZeroLessThan10InTypeInt: { classPropertyName: "autoAddZeroLessThan10InTypeInt", publicName: "autoAddZeroLessThan10InTypeInt", isSignal: true, isRequired: false, transformFunction: null }, ignoreBlockInputMaxValue: { classPropertyName: "ignoreBlockInputMaxValue", publicName: "ignoreBlockInputMaxValue", isSignal: true, isRequired: false, transformFunction: null }, maxValueNumber: { classPropertyName: "maxValueNumber", publicName: "maxValueNumber", isSignal: true, isRequired: false, transformFunction: null }, minValueNumber: { classPropertyName: "minValueNumber", publicName: "minValueNumber", isSignal: true, isRequired: false, transformFunction: null }, fixedFloat: { classPropertyName: "fixedFloat", publicName: "fixedFloat", isSignal: true, isRequired: false, transformFunction: null }, acceptNegativeValue: { classPropertyName: "acceptNegativeValue", publicName: "acceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, valueUpDownNumber: { classPropertyName: "valueUpDownNumber", publicName: "valueUpDownNumber", isSignal: true, isRequired: false, transformFunction: null }, classInclude: { classPropertyName: "classInclude", publicName: "classInclude", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null }, noBorder: { classPropertyName: "noBorder", publicName: "noBorder", isSignal: true, isRequired: false, transformFunction: null }, backgroundNone: { classPropertyName: "backgroundNone", publicName: "backgroundNone", isSignal: true, isRequired: false, transformFunction: null }, borderError: { classPropertyName: "borderError", publicName: "borderError", isSignal: true, isRequired: false, transformFunction: null }, useColorModeExist: { classPropertyName: "useColorModeExist", publicName: "useColorModeExist", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, keepPlaceholderOnly: { classPropertyName: "keepPlaceholderOnly", publicName: "keepPlaceholderOnly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, autoRemoveEmoji: { classPropertyName: "autoRemoveEmoji", publicName: "autoRemoveEmoji", isSignal: true, isRequired: false, transformFunction: null }, defaultHeight: { classPropertyName: "defaultHeight", publicName: "defaultHeight", isSignal: true, isRequired: false, transformFunction: null }, minHeightTextArea: { classPropertyName: "minHeightTextArea", publicName: "minHeightTextArea", isSignal: true, isRequired: false, transformFunction: null }, maxHeightTextArea: { classPropertyName: "maxHeightTextArea", publicName: "maxHeightTextArea", isSignal: true, isRequired: false, transformFunction: null }, focusTimeOut: { classPropertyName: "focusTimeOut", publicName: "focusTimeOut", isSignal: true, isRequired: false, transformFunction: null }, selectAllTimeOut: { classPropertyName: "selectAllTimeOut", publicName: "selectAllTimeOut", isSignal: true, isRequired: false, transformFunction: null }, blurTimeOut: { classPropertyName: "blurTimeOut", publicName: "blurTimeOut", isSignal: true, isRequired: false, transformFunction: null }, zIndexPopoverContent: { classPropertyName: "zIndexPopoverContent", publicName: "zIndexPopoverContent", isSignal: true, isRequired: false, transformFunction: null }, classContainerInput: { classPropertyName: "classContainerInput", publicName: "classContainerInput", isSignal: true, isRequired: false, transformFunction: null }, showCount: { classPropertyName: "showCount", publicName: "showCount", isSignal: true, isRequired: false, transformFunction: null }, ignoreStopPropagationEvent: { classPropertyName: "ignoreStopPropagationEvent", publicName: "ignoreStopPropagationEvent", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, templateLeftBottomInput: { classPropertyName: "templateLeftBottomInput", publicName: "templateLeftBottomInput", isSignal: true, isRequired: false, transformFunction: null }, templateRightBottomInput: { classPropertyName: "templateRightBottomInput", publicName: "templateRightBottomInput", isSignal: true, isRequired: false, transformFunction: null }, classContainerBottomInput: { classPropertyName: "classContainerBottomInput", publicName: "classContainerBottomInput", isSignal: true, isRequired: false, transformFunction: null }, ignoreWidthInput100: { classPropertyName: "ignoreWidthInput100", publicName: "ignoreWidthInput100", isSignal: true, isRequired: false, transformFunction: null }, iframeTextareaCustomStyle: { classPropertyName: "iframeTextareaCustomStyle", publicName: "iframeTextareaCustomStyle", isSignal: true, isRequired: false, transformFunction: null }, iconLeftClass: { classPropertyName: "iconLeftClass", publicName: "iconLeftClass", isSignal: true, isRequired: false, transformFunction: null }, popoverContentIconLeft: { classPropertyName: "popoverContentIconLeft", publicName: "popoverContentIconLeft", isSignal: true, isRequired: false, transformFunction: null }, iconRightClass: { classPropertyName: "iconRightClass", publicName: "iconRightClass", isSignal: true, isRequired: false, transformFunction: null }, popoverContentIconRight: { classPropertyName: "popoverContentIconRight", publicName: "popoverContentIconRight", isSignal: true, isRequired: false, transformFunction: null }, resetAutoCompletePassword: { classPropertyName: "resetAutoCompletePassword", publicName: "resetAutoCompletePassword", isSignal: true, isRequired: false, transformFunction: null }, acceptOnlyClickIcon: { classPropertyName: "acceptOnlyClickIcon", publicName: "acceptOnlyClickIcon", isSignal: true, isRequired: false, transformFunction: null }, setIconRightColorSameColorDisableReadOnly: { classPropertyName: "setIconRightColorSameColorDisableReadOnly", publicName: "setIconRightColorSameColorDisableReadOnly", isSignal: true, isRequired: false, transformFunction: null }, onlyAcceptNegativeValue: { classPropertyName: "onlyAcceptNegativeValue", publicName: "onlyAcceptNegativeValue", isSignal: true, isRequired: false, transformFunction: null }, maxLengthNumberCount: { classPropertyName: "maxLengthNumberCount", publicName: "maxLengthNumberCount", isSignal: true, isRequired: false, transformFunction: null }, focusInput: { classPropertyName: "focusInput", publicName: "focusInput", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { maxValueNumber: "maxValueNumberChange", minValueNumber: "minValueNumberChange", fixedFloat: "fixedFloatChange", acceptNegativeValue: "acceptNegativeValueChange", maxLength: "maxLengthChange", value: "valueChange", maxLengthNumberCount: "maxLengthNumberCountChange", outHeightAreaChange: "outHeightAreaChange", outChange: "outChange", outFocusAndBlurEvent: "outFocusAndBlurEvent", outEnterEvent: "outEnterEvent", outInputEvent: "outInputEvent", outIconLeft: "outIconLeft", outIconRight: "outIconRight", outFunctionsControl: "outFunctionsControl", outFilesDrop: "outFilesDrop", outFileDrop: "outFileDrop", outChangeValueByButtonUpDown: "outChangeValueByButtonUpDown" }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, isSignal: true }, { propertyName: "textCountRef", first: true, predicate: ["textCountRef"], descendants: true, isSignal: true }, { propertyName: "elementRightRef", first: true, predicate: ["elementRightRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [class]=\"'flex relative !text-[#9ca2ad] ' + classContainerInput()\"\n [class.libs-ui-components-input-textarea-container]=\"tagInput() === 'textarea' && resize() === 'auto'\">\n @if (tagInput() === 'input') {\n <input #inputRef\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.libs-ui-disable]=\"disable()\"\n [class.libs-ui-disable-background]=\"disable()\"\n [style.height.px]=\"defaultHeight()\"\n [style.minHeight.px]=\"defaultHeight()\"\n [style.paddingRight.px.important]=\"paddingRightCustom()\"\n [class.w-full]=\"!ignoreWidthInput100()\"\n [class]=\"'libs-ui-input libs-ui-font-h5r ' + classInclude()\"\n [class.border-primary-focus-general]=\"focusInput()\"\n [class.libs-ui-input-not-border]=\"noBorder()\"\n [class.libs-ui-bg-special-none]=\"backgroundNone()\"\n [class.libs-ui-border-error-general]=\"borderError()\"\n [class.text-[#29c7cc]]=\"useColorModeExist()\"\n [class.!pl-[40px]]=\"iconLeftClass()\"\n [attr.maxLength]=\"maxLength() || undefined\"\n [placeholder]=\"placeholder() | translate\"\n [attr.type]=\"typeInput()\"\n [attr.inputmode]=\"modeInput()\"\n [readonly]=\"readonly()\"\n [disabled]=\"disable()\"\n [autocomplete]=\"resetAutoCompletePassword()? 'new-password':''\" />\n }\n @if (tagInput() === 'textarea') {\n @if (resize() === 'auto') {\n <div class=\"libs-ui-components-input-textarea-container-resize-icon\"></div>\n }\n <textarea #inputRef\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.libs-ui-disable]=\"disable()\"\n [class.libs-ui-disable-background]=\"disable()\"\n [style.height.px]=\"defaultHeight()\"\n [style.minHeight.px]=\"minHeightTextArea() ?? defaultHeight()\"\n [style.paddingRight.px.important]=\"paddingRightCustom()\"\n [style.maxHeight.px]=\"maxHeightTextArea()\"\n [style.resize]=\"resize()\"\n [class.w-full]=\"!ignoreWidthInput100()\"\n [class]=\"'libs-ui-input libs-ui-font-h5r libs-ui-cursor-auto ' + classInclude()\"\n [class.libs-ui-input-not-border]=\"noBorder()\"\n [class.libs-ui-bg-special-none]=\"backgroundNone()\"\n [class.libs-ui-border-error-general]=\"borderError()\"\n [class.text-[#29c7cc]]=\"useColorModeExist()\"\n [class.pl-[32px]]=\"iconLeftClass()\"\n [attr.maxLength]=\"maxLength() || undefined\"\n [placeholder]=\"placeholder() | translate\"\n [readonly]=\"readonly()\"\n [disabled]=\"disable()\">\n </textarea>\n }\n\n @if (tagInput() === 'iframe-textarea' && htmlIframeArea()) {\n <span class=\"d-none\">\n </span>\n <iframe #iframeRef\n [style.maxHeight.px]=\"maxHeightTextArea()\"\n [style.height.px]=\"defaultHeight()\"\n [srcdoc]=\"htmlIframeArea()\"\n class=\"w-full\"\n frameBorder=\"0\"\n (load)=\"handlerOnLoad($event,iframeRef)\">\n </iframe>\n }\n @if (iconLeftClass()) {\n <libs_ui-components-popover [ignoreShowPopover]=\"!popoverContentIconLeft()\"\n [config]=\"{maxWidth:250,direction:'bottom',content:popoverContentIconLeft(),zIndex: zIndexPopoverContent()}\">\n <i [attr.tagInput]=\"tagInput()\"\n [class]=\"iconLeftClass() +' libs-ui-input-icon-left !text-[#9ca2ad]'\"\n (click)=\"handlerEventIconLeft($event,'click')\">\n </i>\n </libs_ui-components-popover>\n }\n <div #elementRightRef\n class=\"absolute flex items-center h-full top-0 right-0\">\n @if (value() && placeholder().trim() && keepPlaceholderOnly()) {\n <span [class]=\"'libs-ui-input-placeholder-custom libs-ui-font-h5r'\">\n {{ placeholder() }}\n </span>\n }\n @if (dataType() !=='string' && valueUpDownNumber()) {\n <libs_ui-components-buttons-sort class=\"mr-[12px]\"\n [disableAsc]=\"disableAsc()\"\n [disableDesc]=\"disableDesc()\"\n [attr.tagInput]=\"tagInput()\"\n [onlyEmit]=\"true\"\n [disable]=\"disable() || readonly()\"\n (outChange)=\"handlerChangeValue($event)\" />\n }\n @if (iconRightClass()) {\n <libs_ui-components-popover class=\"flex\"\n [ignoreShowPopover]=\"!popoverContentIconRight()\"\n [config]=\"{maxWidth:250,direction:'bottom',content:popoverContentIconRight(),zIndex: zIndexPopoverContent()}\">\n <i [attr.tagInput]=\"tagInput()\"\n [class.text-[#6a7383]]=\"(!disable() && !readonly()) || acceptOnlyClickIcon()\"\n [class.text-[#cdd0d6]]='((disable() || readonly()) && !acceptOnlyClickIcon()) || setIconRightColorSameColorDisableReadOnly()'\n [class]=\"iconRightClass() +' libs-ui-input-icon-right'\"\n (click)=\"handlerEventIconRight($event,'click')\">\n </i>\n </libs_ui-components-popover>\n }\n </div>\n <div class=\"libs-ui-input-text-bottom {{ classContainerBottomInput() }}\"\n [style.right.px]=\"(tagInput() === 'input' ? (elementRightRef.clientWidth || 0) : 0) + 8\">\n @if (templateLeftBottomInput(); as templateLeftBottomInput) {\n <ng-container *ngTemplateOutlet=\"templateLeftBottomInput\" />\n }\n <div #textCountRef\n class=\"text-[#9ca2ad] libs-ui-font-h7r\"\n [class.hidden]=\"dataType() !== 'string' || !showCount()\">\n <span>{{ countDisplay() }}</span>\n @if (maxLength()) {\n <span>/{{ maxLengthDisplay() }}</span>\n }\n </div>\n @if (templateRightBottomInput(); as templateRightBottomInput) {\n <ng-container *ngTemplateOutlet=\"templateRightBottomInput\" />\n }\n </div>\n</div>\n", styles: [".libs-ui-input{max-width:100%;border-radius:none;color:#071631;padding:7px 12px;background-color:#fff;background-clip:padding-box;min-height:32px}.libs-ui-input:not(.libs-ui-input-not-border){border:1px solid #e6e7ea;border-radius:4px}.libs-ui-input:focus{outline:none}.libs-ui-input:focus:not(:read-only):not(:disabled):not(.libs-ui-input-not-border){border:1px solid var(--libs-ui-color-light-1, #4e8cf7)}.libs-ui-input .libs-ui-input-valid-check{position:absolute;left:-27px}.libs-ui-input-not-border{border:transparent}libs-ui-components-button-sort{position:absolute;right:12px;top:0}libs-ui-components-button-sort[tagInput=textarea]{top:-10px}.libs-ui-input-icon-left{position:absolute;top:8px;left:16px;font-size:16px}.libs-ui-input-icon-right{font-size:16px;margin-right:8px}.libs-ui-input-text-bottom{display:flex;align-items:center;position:absolute;bottom:8px}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-credentials-auto-fill-button{margin-right:8px!important}textarea::-webkit-resizer{border:transparent;outline:none}.libs-ui-components-input-textarea-container:after{content:\"\";border-top:1.5px solid #9ca2ad;width:15px;transform:rotate(-45deg);background:transparent;position:absolute;right:0;bottom:8px;pointer-events:none;border-radius:25%}.libs-ui-components-input-textarea-container .libs-ui-components-input-textarea-container-resize-icon{border-top:1.5px solid #9ca2ad;width:7px;transform:rotate(-45deg);position:absolute;bottom:5px;right:1px;pointer-events:none;border-radius:25%}.libs-ui-input-placeholder-custom{color:#6a7378;margin-right:16px;background:inherit}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.TranslatePipe, name: "translate" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LibsUiComponentsPopoverComponent, selector: "libs_ui-components-popover,[LibsUiComponentsPopoverDirective]", inputs: ["debugId", "flagMouse", "type", "mode", "config", "ignoreShowPopover", "elementRefCustom", "initEventInElementRefCustom", "classInclude", "ignoreHiddenPopoverContentWhenMouseLeave", "ignoreStopPropagationEvent", "ignoreCursorPointerModeLikeClick", "isAddContentToParentDocument", "ignoreClickOutside"], outputs: ["outEvent", "outChangStageFlagMouse", "outEventPopoverContent", "outFunctionsControl"] }, { kind: "component", type: LibsUiComponentsButtonsSortComponent, selector: "libs_ui-components-buttons-sort", inputs: ["size", "mode", "fieldSort", "disable", "disableAsc", "disableDesc", "onlyEmit"], outputs: ["modeChange", "outChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
891
914
|
}
|
|
892
915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LibsUiComponentsInputsInputComponent, decorators: [{
|
|
893
916
|
type: Component,
|
|
894
917
|
args: [{ selector: 'libs_ui-components-inputs-input', standalone: true, imports: [
|
|
895
|
-
TranslateModule,
|
|
918
|
+
TranslateModule, NgTemplateOutlet,
|
|
896
919
|
LibsUiComponentsPopoverComponent,
|
|
897
920
|
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]=\"
|
|
921
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'flex relative !text-[#9ca2ad] ' + classContainerInput()\"\n [class.libs-ui-components-input-textarea-container]=\"tagInput() === 'textarea' && resize() === 'auto'\">\n @if (tagInput() === 'input') {\n <input #inputRef\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.libs-ui-disable]=\"disable()\"\n [class.libs-ui-disable-background]=\"disable()\"\n [style.height.px]=\"defaultHeight()\"\n [style.minHeight.px]=\"defaultHeight()\"\n [style.paddingRight.px.important]=\"paddingRightCustom()\"\n [class.w-full]=\"!ignoreWidthInput100()\"\n [class]=\"'libs-ui-input libs-ui-font-h5r ' + classInclude()\"\n [class.border-primary-focus-general]=\"focusInput()\"\n [class.libs-ui-input-not-border]=\"noBorder()\"\n [class.libs-ui-bg-special-none]=\"backgroundNone()\"\n [class.libs-ui-border-error-general]=\"borderError()\"\n [class.text-[#29c7cc]]=\"useColorModeExist()\"\n [class.!pl-[40px]]=\"iconLeftClass()\"\n [attr.maxLength]=\"maxLength() || undefined\"\n [placeholder]=\"placeholder() | translate\"\n [attr.type]=\"typeInput()\"\n [attr.inputmode]=\"modeInput()\"\n [readonly]=\"readonly()\"\n [disabled]=\"disable()\"\n [autocomplete]=\"resetAutoCompletePassword()? 'new-password':''\" />\n }\n @if (tagInput() === 'textarea') {\n @if (resize() === 'auto') {\n <div class=\"libs-ui-components-input-textarea-container-resize-icon\"></div>\n }\n <textarea #inputRef\n [class.libs-ui-readonly]=\"readonly()\"\n [class.libs-ui-readonly-background]=\"readonly()\"\n [class.libs-ui-disable]=\"disable()\"\n [class.libs-ui-disable-background]=\"disable()\"\n [style.height.px]=\"defaultHeight()\"\n [style.minHeight.px]=\"minHeightTextArea() ?? defaultHeight()\"\n [style.paddingRight.px.important]=\"paddingRightCustom()\"\n [style.maxHeight.px]=\"maxHeightTextArea()\"\n [style.resize]=\"resize()\"\n [class.w-full]=\"!ignoreWidthInput100()\"\n [class]=\"'libs-ui-input libs-ui-font-h5r libs-ui-cursor-auto ' + classInclude()\"\n [class.libs-ui-input-not-border]=\"noBorder()\"\n [class.libs-ui-bg-special-none]=\"backgroundNone()\"\n [class.libs-ui-border-error-general]=\"borderError()\"\n [class.text-[#29c7cc]]=\"useColorModeExist()\"\n [class.pl-[32px]]=\"iconLeftClass()\"\n [attr.maxLength]=\"maxLength() || undefined\"\n [placeholder]=\"placeholder() | translate\"\n [readonly]=\"readonly()\"\n [disabled]=\"disable()\">\n </textarea>\n }\n\n @if (tagInput() === 'iframe-textarea' && htmlIframeArea()) {\n <span class=\"d-none\">\n </span>\n <iframe #iframeRef\n [style.maxHeight.px]=\"maxHeightTextArea()\"\n [style.height.px]=\"defaultHeight()\"\n [srcdoc]=\"htmlIframeArea()\"\n class=\"w-full\"\n frameBorder=\"0\"\n (load)=\"handlerOnLoad($event,iframeRef)\">\n </iframe>\n }\n @if (iconLeftClass()) {\n <libs_ui-components-popover [ignoreShowPopover]=\"!popoverContentIconLeft()\"\n [config]=\"{maxWidth:250,direction:'bottom',content:popoverContentIconLeft(),zIndex: zIndexPopoverContent()}\">\n <i [attr.tagInput]=\"tagInput()\"\n [class]=\"iconLeftClass() +' libs-ui-input-icon-left !text-[#9ca2ad]'\"\n (click)=\"handlerEventIconLeft($event,'click')\">\n </i>\n </libs_ui-components-popover>\n }\n <div #elementRightRef\n class=\"absolute flex items-center h-full top-0 right-0\">\n @if (value() && placeholder().trim() && keepPlaceholderOnly()) {\n <span [class]=\"'libs-ui-input-placeholder-custom libs-ui-font-h5r'\">\n {{ placeholder() }}\n </span>\n }\n @if (dataType() !=='string' && valueUpDownNumber()) {\n <libs_ui-components-buttons-sort class=\"mr-[12px]\"\n [disableAsc]=\"disableAsc()\"\n [disableDesc]=\"disableDesc()\"\n [attr.tagInput]=\"tagInput()\"\n [onlyEmit]=\"true\"\n [disable]=\"disable() || readonly()\"\n (outChange)=\"handlerChangeValue($event)\" />\n }\n @if (iconRightClass()) {\n <libs_ui-components-popover class=\"flex\"\n [ignoreShowPopover]=\"!popoverContentIconRight()\"\n [config]=\"{maxWidth:250,direction:'bottom',content:popoverContentIconRight(),zIndex: zIndexPopoverContent()}\">\n <i [attr.tagInput]=\"tagInput()\"\n [class.text-[#6a7383]]=\"(!disable() && !readonly()) || acceptOnlyClickIcon()\"\n [class.text-[#cdd0d6]]='((disable() || readonly()) && !acceptOnlyClickIcon()) || setIconRightColorSameColorDisableReadOnly()'\n [class]=\"iconRightClass() +' libs-ui-input-icon-right'\"\n (click)=\"handlerEventIconRight($event,'click')\">\n </i>\n </libs_ui-components-popover>\n }\n </div>\n <div class=\"libs-ui-input-text-bottom {{ classContainerBottomInput() }}\"\n [style.right.px]=\"(tagInput() === 'input' ? (elementRightRef.clientWidth || 0) : 0) + 8\">\n @if (templateLeftBottomInput(); as templateLeftBottomInput) {\n <ng-container *ngTemplateOutlet=\"templateLeftBottomInput\" />\n }\n <div #textCountRef\n class=\"text-[#9ca2ad] libs-ui-font-h7r\"\n [class.hidden]=\"dataType() !== 'string' || !showCount()\">\n <span>{{ countDisplay() }}</span>\n @if (maxLength()) {\n <span>/{{ maxLengthDisplay() }}</span>\n }\n </div>\n @if (templateRightBottomInput(); as templateRightBottomInput) {\n <ng-container *ngTemplateOutlet=\"templateRightBottomInput\" />\n }\n </div>\n</div>\n", styles: [".libs-ui-input{max-width:100%;border-radius:none;color:#071631;padding:7px 12px;background-color:#fff;background-clip:padding-box;min-height:32px}.libs-ui-input:not(.libs-ui-input-not-border){border:1px solid #e6e7ea;border-radius:4px}.libs-ui-input:focus{outline:none}.libs-ui-input:focus:not(:read-only):not(:disabled):not(.libs-ui-input-not-border){border:1px solid var(--libs-ui-color-light-1, #4e8cf7)}.libs-ui-input .libs-ui-input-valid-check{position:absolute;left:-27px}.libs-ui-input-not-border{border:transparent}libs-ui-components-button-sort{position:absolute;right:12px;top:0}libs-ui-components-button-sort[tagInput=textarea]{top:-10px}.libs-ui-input-icon-left{position:absolute;top:8px;left:16px;font-size:16px}.libs-ui-input-icon-right{font-size:16px;margin-right:8px}.libs-ui-input-text-bottom{display:flex;align-items:center;position:absolute;bottom:8px}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-credentials-auto-fill-button{margin-right:8px!important}textarea::-webkit-resizer{border:transparent;outline:none}.libs-ui-components-input-textarea-container:after{content:\"\";border-top:1.5px solid #9ca2ad;width:15px;transform:rotate(-45deg);background:transparent;position:absolute;right:0;bottom:8px;pointer-events:none;border-radius:25%}.libs-ui-components-input-textarea-container .libs-ui-components-input-textarea-container-resize-icon{border-top:1.5px solid #9ca2ad;width:7px;transform:rotate(-45deg);position:absolute;bottom:5px;right:1px;pointer-events:none;border-radius:25%}.libs-ui-input-placeholder-custom{color:#6a7378;margin-right:16px;background:inherit}\n"] }]
|
|
899
922
|
}], ctorParameters: () => [] });
|
|
900
923
|
|
|
901
924
|
/**
|