iss-ctrl 0.0.4 → 0.0.6

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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,233 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,86 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,105 @@
+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);
+  }
+}