@onemrvapublic/design-system 0.0.0

package/projects/onemrva/design-system/mat-datepicker-header/src/onemrva-mat-datepicker-header.component.html

@@ -0,0 +1,53 @@
+<div class="mat-calendar-header">
+  <div class="mat-calendar-controls">
+    <button
+      mat-button
+      type="button"
+      class="mat-calendar-period-button"
+      (click)="currentPeriodClicked()"
+      [attr.aria-label]="periodButtonLabel"
+      [attr.aria-describedby]="_periodButtonLabelId"
+      aria-live="polite"
+    >
+      <span aria-hidden="true">{{ periodButtonText }}</span>
+      <svg
+        class="mat-calendar-arrow"
+        [class.mat-calendar-invert]="calendar.currentView !== 'month'"
+        viewBox="0 0 10 5"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <polygon points="0,0 5,5 10,0" />
+      </svg>
+    </button>
+
+    <div class="mat-calendar-spacer"></div>
+    <!-- Component a is the only difference with the view coming from @angular/material -->
+    <a class="onemrva-calendar-header-today" (click)="setToday()">{{
+      "today" | translate
+    }}</a>
+
+    <ng-content></ng-content>
+
+    <button
+      mat-icon-button
+      type="button"
+      class="mat-calendar-previous-button"
+      [disabled]="!previousEnabled()"
+      (click)="previousClicked()"
+      [attr.aria-label]="prevButtonLabel"
+    ></button>
+
+    <button
+      mat-icon-button
+      type="button"
+      class="mat-calendar-next-button"
+      [disabled]="!nextEnabled()"
+      (click)="nextClicked()"
+      [attr.aria-label]="nextButtonLabel"
+    ></button>
+  </div>
+</div>
+<label [id]="_periodButtonLabelId" class="mat-calendar-hidden-label">{{
+  periodButtonDescription
+}}</label>

package/projects/onemrva/design-system/mat-datepicker-header/src/onemrva-mat-datepicker-header.component.ts

@@ -0,0 +1,285 @@
+import { CommonModule } from '@angular/common';
+import {
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Inject,
+  Optional,
+  forwardRef,
+} from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MatDateFormats,
+} from '@angular/material/core';
+import { MatCalendar, MatDatepickerIntl } from '@angular/material/datepicker';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { Subject } from 'rxjs';
+
+const YEARS_PER_PAGE = 24;
+let calendarHeaderId = 1;
+
+/**
+ * Code completely copied from https://github.com/angular/components/tree/main/src/material/datepicker
+ * The only difference is the method setToday()
+ */
+@Component({
+  selector: 'onemrva-mat-datepicker-header',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatIconModule, TranslateModule],
+  templateUrl: 'onemrva-mat-datepicker-header.component.html',
+  providers: [],
+})
+export class OnemrvaMatDatepickerHeader<D> {
+  private _destroyed = new Subject<void>();
+
+  today: EventEmitter<void> = new EventEmitter();
+
+  constructor(
+    private _intl: MatDatepickerIntl,
+    @Inject(forwardRef(() => MatCalendar))
+    public calendar: MatCalendar<D>,
+    @Optional() private _dateAdapter: DateAdapter<D>,
+    @Optional()
+    @Inject(MAT_DATE_FORMATS)
+    private _dateFormats: MatDateFormats,
+    changeDetectorRef: ChangeDetectorRef
+  ) {}
+
+  setToday() {
+    (this.calendar as unknown as MatCalendar<Date>)._goToDateInView(
+      new Date(),
+      'month'
+    );
+    this.today.emit();
+  }
+
+  /** The display text for the current calendar view. */
+  get periodButtonText(): string {
+    if (this.calendar.currentView == 'month') {
+      return this._dateAdapter
+        .format(
+          this.calendar.activeDate,
+          this._dateFormats.display.monthYearLabel
+        )
+        .toLocaleUpperCase();
+    }
+    if (this.calendar.currentView == 'year') {
+      return this._dateAdapter.getYearName(this.calendar.activeDate);
+    }
+
+    return this._intl.formatYearRange(...this._formatMinAndMaxYearLabels());
+  }
+
+  /** The aria description for the current calendar view. */
+  get periodButtonDescription(): string {
+    if (this.calendar.currentView == 'month') {
+      return this._dateAdapter
+        .format(
+          this.calendar.activeDate,
+          this._dateFormats.display.monthYearLabel
+        )
+        .toLocaleUpperCase();
+    }
+    if (this.calendar.currentView == 'year') {
+      return this._dateAdapter.getYearName(this.calendar.activeDate);
+    }
+
+    // Format a label for the window of years displayed in the multi-year calendar view. Use
+    // `formatYearRangeLabel` because it is TTS friendly.
+    return this._intl.formatYearRangeLabel(
+      ...this._formatMinAndMaxYearLabels()
+    );
+  }
+
+  /** The `aria-label` for changing the calendar view. */
+  get periodButtonLabel(): string {
+    return this.calendar.currentView == 'month'
+      ? this._intl.switchToMultiYearViewLabel
+      : this._intl.switchToMonthViewLabel;
+  }
+
+  /** The label for the previous button. */
+  get prevButtonLabel(): string {
+    return {
+      month: this._intl.prevMonthLabel,
+      year: this._intl.prevYearLabel,
+      'multi-year': this._intl.prevMultiYearLabel,
+    }[this.calendar.currentView];
+  }
+
+  /** The label for the next button. */
+  get nextButtonLabel(): string {
+    return {
+      month: this._intl.nextMonthLabel,
+      year: this._intl.nextYearLabel,
+      'multi-year': this._intl.nextMultiYearLabel,
+    }[this.calendar.currentView];
+  }
+
+  /** Handles user clicks on the period label. */
+  currentPeriodClicked(): void {
+    this.calendar.currentView =
+      this.calendar.currentView == 'month' ? 'multi-year' : 'month';
+  }
+
+  /** Handles user clicks on the previous button. */
+  previousClicked(): void {
+    this.calendar.activeDate =
+      this.calendar.currentView == 'month'
+        ? this._dateAdapter.addCalendarMonths(this.calendar.activeDate, -1)
+        : this._dateAdapter.addCalendarYears(
+            this.calendar.activeDate,
+            this.calendar.currentView == 'year' ? -1 : -YEARS_PER_PAGE
+          );
+  }
+
+  /** Handles user clicks on the next button. */
+  nextClicked(): void {
+    this.calendar.activeDate =
+      this.calendar.currentView == 'month'
+        ? this._dateAdapter.addCalendarMonths(this.calendar.activeDate, 1)
+        : this._dateAdapter.addCalendarYears(
+            this.calendar.activeDate,
+            this.calendar.currentView == 'year' ? 1 : YEARS_PER_PAGE
+          );
+  }
+
+  /** Whether the previous period button is enabled. */
+  previousEnabled(): boolean {
+    if (!this.calendar.minDate) {
+      return true;
+    }
+    return (
+      !this.calendar.minDate ||
+      !this._isSameView(this.calendar.activeDate, this.calendar.minDate)
+    );
+  }
+
+  /** Whether the next period button is enabled. */
+  nextEnabled(): boolean {
+    return (
+      !this.calendar.maxDate ||
+      !this._isSameView(this.calendar.activeDate, this.calendar.maxDate)
+    );
+  }
+
+  /** Whether the two dates represent the same view in the current view mode (month or year). */
+  private _isSameView(date1: D, date2: D): boolean {
+    if (this.calendar.currentView == 'month') {
+      return (
+        this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2) &&
+        this._dateAdapter.getMonth(date1) == this._dateAdapter.getMonth(date2)
+      );
+    }
+    if (this.calendar.currentView == 'year') {
+      return (
+        this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2)
+      );
+    }
+    // Otherwise we are in 'multi-year' view.
+    return isSameMultiYearView(
+      this._dateAdapter,
+      date1,
+      date2,
+      this.calendar.minDate,
+      this.calendar.maxDate
+    );
+  }
+
+  /**
+   * Format two individual labels for the minimum year and maximum year available in the multi-year
+   * calendar view. Returns an array of two strings where the first string is the formatted label
+   * for the minimum year, and the second string is the formatted label for the maximum year.
+   */
+  private _formatMinAndMaxYearLabels(): [
+    minYearLabel: string,
+    maxYearLabel: string
+  ] {
+    // The offset from the active year to the "slot" for the starting year is the
+    // *actual* first rendered year in the multi-year view, and the last year is
+    // just yearsPerPage - 1 away.
+    const activeYear = this._dateAdapter.getYear(this.calendar.activeDate);
+    const minYearOfPage =
+      activeYear -
+      getActiveOffset(
+        this._dateAdapter,
+        this.calendar.activeDate,
+        this.calendar.minDate,
+        this.calendar.maxDate
+      );
+    const maxYearOfPage = minYearOfPage + YEARS_PER_PAGE - 1;
+    const minYearLabel = this._dateAdapter.getYearName(
+      this._dateAdapter.createDate(minYearOfPage, 0, 1)
+    );
+    const maxYearLabel = this._dateAdapter.getYearName(
+      this._dateAdapter.createDate(maxYearOfPage, 0, 1)
+    );
+
+    return [minYearLabel, maxYearLabel];
+  }
+
+  private _id = `mat-calendar-header-${calendarHeaderId++}`;
+
+  _periodButtonLabelId = `${this._id}-period-label`;
+}
+
+function isSameMultiYearView<D>(
+  dateAdapter: DateAdapter<D>,
+  date1: D,
+  date2: D,
+  minDate: D | null,
+  maxDate: D | null
+): boolean {
+  const year1 = dateAdapter.getYear(date1);
+  const year2 = dateAdapter.getYear(date2);
+  const startingYear = getStartingYear(dateAdapter, minDate, maxDate);
+  return (
+    Math.floor((year1 - startingYear) / YEARS_PER_PAGE) ===
+    Math.floor((year2 - startingYear) / YEARS_PER_PAGE)
+  );
+}
+
+/**
+ * We pick a "starting" year such that either the maximum year would be at the end
+ * or the minimum year would be at the beginning of a page.
+ */
+function getStartingYear<D>(
+  dateAdapter: DateAdapter<D>,
+  minDate: D | null,
+  maxDate: D | null
+): number {
+  let startingYear = 0;
+  if (maxDate) {
+    const maxYear = dateAdapter.getYear(maxDate);
+    startingYear = maxYear - YEARS_PER_PAGE + 1;
+  } else if (minDate) {
+    startingYear = dateAdapter.getYear(minDate);
+  }
+  return startingYear;
+}
+
+/**
+ * When the multi-year view is first opened, the active year will be in view.
+ * So we compute how many years are between the active year and the *slot* where our
+ * "startingYear" will render when paged into view.
+ */
+function getActiveOffset<D>(
+  dateAdapter: DateAdapter<D>,
+  activeDate: D,
+  minDate: D | null,
+  maxDate: D | null
+): number {
+  const activeYear = dateAdapter.getYear(activeDate);
+  return euclideanModulo(
+    activeYear - getStartingYear(dateAdapter, minDate, maxDate),
+    YEARS_PER_PAGE
+  );
+}
+
+/** Gets remainder that is non-negative, even if first number is negative */
+function euclideanModulo(a: number, b: number): number {
+  return ((a % b) + b) % b;
+}

package/projects/onemrva/design-system/mat-file-upload/index.ts

@@ -0,0 +1,11 @@
+/*
+ * Public API Surface of mat-file upload
+ */
+
+export * from './src/components';
+export * from './src/onemrva-mat-file-upload.module';
+export * from './src/onemrva-mat-file-upload.store';
+export * from './src/onemrva-mat-file-upload.service';
+export * from './src/models/progress-file.model';
+export * from './src/models/action-config.model';
+export * from './src/onemrva-mat-file-upload-itf.store';

package/projects/onemrva/design-system/mat-file-upload/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

package/projects/onemrva/design-system/mat-file-upload/src/components/index.ts

@@ -0,0 +1,10 @@
+import { OnemrvaFilePanelComponent } from './onemrva-mat-file-panel/onemrva-file-panel.component';
+import { OnemrvaMatFileUploadComponent } from './onemrva-mat-file-upload/onemrva-mat-file-upload.component';
+
+export const components: any[] = [
+  OnemrvaFilePanelComponent,
+  OnemrvaMatFileUploadComponent,
+];
+
+export * from './onemrva-mat-file-panel/onemrva-file-panel.component';
+export * from './onemrva-mat-file-upload/onemrva-mat-file-upload.component';

package/projects/onemrva/design-system/mat-file-upload/src/components/onemrva-mat-file-panel/onemrva-file-panel.component.html

@@ -0,0 +1,59 @@
+<div class="file-panel-title" [attr.data-cy]="dataCy">
+  <div class="file-panel-title-left">
+    <mat-icon *ngIf="file.color === 'error'" class="filled mat-error"
+      >error</mat-icon
+    >
+    <mat-icon *ngIf="file.color === 'success'" class="filled mat-success"
+      >check_circle</mat-icon
+    >
+    <mat-icon *ngIf="file.color === 'warn'" class="filled mat-warn"
+      >warning</mat-icon
+    >
+    <span class="file-name">
+      {{ file.name }}
+    </span>
+  </div>
+  <div class="file-panel-title-action">
+    <ng-container *ngIf="actions.length > 0">
+      <ng-container *ngFor="let action of actions">
+        <mat-icon
+          *ngIf="action.showAction(file)"
+          role="button"
+          color="primary"
+          [attr.data-cy]="action.dataCy"
+          matTooltip="{{ action.tooltipCode | translate }}"
+          [attr.aria-label]="action.ariaCode | translate"
+          class="clickable"
+          (click)="action.clickHandler(file)"
+          >{{ action.iconName }}</mat-icon
+        >
+      </ng-container>
+    </ng-container>
+  </div>
+</div>
+<div class="file-panel-content">
+  <ng-container *ngIf="file.message === ''">
+    <div class="fileInfos">
+      {{ file.lastModified | date }}
+      <span class="float-right" *ngIf="file.size > 0">{{ size }}</span>
+    </div>
+
+    <div
+      class="onemrva-progress-bar"
+      *ngIf="showProgress && file.enableProgressBar"
+    >
+      <div class="onemrva-progress-bar-outer mt-s" #onemrvaProgressBar>
+        <div
+          class="onemrva-progress-bar-inner"
+          [ngStyle]="{ width: (progress$ | async) + '%' }"
+          [ngClass]="{
+            'progress-success': (progress$ | async)! >= 100
+          }"
+          data-cy="file-upload-progress"
+          [attr.value]="progress$ | async"
+        ></div>
+      </div>
+    </div>
+  </ng-container>
+  <p *ngIf="file.message !== ''" class="message">{{ file.message }}</p>
+</div>

package/projects/onemrva/design-system/mat-file-upload/src/components/onemrva-mat-file-panel/onemrva-file-panel.component.scss

@@ -0,0 +1,24 @@
+$box-shadow: 0px 3px 3px #312f3a29;
+
+:host {
+  flex: 1 1 100%;
+  &.clickable:hover {
+    box-shadow: $box-shadow;
+  }
+}
+
+.fileInfos {
+  display: inline-block;
+  width: 100%;
+  height: 24px;
+  font-size: 14px;
+  .float-right {
+    margin-right: 8px;
+  }
+}
+
+.file-panel-title-left {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}

package/projects/onemrva/design-system/mat-file-upload/src/components/onemrva-mat-file-panel/onemrva-file-panel.component.ts

@@ -0,0 +1,79 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  HostBinding,
+  Input,
+} from '@angular/core';
+import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
+import { of } from 'rxjs';
+import { ActionConfig } from '../../models/action-config.model';
+import {
+  formattedSize,
+  ReferencedProgressFile,
+} from '../../models/progress-file.model';
+
+let NEXT_ID = 0;
+
+@Component({
+  selector: 'file-panel',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styleUrls: ['./onemrva-file-panel.component.scss'],
+  templateUrl: './onemrva-file-panel.component.html',
+})
+export class OnemrvaFilePanelComponent {
+  @HostBinding('attr.id')
+  @Input()
+  public id = `onemrva-file-panel-${NEXT_ID++}`;
+
+  @HostBinding('attr.data-cy')
+  @Input()
+  dataCy: string = 'onemrva-file-panel-' + NEXT_ID;
+
+  @Input()
+  file!: ReferencedProgressFile;
+
+  @Input()
+  actions: ActionConfig[] = [];
+
+  @Input()
+  showProgress: boolean = true;
+
+  get progress$() {
+    return of(this.file.progress);
+  }
+
+  get size() {
+    return formattedSize(this.file.size);
+  }
+
+  get color(): OnemrvaMatColor {
+    return this.file.color;
+  }
+
+  /** @hidden @internal */
+  @HostBinding('mat-accent')
+  public get _colorAccent(): boolean {
+    return this.color === OnemrvaMatColor.ACCENT;
+  }
+
+  /** @hidden @internal */
+  @HostBinding('class.mat-error')
+  public get _isError(): boolean {
+    return this.color === OnemrvaMatColor.ERROR;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-warn')
+  public get _isWarn(): boolean {
+    return this.color === OnemrvaMatColor.WARN;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-success')
+  public get _isSuccess(): boolean {
+    return this.color === OnemrvaMatColor.SUCCESS;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-primary')
+  public get _isPrimary(): boolean {
+    return this.color === OnemrvaMatColor.PRIMARY;
+  }
+}

package/projects/onemrva/design-system/mat-file-upload/src/components/onemrva-mat-file-upload/onemrva-mat-file-upload.component.html

@@ -0,0 +1,53 @@
+<ng-container *ngIf="files$ | async as files">
+  <div
+    class="onemrva-mat-file-upload-drop-area"
+    appDnd
+    [ngClass]="{ filein: files.length > 0 }"
+    (fileDropped)="onFileDropped($event)"
+    [ngClass]="{ 'fu-error': errorMessage !== '' }"
+  >
+    <input
+      type="file"
+      #fileDropRef
+      [attr.id]="inputId"
+      role="button"
+      multiple
+      (change)="fileBrowseHandler($event)"
+      accept="{{ acceptString }}"
+    />
+    <p class="outer">
+      <span class="inner"
+        ><mat-icon class="onemrva-upload">download</mat-icon></span
+      >
+      <span class="inner">{{ "file.upload.drag.and.drop" | translate }}</span>
+      <span class="inner"
+        >{{ "file.upload.or" | translate }}
+        <label for="{{ inputId }}" role="button" class="content">{{
+          "file.upload.browse.for.file" | translate
+        }}</label></span
+      >
+      <span class="inner"
+        ><span *ngIf="maxFileSize > 0"
+          >{{ "file.upload.maximum" | translate }} {{ maxFileSizeFormatted }}
+          <span *ngIf="acceptString.length > 0">{{ "| " }}</span>
+          {{ acceptString }}</span
+        ></span
+      >
+    </p>
+    <ul class="files-list">
+      <li *ngFor="let file of files">
+        <ng-container
+          *ngTemplateOutlet="
+            filePanelTemplate;
+            context: { file, $implicit: file }
+          "
+        ></ng-container>
+      </li>
+    </ul>
+  </div>
+  <mat-error *ngIf="errorMessage">{{ errorMessage | translate }}</mat-error>
+  <mat-error
+    *ngIf="fileUploadErrorMessage$ | async as fileUploadErrorMessage"
+    >{{ fileUploadErrorMessage | translate }}</mat-error
+  >
+</ng-container>