@onemrvapublic/design-system 0.0.0

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

@@ -0,0 +1,389 @@
+<span
+  matBadge="4"
+  matBadgeOverlap="false"
+  matBadgeColor="primary"
+  matBadgePosition="below after"
+>
+  <onemrva-mat-avatar
+    initials="LS"
+    color="accent"
+    size="large"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="4"
+  matBadgeOverlap="false"
+  matBadgeColor="accent"
+  matBadgePosition="below after"
+>
+  <onemrva-mat-avatar
+    initials="LS"
+    color="accent"
+    size="large"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="\uef44"
+  matBadgeOverlap="false"
+  matBadgeColor="warn"
+  matBadgePosition="below after"
+>
+  <onemrva-mat-avatar
+    initials="LS"
+    color="accent"
+    size="large"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="\uf108"
+  matBadgeOverlap="false"
+  matBadgeColor="error"
+  matBadgePosition="below after"
+>
+  <onemrva-mat-avatar
+    initials="LS"
+    color="accent"
+    size="large"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="\ueb8b"
+  matBadgeOverlap="false"
+  matBadgeColor="info"
+  matBadgePosition="below after"
+>
+  <onemrva-mat-avatar
+    initials="LS"
+    color="accent"
+    size="large"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="\ue5ca"
+  matBadgeOverlap="false"
+  matBadgeColor="success"
+  matBadgePosition="below after"
+>
+  <onemrva-mat-avatar
+    initials="LS"
+    color="accent"
+    size="large"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="\ue5cd"
+  matBadgeOverlap="false"
+  matBadgeColor="grayscale"
+  matBadgePosition="below after"
+>
+  <onemrva-mat-avatar
+    initials="LS"
+    color="accent"
+    size="large"
+  ></onemrva-mat-avatar>
+</span>
+<br />
+<span
+  matBadge="\ue5ca"
+  matBadgeOverlap="false"
+  matBadgePosition="above before"
+  matBadgeSize="large"
+  matBadgeColor="success"
+>
+  <onemrva-mat-avatar
+    icon="account_circle"
+    color="accent"
+    size="extralarge"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="4"
+  matBadgeOverlap="false"
+  matBadgePosition="above after"
+  matBadgeSize="large"
+>
+  <onemrva-mat-avatar
+    icon="account_circle"
+    color="accent"
+    size="extralarge"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="20"
+  matBadgeOverlap="false"
+  matBadgePosition="below after"
+  matBadgeSize="large"
+  matBadgeColor="accent"
+>
+  <onemrva-mat-avatar
+    src="https://images.pexels.com/photos/10697872/pexels-photo-10697872.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
+    color="accent"
+    size="extralarge"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="100"
+  matBadgeOverlap="false"
+  matBadgePosition="below before"
+  matBadgeSize="large"
+  matBadgeColor="warn"
+>
+  <onemrva-mat-avatar
+    initials="LS"
+    color="accent"
+    size="extralarge"
+  ></onemrva-mat-avatar>
+</span>
+<br />
+<span
+  matBadge="\ue5ca"
+  matBadgeOverlap="false"
+  matBadgePosition="above before"
+  matBadgeSize="medium"
+  matBadgeColor="success"
+>
+  <onemrva-mat-avatar
+    icon="account_circle"
+    color="accent"
+    size="large"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="4"
+  matBadgeOverlap="false"
+  matBadgePosition="above after"
+  matBadgeSize="medium"
+>
+  <onemrva-mat-avatar
+    icon="account_circle"
+    color="accent"
+    size="large"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="4"
+  matBadgeOverlap="false"
+  matBadgePosition="below after"
+  matBadgeSize="medium"
+  matBadgeColor="accent"
+>
+  <onemrva-mat-avatar
+    src="https://images.pexels.com/photos/10697872/pexels-photo-10697872.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
+    color="accent"
+    size="large"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="100"
+  matBadgeOverlap="false"
+  matBadgePosition="below before"
+  matBadgeSize="medium"
+  matBadgeColor="warn"
+>
+  <onemrva-mat-avatar
+    initials="LS"
+    color="accent"
+    size="large"
+  ></onemrva-mat-avatar>
+</span>
+<br />
+<span
+  matBadge="\ue5ca"
+  matBadgeOverlap="false"
+  matBadgePosition="above before"
+  matBadgeSize="medium"
+  matBadgeColor="success"
+>
+  <onemrva-mat-avatar
+    icon="account_circle"
+    color="accent"
+    size="medium"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="4"
+  matBadgeOverlap="false"
+  matBadgePosition="above after"
+  matBadgeSize="medium"
+>
+  <onemrva-mat-avatar
+    icon="account_circle"
+    color="accent"
+    size="medium"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="4"
+  matBadgeOverlap="false"
+  matBadgePosition="below after"
+  matBadgeSize="medium"
+  matBadgeColor="accent"
+>
+  <onemrva-mat-avatar
+    src="https://images.pexels.com/photos/10697872/pexels-photo-10697872.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
+    color="accent"
+    size="medium"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="100"
+  matBadgeOverlap="false"
+  matBadgePosition="below before"
+  matBadgeSize="medium"
+  matBadgeColor="warn"
+>
+  <onemrva-mat-avatar
+    initials="LS"
+    color="accent"
+    size="medium"
+  ></onemrva-mat-avatar>
+</span>
+<br />
+<span
+  matBadge="\ue5ca"
+  matBadgeOverlap="false"
+  matBadgePosition="above before"
+  matBadgeSize="small"
+  matBadgeColor="success"
+>
+  <onemrva-mat-avatar
+    icon="account_circle"
+    color="accent"
+    size="small"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="4"
+  matBadgeOverlap="false"
+  matBadgePosition="above after"
+  matBadgeSize="small"
+>
+  <onemrva-mat-avatar
+    icon="account_circle"
+    color="accent"
+    size="small"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="4"
+  matBadgeOverlap="false"
+  matBadgePosition="below after"
+  matBadgeSize="small"
+  matBadgeColor="accent"
+>
+  <onemrva-mat-avatar
+    src="https://images.pexels.com/photos/10697872/pexels-photo-10697872.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
+    color="accent"
+    size="small"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="100"
+  matBadgeOverlap="false"
+  matBadgePosition="below before"
+  matBadgeSize="small"
+  matBadgeColor="warn"
+>
+  <onemrva-mat-avatar
+    initials="LS"
+    color="accent"
+    size="small"
+  ></onemrva-mat-avatar>
+</span>
+<br />
+<span
+  matBadge="\ue5ca"
+  matBadgeOverlap="false"
+  matBadgePosition="above before"
+  matBadgeSize="small"
+  matBadgeColor="success"
+>
+  <onemrva-mat-avatar
+    icon="account_circle"
+    color="accent"
+    size="extrasmall"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="4"
+  matBadgeOverlap="false"
+  matBadgePosition="above after"
+  matBadgeSize="small"
+>
+  <onemrva-mat-avatar
+    icon="account_circle"
+    color="accent"
+    size="extrasmall"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="4"
+  matBadgeOverlap="false"
+  matBadgePosition="below after"
+  matBadgeSize="small"
+  matBadgeColor="accent"
+>
+  <onemrva-mat-avatar
+    src="https://images.pexels.com/photos/10697872/pexels-photo-10697872.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
+    color="accent"
+    size="small"
+  ></onemrva-mat-avatar>
+</span>
+<span
+  matBadge="100"
+  matBadgeOverlap="false"
+  matBadgePosition="below before"
+  matBadgeSize="small"
+  matBadgeColor="warn"
+>
+  <onemrva-mat-avatar
+    initials="LS"
+    color="accent"
+    size="extrasmall"
+  ></onemrva-mat-avatar>
+</span>
+<p>
+  <span
+    matBadge="4"
+    matBadgeOverlap="false"
+    matBadgePosition="above before"
+    matBadgeColor="warn"
+    matBadgeSize="small"
+    matBadgeDescription="Badge of the text"
+    matBadgeHidden="false"
+    >Text with a badge</span
+  >
+  <span matBadge="1" matBadgeSize="small" matBadgePosition="above before"
+    >Text with large badge</span
+  >
+  <span matBadge="1" matBadgeSize="medium" matBadgePosition="above before"
+    >Text with large badge</span
+  >
+  <span matBadge="1" matBadgeSize="large" matBadgePosition="above before"
+    >Text with large badge</span
+  >
+  <br />
+  <span matBadge="1" matBadgeSize="small" matBadgePosition="above after">
+    <button mat-flat-button disableRipple color="accent" aria-label="Home">
+      <mat-icon>home</mat-icon> Home
+    </button>
+  </span>
+  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+  <span matBadge="1" matBadgeSize="medium" matBadgePosition="above before">
+    <button mat-flat-button disableRipple color="accent" aria-label="Home">
+      <mat-icon>home</mat-icon> Home
+    </button>
+  </span>
+  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+  <span matBadge="1" matBadgeSize="medium" matBadgePosition="below before">
+    <button mat-flat-button disableRipple color="accent" aria-label="Home">
+      <mat-icon>home</mat-icon> Home
+    </button>
+  </span>
+  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+  <span matBadge="1" matBadgeSize="large" matBadgePosition="below after">
+    <button mat-flat-button disableRipple color="accent" aria-label="Home">
+      <mat-icon>home</mat-icon> Home
+    </button>
+  </span>
+</p>

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

@@ -0,0 +1,4 @@
+
+onemrva-mat-avatar{
+  margin: 20px;
+}

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

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+import { OnemrvaMatBadgeModule } from '../../../../../onemrva/design-system/mat-badge';
+import { OnemrvaMatAvatarModule } from '../../../../../onemrva/design-system/mat-avatar';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'app-demo-badge',
+  standalone: true,
+  imports: [
+    CommonModule,
+    OnemrvaMatBadgeModule,
+    OnemrvaMatAvatarModule,
+    MatIconModule,
+    MatButtonModule,
+  ],
+  templateUrl: 'demo-badge.component.html',
+  styleUrls: ['demo-badge.component.scss'],
+})
+export class DemoBadgeComponent {}

package/projects/test/src/app/demos/badge/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.badge(theme.$onemrva-theme);
+}
+```
+
+# Changelog
+
+## 14.1.604
+
+Migration to @onemrvapublic/design-system library
+
+## 14.1.441
+
+Compliant version with DS4

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

@@ -0,0 +1,20 @@
+<onemrva-mat-breadcrumb></onemrva-mat-breadcrumb>
+<a routerLink="/breadcrumb/level-1">level-1</a>
+<br />
+<a routerLink="/breadcrumb/level-1/level-2">level-2</a>
+<br />
+<a routerLink="/breadcrumb/level-1/level-2/level-3">level-3</a>
+<br />
+<a routerLink="/breadcrumb/level-1/level-2/level-3/level-4">level-4</a>
+<br />
+<a routerLink="/breadcrumb/level-1/level-2/level-3/level-4/level-5">level-5</a>
+<br />
+<a routerLink="/breadcrumb/level-1/level-2/level-3/level-4/level-5/level-6"
+  >level-6</a
+>
+<br />
+<a
+  routerLink="/breadcrumb/level-1/level-2/level-3/level-4/level-5/level-6/level-7"
+>
+  level-7
+</a>

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

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'app-demo-breadcrumb',
+    templateUrl: 'demo-breadcrumb.component.html'
+})
+export class DemoBreadcrumbComponent {}

package/projects/test/src/app/demos/breadcrumb/demo-breadcrumb.module.ts

@@ -0,0 +1,89 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DemoBreadcrumbComponent } from './demo-breadcrumb.component';
+import { Route, RouterModule } from '@angular/router';
+import { OnemrvaMatBreadcrumbModule } from '../../../../../onemrva/design-system/mat-breadcrumb';
+
+const routes: Route[] = [
+  {
+    path: '',
+    component: DemoBreadcrumbComponent,
+    data: {
+      navigationTitle: 'Breadcrumb',
+    },
+    children: [
+      {
+        path: 'level-1',
+        component: DemoBreadcrumbComponent,
+        data: {
+          navigationTitle: 'level 1',
+        },
+        children: [
+          {
+            path: 'level-2',
+            component: DemoBreadcrumbComponent,
+            data: {
+              navigationTitle: 'level 2',
+            },
+            children: [
+              {
+                path: 'level-3',
+                component: DemoBreadcrumbComponent,
+                data: {
+                  navigationTitle: 'level 3',
+                },
+                children: [
+                  {
+                    path: 'level-4',
+                    component: DemoBreadcrumbComponent,
+                    data: {
+                      navigationTitle: 'level 4',
+                    },
+                    children: [
+                      {
+                        path: 'level-5',
+                        component: DemoBreadcrumbComponent,
+                        data: {
+                          navigationTitle: 'level 5',
+                        },
+                        children: [
+                          {
+                            path: 'level-6',
+                            component: DemoBreadcrumbComponent,
+                            data: {
+                              navigationTitle: 'level 6',
+                            },
+                            children: [
+                              {
+                                path: 'level-7',
+                                component: DemoBreadcrumbComponent,
+                                data: {
+                                  navigationTitle: 'level 7',
+                                },
+                              },
+                            ],
+                          },
+                        ],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+@NgModule({
+  declarations: [DemoBreadcrumbComponent],
+  imports: [
+    CommonModule,
+    OnemrvaMatBreadcrumbModule,
+    RouterModule.forChild(routes),
+  ],
+})
+export class DemoBreadcrumbModule {}

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

@@ -0,0 +1,29 @@
+# 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();
+}
+```
+
+# Changelog
+
+## 14.1.604
+
+Migration to @onemrvapublic/design-system library
+
+## 14.1.441
+
+Compliant version with DS4

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

@@ -0,0 +1,10 @@
+<mat-form-field>
+  <mat-label>Choose a date</mat-label>
+  <input matInput [matDatepicker]="picker" [mask]="'99/99/9999'" />
+  <mat-hint>DD/MM/YYYY</mat-hint>
+  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+  <mat-datepicker
+    #picker
+    [calendarHeaderComponent]="onemrvaMatDatepickerHeader"
+  ></mat-datepicker>
+</mat-form-field>

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

@@ -0,0 +1,5 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { OnemrvaMatDatepickerHeader } from '../../../../../onemrva/design-system/mat-datepicker-header';
+import { FormControl } from '@angular/forms';
+
+@Component({
+  selector: 'app-demo-datepicker',
+  templateUrl: './demo-datepicker.component.html',
+  styleUrls: ['./demo-datepicker.component.scss'],
+})
+export class DemoDatepickerComponent {
+  onemrvaMatDatepickerHeader = OnemrvaMatDatepickerHeader;
+}

package/projects/test/src/app/demos/datepicker/demo-datepicker.module.ts

@@ -0,0 +1,43 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { DemoDatepickerComponent } from './demo-datepicker.component';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatInputModule } from '@angular/material/input';
+import { MatNativeDateModule } from '@angular/material/core';
+import { OnemrvaMatDatepickerHeader } from '../../../../../onemrva/design-system/mat-datepicker-header/';
+import {
+  NgxMaskDirective,
+  NgxMaskPipe,
+  provideEnvironmentNgxMask,
+} from 'ngx-mask';
+import { Route, RouterModule } from '@angular/router';
+
+const routes: Route[] = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: DemoDatepickerComponent,
+  },
+];
+
+@NgModule({
+  declarations: [DemoDatepickerComponent],
+  imports: [
+    CommonModule,
+    MatDatepickerModule,
+    MatNativeDateModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatInputModule,
+    OnemrvaMatDatepickerHeader,
+    NgxMaskDirective,
+    NgxMaskPipe,
+    RouterModule.forChild(routes),
+  ],
+  providers: [provideEnvironmentNgxMask()],
+  bootstrap: [DemoDatepickerComponent],
+})
+export class DemoDatepickerModule {}