master-control 0.2.14 → 0.2.15

package/src/lib/autocomplete/autocomplete.component.css

@@ -1,240 +0,0 @@
-.field-lable{
-  font-size: 10px !important;
-  font-weight: 700 !important;
-  color: #444 !important;
-  margin-bottom: 0px !important;
-}
-.error-message{
-  color: red;
-}
-/* focus css for mat-form-field */
-  ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
-  .mat-mdc-notch-piece {
-  border-color:  var(--custom-border-color-focus, #ffbb00) !important;
-  border-width: var(--custom-border-width-focus, 1.5px) !important;
-}
-
-::ng-deep .mat-mdc-form-field {
- background-color: var(--custom-bg-color, #ffffff) !important;
- border-radius: var(--custom-border-radius ,  7px) !important;
-}
-
-/* hover css for mat-form-field */
-
-::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
-    .mdc-text-field--focused
-  ):hover
-  .mdc-notched-outline
-  .mdc-notched-outline__leading {
-    border-color:  var(--custom-border-color-hover, #ffbb00) !important;
-    border-width: var(--custom-border-width-hover, 1.5px) !important;
-  }
-
-::ng-deep   .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
-    .mdc-text-field--focused
-  ):hover
-  .mdc-notched-outline
-  .mdc-notched-outline__notch {
-    border-color:  var(--custom-border-color-hover, #ffbb00) !important;
-    border-width: var(--custom-border-width-hover, 1.5px) !important;
-  }
-
-::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
-    .mdc-text-field--focused
-  ):hover
-  .mdc-notched-outline
-  .mdc-notched-outline__trailing {
-    border-color:  var(--custom-border-color-hover, #ffbb00) !important;
-    border-width: var(--custom-border-width-hover, 1.5px) !important;
-  }
-
-/* regular css for mat-form-field */
- ::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece {
-  border-color:  var(--custom-border-color, #dddddd) !important;
-  border-width: var(--custom-border-width, 1.5px) !important;
-}
-
-/* field css for mat-form-input-field */
-::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled)
-  .mdc-text-field__input {
-  caret-color: var(--custom-caret-color, #ffbb00) !important;
-  /* font-size: var(--custom-font-size, 16px) !important; */
-  font-size: 12px !important;
-  font-weight: var(--custom-font-weight, 400) !important;
-  font-family: var(--custom-font-family, 'Mulish') !important;
-  color: var(--custom-font-color, #444444) !important;
-}
-/* Error state for mat-form-field */
-::ng-deep .mat-form-field-invalid
-  .mdc-text-field--outlined .mat-mdc-notch-piece {
-    border-color:  var(--custom-border-color-error, red) !important;
-    border-width: var(--custom-border-width-error, 1.5px) !important;
-}
-
-::ng-deep .mat-mdc-form-field.mat-form-field-disabled{
- background: var(--custom-bg-color-disabled, #ECECEC) !important;
-}
-::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input {
-  color : var(--custom-font-color-disabled, #999999) !important;
-}
-::ng-deep .mdc-label {
-    color: var(--custom-font-color, #444) !important;
-    font-size: var(--custom-font-size, 16px) !important;
-    font-weight: var(--custom-font-weight, 400) !important;
-    font-family: var(--custom-font-family, 'Mulish') !important;
-}
-::placeholder {
-  color: #8f8f8f !important;
-  font-size: 12px !important;
-}
-::ng-deep .mat-mdc-form-field-hint-wrapper{
-  padding: 0px !important;
- }
-::ng-deep .mat-mdc-form-field-error-wrapper{
-  padding: 0px !important;
- }
- ::ng-deep .mat-mdc-form-field-error{
-  color: #EE0000 !important;
-  font-size: 12px;
-  font-weight: 500;
-  font-family: "Mulish" !important;
-  letter-spacing: 0;
- }
-::ng-deep .mdc-text-field--outlined {
-  --mdc-outlined-text-field-container-shape: var(--custom-border-radius ,  7px) !important;
-}
-::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece {
-    border-color:  var(--custom-border-color-error, red) !important;
-    border-width: var(--custom-border-width-error, 1.5px) !important;
-}
-
-::ng-deep .mat-mdc-form-field-subscript-wrapper {
-  display: none !important;
-}
-
-::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow {
-  color: #fb0;
-}
-::ng-deep .mat-mdc-select-arrow {
-  border-style: solid !important;
-  border-width: 0 2px 2px 0 !important;
-  border-right: 2px solid !important;
-  content: "" !important;
-  display: inline-block !important;
-  padding: 3px !important;
-  transform: rotate(45deg) !important;
-  vertical-align: middle !important;
-  width: unset !important;
-  height: unset !important;
-  color: #444 !important;
-}
-::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow {
-  color: #fb0;
-}
-::ng-deep .mat-mdc-select-arrow svg {
-  display: none !important;
-}
-::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel {
-  background: #fff !important;
-}
-::ng-deep div.mat-mdc-select-panel{
-  background: #fff !important;
-}
-::ng-deep .mat-mdc-option.mdc-list-item {
-  background: #fff !important;
-  color: #444 !important;
-  font-weight: 400;
-}
-::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
-  color: #ffbb00 !important;
-}
-::ng-deep .mat-mdc-option:focus.mdc-list-item{
-  background: #fffaeb !important;
-  border-left: 4px solid #fb0;
-  font-weight: 600;
-  color: #444 !important;
-  border-radius: 3px;
-}
-::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
-  background: #fffaeb !important;
-  border-left: 4px solid #fb0;
-  font-weight: 600;
-  color: #444 !important;
-  border-radius: 3px;
-}
-::ng-deep .mat-mdc-option.mdc-list-item {
-  background: var(--custom-select-option-background-color, #fff) !important;
-  color: var(--custom-select-option-font-color, #444) !important;
-  font-weight: var(--custom-select-option-font-weight, 400) !important;
-}
-::ng-deep .mat-mdc-option:focus.mdc-list-item {
-  background: var(--custom-select-option-background-color-focus, #fffaeb) !important;
-  color: var(--custom-select-option-font-color-focus, #444) !important;
-  font-weight: var(--custom-select-option-font-weight-focus, 600) !important;
-  border-left: var(--custom-select-option-border-left-focus, 4px solid #fb0) !important;
-  border-radius: var(--custom-select-option-border-radius-focus,  3px) !important;
-}
-::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
-  background: var(--custom-select-option-background-color-focus, #fffaeb) !important;
-  color: var(--custom-select-option-font-color-focus, #444) !important;
-  font-weight: var(--custom-select-option-font-weight-focus, 600) !important;
-  border-left: var(--custom-select-option-border-left-focus, 4px solid #fb0) !important;
-  border-radius: var(--custom-select-option-border-radius-focus,  3px) !important;
-}
-::ng-deep .mat-mdc-option .mdc-list-item__primary-text {
-  font-size: var(--custom-font-size,  12px) !important;
-}
-::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel {
-  padding: 0px !important;
-  background: #fafafa !important;
-}
-::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow {
-  color: #fb0;
-}
-::ng-deep .mat-mdc-option .mdc-list-item__primary-text {
-  font-size: 12px !important;
-}
-
-::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow {
-  color: #fb0;
-}
-
-::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{
-  padding: 0px !important;
-}
-::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{
-  padding: 0px !important
-}
-::ng-deep .mat-mdc-optgroup-label{
-  background: #f5f5f5;
-  color: #444;
-  font-weight: 800;
-}
-
-::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{
-  padding: 0px !important;
-  background: #fff !important;
-}
- ::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){
-  background: #fffaeb !important;
-  border-left: 4px solid #fb0;
-  font-weight: 600 !important;
-  color: #444 !important;
-  border-radius: 3px;
- }
-
- ::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
-    color: unset !important;
-}
-
-::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal {
-  display: none !important;
-}
- ::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder {
-  color: #8f8f8f !important;
-  font-size: 12px !important;
-  vertical-align: sub;
-}
-* {
-  font-family: "mulish" !important;
-}

package/src/lib/autocomplete/autocomplete.component.html

@@ -1,61 +0,0 @@
-  <label *ngIf="field() && field()?.isVisible && field().isShowLabel" class="field-lable">{{field()?.label}}<span style="color: red;" *ngIf="field() && field()?.validators?.isRequired">*</span></label>
-  <mat-form-field class="w-100" appearance="outline" *ngIf="field() && field()?.isVisible"  [ngStyle]="{
-  '--custom-border-color': field()?.controlStyle?.borderColor ,
-  '--custom-border-width': field()?.controlStyle?.borderWidth ,
-  '--custom-border-radius': field()?.controlStyle?.borderRadius ,
-  '--custom-bg-color': field()?.controlStyle?.background ,
-  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,
-  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,
-  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,
-  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,
-  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,
-  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,
-  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,
-'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,
-'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,
-  }">
-   @if(reactiveFormControlobject()) {
-     <input
-      matInput
-      type="text"
-      [name]="field()?.fieldName"
-      [id]="field()?.fieldName"
-      [matAutocomplete]="auto"
-      (ngModelChange)="filterOptions()"
-      (focus)="filterOptions()"
-      [disabled]="field()?.isDisable"
-      [required]="field()?.validators?.isRequired"
-      [placeholder]="field()?.placeHolder"
-      [value]="inputValue"
-      [formControl]="reactiveFormControlobject()"
-     />
-   }@else {
-     <input
-      matInput
-      type="text"
-      [name]="field()?.fieldName"
-      [id]="field()?.fieldName"
-      [matAutocomplete]="auto"
-      (ngModelChange)="filterOptions()"
-      (focus)="filterOptions()"
-      [disabled]="field()?.isDisable"
-      [required]="field()?.validators?.isRequired"
-      [placeholder]="field()?.placeHolder"
-      [value]="inputValue"
-     />
-   }
-   <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn">
-  <mat-option *ngFor="let option of filteredOptions" [value]="option.label">
-    {{ option.label }}
-  </mat-option>
-</mat-autocomplete>
-    <mat-error>
-    {{ field().validators.requiredMessage }}
-  </mat-error>
-  </mat-form-field>
-  <div class="error-message" *ngIf="false">
-    {{ field()?.validators?.isRequiredMessage }}.
-  </div>
-  <div class="error-message" *ngIf="false">
-    {{ field()?.validators?.patternMessage }}.
-  </div>

package/src/lib/autocomplete/autocomplete.component.ts

@@ -1,85 +0,0 @@
-import { Component, input } from '@angular/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { CommonModule } from '@angular/common';
-import { MatInputModule } from '@angular/material/input';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatOptionModule } from '@angular/material/core';
-import { MasterControlService } from '../master-control.service';
-import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { MatSelectChange } from '@angular/material/select';
-@Component({
-  selector: 'lib-autocomplete',
-  standalone: true,
-  imports: [
-    MatFormFieldModule,
-    CommonModule,
-    MatInputModule,
-    MatAutocompleteModule,
-    MatOptionModule,
-    FormsModule,
-    ReactiveFormsModule
-  ],
-  templateUrl: './autocomplete.component.html',
-  styleUrl: './autocomplete.component.css',
-  providers: [
-      {
-        provide: NG_VALUE_ACCESSOR,
-        useExisting: AutocompleteComponent,
-        multi: true
-      }
-    ]
-})
-export class AutocompleteComponent {
-  constructor(public masterService : MasterControlService) {}
-  field: any = input.required<any>();
-  selectedOption: any = null;
-  filteredOptions:any=[];
-  inputValue: any = null;
-  reactiveFormControlobject : any = input<any>();
-  ngOnInit() {
-    this.filteredOptions = this.field().options;
-  }
-  
-    onChange: any = () => {};
-    onTouched: any = () => {};
-  
-    writeValue(value: any): void {
-      this.inputValue = value;
-    }
-  
-    registerOnChange(fn: any): void {
-      this.onChange = fn;
-    }
-  
-    registerOnTouched(fn: any): void {
-      this.onTouched = fn;
-    }
-  
-    onValueChange(newValue: any): void {
-      this.inputValue = newValue;
-      this.onChange(newValue);
-      this.onTouched();
-    }
-  
-    selectionChanged(event: MatSelectChange) {
-      this.inputValue = event.value;
-      this.onChange(event.value);
-      this.onTouched();
-    }
-    setDisabledState?(isDisabled: boolean): void{};
-
-   filterOptions() {
-    if (!this.selectedOption) {
-      this.filteredOptions = this.field().options;
-      return;
-    }
-    const filterValue = this.selectedOption.toLowerCase();
-    this.filteredOptions = this.field().options.filter((option:any) =>
-      option.label.toLowerCase().includes(filterValue)
-    );
-  }
-
-displayFn(option: any) {
-  return option ? option : '';
-}
-}

package/src/lib/benefit-card/benefit-card.component.css

@@ -1,46 +0,0 @@
-.benefit-card{
-  max-width: 380px;
-  max-height: 92px;
-  border: 1px solid #dadada;
-  padding: 16px;
-  border-radius: 8px;
-}
-.benefit-card{
-  max-width: var(--benefit-card-width, 380px) !important;
-  border-radius: var(--benefit-border-radius, 8px) !important;
-  border-color: var(--benefit-border-color, #dadada) !important;
-  border-width: var(--benefit-border-width, 1px) !important;
-}
-.b1-bold{
-  font-size: 16px;
-  font-weight: 700;
-  color: #444;
-}
-.add-card-button{
-  width: 72px;
-  max-height: 24px;
-  border-radius: 32px;
-  border: 1px solid #ffbb00;
-  padding: 0px 6px 6px 6px;
-  font-weight: 700;
-  font-size: 12px;
-  background: #ffbb00;
-}
-.remove-card-button{
-  width: 84px;
-  max-height: 24px;
-  padding: 0px 6px 6px 6px;
-  border-radius: 24px;
-  border: 0.8px solid #444;
-  background: #fff;
-  font-weight: 700;
-  font-size: 12px;
-}
-.b3-regular{
-  font-weight: 400;
-  font-size: 12px;
-  color: #444;
-}
-* {
-  font-family: "mulish" !important;
-}

package/src/lib/benefit-card/benefit-card.component.html

@@ -1,25 +0,0 @@
-<div
-  class="benefit-card"
-   *ngIf="field() && field()?.isVisible"
-  [ngStyle]="
-{
-    '--benefit-border-width': field()?.controlStyle?.borderWidth,
-    '--benefit-card-width': field()?.controlStyle?.width ,
-    '--benefit-border-radius': field()?.controlStyle?.borderRadius ,
-    '--benefit-border-color': field()?.controlStyle?.borderColor ,
-}"
->
-  <div class="d-flex justify-content-between">
-    <span class="b1-bold" *ngIf="field()?.isShowLabel">{{ field()?.label }}</span>
-    <button class="add-card-button">+ Add</button>
-    <button class="remove-card-button" *ngIf="false">x Remove</button>
-  </div>
-  <div class="mt-2">
-    <img
-      src="https://cdn.godigit.com/retail-life/tabler_wheelchair.png"
-      alt=""
-    />
-    <span class="b3-regular mx-2">Policy Continuance Benefit on Death</span>
-    <img src="https://cdn.godigit.com/retail-life/info-button-lib.svg" alt="" />
-  </div>
-</div>

package/src/lib/benefit-card/benefit-card.component.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
-
-@Component({
-  selector: 'lib-benefit-card',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './benefit-card.component.html',
-  styleUrl: './benefit-card.component.css',
-})
-export class BenefitCardComponent {
-  field: any = input.required<any>();
-}

package/src/lib/button/button.component.css

@@ -1,24 +0,0 @@
-.button{
-  height: var(--button-height, 48px) !important;
-  min-width: var(--button-width, 164px) !important;
-  background: var(--button-background, #ffbb00) !important;
-  border-width: var(--button-border-width, 0px) !important;
-  border-color: var(--button-border-color, #fb0) !important;
-  border-style: var(--button-border-style, solid) !important;
-  border-radius: var(--button-border-radius, 8px) !important;
-  font-size: var(--button-font-size, 16px) !important;
-  font-weight: var(--button-font-weight, 800) !important;
-  color: var(--button-text-color, #444) !important;;
-  max-width: fit-content;
-}
-.button-text{
-  display: flex;
-  justify-content: center;
-  gap: 4px;
-}
-.button-text img{
-  margin-top: 3px;
-}
-*{
-    font-family: 'Mulish' !important;
-}

package/src/lib/button/button.component.html

@@ -1,22 +0,0 @@
-<Button 
-class="button"
-*ngIf="field() && field()?.isVisible" 
-[ngStyle]="
-{
-    '--button-border-width': field()?.controlStyle?.borderWidth ,
-    '--button-border-color': field()?.controlStyle?.borderColor ,
-    '--button-border-style': field()?.controlStyle?.borderStyle ,
-    '--button-width': field()?.controlStyle?.width ,
-    '--button-font-size': field()?.controlStyle?.fontSize ,
-    '--button-font-weight': field()?.controlStyle?.fontWeight ,
-    '--button-background': field()?.controlStyle?.background ,
-    '--button-border-radius': field()?.controlStyle?.borderRadius ,
-    '--button-text-color': field()?.controlStyle?.color ,
-    '--button-margin': field()?.controlStyle?.margin ,
-}"
->
-<span class="button-text">
-<img *ngIf="field()?.imageUrl" [src]='field().imageUrl'>
-<span>{{field()?.label}}</span>
-</span>
-</Button>

package/src/lib/button/button.component.ts

@@ -1,16 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
-import { MasterControlService } from '../master-control.service';
-
-
-@Component({
-  selector: 'lib-button',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './button.component.html',
-  styleUrl: './button.component.css'
-})
-export class ButtonComponent {
-  constructor(public masterService : MasterControlService){}
-  field: any = input.required<any>();
-}

package/src/lib/card/card.component.css

@@ -1,37 +0,0 @@
-* {
-  font-family: "mulish" !important;
-}
-
-.endorsement-card{
-  max-height: 94px;
-  border-color: var(--card-border-color , #dadada);
-  border-width: var(--card-border-width , 1px) ;
-  border-style: var(--card-border-style , solid) ;
-  border-radius: var(--card-border-radius , 8px);
-  padding: 12px;
-  max-width: 220px;
-}
-
-.card-label{
-  font-size: var(--card-font-size , 14px);
-  font-weight: var(--card-font-weight , 600);
-  color: var(--card-font-color , #444);
-}
-
-.hr-line{
-  border-top: 1px dashed #DADADA !important;
-  opacity: initial;
-  border-image: repeating-linear-gradient(to right, #DADADA 0 6px, transparent 0px 10px) 1 stretch;
-}
-
-.card-label{
-  font-size: 14px;
-  font-weight: 600;
-  color: #444;
-}
-
-.below-card-text{
-  font-size: 12px;
-  color: #696969;
-  font-weight: 600;
-}

package/src/lib/card/card.component.html

@@ -1,24 +0,0 @@
-  <div class="d-flex gap-5" *ngIf="field() && field()?.isVisible">
-    <div class="endorsement-card" [ngStyle]="{
-    '--card-border-color': field()?.controlStyle?.borderColor ,
-    '--card-border-width': field()?.controlStyle?.borderWidth ,
-    '--card-border-style': field()?.controlStyle?.borderStyle ,
-    '--card-border-radius': field()?.controlStyle?.borderRadius 
-}">
-      <p class="m-0 card-label" [ngStyle]="{
-    '--card-font-size': field()?.controlStyle?.fontSize ,
-    '--card-font-weight': field()?.controlStyle?.fontWeight ,
-    '--card-font-color': field()?.controlStyle?.color ,
-}">Label</p>
-      <hr class="m-0 hr-line mt-1" />
-      <div class="d-flex gap-2 mt-1">
-        <span>
-          <img src="https://cdn.godigit.com/retail-life/Endorsement-add-ons.svg" alt="" />
-        </span>
-        <span>
-          <p class="m-0 card-label">Glow Plus Pure Term</p>
-          <span class="below-card-text">L1234694934</span>
-        </span>
-      </div>
-    </div>
-  </div>

package/src/lib/card/card.component.ts

@@ -1,13 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
-
-@Component({
-  selector: 'lib-card',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './card.component.html',
-  styleUrl: './card.component.css'
-})
-export class CardComponent {
-field: any = input.required<any>();
-}

package/src/lib/checkbox/checkbox.component.css

@@ -1,65 +0,0 @@
-* {
-  font-family: "mulish" !important;
-}
-
-.error-message{
-  color: red;
-} 
-
-::ng-deep .mdc-checkbox__background {
-   border-radius: var(--checkbox-border-radius, 4px) !important;
-}
-
-::ng-deep .mdc-checkbox__native-control:disabled:checked~.mdc-checkbox__background{
-  background-color: var(--checkbox-bg-color , #ffffff) !important;
-  border-color: rgba(0, 0, 0, 0);
-}
-::ng-deep .mdc-checkbox__native-control:disabled:indeterminate~.mdc-checkbox__background {
-  background-color: var(--checkbox-bg-color , #ffffff) !important;
-  border-color: rgba(0, 0, 0, 0);
-}
-
-::ng-deep .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background{
-  border-color: var(--checkbox-border-color-focus, #ffbb00) !important;
-  background-color: var(--checkbox-bg-color-focus, #ffbb00) !important;
-  border-radius: var(--checkbox-border-radius, 4px) !important;
-}
-::ng-deep .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background {
-  border-color: var(--checkbox-border-color-focus, #ffbb00) !important;
-  background-color: var(--checkbox-bg-color-focus, #ffbb00) !important;
-  border-radius: var(--checkbox-border-radius, 4px) !important;
-}
-::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after{
-  color: #fff !important;
-}
-::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{
-  background-color: var(--checkbox-bg-color-focus, #ffbb00) !important;
-  border-radius: var(--checkbox-border-radius, 4px) !important;;
-}
-::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
-  background-color: var(--checkbox-bg-color-focus, #ffbb00) !important;
-  border-radius: var(--checkbox-border-radius, 4px) !important;;
-}
-::ng-deep .mat-pseudo-checkbox {
-  border: 1px solid #DADADA;
-}
-::ng-deep .checkbox{
-  padding: 4px 8px 3px 0px;
-  background: #f5f5f5;
-  border-radius: 4px;
-  margin-right: 8px;
-}
-::ng-deep .mat-mdc-checkbox label{
-  font-size: var(--checkbox-font-size , 16px) !important;
-  font-weight: var(--checkbox-font-weight , 700) !important;
-  color: var(--checkbox-font-color , #444) !important;
-  padding: 0px !important;
-  margin-bottom: 2px;
-  font-family: 'Mulish' !important;
-}
-::ng-deep .mat-mdc-checkbox .mdc-checkbox__ripple{
-  display: none;
-}
-::ng-deep .mdc-checkbox__native-control:checked~.mdc-checkbox__background .mdc-checkbox__checkmark {
-    color: #fff !important;
-}