iss-ctrl 0.0.3 → 0.0.4

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

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

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

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

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

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

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

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

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

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

@@ -1,28 +0,0 @@
-import {Directive, HostListener, output, OutputEmitterRef} from "@angular/core";
-
-@Directive({
-  selector: "[droppable]",
-  standalone: true,
-})
-export class DroppableDirective {
-  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);
-  }
-}