@onemrvapublic/design-system 0.0.0

package/projects/test/src/app/demos/table/demo-table-datasource.ts

@@ -0,0 +1,140 @@
+import { DataSource } from '@angular/cdk/collections';
+import { MatSort } from '@angular/material/sort';
+import { map } from 'rxjs/operators';
+import { BehaviorSubject, merge, Observable } from 'rxjs';
+import {OnemrvaMatPaginatorComponent} from "../../../../../onemrva/design-system/mat-paginator";
+
+// TODO: Replace this with your own data model type
+export interface ListItem {
+    name: string;
+    id: number;
+}
+
+// TODO: replace this with real data from your application
+const EXAMPLE_DATA: ListItem[] = [
+    { id: 1, name: 'Hydrogen' },
+    { id: 2, name: 'Helium' },
+    { id: 3, name: 'Lithium' },
+    { id: 4, name: 'Beryllium' },
+    { id: 5, name: 'Boron' },
+    { id: 6, name: 'Carbon' },
+    { id: 7, name: 'Nitrogen' },
+    { id: 8, name: 'Oxygen' },
+    { id: 9, name: 'Fluorine' },
+    { id: 10, name: 'Neon' },
+    { id: 11, name: 'Sodium' },
+    { id: 12, name: 'Magnesium' },
+    { id: 13, name: 'Aluminum' },
+    { id: 14, name: 'Silicon' },
+    { id: 15, name: 'Phosphorus' },
+    { id: 16, name: 'Sulfur' },
+    { id: 17, name: 'Chlorine' },
+    { id: 18, name: 'Argon' },
+    { id: 19, name: 'Potassium' },
+    { id: 20, name: 'Calcium' },
+    { id: 21, name: 'Scandium' },
+    { id: 22, name: 'Titanium' },
+    { id: 23, name: 'Vanadium' },
+    { id: 24, name: 'Chromium' },
+];
+
+/**
+ * Data source for the List view. This class should
+ * encapsulate all logic for fetching and manipulating the displayed data
+ * (including sorting, pagination, and filtering).
+ */
+export class ListDataSource extends DataSource<ListItem> {
+    data: ListItem[] = EXAMPLE_DATA;
+    paginator!: OnemrvaMatPaginatorComponent;
+    sort: MatSort | undefined;
+    data$: BehaviorSubject<ListItem[]> = new BehaviorSubject<ListItem[]>([]);
+
+    constructor() {
+        super();
+        this.data$.next(this.data);
+    }
+
+    /**
+     * Connect this data source to the table. The table will only update when
+     * the returned stream emits new items.
+     * @returns A stream of the items to be rendered.
+     */
+    connect(): Observable<ListItem[]> {
+        if (this.sort) {
+            // Combine everything that affects the rendered data into one update
+            // stream for the data-table to consume.
+            return merge(this.data$, this.sort.sortChange).pipe(
+                map(() => {
+                    return this.getPagedData(this.getSortedData([...this.data]));
+                })
+            );
+        } else {
+            throw Error('Please set the sort on the data source before connecting.');
+        }
+    }
+
+    /**
+     *  Called when the table is being destroyed. Use this function, to clean up
+     * any open connections or free any held resources that were set up during connect.
+     */
+    disconnect(): void {}
+
+    /**
+     * Paginate the data (client-side). If you're using server-side pagination,
+     * this would be replaced by requesting the appropriate data from the server.
+     */
+    private getPagedData(data: ListItem[]): ListItem[] {
+        if (this.paginator) {
+            const startIndex = this.paginator.pageIndex * this.paginator.pageSize;
+            return data.splice(startIndex, this.paginator.pageSize);
+        } else {
+            return data;
+        }
+    }
+
+    /**
+     * Sort the data (client-side). If you're using server-side sorting,
+     * this would be replaced by requesting the appropriate data from the server.
+     */
+    private getSortedData(data: ListItem[]): ListItem[] {
+        if (!this.sort || !this.sort.active || this.sort.direction === '') {
+            return data;
+        }
+
+        return data.sort((a, b) => {
+            const isAsc = this.sort?.direction === 'asc';
+            switch (this.sort?.active) {
+                case 'name':
+                    return compare(a.name, b.name, isAsc);
+                case 'id':
+                    return compare(+a.id, +b.id, isAsc);
+                default:
+                    return 0;
+            }
+        });
+    }
+
+    /**
+     * @param row
+     */
+    public remove(row: ListItem) {
+        let idx = this.data.indexOf(row);
+        if (idx >= 0) {
+            this.data.splice(idx, 1);
+            this.paginator.length = this.data.length;
+        }
+        this.data$.next(this.data);
+    }
+
+    /**
+     *
+     */
+    public touch() {
+        this.data$.next(this.data);
+    }
+}
+
+/** Simple sort comparator for example ID/Name columns (for client-side sorting). */
+function compare(a: string | number, b: string | number, isAsc: boolean): number {
+    return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
+}

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

@@ -0,0 +1,41 @@
+<table mat-table class="full-width-table" matSort aria-label="Elements">
+    <!-- Id Column -->
+    <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
+        <td mat-cell *matCellDef="let row">{{ row.id }}</td>
+    </ng-container>
+
+    <!-- Name Column -->
+    <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
+        <td mat-cell *matCellDef="let row">{{ row.name }}</td>
+    </ng-container>
+
+    <!-- Star Column -->
+    <ng-container matColumnDef="more">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let row">
+            <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="More"><mat-icon>more_vert</mat-icon></button>
+            <mat-menu #menu="matMenu">
+                <button mat-menu-item (click)="edit(row)" aria-label="Edit"><mat-icon>edit</mat-icon>Edit</button>
+                <button mat-menu-item (click)="delete(row)" aria-label="Delete"><mat-icon>delete</mat-icon>Delete</button>
+                <button mat-menu-item (click)="share(row)" aria-label="Share"><mat-icon>share</mat-icon>Share</button>
+            </mat-menu>
+        </td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+</table>
+<p>
+    <onemrva-mat-paginator
+        [pageSize]="10"
+        [pageIndex]="0"
+        [length]="dataSource.data.length"
+        (page)="changePage($event)"
+        previousKey="Previous"
+        nextKey="Next"
+        #paginator
+    ></onemrva-mat-paginator>
+    <br />
+</p>

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

@@ -0,0 +1,17 @@
+.full-width-table {
+  width: 100%;
+}
+.cdk-column-more {
+  width: 100px;
+}
+.cdk-column-id {
+  width: 60px;
+}
+onemrva-mat-paginator {
+  margin: 8px;
+  float: right;
+}
+//.onemrva-mat-paginator {
+//  text-align: center !important;
+//  display: block !important;
+//}

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

@@ -0,0 +1,51 @@
+import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { MatTable } from '@angular/material/table';
+import { ListDataSource, ListItem } from './demo-table-datasource';
+import {OnemrvaMatPaginatorComponent} from "../../../../../onemrva/design-system/mat-paginator";
+import {PageEvent} from "@angular/material/paginator";
+
+@Component({
+    selector: 'app-demo-table',
+    templateUrl: './demo-table.component.html',
+    styleUrls: ['./demo-table.component.scss'],
+})
+export class DemoTableComponent implements AfterViewInit {
+    @ViewChild(OnemrvaMatPaginatorComponent) paginator!: OnemrvaMatPaginatorComponent;
+    @ViewChild(MatSort) sort!: MatSort;
+    @ViewChild(MatTable) table!: MatTable<ListItem>;
+    dataSource: ListDataSource;
+
+    /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
+    displayedColumns = ['id', 'name', 'more'];
+
+    constructor() {
+        this.dataSource = new ListDataSource();
+    }
+
+    ngAfterViewInit(): void {
+        this.dataSource.sort = this.sort;
+        this.dataSource.paginator = this.paginator;
+        this.table.dataSource = this.dataSource;
+    }
+
+    edit(row: ListItem) {
+        alert(`Edit row n°${row.id}: ${row.name}`);
+    }
+
+    delete(row: ListItem) {
+        this.dataSource.remove(row);
+    }
+
+    share(row: ListItem) {
+        alert(`Share row n°${row.id}: ${row.name}`);
+    }
+
+    changePage(event: PageEvent) {
+      if (this.dataSource.paginator !== undefined) {
+        this.dataSource.paginator.pageSize = event.pageSize;
+        this.dataSource.paginator.pageIndex = event.pageIndex;
+        this.dataSource.touch();
+      }
+    }
+}

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

@@ -0,0 +1,45 @@
+import { NgModule} from '@angular/core';
+import { CommonModule} from "@angular/common";
+
+import {MatCardModule} from "@angular/material/card";
+import {MatChipsModule} from "@angular/material/chips";
+import {MatTableModule} from "@angular/material/table";
+import {MatSortModule} from "@angular/material/sort";
+import {MatIconModule} from "@angular/material/icon";
+import {MatMenuModule} from "@angular/material/menu";
+import {MatButtonModule} from "@angular/material/button";
+import {DemoTableComponent} from "./demo-table.component";
+import {OnemrvaMatPaginatorModule} from "../../../../../onemrva/design-system/mat-paginator";
+import {Route, RouterModule} from "@angular/router";
+import {DemoPanelComponent} from "../panel/demo-panel.component";
+const routes: Route[] = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: DemoTableComponent,
+  },
+];
+@NgModule({
+    declarations: [
+        DemoTableComponent
+    ],
+    imports: [
+        CommonModule,
+        MatCardModule,
+        MatChipsModule,
+        MatTableModule,
+        MatSortModule,
+        MatIconModule,
+        MatMenuModule,
+        MatButtonModule,
+        OnemrvaMatPaginatorModule,
+      RouterModule.forChild(routes),
+    ],
+    providers: [],
+    bootstrap: [
+        DemoTableComponent
+    ],
+})
+export class DemoTableModule {
+
+}

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

@@ -0,0 +1,27 @@
+# Installation
+
+```bash
+npm install --save @onemrvapublic/theme
+```
+
+In style.scss:
+
+```scss
+@use '@onemrvapublic/theme' as theme;
+
+@include theme.reset();
+
+.onemrva-theme {
+    @include theme.onemrva();
+}
+```
+
+# Changelog
+
+## @onemrvapublic/theme 15.0.38
+
+Upgrade to Angular 15
+
+## 14.1.441
+
+Compliant version with DS4

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

@@ -0,0 +1,37 @@
+<onemrva-mat-task-list>
+  <onemrva-mat-task color="" icon="home">
+    <onemrva-mat-task-title> Go home</onemrva-mat-task-title>
+    <onemrva-mat-task-content>
+      <p>
+        Just call a cab...
+      </p>
+    </onemrva-mat-task-content>
+  </onemrva-mat-task>
+
+  <onemrva-mat-task color="" bubble="2">
+    <onemrva-mat-task-title> Drink some water</onemrva-mat-task-title>
+    <onemrva-mat-task-content>
+      <p>
+        Stay hydrated...
+      </p>
+    </onemrva-mat-task-content>
+  </onemrva-mat-task>
+
+  <onemrva-mat-task [disabled]="disabled" [form]="formControl">
+    <onemrva-mat-task-title> Don't do this</onemrva-mat-task-title>
+    <onemrva-mat-task-content>
+      <p>
+        This is why it is disabled...
+      </p>
+    </onemrva-mat-task-content>
+  </onemrva-mat-task>
+
+  <onemrva-mat-task color="error" [form]="formControl1">
+    <onemrva-mat-task-title> Did you fail this task ?</onemrva-mat-task-title>
+    <onemrva-mat-task-content>
+      <p>
+        Dunno? It is red !
+      </p>
+    </onemrva-mat-task-content>
+  </onemrva-mat-task>
+</onemrva-mat-task-list>

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

@@ -0,0 +1,3 @@
+onemrva-mat-task-list {
+    margin: 8px 0;
+}

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {FormControl} from "@angular/forms";
+
+@Component({
+    selector: 'app-demo-task-list',
+    styleUrls: ['demo-task-list.component.scss'],
+    templateUrl: 'demo-task-list.component.html',
+})
+export class DemoTaskListComponent {
+  checkbox: any;
+  disabled:  boolean = true;
+  formControl: FormControl = new FormControl(false);
+  formControl1: FormControl = new FormControl(false);
+}

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

@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { DemoTaskListComponent } from './demo-task-list.component';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { Route, RouterModule } from '@angular/router';
+import { OnemrvaMatTaskListModule } from '../../../../../onemrva/design-system/mat-task-list';
+import {ReactiveFormsModule} from "@angular/forms";
+
+const routes: Route[] = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: DemoTaskListComponent,
+  },
+];
+
+@NgModule({
+  declarations: [DemoTaskListComponent],
+  imports: [
+    CommonModule,
+    OnemrvaMatTaskListModule,
+    MatButtonModule,
+    MatIconModule,
+    RouterModule.forChild(routes),
+    ReactiveFormsModule,
+  ],
+})
+export class DemoTaskListModule {}

package/projects/test/src/app/demos/task-list/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 onemrvaMat.task-list(theme.$onemrva-theme);
+}
+```
+
+# Changelog
+
+## 14.1.604
+
+TaskLists initial version

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

@@ -0,0 +1,9 @@
+<form [formGroup]="form">
+    <mat-form-field class="example-full-width">
+        <mat-label>Time</mat-label>
+        <input formControlName="time" matInput [matTimepicker]="timepicker">
+        <mat-timepicker-toggle aria-label="Pick a time" matSuffix [for]="timepicker"></mat-timepicker-toggle>
+        <mat-timepicker color="accent" #timepicker></mat-timepicker>
+    </mat-form-field>
+    <div>Reactive Form Value: {{form.value.time?.toLocaleTimeString() | json}}</div>
+</form>

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

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { OnemrvaMatTimepickerModule } from '../../../../../onemrva/design-system/mat-timepicker';
+
+@Component({
+  selector: 'app-demo-timepicker',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatFormFieldModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    OnemrvaMatTimepickerModule,
+  ],
+  templateUrl: 'demo-timepicker.component.html',
+})
+export class DemoTimepickerComponent implements OnInit {
+  public form = new FormGroup({
+    time: new FormControl(),
+    time2: new FormControl(),
+  });
+
+  ngOnInit(): void {
+    this.form.get('time')?.setValue(new Date());
+  }
+}

package/projects/test/src/app/demos/timepicker/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 onemrvaMat.timepicker(theme.$onemrva-theme);
+}
+```
+
+# Changelog
+
+## 14.1.XXX
+
+Thibaut, tu as oublié de mettre à jour le changeLog

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

@@ -0,0 +1,8 @@
+<p><a (click)="joke1()">How do celebrities stay cool?</a></p>
+<button mat-flat-button color="accent" (click)="yes()" data-cy="like">
+  Like
+</button>
+<button mat-stroked-button color="primary" (click)="no()">
+  Send complaint
+</button>
+<button mat-stroked-button color="error" (click)="error()">Error</button>

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

@@ -0,0 +1,3 @@
+button {
+    margin: 8px;
+}

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

@@ -0,0 +1,61 @@
+import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatSnackBar } from '@angular/material/snack-bar';
+
+import { CommonModule } from '@angular/common';
+import {
+  OnemrvaMatToastComponent,
+  ToastType,
+} from '../../../../../onemrva/design-system/mat-toast';
+
+@Component({
+  selector: 'app-demo-toast',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule],
+  styleUrls: ['demo-toast.component.scss'],
+  templateUrl: 'demo-toast.component.html',
+})
+export class DemoToastComponent {
+  constructor(private snackBar: MatSnackBar) {}
+
+  joke1() {
+    this.snackBar.openFromComponent(OnemrvaMatToastComponent, {
+      data: {
+        type: ToastType.info,
+        message: 'They have many fans.',
+      },
+      politeness: 'off',
+      duration: 5000,
+    });
+  }
+
+  yes() {
+    this.snackBar.openFromComponent(OnemrvaMatToastComponent, {
+      data: {
+        type: ToastType.success,
+        message: 'Feedback sent!',
+      },
+      politeness: 'polite',
+    });
+  }
+
+  no() {
+    this.snackBar.openFromComponent(OnemrvaMatToastComponent, {
+      data: {
+        type: ToastType.warn,
+        message: 'Technical issue. Please try again later',
+      },
+      politeness: 'assertive',
+    });
+  }
+
+  error() {
+    this.snackBar.openFromComponent(OnemrvaMatToastComponent, {
+      data: {
+        type: ToastType.error,
+        message: "Technical error. Please don't try again",
+      },
+      politeness: 'assertive',
+    });
+  }
+}

package/projects/test/src/app/demos/toast/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.toast(theme.$onemrva-theme);
+}
+```
+
+# Changelog
+
+## 14.1.604
+
+Migration to @onemrvapublic/design-system library
+
+## 14.1.439
+
+Initial version of ONEM/RVA toasts