iss-ctrl 0.0.5 → 0.0.7

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-format.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.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 { DatePickerControl } from "./date-picker.control";
+import { DatePickerViewer } from "./date-picker.viewer";
+
+@Component({
+  selector: "iss-field-date-picker",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    DatePickerControl,
+    DatePickerViewer
+  ],
+  template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-date-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null">
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-picker>
+      } @else {
+        <iss-viewer-date-picker [field]="field" />
+      }
+    }
+  `
+})
+export class DatePickerField extends FieldBase {}

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-viewer-date-picker",
+  imports: [
+    DatePipe
+  ],
+  template: `
+    {{ field().ctrlValue() | date: 'dd/MM/yyyy' }}
+  `
+})
+export class DatePickerViewer extends ViewerBase {}

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

@@ -0,0 +1,5 @@
+export interface DateRangeEmission {
+  duration: number;
+  start: string;
+  end: string;
+}

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-format.const";
+import { ControlBase } from "../base/control-base";
+import { DateRangeEmission } from "./date-range-emission";
+
+@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.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 { DateRangePickerControl } from "./date-range-picker.control";
+import { DateRangePickerViewer } from "./date-range-picker.viewer";
+
+@Component({
+  selector: "iss-field-date-range-picker",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    DateRangePickerControl,
+    DateRangePickerViewer
+  ],
+  template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-date-range-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null">
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-date-range-picker>
+      } @else {
+        <iss-viewer-date-range-picker [field]="field" />
+      }
+    }
+  `
+})
+export class DateRangePickerField extends FieldBase {}

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-viewer-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/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.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 { DatetimePickerControl } from "./datetime-picker.control";
+import { DatePickerTimeViewer } from "./datetime-picker.viewer";
+
+@Component({
+  selector: "iss-field-datetime-picker",
+  viewProviders: [VIEW_PROVIDER],
+  imports: [
+    ReactiveFormsModule,
+    DatetimePickerControl,
+    ValidationMessageComponent,
+    DatePickerTimeViewer,
+  ],
+  template: `
+    @if (field.visible()) {
+      @if (field.mode() === "edit") {
+        <iss-ctrl-datetime-picker [formControlName]="field.name" [minDate]="field.config.minDate() ?? null" [maxDate]="field.config.maxDate() ?? null">
+          <label>{{ field.label() }}</label>
+        </iss-ctrl-datetime-picker>
+        <iss-validation-message-viewer [errors]="ctrl.errors" [showMessage]="!ctrl.untouched" />
+      } @else {
+        <iss-viewer-datetime-picker [field]="field" />
+      }
+    }
+  `
+})
+export class DatetimePickerField extends FieldBase {}

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-format.const";
+import { ViewerBase } from "../base/viewer-base";
+
+@Component({
+  selector: "iss-viewer-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/file-picker/attachment.ts

@@ -0,0 +1,6 @@
+export interface IssAttachment {
+  id: string,
+  name: string,
+  type: string,
+  size: number
+}

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 { ViewerBase } from "../base/viewer-base";
+import { IssFile } from "./file";
+
+@Component({
+  selector: "iss-viewer-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();
+  }
+}

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

@@ -0,0 +1,25 @@
+import { Directive, HostListener, output, OutputEmitterRef } from "@angular/core";
+
+@Directive({selector: "[droppable]"})
+export class Droppable {
+  onDrop: OutputEmitterRef<FileList> = output();
+
+  @HostListener("dragover", ["$event"])
+  onDragOver(evt: any) {
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+
+  @HostListener("dragleave", ["$event"])
+  onDragLeave(evt: any) {
+    evt.preventDefault();
+    evt.stopPropagation();
+  }
+
+  @HostListener("drop", ["$event"])
+  onDropped(evt: any) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    this.onDrop.emit(evt.dataTransfer.files);
+  }
+}