master-control 0.2.13 → 0.2.15

package/src/lib/select/select.component.css

@@ -1,246 +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: super; */
-}
-* {
-  font-family: "mulish" !important;
-}
-
-.info-label{
-  display: flex;
-  justify-content: space-between;
-}
-

package/src/lib/select/select.component.html

@@ -1,72 +0,0 @@
-<label
-  class="field-lable info-label"
-  *ngIf="field() && field()?.isVisible && field().isShowLabel"
-  >
-  <span>{{ field()?.label}}<span style="color: red" *ngIf="field() && field()?.validators?.isRequired">*</span></span>
-  <span style="justify-content: end;" *ngIf="field() && field()?.configData?.infoMessage">
-    <img class="mx-1" src="https://cdn.godigit.com/retail-life/question-mark.svg" alt="">
-    <u>{{field()?.configData?.infoMessage}} ></u>
-  </span>
-    </label>
-  
-<mat-form-field
-  appearance="outline" 
-  class="input-full-width full-width w-100"
-  *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()) {
-  <mat-select
-    [id]="field()?.fieldName"
-    [attr.name]="field()?.fieldName"
-    [required]="field()?.validators?.isRequired"
-    [placeholder]="field()?.placeHolder"
-    [disabled]="field()?.isDisable"
-    (openedChange)="onSelectOpened($event)"
-    [value]="inputValue"
-    (selectionChange)="selectionChanged($event)"
-    [formControl]="reactiveFormControlobject()"
-  >
-    <mat-option *ngFor="let data of field()?.options" [value]="data.value">{{
-      data.label
-    }}</mat-option>
-  </mat-select>
-  }@else {
-  <mat-select
-    [id]="field()?.fieldName"
-    [attr.name]="field()?.fieldName"
-    [required]="field()?.validators?.isRequired"
-    [placeholder]="field()?.placeHolder"
-    [disabled]="field()?.isDisable"
-    (openedChange)="onSelectOpened($event)"
-    [value]="inputValue"
-    (selectionChange)="selectionChanged($event)"
-  >
-    <mat-option *ngFor="let data of field()?.options" [value]="data.value">{{
-      data.label
-    }}</mat-option>
-  </mat-select>
-  }
-
-  <!-- selectField.invalid && (selectField.dirty || selectField.touched) -->
-  <mat-error *ngIf="false">
-    {{ field()?.validators?.isRequiredMessage }}
-  </mat-error>
-</mat-form-field>
-<div class="error-message mt-2" *ngIf="false">
-  {{ field()?.validators?.isRequiredMessage }}
-</div>

package/src/lib/select/select.component.ts

@@ -1,95 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
-import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatOptionModule } from '@angular/material/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { MasterControlService } from '../master-control.service';
-import { MatSelectChange, MatSelectModule } from '@angular/material/select';
-
-@Component({
-  selector: 'lib-select',
-  standalone: true,
-  imports: [
-    MatSelectModule,
-    MatFormFieldModule,
-    MatAutocompleteModule,
-    MatInputModule,
-    FormsModule,
-    MatOptionModule,
-    CommonModule,
-    ReactiveFormsModule,
-  ],
-  templateUrl: './select.component.html',
-  styleUrl: './select.component.css',
-    providers: [
-      {
-        provide: NG_VALUE_ACCESSOR,
-        useExisting: SelectComponent,
-        multi: true
-      }
-    ]
-})
-export class SelectComponent implements ControlValueAccessor {
-
-constructor(public masterService : MasterControlService){}
-  field : any = input.required<any>();
-
-  inputValue: any = null;
-  reactiveFormControlobject : any = input<any>();
-
-  onChange: any = () => {};
-  onTouched: any = () => {};
-
-  ngOnInit(): void {
-    // Initialize inputValue with a default or initial value if needed
-  }
-
-  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();
-  }
-
-    onSelectOpened(opened: boolean) {
-  const css = this.field()?.controlStyle;
-  if (opened) {
-    document.body.style.setProperty('--custom-select-option-background-color', css?.dropdownOptionBgColor || '#fff');
-    document.body.style.setProperty('--custom-select-option-font-color', css?.dropdownOptionColor || '#444');
-    document.body.style.setProperty('--custom-select-option-font-weight', css?.dropdownOptionFontWeight || '400');
-    document.body.style.setProperty('--custom-select-option-background-color-focus', css?.focusDropdownOptionBgColor || '#fff');
-    document.body.style.setProperty('--custom-select-option-font-color-focus', css?.focusDropdownOptionColor || '#444');
-    document.body.style.setProperty('--custom-select-option-font-weight-focus', css?.focusDropdownOptionFontWeight || '400');
-    document.body.style.setProperty('--custom-select-option-border-left-focus', css?.focusDropdownOptionBorderLeft || '#ffbb00');
-    document.body.style.setProperty('--custom-select-option-border-radius-focus', css?.focusDropdownOptionBorderRadius || '#ffbb00');
-  } else {
-    document.body.style.removeProperty('--custom-select-option-background-color');
-    document.body.style.removeProperty('--custom-select-option-font-color');
-    document.body.style.removeProperty('--custom-select-option-font-weight');
-    document.body.style.removeProperty('--custom-select-option-background-color-focus');
-    document.body.style.removeProperty('--custom-select-option-font-color-focus');
-    document.body.style.removeProperty('--custom-select-option-font-weight-focus');
-    document.body.style.removeProperty('--custom-select-option-border-left-focus');
-    document.body.style.removeProperty('--custom-select-option-border-radius-focus');
-  }
-}
-}

package/src/lib/select-textbox/select-textbox.component.css

@@ -1,262 +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;
-}
-.input-select{
-  height: 30px;
-  background: #f5f5f5;
-  padding: 4px 8px 4px 8px;
-  min-width: 4.5em;
-  border-radius: 0px;
-  transform: translate(-1px, 0px);
-  border-top-right-radius: 6px;
-  border-bottom-right-radius: 6px;
-  border-left: 1.5px solid #dadada;
-}
-.input-select, .mat-mdc-select-trigger {
-  bottom: 3px;
-  gap: 4px;
-}
-:host ::ng-deep .input-select .mat-mdc-select-trigger {
-  /* transform: translate(0px, 12px); */
-}
-:host ::ng-deep .input-select .mat-mdc-select-arrow{
-  color: #8f8f8f !important;
-}