master-control 0.3.33 → 0.3.34
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/autocomplete/autocomplete.component.mjs +16 -48
- package/esm2022/lib/master-control.component.mjs +2 -2
- package/fesm2022/master-control.mjs +16 -48
- package/fesm2022/master-control.mjs.map +1 -1
- package/lib/autocomplete/autocomplete.component.d.ts +2 -8
- package/master-control-0.3.34.tgz +0 -0
- package/package.json +2 -2
- package/master-control-0.3.33.tgz +0 -0
|
@@ -1266,11 +1266,7 @@ class AutocompleteComponent {
|
|
|
1266
1266
|
filteredOptions = [];
|
|
1267
1267
|
inputValue = '';
|
|
1268
1268
|
reactiveFormControlobject = input();
|
|
1269
|
-
// Output events for parent component communication
|
|
1270
1269
|
blur = new EventEmitter();
|
|
1271
|
-
selectionChanged = new EventEmitter();
|
|
1272
|
-
valueChanged = new EventEmitter();
|
|
1273
|
-
optionSelected = new EventEmitter();
|
|
1274
1270
|
ngOnInit() {
|
|
1275
1271
|
this.filteredOptions = this.field().options || [];
|
|
1276
1272
|
}
|
|
@@ -1283,19 +1279,15 @@ class AutocompleteComponent {
|
|
|
1283
1279
|
this.inputValue = value.label;
|
|
1284
1280
|
this.selectedOption = value;
|
|
1285
1281
|
}
|
|
1282
|
+
else if (typeof value === 'string') {
|
|
1283
|
+
this.inputValue = value;
|
|
1284
|
+
// Find the corresponding option object
|
|
1285
|
+
const option = this.field().options?.find((opt) => opt.label === value || opt.value === value);
|
|
1286
|
+
this.selectedOption = option || { label: value, value: value };
|
|
1287
|
+
}
|
|
1286
1288
|
else {
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
option = this.field().options?.find((opt) => opt.label === value);
|
|
1290
|
-
}
|
|
1291
|
-
if (option) {
|
|
1292
|
-
this.inputValue = option.label;
|
|
1293
|
-
this.selectedOption = option;
|
|
1294
|
-
}
|
|
1295
|
-
else {
|
|
1296
|
-
this.inputValue = value.toString();
|
|
1297
|
-
this.selectedOption = { label: value.toString(), value: value };
|
|
1298
|
-
}
|
|
1289
|
+
this.inputValue = value;
|
|
1290
|
+
this.selectedOption = { label: value, value: value };
|
|
1299
1291
|
}
|
|
1300
1292
|
}
|
|
1301
1293
|
else {
|
|
@@ -1320,25 +1312,20 @@ class AutocompleteComponent {
|
|
|
1320
1312
|
const matchingOption = this.field().options?.find((option) => option.label.toLowerCase() === value.toLowerCase());
|
|
1321
1313
|
if (matchingOption) {
|
|
1322
1314
|
this.selectedOption = matchingOption;
|
|
1323
|
-
this.onChange(matchingOption
|
|
1315
|
+
this.onChange(matchingOption);
|
|
1324
1316
|
}
|
|
1325
1317
|
else {
|
|
1326
|
-
|
|
1318
|
+
// If no exact match, still emit the string value
|
|
1319
|
+
this.selectedOption = { label: value, value: value };
|
|
1327
1320
|
this.onChange(value);
|
|
1328
1321
|
}
|
|
1329
1322
|
this.onTouched();
|
|
1330
|
-
this.valueChanged.emit(value);
|
|
1331
|
-
this.selectionChanged.emit(this.selectedOption);
|
|
1332
1323
|
}
|
|
1333
1324
|
onOptionSelected(option) {
|
|
1334
1325
|
this.selectedOption = option;
|
|
1335
1326
|
this.inputValue = option.label;
|
|
1336
|
-
this.onChange(option
|
|
1327
|
+
this.onChange(option);
|
|
1337
1328
|
this.onTouched();
|
|
1338
|
-
// Emit events for parent component
|
|
1339
|
-
this.optionSelected.emit(option);
|
|
1340
|
-
this.selectionChanged.emit(option);
|
|
1341
|
-
this.valueChanged.emit(option.label);
|
|
1342
1329
|
}
|
|
1343
1330
|
onBlur(event) {
|
|
1344
1331
|
this.onTouched();
|
|
@@ -1355,27 +1342,14 @@ class AutocompleteComponent {
|
|
|
1355
1342
|
displayFn = (option) => {
|
|
1356
1343
|
return option && typeof option === 'object' ? option.label : option || '';
|
|
1357
1344
|
};
|
|
1358
|
-
// Utility method to get the current selected value
|
|
1359
|
-
getCurrentValue() {
|
|
1360
|
-
return this.selectedOption ? this.selectedOption.value : this.inputValue;
|
|
1361
|
-
}
|
|
1362
|
-
// Utility method to get the current selected option
|
|
1363
|
-
getCurrentOption() {
|
|
1364
|
-
return this.selectedOption;
|
|
1365
|
-
}
|
|
1366
|
-
// Method to set value programmatically (useful for parent components)
|
|
1367
|
-
setValue(value) {
|
|
1368
|
-
this.writeValue(value);
|
|
1369
|
-
this.onChange(this.getCurrentValue());
|
|
1370
|
-
}
|
|
1371
1345
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1372
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "lib-autocomplete", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur"
|
|
1346
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AutocompleteComponent, isStandalone: true, selector: "lib-autocomplete", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { blur: "blur" }, providers: [
|
|
1373
1347
|
{
|
|
1374
1348
|
provide: NG_VALUE_ACCESSOR,
|
|
1375
1349
|
useExisting: AutocompleteComponent,
|
|
1376
1350
|
multi: true
|
|
1377
1351
|
}
|
|
1378
|
-
], 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 show-arrow\" 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 (blur)=\"onBlur()\"\r\n (input)=\"onInputChange($event)\"\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:12px!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}.custom-dropdown-arrow{color:#666;font-size:18px;cursor:pointer;margin-right:4px;padding:0!important;margin-top:12px!important}.show-arrow{background-image:url(https://d2h44aw7l5xdvz.cloudfront.net/digitPlusAssets/Dropdown_arrow.svg)!important;background-position:calc(100% - 12px) calc(1em - 4px),calc(100% - 15px) calc(1em + 8px),calc(100% - 2.5em) .5em;background-size:10px 10px,5px 5px,1px 1.5em;background-repeat:no-repeat}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!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"] }] });
|
|
1352
|
+
], 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 show-arrow\" 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:12px!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}.custom-dropdown-arrow{color:#666;font-size:18px;cursor:pointer;margin-right:4px;padding:0!important;margin-top:12px!important}.show-arrow{background-image:url(https://d2h44aw7l5xdvz.cloudfront.net/digitPlusAssets/Dropdown_arrow.svg)!important;background-position:calc(100% - 12px) calc(1em - 4px),calc(100% - 15px) calc(1em + 8px),calc(100% - 2.5em) .5em;background-size:10px 10px,5px 5px,1px 1.5em;background-repeat:no-repeat}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!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"] }] });
|
|
1379
1353
|
}
|
|
1380
1354
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
1381
1355
|
type: Component,
|
|
@@ -1393,15 +1367,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1393
1367
|
useExisting: AutocompleteComponent,
|
|
1394
1368
|
multi: true
|
|
1395
1369
|
}
|
|
1396
|
-
], 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 show-arrow\" 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 (blur)=\"onBlur()\"\r\n (input)=\"onInputChange($event)\"\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:12px!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}.custom-dropdown-arrow{color:#666;font-size:18px;cursor:pointer;margin-right:4px;padding:0!important;margin-top:12px!important}.show-arrow{background-image:url(https://d2h44aw7l5xdvz.cloudfront.net/digitPlusAssets/Dropdown_arrow.svg)!important;background-position:calc(100% - 12px) calc(1em - 4px),calc(100% - 15px) calc(1em + 8px),calc(100% - 2.5em) .5em;background-size:10px 10px,5px 5px,1px 1.5em;background-repeat:no-repeat}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"] }]
|
|
1370
|
+
], 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 show-arrow\" 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:12px!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}.custom-dropdown-arrow{color:#666;font-size:18px;cursor:pointer;margin-right:4px;padding:0!important;margin-top:12px!important}.show-arrow{background-image:url(https://d2h44aw7l5xdvz.cloudfront.net/digitPlusAssets/Dropdown_arrow.svg)!important;background-position:calc(100% - 12px) calc(1em - 4px),calc(100% - 15px) calc(1em + 8px),calc(100% - 2.5em) .5em;background-size:10px 10px,5px 5px,1px 1.5em;background-repeat:no-repeat}@media screen and (max-width: 768px){::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder{font-size:14px!important}::ng-deep .mat-mdc-option .mdc-list-item__primary-text{font-size:14px!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"] }]
|
|
1397
1371
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { blur: [{
|
|
1398
1372
|
type: Output
|
|
1399
|
-
}], selectionChanged: [{
|
|
1400
|
-
type: Output
|
|
1401
|
-
}], valueChanged: [{
|
|
1402
|
-
type: Output
|
|
1403
|
-
}], optionSelected: [{
|
|
1404
|
-
type: Output
|
|
1405
1373
|
}] } });
|
|
1406
1374
|
|
|
1407
1375
|
class MultipleSelectComponent {
|
|
@@ -5951,7 +5919,7 @@ class MasterControlComponent {
|
|
|
5951
5919
|
formGroup = new FormGroup({});
|
|
5952
5920
|
constructor() { }
|
|
5953
5921
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5954
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MasterControlComponent, isStandalone: true, selector: "lib-master-control", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (field()?.controlType) {\r\n @case ('top-header') {\r\n <lib-top-header [field]=\"field()\" />\r\n }\r\n @case ('footer') {\r\n <lib-footer [field]=\"field()\" />\r\n }\r\n @case('footer-buttons')\r\n {\r\n <lib-footer-with-buttons [field]=\"field()\"></lib-footer-with-buttons>\r\n }\r\n @case('text') {\r\n <lib-textbox [field]=\"field()\"></lib-textbox>\r\n }\r\n @case('select') {\r\n <lib-select [field]=\"field()\"/>\r\n }\r\n\r\n @case('radio') {\r\n <lib-radio [field]=\"field()\" />\r\n }\r\n\r\n @case('toggle') {\r\n <lib-toggle [field]=\"field()\" />\r\n }\r\n\r\n @case('file') {\r\n <lib-upload [field]=\"field()\" />\r\n }\r\n\r\n @case('date') {\r\n <lib-dob [field]=\"field()\" />\r\n }\r\n\r\n @case('mobileNumber') {\r\n <lib-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case('info') {\r\n <lib-info [field]=\"field()\" />\r\n }\r\n\r\n @case('checkbox') {\r\n <lib-checkbox [field]=\"field()\" />\r\n }\r\n\r\n @case('textarea') {\r\n <lib-textarea [field]=\"field()\" />\r\n }\r\n\r\n @case ('button') {\r\n <lib-button [field]=\"field()\" />\r\n }\r\n\r\n @case ('tab') {\r\n <lib-tab [field]=\"field()\" />\r\n }\r\n\r\n @case ('autocomplete') {\r\n <lib-autocomplete [field]=\"field()\" />\r\n }\r\n\r\n @case ('multipleSelect') {\r\n <lib-multiple-select [field]=\"field()\" />\r\n }\r\n\r\n @case ('textboxWithSelect') {\r\n <lib-select-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('otpTextbox') {\r\n <lib-otp-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('amountTextbox') {\r\n <lib-amount-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('suffixTextbox') {\r\n <lib-suffix-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('otpMobNumber') {\r\n <lib-otp-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case ('tagMobNumber') {\r\n <lib-tag-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case ('dateWithAge') {\r\n <lib-age-date [field]=\"field()\" />\r\n }\r\n\r\n @case ('additionButton') {\r\n <lib-addition-button [field]=\"field()\" />\r\n }\r\n\r\n @case ('infoTextbox') {\r\n <lib-info-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('textboxWithImage') {\r\n <lib-textbox-with-image [field]=\"field()\" />\r\n }\r\n\r\n @case ('emailWithDomain') {\r\n <lib-email-with-domain [field]=\"field()\" />\r\n }\r\n\r\n @case ('imageUpload') {\r\n <lib-image-upload [field]=\"field()\" />\r\n }\r\n\r\n @case ('downloadDocument') {\r\n <lib-download-document [field]=\"field()\" />\r\n }\r\n\r\n @case ('addDocument') {\r\n <lib-add-document [field]=\"field()\" />\r\n }\r\n\r\n @case ('hyperlink') {\r\n <lib-hyperlink [field]=\"field()\" />\r\n }\r\n\r\n @case ('textboxWithUnderscore') {\r\n <lib-textbox-with-underscore [field]=\"field()\" />\r\n }\r\n\r\n @case ('underscoreMobNumber') {\r\n <lib-underscore-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case ('downloadIconButton') {\r\n <lib-icon-button [field]=\"field()\" />\r\n }\r\n\r\n @case ('image') {\r\n <lib-image [field]=\"field()\" />\r\n }\r\n @case ('stepper') {\r\n <lib-stepper [field]=\"field()\" />\r\n }\r\n @case ('card') {\r\n <lib-card [field]=\"field()\" />\r\n }\r\n @case ('hrLine') {\r\n <lib-hr-line [field]=\"field()\" />\r\n }\r\n @case ('searchMultiSelect') {\r\n <lib-search-multi-select [field]=\"field()\" />\r\n }\r\n @case ('subscriptTextbox') {\r\n <lib-subscript-textbox [field]=\"field()\" />\r\n }\r\n @case ('label') {\r\n <lib-label [field]=\"field()\" />\r\n }\r\n @case ('subHeading') {\r\n <lib-sub-header [field]=\"field()\" />\r\n }\r\n @case ('heading') {\r\n <lib-header [field]=\"field()\" />\r\n }\r\n @case ('table') {\r\n <lib-table [field]=\"field()\" />\r\n }\r\n @case ('textboxWithText') {\r\n <lib-textbox-with-text [field]=\"field()\" />\r\n }\r\n @case ('loader') {\r\n <lib-loader [field]=\"field()\" />\r\n }\r\n @case ('discount') {\r\n <lib-discount [field]=\"field()\" />\r\n }\r\n @case ('optionalBenefitCard') {\r\n <lib-benefit-card [field]=\"field()\" />\r\n }\r\n @case ('errorSnackbar') {\r\n <lib-error-snackbar [field]=\"field()\" />\r\n }\r\n @case ('warningSnackbar') {\r\n <lib-warning-snackbar [field]=\"field()\" />\r\n }\r\n @case ('successSnackbar') {\r\n <lib-success-snackbar [field]=\"field()\" />\r\n }\r\n @case ('neutralSnackbar') {\r\n <lib-neutral-snackbar [field]=\"field()\" />\r\n }\r\n @case ('boldLabel') {\r\n <lib-grey-label [field]=\"field()\" />\r\n }\r\n @case ('iframe') {\r\n <lib-iframe [field]=\"field()\" />\r\n }\r\n @case ('toggleButton') {\r\n <lib-toggle-button [field]=\"field()\" />\r\n }\r\n @case ('payGetCard') {\r\n <lib-pay-get-card [field]=\"field()\" />\r\n }\r\n @case ('inBuiltBenefit') {\r\n <lib-in-built-benefit [field]=\"field()\" />\r\n }\r\n @case ('otherBenefit') {\r\n <lib-other-benefits [field]=\"field()\" />\r\n }\r\n @case ('annuityRateLogo') {\r\n <lib-annuity-rate-logo [field]=\"field()\" />\r\n }\r\n @case ('discountAnnuity') {\r\n <lib-discount-v2 [field]=\"field()\" />\r\n }\r\n @case ('labelValue'){\r\n <lib-label-value-card [field]=\"field()\" />\r\n }\r\n @case ('medicalQuestions'){\r\n <lib-medial-questions [field]=\"field()\" />\r\n }\r\n @case ('nudge'){\r\n <lib-page-nudge [field]=\"field()\"/>\r\n }\r\n @case ('progressBar'){\r\n <lib-progress-bar [field]=\"field()\"/>\r\n }\r\n @case ('accordian'){\r\n <lib-accordian [field]=\"field()\"/>\r\n }\r\n @case ('miscInfo'){\r\n <lib-miscellaneous-info-bar [field]=\"field()\"/>\r\n }\r\n @case ('plainText'){\r\n <lib-plain-text [field]=\"field()\"/>\r\n }\r\n @case ('menu'){\r\n <lib-menu [field]=\"field()\" />\r\n }\r\n @case ('stepperWithArrow') {\r\n <lib-stepper-with-arrow [field]=\"field()\" />\r\n }\r\n @case ('labelWithImage') {\r\n <lib-label-with-image [field]=\"field()\" />\r\n }\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: MobNumberComponent, selector: "lib-mob-number", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: InfoComponent, selector: "lib-info", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: TabComponent, selector: "lib-tab", inputs: ["field"], outputs: ["selectedIndexChange"] }, { kind: "component", type: AutocompleteComponent, selector: "lib-autocomplete", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "selectionChanged", "valueChanged", "optionSelected"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpTextboxComponent, selector: "lib-otp-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SuffixTextboxComponent, selector: "lib-suffix-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpMobNumberComponent, selector: "lib-otp-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TagMobNumberComponent, selector: "lib-tag-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AgeDateComponent, selector: "lib-age-date", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AdditionButtonComponent, selector: "lib-addition-button", inputs: ["field"] }, { kind: "component", type: InfoTextboxComponent, selector: "lib-info-textbox", inputs: ["field", "reactiveFormControlobject", "fields"], outputs: ["infoClick"] }, { kind: "component", type: TextboxWithImageComponent, selector: "lib-textbox-with-image", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: EmailWithDomainComponent, selector: "lib-email-with-domain", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: ImageUploadComponent, selector: "lib-image-upload", inputs: ["field"] }, { kind: "component", type: DownloadDocumentComponent, selector: "lib-download-document", inputs: ["field"] }, { kind: "component", type: AddDocumentComponent, selector: "lib-add-document", inputs: ["field"] }, { kind: "component", type: HyperlinkComponent, selector: "lib-hyperlink", inputs: ["field"] }, { kind: "component", type: TextboxWithUnderscoreComponent, selector: "lib-textbox-with-underscore", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UnderscoreMobNumberComponent, selector: "lib-underscore-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ImageComponent, selector: "lib-image", inputs: ["field"] }, { kind: "component", type: StepperComponent, selector: "lib-stepper", inputs: ["field"] }, { kind: "component", type: CardComponent, selector: "lib-card", inputs: ["field"], outputs: ["cardDetailsClicked"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: SearchMultiSelectComponent, selector: "lib-search-multi-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SubscriptTextboxComponent, selector: "lib-subscript-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: LabelComponent, selector: "lib-label", inputs: ["field"] }, { kind: "component", type: SubHeaderComponent, selector: "lib-sub-header", inputs: ["field"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["field"] }, { kind: "component", type: TextboxWithTextComponent, selector: "lib-textbox-with-text", inputs: ["reactiveFormControlobject", "field"], outputs: ["blur"] }, { kind: "component", type: DiscountComponent, selector: "lib-discount", inputs: ["field"] }, { kind: "component", type: BenefitCardComponent, selector: "lib-benefit-card", inputs: ["field"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["field", "readonly"], outputs: ["actionItemClicked", "tablePaginationClicked"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["field"] }, { kind: "component", type: WarningSnackbarComponent, selector: "lib-warning-snackbar", inputs: ["field"] }, { kind: "component", type: SuccessSnackbarComponent, selector: "lib-success-snackbar", inputs: ["field"] }, { kind: "component", type: NeutralSnackbarComponent, selector: "lib-neutral-snackbar", inputs: ["field"] }, { kind: "component", type: ErrorSnackbarComponent, selector: "lib-error-snackbar", inputs: ["field"] }, { kind: "component", type: GreyLabelComponent, selector: "lib-grey-label", inputs: ["field"] }, { kind: "component", type: IframeComponent, selector: "lib-iframe", inputs: ["field"] }, { kind: "component", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: ["reactiveFormControlobject", "field"], outputs: ["selectionChanged", "change"] }, { kind: "component", type: PayGetCardComponent, selector: "lib-pay-get-card", inputs: ["field", "payAmount", "premiumAmount", "ptValue", "years", "frequency"] }, { kind: "component", type: InBuiltBenefitComponent, selector: "lib-in-built-benefit", inputs: ["field", "premiumAmount", "premiumAmountShort"] }, { kind: "component", type: OtherBenefitsComponent, selector: "lib-other-benefits", inputs: ["field"] }, { kind: "component", type: AnnuityRateLogoComponent, selector: "lib-annuity-rate-logo", inputs: ["field", "ratePercent"] }, { kind: "component", type: DiscountV2Component, selector: "lib-discount-v2", inputs: ["field"] }, { kind: "component", type: LabelValueCardComponent, selector: "lib-label-value-card", inputs: ["field"] }, { kind: "component", type: MedialQuestionsComponent, selector: "lib-medial-questions", inputs: ["medialQuestionResponse", "field"] }, { kind: "component", type: PageNudgeComponent, selector: "lib-page-nudge", inputs: ["field"] }, { kind: "component", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: ["field"] }, { kind: "component", type: AccordianComponent, selector: "lib-accordian", inputs: ["field"] }, { kind: "component", type: MiscellaneousInfoBarComponent, selector: "lib-miscellaneous-info-bar", inputs: ["field", "details"] }, { kind: "component", type: PlainTextComponent, selector: "lib-plain-text", inputs: ["field"] }, { kind: "component", type: MenuComponent, selector: "lib-menu", inputs: ["field"] }, { kind: "component", type: StepperWIthArrowComponent, selector: "lib-stepper-with-arrow", inputs: ["field", "currentStepValue", "autoProgress", "autoProgressDelay"], outputs: ["selectedStep"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", inputs: ["field"] }, { kind: "component", type: TopHeaderComponent, selector: "lib-top-header", inputs: ["field"] }, { kind: "component", type: FooterComponent, selector: "lib-footer", inputs: ["field"] }, { kind: "component", type: FooterWithButtonsComponent, selector: "lib-footer-with-buttons", inputs: ["field"] }] });
|
|
5922
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MasterControlComponent, isStandalone: true, selector: "lib-master-control", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (field()?.controlType) {\r\n @case ('top-header') {\r\n <lib-top-header [field]=\"field()\" />\r\n }\r\n @case ('footer') {\r\n <lib-footer [field]=\"field()\" />\r\n }\r\n @case('footer-buttons')\r\n {\r\n <lib-footer-with-buttons [field]=\"field()\"></lib-footer-with-buttons>\r\n }\r\n @case('text') {\r\n <lib-textbox [field]=\"field()\"></lib-textbox>\r\n }\r\n @case('select') {\r\n <lib-select [field]=\"field()\"/>\r\n }\r\n\r\n @case('radio') {\r\n <lib-radio [field]=\"field()\" />\r\n }\r\n\r\n @case('toggle') {\r\n <lib-toggle [field]=\"field()\" />\r\n }\r\n\r\n @case('file') {\r\n <lib-upload [field]=\"field()\" />\r\n }\r\n\r\n @case('date') {\r\n <lib-dob [field]=\"field()\" />\r\n }\r\n\r\n @case('mobileNumber') {\r\n <lib-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case('info') {\r\n <lib-info [field]=\"field()\" />\r\n }\r\n\r\n @case('checkbox') {\r\n <lib-checkbox [field]=\"field()\" />\r\n }\r\n\r\n @case('textarea') {\r\n <lib-textarea [field]=\"field()\" />\r\n }\r\n\r\n @case ('button') {\r\n <lib-button [field]=\"field()\" />\r\n }\r\n\r\n @case ('tab') {\r\n <lib-tab [field]=\"field()\" />\r\n }\r\n\r\n @case ('autocomplete') {\r\n <lib-autocomplete [field]=\"field()\" />\r\n }\r\n\r\n @case ('multipleSelect') {\r\n <lib-multiple-select [field]=\"field()\" />\r\n }\r\n\r\n @case ('textboxWithSelect') {\r\n <lib-select-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('otpTextbox') {\r\n <lib-otp-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('amountTextbox') {\r\n <lib-amount-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('suffixTextbox') {\r\n <lib-suffix-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('otpMobNumber') {\r\n <lib-otp-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case ('tagMobNumber') {\r\n <lib-tag-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case ('dateWithAge') {\r\n <lib-age-date [field]=\"field()\" />\r\n }\r\n\r\n @case ('additionButton') {\r\n <lib-addition-button [field]=\"field()\" />\r\n }\r\n\r\n @case ('infoTextbox') {\r\n <lib-info-textbox [field]=\"field()\" />\r\n }\r\n\r\n @case ('textboxWithImage') {\r\n <lib-textbox-with-image [field]=\"field()\" />\r\n }\r\n\r\n @case ('emailWithDomain') {\r\n <lib-email-with-domain [field]=\"field()\" />\r\n }\r\n\r\n @case ('imageUpload') {\r\n <lib-image-upload [field]=\"field()\" />\r\n }\r\n\r\n @case ('downloadDocument') {\r\n <lib-download-document [field]=\"field()\" />\r\n }\r\n\r\n @case ('addDocument') {\r\n <lib-add-document [field]=\"field()\" />\r\n }\r\n\r\n @case ('hyperlink') {\r\n <lib-hyperlink [field]=\"field()\" />\r\n }\r\n\r\n @case ('textboxWithUnderscore') {\r\n <lib-textbox-with-underscore [field]=\"field()\" />\r\n }\r\n\r\n @case ('underscoreMobNumber') {\r\n <lib-underscore-mob-number [field]=\"field()\" />\r\n }\r\n\r\n @case ('downloadIconButton') {\r\n <lib-icon-button [field]=\"field()\" />\r\n }\r\n\r\n @case ('image') {\r\n <lib-image [field]=\"field()\" />\r\n }\r\n @case ('stepper') {\r\n <lib-stepper [field]=\"field()\" />\r\n }\r\n @case ('card') {\r\n <lib-card [field]=\"field()\" />\r\n }\r\n @case ('hrLine') {\r\n <lib-hr-line [field]=\"field()\" />\r\n }\r\n @case ('searchMultiSelect') {\r\n <lib-search-multi-select [field]=\"field()\" />\r\n }\r\n @case ('subscriptTextbox') {\r\n <lib-subscript-textbox [field]=\"field()\" />\r\n }\r\n @case ('label') {\r\n <lib-label [field]=\"field()\" />\r\n }\r\n @case ('subHeading') {\r\n <lib-sub-header [field]=\"field()\" />\r\n }\r\n @case ('heading') {\r\n <lib-header [field]=\"field()\" />\r\n }\r\n @case ('table') {\r\n <lib-table [field]=\"field()\" />\r\n }\r\n @case ('textboxWithText') {\r\n <lib-textbox-with-text [field]=\"field()\" />\r\n }\r\n @case ('loader') {\r\n <lib-loader [field]=\"field()\" />\r\n }\r\n @case ('discount') {\r\n <lib-discount [field]=\"field()\" />\r\n }\r\n @case ('optionalBenefitCard') {\r\n <lib-benefit-card [field]=\"field()\" />\r\n }\r\n @case ('errorSnackbar') {\r\n <lib-error-snackbar [field]=\"field()\" />\r\n }\r\n @case ('warningSnackbar') {\r\n <lib-warning-snackbar [field]=\"field()\" />\r\n }\r\n @case ('successSnackbar') {\r\n <lib-success-snackbar [field]=\"field()\" />\r\n }\r\n @case ('neutralSnackbar') {\r\n <lib-neutral-snackbar [field]=\"field()\" />\r\n }\r\n @case ('boldLabel') {\r\n <lib-grey-label [field]=\"field()\" />\r\n }\r\n @case ('iframe') {\r\n <lib-iframe [field]=\"field()\" />\r\n }\r\n @case ('toggleButton') {\r\n <lib-toggle-button [field]=\"field()\" />\r\n }\r\n @case ('payGetCard') {\r\n <lib-pay-get-card [field]=\"field()\" />\r\n }\r\n @case ('inBuiltBenefit') {\r\n <lib-in-built-benefit [field]=\"field()\" />\r\n }\r\n @case ('otherBenefit') {\r\n <lib-other-benefits [field]=\"field()\" />\r\n }\r\n @case ('annuityRateLogo') {\r\n <lib-annuity-rate-logo [field]=\"field()\" />\r\n }\r\n @case ('discountAnnuity') {\r\n <lib-discount-v2 [field]=\"field()\" />\r\n }\r\n @case ('labelValue'){\r\n <lib-label-value-card [field]=\"field()\" />\r\n }\r\n @case ('medicalQuestions'){\r\n <lib-medial-questions [field]=\"field()\" />\r\n }\r\n @case ('nudge'){\r\n <lib-page-nudge [field]=\"field()\"/>\r\n }\r\n @case ('progressBar'){\r\n <lib-progress-bar [field]=\"field()\"/>\r\n }\r\n @case ('accordian'){\r\n <lib-accordian [field]=\"field()\"/>\r\n }\r\n @case ('miscInfo'){\r\n <lib-miscellaneous-info-bar [field]=\"field()\"/>\r\n }\r\n @case ('plainText'){\r\n <lib-plain-text [field]=\"field()\"/>\r\n }\r\n @case ('menu'){\r\n <lib-menu [field]=\"field()\" />\r\n }\r\n @case ('stepperWithArrow') {\r\n <lib-stepper-with-arrow [field]=\"field()\" />\r\n }\r\n @case ('labelWithImage') {\r\n <lib-label-with-image [field]=\"field()\" />\r\n }\r\n}\r\n", styles: [""], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "component", type: TextboxComponent, selector: "lib-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SelectComponent, selector: "lib-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["reactiveFormControlobject", "field"], outputs: ["change"] }, { kind: "component", type: ToggleComponent, selector: "lib-toggle", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: UploadComponent, selector: "lib-upload", inputs: ["field", "reactiveFormControlobject"], outputs: ["filesChanged", "fileRemoved"] }, { kind: "component", type: DobComponent, selector: "lib-dob", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur", "valueChange", "dateSelected", "invalidDate"] }, { kind: "component", type: MobNumberComponent, selector: "lib-mob-number", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: InfoComponent, selector: "lib-info", inputs: ["field"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["change"] }, { kind: "component", type: TextareaComponent, selector: "lib-textarea", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["field"] }, { kind: "component", type: TabComponent, selector: "lib-tab", inputs: ["field"], outputs: ["selectedIndexChange"] }, { kind: "component", type: AutocompleteComponent, selector: "lib-autocomplete", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: MultipleSelectComponent, selector: "lib-multiple-select", inputs: ["field", "reactiveFormControlobject"], outputs: ["selectionChange"] }, { kind: "component", type: SelectTextboxComponent, selector: "lib-select-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpTextboxComponent, selector: "lib-otp-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AmountTextboxComponent, selector: "lib-amount-textbox", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: SuffixTextboxComponent, selector: "lib-suffix-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: OtpMobNumberComponent, selector: "lib-otp-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: TagMobNumberComponent, selector: "lib-tag-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AgeDateComponent, selector: "lib-age-date", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: AdditionButtonComponent, selector: "lib-addition-button", inputs: ["field"] }, { kind: "component", type: InfoTextboxComponent, selector: "lib-info-textbox", inputs: ["field", "reactiveFormControlobject", "fields"], outputs: ["infoClick"] }, { kind: "component", type: TextboxWithImageComponent, selector: "lib-textbox-with-image", inputs: ["field", "reactiveFormControlobject"], outputs: ["blur"] }, { kind: "component", type: EmailWithDomainComponent, selector: "lib-email-with-domain", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: ImageUploadComponent, selector: "lib-image-upload", inputs: ["field"] }, { kind: "component", type: DownloadDocumentComponent, selector: "lib-download-document", inputs: ["field"] }, { kind: "component", type: AddDocumentComponent, selector: "lib-add-document", inputs: ["field"] }, { kind: "component", type: HyperlinkComponent, selector: "lib-hyperlink", inputs: ["field"] }, { kind: "component", type: TextboxWithUnderscoreComponent, selector: "lib-textbox-with-underscore", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: UnderscoreMobNumberComponent, selector: "lib-underscore-mob-number", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: IconButtonComponent, selector: "lib-icon-button", inputs: ["field"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: ImageComponent, selector: "lib-image", inputs: ["field"] }, { kind: "component", type: StepperComponent, selector: "lib-stepper", inputs: ["field"] }, { kind: "component", type: CardComponent, selector: "lib-card", inputs: ["field"], outputs: ["cardDetailsClicked"] }, { kind: "component", type: HrLineComponent, selector: "lib-hr-line", inputs: ["field"] }, { kind: "component", type: SearchMultiSelectComponent, selector: "lib-search-multi-select", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: SubscriptTextboxComponent, selector: "lib-subscript-textbox", inputs: ["field", "reactiveFormControlobject"] }, { kind: "component", type: LabelComponent, selector: "lib-label", inputs: ["field"] }, { kind: "component", type: SubHeaderComponent, selector: "lib-sub-header", inputs: ["field"] }, { kind: "component", type: HeaderComponent, selector: "lib-header", inputs: ["field"] }, { kind: "component", type: TextboxWithTextComponent, selector: "lib-textbox-with-text", inputs: ["reactiveFormControlobject", "field"], outputs: ["blur"] }, { kind: "component", type: DiscountComponent, selector: "lib-discount", inputs: ["field"] }, { kind: "component", type: BenefitCardComponent, selector: "lib-benefit-card", inputs: ["field"] }, { kind: "component", type: TableComponent, selector: "lib-table", inputs: ["field", "readonly"], outputs: ["actionItemClicked", "tablePaginationClicked"] }, { kind: "component", type: LoaderComponent, selector: "lib-loader", inputs: ["field"] }, { kind: "component", type: WarningSnackbarComponent, selector: "lib-warning-snackbar", inputs: ["field"] }, { kind: "component", type: SuccessSnackbarComponent, selector: "lib-success-snackbar", inputs: ["field"] }, { kind: "component", type: NeutralSnackbarComponent, selector: "lib-neutral-snackbar", inputs: ["field"] }, { kind: "component", type: ErrorSnackbarComponent, selector: "lib-error-snackbar", inputs: ["field"] }, { kind: "component", type: GreyLabelComponent, selector: "lib-grey-label", inputs: ["field"] }, { kind: "component", type: IframeComponent, selector: "lib-iframe", inputs: ["field"] }, { kind: "component", type: ToggleButtonComponent, selector: "lib-toggle-button", inputs: ["reactiveFormControlobject", "field"], outputs: ["selectionChanged", "change"] }, { kind: "component", type: PayGetCardComponent, selector: "lib-pay-get-card", inputs: ["field", "payAmount", "premiumAmount", "ptValue", "years", "frequency"] }, { kind: "component", type: InBuiltBenefitComponent, selector: "lib-in-built-benefit", inputs: ["field", "premiumAmount", "premiumAmountShort"] }, { kind: "component", type: OtherBenefitsComponent, selector: "lib-other-benefits", inputs: ["field"] }, { kind: "component", type: AnnuityRateLogoComponent, selector: "lib-annuity-rate-logo", inputs: ["field", "ratePercent"] }, { kind: "component", type: DiscountV2Component, selector: "lib-discount-v2", inputs: ["field"] }, { kind: "component", type: LabelValueCardComponent, selector: "lib-label-value-card", inputs: ["field"] }, { kind: "component", type: MedialQuestionsComponent, selector: "lib-medial-questions", inputs: ["medialQuestionResponse", "field"] }, { kind: "component", type: PageNudgeComponent, selector: "lib-page-nudge", inputs: ["field"] }, { kind: "component", type: ProgressBarComponent, selector: "lib-progress-bar", inputs: ["field"] }, { kind: "component", type: AccordianComponent, selector: "lib-accordian", inputs: ["field"] }, { kind: "component", type: MiscellaneousInfoBarComponent, selector: "lib-miscellaneous-info-bar", inputs: ["field", "details"] }, { kind: "component", type: PlainTextComponent, selector: "lib-plain-text", inputs: ["field"] }, { kind: "component", type: MenuComponent, selector: "lib-menu", inputs: ["field"] }, { kind: "component", type: StepperWIthArrowComponent, selector: "lib-stepper-with-arrow", inputs: ["field", "currentStepValue", "autoProgress", "autoProgressDelay"], outputs: ["selectedStep"] }, { kind: "component", type: LabelWithImageComponent, selector: "lib-label-with-image", inputs: ["field"] }, { kind: "component", type: TopHeaderComponent, selector: "lib-top-header", inputs: ["field"] }, { kind: "component", type: FooterComponent, selector: "lib-footer", inputs: ["field"] }, { kind: "component", type: FooterWithButtonsComponent, selector: "lib-footer-with-buttons", inputs: ["field"] }] });
|
|
5955
5923
|
}
|
|
5956
5924
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MasterControlComponent, decorators: [{
|
|
5957
5925
|
type: Component,
|