@onemrvapublic/design-system-demos 20.11.2 → 21.0.0-develop.1

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/jsonform.json

@@ -1 +1 @@
-{"jsonform.html":"<jsonforms\n  [data]=\"data\"\n  [schema]=\"schema\"\n  [uischema]=\"uischema\"\n  [renderers]=\"renderers\"\n></jsonforms>\n","jsonform.ts":"import { Component } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { JsonFormsModule } from '@jsonforms/angular';\nimport { angularMaterialRenderers } from '@jsonforms/angular-material';\nimport { uischema } from './uischema.form';\nimport { schema } from './schema.form';\nimport {\n  CheckboxRendererComponent,\n  checkboxTester,\n  customLabelTester,\n  DatepickerRendererComponent,\n  DatePickerRendererTester,\n  enumControlTester,\n  EnumRendererComponent,\n  ibanControlTester,\n  IbanRendererComponent,\n  LabelRendererComponent,\n  nissControlTester,\n  NissRendererComponent,\n  phoneControllerTester,\n  PhoneRendererComponent,\n  RadioButtonRendererComponent,\n  radioButtonTester,\n  ReadonlyControlRendererComponent,\n  readonlyControlTester,\n} from '@onemrvapublic/design-system-jsonforms';\n\n@Component({\n  selector: 'app-demo-jsonform',\n  templateUrl: './jsonform.html',\n  standalone: true,\n  imports: [JsonFormsModule],\n})\nexport class DemoJsonformsComponent extends DemoComponentBase {\n  renderers = [\n    ...angularMaterialRenderers,\n    {\n      tester: readonlyControlTester,\n      renderer: ReadonlyControlRendererComponent,\n    },\n    { tester: enumControlTester, renderer: EnumRendererComponent },\n    { tester: nissControlTester, renderer: NissRendererComponent },\n    { tester: ibanControlTester, renderer: IbanRendererComponent },\n    { tester: customLabelTester, renderer: LabelRendererComponent },\n    { tester: radioButtonTester, renderer: RadioButtonRendererComponent },\n    { tester: checkboxTester, renderer: CheckboxRendererComponent },\n    { tester: phoneControllerTester, renderer: PhoneRendererComponent },\n    { tester: DatePickerRendererTester, renderer: DatepickerRendererComponent },\n  ];\n\n  uischema = uischema;\n  schema = schema;\n\n  data = {};\n}\n","schema.form.ts":"export const schema = {\n  type: 'object',\n  properties: {\n    exampleRadioEnum: {\n      type: 'string',\n      enum: ['One', 'Two', 'Three'],\n    },\n    name: {\n      type: 'string',\n      minLength: 1,\n    },\n    done: {\n      type: 'boolean',\n    },\n    due_date: {\n      type: 'string',\n      format: 'date',\n    },\n    recurrence: {\n      type: 'string',\n      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],\n    },\n    phone: {\n      type: 'string',\n    },\n    niss: {\n      type: 'string',\n    },\n    iban: {\n      type: 'string',\n    },\n  },\n  required: ['name', 'due_date', 'phone'],\n};\n","uischema.form.ts":"export const uischema = {\n  type: 'VerticalLayout',\n  elements: [\n    {\n      type: 'Control',\n      scope: '#/properties/exampleRadioEnum',\n      options: {\n        format: 'radio',\n      },\n    },\n    {\n      type: 'Control',\n      label: false,\n      scope: '#/properties/done',\n    },\n    {\n      type: 'HorizontalLayout',\n      elements: [\n        {\n          type: 'Control',\n          scope: '#/properties/name',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/phone',\n        },\n      ],\n    },\n    {\n      type: 'HorizontalLayout',\n      elements: [\n        {\n          type: 'Control',\n          scope: '#/properties/due_date',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/niss',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/iban',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/recurrence',\n        },\n      ],\n    },\n  ],\n};\n"}
+{"jsonform.html":"<jsonforms\n  [data]=\"data\"\n  [schema]=\"schema\"\n  [uischema]=\"uischema\"\n  [renderers]=\"renderers\"\n/>\n","jsonform.ts":"import { Component } from '@angular/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { JsonFormsModule } from '@jsonforms/angular';\nimport { angularMaterialRenderers } from '@jsonforms/angular-material';\nimport { uischema } from './uischema.form';\nimport { schema } from './schema.form';\nimport {\n  CheckboxRendererComponent,\n  checkboxTester,\n  customLabelTester,\n  DatepickerRendererComponent,\n  DatePickerRendererTester,\n  enumControlTester,\n  EnumRendererComponent,\n  ibanControlTester,\n  IbanRendererComponent,\n  LabelRendererComponent,\n  nissControlTester,\n  NissRendererComponent,\n  phoneControllerTester,\n  PhoneRendererComponent,\n  RadioButtonRendererComponent,\n  radioButtonTester,\n  ReadonlyControlRendererComponent,\n  readonlyControlTester,\n} from '@onemrvapublic/design-system-jsonforms';\n\n@Component({\n  selector: 'app-demo-jsonform',\n  templateUrl: './jsonform.html',\n  standalone: true,\n  imports: [JsonFormsModule],\n})\nexport class DemoJsonformsComponent extends DemoComponentBase {\n  renderers = [\n    ...angularMaterialRenderers,\n    {\n      tester: readonlyControlTester,\n      renderer: ReadonlyControlRendererComponent,\n    },\n    { tester: enumControlTester, renderer: EnumRendererComponent },\n    { tester: nissControlTester, renderer: NissRendererComponent },\n    { tester: ibanControlTester, renderer: IbanRendererComponent },\n    { tester: customLabelTester, renderer: LabelRendererComponent },\n    { tester: radioButtonTester, renderer: RadioButtonRendererComponent },\n    { tester: checkboxTester, renderer: CheckboxRendererComponent },\n    { tester: phoneControllerTester, renderer: PhoneRendererComponent },\n    { tester: DatePickerRendererTester, renderer: DatepickerRendererComponent },\n  ];\n\n  uischema = uischema;\n  schema = schema;\n\n  data = {};\n}\n","schema.form.ts":"export const schema = {\n  type: 'object',\n  properties: {\n    exampleRadioEnum: {\n      type: 'string',\n      enum: ['One', 'Two', 'Three'],\n    },\n    name: {\n      type: 'string',\n      minLength: 1,\n    },\n    done: {\n      type: 'boolean',\n    },\n    due_date: {\n      type: 'string',\n      format: 'date',\n    },\n    recurrence: {\n      type: 'string',\n      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],\n    },\n    phone: {\n      type: 'string',\n    },\n    niss: {\n      type: 'string',\n    },\n    iban: {\n      type: 'string',\n    },\n  },\n  required: ['name', 'due_date', 'phone'],\n};\n","uischema.form.ts":"export const uischema = {\n  type: 'VerticalLayout',\n  elements: [\n    {\n      type: 'Control',\n      scope: '#/properties/exampleRadioEnum',\n      options: {\n        format: 'radio',\n      },\n    },\n    {\n      type: 'Control',\n      label: false,\n      scope: '#/properties/done',\n    },\n    {\n      type: 'HorizontalLayout',\n      elements: [\n        {\n          type: 'Control',\n          scope: '#/properties/name',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/phone',\n        },\n      ],\n    },\n    {\n      type: 'HorizontalLayout',\n      elements: [\n        {\n          type: 'Control',\n          scope: '#/properties/due_date',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/niss',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/iban',\n        },\n        {\n          type: 'Control',\n          scope: '#/properties/recurrence',\n        },\n      ],\n    },\n  ],\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    routerLink=\"/demos\"\n    [routerLinkActiveOptions]=\"{ exact: false }\"\n    dataCy=\"Components\"\n    [label]=\"'Components' | translate\"\n  />\n  <onemrva-layout-route\n    routerLink=\"/news\"\n    [routerLinkActiveOptions]=\"{ exact: true }\"\n    dataCy=\"News\"\n    [label]=\"'News' | translate\"\n  />\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 />\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 { 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, ViewEncapsulation, input } 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  readonly color = input<OnemrvaMatColor>('');\n\n  readonly sticker = input(false);\n}\n"}

package/assets/json/multiselect.json

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

package/assets/json/not-found.json

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

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

package/assets/json/paginator.json

@@ -1 +1 @@
-{"demo-paginator.component.html":"<h3>type = 'default'</h3>\n\n<p>\n  The default paginator shows pages 5 by 5 except if there are only 6 remaining\n  pages. Buttons '...' are fast back/forward.\n</p>\n\n<onemrva-mat-paginator\n  [pageIndex]=\"pageIndex\"\n  [pageSize]=\"10\"\n  [length]=\"69\"\n  (onRequestPage)=\"changePage($event)\"\n  recordKey=\"records.per.page\"\n  #paginator\n>\n</onemrva-mat-paginator>\n\n<br />\n\n<h3>type = 'complex'</h3>\n\n<p>\n  To get the complex paginator, you need to set the type to 'complex'. It shows\n  pages 5 by 5 except if there are max 7 remaining pages. Buttons '...' are fast\n  back/forward. First and last pages are always reachable.\n</p>\n\n<onemrva-mat-paginator\n  [pageIndex]=\"pageIndex2\"\n  [pageSize]=\"20\"\n  [length]=\"339\"\n  type=\"complex\"\n  recordKey=\"records.per.page\"\n  (onRequestPage)=\"changePage($event, 'complex')\"\n  #paginator\n>\n</onemrva-mat-paginator>\n","demo-paginator.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { TranslateModule } from '@ngx-translate/core';\nimport {\n  OnemrvaMatPaginatorComponent,\n  OnemrvaMatPaginatorModule,\n} from '@onemrvapublic/design-system/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\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","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, Pipe, PipeTransform, input } 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  color = input<OnemrvaMatColor>('primary');\n\n  onColorChange(event: Event) {\n    const select = event.target as HTMLSelectElement;\n    // TODO: overrite error fix\n    // @ts-expect-error overwrite error\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  />\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, ViewEncapsulation, input } 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  readonly position = input<\n    '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()\" />\n","demo-progress-bar.component.ts":"import { Component, signal, ViewEncapsulation } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\nimport { interval } 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 = signal(0);\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.set(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/rxjs-combine-operators.json

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

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

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

package/assets/json/select.json

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

package/assets/json/selectable-box.json

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

package/assets/json/side-menu.json

@@ -1 +1 @@
-{"demo-side-menu.component.html":"<onemrva-mat-side-menu\n  [menuHeaderKey]=\"menuHeaderKey\"\n  [menus]=\"menus\"\n  [currentMenu]=\"router.url\"\n  (onSelectOption)=\"selectOption($event)\"\n>\n</onemrva-mat-side-menu>\n","demo-side-menu.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { Router } from '@angular/router';\nimport {\n  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","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        }\n        @if (contentLoaded) {\n          <onemrva-mat-avatar type=\"circle\" [size]=\"'xlarge'\" initials=\"TS\" />\n        }\n      </div>\n      <div class=\"col-auto\">\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"h2\" />\n        }\n        @if (contentLoaded) {\n          <h2>This is a loaded title</h2>\n        }\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"h4\" />\n        }\n        @if (contentLoaded) {\n          <h4>This is a loaded subtitle</h4>\n        }\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"h4\" />\n        }\n        @if (contentLoaded) {\n          <p>This is another loaded text</p>\n        }\n        @if (!contentLoaded) {\n          <onemrva-mat-skeleton type=\"button\" class=\"float-right\" />\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/spinner.json

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

package/assets/json/sticker.json

@@ -1 +1 @@
-{"demo-sticker.component.html":"<onemrva-mat-sticker [color]=\"color\"> Default </onemrva-mat-sticker>\n","demo-sticker.component.ts":"import { Component, Input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/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, ViewEncapsulation, input } 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  readonly color = input<OnemrvaMatColor>('');\n}\n"}