@onemrvapublic/design-system 21.0.0-develop.3 → 21.0.0-develop.5
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
CHANGED
|
@@ -33,12 +33,12 @@ If you need access to our design system board, send us a message.
|
|
|
33
33
|
@Bram Decuypere (NL / EN)
|
|
34
34
|
## Changelog
|
|
35
35
|
|
|
36
|
-
### 21.0.0-develop.
|
|
36
|
+
### 21.0.0-develop.5
|
|
37
37
|
|
|
38
|
-
# [21.0.0-develop.
|
|
38
|
+
# [21.0.0-develop.5](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/compare/v21.0.0-develop.4...v21.0.0-develop.5) (2026-01-30)
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
### Bug Fixes
|
|
42
42
|
|
|
43
|
-
* **
|
|
43
|
+
* **typography:** remove the default headers so people use the material styles ([0e5567b](https://rvaonem.ghe.com/AS-DESIGN-SYSTEM/core/commit/0e5567b0b87e025e3491146f332084be5debd19b))
|
|
44
44
|
|
|
@@ -33,7 +33,7 @@ class OnemrvaMatSelectableBoxComponent {
|
|
|
33
33
|
}
|
|
34
34
|
}
|
|
35
35
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatSelectableBoxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
36
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: OnemrvaMatSelectableBoxComponent, isStandalone: true, selector: "onemrva-mat-selectable-box", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.id": "id()" } }, viewQueries: [{ propertyName: "radioButton", first: true, predicate: ["radioButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card\n [class.checked]=\"isChecked()\"\n [class.disabled]=\"disabled()\"\n class=\"onemrva-selectable-box m-m clickable\"\n (click)=\"triggerRadioClick()\"\n>\n <mat-card-title class=\"selectablebox-title\">\n <mat-radio-button\n #radioButton\n (change)=\"valueChanged($event)\"\n aria-label=\"Selected\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n />\n\n <mat-label class=\"mr\">\n <ng-content select=\"[title]\" />\n </mat-label>\n\n <mat-icon class=\"selectable-box-icon\" [size]=\"iconSize()\">\n <ng-content select=\"[icon]\" />\n </mat-icon>\n\n <span class=\"sticker\"><ng-content select=\"[sticker]\" /></span>\n </mat-card-title>\n\n <mat-card-content>\n <ng-content />\n </mat-card-content>\n</mat-card>\n", styles: ["mat-card.onemrva-selectable-box{border-radius:var(--half-border-radius);box-shadow:none;position:relative;color:var(--mat-sys-on-surface);border:2px solid transparent;background:var(--mat-sys-primary-container);-webkit-user-select:none;user-select:none}mat-card.onemrva-selectable-box
|
|
36
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.1.1", type: OnemrvaMatSelectableBoxComponent, isStandalone: true, selector: "onemrva-mat-selectable-box", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { properties: { "attr.id": "id()" } }, viewQueries: [{ propertyName: "radioButton", first: true, predicate: ["radioButton"], descendants: true, isSignal: true }], ngImport: i0, template: "<mat-card\n [class.checked]=\"isChecked()\"\n [class.disabled]=\"disabled()\"\n class=\"onemrva-selectable-box m-m clickable\"\n (click)=\"triggerRadioClick()\"\n>\n <mat-card-title class=\"selectablebox-title\">\n <mat-radio-button\n #radioButton\n (change)=\"valueChanged($event)\"\n aria-label=\"Selected\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n />\n\n <mat-label class=\"mr\">\n <ng-content select=\"[title]\" />\n </mat-label>\n\n <mat-icon class=\"selectable-box-icon\" [size]=\"iconSize()\">\n <ng-content select=\"[icon]\" />\n </mat-icon>\n\n <span class=\"sticker\"><ng-content select=\"[sticker]\" /></span>\n </mat-card-title>\n\n <mat-card-content>\n <ng-content />\n </mat-card-content>\n</mat-card>\n", styles: ["mat-card.onemrva-selectable-box{border-radius:var(--half-border-radius);box-shadow:none;position:relative;color:var(--mat-sys-on-surface);border:2px solid transparent;background:var(--mat-sys-primary-container);-webkit-user-select:none;user-select:none}mat-card.onemrva-selectable-box mat-icon{overflow:visible;color:var(--mat-sys-primary)}mat-card.onemrva-selectable-box mat-radio-button{pointer-events:none}mat-card.onemrva-selectable-box mat-card-title{display:flex;background:var(--mat-sys-primary-container);border-top-left-radius:var(--half-border-radius);border-top-right-radius:var(--half-border-radius);padding:var(--spacer-and-half) var(--spacer-and-half) var(--spacer-and-half) calc(var(--spacer-and-half) + var(--quad-spacer));align-items:center;box-shadow:none;color:inherit;font-family:var(--label-large-font-family, Poppins);font-size:var(--label-large-font-size, 16px);font-style:normal;font-weight:var(--label-large-font-weight, 500);line-height:var(--label-large-line-height, 21px)}mat-card.onemrva-selectable-box mat-card-title mat-label{display:flex;flex-grow:1}mat-card.onemrva-selectable-box mat-card-title mat-radio-button{position:absolute;left:2px}mat-card.onemrva-selectable-box.checked{border:2px solid var(--mat-sys-tertiary);overflow:hidden}mat-card.onemrva-selectable-box.checked mat-card-title{background:var(--mat-sys-tertiary-container)}mat-card.onemrva-selectable-box.disabled{opacity:.4;cursor:auto}mat-card.onemrva-selectable-box b,mat-card.onemrva-selectable-box strong{font-weight:600}mat-card.onemrva-selectable-box mat-card-content{background:var(--mat-sys-surface);padding:var(--spacer-and-half);border-bottom-left-radius:var(--half-border-radius);border-bottom-right-radius:var(--half-border-radius)}mat-card.onemrva-selectable-box mat-card-content:empty{display:none}\n"], dependencies: [{ kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: OnemRvaSizeDirective, selector: "mat-icon[size], onemrva-mat-skeleton[size], onemrva-mat-avatar[size], button[size]", inputs: ["size"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
37
37
|
}
|
|
38
38
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImport: i0, type: OnemrvaMatSelectableBoxComponent, decorators: [{
|
|
39
39
|
type: Component,
|
|
@@ -47,7 +47,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.1", ngImpor
|
|
|
47
47
|
OnemRvaSizeDirective,
|
|
48
48
|
], host: {
|
|
49
49
|
'[attr.id]': 'id()',
|
|
50
|
-
}, template: "<mat-card\n [class.checked]=\"isChecked()\"\n [class.disabled]=\"disabled()\"\n class=\"onemrva-selectable-box m-m clickable\"\n (click)=\"triggerRadioClick()\"\n>\n <mat-card-title class=\"selectablebox-title\">\n <mat-radio-button\n #radioButton\n (change)=\"valueChanged($event)\"\n aria-label=\"Selected\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n />\n\n <mat-label class=\"mr\">\n <ng-content select=\"[title]\" />\n </mat-label>\n\n <mat-icon class=\"selectable-box-icon\" [size]=\"iconSize()\">\n <ng-content select=\"[icon]\" />\n </mat-icon>\n\n <span class=\"sticker\"><ng-content select=\"[sticker]\" /></span>\n </mat-card-title>\n\n <mat-card-content>\n <ng-content />\n </mat-card-content>\n</mat-card>\n", styles: ["mat-card.onemrva-selectable-box{border-radius:var(--half-border-radius);box-shadow:none;position:relative;color:var(--mat-sys-on-surface);border:2px solid transparent;background:var(--mat-sys-primary-container);-webkit-user-select:none;user-select:none}mat-card.onemrva-selectable-box
|
|
50
|
+
}, template: "<mat-card\n [class.checked]=\"isChecked()\"\n [class.disabled]=\"disabled()\"\n class=\"onemrva-selectable-box m-m clickable\"\n (click)=\"triggerRadioClick()\"\n>\n <mat-card-title class=\"selectablebox-title\">\n <mat-radio-button\n #radioButton\n (change)=\"valueChanged($event)\"\n aria-label=\"Selected\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n />\n\n <mat-label class=\"mr\">\n <ng-content select=\"[title]\" />\n </mat-label>\n\n <mat-icon class=\"selectable-box-icon\" [size]=\"iconSize()\">\n <ng-content select=\"[icon]\" />\n </mat-icon>\n\n <span class=\"sticker\"><ng-content select=\"[sticker]\" /></span>\n </mat-card-title>\n\n <mat-card-content>\n <ng-content />\n </mat-card-content>\n</mat-card>\n", styles: ["mat-card.onemrva-selectable-box{border-radius:var(--half-border-radius);box-shadow:none;position:relative;color:var(--mat-sys-on-surface);border:2px solid transparent;background:var(--mat-sys-primary-container);-webkit-user-select:none;user-select:none}mat-card.onemrva-selectable-box mat-icon{overflow:visible;color:var(--mat-sys-primary)}mat-card.onemrva-selectable-box mat-radio-button{pointer-events:none}mat-card.onemrva-selectable-box mat-card-title{display:flex;background:var(--mat-sys-primary-container);border-top-left-radius:var(--half-border-radius);border-top-right-radius:var(--half-border-radius);padding:var(--spacer-and-half) var(--spacer-and-half) var(--spacer-and-half) calc(var(--spacer-and-half) + var(--quad-spacer));align-items:center;box-shadow:none;color:inherit;font-family:var(--label-large-font-family, Poppins);font-size:var(--label-large-font-size, 16px);font-style:normal;font-weight:var(--label-large-font-weight, 500);line-height:var(--label-large-line-height, 21px)}mat-card.onemrva-selectable-box mat-card-title mat-label{display:flex;flex-grow:1}mat-card.onemrva-selectable-box mat-card-title mat-radio-button{position:absolute;left:2px}mat-card.onemrva-selectable-box.checked{border:2px solid var(--mat-sys-tertiary);overflow:hidden}mat-card.onemrva-selectable-box.checked mat-card-title{background:var(--mat-sys-tertiary-container)}mat-card.onemrva-selectable-box.disabled{opacity:.4;cursor:auto}mat-card.onemrva-selectable-box b,mat-card.onemrva-selectable-box strong{font-weight:600}mat-card.onemrva-selectable-box mat-card-content{background:var(--mat-sys-surface);padding:var(--spacer-and-half);border-bottom-left-radius:var(--half-border-radius);border-bottom-right-radius:var(--half-border-radius)}mat-card.onemrva-selectable-box mat-card-content:empty{display:none}\n"] }]
|
|
51
51
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], radioButton: [{ type: i0.ViewChild, args: ['radioButton', { isSignal: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
52
52
|
|
|
53
53
|
class OnemrvaMatSelectableBoxModule {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"onemrvapublic-design-system-mat-selectable-box.mjs","sources":["../../../../projects/onemrva/design-system/mat-selectable-box/src/onemrva-mat-selectable-box.component.ts","../../../../projects/onemrva/design-system/mat-selectable-box/src/onemrva-mat-selectable-box.component.html","../../../../projects/onemrva/design-system/mat-selectable-box/src/onemrva-mat-selectable-box.module.ts","../../../../projects/onemrva/design-system/mat-selectable-box/index.ts","../../../../projects/onemrva/design-system/mat-selectable-box/onemrvapublic-design-system-mat-selectable-box.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n inject,\n ViewEncapsulation,\n input,\n output,\n viewChild,\n} from '@angular/core';\nimport { MatRadioButton, MatRadioChange } from '@angular/material/radio';\nimport { MatCard, MatCardContent, MatCardTitle } from '@angular/material/card';\nimport { MatLabel } from '@angular/material/form-field';\nimport { MatIcon } from '@angular/material/icon';\nimport { OnemrvaMatSize } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\n\nlet NEXT_ID = 0;\n\n@Component({\n selector: 'onemrva-mat-selectable-box',\n templateUrl: './onemrva-mat-selectable-box.component.html',\n styleUrl: './onemrva-mat-selectable-box.component.scss',\n standalone: true,\n encapsulation: ViewEncapsulation.None,\n imports: [\n MatCardTitle,\n MatCard,\n MatRadioButton,\n MatLabel,\n MatIcon,\n MatCardContent,\n OnemRvaSizeDirective,\n ],\n host: {\n '[attr.id]': 'id()',\n },\n})\nexport class OnemrvaMatSelectableBoxComponent {\n public readonly id = input(`onemrva-mat-selectable-box-${NEXT_ID++}`);\n\n readonly radioButton = viewChild<MatRadioButton>('radioButton');\n\n readonly value = input('');\n\n readonly disabled = input(false);\n\n readonly checked = input(false);\n\n readonly iconSize = input<OnemrvaMatSize>('');\n\n readonly valueChange = output<MatRadioChange>();\n\n valueChanged(event: MatRadioChange) {\n this.valueChange.emit(event);\n }\n\n isChecked() {\n return this.radioButton()?.checked ?? false;\n }\n\n triggerRadioClick() {\n const radioButton = this.radioButton();\n if (radioButton && !radioButton.checked && !radioButton.disabled) {\n // https://v11.material.angular.io/components/radio/api\n // Changing checked prop does not trigger a change event on the button or radiogroup,\n // only on user-interaction. Workaround trigger/simulate a click event.\n radioButton._inputElement.nativeElement.dispatchEvent(\n new MouseEvent('click', { bubbles: false }),\n );\n }\n }\n}\n","<mat-card\n [class.checked]=\"isChecked()\"\n [class.disabled]=\"disabled()\"\n class=\"onemrva-selectable-box m-m clickable\"\n (click)=\"triggerRadioClick()\"\n>\n <mat-card-title class=\"selectablebox-title\">\n <mat-radio-button\n #radioButton\n (change)=\"valueChanged($event)\"\n aria-label=\"Selected\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n />\n\n <mat-label class=\"mr\">\n <ng-content select=\"[title]\" />\n </mat-label>\n\n <mat-icon class=\"selectable-box-icon\" [size]=\"iconSize()\">\n <ng-content select=\"[icon]\" />\n </mat-icon>\n\n <span class=\"sticker\"><ng-content select=\"[sticker]\" /></span>\n </mat-card-title>\n\n <mat-card-content>\n <ng-content />\n </mat-card-content>\n</mat-card>\n","import { NgModule } from '@angular/core';\nimport { OnemrvaMatSelectableBoxComponent } from './onemrva-mat-selectable-box.component';\n\n@NgModule({\n declarations: [],\n imports: [OnemrvaMatSelectableBoxComponent],\n exports: [OnemrvaMatSelectableBoxComponent],\n})\nexport class OnemrvaMatSelectableBoxModule {}\n","/*\n * Public API Surface of mat-selectable-box\n */\n\nexport * from './src/onemrva-mat-selectable-box.component';\nexport * from './src/onemrva-mat-selectable-box.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"onemrvapublic-design-system-mat-selectable-box.mjs","sources":["../../../../projects/onemrva/design-system/mat-selectable-box/src/onemrva-mat-selectable-box.component.ts","../../../../projects/onemrva/design-system/mat-selectable-box/src/onemrva-mat-selectable-box.component.html","../../../../projects/onemrva/design-system/mat-selectable-box/src/onemrva-mat-selectable-box.module.ts","../../../../projects/onemrva/design-system/mat-selectable-box/index.ts","../../../../projects/onemrva/design-system/mat-selectable-box/onemrvapublic-design-system-mat-selectable-box.ts"],"sourcesContent":["import {\n AfterViewInit,\n ChangeDetectorRef,\n Component,\n inject,\n ViewEncapsulation,\n input,\n output,\n viewChild,\n} from '@angular/core';\nimport { MatRadioButton, MatRadioChange } from '@angular/material/radio';\nimport { MatCard, MatCardContent, MatCardTitle } from '@angular/material/card';\nimport { MatLabel } from '@angular/material/form-field';\nimport { MatIcon } from '@angular/material/icon';\nimport { OnemrvaMatSize } from '@onemrvapublic/design-system/utils';\nimport { OnemRvaSizeDirective } from '@onemrvapublic/design-system/shared';\n\nlet NEXT_ID = 0;\n\n@Component({\n selector: 'onemrva-mat-selectable-box',\n templateUrl: './onemrva-mat-selectable-box.component.html',\n styleUrl: './onemrva-mat-selectable-box.component.scss',\n standalone: true,\n encapsulation: ViewEncapsulation.None,\n imports: [\n MatCardTitle,\n MatCard,\n MatRadioButton,\n MatLabel,\n MatIcon,\n MatCardContent,\n OnemRvaSizeDirective,\n ],\n host: {\n '[attr.id]': 'id()',\n },\n})\nexport class OnemrvaMatSelectableBoxComponent {\n public readonly id = input(`onemrva-mat-selectable-box-${NEXT_ID++}`);\n\n readonly radioButton = viewChild<MatRadioButton>('radioButton');\n\n readonly value = input('');\n\n readonly disabled = input(false);\n\n readonly checked = input(false);\n\n readonly iconSize = input<OnemrvaMatSize>('');\n\n readonly valueChange = output<MatRadioChange>();\n\n valueChanged(event: MatRadioChange) {\n this.valueChange.emit(event);\n }\n\n isChecked() {\n return this.radioButton()?.checked ?? false;\n }\n\n triggerRadioClick() {\n const radioButton = this.radioButton();\n if (radioButton && !radioButton.checked && !radioButton.disabled) {\n // https://v11.material.angular.io/components/radio/api\n // Changing checked prop does not trigger a change event on the button or radiogroup,\n // only on user-interaction. Workaround trigger/simulate a click event.\n radioButton._inputElement.nativeElement.dispatchEvent(\n new MouseEvent('click', { bubbles: false }),\n );\n }\n }\n}\n","<mat-card\n [class.checked]=\"isChecked()\"\n [class.disabled]=\"disabled()\"\n class=\"onemrva-selectable-box m-m clickable\"\n (click)=\"triggerRadioClick()\"\n>\n <mat-card-title class=\"selectablebox-title\">\n <mat-radio-button\n #radioButton\n (change)=\"valueChanged($event)\"\n aria-label=\"Selected\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [value]=\"value()\"\n />\n\n <mat-label class=\"mr\">\n <ng-content select=\"[title]\" />\n </mat-label>\n\n <mat-icon class=\"selectable-box-icon\" [size]=\"iconSize()\">\n <ng-content select=\"[icon]\" />\n </mat-icon>\n\n <span class=\"sticker\"><ng-content select=\"[sticker]\" /></span>\n </mat-card-title>\n\n <mat-card-content>\n <ng-content />\n </mat-card-content>\n</mat-card>\n","import { NgModule } from '@angular/core';\nimport { OnemrvaMatSelectableBoxComponent } from './onemrva-mat-selectable-box.component';\n\n@NgModule({\n declarations: [],\n imports: [OnemrvaMatSelectableBoxComponent],\n exports: [OnemrvaMatSelectableBoxComponent],\n})\nexport class OnemrvaMatSelectableBoxModule {}\n","/*\n * Public API Surface of mat-selectable-box\n */\n\nexport * from './src/onemrva-mat-selectable-box.component';\nexport * from './src/onemrva-mat-selectable-box.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -11,16 +11,6 @@ mat-card.onemrva-selectable-box {
|
|
|
11
11
|
background: $main-color;
|
|
12
12
|
user-select: none;
|
|
13
13
|
|
|
14
|
-
&.checked {
|
|
15
|
-
border: 2px solid var(--mat-sys-tertiary);
|
|
16
|
-
background: var(--mat-sys-tertiary-container);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
&.disabled {
|
|
20
|
-
opacity: 0.4;
|
|
21
|
-
cursor: auto;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
14
|
mat-icon {
|
|
25
15
|
overflow: visible;
|
|
26
16
|
color: var(--mat-sys-primary);
|
|
@@ -60,6 +50,20 @@ mat-card.onemrva-selectable-box {
|
|
|
60
50
|
}
|
|
61
51
|
}
|
|
62
52
|
|
|
53
|
+
&.checked {
|
|
54
|
+
border: 2px solid var(--mat-sys-tertiary);
|
|
55
|
+
overflow: hidden;
|
|
56
|
+
|
|
57
|
+
mat-card-title {
|
|
58
|
+
background: var(--mat-sys-tertiary-container);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
&.disabled {
|
|
63
|
+
opacity: 0.4;
|
|
64
|
+
cursor: auto;
|
|
65
|
+
}
|
|
66
|
+
|
|
63
67
|
b,
|
|
64
68
|
strong {
|
|
65
69
|
font-weight: 600;
|
|
@@ -72,8 +76,7 @@ mat-card.onemrva-selectable-box {
|
|
|
72
76
|
border-bottom-right-radius: var(--half-border-radius);
|
|
73
77
|
|
|
74
78
|
&:empty {
|
|
75
|
-
|
|
76
|
-
border: 0;
|
|
79
|
+
display: none;
|
|
77
80
|
}
|
|
78
81
|
}
|
|
79
82
|
}
|