@gerandon/ngx-widgets 18.0.0 → 18.0.2

package/lib/core/base-input.d.ts

@@ -0,0 +1,38 @@
+import { AfterViewInit, InjectionToken, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { FloatLabelType, SubscriptSizing } from '@angular/material/form-field';
+import { BaseValueAccessor } from './base-value-accessor';
+import * as i0 from "@angular/core";
+export interface NgxWidgetsValidationErrorTypes {
+    required?: string;
+    selectGlobalPlaceholder?: string;
+}
+export declare const NGX_WIDGETS_VALIDATION_TRANSLATIONS: InjectionToken<NgxWidgetsValidationErrorTypes>;
+export declare class BaseInput<T> extends BaseValueAccessor<T> implements OnInit, AfterViewInit, OnChanges {
+    protected readonly validationTranslations: NgxWidgetsValidationErrorTypes;
+    id: string;
+    name: string;
+    label: string;
+    translateParams?: unknown;
+    placeholder: string;
+    isDisabled?: boolean | undefined;
+    floatLabel: FloatLabelType;
+    prefixIcon?: string;
+    suffixIcon?: string;
+    suffix?: string;
+    formControlName?: string;
+    validatorMessages?: {
+        [key: string]: string;
+    };
+    subscriptSizing: SubscriptSizing;
+    hintLabel: string;
+    validatorMessagesArray: {
+        key: string;
+        value: unknown;
+    }[];
+    constructor(validationTranslations: NgxWidgetsValidationErrorTypes);
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseInput<any>, [{ optional: true; }]>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseInput<any>, never, never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "label": { "alias": "label"; "required": false; }; "translateParams": { "alias": "translateParams"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "floatLabel": { "alias": "floatLabel"; "required": false; }; "prefixIcon": { "alias": "prefixIcon"; "required": false; }; "suffixIcon": { "alias": "suffixIcon"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "formControlName": { "alias": "formControlName"; "required": false; }; "validatorMessages": { "alias": "validatorMessages"; "required": false; }; "subscriptSizing": { "alias": "subscriptSizing"; "required": false; }; "hintLabel": { "alias": "hintLabel"; "required": false; }; }, {}, never, never, false, never>;
+}

package/lib/core/base-text-input.d.ts

@@ -0,0 +1,8 @@
+import { BaseInput } from './base-input';
+import * as i0 from "@angular/core";
+export declare class BaseTextInput<T> extends BaseInput<T> {
+    type: ('text' | 'password' | 'number' | 'email' | 'tel');
+    maxLength?: number | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseTextInput<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseTextInput<any>, never, never, { "type": { "alias": "type"; "required": false; }; "maxLength": { "alias": "maxLength"; "required": false; }; }, {}, never, never, false, never>;
+}

package/lib/core/base-value-accessor.d.ts

@@ -0,0 +1,28 @@
+import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormControl, NgControl, ValidationErrors, Validator, ValidatorFn } from '@angular/forms';
+import { Observable, Subject } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class BaseValueAccessor<T> implements ControlValueAccessor, AfterViewInit, Validator, OnDestroy {
+    validator: Observable<ValidationErrors>;
+    inputElement: ElementRef;
+    input: NgControl;
+    control: FormControl;
+    private onChange;
+    private onTouched;
+    private readonly injector;
+    protected controlDir: NgControl;
+    protected readonly cdr: ChangeDetectorRef;
+    protected _validate: ValidatorFn;
+    protected readonly _defaultValidate: ValidatorFn;
+    protected readonly destroy$: Subject<void>;
+    constructor();
+    validate(control: AbstractControl): Observable<ValidationErrors>;
+    ngAfterViewInit(): void;
+    writeValue(obj: T): void;
+    registerOnChange(fn: (value: T) => unknown): void;
+    registerOnTouched(fn: () => unknown): void;
+    protected get valueAccessor(): ControlValueAccessor | null;
+    ngOnDestroy(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<BaseValueAccessor<any>, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseValueAccessor<any>, never, never, { "validator": { "alias": "validator"; "required": false; }; }, {}, never, never, false, never>;
+}

package/lib/core/component-unsubscribe.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Automatically unsubscribe from an Observable when the view is destroyed
+ * Tested with checking the "complete" event of a subscribe method
+ * @description
+ * An Annotation that should be used with an Observable typed variable to handle its subscriptions
+ * @author gergo.asztalos
+ */
+export declare function UnsubscribeOnDestroy<ObservableType>(): PropertyDecorator;

package/lib/select/select.component.d.ts

@@ -0,0 +1,26 @@
+import { ElementRef, OnInit, QueryList } from '@angular/core';
+import { BaseInput } from '../core/base-input';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export interface SelectOptionType {
+    label: string;
+    value: string | number | null | unknown;
+}
+export declare class SelectComponent extends BaseInput<unknown> implements OnInit {
+    /**
+     * In this case, an empty option appears that resets the control, to an empty value state
+     */
+    emptyOptionLabel?: string;
+    multiple?: boolean;
+    options: SelectOptionType[];
+    asyncOptions: Observable<SelectOptionType[]>;
+    optionElements: QueryList<ElementRef>;
+    /**
+     * Angular Material - Select component comparsion is only '===', does not work with Array values
+     * https://github.com/angular/components/blob/a07c0758a5ec2eb4de1bb822354be08178c66aa4/src/lib/select/select.ts#L242C48-L242C58
+     */
+    readonly _isEqual: (value: any, other: any) => boolean;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SelectComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SelectComponent, "gerandon-select", never, { "emptyOptionLabel": { "alias": "emptyOptionLabel"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "options": { "alias": "options"; "required": false; }; "asyncOptions": { "alias": "asyncOptions"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/textarea-input/textarea-input.component.d.ts

@@ -0,0 +1,7 @@
+import { BaseTextInput } from "../core/base-text-input";
+import * as i0 from "@angular/core";
+export declare class TextareaInputComponent extends BaseTextInput<string> {
+    rows: number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextareaInputComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextareaInputComponent, "gerandon-textarea-input", never, { "rows": { "alias": "rows"; "required": false; }; }, {}, never, never, true, never>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gerandon/ngx-widgets",
-  "version": "18.0.0",
+  "version": "18.0.2",
   "description": "Angular widget (components) collection using CVA (ControlValueAccessor)",
   "keywords": [
     "CVA",
@@ -36,11 +36,21 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "devDependencies": {
-    "@types/lodash-es": "^4.17.12"
-  },
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
-}
+  "sideEffects": false,
+  "module": "fesm2022/gerandon-ngx-widgets.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/gerandon-ngx-widgets.mjs",
+      "esm": "./esm2022/gerandon-ngx-widgets.mjs",
+      "default": "./fesm2022/gerandon-ngx-widgets.mjs"
+    }
+  }
+}

package/{src/public-api.ts → public-api.d.ts}

@@ -1,12 +1,7 @@
-/*
- * Public API Surface of ngx-widgets
- */
-
 export * from './lib/core/base-value-accessor';
 export * from './lib/core/base-input';
 export * from './lib/core/base-text-input';
 export * from './lib/core/component-unsubscribe';
-
 export * from './lib/basic-input/basic-input.component';
 export * from './lib/select/select.component';
 export * from './lib/textarea-input/textarea-input.component';

package/ng-package.json

@@ -1,7 +0,0 @@
-{
-  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/ngx-widgets",
-  "lib": {
-    "entryFile": "src/public-api.ts"
-  }
-}

package/src/lib/basic-chips/basic-chips.component.html

@@ -1,39 +0,0 @@
-<mat-form-field appearance="outline" [subscriptSizing]="subscriptSizing" [floatLabel]="floatLabel">
-  @if (label) {
-    <mat-label [class.disabled]="isDisabled">{{ label }}</mat-label>
-  }
-  <mat-chip-grid #chipGrid class="w-100">
-    @for(item of control.value; track item) {
-      <mat-chip-row (removed)="remove(item)" color="primary" highlighted>
-        {{ labelProperty ? item[labelProperty] : item}}
-        <button matChipRemove [attr.aria-label]="(labelProperty ? item[labelProperty] : item) + ' eltávolítása'">
-          <mat-icon>cancel</mat-icon>
-        </button>
-      </mat-chip-row>
-    }
-    <input #inputElement
-           matInput
-           [placeholder]="placeholder || label"
-           [matAutocomplete]="auto"
-           [matChipInputFor]="chipGrid"
-           [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-           (matChipInputTokenEnd)="!labelProperty && add($event)"/>
-    <mat-autocomplete #auto="matAutocomplete"
-                      (optionSelected)="selected($event)">
-      @for (filterItem of asyncOptions | async; track filterItem) {
-        <mat-option [value]="filterItem">
-          {{labelProperty ? filterItem[labelProperty] : filterItem}}
-        </mat-option>
-      }
-    </mat-autocomplete>
-  </mat-chip-grid>
-  <input #input="ngForm" [style.display]="'none'" [formControl]="control" />
-  @if (control.errors?.['server']) {
-    <mat-error>{{ control.errors?.['server'] }}</mat-error>
-  } @else if (control.errors?.['required']) {
-    <mat-error>{{ validationTranslations.required }}</mat-error>
-    @for (error of validatorMessagesArray; track error) {
-      <mat-error>{{ error.value }}</mat-error>
-    }
-  }
-</mat-form-field>

package/src/lib/basic-chips/basic-chips.component.scss

@@ -1,31 +0,0 @@
-gerandon-basic-chips {
-  display: block;
-  .mat-mdc-standard-chip {
-    height: 28px !important;
-  }
-  mat-form-field {
-    width: 100%;
-    .mat-mdc-text-field-wrapper {
-      .mat-mdc-form-field-infix {
-        display: flex;
-        align-items: center;
-        min-height: 40px !important;
-        padding: unset !important;
-      }
-      .mat-mdc-floating-label {
-        &:not(.mdc-floating-label--float-above) {
-          top: 1.2rem !important;
-        }
-      }
-    }
-    mat-chip-row {
-      margin-top: 8px !important;
-      margin-bottom: 8px !important;
-    }
-    .mat-mdc-standard-chip .mdc-evolution-chip__cell--primary,
-    .mat-mdc-standard-chip .mdc-evolution-chip__action--primary,
-    .mat-mdc-standard-chip .mat-mdc-chip-action-label {
-      overflow: hidden !important;
-    }
-  }
-}

package/src/lib/basic-chips/basic-chips.component.ts

@@ -1,83 +0,0 @@
-import { COMMA, ENTER } from '@angular/cdk/keycodes';
-import { AsyncPipe, JsonPipe } from '@angular/common';
-import { Component, forwardRef, Input, ViewEncapsulation } from '@angular/core';
-import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
-import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
-import { MatIconModule } from '@angular/material/icon';
-
-import { Observable } from 'rxjs';
-import {BaseInput} from "../core/base-input";
-import {MatError, MatFormField, MatLabel} from "@angular/material/form-field";
-import {MatInput} from "@angular/material/input";
-
-@Component({
-  selector: 'gerandon-basic-chips',
-  templateUrl: 'basic-chips.component.html',
-  styleUrls: ['basic-chips.component.scss'],
-  standalone: true,
-  encapsulation: ViewEncapsulation.None,
-  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicChipsComponent), multi: true }],
-  imports: [
-    MatChipsModule,
-    MatIconModule,
-    ReactiveFormsModule,
-    MatAutocompleteModule,
-    AsyncPipe,
-    JsonPipe,
-    MatFormField,
-    MatInput,
-    MatLabel,
-    MatError,
-  ],
-})
-export class BasicChipsComponent<T> extends BaseInput<T[]> {
-
-  @Input() public asyncOptions?: Observable<T[]>;
-  @Input() public labelProperty?: keyof T;
-  public readonly separatorKeysCodes = [ENTER, COMMA] as const;
-
-  remove(item: T) {
-    const values: T[] = this.control.value;
-    const index = values.indexOf(item);
-    if (index >= 0) {
-      values.splice(index, 1);
-      this.control.setValue(values);
-    }
-
-    this.mark();
-  }
-
-  add(event: MatChipInputEvent): void {
-    const value = (event.value || '').trim();
-    if (value) {
-      this.updateValue(value as T);
-    }
-    event.chipInput!.clear();
-
-    this.mark();
-  }
-
-  selected(event: MatAutocompleteSelectedEvent): void {
-    if (!this.control.value?.includes(event.option.value)) {
-      this.updateValue(<T>event.option.value);
-    }
-    this.inputElement.nativeElement.value = '';
-
-    this.mark();
-  }
-
-  private updateValue(value: T) {
-    this.control.setValue([
-      ...(this.control.value || []),
-      value,
-    ]);
-  }
-
-  private mark() {
-    if (!this.control.touched) {
-      this.control.markAsTouched();
-      this.control.markAsDirty();
-    }
-  }
-}

package/src/lib/basic-input/basic-input.component.html

@@ -1,44 +0,0 @@
-<div class="basic-input cva-input">
-  <mat-form-field appearance="outline" [subscriptSizing]="subscriptSizing" [hintLabel]="hintLabel" [floatLabel]="floatLabel">
-    @if (label) {
-      <mat-label [class.disabled]="isDisabled">{{label}}</mat-label>
-    }
-    <input
-      [id]="id"
-      #inputElement
-      #input="ngForm"
-      matInput
-      [style.padding-right]="(suffix || prefixIcon) && '35px'"
-      [type]="type"
-      [attr.disabled]="isDisabled || control.disabled ? '' : null"
-      [readonly]="isDisabled"
-      [placeholder]="placeholder"
-      [formControl]="control"
-      [maxLength]="maxLength"
-      [name]="name"
-      [required]="!!control.errors?.['required']"/>
-    @if (prefixIcon) {
-      <mat-icon matPrefix color="accent">
-        {{prefixIcon}}
-      </mat-icon>
-    }
-    @if (suffixIcon) {
-      <mat-icon matSuffix color="accent">
-        {{suffixIcon}}
-      </mat-icon>
-    }
-    @if (suffix) {
-      <span matSuffix style="margin-right: 10px">{{suffix}}</span>
-    }
-    @if (control.errors?.['server']) {
-      <mat-error>{{ control.errors?.['server'] }}</mat-error>
-    } @else if (control.errors?.['required']) {
-      <mat-error>{{ validationTranslations.required }}</mat-error>
-      @for (error of validatorMessagesArray; track error) {
-        @if (control.errors?.[error.key]) {
-          <mat-error>{{ error.value }}</mat-error>
-        }
-      }
-    }
-  </mat-form-field>
-</div>

package/src/lib/basic-input/basic-input.component.scss

@@ -1,26 +0,0 @@
-gerandon-basic-input {
-  display: block;
-  .basic-input {
-    height: inherit;
-    .disabled {
-      color: #CED4DAFF;
-    }
-    mat-form-field {
-      width: 100%;
-      .mat-icon {
-        padding: unset;
-        margin-left: 10px;
-        margin-right: 10px;
-      }
-      input {
-        &::placeholder {
-          color: #ADB5BDFF;
-          font-style: italic;
-        }
-        &:disabled {
-          cursor: not-allowed;
-        }
-      }
-    }
-  }
-}

package/src/lib/basic-input/basic-input.component.ts

@@ -1,41 +0,0 @@
-import {
-  Component,
-  EventEmitter,
-  forwardRef,
-  OnInit,
-  Output,
-  ViewEncapsulation,
-} from '@angular/core';
-import { NG_ASYNC_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-
-import { BaseTextInput } from '../core/base-text-input';
-
-@Component({
-  selector: 'gerandon-basic-input',
-  templateUrl: './basic-input.component.html',
-  styleUrls: ['./basic-input.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    MatIconModule,
-    MatFormFieldModule,
-    MatInputModule,
-  ],
-  providers: [
-    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => BasicInputComponent), multi: true },
-    { provide: NG_ASYNC_VALIDATORS, useExisting: forwardRef(() => BasicInputComponent), multi: true },
-  ],
-})
-export class BasicInputComponent extends BaseTextInput<string> implements OnInit {
-
-  @Output() iconClick = new EventEmitter();
-
-  override ngOnInit() {
-    super.ngOnInit();
-    this.id = this.id || this.name;
-  }
-}

package/src/lib/core/base-input.ts

@@ -1,69 +0,0 @@
-import {
-  AfterViewInit,
-  Directive, Inject, inject, InjectionToken,
-  Input, OnChanges,
-  OnInit, Optional, SimpleChanges,
-} from '@angular/core';
-import { FloatLabelType, SubscriptSizing } from '@angular/material/form-field';
-
-import { BaseValueAccessor } from './base-value-accessor';
-import { isEmpty, keys } from 'lodash-es';
-
-export interface NgxWidgetsValidationErrorTypes {
-  required?: string;
-  selectGlobalPlaceholder?: string;
-}
-export const NGX_WIDGETS_VALIDATION_TRANSLATIONS = new InjectionToken<NgxWidgetsValidationErrorTypes>('NGX_WIDGETS_VALIDATION_TRANSLATIONS');
-
-@Directive()
-export class BaseInput<T> extends BaseValueAccessor<T> implements OnInit, AfterViewInit, OnChanges {
-
-  @Input() public id!: string;
-  @Input() public name!: string;
-  @Input() public label!: string;
-  @Input() public translateParams?: unknown;
-  @Input() public placeholder!: string;
-  @Input() public isDisabled? = false;
-  @Input() public floatLabel: FloatLabelType = 'auto';
-  @Input() public prefixIcon?: string;
-  @Input() public suffixIcon?: string;
-  @Input() public suffix?: string;
-  @Input() public formControlName?: string;
-  @Input() public validatorMessages?: { [key: string]: string };
-  @Input() public subscriptSizing: SubscriptSizing = 'fixed';
-  @Input() public hintLabel = '';
-  public validatorMessagesArray: { key: string, value: unknown }[] = [];
-
-  constructor(@Optional() @Inject(NGX_WIDGETS_VALIDATION_TRANSLATIONS) protected readonly validationTranslations: NgxWidgetsValidationErrorTypes) {
-    super();
-  }
-
-  ngOnInit() {
-    this.placeholder = this.placeholder === undefined ? this.label : this.placeholder;
-    if (!this.name) {
-      this.name = this.formControlName!;
-      /*
-      console.warn(`name attribute is not defined for ${this.formControlName}! Please beware, that using this control multiple
-      times with the same control name could result in wrong focus, clicking on the label!`);
-       */
-    }
-    // *ngIf seems like does not re-render component when label is used with dynamic value (e.g.: translate pipe). Strange
-    this.label = this.label || ' ';
-  }
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (changes['validatorMessages']) {
-      if (!isEmpty(this.validatorMessages)) {
-        this.validatorMessagesArray = keys(this.validatorMessages).map((key) => ({
-          key,
-          value: this.validatorMessages![key],
-        }));
-      }
-    }
-  }
-
-  override ngAfterViewInit() {
-    super.ngAfterViewInit();
-    this.cdr.detectChanges();
-  }
-}

package/src/lib/core/base-text-input.ts

@@ -1,13 +0,0 @@
-import {
-  Directive,
-  Input,
-} from '@angular/core';
-
-import { BaseInput } from './base-input';
-
-@Directive()
-export class BaseTextInput<T> extends BaseInput<T> {
-
-  @Input() public type: ('text' | 'password' | 'number' | 'email' | 'tel') = 'text';
-  @Input() public maxLength? = 512;
-}

package/src/lib/core/base-value-accessor.ts

@@ -1,80 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef, Directive,
-  ElementRef, inject,
-  Injector, Input, OnDestroy, Type,
-  ViewChild,
-} from '@angular/core';
-import {
-  AbstractControl,
-  ControlValueAccessor, FormControl,
-  NgControl,
-  ValidationErrors,
-  Validator, ValidatorFn,
-} from '@angular/forms';
-
-import {Observable, of, Subject} from 'rxjs';
-
-@Directive()
-export class BaseValueAccessor<T> implements ControlValueAccessor, AfterViewInit, Validator, OnDestroy {
-
-  @Input() public validator: Observable<ValidationErrors> = of({});
-  @ViewChild('inputElement') inputElement!: ElementRef;
-  @ViewChild('input') input!: NgControl;
-
-  public control: FormControl;
-
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  private onChange = (value: T) => {
-  };
-  private onTouched = () => {
-  };
-  private readonly injector: Injector = inject(Injector);
-  protected controlDir!: NgControl;
-  protected readonly cdr: ChangeDetectorRef = inject(ChangeDetectorRef);
-  protected _validate: ValidatorFn;
-  protected readonly _defaultValidate: ValidatorFn = () => null;
-
-  protected readonly destroy$ = new Subject<void>();
-
-  constructor() {
-    this._validate = this._defaultValidate;
-    // Temporarily, AfterViewInit will handle the correct setting
-    this.control = new FormControl();
-  }
-
-  validate(control: AbstractControl): Observable<ValidationErrors> {
-    control.setErrors({ ...control.errors, pending: true });
-    return this.validator;
-  }
-
-  ngAfterViewInit() {
-    this.controlDir = this.injector.get<NgControl>(NgControl as Type<NgControl>);
-    this.control = <FormControl>this.controlDir.control;
-    // For ng-valid expression changed error workaround purposes
-    this.cdr.detectChanges();
-  }
-
-  writeValue(obj: T): void {
-    this.valueAccessor?.writeValue(obj);
-  }
-
-  registerOnChange(fn: (value: T) => unknown): void {
-    this.onChange = fn;
-    this.valueAccessor?.registerOnChange(fn);
-  }
-
-  registerOnTouched(fn: () => unknown) {
-    this.onTouched = fn;
-    this.valueAccessor?.registerOnTouched(fn);
-  }
-
-  protected get valueAccessor(): ControlValueAccessor | null {
-    return this.input ? this.input.valueAccessor : null;
-  }
-
-  ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}