npm - master-control - Versions diffs - 0.2.18 → 0.2.19 - Mend

master-control 0.2.18 → 0.2.19

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.

Files changed (10) hide show

package/esm2022/lib/discount-v2/discount-v2.component.mjs +3 -3
package/esm2022/lib/in-built-benefit/in-built-benefit.component.mjs +3 -3
package/esm2022/lib/pay-get-card/pay-get-card.component.mjs +3 -3
package/esm2022/lib/toggle/toggle.component.mjs +3 -3
package/esm2022/lib/toggle-button/toggle-button.component.mjs +3 -3
package/fesm2022/master-control.mjs +10 -10
package/fesm2022/master-control.mjs.map +1 -1
package/master-control-0.2.19.tgz +0 -0
package/package.json +1 -1
package/master-control-0.2.18.tgz +0 -0

package/esm2022/lib/discount-v2/discount-v2.component.mjs CHANGED Viewed

@@ -7,10 +7,10 @@ import * as i2 from "@angular/common";
 export class DiscountV2Component {
     field = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DiscountV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DiscountV2Component, isStandalone: true, selector: "lib-discount-v2", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"px-3 py-2 discount-card-v2\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"\r\n{\r\n    '--discount-design-border-width': field()?.controlStyle?.borderWidth,\r\n    '--discount-design-border-color': field()?.controlStyle?.borderColor ,\r\n    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,\r\n    '--discount-design-width': field()?.controlStyle?.width ,\r\n    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--discount-design-bg': field()?.controlStyle?.background ,\r\n}\">\r\n    <div class=\"mb-2 discount-heading\" [ngStyle]=\"\r\n{\r\n    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,\r\n    '--discount-heading-font-color': field()?.controlStyle?.color\r\n}\">{{field()?.label}}</div>\r\n    <div>\r\n        <button class=\"px-2 mt-1 discount-btn-remove\"><div>Remove</div> <mat-icon class=\"pt-1 remove-btn-cross\">close</mat-icon></button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".discount-card-v2{border-width:var(--discount-design-border-width , 1px);border-color:var(--discount-design-border-color , #0BB68B);border-style:var(--discount-design-border-style , solid);width:var(--discount-design-width , fit-content);border-radius:var(--discount-design-border-radius , 8px);box-shadow:0 2px 15px 2px #e3e6ec99;background:var(--discount-design-bg , #fff)}.discount-heading{font-weight:var(--discount-heading-font-weight , 700);font-size:var(--discount-heading-font-size , 12px);color:var(--discount-heading-font-color , #444)}.discount-btn-remove{border-radius:32px;border:1px solid #EE0000;background-color:#fff;font-size:12px;font-weight:700;color:#e00;display:flex;background:#fff}.remove-btn-cross{font-size:12.5px!important;transform:translateY(2px)}*{font-family:Mulish!important}.material-icons{font-family:Material Icons!important}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DiscountV2Component, isStandalone: true, selector: "lib-discount-v2", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"px-3 py-2 discount-card-v2\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"\r\n{\r\n    '--discount-design-border-width': field()?.controlStyle?.borderWidth,\r\n    '--discount-design-border-color': field()?.controlStyle?.borderColor ,\r\n    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,\r\n    '--discount-design-width': field()?.controlStyle?.width ,\r\n    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--discount-design-bg': field()?.controlStyle?.background ,\r\n}\">\r\n    <div class=\"mb-2 discount-heading\" [ngStyle]=\"\r\n{\r\n    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,\r\n    '--discount-heading-font-color': field()?.controlStyle?.color\r\n}\">{{field()?.label}}</div>\r\n    <div>\r\n        <button class=\"px-2 mt-1 discount-btn-remove\"><div>Remove</div> <mat-icon class=\"pt-1 remove-btn-cross\">close</mat-icon></button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".discount-card-v2{border-width:var(--discount-design-border-width , 1px);border-color:var(--discount-design-border-color , #0BB68B);border-style:var(--discount-design-border-style , solid);width:var(--discount-design-width , 100%);border-radius:var(--discount-design-border-radius , 8px);box-shadow:0 2px 15px 2px #e3e6ec99;background:var(--discount-design-bg , #fff)}.discount-heading{font-weight:var(--discount-heading-font-weight , 700);font-size:var(--discount-heading-font-size , 12px);color:var(--discount-heading-font-color , #444)}.discount-btn-remove{border-radius:32px;border:1px solid #EE0000;background-color:#fff;font-size:12px;font-weight:700;color:#e00;display:flex;background:#fff}.remove-btn-cross{font-size:12.5px!important;transform:translateY(2px)}*{font-family:Mulish!important}.material-icons{font-family:Material Icons!important}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DiscountV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-discount-v2', standalone: true, imports: [MatIconModule, CommonModule], template: "<div class=\"px-3 py-2 discount-card-v2\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"\r\n{\r\n    '--discount-design-border-width': field()?.controlStyle?.borderWidth,\r\n    '--discount-design-border-color': field()?.controlStyle?.borderColor ,\r\n    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,\r\n    '--discount-design-width': field()?.controlStyle?.width ,\r\n    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--discount-design-bg': field()?.controlStyle?.background ,\r\n}\">\r\n    <div class=\"mb-2 discount-heading\" [ngStyle]=\"\r\n{\r\n    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,\r\n    '--discount-heading-font-color': field()?.controlStyle?.color\r\n}\">{{field()?.label}}</div>\r\n    <div>\r\n        <button class=\"px-2 mt-1 discount-btn-remove\"><div>Remove</div> <mat-icon class=\"pt-1 remove-btn-cross\">close</mat-icon></button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".discount-card-v2{border-width:var(--discount-design-border-width , 1px);border-color:var(--discount-design-border-color , #0BB68B);border-style:var(--discount-design-border-style , solid);width:var(--discount-design-width , fit-content);border-radius:var(--discount-design-border-radius , 8px);box-shadow:0 2px 15px 2px #e3e6ec99;background:var(--discount-design-bg , #fff)}.discount-heading{font-weight:var(--discount-heading-font-weight , 700);font-size:var(--discount-heading-font-size , 12px);color:var(--discount-heading-font-color , #444)}.discount-btn-remove{border-radius:32px;border:1px solid #EE0000;background-color:#fff;font-size:12px;font-weight:700;color:#e00;display:flex;background:#fff}.remove-btn-cross{font-size:12.5px!important;transform:translateY(2px)}*{font-family:Mulish!important}.material-icons{font-family:Material Icons!important}\n"] }]
+            args: [{ selector: 'lib-discount-v2', standalone: true, imports: [MatIconModule, CommonModule], template: "<div class=\"px-3 py-2 discount-card-v2\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"\r\n{\r\n    '--discount-design-border-width': field()?.controlStyle?.borderWidth,\r\n    '--discount-design-border-color': field()?.controlStyle?.borderColor ,\r\n    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,\r\n    '--discount-design-width': field()?.controlStyle?.width ,\r\n    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--discount-design-bg': field()?.controlStyle?.background ,\r\n}\">\r\n    <div class=\"mb-2 discount-heading\" [ngStyle]=\"\r\n{\r\n    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,\r\n    '--discount-heading-font-color': field()?.controlStyle?.color\r\n}\">{{field()?.label}}</div>\r\n    <div>\r\n        <button class=\"px-2 mt-1 discount-btn-remove\"><div>Remove</div> <mat-icon class=\"pt-1 remove-btn-cross\">close</mat-icon></button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".discount-card-v2{border-width:var(--discount-design-border-width , 1px);border-color:var(--discount-design-border-color , #0BB68B);border-style:var(--discount-design-border-style , solid);width:var(--discount-design-width , 100%);border-radius:var(--discount-design-border-radius , 8px);box-shadow:0 2px 15px 2px #e3e6ec99;background:var(--discount-design-bg , #fff)}.discount-heading{font-weight:var(--discount-heading-font-weight , 700);font-size:var(--discount-heading-font-size , 12px);color:var(--discount-heading-font-color , #444)}.discount-btn-remove{border-radius:32px;border:1px solid #EE0000;background-color:#fff;font-size:12px;font-weight:700;color:#e00;display:flex;background:#fff}.remove-btn-cross{font-size:12.5px!important;transform:translateY(2px)}*{font-family:Mulish!important}.material-icons{font-family:Material Icons!important}\n"] }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlzY291bnQtdjIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFzdGVyLWNvbnRyb2wvc3JjL2xpYi9kaXNjb3VudC12Mi9kaXNjb3VudC12Mi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL2Rpc2NvdW50LXYyL2Rpc2NvdW50LXYyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7Ozs7QUFTdkQsTUFBTSxPQUFPLG1CQUFtQjtJQUNoQyxLQUFLLEdBQVEsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO3dHQUR0QixtQkFBbUI7NEZBQW5CLG1CQUFtQiw4TUNYaEMsaWlDQW9CQSxzNUJEYlksYUFBYSxtTEFBRyxZQUFZOzs0RkFJM0IsbUJBQW1CO2tCQVAvQixTQUFTOytCQUNFLGlCQUFpQixjQUNmLElBQUksV0FDUCxDQUFDLGFBQWEsRUFBRyxZQUFZLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLWRpc2NvdW50LXYyJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtNYXRJY29uTW9kdWxlICwgQ29tbW9uTW9kdWxlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vZGlzY291bnQtdjIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9kaXNjb3VudC12Mi5jb21wb25lbnQuY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgRGlzY291bnRWMkNvbXBvbmVudCB7XHJcbmZpZWxkOiBhbnkgPSBpbnB1dC5yZXF1aXJlZDxhbnk+KCk7XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cInB4LTMgcHktMiBkaXNjb3VudC1jYXJkLXYyXCIgKm5nSWY9XCJmaWVsZCgpICYmIGZpZWxkKCk/LmlzVmlzaWJsZVwiIFtuZ1N0eWxlXT1cIlxyXG57XHJcbiAgICAnLS1kaXNjb3VudC1kZXNpZ24tYm9yZGVyLXdpZHRoJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJXaWR0aCxcclxuICAgICctLWRpc2NvdW50LWRlc2lnbi1ib3JkZXItY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlckNvbG9yICxcclxuICAgICctLWRpc2NvdW50LWRlc2lnbi1ib3JkZXItc3R5bGUnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlclN0eWxlICxcclxuICAgICctLWRpc2NvdW50LWRlc2lnbi13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8ud2lkdGggLFxyXG4gICAgJy0tZGlzY291bnQtZGVzaWduLWJvcmRlci1yYWRpdXMnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlclJhZGl1cyAsXHJcbiAgICAnLS1kaXNjb3VudC1kZXNpZ24tYmcnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJhY2tncm91bmQgLFxyXG59XCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwibWItMiBkaXNjb3VudC1oZWFkaW5nXCIgW25nU3R5bGVdPVwiXHJcbntcclxuICAgICctLWRpc2NvdW50LWhlYWRpbmctZm9udC13ZWlnaHQnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRXZWlnaHQgLFxyXG4gICAgJy0tZGlzY291bnQtaGVhZGluZy1mb250LXNpemUnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRTaXplICxcclxuICAgICctLWRpc2NvdW50LWhlYWRpbmctZm9udC1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uY29sb3JcclxufVwiPnt7ZmllbGQoKT8ubGFiZWx9fTwvZGl2PlxyXG4gICAgPGRpdj5cclxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwicHgtMiBtdC0xIGRpc2NvdW50LWJ0bi1yZW1vdmVcIj48ZGl2PlJlbW92ZTwvZGl2PiA8bWF0LWljb24gY2xhc3M9XCJwdC0xIHJlbW92ZS1idG4tY3Jvc3NcIj5jbG9zZTwvbWF0LWljb24+PC9idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+XHJcblxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGlzY291bnQtdjIuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbWFzdGVyLWNvbnRyb2wvc3JjL2xpYi9kaXNjb3VudC12Mi9kaXNjb3VudC12Mi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL2Rpc2NvdW50LXYyL2Rpc2NvdW50LXYyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7Ozs7QUFTdkQsTUFBTSxPQUFPLG1CQUFtQjtJQUNoQyxLQUFLLEdBQVEsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO3dHQUR0QixtQkFBbUI7NEZBQW5CLG1CQUFtQiw4TUNYaEMsaWlDQW9CQSwrNEJEYlksYUFBYSxtTEFBRyxZQUFZOzs0RkFJM0IsbUJBQW1CO2tCQVAvQixTQUFTOytCQUNFLGlCQUFpQixjQUNmLElBQUksV0FDUCxDQUFDLGFBQWEsRUFBRyxZQUFZLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xyXG5pbXBvcnQgeyBDb21wb25lbnQsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE1hdEljb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9pY29uJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLWRpc2NvdW50LXYyJyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtNYXRJY29uTW9kdWxlICwgQ29tbW9uTW9kdWxlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vZGlzY291bnQtdjIuY29tcG9uZW50Lmh0bWwnLFxyXG4gIHN0eWxlVXJsOiAnLi9kaXNjb3VudC12Mi5jb21wb25lbnQuY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgRGlzY291bnRWMkNvbXBvbmVudCB7XHJcbmZpZWxkOiBhbnkgPSBpbnB1dC5yZXF1aXJlZDxhbnk+KCk7XHJcbn1cclxuIiwiPGRpdiBjbGFzcz1cInB4LTMgcHktMiBkaXNjb3VudC1jYXJkLXYyXCIgKm5nSWY9XCJmaWVsZCgpICYmIGZpZWxkKCk/LmlzVmlzaWJsZVwiIFtuZ1N0eWxlXT1cIlxyXG57XHJcbiAgICAnLS1kaXNjb3VudC1kZXNpZ24tYm9yZGVyLXdpZHRoJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJXaWR0aCxcclxuICAgICctLWRpc2NvdW50LWRlc2lnbi1ib3JkZXItY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlckNvbG9yICxcclxuICAgICctLWRpc2NvdW50LWRlc2lnbi1ib3JkZXItc3R5bGUnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlclN0eWxlICxcclxuICAgICctLWRpc2NvdW50LWRlc2lnbi13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8ud2lkdGggLFxyXG4gICAgJy0tZGlzY291bnQtZGVzaWduLWJvcmRlci1yYWRpdXMnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlclJhZGl1cyAsXHJcbiAgICAnLS1kaXNjb3VudC1kZXNpZ24tYmcnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJhY2tncm91bmQgLFxyXG59XCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwibWItMiBkaXNjb3VudC1oZWFkaW5nXCIgW25nU3R5bGVdPVwiXHJcbntcclxuICAgICctLWRpc2NvdW50LWhlYWRpbmctZm9udC13ZWlnaHQnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRXZWlnaHQgLFxyXG4gICAgJy0tZGlzY291bnQtaGVhZGluZy1mb250LXNpemUnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRTaXplICxcclxuICAgICctLWRpc2NvdW50LWhlYWRpbmctZm9udC1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uY29sb3JcclxufVwiPnt7ZmllbGQoKT8ubGFiZWx9fTwvZGl2PlxyXG4gICAgPGRpdj5cclxuICAgICAgICA8YnV0dG9uIGNsYXNzPVwicHgtMiBtdC0xIGRpc2NvdW50LWJ0bi1yZW1vdmVcIj48ZGl2PlJlbW92ZTwvZGl2PiA8bWF0LWljb24gY2xhc3M9XCJwdC0xIHJlbW92ZS1idG4tY3Jvc3NcIj5jbG9zZTwvbWF0LWljb24+PC9idXR0b24+XHJcbiAgICA8L2Rpdj5cclxuPC9kaXY+XHJcblxyXG4iXX0=

package/esm2022/lib/in-built-benefit/in-built-benefit.component.mjs CHANGED Viewed

@@ -7,14 +7,14 @@ export class InBuiltBenefitComponent {
     premiumAmount = '₹1,00,000';
     premiumAmountShort = '1L';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InBuiltBenefitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InBuiltBenefitComponent, isStandalone: true, selector: "lib-in-built-benefit", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmountShort: { classPropertyName: "premiumAmountShort", publicName: "premiumAmountShort", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex in-built-card\"\r\n [ngStyle]=\"{\r\n'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--inbuilt-card-bg-color': field()?.controlStyle?.background ,\r\n'--inbuilt-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <p class=\"w-100 top-box\">\r\n    <span class=\"top-benefit-card\">In-built Benefit</span>\r\n  </p>\r\n  <div>\r\n    <span class=\"premium-header\">Return of Premium</span> <br />\r\n    <span class=\"benefit-text normal-text\"\r\n      >Customer can get their premiums back on\r\n      <b class=\"bold-text\"\r\n        >diagnosis of Critical Illness (CI) or Total and Permanent Disability\r\n        (TPD) before the age of 80.</b\r\n      ></span\r\n    >\r\n    <br />\r\n    <span class=\"premium\"\r\n      ><b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})</span\r\n    >\r\n  </div>\r\n  <div class=\"m-auto\">\r\n    <img *ngIf=\"field()?.imageUrl\" [src]=\"field().imageUrl\" alt=\"\" />\r\n  </div>\r\n</div>\r\n", styles: [".in-built-card{max-width:var(--inbuilt-card-width, 757px)!important;min-height:114px;border-radius:var(--inbuilt-card-border-radius, 12px)!important;border:1px solid #0bb68b;border-color:var(--inbuilt-card-border-color, #0bb68b)!important;border-width:var(--inbuilt-card-border-width, 1px)!important;background:var(--inbuilt-card-bg-color, #e6f7f3)!important;padding:12px 16px;position:relative}.premium-header{font-size:14px;font-weight:700;letter-spacing:0px;line-height:18px;color:#444}.benefit-text{font-size:12px;color:#696969;font-weight:700;letter-spacing:0%;line-height:16px}.premium{font-size:12px;padding:4px 16px;border-radius:4px;height:24px;width:113px;background:#fff;color:#444}.normal-text{font-weight:400}.bold-text{font-weight:700}.top-benefit-card{border-radius:25px;background:#fff;border:1px solid #ececec;height:26px;width:114px;padding:0 6px 5px 12px;font-size:12px;font-weight:400;color:#444;letter-spacing:0%;position:absolute;transform:translate(-6em,-2.2em)}.top-box{position:absolute;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InBuiltBenefitComponent, isStandalone: true, selector: "lib-in-built-benefit", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmountShort: { classPropertyName: "premiumAmountShort", publicName: "premiumAmountShort", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex in-built-card\"\r\n [ngStyle]=\"{\r\n'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--inbuilt-card-bg-color': field()?.controlStyle?.background ,\r\n'--inbuilt-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <p class=\"w-100 top-box\">\r\n    <span class=\"top-benefit-card\">In-built Benefit</span>\r\n  </p>\r\n  <div>\r\n    <span class=\"premium-header\">Return of Premium</span> <br />\r\n    <span class=\"benefit-text normal-text\"\r\n      >Customer can get their premiums back on\r\n      <b class=\"bold-text\"\r\n        >diagnosis of Critical Illness (CI) or Total and Permanent Disability\r\n        (TPD) before the age of 80.</b\r\n      ></span\r\n    >\r\n    <br />\r\n    <span class=\"premium\"\r\n      ><b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})</span\r\n    >\r\n  </div>\r\n  <div class=\"m-auto\">\r\n    <img *ngIf=\"field()?.imageUrl\" [src]=\"field().imageUrl\" alt=\"\" />\r\n  </div>\r\n</div>\r\n", styles: [".in-built-card{max-width:var(--inbuilt-card-width, 100%)!important;min-height:114px;border-radius:var(--inbuilt-card-border-radius, 12px)!important;border:1px solid #0bb68b;border-color:var(--inbuilt-card-border-color, #0bb68b)!important;border-width:var(--inbuilt-card-border-width, 1px)!important;background:var(--inbuilt-card-bg-color, #e6f7f3)!important;padding:12px 16px;position:relative}.premium-header{font-size:14px;font-weight:700;letter-spacing:0px;line-height:18px;color:#444}.benefit-text{font-size:12px;color:#696969;font-weight:700;letter-spacing:0%;line-height:16px}.premium{font-size:12px;padding:4px 16px;border-radius:4px;height:24px;width:113px;background:#fff;color:#444}.normal-text{font-weight:400}.bold-text{font-weight:700}.top-benefit-card{border-radius:25px;background:#fff;border:1px solid #ececec;height:26px;width:114px;padding:0 6px 5px 12px;font-size:12px;font-weight:400;color:#444;letter-spacing:0%;position:absolute;transform:translate(-6em,-2.2em)}.top-box{position:absolute;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InBuiltBenefitComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-in-built-benefit', standalone: true, imports: [CommonModule], template: "<div class=\"d-flex in-built-card\"\r\n [ngStyle]=\"{\r\n'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--inbuilt-card-bg-color': field()?.controlStyle?.background ,\r\n'--inbuilt-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <p class=\"w-100 top-box\">\r\n    <span class=\"top-benefit-card\">In-built Benefit</span>\r\n  </p>\r\n  <div>\r\n    <span class=\"premium-header\">Return of Premium</span> <br />\r\n    <span class=\"benefit-text normal-text\"\r\n      >Customer can get their premiums back on\r\n      <b class=\"bold-text\"\r\n        >diagnosis of Critical Illness (CI) or Total and Permanent Disability\r\n        (TPD) before the age of 80.</b\r\n      ></span\r\n    >\r\n    <br />\r\n    <span class=\"premium\"\r\n      ><b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})</span\r\n    >\r\n  </div>\r\n  <div class=\"m-auto\">\r\n    <img *ngIf=\"field()?.imageUrl\" [src]=\"field().imageUrl\" alt=\"\" />\r\n  </div>\r\n</div>\r\n", styles: [".in-built-card{max-width:var(--inbuilt-card-width, 757px)!important;min-height:114px;border-radius:var(--inbuilt-card-border-radius, 12px)!important;border:1px solid #0bb68b;border-color:var(--inbuilt-card-border-color, #0bb68b)!important;border-width:var(--inbuilt-card-border-width, 1px)!important;background:var(--inbuilt-card-bg-color, #e6f7f3)!important;padding:12px 16px;position:relative}.premium-header{font-size:14px;font-weight:700;letter-spacing:0px;line-height:18px;color:#444}.benefit-text{font-size:12px;color:#696969;font-weight:700;letter-spacing:0%;line-height:16px}.premium{font-size:12px;padding:4px 16px;border-radius:4px;height:24px;width:113px;background:#fff;color:#444}.normal-text{font-weight:400}.bold-text{font-weight:700}.top-benefit-card{border-radius:25px;background:#fff;border:1px solid #ececec;height:26px;width:114px;padding:0 6px 5px 12px;font-size:12px;font-weight:400;color:#444;letter-spacing:0%;position:absolute;transform:translate(-6em,-2.2em)}.top-box{position:absolute;text-align:center}\n"] }]
+            args: [{ selector: 'lib-in-built-benefit', standalone: true, imports: [CommonModule], template: "<div class=\"d-flex in-built-card\"\r\n [ngStyle]=\"{\r\n'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--inbuilt-card-bg-color': field()?.controlStyle?.background ,\r\n'--inbuilt-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <p class=\"w-100 top-box\">\r\n    <span class=\"top-benefit-card\">In-built Benefit</span>\r\n  </p>\r\n  <div>\r\n    <span class=\"premium-header\">Return of Premium</span> <br />\r\n    <span class=\"benefit-text normal-text\"\r\n      >Customer can get their premiums back on\r\n      <b class=\"bold-text\"\r\n        >diagnosis of Critical Illness (CI) or Total and Permanent Disability\r\n        (TPD) before the age of 80.</b\r\n      ></span\r\n    >\r\n    <br />\r\n    <span class=\"premium\"\r\n      ><b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})</span\r\n    >\r\n  </div>\r\n  <div class=\"m-auto\">\r\n    <img *ngIf=\"field()?.imageUrl\" [src]=\"field().imageUrl\" alt=\"\" />\r\n  </div>\r\n</div>\r\n", styles: [".in-built-card{max-width:var(--inbuilt-card-width, 100%)!important;min-height:114px;border-radius:var(--inbuilt-card-border-radius, 12px)!important;border:1px solid #0bb68b;border-color:var(--inbuilt-card-border-color, #0bb68b)!important;border-width:var(--inbuilt-card-border-width, 1px)!important;background:var(--inbuilt-card-bg-color, #e6f7f3)!important;padding:12px 16px;position:relative}.premium-header{font-size:14px;font-weight:700;letter-spacing:0px;line-height:18px;color:#444}.benefit-text{font-size:12px;color:#696969;font-weight:700;letter-spacing:0%;line-height:16px}.premium{font-size:12px;padding:4px 16px;border-radius:4px;height:24px;width:113px;background:#fff;color:#444}.normal-text{font-weight:400}.bold-text{font-weight:700}.top-benefit-card{border-radius:25px;background:#fff;border:1px solid #ececec;height:26px;width:114px;padding:0 6px 5px 12px;font-size:12px;font-weight:400;color:#444;letter-spacing:0%;position:absolute;transform:translate(-6em,-2.2em)}.top-box{position:absolute;text-align:center}\n"] }]
         }], propDecorators: { premiumAmount: [{
                 type: Input
             }], premiumAmountShort: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW4tYnVpbHQtYmVuZWZpdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL2luLWJ1aWx0LWJlbmVmaXQvaW4tYnVpbHQtYmVuZWZpdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL2luLWJ1aWx0LWJlbmVmaXQvaW4tYnVpbHQtYmVuZWZpdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFTeEQsTUFBTSxPQUFPLHVCQUF1QjtJQUNsQyxLQUFLLEdBQVEsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO0lBRTFCLGFBQWEsR0FBUSxXQUFXLENBQUM7SUFDakMsa0JBQWtCLEdBQVEsSUFBSSxDQUFDO3dHQUo3Qix1QkFBdUI7NEZBQXZCLHVCQUF1QixvZ0JDVnBDLHVuQ0E4QkEsaWtDRHhCWSxZQUFZOzs0RkFJWCx1QkFBdUI7a0JBUG5DLFNBQVM7K0JBQ0Usc0JBQXNCLGNBQ3BCLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQzs4QkFPZCxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLGtCQUFrQjtzQkFBMUIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2xpYi1pbi1idWlsdC1iZW5lZml0JyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9pbi1idWlsdC1iZW5lZml0LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vaW4tYnVpbHQtYmVuZWZpdC5jb21wb25lbnQuY3NzJyxcclxufSlcclxuZXhwb3J0IGNsYXNzIEluQnVpbHRCZW5lZml0Q29tcG9uZW50IHtcclxuICBmaWVsZDogYW55ID0gaW5wdXQucmVxdWlyZWQ8YW55PigpO1xyXG5cclxuICBASW5wdXQoKSBwcmVtaXVtQW1vdW50OiBhbnkgPSAn4oK5MSwwMCwwMDAnO1xyXG4gIEBJbnB1dCgpIHByZW1pdW1BbW91bnRTaG9ydDogYW55ID0gJzFMJztcclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiZC1mbGV4IGluLWJ1aWx0LWNhcmRcIlxyXG4gW25nU3R5bGVdPVwie1xyXG4nLS1pbmJ1aWx0LWNhcmQtYm9yZGVyLWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJDb2xvciAsXHJcbictLWluYnVpbHQtY2FyZC1ib3JkZXItd2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlcldpZHRoICxcclxuJy0taW5idWlsdC1jYXJkLWJvcmRlci1yYWRpdXMnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlclJhZGl1cyAsXHJcbictLWluYnVpbHQtY2FyZC1iZy1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYmFja2dyb3VuZCAsXHJcbictLWluYnVpbHQtY2FyZC13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8ud2lkdGggLFxyXG4gfVwiXHJcbj5cclxuICA8cCBjbGFzcz1cInctMTAwIHRvcC1ib3hcIj5cclxuICAgIDxzcGFuIGNsYXNzPVwidG9wLWJlbmVmaXQtY2FyZFwiPkluLWJ1aWx0IEJlbmVmaXQ8L3NwYW4+XHJcbiAgPC9wPlxyXG4gIDxkaXY+XHJcbiAgICA8c3BhbiBjbGFzcz1cInByZW1pdW0taGVhZGVyXCI+UmV0dXJuIG9mIFByZW1pdW08L3NwYW4+IDxiciAvPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJiZW5lZml0LXRleHQgbm9ybWFsLXRleHRcIlxyXG4gICAgICA+Q3VzdG9tZXIgY2FuIGdldCB0aGVpciBwcmVtaXVtcyBiYWNrIG9uXHJcbiAgICAgIDxiIGNsYXNzPVwiYm9sZC10ZXh0XCJcclxuICAgICAgICA+ZGlhZ25vc2lzIG9mIENyaXRpY2FsIElsbG5lc3MgKENJKSBvciBUb3RhbCBhbmQgUGVybWFuZW50IERpc2FiaWxpdHlcclxuICAgICAgICAoVFBEKSBiZWZvcmUgdGhlIGFnZSBvZiA4MC48L2JcclxuICAgICAgPjwvc3BhblxyXG4gICAgPlxyXG4gICAgPGJyIC8+XHJcbiAgICA8c3BhbiBjbGFzcz1cInByZW1pdW1cIlxyXG4gICAgICA+PGI+e3sgcHJlbWl1bUFtb3VudCB9fTwvYj4gKHt7IHByZW1pdW1BbW91bnRTaG9ydCB9fSk8L3NwYW5cclxuICAgID5cclxuICA8L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwibS1hdXRvXCI+XHJcbiAgICA8aW1nICpuZ0lmPVwiZmllbGQoKT8uaW1hZ2VVcmxcIiBbc3JjXT1cImZpZWxkKCkuaW1hZ2VVcmxcIiBhbHQ9XCJcIiAvPlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW4tYnVpbHQtYmVuZWZpdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL2luLWJ1aWx0LWJlbmVmaXQvaW4tYnVpbHQtYmVuZWZpdC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL2luLWJ1aWx0LWJlbmVmaXQvaW4tYnVpbHQtYmVuZWZpdC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7QUFTeEQsTUFBTSxPQUFPLHVCQUF1QjtJQUNsQyxLQUFLLEdBQVEsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO0lBRTFCLGFBQWEsR0FBUSxXQUFXLENBQUM7SUFDakMsa0JBQWtCLEdBQVEsSUFBSSxDQUFDO3dHQUo3Qix1QkFBdUI7NEZBQXZCLHVCQUF1QixvZ0JDVnBDLHVuQ0E4QkEsZ2tDRHhCWSxZQUFZOzs0RkFJWCx1QkFBdUI7a0JBUG5DLFNBQVM7K0JBQ0Usc0JBQXNCLGNBQ3BCLElBQUksV0FDUCxDQUFDLFlBQVksQ0FBQzs4QkFPZCxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLGtCQUFrQjtzQkFBMUIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2xpYi1pbi1idWlsdC1iZW5lZml0JyxcclxuICBzdGFuZGFsb25lOiB0cnVlLFxyXG4gIGltcG9ydHM6IFtDb21tb25Nb2R1bGVdLFxyXG4gIHRlbXBsYXRlVXJsOiAnLi9pbi1idWlsdC1iZW5lZml0LmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vaW4tYnVpbHQtYmVuZWZpdC5jb21wb25lbnQuY3NzJyxcclxufSlcclxuZXhwb3J0IGNsYXNzIEluQnVpbHRCZW5lZml0Q29tcG9uZW50IHtcclxuICBmaWVsZDogYW55ID0gaW5wdXQucmVxdWlyZWQ8YW55PigpO1xyXG5cclxuICBASW5wdXQoKSBwcmVtaXVtQW1vdW50OiBhbnkgPSAn4oK5MSwwMCwwMDAnO1xyXG4gIEBJbnB1dCgpIHByZW1pdW1BbW91bnRTaG9ydDogYW55ID0gJzFMJztcclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiZC1mbGV4IGluLWJ1aWx0LWNhcmRcIlxyXG4gW25nU3R5bGVdPVwie1xyXG4nLS1pbmJ1aWx0LWNhcmQtYm9yZGVyLWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5ib3JkZXJDb2xvciAsXHJcbictLWluYnVpbHQtY2FyZC1ib3JkZXItd2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlcldpZHRoICxcclxuJy0taW5idWlsdC1jYXJkLWJvcmRlci1yYWRpdXMnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlclJhZGl1cyAsXHJcbictLWluYnVpbHQtY2FyZC1iZy1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYmFja2dyb3VuZCAsXHJcbictLWluYnVpbHQtY2FyZC13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8ud2lkdGggLFxyXG4gfVwiXHJcbj5cclxuICA8cCBjbGFzcz1cInctMTAwIHRvcC1ib3hcIj5cclxuICAgIDxzcGFuIGNsYXNzPVwidG9wLWJlbmVmaXQtY2FyZFwiPkluLWJ1aWx0IEJlbmVmaXQ8L3NwYW4+XHJcbiAgPC9wPlxyXG4gIDxkaXY+XHJcbiAgICA8c3BhbiBjbGFzcz1cInByZW1pdW0taGVhZGVyXCI+UmV0dXJuIG9mIFByZW1pdW08L3NwYW4+IDxiciAvPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJiZW5lZml0LXRleHQgbm9ybWFsLXRleHRcIlxyXG4gICAgICA+Q3VzdG9tZXIgY2FuIGdldCB0aGVpciBwcmVtaXVtcyBiYWNrIG9uXHJcbiAgICAgIDxiIGNsYXNzPVwiYm9sZC10ZXh0XCJcclxuICAgICAgICA+ZGlhZ25vc2lzIG9mIENyaXRpY2FsIElsbG5lc3MgKENJKSBvciBUb3RhbCBhbmQgUGVybWFuZW50IERpc2FiaWxpdHlcclxuICAgICAgICAoVFBEKSBiZWZvcmUgdGhlIGFnZSBvZiA4MC48L2JcclxuICAgICAgPjwvc3BhblxyXG4gICAgPlxyXG4gICAgPGJyIC8+XHJcbiAgICA8c3BhbiBjbGFzcz1cInByZW1pdW1cIlxyXG4gICAgICA+PGI+e3sgcHJlbWl1bUFtb3VudCB9fTwvYj4gKHt7IHByZW1pdW1BbW91bnRTaG9ydCB9fSk8L3NwYW5cclxuICAgID5cclxuICA8L2Rpdj5cclxuICA8ZGl2IGNsYXNzPVwibS1hdXRvXCI+XHJcbiAgICA8aW1nICpuZ0lmPVwiZmllbGQoKT8uaW1hZ2VVcmxcIiBbc3JjXT1cImZpZWxkKCkuaW1hZ2VVcmxcIiBhbHQ9XCJcIiAvPlxyXG4gIDwvZGl2PlxyXG48L2Rpdj5cclxuIl19

package/esm2022/lib/pay-get-card/pay-get-card.component.mjs CHANGED Viewed

@@ -10,11 +10,11 @@ export class PayGetCardComponent {
     years = '2030';
     frequency = 'month';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayGetCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: PayGetCardComponent, isStandalone: true, selector: "lib-pay-get-card", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, payAmount: { classPropertyName: "payAmount", publicName: "payAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, ptValue: { classPropertyName: "ptValue", publicName: "ptValue", isSignal: false, isRequired: false, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: false, isRequired: false, transformFunction: null }, frequency: { classPropertyName: "frequency", publicName: "frequency", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"d-flex justify-content-between pay-card\"\r\n  [ngStyle]=\"{\r\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--pay-card-bg-color': field()?.controlStyle?.background ,\r\n'--pay-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <div class=\"text-center mx-2\">\r\n    <span class=\"bold-label\">Pay</span> <br />\r\n    <span class=\"grey-label\">{{payAmount}}</span>\r\n  </div>\r\n  <div class=\"premium-card\">\r\n    <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\r\n    <br />\r\n    <span class=\"grey-label\">for {{ptValue}} years (till {{years}})</span>\r\n  </div>\r\n</div>\r\n", styles: [".pay-card{max-width:var(--pay-card-width , 296px)!important;max-height:62px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius , 8px)!important;background-color:var(--pay-card-bg-color , #f5f5f5)!important;padding:2px 4px 10px 10px;border-color:var(--pay-card-border-color , #f5f5f5)!important;border-width:var(--pay-card-border-width , none)!important}.grey-label{font-size:12px;font-weight:700;color:#696969;line-height:16px}.bold-label{font-size:14px;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.premium-card{background:#fff;padding:0 6px 6px;height:54px;width:187px;border-radius:4px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: PayGetCardComponent, isStandalone: true, selector: "lib-pay-get-card", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, payAmount: { classPropertyName: "payAmount", publicName: "payAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, ptValue: { classPropertyName: "ptValue", publicName: "ptValue", isSignal: false, isRequired: false, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: false, isRequired: false, transformFunction: null }, frequency: { classPropertyName: "frequency", publicName: "frequency", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"d-flex justify-content-between pay-card\"\r\n  [ngStyle]=\"{\r\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--pay-card-bg-color': field()?.controlStyle?.background ,\r\n'--pay-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <div class=\"text-center mx-2\">\r\n    <span class=\"bold-label\">Pay</span> <br />\r\n    <span class=\"grey-label\">{{payAmount}}</span>\r\n  </div>\r\n  <div class=\"premium-card\">\r\n    <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\r\n    <br />\r\n    <span class=\"grey-label\">for {{ptValue}} years (till {{years}})</span>\r\n  </div>\r\n</div>\r\n", styles: [".pay-card{max-width:var(--pay-card-width , 100%)!important;max-height:62px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius , 8px)!important;background-color:var(--pay-card-bg-color , #f5f5f5)!important;padding:2px 4px 10px 10px;border-color:var(--pay-card-border-color , #f5f5f5)!important;border-width:var(--pay-card-border-width , none)!important}.grey-label{font-size:12px;font-weight:700;color:#696969;line-height:16px}.bold-label{font-size:14px;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.premium-card{background:#fff;padding:0 6px 6px;height:54px;width:187px;border-radius:4px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayGetCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-pay-get-card', standalone: true, imports: [CommonModule], template: "<div\r\n  class=\"d-flex justify-content-between pay-card\"\r\n  [ngStyle]=\"{\r\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--pay-card-bg-color': field()?.controlStyle?.background ,\r\n'--pay-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <div class=\"text-center mx-2\">\r\n    <span class=\"bold-label\">Pay</span> <br />\r\n    <span class=\"grey-label\">{{payAmount}}</span>\r\n  </div>\r\n  <div class=\"premium-card\">\r\n    <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\r\n    <br />\r\n    <span class=\"grey-label\">for {{ptValue}} years (till {{years}})</span>\r\n  </div>\r\n</div>\r\n", styles: [".pay-card{max-width:var(--pay-card-width , 296px)!important;max-height:62px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius , 8px)!important;background-color:var(--pay-card-bg-color , #f5f5f5)!important;padding:2px 4px 10px 10px;border-color:var(--pay-card-border-color , #f5f5f5)!important;border-width:var(--pay-card-border-width , none)!important}.grey-label{font-size:12px;font-weight:700;color:#696969;line-height:16px}.bold-label{font-size:14px;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.premium-card{background:#fff;padding:0 6px 6px;height:54px;width:187px;border-radius:4px;text-align:center}\n"] }]
+            args: [{ selector: 'lib-pay-get-card', standalone: true, imports: [CommonModule], template: "<div\r\n  class=\"d-flex justify-content-between pay-card\"\r\n  [ngStyle]=\"{\r\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--pay-card-bg-color': field()?.controlStyle?.background ,\r\n'--pay-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <div class=\"text-center mx-2\">\r\n    <span class=\"bold-label\">Pay</span> <br />\r\n    <span class=\"grey-label\">{{payAmount}}</span>\r\n  </div>\r\n  <div class=\"premium-card\">\r\n    <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\r\n    <br />\r\n    <span class=\"grey-label\">for {{ptValue}} years (till {{years}})</span>\r\n  </div>\r\n</div>\r\n", styles: [".pay-card{max-width:var(--pay-card-width , 100%)!important;max-height:62px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius , 8px)!important;background-color:var(--pay-card-bg-color , #f5f5f5)!important;padding:2px 4px 10px 10px;border-color:var(--pay-card-border-color , #f5f5f5)!important;border-width:var(--pay-card-border-width , none)!important}.grey-label{font-size:12px;font-weight:700;color:#696969;line-height:16px}.bold-label{font-size:14px;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.premium-card{background:#fff;padding:0 6px 6px;height:54px;width:187px;border-radius:4px;text-align:center}\n"] }]
         }], propDecorators: { payAmount: [{
                 type: Input
             }], premiumAmount: [{
@@ -26,4 +26,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }], frequency: [{
                 type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGF5LWdldC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hc3Rlci1jb250cm9sL3NyYy9saWIvcGF5LWdldC1jYXJkL3BheS1nZXQtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3BheS1nZXQtY2FyZC9wYXktZ2V0LWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBU3hELE1BQU0sT0FBTyxtQkFBbUI7SUFDaEMsS0FBSyxHQUFRLEtBQUssQ0FBQyxRQUFRLEVBQU8sQ0FBQztJQUN6QixTQUFTLEdBQVEsV0FBVyxDQUFDO0lBQzdCLGFBQWEsR0FBTyxTQUFTLENBQUM7SUFDOUIsT0FBTyxHQUFPLENBQUMsQ0FBQztJQUNoQixLQUFLLEdBQU8sTUFBTSxDQUFDO0lBQ25CLFNBQVMsR0FBTyxPQUFPLENBQUM7d0dBTnJCLG1CQUFtQjs0RkFBbkIsbUJBQW1CLGsyQkNWaEMsMHpCQW9CQSxrdkJEZFksWUFBWTs7NEZBSVgsbUJBQW1CO2tCQVAvQixTQUFTOytCQUNFLGtCQUFrQixjQUNoQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUM7OEJBTWYsU0FBUztzQkFBakIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2xpYi1wYXktZ2V0LWNhcmQnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3BheS1nZXQtY2FyZC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL3BheS1nZXQtY2FyZC5jb21wb25lbnQuY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgUGF5R2V0Q2FyZENvbXBvbmVudCB7XHJcbmZpZWxkOiBhbnkgPSBpbnB1dC5yZXF1aXJlZDxhbnk+KCk7XHJcbiBASW5wdXQoKSBwYXlBbW91bnQ6IGFueSA9ICfigrk2LDAwLDAwMCc7XHJcbiBASW5wdXQoKSBwcmVtaXVtQW1vdW50OiBhbnk9ICfigrkxMCwwMDAnO1xyXG4gQElucHV0KCkgcHRWYWx1ZTogYW55PSA1O1xyXG4gQElucHV0KCkgeWVhcnM6IGFueT0gJzIwMzAnO1xyXG4gQElucHV0KCkgZnJlcXVlbmN5OiBhbnk9ICdtb250aCc7XHJcbn1cclxuIiwiPGRpdlxyXG4gIGNsYXNzPVwiZC1mbGV4IGp1c3RpZnktY29udGVudC1iZXR3ZWVuIHBheS1jYXJkXCJcclxuICBbbmdTdHlsZV09XCJ7XHJcbictLXBheS1jYXJkLWJvcmRlci1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyQ29sb3IgLFxyXG4nLS1wYXktY2FyZC1ib3JkZXItd2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlcldpZHRoICxcclxuJy0tcGF5LWNhcmQtYm9yZGVyLXJhZGl1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyUmFkaXVzICxcclxuJy0tcGF5LWNhcmQtYmctY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJhY2tncm91bmQgLFxyXG4nLS1wYXktY2FyZC13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8ud2lkdGggLFxyXG4gfVwiXHJcbj5cclxuICA8ZGl2IGNsYXNzPVwidGV4dC1jZW50ZXIgbXgtMlwiPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJib2xkLWxhYmVsXCI+UGF5PC9zcGFuPiA8YnIgLz5cclxuICAgIDxzcGFuIGNsYXNzPVwiZ3JleS1sYWJlbFwiPnt7cGF5QW1vdW50fX08L3NwYW4+XHJcbiAgPC9kaXY+XHJcbiAgPGRpdiBjbGFzcz1cInByZW1pdW0tY2FyZFwiPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJsaWdodC1sYWJlbFwiPjxiIGNsYXNzPVwiYm9sZC1sYWJlbFwiPnt7cHJlbWl1bUFtb3VudH19PC9iPi8ge3tmcmVxdWVuY3l9fTwvc3Bhbj5cclxuICAgIDxiciAvPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJncmV5LWxhYmVsXCI+Zm9yIHt7cHRWYWx1ZX19IHllYXJzICh0aWxsIHt7eWVhcnN9fSk8L3NwYW4+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicGF5LWdldC1jYXJkLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hc3Rlci1jb250cm9sL3NyYy9saWIvcGF5LWdldC1jYXJkL3BheS1nZXQtY2FyZC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3BheS1nZXQtY2FyZC9wYXktZ2V0LWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQzs7O0FBU3hELE1BQU0sT0FBTyxtQkFBbUI7SUFDaEMsS0FBSyxHQUFRLEtBQUssQ0FBQyxRQUFRLEVBQU8sQ0FBQztJQUN6QixTQUFTLEdBQVEsV0FBVyxDQUFDO0lBQzdCLGFBQWEsR0FBTyxTQUFTLENBQUM7SUFDOUIsT0FBTyxHQUFPLENBQUMsQ0FBQztJQUNoQixLQUFLLEdBQU8sTUFBTSxDQUFDO0lBQ25CLFNBQVMsR0FBTyxPQUFPLENBQUM7d0dBTnJCLG1CQUFtQjs0RkFBbkIsbUJBQW1CLGsyQkNWaEMsMHpCQW9CQSxpdkJEZFksWUFBWTs7NEZBSVgsbUJBQW1CO2tCQVAvQixTQUFTOytCQUNFLGtCQUFrQixjQUNoQixJQUFJLFdBQ1AsQ0FBQyxZQUFZLENBQUM7OEJBTWYsU0FBUztzQkFBakIsS0FBSztnQkFDRyxhQUFhO3NCQUFyQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxLQUFLO3NCQUFiLEtBQUs7Z0JBQ0csU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIGlucHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICBzZWxlY3RvcjogJ2xpYi1wYXktZ2V0LWNhcmQnLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3BheS1nZXQtY2FyZC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL3BheS1nZXQtY2FyZC5jb21wb25lbnQuY3NzJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgUGF5R2V0Q2FyZENvbXBvbmVudCB7XHJcbmZpZWxkOiBhbnkgPSBpbnB1dC5yZXF1aXJlZDxhbnk+KCk7XHJcbiBASW5wdXQoKSBwYXlBbW91bnQ6IGFueSA9ICfigrk2LDAwLDAwMCc7XHJcbiBASW5wdXQoKSBwcmVtaXVtQW1vdW50OiBhbnk9ICfigrkxMCwwMDAnO1xyXG4gQElucHV0KCkgcHRWYWx1ZTogYW55PSA1O1xyXG4gQElucHV0KCkgeWVhcnM6IGFueT0gJzIwMzAnO1xyXG4gQElucHV0KCkgZnJlcXVlbmN5OiBhbnk9ICdtb250aCc7XHJcbn1cclxuIiwiPGRpdlxyXG4gIGNsYXNzPVwiZC1mbGV4IGp1c3RpZnktY29udGVudC1iZXR3ZWVuIHBheS1jYXJkXCJcclxuICBbbmdTdHlsZV09XCJ7XHJcbictLXBheS1jYXJkLWJvcmRlci1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyQ29sb3IgLFxyXG4nLS1wYXktY2FyZC1ib3JkZXItd2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlcldpZHRoICxcclxuJy0tcGF5LWNhcmQtYm9yZGVyLXJhZGl1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyUmFkaXVzICxcclxuJy0tcGF5LWNhcmQtYmctY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJhY2tncm91bmQgLFxyXG4nLS1wYXktY2FyZC13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8ud2lkdGggLFxyXG4gfVwiXHJcbj5cclxuICA8ZGl2IGNsYXNzPVwidGV4dC1jZW50ZXIgbXgtMlwiPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJib2xkLWxhYmVsXCI+UGF5PC9zcGFuPiA8YnIgLz5cclxuICAgIDxzcGFuIGNsYXNzPVwiZ3JleS1sYWJlbFwiPnt7cGF5QW1vdW50fX08L3NwYW4+XHJcbiAgPC9kaXY+XHJcbiAgPGRpdiBjbGFzcz1cInByZW1pdW0tY2FyZFwiPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJsaWdodC1sYWJlbFwiPjxiIGNsYXNzPVwiYm9sZC1sYWJlbFwiPnt7cHJlbWl1bUFtb3VudH19PC9iPi8ge3tmcmVxdWVuY3l9fTwvc3Bhbj5cclxuICAgIDxiciAvPlxyXG4gICAgPHNwYW4gY2xhc3M9XCJncmV5LWxhYmVsXCI+Zm9yIHt7cHRWYWx1ZX19IHllYXJzICh0aWxsIHt7eWVhcnN9fSk8L3NwYW4+XHJcbiAgPC9kaXY+XHJcbjwvZGl2PlxyXG4iXX0=

package/esm2022/lib/toggle/toggle.component.mjs CHANGED Viewed

@@ -11,10 +11,10 @@ export class ToggleComponent {
     }
     field = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, deps: [{ token: i1.MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ToggleComponent, isStandalone: true, selector: "lib-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n  '--custom-toggle-width': field()?.controlStyle?.width,\r\n  }\"\r\n  [ngClass]=\"field()?.cssClass ? 'card toggle-background mt-2' + field()?.cssClass : 'card toggle-background mt-2'\"\r\n  >\r\n    <div class=\"toggle_switch mt-2\">\r\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <p>{{field().configData?.leftLabel}}</p>\r\n      </div>\r\n      <div class=\"mb-1\">\r\n        <label class=\"switch\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [name]=\"field()?.fieldName\"\r\n            [id]=\"field()?.fieldName\"\r\n            [disabled]=\"field()?.isDisable\"\r\n          />\r\n          <span class=\"slider round\"></span>\r\n        </label>\r\n      </div>\r\n      <div [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <div>{{field()?.label}}</div>\r\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"], dependencies: [{ 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 }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ToggleComponent, isStandalone: true, selector: "lib-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n  '--custom-toggle-width': field()?.controlStyle?.width,\r\n  }\"\r\n  [ngClass]=\"field()?.cssClass ? 'card toggle-background mt-2' + field()?.cssClass : 'card toggle-background mt-2'\"\r\n  >\r\n    <div class=\"toggle_switch mt-2\">\r\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <div>{{field().configData?.leftLabel}}</div>\r\n      </div>\r\n      <div class=\"mt-1\">\r\n        <label class=\"switch\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [name]=\"field()?.fieldName\"\r\n            [id]=\"field()?.fieldName\"\r\n            [disabled]=\"field()?.isDisable\"\r\n          />\r\n          <span class=\"slider round\"></span>\r\n        </label>\r\n      </div>\r\n      <div [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <div>{{field()?.label}}</div>\r\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"], dependencies: [{ 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 }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n  '--custom-toggle-width': field()?.controlStyle?.width,\r\n  }\"\r\n  [ngClass]=\"field()?.cssClass ? 'card toggle-background mt-2' + field()?.cssClass : 'card toggle-background mt-2'\"\r\n  >\r\n    <div class=\"toggle_switch mt-2\">\r\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <p>{{field().configData?.leftLabel}}</p>\r\n      </div>\r\n      <div class=\"mb-1\">\r\n        <label class=\"switch\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [name]=\"field()?.fieldName\"\r\n            [id]=\"field()?.fieldName\"\r\n            [disabled]=\"field()?.isDisable\"\r\n          />\r\n          <span class=\"slider round\"></span>\r\n        </label>\r\n      </div>\r\n      <div [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <div>{{field()?.label}}</div>\r\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"] }]
+            args: [{ selector: 'lib-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n  '--custom-toggle-width': field()?.controlStyle?.width,\r\n  }\"\r\n  [ngClass]=\"field()?.cssClass ? 'card toggle-background mt-2' + field()?.cssClass : 'card toggle-background mt-2'\"\r\n  >\r\n    <div class=\"toggle_switch mt-2\">\r\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <div>{{field().configData?.leftLabel}}</div>\r\n      </div>\r\n      <div class=\"mt-1\">\r\n        <label class=\"switch\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [name]=\"field()?.fieldName\"\r\n            [id]=\"field()?.fieldName\"\r\n            [disabled]=\"field()?.isDisable\"\r\n          />\r\n          <span class=\"slider round\"></span>\r\n        </label>\r\n      </div>\r\n      <div [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <div>{{field()?.label}}</div>\r\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"] }]
         }], ctorParameters: () => [{ type: i1.MasterControlService }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hc3Rlci1jb250cm9sL3NyYy9saWIvdG9nZ2xlL3RvZ2dsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RvZ2dsZS90b2dnbGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWpELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBU3JELE1BQU0sT0FBTyxlQUFlO0lBQ1A7SUFBbkIsWUFBbUIsYUFBb0M7UUFBcEMsa0JBQWEsR0FBYixhQUFhLENBQXVCO0lBQUUsQ0FBQztJQUMxRCxLQUFLLEdBQVMsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO3dHQUZ6QixlQUFlOzRGQUFmLGVBQWUseU1DWjVCLHlsRUF3Q0EsazJERGhDWSxZQUFZLHFUQUFFLG1CQUFtQjs7NEZBSWhDLGVBQWU7a0JBUDNCLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxtQkFBbUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWFzdGVyQ29udHJvbFNlcnZpY2UgfSBmcm9tICcuLi9tYXN0ZXItY29udHJvbC5zZXJ2aWNlJztcclxuaW1wb3J0IHsgUmVhY3RpdmVGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLXRvZ2dsZScsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vdG9nZ2xlLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vdG9nZ2xlLmNvbXBvbmVudC5jc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUb2dnbGVDb21wb25lbnQge1xyXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBtYXN0ZXJTZXJ2aWNlIDogTWFzdGVyQ29udHJvbFNlcnZpY2Upe31cclxuICBmaWVsZCA6IGFueSA9IGlucHV0LnJlcXVpcmVkPGFueT4oKTtcclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiXCIgKm5nSWY9XCJmaWVsZCgpICYmIGZpZWxkKCk/LmlzVmlzaWJsZSAmJiBmaWVsZCgpLmlzU2hvd0xhYmVsXCIgW25nU3R5bGVdPVwie1xyXG4gICctLWN1c3RvbS10b2dnbGUtYmctY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJhY2tncm91bmQsXHJcbiAgJy0tY3VzdG9tLXRvZ2dsZS1ib3JkZXItY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlckNvbG9yICxcclxuICAnLS1jdXN0b20tdG9nZ2xlLWJvcmRlci13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyV2lkdGggLFxyXG4gICctLWN1c3RvbS10b2dnbGUtYm9yZGVyLXJhZGl1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyUmFkaXVzLFxyXG4gICctLWN1c3RvbS10b2dnbGUtd2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LndpZHRoLFxyXG4gIH1cIlxyXG4gIFtuZ0NsYXNzXT1cImZpZWxkKCk/LmNzc0NsYXNzID8gJ2NhcmQgdG9nZ2xlLWJhY2tncm91bmQgbXQtMicgKyBmaWVsZCgpPy5jc3NDbGFzcyA6ICdjYXJkIHRvZ2dsZS1iYWNrZ3JvdW5kIG10LTInXCJcclxuICA+XHJcbiAgICA8ZGl2IGNsYXNzPVwidG9nZ2xlX3N3aXRjaCBtdC0yXCI+XHJcbiAgICAgIDxkaXYgKm5nSWY9XCJmaWVsZCgpLmNvbmZpZ0RhdGE/LmxlZnRMYWJlbFwiIFtuZ1N0eWxlXT1cIntcclxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtc2l6ZSc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9udFNpemUgLFxyXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC13ZWlnaHQnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRXZWlnaHQgLFxyXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC1mYW1pbHknOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRGYW1pbHkgLFxyXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uY29sb3IgLFxyXG4gICAgICAgIH1cIiBjbGFzcz1cInRvZ2dsZS10ZXh0IG1iLTJcIj5cclxuICAgICAgICA8cD57e2ZpZWxkKCkuY29uZmlnRGF0YT8ubGVmdExhYmVsfX08L3A+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgICA8ZGl2IGNsYXNzPVwibWItMVwiPlxyXG4gICAgICAgIDxsYWJlbCBjbGFzcz1cInN3aXRjaFwiPlxyXG4gICAgICAgICAgPGlucHV0XHJcbiAgICAgICAgICAgIHR5cGU9XCJjaGVja2JveFwiXHJcbiAgICAgICAgICAgIFtuYW1lXT1cImZpZWxkKCk/LmZpZWxkTmFtZVwiXHJcbiAgICAgICAgICAgIFtpZF09XCJmaWVsZCgpPy5maWVsZE5hbWVcIlxyXG4gICAgICAgICAgICBbZGlzYWJsZWRdPVwiZmllbGQoKT8uaXNEaXNhYmxlXCJcclxuICAgICAgICAgIC8+XHJcbiAgICAgICAgICA8c3BhbiBjbGFzcz1cInNsaWRlciByb3VuZFwiPjwvc3Bhbj5cclxuICAgICAgICA8L2xhYmVsPlxyXG4gICAgICA8L2Rpdj5cclxuICAgICAgPGRpdiBbbmdTdHlsZV09XCJ7XHJcbiAgICAgICAgJy0tY3VzdG9tLXRvZ2dsZS1mb250LXNpemUnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRTaXplICxcclxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtd2VpZ2h0JzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250V2VpZ2h0ICxcclxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtZmFtaWx5JzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250RmFtaWx5ICxcclxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmNvbG9yICxcclxuICAgICAgICB9XCIgY2xhc3M9XCJ0b2dnbGUtdGV4dCBtYi0yXCI+XHJcbiAgICAgICAgPGRpdj57e2ZpZWxkKCk/LmxhYmVsfX08L2Rpdj5cclxuICAgICAgICA8ZGl2IHN0eWxlPVwiZm9udC1zaXplOiAxMHB4OyBmb250LXdlaWdodDogNDAwO1wiICpuZ0lmPVwiZmllbGQoKS5jb25maWdEYXRhPy5zdWJMYWJlbFwiPnt7ZmllbGQoKT8uY29uZmlnRGF0YT8uc3ViTGFiZWx9fSA8aW1nIGFsdD1cIlwiIFtzcmNdPVwiZmllbGQoKT8uaW1hZ2VVcmxcIiAqbmdJZj1cImZpZWxkKCk/LmltYWdlVXJsXCIgLz4gPC9kaXY+XHJcbiAgICAgIDwvZGl2PlxyXG4gICAgPC9kaXY+XHJcbiAgPC9kaXY+XHJcbiJdfQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hc3Rlci1jb250cm9sL3NyYy9saWIvdG9nZ2xlL3RvZ2dsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RvZ2dsZS90b2dnbGUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRWpELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDOzs7O0FBU3JELE1BQU0sT0FBTyxlQUFlO0lBQ1A7SUFBbkIsWUFBbUIsYUFBb0M7UUFBcEMsa0JBQWEsR0FBYixhQUFhLENBQXVCO0lBQUUsQ0FBQztJQUMxRCxLQUFLLEdBQVMsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO3dHQUZ6QixlQUFlOzRGQUFmLGVBQWUseU1DWjVCLDZsRUF3Q0EsazJERGhDWSxZQUFZLHFUQUFFLG1CQUFtQjs7NEZBSWhDLGVBQWU7a0JBUDNCLFNBQVM7K0JBQ0UsWUFBWSxjQUNWLElBQUksV0FDUCxDQUFDLFlBQVksRUFBRSxtQkFBbUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbW1vbk1vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XHJcbmltcG9ydCB7IENvbXBvbmVudCwgaW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgTWFzdGVyQ29udHJvbFNlcnZpY2UgfSBmcm9tICcuLi9tYXN0ZXItY29udHJvbC5zZXJ2aWNlJztcclxuaW1wb3J0IHsgUmVhY3RpdmVGb3Jtc01vZHVsZSB9IGZyb20gJ0Bhbmd1bGFyL2Zvcm1zJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLXRvZ2dsZScsXHJcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICBpbXBvcnRzOiBbQ29tbW9uTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vdG9nZ2xlLmNvbXBvbmVudC5odG1sJyxcclxuICBzdHlsZVVybDogJy4vdG9nZ2xlLmNvbXBvbmVudC5jc3MnXHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBUb2dnbGVDb21wb25lbnQge1xyXG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBtYXN0ZXJTZXJ2aWNlIDogTWFzdGVyQ29udHJvbFNlcnZpY2Upe31cclxuICBmaWVsZCA6IGFueSA9IGlucHV0LnJlcXVpcmVkPGFueT4oKTtcclxufVxyXG4iLCI8ZGl2IGNsYXNzPVwiXCIgKm5nSWY9XCJmaWVsZCgpICYmIGZpZWxkKCk/LmlzVmlzaWJsZSAmJiBmaWVsZCgpLmlzU2hvd0xhYmVsXCIgW25nU3R5bGVdPVwie1xyXG4gICctLWN1c3RvbS10b2dnbGUtYmctY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJhY2tncm91bmQsXHJcbiAgJy0tY3VzdG9tLXRvZ2dsZS1ib3JkZXItY29sb3InOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmJvcmRlckNvbG9yICxcclxuICAnLS1jdXN0b20tdG9nZ2xlLWJvcmRlci13aWR0aCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyV2lkdGggLFxyXG4gICctLWN1c3RvbS10b2dnbGUtYm9yZGVyLXJhZGl1cyc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uYm9yZGVyUmFkaXVzLFxyXG4gICctLWN1c3RvbS10b2dnbGUtd2lkdGgnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LndpZHRoLFxyXG4gIH1cIlxyXG4gIFtuZ0NsYXNzXT1cImZpZWxkKCk/LmNzc0NsYXNzID8gJ2NhcmQgdG9nZ2xlLWJhY2tncm91bmQgbXQtMicgKyBmaWVsZCgpPy5jc3NDbGFzcyA6ICdjYXJkIHRvZ2dsZS1iYWNrZ3JvdW5kIG10LTInXCJcclxuICA+XHJcbiAgICA8ZGl2IGNsYXNzPVwidG9nZ2xlX3N3aXRjaCBtdC0yXCI+XHJcbiAgICAgIDxkaXYgKm5nSWY9XCJmaWVsZCgpLmNvbmZpZ0RhdGE/LmxlZnRMYWJlbFwiIFtuZ1N0eWxlXT1cIntcclxuICAgICAgICAnLS1jdXN0b20tdG9nZ2xlLWZvbnQtc2l6ZSc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9udFNpemUgLFxyXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC13ZWlnaHQnOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRXZWlnaHQgLFxyXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC1mYW1pbHknOiBmaWVsZCgpPy5jb250cm9sU3R5bGU/LmZvbnRGYW1pbHkgLFxyXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC1jb2xvcic6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uY29sb3IgLFxyXG4gICAgICAgIH1cIiBjbGFzcz1cInRvZ2dsZS10ZXh0IG1iLTJcIj5cclxuICAgICAgICA8ZGl2Pnt7ZmllbGQoKS5jb25maWdEYXRhPy5sZWZ0TGFiZWx9fTwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuICAgICAgPGRpdiBjbGFzcz1cIm10LTFcIj5cclxuICAgICAgICA8bGFiZWwgY2xhc3M9XCJzd2l0Y2hcIj5cclxuICAgICAgICAgIDxpbnB1dFxyXG4gICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxyXG4gICAgICAgICAgICBbbmFtZV09XCJmaWVsZCgpPy5maWVsZE5hbWVcIlxyXG4gICAgICAgICAgICBbaWRdPVwiZmllbGQoKT8uZmllbGROYW1lXCJcclxuICAgICAgICAgICAgW2Rpc2FibGVkXT1cImZpZWxkKCk/LmlzRGlzYWJsZVwiXHJcbiAgICAgICAgICAvPlxyXG4gICAgICAgICAgPHNwYW4gY2xhc3M9XCJzbGlkZXIgcm91bmRcIj48L3NwYW4+XHJcbiAgICAgICAgPC9sYWJlbD5cclxuICAgICAgPC9kaXY+XHJcbiAgICAgIDxkaXYgW25nU3R5bGVdPVwie1xyXG4gICAgICAgICctLWN1c3RvbS10b2dnbGUtZm9udC1zaXplJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5mb250U2l6ZSAsXHJcbiAgICAgICAgJy0tY3VzdG9tLXRvZ2dsZS1mb250LXdlaWdodCc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9udFdlaWdodCAsXHJcbiAgICAgICAgJy0tY3VzdG9tLXRvZ2dsZS1mb250LWZhbWlseSc6IGZpZWxkKCk/LmNvbnRyb2xTdHlsZT8uZm9udEZhbWlseSAsXHJcbiAgICAgICAgJy0tY3VzdG9tLXRvZ2dsZS1mb250LWNvbG9yJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy5jb2xvciAsXHJcbiAgICAgICAgfVwiIGNsYXNzPVwidG9nZ2xlLXRleHQgbWItMlwiPlxyXG4gICAgICAgIDxkaXY+e3tmaWVsZCgpPy5sYWJlbH19PC9kaXY+XHJcbiAgICAgICAgPGRpdiBzdHlsZT1cImZvbnQtc2l6ZTogMTBweDsgZm9udC13ZWlnaHQ6IDQwMDtcIiAqbmdJZj1cImZpZWxkKCkuY29uZmlnRGF0YT8uc3ViTGFiZWxcIj57e2ZpZWxkKCk/LmNvbmZpZ0RhdGE/LnN1YkxhYmVsfX0gPGltZyBhbHQ9XCJcIiBbc3JjXT1cImZpZWxkKCk/LmltYWdlVXJsXCIgKm5nSWY9XCJmaWVsZCgpPy5pbWFnZVVybFwiIC8+IDwvZGl2PlxyXG4gICAgICA8L2Rpdj5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG4iXX0=

package/esm2022/lib/toggle-button/toggle-button.component.mjs CHANGED Viewed

@@ -7,10 +7,10 @@ import * as i2 from "@angular/common";
 export class ToggleButtonComponent {
     field = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ToggleButtonComponent, isStandalone: true, selector: "lib-toggle-button", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n  <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n</div>\r\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(-5px);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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ToggleButtonComponent, isStandalone: true, selector: "lib-toggle-button", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n  <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n</div>\r\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none;background-color:none!important}: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(-5px);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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-toggle-button', standalone: true, imports: [MatButtonToggleModule, CommonModule], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n  <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n</div>\r\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(-5px);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"] }]
+            args: [{ selector: 'lib-toggle-button', standalone: true, imports: [MatButtonToggleModule, CommonModule], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n  <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n</div>\r\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none;background-color:none!important}: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(-5px);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"] }]
         }] });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RvZ2dsZS1idXR0b24vdG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RvZ2dsZS1idXR0b24vdG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0saUNBQWlDLENBQUM7Ozs7QUFTeEUsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQyxLQUFLLEdBQVMsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO3dHQUR6QixxQkFBcUI7NEZBQXJCLHFCQUFxQixnTkNYbEMsd2tDQWtDQSw4OEREM0JZLHFCQUFxQixzb0JBQUUsWUFBWTs7NEZBSWxDLHFCQUFxQjtrQkFQakMsU0FBUzsrQkFDRSxtQkFBbUIsY0FDakIsSUFBSSxXQUNQLENBQUMscUJBQXFCLEVBQUUsWUFBWSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNYXRCdXR0b25Ub2dnbGVNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24tdG9nZ2xlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLXRvZ2dsZS1idXR0b24nLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW01hdEJ1dHRvblRvZ2dsZU1vZHVsZSwgQ29tbW9uTW9kdWxlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vdG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL3RvZ2dsZS1idXR0b24uY29tcG9uZW50LmNzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIFRvZ2dsZUJ1dHRvbkNvbXBvbmVudCB7XHJcbiAgZmllbGQgOiBhbnkgPSBpbnB1dC5yZXF1aXJlZDxhbnk+KCk7XHJcbn1cclxuIiwiPGRpdiBzdHlsZT1cInBvc2l0aW9uOiByZWxhdGl2ZVwiIFtuZ0NsYXNzXT1cImZpZWxkKCk/LmNzc0NsYXNzXCI+XHJcbiAgPG1hdC1idXR0b24tdG9nZ2xlLWdyb3VwXHJcbiAgW25nU3R5bGVdPVwie1xyXG4gICAgICAnLS10b2dnbGUtYnV0dG9uLXdpZHRoJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy53aWR0aCAsXHJcbiAgICB9XCJcclxuICAgIG5hbWU9XCJmb250U3R5bGVcIlxyXG4gICAgY2xhc3M9XCJjdXN0b20tbWF0LXRvZ2dsZVwiXHJcbiAgICBhcmlhLWxhYmVsPVwiRm9udCBTdHlsZVwiXHJcbiAgICAqbmdJZj1cImZpZWxkKCkgJiYgZmllbGQoKT8uaXNWaXNpYmxlICYmIGZpZWxkKCk/LmNvbmZpZ0RhdGE/Lm9wdGlvbnNcIlxyXG4gID5cclxuICAgIEBmb3IgKGRhdGEgb2YgZmllbGQoKT8uY29uZmlnRGF0YT8ub3B0aW9uczsgdHJhY2sgJGluZGV4KSB7XHJcbiAgICA8bWF0LWJ1dHRvbi10b2dnbGUgW3ZhbHVlXT1cImRhdGEudmFsdWVcIlxyXG4gICAgICA+e3sgZGF0YS5sYWJlbCB9fVxyXG4gICAgICA8aW1nXHJcbiAgICAgICAgKm5nSWY9XCJkYXRhLmltZ1VybFwiXHJcbiAgICAgICAgW3NyY109XCJkYXRhLmltZ1VybFwiXHJcbiAgICAgICAgYWx0PVwiXCJcclxuICAgICAgICBjbGFzcz1cInRvZ2dsZS1pbWcgbXgtMVwiXHJcbiAgICAgIC8+XHJcbiAgICA8L21hdC1idXR0b24tdG9nZ2xlPlxyXG4gICAgPGRpdiBjbGFzcz1cInRvcC1ncmVlbi1jYXJkXCIgKm5nSWY9XCJkYXRhLnRvZ2dsZVRvcFRleHRcIj5cclxuICAgICAgPHNwYW4gY2xhc3M9XCJzZWNvbmQtYm94XCI+XHJcbiAgICAgICAgPGltZ1xyXG4gICAgICAgICAgY2xhc3M9XCJncmVlbi1jYXJkLWltZ1wiXHJcbiAgICAgICAgICAqbmdJZj1cImRhdGEudG9wSW1hZ2VcIlxyXG4gICAgICAgICAgW3NyY109XCJkYXRhLnRvcEltYWdlXCJcclxuICAgICAgICAgIGFsdD1cIlwiXHJcbiAgICAgICAgLz5cclxuICAgICAgICA8c3Bhbj57eyBkYXRhLnRvZ2dsZVRvcFRleHQgfX08L3NwYW4+XHJcbiAgICAgIDwvc3Bhbj5cclxuICAgIDwvZGl2PlxyXG4gICAgfVxyXG4gIDwvbWF0LWJ1dHRvbi10b2dnbGUtZ3JvdXA+XHJcbjwvZGl2PlxyXG4iXX0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RvZ2dsZS1idXR0b24vdG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXN0ZXItY29udHJvbC9zcmMvbGliL3RvZ2dsZS1idXR0b24vdG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakQsT0FBTyxFQUFFLHFCQUFxQixFQUFFLE1BQU0saUNBQWlDLENBQUM7Ozs7QUFTeEUsTUFBTSxPQUFPLHFCQUFxQjtJQUNoQyxLQUFLLEdBQVMsS0FBSyxDQUFDLFFBQVEsRUFBTyxDQUFDO3dHQUR6QixxQkFBcUI7NEZBQXJCLHFCQUFxQixnTkNYbEMsd2tDQWtDQSw4K0REM0JZLHFCQUFxQixzb0JBQUUsWUFBWTs7NEZBSWxDLHFCQUFxQjtrQkFQakMsU0FBUzsrQkFDRSxtQkFBbUIsY0FDakIsSUFBSSxXQUNQLENBQUMscUJBQXFCLEVBQUUsWUFBWSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgQ29tcG9uZW50LCBpbnB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBNYXRCdXR0b25Ub2dnbGVNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9idXR0b24tdG9nZ2xlJztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLXRvZ2dsZS1idXR0b24nLFxyXG4gIHN0YW5kYWxvbmU6IHRydWUsXHJcbiAgaW1wb3J0czogW01hdEJ1dHRvblRvZ2dsZU1vZHVsZSwgQ29tbW9uTW9kdWxlXSxcclxuICB0ZW1wbGF0ZVVybDogJy4vdG9nZ2xlLWJ1dHRvbi5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmw6ICcuL3RvZ2dsZS1idXR0b24uY29tcG9uZW50LmNzcydcclxufSlcclxuZXhwb3J0IGNsYXNzIFRvZ2dsZUJ1dHRvbkNvbXBvbmVudCB7XHJcbiAgZmllbGQgOiBhbnkgPSBpbnB1dC5yZXF1aXJlZDxhbnk+KCk7XHJcbn1cclxuIiwiPGRpdiBzdHlsZT1cInBvc2l0aW9uOiByZWxhdGl2ZVwiIFtuZ0NsYXNzXT1cImZpZWxkKCk/LmNzc0NsYXNzXCI+XHJcbiAgPG1hdC1idXR0b24tdG9nZ2xlLWdyb3VwXHJcbiAgW25nU3R5bGVdPVwie1xyXG4gICAgICAnLS10b2dnbGUtYnV0dG9uLXdpZHRoJzogZmllbGQoKT8uY29udHJvbFN0eWxlPy53aWR0aCAsXHJcbiAgICB9XCJcclxuICAgIG5hbWU9XCJmb250U3R5bGVcIlxyXG4gICAgY2xhc3M9XCJjdXN0b20tbWF0LXRvZ2dsZVwiXHJcbiAgICBhcmlhLWxhYmVsPVwiRm9udCBTdHlsZVwiXHJcbiAgICAqbmdJZj1cImZpZWxkKCkgJiYgZmllbGQoKT8uaXNWaXNpYmxlICYmIGZpZWxkKCk/LmNvbmZpZ0RhdGE/Lm9wdGlvbnNcIlxyXG4gID5cclxuICAgIEBmb3IgKGRhdGEgb2YgZmllbGQoKT8uY29uZmlnRGF0YT8ub3B0aW9uczsgdHJhY2sgJGluZGV4KSB7XHJcbiAgICA8bWF0LWJ1dHRvbi10b2dnbGUgW3ZhbHVlXT1cImRhdGEudmFsdWVcIlxyXG4gICAgICA+e3sgZGF0YS5sYWJlbCB9fVxyXG4gICAgICA8aW1nXHJcbiAgICAgICAgKm5nSWY9XCJkYXRhLmltZ1VybFwiXHJcbiAgICAgICAgW3NyY109XCJkYXRhLmltZ1VybFwiXHJcbiAgICAgICAgYWx0PVwiXCJcclxuICAgICAgICBjbGFzcz1cInRvZ2dsZS1pbWcgbXgtMVwiXHJcbiAgICAgIC8+XHJcbiAgICA8L21hdC1idXR0b24tdG9nZ2xlPlxyXG4gICAgPGRpdiBjbGFzcz1cInRvcC1ncmVlbi1jYXJkXCIgKm5nSWY9XCJkYXRhLnRvZ2dsZVRvcFRleHRcIj5cclxuICAgICAgPHNwYW4gY2xhc3M9XCJzZWNvbmQtYm94XCI+XHJcbiAgICAgICAgPGltZ1xyXG4gICAgICAgICAgY2xhc3M9XCJncmVlbi1jYXJkLWltZ1wiXHJcbiAgICAgICAgICAqbmdJZj1cImRhdGEudG9wSW1hZ2VcIlxyXG4gICAgICAgICAgW3NyY109XCJkYXRhLnRvcEltYWdlXCJcclxuICAgICAgICAgIGFsdD1cIlwiXHJcbiAgICAgICAgLz5cclxuICAgICAgICA8c3Bhbj57eyBkYXRhLnRvZ2dsZVRvcFRleHQgfX08L3NwYW4+XHJcbiAgICAgIDwvc3Bhbj5cclxuICAgIDwvZGl2PlxyXG4gICAgfVxyXG4gIDwvbWF0LWJ1dHRvbi10b2dnbGUtZ3JvdXA+XHJcbjwvZGl2PlxyXG4iXX0=

package/fesm2022/master-control.mjs CHANGED Viewed

@@ -464,11 +464,11 @@ class ToggleComponent {
     }
     field = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ToggleComponent, isStandalone: true, selector: "lib-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n  '--custom-toggle-width': field()?.controlStyle?.width,\r\n  }\"\r\n  [ngClass]=\"field()?.cssClass ? 'card toggle-background mt-2' + field()?.cssClass : 'card toggle-background mt-2'\"\r\n  >\r\n    <div class=\"toggle_switch mt-2\">\r\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <p>{{field().configData?.leftLabel}}</p>\r\n      </div>\r\n      <div class=\"mb-1\">\r\n        <label class=\"switch\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [name]=\"field()?.fieldName\"\r\n            [id]=\"field()?.fieldName\"\r\n            [disabled]=\"field()?.isDisable\"\r\n          />\r\n          <span class=\"slider round\"></span>\r\n        </label>\r\n      </div>\r\n      <div [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <div>{{field()?.label}}</div>\r\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ToggleComponent, isStandalone: true, selector: "lib-toggle", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n  '--custom-toggle-width': field()?.controlStyle?.width,\r\n  }\"\r\n  [ngClass]=\"field()?.cssClass ? 'card toggle-background mt-2' + field()?.cssClass : 'card toggle-background mt-2'\"\r\n  >\r\n    <div class=\"toggle_switch mt-2\">\r\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <div>{{field().configData?.leftLabel}}</div>\r\n      </div>\r\n      <div class=\"mt-1\">\r\n        <label class=\"switch\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [name]=\"field()?.fieldName\"\r\n            [id]=\"field()?.fieldName\"\r\n            [disabled]=\"field()?.isDisable\"\r\n          />\r\n          <span class=\"slider round\"></span>\r\n        </label>\r\n      </div>\r\n      <div [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <div>{{field()?.label}}</div>\r\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n  '--custom-toggle-width': field()?.controlStyle?.width,\r\n  }\"\r\n  [ngClass]=\"field()?.cssClass ? 'card toggle-background mt-2' + field()?.cssClass : 'card toggle-background mt-2'\"\r\n  >\r\n    <div class=\"toggle_switch mt-2\">\r\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <p>{{field().configData?.leftLabel}}</p>\r\n      </div>\r\n      <div class=\"mb-1\">\r\n        <label class=\"switch\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [name]=\"field()?.fieldName\"\r\n            [id]=\"field()?.fieldName\"\r\n            [disabled]=\"field()?.isDisable\"\r\n          />\r\n          <span class=\"slider round\"></span>\r\n        </label>\r\n      </div>\r\n      <div [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <div>{{field()?.label}}</div>\r\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"] }]
+            args: [{ selector: 'lib-toggle', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\" [ngStyle]=\"{\r\n  '--custom-toggle-bg-color': field()?.controlStyle?.background,\r\n  '--custom-toggle-border-color': field()?.controlStyle?.borderColor ,\r\n  '--custom-toggle-border-width': field()?.controlStyle?.borderWidth ,\r\n  '--custom-toggle-border-radius': field()?.controlStyle?.borderRadius,\r\n  '--custom-toggle-width': field()?.controlStyle?.width,\r\n  }\"\r\n  [ngClass]=\"field()?.cssClass ? 'card toggle-background mt-2' + field()?.cssClass : 'card toggle-background mt-2'\"\r\n  >\r\n    <div class=\"toggle_switch mt-2\">\r\n      <div *ngIf=\"field().configData?.leftLabel\" [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <div>{{field().configData?.leftLabel}}</div>\r\n      </div>\r\n      <div class=\"mt-1\">\r\n        <label class=\"switch\">\r\n          <input\r\n            type=\"checkbox\"\r\n            [name]=\"field()?.fieldName\"\r\n            [id]=\"field()?.fieldName\"\r\n            [disabled]=\"field()?.isDisable\"\r\n          />\r\n          <span class=\"slider round\"></span>\r\n        </label>\r\n      </div>\r\n      <div [ngStyle]=\"{\r\n        '--custom-toggle-font-size': field()?.controlStyle?.fontSize ,\r\n        '--custom-toggle-font-weight': field()?.controlStyle?.fontWeight ,\r\n        '--custom-toggle-font-family': field()?.controlStyle?.fontFamily ,\r\n        '--custom-toggle-font-color': field()?.controlStyle?.color ,\r\n        }\" class=\"toggle-text mb-2\">\r\n        <div>{{field()?.label}}</div>\r\n        <div style=\"font-size: 10px; font-weight: 400;\" *ngIf=\"field().configData?.subLabel\">{{field()?.configData?.subLabel}} <img alt=\"\" [src]=\"field()?.imageUrl\" *ngIf=\"field()?.imageUrl\" /> </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n", styles: ["*{font-family:mulish!important}::ng-deep .toggle-background{background-color:var(--custom-toggle-bg-color , #f5f5f5)!important;padding:2px 8px;width:var(--custom-toggle-width , 100%)!important;box-shadow:none}::ng-deep .toggle-background{border-color:var(--custom-toggle-border-color , transparent)!important;border-radius:var(--custom-toggle-border-radius , 4px)!important;border-width:var(--custom-toggle-border-width , 1px)!important}::ng-deep .toggle_switch{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:400;font-family:Mulish;color:#444}::ng-deep .switch{position:relative;display:inline-block;width:34px;height:18px}::ng-deep .switch input{opacity:0;width:0;height:0}::ng-deep .slider{position:absolute;cursor:pointer;inset:0;background-color:#ddd;-webkit-transition:.4s;transition:.4s}::ng-deep .slider:before{position:absolute;content:\"\";height:11px;width:11px;left:4px;bottom:4px;background-color:#fff;-webkit-transition:.4s;transition:.4s}::ng-deep .slider.round{border-radius:34px}::ng-deep input:checked+.slider{background-color:#fb0}::ng-deep input:checked+.slider:before{-webkit-transform:translateX(16px);-ms-transform:translateX(16px);transform:translate(16px)}::ng-deep .slider.round:before{border-radius:50%}::ng-deep .remove-border{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .remove-border:focus-visible{border:none!important;outline:none!important;box-shadow:none!important}::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,.mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background{border-color:#fb0!important;background-color:#fb0!important;border-radius:4px!important}::ng-deep .mdc-checkbox__checkmark{color:#fff!important}::ng-deep .mdc-checkbox__background{border:1px solid #dadada!important}\n"] }]
         }], ctorParameters: () => [{ type: MasterControlService }] });
 class UploadComponent {
@@ -2244,11 +2244,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class ToggleButtonComponent {
     field = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ToggleButtonComponent, isStandalone: true, selector: "lib-toggle-button", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n  <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n</div>\r\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(-5px);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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ToggleButtonComponent, isStandalone: true, selector: "lib-toggle-button", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n  <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n</div>\r\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none;background-color:none!important}: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(-5px);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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-toggle-button', standalone: true, imports: [MatButtonToggleModule, CommonModule], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n  <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n</div>\r\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(-5px);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"] }]
+            args: [{ selector: 'lib-toggle-button', standalone: true, imports: [MatButtonToggleModule, CommonModule], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n  <mat-button-toggle-group\r\n  [ngStyle]=\"{\r\n      '--toggle-button-width': field()?.controlStyle?.width ,\r\n    }\"\r\n    name=\"fontStyle\"\r\n    class=\"custom-mat-toggle\"\r\n    aria-label=\"Font Style\"\r\n    *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\"\r\n  >\r\n    @for (data of field()?.configData?.options; track $index) {\r\n    <mat-button-toggle [value]=\"data.value\"\r\n      >{{ data.label }}\r\n      <img\r\n        *ngIf=\"data.imgUrl\"\r\n        [src]=\"data.imgUrl\"\r\n        alt=\"\"\r\n        class=\"toggle-img mx-1\"\r\n      />\r\n    </mat-button-toggle>\r\n    <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n      <span class=\"second-box\">\r\n        <img\r\n          class=\"green-card-img\"\r\n          *ngIf=\"data.topImage\"\r\n          [src]=\"data.topImage\"\r\n          alt=\"\"\r\n        />\r\n        <span>{{ data.toggleTopText }}</span>\r\n      </span>\r\n    </div>\r\n    }\r\n  </mat-button-toggle-group>\r\n</div>\r\n", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none;background-color:none!important}: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(-5px);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"] }]
         }] });
 class PayGetCardComponent {
@@ -2259,11 +2259,11 @@ class PayGetCardComponent {
     years = '2030';
     frequency = 'month';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayGetCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: PayGetCardComponent, isStandalone: true, selector: "lib-pay-get-card", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, payAmount: { classPropertyName: "payAmount", publicName: "payAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, ptValue: { classPropertyName: "ptValue", publicName: "ptValue", isSignal: false, isRequired: false, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: false, isRequired: false, transformFunction: null }, frequency: { classPropertyName: "frequency", publicName: "frequency", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"d-flex justify-content-between pay-card\"\r\n  [ngStyle]=\"{\r\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--pay-card-bg-color': field()?.controlStyle?.background ,\r\n'--pay-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <div class=\"text-center mx-2\">\r\n    <span class=\"bold-label\">Pay</span> <br />\r\n    <span class=\"grey-label\">{{payAmount}}</span>\r\n  </div>\r\n  <div class=\"premium-card\">\r\n    <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\r\n    <br />\r\n    <span class=\"grey-label\">for {{ptValue}} years (till {{years}})</span>\r\n  </div>\r\n</div>\r\n", styles: [".pay-card{max-width:var(--pay-card-width , 296px)!important;max-height:62px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius , 8px)!important;background-color:var(--pay-card-bg-color , #f5f5f5)!important;padding:2px 4px 10px 10px;border-color:var(--pay-card-border-color , #f5f5f5)!important;border-width:var(--pay-card-border-width , none)!important}.grey-label{font-size:12px;font-weight:700;color:#696969;line-height:16px}.bold-label{font-size:14px;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.premium-card{background:#fff;padding:0 6px 6px;height:54px;width:187px;border-radius:4px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: PayGetCardComponent, isStandalone: true, selector: "lib-pay-get-card", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, payAmount: { classPropertyName: "payAmount", publicName: "payAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, ptValue: { classPropertyName: "ptValue", publicName: "ptValue", isSignal: false, isRequired: false, transformFunction: null }, years: { classPropertyName: "years", publicName: "years", isSignal: false, isRequired: false, transformFunction: null }, frequency: { classPropertyName: "frequency", publicName: "frequency", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\r\n  class=\"d-flex justify-content-between pay-card\"\r\n  [ngStyle]=\"{\r\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--pay-card-bg-color': field()?.controlStyle?.background ,\r\n'--pay-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <div class=\"text-center mx-2\">\r\n    <span class=\"bold-label\">Pay</span> <br />\r\n    <span class=\"grey-label\">{{payAmount}}</span>\r\n  </div>\r\n  <div class=\"premium-card\">\r\n    <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\r\n    <br />\r\n    <span class=\"grey-label\">for {{ptValue}} years (till {{years}})</span>\r\n  </div>\r\n</div>\r\n", styles: [".pay-card{max-width:var(--pay-card-width , 100%)!important;max-height:62px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius , 8px)!important;background-color:var(--pay-card-bg-color , #f5f5f5)!important;padding:2px 4px 10px 10px;border-color:var(--pay-card-border-color , #f5f5f5)!important;border-width:var(--pay-card-border-width , none)!important}.grey-label{font-size:12px;font-weight:700;color:#696969;line-height:16px}.bold-label{font-size:14px;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.premium-card{background:#fff;padding:0 6px 6px;height:54px;width:187px;border-radius:4px;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PayGetCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-pay-get-card', standalone: true, imports: [CommonModule], template: "<div\r\n  class=\"d-flex justify-content-between pay-card\"\r\n  [ngStyle]=\"{\r\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--pay-card-bg-color': field()?.controlStyle?.background ,\r\n'--pay-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <div class=\"text-center mx-2\">\r\n    <span class=\"bold-label\">Pay</span> <br />\r\n    <span class=\"grey-label\">{{payAmount}}</span>\r\n  </div>\r\n  <div class=\"premium-card\">\r\n    <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\r\n    <br />\r\n    <span class=\"grey-label\">for {{ptValue}} years (till {{years}})</span>\r\n  </div>\r\n</div>\r\n", styles: [".pay-card{max-width:var(--pay-card-width , 296px)!important;max-height:62px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius , 8px)!important;background-color:var(--pay-card-bg-color , #f5f5f5)!important;padding:2px 4px 10px 10px;border-color:var(--pay-card-border-color , #f5f5f5)!important;border-width:var(--pay-card-border-width , none)!important}.grey-label{font-size:12px;font-weight:700;color:#696969;line-height:16px}.bold-label{font-size:14px;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.premium-card{background:#fff;padding:0 6px 6px;height:54px;width:187px;border-radius:4px;text-align:center}\n"] }]
+            args: [{ selector: 'lib-pay-get-card', standalone: true, imports: [CommonModule], template: "<div\r\n  class=\"d-flex justify-content-between pay-card\"\r\n  [ngStyle]=\"{\r\n'--pay-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--pay-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--pay-card-bg-color': field()?.controlStyle?.background ,\r\n'--pay-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <div class=\"text-center mx-2\">\r\n    <span class=\"bold-label\">Pay</span> <br />\r\n    <span class=\"grey-label\">{{payAmount}}</span>\r\n  </div>\r\n  <div class=\"premium-card\">\r\n    <span class=\"light-label\"><b class=\"bold-label\">{{premiumAmount}}</b>/ {{frequency}}</span>\r\n    <br />\r\n    <span class=\"grey-label\">for {{ptValue}} years (till {{years}})</span>\r\n  </div>\r\n</div>\r\n", styles: [".pay-card{max-width:var(--pay-card-width , 100%)!important;max-height:62px;border:1px solid #f5f5f5;border-radius:var(--pay-card-border-radius , 8px)!important;background-color:var(--pay-card-bg-color , #f5f5f5)!important;padding:2px 4px 10px 10px;border-color:var(--pay-card-border-color , #f5f5f5)!important;border-width:var(--pay-card-border-width , none)!important}.grey-label{font-size:12px;font-weight:700;color:#696969;line-height:16px}.bold-label{font-size:14px;font-weight:700;line-height:20px;color:#444}.light-label{font-size:12px;font-weight:400;line-height:16px;color:#000}.premium-card{background:#fff;padding:0 6px 6px;height:54px;width:187px;border-radius:4px;text-align:center}\n"] }]
         }], propDecorators: { payAmount: [{
                 type: Input
             }], premiumAmount: [{
@@ -2281,11 +2281,11 @@ class InBuiltBenefitComponent {
     premiumAmount = '₹1,00,000';
     premiumAmountShort = '1L';
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InBuiltBenefitComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InBuiltBenefitComponent, isStandalone: true, selector: "lib-in-built-benefit", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmountShort: { classPropertyName: "premiumAmountShort", publicName: "premiumAmountShort", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex in-built-card\"\r\n [ngStyle]=\"{\r\n'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--inbuilt-card-bg-color': field()?.controlStyle?.background ,\r\n'--inbuilt-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <p class=\"w-100 top-box\">\r\n    <span class=\"top-benefit-card\">In-built Benefit</span>\r\n  </p>\r\n  <div>\r\n    <span class=\"premium-header\">Return of Premium</span> <br />\r\n    <span class=\"benefit-text normal-text\"\r\n      >Customer can get their premiums back on\r\n      <b class=\"bold-text\"\r\n        >diagnosis of Critical Illness (CI) or Total and Permanent Disability\r\n        (TPD) before the age of 80.</b\r\n      ></span\r\n    >\r\n    <br />\r\n    <span class=\"premium\"\r\n      ><b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})</span\r\n    >\r\n  </div>\r\n  <div class=\"m-auto\">\r\n    <img *ngIf=\"field()?.imageUrl\" [src]=\"field().imageUrl\" alt=\"\" />\r\n  </div>\r\n</div>\r\n", styles: [".in-built-card{max-width:var(--inbuilt-card-width, 757px)!important;min-height:114px;border-radius:var(--inbuilt-card-border-radius, 12px)!important;border:1px solid #0bb68b;border-color:var(--inbuilt-card-border-color, #0bb68b)!important;border-width:var(--inbuilt-card-border-width, 1px)!important;background:var(--inbuilt-card-bg-color, #e6f7f3)!important;padding:12px 16px;position:relative}.premium-header{font-size:14px;font-weight:700;letter-spacing:0px;line-height:18px;color:#444}.benefit-text{font-size:12px;color:#696969;font-weight:700;letter-spacing:0%;line-height:16px}.premium{font-size:12px;padding:4px 16px;border-radius:4px;height:24px;width:113px;background:#fff;color:#444}.normal-text{font-weight:400}.bold-text{font-weight:700}.top-benefit-card{border-radius:25px;background:#fff;border:1px solid #ececec;height:26px;width:114px;padding:0 6px 5px 12px;font-size:12px;font-weight:400;color:#444;letter-spacing:0%;position:absolute;transform:translate(-6em,-2.2em)}.top-box{position:absolute;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: InBuiltBenefitComponent, isStandalone: true, selector: "lib-in-built-benefit", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null }, premiumAmount: { classPropertyName: "premiumAmount", publicName: "premiumAmount", isSignal: false, isRequired: false, transformFunction: null }, premiumAmountShort: { classPropertyName: "premiumAmountShort", publicName: "premiumAmountShort", isSignal: false, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"d-flex in-built-card\"\r\n [ngStyle]=\"{\r\n'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--inbuilt-card-bg-color': field()?.controlStyle?.background ,\r\n'--inbuilt-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <p class=\"w-100 top-box\">\r\n    <span class=\"top-benefit-card\">In-built Benefit</span>\r\n  </p>\r\n  <div>\r\n    <span class=\"premium-header\">Return of Premium</span> <br />\r\n    <span class=\"benefit-text normal-text\"\r\n      >Customer can get their premiums back on\r\n      <b class=\"bold-text\"\r\n        >diagnosis of Critical Illness (CI) or Total and Permanent Disability\r\n        (TPD) before the age of 80.</b\r\n      ></span\r\n    >\r\n    <br />\r\n    <span class=\"premium\"\r\n      ><b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})</span\r\n    >\r\n  </div>\r\n  <div class=\"m-auto\">\r\n    <img *ngIf=\"field()?.imageUrl\" [src]=\"field().imageUrl\" alt=\"\" />\r\n  </div>\r\n</div>\r\n", styles: [".in-built-card{max-width:var(--inbuilt-card-width, 100%)!important;min-height:114px;border-radius:var(--inbuilt-card-border-radius, 12px)!important;border:1px solid #0bb68b;border-color:var(--inbuilt-card-border-color, #0bb68b)!important;border-width:var(--inbuilt-card-border-width, 1px)!important;background:var(--inbuilt-card-bg-color, #e6f7f3)!important;padding:12px 16px;position:relative}.premium-header{font-size:14px;font-weight:700;letter-spacing:0px;line-height:18px;color:#444}.benefit-text{font-size:12px;color:#696969;font-weight:700;letter-spacing:0%;line-height:16px}.premium{font-size:12px;padding:4px 16px;border-radius:4px;height:24px;width:113px;background:#fff;color:#444}.normal-text{font-weight:400}.bold-text{font-weight:700}.top-benefit-card{border-radius:25px;background:#fff;border:1px solid #ececec;height:26px;width:114px;padding:0 6px 5px 12px;font-size:12px;font-weight:400;color:#444;letter-spacing:0%;position:absolute;transform:translate(-6em,-2.2em)}.top-box{position:absolute;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: InBuiltBenefitComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-in-built-benefit', standalone: true, imports: [CommonModule], template: "<div class=\"d-flex in-built-card\"\r\n [ngStyle]=\"{\r\n'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--inbuilt-card-bg-color': field()?.controlStyle?.background ,\r\n'--inbuilt-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <p class=\"w-100 top-box\">\r\n    <span class=\"top-benefit-card\">In-built Benefit</span>\r\n  </p>\r\n  <div>\r\n    <span class=\"premium-header\">Return of Premium</span> <br />\r\n    <span class=\"benefit-text normal-text\"\r\n      >Customer can get their premiums back on\r\n      <b class=\"bold-text\"\r\n        >diagnosis of Critical Illness (CI) or Total and Permanent Disability\r\n        (TPD) before the age of 80.</b\r\n      ></span\r\n    >\r\n    <br />\r\n    <span class=\"premium\"\r\n      ><b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})</span\r\n    >\r\n  </div>\r\n  <div class=\"m-auto\">\r\n    <img *ngIf=\"field()?.imageUrl\" [src]=\"field().imageUrl\" alt=\"\" />\r\n  </div>\r\n</div>\r\n", styles: [".in-built-card{max-width:var(--inbuilt-card-width, 757px)!important;min-height:114px;border-radius:var(--inbuilt-card-border-radius, 12px)!important;border:1px solid #0bb68b;border-color:var(--inbuilt-card-border-color, #0bb68b)!important;border-width:var(--inbuilt-card-border-width, 1px)!important;background:var(--inbuilt-card-bg-color, #e6f7f3)!important;padding:12px 16px;position:relative}.premium-header{font-size:14px;font-weight:700;letter-spacing:0px;line-height:18px;color:#444}.benefit-text{font-size:12px;color:#696969;font-weight:700;letter-spacing:0%;line-height:16px}.premium{font-size:12px;padding:4px 16px;border-radius:4px;height:24px;width:113px;background:#fff;color:#444}.normal-text{font-weight:400}.bold-text{font-weight:700}.top-benefit-card{border-radius:25px;background:#fff;border:1px solid #ececec;height:26px;width:114px;padding:0 6px 5px 12px;font-size:12px;font-weight:400;color:#444;letter-spacing:0%;position:absolute;transform:translate(-6em,-2.2em)}.top-box{position:absolute;text-align:center}\n"] }]
+            args: [{ selector: 'lib-in-built-benefit', standalone: true, imports: [CommonModule], template: "<div class=\"d-flex in-built-card\"\r\n [ngStyle]=\"{\r\n'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,\r\n'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,\r\n'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--inbuilt-card-bg-color': field()?.controlStyle?.background ,\r\n'--inbuilt-card-width': field()?.controlStyle?.width ,\r\n }\"\r\n>\r\n  <p class=\"w-100 top-box\">\r\n    <span class=\"top-benefit-card\">In-built Benefit</span>\r\n  </p>\r\n  <div>\r\n    <span class=\"premium-header\">Return of Premium</span> <br />\r\n    <span class=\"benefit-text normal-text\"\r\n      >Customer can get their premiums back on\r\n      <b class=\"bold-text\"\r\n        >diagnosis of Critical Illness (CI) or Total and Permanent Disability\r\n        (TPD) before the age of 80.</b\r\n      ></span\r\n    >\r\n    <br />\r\n    <span class=\"premium\"\r\n      ><b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})</span\r\n    >\r\n  </div>\r\n  <div class=\"m-auto\">\r\n    <img *ngIf=\"field()?.imageUrl\" [src]=\"field().imageUrl\" alt=\"\" />\r\n  </div>\r\n</div>\r\n", styles: [".in-built-card{max-width:var(--inbuilt-card-width, 100%)!important;min-height:114px;border-radius:var(--inbuilt-card-border-radius, 12px)!important;border:1px solid #0bb68b;border-color:var(--inbuilt-card-border-color, #0bb68b)!important;border-width:var(--inbuilt-card-border-width, 1px)!important;background:var(--inbuilt-card-bg-color, #e6f7f3)!important;padding:12px 16px;position:relative}.premium-header{font-size:14px;font-weight:700;letter-spacing:0px;line-height:18px;color:#444}.benefit-text{font-size:12px;color:#696969;font-weight:700;letter-spacing:0%;line-height:16px}.premium{font-size:12px;padding:4px 16px;border-radius:4px;height:24px;width:113px;background:#fff;color:#444}.normal-text{font-weight:400}.bold-text{font-weight:700}.top-benefit-card{border-radius:25px;background:#fff;border:1px solid #ececec;height:26px;width:114px;padding:0 6px 5px 12px;font-size:12px;font-weight:400;color:#444;letter-spacing:0%;position:absolute;transform:translate(-6em,-2.2em)}.top-box{position:absolute;text-align:center}\n"] }]
         }], propDecorators: { premiumAmount: [{
                 type: Input
             }], premiumAmountShort: [{
@@ -2318,11 +2318,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class DiscountV2Component {
     field = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DiscountV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DiscountV2Component, isStandalone: true, selector: "lib-discount-v2", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"px-3 py-2 discount-card-v2\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"\r\n{\r\n    '--discount-design-border-width': field()?.controlStyle?.borderWidth,\r\n    '--discount-design-border-color': field()?.controlStyle?.borderColor ,\r\n    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,\r\n    '--discount-design-width': field()?.controlStyle?.width ,\r\n    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--discount-design-bg': field()?.controlStyle?.background ,\r\n}\">\r\n    <div class=\"mb-2 discount-heading\" [ngStyle]=\"\r\n{\r\n    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,\r\n    '--discount-heading-font-color': field()?.controlStyle?.color\r\n}\">{{field()?.label}}</div>\r\n    <div>\r\n        <button class=\"px-2 mt-1 discount-btn-remove\"><div>Remove</div> <mat-icon class=\"pt-1 remove-btn-cross\">close</mat-icon></button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".discount-card-v2{border-width:var(--discount-design-border-width , 1px);border-color:var(--discount-design-border-color , #0BB68B);border-style:var(--discount-design-border-style , solid);width:var(--discount-design-width , fit-content);border-radius:var(--discount-design-border-radius , 8px);box-shadow:0 2px 15px 2px #e3e6ec99;background:var(--discount-design-bg , #fff)}.discount-heading{font-weight:var(--discount-heading-font-weight , 700);font-size:var(--discount-heading-font-size , 12px);color:var(--discount-heading-font-color , #444)}.discount-btn-remove{border-radius:32px;border:1px solid #EE0000;background-color:#fff;font-size:12px;font-weight:700;color:#e00;display:flex;background:#fff}.remove-btn-cross{font-size:12.5px!important;transform:translateY(2px)}*{font-family:Mulish!important}.material-icons{font-family:Material Icons!important}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: DiscountV2Component, isStandalone: true, selector: "lib-discount-v2", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"px-3 py-2 discount-card-v2\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"\r\n{\r\n    '--discount-design-border-width': field()?.controlStyle?.borderWidth,\r\n    '--discount-design-border-color': field()?.controlStyle?.borderColor ,\r\n    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,\r\n    '--discount-design-width': field()?.controlStyle?.width ,\r\n    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--discount-design-bg': field()?.controlStyle?.background ,\r\n}\">\r\n    <div class=\"mb-2 discount-heading\" [ngStyle]=\"\r\n{\r\n    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,\r\n    '--discount-heading-font-color': field()?.controlStyle?.color\r\n}\">{{field()?.label}}</div>\r\n    <div>\r\n        <button class=\"px-2 mt-1 discount-btn-remove\"><div>Remove</div> <mat-icon class=\"pt-1 remove-btn-cross\">close</mat-icon></button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".discount-card-v2{border-width:var(--discount-design-border-width , 1px);border-color:var(--discount-design-border-color , #0BB68B);border-style:var(--discount-design-border-style , solid);width:var(--discount-design-width , 100%);border-radius:var(--discount-design-border-radius , 8px);box-shadow:0 2px 15px 2px #e3e6ec99;background:var(--discount-design-bg , #fff)}.discount-heading{font-weight:var(--discount-heading-font-weight , 700);font-size:var(--discount-heading-font-size , 12px);color:var(--discount-heading-font-color , #444)}.discount-btn-remove{border-radius:32px;border:1px solid #EE0000;background-color:#fff;font-size:12px;font-weight:700;color:#e00;display:flex;background:#fff}.remove-btn-cross{font-size:12.5px!important;transform:translateY(2px)}*{font-family:Mulish!important}.material-icons{font-family:Material Icons!important}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i7.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DiscountV2Component, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-discount-v2', standalone: true, imports: [MatIconModule, CommonModule], template: "<div class=\"px-3 py-2 discount-card-v2\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"\r\n{\r\n    '--discount-design-border-width': field()?.controlStyle?.borderWidth,\r\n    '--discount-design-border-color': field()?.controlStyle?.borderColor ,\r\n    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,\r\n    '--discount-design-width': field()?.controlStyle?.width ,\r\n    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--discount-design-bg': field()?.controlStyle?.background ,\r\n}\">\r\n    <div class=\"mb-2 discount-heading\" [ngStyle]=\"\r\n{\r\n    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,\r\n    '--discount-heading-font-color': field()?.controlStyle?.color\r\n}\">{{field()?.label}}</div>\r\n    <div>\r\n        <button class=\"px-2 mt-1 discount-btn-remove\"><div>Remove</div> <mat-icon class=\"pt-1 remove-btn-cross\">close</mat-icon></button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".discount-card-v2{border-width:var(--discount-design-border-width , 1px);border-color:var(--discount-design-border-color , #0BB68B);border-style:var(--discount-design-border-style , solid);width:var(--discount-design-width , fit-content);border-radius:var(--discount-design-border-radius , 8px);box-shadow:0 2px 15px 2px #e3e6ec99;background:var(--discount-design-bg , #fff)}.discount-heading{font-weight:var(--discount-heading-font-weight , 700);font-size:var(--discount-heading-font-size , 12px);color:var(--discount-heading-font-color , #444)}.discount-btn-remove{border-radius:32px;border:1px solid #EE0000;background-color:#fff;font-size:12px;font-weight:700;color:#e00;display:flex;background:#fff}.remove-btn-cross{font-size:12.5px!important;transform:translateY(2px)}*{font-family:Mulish!important}.material-icons{font-family:Material Icons!important}\n"] }]
+            args: [{ selector: 'lib-discount-v2', standalone: true, imports: [MatIconModule, CommonModule], template: "<div class=\"px-3 py-2 discount-card-v2\" *ngIf=\"field() && field()?.isVisible\" [ngStyle]=\"\r\n{\r\n    '--discount-design-border-width': field()?.controlStyle?.borderWidth,\r\n    '--discount-design-border-color': field()?.controlStyle?.borderColor ,\r\n    '--discount-design-border-style': field()?.controlStyle?.borderStyle ,\r\n    '--discount-design-width': field()?.controlStyle?.width ,\r\n    '--discount-design-border-radius': field()?.controlStyle?.borderRadius ,\r\n    '--discount-design-bg': field()?.controlStyle?.background ,\r\n}\">\r\n    <div class=\"mb-2 discount-heading\" [ngStyle]=\"\r\n{\r\n    '--discount-heading-font-weight': field()?.controlStyle?.fontWeight ,\r\n    '--discount-heading-font-size': field()?.controlStyle?.fontSize ,\r\n    '--discount-heading-font-color': field()?.controlStyle?.color\r\n}\">{{field()?.label}}</div>\r\n    <div>\r\n        <button class=\"px-2 mt-1 discount-btn-remove\"><div>Remove</div> <mat-icon class=\"pt-1 remove-btn-cross\">close</mat-icon></button>\r\n    </div>\r\n</div>\r\n\r\n", styles: [".discount-card-v2{border-width:var(--discount-design-border-width , 1px);border-color:var(--discount-design-border-color , #0BB68B);border-style:var(--discount-design-border-style , solid);width:var(--discount-design-width , 100%);border-radius:var(--discount-design-border-radius , 8px);box-shadow:0 2px 15px 2px #e3e6ec99;background:var(--discount-design-bg , #fff)}.discount-heading{font-weight:var(--discount-heading-font-weight , 700);font-size:var(--discount-heading-font-size , 12px);color:var(--discount-heading-font-color , #444)}.discount-btn-remove{border-radius:32px;border:1px solid #EE0000;background-color:#fff;font-size:12px;font-weight:700;color:#e00;display:flex;background:#fff}.remove-btn-cross{font-size:12.5px!important;transform:translateY(2px)}*{font-family:Mulish!important}.material-icons{font-family:Material Icons!important}\n"] }]
         }] });
 class LabelValueCardComponent {