@onemrvapublic/design-system 22.0.0-develop.9 → 22.0.1-develop.1
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 +4 -3
- package/card/src/onemrva-card.component.scss +23 -0
- package/fesm2022/onemrvapublic-design-system-card.mjs +32 -14
- package/fesm2022/onemrvapublic-design-system-card.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-collapsible-page-divider.mjs +3 -3
- package/fesm2022/onemrvapublic-design-system-flag-icon.mjs +13 -3
- package/fesm2022/onemrvapublic-design-system-flag-icon.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-layout.mjs +193 -59
- package/fesm2022/onemrvapublic-design-system-layout.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-address.mjs +3 -3
- package/fesm2022/onemrvapublic-design-system-mat-avatar.mjs +7 -18
- package/fesm2022/onemrvapublic-design-system-mat-avatar.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-breadcrumb.mjs +20 -10
- package/fesm2022/onemrvapublic-design-system-mat-breadcrumb.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-carousel.mjs +24 -6
- package/fesm2022/onemrvapublic-design-system-mat-carousel.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-choice-chip.mjs +13 -3
- package/fesm2022/onemrvapublic-design-system-mat-choice-chip.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-copy-to-clipboard.mjs +13 -3
- package/fesm2022/onemrvapublic-design-system-mat-copy-to-clipboard.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-country-item.mjs +13 -3
- package/fesm2022/onemrvapublic-design-system-mat-country-item.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-datepicker-header.mjs +11 -3
- package/fesm2022/onemrvapublic-design-system-mat-datepicker-header.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-empty-row.mjs +10 -3
- package/fesm2022/onemrvapublic-design-system-mat-empty-row.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-file-upload.mjs +39 -19
- package/fesm2022/onemrvapublic-design-system-mat-file-upload.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-address.mjs +16 -6
- package/fesm2022/onemrvapublic-design-system-mat-input-address.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-birthplace.mjs +13 -3
- package/fesm2022/onemrvapublic-design-system-mat-input-birthplace.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-country.mjs +13 -3
- package/fesm2022/onemrvapublic-design-system-mat-input-country.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-enterprise-number.mjs +13 -3
- package/fesm2022/onemrvapublic-design-system-mat-input-enterprise-number.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-iban.mjs +13 -3
- package/fesm2022/onemrvapublic-design-system-mat-input-iban.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-input-phone.mjs +16 -6
- package/fesm2022/onemrvapublic-design-system-mat-input-phone.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-message-box.mjs +17 -7
- package/fesm2022/onemrvapublic-design-system-mat-message-box.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-multi-select.mjs +17 -7
- package/fesm2022/onemrvapublic-design-system-mat-multi-select.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-navigation.mjs +39 -9
- package/fesm2022/onemrvapublic-design-system-mat-navigation.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-notification.mjs +13 -3
- package/fesm2022/onemrvapublic-design-system-mat-notification.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-paginator.mjs +18 -8
- package/fesm2022/onemrvapublic-design-system-mat-paginator.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-panel.mjs +72 -22
- package/fesm2022/onemrvapublic-design-system-mat-panel.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-pop-over.mjs +43 -13
- package/fesm2022/onemrvapublic-design-system-mat-pop-over.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-progress-bar.mjs +13 -3
- package/fesm2022/onemrvapublic-design-system-mat-progress-bar.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-select-search.mjs +23 -16
- package/fesm2022/onemrvapublic-design-system-mat-select-search.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-selectable-box.mjs +17 -7
- package/fesm2022/onemrvapublic-design-system-mat-selectable-box.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-side-menu.mjs +17 -7
- package/fesm2022/onemrvapublic-design-system-mat-side-menu.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-skeleton.mjs +11 -14
- package/fesm2022/onemrvapublic-design-system-mat-skeleton.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-spinner.mjs +18 -10
- package/fesm2022/onemrvapublic-design-system-mat-spinner.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-stepper.mjs +17 -7
- package/fesm2022/onemrvapublic-design-system-mat-stepper.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-sticker.mjs +15 -7
- package/fesm2022/onemrvapublic-design-system-mat-sticker.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-table-of-content.mjs +20 -16
- package/fesm2022/onemrvapublic-design-system-mat-table-of-content.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-task-list.mjs +56 -16
- package/fesm2022/onemrvapublic-design-system-mat-task-list.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-toast.mjs +15 -7
- package/fesm2022/onemrvapublic-design-system-mat-toast.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-mat-tooltip.mjs +22 -12
- package/fesm2022/onemrvapublic-design-system-mat-tooltip.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-page-error.mjs +24 -6
- package/fesm2022/onemrvapublic-design-system-page-error.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-page-not-found.mjs +48 -16
- package/fesm2022/onemrvapublic-design-system-page-not-found.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-shared.mjs +109 -90
- package/fesm2022/onemrvapublic-design-system-shared.mjs.map +1 -1
- package/fesm2022/onemrvapublic-design-system-timeline.mjs +7 -7
- 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/mat-paginator/src/onemrva-mat-paginator.component.scss +2 -31
- package/mat-tooltip/src/onemrva-mat-tooltip.component.scss +1 -0
- package/package.json +3 -3
- package/theme/overrides/_form-field.scss +2 -0
- package/theme/overrides/_select.scss +2 -1
- package/theme/overrides/_table.scss +8 -11
- package/theme/palettes/_palette.scss +1 -1
- package/types/onemrvapublic-design-system-card.d.ts +18 -9
- 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,13 @@ 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.
|
|
36
|
+
### 22.0.1-develop.1
|
|
37
37
|
|
|
38
|
-
|
|
38
|
+
## [22.0.1-develop.1](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/compare/v22.0.0...v22.0.1-develop.1) (2026-08-06)
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
### Bug Fixes
|
|
42
42
|
|
|
43
|
-
* **
|
|
43
|
+
* **translation:** cleanup of translations ([d5572d0](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/d5572d0c43484a92fdcfa496e49463ef1f96234f))
|
|
44
|
+
* **paginator:** undo cleanup arrow ([cef5267](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/cef5267e1da9b16f08246b808f8f02d1d25f41d3))
|
|
44
45
|
|
|
@@ -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,18 +5,36 @@ 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. */
|
|
11
21
|
this.type = input('no-background', /* @ts-ignore */
|
|
12
22
|
...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
13
|
-
this.
|
|
14
|
-
...(ngDevMode ? [{ debugName: "
|
|
15
|
-
this.imageSrc = input('', /* @ts-ignore */
|
|
16
|
-
...(ngDevMode ? [{ debugName: "imageSrc" }] : /* istanbul ignore next */ []));
|
|
23
|
+
this.imageSrc = input(/* @ts-ignore */
|
|
24
|
+
...(ngDevMode ? [undefined, { debugName: "imageSrc" }] : /* istanbul ignore next */ []));
|
|
17
25
|
this.imageAlt = input('', /* @ts-ignore */
|
|
18
26
|
...(ngDevMode ? [{ debugName: "imageAlt" }] : /* istanbul ignore next */ []));
|
|
19
|
-
this.hasImage = computed(() =>
|
|
27
|
+
this.hasImage = computed(() => {
|
|
28
|
+
if (!this.imageSrc()) {
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
else if (typeof this.imageSrc() === 'string') {
|
|
32
|
+
return !!this.imageSrc().trim();
|
|
33
|
+
}
|
|
34
|
+
else {
|
|
35
|
+
return false;
|
|
36
|
+
}
|
|
37
|
+
}, /* @ts-ignore */
|
|
20
38
|
...(ngDevMode ? [{ debugName: "hasImage" }] : /* istanbul ignore next */ []));
|
|
21
39
|
this.label = input('', /* @ts-ignore */
|
|
22
40
|
...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
|
|
@@ -38,10 +56,10 @@ class OnemrvaCardComponent {
|
|
|
38
56
|
this.width = input(/* @ts-ignore */
|
|
39
57
|
...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
|
|
40
58
|
}
|
|
41
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
42
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
59
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
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 }); }
|
|
43
61
|
}
|
|
44
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
62
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaCardComponent, decorators: [{
|
|
45
63
|
type: Component,
|
|
46
64
|
args: [{ selector: 'onemrva-card', imports: [MatIconModule, MatTooltipModule], standalone: true, encapsulation: ViewEncapsulation.None, host: {
|
|
47
65
|
'[style.width]': 'width()',
|
|
@@ -52,15 +70,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.1", ngImpor
|
|
|
52
70
|
'[class.onemrva-card--has-image]': 'hasImage()',
|
|
53
71
|
'[class.onemrva-card--colored-title]': 'coloredTitle() === true',
|
|
54
72
|
'[class.onemrva-card--plain-title]': 'coloredTitle() === false',
|
|
55
|
-
}, 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"] }]
|
|
56
|
-
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }],
|
|
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"] }]
|
|
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 }] }] } });
|
|
57
75
|
|
|
58
76
|
class OnemrvaCardModule {
|
|
59
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
60
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.
|
|
61
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.
|
|
77
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaCardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
78
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaCardModule, imports: [OnemrvaCardComponent], exports: [OnemrvaCardComponent] }); }
|
|
79
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaCardModule, imports: [OnemrvaCardComponent] }); }
|
|
62
80
|
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
81
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaCardModule, decorators: [{
|
|
64
82
|
type: NgModule,
|
|
65
83
|
args: [{
|
|
66
84
|
declarations: [],
|
|
@@ -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
|
|
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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"}
|
|
@@ -20,10 +20,10 @@ class OnemrvaCollapsiblePageDivider {
|
|
|
20
20
|
toggle() {
|
|
21
21
|
this.isCollapsed.update(collapsed => !collapsed);
|
|
22
22
|
}
|
|
23
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
24
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.
|
|
23
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaCollapsiblePageDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
24
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.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 }); }
|
|
25
25
|
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: OnemrvaCollapsiblePageDivider, decorators: [{
|
|
27
27
|
type: Component,
|
|
28
28
|
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"] }]
|
|
29
29
|
}], 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"] }] } });
|
|
@@ -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 */
|
|
@@ -30,10 +40,10 @@ class FlagIconComponent {
|
|
|
30
40
|
get url() {
|
|
31
41
|
return `${this.cdnUrl}/img/flags/${this.modeValue}/${this.normalizedCountryCode}.svg`;
|
|
32
42
|
}
|
|
33
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.
|
|
34
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.
|
|
43
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FlagIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
44
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: FlagIconComponent, isStandalone: true, selector: "flag-icon", inputs: { countryCode: { classPropertyName: "countryCode", publicName: "countryCode", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<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", styles: [":host .fi{position:relative;display:inline-flex;margin-right:6px;vertical-align:middle}:host .fi.fis{width:1em}\n"], dependencies: [{ kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "decoding", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }] }); }
|
|
35
45
|
}
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: FlagIconComponent, decorators: [{
|
|
37
47
|
type: Component,
|
|
38
48
|
args: [{ selector: 'flag-icon', standalone: true, imports: [NgOptimizedImage], template: "<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", styles: [":host .fi{position:relative;display:inline-flex;margin-right:6px;vertical-align:middle}:host .fi.fis{width:1em}\n"] }]
|
|
39
49
|
}], ctorParameters: () => [], propDecorators: { countryCode: [{ type: i0.Input, args: [{ isSignal: true, alias: "countryCode", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }] } });
|
|
@@ -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;;;;"}
|