@onemrvapublic/design-system-demos 21.7.4 → 21.7.5-develop.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onemrvapublic/design-system-demos",
-    "version": "v21.7.4",
+    "version": "v21.7.5-develop.2",
     "description": "Demos for the Design System Onem/Rva",
     "publishConfig": {
         "access": "public"

package/prerendered-routes.json

@@ -0,0 +1,3 @@
+{
+  "routes": {}
+}

package/assets/json/autocomplete.json

@@ -1 +0,0 @@
-{"demo-autocomplete.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Nom, prénom</mat-label>\n  <input\n    type=\"text\"\n    placeholder=\"Nom, prénom\"\n    aria-label=\"Number\"\n    matInput\n    [formControl]=\"myControl\"\n    [matAutocomplete]=\"auto\"\n  />\n  <mat-hint>Nom, prénom</mat-hint>\n  <mat-icon matSuffix>search</mat-icon>\n  <mat-autocomplete\n    autoActiveFirstOption\n    #auto=\"matAutocomplete\"\n    [panelWidth]=\"300\"\n  >\n    @for (option of filteredOptions | async; track option['name']) {\n      <mat-option\n        [value]=\"option['name'] | formatString\"\n        style=\"height: 62px; padding-top: 15px; font-size: 16px\"\n      >\n        <onemrva-mat-avatar\n          initials=\"LS\"\n          color=\"accent\"\n          size=\"extrasmall\"\n          style=\"vertical-align: top; margin: 1px 10px 0 0\"\n        />\n        <div style=\"display: inline-block; height: 34px\">\n          <div\n            style=\"display: block; line-height: 18px\"\n            [innerHTML]=\"option['name']\"\n          ></div>\n          <div\n            style=\"font-size: 14px; line-height: 16px\"\n            [innerHTML]=\"option['email']\"\n          ></div>\n        </div>\n      </mat-option>\n    }\n  </mat-autocomplete>\n</mat-form-field>\n","demo-autocomplete.component.ts":"import { Component, ViewEncapsulation, OnInit, input } from '@angular/core';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\n\nimport {\n  MatFormField,\n  MatHint,\n  MatLabel,\n  MatSuffix,\n} from '@angular/material/form-field';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport {\n  MatAutocompleteModule,\n  MatAutocompleteTrigger,\n} from '@angular/material/autocomplete';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatInput } from '@angular/material/input';\nimport { AsyncPipe } from '@angular/common';\nimport { Observable } from 'rxjs';\nimport { FormatStringPipe } from './format.pipe';\nimport { map, startWith } from 'rxjs/operators';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-autocomplete',\n  templateUrl: 'demo-autocomplete.component.html',\n  standalone: true,\n  imports: [\n    OnemrvaMatAvatarModule,\n    ReactiveFormsModule,\n    MatAutocompleteModule,\n    MatFormField,\n    MatLabel,\n    FormsModule,\n    MatAutocompleteTrigger,\n    MatHint,\n    MatIcon,\n    MatInput,\n    MatSuffix,\n    AsyncPipe,\n    FormatStringPipe,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAutocompleteComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  readonly = input(false);\n\n  myControl = new FormControl('');\n\n  options = [\n    { name: 'James Bond', email: 'james@onem.be' },\n    { name: 'Marleen Offergelt', email: 'offergelt.marleen@onem.be' },\n    { name: 'Barack Obama', email: 'barack@onem.be' },\n    { name: 'Donald Trump', email: 'donald@onem.be' },\n  ];\n\n  filteredOptions?: Observable<Record<string, string>[]>;\n\n  constructor() {\n    super();\n  }\n\n  ngOnInit() {\n    this.filteredOptions = this.myControl.valueChanges.pipe(\n      startWith(''),\n      map(value => this.getDataFromServer(value || '')),\n    );\n  }\n\n  private getDataFromServer(value: string): Record<string, string>[] {\n    const filterValue = value.toLowerCase();\n\n    return this.options\n      .filter(option =>\n        Object.values(option)\n          .map(x => x.toLowerCase().includes(filterValue))\n          .includes(true),\n      )\n      .map(option => {\n        return {\n          name: this.highlightPattern(option['name'], filterValue),\n          email: this.highlightPattern(option['email'], filterValue),\n        };\n      });\n  }\n\n  private highlightPattern(textIn: string, filterValue: string): string {\n    if (filterValue === '') return textIn;\n\n    const idx = textIn.toLowerCase().indexOf(filterValue);\n\n    if (idx === -1) return textIn;\n\n    return (\n      textIn.slice(0, idx) +\n      '<mark>' +\n      textIn.slice(idx, idx + filterValue.length) +\n      '</mark>' +\n      this.highlightPattern(textIn.slice(idx + filterValue.length), filterValue)\n    );\n  }\n\n  displayFn(option: Record<string, string>) {\n    return option['name'];\n  }\n}\n","format.pipe.ts":"import { Pipe, PipeTransform } from '@angular/core';\n\n@Pipe({\n  name: 'formatString',\n  standalone: true,\n})\nexport class FormatStringPipe implements PipeTransform {\n  transform(text: string): string {\n    return text.replace(/<[^>]*>?/gm, '');\n  }\n}\n"}

package/assets/json/avatar.json

@@ -1 +0,0 @@
-{"demo-avatar.component.html":"<onemrva-mat-avatar\n  [initials]=\"initials()\"\n  [text]=\"text()\"\n  [size]=\"size()\"\n  [src]=\"src()\"\n  [icon]=\"icon()\"\n  [color]=\"color()\"\n/>\n","demo-avatar.component.ts":"import { Component, ViewEncapsulation, input } from '@angular/core';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-avatar',\n  templateUrl: 'demo-avatar.component.html',\n  standalone: true,\n  imports: [\n    OnemrvaMatAvatarModule,\n    OnemRvaColorDirective,\n    OnemRvaSizeDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAvatarComponent extends DemoComponentBase {\n  readonly initials = input('TC');\n  readonly text = input('');\n  readonly size = input<'large' | 'medium' | 'small' | 'xsmall'>('medium');\n  readonly src = input('');\n  readonly icon = input('');\n  readonly color = input<OnemrvaMatColor>('accent');\n}\n"}

package/assets/json/progress-bar.json

@@ -1 +0,0 @@
-{"demo-progress-bar.component.html":"<onemrva-mat-progress-bar [value]=\"value()\" />\n","demo-progress-bar.component.ts":"import { Component, signal, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { interval } from 'rxjs';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { OnemrvaMatProgressBarComponent } from '@onemrvapublic/design-system/mat-progress-bar';\n\nimport { take } from 'rxjs/operators';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-progress-bar',\n  templateUrl: 'demo-progress-bar.component.html',\n\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    OnemrvaMatProgressBarComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoProgressBarComponent extends DemoComponentBase {\n  value = signal(0);\n\n  constructor() {\n    super();\n    const numbers = interval(100);\n\n    const loadding = numbers.pipe(take(101));\n\n    loadding.pipe().subscribe(x => {\n      this.value.set(x);\n    });\n  }\n}\n"}

package/assets/json/rxjs-observable.json

@@ -1 +0,0 @@
-{"demo-rxjs-observable.component.html":"<p>You should not do this : {{ seconds }}</p>\n<p>\n  But this : {{ secondsAsync | async }} as the async pipe subscribe and\n  unsubscribe to the observable.\n</p>\n","demo-rxjs-observable.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { interval, Observable } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { AsyncPipe } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button',\n  templateUrl: './demo-rxjs-observable.component.html',\n  standalone: true,\n  imports: [AsyncPipe],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoRxjsObservableComponent extends DemoComponentBase {\n  public seconds = 0;\n  public secondsAsync: Observable<number> = interval(1000);\n\n  constructor() {\n    super();\n    const seconds$: Observable<number> = interval(1000);\n    seconds$\n      .pipe(takeUntilDestroyed()) // you must unsubscribe !!\n      .subscribe(value => {\n        this.seconds = value; // we change a local value when an event happens (not recommended)\n      });\n  }\n}\n"}