@testgorilla/tgo-coding-test 0.0.1 → 1.0.0

package/src/lib/components/coding-test.module.ts

@@ -1,124 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatIconModule } from '@angular/material/icon';
-import { AngularSplitModule } from 'angular-split';
-import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor-v2';
-import { QuillModule } from 'ngx-quill';
-import { MatSidenavModule } from '@angular/material/sidenav';
-// import { provideNgxWebstorage, StrategyIndex, withLocalStorage } from 'ngx-webstorage';
-import { provideNgxWebstorage } from 'ngx-webstorage';
-import { TgoCodingTestComponent } from './tgo-coding-test/tgo-coding-test.component';
-import { CodeEditorComponent } from './code-editor/code-editor.component';
-import { CodingQuestionComponent } from './coding-question/coding-question.component';
-import { CodingSectionComponent } from './coding-section/coding-section.component';
-import { ConfigurationsComponent } from './configurations/configurations.component';
-import { InstructionsComponent } from './instructions/instructions.component';
-import { PanelComponent } from './panel/panel.component';
-import { RunnableEditorComponent } from './runnable-editor/runnable-editor.component';
-import { TestCasesComponent } from './tests/test-cases/test-cases.component';
-import { TestResultsComponent } from './tests/test-results.component';
-import { MemoizeFuncPipe } from '../pipes/memoize-func.pipe';
-import { LibCodingTestService } from '../services/lib-coding-test.service';
-import { TestCasesStatusComponent } from './tests/test-cases-status/test-cases-status.component';
-import { TruncatedTextComponent } from './common/truncated-text/truncated-text.component';
-import { TestCasesContentComponent } from './tests/test-cases-content/test-cases-content.component';
-import {
-  ButtonComponentModule,
-  ToggleComponentModule,
-  ProgressBarComponentModule,
-  IconComponentModule,
-  IconLabelComponentModule,
-  SpinnerComponentModule,
-  DropdownComponentModule,
-  FieldComponentModule,
-  TooltipComponentModule,
-  DividerComponentModule,
-  CardComponentModule,
-} from '@testgorilla/tgo-ui';
-// import { CodeEditorService } from './code-editor/code-editor.service';
-// import { ConfigurationsService } from '../services/configurations.service';
-// import { TestCasesService } from '../services/test-cases.service';
-// import { ThemeService } from '../services/theme.service';
-import { MatCardModule } from '@angular/material/card';
-import { MatTabsModule } from '@angular/material/tabs';
-// import { StorageCodingService } from '../services/storage.service';
-
-const monacoConfig: NgxMonacoEditorConfig = {
-  baseUrl: 'assets/libs/monaco/min/vs',
-};
-
-@NgModule({
-  declarations: [
-    // TgoCodingTestComponent,
-    // CodeEditorComponent,
-    // CodingQuestionComponent,
-    // InstructionsComponent,
-    // CodingSectionComponent,
-    // TestResultsComponent,
-    // TestCasesComponent,
-    // PanelComponent,
-    // ConfigurationsComponent,
-    // RunnableEditorComponent,
-    // MemoizeFuncPipe,
-    // TestCasesContentComponent,
-    // TestCasesStatusComponent,
-    // TruncatedTextComponent,
-  ],
-  // imports: [
-  //   FormsModule,
-  //   CommonModule,
-  //   MonacoEditorModule.forRoot(monacoConfig),
-  //   AngularSplitModule,
-  //   ReactiveFormsModule,
-  //   MatCardModule,
-  //   FieldComponentModule,
-  //   MatIconModule,
-  //   MatSidenavModule,
-  //   MatTabsModule,
-  //   QuillModule.forRoot({
-  //     modules: {
-  //       syntax: true,
-  //       toolbar: [
-  //         ['bold', 'italic', 'underline'],
-  //         [{ list: 'ordered' }, { list: 'bullet' }],
-  //       ],
-  //     },
-  //   }),
-  //   ButtonComponentModule,
-  //   ToggleComponentModule,
-  //   ProgressBarComponentModule,
-  //   IconComponentModule,
-  //   IconLabelComponentModule,
-  //   SpinnerComponentModule,
-  //   DropdownComponentModule,
-  //   TooltipComponentModule,
-  //   DividerComponentModule,
-  //   CardComponentModule,
-  // ],
-  providers: [
-    // todo: [migration] this was changed
-    // LibCodingTestService,
-    // StrategyIndex,
-    // CodeEditorService,
-    // ConfigurationsService,
-    // TestCasesService,
-    // ThemeService,
-    // provideNgxWebstorage(withLocalStorage()),
-    // provideNgxWebstorage(),
-    // todo: it was renamed
-    // StorageCodingService,
-  ],
-  exports: [TgoCodingTestComponent],
-})
-export class CodingTestModule {
-  // static forRoot(): ModuleWithProviders<CodingTestModule> {
-  //   return {
-  //     ngModule: CodingTestModule,
-  //     providers: [
-  //       LibCodingTestService,
-  //       // StorageCodingService,
-  //     ],
-  //   };
-  // }
-}

package/src/lib/components/common/truncated-text/truncated-text.component.html

@@ -1,6 +0,0 @@
-<div class="text-container" [class.text-container-word-wrap]="isWordWrap">
-  <span class="text" [class.expanded]="!isTruncated"
-    >{{ [isTruncated, text] | memoizeFunc: getShownText : this
-    }}<a class="show-more-link" *ngIf="isTruncated" (click)="toggleTruncation()">Show more</a></span
-  >
-</div>

package/src/lib/components/common/truncated-text/truncated-text.component.scss

@@ -1,18 +0,0 @@
-.text-container {
-  .text {
-    white-space: pre-wrap;
-  }
-
-  &-word-wrap {
-    .text {
-      overflow-wrap: break-word;
-    }
-  }
-
-  .show-more-link {
-    font-size: 14px;
-    color: var(--main-text-color);
-    cursor: pointer;
-    text-decoration: underline;
-  }
-}

package/src/lib/components/common/truncated-text/truncated-text.component.spec.ts

@@ -1,84 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TruncatedTextComponent } from './truncated-text.component';
-import { SimpleChanges } from '@angular/core';
-import { MemoizeFuncPipe } from '../../../pipes/memoize-func.pipe';
-
-describe('TruncatedTextComponent', () => {
-  let component: TruncatedTextComponent;
-  let fixture: ComponentFixture<TruncatedTextComponent>;
-  const loremText =
-    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias aliquid et facere, in inventore ipsum iste itaque maiores nesciunt numquam obcaecati odio odit perferendis quasi quis quo, soluta totam!';
-  const truncatedLoremText =
-    'Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias aliquid et facere, in inventore ipsum iste itaque maiores nesciunt nu... ';
-  let textSimpleChanges: SimpleChanges;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [TruncatedTextComponent, MemoizeFuncPipe],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TruncatedTextComponent);
-    component = fixture.componentInstance;
-    textSimpleChanges = {
-      text: {
-        firstChange: true,
-        currentValue: 'text',
-        previousValue: '',
-        isFirstChange: () => true,
-      },
-    } as SimpleChanges;
-    component.text = loremText;
-
-    fixture.detectChanges();
-  });
-
-  describe('when [text] input value is changed', () => {
-    describe('and text is longer than DEFAULT_MAX_CHARACTERS', () => {
-      it('should set isTruncated to true', () => {
-        component.isTruncated = false;
-        textSimpleChanges.text.firstChange = true;
-        textSimpleChanges.text.currentValue = loremText;
-        component.ngOnChanges(textSimpleChanges);
-        expect(component.isTruncated).toEqual(true);
-      });
-    });
-
-    describe("and it's NOT firstChange", () => {
-      it('should NOT update isTruncated value', () => {
-        component.isTruncated = true;
-        textSimpleChanges.text.firstChange = false;
-        component.ngOnChanges(textSimpleChanges);
-        expect(component.isTruncated).toEqual(true);
-      });
-    });
-
-    describe('when getShownText is called', () => {
-      describe('when getShownText is called', () => {
-        describe('and isTruncated is false', () => {
-          it('should return full text', () => {
-            const isTruncated = false;
-            expect(component.getShownText([isTruncated, loremText])).toEqual(loremText);
-          });
-        });
-
-        describe('and isTruncated is true', () => {
-          it('should return truncated text', () => {
-            const isTruncated = true;
-            expect(component.getShownText([isTruncated, loremText])).toEqual(truncatedLoremText);
-          });
-        });
-      });
-    });
-
-    describe('when toggleTruncation is called', () => {
-      it('should toggle isTruncated value', () => {
-        component.isTruncated = false;
-        component.toggleTruncation();
-        expect(component.isTruncated).toEqual(true);
-        component.toggleTruncation();
-        expect(component.isTruncated).toEqual(false);
-      });
-    });
-  });
-});

package/src/lib/components/common/truncated-text/truncated-text.component.ts

@@ -1,37 +0,0 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { MemoizeFuncPipe } from '../../../pipes/memoize-func.pipe';
-
-const DEFAULT_MAX_CHARACTERS = 135;
-
-@Component({
-  standalone: true,
-  selector: 'tgo-truncated-text',
-  templateUrl: './truncated-text.component.html',
-  styleUrls: ['./truncated-text.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, MemoizeFuncPipe],
-})
-export class TruncatedTextComponent implements OnChanges {
-  @Input() text = '';
-  @Input() maxChars = DEFAULT_MAX_CHARACTERS;
-  @Input() isWordWrap = false;
-
-  isTruncated: boolean;
-
-  ngOnChanges({ text }: SimpleChanges): void {
-    if (text?.firstChange && text?.currentValue) {
-      this.isTruncated = this.text.length > this.maxChars;
-    }
-  }
-
-  getShownText([isTruncated, fullText]: [boolean, string]): string {
-    // todo: add as an improvement:
-    // If the first line contains only a few characters, it would be good to truncate the second line to ~55 characters // Anna
-    return isTruncated ? `${this.text.slice(0, this.maxChars)}... ` : fullText;
-  }
-
-  toggleTruncation() {
-    this.isTruncated = !this.isTruncated;
-  }
-}

package/src/lib/components/configurations/configurations.component.html

@@ -1,57 +0,0 @@
-<tgo-code-panel
-  [openPanel]="configurationsPanelOpen$ | async"
-  [heading]="translations['HEADINGS']['CONFIGURATIONS']"
-  (closeEvent)="closeConfigPanel()"
->
-  <form [formGroup]="configForm" class="configs">
-    <div id="formatting" *ngIf="formattingOptions">
-      <h3>{{ translations['HEADINGS']['FORMATTING'] }}</h3>
-      <ng-container
-        [ngTemplateOutlet]="config"
-        [ngTemplateOutletContext]="{ data: formattingOptions, inputType: 'dropdown' }"
-      ></ng-container>
-    </div>
-    <div id="codingAssistance" *ngIf="codingAssistanceOptions">
-      <h3>{{ translations['HEADINGS']['CODING_ASSISTANCE'] }}</h3>
-      <ng-container
-        [ngTemplateOutlet]="config"
-        [ngTemplateOutletContext]="{
-          data: codingAssistanceOptions,
-          inputType: 'toggle'
-        }"
-      ></ng-container>
-    </div>
-    <ng-template #config let-configData="data" let-inputType="inputType">
-      <ng-container *ngIf="language$ | async as language">
-        <ng-container *ngFor="let row of configData | keyvalue">
-          <div
-            class="config-row"
-            *ngIf="[language, row.key] | memoizeFunc: isValidRow"
-            [class.config-row-toggle]="inputType === 'toggle'"
-          >
-            <p class="config-name">{{ row.key }}</p>
-            <ui-dropdown
-              *ngIf="inputType === 'dropdown'"
-              class="config-dropdown"
-              [formControlName]="row.key"
-              [valueList]="row.value | memoizeFunc: getFormattedOptions"
-              [allowClear]="false"
-              [applicationTheme]="applicationTheme"
-              [showBottomContent]="false"
-              (change)="trackConfigChange(row.key)"
-            ></ui-dropdown>
-            <ui-toggle
-              *ngIf="inputType === 'toggle'"
-              [applicationTheme]="applicationTheme"
-              [formControlName]="row.key"
-              (toggle)="trackConfigChange(row.key)"
-              class="config-toggle"
-              [class.config-toggle-company-colored]="!!companyColor"
-              [style.--toggle-checked-color]="companyColor"
-            ></ui-toggle>
-          </div>
-        </ng-container>
-      </ng-container>
-    </ng-template>
-  </form>
-</tgo-code-panel>

package/src/lib/components/configurations/configurations.component.scss

@@ -1,42 +0,0 @@
-.configs {
-  display: flex;
-  flex-direction: column;
-  color: var(--main-text-color);
-
-  .config-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    &.config-row-toggle {
-      margin-bottom: 32px;
-
-      .config-name {
-        margin: 0;
-        padding: 0;
-      }
-
-      .config-toggle {
-        &.config-toggle-company-colored ::ng-deep {
-          .toggle-container.active {
-            background-color: var(--toggle-checked-color);
-          }
-        }
-      }
-    }
-
-    .config-dropdown {
-      width: 100%;
-      max-width: 320px;
-
-      @media screen and (max-width: 599px) {
-        flex: 0 0 55%;
-      }
-    }
-  }
-}
-
-.config-name, .config-dropdown {
-  margin: 0.25em 0;
-  padding-bottom: 1.5em;
-}

package/src/lib/components/configurations/configurations.component.spec.ts

@@ -1,186 +0,0 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { FormBuilder } from '@angular/forms';
-import { MockProvider } from 'ng-mocks';
-
-import { ReplaySubject } from 'rxjs';
-import { CodingAssistanceOptions, Config, FormattingOptions } from '../../models/configs';
-import { Themes } from '../../models/theme';
-import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
-import { ConfigurationsService } from '../../services/configurations.service';
-import { CONFIGURATIONS_SERVICE_MOCK } from '../../services/configurations.service.mocks';
-import { LibCodingTestService } from '../../services/lib-coding-test.service';
-import { StorageCodingService } from '../../services/storage.service';
-import { CodeEditorLanguages } from '../code-editor/helpers/code-editor-helper.model';
-import { ConfigurationsComponent } from './configurations.component';
-
-describe('ConfigurationsComponent', () => {
-  let component: ConfigurationsComponent;
-  let fixture: ComponentFixture<ConfigurationsComponent>;
-  let configurationsService: ConfigurationsService;
-  let storageCodingService: StorageCodingService;
-  let libCodingTestService: LibCodingTestService;
-  let changeCurrentLanguageSpy: jest.SpyInstance;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [ConfigurationsComponent, MemoizeFuncPipe, NoopAnimationsModule],
-      schemas: [NO_ERRORS_SCHEMA],
-      providers: [
-        FormBuilder,
-        MockProvider(ConfigurationsService, CONFIGURATIONS_SERVICE_MOCK),
-        MockProvider(StorageCodingService, {
-          getSavedConfig: () => CONFIGURATIONS_SERVICE_MOCK.defaultConfigs,
-        }),
-        MockProvider(LibCodingTestService, {
-          currentLanguage$: new ReplaySubject(1),
-          changeCurrentLanguage(value: CodeEditorLanguages): void {
-            this.currentLanguage$.next(value);
-          },
-        }),
-      ],
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ConfigurationsComponent);
-    component = fixture.componentInstance;
-    component.translations = {
-      HEADINGS: {},
-    };
-    configurationsService = TestBed.inject(ConfigurationsService);
-    storageCodingService = TestBed.inject(StorageCodingService);
-    libCodingTestService = TestBed.inject(LibCodingTestService);
-    changeCurrentLanguageSpy = jest.spyOn(libCodingTestService, 'changeCurrentLanguage');
-    component.formattingOptions = configurationsService.getFormattingOptions();
-    component.codingAssistanceOptions = configurationsService.getCodingAssistanceOptions();
-    component.initialConfig = storageCodingService.getSavedConfig();
-  });
-
-  describe('when initialized', () => {
-    beforeEach(() => {
-      libCodingTestService.changeCurrentLanguage(CodeEditorLanguages.Typescript);
-      component.ngOnInit();
-      fixture.detectChanges();
-    });
-
-    it('should create the form with controls for each of the codingAssistanceOptions', () => {
-      expect(component.configForm.contains(CodingAssistanceOptions.AutoComplete)).toBeTruthy();
-      expect(component.configForm.contains(CodingAssistanceOptions.ErrorHighlighting)).toBeTruthy();
-      expect(component.configForm.contains(CodingAssistanceOptions.AutoBrackets)).toBeTruthy();
-    });
-
-    it('should create the form with correct default values for each of the codingAssistanceOptions', () => {
-      expect(component.configForm.controls[CodingAssistanceOptions.AutoComplete].value).toEqual(
-        component.initialConfig[CodingAssistanceOptions.AutoComplete]
-      );
-      expect(component.configForm.controls[CodingAssistanceOptions.ErrorHighlighting].value).toEqual(
-        component.initialConfig[CodingAssistanceOptions.ErrorHighlighting]
-      );
-      expect(component.configForm.controls[CodingAssistanceOptions.AutoBrackets].value).toEqual(
-        component.initialConfig[CodingAssistanceOptions.AutoBrackets]
-      );
-    });
-
-    it('should create the form with controls for each of the formattingOptions ', () => {
-      component.ngOnInit();
-      fixture.detectChanges();
-      expect(component.configForm.contains(FormattingOptions.ColorTheme)).toBeTruthy();
-      expect(component.configForm.contains(FormattingOptions.TabSize)).toBeTruthy();
-      expect(component.configForm.contains(FormattingOptions.FontSize)).toBeTruthy();
-    });
-    it('should create the form with correct default values for each of the formattingOptions', () => {
-      component.ngOnInit();
-      fixture.detectChanges();
-      expect(component.configForm.controls[FormattingOptions.ColorTheme].value).toEqual(
-        component.initialConfig[FormattingOptions.ColorTheme]
-      );
-      expect(component.configForm.controls[FormattingOptions.TabSize].value).toEqual(
-        component.initialConfig[FormattingOptions.TabSize]
-      );
-      expect(component.configForm.controls[FormattingOptions.FontSize].value).toEqual(
-        component.initialConfig[FormattingOptions.FontSize]
-      );
-    });
-    describe('when config options are changed', () => {
-      let setConfigSpy: jest.SpyInstance;
-      const currentConfig: Config = {
-        [FormattingOptions.ColorTheme]: Themes.Dark,
-        [FormattingOptions.TabSize]: 8,
-        [FormattingOptions.FontSize]: 16,
-        [CodingAssistanceOptions.AutoBrackets]: true,
-        [CodingAssistanceOptions.AutoComplete]: true,
-        [CodingAssistanceOptions.ErrorHighlighting]: true,
-      };
-
-      beforeEach(() => {
-        component.ngOnInit();
-        fixture.detectChanges();
-        setConfigSpy = jest.spyOn(configurationsService, 'setConfig');
-        component.configForm.setValue(currentConfig);
-      });
-
-      it('should call setConfig with modified value of the configuration changed', () => {
-        expect(setConfigSpy).toBeCalledWith(currentConfig);
-      });
-    });
-  });
-
-  describe('when config panel is closed', () => {
-    let closeConfigPanelSpy: jest.SpyInstance;
-
-    beforeEach(() => {
-      closeConfigPanelSpy = jest.spyOn(configurationsService, 'closeConfigPanel');
-      component.closeConfigPanel();
-      fixture.detectChanges();
-    });
-
-    it('should call closeConfigPanel from configuration service', () => {
-      expect(closeConfigPanelSpy).toBeCalled();
-    });
-  });
-
-  describe('when any config control is changed', () => {
-    let trackConfigChangedSpy: jest.SpyInstance;
-
-    beforeEach(() => {
-      trackConfigChangedSpy = jest.spyOn(configurationsService, 'trackConfigChanged');
-
-      libCodingTestService.changeCurrentLanguage(CodeEditorLanguages.Python);
-      component.ngOnInit();
-      fixture.detectChanges();
-    });
-
-    it(`should call trackConfigChanged from configuration service with control name and it's value`, () => {
-      const controlName = FormattingOptions.FontSize;
-      const value = 12;
-
-      component.configForm.get(controlName).setValue(value);
-      component.trackConfigChange(controlName);
-
-      expect(trackConfigChangedSpy).toBeCalledWith({ [controlName]: value });
-    });
-  });
-
-  describe('when isValidRow is called', () => {
-    it('should return false if language is anything EXCEPT Javascript or Typescript and editor option is AutoComplete or Error Highlighting', () => {
-      const language = CodeEditorLanguages.Python;
-      libCodingTestService.changeCurrentLanguage(CodeEditorLanguages.Typescript);
-      const editorOption = CodingAssistanceOptions.AutoComplete;
-      expect(component.isValidRow([language, editorOption])).toBeFalsy();
-    });
-    it('should return true if language is Javascript or Typescript and editor option is AutoComplete or Error Highlighting', () => {
-      const language = CodeEditorLanguages.Javascript;
-      libCodingTestService.changeCurrentLanguage(CodeEditorLanguages.Typescript);
-      const editorOption = CodingAssistanceOptions.ErrorHighlighting;
-      expect(component.isValidRow([language, editorOption])).toBeTruthy();
-    });
-    it('should return true if language is anything and editor option is anything EXCEPT AutoComplete or Error Highlighting', () => {
-      const language = CodeEditorLanguages.Java;
-      libCodingTestService.changeCurrentLanguage(CodeEditorLanguages.Typescript);
-      const editorOption = CodingAssistanceOptions.AutoBrackets;
-      expect(component.isValidRow([language, editorOption])).toBeTruthy();
-    });
-  });
-});

package/src/lib/components/configurations/configurations.component.ts

@@ -1,98 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject, Input, OnInit } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
-import { distinctUntilChanged } from 'rxjs';
-import { ApplicationTheme, OptionType, DropdownComponentModule, ToggleComponentModule } from '@testgorilla/tgo-ui';
-import { CodingAssistanceOptions, Config } from '../../models/configs';
-import { ConfigurationsService } from '../../services/configurations.service';
-import { LibCodingTestService } from '../../services/lib-coding-test.service';
-import { StorageCodingService } from '../../services/storage.service';
-import { CodeEditorLanguages } from '../code-editor/helpers/code-editor-helper.model';
-import { MemoizeFuncPipe } from '../../pipes/memoize-func.pipe';
-import { PanelComponent } from '../panel/panel.component';
-
-@UntilDestroy()
-@Component({
-  standalone: true,
-  selector: 'tgo-code-configurations',
-  templateUrl: 'configurations.component.html',
-  styleUrls: ['configurations.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    DropdownComponentModule,
-    ToggleComponentModule,
-    MemoizeFuncPipe,
-    PanelComponent,
-  ],
-})
-export class ConfigurationsComponent implements OnInit {
-  private readonly fb = inject(FormBuilder);
-  private readonly configurationsService = inject(ConfigurationsService);
-  private readonly StorageCodingService = inject(StorageCodingService);
-  private readonly libCodingTestService = inject(LibCodingTestService);
-
-  @Input() translations: Record<string, unknown>;
-  @Input() companyColor: string;
-  @Input() applicationTheme: ApplicationTheme;
-
-  formattingOptions = this.configurationsService.getFormattingOptions();
-  codingAssistanceOptions = this.configurationsService.getCodingAssistanceOptions();
-  initialConfig = this.StorageCodingService.getSavedConfig();
-  language$ = this.libCodingTestService.currentLanguage$;
-
-  configForm: FormGroup;
-  formObject = {};
-  configurationsPanelOpen$ = this.configurationsService.configurationsPanelOpen$;
-
-  ngOnInit() {
-    if (!this.initialConfig) {
-      this.initialConfig = this.configurationsService.getInitialConfig();
-    }
-    this.addConfigControls(this.formattingOptions);
-    this.addConfigControls(this.codingAssistanceOptions);
-    this.configForm = this.fb.group(this.formObject);
-    this.configForm.valueChanges.pipe(distinctUntilChanged(), untilDestroyed(this)).subscribe((value: Config) => {
-      this.configurationsService.setConfig(value);
-    });
-  }
-
-  trackConfigChange(controlName: string): void {
-    const controlValue = this.configForm.value[controlName];
-    this.configurationsService.trackConfigChanged({
-      [controlName]: controlValue,
-    });
-  }
-
-  closeConfigPanel() {
-    this.configurationsService.closeConfigPanel();
-  }
-
-  private addConfigControls(configObject: object) {
-    // eslint-disable-next-line guard-for-in
-    for (const option in configObject) {
-      this.formObject[option] = this.initialConfig[option];
-    }
-  }
-
-  getFormattedOptions(configurationOptions: { label: string; value: any }[]): OptionType[] {
-    return configurationOptions.map(({ value, label }) => ({
-      value,
-      displayValue: label,
-    }));
-  }
-
-  isValidRow([language, editorOption]: [CodeEditorLanguages, CodingAssistanceOptions]) {
-    if (
-      language !== CodeEditorLanguages.Javascript &&
-      language !== CodeEditorLanguages.Typescript &&
-      (editorOption === CodingAssistanceOptions.AutoComplete ||
-        editorOption === CodingAssistanceOptions.ErrorHighlighting)
-    ) {
-      return false;
-    }
-    return true;
-  }
-}