@onemrvapublic/design-system-demos 20.11.1-develop.5 → 20.11.1-develop.7

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

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

package/assets/json/language-switcher.json

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

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  <!-- Notification is picked up, inside the body  -->\n  <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n    Hello <a href=\"#\">world</a>\n  </onemrva-mat-notification>\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';\nimport { OnemrvaMatNotificationComponent } from '@onemrvapublic/design-system/mat-notification';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\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    OnemRvaColorDirective,\n    OnemrvaMatNotificationComponent,\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  <!-- Notification is picked up, inside the body  -->\n  <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n    Hello <a href=\"#\">world</a>\n  </onemrva-mat-notification>\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';\n\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';\nimport { OnemrvaMatNotificationComponent } from '@onemrvapublic/design-system/mat-notification';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [\n    RouterOutlet,\n    OnemrvaLayoutModule,\n    MatIcon,\n    MatTooltip,\n    MatIconButton,\n    TranslateModule,\n    OverlayModule,\n    RouterLink,\n    MatMenuItem,\n    OnemRvaColorDirective,\n    OnemrvaMatNotificationComponent,\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/link.json

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

package/assets/json/palette.json

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

package/assets/json/panel.json

@@ -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 { 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"}
+{"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\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';\n\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    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/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"}
+{"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';\n\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    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/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"}
+{"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';\n\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: [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, 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"}
+{"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';\n\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { MatInputModule } from '@angular/material/input';\nimport { OnemrvaMatProgressBarComponent } from '@onemrvapublic/design-system/mat-progress-bar';\n\nimport { take } from 'rxjs/operators';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-progress-bar',\n  templateUrl: 'demo-progress-bar.component.html',\n\n  standalone: true,\n  imports: [\n    ReactiveFormsModule,\n    MatFormFieldModule,\n    MatInputModule,\n    OnemrvaMatProgressBarComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoProgressBarComponent extends DemoComponentBase {\n  value$: 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/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"}
+{"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';\n\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: [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/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  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"}
+{"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';\n\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: [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/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"}
+{"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';\n\nimport { OnemrvaMatSkeletonModule } from '@onemrvapublic/design-system/mat-skeleton';\nimport { OnemrvaMatAvatarModule } from '@onemrvapublic/design-system/mat-avatar';\nimport { MatButtonModule } from '@angular/material/button';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system/mat-panel';\n\nimport { MatCardModule } from '@angular/material/card';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-skeleton',\n  templateUrl: 'demo-skeleton.component.html',\n\n  standalone: true,\n  imports: [\n    OnemrvaMatSkeletonModule,\n    OnemrvaMatAvatarModule,\n    MatButtonModule,\n    OnemrvaMatPanelModule,\n    OnemRvaSizeDirective,\n    MatCardModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSkeletonComponent extends DemoComponentBase {\n  contentLoaded = false;\n\n  intervalId: number | null = null;\n  takeFourNumbers$ = new Subscription();\n}\n"}

package/assets/json/slide-toggle.json

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

package/assets/json/spacing.json

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

package/assets/json/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/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"}
+{"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';\n\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: [OnemrvaMatStickerModule, FormsModule, OnemRvaColorDirective],\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/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"}
+{"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';\n\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    ReactiveFormsModule,\n    MatButtonModule,\n    MatInputModule,\n    MatFormFieldModule,\n    MatStepperModule,\n    OnemrvaMatStepperModule,\n  ],\n  providers: [\n    {\n      provide: STEPPER_GLOBAL_OPTIONS,\n      useValue: { showError: true, displayDefaultIndicatorType: false },\n    },\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSummaryStepperComponent extends DemoComponentBase {\n  public linear = true;\n  _formBuilder = inject(FormBuilder);\n\n  firstFormGroup = this._formBuilder.group({\n    firstCtrl: ['', Validators.required],\n  });\n  secondFormGroup = this._formBuilder.group({\n    secondCtrl: ['', Validators.required],\n  });\n  thirdFormGroup = this._formBuilder.group({\n    thirdCtrl: ['', Validators.required],\n  });\n\n  selectionChanged($event: StepperSelectionEvent) {\n    console.log($event);\n  }\n}\n"}

package/assets/json/tab.json

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

package/assets/json/table.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/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"}
+{"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 { 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    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    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/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"}
+{"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';\n\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    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"}