master-control 0.2.78 → 0.2.79
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/add-document/add-document.component.mjs +3 -3
- package/esm2022/lib/amount-textbox/amount-textbox.component.mjs +3 -3
- package/esm2022/lib/autocomplete/autocomplete.component.mjs +3 -3
- package/esm2022/lib/dob/dob.component.mjs +3 -3
- package/esm2022/lib/info-textbox/info-textbox.component.mjs +3 -3
- package/esm2022/lib/multiple-select/multiple-select.component.mjs +3 -3
- package/esm2022/lib/radio/radio.component.mjs +13 -3
- package/esm2022/lib/search-multi-select/search-multi-select.component.mjs +3 -3
- package/esm2022/lib/tag-mob-number/tag-mob-number.component.mjs +3 -3
- package/esm2022/lib/textbox-with-image/textbox-with-image.component.mjs +3 -3
- package/esm2022/lib/textbox-with-text/textbox-with-text.component.mjs +3 -3
- package/fesm2022/master-control.mjs +32 -22
- package/fesm2022/master-control.mjs.map +1 -1
- package/lib/radio/radio.component.d.ts +1 -0
- package/master-control-0.2.79.tgz +0 -0
- package/package.json +2 -2
- package/master-control-0.2.78.tgz +0 -0
|
@@ -508,6 +508,16 @@ class RadioComponent {
|
|
|
508
508
|
this.onChange(newValue);
|
|
509
509
|
this.onTouched();
|
|
510
510
|
this.change.emit(newValue);
|
|
511
|
+
console.log('Radio group changed:', newValue);
|
|
512
|
+
}
|
|
513
|
+
toggleRadio(value, event) {
|
|
514
|
+
event.preventDefault();
|
|
515
|
+
event.stopPropagation();
|
|
516
|
+
this.inputValue = value;
|
|
517
|
+
if (this.reactiveFormControlobject && this.reactiveFormControlobject.setValue) {
|
|
518
|
+
this.reactiveFormControlobject.setValue(value);
|
|
519
|
+
}
|
|
520
|
+
this.onRadioGroupChange({ source: {}, value: value });
|
|
511
521
|
}
|
|
512
522
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
513
523
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: RadioComponent, isStandalone: true, selector: "lib-radio", inputs: { reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null }, field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { change: "change" }, providers: [
|
|
@@ -516,7 +526,7 @@ class RadioComponent {
|
|
|
516
526
|
useExisting: RadioComponent,
|
|
517
527
|
multi: true
|
|
518
528
|
}
|
|
519
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n }\"> {{field()?.label}} <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span> </label>\r\n @if(reactiveFormControlobject()) {\r\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n class=\"radio-btn-group radio-btn-gender\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n (change)=\"onRadioGroupChange($event)\"\r\n >\r\n <div\r\n class=\"card radio-card-gender py-auto px-1\"\r\n *ngFor=\"let data of field()?.options\"\r\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n [ngStyle]=\"{\r\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n }\"\r\n >\r\n <mat-radio-button\r\n style=\"min-width: 72px; text-align: center;\"\r\n class=\"radioButtonGender\"\r\n [value]=\"data.value\"\r\n >\r\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n '--radio-button-font-color': field()?.controlStyle?.color,\r\n }\">{{ data.label }}\r\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n </span>\r\n </mat-radio-button>\r\n </div>\r\n </mat-radio-group>\r\n }@else {\r\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n class=\"radio-btn-group radio-btn-gender\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [value]=\"inputValue\"\r\n (change)=\"onRadioGroupChange($event)\"\r\n >\r\n <div\r\n class=\"card radio-card-gender py-auto px-1\"\r\n style=\"width: 100% !important; min-width: fit-content !important;\"\r\n *ngFor=\"let data of field()?.options\"\r\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n [ngStyle]=\"{\r\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n }\"\r\n >\r\n <mat-radio-button\r\n style=\"min-width: 72px; text-align: center;\"\r\n class=\"radioButtonGender\"\r\n [value]=\"data.value\"\r\n >\r\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n '--radio-button-font-color': field()?.controlStyle?.color,\r\n }\">{{ data.label }}\r\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n </span>\r\n </mat-radio-button>\r\n </div>\r\n </mat-radio-group>\r\n }\r\n <div class=\"error-message\" *ngIf=\"false\">\r\n {{field()?.validators?.patternMessage}}.\r\n</div>\r\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:.
|
|
529
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n }\"> {{field()?.label}} <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span> </label>\r\n @if(reactiveFormControlobject()) {\r\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n class=\"radio-btn-group radio-btn-gender\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n (change)=\"onRadioGroupChange($event)\"\r\n >\r\n <div\r\n class=\"card radio-card-gender py-auto px-1\"\r\n *ngFor=\"let data of field()?.options\"\r\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n (click)=\"toggleRadio(data.value, $event)\"\r\n [ngStyle]=\"{\r\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n }\"\r\n >\r\n <mat-radio-button\r\n style=\"min-width: 72px; text-align: center;\"\r\n class=\"radioButtonGender\"\r\n [value]=\"data.value\"\r\n >\r\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n '--radio-button-font-color': field()?.controlStyle?.color,\r\n }\">{{ data.label }}\r\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n </span>\r\n </mat-radio-button>\r\n </div>\r\n </mat-radio-group>\r\n }@else {\r\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n class=\"radio-btn-group radio-btn-gender\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [value]=\"inputValue\"\r\n (change)=\"onRadioGroupChange($event)\"\r\n >\r\n <div\r\n class=\"card radio-card-gender py-auto px-1\"\r\n style=\"width: 100% !important; min-width: fit-content !important;\"\r\n *ngFor=\"let data of field()?.options\"\r\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n (click)=\"toggleRadio(data.value, $event)\"\r\n [ngStyle]=\"{\r\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n }\"\r\n >\r\n <mat-radio-button\r\n style=\"min-width: 72px; text-align: center;\"\r\n class=\"radioButtonGender\"\r\n [value]=\"data.value\"\r\n >\r\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n '--radio-button-font-color': field()?.controlStyle?.color,\r\n }\">{{ data.label }}\r\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n </span>\r\n </mat-radio-button>\r\n </div>\r\n </mat-radio-group>\r\n }\r\n <div class=\"error-message\" *ngIf=\"false\">\r\n {{field()?.validators?.patternMessage}}.\r\n</div>\r\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.radio-btn-group{display:flex;align-items:flex-start;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$1.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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.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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }] });
|
|
520
530
|
}
|
|
521
531
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
|
|
522
532
|
type: Component,
|
|
@@ -531,7 +541,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
531
541
|
useExisting: RadioComponent,
|
|
532
542
|
multi: true
|
|
533
543
|
}
|
|
534
|
-
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n }\"> {{field()?.label}} <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span> </label>\r\n @if(reactiveFormControlobject()) {\r\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n class=\"radio-btn-group radio-btn-gender\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n (change)=\"onRadioGroupChange($event)\"\r\n >\r\n <div\r\n class=\"card radio-card-gender py-auto px-1\"\r\n *ngFor=\"let data of field()?.options\"\r\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n [ngStyle]=\"{\r\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n }\"\r\n >\r\n <mat-radio-button\r\n style=\"min-width: 72px; text-align: center;\"\r\n class=\"radioButtonGender\"\r\n [value]=\"data.value\"\r\n >\r\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n '--radio-button-font-color': field()?.controlStyle?.color,\r\n }\">{{ data.label }}\r\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n </span>\r\n </mat-radio-button>\r\n </div>\r\n </mat-radio-group>\r\n }@else {\r\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n class=\"radio-btn-group radio-btn-gender\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [value]=\"inputValue\"\r\n (change)=\"onRadioGroupChange($event)\"\r\n >\r\n <div\r\n class=\"card radio-card-gender py-auto px-1\"\r\n style=\"width: 100% !important; min-width: fit-content !important;\"\r\n *ngFor=\"let data of field()?.options\"\r\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n [ngStyle]=\"{\r\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n }\"\r\n >\r\n <mat-radio-button\r\n style=\"min-width: 72px; text-align: center;\"\r\n class=\"radioButtonGender\"\r\n [value]=\"data.value\"\r\n >\r\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n '--radio-button-font-color': field()?.controlStyle?.color,\r\n }\">{{ data.label }}\r\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n </span>\r\n </mat-radio-button>\r\n </div>\r\n </mat-radio-group>\r\n }\r\n <div class=\"error-message\" *ngIf=\"false\">\r\n {{field()?.validators?.patternMessage}}.\r\n</div>\r\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:.
|
|
544
|
+
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n }\"> {{field()?.label}} <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span> </label>\r\n @if(reactiveFormControlobject()) {\r\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n class=\"radio-btn-group radio-btn-gender\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n (change)=\"onRadioGroupChange($event)\"\r\n >\r\n <div\r\n class=\"card radio-card-gender py-auto px-1\"\r\n *ngFor=\"let data of field()?.options\"\r\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n (click)=\"toggleRadio(data.value, $event)\"\r\n [ngStyle]=\"{\r\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n }\"\r\n >\r\n <mat-radio-button\r\n style=\"min-width: 72px; text-align: center;\"\r\n class=\"radioButtonGender\"\r\n [value]=\"data.value\"\r\n >\r\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n '--radio-button-font-color': field()?.controlStyle?.color,\r\n }\">{{ data.label }}\r\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n </span>\r\n </mat-radio-button>\r\n </div>\r\n </mat-radio-group>\r\n }@else {\r\n <mat-radio-group class=\"w-100\" *ngIf=\"field() && field()?.isVisible\"\r\n class=\"radio-btn-group radio-btn-gender\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [value]=\"inputValue\"\r\n (change)=\"onRadioGroupChange($event)\"\r\n >\r\n <div\r\n class=\"card radio-card-gender py-auto px-1\"\r\n style=\"width: 100% !important; min-width: fit-content !important;\"\r\n *ngFor=\"let data of field()?.options\"\r\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable}\"\r\n (click)=\"toggleRadio(data.value, $event)\"\r\n [ngStyle]=\"{\r\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\r\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\r\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\r\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\r\n }\"\r\n >\r\n <mat-radio-button\r\n style=\"min-width: 72px; text-align: center;\"\r\n class=\"radioButtonGender\"\r\n [value]=\"data.value\"\r\n >\r\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\r\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\r\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\r\n '--radio-button-font-color': field()?.controlStyle?.color,\r\n }\">{{ data.label }}\r\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\r\n </span>\r\n </mat-radio-button>\r\n </div>\r\n </mat-radio-group>\r\n }\r\n <div class=\"error-message\" *ngIf=\"false\">\r\n {{field()?.validators?.patternMessage}}.\r\n</div>\r\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.radio-btn-group{display:flex;align-items:flex-start;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;border-radius:var(--radio-button-border-radius, 6px)}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;border:1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));pointer-events:none;cursor:none}\n"] }]
|
|
535
545
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
|
|
536
546
|
type: Output
|
|
537
547
|
}] } });
|
|
@@ -768,7 +778,7 @@ class DobComponent {
|
|
|
768
778
|
deps: []
|
|
769
779
|
},
|
|
770
780
|
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
|
|
771
|
-
], ngImport: i0, template: "<label\r\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n class=\"field-lable\"\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-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\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-bg-color': field()?.controlStyle?.background ,\r\n '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n }\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n type=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n [matDatepicker]=\"picker\"\r\n (keyup)=\"dateDivisionFormat($event)\"\r\n [disabled]=\"field()?.isDisable\"\r\n (dateChange)=\"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=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n [matDatepicker]=\"picker\"\r\n (keyup)=\"dateDivisionFormat($event)\"\r\n [disabled]=\"field()?.isDisable\"\r\n (dateChange)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\" *ngIf=\"false\">\r\n <img\r\n src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\r\n style=\"width: 16px\"\r\n matDatepickerToggleIcon\r\n />\r\n </mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\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=\"field()?.configData?.isInvalid\">\r\n {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size
|
|
781
|
+
], ngImport: i0, template: "<label\r\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n class=\"field-lable\"\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-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\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-bg-color': field()?.controlStyle?.background ,\r\n '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n }\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n type=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n [matDatepicker]=\"picker\"\r\n (keyup)=\"dateDivisionFormat($event)\"\r\n [disabled]=\"field()?.isDisable\"\r\n (dateChange)=\"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=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n [matDatepicker]=\"picker\"\r\n (keyup)=\"dateDivisionFormat($event)\"\r\n [disabled]=\"field()?.isDisable\"\r\n (dateChange)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\" *ngIf=\"false\">\r\n <img\r\n src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\r\n style=\"width: 16px\"\r\n matDatepickerToggleIcon\r\n />\r\n </mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\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=\"field()?.configData?.isInvalid\">\r\n {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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}*{font-family:mulish!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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: MatDatepickerModule }, { kind: "component", type: i5.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i5.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i5.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i5.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "ngmodule", type: MomentDateModule }, { 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"] }] });
|
|
772
782
|
}
|
|
773
783
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DobComponent, decorators: [{
|
|
774
784
|
type: Component,
|
|
@@ -784,7 +794,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
784
794
|
deps: []
|
|
785
795
|
},
|
|
786
796
|
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
|
|
787
|
-
], template: "<label\r\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n class=\"field-lable\"\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-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\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-bg-color': field()?.controlStyle?.background ,\r\n '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n }\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n type=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n [matDatepicker]=\"picker\"\r\n (keyup)=\"dateDivisionFormat($event)\"\r\n [disabled]=\"field()?.isDisable\"\r\n (dateChange)=\"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=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n [matDatepicker]=\"picker\"\r\n (keyup)=\"dateDivisionFormat($event)\"\r\n [disabled]=\"field()?.isDisable\"\r\n (dateChange)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\" *ngIf=\"false\">\r\n <img\r\n src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\r\n style=\"width: 16px\"\r\n matDatepickerToggleIcon\r\n />\r\n </mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\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=\"field()?.configData?.isInvalid\">\r\n {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size
|
|
797
|
+
], template: "<label\r\n *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n class=\"field-lable\"\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-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\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-bg-color': field()?.controlStyle?.background ,\r\n '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n }\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n type=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n [matDatepicker]=\"picker\"\r\n (keyup)=\"dateDivisionFormat($event)\"\r\n [disabled]=\"field()?.isDisable\"\r\n (dateChange)=\"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=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n [matDatepicker]=\"picker\"\r\n (keyup)=\"dateDivisionFormat($event)\"\r\n [disabled]=\"field()?.isDisable\"\r\n (dateChange)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\" *ngIf=\"false\">\r\n <img\r\n src=\"https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/date_picker_icon.svg\"\r\n style=\"width: 16px\"\r\n matDatepickerToggleIcon\r\n />\r\n </mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\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=\"field()?.configData?.isInvalid\">\r\n {{ field()?.validators?.patternMessage }}.\r\n</div>\r\n", styles: [".field-lable{font-size:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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}*{font-family:mulish!important}\n"] }]
|
|
788
798
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
789
799
|
type: Output
|
|
790
800
|
}] } });
|
|
@@ -1113,7 +1123,7 @@ class AutocompleteComponent {
|
|
|
1113
1123
|
useExisting: AutocompleteComponent,
|
|
1114
1124
|
multi: true
|
|
1115
1125
|
}
|
|
1116
|
-
], ngImport: i0, template: " <label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n <mat-form-field class=\"w-100\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\" [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-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n }\">\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n type=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [matAutocomplete]=\"auto\"\r\n [ngModel]=\"inputValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (blur)=\"onBlur()\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n }@else {\r\n <input\r\n matInput\r\n type=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [matAutocomplete]=\"auto\"\r\n [ngModel]=\"inputValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (blur)=\"onBlur($event)\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n />\r\n }\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event.option.value)\">\r\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\r\n {{ option.label }}\r\n </mat-option>\r\n</mat-autocomplete>\r\n <mat-error>\r\n {{ field().validators.requiredMessage }}\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:10px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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 .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: 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: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1126
|
+
], ngImport: i0, template: " <label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n <mat-form-field class=\"w-100\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\" [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-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n }\">\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n type=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [matAutocomplete]=\"auto\"\r\n [ngModel]=\"inputValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (blur)=\"onBlur()\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n }@else {\r\n <input\r\n matInput\r\n type=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [matAutocomplete]=\"auto\"\r\n [ngModel]=\"inputValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (blur)=\"onBlur($event)\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n />\r\n }\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event.option.value)\">\r\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\r\n {{ option.label }}\r\n </mat-option>\r\n</mat-autocomplete>\r\n <mat-error>\r\n {{ field().validators.requiredMessage }}\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:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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 .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: 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: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i5$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1117
1127
|
}
|
|
1118
1128
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
1119
1129
|
type: Component,
|
|
@@ -1131,7 +1141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1131
1141
|
useExisting: AutocompleteComponent,
|
|
1132
1142
|
multi: true
|
|
1133
1143
|
}
|
|
1134
|
-
], template: " <label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n <mat-form-field class=\"w-100\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\" [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-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n }\">\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n type=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [matAutocomplete]=\"auto\"\r\n [ngModel]=\"inputValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (blur)=\"onBlur()\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n }@else {\r\n <input\r\n matInput\r\n type=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [matAutocomplete]=\"auto\"\r\n [ngModel]=\"inputValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (blur)=\"onBlur($event)\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n />\r\n }\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event.option.value)\">\r\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\r\n {{ option.label }}\r\n </mat-option>\r\n</mat-autocomplete>\r\n <mat-error>\r\n {{ field().validators.requiredMessage }}\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
|
|
1144
|
+
], template: " <label *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" class=\"field-lable\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n <mat-form-field class=\"w-100\" appearance=\"outline\" *ngIf=\"field() && field()?.isVisible\" [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-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n }\">\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n type=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [matAutocomplete]=\"auto\"\r\n [ngModel]=\"inputValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (blur)=\"onBlur()\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n }@else {\r\n <input\r\n matInput\r\n type=\"text\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [matAutocomplete]=\"auto\"\r\n [ngModel]=\"inputValue\"\r\n (ngModelChange)=\"onInputChange($event)\"\r\n (blur)=\"onBlur($event)\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n />\r\n }\r\n <mat-autocomplete autoActiveFirstOption #auto=\"matAutocomplete\" [displayWith]=\"displayFn\" (optionSelected)=\"onOptionSelected($event.option.value)\">\r\n <mat-option *ngFor=\"let option of filteredOptions\" [value]=\"option\">\r\n {{ option.label }}\r\n </mat-option>\r\n</mat-autocomplete>\r\n <mat-error>\r\n {{ field().validators.requiredMessage }}\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:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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 .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}\n"] }]
|
|
1135
1145
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
1136
1146
|
type: Output
|
|
1137
1147
|
}] } });
|
|
@@ -1222,7 +1232,7 @@ class MultipleSelectComponent {
|
|
|
1222
1232
|
useExisting: MultipleSelectComponent,
|
|
1223
1233
|
multi: true
|
|
1224
1234
|
}
|
|
1225
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n<mat-form-field\r\n appearance=\"outline\"\r\n class=\"input-full-width full-width w-100 multi-select\"\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}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [value]=\"inputValue\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n (selectionChange)=\"selectionChanged($event)\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n >\r\n <mat-select-trigger>\r\n <!-- <mat-chip-listbox>\r\n @for (option of visibleChip; track option) {\r\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-listbox> -->\r\n <mat-chip-grid>\r\n @for (option of inputValue; track option) {\r\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip-row>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-grid>\r\n </mat-select-trigger>\r\n @for (option of field()?.options; track option.label) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n }@else {\r\n <mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [value]=\"inputValue\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n (selectionChange)=\"selectionChanged($event)\"\r\n >\r\n <mat-select-trigger>\r\n <mat-chip-grid>\r\n @for (option of inputValue; track option) {\r\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option.label }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip-row>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-grid>\r\n </mat-select-trigger>\r\n @for (option of field()?.options; track option.label) {\r\n <mat-option [value]=\"option\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n }\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n", styles: [".field-lable{font-size:.625rem;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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 .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{background-color:#fff9e5!important}::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:12px!important;font-weight:400!important;color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:12px!important;width:12px!important;font-size:12px!important}::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{padding-right:0!important}::ng-deep .mat-mdc-standard-chip{--mdc-chip-outline-width: 1px !important;border-radius:18px!important;--mdc-chip-container-shape-radius: 19px !important;--mdc-chip-outline-color: #ffbb00 !important}::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding:9px 0 7px}::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{height:37px}::ng-deep .mat-mdc-chip{height:24px!important}::ng-deep .mat-mdc-optgroup-label{display:contents!important}::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .multiselect-search .mdc-text-field__input{color:#444!important}::ng-deep .multiselect-search .mdc-line-ripple--active{opacity:0!important;transform:none!important}::ng-deep .mdc-line-ripple{opacity:0!important;transform:none!important}::ng-deep .mdc-evolution-chip-set__chips{flex-flow:unset!important;overflow:scroll!important;scrollbar-width:none!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.material-icons{font-family:Material Icons!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{margin:2px 0 7px 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatChipsModule }, { kind: "component", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1235
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n<mat-form-field\r\n appearance=\"outline\"\r\n class=\"input-full-width full-width w-100 multi-select\"\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}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [value]=\"inputValue\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n (selectionChange)=\"selectionChanged($event)\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n >\r\n <mat-select-trigger>\r\n <!-- <mat-chip-listbox>\r\n @for (option of visibleChip; track option) {\r\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-listbox> -->\r\n <mat-chip-grid>\r\n @for (option of inputValue; track option) {\r\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip-row>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-grid>\r\n </mat-select-trigger>\r\n @for (option of field()?.options; track option.label) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n }@else {\r\n <mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [value]=\"inputValue\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n (selectionChange)=\"selectionChanged($event)\"\r\n >\r\n <mat-select-trigger>\r\n <mat-chip-grid>\r\n @for (option of inputValue; track option) {\r\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option.label }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip-row>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-grid>\r\n </mat-select-trigger>\r\n @for (option of field()?.options; track option.label) {\r\n <mat-option [value]=\"option\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n }\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n", styles: [".field-lable{font-size:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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 .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{background-color:#fff9e5!important}::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:12px!important;font-weight:400!important;color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:12px!important;width:12px!important;font-size:12px!important}::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{padding-right:0!important}::ng-deep .mat-mdc-standard-chip{--mdc-chip-outline-width: 1px !important;border-radius:18px!important;--mdc-chip-container-shape-radius: 19px !important;--mdc-chip-outline-color: #ffbb00 !important}::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding:9px 0 7px}::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{height:37px}::ng-deep .mat-mdc-chip{height:24px!important}::ng-deep .mat-mdc-optgroup-label{display:contents!important}::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .multiselect-search .mdc-text-field__input{color:#444!important}::ng-deep .multiselect-search .mdc-line-ripple--active{opacity:0!important;transform:none!important}::ng-deep .mdc-line-ripple{opacity:0!important;transform:none!important}::ng-deep .mdc-evolution-chip-set__chips{flex-flow:unset!important;overflow:scroll!important;scrollbar-width:none!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.material-icons{font-family:Material Icons!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{margin:2px 0 7px 8px}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { 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: MatChipsModule }, { kind: "component", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i6.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i6.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1226
1236
|
}
|
|
1227
1237
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultipleSelectComponent, decorators: [{
|
|
1228
1238
|
type: Component,
|
|
@@ -1239,7 +1249,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1239
1249
|
useExisting: MultipleSelectComponent,
|
|
1240
1250
|
multi: true
|
|
1241
1251
|
}
|
|
1242
|
-
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n<mat-form-field\r\n appearance=\"outline\"\r\n class=\"input-full-width full-width w-100 multi-select\"\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}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [value]=\"inputValue\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n (selectionChange)=\"selectionChanged($event)\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n >\r\n <mat-select-trigger>\r\n <!-- <mat-chip-listbox>\r\n @for (option of visibleChip; track option) {\r\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-listbox> -->\r\n <mat-chip-grid>\r\n @for (option of inputValue; track option) {\r\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip-row>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-grid>\r\n </mat-select-trigger>\r\n @for (option of field()?.options; track option.label) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n }@else {\r\n <mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [value]=\"inputValue\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n (selectionChange)=\"selectionChanged($event)\"\r\n >\r\n <mat-select-trigger>\r\n <mat-chip-grid>\r\n @for (option of inputValue; track option) {\r\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option.label }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip-row>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-grid>\r\n </mat-select-trigger>\r\n @for (option of field()?.options; track option.label) {\r\n <mat-option [value]=\"option\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n }\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n", styles: [".field-lable{font-size:.625rem;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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 .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{background-color:#fff9e5!important}::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:12px!important;font-weight:400!important;color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:12px!important;width:12px!important;font-size:12px!important}::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{padding-right:0!important}::ng-deep .mat-mdc-standard-chip{--mdc-chip-outline-width: 1px !important;border-radius:18px!important;--mdc-chip-container-shape-radius: 19px !important;--mdc-chip-outline-color: #ffbb00 !important}::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding:9px 0 7px}::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{height:37px}::ng-deep .mat-mdc-chip{height:24px!important}::ng-deep .mat-mdc-optgroup-label{display:contents!important}::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .multiselect-search .mdc-text-field__input{color:#444!important}::ng-deep .multiselect-search .mdc-line-ripple--active{opacity:0!important;transform:none!important}::ng-deep .mdc-line-ripple{opacity:0!important;transform:none!important}::ng-deep .mdc-evolution-chip-set__chips{flex-flow:unset!important;overflow:scroll!important;scrollbar-width:none!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.material-icons{font-family:Material Icons!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{margin:2px 0 7px 8px}\n"] }]
|
|
1252
|
+
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\">{{field()?.label}}<span style=\"color: red;\" *ngIf=\"field() && field()?.validators?.isRequired\">*</span></label>\r\n<mat-form-field\r\n appearance=\"outline\"\r\n class=\"input-full-width full-width w-100 multi-select\"\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}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [value]=\"inputValue\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n (selectionChange)=\"selectionChanged($event)\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n >\r\n <mat-select-trigger>\r\n <!-- <mat-chip-listbox>\r\n @for (option of visibleChip; track option) {\r\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-listbox> -->\r\n <mat-chip-grid>\r\n @for (option of inputValue; track option) {\r\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip-row>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-grid>\r\n </mat-select-trigger>\r\n @for (option of field()?.options; track option.label) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n }@else {\r\n <mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [value]=\"inputValue\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n (selectionChange)=\"selectionChanged($event)\"\r\n >\r\n <mat-select-trigger>\r\n <mat-chip-grid>\r\n @for (option of inputValue; track option) {\r\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option.label }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip-row>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-grid>\r\n </mat-select-trigger>\r\n @for (option of field()?.options; track option.label) {\r\n <mat-option [value]=\"option\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n }\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n", styles: [".field-lable{font-size:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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 .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{background-color:#fff9e5!important}::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:12px!important;font-weight:400!important;color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:12px!important;width:12px!important;font-size:12px!important}::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{padding-right:0!important}::ng-deep .mat-mdc-standard-chip{--mdc-chip-outline-width: 1px !important;border-radius:18px!important;--mdc-chip-container-shape-radius: 19px !important;--mdc-chip-outline-color: #ffbb00 !important}::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding:9px 0 7px}::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{height:37px}::ng-deep .mat-mdc-chip{height:24px!important}::ng-deep .mat-mdc-optgroup-label{display:contents!important}::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .multiselect-search .mdc-text-field__input{color:#444!important}::ng-deep .multiselect-search .mdc-line-ripple--active{opacity:0!important;transform:none!important}::ng-deep .mdc-line-ripple{opacity:0!important;transform:none!important}::ng-deep .mdc-evolution-chip-set__chips{flex-flow:unset!important;overflow:scroll!important;scrollbar-width:none!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}.material-icons{font-family:Material Icons!important}:host ::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{margin:2px 0 7px 8px}\n"] }]
|
|
1243
1253
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { selectionChange: [{
|
|
1244
1254
|
type: Output
|
|
1245
1255
|
}] } });
|
|
@@ -1577,7 +1587,7 @@ class AmountTextboxComponent {
|
|
|
1577
1587
|
useExisting: AmountTextboxComponent,
|
|
1578
1588
|
multi: true
|
|
1579
1589
|
}
|
|
1580
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *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}\">\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n matInput\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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 (keydown)=\"onKeyDown($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"getDisplayValue()\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n }@else {\r\n <input\r\n matInput\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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 (keydown)=\"onKeyDown($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"getDisplayValue()\"\r\n />\r\n }\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n <span matPrefix class=\"rupee-symbol px-2\">\u20B9</span>\r\n <span matSuffix class=\"me-2 right-amount-text\">{{ getFormattedAmount() }}</span>\r\n </mat-form-field>\r\n", styles: [".field-lable{font-size:.
|
|
1590
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *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}\">\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n matInput\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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 (keydown)=\"onKeyDown($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"getDisplayValue()\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n }@else {\r\n <input\r\n matInput\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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 (keydown)=\"onKeyDown($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"getDisplayValue()\"\r\n />\r\n }\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n <span matPrefix class=\"rupee-symbol px-2\">\u20B9</span>\r\n <span matSuffix class=\"me-2 right-amount-text\">{{ getFormattedAmount() }}</span>\r\n </mat-form-field>\r\n", styles: [".field-lable{font-size:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}*{font-family:mulish!important}.right-amount-text{font-weight:600;font-size:10px;color:#444;background:#f5f5f5;border-radius:2px;padding:5.5px 6px 4px}.error-message{color:red}::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:.75rem!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}.rupee-symbol{color:#444;font-size:12px;font-weight:400}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: 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: "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"] }] });
|
|
1581
1591
|
}
|
|
1582
1592
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AmountTextboxComponent, decorators: [{
|
|
1583
1593
|
type: Component,
|
|
@@ -1592,7 +1602,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1592
1602
|
useExisting: AmountTextboxComponent,
|
|
1593
1603
|
multi: true
|
|
1594
1604
|
}
|
|
1595
|
-
], template: "<label class=\"field-lable\" *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}\">\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n matInput\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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 (keydown)=\"onKeyDown($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"getDisplayValue()\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n }@else {\r\n <input\r\n matInput\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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 (keydown)=\"onKeyDown($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"getDisplayValue()\"\r\n />\r\n }\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n <span matPrefix class=\"rupee-symbol px-2\">\u20B9</span>\r\n <span matSuffix class=\"me-2 right-amount-text\">{{ getFormattedAmount() }}</span>\r\n </mat-form-field>\r\n", styles: [".field-lable{font-size:.
|
|
1605
|
+
], template: "<label class=\"field-lable\" *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}\">\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n matInput\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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 (keydown)=\"onKeyDown($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"getDisplayValue()\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n }@else {\r\n <input\r\n matInput\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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 (keydown)=\"onKeyDown($event)\"\r\n (blur)=\"onInputBlur($event)\"\r\n [value]=\"getDisplayValue()\"\r\n />\r\n }\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n <span matPrefix class=\"rupee-symbol px-2\">\u20B9</span>\r\n <span matSuffix class=\"me-2 right-amount-text\">{{ getFormattedAmount() }}</span>\r\n </mat-form-field>\r\n", styles: [".field-lable{font-size:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}*{font-family:mulish!important}.right-amount-text{font-weight:600;font-size:10px;color:#444;background:#f5f5f5;border-radius:2px;padding:5.5px 6px 4px}.error-message{color:red}::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:.75rem!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}.rupee-symbol{color:#444;font-size:12px;font-weight:400}\n"] }]
|
|
1596
1606
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
1597
1607
|
type: Output
|
|
1598
1608
|
}] } });
|
|
@@ -1738,7 +1748,7 @@ class TagMobNumberComponent {
|
|
|
1738
1748
|
useExisting: TagMobNumberComponent,
|
|
1739
1749
|
multi: true
|
|
1740
1750
|
}
|
|
1741
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n\r\n >*</span\r\n ></label\r\n>\r\n<mat-form-field\r\n class=\"w-100 mobile-field\"\r\n appearance=\"outline\"\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}\"\r\n>\r\n <div matTextPrefix class=\"prefix_alternate_mobile primary\">\r\n <div class=\"d-flex countryCode\">\r\n <span class=\"country_code_input\"> {{ CountryCode }} </span>\r\n <span\r\n ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\r\n /></span>\r\n </div>\r\n </div>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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()\"\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()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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()\"\r\n [value]=\"inputValue\"\r\n />\r\n}\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n<div>\r\n <span class=\"checkbox-tag\">Tag as:</span>\r\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\r\n <mat-checkbox class=\"optional-checkbox\">\r\n {{ option.label }}\r\n </mat-checkbox>\r\n </span>\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}.\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:.625rem;font-weight:700!important;color:#444!important;margin-bottom:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}.error-message{color:red}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}*{font-family:mulish!important}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}::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}\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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: MatCheckboxModule }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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"] }] });
|
|
1751
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n\r\n >*</span\r\n ></label\r\n>\r\n<mat-form-field\r\n class=\"w-100 mobile-field\"\r\n appearance=\"outline\"\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}\"\r\n>\r\n <div matTextPrefix class=\"prefix_alternate_mobile primary\">\r\n <div class=\"d-flex countryCode\">\r\n <span class=\"country_code_input\"> {{ CountryCode }} </span>\r\n <span\r\n ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\r\n /></span>\r\n </div>\r\n </div>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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()\"\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()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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()\"\r\n [value]=\"inputValue\"\r\n />\r\n}\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n<div>\r\n <span class=\"checkbox-tag\">Tag as:</span>\r\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\r\n <mat-checkbox class=\"optional-checkbox\">\r\n {{ option.label }}\r\n </mat-checkbox>\r\n </span>\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}.\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:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}.error-message{color:red}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}*{font-family:mulish!important}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}::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}\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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: MatCheckboxModule }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { 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"] }] });
|
|
1742
1752
|
}
|
|
1743
1753
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TagMobNumberComponent, decorators: [{
|
|
1744
1754
|
type: Component,
|
|
@@ -1754,7 +1764,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1754
1764
|
useExisting: TagMobNumberComponent,
|
|
1755
1765
|
multi: true
|
|
1756
1766
|
}
|
|
1757
|
-
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n\r\n >*</span\r\n ></label\r\n>\r\n<mat-form-field\r\n class=\"w-100 mobile-field\"\r\n appearance=\"outline\"\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}\"\r\n>\r\n <div matTextPrefix class=\"prefix_alternate_mobile primary\">\r\n <div class=\"d-flex countryCode\">\r\n <span class=\"country_code_input\"> {{ CountryCode }} </span>\r\n <span\r\n ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\r\n /></span>\r\n </div>\r\n </div>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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()\"\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()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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()\"\r\n [value]=\"inputValue\"\r\n />\r\n}\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n<div>\r\n <span class=\"checkbox-tag\">Tag as:</span>\r\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\r\n <mat-checkbox class=\"optional-checkbox\">\r\n {{ option.label }}\r\n </mat-checkbox>\r\n </span>\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}.\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:.
|
|
1767
|
+
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n\r\n >*</span\r\n ></label\r\n>\r\n<mat-form-field\r\n class=\"w-100 mobile-field\"\r\n appearance=\"outline\"\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}\"\r\n>\r\n <div matTextPrefix class=\"prefix_alternate_mobile primary\">\r\n <div class=\"d-flex countryCode\">\r\n <span class=\"country_code_input\"> {{ CountryCode }} </span>\r\n <span\r\n ><img src=\"https://cdn.godigit.com/retail-life/down-arrow.svg\" alt=\"\"\r\n /></span>\r\n </div>\r\n </div>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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()\"\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()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n autocomplete=\"none\"\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()\"\r\n [value]=\"inputValue\"\r\n />\r\n}\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n<div>\r\n <span class=\"checkbox-tag\">Tag as:</span>\r\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\r\n <mat-checkbox class=\"optional-checkbox\">\r\n {{ option.label }}\r\n </mat-checkbox>\r\n </span>\r\n</div>\r\n<div class=\"error-message\" *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}.\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:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.mobile-field .mat-mdc-form-field:not(.mat-form-field-disabled) .mat-mdc-floating-label.mdc-floating-label{transform:var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (61.625px + var(--mat-mdc-form-field-label-offset-x, 0px)))))!important}.error-message{color:red}.prefix_alternate_mobile{font-size:12px;font-weight:400;color:#8f8f8f;padding:10px 6px 10px 0;border-right:1px solid #dddddd;height:20px;width:auto;display:flex;justify-content:center;align-items:center;position:relative;cursor:pointer;transform:translate(-6px)}.countryCode{gap:4px}*{font-family:mulish!important}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}::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}\n"] }]
|
|
1758
1768
|
}] });
|
|
1759
1769
|
|
|
1760
1770
|
class AgeDateComponent {
|
|
@@ -1923,7 +1933,7 @@ class InfoTextboxComponent {
|
|
|
1923
1933
|
useExisting: InfoTextboxComponent,
|
|
1924
1934
|
multi: true
|
|
1925
1935
|
}
|
|
1926
|
-
], ngImport: i0, template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}\r\n <!-- <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n >*</span\r\n > -->\r\n <span style=\"justify-content: end;\">\r\n <img class=\"mx-1\" *ngIf=\"field()?.configData?.imageURL\" [src]=\"field()?.configData?.imageURL\" alt=\"\">\r\n <u style=\"cursor: pointer;\" (click)=\"handleWhereToFindClick()\">{{field()?.configData?.infoMsg}}</u></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}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"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()\"\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()?.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()\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n \r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\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:.
|
|
1936
|
+
], ngImport: i0, template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}\r\n <!-- <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n >*</span\r\n > -->\r\n <span style=\"justify-content: end;\">\r\n <img class=\"mx-1\" *ngIf=\"field()?.configData?.imageURL\" [src]=\"field()?.configData?.imageURL\" alt=\"\">\r\n <u style=\"cursor: pointer;\" (click)=\"handleWhereToFindClick()\">{{field()?.configData?.infoMsg}}</u></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}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"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()\"\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()?.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()\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n \r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\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:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.info-label{display:flex;justify-content:space-between}.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}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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: 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: "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"] }] });
|
|
1927
1937
|
}
|
|
1928
1938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InfoTextboxComponent, decorators: [{
|
|
1929
1939
|
type: Component,
|
|
@@ -1938,7 +1948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1938
1948
|
useExisting: InfoTextboxComponent,
|
|
1939
1949
|
multi: true
|
|
1940
1950
|
}
|
|
1941
|
-
], template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}\r\n <!-- <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n >*</span\r\n > -->\r\n <span style=\"justify-content: end;\">\r\n <img class=\"mx-1\" *ngIf=\"field()?.configData?.imageURL\" [src]=\"field()?.configData?.imageURL\" alt=\"\">\r\n <u style=\"cursor: pointer;\" (click)=\"handleWhereToFindClick()\">{{field()?.configData?.infoMsg}}</u></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}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"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()\"\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()?.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()\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n \r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\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:.
|
|
1951
|
+
], template: "<label class=\"field-lable info-label\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}\r\n <!-- <span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n >*</span\r\n > -->\r\n <span style=\"justify-content: end;\">\r\n <img class=\"mx-1\" *ngIf=\"field()?.configData?.imageURL\" [src]=\"field()?.configData?.imageURL\" alt=\"\">\r\n <u style=\"cursor: pointer;\" (click)=\"handleWhereToFindClick()\">{{field()?.configData?.infoMsg}}</u></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}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n<input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"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()\"\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()?.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()\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n \r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\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:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.info-label{display:flex;justify-content:space-between}.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}\n"] }]
|
|
1942
1952
|
}], propDecorators: { fields: [{
|
|
1943
1953
|
type: Input
|
|
1944
1954
|
}], infoClick: [{
|
|
@@ -1983,7 +1993,7 @@ class TextboxWithImageComponent {
|
|
|
1983
1993
|
useExisting: TextboxWithImageComponent,
|
|
1984
1994
|
multi: true
|
|
1985
1995
|
}
|
|
1986
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *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}\"\r\n>\r\n@if(reactiveFormControlobject()) {\r\n<input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"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()?.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 \r\n <span matSuffix class=\"mx-3\">\r\n <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\r\n <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\r\n </span>\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\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:.
|
|
1996
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *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}\"\r\n>\r\n@if(reactiveFormControlobject()) {\r\n<input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"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()?.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 \r\n <span matSuffix class=\"mx-3\">\r\n <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\r\n <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\r\n </span>\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\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:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.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}\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.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { 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: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1987
1997
|
}
|
|
1988
1998
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithImageComponent, decorators: [{
|
|
1989
1999
|
type: Component,
|
|
@@ -1993,7 +2003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1993
2003
|
useExisting: TextboxWithImageComponent,
|
|
1994
2004
|
multi: true
|
|
1995
2005
|
}
|
|
1996
|
-
], template: "<label class=\"field-lable\" *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}\"\r\n>\r\n@if(reactiveFormControlobject()) {\r\n<input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"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()?.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 \r\n <span matSuffix class=\"mx-3\">\r\n <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\r\n <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\r\n </span>\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\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:.
|
|
2006
|
+
], template: "<label class=\"field-lable\" *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}\"\r\n>\r\n@if(reactiveFormControlobject()) {\r\n<input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"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()?.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 \r\n <span matSuffix class=\"mx-3\">\r\n <img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl' alt=\"\" />\r\n <!-- \"https://cdn.godigit.com/retail-life/location.svg\" -->\r\n </span>\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\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:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.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}\n"] }]
|
|
1997
2007
|
}], propDecorators: { blur: [{
|
|
1998
2008
|
type: Output
|
|
1999
2009
|
}] } });
|
|
@@ -2077,14 +2087,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2077
2087
|
class AddDocumentComponent {
|
|
2078
2088
|
field = input.required();
|
|
2079
2089
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddDocumentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2080
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AddDocumentComponent, isStandalone: true, selector: "lib-add-document", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field().label}}</label>\r\n <input\r\n hidden\r\n [type]=\"field()?.controlType\"\r\n #fileInput\r\n (click)=\"(fileInput.value)\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"upload-btn add-document-btn\"\r\n *ngIf=\"field() && field()?.isVisible\"\r\n [ngStyle]=\"{\r\n'--add-doc-border-color': field()?.controlStyle?.borderColor ,\r\n'--add-doc-border-width': field()?.controlStyle?.borderWidth ,\r\n'--add-doc-border-style': field()?.controlStyle?.borderStyle ,\r\n'--add-doc-background': field()?.controlStyle?.background \r\n}\"\r\n >\r\n <span class=\"add-icon\">\r\n <span\r\n ><img class=\"mb-1\" src=\"https://cdn.godigit.com/retail-life/add.svg\"></span>\r\n <span class=\"upload-text\" [ngStyle]=\"{\r\n'--upload-font-color': field()?.controlStyle?.color ,\r\n'--upload-font-size': field()?.controlStyle?.fontSize ,\r\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\r\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\r\n}\">{{ field()?.label }}</span>\r\n <span class=\"light-font\">(optional)</span>\r\n </span>\r\n </button>\r\n", styles: [".field-lable{font-size
|
|
2090
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: AddDocumentComponent, isStandalone: true, selector: "lib-add-document", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field().label}}</label>\r\n <input\r\n hidden\r\n [type]=\"field()?.controlType\"\r\n #fileInput\r\n (click)=\"(fileInput.value)\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"upload-btn add-document-btn\"\r\n *ngIf=\"field() && field()?.isVisible\"\r\n [ngStyle]=\"{\r\n'--add-doc-border-color': field()?.controlStyle?.borderColor ,\r\n'--add-doc-border-width': field()?.controlStyle?.borderWidth ,\r\n'--add-doc-border-style': field()?.controlStyle?.borderStyle ,\r\n'--add-doc-background': field()?.controlStyle?.background \r\n}\"\r\n >\r\n <span class=\"add-icon\">\r\n <span\r\n ><img class=\"mb-1\" src=\"https://cdn.godigit.com/retail-life/add.svg\"></span>\r\n <span class=\"upload-text\" [ngStyle]=\"{\r\n'--upload-font-color': field()?.controlStyle?.color ,\r\n'--upload-font-size': field()?.controlStyle?.fontSize ,\r\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\r\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\r\n}\">{{ field()?.label }}</span>\r\n <span class=\"light-font\">(optional)</span>\r\n </span>\r\n </button>\r\n", styles: [".field-lable{font-size:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;opacity:0}.upload-btn{width:100%!important;height:48px!important;padding:10px;border-radius:.5rem}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , .5rem)!important}.add-document-btn{border:1px dashed #999;background:#fff;color:#444}.add-document-btn{border-color:var(--add-doc-border-color , #999);border-width:var(--add-doc-border-width , 1px);border-style:var(--add-doc-border-style , dashed);background:var(--add-doc-background , #ffffff);color:var(--add-doc-font-color , #444)}.add-icon{display:flex;justify-content:start;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.light-font{color:#b4b4b4}*{font-family:mulish!important}\n"], dependencies: [{ 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: FormsModule }] });
|
|
2081
2091
|
}
|
|
2082
2092
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AddDocumentComponent, decorators: [{
|
|
2083
2093
|
type: Component,
|
|
2084
2094
|
args: [{ selector: 'lib-add-document', standalone: true, imports: [
|
|
2085
2095
|
CommonModule,
|
|
2086
2096
|
FormsModule
|
|
2087
|
-
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field().label}}</label>\r\n <input\r\n hidden\r\n [type]=\"field()?.controlType\"\r\n #fileInput\r\n (click)=\"(fileInput.value)\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"upload-btn add-document-btn\"\r\n *ngIf=\"field() && field()?.isVisible\"\r\n [ngStyle]=\"{\r\n'--add-doc-border-color': field()?.controlStyle?.borderColor ,\r\n'--add-doc-border-width': field()?.controlStyle?.borderWidth ,\r\n'--add-doc-border-style': field()?.controlStyle?.borderStyle ,\r\n'--add-doc-background': field()?.controlStyle?.background \r\n}\"\r\n >\r\n <span class=\"add-icon\">\r\n <span\r\n ><img class=\"mb-1\" src=\"https://cdn.godigit.com/retail-life/add.svg\"></span>\r\n <span class=\"upload-text\" [ngStyle]=\"{\r\n'--upload-font-color': field()?.controlStyle?.color ,\r\n'--upload-font-size': field()?.controlStyle?.fontSize ,\r\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\r\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\r\n}\">{{ field()?.label }}</span>\r\n <span class=\"light-font\">(optional)</span>\r\n </span>\r\n </button>\r\n", styles: [".field-lable{font-size
|
|
2097
|
+
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field()?.isShowLabel\">{{field().label}}</label>\r\n <input\r\n hidden\r\n [type]=\"field()?.controlType\"\r\n #fileInput\r\n (click)=\"(fileInput.value)\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n />\r\n <button\r\n type=\"button\"\r\n class=\"upload-btn add-document-btn\"\r\n *ngIf=\"field() && field()?.isVisible\"\r\n [ngStyle]=\"{\r\n'--add-doc-border-color': field()?.controlStyle?.borderColor ,\r\n'--add-doc-border-width': field()?.controlStyle?.borderWidth ,\r\n'--add-doc-border-style': field()?.controlStyle?.borderStyle ,\r\n'--add-doc-background': field()?.controlStyle?.background \r\n}\"\r\n >\r\n <span class=\"add-icon\">\r\n <span\r\n ><img class=\"mb-1\" src=\"https://cdn.godigit.com/retail-life/add.svg\"></span>\r\n <span class=\"upload-text\" [ngStyle]=\"{\r\n'--upload-font-color': field()?.controlStyle?.color ,\r\n'--upload-font-size': field()?.controlStyle?.fontSize ,\r\n'--upload-font-weight': field()?.controlStyle?.fontWeight,\r\n'--upload-focus-font-color': field()?.controlStyle?.focusColor ,\r\n}\">{{ field()?.label }}</span>\r\n <span class=\"light-font\">(optional)</span>\r\n </span>\r\n </button>\r\n", styles: [".field-lable{font-size:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;opacity:0}.upload-btn{width:100%!important;height:48px!important;padding:10px;border-radius:.5rem}.upload-btn{width:var(--upload-width , 100%)!important;border-radius:var(--upload-border-radius , .5rem)!important}.add-document-btn{border:1px dashed #999;background:#fff;color:#444}.add-document-btn{border-color:var(--add-doc-border-color , #999);border-width:var(--add-doc-border-width , 1px);border-style:var(--add-doc-border-style , dashed);background:var(--add-doc-background , #ffffff);color:var(--add-doc-font-color , #444)}.add-icon{display:flex;justify-content:start;gap:7px}.upload-text{color:#444!important;font-weight:700!important;font-size:14px!important}.upload-text{color:var(--upload-font-color , #444)!important;font-size:var( --upload-font-size , 14px)!important;font-weight:var(--upload-font-weight , 700)!important}.light-font{color:#b4b4b4}*{font-family:mulish!important}\n"] }]
|
|
2088
2098
|
}] });
|
|
2089
2099
|
|
|
2090
2100
|
class HyperlinkComponent {
|
|
@@ -2366,7 +2376,7 @@ class SearchMultiSelectComponent {
|
|
|
2366
2376
|
useExisting: SearchMultiSelectComponent,
|
|
2367
2377
|
multi: true
|
|
2368
2378
|
}
|
|
2369
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *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 appearance=\"outline\"\r\n class=\"input-full-width full-width w-100 multi-select\"\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-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n }\"\r\n>\r\n@if(reactiveFormControlobject()) {\r\n<mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [(value)]=\"selectedValues\"\r\n (selectionChange)=\"onSelectionChange()\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n >\r\n <mat-select-trigger>\r\n <mat-chip-listbox>\r\n @for (option of visibleChip; track option) {\r\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-listbox>\r\n </mat-select-trigger>\r\n <div class=\"select-container\">\r\n <mat-optgroup>\r\n <mat-form-field\r\n class=\"input-full-width full-width w-100 multiselect-search\"\r\n >\r\n <input\r\n matInput\r\n #search\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"filterOptions()\"\r\n />\r\n </mat-form-field>\r\n </mat-optgroup>\r\n @for (option of filteredOptions; track option.label) {\r\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </div>\r\n </mat-select>\r\n}@else {\r\n <mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [(value)]=\"selectedValues\"\r\n (selectionChange)=\"onSelectionChange()\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n [value]=\"inputValue\"\r\n >\r\n <mat-select-trigger>\r\n <mat-chip-listbox>\r\n @for (option of visibleChip; track option) {\r\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-listbox>\r\n </mat-select-trigger>\r\n <div class=\"select-container\">\r\n <mat-optgroup>\r\n <mat-form-field\r\n class=\"input-full-width full-width w-100 multiselect-search\"\r\n >\r\n <input\r\n matInput\r\n #search\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"filterOptions()\"\r\n />\r\n </mat-form-field>\r\n </mat-optgroup>\r\n @for (option of filteredOptions; track option.label) {\r\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </div>\r\n </mat-select>\r\n}\r\n \r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n", styles: [".field-lable{font-size:.625rem;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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 .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{background-color:#fff9e5!important}::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:12px!important;font-weight:400!important;color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:12px!important;width:12px!important;font-size:12px!important}::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{padding-right:0!important}::ng-deep .mat-mdc-standard-chip{--mdc-chip-outline-width: 1px !important;border-radius:18px!important;--mdc-chip-container-shape-radius: 19px !important;--mdc-chip-outline-color: #ffbb00 !important}::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding:9px 0 7px}::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{height:37px}::ng-deep .mat-mdc-chip{height:24px!important}::ng-deep .mat-mdc-optgroup-label{display:contents!important}::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .multiselect-search .mdc-text-field__input{color:#444!important}::ng-deep .multiselect-search .mdc-line-ripple--active{opacity:0!important;transform:none!important}::ng-deep .mdc-line-ripple{opacity:0!important;transform:none!important}::ng-deep .mdc-evolution-chip-set__chips{flex-flow:unset!important;overflow:scroll!important;scrollbar-width:none!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}.select-container{background:#fff}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { 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: MatChipsModule }, { kind: "component", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i6.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
2379
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *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 appearance=\"outline\"\r\n class=\"input-full-width full-width w-100 multi-select\"\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-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n }\"\r\n>\r\n@if(reactiveFormControlobject()) {\r\n<mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [(value)]=\"selectedValues\"\r\n (selectionChange)=\"onSelectionChange()\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n >\r\n <mat-select-trigger>\r\n <mat-chip-listbox>\r\n @for (option of visibleChip; track option) {\r\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-listbox>\r\n </mat-select-trigger>\r\n <div class=\"select-container\">\r\n <mat-optgroup>\r\n <mat-form-field\r\n class=\"input-full-width full-width w-100 multiselect-search\"\r\n >\r\n <input\r\n matInput\r\n #search\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"filterOptions()\"\r\n />\r\n </mat-form-field>\r\n </mat-optgroup>\r\n @for (option of filteredOptions; track option.label) {\r\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </div>\r\n </mat-select>\r\n}@else {\r\n <mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [(value)]=\"selectedValues\"\r\n (selectionChange)=\"onSelectionChange()\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n [value]=\"inputValue\"\r\n >\r\n <mat-select-trigger>\r\n <mat-chip-listbox>\r\n @for (option of visibleChip; track option) {\r\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-listbox>\r\n </mat-select-trigger>\r\n <div class=\"select-container\">\r\n <mat-optgroup>\r\n <mat-form-field\r\n class=\"input-full-width full-width w-100 multiselect-search\"\r\n >\r\n <input\r\n matInput\r\n #search\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"filterOptions()\"\r\n />\r\n </mat-form-field>\r\n </mat-optgroup>\r\n @for (option of filteredOptions; track option.label) {\r\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </div>\r\n </mat-select>\r\n}\r\n \r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n", styles: [".field-lable{font-size:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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 .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{background-color:#fff9e5!important}::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:12px!important;font-weight:400!important;color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:12px!important;width:12px!important;font-size:12px!important}::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{padding-right:0!important}::ng-deep .mat-mdc-standard-chip{--mdc-chip-outline-width: 1px !important;border-radius:18px!important;--mdc-chip-container-shape-radius: 19px !important;--mdc-chip-outline-color: #ffbb00 !important}::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding:9px 0 7px}::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{height:37px}::ng-deep .mat-mdc-chip{height:24px!important}::ng-deep .mat-mdc-optgroup-label{display:contents!important}::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .multiselect-search .mdc-text-field__input{color:#444!important}::ng-deep .multiselect-search .mdc-line-ripple--active{opacity:0!important;transform:none!important}::ng-deep .mdc-line-ripple{opacity:0!important;transform:none!important}::ng-deep .mdc-evolution-chip-set__chips{flex-flow:unset!important;overflow:scroll!important;scrollbar-width:none!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}.select-container{background:#fff}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}\n"], dependencies: [{ kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i4$1.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { 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: MatChipsModule }, { kind: "component", type: i6.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "component", type: i6.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i6.MatChipRemove, selector: "[matChipRemove]" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
2370
2380
|
}
|
|
2371
2381
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SearchMultiSelectComponent, decorators: [{
|
|
2372
2382
|
type: Component,
|
|
@@ -2385,7 +2395,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2385
2395
|
useExisting: SearchMultiSelectComponent,
|
|
2386
2396
|
multi: true
|
|
2387
2397
|
}
|
|
2388
|
-
], template: "<label class=\"field-lable\" *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 appearance=\"outline\"\r\n class=\"input-full-width full-width w-100 multi-select\"\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-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n }\"\r\n>\r\n@if(reactiveFormControlobject()) {\r\n<mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [(value)]=\"selectedValues\"\r\n (selectionChange)=\"onSelectionChange()\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n >\r\n <mat-select-trigger>\r\n <mat-chip-listbox>\r\n @for (option of visibleChip; track option) {\r\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-listbox>\r\n </mat-select-trigger>\r\n <div class=\"select-container\">\r\n <mat-optgroup>\r\n <mat-form-field\r\n class=\"input-full-width full-width w-100 multiselect-search\"\r\n >\r\n <input\r\n matInput\r\n #search\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"filterOptions()\"\r\n />\r\n </mat-form-field>\r\n </mat-optgroup>\r\n @for (option of filteredOptions; track option.label) {\r\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </div>\r\n </mat-select>\r\n}@else {\r\n <mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [(value)]=\"selectedValues\"\r\n (selectionChange)=\"onSelectionChange()\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n [value]=\"inputValue\"\r\n >\r\n <mat-select-trigger>\r\n <mat-chip-listbox>\r\n @for (option of visibleChip; track option) {\r\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-listbox>\r\n </mat-select-trigger>\r\n <div class=\"select-container\">\r\n <mat-optgroup>\r\n <mat-form-field\r\n class=\"input-full-width full-width w-100 multiselect-search\"\r\n >\r\n <input\r\n matInput\r\n #search\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"filterOptions()\"\r\n />\r\n </mat-form-field>\r\n </mat-optgroup>\r\n @for (option of filteredOptions; track option.label) {\r\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </div>\r\n </mat-select>\r\n}\r\n \r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n", styles: [".field-lable{font-size:.625rem;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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 .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{background-color:#fff9e5!important}::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:12px!important;font-weight:400!important;color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:12px!important;width:12px!important;font-size:12px!important}::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{padding-right:0!important}::ng-deep .mat-mdc-standard-chip{--mdc-chip-outline-width: 1px !important;border-radius:18px!important;--mdc-chip-container-shape-radius: 19px !important;--mdc-chip-outline-color: #ffbb00 !important}::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding:9px 0 7px}::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{height:37px}::ng-deep .mat-mdc-chip{height:24px!important}::ng-deep .mat-mdc-optgroup-label{display:contents!important}::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .multiselect-search .mdc-text-field__input{color:#444!important}::ng-deep .multiselect-search .mdc-line-ripple--active{opacity:0!important;transform:none!important}::ng-deep .mdc-line-ripple{opacity:0!important;transform:none!important}::ng-deep .mdc-evolution-chip-set__chips{flex-flow:unset!important;overflow:scroll!important;scrollbar-width:none!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}.select-container{background:#fff}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}\n"] }]
|
|
2398
|
+
], template: "<label class=\"field-lable\" *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 appearance=\"outline\"\r\n class=\"input-full-width full-width w-100 multi-select\"\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-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n }\"\r\n>\r\n@if(reactiveFormControlobject()) {\r\n<mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [(value)]=\"selectedValues\"\r\n (selectionChange)=\"onSelectionChange()\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n >\r\n <mat-select-trigger>\r\n <mat-chip-listbox>\r\n @for (option of visibleChip; track option) {\r\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-listbox>\r\n </mat-select-trigger>\r\n <div class=\"select-container\">\r\n <mat-optgroup>\r\n <mat-form-field\r\n class=\"input-full-width full-width w-100 multiselect-search\"\r\n >\r\n <input\r\n matInput\r\n #search\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"filterOptions()\"\r\n />\r\n </mat-form-field>\r\n </mat-optgroup>\r\n @for (option of filteredOptions; track option.label) {\r\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </div>\r\n </mat-select>\r\n}@else {\r\n <mat-select\r\n multiple\r\n [id]=\"field()?.fieldName\"\r\n [attr.name]=\"field()?.fieldName\"\r\n [(value)]=\"selectedValues\"\r\n (selectionChange)=\"onSelectionChange()\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [disabled]=\"field()?.isDisable\"\r\n (openedChange)=\"onSelectOpened($event)\"\r\n [value]=\"inputValue\"\r\n >\r\n <mat-select-trigger>\r\n <mat-chip-listbox>\r\n @for (option of visibleChip; track option) {\r\n <mat-chip [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ option }}\r\n <mat-icon matChipRemove>close</mat-icon>\r\n </mat-chip>\r\n }\r\n <mat-chip *ngIf=\"remainingCount > 0\"> +{{ remainingCount }} </mat-chip>\r\n </mat-chip-listbox>\r\n </mat-select-trigger>\r\n <div class=\"select-container\">\r\n <mat-optgroup>\r\n <mat-form-field\r\n class=\"input-full-width full-width w-100 multiselect-search\"\r\n >\r\n <input\r\n matInput\r\n #search\r\n autocomplete=\"off\"\r\n placeholder=\"Search\"\r\n [(ngModel)]=\"searchText\"\r\n (ngModelChange)=\"filterOptions()\"\r\n />\r\n </mat-form-field>\r\n </mat-optgroup>\r\n @for (option of filteredOptions; track option.label) {\r\n <mat-option [value]=\"option.label\" autoActiveFirstOption>\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </div>\r\n </mat-select>\r\n}\r\n \r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n", styles: [".field-lable{font-size:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.error-message{color:red}::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 .mat-mdc-select-arrow{border-style:solid!important;border-width:0 2px 2px 0!important;border-right:2px solid!important;content:\"\"!important;display:inline-block!important;padding:3px!important;transform:rotate(45deg)!important;vertical-align:middle!important;width:unset!important;height:unset!important;color:#444!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-arrow svg{display:none!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{background:#fff!important}::ng-deep div.mat-mdc-select-panel{background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item{background:#fff!important;color:#444!important;font-weight:400}::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow{color:#fb0!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item{background:var(--custom-select-option-background-color, #fff)!important;color:var(--custom-select-option-font-color, #444)!important;font-weight:var(--custom-select-option-font-weight, 400)!important}::ng-deep .mat-mdc-option:focus.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item{background:var(--custom-select-option-background-color-focus, #fffaeb)!important;color:var(--custom-select-option-font-color-focus, #444)!important;font-weight:var(--custom-select-option-font-weight-focus, 600)!important;border-left:var(--custom-select-option-border-left-focus, 4px solid #fb0)!important;border-radius:var(--custom-select-option-border-radius-focus, 3px)!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:var(--custom-font-size, 12px)!important}::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel{padding:0!important;background:#fafafa!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:12px!important}::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow{color:#fb0}::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{padding:0!important}::ng-deep .mat-mdc-optgroup-label{background:#f5f5f5;color:#444;font-weight:800}::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{padding:0!important;background:#fff!important}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600!important;color:#444!important;border-radius:3px}::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text{color:unset!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal{display:none!important}::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{background-color:#fff9e5!important}::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{font-size:12px!important;font-weight:400!important;color:#444!important}::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{height:12px!important;width:12px!important;font-size:12px!important}::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{padding-right:0!important}::ng-deep .mat-mdc-standard-chip{--mdc-chip-outline-width: 1px !important;border-radius:18px!important;--mdc-chip-container-shape-radius: 19px !important;--mdc-chip-outline-color: #ffbb00 !important}::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix,.mdc-text-field--no-label .mat-mdc-form-field-infix{padding:9px 0 7px}::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{height:37px}::ng-deep .mat-mdc-chip{height:24px!important}::ng-deep .mat-mdc-optgroup-label{display:contents!important}::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{background:#fff!important}::ng-deep .multiselect-search .mdc-text-field__input{color:#444!important}::ng-deep .multiselect-search .mdc-line-ripple--active{opacity:0!important;transform:none!important}::ng-deep .mdc-line-ripple{opacity:0!important;transform:none!important}::ng-deep .mdc-evolution-chip-set__chips{flex-flow:unset!important;overflow:scroll!important;scrollbar-width:none!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked:after{color:#fff!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate{background-color:#fb0!important;border-radius:4px!important}::ng-deep .mat-mdc-option .mat-pseudo-checkbox{border:1px solid #DADADA}::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{background:#fffaeb!important;border-left:4px solid #fb0;font-weight:600;color:#444!important;border-radius:3px}.select-container{background:#fff}::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{color:#8f8f8f!important;font-size:12px!important;vertical-align:sub}*{font-family:mulish!important}\n"] }]
|
|
2389
2399
|
}] });
|
|
2390
2400
|
|
|
2391
2401
|
class SubscriptTextboxComponent {
|
|
@@ -2604,7 +2614,7 @@ class TextboxWithTextComponent {
|
|
|
2604
2614
|
useExisting: TextboxWithTextComponent,
|
|
2605
2615
|
multi: true,
|
|
2606
2616
|
},
|
|
2607
|
-
], 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}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"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()?.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()\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n<div>\r\n <span class=\"below-input-text\">{{field()?.configData?.subscriptText}}</span>\r\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\r\n</div>\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:.
|
|
2617
|
+
], 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}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"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()?.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()\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n<div>\r\n <span class=\"below-input-text\">{{field()?.configData?.subscriptText}}</span>\r\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\r\n</div>\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:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.below-input-text{font-weight:400;font-size:12px;color:#444;font-family:Mulish}.error-message{color:red}.innerSubscriptText{font-weight:800;font-size:12px;color:#fb0!important;font-family:Mulish}*{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}.hyperlink{font-weight:700;font-size:12px;color:#fb0}\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.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"] }] });
|
|
2608
2618
|
}
|
|
2609
2619
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TextboxWithTextComponent, decorators: [{
|
|
2610
2620
|
type: Component,
|
|
@@ -2619,7 +2629,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2619
2629
|
useExisting: TextboxWithTextComponent,
|
|
2620
2630
|
multi: true,
|
|
2621
2631
|
},
|
|
2622
|
-
], 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}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"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()?.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()\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n<div>\r\n <span class=\"below-input-text\">{{field()?.configData?.subscriptText}}</span>\r\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\r\n</div>\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:.
|
|
2632
|
+
], 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}\"\r\n>\r\n @if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"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()?.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()\"\r\n [value]=\"inputValue\"\r\n />\r\n }\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.isRequiredMessage }}\r\n </mat-error>\r\n</mat-form-field>\r\n<div>\r\n <span class=\"below-input-text\">{{field()?.configData?.subscriptText}}</span>\r\n <span [innerHTML]=\"field()?.configData?.innerHTML\"></span>\r\n</div>\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:.75rem!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.below-input-text{font-weight:400;font-size:12px;color:#444;font-family:Mulish}.error-message{color:red}.innerSubscriptText{font-weight:800;font-size:12px;color:#fb0!important;font-family:Mulish}*{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}.hyperlink{font-weight:700;font-size:12px;color:#fb0}\n"] }]
|
|
2623
2633
|
}], propDecorators: { blur: [{
|
|
2624
2634
|
type: Output
|
|
2625
2635
|
}] } });
|