master-control 0.4.95 → 0.4.97

package/fesm2022/master-control.mjs

@@ -7009,10 +7009,12 @@ class AnnuityCalculatorRadioComponent {
             const f = this.field();
             const selectVal = f?.configData?.selectValue;
             if (selectVal !== null && selectVal !== undefined && selectVal !== '') {
-                // Pre-select the matching card
-                const matchedCard = f?.configData?.cardsValue?.find((c) => c.value === selectVal);
+                const cards = f?.configData?.cardsValue;
+                const matchedCard = cards?.find((c) => c.value === selectVal);
                 if (matchedCard) {
                     this.value = selectVal;
+                    this.selectedCard = matchedCard;
+                    this.selectedCardIndex = cards.indexOf(matchedCard);
                 }
                 const matchedOption = f?.options?.find((opt) => opt.value === selectVal);
                 if (matchedOption) {
@@ -7044,8 +7046,16 @@ class AnnuityCalculatorRadioComponent {
     change = new EventEmitter();
     growthRateChange = new EventEmitter();
     value = null;
+    selectedCardIndex = null;
+    selectedCard = null;
     writeValue(value) {
         this.value = value;
+        const cards = this.field()?.configData?.cardsValue;
+        if (cards) {
+            const idx = cards.findIndex((c) => c.value === value);
+            this.selectedCardIndex = idx >= 0 ? idx : null;
+            this.selectedCard = idx >= 0 ? cards[idx] : null;
+        }
     }
     registerOnChange(fn) {
         this.onChange = fn;
@@ -7056,6 +7066,9 @@ class AnnuityCalculatorRadioComponent {
     selectCard(card) {
         if (card.disabled)
             return;
+        this.selectedCard = card;
+        const cards = this.field()?.configData?.cardsValue;
+        this.selectedCardIndex = cards ? cards.indexOf(card) : null;
         this.value = card.value;
         this.onChange(this.value);
         this.onTouched();
@@ -7083,7 +7096,7 @@ class AnnuityCalculatorRadioComponent {
     updateArrowPosition() {
         const root = this.el.nativeElement;
         const selected = root.querySelector('.annuity-radio-card-gender.selected');
-        const card = root.querySelector('.acr-card');
+        const card = root.querySelector('.acr-card-wrap');
         if (selected && card) {
             const selectedRect = selected.getBoundingClientRect();
             const cardRect = card.getBoundingClientRect();
@@ -7098,7 +7111,7 @@ class AnnuityCalculatorRadioComponent {
                 useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
                 multi: 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()?.fieldName\"\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?.isShowCard\">\n\n    <div class=\"acr-card\">\n    <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n      {{ field()?.configData?.subLabel }}\n    </div>\n\n    <div class=\"acr-cards-row  col-md-3 col-sm-6 col-xs-12 col-lg-3\">\n      <div\n        class=\"acr-card-option\"\n        *ngFor=\"let card of field()?.configData?.cardsValue\"\n        [class.selected]=\"value === card.value\"\n        [class.disabled]=\"card.disabled\"\n        (click)=\"selectCard(card)\"\n      >\n        <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\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()?.fieldName\"\n          [value]=\"card.value\"\n          [checked]=\"value === card.value\"\n          (change)=\"selectCard(card)\"\n        />\n        <div class=\"acr-card-main-value\">\n          <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n        </div>\n        <div class=\"acr-card-sub-value\">\n          <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n        </div>\n        <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n        <div class=\"acr-card-details\">\n          <div class=\"acr-card-detail-row\">\n            <span>Guaranteed </span>\n            <span>:</span>\n            <strong>{{ card.guaranteed }}</strong>\n          </div>\n          <div class=\"acr-card-detail-row\">\n            <span>Variable </span>\n            <span>:</span>\n            <strong>{{ card.variable }}</strong>\n          </div>\n        </div>\n        <!-- <div class=\"acr-card-type\">\n          <button class=\"acr-card-type-btn\" [ngClass]=\"{\n      'btn-high': card.value === 'High',\n      'btn-medium': card.value === 'Medium',\n      'btn-low': card.value !== 'High' && card.value !== 'Medium'\n    }\">{{ card.value }} variable</button>\n        </div> -->\n      </div>\n    </div>\n     <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n  <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n    <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n  </div>\n  </div>\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;max-width:max-content;height:90px;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;margin-bottom:10px;padding-right:10px;padding-left: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}\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 }] });
+        ], 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()?.fieldName\"\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?.isShowCard\">\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 === card\"\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 === card\">\n            <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard === card\"></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 === card && 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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AnnuityCalculatorRadioComponent, decorators: [{
             type: Component,
@@ -7109,7 +7122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
                             useExisting: forwardRef(() => AnnuityCalculatorRadioComponent),
                             multi: true
                         }
-                    ], 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()?.fieldName\"\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?.isShowCard\">\n\n    <div class=\"acr-card\">\n    <div class=\"acr-sub-label\" *ngIf=\"field()?.configData?.subLabel\">\n      {{ field()?.configData?.subLabel }}\n    </div>\n\n    <div class=\"acr-cards-row  col-md-3 col-sm-6 col-xs-12 col-lg-3\">\n      <div\n        class=\"acr-card-option\"\n        *ngFor=\"let card of field()?.configData?.cardsValue\"\n        [class.selected]=\"value === card.value\"\n        [class.disabled]=\"card.disabled\"\n        (click)=\"selectCard(card)\"\n      >\n        <!-- Hidden native radio input \u2014 enables proper [id]/[name] binding for form semantics. -->\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()?.fieldName\"\n          [value]=\"card.value\"\n          [checked]=\"value === card.value\"\n          (change)=\"selectCard(card)\"\n        />\n        <div class=\"acr-card-main-value\">\n          <span class=\"acr-card-main-value\">{{ card.mainValue }}</span><span class=\"acr-card-main-value\"></span>\n        </div>\n        <div class=\"acr-card-sub-value\">\n          <span class=\"acr-card-sub-value\">{{ card.subValue }}</span><span class=\"acr-card-sub-value\"></span>\n        </div>\n        <div class=\"acr-card-rate\">{{ card.growthRate }} Annuity Rate</div>\n        <div class=\"acr-card-details\">\n          <div class=\"acr-card-detail-row\">\n            <span>Guaranteed </span>\n            <span>:</span>\n            <strong>{{ card.guaranteed }}</strong>\n          </div>\n          <div class=\"acr-card-detail-row\">\n            <span>Variable </span>\n            <span>:</span>\n            <strong>{{ card.variable }}</strong>\n          </div>\n        </div>\n        <!-- <div class=\"acr-card-type\">\n          <button class=\"acr-card-type-btn\" [ngClass]=\"{\n      'btn-high': card.value === 'High',\n      'btn-medium': card.value === 'Medium',\n      'btn-low': card.value !== 'High' && card.value !== 'Medium'\n    }\">{{ card.value }} variable</button>\n        </div> -->\n      </div>\n    </div>\n     <!-- Note \u2014 full width, vertically aligned with radio group and card container -->\n  <div class=\"acr-note\" *ngIf=\"field()?.configData?.infoMessage\">\n    <strong>Note:</strong> {{ field()?.configData?.infoMessage }}\n  </div>\n  </div>\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;max-width:max-content;height:90px;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;margin-bottom:10px;padding-right:10px;padding-left: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}\n"] }]
+                    ], 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()?.fieldName\"\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?.isShowCard\">\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 === card\"\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 === card\">\n            <span class=\"acr-new-radio-inner\" *ngIf=\"selectedCard === card\"></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 === card && 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"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { change: [{
                 type: Output
             }], growthRateChange: [{
@@ -8380,7 +8393,6 @@ class AnnuityPremiumCalculatorComponent {
         this.onGrowthRateOptionSelected.emit();
     }
     onAnnuityPremiumValueChange(value) {
-        this.annuityPremium['textValue'] = value;
         this.validations.ispremiumEntry = false;
         if (this.masterService.checkIfValueIsEmpty(this.annuityPremium['textValue'])) {
             this.validations.ispremiumEntry = true;