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

package/assets/json/text-input.json

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

package/assets/json/textarea.json

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

package/assets/json/timepicker.json

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

package/assets/json/toast.json

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

package/assets/json/toolbar.json

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

package/assets/json/tooltip.json

@@ -1 +1 @@
-{"demo-tooltip.component.html":"@if (html()) {\n  <mat-icon\n    OnemrvaMatTooltip\n    [position]=\"position()\"\n    class=\"{{ filled() ? 'filled' : '' }}\"\n    color=\"info\"\n    [contentTemplate]=\"tooltipContent\"\n    [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n    [attr.data-cy-tooltipcontent]=\"'data-cy-tooltip-content'\"\n  >\n    info\n  </mat-icon>\n  <ng-template #tooltipContent>\n    I am a custom content with html (position: <b>right</b>) but there are 3\n    other positions\n    <ul>\n      <li>left</li>\n      <li>top</li>\n      <li>bottom</li>\n    </ul>\n  </ng-template>\n} @else {\n  <mat-icon\n    matTooltipHideDelay=\"500000000\"\n    class=\"{{ filled() ? 'filled' : '' }}\"\n    color=\"info\"\n    [matTooltipPosition]=\"position()\"\n    matTooltip=\"Here you can write some information on the right\"\n    aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n  >\n    info\n  </mat-icon>\n}\n","demo-tooltip.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MatTooltipModule, TooltipPosition } from '@angular/material/tooltip';\nimport { OnemrvaMatTooltipModule } from '@onemrvapublic/design-system/mat-tooltip';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-tooltip',\n  templateUrl: './demo-tooltip.component.html',\n  standalone: true,\n  imports: [\n    CommonModule,\n    MatTooltipModule,\n    OnemrvaMatTooltipModule,\n    MatIconModule,\n  ],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTooltipComponent extends DemoComponentBase {\n  position = input<TooltipPosition>('above');\n  filled = input<boolean>(false);\n  html = input<boolean>(false);\n}\n"}
+{"demo-tooltip.component.html":"@if (html()) {\n  <mat-icon\n    OnemrvaMatTooltip\n    [position]=\"position()\"\n    class=\"{{ filled() ? 'filled' : '' }}\"\n    color=\"info\"\n    [contentTemplate]=\"tooltipContent\"\n    [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n    [attr.data-cy-tooltipcontent]=\"'data-cy-tooltip-content'\"\n  >\n    info\n  </mat-icon>\n  <ng-template #tooltipContent>\n    I am a custom content with html (position: <b>right</b>) but there are 3\n    other positions\n    <ul>\n      <li>left</li>\n      <li>top</li>\n      <li>bottom</li>\n    </ul>\n  </ng-template>\n} @else {\n  <mat-icon\n    matTooltipHideDelay=\"500000000\"\n    class=\"{{ filled() ? 'filled' : '' }}\"\n    color=\"info\"\n    [matTooltipPosition]=\"position()\"\n    matTooltip=\"Here you can write some information on the right\"\n    aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n  >\n    info\n  </mat-icon>\n}\n","demo-tooltip.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\n\nimport { MatTooltipModule, TooltipPosition } from '@angular/material/tooltip';\nimport { OnemrvaMatTooltipModule } from '@onemrvapublic/design-system/mat-tooltip';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-tooltip',\n  templateUrl: './demo-tooltip.component.html',\n  standalone: true,\n  imports: [MatTooltipModule, OnemrvaMatTooltipModule, MatIconModule],\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTooltipComponent extends DemoComponentBase {\n  position = input<TooltipPosition>('above');\n  filled = input<boolean>(false);\n  html = input<boolean>(false);\n}\n"}

package/assets/json/typography.json

@@ -1 +1 @@
-{"demo-typography.component.html":"<h1>This is an H1</h1>\n\n<h2>This is an H2</h2>\n\n<h3>This is an H3</h3>\n\n<h4>This is an H4</h4>\n\n<h5>This is an H5</h5>\n\n<h6>This is an H6</h6>\n\n<div class=\"typography-container\">\n  @for (category of typographyCategories; track category.label) {\n    <div class=\"typography-section\">\n      <h3>{{ category.label }}</h3>\n      <div\n        class=\"typography-item\"\n        *ngFor=\"\n          let style of typographyStyles | filter: 'category' : category.value\n        \"\n      >\n        <div class=\"typography-details\">\n          <div\n            class=\"typography-sample\"\n            [style.font]=\"\n              style.weight +\n              ' ' +\n              style.size +\n              '/' +\n              style.lineHeight +\n              ' ' +\n              style.font\n            \"\n          >\n            {{ style.name }}\n          </div>\n          <div class=\"typography-specs\">\n            <div>Size: {{ style.size }} ({{ style.sizePx }}px)</div>\n            <div>\n              Line Height: {{ style.lineHeight }} ({{ style.lineHeightPx }}px)\n            </div>\n            <div>Weight: {{ style.weight }}</div>\n            <div>Font: {{ style.font }}</div>\n          </div>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n","demo-typography.component.scss":".typography-container {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n  padding: 1rem;\n}\n\n.typography-section {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n\n  h3 {\n    color: var(--mat-sys-on-surface);\n    font-size: 1.25rem;\n    font-weight: 600;\n    margin: 0;\n  }\n}\n\n.typography-item {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  padding: 1rem;\n  background-color: var(--mat-sys-surface-container);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.typography-name {\n  color: var(--mat-sys-on-surface);\n  font-size: 1.1rem;\n  font-weight: 500;\n}\n\n.typography-details {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.typography-sample {\n  padding: 1rem;\n  background-color: var(--mat-sys-surface);\n  border-radius: 4px;\n  color: var(--mat-sys-on-surface);\n}\n\n.typography-specs {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 0.5rem;\n  font-family: monospace;\n  font-size: 0.9rem;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n@media (max-width: 768px) {\n  .typography-specs {\n    grid-template-columns: 1fr;\n  }\n}\n","demo-typography.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FilterPipe } from '../palette/demo-palette.component';\n\ninterface TypographyStyle {\n  name: string;\n  size: string;\n  sizePx: number;\n  lineHeight: string;\n  lineHeightPx: number;\n  weight: number;\n  font: string;\n  category: 'body' | 'display' | 'headline' | 'label' | 'title';\n}\n\n@Component({\n  selector: 'app-demo-typography',\n  templateUrl: './demo-typography.component.html',\n  styleUrls: ['./demo-typography.component.scss'],\n  standalone: true,\n  imports: [FilterPipe, CommonModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTypographyComponent extends DemoComponentBase {\n  typographyStyles: TypographyStyle[] = [\n    // Body Styles\n    {\n      name: 'Body Large',\n      size: '1.125rem',\n      sizePx: 18,\n      lineHeight: '1.625rem',\n      lineHeightPx: 26,\n      weight: 400,\n      font: 'Source Sans Pro',\n      category: 'body',\n    },\n    {\n      name: 'Body Medium',\n      size: '1rem',\n      sizePx: 16,\n      lineHeight: '1.625rem',\n      lineHeightPx: 26,\n      weight: 400,\n      font: 'Source Sans Pro',\n      category: 'body',\n    },\n    {\n      name: 'Body Small',\n      size: '0.875rem',\n      sizePx: 14,\n      lineHeight: '1.3125rem',\n      lineHeightPx: 21,\n      weight: 400,\n      font: 'Source Sans Pro',\n      category: 'body',\n    },\n    // Display Styles\n    {\n      name: 'Display Large',\n      size: '9.25rem',\n      sizePx: 148,\n      lineHeight: '11.25rem',\n      lineHeightPx: 180,\n      weight: 700,\n      font: 'Poppins',\n      category: 'display',\n    },\n    {\n      name: 'Display Medium',\n      size: '4.5rem',\n      sizePx: 72,\n      lineHeight: '6.25rem',\n      lineHeightPx: 100,\n      weight: 700,\n      font: 'Poppins',\n      category: 'display',\n    },\n    {\n      name: 'Display Small',\n      size: '2rem',\n      sizePx: 32,\n      lineHeight: '3.25rem',\n      lineHeightPx: 52,\n      weight: 600,\n      font: 'Poppins',\n      category: 'display',\n    },\n    // Headline Styles\n    {\n      name: 'Headline Large',\n      size: '1.625rem',\n      sizePx: 26,\n      lineHeight: '2.75rem',\n      lineHeightPx: 44,\n      weight: 600,\n      font: 'Poppins',\n      category: 'headline',\n    },\n    {\n      name: 'Headline Medium',\n      size: '1.5rem',\n      sizePx: 24,\n      lineHeight: '2.5rem',\n      lineHeightPx: 40,\n      weight: 600,\n      font: 'Poppins',\n      category: 'headline',\n    },\n    {\n      name: 'Headline Small',\n      size: '1.25rem',\n      sizePx: 20,\n      lineHeight: '2.25rem',\n      lineHeightPx: 36,\n      weight: 600,\n      font: 'Poppins',\n      category: 'headline',\n    },\n    // Label Styles\n    {\n      name: 'Label Large',\n      size: '1rem',\n      sizePx: 16,\n      lineHeight: '1.3125rem',\n      lineHeightPx: 21,\n      weight: 500,\n      font: 'Poppins',\n      category: 'label',\n    },\n    {\n      name: 'Label Medium',\n      size: '0.875rem',\n      sizePx: 14,\n      lineHeight: '1.3125rem',\n      lineHeightPx: 21,\n      weight: 400,\n      font: 'Poppins',\n      category: 'label',\n    },\n    {\n      name: 'Label Small',\n      size: '0.75rem',\n      sizePx: 12,\n      lineHeight: '1.125rem',\n      lineHeightPx: 18,\n      weight: 400,\n      font: 'Source Sans Pro',\n      category: 'label',\n    },\n    // Title Styles\n    {\n      name: 'Title Large',\n      size: '1.125rem',\n      sizePx: 18,\n      lineHeight: '2rem',\n      lineHeightPx: 32,\n      weight: 600,\n      font: 'Poppins',\n      category: 'title',\n    },\n    {\n      name: 'Title Medium',\n      size: '1rem',\n      sizePx: 16,\n      lineHeight: '1.75rem',\n      lineHeightPx: 28,\n      weight: 600,\n      font: 'Poppins',\n      category: 'title',\n    },\n    {\n      name: 'Title Small',\n      size: '0.75rem',\n      sizePx: 12,\n      lineHeight: '1.3125rem',\n      lineHeightPx: 21,\n      weight: 600,\n      font: 'Poppins',\n      category: 'title',\n    },\n  ];\n\n  typographyCategories = [\n    { value: 'body', label: 'Body Styles' },\n    { value: 'display', label: 'Display Styles' },\n    { value: 'headline', label: 'Headline Styles' },\n    { value: 'label', label: 'Label Styles' },\n    { value: 'title', label: 'Title Styles' },\n  ];\n}\n"}
+{"demo-typography.component.html":"<h1>This is an H1</h1>\n\n<h2>This is an H2</h2>\n\n<h3>This is an H3</h3>\n\n<h4>This is an H4</h4>\n\n<h5>This is an H5</h5>\n\n<h6>This is an H6</h6>\n\n<div class=\"typography-container\">\n  @for (category of typographyCategories; track category.label) {\n    <div class=\"typography-section\">\n      <h3>{{ category.label }}</h3>\n      @for (\n        style of typographyStyles | filter: 'category' : category.value;\n        track style\n      ) {\n        <div class=\"typography-item\">\n          <div class=\"typography-details\">\n            <div\n              class=\"typography-sample\"\n              [style.font]=\"\n                style.weight +\n                ' ' +\n                style.size +\n                '/' +\n                style.lineHeight +\n                ' ' +\n                style.font\n              \"\n            >\n              {{ style.name }}\n            </div>\n            <div class=\"typography-specs\">\n              <div>Size: {{ style.size }} ({{ style.sizePx }}px)</div>\n              <div>\n                Line Height: {{ style.lineHeight }} ({{ style.lineHeightPx }}px)\n              </div>\n              <div>Weight: {{ style.weight }}</div>\n              <div>Font: {{ style.font }}</div>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n","demo-typography.component.scss":".typography-container {\n  display: flex;\n  flex-direction: column;\n  gap: 2rem;\n  padding: 1rem;\n}\n\n.typography-section {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n\n  h3 {\n    color: var(--mat-sys-on-surface);\n    font-size: 1.25rem;\n    font-weight: 600;\n    margin: 0;\n  }\n}\n\n.typography-item {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n  padding: 1rem;\n  background-color: var(--mat-sys-surface-container);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.typography-name {\n  color: var(--mat-sys-on-surface);\n  font-size: 1.1rem;\n  font-weight: 500;\n}\n\n.typography-details {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.typography-sample {\n  padding: 1rem;\n  background-color: var(--mat-sys-surface);\n  border-radius: 4px;\n  color: var(--mat-sys-on-surface);\n}\n\n.typography-specs {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 0.5rem;\n  font-family: monospace;\n  font-size: 0.9rem;\n  color: var(--mat-sys-on-surface-variant);\n}\n\n@media (max-width: 768px) {\n  .typography-specs {\n    grid-template-columns: 1fr;\n  }\n}\n","demo-typography.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { FilterPipe } from '../palette/demo-palette.component';\n\ninterface TypographyStyle {\n  name: string;\n  size: string;\n  sizePx: number;\n  lineHeight: string;\n  lineHeightPx: number;\n  weight: number;\n  font: string;\n  category: 'body' | 'display' | 'headline' | 'label' | 'title';\n}\n\n@Component({\n  selector: 'app-demo-typography',\n  templateUrl: './demo-typography.component.html',\n  styleUrls: ['./demo-typography.component.scss'],\n  standalone: true,\n  imports: [FilterPipe],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTypographyComponent extends DemoComponentBase {\n  typographyStyles: TypographyStyle[] = [\n    // Body Styles\n    {\n      name: 'Body Large',\n      size: '1.125rem',\n      sizePx: 18,\n      lineHeight: '1.625rem',\n      lineHeightPx: 26,\n      weight: 400,\n      font: 'Source Sans Pro',\n      category: 'body',\n    },\n    {\n      name: 'Body Medium',\n      size: '1rem',\n      sizePx: 16,\n      lineHeight: '1.625rem',\n      lineHeightPx: 26,\n      weight: 400,\n      font: 'Source Sans Pro',\n      category: 'body',\n    },\n    {\n      name: 'Body Small',\n      size: '0.875rem',\n      sizePx: 14,\n      lineHeight: '1.3125rem',\n      lineHeightPx: 21,\n      weight: 400,\n      font: 'Source Sans Pro',\n      category: 'body',\n    },\n    // Display Styles\n    {\n      name: 'Display Large',\n      size: '9.25rem',\n      sizePx: 148,\n      lineHeight: '11.25rem',\n      lineHeightPx: 180,\n      weight: 700,\n      font: 'Poppins',\n      category: 'display',\n    },\n    {\n      name: 'Display Medium',\n      size: '4.5rem',\n      sizePx: 72,\n      lineHeight: '6.25rem',\n      lineHeightPx: 100,\n      weight: 700,\n      font: 'Poppins',\n      category: 'display',\n    },\n    {\n      name: 'Display Small',\n      size: '2rem',\n      sizePx: 32,\n      lineHeight: '3.25rem',\n      lineHeightPx: 52,\n      weight: 600,\n      font: 'Poppins',\n      category: 'display',\n    },\n    // Headline Styles\n    {\n      name: 'Headline Large',\n      size: '1.625rem',\n      sizePx: 26,\n      lineHeight: '2.75rem',\n      lineHeightPx: 44,\n      weight: 600,\n      font: 'Poppins',\n      category: 'headline',\n    },\n    {\n      name: 'Headline Medium',\n      size: '1.5rem',\n      sizePx: 24,\n      lineHeight: '2.5rem',\n      lineHeightPx: 40,\n      weight: 600,\n      font: 'Poppins',\n      category: 'headline',\n    },\n    {\n      name: 'Headline Small',\n      size: '1.25rem',\n      sizePx: 20,\n      lineHeight: '2.25rem',\n      lineHeightPx: 36,\n      weight: 600,\n      font: 'Poppins',\n      category: 'headline',\n    },\n    // Label Styles\n    {\n      name: 'Label Large',\n      size: '1rem',\n      sizePx: 16,\n      lineHeight: '1.3125rem',\n      lineHeightPx: 21,\n      weight: 500,\n      font: 'Poppins',\n      category: 'label',\n    },\n    {\n      name: 'Label Medium',\n      size: '0.875rem',\n      sizePx: 14,\n      lineHeight: '1.3125rem',\n      lineHeightPx: 21,\n      weight: 400,\n      font: 'Poppins',\n      category: 'label',\n    },\n    {\n      name: 'Label Small',\n      size: '0.75rem',\n      sizePx: 12,\n      lineHeight: '1.125rem',\n      lineHeightPx: 18,\n      weight: 400,\n      font: 'Source Sans Pro',\n      category: 'label',\n    },\n    // Title Styles\n    {\n      name: 'Title Large',\n      size: '1.125rem',\n      sizePx: 18,\n      lineHeight: '2rem',\n      lineHeightPx: 32,\n      weight: 600,\n      font: 'Poppins',\n      category: 'title',\n    },\n    {\n      name: 'Title Medium',\n      size: '1rem',\n      sizePx: 16,\n      lineHeight: '1.75rem',\n      lineHeightPx: 28,\n      weight: 600,\n      font: 'Poppins',\n      category: 'title',\n    },\n    {\n      name: 'Title Small',\n      size: '0.75rem',\n      sizePx: 12,\n      lineHeight: '1.3125rem',\n      lineHeightPx: 21,\n      weight: 600,\n      font: 'Poppins',\n      category: 'title',\n    },\n  ];\n\n  typographyCategories = [\n    { value: 'body', label: 'Body Styles' },\n    { value: 'display', label: 'Display Styles' },\n    { value: 'headline', label: 'Headline Styles' },\n    { value: 'label', label: 'Label Styles' },\n    { value: 'title', label: 'Title Styles' },\n  ];\n}\n"}

package/assets/json/vertical-stepper.json

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