@onemrvapublic/design-system-demos 20.1.1 → 20.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/assets/codes.json
CHANGED
|
@@ -1 +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","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"]
|
|
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"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-language-switcher.component.html":"<button\n mat-mini-fab\n [matMenuTriggerFor]=\"languageMenu\"\n class=\"onemrva-icon-button truc\"\n aria-label=\"Language switcher\"\n>\n <mat-icon>translate</mat-icon>\n</button>\n<mat-menu #languageMenu=\"matMenu\" class=\"mat-elevation-z2\">\n @for (lang of
|
|
1
|
+
{"demo-language-switcher.component.html":"<button\n mat-mini-fab\n [matMenuTriggerFor]=\"languageMenu\"\n class=\"onemrva-icon-button truc\"\n aria-label=\"Language switcher\"\n>\n <mat-icon>translate</mat-icon>\n</button>\n<mat-menu #languageMenu=\"matMenu\" class=\"mat-elevation-z2\">\n @for (lang of translateService.getLangs(); track lang) {\n <div mat-menu-item tabindex=\"0\" (click)=\"changeLanguage(lang)\">\n @if (translateService.getCurrentLang() === lang) {\n <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\"\n >radio_button_checked</mat-icon\n >\n }\n @if (translateService.getCurrentLang() !== lang) {\n <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\"\n >radio_button_unchecked</mat-icon\n >\n }\n {{ lang }}\n </div>\n }\n</mat-menu>\n","demo-language-switcher.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport { Language, TranslateService } from '@ngx-translate/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { CommonModule } from '@angular/common';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-language-switcher',\n templateUrl: 'demo-language-switcher.component.html',\n\n standalone: true,\n imports: [MatButtonModule, MatMenuModule, MatIconModule, CommonModule],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoLanguageSwitcherComponent extends DemoComponentBase {\n translateService = inject(TranslateService);\n\n /**\n *\n * @param $event\n */\n changeLanguage($event: string) {\n if (this.translateService.getLangs().includes($event)) {\n this.translateService.use($event);\n }\n }\n}\n"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"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 { MatRadioChange, 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 { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatSelectableBoxModule } from '@onemrvapublic/design-system/mat-selectable-box';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-selectable-box.component.html":"<
|
|
1
|
+
{"demo-selectable-box.component.html":"<mat-radio-group\n name=\"unemploymentType\"\n required\n [formControl]=\"formControl\"\n class=\"d-flex w100\"\n>\n @for (reason of reasons; track $index) {\n <onemrva-mat-selectable-box\n [value]=\"reason\"\n [disabled]=\"reason === 'Disabled'\"\n >\n @if (title) {\n <ng-container title>{{ reason }}</ng-container>\n }\n @if (icon) {\n <ng-container icon>{{ icons[$index] }}</ng-container>\n }\n @if (content) {\n <ng-container>\n This<br />\n Is<br />\n A<br />\n Short<br />\n Content\n </ng-container>\n }\n </onemrva-mat-selectable-box>\n }\n</mat-radio-group>\n","demo-selectable-box.component.ts":"import { Component, Input, input, 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 { MatSelectSearchModule } from '@onemrvapublic/design-system/mat-select-search';\nimport { MatIconModule } from '@angular/material/icon';\nimport { OnemrvaMatSelectableBoxModule } from '@onemrvapublic/design-system/mat-selectable-box';\nimport { OnemrvaMatStickerModule } from '@onemrvapublic/design-system/mat-sticker';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-selectable-box',\n templateUrl: './demo-selectable-box.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 ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoSelectableBoxComponent extends DemoComponentBase {\n formControl = new FormControl<string>('');\n\n @Input()\n title = true;\n\n @Input()\n content = true;\n\n @Input()\n icon = true;\n\n reasons = ['Economical', 'Bad Weather', 'Other', 'Disabled'];\n icons = ['money', 'thunderstorm', 'rainy', 'switch'];\n}\n"}
|
package/index.html
CHANGED
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
}
|
|
46
46
|
function showDemo(demo) {
|
|
47
47
|
let showDemo = document.getElementById('showDemo');
|
|
48
|
-
showDemo.innerHTML = `<app-demo component="${demo}" showCode="yes"></app-demo>`;
|
|
48
|
+
showDemo.innerHTML = `<app-demo component="${demo}" showCode="yes" ></app-demo>`;
|
|
49
49
|
window.location.hash = demo;
|
|
50
50
|
}
|
|
51
51
|
</script>
|