master-control 0.5.0 → 0.5.2
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/annuity-calculator-radio/annuity-calculator-radio.component.mjs +3 -3
- package/esm2022/lib/button/button.component.mjs +7 -3
- package/esm2022/lib/radio/radio.component.mjs +3 -3
- package/esm2022/lib/toggle-button/toggle-button.component.mjs +7 -3
- package/fesm2022/master-control.mjs +14 -8
- package/fesm2022/master-control.mjs.map +1 -1
- package/lib/button/button.component.d.ts +3 -1
- package/lib/toggle-button/toggle-button.component.d.ts +3 -2
- package/master-control-0.5.02.tgz +0 -0
- package/package.json +1 -1
- package/master-control-0.5.00.tgz +0 -0
|
@@ -3,11 +3,15 @@ import { Component, input, Output, EventEmitter } from '@angular/core';
|
|
|
3
3
|
import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
|
4
4
|
import { MatButtonToggleModule } from '@angular/material/button-toggle';
|
|
5
5
|
import { CustomizedTooltipDirective } from '../directives/customized.tooltip.directive';
|
|
6
|
+
import { initializeFieldNameAttribute } from '../field-name-attribute.util';
|
|
6
7
|
import * as i0 from "@angular/core";
|
|
7
8
|
import * as i1 from "@angular/material/button-toggle";
|
|
8
9
|
import * as i2 from "@angular/common";
|
|
9
10
|
import * as i3 from "@angular/forms";
|
|
10
11
|
export class ToggleButtonComponent {
|
|
12
|
+
ngOnInit() {
|
|
13
|
+
initializeFieldNameAttribute(this.field());
|
|
14
|
+
}
|
|
11
15
|
reactiveFormControlobject = input();
|
|
12
16
|
field = input.required();
|
|
13
17
|
selectedValue = null;
|
|
@@ -45,7 +49,7 @@ export class ToggleButtonComponent {
|
|
|
45
49
|
useExisting: ToggleButtonComponent,
|
|
46
50
|
multi: true,
|
|
47
51
|
},
|
|
48
|
-
], ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\n @if(reactiveFormControlobject()) {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" name=\"
|
|
52
|
+
], ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\n @if(reactiveFormControlobject()) {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" [attr.name]=\"field()?.fieldNameAttribute\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [value]=\"selectedValue\"\n (change)=\"onSelectionChange($event.value)\" [formControl]=\"reactiveFormControlobject()\">\n @for (data of field()?.configData?.options; track $index) {\n <mat-button-toggle [value]=\"data.value\">\n <img *ngIf=\"data.imgUrl && !data.tooltipText\" [src]=\"data.imgUrl\" alt=\"\" class=\"toggle-img mx-1\" />\n\n {{ data.label }}\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"data.imgUrl && data.tooltipText\">\n <img [src]=\"data.imgUrl\" class=\"toggle-img mx-1\" />\n </span>\n\n <!-- \u2705 Single template that uses current data -->\n <ng-template #currentTooltip>\n <span [innerHTML]=\"data.tooltipText\"></span>\n </ng-template>\n </mat-button-toggle>\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\n <span class=\"second-box\">\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\n <span>{{ data.toggleTopText }}</span>\n </span>\n </div>\n }\n </mat-button-toggle-group>\n }@else {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" name=\"fontStyle\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [(ngModel)]=\"selectedValue\"\n (change)=\"onSelectionChange($event.value)\">\n @for (data of field()?.configData?.options; track $index) {\n <mat-button-toggle [value]=\"data.value\">\n {{ data.label }}\n <!-- <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"data.imgUrl && data.tooltipText\">\n <img [src]=\"data.imgUrl\" />\n </span> -->\n\n <!-- \u2705 Single template that uses current data -->\n <!-- <ng-template #currentTooltip>\n <span [innerHTML]=\"data.tooltipText\"></span>\n </ng-template> -->\n </mat-button-toggle>\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\n <span class=\"second-box\">\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\n <span>{{ data.toggleTopText }}</span>\n </span>\n </div>\n }\n </mat-button-toggle-group>\n }\n</div>\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{border-radius:50px}:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{height:32px!important;transform:translateY(-9px);font-size:12px;font-weight:400;color:#444;letter-spacing:1px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button{background:#fff!important;border-radius:50px!important;box-shadow:0 0 15px #00000014!important;height:32px;padding:0 24px;border:1px solid #ffbb00}:host ::ng-deep .mat-button-toggle-button{padding:0 24px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content{font-weight:600!important;letter-spacing:1px}:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none}:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:1px solid #ddd!important;background:#f5f5f5!important;height:33px}:host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none!important}:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked{background:#f5f5f5!important;border-radius:50px}.toggle-img{width:12px}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{overflow:unset!important}.second-box{position:relative;top:-4px}.top-green-card{font-size:10px;font-weight:800;color:#fff;background:#169f7d;border-top-left-radius:999px;border-top-right-radius:999px;position:absolute;right:3em;padding:2px 16px 2px 12px;transform:translate(5px,-19px);z-index:99999;height:18px}.green-card-img{width:14.86px;margin-bottom:6px}:host ::ng-deep .mat-button-toggle-button{width:var(--toggle-button-width , 100%)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
49
53
|
}
|
|
50
54
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
51
55
|
type: Component,
|
|
@@ -55,10 +59,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
55
59
|
useExisting: ToggleButtonComponent,
|
|
56
60
|
multi: true,
|
|
57
61
|
},
|
|
58
|
-
], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\n @if(reactiveFormControlobject()) {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" name=\"
|
|
62
|
+
], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\n @if(reactiveFormControlobject()) {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" [attr.name]=\"field()?.fieldNameAttribute\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [value]=\"selectedValue\"\n (change)=\"onSelectionChange($event.value)\" [formControl]=\"reactiveFormControlobject()\">\n @for (data of field()?.configData?.options; track $index) {\n <mat-button-toggle [value]=\"data.value\">\n <img *ngIf=\"data.imgUrl && !data.tooltipText\" [src]=\"data.imgUrl\" alt=\"\" class=\"toggle-img mx-1\" />\n\n {{ data.label }}\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"data.imgUrl && data.tooltipText\">\n <img [src]=\"data.imgUrl\" class=\"toggle-img mx-1\" />\n </span>\n\n <!-- \u2705 Single template that uses current data -->\n <ng-template #currentTooltip>\n <span [innerHTML]=\"data.tooltipText\"></span>\n </ng-template>\n </mat-button-toggle>\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\n <span class=\"second-box\">\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\n <span>{{ data.toggleTopText }}</span>\n </span>\n </div>\n }\n </mat-button-toggle-group>\n }@else {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" name=\"fontStyle\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [(ngModel)]=\"selectedValue\"\n (change)=\"onSelectionChange($event.value)\">\n @for (data of field()?.configData?.options; track $index) {\n <mat-button-toggle [value]=\"data.value\">\n {{ data.label }}\n <!-- <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"data.imgUrl && data.tooltipText\">\n <img [src]=\"data.imgUrl\" />\n </span> -->\n\n <!-- \u2705 Single template that uses current data -->\n <!-- <ng-template #currentTooltip>\n <span [innerHTML]=\"data.tooltipText\"></span>\n </ng-template> -->\n </mat-button-toggle>\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\n <span class=\"second-box\">\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\n <span>{{ data.toggleTopText }}</span>\n </span>\n </div>\n }\n </mat-button-toggle-group>\n }\n</div>\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{border-radius:50px}:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{height:32px!important;transform:translateY(-9px);font-size:12px;font-weight:400;color:#444;letter-spacing:1px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button{background:#fff!important;border-radius:50px!important;box-shadow:0 0 15px #00000014!important;height:32px;padding:0 24px;border:1px solid #ffbb00}:host ::ng-deep .mat-button-toggle-button{padding:0 24px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content{font-weight:600!important;letter-spacing:1px}:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none}:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:1px solid #ddd!important;background:#f5f5f5!important;height:33px}:host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none!important}:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked{background:#f5f5f5!important;border-radius:50px}.toggle-img{width:12px}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{overflow:unset!important}.second-box{position:relative;top:-4px}.top-green-card{font-size:10px;font-weight:800;color:#fff;background:#169f7d;border-top-left-radius:999px;border-top-right-radius:999px;position:absolute;right:3em;padding:2px 16px 2px 12px;transform:translate(5px,-19px);z-index:99999;height:18px}.green-card-img{width:14.86px;margin-bottom:6px}:host ::ng-deep .mat-button-toggle-button{width:var(--toggle-button-width , 100%)!important}\n"] }]
|
|
59
63
|
}], propDecorators: { selectionChanged: [{
|
|
60
64
|
type: Output
|
|
61
65
|
}], change: [{
|
|
62
66
|
type: Output
|
|
63
67
|
}] } });
|
|
64
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
68
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RvZ2dsZS1idXR0b24vdG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RvZ2dsZS1idXR0b24vdG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFDQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBVSxNQUFNLGVBQWUsQ0FBQztBQUMvRSxPQUFPLEVBQXdCLFdBQVcsRUFBRSxpQkFBaUIsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQzNHLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxNQUFNLGlDQUFpQyxDQUFDO0FBQ3hFLE9BQU8sRUFBRSwwQkFBMEIsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBQ3hGLE9BQU8sRUFBRSw0QkFBNEIsRUFBRSxNQUFNLDhCQUE4QixDQUFDOzs7OztBQWdCNUUsTUFBTSxPQUFPLHFCQUFxQjtJQUVoQyxRQUFRO1FBQ04sNEJBQTRCLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDLENBQUM7SUFDN0MsQ0FBQztJQUNELHlCQUF5QixHQUFRLEtBQUssRUFBTyxDQUFDO0lBQzlDLEtBQUssR0FBUyxLQUFLLENBQUMsUUFBUSxFQUFPLENBQUM7SUFDcEMsYUFBYSxHQUFRLElBQUksQ0FBQztJQUUxQixtREFBbUQ7SUFDekMsZ0JBQWdCLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUMzQyxNQUFNLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUUzQywrQkFBK0I7SUFDL0IsUUFBUSxHQUFRLEdBQUcsRUFBRSxHQUFFLENBQUMsQ0FBQztJQUN6QixTQUFTLEdBQVEsR0FBRyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBRTFCLFVBQVUsQ0FBQyxLQUFVO1FBQ25CLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO0lBQzdCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxFQUFPO1FBQ3RCLElBQUksQ0FBQyxRQUFRLEdBQUcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFFRCxpQkFBaUIsQ0FBQyxFQUFPO1FBQ3ZCLElBQUksQ0FBQyxTQUFTLEdBQUcsRUFBRSxDQUFDO0lBQ3RCLENBQUM7SUFFRCxnQkFBZ0IsQ0FBRSxVQUFtQjtRQUNuQyxrQ0FBa0M7SUFDcEMsQ0FBQztJQUVELDBCQUEwQjtJQUMxQixpQkFBaUIsQ0FBQyxLQUFVO1FBQzFCLElBQUksQ0FBQyxhQUFhLEdBQUcsS0FBSyxDQUFDO1FBQzNCLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDckIsSUFBSSxDQUFDLFNBQVMsRUFBRSxDQUFDO1FBRWpCLG1DQUFtQztRQUNuQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQzFCLENBQUM7d0dBMUNVLHFCQUFxQjs0RkFBckIscUJBQXFCLDRiQVJyQjtZQUNQO2dCQUNFLE9BQU8sRUFBRSxpQkFBaUI7Z0JBQzFCLFdBQVcsRUFBRSxxQkFBcUI7Z0JBQ2xDLEtBQUssRUFBRSxJQUFJO2FBQ1o7U0FDRiwwQkNwQkwscXRGQTJEQSw4OEREaERZLHFCQUFxQixzb0JBQUUsWUFBWSxxVEFBRSxtQkFBbUIseVRBQUUsV0FBVyx1UEFBRSwwQkFBMEI7OzRGQVdoRyxxQkFBcUI7a0JBZGpDLFNBQVM7K0JBQ0UsbUJBQW1CLGNBQ2pCLElBQUksV0FDUCxDQUFDLHFCQUFxQixFQUFFLFlBQVksRUFBRSxtQkFBbUIsRUFBRSxXQUFXLEVBQUUsMEJBQTBCLENBQUMsYUFHakc7d0JBQ1A7NEJBQ0UsT0FBTyxFQUFFLGlCQUFpQjs0QkFDMUIsV0FBVyx1QkFBdUI7NEJBQ2xDLEtBQUssRUFBRSxJQUFJO3lCQUNaO3FCQUNGOzhCQVlPLGdCQUFnQjtzQkFBekIsTUFBTTtnQkFDRyxNQUFNO3NCQUFmLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJcbmltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDb21wb25lbnQsIGlucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciwgT25Jbml0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBDb250cm9sVmFsdWVBY2Nlc3NvciwgRm9ybXNNb2R1bGUsIE5HX1ZBTFVFX0FDQ0VTU09SLCBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgTWF0QnV0dG9uVG9nZ2xlTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvYnV0dG9uLXRvZ2dsZSc7XG5pbXBvcnQgeyBDdXN0b21pemVkVG9vbHRpcERpcmVjdGl2ZSB9IGZyb20gJy4uL2RpcmVjdGl2ZXMvY3VzdG9taXplZC50b29sdGlwLmRpcmVjdGl2ZSc7XG5pbXBvcnQgeyBpbml0aWFsaXplRmllbGROYW1lQXR0cmlidXRlIH0gZnJvbSAnLi4vZmllbGQtbmFtZS1hdHRyaWJ1dGUudXRpbCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2xpYi10b2dnbGUtYnV0dG9uJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW01hdEJ1dHRvblRvZ2dsZU1vZHVsZSwgQ29tbW9uTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlLCBGb3Jtc01vZHVsZSwgQ3VzdG9taXplZFRvb2x0aXBEaXJlY3RpdmVdLFxuICB0ZW1wbGF0ZVVybDogJy4vdG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi90b2dnbGUtYnV0dG9uLmNvbXBvbmVudC5jc3MnLFxuICBwcm92aWRlcnM6IFtcbiAgICAgIHtcbiAgICAgICAgcHJvdmlkZTogTkdfVkFMVUVfQUNDRVNTT1IsXG4gICAgICAgIHVzZUV4aXN0aW5nOiBUb2dnbGVCdXR0b25Db21wb25lbnQsXG4gICAgICAgIG11bHRpOiB0cnVlLFxuICAgICAgfSxcbiAgICBdLFxufSlcbmV4cG9ydCBjbGFzcyBUb2dnbGVCdXR0b25Db21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciwgT25Jbml0IHtcblxuICBuZ09uSW5pdCgpIHtcbiAgICBpbml0aWFsaXplRmllbGROYW1lQXR0cmlidXRlKHRoaXMuZmllbGQoKSk7XG4gIH1cbiAgcmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdDogYW55ID0gaW5wdXQ8YW55PigpO1xuICBmaWVsZCA6IGFueSA9IGlucHV0LnJlcXVpcmVkPGFueT4oKTtcbiAgc2VsZWN0ZWRWYWx1ZTogYW55ID0gbnVsbDtcblxuICAvLyBPdXRwdXQgZXZlbnRzIGZvciBwYXJlbnQgY29tcG9uZW50IGNvbW11bmljYXRpb25cbiAgQE91dHB1dCgpIHNlbGVjdGlvbkNoYW5nZWQgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcbiAgQE91dHB1dCgpIGNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gIC8vIENvbnRyb2xWYWx1ZUFjY2Vzc29yIG1ldGhvZHNcbiAgb25DaGFuZ2U6IGFueSA9ICgpID0+IHt9O1xuICBvblRvdWNoZWQ6IGFueSA9ICgpID0+IHt9O1xuXG4gIHdyaXRlVmFsdWUodmFsdWU6IGFueSk6IHZvaWQge1xuICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZSA9IHZhbHVlO1xuICB9XG5cbiAgcmVnaXN0ZXJPbkNoYW5nZShmbjogYW55KTogdm9pZCB7XG4gICAgdGhpcy5vbkNoYW5nZSA9IGZuO1xuICB9XG5cbiAgcmVnaXN0ZXJPblRvdWNoZWQoZm46IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25Ub3VjaGVkID0gZm47XG4gIH1cblxuICBzZXREaXNhYmxlZFN0YXRlPyhpc0Rpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgLy8gSGFuZGxlIGRpc2FibGVkIHN0YXRlIGlmIG5lZWRlZFxuICB9XG5cbiAgLy8gSGFuZGxlIHNlbGVjdGlvbiBjaGFuZ2VcbiAgb25TZWxlY3Rpb25DaGFuZ2UodmFsdWU6IGFueSk6IHZvaWQge1xuICAgIHRoaXMuc2VsZWN0ZWRWYWx1ZSA9IHZhbHVlO1xuICAgIHRoaXMub25DaGFuZ2UodmFsdWUpO1xuICAgIHRoaXMub25Ub3VjaGVkKCk7XG5cbiAgICAvLyBFbWl0IGV2ZW50cyBmb3IgcGFyZW50IGNvbXBvbmVudFxuICAgIHRoaXMuc2VsZWN0aW9uQ2hhbmdlZC5lbWl0KHZhbHVlKTtcbiAgICB0aGlzLmNoYW5nZS5lbWl0KHZhbHVlKTtcbiAgfVxufVxuIiwiPGRpdiBzdHlsZT1cInBvc2l0aW9uOiByZWxhdGl2ZVwiIFtuZ0NsYXNzXT1cImZpZWxkKCk/LmNzc0NsYXNzXCI+XG4gIEBpZihyZWFjdGl2ZUZvcm1Db250cm9sb2JqZWN0KCkpIHtcbiAgPG1hdC1idXR0b24tdG9nZ2xlLWdyb3VwIFtuZ1N0eWxlXT1cIntcbiAgICAgICctLXRvZ2dsZS1idXR0b24td2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LndpZHRoICxcbiAgICB9XCIgW2F0dHIubmFtZV09XCJmaWVsZCgpPy5maWVsZE5hbWVBdHRyaWJ1dGVcIiBjbGFzcz1cImN1c3RvbS1tYXQtdG9nZ2xlXCIgYXJpYS1sYWJlbD1cIkZvbnQgU3R5bGVcIlxuICAgICpuZ0lmPVwiZmllbGQoKSAmJiBmaWVsZCgpPy5pc1Zpc2libGUgJiYgZmllbGQoKT8uY29uZmlnRGF0YT8ub3B0aW9uc1wiIFt2YWx1ZV09XCJzZWxlY3RlZFZhbHVlXCJcbiAgICAoY2hhbmdlKT1cIm9uU2VsZWN0aW9uQ2hhbmdlKCRldmVudC52YWx1ZSlcIiBbZm9ybUNvbnRyb2xdPVwicmVhY3RpdmVGb3JtQ29udHJvbG9iamVjdCgpXCI+XG4gICAgQGZvciAoZGF0YSBvZiBmaWVsZCgpPy5jb25maWdEYXRhPy5vcHRpb25zOyB0cmFjayAkaW5kZXgpIHtcbiAgICA8bWF0LWJ1dHRvbi10b2dnbGUgW3ZhbHVlXT1cImRhdGEudmFsdWVcIj5cbiAgICAgIDxpbWcgKm5nSWY9XCJkYXRhLmltZ1VybCAmJiAhZGF0YS50b29sdGlwVGV4dFwiIFtzcmNdPVwiZGF0YS5pbWdVcmxcIiBhbHQ9XCJcIiBjbGFzcz1cInRvZ2dsZS1pbWcgbXgtMVwiIC8+XG5cbiAgICAgIHt7IGRhdGEubGFiZWwgfX1cbiAgICAgIDxzcGFuIFthcHBUb29sdGlwVGVtcGxhdGVdPVwiY3VycmVudFRvb2x0aXBcIiBhcnJvd1Bvc2l0aW9uPVwibGVmdFwiIHRvb2x0aXBQb3NpdGlvbj1cImJvdHRvbVwiXG4gICAgICAgICpuZ0lmPVwiZGF0YS5pbWdVcmwgJiYgZGF0YS50b29sdGlwVGV4dFwiPlxuICAgICAgICA8aW1nIFtzcmNdPVwiZGF0YS5pbWdVcmxcIiBjbGFzcz1cInRvZ2dsZS1pbWcgbXgtMVwiIC8+XG4gICAgICA8L3NwYW4+XG5cbiAgICAgIDwhLS0g4pyFIFNpbmdsZSB0ZW1wbGF0ZSB0aGF0IHVzZXMgY3VycmVudCBkYXRhIC0tPlxuICAgICAgPG5nLXRlbXBsYXRlICNjdXJyZW50VG9vbHRpcD5cbiAgICAgICAgPHNwYW4gW2lubmVySFRNTF09XCJkYXRhLnRvb2x0aXBUZXh0XCI+PC9zcGFuPlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L21hdC1idXR0b24tdG9nZ2xlPlxuICAgIDxkaXYgY2xhc3M9XCJ0b3AtZ3JlZW4tY2FyZFwiICpuZ0lmPVwiZGF0YS50b2dnbGVUb3BUZXh0XCI+XG4gICAgICA8c3BhbiBjbGFzcz1cInNlY29uZC1ib3hcIj5cbiAgICAgICAgPGltZyBjbGFzcz1cImdyZWVuLWNhcmQtaW1nXCIgKm5nSWY9XCJkYXRhLnRvcEltYWdlXCIgW3NyY109XCJkYXRhLnRvcEltYWdlXCIgYWx0PVwiXCIgLz5cbiAgICAgICAgPHNwYW4+e3sgZGF0YS50b2dnbGVUb3BUZXh0IH19PC9zcGFuPlxuICAgICAgPC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIH1cbiAgPC9tYXQtYnV0dG9uLXRvZ2dsZS1ncm91cD5cbiAgfUBlbHNlIHtcbiAgPG1hdC1idXR0b24tdG9nZ2xlLWdyb3VwIFtuZ1N0eWxlXT1cIntcbiAgICAgICctLXRvZ2dsZS1idXR0b24td2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LndpZHRoICxcbiAgICB9XCIgbmFtZT1cImZvbnRTdHlsZVwiIGNsYXNzPVwiY3VzdG9tLW1hdC10b2dnbGVcIiBhcmlhLWxhYmVsPVwiRm9udCBTdHlsZVwiXG4gICAgKm5nSWY9XCJmaWVsZCgpICYmIGZpZWxkKCk/LmlzVmlzaWJsZSAmJiBmaWVsZCgpPy5jb25maWdEYXRhPy5vcHRpb25zXCIgWyhuZ01vZGVsKV09XCJzZWxlY3RlZFZhbHVlXCJcbiAgICAoY2hhbmdlKT1cIm9uU2VsZWN0aW9uQ2hhbmdlKCRldmVudC52YWx1ZSlcIj5cbiAgICBAZm9yIChkYXRhIG9mIGZpZWxkKCk/LmNvbmZpZ0RhdGE/Lm9wdGlvbnM7IHRyYWNrICRpbmRleCkge1xuICAgIDxtYXQtYnV0dG9uLXRvZ2dsZSBbdmFsdWVdPVwiZGF0YS52YWx1ZVwiPlxuICAgICAge3sgZGF0YS5sYWJlbCB9fVxuICAgICAgPCEtLSA8c3BhbiBbYXBwVG9vbHRpcFRlbXBsYXRlXT1cImN1cnJlbnRUb29sdGlwXCIgYXJyb3dQb3NpdGlvbj1cImxlZnRcIiB0b29sdGlwUG9zaXRpb249XCJib3R0b21cIlxuICAgICAgICAqbmdJZj1cImRhdGEuaW1nVXJsICYmIGRhdGEudG9vbHRpcFRleHRcIj5cbiAgICAgICAgPGltZyBbc3JjXT1cImRhdGEuaW1nVXJsXCIgLz5cbiAgICAgIDwvc3Bhbj4gLS0+XG5cbiAgICAgIDwhLS0g4pyFIFNpbmdsZSB0ZW1wbGF0ZSB0aGF0IHVzZXMgY3VycmVudCBkYXRhIC0tPlxuICAgICAgPCEtLSA8bmctdGVtcGxhdGUgI2N1cnJlbnRUb29sdGlwPlxuICAgICAgICA8c3BhbiBbaW5uZXJIVE1MXT1cImRhdGEudG9vbHRpcFRleHRcIj48L3NwYW4+XG4gICAgICA8L25nLXRlbXBsYXRlPiAtLT5cbiAgICA8L21hdC1idXR0b24tdG9nZ2xlPlxuICAgIDxkaXYgY2xhc3M9XCJ0b3AtZ3JlZW4tY2FyZFwiICpuZ0lmPVwiZGF0YS50b2dnbGVUb3BUZXh0XCI+XG4gICAgICA8c3BhbiBjbGFzcz1cInNlY29uZC1ib3hcIj5cbiAgICAgICAgPGltZyBjbGFzcz1cImdyZWVuLWNhcmQtaW1nXCIgKm5nSWY9XCJkYXRhLnRvcEltYWdlXCIgW3NyY109XCJkYXRhLnRvcEltYWdlXCIgYWx0PVwiXCIgLz5cbiAgICAgICAgPHNwYW4+e3sgZGF0YS50b2dnbGVUb3BUZXh0IH19PC9zcGFuPlxuICAgICAgPC9zcGFuPlxuICAgIDwvZGl2PlxuICAgIH1cbiAgPC9tYXQtYnV0dG9uLXRvZ2dsZS1ncm91cD5cbiAgfVxuPC9kaXY+XG4iXX0=
|
|
@@ -438,13 +438,16 @@ class ButtonComponent {
|
|
|
438
438
|
constructor(masterService) {
|
|
439
439
|
this.masterService = masterService;
|
|
440
440
|
}
|
|
441
|
+
ngOnInit() {
|
|
442
|
+
initializeFieldNameAttribute(this.field());
|
|
443
|
+
}
|
|
441
444
|
field = input.required();
|
|
442
445
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
443
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<Button\n class=\"button\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [ngStyle]=\"\n {\n '--button-border-width': field()?.controlStyle?.borderWidth ,\n '--button-border-color': field()?.controlStyle?.borderColor ,\n '--button-border-style': field()?.controlStyle?.borderStyle ,\n '--button-width': field()?.controlStyle?.width ,\n '--button-font-size': field()?.controlStyle?.fontSize ,\n '--button-font-weight': field()?.controlStyle?.fontWeight ,\n '--button-background': field()?.controlStyle?.background ,\n '--button-border-radius': field()?.controlStyle?.borderRadius ,\n '--button-text-color': field()?.controlStyle?.color ,\n '--button-margin': field()?.controlStyle?.margin ,\n }\"\n [ngClass]=\"field()?.isDisable ? 'button-disable' : 'button'\"\n>\n<span class=\"button-text\">\n<img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl'>\n<span>{{field()?.label}}</span>\n</span>\n</Button>\n", styles: [".button{height:var(--button-height, 32px)!important;min-width:var(--button-width, 164px)!important;background:var(--button-background, #ffbb00)!important;border-width:var(--button-border-width, 0px)!important;border-color:var(--button-border-color, #fb0)!important;border-style:var(--button-border-style, solid)!important;border-radius:var(--button-border-radius, 8px)!important;font-size:var(--button-font-size, 12px)!important;font-weight:var(--button-font-weight, 800)!important;color:var(--button-text-color, #444)!important;max-width:fit-content}.button-text{display:flex;justify-content:center;gap:4px}.button-text img{margin-top:3px}*{font-family:Mulish!important}.button-disable{background:#ececec!important}@media screen and (max-width: 768px){.button{height:40px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
446
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<Button\n class=\"button\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [name]=\"field()?.fieldNameAttribute\"\n [ngStyle]=\"\n {\n '--button-border-width': field()?.controlStyle?.borderWidth ,\n '--button-border-color': field()?.controlStyle?.borderColor ,\n '--button-border-style': field()?.controlStyle?.borderStyle ,\n '--button-width': field()?.controlStyle?.width ,\n '--button-font-size': field()?.controlStyle?.fontSize ,\n '--button-font-weight': field()?.controlStyle?.fontWeight ,\n '--button-background': field()?.controlStyle?.background ,\n '--button-border-radius': field()?.controlStyle?.borderRadius ,\n '--button-text-color': field()?.controlStyle?.color ,\n '--button-margin': field()?.controlStyle?.margin ,\n }\"\n [ngClass]=\"field()?.isDisable ? 'button-disable' : 'button'\"\n>\n<span class=\"button-text\">\n<img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl'>\n<span>{{field()?.label}}</span>\n</span>\n</Button>\n", styles: [".button{height:var(--button-height, 32px)!important;min-width:var(--button-width, 164px)!important;background:var(--button-background, #ffbb00)!important;border-width:var(--button-border-width, 0px)!important;border-color:var(--button-border-color, #fb0)!important;border-style:var(--button-border-style, solid)!important;border-radius:var(--button-border-radius, 8px)!important;font-size:var(--button-font-size, 12px)!important;font-weight:var(--button-font-weight, 800)!important;color:var(--button-text-color, #444)!important;max-width:fit-content}.button-text{display:flex;justify-content:center;gap:4px}.button-text img{margin-top:3px}*{font-family:Mulish!important}.button-disable{background:#ececec!important}@media screen and (max-width: 768px){.button{height:40px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
444
447
|
}
|
|
445
448
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
446
449
|
type: Component,
|
|
447
|
-
args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule], template: "<Button\n class=\"button\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [ngStyle]=\"\n {\n '--button-border-width': field()?.controlStyle?.borderWidth ,\n '--button-border-color': field()?.controlStyle?.borderColor ,\n '--button-border-style': field()?.controlStyle?.borderStyle ,\n '--button-width': field()?.controlStyle?.width ,\n '--button-font-size': field()?.controlStyle?.fontSize ,\n '--button-font-weight': field()?.controlStyle?.fontWeight ,\n '--button-background': field()?.controlStyle?.background ,\n '--button-border-radius': field()?.controlStyle?.borderRadius ,\n '--button-text-color': field()?.controlStyle?.color ,\n '--button-margin': field()?.controlStyle?.margin ,\n }\"\n [ngClass]=\"field()?.isDisable ? 'button-disable' : 'button'\"\n>\n<span class=\"button-text\">\n<img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl'>\n<span>{{field()?.label}}</span>\n</span>\n</Button>\n", styles: [".button{height:var(--button-height, 32px)!important;min-width:var(--button-width, 164px)!important;background:var(--button-background, #ffbb00)!important;border-width:var(--button-border-width, 0px)!important;border-color:var(--button-border-color, #fb0)!important;border-style:var(--button-border-style, solid)!important;border-radius:var(--button-border-radius, 8px)!important;font-size:var(--button-font-size, 12px)!important;font-weight:var(--button-font-weight, 800)!important;color:var(--button-text-color, #444)!important;max-width:fit-content}.button-text{display:flex;justify-content:center;gap:4px}.button-text img{margin-top:3px}*{font-family:Mulish!important}.button-disable{background:#ececec!important}@media screen and (max-width: 768px){.button{height:40px!important}}\n"] }]
|
|
450
|
+
args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule], template: "<Button\n class=\"button\"\n *ngIf=\"field() && field()?.isVisible\"\n [disabled]=\"field()?.isDisable\"\n [name]=\"field()?.fieldNameAttribute\"\n [ngStyle]=\"\n {\n '--button-border-width': field()?.controlStyle?.borderWidth ,\n '--button-border-color': field()?.controlStyle?.borderColor ,\n '--button-border-style': field()?.controlStyle?.borderStyle ,\n '--button-width': field()?.controlStyle?.width ,\n '--button-font-size': field()?.controlStyle?.fontSize ,\n '--button-font-weight': field()?.controlStyle?.fontWeight ,\n '--button-background': field()?.controlStyle?.background ,\n '--button-border-radius': field()?.controlStyle?.borderRadius ,\n '--button-text-color': field()?.controlStyle?.color ,\n '--button-margin': field()?.controlStyle?.margin ,\n }\"\n [ngClass]=\"field()?.isDisable ? 'button-disable' : 'button'\"\n>\n<span class=\"button-text\">\n<img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl'>\n<span>{{field()?.label}}</span>\n</span>\n</Button>\n", styles: [".button{height:var(--button-height, 32px)!important;min-width:var(--button-width, 164px)!important;background:var(--button-background, #ffbb00)!important;border-width:var(--button-border-width, 0px)!important;border-color:var(--button-border-color, #fb0)!important;border-style:var(--button-border-style, solid)!important;border-radius:var(--button-border-radius, 8px)!important;font-size:var(--button-font-size, 12px)!important;font-weight:var(--button-font-weight, 800)!important;color:var(--button-text-color, #444)!important;max-width:fit-content}.button-text{display:flex;justify-content:center;gap:4px}.button-text img{margin-top:3px}*{font-family:Mulish!important}.button-disable{background:#ececec!important}@media screen and (max-width: 768px){.button{height:40px!important}}\n"] }]
|
|
448
451
|
}], ctorParameters: () => [{ type: MasterControlService }] });
|
|
449
452
|
|
|
450
453
|
class CustomizedTooltipDirective {
|
|
@@ -793,7 +796,7 @@ class RadioComponent {
|
|
|
793
796
|
useExisting: RadioComponent,
|
|
794
797
|
multi: true
|
|
795
798
|
}
|
|
796
|
-
], ngImport: i0, template: "<div [class]=\"field()?.configData?.isInlineLabel ? 'radio-inline-wrapper' : ''\">\n <label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [class.radio-inline-label]=\"field()?.configData?.isInlineLabel\" [ngStyle]=\"{\n }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().configData?.labelIconUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n </label>\n @if(reactiveFormControlobject()) {\n <mat-radio-group [class]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *ngIf=\"field() && field()?.isVisible\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldNameAttribute + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }@else {\n <mat-radio-group [class]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *ngIf=\"field() && field()?.isVisible\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldNameAttribute + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }\n <div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.patternMessage}}.\n </div>\n</div>\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;height:100%;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}@media (max-width: 400px){.radio-btn-group .radio-card-gender.two-options{min-width:0!important;width:50%!important;max-width:50%!important}}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;pointer-events:none;cursor:none}@media (min-width: 769px){.radio-inline-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem}.radio-inline-label{flex:1;margin-bottom:0!important;white-space:normal!important}.radio-inline-group{flex-shrink:0}}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
799
|
+
], ngImport: i0, template: "<div [class]=\"field()?.configData?.isInlineLabel ? 'radio-inline-wrapper' : ''\">\n <label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [class.radio-inline-label]=\"field()?.configData?.isInlineLabel\" [ngStyle]=\"{\n }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().configData?.labelIconUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n </label>\n @if(reactiveFormControlobject()) {\n <mat-radio-group [class]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *ngIf=\"field() && field()?.isVisible\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldNameAttribute\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldNameAttribute + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }@else {\n <mat-radio-group [class]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *ngIf=\"field() && field()?.isVisible\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldNameAttribute\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldNameAttribute + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }\n <div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.patternMessage}}.\n </div>\n</div>\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;height:100%;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}@media (max-width: 400px){.radio-btn-group .radio-card-gender.two-options{min-width:0!important;width:50%!important;max-width:50%!important}}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;pointer-events:none;cursor:none}@media (min-width: 769px){.radio-inline-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem}.radio-inline-label{flex:1;margin-bottom:0!important;white-space:normal!important}.radio-inline-group{flex-shrink:0}}\n"], dependencies: [{ kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i2$2.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i2$2.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
797
800
|
}
|
|
798
801
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioComponent, decorators: [{
|
|
799
802
|
type: Component,
|
|
@@ -809,7 +812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
809
812
|
useExisting: RadioComponent,
|
|
810
813
|
multi: true
|
|
811
814
|
}
|
|
812
|
-
], template: "<div [class]=\"field()?.configData?.isInlineLabel ? 'radio-inline-wrapper' : ''\">\n <label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [class.radio-inline-label]=\"field()?.configData?.isInlineLabel\" [ngStyle]=\"{\n }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().configData?.labelIconUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n </label>\n @if(reactiveFormControlobject()) {\n <mat-radio-group [class]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *ngIf=\"field() && field()?.isVisible\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldNameAttribute + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }@else {\n <mat-radio-group [class]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *ngIf=\"field() && field()?.isVisible\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldNameAttribute + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }\n <div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.patternMessage}}.\n </div>\n</div>\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;height:100%;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}@media (max-width: 400px){.radio-btn-group .radio-card-gender.two-options{min-width:0!important;width:50%!important;max-width:50%!important}}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;pointer-events:none;cursor:none}@media (min-width: 769px){.radio-inline-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem}.radio-inline-label{flex:1;margin-bottom:0!important;white-space:normal!important}.radio-inline-group{flex-shrink:0}}\n"] }]
|
|
815
|
+
], template: "<div [class]=\"field()?.configData?.isInlineLabel ? 'radio-inline-wrapper' : ''\">\n <label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [class.radio-inline-label]=\"field()?.configData?.isInlineLabel\" [ngStyle]=\"{\n }\">{{field()?.label}}<span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\n <img [src]=\"field().configData?.labelIconUrl\" class=\"toggle-img mx-1\" />\n </span>\n <ng-template #HtmlContent>\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\n </ng-template>\n </label>\n @if(reactiveFormControlobject()) {\n <mat-radio-group [class]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *ngIf=\"field() && field()?.isVisible\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n [formControl]=\"reactiveFormControlobject()\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldNameAttribute\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || reactiveFormControlobject?.disabled || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldNameAttribute + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }@else {\n <mat-radio-group [class]=\"'radio-btn-group radio-btn-gender ' + field()?.fieldName + (field()?.configData?.isInlineLabel ? ' radio-inline-group' : ' w-100')\" *ngIf=\"field() && field()?.isVisible\"\n [required]=\"field()?.validators?.isRequired\"\n [value]=\"inputValue\"\n (change)=\"onRadioGroupChange($event)\"\n [id]=\"field()?.fieldName\"\n [attr.name]=\"field()?.fieldNameAttribute\"\n >\n <div\n class=\"card radio-card-gender py-auto px-1\"\n *ngFor=\"let data of field()?.options\"\n [ngClass]=\"{'disable-radio-btn': field()?.isDisable || data.disabled === true || data.disabled === 'true', 'two-options': field()?.options?.length === 2}\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n [ngStyle]=\"{\n '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,\n '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,\n '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,\n '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,\n }\"\n >\n <mat-radio-button\n style=\"min-width: 72px; text-align: center;\"\n class=\"radioButtonGender\"\n [value]=\"data.value\"\n [disabled]=\"data.disabled === true || data.disabled === 'true'\"\n [id]=\"field()?.fieldName + '_' + data.value\"\n [name]=\"field()?.fieldNameAttribute + '_' + data.value\"\n >\n <span style=\"white-space: pre-line;\" class=\"forRadioLabel\" [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color,\n }\">{{ data.label }}\n <img class=\"radio-btn-icon\" *ngIf=\"field()?.imageUrl\" [src]=\"field()?.imageUrl\" alt=\"\">\n </span>\n </mat-radio-button>\n </div>\n </mat-radio-group>\n }\n <div class=\"error-message\" *ngIf=\"false\">\n {{field()?.validators?.patternMessage}}.\n </div>\n</div>\n", styles: [".radio-selection-border{border:1px solid #ffbb00!important;background:#fffaeb!important}*{font-family:mulish!important}.field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important;white-space:pre-wrap!important}.error-message{color:red}.toggle-img{width:12px;margin-left:8px!important}@media screen and (max-width: 768px){.toggle-img{width:16px}}.radio-btn-group{display:flex;align-items:center;gap:1rem;align-self:stretch}::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio{display:none!important}.radio-card-gender{box-shadow:none;border-color:var(--radio-button-border-color,#DADADA);border-width:var(--radio-button-border-width, 1px solid);background:var(--radio-button-background-color, #FFFFFF);display:flex;align-items:center;cursor:pointer;width:max-content!important;height:100%;border-radius:var(--radio-button-border-radius, 6px)}.radio-card-gender.two-options{min-width:144px!important}@media (max-width: 400px){.radio-btn-group .radio-card-gender.two-options{min-width:0!important;width:50%!important;max-width:50%!important}}::ng-deep .radioButtonGender .mdc-form-field .mdc-radio{display:none!important}.forRadioLabel{font-size:var(--radio-button-font-size, 12px)!important;font-weight:var(--radio-button-font-weight, 400);cursor:pointer;color:var(--radio-button-font-color, #444444)}.radio-btn-icon{margin-top:-2px;margin-left:4px}.selected-radio-btn{border:1px solid #ffbb00!important}.disable-radio-btn{background:#f5f5f5;pointer-events:none;cursor:none}@media (min-width: 769px){.radio-inline-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%;gap:1rem}.radio-inline-label{flex:1;margin-bottom:0!important;white-space:normal!important}.radio-inline-group{flex-shrink:0}}\n"] }]
|
|
813
816
|
}], ctorParameters: () => [{ type: MasterControlService }], propDecorators: { change: [{
|
|
814
817
|
type: Output
|
|
815
818
|
}] } });
|
|
@@ -3725,6 +3728,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3725
3728
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
|
|
3726
3729
|
|
|
3727
3730
|
class ToggleButtonComponent {
|
|
3731
|
+
ngOnInit() {
|
|
3732
|
+
initializeFieldNameAttribute(this.field());
|
|
3733
|
+
}
|
|
3728
3734
|
reactiveFormControlobject = input();
|
|
3729
3735
|
field = input.required();
|
|
3730
3736
|
selectedValue = null;
|
|
@@ -3762,7 +3768,7 @@ class ToggleButtonComponent {
|
|
|
3762
3768
|
useExisting: ToggleButtonComponent,
|
|
3763
3769
|
multi: true,
|
|
3764
3770
|
},
|
|
3765
|
-
], ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\n @if(reactiveFormControlobject()) {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" name=\"
|
|
3771
|
+
], ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\n @if(reactiveFormControlobject()) {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" [attr.name]=\"field()?.fieldNameAttribute\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [value]=\"selectedValue\"\n (change)=\"onSelectionChange($event.value)\" [formControl]=\"reactiveFormControlobject()\">\n @for (data of field()?.configData?.options; track $index) {\n <mat-button-toggle [value]=\"data.value\">\n <img *ngIf=\"data.imgUrl && !data.tooltipText\" [src]=\"data.imgUrl\" alt=\"\" class=\"toggle-img mx-1\" />\n\n {{ data.label }}\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"data.imgUrl && data.tooltipText\">\n <img [src]=\"data.imgUrl\" class=\"toggle-img mx-1\" />\n </span>\n\n <!-- \u2705 Single template that uses current data -->\n <ng-template #currentTooltip>\n <span [innerHTML]=\"data.tooltipText\"></span>\n </ng-template>\n </mat-button-toggle>\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\n <span class=\"second-box\">\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\n <span>{{ data.toggleTopText }}</span>\n </span>\n </div>\n }\n </mat-button-toggle-group>\n }@else {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" name=\"fontStyle\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [(ngModel)]=\"selectedValue\"\n (change)=\"onSelectionChange($event.value)\">\n @for (data of field()?.configData?.options; track $index) {\n <mat-button-toggle [value]=\"data.value\">\n {{ data.label }}\n <!-- <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"data.imgUrl && data.tooltipText\">\n <img [src]=\"data.imgUrl\" />\n </span> -->\n\n <!-- \u2705 Single template that uses current data -->\n <!-- <ng-template #currentTooltip>\n <span [innerHTML]=\"data.tooltipText\"></span>\n </ng-template> -->\n </mat-button-toggle>\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\n <span class=\"second-box\">\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\n <span>{{ data.toggleTopText }}</span>\n </span>\n </div>\n }\n </mat-button-toggle-group>\n }\n</div>\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{border-radius:50px}:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{height:32px!important;transform:translateY(-9px);font-size:12px;font-weight:400;color:#444;letter-spacing:1px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button{background:#fff!important;border-radius:50px!important;box-shadow:0 0 15px #00000014!important;height:32px;padding:0 24px;border:1px solid #ffbb00}:host ::ng-deep .mat-button-toggle-button{padding:0 24px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content{font-weight:600!important;letter-spacing:1px}:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none}:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:1px solid #ddd!important;background:#f5f5f5!important;height:33px}:host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none!important}:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked{background:#f5f5f5!important;border-radius:50px}.toggle-img{width:12px}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{overflow:unset!important}.second-box{position:relative;top:-4px}.top-green-card{font-size:10px;font-weight:800;color:#fff;background:#169f7d;border-top-left-radius:999px;border-top-right-radius:999px;position:absolute;right:3em;padding:2px 16px 2px 12px;transform:translate(5px,-19px);z-index:99999;height:18px}.green-card-img{width:14.86px;margin-bottom:6px}:host ::ng-deep .mat-button-toggle-button{width:var(--toggle-button-width , 100%)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
3766
3772
|
}
|
|
3767
3773
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
3768
3774
|
type: Component,
|
|
@@ -3772,7 +3778,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3772
3778
|
useExisting: ToggleButtonComponent,
|
|
3773
3779
|
multi: true,
|
|
3774
3780
|
},
|
|
3775
|
-
], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\n @if(reactiveFormControlobject()) {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" name=\"
|
|
3781
|
+
], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\n @if(reactiveFormControlobject()) {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" [attr.name]=\"field()?.fieldNameAttribute\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [value]=\"selectedValue\"\n (change)=\"onSelectionChange($event.value)\" [formControl]=\"reactiveFormControlobject()\">\n @for (data of field()?.configData?.options; track $index) {\n <mat-button-toggle [value]=\"data.value\">\n <img *ngIf=\"data.imgUrl && !data.tooltipText\" [src]=\"data.imgUrl\" alt=\"\" class=\"toggle-img mx-1\" />\n\n {{ data.label }}\n <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"data.imgUrl && data.tooltipText\">\n <img [src]=\"data.imgUrl\" class=\"toggle-img mx-1\" />\n </span>\n\n <!-- \u2705 Single template that uses current data -->\n <ng-template #currentTooltip>\n <span [innerHTML]=\"data.tooltipText\"></span>\n </ng-template>\n </mat-button-toggle>\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\n <span class=\"second-box\">\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\n <span>{{ data.toggleTopText }}</span>\n </span>\n </div>\n }\n </mat-button-toggle-group>\n }@else {\n <mat-button-toggle-group [ngStyle]=\"{\n '--toggle-button-width': field()?.controlStyle?.width ,\n }\" name=\"fontStyle\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [(ngModel)]=\"selectedValue\"\n (change)=\"onSelectionChange($event.value)\">\n @for (data of field()?.configData?.options; track $index) {\n <mat-button-toggle [value]=\"data.value\">\n {{ data.label }}\n <!-- <span [appTooltipTemplate]=\"currentTooltip\" arrowPosition=\"left\" tooltipPosition=\"bottom\"\n *ngIf=\"data.imgUrl && data.tooltipText\">\n <img [src]=\"data.imgUrl\" />\n </span> -->\n\n <!-- \u2705 Single template that uses current data -->\n <!-- <ng-template #currentTooltip>\n <span [innerHTML]=\"data.tooltipText\"></span>\n </ng-template> -->\n </mat-button-toggle>\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\n <span class=\"second-box\">\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\n <span>{{ data.toggleTopText }}</span>\n </span>\n </div>\n }\n </mat-button-toggle-group>\n }\n</div>\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{border-radius:50px}:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{height:32px!important;transform:translateY(-9px);font-size:12px;font-weight:400;color:#444;letter-spacing:1px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button{background:#fff!important;border-radius:50px!important;box-shadow:0 0 15px #00000014!important;height:32px;padding:0 24px;border:1px solid #ffbb00}:host ::ng-deep .mat-button-toggle-button{padding:0 24px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content{font-weight:600!important;letter-spacing:1px}:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none}:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:1px solid #ddd!important;background:#f5f5f5!important;height:33px}:host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none!important}:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked{background:#f5f5f5!important;border-radius:50px}.toggle-img{width:12px}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{overflow:unset!important}.second-box{position:relative;top:-4px}.top-green-card{font-size:10px;font-weight:800;color:#fff;background:#169f7d;border-top-left-radius:999px;border-top-right-radius:999px;position:absolute;right:3em;padding:2px 16px 2px 12px;transform:translate(5px,-19px);z-index:99999;height:18px}.green-card-img{width:14.86px;margin-bottom:6px}:host ::ng-deep .mat-button-toggle-button{width:var(--toggle-button-width , 100%)!important}\n"] }]
|
|
3776
3782
|
}], propDecorators: { selectionChanged: [{
|
|
3777
3783
|
type: Output
|
|
3778
3784
|
}], change: [{
|
|
@@ -7189,7 +7195,7 @@ class AnnuityCalculatorRadioComponent {
|
|
|
7189
7195
|
useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
|
|
7190
7196
|
multi: true
|
|
7191
7197
|
}
|
|
7192
|
-
], usesOnChanges: true, ngImport: i0, template: "\n\n<div class=\"acr-wrapper\">\n\n <!-- Top Header Label -->\n <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n {{ field()?.label }}\n <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n </div>\n\n <!-- Radio Option Cards -->\n <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n <div\n class=\"annuity-radio-card-gender\"\n *ngFor=\"let data of field()?.options\"\n [class.selected]=\"inputValue === data.value\"\n [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n [value]=\"data.value\"\n [checked]=\"inputValue === data.value\"\n (growthRateChange)=\"toggleRadio(data.value, $event)\"\n />\n <span\n class=\"forRadioLabelAnnuityRadio\"\n [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color\n }\"\n >{{ data.label }}</span>\n </div>\n </div>\n\n <!-- Card Container -->\n <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.cardsValue?.length > 0\">\n <div class=\"acr-card-wrap\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n <div class=\"acr-new-cards-list\">\n <ng-container *ngFor=\"let card of field()?.configData?.cardsValue; let i = index\">\n <div\n class=\"acr-new-card\"\n [class.acr-new-card--selected]=\"selectedCard.value === card.value\"\n [class.acr-new-card--disabled]=\"card.disabled\"\n >\n selectedCard.value => {{selectedCard.value}} HHHHH card.value => {{card.value}} HHHH {{selectedCard.value === card.value}}\n <!-- Card Header: Radio + Label -->\n <div class=\"acr-new-card-header\" (click)=\"selectCard(card)\">\n selectedCard.value => {{selectedCard.value}} HHHHH card.value => {{card.value}}\n <span class=\"acr-new-radio\" [class.acr-new-radio--checked]=\"selectedCard.value === card.value\">\n <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard.value === card.value\"></span>\n </span>\n <span class=\"acr-new-card-label\">{{ card.label }}</span>\n </div>\n\n <!-- Three-column content row -->\n <div class=\"acr-new-content-row\">\n <!-- Left: amount -->\n <div class=\"acr-new-col-amount\">\n <div class=\"acr-new-main-value\">{{ card.mainValue }} / <span class=\"acr-new-main-frequency\">{{ card.mainFrequencyValue }}</span></div>\n <div class=\"acr-new-sub-value\">{{ card.subValue }} / <span class=\"acr-new-sub-frequency\">{{ card.subFrequencyValue }}</span></div>\n </div>\n <!-- Center: rate -->\n <div class=\"acr-new-col-rate\">\n <div class=\"acr-new-rate-percent\">{{ card.growthRate }}</div>\n <div class=\"acr-new-rate-percent\">Annuity Rate</div>\n </div>\n <!-- Right: guaranteed / variable -->\n <div class=\"acr-new-col-details\">\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Guaranteed :</span>\n <span class=\"acr-new-detail-val\">{{ card.guaranteed }}</span>\n </div>\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Variable :</span>\n <span class=\"acr-new-detail-val\">{{ card.variable }}</span>\n </div>\n </div>\n </div>\n\n <!-- Note outside card border, shown only when selected -->\n </div><!-- /acr-new-card -->\n <div class=\"acr-new-note\" *ngIf=\"selectedCard?.value === card.value && field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </ng-container>\n </div><!-- /acr-new-cards-list -->\n </div><!-- /acr-card-wrap -->\n </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;height:42px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;padding-right:10px;padding-left:10px;margin-top:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;flex:1 1 0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);padding:18px 16px;min-width:0}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}.acr-card-wrap{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card-wrap:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card-wrap:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-new-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}.acr-new-card{border:1.6px solid #DADADA;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;background:#fff;overflow:hidden;box-sizing:border-box;padding:12px 14px 0;margin-bottom:14px}.acr-new-card--selected{border-color:#fb0;border-width:2px}.acr-new-card--disabled{opacity:.5;pointer-events:none}.acr-new-card:hover:not(.acr-new-card--disabled){border-color:#fb0}.acr-new-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;width:fit-content}.acr-new-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #B4B4B4;background:#fff;flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}.acr-new-radio--checked{border-color:#f0a000;border-width:2px;background:#fff}.acr-new-radio-inner{width:8px;height:8px;border-radius:50%;background:#f0a000;display:block}.acr-new-card-label{font-size:12px;font-weight:700;color:#222}.acr-new-content-row{display:flex;overflow:hidden;margin:0 8px 8px;gap:4px}.acr-new-col-amount{background:#e6f7f3;padding:8px;display:flex;flex-direction:column;justify-content:center}.acr-new-main-frequency{font-size:16px;font-weight:400}.acr-new-sub-frequency{font-size:10px;font-weight:400}.acr-new-main-value{font-size:16px;font-weight:700;color:#444;line-height:20px}.acr-new-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-new-col-rate{background:#fff1cc;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.acr-new-rate-percent{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-new-col-details{border:.5px solid rgba(218,218,218,1);background:#fff;padding:10px 14px 12px;flex:1.3;display:flex;flex-direction:column;justify-content:center;gap:5px}.acr-new-detail-row{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.acr-new-detail-key{font-size:9px;font-weight:400;color:#444;white-space:nowrap}.acr-new-detail-val{font-size:9px;font-weight:700;color:#444;white-space:nowrap}.acr-new-note{background:#ececec;padding:4px 8px;font-size:12px;color:#444;line-height:16px;font-weight:400;margin-top:-14px;margin-bottom:14px}.acr-new-note strong{font-weight:700;font-size:12px;line-height:16px;color:#444}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
7198
|
+
], usesOnChanges: true, ngImport: i0, template: "\n\n<div class=\"acr-wrapper\">\n\n <!-- Top Header Label -->\n <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n {{ field()?.label }}\n <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n </div>\n\n <!-- Radio Option Cards -->\n <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n <div\n class=\"annuity-radio-card-gender\"\n *ngFor=\"let data of field()?.options\"\n [class.selected]=\"inputValue === data.value\"\n [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n [value]=\"data.value\"\n [checked]=\"inputValue === data.value\"\n (growthRateChange)=\"toggleRadio(data.value, $event)\"\n />\n <span\n class=\"forRadioLabelAnnuityRadio\"\n [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color\n }\"\n >{{ data.label }}</span>\n </div>\n </div>\n\n <!-- Card Container -->\n <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.cardsValue?.length > 0\">\n <div class=\"acr-card-wrap\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n <div class=\"acr-new-cards-list\">\n <ng-container *ngFor=\"let card of field()?.configData?.cardsValue; let i = index\">\n <div\n class=\"acr-new-card\"\n [class.acr-new-card--selected]=\"selectedCard.value === card.value\"\n [class.acr-new-card--disabled]=\"card.disabled\"\n >\n <!-- Card Header: Radio + Label -->\n <div class=\"acr-new-card-header\" (click)=\"selectCard(card)\">\n <span class=\"acr-new-radio\" [class.acr-new-radio--checked]=\"selectedCard.value === card.value\">\n <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard.value === card.value\"></span>\n </span>\n <span class=\"acr-new-card-label\">{{ card.label }}</span>\n </div>\n\n <!-- Three-column content row -->\n <div class=\"acr-new-content-row\">\n <!-- Left: amount -->\n <div class=\"acr-new-col-amount\">\n <div class=\"acr-new-main-value\">{{ card.mainValue }} / <span class=\"acr-new-main-frequency\">{{ card.mainFrequencyValue }}</span></div>\n <div class=\"acr-new-sub-value\">{{ card.subValue }} / <span class=\"acr-new-sub-frequency\">{{ card.subFrequencyValue }}</span></div>\n </div>\n <!-- Center: rate -->\n <div class=\"acr-new-col-rate\">\n <div class=\"acr-new-rate-percent\">{{ card.growthRate }}</div>\n <div class=\"acr-new-rate-percent\">Annuity Rate</div>\n </div>\n <!-- Right: guaranteed / variable -->\n <div class=\"acr-new-col-details\">\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Guaranteed :</span>\n <span class=\"acr-new-detail-val\">{{ card.guaranteed }}</span>\n </div>\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Variable :</span>\n <span class=\"acr-new-detail-val\">{{ card.variable }}</span>\n </div>\n </div>\n </div>\n\n <!-- Note outside card border, shown only when selected -->\n </div><!-- /acr-new-card -->\n <div class=\"acr-new-note\" *ngIf=\"selectedCard?.value === card.value && field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </ng-container>\n </div><!-- /acr-new-cards-list -->\n </div><!-- /acr-card-wrap -->\n </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;height:42px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;padding-right:10px;padding-left:10px;margin-top:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;flex:1 1 0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);padding:18px 16px;min-width:0}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}.acr-card-wrap{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card-wrap:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card-wrap:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-new-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}.acr-new-card{border:1.6px solid #DADADA;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;background:#fff;overflow:hidden;box-sizing:border-box;padding:12px 14px 0;margin-bottom:14px}.acr-new-card--selected{border-color:#fb0;border-width:2px}.acr-new-card--disabled{opacity:.5;pointer-events:none}.acr-new-card:hover:not(.acr-new-card--disabled){border-color:#fb0}.acr-new-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;width:fit-content}.acr-new-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #B4B4B4;background:#fff;flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}.acr-new-radio--checked{border-color:#f0a000;border-width:2px;background:#fff}.acr-new-radio-inner{width:8px;height:8px;border-radius:50%;background:#f0a000;display:block}.acr-new-card-label{font-size:12px;font-weight:700;color:#222}.acr-new-content-row{display:flex;overflow:hidden;margin:0 8px 8px;gap:4px}.acr-new-col-amount{background:#e6f7f3;padding:8px;display:flex;flex-direction:column;justify-content:center}.acr-new-main-frequency{font-size:16px;font-weight:400}.acr-new-sub-frequency{font-size:10px;font-weight:400}.acr-new-main-value{font-size:16px;font-weight:700;color:#444;line-height:20px}.acr-new-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-new-col-rate{background:#fff1cc;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.acr-new-rate-percent{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-new-col-details{border:.5px solid rgba(218,218,218,1);background:#fff;padding:10px 14px 12px;flex:1.3;display:flex;flex-direction:column;justify-content:center;gap:5px}.acr-new-detail-row{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.acr-new-detail-key{font-size:9px;font-weight:400;color:#444;white-space:nowrap}.acr-new-detail-val{font-size:9px;font-weight:700;color:#444;white-space:nowrap}.acr-new-note{background:#ececec;padding:4px 8px;font-size:12px;color:#444;line-height:16px;font-weight:400;margin-top:-14px;margin-bottom:14px}.acr-new-note strong{font-weight:700;font-size:12px;line-height:16px;color:#444}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }] });
|
|
7193
7199
|
}
|
|
7194
7200
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityCalculatorRadioComponent, decorators: [{
|
|
7195
7201
|
type: Component,
|
|
@@ -7200,7 +7206,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
7200
7206
|
useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
|
|
7201
7207
|
multi: true
|
|
7202
7208
|
}
|
|
7203
|
-
], template: "\n\n<div class=\"acr-wrapper\">\n\n <!-- Top Header Label -->\n <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n {{ field()?.label }}\n <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n </div>\n\n <!-- Radio Option Cards -->\n <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n <div\n class=\"annuity-radio-card-gender\"\n *ngFor=\"let data of field()?.options\"\n [class.selected]=\"inputValue === data.value\"\n [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n [value]=\"data.value\"\n [checked]=\"inputValue === data.value\"\n (growthRateChange)=\"toggleRadio(data.value, $event)\"\n />\n <span\n class=\"forRadioLabelAnnuityRadio\"\n [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color\n }\"\n >{{ data.label }}</span>\n </div>\n </div>\n\n <!-- Card Container -->\n <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.cardsValue?.length > 0\">\n <div class=\"acr-card-wrap\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n <div class=\"acr-new-cards-list\">\n <ng-container *ngFor=\"let card of field()?.configData?.cardsValue; let i = index\">\n <div\n class=\"acr-new-card\"\n [class.acr-new-card--selected]=\"selectedCard.value === card.value\"\n [class.acr-new-card--disabled]=\"card.disabled\"\n >\n selectedCard.value => {{selectedCard.value}} HHHHH card.value => {{card.value}} HHHH {{selectedCard.value === card.value}}\n <!-- Card Header: Radio + Label -->\n <div class=\"acr-new-card-header\" (click)=\"selectCard(card)\">\n selectedCard.value => {{selectedCard.value}} HHHHH card.value => {{card.value}}\n <span class=\"acr-new-radio\" [class.acr-new-radio--checked]=\"selectedCard.value === card.value\">\n <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard.value === card.value\"></span>\n </span>\n <span class=\"acr-new-card-label\">{{ card.label }}</span>\n </div>\n\n <!-- Three-column content row -->\n <div class=\"acr-new-content-row\">\n <!-- Left: amount -->\n <div class=\"acr-new-col-amount\">\n <div class=\"acr-new-main-value\">{{ card.mainValue }} / <span class=\"acr-new-main-frequency\">{{ card.mainFrequencyValue }}</span></div>\n <div class=\"acr-new-sub-value\">{{ card.subValue }} / <span class=\"acr-new-sub-frequency\">{{ card.subFrequencyValue }}</span></div>\n </div>\n <!-- Center: rate -->\n <div class=\"acr-new-col-rate\">\n <div class=\"acr-new-rate-percent\">{{ card.growthRate }}</div>\n <div class=\"acr-new-rate-percent\">Annuity Rate</div>\n </div>\n <!-- Right: guaranteed / variable -->\n <div class=\"acr-new-col-details\">\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Guaranteed :</span>\n <span class=\"acr-new-detail-val\">{{ card.guaranteed }}</span>\n </div>\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Variable :</span>\n <span class=\"acr-new-detail-val\">{{ card.variable }}</span>\n </div>\n </div>\n </div>\n\n <!-- Note outside card border, shown only when selected -->\n </div><!-- /acr-new-card -->\n <div class=\"acr-new-note\" *ngIf=\"selectedCard?.value === card.value && field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </ng-container>\n </div><!-- /acr-new-cards-list -->\n </div><!-- /acr-card-wrap -->\n </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;height:42px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;padding-right:10px;padding-left:10px;margin-top:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;flex:1 1 0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);padding:18px 16px;min-width:0}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}.acr-card-wrap{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card-wrap:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card-wrap:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-new-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}.acr-new-card{border:1.6px solid #DADADA;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;background:#fff;overflow:hidden;box-sizing:border-box;padding:12px 14px 0;margin-bottom:14px}.acr-new-card--selected{border-color:#fb0;border-width:2px}.acr-new-card--disabled{opacity:.5;pointer-events:none}.acr-new-card:hover:not(.acr-new-card--disabled){border-color:#fb0}.acr-new-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;width:fit-content}.acr-new-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #B4B4B4;background:#fff;flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}.acr-new-radio--checked{border-color:#f0a000;border-width:2px;background:#fff}.acr-new-radio-inner{width:8px;height:8px;border-radius:50%;background:#f0a000;display:block}.acr-new-card-label{font-size:12px;font-weight:700;color:#222}.acr-new-content-row{display:flex;overflow:hidden;margin:0 8px 8px;gap:4px}.acr-new-col-amount{background:#e6f7f3;padding:8px;display:flex;flex-direction:column;justify-content:center}.acr-new-main-frequency{font-size:16px;font-weight:400}.acr-new-sub-frequency{font-size:10px;font-weight:400}.acr-new-main-value{font-size:16px;font-weight:700;color:#444;line-height:20px}.acr-new-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-new-col-rate{background:#fff1cc;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.acr-new-rate-percent{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-new-col-details{border:.5px solid rgba(218,218,218,1);background:#fff;padding:10px 14px 12px;flex:1.3;display:flex;flex-direction:column;justify-content:center;gap:5px}.acr-new-detail-row{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.acr-new-detail-key{font-size:9px;font-weight:400;color:#444;white-space:nowrap}.acr-new-detail-val{font-size:9px;font-weight:700;color:#444;white-space:nowrap}.acr-new-note{background:#ececec;padding:4px 8px;font-size:12px;color:#444;line-height:16px;font-weight:400;margin-top:-14px;margin-bottom:14px}.acr-new-note strong{font-weight:700;font-size:12px;line-height:16px;color:#444}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}\n"] }]
|
|
7209
|
+
], template: "\n\n<div class=\"acr-wrapper\">\n\n <!-- Top Header Label -->\n <div class=\"acr-sub-label\" *ngIf=\"field() && field()?.isVisible\">\n {{ field()?.label }}\n <span class=\"error-message\" *ngIf=\"field()?.validators?.isRequired\">*</span>\n </div>\n\n <!-- Radio Option Cards -->\n <div class=\"radio-btn-group1\" *ngIf=\"field()?.configData?.isShowRadioOption\">\n <div\n class=\"annuity-radio-card-gender\"\n *ngFor=\"let data of field()?.options\"\n [class.selected]=\"inputValue === data.value\"\n [class.disable-radio-btn]=\"field()?.isDisable || data.disabled === true || data.disabled === 'true'\"\n (click)=\"(data.disabled === true || data.disabled === 'true') ? null : toggleRadio(data.value, $event)\"\n >\n <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics.\n Parent projects can bind (change)=\"myHandler($event)\" on the host component. -->\n <input\n type=\"radio\"\n style=\"position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;\"\n [id]=\"field()?.fieldName\"\n [name]=\"field()?.fieldNameAttribute\"\n [value]=\"data.value\"\n [checked]=\"inputValue === data.value\"\n (growthRateChange)=\"toggleRadio(data.value, $event)\"\n />\n <span\n class=\"forRadioLabelAnnuityRadio\"\n [ngStyle]=\"{\n '--radio-button-font-weight': field()?.controlStyle?.fontWeight,\n '--radio-button-font-size': field()?.controlStyle?.fontSize,\n '--radio-button-font-color': field()?.controlStyle?.color\n }\"\n >{{ data.label }}</span>\n </div>\n </div>\n\n <!-- Card Container -->\n <div class=\"acr-card-container\" *ngIf=\"field()?.configData?.cardsValue?.length > 0\">\n <div class=\"acr-card-wrap\">\n <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n {{ field()?.configData?.subLabel }}\n </div>\n <div class=\"acr-new-cards-list\">\n <ng-container *ngFor=\"let card of field()?.configData?.cardsValue; let i = index\">\n <div\n class=\"acr-new-card\"\n [class.acr-new-card--selected]=\"selectedCard.value === card.value\"\n [class.acr-new-card--disabled]=\"card.disabled\"\n >\n <!-- Card Header: Radio + Label -->\n <div class=\"acr-new-card-header\" (click)=\"selectCard(card)\">\n <span class=\"acr-new-radio\" [class.acr-new-radio--checked]=\"selectedCard.value === card.value\">\n <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard.value === card.value\"></span>\n </span>\n <span class=\"acr-new-card-label\">{{ card.label }}</span>\n </div>\n\n <!-- Three-column content row -->\n <div class=\"acr-new-content-row\">\n <!-- Left: amount -->\n <div class=\"acr-new-col-amount\">\n <div class=\"acr-new-main-value\">{{ card.mainValue }} / <span class=\"acr-new-main-frequency\">{{ card.mainFrequencyValue }}</span></div>\n <div class=\"acr-new-sub-value\">{{ card.subValue }} / <span class=\"acr-new-sub-frequency\">{{ card.subFrequencyValue }}</span></div>\n </div>\n <!-- Center: rate -->\n <div class=\"acr-new-col-rate\">\n <div class=\"acr-new-rate-percent\">{{ card.growthRate }}</div>\n <div class=\"acr-new-rate-percent\">Annuity Rate</div>\n </div>\n <!-- Right: guaranteed / variable -->\n <div class=\"acr-new-col-details\">\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Guaranteed :</span>\n <span class=\"acr-new-detail-val\">{{ card.guaranteed }}</span>\n </div>\n <div class=\"acr-new-detail-row\">\n <span class=\"acr-new-detail-key\">Variable :</span>\n <span class=\"acr-new-detail-val\">{{ card.variable }}</span>\n </div>\n </div>\n </div>\n\n <!-- Note outside card border, shown only when selected -->\n </div><!-- /acr-new-card -->\n <div class=\"acr-new-note\" *ngIf=\"selectedCard?.value === card.value && field()?.configData?.infoMessage\">\n <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n </div>\n </ng-container>\n </div><!-- /acr-new-cards-list -->\n </div><!-- /acr-card-wrap -->\n </div><!-- /acr-card-container -->\n\n</div>\n", styles: [".acr-wrapper{font-family:mulish!important;width:100%;display:flex;flex-direction:column}.forRadioLabelAnnuityRadio{font-size:12px!important;font-weight:400!important;cursor:pointer;color:#444!important;min-width:25%!important;height:fit-content}.required-star{color:red;margin-left:2px}.radio-btn-group1{display:flex;gap:4px;flex-wrap:wrap;padding-right:10px;padding-left:10px;height:42px;max-height:100px!important;line-height:15px}.annuity-radio-card-gender{border:1px solid rgba(218,218,218,1);border-radius:4px;padding:6px 20px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:1;-webkit-user-select:none;user-select:none;position:relative;overflow:visible}.annuity-radio-card-gender.selected{border-color:#fb0;border-width:1.6px}.annuity-radio-card-gender.selected:after{content:\"\";position:absolute;bottom:-16px;left:50%;transform:translate(-50%);width:0;height:0;z-index:3}.annuity-radio-card-gender.selected:before{content:\"\";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-top:11px solid #fff;z-index:4}.annuity-radio-card-gender:hover:not(.disable-radio-btn){border-color:#ffd600}.disable-radio-btn{opacity:.55;pointer-events:none;background:#f5f5f5}.acr-card-container{position:relative;width:100%;padding-top:22px;box-sizing:border-box;padding-right:10px;padding-left:10px}.acr-card{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;padding:20px 18px 16px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-sub-label{font-size:10px;font-weight:700;color:#444;padding-right:10px;padding-left:10px;margin-top:10px}.acr-cards-row{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:30px}.acr-card-option{background:#fff;border:2px solid #E0E0E0;border-radius:12px;flex:1 1 0;max-width:none;cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;-webkit-user-select:none;user-select:none;position:relative;overflow:visible;flex:0 0 calc((100% - 28px) / 3);max-width:calc((100% - 28px) / 3);padding:18px 16px;min-width:0}.acr-card-option.selected{border-color:#ffd600;box-shadow:0 0 0 1px #ffd600}.acr-card-option:hover:not(.disabled){border-color:#ffd600}.acr-card-option.disabled{opacity:.5;pointer-events:none}.acr-card-main-value{font-size:16px;font-weight:700;color:#444;margin-bottom:3px;line-height:20px}.acr-card-main-sub-value{font-size:16px;font-weight:400;color:#444;margin-bottom:3px;line-height:20px}.acr-card-sub-value{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-card-sub-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-card-rate{background:linear-gradient(to right,#fb0,#fff7df,#fb0);color:#444;font-weight:700;font-size:10px;line-height:14px;padding:4px;margin-bottom:10px;margin-top:6px;width:100%;height:22px;text-align:center;box-sizing:border-box}.acr-card-details{width:100%;margin-bottom:14px;background-color:#f5f5f5;padding-left:10px;padding-right:10px;display:grid;grid-template-columns:max-content auto 1fr;column-gap:4px}.acr-card-detail-row{display:contents;font-size:10px;color:#444}.acr-card-detail-row span{font-weight:400;font-size:8px;line-height:14px;color:#444}.acr-card-detail-row strong{font-weight:600;color:#444;font-size:8px;line-height:14px;text-align:right}.acr-card-type{position:absolute;bottom:-14px;left:0;right:0;display:flex;justify-content:center}.acr-card-type-btn{border:none;border-radius:20px;padding:5px 22px;font-size:13px;font-weight:600;cursor:pointer;outline:none}.btn-high{background:#00946f;color:#fff;font-weight:700;font-size:10px;line-height:14px}.btn-medium{background:#66ccb2;color:#444;font-weight:700;font-size:10px;line-height:14px}.btn-low{background:#cef0e8;color:#444;font-weight:700;font-size:10px;line-height:14px}.acr-note{background:#ececec;color:#222;font-size:12px;border-radius:4px;padding:4px 8px;line-height:16px;width:100%;box-sizing:border-box;margin-top:8px;font-weight:400}.acr-note strong{font-weight:700;font-size:12px;line-height:16px;color:#222}.acr-card-wrap{background:#fff;border:1px solid rgba(218,218,218,1);border-radius:14px;width:100%;position:relative;overflow:visible;box-sizing:border-box}.acr-card-wrap:after{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:14px;border-style:solid;border-color:transparent transparent rgba(218,218,218,1) transparent;z-index:2}.acr-card-wrap:before{content:\"\";position:absolute;bottom:100%;left:var(--arrow-left, 40px);transform:translate(-50%);transition:left .2s ease;border-width:12px;border-style:solid;border-color:transparent transparent rgba(255,255,255,1) transparent;z-index:3}.acr-new-cards-list{display:flex;flex-direction:column;gap:0;padding:10px}.acr-new-card{border:1.6px solid #DADADA;border-radius:4px;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;background:#fff;overflow:hidden;box-sizing:border-box;padding:12px 14px 0;margin-bottom:14px}.acr-new-card--selected{border-color:#fb0;border-width:2px}.acr-new-card--disabled{opacity:.5;pointer-events:none}.acr-new-card:hover:not(.acr-new-card--disabled){border-color:#fb0}.acr-new-card-header{display:flex;align-items:center;gap:8px;margin-bottom:10px;cursor:pointer;width:fit-content}.acr-new-radio{width:16px;height:16px;border-radius:50%;border:1.5px solid #B4B4B4;background:#fff;flex-shrink:0;position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;cursor:pointer}.acr-new-radio--checked{border-color:#f0a000;border-width:2px;background:#fff}.acr-new-radio-inner{width:8px;height:8px;border-radius:50%;background:#f0a000;display:block}.acr-new-card-label{font-size:12px;font-weight:700;color:#222}.acr-new-content-row{display:flex;overflow:hidden;margin:0 8px 8px;gap:4px}.acr-new-col-amount{background:#e6f7f3;padding:8px;display:flex;flex-direction:column;justify-content:center}.acr-new-main-frequency{font-size:16px;font-weight:400}.acr-new-sub-frequency{font-size:10px;font-weight:400}.acr-new-main-value{font-size:16px;font-weight:700;color:#444;line-height:20px}.acr-new-sub-value{font-size:10px;font-weight:400;color:#444;line-height:14px}.acr-new-col-rate{background:#fff1cc;padding:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.acr-new-rate-percent{font-size:10px;font-weight:700;color:#444;line-height:14px}.acr-new-col-details{border:.5px solid rgba(218,218,218,1);background:#fff;padding:10px 14px 12px;flex:1.3;display:flex;flex-direction:column;justify-content:center;gap:5px}.acr-new-detail-row{display:flex;justify-content:space-between;gap:6px;align-items:baseline}.acr-new-detail-key{font-size:9px;font-weight:400;color:#444;white-space:nowrap}.acr-new-detail-val{font-size:9px;font-weight:700;color:#444;white-space:nowrap}.acr-new-note{background:#ececec;padding:4px 8px;font-size:12px;color:#444;line-height:16px;font-weight:400;margin-top:-14px;margin-bottom:14px}.acr-new-note strong{font-weight:700;font-size:12px;line-height:16px;color:#444}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-mdc-radio-touch-target{width:12px!important;height:12px!important}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-form-field{gap:8px;align-items:center;display:flex}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio{flex-shrink:0;display:flex;align-items:center;justify-content:center}::ng-deep .relationship-radio-group .mat-mdc-radio-button .mat-ripple,::ng-deep .relationship-radio-group .mat-mdc-radio-button .mdc-radio__ripple{display:none!important}::ng-deep .relationship-radio-group .mdc-form-field>label{padding-left:0!important;cursor:pointer;line-height:12px;display:flex;align-items:center}.relationship-option-text{font-size:12px;font-weight:400;font-family:var(--custom-font-family, \"Mulish\");color:var(--custom-font-color, #444);line-height:14px}\n"] }]
|
|
7204
7210
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { preSelectConfig: [{
|
|
7205
7211
|
type: Input
|
|
7206
7212
|
}], change: [{
|