master-control 0.3.45 → 0.3.46
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/esm2022/lib/textbox/textbox.component.mjs +59 -213
- package/fesm2022/master-control.mjs +59 -213
- package/fesm2022/master-control.mjs.map +1 -1
- package/lib/textbox/textbox.component.d.ts +14 -26
- package/master-control-0.3.46.tgz +0 -0
- package/package.json +1 -1
- package/master-control-0.3.45.tgz +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable,
|
|
2
|
+
import { Injectable, input, EventEmitter, Component, Output, Directive, Inject, Input, HostListener, ViewChild, output, effect } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/input';
|
|
4
4
|
import { MatInputModule } from '@angular/material/input';
|
|
5
5
|
import * as i2 from '@angular/material/form-field';
|
|
@@ -320,252 +320,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
320
320
|
|
|
321
321
|
class TextboxComponent {
|
|
322
322
|
masterService;
|
|
323
|
-
|
|
324
|
-
constructor(masterService, kvDiffers) {
|
|
323
|
+
constructor(masterService) {
|
|
325
324
|
this.masterService = masterService;
|
|
326
|
-
this.kvDiffers = kvDiffers;
|
|
327
|
-
effect(() => {
|
|
328
|
-
const f = this.field();
|
|
329
|
-
if (!f)
|
|
330
|
-
return;
|
|
331
|
-
if (f.isInputMasked == null)
|
|
332
|
-
f.isInputMasked = false;
|
|
333
|
-
this.syncUIFromRaw();
|
|
334
|
-
});
|
|
335
325
|
}
|
|
326
|
+
inputValue = null;
|
|
336
327
|
field = input.required();
|
|
337
328
|
reactiveFormControlobject = input();
|
|
338
|
-
_onChange = () => { };
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
fieldDiffer;
|
|
344
|
-
cfgDiffer;
|
|
345
|
-
styleDiffer;
|
|
346
|
-
validatorsDiffer;
|
|
329
|
+
_onChange = (inputValue) => { };
|
|
330
|
+
_unTouched = () => { };
|
|
331
|
+
maskEnabled = true;
|
|
332
|
+
inputValueDeepCopy = null;
|
|
333
|
+
// Declare Output event emitter here (class level)
|
|
347
334
|
blur = new EventEmitter();
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
return;
|
|
352
|
-
if (!this.fieldDiffer)
|
|
353
|
-
this.fieldDiffer = this.kvDiffers.find(f).create();
|
|
354
|
-
let changed = !!this.fieldDiffer.diff(f);
|
|
355
|
-
if (f.configData) {
|
|
356
|
-
if (!this.cfgDiffer)
|
|
357
|
-
this.cfgDiffer = this.kvDiffers.find(f.configData).create();
|
|
358
|
-
if (this.cfgDiffer.diff(f.configData))
|
|
359
|
-
changed = true;
|
|
360
|
-
}
|
|
361
|
-
if (f.controlStyle) {
|
|
362
|
-
if (!this.styleDiffer)
|
|
363
|
-
this.styleDiffer = this.kvDiffers.find(f.controlStyle).create();
|
|
364
|
-
if (this.styleDiffer.diff(f.controlStyle))
|
|
365
|
-
changed = true;
|
|
366
|
-
}
|
|
367
|
-
if (f.validators) {
|
|
368
|
-
if (!this.validatorsDiffer)
|
|
369
|
-
this.validatorsDiffer = this.kvDiffers.find(f.validators).create();
|
|
370
|
-
if (this.validatorsDiffer.diff(f.validators))
|
|
371
|
-
changed = true;
|
|
372
|
-
}
|
|
373
|
-
if (changed) {
|
|
374
|
-
this.onFieldConfigChanged();
|
|
335
|
+
ngOnInit() {
|
|
336
|
+
if (!this.field().isInputMasked) {
|
|
337
|
+
this.field().isInputMasked = false;
|
|
375
338
|
}
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
const newRaw = this.applyCapitalization(oldRaw);
|
|
380
|
-
if (newRaw !== oldRaw) {
|
|
381
|
-
this.inputValueDeepCopy = newRaw;
|
|
382
|
-
const maskEnabled = !!this.field?.().isInputMasked;
|
|
383
|
-
const hasReactive = !!this.reactiveFormControlobject?.();
|
|
384
|
-
if (hasReactive && !maskEnabled) {
|
|
385
|
-
try {
|
|
386
|
-
this.reactiveFormControlobject().setValue(newRaw, { emitEvent: true });
|
|
387
|
-
}
|
|
388
|
-
catch {
|
|
389
|
-
this._onChange(newRaw);
|
|
390
|
-
}
|
|
391
|
-
}
|
|
392
|
-
else {
|
|
393
|
-
this._onChange(newRaw);
|
|
394
|
-
}
|
|
339
|
+
if (this.field()?.configData?.isTextCapitalized && this.field().isInputMasked) {
|
|
340
|
+
this.inputValue = this.field()?.configData?.isTextCapitalized;
|
|
341
|
+
this.checkinputMasked();
|
|
395
342
|
}
|
|
396
|
-
this.syncUIFromRaw();
|
|
397
343
|
}
|
|
398
344
|
writeValue(obj) {
|
|
399
|
-
|
|
400
|
-
const capitalized = this.applyCapitalization(raw);
|
|
401
|
-
this.inputValueDeepCopy = capitalized;
|
|
402
|
-
this.syncUIFromRaw();
|
|
345
|
+
this.inputValue = !this.masterService.checkIfValueIsEmpty(obj) ? obj : '';
|
|
403
346
|
}
|
|
347
|
+
;
|
|
404
348
|
registerOnChange(fn) {
|
|
405
349
|
this._onChange = fn;
|
|
406
350
|
}
|
|
351
|
+
;
|
|
407
352
|
registerOnTouched(fn) {
|
|
408
|
-
this.
|
|
409
|
-
}
|
|
410
|
-
setDisabledState(isDisabled) {
|
|
411
|
-
const f = this.field?.();
|
|
412
|
-
if (f)
|
|
413
|
-
f.isDisable = !!isDisabled;
|
|
414
|
-
}
|
|
415
|
-
onBeforeInput(event) {
|
|
416
|
-
const target = event.target;
|
|
417
|
-
const start = target?.selectionStart ?? 0;
|
|
418
|
-
const end = target?.selectionEnd ?? start;
|
|
419
|
-
this.lastBeforeInput = {
|
|
420
|
-
type: event.inputType,
|
|
421
|
-
data: event.data,
|
|
422
|
-
start,
|
|
423
|
-
end,
|
|
424
|
-
};
|
|
353
|
+
this._unTouched = fn;
|
|
425
354
|
}
|
|
355
|
+
;
|
|
356
|
+
setDisabledState(isDisabled) { }
|
|
357
|
+
;
|
|
426
358
|
onInputChange(event) {
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
newVal = this.applyCapitalization(newVal);
|
|
438
|
-
if (cfg?.inputType === 'number') {
|
|
439
|
-
const min = this.normalizeNumber(cfg?.minValue);
|
|
440
|
-
const max = this.normalizeNumber(cfg?.maxValue);
|
|
441
|
-
const num = Number(newVal);
|
|
442
|
-
if (!Number.isNaN(num)) {
|
|
443
|
-
if (min !== null && num < min)
|
|
444
|
-
newVal = String(min);
|
|
445
|
-
if (max !== null && num > max)
|
|
446
|
-
newVal = String(max);
|
|
447
|
-
}
|
|
448
|
-
}
|
|
449
|
-
this.inputValueDeepCopy = newVal;
|
|
450
|
-
const maskEnabled = !!f?.isInputMasked;
|
|
451
|
-
const hasReactive = !!this.reactiveFormControlobject?.();
|
|
452
|
-
if (hasReactive && !maskEnabled) {
|
|
453
|
-
try {
|
|
454
|
-
this.reactiveFormControlobject().setValue(newVal, { emitEvent: true });
|
|
455
|
-
}
|
|
456
|
-
catch {
|
|
457
|
-
this._onChange(newVal);
|
|
359
|
+
let min = null;
|
|
360
|
+
let max = null;
|
|
361
|
+
let value = event.target.value;
|
|
362
|
+
if (!this.masterService.checkIfValueIsEmpty(this.field()?.configData) && !this.masterService.checkIfValueIsEmpty(this.field()?.configData?.minValue) && !this.masterService.checkIfValueIsEmpty(this.field()?.configData?.maxValue)) {
|
|
363
|
+
min = parseInt(this.field()?.configData?.minValue);
|
|
364
|
+
max = parseInt(this.field()?.configData?.maxValue);
|
|
365
|
+
}
|
|
366
|
+
if (!this.masterService.checkIfValueIsEmpty(this.field()?.configData?.inputType) && this.field()?.configData?.inputType === 'number' && !this.masterService.checkIfValueIsEmpty(max) && !this.masterService.checkIfValueIsEmpty(min)) {
|
|
367
|
+
if (parseInt(value) < min || parseInt(value) > max) {
|
|
368
|
+
event.target.value = parseInt(event.target.value.toString().slice(0, -1));
|
|
458
369
|
}
|
|
459
370
|
}
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
const display = maskEnabled ? this.maskInput(newVal) : newVal;
|
|
464
|
-
this.inputValue = display;
|
|
465
|
-
const nextCaret = this.computeNextCaret(intent, newVal.length);
|
|
466
|
-
if (target.value !== display) {
|
|
467
|
-
target.value = display;
|
|
468
|
-
try {
|
|
469
|
-
target.setSelectionRange(nextCaret, nextCaret);
|
|
470
|
-
}
|
|
471
|
-
catch {
|
|
472
|
-
console.log(this.inputValue);
|
|
473
|
-
}
|
|
474
|
-
}
|
|
475
|
-
this.lastBeforeInput = null;
|
|
371
|
+
this.inputValue = this.field()?.configData?.isTextCapitalized ? (event.target.value).toUpperCase() : event.target.value;
|
|
372
|
+
this.inputValueDeepCopy = JSON.parse(JSON.stringify(this.inputValue));
|
|
373
|
+
this._onChange(this.inputValue);
|
|
476
374
|
}
|
|
477
375
|
onInputBlur(event) {
|
|
478
|
-
this.
|
|
376
|
+
this._unTouched();
|
|
479
377
|
this.blur.emit(event);
|
|
378
|
+
this.checkinputMasked();
|
|
480
379
|
}
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
const f = this.field?.();
|
|
485
|
-
const maskEnabled = !!f?.isInputMasked;
|
|
486
|
-
const raw = this.inputValueDeepCopy ?? '';
|
|
487
|
-
this.inputValue = maskEnabled ? this.maskInput(raw) : raw;
|
|
488
|
-
}
|
|
489
|
-
applyCapitalization(v) {
|
|
490
|
-
const f = this.field?.();
|
|
491
|
-
return f?.configData?.isTextCapitalized ? v.toUpperCase() : v;
|
|
492
|
-
}
|
|
493
|
-
normalizeNumber(v) {
|
|
494
|
-
if (this.masterService.checkIfValueIsEmpty(v))
|
|
495
|
-
return null;
|
|
496
|
-
const n = Number(v);
|
|
497
|
-
return Number.isNaN(n) ? null : n;
|
|
498
|
-
}
|
|
499
|
-
maskInput(value) {
|
|
500
|
-
if (!value || value.length < 3)
|
|
501
|
-
return value || '';
|
|
502
|
-
return value[0] + 'X'.repeat(value.length - 2) + value[value.length - 1];
|
|
503
|
-
}
|
|
504
|
-
applyIntentToRaw(raw, intent) {
|
|
505
|
-
const { type, data, start, end } = intent;
|
|
506
|
-
const s = Math.max(0, Math.min(start, raw.length));
|
|
507
|
-
const e = Math.max(s, Math.min(end, raw.length));
|
|
508
|
-
switch (type) {
|
|
509
|
-
case 'insertText': {
|
|
510
|
-
const insert = data ?? '';
|
|
511
|
-
return raw.slice(0, s) + insert + raw.slice(e);
|
|
512
|
-
}
|
|
513
|
-
case 'insertFromPaste': {
|
|
514
|
-
const paste = data ?? '';
|
|
515
|
-
return raw.slice(0, s) + paste + raw.slice(e);
|
|
516
|
-
}
|
|
517
|
-
case 'deleteContentBackward': {
|
|
518
|
-
if (s !== e)
|
|
519
|
-
return raw.slice(0, s) + raw.slice(e);
|
|
520
|
-
const idx = Math.max(0, s - 1);
|
|
521
|
-
return raw.slice(0, idx) + raw.slice(e);
|
|
522
|
-
}
|
|
523
|
-
case 'deleteContentForward': {
|
|
524
|
-
if (s !== e)
|
|
525
|
-
return raw.slice(0, s) + raw.slice(e);
|
|
526
|
-
return raw.slice(0, s) + raw.slice(Math.min(e + 1, raw.length));
|
|
527
|
-
}
|
|
528
|
-
case 'deleteByCut': {
|
|
529
|
-
return raw.slice(0, s) + raw.slice(e);
|
|
530
|
-
}
|
|
531
|
-
default:
|
|
532
|
-
return raw;
|
|
380
|
+
checkinputMasked() {
|
|
381
|
+
if (!this.field().isInputMasked) {
|
|
382
|
+
this.inputValue = this.inputValueDeepCopy;
|
|
533
383
|
}
|
|
384
|
+
return this.field().isInputMasked ? this.maskInput(this.inputValue) : this.inputValue;
|
|
534
385
|
}
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
case 'insertText':
|
|
539
|
-
case 'insertFromPaste':
|
|
540
|
-
return start + (data?.length ?? 0);
|
|
541
|
-
case 'deleteContentBackward':
|
|
542
|
-
return Math.max(0, start - (start === end ? 1 : 0));
|
|
543
|
-
case 'deleteContentForward':
|
|
544
|
-
case 'deleteByCut':
|
|
545
|
-
return start;
|
|
546
|
-
default:
|
|
547
|
-
return Math.max(0, Math.min(start, newLen));
|
|
386
|
+
maskInput(value) {
|
|
387
|
+
if (value.length > 3) {
|
|
388
|
+
this.inputValue = value[0] + 'X'.repeat(value.length - 2) + value[value.length - 1];
|
|
548
389
|
}
|
|
549
390
|
}
|
|
550
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxComponent, deps: [{ token: MasterControlService }
|
|
391
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
551
392
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: TextboxComponent, isStandalone: true, selector: "lib-textbox", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [
|
|
552
393
|
{
|
|
553
394
|
provide: NG_VALUE_ACCESSOR,
|
|
554
|
-
useExisting:
|
|
555
|
-
multi: true
|
|
556
|
-
}
|
|
557
|
-
], ngImport: i0, template: "<label\r\n class=\"field-lable\"\r\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n
|
|
395
|
+
useExisting: TextboxComponent,
|
|
396
|
+
multi: true
|
|
397
|
+
}
|
|
398
|
+
], ngImport: i0, template: "<label\r\n class=\"field-lable\"\r\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n >*</span\r\n ></label\r\n>\r\n<mat-form-field\r\n class=\"w-100\"\r\n appearance=\"outline\"\r\n *ngIf=\"field() && field()?.isVisible\"\r\n [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n'--custom-width': field()?.controlStyle?.width ,\r\n}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.configData?.inputType ? field()?.configData?.inputType : field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [maxLength]=\"field()?.validators?.maxLength\"\r\n [minLength]=\"field()?.validators?.minLength\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n }@else {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.configData?.inputType ? field()?.configData?.inputType : field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [maxLength]=\"field()?.validators?.maxLength\"\r\n [minLength]=\"field()?.validators?.minLength\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n <mat-hint *ngIf=\"field()?.configData?.helperText\">{{field()?.configData?.helperText}}</mat-hint>\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\r\n </mat-error>\r\n <!-- <mat-error *ngIf=\"field()?.configData?.isInvalidPattern && !masterService.checkIfValueIsEmpty(field()?.validators?.patternMessage)\">\r\n {{ field()?.validators?.patternMessage }}\r\n </mat-error> -->\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}.error-message{color:red}*{font-family:mulish!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{font-size:14px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
558
399
|
}
|
|
559
400
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxComponent, decorators: [{
|
|
560
401
|
type: Component,
|
|
561
|
-
args: [{ selector: 'lib-textbox', standalone: true, imports: [
|
|
402
|
+
args: [{ selector: 'lib-textbox', standalone: true, imports: [
|
|
403
|
+
MatInputModule,
|
|
404
|
+
MatFormFieldModule,
|
|
405
|
+
CommonModule,
|
|
406
|
+
ReactiveFormsModule
|
|
407
|
+
], providers: [
|
|
562
408
|
{
|
|
563
409
|
provide: NG_VALUE_ACCESSOR,
|
|
564
|
-
useExisting:
|
|
565
|
-
multi: true
|
|
566
|
-
}
|
|
567
|
-
], template: "<label\r\n class=\"field-lable\"\r\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n
|
|
568
|
-
}], ctorParameters: () => [{ type: MasterControlService }
|
|
410
|
+
useExisting: TextboxComponent,
|
|
411
|
+
multi: true
|
|
412
|
+
}
|
|
413
|
+
], template: "<label\r\n class=\"field-lable\"\r\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n >*</span\r\n ></label\r\n>\r\n<mat-form-field\r\n class=\"w-100\"\r\n appearance=\"outline\"\r\n *ngIf=\"field() && field()?.isVisible\"\r\n [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n'--custom-width': field()?.controlStyle?.width ,\r\n}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.configData?.inputType ? field()?.configData?.inputType : field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [maxLength]=\"field()?.validators?.maxLength\"\r\n [minLength]=\"field()?.validators?.minLength\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n }@else {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.configData?.inputType ? field()?.configData?.inputType : field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [maxLength]=\"field()?.validators?.maxLength\"\r\n [minLength]=\"field()?.validators?.minLength\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n <mat-hint *ngIf=\"field()?.configData?.helperText\">{{field()?.configData?.helperText}}</mat-hint>\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\r\n </mat-error>\r\n <!-- <mat-error *ngIf=\"field()?.configData?.isInvalidPattern && !masterService.checkIfValueIsEmpty(field()?.validators?.patternMessage)\">\r\n {{ field()?.validators?.patternMessage }}\r\n </mat-error> -->\r\n</mat-form-field>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}.\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:5px}.error-message{color:red}*{font-family:mulish!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{font-size:14px!important}\n"] }]
|
|
414
|
+
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
569
415
|
type: Output
|
|
570
416
|
}] } });
|
|
571
417
|
|