@onemrvapublic/design-system-mcp-server 2.4.0 → 2.4.2
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/mcp-data/codebase.json +1451 -475
- package/mcp-data/components.json +108889 -74867
- package/mcp-data/icons.json +9 -3
- package/mcp-data/styles.json +2 -2
- package/mcp-data/sync-status.json +14 -7
- package/mcp-data/tokens.json +371 -160
- package/package.json +1 -1
package/mcp-data/codebase.json
CHANGED
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
"name": "card",
|
|
5
5
|
"selector": "onemrva-card",
|
|
6
6
|
"category": "Utilities",
|
|
7
|
-
"path": "card
|
|
8
|
-
"description": "Content card with configurable image, border, and fill variants. Exposes
|
|
7
|
+
"path": "card/src/onemrva-card.component.ts",
|
|
8
|
+
"description": "Content card with configurable image, border, and fill variants. Exposes 11 inputs and 0 outputs. Inputs: type: 'no-background' | 'outline' | 'background', imageSrc, imageAlt, label, title, subtitle, description, helpText, coloredTitle: boolean, textColor: string, width: string. Outputs: none.",
|
|
9
9
|
"inputs": [
|
|
10
10
|
{
|
|
11
11
|
"name": "type",
|
|
@@ -16,87 +16,78 @@
|
|
|
16
16
|
"examples": []
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
|
-
"name": "
|
|
20
|
-
"type": "
|
|
21
|
-
"description": "
|
|
22
|
-
"required": false,
|
|
23
|
-
"examples": []
|
|
24
|
-
},
|
|
25
|
-
{
|
|
26
|
-
"name": "textColor",
|
|
27
|
-
"type": "string",
|
|
28
|
-
"description": "Overrides the CSS text color for label, subtitle, description and help icon. Accepts any CSS color value.",
|
|
19
|
+
"name": "imageSrc",
|
|
20
|
+
"type": "string | undefined",
|
|
21
|
+
"description": "Input property `imageSrc` of type `string | undefined`.",
|
|
29
22
|
"required": false,
|
|
30
23
|
"examples": []
|
|
31
24
|
},
|
|
32
25
|
{
|
|
33
|
-
"name": "
|
|
34
|
-
"type": "string",
|
|
35
|
-
"description": "Input property `
|
|
26
|
+
"name": "imageAlt",
|
|
27
|
+
"type": "string | undefined",
|
|
28
|
+
"description": "Input property `imageAlt` of type `string | undefined`. Default: `''`.",
|
|
29
|
+
"defaultValue": "''",
|
|
36
30
|
"required": false,
|
|
37
31
|
"examples": []
|
|
38
32
|
},
|
|
39
33
|
{
|
|
40
|
-
"name": "
|
|
41
|
-
"type": "
|
|
42
|
-
"description": "Input property `
|
|
43
|
-
"defaultValue": "
|
|
34
|
+
"name": "label",
|
|
35
|
+
"type": "string | undefined",
|
|
36
|
+
"description": "Input property `label` of type `string | undefined`. Default: `''`.",
|
|
37
|
+
"defaultValue": "''",
|
|
44
38
|
"required": false,
|
|
45
39
|
"examples": []
|
|
46
40
|
},
|
|
47
41
|
{
|
|
48
|
-
"name": "
|
|
49
|
-
"type": "string",
|
|
50
|
-
"description": "Input property `
|
|
42
|
+
"name": "title",
|
|
43
|
+
"type": "string | undefined",
|
|
44
|
+
"description": "Input property `title` of type `string | undefined`. Default: `''`.",
|
|
51
45
|
"defaultValue": "''",
|
|
52
46
|
"required": false,
|
|
53
47
|
"examples": []
|
|
54
48
|
},
|
|
55
49
|
{
|
|
56
|
-
"name": "
|
|
57
|
-
"type": "string",
|
|
58
|
-
"description": "Input property `
|
|
50
|
+
"name": "subtitle",
|
|
51
|
+
"type": "string | undefined",
|
|
52
|
+
"description": "Input property `subtitle` of type `string | undefined`. Default: `''`.",
|
|
59
53
|
"defaultValue": "''",
|
|
60
54
|
"required": false,
|
|
61
55
|
"examples": []
|
|
62
56
|
},
|
|
63
57
|
{
|
|
64
|
-
"name": "
|
|
65
|
-
"type": "string",
|
|
66
|
-
"description": "Input property `
|
|
58
|
+
"name": "description",
|
|
59
|
+
"type": "string | undefined",
|
|
60
|
+
"description": "Input property `description` of type `string | undefined`. Default: `''`.",
|
|
67
61
|
"defaultValue": "''",
|
|
68
62
|
"required": false,
|
|
69
63
|
"examples": []
|
|
70
64
|
},
|
|
71
65
|
{
|
|
72
|
-
"name": "
|
|
73
|
-
"type": "string",
|
|
74
|
-
"description": "
|
|
66
|
+
"name": "helpText",
|
|
67
|
+
"type": "string | undefined",
|
|
68
|
+
"description": "Tooltip text shown via the help icon. When empty, the icon is hidden.",
|
|
75
69
|
"defaultValue": "''",
|
|
76
70
|
"required": false,
|
|
77
71
|
"examples": []
|
|
78
72
|
},
|
|
79
73
|
{
|
|
80
|
-
"name": "
|
|
81
|
-
"type": "
|
|
82
|
-
"description": "
|
|
83
|
-
"defaultValue": "''",
|
|
74
|
+
"name": "coloredTitle",
|
|
75
|
+
"type": "boolean",
|
|
76
|
+
"description": "When `true`, the title always uses the gradient. When `false`, it is always plain. When omitted, the gradient follows the variant.",
|
|
84
77
|
"required": false,
|
|
85
78
|
"examples": []
|
|
86
79
|
},
|
|
87
80
|
{
|
|
88
|
-
"name": "
|
|
81
|
+
"name": "textColor",
|
|
89
82
|
"type": "string",
|
|
90
|
-
"description": "
|
|
91
|
-
"defaultValue": "''",
|
|
83
|
+
"description": "Overrides the CSS text color for label, subtitle, description and help icon. Accepts any CSS color value.",
|
|
92
84
|
"required": false,
|
|
93
85
|
"examples": []
|
|
94
86
|
},
|
|
95
87
|
{
|
|
96
|
-
"name": "
|
|
88
|
+
"name": "width",
|
|
97
89
|
"type": "string",
|
|
98
|
-
"description": "
|
|
99
|
-
"defaultValue": "''",
|
|
90
|
+
"description": "Input property `width` of type `string`.",
|
|
100
91
|
"required": false,
|
|
101
92
|
"examples": []
|
|
102
93
|
}
|
|
@@ -104,6 +95,16 @@
|
|
|
104
95
|
"outputs": [],
|
|
105
96
|
"methods": [],
|
|
106
97
|
"slots": [
|
|
98
|
+
{
|
|
99
|
+
"name": "cardAvatar",
|
|
100
|
+
"selector": "[cardAvatar]",
|
|
101
|
+
"description": "Content projection for elements matching \"[cardAvatar]\""
|
|
102
|
+
},
|
|
103
|
+
{
|
|
104
|
+
"name": "default",
|
|
105
|
+
"selector": "*",
|
|
106
|
+
"description": "Default content projection slot"
|
|
107
|
+
},
|
|
107
108
|
{
|
|
108
109
|
"name": "cardActions",
|
|
109
110
|
"selector": "[cardActions]",
|
|
@@ -114,19 +115,30 @@
|
|
|
114
115
|
"queryChildren": [],
|
|
115
116
|
"hasEffects": false,
|
|
116
117
|
"standalone": true,
|
|
117
|
-
"imports": [
|
|
118
|
+
"imports": [
|
|
119
|
+
"MatIconModule",
|
|
120
|
+
"MatTooltipModule"
|
|
121
|
+
],
|
|
118
122
|
"examples": [],
|
|
119
|
-
"accessibility": [
|
|
120
|
-
|
|
123
|
+
"accessibility": [
|
|
124
|
+
"Uses aria-label for screen readers"
|
|
125
|
+
],
|
|
126
|
+
"keywords": [
|
|
127
|
+
"card",
|
|
128
|
+
"container",
|
|
129
|
+
"content",
|
|
130
|
+
"surface",
|
|
131
|
+
"panel"
|
|
132
|
+
],
|
|
121
133
|
"group": "Card",
|
|
122
134
|
"themes": [],
|
|
123
|
-
"demoCode": "<onemrva-card\
|
|
135
|
+
"demoCode": "<onemrva-card\n [type]=\"type()\"\n width=\"275px\"\n [imageSrc]=\"imageSrc()\"\n [imageAlt]=\"imgAlt()\"\n [label]=\"label()\"\n [title]=\"title()\"\n [subtitle]=\"subtitle()\"\n [description]=\"\n showDescription()\n ? 'Short description of the component on one or two lines and cut it off w...'\n : ''\n \"\n [helpText]=\"helpText()\"\n [coloredTitle]=\"coloredTitleValue\"\n>\n @if (showActions()) {\n <div cardActions>\n <button mat-flat-button color=\"accent\">Button</button>\n <button mat-icon-button aria-label=\"Duplicate\" class=\"ml-m\">\n <mat-icon>content_copy</mat-icon>\n </button>\n </div>\n }\n</onemrva-card>\n"
|
|
124
136
|
},
|
|
125
137
|
{
|
|
126
138
|
"name": "flag-icon",
|
|
127
139
|
"selector": "flag-icon",
|
|
128
140
|
"category": "Flag Components",
|
|
129
|
-
"path": "flag-icon
|
|
141
|
+
"path": "flag-icon/src/flag-icon.component.ts",
|
|
130
142
|
"description": "Country flag image resolved from an ISO 3166-1 alpha-2 code. Exposes 3 inputs and 0 outputs. Inputs: countryCode: string | null | undefined, mode: 'square' | 'rectangle', width. Outputs: none.",
|
|
131
143
|
"inputs": [
|
|
132
144
|
{
|
|
@@ -161,10 +173,17 @@
|
|
|
161
173
|
"queryChildren": [],
|
|
162
174
|
"hasEffects": false,
|
|
163
175
|
"standalone": true,
|
|
164
|
-
"imports": [
|
|
176
|
+
"imports": [
|
|
177
|
+
"NgOptimizedImage"
|
|
178
|
+
],
|
|
165
179
|
"examples": [],
|
|
166
180
|
"accessibility": [],
|
|
167
|
-
"keywords": [
|
|
181
|
+
"keywords": [
|
|
182
|
+
"flag",
|
|
183
|
+
"country",
|
|
184
|
+
"icon",
|
|
185
|
+
"locale"
|
|
186
|
+
],
|
|
168
187
|
"group": "Misc",
|
|
169
188
|
"themes": []
|
|
170
189
|
},
|
|
@@ -172,7 +191,7 @@
|
|
|
172
191
|
"name": "layout",
|
|
173
192
|
"selector": "onemrva-layout-after-nav",
|
|
174
193
|
"category": "Layout Components",
|
|
175
|
-
"path": "layout
|
|
194
|
+
"path": "layout/src/components/layout-after-nav/layout-after-nav.component.ts",
|
|
176
195
|
"description": "Slot projected after the navigation bar in the app shell. Exposes 1 input and 0 outputs. Inputs: customNgClass: any. Outputs: none.",
|
|
177
196
|
"inputs": [
|
|
178
197
|
{
|
|
@@ -193,16 +212,20 @@
|
|
|
193
212
|
"imports": [],
|
|
194
213
|
"examples": [],
|
|
195
214
|
"accessibility": [],
|
|
196
|
-
"keywords": [
|
|
215
|
+
"keywords": [
|
|
216
|
+
"layout",
|
|
217
|
+
"slot",
|
|
218
|
+
"after-nav"
|
|
219
|
+
],
|
|
197
220
|
"group": "Layout",
|
|
198
221
|
"themes": [],
|
|
199
|
-
"demoCode": "<onemrva-layout\
|
|
222
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
200
223
|
},
|
|
201
224
|
{
|
|
202
225
|
"name": "layout",
|
|
203
226
|
"selector": "onemrva-layout-content",
|
|
204
227
|
"category": "Layout Components",
|
|
205
|
-
"path": "layout
|
|
228
|
+
"path": "layout/src/components/layout-content/layout-content.component.ts",
|
|
206
229
|
"description": "Main content area slot in the application shell. Exposes 1 input and 0 outputs. Inputs: customNgClass: any. Outputs: none.",
|
|
207
230
|
"inputs": [
|
|
208
231
|
{
|
|
@@ -223,16 +246,21 @@
|
|
|
223
246
|
"imports": [],
|
|
224
247
|
"examples": [],
|
|
225
248
|
"accessibility": [],
|
|
226
|
-
"keywords": [
|
|
249
|
+
"keywords": [
|
|
250
|
+
"layout",
|
|
251
|
+
"content",
|
|
252
|
+
"main",
|
|
253
|
+
"page"
|
|
254
|
+
],
|
|
227
255
|
"group": "Layout",
|
|
228
256
|
"themes": [],
|
|
229
|
-
"demoCode": "<onemrva-layout\
|
|
257
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
230
258
|
},
|
|
231
259
|
{
|
|
232
260
|
"name": "layout",
|
|
233
261
|
"selector": "onemrva-drawer-actions",
|
|
234
262
|
"category": "Layout Components",
|
|
235
|
-
"path": "layout
|
|
263
|
+
"path": "layout/src/components/layout-drawer-actions/layout-drawer-actions.component.ts",
|
|
236
264
|
"description": "Action buttons region at the bottom of a drawer panel. This component exposes no configurable inputs or outputs.",
|
|
237
265
|
"inputs": [],
|
|
238
266
|
"outputs": [],
|
|
@@ -251,16 +279,20 @@
|
|
|
251
279
|
"imports": [],
|
|
252
280
|
"examples": [],
|
|
253
281
|
"accessibility": [],
|
|
254
|
-
"keywords": [
|
|
282
|
+
"keywords": [
|
|
283
|
+
"drawer",
|
|
284
|
+
"actions",
|
|
285
|
+
"sidebar"
|
|
286
|
+
],
|
|
255
287
|
"group": "Layout",
|
|
256
288
|
"themes": [],
|
|
257
|
-
"demoCode": "<onemrva-layout\
|
|
289
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
258
290
|
},
|
|
259
291
|
{
|
|
260
292
|
"name": "layout",
|
|
261
293
|
"selector": "onemrva-drawer-content",
|
|
262
294
|
"category": "Layout Components",
|
|
263
|
-
"path": "layout
|
|
295
|
+
"path": "layout/src/components/layout-drawer-content/layout-drawer-content.component.ts",
|
|
264
296
|
"description": "Scrollable body region inside a drawer panel. This component exposes no configurable inputs or outputs.",
|
|
265
297
|
"inputs": [],
|
|
266
298
|
"outputs": [],
|
|
@@ -279,16 +311,20 @@
|
|
|
279
311
|
"imports": [],
|
|
280
312
|
"examples": [],
|
|
281
313
|
"accessibility": [],
|
|
282
|
-
"keywords": [
|
|
314
|
+
"keywords": [
|
|
315
|
+
"drawer",
|
|
316
|
+
"content",
|
|
317
|
+
"sidebar"
|
|
318
|
+
],
|
|
283
319
|
"group": "Layout",
|
|
284
320
|
"themes": [],
|
|
285
|
-
"demoCode": "<onemrva-layout\
|
|
321
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
286
322
|
},
|
|
287
323
|
{
|
|
288
324
|
"name": "layout",
|
|
289
325
|
"selector": "onemrva-drawer-title",
|
|
290
326
|
"category": "Layout Components",
|
|
291
|
-
"path": "layout
|
|
327
|
+
"path": "layout/src/components/layout-drawer-title/layout-drawer-title.component.ts",
|
|
292
328
|
"description": "Title bar with close button for a drawer panel. Exposes 1 input and 0 outputs. Inputs: showClose. Outputs: none.",
|
|
293
329
|
"inputs": [
|
|
294
330
|
{
|
|
@@ -313,24 +349,37 @@
|
|
|
313
349
|
"queryChildren": [],
|
|
314
350
|
"hasEffects": false,
|
|
315
351
|
"standalone": true,
|
|
316
|
-
"imports": [
|
|
352
|
+
"imports": [
|
|
353
|
+
"MatIcon"
|
|
354
|
+
],
|
|
317
355
|
"examples": [],
|
|
318
356
|
"accessibility": [],
|
|
319
|
-
"keywords": [
|
|
357
|
+
"keywords": [
|
|
358
|
+
"drawer",
|
|
359
|
+
"title",
|
|
360
|
+
"close",
|
|
361
|
+
"sidebar"
|
|
362
|
+
],
|
|
320
363
|
"group": "Layout",
|
|
321
364
|
"themes": [],
|
|
322
|
-
"demoCode": "<onemrva-layout\
|
|
365
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
323
366
|
},
|
|
324
367
|
{
|
|
325
368
|
"name": "layout",
|
|
326
369
|
"selector": "onemrva-layout-footer",
|
|
327
370
|
"category": "Layout Components",
|
|
328
|
-
"path": "layout
|
|
371
|
+
"path": "layout/src/components/layout-footer/layout-footer.component.ts",
|
|
329
372
|
"description": "Footer slot projected into the application shell. This component exposes no configurable inputs or outputs.",
|
|
330
373
|
"inputs": [],
|
|
331
374
|
"outputs": [],
|
|
332
375
|
"methods": [],
|
|
333
|
-
"slots": [
|
|
376
|
+
"slots": [
|
|
377
|
+
{
|
|
378
|
+
"name": "default",
|
|
379
|
+
"selector": "*",
|
|
380
|
+
"description": "Default content projection slot"
|
|
381
|
+
}
|
|
382
|
+
],
|
|
334
383
|
"hostListeners": [],
|
|
335
384
|
"queryChildren": [],
|
|
336
385
|
"hasEffects": false,
|
|
@@ -338,16 +387,20 @@
|
|
|
338
387
|
"imports": [],
|
|
339
388
|
"examples": [],
|
|
340
389
|
"accessibility": [],
|
|
341
|
-
"keywords": [
|
|
390
|
+
"keywords": [
|
|
391
|
+
"layout",
|
|
392
|
+
"footer",
|
|
393
|
+
"shell"
|
|
394
|
+
],
|
|
342
395
|
"group": "Layout",
|
|
343
396
|
"themes": [],
|
|
344
|
-
"demoCode": "<onemrva-layout\
|
|
397
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
345
398
|
},
|
|
346
399
|
{
|
|
347
400
|
"name": "layout",
|
|
348
401
|
"selector": "onemrva-layout-left-sidenav",
|
|
349
402
|
"category": "Layout Components",
|
|
350
|
-
"path": "layout
|
|
403
|
+
"path": "layout/src/components/layout-left-sidenav/layout-left-sidenav.component.ts",
|
|
351
404
|
"description": "Collapsible left sidenav panel with navigation item list. Exposes 2 inputs and 0 outputs. Inputs: items: NavItem[], isCollapsed. Outputs: none.",
|
|
352
405
|
"inputs": [
|
|
353
406
|
{
|
|
@@ -380,19 +433,31 @@
|
|
|
380
433
|
"queryChildren": [],
|
|
381
434
|
"hasEffects": true,
|
|
382
435
|
"standalone": true,
|
|
383
|
-
"imports": [
|
|
436
|
+
"imports": [
|
|
437
|
+
"OnemrvaMatNavigationComponent",
|
|
438
|
+
"MatIconButton",
|
|
439
|
+
"MatIcon"
|
|
440
|
+
],
|
|
384
441
|
"examples": [],
|
|
385
|
-
"accessibility": [
|
|
386
|
-
|
|
442
|
+
"accessibility": [
|
|
443
|
+
"Uses aria-label for screen readers"
|
|
444
|
+
],
|
|
445
|
+
"keywords": [
|
|
446
|
+
"layout",
|
|
447
|
+
"sidenav",
|
|
448
|
+
"navigation",
|
|
449
|
+
"sidebar",
|
|
450
|
+
"collapse"
|
|
451
|
+
],
|
|
387
452
|
"group": "Layout",
|
|
388
453
|
"themes": [],
|
|
389
|
-
"demoCode": "<onemrva-layout\
|
|
454
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
390
455
|
},
|
|
391
456
|
{
|
|
392
457
|
"name": "layout",
|
|
393
458
|
"selector": "onemrva-layout-login-menu",
|
|
394
459
|
"category": "Layout Components",
|
|
395
|
-
"path": "layout
|
|
460
|
+
"path": "layout/src/components/layout-login-menu/layout-login-menu.component.ts",
|
|
396
461
|
"description": "User/login menu slot projected into the toolbar. Exposes 1 input and 0 outputs. Inputs: customNgClass: any. Outputs: none.",
|
|
397
462
|
"inputs": [
|
|
398
463
|
{
|
|
@@ -413,16 +478,23 @@
|
|
|
413
478
|
"imports": [],
|
|
414
479
|
"examples": [],
|
|
415
480
|
"accessibility": [],
|
|
416
|
-
"keywords": [
|
|
481
|
+
"keywords": [
|
|
482
|
+
"layout",
|
|
483
|
+
"login",
|
|
484
|
+
"user",
|
|
485
|
+
"menu",
|
|
486
|
+
"auth",
|
|
487
|
+
"toolbar"
|
|
488
|
+
],
|
|
417
489
|
"group": "Layout",
|
|
418
490
|
"themes": [],
|
|
419
|
-
"demoCode": "<onemrva-layout\
|
|
491
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
420
492
|
},
|
|
421
493
|
{
|
|
422
494
|
"name": "layout",
|
|
423
495
|
"selector": "onemrva-layout-route",
|
|
424
496
|
"category": "Layout Components",
|
|
425
|
-
"path": "layout
|
|
497
|
+
"path": "layout/src/components/layout-route/layout-route.component.ts",
|
|
426
498
|
"description": "Top-level navigation route item with optional sub-items. Exposes 7 inputs and 0 outputs. Inputs: customNgClass: any, routerLink: string, routerLinkActiveOptions: any, dataCy: string, baseRouteForActiveMenu: string, label: string, icon: string. Outputs: none.",
|
|
427
499
|
"inputs": [
|
|
428
500
|
{
|
|
@@ -492,17 +564,24 @@
|
|
|
492
564
|
"NgTemplateOutlet"
|
|
493
565
|
],
|
|
494
566
|
"examples": [],
|
|
495
|
-
"accessibility": [
|
|
496
|
-
|
|
567
|
+
"accessibility": [
|
|
568
|
+
"Defines roles: button"
|
|
569
|
+
],
|
|
570
|
+
"keywords": [
|
|
571
|
+
"layout",
|
|
572
|
+
"route",
|
|
573
|
+
"navigation",
|
|
574
|
+
"menu-item"
|
|
575
|
+
],
|
|
497
576
|
"group": "Layout",
|
|
498
577
|
"themes": [],
|
|
499
|
-
"demoCode": "<onemrva-layout\
|
|
578
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
500
579
|
},
|
|
501
580
|
{
|
|
502
581
|
"name": "layout",
|
|
503
582
|
"selector": "onemrva-layout-sidenav-title",
|
|
504
583
|
"category": "Layout Components",
|
|
505
|
-
"path": "layout
|
|
584
|
+
"path": "layout/src/components/layout-sidenav-title/layout-sidenav-title.component.ts",
|
|
506
585
|
"description": "Title slot at the top of the side navigation panel. This component exposes no configurable inputs or outputs.",
|
|
507
586
|
"inputs": [],
|
|
508
587
|
"outputs": [],
|
|
@@ -521,16 +600,21 @@
|
|
|
521
600
|
"imports": [],
|
|
522
601
|
"examples": [],
|
|
523
602
|
"accessibility": [],
|
|
524
|
-
"keywords": [
|
|
603
|
+
"keywords": [
|
|
604
|
+
"layout",
|
|
605
|
+
"sidenav",
|
|
606
|
+
"title",
|
|
607
|
+
"navigation"
|
|
608
|
+
],
|
|
525
609
|
"group": "Layout",
|
|
526
610
|
"themes": [],
|
|
527
|
-
"demoCode": "<onemrva-layout\
|
|
611
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
528
612
|
},
|
|
529
613
|
{
|
|
530
614
|
"name": "layout",
|
|
531
615
|
"selector": "onemrva-layout-sidenav",
|
|
532
616
|
"category": "Layout Components",
|
|
533
|
-
"path": "layout
|
|
617
|
+
"path": "layout/src/components/layout-sidenav/layout-sidenav.component.ts",
|
|
534
618
|
"description": "Sidenav with route list, language selector, and collapse support. Exposes 2 inputs and 0 outputs. Inputs: isSmall (required): boolean, languages: OnemRvaLanguage[]. Outputs: none.",
|
|
535
619
|
"inputs": [
|
|
536
620
|
{
|
|
@@ -555,20 +639,36 @@
|
|
|
555
639
|
"hostListeners": [],
|
|
556
640
|
"queryChildren": [],
|
|
557
641
|
"hasEffects": false,
|
|
558
|
-
"standalone":
|
|
559
|
-
"imports": [
|
|
642
|
+
"standalone": true,
|
|
643
|
+
"imports": [
|
|
644
|
+
"MatIconButton",
|
|
645
|
+
"MatIcon",
|
|
646
|
+
"TranslatePipe",
|
|
647
|
+
"OnemrvaMatNavigationComponent",
|
|
648
|
+
"MatFormFieldModule",
|
|
649
|
+
"MatSelectModule",
|
|
650
|
+
"FormsModule"
|
|
651
|
+
],
|
|
560
652
|
"examples": [],
|
|
561
|
-
"accessibility": [
|
|
562
|
-
|
|
653
|
+
"accessibility": [
|
|
654
|
+
"Uses aria-label for screen readers"
|
|
655
|
+
],
|
|
656
|
+
"keywords": [
|
|
657
|
+
"layout",
|
|
658
|
+
"sidenav",
|
|
659
|
+
"navigation",
|
|
660
|
+
"sidebar",
|
|
661
|
+
"routes"
|
|
662
|
+
],
|
|
563
663
|
"group": "Layout",
|
|
564
664
|
"themes": [],
|
|
565
|
-
"demoCode": "<onemrva-layout\
|
|
665
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
566
666
|
},
|
|
567
667
|
{
|
|
568
668
|
"name": "layout",
|
|
569
669
|
"selector": "onemrva-layout-subroute",
|
|
570
670
|
"category": "Layout Components",
|
|
571
|
-
"path": "layout
|
|
671
|
+
"path": "layout/src/components/layout-subroute/layout-subroute.component.ts",
|
|
572
672
|
"description": "Child route item nested under a top-level navigation route. Exposes 6 inputs and 0 outputs. Inputs: customNgClass: any, routerLink: typeof RouterLink.prototype.routerLink | string, routerLinkActiveOptions: any, dataCy: string, label: string, icon: string. Outputs: none.",
|
|
573
673
|
"inputs": [
|
|
574
674
|
{
|
|
@@ -624,16 +724,22 @@
|
|
|
624
724
|
"imports": [],
|
|
625
725
|
"examples": [],
|
|
626
726
|
"accessibility": [],
|
|
627
|
-
"keywords": [
|
|
727
|
+
"keywords": [
|
|
728
|
+
"layout",
|
|
729
|
+
"subroute",
|
|
730
|
+
"route",
|
|
731
|
+
"navigation",
|
|
732
|
+
"menu-item"
|
|
733
|
+
],
|
|
628
734
|
"group": "Layout",
|
|
629
735
|
"themes": [],
|
|
630
|
-
"demoCode": "<onemrva-layout\
|
|
736
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
631
737
|
},
|
|
632
738
|
{
|
|
633
739
|
"name": "layout",
|
|
634
740
|
"selector": "onemrva-layout-title",
|
|
635
741
|
"category": "Layout Components",
|
|
636
|
-
"path": "layout
|
|
742
|
+
"path": "layout/src/components/layout-title/layout-title.component.ts",
|
|
637
743
|
"description": "Page title slot in the application header toolbar. Exposes 1 input and 0 outputs. Inputs: customNgClass: any. Outputs: none.",
|
|
638
744
|
"inputs": [
|
|
639
745
|
{
|
|
@@ -654,17 +760,22 @@
|
|
|
654
760
|
"imports": [],
|
|
655
761
|
"examples": [],
|
|
656
762
|
"accessibility": [],
|
|
657
|
-
"keywords": [
|
|
763
|
+
"keywords": [
|
|
764
|
+
"layout",
|
|
765
|
+
"title",
|
|
766
|
+
"header",
|
|
767
|
+
"toolbar"
|
|
768
|
+
],
|
|
658
769
|
"group": "Layout",
|
|
659
770
|
"themes": [],
|
|
660
|
-
"demoCode": "<onemrva-layout\
|
|
771
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
661
772
|
},
|
|
662
773
|
{
|
|
663
774
|
"name": "layout",
|
|
664
775
|
"selector": "onemrva-layout",
|
|
665
776
|
"category": "Layout Components",
|
|
666
|
-
"path": "layout
|
|
667
|
-
"description": "Application shell composing header, sidenav, content, and footer slots. Exposes
|
|
777
|
+
"path": "layout/src/components/layout/layout.component.ts",
|
|
778
|
+
"description": "Application shell composing header, sidenav, content, and footer slots. Exposes 9 inputs and 2 outputs. Inputs: logo, disableLogoutButton, languages: OnemRvaLanguage[], environment: Environment, logoRedictionUrl: (string | any[] | null) | undefined, profile: OnemRvaProfile | null, id, role, showThemeSwitcher. Outputs: login: void, logout: void.",
|
|
668
779
|
"inputs": [
|
|
669
780
|
{
|
|
670
781
|
"name": "languages",
|
|
@@ -705,6 +816,14 @@
|
|
|
705
816
|
"required": false,
|
|
706
817
|
"examples": []
|
|
707
818
|
},
|
|
819
|
+
{
|
|
820
|
+
"name": "disableLogoutButton",
|
|
821
|
+
"type": "boolean",
|
|
822
|
+
"description": "Input property `disableLogoutButton` of type `boolean`. Default: `false`.",
|
|
823
|
+
"defaultValue": "false",
|
|
824
|
+
"required": false,
|
|
825
|
+
"examples": []
|
|
826
|
+
},
|
|
708
827
|
{
|
|
709
828
|
"name": "id",
|
|
710
829
|
"type": "string",
|
|
@@ -763,7 +882,7 @@
|
|
|
763
882
|
"RouterLinkActive",
|
|
764
883
|
"MatTabNavPanel",
|
|
765
884
|
"MatDivider",
|
|
766
|
-
"
|
|
885
|
+
"OnemrvaMatAvatarComponent",
|
|
767
886
|
"MatMenuTrigger",
|
|
768
887
|
"MatMenu",
|
|
769
888
|
"MatIcon",
|
|
@@ -783,7 +902,9 @@
|
|
|
783
902
|
"OnemrvaMatStickerComponent"
|
|
784
903
|
],
|
|
785
904
|
"examples": [],
|
|
786
|
-
"accessibility": [
|
|
905
|
+
"accessibility": [
|
|
906
|
+
"Uses aria-label for screen readers"
|
|
907
|
+
],
|
|
787
908
|
"keywords": [
|
|
788
909
|
"layout",
|
|
789
910
|
"shell",
|
|
@@ -795,13 +916,13 @@
|
|
|
795
916
|
],
|
|
796
917
|
"group": "Layout",
|
|
797
918
|
"themes": [],
|
|
798
|
-
"demoCode": "<onemrva-layout\
|
|
919
|
+
"demoCode": "<onemrva-layout\n [environment]=\"Environment.PROD\"\n [profile]=\"profile\"\n (login)=\"login()\"\n (logout)=\"logout()\"\n [showThemeSwitcher]=\"false\"\n>\n <!-- Notification is picked up, inside the body -->\n <onemrva-mat-notification color=\"info\" [closable]=\"true\">\n Hello <a href=\"#\">world</a>\n </onemrva-mat-notification>\n\n <!-- APP NAME -->\n <onemrva-layout-title>\n <span class=\"nemo\">\n <span>nemo</span>\n <span>DESIGN SYSTEM</span>\n </span></onemrva-layout-title\n >\n\n <onemrva-layout-login-menu>\n <button\n type=\"button\"\n mat-menu-item\n data-cy=\"go to admin\"\n (click)=\"helpLink()\"\n attr.aria-label=\"{{ 'Admin' | translate }}\"\n >\n <mat-icon>dashboard</mat-icon>{{ 'Admin' | translate }}\n </button>\n </onemrva-layout-login-menu>\n\n <!-- MENU -->\n <onemrva-layout-route\n routerLink=\"/\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"Guides\"\n [label]=\"'Guides' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/demos\"\n [routerLinkActiveOptions]=\"{ exact: false }\"\n dataCy=\"Components\"\n [label]=\"'Components' | translate\"\n />\n <onemrva-layout-route\n routerLink=\"/news\"\n [routerLinkActiveOptions]=\"{ exact: true }\"\n dataCy=\"News\"\n [label]=\"'News' | translate\"\n />\n\n <!-- AFTER NAV LINKS -->\n <onemrva-layout-after-nav>\n <button\n (click)=\"helpLink()\"\n mat-icon-button\n data-cy=\"goToUserManual\"\n rel=\"noopener noreferrer\"\n [matTooltipClass]=\"'tooltip'\"\n matTooltip=\"Create ticket\"\n [attr.aria-label]=\"'Create ticket'\"\n style=\"text-decoration: none !important\"\n >\n <mat-icon [attr.aria-label]=\"'Create ticket'\" class=\"iconHelp\"\n >help</mat-icon\n >\n </button>\n </onemrva-layout-after-nav>\n\n <!-- CONTENT -->\n <onemrva-layout-content>\n <router-outlet />\n\n <!-- Open a drawer -->\n <section\n style=\"\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n \"\n >\n <button\n class=\"m-m\"\n data-cy=\"demo-link\"\n mat-flat-button\n color=\"accent\"\n (click)=\"toggleForm()\"\n >\n Open form\n </button>\n <div style=\"min-height: 50vh\"> </div>\n </section>\n </onemrva-layout-content>\n\n <!-- FOOTER -->\n <onemrva-layout-footer> ONEM/RVA © 2025 </onemrva-layout-footer>\n</onemrva-layout>\n"
|
|
799
920
|
},
|
|
800
921
|
{
|
|
801
922
|
"name": "mat-avatar",
|
|
802
923
|
"selector": "onemrva-mat-avatar",
|
|
803
924
|
"category": "Material Components",
|
|
804
|
-
"path": "mat-avatar
|
|
925
|
+
"path": "mat-avatar/src/onemrva-mat-avatar.component.ts",
|
|
805
926
|
"description": "Avatar provides a way to display an image, icon or initials to the user. Exposes 6 inputs and 0 outputs. Inputs: id, roundShape, initials, text, icon, src. Outputs: none.",
|
|
806
927
|
"inputs": [
|
|
807
928
|
{
|
|
@@ -873,19 +994,33 @@
|
|
|
873
994
|
"queryChildren": [],
|
|
874
995
|
"hasEffects": false,
|
|
875
996
|
"standalone": true,
|
|
876
|
-
"imports": [
|
|
997
|
+
"imports": [
|
|
998
|
+
"MatIconModule",
|
|
999
|
+
"NgTemplateOutlet",
|
|
1000
|
+
"SlicePipe"
|
|
1001
|
+
],
|
|
877
1002
|
"examples": [],
|
|
878
|
-
"accessibility": [
|
|
879
|
-
|
|
1003
|
+
"accessibility": [
|
|
1004
|
+
"Uses aria-label for screen readers"
|
|
1005
|
+
],
|
|
1006
|
+
"keywords": [
|
|
1007
|
+
"avatar",
|
|
1008
|
+
"profile",
|
|
1009
|
+
"picture",
|
|
1010
|
+
"initials"
|
|
1011
|
+
],
|
|
880
1012
|
"group": "Layouts",
|
|
881
|
-
"themes": [
|
|
882
|
-
|
|
1013
|
+
"themes": [
|
|
1014
|
+
"onemrva-mat-avatar-theme",
|
|
1015
|
+
"onemrva-mat-icon-theme"
|
|
1016
|
+
],
|
|
1017
|
+
"demoCode": "<onemrva-mat-avatar\n [initials]=\"initials()\"\n [size]=\"size()\"\n [src]=\"src()\"\n [icon]=\"icon()\"\n [color]=\"color()\"\n/>\n"
|
|
883
1018
|
},
|
|
884
1019
|
{
|
|
885
1020
|
"name": "mat-breadcrumb",
|
|
886
1021
|
"selector": "onemrva-mat-breadcrumb",
|
|
887
1022
|
"category": "Material Components",
|
|
888
|
-
"path": "mat-breadcrumb
|
|
1023
|
+
"path": "mat-breadcrumb/src/onemrva-mat-breadcrumb.component.ts",
|
|
889
1024
|
"description": "Breadcrumb trail showing the current navigation hierarchy. Exposes 1 input and 0 outputs. Inputs: paths: OnemrvaBreadcrumb[]. Outputs: none.",
|
|
890
1025
|
"inputs": [
|
|
891
1026
|
{
|
|
@@ -904,19 +1039,28 @@
|
|
|
904
1039
|
"queryChildren": [],
|
|
905
1040
|
"hasEffects": true,
|
|
906
1041
|
"standalone": true,
|
|
907
|
-
"imports": [
|
|
1042
|
+
"imports": [
|
|
1043
|
+
"RouterLink",
|
|
1044
|
+
"MatIcon",
|
|
1045
|
+
"TranslatePipe"
|
|
1046
|
+
],
|
|
908
1047
|
"examples": [],
|
|
909
1048
|
"accessibility": [],
|
|
910
|
-
"keywords": [
|
|
1049
|
+
"keywords": [
|
|
1050
|
+
"breadcrumb",
|
|
1051
|
+
"navigation",
|
|
1052
|
+
"path",
|
|
1053
|
+
"trail"
|
|
1054
|
+
],
|
|
911
1055
|
"group": "Navigation",
|
|
912
1056
|
"themes": [],
|
|
913
|
-
"demoCode": "<!-- fakePath is used to test the breadcrumb component when the routing is not available -->\
|
|
1057
|
+
"demoCode": "<!-- fakePath is used to test the breadcrumb component when the routing is not available -->\n<onemrva-mat-breadcrumb [paths]=\"paths\" />\n"
|
|
914
1058
|
},
|
|
915
1059
|
{
|
|
916
1060
|
"name": "mat-carousel",
|
|
917
1061
|
"selector": "onemrva-mat-carousel-item",
|
|
918
1062
|
"category": "Material Components",
|
|
919
|
-
"path": "mat-carousel
|
|
1063
|
+
"path": "mat-carousel/src/mat-carousel-item/onemrva-mat-carousel-item.component.ts",
|
|
920
1064
|
"description": "Single slide inside an onemrva-mat-carousel. This component exposes no configurable inputs or outputs.",
|
|
921
1065
|
"inputs": [],
|
|
922
1066
|
"outputs": [],
|
|
@@ -940,16 +1084,20 @@
|
|
|
940
1084
|
"imports": [],
|
|
941
1085
|
"examples": [],
|
|
942
1086
|
"accessibility": [],
|
|
943
|
-
"keywords": [
|
|
1087
|
+
"keywords": [
|
|
1088
|
+
"carousel",
|
|
1089
|
+
"slide",
|
|
1090
|
+
"item",
|
|
1091
|
+
"media"
|
|
1092
|
+
],
|
|
944
1093
|
"group": "Media",
|
|
945
|
-
"themes": []
|
|
946
|
-
"demoCode": "<onemrva-mat-carousel>\r\n <onemrva-mat-carousel-item>\r\n <onemrva-mat-panel [color]=\"color()\">\r\n <onemrva-mat-panel-title>\r\n This is an ID panel with a title {{ color() }}\r\n </onemrva-mat-panel-title>\r\n <onemrva-mat-panel-content>\r\n <div class=\"row gy gx\">\r\n <div class=\"col-3-large col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">Adresse</span>\r\n <br />\r\n <strong>\r\n RUE PONT A NOLE 92 <br />\r\n 6032 MONT-SUR-MARCHIENNE</strong\r\n >\r\n </div>\r\n <div class=\"col-3-large col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">Nationalité</span>\r\n <br />\r\n <strong> Belge </strong>\r\n </div>\r\n <div class=\"col-3-large col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">Organisme de paiement</span>\r\n <br />\r\n <strong>FGTB Charleroi</strong>\r\n </div>\r\n <div class=\"col-3-large col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">IBAN</span>\r\n <br />\r\n <strong>BE37063984850028</strong>\r\n </div>\r\n </div>\r\n <div class=\"row gy gx\">\r\n <div class=\"col-3-large col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">Données de contact</span>\r\n <br />\r\n <strong>\r\n email@email.com <br />\r\n 02 / 303 22 22</strong\r\n >\r\n </div>\r\n <div class=\"col-3-large col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">Autres informations</span>\r\n <br />\r\n <strong\r\n >Femme (FR)<br />\r\n Archivé dans le mainframe: Oui<br />\r\n Date de décès: Ø</strong\r\n >\r\n </div>\r\n <div class=\"col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">Bureau de chômage</span>\r\n <br />\r\n <strong>Charleroi</strong>\r\n </div>\r\n </div>\r\n </onemrva-mat-panel-content>\r\n </onemrva-mat-panel>\r\n </onemrva-mat-carousel-item>\r\n\r\n <onemrva-mat-carousel-item>\r\n <onemrva-mat-panel color=\"primary\">\r\n <onemrva-mat-panel-title>\r\n This is an ID panel with a title\r\n </onemrva-mat-panel-title>\r\n <onemrva-mat-panel-content>\r\n <p>\r\n Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\r\n hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\r\n qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\r\n calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\r\n Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\r\n hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\r\n Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\r\n darth hutt jawa. Palpatine mon sebulba darth.\r\n </p>\r\n </onemrva-mat-panel-content>\r\n </onemrva-mat-panel>\r\n </onemrva-mat-carousel-item>\r\n\r\n <onemrva-mat-carousel-item>\r\n <onemrva-mat-panel>\r\n <onemrva-mat-panel-title>\r\n This is an ID panel with a title\r\n </onemrva-mat-panel-title>\r\n <onemrva-mat-panel-content>\r\n <p>\r\n Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\r\n hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\r\n qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\r\n calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\r\n Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\r\n hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\r\n Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\r\n darth hutt jawa. Palpatine mon sebulba darth.\r\n </p>\r\n </onemrva-mat-panel-content>\r\n </onemrva-mat-panel>\r\n </onemrva-mat-carousel-item>\r\n</onemrva-mat-carousel>\r\n"
|
|
1094
|
+
"themes": []
|
|
947
1095
|
},
|
|
948
1096
|
{
|
|
949
1097
|
"name": "mat-carousel",
|
|
950
1098
|
"selector": "onemrva-mat-carousel",
|
|
951
1099
|
"category": "Material Components",
|
|
952
|
-
"path": "mat-carousel
|
|
1100
|
+
"path": "mat-carousel/src/onemrva-mat-carousel.component.ts",
|
|
953
1101
|
"description": "Auto-advancing carousel with configurable navigation controls. Exposes 6 inputs and 0 outputs. Inputs: timing, gap, padding, showControls, autoplay, showDots. Outputs: none.",
|
|
954
1102
|
"inputs": [
|
|
955
1103
|
{
|
|
@@ -1017,7 +1165,7 @@
|
|
|
1017
1165
|
"imports": [
|
|
1018
1166
|
"MatButtonModule",
|
|
1019
1167
|
"MatIconModule",
|
|
1020
|
-
"
|
|
1168
|
+
"TranslatePipe",
|
|
1021
1169
|
"MatTooltip",
|
|
1022
1170
|
"NgStyle"
|
|
1023
1171
|
],
|
|
@@ -1027,16 +1175,21 @@
|
|
|
1027
1175
|
"Uses aria-label for screen readers",
|
|
1028
1176
|
"Manages focus with tabindex"
|
|
1029
1177
|
],
|
|
1030
|
-
"keywords": [
|
|
1178
|
+
"keywords": [
|
|
1179
|
+
"carousel",
|
|
1180
|
+
"slider",
|
|
1181
|
+
"slideshow",
|
|
1182
|
+
"gallery",
|
|
1183
|
+
"media"
|
|
1184
|
+
],
|
|
1031
1185
|
"group": "Media",
|
|
1032
|
-
"themes": []
|
|
1033
|
-
"demoCode": "<onemrva-mat-carousel>\r\n <onemrva-mat-carousel-item>\r\n <onemrva-mat-panel [color]=\"color()\">\r\n <onemrva-mat-panel-title>\r\n This is an ID panel with a title {{ color() }}\r\n </onemrva-mat-panel-title>\r\n <onemrva-mat-panel-content>\r\n <div class=\"row gy gx\">\r\n <div class=\"col-3-large col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">Adresse</span>\r\n <br />\r\n <strong>\r\n RUE PONT A NOLE 92 <br />\r\n 6032 MONT-SUR-MARCHIENNE</strong\r\n >\r\n </div>\r\n <div class=\"col-3-large col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">Nationalité</span>\r\n <br />\r\n <strong> Belge </strong>\r\n </div>\r\n <div class=\"col-3-large col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">Organisme de paiement</span>\r\n <br />\r\n <strong>FGTB Charleroi</strong>\r\n </div>\r\n <div class=\"col-3-large col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">IBAN</span>\r\n <br />\r\n <strong>BE37063984850028</strong>\r\n </div>\r\n </div>\r\n <div class=\"row gy gx\">\r\n <div class=\"col-3-large col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">Données de contact</span>\r\n <br />\r\n <strong>\r\n email@email.com <br />\r\n 02 / 303 22 22</strong\r\n >\r\n </div>\r\n <div class=\"col-3-large col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">Autres informations</span>\r\n <br />\r\n <strong\r\n >Femme (FR)<br />\r\n Archivé dans le mainframe: Oui<br />\r\n Date de décès: Ø</strong\r\n >\r\n </div>\r\n <div class=\"col-6-medium col-12-small\">\r\n <span class=\"infoColumn\">Bureau de chômage</span>\r\n <br />\r\n <strong>Charleroi</strong>\r\n </div>\r\n </div>\r\n </onemrva-mat-panel-content>\r\n </onemrva-mat-panel>\r\n </onemrva-mat-carousel-item>\r\n\r\n <onemrva-mat-carousel-item>\r\n <onemrva-mat-panel color=\"primary\">\r\n <onemrva-mat-panel-title>\r\n This is an ID panel with a title\r\n </onemrva-mat-panel-title>\r\n <onemrva-mat-panel-content>\r\n <p>\r\n Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\r\n hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\r\n qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\r\n calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\r\n Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\r\n hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\r\n Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\r\n darth hutt jawa. Palpatine mon sebulba darth.\r\n </p>\r\n </onemrva-mat-panel-content>\r\n </onemrva-mat-panel>\r\n </onemrva-mat-carousel-item>\r\n\r\n <onemrva-mat-carousel-item>\r\n <onemrva-mat-panel>\r\n <onemrva-mat-panel-title>\r\n This is an ID panel with a title\r\n </onemrva-mat-panel-title>\r\n <onemrva-mat-panel-content>\r\n <p>\r\n Lucas ipsum dolor sit amet hutt alderaan skywalker padmé anakin mon\r\n hoth k-3po jango hutt. Ponda gonk darth windu ahsoka wedge organa\r\n qui-gon fett. Mustafar darth darth kashyyyk. Jade antilles bothan\r\n calrissian wedge fett han. Darth antilles amidala dooku watto fisto.\r\n Amidala mandalore wicket lobot ventress. Wampa calamari darth hutt\r\n hutt kamino ahsoka anakin. Moff kamino solo mothma zabrak aayla mara.\r\n Coruscant zabrak organa skywalker. Bothan solo darth windu anakin\r\n darth hutt jawa. Palpatine mon sebulba darth.\r\n </p>\r\n </onemrva-mat-panel-content>\r\n </onemrva-mat-panel>\r\n </onemrva-mat-carousel-item>\r\n</onemrva-mat-carousel>\r\n"
|
|
1186
|
+
"themes": []
|
|
1034
1187
|
},
|
|
1035
1188
|
{
|
|
1036
1189
|
"name": "mat-choice-chip",
|
|
1037
1190
|
"selector": "onemrva-mat-choice-chip",
|
|
1038
1191
|
"category": "Material Components",
|
|
1039
|
-
"path": "mat-choice-chip
|
|
1192
|
+
"path": "mat-choice-chip/src/onemrva-mat-choice-chip.component.ts",
|
|
1040
1193
|
"description": "Toggle chip implementing ControlValueAccessor for use in forms. Exposes 2 inputs and 0 outputs. Inputs: valueInput: boolean | null, disabledInput: boolean | null. Outputs: none.",
|
|
1041
1194
|
"inputs": [
|
|
1042
1195
|
{
|
|
@@ -1069,10 +1222,18 @@
|
|
|
1069
1222
|
"queryChildren": [],
|
|
1070
1223
|
"hasEffects": false,
|
|
1071
1224
|
"standalone": true,
|
|
1072
|
-
"imports": [
|
|
1225
|
+
"imports": [
|
|
1226
|
+
"MatCheckbox"
|
|
1227
|
+
],
|
|
1073
1228
|
"examples": [],
|
|
1074
1229
|
"accessibility": [],
|
|
1075
|
-
"keywords": [
|
|
1230
|
+
"keywords": [
|
|
1231
|
+
"choice-chip",
|
|
1232
|
+
"chip",
|
|
1233
|
+
"toggle",
|
|
1234
|
+
"checkbox",
|
|
1235
|
+
"select"
|
|
1236
|
+
],
|
|
1076
1237
|
"group": "Forms",
|
|
1077
1238
|
"themes": []
|
|
1078
1239
|
},
|
|
@@ -1080,7 +1241,7 @@
|
|
|
1080
1241
|
"name": "mat-copy-to-clipboard",
|
|
1081
1242
|
"selector": "copy-to-clipboard",
|
|
1082
1243
|
"category": "Material Components",
|
|
1083
|
-
"path": "mat-copy-to-clipboard
|
|
1244
|
+
"path": "mat-copy-to-clipboard/src/components/copy-to-clipboard.component.ts",
|
|
1084
1245
|
"description": "Button that copies a value or element text to the clipboard. Exposes 1 input and 4 outputs. Inputs: tooltip. Outputs: onCopy: void, onClick: Event, onHover: Event, onLeave: Event.",
|
|
1085
1246
|
"inputs": [
|
|
1086
1247
|
{
|
|
@@ -1126,10 +1287,18 @@
|
|
|
1126
1287
|
"queryChildren": [],
|
|
1127
1288
|
"hasEffects": false,
|
|
1128
1289
|
"standalone": true,
|
|
1129
|
-
"imports": [
|
|
1290
|
+
"imports": [
|
|
1291
|
+
"MatIconModule",
|
|
1292
|
+
"MatTooltipModule"
|
|
1293
|
+
],
|
|
1130
1294
|
"examples": [],
|
|
1131
1295
|
"accessibility": [],
|
|
1132
|
-
"keywords": [
|
|
1296
|
+
"keywords": [
|
|
1297
|
+
"copy",
|
|
1298
|
+
"clipboard",
|
|
1299
|
+
"copy-to-clipboard",
|
|
1300
|
+
"action"
|
|
1301
|
+
],
|
|
1133
1302
|
"group": "Misc",
|
|
1134
1303
|
"themes": [],
|
|
1135
1304
|
"demoCode": "<p>\n You can say\n <copy-to-clipboard [tooltip]=\"'copied.to.clipboard' | translate\"\n >Hello world</copy-to-clipboard\n >!\n</p>\n"
|
|
@@ -1138,7 +1307,7 @@
|
|
|
1138
1307
|
"name": "mat-country-item",
|
|
1139
1308
|
"selector": "mat-country-item",
|
|
1140
1309
|
"category": "Material Components",
|
|
1141
|
-
"path": "mat-country-item
|
|
1310
|
+
"path": "mat-country-item/src/onemrva-mat-country-item.component.ts",
|
|
1142
1311
|
"description": "Single country option displaying flag and translated name. Exposes 2 inputs and 0 outputs. Inputs: countryCode: string | null, countryName: string | null | undefined. Outputs: none.",
|
|
1143
1312
|
"inputs": [
|
|
1144
1313
|
{
|
|
@@ -1165,10 +1334,16 @@
|
|
|
1165
1334
|
"queryChildren": [],
|
|
1166
1335
|
"hasEffects": false,
|
|
1167
1336
|
"standalone": true,
|
|
1168
|
-
"imports": [
|
|
1337
|
+
"imports": [],
|
|
1169
1338
|
"examples": [],
|
|
1170
1339
|
"accessibility": [],
|
|
1171
|
-
"keywords": [
|
|
1340
|
+
"keywords": [
|
|
1341
|
+
"country",
|
|
1342
|
+
"flag",
|
|
1343
|
+
"option",
|
|
1344
|
+
"select",
|
|
1345
|
+
"list-item"
|
|
1346
|
+
],
|
|
1172
1347
|
"group": "Forms",
|
|
1173
1348
|
"themes": []
|
|
1174
1349
|
},
|
|
@@ -1176,7 +1351,7 @@
|
|
|
1176
1351
|
"name": "mat-datepicker-header",
|
|
1177
1352
|
"selector": "onemrva-mat-datepicker-header",
|
|
1178
1353
|
"category": "Material Components",
|
|
1179
|
-
"path": "mat-datepicker-header
|
|
1354
|
+
"path": "mat-datepicker-header/src/onemrva-mat-datepicker-header.component.ts",
|
|
1180
1355
|
"description": "Custom calendar header with month/year navigation for the DS datepicker. This component exposes no configurable inputs or outputs.",
|
|
1181
1356
|
"inputs": [],
|
|
1182
1357
|
"outputs": [],
|
|
@@ -1195,7 +1370,7 @@
|
|
|
1195
1370
|
"imports": [
|
|
1196
1371
|
"MatButtonModule",
|
|
1197
1372
|
"MatIconModule",
|
|
1198
|
-
"
|
|
1373
|
+
"TranslatePipe",
|
|
1199
1374
|
"MatTooltip"
|
|
1200
1375
|
],
|
|
1201
1376
|
"examples": [],
|
|
@@ -1205,7 +1380,13 @@
|
|
|
1205
1380
|
"Uses aria-live for dynamic announcements",
|
|
1206
1381
|
"Uses aria-hidden for decorative elements"
|
|
1207
1382
|
],
|
|
1208
|
-
"keywords": [
|
|
1383
|
+
"keywords": [
|
|
1384
|
+
"datepicker",
|
|
1385
|
+
"calendar",
|
|
1386
|
+
"date",
|
|
1387
|
+
"header",
|
|
1388
|
+
"navigation"
|
|
1389
|
+
],
|
|
1209
1390
|
"group": "Forms",
|
|
1210
1391
|
"themes": []
|
|
1211
1392
|
},
|
|
@@ -1213,7 +1394,7 @@
|
|
|
1213
1394
|
"name": "mat-empty-row",
|
|
1214
1395
|
"selector": "onemrva-mat-empty-row",
|
|
1215
1396
|
"category": "Material Components",
|
|
1216
|
-
"path": "mat-empty-row
|
|
1397
|
+
"path": "mat-empty-row/src/onemrva-mat-empty-row.component.ts",
|
|
1217
1398
|
"description": "Empty-state placeholder with illustration and optional action button. Exposes 3 inputs and 1 output. Inputs: buttonText: string | undefined, text: string, imageAlt: string. Outputs: clear: any.",
|
|
1218
1399
|
"inputs": [
|
|
1219
1400
|
{
|
|
@@ -1260,7 +1441,10 @@
|
|
|
1260
1441
|
"queryChildren": [],
|
|
1261
1442
|
"hasEffects": false,
|
|
1262
1443
|
"standalone": true,
|
|
1263
|
-
"imports": [
|
|
1444
|
+
"imports": [
|
|
1445
|
+
"NgOptimizedImage",
|
|
1446
|
+
"MatButton"
|
|
1447
|
+
],
|
|
1264
1448
|
"examples": [],
|
|
1265
1449
|
"accessibility": [],
|
|
1266
1450
|
"keywords": [
|
|
@@ -1277,7 +1461,7 @@
|
|
|
1277
1461
|
"name": "mat-file-upload",
|
|
1278
1462
|
"selector": "file-panel",
|
|
1279
1463
|
"category": "Material Components",
|
|
1280
|
-
"path": "mat-file-upload
|
|
1464
|
+
"path": "mat-file-upload/src/components/onemrva-mat-file-panel/onemrva-file-panel.component.ts",
|
|
1281
1465
|
"description": "Single file row showing upload progress, name, and actions. Exposes 8 inputs and 1 output. Inputs: id, dataCy: string, file (required): ReferencedProgressFile, actions: ActionConfig[], showProgress, displayDate, maxFileSize, disabled. Outputs: panelClick.",
|
|
1282
1466
|
"inputs": [
|
|
1283
1467
|
{
|
|
@@ -1303,6 +1487,14 @@
|
|
|
1303
1487
|
"required": false,
|
|
1304
1488
|
"examples": []
|
|
1305
1489
|
},
|
|
1490
|
+
{
|
|
1491
|
+
"name": "displayDate",
|
|
1492
|
+
"type": "string | undefined",
|
|
1493
|
+
"description": "Input property `displayDate` of type `string | undefined`. Default: `undefined`.",
|
|
1494
|
+
"defaultValue": "undefined",
|
|
1495
|
+
"required": false,
|
|
1496
|
+
"examples": []
|
|
1497
|
+
},
|
|
1306
1498
|
{
|
|
1307
1499
|
"name": "id",
|
|
1308
1500
|
"type": "any",
|
|
@@ -1319,14 +1511,6 @@
|
|
|
1319
1511
|
"required": false,
|
|
1320
1512
|
"examples": []
|
|
1321
1513
|
},
|
|
1322
|
-
{
|
|
1323
|
-
"name": "displayDate",
|
|
1324
|
-
"type": "string",
|
|
1325
|
-
"description": "Input property `displayDate` of type `string`. Default: `''`.",
|
|
1326
|
-
"defaultValue": "''",
|
|
1327
|
-
"required": false,
|
|
1328
|
-
"examples": []
|
|
1329
|
-
},
|
|
1330
1514
|
{
|
|
1331
1515
|
"name": "maxFileSize",
|
|
1332
1516
|
"type": "number",
|
|
@@ -1344,9 +1528,21 @@
|
|
|
1344
1528
|
"examples": []
|
|
1345
1529
|
}
|
|
1346
1530
|
],
|
|
1347
|
-
"outputs": [
|
|
1531
|
+
"outputs": [
|
|
1532
|
+
{
|
|
1533
|
+
"name": "panelClick",
|
|
1534
|
+
"type": "OutputEmitter<ReferencedProgressFile>",
|
|
1535
|
+
"description": "Output event `panelClick` emits `OutputEmitter<ReferencedProgressFile>`."
|
|
1536
|
+
}
|
|
1537
|
+
],
|
|
1348
1538
|
"methods": [],
|
|
1349
|
-
"slots": [
|
|
1539
|
+
"slots": [
|
|
1540
|
+
{
|
|
1541
|
+
"name": "default",
|
|
1542
|
+
"selector": "*",
|
|
1543
|
+
"description": "Default content projection slot"
|
|
1544
|
+
}
|
|
1545
|
+
],
|
|
1350
1546
|
"hostListeners": [],
|
|
1351
1547
|
"queryChildren": [],
|
|
1352
1548
|
"hasEffects": false,
|
|
@@ -1364,16 +1560,22 @@
|
|
|
1364
1560
|
"Supports keyboard navigation",
|
|
1365
1561
|
"Manages focus with tabindex"
|
|
1366
1562
|
],
|
|
1367
|
-
"keywords": [
|
|
1563
|
+
"keywords": [
|
|
1564
|
+
"file",
|
|
1565
|
+
"upload",
|
|
1566
|
+
"progress",
|
|
1567
|
+
"panel",
|
|
1568
|
+
"attachment"
|
|
1569
|
+
],
|
|
1368
1570
|
"group": "Forms",
|
|
1369
1571
|
"themes": [],
|
|
1370
|
-
"demoCode": "<onemrva-mat-file-upload\
|
|
1572
|
+
"demoCode": "<onemrva-mat-file-upload\n [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n [maxFileSize]=\"1485760\"\n [filePanelTemplate]=\"tpl\"\n errorMessage=\"test\"\n/>\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n <file-panel [file]=\"file\" [actions]=\"actions\" [showProgress]=\"true\" />\n</ng-template>\n"
|
|
1371
1573
|
},
|
|
1372
1574
|
{
|
|
1373
1575
|
"name": "mat-file-upload",
|
|
1374
1576
|
"selector": "onemrva-mat-file-upload",
|
|
1375
1577
|
"category": "Material Components",
|
|
1376
|
-
"path": "mat-file-upload
|
|
1578
|
+
"path": "mat-file-upload/src/components/onemrva-mat-file-upload/onemrva-mat-file-upload.component.ts",
|
|
1377
1579
|
"description": "Drag-and-drop file upload input with multi-file progress tracking. Exposes 10 inputs and 0 outputs. Inputs: accept: string[], maxFileSize, numberOfFiles, maxTotalFileSize, uploadOnDrop, initialFiles: ProgressFile[], errorMessage, hideExtensions: string[], dropFilesHereTextTranslationKey, dataCy. Outputs: none.",
|
|
1378
1580
|
"inputs": [
|
|
1379
1581
|
{
|
|
@@ -1466,19 +1668,34 @@
|
|
|
1466
1668
|
"queryChildren": [],
|
|
1467
1669
|
"hasEffects": false,
|
|
1468
1670
|
"standalone": true,
|
|
1469
|
-
"imports": [
|
|
1671
|
+
"imports": [
|
|
1672
|
+
"AsyncPipe",
|
|
1673
|
+
"MatIcon",
|
|
1674
|
+
"TranslatePipe",
|
|
1675
|
+
"NgTemplateOutlet",
|
|
1676
|
+
"MatError",
|
|
1677
|
+
"DndDirective"
|
|
1678
|
+
],
|
|
1470
1679
|
"examples": [],
|
|
1471
|
-
"accessibility": [
|
|
1472
|
-
|
|
1680
|
+
"accessibility": [
|
|
1681
|
+
"Defines roles: button"
|
|
1682
|
+
],
|
|
1683
|
+
"keywords": [
|
|
1684
|
+
"file-upload",
|
|
1685
|
+
"upload",
|
|
1686
|
+
"drag-drop",
|
|
1687
|
+
"file",
|
|
1688
|
+
"attachment"
|
|
1689
|
+
],
|
|
1473
1690
|
"group": "Forms",
|
|
1474
1691
|
"themes": [],
|
|
1475
|
-
"demoCode": "<onemrva-mat-file-upload\
|
|
1692
|
+
"demoCode": "<onemrva-mat-file-upload\n [accept]=\"['video/mp4', 'application/pdf', 'application/msword']\"\n [maxFileSize]=\"1485760\"\n [filePanelTemplate]=\"tpl\"\n errorMessage=\"test\"\n/>\n<ng-template #tpl let-file=\"file\" let-id=\"id\" let-cmpRef=\"cmpRef\">\n <file-panel [file]=\"file\" [actions]=\"actions\" [showProgress]=\"true\" />\n</ng-template>\n"
|
|
1476
1693
|
},
|
|
1477
1694
|
{
|
|
1478
1695
|
"name": "mat-input-address",
|
|
1479
1696
|
"selector": "onemrva-mat-input-address",
|
|
1480
1697
|
"category": "Material Components",
|
|
1481
|
-
"path": "mat-input-address
|
|
1698
|
+
"path": "mat-input-address/src/onemrva-mat-input-address.component.ts",
|
|
1482
1699
|
"description": "Address autocomplete field backed by OpenStreetMap. Exposes 8 inputs and 1 output. Inputs: placeholder, readonly, address (required): FormControl, mode: 'road-only' | 'full', label, noEntriesFoundLabel, hint, countryCodes. Outputs: getAddress: OSMResult.",
|
|
1483
1700
|
"inputs": [
|
|
1484
1701
|
{
|
|
@@ -1563,7 +1780,7 @@
|
|
|
1563
1780
|
"MatFormFieldModule",
|
|
1564
1781
|
"MatSelectModule",
|
|
1565
1782
|
"ReactiveFormsModule",
|
|
1566
|
-
"
|
|
1783
|
+
"TranslatePipe",
|
|
1567
1784
|
"MatAutocompleteTrigger",
|
|
1568
1785
|
"MatAutocomplete",
|
|
1569
1786
|
"MatIcon",
|
|
@@ -1572,8 +1789,17 @@
|
|
|
1572
1789
|
"AsyncPipe"
|
|
1573
1790
|
],
|
|
1574
1791
|
"examples": [],
|
|
1575
|
-
"accessibility": [
|
|
1576
|
-
|
|
1792
|
+
"accessibility": [
|
|
1793
|
+
"Supports keyboard navigation",
|
|
1794
|
+
"Implements focus management"
|
|
1795
|
+
],
|
|
1796
|
+
"keywords": [
|
|
1797
|
+
"input",
|
|
1798
|
+
"address",
|
|
1799
|
+
"autocomplete",
|
|
1800
|
+
"location",
|
|
1801
|
+
"osm"
|
|
1802
|
+
],
|
|
1577
1803
|
"group": "Forms",
|
|
1578
1804
|
"themes": []
|
|
1579
1805
|
},
|
|
@@ -1581,7 +1807,7 @@
|
|
|
1581
1807
|
"name": "mat-input-birthplace",
|
|
1582
1808
|
"selector": "onemrva-mat-input-birthplace",
|
|
1583
1809
|
"category": "Material Components",
|
|
1584
|
-
"path": "mat-input-birthplace
|
|
1810
|
+
"path": "mat-input-birthplace/src/onemrva-mat-input-birthplace.component.ts",
|
|
1585
1811
|
"description": "Country and municipality autocomplete for capturing birthplace. Exposes 8 inputs and 1 output. Inputs: readonly, countryCode, label, noEntriesFoundLabel, hint, placeholderLabel, searchAriaLabel, returnValue. Outputs: getCountry: any.",
|
|
1586
1812
|
"inputs": [
|
|
1587
1813
|
{
|
|
@@ -1668,13 +1894,19 @@
|
|
|
1668
1894
|
"MatSelectModule",
|
|
1669
1895
|
"MatSelectSearchModule",
|
|
1670
1896
|
"ReactiveFormsModule",
|
|
1671
|
-
"
|
|
1897
|
+
"TranslatePipe",
|
|
1672
1898
|
"OnemrvaCountryItemComponent",
|
|
1673
1899
|
"AsyncPipe"
|
|
1674
1900
|
],
|
|
1675
1901
|
"examples": [],
|
|
1676
1902
|
"accessibility": [],
|
|
1677
|
-
"keywords": [
|
|
1903
|
+
"keywords": [
|
|
1904
|
+
"input",
|
|
1905
|
+
"birthplace",
|
|
1906
|
+
"country",
|
|
1907
|
+
"municipality",
|
|
1908
|
+
"city"
|
|
1909
|
+
],
|
|
1678
1910
|
"group": "Forms",
|
|
1679
1911
|
"themes": []
|
|
1680
1912
|
},
|
|
@@ -1682,7 +1914,7 @@
|
|
|
1682
1914
|
"name": "mat-input-country",
|
|
1683
1915
|
"selector": "onemrva-mat-input-country",
|
|
1684
1916
|
"category": "Material Components",
|
|
1685
|
-
"path": "mat-input-country
|
|
1917
|
+
"path": "mat-input-country/src/onemrva-mat-input-country.component.ts",
|
|
1686
1918
|
"description": "Searchable country selector with flag icons. Exposes 7 inputs and 1 output. Inputs: readonly, disabled, label, noEntriesFoundLabel, hint, placeholderLabel, searchAriaLabel. Outputs: getCountry: any.",
|
|
1687
1919
|
"inputs": [
|
|
1688
1920
|
{
|
|
@@ -1779,13 +2011,19 @@
|
|
|
1779
2011
|
"MatSelectModule",
|
|
1780
2012
|
"MatSelectSearchModule",
|
|
1781
2013
|
"ReactiveFormsModule",
|
|
1782
|
-
"
|
|
2014
|
+
"TranslatePipe",
|
|
1783
2015
|
"OnemrvaCountryItemComponent",
|
|
1784
2016
|
"AsyncPipe"
|
|
1785
2017
|
],
|
|
1786
2018
|
"examples": [],
|
|
1787
2019
|
"accessibility": [],
|
|
1788
|
-
"keywords": [
|
|
2020
|
+
"keywords": [
|
|
2021
|
+
"input",
|
|
2022
|
+
"country",
|
|
2023
|
+
"select",
|
|
2024
|
+
"flag",
|
|
2025
|
+
"search"
|
|
2026
|
+
],
|
|
1789
2027
|
"group": "Forms",
|
|
1790
2028
|
"themes": []
|
|
1791
2029
|
},
|
|
@@ -1793,7 +2031,7 @@
|
|
|
1793
2031
|
"name": "mat-input-enterprise-number",
|
|
1794
2032
|
"selector": "onemrva-mat-input-enterprise-number",
|
|
1795
2033
|
"category": "Material Components",
|
|
1796
|
-
"path": "mat-input-enterprise-number
|
|
2034
|
+
"path": "mat-input-enterprise-number/src/onemrva-mat-input-enterprise-number.component.ts",
|
|
1797
2035
|
"description": "Belgian enterprise number (BCE/KBO) input with validation. Exposes 8 inputs and 1 output. Inputs: readonly, enterpriseNumber (required): FormControl, label, noEntriesFoundLabel, placeholderLabel, defaultCountry, searchAriaLabel, hint. Outputs: getCountry: any.",
|
|
1798
2036
|
"inputs": [
|
|
1799
2037
|
{
|
|
@@ -1878,13 +2116,15 @@
|
|
|
1878
2116
|
"MatFormFieldModule",
|
|
1879
2117
|
"MatSelectModule",
|
|
1880
2118
|
"ReactiveFormsModule",
|
|
1881
|
-
"
|
|
2119
|
+
"TranslatePipe",
|
|
1882
2120
|
"FlagIconComponent",
|
|
1883
2121
|
"MatSelectSearchModule",
|
|
1884
2122
|
"AsyncPipe"
|
|
1885
2123
|
],
|
|
1886
2124
|
"examples": [],
|
|
1887
|
-
"accessibility": [
|
|
2125
|
+
"accessibility": [
|
|
2126
|
+
"Implements focus management"
|
|
2127
|
+
],
|
|
1888
2128
|
"keywords": [
|
|
1889
2129
|
"input",
|
|
1890
2130
|
"enterprise-number",
|
|
@@ -1900,7 +2140,7 @@
|
|
|
1900
2140
|
"name": "mat-input-iban",
|
|
1901
2141
|
"selector": "onemrva-mat-input-iban",
|
|
1902
2142
|
"category": "Material Components",
|
|
1903
|
-
"path": "mat-input-iban
|
|
2143
|
+
"path": "mat-input-iban/src/onemrva-mat-input-iban.component.ts",
|
|
1904
2144
|
"description": "IBAN bank account number input with format validation. Exposes 11 inputs and 1 output. Inputs: noEntriesFoundLabel, placeholderLabel, searchAriaLabel, label, prioritizedCountries: string[], onlySEPA, readonly, value, disabled, placeholder, required. Outputs: getCountry: any.",
|
|
1905
2145
|
"inputs": [
|
|
1906
2146
|
{
|
|
@@ -1979,7 +2219,7 @@
|
|
|
1979
2219
|
"MatSelectModule",
|
|
1980
2220
|
"MatSelectSearchModule",
|
|
1981
2221
|
"ReactiveFormsModule",
|
|
1982
|
-
"
|
|
2222
|
+
"TranslatePipe",
|
|
1983
2223
|
"MatDivider",
|
|
1984
2224
|
"AsyncPipe"
|
|
1985
2225
|
],
|
|
@@ -1990,7 +2230,13 @@
|
|
|
1990
2230
|
"Supports keyboard navigation",
|
|
1991
2231
|
"Implements focus management"
|
|
1992
2232
|
],
|
|
1993
|
-
"keywords": [
|
|
2233
|
+
"keywords": [
|
|
2234
|
+
"input",
|
|
2235
|
+
"iban",
|
|
2236
|
+
"bank",
|
|
2237
|
+
"validation",
|
|
2238
|
+
"account-number"
|
|
2239
|
+
],
|
|
1994
2240
|
"group": "Forms",
|
|
1995
2241
|
"themes": []
|
|
1996
2242
|
},
|
|
@@ -1998,7 +2244,7 @@
|
|
|
1998
2244
|
"name": "mat-input-phone",
|
|
1999
2245
|
"selector": "onemrva-mat-input-phone",
|
|
2000
2246
|
"category": "Material Components",
|
|
2001
|
-
"path": "mat-input-phone
|
|
2247
|
+
"path": "mat-input-phone/src/onemrva-mat-input-phone.component.ts",
|
|
2002
2248
|
"description": "International phone number input with country-code prefix selector. Exposes 9 inputs and 1 output. Inputs: noEntriesFoundLabel, placeholderLabel, searchAriaLabel, defaultPrefix, readonly, value, disabled, placeholder, required. Outputs: getCountry: any.",
|
|
2003
2249
|
"inputs": [
|
|
2004
2250
|
{
|
|
@@ -2061,7 +2307,6 @@
|
|
|
2061
2307
|
"MatSelectModule",
|
|
2062
2308
|
"MatSelectSearchModule",
|
|
2063
2309
|
"ReactiveFormsModule",
|
|
2064
|
-
"TranslateModule",
|
|
2065
2310
|
"FlagIconComponent",
|
|
2066
2311
|
"AsyncPipe"
|
|
2067
2312
|
],
|
|
@@ -2084,7 +2329,7 @@
|
|
|
2084
2329
|
"name": "mat-message-box",
|
|
2085
2330
|
"selector": "onemrva-mat-message-box",
|
|
2086
2331
|
"category": "Material Components",
|
|
2087
|
-
"path": "mat-message-box
|
|
2332
|
+
"path": "mat-message-box/src/onemrva-mat-message-box.component.ts",
|
|
2088
2333
|
"description": "Inline alert banner for error, warning, success, or info states. Exposes 5 inputs and 0 outputs. Inputs: label: false | string, messageCode, id, dataCy, color: OnemrvaMatColor. Outputs: none.",
|
|
2089
2334
|
"inputs": [
|
|
2090
2335
|
{
|
|
@@ -2103,6 +2348,14 @@
|
|
|
2103
2348
|
"required": false,
|
|
2104
2349
|
"examples": []
|
|
2105
2350
|
},
|
|
2351
|
+
{
|
|
2352
|
+
"name": "neutralStickerText",
|
|
2353
|
+
"type": "string",
|
|
2354
|
+
"description": "Input property `neutralStickerText` of type `string`. Default: `'New'`.",
|
|
2355
|
+
"defaultValue": "'New'",
|
|
2356
|
+
"required": false,
|
|
2357
|
+
"examples": []
|
|
2358
|
+
},
|
|
2106
2359
|
{
|
|
2107
2360
|
"name": "messageCode",
|
|
2108
2361
|
"type": "string",
|
|
@@ -2141,9 +2394,14 @@
|
|
|
2141
2394
|
"queryChildren": [],
|
|
2142
2395
|
"hasEffects": false,
|
|
2143
2396
|
"standalone": true,
|
|
2144
|
-
"imports": [
|
|
2397
|
+
"imports": [
|
|
2398
|
+
"OnemrvaMatStickerComponent",
|
|
2399
|
+
"OnemRvaColorDirective"
|
|
2400
|
+
],
|
|
2145
2401
|
"examples": [],
|
|
2146
|
-
"accessibility": [
|
|
2402
|
+
"accessibility": [
|
|
2403
|
+
"Uses aria-label for screen readers"
|
|
2404
|
+
],
|
|
2147
2405
|
"keywords": [
|
|
2148
2406
|
"message-box",
|
|
2149
2407
|
"alert",
|
|
@@ -2155,13 +2413,13 @@
|
|
|
2155
2413
|
],
|
|
2156
2414
|
"group": "Feedback",
|
|
2157
2415
|
"themes": [],
|
|
2158
|
-
"demoCode": "<onemrva-mat-message-box
|
|
2416
|
+
"demoCode": "<onemrva-mat-message-box\n [color]=\"color()\"\n [neutralStickerText]=\"'Here is stickerText'\"\n>\n This is an {{ color() }} message\n</onemrva-mat-message-box>\n"
|
|
2159
2417
|
},
|
|
2160
2418
|
{
|
|
2161
2419
|
"name": "mat-multi-select",
|
|
2162
2420
|
"selector": "onemrva-mat-multi-select",
|
|
2163
2421
|
"category": "Material Components",
|
|
2164
|
-
"path": "mat-multi-select
|
|
2422
|
+
"path": "mat-multi-select/src/onemrva-mat-multi-select.component.ts",
|
|
2165
2423
|
"description": "Multi-value searchable select implementing MatFormFieldControl. Exposes 8 inputs and 0 outputs. Inputs: multiple, formControl (required): FormControl, role, label, invalid, showFilter, selectionToggle, dataCy. Outputs: none.",
|
|
2166
2424
|
"inputs": [
|
|
2167
2425
|
{
|
|
@@ -2223,7 +2481,7 @@
|
|
|
2223
2481
|
"name": "dataCy",
|
|
2224
2482
|
"type": "any",
|
|
2225
2483
|
"description": "Input property `dataCy` of type `any`. Default: ``onemrva-mat-multi-select-${NEXT_ID++}`, { // eslint-disable-next-line @angul...`.",
|
|
2226
|
-
"defaultValue": "`onemrva-mat-multi-select-${NEXT_ID++}`, {\
|
|
2484
|
+
"defaultValue": "`onemrva-mat-multi-select-${NEXT_ID++}`, {\n // eslint-disable-next-line @angular-eslint/no-input-rename\n alias: 'attr.data-cy',\n }",
|
|
2227
2485
|
"required": false,
|
|
2228
2486
|
"examples": []
|
|
2229
2487
|
}
|
|
@@ -2248,7 +2506,13 @@
|
|
|
2248
2506
|
"Uses aria-label for screen readers",
|
|
2249
2507
|
"Manages focus with tabindex"
|
|
2250
2508
|
],
|
|
2251
|
-
"keywords": [
|
|
2509
|
+
"keywords": [
|
|
2510
|
+
"multi-select",
|
|
2511
|
+
"select",
|
|
2512
|
+
"dropdown",
|
|
2513
|
+
"multiple",
|
|
2514
|
+
"forms"
|
|
2515
|
+
],
|
|
2252
2516
|
"group": "Forms",
|
|
2253
2517
|
"themes": []
|
|
2254
2518
|
},
|
|
@@ -2256,7 +2520,7 @@
|
|
|
2256
2520
|
"name": "mat-navigation",
|
|
2257
2521
|
"selector": "onemrva-mat-navigation-item",
|
|
2258
2522
|
"category": "Material Components",
|
|
2259
|
-
"path": "mat-navigation
|
|
2523
|
+
"path": "mat-navigation/src/mat-navigation-item/onemrva-mat-navigation-item.component.ts",
|
|
2260
2524
|
"description": "Expandable navigation item with optional icon and children. Exposes 12 inputs and 0 outputs. Inputs: routerLink: string, routerLinkActiveOptions: any, dataCy: string, baseRouteForActiveMenu: string, label, icon: string, level, highlighted: boolean, opened: boolean, children: NavItem[], customNgClass: any, translate. Outputs: none.",
|
|
2261
2525
|
"inputs": [
|
|
2262
2526
|
{
|
|
@@ -2369,7 +2633,13 @@
|
|
|
2369
2633
|
],
|
|
2370
2634
|
"examples": [],
|
|
2371
2635
|
"accessibility": [],
|
|
2372
|
-
"keywords": [
|
|
2636
|
+
"keywords": [
|
|
2637
|
+
"navigation",
|
|
2638
|
+
"nav-item",
|
|
2639
|
+
"menu",
|
|
2640
|
+
"tree",
|
|
2641
|
+
"link"
|
|
2642
|
+
],
|
|
2373
2643
|
"group": "Navigation",
|
|
2374
2644
|
"themes": []
|
|
2375
2645
|
},
|
|
@@ -2377,7 +2647,7 @@
|
|
|
2377
2647
|
"name": "mat-navigation",
|
|
2378
2648
|
"selector": "onemrva-mat-navigation-tree",
|
|
2379
2649
|
"category": "Material Components",
|
|
2380
|
-
"path": "mat-navigation
|
|
2650
|
+
"path": "mat-navigation/src/mat-navigation-tree/onemrva-mat-navigation-tree.component.ts",
|
|
2381
2651
|
"description": "Recursive tree of navigation items. Exposes 3 inputs and 0 outputs. Inputs: items: NavItem[], level: number, translate: boolean. Outputs: none.",
|
|
2382
2652
|
"inputs": [
|
|
2383
2653
|
{
|
|
@@ -2412,10 +2682,18 @@
|
|
|
2412
2682
|
"queryChildren": [],
|
|
2413
2683
|
"hasEffects": false,
|
|
2414
2684
|
"standalone": true,
|
|
2415
|
-
"imports": [
|
|
2685
|
+
"imports": [
|
|
2686
|
+
"OnemrvaMatNavigationItemComponent"
|
|
2687
|
+
],
|
|
2416
2688
|
"examples": [],
|
|
2417
2689
|
"accessibility": [],
|
|
2418
|
-
"keywords": [
|
|
2690
|
+
"keywords": [
|
|
2691
|
+
"navigation",
|
|
2692
|
+
"tree",
|
|
2693
|
+
"menu",
|
|
2694
|
+
"recursive",
|
|
2695
|
+
"nav-list"
|
|
2696
|
+
],
|
|
2419
2697
|
"group": "Navigation",
|
|
2420
2698
|
"themes": []
|
|
2421
2699
|
},
|
|
@@ -2423,7 +2701,7 @@
|
|
|
2423
2701
|
"name": "mat-navigation",
|
|
2424
2702
|
"selector": "onemrva-mat-navigation",
|
|
2425
2703
|
"category": "Material Components",
|
|
2426
|
-
"path": "mat-navigation
|
|
2704
|
+
"path": "mat-navigation/src/onemrva-mat-navigation.component.ts",
|
|
2427
2705
|
"description": "Navigation list driven by a NavItem array. Exposes 3 inputs and 0 outputs. Inputs: items: NavItem[], level: number, translate: boolean. Outputs: none.",
|
|
2428
2706
|
"inputs": [
|
|
2429
2707
|
{
|
|
@@ -2458,10 +2736,17 @@
|
|
|
2458
2736
|
"queryChildren": [],
|
|
2459
2737
|
"hasEffects": false,
|
|
2460
2738
|
"standalone": true,
|
|
2461
|
-
"imports": [
|
|
2739
|
+
"imports": [
|
|
2740
|
+
"OnemrvaMatNavigationTreeComponent"
|
|
2741
|
+
],
|
|
2462
2742
|
"examples": [],
|
|
2463
2743
|
"accessibility": [],
|
|
2464
|
-
"keywords": [
|
|
2744
|
+
"keywords": [
|
|
2745
|
+
"navigation",
|
|
2746
|
+
"nav-list",
|
|
2747
|
+
"menu",
|
|
2748
|
+
"sidenav"
|
|
2749
|
+
],
|
|
2465
2750
|
"group": "Navigation",
|
|
2466
2751
|
"themes": []
|
|
2467
2752
|
},
|
|
@@ -2469,7 +2754,7 @@
|
|
|
2469
2754
|
"name": "mat-notification",
|
|
2470
2755
|
"selector": "onemrva-mat-notification",
|
|
2471
2756
|
"category": "Material Components",
|
|
2472
|
-
"path": "mat-notification
|
|
2757
|
+
"path": "mat-notification/src/onemrva-mat-notification.component.ts",
|
|
2473
2758
|
"description": "Modal dialog for confirmations, alerts, and notices. Exposes 4 inputs and 1 output. Inputs: message, closable, id, dataCy. Outputs: notificationClose: void.",
|
|
2474
2759
|
"inputs": [
|
|
2475
2760
|
{
|
|
@@ -2503,6 +2788,14 @@
|
|
|
2503
2788
|
"defaultValue": "'onemrva-mat-notification'",
|
|
2504
2789
|
"required": false,
|
|
2505
2790
|
"examples": []
|
|
2791
|
+
},
|
|
2792
|
+
{
|
|
2793
|
+
"name": "isOpen",
|
|
2794
|
+
"type": "boolean",
|
|
2795
|
+
"description": "Input property `isOpen` of type `boolean`. Default: `true`. Two-way binding signal (model).",
|
|
2796
|
+
"defaultValue": "true",
|
|
2797
|
+
"required": false,
|
|
2798
|
+
"examples": []
|
|
2506
2799
|
}
|
|
2507
2800
|
],
|
|
2508
2801
|
"outputs": [
|
|
@@ -2524,7 +2817,10 @@
|
|
|
2524
2817
|
"queryChildren": [],
|
|
2525
2818
|
"hasEffects": false,
|
|
2526
2819
|
"standalone": true,
|
|
2527
|
-
"imports": [
|
|
2820
|
+
"imports": [
|
|
2821
|
+
"TranslatePipe",
|
|
2822
|
+
"MatIconModule"
|
|
2823
|
+
],
|
|
2528
2824
|
"examples": [],
|
|
2529
2825
|
"accessibility": [],
|
|
2530
2826
|
"keywords": [
|
|
@@ -2543,7 +2839,7 @@
|
|
|
2543
2839
|
"name": "mat-paginator",
|
|
2544
2840
|
"selector": "onemrva-mat-paginator",
|
|
2545
2841
|
"category": "Material Components",
|
|
2546
|
-
"path": "mat-paginator
|
|
2842
|
+
"path": "mat-paginator/src/onemrva-mat-paginator.component.ts",
|
|
2547
2843
|
"description": "Pagination controls with configurable page-size selector. Exposes 10 inputs and 2 outputs. Inputs: type: 'default' | 'complex', pageSizeSelector, pageSizeOptions: number[], pageSizeDefaultOption, recordKey, previousKey, nextKey, pageIndex, length, pageSize. Outputs: onRequestPage: number, page: PageEvent.",
|
|
2548
2844
|
"inputs": [
|
|
2549
2845
|
{
|
|
@@ -2637,22 +2933,89 @@
|
|
|
2637
2933
|
],
|
|
2638
2934
|
"examples": [],
|
|
2639
2935
|
"accessibility": [],
|
|
2640
|
-
"keywords": [
|
|
2936
|
+
"keywords": [
|
|
2937
|
+
"paginator",
|
|
2938
|
+
"pagination",
|
|
2939
|
+
"paging",
|
|
2940
|
+
"table",
|
|
2941
|
+
"page-size"
|
|
2942
|
+
],
|
|
2641
2943
|
"group": "Data",
|
|
2642
2944
|
"themes": [],
|
|
2643
|
-
"demoCode": "<h3>type = 'default'</h3>\
|
|
2945
|
+
"demoCode": "<h3>type = 'default'</h3>\n\n<p>\n The default paginator shows pages 5 by 5 except if there are only 6 remaining\n pages. Buttons '...' are fast back/forward.\n</p>\n\n<onemrva-mat-paginator\n [pageIndex]=\"pageIndex\"\n [pageSize]=\"10\"\n [length]=\"69\"\n (onRequestPage)=\"changePage($event)\"\n recordKey=\"records.per.page\"\n #paginator\n/>\n\n<br />\n\n<h3>type = 'complex'</h3>\n\n<p>\n To get the complex paginator, you need to set the type to 'complex'. It shows\n pages 5 by 5 except if there are max 7 remaining pages. Buttons '...' are fast\n back/forward. First and last pages are always reachable.\n</p>\n\n<onemrva-mat-paginator\n [pageIndex]=\"pageIndex2\"\n [pageSize]=\"20\"\n [length]=\"339\"\n type=\"complex\"\n recordKey=\"records.per.page\"\n (onRequestPage)=\"changePage($event, 'complex')\"\n #paginator\n/>\n"
|
|
2946
|
+
},
|
|
2947
|
+
{
|
|
2948
|
+
"name": "mat-panel",
|
|
2949
|
+
"selector": "onemrva-mat-panel-block",
|
|
2950
|
+
"category": "Material Components",
|
|
2951
|
+
"path": "mat-panel/src/onemrva-mat-panel-block.component.ts",
|
|
2952
|
+
"description": "Content slot inside an onemrva-mat-panel. Exposes 1 input and 0 outputs. Inputs: customNgClass: any. Outputs: none.",
|
|
2953
|
+
"inputs": [
|
|
2954
|
+
{
|
|
2955
|
+
"name": "isTitle",
|
|
2956
|
+
"type": "boolean",
|
|
2957
|
+
"description": "Input property `isTitle` of type `boolean`. Default: `false`.",
|
|
2958
|
+
"defaultValue": "false",
|
|
2959
|
+
"required": false,
|
|
2960
|
+
"examples": []
|
|
2961
|
+
}
|
|
2962
|
+
],
|
|
2963
|
+
"outputs": [],
|
|
2964
|
+
"methods": [],
|
|
2965
|
+
"slots": [
|
|
2966
|
+
{
|
|
2967
|
+
"name": "blockKey",
|
|
2968
|
+
"selector": "[blockKey]",
|
|
2969
|
+
"description": "Content projection for elements matching \"[blockKey]\""
|
|
2970
|
+
},
|
|
2971
|
+
{
|
|
2972
|
+
"name": "blockValue",
|
|
2973
|
+
"selector": "[blockValue]",
|
|
2974
|
+
"description": "Content projection for elements matching \"[blockValue]\""
|
|
2975
|
+
},
|
|
2976
|
+
{
|
|
2977
|
+
"name": "default",
|
|
2978
|
+
"selector": "*",
|
|
2979
|
+
"description": "Default content projection slot"
|
|
2980
|
+
}
|
|
2981
|
+
],
|
|
2982
|
+
"hostListeners": [],
|
|
2983
|
+
"queryChildren": [],
|
|
2984
|
+
"hasEffects": false,
|
|
2985
|
+
"standalone": true,
|
|
2986
|
+
"imports": [],
|
|
2987
|
+
"examples": [],
|
|
2988
|
+
"accessibility": [],
|
|
2989
|
+
"keywords": [
|
|
2990
|
+
"panel",
|
|
2991
|
+
"accordion",
|
|
2992
|
+
"content",
|
|
2993
|
+
"expansion"
|
|
2994
|
+
],
|
|
2995
|
+
"group": "Layout",
|
|
2996
|
+
"themes": [],
|
|
2997
|
+
"demoCode": "@if (color() === 'primary') {\n <onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mb-m\">\n <onemrva-mat-panel-title>\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n 840126/999-89 First name Last name\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-title>\n </onemrva-mat-panel>\n}\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n }\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n class=\"mt-m\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n }\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\">\n 840126/999-89 Mandelovics Maika\n </onemrva-mat-panel-block>\n </div>\n\n <onemrva-mat-sticker [color]=\"'success'\">Traité</onemrva-mat-sticker>\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <div class=\"grid\">\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span> </onemrva-mat-panel-block\n ><onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n </div>\n\n <button mat-stroked-button color=\"primary\" class=\"small mt-m\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-content\n [hasBlocks]=\"true\"\n customNgClass=\"remove-margin-empty\"\n >\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <onemrva-mat-sticker class=\"mat-info\">\n Wordt geïmporteerd\n </onemrva-mat-sticker>\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n"
|
|
2644
2998
|
},
|
|
2645
2999
|
{
|
|
2646
3000
|
"name": "mat-panel",
|
|
2647
3001
|
"selector": "onemrva-mat-panel-content",
|
|
2648
3002
|
"category": "Material Components",
|
|
2649
|
-
"path": "mat-panel
|
|
3003
|
+
"path": "mat-panel/src/onemrva-mat-panel-content.component.ts",
|
|
2650
3004
|
"description": "Content slot inside an onemrva-mat-panel. Exposes 1 input and 0 outputs. Inputs: customNgClass: any. Outputs: none.",
|
|
2651
3005
|
"inputs": [
|
|
2652
3006
|
{
|
|
2653
3007
|
"name": "customNgClass",
|
|
2654
3008
|
"type": "any",
|
|
2655
|
-
"description": "Input property `customNgClass` of type `any`.",
|
|
3009
|
+
"description": "Input property `customNgClass` of type `any`. Default: `false`.",
|
|
3010
|
+
"defaultValue": "false",
|
|
3011
|
+
"required": false,
|
|
3012
|
+
"examples": []
|
|
3013
|
+
},
|
|
3014
|
+
{
|
|
3015
|
+
"name": "hasBlocks",
|
|
3016
|
+
"type": "boolean",
|
|
3017
|
+
"description": "Input property `hasBlocks` of type `boolean`. Default: `false`.",
|
|
3018
|
+
"defaultValue": "false",
|
|
2656
3019
|
"required": false,
|
|
2657
3020
|
"examples": []
|
|
2658
3021
|
}
|
|
@@ -2670,19 +3033,26 @@
|
|
|
2670
3033
|
"queryChildren": [],
|
|
2671
3034
|
"hasEffects": false,
|
|
2672
3035
|
"standalone": true,
|
|
2673
|
-
"imports": [
|
|
3036
|
+
"imports": [
|
|
3037
|
+
"NgClass"
|
|
3038
|
+
],
|
|
2674
3039
|
"examples": [],
|
|
2675
3040
|
"accessibility": [],
|
|
2676
|
-
"keywords": [
|
|
3041
|
+
"keywords": [
|
|
3042
|
+
"panel",
|
|
3043
|
+
"accordion",
|
|
3044
|
+
"content",
|
|
3045
|
+
"expansion"
|
|
3046
|
+
],
|
|
2677
3047
|
"group": "Layout",
|
|
2678
3048
|
"themes": [],
|
|
2679
|
-
"demoCode": "<onemrva-mat-panel\
|
|
3049
|
+
"demoCode": "@if (color() === 'primary') {\n <onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mb-m\">\n <onemrva-mat-panel-title>\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n 840126/999-89 First name Last name\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-title>\n </onemrva-mat-panel>\n}\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n }\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n class=\"mt-m\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n }\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\">\n 840126/999-89 Mandelovics Maika\n </onemrva-mat-panel-block>\n </div>\n\n <onemrva-mat-sticker [color]=\"'success'\">Traité</onemrva-mat-sticker>\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <div class=\"grid\">\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span> </onemrva-mat-panel-block\n ><onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n </div>\n\n <button mat-stroked-button color=\"primary\" class=\"small mt-m\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-content\n [hasBlocks]=\"true\"\n customNgClass=\"remove-margin-empty\"\n >\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <onemrva-mat-sticker class=\"mat-info\">\n Wordt geïmporteerd\n </onemrva-mat-sticker>\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n"
|
|
2680
3050
|
},
|
|
2681
3051
|
{
|
|
2682
3052
|
"name": "mat-panel",
|
|
2683
3053
|
"selector": "onemrva-mat-panel-icon",
|
|
2684
3054
|
"category": "Material Components",
|
|
2685
|
-
"path": "mat-panel
|
|
3055
|
+
"path": "mat-panel/src/onemrva-mat-panel-icon.component.ts",
|
|
2686
3056
|
"description": "Icon slot inside an onemrva-mat-panel header. Exposes 1 input and 0 outputs. Inputs: customNgClass: any. Outputs: none.",
|
|
2687
3057
|
"inputs": [
|
|
2688
3058
|
{
|
|
@@ -2706,19 +3076,26 @@
|
|
|
2706
3076
|
"queryChildren": [],
|
|
2707
3077
|
"hasEffects": false,
|
|
2708
3078
|
"standalone": true,
|
|
2709
|
-
"imports": [
|
|
3079
|
+
"imports": [
|
|
3080
|
+
"NgClass"
|
|
3081
|
+
],
|
|
2710
3082
|
"examples": [],
|
|
2711
3083
|
"accessibility": [],
|
|
2712
|
-
"keywords": [
|
|
3084
|
+
"keywords": [
|
|
3085
|
+
"panel",
|
|
3086
|
+
"accordion",
|
|
3087
|
+
"icon",
|
|
3088
|
+
"header"
|
|
3089
|
+
],
|
|
2713
3090
|
"group": "Layout",
|
|
2714
3091
|
"themes": [],
|
|
2715
|
-
"demoCode": "<onemrva-mat-panel\
|
|
3092
|
+
"demoCode": "@if (color() === 'primary') {\n <onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mb-m\">\n <onemrva-mat-panel-title>\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n 840126/999-89 First name Last name\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-title>\n </onemrva-mat-panel>\n}\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n }\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n class=\"mt-m\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n }\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\">\n 840126/999-89 Mandelovics Maika\n </onemrva-mat-panel-block>\n </div>\n\n <onemrva-mat-sticker [color]=\"'success'\">Traité</onemrva-mat-sticker>\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <div class=\"grid\">\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span> </onemrva-mat-panel-block\n ><onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n </div>\n\n <button mat-stroked-button color=\"primary\" class=\"small mt-m\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-content\n [hasBlocks]=\"true\"\n customNgClass=\"remove-margin-empty\"\n >\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <onemrva-mat-sticker class=\"mat-info\">\n Wordt geïmporteerd\n </onemrva-mat-sticker>\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n"
|
|
2716
3093
|
},
|
|
2717
3094
|
{
|
|
2718
3095
|
"name": "mat-panel",
|
|
2719
3096
|
"selector": "onemrva-mat-panel-title-action",
|
|
2720
3097
|
"category": "Material Components",
|
|
2721
|
-
"path": "mat-panel
|
|
3098
|
+
"path": "mat-panel/src/onemrva-mat-panel-title-action.component.ts",
|
|
2722
3099
|
"description": "Action button projected into an onemrva-mat-panel title. Exposes 1 input and 0 outputs. Inputs: customNgClass: any. Outputs: none.",
|
|
2723
3100
|
"inputs": [
|
|
2724
3101
|
{
|
|
@@ -2742,19 +3119,27 @@
|
|
|
2742
3119
|
"queryChildren": [],
|
|
2743
3120
|
"hasEffects": false,
|
|
2744
3121
|
"standalone": true,
|
|
2745
|
-
"imports": [
|
|
3122
|
+
"imports": [
|
|
3123
|
+
"NgClass"
|
|
3124
|
+
],
|
|
2746
3125
|
"examples": [],
|
|
2747
3126
|
"accessibility": [],
|
|
2748
|
-
"keywords": [
|
|
3127
|
+
"keywords": [
|
|
3128
|
+
"panel",
|
|
3129
|
+
"accordion",
|
|
3130
|
+
"title",
|
|
3131
|
+
"action",
|
|
3132
|
+
"button"
|
|
3133
|
+
],
|
|
2749
3134
|
"group": "Layout",
|
|
2750
3135
|
"themes": [],
|
|
2751
|
-
"demoCode": "<onemrva-mat-panel\
|
|
3136
|
+
"demoCode": "@if (color() === 'primary') {\n <onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mb-m\">\n <onemrva-mat-panel-title>\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n 840126/999-89 First name Last name\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-title>\n </onemrva-mat-panel>\n}\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n }\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n class=\"mt-m\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n }\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\">\n 840126/999-89 Mandelovics Maika\n </onemrva-mat-panel-block>\n </div>\n\n <onemrva-mat-sticker [color]=\"'success'\">Traité</onemrva-mat-sticker>\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <div class=\"grid\">\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span> </onemrva-mat-panel-block\n ><onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n </div>\n\n <button mat-stroked-button color=\"primary\" class=\"small mt-m\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-content\n [hasBlocks]=\"true\"\n customNgClass=\"remove-margin-empty\"\n >\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <onemrva-mat-sticker class=\"mat-info\">\n Wordt geïmporteerd\n </onemrva-mat-sticker>\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n"
|
|
2752
3137
|
},
|
|
2753
3138
|
{
|
|
2754
3139
|
"name": "mat-panel",
|
|
2755
3140
|
"selector": "onemrva-mat-panel-title",
|
|
2756
3141
|
"category": "Material Components",
|
|
2757
|
-
"path": "mat-panel
|
|
3142
|
+
"path": "mat-panel/src/onemrva-mat-panel-title.component.ts",
|
|
2758
3143
|
"description": "Title slot for an onemrva-mat-panel header. Exposes 1 input and 0 outputs. Inputs: customNgClass: any. Outputs: none.",
|
|
2759
3144
|
"inputs": [
|
|
2760
3145
|
{
|
|
@@ -2778,19 +3163,27 @@
|
|
|
2778
3163
|
"queryChildren": [],
|
|
2779
3164
|
"hasEffects": false,
|
|
2780
3165
|
"standalone": true,
|
|
2781
|
-
"imports": [
|
|
3166
|
+
"imports": [
|
|
3167
|
+
"NgClass",
|
|
3168
|
+
"NgTemplateOutlet"
|
|
3169
|
+
],
|
|
2782
3170
|
"examples": [],
|
|
2783
3171
|
"accessibility": [],
|
|
2784
|
-
"keywords": [
|
|
3172
|
+
"keywords": [
|
|
3173
|
+
"panel",
|
|
3174
|
+
"accordion",
|
|
3175
|
+
"title",
|
|
3176
|
+
"header"
|
|
3177
|
+
],
|
|
2785
3178
|
"group": "Layout",
|
|
2786
3179
|
"themes": [],
|
|
2787
|
-
"demoCode": "<onemrva-mat-panel\
|
|
3180
|
+
"demoCode": "@if (color() === 'primary') {\n <onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mb-m\">\n <onemrva-mat-panel-title>\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n 840126/999-89 First name Last name\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-title>\n </onemrva-mat-panel>\n}\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n }\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n class=\"mt-m\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n }\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\">\n 840126/999-89 Mandelovics Maika\n </onemrva-mat-panel-block>\n </div>\n\n <onemrva-mat-sticker [color]=\"'success'\">Traité</onemrva-mat-sticker>\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <div class=\"grid\">\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span> </onemrva-mat-panel-block\n ><onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n </div>\n\n <button mat-stroked-button color=\"primary\" class=\"small mt-m\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-content\n [hasBlocks]=\"true\"\n customNgClass=\"remove-margin-empty\"\n >\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <onemrva-mat-sticker class=\"mat-info\">\n Wordt geïmporteerd\n </onemrva-mat-sticker>\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n"
|
|
2788
3181
|
},
|
|
2789
3182
|
{
|
|
2790
3183
|
"name": "mat-panel",
|
|
2791
3184
|
"selector": "onemrva-mat-panel",
|
|
2792
3185
|
"category": "Material Components",
|
|
2793
|
-
"path": "mat-panel
|
|
3186
|
+
"path": "mat-panel/src/onemrva-mat-panel.component.ts",
|
|
2794
3187
|
"description": "Collapsible expansion panel (accordion item) with header and body slots. Exposes 5 inputs and 1 output. Inputs: id, data_cy, disabled, expandable, expanded: boolean. Outputs: expandedChange: boolean.",
|
|
2795
3188
|
"inputs": [
|
|
2796
3189
|
{
|
|
@@ -2864,13 +3257,13 @@
|
|
|
2864
3257
|
],
|
|
2865
3258
|
"group": "Layout",
|
|
2866
3259
|
"themes": [],
|
|
2867
|
-
"demoCode": "<onemrva-mat-panel\
|
|
3260
|
+
"demoCode": "@if (color() === 'primary') {\n <onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mb-m\">\n <onemrva-mat-panel-title>\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n 840126/999-89 First name Last name\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-title>\n </onemrva-mat-panel>\n}\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n 0400.254.860\n </onemrva-mat-panel-block>\n }\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n\n <!-- <onemrva-mat-panel-block class=\"mr-3xl\">-->\n <!-- <span blockKey>N° d’entreprise</span>-->\n <!-- <span blockValue>2.005.268.154</span>-->\n <!-- </onemrva-mat-panel-block>-->\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel\n [color]=\"color()\"\n [expandable]=\"expandable()\"\n [expanded]=\"expanded\"\n (expandedChange)=\"onExpandedChange($event)\"\n class=\"mt-m\"\n>\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\" class=\"mr-3xl\">\n Employee\n </onemrva-mat-panel-block>\n\n @if (color() === 'primary') {\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n }\n </div>\n\n <onemrva-mat-sticker [color]=\"'warn'\"\n >En cours de traitement</onemrva-mat-sticker\n >\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content customNgClass=\"is-expandable\">\n <p>\n Kamino neimoidia calrissian quarren darth raymus. Unduli mon luuke\n sal-solo tierce. Quelli desann dash veila galen kushiban sesswenna\n thistleborn. Kota terrik vuffi nadon kwi bibble anomid max moore. Ansion\n trandoshan bib pa'lowick thennqora gilad zhell. Tenel anzati secura rom\n isolder. Haruun karrde lahara frozarns wroonian bimm skakoan gallia\n zuckuss. Nien wicket balosar bardan gen'dai kor-uj aka mod. B'omarr hssis\n priapulin ogemite. Zuggs drovian h'nemthean keyan shmi vulptereen amanin\n cal. Thistleborn gilad airen wookiee.\n </p>\n <button mat-stroked-button color=\"primary\" class=\"small\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-title>\n <div class=\"first-part\">\n <onemrva-mat-panel-block [isTitle]=\"true\">\n 840126/999-89 Mandelovics Maika\n </onemrva-mat-panel-block>\n </div>\n\n <onemrva-mat-sticker [color]=\"'success'\">Traité</onemrva-mat-sticker>\n </onemrva-mat-panel-title>\n <onemrva-mat-panel-content>\n <div class=\"grid\">\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span> </onemrva-mat-panel-block\n ><onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block>\n <span blockKey>N° d’entreprise</span>\n <span blockValue>2.005.268.154</span>\n </onemrva-mat-panel-block>\n </div>\n\n <button mat-stroked-button color=\"primary\" class=\"small mt-m\">\n <mat-icon>edit</mat-icon>Edit\n </button>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n\n<onemrva-mat-panel [color]=\"color()\" [expandable]=\"false\" class=\"mt-m\">\n <onemrva-mat-panel-content\n [hasBlocks]=\"true\"\n customNgClass=\"remove-margin-empty\"\n >\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <span blockKey>Here is the key</span>\n <span blockValue>Here is the value</span>\n </onemrva-mat-panel-block>\n <onemrva-mat-panel-block class=\"mr-3xl\">\n <onemrva-mat-sticker class=\"mat-info\">\n Wordt geïmporteerd\n </onemrva-mat-sticker>\n </onemrva-mat-panel-block>\n </onemrva-mat-panel-content>\n</onemrva-mat-panel>\n"
|
|
2868
3261
|
},
|
|
2869
3262
|
{
|
|
2870
3263
|
"name": "mat-pop-over",
|
|
2871
3264
|
"selector": "onemrva-mat-pop-over-content",
|
|
2872
3265
|
"category": "Material Components",
|
|
2873
|
-
"path": "mat-pop-over
|
|
3266
|
+
"path": "mat-pop-over/src/onemrva-mat-pop-over-content.component.ts",
|
|
2874
3267
|
"description": "Content slot projected inside an onemrva-mat-pop-over. Exposes 1 input and 0 outputs. Inputs: dataCy. Outputs: none.",
|
|
2875
3268
|
"inputs": [
|
|
2876
3269
|
{
|
|
@@ -2892,16 +3285,21 @@
|
|
|
2892
3285
|
"imports": [],
|
|
2893
3286
|
"examples": [],
|
|
2894
3287
|
"accessibility": [],
|
|
2895
|
-
"keywords": [
|
|
3288
|
+
"keywords": [
|
|
3289
|
+
"pop-over",
|
|
3290
|
+
"popover",
|
|
3291
|
+
"overlay",
|
|
3292
|
+
"content"
|
|
3293
|
+
],
|
|
2896
3294
|
"group": "Overlay",
|
|
2897
3295
|
"themes": [],
|
|
2898
|
-
"demoCode": "<div class=\"pop-over-container\">\
|
|
3296
|
+
"demoCode": "<div class=\"pop-over-container\">\n <onemrva-mat-pop-over [position]=\"position()\">\n <onemrva-mat-pop-over-trigger>I am a trigger</onemrva-mat-pop-over-trigger>\n <onemrva-mat-pop-over-content>I am a content</onemrva-mat-pop-over-content>\n </onemrva-mat-pop-over>\n</div>\n"
|
|
2899
3297
|
},
|
|
2900
3298
|
{
|
|
2901
3299
|
"name": "mat-pop-over",
|
|
2902
3300
|
"selector": "onemrva-mat-pop-over-trigger",
|
|
2903
3301
|
"category": "Material Components",
|
|
2904
|
-
"path": "mat-pop-over
|
|
3302
|
+
"path": "mat-pop-over/src/onemrva-mat-pop-over-trigger.component.ts",
|
|
2905
3303
|
"description": "Trigger element that opens an onemrva-mat-pop-over. Exposes 1 input and 0 outputs. Inputs: dataCy. Outputs: none.",
|
|
2906
3304
|
"inputs": [
|
|
2907
3305
|
{
|
|
@@ -2923,16 +3321,21 @@
|
|
|
2923
3321
|
"imports": [],
|
|
2924
3322
|
"examples": [],
|
|
2925
3323
|
"accessibility": [],
|
|
2926
|
-
"keywords": [
|
|
3324
|
+
"keywords": [
|
|
3325
|
+
"pop-over",
|
|
3326
|
+
"popover",
|
|
3327
|
+
"trigger",
|
|
3328
|
+
"overlay"
|
|
3329
|
+
],
|
|
2927
3330
|
"group": "Overlay",
|
|
2928
3331
|
"themes": [],
|
|
2929
|
-
"demoCode": "<div class=\"pop-over-container\">\
|
|
3332
|
+
"demoCode": "<div class=\"pop-over-container\">\n <onemrva-mat-pop-over [position]=\"position()\">\n <onemrva-mat-pop-over-trigger>I am a trigger</onemrva-mat-pop-over-trigger>\n <onemrva-mat-pop-over-content>I am a content</onemrva-mat-pop-over-content>\n </onemrva-mat-pop-over>\n</div>\n"
|
|
2930
3333
|
},
|
|
2931
3334
|
{
|
|
2932
3335
|
"name": "mat-pop-over",
|
|
2933
3336
|
"selector": "onemrva-mat-pop-over",
|
|
2934
3337
|
"category": "Material Components",
|
|
2935
|
-
"path": "mat-pop-over
|
|
3338
|
+
"path": "mat-pop-over/src/onemrva-mat-pop-over.component.ts",
|
|
2936
3339
|
"description": "Anchored popover overlay with configurable position. Exposes 4 inputs and 0 outputs. Inputs: position: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right', dataCyTrigger, dataCyPo, poId: string. Outputs: none.",
|
|
2937
3340
|
"inputs": [
|
|
2938
3341
|
{
|
|
@@ -2975,7 +3378,10 @@
|
|
|
2975
3378
|
"queryChildren": [],
|
|
2976
3379
|
"hasEffects": false,
|
|
2977
3380
|
"standalone": true,
|
|
2978
|
-
"imports": [
|
|
3381
|
+
"imports": [
|
|
3382
|
+
"NgTemplateOutlet",
|
|
3383
|
+
"NgClass"
|
|
3384
|
+
],
|
|
2979
3385
|
"examples": [],
|
|
2980
3386
|
"accessibility": [
|
|
2981
3387
|
"Defines roles: button, region",
|
|
@@ -2984,16 +3390,22 @@
|
|
|
2984
3390
|
"Uses aria-expanded for expandable content",
|
|
2985
3391
|
"Manages focus with tabindex"
|
|
2986
3392
|
],
|
|
2987
|
-
"keywords": [
|
|
3393
|
+
"keywords": [
|
|
3394
|
+
"pop-over",
|
|
3395
|
+
"popover",
|
|
3396
|
+
"overlay",
|
|
3397
|
+
"tooltip",
|
|
3398
|
+
"anchor"
|
|
3399
|
+
],
|
|
2988
3400
|
"group": "Overlay",
|
|
2989
3401
|
"themes": [],
|
|
2990
|
-
"demoCode": "<div class=\"pop-over-container\">\
|
|
3402
|
+
"demoCode": "<div class=\"pop-over-container\">\n <onemrva-mat-pop-over [position]=\"position()\">\n <onemrva-mat-pop-over-trigger>I am a trigger</onemrva-mat-pop-over-trigger>\n <onemrva-mat-pop-over-content>I am a content</onemrva-mat-pop-over-content>\n </onemrva-mat-pop-over>\n</div>\n"
|
|
2991
3403
|
},
|
|
2992
3404
|
{
|
|
2993
3405
|
"name": "mat-progress-bar",
|
|
2994
3406
|
"selector": "onemrva-mat-progress-bar",
|
|
2995
3407
|
"category": "Material Components",
|
|
2996
|
-
"path": "mat-progress-bar
|
|
3408
|
+
"path": "mat-progress-bar/src/onemrva-mat-progress-bar.component.ts",
|
|
2997
3409
|
"description": "Horizontal progress bar with percentage label and success state. Exposes 4 inputs and 0 outputs. Inputs: label: string, value (required): number, dataCy, ariaLabel. Outputs: none.",
|
|
2998
3410
|
"inputs": [
|
|
2999
3411
|
{
|
|
@@ -3037,17 +3449,25 @@
|
|
|
3037
3449
|
"standalone": true,
|
|
3038
3450
|
"imports": [],
|
|
3039
3451
|
"examples": [],
|
|
3040
|
-
"accessibility": [
|
|
3041
|
-
|
|
3452
|
+
"accessibility": [
|
|
3453
|
+
"Uses aria-label for screen readers"
|
|
3454
|
+
],
|
|
3455
|
+
"keywords": [
|
|
3456
|
+
"progress-bar",
|
|
3457
|
+
"progress",
|
|
3458
|
+
"percentage",
|
|
3459
|
+
"loading",
|
|
3460
|
+
"bar"
|
|
3461
|
+
],
|
|
3042
3462
|
"group": "Feedback",
|
|
3043
3463
|
"themes": [],
|
|
3044
|
-
"demoCode": "<onemrva-mat-progress-bar [value]=\"value()\" />\
|
|
3464
|
+
"demoCode": "<onemrva-mat-progress-bar [value]=\"value()\" />\n\n<button style=\"margin-top: 4rem\" (click)=\"startProgress()\">\n Start Progress\n</button>\n\n<onemrva-mat-progress-bar [value]=\"value()\" label=\"Here is your text\" />\n"
|
|
3045
3465
|
},
|
|
3046
3466
|
{
|
|
3047
3467
|
"name": "mat-select-search",
|
|
3048
3468
|
"selector": "mat-select-search",
|
|
3049
3469
|
"category": "Material Components",
|
|
3050
|
-
"path": "mat-select-search
|
|
3470
|
+
"path": "mat-select-search/src/mat-select-search.component.ts",
|
|
3051
3471
|
"description": "Search input control embedded in mat-select dropdown panels. Exposes 19 inputs and 1 output. Inputs: placeholderLabel, type, closeIcon, closeSvgIcon, noEntriesFoundLabel, clearSearchInput, searching, disableInitialFocus, enableClearOnEscapePressed, preventHomeEndKeyPropagation, disableScrollToActiveOnOptionsChanged, ariaLabel, showToggleAllCheckbox, toggleAllCheckboxChecked, toggleAllCheckboxIndeterminate, toggleAllCheckboxTooltipMessage, toggleAllCheckboxTooltipPosition: 'left' | 'right' | 'above' | 'below' | 'before' | 'after', hideClearSearchButton, alwaysRestoreSelectedOptionsMulti. Outputs: toggleAll: boolean.",
|
|
3052
3472
|
"inputs": [
|
|
3053
3473
|
{
|
|
@@ -3270,8 +3690,8 @@
|
|
|
3270
3690
|
"name": "mat-selectable-box",
|
|
3271
3691
|
"selector": "onemrva-mat-selectable-box",
|
|
3272
3692
|
"category": "Material Components",
|
|
3273
|
-
"path": "mat-selectable-box
|
|
3274
|
-
"description": "Radio-card for selecting a single option with title and description. Exposes
|
|
3693
|
+
"path": "mat-selectable-box/src/onemrva-mat-selectable-box.component.ts",
|
|
3694
|
+
"description": "Radio-card for selecting a single option with title and description. Exposes 6 inputs and 1 output. Inputs: id, value, disabled, checked, iconSize: OnemrvaMatSize, tooltip: string. Outputs: valueChange: MatRadioChange.",
|
|
3275
3695
|
"inputs": [
|
|
3276
3696
|
{
|
|
3277
3697
|
"name": "iconSize",
|
|
@@ -3281,6 +3701,13 @@
|
|
|
3281
3701
|
"required": false,
|
|
3282
3702
|
"examples": []
|
|
3283
3703
|
},
|
|
3704
|
+
{
|
|
3705
|
+
"name": "tooltip",
|
|
3706
|
+
"type": "string",
|
|
3707
|
+
"description": "Text shown in a tooltip on the info icon at the end of the header. No icon when empty.",
|
|
3708
|
+
"required": false,
|
|
3709
|
+
"examples": []
|
|
3710
|
+
},
|
|
3284
3711
|
{
|
|
3285
3712
|
"name": "id",
|
|
3286
3713
|
"type": "any",
|
|
@@ -3352,23 +3779,29 @@
|
|
|
3352
3779
|
"MatCardTitle",
|
|
3353
3780
|
"MatCard",
|
|
3354
3781
|
"MatRadioButton",
|
|
3355
|
-
"MatLabel",
|
|
3356
3782
|
"MatIcon",
|
|
3357
3783
|
"MatCardContent",
|
|
3358
|
-
"OnemRvaSizeDirective"
|
|
3784
|
+
"OnemRvaSizeDirective",
|
|
3785
|
+
"OnemrvaMatTooltipDirective"
|
|
3359
3786
|
],
|
|
3360
3787
|
"examples": [],
|
|
3361
|
-
"accessibility": [
|
|
3362
|
-
"keywords": [
|
|
3788
|
+
"accessibility": [],
|
|
3789
|
+
"keywords": [
|
|
3790
|
+
"selectable-box",
|
|
3791
|
+
"radio",
|
|
3792
|
+
"card",
|
|
3793
|
+
"select",
|
|
3794
|
+
"choice"
|
|
3795
|
+
],
|
|
3363
3796
|
"group": "Forms",
|
|
3364
3797
|
"themes": [],
|
|
3365
|
-
"demoCode": "<mat-radio-group\
|
|
3798
|
+
"demoCode": "<mat-radio-group\n name=\"unemploymentType\"\n required\n [formControl]=\"formControl\"\n class=\"selectable-box-demo g-m\"\n>\n @for (option of options; track option.label) {\n <onemrva-mat-selectable-box\n [value]=\"option.label\"\n [disabled]=\"disabled()\"\n [tooltip]=\"option.tooltip ? 'More information about ' + option.label : ''\"\n >\n <!-- The title attribute puts it in the header, next to the radio -->\n <ng-container title>{{ option.label }}</ng-container>\n <!-- The icon attribute puts a mat-icon after the title -->\n @if (option.icon) {\n <ng-container icon>{{ option.icon }}</ng-container>\n }\n <!-- The sticker attribute puts it at the end of the header -->\n @if (option.sticker) {\n <onemrva-mat-sticker sticker color=\"primary\"\n >312 days left</onemrva-mat-sticker\n >\n }\n\n <!-- No attribute puts it in the body. Don't put inputs (text fields, ...) in the body -->\n @if (body() !== 'none') {\n <div class=\"selectable-box-content\">\n @switch (body()) {\n @case ('text') {\n <span>Période à prester au CPAS</span>\n }\n @case ('list') {\n <ul class=\"selectable-box-list\">\n @for (item of weather; track item) {\n <li>{{ item }}</li>\n }\n </ul>\n }\n @case ('address') {\n <address class=\"selectable-box-address\">\n Rue du Bois, 75<br />\n 6180 Charleroi\n </address>\n }\n @case ('data') {\n <dl class=\"selectable-box-data\">\n @for (row of data; track row.label) {\n <dt>{{ row.label }}</dt>\n <dd>{{ row.value }}</dd>\n }\n </dl>\n }\n }\n\n @if (button()) {\n <div>\n <!-- Stop the click so editing doesn't also select the box -->\n <button\n mat-stroked-button\n color=\"primary\"\n class=\"small\"\n [disabled]=\"disabled()\"\n (click)=\"$event.stopPropagation()\"\n >\n Edit<mat-icon iconPositionEnd>edit</mat-icon>\n </button>\n </div>\n }\n </div>\n }\n </onemrva-mat-selectable-box>\n }\n</mat-radio-group>\n"
|
|
3366
3799
|
},
|
|
3367
3800
|
{
|
|
3368
3801
|
"name": "mat-side-menu",
|
|
3369
3802
|
"selector": "onemrva-mat-side-menu",
|
|
3370
3803
|
"category": "Material Components",
|
|
3371
|
-
"path": "mat-side-menu
|
|
3804
|
+
"path": "mat-side-menu/src/onemrva-mat-side-menu.component.ts",
|
|
3372
3805
|
"description": "Chip-based horizontal tab menu for mobile/tablet navigation. Exposes 3 inputs and 1 output. Inputs: menuHeaderKey (required): string, menus (required): OnemrvaMenu[], currentMenu: string. Outputs: onSelectOption: OnemrvaMenu.",
|
|
3373
3806
|
"inputs": [
|
|
3374
3807
|
{
|
|
@@ -3406,22 +3839,31 @@
|
|
|
3406
3839
|
"queryChildren": [],
|
|
3407
3840
|
"hasEffects": false,
|
|
3408
3841
|
"standalone": false,
|
|
3409
|
-
"imports": [
|
|
3842
|
+
"imports": [
|
|
3843
|
+
"MatChipsModule",
|
|
3844
|
+
"TranslatePipe"
|
|
3845
|
+
],
|
|
3410
3846
|
"examples": [],
|
|
3411
3847
|
"accessibility": [
|
|
3412
3848
|
"Defines roles: navigation, button",
|
|
3413
3849
|
"Manages focus with tabindex"
|
|
3414
3850
|
],
|
|
3415
|
-
"keywords": [
|
|
3851
|
+
"keywords": [
|
|
3852
|
+
"side-menu",
|
|
3853
|
+
"navigation",
|
|
3854
|
+
"tabs",
|
|
3855
|
+
"chips",
|
|
3856
|
+
"mobile"
|
|
3857
|
+
],
|
|
3416
3858
|
"group": "Navigation",
|
|
3417
3859
|
"themes": [],
|
|
3418
|
-
"demoCode": "<onemrva-mat-side-menu\
|
|
3860
|
+
"demoCode": "<onemrva-mat-side-menu\n [menuHeaderKey]=\"menuHeaderKey\"\n [menus]=\"menus\"\n [currentMenu]=\"router.url\"\n (onSelectOption)=\"selectOption($event)\"\n/>\n"
|
|
3419
3861
|
},
|
|
3420
3862
|
{
|
|
3421
3863
|
"name": "mat-skeleton",
|
|
3422
3864
|
"selector": "onemrva-mat-skeleton",
|
|
3423
3865
|
"category": "Material Components",
|
|
3424
|
-
"path": "mat-skeleton
|
|
3866
|
+
"path": "mat-skeleton/src/onemrva-mat-skeleton.component.ts",
|
|
3425
3867
|
"description": "Skeleton provides a way to display loading element while page is loading. Exposes 9 inputs and 0 outputs. Inputs: count, animation: OnemrvaMatSkeletonAnimations, type: OnemrvaMatSkeletoTypes, size: OnemrvaMatSize, theme: OnemrvaSkeletonLoaderConfigTheme, ariaLabel, role, loadingText, id. Outputs: none.",
|
|
3426
3868
|
"inputs": [
|
|
3427
3869
|
{
|
|
@@ -3510,23 +3952,29 @@
|
|
|
3510
3952
|
"queryChildren": [],
|
|
3511
3953
|
"hasEffects": false,
|
|
3512
3954
|
"standalone": true,
|
|
3513
|
-
"imports": [
|
|
3955
|
+
"imports": [
|
|
3956
|
+
"NgStyle"
|
|
3957
|
+
],
|
|
3514
3958
|
"examples": [],
|
|
3515
3959
|
"accessibility": [
|
|
3516
3960
|
"Defines roles: progressbar",
|
|
3517
3961
|
"Uses aria-label for screen readers",
|
|
3518
3962
|
"Uses aria-busy for loading state"
|
|
3519
3963
|
],
|
|
3520
|
-
"keywords": [
|
|
3964
|
+
"keywords": [
|
|
3965
|
+
"skeleton",
|
|
3966
|
+
"loading",
|
|
3967
|
+
"progress"
|
|
3968
|
+
],
|
|
3521
3969
|
"group": "Feedback",
|
|
3522
3970
|
"themes": [],
|
|
3523
|
-
"demoCode": "<mat-card appearance=\"outlined\" style=\"width: 80%\">\
|
|
3971
|
+
"demoCode": "<mat-card appearance=\"outlined\" style=\"width: 80%\">\n <mat-card-content>\n <div class=\"row\">\n <div class=\"col-12 col-2-medium\">\n @if (!contentLoaded) {\n <onemrva-mat-skeleton type=\"circle\" [size]=\"'xlarge'\" />\n }\n @if (contentLoaded) {\n <onemrva-mat-avatar type=\"circle\" [size]=\"'xlarge'\" initials=\"TS\" />\n }\n </div>\n <div class=\"col-auto\">\n @if (!contentLoaded) {\n <onemrva-mat-skeleton type=\"h2\" />\n }\n @if (contentLoaded) {\n <h2>This is a loaded title</h2>\n }\n @if (!contentLoaded) {\n <onemrva-mat-skeleton type=\"h4\" />\n }\n @if (contentLoaded) {\n <h4>This is a loaded subtitle</h4>\n }\n @if (!contentLoaded) {\n <onemrva-mat-skeleton type=\"h4\" />\n }\n @if (contentLoaded) {\n <p>This is another loaded text</p>\n }\n @if (!contentLoaded) {\n <onemrva-mat-skeleton type=\"button\" class=\"float-right\" />\n }\n @if (contentLoaded) {\n <button mat-flat-button color=\"accent\" class=\"float-right\">\n Click me\n </button>\n }\n </div>\n </div>\n </mat-card-content>\n</mat-card>\n"
|
|
3524
3972
|
},
|
|
3525
3973
|
{
|
|
3526
3974
|
"name": "mat-spinner",
|
|
3527
3975
|
"selector": "onemrva-mat-spinner",
|
|
3528
3976
|
"category": "Material Components",
|
|
3529
|
-
"path": "mat-spinner
|
|
3977
|
+
"path": "mat-spinner/src/onemrva-mat-spinner.component.ts",
|
|
3530
3978
|
"description": "Indeterminate loading spinner. This component exposes no configurable inputs or outputs.",
|
|
3531
3979
|
"inputs": [],
|
|
3532
3980
|
"outputs": [],
|
|
@@ -3539,16 +3987,21 @@
|
|
|
3539
3987
|
"imports": [],
|
|
3540
3988
|
"examples": [],
|
|
3541
3989
|
"accessibility": [],
|
|
3542
|
-
"keywords": [
|
|
3990
|
+
"keywords": [
|
|
3991
|
+
"spinner",
|
|
3992
|
+
"loading",
|
|
3993
|
+
"indeterminate",
|
|
3994
|
+
"progress"
|
|
3995
|
+
],
|
|
3543
3996
|
"group": "Feedback",
|
|
3544
3997
|
"themes": [],
|
|
3545
|
-
"demoCode": "<onemrva-mat-spinner />\
|
|
3998
|
+
"demoCode": "<onemrva-mat-spinner />\n"
|
|
3546
3999
|
},
|
|
3547
4000
|
{
|
|
3548
4001
|
"name": "mat-stepper",
|
|
3549
4002
|
"selector": "onemrva-mat-stepper, ",
|
|
3550
4003
|
"category": "Material Components",
|
|
3551
|
-
"path": "mat-stepper
|
|
4004
|
+
"path": "mat-stepper/src/onemrva-mat-stepper.component.ts",
|
|
3552
4005
|
"description": "Multi-step workflow stepper with horizontal and vertical layouts. Exposes 1 input and 0 outputs. Inputs: override. Outputs: none.",
|
|
3553
4006
|
"inputs": [],
|
|
3554
4007
|
"outputs": [],
|
|
@@ -3558,7 +4011,10 @@
|
|
|
3558
4011
|
"queryChildren": [],
|
|
3559
4012
|
"hasEffects": false,
|
|
3560
4013
|
"standalone": true,
|
|
3561
|
-
"imports": [
|
|
4014
|
+
"imports": [
|
|
4015
|
+
"NgTemplateOutlet",
|
|
4016
|
+
"MatStepHeader"
|
|
4017
|
+
],
|
|
3562
4018
|
"examples": [],
|
|
3563
4019
|
"accessibility": [
|
|
3564
4020
|
"Defines roles: tabpanel, tab",
|
|
@@ -3574,7 +4030,13 @@
|
|
|
3574
4030
|
"Supports keyboard navigation",
|
|
3575
4031
|
"Manages focus with tabindex"
|
|
3576
4032
|
],
|
|
3577
|
-
"keywords": [
|
|
4033
|
+
"keywords": [
|
|
4034
|
+
"stepper",
|
|
4035
|
+
"steps",
|
|
4036
|
+
"wizard",
|
|
4037
|
+
"workflow",
|
|
4038
|
+
"multi-step"
|
|
4039
|
+
],
|
|
3578
4040
|
"group": "Navigation",
|
|
3579
4041
|
"themes": []
|
|
3580
4042
|
},
|
|
@@ -3582,9 +4044,26 @@
|
|
|
3582
4044
|
"name": "mat-sticker",
|
|
3583
4045
|
"selector": "onemrva-mat-sticker",
|
|
3584
4046
|
"category": "Material Components",
|
|
3585
|
-
"path": "mat-sticker
|
|
4047
|
+
"path": "mat-sticker/src/onemrva-mat-sticker.component.ts",
|
|
3586
4048
|
"description": "Inline badge or tag for displaying status labels. This component exposes no configurable inputs or outputs.",
|
|
3587
|
-
"inputs": [
|
|
4049
|
+
"inputs": [
|
|
4050
|
+
{
|
|
4051
|
+
"name": "position",
|
|
4052
|
+
"type": "TooltipPosition",
|
|
4053
|
+
"description": "Input property `position` of type `TooltipPosition`. Default: `'after'`.",
|
|
4054
|
+
"defaultValue": "'after'",
|
|
4055
|
+
"required": false,
|
|
4056
|
+
"examples": []
|
|
4057
|
+
},
|
|
4058
|
+
{
|
|
4059
|
+
"name": "tooltip",
|
|
4060
|
+
"type": "string",
|
|
4061
|
+
"description": "Input property `tooltip` of type `string`. Default: `''`.",
|
|
4062
|
+
"defaultValue": "''",
|
|
4063
|
+
"required": false,
|
|
4064
|
+
"examples": []
|
|
4065
|
+
}
|
|
4066
|
+
],
|
|
3588
4067
|
"outputs": [],
|
|
3589
4068
|
"methods": [],
|
|
3590
4069
|
"slots": [
|
|
@@ -3598,19 +4077,31 @@
|
|
|
3598
4077
|
"queryChildren": [],
|
|
3599
4078
|
"hasEffects": false,
|
|
3600
4079
|
"standalone": true,
|
|
3601
|
-
"imports": [
|
|
4080
|
+
"imports": [
|
|
4081
|
+
"MatTooltipModule",
|
|
4082
|
+
"OnemrvaMatTooltipModule",
|
|
4083
|
+
"MatIconModule"
|
|
4084
|
+
],
|
|
3602
4085
|
"examples": [],
|
|
3603
|
-
"accessibility": [
|
|
3604
|
-
|
|
4086
|
+
"accessibility": [
|
|
4087
|
+
"Uses aria-label for screen readers"
|
|
4088
|
+
],
|
|
4089
|
+
"keywords": [
|
|
4090
|
+
"sticker",
|
|
4091
|
+
"badge",
|
|
4092
|
+
"label",
|
|
4093
|
+
"tag",
|
|
4094
|
+
"status"
|
|
4095
|
+
],
|
|
3605
4096
|
"group": "Data",
|
|
3606
4097
|
"themes": [],
|
|
3607
|
-
"demoCode": "<onemrva-mat-sticker [color]=\"color()\"
|
|
4098
|
+
"demoCode": "@if (htmlTooltip()) {\n <onemrva-mat-sticker [color]=\"color()\" [htmlTooltip]=\"tooltipContent\">\n Default\n </onemrva-mat-sticker>\n} @else {\n <onemrva-mat-sticker [color]=\"color()\" [tooltip]=\"tooltip()\">\n Default\n </onemrva-mat-sticker>\n}\n\n<ng-template #tooltipContent>\n I am a custom content with html (position: <b>right</b>) but there are 3 other\n positions\n <ul>\n <li>left</li>\n <li>top</li>\n <li>bottom</li>\n </ul>\n</ng-template>\n"
|
|
3608
4099
|
},
|
|
3609
4100
|
{
|
|
3610
4101
|
"name": "mat-table-of-content",
|
|
3611
4102
|
"selector": "onemrva-mat-table-of-content",
|
|
3612
4103
|
"category": "Material Components",
|
|
3613
|
-
"path": "mat-table-of-content
|
|
4104
|
+
"path": "mat-table-of-content/src/onemrva-mat-table-of-content.component.ts",
|
|
3614
4105
|
"description": "Auto-generated table of contents from anchor elements on the page. Exposes 5 inputs and 0 outputs. Inputs: titleKeyIn: string, tocName (required): string, tableOfContentName: string, scrollShift, dataCy. Outputs: none.",
|
|
3615
4106
|
"inputs": [
|
|
3616
4107
|
{
|
|
@@ -3660,7 +4151,7 @@
|
|
|
3660
4151
|
"standalone": true,
|
|
3661
4152
|
"imports": [
|
|
3662
4153
|
"MatListModule",
|
|
3663
|
-
"
|
|
4154
|
+
"TranslatePipe",
|
|
3664
4155
|
"MatIconModule",
|
|
3665
4156
|
"RouterLink",
|
|
3666
4157
|
"AsyncPipe"
|
|
@@ -3677,11 +4168,62 @@
|
|
|
3677
4168
|
"group": "Navigation",
|
|
3678
4169
|
"themes": []
|
|
3679
4170
|
},
|
|
4171
|
+
{
|
|
4172
|
+
"name": "mat-table",
|
|
4173
|
+
"selector": "onemrva-expandable-table-icon",
|
|
4174
|
+
"category": "Material Components",
|
|
4175
|
+
"path": "mat-table/src/onemrva-expandable-table-icon.component.ts",
|
|
4176
|
+
"description": "Icon button that toggles the detail row of an expandable table row. Renders a chevron that points down when the row is collapsed and up when it is expanded, and mirrors that state to assistive technology through `aria-expanded` / `aria-controls` on the button. The component is stateless: it renders the state it is given and emits the state the caller should switch to, leaving the table in control of which rows are open. Exposes 2 inputs and 1 output. Inputs: isExpanded: boolean, detailRowId: string. Outputs: expandedChange: boolean.",
|
|
4177
|
+
"inputs": [
|
|
4178
|
+
{
|
|
4179
|
+
"name": "isExpanded",
|
|
4180
|
+
"type": "boolean",
|
|
4181
|
+
"description": "Whether the detail row this button controls is currently open.",
|
|
4182
|
+
"required": true,
|
|
4183
|
+
"examples": []
|
|
4184
|
+
},
|
|
4185
|
+
{
|
|
4186
|
+
"name": "detailRowId",
|
|
4187
|
+
"type": "string",
|
|
4188
|
+
"description": "`id` of the detail row element, referenced by `aria-controls`.",
|
|
4189
|
+
"required": true,
|
|
4190
|
+
"examples": []
|
|
4191
|
+
}
|
|
4192
|
+
],
|
|
4193
|
+
"outputs": [],
|
|
4194
|
+
"methods": [],
|
|
4195
|
+
"slots": [],
|
|
4196
|
+
"hostListeners": [],
|
|
4197
|
+
"queryChildren": [],
|
|
4198
|
+
"hasEffects": false,
|
|
4199
|
+
"standalone": true,
|
|
4200
|
+
"imports": [
|
|
4201
|
+
"MatIconButton"
|
|
4202
|
+
],
|
|
4203
|
+
"examples": [],
|
|
4204
|
+
"accessibility": [
|
|
4205
|
+
"Uses aria-label for screen readers",
|
|
4206
|
+
"Uses aria-expanded for expandable content",
|
|
4207
|
+
"Uses aria-controls for related elements"
|
|
4208
|
+
],
|
|
4209
|
+
"keywords": [
|
|
4210
|
+
"table",
|
|
4211
|
+
"row",
|
|
4212
|
+
"expand",
|
|
4213
|
+
"collapse",
|
|
4214
|
+
"chevron",
|
|
4215
|
+
"detail row",
|
|
4216
|
+
"toggle"
|
|
4217
|
+
],
|
|
4218
|
+
"group": "Data",
|
|
4219
|
+
"themes": [],
|
|
4220
|
+
"demoCode": "<h1>Table</h1>\n<mat-form-field class=\"search\">\n <mat-label>Search</mat-label>\n <input matInput [formControl]=\"search\" />\n @if (search.getRawValue()) {\n <button matSuffix mat-icon-button aria-label=\"Clear\" (click)=\"clear()\">\n <mat-icon>close</mat-icon>\n </button>\n }\n</mat-form-field>\n<p><a tabindex=\"0\" (click)=\"showHideColumns()\">Hide/Show column</a></p>\n<table\n mat-table\n class=\"full-width-table multi-table-row-header\"\n matSort\n aria-label=\"Elements\"\n>\n <tr mat-header-row *matHeaderRowDef=\"allColumns\"></tr>\n <tr mat-header-row class=\"compact\" *matHeaderRowDef=\"['delay', 'days']\"></tr>\n\n <!-- Notice Row -->\n <tr\n mat-header-row\n class=\"onemrva-notice-row\"\n [class]=\"showNotice() ? '' : 'hidden'\"\n *matHeaderRowDef=\"showNotice() ? ['notice'] : []\"\n ></tr>\n @if (showNotice()) {\n <ng-container matColumnDef=\"notice\">\n <th *matHeaderCellDef colspan=\"7\">\n You have selected {{ checkboxes.length }} items. \n @if (checkboxes.length < paginator.length) {\n <a tabindex=\"0\" (click)=\"selectAll()\"\n >Select {{ paginator.length }} items</a\n > \n }\n @if (checkboxes.length >= 0) {\n <a tabindex=\"0\" (click)=\"deSelectAll()\"\n >Deselect {{ checkboxes.length }} items</a\n >\n }\n </th>\n </ng-container>\n }\n <!-- Notice Row -->\n\n <tr mat-row *matRowDef=\"let _; columns: allSubColumns\"></tr>\n\n <tr *matNoDataRow class=\"noresult\">\n <td colspan=\"7\">\n <onemrva-mat-empty-row (clear)=\"clear()\" />\n </td>\n </tr>\n\n <!-- checkbox Column -->\n <ng-container matColumnDef=\"check\">\n <th mat-header-cell *matHeaderCellDef [attr.rowspan]=\"2\">\n <div>\n <mat-checkbox\n aria-label=\"Check All\"\n value=\"toggleAll\"\n [checked]=\"checked\"\n [indeterminate]=\"undetermined\"\n (change)=\"toggleAllVisible($event)\"\n />\n </div>\n </th>\n <td mat-cell *matCellDef=\"let row\">\n <mat-checkbox\n #checkboxes\n aria-label=\"Check row {{ row.id }}\"\n [value]=\"row.id\"\n [checked]=\"isChecked(row.id)\"\n (change)=\"toggleOne($event, row.id)\"\n />\n </td>\n </ng-container>\n\n <!-- Id Column -->\n @if (columnIsVisible('id')) {\n <ng-container matColumnDef=\"id\" sticky>\n <th\n mat-header-cell\n class=\"compact\"\n *matHeaderCellDef\n mat-sort-header\n [attr.rowspan]=\"2\"\n >\n Id\n </th>\n <td mat-cell class=\"compact\" *matCellDef=\"let row\">\n {{ row.id }}\n </td>\n </ng-container>\n }\n\n <!-- Name Column -->\n @if (columnIsVisible('name')) {\n <ng-container matColumnDef=\"name\">\n <th mat-header-cell *matHeaderCellDef mat-sort-header [attr.rowspan]=\"2\">\n Name\n </th>\n <td id=\"{{ row.name }}\" mat-cell *matCellDef=\"let row\">\n <a href=\"/#table\">{{ row.name }}</a>\n </td>\n </ng-container>\n }\n\n <!-- Description Column -->\n @if (columnIsVisible('description')) {\n <ng-container matColumnDef=\"description\">\n <th\n mat-header-cell\n *matHeaderCellDef\n mat-sort-header=\"description\"\n [attr.rowspan]=\"2\"\n class=\"d-table-cell-large description-cell\"\n >\n Description\n </th>\n <td\n mat-cell\n *matCellDef=\"let row\"\n class=\"d-table-cell-large description-cell\"\n >\n <span></span>\n {{ row.description }}\n </td></ng-container\n >\n }\n @if (columnIsVisible('suspension')) {\n <!-- Suspension Column -->\n <ng-container matColumnDef=\"suspension\">\n <th\n mat-header-cell\n *matHeaderCellDef\n [attr.colspan]=\"2\"\n class=\"align-center compact table__border-left table__border-right\"\n >\n Suspension\n </th>\n <!-- This column doesn't generate <td> items, so no need to add a definition for them -->\n </ng-container>\n }\n\n @if (subColumnIsVisible('delay')) {\n <!-- Delay Column -->\n <ng-container matColumnDef=\"delay\">\n <th\n mat-header-cell\n *matHeaderCellDef\n class=\"compact align-center table__border-left\"\n >\n Delay\n </th>\n <td mat-cell *matCellDef=\"let _\" class=\"align-center table__border-left\">\n 1\n </td>\n </ng-container>\n }\n\n @if (subColumnIsVisible('days')) {\n <!-- Days Column -->\n <ng-container matColumnDef=\"days\">\n <th\n mat-header-cell\n *matHeaderCellDef\n class=\"compact align-center table__border-right\"\n >\n Days\n </th>\n <td mat-cell *matCellDef=\"let _\" class=\"align-center table__border-right\">\n 2\n </td>\n </ng-container>\n }\n\n @if (columnIsVisible('more')) {\n <!-- Menu Column -->\n <ng-container matColumnDef=\"more\">\n <th mat-header-cell class=\"compact\" *matHeaderCellDef [attr.rowspan]=\"2\">\n Menu\n </th>\n <td mat-cell class=\"compact align-right\" *matCellDef=\"let row\">\n <button mat-icon-button [matMenuTriggerFor]=\"menu\" aria-label=\"More\">\n <mat-icon>more_vert</mat-icon>\n </button>\n <mat-menu #menu=\"matMenu\">\n <button mat-menu-item (click)=\"edit(row)\" aria-label=\"Edit\">\n <mat-icon>edit</mat-icon>\n Edit\n </button>\n <button mat-menu-item (click)=\"delete(row)\" aria-label=\"Delete\">\n <mat-icon>delete</mat-icon>\n Delete\n </button>\n <button mat-menu-item (click)=\"share(row)\" aria-label=\"Share\">\n <mat-icon>share</mat-icon>\n Share\n </button>\n </mat-menu>\n </td>\n </ng-container>\n }\n</table>\n<div class=\"my-m\">\n <onemrva-mat-paginator\n [pageSizeSelector]=\"true\"\n [pageSizeOptions]=\"[5, 10, 20, 50]\"\n [pageSizeDefaultOption]=\"5\"\n [pageSize]=\"5\"\n previousKey=\"Previous\"\n nextKey=\"Next\"\n (page)=\"changePage($event)\"\n #paginator\n />\n</div>\n\n<h2>Expandable row</h2>\n<p>\n A row can expand to reveal its own sub-rows. Several rows can be open at the\n same time, so two payments can be compared side by side. A row without\n sub-rows has no toggle to press and no detail row of its own.\n</p>\n<p>\n <button\n mat-button\n type=\"button\"\n aria-label=\"Collapse all expanded rows\"\n [disabled]=\"expandedCount() === 0\"\n (click)=\"collapseAll()\"\n >\n Collapse all ({{ expandedCount() }})\n </button>\n</p>\n\n<!--\n The table is kept a real `display: table` (see the .scss) and scrolls from\n this wrapper on narrow screens instead of from the table element itself.\n-->\n<div class=\"demo-expandable-table-scroll\">\n <table\n mat-table\n multiTemplateDataRows\n class=\"full-width-table demo-expandable-table\"\n aria-label=\"Benefit payments per beneficiary\"\n [dataSource]=\"benefitRows\"\n >\n <tr mat-header-row *matHeaderRowDef=\"benefitColumns\"></tr>\n\n <!--\n Data row. The stripe comes from `dataIndex` and not from the row's position\n in the DOM, because the detail rows shift that position — see the .scss.\n -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: benefitColumns; let i = dataIndex\"\n class=\"demo-expandable-row\"\n [class.demo-expandable-row--striped]=\"i % 2 === 0\"\n [class.demo-expandable-row--open]=\"isExpanded(row.id)\"\n [class.demo-expandable-row--error-row]=\"hasRowError(row.id)\"\n ></tr>\n\n <!--\n Detail row. Rendered only for rows that actually have sub-rows — `when:`\n keeps an empty detail row out of the DOM entirely instead of rendering a\n blank one. For rows that do have sub-rows it stays rendered while closed,\n so its wrapper has something to run the open/close transition on; the .scss\n collapses it to zero height.\n -->\n <tr\n mat-row\n *matRowDef=\"let row; columns: detailColumns; when: hasDetailRow\"\n class=\"demo-expandable-detail-row\"\n [attr.id]=\"detailRowId(row.id)\"\n ></tr>\n\n <!-- Expand toggle Column -->\n <ng-container matColumnDef=\"expand\">\n <th mat-header-cell *matHeaderCellDef class=\"demo-expandable-toggle-cell\">\n Details\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"demo-expandable-toggle-cell\">\n <!-- A row without sub-rows has nothing to reveal, so it gets no toggle. -->\n @if (hasDetails(row)) {\n <onemrva-expandable-table-icon\n [isExpanded]=\"isExpanded(row.id)\"\n [detailRowId]=\"detailRowId(row.id)\"\n (expandedChange)=\"toggleExpanded(row.id)\"\n />\n }\n </td>\n </ng-container>\n\n <!-- Id Column -->\n <ng-container matColumnDef=\"id\">\n <th mat-header-cell *matHeaderCellDef class=\"compact\">Id</th>\n <td mat-cell *matCellDef=\"let row\" class=\"compact\">\n <span class=\"text-only-cell\">{{ row.id }}</span>\n </td>\n </ng-container>\n\n <!-- Name Column -->\n <ng-container matColumnDef=\"name\">\n <th mat-header-cell *matHeaderCellDef>Beneficiary</th>\n <td mat-cell *matCellDef=\"let row\">{{ row.name }}</td>\n </ng-container>\n\n <!-- Office Column -->\n <ng-container matColumnDef=\"office\">\n <th mat-header-cell *matHeaderCellDef>Office</th>\n <td mat-cell *matCellDef=\"let row\">{{ row.office }}</td>\n </ng-container>\n\n <!-- Period Column -->\n <ng-container matColumnDef=\"period\">\n <th mat-header-cell *matHeaderCellDef>Period</th>\n <td mat-cell *matCellDef=\"let row\">{{ row.period }}</td>\n </ng-container>\n\n <!-- Total Column -->\n <ng-container matColumnDef=\"total\">\n <th mat-header-cell *matHeaderCellDef class=\"align-right\">Total</th>\n <td mat-cell *matCellDef=\"let row\" class=\"align-right\">\n {{ row.total }}\n </td>\n </ng-container>\n\n <!--\n Detail Column. A plain grid of divs rather than `onemrva-mat-panel` (its\n chrome is wrong inside a row) or a nested `mat-table`.\n -->\n <ng-container matColumnDef=\"detail\">\n <td\n mat-cell\n *matCellDef=\"let row\"\n class=\"demo-expandable-detail-cell\"\n [class.demo-expandable-detail-cell--open]=\"isExpanded(row.id)\"\n [attr.colspan]=\"benefitColumns.length\"\n >\n <div class=\"demo-expandable-detail\">\n <div class=\"demo-expandable-detail__inner\">\n <div\n class=\"demo-expandable-detail__grid\"\n role=\"table\"\n [attr.aria-hidden]=\"isExpanded(row.id) ? null : 'true'\"\n [attr.aria-label]=\"'Payment details of ' + row.name\"\n >\n <div class=\"demo-expandable-detail__row\" role=\"row\">\n <div class=\"demo-expandable-detail__header\" role=\"columnheader\">\n Code\n </div>\n <div class=\"demo-expandable-detail__header\" role=\"columnheader\">\n Benefit\n </div>\n <div\n class=\"demo-expandable-detail__header demo-expandable-detail__numeric\"\n role=\"columnheader\"\n >\n Days\n </div>\n <div\n class=\"demo-expandable-detail__header demo-expandable-detail__numeric\"\n role=\"columnheader\"\n >\n Amount\n </div>\n </div>\n @for (detail of detailsFor(row.id); track detail.code) {\n <div class=\"demo-expandable-detail__row\" role=\"row\">\n <div role=\"cell\">{{ detail.code }}</div>\n <div role=\"cell\">{{ detail.label }}</div>\n <div class=\"demo-expandable-detail__numeric\" role=\"cell\">\n {{ detail.days }}\n </div>\n <div class=\"demo-expandable-detail__numeric\" role=\"cell\">\n {{ detail.amount }}\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n </td>\n </ng-container>\n </table>\n</div>\n\n<h2>Expandable row with real rows</h2>\n<p>\n The same toggle, but the sub-rows are real table rows instead of a grid inside\n one wide detail cell, so they sit in the table's own columns. A parent and its\n sub-rows share one stripe and one bottom border, so the group reads as a\n block, and the stripe alternates per parent whether or not any row is open.\n</p>\n<p>\n <button\n mat-button\n type=\"button\"\n aria-label=\"Collapse all expanded rows\"\n [disabled]=\"treeExpandedCount() === 0\"\n (click)=\"collapseAllTree()\"\n >\n Collapse all ({{ treeExpandedCount() }})\n </button>\n</p>\n\n<div class=\"demo-expandable-table-scroll\">\n <table\n mat-table\n class=\"full-width-table demo-tree-table\"\n aria-label=\"Benefit payments per beneficiary, with sub-rows\"\n [dataSource]=\"treeRows()\"\n [trackBy]=\"treeTrackBy\"\n >\n <tr mat-header-row *matHeaderRowDef=\"treeColumns\"></tr>\n\n <!--\n Parent row. The stripe comes from `groupIndex` rather than from the row's\n position in the DOM, because the sub-rows shift that position — see the\n .scss. `lastInGroup` is false while the row is open, which hands the\n group's bottom border to its last sub-row.\n\n No `aria-expanded` on the row itself: on a `role=\"row\"` that attribute is\n only defined inside a `treegrid`, and this is a plain table, so it is\n invalid here (axe `aria-conditional-attr`). Making the table a real\n treegrid would mean owning full grid keyboard navigation, which is not\n what this example is about. The expanded state is already on the toggle\n button inside the row — `onemrva-expandable-table-icon` sets\n `aria-expanded` and `aria-controls` on its own button — which is the\n ordinary disclosure pattern and what the detail-row example above does too.\n -->\n <tr\n mat-row\n *matRowDef=\"let entry; columns: treeColumns\"\n class=\"demo-tree-row\"\n [class.demo-tree-row--striped]=\"entry.groupIndex % 2 === 0\"\n [class.demo-tree-row--grouped]=\"!entry.lastInGroup\"\n ></tr>\n\n <!-- Sub-row. Rendered only while its parent is open; `treeRows()` decides. -->\n <tr\n mat-row\n *matRowDef=\"let entry; columns: treeDetailColumns; when: isTreeChildRow\"\n class=\"demo-tree-row demo-tree-row--child\"\n [class.demo-tree-row--striped]=\"entry.groupIndex % 2 === 0\"\n [class.demo-tree-row--grouped]=\"!entry.lastInGroup\"\n [attr.id]=\"treeChildRowId(entry.parent.id, entry.detail.code)\"\n ></tr>\n\n <!-- Parent columns -->\n <ng-container matColumnDef=\"tree-id\">\n <th mat-header-cell *matHeaderCellDef class=\"compact\">Id</th>\n <td mat-cell *matCellDef=\"let entry\" class=\"compact\">\n {{ entry.row.id }}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"tree-name\">\n <th mat-header-cell *matHeaderCellDef>Beneficiary</th>\n <td mat-cell *matCellDef=\"let entry\">{{ entry.row.name }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"tree-office\">\n <th mat-header-cell *matHeaderCellDef>Office</th>\n <td mat-cell *matCellDef=\"let entry\">{{ entry.row.office }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"tree-period\">\n <th mat-header-cell *matHeaderCellDef>Period</th>\n <td mat-cell *matCellDef=\"let entry\">{{ entry.row.period }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"tree-total\">\n <th mat-header-cell *matHeaderCellDef class=\"align-right\">Total</th>\n <td mat-cell *matCellDef=\"let entry\" class=\"align-right\">\n {{ entry.row.total }}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"tree-expand\">\n <th mat-header-cell *matHeaderCellDef class=\"demo-tree-toggle-cell\">\n Details\n </th>\n <td mat-cell *matCellDef=\"let entry\" class=\"demo-tree-toggle-cell\">\n <!-- A row without sub-rows has nothing to reveal, so it gets no toggle. -->\n @if (hasDetails(entry.row)) {\n <onemrva-expandable-table-icon\n [isExpanded]=\"isTreeExpanded(entry.row.id)\"\n [detailRowId]=\"treeChildRowIds(entry.row.id)\"\n (expandedChange)=\"toggleTreeExpanded(entry.row.id)\"\n />\n }\n </td>\n </ng-container>\n\n <!--\n Sub-row columns. One per parent column so the cells line up; the code\n takes the Id column, the days take the Period column (they are a\n subdivision of that period) and the Office and Details columns stay empty.\n -->\n <ng-container matColumnDef=\"tree-detail-code\">\n <td mat-cell *matCellDef=\"let entry\" class=\"compact demo-tree-child-cell\">\n {{ entry.detail.code }}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"tree-detail-label\">\n <td mat-cell *matCellDef=\"let entry\">{{ entry.detail.label }}</td>\n </ng-container>\n\n <ng-container matColumnDef=\"tree-detail-office\">\n <td mat-cell *matCellDef=\"let _\"></td>\n </ng-container>\n\n <ng-container matColumnDef=\"tree-detail-days\">\n <td mat-cell *matCellDef=\"let entry\">{{ entry.detail.days }} days</td>\n </ng-container>\n\n <ng-container matColumnDef=\"tree-detail-amount\">\n <td mat-cell *matCellDef=\"let entry\" class=\"align-right\">\n {{ entry.detail.amount }}\n </td>\n </ng-container>\n\n <ng-container matColumnDef=\"tree-detail-expand\">\n <td mat-cell *matCellDef=\"let _\" class=\"demo-tree-toggle-cell\"></td>\n </ng-container>\n </table>\n</div>\n\n<h2>Inline row editing</h2>\n<p>\n The pen switches one row into edit mode. Only some columns become editable —\n <em>Id</em> is the row's identity and <em>Period</em> comes from the payment\n run, so both keep rendering their value while the rest of the row is a form.\n</p>\n<p>\n Several rows can be open at once. Each one owns its own form, so validity,\n dirtiness and cancel are row-scoped and cancelling one row leaves the others\n untouched. Saving writes to the local signal only — a real screen would call a\n service and handle the failure path — and a dirty row is discarded without\n confirmation, which a real screen would also ask about first.\n</p>\n<p>\n Validation is surfaced on save, not on every keystroke. A row that fails gets\n <code>demo-inline-edit-row--error</code> on the <code><tr></code> as\n well as the per-field <code>mat-error</code>s: an error message makes one cell\n taller than the rest, so the whole row switches to\n <code>vertical-align: top</code> and the cells that have nothing to report\n stay lined up with the ones that do.\n</p>\n\n<!--\n Bulk bar. Mirrors the notice row of the first table, but sits outside the\n table: it acts on rows across the whole page, not on one of them.\n-->\n@if (editingCount() > 0) {\n <p class=\"demo-inline-edit-bar\">\n {{ editingCount() }} row(s) in edit mode. \n <button\n mat-button\n type=\"button\"\n aria-label=\"Save every row in edit mode\"\n (click)=\"saveAll()\"\n >\n Save all\n </button>\n <button\n mat-button\n type=\"button\"\n aria-label=\"Discard every row in edit mode\"\n (click)=\"cancelAll()\"\n >\n Discard all\n </button>\n </p>\n}\n\n<div class=\"demo-inline-edit-table-scroll\">\n <table\n mat-table\n class=\"full-width-table demo-inline-edit-table\"\n [dataSource]=\"inlineRows()\"\n aria-label=\"Benefits, editable in place\"\n >\n <tr mat-header-row *matHeaderRowDef=\"inlineColumns\"></tr>\n <tr\n mat-row\n *matRowDef=\"let row; columns: inlineColumns\"\n class=\"demo-inline-edit-row\"\n [class.demo-inline-edit-row--editing]=\"isEditing(row.id)\"\n [class.demo-inline-edit-row--error]=\"hasRowError(row.id)\"\n (keydown.enter)=\"isEditing(row.id) && saveEdit(row.id)\"\n (keydown.escape)=\"cancelEdit(row.id)\"\n ></tr>\n\n <!-- Id Column — read-only in both modes. -->\n <ng-container matColumnDef=\"inline-id\">\n <th mat-header-cell *matHeaderCellDef class=\"compact\">Id</th>\n <td mat-cell *matCellDef=\"let row\" class=\"compact\">{{ row.id }}</td>\n </ng-container>\n\n <!-- Name Column — editable text. -->\n <ng-container matColumnDef=\"inline-name\">\n <th mat-header-cell *matHeaderCellDef>Beneficiary</th>\n <td mat-cell *matCellDef=\"let row\" class=\"demo-inline-edit-cell\">\n @if (isEditing(row.id)) {\n <mat-form-field subscriptSizing=\"dynamic\">\n <input\n matInput\n [id]=\"firstControlId(row.id)\"\n [formControl]=\"formFor(row.id).controls.name\"\n [attr.aria-label]=\"'Beneficiary of row ' + row.id\"\n />\n @if (formFor(row.id).controls.name.hasError('required')) {\n <mat-error>Beneficiary is required</mat-error>\n }\n @if (formFor(row.id).controls.name.hasError('maxlength')) {\n <mat-error>60 characters at most</mat-error>\n }\n </mat-form-field>\n } @else {\n {{ row.name }}\n }\n </td>\n </ng-container>\n\n <!-- Office Column — editable select over a fixed list. -->\n <ng-container matColumnDef=\"inline-office\">\n <th mat-header-cell *matHeaderCellDef>Office</th>\n <td mat-cell *matCellDef=\"let row\" class=\"demo-inline-edit-cell\">\n @if (isEditing(row.id)) {\n <mat-form-field subscriptSizing=\"dynamic\">\n <mat-select\n [formControl]=\"formFor(row.id).controls.office\"\n [attr.aria-label]=\"'Office of row ' + row.id\"\n >\n @for (office of offices; track office) {\n <mat-option [value]=\"office\">{{ office }}</mat-option>\n }\n </mat-select>\n @if (formFor(row.id).controls.office.hasError('required')) {\n <mat-error>Office is required</mat-error>\n }\n </mat-form-field>\n } @else {\n {{ row.office }}\n }\n </td>\n </ng-container>\n\n <!-- Period Column — read-only for a business reason, not a technical one. -->\n <ng-container matColumnDef=\"inline-period\">\n <th mat-header-cell *matHeaderCellDef>Period</th>\n <td mat-cell *matCellDef=\"let row\">{{ row.period }}</td>\n </ng-container>\n\n <!--\n Payment date Column — editable through the house datepicker.\n\n Same wiring as the datepicker demo: `onemrvaDateFormat` for the DD/MM/YYYY\n mask, the toggle as a suffix, and `[calendarHeaderComponent]`. The overlay\n the calendar opens in is a CDK overlay outside this row, so its own Escape\n (close the calendar) never reaches the row's Escape (cancel the edit).\n -->\n <ng-container matColumnDef=\"inline-paid-on\">\n <th mat-header-cell *matHeaderCellDef>Paid on</th>\n <td mat-cell *matCellDef=\"let row\" class=\"demo-inline-edit-cell\">\n @if (isEditing(row.id)) {\n <mat-form-field subscriptSizing=\"dynamic\">\n <input\n onemrvaDateFormat\n matInput\n [matDatepicker]=\"paidOnPicker\"\n [max]=\"today\"\n [formControl]=\"formFor(row.id).controls.paidOn\"\n [attr.aria-label]=\"'Payment date of row ' + row.id\"\n />\n <mat-datepicker-toggle matSuffix [for]=\"paidOnPicker\" />\n <mat-datepicker\n #paidOnPicker\n [calendarHeaderComponent]=\"OnemrvaMatDatepickerHeaderComponent\"\n />\n @if (formFor(row.id).controls.paidOn.hasError('required')) {\n <mat-error>Payment date is required</mat-error>\n }\n @if (\n formFor(row.id).controls.paidOn.hasError('matDatepickerParse')\n ) {\n <mat-error>Use DD/MM/YYYY</mat-error>\n }\n @if (formFor(row.id).controls.paidOn.hasError('matDatepickerMax')) {\n <mat-error>Cannot be in the future</mat-error>\n }\n </mat-form-field>\n } @else {\n {{ row.paidOn | date: 'dd/MM/yyyy' }}\n }\n </td>\n </ng-container>\n\n <!-- Total Column — editable number, right-aligned in both modes. -->\n <ng-container matColumnDef=\"inline-total\">\n <th mat-header-cell *matHeaderCellDef class=\"align-right\">Total</th>\n <td\n mat-cell\n *matCellDef=\"let row\"\n class=\"align-right demo-inline-edit-cell\"\n >\n @if (isEditing(row.id)) {\n <mat-form-field subscriptSizing=\"dynamic\">\n <input\n matInput\n type=\"number\"\n step=\"0.01\"\n [formControl]=\"formFor(row.id).controls.total\"\n [attr.aria-label]=\"'Total of row ' + row.id\"\n />\n @if (formFor(row.id).controls.total.hasError('required')) {\n <mat-error>Total is required</mat-error>\n }\n @if (formFor(row.id).controls.total.hasError('min')) {\n <mat-error>Cannot be negative</mat-error>\n }\n </mat-form-field>\n } @else {\n {{ row.total | currency: 'EUR' }}\n }\n </td>\n </ng-container>\n\n <!-- Actions Column — the mode switch itself. -->\n <ng-container matColumnDef=\"inline-actions\">\n <th mat-header-cell *matHeaderCellDef class=\"demo-inline-edit-actions\">\n Actions\n </th>\n <td mat-cell *matCellDef=\"let row\" class=\"demo-inline-edit-actions\">\n @if (isEditing(row.id)) {\n <button\n mat-icon-button\n type=\"button\"\n [attr.aria-label]=\"'Save changes to ' + row.name\"\n (click)=\"saveEdit(row.id)\"\n >\n <mat-icon>check</mat-icon>\n </button>\n <button\n mat-icon-button\n type=\"button\"\n [attr.aria-label]=\"'Discard changes to ' + row.name\"\n (click)=\"cancelEdit(row.id)\"\n >\n <mat-icon>close</mat-icon>\n </button>\n } @else {\n <!--\n A locked row keeps a disabled button rather than no button at all,\n so the tooltip stays reachable and the cell keeps its width.\n -->\n <button\n mat-icon-button\n type=\"button\"\n [id]=\"editButtonId(row.id)\"\n [disabled]=\"row.locked\"\n [matTooltip]=\"\n row.locked ? 'Already paid out — no longer editable' : 'Edit row'\n \"\n [attr.aria-label]=\"'Edit ' + row.name\"\n (click)=\"startEdit(row)\"\n >\n <mat-icon>edit</mat-icon>\n </button>\n }\n </td>\n </ng-container>\n </table>\n</div>\n"
|
|
4221
|
+
},
|
|
3680
4222
|
{
|
|
3681
4223
|
"name": "mat-task-list",
|
|
3682
4224
|
"selector": "onemrva-mat-task-content",
|
|
3683
4225
|
"category": "Material Components",
|
|
3684
|
-
"path": "mat-task-list
|
|
4226
|
+
"path": "mat-task-list/src/onemrva-mat-task-content.component.ts",
|
|
3685
4227
|
"description": "Content slot for body text inside an onemrva-mat-task. Exposes 1 input and 0 outputs. Inputs: customNgClass. Outputs: none.",
|
|
3686
4228
|
"inputs": [
|
|
3687
4229
|
{
|
|
@@ -3706,19 +4248,25 @@
|
|
|
3706
4248
|
"queryChildren": [],
|
|
3707
4249
|
"hasEffects": false,
|
|
3708
4250
|
"standalone": true,
|
|
3709
|
-
"imports": [
|
|
4251
|
+
"imports": [
|
|
4252
|
+
"NgClass"
|
|
4253
|
+
],
|
|
3710
4254
|
"examples": [],
|
|
3711
4255
|
"accessibility": [],
|
|
3712
|
-
"keywords": [
|
|
4256
|
+
"keywords": [
|
|
4257
|
+
"task",
|
|
4258
|
+
"content",
|
|
4259
|
+
"checklist"
|
|
4260
|
+
],
|
|
3713
4261
|
"group": "Data",
|
|
3714
4262
|
"themes": [],
|
|
3715
|
-
"demoCode": "<onemrva-mat-task-list [readonly]=\"readonly()\">\
|
|
4263
|
+
"demoCode": "<onemrva-mat-task-list [readonly]=\"readonly()\">\n @for (task of tasks; track $index) {\n @if (type() === 'checkbox') {\n <onemrva-mat-task class=\"mb\" [form]=\"form\" [color]=\"color()\">\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n } @else if (type() === 'bubble') {\n <onemrva-mat-task\n [bubble]=\"'' + $index\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n >\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n } @else if (type() === 'icon') {\n <onemrva-mat-task\n [icon]=\"'home'\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n >\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n }\n }\n</onemrva-mat-task-list>\n"
|
|
3716
4264
|
},
|
|
3717
4265
|
{
|
|
3718
4266
|
"name": "mat-task-list",
|
|
3719
4267
|
"selector": "onemrva-mat-task-list",
|
|
3720
4268
|
"category": "Material Components",
|
|
3721
|
-
"path": "mat-task-list
|
|
4269
|
+
"path": "mat-task-list/src/onemrva-mat-task-list.component.ts",
|
|
3722
4270
|
"description": "Checklist of tasks with completion tracking. Exposes 2 inputs and 0 outputs. Inputs: id, data_cy. Outputs: none.",
|
|
3723
4271
|
"inputs": [
|
|
3724
4272
|
{
|
|
@@ -3754,16 +4302,22 @@
|
|
|
3754
4302
|
"imports": [],
|
|
3755
4303
|
"examples": [],
|
|
3756
4304
|
"accessibility": [],
|
|
3757
|
-
"keywords": [
|
|
4305
|
+
"keywords": [
|
|
4306
|
+
"task-list",
|
|
4307
|
+
"checklist",
|
|
4308
|
+
"tasks",
|
|
4309
|
+
"todo",
|
|
4310
|
+
"list"
|
|
4311
|
+
],
|
|
3758
4312
|
"group": "Data",
|
|
3759
4313
|
"themes": [],
|
|
3760
|
-
"demoCode": "<onemrva-mat-task-list [readonly]=\"readonly()\">\
|
|
4314
|
+
"demoCode": "<onemrva-mat-task-list [readonly]=\"readonly()\">\n @for (task of tasks; track $index) {\n @if (type() === 'checkbox') {\n <onemrva-mat-task class=\"mb\" [form]=\"form\" [color]=\"color()\">\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n } @else if (type() === 'bubble') {\n <onemrva-mat-task\n [bubble]=\"'' + $index\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n >\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n } @else if (type() === 'icon') {\n <onemrva-mat-task\n [icon]=\"'home'\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n >\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n }\n }\n</onemrva-mat-task-list>\n"
|
|
3761
4315
|
},
|
|
3762
4316
|
{
|
|
3763
4317
|
"name": "mat-task-list",
|
|
3764
4318
|
"selector": "onemrva-mat-task-title",
|
|
3765
4319
|
"category": "Material Components",
|
|
3766
|
-
"path": "mat-task-list
|
|
4320
|
+
"path": "mat-task-list/src/onemrva-mat-task-title.component.ts",
|
|
3767
4321
|
"description": "Title slot inside an onemrva-mat-task row. Exposes 1 input and 0 outputs. Inputs: customNgClass. Outputs: none.",
|
|
3768
4322
|
"inputs": [
|
|
3769
4323
|
{
|
|
@@ -3788,19 +4342,25 @@
|
|
|
3788
4342
|
"queryChildren": [],
|
|
3789
4343
|
"hasEffects": false,
|
|
3790
4344
|
"standalone": true,
|
|
3791
|
-
"imports": [
|
|
4345
|
+
"imports": [
|
|
4346
|
+
"NgClass"
|
|
4347
|
+
],
|
|
3792
4348
|
"examples": [],
|
|
3793
4349
|
"accessibility": [],
|
|
3794
|
-
"keywords": [
|
|
4350
|
+
"keywords": [
|
|
4351
|
+
"task",
|
|
4352
|
+
"title",
|
|
4353
|
+
"checklist"
|
|
4354
|
+
],
|
|
3795
4355
|
"group": "Data",
|
|
3796
4356
|
"themes": [],
|
|
3797
|
-
"demoCode": "<onemrva-mat-task-list [readonly]=\"readonly()\">\
|
|
4357
|
+
"demoCode": "<onemrva-mat-task-list [readonly]=\"readonly()\">\n @for (task of tasks; track $index) {\n @if (type() === 'checkbox') {\n <onemrva-mat-task class=\"mb\" [form]=\"form\" [color]=\"color()\">\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n } @else if (type() === 'bubble') {\n <onemrva-mat-task\n [bubble]=\"'' + $index\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n >\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n } @else if (type() === 'icon') {\n <onemrva-mat-task\n [icon]=\"'home'\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n >\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n }\n }\n</onemrva-mat-task-list>\n"
|
|
3798
4358
|
},
|
|
3799
4359
|
{
|
|
3800
4360
|
"name": "mat-task-list",
|
|
3801
4361
|
"selector": "onemrva-mat-task",
|
|
3802
4362
|
"category": "Material Components",
|
|
3803
|
-
"path": "mat-task-list
|
|
4363
|
+
"path": "mat-task-list/src/onemrva-mat-task.component.ts",
|
|
3804
4364
|
"description": "Single task row with checkbox, title, and optional body content. Exposes 6 inputs and 0 outputs. Inputs: customNgClass: any, icon: string, form: FormControl, bubble: string, arialLabel, disabled. Outputs: none.",
|
|
3805
4365
|
"inputs": [
|
|
3806
4366
|
{
|
|
@@ -3855,16 +4415,21 @@
|
|
|
3855
4415
|
],
|
|
3856
4416
|
"examples": [],
|
|
3857
4417
|
"accessibility": [],
|
|
3858
|
-
"keywords": [
|
|
4418
|
+
"keywords": [
|
|
4419
|
+
"task",
|
|
4420
|
+
"checkbox",
|
|
4421
|
+
"checklist",
|
|
4422
|
+
"todo"
|
|
4423
|
+
],
|
|
3859
4424
|
"group": "Data",
|
|
3860
4425
|
"themes": [],
|
|
3861
|
-
"demoCode": "<onemrva-mat-task-list [readonly]=\"readonly()\">\
|
|
4426
|
+
"demoCode": "<onemrva-mat-task-list [readonly]=\"readonly()\">\n @for (task of tasks; track $index) {\n @if (type() === 'checkbox') {\n <onemrva-mat-task class=\"mb\" [form]=\"form\" [color]=\"color()\">\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n } @else if (type() === 'bubble') {\n <onemrva-mat-task\n [bubble]=\"'' + $index\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n >\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n } @else if (type() === 'icon') {\n <onemrva-mat-task\n [icon]=\"'home'\"\n [disabled]=\"disabled()\"\n [color]=\"color()\"\n >\n <onemrva-mat-task-title>{{ task }}</onemrva-mat-task-title>\n <onemrva-mat-task-content>\n <p>t{{ tasksDesc[$index] }}</p>\n </onemrva-mat-task-content>\n </onemrva-mat-task>\n }\n }\n</onemrva-mat-task-list>\n"
|
|
3862
4427
|
},
|
|
3863
4428
|
{
|
|
3864
4429
|
"name": "mat-toast",
|
|
3865
4430
|
"selector": "onemrva-mat-toast",
|
|
3866
4431
|
"category": "Material Components",
|
|
3867
|
-
"path": "mat-toast
|
|
4432
|
+
"path": "mat-toast/src/onemrva-mat-toast.component.ts",
|
|
3868
4433
|
"description": "Snackbar toast for success, error, warning, or info notifications. This component exposes no configurable inputs or outputs.",
|
|
3869
4434
|
"inputs": [],
|
|
3870
4435
|
"outputs": [],
|
|
@@ -3874,10 +4439,22 @@
|
|
|
3874
4439
|
"queryChildren": [],
|
|
3875
4440
|
"hasEffects": false,
|
|
3876
4441
|
"standalone": true,
|
|
3877
|
-
"imports": [
|
|
4442
|
+
"imports": [
|
|
4443
|
+
"NgClass",
|
|
4444
|
+
"OnemRvaColorDirective"
|
|
4445
|
+
],
|
|
3878
4446
|
"examples": [],
|
|
3879
|
-
"accessibility": [
|
|
3880
|
-
|
|
4447
|
+
"accessibility": [
|
|
4448
|
+
"Defines roles: alert",
|
|
4449
|
+
"Defines role=\"alert\""
|
|
4450
|
+
],
|
|
4451
|
+
"keywords": [
|
|
4452
|
+
"toast",
|
|
4453
|
+
"snackbar",
|
|
4454
|
+
"notification",
|
|
4455
|
+
"message",
|
|
4456
|
+
"feedback"
|
|
4457
|
+
],
|
|
3881
4458
|
"group": "Feedback",
|
|
3882
4459
|
"themes": [],
|
|
3883
4460
|
"demoCode": "<p><a (click)=\"joke1()\">How do celebrities stay cool?</a></p>\n<button mat-flat-button color=\"accent\" (click)=\"yes()\">Like</button>\n<button mat-stroked-button color=\"primary\" (click)=\"no()\">\n Send complaint\n</button>\n<button mat-stroked-button color=\"error\" (click)=\"error()\">Error</button>\n"
|
|
@@ -3886,7 +4463,7 @@
|
|
|
3886
4463
|
"name": "mat-tooltip",
|
|
3887
4464
|
"selector": "onemrva-mat-tooltip",
|
|
3888
4465
|
"category": "Material Components",
|
|
3889
|
-
"path": "mat-tooltip
|
|
4466
|
+
"path": "mat-tooltip/src/onemrva-mat-tooltip.component.ts",
|
|
3890
4467
|
"description": "Custom tooltip with text or projected template content. Exposes 1 input and 0 outputs. Inputs: text (required): string. Outputs: none.",
|
|
3891
4468
|
"inputs": [
|
|
3892
4469
|
{
|
|
@@ -3904,10 +4481,17 @@
|
|
|
3904
4481
|
"queryChildren": [],
|
|
3905
4482
|
"hasEffects": false,
|
|
3906
4483
|
"standalone": true,
|
|
3907
|
-
"imports": [
|
|
4484
|
+
"imports": [
|
|
4485
|
+
"NgTemplateOutlet"
|
|
4486
|
+
],
|
|
3908
4487
|
"examples": [],
|
|
3909
4488
|
"accessibility": [],
|
|
3910
|
-
"keywords": [
|
|
4489
|
+
"keywords": [
|
|
4490
|
+
"tooltip",
|
|
4491
|
+
"overlay",
|
|
4492
|
+
"hint",
|
|
4493
|
+
"popover"
|
|
4494
|
+
],
|
|
3911
4495
|
"group": "Overlay",
|
|
3912
4496
|
"themes": [],
|
|
3913
4497
|
"demoCode": "@if (html()) {\n <mat-icon\n OnemrvaMatTooltip\n [position]=\"position()\"\n class=\"{{ filled() ? 'filled' : '' }}\"\n color=\"info\"\n [contentTemplate]=\"tooltipContent\"\n [attr.data-cy]=\"'data-cy-tooltip-trigger'\"\n [attr.data-cy-tooltipcontent]=\"'data-cy-tooltip-content'\"\n >\n info\n </mat-icon>\n <ng-template #tooltipContent>\n I am a custom content with html (position: <b>right</b>) but there are 3\n other positions\n <ul>\n <li>left</li>\n <li>top</li>\n <li>bottom</li>\n </ul>\n </ng-template>\n} @else {\n <mat-icon\n matTooltipHideDelay=\"500000000\"\n class=\"{{ filled() ? 'filled' : '' }}\"\n color=\"info\"\n [matTooltipPosition]=\"position()\"\n matTooltip=\"Here you can write some information on the right\"\n aria-label=\"Icon that displays a tooltip when focused or hovered over\"\n >\n info\n </mat-icon>\n}\n"
|
|
@@ -3916,7 +4500,7 @@
|
|
|
3916
4500
|
"name": "page-error",
|
|
3917
4501
|
"selector": "page-error-action",
|
|
3918
4502
|
"category": "Page Components",
|
|
3919
|
-
"path": "page-error
|
|
4503
|
+
"path": "page-error/src/page-error-action.component.ts",
|
|
3920
4504
|
"description": "Action slot projected into the page-error screen. This component exposes no configurable inputs or outputs.",
|
|
3921
4505
|
"inputs": [],
|
|
3922
4506
|
"outputs": [],
|
|
@@ -3929,16 +4513,21 @@
|
|
|
3929
4513
|
"imports": [],
|
|
3930
4514
|
"examples": [],
|
|
3931
4515
|
"accessibility": [],
|
|
3932
|
-
"keywords": [
|
|
4516
|
+
"keywords": [
|
|
4517
|
+
"page-error",
|
|
4518
|
+
"error",
|
|
4519
|
+
"action",
|
|
4520
|
+
"button"
|
|
4521
|
+
],
|
|
3933
4522
|
"group": "Pages",
|
|
3934
4523
|
"themes": [],
|
|
3935
|
-
"demoCode": "<page-error [code]=\"code()\">\
|
|
4524
|
+
"demoCode": "<page-error [code]=\"code()\">\n <page-error-action> Custom action </page-error-action>\n</page-error>\n"
|
|
3936
4525
|
},
|
|
3937
4526
|
{
|
|
3938
4527
|
"name": "page-error",
|
|
3939
4528
|
"selector": "page-error",
|
|
3940
4529
|
"category": "Page Components",
|
|
3941
|
-
"path": "page-error
|
|
4530
|
+
"path": "page-error/src/page-error.component.ts",
|
|
3942
4531
|
"description": "Full-page error state with message, illustration, and optional actions. Exposes 1 input and 0 outputs. Inputs: code: number. Outputs: none.",
|
|
3943
4532
|
"inputs": [
|
|
3944
4533
|
{
|
|
@@ -3957,19 +4546,28 @@
|
|
|
3957
4546
|
"queryChildren": [],
|
|
3958
4547
|
"hasEffects": true,
|
|
3959
4548
|
"standalone": true,
|
|
3960
|
-
"imports": [
|
|
4549
|
+
"imports": [
|
|
4550
|
+
"TranslatePipe",
|
|
4551
|
+
"NgTemplateOutlet"
|
|
4552
|
+
],
|
|
3961
4553
|
"examples": [],
|
|
3962
4554
|
"accessibility": [],
|
|
3963
|
-
"keywords": [
|
|
4555
|
+
"keywords": [
|
|
4556
|
+
"page-error",
|
|
4557
|
+
"error",
|
|
4558
|
+
"500",
|
|
4559
|
+
"fallback",
|
|
4560
|
+
"full-page"
|
|
4561
|
+
],
|
|
3964
4562
|
"group": "Pages",
|
|
3965
4563
|
"themes": [],
|
|
3966
|
-
"demoCode": "<page-error [code]=\"code()\">\
|
|
4564
|
+
"demoCode": "<page-error [code]=\"code()\">\n <page-error-action> Custom action </page-error-action>\n</page-error>\n"
|
|
3967
4565
|
},
|
|
3968
4566
|
{
|
|
3969
4567
|
"name": "page-not-found",
|
|
3970
4568
|
"selector": "page-not-found-action",
|
|
3971
4569
|
"category": "Page Components",
|
|
3972
|
-
"path": "page-not-found
|
|
4570
|
+
"path": "page-not-found/src/page-not-found-action.component.ts",
|
|
3973
4571
|
"description": "Action slot projected into the page-not-found screen. This component exposes no configurable inputs or outputs.",
|
|
3974
4572
|
"inputs": [],
|
|
3975
4573
|
"outputs": [],
|
|
@@ -3982,7 +4580,12 @@
|
|
|
3982
4580
|
"imports": [],
|
|
3983
4581
|
"examples": [],
|
|
3984
4582
|
"accessibility": [],
|
|
3985
|
-
"keywords": [
|
|
4583
|
+
"keywords": [
|
|
4584
|
+
"page-not-found",
|
|
4585
|
+
"404",
|
|
4586
|
+
"action",
|
|
4587
|
+
"button"
|
|
4588
|
+
],
|
|
3986
4589
|
"group": "Pages",
|
|
3987
4590
|
"themes": [],
|
|
3988
4591
|
"demoCode": "<page-not-found>\n <page-not-found-action>\n <button mat-stroked-button color=\"primary\" (click)=\"contact()\">\n <mat-icon>email</mat-icon> {{ '404.contact.us' | translate }}\n </button>\n </page-not-found-action>\n <page-not-found-action>\n <button mat-flat-button color=\"accent\" (click)=\"home()\">\n <mat-icon>home</mat-icon> {{ '404.go.back' | translate }}\n </button>\n </page-not-found-action>\n <page-not-found-extra>\n <h3>\n {{ '404.extra' | translate }}\n </h3>\n\n <mat-form-field style=\"width: 400px\">\n <mat-label for=\"searchInput\">{{\n '404.search.input.label' | translate\n }}</mat-label>\n <input id=\"searchInput\" matInput [formControl]=\"searchInput\" />\n <mat-icon matSuffix>search</mat-icon> </mat-form-field\n > \n <button mat-flat-button color=\"accent\" (click)=\"search()\">Search</button>\n </page-not-found-extra>\n</page-not-found>\n"
|
|
@@ -3991,7 +4594,7 @@
|
|
|
3991
4594
|
"name": "page-not-found",
|
|
3992
4595
|
"selector": "page-not-found-extra",
|
|
3993
4596
|
"category": "Page Components",
|
|
3994
|
-
"path": "page-not-found
|
|
4597
|
+
"path": "page-not-found/src/page-not-found-extra.component.ts",
|
|
3995
4598
|
"description": "Extra content slot in the page-not-found screen. This component exposes no configurable inputs or outputs.",
|
|
3996
4599
|
"inputs": [],
|
|
3997
4600
|
"outputs": [],
|
|
@@ -4004,7 +4607,12 @@
|
|
|
4004
4607
|
"imports": [],
|
|
4005
4608
|
"examples": [],
|
|
4006
4609
|
"accessibility": [],
|
|
4007
|
-
"keywords": [
|
|
4610
|
+
"keywords": [
|
|
4611
|
+
"page-not-found",
|
|
4612
|
+
"404",
|
|
4613
|
+
"extra",
|
|
4614
|
+
"content"
|
|
4615
|
+
],
|
|
4008
4616
|
"group": "Pages",
|
|
4009
4617
|
"themes": [],
|
|
4010
4618
|
"demoCode": "<page-not-found>\n <page-not-found-action>\n <button mat-stroked-button color=\"primary\" (click)=\"contact()\">\n <mat-icon>email</mat-icon> {{ '404.contact.us' | translate }}\n </button>\n </page-not-found-action>\n <page-not-found-action>\n <button mat-flat-button color=\"accent\" (click)=\"home()\">\n <mat-icon>home</mat-icon> {{ '404.go.back' | translate }}\n </button>\n </page-not-found-action>\n <page-not-found-extra>\n <h3>\n {{ '404.extra' | translate }}\n </h3>\n\n <mat-form-field style=\"width: 400px\">\n <mat-label for=\"searchInput\">{{\n '404.search.input.label' | translate\n }}</mat-label>\n <input id=\"searchInput\" matInput [formControl]=\"searchInput\" />\n <mat-icon matSuffix>search</mat-icon> </mat-form-field\n > \n <button mat-flat-button color=\"accent\" (click)=\"search()\">Search</button>\n </page-not-found-extra>\n</page-not-found>\n"
|
|
@@ -4013,7 +4621,7 @@
|
|
|
4013
4621
|
"name": "page-not-found",
|
|
4014
4622
|
"selector": "page-not-found-invader",
|
|
4015
4623
|
"category": "Page Components",
|
|
4016
|
-
"path": "page-not-found
|
|
4624
|
+
"path": "page-not-found/src/page-not-found-invader.component.ts",
|
|
4017
4625
|
"description": "Animated Space Invader illustration shown on the 404 page. This component exposes no configurable inputs or outputs.",
|
|
4018
4626
|
"inputs": [],
|
|
4019
4627
|
"outputs": [],
|
|
@@ -4023,15 +4631,22 @@
|
|
|
4023
4631
|
"queryChildren": [],
|
|
4024
4632
|
"hasEffects": false,
|
|
4025
4633
|
"standalone": true,
|
|
4026
|
-
"imports": [
|
|
4027
|
-
|
|
4634
|
+
"imports": [
|
|
4635
|
+
"AsyncPipe"
|
|
4636
|
+
],
|
|
4637
|
+
"examples": [],
|
|
4028
4638
|
"accessibility": [
|
|
4029
4639
|
"Defines roles: button",
|
|
4030
4640
|
"Uses aria-label for screen readers",
|
|
4031
4641
|
"Defines role=\"button\"",
|
|
4032
4642
|
"Manages focus with tabindex"
|
|
4033
4643
|
],
|
|
4034
|
-
"keywords": [
|
|
4644
|
+
"keywords": [
|
|
4645
|
+
"page-not-found",
|
|
4646
|
+
"404",
|
|
4647
|
+
"animation",
|
|
4648
|
+
"illustration"
|
|
4649
|
+
],
|
|
4035
4650
|
"group": "Pages",
|
|
4036
4651
|
"themes": [],
|
|
4037
4652
|
"demoCode": "<page-not-found>\n <page-not-found-action>\n <button mat-stroked-button color=\"primary\" (click)=\"contact()\">\n <mat-icon>email</mat-icon> {{ '404.contact.us' | translate }}\n </button>\n </page-not-found-action>\n <page-not-found-action>\n <button mat-flat-button color=\"accent\" (click)=\"home()\">\n <mat-icon>home</mat-icon> {{ '404.go.back' | translate }}\n </button>\n </page-not-found-action>\n <page-not-found-extra>\n <h3>\n {{ '404.extra' | translate }}\n </h3>\n\n <mat-form-field style=\"width: 400px\">\n <mat-label for=\"searchInput\">{{\n '404.search.input.label' | translate\n }}</mat-label>\n <input id=\"searchInput\" matInput [formControl]=\"searchInput\" />\n <mat-icon matSuffix>search</mat-icon> </mat-form-field\n > \n <button mat-flat-button color=\"accent\" (click)=\"search()\">Search</button>\n </page-not-found-extra>\n</page-not-found>\n"
|
|
@@ -4040,7 +4655,7 @@
|
|
|
4040
4655
|
"name": "page-not-found",
|
|
4041
4656
|
"selector": "page-not-found",
|
|
4042
4657
|
"category": "Page Components",
|
|
4043
|
-
"path": "page-not-found
|
|
4658
|
+
"path": "page-not-found/src/page-not-found.component.ts",
|
|
4044
4659
|
"description": "Full-page 404 not-found screen with illustration and Konami code Easter egg. This component exposes no configurable inputs or outputs.",
|
|
4045
4660
|
"inputs": [],
|
|
4046
4661
|
"outputs": [],
|
|
@@ -4056,8 +4671,16 @@
|
|
|
4056
4671
|
"PageNotFoundInvaderComponent"
|
|
4057
4672
|
],
|
|
4058
4673
|
"examples": [],
|
|
4059
|
-
"accessibility": [
|
|
4060
|
-
|
|
4674
|
+
"accessibility": [
|
|
4675
|
+
"Supports keyboard navigation"
|
|
4676
|
+
],
|
|
4677
|
+
"keywords": [
|
|
4678
|
+
"page-not-found",
|
|
4679
|
+
"404",
|
|
4680
|
+
"not-found",
|
|
4681
|
+
"error",
|
|
4682
|
+
"full-page"
|
|
4683
|
+
],
|
|
4061
4684
|
"group": "Pages",
|
|
4062
4685
|
"themes": [],
|
|
4063
4686
|
"demoCode": "<page-not-found>\n <page-not-found-action>\n <button mat-stroked-button color=\"primary\" (click)=\"contact()\">\n <mat-icon>email</mat-icon> {{ '404.contact.us' | translate }}\n </button>\n </page-not-found-action>\n <page-not-found-action>\n <button mat-flat-button color=\"accent\" (click)=\"home()\">\n <mat-icon>home</mat-icon> {{ '404.go.back' | translate }}\n </button>\n </page-not-found-action>\n <page-not-found-extra>\n <h3>\n {{ '404.extra' | translate }}\n </h3>\n\n <mat-form-field style=\"width: 400px\">\n <mat-label for=\"searchInput\">{{\n '404.search.input.label' | translate\n }}</mat-label>\n <input id=\"searchInput\" matInput [formControl]=\"searchInput\" />\n <mat-icon matSuffix>search</mat-icon> </mat-form-field\n > \n <button mat-flat-button color=\"accent\" (click)=\"search()\">Search</button>\n </page-not-found-extra>\n</page-not-found>\n"
|
|
@@ -4066,7 +4689,7 @@
|
|
|
4066
4689
|
"name": "shared",
|
|
4067
4690
|
"selector": "lib-clipboard-icon",
|
|
4068
4691
|
"category": "Utilities",
|
|
4069
|
-
"path": "shared
|
|
4692
|
+
"path": "shared/src/lib/components/clipboard-icon/clipboard-icon.component.ts",
|
|
4070
4693
|
"description": "Icon button that copies adjacent text to the clipboard. This component exposes no configurable inputs or outputs.",
|
|
4071
4694
|
"inputs": [],
|
|
4072
4695
|
"outputs": [],
|
|
@@ -4076,12 +4699,188 @@
|
|
|
4076
4699
|
"queryChildren": [],
|
|
4077
4700
|
"hasEffects": false,
|
|
4078
4701
|
"standalone": true,
|
|
4079
|
-
"imports": [
|
|
4702
|
+
"imports": [
|
|
4703
|
+
"MatIconModule",
|
|
4704
|
+
"MatTooltipModule"
|
|
4705
|
+
],
|
|
4080
4706
|
"examples": [],
|
|
4081
4707
|
"accessibility": [],
|
|
4082
|
-
"keywords": [
|
|
4708
|
+
"keywords": [
|
|
4709
|
+
"clipboard",
|
|
4710
|
+
"copy",
|
|
4711
|
+
"icon",
|
|
4712
|
+
"copy-to-clipboard"
|
|
4713
|
+
],
|
|
4083
4714
|
"group": "Misc",
|
|
4084
4715
|
"themes": []
|
|
4716
|
+
},
|
|
4717
|
+
{
|
|
4718
|
+
"name": "timeline",
|
|
4719
|
+
"selector": "onemrva-timeline",
|
|
4720
|
+
"category": "Utilities",
|
|
4721
|
+
"path": "timeline/src/onemrva-timeline.component.ts",
|
|
4722
|
+
"description": "Displays dated periods on a horizontal, year-based timeline. Overlapping periods stack into rows and take their colour from the matching legend item.",
|
|
4723
|
+
"inputs": [
|
|
4724
|
+
{
|
|
4725
|
+
"name": "title",
|
|
4726
|
+
"type": "string",
|
|
4727
|
+
"description": "Optional heading shown above the visible year range.",
|
|
4728
|
+
"defaultValue": "''",
|
|
4729
|
+
"required": false,
|
|
4730
|
+
"examples": []
|
|
4731
|
+
},
|
|
4732
|
+
{
|
|
4733
|
+
"name": "periods",
|
|
4734
|
+
"type": "TimelinePeriod[]",
|
|
4735
|
+
"description": "Periods to plot on the timeline.",
|
|
4736
|
+
"defaultValue": "[]",
|
|
4737
|
+
"required": false,
|
|
4738
|
+
"examples": []
|
|
4739
|
+
},
|
|
4740
|
+
{
|
|
4741
|
+
"name": "legend",
|
|
4742
|
+
"type": "TimelineLegend",
|
|
4743
|
+
"description": "Legend entries that map a period `type` to its label and color.",
|
|
4744
|
+
"required": false,
|
|
4745
|
+
"examples": []
|
|
4746
|
+
},
|
|
4747
|
+
{
|
|
4748
|
+
"name": "yearOptions",
|
|
4749
|
+
"type": "number[]",
|
|
4750
|
+
"description": "Year-window sizes offered by the period dropdown.",
|
|
4751
|
+
"defaultValue": "[1, 5, 10]",
|
|
4752
|
+
"required": false,
|
|
4753
|
+
"examples": []
|
|
4754
|
+
},
|
|
4755
|
+
{
|
|
4756
|
+
"name": "showMonthPicker",
|
|
4757
|
+
"type": "boolean",
|
|
4758
|
+
"description": "When true, the period dropdown offers a \"Month\" option.",
|
|
4759
|
+
"defaultValue": "false",
|
|
4760
|
+
"required": false,
|
|
4761
|
+
"examples": []
|
|
4762
|
+
},
|
|
4763
|
+
{
|
|
4764
|
+
"name": "showMonths",
|
|
4765
|
+
"type": "boolean",
|
|
4766
|
+
"description": "Whether month numbers are shown under each year (only when the window spans at most 5 years).",
|
|
4767
|
+
"defaultValue": "true",
|
|
4768
|
+
"required": false,
|
|
4769
|
+
"examples": []
|
|
4770
|
+
},
|
|
4771
|
+
{
|
|
4772
|
+
"name": "showLabels",
|
|
4773
|
+
"type": "boolean",
|
|
4774
|
+
"description": "Whether period labels are rendered inside the bars.",
|
|
4775
|
+
"defaultValue": "true",
|
|
4776
|
+
"required": false,
|
|
4777
|
+
"examples": []
|
|
4778
|
+
},
|
|
4779
|
+
{
|
|
4780
|
+
"name": "showTooltip",
|
|
4781
|
+
"type": "boolean",
|
|
4782
|
+
"description": "Whether the hover popup with period details is shown.",
|
|
4783
|
+
"defaultValue": "true",
|
|
4784
|
+
"required": false,
|
|
4785
|
+
"examples": []
|
|
4786
|
+
},
|
|
4787
|
+
{
|
|
4788
|
+
"name": "maxHeight",
|
|
4789
|
+
"type": "string",
|
|
4790
|
+
"description": "Optional max height (any CSS length) for the timeline body; rows scroll within it while the year and month axes stay pinned. Ignored when `fullSize` is true.",
|
|
4791
|
+
"defaultValue": "''",
|
|
4792
|
+
"required": false,
|
|
4793
|
+
"examples": []
|
|
4794
|
+
},
|
|
4795
|
+
{
|
|
4796
|
+
"name": "fullSize",
|
|
4797
|
+
"type": "boolean",
|
|
4798
|
+
"description": "When true, every row is shown at once and the body never scrolls; `maxHeight` is ignored.",
|
|
4799
|
+
"defaultValue": "false",
|
|
4800
|
+
"required": false,
|
|
4801
|
+
"examples": []
|
|
4802
|
+
},
|
|
4803
|
+
{
|
|
4804
|
+
"name": "filters",
|
|
4805
|
+
"type": "TimelineFilterOption[]",
|
|
4806
|
+
"description": "Single-select filter toggles shown in the header; at most three are rendered.",
|
|
4807
|
+
"defaultValue": "[]",
|
|
4808
|
+
"required": false,
|
|
4809
|
+
"examples": []
|
|
4810
|
+
},
|
|
4811
|
+
{
|
|
4812
|
+
"name": "emptyMessage",
|
|
4813
|
+
"type": "string",
|
|
4814
|
+
"description": "Message shown when no periods are provided. Nothing renders when it is empty.",
|
|
4815
|
+
"defaultValue": "''",
|
|
4816
|
+
"required": false,
|
|
4817
|
+
"examples": []
|
|
4818
|
+
},
|
|
4819
|
+
{
|
|
4820
|
+
"name": "fixedYearCount",
|
|
4821
|
+
"type": "number",
|
|
4822
|
+
"description": "Size, in years, of the visible window; two-way bindable via the period dropdown.",
|
|
4823
|
+
"defaultValue": "5",
|
|
4824
|
+
"required": false,
|
|
4825
|
+
"examples": []
|
|
4826
|
+
},
|
|
4827
|
+
{
|
|
4828
|
+
"name": "selectedPeriod",
|
|
4829
|
+
"type": "TimelinePeriod | undefined",
|
|
4830
|
+
"description": "Currently selected period. Two-way bindable via `[(selectedPeriod)]`.",
|
|
4831
|
+
"required": false,
|
|
4832
|
+
"examples": []
|
|
4833
|
+
},
|
|
4834
|
+
{
|
|
4835
|
+
"name": "activeFilter",
|
|
4836
|
+
"type": "string | undefined",
|
|
4837
|
+
"description": "Value of the currently active filter, or `undefined` when none. Two-way bindable.",
|
|
4838
|
+
"defaultValue": "undefined",
|
|
4839
|
+
"required": false,
|
|
4840
|
+
"examples": []
|
|
4841
|
+
}
|
|
4842
|
+
],
|
|
4843
|
+
"outputs": [
|
|
4844
|
+
{
|
|
4845
|
+
"name": "filterChange",
|
|
4846
|
+
"type": "OutputEmitter<string | undefined>",
|
|
4847
|
+
"description": "Output event `filterChange` emits `OutputEmitter<string | undefined>`."
|
|
4848
|
+
},
|
|
4849
|
+
{
|
|
4850
|
+
"name": "axisUnitChange",
|
|
4851
|
+
"type": "OutputEmitter<'months' | 'days'>",
|
|
4852
|
+
"description": "Output event `axisUnitChange` emits `OutputEmitter<'months' | 'days'>`."
|
|
4853
|
+
}
|
|
4854
|
+
],
|
|
4855
|
+
"methods": [],
|
|
4856
|
+
"slots": [],
|
|
4857
|
+
"hostListeners": [],
|
|
4858
|
+
"queryChildren": [],
|
|
4859
|
+
"hasEffects": true,
|
|
4860
|
+
"standalone": true,
|
|
4861
|
+
"imports": [
|
|
4862
|
+
"MatIcon",
|
|
4863
|
+
"MatIconButton",
|
|
4864
|
+
"MatButtonToggleModule",
|
|
4865
|
+
"MatFormFieldModule",
|
|
4866
|
+
"MatSelectModule",
|
|
4867
|
+
"MatDivider",
|
|
4868
|
+
"OverlayModule",
|
|
4869
|
+
"TranslatePipe"
|
|
4870
|
+
],
|
|
4871
|
+
"examples": [],
|
|
4872
|
+
"accessibility": [
|
|
4873
|
+
"Defines roles: tooltip",
|
|
4874
|
+
"Uses dynamic role bindings",
|
|
4875
|
+
"Uses aria-label for screen readers",
|
|
4876
|
+
"Uses aria-describedby for descriptions",
|
|
4877
|
+
"Supports keyboard navigation",
|
|
4878
|
+
"Manages focus with tabindex"
|
|
4879
|
+
],
|
|
4880
|
+
"keywords": [],
|
|
4881
|
+
"group": "",
|
|
4882
|
+
"themes": [],
|
|
4883
|
+
"demoCode": "<onemrva-timeline\n title=\"Career timeline\"\n [periods]=\"displayedPeriods()\"\n [legend]=\"legend\"\n [filters]=\"filters\"\n [showMonths]=\"showMonths()\"\n [showLabels]=\"showLabels()\"\n [showMonthPicker]=\"true\"\n [fullSize]=\"fullSize()\"\n maxHeight=\"280px\"\n [(fixedYearCount)]=\"yearCount\"\n [(activeFilter)]=\"activeFilter\"\n [(selectedPeriod)]=\"selectedPeriod\"\n (axisUnitChange)=\"axisUnit.set($event)\"\n emptyMessage=\"No periods to display\"\n/>\n\n<div class=\"demo-timeline__controls\">\n <mat-checkbox\n class=\"demo-timeline__months-toggle\"\n [checked]=\"showMonths()\"\n [disabled]=\"axisUnit() === 'months' && yearCount() > 5\"\n (change)=\"showMonths.set($event.checked)\"\n >\n {{ axisUnit() === 'days' ? 'Show days' : 'Show months' }}\n </mat-checkbox>\n @if (axisUnit() === 'months') {\n <span class=\"demo-timeline__hint\"\n >Available for a window of 5 years or less</span\n >\n }\n\n <mat-checkbox\n class=\"demo-timeline__labels-toggle\"\n [checked]=\"showLabels()\"\n (change)=\"showLabels.set($event.checked)\"\n >\n Show labels\n </mat-checkbox>\n\n <mat-checkbox\n class=\"demo-timeline__fullsize-toggle\"\n [checked]=\"fullSize()\"\n (change)=\"fullSize.set($event.checked)\"\n >\n Full size\n </mat-checkbox>\n\n @if (selectedPeriod(); as selected) {\n <span class=\"demo-timeline__selection\">\n Selected period: <strong>{{ selected.label ?? selected.type }}</strong>\n </span>\n }\n</div>\n"
|
|
4085
4884
|
}
|
|
4086
4885
|
],
|
|
4087
4886
|
"jsonforms": [
|
|
@@ -4108,7 +4907,7 @@
|
|
|
4108
4907
|
}
|
|
4109
4908
|
],
|
|
4110
4909
|
"tester": "checkboxTester: rankWith(3, isBooleanControl)",
|
|
4111
|
-
"path": "checkbox-renderer
|
|
4910
|
+
"path": "checkbox-renderer/checkbox-renderer.component.ts"
|
|
4112
4911
|
},
|
|
4113
4912
|
{
|
|
4114
4913
|
"name": "datepicker-renderer",
|
|
@@ -4116,7 +4915,7 @@
|
|
|
4116
4915
|
"description": "Angular component: app-date-picker-renderer",
|
|
4117
4916
|
"inputs": [],
|
|
4118
4917
|
"tester": "DatePickerRendererTester: rankWith(3, isDateControl,)",
|
|
4119
|
-
"path": "datepicker-renderer
|
|
4918
|
+
"path": "datepicker-renderer/datepicker-renderer.component.ts"
|
|
4120
4919
|
},
|
|
4121
4920
|
{
|
|
4122
4921
|
"name": "iban-renderer",
|
|
@@ -4124,7 +4923,7 @@
|
|
|
4124
4923
|
"description": "Angular component: app-iban-renderer",
|
|
4125
4924
|
"inputs": [],
|
|
4126
4925
|
"tester": "ibanControlTester: rankWith(10, scopeEndsWith('iban')",
|
|
4127
|
-
"path": "iban-renderer
|
|
4926
|
+
"path": "iban-renderer/iban-renderer.component.ts"
|
|
4128
4927
|
},
|
|
4129
4928
|
{
|
|
4130
4929
|
"name": "label-renderer",
|
|
@@ -4132,15 +4931,15 @@
|
|
|
4132
4931
|
"description": "Angular component: app-label-renderer",
|
|
4133
4932
|
"inputs": [],
|
|
4134
4933
|
"tester": "customLabelTester: rankWith(5, uiTypeIs('Label')",
|
|
4135
|
-
"path": "label-renderer
|
|
4934
|
+
"path": "label-renderer/label-renderer.component.ts"
|
|
4136
4935
|
},
|
|
4137
4936
|
{
|
|
4138
4937
|
"name": "niss-renderer",
|
|
4139
4938
|
"selector": "app-niss-renderer",
|
|
4140
4939
|
"description": "Angular component: app-niss-renderer",
|
|
4141
4940
|
"inputs": [],
|
|
4142
|
-
"tester": "nissControlTester: rankWith(10, // TODO : Why format =\"ssin\" is not reconized !!!!\
|
|
4143
|
-
"path": "niss-renderer
|
|
4941
|
+
"tester": "nissControlTester: rankWith(10, // TODO : Why format =\"ssin\" is not reconized !!!!\n scopeEndsWith('ssin')",
|
|
4942
|
+
"path": "niss-renderer/niss-renderer.component.ts"
|
|
4144
4943
|
},
|
|
4145
4944
|
{
|
|
4146
4945
|
"name": "phone-renderer",
|
|
@@ -4148,7 +4947,7 @@
|
|
|
4148
4947
|
"description": "Angular component: app-phone-renderer",
|
|
4149
4948
|
"inputs": [],
|
|
4150
4949
|
"tester": "phoneControllerTester: rankWith(8, scopeEndsWith('phone')",
|
|
4151
|
-
"path": "phone-renderer
|
|
4950
|
+
"path": "phone-renderer/phone-renderer.component.ts"
|
|
4152
4951
|
},
|
|
4153
4952
|
{
|
|
4154
4953
|
"name": "radio-button-renderer",
|
|
@@ -4156,7 +4955,7 @@
|
|
|
4156
4955
|
"description": "Angular component: app-radio-button-renderer",
|
|
4157
4956
|
"inputs": [],
|
|
4158
4957
|
"tester": "",
|
|
4159
|
-
"path": "radio-button-renderer
|
|
4958
|
+
"path": "radio-button-renderer/radio-button.renderer.component.ts"
|
|
4160
4959
|
},
|
|
4161
4960
|
{
|
|
4162
4961
|
"name": "readonly-control-renderer",
|
|
@@ -4164,7 +4963,7 @@
|
|
|
4164
4963
|
"description": "Angular component: app-readonly-control-renderer",
|
|
4165
4964
|
"inputs": [],
|
|
4166
4965
|
"tester": "readonlyControlTester: rankWith(11, and(isControl, optionIs('readonly', true)",
|
|
4167
|
-
"path": "readonly-control-renderer
|
|
4966
|
+
"path": "readonly-control-renderer/readonly-control-renderer.component.ts"
|
|
4168
4967
|
},
|
|
4169
4968
|
{
|
|
4170
4969
|
"name": "select-renderer",
|
|
@@ -4172,7 +4971,7 @@
|
|
|
4172
4971
|
"description": "Angular component: app-enum-renderer",
|
|
4173
4972
|
"inputs": [],
|
|
4174
4973
|
"tester": "enumControlTester: rankWith(10, isEnumControl)",
|
|
4175
|
-
"path": "select-renderer
|
|
4974
|
+
"path": "select-renderer/select-renderer.component.ts"
|
|
4176
4975
|
}
|
|
4177
4976
|
],
|
|
4178
4977
|
"theme": [
|
|
@@ -4180,22 +4979,28 @@
|
|
|
4180
4979
|
"name": "--avatar-font-size",
|
|
4181
4980
|
"type": "css-custom-property",
|
|
4182
4981
|
"description": "CSS custom property: 2rem",
|
|
4183
|
-
"values": [
|
|
4184
|
-
|
|
4982
|
+
"values": [
|
|
4983
|
+
"2rem"
|
|
4984
|
+
],
|
|
4985
|
+
"path": "utilities/_tokens.scss"
|
|
4185
4986
|
},
|
|
4186
4987
|
{
|
|
4187
4988
|
"name": "--avatar-resize",
|
|
4188
4989
|
"type": "css-custom-property",
|
|
4189
4990
|
"description": "CSS custom property: 1.5rem",
|
|
4190
|
-
"values": [
|
|
4191
|
-
|
|
4991
|
+
"values": [
|
|
4992
|
+
"1.5rem"
|
|
4993
|
+
],
|
|
4994
|
+
"path": "utilities/_tokens.scss"
|
|
4192
4995
|
},
|
|
4193
4996
|
{
|
|
4194
4997
|
"name": "--avatar-size",
|
|
4195
4998
|
"type": "css-custom-property",
|
|
4196
4999
|
"description": "CSS custom property: 8rem",
|
|
4197
|
-
"values": [
|
|
4198
|
-
|
|
5000
|
+
"values": [
|
|
5001
|
+
"8rem"
|
|
5002
|
+
],
|
|
5003
|
+
"path": "utilities/_tokens.scss"
|
|
4199
5004
|
},
|
|
4200
5005
|
{
|
|
4201
5006
|
"name": "--background-error-page",
|
|
@@ -4204,395 +5009,534 @@
|
|
|
4204
5009
|
"values": [
|
|
4205
5010
|
"url('https://cdn.services.rvaonem.fgov.be/img/404/background.svg')"
|
|
4206
5011
|
],
|
|
4207
|
-
"path": "utilities
|
|
5012
|
+
"path": "utilities/_tokens.scss"
|
|
4208
5013
|
},
|
|
4209
5014
|
{
|
|
4210
5015
|
"name": "--background-gradient",
|
|
4211
5016
|
"type": "css-custom-property",
|
|
4212
|
-
"description": "CSS custom property: transparent\
|
|
5017
|
+
"description": "CSS custom property: transparent\n linear-gradient(90deg, #de2174 0...",
|
|
4213
5018
|
"values": [
|
|
4214
|
-
"transparent\
|
|
5019
|
+
"transparent\n linear-gradient(90deg, #de2174 0%, #eb142a 100%) 0% 0% no-repeat\n padding-box"
|
|
4215
5020
|
],
|
|
4216
|
-
"path": "utilities
|
|
5021
|
+
"path": "utilities/_tokens.scss"
|
|
4217
5022
|
},
|
|
4218
5023
|
{
|
|
4219
5024
|
"name": "--border-radius",
|
|
4220
5025
|
"type": "css-custom-property",
|
|
4221
5026
|
"description": "CSS custom property: 16px",
|
|
4222
|
-
"values": [
|
|
4223
|
-
|
|
5027
|
+
"values": [
|
|
5028
|
+
"16px"
|
|
5029
|
+
],
|
|
5030
|
+
"path": "utilities/_tokens.scss"
|
|
4224
5031
|
},
|
|
4225
5032
|
{
|
|
4226
5033
|
"name": "--box-shadow",
|
|
4227
5034
|
"type": "css-custom-property",
|
|
4228
5035
|
"description": "CSS custom property: 0 2px 6px #00000026",
|
|
4229
|
-
"values": [
|
|
4230
|
-
|
|
5036
|
+
"values": [
|
|
5037
|
+
"0 2px 6px #00000026"
|
|
5038
|
+
],
|
|
5039
|
+
"path": "utilities/_tokens.scss"
|
|
5040
|
+
},
|
|
5041
|
+
{
|
|
5042
|
+
"name": "--box-shadow-level2",
|
|
5043
|
+
"type": "css-custom-property",
|
|
5044
|
+
"description": "CSS custom property: 0 3px 3px 0 rgba(49, 47, 59, 0.32)",
|
|
5045
|
+
"values": [
|
|
5046
|
+
"0 3px 3px 0 rgba(49, 47, 59, 0.32)"
|
|
5047
|
+
],
|
|
5048
|
+
"path": "utilities/_tokens.scss"
|
|
5049
|
+
},
|
|
5050
|
+
{
|
|
5051
|
+
"name": "--box-shadow-level3",
|
|
5052
|
+
"type": "css-custom-property",
|
|
5053
|
+
"description": "CSS custom property: 0 2px 6px 0 rgba(0, 0, 0, 0.32)",
|
|
5054
|
+
"values": [
|
|
5055
|
+
"0 2px 6px 0 rgba(0, 0, 0, 0.32)"
|
|
5056
|
+
],
|
|
5057
|
+
"path": "utilities/_tokens.scss"
|
|
5058
|
+
},
|
|
5059
|
+
{
|
|
5060
|
+
"name": "--box-shadow-level4",
|
|
5061
|
+
"type": "css-custom-property",
|
|
5062
|
+
"description": "CSS custom property: 0 3px 6px 0 rgba(0, 0, 0, 0.16)",
|
|
5063
|
+
"values": [
|
|
5064
|
+
"0 3px 6px 0 rgba(0, 0, 0, 0.16)"
|
|
5065
|
+
],
|
|
5066
|
+
"path": "utilities/_tokens.scss"
|
|
4231
5067
|
},
|
|
4232
5068
|
{
|
|
4233
5069
|
"name": "--brand-font",
|
|
4234
5070
|
"type": "css-custom-property",
|
|
4235
5071
|
"description": "CSS custom property: Poppins, sans-serif",
|
|
4236
|
-
"values": [
|
|
4237
|
-
|
|
5072
|
+
"values": [
|
|
5073
|
+
"Poppins, sans-serif"
|
|
5074
|
+
],
|
|
5075
|
+
"path": "utilities/_tokens.scss"
|
|
4238
5076
|
},
|
|
4239
5077
|
{
|
|
4240
5078
|
"name": "--breakpoint-large",
|
|
4241
5079
|
"type": "css-custom-property",
|
|
4242
5080
|
"description": "CSS custom property: 1280px",
|
|
4243
|
-
"values": [
|
|
4244
|
-
|
|
5081
|
+
"values": [
|
|
5082
|
+
"1280px"
|
|
5083
|
+
],
|
|
5084
|
+
"path": "utilities/_tokens.scss"
|
|
4245
5085
|
},
|
|
4246
5086
|
{
|
|
4247
5087
|
"name": "--breakpoint-medium",
|
|
4248
5088
|
"type": "css-custom-property",
|
|
4249
5089
|
"description": "CSS custom property: 960px",
|
|
4250
|
-
"values": [
|
|
4251
|
-
|
|
5090
|
+
"values": [
|
|
5091
|
+
"960px"
|
|
5092
|
+
],
|
|
5093
|
+
"path": "utilities/_tokens.scss"
|
|
4252
5094
|
},
|
|
4253
5095
|
{
|
|
4254
5096
|
"name": "--breakpoint-small",
|
|
4255
5097
|
"type": "css-custom-property",
|
|
4256
5098
|
"description": "CSS custom property: 600px",
|
|
4257
|
-
"values": [
|
|
4258
|
-
|
|
5099
|
+
"values": [
|
|
5100
|
+
"600px"
|
|
5101
|
+
],
|
|
5102
|
+
"path": "utilities/_tokens.scss"
|
|
4259
5103
|
},
|
|
4260
5104
|
{
|
|
4261
5105
|
"name": "--breakpoint-xlarge",
|
|
4262
5106
|
"type": "css-custom-property",
|
|
4263
5107
|
"description": "CSS custom property: 1536px",
|
|
4264
|
-
"values": [
|
|
4265
|
-
|
|
5108
|
+
"values": [
|
|
5109
|
+
"1536px"
|
|
5110
|
+
],
|
|
5111
|
+
"path": "utilities/_tokens.scss"
|
|
4266
5112
|
},
|
|
4267
5113
|
{
|
|
4268
5114
|
"name": "--breakpoint-xxlarge",
|
|
4269
5115
|
"type": "css-custom-property",
|
|
4270
5116
|
"description": "CSS custom property: 1920px",
|
|
4271
|
-
"values": [
|
|
4272
|
-
|
|
5117
|
+
"values": [
|
|
5118
|
+
"1920px"
|
|
5119
|
+
],
|
|
5120
|
+
"path": "utilities/_tokens.scss"
|
|
4273
5121
|
},
|
|
4274
5122
|
{
|
|
4275
5123
|
"name": "--bs-gutter-x",
|
|
4276
5124
|
"type": "css-custom-property",
|
|
4277
5125
|
"description": "CSS custom property: #{list.nth($spacer, 2)} !important",
|
|
4278
|
-
"values": [
|
|
4279
|
-
|
|
5126
|
+
"values": [
|
|
5127
|
+
"#{list.nth($spacer, 2)} !important"
|
|
5128
|
+
],
|
|
5129
|
+
"path": "utilities/_grid.scss"
|
|
4280
5130
|
},
|
|
4281
5131
|
{
|
|
4282
5132
|
"name": "--bs-gutter-y",
|
|
4283
5133
|
"type": "css-custom-property",
|
|
4284
5134
|
"description": "CSS custom property: #{list.nth($spacer, 2)} !important",
|
|
4285
|
-
"values": [
|
|
4286
|
-
|
|
5135
|
+
"values": [
|
|
5136
|
+
"#{list.nth($spacer, 2)} !important"
|
|
5137
|
+
],
|
|
5138
|
+
"path": "utilities/_grid.scss"
|
|
4287
5139
|
},
|
|
4288
5140
|
{
|
|
4289
5141
|
"name": "--button-border-radius",
|
|
4290
5142
|
"type": "css-custom-property",
|
|
4291
5143
|
"description": "CSS custom property: 500px",
|
|
4292
|
-
"values": [
|
|
4293
|
-
|
|
5144
|
+
"values": [
|
|
5145
|
+
"500px"
|
|
5146
|
+
],
|
|
5147
|
+
"path": "utilities/_tokens.scss"
|
|
5148
|
+
},
|
|
5149
|
+
{
|
|
5150
|
+
"name": "--chip-border-radius",
|
|
5151
|
+
"type": "css-custom-property",
|
|
5152
|
+
"description": "CSS custom property: 8px",
|
|
5153
|
+
"values": [
|
|
5154
|
+
"8px"
|
|
5155
|
+
],
|
|
5156
|
+
"path": "utilities/_tokens.scss"
|
|
4294
5157
|
},
|
|
4295
5158
|
{
|
|
4296
5159
|
"name": "--double-spacer",
|
|
4297
5160
|
"type": "css-custom-property",
|
|
4298
5161
|
"description": "CSS custom property: 1rem",
|
|
4299
|
-
"values": [
|
|
4300
|
-
|
|
5162
|
+
"values": [
|
|
5163
|
+
"1rem"
|
|
5164
|
+
],
|
|
5165
|
+
"path": "utilities/_tokens.scss"
|
|
4301
5166
|
},
|
|
4302
5167
|
{
|
|
4303
5168
|
"name": "--half-border-radius",
|
|
4304
5169
|
"type": "css-custom-property",
|
|
4305
5170
|
"description": "CSS custom property: 8px",
|
|
4306
|
-
"values": [
|
|
4307
|
-
|
|
5171
|
+
"values": [
|
|
5172
|
+
"8px"
|
|
5173
|
+
],
|
|
5174
|
+
"path": "utilities/_tokens.scss"
|
|
4308
5175
|
},
|
|
4309
5176
|
{
|
|
4310
5177
|
"name": "--half-spacer",
|
|
4311
5178
|
"type": "css-custom-property",
|
|
4312
5179
|
"description": "CSS custom property: 0.25rem",
|
|
4313
|
-
"values": [
|
|
4314
|
-
|
|
5180
|
+
"values": [
|
|
5181
|
+
"0.25rem"
|
|
5182
|
+
],
|
|
5183
|
+
"path": "utilities/_tokens.scss"
|
|
4315
5184
|
},
|
|
4316
5185
|
{
|
|
4317
5186
|
"name": "--icon-font",
|
|
4318
5187
|
"type": "css-custom-property",
|
|
4319
5188
|
"description": "CSS custom property: Material Icons",
|
|
4320
|
-
"values": [
|
|
4321
|
-
|
|
5189
|
+
"values": [
|
|
5190
|
+
"Material Icons"
|
|
5191
|
+
],
|
|
5192
|
+
"path": "utilities/_tokens.scss"
|
|
4322
5193
|
},
|
|
4323
5194
|
{
|
|
4324
5195
|
"name": "--icon-size-large",
|
|
4325
5196
|
"type": "css-custom-property",
|
|
4326
5197
|
"description": "CSS custom property: 1.5rem",
|
|
4327
|
-
"values": [
|
|
4328
|
-
|
|
5198
|
+
"values": [
|
|
5199
|
+
"1.5rem"
|
|
5200
|
+
],
|
|
5201
|
+
"path": "utilities/_tokens.scss"
|
|
4329
5202
|
},
|
|
4330
5203
|
{
|
|
4331
5204
|
"name": "--icon-size-medium",
|
|
4332
5205
|
"type": "css-custom-property",
|
|
4333
5206
|
"description": "CSS custom property: 1.25rem",
|
|
4334
|
-
"values": [
|
|
4335
|
-
|
|
5207
|
+
"values": [
|
|
5208
|
+
"1.25rem"
|
|
5209
|
+
],
|
|
5210
|
+
"path": "utilities/_tokens.scss"
|
|
4336
5211
|
},
|
|
4337
5212
|
{
|
|
4338
5213
|
"name": "--icon-size-small",
|
|
4339
5214
|
"type": "css-custom-property",
|
|
4340
5215
|
"description": "CSS custom property: 1rem",
|
|
4341
|
-
"values": [
|
|
4342
|
-
|
|
5216
|
+
"values": [
|
|
5217
|
+
"1rem"
|
|
5218
|
+
],
|
|
5219
|
+
"path": "utilities/_tokens.scss"
|
|
4343
5220
|
},
|
|
4344
5221
|
{
|
|
4345
5222
|
"name": "--icon-size-xlarge",
|
|
4346
5223
|
"type": "css-custom-property",
|
|
4347
5224
|
"description": "CSS custom property: 3rem",
|
|
4348
|
-
"values": [
|
|
4349
|
-
|
|
5225
|
+
"values": [
|
|
5226
|
+
"3rem"
|
|
5227
|
+
],
|
|
5228
|
+
"path": "utilities/_tokens.scss"
|
|
4350
5229
|
},
|
|
4351
5230
|
{
|
|
4352
5231
|
"name": "--icon-size-xsmall",
|
|
4353
5232
|
"type": "css-custom-property",
|
|
4354
5233
|
"description": "CSS custom property: 0.75rem",
|
|
4355
|
-
"values": [
|
|
4356
|
-
|
|
5234
|
+
"values": [
|
|
5235
|
+
"0.75rem"
|
|
5236
|
+
],
|
|
5237
|
+
"path": "utilities/_tokens.scss"
|
|
4357
5238
|
},
|
|
4358
5239
|
{
|
|
4359
5240
|
"name": "--icon-size-xxlarge",
|
|
4360
5241
|
"type": "css-custom-property",
|
|
4361
5242
|
"description": "CSS custom property: 4rem",
|
|
4362
|
-
"values": [
|
|
4363
|
-
|
|
5243
|
+
"values": [
|
|
5244
|
+
"4rem"
|
|
5245
|
+
],
|
|
5246
|
+
"path": "utilities/_tokens.scss"
|
|
4364
5247
|
},
|
|
4365
5248
|
{
|
|
4366
5249
|
"name": "--input-height",
|
|
4367
5250
|
"type": "css-custom-property",
|
|
4368
|
-
"description": "CSS custom property:
|
|
4369
|
-
"values": [
|
|
4370
|
-
|
|
5251
|
+
"description": "CSS custom property: 42px",
|
|
5252
|
+
"values": [
|
|
5253
|
+
"42px"
|
|
5254
|
+
],
|
|
5255
|
+
"path": "utilities/_tokens.scss"
|
|
4371
5256
|
},
|
|
4372
5257
|
{
|
|
4373
5258
|
"name": "--layout-footer-height",
|
|
4374
5259
|
"type": "css-custom-property",
|
|
4375
5260
|
"description": "CSS custom property: 30px",
|
|
4376
|
-
"values": [
|
|
4377
|
-
|
|
5261
|
+
"values": [
|
|
5262
|
+
"30px"
|
|
5263
|
+
],
|
|
5264
|
+
"path": "utilities/_tokens.scss"
|
|
4378
5265
|
},
|
|
4379
5266
|
{
|
|
4380
5267
|
"name": "--layout-header-height",
|
|
4381
5268
|
"type": "css-custom-property",
|
|
4382
5269
|
"description": "CSS custom property: 80px",
|
|
4383
|
-
"values": [
|
|
4384
|
-
|
|
5270
|
+
"values": [
|
|
5271
|
+
"80px"
|
|
5272
|
+
],
|
|
5273
|
+
"path": "utilities/_tokens.scss"
|
|
4385
5274
|
},
|
|
4386
5275
|
{
|
|
4387
5276
|
"name": "--mat-form-field-container-height",
|
|
4388
5277
|
"type": "css-custom-property",
|
|
4389
|
-
"description": "CSS custom property:
|
|
4390
|
-
"values": [
|
|
4391
|
-
|
|
5278
|
+
"description": "CSS custom property: 42px",
|
|
5279
|
+
"values": [
|
|
5280
|
+
"42px"
|
|
5281
|
+
],
|
|
5282
|
+
"path": "overrides/_form-field.scss"
|
|
4392
5283
|
},
|
|
4393
5284
|
{
|
|
4394
5285
|
"name": "--mat-icon-button-state-layer-color",
|
|
4395
5286
|
"type": "css-custom-property",
|
|
4396
5287
|
"description": "CSS custom property: var(--mat-sys-surface)",
|
|
4397
|
-
"values": [
|
|
4398
|
-
|
|
5288
|
+
"values": [
|
|
5289
|
+
"var(--mat-sys-surface)"
|
|
5290
|
+
],
|
|
5291
|
+
"path": "overrides/_icon-button.scss"
|
|
4399
5292
|
},
|
|
4400
5293
|
{
|
|
4401
5294
|
"name": "--mat-mdc-form-field-floating-label-scale",
|
|
4402
5295
|
"type": "css-custom-property",
|
|
4403
5296
|
"description": "CSS custom property: 0.75",
|
|
4404
|
-
"values": [
|
|
4405
|
-
|
|
5297
|
+
"values": [
|
|
5298
|
+
"0.75"
|
|
5299
|
+
],
|
|
5300
|
+
"path": "overrides/_form-field.scss"
|
|
4406
5301
|
},
|
|
4407
5302
|
{
|
|
4408
5303
|
"name": "--mat-mdc-form-field-label-transform",
|
|
4409
5304
|
"type": "css-custom-property",
|
|
4410
|
-
"description": "CSS custom property: translateY(\
|
|
5305
|
+
"description": "CSS custom property: translateY(\n calc(\n ca...",
|
|
4411
5306
|
"values": [
|
|
4412
|
-
"translateY(\
|
|
5307
|
+
"translateY(\n calc(\n calc(\n 6.75px + var(--mat-form-field-container-height, 56px) / 2\n ) *\n -1.1\n )\n )\n scale(var(--mat-mdc-form-field-floating-label-scale, 0.75))"
|
|
4413
5308
|
],
|
|
4414
|
-
"path": "overrides
|
|
5309
|
+
"path": "overrides/_form-field.scss"
|
|
4415
5310
|
},
|
|
4416
5311
|
{
|
|
4417
5312
|
"name": "--mat-select-invalid-arrow-color",
|
|
4418
5313
|
"type": "css-custom-property",
|
|
4419
5314
|
"description": "CSS custom property: #{µ.error($theme, 500)}",
|
|
4420
|
-
"values": [
|
|
4421
|
-
|
|
5315
|
+
"values": [
|
|
5316
|
+
"#{µ.error($theme, 500)}"
|
|
5317
|
+
],
|
|
5318
|
+
"path": "overrides/_select.scss"
|
|
4422
5319
|
},
|
|
4423
5320
|
{
|
|
4424
5321
|
"name": "--mat-stepper-header-height",
|
|
4425
5322
|
"type": "css-custom-property",
|
|
4426
5323
|
"description": "CSS custom property: 3rem",
|
|
4427
|
-
"values": [
|
|
4428
|
-
|
|
5324
|
+
"values": [
|
|
5325
|
+
"3rem"
|
|
5326
|
+
],
|
|
5327
|
+
"path": "overrides/_stepper.scss"
|
|
4429
5328
|
},
|
|
4430
5329
|
{
|
|
4431
5330
|
"name": "--mdc-icon-button-icon-size",
|
|
4432
5331
|
"type": "css-custom-property",
|
|
4433
5332
|
"description": "CSS custom property: var(--icon-size-small)",
|
|
4434
|
-
"values": [
|
|
4435
|
-
|
|
5333
|
+
"values": [
|
|
5334
|
+
"var(--icon-size-small)"
|
|
5335
|
+
],
|
|
5336
|
+
"path": "overrides/_icon-button.scss"
|
|
4436
5337
|
},
|
|
4437
5338
|
{
|
|
4438
5339
|
"name": "--mdc-icon-button-state-layer-size",
|
|
4439
5340
|
"type": "css-custom-property",
|
|
4440
5341
|
"description": "CSS custom property: calc(var(--icon-size-small) * 1.5)",
|
|
4441
|
-
"values": [
|
|
4442
|
-
|
|
5342
|
+
"values": [
|
|
5343
|
+
"calc(var(--icon-size-small) * 1.5)"
|
|
5344
|
+
],
|
|
5345
|
+
"path": "overrides/_icon-button.scss"
|
|
4443
5346
|
},
|
|
4444
5347
|
{
|
|
4445
5348
|
"name": "--message-icon",
|
|
4446
5349
|
"type": "css-custom-property",
|
|
4447
5350
|
"description": "CSS custom property: '\\e002'",
|
|
4448
|
-
"values": [
|
|
4449
|
-
|
|
5351
|
+
"values": [
|
|
5352
|
+
"'\\e002'"
|
|
5353
|
+
],
|
|
5354
|
+
"path": "utilities/_tokens.scss"
|
|
4450
5355
|
},
|
|
4451
5356
|
{
|
|
4452
5357
|
"name": "--on-background-gradient",
|
|
4453
5358
|
"type": "css-custom-property",
|
|
4454
5359
|
"description": "CSS custom property: white",
|
|
4455
|
-
"values": [
|
|
4456
|
-
|
|
5360
|
+
"values": [
|
|
5361
|
+
"white"
|
|
5362
|
+
],
|
|
5363
|
+
"path": "utilities/_tokens.scss"
|
|
4457
5364
|
},
|
|
4458
5365
|
{
|
|
4459
5366
|
"name": "--page-size-width",
|
|
4460
5367
|
"type": "css-custom-property",
|
|
4461
5368
|
"description": "CSS custom property: 80px",
|
|
4462
|
-
"values": [
|
|
4463
|
-
|
|
5369
|
+
"values": [
|
|
5370
|
+
"80px"
|
|
5371
|
+
],
|
|
5372
|
+
"path": "utilities/_tokens.scss"
|
|
4464
5373
|
},
|
|
4465
5374
|
{
|
|
4466
5375
|
"name": "--paginator-height",
|
|
4467
5376
|
"type": "css-custom-property",
|
|
4468
5377
|
"description": "CSS custom property: 37px",
|
|
4469
|
-
"values": [
|
|
4470
|
-
|
|
5378
|
+
"values": [
|
|
5379
|
+
"37px"
|
|
5380
|
+
],
|
|
5381
|
+
"path": "utilities/_tokens.scss"
|
|
4471
5382
|
},
|
|
4472
5383
|
{
|
|
4473
5384
|
"name": "--quad-spacer",
|
|
4474
5385
|
"type": "css-custom-property",
|
|
4475
5386
|
"description": "CSS custom property: 2rem",
|
|
4476
|
-
"values": [
|
|
4477
|
-
|
|
5387
|
+
"values": [
|
|
5388
|
+
"2rem"
|
|
5389
|
+
],
|
|
5390
|
+
"path": "utilities/_tokens.scss"
|
|
4478
5391
|
},
|
|
4479
5392
|
{
|
|
4480
5393
|
"name": "--quarter-spacer",
|
|
4481
5394
|
"type": "css-custom-property",
|
|
4482
5395
|
"description": "CSS custom property: 0.125rem",
|
|
4483
|
-
"values": [
|
|
4484
|
-
|
|
5396
|
+
"values": [
|
|
5397
|
+
"0.125rem"
|
|
5398
|
+
],
|
|
5399
|
+
"path": "utilities/_tokens.scss"
|
|
4485
5400
|
},
|
|
4486
5401
|
{
|
|
4487
5402
|
"name": "--shift",
|
|
4488
5403
|
"type": "css-custom-property",
|
|
4489
5404
|
"description": "CSS custom property: -2px",
|
|
4490
|
-
"values": [
|
|
4491
|
-
|
|
5405
|
+
"values": [
|
|
5406
|
+
"-2px"
|
|
5407
|
+
],
|
|
5408
|
+
"path": "overrides/_button.scss"
|
|
4492
5409
|
},
|
|
4493
5410
|
{
|
|
4494
5411
|
"name": "--small-border-radius",
|
|
4495
5412
|
"type": "css-custom-property",
|
|
4496
5413
|
"description": "CSS custom property: 4px",
|
|
4497
|
-
"values": [
|
|
4498
|
-
|
|
5414
|
+
"values": [
|
|
5415
|
+
"4px"
|
|
5416
|
+
],
|
|
5417
|
+
"path": "utilities/_tokens.scss"
|
|
4499
5418
|
},
|
|
4500
5419
|
{
|
|
4501
5420
|
"name": "--spacer",
|
|
4502
5421
|
"type": "css-custom-property",
|
|
4503
5422
|
"description": "CSS custom property: 0.5rem",
|
|
4504
|
-
"values": [
|
|
4505
|
-
|
|
5423
|
+
"values": [
|
|
5424
|
+
"0.5rem"
|
|
5425
|
+
],
|
|
5426
|
+
"path": "utilities/_tokens.scss"
|
|
4506
5427
|
},
|
|
4507
5428
|
{
|
|
4508
5429
|
"name": "--spacer-and-half",
|
|
4509
5430
|
"type": "css-custom-property",
|
|
4510
5431
|
"description": "CSS custom property: 0.75rem",
|
|
4511
|
-
"values": [
|
|
4512
|
-
|
|
5432
|
+
"values": [
|
|
5433
|
+
"0.75rem"
|
|
5434
|
+
],
|
|
5435
|
+
"path": "utilities/_tokens.scss"
|
|
4513
5436
|
},
|
|
4514
5437
|
{
|
|
4515
5438
|
"name": "--text-font",
|
|
4516
5439
|
"type": "css-custom-property",
|
|
4517
5440
|
"description": "CSS custom property: Source Sans Pro, sans-serif",
|
|
4518
|
-
"values": [
|
|
4519
|
-
|
|
5441
|
+
"values": [
|
|
5442
|
+
"Source Sans Pro, sans-serif"
|
|
5443
|
+
],
|
|
5444
|
+
"path": "utilities/_tokens.scss"
|
|
4520
5445
|
},
|
|
4521
5446
|
{
|
|
4522
5447
|
"name": "--toc-width",
|
|
4523
5448
|
"type": "css-custom-property",
|
|
4524
5449
|
"description": "CSS custom property: 280px",
|
|
4525
|
-
"values": [
|
|
4526
|
-
|
|
5450
|
+
"values": [
|
|
5451
|
+
"280px"
|
|
5452
|
+
],
|
|
5453
|
+
"path": "utilities/_tokens.scss"
|
|
4527
5454
|
},
|
|
4528
5455
|
{
|
|
4529
5456
|
"name": "--triple-spacer",
|
|
4530
5457
|
"type": "css-custom-property",
|
|
4531
5458
|
"description": "CSS custom property: 1.5rem",
|
|
4532
|
-
"values": [
|
|
4533
|
-
|
|
5459
|
+
"values": [
|
|
5460
|
+
"1.5rem"
|
|
5461
|
+
],
|
|
5462
|
+
"path": "utilities/_tokens.scss"
|
|
4534
5463
|
},
|
|
4535
5464
|
{
|
|
4536
5465
|
"name": "@mixin animations",
|
|
4537
5466
|
"type": "mixin",
|
|
4538
5467
|
"description": "SCSS mixin with 0 parameters",
|
|
4539
5468
|
"parameters": [],
|
|
4540
|
-
"path": "utilities
|
|
5469
|
+
"path": "utilities/_animations.scss"
|
|
4541
5470
|
},
|
|
4542
5471
|
{
|
|
4543
5472
|
"name": "@mixin colrules",
|
|
4544
5473
|
"type": "mixin",
|
|
4545
5474
|
"description": "SCSS mixin with 1 parameter",
|
|
4546
|
-
"parameters": [
|
|
4547
|
-
|
|
5475
|
+
"parameters": [
|
|
5476
|
+
"$suffix: ''"
|
|
5477
|
+
],
|
|
5478
|
+
"path": "utilities/_grid.scss"
|
|
4548
5479
|
},
|
|
4549
5480
|
{
|
|
4550
5481
|
"name": "@mixin defaultSubscriptElements",
|
|
4551
5482
|
"type": "mixin",
|
|
4552
5483
|
"description": "SCSS mixin with 0 parameters",
|
|
4553
5484
|
"parameters": [],
|
|
4554
|
-
"path": "overrides
|
|
5485
|
+
"path": "overrides/_form-field.scss"
|
|
4555
5486
|
},
|
|
4556
5487
|
{
|
|
4557
5488
|
"name": "@mixin formFieldSubscript",
|
|
4558
5489
|
"type": "mixin",
|
|
4559
5490
|
"description": "SCSS mixin with 1 parameter",
|
|
4560
|
-
"parameters": [
|
|
4561
|
-
|
|
5491
|
+
"parameters": [
|
|
5492
|
+
"$type"
|
|
5493
|
+
],
|
|
5494
|
+
"path": "overrides/_form-field.scss"
|
|
4562
5495
|
},
|
|
4563
5496
|
{
|
|
4564
5497
|
"name": "@mixin gaprules",
|
|
4565
5498
|
"type": "mixin",
|
|
4566
5499
|
"description": "SCSS mixin with 2 parameters",
|
|
4567
|
-
"parameters": [
|
|
4568
|
-
|
|
5500
|
+
"parameters": [
|
|
5501
|
+
"$suffix",
|
|
5502
|
+
"$value"
|
|
5503
|
+
],
|
|
5504
|
+
"path": "utilities/_spacing.scss"
|
|
4569
5505
|
},
|
|
4570
5506
|
{
|
|
4571
5507
|
"name": "@mixin grid",
|
|
4572
5508
|
"type": "mixin",
|
|
4573
5509
|
"description": "SCSS mixin with 0 parameters",
|
|
4574
5510
|
"parameters": [],
|
|
4575
|
-
"path": "utilities
|
|
5511
|
+
"path": "utilities/_grid.scss"
|
|
4576
5512
|
},
|
|
4577
5513
|
{
|
|
4578
5514
|
"name": "@mixin high-contrast-overrides",
|
|
4579
5515
|
"type": "mixin",
|
|
4580
5516
|
"description": "SCSS mixin with 1 parameter",
|
|
4581
|
-
"parameters": [
|
|
4582
|
-
|
|
5517
|
+
"parameters": [
|
|
5518
|
+
"$theme-type"
|
|
5519
|
+
],
|
|
5520
|
+
"path": "utilities/_palettes.scss"
|
|
4583
5521
|
},
|
|
4584
5522
|
{
|
|
4585
5523
|
"name": "@mixin media",
|
|
4586
5524
|
"type": "mixin",
|
|
4587
5525
|
"description": "SCSS mixin with 3 parameters",
|
|
4588
|
-
"parameters": [
|
|
4589
|
-
|
|
5526
|
+
"parameters": [
|
|
5527
|
+
"$breakpoints",
|
|
5528
|
+
"$from",
|
|
5529
|
+
"$to: false"
|
|
5530
|
+
],
|
|
5531
|
+
"path": "utilities/_media.scss"
|
|
4590
5532
|
},
|
|
4591
5533
|
{
|
|
4592
5534
|
"name": "@mixin onemrva",
|
|
4593
5535
|
"type": "mixin",
|
|
4594
5536
|
"description": "SCSS mixin with 1 parameter",
|
|
4595
|
-
"parameters": [
|
|
5537
|
+
"parameters": [
|
|
5538
|
+
"$colorScheme: light"
|
|
5539
|
+
],
|
|
4596
5540
|
"path": "index.scss"
|
|
4597
5541
|
},
|
|
4598
5542
|
{
|
|
@@ -4600,35 +5544,40 @@
|
|
|
4600
5544
|
"type": "mixin",
|
|
4601
5545
|
"description": "SCSS mixin with 0 parameters",
|
|
4602
5546
|
"parameters": [],
|
|
4603
|
-
"path": "overrides
|
|
5547
|
+
"path": "overrides/_autocomplete.scss"
|
|
4604
5548
|
},
|
|
4605
5549
|
{
|
|
4606
5550
|
"name": "@mixin padmarrules",
|
|
4607
5551
|
"type": "mixin",
|
|
4608
5552
|
"description": "SCSS mixin with 4 parameters",
|
|
4609
|
-
"parameters": [
|
|
4610
|
-
|
|
5553
|
+
"parameters": [
|
|
5554
|
+
"$name",
|
|
5555
|
+
"$selector",
|
|
5556
|
+
"$suffix",
|
|
5557
|
+
"$value"
|
|
5558
|
+
],
|
|
5559
|
+
"path": "utilities/_spacing.scss"
|
|
4611
5560
|
},
|
|
4612
5561
|
{
|
|
4613
5562
|
"name": "@mixin spacing",
|
|
4614
5563
|
"type": "mixin",
|
|
4615
5564
|
"description": "SCSS mixin with 0 parameters",
|
|
4616
5565
|
"parameters": [],
|
|
4617
|
-
"path": "utilities
|
|
5566
|
+
"path": "utilities/_spacing.scss"
|
|
4618
5567
|
},
|
|
4619
5568
|
{
|
|
4620
5569
|
"name": "@mixin theme",
|
|
4621
5570
|
"type": "mixin",
|
|
4622
5571
|
"description": "SCSS mixin with 0 parameters",
|
|
4623
5572
|
"parameters": [],
|
|
4624
|
-
"path": "utilities
|
|
5573
|
+
"path": "utilities/_container.scss"
|
|
4625
5574
|
},
|
|
4626
5575
|
{
|
|
4627
5576
|
"name": "@mixin utilities",
|
|
4628
5577
|
"type": "mixin",
|
|
4629
5578
|
"description": "SCSS mixin with 0 parameters",
|
|
4630
5579
|
"parameters": [],
|
|
4631
|
-
"path": "utilities
|
|
5580
|
+
"path": "utilities/_utilities.scss"
|
|
4632
5581
|
},
|
|
4633
5582
|
{
|
|
4634
5583
|
"name": "palette",
|
|
@@ -4641,32 +5590,32 @@
|
|
|
4641
5590
|
"neutral",
|
|
4642
5591
|
"neutral-variant"
|
|
4643
5592
|
],
|
|
4644
|
-
"path": "palettes
|
|
5593
|
+
"path": "palettes/_palette.scss"
|
|
4645
5594
|
},
|
|
4646
5595
|
{
|
|
4647
5596
|
"name": "$_rest",
|
|
4648
5597
|
"type": "variable",
|
|
4649
|
-
"description": "SCSS variable: (\
|
|
5598
|
+
"description": "SCSS variable: (\n secondary: map.get(palette.$palette, secondary...",
|
|
4650
5599
|
"values": [
|
|
4651
|
-
"(\
|
|
5600
|
+
"(\n secondary: map.get(palette.$palette, secondary),\n neutral: map.get(palette.$palette, neutral),\n 'neutral-variant': map.get(palette.$palette, 'neutral-variant'),\n error: map.get(palette.$palette, error),\n)"
|
|
4652
5601
|
],
|
|
4653
|
-
"path": "utilities
|
|
5602
|
+
"path": "utilities/_palettes.scss"
|
|
4654
5603
|
},
|
|
4655
5604
|
{
|
|
4656
5605
|
"name": "$breakpoints",
|
|
4657
5606
|
"type": "variable",
|
|
4658
|
-
"description": "SCSS variable: (\
|
|
5607
|
+
"description": "SCSS variable: (\n xsmall: (\n max: 599.99,\n ),\n small: (\n ...",
|
|
4659
5608
|
"values": [
|
|
4660
|
-
"(\
|
|
5609
|
+
"(\n xsmall: (\n max: 599.99,\n ),\n small: (\n min: 600,\n max: 959.99,\n ),\n medium: (\n min: 960,\n max: 1279.99,\n ),\n large: (\n min: 1280,\n max: 1535.99,\n ),\n xlarge: (\n min: 1536,\n max: 1919.99,\n ),\n xxlarge: (\n min: 1920,\n ),\n)"
|
|
4661
5610
|
],
|
|
4662
|
-
"path": "utilities
|
|
5611
|
+
"path": "utilities/_variables.scss"
|
|
4663
5612
|
},
|
|
4664
5613
|
{
|
|
4665
5614
|
"name": "$colorScheme",
|
|
4666
5615
|
"type": "variable",
|
|
4667
|
-
"description": "SCSS variable: light) {\
|
|
5616
|
+
"description": "SCSS variable: light) {\n // Force light mode only\n color-scheme...",
|
|
4668
5617
|
"values": [
|
|
4669
|
-
"light) {\
|
|
5618
|
+
"light) {\n // Force light mode only\n color-scheme: light"
|
|
4670
5619
|
],
|
|
4671
5620
|
"path": "index.scss"
|
|
4672
5621
|
},
|
|
@@ -4674,105 +5623,132 @@
|
|
|
4674
5623
|
"name": "$handleSize",
|
|
4675
5624
|
"type": "variable",
|
|
4676
5625
|
"description": "SCSS variable: calc($size - 4px)",
|
|
4677
|
-
"values": [
|
|
4678
|
-
|
|
5626
|
+
"values": [
|
|
5627
|
+
"calc($size - 4px)"
|
|
5628
|
+
],
|
|
5629
|
+
"path": "overrides/_slide-toggle.scss"
|
|
4679
5630
|
},
|
|
4680
5631
|
{
|
|
4681
5632
|
"name": "$margin",
|
|
4682
5633
|
"type": "variable",
|
|
4683
5634
|
"description": "SCSS variable: 0 4px",
|
|
4684
|
-
"values": [
|
|
4685
|
-
|
|
5635
|
+
"values": [
|
|
5636
|
+
"0 4px"
|
|
5637
|
+
],
|
|
5638
|
+
"path": "overrides/_slide-toggle.scss"
|
|
4686
5639
|
},
|
|
4687
5640
|
{
|
|
4688
5641
|
"name": "$max",
|
|
4689
5642
|
"type": "variable",
|
|
4690
5643
|
"description": "SCSS variable: map.get(map.get(variables.$breakpoints, $to), max)",
|
|
4691
|
-
"values": [
|
|
4692
|
-
|
|
5644
|
+
"values": [
|
|
5645
|
+
"map.get(map.get(variables.$breakpoints, $to), max)"
|
|
5646
|
+
],
|
|
5647
|
+
"path": "utilities/_media.scss"
|
|
4693
5648
|
},
|
|
4694
5649
|
{
|
|
4695
5650
|
"name": "$min",
|
|
4696
5651
|
"type": "variable",
|
|
4697
5652
|
"description": "SCSS variable: map.get(map.get(variables.$breakpoints, $from), mi...",
|
|
4698
|
-
"values": [
|
|
4699
|
-
|
|
5653
|
+
"values": [
|
|
5654
|
+
"map.get(map.get(variables.$breakpoints, $from), min)"
|
|
5655
|
+
],
|
|
5656
|
+
"path": "utilities/_media.scss"
|
|
4700
5657
|
},
|
|
4701
5658
|
{
|
|
4702
5659
|
"name": "$name",
|
|
4703
5660
|
"type": "variable",
|
|
4704
|
-
"description": "SCSS variable: 'margin',\
|
|
5661
|
+
"description": "SCSS variable: 'margin',\n $selector: 'm',\n $suf...",
|
|
4705
5662
|
"values": [
|
|
4706
|
-
"'margin',\
|
|
5663
|
+
"'margin',\n $selector: 'm',\n $suffix: $sfx,\n $value: list.nth($spacer, 2)\n )"
|
|
4707
5664
|
],
|
|
4708
|
-
"path": "utilities
|
|
5665
|
+
"path": "utilities/_spacing.scss"
|
|
4709
5666
|
},
|
|
4710
5667
|
{
|
|
4711
5668
|
"name": "$palette",
|
|
4712
5669
|
"type": "variable",
|
|
4713
|
-
"description": "SCSS variable: (\
|
|
5670
|
+
"description": "SCSS variable: (\n primary: (\n 0: #000000,\n 10: #180e54,\n ...",
|
|
4714
5671
|
"values": [
|
|
4715
|
-
"(\
|
|
5672
|
+
"(\n primary: (\n 0: #000000,\n 10: #180e54,\n 20: #2d2669,\n 25: #383275,\n 30: #443e81,\n 35: #504a8d,\n 40: #625d9c,\n // 6e68ae is not accessible if not on white\n // 600 5e5994\n 50: #756fb5,\n 60: #8f88d1,\n 70: #a9a3ee,\n 80: #c6c0ff,\n 90: #f1f0fc,\n 95: #f3eeff,\n 98: #fcf8ff,\n 99: #fffbff,\n 100: #ffffff,\n ),\n secondary: (\n 0: #000000,\n 5: #100f1d,\n 10: #1b1a28,\n 15: #262432,\n 20: #302f3d,\n 25: #3b3a49,\n 30: #474555,\n 35: #535161,\n 40: #5f5c6d,\n 50: #787586,\n 60: #928fa0,\n 70: #aca9bb,\n 80: #c8c4d7,\n 90: #e4e0f4,\n 95: #f3eeff,\n 98: #fcf8ff,\n 99: #fffbff,\n 100: #ffffff,\n ),\n\n tertiary: (\n 0: #000000,\n 10: #610047,\n 20: #7e024a,\n 25: #a80e4f,\n 30: #c40149,\n 35: #d20a5c,\n 40: #eb142a,\n 50: #de2174,\n 60: #fb6889,\n 70: #fa7ca0,\n 80: #fb95ad,\n 90: #fcedf9,\n 95: #fcedfc,\n 98: #fcedf4,\n 99: #fff6fa,\n 100: #ffffff,\n ),\n neutral: (\n 0: #000000,\n 4: #0e0e0e,\n 6: #161616,\n 10: #242424,\n 12: #282829,\n 17: #343334,\n 20: #3a3a3b,\n 22: #3f3e40,\n 24: #444244,\n 25: #464446,\n 30: #514f52,\n 35: #5c5a5e,\n 40: #686569,\n 50: #7e7a80,\n 60: #949097,\n 70: #aba6ae,\n 80: #c2bbc5,\n 87: #d1cbd5,\n 90: #d8d1dc,\n // --mat-sys-surface-container-highest\n 92: #ece6f0,\n // --mat-sys-surface-container-high\n 94: #f3edf7,\n // --mat-sys-surface-container\n 95: #f5f0f8,\n // --mat-sys-inverse-on-surface\n 96: #f7f2fa,\n // --mat-sys-surface-container-low\n 98: #ffffff,\n // --mat-sys-surface & --mat-sys-surface-bright\n 99: #ffffff,\n // --mat-sys-surface-container-lowest\n 100: #ffffff,\n // --mat-sys-surface-container-lowest\n ),\n neutral-variant: (\n 0: #000000,\n 5: #111016,\n 10: #1c1b21,\n 15: #26252b,\n 20: #313036,\n 25: #3c3a41,\n 30: #47464d,\n 35: #535158,\n 40: #5f5d65,\n 50: #78767d,\n 60: #928f97,\n 70: #adaab2,\n 80: #d7d5ed,\n 90: #e5e1e9,\n 95: #f3eff8,\n 98: #fcf8ff,\n 99: #fffbff,\n 100: #ffffff,\n ),\n error: (\n 0: #000000,\n 10: #4c0e08,\n 20: #7f1b11,\n 25: #992216,\n 30: #b3291a,\n 35: #bc2411,\n 40: #bf2600,\n // fixed\n 50: #cc4d2e,\n 60: #d9755c,\n 70: #e59c8a,\n 80: #f2c4b7,\n 90: #ffebe6,\n // fixed\n 95: #fff1ec,\n 98: #fff7f5,\n 99: #fffcfa,\n 100: #ffffff,\n // fixed\n ),\n info: (\n 0: #000000,\n 10: #0e006a,\n 20: #1c00a6,\n 25: #2300c6,\n 30: #301ed3,\n 35: #3e32de,\n 40: #463ce5,\n 50: #6159ea,\n 60: #7b75ef,\n 70: #9a96f5,\n 80: #bab7f9,\n 90: #e0e0fc,\n 95: #eae9fe,\n 98: #f5f4ff,\n 99: #fbfaff,\n 100: #ffffff,\n ),\n warn: (\n 0: #000000,\n 10: #401a01,\n 20: #7f3402,\n 25: #9f4102,\n 30: #bf4e03,\n // fixed\n 35: #c14e02,\n 40: #c75300,\n // fixed\n 50: #dc7520,\n 60: #f09740,\n 70: #f9ba70,\n 80: #fbdcb0,\n 90: #fff4eb,\n // fixed\n 95: #fff7f1,\n 98: #fffaf7,\n 99: #fffcfa,\n 100: #ffffff,\n ),\n success: (\n 0: #000000,\n 10: #002110,\n 20: #00391f,\n 25: #004527,\n 30: #00522f,\n 35: #005f37,\n 40: #328154,\n // moved from 50 to 40\n 50: #5cb280,\n 60: #72c092,\n 70: #88cfa5,\n 80: #9eddb7,\n 90: #ebfff4,\n // replaced previous bright green with this\n 95: #f3fff8,\n 98: #f8fffa,\n 99: #fbfffd,\n 100: #ffffff,\n ),\n)"
|
|
4716
5673
|
],
|
|
4717
|
-
"path": "palettes
|
|
5674
|
+
"path": "palettes/_palette.scss"
|
|
4718
5675
|
},
|
|
4719
5676
|
{
|
|
4720
5677
|
"name": "$sfx",
|
|
4721
5678
|
"type": "variable",
|
|
4722
5679
|
"description": "SCSS variable: -#{list.nth($breakpoint, 1)}",
|
|
4723
|
-
"values": [
|
|
4724
|
-
|
|
5680
|
+
"values": [
|
|
5681
|
+
"-#{list.nth($breakpoint, 1)}"
|
|
5682
|
+
],
|
|
5683
|
+
"path": "utilities/_grid.scss"
|
|
4725
5684
|
},
|
|
4726
5685
|
{
|
|
4727
5686
|
"name": "$size",
|
|
4728
5687
|
"type": "variable",
|
|
4729
5688
|
"description": "SCSS variable: 24px",
|
|
4730
|
-
"values": [
|
|
4731
|
-
|
|
5689
|
+
"values": [
|
|
5690
|
+
"24px"
|
|
5691
|
+
],
|
|
5692
|
+
"path": "overrides/_slide-toggle.scss"
|
|
4732
5693
|
},
|
|
4733
5694
|
{
|
|
4734
5695
|
"name": "$spacer",
|
|
4735
5696
|
"type": "variable",
|
|
4736
5697
|
"description": "SCSS variable: 8px !default",
|
|
4737
|
-
"values": [
|
|
4738
|
-
|
|
5698
|
+
"values": [
|
|
5699
|
+
"8px !default"
|
|
5700
|
+
],
|
|
5701
|
+
"path": "utilities/_variables.scss"
|
|
4739
5702
|
},
|
|
4740
5703
|
{
|
|
4741
5704
|
"name": "$spacers",
|
|
4742
5705
|
"type": "variable",
|
|
4743
|
-
"description": "SCSS variable: '-0' 0,\
|
|
5706
|
+
"description": "SCSS variable: '-0' 0,\n '-2xs' $spacer * 0.25,\n '-xs' $spacer *...",
|
|
4744
5707
|
"values": [
|
|
4745
|
-
"'-0' 0,\
|
|
5708
|
+
"'-0' 0,\n '-2xs' $spacer * 0.25,\n '-xs' $spacer * 0.5,\n '-s' $spacer,\n '' $spacer,\n '-m' $spacer * 2,\n '-l' $spacer * 3,\n '-xl' $spacer * 4,\n '-2xl' $spacer * 5,\n '-3xl' $spacer * 7,\n '-auto' 'auto'"
|
|
4746
5709
|
],
|
|
4747
|
-
"path": "utilities
|
|
5710
|
+
"path": "utilities/_variables.scss"
|
|
4748
5711
|
},
|
|
4749
5712
|
{
|
|
4750
5713
|
"name": "$suffix",
|
|
4751
5714
|
"type": "variable",
|
|
4752
|
-
"description": "SCSS variable: '') {\
|
|
4753
|
-
"values": [
|
|
4754
|
-
|
|
5715
|
+
"description": "SCSS variable: '') {\n @for $i from 0 through 12 {\n $width: 0",
|
|
5716
|
+
"values": [
|
|
5717
|
+
"'') {\n @for $i from 0 through 12 {\n $width: 0"
|
|
5718
|
+
],
|
|
5719
|
+
"path": "utilities/_grid.scss"
|
|
4755
5720
|
},
|
|
4756
5721
|
{
|
|
4757
5722
|
"name": "$to",
|
|
4758
5723
|
"type": "variable",
|
|
4759
|
-
"description": "SCSS variable: false) {\
|
|
4760
|
-
"values": [
|
|
4761
|
-
|
|
5724
|
+
"description": "SCSS variable: false) {\n $min: false",
|
|
5725
|
+
"values": [
|
|
5726
|
+
"false) {\n $min: false"
|
|
5727
|
+
],
|
|
5728
|
+
"path": "utilities/_media.scss"
|
|
4762
5729
|
},
|
|
4763
5730
|
{
|
|
4764
5731
|
"name": "$width",
|
|
4765
5732
|
"type": "variable",
|
|
4766
5733
|
"description": "SCSS variable: calc(100 / 12) * $i",
|
|
4767
|
-
"values": [
|
|
4768
|
-
|
|
5734
|
+
"values": [
|
|
5735
|
+
"calc(100 / 12) * $i"
|
|
5736
|
+
],
|
|
5737
|
+
"path": "utilities/_grid.scss"
|
|
4769
5738
|
},
|
|
4770
5739
|
{
|
|
4771
5740
|
"name": "breakpoints",
|
|
4772
5741
|
"type": "variable",
|
|
4773
5742
|
"description": "Responsive breakpoint definitions",
|
|
4774
|
-
"values": [
|
|
4775
|
-
|
|
5743
|
+
"values": [
|
|
5744
|
+
"xsmall",
|
|
5745
|
+
"small",
|
|
5746
|
+
"medium",
|
|
5747
|
+
"large",
|
|
5748
|
+
"xlarge",
|
|
5749
|
+
"xxlarge"
|
|
5750
|
+
],
|
|
5751
|
+
"path": "utilities/_variables.scss"
|
|
4776
5752
|
},
|
|
4777
5753
|
{
|
|
4778
5754
|
"name": "spacers",
|
|
@@ -4790,20 +5766,20 @@
|
|
|
4790
5766
|
"-3xl",
|
|
4791
5767
|
"-auto"
|
|
4792
5768
|
],
|
|
4793
|
-
"path": "utilities
|
|
5769
|
+
"path": "utilities/_variables.scss"
|
|
4794
5770
|
}
|
|
4795
5771
|
],
|
|
4796
5772
|
"stats": {
|
|
4797
|
-
"total":
|
|
4798
|
-
"standalone":
|
|
5773
|
+
"total": 73,
|
|
5774
|
+
"standalone": 72,
|
|
4799
5775
|
"deprecated": 0,
|
|
4800
5776
|
"withTests": 0,
|
|
4801
5777
|
"categories": {
|
|
4802
|
-
"Utilities":
|
|
5778
|
+
"Utilities": 3,
|
|
4803
5779
|
"Flag Components": 1,
|
|
4804
5780
|
"Layout Components": 14,
|
|
4805
|
-
"Material Components":
|
|
5781
|
+
"Material Components": 49,
|
|
4806
5782
|
"Page Components": 6
|
|
4807
5783
|
}
|
|
4808
5784
|
}
|
|
4809
|
-
}
|
|
5785
|
+
}
|