iss-ctrl 0.0.7 → 0.0.8

package/projects/iss/src/components/controls/slide-toggle/slide-toggle.control.ts

@@ -1,24 +0,0 @@
-import { Component } from "@angular/core";
-import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
-import { MatSlideToggleModule } from "@angular/material/slide-toggle";
-import { ControlBase } from "../base/control-base";
-
-@Component({
-  selector: "iss-ctrl-slide-toggle",
-  imports: [MatSlideToggleModule, ReactiveFormsModule],
-  providers: [
-    {provide: NG_VALUE_ACCESSOR, useExisting: SlideToggleControl, multi: true}
-  ],
-  template: `
-    <mat-slide-toggle
-      class="d-block" [formControl]="ctrl"
-      (change)="onSlideToggleChange($event.checked)"
-    >
-    </mat-slide-toggle>
-  `
-})
-export class SlideToggleControl extends ControlBase {
-  onSlideToggleChange(checked: boolean) {
-    this.emitValue(checked);
-  }
-}

package/projects/iss/src/components/controls/slide-toggle/slide-toggle.field.ts

@@ -1,31 +0,0 @@
-import { Component } from "@angular/core";
-import { ReactiveFormsModule } from "@angular/forms";
-import { MatLabel } from "@angular/material/form-field";
-import { VIEW_PROVIDER } from "../../../shared/constants/view-provider.const";
-import { FieldBase } from "../base/field-base";
-import { SlideToggleControl } from "./slide-toggle.control";
-import { SlideToggleViewer } from "./slide-toggle.viewer";
-
-@Component({
-  selector: "iss-field-slide-toggle",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [ReactiveFormsModule, MatLabel, SlideToggleControl, SlideToggleViewer],
-  template: `
-    @if (field.visible()) {
-      @if (!(field.config.hideLabel)) {
-        <mat-label>{{ field.label() }}</mat-label>
-      }
-
-      @if (field.mode() === "edit") {
-        <iss-ctrl-slide-toggle [formControlName]="field.name" (onChange)="onChange($event)" />
-      } @else {
-        <iss-viewer-slide-toggle [field]="field" />
-      }
-    }
-  `
-})
-export class SlideToggleField extends FieldBase {
-  onChange($event: any) {
-    this.field.jsonValue = $event;
-  }
-}

package/projects/iss/src/components/controls/slide-toggle/slide-toggle.viewer.ts

@@ -1,14 +0,0 @@
-import { Component } from "@angular/core";
-import { ViewerBase } from "../base/viewer-base";
-
-@Component({
-  selector: "iss-viewer-slide-toggle",
-  template: `
-    @if (field().ctrlValue() === 'true') {
-      {{ field().label() + ' Yes' }}
-    } @else {
-      {{ field().label() + ' No' }}
-    }
-  `,
-})
-export class SlideToggleViewer extends ViewerBase {}

package/projects/iss/src/components/controls/table/field.viewer.ts

@@ -1,23 +0,0 @@
-import { Component, effect, EffectRef, OnDestroy, Signal, viewChild, ViewContainerRef } from "@angular/core";
-import { ViewerBase } from "../base/viewer-base";
-import { SelectViewer } from "../select/select.viewer";
-
-@Component({
-  selector: "iss-viewer-field",
-  template: `
-    <ng-container #container></ng-container>
-  `,
-})
-export class FieldViewer extends ViewerBase implements OnDestroy {
-  containerRef: Signal<ViewContainerRef | undefined> = viewChild("container", {read: ViewContainerRef});
-  #fieldEffectRef: EffectRef = effect(() => {
-    const componentRef = this.containerRef()?.createComponent(SelectViewer);
-    if (componentRef) {
-      componentRef.setInput("field", this.field());
-    }
-  });
-
-  ngOnDestroy(): void {
-    this.#fieldEffectRef.destroy();
-  }
-}

package/projects/iss/src/components/controls/table/table.field.ts

@@ -1,233 +0,0 @@
-import { AfterViewInit, Component, computed, CUSTOM_ELEMENTS_SCHEMA, inject, OnInit, signal, Signal, viewChild, WritableSignal } from "@angular/core";
-import { FormGroup, ReactiveFormsModule } from "@angular/forms";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatInputModule } from "@angular/material/input";
-import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
-import { MatSidenav, MatSidenavModule } from "@angular/material/sidenav";
-import { MatSort, MatSortModule } from "@angular/material/sort";
-import { MatTableDataSource, MatTableModule } from "@angular/material/table";
-import { IssField } from "../../../shared/classes/iss-field";
-import { VIEW_PROVIDER } from "../../../shared/constants/view-provider.const";
-import { FormEngine } from "../../../shared/services/form-engine";
-import { Loader } from "../../../shared/services/loader";
-import { Outlet } from "../../outlet/outlet";
-import { FieldBase } from "../base/field-base";
-import { FieldViewer } from "./field.viewer";
-
-@Component({
-  selector: "iss-field-table",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    MatFormFieldModule,
-    MatInputModule,
-    MatTableModule,
-    MatSortModule,
-    MatPaginatorModule,
-    MatSidenavModule,
-    ReactiveFormsModule,
-    Outlet,
-    FieldViewer,
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <mat-sidenav-container [hasBackdrop]="true">
-      <mat-sidenav #drawer [mode]="'over'" [position]="'start'" [autoFocus]="false">
-        <form [formGroup]="tableOutletForm">
-          <iss-form-outlet [fields]="fields()" />
-        </form>
-        <ds-button (click)="drawer.close();addRow(tableOutletForm.getRawValue());tableOutletForm.reset()">save
-        </ds-button>
-        <ds-button (click)="addRow(tableOutletForm.getRawValue());tableOutletForm.reset()">save and add more</ds-button>
-      </mat-sidenav>
-      <mat-sidenav-content>
-        <div>
-          <ds-button icon="true" (click)="drawer.toggle()">
-            <ds-icon icon="plus"></ds-icon>
-          </ds-button>
-          <!--<button mat-raised-button (click)="removeRow()" class="demo-button">Remove data</button>-->
-        </div>
-        @if (field.config.tableWithFilter()) {
-          <mat-form-field>
-            <mat-label>Filter</mat-label>
-            <input matInput (keyup)="applyFilter($event)" placeholder="Search in table" #input>
-          </mat-form-field>
-        }
-        <div class="mat-elevation-z8">
-          <table mat-table [dataSource]="dataSource" matSort>
-            <tr mat-header-row *matHeaderRowDef="fieldNames()"></tr>
-            <tr mat-row *matRowDef="let row; columns: fieldNames();" (click)="onRowClick(row)"></tr>
-
-            @for (col of fieldNames(); track col) {
-              @if (col !== "actions") {
-                <ng-container [matColumnDef]="col">
-                  <th
-                    mat-header-cell *matHeaderCellDef mat-sort-header
-                    [disabled]="!fieldsMap().get(col)?.config?.tableWithSort()"
-                  >
-                    {{ columnLabels()[$index] }}
-                  </th>
-                  <td mat-cell *matCellDef="let row; let i = index">
-                    <iss-viewer-field [field]="fieldsWithValueInViewMode()[i][$index]" />
-                  </td>
-                </ng-container>
-              }
-            }
-
-            <!-- Actions -->
-            <ng-container matColumnDef="actions">
-              <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
-              <td mat-cell *matCellDef="let row">
-                <ds-icon icon="eye" class="cursor-pointer" (click)="viewRow(row)"></ds-icon>
-                <ds-icon icon="pen" class="cursor-pointer" (click)="editRow(row)"></ds-icon>
-                <ds-icon icon="trash" class="cursor-pointer fc-red" (click)="removeRow(row)"></ds-icon>
-              </td>
-            </ng-container>
-
-            <tr class="mat-row" *matNoDataRow>
-              <td class="mat-cell" colspan="4">
-                <ds-message type="emptyCard"></ds-message>
-              </td>
-            </tr>
-          </table>
-
-          @if (field.config.tableWithPagination()) {
-            <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" aria-label="Select page number"></mat-paginator>
-          }
-        </div>
-      </mat-sidenav-content>
-    </mat-sidenav-container>
-  `,
-  styles: `
-    .mat-drawer {
-      position: fixed;
-      left: 0;
-    }
-  `
-})
-export class TableField extends FieldBase implements AfterViewInit, OnInit {
-  loader: Loader = inject(Loader);
-  drawer: Signal<MatSidenav | undefined> = viewChild("drawer");
-  tableOutletForm: FormGroup = new FormGroup({});
-  fields: WritableSignal<IssField[]> = signal(this.constructFieldChildren(this.field.children));
-  fieldsWithValueInViewMode: WritableSignal<IssField[][]> = signal([]);
-  columnLabels: Signal<string[]> = computed(() => {
-    const labels: string[] = this.fields().map((f: IssField) => f.label());
-    labels.push("");
-    return labels;
-  });
-  fieldNames: Signal<string[]> = computed(() => {
-    const names = this.fields().map((f: IssField) => f.name);
-    names.push("actions");
-    return names;
-  });
-  fieldsMap: Signal<Map<string, IssField>> = computed(() => {
-    const m: Map<string, IssField> = new Map<string, IssField>();
-    this.fields().forEach((f: IssField) => {
-      m.set(f.name, f);
-    });
-    return m;
-  });
-  dataSource: MatTableDataSource<any> = new MatTableDataSource<any>([]);
-  clickedRows = new Set<any>();
-  paginator: Signal<MatPaginator | undefined> = viewChild(MatPaginator);
-  sort: Signal<MatSort | undefined> = viewChild(MatSort);
-  #formEngine: FormEngine = inject(FormEngine);
-
-  override ngOnInit() {
-    super.ngOnInit();
-    this.drawer()?.closedStart.subscribe(() => {
-      this.tableOutletForm.reset();
-      this.tableOutletForm.enable();
-    });
-  }
-
-  ngAfterViewInit() {
-    this.dataSource.paginator = this.paginator() ?? null;
-    this.dataSource.sort = this.sort() ?? null;
-  }
-
-  applyFilter(event: Event) {
-    const filterValue: string = (event.target as HTMLInputElement).value;
-    this.dataSource.filter = filterValue.trim().toLowerCase();
-
-    if (this.dataSource.paginator) {
-      this.dataSource.paginator.firstPage();
-    }
-  }
-
-  onRowClick(row: any) {
-    this.clickedRows.add(row);
-  }
-
-  removeRow(row: any) {
-    const newData = this.dataSource.data.filter((r) => r.id !== row.id);
-    this.renderRows(newData);
-    if (!newData.length) {
-      this.ctrl.setValue(null);
-    }
-  }
-
-  addRow(rows: any) {
-    this.renderRows([...this.dataSource.data, rows]);
-    this.fieldsWithValueInViewMode.update((fields) => {
-      return [...fields, this.#fieldValuesMapper(rows)];
-    });
-    this.ctrl.setValue("*");
-  }
-
-  renderRows(rows: any) {
-    this.dataSource = new MatTableDataSource<any>(rows);
-    this.dataSource.paginator = this.paginator() ?? null;
-    this.dataSource.sort = this.sort() ?? null;
-    this.field.jsonValue = this.dataSource.data;
-  }
-
-  viewRow(row: any) {
-    this.fields.update((fields: IssField[]): IssField[] => {
-      fields = fields.map((field) => {
-        field.value = row[field.name];
-        return field;
-      });
-      return [...fields];
-    });
-    this.tableOutletForm.patchValue(row);
-    this.tableOutletForm.disable();
-    this.drawer()?.open();
-  }
-
-  editRow(row: any) {
-    this.tableOutletForm.patchValue(row);
-    this.drawer()?.open();
-  }
-
-  private constructFieldChildren(fields: any): IssField[] {
-    return fields.map((f: any) => new IssField(f, this.loader));
-  }
-
-  #fieldValuesMapper(values: any): IssField[] {
-    return this.fields().map((field: IssField): any => {
-      const fieldWithJsonValue: IssField = this.#formEngine.fields.find((f: IssField) => f.name === field.name)!;
-      return {
-        name: fieldWithJsonValue.name,
-        type: fieldWithJsonValue.type,
-        ctrlValue: signal(values[field.name]),
-        ctrlJsonValue: signal(fieldWithJsonValue.ctrlJsonValue()),
-        config: fieldWithJsonValue.config,
-      };
-    });
-  }
-
-  #viewFieldsFactory() {
-    const viewData: any = [];
-    this.fields().forEach((f) => {
-      viewData.push({
-        name: f.name,
-        type: f.type,
-        ctrlValue: signal(f.ctrlValue()),
-        ctrlJsonValue: signal(f.ctrlJsonValue()),
-        config: f.config,
-      });
-    });
-    return viewData;
-  }
-}

package/projects/iss/src/components/controls/textarea/textarea.control.ts

@@ -1,54 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, effect, EffectRef, OnDestroy } from "@angular/core";
-import { FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
-import { MatFormField, MatFormFieldModule } from "@angular/material/form-field";
-import { MatInput } from "@angular/material/input";
-import { HintsComponent } from "../../shared/hints.component";
-import { ControlBase } from "../base/control-base";
-
-@Component({
-  selector: "iss-ctrl-textarea",
-  imports: [
-    MatFormField,
-    MatInput,
-    HintsComponent,
-    FormsModule,
-    ReactiveFormsModule,
-    MatFormFieldModule,
-  ],
-  providers: [
-    {provide: NG_VALUE_ACCESSOR, useExisting: TextareaControl, multi: true},
-    {provide: NG_VALIDATORS, useExisting: TextareaControl, multi: true}
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  template: `
-    <mat-form-field floatLabel="auto" class="custom-textarea">
-      <mat-label class="fs-16 fc-black">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <textarea
-        matInput
-        [placeholder]="placeholder()"
-        [formControl]="ctrl"
-        [maxlength]="max()"
-        [minlength]="min()"
-        (input)="emitValue()"
-        (focusout)="markAsTouched()"
-      >
-      </textarea>
-      <iss-ctrl-hints [hints]="hints()" />
-    </mat-form-field>
-  `
-})
-export class TextareaControl extends ControlBase implements OnDestroy {
-  #disabledEffect: EffectRef = effect(() => {
-    if (this.disabled()) {
-      this.ctrl.disable();
-    } else {
-      this.ctrl.enable();
-    }
-  });
-
-  ngOnDestroy() {
-    this.#disabledEffect.destroy();
-  }
-}

package/projects/iss/src/components/controls/textarea/textarea.field.ts

@@ -1,31 +0,0 @@
-import { Component } from "@angular/core";
-import { ReactiveFormsModule } from "@angular/forms";
-import { VIEW_PROVIDER } from "../../../shared/constants/view-provider.const";
-import { ValidationMessageComponent } from "../../shared/validation-message.component";
-import { FieldBase } from "../base/field-base";
-import { TextareaControl } from "./textarea.control";
-import { TextareaViewer } from "./textarea.viewer";
-
-@Component({
-  selector: "iss-field-textarea",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    TextareaControl,
-    ValidationMessageComponent,
-    TextareaViewer
-  ],
-  template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
-        <iss-ctrl-textarea [formControlName]="field.name" [min]="field.config.min() ?? null" [max]="field.config.max() ?? null">
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-textarea>
-        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
-      } @else {
-        <iss-viewer-textarea [field]="field" />
-      }
-    }
-  `
-})
-export class TextareaField extends FieldBase {}

package/projects/iss/src/components/controls/textarea/textarea.viewer.ts

@@ -1,11 +0,0 @@
-import { Component } from "@angular/core";
-import { ViewerBase } from "../base/viewer-base";
-
-@Component({
-  selector: "iss-viewer-textarea",
-  template: `
-    {{ field().ctrlValue() }}
-  `,
-})
-export class TextareaViewer extends ViewerBase {
-}

package/projects/iss/src/components/controls/time-picker/time-picker.control.ts

@@ -1,86 +0,0 @@
-import { Component, CUSTOM_ELEMENTS_SCHEMA, input, InputSignal } from "@angular/core";
-import { NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
-import { provideNativeDateAdapter } from "@angular/material/core";
-import { MatFormFieldModule } from "@angular/material/form-field";
-import { MatIcon } from "@angular/material/icon";
-import { MatInputModule } from "@angular/material/input";
-import { MatTimepickerModule } from "@angular/material/timepicker";
-import { format } from "date-fns";
-import { ControlBase } from "../base/control-base";
-
-@Component({
-  selector: "iss-ctrl-time-picker",
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [
-    MatFormFieldModule, MatInputModule, MatTimepickerModule, ReactiveFormsModule, MatIcon,
-  ],
-  providers: [
-    provideNativeDateAdapter(),
-    {provide: NG_VALUE_ACCESSOR, useExisting: TimePickerControl, multi: true},
-    {provide: NG_VALIDATORS, useExisting: TimePickerControl, multi: true},
-  ],
-  template: `
-    <mat-form-field floatLabel="auto" class="">
-      <mat-label class="fs-16 fc-black">
-        <ng-content select="label"></ng-content>
-      </mat-label>
-      <input
-        matInput
-        [formControl]="ctrl"
-        [matTimepicker]="picker"
-        [matTimepickerMin]="minTime()"
-        [matTimepickerMax]="maxTime()"
-        readonly
-      />
-      @if (ctrl.getRawValue()) {
-        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
-      }
-      <mat-timepicker-toggle matIconSuffix [for]="picker" />
-      <mat-timepicker (selected)="emit($event)" [interval]="interval()" #picker />
-
-    </mat-form-field>
-  `,
-})
-export class TimePickerControl extends ControlBase {
-  interval: InputSignal<string> = input("30min");
-  minTime: InputSignal<string | null> = input<string | null>(null);
-  maxTime: InputSignal<string | null> = input<string | null>(null);
-
-  emit(evt: any) {
-    this.propagateValue(this.#stringifyTime(evt.value));
-    this.emitOnChangeEvent(this.#stringifyTime(evt.value));
-  }
-
-  clear(event: MouseEvent) {
-    event.stopImmediatePropagation();
-    this.ctrl.setValue(null);
-
-    this.propagateValue(null);
-    this.emitOnChangeEvent(null);
-  }
-
-  override writeValue(value: any) {
-    if (value) {
-      const d = new Date();
-      d.setHours(value.split(":")[0]);
-      d.setMinutes(value.split(":")[1]);
-      d.setSeconds(value.split(":")[2] ?? "00");
-      this.ctrl.setValue(d);
-    }
-  }
-
-  #stringifyTime(value: any) {
-    let formatedTime;
-    try {
-      formatedTime = format(new Date(value), "HH:mm:ss");
-    } catch (e) {
-      formatedTime = value;
-    }
-
-    if (value instanceof Date && !Number.isNaN(value.getTime())) {
-      return formatedTime;
-    }
-
-    return null;
-  }
-}

package/projects/iss/src/components/controls/time-picker/time-picker.field.ts

@@ -1,28 +0,0 @@
-import { Component } from "@angular/core";
-import { ReactiveFormsModule } from "@angular/forms";
-import { VIEW_PROVIDER } from "../../../shared/constants/view-provider.const";
-import { FieldBase } from "../base/field-base";
-import { TimePickerControl } from "./time-picker.control";
-import { TimePickerViewer } from "./time-picker.viewer";
-
-@Component({
-  selector: "iss-field-time-picker",
-  viewProviders: [VIEW_PROVIDER],
-  imports: [
-    ReactiveFormsModule,
-    TimePickerControl,
-    TimePickerViewer
-  ],
-  template: `
-    @if (field.visible()) {
-      @if (field.mode() === "edit") {
-        <iss-ctrl-time-picker [formControlName]="field.name">
-          <label>{{ field.label() }}</label>
-        </iss-ctrl-time-picker>
-      } @else {
-        <iss-viewer-time-picker [field]="field" />
-      }
-    }
-  `
-})
-export class TimePickerField extends FieldBase {}

package/projects/iss/src/components/controls/time-picker/time-picker.viewer.ts

@@ -1,10 +0,0 @@
-import { Component } from "@angular/core";
-import { ViewerBase } from "../base/viewer-base";
-
-@Component({
-  selector: "iss-viewer-time-picker",
-  template: `
-    {{ field().ctrlValue() }}
-  `,
-})
-export class TimePickerViewer extends ViewerBase {}

package/projects/iss/src/components/controls/toggle-button/toggle-button.control.ts

@@ -1,105 +0,0 @@
-import { Component, input, InputSignal, signal, WritableSignal } from "@angular/core";
-import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from "@angular/forms";
-import { MatButtonToggleModule } from "@angular/material/button-toggle";
-import { Option } from "../../../shared/interfaces/option";
-import { ControlBase } from "../base/control-base";
-
-@Component({
-  selector: "iss-ctrl-toggle-button",
-  imports: [MatButtonToggleModule, ReactiveFormsModule],
-  template: `
-    <mat-button-toggle-group
-      [formControl]="ctrl"
-      [multiple]=multiple()
-      [hideMultipleSelectionIndicator]="true"
-      [hideSingleSelectionIndicator]="true"
-    >
-      @for (option of options(); track option.value) {
-        <mat-button-toggle class="d-block" [value]="option.value" (change)="onToggleButtonChange($event.source.checked,option.value)">
-          {{ option.label }}
-        </mat-button-toggle>
-      }
-    </mat-button-toggle-group>
-  `,
-  styles: `
-    .mat-button-toggle-group-appearance-standard {
-      border-radius: unset !important;
-    }
-  `,
-  providers: [
-    {provide: NG_VALUE_ACCESSOR, useExisting: ToggleButtonControl, multi: true}
-  ]
-})
-export class ToggleButtonControl extends ControlBase {
-  options: InputSignal<Option[]> = input.required();
-  selectedOptions: WritableSignal<Map<string, Option>> = signal(new Map<string, Option>());
-
-  override writeValue(value: string | null) {
-    this.#reset();
-    if (value === null || value === undefined) {
-      return;
-    }
-    const values: string[] = value.split(",").map((val: string) => val.trim());
-    const selectedOptions: Option[] = this.options().filter((option: Option) => values.includes(option.value));
-    if (!this.multiple()) {
-      if (selectedOptions.length > 1) {
-        this.emitValue(null);
-        throw new Error("You cannot set multiple values while the control is in single selection mode!");
-      }
-      this.ctrl.setValue(values[0]);
-      this.addToSelectedOptionsMap(this.#selectedOptionsMapFactory([selectedOptions[0]]));
-      return;
-    }
-    this.addToSelectedOptionsMap(this.#selectedOptionsMapFactory(selectedOptions));
-    this.ctrl.setValue(values);
-  }
-
-  addToSelectedOptionsMap(option: Map<string, Option>) {
-    if (option) {
-      this.selectedOptions = signal(option);
-    }
-  }
-
-  onToggleButtonChange(checked: boolean, value: string) {
-    if (!this.multiple()) {
-      this.emitValue(value);
-    } else {
-      const option = this.options().find((o: Option) => o.value === value);
-      if (!option) {
-        return;
-      }
-      this.selectedOptions.update((prev) => {
-        const options = prev;
-        if (checked) options.set(option.value, option!);
-        else options.delete(option.value);
-        return options;
-      });
-      this.getEmissionValue(this.selectedOptions());
-    }
-  }
-
-  stringifySelectedOptions(): string | null {
-    if (!this.selectedOptions()?.size) {
-      return null;
-    }
-    return Array.from(this.selectedOptions(), ([value]) => value).join();
-  }
-
-  getEmissionValue(options: any) {
-    this.addToSelectedOptionsMap(options);
-    this.emitValue(this.stringifySelectedOptions());
-  }
-
-  #selectedOptionsMapFactory(selectedOptions: Option[]) {
-    const selectedOptionsMap: Map<string, Option> = new Map();
-    for (const option of selectedOptions) {
-      selectedOptionsMap.set(option.value, option);
-    }
-    return selectedOptionsMap;
-  }
-
-  #reset() {
-    this.selectedOptions().clear();
-    this.ctrl.setValue(null);
-  }
-}