@onemrvapublic/design-system 0.0.0

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

@@ -0,0 +1,184 @@
+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 { OnemrvaMatPaginatorComponent } from './onemrva-mat-paginator.component';
+
+describe('OnemrvaMatPaginatorComponent', () => {
+    let component: OnemrvaMatPaginatorComponent;
+    let fixture: ComponentFixture<OnemrvaMatPaginatorComponent>;
+    const maxNumberOfReachablePages = 7;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [OnemrvaMatPaginatorComponent],
+            imports: [TranslateModule.forRoot()]
+        }).compileComponents(); // the component will be compiled
+    });
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(OnemrvaMatPaginatorComponent);
+        component = fixture.componentInstance;
+    });
+
+    it(`Must display some pages when the number of pages > ${maxNumberOfReachablePages}`, () => {
+        component.totalNumberOfPages = maxNumberOfReachablePages + 1;
+        component.ngOnChanges();
+        fixture.detectChanges();
+
+        const { debugElement } = fixture;
+        expect(debugElement.queryAll(By.css("[data-cy=onemrva-mat-paginator-btn-page]")).length).toEqual(maxNumberOfReachablePages - 1);
+    });
+
+    it(`Must display all the pages when number of pages <= ${maxNumberOfReachablePages}`, () => {
+        component.totalNumberOfPages = maxNumberOfReachablePages;
+        component.ngOnChanges();
+        fixture.detectChanges();
+
+        const { debugElement } = fixture;
+        expect(debugElement.queryAll(By.css("[data-cy=onemrva-mat-paginator-btn-page]")).length).toEqual(maxNumberOfReachablePages);
+        expect(fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-too-many-before]")).toBeNull();
+        expect(fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-too-many-after]")).toBeNull();
+    });
+
+    it('Must request the next page', () => {
+        component.totalNumberOfPages = 10;
+        component.ngOnChanges();
+        fixture.detectChanges();
+
+        jest.spyOn(component.onRequestPage, 'emit');
+
+        const next = fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-next]") as HTMLButtonElement;
+        next.click();
+        expect(component.onRequestPage.emit).toHaveBeenCalledWith(1);
+    });
+
+    it('Must request the previous page', () => {
+        component.totalNumberOfPages = 10;
+        component.pageIndex = 4;
+        component.ngOnChanges();
+        fixture.detectChanges();
+
+        jest.spyOn(component.onRequestPage, 'emit');
+
+        const previous = fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-previous]") as HTMLButtonElement;
+        const next = fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-next]") as HTMLButtonElement;
+        expect(previous.disabled).toBeFalsy();
+        expect(next.disabled).toBeFalsy();
+
+
+        previous.click();
+        expect(component.onRequestPage.emit).toHaveBeenCalledWith(3);
+        expect(fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-too-many-before]")).toBeTruthy();
+        expect(fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-too-many-after]")).toBeTruthy();
+    });
+
+    it('Must hide the first pages', () => {
+        component.totalNumberOfPages = 10;
+        component.pageIndex = 4;
+        component.ngOnChanges();
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-too-many-before]")).toBeTruthy();
+
+        component.pageIndex = 0;
+        component.ngOnChanges();
+        fixture.detectChanges();
+        expect(fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-too-many-before]")).toBeNull();
+
+        component.pageIndex = 1;
+        component.ngOnChanges();
+        fixture.detectChanges();
+        expect(fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-too-many-before]")).toBeNull();
+
+        component.pageIndex = 2;
+        component.ngOnChanges();
+        fixture.detectChanges();
+        expect(fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-too-many-before]")).toBeNull();
+    });
+
+    it('Must hide the last pages', () => {
+        const numberOfPages = 10;
+        component.totalNumberOfPages = numberOfPages;
+        component.pageIndex = 4;
+        component.ngOnChanges();
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-too-many-after]")).toBeTruthy();
+
+        component.pageIndex = numberOfPages - 3;
+        component.ngOnChanges();
+        fixture.detectChanges();
+        expect(fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-too-many-after]")).toBeNull();
+
+        component.pageIndex = numberOfPages - 2;
+        component.ngOnChanges();
+        fixture.detectChanges();
+        expect(fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-too-many-after]")).toBeNull();
+
+        component.pageIndex = numberOfPages - 1;
+        component.ngOnChanges();
+        fixture.detectChanges();
+        expect(fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-too-many-after]")).toBeNull();
+    });
+
+    it("Must prevent user from going to negative pageIndex", () => {
+        component.totalNumberOfPages = 10;
+        component.ngOnChanges();
+        fixture.detectChanges();
+
+        jest.spyOn(component.onRequestPage, 'emit');
+
+        const previous = fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-previous]");
+        expect(previous.disabled).toBeTruthy();
+
+        previous.click();
+        expect(component.onRequestPage.emit).toHaveBeenCalledTimes(0);
+
+        const next = fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-next]");
+        expect(next.disabled).toBeFalsy();
+    });
+
+    it("Must prevent user from going beyond last page", () => {
+        const lastPageIndex = 9;
+        component.totalNumberOfPages = lastPageIndex + 1;
+        component.pageIndex = lastPageIndex;
+        component.ngOnChanges();
+        fixture.detectChanges();
+
+        jest.spyOn(component.onRequestPage, 'emit');
+
+        const next = fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-next]");
+        expect(next.disabled).toBeTruthy();
+
+        next.click();
+        expect(component.onRequestPage.emit).toHaveBeenCalledTimes(0);
+
+        const previous = fixture.nativeElement.querySelector("[data-cy=onemrva-mat-paginator-btn-previous]");
+        expect(previous.disabled).toBeFalsy();
+    });
+
+    describe('Must throw an error', () => {
+        it("... when requesting a negative pageIndex", () => {
+            component.totalNumberOfPages = 10;
+            component.pageIndex = -1;
+
+            expect(() => component.ngOnChanges()).toThrow();
+        });
+
+        it("... when requesting a non integer pageIndex", () => {
+            component.totalNumberOfPages = 10;
+            component.pageIndex = 0.1;
+
+            expect(() => component.ngOnChanges()).toThrow();
+        });
+
+        it("... when requesting an out of bound pageIndex", () => {
+            component.totalNumberOfPages = 10;
+            component.pageIndex = 10;
+
+            expect(() => component.ngOnChanges()).toThrow();
+        });
+    });
+});

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

@@ -0,0 +1,214 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { PageEvent } from '@angular/material/paginator';
+
+@Component({
+  selector: 'onemrva-mat-paginator',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './onemrva-mat-paginator.component.html',
+})
+export class OnemrvaMatPaginatorComponent {
+  @Input() type: 'default' | 'complex' = 'default';
+  @Input() pageSizeSelector = true; // Specs: DS-74
+  @Input() pageSizeOptions: number[] = [10, 20, 50, 100]; // Specs: DS-74
+  @Input() pageSizeDefaultOption: number = 10;
+  @Input() recordKey: string = 'recordsPerPage'; // this record key will be inside key "paginator". I.e the default key value that will be generated out of this input is paginator.recordsPerPage
+
+  maxRecordNumber = 0;
+  private _pageIndex: number = 0;
+  private _length: number = 0;
+  private _pageSize: number = this.pageSizeDefaultOption;
+  private _totalNumberOfPages: number = 0;
+
+  public get pageIndex(): number {
+    return this._pageIndex;
+  }
+
+  @Input()
+  public set pageIndex(index: number) {
+    if (this._pageIndex !== index) {
+      this._pageIndex = Math.min(index, this._totalNumberOfPages - 1);
+      this._emitPageEvent(this._pageIndex);
+      this.refreshState();
+    }
+  }
+
+  public get length(): number {
+    return this._length;
+  }
+
+  @Input()
+  public set length(length: number) {
+    if (this._length !== length) {
+      this._length = length;
+      this.refreshState();
+    }
+  }
+
+  public get pageSize(): number {
+    return this._pageSize;
+  }
+
+  @Input()
+  public set pageSize(pageSize: number) {
+    if (this._pageSize !== pageSize) {
+      this._pageSize = pageSize;
+      this.pageSize$.next(this._pageSize);
+      this._pageIndex = 0;
+      this._emitPageEvent(this._pageIndex);
+      this.refreshState();
+    }
+  }
+
+  get totalNumberOfPages(): number {
+    return this._totalNumberOfPages;
+  }
+
+  @Input() previousKey: string = 'Previous';
+  @Input() nextKey: string = 'Next';
+
+  /** Deprecated **/
+  @Output() onRequestPage: EventEmitter<number> = new EventEmitter(); // Pages are displayed starting from 1 but the index starts at 0
+
+  /** Event emitted when the paginator changes the page size or page index. */
+  @Output() readonly page: EventEmitter<PageEvent> =
+    new EventEmitter<PageEvent>();
+
+  pageIndex$: BehaviorSubject<number> = new BehaviorSubject(0);
+  pageSize$: BehaviorSubject<number> = new BehaviorSubject(
+    this.pageSizeDefaultOption
+  );
+
+  pages: number[] = [];
+  numberOfReachablePages = 5;
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  refreshState() {
+    this.maxRecordNumber = Math.min(
+      this._pageIndex * this._pageSize + this._pageSize,
+      this._length
+    );
+
+    if (this._pageIndex < 0) throw Error('Negative index');
+    this._totalNumberOfPages = Math.ceil(this.length / this.pageSize);
+    if (
+      this._totalNumberOfPages > 0 &&
+      this._pageIndex > this._totalNumberOfPages
+    )
+      throw Error('Index out of bound');
+    if (!Number.isInteger(this._pageIndex)) throw Error('Index is not integer');
+
+    this.pageIndex$.next(this._pageIndex);
+
+    if (this.type === 'complex') this.refreshComplex();
+    else this.refreshDefault();
+
+    this.cd.detectChanges();
+  }
+
+  refreshDefault() {
+    if (this._totalNumberOfPages <= this.numberOfReachablePages + 1) {
+      // Case 1: not enough pages to display the first "..."
+      this.pages = [...Array(this._totalNumberOfPages).keys()];
+    } else if (this.pageIndex <= this.numberOfReachablePages - 1) {
+      // Case 2: page index in first 5 pages
+      this.pages = [...Array(this.numberOfReachablePages).keys()];
+    } else {
+      let firstPageIndex =
+        Math.floor(this._pageIndex / this.numberOfReachablePages) *
+        this.numberOfReachablePages;
+
+      if (
+        this._totalNumberOfPages - firstPageIndex <=
+        this.numberOfReachablePages + 1
+      ) {
+        if (this._totalNumberOfPages - firstPageIndex <= 1) {
+          // Case 3: in the last block containing only 1 page
+          firstPageIndex = firstPageIndex - this.numberOfReachablePages;
+          this.pages = [
+            ...Array(this._totalNumberOfPages - firstPageIndex).keys(),
+          ].map((x) => x + firstPageIndex);
+        } else {
+          // Case 4: one block before the last with last block containing only 1 page
+          this.pages = [
+            ...Array(this._totalNumberOfPages - firstPageIndex).keys(),
+          ].map((x) => x + firstPageIndex);
+        }
+      } else if (this._totalNumberOfPages - 1 - firstPageIndex <= 2) {
+        // Case 5: in the last block containing 2 pages or more
+        firstPageIndex = firstPageIndex - this.numberOfReachablePages;
+        this.pages = [
+          ...Array(this._totalNumberOfPages - firstPageIndex).keys(),
+        ].map((x) => x + firstPageIndex);
+      } else {
+        // Case 6: same as case 4 but the next block contains at least 2 pages
+        this.pages = [...Array(this.numberOfReachablePages).keys()].map(
+          (x) => x + firstPageIndex
+        );
+      }
+    }
+  }
+  refreshComplex() {
+    if (this._totalNumberOfPages <= this.numberOfReachablePages + 2) {
+      // Case 1: not enough pages to display the first "..."
+      this.pages = [...Array(this._totalNumberOfPages).keys()];
+    } else if (this.pageIndex <= this.numberOfReachablePages - 1) {
+      // Case 2: page index in first 5 pages
+      this.pages = [...Array(this.numberOfReachablePages).keys()];
+    } else {
+      let firstPageIndex =
+        Math.floor(this._pageIndex / this.numberOfReachablePages) *
+        this.numberOfReachablePages;
+
+      if (
+        this._totalNumberOfPages - firstPageIndex <=
+        this.numberOfReachablePages + 2
+      ) {
+        if (this._totalNumberOfPages - firstPageIndex <= 2) {
+          // Case 3: in the last block containing max 2 pages
+          firstPageIndex = firstPageIndex - this.numberOfReachablePages;
+          this.pages = [
+            ...Array(this._totalNumberOfPages - firstPageIndex).keys(),
+          ].map((x) => x + firstPageIndex);
+        } else {
+          // Case 4: one block before the last with last block containing max 2 pages
+          this.pages = [
+            ...Array(this._totalNumberOfPages - firstPageIndex).keys(),
+          ].map((x) => x + firstPageIndex);
+        }
+      } else if (this._totalNumberOfPages - 1 - firstPageIndex <= 3) {
+        // Case 5: in the last block containing 2 pages or more
+        firstPageIndex = firstPageIndex - this.numberOfReachablePages;
+        this.pages = [
+          ...Array(this._totalNumberOfPages - firstPageIndex).keys(),
+        ].map((x) => x + firstPageIndex);
+      } else {
+        // Case 6: same as case 4 but the next block contains at least 2 pages
+        this.pages = [...Array(this.numberOfReachablePages).keys()].map(
+          (x) => x + firstPageIndex
+        );
+      }
+    }
+  }
+
+  /** Emits an event notifying that a change of the paginator's properties has been triggered. */
+  private _emitPageEvent(previousPageIndex: number) {
+    this.page.emit({
+      previousPageIndex,
+      pageIndex: this._pageIndex,
+      pageSize: this._pageSize,
+      length: this._length,
+    });
+
+    // Deprecated
+    this.onRequestPage.emit(this._pageIndex);
+  }
+}

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

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+
+import { OnemrvaMatPaginatorComponent } from './onemrva-mat-paginator.component';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDividerModule } from '@angular/material/divider';
+
+@NgModule({
+    declarations: [OnemrvaMatPaginatorComponent],
+    imports: [CommonModule, TranslateModule, MatButtonModule, MatSelectModule, MatDividerModule],
+    exports: [OnemrvaMatPaginatorComponent],
+})
+export class OnemrvaMatPaginatorModule {}

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

@@ -0,0 +1,6 @@
+export * from './src/onemrva-mat-panel.module';
+export * from './src/onemrva-mat-panel.component';
+export * from './src/onemrva-mat-panel-title.component';
+export * from './src/onemrva-mat-panel-content.component';
+export * from './src/onemrva-mat-panel-title-action.component';
+export * from './src/onemrva-mat-panel-icon.component';

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

@@ -0,0 +1,12 @@
+import {Component, Input, TemplateRef, ViewChild} from "@angular/core";
+
+@Component({
+    selector: 'onemrva-mat-panel-content',
+    templateUrl: './onemrva-mat-panel-content.html',
+})
+export class OnemrvaMatPanelContentComponent {
+    @Input() customNgClass: any;
+
+    @ViewChild(TemplateRef) template?: TemplateRef<any>;
+
+}

package/projects/onemrva/design-system/mat-panel/src/onemrva-mat-panel-content.html

@@ -0,0 +1,5 @@
+<ng-template>
+    <div class="onemrva-mat-panel-content" [ngClass]="customNgClass">
+        <ng-content ></ng-content>
+    </div>
+</ng-template>

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

@@ -0,0 +1,12 @@
+import {Component, Input, TemplateRef, ViewChild} from "@angular/core";
+
+@Component({
+    selector: 'onemrva-mat-panel-icon',
+    templateUrl: './onemrva-mat-panel-icon.html',
+})
+export class OnemrvaMatPanelIconComponent {
+    @Input() customNgClass: any;
+
+    @ViewChild(TemplateRef) template?: TemplateRef<any>;
+
+}

package/projects/onemrva/design-system/mat-panel/src/onemrva-mat-panel-icon.html

@@ -0,0 +1,5 @@
+<ng-template>
+    <div class="onemrva-mat-panel-icon" [ngClass]="customNgClass">
+        <ng-content ></ng-content>
+    </div>
+</ng-template>

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

@@ -0,0 +1,12 @@
+import {Component, Input, TemplateRef, ViewChild} from "@angular/core";
+
+@Component({
+    selector: 'onemrva-mat-panel-title-action',
+    templateUrl: './onemrva-mat-panel-title-action.html',
+})
+export class OnemrvaMatPanelTitleActionComponent {
+    @Input() customNgClass: any;
+
+    @ViewChild(TemplateRef) template?: TemplateRef<any>;
+
+}

package/projects/onemrva/design-system/mat-panel/src/onemrva-mat-panel-title-action.html

@@ -0,0 +1,5 @@
+<ng-template>
+    <div class="onemrva-mat-panel-title-action" [ngClass]="customNgClass">
+        <ng-content></ng-content>
+    </div>
+</ng-template>

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

@@ -0,0 +1,20 @@
+import {AfterViewInit, ChangeDetectorRef, Component, ContentChild, Input, TemplateRef, ViewChild} from "@angular/core";
+import {OnemrvaMatPanelTitleActionComponent} from "./onemrva-mat-panel-title-action.component";
+
+@Component({
+    selector: 'onemrva-mat-panel-title',
+    templateUrl: './onemrva-mat-panel-title.html',
+})
+export class OnemrvaMatPanelTitleComponent implements AfterViewInit{
+    @Input() customNgClass: any;
+
+    @ViewChild(TemplateRef) template?: TemplateRef<any>;
+
+    @ContentChild(OnemrvaMatPanelTitleActionComponent) content?: OnemrvaMatPanelTitleActionComponent;
+
+    constructor(private cd: ChangeDetectorRef) {}
+
+    ngAfterViewInit() {
+        this.cd.detectChanges();
+    }
+}

package/projects/onemrva/design-system/mat-panel/src/onemrva-mat-panel-title.html

@@ -0,0 +1,8 @@
+<ng-template>
+    <div class="onemrva-mat-panel-title" [ngClass]="customNgClass">
+        <ng-content></ng-content>
+        <ng-container *ngIf="content?.template as tpl">
+            <ng-container *ngTemplateOutlet="tpl"></ng-container>
+        </ng-container>
+    </div>
+</ng-template>

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

@@ -0,0 +1,10 @@
+<ng-container *ngIf="icon?.template as tpl">
+  <ng-container *ngTemplateOutlet="tpl"></ng-container>
+</ng-container>
+<h1 *ngIf="error" style="color: red">{{ error }}</h1>
+<ng-container *ngIf="title?.template as tpl">
+  <ng-container *ngTemplateOutlet="tpl"></ng-container>
+</ng-container>
+<ng-container *ngIf="content?.template as tpl">
+  <ng-container *ngTemplateOutlet="tpl"></ng-container>
+</ng-container>

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

@@ -0,0 +1,100 @@
+@use '../../utils';
+
+@mixin panel($theme) {
+    $panel-border-radius: 16px;
+    $panel-border-color: utils.palette($theme, 'primary', 50);
+    $panel-padding: 24px;
+
+  onemrva-mat-panel {
+    border-radius: $panel-border-radius;
+    border: 1px solid $panel-border-color;
+    padding: $panel-padding;
+    display: block;
+    position: relative;
+
+    &.has-icon {
+      .onemrva-mat-panel-content,
+      .onemrva-mat-panel-title {
+        margin-left: 80px;
+      }
+    }
+
+    .onemrva-mat-panel-icon {
+      float: left;
+      position: absolute;
+      top: 50%;
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
+    }
+
+        .onemrva-mat-panel-content {
+          margin-top: 16px;
+            p:last-child {
+                margin: 0;
+            }
+        }
+        .onemrva-mat-panel-title {
+            font-family: 'Poppins', sans-serif;
+            font-style: normal;
+            font-weight: 700;
+            font-size: 20px;
+            line-height: 35px;
+            .onemrva-mat-panel-title-action {
+                float: right;
+            }
+        }
+
+        &.mat-accent {
+            border: none;
+            background: utils.gradient($theme);
+            color: white;
+        }
+        &.mat-primary {
+            border: none;
+            background: utils.palette($theme, 'primary', 50);
+            .onemrva-mat-panel-title {
+              color: utils.palette($theme, 'grayscale', 900);
+            }
+        }
+        &.mat-warn {
+            border: none;
+            background: utils.palette($theme, 'warn', 50);
+
+            .onemrva-mat-panel-title {
+                color: utils.palette($theme, 'warn', 500);
+            }
+        }
+        &.mat-grayscale {
+            border: none;
+            background: utils.palette($theme, 'grayscale', 50);
+
+            .onemrva-mat-panel-title {
+                color: utils.palette($theme, 'grayscale', 500);
+            }
+        }
+        &.mat-info {
+            border: none;
+            background: utils.palette($theme, 'info', 50);
+
+            .onemrva-mat-panel-title {
+                color: utils.palette($theme, 'info', 500);
+            }
+        }
+        &.mat-success {
+            border: none;
+            background: utils.palette($theme, 'success', 50);
+
+            .onemrva-mat-panel-title {
+                color: utils.palette($theme, 'success', 500);
+            }
+        }
+        &.mat-error {
+            border: none;
+            background: utils.palette($theme, 'error', 50);
+
+            .onemrva-mat-panel-title {
+                color: utils.palette($theme, 'error', 500);
+            }
+        }
+    }
+}