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

package/assets/i18n/nl.json

@@ -0,0 +1,157 @@
+{
+  "demo.title": "Ontwerpsysteem",
+  "error": {
+    "500": {
+      "h1": "Oeps...",
+      "h2": "Fout 500 - Interne serverfout",
+      "p": "Onze excuses, er is iets misgegaan aan onze kant. Probeer het later opnieuw.",
+      "ori": "wordless.svg"
+    },
+    "404": {
+      "h1": "Oeps...",
+      "h2": "Fout 404 - Pagina niet gevonden",
+      "p": "Onze excuses, de pagina die u zoekt bestaat niet. Deze is mogelijk verwijderd of tijdelijk niet beschikbaar.",
+      "ori": "alone.svg"
+    },
+    "403": {
+      "h1": "Toegang geweigerd",
+      "h2": "Fout 403 - Verboden",
+      "p": "U heeft geen toestemming om deze bron te bekijken. Neem contact op met de ondersteuning als u denkt dat dit een fout is.",
+      "ori": "error.svg"
+    },
+    "401": {
+      "h1": "Niet geautoriseerd",
+      "h2": "Fout 401 - Niet gemachtigde toegang",
+      "p": "U moet inloggen om toegang te krijgen tot deze pagina. Gelieve in te loggen en het opnieuw te proberen.",
+      "ori": "error.svg"
+    },
+    "400": {
+      "h1": "Ongeldige aanvraag",
+      "h2": "Fout 400 - Foute aanvraag",
+      "p": "De server kon uw verzoek niet begrijpen. Controleer uw invoer en probeer het opnieuw.",
+      "ori": "desperate.svg"
+    },
+    "503": {
+      "h1": "Dienst niet beschikbaar",
+      "h2": "Fout 503 - Dienst niet beschikbaar",
+      "p": "Onze servers zijn momenteel in onderhoud of overbelast. Probeer het later opnieuw.",
+      "ori": "star-eyes.svg"
+    },
+    "502": {
+      "h1": "Ongeldige gateway",
+      "h2": "Fout 502 - Ongeldige gateway",
+      "p": "De server heeft een ongeldige reactie ontvangen van een upstream server. Probeer het later opnieuw.",
+      "ori": "error.svg"
+    },
+    "408": {
+      "h1": "Time-out",
+      "h2": "Fout 408 - Verzoek time-out",
+      "p": "Uw verzoek duurde te lang. Probeer het opnieuw.",
+      "ori": "thumb-down.svg"
+    },
+    "429": {
+      "h1": "Te veel verzoeken",
+      "h2": "Fout 429 - Te veel verzoeken",
+      "p": "U heeft te veel verzoeken verstuurd in een korte tijd. Wacht alstublieft en probeer het later opnieuw.",
+      "ori": "thumb-down.svg"
+    }
+  },
+  "404": {
+    "oops": "Oops",
+    "title": "Fout 404 - Pagina niet gevonden!",
+    "body": "Het spijt ons, de door u opgevraagde pagina is buitgemaakt door aliens.",
+    "actions": "Maar u kunt nog steeds",
+    "contact.ons": "Neem contact met ons op.",
+    "go.back": "Ga terug naar huis",
+    "extra": "of zoek wat u zoekt.",
+    "flying.saucer": "Vliegende schotel",
+    "tractor.beam": "Tractor beam",
+    "scared.page": "Scared page",
+    "shadow": "schaduw",
+    "search.input.label": "Search"
+  },
+  "paginator": {
+    "Previous": "< Vorig",
+    "Next": "Next >",
+    "records.per.page": "Elementen per pagina",
+    "outOf": "out of"
+  },
+  "file": {
+    "upload": {
+      "drag.and.drop": "Sleep uw bestanden hierheen",
+      "browse.for.file": "Bladeren naar bestanden",
+      "type.not.supported": "Bestandstype niet ondersteund",
+      "too.big": "Het bestand overschreed de maximale grootte van",
+      "maximum": "Maximum",
+      "delete": "Delete",
+      "error.occurred": "Er is een fout opgetreden, probeer het opnieuw",
+      "confirm.delete": "Dit bestand verwijderen?",
+      "are.you.sure": "Weet u zeker dat u het bestand wilt verwijderen",
+      "remove": "Verwijderen",
+      "cancel": "Annuleren",
+      "retry": "Opnieuw proberen",
+      "of": "of",
+      "too.many.files": "Limiet van {{limit}} bestand(en) bereikt",
+      "total.max.size.exceeded": "De totale bestandsgrootte overschrijdt de toegestane limiet van {{ maxTotalFileSize }}"
+    }
+  },
+  "select": {
+    "select.all": "Select All",
+    "deselect.all": "Deselect All",
+    "search": {
+      "filter": "Zoeken",
+      "notFound": "Geen resultaten",
+      "not.found": "Geen resultaten"
+    }
+  },
+  "layout": {
+    "mode": {
+      "select": "Keuze van modus",
+      "dark": "Donkere modus",
+      "light": "Lichte modus",
+      "system": "Volg systeeminstellingen"
+    },
+    "profile": "Profile",
+    "login": "Login",
+    "logout": "Logout",
+    "interface": {
+      "trusted": "Vertrouwde persoon-interface",
+      "collaborator": "Werknemer interface"
+    }
+  },
+  "thermo": {
+    "title": "Thermodynamics",
+    "introduction": "Introduction",
+    "history": "History",
+    "etymology": "Etymology",
+    "branches": "Branches",
+    "classicalThermodynamics": "Classical thermodynamics",
+    "statisticalThermodynamics": "Statistical thermodynamics",
+    "chemicalThermodynamics": "Chemical thermodynamics",
+    "equilibriumThermodynamics": "Equilibrium thermodynamics",
+    "nonEquilibriumThermodynamics": "Non-equilibrium thermodynamics"
+  },
+  "input": {
+    "bank": {
+      "length": "Onjuist aantal cijfers voor dit land",
+      "checksum": "Bankrekeningnummer is ongeldig",
+      "invalid": "Veld verplicht"
+    },
+    "phone": {
+      "required": "Veld vereist",
+      "invalid": "Ongeldig veld",
+      "notFound": "Niet gevonden",
+      "not.found": "Niet gevonden",
+      "search": "Zoeken",
+      "label": "Telefoonnummer",
+      "hint": "Begin met 0 voor Belgische telefoonnummers"
+    }
+  },
+  "copied.to.clipboard": "Naar klembord gekopieerd",
+  "today": "Vandaag",
+  "bankAccountInput": {
+    "length": "Onjuist aantal cijfers voor dit land",
+    "wrong-iban-checksum": "Bankrekeningnummer is ongeldig",
+    "invalid": "Veld verplicht"
+  }
+}

package/assets/json/address-input.json

@@ -0,0 +1 @@
+{"demo-address-input.component.html":"<onemrva-mat-input-address\n  style=\"width: 100%; display: block\"\n  [address]=\"addressControl\"\n  (getAddress)=\"onAddressSelected($event)\"\n>\n</onemrva-mat-input-address>\n","demo-address-input.component.ts":"import { Component } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { OnemrvaMatInputAddressComponent } from '@onemrvapublic/design-system/mat-input-address';\nimport { OSMResult } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-address-input',\n  templateUrl: './demo-address-input.component.html',\n  standalone: true,\n  imports: [OnemrvaMatInputAddressComponent],\n})\nexport class DemoAddressInputComponent extends DemoComponentBase {\n  addressControl = new FormControl('');\n\n  onAddressSelected(result: OSMResult) {\n    this.output.set(result);\n  }\n}\n"}

package/assets/json/address.json

@@ -0,0 +1 @@
+{"address.html":"<onemrva-address [INSMode]=\"true\" (update)=\"onUpdate($event)\" />\n","address.scss":"","address.ts":"import { Component } from '@angular/core';\nimport { OnemRvaAddress } from '@onemrvapublic/design-system/mat-address';\n\n@Component({\n  selector: 'app-demo-address',\n  imports: [OnemRvaAddress],\n  templateUrl: './address.html',\n  standalone: true,\n  styleUrl: './address.scss',\n})\nexport class DemoAddress {\n  onUpdate(val: any) {\n    console.log('val - ', val);\n  }\n}\n"}

package/assets/json/autocomplete.json

@@ -0,0 +1 @@
+{"demo-autocomplete.component.html":"<mat-form-field>\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        ></onemrva-mat-avatar>\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 } from '@angular/core';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system';\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  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAutocompleteComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  myControl = new FormControl('');\n\n  options: Record<string, string>[] = [\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  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

@@ -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></onemrva-mat-avatar>\n","demo-avatar.component.ts":"import { Component, ViewEncapsulation, Input } from '@angular/core';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system';\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: [OnemrvaMatAvatarModule, OnemRvaColorDirective],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoAvatarComponent extends DemoComponentBase {\n  @Input() initials = 'TC';\n  @Input() size: 'xlarge' | 'large' | 'medium' | 'small' | 'xsmall' = 'medium';\n  @Input() src = '';\n  @Input() icon = '';\n  @Input() color: OnemrvaMatColor = 'accent';\n}\n"}

package/assets/json/bank-input.json

@@ -0,0 +1 @@
+{"demo-bank-input.component.html":"<mat-form-field>\n  <mat-label>IBAN</mat-label>\n\n  <onemrva-mat-input-iban [formControl]=\"accountNumber\">\n  </onemrva-mat-input-iban>\n\n  <mat-hint>hint</mat-hint>\n  @if (accountNumber.hasError('required')) {\n    <mat-error>\n      {{ 'input.bank.required' | translate }}\n    </mat-error>\n  }\n  @if (accountNumber.hasError('WrongBBANLength')) {\n    <mat-error>\n      {{ 'input.bank.length' | translate }}\n    </mat-error>\n  }\n  @if (accountNumber.hasError('NoIBANCountry')) {\n    <mat-error> NoIBANCountry </mat-error>\n  }\n  @if (\n    !accountNumber.hasError('WrongBBANLength') &&\n    (accountNumber.hasError('WrongBBANFormat') ||\n      accountNumber.hasError('WrongAccountBankBranchChecksum') ||\n      accountNumber.hasError('WrongIBANChecksum'))\n  ) {\n    <mat-error>\n      {{ 'input.bank.invalid' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n","demo-bank-input.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\n\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { OnemrvaMatInputIbanComponent } from '@onemrvapublic/design-system';\nimport { bankAccountValidator } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-bank-input',\n  templateUrl: 'demo-bank-input.component.html',\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    TranslateModule,\n    OnemrvaMatInputIbanComponent,\n  ],\n  standalone: true,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBankInputComponent extends DemoComponentBase {\n  accountNumber = new FormControl('', [\n    Validators.required,\n    bankAccountValidator(),\n  ]);\n}\n"}

package/assets/json/bce-pipe.json

@@ -0,0 +1 @@
+{"demo-bce-pipe.component.html":"<div>{{ '1234567890' | onemrvaBce }}</div>\nError when the Bce is not exactly 10 char long:\n<div>{{ '12345678901' | onemrvaBce }}</div>\n","demo-bce-pipe.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { OnemrvaBcePipe } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-bce-pipe',\n  templateUrl: 'demo-bce-pipe.component.html',\n  standalone: true,\n  imports: [OnemrvaBcePipe],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBcePipeComponent extends DemoComponentBase {}\n"}

package/assets/json/birthplace-input.json

@@ -0,0 +1 @@
+{"demo-birthplace-input.component.html":"<onemrva-mat-input-birthplace\n  [countryCode]=\"countryForm\"\n  label=\"{{ 'input.country.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.country.not.found' | translate }}\"\n  placeholderLabel=\"{{ 'input.country.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.country.search' | translate }}\"\n  hint=\" {{ 'input.country.hint' | translate }}\"\n  [returnValue]=\"returnValue\"\n></onemrva-mat-input-birthplace>\n","demo-birthplace-input.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\n\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { OnemrvaMatInputBirthPlaceComponent } from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-birthplace-input',\n  templateUrl: './demo-birthplace-input.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputBirthPlaceComponent,\n    FormsModule,\n    MatInputModule,\n    TranslateModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBirthplaceInputComponent extends DemoComponentBase {\n  countryForm = new FormControl(null, [Validators.required]);\n\n  @Input()\n  returnValue = 'object';\n\n  constructor() {\n    super();\n    this.countryForm.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/breadcrumb.json

@@ -0,0 +1 @@
+{"demo-breadcrumb.component.html":"<!-- fakePath is used to test the breadcrumb component when the routing is not available -->\n<onemrva-mat-breadcrumb\n  [fakePath]=\"['Home', 'level-1', 'level-2', 'level-3']\"\n></onemrva-mat-breadcrumb>\n","demo-breadcrumb.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OnemrvaMatBreadcrumbComponent } from '@onemrvapublic/design-system/mat-breadcrumb';\nimport { RouterModule } from '@angular/router';\n\n@Component({\n  selector: 'app-demo-breadcrumb',\n  templateUrl: 'demo-breadcrumb.component.html',\n  standalone: true,\n  imports: [CommonModule, RouterModule, OnemrvaMatBreadcrumbComponent],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoBreadcrumbComponent {}\n"}

package/assets/json/button-loading.json

@@ -0,0 +1 @@
+{"demo-button-loading.component.html":"@if (type === 'contained') {\n  <button\n    mat-flat-button\n    color=\"accent\"\n    [disabled]=\"disabled\"\n    [loading]=\"loading\"\n    (click)=\"send()\"\n  >\n    @if (loading) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n} @else if (type === 'outlined') {\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [disabled]=\"disabled\"\n    [loading]=\"loading\"\n    (click)=\"send()\"\n  >\n    @if (loading) {\n      <ng-container>Loading ...</ng-container>\n    } @else {\n      <ng-container>Send</ng-container>\n    }\n  </button>\n}\n","demo-button-loading.component.ts":"import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { OnemrvaMatSpinnerModule } from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button-loading',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatIconModule,\n    MatButtonModule,\n    OnemrvaMatSpinnerModule,\n  ],\n  templateUrl: 'demo-button-loading.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonLoadingComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  @Input()\n  type: 'outlined' | 'contained' = 'contained';\n\n  @Input()\n  disabled = false;\n\n  loading = false;\n\n  send() {\n    this.loading = true;\n    setTimeout(() => {\n      this.loading = false;\n    }, 3000);\n  }\n\n  ngOnInit(): void {\n    this.send();\n  }\n}\n"}

package/assets/json/button-toggle.json

@@ -0,0 +1 @@
+{"demo-button-toggle.component.html":"<mat-button-toggle-group name=\"fontStyle\" aria-label=\"Font Style\">\n  <mat-button-toggle value=\"bold\">Bold</mat-button-toggle>\n  <mat-button-toggle value=\"italic\">Italic</mat-button-toggle>\n  <mat-button-toggle value=\"underline\">Underline</mat-button-toggle>\n</mat-button-toggle-group>\n","demo-button-toggle.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonToggleModule } from '@angular/material/button-toggle';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button-toggle',\n  templateUrl: 'demo-button-toggle.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatButtonToggleModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonToggleComponent extends DemoComponentBase {}\n"}

package/assets/json/button.json

@@ -0,0 +1 @@
+{"demo-button.component.html":"@if (type === 'contained') {\n  <button\n    mat-flat-button\n    color=\"accent\"\n    class=\"{{ size }}\"\n    aria-label=\"Action\"\n    [disabled]=\"disabled\"\n  >\n    @if (icon !== '') {\n      <mat-icon>{{ icon }}</mat-icon>\n    }\n    Action\n  </button>\n} @else if (type === 'outlined') {\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    class=\"{{ size }}\"\n    aria-label=\"Normal\"\n    [disabled]=\"disabled\"\n  >\n    @if (icon !== '') {\n      <mat-icon>{{ icon }}</mat-icon>\n    }\n    Normal\n  </button>\n} @else if (type === 'text') {\n  <button\n    mat-button\n    color=\"primary\"\n    class=\"{{ size }}\"\n    aria-label=\"Basic\"\n    [disabled]=\"disabled\"\n  >\n    @if (icon !== '') {\n      <mat-icon>{{ icon }}</mat-icon>\n    }\n    Basic\n  </button>\n}\n","demo-button.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\n\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-button',\n  templateUrl: './demo-button.component.html',\n\n  standalone: true,\n  imports: [MatIconModule, MatButtonModule, OnemrvaSharedModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoButtonComponent extends DemoComponentBase {\n  @Input()\n  type = 'outlined';\n\n  @Input()\n  icon = '';\n\n  @Input()\n  size = '';\n\n  @Input()\n  disabled = false;\n}\n"}

package/assets/json/card-table.json

@@ -0,0 +1 @@
+{"demo-card-table-datasource.ts":"import { DataSource } from '@angular/cdk/collections';\nimport { MatSort } from '@angular/material/sort';\nimport { map } from 'rxjs/operators';\nimport { BehaviorSubject, merge, Observable } from 'rxjs';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemrvaMatPaginatorComponent } from '@onemrvapublic/design-system';\n\n// TODO: Replace this with your own data model type\nexport interface ListItem {\n  id: number;\n  name: string;\n  description: string;\n  status: 'success' | 'error' | 'warn';\n  color: OnemrvaMatColor;\n}\n\n// TODO: replace this with real data from your application\nconst EXAMPLE_DATA: ListItem[] = [\n  {\n    id: 1,\n    name: 'Hydrogen',\n    description:\n      'Hydrogen is the chemical element with the symbol H and atomic number 1',\n    status: 'success',\n    color: 'primary',\n  },\n  {\n    id: 2,\n    name: 'Helium',\n    description:\n      \"Helium (from Greek: ἥλιος, romanized: helios, lit. 'sun') is a chemical element with the symbol He and atomic number 2\",\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 3,\n    name: 'Lithium',\n    description:\n      \"Lithium (from Greek: λίθος, romanized: lithos, lit. 'stone') is a chemical element with the symbol Li and atomic number 3\",\n    status: 'error',\n    color: 'error',\n  },\n  {\n    id: 4,\n    name: 'Beryllium',\n    description:\n      'Beryllium is a chemical element with the symbol Be and atomic number 4',\n    status: 'success',\n    color: 'success',\n  },\n  {\n    id: 5,\n    name: 'Boron',\n    description:\n      'Boron is a chemical element with the symbol B and atomic number 5',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 6,\n    name: 'Carbon',\n    description:\n      'Carbon (from Latin: carbo \"coal\") is a chemical element with the symbol C and atomic number 6',\n    status: 'warn',\n    color: 'warn',\n  },\n  {\n    id: 7,\n    name: 'Nitrogen',\n    description:\n      'Nitrogen is the chemical element with the symbol N and atomic number 7',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 8,\n    name: 'Oxygen',\n    description:\n      'Oxygen is the chemical element with the symbol O and atomic number 8',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 9,\n    name: 'Fluorine',\n    description:\n      'Fluorine is a chemical element with the symbol F and atomic number 9',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 10,\n    name: 'Neon',\n    description:\n      'Neon is a chemical element with the symbol Ne and atomic number 10',\n    status: 'success',\n    color: '',\n  },\n  {\n    id: 11,\n    name: 'Sodium',\n    description:\n      'Sodium is a chemical element with the symbol Na (from Latin natrium) and atomic number 11',\n    status: 'success',\n    color: '',\n  },\n  { id: 12, name: 'Magnesium', description: '', status: 'success', color: '' },\n  { id: 13, name: 'Aluminum', description: '', status: 'success', color: '' },\n  { id: 14, name: 'Silicon', description: '', status: 'error', color: '' },\n  { id: 15, name: 'Phosphorus', description: '', status: 'success', color: '' },\n  { id: 16, name: 'Sulfur', description: '', status: 'success', color: '' },\n  { id: 17, name: 'Chlorine', description: '', status: 'warn', color: '' },\n  { id: 18, name: 'Argon', description: '', status: 'success', color: '' },\n  { id: 19, name: 'Potassium', description: '', status: 'success', color: '' },\n  { id: 20, name: 'Calcium', description: '', status: 'success', color: '' },\n  { id: 21, name: 'Scandium', description: '', status: 'success', color: '' },\n  { id: 22, name: 'Titanium', description: '', status: 'success', color: '' },\n  { id: 23, name: 'Vanadium', description: '', status: 'success', color: '' },\n  { id: 24, name: 'Chromium', description: '', status: 'success', color: '' },\n];\n\n/**\n * Data source for the List view. This class should\n * encapsulate all logic for fetching and manipulating the displayed data\n * (including sorting, pagination, and filtering).\n */\nexport class ListDataSource extends DataSource<ListItem> {\n  data: ListItem[] = EXAMPLE_DATA;\n  paginator!: OnemrvaMatPaginatorComponent;\n  sort: MatSort | undefined;\n  data$: BehaviorSubject<ListItem[]> = new BehaviorSubject<ListItem[]>([]);\n\n  constructor() {\n    super();\n    this.data$.next(this.data);\n  }\n\n  /**\n   * Connect this data source to the table. The table will only update when\n   * the returned stream emits new items.\n   * @returns A stream of the items to be rendered.\n   */\n  connect(): Observable<ListItem[]> {\n    if (this.sort) {\n      // Combine everything that affects the rendered data into one update\n      // stream for the data-table to consume.\n      return merge(this.data$, this.sort.sortChange).pipe(\n        map(() => {\n          return this.getPagedData(this.getSortedData([...this.data]));\n        }),\n      );\n    } else {\n      throw Error('Please set the sort on the data source before connecting.');\n    }\n  }\n\n  /**\n   *  Called when the table is being destroyed. Use this function, to clean up\n   * any open connections or free any held resources that were set up during connect.\n   */\n  disconnect(): void {\n    console.log('disconnect');\n  }\n\n  /**\n   * Paginate the data (client-side). If you're using server-side pagination,\n   * this would be replaced by requesting the appropriate data from the server.\n   */\n  private getPagedData(data: ListItem[]): ListItem[] {\n    if (this.paginator) {\n      const startIndex = this.paginator.pageIndex * this.paginator.pageSize;\n      return data.splice(startIndex, this.paginator.pageSize);\n    } else {\n      return data;\n    }\n  }\n\n  /**\n   * Sort the data (client-side). If you're using server-side sorting,\n   * this would be replaced by requesting the appropriate data from the server.\n   */\n  private getSortedData(data: ListItem[]): ListItem[] {\n    if (!this.sort || !this.sort.active || this.sort.direction === '') {\n      return data;\n    }\n\n    return data.sort((a, b) => {\n      const isAsc = this.sort?.direction === 'asc';\n      switch (this.sort?.active) {\n        case 'status':\n          return compare(a.status, b.status, isAsc);\n        case 'description':\n          return compare(a.description, b.description, isAsc);\n        case 'name':\n          return compare(a.name, b.name, isAsc);\n        case 'id':\n          return compare(+a.id, +b.id, isAsc);\n        default:\n          return 0;\n      }\n    });\n  }\n\n  /**\n   * @param row\n   */\n  public remove(row: ListItem) {\n    const idx = this.data.indexOf(row);\n    if (idx >= 0) {\n      this.data.splice(idx, 1);\n      this.paginator.length = this.data.length;\n    }\n    this.data$.next(this.data);\n  }\n\n  /**\n   *\n   */\n  public touch() {\n    this.data$.next(this.data);\n  }\n}\n\n/** Simple sort comparator for example ID/Name columns (for client-side sorting). */\nfunction compare(\n  a: string | number,\n  b: string | number,\n  isAsc: boolean,\n): number {\n  return (a < b ? -1 : 1) * (isAsc ? 1 : -1);\n}\n","demo-card-table.component.html":"<table\n  mat-table\n  class=\"full-width-table mat-card-table\"\n  matSort\n  aria-label=\"Elements\"\n>\n  <!-- Id Column -->\n  <ng-container matColumnDef=\"id\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header=\"id\">Id</th>\n    <td mat-cell *matCellDef=\"let row\">{{ row.id }}</td>\n  </ng-container>\n\n  <!-- Name Column -->\n  <ng-container matColumnDef=\"name\">\n    <th mat-header-cell *matHeaderCellDef mat-sort-header=\"name\">Name</th>\n    <td mat-cell *matCellDef=\"let row\">\n      <strong\n        ><copy-to-clipboard [tooltip]=\"'copied.to.clipboard' | translate\">{{\n          row.name\n        }}</copy-to-clipboard></strong\n      >\n    </td>\n  </ng-container>\n\n  <!-- Description Column -->\n  <ng-container matColumnDef=\"description\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n      mat-sort-header=\"description\"\n      class=\"d-none-xsmall d-table-cell-medium\"\n    >\n      Description\n    </th>\n    <td\n      mat-cell\n      *matCellDef=\"let row\"\n      class=\"d-none-xsmall d-table-cell-medium\"\n    >\n      <span></span>\n      {{ row.description }}\n    </td></ng-container\n  >\n\n  <!-- Status Column -->\n  <ng-container matColumnDef=\"status\">\n    <th\n      mat-header-cell\n      *matHeaderCellDef\n      mat-sort-header=\"status\"\n      class=\"d-none-xsmall d-table-cell-medium\"\n    >\n      Status\n    </th>\n    <td\n      mat-cell\n      *matCellDef=\"let row\"\n      class=\"d-none-xsmall d-table-cell-medium\"\n    >\n      @if (row.status === 'success') {\n        <onemrva-mat-sticker\n          aria-label=\"Success\"\n          class=\"sticker\"\n          color=\"success\"\n        >\n          <mat-icon>thumb_up</mat-icon>Success\n        </onemrva-mat-sticker>\n      }\n      @if (row.status === 'error') {\n        <onemrva-mat-sticker aria-label=\"Error\" class=\"sticker\" color=\"error\">\n          <mat-icon>error</mat-icon>Error\n        </onemrva-mat-sticker>\n      }\n      @if (row.status === 'warn') {\n        <onemrva-mat-sticker aria-label=\"Warning\" class=\"sticker\" color=\"warn\">\n          <mat-icon>warning</mat-icon>Warning\n        </onemrva-mat-sticker>\n      }\n    </td>\n  </ng-container>\n\n  <!-- More Column -->\n  <ng-container matColumnDef=\"more\">\n    <th mat-header-cell *matHeaderCellDef>More</th>\n    <td mat-cell *matCellDef=\"let row\" class=\"text-right\">\n      <button\n        mat-icon-button\n        [matMenuTriggerFor]=\"menu\"\n        (click)=\"$event.stopPropagation()\"\n        aria-label=\"More\"\n      >\n        <mat-icon>more_vert</mat-icon>\n      </button>\n      <mat-menu #menu=\"matMenu\">\n        <button mat-menu-item (click)=\"edit(row)\" aria-label=\"Edit\">\n          <mat-icon>edit</mat-icon>Edit\n        </button>\n        <button mat-menu-item (click)=\"delete(row)\" aria-label=\"Delete\">\n          <mat-icon>delete</mat-icon>Delete\n        </button>\n        <button mat-menu-item (click)=\"share(row)\" aria-label=\"Share\">\n          <mat-icon>share</mat-icon>Share\n        </button>\n      </mat-menu>\n      <mat-divider [vertical]=\"true\"></mat-divider>\n      <button mat-icon-button aria-label=\"Continue\">\n        <mat-icon>chevron_right</mat-icon>\n      </button>\n    </td>\n  </ng-container>\n\n  <tr mat-header-row *matHeaderRowDef=\"displayedColumns\"></tr>\n  <tr\n    mat-row\n    (matRowClickable)=\"open(row)\"\n    [color]=\"row.color\"\n    *matRowDef=\"let row; columns: displayedColumns\"\n  ></tr>\n</table>\n<onemrva-mat-paginator\n  [pageSizeDefaultOption]=\"10\"\n  [pageIndex]=\"0\"\n  [length]=\"dataSource.data.length\"\n  (onRequestPage)=\"changePage($event)\"\n  previousKey=\"Previous\"\n  nextKey=\"Next\"\n  #paginator\n></onemrva-mat-paginator>\n","demo-card-table.component.ts":"import {\n  AfterViewInit,\n  Component,\n  inject,\n  ViewChild,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MatSort, MatSortModule } from '@angular/material/sort';\nimport { MatTable, MatTableModule } from '@angular/material/table';\nimport { ListDataSource, ListItem } from './demo-card-table-datasource';\nimport { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';\nimport { CommonModule } from '@angular/common';\nimport { MatCardModule } from '@angular/material/card';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatDividerModule } from '@angular/material/divider';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { OnemrvaMatPaginatorComponent } from '@onemrvapublic/design-system';\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaCopyToClipboardComponent } from '@onemrvapublic/design-system';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-card-table',\n  templateUrl: './demo-card-table.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatCardModule,\n    MatChipsModule,\n    MatTableModule,\n    MatSortModule,\n    MatIconModule,\n    MatMenuModule,\n    MatButtonModule,\n    OnemrvaSharedModule,\n    MatDividerModule,\n    MatTooltipModule,\n    TranslateModule,\n    ClipboardModule,\n    OnemrvaCopyToClipboardComponent,\n    OnemrvaMatStickerModule,\n    OnemrvaMatPaginatorComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCardTableComponent\n  extends DemoComponentBase\n  implements AfterViewInit\n{\n  @ViewChild(OnemrvaMatPaginatorComponent)\n  paginator!: OnemrvaMatPaginatorComponent;\n  @ViewChild(MatSort) sort!: MatSort;\n  @ViewChild(MatTable) table!: MatTable<ListItem>;\n  dataSource: ListDataSource;\n\n  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */\n  displayedColumns = ['id', 'name', 'description', 'status', 'more'];\n  bgcolor = '#123456';\n\n  clipboardService = inject(Clipboard);\n  constructor() {\n    super();\n    this.dataSource = new ListDataSource();\n  }\n\n  ngAfterViewInit(): void {\n    this.dataSource.sort = this.sort;\n    this.dataSource.paginator = this.paginator;\n    this.table.dataSource = this.dataSource;\n  }\n\n  edit(row: ListItem) {\n    alert(`Edit row n°${row.id}: ${row.name}`);\n  }\n\n  delete(row: ListItem) {\n    this.dataSource.remove(row);\n  }\n\n  share(row: ListItem) {\n    alert(`Share row n°${row.id}: ${row.name}`);\n  }\n\n  changePage(event: any) {\n    this.dataSource.paginator.pageIndex = event;\n    this.dataSource.touch();\n  }\n\n  open(row: any) {\n    alert(`Clicked : ${row.id}`);\n  }\n}\n"}

package/assets/json/carousel.json

@@ -0,0 +1 @@
+{"demo-carousel.component.html":"<onemrva-mat-carousel>\n  <onemrva-mat-carousel-item>\n    <onemrva-mat-panel [color]=\"color\">\n      <onemrva-mat-panel-title>\n        This is an ID panel with a title {{ color }}\n      </onemrva-mat-panel-title>\n      <onemrva-mat-panel-content>\n        <div class=\"row gy gx\">\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Adresse</span>\n            <br />\n            <strong>\n              RUE PONT A NOLE 92 <br />\n              6032 MONT-SUR-MARCHIENNE</strong\n            >\n          </div>\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Nationalité</span>\n            <br />\n            <strong> Belge </strong>\n          </div>\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Organisme de paiement</span>\n            <br />\n            <strong>FGTB Charleroi</strong>\n          </div>\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">IBAN</span>\n            <br />\n            <strong>BE37063984850028</strong>\n          </div>\n        </div>\n        <div class=\"row gy gx\">\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Données de contact</span>\n            <br />\n            <strong>\n              email&#64;email.com <br />\n              02 / 303 22 22</strong\n            >\n          </div>\n          <div class=\"col-3-large col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Autres informations</span>\n            <br />\n            <strong\n              >Femme (FR)<br />\n              Archivé dans le mainframe: Oui<br />\n              Date de décès: Ø</strong\n            >\n          </div>\n          <div class=\"col-6-medium col-12-small\">\n            <span class=\"infoColumn\">Bureau de chômage</span>\n            <br />\n            <strong>Charleroi</strong>\n          </div>\n        </div>\n      </onemrva-mat-panel-content>\n    </onemrva-mat-panel>\n  </onemrva-mat-carousel-item>\n\n  <onemrva-mat-carousel-item>\n    <onemrva-mat-panel color=\"primary\">\n      <onemrva-mat-panel-title>\n        This is an ID panel with a title\n      </onemrva-mat-panel-title>\n      <onemrva-mat-panel-content>\n        <p>\n          Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\n          hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\n          qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\n          calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\n          Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\n          hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\n          Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\n          darth hutt jawa. Palpatine mon sebulba darth.\n        </p>\n      </onemrva-mat-panel-content>\n    </onemrva-mat-panel>\n  </onemrva-mat-carousel-item>\n\n  <onemrva-mat-carousel-item>\n    <onemrva-mat-panel>\n      <onemrva-mat-panel-title>\n        This is an ID panel with a title\n      </onemrva-mat-panel-title>\n      <onemrva-mat-panel-content>\n        <p>\n          Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\n          hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\n          qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\n          calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\n          Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\n          hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\n          Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\n          darth hutt jawa. Palpatine mon sebulba darth.\n        </p>\n      </onemrva-mat-panel-content>\n    </onemrva-mat-panel>\n  </onemrva-mat-carousel-item>\n</onemrva-mat-carousel>\n","demo-carousel.component.scss":"","demo-carousel.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n  OnemrvaMatCarouselComponent,\n  OnemrvaMatCarouselItemComponent,\n} from '@onemrvapublic/design-system';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-carousel',\n  standalone: true,\n  imports: [\n    CommonModule,\n    OnemrvaMatCarouselComponent,\n    OnemrvaMatCarouselItemComponent,\n    MatButtonModule,\n    MatIconModule,\n    OnemrvaMatPanelModule,\n    OnemRvaColorDirective,\n  ],\n\n  templateUrl: 'demo-carousel.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCarouselComponent extends DemoComponentBase {\n  @Input()\n  color: OnemrvaMatColor = '';\n}\n","readme.md":"# Installation\n\n```bash\nnpm install --save @onemrvapublic/theme\nnpm install --save @onemrvapublic/design-system\n```\n\nIn style.scss:\n\n```scss\n@use '@onemrvapublic/theme' as theme;\n@use '@onemrvapublic/design-system' as onemrvaMat;\n\n@include theme.reset();\n\n.onemrva-theme {\n  @include theme.onemrva();\n  @include onemrvaMat.slider(theme.$onemrva-theme);\n}\n```\n\n# Changelog\n\n## 14.1.604\n\nPanels initial version\n"}

package/assets/json/checkbox.json

@@ -0,0 +1 @@
+{"demo-checkbox.component.html":"<mat-checkbox\n  [color]=\"color\"\n  [checked]=\"checked\"\n  [indeterminate]=\"indeterminate\"\n  [disabled]=\"disabled\"\n  >Check me!</mat-checkbox\n>\n","demo-checkbox.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { FormsModule } from '@angular/forms';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-checkbox',\n  templateUrl: './demo-checkbox.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatCheckboxModule, FormsModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCheckboxComponent extends DemoComponentBase {\n  @Input()\n  color: OnemrvaMatColor = '';\n\n  @Input()\n  checked = true;\n\n  @Input()\n  indeterminate = false;\n\n  @Input()\n  disabled = false;\n}\n"}

package/assets/json/chips-input.json

@@ -0,0 +1 @@
+{"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\">\n  <mat-label>Favorite Fruits</mat-label>\n  <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n    <mat-chip-row\n      *ngFor=\"let fruit of fruits\"\n      [color]=\"color\"\n      [disabled]=\"disabled\"\n      (removed)=\"removeFruit(fruit)\"\n      [removable]=\"!disabled\"\n    >\n      {{ fruit.name }}\n      <button\n        matChipRemove\n        [attr.aria-label]=\"'remove ' + fruit.name\"\n        *ngIf=\"!disabled\"\n      >\n        <mat-icon>cancel</mat-icon>\n      </button>\n    </mat-chip-row>\n    <input\n      placeholder=\"Add fruit...\"\n      [matChipInputFor]=\"chipGrid\"\n      [disabled]=\"disabled\"\n      (keydown.enter)=\"addFruit($event)\"\n      (blur)=\"addFruit($event)\"\n    />\n  </mat-chip-grid>\n</mat-form-field>\n","demo-chips-input.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\n\nexport interface Fruit {\n  name: string;\n}\n@Component({\n  selector: 'app-demo-chips-input',\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatChipsModule,\n    DragDropModule,\n    MatIconModule,\n    MatFormFieldModule,\n  ],\n  templateUrl: './demo-chips-input.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsInputComponent extends DemoComponentBase {\n  @Input()\n  color: OnemrvaMatColor = '';\n\n  @Input()\n  disabled = false;\n\n  fruits: Fruit[] = [{ name: 'Apple' }, { name: 'Banana' }, { name: 'Orange' }];\n\n  addFruit(event: any): void {\n    const value = (event.target.value || '').trim();\n    if (value) {\n      this.fruits.push({ name: value });\n      event.target.value = '';\n    }\n  }\n\n  removeFruit(fruit: Fruit): void {\n    const index = this.fruits.indexOf(fruit);\n    if (index >= 0) {\n      this.fruits.splice(index, 1);\n    }\n  }\n}\n"}

package/assets/json/chips.json

@@ -0,0 +1 @@
+{"demo-chips.component.html":"<mat-chip-set aria-label=\"Chips\">\n  <mat-chip [color]=\"color\" [disabled]=\"disabled\">chip 1</mat-chip>\n  <mat-chip [color]=\"color\" [disabled]=\"disabled\">chip 2</mat-chip>\n</mat-chip-set>\n","demo-chips.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\nexport interface Fruit {\n  name: string;\n}\n@Component({\n  selector: 'app-demo-chips',\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatChipsModule,\n    DragDropModule,\n    OnemRvaColorDirective,\n  ],\n  templateUrl: './demo-chips.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsComponent extends DemoComponentBase {\n  @Input()\n  color: OnemrvaMatColor = '';\n\n  @Input()\n  disabled = false;\n}\n"}

package/assets/json/choice-chips.json

@@ -0,0 +1 @@
+{"demo-choice-chips.component.html":"<onemrva-mat-choice-chip formControlName=\"choice\"\n  >Choose this</onemrva-mat-choice-chip\n>\n","demo-choice-chips.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { OnemrvaMatChoiceChipComponent } from '@onemrvapublic/design-system';\nimport { FormControl } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-choice-chips',\n\n  templateUrl: 'demo-choice-chips.component.html',\n  standalone: true,\n  imports: [CommonModule, MatCheckboxModule, OnemrvaMatChoiceChipComponent],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChoiceChipsComponent extends DemoComponentBase {\n  form = new FormControl();\n}\n"}

package/assets/json/copy-to-clipboard.json

@@ -0,0 +1 @@
+{"demo-copy-to-clipboard.component.html":"<p>\n  You can say\n  <copy-to-clipboard [tooltip]=\"'copied.to.clipboard' | translate\"\n    >Hello world</copy-to-clipboard\n  >!\n</p>\n","demo-copy-to-clipboard.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaCopyToClipboardComponent } from '@onemrvapublic/design-system';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-copy-to-clipboard',\n  templateUrl: 'demo-copy-to-clipboard.component.html',\n  standalone: true,\n\n  imports: [MatIconModule, OnemrvaCopyToClipboardComponent, TranslateModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCopyToClipboardComponent extends DemoComponentBase {}\n"}

package/assets/json/country-input.json

@@ -0,0 +1 @@
+{"demo-country-input.component.html":"<onemrva-mat-input-country\n  [country]=\"countryForm\"\n  label=\"{{ 'input.country.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.country.not.found' | translate }}\"\n  placeholderLabel=\"{{ 'input.country.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.country.search' | translate }}\"\n  hint=\" {{ 'input.country.hint' | translate }}\"\n></onemrva-mat-input-country>\n","demo-country-input.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputCountryComponent } from '@onemrvapublic/design-system';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-country-input',\n  templateUrl: './demo-country-input.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputCountryComponent,\n    MatInputModule,\n    TranslateModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCountryInputComponent extends DemoComponentBase {\n  countryForm = new FormControl('', [Validators.required]);\n}\n"}

package/assets/json/datepicker-luxon.json

@@ -0,0 +1 @@
+{"demo-datepicker-luxon.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a date</mat-label>\n    <input matInput [matDatepicker]=\"picker\" [formControl]=\"date\" />\n    <mat-hint>DD/MM/YYYY</mat-hint>\n    <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n    <mat-datepicker #picker></mat-datepicker>\n  </mat-form-field>\n</form>\n","demo-datepicker-luxon.component.ts":"import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { onemrvaDateLuxonProvider } from '@onemrvapublic/design-system/shared';\nimport { DateAdapter } from '@angular/material/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker-luxon',\n  templateUrl: './demo-datepicker-luxon.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    MatDatepickerModule,\n  ],\n  providers: [onemrvaDateLuxonProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerLuxonComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  date: FormControl = new FormControl();\n\n  private readonly _adapter =\n    inject<DateAdapter<unknown, unknown>>(DateAdapter);\n\n  constructor() {\n    super();\n    const translateService = inject(TranslateService);\n    translateService.onLangChange\n      .pipe(takeUntilDestroyed())\n      .subscribe(value => {\n        this._adapter.setLocale(value.lang);\n      });\n  }\n\n  ngOnInit(): void {\n    this.date.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/datepicker-month-year.json

@@ -0,0 +1 @@
+{"demo-datepicker-month-year.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a year and month</mat-label>\n    <input matInput [matDatepicker]=\"datePicker\" [formControl]=\"dateControl\" />\n    <mat-hint>MM YYYY</mat-hint>\n    <mat-datepicker-toggle\n      matIconSuffix\n      [for]=\"datePicker\"\n      id=\"datepickertoggle\"\n      [aria-label]=\"'Pick a date' | translate\"\n      [title]=\"'Pick a date' | translate\"\n    ></mat-datepicker-toggle>\n\n    <!--\n          startView & monthselected are what differentiates\n          the datepicker & datepicker month year\n        -->\n    <mat-datepicker\n      #datePicker\n      startView=\"multi-year\"\n      (monthSelected)=\"setMonthAndYear($event, datePicker)\"\n    ></mat-datepicker>\n  </mat-form-field>\n</form>\n","demo-datepicker-month-year.component.ts":"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport {\n  MatDatepicker,\n  MatDatepickerModule,\n} from '@angular/material/datepicker';\nimport { DateTime } from 'luxon';\nimport { onemrvaDateLuxonYearMonthProvider } from '@onemrvapublic/design-system/shared';\nimport { CommonModule } from '@angular/common';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker-month-year',\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatDatepickerModule,\n  ],\n  standalone: true,\n  templateUrl: './demo-datepicker-month-year.component.html',\n\n  providers: [onemrvaDateLuxonYearMonthProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerMonthYearComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  readonly dateControl: FormControl<DateTime | null> =\n    new FormControl<DateTime | null>(null);\n\n  setMonthAndYear(date: DateTime, datepicker: MatDatepicker<DateTime>) {\n    this.dateControl.setValue(date);\n\n    datepicker.close();\n  }\n\n  ngOnInit(): void {\n    this.dateControl.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/datepicker.json

@@ -0,0 +1 @@
+{"demo-datepicker.component.html":"<form>\n  <mat-form-field>\n    <mat-label>Choose a date</mat-label>\n    <input matInput [matDatepicker]=\"picker\" [formControl]=\"date\" />\n    <mat-hint>DD/MM/YYYY</mat-hint>\n    <mat-datepicker-toggle\n      matSuffix\n      [for]=\"picker\"\n      [attr.data-cy]=\"'click-me'\"\n    ></mat-datepicker-toggle>\n    <mat-datepicker\n      [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n      #picker\n    ></mat-datepicker>\n  </mat-form-field>\n</form>\n","demo-datepicker.component.ts":"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { onemrvaDateNativeProvider } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatDatepickerHeaderComponent } from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-datepicker',\n  templateUrl: './demo-datepicker.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n    MatDatepickerModule,\n  ],\n  providers: [onemrvaDateNativeProvider()],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDatepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  date: FormControl = new FormControl('');\n\n  protected readonly OnemrvaMatDatepickerHeaderComponent =\n    OnemrvaMatDatepickerHeaderComponent;\n\n  ngOnInit(): void {\n    this.date.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/daterangepicker.json

@@ -0,0 +1 @@
+{"demo-daterangepicker.component.html":"<mat-form-field>\n  <mat-label>Choose a date range</mat-label>\n  <mat-date-range-input [rangePicker]=\"campaignOnePicker\">\n    <input\n      matStartDate\n      [formControl]=\"startDate\"\n      placeholder=\"Start date\"\n      aria-label=\"Start date\"\n    />\n    <input\n      matEndDate\n      [formControl]=\"endDate\"\n      placeholder=\"End date\"\n      aria-label=\"End date\"\n    />\n  </mat-date-range-input>\n  <mat-datepicker-toggle\n    matSuffix\n    [for]=\"campaignOnePicker\"\n  ></mat-datepicker-toggle>\n  <mat-date-range-picker #campaignOnePicker></mat-date-range-picker>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-daterangepicker.component.ts":"import { Component, OnInit, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  FormGroup,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatDatepickerModule } from '@angular/material/datepicker';\nimport { MatNativeDateModule } from '@angular/material/core';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\n\nimport { onemrvaDateLuxonProvider } from '@onemrvapublic/design-system/shared';\nimport { DateTime } from 'luxon';\nimport { filter, startWith } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-daterangepicker',\n  templateUrl: './demo-daterangepicker.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatDatepickerModule,\n    MatNativeDateModule,\n    FormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    ReactiveFormsModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n  providers: [onemrvaDateLuxonProvider()],\n})\nexport class DemoDaterangepickerComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  public startMaxDate: DateTime;\n  public endMaxDate: DateTime;\n\n  form = new FormGroup({\n    start: new FormControl(\n      DateTime.now().startOf('month'),\n      Validators.required,\n    ),\n    end: new FormControl(DateTime.now().endOf('month'), Validators.required),\n  });\n\n  get startDate() {\n    return this.form.get('start') as FormControl;\n  }\n\n  get endDate() {\n    return this.form.get('end') as FormControl;\n  }\n\n  constructor() {\n    super();\n    this.startMaxDate = DateTime.now();\n    this.endMaxDate = DateTime.now();\n\n    this.startDate.valueChanges\n      .pipe(takeUntilDestroyed(), startWith(this.startMaxDate))\n      .subscribe(() => {\n        this.endMaxDate = this.startMaxDate.minus({ days: 1 });\n      });\n\n    this.endDate.valueChanges\n      .pipe(\n        filter((value: null | DateTime) => value !== null), // Only allow non-null values to pass through\n      )\n      .subscribe(value => {\n        console.log(value);\n      });\n  }\n\n  ngOnInit(): void {\n    this.form.valueChanges.subscribe(value => {\n      this.output.set(value);\n    });\n  }\n}\n"}

package/assets/json/dialog-content.json

@@ -0,0 +1 @@
+{"demo-dialog-content.component.html":"<h2 mat-dialog-title>\n  I Have a Dream<span matDialogClose class=\"close-dialog\"\n    ><mat-icon>close</mat-icon></span\n  >\n</h2>\n\n<mat-dialog-content>\n  @if (panelSize === 'medium' || panelSize === 'small') {\n    <span>\n      >I have a dream that one day this nation will rise up and live out the\n      true meaning of its creed: \"We hold these truths to be self-evident, that\n      all men are created equal.\"</span\n    >\n  } @else {\n    <ng-container>\n      I have a dream that one day this nation will rise up and live out the true\n      meaning of its creed: \"We hold these truths to be self-evident, that all\n      men are created equal.\" I have a dream that one day on the red hills of\n      Georgia, the sons of former slaves and the sons of former slave owners\n      will be able to sit down together at the table of brotherhood. I have a\n      dream that one day even the state of Mississippi, a state sweltering with\n      the heat of injustice, sweltering with the heat of oppression, will be\n      transformed into an oasis of freedom and justice. I have a dream that my\n      four little children will one day live in a nation where they will not be\n      judged by the color of their skin but by the content of their character. I\n      have a dream today! I have a dream that one day, down in Alabama, with its\n      vicious racists, with its governor having his lips dripping with the words\n      of \"interposition\" and \"nullification\" -- one day right there in Alabama\n      little black boys and black girls will be able to join hands with little\n      white boys and white girls as sisters and brothers. I have a dream\n      today!</ng-container\n    >\n  }\n</mat-dialog-content>\n<mat-dialog-actions>\n  @if (panelSize !== 'medium' && panelSize !== 'small') {\n    <button mat-button color=\"primary\">Tertiary</button>\n  }\n  <button mat-stroked-button color=\"primary\">Cancel</button>\n  <button mat-flat-button color=\"accent\">OK</button>\n</mat-dialog-actions>\n","demo-dialog-content.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatButton } from '@angular/material/button';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-content-dialog',\n  templateUrl: 'demo-dialog-content.component.html',\n  standalone: true,\n  imports: [MatIcon, MatDialogModule, MatButton],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDialogContentComponent extends DemoComponentBase {\n  panelSize!: string;\n  panelType!: string;\n\n  data = inject(MAT_DIALOG_DATA, { optional: true });\n\n  constructor() {\n    super();\n    // Handle case where component is used outside of dialog context\n    this.panelSize = this.data?.panelSize || 'medium';\n    this.panelType = this.data?.panelType || 'default';\n  }\n}\n"}

package/assets/json/dialog.json

@@ -0,0 +1 @@
+{"demo-dialog.component.html":"<button\n  mat-flat-button\n  color=\"accent\"\n  (click)=\"openDialog(size, type)\"\n  data-cy=\"click-me\"\n>\n  Open Dialog\n</button>\n","demo-dialog.component.ts":"import {\n  Component,\n  ViewEncapsulation,\n  OnDestroy,\n  Input,\n  inject,\n} from '@angular/core';\nimport { MatDialog, MatDialogModule } from '@angular/material/dialog';\nimport { Subject, take } from 'rxjs';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { MatButton } from '@angular/material/button';\n\nimport { DemoDialogContentComponent } from '../dialog-content';\nimport {\n  OnemrvaMatColor,\n  OnemrvaMatSize,\n} from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-dialog',\n  templateUrl: 'demo-dialog.component.html',\n\n  standalone: true,\n  imports: [CommonModule, FormsModule, MatDialogModule, MatButton],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDialogComponent\n  extends DemoComponentBase\n  implements OnDestroy\n{\n  destroyNotifier$: Subject<void> = new Subject<void>();\n\n  dialog = inject(MatDialog);\n\n  @Input()\n  size: OnemrvaMatSize = 'medium';\n  @Input()\n  type: OnemrvaMatColor = '';\n\n  ngOnDestroy(): void {\n    this.destroyNotifier$.next();\n    this.destroyNotifier$.complete();\n  }\n\n  openDialog(\n    panelSize: OnemrvaMatSize = 'medium',\n    panelType: OnemrvaMatColor = '',\n  ) {\n    const panelClass: string[] = [];\n    panelClass.push(panelSize);\n    if (panelType !== '') {\n      panelClass.push(`mat-${panelType}`);\n    }\n    const dialogRef = this.dialog.open(DemoDialogContentComponent, {\n      data: { panelSize: panelSize, panelType: panelType },\n      panelClass,\n    });\n    dialogRef\n      .afterClosed()\n      .pipe(take(1))\n      .subscribe(() => {\n        console.log('closed');\n      });\n  }\n}\n"}

package/assets/json/digit-only.json

@@ -0,0 +1 @@
+{"demo-digit-only.component.html":"<mat-form-field>\n  <mat-label>Input</mat-label>\n  <input matInput digitOnly />\n</mat-form-field>\n","demo-digit-only.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { FormsModule } from '@angular/forms';\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-digit-only',\n  templateUrl: 'demo-digit-only.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatInputModule,\n    FormsModule,\n    OnemrvaSharedModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDigitOnlyComponent extends DemoComponentBase {}\n"}

package/assets/json/drag-and-drop.json

@@ -0,0 +1 @@
+{"demo-drag-and-drop.component.html":"<div cdkDropList (cdkDropListDropped)=\"drop($event)\">\n  @for (item of list; track item.title) {\n    <div\n      style=\"margin-bottom: 8px\"\n      cdkDrag\n      cdkDragBoundary=\".cdk-drop-list\"\n      cdkDragPreviewContainer=\"parent\"\n    >\n      <div *cdkDragPlaceholder></div>\n      {{ item.title }}\n    </div>\n  }\n</div>\n","demo-drag-and-drop.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport {\n  CdkDragDrop,\n  DragDropModule,\n  moveItemInArray,\n} from '@angular/cdk/drag-drop';\nimport { CommonModule } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-drag-and-drop',\n  templateUrl: 'demo-drag-and-drop.component.html',\n\n  standalone: true,\n  imports: [CommonModule, DragDropModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDragAndDropComponent extends DemoComponentBase {\n  list = [\n    { id: 1, title: 'item1' },\n    { id: 2, title: 'item2' },\n    { id: 3, title: 'item3' },\n    { id: 4, title: 'item4' },\n    { id: 5, title: 'item5' },\n    { id: 6, title: 'item6' },\n  ];\n\n  drop(event: CdkDragDrop<any[]>) {\n    moveItemInArray(this.list, event.previousIndex, event.currentIndex);\n  }\n}\n"}

package/assets/json/empty.json

@@ -0,0 +1 @@
+{"demo-empty.component.html":"","demo-empty.component.ts":"import { Component } from '@angular/core';\nimport { OnemrvaMatInputAddressComponent } from '@onemrvapublic/design-system/mat-input-address';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-empty',\n  templateUrl: './demo-empty.component.html',\n  standalone: true,\n  imports: [],\n})\nexport class DemoEmptyComponent extends DemoComponentBase {}\n"}

package/assets/json/enterprise-number-input.json

@@ -0,0 +1 @@
+{"demo-enterprise-number-input.component.html":"<onemrva-mat-input-enterprise-number\n  [enterpriseNumber]=\"viesForm\"\n  label=\"{{ 'input.vies.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.vies.notFound' | translate }}\"\n  placeholderLabel=\"{{ 'input.vies.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.vies.search' | translate }}\"\n  hint=\" {{ 'input.vies.hint' | translate }}\"\n  (getCountry)=\"getCountry($event)\"\n></onemrva-mat-input-enterprise-number>\n","demo-enterprise-number-input.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport {\n  FormControl,\n  FormsModule,\n  ReactiveFormsModule,\n  Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { OnemrvaMatInputEnterpriseNumberComponent } from '@onemrvapublic/design-system';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-enterprise-number-input',\n  templateUrl: './demo-enterprise-number-input.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputEnterpriseNumberComponent,\n    FormsModule,\n    MatInputModule,\n    TranslateModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoEnterpriseNumberInputComponent extends DemoComponentBase {\n  viesForm = new FormControl('', [Validators.required]);\n  getCountry($event: any) {\n    console.log($event);\n  }\n}\n"}

package/assets/json/error-handler.json

@@ -0,0 +1 @@
+{"demo-error-handler.component.html":"<button mat-flat-button color=\"primary\" (click)=\"saveTheWorld()\">\n  Save the world</button\n>&nbsp;&nbsp;&nbsp;\n\n<button mat-flat-button color=\"accent\" (click)=\"destroyTheWorld()\">\n  Destroy the world\n</button>\n","demo-error-handler.component.ts":"import { HttpClient } from '@angular/common/http';\nimport { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';\nimport { take } from 'rxjs/operators';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-error-handler',\n  templateUrl: 'demo-error-handler.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatButtonModule, MatSnackBarModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoErrorHandlerComponent extends DemoComponentBase {\n  http = inject(HttpClient);\n  snackbar = inject(MatSnackBar);\n\n  saveTheWorld() {\n    this.http\n      .get('save-the-world')\n      .pipe(take(1))\n      .subscribe(\n        next => {\n          console.log(next);\n        },\n        error => {\n          console.error(error);\n          this.snackbar.open('You caught the error locally', 'Close');\n        },\n      );\n  }\n\n  destroyTheWorld() {\n    this.http.get('destroy-the-world').pipe(take(1)).subscribe();\n  }\n}\n"}

package/assets/json/error.json

@@ -0,0 +1 @@
+{"demo-error.component.html":"<page-error [code]=\"code\">\n  <page-error-action>\n    <mat-form-field>\n      <mat-label>Error code</mat-label>\n      <mat-select [formControl]=\"codeControl\">\n        @for (\n          code of [500, 404, 403, 401, 400, 503, 502, 408, 429];\n          track code\n        ) {\n          <mat-option [value]=\"code\">{{ code }}</mat-option>\n        }\n      </mat-select>\n    </mat-form-field>\n  </page-error-action>\n</page-error>\n","demo-error.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\n\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIconModule } from '@angular/material/icon';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  PageErrorActionComponent,\n  PageErrorComponent,\n} from '@onemrvapublic/design-system/page-error';\nimport { MatOption } from '@angular/material/autocomplete';\nimport { MatSelect, MatSelectChange } from '@angular/material/select';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-error',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatIconModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatButtonModule,\n    PageErrorComponent,\n    PageErrorActionComponent,\n    MatOption,\n    MatSelect,\n  ],\n\n  templateUrl: 'demo-error.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoErrorComponent extends DemoComponentBase {\n  searchInput: FormControl = new FormControl('');\n\n  codeControl = new FormControl(500, Validators.required);\n  public code = 500;\n\n  constructor() {\n    super();\n    this.codeControl.valueChanges\n      .pipe(takeUntilDestroyed())\n      .subscribe(value => {\n        if (value === null) value = 500;\n        this.code = value;\n        console.log(this.code);\n      });\n  }\n\n  search() {\n    if (this.searchInput.value.trim() !== '') {\n      // Do not try this at home!\n      // Use the usual Router when you play with the url.\n      // We use the window object so we can make it work in wordpress\n      window.location.href = '/?s=' + this.searchInput.value.trim();\n    }\n  }\n\n  contact() {\n    window.location.href = '/contact';\n  }\n\n  home() {\n    window.location.href = '/';\n  }\n\n  changeCode($event: MatSelectChange) {\n    console.log($event.value);\n  }\n}\n","readme.md":"# Installation\n\n```bash\nnpm install --save @onemrvapublic/theme\nnpm install --save @onemrvapublic/design-system\n```\n\nIn angular.json, add the following configuration in projects/(projectName)/architect/build/options/assets:\n\n```\n    {\n    \"glob\": \"**/*\",\n    \"input\": \"node_modules/@onemrvapublic/design-system/page-not-found/assets\",\n    \"output\": \"/assets/\"\n    }\n```\n\nIn style.scss:\n\n```scss\n@use '@onemrvapublic/theme' as theme;\n@use '@onemrvapublic/design-system' as onemrvaMat;\n\n@include theme.reset();\n\n.onemrva-theme {\n  @include theme.onemrva();\n  @include onemrvaMat.pageNotFound(theme.$onemrva-theme);\n}\n```\n\n# Changelog\n\n## 14.1.651\n\nFix background shape\n\n## 14.1.604\n\nMigration from @onemrvapublic/core to @onemrvapublic/design-system\n\n## 14.1.512\n\nDraft version\n"}

package/assets/json/expansion.json

@@ -0,0 +1 @@
+{"demo-expansion.component.html":"<mat-expansion-panel hideToggle=\"false\">\n  <mat-expansion-panel-header>\n    <mat-panel-title>\n      <h2>Click me</h2>\n    </mat-panel-title>\n  </mat-expansion-panel-header>\n\n  I am a content in an expansion panel\n</mat-expansion-panel>\n","demo-expansion.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { MatExpansionModule } from '@angular/material/expansion';\n\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-expansion',\n  templateUrl: 'demo-expansion.component.html',\n\n  standalone: true,\n  imports: [MatIconModule, MatExpansionModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoExpansionComponent extends DemoComponentBase {}\n"}

package/assets/json/fab.json

@@ -0,0 +1 @@
+{"demo-fab.component.html":"<button\n  mat-fab\n  matTooltip=\"Info about the action\"\n  [color]=\"color\"\n  [disabled]=\"disabled\"\n  aria-label=\"Example icon button with a delete icon\"\n>\n  <mat-icon>{{ icon }}</mat-icon>\n</button>\n","demo-fab.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-fab',\n  templateUrl: 'demo-fab.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatSelectModule,\n    MatIconModule,\n    MatButtonModule,\n    MatTooltipModule,\n    OnemRvaColorDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFabComponent extends DemoComponentBase {\n  @Input() icon = 'home';\n  @Input() color: OnemrvaMatColor = '';\n  @Input() disabled = false;\n}\n"}

package/assets/json/file-panel.json

@@ -0,0 +1 @@
+{"demo-file-panel.component.html":"<file-panel [file]=\"getFile()\"> </file-panel>\n","demo-file-panel.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\n\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  convertToReferencedProgressFile,\n  ReferencedProgressFile,\n  OnemrvaMatFileUploadModule,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\nexport interface Annex {\n  /**\n   * Document reference in document service\n   */\n  documentId?: string;\n  /**\n   * Name of the document\n   */\n  name?: string;\n}\n\n@Component({\n  selector: 'app-demo-file-panel',\n  templateUrl: 'demo-file-panel.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatButtonModule, OnemrvaMatFileUploadModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFilePanelComponent extends DemoComponentBase {\n  @Input()\n  color: '' | 'warn' | 'success' | 'error' = '';\n\n  testFile: Annex = {\n    documentId: '1',\n    name: 'File',\n  };\n\n  successFile: ReferencedProgressFile = {\n    ref: Symbol('1'),\n    enableProgressBar: false,\n    id: '1',\n    message: 'This is how a success file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Success',\n    file: undefined,\n    color: 'success',\n    maxSize: 100,\n  };\n  errorFile: ReferencedProgressFile = {\n    ref: Symbol('2'),\n    enableProgressBar: false,\n    id: '2',\n    message: 'This is how an error file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Error',\n    file: undefined,\n    color: 'error',\n    maxSize: 100,\n  };\n  warnFile: ReferencedProgressFile = {\n    ref: Symbol('3'),\n    enableProgressBar: false,\n    id: '3',\n    message: 'This is how a warn file will look like',\n    progress: 50,\n    size: 100,\n    type: '',\n    url: null,\n    name: 'Warn',\n    file: undefined,\n    color: 'warn',\n    maxSize: 100,\n  };\n\n  convertToProgressFile(annex: Annex) {\n    return convertToReferencedProgressFile(annex.documentId!, annex.name!);\n  }\n\n  getFile() {\n    switch (this.color) {\n      case 'success':\n        return this.successFile;\n      case 'error':\n        return this.errorFile;\n      case 'warn':\n        return this.warnFile;\n      default:\n        return this.convertToProgressFile(this.testFile);\n    }\n  }\n}\n"}

package/assets/json/file-upload-manual.json

@@ -0,0 +1 @@
+{"demo-file-upload-manual.component.html":"<h1>File Upload</h1>\n<onemrva-mat-file-upload\n  [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n  [maxFileSize]=\"1485760\"\n  [filePanelTemplate]=\"tpl\"\n  errorMessage=\"test\"\n  [uploadOnDrop]=\"false\"\n>\n</onemrva-mat-file-upload>\n<br />\n\n<div class=\"execute\">\n  <button\n    mat-stroked-button\n    color=\"primary\"\n    [loading]=\"!!(loadingGlossary | async)\"\n    (click)=\"send()\"\n  >\n    @if (loadingGlossary | async) {\n      <ng-container>{{ 'Loading' | translate }} ...</ng-container>\n    } @else {\n      <ng-container>{{ 'Send' | translate }}</ng-container>\n    }\n  </button>\n</div>\n\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n  <file-panel [file]=\"file\" [actions]=\"actions\"> </file-panel>\n</ng-template>\n","demo-file-upload-manual.component.ts":"import { Component, inject, OnInit, ViewEncapsulation } from '@angular/core';\nimport { TranslatePipe, TranslateService } from '@ngx-translate/core';\nimport { CommonModule } from '@angular/common';\nimport { Observable, of, Subject, take } from 'rxjs';\nimport { DemoFileUploadManualService } from './demo-file-upload-manual.service';\nimport { MatDialog } from '@angular/material/dialog';\nimport {\n  ActionConfig,\n  OnemrvaMatFileUploadModule,\n  OnemrvaMatFileUploadService,\n  OnemrvaMatFileUploadStore,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system';\nimport { MatButton, MatButtonModule } from '@angular/material/button';\nimport {\n  OnemrvaMatLoadingDirective,\n  OnemrvaMatSpinnerModule,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-file-upload-manual',\n  standalone: true,\n  imports: [\n    CommonModule,\n    OnemrvaMatFileUploadModule,\n    MatButton,\n    TranslatePipe,\n    OnemrvaMatLoadingDirective,\n  ],\n  templateUrl: 'demo-file-upload-manual.component.html',\n\n  providers: [\n    TranslateService,\n    TranslatePipe,\n    MatButtonModule,\n    OnemrvaMatSpinnerModule,\n    OnemrvaMatFileUploadStore,\n    {\n      provide: OnemrvaMatFileUploadService,\n      useClass: DemoFileUploadManualService,\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFileUploadManualComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  destroyNotifier$: Subject<void> = new Subject<void>();\n\n  fileUploadStore = inject(OnemrvaMatFileUploadStore);\n  dialog = inject(MatDialog);\n\n  files$: Observable<ReferencedProgressFile[]> = this.fileUploadStore.files$;\n\n  public loadingGlossary = this.fileUploadStore.isSending;\n\n  public actions: ActionConfig[] = [\n    {\n      iconName: 'download',\n      dataCy: 'onemrva-file-panel-download',\n      tooltipCode: 'file.upload.download',\n      ariaCode: 'file.upload.download',\n      clickHandler: this.downloadFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'delete',\n      dataCy: 'onemrva-file-panel-delete',\n      tooltipCode: 'file.upload.delete',\n      ariaCode: 'file.upload.delete',\n      clickHandler: this.deleteFileAction.bind(this),\n      showAction: this.isDeletable,\n    },\n    {\n      iconName: 'refresh',\n      dataCy: 'onemrva-file-panel-retry',\n      tooltipCode: 'file.upload.retry',\n      ariaCode: 'file.upload.retry',\n      clickHandler: this.retryUpload.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n    {\n      iconName: 'visibility',\n      dataCy: 'onemrva-file-panel-view',\n      tooltipCode: 'file.upload.view',\n      ariaCode: 'file.upload.view',\n      clickHandler: this.view.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'close',\n      dataCy: 'onemrva-file-panel-remove',\n      tooltipCode: 'file.upload.remove',\n      ariaCode: 'file.upload.remove',\n      clickHandler: this.removeFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n  ];\n\n  ngOnInit(): void {\n    this.fileUploadStore.listUploadedFiles(null);\n  }\n\n  retryUpload(file: ReferencedProgressFile) {\n    this.fileUploadStore.retryFile({ ...file });\n  }\n\n  removeFile(file: ReferencedProgressFile) {\n    this.fileUploadStore.removeFile(file);\n  }\n\n  deleteFileAction(file: ReferencedProgressFile) {\n    if (this.isDeletable(file)) {\n      this.fileUploadStore.deleteFile(file);\n    }\n  }\n\n  view(file: ReferencedProgressFile) {\n    if (!file.url) throw 'No url';\n    window.open('http://www.google.com', '_blank', 'noopener noreferrer');\n  }\n\n  isDeletable(file: ReferencedProgressFile): boolean {\n    return (\n      file.color !== 'primary' && file.color !== '' && file.color !== 'warn'\n    );\n  }\n\n  downloadFile(id: any): Observable<any> {\n    alert(`Missing download implementation for file ID ${id}`);\n    return of(true);\n  }\n\n  send() {\n    this.files$.pipe(take(1)).subscribe((files: any[]) => {\n      this.fileUploadStore.uploadFiles(files);\n    });\n  }\n}\n","demo-file-upload-manual.service.ts":"import {\n  HttpEvent,\n  HttpEventType,\n  HttpProgressEvent,\n  HttpResponse,\n} from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport {\n  ProgressFile,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system';\nimport { interval, map, Observable, of, take } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DemoFileUploadManualService {\n  constructor() {\n    console.log('DemoFileUploadManualService');\n  }\n\n  listUploadedFiles(inputs: any): Observable<ProgressFile[]> {\n    console.log(inputs);\n    return of([]);\n  }\n\n  upload(\n    file: ProgressFile | ReferencedProgressFile,\n  ): Observable<HttpEvent<any>> {\n    console.log(file);\n    return interval(27).pipe(\n      take(101),\n      map(i => {\n        if (i < 100) {\n          return {\n            type: HttpEventType.UploadProgress,\n            loaded: i,\n            total: 100,\n          } as HttpProgressEvent;\n        } else {\n          if (i >= 100 && Math.random() > 0.5) {\n            throw 'Fake error thrown';\n          }\n          return new HttpResponse<any>({\n            body: { id: 'E', dummyProp: 'dummy value' },\n          });\n        }\n      }),\n    );\n  }\n\n  deleteFile(file: any): Observable<any> {\n    console.log(file);\n    return of('F = m.a');\n  }\n\n  retry(file: ReferencedProgressFile): Observable<HttpEvent<any>> {\n    return this.upload(file);\n  }\n}\n","readme.md":"# Installation\n\n```bash\nnpm install --save @onemrvapublic/theme\nnpm install --save @onemrvapublic/design-system\n```\n\nIn style.scss:\n\n```scss\n@use '@onemrvapublic/theme' as theme;\n@use '@onemrvapublic/design-system' as onemrvaMat;\n\n@include theme.reset();\n\n.onemrva-theme {\n  @include theme.onemrva();\n  @include onemrvaMat.fileUpload(theme.$onemrva-theme);\n}\n```\n\n# Changelog\n\n## 14.1.XXX\n\nThibaut, tu as oublié de mettre à jour le changeLog\n"}

package/assets/json/file-upload.json

@@ -0,0 +1 @@
+{"demo-file-upload.component.html":"<onemrva-mat-file-upload\n  [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n  [maxFileSize]=\"1485760\"\n  [filePanelTemplate]=\"tpl\"\n  errorMessage=\"test\"\n>\n</onemrva-mat-file-upload>\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n  <file-panel\n    [file]=\"file\"\n    [actions]=\"actions\"\n    [showProgress]=\"true\"\n  ></file-panel>\n</ng-template>\n","demo-file-upload.component.ts":"import {\n  Component,\n  OnInit,\n  ViewEncapsulation,\n  InjectionToken,\n  Inject,\n  inject,\n} from '@angular/core';\n\nimport { Observable, Subject } from 'rxjs';\nimport { DemoFileUploadService } from './demo-file-upload.service';\nimport { MatDialog } from '@angular/material/dialog';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n  ActionConfig,\n  OnemrvaMatFileUploadModule,\n  OnemrvaMatFileUploadService,\n  OnemrvaMatFileUploadStore,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system';\nimport { TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntil } from 'rxjs/operators';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nexport const CUSTOM_VALIDATION_FN = new InjectionToken<any>(\n  'CUSTOM_VALIDATION_FN',\n);\n\n@Component({\n  selector: 'app-demo-file-upload',\n  templateUrl: 'demo-file-upload.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    OnemrvaMatFileUploadModule,\n    MatButtonModule,\n    TranslateModule,\n  ],\n  providers: [\n    OnemrvaMatFileUploadStore,\n    TranslateService,\n    {\n      provide: OnemrvaMatFileUploadService,\n      useClass: DemoFileUploadService,\n    },\n    {\n      provide: CUSTOM_VALIDATION_FN,\n      useValue: (x: any) => x[0],\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFileUploadComponent\n  extends DemoComponentBase\n  implements OnInit\n{\n  destroyNotifier$: Subject<void> = new Subject<void>();\n  fileUploadStore = inject(OnemrvaMatFileUploadStore);\n  fileUploadService = inject(OnemrvaMatFileUploadService);\n  dialog = inject(MatDialog);\n\n  files$: Observable<ReferencedProgressFile[]> = this.fileUploadStore.files$;\n\n  constructor() {\n    super();\n\n    this.fileUploadStore.files$.pipe(takeUntilDestroyed()).subscribe(value => {\n      this.output.set(value);\n    });\n  }\n\n  actions: ActionConfig[] = [\n    {\n      iconName: 'download',\n      dataCy: 'onemrva-file-panel-download',\n      tooltipCode: 'file.upload.download',\n      ariaCode: 'file.upload.download',\n      clickHandler: this.downloadFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'delete',\n      dataCy: 'onemrva-file-panel-delete',\n      tooltipCode: 'file.upload.delete',\n      ariaCode: 'file.upload.delete',\n      clickHandler: this.deleteFileAction.bind(this),\n      showAction: this.isDeletable,\n    },\n    {\n      iconName: 'refresh',\n      dataCy: 'onemrva-file-panel-retry',\n      tooltipCode: 'file.upload.retry',\n      ariaCode: 'file.upload.retry',\n      clickHandler: this.retryUpload.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n    {\n      iconName: 'visibility',\n      dataCy: 'onemrva-file-panel-view',\n      tooltipCode: 'file.upload.view',\n      ariaCode: 'file.upload.view',\n      clickHandler: this.view.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'success',\n    },\n    {\n      iconName: 'close',\n      dataCy: 'onemrva-file-panel-remove',\n      tooltipCode: 'file.upload.remove',\n      ariaCode: 'file.upload.remove',\n      clickHandler: this.removeFile.bind(this),\n      showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n    },\n  ];\n\n  ngOnInit(): void {\n    this.fileUploadStore.listUploadedFiles(null);\n  }\n\n  downloadFile(file: ReferencedProgressFile) {\n    this.fileUploadService.downloadFile(file.id);\n  }\n\n  retryUpload(file: ReferencedProgressFile) {\n    this.fileUploadStore.retryFile({ ...file });\n  }\n\n  removeFile(file: ReferencedProgressFile) {\n    this.fileUploadStore.removeFile(file);\n  }\n\n  deleteFileAction(file: ReferencedProgressFile) {\n    if (this.isDeletable(file)) {\n      this.fileUploadStore.deleteFile(file);\n    }\n  }\n\n  view(file: ReferencedProgressFile) {\n    if (!file.url) throw 'No url';\n    window.open('http://www.google.com', '_blank', 'noopener noreferrer');\n  }\n\n  isDeletable(file: ReferencedProgressFile): boolean {\n    return (\n      file.color !== 'primary' && file.color !== '' && file.color !== 'warn'\n    );\n  }\n}\n","demo-file-upload.service.ts":"import {\n  HttpEvent,\n  HttpEventType,\n  HttpProgressEvent,\n  HttpResponse,\n} from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport {\n  ProgressFile,\n  ReferencedProgressFile,\n} from '@onemrvapublic/design-system';\nimport { interval, map, Observable, of, take } from 'rxjs';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class DemoFileUploadService {\n  constructor() {\n    //console.log('DemoFileUploadService');\n  }\n\n  listUploadedFiles(inputs: any): Observable<ProgressFile[]> {\n    console.log(inputs);\n    return of([]);\n  }\n\n  upload(\n    file: ProgressFile | ReferencedProgressFile,\n  ): Observable<HttpEvent<any>> {\n    console.log(file);\n    return interval(27).pipe(\n      take(101),\n      map(i => {\n        if (i < 100) {\n          return {\n            type: HttpEventType.UploadProgress,\n            loaded: i,\n            total: 100,\n          } as HttpProgressEvent;\n        } else {\n          if (i >= 100 && Math.random() > 0.5) {\n            throw 'Fake error thrown';\n          }\n          return new HttpResponse<any>({});\n        }\n      }),\n    );\n  }\n\n  deleteFile(file: any): Observable<any> {\n    console.log(file);\n    return of('F = m.a');\n  }\n\n  retry(file: ReferencedProgressFile): Observable<HttpEvent<any>> {\n    return this.upload(file);\n  }\n\n  downloadFile(id: any): Observable<any> {\n    alert(`Missing download implementation for file ID ${id}`);\n    return of(true);\n  }\n}\n"}

package/assets/json/grid.json

@@ -0,0 +1 @@
+{"demo-grid.component.html":"<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"content\">col-6</div>\n    </div>\n  </div>\n  <div class=\"row gy gx\">\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n    <div class=\"col-3\">\n      <div class=\"content\">col-3</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n  </div>\n  <div class=\"row gy\">\n    <div class=\"col-4 offset-4\">\n      <div class=\"content\">col offset-3</div>\n    </div>\n    <div class=\"col-2 offset-auto\">\n      <div class=\"content\">col-2 offset-auto</div>\n    </div>\n  </div>\n  <p>Responsive:</p>\n  <div class=\"row\">\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n  </div>\n</div>\n","demo-grid.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-grid',\n  templateUrl: './demo-grid.component.html',\n\n  standalone: true,\n  imports: [CommonModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoGridComponent extends DemoComponentBase {}\n"}

package/assets/json/horizontal-stepper.json

@@ -0,0 +1 @@
+{"demo-horizontal-stepper.component.html":"<mat-stepper #stepper1 [linear]=\"linear\" headerPosition=\"top\">\n  <mat-step\n    [stepControl]=\"firstFormGroup\"\n    errorMessage=\"Name is required.\"\n    aria-label=\"Fill out your name\"\n  >\n    <form [formGroup]=\"firstFormGroup\">\n      <ng-template matStepLabel>Fill out your name</ng-template>\n      <mat-form-field>\n        <mat-label>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>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-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\n    [stepControl]=\"secondFormGroup\"\n    errorMessage=\"Address is required.\"\n    aria-label=\"Fill out your address\"\n  >\n    <form [formGroup]=\"secondFormGroup\">\n      <ng-template matStepLabel>Fill out your address</ng-template>\n      <mat-form-field>\n        <mat-label>Address</mat-label>\n        <input\n          matInput\n          placeholder=\"Ex. 1 Main St, New York, NY\"\n          formControlName=\"secondCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-button\n          mat-stroked-button\n          color=\"primary\"\n          matStepperPrevious\n        >\n          Back\n        </button>\n        <button\n          mat-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    <p>You are now done.</p>\n    <div>\n      <button mat-button mat-stroked-button color=\"primary\" matStepperPrevious>\n        Back\n      </button>\n      <button mat-button color=\"primary\" (click)=\"stepper1.reset()\">\n        Reset\n      </button>\n    </div>\n  </mat-step>\n</mat-stepper>\n","demo-horizontal-stepper.component.ts":"import { Component, inject } 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-horizontal-stepper',\n  templateUrl: './demo-horizontal-stepper.component.html',\n  standalone: true,\n\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})\nexport class DemoHorizontalStepperComponent extends DemoComponentBase {\n  public linear = true;\n  _formBuilder = inject(FormBuilder);\n\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/json/icon-button.json

@@ -0,0 +1 @@
+{"demo-icon-button.component.html":"<button\n  mat-icon-button\n  color=\"primary\"\n  aria-label=\"Example icon button with a home icon\"\n>\n  <mat-icon>home</mat-icon>\n</button>\n<button\n  mat-icon-button\n  color=\"accent\"\n  aria-label=\"Example icon button with a menu icon\"\n>\n  <mat-icon>menu</mat-icon>\n</button>\n","demo-icon-button.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-icon-button',\n  templateUrl: './demo-icon-button.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatIconModule, MatButtonModule, MatToolbarModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoIconButtonComponent extends DemoComponentBase {\n  isSelected: FormControl<boolean | null> = new FormControl<boolean>(false);\n\n  handleToggle(isSelected: boolean) {\n    console.log('Event onToggleChoice: ', isSelected);\n  }\n}\n"}