@onemrvapublic/design-system 0.0.0

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

@@ -0,0 +1,53 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import {debounceTime, Observable, map} from "rxjs";
+import {startWith} from "rxjs/operators";
+
+@Component({
+  selector: 'app-demo-multiselect',
+  templateUrl: './demo-multiselect.component.html',
+  styleUrls: ['./demo-multiselect.component.scss'],
+})
+export class DemoMultiSelectComponent {
+  toppings: FormControl = new FormControl('');
+  toppingList: string[] = [
+    'Arugula',
+    'Beef',
+    'Cale',
+    'Egg',
+    'Eggplant',
+    'Extra cheese',
+    'Ham',
+    'Mushroom',
+    'Onion',
+    'Parmesan',
+    'Paprika',
+    'Pepper',
+    'Pepperoni',
+    'Raisin',
+    'Sausage',
+    'Tomato'
+  ];
+  toppingList$ : Observable<string[]>;
+
+  multiselect = new FormControl();
+
+  public filterCtrl: FormControl<string | null> = new FormControl<string>('');
+
+  constructor(
+  ) {
+
+    this.toppingList$ = this.filterCtrl.valueChanges.pipe(
+      debounceTime(400),
+      startWith(''),
+      map( (search : any) => {
+        return this.toppingList.filter(
+          (value : string) => {
+            if (!search || search === '') return this.toppings;
+            return value.toLowerCase().indexOf(search.toLowerCase()) > -1
+          }
+        )
+      })
+    );
+  }
+}

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

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { DemoMultiSelectComponent } from './demo-multiselect.component';
+
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatSelectModule } from '@angular/material/select';
+import { MatInputModule } from '@angular/material/input';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { Route, RouterModule } from '@angular/router';
+import {MatSelectSearchModule} from "@onemrvapublic/design-system/mat-select-search";
+import {OnemrvaMatMultiSelectModule} from "../../../../../onemrva/design-system/mat-multi-select";
+
+const routes: Route[] = [
+  {
+    path: '',
+    component: DemoMultiSelectComponent,
+    data: {
+      navigationTitle: 'Multiselect',
+    },
+  },
+];
+
+@NgModule({
+  declarations: [DemoMultiSelectComponent],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        TranslateModule,
+        MatInputModule,
+        MatSelectModule,
+        MatFormFieldModule,
+        MatSelectSearchModule,
+        RouterModule.forChild(routes),
+        OnemrvaMatMultiSelectModule,
+    ],
+})
+export class DemoMultiselectModule {}

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

@@ -0,0 +1,34 @@
+# Installation
+
+```bash
+npm install --save @onemrvapublic/theme
+npm install --save @onemrvapublic/design-system // for the multi-select only
+```
+
+In style.scss:
+
+```scss
+@use "@onemrvapublic/theme" as theme;
+@use "../../material" as onemrvaMat; // for the multiselect only
+
+@include theme.reset();
+
+.onemrva-theme {
+  @include theme.onemrva();
+  @include onemrvaMat.multiselect(
+    theme.$onemrva-theme
+  ); // for the multiselect only
+}
+```
+
+Import MatButtonModule in your module (and MatIconModule if you want to use icons inside the buttons)
+
+# Changelog
+
+## 14.1.764
+
+Added custom ONEM/RVA multi select
+
+## 14.1.441
+
+Compliant version with DS4

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

@@ -0,0 +1,21 @@
+<page-not-found>
+    <page-not-found-action>
+        <button mat-stroked-button color="primary" (click)="contact()"><mat-icon>email</mat-icon> {{ '404.contact.us' | translate }}</button>
+    </page-not-found-action>
+    <page-not-found-action>
+        <button mat-flat-button color="accent" (click)="home()"><mat-icon>home</mat-icon> {{ '404.go.back' | translate }}</button>
+    </page-not-found-action>
+    <page-not-found-extra>
+        <h2>
+            {{ '404.extra' | translate }}
+        </h2>
+
+        <mat-form-field style="width: 400px">
+            <mat-label for="searchInput">{{ '404.search.input.label' | translate }}</mat-label>
+            <input id="searchInput" matInput [formControl]="searchInput" />
+            <mat-icon matSuffix>search</mat-icon>
+        </mat-form-field>
+        <br />
+        <button mat-flat-button color="accent" (click)="search()">Search</button>
+    </page-not-found-extra>
+</page-not-found>

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

@@ -0,0 +1,6 @@
+.extra {
+    margin-bottom: 32px;
+    font-size: 24px;
+    line-height: 36px;
+    font-weight: 700;
+}

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

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { OnemrvaPageNotFoundModule } from '../../../../../onemrva/design-system/page-not-found';
+
+@Component({
+  selector: 'app-demo-not-found',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatFormFieldModule,
+    MatIconModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    MatInputModule,
+    MatButtonModule,
+    OnemrvaPageNotFoundModule,
+  ],
+  styleUrls: ['./demo-not-found.component.scss'],
+  templateUrl: 'demo-not-found.component.html',
+})
+export class DemoNotFoundComponent {
+  searchInput: FormControl = new FormControl('');
+
+  constructor() {}
+
+  search() {
+    if (this.searchInput.value.trim() !== '') {
+      // Do not try this at home!
+      // Use the usual Router when you play with the url.
+      // We use the window object so we can make it work in wordpress
+      window.location.href = '/?s=' + this.searchInput.value.trim();
+    }
+  }
+
+  contact() {
+    window.location.href = '/contact';
+  }
+
+  home() {
+    window.location.href = '/';
+  }
+}

package/projects/test/src/app/demos/not-found/readme.md

@@ -0,0 +1,44 @@
+# Installation
+
+```bash
+npm install --save @onemrvapublic/theme
+npm install --save @onemrvapublic/design-system
+```
+
+In angular.json, add the following configuration in projects/(projectName)/architect/build/options/assets:
+
+```
+    {
+    "glob": "**/*",
+    "input": "node_modules/@onemrvapublic/design-system/page-not-found/assets",
+    "output": "/assets/"
+    }
+```
+
+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.pageNotFound(theme.$onemrva-theme);
+}
+```
+
+# Changelog
+
+## 14.1.651
+
+Fix background shape
+
+## 14.1.604
+
+Migration from @onemrvapublic/core to @onemrvapublic/design-system
+
+## 14.1.512
+
+Draft version

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

@@ -0,0 +1,5 @@
+<onemrva-mat-notification
+  message="importantMessage"
+  color="success"
+  [closable]="false"
+></onemrva-mat-notification>

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

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

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

@@ -0,0 +1,35 @@
+<h3>type = 'default'</h3>
+<p>
+  The default paginator shows pages 5 by 5 except if there are only 6 remaining
+  pages. Buttons '...' are fast back/forward.
+</p>
+
+<onemrva-mat-paginator
+  [pageIndex]="pageIndex"
+  [pageSize]="10"
+  [length]="69"
+  (page)="changePage($event)"
+  recordKey="recordsPerpage"
+  #paginator
+>
+</onemrva-mat-paginator>
+
+<br />
+
+<h3>type = 'complex'</h3>
+
+<p>
+  To get the complex paginator, you need to set the type to 'complex'. It shows
+  pages 5 by 5 except if there are max 7 remaining pages. Buttons '...' are fast
+  back/forward. First and last pages are always reachable.
+</p>
+
+<onemrva-mat-paginator
+  [pageIndex]="pageIndex2"
+  [pageSize]="20"
+  [length]="339"
+  type="complex"
+  (onRequestPage)="changePageIndex($event)"
+  #paginator
+>
+</onemrva-mat-paginator>

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { OnemrvaMatPaginatorModule } from '../../../../../onemrva/design-system/mat-paginator';
+import {PageEvent} from "@angular/material/paginator";
+
+@Component({
+  selector: 'app-demo-paginator',
+  standalone: true,
+  imports: [CommonModule, TranslateModule, OnemrvaMatPaginatorModule],
+  templateUrl: 'demo-paginator.component.html',
+})
+export class DemoPaginatorComponent {
+  pageIndex = 0;
+  pageIndex2 = 0;
+
+  changePage(event: PageEvent) {
+    this.pageIndex = event.pageIndex;
+  }
+
+  changePageIndex(pageIndex: number) {
+    this.pageIndex2 = pageIndex;
+  }
+}

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

@@ -0,0 +1,89 @@
+# Installation
+
+```bash
+npm install --save @onemrvapublic/theme
+npm install --save @onemrvapublic/design-system
+```
+
+API
+
+```
+@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
+
+@Input()
+public set pageIndex(index: number) {
+    this._pageIndex = index;
+    this.refreshState();
+}
+
+public get length(): number {
+    return this._length;
+}
+
+@Input()
+public set length(length: number) {
+    this._length = length;
+    this.refreshState();
+}
+
+public get pageSize(): number {
+    return this._pageSize;
+}
+
+@Input()
+public set pageSize(pageSize: number) {
+    this._pageSize = pageSize;
+    this.pageSize$.next(this._pageSize);
+    this._pageIndex = 0;
+    this.refreshState();
+}
+
+get totalNumberOfPages(): number {
+    return this._totalNumberOfPages;
+}
+
+@Input() previousKey: string = 'Previous';
+@Input() nextKey: string = 'Next';
+
+@Output() onRequestPage: EventEmitter<number> = new EventEmitter(); // Pages are displayed starting from 1 but the index starts at 0
+
+pageIndex$: BehaviorSubject<number> = new BehaviorSubject(0);
+pageSize$: BehaviorSubject<number> = new BehaviorSubject(this.pageSizeDefaultOption);
+
+```
+
+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.paginator(theme.$onemrva-theme);
+}
+```
+
+# Changelog
+
+## 14.1.672
+
+The wording key for records is now an input (e.g 10 "records par page", "records per page" dictionary key is now customizable)
+
+## 14.1.661
+
+Page size selector (it's optional but visible by default). The wording keys are now prefixed with "paginator.", so in your dictionaries, you need to put all the related key in "paginator" key
+
+## 14.1.604
+
+Migration to @onemrvapublic/design-system library
+
+## 14.1.441
+
+Compliant version with DS4

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

@@ -0,0 +1,53 @@
+<onemrva-mat-panel>
+    <onemrva-mat-panel-content>
+        <p>Here is a simple panel for all your structural needs</p>
+        <p>Enjoy!</p>
+    </onemrva-mat-panel-content>
+</onemrva-mat-panel>
+
+<onemrva-mat-panel color="primary">
+    <onemrva-mat-panel-title> This is an ID panel with a title </onemrva-mat-panel-title>
+    <onemrva-mat-panel-content>
+        <p>
+            Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon hoth k-3po jango hutt. Ponda gonk darth
+            windu ahsoka wedge organa qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan calrissian wedge
+            fett han. Darth antilles amidala dooku watto fisto. Amidala mandalore wicket lobot ventress. Wampa calamari
+            darth hutt hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara. Coruscant zabrak organa
+            skywalker. Bothan solo darth windu anakin darth hutt jawa. Palpatine mon sebulba darth.
+        </p>
+    </onemrva-mat-panel-content>
+</onemrva-mat-panel>
+
+<onemrva-mat-panel color="primary">
+    <onemrva-mat-panel-title>
+        This is an ID panel with a title and an action
+        <onemrva-mat-panel-title-action>
+            <button mat-stroked-button color="primary" class="small"><mat-icon>edit</mat-icon>Edit</button>
+        </onemrva-mat-panel-title-action>
+    </onemrva-mat-panel-title>
+    <onemrva-mat-panel-content>
+        <p>
+            Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke sal-solo tierce. Quelli desann dash veila
+            galen kushiban sesswenna thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion trandoshan
+            bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom isolder. Haruun karrde lahara frozarns wroonian
+            bimm skakoan gallia zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis priapulin
+            ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin cal. Thistleborn gilad airen wookiee.
+        </p>
+    </onemrva-mat-panel-content>
+</onemrva-mat-panel>
+
+<onemrva-mat-panel>
+  <onemrva-mat-panel-icon>
+    <mat-icon class="xlarge">home</mat-icon>
+  </onemrva-mat-panel-icon>
+  <onemrva-mat-panel-title>
+    This is an ID panel with a title and an action
+    <onemrva-mat-panel-title-action>
+      <button mat-stroked-button color="primary" class="small"><mat-icon>edit</mat-icon>Edit</button>
+    </onemrva-mat-panel-title-action>
+  </onemrva-mat-panel-title>
+  <onemrva-mat-panel-content>
+    <p>Here is a simple panel for all your structural needs</p>
+    <p>Enjoy!</p>
+  </onemrva-mat-panel-content>
+</onemrva-mat-panel>

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

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

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

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

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

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

@@ -0,0 +1,130 @@
+<div class="pop-over-container">
+  <onemrva-mat-pop-over>
+    <onemrva-mat-pop-over-trigger
+      >I am a trigger (bottom-right)</onemrva-mat-pop-over-trigger
+    >
+    <onemrva-mat-pop-over-content>I am a content</onemrva-mat-pop-over-content>
+  </onemrva-mat-pop-over>
+  <onemrva-mat-pop-over position="bottom-left">
+    <onemrva-mat-pop-over-trigger
+      >I am a trigger (bottom-left)</onemrva-mat-pop-over-trigger
+    >
+    <onemrva-mat-pop-over-content>I am a content</onemrva-mat-pop-over-content>
+  </onemrva-mat-pop-over>
+  <onemrva-mat-pop-over position="top-right">
+    <onemrva-mat-pop-over-trigger
+      >I am a trigger (top-right)</onemrva-mat-pop-over-trigger
+    >
+    <onemrva-mat-pop-over-content>I am a content</onemrva-mat-pop-over-content>
+  </onemrva-mat-pop-over>
+  <onemrva-mat-pop-over position="top-left">
+    <onemrva-mat-pop-over-trigger
+      >I am a trigger (top-left)</onemrva-mat-pop-over-trigger
+    >
+    <onemrva-mat-pop-over-content>I am a content</onemrva-mat-pop-over-content>
+  </onemrva-mat-pop-over>
+</div>
+
+<!--div>
+  <button
+    mat-raised-button
+    cdkOverlayOrigin
+    #trigger="cdkOverlayOrigin"
+    [class.drop-down-input-active]="config['topLeft'].isOpen"
+    (click)="config['topLeft'].isOpen = true"
+  >
+    top-left
+  </button>
+
+  <ng-template
+    cdkConnectedOverlay
+    cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+    [cdkConnectedOverlayHasBackdrop]="true"
+    [cdkConnectedOverlayOrigin]="trigger"
+    [cdkConnectedOverlayOpen]="config['topLeft'].isOpen"
+    [cdkConnectedOverlayPositions]="config['topLeft'].position"
+    ><div class="onemrva-pop-over top-left">
+      <h4>Title</h4>
+      <div>It turns out that popovers are pastries</div>
+      <button mat-stroked-button color="primary" class="small">Show me</button>
+    </div>
+  </ng-template>
+</div>
+
+<div>
+  <button
+    mat-raised-button
+    cdkOverlayOrigin
+    #trigger="cdkOverlayOrigin"
+    [class.drop-down-input-active]="config['topRight'].isOpen"
+    (click)="config['topRight'].isOpen = true"
+  >
+    top-right
+  </button>
+
+  <ng-template
+    cdkConnectedOverlay
+    cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+    [cdkConnectedOverlayHasBackdrop]="true"
+    [cdkConnectedOverlayOrigin]="trigger"
+    [cdkConnectedOverlayOpen]="config['topRight'].isOpen"
+    [cdkConnectedOverlayPositions]="config['topRight'].position"
+    ><div class="onemrva-pop-over top-right">
+      <h4>Title</h4>
+      <div>It turns out that popovers are pastries</div>
+      <button mat-stroked-button color="primary" class="small">Show me</button>
+    </div>
+  </ng-template>
+</div>
+
+<div>
+  <button
+    mat-raised-button
+    cdkOverlayOrigin
+    #trigger="cdkOverlayOrigin"
+    [class.drop-down-input-active]="config['bottomLeft'].isOpen"
+    (click)="config['bottomLeft'].isOpen = true"
+  >
+    bottom-left
+  </button>
+
+  <ng-template
+    cdkConnectedOverlay
+    cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+    [cdkConnectedOverlayHasBackdrop]="true"
+    [cdkConnectedOverlayOrigin]="trigger"
+    [cdkConnectedOverlayOpen]="config['bottomLeft'].isOpen"
+    [cdkConnectedOverlayPositions]="config['bottomLeft'].position"
+    ><div class="onemrva-pop-over bottom-left">
+      <h4>Title</h4>
+      <div>It turns out that popovers are pastries</div>
+      <button mat-stroked-button color="primary" class="small">Show me</button>
+    </div>
+  </ng-template>
+</div>
+
+<div>
+  <button
+    mat-raised-button
+    cdkOverlayOrigin
+    #trigger="cdkOverlayOrigin"
+    [class.drop-down-input-active]="config['bottomRight'].isOpen"
+    (click)="config['bottomRight'].isOpen = true"
+  >
+    bottom-right
+  </button>
+
+  <ng-template
+    cdkConnectedOverlay
+    cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+    [cdkConnectedOverlayHasBackdrop]="true"
+    [cdkConnectedOverlayOrigin]="trigger"
+    [cdkConnectedOverlayOpen]="config['bottomRight'].isOpen"
+    [cdkConnectedOverlayPositions]="config['bottomRight'].position"
+    ><div class="onemrva-pop-over bottom-right">
+      <h4>Title</h4>
+      <div>It turns out that popovers are pastries</div>
+      <button mat-stroked-button color="primary" class="small">Show me</button>
+    </div>
+  </ng-template>
+</div-->

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

@@ -0,0 +1,9 @@
+.pop-over-container {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 50px;
+
+  onemrva-mat-pop-over {
+    flex: 1 0 45%;
+  }
+}