@onemrvapublic/design-system-demos 22.5.0-develop.3 → 22.5.0-develop.5

package/package.json

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

package/browser/assets/json/chips-input.json

@@ -1 +0,0 @@
-{"demo-chips-input.component.html":"<mat-form-field class=\"chips-input-field\" [readonly]=\"readonly()\">\n  <mat-label>Favorite Fruits</mat-label>\n  <mat-chip-grid #chipGrid aria-label=\"Fruit selection\">\n    @for (fruit of fruits(); track fruit) {\n      <mat-chip-row\n        [color]=\"color()\"\n        [disabled]=\"disabled()\"\n        [removable]=\"!disabled()\"\n        (removed)=\"remove(fruit)\"\n        aria-label=\"Fruit: {{ fruit }}\"\n      >\n        {{ fruit }}\n        @if (!disabled() && !readonly()) {\n          <button matChipRemove [attr.aria-label]=\"'remove ' + fruit\">\n            <mat-icon>close</mat-icon>\n          </button>\n        }\n      </mat-chip-row>\n    }\n  </mat-chip-grid>\n\n  <input\n    #fruitInput\n    placeholder=\"Add fruit...\"\n    [(ngModel)]=\"currentFruit\"\n    [matChipInputFor]=\"chipGrid\"\n    [matAutocomplete]=\"auto\"\n    [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n    (matChipInputTokenEnd)=\"add($event)\"\n    [disabled]=\"disabled()\"\n  />\n\n  <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event)\">\n    @for (fruit of filteredFruits(); track fruit) {\n      <mat-option [value]=\"fruit\">{{ fruit }}</mat-option>\n    }\n  </mat-autocomplete>\n</mat-form-field>\n","demo-chips-input.component.ts":"import {\n  Component,\n  computed,\n  inject,\n  input,\n  model,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';\nimport { DragDropModule } from '@angular/cdk/drag-drop';\n\nimport { FormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatFormFieldModule } from '@angular/material/form-field';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport {\n  MatAutocomplete,\n  MatAutocompleteSelectedEvent,\n  MatAutocompleteTrigger,\n  MatOption,\n} from '@angular/material/autocomplete';\nimport { LiveAnnouncer } from '@angular/cdk/a11y';\nimport { COMMA, ENTER } from '@angular/cdk/keycodes';\n\nexport interface Fruit {\n  name: string;\n}\n@Component({\n  selector: 'app-demo-chips-input',\n  standalone: true,\n  imports: [\n    FormsModule,\n    MatChipsModule,\n    DragDropModule,\n    MatIconModule,\n    MatFormFieldModule,\n    OnemRvaReadonlyDirective,\n    MatAutocomplete,\n    MatOption,\n    MatAutocompleteTrigger,\n  ],\n  templateUrl: './demo-chips-input.component.html',\n\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChipsInputComponent extends DemoComponentBase {\n  color = input<OnemrvaMatColor>('');\n  disabled = input(false);\n  readonly = input(false);\n\n  readonly separatorKeysCodes: number[] = [ENTER, COMMA];\n  readonly filteredFruits = computed(() => {\n    const currentFruit = this.currentFruit().toLowerCase();\n    return currentFruit\n      ? this.allFruits.filter(fruit =>\n          fruit.toLowerCase().includes(currentFruit),\n        )\n      : this.allFruits.slice();\n  });\n  readonly currentFruit = model('');\n  readonly announcer = inject(LiveAnnouncer);\n  readonly fruits = signal(['Lemon']);\n  readonly allFruits: string[] = [\n    'Apple',\n    'Lemon',\n    'Lime',\n    'Orange',\n    'Strawberry',\n  ];\n\n  add(event: MatChipInputEvent): void {\n    const value = (event.value || '').trim();\n\n    // Add our fruit\n    if (value) {\n      this.fruits.update(fruits => [...fruits, value]);\n    }\n\n    // Clear the input value\n    this.currentFruit.set('');\n  }\n\n  remove(fruit: string): void {\n    this.fruits.update(fruits => {\n      const index = fruits.indexOf(fruit);\n      if (index < 0) {\n        return fruits;\n      }\n\n      fruits.splice(index, 1);\n      this.announcer.announce(`Removed ${fruit}`);\n      return [...fruits];\n    });\n  }\n\n  selected(event: MatAutocompleteSelectedEvent): void {\n    this.fruits.update(fruits => [...fruits, event.option.viewValue]);\n    this.currentFruit.set('');\n    event.option.deselect();\n  }\n}\n"}

package/browser/assets/json/choice-chips.json

@@ -1 +0,0 @@
-{"demo-choice-chips.component.html":"<section class=\"example-section\" [formGroup]=\"form\">\n  <onemrva-mat-choice-chip\n    class=\"mr-m\"\n    formControlName=\"pepperoni\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    Pepperoni\n  </onemrva-mat-choice-chip>\n\n  <onemrva-mat-choice-chip\n    class=\"mr-m\"\n    formControlName=\"extracheese\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    Extra Cheese\n  </onemrva-mat-choice-chip>\n\n  <onemrva-mat-choice-chip\n    formControlName=\"mushroom\"\n    [disabled]=\"disabled()\"\n    [readonly]=\"readonly()\"\n  >\n    Mushroom\n  </onemrva-mat-choice-chip>\n</section>\n","demo-choice-chips.component.scss":".example-section {\n}\n","demo-choice-chips.component.ts":"import {\n  Component,\n  effect,\n  inject,\n  input,\n  ViewEncapsulation,\n} from '@angular/core';\n\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { OnemrvaMatChoiceChipComponent } from '@onemrvapublic/design-system/mat-choice-chip';\nimport { OnemRvaReadonlyDirective } from '@onemrvapublic/design-system/shared';\nimport { FormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\n@Component({\n  selector: 'app-demo-choice-chips',\n  styleUrls: ['demo-choice-chips.component.scss'],\n  templateUrl: 'demo-choice-chips.component.html',\n  standalone: true,\n  imports: [\n    FormsModule,\n    MatCheckboxModule,\n    OnemrvaMatChoiceChipComponent,\n    ReactiveFormsModule,\n    OnemRvaReadonlyDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoChoiceChipsComponent extends DemoComponentBase {\n  private readonly _formBuilder = inject(FormBuilder);\n\n  readonly = input<boolean>(false);\n  disabled = input<boolean>(false);\n\n  constructor() {\n    super();\n    this.form.valueChanges.pipe(takeUntilDestroyed()).subscribe(val => {\n      this.output.set(val);\n    });\n\n    effect(() => {\n      if (this.disabled()) this.form.disable();\n      else this.form.enable();\n    });\n  }\n\n  readonly form = this._formBuilder.group({\n    pepperoni: false,\n    extracheese: false,\n    mushroom: false,\n  });\n}\n"}

package/browser/assets/json/selectable-box-large.json

@@ -1 +0,0 @@
-{"demo-selectable-box-large.component.html":"<mat-radio-group class=\"d-flex w100\" [formControl]=\"form\">\n  <onemrva-mat-selectable-box #box1 value=\"box1Value\">\n    <!--  The title attribute makes it in the header  -->\n    <ng-container title>\n      <span>36 - 49 ans</span>\n    </ng-container>\n\n    <!--  The sticker attribute makes it in the header  -->\n    <onemrva-mat-sticker sticker [color]=\"box1.isChecked() ? 'accent' : ''\">\n      468 jours à prester au CPAS\n    </onemrva-mat-sticker>\n\n    <!--  No attribute makes it go in the body, which you can style yourselves - don't do it inline :) only for demo purposes  -->\n\n    <div class=\"d-flex\">\n      <div class=\"d-flex flex-column text-right m\">\n        <span>Période à prester au CPAS</span>\n        <span>Date de demande des allocations</span>\n        <span>Réglementation</span>\n        <span>Q/S à prester au CPAS </span>\n        <span>Période de référence </span>\n        <span>Prestations passées prises en compte</span>\n      </div>\n      <div class=\"d-flex flex-column text-right bold m\">\n        <span>16/08/2022 - 14/08/2023</span>\n        <span>16/08/2023</span>\n        <span>Article 30 : Nouveau dossier</span>\n        <span>Q/S à prester au CPAS </span>\n        <span>16/11/2021 - 15/08/2023</span>\n        <span>0 jour</span>\n      </div>\n    </div>\n  </onemrva-mat-selectable-box>\n\n  <onemrva-mat-selectable-box #box2 value=\"box2Value\">\n    <!--  The title attribute makes it in the header  -->\n    <ng-container title>\n      <span>36 - 49 ans</span>\n    </ng-container>\n\n    <!--  The sticker attribute makes it in the header  -->\n\n    <onemrva-mat-sticker sticker [color]=\"box2.isChecked() ? 'accent' : ''\">\n      468 jours à prester au CPAS\n    </onemrva-mat-sticker>\n\n    <!--  No attribute makes it go in the body, which you can style yourselves - don't do it inline :) only for demo purposes  -->\n\n    <div class=\"d-flex\">\n      <div class=\"d-flex flex-column text-right m\">\n        <span>Période à prester au CPAS</span>\n        <span>Date de demande des allocations</span>\n        <span>Réglementation</span>\n        <span>Q/S à prester au CPAS </span>\n        <span>Période de référence </span>\n        <span>Prestations passées prises en compte</span>\n      </div>\n      <div class=\"d-flex flex-column text-right bold m\">\n        <span>16/08/2022 - 14/08/2023</span>\n        <span>16/08/2023</span>\n        <span>Article 30 : Nouveau dossier</span>\n        <span>Q/S à prester au CPAS </span>\n        <span>16/11/2021 - 15/08/2023</span>\n        <span>0 jour</span>\n      </div>\n    </div>\n  </onemrva-mat-selectable-box>\n</mat-radio-group>\n","demo-selectable-box-large.component.ts":"import { Component, 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 { MatIconModule } from '@angular/material/icon';\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 { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n  selector: 'app-demo-selectable-box-large',\n  templateUrl: './demo-selectable-box-large.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    OnemRvaColorDirective,\n  ],\n  encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxLargeComponent extends DemoComponentBase {\n  form = new FormControl<string>('');\n}\n"}