@nova-design-system/nova-webcomponents 3.0.0-beta.42 → 3.0.0-beta.43

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.
@@ -1,4570 +0,0 @@
1
- {
2
- "version": 1.1,
3
- "tags": [
4
- {
5
- "name": "nv-alert",
6
- "description": {
7
- "kind": "markdown",
8
- "value": "The `nv-alert` component is designed to display important messages succinctly while drawing attention to actions that users may need to take. Alerts serve as a visual prompt that can either be dismissed or interacted with, depending on the content and context provided. Alerts are styled as vibrant-colored blocks that catch the eye, ensuring that important information is not overlooked. These alerts persist on the screen until the user takes action to resolve the message or opts to dismiss it, making them a staple in user interfaces for immediate communication."
9
- },
10
- "attributes": [
11
- {
12
- "name": "color",
13
- "description": "Defines color of the alert.",
14
- "values": [
15
- {
16
- "name": "error"
17
- },
18
- {
19
- "name": "neutral"
20
- },
21
- {
22
- "name": "primary"
23
- },
24
- {
25
- "name": "secondary"
26
- },
27
- {
28
- "name": "success"
29
- }
30
- ]
31
- },
32
- {
33
- "name": "dismissible",
34
- "description": "Allows the alert to be dismissed via a close button (x). The alert is not\ndismissible unless explicitly enabled."
35
- },
36
- {
37
- "name": "feedback",
38
- "description": "Specifies the alert type which determines the color and default icon.",
39
- "values": [
40
- {
41
- "name": "error"
42
- },
43
- {
44
- "name": "information"
45
- },
46
- {
47
- "name": "neutral"
48
- },
49
- {
50
- "name": "success"
51
- },
52
- {
53
- "name": "warning"
54
- }
55
- ]
56
- },
57
- {
58
- "name": "has-no-animations",
59
- "description": "When true, the alert will not animate when it is hidden or shown."
60
- },
61
- {
62
- "name": "heading",
63
- "description": "Short and concise text for the alert title."
64
- },
65
- {
66
- "name": "hidden",
67
- "description": "Controls the visibility of the alert. Will animate with fade and collapse."
68
- },
69
- {
70
- "name": "icon",
71
- "description": "Icon associated with the alert, defaults vary based on the feedback type."
72
- },
73
- {
74
- "name": "message",
75
- "description": "Main content of the alert. For more complex content, use the default slot\ninstead."
76
- },
77
- {
78
- "name": "prevent-auto-close",
79
- "description": "When true, the alert does not automatically close upon dismissing.\nUseful for externally controlled component behavior."
80
- }
81
- ]
82
- },
83
- {
84
- "name": "nv-avatar",
85
- "description": {
86
- "kind": "markdown",
87
- "value": "The `nv-avatar` component is designed to display user profile pictures, initials, or icons within a circular, square, or rounded container. It can be customized with different colors and comes in five sizes: extra small, small, medium, large, and extra-large. The default shape is circular, but it can be adjusted to square or rounded as needed."
88
- },
89
- "attributes": [
90
- {
91
- "name": "alt",
92
- "description": "If and image is provided, add an alt tag to describe it."
93
- },
94
- {
95
- "name": "color",
96
- "description": "You can apply different colors on the Avatar.\nUse a string number between 1 and 10."
97
- },
98
- {
99
- "name": "initials",
100
- "description": "Initials of the avatar. Usually use two letters\nWhen filled with the src parameter, the text will not be rendered."
101
- },
102
- {
103
- "name": "large",
104
- "description": "Set size to Large to the avatar."
105
- },
106
- {
107
- "name": "medium",
108
- "description": "Set size to Medium to the avatar."
109
- },
110
- {
111
- "name": "size",
112
- "description": "Define the size of the avatar. You can use t-shirt sizes.",
113
- "values": [
114
- {
115
- "name": "lg"
116
- },
117
- {
118
- "name": "md"
119
- },
120
- {
121
- "name": "sm"
122
- },
123
- {
124
- "name": "xl"
125
- },
126
- {
127
- "name": "xs"
128
- }
129
- ]
130
- },
131
- {
132
- "name": "small",
133
- "description": "Set size to Small to the avatar."
134
- },
135
- {
136
- "name": "src",
137
- "description": "Will insert an image into the avatar."
138
- },
139
- {
140
- "name": "text",
141
- "description": "Set initials to the avatar."
142
- },
143
- {
144
- "name": "url",
145
- "description": "Set src to the avatar."
146
- },
147
- {
148
- "name": "xlarge",
149
- "description": "Set size to ExtraLarge to the avatar."
150
- },
151
- {
152
- "name": "xsmall",
153
- "description": "Set size to ExtraSmall to the avatar."
154
- }
155
- ]
156
- },
157
- {
158
- "name": "nv-badge",
159
- "description": {
160
- "kind": "markdown",
161
- "value": "Badges are used to inform users of the status of an object or an action that has been taken. Use badges to label, categorize, or organize items using keywords that describe them."
162
- },
163
- "attributes": [
164
- {
165
- "name": "color",
166
- "description": "The color of the badge. Use a string between 1 to 10"
167
- },
168
- {
169
- "name": "dismissal",
170
- "description": "Whether the badge is dismissible."
171
- },
172
- {
173
- "name": "dismissible",
174
- "description": "Whether the badge is dismissible."
175
- },
176
- {
177
- "name": "hidden",
178
- "description": "Controls the visibility of the badge. Will animate with fade and collapse."
179
- },
180
- {
181
- "name": "icon",
182
- "description": "The icon to display in the badge."
183
- },
184
- {
185
- "name": "icon-location",
186
- "description": "The location of the icon in the badge.",
187
- "values": [
188
- {
189
- "name": "left"
190
- },
191
- {
192
- "name": "right"
193
- }
194
- ]
195
- },
196
- {
197
- "name": "label",
198
- "description": "Main content of the badge."
199
- },
200
- {
201
- "name": "lead-icon",
202
- "description": "The lead icon of the badge."
203
- },
204
- {
205
- "name": "prevent-auto-close",
206
- "description": "When true, the alert does not automatically close upon dismissing.\nUseful for externally controlled component behavior."
207
- }
208
- ]
209
- },
210
- {
211
- "name": "nv-base",
212
- "description": {
213
- "kind": "markdown",
214
- "value": "This is the base component for v2 and serves as the foundational component for all Nova components. It provides the basic structure for Nova components and should be used as the base for creating other components. This component should not be used directly in the application."
215
- },
216
- "attributes": []
217
- },
218
- {
219
- "name": "nv-breadcrumb",
220
- "description": {
221
- "kind": "markdown",
222
- "value": "The nv-breadcrumb component is designed to be used exclusively as a child of the nv-breadcrumbs component. For a comprehensive overview of how to configure and use the breadcrumb system, please refer to the nv-breadcrumbs documentation."
223
- },
224
- "attributes": [
225
- {
226
- "name": "current",
227
- "description": "Use this to highlight the breadcrumb as the current page in your\nnavigation. It also makes the page clearer to screen readers with\naria-current=\"location\"."
228
- },
229
- {
230
- "name": "tooltip",
231
- "description": "Add an optional tooltip to provide extra information about the breadcrumb."
232
- },
233
- {
234
- "name": "type",
235
- "description": "The type of the breadcrumb. Use 'collapsed' to house multiple breadcrumbs\nin a dropdown. Use default for a single item. When passing multiple items\nas collapsed, make sure to wrap you links in list tags",
236
- "values": [
237
- {
238
- "name": "collapsed"
239
- },
240
- {
241
- "name": "default"
242
- }
243
- ]
244
- }
245
- ]
246
- },
247
- {
248
- "name": "nv-breadcrumbs",
249
- "description": {
250
- "kind": "markdown",
251
- "value": "The Breadcrumbs component displays navigation paths in a structured and accessible format. It supports tooltips and collapsible menus for flexible navigation. Designed with accessibility in mind, it includes proper ARIA roles and attributes to ensure usability for all users.\n\n**Rules for Implementation**\n\nTo maintain consistency across projects, follow these guidelines:\n\n1. **Visually Hidden Last Breadcrumb**\n - The last breadcrumb in the navigation path must be defined in the code but visually hidden using the `current` attribute.\n - This prevents visual redundancy when a page header already contains the same content while ensuring screen readers can still access the information.\n\n2. **Breadcrumb Limit and Collapsible Menu**\n - Only **three breadcrumbs** should be rendered at a time.\n - If more breadcrumbs are needed, use a collapsible menu in the middle to handle additional items.\n\n3. **Integration-Side Implementation**\n - Since links must be passed as slots and each framework has its own routing system, the logic for collapsing breadcrumbs cannot be handled automatically.\n - Automatically generating a collapsible menu within the component could interfere with navigation behavior in different frameworks.\n\n4. **Consistency Across Projects**\n - Adhering to these rules ensures a uniform experience and functionality across multiple integrations.\n - Refer to the **Storybook** examples for proper implementation and best practices."
252
- },
253
- "attributes": []
254
- },
255
- {
256
- "name": "nv-button",
257
- "description": {
258
- "kind": "markdown",
259
- "value": "The Button component enhances standard HTML buttons with Nova Design styling and extended functionality. It offers customizable visual emphasis, distinct styling for destructive actions, and built-in accessibility. \n\nThis component allows developers to guide user attention effectively, providing a unified approach to action triggers across your application."
260
- },
261
- "attributes": [
262
- {
263
- "name": "active",
264
- "description": "Use this prop to highlight the button when it represents the current page\nor active selection. This helps users understand their navigation context."
265
- },
266
- {
267
- "name": "danger",
268
- "description": "Applies styling that visually indicates the button represents a dangerous\naction."
269
- },
270
- {
271
- "name": "disabled",
272
- "description": "Disables the button, preventing user interaction."
273
- },
274
- {
275
- "name": "emphasis",
276
- "description": "Adjusts the button's emphasis to make it more or less visually prominent\nto users. Use this to draw attention to important actions or reduce focus\non less critical ones",
277
- "values": [
278
- {
279
- "name": "high"
280
- },
281
- {
282
- "name": "low"
283
- },
284
- {
285
- "name": "lower"
286
- },
287
- {
288
- "name": "medium"
289
- }
290
- ]
291
- },
292
- {
293
- "name": "fluid",
294
- "description": "Allows the button to stretch and fill the entire width of its container."
295
- },
296
- {
297
- "name": "form",
298
- "description": "Sets the form associated with the button in case the (submit) button is not a child of a form.\nMatches the native HTML button 'form' attribute behavior."
299
- },
300
- {
301
- "name": "loading",
302
- "description": "Set this to true to show a spinner on the button, letting users know that\ntheir action is being processed. It helps improve user experience by\nindicating ongoing activities."
303
- },
304
- {
305
- "name": "size",
306
- "description": "Determines how large or small the button appears, allowing for\ncustomization of the button's dimensions to fit different design\nspecifications and user needs.",
307
- "values": [
308
- {
309
- "name": "lg"
310
- },
311
- {
312
- "name": "md"
313
- },
314
- {
315
- "name": "sm"
316
- },
317
- {
318
- "name": "xs"
319
- }
320
- ]
321
- },
322
- {
323
- "name": "type",
324
- "description": "Sets the button type to control its function in forms. Use 'submit' to send\nform data, 'reset' to clear the form, or 'button' for a standard button\nthat doesn't interact with form submission by default.",
325
- "values": [
326
- {
327
- "name": "button"
328
- },
329
- {
330
- "name": "reset"
331
- },
332
- {
333
- "name": "submit"
334
- }
335
- ]
336
- }
337
- ]
338
- },
339
- {
340
- "name": "nv-calendar",
341
- "description": {
342
- "kind": "markdown",
343
- "value": "The `<nv-calendar>` component supports a wide range of date formats to accommodate various use cases, including international standards, regional conventions, and platform-specific formats."
344
- },
345
- "attributes": [
346
- {
347
- "name": "date-format",
348
- "description": "Date format (ex: 'YYYY-MM-DD', 'DD-MM-YYYY', etc.)"
349
- },
350
- {
351
- "name": "disabled-dates",
352
- "description": "Disabled dates (ISO string array)"
353
- },
354
- {
355
- "name": "first-day-of-week",
356
- "description": "First day of the week (0 = Sunday, 1 = Monday, etc.)"
357
- },
358
- {
359
- "name": "locale",
360
- "description": "Locale for date formatting"
361
- },
362
- {
363
- "name": "max",
364
- "description": "Maximum date for selection (ISO string format, ex: \"2025-12-31\")"
365
- },
366
- {
367
- "name": "min",
368
- "description": "Minimum date for selection (ISO string format, ex: \"2025-01-01\")"
369
- },
370
- {
371
- "name": "number-of-calendars",
372
- "description": "Number of calendars to display"
373
- },
374
- {
375
- "name": "range-value",
376
- "description": "Selected date range\nformat: { start: ISO string, end: ISO string }\nex: { start: \"2025-03-15\", end: \"2025-03-20\" }"
377
- },
378
- {
379
- "name": "selection-type",
380
- "description": "Selection type (single date or date range)",
381
- "values": [
382
- {
383
- "name": "range"
384
- },
385
- {
386
- "name": "single"
387
- }
388
- ]
389
- },
390
- {
391
- "name": "shortcuts",
392
- "description": "Custom actions to display in the footer\nJSON array of objects with the following properties:\n- label: string\n- onClick: function"
393
- },
394
- {
395
- "name": "shortcuts-placement",
396
- "description": "Footer placement",
397
- "values": [
398
- {
399
- "name": "bottom"
400
- },
401
- {
402
- "name": "left"
403
- },
404
- {
405
- "name": "right"
406
- }
407
- ]
408
- },
409
- {
410
- "name": "show-actions",
411
- "description": "Show action buttons"
412
- },
413
- {
414
- "name": "show-week-numbers",
415
- "description": "Show week numbers"
416
- },
417
- {
418
- "name": "single-value",
419
- "description": "Selected date (ISO string format)\nex: \"2025-03-15\""
420
- }
421
- ]
422
- },
423
- {
424
- "name": "nv-col",
425
- "description": {
426
- "kind": "markdown",
427
- "value": "The `nv-col` component is used within an `nv-row` component. It allows for the creation of flexible, responsive layouts by dividing the available space into columns. The component operates on a grid system based on 12 equal parts, meaning you can specify how many of these 12 parts a particular column should span."
428
- },
429
- "attributes": [
430
- {
431
- "name": "size",
432
- "description": "Defines the column size based on a 12 column grid system."
433
- }
434
- ]
435
- },
436
- {
437
- "name": "nv-datagrid",
438
- "description": {
439
- "kind": "markdown",
440
- "value": "A flexible data grid component powered by `@tanstack/table-core`."
441
- },
442
- "attributes": [
443
- {
444
- "name": "columns-json",
445
- "description": "The columns to display in the data grid.\nIt can be passed directly as an array of objects or as a JSON string.\nIf both `columns` and `columnsJson` are provided, `columns` takes precedence."
446
- },
447
- {
448
- "name": "data-json",
449
- "description": "The data to display in the data grid.\nIt can be passed directly as an array of objects or as a JSON string.\nIf both `data` and `dataJson` are provided, `data` takes precedence."
450
- },
451
- {
452
- "name": "enable-global-filter",
453
- "description": "Whether to enable global filtering for the data grid.\nThis allows users to search across all columns for a specific value.\nThe search is case-insensitive and supports partial matches.\nIt use string.includes() to match the search term."
454
- },
455
- {
456
- "name": "fallback-value",
457
- "description": "Fallback value to be displayed when data is not available"
458
- },
459
- {
460
- "name": "no-columns-no-data-message",
461
- "description": "The message to display when there are no columns or data available."
462
- },
463
- {
464
- "name": "no-data-message",
465
- "description": "The message to display when there is no data available."
466
- }
467
- ]
468
- },
469
- {
470
- "name": "nv-datagridcolumn",
471
- "description": {
472
- "kind": "markdown",
473
- "value": "A helper component to decompose the column from the datagrid"
474
- },
475
- "attributes": [
476
- {
477
- "name": "accessor",
478
- "description": "Defines the accessor of the column."
479
- },
480
- {
481
- "name": "header",
482
- "description": "Defines the header of the column."
483
- }
484
- ]
485
- },
486
- {
487
- "name": "nv-dialog",
488
- "description": {
489
- "kind": "markdown",
490
- "value": "The `nv-dialog` component is a modal dialog that can be used to display content in a full-screen overlay."
491
- },
492
- "attributes": [
493
- {
494
- "name": "click-outside",
495
- "description": "If true, the dialog will be closed when the backdrop is clicked."
496
- },
497
- {
498
- "name": "controlled",
499
- "description": "If true, the dialog visibility is managed manually through methods or the open prop."
500
- },
501
- {
502
- "name": "full",
503
- "description": "If true, the dialog takes full width styling."
504
- },
505
- {
506
- "name": "open",
507
- "description": "Use this prop to toggle the visibility of the dialog. Set to true to show\nthe dialog and false to hide it."
508
- },
509
- {
510
- "name": "undismissable",
511
- "description": "If true, the dialog cannot be closed by the user."
512
- }
513
- ]
514
- },
515
- {
516
- "name": "nv-dialogfooter",
517
- "description": {
518
- "kind": "markdown",
519
- "value": "Default footer for the dialog component."
520
- },
521
- "attributes": [
522
- {
523
- "name": "cancel-label",
524
- "description": "Sets the label for the cancel button."
525
- },
526
- {
527
- "name": "danger",
528
- "description": "Sets the danger state for the primary button."
529
- },
530
- {
531
- "name": "disabled",
532
- "description": "Disables the primary button, preventing user interaction."
533
- },
534
- {
535
- "name": "form",
536
- "description": "Sets the form for the dialog footer."
537
- },
538
- {
539
- "name": "leading-icon",
540
- "description": "Sets the leading icon for the primary button."
541
- },
542
- {
543
- "name": "primary-button-type",
544
- "description": "Sets the type of the primary button.",
545
- "values": [
546
- {
547
- "name": "button"
548
- },
549
- {
550
- "name": "reset"
551
- },
552
- {
553
- "name": "submit"
554
- }
555
- ]
556
- },
557
- {
558
- "name": "primary-label",
559
- "description": "Sets the label for the primary button."
560
- },
561
- {
562
- "name": "trailing-icon",
563
- "description": "Sets the trailing icon for the primary button."
564
- },
565
- {
566
- "name": "undismissable",
567
- "description": "Controls the visibility of the cancel button. When true, the cancel button is\nhidden."
568
- }
569
- ]
570
- },
571
- {
572
- "name": "nv-dialogheader",
573
- "description": {
574
- "kind": "markdown",
575
- "value": "Default header for the dialog component."
576
- },
577
- "attributes": [
578
- {
579
- "name": "heading",
580
- "description": "Sets the heading text for the dialog."
581
- },
582
- {
583
- "name": "subheading",
584
- "description": "Sets the subheading text for the dialog."
585
- }
586
- ]
587
- },
588
- {
589
- "name": "nv-fieldcheckbox",
590
- "description": {
591
- "kind": "markdown",
592
- "value": "The checkbox component is a simple and essential element of user interfaces. It allows users to select one or more options from a list. Each checkbox can be activated or deactivated with a single click, changing its appearance from empty to checked, and vice versa. This clear visual system helps users easily understand which options are selected. Checkboxes are often used in forms to enable users to personalize their choices in an intuitive and flexible way."
593
- },
594
- "attributes": [
595
- {
596
- "name": "autofocus",
597
- "description": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on an <input>\nelement."
598
- },
599
- {
600
- "name": "checked",
601
- "description": "Indicates whether the checkbox is checked or not."
602
- },
603
- {
604
- "name": "description",
605
- "description": "A description providing additional context or information about the\ncheckbox."
606
- },
607
- {
608
- "name": "disabled",
609
- "description": "Disables the checkbox, preventing user interaction."
610
- },
611
- {
612
- "name": "error",
613
- "description": "Signals that there is an error associated with the checkbox, which can\ntrigger visual cues."
614
- },
615
- {
616
- "name": "error-description",
617
- "description": "A description that appears when there is an error related to the checkbox."
618
- },
619
- {
620
- "name": "hide-label",
621
- "description": "Hides the label visually while still keeping it available for screen\nreaders."
622
- },
623
- {
624
- "name": "indeterminate",
625
- "description": "Indicates whether the checkbox is in an indeterminate state, typically used\nfor hierarchical checkboxes."
626
- },
627
- {
628
- "name": "input-id",
629
- "description": "Sets the ID for the radio button’s input element and the for attribute of\nthe associated label. If no ID is provided, a random one will be\nautomatically generated to ensure unique identification, facilitating\nproper label association and accessibility."
630
- },
631
- {
632
- "name": "label",
633
- "description": "The label displayed next to the checkbox."
634
- },
635
- {
636
- "name": "label-before",
637
- "description": "When true, the label will be placed before the checkbox."
638
- },
639
- {
640
- "name": "label-placement",
641
- "description": "Determines the position of the label relative to the checkbox, either\n'start' (before) or 'end' (after).",
642
- "values": [
643
- {
644
- "name": "after"
645
- },
646
- {
647
- "name": "before"
648
- }
649
- ]
650
- },
651
- {
652
- "name": "message",
653
- "description": "Message define a 'hint ' message for the Field."
654
- },
655
- {
656
- "name": "name",
657
- "description": "The name attribute for the checkbox input, used to reference the form data\nafter submission."
658
- },
659
- {
660
- "name": "readonly",
661
- "description": "Sets the checkbox to read-only, preventing user changes but still allowing\nfocus and selection of text."
662
- },
663
- {
664
- "name": "required",
665
- "description": "Marks the checkbox as required, indicating that it must be checked for\nform submission."
666
- },
667
- {
668
- "name": "validation",
669
- "description": "The text for the validation message."
670
- },
671
- {
672
- "name": "value",
673
- "description": "The value attribute of the checkbox input, representing the value sent on\nform submission when the checkbox is checked. When the form is submitted,\nthe data will consist of a name=value pair."
674
- }
675
- ]
676
- },
677
- {
678
- "name": "nv-fielddate",
679
- "description": {
680
- "kind": "markdown",
681
- "value": "The nv-fielddate component provides a single-date picker interface. It includes an input with a date mask, a popover-driven calendar, and built-in accessibility features. Users can type a date directly in the input or select it from the calendar, and the component automatically keeps the two in sync. This makes nv-fielddate a flexible, user-friendly solution for date inputs in web forms, with support for custom labels, descriptions, and error messaging."
682
- },
683
- "attributes": [
684
- {
685
- "name": "autofocus",
686
- "description": "Autofocus the input when the component is mounted."
687
- },
688
- {
689
- "name": "date-format",
690
- "description": "Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc."
691
- },
692
- {
693
- "name": "description",
694
- "description": "Description displayed below the input. A slot description can override this prop."
695
- },
696
- {
697
- "name": "disabled",
698
- "description": "Disables the input field."
699
- },
700
- {
701
- "name": "disabled-dates",
702
- "description": "Disabled dates ISO string array"
703
- },
704
- {
705
- "name": "error",
706
- "description": "Indicates an error state."
707
- },
708
- {
709
- "name": "error-description",
710
- "description": "Error description. A slot error-description can override this prop."
711
- },
712
- {
713
- "name": "first-day-of-week",
714
- "description": "First day of the week 0 = Sunday, 1 = Monday, etc."
715
- },
716
- {
717
- "name": "input-id",
718
- "description": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated."
719
- },
720
- {
721
- "name": "label",
722
- "description": "Text displayed as label. A slot label can override this prop."
723
- },
724
- {
725
- "name": "locale",
726
- "description": "Locale for date formatting"
727
- },
728
- {
729
- "name": "max",
730
- "description": "Maximum date for selection ISO string format, ex: 2025-12-31"
731
- },
732
- {
733
- "name": "min",
734
- "description": "Minimum date for selection ISO string format, ex: 2025-01-01"
735
- },
736
- {
737
- "name": "name",
738
- "description": "Name attribute for the input."
739
- },
740
- {
741
- "name": "number-of-calendars",
742
- "description": "Number of calendars to display"
743
- },
744
- {
745
- "name": "placeholder",
746
- "description": "Placeholder for the input field."
747
- },
748
- {
749
- "name": "readonly",
750
- "description": "Sets the input field as read-only."
751
- },
752
- {
753
- "name": "required",
754
- "description": "Marks the input field as required."
755
- },
756
- {
757
- "name": "shortcuts",
758
- "description": "Custom actions to display in the footer\nJSON array of objects with the following properties:\n- label: string\n- onClick: function"
759
- },
760
- {
761
- "name": "shortcuts-placement",
762
- "description": "Footer placement",
763
- "values": [
764
- {
765
- "name": "bottom"
766
- },
767
- {
768
- "name": "left"
769
- },
770
- {
771
- "name": "right"
772
- }
773
- ]
774
- },
775
- {
776
- "name": "show-actions",
777
- "description": "Show action buttons"
778
- },
779
- {
780
- "name": "show-week-numbers",
781
- "description": "Show week numbers"
782
- },
783
- {
784
- "name": "success",
785
- "description": "Indicates a success state."
786
- },
787
- {
788
- "name": "value",
789
- "description": "The initial value of the input (date in string format)."
790
- }
791
- ]
792
- },
793
- {
794
- "name": "nv-fielddaterange",
795
- "description": {
796
- "kind": "markdown",
797
- "value": "The `nv-fielddaterange` component is an advanced form field for date range selection. It combines two date input fields with an interactive calendar picker, providing an intuitive user experience for selecting time periods."
798
- },
799
- "attributes": [
800
- {
801
- "name": "date-format",
802
- "description": "Date format ex: YYYY-MM-DD, DD-MM-YYYY, etc."
803
- },
804
- {
805
- "name": "description",
806
- "description": "Description displayed below the input. A slot description can override this prop."
807
- },
808
- {
809
- "name": "disabled",
810
- "description": "Disables both input fields."
811
- },
812
- {
813
- "name": "disabled-dates",
814
- "description": "Disabled dates ISO string array"
815
- },
816
- {
817
- "name": "end-input-id",
818
- "description": "Sets the ID for the end input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated."
819
- },
820
- {
821
- "name": "end-name",
822
- "description": "Name attribute for the end input."
823
- },
824
- {
825
- "name": "end-placeholder",
826
- "description": "Placeholder for the end input field."
827
- },
828
- {
829
- "name": "error",
830
- "description": "Indicates an error state."
831
- },
832
- {
833
- "name": "error-description",
834
- "description": "Error description. A slot error-description can override this prop."
835
- },
836
- {
837
- "name": "first-day-of-week",
838
- "description": "First day of the week 0 = Sunday, 1 = Monday, etc."
839
- },
840
- {
841
- "name": "label",
842
- "description": "Text displayed as label. A slot label can override this prop."
843
- },
844
- {
845
- "name": "locale",
846
- "description": "Locale for date formatting"
847
- },
848
- {
849
- "name": "max",
850
- "description": "Maximum date for selection ISO string format, ex: 2025-12-31"
851
- },
852
- {
853
- "name": "min",
854
- "description": "Minimum date for selection ISO string format, ex: 2025-01-01"
855
- },
856
- {
857
- "name": "number-of-calendars",
858
- "description": "Number of calendars to display"
859
- },
860
- {
861
- "name": "readonly",
862
- "description": "Sets both input fields as read-only."
863
- },
864
- {
865
- "name": "required",
866
- "description": "Marks both input fields as required."
867
- },
868
- {
869
- "name": "shortcuts",
870
- "description": "Custom actions to display in the footer\nJSON array of objects with the following properties:\n- label: string\n- onClick: function"
871
- },
872
- {
873
- "name": "shortcuts-placement",
874
- "description": "Footer placement",
875
- "values": [
876
- {
877
- "name": "bottom"
878
- },
879
- {
880
- "name": "left"
881
- },
882
- {
883
- "name": "right"
884
- }
885
- ]
886
- },
887
- {
888
- "name": "should-auto-focus",
889
- "description": "Autofocus the start input when the component is mounted."
890
- },
891
- {
892
- "name": "show-actions",
893
- "description": "Show action buttons"
894
- },
895
- {
896
- "name": "show-week-numbers",
897
- "description": "Show week numbers"
898
- },
899
- {
900
- "name": "start-input-id",
901
- "description": "Sets the ID for the start input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated."
902
- },
903
- {
904
- "name": "start-name",
905
- "description": "Name attribute for the start input."
906
- },
907
- {
908
- "name": "start-placeholder",
909
- "description": "Placeholder for the start input field."
910
- },
911
- {
912
- "name": "success",
913
- "description": "Indicates a success state."
914
- },
915
- {
916
- "name": "value",
917
- "description": "The initial value of the date range (in string format)."
918
- }
919
- ]
920
- },
921
- {
922
- "name": "nv-fielddropdown",
923
- "description": {
924
- "kind": "markdown",
925
- "value": "The 'nv-fielddropdown' is a form component that combines a text input field with a dropdown popover. It allows users to select an item from a list of options. Similar to a combobox, the dropdown can be filtered, and the selected item is displayed in the input field. The component can be used in forms, search bars, and more."
926
- },
927
- "attributes": [
928
- {
929
- "name": "autocomplete",
930
- "description": "The autocomplete prop helps users fill out the input field faster by\nsuggesting entries they've used before, like their email or address.\nYou can turn it on to make forms more convenient or off to ensure users\nalways type in fresh data.",
931
- "values": [
932
- {
933
- "name": "on"
934
- },
935
- {
936
- "name": "off"
937
- },
938
- {
939
- "name": "section-*"
940
- },
941
- {
942
- "name": "shipping"
943
- },
944
- {
945
- "name": "billing"
946
- },
947
- {
948
- "name": "home"
949
- },
950
- {
951
- "name": "work"
952
- },
953
- {
954
- "name": "mobile"
955
- },
956
- {
957
- "name": "fax"
958
- },
959
- {
960
- "name": "pager"
961
- },
962
- {
963
- "name": "tel"
964
- },
965
- {
966
- "name": "tel-country-code"
967
- },
968
- {
969
- "name": "tel-national"
970
- },
971
- {
972
- "name": "tel-area-code"
973
- },
974
- {
975
- "name": "tel-local"
976
- },
977
- {
978
- "name": "tel-local-prefix"
979
- },
980
- {
981
- "name": "tel-local-suffix"
982
- },
983
- {
984
- "name": "tel-extension"
985
- },
986
- {
987
- "name": "email"
988
- },
989
- {
990
- "name": "impp"
991
- },
992
- {
993
- "name": "name"
994
- },
995
- {
996
- "name": "honorific-prefix"
997
- },
998
- {
999
- "name": "given-name"
1000
- },
1001
- {
1002
- "name": "additional-name"
1003
- },
1004
- {
1005
- "name": "family-name"
1006
- },
1007
- {
1008
- "name": "honorific-suffix"
1009
- },
1010
- {
1011
- "name": "nickname"
1012
- },
1013
- {
1014
- "name": "username"
1015
- },
1016
- {
1017
- "name": "new-password"
1018
- },
1019
- {
1020
- "name": "current-password"
1021
- },
1022
- {
1023
- "name": "one-time-code"
1024
- },
1025
- {
1026
- "name": "organization-title"
1027
- },
1028
- {
1029
- "name": "organization"
1030
- },
1031
- {
1032
- "name": "street-address"
1033
- },
1034
- {
1035
- "name": "address-line1"
1036
- },
1037
- {
1038
- "name": "address-line2"
1039
- },
1040
- {
1041
- "name": "address-line3"
1042
- },
1043
- {
1044
- "name": "address-level4"
1045
- },
1046
- {
1047
- "name": "address-level3"
1048
- },
1049
- {
1050
- "name": "address-level2"
1051
- },
1052
- {
1053
- "name": "address-level1"
1054
- },
1055
- {
1056
- "name": "country"
1057
- },
1058
- {
1059
- "name": "country-name"
1060
- },
1061
- {
1062
- "name": "postal-code"
1063
- },
1064
- {
1065
- "name": "cc-name"
1066
- },
1067
- {
1068
- "name": "cc-given-name"
1069
- },
1070
- {
1071
- "name": "cc-additional-name"
1072
- },
1073
- {
1074
- "name": "cc-family-name"
1075
- },
1076
- {
1077
- "name": "cc-number"
1078
- },
1079
- {
1080
- "name": "cc-exp"
1081
- },
1082
- {
1083
- "name": "cc-exp-month"
1084
- },
1085
- {
1086
- "name": "cc-exp-year"
1087
- },
1088
- {
1089
- "name": "cc-csc"
1090
- },
1091
- {
1092
- "name": "cc-type"
1093
- },
1094
- {
1095
- "name": "transaction-currency"
1096
- },
1097
- {
1098
- "name": "transaction-amount"
1099
- },
1100
- {
1101
- "name": "language"
1102
- },
1103
- {
1104
- "name": "bday"
1105
- },
1106
- {
1107
- "name": "bday-day"
1108
- },
1109
- {
1110
- "name": "bday-month"
1111
- },
1112
- {
1113
- "name": "bday-year"
1114
- },
1115
- {
1116
- "name": "sex"
1117
- },
1118
- {
1119
- "name": "url"
1120
- },
1121
- {
1122
- "name": "photo"
1123
- }
1124
- ]
1125
- },
1126
- {
1127
- "name": "autofocus",
1128
- "description": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on an <input>\nelement."
1129
- },
1130
- {
1131
- "name": "description",
1132
- "description": "Add helpful hints or extra information under the text input field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions, making the form easier to fill out correctly."
1133
- },
1134
- {
1135
- "name": "disabled",
1136
- "description": "The disabled prop lets you turn off the input field so that users can't\ntype in it. When disabled, the field is grayed out and won't respond to\nclicks or touches."
1137
- },
1138
- {
1139
- "name": "empty-result",
1140
- "description": "The text to display when no items match the filter."
1141
- },
1142
- {
1143
- "name": "error",
1144
- "description": "Alters the input field's appearance to indicate an error, helping users\nidentify fields that need correction."
1145
- },
1146
- {
1147
- "name": "error-description",
1148
- "description": "A description that appears when there is an error related to the dropdown\nfield."
1149
- },
1150
- {
1151
- "name": "filterable",
1152
- "description": "Enables or disables the filtering feature for the dropdown items."
1153
- },
1154
- {
1155
- "name": "input-id",
1156
- "description": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
1157
- },
1158
- {
1159
- "name": "label",
1160
- "description": "Lets you define the text that explains what users should enter in the text\ninput field. It's a crucial element for making forms clear and\nuser-friendly."
1161
- },
1162
- {
1163
- "name": "name",
1164
- "description": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input's data in form submissions. It should be\nunique within the form to avoid conflicts."
1165
- },
1166
- {
1167
- "name": "open",
1168
- "description": "State of the dropdown popover."
1169
- },
1170
- {
1171
- "name": "options",
1172
- "description": "List of options available in the dropdown. The options are passed as a JSON\nstring."
1173
- },
1174
- {
1175
- "name": "placeholder",
1176
- "description": "Display temporary text inside the input field to give users a hint about\nwhat to type. It's a great way to provide examples or suggestions directly\nin the field before they start typing.\nThe placeholder is displayed only when the filterable option is enabled."
1177
- },
1178
- {
1179
- "name": "readonly",
1180
- "description": "Display the input field's content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won't be\nable to type or delete anything."
1181
- },
1182
- {
1183
- "name": "required",
1184
- "description": "Marks the input field as required, ensuring that the user must fill it out\nbefore submitting the form."
1185
- },
1186
- {
1187
- "name": "value",
1188
- "description": "Specifies the value of the input field, which determines the text displayed\nwithin the field. This prop is typically used in controlled components\nwhere the input's value is managed by the component's state."
1189
- }
1190
- ]
1191
- },
1192
- {
1193
- "name": "nv-fielddropdownitem",
1194
- "description": {
1195
- "kind": "markdown",
1196
- "value": "The 'nv-fielddropdownitem' is a component designed to be used within the 'nv-fielddropdown' component. Each 'nv-fielddropdownitem' represents a single selectable option in the dropdown list. It allows customization through properties such as 'value', 'label', and 'selected' state, which defines its appearance and behavior.\n\nThe 'nv-fielddropdownitem' can display custom content, making it flexible for use cases where options may require more detailed representation beyond plain text. It is ideal for creating interactive dropdown menus, enabling users to make selections easily and clearly. This component is essential for building intuitive and user-friendly dropdown experiences."
1197
- },
1198
- "attributes": [
1199
- {
1200
- "name": "disabled",
1201
- "description": "Disables the item, preventing any user interaction."
1202
- },
1203
- {
1204
- "name": "label",
1205
- "description": "Specifies the text label for the dropdown item.\n\nWhen no default slot is provided, this label is rendered as the item's\nvisible text. If the default slot is supplied, the label isn’t directly\ndisplayed but is used as the selected text (on the dropdown trigger). If\nno label is explicitly set, the component will automatically derive the\nlabel from the text content of the default slot."
1206
- },
1207
- {
1208
- "name": "selected",
1209
- "description": "Indicates if the item is selected."
1210
- },
1211
- {
1212
- "name": "value",
1213
- "description": "Value associated with the item. This is recommended and required for proper\nform management."
1214
- }
1215
- ]
1216
- },
1217
- {
1218
- "name": "nv-fielddropdownitemcheck",
1219
- "description": {
1220
- "kind": "markdown",
1221
- "value": "the nv-fielddropdownitemcheck component is used to display a checkbox item in a nv-fieldmultiselect component. It allows users to select multiple options from a dropdown list."
1222
- },
1223
- "attributes": [
1224
- {
1225
- "name": "checked",
1226
- "description": "Indicates whether the checkbox is selected."
1227
- },
1228
- {
1229
- "name": "description",
1230
- "description": "A description providing additional context or information about the\ncheckbox."
1231
- },
1232
- {
1233
- "name": "disabled",
1234
- "description": "Disables the item, preventing any user interaction."
1235
- },
1236
- {
1237
- "name": "group",
1238
- "description": "The group this item belongs to, if applicable."
1239
- },
1240
- {
1241
- "name": "label",
1242
- "description": "The label displayed alongside the checkbox."
1243
- },
1244
- {
1245
- "name": "value",
1246
- "description": "The value associated with this item."
1247
- }
1248
- ]
1249
- },
1250
- {
1251
- "name": "nv-fieldmultiselect",
1252
- "description": {
1253
- "kind": "markdown",
1254
- "value": "The `nv-fieldmultiselect` is a custom multiple selection component that allows users to select multiple options from a dropdown list. It provides a rich user interface with filtering capabilities, keyboard navigation, and state management."
1255
- },
1256
- "attributes": [
1257
- {
1258
- "name": "autocomplete",
1259
- "description": "The autocomplete prop for faster input filling.",
1260
- "values": [
1261
- {
1262
- "name": "on"
1263
- },
1264
- {
1265
- "name": "off"
1266
- },
1267
- {
1268
- "name": "section-*"
1269
- },
1270
- {
1271
- "name": "shipping"
1272
- },
1273
- {
1274
- "name": "billing"
1275
- },
1276
- {
1277
- "name": "home"
1278
- },
1279
- {
1280
- "name": "work"
1281
- },
1282
- {
1283
- "name": "mobile"
1284
- },
1285
- {
1286
- "name": "fax"
1287
- },
1288
- {
1289
- "name": "pager"
1290
- },
1291
- {
1292
- "name": "tel"
1293
- },
1294
- {
1295
- "name": "tel-country-code"
1296
- },
1297
- {
1298
- "name": "tel-national"
1299
- },
1300
- {
1301
- "name": "tel-area-code"
1302
- },
1303
- {
1304
- "name": "tel-local"
1305
- },
1306
- {
1307
- "name": "tel-local-prefix"
1308
- },
1309
- {
1310
- "name": "tel-local-suffix"
1311
- },
1312
- {
1313
- "name": "tel-extension"
1314
- },
1315
- {
1316
- "name": "email"
1317
- },
1318
- {
1319
- "name": "impp"
1320
- },
1321
- {
1322
- "name": "name"
1323
- },
1324
- {
1325
- "name": "honorific-prefix"
1326
- },
1327
- {
1328
- "name": "given-name"
1329
- },
1330
- {
1331
- "name": "additional-name"
1332
- },
1333
- {
1334
- "name": "family-name"
1335
- },
1336
- {
1337
- "name": "honorific-suffix"
1338
- },
1339
- {
1340
- "name": "nickname"
1341
- },
1342
- {
1343
- "name": "username"
1344
- },
1345
- {
1346
- "name": "new-password"
1347
- },
1348
- {
1349
- "name": "current-password"
1350
- },
1351
- {
1352
- "name": "one-time-code"
1353
- },
1354
- {
1355
- "name": "organization-title"
1356
- },
1357
- {
1358
- "name": "organization"
1359
- },
1360
- {
1361
- "name": "street-address"
1362
- },
1363
- {
1364
- "name": "address-line1"
1365
- },
1366
- {
1367
- "name": "address-line2"
1368
- },
1369
- {
1370
- "name": "address-line3"
1371
- },
1372
- {
1373
- "name": "address-level4"
1374
- },
1375
- {
1376
- "name": "address-level3"
1377
- },
1378
- {
1379
- "name": "address-level2"
1380
- },
1381
- {
1382
- "name": "address-level1"
1383
- },
1384
- {
1385
- "name": "country"
1386
- },
1387
- {
1388
- "name": "country-name"
1389
- },
1390
- {
1391
- "name": "postal-code"
1392
- },
1393
- {
1394
- "name": "cc-name"
1395
- },
1396
- {
1397
- "name": "cc-given-name"
1398
- },
1399
- {
1400
- "name": "cc-additional-name"
1401
- },
1402
- {
1403
- "name": "cc-family-name"
1404
- },
1405
- {
1406
- "name": "cc-number"
1407
- },
1408
- {
1409
- "name": "cc-exp"
1410
- },
1411
- {
1412
- "name": "cc-exp-month"
1413
- },
1414
- {
1415
- "name": "cc-exp-year"
1416
- },
1417
- {
1418
- "name": "cc-csc"
1419
- },
1420
- {
1421
- "name": "cc-type"
1422
- },
1423
- {
1424
- "name": "transaction-currency"
1425
- },
1426
- {
1427
- "name": "transaction-amount"
1428
- },
1429
- {
1430
- "name": "language"
1431
- },
1432
- {
1433
- "name": "bday"
1434
- },
1435
- {
1436
- "name": "bday-day"
1437
- },
1438
- {
1439
- "name": "bday-month"
1440
- },
1441
- {
1442
- "name": "bday-year"
1443
- },
1444
- {
1445
- "name": "sex"
1446
- },
1447
- {
1448
- "name": "url"
1449
- },
1450
- {
1451
- "name": "photo"
1452
- }
1453
- ]
1454
- },
1455
- {
1456
- "name": "autofocus",
1457
- "description": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on an <input>\nelement."
1458
- },
1459
- {
1460
- "name": "badge-label",
1461
- "description": "Text for the badge showing the number of selected items."
1462
- },
1463
- {
1464
- "name": "debounce-delay",
1465
- "description": "Delay in milliseconds before the search is triggered when typing in the filter input."
1466
- },
1467
- {
1468
- "name": "description",
1469
- "description": "Add helpful hints or extra information under the text input field."
1470
- },
1471
- {
1472
- "name": "disabled",
1473
- "description": "Disables the input field."
1474
- },
1475
- {
1476
- "name": "empty-result",
1477
- "description": "The text to display when no items match the filter."
1478
- },
1479
- {
1480
- "name": "error",
1481
- "description": "Alters the input field's appearance to indicate an error, helping users\nidentify fields that need correction."
1482
- },
1483
- {
1484
- "name": "error-description",
1485
- "description": "A description that appears when there is an error related to the multiselect\nfield."
1486
- },
1487
- {
1488
- "name": "filterable",
1489
- "description": "Enables or disables the filtering feature for the multiselect items."
1490
- },
1491
- {
1492
- "name": "input-id",
1493
- "description": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
1494
- },
1495
- {
1496
- "name": "label",
1497
- "description": "Lets you define the text that explains what users should enter in the text\ninput field. It's a crucial element for making forms clear and user-friendly."
1498
- },
1499
- {
1500
- "name": "max-height",
1501
- "description": "Defines the maximum height of the multiselect list when open."
1502
- },
1503
- {
1504
- "name": "name",
1505
- "description": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input's data in form submissions. It should be\nunique within the form to avoid conflicts."
1506
- },
1507
- {
1508
- "name": "open",
1509
- "description": "State of the multiselect popover."
1510
- },
1511
- {
1512
- "name": "options",
1513
- "description": "List of options available in the multiselect."
1514
- },
1515
- {
1516
- "name": "placeholder",
1517
- "description": "Display temporary text inside the input field."
1518
- },
1519
- {
1520
- "name": "readonly",
1521
- "description": "Display the input field's content without allowing users to change it."
1522
- },
1523
- {
1524
- "name": "required",
1525
- "description": "Marks the input field as required."
1526
- },
1527
- {
1528
- "name": "value",
1529
- "description": "Specifies the value of the input field."
1530
- }
1531
- ]
1532
- },
1533
- {
1534
- "name": "nv-fieldnumber",
1535
- "description": {
1536
- "kind": "markdown",
1537
- "value": "NvFieldnumber is a custom web component that provides a styled number input field with various properties and methods to enhance its functionality. It includes features such as labels, descriptions, placeholders, validation messages, and stepper buttons for incrementing and decrementing the value."
1538
- },
1539
- "attributes": [
1540
- {
1541
- "name": "autofocus",
1542
- "description": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on an <input>\nelement."
1543
- },
1544
- {
1545
- "name": "description",
1546
- "description": "Add helpful hints or extra information under the text input field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions, making the form easier to fill out correctly."
1547
- },
1548
- {
1549
- "name": "disabled",
1550
- "description": "The disabled prop lets you turn off the input field so that users can’t\ntype in it. When disabled, the field is grayed out and won’t respond to#\nclicks or touches."
1551
- },
1552
- {
1553
- "name": "error",
1554
- "description": "Alters the input field’s appearance to indicate an error, helping users\nidentify fields that need correction."
1555
- },
1556
- {
1557
- "name": "error-description",
1558
- "description": "Show a helpful message under the input field when there’s a problem. It\nexplains what’s wrong and how users can fix it, making the error easier to\nunderstand and resolve."
1559
- },
1560
- {
1561
- "name": "input-id",
1562
- "description": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
1563
- },
1564
- {
1565
- "name": "label",
1566
- "description": "Lets you define the text that explains what users should enter in the text\ninput field. It’s a crucial element for making forms clear and\nuser-friendly."
1567
- },
1568
- {
1569
- "name": "max",
1570
- "description": "The maximum value that the input field can accept. Use this in combination\nwith min to create a range of valid values."
1571
- },
1572
- {
1573
- "name": "message",
1574
- "description": "Message defines a 'hint ' message for the number field."
1575
- },
1576
- {
1577
- "name": "min",
1578
- "description": "The minimum value that the input field can accept. Use this in combination\nwith max to create a range of valid values."
1579
- },
1580
- {
1581
- "name": "name",
1582
- "description": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input’s data in form submissions. It should be\nunique within the form to avoid conflicts"
1583
- },
1584
- {
1585
- "name": "placeholder",
1586
- "description": "Display temporary text inside the input field to give users a hint about\nwhat to type. It’s a great way to provide examples or suggestions directly\nin the field before they start typing."
1587
- },
1588
- {
1589
- "name": "readonly",
1590
- "description": "Display the input field’s content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won’t be\nable to type or delete anything."
1591
- },
1592
- {
1593
- "name": "required",
1594
- "description": "Marks the input field as required, ensuring that the user must fill it out\nbefore submitting the form."
1595
- },
1596
- {
1597
- "name": "step",
1598
- "description": "Define the increment value for the input field. It determines how much the\nvalue will increase or decrease when the user clicks the stepper buttons."
1599
- },
1600
- {
1601
- "name": "success",
1602
- "description": "Changes the input field’s appearance to indicate successful input or\nvalidation."
1603
- },
1604
- {
1605
- "name": "validation",
1606
- "description": "Add the message to the validation state."
1607
- },
1608
- {
1609
- "name": "value",
1610
- "description": "The value of the input field. It’s the text that users type in or the value\nthat you set programmatically. This is the main way to interact with the\ninput field, and it’s essential for creating forms that users can fill out."
1611
- }
1612
- ]
1613
- },
1614
- {
1615
- "name": "nv-fieldpassword",
1616
- "description": {
1617
- "kind": "markdown",
1618
- "value": "The `nv-fieldpassword` component is, as its name suggests, a text input field that can be used in forms. It includes a label, a message and a validation status. The input type is the password. The input value can be controlled by the parent component, and Pattern management is used natively via regexes. It can also display an error status, a hint message or a validation message."
1619
- },
1620
- "attributes": [
1621
- {
1622
- "name": "autocomplete",
1623
- "description": "The autocomplete prop helps users fill out the input field faster by\nsuggesting entries they’ve used before, like their email or address.\nYou can turn it on to make forms more convenient or off to ensure users\nalways type in fresh data.",
1624
- "values": [
1625
- {
1626
- "name": "on"
1627
- },
1628
- {
1629
- "name": "off"
1630
- },
1631
- {
1632
- "name": "section-*"
1633
- },
1634
- {
1635
- "name": "shipping"
1636
- },
1637
- {
1638
- "name": "billing"
1639
- },
1640
- {
1641
- "name": "home"
1642
- },
1643
- {
1644
- "name": "work"
1645
- },
1646
- {
1647
- "name": "mobile"
1648
- },
1649
- {
1650
- "name": "fax"
1651
- },
1652
- {
1653
- "name": "pager"
1654
- },
1655
- {
1656
- "name": "tel"
1657
- },
1658
- {
1659
- "name": "tel-country-code"
1660
- },
1661
- {
1662
- "name": "tel-national"
1663
- },
1664
- {
1665
- "name": "tel-area-code"
1666
- },
1667
- {
1668
- "name": "tel-local"
1669
- },
1670
- {
1671
- "name": "tel-local-prefix"
1672
- },
1673
- {
1674
- "name": "tel-local-suffix"
1675
- },
1676
- {
1677
- "name": "tel-extension"
1678
- },
1679
- {
1680
- "name": "email"
1681
- },
1682
- {
1683
- "name": "impp"
1684
- },
1685
- {
1686
- "name": "name"
1687
- },
1688
- {
1689
- "name": "honorific-prefix"
1690
- },
1691
- {
1692
- "name": "given-name"
1693
- },
1694
- {
1695
- "name": "additional-name"
1696
- },
1697
- {
1698
- "name": "family-name"
1699
- },
1700
- {
1701
- "name": "honorific-suffix"
1702
- },
1703
- {
1704
- "name": "nickname"
1705
- },
1706
- {
1707
- "name": "username"
1708
- },
1709
- {
1710
- "name": "new-password"
1711
- },
1712
- {
1713
- "name": "current-password"
1714
- },
1715
- {
1716
- "name": "one-time-code"
1717
- },
1718
- {
1719
- "name": "organization-title"
1720
- },
1721
- {
1722
- "name": "organization"
1723
- },
1724
- {
1725
- "name": "street-address"
1726
- },
1727
- {
1728
- "name": "address-line1"
1729
- },
1730
- {
1731
- "name": "address-line2"
1732
- },
1733
- {
1734
- "name": "address-line3"
1735
- },
1736
- {
1737
- "name": "address-level4"
1738
- },
1739
- {
1740
- "name": "address-level3"
1741
- },
1742
- {
1743
- "name": "address-level2"
1744
- },
1745
- {
1746
- "name": "address-level1"
1747
- },
1748
- {
1749
- "name": "country"
1750
- },
1751
- {
1752
- "name": "country-name"
1753
- },
1754
- {
1755
- "name": "postal-code"
1756
- },
1757
- {
1758
- "name": "cc-name"
1759
- },
1760
- {
1761
- "name": "cc-given-name"
1762
- },
1763
- {
1764
- "name": "cc-additional-name"
1765
- },
1766
- {
1767
- "name": "cc-family-name"
1768
- },
1769
- {
1770
- "name": "cc-number"
1771
- },
1772
- {
1773
- "name": "cc-exp"
1774
- },
1775
- {
1776
- "name": "cc-exp-month"
1777
- },
1778
- {
1779
- "name": "cc-exp-year"
1780
- },
1781
- {
1782
- "name": "cc-csc"
1783
- },
1784
- {
1785
- "name": "cc-type"
1786
- },
1787
- {
1788
- "name": "transaction-currency"
1789
- },
1790
- {
1791
- "name": "transaction-amount"
1792
- },
1793
- {
1794
- "name": "language"
1795
- },
1796
- {
1797
- "name": "bday"
1798
- },
1799
- {
1800
- "name": "bday-day"
1801
- },
1802
- {
1803
- "name": "bday-month"
1804
- },
1805
- {
1806
- "name": "bday-year"
1807
- },
1808
- {
1809
- "name": "sex"
1810
- },
1811
- {
1812
- "name": "url"
1813
- },
1814
- {
1815
- "name": "photo"
1816
- }
1817
- ]
1818
- },
1819
- {
1820
- "name": "autofocus",
1821
- "description": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on an <input>\nelement."
1822
- },
1823
- {
1824
- "name": "description",
1825
- "description": "Add helpful hints or extra information under the text input field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions, making the form easier to fill out correctly."
1826
- },
1827
- {
1828
- "name": "disabled",
1829
- "description": "The disabled prop lets you turn off the input field so that users can’t\ntype in it. When disabled, the field is grayed out and won’t respond to#\nclicks or touches."
1830
- },
1831
- {
1832
- "name": "error",
1833
- "description": "Alters the input field’s appearance to indicate an error, helping users\nidentify fields that need correction."
1834
- },
1835
- {
1836
- "name": "error-description",
1837
- "description": "A description that appears when there is an error related to the password\nfield."
1838
- },
1839
- {
1840
- "name": "hide-password-icon",
1841
- "description": "Hide the button to show/hide the password."
1842
- },
1843
- {
1844
- "name": "input-id",
1845
- "description": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
1846
- },
1847
- {
1848
- "name": "label",
1849
- "description": "Lets you define the text that explains what users should enter in the text\ninput field. It’s a crucial element for making forms clear and\nuser-friendly."
1850
- },
1851
- {
1852
- "name": "maxlength",
1853
- "description": "Limits how many characters users can type into the input field. It’s\nhelpful for making sure users don’t enter too much information, keeping\ntheir input within the allowed limit."
1854
- },
1855
- {
1856
- "name": "minlength",
1857
- "description": "Ensures that users type at least a certain number of characters into the\ninput field. It’s a way to make sure users provide enough information\nbefore moving on."
1858
- },
1859
- {
1860
- "name": "mode",
1861
- "description": "Defines the type of the input.",
1862
- "values": [
1863
- {
1864
- "name": "number"
1865
- },
1866
- {
1867
- "name": "text"
1868
- }
1869
- ]
1870
- },
1871
- {
1872
- "name": "name",
1873
- "description": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input’s data in form submissions. It should be\nunique within the form to avoid conflicts"
1874
- },
1875
- {
1876
- "name": "pattern",
1877
- "description": "Set rules for how the input should be formatted. For example, you can\nrequire that a phone number includes only digits or that an email address\nhas the correct format. If users don’t follow these rules, they’ll get a\nprompt to correct their input on form submission.\nthe rules are applied to the input value via regexes."
1878
- },
1879
- {
1880
- "name": "placeholder",
1881
- "description": "Display temporary text inside the input field to give users a hint about\nwhat to type. It’s a great way to provide examples or suggestions directly\nin the field before they start typing."
1882
- },
1883
- {
1884
- "name": "readonly",
1885
- "description": "Display the input field’s content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won’t be\nable to type or delete anything."
1886
- },
1887
- {
1888
- "name": "required",
1889
- "description": "Marks the input field as required, ensuring that the user must fill it out\nbefore submitting the form."
1890
- },
1891
- {
1892
- "name": "show-password",
1893
- "description": "Show/hide the password programmatically."
1894
- },
1895
- {
1896
- "name": "success",
1897
- "description": "Changes the input field’s appearance to indicate successful input or\nvalidation."
1898
- },
1899
- {
1900
- "name": "value",
1901
- "description": "Specifies the value of the input field, which determines the text displayed\nwithin the field. This prop is typically used in controlled components\nwhere the input’s value is managed by the component’s state."
1902
- }
1903
- ]
1904
- },
1905
- {
1906
- "name": "nv-fieldradio",
1907
- "description": {
1908
- "kind": "markdown",
1909
- "value": "Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed."
1910
- },
1911
- "attributes": [
1912
- {
1913
- "name": "autofocus",
1914
- "description": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on an <input>\nelement."
1915
- },
1916
- {
1917
- "name": "checked",
1918
- "description": "Controls whether the radio button is selected."
1919
- },
1920
- {
1921
- "name": "description",
1922
- "description": "Adds a helpful hint message below the label. This description provides\nextra information or context about the radio button option, assisting users\nin making more informed choices."
1923
- },
1924
- {
1925
- "name": "disabled",
1926
- "description": "Disables the radio button, making it un-selectable."
1927
- },
1928
- {
1929
- "name": "error",
1930
- "description": "Highlight the radio button with error styling. It helps users quickly\nidentify which option needs attention, improving their form-filling\nexperience by making issues more visible."
1931
- },
1932
- {
1933
- "name": "error-description",
1934
- "description": "A description that appears when there is an error related to the radio\nbutton."
1935
- },
1936
- {
1937
- "name": "input-id",
1938
- "description": "Sets the ID for the radio button’s input element and the for attribute of\nthe associated label. If no ID is provided, a random one will be\nautomatically generated to ensure unique identification, facilitating\nproper label association and accessibility."
1939
- },
1940
- {
1941
- "name": "label",
1942
- "description": "Sets the text content that is rendered next to the input element of type\nradio. This label is essential for accessibility and user clarity, as it\ndescribes the purpose or option of the radio button."
1943
- },
1944
- {
1945
- "name": "label-before",
1946
- "description": "Set the label placement to before the input"
1947
- },
1948
- {
1949
- "name": "label-placement",
1950
- "description": "Defines the position of the label relative to the radio button.",
1951
- "values": [
1952
- {
1953
- "name": "after"
1954
- },
1955
- {
1956
- "name": "before"
1957
- }
1958
- ]
1959
- },
1960
- {
1961
- "name": "message",
1962
- "description": "Adds a helpful hint message below the label"
1963
- },
1964
- {
1965
- "name": "name",
1966
- "description": "Use this to assign a group name to your radio buttons. When you have\nmultiple radio buttons with the same name, users will be able to select\nonly one option within that group, making your forms more organized and\nuser-friendly."
1967
- },
1968
- {
1969
- "name": "value",
1970
- "description": "Defines what data will be sent when the radio button is selected.\nThis helps you identify which option the user has chosen in your form,\nensuring accurate data collection. When the form is submitted, the data\nwill consist of a name=value pair."
1971
- }
1972
- ]
1973
- },
1974
- {
1975
- "name": "nv-fieldselect",
1976
- "description": {
1977
- "kind": "markdown",
1978
- "value": "A custom field select component that renders a dropdown (select) element with various slots for customization."
1979
- },
1980
- "attributes": [
1981
- {
1982
- "name": "autofocus",
1983
- "description": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on a <select>\nelement."
1984
- },
1985
- {
1986
- "name": "description",
1987
- "description": "Add helpful hints or extra information under the select field. This is\nwhere you can clarify what users should choose or provide additional\ninstructions, making the form easier to fill out correctly."
1988
- },
1989
- {
1990
- "name": "disabled",
1991
- "description": "The disabled prop lets you turn off the select field so that users can’t\nchoose something. When disabled, the field is grayed out and won’t respond to\nclicks or touches."
1992
- },
1993
- {
1994
- "name": "display-value",
1995
- "description": "When enabled, displays the value element instead of the label when readonly.\nBy default, the label is displayed in readonly mode. Also it automatically\nsets the component to readonly."
1996
- },
1997
- {
1998
- "name": "error",
1999
- "description": "Alters the select field’s appearance to indicate an error, helping users\nidentify fields that need correction."
2000
- },
2001
- {
2002
- "name": "error-description",
2003
- "description": "Show a helpful message under the select field when there’s a problem. It\nexplains what’s wrong and how users can fix it, making the error easier to\nunderstand and resolve."
2004
- },
2005
- {
2006
- "name": "input-id",
2007
- "description": "Sets the ID for the select element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
2008
- },
2009
- {
2010
- "name": "label",
2011
- "description": "Lets you define the text that explains what users should choose in the\nselect field. It’s a crucial element for making forms clear and\nuser-friendly."
2012
- },
2013
- {
2014
- "name": "message",
2015
- "description": "Message defines a 'hint ' message for the Select Field."
2016
- },
2017
- {
2018
- "name": "multiple",
2019
- "description": "When enabled, allows the select to handle multiple selections."
2020
- },
2021
- {
2022
- "name": "name",
2023
- "description": "Defines the name attribute of the select field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the selected data in form submissions. It should be\nunique within the form to avoid conflicts"
2024
- },
2025
- {
2026
- "name": "options",
2027
- "description": "Options to display in the select. Can be passed as a JSON string.\nFormat: [{ label: string, value: string, selected?: boolean, disabled?: boolean }]"
2028
- },
2029
- {
2030
- "name": "readonly",
2031
- "description": "Display the select field’s content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won’t be\nable to change or delete anything."
2032
- },
2033
- {
2034
- "name": "required",
2035
- "description": "Marks the select field as required, ensuring that the user must fill it out\nbefore submitting the form."
2036
- },
2037
- {
2038
- "name": "success",
2039
- "description": "Changes the select field’s appearance to indicate successful input or\nvalidation."
2040
- },
2041
- {
2042
- "name": "validation",
2043
- "description": "Add the message to the validation state."
2044
- },
2045
- {
2046
- "name": "value",
2047
- "description": "The value of the select field.\n- If `multiple` is `false`, it's a single string.\n- If `multiple` is `true`, it's a comma-separated string of selected values."
2048
- }
2049
- ]
2050
- },
2051
- {
2052
- "name": "nv-fieldtext",
2053
- "description": {
2054
- "kind": "markdown",
2055
- "value": "The `nv-fieldtext` component is a text input field that can be used in forms. It includes a label, message, and validation state. The input can be of type text, password, email, or number. The value of the input can be controlled by the parent component. It can also display an error state, a hint message, or a validation message."
2056
- },
2057
- "attributes": [
2058
- {
2059
- "name": "autocomplete",
2060
- "description": "The autocomplete prop helps users fill out the input field faster by\nsuggesting entries they’ve used before, like their email or address.\nYou can turn it on to make forms more convenient or off to ensure users\nalways type in fresh data.",
2061
- "values": [
2062
- {
2063
- "name": "on"
2064
- },
2065
- {
2066
- "name": "off"
2067
- },
2068
- {
2069
- "name": "section-*"
2070
- },
2071
- {
2072
- "name": "shipping"
2073
- },
2074
- {
2075
- "name": "billing"
2076
- },
2077
- {
2078
- "name": "home"
2079
- },
2080
- {
2081
- "name": "work"
2082
- },
2083
- {
2084
- "name": "mobile"
2085
- },
2086
- {
2087
- "name": "fax"
2088
- },
2089
- {
2090
- "name": "pager"
2091
- },
2092
- {
2093
- "name": "tel"
2094
- },
2095
- {
2096
- "name": "tel-country-code"
2097
- },
2098
- {
2099
- "name": "tel-national"
2100
- },
2101
- {
2102
- "name": "tel-area-code"
2103
- },
2104
- {
2105
- "name": "tel-local"
2106
- },
2107
- {
2108
- "name": "tel-local-prefix"
2109
- },
2110
- {
2111
- "name": "tel-local-suffix"
2112
- },
2113
- {
2114
- "name": "tel-extension"
2115
- },
2116
- {
2117
- "name": "email"
2118
- },
2119
- {
2120
- "name": "impp"
2121
- },
2122
- {
2123
- "name": "name"
2124
- },
2125
- {
2126
- "name": "honorific-prefix"
2127
- },
2128
- {
2129
- "name": "given-name"
2130
- },
2131
- {
2132
- "name": "additional-name"
2133
- },
2134
- {
2135
- "name": "family-name"
2136
- },
2137
- {
2138
- "name": "honorific-suffix"
2139
- },
2140
- {
2141
- "name": "nickname"
2142
- },
2143
- {
2144
- "name": "username"
2145
- },
2146
- {
2147
- "name": "new-password"
2148
- },
2149
- {
2150
- "name": "current-password"
2151
- },
2152
- {
2153
- "name": "one-time-code"
2154
- },
2155
- {
2156
- "name": "organization-title"
2157
- },
2158
- {
2159
- "name": "organization"
2160
- },
2161
- {
2162
- "name": "street-address"
2163
- },
2164
- {
2165
- "name": "address-line1"
2166
- },
2167
- {
2168
- "name": "address-line2"
2169
- },
2170
- {
2171
- "name": "address-line3"
2172
- },
2173
- {
2174
- "name": "address-level4"
2175
- },
2176
- {
2177
- "name": "address-level3"
2178
- },
2179
- {
2180
- "name": "address-level2"
2181
- },
2182
- {
2183
- "name": "address-level1"
2184
- },
2185
- {
2186
- "name": "country"
2187
- },
2188
- {
2189
- "name": "country-name"
2190
- },
2191
- {
2192
- "name": "postal-code"
2193
- },
2194
- {
2195
- "name": "cc-name"
2196
- },
2197
- {
2198
- "name": "cc-given-name"
2199
- },
2200
- {
2201
- "name": "cc-additional-name"
2202
- },
2203
- {
2204
- "name": "cc-family-name"
2205
- },
2206
- {
2207
- "name": "cc-number"
2208
- },
2209
- {
2210
- "name": "cc-exp"
2211
- },
2212
- {
2213
- "name": "cc-exp-month"
2214
- },
2215
- {
2216
- "name": "cc-exp-year"
2217
- },
2218
- {
2219
- "name": "cc-csc"
2220
- },
2221
- {
2222
- "name": "cc-type"
2223
- },
2224
- {
2225
- "name": "transaction-currency"
2226
- },
2227
- {
2228
- "name": "transaction-amount"
2229
- },
2230
- {
2231
- "name": "language"
2232
- },
2233
- {
2234
- "name": "bday"
2235
- },
2236
- {
2237
- "name": "bday-day"
2238
- },
2239
- {
2240
- "name": "bday-month"
2241
- },
2242
- {
2243
- "name": "bday-year"
2244
- },
2245
- {
2246
- "name": "sex"
2247
- },
2248
- {
2249
- "name": "url"
2250
- },
2251
- {
2252
- "name": "photo"
2253
- }
2254
- ]
2255
- },
2256
- {
2257
- "name": "autofocus",
2258
- "description": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on an <input>\nelement."
2259
- },
2260
- {
2261
- "name": "description",
2262
- "description": "Add helpful hints or extra information under the text input field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions, making the form easier to fill out correctly."
2263
- },
2264
- {
2265
- "name": "disabled",
2266
- "description": "The disabled prop lets you turn off the input field so that users can’t\ntype in it. When disabled, the field is grayed out and won’t respond to\nclicks or touches."
2267
- },
2268
- {
2269
- "name": "error",
2270
- "description": "Alters the input field’s appearance to indicate an error, helping users\nidentify fields that need correction."
2271
- },
2272
- {
2273
- "name": "error-description",
2274
- "description": "A description that appears when there is an error related to the textfield\nfield."
2275
- },
2276
- {
2277
- "name": "input-id",
2278
- "description": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
2279
- },
2280
- {
2281
- "name": "label",
2282
- "description": "Lets you define the text that explains what users should enter in the text\ninput field. It’s a crucial element for making forms clear and\nuser-friendly."
2283
- },
2284
- {
2285
- "name": "maxlength",
2286
- "description": "Limits how many characters users can type into the input field. It’s\nhelpful for making sure users don’t enter too much information, keeping\ntheir input within the allowed limit."
2287
- },
2288
- {
2289
- "name": "message",
2290
- "description": "Message defines a 'hint ' message for the Text Field."
2291
- },
2292
- {
2293
- "name": "minlength",
2294
- "description": "Ensures that users type at least a certain number of characters into the\ninput field. It’s a way to make sure users provide enough information\nbefore moving on."
2295
- },
2296
- {
2297
- "name": "multiple",
2298
- "description": "When used with the email input type, this prop enables the field to accept\nmultiple email addresses. Users can enter several addresses, separating\neach one with a comma, allowing the form to handle multiple recipients."
2299
- },
2300
- {
2301
- "name": "name",
2302
- "description": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input’s data in form submissions. It should be\nunique within the form to avoid conflicts"
2303
- },
2304
- {
2305
- "name": "pattern",
2306
- "description": "Set rules for how the input should be formatted. For example, you can\nrequire that a phone number includes only digits or that an email address\nhas the correct format. If users don’t follow these rules, they’ll get a\nprompt to correct their input after the form is submitted."
2307
- },
2308
- {
2309
- "name": "placeholder",
2310
- "description": "Display temporary text inside the input field to give users a hint about\nwhat to type. It’s a great way to provide examples or suggestions directly\nin the field before they start typing."
2311
- },
2312
- {
2313
- "name": "readonly",
2314
- "description": "Display the input field’s content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won’t be\nable to type or delete anything."
2315
- },
2316
- {
2317
- "name": "required",
2318
- "description": "Marks the input field as required, ensuring that the user must fill it out\nbefore submitting the form."
2319
- },
2320
- {
2321
- "name": "success",
2322
- "description": "Changes the input field’s appearance to indicate successful input or\nvalidation."
2323
- },
2324
- {
2325
- "name": "text-input-type",
2326
- "description": "Type of the input.",
2327
- "values": [
2328
- {
2329
- "name": "email"
2330
- },
2331
- {
2332
- "name": "tel"
2333
- },
2334
- {
2335
- "name": "text"
2336
- }
2337
- ]
2338
- },
2339
- {
2340
- "name": "type",
2341
- "description": "The type prop lets you specify what kind of information the input field\nshould accept. Choose 'text' for general words or sentences, 'tel' for\nphone numbers, or 'email' for email addresses. This makes sure users get\nthe right keyboard and validation for what they need to enter.",
2342
- "values": [
2343
- {
2344
- "name": "email"
2345
- },
2346
- {
2347
- "name": "tel"
2348
- },
2349
- {
2350
- "name": "text"
2351
- }
2352
- ]
2353
- },
2354
- {
2355
- "name": "validation",
2356
- "description": "Add the message to the validation state."
2357
- },
2358
- {
2359
- "name": "value",
2360
- "description": "Specifies the value of the input field, which determines the text displayed\nwithin the field. This prop is typically used in controlled components\nwhere the input’s value is managed by the component’s state."
2361
- }
2362
- ]
2363
- },
2364
- {
2365
- "name": "nv-fieldtextarea",
2366
- "description": {
2367
- "kind": "markdown",
2368
- "value": "The `nv-fieldtextarea` component is a text textarea field that can be used in forms. It includes a label, message, and validation state. The value of the textarea can be controlled by the parent component. It can also display an error state, a hint message, or a validation message."
2369
- },
2370
- "attributes": [
2371
- {
2372
- "name": "autofocus",
2373
- "description": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on a <textarea>\nelement."
2374
- },
2375
- {
2376
- "name": "autosize",
2377
- "description": "Enable this to make the textarea automatically resize as the user types,\nadjusting the height to fit the content. For the best experience, avoid\nvertical resizing, as it’s controlled by this feature. Horizontal resizing\ncan still be allowed if desired."
2378
- },
2379
- {
2380
- "name": "description",
2381
- "description": "Add helpful hints or extra information under the text textarea field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions, making the form easier to fill out correctly."
2382
- },
2383
- {
2384
- "name": "disabled",
2385
- "description": "The disabled prop lets you turn off the textarea field so that users can’t\ntype in it. When disabled, the field is grayed out and won’t respond to#\nclicks or touches."
2386
- },
2387
- {
2388
- "name": "error",
2389
- "description": "Alters the textarea field’s appearance to indicate an error, helping users\nidentify fields that need correction."
2390
- },
2391
- {
2392
- "name": "error-description",
2393
- "description": "Show a helpful message under the textarea field when there’s a problem. It\nexplains what’s wrong and how users can fix it, making the error easier to\nunderstand and resolve."
2394
- },
2395
- {
2396
- "name": "input-id",
2397
- "description": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
2398
- },
2399
- {
2400
- "name": "label",
2401
- "description": "Lets you define the text that explains what users should enter in the text\ntextarea field. It’s a crucial element for making forms clear and\nuser-friendly."
2402
- },
2403
- {
2404
- "name": "maxlength",
2405
- "description": "Limits how many characters users can type into the textarea field. It’s\nhelpful for making sure users don’t enter too much information, keeping\ntheir textarea within the allowed limit."
2406
- },
2407
- {
2408
- "name": "message",
2409
- "description": "Message defines a 'hint ' message for the Text Field."
2410
- },
2411
- {
2412
- "name": "minlength",
2413
- "description": "Ensures that users type at least a certain number of characters into the\ntextarea field. It’s a way to make sure users provide enough information\nbefore moving on."
2414
- },
2415
- {
2416
- "name": "name",
2417
- "description": "Defines the name attribute of the textarea field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the textarea’s data in form submissions. It should be\nunique within the form to avoid conflicts"
2418
- },
2419
- {
2420
- "name": "placeholder",
2421
- "description": "Display temporary text inside the textarea field to give users a hint about\nwhat to type. It’s a great way to provide examples or suggestions directly\nin the field before they start typing."
2422
- },
2423
- {
2424
- "name": "readonly",
2425
- "description": "Display the textarea field’s content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won’t be\nable to type or delete anything."
2426
- },
2427
- {
2428
- "name": "required",
2429
- "description": "Marks the textarea field as required, ensuring that the user must fill it out\nbefore submitting the form."
2430
- },
2431
- {
2432
- "name": "resize",
2433
- "description": "Controls the resize property of a textarea. It can be set to none, both,\nhorizontal, or vertical. The default is vertical.",
2434
- "values": [
2435
- {
2436
- "name": "both"
2437
- },
2438
- {
2439
- "name": "horizontal"
2440
- },
2441
- {
2442
- "name": "none"
2443
- },
2444
- {
2445
- "name": "vertical"
2446
- }
2447
- ]
2448
- },
2449
- {
2450
- "name": "rows",
2451
- "description": "The number of visible text lines for the control. The default is 3. This\ncan be useful when you want to limit the size of the textarea field or when\nyou want to make the textarea field smaller to fit a specific layout. The\ntextarea field will expand vertically to fit the text as the user types."
2452
- },
2453
- {
2454
- "name": "success",
2455
- "description": "Changes the textarea field’s appearance to indicate successful textarea or\nvalidation."
2456
- },
2457
- {
2458
- "name": "validation",
2459
- "description": "Add the message to the validation state."
2460
- },
2461
- {
2462
- "name": "value",
2463
- "description": "Specifies the value of the textarea field, which determines the text displayed\nwithin the field. This prop is typically used in controlled components\nwhere the textarea’s value is managed by the component’s state."
2464
- }
2465
- ]
2466
- },
2467
- {
2468
- "name": "nv-fieldtime",
2469
- "description": {
2470
- "kind": "markdown",
2471
- "value": "A versatile and user-friendly input field designed to handle time values with precision and flexibility. The `nv-fieldtime` component allows users to input, select, and adjust time in various formats, making it suitable for a wide range of applications, from scheduling tools to time trackers. With customizable options and built-in accessibility features, it ensures a seamless and intuitive experience for all users."
2472
- },
2473
- "attributes": [
2474
- {
2475
- "name": "autofocus",
2476
- "description": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on an <input>\nelement."
2477
- },
2478
- {
2479
- "name": "description",
2480
- "description": "Add helpful hints or extra information under the time input field. This is\nwhere you can clarify what users should enter or provide additional\ninstructions."
2481
- },
2482
- {
2483
- "name": "disabled",
2484
- "description": "The disabled prop lets you turn off the input field so that users can't\ninteract with it. When disabled, the field is grayed out and won't respond to\nclicks or touches."
2485
- },
2486
- {
2487
- "name": "error",
2488
- "description": "Alters the input field's appearance to indicate an error, helping users\nidentify fields that need correction."
2489
- },
2490
- {
2491
- "name": "error-description",
2492
- "description": "A description that appears when there is an error related to the time\nfield."
2493
- },
2494
- {
2495
- "name": "format",
2496
- "description": "Specifies the time format to be used.\nAvailable formats:\n- HH: 24-hour format (00-23)\n- HH:mm: 24-hour format with minutes (00:00-23:59)\n- HH:mm:ss: 24-hour format with minutes and seconds (00:00:00-23:59:59)\n- hh: 12-hour format (01-12)\n- hh:mm: 12-hour format with minutes (01:00-12:59)\n- hh:mm:ss: 12-hour format with minutes and seconds (01:00:00-12:59:59)",
2497
- "values": [
2498
- {
2499
- "name": "HH"
2500
- },
2501
- {
2502
- "name": "HH:mm"
2503
- },
2504
- {
2505
- "name": "HH:mm:ss"
2506
- },
2507
- {
2508
- "name": "hh"
2509
- },
2510
- {
2511
- "name": "hh:mm"
2512
- },
2513
- {
2514
- "name": "hh:mm:ss"
2515
- }
2516
- ]
2517
- },
2518
- {
2519
- "name": "input-id",
2520
- "description": "Sets the ID for the input element and the for attribute of the associated\nlabel. If no ID is provided, a random one will be automatically generated\nto ensure unique identification, facilitating proper label association and\naccessibility."
2521
- },
2522
- {
2523
- "name": "label",
2524
- "description": "Lets you define the text that explains what users should enter in the time\ninput field. It's a crucial element for making forms clear and\nuser-friendly."
2525
- },
2526
- {
2527
- "name": "max",
2528
- "description": "The maximum time value that can be selected."
2529
- },
2530
- {
2531
- "name": "min",
2532
- "description": "The minimum time value that can be selected."
2533
- },
2534
- {
2535
- "name": "name",
2536
- "description": "Defines the name attribute of the input field, which is crucial for form\nsubmission. This value is used as the key in the key-value pair sent to\nthe server, representing the input's data in form submissions."
2537
- },
2538
- {
2539
- "name": "open",
2540
- "description": "State of the time picker popover."
2541
- },
2542
- {
2543
- "name": "readonly",
2544
- "description": "Display the input field's content without allowing users to change it.\nUsers can still click on it, select, and copy the text, but they won't be\nable to type or delete anything."
2545
- },
2546
- {
2547
- "name": "required",
2548
- "description": "Marks the input field as required, ensuring that the user must fill it out\nbefore submitting the form."
2549
- },
2550
- {
2551
- "name": "step",
2552
- "description": "The step interval in milliseconds for time increments/decrements.\nThis affects how the time changes when using arrow keys or spinners."
2553
- },
2554
- {
2555
- "name": "success",
2556
- "description": "Changes the input field’s appearance to indicate successful input or\nvalidation."
2557
- },
2558
- {
2559
- "name": "value",
2560
- "description": "The current value of the time input in the specified format."
2561
- }
2562
- ]
2563
- },
2564
- {
2565
- "name": "nv-icon",
2566
- "description": {
2567
- "kind": "markdown",
2568
- "value": "Icons are used as navigational elements. They may appear on their own, within a sentence or paragraph, or directly following the content."
2569
- },
2570
- "attributes": [
2571
- {
2572
- "name": "color",
2573
- "description": "Set color of the icon.",
2574
- "values": [
2575
- {
2576
- "name": "error"
2577
- },
2578
- {
2579
- "name": "neutral"
2580
- },
2581
- {
2582
- "name": "primary"
2583
- },
2584
- {
2585
- "name": "secondary"
2586
- },
2587
- {
2588
- "name": "success"
2589
- }
2590
- ]
2591
- },
2592
- {
2593
- "name": "large",
2594
- "description": "Set size to Large."
2595
- },
2596
- {
2597
- "name": "medium",
2598
- "description": "Set size to Medium."
2599
- },
2600
- {
2601
- "name": "name",
2602
- "description": "Choose the icon you want to display. This also sets the aria-label for\nimproved accessibility, helping users who rely on screen readers."
2603
- },
2604
- {
2605
- "name": "size",
2606
- "description": "Adjust the size of the icon to fit your design needs.",
2607
- "values": [
2608
- {
2609
- "name": "lg"
2610
- },
2611
- {
2612
- "name": "md"
2613
- },
2614
- {
2615
- "name": "sm"
2616
- },
2617
- {
2618
- "name": "xl"
2619
- },
2620
- {
2621
- "name": "xs"
2622
- }
2623
- ]
2624
- },
2625
- {
2626
- "name": "small",
2627
- "description": "Set size to Small."
2628
- },
2629
- {
2630
- "name": "xlarge",
2631
- "description": "Set size to ExtraLarge."
2632
- },
2633
- {
2634
- "name": "xsmall",
2635
- "description": "Set size to ExtraSmall."
2636
- }
2637
- ]
2638
- },
2639
- {
2640
- "name": "nv-iconbutton",
2641
- "description": {
2642
- "kind": "markdown",
2643
- "value": "The Icon Button component enhances standard HTML buttons with Nova Design styling and extended functionality. It offers customizable visual emphasis, distinct styling for destructive actions, and built-in accessibility. It allows developers to guide user attention effectively, providing a unified approach to action triggers across your application."
2644
- },
2645
- "attributes": [
2646
- {
2647
- "name": "active",
2648
- "description": "Makes the button look active when it’s within a compatible component\nlike a button group."
2649
- },
2650
- {
2651
- "name": "disabled",
2652
- "description": "Disables the button, preventing user interaction."
2653
- },
2654
- {
2655
- "name": "emphasis",
2656
- "description": "Adjusts the button’s emphasis to make it more or less visually prominent\nto users. Use this to draw attention to important actions or reduce focus\non less critical ones.",
2657
- "values": [
2658
- {
2659
- "name": "high"
2660
- },
2661
- {
2662
- "name": "low"
2663
- },
2664
- {
2665
- "name": "lower"
2666
- },
2667
- {
2668
- "name": "medium"
2669
- }
2670
- ]
2671
- },
2672
- {
2673
- "name": "loading",
2674
- "description": "Set this to true to show a spinner on the button, letting users know that\ntheir action is being processed. It helps improve user experience by\nindicating ongoing activities. The icon is not displayed when the button\nis loading. Also, the button is disabled. If you want to disable the\nbutton, it is not possible. It is automatically disabled when loading."
2675
- },
2676
- {
2677
- "name": "name",
2678
- "description": "Choose the icon you want to display. This also sets the aria-label for\nimproved accessibility, helping users who rely on screen readers.\nThe icon is not displayed when the button is loading."
2679
- },
2680
- {
2681
- "name": "shape",
2682
- "description": "Sets the shape of the button. Choose between square and rounded.",
2683
- "values": [
2684
- {
2685
- "name": "rounded"
2686
- },
2687
- {
2688
- "name": "square"
2689
- }
2690
- ]
2691
- },
2692
- {
2693
- "name": "size",
2694
- "description": "Determines how large or small the button appears, allowing for\ncustomization of the button's dimensions to fit different design\nspecifications and user needs.",
2695
- "values": [
2696
- {
2697
- "name": "lg"
2698
- },
2699
- {
2700
- "name": "md"
2701
- },
2702
- {
2703
- "name": "sm"
2704
- },
2705
- {
2706
- "name": "xs"
2707
- }
2708
- ]
2709
- },
2710
- {
2711
- "name": "type",
2712
- "description": "Sets the button type to control its function in forms. Use 'submit' to send\nform data, 'reset' to clear the form, or 'button' for a standard button\nthat doesn’t interact with form submission by default.",
2713
- "values": [
2714
- {
2715
- "name": "button"
2716
- },
2717
- {
2718
- "name": "reset"
2719
- },
2720
- {
2721
- "name": "submit"
2722
- }
2723
- ]
2724
- }
2725
- ]
2726
- },
2727
- {
2728
- "name": "nv-loader",
2729
- "description": {
2730
- "kind": "markdown",
2731
- "value": "In an application, it is important to inform the user that their interaction has been acknowledged. The `nv-loader` component indicates that the application is waiting for a result from a back-end service or another source."
2732
- },
2733
- "attributes": [
2734
- {
2735
- "name": "color",
2736
- "description": "Choose the color of the loader. Options are primary and white to keep the\ndesign consistent and ensure the loader stands out or blends in\nappropriately with your application’s interface.",
2737
- "values": [
2738
- {
2739
- "name": "brand"
2740
- },
2741
- {
2742
- "name": "white"
2743
- }
2744
- ]
2745
- },
2746
- {
2747
- "name": "size",
2748
- "description": "Choose the size of the loader to best fit your application’s needs, whether\nit’s a small spinner for subtle loading indicators or a large one for more\nprominent displays.",
2749
- "values": [
2750
- {
2751
- "name": "lg"
2752
- },
2753
- {
2754
- "name": "md"
2755
- },
2756
- {
2757
- "name": "sm"
2758
- },
2759
- {
2760
- "name": "xl"
2761
- },
2762
- {
2763
- "name": "xs"
2764
- }
2765
- ]
2766
- }
2767
- ]
2768
- },
2769
- {
2770
- "name": "nv-menu",
2771
- "description": {
2772
- "kind": "markdown",
2773
- "value": "The nv-menu component provides a flexible and accessible menu that can be used for navigation or action-based menus."
2774
- },
2775
- "attributes": [
2776
- {
2777
- "name": "disable-close-on-select",
2778
- "description": "Use this to disable the menu from closing automatically when a menu item is\nselected."
2779
- },
2780
- {
2781
- "name": "items",
2782
- "description": "(New feature) Items to display in the menu, provided as a JSON string.\nFormat: [{ label: string, value?: string, disabled?: boolean, hasSubmenu?: boolean, ... }]"
2783
- },
2784
- {
2785
- "name": "nested",
2786
- "description": "Use this if the menu is nested inside another menu. This will prevent the\nparent menu from closing when the child menu is opened."
2787
- },
2788
- {
2789
- "name": "open",
2790
- "description": "Use this to toggle the initial visibility of the menu, by default the menu\nis hidden."
2791
- },
2792
- {
2793
- "name": "placement",
2794
- "description": "Decides where the menu shows up next to the button it’s linked to (above,\nbelow, to the sides). If there isn’t enough room, it will adjust its\nposition on the axis to fit on the screen, so users can always see it.",
2795
- "values": [
2796
- {
2797
- "name": "bottom"
2798
- },
2799
- {
2800
- "name": "bottom-end"
2801
- },
2802
- {
2803
- "name": "bottom-start"
2804
- },
2805
- {
2806
- "name": "left"
2807
- },
2808
- {
2809
- "name": "left-end"
2810
- },
2811
- {
2812
- "name": "left-start"
2813
- },
2814
- {
2815
- "name": "right"
2816
- },
2817
- {
2818
- "name": "right-end"
2819
- },
2820
- {
2821
- "name": "right-start"
2822
- },
2823
- {
2824
- "name": "top"
2825
- },
2826
- {
2827
- "name": "top-end"
2828
- },
2829
- {
2830
- "name": "top-start"
2831
- }
2832
- ]
2833
- }
2834
- ]
2835
- },
2836
- {
2837
- "name": "nv-menuitem",
2838
- "description": {
2839
- "kind": "markdown",
2840
- "value": "The nv-menuitem component is designed as an individual item within an nv-menu. It provides a flexible, accessible interface for both navigation and action-oriented menu structures, allowing for a cohesive and user-friendly menu experience when combined with other nv-menu elements."
2841
- },
2842
- "attributes": [
2843
- {
2844
- "name": "disabled",
2845
- "description": "Disables the item, preventing user interaction."
2846
- },
2847
- {
2848
- "name": "has-submenu",
2849
- "description": "If the menu item has a submenu, the a caret icon will be displayed."
2850
- },
2851
- {
2852
- "name": "icon",
2853
- "description": "Choose the icon you want to display. This also sets the aria-label for\nimproved accessibility, helping users who rely on screen readers.\nThe icon is not displayed when the button is loading.",
2854
- "values": [
2855
- {
2856
- "name": "home"
2857
- },
2858
- {
2859
- "name": "photo"
2860
- },
2861
- {
2862
- "name": "access-point-off"
2863
- },
2864
- {
2865
- "name": "access-point"
2866
- },
2867
- {
2868
- "name": "accessible"
2869
- },
2870
- {
2871
- "name": "activity"
2872
- },
2873
- {
2874
- "name": "address-book"
2875
- },
2876
- {
2877
- "name": "adjustments-horizontal"
2878
- },
2879
- {
2880
- "name": "adjustments-up"
2881
- },
2882
- {
2883
- "name": "adjustments"
2884
- },
2885
- {
2886
- "name": "affiliate"
2887
- },
2888
- {
2889
- "name": "air-conditioning"
2890
- },
2891
- {
2892
- "name": "alert-circle"
2893
- },
2894
- {
2895
- "name": "align-center"
2896
- },
2897
- {
2898
- "name": "align-left"
2899
- },
2900
- {
2901
- "name": "align-right"
2902
- },
2903
- {
2904
- "name": "app-window"
2905
- },
2906
- {
2907
- "name": "apps"
2908
- },
2909
- {
2910
- "name": "archive"
2911
- },
2912
- {
2913
- "name": "areas"
2914
- },
2915
- {
2916
- "name": "arrow-back-up"
2917
- },
2918
- {
2919
- "name": "arrow-back"
2920
- },
2921
- {
2922
- "name": "arrow-down-left"
2923
- },
2924
- {
2925
- "name": "arrow-down-right"
2926
- },
2927
- {
2928
- "name": "arrow-down"
2929
- },
2930
- {
2931
- "name": "arrow-forward-up"
2932
- },
2933
- {
2934
- "name": "arrow-forward"
2935
- },
2936
- {
2937
- "name": "arrow-left"
2938
- },
2939
- {
2940
- "name": "arrow-right"
2941
- },
2942
- {
2943
- "name": "arrow-up-left"
2944
- },
2945
- {
2946
- "name": "arrow-up-right"
2947
- },
2948
- {
2949
- "name": "arrow-up"
2950
- },
2951
- {
2952
- "name": "arrows-exchange"
2953
- },
2954
- {
2955
- "name": "arrows-move"
2956
- },
2957
- {
2958
- "name": "aspect-ratio"
2959
- },
2960
- {
2961
- "name": "atom"
2962
- },
2963
- {
2964
- "name": "basket"
2965
- },
2966
- {
2967
- "name": "battery-1"
2968
- },
2969
- {
2970
- "name": "battery-2"
2971
- },
2972
- {
2973
- "name": "battery-3"
2974
- },
2975
- {
2976
- "name": "battery-4"
2977
- },
2978
- {
2979
- "name": "battery-automotive"
2980
- },
2981
- {
2982
- "name": "battery-charging"
2983
- },
2984
- {
2985
- "name": "battery-eco"
2986
- },
2987
- {
2988
- "name": "battery-off"
2989
- },
2990
- {
2991
- "name": "battery"
2992
- },
2993
- {
2994
- "name": "bell-off"
2995
- },
2996
- {
2997
- "name": "bell-ringing"
2998
- },
2999
- {
3000
- "name": "bell"
3001
- },
3002
- {
3003
- "name": "bike"
3004
- },
3005
- {
3006
- "name": "bluetooth-connected"
3007
- },
3008
- {
3009
- "name": "bluetooth-off"
3010
- },
3011
- {
3012
- "name": "bluetooth"
3013
- },
3014
- {
3015
- "name": "bolt"
3016
- },
3017
- {
3018
- "name": "book"
3019
- },
3020
- {
3021
- "name": "bookmark-off"
3022
- },
3023
- {
3024
- "name": "bookmark"
3025
- },
3026
- {
3027
- "name": "bookmarks"
3028
- },
3029
- {
3030
- "name": "box-align-top"
3031
- },
3032
- {
3033
- "name": "box-multiple"
3034
- },
3035
- {
3036
- "name": "briefcase"
3037
- },
3038
- {
3039
- "name": "brightness-down"
3040
- },
3041
- {
3042
- "name": "brightness-up"
3043
- },
3044
- {
3045
- "name": "browser-check"
3046
- },
3047
- {
3048
- "name": "browser-plus"
3049
- },
3050
- {
3051
- "name": "browser-x"
3052
- },
3053
- {
3054
- "name": "browser"
3055
- },
3056
- {
3057
- "name": "brush"
3058
- },
3059
- {
3060
- "name": "building-bank"
3061
- },
3062
- {
3063
- "name": "building-factory"
3064
- },
3065
- {
3066
- "name": "building-lighthouse"
3067
- },
3068
- {
3069
- "name": "building-store"
3070
- },
3071
- {
3072
- "name": "building"
3073
- },
3074
- {
3075
- "name": "bulb-off"
3076
- },
3077
- {
3078
- "name": "bulb"
3079
- },
3080
- {
3081
- "name": "cake"
3082
- },
3083
- {
3084
- "name": "calendar-time"
3085
- },
3086
- {
3087
- "name": "calendar"
3088
- },
3089
- {
3090
- "name": "camera-off"
3091
- },
3092
- {
3093
- "name": "camera"
3094
- },
3095
- {
3096
- "name": "car-crane"
3097
- },
3098
- {
3099
- "name": "car"
3100
- },
3101
- {
3102
- "name": "caravan"
3103
- },
3104
- {
3105
- "name": "cash-banknote"
3106
- },
3107
- {
3108
- "name": "cash"
3109
- },
3110
- {
3111
- "name": "cast"
3112
- },
3113
- {
3114
- "name": "cell"
3115
- },
3116
- {
3117
- "name": "charging-pile"
3118
- },
3119
- {
3120
- "name": "chart-arcs"
3121
- },
3122
- {
3123
- "name": "chart-area-line"
3124
- },
3125
- {
3126
- "name": "chart-area"
3127
- },
3128
- {
3129
- "name": "chart-arrows-vertical"
3130
- },
3131
- {
3132
- "name": "chart-arrows"
3133
- },
3134
- {
3135
- "name": "chart-bar"
3136
- },
3137
- {
3138
- "name": "chart-bubble"
3139
- },
3140
- {
3141
- "name": "chart-circles"
3142
- },
3143
- {
3144
- "name": "chart-donut"
3145
- },
3146
- {
3147
- "name": "chart-dots"
3148
- },
3149
- {
3150
- "name": "chart-line"
3151
- },
3152
- {
3153
- "name": "chart-pie"
3154
- },
3155
- {
3156
- "name": "chart-radar"
3157
- },
3158
- {
3159
- "name": "check"
3160
- },
3161
- {
3162
- "name": "checkbox"
3163
- },
3164
- {
3165
- "name": "checklist"
3166
- },
3167
- {
3168
- "name": "checks"
3169
- },
3170
- {
3171
- "name": "chevron-down"
3172
- },
3173
- {
3174
- "name": "chevron-left"
3175
- },
3176
- {
3177
- "name": "chevron-right"
3178
- },
3179
- {
3180
- "name": "chevron-top"
3181
- },
3182
- {
3183
- "name": "chevrons-left"
3184
- },
3185
- {
3186
- "name": "chevrons-right"
3187
- },
3188
- {
3189
- "name": "circle-caret-right"
3190
- },
3191
- {
3192
- "name": "circle-check"
3193
- },
3194
- {
3195
- "name": "circle-x"
3196
- },
3197
- {
3198
- "name": "circuit-alternate"
3199
- },
3200
- {
3201
- "name": "circuit-ground-digital"
3202
- },
3203
- {
3204
- "name": "clipboard-check"
3205
- },
3206
- {
3207
- "name": "clipboard-list"
3208
- },
3209
- {
3210
- "name": "clipboard-plus"
3211
- },
3212
- {
3213
- "name": "clipboard-text"
3214
- },
3215
- {
3216
- "name": "clipboard-x"
3217
- },
3218
- {
3219
- "name": "clipboard"
3220
- },
3221
- {
3222
- "name": "clock-edit"
3223
- },
3224
- {
3225
- "name": "clock"
3226
- },
3227
- {
3228
- "name": "cloud-data-connection"
3229
- },
3230
- {
3231
- "name": "cloud-download"
3232
- },
3233
- {
3234
- "name": "cloud-rain"
3235
- },
3236
- {
3237
- "name": "cloud-snow"
3238
- },
3239
- {
3240
- "name": "cloud-upload"
3241
- },
3242
- {
3243
- "name": "cloud"
3244
- },
3245
- {
3246
- "name": "color-picker"
3247
- },
3248
- {
3249
- "name": "color-swatch"
3250
- },
3251
- {
3252
- "name": "compass"
3253
- },
3254
- {
3255
- "name": "contract"
3256
- },
3257
- {
3258
- "name": "copy"
3259
- },
3260
- {
3261
- "name": "cpu"
3262
- },
3263
- {
3264
- "name": "crane"
3265
- },
3266
- {
3267
- "name": "credit-card"
3268
- },
3269
- {
3270
- "name": "crop"
3271
- },
3272
- {
3273
- "name": "cross"
3274
- },
3275
- {
3276
- "name": "crown"
3277
- },
3278
- {
3279
- "name": "currency-bitcoin"
3280
- },
3281
- {
3282
- "name": "currency-dollar"
3283
- },
3284
- {
3285
- "name": "currency-ethereum"
3286
- },
3287
- {
3288
- "name": "currency-euro"
3289
- },
3290
- {
3291
- "name": "cut"
3292
- },
3293
- {
3294
- "name": "dashboard"
3295
- },
3296
- {
3297
- "name": "database"
3298
- },
3299
- {
3300
- "name": "device-desktop"
3301
- },
3302
- {
3303
- "name": "device-floppy"
3304
- },
3305
- {
3306
- "name": "device-gamepad"
3307
- },
3308
- {
3309
- "name": "device-laptop"
3310
- },
3311
- {
3312
- "name": "device-mobile-rotated"
3313
- },
3314
- {
3315
- "name": "device-mobile"
3316
- },
3317
- {
3318
- "name": "device-tablet"
3319
- },
3320
- {
3321
- "name": "device-watch"
3322
- },
3323
- {
3324
- "name": "devices"
3325
- },
3326
- {
3327
- "name": "dialpad"
3328
- },
3329
- {
3330
- "name": "direction-horizontal"
3331
- },
3332
- {
3333
- "name": "direction-sign"
3334
- },
3335
- {
3336
- "name": "direction"
3337
- },
3338
- {
3339
- "name": "discount"
3340
- },
3341
- {
3342
- "name": "door-enter"
3343
- },
3344
- {
3345
- "name": "door-exit"
3346
- },
3347
- {
3348
- "name": "door-off"
3349
- },
3350
- {
3351
- "name": "dots-vertical"
3352
- },
3353
- {
3354
- "name": "dots"
3355
- },
3356
- {
3357
- "name": "download"
3358
- },
3359
- {
3360
- "name": "drone"
3361
- },
3362
- {
3363
- "name": "droplet-filled"
3364
- },
3365
- {
3366
- "name": "droplet-half"
3367
- },
3368
- {
3369
- "name": "droplet"
3370
- },
3371
- {
3372
- "name": "droplets"
3373
- },
3374
- {
3375
- "name": "edit"
3376
- },
3377
- {
3378
- "name": "engine"
3379
- },
3380
- {
3381
- "name": "external-link"
3382
- },
3383
- {
3384
- "name": "eye-off"
3385
- },
3386
- {
3387
- "name": "eye"
3388
- },
3389
- {
3390
- "name": "face-id"
3391
- },
3392
- {
3393
- "name": "feather"
3394
- },
3395
- {
3396
- "name": "file-alert"
3397
- },
3398
- {
3399
- "name": "file-analytics"
3400
- },
3401
- {
3402
- "name": "file-check"
3403
- },
3404
- {
3405
- "name": "file-code"
3406
- },
3407
- {
3408
- "name": "file-download"
3409
- },
3410
- {
3411
- "name": "file-export"
3412
- },
3413
- {
3414
- "name": "file-horizontal"
3415
- },
3416
- {
3417
- "name": "file-import"
3418
- },
3419
- {
3420
- "name": "file-plus"
3421
- },
3422
- {
3423
- "name": "file-search"
3424
- },
3425
- {
3426
- "name": "file-text-bookmark"
3427
- },
3428
- {
3429
- "name": "file-text"
3430
- },
3431
- {
3432
- "name": "file-type-bmp"
3433
- },
3434
- {
3435
- "name": "file-type-css"
3436
- },
3437
- {
3438
- "name": "file-type-csv"
3439
- },
3440
- {
3441
- "name": "file-type-doc"
3442
- },
3443
- {
3444
- "name": "file-type-html"
3445
- },
3446
- {
3447
- "name": "file-type-jpg"
3448
- },
3449
- {
3450
- "name": "file-type-js"
3451
- },
3452
- {
3453
- "name": "file-type-pdf"
3454
- },
3455
- {
3456
- "name": "file-type-png"
3457
- },
3458
- {
3459
- "name": "file-type-ppt"
3460
- },
3461
- {
3462
- "name": "file-type-xls"
3463
- },
3464
- {
3465
- "name": "file-type-xml"
3466
- },
3467
- {
3468
- "name": "file-type-zip"
3469
- },
3470
- {
3471
- "name": "file-upload"
3472
- },
3473
- {
3474
- "name": "file-x"
3475
- },
3476
- {
3477
- "name": "file-zip"
3478
- },
3479
- {
3480
- "name": "file"
3481
- },
3482
- {
3483
- "name": "files-off"
3484
- },
3485
- {
3486
- "name": "files"
3487
- },
3488
- {
3489
- "name": "filter-off"
3490
- },
3491
- {
3492
- "name": "filter-sort"
3493
- },
3494
- {
3495
- "name": "filter"
3496
- },
3497
- {
3498
- "name": "fingerprint"
3499
- },
3500
- {
3501
- "name": "fire-extinguisher"
3502
- },
3503
- {
3504
- "name": "flag"
3505
- },
3506
- {
3507
- "name": "flame"
3508
- },
3509
- {
3510
- "name": "flip-horizontal"
3511
- },
3512
- {
3513
- "name": "flip-vertical"
3514
- },
3515
- {
3516
- "name": "folder-minus"
3517
- },
3518
- {
3519
- "name": "folder-off"
3520
- },
3521
- {
3522
- "name": "folder-plus"
3523
- },
3524
- {
3525
- "name": "folder-x"
3526
- },
3527
- {
3528
- "name": "folder"
3529
- },
3530
- {
3531
- "name": "folders"
3532
- },
3533
- {
3534
- "name": "frame"
3535
- },
3536
- {
3537
- "name": "gas-station"
3538
- },
3539
- {
3540
- "name": "gauge-off"
3541
- },
3542
- {
3543
- "name": "gauge"
3544
- },
3545
- {
3546
- "name": "gift"
3547
- },
3548
- {
3549
- "name": "gps"
3550
- },
3551
- {
3552
- "name": "grid-dots"
3553
- },
3554
- {
3555
- "name": "grip-horizontal"
3556
- },
3557
- {
3558
- "name": "grip-vertical"
3559
- },
3560
- {
3561
- "name": "hand-stop"
3562
- },
3563
- {
3564
- "name": "hand-waving"
3565
- },
3566
- {
3567
- "name": "hash"
3568
- },
3569
- {
3570
- "name": "haze"
3571
- },
3572
- {
3573
- "name": "headphones-off"
3574
- },
3575
- {
3576
- "name": "headphones"
3577
- },
3578
- {
3579
- "name": "headset"
3580
- },
3581
- {
3582
- "name": "helicopter"
3583
- },
3584
- {
3585
- "name": "help"
3586
- },
3587
- {
3588
- "name": "history"
3589
- },
3590
- {
3591
- "name": "hourglass-empty"
3592
- },
3593
- {
3594
- "name": "hourglass-high"
3595
- },
3596
- {
3597
- "name": "hourglass-low"
3598
- },
3599
- {
3600
- "name": "hourglass-off"
3601
- },
3602
- {
3603
- "name": "hourglass"
3604
- },
3605
- {
3606
- "name": "inbox"
3607
- },
3608
- {
3609
- "name": "info-circle"
3610
- },
3611
- {
3612
- "name": "keyboard-hide"
3613
- },
3614
- {
3615
- "name": "keyboard-show"
3616
- },
3617
- {
3618
- "name": "keyboard"
3619
- },
3620
- {
3621
- "name": "layout-board-split"
3622
- },
3623
- {
3624
- "name": "layout-dashboard"
3625
- },
3626
- {
3627
- "name": "layout-grid"
3628
- },
3629
- {
3630
- "name": "layout-sidebar-left-collapse"
3631
- },
3632
- {
3633
- "name": "layout-sidebar-left-expand"
3634
- },
3635
- {
3636
- "name": "layout-sidebar-right-collapse"
3637
- },
3638
- {
3639
- "name": "layout-sidebar-right-expand"
3640
- },
3641
- {
3642
- "name": "layout"
3643
- },
3644
- {
3645
- "name": "leaf"
3646
- },
3647
- {
3648
- "name": "lifebuoy"
3649
- },
3650
- {
3651
- "name": "link"
3652
- },
3653
- {
3654
- "name": "list-search"
3655
- },
3656
- {
3657
- "name": "list"
3658
- },
3659
- {
3660
- "name": "loader"
3661
- },
3662
- {
3663
- "name": "location"
3664
- },
3665
- {
3666
- "name": "lock-off"
3667
- },
3668
- {
3669
- "name": "lock-open"
3670
- },
3671
- {
3672
- "name": "lock"
3673
- },
3674
- {
3675
- "name": "login"
3676
- },
3677
- {
3678
- "name": "logout"
3679
- },
3680
- {
3681
- "name": "mail-forward"
3682
- },
3683
- {
3684
- "name": "mail-opened"
3685
- },
3686
- {
3687
- "name": "mail"
3688
- },
3689
- {
3690
- "name": "map-pin-off"
3691
- },
3692
- {
3693
- "name": "map-pin"
3694
- },
3695
- {
3696
- "name": "map"
3697
- },
3698
- {
3699
- "name": "menu"
3700
- },
3701
- {
3702
- "name": "message-dots"
3703
- },
3704
- {
3705
- "name": "message-off"
3706
- },
3707
- {
3708
- "name": "message"
3709
- },
3710
- {
3711
- "name": "messages"
3712
- },
3713
- {
3714
- "name": "microphone-off"
3715
- },
3716
- {
3717
- "name": "microphone"
3718
- },
3719
- {
3720
- "name": "minus"
3721
- },
3722
- {
3723
- "name": "mist"
3724
- },
3725
- {
3726
- "name": "moon"
3727
- },
3728
- {
3729
- "name": "motorbike"
3730
- },
3731
- {
3732
- "name": "mouse"
3733
- },
3734
- {
3735
- "name": "movie"
3736
- },
3737
- {
3738
- "name": "network"
3739
- },
3740
- {
3741
- "name": "news"
3742
- },
3743
- {
3744
- "name": "note"
3745
- },
3746
- {
3747
- "name": "notebook"
3748
- },
3749
- {
3750
- "name": "notes"
3751
- },
3752
- {
3753
- "name": "offshore-station"
3754
- },
3755
- {
3756
- "name": "package"
3757
- },
3758
- {
3759
- "name": "palette"
3760
- },
3761
- {
3762
- "name": "paperclip"
3763
- },
3764
- {
3765
- "name": "pencil"
3766
- },
3767
- {
3768
- "name": "phone-call"
3769
- },
3770
- {
3771
- "name": "phone-calling"
3772
- },
3773
- {
3774
- "name": "phone-check"
3775
- },
3776
- {
3777
- "name": "phone-incoming"
3778
- },
3779
- {
3780
- "name": "phone-off"
3781
- },
3782
- {
3783
- "name": "phone-outgoing"
3784
- },
3785
- {
3786
- "name": "phone"
3787
- },
3788
- {
3789
- "name": "photo-off"
3790
- },
3791
- {
3792
- "name": "pig"
3793
- },
3794
- {
3795
- "name": "pin"
3796
- },
3797
- {
3798
- "name": "pinned-off"
3799
- },
3800
- {
3801
- "name": "pinned"
3802
- },
3803
- {
3804
- "name": "plane-off"
3805
- },
3806
- {
3807
- "name": "plane"
3808
- },
3809
- {
3810
- "name": "plant"
3811
- },
3812
- {
3813
- "name": "player-pause"
3814
- },
3815
- {
3816
- "name": "player-play"
3817
- },
3818
- {
3819
- "name": "player-skip-back"
3820
- },
3821
- {
3822
- "name": "player-skip-forward"
3823
- },
3824
- {
3825
- "name": "player-stop"
3826
- },
3827
- {
3828
- "name": "player-track-next"
3829
- },
3830
- {
3831
- "name": "player-track-prev"
3832
- },
3833
- {
3834
- "name": "plug-connected"
3835
- },
3836
- {
3837
- "name": "plug"
3838
- },
3839
- {
3840
- "name": "plus"
3841
- },
3842
- {
3843
- "name": "power-ac"
3844
- },
3845
- {
3846
- "name": "power-dc"
3847
- },
3848
- {
3849
- "name": "power"
3850
- },
3851
- {
3852
- "name": "presentation-analytics"
3853
- },
3854
- {
3855
- "name": "presentation"
3856
- },
3857
- {
3858
- "name": "printer"
3859
- },
3860
- {
3861
- "name": "propeller"
3862
- },
3863
- {
3864
- "name": "published"
3865
- },
3866
- {
3867
- "name": "puzzle-2"
3868
- },
3869
- {
3870
- "name": "puzzle"
3871
- },
3872
- {
3873
- "name": "pylon"
3874
- },
3875
- {
3876
- "name": "qrcode"
3877
- },
3878
- {
3879
- "name": "radar"
3880
- },
3881
- {
3882
- "name": "radio"
3883
- },
3884
- {
3885
- "name": "radioactive"
3886
- },
3887
- {
3888
- "name": "receipt-dollar"
3889
- },
3890
- {
3891
- "name": "receipt-euro"
3892
- },
3893
- {
3894
- "name": "receipt"
3895
- },
3896
- {
3897
- "name": "recharging"
3898
- },
3899
- {
3900
- "name": "recycle"
3901
- },
3902
- {
3903
- "name": "refresh-alert"
3904
- },
3905
- {
3906
- "name": "refresh"
3907
- },
3908
- {
3909
- "name": "repeat-once"
3910
- },
3911
- {
3912
- "name": "repeat"
3913
- },
3914
- {
3915
- "name": "replace"
3916
- },
3917
- {
3918
- "name": "report-analytics"
3919
- },
3920
- {
3921
- "name": "report-medical"
3922
- },
3923
- {
3924
- "name": "report-search"
3925
- },
3926
- {
3927
- "name": "report"
3928
- },
3929
- {
3930
- "name": "ripple-off"
3931
- },
3932
- {
3933
- "name": "ripple"
3934
- },
3935
- {
3936
- "name": "rocket"
3937
- },
3938
- {
3939
- "name": "rotate-2"
3940
- },
3941
- {
3942
- "name": "rotate-clockwise-2"
3943
- },
3944
- {
3945
- "name": "rotate-clockwise"
3946
- },
3947
- {
3948
- "name": "rotate-dot"
3949
- },
3950
- {
3951
- "name": "rotate"
3952
- },
3953
- {
3954
- "name": "router"
3955
- },
3956
- {
3957
- "name": "ruler-measure"
3958
- },
3959
- {
3960
- "name": "satellite"
3961
- },
3962
- {
3963
- "name": "scale"
3964
- },
3965
- {
3966
- "name": "school"
3967
- },
3968
- {
3969
- "name": "scissors"
3970
- },
3971
- {
3972
- "name": "scooter-electric"
3973
- },
3974
- {
3975
- "name": "screenshot"
3976
- },
3977
- {
3978
- "name": "search"
3979
- },
3980
- {
3981
- "name": "seeding"
3982
- },
3983
- {
3984
- "name": "select"
3985
- },
3986
- {
3987
- "name": "selector"
3988
- },
3989
- {
3990
- "name": "send"
3991
- },
3992
- {
3993
- "name": "server"
3994
- },
3995
- {
3996
- "name": "settings"
3997
- },
3998
- {
3999
- "name": "shape"
4000
- },
4001
- {
4002
- "name": "share-2"
4003
- },
4004
- {
4005
- "name": "share"
4006
- },
4007
- {
4008
- "name": "shield-check"
4009
- },
4010
- {
4011
- "name": "shield-lock"
4012
- },
4013
- {
4014
- "name": "shield-off"
4015
- },
4016
- {
4017
- "name": "shield-x"
4018
- },
4019
- {
4020
- "name": "shield"
4021
- },
4022
- {
4023
- "name": "ship-off"
4024
- },
4025
- {
4026
- "name": "ship"
4027
- },
4028
- {
4029
- "name": "shopping-cart"
4030
- },
4031
- {
4032
- "name": "slash"
4033
- },
4034
- {
4035
- "name": "smart-home"
4036
- },
4037
- {
4038
- "name": "snowflake"
4039
- },
4040
- {
4041
- "name": "solar-panel"
4042
- },
4043
- {
4044
- "name": "sort-ascending-letters"
4045
- },
4046
- {
4047
- "name": "sort-ascending-numbers"
4048
- },
4049
- {
4050
- "name": "sort-descending-letters"
4051
- },
4052
- {
4053
- "name": "sort-descending-numbers"
4054
- },
4055
- {
4056
- "name": "spacing-horizontal"
4057
- },
4058
- {
4059
- "name": "spacing-vertical"
4060
- },
4061
- {
4062
- "name": "speakerphone"
4063
- },
4064
- {
4065
- "name": "stack"
4066
- },
4067
- {
4068
- "name": "stairs"
4069
- },
4070
- {
4071
- "name": "star"
4072
- },
4073
- {
4074
- "name": "sun"
4075
- },
4076
- {
4077
- "name": "sunrise"
4078
- },
4079
- {
4080
- "name": "sunset"
4081
- },
4082
- {
4083
- "name": "switch-horizontal"
4084
- },
4085
- {
4086
- "name": "switch-vertical"
4087
- },
4088
- {
4089
- "name": "table"
4090
- },
4091
- {
4092
- "name": "tag"
4093
- },
4094
- {
4095
- "name": "tank-empty-fill"
4096
- },
4097
- {
4098
- "name": "tank-full-fill"
4099
- },
4100
- {
4101
- "name": "tank-medium-fill"
4102
- },
4103
- {
4104
- "name": "temperature-off"
4105
- },
4106
- {
4107
- "name": "temperature"
4108
- },
4109
- {
4110
- "name": "template"
4111
- },
4112
- {
4113
- "name": "terminal"
4114
- },
4115
- {
4116
- "name": "text-size"
4117
- },
4118
- {
4119
- "name": "text"
4120
- },
4121
- {
4122
- "name": "thumb-down"
4123
- },
4124
- {
4125
- "name": "thumb-up"
4126
- },
4127
- {
4128
- "name": "ticket"
4129
- },
4130
- {
4131
- "name": "timeline"
4132
- },
4133
- {
4134
- "name": "tir"
4135
- },
4136
- {
4137
- "name": "tool"
4138
- },
4139
- {
4140
- "name": "tools"
4141
- },
4142
- {
4143
- "name": "train"
4144
- },
4145
- {
4146
- "name": "trash-off"
4147
- },
4148
- {
4149
- "name": "trash"
4150
- },
4151
- {
4152
- "name": "tree"
4153
- },
4154
- {
4155
- "name": "trees"
4156
- },
4157
- {
4158
- "name": "truck-delivery"
4159
- },
4160
- {
4161
- "name": "truck"
4162
- },
4163
- {
4164
- "name": "umbrella"
4165
- },
4166
- {
4167
- "name": "unlink"
4168
- },
4169
- {
4170
- "name": "upload"
4171
- },
4172
- {
4173
- "name": "user-circle"
4174
- },
4175
- {
4176
- "name": "user-minus"
4177
- },
4178
- {
4179
- "name": "user-plus"
4180
- },
4181
- {
4182
- "name": "user-worker"
4183
- },
4184
- {
4185
- "name": "user"
4186
- },
4187
- {
4188
- "name": "users"
4189
- },
4190
- {
4191
- "name": "versions"
4192
- },
4193
- {
4194
- "name": "video-minus"
4195
- },
4196
- {
4197
- "name": "video-off"
4198
- },
4199
- {
4200
- "name": "video-plus"
4201
- },
4202
- {
4203
- "name": "video"
4204
- },
4205
- {
4206
- "name": "volume-2"
4207
- },
4208
- {
4209
- "name": "volume-3"
4210
- },
4211
- {
4212
- "name": "volume"
4213
- },
4214
- {
4215
- "name": "wallet"
4216
- },
4217
- {
4218
- "name": "wand"
4219
- },
4220
- {
4221
- "name": "wave"
4222
- },
4223
- {
4224
- "name": "waves"
4225
- },
4226
- {
4227
- "name": "wifi-off"
4228
- },
4229
- {
4230
- "name": "wifi"
4231
- },
4232
- {
4233
- "name": "wind-direction"
4234
- },
4235
- {
4236
- "name": "wind"
4237
- },
4238
- {
4239
- "name": "windmill"
4240
- },
4241
- {
4242
- "name": "wood"
4243
- },
4244
- {
4245
- "name": "world"
4246
- },
4247
- {
4248
- "name": "writing"
4249
- },
4250
- {
4251
- "name": "x"
4252
- },
4253
- {
4254
- "name": "zoom-reset"
4255
- }
4256
- ]
4257
- },
4258
- {
4259
- "name": "label",
4260
- "description": "Text content for the menu item. If a more custom approach is needed, use\nthe default slot instead."
4261
- },
4262
- {
4263
- "name": "name",
4264
- "description": "Represents the identifier or name associated with the menu item. This value\nwill be emitted as part of the event data when the menu item is selected,\nenabling event handlers to identify the chosen item."
4265
- },
4266
- {
4267
- "name": "shortcut",
4268
- "description": "Show a shortcut key for the action represented in the menu item."
4269
- }
4270
- ]
4271
- },
4272
- {
4273
- "name": "nv-popover",
4274
- "description": {
4275
- "kind": "markdown",
4276
- "value": "The Popover component displays rich, interactive content when users click or focus on a target element, offering customizable positioning and behavior for dynamic UI interactions."
4277
- },
4278
- "attributes": [
4279
- {
4280
- "name": "disable-flip",
4281
- "description": "Disables the automatic flipping of the popover when the trigger element is\nout of the viewport. The popover will flip automatically by default."
4282
- },
4283
- {
4284
- "name": "enter-delay",
4285
- "description": "Use this to set a delay before the popover appears on hover. If the mouse\nleaves before this time, the popover won't show. This only works when the\ntrigger mode is set to `hover`."
4286
- },
4287
- {
4288
- "name": "group-name",
4289
- "description": "Use this to group popovers together so that opening one will not animate\nthe closing of another. This is helpful when popovers are placed close\ntogether, preventing animation overlap."
4290
- },
4291
- {
4292
- "name": "has-arrow",
4293
- "description": "Use this to decide if the popover should include a small arrow pointing to\nthe trigger element, making the connection between them more clear."
4294
- },
4295
- {
4296
- "name": "nested",
4297
- "description": "Use this to set the popover to be nested inside another popover. This will\nprevent the parent popover from closing when the child popover is opened."
4298
- },
4299
- {
4300
- "name": "offset",
4301
- "description": "Adjust the gap between the popover and its trigger element by setting how\nmany pixels they should be apart."
4302
- },
4303
- {
4304
- "name": "open",
4305
- "description": "Use this prop to toggle the visibility of the popover. Set to true to show\nthe popover and false to hide it."
4306
- },
4307
- {
4308
- "name": "placement",
4309
- "description": "Defines where the popover appears relative to the trigger.",
4310
- "values": [
4311
- {
4312
- "name": "bottom"
4313
- },
4314
- {
4315
- "name": "bottom-end"
4316
- },
4317
- {
4318
- "name": "bottom-start"
4319
- },
4320
- {
4321
- "name": "left"
4322
- },
4323
- {
4324
- "name": "left-end"
4325
- },
4326
- {
4327
- "name": "left-start"
4328
- },
4329
- {
4330
- "name": "right"
4331
- },
4332
- {
4333
- "name": "right-end"
4334
- },
4335
- {
4336
- "name": "right-start"
4337
- },
4338
- {
4339
- "name": "top"
4340
- },
4341
- {
4342
- "name": "top-end"
4343
- },
4344
- {
4345
- "name": "top-start"
4346
- }
4347
- ]
4348
- },
4349
- {
4350
- "name": "shift-padding",
4351
- "description": "Sets how many pixels the popover should stay from the edge of the viewport."
4352
- },
4353
- {
4354
- "name": "trigger-mode",
4355
- "description": "Sets the interaction mode for triggering the popover. Options include:\n- `hover`: The popover is shown on trigger hover.\n- `click`: The popover toggles on trigger click.\n- `controlled`: The visibility is managed manually through methods or the\n open prop.",
4356
- "values": [
4357
- {
4358
- "name": "click"
4359
- },
4360
- {
4361
- "name": "controlled"
4362
- },
4363
- {
4364
- "name": "hover"
4365
- }
4366
- ]
4367
- }
4368
- ]
4369
- },
4370
- {
4371
- "name": "nv-row",
4372
- "description": {
4373
- "kind": "markdown",
4374
- "value": "The `nv-row` component is a \"row\" that contains columns. It typically includes `nv-col` components or other components with the `Size` parameter defined."
4375
- },
4376
- "attributes": []
4377
- },
4378
- {
4379
- "name": "nv-stack",
4380
- "description": {
4381
- "kind": "markdown",
4382
- "value": "The `nv-stack` component is useful for dividing block content into horizontal areas. These areas can contain almost any elements, such as a title, a button, a text input, or simple text."
4383
- },
4384
- "attributes": [
4385
- {
4386
- "name": "fill",
4387
- "description": "Fill will force the children to fill the stack depending of the direction\nof the stack. In horizontal position, the children take the height of the\nstack. In vertical position, the children take the width of the stack."
4388
- },
4389
- {
4390
- "name": "flex",
4391
- "description": "Flex will force the children to share the stack between the children\ndepending of the direction of the stack. In horizontal position, the\nchildren width will share the width of the stack. In vertical position,\nthe children height will share the height of the stack."
4392
- },
4393
- {
4394
- "name": "full",
4395
- "description": "Full set the width of the stack to 100%.\n(same effect as WFull props)"
4396
- },
4397
- {
4398
- "name": "gutter",
4399
- "description": "Gutter refers to the space that exists between children components inside\nthe stack container."
4400
- },
4401
- {
4402
- "name": "vertical",
4403
- "description": "Display the element of the stack vertically."
4404
- }
4405
- ]
4406
- },
4407
- {
4408
- "name": "nv-table",
4409
- "description": {
4410
- "kind": "markdown",
4411
- "value": "The nv-table is an example component that only show a simple table.\n\nThe `<table>` HTML element represents tabular data�that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data."
4412
- },
4413
- "attributes": [
4414
- {
4415
- "name": "columns-config-json",
4416
- "description": "Configuration of the columns of the table"
4417
- },
4418
- {
4419
- "name": "data-json",
4420
- "description": "Data to be displayed in the table"
4421
- },
4422
- {
4423
- "name": "fallback-value",
4424
- "description": "Fallback value to be displayed when data is not available"
4425
- },
4426
- {
4427
- "name": "no-columns-no-data-message",
4428
- "description": "The message to display when there are no columns or data available."
4429
- },
4430
- {
4431
- "name": "no-data-message",
4432
- "description": "Message to be displayed when no data is available"
4433
- }
4434
- ]
4435
- },
4436
- {
4437
- "name": "nv-tablecolumn",
4438
- "description": {
4439
- "kind": "markdown",
4440
- "value": "Helper Component for nv-table"
4441
- },
4442
- "attributes": [
4443
- {
4444
- "name": "header",
4445
- "description": "Header of the column to be displayed"
4446
- },
4447
- {
4448
- "name": "name",
4449
- "description": "Name of the column and data accessor"
4450
- }
4451
- ]
4452
- },
4453
- {
4454
- "name": "nv-toggle",
4455
- "description": {
4456
- "kind": "markdown",
4457
- "value": "The nv-toggle component is a component that allows the user to toggle between two states. It is a styled checkbox input with a label that can be positioned before or after the checkbox. The nv-toggle component is a wrapper around the native input[type=\"checkbox\"] element."
4458
- },
4459
- "attributes": [
4460
- {
4461
- "name": "checked",
4462
- "description": "Indicates whether the toggle is checked or not."
4463
- },
4464
- {
4465
- "name": "description",
4466
- "description": "A description providing additional context or information about the\ntoggle."
4467
- },
4468
- {
4469
- "name": "disabled",
4470
- "description": "Disables the toggle, preventing user interaction."
4471
- },
4472
- {
4473
- "name": "hide-label",
4474
- "description": "Hides the label visually while still keeping it available for screen\nreaders."
4475
- },
4476
- {
4477
- "name": "input-id",
4478
- "description": "Sets the ID for the radio button’s input element and the for attribute of\nthe associated label. If no ID is provided, a random one will be\nautomatically generated to ensure unique identification, facilitating\nproper label association and accessibility."
4479
- },
4480
- {
4481
- "name": "label",
4482
- "description": "The label displayed next to the toggle."
4483
- },
4484
- {
4485
- "name": "label-placement",
4486
- "description": "Determines the position of the label relative to the toggle, either\n'start' (before) or 'end' (after).",
4487
- "values": [
4488
- {
4489
- "name": "after"
4490
- },
4491
- {
4492
- "name": "before"
4493
- }
4494
- ]
4495
- },
4496
- {
4497
- "name": "name",
4498
- "description": "The name attribute for the toggle input, used to reference the form data\nafter submission."
4499
- },
4500
- {
4501
- "name": "readonly",
4502
- "description": "Sets the toggle to read-only, preventing user changes but still allowing\nfocus and selection of text."
4503
- },
4504
- {
4505
- "name": "value",
4506
- "description": "The value attribute of the toggle input, representing the value sent on\nform submission when the toggle is checked."
4507
- }
4508
- ]
4509
- },
4510
- {
4511
- "name": "nv-tooltip",
4512
- "description": {
4513
- "kind": "markdown",
4514
- "value": "The Tooltip component provides brief, contextual information on hover or focus, ideal for clarifying UI elements with a lightweight and customizable design."
4515
- },
4516
- "attributes": [
4517
- {
4518
- "name": "enter-delay",
4519
- "description": "Controls how long (in milliseconds) the tooltip waits to show after you\nhover over or focus on an element. If you move away before the delay is up,\nthe tooltip won’t appear."
4520
- },
4521
- {
4522
- "name": "message",
4523
- "description": "A string representing the text to be displayed inside the tooltip. This\ncontent is shown when the tooltip is activated by the user, such as on\nhover or focus events."
4524
- },
4525
- {
4526
- "name": "placement",
4527
- "description": "Decides where the tooltip shows up next to the element it’s linked to\n(above, below, to the sides). If there isn’t enough room, it will adjust\nit's position on the axis to fit on the screen, so users can always see it.",
4528
- "values": [
4529
- {
4530
- "name": "bottom"
4531
- },
4532
- {
4533
- "name": "bottom-end"
4534
- },
4535
- {
4536
- "name": "bottom-start"
4537
- },
4538
- {
4539
- "name": "left"
4540
- },
4541
- {
4542
- "name": "left-end"
4543
- },
4544
- {
4545
- "name": "left-start"
4546
- },
4547
- {
4548
- "name": "right"
4549
- },
4550
- {
4551
- "name": "right-end"
4552
- },
4553
- {
4554
- "name": "right-start"
4555
- },
4556
- {
4557
- "name": "top"
4558
- },
4559
- {
4560
- "name": "top-end"
4561
- },
4562
- {
4563
- "name": "top-start"
4564
- }
4565
- ]
4566
- }
4567
- ]
4568
- }
4569
- ]
4570
- }