@onemrvapublic/design-system 22.0.0-develop.22 → 22.0.0-develop.24
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 +10 -3
- package/card/src/onemrva-card.component.scss +23 -0
- package/fesm2022/onemrvapublic-design-system-card.mjs +12 -2
- package/fesm2022/onemrvapublic-design-system-card.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-flag-icon.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-flag-icon.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-layout.mjs +135 -1
- package/fesm2022/onemrvapublic-design-system-layout.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-avatar.mjs +4 -15
- package/fesm2022/onemrvapublic-design-system-mat-avatar.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-breadcrumb.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-breadcrumb.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-carousel.mjs +18 -0
- package/fesm2022/onemrvapublic-design-system-mat-carousel.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-choice-chip.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-choice-chip.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-copy-to-clipboard.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-copy-to-clipboard.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-country-item.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-country-item.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-datepicker-header.mjs +8 -0
- package/fesm2022/onemrvapublic-design-system-mat-datepicker-header.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-empty-row.mjs +7 -0
- package/fesm2022/onemrvapublic-design-system-mat-empty-row.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-file-upload.mjs +20 -0
- package/fesm2022/onemrvapublic-design-system-mat-file-upload.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-address.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-input-address.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-birthplace.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-input-birthplace.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-country.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-input-country.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-enterprise-number.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-input-enterprise-number.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-iban.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-input-iban.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-phone.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-input-phone.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-message-box.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-message-box.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-multi-select.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-multi-select.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-navigation.mjs +30 -0
- package/fesm2022/onemrvapublic-design-system-mat-navigation.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-notification.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-notification.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-paginator.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-paginator.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-panel.mjs +50 -0
- package/fesm2022/onemrvapublic-design-system-mat-panel.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-pop-over.mjs +30 -0
- package/fesm2022/onemrvapublic-design-system-mat-pop-over.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-progress-bar.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-progress-bar.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-select-search.mjs +10 -3
- package/fesm2022/onemrvapublic-design-system-mat-select-search.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-selectable-box.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-selectable-box.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-side-menu.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-side-menu.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-skeleton.mjs +4 -7
- package/fesm2022/onemrvapublic-design-system-mat-skeleton.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-spinner.mjs +8 -0
- package/fesm2022/onemrvapublic-design-system-mat-spinner.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-stepper.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-stepper.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-sticker.mjs +8 -0
- package/fesm2022/onemrvapublic-design-system-mat-sticker.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-table-of-content.mjs +11 -7
- package/fesm2022/onemrvapublic-design-system-mat-table-of-content.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-task-list.mjs +40 -0
- package/fesm2022/onemrvapublic-design-system-mat-task-list.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-toast.mjs +8 -0
- package/fesm2022/onemrvapublic-design-system-mat-toast.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-tooltip.mjs +10 -0
- package/fesm2022/onemrvapublic-design-system-mat-tooltip.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-page-error.mjs +18 -0
- package/fesm2022/onemrvapublic-design-system-page-error.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-page-not-found.mjs +32 -0
- package/fesm2022/onemrvapublic-design-system-page-not-found.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-shared.mjs +24 -16
- package/fesm2022/onemrvapublic-design-system-shared.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-timeline.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system.mjs +1 -1
- package/fesm2022/onemrvapublic-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/types/onemrvapublic-design-system-card.d.ts +11 -1
- package/types/onemrvapublic-design-system-flag-icon.d.ts +10 -0
- package/types/onemrvapublic-design-system-layout.d.ts +132 -0
- package/types/onemrvapublic-design-system-mat-avatar.d.ts +4 -15
- package/types/onemrvapublic-design-system-mat-breadcrumb.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-carousel.d.ts +18 -0
- package/types/onemrvapublic-design-system-mat-choice-chip.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-copy-to-clipboard.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-country-item.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-datepicker-header.d.ts +8 -0
- package/types/onemrvapublic-design-system-mat-empty-row.d.ts +7 -0
- package/types/onemrvapublic-design-system-mat-file-upload.d.ts +20 -0
- package/types/onemrvapublic-design-system-mat-input-address.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-input-birthplace.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-input-country.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-input-enterprise-number.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-input-iban.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-input-phone.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-message-box.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-multi-select.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-navigation.d.ts +20 -0
- package/types/onemrvapublic-design-system-mat-notification.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-paginator.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-panel.d.ts +50 -0
- package/types/onemrvapublic-design-system-mat-pop-over.d.ts +30 -0
- package/types/onemrvapublic-design-system-mat-progress-bar.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-select-search.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-selectable-box.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-side-menu.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-skeleton.d.ts +4 -7
- package/types/onemrvapublic-design-system-mat-spinner.d.ts +8 -0
- package/types/onemrvapublic-design-system-mat-stepper.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-sticker.d.ts +8 -0
- package/types/onemrvapublic-design-system-mat-table-of-content.d.ts +10 -0
- package/types/onemrvapublic-design-system-mat-task-list.d.ts +40 -0
- package/types/onemrvapublic-design-system-mat-toast.d.ts +8 -0
- package/types/onemrvapublic-design-system-mat-tooltip.d.ts +10 -0
- package/types/onemrvapublic-design-system-page-error.d.ts +18 -0
- package/types/onemrvapublic-design-system-page-not-found.d.ts +32 -0
- package/types/onemrvapublic-design-system-shared.d.ts +13 -3
- package/types/onemrvapublic-design-system.d.ts +1 -1
package/README.md
CHANGED
|
@@ -33,12 +33,19 @@ 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
|
-
### 22.0.0-develop.
|
|
36
|
+
### 22.0.0-develop.24
|
|
37
37
|
|
|
38
|
-
# [22.0.0-develop.
|
|
38
|
+
# [22.0.0-develop.24](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/compare/v22.0.0-develop.23...v22.0.0-develop.24) (2026-07-30)
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
### Bug Fixes
|
|
42
42
|
|
|
43
|
-
*
|
|
43
|
+
* **mcp-server:** accept ?project= for clients that drop headers ([cdf9a09](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/cdf9a09f413a537cd16c311f85f32d3a8dee5301))
|
|
44
|
+
* **translations:** improve managing of translations from DS ([7b8370c](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/7b8370c000f6fdf04586489a0f99a85e9e8245eb))
|
|
45
|
+
* **mcp-server:** write JetBrains config to .idea/mcp.json ([4108c22](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/4108c22412ac1a7a185eb7ddde7b432dbb9bc065))
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
### Features
|
|
49
|
+
|
|
50
|
+
* **mcp-server:** jetbrains setup trusts the OS cert store so IntelliJ works like VS Code ([a6b4274](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/a6b427414fa6181d07f50fa9e819dcc7820bb163))
|
|
44
51
|
|
|
@@ -106,6 +106,29 @@ onemrva-card {
|
|
|
106
106
|
gap: var(--quarter-spacer, 0.125rem);
|
|
107
107
|
}
|
|
108
108
|
|
|
109
|
+
.onemrva-card__avatar {
|
|
110
|
+
flex-shrink: 0;
|
|
111
|
+
display: flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
margin-right: var(--spacer, 0.5rem);
|
|
114
|
+
|
|
115
|
+
&:empty {
|
|
116
|
+
display: none;
|
|
117
|
+
margin-right: 0;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.onemrva-card__content {
|
|
122
|
+
display: flex;
|
|
123
|
+
flex-direction: column;
|
|
124
|
+
gap: var(--spacer, 0.5rem);
|
|
125
|
+
|
|
126
|
+
// Collapse when nothing is projected — keeps image/header-only cards unchanged.
|
|
127
|
+
&:empty {
|
|
128
|
+
display: none;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
109
132
|
.onemrva-card__meta {
|
|
110
133
|
flex: 1;
|
|
111
134
|
min-width: 0;
|
|
@@ -5,6 +5,16 @@ import { MatIconModule } from '@angular/material/icon';
|
|
|
5
5
|
import * as i2 from '@angular/material/tooltip';
|
|
6
6
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
7
7
|
|
|
8
|
+
/**
|
|
9
|
+
* Content card with configurable image, border, and fill variants.
|
|
10
|
+
*
|
|
11
|
+
* Exposes 12 inputs and 0 outputs.
|
|
12
|
+
* Inputs: type: 'no-background' | 'outline' | 'background', image, imageSrc, imageAlt, label, title, subtitle, description, helpText, coloredTitle: boolean, textColor: string, width: string.
|
|
13
|
+
* Outputs: none.
|
|
14
|
+
*
|
|
15
|
+
* @MatKeywords card, container, content, surface, panel
|
|
16
|
+
* @MatGroup Card
|
|
17
|
+
*/
|
|
8
18
|
class OnemrvaCardComponent {
|
|
9
19
|
constructor() {
|
|
10
20
|
/** Visual variant of the card. */
|
|
@@ -47,7 +57,7 @@ class OnemrvaCardComponent {
|
|
|
47
57
|
...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
|
|
48
58
|
}
|
|
49
59
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
50
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: OnemrvaCardComponent, isStandalone: true, selector: "onemrva-card", inputs: { type: { classPropertyName: "type", publicName: "type", 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 }); }
|
|
60
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: OnemrvaCardComponent, isStandalone: true, selector: "onemrva-card", inputs: { type: { classPropertyName: "type", publicName: "type", 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__avatar\">\n <ng-content select=\"[cardAvatar]\" />\n </div>\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__content\">\n <ng-content />\n </div>\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__avatar{flex-shrink:0;display:flex;align-items:center;margin-right:var(--spacer, .5rem)}.onemrva-card__avatar:empty{display:none;margin-right:0}.onemrva-card__content{display:flex;flex-direction:column;gap:var(--spacer, .5rem)}.onemrva-card__content:empty{display:none}.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 }); }
|
|
51
61
|
}
|
|
52
62
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaCardComponent, decorators: [{
|
|
53
63
|
type: Component,
|
|
@@ -60,7 +70,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
60
70
|
'[class.onemrva-card--has-image]': 'hasImage()',
|
|
61
71
|
'[class.onemrva-card--colored-title]': 'coloredTitle() === true',
|
|
62
72
|
'[class.onemrva-card--plain-title]': 'coloredTitle() === false',
|
|
63
|
-
}, 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"] }]
|
|
73
|
+
}, 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__avatar\">\n <ng-content select=\"[cardAvatar]\" />\n </div>\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__content\">\n <ng-content />\n </div>\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__avatar{flex-shrink:0;display:flex;align-items:center;margin-right:var(--spacer, .5rem)}.onemrva-card__avatar:empty{display:none;margin-right:0}.onemrva-card__content{display:flex;flex-direction:column;gap:var(--spacer, .5rem)}.onemrva-card__content:empty{display:none}.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"] }]
|
|
64
74
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", 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 }] }] } });
|
|
65
75
|
|
|
66
76
|
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, 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 imageSrc = input<string | undefined>();\n readonly imageAlt = input<string | undefined>('');\n readonly hasImage = computed(() => {\n if (!this.imageSrc()) {\n return false;\n } else if (typeof this.imageSrc() === 'string') {\n return !!this.imageSrc()!.trim();\n } else {\n return false;\n }\n });\n readonly label = input<string | undefined>('');\n readonly title = input<string | undefined>('');\n readonly subtitle = input<string | undefined>('');\n readonly description = input<string | undefined>('');\n /** Tooltip text shown via the help icon. When empty, the icon is hidden. */\n readonly helpText = input<string | undefined>('');\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":";;;;;;;
|
|
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/**\n * Content card with configurable image, border, and fill variants.\n *\n * Exposes 12 inputs and 0 outputs.\n * Inputs: type: 'no-background' | 'outline' | 'background', image, imageSrc, imageAlt, label, title, subtitle, description, helpText, coloredTitle: boolean, textColor: string, width: string.\n * Outputs: none.\n *\n * @MatKeywords card, container, content, surface, panel\n * @MatGroup Card\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 imageSrc = input<string | undefined>();\n readonly imageAlt = input<string | undefined>('');\n readonly hasImage = computed(() => {\n if (!this.imageSrc()) {\n return false;\n } else if (typeof this.imageSrc() === 'string') {\n return !!this.imageSrc()!.trim();\n } else {\n return false;\n }\n });\n readonly label = input<string | undefined>('');\n readonly title = input<string | undefined>('');\n readonly subtitle = input<string | undefined>('');\n readonly description = input<string | undefined>('');\n /** Tooltip text shown via the help icon. When empty, the icon is hidden. */\n readonly helpText = input<string | undefined>('');\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__avatar\">\n <ng-content select=\"[cardAvatar]\" />\n </div>\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__content\">\n <ng-content />\n </div>\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":"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"}
|
|
@@ -3,6 +3,16 @@ import { input, inject, Component } from '@angular/core';
|
|
|
3
3
|
import { NgOptimizedImage } from '@angular/common';
|
|
4
4
|
import { OnemRvaCDNService } from '@onemrvapublic/design-system/shared';
|
|
5
5
|
|
|
6
|
+
/**
|
|
7
|
+
* Country flag image resolved from an ISO 3166-1 alpha-2 code.
|
|
8
|
+
*
|
|
9
|
+
* Exposes 3 inputs and 0 outputs.
|
|
10
|
+
* Inputs: countryCode: string | null | undefined, mode: 'square' | 'rectangle', width.
|
|
11
|
+
* Outputs: none.
|
|
12
|
+
*
|
|
13
|
+
* @MatKeywords flag, country, icon, locale
|
|
14
|
+
* @MatGroup Misc
|
|
15
|
+
*/
|
|
6
16
|
class FlagIconComponent {
|
|
7
17
|
constructor() {
|
|
8
18
|
this.countryCode = input('xx', /* @ts-ignore */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"onemrvapublic-design-system-flag-icon.mjs","sources":["../../../../projects/onemrva/design-system/flag-icon/src/flag-icon.component.ts","../../../../projects/onemrva/design-system/flag-icon/src/flag-icon.component.html","../../../../projects/onemrva/design-system/flag-icon/onemrvapublic-design-system-flag-icon.ts"],"sourcesContent":["import { Component, inject, input } from '@angular/core';\nimport { NgOptimizedImage } from '@angular/common';\nimport { OnemRvaCDNService } from '@onemrvapublic/design-system/shared';\n\n@Component({\n selector: 'flag-icon',\n standalone: true,\n imports: [NgOptimizedImage],\n templateUrl: './flag-icon.component.html',\n styleUrl: './flag-icon.component.scss',\n})\nexport class FlagIconComponent {\n readonly countryCode = input<string | null | undefined>('xx');\n\n readonly mode = input<'square' | 'rectangle'>('rectangle');\n\n readonly width = input(26);\n height: number = this.width();\n\n private readonly cdnUrl: string;\n private cdn = inject(OnemRvaCDNService);\n\n constructor() {\n this.cdnUrl = this.cdn.getUrl();\n if (this.mode() === 'rectangle') {\n this.height = this.width() / 1.33;\n }\n }\n\n get normalizedCountryCode() {\n return (this.countryCode()?.trim() || 'xx').toLowerCase();\n }\n\n get modeValue() {\n if (this.mode() === 'rectangle') {\n return '4x3';\n }\n return '1x1';\n }\n\n get url() {\n return `${this.cdnUrl}/img/flags/${this.modeValue}/${this.normalizedCountryCode}.svg`;\n }\n}\n","<span\n [class]=\"{\n fi: true,\n fis: mode() === 'square',\n }\"\n>\n <img\n [alt]=\"normalizedCountryCode\"\n loading=\"lazy\"\n [ngSrc]=\"url\"\n [width]=\"width()\"\n [height]=\"height\"\n />\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"onemrvapublic-design-system-flag-icon.mjs","sources":["../../../../projects/onemrva/design-system/flag-icon/src/flag-icon.component.ts","../../../../projects/onemrva/design-system/flag-icon/src/flag-icon.component.html","../../../../projects/onemrva/design-system/flag-icon/onemrvapublic-design-system-flag-icon.ts"],"sourcesContent":["import { Component, inject, input } from '@angular/core';\nimport { NgOptimizedImage } from '@angular/common';\nimport { OnemRvaCDNService } from '@onemrvapublic/design-system/shared';\n\n/**\n * Country flag image resolved from an ISO 3166-1 alpha-2 code.\n *\n * Exposes 3 inputs and 0 outputs.\n * Inputs: countryCode: string | null | undefined, mode: 'square' | 'rectangle', width.\n * Outputs: none.\n *\n * @MatKeywords flag, country, icon, locale\n * @MatGroup Misc\n */\n@Component({\n selector: 'flag-icon',\n standalone: true,\n imports: [NgOptimizedImage],\n templateUrl: './flag-icon.component.html',\n styleUrl: './flag-icon.component.scss',\n})\nexport class FlagIconComponent {\n readonly countryCode = input<string | null | undefined>('xx');\n\n readonly mode = input<'square' | 'rectangle'>('rectangle');\n\n readonly width = input(26);\n height: number = this.width();\n\n private readonly cdnUrl: string;\n private cdn = inject(OnemRvaCDNService);\n\n constructor() {\n this.cdnUrl = this.cdn.getUrl();\n if (this.mode() === 'rectangle') {\n this.height = this.width() / 1.33;\n }\n }\n\n get normalizedCountryCode() {\n return (this.countryCode()?.trim() || 'xx').toLowerCase();\n }\n\n get modeValue() {\n if (this.mode() === 'rectangle') {\n return '4x3';\n }\n return '1x1';\n }\n\n get url() {\n return `${this.cdnUrl}/img/flags/${this.modeValue}/${this.normalizedCountryCode}.svg`;\n }\n}\n","<span\n [class]=\"{\n fi: true,\n fis: mode() === 'square',\n }\"\n>\n <img\n [alt]=\"normalizedCountryCode\"\n loading=\"lazy\"\n [ngSrc]=\"url\"\n [width]=\"width()\"\n [height]=\"height\"\n />\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;;;;;;;;;AASG;MAQU,iBAAiB,CAAA;AAW5B,IAAA,WAAA,GAAA;QAVS,IAAA,CAAA,WAAW,GAAG,KAAK,CAA4B,IAAI;wFAAC;QAEpD,IAAA,CAAA,IAAI,GAAG,KAAK,CAAyB,WAAW;iFAAC;QAEjD,IAAA,CAAA,KAAK,GAAG,KAAK,CAAC,EAAE;kFAAC;AAC1B,QAAA,IAAA,CAAA,MAAM,GAAW,IAAI,CAAC,KAAK,EAAE;AAGrB,QAAA,IAAA,CAAA,GAAG,GAAG,MAAM,CAAC,iBAAiB,CAAC;QAGrC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,MAAM,EAAE;AAC/B,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,WAAW,EAAE;YAC/B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI;QACnC;IACF;AAEA,IAAA,IAAI,qBAAqB,GAAA;AACvB,QAAA,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,IAAI,EAAE,IAAI,IAAI,EAAE,WAAW,EAAE;IAC3D;AAEA,IAAA,IAAI,SAAS,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,WAAW,EAAE;AAC/B,YAAA,OAAO,KAAK;QACd;AACA,QAAA,OAAO,KAAK;IACd;AAEA,IAAA,IAAI,GAAG,GAAA;AACL,QAAA,OAAO,CAAA,EAAG,IAAI,CAAC,MAAM,CAAA,WAAA,EAAc,IAAI,CAAC,SAAS,CAAA,CAAA,EAAI,IAAI,CAAC,qBAAqB,MAAM;IACvF;8GA/BW,iBAAiB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;kGAAjB,iBAAiB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,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,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,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECrB9B,yOAcA,EAAA,MAAA,EAAA,CAAA,mHAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDGY,gBAAgB,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,UAAA,EAAA,cAAA,EAAA,wBAAA,EAAA,MAAA,EAAA,aAAA,EAAA,mBAAA,EAAA,KAAA,EAAA,QAAA,CAAA,EAAA,CAAA,EAAA,CAAA,CAAA;;2FAIf,iBAAiB,EAAA,UAAA,EAAA,CAAA;kBAP7B,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,WAAW,EAAA,UAAA,EACT,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,CAAC,EAAA,QAAA,EAAA,yOAAA,EAAA,MAAA,EAAA,CAAA,mHAAA,CAAA,EAAA;;;AEjB7B;;AAEG;;;;"}
|
|
@@ -63,6 +63,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
63
63
|
}]
|
|
64
64
|
}] });
|
|
65
65
|
|
|
66
|
+
/**
|
|
67
|
+
* Collapsible left sidenav panel with navigation item list.
|
|
68
|
+
*
|
|
69
|
+
* Exposes 2 inputs and 0 outputs.
|
|
70
|
+
* Inputs: items: NavItem[], isCollapsed.
|
|
71
|
+
* Outputs: none.
|
|
72
|
+
*
|
|
73
|
+
* @MatKeywords layout, sidenav, navigation, sidebar, collapse
|
|
74
|
+
* @MatGroup Layout
|
|
75
|
+
*/
|
|
66
76
|
class LayoutLeftSidenavComponent {
|
|
67
77
|
constructor() {
|
|
68
78
|
this.items = model([], /* @ts-ignore */
|
|
@@ -93,6 +103,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
93
103
|
}, 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;min-height:calc(100vh - var(--layout-header-height));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{width:var(--sideNavWidthCollapsed)}: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"] }]
|
|
94
104
|
}], 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"] }] } });
|
|
95
105
|
|
|
106
|
+
/**
|
|
107
|
+
* Child route item nested under a top-level navigation route.
|
|
108
|
+
*
|
|
109
|
+
* Exposes 6 inputs and 0 outputs.
|
|
110
|
+
* Inputs: customNgClass: any, routerLink: typeof RouterLink.prototype.routerLink | string, routerLinkActiveOptions: any, dataCy: string, label: string, icon: string.
|
|
111
|
+
* Outputs: none.
|
|
112
|
+
*
|
|
113
|
+
* @MatKeywords layout, subroute, route, navigation, menu-item
|
|
114
|
+
* @MatGroup Layout
|
|
115
|
+
*/
|
|
96
116
|
class LayoutSubrouteComponent {
|
|
97
117
|
constructor() {
|
|
98
118
|
this.cd = inject(ChangeDetectorRef);
|
|
@@ -152,6 +172,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
152
172
|
args: [{ selector: 'onemrva-layout-subroute', standalone: true, template: "<ng-template>\n {{ label() }}\n</ng-template>\n" }]
|
|
153
173
|
}], propDecorators: { customNgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNgClass", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], subroutes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => LayoutSubrouteComponent), { isSignal: true }] }] } });
|
|
154
174
|
|
|
175
|
+
/**
|
|
176
|
+
* Top-level navigation route item with optional sub-items.
|
|
177
|
+
*
|
|
178
|
+
* Exposes 7 inputs and 0 outputs.
|
|
179
|
+
* Inputs: customNgClass: any, routerLink: string, routerLinkActiveOptions: any, dataCy: string, baseRouteForActiveMenu: string, label: string, icon: string.
|
|
180
|
+
* Outputs: none.
|
|
181
|
+
*
|
|
182
|
+
* @MatKeywords layout, route, navigation, menu-item
|
|
183
|
+
* @MatGroup Layout
|
|
184
|
+
*/
|
|
155
185
|
class LayoutRouteComponent {
|
|
156
186
|
constructor() {
|
|
157
187
|
this.customNgClass = input(/* @ts-ignore */
|
|
@@ -214,6 +244,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
214
244
|
], template: "<ng-template #navTpl>\n @if (!hasSubroutes()) {\n {{ label() }}\n } @else if (hasSubroutes()) {\n <span\n class=\"subroutes-menu-trigger\"\n [matMenuTriggerFor]=\"menu\"\n role=\"button\"\n >\n <span>\n {{ label() }}\n </span>\n <mat-icon>expand_more</mat-icon>\n </span>\n <mat-menu #menu class=\"layout-menu-offset\">\n @for (e of subroutes(); track e.routerLink()) {\n @if (!e.hasSubroutes()) {\n <button\n mat-menu-item\n [routerLink]=\"e.routerLink()\"\n routerLinkActive=\"active\"\n [attr.data-cy]=\"e.dataCy()\"\n >\n @if (e.template(); as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\" />\n }\n </button>\n }\n @if (e.hasSubroutes()) {\n <button\n mat-menu-item\n [matMenuTriggerFor]=\"submenu\"\n [class.active]=\"e.hasActiveSubroute()\"\n [attr.data-cy]=\"e.dataCy()\"\n aria-haspopup=\"true\"\n >\n @if (e.template(); as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\" />\n }\n </button>\n <mat-menu #submenu>\n @for (es of e.subroutes(); track es.routerLink()) {\n <button\n mat-menu-item\n [routerLink]=\"es.routerLink()\"\n routerLinkActive=\"active\"\n >\n @if (es.template(); as routeTemplate) {\n <ng-container *ngTemplateOutlet=\"routeTemplate\" />\n }\n </button>\n }\n </mat-menu>\n }\n }\n </mat-menu>\n }\n</ng-template>\n", styles: [".subroutes-menu-trigger{display:flex;align-items:center}\n"] }]
|
|
215
245
|
}], propDecorators: { customNgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNgClass", required: false }] }], template: [{ type: i0.ViewChild, args: ['navTpl', { isSignal: true }] }], routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], routerLinkActiveOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLinkActiveOptions", required: false }] }], dataCy: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataCy", required: false }] }], baseRouteForActiveMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "baseRouteForActiveMenu", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], subroutes: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => LayoutSubrouteComponent), { isSignal: true }] }] } });
|
|
216
246
|
|
|
247
|
+
/**
|
|
248
|
+
* Main content area slot in the application shell.
|
|
249
|
+
*
|
|
250
|
+
* Exposes 1 input and 0 outputs.
|
|
251
|
+
* Inputs: customNgClass: any.
|
|
252
|
+
* Outputs: none.
|
|
253
|
+
*
|
|
254
|
+
* @MatKeywords layout, content, main, page
|
|
255
|
+
* @MatGroup Layout
|
|
256
|
+
*/
|
|
217
257
|
class LayoutContentComponent {
|
|
218
258
|
constructor() {
|
|
219
259
|
this.customNgClass = input(/* @ts-ignore */
|
|
@@ -237,6 +277,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
237
277
|
}]
|
|
238
278
|
}], propDecorators: { customNgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNgClass", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
|
|
239
279
|
|
|
280
|
+
/**
|
|
281
|
+
* Page title slot in the application header toolbar.
|
|
282
|
+
*
|
|
283
|
+
* Exposes 1 input and 0 outputs.
|
|
284
|
+
* Inputs: customNgClass: any.
|
|
285
|
+
* Outputs: none.
|
|
286
|
+
*
|
|
287
|
+
* @MatKeywords layout, title, header, toolbar
|
|
288
|
+
* @MatGroup Layout
|
|
289
|
+
*/
|
|
240
290
|
class LayoutTitleComponent {
|
|
241
291
|
constructor() {
|
|
242
292
|
this.cd = inject(ChangeDetectorRef);
|
|
@@ -268,6 +318,14 @@ var Environment;
|
|
|
268
318
|
Environment["PROD"] = "PROD";
|
|
269
319
|
})(Environment || (Environment = {}));
|
|
270
320
|
|
|
321
|
+
/**
|
|
322
|
+
* Footer slot projected into the application shell.
|
|
323
|
+
*
|
|
324
|
+
* This component exposes no configurable inputs or outputs.
|
|
325
|
+
*
|
|
326
|
+
* @MatKeywords layout, footer, shell
|
|
327
|
+
* @MatGroup Layout
|
|
328
|
+
*/
|
|
271
329
|
class LayoutFooterComponent {
|
|
272
330
|
constructor() {
|
|
273
331
|
this.template = viewChild(TemplateRef, /* @ts-ignore */
|
|
@@ -293,6 +351,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
293
351
|
}]
|
|
294
352
|
}], propDecorators: { template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
|
|
295
353
|
|
|
354
|
+
/**
|
|
355
|
+
* User/login menu slot projected into the toolbar.
|
|
356
|
+
*
|
|
357
|
+
* Exposes 1 input and 0 outputs.
|
|
358
|
+
* Inputs: customNgClass: any.
|
|
359
|
+
* Outputs: none.
|
|
360
|
+
*
|
|
361
|
+
* @MatKeywords layout, login, user, menu, auth, toolbar
|
|
362
|
+
* @MatGroup Layout
|
|
363
|
+
*/
|
|
296
364
|
class LayoutLoginMenuComponent {
|
|
297
365
|
constructor() {
|
|
298
366
|
this.cd = inject(ChangeDetectorRef);
|
|
@@ -413,6 +481,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
413
481
|
}]
|
|
414
482
|
}] });
|
|
415
483
|
|
|
484
|
+
/**
|
|
485
|
+
* Sidenav with route list, language selector, and collapse support.
|
|
486
|
+
*
|
|
487
|
+
* Exposes 2 inputs and 0 outputs.
|
|
488
|
+
* Inputs: isSmall (required): boolean, languages: OnemRvaLanguage[].
|
|
489
|
+
* Outputs: none.
|
|
490
|
+
*
|
|
491
|
+
* @MatKeywords layout, sidenav, navigation, sidebar, routes
|
|
492
|
+
* @MatGroup Layout
|
|
493
|
+
*/
|
|
416
494
|
class LayoutSidenavComponent {
|
|
417
495
|
constructor() {
|
|
418
496
|
this.isSmall = input.required(/* @ts-ignore */
|
|
@@ -488,6 +566,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
488
566
|
], template: "@if (\n isSmall() &&\n (routes()?.toArray()?.length || (languages() && languages().length > 1))\n) {\n <div class=\"sidebar\">\n @if (isSmall() && routes()?.toArray()?.length) {\n <div class=\"navigation\">\n <div class=\"close-button\">\n <button\n type=\"button\"\n mat-icon-button\n (click)=\"close()\"\n data-cy=\"smallDeviceMenu\"\n attr.aria-label=\"{{ 'layout.menu' | translate }}\"\n >\n <mat-icon>close</mat-icon>\n </button>\n </div>\n <onemrva-mat-navigation [items]=\"items\" />\n </div>\n @if (languages() && languages().length > 1) {\n <div class=\"language-selector\">\n <mat-form-field>\n <mat-select\n [ngModel]=\"currentLanguage\"\n (selectionChange)=\"changeLanguage($event)\"\n >\n @for (lang of languages(); track lang.code) {\n <mat-option\n [value]=\"lang\"\n [attr.data-cy]=\"'language_' + lang.code\"\n >\n {{ lang.label }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n </div>\n }\n }\n </div>\n}\n", styles: [":host .close-button{display:flex;justify-content:flex-end;padding:var(--spacer)}:host .mobile-menu-item{display:flex;width:100%;background:var(--mat-sys-background);padding:var(--spacer);border:none;box-shadow:none;font-size:1.2rem;align-items:center;text-align:left}:host .mobile-menu-item:active,:host .mobile-menu-item.active{border-right:4px solid var(--mat-sys-secondary);font-weight:700!important}:host .mobile-menu-item mat-icon{margin-left:4px}:host .sidebar{overflow:scroll;display:flex;flex-direction:column;justify-content:space-between;height:100vh}:host .sidebar .language-selector mat-form-field{width:100%}:host .sidebar .language-selector{margin:var(--double-spacer);bottom:0}\n"] }]
|
|
489
567
|
}], propDecorators: { isSmall: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSmall", required: true }] }], routes: [{ type: i0.Input, args: [{ isSignal: true, alias: "routes", required: false }] }], languages: [{ type: i0.Input, args: [{ isSignal: true, alias: "languages", required: false }] }] } });
|
|
490
568
|
|
|
569
|
+
/**
|
|
570
|
+
* Slot projected after the navigation bar in the app shell.
|
|
571
|
+
*
|
|
572
|
+
* Exposes 1 input and 0 outputs.
|
|
573
|
+
* Inputs: customNgClass: any.
|
|
574
|
+
* Outputs: none.
|
|
575
|
+
*
|
|
576
|
+
* @MatKeywords layout, slot, after-nav
|
|
577
|
+
* @MatGroup Layout
|
|
578
|
+
*/
|
|
491
579
|
class LayoutAfterNavComponent {
|
|
492
580
|
constructor() {
|
|
493
581
|
this.cd = inject(ChangeDetectorRef);
|
|
@@ -511,6 +599,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
511
599
|
}]
|
|
512
600
|
}], propDecorators: { customNgClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNgClass", required: false }] }], template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
|
|
513
601
|
|
|
602
|
+
/**
|
|
603
|
+
* Application shell composing header, sidenav, content, and footer slots.
|
|
604
|
+
*
|
|
605
|
+
* Exposes 8 inputs and 2 outputs.
|
|
606
|
+
* Inputs: logo, languages: OnemRvaLanguage[], environment: Environment, logoRedictionUrl: (string | any[] | null) | undefined, profile: OnemRvaProfile | null, id, role, showThemeSwitcher.
|
|
607
|
+
* Outputs: login: void, logout: void.
|
|
608
|
+
*
|
|
609
|
+
* @MatKeywords layout, shell, page, app, sidenav, header, footer
|
|
610
|
+
* @MatGroup Layout
|
|
611
|
+
*/
|
|
514
612
|
class LayoutComponent {
|
|
515
613
|
toggleTheme(newTheme) {
|
|
516
614
|
// Force light theme only - dark mode is disabled
|
|
@@ -656,7 +754,9 @@ class LayoutComponent {
|
|
|
656
754
|
}
|
|
657
755
|
}
|
|
658
756
|
languageImg(language) {
|
|
659
|
-
const lang = (language?.code ||
|
|
757
|
+
const lang = (language?.code ||
|
|
758
|
+
this.translateService.getCurrentLang() ||
|
|
759
|
+
'').toUpperCase();
|
|
660
760
|
const finalImgCode = this.map[lang].imgCode || '';
|
|
661
761
|
return this.cdn.getImg(`flags/4x3/${finalImgCode}.svg`);
|
|
662
762
|
}
|
|
@@ -717,6 +817,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
717
817
|
], 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]=\"leftSidenavService.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\"\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.ACCENT\"\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 {{ currentLanguage }}\n <mat-icon style=\"width: 16px\">expand_more</mat-icon>\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 {{ 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\n @if (footer()?.template(); as footerTpl) {\n <footer class=\"onemrva-footer p text-center\">\n <div class=\"onemrva-layout-container\">\n <ng-container *ngTemplateOutlet=\"footerTpl\" />\n </div>\n </footer>\n }\n </section>\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);--mainContentSize: calc(100vh - var(--layout-header-height));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.collapsed onemrva-layout-left-sidenav{width: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:flex;flex-direction:column;grid-area:main;position:relative;width:100%;height:100vh;overflow-y:auto;max-height:var(--mainContentSize);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{display:flex;flex-direction:column;flex-grow:1;width:95%;max-width:1920px;margin-left:auto;margin-right:auto}: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}}:host .onemrva-footer{margin-top:auto;height:var(--layout-footer-height);max-height:var(--layout-footer-height);overflow:hidden}nav a.disabled{pointer-events:none}\n"] }]
|
|
718
818
|
}], 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 }] }] } });
|
|
719
819
|
|
|
820
|
+
/**
|
|
821
|
+
* Title slot at the top of the side navigation panel.
|
|
822
|
+
*
|
|
823
|
+
* This component exposes no configurable inputs or outputs.
|
|
824
|
+
*
|
|
825
|
+
* @MatKeywords layout, sidenav, title, navigation
|
|
826
|
+
* @MatGroup Layout
|
|
827
|
+
*/
|
|
720
828
|
class LayoutSidenavTitleComponent {
|
|
721
829
|
constructor() {
|
|
722
830
|
this.template = viewChild(TemplateRef, /* @ts-ignore */
|
|
@@ -742,6 +850,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
742
850
|
}]
|
|
743
851
|
}], propDecorators: { template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
|
|
744
852
|
|
|
853
|
+
/**
|
|
854
|
+
* Action buttons region at the bottom of a drawer panel.
|
|
855
|
+
*
|
|
856
|
+
* This component exposes no configurable inputs or outputs.
|
|
857
|
+
*
|
|
858
|
+
* @MatKeywords drawer, actions, sidebar
|
|
859
|
+
* @MatGroup Layout
|
|
860
|
+
*/
|
|
745
861
|
class LayoutDrawerActionsComponent {
|
|
746
862
|
constructor() {
|
|
747
863
|
this.drawerService = inject(OnemrvaDrawerService);
|
|
@@ -754,6 +870,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
754
870
|
args: [{ selector: 'onemrva-drawer-actions', standalone: true, template: "<ng-content />\n", styles: [":host{width:calc(100% - var(--double-spacer));display:flex;padding:var(--spacer);justify-content:flex-end}\n"] }]
|
|
755
871
|
}] });
|
|
756
872
|
|
|
873
|
+
/**
|
|
874
|
+
* Scrollable body region inside a drawer panel.
|
|
875
|
+
*
|
|
876
|
+
* This component exposes no configurable inputs or outputs.
|
|
877
|
+
*
|
|
878
|
+
* @MatKeywords drawer, content, sidebar
|
|
879
|
+
* @MatGroup Layout
|
|
880
|
+
*/
|
|
757
881
|
class LayoutDrawerContentComponent {
|
|
758
882
|
constructor() {
|
|
759
883
|
this.drawerService = inject(OnemrvaDrawerService);
|
|
@@ -766,6 +890,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
766
890
|
args: [{ selector: 'onemrva-drawer-content', standalone: true, template: "<span><ng-content /></span>\n", styles: [":host{background-color:var(--mat-sys-surface);padding:23px 32px;border-radius:var(--border-radius);display:flex;flex-grow:1;overflow:auto}\n"] }]
|
|
767
891
|
}] });
|
|
768
892
|
|
|
893
|
+
/**
|
|
894
|
+
* Title bar with close button for a drawer panel.
|
|
895
|
+
*
|
|
896
|
+
* Exposes 1 input and 0 outputs.
|
|
897
|
+
* Inputs: showClose.
|
|
898
|
+
* Outputs: none.
|
|
899
|
+
*
|
|
900
|
+
* @MatKeywords drawer, title, close, sidebar
|
|
901
|
+
* @MatGroup Layout
|
|
902
|
+
*/
|
|
769
903
|
class LayoutDrawerTitleComponent {
|
|
770
904
|
constructor() {
|
|
771
905
|
this.showClose = input(true, /* @ts-ignore */
|