@onemrvapublic/design-system 21.7.0-develop.2 → 21.7.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/README.md +16 -3
- package/assets/i18n/en.json +4 -0
- package/assets/i18n/nl.json +4 -0
- package/collapsible-page-divider/src/onemrva-collapsible-page-divider.scss +74 -0
- package/fesm2022/onemrvapublic-design-system-card.mjs +5 -4
- package/fesm2022/onemrvapublic-design-system-card.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-collapsible-page-divider.mjs +36 -0
- package/fesm2022/onemrvapublic-design-system-collapsible-page-divider.mjs.map +1 -0
- package/fesm2022/onemrvapublic-design-system-layout.mjs +12 -6
- package/fesm2022/onemrvapublic-design-system-layout.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-file-upload.mjs +11 -4
- package/fesm2022/onemrvapublic-design-system-mat-file-upload.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-side-menu.mjs +4 -3
- package/fesm2022/onemrvapublic-design-system-mat-side-menu.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-toast.mjs +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-toast.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-page-not-found.mjs +2 -0
- package/fesm2022/onemrvapublic-design-system-page-not-found.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-shared.mjs +3 -2
- package/fesm2022/onemrvapublic-design-system-shared.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system.mjs +1 -1
- package/fesm2022/onemrvapublic-design-system.mjs.map +1 -1
- package/layout/src/components/layout/layout.component.scss +14 -2
- package/layout/src/components/layout-left-sidenav/layout-left-sidenav.component.scss +38 -0
- package/mat-file-upload/src/components/onemrva-mat-file-panel/onemrva-file-panel.component.scss +1 -1
- package/mat-side-menu/src/onemrva-mat-side-menu.component.scss +9 -3
- package/package.json +5 -1
- package/theme/index.scss +3 -0
- package/theme/overrides/_badge.scss +13 -0
- package/types/onemrvapublic-design-system-card.d.ts +1 -0
- package/types/onemrvapublic-design-system-collapsible-page-divider.d.ts +25 -0
- package/types/onemrvapublic-design-system-layout.d.ts +4 -1
- package/types/onemrvapublic-design-system-mat-file-upload.d.ts +2 -1
- package/types/onemrvapublic-design-system-shared.d.ts +1 -1
- package/types/onemrvapublic-design-system.d.ts +1 -1
package/README.md
CHANGED
|
@@ -33,12 +33,25 @@ If you need access to our design system board, send us a message.
|
|
|
33
33
|
@Bram Decuypere (NL / EN)
|
|
34
34
|
## Changelog
|
|
35
35
|
|
|
36
|
-
### 21.7.0-develop.
|
|
36
|
+
### 21.7.0-develop.3
|
|
37
37
|
|
|
38
|
-
# [21.7.0-develop.
|
|
38
|
+
# [21.7.0-develop.3](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/compare/v21.7.0-develop.2...v21.7.0-develop.3) (2026-04-08)
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
### Bug Fixes
|
|
42
|
+
|
|
43
|
+
* **file-panel:** accessibility ([7455a20](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/7455a202d2c6a4f640a08c77f6d3aeb2a455872b))
|
|
44
|
+
* **page-not-found:** add aria-label to invader for accessibility ([7d0abb3](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/7d0abb368ad7326eca46f8090fbcb2bf0a006d3b))
|
|
45
|
+
* **ci:** background thumnail + fix cypress ([f664a12](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/f664a126db71fd4ea0a2137a1f25df5eee30254e))
|
|
46
|
+
* **card:** background thumnail ([9b220ef](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/9b220ef6ada0d3229e3ff017cde36a4ae85dc45e))
|
|
47
|
+
* **side-menu:** check error ([4b7a232](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/4b7a23254e32bd2716378cf8a43d1773bed6cf8f))
|
|
48
|
+
* **side-menu:** check error ([0c21222](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/0c21222519099761e49340e364a779d5d64897ec))
|
|
49
|
+
* **reports:** improve accessibility report HTML formatting and structure ([d2acd1f](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/d2acd1fbfe2ba7bee5c85fd5fb399a82695728b6))
|
|
39
50
|
|
|
40
51
|
|
|
41
52
|
### Features
|
|
42
53
|
|
|
43
|
-
* **
|
|
54
|
+
* **sidenav:** enable the sidenav collapse ([3a433b1](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/3a433b167d6c443c541a418b9cc94ae072aa3061))
|
|
55
|
+
* **collapsible-page-divider:** finally implement this component ([ae07341](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/ae07341d1f3a61ffdadd533a6ce74bdafea4a4f2))
|
|
56
|
+
* **badge:** implement badge ([2e7f2d2](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/2e7f2d29c8482257e11f2456e4ab02ec9c1310d0))
|
|
44
57
|
|
package/assets/i18n/en.json
CHANGED
|
@@ -78,6 +78,10 @@
|
|
|
78
78
|
},
|
|
79
79
|
"file": {
|
|
80
80
|
"upload": {
|
|
81
|
+
"download": "Download",
|
|
82
|
+
"view": "View",
|
|
83
|
+
"retry": "Retry",
|
|
84
|
+
"remove": "Remove",
|
|
81
85
|
"drag.and.drop": "Drag and drop your files here",
|
|
82
86
|
"browse.for.file": "Browse for files",
|
|
83
87
|
"type.not.supported": "File type not supported",
|
package/assets/i18n/nl.json
CHANGED
|
@@ -78,6 +78,10 @@
|
|
|
78
78
|
},
|
|
79
79
|
"file": {
|
|
80
80
|
"upload": {
|
|
81
|
+
"download": "Downloaden",
|
|
82
|
+
"view": "Bekijken",
|
|
83
|
+
"retry": "Opnieuw proberen",
|
|
84
|
+
"remove": "Verwijderen",
|
|
81
85
|
"drag.and.drop": "Sleep uw bestanden hierheen",
|
|
82
86
|
"browse.for.file": "Bladeren naar bestanden",
|
|
83
87
|
"type.not.supported": "Bestandstype niet ondersteund",
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
display: block;
|
|
3
|
+
width: 100%;
|
|
4
|
+
|
|
5
|
+
section {
|
|
6
|
+
width: 100%;
|
|
7
|
+
|
|
8
|
+
header {
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
gap: 12px;
|
|
12
|
+
cursor: pointer;
|
|
13
|
+
user-select: none;
|
|
14
|
+
padding: 8px 0;
|
|
15
|
+
|
|
16
|
+
.title {
|
|
17
|
+
font: var(--mat-sys-headline-large);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.divider {
|
|
21
|
+
flex-grow: 1;
|
|
22
|
+
height: 1px;
|
|
23
|
+
background-color: #e4e1ea; // Match Neutral 90
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.badge {
|
|
27
|
+
background-color: #eb142a; // Match Tertiary 40
|
|
28
|
+
color: #ffffff;
|
|
29
|
+
padding: 4px 12px;
|
|
30
|
+
border-radius: 4px;
|
|
31
|
+
font-size: 0.85rem;
|
|
32
|
+
font-weight: 500;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.arrow-container {
|
|
36
|
+
display: flex;
|
|
37
|
+
align-items: center;
|
|
38
|
+
justify-content: center;
|
|
39
|
+
transition: transform 0.35s ease;
|
|
40
|
+
|
|
41
|
+
.arrow {
|
|
42
|
+
width: 24px;
|
|
43
|
+
height: 24px;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
&.collapsed {
|
|
49
|
+
.arrow-container {
|
|
50
|
+
transform: rotate(-180deg);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
main {
|
|
54
|
+
grid-template-rows: 0fr;
|
|
55
|
+
opacity: 0;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
main {
|
|
60
|
+
display: grid;
|
|
61
|
+
grid-template-rows: 1fr;
|
|
62
|
+
box-sizing: border-box;
|
|
63
|
+
overflow: hidden;
|
|
64
|
+
opacity: 1;
|
|
65
|
+
transition:
|
|
66
|
+
grid-template-rows 0.3s ease-in-out,
|
|
67
|
+
opacity 0.3s ease-in-out;
|
|
68
|
+
|
|
69
|
+
.content {
|
|
70
|
+
min-height: 0;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, ViewEncapsulation, Component, NgModule } from '@angular/core';
|
|
2
|
+
import { input, computed, ViewEncapsulation, Component, NgModule } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/icon';
|
|
4
4
|
import { MatIconModule } from '@angular/material/icon';
|
|
5
5
|
import * as i2 from '@angular/material/tooltip';
|
|
@@ -12,6 +12,7 @@ class OnemrvaCardComponent {
|
|
|
12
12
|
this.image = input(false, ...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
|
|
13
13
|
this.imageSrc = input('', ...(ngDevMode ? [{ debugName: "imageSrc" }] : /* istanbul ignore next */ []));
|
|
14
14
|
this.imageAlt = input('', ...(ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []));
|
|
15
|
+
this.hasImage = computed(() => this.image() || !!this.imageSrc()?.trim(), ...(ngDevMode ? [{ debugName: "hasImage" }] : /* istanbul ignore next */ []));
|
|
15
16
|
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
16
17
|
this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
17
18
|
this.subtitle = input('', ...(ngDevMode ? [{ debugName: "subtitle" }] : /* istanbul ignore next */ []));
|
|
@@ -25,7 +26,7 @@ class OnemrvaCardComponent {
|
|
|
25
26
|
this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
|
|
26
27
|
}
|
|
27
28
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OnemrvaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
28
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: OnemrvaCardComponent, isStandalone: true, selector: "onemrva-card", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, coloredTitle: { classPropertyName: "coloredTitle", publicName: "coloredTitle", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "width()", "style.--onemrva-card-text-color": "textColor()", "class.onemrva-card--outline": "type() === \"outline\"", "class.onemrva-card--background": "type() === \"background\"", "class.onemrva-card--no-background": "type() === \"no-background\"", "class.onemrva-card--has-image": "
|
|
29
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: OnemrvaCardComponent, isStandalone: true, selector: "onemrva-card", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: false, transformFunction: null }, imageSrc: { classPropertyName: "imageSrc", publicName: "imageSrc", isSignal: true, isRequired: false, transformFunction: null }, imageAlt: { classPropertyName: "imageAlt", publicName: "imageAlt", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, helpText: { classPropertyName: "helpText", publicName: "helpText", isSignal: true, isRequired: false, transformFunction: null }, coloredTitle: { classPropertyName: "coloredTitle", publicName: "coloredTitle", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width": "width()", "style.--onemrva-card-text-color": "textColor()", "class.onemrva-card--outline": "type() === \"outline\"", "class.onemrva-card--background": "type() === \"background\"", "class.onemrva-card--no-background": "type() === \"no-background\"", "class.onemrva-card--has-image": "hasImage()", "class.onemrva-card--colored-title": "coloredTitle() === true", "class.onemrva-card--plain-title": "coloredTitle() === false" } }, ngImport: i0, template: "@if (hasImage()) {\n <div class=\"onemrva-card__image-wrapper\">\n <img class=\"onemrva-card__image\" [src]=\"imageSrc()\" [alt]=\"imageAlt()\" />\n </div>\n}\n<div class=\"onemrva-card__body\">\n <div class=\"onemrva-card__header-row\">\n <div class=\"onemrva-card__meta\">\n @if (label()) {\n <span class=\"onemrva-card__label\">{{ label() }}</span>\n }\n @if (title()) {\n <span class=\"onemrva-card__title\" title=\"\">{{ title() }}</span>\n }\n @if (subtitle()) {\n <span class=\"onemrva-card__subtitle\">{{ subtitle() }}</span>\n }\n </div>\n @if (helpText()) {\n <button\n class=\"onemrva-card__help-btn\"\n type=\"button\"\n [attr.aria-label]=\"helpText()\"\n [matTooltip]=\"helpText()\"\n >\n <mat-icon>help_outline</mat-icon>\n </button>\n }\n </div>\n @if (description()) {\n <p class=\"onemrva-card__description\">{{ description() }}</p>\n }\n <div class=\"onemrva-card__actions\">\n <ng-content select=\"[cardActions]\" />\n </div>\n</div>\n", styles: ["onemrva-card{display:block;border-radius:var(--border-radius, 16px);background:var(--mat-sys-surface, white);overflow:hidden;transition:box-shadow .2s ease}onemrva-card:hover{box-shadow:0 3px 3px color-mix(in srgb,var(--mat-sys-shadow, #312f3b) 16%,transparent)}onemrva-card.onemrva-card--outline{border:1px solid var(--mat-sys-outline-variant, #d7d5ed)}onemrva-card.onemrva-card--outline .onemrva-card__image-wrapper{border-radius:calc(var(--border-radius, 16px) - 4px) calc(var(--border-radius, 16px) - 4px) 0 0}onemrva-card.onemrva-card--outline .onemrva-card__title{background:linear-gradient(90deg,#de2174,#eb142a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}onemrva-card.onemrva-card--background{background:var(--mat-sys-surface-container-low, #f7f2fa)}onemrva-card.onemrva-card--background .onemrva-card__image-wrapper{border-radius:calc(var(--border-radius, 16px) - 4px) calc(var(--border-radius, 16px) - 4px) 0 0}onemrva-card.onemrva-card--background .onemrva-card__title{background:linear-gradient(90deg,#de2174,#eb142a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}onemrva-card.onemrva-card--background .onemrva-card__label,onemrva-card.onemrva-card--background .onemrva-card__subtitle,onemrva-card.onemrva-card--background .onemrva-card__description{color:var(--onemrva-card-text-color, var(--mat-sys-on-surface, #242424))}onemrva-card.onemrva-card--background .onemrva-card__help-btn mat-icon{color:var(--onemrva-card-text-color, var(--mat-sys-on-surface, #242424))}onemrva-card.onemrva-card--no-background .onemrva-card__image-wrapper{border-radius:calc(var(--border-radius, 16px) - 4px)}onemrva-card.onemrva-card--colored-title .onemrva-card__title{background:linear-gradient(90deg,#de2174,#eb142a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}onemrva-card.onemrva-card--plain-title .onemrva-card__title{background:none;-webkit-background-clip:unset;background-clip:unset;-webkit-text-fill-color:unset;color:var(--onemrva-card-text-color, var(--mat-sys-on-primary-container, #443e81))}.onemrva-card__image-wrapper{height:120px;overflow:hidden;position:relative}.onemrva-card__image{width:100%;height:100%;object-fit:cover;display:block}.onemrva-card__body{display:flex;flex-direction:column;gap:var(--spacer, .5rem);padding:var(--double-spacer, 1rem)}.onemrva-card__header-row{display:flex;align-items:flex-start;gap:var(--quarter-spacer, .125rem)}.onemrva-card__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--quarter-spacer, .125rem)}.onemrva-card__label{display:block;font-family:var(--text-font, \"Source Sans Pro\", sans-serif);font-size:var(--mat-sys-label-small-size, .75rem);line-height:var(--mat-sys-label-small-height, 1.125rem);font-weight:400;color:var(--onemrva-card-text-color, var(--mat-sys-on-primary-container, #443e81))}.onemrva-card__title{display:block;font-family:var(--brand-font, \"Poppins\", sans-serif);font-size:var(--mat-sys-headline-small-size, 1.125rem);line-height:var(--mat-sys-headline-small-height, 2.25rem);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--onemrva-card-text-color, var(--mat-sys-on-primary-container, #443e81))}.onemrva-card__subtitle{display:block;font-family:var(--text-font, \"Source Sans Pro\", sans-serif);font-size:var(--mat-sys-label-small-size, .75rem);line-height:var(--mat-sys-label-small-height, 1.125rem);font-weight:400;color:var(--onemrva-card-text-color, var(--mat-sys-on-primary-container, #443e81))}.onemrva-card__description{margin:0;font-family:var(--text-font, \"Source Sans Pro\", sans-serif);font-size:var(--mat-sys-body-medium-size, 1rem);line-height:var(--mat-sys-body-medium-height, 1.625rem);font-weight:400;color:var(--onemrva-card-text-color, var(--mat-sys-on-primary-container, #443e81));display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.onemrva-card__help-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:none;border:none;cursor:pointer}.onemrva-card__help-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px;color:var(--onemrva-card-text-color, var(--mat-sys-on-primary-container, #443e81))}.onemrva-card__actions{display:flex;align-items:center;gap:var(--triple-spacer, 1.5rem)}.onemrva-card__actions:empty{display:none}.onemrva-card__actions .mat-mdc-icon-button{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center}.onemrva-card__actions .mat-mdc-icon-button .mat-mdc-button-touch-target{width:32px;height:32px}.onemrva-card__actions .mat-mdc-icon-button .mat-mdc-button-ripple,.onemrva-card__actions .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:50%}.onemrva-card__actions .mat-mdc-icon-button .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px;display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
29
30
|
}
|
|
30
31
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OnemrvaCardComponent, decorators: [{
|
|
31
32
|
type: Component,
|
|
@@ -35,10 +36,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
35
36
|
'[class.onemrva-card--outline]': 'type() === "outline"',
|
|
36
37
|
'[class.onemrva-card--background]': 'type() === "background"',
|
|
37
38
|
'[class.onemrva-card--no-background]': 'type() === "no-background"',
|
|
38
|
-
'[class.onemrva-card--has-image]': '
|
|
39
|
+
'[class.onemrva-card--has-image]': 'hasImage()',
|
|
39
40
|
'[class.onemrva-card--colored-title]': 'coloredTitle() === true',
|
|
40
41
|
'[class.onemrva-card--plain-title]': 'coloredTitle() === false',
|
|
41
|
-
}, template: "@if (
|
|
42
|
+
}, template: "@if (hasImage()) {\n <div class=\"onemrva-card__image-wrapper\">\n <img class=\"onemrva-card__image\" [src]=\"imageSrc()\" [alt]=\"imageAlt()\" />\n </div>\n}\n<div class=\"onemrva-card__body\">\n <div class=\"onemrva-card__header-row\">\n <div class=\"onemrva-card__meta\">\n @if (label()) {\n <span class=\"onemrva-card__label\">{{ label() }}</span>\n }\n @if (title()) {\n <span class=\"onemrva-card__title\" title=\"\">{{ title() }}</span>\n }\n @if (subtitle()) {\n <span class=\"onemrva-card__subtitle\">{{ subtitle() }}</span>\n }\n </div>\n @if (helpText()) {\n <button\n class=\"onemrva-card__help-btn\"\n type=\"button\"\n [attr.aria-label]=\"helpText()\"\n [matTooltip]=\"helpText()\"\n >\n <mat-icon>help_outline</mat-icon>\n </button>\n }\n </div>\n @if (description()) {\n <p class=\"onemrva-card__description\">{{ description() }}</p>\n }\n <div class=\"onemrva-card__actions\">\n <ng-content select=\"[cardActions]\" />\n </div>\n</div>\n", styles: ["onemrva-card{display:block;border-radius:var(--border-radius, 16px);background:var(--mat-sys-surface, white);overflow:hidden;transition:box-shadow .2s ease}onemrva-card:hover{box-shadow:0 3px 3px color-mix(in srgb,var(--mat-sys-shadow, #312f3b) 16%,transparent)}onemrva-card.onemrva-card--outline{border:1px solid var(--mat-sys-outline-variant, #d7d5ed)}onemrva-card.onemrva-card--outline .onemrva-card__image-wrapper{border-radius:calc(var(--border-radius, 16px) - 4px) calc(var(--border-radius, 16px) - 4px) 0 0}onemrva-card.onemrva-card--outline .onemrva-card__title{background:linear-gradient(90deg,#de2174,#eb142a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}onemrva-card.onemrva-card--background{background:var(--mat-sys-surface-container-low, #f7f2fa)}onemrva-card.onemrva-card--background .onemrva-card__image-wrapper{border-radius:calc(var(--border-radius, 16px) - 4px) calc(var(--border-radius, 16px) - 4px) 0 0}onemrva-card.onemrva-card--background .onemrva-card__title{background:linear-gradient(90deg,#de2174,#eb142a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}onemrva-card.onemrva-card--background .onemrva-card__label,onemrva-card.onemrva-card--background .onemrva-card__subtitle,onemrva-card.onemrva-card--background .onemrva-card__description{color:var(--onemrva-card-text-color, var(--mat-sys-on-surface, #242424))}onemrva-card.onemrva-card--background .onemrva-card__help-btn mat-icon{color:var(--onemrva-card-text-color, var(--mat-sys-on-surface, #242424))}onemrva-card.onemrva-card--no-background .onemrva-card__image-wrapper{border-radius:calc(var(--border-radius, 16px) - 4px)}onemrva-card.onemrva-card--colored-title .onemrva-card__title{background:linear-gradient(90deg,#de2174,#eb142a);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:transparent}onemrva-card.onemrva-card--plain-title .onemrva-card__title{background:none;-webkit-background-clip:unset;background-clip:unset;-webkit-text-fill-color:unset;color:var(--onemrva-card-text-color, var(--mat-sys-on-primary-container, #443e81))}.onemrva-card__image-wrapper{height:120px;overflow:hidden;position:relative}.onemrva-card__image{width:100%;height:100%;object-fit:cover;display:block}.onemrva-card__body{display:flex;flex-direction:column;gap:var(--spacer, .5rem);padding:var(--double-spacer, 1rem)}.onemrva-card__header-row{display:flex;align-items:flex-start;gap:var(--quarter-spacer, .125rem)}.onemrva-card__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--quarter-spacer, .125rem)}.onemrva-card__label{display:block;font-family:var(--text-font, \"Source Sans Pro\", sans-serif);font-size:var(--mat-sys-label-small-size, .75rem);line-height:var(--mat-sys-label-small-height, 1.125rem);font-weight:400;color:var(--onemrva-card-text-color, var(--mat-sys-on-primary-container, #443e81))}.onemrva-card__title{display:block;font-family:var(--brand-font, \"Poppins\", sans-serif);font-size:var(--mat-sys-headline-small-size, 1.125rem);line-height:var(--mat-sys-headline-small-height, 2.25rem);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--onemrva-card-text-color, var(--mat-sys-on-primary-container, #443e81))}.onemrva-card__subtitle{display:block;font-family:var(--text-font, \"Source Sans Pro\", sans-serif);font-size:var(--mat-sys-label-small-size, .75rem);line-height:var(--mat-sys-label-small-height, 1.125rem);font-weight:400;color:var(--onemrva-card-text-color, var(--mat-sys-on-primary-container, #443e81))}.onemrva-card__description{margin:0;font-family:var(--text-font, \"Source Sans Pro\", sans-serif);font-size:var(--mat-sys-body-medium-size, 1rem);line-height:var(--mat-sys-body-medium-height, 1.625rem);font-weight:400;color:var(--onemrva-card-text-color, var(--mat-sys-on-primary-container, #443e81));display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.onemrva-card__help-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:16px;height:16px;padding:0;background:none;border:none;cursor:pointer}.onemrva-card__help-btn mat-icon{font-size:16px;width:16px;height:16px;line-height:16px;color:var(--onemrva-card-text-color, var(--mat-sys-on-primary-container, #443e81))}.onemrva-card__actions{display:flex;align-items:center;gap:var(--triple-spacer, 1.5rem)}.onemrva-card__actions:empty{display:none}.onemrva-card__actions .mat-mdc-icon-button{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center}.onemrva-card__actions .mat-mdc-icon-button .mat-mdc-button-touch-target{width:32px;height:32px}.onemrva-card__actions .mat-mdc-icon-button .mat-mdc-button-ripple,.onemrva-card__actions .mat-mdc-icon-button .mat-mdc-button-persistent-ripple{border-radius:50%}.onemrva-card__actions .mat-mdc-icon-button .mat-icon{font-size:16px;width:16px;height:16px;line-height:16px;display:flex;align-items:center;justify-content:center}\n"] }]
|
|
42
43
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: false }] }], imageSrc: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageSrc", required: false }] }], imageAlt: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageAlt", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], helpText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helpText", required: false }] }], coloredTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "coloredTitle", required: false }] }], textColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "textColor", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
43
44
|
|
|
44
45
|
class OnemrvaCardModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"onemrvapublic-design-system-card.mjs","sources":["../../../../projects/onemrva/design-system/card/src/onemrva-card.component.ts","../../../../projects/onemrva/design-system/card/src/onemrva-card.component.html","../../../../projects/onemrva/design-system/card/src/onemrva-card.module.ts","../../../../projects/onemrva/design-system/card/index.ts","../../../../projects/onemrva/design-system/card/onemrvapublic-design-system-card.ts"],"sourcesContent":["import { Component, input, ViewEncapsulation } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\n@Component({\n selector: 'onemrva-card',\n templateUrl: './onemrva-card.component.html',\n styleUrl: 'onemrva-card.component.scss',\n imports: [MatIconModule, MatTooltipModule],\n standalone: true,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[style.width]': 'width()',\n '[style.--onemrva-card-text-color]': 'textColor()',\n '[class.onemrva-card--outline]': 'type() === \"outline\"',\n '[class.onemrva-card--background]': 'type() === \"background\"',\n '[class.onemrva-card--no-background]': 'type() === \"no-background\"',\n '[class.onemrva-card--has-image]': '
|
|
1
|
+
{"version":3,"file":"onemrvapublic-design-system-card.mjs","sources":["../../../../projects/onemrva/design-system/card/src/onemrva-card.component.ts","../../../../projects/onemrva/design-system/card/src/onemrva-card.component.html","../../../../projects/onemrva/design-system/card/src/onemrva-card.module.ts","../../../../projects/onemrva/design-system/card/index.ts","../../../../projects/onemrva/design-system/card/onemrvapublic-design-system-card.ts"],"sourcesContent":["import { Component, computed, input, ViewEncapsulation } from '@angular/core';\nimport { MatIconModule } from '@angular/material/icon';\nimport { MatTooltipModule } from '@angular/material/tooltip';\n\n@Component({\n selector: 'onemrva-card',\n templateUrl: './onemrva-card.component.html',\n styleUrl: 'onemrva-card.component.scss',\n imports: [MatIconModule, MatTooltipModule],\n standalone: true,\n encapsulation: ViewEncapsulation.None,\n host: {\n '[style.width]': 'width()',\n '[style.--onemrva-card-text-color]': 'textColor()',\n '[class.onemrva-card--outline]': 'type() === \"outline\"',\n '[class.onemrva-card--background]': 'type() === \"background\"',\n '[class.onemrva-card--no-background]': 'type() === \"no-background\"',\n '[class.onemrva-card--has-image]': 'hasImage()',\n '[class.onemrva-card--colored-title]': 'coloredTitle() === true',\n '[class.onemrva-card--plain-title]': 'coloredTitle() === false',\n },\n})\nexport class OnemrvaCardComponent {\n /** Visual variant of the card. */\n readonly type = input<'no-background' | 'outline' | 'background'>(\n 'no-background',\n );\n readonly image = input(false);\n readonly imageSrc = input('');\n readonly imageAlt = input('');\n readonly hasImage = computed(() => this.image() || !!this.imageSrc()?.trim());\n readonly label = input('');\n readonly title = input('');\n readonly subtitle = input('');\n readonly description = input('');\n /** Tooltip text shown via the help icon. When empty, the icon is hidden. */\n readonly helpText = input('');\n /** When `true`, the title always uses the gradient. When `false`, it is always plain. When omitted, the gradient follows the variant. */\n readonly coloredTitle = input<boolean>();\n /** Overrides the CSS text color for label, subtitle, description and help icon. Accepts any CSS color value. */\n readonly textColor = input<string>();\n readonly width = input<string>();\n}\n","@if (hasImage()) {\n <div class=\"onemrva-card__image-wrapper\">\n <img class=\"onemrva-card__image\" [src]=\"imageSrc()\" [alt]=\"imageAlt()\" />\n </div>\n}\n<div class=\"onemrva-card__body\">\n <div class=\"onemrva-card__header-row\">\n <div class=\"onemrva-card__meta\">\n @if (label()) {\n <span class=\"onemrva-card__label\">{{ label() }}</span>\n }\n @if (title()) {\n <span class=\"onemrva-card__title\" title=\"\">{{ title() }}</span>\n }\n @if (subtitle()) {\n <span class=\"onemrva-card__subtitle\">{{ subtitle() }}</span>\n }\n </div>\n @if (helpText()) {\n <button\n class=\"onemrva-card__help-btn\"\n type=\"button\"\n [attr.aria-label]=\"helpText()\"\n [matTooltip]=\"helpText()\"\n >\n <mat-icon>help_outline</mat-icon>\n </button>\n }\n </div>\n @if (description()) {\n <p class=\"onemrva-card__description\">{{ description() }}</p>\n }\n <div class=\"onemrva-card__actions\">\n <ng-content select=\"[cardActions]\" />\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { OnemrvaCardComponent } from './onemrva-card.component';\n\n@NgModule({\n declarations: [],\n imports: [OnemrvaCardComponent],\n exports: [OnemrvaCardComponent],\n})\nexport class OnemrvaCardModule {}\n","/*\n * Public API Surface of mat-card\n */\n\nexport * from './src/onemrva-card.component';\nexport * from './src/onemrva-card.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAsBa,oBAAoB,CAAA;AAlBjC,IAAA,WAAA,GAAA;;AAoBW,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CACnB,eAAe,2EAChB;AACQ,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,KAAK,4EAAC;AACpB,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,EAAE,+EAAC;AACpB,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,EAAE,+EAAC;QACpB,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;AACpE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,EAAE,4EAAC;AACjB,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,EAAE,4EAAC;AACjB,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,EAAE,+EAAC;AACpB,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAC,EAAE,kFAAC;;AAEvB,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAC,EAAE,+EAAC;;QAEpB,IAAA,CAAA,YAAY,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,cAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAW;;QAE/B,IAAA,CAAA,SAAS,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;QAC3B,IAAA,CAAA,KAAK,GAAG,KAAK,CAAA,IAAA,SAAA,GAAA,CAAA,SAAA,EAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAU;AACjC,IAAA;8GApBY,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAApB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,UAAA,EAAA,cAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,SAAA,EAAA,iCAAA,EAAA,aAAA,EAAA,6BAAA,EAAA,wBAAA,EAAA,gCAAA,EAAA,2BAAA,EAAA,mCAAA,EAAA,8BAAA,EAAA,+BAAA,EAAA,YAAA,EAAA,mCAAA,EAAA,yBAAA,EAAA,iCAAA,EAAA,0BAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECtBjC,8jCAoCA,EAAA,MAAA,EAAA,CAAA,47JAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,ED5BY,aAAa,mLAAE,gBAAgB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,UAAA,EAAA,QAAA,EAAA,cAAA,EAAA,MAAA,EAAA,CAAA,oBAAA,EAAA,4BAAA,EAAA,oBAAA,EAAA,qBAAA,EAAA,qBAAA,EAAA,yBAAA,EAAA,YAAA,EAAA,iBAAA,CAAA,EAAA,QAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAc9B,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAlBhC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,cAAc,EAAA,OAAA,EAGf,CAAC,aAAa,EAAE,gBAAgB,CAAC,EAAA,UAAA,EAC9B,IAAI,EAAA,aAAA,EACD,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,eAAe,EAAE,SAAS;AAC1B,wBAAA,mCAAmC,EAAE,aAAa;AAClD,wBAAA,+BAA+B,EAAE,sBAAsB;AACvD,wBAAA,kCAAkC,EAAE,yBAAyB;AAC7D,wBAAA,qCAAqC,EAAE,4BAA4B;AACnE,wBAAA,iCAAiC,EAAE,YAAY;AAC/C,wBAAA,qCAAqC,EAAE,yBAAyB;AAChE,wBAAA,mCAAmC,EAAE,0BAA0B;AAChE,qBAAA,EAAA,QAAA,EAAA,8jCAAA,EAAA,MAAA,EAAA,CAAA,47JAAA,CAAA,EAAA;;;MEZU,iBAAiB,CAAA;8GAAjB,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA,CAAA;+GAAjB,iBAAiB,EAAA,OAAA,EAAA,CAHlB,oBAAoB,CAAA,EAAA,OAAA,EAAA,CACpB,oBAAoB,CAAA,EAAA,CAAA,CAAA;AAEnB,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,iBAAiB,YAHlB,oBAAoB,CAAA,EAAA,CAAA,CAAA;;2FAGnB,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAL7B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;AACR,oBAAA,YAAY,EAAE,EAAE;oBAChB,OAAO,EAAE,CAAC,oBAAoB,CAAC;oBAC/B,OAAO,EAAE,CAAC,oBAAoB,CAAC;AAChC,iBAAA;;;ACPD;;AAEG;;ACFH;;AAEG;;;;"}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { input, model, ChangeDetectionStrategy, Component } from '@angular/core';
|
|
3
|
+
import { MatIcon } from '@angular/material/icon';
|
|
4
|
+
import { OnemrvaMatStickerComponent } from '@onemrvapublic/design-system/mat-sticker';
|
|
5
|
+
import { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';
|
|
6
|
+
import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
|
|
7
|
+
|
|
8
|
+
class OnemrvaCollapsiblePageDivider {
|
|
9
|
+
constructor() {
|
|
10
|
+
this.OnemrvaMatColor = OnemrvaMatColor;
|
|
11
|
+
this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
12
|
+
this.stickerColor = input(OnemrvaMatColor.PRIMARY, ...(ngDevMode ? [{ debugName: "stickerColor" }] : /* istanbul ignore next */ []));
|
|
13
|
+
this.stickerText = input('Your Status', ...(ngDevMode ? [{ debugName: "stickerText" }] : /* istanbul ignore next */ []));
|
|
14
|
+
this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
15
|
+
}
|
|
16
|
+
toggle() {
|
|
17
|
+
this.isCollapsed.update(collapsed => !collapsed);
|
|
18
|
+
}
|
|
19
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OnemrvaCollapsiblePageDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
20
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: OnemrvaCollapsiblePageDivider, isStandalone: true, selector: "onemrva-collapsible-page-divider", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, stickerColor: { classPropertyName: "stickerColor", publicName: "stickerColor", isSignal: true, isRequired: false, transformFunction: null }, stickerText: { classPropertyName: "stickerText", publicName: "stickerText", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCollapsed: "isCollapsedChange" }, ngImport: i0, template: "<section [class.collapsed]=\"isCollapsed()\">\n <header tabindex=\"0\" (click)=\"toggle()\">\n <span class=\"title\">{{ title() }}</span>\n <span class=\"divider\"></span>\n @if (stickerText()) {\n <onemrva-mat-sticker [color]=\"stickerColor()\">\n {{stickerText()}}\n </onemrva-mat-sticker>\n }\n <div class=\"arrow-container\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </div>\n </header>\n <main>\n <div class=\"content\">\n <ng-content />\n </div>\n </main>\n</section>\n", styles: [":host{display:block;width:100%}:host section{width:100%}:host section header{display:flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none;padding:8px 0}:host section header .title{font:var(--mat-sys-headline-large)}:host section header .divider{flex-grow:1;height:1px;background-color:#e4e1ea}:host section header .badge{background-color:#eb142a;color:#fff;padding:4px 12px;border-radius:4px;font-size:.85rem;font-weight:500}:host section header .arrow-container{display:flex;align-items:center;justify-content:center;transition:transform .35s ease}:host section header .arrow-container .arrow{width:24px;height:24px}:host section.collapsed .arrow-container{transform:rotate(-180deg)}:host section.collapsed main{grid-template-rows:0fr;opacity:0}:host section main{display:grid;grid-template-rows:1fr;box-sizing:border-box;overflow:hidden;opacity:1;transition:grid-template-rows .3s ease-in-out,opacity .3s ease-in-out}:host section main .content{min-height:0}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: OnemrvaMatStickerComponent, selector: "onemrva-mat-sticker" }, { kind: "directive", type: OnemRvaColorDirective, selector: "onemrva-mat-selectable-box[color],onemrva-collapsible-page-divider[color],div[color],onemrva-mat-avatar[color],mat-card[color],mat-toolbar[color],onemrva-mat-spinner[color],onemrva-mat-notification[color],onemrva-mat-task-list[color],onemrva-mat-sticker[color],onemrva-mat-panel[color],onemrva-mat-task[color],onemrva-mat-choice-chip[color],mat-form-field[color],button[color],mat-icon[color],mat-chip[color],mat-chip-option[color]mat-hint[color],", inputs: ["color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
21
|
+
}
|
|
22
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: OnemrvaCollapsiblePageDivider, decorators: [{
|
|
23
|
+
type: Component,
|
|
24
|
+
args: [{ selector: 'onemrva-collapsible-page-divider', imports: [MatIcon, OnemrvaMatStickerComponent, OnemRvaColorDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section [class.collapsed]=\"isCollapsed()\">\n <header tabindex=\"0\" (click)=\"toggle()\">\n <span class=\"title\">{{ title() }}</span>\n <span class=\"divider\"></span>\n @if (stickerText()) {\n <onemrva-mat-sticker [color]=\"stickerColor()\">\n {{stickerText()}}\n </onemrva-mat-sticker>\n }\n <div class=\"arrow-container\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </div>\n </header>\n <main>\n <div class=\"content\">\n <ng-content />\n </div>\n </main>\n</section>\n", styles: [":host{display:block;width:100%}:host section{width:100%}:host section header{display:flex;align-items:center;gap:12px;cursor:pointer;-webkit-user-select:none;user-select:none;padding:8px 0}:host section header .title{font:var(--mat-sys-headline-large)}:host section header .divider{flex-grow:1;height:1px;background-color:#e4e1ea}:host section header .badge{background-color:#eb142a;color:#fff;padding:4px 12px;border-radius:4px;font-size:.85rem;font-weight:500}:host section header .arrow-container{display:flex;align-items:center;justify-content:center;transition:transform .35s ease}:host section header .arrow-container .arrow{width:24px;height:24px}:host section.collapsed .arrow-container{transform:rotate(-180deg)}:host section.collapsed main{grid-template-rows:0fr;opacity:0}:host section main{display:grid;grid-template-rows:1fr;box-sizing:border-box;overflow:hidden;opacity:1;transition:grid-template-rows .3s ease-in-out,opacity .3s ease-in-out}:host section main .content{min-height:0}\n"] }]
|
|
25
|
+
}], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], stickerColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickerColor", required: false }] }], stickerText: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickerText", required: false }] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }] } });
|
|
26
|
+
|
|
27
|
+
/*
|
|
28
|
+
* Public API Surface of mat-card
|
|
29
|
+
*/
|
|
30
|
+
|
|
31
|
+
/**
|
|
32
|
+
* Generated bundle index. Do not edit.
|
|
33
|
+
*/
|
|
34
|
+
|
|
35
|
+
export { OnemrvaCollapsiblePageDivider };
|
|
36
|
+
//# sourceMappingURL=onemrvapublic-design-system-collapsible-page-divider.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"onemrvapublic-design-system-collapsible-page-divider.mjs","sources":["../../../../projects/onemrva/design-system/collapsible-page-divider/src/onemrva-collapsible-page-divider.ts","../../../../projects/onemrva/design-system/collapsible-page-divider/src/onemrva-collapsible-page-divider.html","../../../../projects/onemrva/design-system/collapsible-page-divider/index.ts","../../../../projects/onemrva/design-system/collapsible-page-divider/onemrvapublic-design-system-collapsible-page-divider.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n input,\n model,\n} from '@angular/core';\nimport { MatIcon } from '@angular/material/icon';\nimport { OnemrvaMatStickerComponent } from '@onemrvapublic/design-system/mat-sticker';\nimport { OnemRvaColorDirective } from '@onemrvapublic/design-system/shared';\nimport { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';\n\n@Component({\n selector: 'onemrva-collapsible-page-divider',\n imports: [MatIcon, OnemrvaMatStickerComponent, OnemRvaColorDirective],\n templateUrl: './onemrva-collapsible-page-divider.html',\n styleUrl: './onemrva-collapsible-page-divider.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class OnemrvaCollapsiblePageDivider {\n OnemrvaMatColor = OnemrvaMatColor;\n\n readonly title = input.required<string>();\n readonly stickerColor = input<OnemrvaMatColor>(OnemrvaMatColor.PRIMARY);\n readonly stickerText = input<string>('Your Status');\n readonly isCollapsed = model<boolean>(false);\n\n toggle(): void {\n this.isCollapsed.update(collapsed => !collapsed);\n }\n}\n","<section [class.collapsed]=\"isCollapsed()\">\n <header tabindex=\"0\" (click)=\"toggle()\">\n <span class=\"title\">{{ title() }}</span>\n <span class=\"divider\"></span>\n @if (stickerText()) {\n <onemrva-mat-sticker [color]=\"stickerColor()\">\n {{stickerText()}}\n </onemrva-mat-sticker>\n }\n <div class=\"arrow-container\">\n <mat-icon>keyboard_arrow_down</mat-icon>\n </div>\n </header>\n <main>\n <div class=\"content\">\n <ng-content />\n </div>\n </main>\n</section>\n","/*\n * Public API Surface of mat-card\n */\n\nexport * from './src/onemrva-collapsible-page-divider';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;MAkBa,6BAA6B,CAAA;AAP1C,IAAA,WAAA,GAAA;QAQE,IAAA,CAAA,eAAe,GAAG,eAAe;AAExB,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,QAAQ,2EAAU;AAChC,QAAA,IAAA,CAAA,YAAY,GAAG,KAAK,CAAkB,eAAe,CAAC,OAAO,mFAAC;AAC9D,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,aAAa,kFAAC;AAC1C,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAU,KAAK,kFAAC;AAK7C,IAAA;IAHC,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,SAAS,IAAI,CAAC,SAAS,CAAC;IAClD;8GAVW,6BAA6B,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAA7B,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,6BAA6B,+qBClB1C,ihBAmBA,EAAA,MAAA,EAAA,CAAA,y+BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDNY,OAAO,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,SAAA,EAAA,SAAA,EAAA,UAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAE,0BAA0B,gEAAE,qBAAqB,EAAA,QAAA,EAAA,icAAA,EAAA,MAAA,EAAA,CAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;2FAKzD,6BAA6B,EAAA,UAAA,EAAA,CAAA;kBAPzC,SAAS;+BACE,kCAAkC,EAAA,OAAA,EACnC,CAAC,OAAO,EAAE,0BAA0B,EAAE,qBAAqB,CAAC,EAAA,eAAA,EAGpD,uBAAuB,CAAC,MAAM,EAAA,QAAA,EAAA,ihBAAA,EAAA,MAAA,EAAA,CAAA,y+BAAA,CAAA,EAAA;;;AEhBjD;;AAEG;;ACFH;;AAEG;;;;"}
|
|
@@ -63,19 +63,24 @@ class LayoutLeftSidenavComponent {
|
|
|
63
63
|
this.items = model([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
|
|
64
64
|
this.leftSidenavService = inject(OnemrvaLeftSidenavService);
|
|
65
65
|
this.isHidden = computed(() => this.leftSidenavService.items().length === 0, ...(ngDevMode ? [{ debugName: "isHidden" }] : /* istanbul ignore next */ []));
|
|
66
|
+
this.isCollapsed = model(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
66
67
|
effect(() => {
|
|
67
68
|
this.leftSidenavService.setOriginal(this.items());
|
|
68
69
|
});
|
|
69
70
|
}
|
|
71
|
+
toggleCollapse() {
|
|
72
|
+
this.isCollapsed.set(!this.isCollapsed());
|
|
73
|
+
}
|
|
70
74
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LayoutLeftSidenavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
71
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: LayoutLeftSidenavComponent, isStandalone: true, selector: "onemrva-layout-left-sidenav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange" }, host: { properties: { "class.hidden": "isHidden()" } }, ngImport: i0, template: "@if (leftSidenavService.items().length > 0) {\n <onemrva-mat-navigation [items]=\"leftSidenavService.items()\" />\n}
|
|
75
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: LayoutLeftSidenavComponent, isStandalone: true, selector: "onemrva-layout-left-sidenav", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, isCollapsed: { classPropertyName: "isCollapsed", publicName: "isCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", isCollapsed: "isCollapsedChange" }, host: { properties: { "class.hidden": "isHidden()", "class.collapsed": "isCollapsed()" } }, ngImport: i0, template: "<div class=\"toggle-container\">\n <button\n mat-icon-button\n (click)=\"toggleCollapse()\"\n class=\"onemrva-icon-button\"\n [attr.aria-label]=\"\n isCollapsed() ? 'Expand navigation' : 'Collapse navigation'\n \"\n >\n <mat-icon>{{ isCollapsed() ? 'menu' : 'chevron_left' }}</mat-icon>\n </button>\n</div>\n\n@if (!isCollapsed() && leftSidenavService.items().length > 0) {\n <onemrva-mat-navigation [items]=\"leftSidenavService.items()\" />\n}\n<ng-content />\n", styles: [":host{display:flex;flex-direction:column;overflow-y:hidden;max-height:calc(100vh - var(--layout-header-height));width:var(--sideNavWidth);transition:width .3s ease}:host .toggle-container{display:flex;justify-content:flex-end;padding:8px}:host.collapsed .toggle-container{justify-content:center}:host.collapsed ::ng-deep onemrva-mat-navigation-item .mobile-menu-item{padding:16px;justify-content:center}:host.collapsed ::ng-deep onemrva-mat-navigation-item .mobile-menu-item span,:host.collapsed ::ng-deep onemrva-mat-navigation-item .mobile-menu-item .indent-spacer,:host.collapsed ::ng-deep onemrva-mat-navigation-item .mobile-menu-item mat-icon.end{display:none}:host.collapsed ::ng-deep onemrva-mat-navigation-item .mobile-menu-item mat-icon:first-of-type{margin:0}:host.collapsed ::ng-deep onemrva-mat-navigation-item mat-expansion-panel{display:none}\n"], dependencies: [{ kind: "component", type: OnemrvaMatNavigationComponent, selector: "onemrva-mat-navigation", inputs: ["items", "level", "translate"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] }); }
|
|
72
76
|
}
|
|
73
77
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LayoutLeftSidenavComponent, decorators: [{
|
|
74
78
|
type: Component,
|
|
75
|
-
args: [{ selector: 'onemrva-layout-left-sidenav', imports: [OnemrvaMatNavigationComponent], standalone: true, host: {
|
|
79
|
+
args: [{ selector: 'onemrva-layout-left-sidenav', imports: [OnemrvaMatNavigationComponent, MatIconButton, MatIcon], standalone: true, host: {
|
|
76
80
|
'[class.hidden]': 'isHidden()',
|
|
77
|
-
|
|
78
|
-
|
|
81
|
+
'[class.collapsed]': 'isCollapsed()',
|
|
82
|
+
}, template: "<div class=\"toggle-container\">\n <button\n mat-icon-button\n (click)=\"toggleCollapse()\"\n class=\"onemrva-icon-button\"\n [attr.aria-label]=\"\n isCollapsed() ? 'Expand navigation' : 'Collapse navigation'\n \"\n >\n <mat-icon>{{ isCollapsed() ? 'menu' : 'chevron_left' }}</mat-icon>\n </button>\n</div>\n\n@if (!isCollapsed() && leftSidenavService.items().length > 0) {\n <onemrva-mat-navigation [items]=\"leftSidenavService.items()\" />\n}\n<ng-content />\n", styles: [":host{display:flex;flex-direction:column;overflow-y:hidden;max-height:calc(100vh - var(--layout-header-height));width:var(--sideNavWidth);transition:width .3s ease}:host .toggle-container{display:flex;justify-content:flex-end;padding:8px}:host.collapsed .toggle-container{justify-content:center}:host.collapsed ::ng-deep onemrva-mat-navigation-item .mobile-menu-item{padding:16px;justify-content:center}:host.collapsed ::ng-deep onemrva-mat-navigation-item .mobile-menu-item span,:host.collapsed ::ng-deep onemrva-mat-navigation-item .mobile-menu-item .indent-spacer,:host.collapsed ::ng-deep onemrva-mat-navigation-item .mobile-menu-item mat-icon.end{display:none}:host.collapsed ::ng-deep onemrva-mat-navigation-item .mobile-menu-item mat-icon:first-of-type{margin:0}:host.collapsed ::ng-deep onemrva-mat-navigation-item mat-expansion-panel{display:none}\n"] }]
|
|
83
|
+
}], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], isCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCollapsed", required: false }] }, { type: i0.Output, args: ["isCollapsedChange"] }] } });
|
|
79
84
|
|
|
80
85
|
class LayoutSubrouteComponent {
|
|
81
86
|
constructor() {
|
|
@@ -549,6 +554,7 @@ class LayoutComponent {
|
|
|
549
554
|
},
|
|
550
555
|
};
|
|
551
556
|
this.activeTheme = signal('light', ...(ngDevMode ? [{ debugName: "activeTheme" }] : /* istanbul ignore next */ []));
|
|
557
|
+
this.isCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
|
|
552
558
|
this.color = computed(() => {
|
|
553
559
|
switch (this.environment()) {
|
|
554
560
|
case Environment.LOCAL:
|
|
@@ -639,7 +645,7 @@ class LayoutComponent {
|
|
|
639
645
|
this.drawerService.toggle(true);
|
|
640
646
|
}
|
|
641
647
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
642
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: LayoutComponent, isStandalone: true, selector: "onemrva-layout", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, logoRedictionUrl: { classPropertyName: "logoRedictionUrl", publicName: "logoRedictionUrl", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, showThemeSwitcher: { classPropertyName: "showThemeSwitcher", publicName: "showThemeSwitcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", logout: "logout" }, queries: [{ propertyName: "routes", predicate: LayoutRouteComponent, isSignal: true }, { propertyName: "title", first: true, predicate: LayoutTitleComponent, descendants: true, isSignal: true }, { propertyName: "loginMenu", first: true, predicate: LayoutLoginMenuComponent, descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: LayoutContentComponent, descendants: true, isSignal: true }, { propertyName: "afterNav", first: true, predicate: LayoutAfterNavComponent, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: LayoutFooterComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "drawer", first: true, predicate: MatDrawer, descendants: true, isSignal: true }, { propertyName: "drawerHost", first: true, predicate: DrawerHostDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container\n id=\"onemrva-drawer-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop()\"\n autosize\n>\n <mat-drawer\n #mainDrawer\n [class]=\"drawerService.classes()\"\n mode=\"over\"\n position=\"end\"\n >\n <ng-template drawerhost />\n </mat-drawer>\n <mat-drawer-content\n [class]=\"leftSidenavService.items().length === 0 ? 'no-sidenav' : ''\"\n >\n <header>\n <div class=\"environment\" [color]=\"color()\" [class]=\"environment()\"></div>\n <mat-toolbar class=\"px-3xl-large\">\n <img\n class=\"logo align-center clickable\"\n [src]=\"logoFinal()\"\n [attr.data-cy]=\"'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\"\n alt=\"Logo ONEM/RVA\"\n [routerLink]=\"\n logoRedictionUrl() !== null ? logoRedictionUrl() : undefined\n \"\n [style.cursor]=\"logoRedictionUrl() !== null ? 'pointer' : 'default'\"\n />\n <div class=\"application-title ml-m\" [class.small-screen]=\"isSmall\">\n @if (title()?.template(); as titleTpl) {\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\n }\n\n @if (\n environment() &&\n (environment() === env.LOCAL ||\n environment() === env.TEST ||\n environment() === env.VAL)\n ) {\n <onemrva-mat-sticker [color]=\"color()\" class=\"ml-m text-capitalize\">\n {{ environment()?.toLocaleLowerCase() }}\n </onemrva-mat-sticker>\n }\n </div>\n\n <div style=\"flex: 1\"></div>\n\n @if (!isSmall) {\n <div\n class=\"flex-center topMenu\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n >\n @for (e of routes(); track $index) {\n <a\n mat-tab-link\n [routerLink]=\"e.routerLink()\"\n [attr.data-ci]=\"e.dataCy()\"\n [attr.data-cy]=\"e.dataCy()\"\n [routerLinkActiveOptions]=\"{\n fragment: 'exact',\n matrixParams: 'exact',\n paths: 'exact',\n queryParams: 'ignored',\n }\"\n #rla=\"routerLinkActive\"\n routerLinkActive=\"mdc-tab--active\"\n [active]=\"rla.isActive || e.isRouteActive()\"\n >\n @if (e.template(); as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\" />\n }\n </a>\n }\n </div>\n }\n <mat-tab-nav-panel #tabPanel />\n\n @if (afterNav()?.template(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n }\n\n @if (profile() !== null) {\n @if (!isSmall) {\n <mat-divider\n vertical\n class=\"mx-m\"\n style=\"height: 1em; align-self: center\"\n />\n }\n @if (profile()?.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n initials=\"{{ profile()?.initials() }}\"\n color=\"accent\"\n size=\"xsmall\"\n class=\"clickable\"\n />\n }\n @if (!profile()?.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n icon=\"account_circle\"\n [color]=\"OnemrvaMatColor.PRIMARY\"\n size=\"xsmall\"\n class=\"clickable\"\n />\n }\n <mat-menu #menu=\"matMenu\">\n @if (profile()?.isLoggedIn) {\n <div class=\"menu-header m mb-m\">\n {{ profile()?.firstName }} {{ profile()?.lastName }}\n </div>\n <mat-divider class=\"mx-m\" style=\"align-self: stretch\" />\n\n @if (loginMenu()?.template(); as menuLoginTpl) {\n <ng-container *ngTemplateOutlet=\"menuLoginTpl\" />\n }\n\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item\"\n mat-menu-item\n data-cy=\"logoutButton\"\n (click)=\"doLogout()\"\n [attr.aria-label]=\"'layout.logout' | translate\"\n >\n <mat-icon>logout</mat-icon>\n {{ 'layout.logout' | translate }}\n </button>\n } @else {\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"loginButton\"\n (click)=\"doLogin()\"\n [attr.aria-label]=\"'layout.login' | translate\"\n >\n <mat-icon>login</mat-icon>\n {{ 'layout.login' | translate }}\n </button>\n }\n </mat-menu>\n }\n\n @if (\n isSmall &&\n (routes().length || (languages() && languages().length > 1))\n ) {\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n data-cy=\"smallDeviceMenu\"\n (click)=\"this.toggleSideNav()\"\n [attr.aria-label]=\"'layout.menu' | translate\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (!isSmall && languages() && languages().length > 1) {\n <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a\n id=\"language-trigger\"\n [matMenuTriggerFor]=\"languageMenu\"\n data-cy=\"languageMenu\"\n [attr.aria-label]=\"'language.selection' | translate\"\n mat-tab-link\n >\n <div id=\"language-trigger__child\" class=\"px-m py-s\">\n <img\n [src]=\"languageImg()\"\n alt=\"nl\"\n [attr.data-cy]=\"'language_nl'\"\n />\n </div>\n </a>\n </div>\n }\n\n <mat-menu #languageMenu>\n @for (lang of languages(); track lang.code) {\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item language-trigger__menu-item\"\n mat-menu-item\n [attr.data-cy]=\"'language_' + lang.code\"\n (click)=\"changeLanguage(lang.code)\"\n [attr.aria-label]=\"lang.label\"\n >\n <img\n class=\"mr-m\"\n [src]=\"languageImg(lang)\"\n [alt]=\"lang.code\"\n [attr.data-cy]=\"`language_${lang.code}`\"\n />\n {{ lang.label }}\n </button>\n }\n </mat-menu>\n </mat-toolbar>\n </header>\n\n <onemrva-layout-left-sidenav />\n\n <main>\n <div class=\"notification\">\n <ng-content select=\"onemrva-mat-notification\" />\n </div>\n\n <section>\n <ng-container *ngTemplateOutlet=\"content()?.template()\" />\n </section>\n\n <footer class=\"onemrva-footer p mb text-center\">\n @if (footer()?.template(); as footerTpl) {\n <div class=\"onemrva-layout-container\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </footer>\n </main>\n\n @if (\n environment() &&\n (environment() === env.LOCAL || environment() === env.TEST)\n ) {\n <button\n id=\"accessibility_fab\"\n mat-fab\n color=\"accent\"\n aria-label=\"Accessibility check\"\n matTooltip=\"Accessibility check\"\n onclick=\"\n (function () {\n var _p = '//openfed.github.io/AccessibilityCheck/build/';\n var _i = function (s, cb) {\n var sc = document.createElement('script');\n sc.onload = function () {\n sc.onload = null;\n sc.onreadystatechange = null;\n cb.call(this);\n };\n sc.onreadystatechange = function () {\n if (/^(complete|loaded)$/.test(this.readyState) === true) {\n sc.onreadystatechange = null;\n sc.onload();\n }\n };\n sc.src = s;\n if (document.head) {\n document.head.appendChild(sc);\n } else {\n document.getElementsByTagName('head')[0].appendChild(sc);\n }\n };\n var options = { path: _p };\n _i(_p + 'HTMLCS.js', function () {\n HTMLCSAuditor.run('WCAG2AA', null, options);\n });\n })()\n \"\n >\n <mat-icon>accessibility</mat-icon>\n </button>\n }\n </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{position:relative}:host .onemrva-layout-container{width:100%;box-sizing:border-box}:host a:active{outline:none}:host header mat-toolbar{z-index:400;border-bottom:1px solid var(--mat-sys-outline-variant)}:host header mat-toolbar a[mat-tab-link]:hover{background:var(--mat-sys-surface-container-low)}:host header mat-toolbar{--mat-toolbar-standard-height: var(--layout-header-height);--mat-tab-divider-color: transparent;--mat-tab-container-height: var(--layout-header-height);--mat-tab-label-text-font: var(--text-font);--mat-tab-label-text-weight: 400;--mat-tab-active-indicator-height: 8px;--mat-tab-active-hover-indicator-color: var(--mat-sys-tertiary);--mat-tab-active-focus-indicator-color: var(--mat-sys-tertiary);--mat-tab-inactive-ripple-color: var(--mat-sys-surface-container-low)}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .mdc-tab{padding:0 16px;min-width:unset}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{display:flex;align-items:center;font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host header mat-toolbar .application-title onemrva-mat-sticker{text-transform:capitalize}:host header mat-toolbar .mat-mdc-tab-nav-bar{text-transform:uppercase}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:100vw;height:4px;font-weight:700;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST,:host .environment.VAL{background-color:var(--mat-sys-primary);display:block}:host mat-drawer-content{display:grid;grid-template-areas:\"header\" \"main\"}@media screen and (min-width:640px){:host mat-drawer-content{grid-template-columns:240px 1fr;grid-template-areas:\"header header\" \"left-sidenav main\"}}:host mat-drawer-content header{grid-area:header}:host mat-drawer-content onemrva-layout-left-sidenav{grid-area:left-sidenav;border-right:1px solid var(--mat-sys-outline-variant)}@media screen and (max-width:640px){:host mat-drawer-content onemrva-layout-left-sidenav{display:none}}:host mat-drawer-content #language-trigger{display:flex}:host mat-drawer-content #language-trigger__child{border:1px solid var(--mat-sys-outline-variant);border-radius:500px}:host mat-drawer-content #language-trigger:hover{background:transparent}:host mat-drawer-content #language-trigger img{width:22px;height:26px}:host mat-drawer-content main{display:block;grid-area:main;position:relative;width:100%;overflow-y:auto;max-height:calc(100vh - var(--layout-header-height));max-width:calc(100vw - 240px)}:host mat-drawer-content main>.notification{z-index:999;position:sticky;top:0}:host mat-drawer-content main>section{width:95%;max-width:1400px;margin-left:auto;margin-right:auto;min-height:calc(100vh - var(--layout-header-height))}:host mat-drawer-content.no-sidenav{grid-template-columns:1fr;grid-template-areas:\"header\" \"main\"}:host mat-drawer-content.no-sidenav main{max-width:100vw}:host mat-drawer{max-height:100vh;overflow:hidden}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width:640px){:host mat-drawer{width:99%!important}}nav a.disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: OnemrvaMatAvatarModule }, { kind: "component", type: i1$1.OnemrvaMatAvatarComponent, selector: "onemrva-mat-avatar", inputs: ["id", "roundShape", "initials", "text", "icon", "src"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "directive", type: DrawerHostDirective, selector: "[drawerhost]" }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: OnemRvaSizeDirective, selector: "mat-icon[size], onemrva-mat-skeleton[size], onemrva-mat-avatar[size], button[size]", inputs: ["size"] }, { kind: "directive", type: OnemRvaColorDirective, selector: "onemrva-mat-selectable-box[color],div[color],onemrva-mat-avatar[color],mat-card[color],mat-toolbar[color],onemrva-mat-spinner[color],onemrva-mat-notification[color],onemrva-mat-task-list[color],onemrva-mat-sticker[color],onemrva-mat-panel[color],onemrva-mat-task[color],onemrva-mat-choice-chip[color],mat-form-field[color],button[color],mat-icon[color],mat-chip[color],mat-chip-option[color]mat-hint[color],", inputs: ["color"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: LayoutLeftSidenavComponent, selector: "onemrva-layout-left-sidenav", inputs: ["items"], outputs: ["itemsChange"] }, { kind: "component", type: OnemrvaMatStickerComponent, selector: "onemrva-mat-sticker" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
648
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: LayoutComponent, isStandalone: true, selector: "onemrva-layout", inputs: { logo: { classPropertyName: "logo", publicName: "logo", isSignal: true, isRequired: false, transformFunction: null }, languages: { classPropertyName: "languages", publicName: "languages", isSignal: true, isRequired: false, transformFunction: null }, environment: { classPropertyName: "environment", publicName: "environment", isSignal: true, isRequired: false, transformFunction: null }, logoRedictionUrl: { classPropertyName: "logoRedictionUrl", publicName: "logoRedictionUrl", isSignal: true, isRequired: false, transformFunction: null }, profile: { classPropertyName: "profile", publicName: "profile", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, showThemeSwitcher: { classPropertyName: "showThemeSwitcher", publicName: "showThemeSwitcher", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { login: "login", logout: "logout" }, queries: [{ propertyName: "routes", predicate: LayoutRouteComponent, isSignal: true }, { propertyName: "title", first: true, predicate: LayoutTitleComponent, descendants: true, isSignal: true }, { propertyName: "loginMenu", first: true, predicate: LayoutLoginMenuComponent, descendants: true, isSignal: true }, { propertyName: "content", first: true, predicate: LayoutContentComponent, descendants: true, isSignal: true }, { propertyName: "afterNav", first: true, predicate: LayoutAfterNavComponent, descendants: true, isSignal: true }, { propertyName: "footer", first: true, predicate: LayoutFooterComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "drawer", first: true, predicate: MatDrawer, descendants: true, isSignal: true }, { propertyName: "drawerHost", first: true, predicate: DrawerHostDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<mat-drawer-container\n id=\"onemrva-drawer-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop()\"\n autosize\n>\n <mat-drawer\n #mainDrawer\n [class]=\"drawerService.classes()\"\n mode=\"over\"\n position=\"end\"\n >\n <ng-template drawerhost />\n </mat-drawer>\n <mat-drawer-content\n [class]=\"leftSidenavService.items().length === 0 ? 'no-sidenav' : ''\"\n [class.collapsed]=\"isCollapsed()\"\n >\n <header>\n <div class=\"environment\" [color]=\"color()\" [class]=\"environment()\"></div>\n <mat-toolbar class=\"px-3xl-large\">\n <img\n class=\"logo align-center clickable\"\n [src]=\"logoFinal()\"\n [attr.data-cy]=\"'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\"\n alt=\"Logo ONEM/RVA\"\n [routerLink]=\"\n logoRedictionUrl() !== null ? logoRedictionUrl() : undefined\n \"\n [style.cursor]=\"logoRedictionUrl() !== null ? 'pointer' : 'default'\"\n />\n <div class=\"application-title ml-m\" [class.small-screen]=\"isSmall\">\n @if (title()?.template(); as titleTpl) {\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\n }\n\n @if (\n environment() &&\n (environment() === env.LOCAL ||\n environment() === env.TEST ||\n environment() === env.VAL)\n ) {\n <onemrva-mat-sticker [color]=\"color()\" class=\"ml-m text-capitalize\">\n {{ environment()?.toLocaleLowerCase() }}\n </onemrva-mat-sticker>\n }\n </div>\n\n <div style=\"flex: 1\"></div>\n\n @if (!isSmall) {\n <div\n class=\"flex-center topMenu\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n >\n @for (e of routes(); track $index) {\n <a\n mat-tab-link\n [routerLink]=\"e.routerLink()\"\n [attr.data-ci]=\"e.dataCy()\"\n [attr.data-cy]=\"e.dataCy()\"\n [routerLinkActiveOptions]=\"{\n fragment: 'exact',\n matrixParams: 'exact',\n paths: 'exact',\n queryParams: 'ignored',\n }\"\n #rla=\"routerLinkActive\"\n routerLinkActive=\"mdc-tab--active\"\n [active]=\"rla.isActive || e.isRouteActive()\"\n >\n @if (e.template(); as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\" />\n }\n </a>\n }\n </div>\n }\n <mat-tab-nav-panel #tabPanel />\n\n @if (afterNav()?.template(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n }\n\n @if (profile() !== null) {\n @if (!isSmall) {\n <mat-divider\n vertical\n class=\"mx-m\"\n style=\"height: 1em; align-self: center\"\n />\n }\n @if (profile()?.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n initials=\"{{ profile()?.initials() }}\"\n color=\"accent\"\n size=\"xsmall\"\n class=\"clickable\"\n />\n }\n @if (!profile()?.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n icon=\"account_circle\"\n [color]=\"OnemrvaMatColor.PRIMARY\"\n size=\"xsmall\"\n class=\"clickable\"\n />\n }\n <mat-menu #menu=\"matMenu\">\n @if (profile()?.isLoggedIn) {\n <div class=\"menu-header m mb-m\">\n {{ profile()?.firstName }} {{ profile()?.lastName }}\n </div>\n <mat-divider class=\"mx-m\" style=\"align-self: stretch\" />\n\n @if (loginMenu()?.template(); as menuLoginTpl) {\n <ng-container *ngTemplateOutlet=\"menuLoginTpl\" />\n }\n\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item\"\n mat-menu-item\n data-cy=\"logoutButton\"\n (click)=\"doLogout()\"\n [attr.aria-label]=\"'layout.logout' | translate\"\n >\n <mat-icon>logout</mat-icon>\n {{ 'layout.logout' | translate }}\n </button>\n } @else {\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"loginButton\"\n (click)=\"doLogin()\"\n [attr.aria-label]=\"'layout.login' | translate\"\n >\n <mat-icon>login</mat-icon>\n {{ 'layout.login' | translate }}\n </button>\n }\n </mat-menu>\n }\n\n @if (\n isSmall &&\n (routes().length || (languages() && languages().length > 1))\n ) {\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n data-cy=\"smallDeviceMenu\"\n (click)=\"this.toggleSideNav()\"\n [attr.aria-label]=\"'layout.menu' | translate\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (!isSmall && languages() && languages().length > 1) {\n <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a\n id=\"language-trigger\"\n [matMenuTriggerFor]=\"languageMenu\"\n data-cy=\"languageMenu\"\n [attr.aria-label]=\"'language.selection' | translate\"\n mat-tab-link\n >\n <div id=\"language-trigger__child\" class=\"px-m py-s\">\n <img\n [src]=\"languageImg()\"\n alt=\"nl\"\n [attr.data-cy]=\"'language_nl'\"\n />\n </div>\n </a>\n </div>\n }\n\n <mat-menu #languageMenu>\n @for (lang of languages(); track lang.code) {\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item language-trigger__menu-item\"\n mat-menu-item\n [attr.data-cy]=\"'language_' + lang.code\"\n (click)=\"changeLanguage(lang.code)\"\n [attr.aria-label]=\"lang.label\"\n >\n <img\n class=\"mr-m\"\n [src]=\"languageImg(lang)\"\n [alt]=\"lang.code\"\n [attr.data-cy]=\"`language_${lang.code}`\"\n />\n {{ lang.label }}\n </button>\n }\n </mat-menu>\n </mat-toolbar>\n </header>\n\n <onemrva-layout-left-sidenav [(isCollapsed)]=\"isCollapsed\" />\n\n <main>\n <div class=\"notification\">\n <ng-content select=\"onemrva-mat-notification\" />\n </div>\n\n <section>\n <ng-container *ngTemplateOutlet=\"content()?.template()\" />\n </section>\n\n <footer class=\"onemrva-footer p mb text-center\">\n @if (footer()?.template(); as footerTpl) {\n <div class=\"onemrva-layout-container\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </footer>\n </main>\n\n @if (\n environment() &&\n (environment() === env.LOCAL || environment() === env.TEST)\n ) {\n <button\n id=\"accessibility_fab\"\n mat-fab\n color=\"accent\"\n aria-label=\"Accessibility check\"\n matTooltip=\"Accessibility check\"\n onclick=\"\n (function () {\n var _p = '//openfed.github.io/AccessibilityCheck/build/';\n var _i = function (s, cb) {\n var sc = document.createElement('script');\n sc.onload = function () {\n sc.onload = null;\n sc.onreadystatechange = null;\n cb.call(this);\n };\n sc.onreadystatechange = function () {\n if (/^(complete|loaded)$/.test(this.readyState) === true) {\n sc.onreadystatechange = null;\n sc.onload();\n }\n };\n sc.src = s;\n if (document.head) {\n document.head.appendChild(sc);\n } else {\n document.getElementsByTagName('head')[0].appendChild(sc);\n }\n };\n var options = { path: _p };\n _i(_p + 'HTMLCS.js', function () {\n HTMLCSAuditor.run('WCAG2AA', null, options);\n });\n })()\n \"\n >\n <mat-icon>accessibility</mat-icon>\n </button>\n }\n </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{--sideNavWidthFull: 240px;--sideNavWidthCollapsed: 56px;--sideNavWidth: var(--sideNavWidthFull);position:relative}:host .onemrva-layout-container{width:100%;box-sizing:border-box}:host a:active{outline:none}:host header mat-toolbar{z-index:400;border-bottom:1px solid var(--mat-sys-outline-variant)}:host header mat-toolbar a[mat-tab-link]:hover{background:var(--mat-sys-surface-container-low)}:host header mat-toolbar{--mat-toolbar-standard-height: var(--layout-header-height);--mat-tab-divider-color: transparent;--mat-tab-container-height: var(--layout-header-height);--mat-tab-label-text-font: var(--text-font);--mat-tab-label-text-weight: 400;--mat-tab-active-indicator-height: 8px;--mat-tab-active-hover-indicator-color: var(--mat-sys-tertiary);--mat-tab-active-focus-indicator-color: var(--mat-sys-tertiary);--mat-tab-inactive-ripple-color: var(--mat-sys-surface-container-low)}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .mdc-tab{padding:0 16px;min-width:unset}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{display:flex;align-items:center;font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host header mat-toolbar .application-title onemrva-mat-sticker{text-transform:capitalize}:host header mat-toolbar .mat-mdc-tab-nav-bar{text-transform:uppercase}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:100vw;height:4px;font-weight:700;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST,:host .environment.VAL{background-color:var(--mat-sys-primary);display:block}:host mat-drawer-content{display:grid;grid-template-areas:\"header\" \"main\"}@media screen and (min-width:640px){:host mat-drawer-content{grid-template-columns:var(--sideNavWidth) 1fr;transition:grid-template-columns .3s ease,max-width .3s ease}:host mat-drawer-content.collapsed{--sideNavWidth: var(--sideNavWidthCollapsed)}:host mat-drawer-content{grid-template-areas:\"header header\" \"left-sidenav main\"}}:host mat-drawer-content header{grid-area:header}:host mat-drawer-content onemrva-layout-left-sidenav{grid-area:left-sidenav;border-right:1px solid var(--mat-sys-outline-variant)}@media screen and (max-width:640px){:host mat-drawer-content onemrva-layout-left-sidenav{display:none}}:host mat-drawer-content #language-trigger{display:flex}:host mat-drawer-content #language-trigger__child{border:1px solid var(--mat-sys-outline-variant);border-radius:500px}:host mat-drawer-content #language-trigger:hover{background:transparent}:host mat-drawer-content #language-trigger img{width:22px;height:26px}:host mat-drawer-content main{display:block;grid-area:main;position:relative;width:100%;overflow-y:auto;max-height:calc(100vh - var(--layout-header-height));max-width:calc(100vw - var(--sideNavWidth));transition:max-width .3s ease}:host mat-drawer-content main>.notification{z-index:999;position:sticky;top:0}:host mat-drawer-content main>section{width:95%;max-width:1400px;margin-left:auto;margin-right:auto;min-height:calc(100vh - var(--layout-header-height))}:host mat-drawer-content.no-sidenav{grid-template-columns:1fr;grid-template-areas:\"header\" \"main\"}:host mat-drawer-content.no-sidenav main{max-width:100vw}:host mat-drawer{max-height:100vh;overflow:hidden}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width:640px){:host mat-drawer{width:99%!important}}nav a.disabled{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: MatToolbar, selector: "mat-toolbar", inputs: ["color"], exportAs: ["matToolbar"] }, { kind: "component", type: MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: MatTabNav, selector: "[mat-tab-nav-bar]", inputs: ["fitInkBarToContent", "mat-stretch-tabs", "animationDuration", "backgroundColor", "disableRipple", "color", "tabPanel"], exportAs: ["matTabNavBar", "matTabNav"] }, { kind: "component", type: MatTabLink, selector: "[mat-tab-link], [matTabLink]", inputs: ["active", "disabled", "disableRipple", "tabIndex", "id"], exportAs: ["matTabLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "component", type: MatTabNavPanel, selector: "mat-tab-nav-panel", inputs: ["id"], exportAs: ["matTabNavPanel"] }, { kind: "component", type: MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "ngmodule", type: OnemrvaMatAvatarModule }, { kind: "component", type: i1$1.OnemrvaMatAvatarComponent, selector: "onemrva-mat-avatar", inputs: ["id", "roundShape", "initials", "text", "icon", "src"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "directive", type: DrawerHostDirective, selector: "[drawerhost]" }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: OnemRvaSizeDirective, selector: "mat-icon[size], onemrva-mat-skeleton[size], onemrva-mat-avatar[size], button[size]", inputs: ["size"] }, { kind: "directive", type: OnemRvaColorDirective, selector: "onemrva-mat-selectable-box[color],onemrva-collapsible-page-divider[color],div[color],onemrva-mat-avatar[color],mat-card[color],mat-toolbar[color],onemrva-mat-spinner[color],onemrva-mat-notification[color],onemrva-mat-task-list[color],onemrva-mat-sticker[color],onemrva-mat-panel[color],onemrva-mat-task[color],onemrva-mat-choice-chip[color],mat-form-field[color],button[color],mat-icon[color],mat-chip[color],mat-chip-option[color]mat-hint[color],", inputs: ["color"] }, { kind: "ngmodule", type: MatSidenavModule }, { kind: "component", type: i2$1.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "component", type: LayoutLeftSidenavComponent, selector: "onemrva-layout-left-sidenav", inputs: ["items", "isCollapsed"], outputs: ["itemsChange", "isCollapsedChange"] }, { kind: "component", type: OnemrvaMatStickerComponent, selector: "onemrva-mat-sticker" }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
|
|
643
649
|
}
|
|
644
650
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: LayoutComponent, decorators: [{
|
|
645
651
|
type: Component,
|
|
@@ -670,7 +676,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
|
|
|
670
676
|
MatSidenavModule,
|
|
671
677
|
LayoutLeftSidenavComponent,
|
|
672
678
|
OnemrvaMatStickerComponent,
|
|
673
|
-
], template: "<mat-drawer-container\n id=\"onemrva-drawer-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop()\"\n autosize\n>\n <mat-drawer\n #mainDrawer\n [class]=\"drawerService.classes()\"\n mode=\"over\"\n position=\"end\"\n >\n <ng-template drawerhost />\n </mat-drawer>\n <mat-drawer-content\n [class]=\"leftSidenavService.items().length === 0 ? 'no-sidenav' : ''\"\n >\n <header>\n <div class=\"environment\" [color]=\"color()\" [class]=\"environment()\"></div>\n <mat-toolbar class=\"px-3xl-large\">\n <img\n class=\"logo align-center clickable\"\n [src]=\"logoFinal()\"\n [attr.data-cy]=\"'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\"\n alt=\"Logo ONEM/RVA\"\n [routerLink]=\"\n logoRedictionUrl() !== null ? logoRedictionUrl() : undefined\n \"\n [style.cursor]=\"logoRedictionUrl() !== null ? 'pointer' : 'default'\"\n />\n <div class=\"application-title ml-m\" [class.small-screen]=\"isSmall\">\n @if (title()?.template(); as titleTpl) {\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\n }\n\n @if (\n environment() &&\n (environment() === env.LOCAL ||\n environment() === env.TEST ||\n environment() === env.VAL)\n ) {\n <onemrva-mat-sticker [color]=\"color()\" class=\"ml-m text-capitalize\">\n {{ environment()?.toLocaleLowerCase() }}\n </onemrva-mat-sticker>\n }\n </div>\n\n <div style=\"flex: 1\"></div>\n\n @if (!isSmall) {\n <div\n class=\"flex-center topMenu\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n >\n @for (e of routes(); track $index) {\n <a\n mat-tab-link\n [routerLink]=\"e.routerLink()\"\n [attr.data-ci]=\"e.dataCy()\"\n [attr.data-cy]=\"e.dataCy()\"\n [routerLinkActiveOptions]=\"{\n fragment: 'exact',\n matrixParams: 'exact',\n paths: 'exact',\n queryParams: 'ignored',\n }\"\n #rla=\"routerLinkActive\"\n routerLinkActive=\"mdc-tab--active\"\n [active]=\"rla.isActive || e.isRouteActive()\"\n >\n @if (e.template(); as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\" />\n }\n </a>\n }\n </div>\n }\n <mat-tab-nav-panel #tabPanel />\n\n @if (afterNav()?.template(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n }\n\n @if (profile() !== null) {\n @if (!isSmall) {\n <mat-divider\n vertical\n class=\"mx-m\"\n style=\"height: 1em; align-self: center\"\n />\n }\n @if (profile()?.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n initials=\"{{ profile()?.initials() }}\"\n color=\"accent\"\n size=\"xsmall\"\n class=\"clickable\"\n />\n }\n @if (!profile()?.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n icon=\"account_circle\"\n [color]=\"OnemrvaMatColor.PRIMARY\"\n size=\"xsmall\"\n class=\"clickable\"\n />\n }\n <mat-menu #menu=\"matMenu\">\n @if (profile()?.isLoggedIn) {\n <div class=\"menu-header m mb-m\">\n {{ profile()?.firstName }} {{ profile()?.lastName }}\n </div>\n <mat-divider class=\"mx-m\" style=\"align-self: stretch\" />\n\n @if (loginMenu()?.template(); as menuLoginTpl) {\n <ng-container *ngTemplateOutlet=\"menuLoginTpl\" />\n }\n\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item\"\n mat-menu-item\n data-cy=\"logoutButton\"\n (click)=\"doLogout()\"\n [attr.aria-label]=\"'layout.logout' | translate\"\n >\n <mat-icon>logout</mat-icon>\n {{ 'layout.logout' | translate }}\n </button>\n } @else {\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"loginButton\"\n (click)=\"doLogin()\"\n [attr.aria-label]=\"'layout.login' | translate\"\n >\n <mat-icon>login</mat-icon>\n {{ 'layout.login' | translate }}\n </button>\n }\n </mat-menu>\n }\n\n @if (\n isSmall &&\n (routes().length || (languages() && languages().length > 1))\n ) {\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n data-cy=\"smallDeviceMenu\"\n (click)=\"this.toggleSideNav()\"\n [attr.aria-label]=\"'layout.menu' | translate\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (!isSmall && languages() && languages().length > 1) {\n <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a\n id=\"language-trigger\"\n [matMenuTriggerFor]=\"languageMenu\"\n data-cy=\"languageMenu\"\n [attr.aria-label]=\"'language.selection' | translate\"\n mat-tab-link\n >\n <div id=\"language-trigger__child\" class=\"px-m py-s\">\n <img\n [src]=\"languageImg()\"\n alt=\"nl\"\n [attr.data-cy]=\"'language_nl'\"\n />\n </div>\n </a>\n </div>\n }\n\n <mat-menu #languageMenu>\n @for (lang of languages(); track lang.code) {\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item language-trigger__menu-item\"\n mat-menu-item\n [attr.data-cy]=\"'language_' + lang.code\"\n (click)=\"changeLanguage(lang.code)\"\n [attr.aria-label]=\"lang.label\"\n >\n <img\n class=\"mr-m\"\n [src]=\"languageImg(lang)\"\n [alt]=\"lang.code\"\n [attr.data-cy]=\"`language_${lang.code}`\"\n />\n {{ lang.label }}\n </button>\n }\n </mat-menu>\n </mat-toolbar>\n </header>\n\n <onemrva-layout-left-sidenav />\n\n <main>\n <div class=\"notification\">\n <ng-content select=\"onemrva-mat-notification\" />\n </div>\n\n <section>\n <ng-container *ngTemplateOutlet=\"content()?.template()\" />\n </section>\n\n <footer class=\"onemrva-footer p mb text-center\">\n @if (footer()?.template(); as footerTpl) {\n <div class=\"onemrva-layout-container\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </footer>\n </main>\n\n @if (\n environment() &&\n (environment() === env.LOCAL || environment() === env.TEST)\n ) {\n <button\n id=\"accessibility_fab\"\n mat-fab\n color=\"accent\"\n aria-label=\"Accessibility check\"\n matTooltip=\"Accessibility check\"\n onclick=\"\n (function () {\n var _p = '//openfed.github.io/AccessibilityCheck/build/';\n var _i = function (s, cb) {\n var sc = document.createElement('script');\n sc.onload = function () {\n sc.onload = null;\n sc.onreadystatechange = null;\n cb.call(this);\n };\n sc.onreadystatechange = function () {\n if (/^(complete|loaded)$/.test(this.readyState) === true) {\n sc.onreadystatechange = null;\n sc.onload();\n }\n };\n sc.src = s;\n if (document.head) {\n document.head.appendChild(sc);\n } else {\n document.getElementsByTagName('head')[0].appendChild(sc);\n }\n };\n var options = { path: _p };\n _i(_p + 'HTMLCS.js', function () {\n HTMLCSAuditor.run('WCAG2AA', null, options);\n });\n })()\n \"\n >\n <mat-icon>accessibility</mat-icon>\n </button>\n }\n </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{position:relative}:host .onemrva-layout-container{width:100%;box-sizing:border-box}:host a:active{outline:none}:host header mat-toolbar{z-index:400;border-bottom:1px solid var(--mat-sys-outline-variant)}:host header mat-toolbar a[mat-tab-link]:hover{background:var(--mat-sys-surface-container-low)}:host header mat-toolbar{--mat-toolbar-standard-height: var(--layout-header-height);--mat-tab-divider-color: transparent;--mat-tab-container-height: var(--layout-header-height);--mat-tab-label-text-font: var(--text-font);--mat-tab-label-text-weight: 400;--mat-tab-active-indicator-height: 8px;--mat-tab-active-hover-indicator-color: var(--mat-sys-tertiary);--mat-tab-active-focus-indicator-color: var(--mat-sys-tertiary);--mat-tab-inactive-ripple-color: var(--mat-sys-surface-container-low)}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .mdc-tab{padding:0 16px;min-width:unset}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{display:flex;align-items:center;font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host header mat-toolbar .application-title onemrva-mat-sticker{text-transform:capitalize}:host header mat-toolbar .mat-mdc-tab-nav-bar{text-transform:uppercase}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:100vw;height:4px;font-weight:700;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST,:host .environment.VAL{background-color:var(--mat-sys-primary);display:block}:host mat-drawer-content{display:grid;grid-template-areas:\"header\" \"main\"}@media screen and (min-width:640px){:host mat-drawer-content{grid-template-columns:240px 1fr;grid-template-areas:\"header header\" \"left-sidenav main\"}}:host mat-drawer-content header{grid-area:header}:host mat-drawer-content onemrva-layout-left-sidenav{grid-area:left-sidenav;border-right:1px solid var(--mat-sys-outline-variant)}@media screen and (max-width:640px){:host mat-drawer-content onemrva-layout-left-sidenav{display:none}}:host mat-drawer-content #language-trigger{display:flex}:host mat-drawer-content #language-trigger__child{border:1px solid var(--mat-sys-outline-variant);border-radius:500px}:host mat-drawer-content #language-trigger:hover{background:transparent}:host mat-drawer-content #language-trigger img{width:22px;height:26px}:host mat-drawer-content main{display:block;grid-area:main;position:relative;width:100%;overflow-y:auto;max-height:calc(100vh - var(--layout-header-height));max-width:calc(100vw - 240px)}:host mat-drawer-content main>.notification{z-index:999;position:sticky;top:0}:host mat-drawer-content main>section{width:95%;max-width:1400px;margin-left:auto;margin-right:auto;min-height:calc(100vh - var(--layout-header-height))}:host mat-drawer-content.no-sidenav{grid-template-columns:1fr;grid-template-areas:\"header\" \"main\"}:host mat-drawer-content.no-sidenav main{max-width:100vw}:host mat-drawer{max-height:100vh;overflow:hidden}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width:640px){:host mat-drawer{width:99%!important}}nav a.disabled{pointer-events:none}\n"] }]
|
|
679
|
+
], template: "<mat-drawer-container\n id=\"onemrva-drawer-container\"\n [hasBackdrop]=\"drawerService.hasBackdrop()\"\n autosize\n>\n <mat-drawer\n #mainDrawer\n [class]=\"drawerService.classes()\"\n mode=\"over\"\n position=\"end\"\n >\n <ng-template drawerhost />\n </mat-drawer>\n <mat-drawer-content\n [class]=\"leftSidenavService.items().length === 0 ? 'no-sidenav' : ''\"\n [class.collapsed]=\"isCollapsed()\"\n >\n <header>\n <div class=\"environment\" [color]=\"color()\" [class]=\"environment()\"></div>\n <mat-toolbar class=\"px-3xl-large\">\n <img\n class=\"logo align-center clickable\"\n [src]=\"logoFinal()\"\n [attr.data-cy]=\"'onemrva_logo_' + currentLanguage.toLocaleLowerCase()\"\n alt=\"Logo ONEM/RVA\"\n [routerLink]=\"\n logoRedictionUrl() !== null ? logoRedictionUrl() : undefined\n \"\n [style.cursor]=\"logoRedictionUrl() !== null ? 'pointer' : 'default'\"\n />\n <div class=\"application-title ml-m\" [class.small-screen]=\"isSmall\">\n @if (title()?.template(); as titleTpl) {\n <ng-container *ngTemplateOutlet=\"titleTpl\" />\n }\n\n @if (\n environment() &&\n (environment() === env.LOCAL ||\n environment() === env.TEST ||\n environment() === env.VAL)\n ) {\n <onemrva-mat-sticker [color]=\"color()\" class=\"ml-m text-capitalize\">\n {{ environment()?.toLocaleLowerCase() }}\n </onemrva-mat-sticker>\n }\n </div>\n\n <div style=\"flex: 1\"></div>\n\n @if (!isSmall) {\n <div\n class=\"flex-center topMenu\"\n mat-tab-nav-bar\n [tabPanel]=\"tabPanel\"\n >\n @for (e of routes(); track $index) {\n <a\n mat-tab-link\n [routerLink]=\"e.routerLink()\"\n [attr.data-ci]=\"e.dataCy()\"\n [attr.data-cy]=\"e.dataCy()\"\n [routerLinkActiveOptions]=\"{\n fragment: 'exact',\n matrixParams: 'exact',\n paths: 'exact',\n queryParams: 'ignored',\n }\"\n #rla=\"routerLinkActive\"\n routerLinkActive=\"mdc-tab--active\"\n [active]=\"rla.isActive || e.isRouteActive()\"\n >\n @if (e.template(); as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\" />\n }\n </a>\n }\n </div>\n }\n <mat-tab-nav-panel #tabPanel />\n\n @if (afterNav()?.template(); as tpl) {\n <ng-container *ngTemplateOutlet=\"tpl\" />\n }\n\n @if (profile() !== null) {\n @if (!isSmall) {\n <mat-divider\n vertical\n class=\"mx-m\"\n style=\"height: 1em; align-self: center\"\n />\n }\n @if (profile()?.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n initials=\"{{ profile()?.initials() }}\"\n color=\"accent\"\n size=\"xsmall\"\n class=\"clickable\"\n />\n }\n @if (!profile()?.isLoggedIn) {\n <onemrva-mat-avatar\n matRipple\n [matMenuTriggerFor]=\"menu\"\n icon=\"account_circle\"\n [color]=\"OnemrvaMatColor.PRIMARY\"\n size=\"xsmall\"\n class=\"clickable\"\n />\n }\n <mat-menu #menu=\"matMenu\">\n @if (profile()?.isLoggedIn) {\n <div class=\"menu-header m mb-m\">\n {{ profile()?.firstName }} {{ profile()?.lastName }}\n </div>\n <mat-divider class=\"mx-m\" style=\"align-self: stretch\" />\n\n @if (loginMenu()?.template(); as menuLoginTpl) {\n <ng-container *ngTemplateOutlet=\"menuLoginTpl\" />\n }\n\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item\"\n mat-menu-item\n data-cy=\"logoutButton\"\n (click)=\"doLogout()\"\n [attr.aria-label]=\"'layout.logout' | translate\"\n >\n <mat-icon>logout</mat-icon>\n {{ 'layout.logout' | translate }}\n </button>\n } @else {\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"loginButton\"\n (click)=\"doLogin()\"\n [attr.aria-label]=\"'layout.login' | translate\"\n >\n <mat-icon>login</mat-icon>\n {{ 'layout.login' | translate }}\n </button>\n }\n </mat-menu>\n }\n\n @if (\n isSmall &&\n (routes().length || (languages() && languages().length > 1))\n ) {\n <button\n type=\"button\"\n mat-icon-button\n class=\"menu-button\"\n data-cy=\"smallDeviceMenu\"\n (click)=\"this.toggleSideNav()\"\n [attr.aria-label]=\"'layout.menu' | translate\"\n >\n <mat-icon>menu</mat-icon>\n </button>\n }\n @if (!isSmall && languages() && languages().length > 1) {\n <div class=\"flex-center\" mat-tab-nav-bar [tabPanel]=\"tabPanel\">\n <a\n id=\"language-trigger\"\n [matMenuTriggerFor]=\"languageMenu\"\n data-cy=\"languageMenu\"\n [attr.aria-label]=\"'language.selection' | translate\"\n mat-tab-link\n >\n <div id=\"language-trigger__child\" class=\"px-m py-s\">\n <img\n [src]=\"languageImg()\"\n alt=\"nl\"\n [attr.data-cy]=\"'language_nl'\"\n />\n </div>\n </a>\n </div>\n }\n\n <mat-menu #languageMenu>\n @for (lang of languages(); track lang.code) {\n <button\n type=\"button\"\n class=\"mat-mdc-menu-item language-trigger__menu-item\"\n mat-menu-item\n [attr.data-cy]=\"'language_' + lang.code\"\n (click)=\"changeLanguage(lang.code)\"\n [attr.aria-label]=\"lang.label\"\n >\n <img\n class=\"mr-m\"\n [src]=\"languageImg(lang)\"\n [alt]=\"lang.code\"\n [attr.data-cy]=\"`language_${lang.code}`\"\n />\n {{ lang.label }}\n </button>\n }\n </mat-menu>\n </mat-toolbar>\n </header>\n\n <onemrva-layout-left-sidenav [(isCollapsed)]=\"isCollapsed\" />\n\n <main>\n <div class=\"notification\">\n <ng-content select=\"onemrva-mat-notification\" />\n </div>\n\n <section>\n <ng-container *ngTemplateOutlet=\"content()?.template()\" />\n </section>\n\n <footer class=\"onemrva-footer p mb text-center\">\n @if (footer()?.template(); as footerTpl) {\n <div class=\"onemrva-layout-container\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n }\n </footer>\n </main>\n\n @if (\n environment() &&\n (environment() === env.LOCAL || environment() === env.TEST)\n ) {\n <button\n id=\"accessibility_fab\"\n mat-fab\n color=\"accent\"\n aria-label=\"Accessibility check\"\n matTooltip=\"Accessibility check\"\n onclick=\"\n (function () {\n var _p = '//openfed.github.io/AccessibilityCheck/build/';\n var _i = function (s, cb) {\n var sc = document.createElement('script');\n sc.onload = function () {\n sc.onload = null;\n sc.onreadystatechange = null;\n cb.call(this);\n };\n sc.onreadystatechange = function () {\n if (/^(complete|loaded)$/.test(this.readyState) === true) {\n sc.onreadystatechange = null;\n sc.onload();\n }\n };\n sc.src = s;\n if (document.head) {\n document.head.appendChild(sc);\n } else {\n document.getElementsByTagName('head')[0].appendChild(sc);\n }\n };\n var options = { path: _p };\n _i(_p + 'HTMLCS.js', function () {\n HTMLCSAuditor.run('WCAG2AA', null, options);\n });\n })()\n \"\n >\n <mat-icon>accessibility</mat-icon>\n </button>\n }\n </mat-drawer-content>\n</mat-drawer-container>\n", styles: [":host{--sideNavWidthFull: 240px;--sideNavWidthCollapsed: 56px;--sideNavWidth: var(--sideNavWidthFull);position:relative}:host .onemrva-layout-container{width:100%;box-sizing:border-box}:host a:active{outline:none}:host header mat-toolbar{z-index:400;border-bottom:1px solid var(--mat-sys-outline-variant)}:host header mat-toolbar a[mat-tab-link]:hover{background:var(--mat-sys-surface-container-low)}:host header mat-toolbar{--mat-toolbar-standard-height: var(--layout-header-height);--mat-tab-divider-color: transparent;--mat-tab-container-height: var(--layout-header-height);--mat-tab-label-text-font: var(--text-font);--mat-tab-label-text-weight: 400;--mat-tab-active-indicator-height: 8px;--mat-tab-active-hover-indicator-color: var(--mat-sys-tertiary);--mat-tab-active-focus-indicator-color: var(--mat-sys-tertiary);--mat-tab-inactive-ripple-color: var(--mat-sys-surface-container-low)}:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-before,:host header mat-toolbar .topMenu .mat-mdc-tab-header-pagination-after{display:none!important}:host header mat-toolbar .mdc-tab{padding:0 16px;min-width:unset}:host header mat-toolbar .logo{height:42px}:host header mat-toolbar .application-title{display:flex;align-items:center;font-size:1.3rem;font-weight:700;height:42px;line-height:42px;color:var(--mat-sys-tertiary)}:host header mat-toolbar .application-title onemrva-mat-sticker{text-transform:capitalize}:host header mat-toolbar .mat-mdc-tab-nav-bar{text-transform:uppercase}:host #accessibility_fab{position:fixed;bottom:16px;left:16px}:host .environment{position:fixed;top:0;left:0;z-index:24000;width:100vw;height:4px;font-weight:700;color:#fff;display:none}:host .environment.LOCAL{background:transparent linear-gradient(90deg,#de2174,#eb142a) 0 0 no-repeat padding-box;display:block}:host .environment.TEST,:host .environment.VAL{background-color:var(--mat-sys-primary);display:block}:host mat-drawer-content{display:grid;grid-template-areas:\"header\" \"main\"}@media screen and (min-width:640px){:host mat-drawer-content{grid-template-columns:var(--sideNavWidth) 1fr;transition:grid-template-columns .3s ease,max-width .3s ease}:host mat-drawer-content.collapsed{--sideNavWidth: var(--sideNavWidthCollapsed)}:host mat-drawer-content{grid-template-areas:\"header header\" \"left-sidenav main\"}}:host mat-drawer-content header{grid-area:header}:host mat-drawer-content onemrva-layout-left-sidenav{grid-area:left-sidenav;border-right:1px solid var(--mat-sys-outline-variant)}@media screen and (max-width:640px){:host mat-drawer-content onemrva-layout-left-sidenav{display:none}}:host mat-drawer-content #language-trigger{display:flex}:host mat-drawer-content #language-trigger__child{border:1px solid var(--mat-sys-outline-variant);border-radius:500px}:host mat-drawer-content #language-trigger:hover{background:transparent}:host mat-drawer-content #language-trigger img{width:22px;height:26px}:host mat-drawer-content main{display:block;grid-area:main;position:relative;width:100%;overflow-y:auto;max-height:calc(100vh - var(--layout-header-height));max-width:calc(100vw - var(--sideNavWidth));transition:max-width .3s ease}:host mat-drawer-content main>.notification{z-index:999;position:sticky;top:0}:host mat-drawer-content main>section{width:95%;max-width:1400px;margin-left:auto;margin-right:auto;min-height:calc(100vh - var(--layout-header-height))}:host mat-drawer-content.no-sidenav{grid-template-columns:1fr;grid-template-areas:\"header\" \"main\"}:host mat-drawer-content.no-sidenav main{max-width:100vw}:host mat-drawer{max-height:100vh;overflow:hidden}:host mat-drawer:not(.side-menu){padding:var(--double-spacer);background:var(--mat-sys-surface-container-high)}:host mat-drawer.xsmall{width:20%}:host mat-drawer.small{width:30%}:host mat-drawer.medium{width:50%}:host mat-drawer.large{width:60%}:host mat-drawer.xlarge{width:70%}:host mat-drawer.xxlarge{width:90%}@media screen and (max-width:640px){:host mat-drawer{width:99%!important}}nav a.disabled{pointer-events:none}\n"] }]
|
|
674
680
|
}], ctorParameters: () => [], propDecorators: { routes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => LayoutRouteComponent), { isSignal: true }] }], title: [{ type: i0.ContentChild, args: [i0.forwardRef(() => LayoutTitleComponent), { isSignal: true }] }], loginMenu: [{ type: i0.ContentChild, args: [i0.forwardRef(() => LayoutLoginMenuComponent), { isSignal: true }] }], content: [{ type: i0.ContentChild, args: [i0.forwardRef(() => LayoutContentComponent), { isSignal: true }] }], afterNav: [{ type: i0.ContentChild, args: [i0.forwardRef(() => LayoutAfterNavComponent), { isSignal: true }] }], footer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => LayoutFooterComponent), { isSignal: true }] }], logo: [{ type: i0.Input, args: [{ isSignal: true, alias: "logo", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }], environment: [{ type: i0.Input, args: [{ isSignal: true, alias: "environment", required: false }] }], logoRedictionUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoRedictionUrl", required: false }] }], profile: [{ type: i0.Input, args: [{ isSignal: true, alias: "profile", required: false }] }], login: [{ type: i0.Output, args: ["login"] }], logout: [{ type: i0.Output, args: ["logout"] }], drawer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => MatDrawer), { isSignal: true }] }], drawerHost: [{ type: i0.ViewChild, args: [i0.forwardRef(() => DrawerHostDirective), { isSignal: true }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], showThemeSwitcher: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeSwitcher", required: false }] }] } });
|
|
675
681
|
|
|
676
682
|
class LayoutSidenavTitleComponent {
|