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

package/assets/json/if-width-is.json

@@ -0,0 +1 @@
+{"demo-if-width-is.component.html":"<div style=\"display: flex; flex-flow: row wrap; gap: 16px\">\n  <div\n    class=\"demo-box\"\n    style=\"background-color: purple\"\n    *ifWidthIs=\"[Breakpoints.XSmall]\"\n  >\n    XSmall {{ Breakpoints.XSmall }}\n  </div>\n  <div\n    class=\"demo-box\"\n    style=\"background-color: blue\"\n    *ifWidthIs=\"[Breakpoints.Small]\"\n  >\n    Small {{ Breakpoints.Small }}\n  </div>\n  <div\n    class=\"demo-box\"\n    style=\"background-color: green\"\n    *ifWidthIs=\"[Breakpoints.Medium]\"\n  >\n    Medium {{ Breakpoints.Medium }}\n  </div>\n  <div\n    class=\"demo-box\"\n    style=\"background-color: yellow\"\n    *ifWidthIs=\"[Breakpoints.Large]\"\n  >\n    Large {{ Breakpoints.Large }}\n  </div>\n  <div\n    class=\"demo-box\"\n    style=\"background-color: orange\"\n    *ifWidthIs=\"[Breakpoints.XLarge]\"\n  >\n    XLarge {{ Breakpoints.XLarge }}\n  </div>\n  <div\n    class=\"demo-box\"\n    style=\"background-color: white\"\n    *ifWidthIs=\"[Breakpoints.XSmall, Breakpoints.Small]\"\n  >\n    XSmall, Small\n  </div>\n  <div\n    class=\"demo-box\"\n    style=\"background-color: red\"\n    *ifWidthIs=\"[Breakpoints.Large, Breakpoints.Medium, Breakpoints.XLarge]\"\n  >\n    Medium, Large, Xlarge\n  </div>\n</div>\n","demo-if-width-is.component.ts":"import { Breakpoints } from '@angular/cdk/layout';\nimport { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-if-width-is',\n\n  standalone: true,\n  imports: [CommonModule, OnemrvaSharedModule],\n  templateUrl: 'demo-if-width-is.component.html',\n})\nexport class DemoIfWidthIsComponent extends DemoComponentBase {\n  Breakpoints = Breakpoints;\n}\n"}

package/assets/json/language-switcher.json

@@ -0,0 +1 @@
+{"demo-language-switcher.component.html":"<button\n  mat-mini-fab\n  [matMenuTriggerFor]=\"languageMenu\"\n  class=\"onemrva-icon-button truc\"\n  aria-label=\"Language switcher\"\n>\n  <mat-icon>translate</mat-icon>\n</button>\n<mat-menu #languageMenu=\"matMenu\" class=\"mat-elevation-z2\">\n  @for (lang of languages; track lang) {\n    <div mat-menu-item tabindex=\"0\" (click)=\"changeLanguage(lang)\">\n      @if (language === lang) {\n        <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\"\n          >radio_button_checked</mat-icon\n        >\n      }\n      @if (language !== lang) {\n        <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\"\n          >radio_button_unchecked</mat-icon\n        >\n      }\n      {{ lang }}\n    </div>\n  }\n</mat-menu>\n","demo-language-switcher.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { TranslateService } from '@ngx-translate/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { CommonModule } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-language-switcher',\n  templateUrl: 'demo-language-switcher.component.html',\n\n  standalone: true,\n  imports: [MatButtonModule, MatMenuModule, MatIconModule, CommonModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoLanguageSwitcherComponent extends DemoComponentBase {\n  languages: string[] = [];\n\n  language = '';\n  translateService = inject(TranslateService);\n\n  constructor() {\n    super();\n    this.languages = this.translateService.getLangs();\n    this.language = this.translateService.currentLang;\n  }\n\n  /**\n   *\n   * @param $event\n   */\n  changeLanguage($event: string) {\n    console.log($event);\n    if (this.translateService.getLangs().includes($event)) {\n      this.translateService.use($event);\n      this.language = $event;\n    }\n  }\n}\n"}

package/assets/json/layout.json

@@ -0,0 +1 @@
+{"demo-layout-drawer.component.html":"<onemrva-drawer-title [showClose]=\"true\">\n  Example slide-over with content\n</onemrva-drawer-title>\n<onemrva-drawer-content>\n  <h2>Content title</h2>\n  <p>\n    The slide-over allows to get some content displayed on a panel with some\n    elements inside.\n  </p>\n  <form id=\"myForm\" class=\"mt-xl\" [formGroup]=\"myForm\">\n    <mat-grid-list cols=\"2\" [gutterSize]=\"'16px'\" [rowHeight]=\"'80px'\">\n      <mat-grid-tile [colspan]=\"2\" [rowspan]=\"1\">\n        <mat-form-field>\n          <mat-label>User ID</mat-label>\n          <input matInput [formControl]=\"userId\" />\n        </mat-form-field>\n      </mat-grid-tile>\n      <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n        <mat-form-field>\n          <mat-label>Left fiels</mat-label>\n          <input matInput [formControl]=\"leftField\" />\n        </mat-form-field>\n      </mat-grid-tile>\n      <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n        <mat-form-field>\n          <mat-label>Right field</mat-label>\n          <input matInput [formControl]=\"rightField\" />\n        </mat-form-field>\n      </mat-grid-tile>\n    </mat-grid-list>\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n    <br />\n  </form>\n</onemrva-drawer-content>\n<onemrva-drawer-actions>\n  <button mat-stroked-button color=\"primary\" (click)=\"drawerService.close()\">\n    Cancel\n  </button>\n  <button mat-flat-button color=\"accent\" (click)=\"save()\" class=\"ml\">\n    Save\n  </button>\n</onemrva-drawer-actions>\n","demo-layout-drawer.component.ts":"import { Component, inject, Input } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n  LayoutDrawerActionsComponent,\n  LayoutDrawerContentComponent,\n  LayoutDrawerTitleComponent,\n  OnemrvaDrawerService,\n} from '@onemrvapublic/design-system';\nimport { MatButton } from '@angular/material/button';\nimport { NgIf } from '@angular/common';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system';\nimport { MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatGridList, MatGridTile } from '@angular/material/grid-list';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'layout-drawer',\n  templateUrl: 'demo-layout-drawer.component.html',\n  standalone: true,\n  imports: [\n    LayoutDrawerActionsComponent,\n    LayoutDrawerContentComponent,\n    LayoutDrawerTitleComponent,\n    ReactiveFormsModule,\n    MatIconModule,\n    MatLabel,\n    MatFormField,\n    MatGridTile,\n    MatGridList,\n    MatInput,\n    MatButton,\n    OnemrvaMatPanelModule,\n  ],\n})\nexport class LayoutDrawerComponent extends DemoComponentBase {\n  @Input()\n  myForm!: FormGroup;\n\n  get userId() {\n    return this.myForm.get('userId') as FormControl;\n  }\n  get leftField() {\n    return this.myForm.get('leftField') as FormControl;\n  }\n  get rightField() {\n    return this.myForm.get('rightField') as FormControl;\n  }\n  drawerService = inject(OnemrvaDrawerService);\n\n  save() {\n    this.drawerService.close();\n  }\n}\n","demo-layout.component.html":"<onemrva-layout\n  [languages]=\"languages\"\n  [profile]=\"profile\"\n  (login)=\"login()\"\n  (logout)=\"logout()\"\n>\n  <onemrva-layout-title>Demo layout</onemrva-layout-title>\n\n  <onemrva-layout-login-menu>\n    <button\n      type=\"button\"\n      [ngClass]=\"{ active: activeMenu === 0 }\"\n      mat-menu-item\n      data-cy=\"trusteeButton\"\n      (click)=\"click(0)\"\n      attr.aria-label=\"{{ 'layout.interface.trusted' | translate }}\"\n    >\n      <mat-icon>star_outline</mat-icon\n      >{{ 'layout.interface.trusted' | translate }}\n    </button>\n    <button\n      [ngClass]=\"{ active: activeMenu === 1 }\"\n      class=\"active-link\"\n      type=\"button\"\n      mat-menu-item\n      data-cy=\"collaboButton\"\n      (click)=\"click(1)\"\n      attr.aria-label=\"{{ 'layout.interface.collaborator' | translate }}\"\n    >\n      <mat-icon>assignment_ind</mat-icon\n      >{{ 'layout.interface.collaborator' | translate }}\n    </button>\n  </onemrva-layout-login-menu>\n\n  <onemrva-layout-route\n    routerLink=\"/\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    >Home</onemrva-layout-route\n  >\n  <onemrva-layout-route\n    baseRouteForActiveMenu=\"/menu\"\n    dataCy=\"Menu\"\n    [label]=\"'Menu' | translate\"\n  >\n    <onemrva-layout-subroute routerLink=\"menu/submenu\"\n      >Submenu</onemrva-layout-subroute\n    >\n    <onemrva-layout-subroute routerLink=\"menu/submenu2\"\n      >Submenu 2</onemrva-layout-subroute\n    >\n    <onemrva-layout-subroute routerLink=\"menu/submenu3\"\n      >Submenu 3\n      <onemrva-layout-subroute routerLink=\"menu/submenu3/subsubmenu\"\n        >Submenu\n      </onemrva-layout-subroute>\n      <onemrva-layout-subroute routerLink=\"menu/submenu3/subsubmenu2\"\n        >Submenu 2</onemrva-layout-subroute\n      >\n    </onemrva-layout-subroute>\n  </onemrva-layout-route>\n  <onemrva-layout-route\n    baseRouteForActiveMenu=\"/menu2\"\n    [routerLinkActiveOptions]=\"{ exact: false }\"\n    dataCy=\"Menu\"\n    [label]=\"'Menu 2' | translate\"\n  >\n    <onemrva-layout-subroute routerLink=\"menu2/submenu\"\n      >Submenu</onemrva-layout-subroute\n    >\n    <onemrva-layout-subroute routerLink=\"menu2/submenu2\"\n      >Submenu 2</onemrva-layout-subroute\n    >\n  </onemrva-layout-route>\n  <onemrva-layout-after-nav>\n    <button\n      mat-icon-button\n      (click)=\"help()\"\n      [attr.aria-label]=\"'Help' | translate\"\n    >\n      <mat-icon>help</mat-icon>\n    </button>\n  </onemrva-layout-after-nav>\n\n  <onemrva-layout-sidenav-title>Test</onemrva-layout-sidenav-title>\n\n  <onemrva-layout-sidenav-menu [routerLink]=\"'/menu1/side1'\">\n    Menu 1\n    <onemrva-layout-sidenav-submenu [routerLink]=\"'/menu1/side1/sub1'\"\n      >Submenu 1</onemrva-layout-sidenav-submenu\n    >\n    <onemrva-layout-sidenav-submenu [routerLink]=\"'/menu1/side1/sub2'\"\n      >Submenu 2</onemrva-layout-sidenav-submenu\n    >\n  </onemrva-layout-sidenav-menu>\n\n  <onemrva-layout-sidenav-menu [routerLink]=\"'menu1/side2'\"\n    >Menu 2</onemrva-layout-sidenav-menu\n  >\n\n  <onemrva-layout-content>\n    <div class=\"container\">\n      <h1 translate>demo.title</h1>\n      This is a demo of the layout component\n      <hr />\n      <router-outlet></router-outlet>\n      <br />\n      <h1>Drawer</h1>\n      <button mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n        Open form\n      </button>\n      <br />\n      <br />\n      <br />\n      Form value: {{ dummyForm.value | json }}\n    </div>\n  </onemrva-layout-content>\n\n  <onemrva-layout-footer> footer</onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport {\n  OnemrvaDrawerService,\n  OnemRvaLanguage,\n  OnemrvaLayoutModule,\n  OnemRvaProfile,\n} from '@onemrvapublic/design-system';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { LayoutDrawerComponent } from './demo-layout-drawer.component';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\n\n@Component({\n  selector: 'app-demo-layout',\n  templateUrl: 'demo-layout.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    RouterModule,\n\n    TranslateModule,\n    MatIconModule,\n    MatMenuModule,\n    OnemrvaLayoutModule,\n    ReactiveFormsModule,\n    MatDialogModule,\n    MatButtonModule,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoLayoutComponent {\n  activeMenu = 1;\n\n  languages: OnemRvaLanguage[] = [\n    { code: 'fr', label: 'FR' },\n    { code: 'nl', label: 'NL' },\n    { code: 'en', label: 'EN' },\n    { code: 'de', label: 'DE' },\n  ];\n\n  profile: OnemRvaProfile;\n\n  drawerService = inject(OnemrvaDrawerService);\n  // keycloakService = inject(KeycloakService);\n\n  constructor() {\n    /** create a new empty profile */\n    this.profile = new OnemRvaProfile();\n\n    /** Fill the profile with keycloak's information */\n    // this.keycloakService.isLoggedIn().then((isLoggedIn ) => {\n    //   if (isLoggedIn) {\n    //     this.loadProfile();\n    //   }\n    // });\n  }\n\n  /**\n   * Login\n   */\n  login() {\n    // this.keycloakService.login({\n    //     redirectUri: document.location.href, // do we really need this redirect ?\n    // }).then((p) => {\n    this.loadProfile();\n    // });\n  }\n\n  /**\n   * Logout\n   */\n  logout() {\n    //    this.keycloakService.logout(new URL('/', document.location.href).href).then((v) => {\n    this.profile.logout();\n    //    });\n  }\n\n  /**\n   * This function loads the keycloak given information into the profile object that is managed by the layout\n   *\n   * @private\n   */\n  private loadProfile() {\n    this.profile.login('User', 'Name');\n  }\n\n  click(active: number) {\n    this.activeMenu = active;\n  }\n\n  dummyForm: FormGroup = new FormGroup({\n    userId: new FormControl(''),\n    leftField: new FormControl(''),\n    rightField: new FormControl(''),\n  });\n\n  toggleForm() {\n    const componentRef = this.drawerService.host?.createComponent(\n      LayoutDrawerComponent,\n    );\n    componentRef!.instance.myForm = this.dummyForm;\n\n    this.drawerService.hasBackdrop = true;\n    this.drawerService.drawer?.toggle();\n  }\n\n  help() {\n    alert('HELP');\n  }\n}\n"}

package/assets/json/link.json

@@ -0,0 +1 @@
+{"demo-link.component.html":"<p id=\"info\">\n  Vous avez perdu votre emploi et vous êtes à la recherche d'un nouveau travail\n  ? Vous souhaitez consacrer du temps à vos enfants ou\n  <a href=\"#carriere\">interrompre votre carrière</a> pour une autre raison ?\n</p>\n<p id=\"carriere\"><a href=\"#info\">Plus d'informations ></a></p>\n","demo-link.component.ts":"import { Component } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-link',\n  templateUrl: 'demo-link.component.html',\n  standalone: true,\n  imports: [CommonModule],\n})\nexport class DemoLinkComponent extends DemoComponentBase {}\n"}

package/assets/json/mask.json

@@ -0,0 +1 @@
+{"demo-mask.component.html":"<p>Rules</p>\n\n<ul>\n  <li>0: digits</li>\n  <li>A: letters (uppercase or lowercase) and digits</li>\n  <li>S: only letters (uppercase or lowercase)</li>\n  <li>U: only letters uppercase</li>\n  <li>L: only letters lowercase</li>\n</ul>\n\n<mat-form-field>\n  <mat-label>Mask: \"00.-.00/0000\"</mat-label>\n  <input\n    matInput\n    [onemrvamask]=\"'00.-.00/0000'\"\n    [formControl]=\"maskedInput1\"\n    aria-label=\"mask demo\"\n  />\n</mat-form-field>\n<mat-form-field>\n  <mat-label>Mask: \"UU +00 (0000)/00.00.00\"</mat-label>\n  <input\n    matInput\n    [onemrvamask]=\"'UU +00 (0000)/00.00.00'\"\n    [formControl]=\"maskedInput2\"\n    aria-label=\"mask demo\"\n  />\n</mat-form-field>\n<mat-form-field>\n  <mat-label>Mask: \"A%S:U--!L\"</mat-label>\n  <input\n    matInput\n    [onemrvamask]=\"'A%S:U--!L'\"\n    [formControl]=\"maskedInput3\"\n    aria-label=\"mask demo\"\n  />\n</mat-form-field>\n","demo-mask.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { OnemrvaSharedModule } from '@onemrvapublic/design-system/shared';\nimport { MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-mask',\n  templateUrl: 'demo-mask.component.html',\n\n  standalone: true,\n  imports: [\n    OnemrvaSharedModule,\n    ReactiveFormsModule,\n    MatLabel,\n    MatFormField,\n    MatInput,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMaskComponent extends DemoComponentBase {\n  maskedInput1: FormControl = new FormControl('');\n  maskedInput2: FormControl = new FormControl('');\n  maskedInput3: FormControl = new FormControl('');\n}\n"}

package/assets/json/menu.json

@@ -0,0 +1 @@
+{"demo-menu.component.html":"<button\n  mat-icon-button\n  [matMenuTriggerFor]=\"menu\"\n  class=\"onemrva-icon-button truc\"\n  aria-label=\"Menu\"\n>\n  <mat-icon>more_horiz</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\" class=\"mat-elevation-z2\">\n  <div mat-menu-item>\n    <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\">edit</mat-icon>Edit\n  </div>\n  <div mat-menu-item>\n    <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\">update</mat-icon\n    >Save\n  </div>\n</mat-menu>\n","demo-menu.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-menu',\n  templateUrl: 'demo-menu.component.html',\n\n  standalone: true,\n  imports: [MatButtonModule, MatMenuModule, MatIconModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMenuComponent extends DemoComponentBase {}\n"}

package/assets/json/message-box.json

@@ -0,0 +1 @@
+{"demo-message-box.component.html":"<onemrva-mat-message-box [color]=\"color\">\n  @if (sticker) {\n    <onemrva-mat-sticker color=\"accent\">New</onemrva-mat-sticker>\n  }\n  This is an {{ color }} message\n</onemrva-mat-message-box>\n","demo-message-box.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\n\nimport {\n  OnemRvaColorDirective,\n  OnemrvaMatMessageBoxComponent,\n  OnemrvaMatMessageBoxModule,\n} from '@onemrvapublic/design-system';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-message-box',\n  templateUrl: 'demo-message-box.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n\n    OnemrvaMatMessageBoxModule,\n    OnemrvaMatStickerModule,\n    OnemrvaMatMessageBoxComponent,\n    OnemRvaColorDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMessageBoxComponent extends DemoComponentBase {\n  @Input()\n  color: OnemrvaMatColor = '';\n\n  @Input()\n  sticker = false;\n}\n"}

package/assets/json/multiselect.json

@@ -0,0 +1 @@
+{"demo-multiselect.component.html":"<mat-form-field>\n  <mat-label>Select (single)</mat-label>\n  <mat-select [placeholder]=\"'Search here' | translate\">\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n<br /><br />\n<mat-form-field>\n  <mat-label>Select (single with filter)</mat-label>\n  <mat-select [placeholder]=\"'Search here' | translate\">\n    <mat-option>\n      <mat-select-search\n        [formControl]=\"filterCtrl\"\n        ariaLabel=\"{{ 'filter select' | translate }}\"\n        noEntriesFoundLabel=\"{{ 'Not found' | translate }}\"\n        placeholderLabel=\"{{ 'Search' | translate }}\"\n      ></mat-select-search>\n    </mat-option>\n    @for (value of toppingList$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n<br /><br />\n<mat-form-field>\n  <mat-label>Select (multiple)</mat-label>\n  <onemrva-mat-multi-select\n    [formControl]=\"multiselect\"\n    [selectionToggle]=\"true\"\n    [showFilter]=\"true\"\n  >\n    @for (value of toppingListMulti$ | async; track value) {\n      <mat-option [value]=\"value\">{{ value }}</mat-option>\n    }\n  </onemrva-mat-multi-select>\n  <mat-hint>Hint</mat-hint>\n</mat-form-field>\n","demo-multiselect.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { MatSelectChange, MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, of, startWith } from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { CommonModule } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport {\n  OnemrvaMatMultiSelectComponent,\n  OnemrvaMatMultiSelectModule,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-multiselect',\n  templateUrl: './demo-multiselect.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatSelectModule,\n    MatSelectSearchModule,\n    MatFormFieldModule,\n    OnemrvaMatMultiSelectModule,\n    OnemrvaMatMultiSelectComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMultiselectComponent extends DemoComponentBase {\n  toppings: FormControl = new FormControl('', Validators.required);\n  toppingList: string[] = [\n    'Arugula',\n    'Beef',\n    'Cale',\n    'Egg',\n    'Eggplant',\n    'Extra cheese',\n    'Ham',\n    'Mushroom',\n    'Onion',\n    'Parmesan',\n    'Paprika',\n    'Pepper',\n    'Pepperoni',\n    'Raisin',\n    'Sausage',\n    'Tomato',\n  ];\n  toppingList$: Observable<string[]>;\n\n  toppingListMulti$: Observable<string[]> = of([]);\n\n  multiselect = new FormControl('', Validators.required);\n  selected: any = 'four';\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n    setTimeout(() => {\n      this.toppingListMulti$ = of(this.toppingList);\n    }, 2000);\n\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return this.toppingList.filter((value: string) => {\n          if (!search || search === '') return this.toppings;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n\n  changed($event: MatSelectChange) {\n    alert($event.value);\n  }\n}\n"}

package/assets/json/niss-pipe.json

@@ -0,0 +1 @@
+{"demo-niss-pipe.component.html":"<div>{{ '80120112345' | onemrvaNiss }}</div>\nError when the NISS is not exactly 11 char long:\n<div>{{ '801201123451' | onemrvaNiss }}</div>\n","demo-niss-pipe.component.ts":"import { Component } from '@angular/core';\nimport { OnemrvaNissPipe } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'demo-niss-pipe',\n  templateUrl: 'demo-niss-pipe.component.html',\n  standalone: true,\n  imports: [OnemrvaNissPipe],\n})\nexport class DemoNissPipeComponent extends DemoComponentBase {}\n"}

package/assets/json/not-found.json

@@ -0,0 +1 @@
+{"demo-not-found.component.html":"<page-not-found>\n  <page-not-found-action>\n    <button mat-stroked-button color=\"primary\" (click)=\"contact()\">\n      <mat-icon>email</mat-icon> {{ '404.contact.us' | translate }}\n    </button>\n  </page-not-found-action>\n  <page-not-found-action>\n    <button mat-flat-button color=\"accent\" (click)=\"home()\">\n      <mat-icon>home</mat-icon> {{ '404.go.back' | translate }}\n    </button>\n  </page-not-found-action>\n  <page-not-found-extra>\n    <h3>\n      {{ '404.extra' | translate }}\n    </h3>\n\n    <mat-form-field style=\"width: 400px\">\n      <mat-label for=\"searchInput\">{{\n        '404.search.input.label' | translate\n      }}</mat-label>\n      <input id=\"searchInput\" matInput [formControl]=\"searchInput\" />\n      <mat-icon matSuffix>search</mat-icon> </mat-form-field\n    >&nbsp;&nbsp;\n    <button mat-flat-button color=\"accent\" (click)=\"search()\">Search</button>\n  </page-not-found-extra>\n</page-not-found>\n","demo-not-found.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\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  PageNotFoundActionComponent,\n  PageNotFoundExtraComponent,\n  PageNotFoundComponent,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-not-found',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatIconModule,\n    ReactiveFormsModule,\n    TranslateModule,\n    MatInputModule,\n    MatButtonModule,\n    PageNotFoundComponent,\n    PageNotFoundActionComponent,\n    PageNotFoundExtraComponent,\n  ],\n  templateUrl: 'demo-not-found.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoNotFoundComponent extends DemoComponentBase {\n  searchInput: FormControl = new FormControl('');\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"}

package/assets/json/notification.json

@@ -0,0 +1 @@
+{"demo-notification.component.html":"<onemrva-mat-notification color=\"info\" [closable]=\"true\">\n  Hello <a href=\"#hello\">world</a>\n</onemrva-mat-notification>\n","demo-notification.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { OnemrvaMatNotificationComponent } from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-notification',\n  templateUrl: 'demo-notification.component.html',\n\n  standalone: true,\n  imports: [OnemrvaMatNotificationComponent],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoNotificationComponent extends DemoComponentBase {}\n"}

package/assets/json/paginator.json

@@ -0,0 +1 @@
+{"demo-paginator.component.html":"<h3>type = 'default'</h3>\n\n<p>\n  The default paginator shows pages 5 by 5 except if there are only 6 remaining\n  pages. Buttons '...' are fast back/forward.\n</p>\n\n<onemrva-mat-paginator\n  [pageIndex]=\"pageIndex\"\n  [pageSize]=\"10\"\n  [length]=\"69\"\n  (onRequestPage)=\"changePage($event)\"\n  recordKey=\"records.per.page\"\n  #paginator\n>\n</onemrva-mat-paginator>\n\n<br />\n\n<h3>type = 'complex'</h3>\n\n<p>\n  To get the complex paginator, you need to set the type to 'complex'. It shows\n  pages 5 by 5 except if there are max 7 remaining pages. Buttons '...' are fast\n  back/forward. First and last pages are always reachable.\n</p>\n\n<onemrva-mat-paginator\n  [pageIndex]=\"pageIndex2\"\n  [pageSize]=\"20\"\n  [length]=\"339\"\n  type=\"complex\"\n  recordKey=\"records.per.page\"\n  (onRequestPage)=\"changePage($event, 'complex')\"\n  #paginator\n>\n</onemrva-mat-paginator>\n","demo-paginator.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport {\n  OnemrvaMatPaginatorComponent,\n  OnemrvaMatPaginatorModule,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-paginator',\n  templateUrl: 'demo-paginator.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    TranslateModule,\n    OnemrvaMatPaginatorModule,\n    OnemrvaMatPaginatorComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPaginatorComponent extends DemoComponentBase {\n  pageIndex = 0;\n  pageIndex2 = 0;\n\n  changePage(pageIndex: number, type: 'default' | 'complex' = 'default') {\n    if (type === 'complex') this.pageIndex2 = pageIndex;\n    else this.pageIndex = pageIndex;\n  }\n}\n"}

package/assets/json/palette.json

@@ -0,0 +1 @@
+{"demo-palette.component.html":"<div [color]=\"color\">\n  <!-- Primary Colors -->\n  <h2>Primary Colors</h2>\n  <div class=\"demo-compact-color-container\">\n    @for (\n      token of colorTokens | filter: 'category' : 'primary';\n      track token.name\n    ) {\n      <div class=\"demo-color-container\">\n        <div\n          class=\"demo-heading\"\n          [style.background]=\"'var(' + token.variable + ')'\"\n          [style.color]=\"'var(' + token.onVariable + ')'\"\n        >\n          <div class=\"demo-name\">{{ token.name }}</div>\n          <div class=\"demo-variables\">\n            <div class=\"demo-variable demo-code\">{{ token.variable }}</div>\n          </div>\n          @if (token.darkPalette) {\n            <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n          }\n          @if (token.lightPalette) {\n            <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n          }\n          @if (token.onVariable) {\n            <div class=\"demo-variables\">\n              <div\n                class=\"demo-variable demo-code\"\n                [style.color]=\"'var(' + token.onVariable + ')'\"\n              >\n                {{ token.onVariable }}\n              </div>\n            </div>\n          }\n          @if (token.onDarkPalette) {\n            <span class=\"palette-sticker-dark\">{{ token.onDarkPalette }}</span>\n          }\n          @if (token.onLightPalette) {\n            <span class=\"palette-sticker\">{{ token.onLightPalette }}</span>\n          }\n        </div>\n      </div>\n    }\n  </div>\n\n  @if (color === 'primary') {\n    <!-- Surface Colors -->\n    <h2>Surface Colors</h2>\n    <p>\n      The following colors should be used for backgrounds and large,\n      low-emphasis areas of the screen.\n    </p>\n    <p>\n      Containers filled with a surface color should apply the\n      <span class=\"demo-surface-variable\">--mat-sys-on-surface</span> color to\n      text and icons placed within.\n    </p>\n    <div class=\"demo-compact-color-container\">\n      @for (\n        token of colorTokens | filter: 'category' : 'surface';\n        track token.name\n      ) {\n        <div class=\"demo-color-container\">\n          <div\n            class=\"demo-heading\"\n            [style.background-color]=\"'var(' + token.variable + ')'\"\n            [style.color]=\"'var(' + token.onVariable + ')'\"\n          >\n            <div class=\"demo-name\">{{ token.name }}</div>\n            <div class=\"demo-variables\">\n              <div class=\"demo-variable demo-code\">{{ token.variable }}</div>\n            </div>\n            <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n            <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n\n            @if (token.onVariable) {\n              <div class=\"demo-variables\">\n                <div\n                  class=\"demo-variable demo-code\"\n                  [style.color]=\"'var(' + token.onVariable + ')'\"\n                >\n                  {{ token.onVariable }}\n                </div>\n              </div>\n            }\n            @if (token.onDarkPalette) {\n              <span class=\"palette-sticker-dark\">{{\n                token.onDarkPalette\n              }}</span>\n            }\n            @if (token.onLightPalette) {\n              <span class=\"palette-sticker\">{{ token.onLightPalette }}</span>\n            }\n          </div>\n        </div>\n      }\n    </div>\n    <!-- Surface Colors -->\n    <h2>Surface Containers</h2>\n    <div class=\"demo-compact-color-container\">\n      @for (\n        token of colorTokens | filter: 'category' : 'surface-container';\n        track token.name\n      ) {\n        <div class=\"demo-color-container\">\n          <div\n            class=\"demo-heading\"\n            [style.background-color]=\"'var(' + token.variable + ')'\"\n            [style.color]=\"'var(' + token.onVariable + ')'\"\n          >\n            <div class=\"demo-name\">{{ token.name }}</div>\n            <div class=\"demo-variables\">\n              <div class=\"demo-variable demo-code\">{{ token.variable }}</div>\n            </div>\n            <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n            <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n\n            @if (token.onVariable) {\n              <div class=\"demo-variables\">\n                <div\n                  class=\"demo-variable demo-code\"\n                  [style.color]=\"'var(' + token.onVariable + ')'\"\n                >\n                  {{ token.onVariable }}\n                </div>\n              </div>\n            }\n            @if (token.onDarkPalette) {\n              <span class=\"palette-sticker-dark\">{{\n                token.onDarkPalette\n              }}</span>\n            }\n            @if (token.onLightPalette) {\n              <span class=\"palette-sticker\">{{ token.onLightPalette }}</span>\n            }\n            <a href=\"http://localhost:4201/demos/palette\">test</a>\n          </div>\n        </div>\n      }\n    </div>\n\n    <!-- Fixed Colors -->\n    <h2>Fixed Colors</h2>\n    <p>\n      These colors are the same for both light and dark themes. They are unused\n      by any Angular Material components.\n    </p>\n    <div class=\"demo-compact-color-container\">\n      @for (\n        token of colorTokens | filter: 'category' : 'fixed';\n        track token.name\n      ) {\n        <div class=\"demo-color-container\">\n          <div\n            class=\"demo-heading\"\n            [style.background-color]=\"'var(' + token.variable + ')'\"\n            [style.color]=\"'var(' + token.onVariable + ')'\"\n          >\n            <div class=\"demo-name\">{{ token.name }}</div>\n            <div class=\"demo-variables\">\n              <div class=\"demo-variable demo-code\">{{ token.variable }}</div>\n            </div>\n            <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n            <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n\n            @if (token.onVariable) {\n              <div class=\"demo-variables\">\n                <div\n                  class=\"demo-variable demo-code\"\n                  [style.color]=\"'var(' + token.onVariable + ')'\"\n                >\n                  {{ token.onVariable }}\n                </div>\n              </div>\n            }\n            @if (token.onDarkPalette) {\n              <span class=\"palette-sticker-dark\">{{\n                token.onDarkPalette\n              }}</span>\n            }\n            @if (token.onLightPalette) {\n              <span class=\"palette-sticker\">{{ token.onLightPalette }}</span>\n            }\n          </div>\n        </div>\n      }\n    </div>\n    <h2>System Colors</h2>\n    <div class=\"demo-compact-color-container\">\n      @for (\n        token of colorTokens | filter: 'category' : 'system';\n        track token.name\n      ) {\n        <div class=\"demo-color-container\">\n          <div\n            class=\"demo-heading\"\n            [style.background-color]=\"'var(' + token.variable + ')'\"\n            [style.color]=\"'var(' + (token.onVariable || token.variable) + ')'\"\n          >\n            <div class=\"demo-name\" style=\"color: var(--mat-sys-primary-fixed)\">\n              {{ token.name }}\n            </div>\n            <div class=\"demo-variables\">\n              <div\n                class=\"demo-variable demo-code\"\n                style=\"color: var(--mat-sys-primary-fixed)\"\n              >\n                {{ token.variable }}\n              </div>\n            </div>\n            <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n            <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n          </div>\n        </div>\n      }\n    </div>\n    <h2>Outlines</h2>\n    <div class=\"demo-compact-color-container\">\n      @for (\n        token of colorTokens | filter: 'category' : 'outline';\n        track token.name\n      ) {\n        <div\n          class=\"demo-color-container\"\n          [style.border-color]=\"'var(' + token.variable + ')'\"\n          [style.border-style]=\"'solid'\"\n          [style.border-width]=\"'2px'\"\n        >\n          <div class=\"demo-heading outline\">\n            <div class=\"demo-name\" style=\"color: var(--mat-sys-on-background)\">\n              {{ token.name }}\n            </div>\n            <div class=\"demo-variables\">\n              <div\n                class=\"demo-variable demo-code\"\n                style=\"color: var(--mat-sys-on-background)\"\n              >\n                {{ token.variable }}\n              </div>\n            </div>\n            <span class=\"palette-sticker-dark\">{{ token.darkPalette }}</span>\n            <span class=\"palette-sticker\">{{ token.lightPalette }}</span>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n","demo-palette.component.scss":".palette {\n  display: flex;\n  width: 400px;\n  flex-flow: row wrap;\n\n  .family {\n    flex: 1 0 300px;\n    padding: 40px 16px 8px;\n  }\n\n  .shade {\n    flex: 1 0 150px;\n    padding: 8px 16px;\n  }\n\n  .dark {\n    color: white;\n  }\n}\n\n.palettes-container {\n  display: flex;\n  flex-wrap: wrap;\n  max-width: 1000px;\n  gap: 20px;\n\n  .palette-container {\n    flex: 0.5 0 400px;\n  }\n}\n\n.demo-compact-color-container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 1rem;\n  padding: 1rem;\n}\n\n.demo-group {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 24px;\n  margin-bottom: 32px;\n}\n\n.demo-color-container {\n  min-height: 200px;\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.demo-heading {\n  padding: 1rem;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.demo-name {\n  font-size: 1.2rem;\n  font-weight: 500;\n}\n\n.demo-variables {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.demo-variable {\n  font-family: monospace;\n  font-size: 0.9rem;\n}\n\n.demo-description {\n  display: none;\n}\n\nh2 {\n  margin: 2.5rem 0 1rem;\n  color: var(--mat-sys-on-surface);\n  font-size: 1.5rem;\n  font-weight: 700;\n  text-align: left;\n}\n\np {\n  color: var(--mat-sys-on-surface-variant);\n  line-height: 1.6;\n  margin-bottom: 1rem;\n}\n\n.palette-sticker,\n.palette-sticker-dark {\n  display: inline-block;\n  padding: 0.25rem 0.5rem;\n  border-radius: 4px;\n  font-size: 0.8rem;\n  font-weight: 500;\n  text-align: center;\n}\n\n.palette-sticker {\n  background: white;\n  color: black;\n}\n\n.palette-sticker-dark {\n  background: black;\n  color: white;\n}\n\n@media (max-width: 768px) {\n  .demo-compact-color-container,\n  .demo-group {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n  .demo-heading {\n    min-height: 48px;\n    font-size: 1rem;\n  }\n}\n\n.color-selector {\n  margin-bottom: 2rem;\n  padding: 1rem;\n  background-color: var(--mat-sys-surface-container);\n  border-radius: 4px;\n\n  label {\n    display: block;\n    margin-bottom: 0.5rem;\n    color: var(--mat-sys-on-surface);\n    font-weight: 500;\n  }\n\n  select {\n    width: 100%;\n    max-width: 300px;\n    padding: 0.5rem;\n    border: 1px solid var(--mat-sys-outline);\n    border-radius: 4px;\n    background-color: var(--mat-sys-surface);\n    color: var(--mat-sys-on-surface);\n    font-size: 1rem;\n\n    &:focus {\n      outline: none;\n      border-color: var(--mat-sys-primary);\n    }\n  }\n}\n","demo-palette.component.ts":"import { CommonModule } from '@angular/common';\nimport { Component, Input, Pipe, PipeTransform } from '@angular/core';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\ninterface ColorToken {\n  name: string;\n  variable: string;\n  onVariable?: string;\n  darkPalette?: string;\n  lightPalette?: string;\n  onDarkPalette?: string;\n  onLightPalette?: string;\n  category?:\n    | 'primary'\n    | 'surface'\n    | 'fixed'\n    | 'system'\n    | 'surface-container'\n    | 'outline';\n}\n\n@Pipe({\n  name: 'filter',\n  standalone: true,\n})\nexport class FilterPipe implements PipeTransform {\n  transform(items: any[], field: string, value: any): any[] {\n    if (!items) return [];\n    return items.filter(item => item[field] === value);\n  }\n}\n\n@Component({\n  selector: 'app-demo-palette',\n  standalone: true,\n  imports: [CommonModule, FilterPipe, OnemRvaColorDirective],\n  styleUrls: ['./demo-palette.component.scss'],\n  templateUrl: 'demo-palette.component.html',\n})\nexport class DemoPaletteComponent extends DemoComponentBase {\n  colorCategories = [\n    { value: 'primary', label: 'Primary' },\n    { value: 'neutral', label: 'Neutral' },\n    { value: 'info', label: 'Info' },\n    { value: 'warn', label: 'Warning' },\n    { value: 'success', label: 'Success' },\n  ];\n\n  @Input() color: OnemrvaMatColor = 'primary';\n\n  onColorChange(event: Event) {\n    const select = event.target as HTMLSelectElement;\n    this.color = select.value as OnemrvaMatColor;\n  }\n\n  colorTokens: ColorToken[] = [\n    // Primary Colors\n    {\n      name: 'Primary',\n      variable: '--mat-sys-primary',\n      onVariable: '--mat-sys-on-primary',\n      darkPalette: 'primary-80',\n      lightPalette: 'primary-40',\n      onDarkPalette: 'primary-20',\n      onLightPalette: 'primary-100',\n      category: 'primary',\n    },\n    {\n      name: 'Primary Container',\n      variable: '--mat-sys-primary-container',\n      onVariable: '--mat-sys-on-primary-container',\n      darkPalette: 'primary-30',\n      lightPalette: 'primary-90',\n      onDarkPalette: 'primary-90',\n      onLightPalette: 'primary-30',\n      category: 'primary',\n    },\n    {\n      name: 'Secondary',\n      variable: '--mat-sys-secondary',\n      onVariable: '--mat-sys-on-secondary',\n      darkPalette: 'secondary-80',\n      lightPalette: 'secondary-40',\n      onDarkPalette: 'secondary-20',\n      onLightPalette: 'secondary-100',\n      category: 'primary',\n    },\n    {\n      name: 'Secondary Container',\n      variable: '--mat-sys-secondary-container',\n      onVariable: '--mat-sys-on-secondary-container',\n      darkPalette: 'secondary-30',\n      lightPalette: 'secondary-90',\n      onDarkPalette: 'secondary-90',\n      onLightPalette: 'secondary-30',\n      category: 'primary',\n    },\n    {\n      name: 'Tertiary',\n      variable: '--mat-sys-tertiary',\n      onVariable: '--mat-sys-on-tertiary',\n      darkPalette: 'tertiary-80',\n      lightPalette: 'tertiary-40',\n      onDarkPalette: 'tertiary-20',\n      onLightPalette: 'tertiary-100',\n      category: 'primary',\n    },\n    {\n      name: 'Tertiary Container',\n      variable: '--mat-sys-tertiary-container',\n      onVariable: '--mat-sys-on-tertiary-container',\n      darkPalette: 'tertiary-30',\n      lightPalette: 'tertiary-90',\n      onDarkPalette: 'tertiary-90',\n      onLightPalette: 'tertiary-30',\n      category: 'primary',\n    },\n    {\n      name: 'Error',\n      variable: '--mat-sys-error',\n      onVariable: '--mat-sys-on-error',\n      darkPalette: 'error-80',\n      lightPalette: 'error-40',\n      onDarkPalette: 'error-20',\n      onLightPalette: 'error-100',\n      category: 'primary',\n    },\n    {\n      name: 'Error Container',\n      variable: '--mat-sys-error-container',\n      onVariable: '--mat-sys-on-error-container',\n      darkPalette: 'error-30',\n      lightPalette: 'error-90',\n      onDarkPalette: 'error-90',\n      onLightPalette: 'error-30',\n      category: 'primary',\n    },\n    {\n      name: 'Gradient',\n      variable: '--background-gradient',\n      onVariable: '--on-background-gradient',\n      category: 'primary',\n    },\n    {\n      name: 'Outline',\n      variable: '--mat-sys-outline',\n      darkPalette: 'neutral-variant-60',\n      lightPalette: 'neutral-variant-50',\n      category: 'outline',\n    },\n    {\n      name: 'Outline Variant',\n      variable: '--mat-sys-outline-variant',\n      darkPalette: 'neutral-variant-30',\n      lightPalette: 'neutral-variant-80',\n      category: 'outline',\n    },\n\n    // Surface Colors\n    {\n      name: 'Background',\n      variable: '--mat-sys-background',\n      onVariable: '--mat-sys-on-background',\n      darkPalette: 'neutral-6',\n      lightPalette: 'neutral-98',\n      onDarkPalette: 'neutral-90',\n      onLightPalette: 'neutral-10',\n      category: 'surface',\n    },\n    {\n      name: 'Surface',\n      variable: '--mat-sys-surface',\n      onVariable: '--mat-sys-on-surface',\n      darkPalette: 'neutral-6',\n      lightPalette: 'neutral-98',\n      onDarkPalette: 'neutral-90',\n      onLightPalette: 'neutral-10',\n      category: 'surface',\n    },\n    {\n      name: 'Surface Variant',\n      variable: '--mat-sys-surface-variant',\n      onVariable: '--mat-sys-on-surface-variant',\n      darkPalette: 'neutral-variant-30',\n      lightPalette: 'neutral-variant-90',\n      onLightPalette: 'neutral-variant-30',\n      onDarkPalette: 'neutral-variant-90',\n      category: 'surface',\n    },\n    {\n      name: 'Surface Dim',\n      variable: '--mat-sys-surface-dim',\n      onVariable: '--mat-sys-on-surface',\n      darkPalette: 'neutral-6',\n      lightPalette: 'neutral-87',\n      onDarkPalette: 'neutral-90',\n      onLightPalette: 'neutral-10',\n      category: 'surface',\n    },\n    {\n      name: 'Surface Bright',\n      variable: '--mat-sys-surface-bright',\n      onVariable: '--mat-sys-on-surface',\n      darkPalette: 'neutral-24',\n      lightPalette: 'neutral-98',\n      onDarkPalette: 'neutral-90',\n      onLightPalette: 'neutral-10',\n      category: 'surface',\n    },\n    {\n      name: 'Surface Container Lowest',\n      variable: '--mat-sys-surface-container-lowest',\n      onVariable: '--mat-sys-on-surface',\n      darkPalette: 'neutral-4',\n      lightPalette: 'neutral-100',\n      onDarkPalette: 'neutral-90',\n      onLightPalette: 'neutral-10',\n      category: 'surface-container',\n    },\n    {\n      name: 'Surface Container Low',\n      variable: '--mat-sys-surface-container-low',\n      onVariable: '--mat-sys-on-surface',\n      darkPalette: 'neutral-10',\n      lightPalette: 'neutral-96',\n      onDarkPalette: 'neutral-90',\n      onLightPalette: 'neutral-10',\n      category: 'surface-container',\n    },\n    {\n      name: 'Surface Container',\n      variable: '--mat-sys-surface-container',\n      onVariable: '--mat-sys-on-surface',\n      darkPalette: 'neutral-12',\n      lightPalette: 'neutral-94',\n      onDarkPalette: 'neutral-90',\n      onLightPalette: 'neutral-10',\n      category: 'surface-container',\n    },\n    {\n      name: 'Surface Container High',\n      variable: '--mat-sys-surface-container-high',\n      onVariable: '--mat-sys-on-surface',\n      darkPalette: 'neutral-17',\n      lightPalette: 'neutral-92',\n      onDarkPalette: 'neutral-90',\n      onLightPalette: 'neutral-10',\n      category: 'surface-container',\n    },\n    {\n      name: 'Surface Container Highest',\n      variable: '--mat-sys-surface-container-highest',\n      onVariable: '--mat-sys-on-surface',\n      darkPalette: 'neutral-22',\n      lightPalette: 'neutral-90',\n      onDarkPalette: 'neutral-90',\n      onLightPalette: 'neutral-10',\n      category: 'surface-container',\n    },\n    {\n      name: 'Inverse Surface',\n      variable: '--mat-sys-inverse-surface',\n      onVariable: '--mat-sys-inverse-on-surface',\n      darkPalette: 'neutral-90',\n      lightPalette: 'neutral-20',\n      onDarkPalette: 'neutral-20',\n      onLightPalette: 'neutral-95',\n      category: 'surface',\n    },\n    {\n      name: 'Inverse Primary',\n      variable: '--mat-sys-inverse-primary',\n      darkPalette: 'primary-40',\n      lightPalette: 'primary-80',\n      onVariable: '--mat-sys-on-surface-variant',\n      onDarkPalette: 'primary-90',\n      onLightPalette: 'primary-30',\n      category: 'surface',\n    },\n\n    // Fixed Colors\n    {\n      name: 'Primary Fixed',\n      variable: '--mat-sys-primary-fixed',\n      onVariable: '--mat-sys-on-primary-fixed',\n      darkPalette: 'primary-90',\n      lightPalette: 'primary-90',\n      onDarkPalette: 'primary-10',\n      onLightPalette: 'primary-10',\n      category: 'fixed',\n    },\n    {\n      name: 'Primary Fixed Dim',\n      variable: '--mat-sys-primary-fixed-dim',\n      onVariable: '--mat-sys-on-primary-fixed-variant',\n      darkPalette: 'primary-80',\n      lightPalette: 'primary-80',\n      onDarkPalette: 'primary-30',\n      onLightPalette: 'primary-30',\n      category: 'fixed',\n    },\n    {\n      name: 'Secondary Fixed',\n      variable: '--mat-sys-secondary-fixed',\n      onVariable: '--mat-sys-on-secondary-fixed',\n      darkPalette: 'secondary-90',\n      lightPalette: 'secondary-90',\n      onDarkPalette: 'secondary-30',\n      onLightPalette: 'secondary-30',\n      category: 'fixed',\n    },\n    {\n      name: 'Secondary Fixed Dim',\n      variable: '--mat-sys-secondary-fixed-dim',\n      onVariable: '--mat-sys-on-secondary-fixed',\n      darkPalette: 'secondary-80',\n      lightPalette: 'secondary-80',\n      onDarkPalette: 'secondary-30',\n      onLightPalette: 'secondary-30',\n      category: 'fixed',\n    },\n\n    // System Colors\n    {\n      name: 'Scrim',\n      variable: '--mat-sys-scrim',\n      darkPalette: 'neutral-0',\n      lightPalette: 'neutral-0',\n      category: 'system',\n    },\n    {\n      name: 'Shadow',\n      variable: '--mat-sys-shadow',\n      darkPalette: 'neutral-0',\n      lightPalette: 'neutral-0',\n      category: 'system',\n    },\n  ];\n}\n"}

package/assets/json/panel.json

@@ -0,0 +1 @@
+{"demo-panel.component.html":"<onemrva-mat-panel [color]=\"color\">\n  <onemrva-mat-panel-title>\n    This is an ID panel with a title and an action\n    <onemrva-mat-panel-title-action>\n      <button mat-stroked-button color=\"primary\" class=\"small\">\n        <mat-icon>edit</mat-icon>Edit\n      </button>\n    </onemrva-mat-panel-title-action>\n  </onemrva-mat-panel-title>\n  <onemrva-mat-panel-content>\n    <p>\n      Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n      sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n      thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n      trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n      isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n      zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n      priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n      cal. Thistleborn gilad airen wookiee.\n    </p>\n  </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n","demo-panel.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-panel',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    OnemrvaMatPanelModule,\n    MatButtonModule,\n    MatIconModule,\n    OnemRvaColorDirective,\n  ],\n  templateUrl: 'demo-panel.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPanelComponent extends DemoComponentBase {\n  @Input()\n  color: OnemrvaMatColor = '';\n}\n"}

package/assets/json/phone-input.json

@@ -0,0 +1 @@
+{"demo-phone-input.component.html":"<onemrva-mat-input-phone\n  [phoneNumber]=\"phoneForm\"\n  label=\"{{ 'input.phone.label' | translate }}\"\n  noEntriesFoundLabel=\"{{ 'input.phone.not.found' | translate }}\"\n  placeholderLabel=\"{{ 'input.phone.search' | translate }}\"\n  searchAriaLabel=\"{{ 'input.phone.search' | translate }}\"\n  [defaultPrefix]=\"'+32'\"\n  hint=\" {{ 'input.phone.hint' | translate }}\"\n  (getCountry)=\"getCountry($event)\"\n></onemrva-mat-input-phone>\n","demo-phone-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 { OnemrvaMatInputPhoneComponent } from '@onemrvapublic/design-system/mat-input-phone';\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-phone-input',\n  templateUrl: './demo-phone-input.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    OnemrvaMatInputPhoneComponent,\n    FormsModule,\n    MatInputModule,\n    TranslateModule,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPhoneInputComponent extends DemoComponentBase {\n  phoneForm = new FormControl('', [Validators.required]);\n  getCountry($event: any) {\n    this.output.set($event);\n  }\n}\n"}

package/assets/json/pop-over.json

@@ -0,0 +1 @@
+{"demo-pop-over.component.html":"<div class=\"pop-over-container\">\n  <onemrva-mat-pop-over [position]=\"position\">\n    <onemrva-mat-pop-over-trigger>I am a trigger</onemrva-mat-pop-over-trigger>\n    <onemrva-mat-pop-over-content>I am a content</onemrva-mat-pop-over-content>\n  </onemrva-mat-pop-over>\n</div>\n","demo-pop-over.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OnemrvaMatPopOverModule } from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-pop-over',\n\n  standalone: true,\n  imports: [CommonModule, OnemrvaMatPopOverModule],\n  templateUrl: 'demo-pop-over.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPopOverComponent extends DemoComponentBase {\n  @Input() position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' =\n    'top-left';\n}\n"}

package/assets/json/progress-bar.json

@@ -0,0 +1 @@
+{"demo-progress-bar.component.html":"Default label$:\n<onemrva-mat-progress-bar [value$]=\"value$\"></onemrva-mat-progress-bar>\n\n<br />\n<br />\n\nExample of specific width:\n<onemrva-mat-progress-bar\n  [value$]=\"value$\"\n  [ngStyle]=\"{ width: '400px' }\"\n></onemrva-mat-progress-bar>\n\n<br />\n<br />\n\nCustom label$:\n<onemrva-mat-progress-bar\n  [label$]=\"label$\"\n  [value$]=\"value$\"\n></onemrva-mat-progress-bar>\n","demo-progress-bar.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { interval, map, startWith, Subject } from 'rxjs';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { OnemrvaMatProgressBarComponent } from '@onemrvapublic/design-system';\n\nimport { take } from 'rxjs/operators';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-progress-bar',\n  templateUrl: 'demo-progress-bar.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    OnemrvaMatProgressBarComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoProgressBarComponent extends DemoComponentBase {\n  value$: Subject<any> = new Subject<any>();\n\n  label$ = this.value$.pipe(\n    startWith(0),\n    map(v => (v < 0 ? '0 pct.' : v > 100 ? '100 pct.' : v + ' pct.')),\n  );\n\n  constructor() {\n    super();\n    const numbers = interval(500);\n\n    const takeFourNumbers = numbers.pipe(take(100));\n\n    takeFourNumbers.pipe().subscribe(x => {\n      this.value$.next(x);\n    });\n  }\n}\n"}

package/assets/json/radio.json

@@ -0,0 +1 @@
+{"demo-radio.component.html":"<mat-radio-group>\n  <mat-radio-button value=\"YES\">Yes</mat-radio-button>\n  <mat-radio-button value=\"NO\" [checked]=\"true\">No</mat-radio-button>\n</mat-radio-group>\n<mat-radio-group disabled>\n  <mat-radio-button value=\"YES\" [checked]=\"true\"\n    >Yes (checked & disabled)</mat-radio-button\n  >\n  <mat-radio-button value=\"NO\">No (disabled)</mat-radio-button>\n</mat-radio-group>\n","demo-radio.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-radio',\n  templateUrl: './demo-radio.component.html',\n  standalone: true,\n  imports: [CommonModule, MatRadioModule],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoRadioComponent extends DemoComponentBase {}\n"}

package/assets/json/rxjs-combine-operators.json

@@ -0,0 +1 @@
+{"demo-rxjs-combine-operators.component.html":"<div class=\"container\">\n  <button (click)=\"startProgress()\" [disabled]=\"loading\">Start</button>\n\n  @for (progress of progressStates; track progress) {\n    <div class=\"progress-container\">\n      <div class=\"progress-item\">\n        <mat-progress-bar\n          mode=\"determinate\"\n          [value]=\"progress\"\n        ></mat-progress-bar>\n        <span class=\"progress-number\"\n          >&nbsp;\n          @if (progress >= 100) {\n            <span>{{ actionStates[progress] }}</span>\n          }\n        </span>\n      </div>\n    </div>\n  }\n  <br />\n  <table style=\"width: 100%; table-layout: fixed\">\n    <thead>\n      <tr>\n        @for (entry of logs | keyvalue; track entry.key) {\n          <td style=\"font-weight: bold\">{{ entry.key }}</td>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        @for (entry of logs | keyvalue; track entry.key) {\n          <td style=\"vertical-align: top\">\n            @for (log of entry.value; track log) {\n              <span>{{ log }} <br /></span>\n            }\n          </td>\n        }\n      </tr>\n    </tbody>\n  </table>\n</div>\n","demo-rxjs-combine-operators.component.ts":"import { Component, OnDestroy, ViewEncapsulation } from '@angular/core';\nimport {\n  combineLatest,\n  concat,\n  forkJoin,\n  interval,\n  merge,\n  partition,\n  race,\n  Subject,\n  take,\n  zip,\n} from 'rxjs';\nimport { KeyValuePipe } from '@angular/common';\nimport { map, takeUntil } from 'rxjs/operators';\nimport { FormsModule } from '@angular/forms';\nimport { MatProgressBar } from '@angular/material/progress-bar';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './demo-rxjs-combine-operators.component.html',\n  standalone: true,\n  imports: [FormsModule, MatProgressBar, KeyValuePipe],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoRxjsCombineOperatorsComponent\n  extends DemoComponentBase\n  implements OnDestroy\n{\n  destroy$ = new Subject();\n\n  progressStates = [0, 0, 0];\n  actionStates = ['', '', ''];\n  loading = false;\n  subjects!: Subject<number>[];\n\n  logs!: Record<string, string[]>;\n\n  startProgress() {\n    if (this.loading) return;\n    this.loading = true;\n    this.subjects = [new Subject(), new Subject(), new Subject()];\n    this.logs = {\n      combineLatest: [],\n      concat: [],\n      merge: [],\n      forkJoin: [],\n      partition: [],\n      race: [],\n      zip: [],\n    };\n    this.progressStates = [0, 0, 0];\n    this.actionStates = ['', '', ''];\n\n    //  Emits an array of the latest values from all observables whenever any of them emit,\n    //  but only after all have emitted at least once.\n    combineLatest([this.subjects[0], this.subjects[1], this.subjects[2]])\n      .pipe(\n        takeUntil(this.destroy$),\n        map(values => `[ ${values.join(' , ')} ]`),\n      )\n      .subscribe(log => this.logs['combineLatest'].push(log));\n\n    //  Subscribes to all observables at once and emits values as soon as they arrive,\n    //  interleaving emissions from different sources.\n    merge(this.subjects[0], this.subjects[1], this.subjects[2])\n      .pipe(\n        takeUntil(this.destroy$),\n        map(value => `${value}`),\n      )\n      .subscribe(log => this.logs['merge'].push(log));\n\n    //  Runs observables sequentially, emitting all values from the first observable\n    //  before subscribing to the next one.\n    concat(this.subjects[0], this.subjects[1], this.subjects[2])\n      .pipe(\n        takeUntil(this.destroy$),\n        map(value => `${value}`),\n      )\n      .subscribe(log => this.logs['concat'].push(log));\n\n    // Waits for all observables to complete, then emits an array of their last emitted values\n    // (useful for parallel API calls).\n    forkJoin([this.subjects[0], this.subjects[1], this.subjects[2]])\n      .pipe(\n        takeUntil(this.destroy$),\n        map(values => `[ ${values.join(' , ')} ]`),\n      )\n      .subscribe(log => this.logs['forkJoin'].push(log));\n\n    // Splits an observable into two separate streams based on a predicate function,\n    // with one stream emitting values that pass the condition and the other emitting values that fail it\n    const [even$, odd$] = partition(\n      merge(this.subjects[0], this.subjects[1], this.subjects[2]),\n      value => value % 2 === 0, // Condition: even numbers go to even$, odd to odd$\n    );\n\n    even$\n      .pipe(\n        takeUntil(this.destroy$),\n        map(value => `Even: ${value}`),\n      )\n      .subscribe(log => this.logs['partition'].push(log));\n\n    odd$\n      .pipe(\n        takeUntil(this.destroy$),\n        map(value => `Odd: ${value}`),\n      )\n      .subscribe(log => this.logs['partition'].push(log));\n\n    // Subscribes to all observables, but only emits from the first one\n    // that produces a value and ignores the rest.\n    race(this.subjects[0], this.subjects[1], this.subjects[2])\n      .pipe(\n        takeUntil(this.destroy$),\n        map(value => `${value}`),\n      )\n      .subscribe(log => this.logs['race'].push(log));\n\n    // Waits for each observable to emit, then pairs the values together\n    // (like a zipper) into an array before emitting.\n    zip(this.subjects[0], this.subjects[1], this.subjects[2])\n      .pipe(\n        takeUntil(this.destroy$),\n        map(values => `[ ${values.join(' , ')} ]`),\n      )\n      .subscribe(log => this.logs['zip'].push(log));\n\n    // Runs each observable one by one, waiting for each to complete before moving to the next.\n    concat(\n      this.simulateLoading(0, 'Emitted 0'),\n      this.simulateLoading(1, 'Emitted 1'),\n      this.simulateLoading(2, 'Emitted 2'),\n      this.simulateLoading(3, 'Emitted 3'),\n      this.simulateLoading(4, 'Emitted 4'),\n      this.simulateLoading(5, 'Emitted 5'),\n      this.simulateLoading(6, 'Complete'),\n      this.simulateLoading(7, 'Complete'),\n      this.simulateLoading(8, 'Complete'),\n    ).subscribe({\n      complete: () => (this.loading = false),\n    });\n  }\n\n  simulateLoading(index: number, action: string) {\n    const idx = index % 3;\n    this.progressStates[idx] = 0;\n    return interval(10).pipe(\n      take(100),\n      map(value => {\n        this.progressStates[idx] = value + 1;\n        this.actionStates[idx] = action;\n        if (value === 99) {\n          if (action === 'Complete') {\n            this.complete(idx);\n          } else {\n            this.emit(index);\n          }\n        }\n      }),\n    );\n  }\n\n  private emit(index: number) {\n    const idx = index % 3;\n    this.subjects[idx].next(index);\n  }\n\n  complete(i: number) {\n    this.subjects[i].complete();\n    if (i == 2) {\n      this.destroy$.next('');\n    }\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next('');\n  }\n}\n"}

package/assets/json/rxjs-complex-case.json

@@ -0,0 +1 @@
+{"demo-rxjs-complex-case.component.html":"<div class=\"container\">\n  @if (logs.length === 0) {\n    <button (click)=\"startProcess()\">Start Process</button>\n  }\n  <h2>Logs</h2>\n  @for (log of logs; track log) {\n    <div>{{ log }}</div>\n  }\n</div>\n","demo-rxjs-complex-case.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport {\n  combineLatest,\n  concatMap,\n  debounceTime,\n  delay,\n  filter,\n  forkJoin,\n  interval,\n  of,\n  Subject,\n  switchMap,\n  take,\n} from 'rxjs';\nimport { map } from 'rxjs/operators';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './demo-rxjs-complex-case.component.html',\n  standalone: true,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoRxjsComplexCaseComponent extends DemoComponentBase {\n  private userAction$ = new Subject<string>();\n  private api1$ = (id: number) =>\n    of(`Data from API 1: ${id}`).pipe(delay(1000));\n  private api2$ = (data: string) =>\n    of(`Processed API 2: ${data}`).pipe(delay(1500));\n  private stream1$ = interval(500).pipe(\n    take(5),\n    map(i => `Stream1-${i}`),\n  );\n  private stream2$ = interval(700).pipe(\n    take(5),\n    map(i => `Stream2-${i}`),\n  );\n\n  logs: string[] = [];\n\n  constructor() {\n    super();\n    // Simulating a complex pipeline of events\n    this.userAction$\n      .pipe(\n        takeUntilDestroyed(),\n        debounceTime(300), // Wait for user input stabilization\n        filter(action => action.length > 2), // Only process if input length > 2\n        map(action => action.toUpperCase()), // Transform input\n        switchMap(action => this.api1$(action.length)), // Call API 1 based on input length\n        concatMap(api1Result => this.api2$(String(api1Result))),\n      )\n      .subscribe(result => this.logs.push(`Final Result: ${result}`));\n\n    // Combining multiple streams\n    combineLatest([this.stream1$, this.stream2$])\n      .pipe(\n        takeUntilDestroyed(),\n        map(([val1, val2]) => `Combined Streams: ${val1} & ${val2}`),\n      )\n      .subscribe(log => this.logs.push(log));\n\n    // Joining API calls\n    forkJoin([this.api1$(5), this.api2$('ForkJoin Example')])\n      .pipe(\n        takeUntilDestroyed(),\n        map(([res1, res2]) => `ForkJoin Result: ${res1} | ${res2}`),\n      )\n      .subscribe(log => this.logs.push(log));\n  }\n\n  startProcess() {\n    this.userAction$.next('test input'); // Simulating user input\n  }\n}\n"}

package/assets/json/rxjs-flattening-operators.json

@@ -0,0 +1 @@
+{"demo-rxjs-flattening-operators.component.html":"<div class=\"container\">\n  <button (click)=\"startProgress()\" [disabled]=\"loading\">Start</button>\n\n  <div class=\"progress-container\">\n    <div class=\"progress-item\">\n      <mat-progress-bar\n        mode=\"determinate\"\n        [value]=\"progress\"\n      ></mat-progress-bar>\n      <span class=\"progress-number\"\n        >&nbsp;\n        @if (progress >= 100) {\n          <span>{{ action }}</span>\n        }\n      </span>\n    </div>\n  </div>\n  <br />\n  <table>\n    <thead>\n      <tr>\n        @for (entry of logs | keyvalue; track entry.key) {\n          <td>{{ entry.key }}</td>\n        }\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        @for (entry of logs | keyvalue; track entry.key) {\n          <td>\n            @for (log of entry.value; track log) {\n              <span>{{ log }} <br /></span>\n            }\n          </td>\n        }\n      </tr>\n    </tbody>\n  </table>\n</div>\n","demo-rxjs-flattening-operators.component.ts":"import { Component, OnDestroy, ViewEncapsulation } from '@angular/core';\nimport {\n  combineLatestAll,\n  concat,\n  interval,\n  mergeAll,\n  Observable,\n  of,\n  Subject,\n  switchAll,\n  take,\n} from 'rxjs';\nimport { KeyValuePipe } from '@angular/common';\nimport { map } from 'rxjs/operators';\nimport { FormsModule } from '@angular/forms';\nimport { MatProgressBar } from '@angular/material/progress-bar';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './demo-rxjs-flattening-operators.component.html',\n  standalone: true,\n  imports: [FormsModule, MatProgressBar, KeyValuePipe],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoRxjsFlatteningOperatorsComponent\n  extends DemoComponentBase\n  implements OnDestroy\n{\n  destroy$ = new Subject();\n\n  progress!: number;\n  action!: string;\n  loading = false;\n\n  subject!: Subject<Observable<number>>;\n\n  logs!: Record<string, string[]>;\n\n  startProgress() {\n    if (this.loading) return;\n\n    this.subject = new Subject<Observable<number>>();\n\n    this.logs = {\n      combineLatestAll: [],\n      mergeAll: [],\n      switchAll: [],\n    };\n    this.loading = true;\n    this.progress = 0;\n    this.action = '';\n\n    //  Flattens a higher-order observable by subscribing to all inner observables\n    //  and emitting an array of their latest values whenever any inner observable emits.\n    this.subject\n      .pipe(\n        combineLatestAll(),\n        map(values => `${values.join(', ')}`),\n      ) // Flattens multiple active observables\n      .subscribe(log => {\n        this.logs['combineLatestAll'].push(log);\n      });\n\n    //  Flattens a higher-order observable (an observable that emits other observables) by subscribing\n    //  to all inner observables concurrently and emitting their values as they arrive, interleaving emissions.\n    this.subject\n      .pipe(\n        mergeAll(2),\n        map(value => `${value}`), // Flattens multiple active observables\n      )\n      .subscribe(log => {\n        this.logs['mergeAll'].push(log);\n      });\n\n    //  Flattens a higher-order observable (an observable that emits other observables) by subscribing\n    //  to all inner observables concurrently and emitting their values as they arrive, interleaving emissions.\n    this.subject\n      .pipe(\n        switchAll(),\n        map(value => `${value}`), // Flattens multiple active observables\n      )\n      .subscribe(log => {\n        this.logs['switchAll'].push(log);\n      });\n\n    // Runs each observable one by one, waiting for each to complete before moving to the next.\n    concat(\n      this.simulateLoading(0, 'Emitted 0'),\n      this.simulateLoading(1, 'Emitted 1'),\n      this.simulateLoading(2, 'Emitted 2'),\n      this.simulateLoading(3, 'Emitted 3'),\n      this.simulateLoading(4, 'Complete'),\n    ).subscribe({\n      complete: () => (this.loading = false),\n    });\n  }\n\n  simulateLoading(index: number, action: string) {\n    this.progress = 0;\n    return interval(10).pipe(\n      take(100),\n      map(value => {\n        this.progress = value + 1;\n        this.action = action;\n        if (value === 99) {\n          if (action === 'Complete') {\n            this.complete();\n          } else {\n            this.emit(index);\n          }\n        }\n      }),\n    );\n  }\n\n  private emit(index: number) {\n    this.subject.next(of(index));\n  }\n\n  complete() {\n    this.subject.complete();\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next('');\n  }\n}\n"}

package/assets/json/rxjs-observable.json

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

package/assets/json/rxjs-subject.json

@@ -0,0 +1 @@
+{"demo-rxjs-subject.component.html":"<div class=\"container\">\n  <div class=\"subject-container\">\n    <h2>Subject</h2>\n    <ul>\n      <li>\n        A standard subject that acts as both an Observable and an Observer.\n      </li>\n      <li>\n        Subscribers only receive values emitted after they have subscribed.\n      </li>\n      <li>Does not store past values.</li>\n    </ul>\n    <p>\n      <button (click)=\"emitSubject()\">Emit {{ randomValue }}</button\n      >&nbsp;Received: {{ subject$ | async }}\n    </p>\n  </div>\n\n  <div class=\"subject-container\">\n    <h2>BehaviorSubject</h2>\n    <ul>\n      <li>Requires an initial value when created.</li>\n      <li>Always emits the last emitted value to new subscribers.</li>\n    </ul>\n    <p>\n      <button (click)=\"emitBehaviorSubject()\">Emit {{ randomValue }}</button\n      >&nbsp;Received: {{ behaviorSubject$ | async }}\n    </p>\n  </div>\n\n  <div class=\"subject-container\">\n    <h2>ReplaySubject</h2>\n    <ul>\n      <li>Stores a specified buffer size of past values.</li>\n      <li>When a new subscriber joins, it replays those stored values.</li>\n    </ul>\n    <p>\n      <button (click)=\"emitReplaySubject()\">Emit {{ randomValue }}</button\n      >&nbsp;\n      <button (click)=\"newReplaySubject()\" [disabled]=\"!hasReplayEmitted\">\n        Subscribe</button\n      >&nbsp; Received: {{ replaySubject$ | async }}\n      @for (v of replayValues; track v) {\n        <br />\n        &bull; {{ v }}\n      }\n    </p>\n  </div>\n\n  <div class=\"subject-container\">\n    <h2>AsyncSubject</h2>\n    <ul>\n      <li>\n        Only emits the last value when the subject.complete() method is called.\n      </li>\n      <li>Does not emit any values before completion.</li>\n    </ul>\n\n    <p>\n      <button [disabled]=\"hasAsyncEmitted\" (click)=\"emitAsyncSubject()\">\n        Emit {{ randomValue }}</button\n      >&nbsp;\n      <button [disabled]=\"!hasAsyncEmitted\" (click)=\"completeAsyncSubject()\">\n        Complete</button\n      >&nbsp; Received: {{ asyncSubject$ | async }}\n    </p>\n  </div>\n</div>\n","demo-rxjs-subject.component.ts":"import { Component, OnDestroy, ViewEncapsulation } from '@angular/core';\nimport { Subject, BehaviorSubject, ReplaySubject, AsyncSubject } from 'rxjs';\nimport { AsyncPipe } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './demo-rxjs-subject.component.html',\n  standalone: true,\n  imports: [AsyncPipe],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoRxjsSubjectComponent\n  extends DemoComponentBase\n  implements OnDestroy\n{\n  randomValue = Math.floor(Math.random() * 100);\n  hasAsyncEmitted = false;\n  hasReplayEmitted = false;\n  replayValues: number[] = [];\n\n  subject$ = new Subject<number>();\n  behaviorSubject$ = new BehaviorSubject<number>(0); // initial value as argument\n  replaySubject$ = new ReplaySubject<number>(5); // size of the buffer as argument\n\n  asyncSubject$ = new AsyncSubject<number>();\n\n  random() {\n    this.randomValue = Math.floor(Math.random() * 100);\n  }\n\n  emitSubject() {\n    this.subject$.next(this.randomValue);\n    this.random();\n  }\n\n  emitBehaviorSubject() {\n    this.behaviorSubject$.next(this.randomValue);\n    this.random();\n  }\n\n  emitReplaySubject() {\n    this.hasReplayEmitted = true;\n    this.replaySubject$.next(this.randomValue);\n    this.random();\n  }\n\n  emitAsyncSubject() {\n    this.hasAsyncEmitted = true;\n    this.asyncSubject$.next(this.randomValue);\n    this.random();\n  }\n\n  newReplaySubject() {\n    this.replaySubject$.subscribe(value => {\n      this.replayValues.push(value);\n    });\n  }\n\n  completeAsyncSubject() {\n    this.asyncSubject$.complete();\n  }\n\n  ngOnDestroy() {\n    // we close all the subscriptions\n    this.subject$.complete();\n    this.behaviorSubject$.complete();\n    this.replaySubject$.complete();\n    this.asyncSubject$.complete();\n  }\n}\n"}

package/assets/json/selectable-box.json

@@ -0,0 +1 @@
+{"demo-selectable-box.component.html":"<h1>Basic</h1>\n<mat-radio-group\n  name=\"unemploymentType\"\n  required\n  (change)=\"onChangeType($event)\"\n  [formControl]=\"formControl\"\n  style=\"display: flex; width: 800px\"\n>\n  <onemrva-mat-selectable-box value=\"Raisons économiques\">\n    <ng-container title>Raisons économiques</ng-container>\n    <ng-container icon>ac_unit</ng-container>\n  </onemrva-mat-selectable-box>\n  <onemrva-mat-selectable-box value=\"badweather\">\n    <ng-container title>Bad Weather</ng-container>\n    <ng-container icon>thunderstorm</ng-container>\n  </onemrva-mat-selectable-box>\n  <onemrva-mat-selectable-box value=\"other\">\n    <ng-container title>Other option #1</ng-container>\n    <ng-container icon>rainy</ng-container>\n  </onemrva-mat-selectable-box>\n  <onemrva-mat-selectable-box [disabled]=\"true\" value=\"notavailable\">\n    <ng-container title>Disabled option</ng-container>\n    <ng-container icon>ac_unit</ng-container>\n  </onemrva-mat-selectable-box>\n</mat-radio-group>\n<blockquote>\n  Selected value (event): {{ value }}<br />\n  Raw value (formcontrol): {{ formControl.getRawValue() }}<br />\n</blockquote>\n\n<h1>Basic - Default option checked</h1>\n<mat-radio-group style=\"display: flex; width: 800px\">\n  <onemrva-mat-selectable-box value=\"Raisons économiques\">\n    <ng-container title>Raisons économiques</ng-container>\n    <ng-container icon>ac_unit</ng-container>\n  </onemrva-mat-selectable-box>\n  <onemrva-mat-selectable-box [checked]=\"true\" value=\"badweather\">\n    <ng-container title>Bad Weather</ng-container>\n    <ng-container icon>ac_unit</ng-container>\n  </onemrva-mat-selectable-box>\n  <onemrva-mat-selectable-box value=\"other\">\n    <ng-container title>Other option #1</ng-container>\n    <ng-container icon>ac_unit</ng-container>\n  </onemrva-mat-selectable-box>\n  <onemrva-mat-selectable-box [disabled]=\"true\" value=\"notavailable\">\n    <ng-container title>Disabled option</ng-container>\n    <ng-container icon>ac_unit</ng-container>\n  </onemrva-mat-selectable-box>\n</mat-radio-group>\n\n<h1>Basic - No icon</h1>\n<mat-radio-group style=\"display: flex\">\n  <onemrva-mat-selectable-box>\n    <ng-container title>Raisons économiques</ng-container>\n  </onemrva-mat-selectable-box>\n</mat-radio-group>\n\n<h1>With short content - large icons</h1>\n<mat-radio-group style=\"display: flex\">\n  <onemrva-mat-selectable-box>\n    <ng-container title>\n      <mat-icon class=\"large\" color=\"primary\">ac_unit</mat-icon>\n      <mat-icon class=\"large\" color=\"primary\">rainy</mat-icon>\n    </ng-container>\n    <ng-container>Gel<br />Verglas<br />Neige<br />Grêle</ng-container>\n  </onemrva-mat-selectable-box>\n  <onemrva-mat-selectable-box>\n    <ng-container title>\n      <mat-icon class=\"large\" color=\"primary\">thunderstorm</mat-icon>\n      <mat-icon class=\"large\" color=\"primary\">rainy</mat-icon>\n    </ng-container>\n    <ng-container>Gel<br />Verglas<br />Neige<br />Grêle</ng-container>\n  </onemrva-mat-selectable-box>\n  <onemrva-mat-selectable-box [disabled]=\"true\">\n    <ng-container title>\n      <mat-icon class=\"large\" color=\"primary\">ac_unit</mat-icon>\n      <mat-icon class=\"large\" color=\"primary\">rainy</mat-icon>\n    </ng-container>\n    <ng-container>Gel<br />Verglas<br />Neige<br />Grêle</ng-container>\n  </onemrva-mat-selectable-box>\n</mat-radio-group>\n\n<h1>With short content - xlarge icons</h1>\n<mat-radio-group style=\"display: flex\">\n  <onemrva-mat-selectable-box>\n    <ng-container title>\n      <mat-icon class=\"xlarge\" color=\"primary\">ac_unit</mat-icon>\n      <mat-icon class=\"xlarge\" color=\"primary\">rainy</mat-icon>\n    </ng-container>\n    <ng-container>Gel<br />Verglas<br />Neige<br />Grêle</ng-container>\n  </onemrva-mat-selectable-box>\n  <onemrva-mat-selectable-box>\n    <ng-container title>\n      <mat-icon class=\"xlarge\" color=\"primary\">thunderstorm</mat-icon>\n      <mat-icon class=\"xlarge\" color=\"primary\">rainy</mat-icon>\n    </ng-container>\n    <ng-container>Gel<br />Verglas<br />Neige<br />Grêle</ng-container>\n  </onemrva-mat-selectable-box>\n  <onemrva-mat-selectable-box [disabled]=\"true\">\n    <ng-container title>\n      <mat-icon class=\"xlarge\" color=\"primary\">ac_unit</mat-icon>\n      <mat-icon class=\"xlarge\" color=\"primary\">rainy</mat-icon>\n    </ng-container>\n    <ng-container>Gel<br />Verglas<br />Neige<br />Grêle</ng-container>\n  </onemrva-mat-selectable-box>\n</mat-radio-group>\n\n<h1>With label and data</h1>\n<mat-radio-group style=\"display: flex; width: 600px\">\n  <onemrva-mat-selectable-box>\n    <span title>36 - 49 ans</span>\n    <onemrva-mat-sticker type=\"info\" sticker>\n      468 jours à prester au CPAS\n    </onemrva-mat-sticker>\n    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab aliquid autem\n    consectetur earum est explicabo facilis fugiat, inventore molestias nostrum\n    nulla pariatur quis quod tempore voluptatem. Blanditiis iste labore natus,\n    non quasi quis veniam. Adipisci amet autem, deleniti iste libero pariatur\n    possimus quidem reprehenderit sint voluptatem! Eveniet harum, rem! Animi aut\n    beatae consectetur dicta dignissimos, doloremque dolorum fugit illum in\n    ipsam, maiores maxime molestiae vel! Culpa expedita placeat possimus! Autem\n    dicta dolores iure laudantium numquam placeat, quisquam quos! A aliquid cum\n    dolores ducimus, eos eum, eveniet exercitationem expedita fuga hic labore,\n    officia possimus quaerat quis quisquam saepe tempore ut velit.\n  </onemrva-mat-selectable-box>\n</mat-radio-group>\n","demo-selectable-box.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { MatRadioChange, MatRadioModule } from '@angular/material/radio';\nimport { MatInputModule } from '@angular/material/input';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatSelectableBoxModule } from '@onemrvapublic/design-system/mat-selectable-box';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-selectable-box',\n  templateUrl: './demo-selectable-box.component.html',\n\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatInputModule,\n    MatSelectModule,\n    MatFormFieldModule,\n    MatSelectSearchModule,\n    MatIconModule,\n    MatRadioModule,\n    OnemrvaMatSelectableBoxModule,\n    OnemrvaMatStickerModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxComponent extends DemoComponentBase {\n  value = '';\n  formControl = new FormControl<string>('');\n\n  onChangeType(change: MatRadioChange) {\n    this.value = change.value;\n  }\n  constructor() {\n    super();\n    //setting default via forms\n    this.formControl.setValue('badweather');\n  }\n}\n"}

package/assets/json/side-menu.json

@@ -0,0 +1 @@
+{"demo-side-menu.component.html":"<onemrva-mat-side-menu\n  [menuHeaderKey]=\"menuHeaderKey\"\n  [menus]=\"menus\"\n  [currentMenu]=\"router.url\"\n  (onSelectOption)=\"selectOption($event)\"\n>\n</onemrva-mat-side-menu>\n","demo-side-menu.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { Router } from '@angular/router';\nimport {\n  OnemrvaMatSideMenuModule,\n  OnemrvaMenu,\n} from '@onemrvapublic/design-system';\nimport { CommonModule } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-side-menu',\n  templateUrl: './demo-side-menu.component.html',\n\n  standalone: true,\n  imports: [CommonModule, OnemrvaMatSideMenuModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSideMenuComponent extends DemoComponentBase {\n  menuHeaderKey = 'Side Menu';\n  menus: OnemrvaMenu[] = [\n    {\n      wordingKey: 'demoSideMenu.key1',\n      path: '/north',\n    },\n    {\n      wordingKey: 'demoSideMenu.key2',\n      path: '/south',\n    },\n  ];\n  currentMenu?: string;\n\n  router = inject(Router);\n\n  selectOption(menu: OnemrvaMenu) {\n    alert(menu.path);\n    //this.router.navigate([menu.path]);\n  }\n}\n"}

package/assets/json/skeleton.json

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

package/assets/json/slide-toggle.json

@@ -0,0 +1 @@
+{"demo-slide-toggle.component.html":"<mat-slide-toggle color=\"accent\" #toggle>{{\n  toggle.checked ? 'On' : 'Off'\n}}</mat-slide-toggle>\n","demo-slide-toggle.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatSlideToggleModule } from '@angular/material/slide-toggle';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-slide-toggle',\n  templateUrl: 'demo-slide-toggle.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatSlideToggleModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSlideToggleComponent extends DemoComponentBase {}\n"}

package/assets/json/spacing.json

@@ -0,0 +1 @@
+{"demo-spacing.component.html":"<mat-toolbar>\n  <button\n    mat-icon-button\n    (click)=\"align('text-left')\"\n    matTooltip=\"text-left\"\n    aria-label=\"text-left\"\n  >\n    <mat-icon>format_align_left</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    (click)=\"align('text-center')\"\n    matTooltip=\"text-center\"\n    aria-label=\"text-center\"\n  >\n    <mat-icon>format_align_center</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    (click)=\"align('text-right')\"\n    matTooltip=\"text-right\"\n    aria-label=\"text-right\"\n  >\n    <mat-icon>format_align_right</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    (click)=\"align('')\"\n    matTooltip=\"not align\"\n    aria-label=\"not align\"\n  >\n    <mat-icon>disabled_by_default</mat-icon>\n  </button>\n  |\n  <button\n    mat-icon-button\n    (click)=\"valign('align-top')\"\n    matTooltip=\"align-top\"\n    aria-label=\"align-top\"\n  >\n    <mat-icon>vertical_align_top</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    (click)=\"valign('align-bottom')\"\n    matTooltip=\"align-bottom\"\n    aria-label=\"align-bottom\"\n  >\n    <mat-icon>vertical_align_bottom</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    (click)=\"valign('align-middle')\"\n    matTooltip=\"align-middle\"\n    aria-label=\"align-middle\"\n  >\n    <mat-icon>vertical_align_center</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    (click)=\"valign('')\"\n    matTooltip=\"not valign\"\n    aria-label=\"not valign\"\n  >\n    <mat-icon>disabled_by_default</mat-icon>\n  </button>\n  |²\n  <button\n    mat-icon-button\n    (click)=\"float('float-left')\"\n    matTooltip=\"float-left\"\n    aria-label=\"float-left\"\n  >\n    <mat-icon>first_page</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    (click)=\"float('float-right')\"\n    matTooltip=\"float-right\"\n    aria-label=\"float-right\"\n  >\n    <mat-icon>last_page</mat-icon>\n  </button>\n  <button\n    mat-icon-button\n    (click)=\"float('')\"\n    matTooltip=\"not floating\"\n    aria-label=\"not floating\"\n  >\n    <mat-icon>disabled_by_default</mat-icon>\n  </button>\n</mat-toolbar>\n<br />\n<mat-form-field>\n  <mat-label>P:</mat-label>\n  <mat-select [(ngModel)]=\"padPositionclass\" placeholder=\"Padding\">\n    @for (pos of positions; track pos) {\n      <mat-option [value]=\"pos\">p{{ pos }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n<mat-form-field>\n  <mat-label>P size:</mat-label>\n  <mat-select [(ngModel)]=\"padclass\" placeholder=\"Padding\">\n    @for (demo of demos; track demo) {\n      <mat-option [value]=\"demo\">{{ demo }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n<mat-form-field>\n  <mat-label>P Screen:</mat-label>\n  <mat-select [(ngModel)]=\"padscreenclass\" placeholder=\"Screen\">\n    @for (screen of screens; track screen) {\n      <mat-option [value]=\"screen\">{{ screen }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n<br />\n<mat-form-field>\n  <mat-label>M:</mat-label>\n  <mat-select [(ngModel)]=\"marPositionclass\" placeholder=\"Padding\">\n    @for (pos of positions; track pos) {\n      <mat-option [value]=\"pos\">m{{ pos }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n<mat-form-field>\n  <mat-label>M Size:</mat-label>\n  <mat-select [(ngModel)]=\"marclass\" placeholder=\"Margin\">\n    @for (demo of demos; track demo) {\n      <mat-option [value]=\"demo\">{{ demo }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n<mat-form-field>\n  <mat-label>M Screen:</mat-label>\n  <mat-select [(ngModel)]=\"marscreenclass\" placeholder=\"Screen\">\n    @for (screen of screens; track screen) {\n      <mat-option [value]=\"screen\">{{ screen }}</mat-option>\n    }\n  </mat-select>\n</mat-form-field>\n<br />\n<br />\n<div id=\"margindiv\">\n  <div\n    id=\"paddingdiv\"\n    class=\"p{{ padPositionclass }}{{ padclass }}{{ padscreenclass }} m{{\n      marPositionclass\n    }}{{ marclass }}{{ marscreenclass }}\"\n  >\n    <p id=\"contentdiv\" [class]=\"contentclass\">\n      <mat-icon class=\"xlarge\" [class]=\"iconclass\">home</mat-icon>\n      hello\n    </p>\n  </div>\n</div>\n<br />\n<p>\n  div > p{{ padPositionclass }}{{ padclass }}{{ padscreenclass }} m{{\n    marPositionclass\n  }}{{ marclass }}{{ marscreenclass }} <br />\n  &nbsp;&nbsp; p > {{ contentclass }} <br />\n  &nbsp;&nbsp; &nbsp;&nbsp; mat-icon > {{ iconclass }}\n</p>\n","demo-spacing.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatSelectModule } from '@angular/material/select';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { MatIconModule } from '@angular/material/icon';\nimport { FormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-spacing',\n\n  templateUrl: 'demo-spacing.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    MatSelectModule,\n    MatButtonModule,\n    MatTooltipModule,\n    MatToolbarModule,\n    MatIconModule,\n    FormsModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSpacingComponent extends DemoComponentBase {\n  public demos = [\n    '-0',\n    '-2xs',\n    '-xs',\n    '-s',\n    '',\n    '-m',\n    '-l',\n    '-xl',\n    '-2xl',\n    '-3xl',\n    '-auto',\n  ];\n  public screens = ['', '-xsmall', '-small', '-medium', '-large', '-xlarge'];\n  public positions = ['', 't', 'r', 'b', 'l', 'x', 'y'];\n\n  public contentclass = '';\n  public iconclass = '';\n  public divclass = '';\n  public padclass = '';\n  public padPositionclass = '';\n  public marPositionclass = '';\n  public marclass = '';\n  public padscreenclass = '';\n  public marscreenclass = '';\n\n  private alignclass = '';\n  private valignclass = '';\n  private floatclass = '';\n\n  align(alg: 'text-left' | 'text-right' | 'text-center' | '') {\n    this.alignclass = alg;\n    this.sumup();\n  }\n  valign(alg: 'align-bottom' | 'align-top' | 'align-middle' | '') {\n    this.valignclass = alg;\n    this.sumup();\n  }\n  float(alg: 'float-right' | 'float-left' | '') {\n    this.floatclass = `${alg}`;\n    this.sumup();\n  }\n\n  sumup() {\n    this.contentclass = `${this.alignclass}  `;\n    this.iconclass = `${this.valignclass} ${this.floatclass} `;\n  }\n}\n"}

package/assets/json/spinner.json

@@ -0,0 +1 @@
+{"demo-spinner.component.html":"<onemrva-mat-spinner></onemrva-mat-spinner>\n","demo-spinner.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { OnemrvaMatSpinnerModule } from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-spinner',\n  templateUrl: 'demo-spinner.component.html',\n\n  standalone: true,\n  imports: [OnemrvaMatSpinnerModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSpinnerComponent extends DemoComponentBase {}\n"}

package/assets/json/sticker.json

@@ -0,0 +1 @@
+{"demo-sticker.component.html":"<onemrva-mat-sticker [color]=\"color\"> Default </onemrva-mat-sticker>\n","demo-sticker.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system';\nimport { FormsModule } from '@angular/forms';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-sticker',\n  templateUrl: './demo-sticker.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    OnemrvaMatStickerModule,\n    FormsModule,\n    OnemRvaColorDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoStickerComponent extends DemoComponentBase {\n  @Input()\n  color: OnemrvaMatColor = '';\n}\n"}

package/assets/json/summary-stepper.json

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

package/assets/json/tab.json

@@ -0,0 +1 @@
+{"demo-tab.component.html":"<mat-tab-group>\n  <mat-tab label=\"First\">\n    Content 1\n    <p style=\"height: 1px\" tabindex=\"0\"></p\n  ></mat-tab>\n  <mat-tab label=\"Second\"> Content 2 </mat-tab>\n  <mat-tab label=\"Third\"> Content 3 </mat-tab>\n</mat-tab-group>\n","demo-tab.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatTabsModule } from '@angular/material/tabs';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-tab',\n  templateUrl: 'demo-tab.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatTabsModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTabComponent extends DemoComponentBase {\n  links: string[] = ['link1', 'link2', 'link3'];\n  protected readonly Object = Object;\n}\n"}

package/assets/json/table-dialog-content.json

@@ -0,0 +1 @@
+{"demo-table-dialog-content.component.html":"<h2 mat-dialog-title>Choose columns</h2>\n<mat-dialog-content>\n  @for (col of data.columns; track col; let colidx = $index) {\n    <onemrva-mat-choice-chip\n      class=\"mr\"\n      color=\"primary\"\n      [formControl]=\"formGet(colidx)\"\n    >\n      {{ col }}\n    </onemrva-mat-choice-chip>\n  }\n</mat-dialog-content>\n<mat-dialog-actions>\n  <button mat-stroked-button (click)=\"onNoClick()\">Cancel</button>\n  <button\n    mat-flat-button\n    color=\"accent\"\n    [mat-dialog-close]=\"savedValues()\"\n    cdkFocusInitial\n  >\n    Save\n  </button>\n</mat-dialog-actions>\n","demo-table-dialog-content.component.ts":"import { Component, inject, signal, ViewEncapsulation } from '@angular/core';\nimport {\n  MAT_DIALOG_DATA,\n  MatDialogActions,\n  MatDialogClose,\n  MatDialogContent,\n  MatDialogModule,\n  MatDialogRef,\n  MatDialogTitle,\n} from '@angular/material/dialog';\nimport { MatButton } from '@angular/material/button';\nimport {\n  FormArray,\n  FormBuilder,\n  FormControl,\n  ReactiveFormsModule,\n} from '@angular/forms';\nimport { OnemrvaMatChoiceChipComponent } from '@onemrvapublic/design-system';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\nexport interface DialogData {\n  columns: string[];\n  allColumns: string[];\n  allSubColumns: string[];\n}\n\n@Component({\n  selector: 'app-demo-content-dialog',\n  templateUrl: 'demo-table-dialog-content.component.html',\n  standalone: true,\n  imports: [\n    MatDialogModule,\n    MatDialogContent,\n    MatDialogActions,\n    MatDialogTitle,\n    MatDialogClose,\n    MatButton,\n    ReactiveFormsModule,\n    OnemRvaColorDirective,\n    OnemrvaMatChoiceChipComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n  providers: [\n    {\n      provide: MAT_DIALOG_DATA,\n      useValue: { columns: [], allColumns: [], allSubColumns: [] },\n    },\n  ],\n})\nexport class DemoTableDialogContentComponent extends DemoComponentBase {\n  readonly dialogRef = inject(MatDialogRef<DemoTableDialogContentComponent>);\n  readonly data = inject<DialogData>(MAT_DIALOG_DATA);\n  readonly allColumns = this.data.allColumns;\n  readonly savedValues = signal(this.data.columns);\n\n  formArray: FormArray<any>;\n\n  fb = inject(FormBuilder);\n\n  constructor() {\n    super();\n    this.formArray = new FormArray(\n      this.data.columns.map(col => {\n        const isChecked = this.allColumns.includes(col);\n        return new FormControl(isChecked);\n      }), // or false depending on selection\n    );\n\n    this.formArray.valueChanges.subscribe(value => {\n      this.savedValues.set(value);\n    });\n  }\n\n  // get selectedColumns(): string[] {\n  //     return this.data.allColumns.filter((_, i) => this.formArray.value[i]);\n  // }\n\n  formGet(i: number) {\n    return this.formArray.at(i) as FormControl;\n  }\n\n  onNoClick(): void {\n    this.dialogRef.close();\n  }\n}\n"}

package/assets/json/table.json

@@ -0,0 +1 @@
+{"demo-table-datasource.ts":"import { DataSource } from '@angular/cdk/collections';\nimport { MatSort } from '@angular/material/sort';\nimport { map, tap } from 'rxjs/operators';\nimport {\n  BehaviorSubject,\n  merge,\n  Observable,\n  startWith,\n  Subject,\n  switchMap,\n} from 'rxjs';\nimport { OnemrvaMatPaginatorComponent } from '@onemrvapublic/design-system';\nimport { FormControl } from '@angular/forms';\nimport { ElementsService, ListItem } from '../../_services/elements.service';\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  paginator!: OnemrvaMatPaginatorComponent;\n  search!: FormControl;\n  sort: MatSort | undefined;\n  data$: BehaviorSubject<ListItem[]> = new BehaviorSubject<ListItem[]>([]);\n  prevSearch = '';\n  refresh$ = new Subject();\n\n  constructor(private elementsService: ElementsService) {\n    super();\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(\n        this.sort.sortChange, // we listen to sort change\n        this.search.valueChanges, // we listen to filter change\n        this.paginator.pageSize$, // we listen to page size change\n        this.paginator.pageIndex$, // we listen to page index change\n        this.refresh$, // used to force a refresh\n      ).pipe(\n        startWith({}),\n        tap(() => {\n          // if search changed, we reset the pageIndex\n          if (\n            this.search.getRawValue().trim() !== '' &&\n            this.search.getRawValue() !== this.prevSearch\n          ) {\n            this.paginator.resetPageIndex();\n            this.prevSearch = this.search.getRawValue();\n          }\n        }),\n        switchMap(() => {\n          const active: keyof ListItem =\n            (this.sort?.active as keyof ListItem) || 'id';\n          const direction = this.sort?.direction || 'asc';\n          // We return the api call observable called with the correct parameters\n          return this.elementsService\n            .getElementsList(\n              active,\n              direction,\n              this.paginator.pageIndex,\n              this.paginator.pageSize,\n              this.search.getRawValue(),\n            )\n            .pipe(\n              // We map the response to the Interface we need/want\n              map(response => {\n                this.paginator.length = response.length;\n                this.paginator.pageIndex = response.page;\n                this.paginator.pageSize = response.pageSize;\n                return response.list;\n              }),\n            );\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   * If user click on select all items (outside current page),\n   * this service functions returns the IDs of all items in datasource\n   */\n  all() {\n    return this.elementsService.getAllElementsIds(this.search.getRawValue());\n  }\n\n  /**\n   * If user click to delete an item, we tell the api and then refresh the list.\n   * @param id\n   */\n  delete(id: number) {\n    this.elementsService.deleteElement(id);\n    this.refresh$.next('');\n  }\n}\n","demo-table.component.html":"<h1>Table</h1>\n<mat-form-field class=\"search\">\n  <mat-label>Search</mat-label>\n  <input matInput [formControl]=\"search\" />\n  @if (search.getRawValue()) {\n    <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clear()\">\n      <mat-icon>close</mat-icon>\n    </button>\n  }\n</mat-form-field>\n<p><a tabindex=\"0\" (click)=\"showHideColumns()\">Hide/Show column</a></p>\n<table mat-table class=\"full-width-table\" matSort aria-label=\"Elements\">\n  <tr mat-header-row *matHeaderRowDef=\"allColumns\"></tr>\n  <tr mat-header-row class=\"compact\" *matHeaderRowDef=\"['delay', 'days']\"></tr>\n\n  <!-- Notice Row -->\n  <tr\n    mat-header-row\n    class=\"onemrva-notice-row\"\n    [class]=\"showNotice() ? '' : 'hidden'\"\n    *matHeaderRowDef=\"showNotice() ? ['notice'] : []\"\n  ></tr>\n  @if (showNotice()) {\n    <ng-container matColumnDef=\"notice\">\n      <th *matHeaderCellDef colspan=\"7\">\n        You have selected {{ checkboxes.length }} items.&nbsp;\n        @if (checkboxes.length < paginator.length) {\n          <a tabindex=\"0\" (click)=\"selectAll()\"\n            >Select {{ paginator.length }} items</a\n          >&nbsp;\n        }\n        @if (checkboxes.length >= 0) {\n          <a tabindex=\"0\" (click)=\"deSelectAll()\"\n            >Deselect {{ checkboxes.length }} items</a\n          >\n        }\n      </th>\n    </ng-container>\n  }\n  <!-- Notice Row -->\n\n  <tr mat-row *matRowDef=\"let row; columns: allSubColumns\"></tr>\n\n  <tr *matNoDataRow class=\"noresult\">\n    <td colspan=\"7\">\n      <onemrva-mat-empty-row (clear)=\"clear()\"></onemrva-mat-empty-row>\n    </td>\n  </tr>\n\n  <!-- checkbox Column -->\n  <ng-container matColumnDef=\"check\">\n    <th mat-header-cell *matHeaderCellDef [attr.rowspan]=\"2\">\n      <div>\n        <mat-checkbox\n          aria-label=\"Check All\"\n          value=\"toggleAll\"\n          [checked]=\"checked\"\n          [indeterminate]=\"undetermined\"\n          (change)=\"toggleAllVisible($event)\"\n        />\n      </div>\n    </th>\n    <td mat-cell *matCellDef=\"let row\">\n      <mat-checkbox\n        #checkboxes\n        aria-label=\"Check row {{ row.id }}\"\n        [value]=\"row.id\"\n        [checked]=\"isChecked(row.id)\"\n        (change)=\"toggleOne($event, row.id)\"\n      />\n    </td>\n  </ng-container>\n\n  <!-- Id Column -->\n  @if (columnIsVisible('id')) {\n    <ng-container matColumnDef=\"id\" sticky>\n      <th\n        mat-header-cell\n        class=\"compact\"\n        *matHeaderCellDef\n        mat-sort-header\n        [attr.rowspan]=\"2\"\n      >\n        Id\n      </th>\n      <td mat-cell class=\"compact\" *matCellDef=\"let row\">\n        {{ row.id }}\n      </td>\n    </ng-container>\n  }\n\n  <!-- Name Column -->\n  @if (columnIsVisible('name')) {\n    <ng-container matColumnDef=\"name\">\n      <th mat-header-cell *matHeaderCellDef mat-sort-header [attr.rowspan]=\"2\">\n        Name\n      </th>\n      <td id=\"{{ row.name }}\" mat-cell *matCellDef=\"let row\">\n        <a href=\"/#table\">{{ row.name }}</a>\n      </td>\n    </ng-container>\n  }\n\n  <!-- Description Column -->\n  @if (columnIsVisible('description')) {\n    <ng-container matColumnDef=\"description\">\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        mat-sort-header=\"description\"\n        [attr.rowspan]=\"2\"\n        class=\"d-table-cell-large description-cell\"\n      >\n        Description\n      </th>\n      <td\n        mat-cell\n        *matCellDef=\"let row\"\n        class=\"d-table-cell-large description-cell\"\n      >\n        <span></span>\n        {{ row.description }}\n      </td></ng-container\n    >\n  }\n  @if (columnIsVisible('suspension')) {\n    <!-- Suspension Column -->\n    <ng-container matColumnDef=\"suspension\">\n      <th\n        mat-header-cell\n        *matHeaderCellDef\n        [attr.colspan]=\"2\"\n        class=\"align-center compact\"\n      >\n        Suspension\n      </th>\n      <!-- This column doesn't generate <td> items, so no need to add a definition for them -->\n    </ng-container>\n  }\n\n  @if (subColumnIsVisible('delay')) {\n    <!-- Delay Column -->\n    <ng-container matColumnDef=\"delay\">\n      <th mat-header-cell *matHeaderCellDef class=\"compact align-center\">\n        Delay\n      </th>\n      <td mat-cell *matCellDef=\"let row\" class=\"align-center\">1</td>\n    </ng-container>\n  }\n\n  @if (subColumnIsVisible('days')) {\n    <!-- Days Column -->\n    <ng-container matColumnDef=\"days\">\n      <th mat-header-cell *matHeaderCellDef class=\"compact align-center\">\n        Days\n      </th>\n      <td mat-cell *matCellDef=\"let row\" class=\"align-center\">2</td>\n    </ng-container>\n  }\n\n  @if (columnIsVisible('more')) {\n    <!-- Menu Column -->\n    <ng-container matColumnDef=\"more\">\n      <th mat-header-cell class=\"compact\" *matHeaderCellDef [attr.rowspan]=\"2\">\n        Menu\n      </th>\n      <td mat-cell class=\"compact align-right\" *matCellDef=\"let row\">\n        <button mat-icon-button [matMenuTriggerFor]=\"menu\" aria-label=\"More\">\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>\n            Edit\n          </button>\n          <button mat-menu-item (click)=\"delete(row)\" aria-label=\"Delete\">\n            <mat-icon>delete</mat-icon>\n            Delete\n          </button>\n          <button mat-menu-item (click)=\"share(row)\" aria-label=\"Share\">\n            <mat-icon>share</mat-icon>\n            Share\n          </button>\n        </mat-menu>\n      </td>\n    </ng-container>\n  }\n</table>\n<div class=\"my-m\">\n  <onemrva-mat-paginator\n    [pageSizeSelector]=\"true\"\n    [pageSizeOptions]=\"[5, 10, 20, 50]\"\n    [pageSizeDefaultOption]=\"5\"\n    [pageSize]=\"5\"\n    previousKey=\"Previous\"\n    nextKey=\"Next\"\n    (page)=\"changePage($event)\"\n    #paginator\n  ></onemrva-mat-paginator>\n</div>\n","demo-table.component.scss":"table {\n  // Medium media query of material\n  // the initial is display: table, but it doesn't show responsive on larger screens\n  @media (max-width: 1279.98px) {\n    // Block is required for the scroll overflow!\n    display: block;\n    overflow: auto;\n    width: 100%;\n  }\n\n  .description-cell {\n    min-width: 500px;\n  }\n}\n","demo-table.component.ts":"import {\n  AfterViewInit,\n  Component,\n  inject,\n  QueryList,\n  ViewChild,\n  ViewChildren,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MatSort, MatSortModule } from '@angular/material/sort';\nimport { MatTable, MatTableModule } from '@angular/material/table';\nimport { ListDataSource } from './demo-table-datasource';\nimport { PageEvent } from '@angular/material/paginator';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { MatCheckbox, MatCheckboxChange } from '@angular/material/checkbox';\n\nimport { CommonModule } from '@angular/common';\nimport { MatChipsModule } from '@angular/material/chips';\nimport { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';\nimport { MatIconButton } from '@angular/material/button';\nimport {\n  OnemrvaMatPaginatorComponent,\n  OnemrvaMatPaginatorModule,\n} from '@onemrvapublic/design-system';\nimport {\n  MatFormField,\n  MatLabel,\n  MatSuffix,\n} from '@angular/material/form-field';\nimport { MatInput } from '@angular/material/input';\nimport { OnemrvaMatEmptyRowComponent } from '@onemrvapublic/design-system';\nimport { ElementsService, ListItem } from '../../_services/elements.service';\nimport { OnemrvaMatMessageBoxModule } from '@onemrvapublic/design-system';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { take } from 'rxjs';\nimport { MatDialog, MatDialogModule } from '@angular/material/dialog';\nimport { DemoTableDialogContentComponent } from '../table-dialog-content';\nimport { MatIcon } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-table',\n  templateUrl: './demo-table.component.html',\n  styleUrls: ['./demo-table.component.scss'],\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    FormsModule,\n    MatCheckbox,\n    MatChipsModule,\n    MatFormField,\n    MatIconButton,\n    MatInput,\n    MatLabel,\n    MatMenu,\n    MatMenuTrigger,\n    MatSortModule,\n    MatSuffix,\n    MatTableModule,\n    MatDialogModule,\n    MatIcon,\n\n    OnemrvaMatPaginatorModule,\n    OnemrvaMatEmptyRowComponent,\n    OnemrvaMatMessageBoxModule,\n    OnemrvaMatPaginatorComponent,\n    MatMenuItem,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTableComponent\n  extends DemoComponentBase\n  implements AfterViewInit\n{\n  @ViewChild(OnemrvaMatPaginatorComponent)\n  paginator!: OnemrvaMatPaginatorComponent;\n\n  @ViewChild(MatSort)\n  sort!: MatSort;\n\n  @ViewChild(MatTable)\n  table!: MatTable<ListItem>;\n\n  @ViewChildren('checkboxes')\n  matCheckboxes!: QueryList<MatCheckbox>;\n\n  dataSource: ListDataSource;\n\n  // Checked checkbox values' list\n  public checkboxes: number[] = [];\n\n  // Check all checkbox statuses\n  public undetermined = false;\n  public checked = false;\n\n  // all columns first level\n  allColumns = ['check', 'id', 'name', 'description', 'suspension', 'more'];\n  // all columns second level\n  allSubColumns = [\n    'check',\n    'id',\n    'name',\n    'description',\n    'delay',\n    'days',\n    'more',\n  ];\n  // removable columns\n  columns = ['id', 'name', 'description'];\n\n  // Filter form control\n  search: FormControl = new FormControl('');\n\n  dialog = inject(MatDialog);\n  elementsService = inject(ElementsService);\n\n  constructor() {\n    super();\n    // Create a new DataSource\n    this.dataSource = new ListDataSource(this.elementsService);\n\n    // When user start filtering, we need to update the master checkbox\n    this.search.valueChanges.pipe(takeUntilDestroyed()).subscribe(search => {\n      console.log(search);\n      setTimeout(() => {\n        this.updateToggleAllStatus();\n      }, 100);\n    });\n  }\n\n  /**\n   *\n   */\n  showHideColumns() {\n    const panelClass: string[] = ['large'];\n    const dialogRef = this.dialog.open(DemoTableDialogContentComponent, {\n      data: {\n        allColumns: this.allColumns,\n        allSubColumns: this.allSubColumns,\n        columns: this.columns,\n      },\n      panelClass,\n    });\n    dialogRef\n      .afterClosed()\n      .pipe(take(1))\n      .subscribe((values: boolean[]) => {\n        if (values !== undefined) {\n          this.allColumns = ['check'];\n          this.allSubColumns = ['check'];\n          values.forEach((value, index) => {\n            if (value) {\n              this.allColumns.push(this.columns[index]);\n              this.allSubColumns.push(this.columns[index]);\n            }\n          });\n          this.allColumns.push('suspension');\n          this.allColumns.push('more');\n          this.allSubColumns.push('delay');\n          this.allSubColumns.push('days');\n          this.allSubColumns.push('more');\n        }\n      });\n  }\n\n  /**\n   * We set the datasource and paginator\n   */\n  ngAfterViewInit(): void {\n    this.dataSource.sort = this.sort;\n    this.dataSource.paginator = this.paginator;\n    this.dataSource.search = this.search;\n    this.table.dataSource = this.dataSource;\n  }\n\n  /**\n   * returns the column visible state\n   * @param column\n   */\n  columnIsVisible(column: string) {\n    return this.allColumns.includes(column);\n  }\n  /**\n   * returns the column visible state\n   * @param column\n   */\n  subColumnIsVisible(column: string) {\n    return this.allSubColumns.includes(column);\n  }\n\n  /**\n   * Edit row action\n   * @param row\n   */\n  edit(row: ListItem) {\n    alert(`Edit row n°${row.id}: ${row.name}`);\n  }\n\n  /**\n   * Delete row action\n   * @param row\n   */\n  delete(row: ListItem) {\n    this.dataSource.delete(row.id);\n  }\n\n  /**\n   * Share row action\n   * @param row\n   */\n  share(row: ListItem) {\n    alert(`Share row n°${row.id}: ${row.name}`);\n  }\n\n  /**\n   * clear search\n   */\n  clear() {\n    this.search.setValue('');\n  }\n\n  /**\n   * paginator changes page\n   * @param event\n   */\n  changePage(event: PageEvent) {\n    console.log(event);\n    // timeout necessary to take the changes in account\n    setTimeout(() => {\n      this.updateToggleAllStatus();\n    }, 100);\n  }\n\n  /**\n   * Is the notice visible\n   */\n  showNotice() {\n    return this.checkboxes.length > 0;\n  }\n\n  /**\n   * is a checkbox checked\n   * @param id\n   */\n  isChecked(id: number) {\n    return this.checkboxes.includes(id);\n  }\n\n  /**\n   * Toggle One checkbox\n   * @param $event\n   * @param id\n   */\n  toggleOne($event: MatCheckboxChange, id: number) {\n    const checked = $event.checked;\n    this.toggleCheckBox(id, checked);\n    this.updateToggleAllStatus();\n  }\n\n  /**\n   * toggle the checkbox with checks\n   * @param id\n   * @param checked\n   * @private\n   */\n  private toggleCheckBox(id: number, checked: boolean) {\n    if (checked) {\n      if (!this.checkboxes.includes(id)) {\n        this.checkboxes.push(id);\n      }\n    } else {\n      this.checkboxes.splice(this.checkboxes.indexOf(id), 1);\n    }\n  }\n\n  /**\n   * Toggle all visible checkboxes\n   * @param $event\n   */\n  toggleAllVisible($event: MatCheckboxChange) {\n    const checked = $event.checked;\n    this.checked = checked;\n\n    this.matCheckboxes.forEach(matCheckbox => {\n      const id = parseInt(matCheckbox.value);\n      this.toggleCheckBox(id, checked);\n    });\n    this.updateToggleAllStatus();\n  }\n\n  /**\n   * Update the status of the toggle all checkbox to reflect on what is checked (checked, unchecked, undetermined)\n   */\n  updateToggleAllStatus() {\n    this.undetermined = false;\n    this.checked = false;\n    let cnt = 0;\n\n    this.matCheckboxes.forEach(matCheckbox => {\n      const id = parseInt(matCheckbox.value);\n      if (this.checkboxes.includes(id)) {\n        cnt++;\n      }\n    });\n    if (cnt > 0) {\n      if (cnt === this.matCheckboxes.length) {\n        this.checked = true;\n      } else {\n        this.undetermined = true;\n      }\n    }\n  }\n\n  /**\n   * Select all checkbox in the full datasource's list\n   */\n  selectAll() {\n    this.dataSource\n      .all()\n      .pipe(take(1))\n      .subscribe(ids => {\n        this.checkboxes = ids;\n        this.updateToggleAllStatus();\n      });\n  }\n\n  /**\n   * Deselect all checkboxes\n   */\n  deSelectAll() {\n    this.checkboxes = [];\n    this.updateToggleAllStatus();\n  }\n}\n"}

package/assets/json/task-list.json

@@ -0,0 +1 @@
+{"demo-task-list.component.html":"<onemrva-mat-task-list>\n  <onemrva-mat-task color=\"\" icon=\"home\">\n    <onemrva-mat-task-title> Go home</onemrva-mat-task-title>\n    <onemrva-mat-task-content>\n      <p>Just call a cab...</p>\n    </onemrva-mat-task-content>\n  </onemrva-mat-task>\n\n  <onemrva-mat-task color=\"\" bubble=\"2\">\n    <onemrva-mat-task-title> Drink some water</onemrva-mat-task-title>\n    <onemrva-mat-task-content>\n      <p>Stay hydrated...</p>\n    </onemrva-mat-task-content>\n  </onemrva-mat-task>\n\n  <onemrva-mat-task\n    [disabled]=\"disabled\"\n    [form]=\"formControl\"\n    aria-disabled=\"true\"\n  >\n    <onemrva-mat-task-title aria-disabled=\"true\">\n      Don't do this</onemrva-mat-task-title\n    >\n    <onemrva-mat-task-content aria-disabled=\"true\">\n      <p>This is why it is disabled...</p>\n    </onemrva-mat-task-content>\n  </onemrva-mat-task>\n\n  <onemrva-mat-task color=\"error\" [form]=\"formControl1\">\n    <onemrva-mat-task-title> Did you fail this task ?</onemrva-mat-task-title>\n    <onemrva-mat-task-content>\n      <p>Dunno? It is red !</p>\n    </onemrva-mat-task-content>\n  </onemrva-mat-task>\n</onemrva-mat-task-list>\n","demo-task-list.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport {\n  OnemrvaMatTaskComponent,\n  OnemrvaMatTaskContentComponent,\n  OnemrvaMatTaskListComponent,\n  OnemrvaMatTaskListModule,\n  OnemrvaMatTaskTitleComponent,\n} from '@onemrvapublic/design-system/mat-task-list';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-task-list',\n  templateUrl: 'demo-task-list.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    OnemrvaMatTaskListModule,\n    MatButtonModule,\n    MatIconModule,\n    OnemrvaMatTaskComponent,\n    OnemrvaMatTaskTitleComponent,\n    OnemrvaMatTaskContentComponent,\n    OnemrvaMatTaskListComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTaskListComponent extends DemoComponentBase {\n  checkbox: any;\n  disabled = true;\n  formControl: FormControl = new FormControl(false);\n  formControl1: FormControl = new FormControl(false);\n}\n"}

package/assets/json/text-input.json

@@ -0,0 +1 @@
+{"demo-text-input.component.html":"<mat-form-field style=\"width: 300px\">\n  <mat-label>Error demo</mat-label>\n  <input matInput [formControl]=\"input\" />\n  <mat-hint>Hint</mat-hint>\n  @if (input.errors && input.errors['required']) {\n    <mat-error>\n      <mat-icon class=\"left\">error</mat-icon> This is a long error message that\n      is displayed on 2 lines\n    </mat-error>\n  }\n</mat-form-field>\n<mat-form-field>\n  <mat-label>Error demo</mat-label>\n  <input matInput [formControl]=\"input6\" />\n  <mat-hint>Hint</mat-hint>\n  @if (input6.errors && input6.errors['required']) {\n    <mat-error>\n      <mat-icon class=\"left\">error</mat-icon> This is a short error\n    </mat-error>\n  }\n</mat-form-field>\n\n<mat-form-field>\n  <mat-label>Error demo</mat-label>\n  <input matInput [formControl]=\"input4\" />\n</mat-form-field>\n\n<mat-form-field\n  style=\"width: 300px\"\n  [ngClass]=\"{\n    'mat-form-field-onemrva-warning':\n      !input2.errors || (input2.errors['required'] && !input2.untouched),\n  }\"\n>\n  <mat-label>Warning demo</mat-label>\n  <input matInput [formControl]=\"input2\" />\n  <mat-hint>Hint</mat-hint>\n  @if (!input2.errors || input2.errors['required']) {\n    <mat-error>\n      <mat-icon>warning</mat-icon> This is a short warning\n    </mat-error>\n  }\n</mat-form-field>\n\n<mat-form-field\n  style=\"width: 300px\"\n  [ngClass]=\"{ 'mat-form-field-onemrva-warning': !input5.untouched }\"\n>\n  <mat-label>Warning demo</mat-label>\n  <input matInput [formControl]=\"input5\" />\n  @if (input5.untouched) {\n    <mat-hint>Hint</mat-hint>\n  }\n  @if (!input5.untouched) {\n    <mat-hint class=\"mat-warn\">\n      <mat-icon>warning</mat-icon> This is a long warning message that is\n      displayed on 2 lines\n    </mat-hint>\n  }\n</mat-form-field>\n\n<mat-form-field\n  style=\"width: 300px\"\n  [ngClass]=\"{\n    'mat-form-field-onemrva-warning no-hint':\n      !input3.errors || (input3.errors['required'] && input3.untouched),\n  }\"\n>\n  <mat-label>Warning demo</mat-label>\n  <input matInput [formControl]=\"input3\" />\n</mat-form-field>\n\n<br />\n<mat-form-field style=\"width: 300px\">\n  <mat-label>Disabled demo</mat-label>\n  <input matInput disabled />\n</mat-form-field>\n","demo-text-input.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport {\n  FormsModule,\n  ReactiveFormsModule,\n  UntypedFormControl,\n  Validators,\n} from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatIcon } from '@angular/material/icon';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-text-input',\n  templateUrl: './demo-text-input.component.html',\n\n  standalone: true,\n  imports: [\n    FormsModule,\n    CommonModule,\n    MatInput,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    MatIcon,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextInputComponent extends DemoComponentBase {\n  input: UntypedFormControl = new UntypedFormControl('', [Validators.required]);\n  input2: UntypedFormControl = new UntypedFormControl('', [\n    Validators.required,\n  ]);\n  input3: UntypedFormControl = new UntypedFormControl('', [\n    Validators.required,\n  ]);\n  input4: UntypedFormControl = new UntypedFormControl('', [\n    Validators.required,\n  ]);\n  input5: UntypedFormControl = new UntypedFormControl('', [\n    Validators.required,\n  ]);\n  input6: UntypedFormControl = new UntypedFormControl('', [\n    Validators.required,\n  ]);\n  emailFormControl = new UntypedFormControl('', [\n    Validators.required,\n    Validators.email,\n  ]);\n}\n"}

package/assets/json/textarea.json

@@ -0,0 +1 @@
+{"demo-textarea.component.html":"<mat-form-field>\n  <mat-label>Textarea</mat-label>\n  <textarea matInput [formControl]=\"text\" style=\"height: 100px\">\nRelax. I'll talk to Lando and see what I can find out.\nI don't trust Lando.\nWell, I don't trust him, either.</textarea\n  >\n  <mat-hint class=\"with-counter\">\n    Hint\n    <div class=\"counter\">{{ text.value.length }} / 256</div>\n  </mat-hint>\n</mat-form-field>\n<br />\n<br />\n\n<mat-form-field>\n  <mat-label>Textarea (autoresize)</mat-label>\n  <textarea matInput [formControl]=\"text\" cdkTextareaAutosize>\nRelax. I'll talk to Lando and see what I can find out.\nI don't trust Lando.\nWell, I don't trust him, either.</textarea\n  >\n  <mat-hint class=\"with-counter\">\n    Hint\n    <div class=\"counter\">{{ text.value.length }} / 256</div>\n  </mat-hint>\n</mat-form-field>\n","demo-textarea.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-textarea',\n  templateUrl: './demo-textarea.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextareaComponent extends DemoComponentBase {\n  text: FormControl = new FormControl('');\n}\n"}

package/assets/json/timepicker.json

@@ -0,0 +1 @@
+{"demo-timepicker.component.html":"<mat-form-field class=\"example-full-width\" [formGroup]=\"form\">\n  <mat-label>Time</mat-label>\n  <input formControlName=\"time\" matInput [matTimepicker]=\"timepicker\" />\n  <mat-timepicker-toggle\n    [ariaLabel]=\"'Pick a time'\"\n    matSuffix\n    [for]=\"timepicker\"\n  ></mat-timepicker-toggle>\n  <mat-timepicker color=\"accent\" #timepicker></mat-timepicker>\n</mat-form-field>\n","demo-timepicker.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { OnemrvaMatTimepickerModule } from '@onemrvapublic/design-system/mat-timepicker';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { take } from 'rxjs';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n  selector: 'app-demo-timepicker',\n  templateUrl: 'demo-timepicker.component.html',\n\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatFormFieldModule,\n    ReactiveFormsModule,\n    MatInputModule,\n    OnemrvaMatTimepickerModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTimepickerComponent extends DemoComponentBase {\n  public form = new FormGroup({\n    time: new FormControl(),\n  });\n\n  constructor() {\n    super();\n    this.form\n      .get('time')\n      ?.valueChanges.pipe(takeUntilDestroyed())\n      .subscribe(value => {\n        this.output.set(\n          `${value.getHours().toString().padStart(2, '0')}:${value.getMinutes().toString().padStart(2, '0')}`,\n        );\n      });\n  }\n}\n"}

package/assets/json/toast.json

@@ -0,0 +1 @@
+{"demo-toast.component.html":"<p><a (click)=\"joke1()\">How do celebrities stay cool?</a></p>\n<button mat-flat-button color=\"accent\" (click)=\"yes()\">Like</button>\n<button mat-stroked-button color=\"primary\" (click)=\"no()\">\n  Send complaint\n</button>\n<button mat-stroked-button color=\"error\" (click)=\"error()\">Error</button>\n","demo-toast.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport {\n  OnemrvaMatToastComponent,\n  OnemrvaMatToastModule,\n  ToastType,\n} from '@onemrvapublic/design-system';\nimport { MatSnackBar } from '@angular/material/snack-bar';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-toast',\n  templateUrl: 'demo-toast.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatButtonModule, OnemrvaMatToastModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoToastComponent extends DemoComponentBase {\n  snackBar = inject(MatSnackBar);\n\n  constructor() {\n    super();\n  }\n\n  joke1() {\n    this.snackBar.openFromComponent(OnemrvaMatToastComponent, {\n      data: {\n        type: ToastType.info,\n        message: 'They have many fans.',\n      },\n      politeness: 'off',\n      duration: 5000,\n    });\n  }\n\n  yes() {\n    this.snackBar.openFromComponent(OnemrvaMatToastComponent, {\n      data: {\n        type: ToastType.success,\n        message: 'Feedback sent!',\n      },\n      politeness: 'polite',\n    });\n  }\n\n  no() {\n    this.snackBar.openFromComponent(OnemrvaMatToastComponent, {\n      data: {\n        type: ToastType.warn,\n        message: 'Technical issue. Please try again later',\n      },\n      politeness: 'assertive',\n    });\n  }\n\n  error() {\n    this.snackBar.openFromComponent(OnemrvaMatToastComponent, {\n      data: {\n        type: ToastType.error,\n        message: \"Technical error. Please don't try again\",\n      },\n      politeness: 'assertive',\n    });\n  }\n}\n"}

package/assets/json/toc.json

@@ -0,0 +1 @@
+{"demo-toc.component.html":"<div class=\"toc-content\">\n  <p>\n    Thermodynamics is a branch of physics that deals with heat, work, and\n    temperature, and their relation to energy, entropy, and the physical\n    properties of matter and radiation. The behavior of these quantities is\n    governed by the four laws of thermodynamics which convey a quantitative\n    description using measurable macroscopic physical quantities, but may be\n    explained in terms of microscopic constituents by statistical mechanics.\n    Thermodynamics applies to a wide variety of topics in science and\n    engineering, especially physical chemistry, biochemistry, chemical\n    engineering and mechanical engineering, but also in other complex fields\n    such as meteorology. Historically, thermodynamics developed out of a desire\n    to increase the efficiency of early steam engines, particularly through the\n    work of French physicist Sadi Carnot (1824) who believed that engine\n    efficiency was the key that could help France win the Napoleonic Wars.[1]\n    Scots-Irish physicist Lord Kelvin was the first to formulate a concise\n    definition of thermodynamics in 1854[2] which stated, \"Thermo-dynamics is\n    the subject of the relation of heat to forces acting between contiguous\n    parts of bodies, and the relation of heat to electrical agency.\" German\n    physicist and mathematician Rudolf Clausius restated Carnot's principle\n    known as the Carnot cycle and gave so the theory of heat a truer and sounder\n    basis. His most important paper, \"On the Moving Force of Heat\",[3] published\n    in 1850, first stated the second law of thermodynamics. In 1865 he\n    introduced the concept of entropy. In 1870 he introduced the virial theorem,\n    which applied to heat.[4] The initial application of thermodynamics to\n    mechanical heat engines was quickly extended to the study of chemical\n    compounds and chemical reactions. Chemical thermodynamics studies the nature\n    of the role of entropy in the process of chemical reactions and has provided\n    the bulk of expansion and knowledge of the field. Other formulations of\n    thermodynamics emerged. Statistical thermodynamics, or statistical\n    mechanics, concerns itself with statistical predictions of the collective\n    motion of particles from their microscopic behavior. In 1909, Constantin\n    Carathéodory presented a purely mathematical approach in an axiomatic\n    formulation, a description often referred to as geometrical thermodynamics.\n  </p>\n\n  <h2\n    [onemrvaMatToc]=\"{\n      tocName: 'thermo',\n      titleKey: 'thermo.introduction',\n      path: '#introduction',\n    }\"\n  >\n    Introduction\n  </h2>\n  <p>\n    A description of any thermodynamic system employs the four laws of\n    thermodynamics that form an axiomatic basis. The first law specifies that\n    energy can be transferred between physical systems as heat, as work, and\n    with transfer of matter.[5] The second law defines the existence of a\n    quantity called entropy, that describes the direction, thermodynamically,\n    that a system can evolve and quantifies the state of order of a system and\n    that can be used to quantify the useful work that can be extracted from the\n    system.[6] In thermodynamics, interactions between large ensembles of\n    objects are studied and categorized. Central to this are the concepts of the\n    thermodynamic system and its surroundings. A system is composed of\n    particles, whose average motions define its properties, and those properties\n    are in turn related to one another through equations of state. Properties\n    can be combined to express internal energy and thermodynamic potentials,\n    which are useful for determining conditions for equilibrium and spontaneous\n    processes. With these tools, thermodynamics can be used to describe how\n    systems respond to changes in their environment. This can be applied to a\n    wide variety of topics in science and engineering, such as engines, phase\n    transitions, chemical reactions, transport phenomena, and even black holes.\n    The results of thermodynamics are essential for other fields of physics and\n    for chemistry, chemical engineering, corrosion engineering, aerospace\n    engineering, mechanical engineering, cell biology, biomedical engineering,\n    materials science, and economics, to name a few.[7][8] This article is\n    focused mainly on classical thermodynamics which primarily studies systems\n    in thermodynamic equilibrium. Non-equilibrium thermodynamics is often\n    treated as an extension of the classical treatment, but statistical\n    mechanics has brought many advances to that field.\n  </p>\n\n  <h2\n    [onemrvaMatToc]=\"{\n      tocName: 'thermo',\n      titleKey: 'thermo.history',\n      path: '#history',\n    }\"\n  >\n    History\n  </h2>\n  <p>\n    The history of thermodynamics as a scientific discipline generally begins\n    with Otto von Guericke who, in 1650, built and designed the world's first\n    vacuum pump and demonstrated a vacuum using his Magdeburg hemispheres.\n    Guericke was driven to make a vacuum in order to disprove Aristotle's\n    long-held supposition that 'nature abhors a vacuum'. Shortly after Guericke,\n    the Anglo-Irish physicist and chemist Robert Boyle had learned of Guericke's\n    designs and, in 1656, in coordination with English scientist Robert Hooke,\n    built an air pump.[10] Using this pump, Boyle and Hooke noticed a\n    correlation between pressure, temperature, and volume. In time, Boyle's Law\n    was formulated, which states that pressure and volume are inversely\n    proportional. Then, in 1679, based on these concepts, an associate of\n    Boyle's named Denis Papin built a steam digester, which was a closed vessel\n    with a tightly fitting lid that confined steam until a high pressure was\n    generated. Later designs implemented a steam release valve that kept the\n    machine from exploding. By watching the valve rhythmically move up and down,\n    Papin conceived of the idea of a piston and a cylinder engine. He did not,\n    however, follow through with his design. Nevertheless, in 1697, based on\n    Papin's designs, engineer Thomas Savery built the first engine, followed by\n    Thomas Newcomen in 1712. Although these early engines were crude and\n    inefficient, they attracted the attention of the leading scientists of the\n    time. The fundamental concepts of heat capacity and latent heat, which were\n    necessary for the development of thermodynamics, were developed by Professor\n    Joseph Black at the University of Glasgow, where James Watt was employed as\n    an instrument maker. Black and Watt performed experiments together, but it\n    was Watt who conceived the idea of the external condenser which resulted in\n    a large increase in steam engine efficiency.[11] Drawing on all the previous\n    work led Sadi Carnot, the \"father of thermodynamics\", to publish Reflections\n    on the Motive Power of Fire (1824), a discourse on heat, power, energy and\n    engine efficiency. The book outlined the basic energetic relations between\n    the Carnot engine, the Carnot cycle, and motive power. It marked the start\n    of thermodynamics as a modern science.[12] The first thermodynamic textbook\n    was written in 1859 by William Rankine, originally trained as a physicist\n    and a civil and mechanical engineering professor at the University of\n    Glasgow.[13] The first and second laws of thermodynamics emerged\n    simultaneously in the 1850s, primarily out of the works of William Rankine,\n    Rudolf Clausius, and William Thomson (Lord Kelvin). The foundations of\n    statistical thermodynamics were set out by physicists such as James Clerk\n    Maxwell, Ludwig Boltzmann, Max Planck, Rudolf Clausius and J. Willard Gibbs.\n    Clausius, who first stated the basic ideas of the second law in his paper\n    \"On the Moving Force of Heat\",[3] published in 1850, and is called \"one of\n    the founding fathers of thermodynamics\",[14] introduced the concept of\n    entropy in 1865.During the years 1873–76 the American mathematical physicist\n    Josiah Willard Gibbs published a series of three papers, the most famous\n    being On the Equilibrium of Heterogeneous Substances,[15] in which he showed\n    how thermodynamic processes, including chemical reactions, could be\n    graphically analyzed, by studying the energy, entropy, volume, temperature\n    and pressure of the thermodynamic system in such a manner, one can determine\n    if a process would occur spontaneously.[16] Also Pierre Duhem in the 19th\n    century wrote about chemical thermodynamics.[17] During the early 20th\n    century, chemists such as Gilbert N. Lewis, Merle Randall,[18] and E. A.\n    Guggenheim[19][20] applied the mathematical methods of Gibbs to the analysis\n    of chemical processes.\n  </p>\n\n  <h2\n    [onemrvaMatToc]=\"{\n      tocName: 'thermo',\n      titleKey: 'thermo.etymology',\n      path: '#etymology',\n    }\"\n  >\n    Etymology\n  </h2>\n  <p>\n    The etymology of thermodynamics has an intricate history.[21] It was first\n    spelled in a hyphenated form as an adjective (thermo-dynamic) and from 1854\n    to 1868 as the noun thermo-dynamics to represent the science of generalized\n    heat engines.[21] American biophysicist Donald Haynie claims that\n    thermodynamics was coined in 1840 from the Greek root θέρμη therme, meaning\n    \"heat\", and δύναμις dynamis, meaning \"power\".[22] Pierre Perrot claims that\n    the term thermodynamics was coined by James Joule in 1858 to designate the\n    science of relations between heat and power,[12] however, Joule never used\n    that term, but used instead the term perfect thermo-dynamic engine in\n    reference to Thomson's 1849[23] phraseology.[21] By 1858, thermo-dynamics,\n    as a functional term, was used in William Thomson's paper \"An Account of\n    Carnot's Theory of the Motive Power of Heat.\"[23]\n  </p>\n\n  <h2\n    [onemrvaMatToc]=\"{\n      tocName: 'thermo',\n      titleKey: 'thermo.branches',\n      path: '#branches',\n    }\"\n  >\n    Branches of thermodynamics\n  </h2>\n  <p>\n    The study of thermodynamical systems has developed into several related\n    branches, each using a different fundamental model as a theoretical or\n    experimental basis, or applying the principles to varying types of systems.\n  </p>\n\n  <h3\n    [onemrvaMatToc]=\"{\n      tocName: 'thermo',\n      titleKey: 'thermo.classicalThermodynamics',\n      path: '#classical-thermodynamics',\n      level: level.SUBSECTION,\n    }\"\n  >\n    Classical thermodynamics\n  </h3>\n  <p>\n    Classical thermodynamics is the description of the states of thermodynamic\n    systems at near-equilibrium, that uses macroscopic, measurable properties.\n    It is used to model exchanges of energy, work and heat based on the laws of\n    thermodynamics. The qualifier classical reflects the fact that it represents\n    the first level of understanding of the subject as it developed in the 19th\n    century and describes the changes of a system in terms of macroscopic\n    empirical (large scale, and measurable) parameters. A microscopic\n    interpretation of these concepts was later provided by the development of\n    statistical mechanics.\n  </p>\n\n  <h3\n    [onemrvaMatToc]=\"{\n      tocName: 'thermo',\n      titleKey: 'thermo.statisticalThermodynamics',\n      path: '#statistical-thermodynamics',\n      level: level.SUBSECTION,\n    }\"\n  >\n    Statistical mechanics\n  </h3>\n  <p>\n    Statistical mechanics, also known as statistical thermodynamics, emerged\n    with the development of atomic and molecular theories in the late 19th\n    century and early 20th century, and supplemented classical thermodynamics\n    with an interpretation of the microscopic interactions between individual\n    particles or quantum-mechanical states. This field relates the microscopic\n    properties of individual atoms and molecules to the macroscopic, bulk\n    properties of materials that can be observed on the human scale, thereby\n    explaining classical thermodynamics as a natural result of statistics,\n    classical mechanics, and quantum theory at the microscopic level.\n  </p>\n\n  <h3\n    [onemrvaMatToc]=\"{\n      tocName: 'thermo',\n      titleKey: 'thermo.chemicalThermodynamics',\n      path: '#chemical-thermodynamics',\n      level: level.SUBSECTION,\n    }\"\n  >\n    Chemical thermodynamics\n  </h3>\n  <p>\n    Chemical thermodynamics is the study of the interrelation of energy with\n    chemical reactions or with a physical change of state within the confines of\n    the laws of thermodynamics. The primary objective of chemical thermodynamics\n    is determining the spontaneity of a given transformation.[24]\n  </p>\n\n  <h3\n    [onemrvaMatToc]=\"{\n      tocName: 'thermo',\n      titleKey: 'thermo.equilibriumThermodynamics',\n      path: '#equilibrium-thermodynamics',\n      level: level.SUBSECTION,\n    }\"\n  >\n    Equilibrium thermodynamics\n  </h3>\n  <p>\n    Equilibrium thermodynamics is the study of transfers of matter and energy in\n    systems or bodies that, by agencies in their surroundings, can be driven\n    from one state of thermodynamic equilibrium to another. The term\n    'thermodynamic equilibrium' indicates a state of balance, in which all\n    macroscopic flows are zero; in the case of the simplest systems or bodies,\n    their intensive properties are homogeneous, and their pressures are\n    perpendicular to their boundaries. In an equilibrium state there are no\n    unbalanced potentials, or driving forces, between macroscopically distinct\n    parts of the system. A central aim in equilibrium thermodynamics is: given a\n    system in a well-defined initial equilibrium state, and given its\n    surroundings, and given its constitutive walls, to calculate what will be\n    the final equilibrium state of the system after a specified thermodynamic\n    operation has changed its walls or surroundings.\n  </p>\n\n  <h3\n    [onemrvaMatToc]=\"{\n      tocName: 'thermo',\n      titleKey: 'thermo.nonEquilibriumThermodynamics',\n      path: '#non-equilibrium-thermodynamics',\n      level: level.SUBSECTION,\n    }\"\n  >\n    Non-equilibrium thermodynamics\n  </h3>\n  <p>\n    Non-equilibrium thermodynamics is a branch of thermodynamics that deals with\n    systems that are not in thermodynamic equilibrium. Most systems found in\n    nature are not in thermodynamic equilibrium because they are not in\n    stationary states, and are continuously and discontinuously subject to flux\n    of matter and energy to and from other systems. The thermodynamic study of\n    non-equilibrium systems requires more general concepts than are dealt with\n    by equilibrium thermodynamics.[25] Many natural systems still today remain\n    beyond the scope of currently known macroscopic thermodynamic methods.\n  </p>\n\n  <onemrva-mat-table-of-content\n    titleKey=\"thermo.title\"\n    tocName=\"thermo\"\n  ></onemrva-mat-table-of-content>\n</div>\n","demo-toc.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport {\n  OnemrvaMatTableOfContentComponent,\n  OnemrvaMatTableOfContentDirective,\n  OnemrvaMatTableOfContentService,\n  OnemrvaMatTocAnchorLevel,\n  OnemrvaMatTocAnchorStatus,\n} from '@onemrvapublic/design-system/mat-table-of-content';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-toc',\n  templateUrl: 'demo-toc.component.html',\n\n  standalone: true,\n  imports: [\n    OnemrvaMatTableOfContentComponent,\n    OnemrvaMatTableOfContentDirective,\n  ],\n  providers: [OnemrvaMatTableOfContentService],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTocComponent extends DemoComponentBase {\n  status = OnemrvaMatTocAnchorStatus;\n  level = OnemrvaMatTocAnchorLevel;\n\n  tocService = inject(OnemrvaMatTableOfContentService);\n}\n"}

package/assets/json/toolbar.json

@@ -0,0 +1 @@
+{"demo-toolbar.component.html":"<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<mat-toolbar class=\"sticky\">\n  <a>\n    <mat-icon class=\"large\">chevron_left</mat-icon>\n    <span style=\"vertical-align: top\">Back to the future</span>\n  </a>\n  <span class=\"spacer\"></span>\n  <button mat-icon-button class=\"onemrva-icon-button mr-l\" aria-label=\"Menu\">\n    <mat-icon>more_horiz</mat-icon>\n  </button>\n  <a class=\"mr-l\">Action</a>\n  <button mat-stroked-button color=\"primary\" class=\"mr-l\">\n    Edit something\n  </button>\n  <button mat-flat-button color=\"accent\">Send to nowhere</button>\n</mat-toolbar>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n<p>Scroll to see it in action ...</p>\n","demo-toolbar.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-toolbar',\n  templateUrl: './demo-toolbar.component.html',\n  standalone: true,\n  imports: [CommonModule, MatButtonModule, MatToolbarModule, MatIconModule],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoToolbarComponent extends DemoComponentBase {}\n"}

package/assets/json/tooltip.json

@@ -0,0 +1 @@
+{"demo-tooltip.component.html":"<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-4\">\n      <p style=\"display: flex\">\n        <mat-icon\n          class=\"filled\"\n          color=\"info\"\n          matTooltipPosition=\"right\"\n          matTooltip=\"Here you can write some information on the right\"\n          aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n        >\n          info\n        </mat-icon>\n        Right\n      </p>\n    </div>\n\n    <div class=\"col-4\">\n      <p style=\"display: flex\">\n        <mat-icon\n          class=\"filled\"\n          color=\"info\"\n          matTooltipPosition=\"above\"\n          matTooltip=\"Here you can write some information above\"\n          aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n        >\n          info\n        </mat-icon>\n        Above\n      </p>\n      <p class=\"text-center\" style=\"display: flex\">\n        <mat-icon\n          class=\"filled\"\n          color=\"info\"\n          matTooltipPosition=\"below\"\n          matTooltip=\"Here you can write some information below\"\n          aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n        >\n          info\n        </mat-icon>\n        Below\n      </p>\n    </div>\n\n    <div class=\"col-4\">\n      <p class=\"text-right\" style=\"display: flex\">\n        Left\n        <mat-icon\n          class=\"filled\"\n          color=\"info\"\n          matTooltipPosition=\"left\"\n          matTooltip=\"Here you can write some information on the left\"\n          aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n        >\n          info\n        </mat-icon>\n      </p>\n    </div>\n  </div>\n</div>\n\n<h3>With Custom HTML</h3>\n<div class=\"demo-tooltip-container\">\n  <div class=\"demo-tooltip\">\n    <mat-icon\n      OnemrvaMatTooltip\n      class=\"filled\"\n      position=\"right\"\n      color=\"info\"\n      [contentTemplate]=\"tooltipContent\"\n      [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n      [attr.data-cy-tooltipcontent]=\"'data-cy-tooltip-content'\"\n    >\n      info\n    </mat-icon>\n    <ng-template #tooltipContent>\n      I am a custom content with html (position: <b>right</b>) but there are 3\n      other positions\n      <ul>\n        <li>left</li>\n        <li>top</li>\n        <li>bottom</li>\n      </ul>\n    </ng-template>\n  </div>\n\n  <div class=\"demo-tooltip\">\n    <mat-icon\n      OnemrvaMatTooltip\n      class=\"filled\"\n      position=\"left\"\n      color=\"info\"\n      [contentTemplate]=\"tooltipContent2\"\n      [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n      [attr.data-cy-tooltipcontent2]=\"'data-cy-tooltip-content'\"\n    >\n      info\n    </mat-icon>\n    <ng-template #tooltipContent2>\n      I am a custom content (position: <b>left</b>)\n    </ng-template>\n  </div>\n\n  <div class=\"demo-tooltip\">\n    <mat-icon\n      OnemrvaMatTooltip\n      class=\"filled\"\n      position=\"above\"\n      color=\"info\"\n      [contentTemplate]=\"tooltipContent3\"\n      [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n      [attr.data-cy-tooltipcontent3]=\"'data-cy-tooltip-content'\"\n    >\n      info\n    </mat-icon>\n    <ng-template #tooltipContent3>\n      <div style=\"color: pink\">\n        I am a custom content with html (position: <b>top</b>)\n      </div></ng-template\n    >\n  </div>\n\n  <div class=\"demo-tooltip\">\n    <mat-icon\n      OnemrvaMatTooltip\n      class=\"filled\"\n      position=\"below\"\n      color=\"info\"\n      [contentTemplate]=\"tooltipContent4\"\n      [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n      [attr.data-cy-tooltipcontent4]=\"'data-cy-tooltip-content'\"\n    >\n      info\n    </mat-icon>\n    <ng-template #tooltipContent4>\n      I am a custom content (position: <b>bottom</b>)\n    </ng-template>\n  </div>\n</div>\n","demo-tooltip.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatTooltipModule } from '@angular/material/tooltip';\nimport { OnemrvaMatTooltipModule } from '@onemrvapublic/design-system/mat-tooltip';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-tooltip',\n  templateUrl: './demo-tooltip.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatTooltipModule,\n    OnemrvaMatTooltipModule,\n    MatIconModule,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTooltipComponent extends DemoComponentBase {}\n"}