master-control 0.3.77 → 0.3.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/age-date/age-date.component.mjs +41 -17
- package/esm2022/lib/annuity-premium-calculator/annuity-premium-calculator.component.mjs +7 -1
- package/esm2022/lib/multiple-select/multiple-select.component.mjs +13 -3
- package/fesm2022/master-control.mjs +58 -18
- package/fesm2022/master-control.mjs.map +1 -1
- package/lib/age-date/age-date.component.d.ts +2 -0
- package/lib/multiple-select/multiple-select.component.d.ts +1 -0
- package/master-control-0.3.79.tgz +0 -0
- package/package.json +1 -1
- package/master-control-0.3.77.tgz +0 -0
|
@@ -1702,6 +1702,16 @@ class MultipleSelectComponent {
|
|
|
1702
1702
|
document.body.style.removeProperty('--custom-select-option-border-radius-focus');
|
|
1703
1703
|
}
|
|
1704
1704
|
}
|
|
1705
|
+
showLabel(option) {
|
|
1706
|
+
let selectedLabel = option;
|
|
1707
|
+
if (!this.masterService.checkIfValueIsEmpty(this.field()?.options)) {
|
|
1708
|
+
let filteredArr = this.field()?.options.filter((singleObj) => singleObj['value'] === option);
|
|
1709
|
+
if (!this.masterService.checkIfValueIsEmpty(filteredArr) && !this.masterService.checkIfValueIsEmpty(filteredArr[0]?.label)) {
|
|
1710
|
+
selectedLabel = filteredArr[0].label;
|
|
1711
|
+
}
|
|
1712
|
+
}
|
|
1713
|
+
return selectedLabel;
|
|
1714
|
+
}
|
|
1705
1715
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultipleSelectComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1706
1716
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: MultipleSelectComponent, isStandalone: true, selector: "lib-multiple-select", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, providers: [
|
|
1707
1717
|
{
|
|
@@ -1709,7 +1719,7 @@ class MultipleSelectComponent {
|
|
|
1709
1719
|
useExisting: MultipleSelectComponent,
|
|
1710
1720
|
multi: true
|
|
1711
1721
|
}
|
|
1712
|
-
], 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-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 }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\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 }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\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: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 .mat-mdc-option .mdc-list-item__primary-text{width:100%!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}@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:var(--custom-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: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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"] }] });
|
|
1722
|
+
], 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-grid>\r\n @for (option of inputValue; track option) {\r\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ showLabel(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 }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\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 {{ showLabel(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 }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\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: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 .mat-mdc-option .mdc-list-item__primary-text{width:100%!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}@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:var(--custom-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: MatSelectModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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"] }] });
|
|
1713
1723
|
}
|
|
1714
1724
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultipleSelectComponent, decorators: [{
|
|
1715
1725
|
type: Component,
|
|
@@ -1726,7 +1736,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1726
1736
|
useExisting: MultipleSelectComponent,
|
|
1727
1737
|
multi: true
|
|
1728
1738
|
}
|
|
1729
|
-
], 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-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 }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\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 }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\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: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 .mat-mdc-option .mdc-list-item__primary-text{width:100%!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}@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:var(--custom-font-size, 14px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"] }]
|
|
1739
|
+
], 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-grid>\r\n @for (option of inputValue; track option) {\r\n <mat-chip-row [removable]=\"true\" (removed)=\"removeItem(option)\">\r\n {{ showLabel(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 }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\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 {{ showLabel(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 }} <img *ngIf=\"option.image\" [src]=\"option.image\" alt=\"\" style=\"width:20px; height:20px; float: inline-end;\" />\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: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 .mat-mdc-option .mdc-list-item__primary-text{width:100%!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}@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:var(--custom-font-size, 14px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{font-size:14px!important}}\n"] }]
|
|
1730
1740
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { selectionChange: [{
|
|
1731
1741
|
type: Output
|
|
1732
1742
|
}] } });
|
|
@@ -2255,24 +2265,34 @@ class AgeDateComponent {
|
|
|
2255
2265
|
field = input.required();
|
|
2256
2266
|
inputValue = null;
|
|
2257
2267
|
reactiveFormControlobject = input();
|
|
2268
|
+
age = null;
|
|
2258
2269
|
constructor(service) {
|
|
2259
2270
|
this.service = service;
|
|
2260
2271
|
}
|
|
2261
2272
|
dateDivisionFormat(event) {
|
|
2273
|
+
let value = event.target.value;
|
|
2262
2274
|
let evt = event.target;
|
|
2263
|
-
if (evt.value.length > 2 && !evt.value.substr(2, 1).includes('
|
|
2264
|
-
evt.value = [evt.value.slice(0, 2), '
|
|
2275
|
+
if (evt.value.length > 2 && !evt.value.substr(2, 1).includes('/')) {
|
|
2276
|
+
evt.value = [evt.value.slice(0, 2), '/', evt.value.slice(2)].join('');
|
|
2265
2277
|
}
|
|
2266
2278
|
else if (evt.value.length > 5 &&
|
|
2267
2279
|
Number(evt.value.substr(3, 2)) &&
|
|
2268
|
-
!evt.value.substr(5, 1).includes('
|
|
2269
|
-
evt.value = [evt.value.slice(0, 5), '
|
|
2280
|
+
!evt.value.substr(5, 1).includes('/')) {
|
|
2281
|
+
evt.value = [evt.value.slice(0, 5), '/', evt.value.slice(5)].join('');
|
|
2270
2282
|
}
|
|
2271
2283
|
else if (evt.value.length > 6 &&
|
|
2272
2284
|
!Number(evt.value.substr(3, 2)) &&
|
|
2273
|
-
!evt.value.substr(6, 1).includes('
|
|
2274
|
-
evt.value = [evt.value.slice(0, 6), '
|
|
2285
|
+
!evt.value.substr(6, 1).includes('/')) {
|
|
2286
|
+
evt.value = [evt.value.slice(0, 6), '/', evt.value.slice(6)].join('');
|
|
2275
2287
|
}
|
|
2288
|
+
// value = value.replace(/[^a-zA-Z0-9]/g, '');
|
|
2289
|
+
// if (value.length > 2 && value.indexOf('/') === -1) {
|
|
2290
|
+
// value = value.substring(0, 2) + '/' + value.substring(2);
|
|
2291
|
+
// }
|
|
2292
|
+
// if (value.length > 6 && value.indexOf('/', 3) === -1) {
|
|
2293
|
+
// value = value.substring(0, 6) + '/' + value.substring(6);
|
|
2294
|
+
// }
|
|
2295
|
+
// event.target.value = value;
|
|
2276
2296
|
}
|
|
2277
2297
|
_onChange = (inputValue) => { };
|
|
2278
2298
|
_unTouched = () => { };
|
|
@@ -2299,26 +2319,40 @@ class AgeDateComponent {
|
|
|
2299
2319
|
if (isNaN(Date.parse(event.target.value))) {
|
|
2300
2320
|
event.target.value = '';
|
|
2301
2321
|
}
|
|
2322
|
+
else {
|
|
2323
|
+
this.calculateAge(event.target.value);
|
|
2324
|
+
}
|
|
2302
2325
|
}
|
|
2303
2326
|
this._unTouched();
|
|
2304
2327
|
}
|
|
2328
|
+
calculateAge(birthDate) {
|
|
2329
|
+
const today = new Date();
|
|
2330
|
+
const birthdate = new Date(birthDate);
|
|
2331
|
+
let age = today.getFullYear() - birthdate.getFullYear();
|
|
2332
|
+
const monthDiff = today.getMonth() - birthdate.getMonth();
|
|
2333
|
+
const days_difference = today.getDate() - birthdate.getDate();
|
|
2334
|
+
if (monthDiff < 0 || (monthDiff === 0 && days_difference < 0)) {
|
|
2335
|
+
age = age - 1;
|
|
2336
|
+
}
|
|
2337
|
+
this.age = age;
|
|
2338
|
+
}
|
|
2305
2339
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AgeDateComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2306
2340
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: AgeDateComponent, isStandalone: true, selector: "lib-age-date", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, reactiveFormControlobject: { classPropertyName: "reactiveFormControlobject", publicName: "reactiveFormControlobject", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: MAT_DATE_FORMATS, useValue: {
|
|
2307
2341
|
parse: {
|
|
2308
2342
|
dateInput: [
|
|
2309
2343
|
'DD-MM-YYYY',
|
|
2310
|
-
'MM/DD/YYYY',
|
|
2311
|
-
'YYYY/MM/DD',
|
|
2312
2344
|
'DD/MM/YYYY',
|
|
2345
|
+
'YYYY/MM/DD',
|
|
2346
|
+
'MM/DD/YYYY',
|
|
2313
2347
|
'DD MMM YYYY',
|
|
2314
2348
|
'DD MMMM YYYY',
|
|
2315
2349
|
'DD-MMM-YYYY',
|
|
2316
2350
|
],
|
|
2317
2351
|
},
|
|
2318
2352
|
display: {
|
|
2319
|
-
dateInput: 'DD
|
|
2353
|
+
dateInput: 'DD/MMM/YYYY',
|
|
2320
2354
|
monthYearLabel: 'MMM YYYY',
|
|
2321
|
-
dateA11yLabel: 'DD
|
|
2355
|
+
dateA11yLabel: 'DD/MMM/YYYY',
|
|
2322
2356
|
monthYearA11yLabel: 'MMMM YYYY',
|
|
2323
2357
|
},
|
|
2324
2358
|
}
|
|
@@ -2328,7 +2362,7 @@ class AgeDateComponent {
|
|
|
2328
2362
|
useExisting: AgeDateComponent,
|
|
2329
2363
|
multi: true
|
|
2330
2364
|
},
|
|
2331
|
-
], 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\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 autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\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]=\"field()?.controlType\"\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 <span matSuffix class=\"right-date-text\">\r\n {{
|
|
2365
|
+
], 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\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 autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\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]=\"field()?.controlType\"\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 <span matSuffix class=\"right-date-text\" *ngIf=\"!this.service.checkIfValueIsEmpty(age)\">\r\n {{ age }} yrs\r\n </span>\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=\"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}.right-date-text{padding:4px 8px;border-radius:4px;font-weight:600;font-size:12px;color:#444;background:#f5f5f5;margin-right:7px}.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-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important;font-size:12px!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: i2.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$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.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"] }] });
|
|
2332
2366
|
}
|
|
2333
2367
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AgeDateComponent, decorators: [{
|
|
2334
2368
|
type: Component,
|
|
@@ -2343,18 +2377,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2343
2377
|
parse: {
|
|
2344
2378
|
dateInput: [
|
|
2345
2379
|
'DD-MM-YYYY',
|
|
2346
|
-
'MM/DD/YYYY',
|
|
2347
|
-
'YYYY/MM/DD',
|
|
2348
2380
|
'DD/MM/YYYY',
|
|
2381
|
+
'YYYY/MM/DD',
|
|
2382
|
+
'MM/DD/YYYY',
|
|
2349
2383
|
'DD MMM YYYY',
|
|
2350
2384
|
'DD MMMM YYYY',
|
|
2351
2385
|
'DD-MMM-YYYY',
|
|
2352
2386
|
],
|
|
2353
2387
|
},
|
|
2354
2388
|
display: {
|
|
2355
|
-
dateInput: 'DD
|
|
2389
|
+
dateInput: 'DD/MMM/YYYY',
|
|
2356
2390
|
monthYearLabel: 'MMM YYYY',
|
|
2357
|
-
dateA11yLabel: 'DD
|
|
2391
|
+
dateA11yLabel: 'DD/MMM/YYYY',
|
|
2358
2392
|
monthYearA11yLabel: 'MMMM YYYY',
|
|
2359
2393
|
},
|
|
2360
2394
|
}
|
|
@@ -2364,7 +2398,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2364
2398
|
useExisting: AgeDateComponent,
|
|
2365
2399
|
multi: true
|
|
2366
2400
|
},
|
|
2367
|
-
], 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\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 autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\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]=\"field()?.controlType\"\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 <span matSuffix class=\"right-date-text\">\r\n {{
|
|
2401
|
+
], 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\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 autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\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]=\"field()?.controlType\"\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 <span matSuffix class=\"right-date-text\" *ngIf=\"!this.service.checkIfValueIsEmpty(age)\">\r\n {{ age }} yrs\r\n </span>\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=\"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}.right-date-text{padding:4px 8px;border-radius:4px;font-weight:600;font-size:12px;color:#444;background:#f5f5f5;margin-right:7px}.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-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important;font-size:12px!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"] }]
|
|
2368
2402
|
}], ctorParameters: () => [{ type: MasterControlService }] });
|
|
2369
2403
|
|
|
2370
2404
|
class AdditionButtonComponent {
|
|
@@ -6827,6 +6861,9 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
6827
6861
|
if (Object.hasOwn(this.premiumDetails()?.Premium, 'isDisableDropdown')) {
|
|
6828
6862
|
this.annuityPremiumObj['configData']['isDisableDropdown'] = this.premiumDetails()?.Premium['isDisableDropdown'];
|
|
6829
6863
|
}
|
|
6864
|
+
if (Object.hasOwn(this.premiumDetails()?.Premium, 'options')) {
|
|
6865
|
+
this.annuityPremiumObj['options'] = this.premiumDetails()?.Premium['options'];
|
|
6866
|
+
}
|
|
6830
6867
|
}
|
|
6831
6868
|
if (!this.masterService.checkIfValueIsEmpty(this.premiumDetails()?.annuity)) {
|
|
6832
6869
|
// Create new object to trigger change detection
|
|
@@ -6840,6 +6877,9 @@ class AnnuityPremiumCalculatorComponent {
|
|
|
6840
6877
|
if (Object.hasOwn(this.premiumDetails()?.annuity, 'isDisableDropdown')) {
|
|
6841
6878
|
this.minimumAnnuityPayoutObj['configData']['isDisableDropdown'] = this.premiumDetails()?.annuity['isDisableDropdown'];
|
|
6842
6879
|
}
|
|
6880
|
+
if (Object.hasOwn(this.premiumDetails()?.annuity, 'options')) {
|
|
6881
|
+
this.minimumAnnuityPayoutObj['options'] = this.premiumDetails()?.annuity['options'];
|
|
6882
|
+
}
|
|
6843
6883
|
}
|
|
6844
6884
|
if (!this.masterService.checkIfValueIsEmpty(this.premiumDetails()?.calculateAnnuity)) {
|
|
6845
6885
|
if (!this.masterService.checkIfValueIsEmpty(this.premiumDetails()?.calculateAnnuity['controlStyle'])) {
|