@corp-products/ui-components 3.2.9 → 3.3.1

package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.component.html

@@ -1,32 +0,0 @@
-<p-drawer
-  [(visible)]="show"
-  [position]="position"
-  appendTo="body"
-  [closable]="closable"
-  [closeOnEscape]="closeOnEscape"
-  [dismissible]="dismissible"
-  (onHide)="handleClose()"
-  [position]="'left'"
-  [styleClass]="'p-drawer-' + sidebarSize + ' custom-content bg-white ' + styleClass">
-  <ng-template pTemplate="header">
-    <p class="truncate" [pTooltip]="title">{{ title }}</p>
-  </ng-template>
-  <ng-template pTemplate="content">
-    <ng-template #contentContainer></ng-template>
-  </ng-template>
-  <ng-template pTemplate="footer">
-    <div class="flex gap-4 mt-4">
-      <div class="flex-auto">
-        <app-button (click)="handleSubmit()"
-          [icon]="actions?.save?.icon"
-          [iconPos]="actions?.save?.iconPos || 'right'"
-          [styleClass]="(actions?.save?.style || 'danger') + ' w-full'"
-          [label]="actions?.save?.title || ('actions.submit' | translate)"
-          [variant]="actions?.save?.variant"
-          />
-      </div>
-      <app-button (click)="handleClose()" severity="danger" variant="outlined"
-        [label]="actions?.cancel?.title || ('actions.cancel' | translate)" />
-    </div>
-  </ng-template>
-</p-drawer>

package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.component.scss

@@ -1,3 +0,0 @@
-.flex-auto {
-  flex: 1 1 auto;
-}

package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.component.ts

@@ -1,82 +0,0 @@
-import { AppButtonComponent } from './../app-button/app-button.component';
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { CommonModule } from '@angular/common';
-import {
-  AfterViewInit,
-  Component,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  Output,
-  Type,
-  ViewChild,
-  ViewContainerRef
-} from '@angular/core';
-import { TranslatePipe } from '@ngx-translate/core';
-import { DrawerModule } from 'primeng/drawer';
-import { TooltipModule } from "primeng/tooltip";
-import { SidebarV2Actions } from './dynamic-sidebar.config';
-
-@Component({
-  selector: "app-dynamic-sidebar",
-  templateUrl: "./dynamic-sidebar.component.html",
-  styleUrls: ["./dynamic-sidebar.component.scss"],
-  standalone: true,
-  imports: [CommonModule, TranslatePipe, DrawerModule, TooltipModule, AppButtonComponent],
-})
-export class DynamicSidebarComponent implements AfterViewInit, OnDestroy {
-
-  @Input() component!: Type<any>;
-  @Input() data?: any;
-  @Input() title = '';
-  @Input() actions?: SidebarV2Actions;
-  @Input() sidebarSize: 'sm' | 'md' | 'lg' = 'md';
-  @Input() closable = true;
-  @Input() closeOnEscape = true;
-  @Input() dismissible = true;
-  @Input() position: 'left' | 'right' = 'left';
-  @Input() styleClass = '';
-  @Input() disabled = false;
-
-  @Output() closed = new EventEmitter();
-
-  @ViewChild('contentContainer', { read: ViewContainerRef })
-  private contentContainer!: ViewContainerRef;
-
-  private contentRef: any;
-
-  show = true;
-
-  ngAfterViewInit() {
-    this.renderContent();
-  }
-
-  private renderContent() {
-    if (!this.component) return;
-    this.contentContainer.clear();
-    this.contentRef = this.contentContainer.createComponent(this.component);
-    if (this.data) Object.assign(this.contentRef.instance, this.data);
-  }
-
-  handleClose() {
-    if(this.contentRef.instance.close) this.contentRef.instance.close();
-    this.closed.emit(null);
-    this.destroy();
-  }
-
-  handleSubmit() {
-    if(this.data.form) {
-      this.data.form.markAllAsTouched();
-      if(this.data.form.invalid) return;
-    }
-    if(this.contentRef.instance.submit) this.contentRef.instance.submit();
-  }
-
-  private destroy() {
-    this.contentRef?.destroy();
-  }
-
-  ngOnDestroy() {
-    this.destroy();
-  }
-}

package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.config.ts

@@ -1,31 +0,0 @@
-import { Type, ViewContainerRef } from "@angular/core";
-import { AppButtonIconPos, AppButtonSeverity, AppButtonSize, AppButtonVariant } from "../app-button";
-
-export interface DynamicSidebarV2Actions {
-  submit: () => void;
-  close: () => void;
-}
-export interface DynamicSidebarV2Config<T = any> {
-  title?: string;
-  component: Type<T>;
-  data?: Partial<T>;
-  size?: 'sm' | 'md' | 'lg';
-  position?: 'left' | 'right';
-  styleClass?: string;
-  viewContainerRef?: ViewContainerRef;
-  actions?: SidebarV2Actions
-}
-
-export interface SidebarActionV2Config {
-  title?: string;
-  icon?: string;
-  size?: AppButtonSize;
-  style?: AppButtonSeverity;
-  iconPos?: AppButtonIconPos;
-  variant?: AppButtonVariant;
-}
-
-export interface SidebarV2Actions {
-  cancel?: SidebarActionV2Config;
-  save?: SidebarActionV2Config;
-}

package/src/lib/dynamic-side-bar-v2/dynamic-sidebar.service.ts

@@ -1,41 +0,0 @@
-import { ApplicationRef, ComponentRef, EnvironmentInjector, Injectable, Injector, createComponent, inject } from '@angular/core';
-import { DynamicSidebarComponent } from './dynamic-sidebar.component';
-import { DynamicSidebarV2Config } from './dynamic-sidebar.config';
-
-@Injectable({ providedIn: 'root' })
-export class DynamicSidebarV2Service {
-  private sidebarRef?: ComponentRef<DynamicSidebarComponent>;
-  private readonly appRef = inject(ApplicationRef);
-  private readonly injector = inject(Injector);
-  private readonly envInjector = inject(EnvironmentInjector);
-
-  open<T>(options: DynamicSidebarV2Config<T>) {
-    this.close();
-
-    this.sidebarRef = createComponent(DynamicSidebarComponent, {
-      environmentInjector: this.envInjector,
-      elementInjector: this.injector,
-    });
-
-    const instance = this.sidebarRef.instance;
-    instance.title = options.title ?? '';
-    instance.sidebarSize = options.size ?? 'md';
-    instance.position = options.position ?? 'left';
-    instance.styleClass = options.styleClass ?? '';
-    instance.component = options.component;
-    instance.data = options.data ?? {};
-    instance.actions = options.actions;
-    instance.closed.subscribe(() => this.close());
-
-    this.appRef.attachView(this.sidebarRef.hostView);
-    const domElem = (this.sidebarRef.hostView as any).rootNodes[0] as HTMLElement;
-    document.body.appendChild(domElem);
-  }
-
-  close() {
-    if (this.sidebarRef) {
-      this.sidebarRef.destroy();
-      this.sidebarRef = undefined;
-    }
-  }
-}

package/src/lib/form-components/@utils/form-utils.ts

@@ -1,12 +0,0 @@
-import {FormControl, FormGroup} from "@angular/forms";
-
-export class FormUtils {
-  static getFormControl(controlName: string, form: FormGroup): FormControl {
-    if (!form) throw new Error(`Form is not initialized.`);
-    const formControl = form.get(controlName) as FormControl;
-
-    if (!formControl) throw new Error(`There's no form control with given name. '${controlName}'`);
-
-    return formControl;
-  }
-}

package/src/lib/form-components/@utils/validations/error-keys.enum.ts

@@ -1,24 +0,0 @@
-export enum BasicErrorKeysEnum {
-  required = "REQUIRED",
-  email = "EMAIL",
-  pattern = "PATTERN",
-  invalidArFormat = "INVALID_AR_FORMAT",
-  invalidLink = "INVALID_LINK",
-  endDateBeforeStartDate = "END_DATE_BEFORE_START_DATE",
-  startDateEqualsEndDate = "START_DATE_EQUALS_END_DATE",
-  endTimeBeforeStartTime = "END_TIME_BEFORE_START_TIME",
-  startTimeEqualsEndTime = "START_TIME_EQUALS_END_TIME",
-  integer = "INTEGER",
-  positiveNumber = "POSITIVE_NUMBER",
-  fileSelected = "FILE_SELECTED",
-  default = "DEFAULT"
-}
-export enum ErrorsWithValuesKeysEnum {
-  minlength = "MIN_LENGTH",
-  maxlength = "MAX_LENGTH",
-  min = "MIN",
-  max = "MAX",
-  maxSize = "MAX_SIZE",
-  maxFiles = "MAX_FILES",
-  allowedTypes = "ALLOWED_TYPES"
-}

package/src/lib/form-components/@utils/validations/form-validation.service.ts

@@ -1,68 +0,0 @@
-import { inject, Injectable } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { InterpolationParameters } from '@ngx-translate/core';
-import { BasicErrorKeysEnum, ErrorsWithValuesKeysEnum } from './error-keys.enum';
-
-@Injectable({
-  providedIn: 'root',
-})
-export class FormValidationService {
-  private translate = inject(TranslateService);
-
-  private getTranslation(key: string, interpolateParams?: InterpolationParameters): string {
-    return this.translate.instant(`VALIDATION.${key}`, interpolateParams);
-  }
-
-  getErrorMessage(errorKey: string, errorValue: any): string {
-    if (this.isBasicErrorKey(errorKey)) {
-      return this.getTranslation(BasicErrorKeysEnum[errorKey as keyof typeof BasicErrorKeysEnum]);
-    }
-
-    if (this.isErrorWithValueKey(errorKey)) {
-      return this.getErrorWithValueMessage(
-        errorKey as keyof typeof ErrorsWithValuesKeysEnum,
-        errorValue
-      );
-    }
-
-    return this.getTranslation(BasicErrorKeysEnum.default);
-  }
-
-  // Basic error keys are the keys that don't have any values to interpolate. like required, email, etc.
-  private isBasicErrorKey(key: string): key is keyof typeof BasicErrorKeysEnum {
-    return Object.keys(BasicErrorKeysEnum).includes(key as BasicErrorKeysEnum);
-  }
-
-  // Error keys with values are the keys that have values to interpolate. like minlength, maxlength, etc.
-  private isErrorWithValueKey(key: string): key is keyof typeof ErrorsWithValuesKeysEnum {
-    return Object.keys(ErrorsWithValuesKeysEnum).includes(key as ErrorsWithValuesKeysEnum);
-  }
-
-  private getErrorWithValueMessage(
-    errorKey: keyof typeof ErrorsWithValuesKeysEnum,
-    errorValue: any
-  ): string {
-    const messages: Record<keyof typeof ErrorsWithValuesKeysEnum, (value: any) => string> = {
-      minlength: (val) =>
-        this.getTranslation(ErrorsWithValuesKeysEnum.minlength, {
-          requiredLength: val?.requiredLength,
-          actualLength: val?.actualLength,
-        }),
-      maxlength: (val) =>
-        this.getTranslation(ErrorsWithValuesKeysEnum.maxlength, {
-          requiredLength: val?.requiredLength,
-          actualLength: val?.actualLength,
-        }),
-      min: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.min, { min: val?.min }),
-      max: (val) => this.getTranslation(ErrorsWithValuesKeysEnum.max, { max: val?.max }),
-      maxSize: (val) =>
-        this.getTranslation(ErrorsWithValuesKeysEnum.maxSize, { size: val?.requiredLength }),
-      maxFiles: (val) =>
-        this.getTranslation(ErrorsWithValuesKeysEnum.maxFiles, { size: val?.requiredLength }),
-      allowedTypes: (val) =>
-        this.getTranslation(ErrorsWithValuesKeysEnum.allowedTypes, { types: val?.join(', ') }),
-    };
-
-    return messages[errorKey](errorValue);
-  }
-}

package/src/lib/form-components/@utils/validations/index.ts

@@ -1,3 +0,0 @@
-export * from "./error-keys.enum";
-export * from "./validation-message.pipe";
-export * from "./form-validation.service";

package/src/lib/form-components/@utils/validations/validation-message.pipe.ts

@@ -1,24 +0,0 @@
-import { inject, Pipe, PipeTransform } from "@angular/core";
-import { ValidationErrors } from "@angular/forms";
-import { FormValidationService } from "./form-validation.service";
-
-@Pipe({
-  name: "validationErrors",
-  standalone: true,
-  pure: true
-})
-export class ValidationErrorsPipe implements PipeTransform {
-  private formValidationService = inject(FormValidationService);
-
-  // allowed keys here to handle errors in case of cross-validators like startDate and endDate validators,
-  // we pass this custom key to handle the error messages only for the allowed keys
-  transform(errors: ValidationErrors | null, allowedKeys?: string[]): string[] {
-    if (!errors) return [];
-
-    return Object.keys(errors)
-      .filter((errorKey) => !allowedKeys || allowedKeys.includes(errorKey)) // Filter errors if allowedKeys are provided
-      .map((errorKey) => {
-        return this.formValidationService.getErrorMessage(errorKey, errors[errorKey]);
-      });
-  }
-}

package/src/lib/form-components/components/auto-complete/auto-complete.component.html

@@ -1,35 +0,0 @@
-<div class="field flex flex-col gap-2 my-3 relative">
-  @if (!required) {
-  <span class="absolute top-[6px] left-0 text-[10px] text-gray-400">{{'forms.config.optional' | translate}}</span>
-  }
-  <p-floatlabel [variant]="variant">
-    <p-auto-complete (completeMethod)="search($event)" (onSelect)="onSelect($event)" [delay]="delay"
-      [disabled]="disabled" [formControl]="control" [id]="inputId" fluid [typeahead]="typeAhead"
-      [inputStyleClass]="'reset-default-styles w-full' + (basicInput ? ' basic-style': ' ')"
-      [minLength]="minLengthToSearch" [name]="name" [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid}"
-      [placeholder]="placeholder" [styleClass]="'w-full'" multiple [suggestions]="items">
-      <ng-template let-item pTemplate="item">
-        @if (selectedItemTemplate) {
-        <ng-container [ngTemplateOutletContext]="{ $implicit: item }" [ngTemplateOutlet]="selectedItemTemplate" />
-        }
-      </ng-template>
-    </p-auto-complete>
-    <label [for]="inputId">
-      {{ label }}
-      @if (required) {
-      <span [class.text-required]="isInvalid">*</span>
-      }
-    </label>
-  </p-floatlabel>
-  @if (hint) {
-  <small class="p-mt-1">{{ hint }}</small>
-  }
-  @if (isInvalid && (control.dirty || control.touched)) {
-  <small class="p-error">
-    @for (error of control.errors | validationErrors; track error) {
-    {{ error }}<br>
-    }
-  </small>
-  }
-
-</div>

package/src/lib/form-components/components/auto-complete/auto-complete.component.scss

@@ -1,7 +0,0 @@
-.text-required {
-  color: red;
-}
-
-.p-error {
-  color: #dc2626;
-}

package/src/lib/form-components/components/auto-complete/auto-complete.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AutoCompleteComponent } from './auto-complete.component';
-
-describe('AutoCompleteComponent', () => {
-  let component: AutoCompleteComponent;
-  let fixture: ComponentFixture<AutoCompleteComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AutoCompleteComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(AutoCompleteComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/form-components/components/auto-complete/auto-complete.component.ts

@@ -1,57 +0,0 @@
-import { JsonPipe, NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
-import { Component, EventEmitter, Input, Output, TemplateRef } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { TranslatePipe } from '@ngx-translate/core';
-import { PrimeTemplate } from 'primeng/api';
-import {
-  AutoComplete,
-  AutoCompleteCompleteEvent,
-  AutoCompleteSelectEvent,
-} from 'primeng/autocomplete';
-import { FloatLabel } from 'primeng/floatlabel';
-import { ValidationErrorsPipe } from '../../@utils/validations/validation-message.pipe';
-import { BaseInputComponent } from '../base-input.component';
-
-@Component({
-  selector: 'stc-auto-complete',
-  standalone: true,
-  imports: [
-    ReactiveFormsModule,
-    AutoComplete,
-    PrimeTemplate,
-    NgIf,
-    NgTemplateOutlet,
-    NgClass,
-    JsonPipe,
-    ValidationErrorsPipe,
-    TranslatePipe,
-    FloatLabel,
-  ],
-  templateUrl: './auto-complete.component.html',
-  styleUrl: './auto-complete.component.scss',
-})
-export class AutoCompleteComponent extends BaseInputComponent {
-  @Input() selectedItemTemplate: TemplateRef<unknown> | null = null;
-  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-  @Output() onSearch: EventEmitter<string> = new EventEmitter<string>();
-  @Output() selectOption: EventEmitter<AutoCompleteSelectEvent> =
-    new EventEmitter<AutoCompleteSelectEvent>();
-  @Input() items: any[] = [];
-  @Input() minLengthToSearch = 3;
-  @Input() delay = 300; // default value
-  @Input() basicInput!: boolean;
-  @Input() typeAhead: boolean = false;
-  @Input() variant: 'in' | 'over' | 'on' = 'over';
-
-  constructor() {
-    super();
-  }
-
-  search(event: AutoCompleteCompleteEvent) {
-    this.onSearch.emit(event.query);
-  }
-
-  onSelect(event: AutoCompleteSelectEvent) {
-    this.selectOption.emit(event);
-  }
-}

package/src/lib/form-components/components/base-input.component.ts

@@ -1,35 +0,0 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
-import { Subject, takeUntil } from 'rxjs';
-@Component({
-  template: '',
-})
-export abstract class BaseInputComponent implements OnInit, OnDestroy {
-  @Input({ required: true }) control!: FormControl;
-  @Input() name: string = '';
-  @Input() label?: string;
-  @Input() placeholder: string = '';
-  @Input() inputId!: string;
-  @Input() readonly: boolean = false;
-  @Input() disabled: boolean = false;
-  @Input() hint?: string;
-
-  protected destroy$ = new Subject<void>();
-
-  get required(): boolean {
-    return this.control.hasValidator(Validators.required);
-  }
-
-  get isInvalid(): boolean {
-    return this.control.invalid && this.control.touched;
-  }
-
-  ngOnInit() {
-
-  }
-
-  ngOnDestroy(): void {
-    this.destroy$.next();
-    this.destroy$.complete();
-  }
-}

package/src/lib/form-components/components/date-picker/date-picker.component.html

@@ -1,41 +0,0 @@
-<div class="field flex flex-col gap-2 my-3 relative">
-
-  <p-floatlabel [variant]="variant">
-    <p-datepicker [selectionMode]="selectionMode" [disabled]="disabled" [formControl]="control" [iconDisplay]="'input'"
-      [showClear]="showClear" (onClear)="afterClearDate()" [inputId]="inputId"
-      [inputStyleClass]="'reset-default-styles ' + (basicInput ? 'basic-style' : '')"
-      [ngClass]="{ 'p-invalid ng-dirty ng-invalid': isInvalid }" [placeholder]="placeholder" [showIcon]="showIcon"
-      [class]="'w-full'" appendTo="body" [timeOnly]="isTimeOnly" [hourFormat]="hourFormat" [minDate]="minDate"
-      [maxDate]="maxDate" panelStyleClass="d-ltr">
-      @if (isTimeOnly) {
-      <ng-template #inputicon let-clickCallBack="clickCallBack">
-        <i class="text-[18px] font-icon-time-clock" (click)="clickCallBack($event)"></i>
-      </ng-template>
-      <ng-template pTemplate="footer">
-        <div class="p-datepicker-buttonbar">
-          <button pButton type="button" class="p-button-text" (click)="selectCurrentTime($event)">الان
-          </button>
-          <button pButton type="button" class="p-button-text" (click)="clearButtonClick($event)"> الغاء</button>
-        </div>
-      </ng-template>
-      }
-    </p-datepicker>
-
-    <label [for]="inputId">
-      {{ label }}
-      @if (required) {
-      <span [class.text-required]="required">*</span>
-      }
-    </label>
-  </p-floatlabel>
-  @if (hint) {
-  <small class="p-mt-1">{{ hint }}</small>
-  }
-  @if (isInvalid && (control.dirty || control.touched)) {
-  <small class="p-error">
-    @for (error of control.errors | validationErrors; track error) {
-    {{ error }}<br>
-    }
-  </small>
-  }
-</div>

package/src/lib/form-components/components/date-picker/date-picker.component.scss

@@ -1,16 +0,0 @@
-.p-datepicker-clear-icon {
-    @apply cursor-pointer absolute top-[50%] left-[13px] -translate-y-1/2 text-[var(--p-datepicker-input-icon-color)] ml-[calc(var(--p-icon-size))] leading-none;
-}
-
-.d-ltr{
-  direction: ltr;
-}
-
-
-.text-required {
-  color: red;
-}
-
-.p-error {
-  color: #dc2626;
-}

package/src/lib/form-components/components/date-picker/date-picker.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DatePickerComponent } from 'nx-BOD-workspace/libs/ui-components/src/lib/form-components/components/date-picker/date-picker.component';
-
-describe('DatePickerComponent', () => {
-  let component: DatePickerComponent;
-  let fixture: ComponentFixture<DatePickerComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [DatePickerComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(DatePickerComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/form-components/components/date-picker/date-picker.component.ts

@@ -1,54 +0,0 @@
-import { NgClass } from '@angular/common';
-import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { TranslatePipe } from '@ngx-translate/core';
-import { DatePicker, DatePickerModule } from 'primeng/datepicker';
-import { FloatLabelModule } from 'primeng/floatlabel';
-import { ValidationErrorsPipe } from '../../@utils/validations/validation-message.pipe';
-import { BaseInputComponent } from '../base-input.component';
-@Component({
-  selector: 'stc-date-picker',
-  standalone: true,
-  imports: [
-    FormsModule,
-    DatePicker,
-    ReactiveFormsModule,
-    NgClass,
-    DatePickerModule,
-    ValidationErrorsPipe,
-    FloatLabelModule,
-  ],
-  templateUrl: './date-picker.component.html',
-  styleUrl: './date-picker.component.scss',
-  encapsulation: ViewEncapsulation.None,
-})
-export class DatePickerComponent extends BaseInputComponent {
-  @Input() showIcon: boolean = false;
-  @Input() showClear: boolean = false;
-  @Input() basicInput!: boolean;
-  @Input() isTimeOnly: boolean = false;
-  @Input() minDate: Date | undefined | null;
-  @Input() maxDate: Date | undefined | null;
-  @Input() hourFormat: '12' | '24' = '12';
-  nowTime = new Date();
-  @Input() selectionMode: 'single' | 'range' = 'single';
-  @Output() onAfterClearDate = new EventEmitter<void>();
-  @Input() variant: 'in' | 'over' | 'on' = 'over';
-
-  constructor() {
-    super();
-  }
-
-  selectCurrentTime(e: any) {
-    this.control.setValue(this.nowTime);
-  }
-
-  clearButtonClick(e: any) {
-    this.control.setValue(null);
-  }
-
-  afterClearDate() {
-    this.control.reset();
-    this.onAfterClearDate.emit();
-  }
-}