@onemrvapublic/design-system-demos 20.2.1-develop.1 → 20.2.1-develop.2

package/assets/codes.json

@@ -1 +1 @@
-["address","address-input","autocomplete","avatar","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card-table","carousel","checkbox","chips","chips-input","choice-chips","copy-to-clipboard","country-input","datepicker","datepicker-luxon","datepicker-month-year","daterangepicker","dialog","dialog-content","digit-only","drag-and-drop","drawer","empty","enterprise-number-input","error","error-handler","expansion","fab","file-panel","file-upload","file-upload-manual","grid","horizontal-stepper","icon","icon-button","if-width-is","language-switcher","layout","link","mask","menu","message-box","multiselect","niss-pipe","not-found","notification","overlay","paginator","palette","panel","phone-input","pop-over","progress-bar","radio","rxjs-combine-operators","rxjs-complex-case","rxjs-flattening-operators","rxjs-observable","rxjs-subject","selectable-box","selectable-box-large","side-menu","skeleton","slide-toggle","spacing","spinner","sticker","summary-stepper","tab","table","table-dialog-content","task-list","text-input","textarea","timepicker","toast","toc","toolbar","tooltip","typography","validators","vertical-stepper"]
+["address","address-input","autocomplete","avatar","bank-input","bce-pipe","birthplace-input","breadcrumb","button","button-loading","button-toggle","card","card-table","carousel","checkbox","chips","chips-input","choice-chips","copy-to-clipboard","country-input","datepicker","datepicker-luxon","datepicker-month-year","daterangepicker","dialog","dialog-content","digit-only","drag-and-drop","drawer","empty","enterprise-number-input","error","error-handler","expansion","fab","file-panel","file-upload","file-upload-manual","grid","horizontal-stepper","icon","icon-button","if-width-is","language-switcher","layout","link","mask","menu","message-box","multiselect","niss-pipe","not-found","notification","overlay","paginator","palette","panel","phone-input","pop-over","progress-bar","radio","rxjs-combine-operators","rxjs-complex-case","rxjs-flattening-operators","rxjs-observable","rxjs-subject","selectable-box","selectable-box-large","side-menu","skeleton","slide-toggle","spacing","spinner","sticker","summary-stepper","tab","table","table-dialog-content","task-list","text-input","textarea","timepicker","toast","toc","toolbar","tooltip","typography","validators","vertical-stepper"]

package/assets/json/card.json

@@ -0,0 +1 @@
+{"demo-card.component.html":"<mat-card style=\"width: 275px\">\n  @if (image) {\n    <img\n      mat-card-image\n      src=\"/assets/images/actionmenu-thumbnail.png\"\n      alt=\"Photo of a Shiba Inu\"\n    />\n  }\n  <mat-card-header>\n    <mat-card-title>Shiba Inu</mat-card-title>\n  </mat-card-header>\n  <mat-card-content>\n    <p>\n      The Shiba Inu is the smallest of the six original and distinct spitz\n      breeds of dog from Japan. A small, agile dog that copes very well with\n      mountainous terrain, the Shiba Inu was originally bred for hunting.\n    </p>\n    <onemrva-mat-sticker>Important</onemrva-mat-sticker>\n  </mat-card-content>\n</mat-card>\n","demo-card.component.ts":"import { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { Component, Input, ViewEncapsulation } from '@angular/core';\nimport {\n  MatCard,\n  MatCardContent,\n  MatCardHeader,\n  MatCardImage,\n  MatCardTitle,\n} from '@angular/material/card';\nimport { OnemrvaMatStickerComponent } from '@onemrvapublic/design-system';\n\n@Component({\n  selector: 'app-demo-card-table',\n  templateUrl: './demo-card.component.html',\n\n  standalone: true,\n  imports: [\n    MatCard,\n    MatCardHeader,\n    MatCardTitle,\n    MatCardContent,\n    MatCardImage,\n    OnemrvaMatStickerComponent,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoCardComponent extends DemoComponentBase {\n  @Input()\n  image = true;\n}\n"}

package/assets/json/text-input.json

@@ -1 +1 @@
-{"demo-text-input.component.html":"<mat-form-field [color]=\"color\">\n  <mat-label>Error demo</mat-label>\n  <input matInput [formControl]=\"input\" />\n  <mat-hint>Hint</mat-hint>\n  @if (input.errors && input.errors['required']) {\n    <mat-error> This is a long error message displayed on 2 lines </mat-error>\n  }\n</mat-form-field>\n","demo-text-input.component.ts":"import { Component, 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';\n\n@Component({\n  selector: 'app-demo-text-input',\n  templateUrl: './demo-text-input.component.html',\n\n  standalone: true,\n  imports: [\n    FormsModule,\n    CommonModule,\n    MatInput,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextInputComponent extends DemoComponentBase {\n  @Input()\n  color: 'primary' | 'warn' = 'primary';\n\n  input: UntypedFormControl = new UntypedFormControl('', [Validators.required]);\n}\n"}
+{"demo-text-input.component.html":"<form [formGroup]=\"form\">\n  <mat-form-field [color]=\"color\">\n    <mat-label>Error demo</mat-label>\n    <input matInput [readonly]=\"readonly\" [formControl]=\"input\" />\n    <mat-hint>Hint</mat-hint>\n    @if (input.errors && input.errors['required']) {\n      <mat-error> This is a long error message displayed on 2 lines </mat-error>\n    }\n  </mat-form-field>\n</form>\n","demo-text-input.component.ts":"import { Component, effect, Input, ViewEncapsulation } from '@angular/core';\nimport {\n  FormGroup,\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';\n\n@Component({\n  selector: 'app-demo-text-input',\n  templateUrl: './demo-text-input.component.html',\n\n  standalone: true,\n  imports: [\n    FormsModule,\n    CommonModule,\n    MatInput,\n    ReactiveFormsModule,\n    MatFormFieldModule,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoTextInputComponent extends DemoComponentBase {\n  @Input()\n  color: 'primary' | 'warn' = 'primary';\n\n  @Input()\n  disabled = false;\n\n  @Input()\n  readonly = false;\n\n  form = new FormGroup({\n    input: new UntypedFormControl('text', [Validators.required]),\n  });\n\n  get input() {\n    return this.form.get('input') as UntypedFormControl;\n  }\n\n  constructor() {\n    super();\n    effect(() => {\n      if (this.disabled) this.input.disable();\n      else this.input.enable();\n    });\n  }\n}\n"}