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

package/browser/assets/json/autocomplete.json

@@ -0,0 +1 @@
+{"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 { OnemrvaMatAvatarComponent } 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    OnemrvaMatAvatarComponent,\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/browser/assets/json/avatar.json

@@ -0,0 +1 @@
+{"demo-avatar.component.html":"<onemrva-mat-avatar\n  [initials]=\"initials()\"\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 { OnemrvaMatAvatarComponent } 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    OnemrvaMatAvatarComponent,\n    OnemRvaColorDirective,\n    OnemRvaSizeDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAvatarComponent extends DemoComponentBase {\n  readonly initials = input('OJ');\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/browser/assets/json/progress-bar.json

@@ -0,0 +1 @@
+{"demo-progress-bar.component.html":"<onemrva-mat-progress-bar [value]=\"value()\" />\n\n<button style=\"margin-top: 4rem\" (click)=\"startProgress()\">\n  Start Progress\n</button>\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(10);\n\n  constructor() {\n    super();\n  }\n\n  startProgress() {\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/browser/assets/json/rxjs-observable.json

@@ -0,0 +1 @@
+{"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\n<button (click)=\"start()\">Start</button>\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  }\n\n  start() {\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"}

package/{assets → browser/assets}/json/skeleton.json

@@ -1 +1 @@
-{"demo-skeleton.component.html":"<mat-card appearance=\"outlined\" style=\"width: 80%\">\n  <mat-card-content>\n    <div class=\"row\">\n      <div class=\"col-12 col-2-medium\">\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"circle\" [size]=\"'xlarge'\" />\n        }\n        @if (contentLoaded) {\n          <onemrva-mat-avatar type=\"circle\" [size]=\"'xlarge'\" initials=\"TS\" />\n        }\n      </div>\n      <div class=\"col-auto\">\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"h2\" />\n        }\n        @if (contentLoaded) {\n          <h2>This is a loaded title</h2>\n        }\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"h4\" />\n        }\n        @if (contentLoaded) {\n          <h4>This is a loaded subtitle</h4>\n        }\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"h4\" />\n        }\n        @if (contentLoaded) {\n          <p>This is another loaded text</p>\n        }\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"button\" class=\"float-right\" />\n        }\n        @if (contentLoaded) {\n          <button mat-flat-button color=\"accent\" class=\"float-right\">\n            Click me\n          </button>\n        }\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n","demo-skeleton.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { Subscription } from 'rxjs';\n\nimport { OnemrvaMatSkeletonModule } from '@onemrvapublic/design-system/mat-skeleton';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\nimport { MatButtonModule } from '@angular/material/button';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\n\nimport { MatCardModule } from '@angular/material/card';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-skeleton',\n  templateUrl: 'demo-skeleton.component.html',\n\n  standalone: true,\n  imports: [\n    OnemrvaMatSkeletonModule,\n    OnemrvaMatAvatarModule,\n    MatButtonModule,\n    OnemrvaMatPanelModule,\n    OnemRvaSizeDirective,\n    MatCardModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSkeletonComponent extends DemoComponentBase {\n  contentLoaded = false;\n\n  intervalId: number | null = null;\n  takeFourNumbers$ = new Subscription();\n}\n"}
+{"demo-skeleton.component.html":"<mat-card appearance=\"outlined\" style=\"width: 80%\">\n  <mat-card-content>\n    <div class=\"row\">\n      <div class=\"col-12 col-2-medium\">\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"circle\" [size]=\"'xlarge'\" />\n        }\n        @if (contentLoaded) {\n          <onemrva-mat-avatar type=\"circle\" [size]=\"'xlarge'\" initials=\"TS\" />\n        }\n      </div>\n      <div class=\"col-auto\">\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"h2\" />\n        }\n        @if (contentLoaded) {\n          <h2>This is a loaded title</h2>\n        }\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"h4\" />\n        }\n        @if (contentLoaded) {\n          <h4>This is a loaded subtitle</h4>\n        }\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"h4\" />\n        }\n        @if (contentLoaded) {\n          <p>This is another loaded text</p>\n        }\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"button\" class=\"float-right\" />\n        }\n        @if (contentLoaded) {\n          <button mat-flat-button color=\"accent\" class=\"float-right\">\n            Click me\n          </button>\n        }\n      </div>\n    </div>\n  </mat-card-content>\n</mat-card>\n","demo-skeleton.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { Subscription } from 'rxjs';\n\nimport { OnemrvaMatSkeletonModule } from '@onemrvapublic/design-system/mat-skeleton';\nimport { OnemrvaMatAvatarComponent } from '@onemrvapublic/design-system/mat-avatar';\nimport { MatButtonModule } from '@angular/material/button';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\n\nimport { MatCardModule } from '@angular/material/card';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-skeleton',\n  templateUrl: 'demo-skeleton.component.html',\n\n  standalone: true,\n  imports: [\n    OnemrvaMatSkeletonModule,\n    OnemrvaMatAvatarComponent,\n    MatButtonModule,\n    OnemrvaMatPanelModule,\n    OnemRvaSizeDirective,\n    MatCardModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSkeletonComponent extends DemoComponentBase {\n  contentLoaded = false;\n\n  intervalId: number | null = null;\n  takeFourNumbers$ = new Subscription();\n}\n"}

package/{index.html → browser/index.html}

@@ -6,7 +6,7 @@
     <base href="/">
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head>
+  <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript><link rel="preload" href="https://cdn.services.rvaonem.fgov.be/font/poppins/import.css" as="style"><link rel="preload" href="https://cdn.services.rvaonem.fgov.be/font/source-sans-pro/import.css" as="style"><link rel="preload" href="https://cdn.services.rvaonem.fgov.be/font/material/import.css" as="style"></head>
   <body class>
     <select id="demos" onchange="selectDemo(event)" aria-label="Select a demo">
       <option></option>
@@ -44,5 +44,5 @@
         window.location.hash = demo;
       }
     </script>
-  <script src="runtime.js" type="module"></script><script src="main.js" type="module"></script></body>
+  <script src="main.js" type="module"></script></body>
 </html>