@onemrvapublic/design-system-demos 20.1.0-develop.2 → 20.1.0-develop.3
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 +1 -1
- package/assets/json/drawer.json +1 -0
- package/assets/json/file-upload.json +1 -1
- package/assets/json/language-switcher.json +1 -1
- package/assets/json/layout.json +1 -1
- package/assets/json/selectable-box-large.json +1 -0
- package/assets/json/selectable-box.json +1 -1
- package/assets/json/text-input.json +1 -1
- package/index.html +1 -1
- package/main.js +1 -1
- package/package.json +1 -1
- package/styles.css +1 -1
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","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"]
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"demo-drawer.component.html":"<button\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n [attr.data-cy]=\"'click-me'\"\n>\n Open form\n</button>\n","demo-drawer.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport {\n OnemrvaDrawerService,\n OnemrvaLayoutModule,\n} from '@onemrvapublic/design-system';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { LayoutDrawerComponent } from './demo-layout-drawer.component';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\n\n@Component({\n selector: 'app-demo-drawer',\n templateUrl: 'demo-drawer.component.html',\n standalone: true,\n imports: [\n CommonModule,\n RouterModule,\n\n TranslateModule,\n MatIconModule,\n MatMenuModule,\n OnemrvaLayoutModule,\n ReactiveFormsModule,\n MatDialogModule,\n MatButtonModule,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoDrawerComponent {\n drawerService = inject(OnemrvaDrawerService);\n\n dummyForm: FormGroup = new FormGroup({\n userId: new FormControl(''),\n leftField: new FormControl(''),\n rightField: new FormControl(''),\n });\n\n toggleForm() {\n const componentRef = this.drawerService.host?.createComponent(\n LayoutDrawerComponent,\n );\n componentRef!.instance.myForm = this.dummyForm;\n\n this.drawerService.size.set('xlarge');\n this.drawerService.toggle();\n }\n\n help() {\n alert('HELP');\n }\n}\n","demo-layout-drawer.component.html":"<onemrva-drawer-title [showClose]=\"true\">\n Example slide-over with content\n</onemrva-drawer-title>\n<onemrva-drawer-content>\n <h2>Content title</h2>\n <p>\n The slide-over allows to get some content displayed on a panel with some\n elements inside.\n </p>\n <form id=\"myForm\" class=\"mt-xl\" [formGroup]=\"myForm\">\n <mat-grid-list cols=\"2\" [gutterSize]=\"'16px'\" [rowHeight]=\"'80px'\">\n <mat-grid-tile [colspan]=\"2\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>User ID</mat-label>\n <input matInput [formControl]=\"userId\" />\n </mat-form-field>\n </mat-grid-tile>\n <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>Left fiels</mat-label>\n <input matInput [formControl]=\"leftField\" />\n </mat-form-field>\n </mat-grid-tile>\n <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>Right field</mat-label>\n <input matInput [formControl]=\"rightField\" />\n </mat-form-field>\n </mat-grid-tile>\n </mat-grid-list>\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n </form>\n</onemrva-drawer-content>\n<onemrva-drawer-actions>\n <button\n mat-stroked-button\n color=\"primary\"\n class=\"close\"\n (click)=\"drawerService.close()\"\n >\n Cancel\n </button>\n <button mat-flat-button color=\"accent\" (click)=\"save()\" class=\"ml\">\n Save\n </button>\n</onemrva-drawer-actions>\n","demo-layout-drawer.component.ts":"import { Component, inject, Input } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n OnemrvaDrawerService,\n} from '@onemrvapublic/design-system';\nimport { MatButton } from '@angular/material/button';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system';\nimport { MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatGridList, MatGridTile } from '@angular/material/grid-list';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'layout-drawer',\n templateUrl: 'demo-layout-drawer.component.html',\n standalone: true,\n imports: [\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n ReactiveFormsModule,\n MatIconModule,\n MatLabel,\n MatFormField,\n MatGridTile,\n MatGridList,\n MatInput,\n MatButton,\n OnemrvaMatPanelModule,\n ],\n})\nexport class LayoutDrawerComponent extends DemoComponentBase {\n @Input()\n myForm!: FormGroup;\n\n get userId() {\n return this.myForm.get('userId') as FormControl;\n }\n get leftField() {\n return this.myForm.get('leftField') as FormControl;\n }\n get rightField() {\n return this.myForm.get('rightField') as FormControl;\n }\n drawerService = inject(OnemrvaDrawerService);\n\n save() {\n this.drawerService.close();\n }\n}\n"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-file-upload.component.html":"<onemrva-mat-file-upload\n [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n [maxFileSize]=\"1485760\"\n [filePanelTemplate]=\"tpl\"\n errorMessage=\"test\"\n>\n</onemrva-mat-file-upload>\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n <file-panel\n [file]=\"file\"\n [actions]=\"actions\"\n [showProgress]=\"true\"\n ></file-panel>\n</ng-template>\n","demo-file-upload.component.ts":"import {\n Component,\n OnInit,\n ViewEncapsulation,\n InjectionToken,\n Inject,\n inject,\n} from '@angular/core';\n\nimport { Observable, Subject } from 'rxjs';\nimport { DemoFileUploadService } from './demo-file-upload.service';\nimport { MatDialog } from '@angular/material/dialog';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n ActionConfig,\n OnemrvaMatFileUploadModule,\n OnemrvaMatFileUploadService,\n OnemrvaMatFileUploadStore,\n ReferencedProgressFile,\n} from '@onemrvapublic/design-system';\nimport { TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport {
|
|
1
|
+
{"demo-file-upload.component.html":"<onemrva-mat-file-upload\n [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n [maxFileSize]=\"1485760\"\n [filePanelTemplate]=\"tpl\"\n errorMessage=\"test\"\n>\n</onemrva-mat-file-upload>\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n <file-panel\n [file]=\"file\"\n [actions]=\"actions\"\n [showProgress]=\"true\"\n ></file-panel>\n</ng-template>\n","demo-file-upload.component.ts":"import {\n Component,\n OnInit,\n ViewEncapsulation,\n InjectionToken,\n Inject,\n inject,\n} from '@angular/core';\n\nimport { Observable, Subject } from 'rxjs';\nimport { DemoFileUploadService } from './demo-file-upload.service';\nimport { MatDialog } from '@angular/material/dialog';\nimport { CommonModule } from '@angular/common';\nimport { MatButtonModule } from '@angular/material/button';\nimport {\n ActionConfig,\n OnemrvaMatFileUploadModule,\n OnemrvaMatFileUploadService,\n OnemrvaMatFileUploadStore,\n ReferencedProgressFile,\n} from '@onemrvapublic/design-system';\nimport { TranslateModule, TranslateService } from '@ngx-translate/core';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\n\nexport const CUSTOM_VALIDATION_FN = new InjectionToken<any>(\n 'CUSTOM_VALIDATION_FN',\n);\n\n@Component({\n selector: 'app-demo-file-upload',\n templateUrl: 'demo-file-upload.component.html',\n\n standalone: true,\n imports: [\n CommonModule,\n OnemrvaMatFileUploadModule,\n MatButtonModule,\n TranslateModule,\n ],\n providers: [\n TranslateService,\n OnemrvaMatFileUploadStore,\n {\n provide: OnemrvaMatFileUploadService,\n useClass: DemoFileUploadService,\n },\n {\n provide: CUSTOM_VALIDATION_FN,\n useValue: (x: any) => x[0],\n },\n ],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoFileUploadComponent\n extends DemoComponentBase\n implements OnInit\n{\n destroyNotifier$: Subject<void> = new Subject<void>();\n fileUploadStore = inject(OnemrvaMatFileUploadStore);\n fileUploadService = inject(OnemrvaMatFileUploadService);\n dialog = inject(MatDialog);\n\n files$: Observable<ReferencedProgressFile[]> = this.fileUploadStore.files$;\n\n constructor() {\n super();\n\n this.fileUploadStore.files$.pipe(takeUntilDestroyed()).subscribe(value => {\n this.output.set(value);\n });\n }\n\n actions: ActionConfig[] = [\n {\n iconName: 'download',\n dataCy: 'onemrva-file-panel-download',\n tooltipCode: 'file.upload.download',\n ariaCode: 'file.upload.download',\n clickHandler: this.downloadFile.bind(this),\n showAction: (file: ReferencedProgressFile) => file.color === 'success',\n },\n {\n iconName: 'delete',\n dataCy: 'onemrva-file-panel-delete',\n tooltipCode: 'file.upload.delete',\n ariaCode: 'file.upload.delete',\n clickHandler: this.deleteFileAction.bind(this),\n showAction: this.isDeletable,\n },\n {\n iconName: 'refresh',\n dataCy: 'onemrva-file-panel-retry',\n tooltipCode: 'file.upload.retry',\n ariaCode: 'file.upload.retry',\n clickHandler: this.retryUpload.bind(this),\n showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n },\n {\n iconName: 'visibility',\n dataCy: 'onemrva-file-panel-view',\n tooltipCode: 'file.upload.view',\n ariaCode: 'file.upload.view',\n clickHandler: this.view.bind(this),\n showAction: (file: ReferencedProgressFile) => file.color === 'success',\n },\n {\n iconName: 'close',\n dataCy: 'onemrva-file-panel-remove',\n tooltipCode: 'file.upload.remove',\n ariaCode: 'file.upload.remove',\n clickHandler: this.removeFile.bind(this),\n showAction: (file: ReferencedProgressFile) => file.color === 'warn',\n },\n ];\n\n ngOnInit(): void {\n this.fileUploadStore.listUploadedFiles(null);\n }\n\n downloadFile(file: ReferencedProgressFile) {\n this.fileUploadService.downloadFile(file.id);\n }\n\n retryUpload(file: ReferencedProgressFile) {\n this.fileUploadStore.retryFile({ ...file });\n }\n\n removeFile(file: ReferencedProgressFile) {\n this.fileUploadStore.removeFile(file);\n }\n\n deleteFileAction(file: ReferencedProgressFile) {\n if (this.isDeletable(file)) {\n this.fileUploadStore.deleteFile(file);\n }\n }\n\n view(file: ReferencedProgressFile) {\n if (!file.url) throw 'No url';\n window.open('http://www.google.com', '_blank', 'noopener noreferrer');\n }\n\n isDeletable(file: ReferencedProgressFile): boolean {\n return (\n file.color !== 'primary' && file.color !== '' && file.color !== 'warn'\n );\n }\n}\n","demo-file-upload.service.ts":"import {\n HttpEvent,\n HttpEventType,\n HttpProgressEvent,\n HttpResponse,\n} from '@angular/common/http';\nimport { Injectable } from '@angular/core';\nimport {\n ProgressFile,\n ReferencedProgressFile,\n} from '@onemrvapublic/design-system';\nimport { interval, map, Observable, of, take } from 'rxjs';\n\n@Injectable({\n providedIn: 'root',\n})\nexport class DemoFileUploadService {\n listUploadedFiles(inputs: any): Observable<ProgressFile[]> {\n console.log(inputs);\n return of([]);\n }\n\n upload(\n file: ProgressFile | ReferencedProgressFile,\n ): Observable<HttpEvent<any>> {\n console.log(file);\n return interval(27).pipe(\n take(101),\n map(i => {\n if (i < 100) {\n return {\n type: HttpEventType.UploadProgress,\n loaded: i,\n total: 100,\n } as HttpProgressEvent;\n } else {\n if (i >= 100 && Math.random() > 0.5) {\n throw 'Fake error thrown';\n }\n return new HttpResponse<any>({});\n }\n }),\n );\n }\n\n deleteFile(file: any): Observable<any> {\n console.log(file);\n return of('F = m.a');\n }\n\n retry(file: ReferencedProgressFile): Observable<HttpEvent<any>> {\n return this.upload(file);\n }\n\n downloadFile(id: any): Observable<any> {\n alert(`Missing download implementation for file ID ${id}`);\n return of(true);\n }\n}\n"}
|
|
@@ -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"}
|
package/assets/json/layout.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-layout-drawer.component.html":"<onemrva-drawer-title [showClose]=\"true\">\n Example slide-over with content\n</onemrva-drawer-title>\n<onemrva-drawer-content>\n <h2>Content title</h2>\n <p>\n The slide-over allows to get some content displayed on a panel with some\n elements inside.\n </p>\n <form id=\"myForm\" class=\"mt-xl\" [formGroup]=\"myForm\">\n <mat-grid-list cols=\"2\" [gutterSize]=\"'16px'\" [rowHeight]=\"'80px'\">\n <mat-grid-tile [colspan]=\"2\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>User ID</mat-label>\n <input matInput [formControl]=\"userId\" />\n </mat-form-field>\n </mat-grid-tile>\n <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>Left fiels</mat-label>\n <input matInput [formControl]=\"leftField\" />\n </mat-form-field>\n </mat-grid-tile>\n <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>Right field</mat-label>\n <input matInput [formControl]=\"rightField\" />\n </mat-form-field>\n </mat-grid-tile>\n </mat-grid-list>\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n </form>\n</onemrva-drawer-content>\n<onemrva-drawer-actions>\n <button mat-stroked-button color=\"primary\" (click)=\"drawerService.close()\">\n Cancel\n </button>\n <button mat-flat-button color=\"accent\" (click)=\"save()\" class=\"ml\">\n Save\n </button>\n</onemrva-drawer-actions>\n","demo-layout-drawer.component.ts":"import { Component, inject, Input } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n OnemrvaDrawerService,\n} from '@onemrvapublic/design-system';\nimport { MatButton } from '@angular/material/button';\nimport { NgIf } from '@angular/common';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system';\nimport { MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatGridList, MatGridTile } from '@angular/material/grid-list';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'layout-drawer',\n templateUrl: 'demo-layout-drawer.component.html',\n standalone: true,\n imports: [\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n ReactiveFormsModule,\n MatIconModule,\n MatLabel,\n MatFormField,\n MatGridTile,\n MatGridList,\n MatInput,\n MatButton,\n OnemrvaMatPanelModule,\n ],\n})\nexport class LayoutDrawerComponent extends DemoComponentBase {\n @Input()\n myForm!: FormGroup;\n\n get userId() {\n return this.myForm.get('userId') as FormControl;\n }\n get leftField() {\n return this.myForm.get('leftField') as FormControl;\n }\n get rightField() {\n return this.myForm.get('rightField') as FormControl;\n }\n drawerService = inject(OnemrvaDrawerService);\n\n save() {\n this.drawerService.close();\n }\n}\n","demo-layout.component.html":"<onemrva-layout\n [languages]=\"languages\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n>\n <onemrva-layout-title>Demo layout</onemrva-layout-title>\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n [ngClass]=\"{ active: activeMenu === 0 }\"\n mat-menu-item\n data-cy=\"trusteeButton\"\n (click)=\"click(0)\"\n attr.aria-label=\"{{ 'layout.interface.trusted' | translate }}\"\n >\n <mat-icon>star_outline</mat-icon\n >{{ 'layout.interface.trusted' | translate }}\n </button>\n <button\n [ngClass]=\"{ active: activeMenu === 1 }\"\n class=\"active-link\"\n type=\"button\"\n mat-menu-item\n data-cy=\"collaboButton\"\n (click)=\"click(1)\"\n attr.aria-label=\"{{ 'layout.interface.collaborator' | translate }}\"\n >\n <mat-icon>assignment_ind</mat-icon\n >{{ 'layout.interface.collaborator' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >Home</onemrva-layout-route\n >\n <onemrva-layout-route\n baseRouteForActiveMenu=\"/menu\"\n dataCy=\"Menu\"\n [label]=\"'Menu' | translate\"\n >\n <onemrva-layout-subroute routerLink=\"menu/submenu\"\n >Submenu</onemrva-layout-subroute\n >\n <onemrva-layout-subroute routerLink=\"menu/submenu2\"\n >Submenu 2</onemrva-layout-subroute\n >\n <onemrva-layout-subroute routerLink=\"menu/submenu3\"\n >Submenu 3\n <onemrva-layout-subroute routerLink=\"menu/submenu3/subsubmenu\"\n >Submenu\n </onemrva-layout-subroute>\n <onemrva-layout-subroute routerLink=\"menu/submenu3/subsubmenu2\"\n >Submenu 2</onemrva-layout-subroute\n >\n </onemrva-layout-subroute>\n </onemrva-layout-route>\n <onemrva-layout-route\n baseRouteForActiveMenu=\"/menu2\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Menu\"\n [label]=\"'Menu 2' | translate\"\n >\n <onemrva-layout-subroute routerLink=\"menu2/submenu\"\n >Submenu</onemrva-layout-subroute\n >\n <onemrva-layout-subroute routerLink=\"menu2/submenu2\"\n >Submenu 2</onemrva-layout-subroute\n >\n </onemrva-layout-route>\n <onemrva-layout-after-nav>\n <button\n mat-icon-button\n (click)=\"help()\"\n [attr.aria-label]=\"'Help' | translate\"\n >\n <mat-icon>help</mat-icon>\n </button>\n </onemrva-layout-after-nav>\n\n <onemrva-layout-sidenav-title>Test</onemrva-layout-sidenav-title>\n\n <onemrva-layout-sidenav-menu [routerLink]=\"'/menu1/side1'\">\n Menu 1\n <onemrva-layout-sidenav-submenu [routerLink]=\"'/menu1/side1/sub1'\"\n >Submenu 1</onemrva-layout-sidenav-submenu\n >\n <onemrva-layout-sidenav-submenu [routerLink]=\"'/menu1/side1/sub2'\"\n >Submenu 2</onemrva-layout-sidenav-submenu\n >\n </onemrva-layout-sidenav-menu>\n\n <onemrva-layout-sidenav-menu [routerLink]=\"'menu1/side2'\"\n >Menu 2</onemrva-layout-sidenav-menu\n >\n\n <onemrva-layout-content>\n <div class=\"container\">\n <h1 translate>demo.title</h1>\n This is a demo of the layout component\n <hr />\n <router-outlet></router-outlet>\n <br />\n <h1>Drawer</h1>\n <button mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n Open form\n </button>\n <br />\n <br />\n <br />\n Form value: {{ dummyForm.value | json }}\n </div>\n </onemrva-layout-content>\n\n <onemrva-layout-footer> footer</onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport {\n OnemrvaDrawerService,\n OnemRvaLanguage,\n OnemrvaLayoutModule,\n OnemRvaProfile,\n} from '@onemrvapublic/design-system';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { LayoutDrawerComponent } from './demo-layout-drawer.component';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\n\n@Component({\n selector: 'app-demo-layout',\n templateUrl: 'demo-layout.component.html',\n standalone: true,\n imports: [\n CommonModule,\n RouterModule,\n\n TranslateModule,\n MatIconModule,\n MatMenuModule,\n OnemrvaLayoutModule,\n ReactiveFormsModule,\n MatDialogModule,\n MatButtonModule,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoLayoutComponent {\n activeMenu = 1;\n\n languages: OnemRvaLanguage[] = [\n { code: 'fr', label: 'FR' },\n { code: 'nl', label: 'NL' },\n { code: 'en', label: 'EN' },\n { code: 'de', label: 'DE' },\n ];\n\n profile: OnemRvaProfile;\n\n drawerService = inject(OnemrvaDrawerService);\n // keycloakService = inject(KeycloakService);\n\n constructor() {\n /** create a new empty profile */\n this.profile = new OnemRvaProfile();\n\n /** Fill the profile with keycloak's information */\n // this.keycloakService.isLoggedIn().then((isLoggedIn ) => {\n // if (isLoggedIn) {\n // this.loadProfile();\n // }\n // });\n }\n\n /**\n * Login\n */\n login() {\n // this.keycloakService.login({\n // redirectUri: document.location.href, // do we really need this redirect ?\n // }).then((p) => {\n this.loadProfile();\n // });\n }\n\n /**\n * Logout\n */\n logout() {\n // this.keycloakService.logout(new URL('/', document.location.href).href).then((v) => {\n this.profile.logout();\n // });\n }\n\n /**\n * This function loads the keycloak given information into the profile object that is managed by the layout\n *\n * @private\n */\n private loadProfile() {\n this.profile.login('User', 'Name');\n }\n\n click(active: number) {\n this.activeMenu = active;\n }\n\n dummyForm: FormGroup = new FormGroup({\n userId: new FormControl(''),\n leftField: new FormControl(''),\n rightField: new FormControl(''),\n });\n\n toggleForm() {\n const componentRef = this.drawerService.host?.createComponent(\n LayoutDrawerComponent,\n );\n componentRef!.instance.myForm = this.dummyForm;\n\n this.drawerService.hasBackdrop = true;\n this.drawerService.drawer?.toggle();\n }\n\n help() {\n alert('HELP');\n }\n}\n"}
|
|
1
|
+
{"demo-layout-drawer.component.html":"<onemrva-drawer-title [showClose]=\"true\">\n Example slide-over with content\n</onemrva-drawer-title>\n<onemrva-drawer-content>\n <h2>Content title</h2>\n <p>\n The slide-over allows to get some content displayed on a panel with some\n elements inside.\n </p>\n <form id=\"myForm\" class=\"mt-xl\" [formGroup]=\"myForm\">\n <mat-grid-list cols=\"2\" [gutterSize]=\"'16px'\" [rowHeight]=\"'80px'\">\n <mat-grid-tile [colspan]=\"2\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>User ID</mat-label>\n <input matInput [formControl]=\"userId\" />\n </mat-form-field>\n </mat-grid-tile>\n <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>Left fiels</mat-label>\n <input matInput [formControl]=\"leftField\" />\n </mat-form-field>\n </mat-grid-tile>\n <mat-grid-tile [colspan]=\"1\" [rowspan]=\"1\">\n <mat-form-field>\n <mat-label>Right field</mat-label>\n <input matInput [formControl]=\"rightField\" />\n </mat-form-field>\n </mat-grid-tile>\n </mat-grid-list>\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n <br />\n </form>\n</onemrva-drawer-content>\n<onemrva-drawer-actions>\n <button mat-stroked-button color=\"primary\" (click)=\"drawerService.close()\">\n Cancel\n </button>\n <button mat-flat-button color=\"accent\" (click)=\"save()\" class=\"ml\">\n Save\n </button>\n</onemrva-drawer-actions>\n","demo-layout-drawer.component.ts":"import { Component, inject, Input } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { MatIconModule } from '@angular/material/icon';\nimport {\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n OnemrvaDrawerService,\n} from '@onemrvapublic/design-system';\nimport { MatButton } from '@angular/material/button';\nimport { NgIf } from '@angular/common';\nimport { OnemrvaMatPanelModule } from '@onemrvapublic/design-system';\nimport { MatFormField, MatLabel } from '@angular/material/form-field';\nimport { MatGridList, MatGridTile } from '@angular/material/grid-list';\nimport { MatInput } from '@angular/material/input';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'layout-drawer',\n templateUrl: 'demo-layout-drawer.component.html',\n standalone: true,\n imports: [\n LayoutDrawerActionsComponent,\n LayoutDrawerContentComponent,\n LayoutDrawerTitleComponent,\n ReactiveFormsModule,\n MatIconModule,\n MatLabel,\n MatFormField,\n MatGridTile,\n MatGridList,\n MatInput,\n MatButton,\n OnemrvaMatPanelModule,\n ],\n})\nexport class LayoutDrawerComponent extends DemoComponentBase {\n @Input()\n myForm!: FormGroup;\n\n get userId() {\n return this.myForm.get('userId') as FormControl;\n }\n get leftField() {\n return this.myForm.get('leftField') as FormControl;\n }\n get rightField() {\n return this.myForm.get('rightField') as FormControl;\n }\n drawerService = inject(OnemrvaDrawerService);\n\n save() {\n this.drawerService.close();\n }\n}\n","demo-layout.component.html":"<onemrva-layout\n [languages]=\"languages\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n>\n <onemrva-layout-title>Demo layout</onemrva-layout-title>\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n [ngClass]=\"{ active: activeMenu === 0 }\"\n mat-menu-item\n data-cy=\"trusteeButton\"\n (click)=\"click(0)\"\n attr.aria-label=\"{{ 'layout.interface.trusted' | translate }}\"\n >\n <mat-icon>star_outline</mat-icon\n >{{ 'layout.interface.trusted' | translate }}\n </button>\n <button\n [ngClass]=\"{ active: activeMenu === 1 }\"\n class=\"active-link\"\n type=\"button\"\n mat-menu-item\n data-cy=\"collaboButton\"\n (click)=\"click(1)\"\n attr.aria-label=\"{{ 'layout.interface.collaborator' | translate }}\"\n >\n <mat-icon>assignment_ind</mat-icon\n >{{ 'layout.interface.collaborator' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n >Home</onemrva-layout-route\n >\n <onemrva-layout-route\n baseRouteForActiveMenu=\"/menu\"\n dataCy=\"Menu\"\n [label]=\"'Menu' | translate\"\n >\n <onemrva-layout-subroute routerLink=\"menu/submenu\"\n >Submenu</onemrva-layout-subroute\n >\n <onemrva-layout-subroute routerLink=\"menu/submenu2\"\n >Submenu 2</onemrva-layout-subroute\n >\n <onemrva-layout-subroute routerLink=\"menu/submenu3\"\n >Submenu 3\n <onemrva-layout-subroute routerLink=\"menu/submenu3/subsubmenu\"\n >Submenu\n </onemrva-layout-subroute>\n <onemrva-layout-subroute routerLink=\"menu/submenu3/subsubmenu2\"\n >Submenu 2</onemrva-layout-subroute\n >\n </onemrva-layout-subroute>\n </onemrva-layout-route>\n <onemrva-layout-route\n baseRouteForActiveMenu=\"/menu2\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Menu\"\n [label]=\"'Menu 2' | translate\"\n >\n <onemrva-layout-subroute routerLink=\"menu2/submenu\"\n >Submenu</onemrva-layout-subroute\n >\n <onemrva-layout-subroute routerLink=\"menu2/submenu2\"\n >Submenu 2</onemrva-layout-subroute\n >\n </onemrva-layout-route>\n <onemrva-layout-after-nav>\n <button\n mat-icon-button\n (click)=\"help()\"\n [attr.aria-label]=\"'Help' | translate\"\n >\n <mat-icon>help</mat-icon>\n </button>\n </onemrva-layout-after-nav>\n\n <onemrva-layout-sidenav-title>Test</onemrva-layout-sidenav-title>\n\n <onemrva-layout-sidenav-menu [routerLink]=\"'/menu1/side1'\">\n Menu 1\n <onemrva-layout-sidenav-submenu [routerLink]=\"'/menu1/side1/sub1'\"\n >Submenu 1</onemrva-layout-sidenav-submenu\n >\n <onemrva-layout-sidenav-submenu [routerLink]=\"'/menu1/side1/sub2'\"\n >Submenu 2</onemrva-layout-sidenav-submenu\n >\n </onemrva-layout-sidenav-menu>\n\n <onemrva-layout-sidenav-menu [routerLink]=\"'menu1/side2'\"\n >Menu 2</onemrva-layout-sidenav-menu\n >\n\n <onemrva-layout-content>\n <div class=\"container\">\n <h1 translate>demo.title</h1>\n This is a demo of the layout component\n <hr />\n <router-outlet></router-outlet>\n <br />\n <h1>Drawer</h1>\n <button mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n Open form\n </button>\n <br />\n <br />\n <br />\n Form value: {{ dummyForm.value | json }}\n </div>\n </onemrva-layout-content>\n\n <onemrva-layout-footer> footer</onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, inject, ViewEncapsulation } from '@angular/core';\nimport {\n OnemrvaDrawerService,\n OnemRvaLanguage,\n OnemrvaLayoutModule,\n OnemRvaProfile,\n} from '@onemrvapublic/design-system';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { LayoutDrawerComponent } from './demo-layout-drawer.component';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\n\nimport { TranslateModule } from '@ngx-translate/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatDialogModule } from '@angular/material/dialog';\nimport { MatButtonModule } from '@angular/material/button';\n\n@Component({\n selector: 'app-demo-layout',\n templateUrl: 'demo-layout.component.html',\n standalone: true,\n imports: [\n CommonModule,\n RouterModule,\n\n TranslateModule,\n MatIconModule,\n MatMenuModule,\n OnemrvaLayoutModule,\n ReactiveFormsModule,\n MatDialogModule,\n MatButtonModule,\n ],\n\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoLayoutComponent {\n activeMenu = 1;\n\n languages: OnemRvaLanguage[] = [\n { code: 'fr', label: 'FR' },\n { code: 'nl', label: 'NL' },\n { code: 'en', label: 'EN' },\n { code: 'de', label: 'DE' },\n ];\n\n profile: OnemRvaProfile;\n\n drawerService = inject(OnemrvaDrawerService);\n // keycloakService = inject(KeycloakService);\n\n constructor() {\n /** create a new empty profile */\n this.profile = new OnemRvaProfile();\n\n /** Fill the profile with keycloak's information */\n // this.keycloakService.isLoggedIn().then((isLoggedIn ) => {\n // if (isLoggedIn) {\n // this.loadProfile();\n // }\n // });\n }\n\n /**\n * Login\n */\n login() {\n // this.keycloakService.login({\n // redirectUri: document.location.href, // do we really need this redirect ?\n // }).then((p) => {\n this.loadProfile();\n // });\n }\n\n /**\n * Logout\n */\n logout() {\n // this.keycloakService.logout(new URL('/', document.location.href).href).then((v) => {\n this.profile.logout();\n // });\n }\n\n /**\n * This function loads the keycloak given information into the profile object that is managed by the layout\n *\n * @private\n */\n private loadProfile() {\n this.profile.login('User', 'Name');\n }\n\n click(active: number) {\n this.activeMenu = active;\n }\n\n dummyForm: FormGroup = new FormGroup({\n userId: new FormControl(''),\n leftField: new FormControl(''),\n rightField: new FormControl(''),\n });\n\n toggleForm() {\n const componentRef = this.drawerService.host?.createComponent(\n LayoutDrawerComponent,\n );\n componentRef!.instance.myForm = this.dummyForm;\n\n this.drawerService.toggle();\n }\n\n help() {\n alert('HELP');\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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-text-input.component.html":"<mat-form-field
|
|
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"}
|
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>
|