@onemrvapublic/design-system 0.0.0

package/projects/onemrva/design-system/mat-multi-select/src/onemrva-mat-multi-select.component.ts

@@ -0,0 +1,152 @@
+import {
+  AfterViewInit,
+  Component, ContentChildren, EventEmitter, forwardRef, HostBinding, Input, OnDestroy, OnInit, QueryList
+} from '@angular/core';
+import {FormControl, NG_VALUE_ACCESSOR} from "@angular/forms";
+import {MatFormFieldControl} from "@angular/material/form-field";
+import {TranslateService} from "@ngx-translate/core";
+import {MatOption} from "@angular/material/core";
+import {map, startWith} from "rxjs/operators";
+import {option} from "yargs";
+import {Observable} from "rxjs";
+
+let NEXT_ID = 0;
+
+@Component({
+  selector: 'onemrva-mat-multi-select',
+  templateUrl: 'onemrva-mat-multi-select.component.html',
+  providers: [
+    {
+      provide: MatFormFieldControl,
+      useExisting: OnemrvaMatMultiSelectComponent,
+      multi: false
+    },
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => OnemrvaMatMultiSelectComponent),
+      multi: true,
+    }
+    // {
+    //   provide: MatFormFieldControl,
+    //   useExisting: OnemrvaMatMultiSelectComponent,
+    // },
+    // {
+    //   provide: MAT_OPTION_PARENT_COMPONENT,
+    //   useExisting: OnemrvaMatMultiSelectComponent,
+    // },
+  ],
+})
+export class OnemrvaMatMultiSelectComponent extends MatFormFieldControl<any>
+  implements OnInit, OnDestroy, AfterViewInit
+{
+
+  counter = 0;
+  _values : any[] = [];
+  public override stateChanges : Observable<any> = new Observable<any>();
+
+  @Input()
+  formControl!: FormControl;
+
+  @Input()
+  showFilter: boolean = true;
+
+  @Input()
+  selectionToggle: boolean = true;
+
+  searchFilter: FormControl = new FormControl<string>('');
+
+  @ContentChildren(MatOption)
+  matOptions: QueryList<MatOption> = new QueryList<MatOption>();
+  matOptions$?: Observable<MatOption<any>[]>;
+
+  @HostBinding('style.opacity')
+  get opacity() {
+    return this.disabled ? 0.25 : 1;
+  }
+
+  constructor(
+    public translate: TranslateService
+  ) {
+    super();
+
+  }
+
+  // Function to call when the rating changes.
+  onChange = (values: any[]) => {
+  };
+
+  // Function to call when the input is touched (when a star is clicked).
+  onTouched = () => {};
+
+
+  // Allows Angular to update the model (rating).
+  // Update the model and changes needed for the view here.
+  writeValue(values: any[]): void {
+    if (values !== null)
+      this.counter = values.length;
+    this._values = values;
+    this.onChange(this._values);
+  }
+
+  // Allows Angular to register a function to call when the model (rating) changes.
+  // Save the function as a property to call later here.
+  registerOnChange(fn: (value: any[]) => void): void {
+    this.onChange = fn;
+  }
+
+  // Allows Angular to register a function to call when the input has been touched.
+  // Save the function as a property to call later here.
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  isAllSelected() {
+    return this.counter === this.matOptions.length;
+  }
+
+  selectAll() {
+    this._values = this.matOptions.map((option) => {
+      return option.value;
+    });
+    this.formControl.setValue(this._values);
+  }
+
+  isNoneSelected() {
+    return this.counter === 0;
+  }
+
+  deselectAll($event: MouseEvent) {
+    this._values = [];
+    this.formControl.setValue(this._values);
+  }
+
+  onContainerClick(event: MouseEvent): void {
+  }
+
+  setDescribedByIds(ids: string[]): void {
+  }
+
+  ngAfterViewInit(): void {
+  }
+
+  ngOnDestroy(): void {
+  }
+
+  ngOnInit(): void {
+    this.matOptions$ = this.searchFilter.valueChanges.pipe(
+      startWith(''),
+      map((value: string) => {
+        if (value === '') {
+          return this.matOptions.filter((o)=> {return true});
+        }
+        return this.matOptions.filter((option) => {
+          return option?._text?.nativeElement.innerHTML.toLowerCase().includes(value.toLowerCase());
+        });
+      })
+    )
+    this.formControl.valueChanges.subscribe((values) => {
+      this._values = values;
+      this.counter = this._values.length;
+    })
+  }
+}

package/projects/onemrva/design-system/mat-multi-select/src/onemrva-mat-multi-select.module.ts

@@ -0,0 +1,31 @@
+import { NgModule } from '@angular/core';
+import {CommonModule} from '@angular/common';
+import { OnemrvaMatMultiSelectComponent } from "./onemrva-mat-multi-select.component";
+import {MatSelectModule} from "@angular/material/select";
+import {FormsModule, ReactiveFormsModule} from "@angular/forms";
+import {MatInputModule} from "@angular/material/input";
+import {MatFormFieldModule} from "@angular/material/form-field";
+import {TranslateModule} from "@ngx-translate/core";
+import {MatIconModule} from "@angular/material/icon";
+import {MatSelectSearchModule} from "@onemrvapublic/design-system/mat-select-search";
+
+@NgModule({
+    declarations: [
+        OnemrvaMatMultiSelectComponent
+    ],
+  imports: [
+    CommonModule,
+    FormsModule,
+    TranslateModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    MatIconModule,
+    MatSelectSearchModule,
+    ReactiveFormsModule
+  ],
+    exports: [
+        OnemrvaMatMultiSelectComponent
+    ],
+})
+export class OnemrvaMatMultiSelectModule {}

package/projects/onemrva/design-system/mat-notification/index.ts

@@ -0,0 +1 @@
+export * from './src/onemrva-mat-notification.component';

package/projects/onemrva/design-system/mat-notification/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-notification/src/_onemrva-mat-notification.component.scss

@@ -0,0 +1,71 @@
+@use "../../utils" as utils;
+
+@mixin notification($theme) {
+  onemrva-mat-notification {
+    position: fixed;
+    top: 92px;
+    left: 0;
+    right: 0;
+    transition: max-height 400ms ease-out;
+    max-height: 100vh;
+    overflow: hidden;
+
+    .onemrva-mat-notification {
+      padding: 16px 16px 16px 40px;
+    }
+
+    .close-notification {
+      float: right;
+    }
+
+    &.collapse-notification {
+      max-height: 0;
+      border-bottom: none !important;
+    }
+
+    &:before {
+      position: absolute;
+      top: 16px;
+      left: 16px;
+      width: 26px;
+      font-family: "Material Icons";
+      font-size: 20px;
+      font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
+    }
+
+    &.mat-info {
+      background-color: utils.palette($theme, "info", 50);
+      color: utils.palette($theme, "info", 500);
+      border-bottom: 1px solid utils.palette($theme, "info", 500);
+      &:before {
+        content: "\e88e";
+      }
+    }
+    &.mat-success {
+      background-color: utils.palette($theme, "success", 50);
+      color: utils.palette($theme, "success", 600);
+      border-bottom: 1px solid utils.palette($theme, "success", 600);
+      &:before {
+        content: "\e86c";
+      }
+    }
+    &.mat-warn {
+      background-color: utils.palette($theme, "warn", 50);
+      color: utils.palette($theme, "warn", 600);
+      border-bottom: 1px solid utils.palette($theme, "warn", 600);
+
+      &:before {
+        content: "\e002";
+      }
+    }
+    &.mat-error {
+      background-color: utils.palette($theme, "error", 50);
+      color: utils.palette($theme, "error", 500);
+      border-bottom: 1px solid utils.palette($theme, "error", 500);
+
+      &:before {
+        content: "\e000";
+      }
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+<div class="onemrva-mat-notification">
+  <span [innerHtml]="message | translate"></span>
+  <mat-icon
+    class="close-notification"
+    (click)="closeNotification()"
+    *ngIf="closable || isSmall"
+  >
+    close
+  </mat-icon>
+</div>

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

@@ -0,0 +1,158 @@
+import {
+  BreakpointObserver,
+  Breakpoints,
+  BreakpointState,
+} from '@angular/cdk/layout';
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnDestroy,
+  Output,
+} from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
+import { Subject, takeUntil } from 'rxjs';
+
+@Component({
+  selector: 'onemrva-mat-notification',
+  templateUrl: 'onemrva-mat-notification.component.html',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, MatIconModule],
+})
+export class OnemrvaMatNotificationComponent implements OnDestroy {
+  @Input() message: string = 'Missing message';
+  @Input() closable: boolean = true;
+
+  _isOpen = true;
+
+  @Output()
+  notificationClose: EventEmitter<void> = new EventEmitter();
+
+  /** @hidden @internal */
+  @HostBinding('class.collapse-notification')
+  public get _closed(): boolean {
+    return !this._isOpen;
+  }
+
+  @HostBinding('attr.id')
+  @Input()
+  public id = `onemrva-mat-notification`;
+
+  @HostBinding('attr.data-cy')
+  @Input()
+  dataCy: string = 'onemrva-mat-notification';
+
+  /**
+   * Returns the `aria-label` attribute of the component.
+   *
+   * @example
+   * ```typescript
+   * let ariaLabel = this.avatar.ariaLabel;
+   * ```
+   *
+   */
+  @HostBinding('attr.aria-live')
+  public ariaLive = 'assertive';
+
+  /**
+   * Returns the `role` attribute of the component.
+   *
+   * @example
+   * ```typescript
+   * let avatarRole = this.avatar.role;
+   * ```
+   */
+  @HostBinding('attr.role')
+  public role = 'alert';
+
+  /**
+   * @hidden
+   * @internal
+   */
+  private _color: OnemrvaMatColor = OnemrvaMatColor.INFO;
+
+  /**
+   * Returns the color of the avatar.
+   *
+   * @example
+   * ```typescript
+   * let avatarSize = this.avatar.size;
+   * ```
+   */
+  @Input()
+  public get color(): OnemrvaMatColor {
+    return this._color;
+  }
+
+  /**
+   * Sets the component color.
+   *
+   * @example
+   * ```html
+   * <onemrva-mat-notification color="primary"></onemrva-mat-notification>
+   * ```
+   */
+  public set color(value: OnemrvaMatColor) {
+    switch (value) {
+      case OnemrvaMatColor.SUCCESS:
+      case OnemrvaMatColor.WARN:
+      case OnemrvaMatColor.INFO:
+      case OnemrvaMatColor.ERROR:
+        this._color = value;
+        break;
+      default:
+        this._color = OnemrvaMatColor.INFO;
+    }
+  }
+
+  /** @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-info')
+  public get _isInfo(): boolean {
+    return this.color === OnemrvaMatColor.INFO;
+  }
+
+  private destroyNotifier$: Subject<void> = new Subject();
+  isSmall = false;
+
+  constructor(public breakpointObserver: BreakpointObserver) {
+    this.breakpointObserver
+      .observe([Breakpoints.XSmall, Breakpoints.Small])
+      .pipe(takeUntil(this.destroyNotifier$))
+      .subscribe((state: BreakpointState) => {
+        if (state.matches) {
+          this.isSmall = true;
+        } else {
+          this.isSmall = false;
+        }
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroyNotifier$.next();
+    this.destroyNotifier$.complete();
+  }
+
+  closeNotification() {
+    this._isOpen = false;
+    this.notificationClose.emit();
+  }
+}

package/projects/onemrva/design-system/mat-paginator/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Public API Surface of mat-paginator
+ */
+
+export * from './src/onemrva-mat-paginator.module';
+export * from './src/onemrva-mat-paginator.component';

package/projects/onemrva/design-system/mat-paginator/ng-package.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "index.ts"
+    },
+    "assets": ["./_index.scss", "./_utils.scss"]
+}

package/projects/onemrva/design-system/mat-paginator/package.json

@@ -0,0 +1,7 @@
+{
+    "exports": {
+        ".": {
+            "sass": "./_index.scss"
+        }
+    }
+}

package/projects/onemrva/design-system/mat-paginator/src/_onemrva-mat-paginator.component.scss

@@ -0,0 +1,122 @@
+@use "../../utils" as utils;
+
+@mixin paginator($theme) {
+  onemrva-mat-paginator {
+    // Get the primary color palette from the color-config.
+    $primary: utils.palette($theme, "primary");
+    $dark-primary: utils.palette(
+      $theme,
+      "primary",
+      700
+    ); // HWKTODO accent instead?
+
+    $gradient: utils.gradient($theme);
+    $accent: utils.palette($theme, "accent");
+    $dark-accent: utils.palette($theme, "accent", 700);
+
+    $disabled: utils.palette($theme, "grayscale");
+
+    $field-divider: utils.palette($theme, "grayscale", 700);
+    $divider: utils.palette($theme, "grayscale", 900, 0.12);
+
+    .onemrva-mat-paginator {
+      display: flex;
+
+      button {
+        background-color: white;
+        padding: 8px 0;
+        text-align: center;
+        border: 1px solid $divider;
+        border-right: none;
+        color: $primary;
+        transition: all 200ms;
+        line-height: 20px;
+        width: 36px;
+
+        &:disabled {
+          color: $disabled;
+        }
+
+        &.onemrva-mat-paginator-btn {
+          font-family: "Poppins";
+          font-size: 14px;
+        }
+
+        &:first-child {
+          border-radius: 18px 0 0 18px;
+          width: initial;
+          padding: 8px 16px;
+        }
+
+        &:last-child {
+          border-radius: 0 18px 18px 0;
+          border-right: 1px solid $divider;
+          width: initial;
+          padding: 8px 16px;
+        }
+
+        &:hover:not(:disabled):not(.onemrva-mat-paginator-current-index) {
+          background: $gradient;
+          color: white;
+          cursor: pointer;
+        }
+
+        &.onemrva-mat-paginator-current-index {
+          background: $gradient;
+          color: white;
+        }
+      }
+    }
+  }
+
+  .paginator-container {
+    display: flex;
+    align-items: baseline;
+
+    .paginator-size-selector-container {
+      flex: 1 0 200px;
+      display: flex;
+      align-items: baseline;
+      justify-content: flex-start;
+      gap: 16px;
+
+      mat-divider {
+        display: inline-block;
+        vertical-align: middle;
+        margin: 0 8px;
+        height: 24px;
+      }
+
+      .paginator-size-selector {
+        .mat-mdc-select-arrow-wrapper {
+          transform: translateY(8%);
+
+          .mat-mdc-select-arrow {
+            color: utils.palette($theme, "primary");
+          }
+        }
+
+        .mdc-notched-outline {
+          border: 1px solid utils.palette($theme, "grayscale", 200);
+          border-radius: 500px;
+        }
+
+        .mdc-notched-outline__leading,
+        .mdc-notched-outline__trailing,
+        .mdc-notched-outline__notch {
+          border: none;
+        }
+
+        .mat-mdc-text-field-wrapper {
+          height: 38px;
+        }
+
+        .mat-mdc-form-field-infix {
+          padding: 4px 0 0;
+          width: 40px;
+          height: 18px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,104 @@
+<div class="paginator-container">
+  <div class="paginator-size-selector-container" *ngIf="pageSizeSelector">
+    <mat-form-field
+      appearance="outline"
+      class="paginator-size-selector"
+      data-cy="onemrva-mat-paginator-page-size-selector"
+    >
+      <mat-select [value]="pageSizeDefaultOption">
+        <mat-option
+          *ngFor="let size of pageSizeOptions"
+          [value]="size"
+          (click)="pageSize = size"
+          [attr.data-cy]="'onemrva-mat-paginator-page-size-option-' + size"
+          >{{ size }}</mat-option
+        >
+      </mat-select>
+    </mat-form-field>
+    <div>
+      <span style="display: inline-block">{{
+        "paginator." + recordKey | translate
+      }}</span>
+      <mat-divider vertical></mat-divider>
+
+      {{ pageIndex * pageSize + 1 }} - {{ maxRecordNumber }}
+      <span>{{ "paginator.outOf" | translate }}</span>
+      {{ length }}
+    </div>
+  </div>
+
+  <div class="onemrva-mat-paginator" data-cy="onemrva-mat-paginator">
+    <button
+      type="button"
+      class="onemrva-mat-paginator-btn onemrva-mat-paginator-btn-previous"
+      data-cy="onemrva-mat-paginator-btn-previous"
+      [disabled]="pageIndex === 0"
+      (click)="pageIndex = pageIndex - 1"
+    >
+      {{ "paginator." + previousKey | translate }}
+    </button>
+
+    <button
+      type="button"
+      class="onemrva-mat-paginator-btn onemrva-mat-paginator-first"
+      data-cy="onemrva-mat-paginator-first"
+      *ngIf="pages[0] > 0 && type === 'complex'"
+      (click)="pageIndex = 0"
+    >
+      1
+    </button>
+
+    <button
+      type="button"
+      class="onemrva-mat-paginator-btn onemrva-mat-paginator-btn-too-many"
+      data-cy="onemrva-mat-paginator-btn-too-many-before"
+      *ngIf="pages[0] > 0"
+      (click)="pageIndex = pageIndex - numberOfReachablePages"
+    >
+      ...
+    </button>
+
+    <button
+      type="button"
+      class="onemrva-mat-paginator-btn onemrva-mat-paginator-btn-page"
+      [ngClass]="{ 'onemrva-mat-paginator-current-index': pageIndex === page }"
+      data-cy="onemrva-mat-paginator-btn-page"
+      *ngFor="let page of pages"
+      (click)="pageIndex = page"
+    >
+      {{ page + 1 }}
+    </button>
+
+    <button
+      type="button"
+      class="onemrva-mat-paginator-btn onemrva-mat-paginator-btn-too-many"
+      data-cy="onemrva-mat-paginator-btn-too-many-after"
+      *ngIf="pages[pages.length - 1] < totalNumberOfPages - 1"
+      (click)="pageIndex = pageIndex + numberOfReachablePages"
+    >
+      ...
+    </button>
+
+    <button
+      type="button"
+      class="onemrva-mat-paginator-btn onemrva-mat-paginator-btn-last"
+      data-cy="onemrva-mat-paginator-btn-last"
+      *ngIf="
+        pages[pages.length - 1] < totalNumberOfPages - 1 && type === 'complex'
+      "
+      (click)="pageIndex = totalNumberOfPages - 1"
+    >
+      {{ totalNumberOfPages }}
+    </button>
+
+    <button
+      type="button"
+      class="onemrva-mat-paginator-btn onemrva-mat-paginator-btn-next"
+      data-cy="onemrva-mat-paginator-btn-next"
+      [disabled]="pageIndex >= totalNumberOfPages - 1"
+      (click)="pageIndex = pageIndex + 1"
+    >
+      {{ "paginator." + nextKey | translate }}
+    </button>
+  </div>
+</div>