@onemrvapublic/design-system-demos 20.0.0-develop.11

package/assets/json/typography.json

@@ -0,0 +1 @@
+{"demo-typography.component.html":"<h1>This is an H1</h1>\n\n<h2>This is an H2</h2>\n\n<h3>This is an H3</h3>\n\n<h4>This is an H4</h4>\n\n<h5>This is an H5</h5>\n\n<h6>This is an H6</h6>\n\n<div class=\"typography-container\">\n  @for (category of typographyCategories; track category.label) {\n    <div class=\"typography-section\">\n      <h3>{{ category.label }}</h3>\n      <div\n        class=\"typography-item\"\n        *ngFor=\"\n          let style of typographyStyles | filter: 'category' : category.value\n        \"\n      >\n        <div class=\"typography-details\">\n          <div\n            class=\"typography-sample\"\n            [style.font]=\"\n              style.weight +\n              ' ' +\n              style.size +\n              '/' +\n              style.lineHeight +\n              ' ' +\n              style.font\n            \"\n          >\n            {{ style.name }}\n          </div>\n          <div class=\"typography-specs\">\n            <div>Size: {{ style.size }} ({{ style.sizePx }}px)</div>\n            <div>\n              Line Height: {{ style.lineHeight }} ({{ style.lineHeightPx }}px)\n            </div>\n            <div>Weight: {{ style.weight }}</div>\n            <div>Font: {{ style.font }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n","demo-typography.component.scss":".typography-container {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n  padding: 1rem;\n}\n\n.typography-section {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n\n  h3 {\n    color: var(--mat-sys-on-surface);\n    font-size: 1.25rem;\n    font-weight: 600;\n    margin: 0;\n  }\n}\n\n.typography-item {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  padding: 1rem;\n  background-color: var(--mat-sys-surface-container);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.typography-name {\n  color: var(--mat-sys-on-surface);\n  font-size: 1.1rem;\n  font-weight: 500;\n}\n\n.typography-details {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.typography-sample {\n  padding: 1rem;\n  background-color: var(--mat-sys-surface);\n  border-radius: 4px;\n  color: var(--mat-sys-on-surface);\n}\n\n.typography-specs {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 0.5rem;\n  font-family: monospace;\n  font-size: 0.9rem;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n@media (max-width: 768px) {\n  .typography-specs {\n    grid-template-columns: 1fr;\n  }\n}\n","demo-typography.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FilterPipe } from '../palette/demo-palette.component';\n\ninterface TypographyStyle {\n  name: string;\n  size: string;\n  sizePx: number;\n  lineHeight: string;\n  lineHeightPx: number;\n  weight: number;\n  font: string;\n  category: 'body' | 'display' | 'headline' | 'label' | 'title';\n}\n\n@Component({\n  selector: 'app-demo-typography',\n  templateUrl: './demo-typography.component.html',\n  styleUrls: ['./demo-typography.component.scss'],\n  standalone: true,\n  imports: [FilterPipe, CommonModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTypographyComponent extends DemoComponentBase {\n  typographyStyles: TypographyStyle[] = [\n    // Body Styles\n    {\n      name: 'Body Large',\n      size: '1.125rem',\n      sizePx: 18,\n      lineHeight: '1.625rem',\n      lineHeightPx: 26,\n      weight: 400,\n      font: 'Source Sans Pro',\n      category: 'body',\n    },\n    {\n      name: 'Body Medium',\n      size: '1rem',\n      sizePx: 16,\n      lineHeight: '1.625rem',\n      lineHeightPx: 26,\n      weight: 400,\n      font: 'Source Sans Pro',\n      category: 'body',\n    },\n    {\n      name: 'Body Small',\n      size: '0.875rem',\n      sizePx: 14,\n      lineHeight: '1.3125rem',\n      lineHeightPx: 21,\n      weight: 400,\n      font: 'Source Sans Pro',\n      category: 'body',\n    },\n    // Display Styles\n    {\n      name: 'Display Large',\n      size: '9.25rem',\n      sizePx: 148,\n      lineHeight: '11.25rem',\n      lineHeightPx: 180,\n      weight: 700,\n      font: 'Poppins',\n      category: 'display',\n    },\n    {\n      name: 'Display Medium',\n      size: '4.5rem',\n      sizePx: 72,\n      lineHeight: '6.25rem',\n      lineHeightPx: 100,\n      weight: 700,\n      font: 'Poppins',\n      category: 'display',\n    },\n    {\n      name: 'Display Small',\n      size: '2rem',\n      sizePx: 32,\n      lineHeight: '3.25rem',\n      lineHeightPx: 52,\n      weight: 600,\n      font: 'Poppins',\n      category: 'display',\n    },\n    // Headline Styles\n    {\n      name: 'Headline Large',\n      size: '1.625rem',\n      sizePx: 26,\n      lineHeight: '2.75rem',\n      lineHeightPx: 44,\n      weight: 600,\n      font: 'Poppins',\n      category: 'headline',\n    },\n    {\n      name: 'Headline Medium',\n      size: '1.5rem',\n      sizePx: 24,\n      lineHeight: '2.5rem',\n      lineHeightPx: 40,\n      weight: 600,\n      font: 'Poppins',\n      category: 'headline',\n    },\n    {\n      name: 'Headline Small',\n      size: '1.25rem',\n      sizePx: 20,\n      lineHeight: '2.25rem',\n      lineHeightPx: 36,\n      weight: 600,\n      font: 'Poppins',\n      category: 'headline',\n    },\n    // Label Styles\n    {\n      name: 'Label Large',\n      size: '1rem',\n      sizePx: 16,\n      lineHeight: '1.3125rem',\n      lineHeightPx: 21,\n      weight: 500,\n      font: 'Poppins',\n      category: 'label',\n    },\n    {\n      name: 'Label Medium',\n      size: '0.875rem',\n      sizePx: 14,\n      lineHeight: '1.3125rem',\n      lineHeightPx: 21,\n      weight: 400,\n      font: 'Poppins',\n      category: 'label',\n    },\n    {\n      name: 'Label Small',\n      size: '0.75rem',\n      sizePx: 12,\n      lineHeight: '1.125rem',\n      lineHeightPx: 18,\n      weight: 400,\n      font: 'Source Sans Pro',\n      category: 'label',\n    },\n    // Title Styles\n    {\n      name: 'Title Large',\n      size: '1.125rem',\n      sizePx: 18,\n      lineHeight: '2rem',\n      lineHeightPx: 32,\n      weight: 600,\n      font: 'Poppins',\n      category: 'title',\n    },\n    {\n      name: 'Title Medium',\n      size: '1rem',\n      sizePx: 16,\n      lineHeight: '1.75rem',\n      lineHeightPx: 28,\n      weight: 600,\n      font: 'Poppins',\n      category: 'title',\n    },\n    {\n      name: 'Title Small',\n      size: '0.75rem',\n      sizePx: 12,\n      lineHeight: '1.3125rem',\n      lineHeightPx: 21,\n      weight: 600,\n      font: 'Poppins',\n      category: 'title',\n    },\n  ];\n\n  typographyCategories = [\n    { value: 'body', label: 'Body Styles' },\n    { value: 'display', label: 'Display Styles' },\n    { value: 'headline', label: 'Headline Styles' },\n    { value: 'label', label: 'Label Styles' },\n    { value: 'title', label: 'Title Styles' },\n  ];\n}\n"}

package/assets/json/validators.json

@@ -0,0 +1 @@
+{"demo-validators.component.html":"<h2>BCE</h2>\n<h3>List of checks:</h3>\n<ul>\n  <li>\n    required (false by default, but can be set to true with the first argument\n    of the validator)\n  </li>\n  <li>numeric</li>\n  <li>Length = 10</li>\n</ul>\n\n<mat-form-field>\n  <mat-label>BCE</mat-label>\n  <input matInput [formControl]=\"bce\" />\n</mat-form-field>\nError BCE: {{ bce.errors | json }}\n<br />\n<br />\n<h2>NISS</h2>\n<h3>List of checks:</h3>\n<ul>\n  <li>\n    required (false by default, but can be set to true with the first argument\n    of the validator)\n  </li>\n  <li>numeric</li>\n  <li>length = 11</li>\n  <li>month <= 12</li>\n  <li>date <= 31</li>\n  <li>date consistency check (e.g. 32 Jan)</li>\n  <li>check digit (before or after 1 Jan 2000)</li>\n</ul>\n\n<mat-form-field>\n  <mat-label>NISS</mat-label>\n  <input matInput [formControl]=\"niss\" [mask]=\"nissMask\" />\n</mat-form-field>\nError NISS: {{ niss.errors | json }}\n\n<br />\n<br />\n<br />\n\n<mat-form-field>\n  <mat-label>NISS or BCE Validator</mat-label>\n  <input matInput [formControl]=\"nissOrBce\" />\n  @if (\n    nissOrBce.errors &&\n    !isNissError(nissOrBce.errors) &&\n    !isBceError(nissOrBce.errors)\n  ) {\n    <mat-error>Error Length</mat-error>\n  }\n  @if (isNissError(nissOrBce.errors)) {\n    <mat-error>Error NISS</mat-error>\n  }\n  @if (isBceError(nissOrBce.errors)) {\n    <mat-error>Error BCE</mat-error>\n  }\n</mat-form-field>\nError: {{ nissOrBce.errors | json }}\n","demo-validators.component.ts":"import { CommonModule } from '@angular/common';\nimport { Component, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  ReactiveFormsModule,\n  ValidationErrors,\n} from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport {\n  NISS_MASK,\n  OnemrvaValidators,\n} from '@onemrvapublic/design-system/shared';\nimport { NgxMaskDirective } from 'ngx-mask';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-validators',\n  templateUrl: 'demo-validators.component.html',\n\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatInputModule,\n    MatFormFieldModule,\n    CommonModule,\n    NgxMaskDirective,\n  ],\n  providers: [],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoOnemrvaValidatorsComponent extends DemoComponentBase {\n  bce: FormControl = new FormControl(null, OnemrvaValidators.bce());\n  niss: FormControl = new FormControl(null, [OnemrvaValidators.niss()]);\n  nissOrBce: FormControl = new FormControl(null, [\n    OnemrvaValidators.nissOrBce(),\n  ]);\n\n  nissMask = NISS_MASK;\n\n  isNissError(errors: ValidationErrors | null) {\n    if (errors !== null) {\n      return (\n        Object.keys(errors).length > 0 &&\n        Object.keys(errors)[0].startsWith('niss')\n      );\n    }\n    return false;\n  }\n  isBceError(errors: ValidationErrors | null) {\n    if (errors !== null) {\n      return (\n        Object.keys(errors).length > 0 &&\n        Object.keys(errors)[0].startsWith('bce')\n      );\n    }\n    return false;\n  }\n}\n"}

package/assets/json/vertical-stepper.json

@@ -0,0 +1 @@
+{"demo-vertical-stepper.component.html":"<mat-vertical-stepper\n  [linear]=\"linear\"\n  #stepper2\n  animationDuration=\"2000\"\n  (selectionChange)=\"selectionChanged($event)\"\n>\n  <mat-step [stepControl]=\"firstFormGroup\" aria-label=\"Fill out your name\">\n    <form [formGroup]=\"firstFormGroup\">\n      <ng-template matStepLabel>Fill out your name</ng-template>\n      <br />\n      <mat-form-field>\n        <mat-label>Last name, First name</mat-label>\n        <input\n          matInput\n          placeholder=\"Last name, First name\"\n          formControlName=\"firstCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div class=\"mt-s\">\n        <button\n          mat-flat-button\n          color=\"accent\"\n          matStepperNext\n          [disabled]=\"linear && !firstFormGroup.valid\"\n        >\n          Next\n        </button>\n      </div>\n    </form>\n  </mat-step>\n  <mat-step [stepControl]=\"secondFormGroup\" aria-label=\"Fill out your address\">\n    <form [formGroup]=\"secondFormGroup\">\n      <ng-template matStepLabel>Fill out your address</ng-template>\n      <br />\n      <mat-form-field>\n        <mat-label>Address</mat-label>\n        <input\n          matInput\n          placeholder=\"Address\"\n          formControlName=\"secondCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div class=\"mt-s\">\n        <button mat-stroked-button color=\"primary\" matStepperPrevious>\n          Back\n        </button>\n        <button\n          mat-flat-button\n          color=\"accent\"\n          matStepperNext\n          [disabled]=\"linear && !secondFormGroup.valid\"\n        >\n          Next\n        </button>\n      </div>\n    </form>\n  </mat-step>\n  <mat-step aria-label=\"Done\">\n    <ng-template matStepLabel>Done</ng-template>\n    You are now done.\n    <div class=\"mt-s\">\n      <button mat-stroked-button color=\"primary\" matStepperPrevious>\n        Back\n      </button>\n      <button mat-flat-button color=\"accent\" (click)=\"stepper2.reset()\">\n        Reset\n      </button>\n    </div>\n  </mat-step>\n</mat-vertical-stepper>\n","demo-vertical-stepper.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';\nimport {\n  STEPPER_GLOBAL_OPTIONS,\n  StepperSelectionEvent,\n} from '@angular/cdk/stepper';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatStepperModule } from '@angular/material/stepper';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-vertical-stepper',\n  templateUrl: './demo-vertical-stepper.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatButtonModule,\n    MatInputModule,\n    MatFormFieldModule,\n    MatStepperModule,\n  ],\n  providers: [\n    {\n      provide: STEPPER_GLOBAL_OPTIONS,\n      useValue: { showError: true, displayDefaultIndicatorType: false },\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoVerticalStepperComponent extends DemoComponentBase {\n  public linear = true;\n  _formBuilder = inject(FormBuilder);\n  firstFormGroup = this._formBuilder.group({\n    firstCtrl: ['', Validators.required],\n  });\n  secondFormGroup = this._formBuilder.group({\n    secondCtrl: ['', Validators.required],\n  });\n\n  selectionChanged($event: StepperSelectionEvent) {\n    console.log($event);\n  }\n}\n"}

package/assets/mock/countries.json

@@ -0,0 +1,85 @@
+[
+  {
+    "className": "be.fgov.onerva.lookup.wppt.persistence.model.common.Country",
+
+    "id": 458,
+
+    "code": "1",
+
+    "codeMultiple": {},
+
+    "descFr": "BELGIQUE",
+
+    "descNl": "BELGIE",
+
+    "beginDate": "1960-01-01",
+
+    "endDate": null,
+
+    "singlePropertiesMap": {
+      "lastUpdateUserId": "2222",
+
+      "flagCee": "1",
+
+      "flagLock": "8",
+
+      "vergunArbeid": null,
+
+      "aa": "458         ",
+
+      "commentLegal": "                                                                        ",
+
+      "codeSepa": "BE",
+
+      "vergunVerblijf": null,
+
+      "lastUpdateDate": "20150125"
+    },
+
+    "multiPropertiesCollectionMap": {},
+
+    "singlePropertisCollectionMap": {}
+  },
+
+  {
+    "className": "be.fgov.onerva.lookup.wppt.persistence.model.common.Country",
+
+    "id": 357,
+
+    "code": "2",
+
+    "codeMultiple": {},
+
+    "descFr": "PAYS-BAS",
+
+    "descNl": "NEDERLAND",
+
+    "beginDate": "1960-01-01",
+
+    "endDate": null,
+
+    "singlePropertiesMap": {
+      "lastUpdateUserId": "3212",
+
+      "flagCee": "1",
+
+      "flagLock": "4",
+
+      "vergunArbeid": null,
+
+      "aa": "357         ",
+
+      "commentLegal": "                                                                        ",
+
+      "codeSepa": "NL",
+
+      "vergunVerblijf": null,
+
+      "lastUpdateDate": "20080907"
+    },
+
+    "multiPropertiesCollectionMap": {},
+
+    "singlePropertisCollectionMap": {}
+  }
+]

package/index.html

@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en" data-beasties-container>
+  <head>
+    <meta charset="utf-8">
+    <title>Design System</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <style>
+      app-demo .demoDiv {
+        max-height: inherit !important;
+      }
+    </style>
+  <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript></head>
+  <body class>
+    <select id="demos" onchange="selectDemo(event)" aria-label="Select a demo">
+      <option></option>
+      <option value="does-not-exist">does-not-exist</option>
+    </select>
+
+    <div id="showDemo" style="height: 100vh; width: 100%"></div>
+
+    <script>
+      async function getDemos() {
+        const response = await fetch('assets/codes.json');
+        const demos = await response.json();
+        let newSelect = document.getElementById('demos');
+        for (let i in demos) {
+          const demo = demos[i];
+          var opt = document.createElement('option');
+          opt.value = demo;
+          opt.innerHTML = demo; // whatever property it has
+
+          // then append it to the select element
+          newSelect.appendChild(opt);
+          if (window.location.hash.substring(1) === demo) {
+            opt.selected = 'selected';
+            showDemo(demo);
+          }
+        }
+      }
+      getDemos();
+      function selectDemo(event) {
+        showDemo(event.srcElement.value);
+      }
+      function showDemo(demo) {
+        let showDemo = document.getElementById('showDemo');
+        showDemo.innerHTML = `<app-demo component="${demo}" showCode="yes"></app-demo>`;
+        window.location.hash = demo;
+      }
+    </script>
+  <script src="runtime.js" type="module"></script><script src="main.js" type="module"></script></body>
+</html>