iss-ctrl 0.0.2 → 0.0.3

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

@@ -0,0 +1,85 @@
+import {DatePipe} from "@angular/common";
+import {Component, input, InputSignal} from "@angular/core";
+import {NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule, Validator} from "@angular/forms";
+import {provideDateFnsAdapter} from "@angular/material-date-fns-adapter";
+import {MAT_DATE_LOCALE} from "@angular/material/core";
+import {MatDatepickerInputEvent, MatDatepickerModule} from "@angular/material/datepicker";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatIconModule} from "@angular/material/icon";
+import {MatInputModule} from "@angular/material/input";
+import {format} from "date-fns";
+import {enGB} from "date-fns/locale";
+import {DATE_FORMAT_ADAPTER} from "../../../shared/constants/date.const";
+import {ControlBase} from "../base/control.base";
+
+@Component({
+  selector: "iss-ctrl-date-picker",
+  imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatIconModule, ReactiveFormsModule],
+  providers: [
+    DatePipe,
+    provideDateFnsAdapter(DATE_FORMAT_ADAPTER),
+    {provide: MAT_DATE_LOCALE, useValue: enGB},
+    {provide: NG_VALUE_ACCESSOR, useExisting: DatePickerControl, multi: true},
+    {provide: NG_VALIDATORS, useExisting: DatePickerControl, 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
+        class="cursor-pointer"
+        matInput
+        readonly
+        [matDatepicker]="picker"
+        (click)="picker.open(); markAsTouched()"
+        [formControl]="ctrl"
+        [min]="minDate()"
+        [max]="maxDate()"
+        [matDatepickerFilter]="calendarDaysFilter"
+        (dateChange)="emit($event)"
+      />
+      @if (ctrl.getRawValue()) {
+        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
+      }
+      <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+      <mat-datepicker #picker></mat-datepicker>
+
+    </mat-form-field>
+  `,
+  styles: `
+    ::ng-deep {
+      tr:has(> .mat-calendar-body-label[colspan="7"]) {
+        opacity: 0 !important;
+        display: none;
+      }
+
+      .mat-datepicker-content .mat-calendar {
+        height: unset !important;
+      }
+    }
+  `
+})
+export class DatePickerControl extends ControlBase implements Validator {
+  disabledDays: InputSignal<number[]> = input<number[]>([]);
+  minDate: InputSignal<Date | null> = input<Date | null>(null);
+  maxDate: InputSignal<Date | null> = input<Date | null>(null);
+  protected calendarDaysFilter = (d: Date | null): boolean => {
+    const day: number = (d || new Date()).getDay();
+    return !(this.disabledDays().includes(day));
+  };
+
+  clear(event: MouseEvent) {
+    event.stopImmediatePropagation();
+    this.ctrl.setValue(null);
+
+    this.propagateValue(null);
+    this.emitOnChangeEvent(null);
+  }
+
+  protected emit($event: MatDatepickerInputEvent<any>) {
+    const selectedDateString = format($event.value, "yyyy-MM-dd");
+    this.propagateValue(selectedDateString);
+    this.emitOnChangeEvent(selectedDateString);
+  }
+}

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

@@ -0,0 +1,14 @@
+import {DatePipe} from "@angular/common";
+import {Component} from "@angular/core";
+import {ViewerBase} from "../base/viewer.base";
+
+@Component({
+  selector: "iss-vwr-date-picker",
+  imports: [
+    DatePipe
+  ],
+  template: `
+    {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}
+  `
+})
+export class DatePickerViewer extends ViewerBase {}

package/projects/iss/src/components/controls/date-picker/date-picker.wrapper.ts

@@ -0,0 +1,35 @@
+import {Component} from "@angular/core";
+import {ReactiveFormsModule} from "@angular/forms";
+import {MatLabel} from "@angular/material/form-field";
+import {VIEW_PROVIDER} from "../../../shared/constants/provider.const";
+import {WrapperBase} from "../base/wrapper.base";
+import {DatePickerControl} from "./date-picker.control";
+import {DatePickerViewer} from "./date-picker.viewer";
+
+@Component({
+  selector: "iss-wrp-date-picker",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    MatLabel,
+    DatePickerControl,
+    DatePickerViewer
+  ],
+  template: `
+    @if (field.isVisible() && field.registered()) {
+      @if (!(field.config.hideLabel)) {
+        <mat-label>{{ field.label() }}</mat-label>
+      }
+      @if (field.mode() === "edit") {
+        <iss-ctrl-date-picker
+          [formControlName]="field.name"
+          [minDate]="field.config.minDate ?? null"
+          [maxDate]="field.config.maxDate ?? null"
+        />
+      } @else {
+        <iss-vwr-date-picker [field]="field" />
+      }
+    }
+  `
+})
+export class DatePickerWrapper extends WrapperBase {}

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

@@ -0,0 +1,143 @@
+import {Component, input, InputSignal, OnDestroy, OnInit, output, OutputEmitterRef} from "@angular/core";
+import {FormControl, FormGroup, NG_VALUE_ACCESSOR, ReactiveFormsModule} from "@angular/forms";
+import {provideDateFnsAdapter} from "@angular/material-date-fns-adapter";
+import {MAT_DATE_LOCALE} from "@angular/material/core";
+import {MatDatepickerModule} from "@angular/material/datepicker";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatIcon} from "@angular/material/icon";
+import {format} from "date-fns";
+import {enGB} from "date-fns/locale";
+import {Subscription} from "rxjs";
+import {DATE_FORMAT_ADAPTER} from "../../../shared/constants/date.const";
+import {DateRangeEmission} from "../../../shared/interfaces/date-range.interface";
+import {ControlBase} from "../base/control.base";
+
+@Component({
+  selector: "iss-ctrl-date-range-picker",
+  imports: [
+    MatFormFieldModule,
+    MatDatepickerModule,
+    ReactiveFormsModule,
+    MatIcon,
+  ],
+  providers: [
+    provideDateFnsAdapter(DATE_FORMAT_ADAPTER),
+    {provide: MAT_DATE_LOCALE, useValue: enGB},
+    {provide: NG_VALUE_ACCESSOR, useExisting: DateRangePickerControl, multi: true},
+  ],
+  template: `
+    <mat-form-field floatLabel="auto" class="">
+
+      <mat-label class="fs-16 fc-black">
+        <ng-content select="label"></ng-content>
+      </mat-label>
+      <mat-date-range-input
+        [formGroup]="range"
+        [rangePicker]="picker"
+        [min]="minDate()"
+        [max]="maxDate()"
+        [dateFilter]="calendarDaysFilter"
+      >
+        <input
+          matStartDate
+          formControlName="start"
+          placeholder="dd/mm/yyyy"
+          (click)="picker.open(); markAsTouched()"
+        />
+        <input
+          matEndDate
+          formControlName="end"
+          placeholder="dd/mm/yyyy"
+          (click)="picker.open(); markAsTouched()"
+        />
+      </mat-date-range-input>
+      @if (range.getRawValue().start || range.getRawValue().end) {
+        <mat-icon matSuffix style="cursor: pointer" (click)="clear($event)">close</mat-icon>
+      }
+      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+      <mat-date-range-picker #picker></mat-date-range-picker>
+
+    </mat-form-field>
+  `
+})
+export class DateRangePickerControl extends ControlBase implements OnInit, OnDestroy {
+  disabledDays: InputSignal<number[]> = input<number[]>([]);
+  minDate: InputSignal<Date | null> = input<Date | null>(null);
+  maxDate: InputSignal<Date | null> = input<Date | null>(null);
+  onDateRangeObjectChange: OutputEmitterRef<DateRangeEmission> = output();
+  readonly range: FormGroup = new FormGroup({
+    start: new FormControl(null),
+    end: new FormControl(null),
+  });
+  protected calendarDaysFilter = (d: Date | null): boolean => {
+    const day: number = (d || new Date()).getDay();
+    return !(this.disabledDays().includes(day));
+  };
+  #sub: Subscription = new Subscription();
+
+  ngOnInit(): void {
+    this.#sub.add(
+      this.range.valueChanges.subscribe((values) => {
+        if (values.start && values.end) {
+          this.emitValue(this.#getEmissionValue(values.start, values.end));
+          this.onDateRangeObjectChange.emit(this.#getEmissionObject(values.start, values.end));
+        }
+      })
+    );
+  }
+
+  clear(event: MouseEvent) {
+    event.stopImmediatePropagation();
+    this.ctrl.setValue(null);
+    this.range.setValue({
+      start: null,
+      end: null,
+    });
+    this.propagateValue(null);
+    this.emitOnChangeEvent(null);
+  }
+
+  override writeValue(value: string | FormData | null) {
+    if (typeof value === "string") {
+      const valArr: string[] = value?.split(",");
+      const valObj = {
+        start: valArr[0],
+        end: valArr[1],
+      };
+      this.range.patchValue(valObj, {emitEvent: false});
+    }
+  }
+
+  ngOnDestroy(): void {
+    this.#sub.unsubscribe();
+  }
+
+  #getDuration(startDate: Date, endDate: Date) {
+    const start: number = new Date(startDate).getTime();
+    const end: number = new Date(endDate).getTime();
+    return Math.ceil((end - start) / (1000 * 60 * 60 * 24) + 1);
+  }
+
+  #getFormatedDate(date: Date) {
+    return format(date, "yyyy-MM-dd'T'HH:mm:ss");
+  }
+
+  #getFormatedEndDate(endDate: Date) {
+    const inputDate: Date = new Date(new Date(endDate).setHours(23, 59, 59));
+    return this.#getFormatedDate(inputDate);
+  }
+
+  #getEmissionValue(start: Date, end: Date): string {
+    const formatedStart: string = this.#getFormatedDate(start);
+    const formatedEnd: string = this.#getFormatedEndDate(end);
+    return `${formatedStart},${formatedEnd}`;
+  }
+
+  #getEmissionObject(start: Date, end: Date): DateRangeEmission {
+    return {
+      duration: this.#getDuration(start, end),
+      start: this.#getFormatedDate(start),
+      end: this.#getFormatedEndDate(end)
+    };
+  }
+}

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

@@ -0,0 +1,22 @@
+import {DatePipe} from "@angular/common";
+import {Component, OnInit} from "@angular/core";
+import {ViewerBase} from "../base/viewer.base";
+
+@Component({
+  selector: "iss-vwr-date-range-picker",
+  imports: [
+    DatePipe
+  ],
+  template: `
+    @for (date of dateRange; track date; let last = $last) {
+      <span> {{ date | date: 'dd/MM/yyyy' }} {{ last ? '' : '- ' }} </span>
+    }
+  `
+})
+export class DateRangePickerViewer extends ViewerBase implements OnInit {
+  dateRange: string[] = [];
+
+  ngOnInit() {
+    this.dateRange = this.field().ctrlValue().split(",").map((val: any) => val.trim());
+  }
+}

package/projects/iss/src/components/controls/date-range-picker/date-range-picker.wrapper.ts

@@ -0,0 +1,35 @@
+import {Component} from "@angular/core";
+import {ReactiveFormsModule} from "@angular/forms";
+import {MatLabel} from "@angular/material/form-field";
+import {VIEW_PROVIDER} from "../../../shared/constants/provider.const";
+import {WrapperBase} from "../base/wrapper.base";
+import {DateRangePickerControl} from "./date-range-picker.control";
+import {DateRangePickerViewer} from "./date-range-picker.viewer";
+
+@Component({
+  selector: "iss-wrp-date-range-picker",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    DateRangePickerControl,
+    DateRangePickerViewer,
+    MatLabel
+  ],
+  template: `
+    @if (field.isVisible() && field.registered()) {
+      @if (!(field.config.hideLabel)) {
+        <mat-label>{{ field.label() }}</mat-label>
+      }
+      @if (field.mode() === "edit") {
+        <iss-ctrl-date-range-picker
+          [formControlName]="field.name"
+          [minDate]="field.config.minDate ?? null"
+          [maxDate]="field.config.maxDate ?? null"
+        />
+      } @else {
+        <iss-vwr-date-range-picker [field]="field" />
+      }
+    }
+  `
+})
+export class DateRangePickerWrapper extends WrapperBase {}

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

@@ -0,0 +1,109 @@
+import {Component, input, InputSignal} from "@angular/core";
+import {FormControl, FormGroup, NG_VALIDATORS, NG_VALUE_ACCESSOR, ReactiveFormsModule} from "@angular/forms";
+import {MatDatepickerModule} from "@angular/material/datepicker";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {MatInputModule} from "@angular/material/input";
+import {MatTimepickerModule} from "@angular/material/timepicker";
+import {format} from "date-fns";
+import {ControlBase} from "../base/control.base";
+import {DatePickerControl} from "../date-picker/date-picker.control";
+import {TimePickerControl} from "../time-picker/time-picker.control";
+
+@Component({
+  selector: "iss-ctrl-datetime-picker",
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    MatTimepickerModule,
+    MatDatepickerModule,
+    ReactiveFormsModule,
+    DatePickerControl,
+    TimePickerControl,
+  ],
+  providers: [
+    {provide: NG_VALUE_ACCESSOR, useExisting: DatetimePickerControl, multi: true},
+    {provide: NG_VALIDATORS, useExisting: DatetimePickerControl, multi: true},
+  ],
+  template: `
+    <form [formGroup]="datetimeForm" class="d-flex flex-row gap-1">
+      <iss-ctrl-date-picker (focusout)="markAsTouched()" [disabledDays]="disabledDays()" [maxDate]="maxDate()" [minDate]="minDate()" formControlName="date" (onChange)="emit()">
+        <label>
+          <ng-content select="label"></ng-content>
+        </label>
+      </iss-ctrl-date-picker>
+      <iss-ctrl-time-picker
+        (focusout)="markAsTouched()"
+        [maxTime]="maxTime()"
+        [minTime]="minTime()"
+        formControlName="time"
+        (onChange)="emit()"
+      />
+    </form>
+  `
+})
+export class DatetimePickerControl extends ControlBase {
+  datetimeForm: FormGroup = new FormGroup({
+    date: new FormControl(null),
+    time: new FormControl(null),
+  });
+  disabledDays: InputSignal<number[]> = input<number[]>([]);
+  minDate: InputSignal<Date | null> = input<Date | null>(null);
+  maxDate: InputSignal<Date | null> = input<Date | null>(null);
+  minTime: InputSignal<string | null> = input<string | null>(null);
+  maxTime: InputSignal<string | null> = input<string | null>(null);
+
+  emit() {
+    const datetimeStr = this.#stringifyDateTime(this.datetimeForm.getRawValue());
+    this.propagateValue(datetimeStr);
+    this.emitOnChangeEvent(datetimeStr);
+  }
+
+  override writeValue(value: string | Date | null) {
+    this.datetimeForm.patchValue({
+      date: this.#stringifyDate(value),
+      time: this.#stringifyTime(value),
+    });
+  }
+
+  #stringifyDateTime(datetime: any): string | undefined {
+    if (!datetime) {
+      return undefined;
+    }
+    if (this.#stringifyDate(datetime) && this.#stringifyTime(datetime)) {
+      return `${this.#stringifyDate(datetime)}T${this.#stringifyTime(datetime)}`;
+    }
+    return undefined;
+  }
+
+  #stringifyDate(datetime: any) {
+    if (!datetime) {
+      return undefined;
+    }
+
+    if (datetime.date && typeof datetime.date === "string") {
+      return `${datetime.date.split("T")[0]}`;
+    }
+
+    const date = new Date(datetime);
+    if (!Number.isNaN(date.getTime())) {
+      return format(datetime, "yyyy-MM-dd");
+    }
+    return undefined;
+  }
+
+  #stringifyTime(datetime: any) {
+    if (!datetime) {
+      return undefined;
+    }
+
+    if (datetime.time && typeof datetime.time === "string") {
+      return `${datetime.time}`;
+    }
+
+    const date = new Date(datetime);
+    if (!Number.isNaN(date.getTime())) {
+      return format(datetime, "HH:mm:ss");
+    }
+    return undefined;
+  }
+}

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

@@ -0,0 +1,17 @@
+import {DatePipe} from "@angular/common";
+import {Component} from "@angular/core";
+import {DATETIME_FORMAT} from "../../../shared/constants/date.const";
+import {ViewerBase} from "../base/viewer.base";
+
+@Component({
+  selector: "iss-vwr-datetime-picker",
+  imports: [
+    DatePipe
+  ],
+  template: `
+    {{ field().ctrlValue() | date: DATETIME_FORMAT }}
+  `
+})
+export class DatePickerTimeViewer extends ViewerBase {
+  protected readonly DATETIME_FORMAT = DATETIME_FORMAT;
+}

package/projects/iss/src/components/controls/datetime-picker/datetime-picker.wrapper.ts

@@ -0,0 +1,38 @@
+import {Component} from "@angular/core";
+import {ReactiveFormsModule} from "@angular/forms";
+import {MatLabel} from "@angular/material/form-field";
+import {VIEW_PROVIDER} from "../../../shared/constants/provider.const";
+import {ValidationMessageComponent} from "../../shared/validation-message.component";
+import {WrapperBase} from "../base/wrapper.base";
+import {DatetimePickerControl} from "./datetime-picker.control";
+import {DatePickerTimeViewer} from "./datetime-picker.viewer";
+
+@Component({
+  selector: "iss-wrp-datetime-picker",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    DatePickerTimeViewer,
+    MatLabel,
+    DatetimePickerControl,
+    ValidationMessageComponent,
+  ],
+  template: `
+    @if (field.isVisible() && field.registered()) {
+      @if (!(field.config.hideLabel)) {
+        <mat-label>{{ field.label() }}</mat-label>
+      }
+      @if (field.mode() === "edit") {
+        <iss-ctrl-datetime-picker
+          [formControlName]="field.name"
+          [minDate]="field.config.minDate ?? null"
+          [maxDate]="field.config.maxDate ?? null"
+        />
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
+      } @else {
+        <iss-vwr-datetime-picker [field]="field" />
+      }
+    }
+  `
+})
+export class DatetimePickerWrapper extends WrapperBase {}

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

@@ -0,0 +1,165 @@
+import {Component, computed, CUSTOM_ELEMENTS_SCHEMA, input, InputSignal, output, OutputEmitterRef} from "@angular/core";
+import {MatProgressBar} from "@angular/material/progress-bar";
+import {MatTooltip} from "@angular/material/tooltip";
+import {IssFile} from "../../../shared/interfaces/file.interface";
+import {ViewerBase} from "../base/viewer.base";
+
+@Component({
+  selector: "iss-vwr-attachment",
+  imports: [
+    MatTooltip,
+    MatProgressBar,
+  ],
+  template: `
+    @if (attachments()?.length) {
+      <section class="files-list">
+        @for (file of attachments(); track $index) {
+          <div class="file-item-container">
+            @if (file) {
+              <ds-attachments
+                [matTooltip]="file.name"
+                [file]="file.file ?? file"
+                [showDownload]="field().config.showDownloadButton"
+                [attr.readonly]="!field().config.showDeleteButton"
+                (downloadEvent)="onDownload($event)"
+                (deleteEvent)="onDelete($index)"
+              >
+              </ds-attachments>
+              @if (uploading()) {
+                <mat-progress-bar mode="indeterminate" />
+              }
+            }
+          </div>
+        }
+      </section>
+    }
+  `,
+  styles: `
+    .insideTableStyle {
+      width: 272px;
+    }
+
+    .files-list {
+      --file-item-width: 270px;
+      display: grid;
+      grid-template-columns: repeat(auto-fill, var(--file-item-width));
+      grid-gap: 0.5rem;
+      @media (max-width: 768px) {
+        grid-template-columns: repeat(auto-fill, minmax(var(--file-item-width), 1fr));
+      }
+
+
+    }
+
+    .mat-mdc-progress-bar {
+      --mat-progress-bar-active-indicator-color: var(--purple);
+      --mat-progress-bar-track-color: rgba(var(--rgb-purple), .25);
+    }
+
+
+    .file-item-container {
+      .file-item {
+        --file-bg: var(--off-white);
+        --file-radius: var(--box-radius);
+        --icon-color: var(--purple);
+        --icon-size: 2rem;
+        --file-border: transparent;
+
+        display: flex;
+        align-items: center;
+        background-color: var(--file-bg);
+        border: 1px solid var(--file-border);
+        border-radius: var(--file-radius);
+        padding: 0 1rem;
+        height: 70px;
+        gap: 0.75rem;
+
+        &.error {
+          --file-bg: rgba(var(--rgb-red), 10%);
+          --file-border: var(--red);
+          --icon-color: var(--red);
+        }
+
+        .icon {
+          color: var(--icon-color);
+          font-size: var(--icon-size);
+        }
+
+        .file-action {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+        }
+      }
+    }
+
+    ds-attachments::part(base) {
+      --file-width: 250px;
+    }
+
+    ::ng-deep {
+      .file-item .name-size {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex-grow: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        min-width: 120px;
+      }
+    }
+  `,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AttachmentViewer extends ViewerBase {
+  uploading: InputSignal<boolean> = input(false);
+  uploadingError: InputSignal<string> = input("");
+  deleteOut: OutputEmitterRef<File[]> = output();
+  attachments = computed(() => {
+    return this.field().ctrlJsonValue().map((attachment: IssFile): IssFile => {
+      return {
+        name: attachment.name,
+        size: attachment.size,
+        type: attachment.type,
+        errorMsg: attachment.errorMsg,
+        file: attachment.file
+      };
+    });
+  });
+
+  protected onDownload($event: any) {
+    const fileUrl: string = this.#createObjectUrl($event.detail.value);
+    const anchorElement: HTMLAnchorElement = this.#createAnchorElement(fileUrl, $event.detail.value.name);
+    this.#useAnchorElementThenDispose(anchorElement, fileUrl);
+  }
+
+  protected onDelete(index: number) {
+    const fileHtmlElement: HTMLInputElement | null = document.getElementById("file") as HTMLInputElement;
+    if (fileHtmlElement) {
+      fileHtmlElement.value = "";
+    }
+    const updatedFiles = this.field().ctrlJsonValue().filter((_: any, i: number): boolean => i !== index);
+    this.field().ctrlJsonValue = computed(() => updatedFiles);
+    this.deleteOut.emit(this.field().ctrlJsonValue());
+  }
+
+  #createObjectUrl(file: File): string {
+    const blob: Blob = new Blob([file], {type: "application/octet-stream"});
+    return window.URL.createObjectURL(blob);
+  }
+
+  #createAnchorElement(fileUrl: string, fileName: string): HTMLAnchorElement {
+    const a: HTMLAnchorElement = document.createElement("a");
+    a.setAttribute("style", "display: none");
+    a.href = fileUrl;
+    a.download = fileName;
+    return a;
+  }
+
+  #useAnchorElementThenDispose(a: HTMLAnchorElement, fileUrl: string) {
+    a.click();
+    window.URL.revokeObjectURL(fileUrl);
+    a.remove();
+  }
+}