@onemrvapublic/design-system-demos 20.7.0-develop.17 → 20.7.0-develop.19

package/assets/json/layout.json

@@ -1 +1 @@
-{"demo-layout.component.html":"<onemrva-layout\n  [environment]=\"Environment.PROD\"\n  [profile]=\"profile\"\n  (login)=\"login()\"\n  (logout)=\"logout()\"\n  [showThemeSwitcher]=\"false\"\n>\n  <!-- APP NAME -->\n  <onemrva-layout-title>\n    <span class=\"nemo\">\n      <span>nemo</span>\n      <span>DESIGN SYSTEM</span>\n    </span></onemrva-layout-title\n  >\n\n  <onemrva-layout-login-menu>\n    <button\n      type=\"button\"\n      mat-menu-item\n      data-cy=\"go to admin\"\n      (click)=\"helpLink()\"\n      attr.aria-label=\"{{ 'Admin' | translate }}\"\n    >\n      <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n    </button>\n  </onemrva-layout-login-menu>\n\n  <!-- MENU -->\n  <onemrva-layout-route\n    routerLink=\"/\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    dataCy=\"Guides\"\n    [label]=\"'Guides' | translate\"\n  >\n  </onemrva-layout-route>\n  <onemrva-layout-route\n    routerLink=\"/demos\"\n    [routerLinkActiveOptions]=\"{ exact: false }\"\n    dataCy=\"Components\"\n    [label]=\"'Components' | translate\"\n  >\n  </onemrva-layout-route>\n  <onemrva-layout-route\n    routerLink=\"/news\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    dataCy=\"News\"\n    [label]=\"'News' | translate\"\n  >\n  </onemrva-layout-route>\n\n  <!-- AFTER NAV LINKS -->\n  <onemrva-layout-after-nav>\n    <button\n      (click)=\"helpLink()\"\n      mat-icon-button\n      data-cy=\"goToUserManual\"\n      rel=\"noopener noreferrer\"\n      [matTooltipClass]=\"'tooltip'\"\n      matTooltip=\"Create ticket\"\n      [attr.aria-label]=\"'Create ticket'\"\n      style=\"text-decoration: none !important\"\n    >\n      <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n        >help</mat-icon\n      >\n    </button>\n  </onemrva-layout-after-nav>\n\n  <!-- CONTENT -->\n  <onemrva-layout-content>\n    <router-outlet></router-outlet>\n\n    <!-- Open a drawer -->\n    <button mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n      Open form\n    </button>\n  </onemrva-layout-content>\n\n  <!-- FOOTER -->\n  <onemrva-layout-footer> ONEM/RVA &copy; 2025 </onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, inject } from '@angular/core';\nimport { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';\nimport { TranslateModule } from '@ngx-translate/core';\n\nimport { MatIcon } from '@angular/material/icon';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { CommonModule } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport {\n  Environment,\n  NavItem,\n  OnemrvaDrawerService,\n  OnemrvaLayoutModule,\n  OnemrvaLeftSidenavService,\n  OnemRvaProfile,\n} from '@onemrvapublic/design-system';\nimport { MatMenuItem } from '@angular/material/menu';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { DemoDrawerContentComponent } from '../drawer';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [\n    CommonModule,\n    RouterOutlet,\n    OnemrvaLayoutModule,\n    MatIcon,\n    MatTooltip,\n    MatIconButton,\n    TranslateModule,\n    OverlayModule,\n    RouterLink,\n    MatMenuItem,\n  ],\n  templateUrl: './demo-layout.component.html',\n})\nexport class DemoLayoutComponent {\n  http = inject(HttpClient);\n  route = inject(ActivatedRoute);\n\n  // Use the drawer\n  drawerService = inject(OnemrvaDrawerService);\n\n  // Use the leftNav\n  leftNav = inject(OnemrvaLeftSidenavService);\n\n  navItems: NavItem[] = [\n    {\n      label: 'Home',\n      icon: 'home',\n      dataCy: 'home-nav',\n      routerLink: '/',\n      children: [],\n    },\n  ];\n\n  profile: OnemRvaProfile;\n\n  constructor() {\n    /** create a new empty profile */\n    this.profile = new OnemRvaProfile();\n    this.leftNav.updateItems(this.navItems);\n  }\n\n  /**\n   * Login\n   */\n  login() {\n    this.profile.login('Anne', 'Onymous');\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  helpLink() {\n    alert('?');\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      DemoDrawerContentComponent,\n    );\n    componentRef!.instance.myForm = this.dummyForm;\n\n    this.drawerService.toggle();\n  }\n\n  protected readonly Environment = Environment;\n}\n"}
+{"demo-layout.component.html":"<onemrva-layout\n  [environment]=\"Environment.PROD\"\n  [profile]=\"profile\"\n  (login)=\"login()\"\n  (logout)=\"logout()\"\n  [showThemeSwitcher]=\"false\"\n>\n  <!-- APP NAME -->\n  <onemrva-layout-title>\n    <span class=\"nemo\">\n      <span>nemo</span>\n      <span>DESIGN SYSTEM</span>\n    </span></onemrva-layout-title\n  >\n\n  <onemrva-layout-login-menu>\n    <button\n      type=\"button\"\n      mat-menu-item\n      data-cy=\"go to admin\"\n      (click)=\"helpLink()\"\n      attr.aria-label=\"{{ 'Admin' | translate }}\"\n    >\n      <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n    </button>\n  </onemrva-layout-login-menu>\n\n  <!-- MENU -->\n  <onemrva-layout-route\n    routerLink=\"/\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    dataCy=\"Guides\"\n    [label]=\"'Guides' | translate\"\n  >\n  </onemrva-layout-route>\n  <onemrva-layout-route\n    routerLink=\"/demos\"\n    [routerLinkActiveOptions]=\"{ exact: false }\"\n    dataCy=\"Components\"\n    [label]=\"'Components' | translate\"\n  >\n  </onemrva-layout-route>\n  <onemrva-layout-route\n    routerLink=\"/news\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    dataCy=\"News\"\n    [label]=\"'News' | translate\"\n  >\n  </onemrva-layout-route>\n\n  <!-- AFTER NAV LINKS -->\n  <onemrva-layout-after-nav>\n    <button\n      (click)=\"helpLink()\"\n      mat-icon-button\n      data-cy=\"goToUserManual\"\n      rel=\"noopener noreferrer\"\n      [matTooltipClass]=\"'tooltip'\"\n      matTooltip=\"Create ticket\"\n      [attr.aria-label]=\"'Create ticket'\"\n      style=\"text-decoration: none !important\"\n    >\n      <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n        >help</mat-icon\n      >\n    </button>\n  </onemrva-layout-after-nav>\n\n  <!-- CONTENT -->\n  <onemrva-layout-content>\n    <router-outlet></router-outlet>\n\n    <!-- Open a drawer -->\n    <button mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n      Open form\n    </button>\n  </onemrva-layout-content>\n\n  <!-- FOOTER -->\n  <onemrva-layout-footer> ONEM/RVA &copy; 2025 </onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, inject } from '@angular/core';\nimport { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';\nimport { TranslateModule } from '@ngx-translate/core';\n\nimport { MatIcon } from '@angular/material/icon';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { CommonModule } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport {\n  Environment,\n  OnemrvaDrawerService,\n  OnemrvaLayoutModule,\n  OnemrvaLeftSidenavService,\n  OnemRvaProfile,\n} from '@onemrvapublic/design-system/layout';\nimport { MatMenuItem } from '@angular/material/menu';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { DemoDrawerContentComponent } from '../drawer';\nimport { NavItem } from '@onemrvapublic/design-system/mat-navigation';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [\n    CommonModule,\n    RouterOutlet,\n    OnemrvaLayoutModule,\n    MatIcon,\n    MatTooltip,\n    MatIconButton,\n    TranslateModule,\n    OverlayModule,\n    RouterLink,\n    MatMenuItem,\n  ],\n  templateUrl: './demo-layout.component.html',\n})\nexport class DemoLayoutComponent {\n  http = inject(HttpClient);\n  route = inject(ActivatedRoute);\n\n  // Use the drawer\n  drawerService = inject(OnemrvaDrawerService);\n\n  // Use the leftNav\n  leftNav = inject(OnemrvaLeftSidenavService);\n\n  navItems: NavItem[] = [\n    {\n      label: 'Home',\n      icon: 'home',\n      dataCy: 'home-nav',\n      routerLink: '/',\n      children: [],\n    },\n  ];\n\n  profile: OnemRvaProfile;\n\n  constructor() {\n    /** create a new empty profile */\n    this.profile = new OnemRvaProfile();\n    this.leftNav.updateItems(this.navItems);\n  }\n\n  /**\n   * Login\n   */\n  login() {\n    this.profile.login('Anne', 'Onymous');\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  helpLink() {\n    alert('?');\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      DemoDrawerContentComponent,\n    );\n    componentRef!.instance.myForm = this.dummyForm;\n\n    this.drawerService.toggle();\n  }\n\n  protected readonly Environment = Environment;\n}\n"}

package/assets/json/message-box.json

@@ -1 +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"}
+{"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  OnemrvaMatMessageBoxComponent,\n  OnemrvaMatMessageBoxModule,\n} from '@onemrvapublic/design-system/mat-message-box';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-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

@@ -1 +1 @@
-{"demo-multiselect.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Select (multiple)</mat-label>\n  <onemrva-mat-multi-select\n    [formControl]=\"form\"\n    [selectionToggle]=\"selectionToggle()\"\n    [showFilter]=\"showFilter()\"\n  >\n    @for (value of toppingList$ | 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, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, 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 {\n  MatSelectSearchModule,\n  OnemRvaReadonlyDirective,\n} 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';\nimport { toppingList } from '../../models/toppings';\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    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMultiselectComponent extends DemoComponentBase {\n  disabled = input(false);\n  readonly = input(false);\n  selectionToggle = input(true);\n  showFilter = input(true);\n\n  form: FormControl = new FormControl([], Validators.required);\n\n  toppingList$: Observable<string[]>;\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      if (this.readonly() && !this.form.getRawValue()) {\n        this.form.setValue(['Pepperoni', 'Eggplant']);\n      }\n    });\n\n    // filtering the list\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return toppingList.filter((value: string) => {\n          if (!search || search === '') return this.form;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n}\n"}
+{"demo-multiselect.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Select (multiple)</mat-label>\n  <onemrva-mat-multi-select\n    [formControl]=\"form\"\n    [selectionToggle]=\"selectionToggle()\"\n    [showFilter]=\"showFilter()\"\n  >\n    @for (value of toppingList$ | 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, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, 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/mat-select-search';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport {\n  OnemrvaMatMultiSelectComponent,\n  OnemrvaMatMultiSelectModule,\n} from '@onemrvapublic/design-system/mat-multi-select';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { toppingList } from '../../models/toppings';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\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    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMultiselectComponent extends DemoComponentBase {\n  disabled = input(false);\n  readonly = input(false);\n  selectionToggle = input(true);\n  showFilter = input(true);\n\n  form: FormControl = new FormControl([], Validators.required);\n\n  toppingList$: Observable<string[]>;\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      if (this.readonly() && !this.form.getRawValue()) {\n        this.form.setValue(['Pepperoni', 'Eggplant']);\n      }\n    });\n\n    // filtering the list\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return toppingList.filter((value: string) => {\n          if (!search || search === '') return this.form;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n}\n"}

package/assets/json/not-found.json

@@ -1 +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"}
+{"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/page-not-found';\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

@@ -1 +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"}
+{"demo-notification.component.html":"<!-- TODO: Check this component throught the codebase and contact the teams -->\n<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/mat-notification';\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/overlay.json

@@ -1 +1 @@
-{"demo-overlay.component.html":"<!-- This button triggers the overlay and is it's origin -->\n<button (click)=\"isOpen = !isOpen\" type=\"button\">\n  {{ isOpen ? 'Close' : 'Open' }}\n</button>\n\n<!-- This template displays the overlay content and is connected to the button -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  (backdropClick)=\"isOpen = false\"\n  (detach)=\"isOpen = false\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayPositions]=\"[\n    {\n      originX: 'center',\n      originY: 'center',\n      overlayX: 'center',\n      overlayY: 'center',\n    },\n  ]\"\n>\n  <onemrva-mat-spinner></onemrva-mat-spinner>\n</ng-template>\n<span\n  #origin=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  style=\"position: fixed; top: 50%; left: 50%; height: 0; width: 0\"\n></span>\n","demo-overlay.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatSpinnerComponent } from '@onemrvapublic/design-system';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\n@Component({\n  selector: 'app-demo-overlay',\n  templateUrl: './demo-overlay.component.html',\n\n  standalone: true,\n  imports: [OnemrvaMatSpinnerComponent, OverlayModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoOverlayComponent extends DemoComponentBase {\n  isOpen = false;\n\n  protected readonly OverlayModule = OverlayModule;\n}\n"}
+{"demo-overlay.component.html":"<!-- This button triggers the overlay and is it's origin -->\n<button (click)=\"isOpen = !isOpen\" type=\"button\">\n  {{ isOpen ? 'Close' : 'Open' }}\n</button>\n\n<!-- This template displays the overlay content and is connected to the button -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOpen]=\"isOpen\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  (backdropClick)=\"isOpen = false\"\n  (detach)=\"isOpen = false\"\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayPositions]=\"[\n    {\n      originX: 'center',\n      originY: 'center',\n      overlayX: 'center',\n      overlayY: 'center',\n    },\n  ]\"\n>\n  <onemrva-mat-spinner></onemrva-mat-spinner>\n</ng-template>\n<span\n  #origin=\"cdkOverlayOrigin\"\n  cdkOverlayOrigin\n  style=\"position: fixed; top: 50%; left: 50%; height: 0; width: 0\"\n></span>\n","demo-overlay.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatSpinnerComponent } from '@onemrvapublic/design-system/mat-spinner';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\n@Component({\n  selector: 'app-demo-overlay',\n  templateUrl: './demo-overlay.component.html',\n\n  standalone: true,\n  imports: [OnemrvaMatSpinnerComponent, OverlayModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoOverlayComponent extends DemoComponentBase {\n  isOpen = false;\n\n  protected readonly OverlayModule = OverlayModule;\n}\n"}

package/assets/json/paginator.json

@@ -1 +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"}
+{"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/mat-paginator';\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/panel.json

@@ -1 +1 @@
-{"demo-panel.component.html":"<onemrva-mat-panel\n  [color]=\"color()\"\n  [expandable]=\"expandable()\"\n  [expanded]=\"expanded\"\n  (expandedChange)=\"onExpandedChange($event)\"\n>\n  <onemrva-mat-panel-title>\n    Employee 0\n    <onemrva-mat-sticker [color]=\"'warn'\">In Progress</onemrva-mat-sticker>\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    <button mat-stroked-button color=\"primary\" class=\"small\">\n      <mat-icon>edit</mat-icon>Edit\n    </button>\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 {\n  OnemrvaMatPanelModule,\n  OnemrvaMatStickerComponent,\n} 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    OnemrvaMatStickerComponent,\n  ],\n  templateUrl: 'demo-panel.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPanelComponent extends DemoComponentBase {\n  color = input<OnemrvaMatColor>(OnemrvaMatColor.NONE);\n  expandable = input(true);\n\n  expanded = false;\n\n  onExpandedChange(expanded: boolean) {\n    console.log('expanded logged:', expanded);\n  }\n}\n"}
+{"demo-panel.component.html":"<onemrva-mat-panel\n  [color]=\"color()\"\n  [expandable]=\"expandable()\"\n  [expanded]=\"expanded\"\n  (expandedChange)=\"onExpandedChange($event)\"\n>\n  <onemrva-mat-panel-title>\n    Employee 0\n    <onemrva-mat-sticker [color]=\"'warn'\">In Progress</onemrva-mat-sticker>\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    <button mat-stroked-button color=\"primary\" class=\"small\">\n      <mat-icon>edit</mat-icon>Edit\n    </button>\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 { OnemrvaMatStickerComponent } from '@onemrvapublic/design-system/mat-sticker';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\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    OnemrvaMatStickerComponent,\n  ],\n  templateUrl: 'demo-panel.component.html',\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPanelComponent extends DemoComponentBase {\n  color = input<OnemrvaMatColor>(OnemrvaMatColor.NONE);\n  expandable = input(true);\n\n  expanded = false;\n\n  onExpandedChange(expanded: boolean) {\n    console.log('expanded logged:', expanded);\n  }\n}\n"}

package/assets/json/phone-input.json

@@ -1 +1 @@
-{"demo-phone-input.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Phone number</mat-label>\n\n  <onemrva-mat-input-phone\n    [formControl]=\"form\"\n    (getCountry)=\"getCountry($event)\"\n    placeholder=\"+32 475 12 23 34\"\n  ></onemrva-mat-input-phone>\n\n  <mat-hint>hint</mat-hint>\n  @if (form.hasError('required')) {\n    <mat-error>\n      {{ 'input.phone.required' | translate }}\n    </mat-error>\n  } @else if (form.hasError('phoneNumber')) {\n    <mat-error>\n      {{ 'input.phone.invalid' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n","demo-phone-input.component.ts":"import { Component, effect, input, 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';\nimport { MatInputModule } from '@angular/material/input';\nimport { TranslateModule } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {\n  OnemRvaReadonlyDirective,\n  phoneNumberValidator,\n} from '@onemrvapublic/design-system';\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    OnemRvaReadonlyDirective,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPhoneInputComponent extends DemoComponentBase {\n  readonly = input(false);\n\n  disabled = input(false);\n\n  form = new FormControl('', [Validators.required, phoneNumberValidator()]);\n\n  getCountry($event: any) {\n    this.output.set($event);\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      // we set a value for readonly demo\n      if (this.readonly()) {\n        this.form.setValue('+32412345678');\n      }\n    });\n  }\n}\n"}
+{"demo-phone-input.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Phone number</mat-label>\n\n  <onemrva-mat-input-phone\n    [formControl]=\"form\"\n    (getCountry)=\"getCountry($event)\"\n    placeholder=\"+32 475 12 23 34\"\n  ></onemrva-mat-input-phone>\n\n  <mat-hint>hint</mat-hint>\n  @if (form.hasError('required')) {\n    <mat-error>\n      {{ 'input.phone.required' | translate }}\n    </mat-error>\n  } @else if (form.hasError('phoneNumber')) {\n    <mat-error>\n      {{ 'input.phone.invalid' | translate }}\n    </mat-error>\n  }\n</mat-form-field>\n","demo-phone-input.component.ts":"import { Component, effect, input, 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';\nimport {\n  phoneNumberValidator,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\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    OnemRvaReadonlyDirective,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoPhoneInputComponent extends DemoComponentBase {\n  readonly = input(false);\n\n  disabled = input(false);\n\n  form = new FormControl('', [Validators.required, phoneNumberValidator()]);\n\n  getCountry($event: any) {\n    this.output.set($event);\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n\n      // we set a value for readonly demo\n      if (this.readonly()) {\n        this.form.setValue('+32412345678');\n      }\n    });\n  }\n}\n"}

package/assets/json/pop-over.json

@@ -1 +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"}
+{"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/mat-pop-over';\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

@@ -1 +1 @@
-{"demo-progress-bar.component.html":"<onemrva-mat-progress-bar [value$]=\"value$\"></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  constructor() {\n    super();\n    const numbers = interval(100);\n\n    const loadding = numbers.pipe(take(101));\n\n    loadding.pipe().subscribe(x => {\n      this.value$.next(x);\n    });\n  }\n}\n"}
+{"demo-progress-bar.component.html":"<onemrva-mat-progress-bar [value$]=\"value$\"></onemrva-mat-progress-bar>\n","demo-progress-bar.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { interval, 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/mat-progress-bar';\n\nimport { take } from 'rxjs/operators';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-progress-bar',\n  templateUrl: 'demo-progress-bar.component.html',\n\n  standalone: true,\n  imports: [\n    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  constructor() {\n    super();\n    const numbers = interval(100);\n\n    const loadding = numbers.pipe(take(101));\n\n    loadding.pipe().subscribe(x => {\n      this.value$.next(x);\n    });\n  }\n}\n"}

package/assets/json/radio.json

@@ -1 +1 @@
-{"demo-radio.component.html":"<mat-radio-group [disabled]=\"disabled()\" [readonly]=\"readonly()\">\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","demo-radio.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-radio',\n  templateUrl: './demo-radio.component.html',\n  standalone: true,\n  imports: [CommonModule, MatRadioModule, OnemRvaReadonlyDirective],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoRadioComponent extends DemoComponentBase {\n  disabled = input(false);\n  readonly = input(false);\n}\n"}
+{"demo-radio.component.html":"<mat-radio-group [disabled]=\"disabled()\" [readonly]=\"readonly()\">\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","demo-radio.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatRadioModule } from '@angular/material/radio';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-radio',\n  templateUrl: './demo-radio.component.html',\n  standalone: true,\n  imports: [CommonModule, MatRadioModule, OnemRvaReadonlyDirective],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoRadioComponent extends DemoComponentBase {\n  disabled = input(false);\n  readonly = input(false);\n}\n"}

package/assets/json/select.json

@@ -1 +1 @@
-{"demo-select.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Select (single with filter)</mat-label>\n  <mat-select [placeholder]=\"'Search here' | translate\" [formControl]=\"form\">\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","demo-select.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, 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 {\n  MatSelectSearchModule,\n  OnemrvaMatMultiSelectModule,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { toppingList } from '../../models/toppings';\n\n@Component({\n  selector: 'app-demo-select',\n  templateUrl: './demo-select.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    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectComponent extends DemoComponentBase {\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\n\n  form: FormControl = new FormControl('', Validators.required);\n\n  toppingList$: Observable<string[]>;\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return toppingList.filter((value: string) => {\n          if (!search || search === '') return true;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n}\n"}
+{"demo-select.component.html":"<mat-form-field [readonly]=\"readonly()\">\n  <mat-label>Select (single with filter)</mat-label>\n  <mat-select [placeholder]=\"'Search here' | translate\" [formControl]=\"form\">\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","demo-select.component.ts":"import { Component, effect, input, ViewEncapsulation } from '@angular/core';\nimport { MatSelectModule } from '@angular/material/select';\nimport { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';\nimport { debounceTime, Observable, 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/mat-select-search';\nimport { OnemrvaMatMultiSelectModule } from '@onemrvapublic/design-system/mat-multi-select';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { toppingList } from '../../models/toppings';\n\n@Component({\n  selector: 'app-demo-select',\n  templateUrl: './demo-select.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    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectComponent extends DemoComponentBase {\n  disabled = input<boolean>(false);\n  readonly = input<boolean>(false);\n\n  form: FormControl = new FormControl('', Validators.required);\n\n  toppingList$: Observable<string[]>;\n\n  public filterCtrl: FormControl<string | null> = new FormControl<string>('');\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n\n    this.toppingList$ = this.filterCtrl.valueChanges.pipe(\n      debounceTime(400),\n      startWith(''),\n      map(search => {\n        return toppingList.filter((value: string) => {\n          if (!search || search === '') return true;\n          return value.toLowerCase().indexOf(search.toLowerCase()) > -1;\n        });\n      }),\n    );\n  }\n}\n"}

package/assets/json/selectable-box-large.json

@@ -1 +1 @@
-{"demo-selectable-box-large.component.html":"<mat-radio-group class=\"d-flex w100\" [formControl]=\"form\">\n  <onemrva-mat-selectable-box #box1 value=\"box1Value\">\n    <!--  The title attribute makes it in the header  -->\n    <ng-container title>\n      <span>36 - 49 ans</span>\n    </ng-container>\n\n    <!--  The sticker attribute makes it in the header  -->\n    <onemrva-mat-sticker sticker [color]=\"box1.isChecked() ? 'accent' : ''\">\n      468 jours à prester au CPAS\n    </onemrva-mat-sticker>\n\n    <!--  No attribute makes it go in the body, which you can style yourselves - don't do it inline :) only for demo purposes  -->\n\n    <div class=\"d-flex\">\n      <div class=\"d-flex flex-column text-right m\">\n        <span>Période à prester au CPAS</span>\n        <span>Date de demande des allocations</span>\n        <span>Réglementation</span>\n        <span>Q/S à prester au CPAS </span>\n        <span>Période de référence </span>\n        <span>Prestations passées prises en compte</span>\n      </div>\n      <div class=\"d-flex flex-column text-right bold m\">\n        <span>16/08/2022 - 14/08/2023</span>\n        <span>16/08/2023</span>\n        <span>Article 30 : Nouveau dossier</span>\n        <span>Q/S à prester au CPAS </span>\n        <span>16/11/2021 - 15/08/2023</span>\n        <span>0 jour</span>\n      </div>\n    </div>\n  </onemrva-mat-selectable-box>\n\n  <onemrva-mat-selectable-box #box2 value=\"box2Value\">\n    <!--  The title attribute makes it in the header  -->\n    <ng-container title>\n      <span>36 - 49 ans</span>\n    </ng-container>\n\n    <!--  The sticker attribute makes it in the header  -->\n\n    <onemrva-mat-sticker sticker [color]=\"box2.isChecked() ? 'accent' : ''\">\n      468 jours à prester au CPAS\n    </onemrva-mat-sticker>\n\n    <!--  No attribute makes it go in the body, which you can style yourselves - don't do it inline :) only for demo purposes  -->\n\n    <div class=\"d-flex\">\n      <div class=\"d-flex flex-column text-right m\">\n        <span>Période à prester au CPAS</span>\n        <span>Date de demande des allocations</span>\n        <span>Réglementation</span>\n        <span>Q/S à prester au CPAS </span>\n        <span>Période de référence </span>\n        <span>Prestations passées prises en compte</span>\n      </div>\n      <div class=\"d-flex flex-column text-right bold m\">\n        <span>16/08/2022 - 14/08/2023</span>\n        <span>16/08/2023</span>\n        <span>Article 30 : Nouveau dossier</span>\n        <span>Q/S à prester au CPAS </span>\n        <span>16/11/2021 - 15/08/2023</span>\n        <span>0 jour</span>\n      </div>\n    </div>\n  </onemrva-mat-selectable-box>\n</mat-radio-group>\n","demo-selectable-box-large.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { 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 { MatIconModule } from '@angular/material/icon';\nimport {\n  MatSelectSearchModule,\n  OnemrvaMatStickerModule,\n  OnemrvaMatSelectableBoxModule,\n} from '@onemrvapublic/design-system';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-selectable-box-large',\n  templateUrl: './demo-selectable-box-large.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    OnemRvaColorDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxLargeComponent extends DemoComponentBase {\n  form = new FormControl<string>('');\n}\n"}
+{"demo-selectable-box-large.component.html":"<mat-radio-group class=\"d-flex w100\" [formControl]=\"form\">\n  <onemrva-mat-selectable-box #box1 value=\"box1Value\">\n    <!--  The title attribute makes it in the header  -->\n    <ng-container title>\n      <span>36 - 49 ans</span>\n    </ng-container>\n\n    <!--  The sticker attribute makes it in the header  -->\n    <onemrva-mat-sticker sticker [color]=\"box1.isChecked() ? 'accent' : ''\">\n      468 jours à prester au CPAS\n    </onemrva-mat-sticker>\n\n    <!--  No attribute makes it go in the body, which you can style yourselves - don't do it inline :) only for demo purposes  -->\n\n    <div class=\"d-flex\">\n      <div class=\"d-flex flex-column text-right m\">\n        <span>Période à prester au CPAS</span>\n        <span>Date de demande des allocations</span>\n        <span>Réglementation</span>\n        <span>Q/S à prester au CPAS </span>\n        <span>Période de référence </span>\n        <span>Prestations passées prises en compte</span>\n      </div>\n      <div class=\"d-flex flex-column text-right bold m\">\n        <span>16/08/2022 - 14/08/2023</span>\n        <span>16/08/2023</span>\n        <span>Article 30 : Nouveau dossier</span>\n        <span>Q/S à prester au CPAS </span>\n        <span>16/11/2021 - 15/08/2023</span>\n        <span>0 jour</span>\n      </div>\n    </div>\n  </onemrva-mat-selectable-box>\n\n  <onemrva-mat-selectable-box #box2 value=\"box2Value\">\n    <!--  The title attribute makes it in the header  -->\n    <ng-container title>\n      <span>36 - 49 ans</span>\n    </ng-container>\n\n    <!--  The sticker attribute makes it in the header  -->\n\n    <onemrva-mat-sticker sticker [color]=\"box2.isChecked() ? 'accent' : ''\">\n      468 jours à prester au CPAS\n    </onemrva-mat-sticker>\n\n    <!--  No attribute makes it go in the body, which you can style yourselves - don't do it inline :) only for demo purposes  -->\n\n    <div class=\"d-flex\">\n      <div class=\"d-flex flex-column text-right m\">\n        <span>Période à prester au CPAS</span>\n        <span>Date de demande des allocations</span>\n        <span>Réglementation</span>\n        <span>Q/S à prester au CPAS </span>\n        <span>Période de référence </span>\n        <span>Prestations passées prises en compte</span>\n      </div>\n      <div class=\"d-flex flex-column text-right bold m\">\n        <span>16/08/2022 - 14/08/2023</span>\n        <span>16/08/2023</span>\n        <span>Article 30 : Nouveau dossier</span>\n        <span>Q/S à prester au CPAS </span>\n        <span>16/11/2021 - 15/08/2023</span>\n        <span>0 jour</span>\n      </div>\n    </div>\n  </onemrva-mat-selectable-box>\n</mat-radio-group>\n","demo-selectable-box-large.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { 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 { MatIconModule } from '@angular/material/icon';\nimport { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { OnemrvaMatSelectableBoxModule } from '@onemrvapublic/design-system/mat-selectable-box';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-selectable-box-large',\n  templateUrl: './demo-selectable-box-large.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    OnemRvaColorDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxLargeComponent extends DemoComponentBase {\n  form = new FormControl<string>('');\n}\n"}

package/assets/json/selectable-box.json

@@ -1 +1 @@
-{"demo-selectable-box.component.html":"<mat-radio-group\n  name=\"unemploymentType\"\n  required\n  [formControl]=\"formControl\"\n  class=\"d-flex w100\"\n>\n  @for (reason of reasons; track $index) {\n    <onemrva-mat-selectable-box\n      [readonly]=\"readonly()\"\n      [value]=\"reason\"\n      [disabled]=\"reason === 'Disabled' || disabled()\"\n    >\n      @if (title()) {\n        <ng-container title>{{ reason }}</ng-container>\n      }\n      @if (icon()) {\n        <ng-container icon>{{ icons[$index] }}</ng-container>\n      }\n      @if (content()) {\n        <ng-container>\n          This<br />\n          Is<br />\n          A<br />\n          Short<br />\n          Content\n        </ng-container>\n      }\n    </onemrva-mat-selectable-box>\n  }\n</mat-radio-group>\n","demo-selectable-box.component.ts":"import { Component, Input, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { 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 {\n  MatSelectSearchModule,\n  OnemrvaMatStickerModule,\n  OnemrvaMatSelectableBoxModule,\n} from '@onemrvapublic/design-system';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\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    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxComponent extends DemoComponentBase {\n  formControl = new FormControl<string>('');\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n  title = input<boolean>(true);\n  content = input<boolean>(true);\n  icon = input<boolean>(true);\n\n  reasons = ['Economical', 'Bad Weather', 'Other', 'Disabled'];\n  icons = ['money', 'thunderstorm', 'rainy', 'switch'];\n}\n"}
+{"demo-selectable-box.component.html":"<mat-radio-group\n  name=\"unemploymentType\"\n  required\n  [formControl]=\"formControl\"\n  class=\"d-flex w100\"\n>\n  @for (reason of reasons; track $index) {\n    <onemrva-mat-selectable-box\n      [readonly]=\"readonly()\"\n      [value]=\"reason\"\n      [disabled]=\"reason === 'Disabled' || disabled()\"\n    >\n      @if (title()) {\n        <ng-container title>{{ reason }}</ng-container>\n      }\n      @if (icon()) {\n        <ng-container icon>{{ icons[$index] }}</ng-container>\n      }\n      @if (content()) {\n        <ng-container>\n          This<br />\n          Is<br />\n          A<br />\n          Short<br />\n          Content\n        </ng-container>\n      }\n    </onemrva-mat-selectable-box>\n  }\n</mat-radio-group>\n","demo-selectable-box.component.ts":"import { Component, Input, input, ViewEncapsulation } from '@angular/core';\nimport { FormControl, ReactiveFormsModule } from '@angular/forms';\nimport { 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 { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { OnemrvaMatSelectableBoxModule } from '@onemrvapublic/design-system/mat-selectable-box';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\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    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxComponent extends DemoComponentBase {\n  formControl = new FormControl<string>('');\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n  title = input<boolean>(true);\n  content = input<boolean>(true);\n  icon = input<boolean>(true);\n\n  reasons = ['Economical', 'Bad Weather', 'Other', 'Disabled'];\n  icons = ['money', 'thunderstorm', 'rainy', 'switch'];\n}\n"}

package/assets/json/side-menu.json

@@ -1 +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"}
+{"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  OnemrvaMenu,\n  OnemrvaMatSideMenuModule,\n} from '@onemrvapublic/design-system/mat-side-menu';\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

@@ -1 +1 @@
-{"demo-skeleton.component.html":"<mat-card appearance=\"outlined\" style=\"width: 80%\">\n  <mat-card-content>\n    <div class=\"row\">\n      <div class=\"col-12 col-2-medium\">\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"circle\" [size]=\"'xlarge'\">\n          </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"}
+{"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/mat-skeleton';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\nimport { MatButtonModule } from '@angular/material/button';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\n\nimport { MatCardModule } from '@angular/material/card';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-skeleton',\n  templateUrl: 'demo-skeleton.component.html',\n\n  standalone: true,\n  imports: [\n    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/spinner.json

@@ -1 +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"}
+{"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/mat-spinner';\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

@@ -1 +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"}
+{"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/mat-sticker';\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

@@ -1 +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"}
+{"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/mat-stepper';\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/table-dialog-content.json

@@ -1 +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"}
+{"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/mat-choice-chip';\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

@@ -1 +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"}
+{"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/mat-paginator';\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/mat-paginator';\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/mat-empty-row';\nimport { ElementsService, ListItem } from '../../_services/elements.service';\nimport { OnemrvaMatMessageBoxModule } from '@onemrvapublic/design-system/mat-message-box';\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

@@ -1 +1 @@
-{"demo-task-list.component.html":"<onemrva-mat-task-list [readonly]=\"readonly()\">\n  @for (task of tasks; track $index) {\n    @if (type() === 'checkbox') {\n      <onemrva-mat-task class=\"mb\" [form]=\"form\" [color]=\"color()\">\n        <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n        <onemrva-mat-task-content>\n          <p>t{{ tasksDesc[$index] }}</p>\n        </onemrva-mat-task-content>\n      </onemrva-mat-task>\n    } @else if (type() === 'bubble') {\n      <onemrva-mat-task\n        [bubble]=\"'' + $index\"\n        [disabled]=\"disabled()\"\n        [color]=\"color()\"\n      >\n        <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n        <onemrva-mat-task-content>\n          <p>t{{ tasksDesc[$index] }}</p>\n        </onemrva-mat-task-content>\n      </onemrva-mat-task>\n    } @else if (type() === 'icon') {\n      <onemrva-mat-task\n        [icon]=\"'home'\"\n        [disabled]=\"disabled()\"\n        [color]=\"color()\"\n      >\n        <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n        <onemrva-mat-task-content>\n          <p>t{{ tasksDesc[$index] }}</p>\n        </onemrva-mat-task-content>\n      </onemrva-mat-task>\n    }\n  }\n</onemrva-mat-task-list>\n","demo-task-list.component.ts":"import { Component, effect, input, 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';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {\n  OnemRvaColorDirective,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\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    OnemRvaColorDirective,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTaskListComponent extends DemoComponentBase {\n  readonly = input(false);\n  disabled = input(false);\n\n  type = input<'checkbox' | 'bubble' | 'icon'>('checkbox');\n  color = input<'' | 'error'>('');\n\n  tasks = ['Go Home', 'Go to Work', 'Go to School', 'Go to Shopping'];\n  tasksDesc = ['Get a cab, ', 'Get a taxi, ', 'Get a bus, ', 'Get a ride. '];\n\n  form: FormControl = new FormControl(false);\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}
+{"demo-task-list.component.html":"<onemrva-mat-task-list [readonly]=\"readonly()\">\n  @for (task of tasks; track $index) {\n    @if (type() === 'checkbox') {\n      <onemrva-mat-task class=\"mb\" [form]=\"form\" [color]=\"color()\">\n        <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n        <onemrva-mat-task-content>\n          <p>t{{ tasksDesc[$index] }}</p>\n        </onemrva-mat-task-content>\n      </onemrva-mat-task>\n    } @else if (type() === 'bubble') {\n      <onemrva-mat-task\n        [bubble]=\"'' + $index\"\n        [disabled]=\"disabled()\"\n        [color]=\"color()\"\n      >\n        <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n        <onemrva-mat-task-content>\n          <p>t{{ tasksDesc[$index] }}</p>\n        </onemrva-mat-task-content>\n      </onemrva-mat-task>\n    } @else if (type() === 'icon') {\n      <onemrva-mat-task\n        [icon]=\"'home'\"\n        [disabled]=\"disabled()\"\n        [color]=\"color()\"\n      >\n        <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n        <onemrva-mat-task-content>\n          <p>t{{ tasksDesc[$index] }}</p>\n        </onemrva-mat-task-content>\n      </onemrva-mat-task>\n    }\n  }\n</onemrva-mat-task-list>\n","demo-task-list.component.ts":"import { Component, effect, input, 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';\nimport {\n  OnemRvaColorDirective,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\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    OnemRvaColorDirective,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTaskListComponent extends DemoComponentBase {\n  readonly = input(false);\n  disabled = input(false);\n\n  type = input<'checkbox' | 'bubble' | 'icon'>('checkbox');\n  color = input<'' | 'error'>('');\n\n  tasks = ['Go Home', 'Go to Work', 'Go to School', 'Go to Shopping'];\n  tasksDesc = ['Get a cab, ', 'Get a taxi, ', 'Get a bus, ', 'Get a ride. '];\n\n  form: FormControl = new FormControl(false);\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}

package/assets/json/text-input.json

@@ -1 +1 @@
-{"demo-text-input.component.html":"<mat-form-field\n  [color]=\"color()\"\n  [readonly]=\"readonly()\"\n  [class]=\"showWarnHint() ? 'force-warn' : ''\"\n>\n  <mat-label>Error demo</mat-label>\n  <input matInput [formControl]=\"form\" />\n\n  <!-- You can format an error like a warning - you cannot submit the form like this with errors  -->\n  @if (form.errors && form.errors['required']) {\n    <mat-error>\n      This is a long error message displayed on multiple lines. The icon is\n      generated automatically by the type of error.\n    </mat-error>\n  }\n\n  <!--  The warn hint is used to show an error styled warning -->\n  @if (showWarnHint()) {\n    <mat-hint [color]=\"'warn'\"> Max duration is 7 days </mat-hint>\n  } @else {\n    <mat-hint>Hint</mat-hint>\n  }\n</mat-form-field>\n","demo-text-input.component.scss":"app-demo-text-input mat-form-field {\n  max-width: 200px;\n}\n","demo-text-input.component.ts":"import { Component, effect, input, 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 { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {\n  OnemRvaColorDirective,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-text-input',\n  templateUrl: './demo-text-input.component.html',\n  styleUrl: './demo-text-input.component.scss',\n  standalone: true,\n  imports: [\n    FormsModule,\n    CommonModule,\n    MatInput,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    OnemRvaReadonlyDirective,\n    OnemRvaColorDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextInputComponent extends DemoComponentBase {\n  form = new UntypedFormControl('text', [Validators.required]);\n\n  color = input<'primary' | 'warn'>('primary');\n  disabled = input(false);\n  readonly = input(false);\n  showWarnHint = input(false);\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}
+{"demo-text-input.component.html":"<mat-form-field [color]=\"color()\" [readonly]=\"readonly()\">\n  <mat-label>Error demo</mat-label>\n  <input matInput [formControl]=\"form\" />\n\n  <!-- You can format an error like a warning - you cannot submit the form like this with errors  -->\n  @if (form.errors && form.errors['required']) {\n    <mat-error>\n      This is a long error message displayed on multiple lines. The icon is\n      generated automatically by the type of error.\n    </mat-error>\n  }\n\n  <!--  The warn hint is used to show an error styled warning -->\n  <mat-hint [color]=\"hintColor()\"> Max duration is 7 days </mat-hint>\n</mat-form-field>\n","demo-text-input.component.scss":"app-demo-text-input mat-form-field {\n  max-width: 200px;\n}\n","demo-text-input.component.ts":"import { Component, effect, input, 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 { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {\n  OnemRvaColorDirective,\n  OnemRvaReadonlyDirective,\n} from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-text-input',\n  templateUrl: './demo-text-input.component.html',\n  styleUrl: './demo-text-input.component.scss',\n  standalone: true,\n  imports: [\n    FormsModule,\n    CommonModule,\n    MatInput,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    OnemRvaReadonlyDirective,\n    OnemRvaColorDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextInputComponent extends DemoComponentBase {\n  form = new UntypedFormControl('text', [Validators.required]);\n\n  color = input<'primary' | 'warn'>('primary');\n  disabled = input(false);\n  readonly = input(false);\n  hintColor = input<'primary' | 'warn'>('primary');\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}

package/assets/json/textarea.json

@@ -1 +1 @@
-{"demo-textarea.component.html":"<mat-form-field [readonly]=\"readonly\">\n  <mat-label>Textarea</mat-label>\n  <textarea\n    matInput\n    [formControl]=\"form\"\n    [cdkTextareaAutosize]=\"autoresize\"\n    style=\"min-height: 200px\"\n  >\n  </textarea>\n  <mat-hint class=\"with-counter\">\n    Hint\n    <div class=\"counter\">{{ form.value.length }} / 256</div>\n  </mat-hint>\n</mat-form-field>\n","demo-textarea.component.ts":"import { Component, effect, Input, 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';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system';\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    OnemRvaReadonlyDirective,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextareaComponent extends DemoComponentBase {\n  @Input()\n  readonly = false;\n\n  @Input()\n  disabled = false;\n\n  @Input()\n  autoresize = false;\n\n  form: FormControl = new FormControl(\n    \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuriess\",\n  );\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}
+{"demo-textarea.component.html":"<mat-form-field [readonly]=\"readonly\">\n  <mat-label>Textarea</mat-label>\n  <textarea\n    matInput\n    [formControl]=\"form\"\n    [cdkTextareaAutosize]=\"autoresize\"\n    style=\"min-height: 200px\"\n  >\n  </textarea>\n  <mat-hint class=\"with-counter\">\n    Hint\n    <div class=\"counter\">{{ form.value.length }} / 256</div>\n  </mat-hint>\n</mat-form-field>\n","demo-textarea.component.ts":"import { Component, effect, Input, 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';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\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    OnemRvaReadonlyDirective,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextareaComponent extends DemoComponentBase {\n  @Input()\n  readonly = false;\n\n  @Input()\n  disabled = false;\n\n  @Input()\n  autoresize = false;\n\n  form: FormControl = new FormControl(\n    \"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuriess\",\n  );\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}

package/assets/json/timepicker.json

@@ -1 +1 @@
-{"demo-timepicker.component.html":"<mat-form-field [readonly]=\"readonly\">\n  <mat-label>Time</mat-label>\n  <input [formControl]=\"form\" 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, effect, Input, 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';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport {\n  OnemRvaReadonlyDirective,\n  OnemrvaMatTimepickerModule,\n} from '@onemrvapublic/design-system';\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    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTimepickerComponent extends DemoComponentBase {\n  public form = new FormControl();\n\n  @Input()\n  disabled = false;\n\n  @Input()\n  readonly = false;\n\n  constructor() {\n    super();\n    this.form?.setValue(new Date());\n    this.form?.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {\n      this.output.set(\n        `${value.getHours().toString().padStart(2, '0')}:${value.getMinutes().toString().padStart(2, '0')}`,\n      );\n    });\n    effect(() => {\n      if (this.disabled) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}
+{"demo-timepicker.component.html":"<mat-form-field [readonly]=\"readonly\">\n  <mat-label>Time</mat-label>\n  <input [formControl]=\"form\" 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, effect, Input, 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';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatTimepickerModule } from '@onemrvapublic/design-system/mat-timepicker';\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    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTimepickerComponent extends DemoComponentBase {\n  public form = new FormControl();\n\n  @Input()\n  disabled = false;\n\n  @Input()\n  readonly = false;\n\n  constructor() {\n    super();\n    this.form?.setValue(new Date());\n    this.form?.valueChanges.pipe(takeUntilDestroyed()).subscribe(value => {\n      this.output.set(\n        `${value.getHours().toString().padStart(2, '0')}:${value.getMinutes().toString().padStart(2, '0')}`,\n      );\n    });\n    effect(() => {\n      if (this.disabled) this.form.disable();\n      else this.form.enable();\n    });\n  }\n}\n"}

package/assets/json/toast.json

@@ -1 +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"}
+{"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/mat-toast';\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"}