@onemrvapublic/design-system-demos 20.11.0-develop.1 → 20.11.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/json/language-switcher.json +1 -1
- package/assets/json/layout.json +1 -1
- package/assets/json/menu.json +1 -1
- package/main.js +4 -4
- package/package.json +1 -1
- package/styles.css +1 -1
|
@@ -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\"
|
|
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\">\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.component.html":"<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n >\n </onemrva-layout-route>\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n >\n </onemrva-layout-route>\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n >\n </onemrva-layout-route>\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet></router-outlet>\n\n <!-- Open a drawer -->\n <button mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n Open form\n </button>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, inject } from '@angular/core';\nimport { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';\nimport { TranslateModule } from '@ngx-translate/core';\n\nimport { MatIcon } from '@angular/material/icon';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { CommonModule } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport {\n Environment,\n OnemrvaDrawerService,\n OnemrvaLayoutModule,\n OnemrvaLeftSidenavService,\n OnemRvaProfile,\n} from '@onemrvapublic/design-system/layout';\nimport { MatMenuItem } from '@angular/material/menu';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { DemoDrawerContentComponent } from '../drawer';\nimport { NavItem } from '@onemrvapublic/design-system/mat-navigation';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [\n CommonModule,\n RouterOutlet,\n OnemrvaLayoutModule,\n MatIcon,\n MatTooltip,\n MatIconButton,\n TranslateModule,\n OverlayModule,\n RouterLink,\n MatMenuItem,\n ],\n templateUrl: './demo-layout.component.html',\n})\nexport class DemoLayoutComponent {\n http = inject(HttpClient);\n route = inject(ActivatedRoute);\n\n // Use the drawer\n drawerService = inject(OnemrvaDrawerService);\n\n // Use the leftNav\n leftNav = inject(OnemrvaLeftSidenavService);\n\n navItems: NavItem[] = [\n {\n label: 'Home',\n icon: 'home',\n dataCy: 'home-nav',\n routerLink: '/',\n children: [],\n },\n ];\n\n profile: OnemRvaProfile;\n\n constructor() {\n /** create a new empty profile */\n this.profile = new OnemRvaProfile();\n this.leftNav.updateItems(this.navItems);\n }\n\n /**\n * Login\n */\n login() {\n this.profile.login('Anne', 'Onymous');\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 helpLink() {\n alert('?');\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 DemoDrawerContentComponent,\n );\n componentRef!.instance.myForm = this.dummyForm;\n\n this.drawerService.toggle();\n }\n\n protected readonly Environment = Environment;\n}\n"}
|
|
1
|
+
{"demo-layout.component.html":"<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n >\n </onemrva-layout-route>\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n >\n </onemrva-layout-route>\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n >\n </onemrva-layout-route>\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet></router-outlet>\n\n <!-- Open a drawer -->\n <button mat-flat-button color=\"accent\" (click)=\"toggleForm()\">\n Open form\n </button>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n","demo-layout.component.ts":"import { Component, inject } from '@angular/core';\nimport { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';\nimport { TranslateModule } from '@ngx-translate/core';\n\nimport { MatIcon } from '@angular/material/icon';\nimport { MatIconButton } from '@angular/material/button';\nimport { MatTooltip } from '@angular/material/tooltip';\nimport { CommonModule } from '@angular/common';\nimport { HttpClient } from '@angular/common/http';\nimport { OverlayModule } from '@angular/cdk/overlay';\nimport {\n Environment,\n OnemrvaDrawerService,\n OnemrvaLayoutModule,\n OnemrvaLeftSidenavService,\n OnemRvaProfile,\n} from '@onemrvapublic/design-system/layout';\nimport { MatMenuItem } from '@angular/material/menu';\nimport { FormControl, FormGroup } from '@angular/forms';\nimport { DemoDrawerContentComponent } from '../drawer';\nimport { NavItem } from '@onemrvapublic/design-system/mat-navigation';\nimport { OnemrvaMatNotificationComponent } from '@onemrvapublic/design-system/mat-notification';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\n\n@Component({\n selector: 'app-root',\n standalone: true,\n imports: [\n CommonModule,\n RouterOutlet,\n OnemrvaLayoutModule,\n MatIcon,\n MatTooltip,\n MatIconButton,\n TranslateModule,\n OverlayModule,\n RouterLink,\n MatMenuItem,\n OnemRvaColorDirective,\n OnemrvaMatNotificationComponent,\n ],\n templateUrl: './demo-layout.component.html',\n})\nexport class DemoLayoutComponent {\n http = inject(HttpClient);\n route = inject(ActivatedRoute);\n\n // Use the drawer\n drawerService = inject(OnemrvaDrawerService);\n\n // Use the leftNav\n leftNav = inject(OnemrvaLeftSidenavService);\n\n navItems: NavItem[] = [\n {\n label: 'Home',\n icon: 'home',\n dataCy: 'home-nav',\n routerLink: '/',\n children: [],\n },\n ];\n\n profile: OnemRvaProfile;\n\n constructor() {\n /** create a new empty profile */\n this.profile = new OnemRvaProfile();\n this.leftNav.updateItems(this.navItems);\n }\n\n /**\n * Login\n */\n login() {\n this.profile.login('Anne', 'Onymous');\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 helpLink() {\n alert('?');\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 DemoDrawerContentComponent,\n );\n componentRef!.instance.myForm = this.dummyForm;\n\n this.drawerService.toggle();\n }\n\n protected readonly Environment = Environment;\n}\n"}
|
package/assets/json/menu.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"demo-menu.component.html":"<button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n class=\"onemrva-icon-button truc\"\n aria-label=\"Menu\"\n [disabled]=\"disabled()\"\n>\n <mat-icon>more_horiz</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\"
|
|
1
|
+
{"demo-menu.component.html":"<button\n mat-icon-button\n [matMenuTriggerFor]=\"menu\"\n class=\"onemrva-icon-button truc\"\n aria-label=\"Menu\"\n [disabled]=\"disabled()\"\n>\n <mat-icon>more_horiz</mat-icon>\n</button>\n<mat-menu #menu=\"matMenu\">\n <div mat-menu-item>\n <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\">edit</mat-icon>Edit\n </div>\n <div mat-menu-item>\n <mat-icon class=\"mr-s\" style=\"width: auto; height: auto\">update</mat-icon\n >Save\n </div>\n</mat-menu>\n","demo-menu.component.ts":"import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { MatButtonModule } from '@angular/material/button';\nimport { MatMenuModule } from '@angular/material/menu';\nimport { MatIconModule } from '@angular/material/icon';\nimport { DemoComponentBase } from '../../_demo/demo-component-base';\n\n@Component({\n selector: 'app-demo-menu',\n templateUrl: 'demo-menu.component.html',\n\n standalone: true,\n imports: [MatButtonModule, MatMenuModule, MatIconModule],\n encapsulation: ViewEncapsulation.None,\n})\nexport class DemoMenuComponent extends DemoComponentBase {\n disabled = input<boolean>(false);\n}\n"}
|