@onemrvapublic/design-system-demos 20.11.1-develop.1 → 20.11.1-develop.10

package/assets/json/grid.json

@@ -1 +1 @@
-{"demo-grid.component.html":"<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"content\">col-6</div>\n    </div>\n  </div>\n  <div class=\"row gy gx\">\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n    <div class=\"col-3\">\n      <div class=\"content\">col-3</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n  </div>\n  <div class=\"row gy\">\n    <div class=\"col-4 offset-4\">\n      <div class=\"content\">col offset-3</div>\n    </div>\n    <div class=\"col-2 offset-auto\">\n      <div class=\"content\">col-2 offset-auto</div>\n    </div>\n  </div>\n  <p>Responsive:</p>\n  <div class=\"row\">\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n  </div>\n</div>\n","demo-grid.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-grid',\n  templateUrl: './demo-grid.component.html',\n\n  standalone: true,\n  imports: [CommonModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoGridComponent extends DemoComponentBase {}\n"}
+{"demo-grid.component.html":"<div class=\"container\">\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n    <div class=\"col\">\n      <div class=\"content\">col</div>\n    </div>\n  </div>\n  <div class=\"row\">\n    <div class=\"col-1\">\n      <div class=\"content\">col-1</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"content\">col-6</div>\n    </div>\n  </div>\n  <div class=\"row gy gx\">\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n    <div class=\"col-3\">\n      <div class=\"content\">col-3</div>\n    </div>\n    <div class=\"col-5\">\n      <div class=\"content\">col-5</div>\n    </div>\n    <div class=\"col-2\">\n      <div class=\"content\">col-2</div>\n    </div>\n  </div>\n  <div class=\"row gy\">\n    <div class=\"col-4 offset-4\">\n      <div class=\"content\">col offset-3</div>\n    </div>\n    <div class=\"col-2 offset-auto\">\n      <div class=\"content\">col-2 offset-auto</div>\n    </div>\n  </div>\n  <p>Responsive:</p>\n  <div class=\"row\">\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n    <div class=\"col-12-small col-6-medium col-3-large\">\n      <div class=\"content\">col-12-small col-6-medium col-3-large</div>\n    </div>\n  </div>\n</div>\n","demo-grid.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\n\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-grid',\n  templateUrl: './demo-grid.component.html',\n\n  standalone: true,\n  imports: [],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoGridComponent extends DemoComponentBase {}\n"}

package/assets/json/horizontal-stepper.json

@@ -1 +1 @@
-{"demo-horizontal-stepper.component.html":"<mat-stepper #stepper1 [linear]=\"linear\" headerPosition=\"top\">\n  <mat-step\n    [stepControl]=\"firstFormGroup\"\n    errorMessage=\"Name is required.\"\n    aria-label=\"Fill out your name\"\n  >\n    <form [formGroup]=\"firstFormGroup\">\n      <ng-template matStepLabel>Fill out your name</ng-template>\n      <mat-form-field>\n        <mat-label>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>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-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\n    [stepControl]=\"secondFormGroup\"\n    errorMessage=\"Address is required.\"\n    aria-label=\"Fill out your address\"\n  >\n    <form [formGroup]=\"secondFormGroup\">\n      <ng-template matStepLabel>Fill out your address</ng-template>\n      <mat-form-field>\n        <mat-label>Address</mat-label>\n        <input\n          matInput\n          placeholder=\"Ex. 1 Main St, New York, NY\"\n          formControlName=\"secondCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-button\n          mat-stroked-button\n          color=\"primary\"\n          matStepperPrevious\n        >\n          Back\n        </button>\n        <button\n          mat-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    <p>You are now done.</p>\n    <div>\n      <button mat-button mat-stroked-button color=\"primary\" matStepperPrevious>\n        Back\n      </button>\n      <button mat-button color=\"primary\" (click)=\"stepper1.reset()\">\n        Reset\n      </button>\n    </div>\n  </mat-step>\n</mat-stepper>\n","demo-horizontal-stepper.component.ts":"import { Component, inject } 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-horizontal-stepper',\n  templateUrl: './demo-horizontal-stepper.component.html',\n  standalone: true,\n\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})\nexport class DemoHorizontalStepperComponent extends DemoComponentBase {\n  public linear = true;\n  _formBuilder = inject(FormBuilder);\n\n  firstFormGroup = this._formBuilder.group({\n    firstCtrl: ['', Validators.required],\n  });\n  secondFormGroup = this._formBuilder.group({\n    secondCtrl: ['', Validators.required],\n  });\n\n  selectionChanged($event: StepperSelectionEvent) {\n    console.log($event);\n  }\n}\n"}
+{"demo-horizontal-stepper.component.html":"<mat-stepper #stepper1 [linear]=\"linear\" headerPosition=\"top\">\n  <mat-step\n    [stepControl]=\"firstFormGroup\"\n    errorMessage=\"Name is required.\"\n    aria-label=\"Fill out your name\"\n  >\n    <form [formGroup]=\"firstFormGroup\">\n      <ng-template matStepLabel>Fill out your name</ng-template>\n      <mat-form-field>\n        <mat-label>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>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-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\n    [stepControl]=\"secondFormGroup\"\n    errorMessage=\"Address is required.\"\n    aria-label=\"Fill out your address\"\n  >\n    <form [formGroup]=\"secondFormGroup\">\n      <ng-template matStepLabel>Fill out your address</ng-template>\n      <mat-form-field>\n        <mat-label>Address</mat-label>\n        <input\n          matInput\n          placeholder=\"Ex. 1 Main St, New York, NY\"\n          formControlName=\"secondCtrl\"\n          required\n        />\n      </mat-form-field>\n      <div>\n        <p>Go to a different step to see the error state</p>\n        <button\n          mat-button\n          mat-stroked-button\n          color=\"primary\"\n          matStepperPrevious\n        >\n          Back\n        </button>\n        <button\n          mat-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    <p>You are now done.</p>\n    <div>\n      <button mat-button mat-stroked-button color=\"primary\" matStepperPrevious>\n        Back\n      </button>\n      <button mat-button color=\"primary\" (click)=\"stepper1.reset()\">\n        Reset\n      </button>\n    </div>\n  </mat-step>\n</mat-stepper>\n","demo-horizontal-stepper.component.ts":"import { Component, inject } 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-horizontal-stepper',\n  templateUrl: './demo-horizontal-stepper.component.html',\n  standalone: true,\n\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})\nexport class DemoHorizontalStepperComponent extends DemoComponentBase {\n  public linear = true;\n  _formBuilder = inject(FormBuilder);\n\n  firstFormGroup = this._formBuilder.group({\n    firstCtrl: ['', Validators.required],\n  });\n  secondFormGroup = this._formBuilder.group({\n    secondCtrl: ['', Validators.required],\n  });\n\n  selectionChanged($event: StepperSelectionEvent) {\n    console.log($event);\n  }\n}\n"}

package/assets/json/icon-button.json

@@ -1 +1 @@
-{"demo-icon-button.component.html":"<button\n  mat-icon-button\n  color=\"primary\"\n  aria-label=\"Example icon button with a home icon\"\n>\n  <mat-icon>home</mat-icon>\n</button>\n<button\n  mat-icon-button\n  color=\"accent\"\n  aria-label=\"Example icon button with a menu icon\"\n>\n  <mat-icon>menu</mat-icon>\n</button>\n","demo-icon-button.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-icon-button',\n  templateUrl: './demo-icon-button.component.html',\n\n  standalone: true,\n  imports: [CommonModule, MatIconModule, MatButtonModule, MatToolbarModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoIconButtonComponent extends DemoComponentBase {\n  isSelected: FormControl<boolean | null> = new FormControl<boolean>(false);\n\n  handleToggle(isSelected: boolean) {\n    console.log('Event onToggleChoice: ', isSelected);\n  }\n}\n"}
+{"demo-icon-button.component.html":"<button\n  mat-icon-button\n  color=\"primary\"\n  aria-label=\"Example icon button with a home icon\"\n>\n  <mat-icon>home</mat-icon>\n</button>\n<button\n  mat-icon-button\n  color=\"accent\"\n  aria-label=\"Example icon button with a menu icon\"\n>\n  <mat-icon>menu</mat-icon>\n</button>\n","demo-icon-button.component.ts":"import { Component, ViewEncapsulation } from '@angular/core';\nimport { FormControl } from '@angular/forms';\n\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatToolbarModule } from '@angular/material/toolbar';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n  selector: 'app-demo-icon-button',\n  templateUrl: './demo-icon-button.component.html',\n\n  standalone: true,\n  imports: [MatIconModule, MatButtonModule, MatToolbarModule],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoIconButtonComponent extends DemoComponentBase {\n  isSelected: FormControl<boolean | null> = new FormControl<boolean>(false);\n\n  handleToggle(isSelected: boolean) {\n    console.log('Event onToggleChoice: ', isSelected);\n  }\n}\n"}