@onemrvapublic/design-system-demos 21.1.1-develop.1 → 21.1.1-develop.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@onemrvapublic/design-system-demos",
-    "version": "v21.1.1-develop.1",
+    "version": "v21.1.1-develop.4",
     "description": "Demos for the Design System Onem/Rva",
     "publishConfig": {
         "access": "public"

package/assets/json/vertical-stepper.json

@@ -1 +0,0 @@
-{"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"}