@onemrvapublic/design-system 1.0.0-beta.4 → 1.0.0-develop.1

package/mat-carousel/src/onemrva-mat-carousel.component.ts

@@ -1,160 +0,0 @@
-import {
-  AfterViewInit,
-  Component,
-  ContentChildren,
-  ElementRef,
-  HostListener,
-  Input,
-  OnDestroy,
-  OnInit,
-  QueryList,
-  Renderer2,
-  ViewChild,
-} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { OnemrvaMatCarouselItemComponent } from './mat-carousel-item/onemrva-mat-carousel-item.component';
-import {
-  animate,
-  AnimationBuilder,
-  AnimationFactory,
-  AnimationPlayer,
-  style,
-  transition,
-  trigger,
-} from '@angular/animations';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { TranslateModule } from '@ngx-translate/core';
-import { interval, Subject, takeUntil } from 'rxjs';
-
-@Component({
-  selector: 'onemrva-mat-carousel',
-  standalone: true,
-  imports: [CommonModule, MatButtonModule, MatIconModule, TranslateModule],
-  templateUrl: './onemrva-mat-carousel.component.html',
-  animations: [
-    trigger('inOutAnimation', [
-      transition(':enter', [
-        style({ opacity: 0 }),
-        animate('800ms ease-out', style({ opacity: 1 })),
-      ]),
-      transition(':leave', [
-        style({ opacity: 1 }),
-        animate('800ms ease-in', style({ opacity: 0 })),
-      ]),
-    ]),
-  ],
-})
-export class OnemrvaMatCarouselComponent
-  implements AfterViewInit, OnInit, OnDestroy
-{
-  @ContentChildren(OnemrvaMatCarouselItemComponent)
-  items!: QueryList<OnemrvaMatCarouselItemComponent>;
-
-  nativeElement: HTMLElement;
-
-  @ViewChild('carouselWrapper')
-  carousel!: ElementRef;
-
-  private player?: AnimationPlayer;
-
-  @Input() timing = '250ms ease-in';
-  @Input() gap = 32;
-  @Input() padding = 64;
-  @Input() showControls = true;
-  @Input() autoplay = 0;
-  public currentSlide = 0;
-  carouselWrapperStyle = {};
-
-  width: number = 0;
-  private destroyed: Subject<any> = new Subject<any>();
-
-  constructor(
-    private builder: AnimationBuilder,
-    private element: ElementRef,
-    private renderer: Renderer2,
-  ) {
-    this.nativeElement = this.element.nativeElement;
-  }
-
-  ngOnInit() {
-    if (this.autoplay > 0) {
-      interval(this.autoplay)
-        .pipe(takeUntil(this.destroyed))
-        .subscribe(_i => {
-          this.next();
-        });
-    }
-  }
-
-  ngOnDestroy() {
-    this.destroyed.next(null);
-    this.destroyed.complete();
-  }
-
-  @HostListener('window:resize', ['$event'])
-  onResize(_event: any) {
-    this.width = this.nativeElement.offsetWidth - 2 * this.padding;
-    this.items.forEach(item => {
-      this.renderer.setStyle(item.nativeElement, 'width', `${this.width}px`);
-      this.renderer.setStyle(
-        item.nativeElement,
-        'margin-right',
-        `${this.gap}px`,
-      );
-      this.animate();
-    });
-  }
-
-  private buildAnimation(offset: number) {
-    return this.builder.build([
-      animate(this.timing, style({ transform: `translateX(-${offset}px)` })),
-    ]);
-  }
-
-  goto(index: number) {
-    if (index >= 0 && index < this.items.length) {
-      this.currentSlide = index;
-      this.animate();
-    }
-  }
-
-  next() {
-    //if( this.currentSlide + 1 === this.items.length ) return;
-    this.currentSlide = (this.currentSlide + 1) % this.items.length;
-    this.animate();
-  }
-
-  prev() {
-    if (this.currentSlide === 0) return;
-    this.currentSlide =
-      (this.currentSlide - 1 + this.items.length) % this.items.length;
-    this.animate();
-  }
-
-  animate() {
-    const offset = this.currentSlide * (this.width + this.gap);
-    const myAnimation: AnimationFactory = this.buildAnimation(offset);
-    this.player = myAnimation.create(this.carousel.nativeElement);
-    this.player.play();
-  }
-
-  ngAfterViewInit() {
-    this.width = this.nativeElement.offsetWidth;
-    setTimeout(() => {
-      this.onResize(null);
-    }, 10);
-  }
-
-  hasPrev() {
-    return this.items.length > 0 && this.showControls && this.currentSlide > 0;
-  }
-
-  hasNext() {
-    return (
-      this.items.length > 0 &&
-      this.showControls &&
-      this.currentSlide < this.items.length - 1
-    );
-  }
-}

package/mat-copy-to-clipboard/index.ts

@@ -1 +0,0 @@
-export * from './src/components/copy-to-clipboard.component';

package/mat-copy-to-clipboard/ng-package.json

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

package/mat-copy-to-clipboard/src/components/copy-to-clipboard.component.html

@@ -1,14 +0,0 @@
-<span class="onemrva-copy-to-clipboard-container">
-  <span #clipboardCopyContent>
-    <ng-content></ng-content>
-  </span>
-  <mat-icon class="small" (click)="copy($event)" *ngIf="!checked"
-    >content_copy</mat-icon
-  >
-  <mat-icon class="small" color="success" *ngIf="checked">check</mat-icon>
-  <span
-    [matTooltip]="tooltip"
-    matTooltipPosition="above"
-    #cccTooltip="matTooltip"
-  ></span>
-</span>

package/mat-copy-to-clipboard/src/components/copy-to-clipboard.component.ts

@@ -1,76 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  Component,
-  ElementRef,
-  EventEmitter,
-  HostListener,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import { MatIconModule } from '@angular/material/icon';
-import { Clipboard } from '@angular/cdk/clipboard';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
-
-@Component({
-  selector: 'copy-to-clipboard',
-  templateUrl: 'copy-to-clipboard.component.html',
-  styleUrls: ['copy-to-clipboard.component.scss'],
-  standalone: true,
-  imports: [CommonModule, MatIconModule, TranslateModule, MatTooltipModule],
-})
-export class OnemrvaCopyToClipboardComponent {
-  checked: boolean = false;
-
-  @ViewChild('clipboardCopyContent') content!: ElementRef;
-  @ViewChild('cccTooltip') matTooltip!: MatTooltip;
-
-  @Input()
-  tooltip: string;
-
-  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-  @Output() onCopy: EventEmitter<void> = new EventEmitter();
-  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-  @Output() onClick: EventEmitter<Event> = new EventEmitter();
-  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-  @Output() onHover: EventEmitter<Event> = new EventEmitter();
-  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-  @Output() onLeave: EventEmitter<Event> = new EventEmitter();
-
-  constructor(
-    private elt: ElementRef,
-    private translate: TranslateService,
-    private clipboard: Clipboard,
-  ) {
-    this.tooltip = this.translate.instant('copied.to.clipboard');
-  }
-
-  @HostListener('click', ['$event.target']) clicked(e: Event) {
-    this.onClick.emit(e);
-  }
-
-  @HostListener('mouseenter') onMouseEnter(e: Event) {
-    this.onHover.emit(e);
-  }
-
-  @HostListener('mouseleave') onMouseLeave(e: Event) {
-    this.onLeave.emit(e);
-  }
-
-  copy($event: any) {
-    $event.stopPropagation();
-
-    this.matTooltip.show();
-
-    this.clipboard.copy(this.content.nativeElement.innerHTML);
-
-    this.onCopy.emit();
-    this.checked = true;
-
-    setTimeout(() => {
-      this.checked = false;
-      this.matTooltip.hide();
-    }, 2000);
-  }
-}

package/mat-datepicker-header/index.ts

@@ -1,5 +0,0 @@
-/*
- * Public API Surface of mat-file upload
- */
-
-export * from './src/onemrva-mat-datepicker-header.component';

package/mat-datepicker-header/ng-package.json

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

package/mat-datepicker-header/src/_onemrva-mat-datepicker-header.component.scss

@@ -1,12 +0,0 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-
-@mixin datepickerHeader($theme) {
-  $grey900: mat.get-color-from-palette(map-get($theme, 'grayscale'), 900);
-
-  a.onemrva-calendar-header-today {
-    font-size: 12px;
-    color: $grey900;
-    text-decoration: none;
-  }
-}

package/mat-datepicker-header/src/onemrva-mat-datepicker-header.component.html

@@ -1,54 +0,0 @@
-<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>
-    <div class="mat-calendar-spacer"></div>
-
-    <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/mat-datepicker-header/src/onemrva-mat-datepicker-header.component.ts

@@ -1,283 +0,0 @@
-import { CommonModule } from '@angular/common';
-import {
-  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 OnemrvaMatDatepickerHeaderComponent<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,
-  ) {}
-
-  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/mat-file-upload/index.ts

@@ -1,11 +0,0 @@
-/*
- * 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/mat-file-upload/ng-package.json

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

package/mat-file-upload/src/components/index.ts

@@ -1,10 +0,0 @@
-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';