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

package/mat-select-search/src/mat-select-search.module.ts

@@ -1,52 +0,0 @@
-/**
- * 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
- */
-
-import { NgModule } from '@angular/core';
-import { MatSelectSearchComponent } from './mat-select-search.component';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatIconModule } from '@angular/material/icon';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { CommonModule } from '@angular/common';
-
-import { MatSelectSearchClearDirective } from './mat-select-search-clear.directive';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatSelectNoEntriesFoundDirective } from './mat-select-no-entries-found.directive';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatSelectModule } from '@angular/material/select';
-import { MatFormFieldModule } from '@angular/material/form-field';
-
-export const MatSelectSearchVersion = '7.0.2';
-export { MatSelectSearchClearDirective };
-export { MatSelectNoEntriesFoundDirective };
-
-@NgModule({
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    MatButtonModule,
-    MatSelectModule,
-    MatCheckboxModule,
-    MatIconModule,
-    MatProgressSpinnerModule,
-    MatTooltipModule,
-    MatDividerModule,
-    MatFormFieldModule,
-  ],
-  declarations: [
-    MatSelectSearchComponent,
-    MatSelectSearchClearDirective,
-    MatSelectNoEntriesFoundDirective,
-  ],
-  exports: [
-    MatSelectSearchComponent,
-    MatSelectSearchClearDirective,
-    MatSelectNoEntriesFoundDirective,
-  ],
-})
-export class MatSelectSearchModule {}

package/mat-selectable-box/index.ts

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

package/mat-selectable-box/ng-package.json

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

package/mat-selectable-box/src/onemrva-mat-selectable-box.component.ts

@@ -1,99 +0,0 @@
-import {
-  AfterViewInit,
-  ChangeDetectorRef,
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core';
-import { MatRadioButton, MatRadioChange } from '@angular/material/radio';
-
-@Component({
-  selector: 'onemrva-mat-selectable-box',
-  template: ` <mat-card
-    class="m onemrva-shadow-highlight"
-    [class.primary]="!isChecked()"
-    [class.selected]="isChecked()"
-    (click)="triggerRadioClick()"
-  >
-    <mat-card-title
-      class="selectablebox-title"
-      [class.primary]="!isChecked()"
-      [class.selected]="isChecked()"
-    >
-      <mat-radio-button
-        #radioButton
-        (change)="valueChanged($event)"
-        aria-label="Selected"
-        [checked]="checked"
-        [disabled]="disabled"
-        [value]="value"
-      >
-      </mat-radio-button>
-
-      <mat-label [class.disabled]="disabled">
-        <ng-content select="[title]"></ng-content>
-        <mat-icon class="selectable-box-icon" color="primary">
-          <ng-content select="[icon]"></ng-content>
-        </mat-icon>
-      </mat-label>
-
-      <ng-content select="[sticker]"></ng-content>
-    </mat-card-title>
-
-    <mat-card-content
-      [class.primary]="!isChecked()"
-      [class.selected]="isChecked()"
-    >
-      <ng-content></ng-content>
-    </mat-card-content>
-  </mat-card>`,
-})
-export class OnemrvaMatSelectableBoxComponent implements AfterViewInit {
-  @ViewChild('radioButton')
-  radioButton: MatRadioButton | undefined;
-
-  @Input()
-  value: string = '';
-
-  @Input()
-  disabled = false;
-
-  @Input()
-  checked = false;
-
-  // eslint-disable-next-line @angular-eslint/no-output-native
-  @Output() change = new EventEmitter<MatRadioChange>();
-
-  valueChanged(event: MatRadioChange) {
-    this.change.emit(event);
-  }
-
-  constructor(private changeDetectorRef: ChangeDetectorRef) {}
-
-  ngAfterViewInit() {
-    this.changeDetectorRef.detectChanges();
-  }
-
-  isChecked() {
-    return (
-      this.radioButton?._inputElement.nativeElement.checked ?? this.checked
-    );
-  }
-
-  triggerRadioClick() {
-    if (
-      this.radioButton &&
-      !this.radioButton.checked &&
-      !this.radioButton.disabled
-    ) {
-      // https://v11.material.angular.io/components/radio/api
-      // Changing checked prop does not trigger a change event on the button or radiogroup,
-      // only on user-interaction. Workaround trigger/simulate a click event.
-      this.radioButton._inputElement.nativeElement.dispatchEvent(
-        new MouseEvent('click', { bubbles: false }),
-      );
-    }
-  }
-}

package/mat-selectable-box/src/onemrva-mat-selectable-box.module.ts

@@ -1,30 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-import { OnemrvaMatSelectableBoxComponent } from './onemrva-mat-selectable-box.component';
-import { FormsModule } from '@angular/forms';
-import { TranslateModule } from '@ngx-translate/core';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
-import { MatInputModule } from '@angular/material/input';
-import { MatIconModule } from '@angular/material/icon';
-import { MatCardModule } from '@angular/material/card';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatChipsModule } from '@angular/material/chips';
-
-@NgModule({
-  declarations: [OnemrvaMatSelectableBoxComponent],
-  imports: [
-    CommonModule,
-    FormsModule,
-    TranslateModule,
-    MatFormFieldModule,
-    MatSelectModule,
-    MatInputModule,
-    MatIconModule,
-    MatCardModule,
-    MatRadioModule,
-    MatChipsModule,
-  ],
-  exports: [OnemrvaMatSelectableBoxComponent],
-})
-export class OnemrvaMatSelectableBoxModule {}

package/mat-side-menu/index.ts

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

package/mat-side-menu/ng-package.json

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

package/mat-side-menu/src/onemrva-mat-side-menu.component.html

@@ -1,36 +0,0 @@
-<mat-chip-row
-  *ngIf="isSmall; else sideMenu"
-  class="onemrva-side-menu"
-  role="navigation"
->
-  <mat-chip
-    role=""
-    *ngFor="let menu of menus; let i = index"
-    class="onemrva-side-menu-option"
-    (click)="selectMenu(menu)"
-    [ngClass]="{
-      'onemrva-side-menu-current-option':
-        menu.path === currentMenu || menu.key === currentMenu
-    }"
-    [attr.data-cy]="'onemrva-side-menu-chip-option_' + i"
-  >
-    {{ menu.wordingKey | translate }}
-  </mat-chip>
-</mat-chip-row>
-<ng-template #sideMenu>
-  <div class="onemrva-side-menu onemrva-expanded-side-menu">
-    <div class="onemrva-side-menu-header">{{ menuHeaderKey | translate }}</div>
-    <div
-      *ngFor="let menu of menus; let i = index"
-      class="onemrva-side-menu-option"
-      [ngClass]="{
-        'onemrva-side-menu-current-option':
-          menu.path === currentMenu || menu.key === currentMenu
-      }"
-      (click)="selectMenu(menu)"
-      [attr.data-cy]="'onemrva-side-menu-option_' + i"
-    >
-      {{ menu.wordingKey | translate }}
-    </div>
-  </div>
-</ng-template>

package/mat-side-menu/src/onemrva-mat-side-menu.component.spec.ts

@@ -1,66 +0,0 @@
-// import { TestBed, ComponentFixture } from "@angular/core/testing";
-// import { By } from "@angular/platform-browser";
-// import { TranslateModule } from "@ngx-translate/core";
-// import { jest } from '@jest/globals';
-//
-// import { OnemrvaMatSideMenuComponent, OnemrvaMenu } from './onemrva-mat-side-menu.component';
-// import { MatChipsModule } from "@angular/material/chips";
-// import { LayoutModule } from "@angular/cdk/layout";
-//
-// describe('OnemrvaMatSideMenuComponent', () => {
-//     let component: OnemrvaMatSideMenuComponent;
-//     let fixture: ComponentFixture<OnemrvaMatSideMenuComponent>;
-//
-//     const menu1: OnemrvaMenu = {
-//         wordingKey: "menu1",
-//         path: "path1"
-//     };
-//     const menu2: OnemrvaMenu = {
-//         wordingKey: "menu2",
-//         path: "path2"
-//     };
-//     const menus: OnemrvaMenu[] = [menu1, menu2];
-//
-//     beforeEach(() => {
-//         TestBed.configureTestingModule({
-//             declarations: [OnemrvaMatSideMenuComponent],
-//             imports: [TranslateModule.forRoot(), MatChipsModule, LayoutModule],
-//         }).compileComponents(); // the component will be compiled
-//     });
-//
-//     beforeEach(() => {
-//         fixture = TestBed.createComponent(OnemrvaMatSideMenuComponent);
-//         component = fixture.componentInstance;
-//         component.menus = menus;
-//         fixture.detectChanges();
-//
-//         component.ngOnInit()
-//     });
-//
-//     it("Must display all the menus", () => {
-//         const { debugElement } = fixture;
-//         expect(debugElement.queryAll(By.css(".onemrva-side-menu-option")).length).toEqual(menus.length);
-//     });
-//
-//     it("Must notify the parent component about the selected option", () => {
-//         jest.spyOn(component.onSelectOption, 'emit');
-//
-//         const option1 = fixture.nativeElement.querySelector("[data-cy=onemrva-side-menu-option_0]");
-//         option1.click();
-//         expect(component.onSelectOption.emit).toHaveBeenCalledWith(menu1);
-//
-//         const option2 = fixture.nativeElement.querySelector("[data-cy=onemrva-side-menu-option_1]");
-//         option2.click();
-//         expect(component.onSelectOption.emit).toHaveBeenCalledWith(menu2);
-//     });
-//
-//     describe("Responsivity", () => {
-//         it("Must display chips when the resolution becomes too small", () => {
-//             component.isSmall = true; // HWKTODO find out a way to manually resize the screen instead
-//             fixture.detectChanges();
-//
-//             const { debugElement } = fixture;
-//             expect(debugElement.queryAll(By.css(".mat-chip")).length).toEqual(menus.length);
-//         });
-//     });
-// });

package/mat-side-menu/src/onemrva-mat-side-menu.component.ts

@@ -1,58 +0,0 @@
-import {
-  Component,
-  Input,
-  Output,
-  EventEmitter,
-  OnInit,
-  OnDestroy,
-} from '@angular/core';
-import {
-  BreakpointObserver,
-  Breakpoints,
-  BreakpointState,
-} from '@angular/cdk/layout';
-import { Subscription } from 'rxjs';
-
-export interface OnemrvaMenu {
-  wordingKey: string;
-  path?: string;
-  key?: string;
-}
-
-@Component({
-  selector: 'onemrva-mat-side-menu',
-  templateUrl: 'onemrva-mat-side-menu.component.html',
-  styles: [],
-})
-export class OnemrvaMatSideMenuComponent implements OnInit, OnDestroy {
-  @Input() menuHeaderKey!: string;
-  @Input() menus!: OnemrvaMenu[];
-  @Input() currentMenu?: string; // string to be matched against menu.path or menu.key
-  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-  @Output() onSelectOption: EventEmitter<OnemrvaMenu> = new EventEmitter();
-
-  isSmall = true;
-  breakpointObserverSubscription?: Subscription;
-
-  constructor(public breakpointObserver: BreakpointObserver) {}
-
-  ngOnInit(): void {
-    this.breakpointObserverSubscription = this.breakpointObserver
-      .observe([Breakpoints.XSmall, Breakpoints.Small])
-      .subscribe((state: BreakpointState) => {
-        if (state.matches) {
-          this.isSmall = true;
-        } else {
-          this.isSmall = false;
-        }
-      });
-  }
-
-  ngOnDestroy(): void {
-    this.breakpointObserverSubscription?.unsubscribe();
-  }
-
-  selectMenu(menu: OnemrvaMenu) {
-    this.onSelectOption.emit(menu);
-  }
-}

package/mat-side-menu/src/onemrva-mat-side-menu.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { LayoutModule } from '@angular/cdk/layout';
-
-import { OnemrvaMatSideMenuComponent } from './onemrva-mat-side-menu.component';
-import { MatChipsModule } from '@angular/material/chips';
-
-@NgModule({
-  declarations: [OnemrvaMatSideMenuComponent],
-  imports: [CommonModule, TranslateModule, MatChipsModule, LayoutModule],
-  exports: [OnemrvaMatSideMenuComponent],
-})
-export class OnemrvaMatSideMenuModule {}

package/mat-skeleton/index.ts

@@ -1,3 +0,0 @@
-export * from './src/onemrva-mat-skeleton.module';
-export * from './src/onemrva-mat-skeleton.component';
-export * from './src/onemrva-mat-skeleton-enums';

package/mat-skeleton/ng-package.json

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

package/mat-skeleton/src/onemrva-mat-skeleton-enums.ts

@@ -1,32 +0,0 @@
-import { mkenum } from '@onemrvapublic/design-system/utils';
-
-export type OnemrvaSkeletonLoaderConfigTheme = {
-  // This is required since ngStyle is using `any` as well
-  // More details in https://angular.io/api/common/NgStyle
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [k: string]: any;
-} | null;
-
-export const OnemrvaMatSkeletonAnimations = mkenum({
-  PULSE: 'pulse',
-  PROGRESS: 'progress',
-  NONE: 'none',
-});
-export type OnemrvaMatSkeletonAnimations =
-  (typeof OnemrvaMatSkeletonAnimations)[keyof typeof OnemrvaMatSkeletonAnimations];
-
-export const OnemrvaMatSkeletoTypes = mkenum({
-  H1: 'h1',
-  H2: 'h2',
-  H3: 'h3',
-  H4: 'h4',
-  H5: 'h5',
-  H6: 'h6',
-  BUTTON: 'button',
-  CIRCLE: 'circle',
-  SQUARE: 'square',
-  CUSTOM: 'custom',
-  LINE: '',
-});
-export type OnemrvaMatSkeletoTypes =
-  (typeof OnemrvaMatSkeletoTypes)[keyof typeof OnemrvaMatSkeletoTypes];

package/mat-skeleton/src/onemrva-mat-skeleton.component.html

@@ -1,14 +0,0 @@
-<div
-  *ngFor="let item of items"
-  class="skeleton-loader"
-  aria-busy="true"
-  aria-valuemin="0"
-  aria-valuemax="100"
-  role="progressbar"
-  aria-label="loading"
-  [ngStyle]="theme"
->
-  <ng-container *ngIf="type === 'custom'">
-    <ng-content></ng-content>
-  </ng-container>
-</div>

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

@@ -1,187 +0,0 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  HostBinding,
-  OnChanges,
-} from '@angular/core';
-import { OnemrvaMatSize } from '@onemrvapublic/design-system/utils';
-import {
-  OnemrvaMatSkeletonAnimations,
-  OnemrvaMatSkeletoTypes,
-  OnemrvaSkeletonLoaderConfigTheme,
-} from './onemrva-mat-skeleton-enums';
-
-let NEXT_ID = 0;
-
-/**
- * Skeleton provides a way to display loading element while page is loading.
- *
- * @MatModule OnemrvaMatSkeletonModule
- *
- * @MatKeywords skeleton, loading, progress
- *
- * @example
- * ```html
- * <onemrva-mat-skeleton type="avatar" size="large">
- * </onemrva-mat-skeleton>
- * ```
- */
-@Component({
-  selector: 'onemrva-mat-skeleton',
-  templateUrl: 'onemrva-mat-skeleton.component.html',
-  styleUrls: ['onemrva-mat-skeleton.component.scss'],
-})
-export class OnemrvaMatSkeletonComponent implements OnInit, OnChanges {
-  @Input()
-  count: number = 1;
-
-  @Input()
-  animation: OnemrvaMatSkeletonAnimations =
-    OnemrvaMatSkeletonAnimations.PROGRESS;
-
-  @Input()
-  type: OnemrvaMatSkeletoTypes = OnemrvaMatSkeletoTypes.LINE;
-
-  @Input()
-  size: OnemrvaMatSize = OnemrvaMatSize.MEDIUM;
-
-  @Input()
-  theme: OnemrvaSkeletonLoaderConfigTheme = [];
-
-  @HostBinding('attr.aria-label')
-  @Input()
-  ariaLabel = 'loading';
-
-  @HostBinding('attr.role')
-  @Input()
-  public role = 'progressbar';
-
-  @HostBinding('attr.valuetext')
-  @Input()
-  public loadingText = 'Loading...';
-
-  @HostBinding('attr.id')
-  @Input()
-  public id = `onemrva-mat-skeleton-${NEXT_ID++}`;
-
-  /** @hidden @internal */
-  @HostBinding('class.progress')
-  public get _isProgress(): boolean {
-    return this.animation === OnemrvaMatSkeletonAnimations.PROGRESS;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.pulse')
-  public get _isPulse(): boolean {
-    return this.animation === OnemrvaMatSkeletonAnimations.PULSE;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.h1')
-  public get isH1(): boolean {
-    return this.type === OnemrvaMatSkeletoTypes.H1;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.h2')
-  public get isH2(): boolean {
-    return this.type === OnemrvaMatSkeletoTypes.H2;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.h3')
-  public get isH3(): boolean {
-    return this.type === OnemrvaMatSkeletoTypes.H3;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.h4')
-  public get isH4(): boolean {
-    return this.type === OnemrvaMatSkeletoTypes.H4;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.h5')
-  public get isH5(): boolean {
-    return this.type === OnemrvaMatSkeletoTypes.H5;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.h6')
-  public get isH6(): boolean {
-    return this.type === OnemrvaMatSkeletoTypes.H6;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.line')
-  public get _isLine(): boolean {
-    return this.type === OnemrvaMatSkeletoTypes.LINE;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.button')
-  public get _isButton(): boolean {
-    return this.type === OnemrvaMatSkeletoTypes.BUTTON;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.circle')
-  public get _isCircle(): boolean {
-    return this.type === OnemrvaMatSkeletoTypes.CIRCLE;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.square')
-  public get _isSquare(): boolean {
-    return this.type === OnemrvaMatSkeletoTypes.SQUARE;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.custom')
-  public get _isCustom(): boolean {
-    return this.type === OnemrvaMatSkeletoTypes.CUSTOM;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.extrasmall')
-  public get _isXSmallSize(): boolean {
-    return this.size === OnemrvaMatSize.XSMALL;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.small')
-  public get _isSmallSize(): boolean {
-    return this.size === OnemrvaMatSize.SMALL;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.medium')
-  public get _isMediumSize(): boolean {
-    return this.size === OnemrvaMatSize.MEDIUM;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.large')
-  public get _isLargeSize(): boolean {
-    return this.size === OnemrvaMatSize.LARGE;
-  }
-
-  /** @hidden @internal */
-  @HostBinding('class.extralarge')
-  public get _isXLargeSize(): boolean {
-    return this.size === OnemrvaMatSize.XLARGE;
-  }
-
-  public items: Array<any> = [];
-
-  constructor() {}
-
-  ngOnInit() {
-    this.items.length = this.count;
-  }
-
-  ngOnChanges() {
-    this.items.length = this.count;
-  }
-}

package/mat-skeleton/src/onemrva-mat-skeleton.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { OnemrvaMatSkeletonComponent } from './onemrva-mat-skeleton.component';
-
-@NgModule({
-  declarations: [OnemrvaMatSkeletonComponent],
-  imports: [CommonModule],
-  exports: [OnemrvaMatSkeletonComponent],
-})
-export class OnemrvaMatSkeletonModule {}

package/mat-spinner/index.ts

@@ -1,7 +0,0 @@
-/*
- * Public API Surface of mat-side-menu
- */
-
-export * from './src/onemrva-mat-spinner.component';
-export * from './src/onemrva-mat-spinner.module';
-export * from './src/onemrva-mat-loading.directive';

package/mat-spinner/ng-package.json

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