@onemrvapublic/design-system 0.0.0

package/projects/test/src/app/demos/pop-over/demo-pop-over.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+import { OnemrvaMatPopOverModule } from '../../../../../onemrva/design-system/mat-pop-over/src/onemrva-mat-pop-over.module';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-demo-pop-over',
+  standalone: true,
+  imports: [CommonModule, OnemrvaMatPopOverModule],
+  styleUrls: ['./demo-pop-over.component.scss'],
+  templateUrl: 'demo-pop-over.component.html',
+})
+export class DemoPopOverComponent {}

package/projects/test/src/app/demos/pop-over/readme.md

@@ -0,0 +1,26 @@
+# Installation
+
+```bash
+npm install --save @onemrvapublic/theme
+npm install --save @onemrvapublic/design-system
+```
+
+In style.scss:
+
+```scss
+@use "@onemrvapublic/theme" as theme;
+@use "@onemrvapublic/design-system" as onemrvaMat;
+
+@include theme.reset();
+
+.onemrva-theme {
+  @include theme.onemrva();
+  @include popOver.panel(theme.$onemrva-theme);
+}
+```
+
+# Changelog
+
+## 15.0.15
+
+Initial version

package/projects/test/src/app/demos/progress-bar/demo-progress-bar.component.html

@@ -0,0 +1,19 @@
+<mat-form-field class="mb-l">
+  <mat-label>Progress value</mat-label>
+  <input matInput [formControl]="progressState" type="number" />
+  <mat-error>The input number must be an integer between 0 and 100</mat-error>
+</mat-form-field>
+
+<br />
+
+Default label$:
+<onemrva-mat-progress-bar [value$]="value$"></onemrva-mat-progress-bar>
+
+<br />
+<br />
+
+Custom label$:
+<onemrva-mat-progress-bar
+  [label$]="label$"
+  [value$]="value$"
+></onemrva-mat-progress-bar>

package/projects/test/src/app/demos/progress-bar/demo-progress-bar.component.ts

@@ -0,0 +1,35 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+import { OnemrvaMatProgressBarComponent } from '../../../../../onemrva/design-system/mat-progress-bar';
+import { map, Observable, startWith } from 'rxjs';
+
+@Component({
+  selector: 'app-demo-progress-bar',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatFormFieldModule,
+    OnemrvaMatProgressBarComponent,
+    MatInputModule,
+  ],
+  templateUrl: 'demo-progress-bar.component.html',
+})
+export class DemoProgressBarComponent {
+  progressState: FormControl = new FormControl(0, [
+    Validators.pattern('^([0-9]|[1-9][0-9]|100)$'),
+  ]);
+
+  value$: Observable<number> = this.progressState.valueChanges.pipe(
+    startWith(0)
+  );
+
+  label$ = this.value$.pipe(
+    startWith(0),
+    map((v) => (v < 0 ? '0 pct.' : v > 100 ? '100 pct.' : v + ' pct.'))
+  );
+}

package/projects/test/src/app/demos/side-menu/demo-side-menu.component.html

@@ -0,0 +1,5 @@
+<onemrva-mat-side-menu [menuHeaderKey]="menuHeaderKey"
+                       [menus]="menus"
+                       [currentMenu]="router.url"
+                       (onSelectOption)="selectOption($event)">
+</onemrva-mat-side-menu>

package/projects/test/src/app/demos/side-menu/demo-side-menu.component.ts

@@ -0,0 +1,34 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+import { OnemrvaMenu } from '../../../../../onemrva/design-system/mat-side-menu';
+
+import { CommonModule } from '@angular/common';
+import { OnemrvaMatSideMenuModule } from '../../../../../onemrva/design-system/mat-side-menu';
+
+@Component({
+  selector: 'app-demo-side-menu',
+  standalone: true,
+  imports: [CommonModule, OnemrvaMatSideMenuModule],
+  templateUrl: './demo-side-menu.component.html',
+})
+export class DemoSideMenuComponent {
+  menuHeaderKey: string = 'Side Menu';
+  menus: OnemrvaMenu[] = [
+    {
+      wordingKey: 'demoSideMenu.key1',
+      path: '/north',
+    },
+    {
+      wordingKey: 'demoSideMenu.key2',
+      path: '/south',
+    },
+  ];
+  currentMenu?: string;
+
+  constructor(public router: Router) {}
+
+  selectOption(menu: OnemrvaMenu) {
+    alert(menu.path);
+    //this.router.navigate([menu.path]);
+  }
+}

package/projects/test/src/app/demos/side-menu/readme.md

@@ -0,0 +1,30 @@
+# Installation
+
+```bash
+npm install --save @onemrvapublic/theme
+npm install --save @onemrvapublic/design-system
+```
+
+In style.scss:
+
+```scss
+@use '@onemrvapublic/theme' as theme;
+@use '@onemrvapublic/design-system' as onemrvaMat;
+
+@include theme.reset();
+
+.onemrva-theme {
+    @include theme.onemrva();
+    @include onemrvaMat.side-menu(theme.$onemrva-theme);
+}
+```
+
+# Changelog
+
+## 14.1.558
+
+Migration to @onemrvapublic/design-system library
+
+## 14.1.466
+
+Compliant version with DS4

package/projects/test/src/app/demos/skeleton/demo-skeleton.component.html

@@ -0,0 +1,119 @@
+<onemrva-mat-panel>
+  <onemrva-mat-panel-content>
+    <div class="row">
+      <div class="col-2">
+        <onemrva-mat-skeleton *ngIf="!contentLoaded" type="circle" size="extralarge">
+        </onemrva-mat-skeleton>
+        <onemrva-mat-avatar *ngIf="contentLoaded" size="extralarge" initials="TS">
+
+        </onemrva-mat-avatar>
+      </div>
+      <div class="col-auto">
+        <onemrva-mat-skeleton  *ngIf="!contentLoaded" type="h2"></onemrva-mat-skeleton>
+        <h2 *ngIf="contentLoaded">This is a loaded title</h2>
+        <onemrva-mat-skeleton  *ngIf="!contentLoaded" type="h4" ></onemrva-mat-skeleton>
+        <h4 *ngIf="contentLoaded">This is a loaded subtitle</h4>
+        <onemrva-mat-skeleton  *ngIf="!contentLoaded" ></onemrva-mat-skeleton>
+        <p *ngIf="contentLoaded">This is a loaded text</p>
+        <onemrva-mat-skeleton  *ngIf="!contentLoaded" ></onemrva-mat-skeleton>
+        <p *ngIf="contentLoaded">This is another loaded text</p>
+        <onemrva-mat-skeleton  *ngIf="!contentLoaded" type="button"  class="float-right"></onemrva-mat-skeleton>
+        <button *ngIf="contentLoaded" mat-flat-button color="accent" class="float-right">Click me</button>
+      </div>
+    </div>
+  </onemrva-mat-panel-content>
+</onemrva-mat-panel>
+<br/>
+<br/>
+<div class="row">
+  <div class="col-auto" style="padding-top: 100px;">
+    <onemrva-mat-skeleton class="float-right" [theme]="{ 'transform': 'rotate(40deg)', width: '200px' }">
+    </onemrva-mat-skeleton>
+  </div>
+  <div class="col-2 text-center">
+    <onemrva-mat-skeleton type="circle" size="extralarge">
+    </onemrva-mat-skeleton>
+  </div>
+  <div class="col-auto" style="padding-top: 100px;">
+    <onemrva-mat-skeleton  [theme]="{ 'transform': 'rotate(-40deg)', width: '200px' }">
+    </onemrva-mat-skeleton>
+  </div>
+</div>
+<div  class="row  gc-small">
+  <div class="col-auto">
+  </div>
+  <div class="col-1">
+    <onemrva-mat-skeleton [count]="3">
+    </onemrva-mat-skeleton>
+  </div>
+  <div class="col-1">
+    <onemrva-mat-skeleton [count]="3">
+    </onemrva-mat-skeleton>
+  </div>
+  <div class="col-auto">
+  </div>
+</div>
+<div  class="row"  *ngFor="let number of [0,1]">
+  <div class="col-auto">
+  </div>
+  <div class="col-2 text-center">
+    <onemrva-mat-skeleton type="circle" size="extrasmall">
+    </onemrva-mat-skeleton>
+  </div>
+  <div class="col-auto">
+  </div>
+</div>
+<div  class="row  gc-small">
+  <div class="col-auto">
+  </div>
+  <div class="col-1">
+    <onemrva-mat-skeleton type="square" size="medium" class="float-right">
+    </onemrva-mat-skeleton>
+  </div>
+  <div class="col-1">
+    <onemrva-mat-skeleton type="square" size="medium">
+    </onemrva-mat-skeleton>
+  </div>
+  <div class="col-auto">
+  </div>
+</div>
+<div class="row">
+  <div class="col-12">&nbsp;</div>
+</div>
+<div class="row">
+  <div class="col-12">&nbsp;</div>
+</div>
+<div class="row">
+  <div class="col-12">&nbsp;</div>
+</div>
+<div  class="row  gc-small">
+  <div class="col-auto">
+  </div>
+  <div class="col-1">
+    <onemrva-mat-skeleton  [theme]="{ 'transform': 'rotate(-60deg)', width: '200px' }" class="float-right">
+    </onemrva-mat-skeleton>
+  </div>
+  <div class="col-1">
+    <onemrva-mat-skeleton  [theme]="{ 'transform': 'rotate(60deg)', width: '200px' }">
+    </onemrva-mat-skeleton>
+  </div>
+  <div class="col-auto">
+  </div>
+</div>
+<br/>
+<br/>
+<br/>
+<br/>
+<h3>Skeleton using custom (SVG for example)</h3>
+
+<div class="item">
+  <div style="width: 50%">
+    <onemrva-mat-skeleton type="custom">
+      <svg viewBox="0 0 312 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="312" height="102" fill="white"/>
+        <path d="M14 49.5338C5.2 43.5338 1 47.3671 0 50.0338V102.034H312V44.5338C312 35.7338 303.667 37.8671 299.5 40.0338C292.167 44.5338 276.3 54.4338 271.5 58.0338C266.7 61.6338 261.833 62.2005 260 62.0338H248C243.2 62.0338 240 60.7005 239 60.0338C237.833 59.2005 233.5 56.0338 225.5 50.0338C217.5 44.0338 210.167 47.2004 207.5 49.5338C204.833 51.8671 197.6 58.0338 190 64.0338C182.4 70.0338 176.833 65.2005 175 62.0338C168.167 48.3671 153.5 19.3338 149.5 12.5338C144.7 6.13377 138.5 9.8671 136 12.5338C130.667 18.3671 118.8 31.3338 114 36.5338C109.2 41.7338 102.667 42.3671 100 42.0338H76C66.5 42.0338 48 56.5338 42 59.0338C37.2 61.0338 32.3333 59.8671 30.5 59.0338C28.6667 58.3671 22.8 55.5338 14 49.5338Z" fill="#EFEFEF"/>
+        <path d="M14 49.5338C5.2 43.5338 1 47.3671 0 50.0338V102.034H312V44.5338C312 35.7338 303.667 37.8671 299.5 40.0338C292.167 44.5338 276.3 54.4338 271.5 58.0338C266.7 61.6338 261.833 62.2005 260 62.0338H248C243.2 62.0338 240 60.7005 239 60.0338C237.833 59.2005 233.5 56.0338 225.5 50.0338C217.5 44.0338 210.167 47.2004 207.5 49.5338C204.833 51.8671 197.6 58.0338 190 64.0338C182.4 70.0338 176.833 65.2005 175 62.0338C168.167 48.3671 153.5 19.3338 149.5 12.5338C144.7 6.13377 138.5 9.8671 136 12.5338C130.667 18.3671 118.8 31.3338 114 36.5338C109.2 41.7338 102.667 42.3671 100 42.0338H76C66.5 42.0338 48 56.5338 42 59.0338C37.2 61.0338 32.3333 59.8671 30.5 59.0338C28.6667 58.3671 22.8 55.5338 14 49.5338Z" fill="black" fill-opacity="0.1"/>
+      </svg>
+    </onemrva-mat-skeleton>
+  </div>
+</div>

package/projects/test/src/app/demos/skeleton/demo-skeleton.component.ts

@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+import {
+  OnemrvaMatSkeletonAnimations,
+  OnemrvaMatSkeletonModule
+} from "../../../../../onemrva/design-system/mat-skeleton";
+import {MatButtonModule} from "@angular/material/button";
+import {OnemrvaMatPanelModule} from "../../../../../onemrva/design-system/mat-panel";
+import {OnemrvaMatAvatarModule} from "../../../../../onemrva/design-system/mat-avatar";
+
+@Component({
+  selector: 'app-demo-avatar',
+  standalone: true,
+  imports: [CommonModule, OnemrvaMatSkeletonModule, MatButtonModule, OnemrvaMatPanelModule, OnemrvaMatAvatarModule],
+  templateUrl: 'demo-skeleton.component.html',
+  styleUrls: ['demo-skeleton.component.scss'],
+})
+export class DemoSkeletonComponent {
+  contentLoaded = false;
+
+  intervalId: number | null = null;
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.contentLoaded = true;
+    }, 3000);
+  }
+
+  ngOnDestroy() {
+    if (this.intervalId) {
+      clearInterval(this.intervalId);
+    }
+  }
+}

package/projects/test/src/app/demos/spinner/demo-spinner.component.html

@@ -0,0 +1 @@
+<onemrva-mat-spinner> </onemrva-mat-spinner>

package/projects/test/src/app/demos/spinner/demo-spinner.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import { OnemrvaMatSpinnerModule } from '../../../../../onemrva/design-system/mat-spinner';
+
+@Component({
+  selector: 'app-demo-spinner',
+  standalone: true,
+  imports: [OnemrvaMatSpinnerModule],
+  templateUrl: 'demo-spinner.component.html',
+})
+export class DemoSpinnerComponent {}

package/projects/test/src/app/demos/spinner/readme.md

@@ -0,0 +1,24 @@
+# Installation
+
+```bash
+npm install --save @onemrvapublic/theme
+npm install --save @onemrvapublic/design-system
+```
+
+In style.scss:
+
+```scss
+@use "@onemrvapublic/theme" as theme;
+@use "@onemrvapublic/design-system" as onemrvaMat;
+
+@include theme.reset();
+
+.onemrva-theme {
+  @include theme.onemrva();
+  @include onemrvaMat.spinner(theme.$onemrva-theme);
+}
+```
+
+# Changelog
+
+## 15.0.XXX

package/projects/test/src/app/demos/summary-stepper/demo-summary-stepper.component.html

@@ -0,0 +1,108 @@
+<onemrva-mat-vertical-stepper
+  [linear]="linear"
+  #stepper3
+  animationDuration="2000"
+  (selectionChange)="selectionChanged($event)"
+>
+  <mat-step [stepControl]="firstFormGroup" aria-label="Fill out your name">
+    <ng-template matStepLabel>Fill out your name</ng-template>
+    <div class="mat-step-summary">
+      {{ firstFormGroup.controls.firstCtrl.value }}
+    </div>
+    <div class="mat-step-form">
+      <form [formGroup]="firstFormGroup">
+        <mat-form-field>
+          <input
+            matInput
+            placeholder="Last name, First name"
+            formControlName="firstCtrl"
+            required
+          />
+        </mat-form-field>
+        <div style="margin-top: 8px">
+          <button
+            mat-flat-button
+            color="accent"
+            matStepperNext
+            [disabled]="linear && !firstFormGroup.valid"
+          >
+            Next
+          </button>
+        </div>
+      </form>
+    </div>
+  </mat-step>
+  <mat-step [stepControl]="secondFormGroup" aria-label="Fill out your address">
+    <ng-template matStepLabel>Fill out your address</ng-template>
+
+    <div class="mat-step-summary">
+      {{ secondFormGroup.controls.secondCtrl.value }}
+    </div>
+    <div class="mat-step-form">
+      <form [formGroup]="secondFormGroup">
+        <mat-form-field>
+          <input
+            matInput
+            placeholder="Address"
+            formControlName="secondCtrl"
+            required
+          />
+        </mat-form-field>
+        <div style="margin-top: 8px">
+          <button mat-button color="primary" matStepperPrevious>Back</button>
+          <button
+            mat-flat-button
+            color="accent"
+            matStepperNext
+            [disabled]="linear && !secondFormGroup.valid"
+          >
+            Next
+          </button>
+        </div>
+      </form>
+    </div>
+  </mat-step>
+  <mat-step
+    [stepControl]="thirdFormGroup"
+    aria-label="Fill out your phone number"
+  >
+    <ng-template matStepLabel>Fill out your phone number</ng-template>
+
+    <div class="mat-step-summary">
+      {{ thirdFormGroup.controls.thirdCtrl.value }}
+    </div>
+    <div class="mat-step-form">
+      <form [formGroup]="thirdFormGroup">
+        <mat-form-field>
+          <input
+            matInput
+            placeholder="Address"
+            formControlName="thirdCtrl"
+            required
+          />
+        </mat-form-field>
+        <div>
+          <button mat-button color="primary" matStepperPrevious>Back</button>
+          <button
+            mat-flat-button
+            color="accent"
+            matStepperNext
+            [disabled]="linear && !thirdFormGroup.valid"
+          >
+            Next
+          </button>
+        </div>
+      </form>
+    </div>
+  </mat-step>
+  <mat-step aria-label="Done">
+    <ng-template matStepLabel>Done</ng-template>
+    You are now done.
+    <div>
+      <button mat-button color="primary" matStepperPrevious>Back</button>
+      <button mat-button color="primary" (click)="stepper3.reset()">
+        Reset
+      </button>
+    </div>
+  </mat-step>
+</onemrva-mat-vertical-stepper>

package/projects/test/src/app/demos/summary-stepper/demo-summary-stepper.component.scss

@@ -0,0 +1,3 @@
+.mat-form-field {
+    margin-top: 16px;
+}

package/projects/test/src/app/demos/summary-stepper/demo-summary-stepper.component.ts

@@ -0,0 +1,55 @@
+import { Component } from '@angular/core';
+import { FormBuilder, Validators } from '@angular/forms';
+import {
+  STEPPER_GLOBAL_OPTIONS,
+  StepperSelectionEvent,
+} from '@angular/cdk/stepper';
+
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+import { MatStepperModule } from '@angular/material/stepper';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { OnemrvaMatStepperModule } from '../../../../../onemrva/design-system/mat-stepper';
+
+@Component({
+  selector: 'app-demo-summary-stepper',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatStepperModule,
+    OnemrvaMatStepperModule,
+  ],
+  templateUrl: './demo-summary-stepper.component.html',
+  styleUrls: ['./demo-summary-stepper.component.scss'],
+  providers: [
+    {
+      provide: STEPPER_GLOBAL_OPTIONS,
+      useValue: { showError: true, displayDefaultIndicatorType: false },
+    },
+  ],
+})
+export class DemoSummaryStepperComponent {
+  public linear: boolean = true;
+
+  firstFormGroup = this._formBuilder.group({
+    firstCtrl: ['', Validators.required],
+  });
+  secondFormGroup = this._formBuilder.group({
+    secondCtrl: ['', Validators.required],
+  });
+  thirdFormGroup = this._formBuilder.group({
+    thirdCtrl: ['', Validators.required],
+  });
+
+  selectionChanged($event: StepperSelectionEvent) {
+    console.log($event);
+  }
+
+  constructor(private _formBuilder: FormBuilder) {}
+}

package/projects/test/src/app/demos/summary-stepper/readme.md

@@ -0,0 +1,26 @@
+# Installation
+
+```bash
+npm install --save @onemrvapublic/theme
+npm install --save @onemrvapublic/design-system
+```
+In style.scss:
+
+```scss
+@use '@onemrvapublic/theme' as theme;
+
+@include theme.reset();
+
+.onemrva-theme {
+    @include theme.onemrva();    
+}
+```
+
+# Changelog
+
+## 14.1.558
+
+Migration to @onemrvapublic/design-system library
+
+## 14.1.508
+ init