@onemrvapublic/design-system 0.0.0

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

@@ -0,0 +1,122 @@
+import {
+  AfterContentInit,
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  HostBinding,
+  Input,
+} from '@angular/core';
+import { OnemrvaMatPanelTitleComponent } from './onemrva-mat-panel-title.component';
+import { OnemrvaMatPanelContentComponent } from './onemrva-mat-panel-content.component';
+import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
+import { OnemrvaMatPanelIconComponent } from './onemrva-mat-panel-icon.component';
+
+let NEXT_ID = 0;
+
+@Component({
+  selector: 'onemrva-mat-panel',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './onemrva-mat-panel.component.html',
+})
+export class OnemrvaMatPanelComponent
+  implements AfterContentInit, AfterViewInit
+{
+  @HostBinding('attr.id')
+  @Input()
+  public id = `onemrva-mat-panel-${NEXT_ID++}`;
+
+  @HostBinding('attr.data-cy')
+  @Input()
+  data_cy: string = 'onemrva-mat-panel';
+
+  @HostBinding('class.mat-disabled')
+  @Input()
+  disabled: boolean = false;
+
+  @ContentChild(OnemrvaMatPanelTitleComponent)
+  title?: OnemrvaMatPanelTitleComponent;
+  @ContentChild(OnemrvaMatPanelContentComponent)
+  content?: OnemrvaMatPanelContentComponent;
+
+  @HostBinding('class.has-icon')
+  @ContentChild(OnemrvaMatPanelIconComponent)
+  icon?: OnemrvaMatPanelIconComponent;
+
+  error?: string;
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  ngAfterContentInit() {
+    if (!this.title) {
+      this.error =
+        "Missing title in mat-panel: When using onemrva-mat-panel, you're supposed to use onemrva-mat-panel-title to display the title";
+    }
+  }
+
+  ngAfterViewInit() {
+    this.cd.detectChanges();
+  }
+
+  /**
+   * @hidden
+   * @internal
+   */
+  private _color: OnemrvaMatColor = OnemrvaMatColor.NONE;
+
+  /**
+   *
+   * @param value
+   */
+  public set color(value: OnemrvaMatColor) {
+    this._color = value;
+  }
+
+  /** @hidden @internal */
+  @HostBinding('class.mat-accent')
+  public get _colorAccent(): boolean {
+    return this.color === OnemrvaMatColor.ACCENT;
+  }
+
+  /** @hidden @internal */
+  @HostBinding('class.mat-primary')
+  public get _isPrimary(): boolean {
+    return this.color === OnemrvaMatColor.PRIMARY;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-accent')
+  public get _isAccent(): 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-info')
+  public get _isInfo(): boolean {
+    return this.color === OnemrvaMatColor.INFO;
+  }
+  /** @hidden @internal */
+  @HostBinding('class.mat-grayscale')
+  public get _isGrayscale(): boolean {
+    return this.color === OnemrvaMatColor.GRAYSCALE;
+  }
+
+  @Input()
+  public get color(): OnemrvaMatColor {
+    return this._color;
+  }
+}

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

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { OnemrvaMatPanelComponent } from './onemrva-mat-panel.component';
+import { OnemrvaMatPanelTitleComponent } from './onemrva-mat-panel-title.component';
+import { OnemrvaMatPanelContentComponent } from './onemrva-mat-panel-content.component';
+import { CommonModule } from '@angular/common';
+import { OnemrvaMatPanelTitleActionComponent } from './onemrva-mat-panel-title-action.component';
+import {OnemrvaMatPanelIconComponent} from "./onemrva-mat-panel-icon.component";
+
+@NgModule({
+    declarations: [
+        OnemrvaMatPanelComponent,
+        OnemrvaMatPanelTitleComponent,
+        OnemrvaMatPanelContentComponent,
+        OnemrvaMatPanelTitleActionComponent,
+        OnemrvaMatPanelIconComponent,
+    ],
+    imports: [CommonModule],
+    exports: [
+        OnemrvaMatPanelComponent,
+        OnemrvaMatPanelTitleComponent,
+        OnemrvaMatPanelContentComponent,
+        OnemrvaMatPanelTitleActionComponent,
+        OnemrvaMatPanelIconComponent,
+    ],
+})
+export class OnemrvaMatPanelModule {}

package/projects/onemrva/design-system/mat-pop-over/index.ts

@@ -0,0 +1,4 @@
+export * from './src/onemrva-mat-pop-over.module';
+export * from './src/onemrva-mat-pop-over.component';
+export * from './src/onemrva-mat-pop-over-content.component';
+export * from './src/onemrva-mat-pop-over-trigger.component';

package/projects/onemrva/design-system/mat-pop-over/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-pop-over/src/onemrva-mat-pop-over-content.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
+
+let index = 0;
+
+@Component({
+  selector: 'onemrva-mat-pop-over-content',
+  template: '<ng-template><ng-content></ng-content></ng-template>',
+})
+export class OnemrvaMatPopOverContentComponent {
+  @Input() dataCy: string = `onemrvaMatPopOverContent_${++index}`;
+
+  @ViewChild(TemplateRef) template?: TemplateRef<any>;
+}

package/projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over-trigger.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input, TemplateRef, ViewChild } from '@angular/core';
+
+let index = 0;
+
+@Component({
+  selector: 'onemrva-mat-pop-over-trigger',
+  template: '<ng-template><ng-content></ng-content></ng-template>',
+})
+export class OnemrvaMatPopOverTriggerComponent {
+  @Input() dataCy: string = `onemrvaMatPopOverTrigger_${++index}`;
+
+  @ViewChild(TemplateRef) template?: TemplateRef<any>;
+}

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

@@ -0,0 +1,29 @@
+<div class="onemrva-pop-over">
+  <div class="onemrva-overlay" *ngIf="isOpen" (click)="closePopOver()"></div>
+  <a
+    class="onemrva-pop-over-trigger"
+    *ngIf="trigger?.template as trigger"
+    (click)="togglePopOver()"
+    [attr.data-cy]="dataCyTrigger"
+    role="button"
+    [attr.aria-expanded]="isOpen"
+    [id]="poId"
+  >
+    <ng-container *ngTemplateOutlet="trigger"></ng-container>
+  </a>
+
+  <ng-container *ngIf="isOpen">
+    <div
+      class="onemrva-pop-over-frame"
+      [ngClass]="position"
+      *ngIf="content?.template as content"
+      [attr.data-cy]="dataCyPo"
+      role="region"
+      [attr.aria-labelledby]="poId"
+    >
+      <div class="onemrva-pop-over-content" [ngClass]="position">
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </div>
+    </div>
+  </ng-container>
+</div>

package/projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over.component.scss

@@ -0,0 +1,141 @@
+.onemrva-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: transparent;
+  z-index: 10;
+}
+
+.onemrva-pop-over {
+  position: relative;
+  display: inline-block;
+
+  .onemrva-pop-over-frame {
+    z-index: 20;
+    position: absolute;
+
+    &.bottom-left {
+      right: 0;
+    }
+
+    &.top-left {
+      right: 0;
+      bottom: 1.5rem;
+    }
+
+    &.top-right {
+      bottom: 1.5rem;
+    }
+  }
+}
+
+.onemrva-pop-over-content {
+  padding: 16px;
+  box-sizing: border-box;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.32);
+  border-radius: 4px;
+  width: 32rem;
+  background-color: white;
+  margin: 16px 0;
+  position: relative;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+  }
+
+  &:after,
+  &:before {
+    position: absolute;
+    content: "";
+    display: inline-block;
+    height: 0;
+    width: 0;
+  }
+
+  &.bottom-right {
+    &:before {
+      border-right: 9px solid transparent;
+      border-bottom: 9px solid lightGrey;
+      border-left: 9px solid transparent;
+
+      top: -9px;
+      left: 15px;
+    }
+
+    &:after {
+      border-right: 8px solid transparent;
+      border-bottom: 8px solid white;
+      border-left: 8px solid transparent;
+
+      top: -8px;
+      left: 16px;
+    }
+  }
+
+  &.bottom-left {
+    &:before {
+      border-right: 9px solid transparent;
+      border-bottom: 9px solid lightGrey;
+      border-left: 9px solid transparent;
+
+      top: -9px;
+      right: 15px;
+    }
+
+    &:after {
+      border-right: 8px solid transparent;
+      border-bottom: 8px solid white;
+      border-left: 8px solid transparent;
+
+      top: -8px;
+      right: 16px;
+    }
+  }
+
+  &.top-left {
+    &:before {
+      border-right: 9px solid transparent;
+      border-top: 9px solid lightGrey;
+      border-left: 9px solid transparent;
+
+      bottom: -9px;
+      right: 15px;
+    }
+
+    &:after {
+      border-right: 8px solid transparent;
+      border-top: 8px solid white;
+      border-left: 8px solid transparent;
+
+      bottom: -8px;
+      right: 16px;
+    }
+  }
+
+  &.top-right {
+    &:before {
+      border-right: 9px solid transparent;
+      border-top: 9px solid lightGrey;
+      border-left: 9px solid transparent;
+
+      bottom: -9px;
+      left: 15px;
+    }
+
+    &:after {
+      border-right: 8px solid transparent;
+      border-top: 8px solid white;
+      border-left: 8px solid transparent;
+
+      bottom: -8px;
+      left: 16px;
+    }
+  }
+}

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

@@ -0,0 +1,47 @@
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Component,
+  ContentChild,
+  Input,
+  ViewChild,
+} from '@angular/core';
+import { OnemrvaMatPopOverTriggerComponent } from './onemrva-mat-pop-over-trigger.component';
+import { OnemrvaMatPopOverContentComponent } from './onemrva-mat-pop-over-content.component';
+
+@Component({
+  selector: 'onemrva-mat-pop-over',
+  styleUrls: ['./onemrva-mat-pop-over.component.scss'],
+  templateUrl: 'onemrva-mat-pop-over.component.html',
+})
+export class OnemrvaMatPopOverComponent implements AfterViewInit {
+  isOpen: boolean = false;
+
+  @Input() position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' =
+    'bottom-right';
+
+  @Input() dataCyTrigger: string = 'onemrva-po-trigger';
+  @Input() dataCyPo: string = 'onemrva-po';
+
+  @Input() poId: string = this.dataCyPo; // HTML id for the trigger
+
+  @ContentChild(OnemrvaMatPopOverTriggerComponent)
+  trigger?: OnemrvaMatPopOverTriggerComponent;
+
+  @ContentChild(OnemrvaMatPopOverContentComponent)
+  content?: OnemrvaMatPopOverContentComponent;
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  ngAfterViewInit(): void {
+    this.cd.detectChanges();
+  }
+
+  togglePopOver() {
+    this.isOpen = !this.isOpen;
+  }
+
+  closePopOver() {
+    this.isOpen = false;
+  }
+}

package/projects/onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over.module.ts

@@ -0,0 +1,19 @@
+import { OverlayModule } from '@angular/cdk/overlay';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { OnemrvaMatPopOverComponent } from './onemrva-mat-pop-over.component';
+import { OnemrvaMatPopOverContentComponent } from './onemrva-mat-pop-over-content.component';
+import { OnemrvaMatPopOverTriggerComponent } from './onemrva-mat-pop-over-trigger.component';
+
+const components = [
+  OnemrvaMatPopOverComponent,
+  OnemrvaMatPopOverContentComponent,
+  OnemrvaMatPopOverTriggerComponent,
+];
+
+@NgModule({
+  declarations: [...components],
+  imports: [CommonModule, OverlayModule],
+  exports: [...components],
+})
+export class OnemrvaMatPopOverModule {}

package/projects/onemrva/design-system/mat-progress-bar/index.ts

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

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

@@ -0,0 +1,37 @@
+@use "../../utils" as utils;
+
+// source: https://medium.com/nerd-for-tech/beautiful-spinner-in-css-bce7a348f50f
+
+@mixin progressBar($theme) {
+  $primary: utils.palette($theme, "primary");
+  $lightGray: utils.palette($theme, "grayscale", 100);
+  $success: utils.palette($theme, "success");
+
+  onemrva-mat-progress-bar {
+    display: block;
+  }
+
+  .onemrva-progress-bar-label {
+    font-size: 14px;
+  }
+
+  .onemrva-progress-bar-outer {
+    height: 3px;
+    border-radius: 500px;
+    box-sizing: border-box;
+    overflow: hidden;
+    background-color: $lightGray;
+
+    .onemrva-progress-bar-inner {
+      background-color: $primary;
+      height: 3px;
+      box-sizing: border-box;
+      border-radius: 500px;
+      transition: width 300ms ease-out;
+
+      &.progress-success {
+        background-color: $success;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+<div class="onemrva-progress-bar">
+  <label class="onemrva-progress-bar-label">{{ label$ | async }}</label>
+
+  <div class="onemrva-progress-bar-outer mt-s" #onemrvaProgressBar>
+    <div
+      class="onemrva-progress-bar-inner"
+      [ngStyle]="{ width: progress$ | async }"
+      [ngClass]="{ 'progress-success': (value$ | async)! >= 100 }"
+      [attr.data-cy]="dataCy"
+      [attr.value]="progress$ | async"
+    ></div>
+  </div>
+</div>

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

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, OnInit } from '@angular/core';
+import { map, Observable } from 'rxjs';
+
+@Component({
+  selector: 'onemrva-mat-progress-bar',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: 'onemrva-mat-progress-bar.component.html',
+})
+export class OnemrvaMatProgressBarComponent implements OnInit {
+  @Input() label$?: Observable<string>;
+  @Input() value$!: Observable<number>;
+  @Input() dataCy: string = 'onemrva-mat-progress-bar';
+
+  progress$!: Observable<string>;
+
+  ngOnInit() {
+    this.progress$ = this.value$.pipe(
+      map((v) => (v < 0 ? '0%' : v > 100 ? '100%' : v + '%'))
+    );
+
+    if (!this.label$) {
+      this.label$ = this.progress$;
+    }
+  }
+}

package/projects/onemrva/design-system/mat-select-search/index.ts

@@ -0,0 +1,3 @@
+export * from './src/mat-select-search.component';
+export * from './src/mat-select-search.module';
+export * from './src/default-options';

package/projects/onemrva/design-system/mat-select-search/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-select-search/src/default-options.ts

@@ -0,0 +1,42 @@
+import { InjectionToken } from '@angular/core';
+import { MatSelectSearchComponent } from './mat-select-search.component';
+
+/** List of inputs of NgxMatSelectSearchComponent that can be configured with a global default. */
+export const configurableDefaultOptions = [
+  'ariaLabel',
+  'clearSearchInput',
+  'closeIcon',
+  'closeSvgIcon',
+  'disableInitialFocus',
+  'disableScrollToActiveOnOptionsChanged',
+  'enableClearOnEscapePressed',
+  'hideClearSearchButton',
+  'noEntriesFoundLabel',
+  'placeholderLabel',
+  'preventHomeEndKeyPropagation',
+  'searching',
+] as const;
+
+export type ConfigurableDefaultOptions = typeof configurableDefaultOptions[number];
+
+/**
+ * InjectionToken that can be used to specify global options. e.g.
+ *
+ * ```typescript
+ * providers: [
+ *   {
+ *     provide: MAT_SELECTSEARCH_DEFAULT_OPTIONS,
+ *     useValue: <MatSelectSearchOptions>{
+ *       closeIcon: 'delete',
+ *       noEntriesFoundLabel: 'No options found'
+ *     }
+ *   }
+ * ]
+ * ```
+ *
+ * See the corresponding inputs of `MatSelectSearchComponent` for documentation.
+ */
+export const MAT_SELECTSEARCH_DEFAULT_OPTIONS = new InjectionToken<MatSelectSearchOptions>('mat-selectsearch-default-options');
+
+/** Global configurable options for MatSelectSearch. */
+export type MatSelectSearchOptions = Readonly<Partial<Pick<MatSelectSearchComponent, ConfigurableDefaultOptions>>>;

package/projects/onemrva/design-system/mat-select-search/src/mat-select-no-entries-found.directive.ts

@@ -0,0 +1,15 @@
+import { Directive } from '@angular/core';
+
+/**
+ * Directive for providing a custom no entries found element.
+ * e.g.
+ * <ngx-mat-select-search [formControl]="bankFilterCtrl">
+ *   <span matSelectNoEntriesFound>
+ *     No entries found <button>Add</button>
+ *   </span>
+ * </ngx-mat-select-search>
+ */
+@Directive({
+  selector: '[matSelectNoEntriesFound]'
+})
+export class MatSelectNoEntriesFoundDirective {}

package/projects/onemrva/design-system/mat-select-search/src/mat-select-search-clear.directive.ts

@@ -0,0 +1,13 @@
+import { Directive } from '@angular/core';
+
+/**
+ * Directive for providing a custom clear-icon.
+ * e.g.
+ * <ngx-mat-select-search [formControl]="bankFilterCtrl">
+ *   <mat-icon matSelectSearchClear>delete</mat-icon>
+ * </ngx-mat-select-search>
+ */
+@Directive({
+    selector: '[matSelectSearchClear]'
+})
+export class MatSelectSearchClearDirective {}

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

@@ -0,0 +1,67 @@
+<!--
+Copyright (c) 2018 Bithost GmbH All Rights Reserved.
+
+Use of this source code is governed by an MIT-style license that can be
+found in the LICENSE file at https://angular.io/license
+-->
+<!-- Placeholder to adjust vertical offset of the mat-option elements -->
+<input matInput class="mat-select-search-input mat-select-search-hidden"/>
+
+<!-- Note: the  mat-datepicker-content mat-tab-header are needed to inherit the material theme colors, see PR #22 -->
+<div
+      #innerSelectSearch
+      class="mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header"
+      [ngClass]="{'mat-select-search-inner-multiple': matSelect.multiple, 'mat-select-search-inner-toggle-all': _isToggleAllCheckboxVisible() }">
+
+  <mat-checkbox *ngIf="_isToggleAllCheckboxVisible()"
+                [color]="matFormField.color"
+                class="mat-select-search-toggle-all-checkbox"
+                [checked]="toggleAllCheckboxChecked"
+                [indeterminate]="toggleAllCheckboxIndeterminate"
+                [matTooltip]="toggleAllCheckboxTooltipMessage"
+                matTooltipClass="ngx-mat-select-search-toggle-all-tooltip"
+                [matTooltipPosition]="toggleAllCheckboxTooltipPosition"
+                (change)="_emitSelectAllBooleanToParent($event.checked)"
+  ></mat-checkbox>
+
+  <input class="mat-select-search-input"
+         autocomplete="off"
+         [type]="type"
+         [formControl]="_formControl"
+         #searchSelectInput
+         (keydown)="_handleKeydown($event)"
+         (keyup)="_handleKeyup($event)"
+         (blur)="onBlur()"
+         [placeholder]="placeholderLabel"
+         [attr.aria-label]="ariaLabel"
+  />
+  <mat-icon  *ngIf="value =='' && !searching" class="suffix">search</mat-icon>
+  <mat-spinner *ngIf="searching"
+          class="mat-select-search-spinner"
+          diameter="16"></mat-spinner>
+
+  <button *ngIf="!hideClearSearchButton && value && !searching"
+          mat-icon-button
+          aria-label="Clear"
+          (click)="_reset(true)"
+          class="mat-select-search-clear">
+    <ng-content *ngIf="clearIcon; else defaultIcon" select="[matSelectSearchClear]"></ng-content>
+    <ng-template #defaultIcon>
+      <mat-icon [svgIcon]="closeSvgIcon">
+        {{!closeSvgIcon ? closeIcon : null}}
+      </mat-icon>
+    </ng-template>
+  </button>
+
+  <ng-content select=".mat-select-search-custom-header-content"></ng-content>
+
+  <mat-divider></mat-divider>
+</div>
+
+<div *ngIf="_showNoEntriesFound$ | async"
+     class="mat-select-search-no-entries-found">
+  <ng-content *ngIf="noEntriesFound; else defaultNoEntriesFound"
+              select="[matSelectNoEntriesFound]"></ng-content>
+  <ng-template #defaultNoEntriesFound>{{noEntriesFoundLabel}}</ng-template>
+</div>
+