@nanoporetech-digital/components-vue 7.9.2 → 8.0.0-alpha.0

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.
Files changed (9) hide show
  1. package/dist/index.cjs +325 -144
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.js +313 -144
  4. package/dist/index.js.map +1 -1
  5. package/dist/proxies.d.ts +14 -2
  6. package/dist/vetur/attributes.json +480 -364
  7. package/dist/vetur/tags.json +178 -94
  8. package/dist/web-types.json +1780 -1249
  9. package/package.json +3 -2
package/dist/web-types.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "$schema": "http://json.schemastore.org/web-types",
3
3
  "framework": "vue",
4
4
  "name": "@nanoporetech-digital/components-vue",
5
- "version": "7.9.1",
5
+ "version": "7.9.0",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "types-syntax": "typescript",
@@ -11,22 +11,12 @@
11
11
  {
12
12
  "name": "NanoAccordion",
13
13
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-accordion",
14
- "description": "Simple accordion - only one item open at a time - must be used with [details](story/components-accordion--details) elements.",
14
+ "description": "Groups multiple details elements together, allowing only one to be open at a time.",
15
15
  "source": {
16
16
  "module": "@nanoporetech-digital/components/src/components/accordion/accordion.d.ts",
17
17
  "symbol": "Accordion"
18
18
  },
19
- "attributes": [
20
- {
21
- "name": "color",
22
- "description": "Color to use from the color palette.",
23
- "required": false,
24
- "value": {
25
- "kind": "expression",
26
- "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\""
27
- }
28
- }
29
- ],
19
+ "attributes": [],
30
20
  "slots": [],
31
21
  "events": [
32
22
  {
@@ -35,7 +25,7 @@
35
25
  "arguments": [
36
26
  {
37
27
  "name": "detail",
38
- "type": "any"
28
+ "type": "HTMLNanoDetailsElement"
39
29
  }
40
30
  ]
41
31
  }
@@ -66,7 +56,17 @@
66
56
  "required": false,
67
57
  "value": {
68
58
  "kind": "expression",
69
- "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\""
59
+ "type": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\""
60
+ }
61
+ },
62
+ {
63
+ "name": "countdown",
64
+ "description": "Enables a countdown that indicates the remaining time the alert will be displayed.\nTypically used to indicate the remaining time before a whole app refresh.",
65
+ "required": false,
66
+ "default": "true",
67
+ "value": {
68
+ "kind": "expression",
69
+ "type": "boolean"
70
70
  }
71
71
  },
72
72
  {
@@ -98,20 +98,37 @@
98
98
  "kind": "expression",
99
99
  "type": "boolean"
100
100
  }
101
+ },
102
+ {
103
+ "name": "theme",
104
+ "description": "The color to use from the application's color palette.",
105
+ "required": false,
106
+ "value": {
107
+ "kind": "expression",
108
+ "type": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\""
109
+ }
101
110
  }
102
111
  ],
103
112
  "slots": [
104
113
  {
105
114
  "name": "default",
106
- "description": "The alert's content."
115
+ "description": "The alert's body content."
107
116
  },
108
117
  {
109
118
  "name": "footer",
110
119
  "description": "Place items at the bottom of the alert. Best used with `button` elements - esp when used as with the `alert()` method."
111
120
  },
121
+ {
122
+ "name": "heading",
123
+ "description": "a themed piece of text, normally used to quick flag to the user the type of alert (e.g. 'Error', 'Warning', 'Success')"
124
+ },
112
125
  {
113
126
  "name": "icon",
114
127
  "description": "An icon to show in the alert."
128
+ },
129
+ {
130
+ "name": "title",
131
+ "description": "A title for the alert."
115
132
  }
116
133
  ],
117
134
  "events": [
@@ -265,7 +282,7 @@
265
282
  }
266
283
  },
267
284
  {
268
- "name": "searchIndex",
285
+ "name": "search-index",
269
286
  "description": "Algolia search index. Used in conjunction with 'apiKey' & 'appId'.\n```\n{ index: string, // algolia index name\n domain?: string, // used in template filters to resolve incomplete url fields\n filters?: [string], // algolia facets to retrive\n hitsPerPage?: number,\n name?: string // human readable index name\n}\n```",
270
287
  "required": false,
271
288
  "default": "{} as SearchIndex",
@@ -314,7 +331,7 @@
314
331
  }
315
332
  },
316
333
  {
317
- "name": "tplRenderFn",
334
+ "name": "tpl-render-fn",
318
335
  "description": "Template engine render function to use when rendering results and filters.\nDefaults to Squirrel v8's render (https://squirrelly.js.org/).",
319
336
  "required": false,
320
337
  "default": "Squirrel.render",
@@ -777,10 +794,188 @@
777
794
  }
778
795
  ]
779
796
  },
797
+ {
798
+ "name": "NanoAvatar",
799
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-avatar",
800
+ "description": "Avatars are used to represent a person or object.",
801
+ "source": {
802
+ "module": "@nanoporetech-digital/components/src/components/avatar/avatar.d.ts",
803
+ "symbol": "Avatar"
804
+ },
805
+ "attributes": [
806
+ {
807
+ "name": "initials",
808
+ "description": "Initials to use as when no image is available (1–2 characters max recommended).",
809
+ "required": false,
810
+ "value": {
811
+ "kind": "expression",
812
+ "type": "string"
813
+ }
814
+ }
815
+ ],
816
+ "slots": [
817
+ {
818
+ "name": "default",
819
+ "description": "Main slot for either image or nano-icon"
820
+ }
821
+ ],
822
+ "events": []
823
+ },
824
+ {
825
+ "name": "NanoBadge",
826
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-badge",
827
+ "description": "Badges are used to draw attention and display statuses or counts.",
828
+ "source": {
829
+ "module": "@nanoporetech-digital/components/src/components/badge/badge.ts",
830
+ "symbol": "Badge"
831
+ },
832
+ "attributes": [
833
+ {
834
+ "name": "pulse",
835
+ "description": "Use pulse to draw attention to the badge with an animation",
836
+ "required": false,
837
+ "value": {
838
+ "kind": "expression",
839
+ "type": "boolean"
840
+ }
841
+ },
842
+ {
843
+ "name": "strength",
844
+ "description": "The strength / vibrancy of the theme. Defaults to `3`",
845
+ "required": false,
846
+ "value": {
847
+ "kind": "expression",
848
+ "type": "\"1\" | \"2\" | \"3\" | \"4\""
849
+ }
850
+ },
851
+ {
852
+ "name": "theme",
853
+ "description": "The semantic theme of the button. Defaults to primary / brand blue",
854
+ "required": false,
855
+ "value": {
856
+ "kind": "expression",
857
+ "type": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\""
858
+ }
859
+ }
860
+ ],
861
+ "slots": [],
862
+ "events": []
863
+ },
864
+ {
865
+ "name": "NanoBreadcrumb",
866
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-breadcrumb",
867
+ "description": "Breadcrumbs are used to indicate the current page's location within a navigational hierarchy.",
868
+ "source": {
869
+ "module": "@nanoporetech-digital/components/src/components/breadcrumb/breadcrumb.d.ts",
870
+ "symbol": "Breadcrumb"
871
+ },
872
+ "attributes": [
873
+ {
874
+ "name": "breadcrumbs",
875
+ "description": "Array of breadcrumb items to render",
876
+ "required": false,
877
+ "default": "[]",
878
+ "value": {
879
+ "kind": "expression",
880
+ "type": "Breadcrumb[]"
881
+ }
882
+ }
883
+ ],
884
+ "slots": [],
885
+ "events": []
886
+ },
887
+ {
888
+ "name": "NanoCard",
889
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-card",
890
+ "description": "Cards are used to display content in a compact and organized way.",
891
+ "source": {
892
+ "module": "@nanoporetech-digital/components/src/components/card/card.ts",
893
+ "symbol": "Card"
894
+ },
895
+ "attributes": [
896
+ {
897
+ "name": "layout",
898
+ "description": "The layout of the card. `landscape` only applies when the card is large enough. Defaults to portrait.",
899
+ "required": false,
900
+ "value": {
901
+ "kind": "expression",
902
+ "type": "\"landscape\" | \"portrait\""
903
+ }
904
+ },
905
+ {
906
+ "name": "size",
907
+ "description": "Size of card's heading. Defaults to `large`. Has no baring on `variant=\"promo\"` cards",
908
+ "required": false,
909
+ "value": {
910
+ "kind": "expression",
911
+ "type": "\"large\" | \"small\""
912
+ }
913
+ },
914
+ {
915
+ "name": "variant",
916
+ "description": "The variant of card. Changes the styling of the card and of nested elements",
917
+ "required": false,
918
+ "value": {
919
+ "kind": "expression",
920
+ "type": "\"product\" | \"promo\" | \"promo-aero\" | \"promo-grey\" | \"promo-plain\""
921
+ }
922
+ }
923
+ ],
924
+ "slots": [
925
+ {
926
+ "name": "content",
927
+ "description": "The main content of the card. Appears third."
928
+ },
929
+ {
930
+ "name": "footer",
931
+ "description": "The footer of the card. Appears last."
932
+ },
933
+ {
934
+ "name": "img",
935
+ "description": "The image of the card. Appears first."
936
+ },
937
+ {
938
+ "name": "title",
939
+ "description": "The title of the card. Appears second."
940
+ }
941
+ ],
942
+ "events": []
943
+ },
944
+ {
945
+ "name": "NanoCardCarousel",
946
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-card-carousel",
947
+ "description": "Showcase up to 6 pieces of content in a slide-show format.",
948
+ "source": {
949
+ "module": "@nanoporetech-digital/components/src/components/card-carousel/card-carousel.d.ts",
950
+ "symbol": "CardCarousel"
951
+ },
952
+ "attributes": [
953
+ {
954
+ "name": "carousel-title",
955
+ "description": "The title of the carousel. Alternatively use the `slot=\"title\"` for more control over markup",
956
+ "required": false,
957
+ "value": {
958
+ "kind": "expression",
959
+ "type": "string"
960
+ }
961
+ }
962
+ ],
963
+ "slots": [
964
+ {
965
+ "name": "default",
966
+ "description": "The slides of the carousel. Should be used with `nano-slide` components exclusively."
967
+ },
968
+ {
969
+ "name": "title",
970
+ "description": "The title of the carousel. Useful it you want more control over markup of the title."
971
+ }
972
+ ],
973
+ "events": []
974
+ },
780
975
  {
781
976
  "name": "NanoCheckbox",
782
977
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-checkbox",
783
- "description": "`nano-checkbox` is used to let a user choose one or more options from a limited number of options.\nThey appear as checked when activated.\nThey can be checked by mouse, keyboard, touch or programmatically by setting the checked property.",
978
+ "description": "Checkboxes are used to let a user choose one or more values from a limited number of options.",
784
979
  "source": {
785
980
  "module": "@nanoporetech-digital/components/src/components/checkbox/checkbox.d.ts",
786
981
  "symbol": "Checkbox"
@@ -796,15 +991,6 @@
796
991
  "type": "boolean"
797
992
  }
798
993
  },
799
- {
800
- "name": "color",
801
- "description": "Color to use from your application's color palette.",
802
- "required": false,
803
- "value": {
804
- "kind": "expression",
805
- "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\""
806
- }
807
- },
808
994
  {
809
995
  "name": "disabled",
810
996
  "description": "If `true`, the user cannot interact with the checkbox.",
@@ -824,6 +1010,16 @@
824
1010
  "type": "string"
825
1011
  }
826
1012
  },
1013
+ {
1014
+ "name": "hide-label",
1015
+ "description": "Visually hide the label - but make it accessible.",
1016
+ "required": false,
1017
+ "default": "false",
1018
+ "value": {
1019
+ "kind": "expression",
1020
+ "type": "boolean"
1021
+ }
1022
+ },
827
1023
  {
828
1024
  "name": "indeterminate",
829
1025
  "description": "If `true`, the checkbox will visually appear as indeterminate (only relevant for type=\"checkbox\")",
@@ -879,7 +1075,7 @@
879
1075
  "default": "'checkbox'",
880
1076
  "value": {
881
1077
  "kind": "expression",
882
- "type": "\"checkbox\" | \"radio\" | \"segment\" | \"segment-pill\" | \"switch\" | \"tag\""
1078
+ "type": "\"checkbox\" | \"radio\" | \"segment\" | \"switch\" | \"tag\""
883
1079
  }
884
1080
  },
885
1081
  {
@@ -905,7 +1101,7 @@
905
1101
  "slots": [
906
1102
  {
907
1103
  "name": "default",
908
- "description": "if you do not set a label attribute, you can use this slot for more complex markup"
1104
+ "description": "used for more complex, label markup"
909
1105
  }
910
1106
  ],
911
1107
  "events": [
@@ -944,7 +1140,7 @@
944
1140
  {
945
1141
  "name": "NanoCheckboxGroup",
946
1142
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-checkbox-group",
947
- "description": "`nano-checkbox-group` is an optional wrapper for all `nano-checkbox` controls.\nIt provides a convenient place to anchor a collective label and any validation issues.",
1143
+ "description": "Checkbox group is an optional wrapper for all checkbox controls.\nIt provides a convenient place to anchor labels and validation messages.",
948
1144
  "source": {
949
1145
  "module": "@nanoporetech-digital/components/src/components/checkbox/checkbox-group.d.ts",
950
1146
  "symbol": "CheckboxGroup"
@@ -982,7 +1178,7 @@
982
1178
  },
983
1179
  {
984
1180
  "name": "legend",
985
- "description": "A common label for children controls",
1181
+ "description": "A collective label for children controls",
986
1182
  "required": false,
987
1183
  "default": "''",
988
1184
  "value": {
@@ -1053,15 +1249,15 @@
1053
1249
  "slots": [
1054
1250
  {
1055
1251
  "name": "default",
1056
- "description": "Used for grouping checkboxes inside the group wrapper"
1252
+ "description": "Used for grouping checkboxes inside the group"
1057
1253
  },
1058
1254
  {
1059
1255
  "name": "helper",
1060
- "description": "helper text to accompany the form field underneath."
1256
+ "description": "text that describes how to use the checkbox group"
1061
1257
  },
1062
1258
  {
1063
1259
  "name": "legend",
1064
- "description": "if you do not set a legend attribute, you can use this slot for more complex markup"
1260
+ "description": "used for more complex, label markup"
1065
1261
  }
1066
1262
  ],
1067
1263
  "events": [
@@ -1088,387 +1284,286 @@
1088
1284
  ]
1089
1285
  },
1090
1286
  {
1091
- "name": "NanoDatalist",
1092
- "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-datalist",
1093
- "description": "`nano-datalist` a visually consistent and more flexible replacement for a native\n[datalist](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist). Can be nested within a `nano-input`\nor linked to any input control via the `input` prop. Is used internally within `nano-select`.\nOptions can be defined declaratively by nesting `<nano-option>` elements or imperatively using the `options` prop",
1287
+ "name": "NanoCollapsibleComparison",
1288
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-collapsible-comparison",
1289
+ "description": "Collapsible comparison allows users to compare two short lists of titles which can be expanded to reveal more detail about each item.",
1094
1290
  "source": {
1095
- "module": "@nanoporetech-digital/components/src/components/datalist/datalist.d.ts",
1096
- "symbol": "Datalist"
1291
+ "module": "@nanoporetech-digital/components/src/components/collapsible-comparison/collapsible-comparison.d.ts",
1292
+ "symbol": "CollapsibleComparison"
1097
1293
  },
1098
1294
  "attributes": [
1099
1295
  {
1100
- "name": "activeOptions",
1101
- "description": "return all the active options currently within the datalist. Can be useful for validation",
1102
- "required": false,
1103
- "value": {
1104
- "kind": "expression",
1105
- "type": "HTMLNanoOptionElement[]"
1106
- }
1107
- },
1108
- {
1109
- "name": "disable-filter",
1110
- "description": "Use this option to disable to default filtering. This is useful if filtering happens\nexternally via another method (e.g. via ajax)",
1296
+ "name": "open",
1297
+ "description": "Controls whether the comparison is open or closed.",
1111
1298
  "required": false,
1112
1299
  "default": "false",
1113
1300
  "value": {
1114
1301
  "kind": "expression",
1115
1302
  "type": "boolean"
1116
1303
  }
1304
+ }
1305
+ ],
1306
+ "slots": [
1307
+ {
1308
+ "name": "comparison-headings",
1309
+ "description": "the headings of the comparison"
1117
1310
  },
1118
1311
  {
1119
- "name": "disabled",
1120
- "description": "Activate / deactivate the datalist control",
1121
- "required": false,
1122
- "default": "false",
1123
- "value": {
1124
- "kind": "expression",
1125
- "type": "boolean"
1126
- }
1312
+ "name": "content",
1313
+ "description": "the content of the comparison"
1127
1314
  },
1128
1315
  {
1129
- "name": "dropDownConfig",
1130
- "description": "nano-dropdown config options you can pass to the nested dropdown component",
1316
+ "name": "heading",
1317
+ "description": "the heading of the comparison"
1318
+ }
1319
+ ],
1320
+ "events": [
1321
+ {
1322
+ "name": "nanoToggle",
1323
+ "description": "Emits when the comparison is opened and closed.",
1324
+ "arguments": [
1325
+ {
1326
+ "name": "detail",
1327
+ "type": "boolean"
1328
+ }
1329
+ ]
1330
+ }
1331
+ ]
1332
+ },
1333
+ {
1334
+ "name": "NanoContentLinks",
1335
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-content-links",
1336
+ "description": "Content links are used to group multiple links together.",
1337
+ "source": {
1338
+ "module": "@nanoporetech-digital/components/src/components/content-links/content-links.ts",
1339
+ "symbol": "ContentLinks"
1340
+ },
1341
+ "attributes": [],
1342
+ "slots": [],
1343
+ "events": []
1344
+ },
1345
+ {
1346
+ "name": "NanoCta",
1347
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-cta",
1348
+ "description": "CTAs (Call To Actions) invite the user to take action.\nThey are used to highlight important content and interactions and are often used in conjunction with other components like cards, modals, and forms.",
1349
+ "source": {
1350
+ "module": "@nanoporetech-digital/components/src/components/cta/cta.d.ts",
1351
+ "symbol": "Cta"
1352
+ },
1353
+ "attributes": [
1354
+ {
1355
+ "name": "group",
1356
+ "description": "Predefined styles when displaying a number of CTAs together",
1131
1357
  "required": false,
1132
- "default": "{\n skidding: -1,\n }",
1133
1358
  "value": {
1134
1359
  "kind": "expression",
1135
- "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; eventType?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }"
1360
+ "type": "\"balanced\" | \"stacked\""
1136
1361
  }
1137
1362
  },
1138
1363
  {
1139
- "name": "input",
1140
- "description": "A selector to a HTMLInputElement",
1364
+ "name": "icon",
1365
+ "description": "A predefined icon to show. Defaults to no icon.\n*note* Will be overruled if a `<nano-icon />` or `<svg />` is detected",
1141
1366
  "required": false,
1142
1367
  "value": {
1143
1368
  "kind": "expression",
1144
- "type": "HTMLInputElement | string"
1369
+ "type": "\"back\" | \"down\" | \"download\" | \"false\" | \"forward\" | \"open\" | \"up\""
1145
1370
  }
1146
1371
  },
1147
1372
  {
1148
- "name": "open",
1149
- "description": "Force datalist open",
1373
+ "name": "loading",
1374
+ "description": "Show a loading spinner",
1150
1375
  "required": false,
1151
- "default": "false",
1152
1376
  "value": {
1153
1377
  "kind": "expression",
1154
- "type": "boolean"
1378
+ "type": "\"false\" | \"true\""
1155
1379
  }
1156
1380
  },
1157
1381
  {
1158
- "name": "options",
1159
- "description": "Provide an option list.\nOptions can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop",
1382
+ "name": "secondary",
1383
+ "description": "Turn on the secondary style. Every theme also has a secondary style",
1160
1384
  "required": false,
1161
- "default": "[]",
1162
1385
  "value": {
1163
1386
  "kind": "expression",
1164
- "type": "OptionInterface[]"
1387
+ "type": "boolean"
1165
1388
  }
1166
1389
  },
1167
1390
  {
1168
- "name": "selected",
1169
- "description": "By default, items in the list will appear 'selected' when the value in the linked input control matches.\nHowever you can add other selected options via the the selected prop.",
1391
+ "name": "size",
1392
+ "description": "The size of the button. Defaults to large",
1170
1393
  "required": false,
1171
- "default": "[]",
1172
1394
  "value": {
1173
1395
  "kind": "expression",
1174
- "type": "string[]"
1396
+ "type": "\"large\" | \"medium\" | \"small\""
1175
1397
  }
1176
1398
  },
1177
1399
  {
1178
- "name": "type",
1179
- "description": "Tweaks the datalist behaviour and linked control semantics and behaviour.\ne.g. 'select' will make the linked input control `readonly`.",
1400
+ "name": "theme",
1401
+ "description": "The semantic theme of the button. Defaults to primary / brand blue",
1180
1402
  "required": false,
1181
- "default": "'input'",
1182
1403
  "value": {
1183
1404
  "kind": "expression",
1184
- "type": "\"input\" | \"selctMulti\" | \"select\""
1405
+ "type": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\""
1185
1406
  }
1186
1407
  }
1187
1408
  ],
1188
- "slots": [
1189
- {
1190
- "name": "default",
1191
- "description": "use `<nano-option>` elements for more complex html. Alternatively use the `options` prop"
1192
- },
1193
- {
1194
- "name": "list-bottom",
1195
- "description": "shows at the bottom of the list when there are options present"
1196
- },
1197
- {
1198
- "name": "list-top",
1199
- "description": "shows at the top of the list when there are options present"
1200
- },
1201
- {
1202
- "name": "no-result",
1203
- "description": "shown when there are no results otherwise nothing will be shown"
1204
- }
1205
- ],
1206
- "events": [
1207
- {
1208
- "name": "nanoDeselect",
1209
- "description": "Fired when a currently selected item is reselected.",
1210
- "arguments": [
1211
- {
1212
- "name": "detail",
1213
- "type": "HTMLNanoOptionElement"
1214
- }
1215
- ]
1216
- },
1217
- {
1218
- "name": "nanoOptionsUpdated",
1219
- "description": "Fired when active options change",
1220
- "arguments": [
1221
- {
1222
- "name": "detail",
1223
- "type": "HTMLNanoOptionElement[]"
1224
- }
1225
- ]
1226
- },
1227
- {
1228
- "name": "nanoSelect",
1229
- "description": "Fired when an item is selected.",
1230
- "arguments": [
1231
- {
1232
- "name": "detail",
1233
- "type": "HTMLNanoOptionElement"
1234
- }
1235
- ]
1236
- }
1237
- ]
1409
+ "slots": [],
1410
+ "events": []
1238
1411
  },
1239
1412
  {
1240
- "name": "NanoDateInput",
1241
- "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-date-input",
1242
- "description": "The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field. It has specific options for localisation, date formatting and validation.",
1413
+ "name": "NanoDataTable",
1414
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-data-table",
1415
+ "description": "Enables the search, filter and sort of tabular data.",
1243
1416
  "source": {
1244
- "module": "@nanoporetech-digital/components/src/components/date-input/date-input.d.ts",
1245
- "symbol": "DateInput"
1417
+ "module": "@nanoporetech-digital/components/src/components/data-table/table.d.ts",
1418
+ "symbol": "DataTable"
1246
1419
  },
1247
1420
  "attributes": [
1248
1421
  {
1249
- "name": "autofocus",
1250
- "description": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
1251
- "required": false,
1252
- "default": "false",
1253
- "value": {
1254
- "kind": "expression",
1255
- "type": "boolean"
1256
- }
1257
- },
1258
- {
1259
- "name": "clear-input",
1260
- "description": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.",
1261
- "required": false,
1262
- "default": "false",
1263
- "value": {
1264
- "kind": "expression",
1265
- "type": "boolean"
1266
- }
1267
- },
1268
- {
1269
- "name": "close-after-picked",
1270
- "description": "Close the picker after a date is selected",
1271
- "required": false,
1272
- "default": "true",
1273
- "value": {
1274
- "kind": "expression",
1275
- "type": "boolean"
1276
- }
1277
- },
1278
- {
1279
- "name": "color",
1280
- "description": "The color to use from the application's color palette.",
1281
- "required": false,
1282
- "value": {
1283
- "kind": "expression",
1284
- "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\""
1285
- }
1286
- },
1287
- {
1288
- "name": "date-order",
1289
- "description": "The order of the date parts for entry and display.\ne.g. dmy = dd mm yyyy",
1290
- "required": false,
1291
- "default": "'dmy'",
1292
- "value": {
1293
- "kind": "expression",
1294
- "type": "\"dmy\" | \"dym\" | \"mdy\" | \"ymd\""
1295
- }
1296
- },
1297
- {
1298
- "name": "dateValue",
1422
+ "name": "applied-filters",
1299
1423
  "description": "",
1300
1424
  "required": false,
1425
+ "default": "[]",
1301
1426
  "value": {
1302
1427
  "kind": "expression",
1303
- "type": "Date"
1304
- }
1305
- },
1306
- {
1307
- "name": "disabled",
1308
- "description": "If `true`, the user cannot interact with the input.",
1309
- "required": false,
1310
- "default": "false",
1311
- "value": {
1312
- "kind": "expression",
1313
- "type": "boolean"
1314
- }
1315
- },
1316
- {
1317
- "name": "dropDownConfig",
1318
- "description": "nano-dropdown config options you can pass to the nested dropdown component",
1319
- "required": false,
1320
- "default": "{}",
1321
- "value": {
1322
- "kind": "expression",
1323
- "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; eventType?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }"
1324
- }
1325
- },
1326
- {
1327
- "name": "first-day-of-week",
1328
- "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
1329
- "required": false,
1330
- "value": {
1331
- "kind": "expression",
1332
- "type": "DaysOfWeek.Friday | DaysOfWeek.Monday | DaysOfWeek.Saturday | DaysOfWeek.Sunday | DaysOfWeek.Thursday | DaysOfWeek.Tuesday | DaysOfWeek.Wednesday"
1428
+ "type": "Filter[]"
1333
1429
  }
1334
1430
  },
1335
1431
  {
1336
- "name": "float-label",
1337
- "description": "Enable floating label behaviour. Will disable placeholder if set.",
1432
+ "name": "blocks-length",
1433
+ "description": "The number of total blocks currently rendered in the table.",
1338
1434
  "required": false,
1339
- "default": "false",
1340
1435
  "value": {
1341
1436
  "kind": "expression",
1342
- "type": "boolean"
1437
+ "type": "number"
1343
1438
  }
1344
1439
  },
1345
1440
  {
1346
- "name": "form",
1347
- "description": "The form element to associate the select with (its form owner). Must be the id of a form.",
1348
- "required": false,
1441
+ "name": "caption",
1442
+ "description": "A descriptive title of the table.\nYou must use this or the `slot=\"caption\"` for accessibility",
1443
+ "required": true,
1349
1444
  "value": {
1350
1445
  "kind": "expression",
1351
1446
  "type": "string"
1352
1447
  }
1353
1448
  },
1354
1449
  {
1355
- "name": "helper-text",
1356
- "description": "Whether to show a long form, confirmation date string of the one currently entered",
1450
+ "name": "columns",
1451
+ "description": "The column config used to present the rows of data",
1357
1452
  "required": false,
1358
- "default": "true",
1453
+ "default": "[]",
1359
1454
  "value": {
1360
1455
  "kind": "expression",
1361
- "type": "boolean"
1456
+ "type": "ColumnConfig<any>[]"
1362
1457
  }
1363
1458
  },
1364
1459
  {
1365
- "name": "helperTextFormat",
1366
- "description": "Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.",
1460
+ "name": "custom-filter-fn",
1461
+ "description": "A custom filtering function. Should return a promise.\nIf the promise resolves as `true` the column UI will be updated.\nIf the promise resolves as falsy, the sort will be performed by the component.\nA good use-case would be performing the filter on a server / via fetch.\nThen on success, updating the table's data via the `rows` property",
1367
1462
  "required": false,
1368
- "default": "{\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n }",
1369
1463
  "value": {
1370
1464
  "kind": "expression",
1371
- "type": "LocalDateOpts"
1465
+ "type": "(filters: Filter[]) => Promise<true | Falsy>"
1372
1466
  }
1373
1467
  },
1374
1468
  {
1375
- "name": "hide-label",
1376
- "description": "Visually hide the label - but make it accessible.",
1469
+ "name": "custom-renderer",
1470
+ "description": "Function called whenever `col.cellTemplate` renders an unknown object.\nThe function should render a valid HTMLElement to the cell arg.\nExample usage - render JSX from a 3rd party lib and append the result to the cell element.",
1377
1471
  "required": false,
1378
- "default": "false",
1379
1472
  "value": {
1380
1473
  "kind": "expression",
1381
- "type": "boolean"
1474
+ "type": "(node: any, cell: HTMLElement | DocumentFragment) => void | Promise<string>"
1382
1475
  }
1383
1476
  },
1384
1477
  {
1385
- "name": "initial-picker-date",
1386
- "description": "Initial picker date. Will be to `value` if set. Will be today's date if nothing set.\nMust be in IS0-8601 format: YYYY-MM-DD.",
1478
+ "name": "custom-sort-fn",
1479
+ "description": "A custom sorting function. Should return a promise.\nIf the promise resolves as `true` the column UI will be updated.\nIf the promise resolves as falsey, the sort will be performed by the component.\nA good use-case would be performing the sort on a server / via fetch.\nThen on success, updating the table's data via the `rows` property",
1387
1480
  "required": false,
1388
1481
  "value": {
1389
1482
  "kind": "expression",
1390
- "type": "string"
1483
+ "type": "(property: keyof RowGeneric, order: Order) => Promise<true | Falsy>"
1391
1484
  }
1392
1485
  },
1393
1486
  {
1394
- "name": "invalid",
1395
- "description": "This will be true when the control is in an invalid state.\nValidity is determined by the `required` prop. Or if custom validity message is set.",
1487
+ "name": "default-sort",
1488
+ "description": "The default sortable option for all columns.\n`true` will enable column sorting unless you set `sortable: false` on a column\n`false` will disable column sorting unless you set `sortable: true` on a column",
1396
1489
  "required": false,
1397
- "default": "false",
1490
+ "default": "true",
1398
1491
  "value": {
1399
1492
  "kind": "expression",
1400
1493
  "type": "boolean"
1401
1494
  }
1402
1495
  },
1403
1496
  {
1404
- "name": "isDateDisabled",
1405
- "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends.",
1497
+ "name": "foot-render",
1498
+ "description": "Used for custom tfoot row rendering",
1406
1499
  "required": false,
1407
- "default": "() => false",
1500
+ "default": "{ pinned: 'bottom' }",
1408
1501
  "value": {
1409
1502
  "kind": "expression",
1410
- "type": "(date: Date) => boolean"
1503
+ "type": "HeadFootRenderer<RowData<RowGeneric>>"
1411
1504
  }
1412
1505
  },
1413
1506
  {
1414
- "name": "label",
1415
- "description": "String to place within a label element. Alternatively you may use a label slot.",
1507
+ "name": "head-render",
1508
+ "description": "Used for custom thead row rendering",
1416
1509
  "required": false,
1510
+ "default": "{ pinned: 'top' }",
1417
1511
  "value": {
1418
1512
  "kind": "expression",
1419
- "type": "string"
1513
+ "type": "HeadFootRenderer<RowData<RowGeneric>>"
1420
1514
  }
1421
1515
  },
1422
1516
  {
1423
- "name": "localization",
1424
- "description": "Button labels, day names, month names, etc, used for localization.\nDefault is English.",
1517
+ "name": "loading",
1518
+ "description": "Will show a loading state when set to true.\nBy default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy\n*or* when performing custom filtering or sorting.\n*Note* when set manually, will overwrite any internal loading state.\nSet to 'undefined' to revert to default behaviour.",
1425
1519
  "required": false,
1520
+ "default": "undefined",
1426
1521
  "value": {
1427
1522
  "kind": "expression",
1428
- "type": "{ buttonLabel: string; placeholder: string; selectedDateMessage: string; prevMonthLabel: string; nextMonthLabel: string; monthSelectLabel: string; yearSelectLabel: string; closeLabel: string; keyboardInstruction: string; calendarHeading: string; dayNames: DayNames; monthNames: MonthsNames; monthNamesShort: MonthsNames; }"
1523
+ "type": "boolean"
1429
1524
  }
1430
1525
  },
1431
1526
  {
1432
- "name": "max",
1433
- "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
1527
+ "name": "per-block",
1528
+ "description": "To improve performance, data is split into blocks\nwhich are shown / hidden and rendered as they become visible.\nUse this to control the number of hits within a block -\nA block should fill a scrolling viewport.\nThe less perBlock the better for performance",
1434
1529
  "required": false,
1530
+ "default": "50",
1435
1531
  "value": {
1436
1532
  "kind": "expression",
1437
- "type": "string"
1533
+ "type": "number"
1438
1534
  }
1439
1535
  },
1440
1536
  {
1441
- "name": "min",
1442
- "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
1537
+ "name": "placeholder-size",
1538
+ "description": "When loading rows asynchronously render this number of placeholder rows",
1443
1539
  "required": false,
1540
+ "default": "10",
1444
1541
  "value": {
1445
1542
  "kind": "expression",
1446
- "type": "string"
1543
+ "type": "number"
1447
1544
  }
1448
1545
  },
1449
1546
  {
1450
- "name": "name",
1451
- "description": "The name of the control, which is submitted with the form data.",
1547
+ "name": "row-render",
1548
+ "description": "Used for custom row rendering",
1452
1549
  "required": false,
1453
- "default": "this.inputId",
1454
1550
  "value": {
1455
1551
  "kind": "expression",
1456
- "type": "string"
1552
+ "type": "RowRenderer<RowData<RowGeneric>>"
1457
1553
  }
1458
1554
  },
1459
1555
  {
1460
- "name": "picker",
1461
- "description": "Show a date picker. Date pickers are not very useful\nif the potential input is too far in the distance or past\ne.g. Birthdays",
1556
+ "name": "rows",
1557
+ "description": "The data to place in the table",
1462
1558
  "required": false,
1463
- "default": "true",
1464
1559
  "value": {
1465
1560
  "kind": "expression",
1466
- "type": "boolean"
1561
+ "type": "Promise<RowGeneric[]> | RowGeneric[]"
1467
1562
  }
1468
1563
  },
1469
1564
  {
1470
- "name": "picker-open",
1471
- "description": "Set / read whether the picker is currently open.",
1565
+ "name": "scrollable",
1566
+ "description": "If true, will render any nested table in a scrollable container (using `overflow: auto`)",
1472
1567
  "required": false,
1473
1568
  "default": "false",
1474
1569
  "value": {
@@ -1477,8 +1572,8 @@
1477
1572
  }
1478
1573
  },
1479
1574
  {
1480
- "name": "placeholder",
1481
- "description": "Instructional text that shows before the input has a value.\nThe pattern prop will be used to create a placeholder automatically if unused.",
1575
+ "name": "search-term",
1576
+ "description": "Term to search for in the data",
1482
1577
  "required": false,
1483
1578
  "value": {
1484
1579
  "kind": "expression",
@@ -1486,8 +1581,8 @@
1486
1581
  }
1487
1582
  },
1488
1583
  {
1489
- "name": "readonly",
1490
- "description": "If `true`, the user cannot modify the value.",
1584
+ "name": "show-caption",
1585
+ "description": "Show the caption on-screen",
1491
1586
  "required": false,
1492
1587
  "default": "false",
1493
1588
  "value": {
@@ -1496,8 +1591,8 @@
1496
1591
  }
1497
1592
  },
1498
1593
  {
1499
- "name": "required",
1500
- "description": "If `true`, the user must fill in a value before submitting a form.",
1594
+ "name": "show-footer",
1595
+ "description": "Whether to show a `<tfoot>` component",
1501
1596
  "required": false,
1502
1597
  "default": "false",
1503
1598
  "value": {
@@ -1506,210 +1601,290 @@
1506
1601
  }
1507
1602
  },
1508
1603
  {
1509
- "name": "show-inline-error",
1510
- "description": "Whether to show validation errors underneath input",
1604
+ "name": "show-paginate-spinner",
1605
+ "description": "If true, will show a spinner at the bottom of the table when loading",
1511
1606
  "required": false,
1512
- "default": "true",
1607
+ "default": "false",
1513
1608
  "value": {
1514
1609
  "kind": "expression",
1515
1610
  "type": "boolean"
1516
1611
  }
1517
1612
  },
1518
1613
  {
1519
- "name": "size",
1520
- "description": "The initial size (number of characters) of the control.",
1614
+ "name": "virtual-total-items",
1615
+ "description": "Use this to render the table with roughly the correct dimensions.\na use-case might be; fetch a small initial dataset to minimise load-time,\nrender the table with the correct dimensions, the table becomes interactive,\nload the rest of the data",
1521
1616
  "required": false,
1617
+ "default": "0",
1522
1618
  "value": {
1523
1619
  "kind": "expression",
1524
1620
  "type": "number"
1525
1621
  }
1622
+ }
1623
+ ],
1624
+ "slots": [
1625
+ {
1626
+ "name": "caption",
1627
+ "description": "The table's caption. You must either use this or the `caption` attribute."
1526
1628
  },
1527
1629
  {
1528
- "name": "validate-on",
1529
- "description": "When should the field perform validation",
1530
- "required": false,
1531
- "default": "'submitThenDirty'",
1532
- "value": {
1533
- "kind": "expression",
1534
- "type": "\"dirty\" | \"submit\" | \"submitThenDirty\""
1535
- }
1630
+ "name": "no-results",
1631
+ "description": "text to display when search or filtering yields no results"
1632
+ }
1633
+ ],
1634
+ "events": [
1635
+ {
1636
+ "name": "nanoTblAfterFilter",
1637
+ "description": "Fired after a column is sorted",
1638
+ "arguments": [
1639
+ {
1640
+ "name": "detail",
1641
+ "type": "{ filters: Filter[]; }"
1642
+ }
1643
+ ]
1536
1644
  },
1537
1645
  {
1538
- "name": "validity-message",
1539
- "description": "Current validation message - if any.",
1540
- "required": false,
1541
- "value": {
1542
- "kind": "expression",
1543
- "type": "string"
1544
- }
1646
+ "name": "nanoTblAfterSearch",
1647
+ "description": "Fired after a general / cross column search",
1648
+ "arguments": [
1649
+ {
1650
+ "name": "detail",
1651
+ "type": "{ term: string; }"
1652
+ }
1653
+ ]
1545
1654
  },
1546
1655
  {
1547
- "name": "value",
1548
- "description": "Current value. Must be in IS0-8601 format: YYYY-MM-DD.",
1549
- "required": false,
1550
- "default": "''",
1551
- "value": {
1552
- "kind": "expression",
1553
- "type": "string"
1554
- }
1555
- }
1556
- ],
1557
- "slots": [
1656
+ "name": "nanoTblAfterSort",
1657
+ "description": "Fired after a column is sorted",
1658
+ "arguments": [
1659
+ {
1660
+ "name": "detail",
1661
+ "type": "{ column: keyof RowGeneric; order: Order; }"
1662
+ }
1663
+ ]
1664
+ },
1558
1665
  {
1559
- "name": "end",
1560
- "description": "input end slot"
1666
+ "name": "nanoTblBeforeEdit",
1667
+ "description": "Fired before a general search.\n`event.preventDefault()` to stop searching.",
1668
+ "arguments": [
1669
+ {
1670
+ "name": "detail",
1671
+ "type": "{ term: string; }"
1672
+ }
1673
+ ]
1561
1674
  },
1562
1675
  {
1563
- "name": "helper",
1564
- "description": "helper text to accompany the form field underneath."
1676
+ "name": "nanoTblBeforeFilter",
1677
+ "description": "Fired before a column is filtered.\n`event.preventDefault()` to stop filtering.",
1678
+ "arguments": [
1679
+ {
1680
+ "name": "detail",
1681
+ "type": "{ filters: Filter[]; }"
1682
+ }
1683
+ ]
1565
1684
  },
1566
1685
  {
1567
- "name": "label",
1568
- "description": "if you do not set a label attribute, you can use this slot for more complex markup"
1686
+ "name": "nanoTblBeforeSearch",
1687
+ "description": "Fired before a general search.\n`event.preventDefault()` to stop searching.",
1688
+ "arguments": [
1689
+ {
1690
+ "name": "detail",
1691
+ "type": "{ term: string; }"
1692
+ }
1693
+ ]
1569
1694
  },
1570
1695
  {
1571
- "name": "start",
1572
- "description": "input start slot"
1573
- }
1574
- ],
1575
- "events": [
1696
+ "name": "nanoTblBeforeSort",
1697
+ "description": "Fired before a column is sorted.\n`event.preventDefault()` to stop sorting.",
1698
+ "arguments": [
1699
+ {
1700
+ "name": "detail",
1701
+ "type": "{ column: keyof RowGeneric; order: Order; }"
1702
+ }
1703
+ ]
1704
+ },
1576
1705
  {
1577
- "name": "nanoChange",
1578
- "description": "Event emitted when a date is selected.",
1706
+ "name": "nanoTblBlockRendered",
1707
+ "description": "Fired whenever a block is activated by scrolling into view / becoming visible\nThis could be leveraged for infinite scrolling / to fetch more data.",
1579
1708
  "arguments": [
1580
1709
  {
1581
1710
  "name": "detail",
1582
- "type": "DateInputChangeEventDetail"
1711
+ "type": "{ block: number; totalBlocks: number; }"
1583
1712
  }
1584
1713
  ]
1585
1714
  },
1586
1715
  {
1587
- "name": "nanoValidate",
1588
- "description": "Called when validation is performed (which depends on `validateOn`).",
1716
+ "name": "nanoTblReady",
1717
+ "description": "Fired when the table has done it's first complete render",
1589
1718
  "arguments": [
1590
1719
  {
1591
1720
  "name": "detail",
1592
- "type": "ControlValidityEventDetail"
1721
+ "type": "any"
1593
1722
  }
1594
1723
  ]
1595
1724
  }
1596
1725
  ]
1597
1726
  },
1598
1727
  {
1599
- "name": "NanoDatePicker",
1600
- "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-date-picker",
1601
- "description": "A highly performant, small and accessible date-picker.\nCustomised from [Duet date-picker](https://duetds.github.io/date-picker/).",
1728
+ "name": "NanoDatalist",
1729
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-datalist",
1730
+ "description": "Represents a permissible or recommended list of options available to choose from within other controls.",
1602
1731
  "source": {
1603
- "module": "@nanoporetech-digital/components/src/components/date-picker/date-picker.d.ts",
1604
- "symbol": "DatePicker"
1732
+ "module": "@nanoporetech-digital/components/src/components/datalist/datalist.d.ts",
1733
+ "symbol": "Datalist"
1605
1734
  },
1606
1735
  "attributes": [
1607
1736
  {
1608
- "name": "color",
1609
- "description": "The color to use from the application's color palette.",
1737
+ "name": "active-options",
1738
+ "description": "return all the active options currently within the datalist. Can be useful for validation",
1610
1739
  "required": false,
1611
1740
  "value": {
1612
1741
  "kind": "expression",
1613
- "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\""
1742
+ "type": "HTMLNanoOptionElement[]"
1614
1743
  }
1615
1744
  },
1616
1745
  {
1617
- "name": "first-day-of-week",
1618
- "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
1746
+ "name": "disable-filter",
1747
+ "description": "Use this option to disable to default filtering. This is useful if filtering happens\nexternally via another method (e.g. via ajax)",
1619
1748
  "required": false,
1620
- "default": "DaysOfWeek.Monday",
1749
+ "default": "false",
1621
1750
  "value": {
1622
1751
  "kind": "expression",
1623
- "type": "DaysOfWeek.Friday | DaysOfWeek.Monday | DaysOfWeek.Saturday | DaysOfWeek.Sunday | DaysOfWeek.Thursday | DaysOfWeek.Tuesday | DaysOfWeek.Wednesday"
1752
+ "type": "boolean"
1624
1753
  }
1625
1754
  },
1626
1755
  {
1627
- "name": "isDateDisabled",
1628
- "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends.",
1756
+ "name": "disabled",
1757
+ "description": "Activate / deactivate the datalist control",
1629
1758
  "required": false,
1630
- "default": "() => false",
1759
+ "default": "false",
1631
1760
  "value": {
1632
1761
  "kind": "expression",
1633
- "type": "(date: Date) => boolean"
1762
+ "type": "boolean"
1634
1763
  }
1635
1764
  },
1636
1765
  {
1637
- "name": "is-modal",
1638
- "description": "Controls whether the picker is a modal or dialog,\npopup control and will therefore keep focus within the control",
1766
+ "name": "drop-down-config",
1767
+ "description": "nano-dropdown config options you can pass to the nested dropdown component",
1639
1768
  "required": false,
1640
- "default": "false",
1769
+ "default": "{\n skidding: -1,\n }",
1641
1770
  "value": {
1642
1771
  "kind": "expression",
1643
- "type": "boolean"
1772
+ "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; eventType?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }"
1644
1773
  }
1645
1774
  },
1646
1775
  {
1647
- "name": "localization",
1648
- "description": "Button labels, day names, month names, etc, used for localization.\nDefault is English.",
1776
+ "name": "input",
1777
+ "description": "A selector to a HTMLInputElement",
1649
1778
  "required": false,
1650
- "default": "defaultLocalization",
1651
1779
  "value": {
1652
1780
  "kind": "expression",
1653
- "type": "{ buttonLabel: string; placeholder: string; selectedDateMessage: string; prevMonthLabel: string; nextMonthLabel: string; monthSelectLabel: string; yearSelectLabel: string; closeLabel: string; keyboardInstruction: string; calendarHeading: string; dayNames: DayNames; monthNames: MonthsNames; monthNamesShort: MonthsNames; }"
1781
+ "type": "HTMLInputElement | string"
1654
1782
  }
1655
1783
  },
1656
1784
  {
1657
- "name": "max",
1658
- "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
1785
+ "name": "open",
1786
+ "description": "Force datalist open",
1659
1787
  "required": false,
1660
- "default": "''",
1788
+ "default": "false",
1661
1789
  "value": {
1662
1790
  "kind": "expression",
1663
- "type": "string"
1791
+ "type": "boolean"
1664
1792
  }
1665
1793
  },
1666
1794
  {
1667
- "name": "min",
1668
- "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
1795
+ "name": "options",
1796
+ "description": "Provide an option list.\nOptions can be defined declaratively by nesting `<nano-option>` elements or imperatively using this prop",
1669
1797
  "required": false,
1670
- "default": "''",
1798
+ "default": "[]",
1671
1799
  "value": {
1672
1800
  "kind": "expression",
1673
- "type": "string"
1801
+ "type": "OptionInterface[]"
1674
1802
  }
1675
1803
  },
1676
1804
  {
1677
- "name": "selected-date",
1678
- "description": "Selected Date. Must be in IS0-8601 format: YYYY-MM-DD.",
1805
+ "name": "selected",
1806
+ "description": "By default, items in the list will appear 'selected' when the value in the linked input control matches.\nHowever you can add other selected options via the the selected prop.",
1679
1807
  "required": false,
1680
- "default": "''",
1808
+ "default": "[]",
1681
1809
  "value": {
1682
1810
  "kind": "expression",
1683
- "type": "string"
1811
+ "type": "string[]"
1812
+ }
1813
+ },
1814
+ {
1815
+ "name": "type",
1816
+ "description": "Tweaks the datalist behaviour and linked control semantics and behaviour.\ne.g. 'select' will make the linked input control `readonly`.",
1817
+ "required": false,
1818
+ "default": "'input'",
1819
+ "value": {
1820
+ "kind": "expression",
1821
+ "type": "\"input\" | \"select\" | \"selectMulti\""
1684
1822
  }
1685
1823
  }
1686
1824
  ],
1687
- "slots": [],
1825
+ "slots": [
1826
+ {
1827
+ "name": "default",
1828
+ "description": "use `<nano-option>` elements for more complex html. Alternatively use the `options` prop"
1829
+ },
1830
+ {
1831
+ "name": "list-bottom",
1832
+ "description": "shows at the bottom of the list when there are options present"
1833
+ },
1834
+ {
1835
+ "name": "list-top",
1836
+ "description": "shows at the top of the list when there are options present"
1837
+ },
1838
+ {
1839
+ "name": "no-result",
1840
+ "description": "shown when there are no results otherwise nothing will be shown"
1841
+ }
1842
+ ],
1688
1843
  "events": [
1689
1844
  {
1690
- "name": "nanoDatePicked",
1691
- "description": "Event emitted when a date is selected.",
1845
+ "name": "nanoDeselect",
1846
+ "description": "Fired when a currently selected item is reselected.",
1692
1847
  "arguments": [
1693
1848
  {
1694
1849
  "name": "detail",
1695
- "type": "{ valueAsDate: Date; value: string; }"
1850
+ "type": "HTMLNanoOptionElement"
1851
+ }
1852
+ ]
1853
+ },
1854
+ {
1855
+ "name": "nanoOptionsUpdated",
1856
+ "description": "Fired when active options change",
1857
+ "arguments": [
1858
+ {
1859
+ "name": "detail",
1860
+ "type": "HTMLNanoOptionElement[]"
1861
+ }
1862
+ ]
1863
+ },
1864
+ {
1865
+ "name": "nanoSelect",
1866
+ "description": "Fired when an item is selected.",
1867
+ "arguments": [
1868
+ {
1869
+ "name": "detail",
1870
+ "type": "HTMLNanoOptionElement"
1696
1871
  }
1697
1872
  ]
1698
1873
  }
1699
1874
  ]
1700
1875
  },
1701
1876
  {
1702
- "name": "NanoDetails",
1703
- "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-details",
1704
- "description": "A simple element used to hide or reveal more content with slide effect. Can be used independently or nested within a [accordion](/story/nano-components-accordion--accordion) element to add 'one item open at a time' support.",
1877
+ "name": "NanoDateInput",
1878
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-date-input",
1879
+ "description": "The date-input component combines `nano-dropdown`, `nano-input` and `nano-date-picker` components to make a fully featured date form field.\nIt has specific options for localisation, date formatting and validation.",
1705
1880
  "source": {
1706
- "module": "@nanoporetech-digital/components/src/components/details/details.d.ts",
1707
- "symbol": "Details"
1881
+ "module": "@nanoporetech-digital/components/src/components/date-input/date-input.d.ts",
1882
+ "symbol": "DateInput"
1708
1883
  },
1709
1884
  "attributes": [
1710
1885
  {
1711
- "name": "disabled",
1712
- "description": "Disables the details so it can't be toggled.",
1886
+ "name": "autofocus",
1887
+ "description": "This Boolean attribute lets you specify that a form control should have input focus when the page loads.",
1713
1888
  "required": false,
1714
1889
  "default": "false",
1715
1890
  "value": {
@@ -1718,38 +1893,377 @@
1718
1893
  }
1719
1894
  },
1720
1895
  {
1721
- "name": "icon-rotation",
1722
- "description": "Icon slot rotation amount (degrees) on open",
1896
+ "name": "clearable",
1897
+ "description": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.",
1723
1898
  "required": false,
1724
- "default": "90",
1899
+ "default": "false",
1725
1900
  "value": {
1726
1901
  "kind": "expression",
1727
- "type": "number"
1902
+ "type": "boolean"
1728
1903
  }
1729
1904
  },
1730
1905
  {
1731
- "name": "label",
1732
- "description": "Summary / handle text. Use the `label` slot for HTML markup",
1906
+ "name": "close-after-picked",
1907
+ "description": "Close the picker after a date is selected",
1733
1908
  "required": false,
1734
- "default": "''",
1909
+ "default": "true",
1735
1910
  "value": {
1736
1911
  "kind": "expression",
1737
- "type": "string"
1912
+ "type": "boolean"
1738
1913
  }
1739
1914
  },
1740
1915
  {
1741
- "name": "no-handle",
1742
- "description": "Hide the handle. (You will need to control the hiding / showing of content with script)",
1916
+ "name": "color",
1917
+ "description": "The color to use from the application's color palette.",
1743
1918
  "required": false,
1744
- "default": "false",
1745
1919
  "value": {
1746
1920
  "kind": "expression",
1747
- "type": "boolean"
1921
+ "type": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\""
1748
1922
  }
1749
1923
  },
1750
1924
  {
1751
- "name": "open",
1752
- "description": "Should item be open on load",
1925
+ "name": "date-order",
1926
+ "description": "The order of the date parts for entry and display.\ne.g. dmy = dd mm yyyy",
1927
+ "required": false,
1928
+ "default": "'dmy'",
1929
+ "value": {
1930
+ "kind": "expression",
1931
+ "type": "\"dmy\" | \"dym\" | \"mdy\" | \"ymd\""
1932
+ }
1933
+ },
1934
+ {
1935
+ "name": "date-value",
1936
+ "description": "",
1937
+ "required": false,
1938
+ "value": {
1939
+ "kind": "expression",
1940
+ "type": "Date"
1941
+ }
1942
+ },
1943
+ {
1944
+ "name": "disabled",
1945
+ "description": "If `true`, the user cannot interact with the input.",
1946
+ "required": false,
1947
+ "default": "false",
1948
+ "value": {
1949
+ "kind": "expression",
1950
+ "type": "boolean"
1951
+ }
1952
+ },
1953
+ {
1954
+ "name": "drop-down-config",
1955
+ "description": "nano-dropdown config options you can pass to the nested dropdown component",
1956
+ "required": false,
1957
+ "default": "{}",
1958
+ "value": {
1959
+ "kind": "expression",
1960
+ "type": "{ host?: HTMLNanoDropdownElement; autoOpen?: boolean; open?: boolean; handleOpenChange?: () => void; closeOnSelect?: boolean; containingElement?: HTMLElement; tetherTo?: HTMLElement; handleTetherToChange?: () => void; placement?: PopoverPlacement; distance?: number; skidding?: number; hoist?: boolean; handlePopoverOptionsChange?: () => void; dialogTitle?: string; nanoShow?: EventEmitter<any>; nanoAfterShow?: EventEmitter<any>; nanoHide?: EventEmitter<any>; nanoAfterHide?: EventEmitter<any>; eventType?: EventEmitter<any>; secondaryOpen?: (ev: CustomEvent<any>) => void; secondaryClose?: (ev: CustomEvent<any>) => void; handlePanelSelect?: (event: CustomEvent<any>) => void; show?: () => Promise<void>; hide?: () => Promise<void>; connectedCallback?: () => void; componentDidLoad?: () => void; disconnectedCallback?: () => void; render?: () => any; }"
1961
+ }
1962
+ },
1963
+ {
1964
+ "name": "first-day-of-week",
1965
+ "description": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
1966
+ "required": false,
1967
+ "value": {
1968
+ "kind": "expression",
1969
+ "type": "DaysOfWeek.Friday | DaysOfWeek.Monday | DaysOfWeek.Saturday | DaysOfWeek.Sunday | DaysOfWeek.Thursday | DaysOfWeek.Tuesday | DaysOfWeek.Wednesday"
1970
+ }
1971
+ },
1972
+ {
1973
+ "name": "float-label",
1974
+ "description": "Enable floating label behaviour. Will disable placeholder if set.",
1975
+ "required": false,
1976
+ "default": "false",
1977
+ "value": {
1978
+ "kind": "expression",
1979
+ "type": "boolean"
1980
+ }
1981
+ },
1982
+ {
1983
+ "name": "form",
1984
+ "description": "The form element to associate the select with (its form owner). Must be the id of a form.",
1985
+ "required": false,
1986
+ "value": {
1987
+ "kind": "expression",
1988
+ "type": "string"
1989
+ }
1990
+ },
1991
+ {
1992
+ "name": "helper-text",
1993
+ "description": "Whether to show a long form, confirmation date string of the one currently entered",
1994
+ "required": false,
1995
+ "default": "true",
1996
+ "value": {
1997
+ "kind": "expression",
1998
+ "type": "boolean"
1999
+ }
2000
+ },
2001
+ {
2002
+ "name": "helper-text-format",
2003
+ "description": "Options for the date string display. Refer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString.",
2004
+ "required": false,
2005
+ "default": "{\n year: 'numeric',\n month: 'long',\n day: 'numeric',\n }",
2006
+ "value": {
2007
+ "kind": "expression",
2008
+ "type": "LocalDateOpts"
2009
+ }
2010
+ },
2011
+ {
2012
+ "name": "hide-label",
2013
+ "description": "Visually hide the label - but make it accessible.",
2014
+ "required": false,
2015
+ "default": "false",
2016
+ "value": {
2017
+ "kind": "expression",
2018
+ "type": "boolean"
2019
+ }
2020
+ },
2021
+ {
2022
+ "name": "initial-picker-date",
2023
+ "description": "Initial picker date. Defaults to `value` if set and today's date if not.\nMust be in IS0-8601 format: YYYY-MM-DD.",
2024
+ "required": false,
2025
+ "value": {
2026
+ "kind": "expression",
2027
+ "type": "string"
2028
+ }
2029
+ },
2030
+ {
2031
+ "name": "invalid",
2032
+ "description": "This will be true when the control is in an invalid state.\nValidity is determined by the `required` prop. Or if custom validity message is set.",
2033
+ "required": false,
2034
+ "default": "false",
2035
+ "value": {
2036
+ "kind": "expression",
2037
+ "type": "boolean"
2038
+ }
2039
+ },
2040
+ {
2041
+ "name": "is-date-disabled",
2042
+ "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends.",
2043
+ "required": false,
2044
+ "default": "() => false",
2045
+ "value": {
2046
+ "kind": "expression",
2047
+ "type": "(date: Date) => boolean"
2048
+ }
2049
+ },
2050
+ {
2051
+ "name": "label",
2052
+ "description": "String to place within a label element. Alternatively you may use a label slot.",
2053
+ "required": false,
2054
+ "value": {
2055
+ "kind": "expression",
2056
+ "type": "string"
2057
+ }
2058
+ },
2059
+ {
2060
+ "name": "localization",
2061
+ "description": "Button labels, day names, month names, etc, used for localization.\nDefault is English.",
2062
+ "required": false,
2063
+ "value": {
2064
+ "kind": "expression",
2065
+ "type": "{ buttonLabel: string; placeholder: string; selectedDateMessage: string; prevMonthLabel: string; nextMonthLabel: string; monthSelectLabel: string; yearSelectLabel: string; closeLabel: string; keyboardInstruction: string; calendarHeading: string; dayNames: DayNames; monthNames: MonthsNames; monthNamesShort: MonthsNames; }"
2066
+ }
2067
+ },
2068
+ {
2069
+ "name": "max",
2070
+ "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
2071
+ "required": false,
2072
+ "value": {
2073
+ "kind": "expression",
2074
+ "type": "string"
2075
+ }
2076
+ },
2077
+ {
2078
+ "name": "min",
2079
+ "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
2080
+ "required": false,
2081
+ "value": {
2082
+ "kind": "expression",
2083
+ "type": "string"
2084
+ }
2085
+ },
2086
+ {
2087
+ "name": "name",
2088
+ "description": "The name of the control, which is submitted with the form data.",
2089
+ "required": false,
2090
+ "default": "this.inputId",
2091
+ "value": {
2092
+ "kind": "expression",
2093
+ "type": "string"
2094
+ }
2095
+ },
2096
+ {
2097
+ "name": "picker",
2098
+ "description": "Show a date picker. Date pickers are not very useful\nif the potential input is too far in the distance or past\ne.g. Birthdays",
2099
+ "required": false,
2100
+ "default": "true",
2101
+ "value": {
2102
+ "kind": "expression",
2103
+ "type": "boolean"
2104
+ }
2105
+ },
2106
+ {
2107
+ "name": "picker-open",
2108
+ "description": "Set / read whether the picker is currently open.",
2109
+ "required": false,
2110
+ "default": "false",
2111
+ "value": {
2112
+ "kind": "expression",
2113
+ "type": "boolean"
2114
+ }
2115
+ },
2116
+ {
2117
+ "name": "placeholder",
2118
+ "description": "Instructional text that shows before the input has a value.\nThe pattern prop will be used to create a placeholder automatically if unused.",
2119
+ "required": false,
2120
+ "value": {
2121
+ "kind": "expression",
2122
+ "type": "string"
2123
+ }
2124
+ },
2125
+ {
2126
+ "name": "readonly",
2127
+ "description": "If `true`, the user cannot modify the value.",
2128
+ "required": false,
2129
+ "default": "false",
2130
+ "value": {
2131
+ "kind": "expression",
2132
+ "type": "boolean"
2133
+ }
2134
+ },
2135
+ {
2136
+ "name": "required",
2137
+ "description": "If `true`, the user must fill in a value before submitting a form.",
2138
+ "required": false,
2139
+ "default": "false",
2140
+ "value": {
2141
+ "kind": "expression",
2142
+ "type": "boolean"
2143
+ }
2144
+ },
2145
+ {
2146
+ "name": "show-inline-error",
2147
+ "description": "Whether to show validation errors underneath input",
2148
+ "required": false,
2149
+ "default": "true",
2150
+ "value": {
2151
+ "kind": "expression",
2152
+ "type": "boolean"
2153
+ }
2154
+ },
2155
+ {
2156
+ "name": "size",
2157
+ "description": "The initial size (number of characters) of the control.",
2158
+ "required": false,
2159
+ "value": {
2160
+ "kind": "expression",
2161
+ "type": "number"
2162
+ }
2163
+ },
2164
+ {
2165
+ "name": "validate-on",
2166
+ "description": "When should the field perform validation",
2167
+ "required": false,
2168
+ "default": "'submitThenDirty'",
2169
+ "value": {
2170
+ "kind": "expression",
2171
+ "type": "\"dirty\" | \"submit\" | \"submitThenDirty\""
2172
+ }
2173
+ },
2174
+ {
2175
+ "name": "validity-message",
2176
+ "description": "Current validation message - if any.",
2177
+ "required": false,
2178
+ "value": {
2179
+ "kind": "expression",
2180
+ "type": "string"
2181
+ }
2182
+ },
2183
+ {
2184
+ "name": "value",
2185
+ "description": "Current value. Must be in IS0-8601 format: YYYY-MM-DD.",
2186
+ "required": false,
2187
+ "default": "''",
2188
+ "value": {
2189
+ "kind": "expression",
2190
+ "type": "string"
2191
+ }
2192
+ }
2193
+ ],
2194
+ "slots": [
2195
+ {
2196
+ "name": "end",
2197
+ "description": "input end slot"
2198
+ },
2199
+ {
2200
+ "name": "helper",
2201
+ "description": "helper text to accompany the form field underneath."
2202
+ },
2203
+ {
2204
+ "name": "label",
2205
+ "description": "if you do not set a label attribute, you can use this slot for more complex markup"
2206
+ },
2207
+ {
2208
+ "name": "start",
2209
+ "description": "input start slot"
2210
+ }
2211
+ ],
2212
+ "events": [
2213
+ {
2214
+ "name": "nanoChange",
2215
+ "description": "Event emitted when a date is selected.",
2216
+ "arguments": [
2217
+ {
2218
+ "name": "detail",
2219
+ "type": "DateInputChangeEventDetail"
2220
+ }
2221
+ ]
2222
+ },
2223
+ {
2224
+ "name": "nanoValidate",
2225
+ "description": "Called when validation is performed (which depends on `validateOn`).",
2226
+ "arguments": [
2227
+ {
2228
+ "name": "detail",
2229
+ "type": "ControlValidityEventDetail"
2230
+ }
2231
+ ]
2232
+ }
2233
+ ]
2234
+ },
2235
+ {
2236
+ "name": "NanoDatePicker",
2237
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-date-picker",
2238
+ "description": "Enables the selection of a date from a calendar view.",
2239
+ "source": {
2240
+ "module": "@nanoporetech-digital/components/src/components/date-picker/date-picker.d.ts",
2241
+ "symbol": "DatePicker"
2242
+ },
2243
+ "attributes": [
2244
+ {
2245
+ "name": "first-day-of-week",
2246
+ "description": "Which day is considered first day of the week. `0` for Sunday, `1` for Monday, etc.\nDefault is Monday.",
2247
+ "required": false,
2248
+ "default": "DaysOfWeek.Monday",
2249
+ "value": {
2250
+ "kind": "expression",
2251
+ "type": "DaysOfWeek.Friday | DaysOfWeek.Monday | DaysOfWeek.Saturday | DaysOfWeek.Sunday | DaysOfWeek.Thursday | DaysOfWeek.Tuesday | DaysOfWeek.Wednesday"
2252
+ }
2253
+ },
2254
+ {
2255
+ "name": "is-date-disabled",
2256
+ "description": "Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends.",
2257
+ "required": false,
2258
+ "default": "() => false",
2259
+ "value": {
2260
+ "kind": "expression",
2261
+ "type": "(date: Date) => boolean"
2262
+ }
2263
+ },
2264
+ {
2265
+ "name": "is-modal",
2266
+ "description": "Controls whether the picker is within a modal control and will therefore keep focus within the control",
1753
2267
  "required": false,
1754
2268
  "default": "false",
1755
2269
  "value": {
@@ -1758,14 +2272,108 @@
1758
2272
  }
1759
2273
  },
1760
2274
  {
1761
- "name": "use-cache-height",
1762
- "description": "Sometimes, nested content will resize within the details component which results in choppy show/hide animations.\nSet `useCacheHeight` to `true` try to keep animations smooth.",
2275
+ "name": "localization",
2276
+ "description": "Button labels, day names, month names, etc, used for localization.\nDefault is English.",
2277
+ "required": false,
2278
+ "default": "defaultLocalization",
2279
+ "value": {
2280
+ "kind": "expression",
2281
+ "type": "{ buttonLabel: string; placeholder: string; selectedDateMessage: string; prevMonthLabel: string; nextMonthLabel: string; monthSelectLabel: string; yearSelectLabel: string; closeLabel: string; keyboardInstruction: string; calendarHeading: string; dayNames: DayNames; monthNames: MonthsNames; monthNamesShort: MonthsNames; }"
2282
+ }
2283
+ },
2284
+ {
2285
+ "name": "max",
2286
+ "description": "Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the min property.",
2287
+ "required": false,
2288
+ "default": "''",
2289
+ "value": {
2290
+ "kind": "expression",
2291
+ "type": "string"
2292
+ }
2293
+ },
2294
+ {
2295
+ "name": "min",
2296
+ "description": "Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.\nThis setting can be used alone or together with the max property.",
2297
+ "required": false,
2298
+ "default": "''",
2299
+ "value": {
2300
+ "kind": "expression",
2301
+ "type": "string"
2302
+ }
2303
+ },
2304
+ {
2305
+ "name": "selected-date",
2306
+ "description": "Selected Date. Must be in IS0-8601 format: YYYY-MM-DD.",
2307
+ "required": false,
2308
+ "default": "''",
2309
+ "value": {
2310
+ "kind": "expression",
2311
+ "type": "string"
2312
+ }
2313
+ }
2314
+ ],
2315
+ "slots": [],
2316
+ "events": [
2317
+ {
2318
+ "name": "nanoDatePicked",
2319
+ "description": "Event emitted when a date is selected.",
2320
+ "arguments": [
2321
+ {
2322
+ "name": "detail",
2323
+ "type": "{ valueAsDate: Date; value: string; }"
2324
+ }
2325
+ ]
2326
+ }
2327
+ ]
2328
+ },
2329
+ {
2330
+ "name": "NanoDetails",
2331
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-details",
2332
+ "description": "Details show a brief summary and on interaction expand to show additional content.",
2333
+ "source": {
2334
+ "module": "@nanoporetech-digital/components/src/components/details/details.d.ts",
2335
+ "symbol": "Details"
2336
+ },
2337
+ "attributes": [
2338
+ {
2339
+ "name": "disabled",
2340
+ "description": "Disables the details so it can't be toggled.",
2341
+ "required": false,
2342
+ "default": "false",
2343
+ "value": {
2344
+ "kind": "expression",
2345
+ "type": "boolean"
2346
+ }
2347
+ },
2348
+ {
2349
+ "name": "label",
2350
+ "description": "Summary / handle text. Use the `label` slot for HTML markup",
2351
+ "required": false,
2352
+ "default": "''",
2353
+ "value": {
2354
+ "kind": "expression",
2355
+ "type": "string"
2356
+ }
2357
+ },
2358
+ {
2359
+ "name": "open",
2360
+ "description": "Should item be open on load",
1763
2361
  "required": false,
1764
2362
  "default": "false",
1765
2363
  "value": {
1766
2364
  "kind": "expression",
1767
2365
  "type": "boolean"
1768
2366
  }
2367
+ },
2368
+ {
2369
+ "name": "size",
2370
+ "description": "The size of the details. Primarily controls the trigger element and overall padding.",
2371
+ "required": false,
2372
+ "default": "'medium'",
2373
+ "value": {
2374
+ "kind": "expression",
2375
+ "type": "\"large\" | \"medium\" | \"small\""
2376
+ }
1769
2377
  }
1770
2378
  ],
1771
2379
  "slots": [
@@ -1773,13 +2381,21 @@
1773
2381
  "name": "default",
1774
2382
  "description": "content that will be hidden / revealed"
1775
2383
  },
2384
+ {
2385
+ "name": "icon-collapse",
2386
+ "description": "used for icons at the end of the handle when open. Rotates on open by default; use ::part selector to override."
2387
+ },
1776
2388
  {
1777
2389
  "name": "icon-end",
1778
- "description": "used for icons at the end of the handle"
2390
+ "description": "used for icons at the end of the handle.\nAlternatively use `icon-expand` / `icon-collapse` slots. Rotates on open by default; use ::part selector to override."
2391
+ },
2392
+ {
2393
+ "name": "icon-expand",
2394
+ "description": "used for icons at the end of the handle when closed. Rotates on open by default; use ::part selector to override."
1779
2395
  },
1780
2396
  {
1781
2397
  "name": "icon-start",
1782
- "description": "used for icons at the start of the handle"
2398
+ "description": "used for icons at the start of the handle. Rotates on open by default; use ::part selector to override."
1783
2399
  },
1784
2400
  {
1785
2401
  "name": "label",
@@ -1788,7 +2404,7 @@
1788
2404
  ],
1789
2405
  "events": [
1790
2406
  {
1791
- "name": "nanoAfterClosed",
2407
+ "name": "nanoAfterClose",
1792
2408
  "description": "Emitted after the details closes and all transitions are complete.",
1793
2409
  "arguments": [
1794
2410
  {
@@ -1798,7 +2414,7 @@
1798
2414
  ]
1799
2415
  },
1800
2416
  {
1801
- "name": "nanoAfterOpened",
2417
+ "name": "nanoAfterOpen",
1802
2418
  "description": "Emitted after the details opens and all transitions are complete.",
1803
2419
  "arguments": [
1804
2420
  {
@@ -1808,8 +2424,8 @@
1808
2424
  ]
1809
2425
  },
1810
2426
  {
1811
- "name": "nanoClosed",
1812
- "description": "Emitted when the component closes.\nNote: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.",
2427
+ "name": "nanoClose",
2428
+ "description": "Emitted when the component closes.\nNote: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.",
1813
2429
  "arguments": [
1814
2430
  {
1815
2431
  "name": "detail",
@@ -1818,8 +2434,8 @@
1818
2434
  ]
1819
2435
  },
1820
2436
  {
1821
- "name": "nanoOpened",
1822
- "description": "Emitted when the component opens.\nNote: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.",
2437
+ "name": "nanoOpen",
2438
+ "description": "Emitted when the component opens.\nNote: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.",
1823
2439
  "arguments": [
1824
2440
  {
1825
2441
  "name": "detail",
@@ -1851,20 +2467,10 @@
1851
2467
  {
1852
2468
  "name": "label",
1853
2469
  "description": "The dialog's label as displayed in the header. You should always include a relevant\nlabel even when using `no-header`, as it is required for proper accessibility.",
1854
- "required": true,
1855
- "value": {
1856
- "kind": "expression",
1857
- "type": "string"
1858
- }
1859
- },
1860
- {
1861
- "name": "no-footer",
1862
- "description": "Set to true to disable the footer. This will also remove the footer close button,\nso please ensure you provide an easy, accessible way for users to dismiss the dialog.",
1863
- "required": false,
1864
- "default": "false",
2470
+ "required": true,
1865
2471
  "value": {
1866
2472
  "kind": "expression",
1867
- "type": "boolean"
2473
+ "type": "string"
1868
2474
  }
1869
2475
  },
1870
2476
  {
@@ -2082,6 +2688,16 @@
2082
2688
  "type": "\"bottom\" | \"end\" | \"start\" | \"top\""
2083
2689
  }
2084
2690
  },
2691
+ {
2692
+ "name": "resizable",
2693
+ "description": "Makes the drawer resizable",
2694
+ "required": false,
2695
+ "default": "false",
2696
+ "value": {
2697
+ "kind": "expression",
2698
+ "type": "boolean"
2699
+ }
2700
+ },
2085
2701
  {
2086
2702
  "name": "store-id",
2087
2703
  "description": "Store search queries (against this ID) to the component store. Use in conjunction with storeMethod",
@@ -2111,6 +2727,10 @@
2111
2727
  "name": "footer",
2112
2728
  "description": "The drawer's footer, usually one or more buttons representing various options"
2113
2729
  },
2730
+ {
2731
+ "name": "handle",
2732
+ "description": "The drawer's resize handle, used to resize the drawer when `resizable` is set"
2733
+ },
2114
2734
  {
2115
2735
  "name": "header-actions",
2116
2736
  "description": "Optional actions to add to the header. Works best with `<nano-icon-button>`"
@@ -2162,7 +2782,7 @@
2162
2782
  ]
2163
2783
  },
2164
2784
  {
2165
- "name": "nanoRquestClose",
2785
+ "name": "nanoRequestClose",
2166
2786
  "description": "Emitted when the user attempts to\nclose the drawer by clicking the close button, clicking the overlay, or pressing escape. Calling\n`event.preventDefault()` will keep the drawer open. Avoid using this unless closing the drawer will result in\ndestructive behavior such as data loss.",
2167
2787
  "arguments": [
2168
2788
  {
@@ -2186,7 +2806,7 @@
2186
2806
  {
2187
2807
  "name": "NanoDropdown",
2188
2808
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-dropdown",
2189
- "description": "Dropdowns show additional content in a panel.\nDesigned to work well with nano-menu components to provide a list of options (`nano-nav-items` / `nano-option`).",
2809
+ "description": "Dropdowns expose additional content that “drops down” in a panel.",
2190
2810
  "source": {
2191
2811
  "module": "@nanoporetech-digital/components/src/components/dropdown/dropdown.d.ts",
2192
2812
  "symbol": "Dropdown"
@@ -2213,7 +2833,7 @@
2213
2833
  }
2214
2834
  },
2215
2835
  {
2216
- "name": "containingElement",
2836
+ "name": "containing-element",
2217
2837
  "description": "The dropdown will close when the user interacts outside of this element (e.g. clicking).",
2218
2838
  "required": false,
2219
2839
  "value": {
@@ -2234,7 +2854,7 @@
2234
2854
  "name": "distance",
2235
2855
  "description": "The distance in pixels from which to offset the panel away from its trigger.",
2236
2856
  "required": false,
2237
- "default": "2",
2857
+ "default": "5",
2238
2858
  "value": {
2239
2859
  "kind": "expression",
2240
2860
  "type": "number"
@@ -2281,7 +2901,7 @@
2281
2901
  }
2282
2902
  },
2283
2903
  {
2284
- "name": "tetherTo",
2904
+ "name": "tether-to",
2285
2905
  "description": "If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.\nAnd you will still need to control when the component is opened (using show() / hide() or the `open` prop)",
2286
2906
  "required": false,
2287
2907
  "default": "null",
@@ -2347,7 +2967,7 @@
2347
2967
  {
2348
2968
  "name": "NanoFieldValidator",
2349
2969
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-field-validator",
2350
- "description": "A toolbox for `nano-...` form fields and form validation.\n- Easy to add validation across field dependencies - e.g. \"When Field1 contains '123' Field2 must contain '456'\"\n- Easy access to whole form and individual field validity states\n- Easy access to form data payload\n= Access to 2-way, data bound reactive store\n- Scroll to invalid field on submit",
2970
+ "description": "A toolbox to expose a form's data model and validation state",
2351
2971
  "source": {
2352
2972
  "module": "@nanoporetech-digital/components/src/components/field-validator/field-validator.d.ts",
2353
2973
  "symbol": "FieldValidator"
@@ -2439,7 +3059,7 @@
2439
3059
  }
2440
3060
  },
2441
3061
  {
2442
- "name": "validationState",
3062
+ "name": "validation-state",
2443
3063
  "description": "Get the current validation state of all form fields.",
2444
3064
  "required": false,
2445
3065
  "value": {
@@ -2708,25 +3328,64 @@
2708
3328
  }
2709
3329
  ]
2710
3330
  },
3331
+ {
3332
+ "name": "NanoFooter",
3333
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-footer",
3334
+ "description": "The footer is used to provide navigation, copyright info and links to social media platforms.",
3335
+ "source": {
3336
+ "module": "@nanoporetech-digital/components/src/components/footer/footer.d.ts",
3337
+ "symbol": "Footer"
3338
+ },
3339
+ "attributes": [],
3340
+ "slots": [
3341
+ {
3342
+ "name": "bottom-end",
3343
+ "description": "The content for the right side of the bottom section (language selector)."
3344
+ },
3345
+ {
3346
+ "name": "bottom-start",
3347
+ "description": "The content for the bottom left section (copyright notice - optional)."
3348
+ },
3349
+ {
3350
+ "name": "middle-end",
3351
+ "description": "The content for the middle end (certifications) section."
3352
+ },
3353
+ {
3354
+ "name": "top-center_content",
3355
+ "description": "The content for the top center (links) section."
3356
+ },
3357
+ {
3358
+ "name": "top-center_heading",
3359
+ "description": "The heading for the top center section."
3360
+ },
3361
+ {
3362
+ "name": "top-end_content",
3363
+ "description": "The content for the top right (links) section."
3364
+ },
3365
+ {
3366
+ "name": "top-end_heading",
3367
+ "description": "The heading for the top right section."
3368
+ },
3369
+ {
3370
+ "name": "top-start_content",
3371
+ "description": "The content for the top left (form) section."
3372
+ },
3373
+ {
3374
+ "name": "top-start_heading",
3375
+ "description": "The heading for the top left section."
3376
+ }
3377
+ ],
3378
+ "events": []
3379
+ },
2711
3380
  {
2712
3381
  "name": "NanoGlobalNav",
2713
3382
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-global-nav",
2714
- "description": "Nanopore digital global navigation and search bar.\nIncorporates MyAccount / SSO states (messages / cart / user name etc).\nIncorporates Algolia search.",
3383
+ "description": "The Global nav component standardises navigation within and across web applications.",
2715
3384
  "source": {
2716
3385
  "module": "@nanoporetech-digital/components/src/components/global-nav/global-nav.d.ts",
2717
3386
  "symbol": "GlobalNav"
2718
3387
  },
2719
3388
  "attributes": [
2720
- {
2721
- "name": "activeMyAccountSections",
2722
- "description": "Active MyAccount link sections. By default all will show.",
2723
- "required": false,
2724
- "default": "null",
2725
- "value": {
2726
- "kind": "expression",
2727
- "type": "(\"about\" | \"loggedin\" | \"sites\" | \"icons\")[]"
2728
- }
2729
- },
2730
3389
  {
2731
3390
  "name": "cart-count",
2732
3391
  "description": "MyAccount store cart count.",
@@ -2741,30 +3400,30 @@
2741
3400
  "name": "cart-url",
2742
3401
  "description": "Url to the Nanopore store cart. Will default to the url supplied by MyAccount",
2743
3402
  "required": false,
2744
- "default": "null",
3403
+ "default": "''",
2745
3404
  "value": {
2746
3405
  "kind": "expression",
2747
3406
  "type": "string"
2748
3407
  }
2749
3408
  },
2750
3409
  {
2751
- "name": "env",
2752
- "description": "Connect to local, dev, test or prod MyAccount\nenvironments to retrieve global nav / sso data.\nAlternatively, you can use the `ssoDataUrl` prop.",
3410
+ "name": "contact-url",
3411
+ "description": "Url to the Nanopore contact page",
2753
3412
  "required": false,
2754
- "default": "'prod'",
3413
+ "default": "'https://nanoporetech.com/contact'",
2755
3414
  "value": {
2756
3415
  "kind": "expression",
2757
- "type": "\"dev\" | \"local\" | \"prod\" | \"test\""
3416
+ "type": "string"
2758
3417
  }
2759
3418
  },
2760
3419
  {
2761
- "name": "get-my-account-data",
2762
- "description": "Whether to attempt to get global nav / sso data from MyAccount",
3420
+ "name": "login-url",
3421
+ "description": "Url to the Nanopore login page. Will default to the url supplied by MyAccount",
2763
3422
  "required": false,
2764
- "default": "true",
3423
+ "default": "''",
2765
3424
  "value": {
2766
3425
  "kind": "expression",
2767
- "type": "boolean"
3426
+ "type": "string"
2768
3427
  }
2769
3428
  },
2770
3429
  {
@@ -2777,6 +3436,16 @@
2777
3436
  "type": "string"
2778
3437
  }
2779
3438
  },
3439
+ {
3440
+ "name": "logout-url",
3441
+ "description": "Url to the Nanopore login page. Will default to the url supplied by MyAccount",
3442
+ "required": false,
3443
+ "default": "''",
3444
+ "value": {
3445
+ "kind": "expression",
3446
+ "type": "string"
3447
+ }
3448
+ },
2780
3449
  {
2781
3450
  "name": "msg-count",
2782
3451
  "description": "MyAccount un-read message count.",
@@ -2791,15 +3460,15 @@
2791
3460
  "name": "msg-url",
2792
3461
  "description": "Url to the Nanopore message center. Will default to the url supplied by MyAccount",
2793
3462
  "required": false,
2794
- "default": "null",
3463
+ "default": "''",
2795
3464
  "value": {
2796
3465
  "kind": "expression",
2797
3466
  "type": "string"
2798
3467
  }
2799
3468
  },
2800
3469
  {
2801
- "name": "myAccountData",
2802
- "description": "An alternative to both 'env' and 'ssoDataUrl'.\nYou can directly provide a JSON object of myaccount data.\n(e.g. https://myaccount.nanoporetech.com/nav_bar_data.json)\nThis is useful for SSR",
3470
+ "name": "my-account-data",
3471
+ "description": "MyAccount data automatically set via `myAccountUrl`.\nAlternatively you can directly provide a JSON object which is useful for SSR\n(ref https://myaccount.nanoporetech.com/nav_bar_data.json)",
2803
3472
  "required": false,
2804
3473
  "value": {
2805
3474
  "kind": "expression",
@@ -2807,27 +3476,8 @@
2807
3476
  }
2808
3477
  },
2809
3478
  {
2810
- "name": "myAccountUser",
2811
- "description": "Logged in user details automatically populated from MyAccount",
2812
- "required": false,
2813
- "default": "null",
2814
- "value": {
2815
- "kind": "expression",
2816
- "type": "MyAccountUser"
2817
- }
2818
- },
2819
- {
2820
- "name": "search-api-key",
2821
- "description": "An Algolia API Key. Will be automatically populated from MyAccount",
2822
- "required": false,
2823
- "value": {
2824
- "kind": "expression",
2825
- "type": "string"
2826
- }
2827
- },
2828
- {
2829
- "name": "search-app-id",
2830
- "description": "An Algolia App ID key. Will be automatically populated from MyAccount",
3479
+ "name": "my-account-url",
3480
+ "description": "A base url to retrieve global nav / sso data. `nav_bar_data.json` will be appended to this url",
2831
3481
  "required": false,
2832
3482
  "value": {
2833
3483
  "kind": "expression",
@@ -2835,18 +3485,17 @@
2835
3485
  }
2836
3486
  },
2837
3487
  {
2838
- "name": "searchIndeces",
2839
- "description": "An array of Algolia search indexes (and optional display names). Will be automatically populated from MyAccount",
3488
+ "name": "my-account-user",
3489
+ "description": "Logged in user details automatically populated from MyAccount",
2840
3490
  "required": false,
2841
- "default": "[]",
2842
3491
  "value": {
2843
3492
  "kind": "expression",
2844
- "type": "SearchIndex[]"
3493
+ "type": "MyAccountUser"
2845
3494
  }
2846
3495
  },
2847
3496
  {
2848
3497
  "name": "search-index",
2849
- "description": "Algolia search index to programmatically set or to set an initial index",
3498
+ "description": "Algolia search index to search within",
2850
3499
  "required": false,
2851
3500
  "default": "'All'",
2852
3501
  "value": {
@@ -2856,7 +3505,7 @@
2856
3505
  },
2857
3506
  {
2858
3507
  "name": "search-value",
2859
- "description": "A search value to passed to Algolia to programmatically get or to preload search results",
3508
+ "description": "A search string used to load and show autocomplete results",
2860
3509
  "required": false,
2861
3510
  "default": "''",
2862
3511
  "value": {
@@ -2865,39 +3514,9 @@
2865
3514
  }
2866
3515
  },
2867
3516
  {
2868
- "name": "show-logo",
2869
- "description": "Whether to show Nanopore logo",
2870
- "required": false,
2871
- "default": "true",
2872
- "value": {
2873
- "kind": "expression",
2874
- "type": "boolean"
2875
- }
2876
- },
2877
- {
2878
- "name": "show-search",
2879
- "description": "Whether to show search functionality",
2880
- "required": false,
2881
- "default": "true",
2882
- "value": {
2883
- "kind": "expression",
2884
- "type": "boolean"
2885
- }
2886
- },
2887
- {
2888
- "name": "sso-data-url",
2889
- "description": "A base url to retrieve global nav / sso data.\n`nav_bar_data.json` will be appended to this url.\nAn alternative to the pre-defined `env` urls",
2890
- "required": false,
2891
- "value": {
2892
- "kind": "expression",
2893
- "type": "string"
2894
- }
2895
- },
2896
- {
2897
- "name": "sso-redirect",
2898
- "description": "Where to take user after SSO login",
3517
+ "name": "session-redirect",
3518
+ "description": "A url to take the user after login / logout. Defaults to current URL. Is automatically URI encoded",
2899
3519
  "required": false,
2900
- "default": "encodeURIComponent(window.location.href)",
2901
3520
  "value": {
2902
3521
  "kind": "expression",
2903
3522
  "type": "string"
@@ -2907,56 +3526,14 @@
2907
3526
  "slots": [
2908
3527
  {
2909
3528
  "name": "default",
2910
- "description": "if using search functionality, place a `<nano-search-results />` element in the default slot"
2911
- },
2912
- {
2913
- "name": "about",
2914
- "description": "nano-nav-item's to display with about links that come from MyAccount"
2915
- },
2916
- {
2917
- "name": "icon",
2918
- "description": "nano-nav-item's displayed alongside icon links that come from MyAccount"
2919
- },
2920
- {
2921
- "name": "loggedin",
2922
- "description": "nano-nav-item's to display when users are signed in, alongside links from from MyAccount (within the overflow menu panel)."
2923
- },
2924
- {
2925
- "name": "logo",
2926
- "description": "when show-logo=\"false\" you can utilise the logo slot"
2927
- },
2928
- {
2929
- "name": "main",
2930
- "description": "main nav items. Should be used with nano-nav-item's"
3529
+ "description": "Main site content."
2931
3530
  },
2932
3531
  {
2933
- "name": "overflow",
2934
- "description": "items to always display in the overflow menu"
2935
- },
2936
- {
2937
- "name": "promotion",
2938
- "description": "a free area for any promotional content, displayed within the overflow menu panel"
2939
- },
2940
- {
2941
- "name": "search",
2942
- "description": "when not using myaccount search OR show-search=\"false\" you can utilise the search slot"
2943
- },
2944
- {
2945
- "name": "site",
2946
- "description": "nano-nav-item's to display with site links that come from MyAccount"
3532
+ "name": "menu",
3533
+ "description": "Main menu items. Can be used with `<nano-nav-item>` or `<a>` elements."
2947
3534
  }
2948
3535
  ],
2949
3536
  "events": [
2950
- {
2951
- "name": "nanoIsReady",
2952
- "description": "Emitted when the global nav is ready.",
2953
- "arguments": [
2954
- {
2955
- "name": "detail",
2956
- "type": "void"
2957
- }
2958
- ]
2959
- },
2960
3537
  {
2961
3538
  "name": "nanoSearchError",
2962
3539
  "description": "Emitted when algolia returns an error.",
@@ -2986,39 +3563,18 @@
2986
3563
  "type": "AlgoliaSearchResultDetail"
2987
3564
  }
2988
3565
  ]
2989
- }
2990
- ]
2991
- },
2992
- {
2993
- "name": "NanoGlobalNavUserProfile",
2994
- "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-global-nav-user-profile",
2995
- "description": "Nanopore digital global navigation user profile.",
2996
- "source": {
2997
- "module": "@nanoporetech-digital/components/src/components/global-nav/global-nav-user-profile.d.ts",
2998
- "symbol": "GlobalNavUserProfile"
2999
- },
3000
- "attributes": [
3001
- {
3002
- "name": "myAccountUser",
3003
- "description": "Logged in user details automatically populated from MyAccount",
3004
- "required": false,
3005
- "value": {
3006
- "kind": "expression",
3007
- "type": "MyAccountUser"
3008
- }
3009
3566
  },
3010
3567
  {
3011
- "name": "user-profile-url",
3012
- "description": "Link to the user profile",
3013
- "required": false,
3014
- "value": {
3015
- "kind": "expression",
3016
- "type": "string"
3017
- }
3568
+ "name": "nanoUserData",
3569
+ "description": "Emitted when myaccount data has loaded",
3570
+ "arguments": [
3571
+ {
3572
+ "name": "detail",
3573
+ "type": "MyAccountUser"
3574
+ }
3575
+ ]
3018
3576
  }
3019
- ],
3020
- "slots": [],
3021
- "events": []
3577
+ ]
3022
3578
  },
3023
3579
  {
3024
3580
  "name": "NanoGlobalSearchResults",
@@ -3046,7 +3602,7 @@
3046
3602
  {
3047
3603
  "name": "NanoGrid",
3048
3604
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-grid",
3049
- "description": "A lightweight, context-aware CSS grid implementation.\n\n- Define multiple grids templates at different breakpoints\n- Uses `@container` queries to select the correct grid depending on the current dimensions\n- Use `grid-states=\"...\"` on direct descendants for `column` / `row` - `start` / `end`\n- SSR optimised",
3605
+ "description": "A context-aware CSS grid implementation.",
3050
3606
  "source": {
3051
3607
  "module": "@nanoporetech-digital/components/src/components/grid/grid.d.ts",
3052
3608
  "symbol": "Grid"
@@ -3323,7 +3879,7 @@
3323
3879
  {
3324
3880
  "name": "NanoIcon",
3325
3881
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-icon",
3326
- "description": "An SVG loader / helper. Comes bundled with all fontawesome pro icons by default but can use any custom SVG (with an correct path).\nLazily loads SVG for each icon, so will only request the icons that you're using and that are visible.",
3882
+ "description": "An SVG loader / helper. Comes bundled with font-awesome pro icons & ONT pictogram and device icons.\nLazily loads SVG as icons become visible.",
3327
3883
  "source": {
3328
3884
  "module": "@nanoporetech-digital/components/src/components/icon/icon.d.ts",
3329
3885
  "symbol": "Icon"
@@ -3340,16 +3896,16 @@
3340
3896
  },
3341
3897
  {
3342
3898
  "name": "color",
3343
- "description": "Color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.",
3899
+ "description": "Specifies the color of the icon. If not specified, the icon will inherit the color of the parent element.",
3344
3900
  "required": false,
3345
3901
  "value": {
3346
3902
  "kind": "expression",
3347
- "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\""
3903
+ "type": "\"neutral\" | \"primary\""
3348
3904
  }
3349
3905
  },
3350
3906
  {
3351
3907
  "name": "flip-rtl",
3352
- "description": "Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.",
3908
+ "description": "Specifies whether the icon should horizontally flip when `dir` is `\"rtl\"`.\nBy default, when an 'arrow' or 'chevron' icon is used, it will flip automatically when detecting `dir=\"rtl\"` on the document or closest ancestor.",
3353
3909
  "required": false,
3354
3910
  "value": {
3355
3911
  "kind": "expression",
@@ -3395,11 +3951,12 @@
3395
3951
  },
3396
3952
  {
3397
3953
  "name": "size",
3398
- "description": "The size of the icon.\nAvailable options are: `\"small\"` and `\"large\"`.",
3954
+ "description": "The size of the icon. `auto` automatically sizes according to the font-size of the parent element.\n*Note*: size will be different on 'pictogram' and 'device' vs 'font awesome' icons.",
3399
3955
  "required": false,
3956
+ "default": "'auto'",
3400
3957
  "value": {
3401
3958
  "kind": "expression",
3402
- "type": "\"large\" | \"small\""
3959
+ "type": "\"auto\" | \"large\" | \"regular\" | \"small\" | \"xl\""
3403
3960
  }
3404
3961
  },
3405
3962
  {
@@ -3413,12 +3970,33 @@
3413
3970
  }
3414
3971
  ],
3415
3972
  "slots": [],
3416
- "events": []
3973
+ "events": [
3974
+ {
3975
+ "name": "nanoError",
3976
+ "description": "Emitted when the icon fails to load.",
3977
+ "arguments": [
3978
+ {
3979
+ "name": "detail",
3980
+ "type": "any"
3981
+ }
3982
+ ]
3983
+ },
3984
+ {
3985
+ "name": "nanoLoad",
3986
+ "description": "Emitted when the icon has finished loading.",
3987
+ "arguments": [
3988
+ {
3989
+ "name": "detail",
3990
+ "type": "any"
3991
+ }
3992
+ ]
3993
+ }
3994
+ ]
3417
3995
  },
3418
3996
  {
3419
3997
  "name": "NanoIconButton",
3420
3998
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-icon-button",
3421
- "description": "Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.",
3999
+ "description": "Simple icon-only buttons designed to be used for actions and in toolbars.",
3422
4000
  "source": {
3423
4001
  "module": "@nanoporetech-digital/components/src/components/icon-button/icon-button.d.ts",
3424
4002
  "symbol": "IconButton"
@@ -3539,6 +4117,52 @@
3539
4117
  "slots": [],
3540
4118
  "events": []
3541
4119
  },
4120
+ {
4121
+ "name": "NanoIconItem",
4122
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-icon-item",
4123
+ "description": "Icon Items are a standard way of displaying a Pictogram or Device Icon with some concise text.",
4124
+ "source": {
4125
+ "module": "@nanoporetech-digital/components/src/components/icon-item/icon-item.ts",
4126
+ "symbol": "IconItem"
4127
+ },
4128
+ "attributes": [
4129
+ {
4130
+ "name": "layout",
4131
+ "description": "The layout of the icon items. Defaults to portrait.",
4132
+ "required": false,
4133
+ "default": "'portrait'",
4134
+ "value": {
4135
+ "kind": "expression",
4136
+ "type": "\"landscape\" | \"portrait\""
4137
+ }
4138
+ },
4139
+ {
4140
+ "name": "size",
4141
+ "description": "The size of the icon. Defaults to regular",
4142
+ "required": false,
4143
+ "default": "'regular'",
4144
+ "value": {
4145
+ "kind": "expression",
4146
+ "type": "\"large\" | \"regular\""
4147
+ }
4148
+ }
4149
+ ],
4150
+ "slots": [
4151
+ {
4152
+ "name": "content",
4153
+ "description": "The main content of the icon item."
4154
+ },
4155
+ {
4156
+ "name": "icon",
4157
+ "description": "The icon of the icon item. Appears first."
4158
+ },
4159
+ {
4160
+ "name": "title",
4161
+ "description": "The title of the icon item."
4162
+ }
4163
+ ],
4164
+ "events": []
4165
+ },
3542
4166
  {
3543
4167
  "name": "NanoImg",
3544
4168
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-img",
@@ -3644,10 +4268,60 @@
3644
4268
  }
3645
4269
  ]
3646
4270
  },
4271
+ {
4272
+ "name": "NanoInPageNav",
4273
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-in-page-nav",
4274
+ "description": "\\\nIn-page navigation allows users to quickly find different sections on a page.",
4275
+ "source": {
4276
+ "module": "@nanoporetech-digital/components/src/components/in-page-nav/in-page-nav.d.ts",
4277
+ "symbol": "InPageNav"
4278
+ },
4279
+ "attributes": [
4280
+ {
4281
+ "name": "breakpoint",
4282
+ "description": "The breakpoint (in px) at which the nav will switch from large to small screen styles. Defaults to 767",
4283
+ "required": false,
4284
+ "default": "767",
4285
+ "value": {
4286
+ "kind": "expression",
4287
+ "type": "number"
4288
+ }
4289
+ },
4290
+ {
4291
+ "name": "sticky-headers",
4292
+ "description": "Whether the headers should be sticky (small screen only). Defaults to true",
4293
+ "required": false,
4294
+ "default": "true",
4295
+ "value": {
4296
+ "kind": "expression",
4297
+ "type": "boolean"
4298
+ }
4299
+ }
4300
+ ],
4301
+ "slots": [
4302
+ {
4303
+ "name": "accessory",
4304
+ "description": "To add nav accessories, such as a text input."
4305
+ },
4306
+ {
4307
+ "name": "back",
4308
+ "description": "For a link to navigate back to the previous section."
4309
+ },
4310
+ {
4311
+ "name": "default",
4312
+ "description": "The default slot."
4313
+ },
4314
+ {
4315
+ "name": "mobile",
4316
+ "description": "An escape hatch to add a custom mobile nav to override the provided one."
4317
+ }
4318
+ ],
4319
+ "events": []
4320
+ },
3647
4321
  {
3648
4322
  "name": "NanoInput",
3649
4323
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-input",
3650
- "description": "The input component is a wrapper to the HTML input element with custom styling and additional functionality. It accepts most of the same properties as the HTML [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input).\n\nIt is meant for text type inputs only, such as \"text\", \"password\", \"email\", \"number\", \"search\", \"tel\", and \"url\". It supports all standard text input events including keyup, keydown, keypress, and more.\nThe default styling reference comes from the [ONT styleguide](https://nanoporetech.zeroheight.com/styleguide/s/31282/p/230c74-text-input--textarea/b/942ee4)",
4324
+ "description": "Inputs collect text data from the user.",
3651
4325
  "source": {
3652
4326
  "module": "@nanoporetech-digital/components/src/components/input/input.d.ts",
3653
4327
  "symbol": "Input"
@@ -3662,6 +4336,16 @@
3662
4336
  "type": "string"
3663
4337
  }
3664
4338
  },
4339
+ {
4340
+ "name": "always-show-placeholder",
4341
+ "description": "Sometimes it can be helpful to always show the placeholder, even when the input has a value.\nFor example a postcode field could have a placeholder `e.g. LD1 1AA` which is helpful to show.",
4342
+ "required": false,
4343
+ "default": "false",
4344
+ "value": {
4345
+ "kind": "expression",
4346
+ "type": "boolean"
4347
+ }
4348
+ },
3665
4349
  {
3666
4350
  "name": "autocapitalise",
3667
4351
  "description": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.",
@@ -3703,31 +4387,32 @@
3703
4387
  }
3704
4388
  },
3705
4389
  {
3706
- "name": "clear-input",
3707
- "description": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.",
4390
+ "name": "clear-on-edit",
4391
+ "description": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.",
3708
4392
  "required": false,
3709
- "default": "false",
3710
4393
  "value": {
3711
4394
  "kind": "expression",
3712
4395
  "type": "boolean"
3713
4396
  }
3714
4397
  },
3715
4398
  {
3716
- "name": "clear-on-edit",
3717
- "description": "If `true`, the value will be cleared after focus upon edit. Defaults to `true` when `type` is `\"password\"`, `false` for all other types.",
4399
+ "name": "clearable",
4400
+ "description": "If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.",
3718
4401
  "required": false,
4402
+ "default": "false",
3719
4403
  "value": {
3720
4404
  "kind": "expression",
3721
4405
  "type": "boolean"
3722
4406
  }
3723
4407
  },
3724
4408
  {
3725
- "name": "color",
3726
- "description": "The color to use from the application's color palette.",
4409
+ "name": "close-after-picked",
4410
+ "description": "relevant to `type=\"date\"`. If `true`, the input will close after a date is picked.",
3727
4411
  "required": false,
4412
+ "default": "true",
3728
4413
  "value": {
3729
4414
  "kind": "expression",
3730
- "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\""
4415
+ "type": "boolean"
3731
4416
  }
3732
4417
  },
3733
4418
  {
@@ -3779,6 +4464,15 @@
3779
4464
  "type": "boolean"
3780
4465
  }
3781
4466
  },
4467
+ {
4468
+ "name": "initial-picker-date",
4469
+ "description": "relevant to `type=\"date\"`. Initial picker date. Defaults to `value` if set and today's date if not.\nMust be in IS0-8601 format: YYYY-MM-DD.",
4470
+ "required": false,
4471
+ "value": {
4472
+ "kind": "expression",
4473
+ "type": "string"
4474
+ }
4475
+ },
3782
4476
  {
3783
4477
  "name": "inputmode",
3784
4478
  "description": "A hint to the browser for which keyboard to display.\nPossible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`,\n`\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`.",
@@ -3792,16 +4486,26 @@
3792
4486
  "name": "invalid",
3793
4487
  "description": "This will be true when the control is in an invalid state.\nValidity is determined by the `required` prop. Or if custom validity message is set.",
3794
4488
  "required": false,
3795
- "default": "false",
4489
+ "default": "null",
3796
4490
  "value": {
3797
4491
  "kind": "expression",
3798
- "type": "boolean"
4492
+ "type": "any"
4493
+ }
4494
+ },
4495
+ {
4496
+ "name": "is-date-disabled",
4497
+ "description": "relevant to `type=\"date\"`. Controls which days are disabled and therefore disallowed.\nFor example, this can be used to disallow selection of weekends.",
4498
+ "required": false,
4499
+ "default": "() => false",
4500
+ "value": {
4501
+ "kind": "expression",
4502
+ "type": "(date: Date) => boolean"
3799
4503
  }
3800
4504
  },
3801
4505
  {
3802
4506
  "name": "label",
3803
4507
  "description": "String to place within a label element. Alternatively you may use a label slot.",
3804
- "required": true,
4508
+ "required": false,
3805
4509
  "value": {
3806
4510
  "kind": "expression",
3807
4511
  "type": "string"
@@ -3871,6 +4575,16 @@
3871
4575
  "type": "string"
3872
4576
  }
3873
4577
  },
4578
+ {
4579
+ "name": "picker-options",
4580
+ "description": "relevant to `type=\"date\"`. Other options to pass to the date picker.\nSee the `nano-date-picker` docs for more information.",
4581
+ "required": false,
4582
+ "default": "{}",
4583
+ "value": {
4584
+ "kind": "expression",
4585
+ "type": "{ host?: HTMLNanoDatePickerElement; activeFocus?: boolean; focusedDay?: Date; selectedDate?: string; min?: string; max?: string; firstDayOfWeek?: DaysOfWeek; localization?: DuetLocalizedText; isDateDisabled?: DateDisabledPredicate; isModal?: boolean; firstFocusEle?: HTMLElement; nanoDatePicked?: EventEmitter<PickerChangeEvent>; setFocus?: (day?: boolean) => Promise<void>; handleSelectedDateChange?: () => void; componentWillLoad?: () => void; render?: () => any; }"
4586
+ }
4587
+ },
3874
4588
  {
3875
4589
  "name": "placeholder",
3876
4590
  "description": "Instructional text that shows before the input has a value.",
@@ -3892,7 +4606,7 @@
3892
4606
  },
3893
4607
  {
3894
4608
  "name": "required",
3895
- "description": "If `true`, the user must fill in a value before submitting a form.",
4609
+ "description": "If `true`, the user must fill in a value before submitting a form.\nBy default, setting this will also add an asterisk to the label.\nYou can disable this by using the `label` slot instead.",
3896
4610
  "required": false,
3897
4611
  "default": "false",
3898
4612
  "value": {
@@ -3902,7 +4616,7 @@
3902
4616
  },
3903
4617
  {
3904
4618
  "name": "resize",
3905
- "description": "relevant to type=\"textarea\". Vertical resizing - enable / disable or make automatic.",
4619
+ "description": "relevant to `type=\"textarea\"`. Vertical resizing - enable / disable or make automatic.",
3906
4620
  "required": false,
3907
4621
  "default": "'auto'",
3908
4622
  "value": {
@@ -3912,7 +4626,7 @@
3912
4626
  },
3913
4627
  {
3914
4628
  "name": "rows",
3915
- "description": "relevant to type=\"textarea\". Default number of rows to show",
4629
+ "description": "relevant to `type=\"textarea\"`. Default number of rows to show",
3916
4630
  "required": false,
3917
4631
  "default": "2",
3918
4632
  "value": {
@@ -3922,7 +4636,7 @@
3922
4636
  },
3923
4637
  {
3924
4638
  "name": "show-char-count",
3925
- "description": "relevant to type=\"textarea\".",
4639
+ "description": "Whether to show a character count / remaining count when using the `maxlength` attribute.",
3926
4640
  "required": false,
3927
4641
  "default": "false",
3928
4642
  "value": {
@@ -3940,6 +4654,16 @@
3940
4654
  "type": "boolean"
3941
4655
  }
3942
4656
  },
4657
+ {
4658
+ "name": "show-picker",
4659
+ "description": "relevant to `type=\"date\"`. Whether to show a date picker.\nDate pickers are not very useful if the potential input is too far in the distance or past e.g. Birthdays",
4660
+ "required": false,
4661
+ "default": "true",
4662
+ "value": {
4663
+ "kind": "expression",
4664
+ "type": "boolean"
4665
+ }
4666
+ },
3943
4667
  {
3944
4668
  "name": "size",
3945
4669
  "description": "The initial size of the control. This value is in pixels unless the value of the type attribute is `\"text\"` or `\"password\"`, in which case it is an integer number of characters. This attribute applies only when the `type` attribute is set to `\"text\"`, `\"search\"`, `\"tel\"`, `\"url\"`, `\"email\"`, or `\"password\"`, otherwise it is ignored.",
@@ -4006,6 +4730,24 @@
4006
4730
  "kind": "expression",
4007
4731
  "type": "string"
4008
4732
  }
4733
+ },
4734
+ {
4735
+ "name": "value-as-date",
4736
+ "description": "Represents the current value of the input as a Date, or null if conversion is not possible",
4737
+ "required": false,
4738
+ "value": {
4739
+ "kind": "expression",
4740
+ "type": "Date"
4741
+ }
4742
+ },
4743
+ {
4744
+ "name": "value-as-number",
4745
+ "description": "Represents the value of the input or NaN if numeric conversion is impossible",
4746
+ "required": false,
4747
+ "value": {
4748
+ "kind": "expression",
4749
+ "type": "number"
4750
+ }
4009
4751
  }
4010
4752
  ],
4011
4753
  "slots": [
@@ -4098,7 +4840,7 @@
4098
4840
  {
4099
4841
  "name": "NanoIntersectionObserve",
4100
4842
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-intersection-observe",
4101
- "description": "A thin, declarative interface to the IntersectionObserver API.",
4843
+ "description": "A thin, declarative interface to the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver).",
4102
4844
  "source": {
4103
4845
  "module": "@nanoporetech-digital/components/src/components/intersection-observe/intersection-observe.d.ts",
4104
4846
  "symbol": "IntersectionObserve"
@@ -4111,7 +4853,7 @@
4111
4853
  "default": "'auto'",
4112
4854
  "value": {
4113
4855
  "kind": "expression",
4114
- "type": "\"auto\" | \"root\" | Element"
4856
+ "type": "Element | string"
4115
4857
  }
4116
4858
  },
4117
4859
  {
@@ -4172,10 +4914,106 @@
4172
4914
  }
4173
4915
  ]
4174
4916
  },
4917
+ {
4918
+ "name": "NanoMaskedOverflow",
4919
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-masked-overflow",
4920
+ "description": "`masked-overflow` provides a responsive overflow container for any set of elements that might not fit on smaller screens or containers: it accepts any children,\nautomatically scrolls to the active item on load, and masks additional content using subtle fade effects, plus scroll buttons to cue users that there’s more content off-screen.",
4921
+ "source": {
4922
+ "module": "@nanoporetech-digital/components/src/components/masked-overflow/masked-overflow.d.ts",
4923
+ "symbol": "MaskedOverflow"
4924
+ },
4925
+ "attributes": [
4926
+ {
4927
+ "name": "active-handler",
4928
+ "description": "A function called when an item becomes 'active' (via click or keyboard)",
4929
+ "required": false,
4930
+ "default": "(item: HTMLElement, _index: number) =>\n item.classList.add('active')",
4931
+ "value": {
4932
+ "kind": "expression",
4933
+ "type": "(item: HTMLElement, _index: number) => void"
4934
+ }
4935
+ },
4936
+ {
4937
+ "name": "hide-scrollbars",
4938
+ "description": "Show or hide the browser's default scrollbars. Defaults to `true` on vertical orientation and `false` on `horizontal` orientation",
4939
+ "required": false,
4940
+ "value": {
4941
+ "kind": "expression",
4942
+ "type": "any"
4943
+ }
4944
+ },
4945
+ {
4946
+ "name": "inactive-handler",
4947
+ "description": "A function called when an item becomes 'inactive'\n(because another item was made active)",
4948
+ "required": false,
4949
+ "default": "(item: HTMLElement, _index: number) =>\n item.classList.remove('active')",
4950
+ "value": {
4951
+ "kind": "expression",
4952
+ "type": "(item: HTMLElement, _index: number) => void"
4953
+ }
4954
+ },
4955
+ {
4956
+ "name": "is-active-handler",
4957
+ "description": "A function called to assess an initial, active item",
4958
+ "required": false,
4959
+ "default": "(item: HTMLElement, _index: number) =>\n item.classList.contains('active')",
4960
+ "value": {
4961
+ "kind": "expression",
4962
+ "type": "(item: HTMLElement, _index: number) => boolean"
4963
+ }
4964
+ },
4965
+ {
4966
+ "name": "label",
4967
+ "description": "Used to appropriately label the scrolling element for screen-readers",
4968
+ "required": false,
4969
+ "value": {
4970
+ "kind": "expression",
4971
+ "type": "string"
4972
+ }
4973
+ },
4974
+ {
4975
+ "name": "orientation",
4976
+ "description": "The flex direction of the element",
4977
+ "required": false,
4978
+ "default": "'horizontal'",
4979
+ "value": {
4980
+ "kind": "expression",
4981
+ "type": "\"horizontal\" | \"vertical\""
4982
+ }
4983
+ },
4984
+ {
4985
+ "name": "scroll-controls",
4986
+ "description": "Disables the scroll arrow buttons that appear when content overflows",
4987
+ "required": false,
4988
+ "default": "true",
4989
+ "value": {
4990
+ "kind": "expression",
4991
+ "type": "boolean"
4992
+ }
4993
+ },
4994
+ {
4995
+ "name": "show-indicator",
4996
+ "description": "Shows a track and a highlight line that automatically moves the currently active item.",
4997
+ "required": false,
4998
+ "default": "false",
4999
+ "value": {
5000
+ "kind": "expression",
5001
+ "type": "boolean"
5002
+ }
5003
+ }
5004
+ ],
5005
+ "slots": [
5006
+ {
5007
+ "name": "default",
5008
+ "description": "Default slot to place items."
5009
+ }
5010
+ ],
5011
+ "events": []
5012
+ },
4175
5013
  {
4176
5014
  "name": "NanoMenu",
4177
5015
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-menu",
4178
- "description": "Menu element. Commonly wrapped by `nano-dropdown` with `nano-option` and `nano-nav-item` elements nested.\nManages focus state / active.",
5016
+ "description": "Menus provide a list of options for the user to choose from.",
4179
5017
  "source": {
4180
5018
  "module": "@nanoporetech-digital/components/src/components/menu/menu.d.ts",
4181
5019
  "symbol": "Menu"
@@ -4202,19 +5040,18 @@
4202
5040
  },
4203
5041
  {
4204
5042
  "name": "type",
4205
- "description": "changes the role of the underlying control - sometimes required for semantics",
5043
+ "description": "changes the role of the underlying control (required for accessibility semantics).\nBy default this will be set via the frequency of element type (e.g. `<button>` vs `<a>`)",
4206
5044
  "required": false,
4207
- "default": "'menu'",
4208
5045
  "value": {
4209
5046
  "kind": "expression",
4210
- "type": "\"listbox\" | \"menu\""
5047
+ "type": "\"listbox\" | \"menu\" | \"nav\""
4211
5048
  }
4212
5049
  }
4213
5050
  ],
4214
5051
  "slots": [
4215
5052
  {
4216
5053
  "name": "default",
4217
- "description": "The menu's content; `nano-option`, `nano-nav-item` elements as well as <hr> and more."
5054
+ "description": "The menu's content; `nano-option`, `nano-nav-item`, `a`, `nano-content-links` elements as well as `hr` and more."
4218
5055
  }
4219
5056
  ],
4220
5057
  "events": [
@@ -4380,12 +5217,22 @@
4380
5217
  {
4381
5218
  "name": "NanoNavItem",
4382
5219
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-nav-item",
4383
- "description": "Nav items to be used with the various nav items.\n[Globla-Nav](/story/compounds-global-nav)\n[Menu-Drawer](/story/components-menu-drawer)\n[Dropdown](/story/components-dropdown)",
5220
+ "description": "Nav items provide options or links for the user to pick from a menu or navigation bar.",
4384
5221
  "source": {
4385
5222
  "module": "@nanoporetech-digital/components/src/components/nav-item/nav-item.d.ts",
4386
5223
  "symbol": "NavItem"
4387
5224
  },
4388
5225
  "attributes": [
5226
+ {
5227
+ "name": "checkbox",
5228
+ "description": "Changes behaviour so automatically becomes `selected` onClick",
5229
+ "required": false,
5230
+ "default": "false",
5231
+ "value": {
5232
+ "kind": "expression",
5233
+ "type": "boolean"
5234
+ }
5235
+ },
4389
5236
  {
4390
5237
  "name": "close-on-blur",
4391
5238
  "description": "Whether secondary menus should close on blur",
@@ -4408,7 +5255,7 @@
4408
5255
  },
4409
5256
  {
4410
5257
  "name": "href",
4411
- "description": "Href to link to",
5258
+ "description": "Href to link to. Alternatively, slot an `<a>` element",
4412
5259
  "required": false,
4413
5260
  "default": "null",
4414
5261
  "value": {
@@ -4436,26 +5283,6 @@
4436
5283
  "type": "boolean"
4437
5284
  }
4438
5285
  },
4439
- {
4440
- "name": "secondary-active-width",
4441
- "description": "Screen pixel width to activate the secondary menu",
4442
- "required": false,
4443
- "default": "0",
4444
- "value": {
4445
- "kind": "expression",
4446
- "type": "number"
4447
- }
4448
- },
4449
- {
4450
- "name": "secondaryFallback",
4451
- "description": "Secondary fallback function for when the secondary menu is no longer active.",
4452
- "required": false,
4453
- "default": "() => {}",
4454
- "value": {
4455
- "kind": "expression",
4456
- "type": "() => void"
4457
- }
4458
- },
4459
5286
  {
4460
5287
  "name": "selected",
4461
5288
  "description": "Whether this menu item is currently 'selected'",
@@ -4482,6 +5309,10 @@
4482
5309
  "name": "default",
4483
5310
  "description": "use the default slot for either `<a>` or text (if constructing a secondary content panel or using `href` directly)"
4484
5311
  },
5312
+ {
5313
+ "name": "close-button",
5314
+ "description": "a button to close the secondary content panel"
5315
+ },
4485
5316
  {
4486
5317
  "name": "icon-end",
4487
5318
  "description": "an icon at the end of the main control"
@@ -4492,20 +5323,10 @@
4492
5323
  },
4493
5324
  {
4494
5325
  "name": "secondary",
4495
- "description": "a content panel in which you can place any html to display on control click"
5326
+ "description": "a content panel in which you can place any html to display on click"
4496
5327
  }
4497
5328
  ],
4498
5329
  "events": [
4499
- {
4500
- "name": "nanoBlur",
4501
- "description": "Emitted when the nav item loses focus.",
4502
- "arguments": [
4503
- {
4504
- "name": "detail",
4505
- "type": "void"
4506
- }
4507
- ]
4508
- },
4509
5330
  {
4510
5331
  "name": "nanoClose",
4511
5332
  "description": "Emitted when the nav item closes it's secondary navigation.",
@@ -4526,16 +5347,6 @@
4526
5347
  }
4527
5348
  ]
4528
5349
  },
4529
- {
4530
- "name": "nanoFocus",
4531
- "description": "Emitted when the nav item has focus.",
4532
- "arguments": [
4533
- {
4534
- "name": "detail",
4535
- "type": "void"
4536
- }
4537
- ]
4538
- },
4539
5350
  {
4540
5351
  "name": "nanoOpen",
4541
5352
  "description": "Emitted when the nav item opens it's secondary navigation.",
@@ -4587,6 +5398,15 @@
4587
5398
  "type": "string"
4588
5399
  }
4589
5400
  },
5401
+ {
5402
+ "name": "href",
5403
+ "description": "Setting an href will render an `<a>` element",
5404
+ "required": false,
5405
+ "value": {
5406
+ "kind": "expression",
5407
+ "type": "string"
5408
+ }
5409
+ },
4590
5410
  {
4591
5411
  "name": "label",
4592
5412
  "description": "Label of the option",
@@ -4647,80 +5467,12 @@
4647
5467
  }
4648
5468
  ]
4649
5469
  }
4650
- ]
4651
- },
4652
- {
4653
- "name": "NanoOverflowNav",
4654
- "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-overflow-nav",
4655
- "description": "Primarily used to display navigational items that may not fit on smaller screens.\n\n- Accepts any collection of elements\n- Gives visual cues of 'more' with auto display fade effect and scroll buttons\n- Auto scrolls to the active item onload",
4656
- "source": {
4657
- "module": "@nanoporetech-digital/components/src/components/overflow-nav/overflow-nav.d.ts",
4658
- "symbol": "OverflowNav"
4659
- },
4660
- "attributes": [
4661
- {
4662
- "name": "activeHandler",
4663
- "description": "A function called when an item becomes 'active' (via click or keyboard)",
4664
- "required": false,
4665
- "default": "(item: HTMLElement, _index: number) =>\n item.classList.add('active')",
4666
- "value": {
4667
- "kind": "expression",
4668
- "type": "(item: HTMLElement, _index: number) => void"
4669
- }
4670
- },
4671
- {
4672
- "name": "inActiveHandler",
4673
- "description": "A function called when an item becomes 'inactive'\n(because another item was made active)",
4674
- "required": false,
4675
- "default": "(item: HTMLElement, _index: number) =>\n item.classList.remove('active')",
4676
- "value": {
4677
- "kind": "expression",
4678
- "type": "(item: HTMLElement, _index: number) => void"
4679
- }
4680
- },
4681
- {
4682
- "name": "isActiveHandler",
4683
- "description": "A function called to assess an initial, active item",
4684
- "required": false,
4685
- "default": "(item: HTMLElement, _index: number) =>\n item.classList.contains('active')",
4686
- "value": {
4687
- "kind": "expression",
4688
- "type": "(item: HTMLElement, _index: number) => boolean"
4689
- }
4690
- },
4691
- {
4692
- "name": "orientation",
4693
- "description": "The flex direction of the element",
4694
- "required": false,
4695
- "default": "'horizontal'",
4696
- "value": {
4697
- "kind": "expression",
4698
- "type": "\"horizontal\" | \"vertical\""
4699
- }
4700
- },
4701
- {
4702
- "name": "scroll-controls",
4703
- "description": "Disables the scroll arrow buttons that appear when content overflows",
4704
- "required": false,
4705
- "default": "true",
4706
- "value": {
4707
- "kind": "expression",
4708
- "type": "boolean"
4709
- }
4710
- }
4711
- ],
4712
- "slots": [
4713
- {
4714
- "name": "default",
4715
- "description": "Default slot to place items."
4716
- }
4717
- ],
4718
- "events": []
5470
+ ]
4719
5471
  },
4720
5472
  {
4721
5473
  "name": "NanoProgressBar",
4722
5474
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-progress-bar",
4723
- "description": "Used to show the status of an ongoing operation.",
5475
+ "description": "Shows the status of an ongoing operation.",
4724
5476
  "source": {
4725
5477
  "module": "@nanoporetech-digital/components/src/components/progress-bar/progress-bar.d.ts",
4726
5478
  "symbol": "ProgressBar"
@@ -4768,7 +5520,7 @@
4768
5520
  {
4769
5521
  "name": "NanoRange",
4770
5522
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-range",
4771
- "description": "The Range slider lets users select from a range of values by moving\nthe slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n\nLabels can be placed on either side of the range by adding the\n`slot=\"start\"` or `slot=\"end\"` to the element.",
5523
+ "description": "Ranges allow the user to select a value within a given range using a slider.",
4772
5524
  "source": {
4773
5525
  "module": "@nanoporetech-digital/components/src/components/range/range.d.ts",
4774
5526
  "symbol": "Range"
@@ -4780,7 +5532,7 @@
4780
5532
  "required": false,
4781
5533
  "value": {
4782
5534
  "kind": "expression",
4783
- "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\""
5535
+ "type": "\"danger\" | \"neutral\" | \"primary\" | \"success\" | \"warning\""
4784
5536
  }
4785
5537
  },
4786
5538
  {
@@ -5064,7 +5816,7 @@
5064
5816
  {
5065
5817
  "name": "NanoResizeObserve",
5066
5818
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-resize-observe",
5067
- "description": "A Resize-Observer utility component.\nTakes a string list of sizes and optional class-names.\nAdds class-names and fires `nanoResizeStateChange` events when the component reaches those sizes.\nAdditionally, can fire events when content no-longer fits within the element.",
5819
+ "description": "A thin, declarative interface to the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).",
5068
5820
  "source": {
5069
5821
  "module": "@nanoporetech-digital/components/src/components/resize-observe/resize-observe.d.ts",
5070
5822
  "symbol": "ResizeObserve"
@@ -5157,7 +5909,7 @@
5157
5909
  {
5158
5910
  "name": "NanoSelect",
5159
5911
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-select",
5160
- "description": "The select component is a wrapper to the HTML select element with custom styling and additional functionality.\nIt accepts most of the same properties as the HTML [select](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select).\nIt's multi selection functionality is vastly improved from the native solution. It allows for the control of\nvalue order through drag and drop or changing the insertion point with arrow keys. It also can allow for user defined values.",
5912
+ "description": "Selects allow users to choose items from a menu of options.",
5161
5913
  "source": {
5162
5914
  "module": "@nanoporetech-digital/components/src/components/select/select.d.ts",
5163
5915
  "symbol": "Select"
@@ -5184,7 +5936,7 @@
5184
5936
  }
5185
5937
  },
5186
5938
  {
5187
- "name": "clear-select",
5939
+ "name": "clearable",
5188
5940
  "description": "If `true`, a clear icon will appear in the select when there is a value. Clicking it clears the select.",
5189
5941
  "required": false,
5190
5942
  "default": "false",
@@ -5193,15 +5945,6 @@
5193
5945
  "type": "boolean"
5194
5946
  }
5195
5947
  },
5196
- {
5197
- "name": "color",
5198
- "description": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.",
5199
- "required": false,
5200
- "value": {
5201
- "kind": "expression",
5202
- "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\""
5203
- }
5204
- },
5205
5948
  {
5206
5949
  "name": "debounce",
5207
5950
  "description": "Set the amount of time, in milliseconds, to wait to trigger the `nanoSearchChange` event after each keystroke.",
@@ -5223,7 +5966,7 @@
5223
5966
  }
5224
5967
  },
5225
5968
  {
5226
- "name": "dropDownConfig",
5969
+ "name": "drop-down-config",
5227
5970
  "description": "nano-dropdown config options you can pass to the nested dropdown component",
5228
5971
  "required": false,
5229
5972
  "default": "{}",
@@ -5265,16 +6008,16 @@
5265
6008
  "name": "invalid",
5266
6009
  "description": "This will be true when the control is in an invalid state.\nValidity is determined by the `required` prop. Or if custom validity message is set.",
5267
6010
  "required": false,
5268
- "default": "false",
6011
+ "default": "null",
5269
6012
  "value": {
5270
6013
  "kind": "expression",
5271
- "type": "boolean"
6014
+ "type": "any"
5272
6015
  }
5273
6016
  },
5274
6017
  {
5275
6018
  "name": "label",
5276
- "description": "String to place within a label element. Alternatively use the 'label' slot",
5277
- "required": true,
6019
+ "description": "String to place within a label element. Alternatively you may use a label slot.",
6020
+ "required": false,
5278
6021
  "value": {
5279
6022
  "kind": "expression",
5280
6023
  "type": "string"
@@ -5368,7 +6111,7 @@
5368
6111
  },
5369
6112
  {
5370
6113
  "name": "required",
5371
- "description": "If `true`, the user must fill in a value before submitting a form.",
6114
+ "description": "If `true`, the user must fill in a value before submitting a form.\nBy default, setting this will also add an asterisk to the label.\nYou can disable this by using the `label` slot instead.",
5372
6115
  "required": false,
5373
6116
  "default": "false",
5374
6117
  "value": {
@@ -5424,7 +6167,7 @@
5424
6167
  }
5425
6168
  },
5426
6169
  {
5427
- "name": "valueTagTemplate",
6170
+ "name": "value-tag-template",
5428
6171
  "description": "A function that customizes the tag value to be rendered when `multiple=\"true\"`.",
5429
6172
  "required": false,
5430
6173
  "value": {
@@ -5527,7 +6270,7 @@
5527
6270
  {
5528
6271
  "name": "NanoSkeleton",
5529
6272
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-skeleton",
5530
- "description": "Skeletons are used to show where content will eventually be drawn.\nSimple containers for scaffolding layouts that mimic what users will see when content has finished loading.\nPrevents large areas of empty space during asynchronous operations.",
6273
+ "description": "Skeletons are used to show where content will eventually be drawn.",
5531
6274
  "source": {
5532
6275
  "module": "@nanoporetech-digital/components/src/components/skeleton/skeleton.d.ts",
5533
6276
  "symbol": "Skeleton"
@@ -5584,7 +6327,7 @@
5584
6327
  {
5585
6328
  "name": "NanoSlides",
5586
6329
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-slides",
5587
- "description": "The Slides component is a multi-section container. Each section can be swiped or dragged between.\nIt contains any number of Slide components.\n\nUses [Flickity](https://flickity.metafizzy.co/) under the hood.",
6330
+ "description": "A toolbox for creating carousel or slide-show widgets, allowing users to navigate through a collection of items one at a time.",
5588
6331
  "source": {
5589
6332
  "module": "@nanoporetech-digital/components/src/components/slides/slides.d.ts",
5590
6333
  "symbol": "Slides"
@@ -5805,7 +6548,7 @@
5805
6548
  {
5806
6549
  "name": "NanoSortable",
5807
6550
  "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-sortable",
5808
- "description": "An accessible and flexible re-order / sort utility component.\n\n- Drag and drop via mouse, touch or keyboard\n- Live announcements for screen readers\n- Works with or without an explicit handle (although with is preferable)",
6551
+ "description": "An accessible and flexible sort and re-order utility.",
5809
6552
  "source": {
5810
6553
  "module": "@nanoporetech-digital/components/src/components/sortable/sortable.d.ts",
5811
6554
  "symbol": "Sortable"
@@ -5832,7 +6575,7 @@
5832
6575
  }
5833
6576
  },
5834
6577
  {
5835
- "name": "createKeyboardHandle",
6578
+ "name": "create-keyboard-handle",
5836
6579
  "description": "A function that should attach a keyboard accessible control.\nWhen a `handleSelector` is not used - to allow keyboard accessibility -\n`createKeyboardHandle` should render a focusable element.\n\nIf your sortable item is itself focusable,\nyou must use this function to render a control *outside* of the focusable element.",
5837
6580
  "required": false,
5838
6581
  "default": "(_number: number, _element: Element) => {\n const handleTpl = /* html */ `\n <nano-icon-button\n slot=\"end\"\n icon-name=\"light/arrows-up-down-left-right\"\n class=\"nano-sortable__keyboard-handle visually-hidden\"\n label=\"Re-order this item\"\n ></nano-icon-button>`;\n const div = document.createElement('div');\n div.innerHTML = handleTpl;\n\n const handle = div.children[0] as HTMLElement;\n _element.append(handle);\n return handle;\n }",
@@ -5862,7 +6605,7 @@
5862
6605
  }
5863
6606
  },
5864
6607
  {
5865
- "name": "droppedHelperText",
6608
+ "name": "dropped-helper-text",
5866
6609
  "description": "Used to generate a screen reader live update, informing the user of the current element being dropped.",
5867
6610
  "required": false,
5868
6611
  "default": "(el: Element) =>\n `${this.itemDescriptor(el)} dropped`",
@@ -5891,7 +6634,7 @@
5891
6634
  }
5892
6635
  },
5893
6636
  {
5894
- "name": "grabbedHelperText",
6637
+ "name": "grabbed-helper-text",
5895
6638
  "description": "Used to generate a screen reader live update, informing the user of the current element being grabbed.",
5896
6639
  "required": false,
5897
6640
  "default": "(el: Element) =>\n `${this.itemDescriptor(el)} grabbed`",
@@ -5930,7 +6673,7 @@
5930
6673
  }
5931
6674
  },
5932
6675
  {
5933
- "name": "itemDescriptor",
6676
+ "name": "item-descriptor",
5934
6677
  "description": "As a sortable element is interacted with, announcements are made to screen readers\n- informing the user what is changing.\nBy default, the text from the element is extracted to describe the interacted with element.\nUse this function to provide a more meaningful, concise item descriptor",
5935
6678
  "required": false,
5936
6679
  "default": "(el: Element) => `\"${el?.textContent.trim()}\"`",
@@ -5969,7 +6712,7 @@
5969
6712
  }
5970
6713
  },
5971
6714
  {
5972
- "name": "reorderHelperText",
6715
+ "name": "reorder-helper-text",
5973
6716
  "description": "Used to generate a screen reader live update, informing the user when items have been reordered.",
5974
6717
  "required": false,
5975
6718
  "default": "(\n el: Element,\n elements: Element[],\n position: number\n ) =>\n `The list has been reordered, ${this.itemDescriptor(\n el\n )} is now item ${position} of ${elements.length}`",
@@ -5979,7 +6722,7 @@
5979
6722
  }
5980
6723
  },
5981
6724
  {
5982
- "name": "sortableHostElement",
6725
+ "name": "sortable-host-element",
5983
6726
  "description": "use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`.\nNote that the `sortableHostElement` element css `position` will be set to `relative`",
5984
6727
  "required": false,
5985
6728
  "value": {
@@ -6110,304 +6853,75 @@
6110
6853
  "value": {
6111
6854
  "kind": "expression",
6112
6855
  "type": "number"
6113
- }
6114
- },
6115
- {
6116
- "name": "primary",
6117
- "description": "If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\nprimary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\nhost element is resized.",
6118
- "required": false,
6119
- "value": {
6120
- "kind": "expression",
6121
- "type": "\"end\" | \"start\""
6122
- }
6123
- },
6124
- {
6125
- "name": "snap",
6126
- "description": "One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n`\"100px 50%\"`.",
6127
- "required": false,
6128
- "value": {
6129
- "kind": "expression",
6130
- "type": "string"
6131
- }
6132
- },
6133
- {
6134
- "name": "snap-threshold",
6135
- "description": "How close the divider must be to a snap point until snapping occurs.",
6136
- "required": false,
6137
- "default": "12",
6138
- "value": {
6139
- "kind": "expression",
6140
- "type": "number"
6141
- }
6142
- },
6143
- {
6144
- "name": "vertical",
6145
- "description": "Draws the split panel in a vertical orientation with the start and end panels stacked.",
6146
- "required": false,
6147
- "default": "false",
6148
- "value": {
6149
- "kind": "expression",
6150
- "type": "boolean"
6151
- }
6152
- }
6153
- ],
6154
- "slots": [
6155
- {
6156
- "name": "end",
6157
- "description": "The end panel."
6158
- },
6159
- {
6160
- "name": "handle",
6161
- "description": "An optional handle to render at the center of the divider."
6162
- },
6163
- {
6164
- "name": "start",
6165
- "description": "The start panel."
6166
- }
6167
- ],
6168
- "events": [
6169
- {
6170
- "name": "nanoDragging",
6171
- "description": "Emitted when the divider is being dragged.",
6172
- "arguments": [
6173
- {
6174
- "name": "detail",
6175
- "type": "number"
6176
- }
6177
- ]
6178
- },
6179
- {
6180
- "name": "nanoReposition",
6181
- "description": "Emitted when the divider's position changes.",
6182
- "arguments": [
6183
- {
6184
- "name": "detail",
6185
- "type": "any"
6186
- }
6187
- ]
6188
- }
6189
- ]
6190
- },
6191
- {
6192
- "name": "NanoSticker",
6193
- "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-sticker",
6194
- "description": "The Sticker component is a toolbox for 'sticking' items to scrolling containers.",
6195
- "source": {
6196
- "module": "@nanoporetech-digital/components/src/components/sticker/sticker.d.ts",
6197
- "symbol": "Sticker"
6198
- },
6199
- "attributes": [
6200
- {
6201
- "name": "auto-resize",
6202
- "description": "Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size",
6203
- "required": false,
6204
- "default": "true",
6205
- "value": {
6206
- "kind": "expression",
6207
- "type": "boolean"
6208
- }
6209
- },
6210
- {
6211
- "name": "break-point-max",
6212
- "description": "The max width of the item to implement sticky behaviour.",
6213
- "required": false,
6214
- "default": "null",
6215
- "value": {
6216
- "kind": "expression",
6217
- "type": "number"
6218
- }
6219
- },
6220
- {
6221
- "name": "break-point-min",
6222
- "description": "The min width of the item to implement sticky behaviour.",
6223
- "required": false,
6224
- "default": "null",
6225
- "value": {
6226
- "kind": "expression",
6227
- "type": "number"
6228
- }
6229
- },
6230
- {
6231
- "name": "hide-on-new-stickers",
6232
- "description": "When applied stickers will hide upon new stickers being stuck to the same position",
6233
- "required": false,
6234
- "default": "true",
6235
- "value": {
6236
- "kind": "expression",
6237
- "type": "boolean"
6238
- }
6239
- },
6240
- {
6241
- "name": "is-sticky",
6242
- "description": "Manually enable / disabled sticky behaviour",
6243
- "required": false,
6244
- "default": "true",
6245
- "value": {
6246
- "kind": "expression",
6247
- "type": "boolean"
6248
- }
6249
- },
6250
- {
6251
- "name": "offset",
6252
- "description": "Distance the item should be stuck from the sticky edge.",
6253
- "required": false,
6254
- "default": "0",
6255
- "value": {
6256
- "kind": "expression",
6257
- "type": "number | { v: number; h: number; }"
6258
- }
6259
- },
6260
- {
6261
- "name": "position",
6262
- "description": "The edge of the scroll-parent to stick to",
6263
- "required": false,
6264
- "default": "'top'",
6265
- "value": {
6266
- "kind": "expression",
6267
- "type": "\"bottom\" | \"top\""
6268
- }
6269
- },
6270
- {
6271
- "name": "quiet-mode",
6272
- "description": "When applied, the sticker will hide when the scroll-parent\nis scrolling away from the sticker's stuck position and show when scrolling toward it.\nBy default this will apply when the parent is below either the h or w dimensions",
6273
- "required": false,
6274
- "default": "{\n h: 600,\n w: 600,\n }",
6275
- "value": {
6276
- "kind": "expression",
6277
- "type": "\"off\" | \"on\" | { h: number; w: number; }"
6278
- }
6279
- },
6280
- {
6281
- "name": "scrollParent",
6282
- "description": "Define which scroll element to listen & stick to.\nBy default, it will find traverse the DOM to find the closest.",
6283
- "required": false,
6284
- "value": {
6285
- "kind": "expression",
6286
- "type": "Document | HTMLElement"
6287
- }
6288
- },
6289
- {
6290
- "name": "stick-to",
6291
- "description": "Upon being stuck, attach the sticker to another sticker element.\nJS query selector string or DOM element pointing to a `<nano-sticker>`",
6292
- "required": false,
6293
- "value": {
6294
- "kind": "expression",
6295
- "type": "HTMLNanoStickerElement | string"
6296
- }
6297
- }
6298
- ],
6299
- "slots": [],
6300
- "events": [
6301
- {
6302
- "name": "nanoHide",
6303
- "description": "Emitted when a sticker is hidden",
6304
- "arguments": [
6305
- {
6306
- "name": "detail",
6307
- "type": "{ sticker: HTMLNanoStickerElement; }"
6308
- }
6309
- ]
6310
- },
6311
- {
6312
- "name": "nanoShow",
6313
- "description": "Emitted when a sticker is showing",
6314
- "arguments": [
6315
- {
6316
- "name": "detail",
6317
- "type": "{ sticker: HTMLNanoStickerElement; }"
6318
- }
6319
- ]
6320
- },
6321
- {
6322
- "name": "nanoStuck",
6323
- "description": "Emitted when a sticker is stuck",
6324
- "arguments": [
6325
- {
6326
- "name": "detail",
6327
- "type": "{ sticker: HTMLNanoStickerElement; }"
6328
- }
6329
- ]
6330
- },
6331
- {
6332
- "name": "nanoUnstuck",
6333
- "description": "Emitted when a sticker is unstuck",
6334
- "arguments": [
6335
- {
6336
- "name": "detail",
6337
- "type": "{ sticker: HTMLNanoStickerElement; }"
6338
- }
6339
- ]
6340
- }
6341
- ]
6342
- },
6343
- {
6344
- "name": "NanoTab",
6345
- "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-tab",
6346
- "description": "",
6347
- "source": {
6348
- "module": "@nanoporetech-digital/components/src/components/tabs/tab.d.ts",
6349
- "symbol": "Tab"
6350
- },
6351
- "attributes": [
6856
+ }
6857
+ },
6352
6858
  {
6353
- "name": "active",
6354
- "description": "The active, selected tab. If none active, the first will automatically be selected.",
6859
+ "name": "primary",
6860
+ "description": "If no primary panel is designated, both panels will resize proportionally when the host element is resized. If a\nprimary panel is designated, it will maintain its size and the other panel will grow or shrink as needed when the\nhost element is resized.",
6355
6861
  "required": false,
6356
- "default": "false",
6357
6862
  "value": {
6358
6863
  "kind": "expression",
6359
- "type": "boolean"
6864
+ "type": "\"end\" | \"start\""
6360
6865
  }
6361
6866
  },
6362
6867
  {
6363
- "name": "closable",
6364
- "description": "When true, the tab will be rendered with a close icon.",
6868
+ "name": "snap",
6869
+ "description": "One or more space-separated values at which the divider should snap. Values can be in pixels or percentages, e.g.\n`\"100px 50%\"`.",
6365
6870
  "required": false,
6366
- "default": "false",
6367
6871
  "value": {
6368
6872
  "kind": "expression",
6369
- "type": "boolean"
6873
+ "type": "string"
6370
6874
  }
6371
6875
  },
6372
6876
  {
6373
- "name": "disabled",
6374
- "description": "Set to true to draw the tab in an active state.",
6877
+ "name": "snap-threshold",
6878
+ "description": "How close the divider must be to a snap point until snapping occurs.",
6375
6879
  "required": false,
6376
- "default": "false",
6880
+ "default": "12",
6377
6881
  "value": {
6378
6882
  "kind": "expression",
6379
- "type": "boolean"
6883
+ "type": "number"
6380
6884
  }
6381
6885
  },
6382
6886
  {
6383
- "name": "panel",
6384
- "description": "The name of the tab panel the tab will control. The panel must be located in the same tab group.",
6887
+ "name": "vertical",
6888
+ "description": "Draws the split panel in a vertical orientation with the start and end panels stacked.",
6385
6889
  "required": false,
6386
- "default": "''",
6890
+ "default": "false",
6387
6891
  "value": {
6388
6892
  "kind": "expression",
6389
- "type": "string"
6893
+ "type": "boolean"
6390
6894
  }
6391
6895
  }
6392
6896
  ],
6393
6897
  "slots": [
6394
6898
  {
6395
- "name": "default",
6396
- "description": "The tab's label."
6899
+ "name": "end",
6900
+ "description": "The end panel."
6397
6901
  },
6398
6902
  {
6399
- "name": "end",
6400
- "description": "end of the tab, content. Outside of the focusable element"
6903
+ "name": "handle",
6904
+ "description": "An optional handle to render at the center of the divider."
6401
6905
  },
6402
6906
  {
6403
6907
  "name": "start",
6404
- "description": "start of the tab, content. Outside of the focusable element"
6908
+ "description": "The start panel."
6405
6909
  }
6406
6910
  ],
6407
6911
  "events": [
6408
6912
  {
6409
- "name": "onClose",
6410
- "description": "Emitted when the tab is closable and the close button is activated.",
6913
+ "name": "nanoDragging",
6914
+ "description": "Emitted when the divider is being dragged.",
6915
+ "arguments": [
6916
+ {
6917
+ "name": "detail",
6918
+ "type": "number"
6919
+ }
6920
+ ]
6921
+ },
6922
+ {
6923
+ "name": "nanoReposition",
6924
+ "description": "Emitted when the divider's position changes.",
6411
6925
  "arguments": [
6412
6926
  {
6413
6927
  "name": "detail",
@@ -6418,463 +6932,480 @@
6418
6932
  ]
6419
6933
  },
6420
6934
  {
6421
- "name": "NanoTabContent",
6422
- "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-tab-content",
6423
- "description": "",
6935
+ "name": "NanoSticker",
6936
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-sticker",
6937
+ "description": "The Sticker component is a toolbox for 'sticking' items to scrolling containers.",
6424
6938
  "source": {
6425
- "module": "@nanoporetech-digital/components/src/components/tabs/tab-content.d.ts",
6426
- "symbol": "TabContent"
6939
+ "module": "@nanoporetech-digital/components/src/components/sticker/sticker.d.ts",
6940
+ "symbol": "Sticker"
6427
6941
  },
6428
6942
  "attributes": [
6429
6943
  {
6430
- "name": "active",
6431
- "description": "When true, the tab content will be shown.",
6944
+ "name": "auto-resize",
6945
+ "description": "Only applicable to root stickers. When applied the sticker will grow or shrink to the scrollParent size",
6432
6946
  "required": false,
6433
- "default": "false",
6947
+ "default": "true",
6434
6948
  "value": {
6435
6949
  "kind": "expression",
6436
6950
  "type": "boolean"
6437
6951
  }
6438
6952
  },
6439
6953
  {
6440
- "name": "name",
6441
- "description": "The tab panel's name.",
6954
+ "name": "break-point-max",
6955
+ "description": "The max width of the item to implement sticky behaviour.",
6442
6956
  "required": false,
6443
- "default": "''",
6957
+ "default": "null",
6444
6958
  "value": {
6445
6959
  "kind": "expression",
6446
- "type": "string"
6960
+ "type": "number"
6447
6961
  }
6448
- }
6449
- ],
6450
- "slots": [
6451
- {
6452
- "name": "default",
6453
- "description": "The tab panel's content."
6454
- }
6455
- ],
6456
- "events": []
6457
- },
6458
- {
6459
- "name": "NanoTabGroup",
6460
- "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-tab-group",
6461
- "description": "A traditional tab implementation. It nests `nano-tab` and `nano-tab-content` sub-components.\n\nTabs can be stacked vertically or horizontally (which presents different styling variations) using the `placement` attribute.\nHorizontal tabs that don't fit will overflow and scroll appropriately.\nTab-content can also be swiped to change tabs.",
6462
- "source": {
6463
- "module": "@nanoporetech-digital/components/src/components/tabs/tab-group.d.ts",
6464
- "symbol": "TabGroup"
6465
- },
6466
- "attributes": [
6962
+ },
6467
6963
  {
6468
- "name": "color",
6469
- "description": "The color to use from the application's color palette.",
6964
+ "name": "break-point-min",
6965
+ "description": "The min width of the item to implement sticky behaviour.",
6470
6966
  "required": false,
6967
+ "default": "null",
6471
6968
  "value": {
6472
6969
  "kind": "expression",
6473
- "type": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\""
6970
+ "type": "number"
6474
6971
  }
6475
6972
  },
6476
6973
  {
6477
- "name": "disable-swipe",
6478
- "description": "Disable 'swipe to change tab' on devices with touch",
6974
+ "name": "hide-on-new-stickers",
6975
+ "description": "When applied stickers will hide upon new stickers being stuck to the same position",
6479
6976
  "required": false,
6977
+ "default": "true",
6480
6978
  "value": {
6481
6979
  "kind": "expression",
6482
6980
  "type": "boolean"
6483
6981
  }
6484
6982
  },
6485
6983
  {
6486
- "name": "no-scroll-controls",
6487
- "description": "Disables the scroll arrows that appear when tabs overflow.",
6984
+ "name": "is-sticky",
6985
+ "description": "Manually enable / disabled sticky behaviour",
6488
6986
  "required": false,
6489
- "default": "false",
6987
+ "default": "true",
6490
6988
  "value": {
6491
6989
  "kind": "expression",
6492
6990
  "type": "boolean"
6493
6991
  }
6494
6992
  },
6495
6993
  {
6496
- "name": "placement",
6497
- "description": "The placement of the tabs.",
6994
+ "name": "offset",
6995
+ "description": "Distance the item should be stuck from the sticky edge.",
6498
6996
  "required": false,
6499
- "default": "'top'",
6997
+ "default": "0",
6500
6998
  "value": {
6501
6999
  "kind": "expression",
6502
- "type": "\"start\" | \"top\""
7000
+ "type": "number | { v: number; h: number; }"
6503
7001
  }
6504
7002
  },
6505
7003
  {
6506
- "name": "store-id",
6507
- "description": "Store the currently open tab (against this ID) in the component store.\nUse in conjunction with storeMethod",
7004
+ "name": "position",
7005
+ "description": "The edge of the scroll-parent to stick to",
6508
7006
  "required": false,
7007
+ "default": "'top'",
6509
7008
  "value": {
6510
7009
  "kind": "expression",
6511
- "type": "string"
7010
+ "type": "\"bottom\" | \"top\""
6512
7011
  }
6513
7012
  },
6514
7013
  {
6515
- "name": "store-method",
6516
- "description": "The method of storage.\nEither session storage, url hash (after the '#') or url query (after the '?').",
7014
+ "name": "quiet-mode",
7015
+ "description": "When applied, the sticker will hide when the scroll-parent\nis scrolling away from the sticker's stuck position and show when scrolling toward it.\nBy default this will apply when the parent is below either the h or w dimensions",
6517
7016
  "required": false,
6518
- "default": "'session'",
7017
+ "default": "{\n h: 600,\n w: 600,\n }",
6519
7018
  "value": {
6520
7019
  "kind": "expression",
6521
- "type": "\"local\" | \"session\" | \"url-hash\" | \"url-hash-push\" | \"url-query\" | \"url-query-push\""
7020
+ "type": "\"off\" | \"on\" | { h: number; w: number; }"
6522
7021
  }
6523
- }
6524
- ],
6525
- "slots": [
6526
- {
6527
- "name": "default",
6528
- "description": "Add `nano-tab-content` elements to add tabbable content."
6529
7022
  },
6530
7023
  {
6531
- "name": "tab-content-header",
6532
- "description": "a header bar displayed above tab content."
7024
+ "name": "scroll-parent",
7025
+ "description": "Define which scroll element to listen & stick to.\nBy default, it will find traverse the DOM to find the closest.",
7026
+ "required": false,
7027
+ "value": {
7028
+ "kind": "expression",
7029
+ "type": "Document | HTMLElement"
7030
+ }
6533
7031
  },
6534
7032
  {
6535
- "name": "tabs",
6536
- "description": "Add `nano-tab` elements to add clickable tabs."
7033
+ "name": "stick-to",
7034
+ "description": "Upon being stuck, attach the sticker to another sticker element.\nJS query selector string or DOM element pointing to a `<nano-sticker>`",
7035
+ "required": false,
7036
+ "value": {
7037
+ "kind": "expression",
7038
+ "type": "HTMLNanoStickerElement | string"
7039
+ }
6537
7040
  }
6538
7041
  ],
7042
+ "slots": [],
6539
7043
  "events": [
6540
7044
  {
6541
- "name": "nanoTabClose",
6542
- "description": "Emitted when a closable tab is removed.",
7045
+ "name": "nanoHide",
7046
+ "description": "Emitted when a sticker is hidden",
6543
7047
  "arguments": [
6544
7048
  {
6545
7049
  "name": "detail",
6546
- "type": "{ name: string; }"
7050
+ "type": "{ sticker: HTMLNanoStickerElement; }"
6547
7051
  }
6548
7052
  ]
6549
7053
  },
6550
7054
  {
6551
- "name": "nanoTabHide",
6552
- "description": "Emitted when a tab is hidden.",
7055
+ "name": "nanoShow",
7056
+ "description": "Emitted when a sticker is showing",
6553
7057
  "arguments": [
6554
7058
  {
6555
7059
  "name": "detail",
6556
- "type": "{ name: string; }"
7060
+ "type": "{ sticker: HTMLNanoStickerElement; }"
6557
7061
  }
6558
7062
  ]
6559
7063
  },
6560
7064
  {
6561
- "name": "nanoTabShow",
6562
- "description": "Emitted when a tab is shown.",
7065
+ "name": "nanoStuck",
7066
+ "description": "Emitted when a sticker is stuck",
6563
7067
  "arguments": [
6564
7068
  {
6565
7069
  "name": "detail",
6566
- "type": "{ name: string; }"
7070
+ "type": "{ sticker: HTMLNanoStickerElement; }"
6567
7071
  }
6568
7072
  ]
6569
7073
  },
6570
7074
  {
6571
- "name": "nanoTabWillClose",
6572
- "description": "Emitted when the tab is closable and the close button is activated.",
7075
+ "name": "nanoUnstuck",
7076
+ "description": "Emitted when a sticker is unstuck",
6573
7077
  "arguments": [
6574
7078
  {
6575
7079
  "name": "detail",
6576
- "type": "{ name: string; }"
7080
+ "type": "{ sticker: HTMLNanoStickerElement; }"
6577
7081
  }
6578
7082
  ]
6579
7083
  }
6580
7084
  ]
6581
7085
  },
6582
7086
  {
6583
- "name": "NanoTable",
6584
- "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-table",
6585
- "description": "A performant, accessible and semantic (uses real html `<table />`, `<tr />` etc) table and data-grid solution.\n\n- Built-in search\n- Built-in column filter\n- Built-in column sort\n- Easily swap in API / async based search / filter & sort\n- Pin headers, footers, rows, columns\n- Add custom rendering at every level\n- Add custom properties at every level",
7087
+ "name": "NanoTab",
7088
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-tab",
7089
+ "description": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab content](tab-content).",
6586
7090
  "source": {
6587
- "module": "@nanoporetech-digital/components/src/components/table/table.d.ts",
6588
- "symbol": "Table"
7091
+ "module": "@nanoporetech-digital/components/src/components/tabs/tab.d.ts",
7092
+ "symbol": "Tab"
6589
7093
  },
6590
7094
  "attributes": [
6591
7095
  {
6592
- "name": "appliedFilters",
6593
- "description": "",
6594
- "required": false,
6595
- "default": "[]",
6596
- "value": {
6597
- "kind": "expression",
6598
- "type": "Filter[]"
6599
- }
6600
- },
6601
- {
6602
- "name": "blocks-length",
6603
- "description": "The number of total blocks currently rendered in the table.",
6604
- "required": false,
6605
- "value": {
6606
- "kind": "expression",
6607
- "type": "number"
6608
- }
6609
- },
6610
- {
6611
- "name": "caption",
6612
- "description": "A descriptive title of the table.\nYou must use this or the `slot=\"caption\"` for accessibility",
6613
- "required": false,
6614
- "value": {
6615
- "kind": "expression",
6616
- "type": "string"
6617
- }
6618
- },
6619
- {
6620
- "name": "columns",
6621
- "description": "The column config used to present the rows of data",
6622
- "required": false,
6623
- "default": "[]",
6624
- "value": {
6625
- "kind": "expression",
6626
- "type": "ColumnConfig<any>[]"
6627
- }
6628
- },
6629
- {
6630
- "name": "customFilterFn",
6631
- "description": "A custom filtering function. Should return a promise.\nIf the promise resolves as `true` the column UI will be updated.\nIf the promise resolves as falsy, the sort will be performed by the component.\nA good use-case would be performing the filter on a server / via fetch.\nThen on success, updating the table's data via the `rows` property",
6632
- "required": false,
6633
- "value": {
6634
- "kind": "expression",
6635
- "type": "(filters: Filter[]) => Promise<true | Falsy>"
6636
- }
6637
- },
6638
- {
6639
- "name": "customRenderer",
6640
- "description": "Function called whenever `col.cellTemplate` renders an unknown object.\nThe function should render a valid HTMLElement to the cell arg.\nExample usage - render JSX from a 3rd party lib and append the result to the cell element.",
6641
- "required": false,
6642
- "value": {
6643
- "kind": "expression",
6644
- "type": "(node: any, cell: HTMLElement | DocumentFragment) => void | Promise<string>"
6645
- }
6646
- },
6647
- {
6648
- "name": "customSortFn",
6649
- "description": "A custom sorting function. Should return a promise.\nIf the promise resolves as `true` the column UI will be updated.\nIf the promise resolves as falsey, the sort will be performed by the component.\nA good use-case would be performing the sort on a server / via fetch.\nThen on success, updating the table's data via the `rows` property",
6650
- "required": false,
6651
- "value": {
6652
- "kind": "expression",
6653
- "type": "(property: keyof RowGeneric, order: Order) => Promise<true | Falsy>"
6654
- }
6655
- },
6656
- {
6657
- "name": "default-sort",
6658
- "description": "The default sortable option for all columns.\n`true` will enable column sorting unless you set `sortable: false` on a column\n`false` will disable column sorting unless you set `sortable: true` on a column",
7096
+ "name": "active",
7097
+ "description": "The active, selected tab. If none active, the first will automatically be selected.",
6659
7098
  "required": false,
6660
- "default": "true",
7099
+ "default": "false",
6661
7100
  "value": {
6662
7101
  "kind": "expression",
6663
7102
  "type": "boolean"
6664
7103
  }
6665
7104
  },
6666
7105
  {
6667
- "name": "footRender",
6668
- "description": "Used for custom tfoot row rendering",
7106
+ "name": "closable",
7107
+ "description": "When true, the tab will be rendered with a close icon.",
6669
7108
  "required": false,
6670
- "default": "{ pinned: 'bottom' }",
7109
+ "default": "false",
6671
7110
  "value": {
6672
7111
  "kind": "expression",
6673
- "type": "HeadFootRenderer<RowData<RowGeneric>>"
7112
+ "type": "boolean"
6674
7113
  }
6675
7114
  },
6676
7115
  {
6677
- "name": "headRender",
6678
- "description": "Used for custom thead row rendering",
7116
+ "name": "disabled",
7117
+ "description": "Set to true to draw the tab in an active state.",
6679
7118
  "required": false,
6680
- "default": "{ pinned: 'top' }",
7119
+ "default": "false",
6681
7120
  "value": {
6682
7121
  "kind": "expression",
6683
- "type": "HeadFootRenderer<RowData<RowGeneric>>"
7122
+ "type": "boolean"
6684
7123
  }
6685
7124
  },
6686
7125
  {
6687
- "name": "loading",
6688
- "description": "Will show a loading state when set to true.\nBy default, will be shown automatically if `rows` is a promise waiting to resolve / or falsy\n*or* when performing custom filtering or sorting.\n*Note* when set manually, will overwrite any internal loading state.\nSet to 'undefined' to revert to default behaviour.",
7126
+ "name": "panel",
7127
+ "description": "The name of the `nano-tab-content` panel the tab will control. The content panel must be located in the same tab group.",
6689
7128
  "required": false,
6690
- "default": "undefined",
7129
+ "default": "''",
6691
7130
  "value": {
6692
7131
  "kind": "expression",
6693
- "type": "boolean"
7132
+ "type": "string"
6694
7133
  }
7134
+ }
7135
+ ],
7136
+ "slots": [
7137
+ {
7138
+ "name": "default",
7139
+ "description": "The tab's label."
6695
7140
  },
6696
7141
  {
6697
- "name": "per-block",
6698
- "description": "To improve performance, data is split into blocks\nwhich are shown / hidden and rendered as they become visible.\nUse this to control the number of hits within a block -\nA block should fill a scrolling viewport.\nThe less perBlock the better for performance",
7142
+ "name": "end",
7143
+ "description": "end of the tab, content. Outside of the focusable element"
7144
+ },
7145
+ {
7146
+ "name": "start",
7147
+ "description": "start of the tab, content. Outside of the focusable element"
7148
+ }
7149
+ ],
7150
+ "events": [
7151
+ {
7152
+ "name": "onClose",
7153
+ "description": "Emitted when the tab is closable and the close button is activated.",
7154
+ "arguments": [
7155
+ {
7156
+ "name": "detail",
7157
+ "type": "any"
7158
+ }
7159
+ ]
7160
+ }
7161
+ ]
7162
+ },
7163
+ {
7164
+ "name": "NanoTabContent",
7165
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-tab-content",
7166
+ "description": "Used inside [tab groups](/components/tab-group) to display content.",
7167
+ "source": {
7168
+ "module": "@nanoporetech-digital/components/src/components/tabs/tab-content.d.ts",
7169
+ "symbol": "TabContent"
7170
+ },
7171
+ "attributes": [
7172
+ {
7173
+ "name": "active",
7174
+ "description": "When true, the tab content will be shown.",
6699
7175
  "required": false,
6700
- "default": "50",
7176
+ "default": "false",
6701
7177
  "value": {
6702
7178
  "kind": "expression",
6703
- "type": "number"
7179
+ "type": "boolean"
6704
7180
  }
6705
7181
  },
6706
7182
  {
6707
- "name": "placeholder-size",
6708
- "description": "When loading rows asynchronously, this will render this number of placeholder rows",
7183
+ "name": "name",
7184
+ "description": "The tab panel's name.",
6709
7185
  "required": false,
6710
- "default": "5",
7186
+ "default": "''",
6711
7187
  "value": {
6712
7188
  "kind": "expression",
6713
- "type": "number"
7189
+ "type": "string"
6714
7190
  }
6715
- },
7191
+ }
7192
+ ],
7193
+ "slots": [
6716
7194
  {
6717
- "name": "rowRender",
6718
- "description": "Used for custom row rendering",
7195
+ "name": "default",
7196
+ "description": "The tab panel's content."
7197
+ }
7198
+ ],
7199
+ "events": []
7200
+ },
7201
+ {
7202
+ "name": "NanoTabGroup",
7203
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-tab-group",
7204
+ "description": "Tab groups organize content into a container that shows one section at a time.",
7205
+ "source": {
7206
+ "module": "@nanoporetech-digital/components/src/components/tabs/tab-group.d.ts",
7207
+ "symbol": "TabGroup"
7208
+ },
7209
+ "attributes": [
7210
+ {
7211
+ "name": "disable-swipe",
7212
+ "description": "Disable 'swipe to change tab' on devices with touch",
6719
7213
  "required": false,
6720
7214
  "value": {
6721
7215
  "kind": "expression",
6722
- "type": "RowRenderer<RowData<RowGeneric>>"
7216
+ "type": "boolean"
6723
7217
  }
6724
7218
  },
6725
7219
  {
6726
- "name": "rows",
6727
- "description": "The data to place in the table",
7220
+ "name": "equal-tab-size",
7221
+ "description": "Make all tabs equal size. This is only recommended when there are a small number of tabs",
6728
7222
  "required": false,
7223
+ "default": "false",
6729
7224
  "value": {
6730
7225
  "kind": "expression",
6731
- "type": "Promise<RowGeneric[]> | RowGeneric[]"
7226
+ "type": "boolean"
6732
7227
  }
6733
7228
  },
6734
7229
  {
6735
- "name": "search-term",
6736
- "description": "Term to search for in the data",
7230
+ "name": "no-scroll-controls",
7231
+ "description": "Disables the scroll arrows that appear when tabs overflow.",
6737
7232
  "required": false,
7233
+ "default": "false",
6738
7234
  "value": {
6739
7235
  "kind": "expression",
6740
- "type": "string"
7236
+ "type": "boolean"
6741
7237
  }
6742
7238
  },
6743
7239
  {
6744
- "name": "show-caption",
6745
- "description": "Show the caption on-screen",
7240
+ "name": "placement",
7241
+ "description": "The placement of the tabs.",
6746
7242
  "required": false,
6747
- "default": "false",
7243
+ "default": "'top'",
6748
7244
  "value": {
6749
7245
  "kind": "expression",
6750
- "type": "boolean"
7246
+ "type": "\"start\" | \"top\""
6751
7247
  }
6752
7248
  },
6753
7249
  {
6754
- "name": "show-footer",
6755
- "description": "Whether to show a `<tfoot>` component",
7250
+ "name": "size",
7251
+ "description": "Size of tabs. Default is `regular`. `large` is only available when `placement=\"top\"`",
6756
7252
  "required": false,
6757
- "default": "false",
6758
7253
  "value": {
6759
7254
  "kind": "expression",
6760
- "type": "boolean"
7255
+ "type": "\"large\" | \"regular\""
6761
7256
  }
6762
7257
  },
6763
7258
  {
6764
- "name": "type",
6765
- "description": "The type of table. Grid type will make cells navigable by keyboard",
7259
+ "name": "store-id",
7260
+ "description": "Store the open tab against this ID in the component store.\nUse in combination with `storeMethod`",
6766
7261
  "required": false,
6767
- "default": "'table'",
6768
7262
  "value": {
6769
7263
  "kind": "expression",
6770
- "type": "\"grid\" | \"table\""
7264
+ "type": "string"
6771
7265
  }
6772
7266
  },
6773
7267
  {
6774
- "name": "virtual-total-items",
6775
- "description": "Use this to render the table with roughly the correct dimensions.\na use-case might be; fetch a small initial dataset to minimise load-time,\nrender the table with the correct dimensions, the table becomes interactive,\nload the rest of the data",
7268
+ "name": "store-method",
7269
+ "description": "The method of storage.\nEither session storage, url hash (after an '#') or url query (after an '?').",
6776
7270
  "required": false,
6777
- "default": "0",
7271
+ "default": "'url-hash'",
6778
7272
  "value": {
6779
7273
  "kind": "expression",
6780
- "type": "number"
7274
+ "type": "\"local\" | \"session\" | \"url-hash\" | \"url-hash-push\" | \"url-query\" | \"url-query-push\""
6781
7275
  }
6782
7276
  }
6783
7277
  ],
6784
7278
  "slots": [
6785
7279
  {
6786
- "name": "caption",
6787
- "description": "The table's caption. You must either use this or the `caption` attribute."
7280
+ "name": "default",
7281
+ "description": "Add `nano-tab-content` elements to add tabbable content."
6788
7282
  },
6789
7283
  {
6790
- "name": "no-results",
6791
- "description": "text to display when search or filtering yields no results"
7284
+ "name": "tabs",
7285
+ "description": "Add `nano-tab` elements to add clickable tabs."
6792
7286
  }
6793
7287
  ],
6794
7288
  "events": [
6795
7289
  {
6796
- "name": "nanoTblAfterFilter",
6797
- "description": "Fired after a column is sorted",
7290
+ "name": "nanoTabClose",
7291
+ "description": "Emitted when a closable tab is removed.",
6798
7292
  "arguments": [
6799
7293
  {
6800
7294
  "name": "detail",
6801
- "type": "{ filters: Filter[]; }"
7295
+ "type": "{ name: string; }"
6802
7296
  }
6803
7297
  ]
6804
7298
  },
6805
7299
  {
6806
- "name": "nanoTblAfterSearch",
6807
- "description": "Fired after a general / cross column search",
7300
+ "name": "nanoTabHide",
7301
+ "description": "Emitted when a tab is hidden.",
6808
7302
  "arguments": [
6809
7303
  {
6810
7304
  "name": "detail",
6811
- "type": "{ term: string; }"
7305
+ "type": "{ name: string; }"
6812
7306
  }
6813
7307
  ]
6814
7308
  },
6815
7309
  {
6816
- "name": "nanoTblAfterSort",
6817
- "description": "Fired after a column is sorted",
7310
+ "name": "nanoTabShow",
7311
+ "description": "Emitted when a tab is shown.",
6818
7312
  "arguments": [
6819
7313
  {
6820
7314
  "name": "detail",
6821
- "type": "{ column: keyof RowGeneric; order: Order; }"
7315
+ "type": "{ name: string; }"
6822
7316
  }
6823
7317
  ]
6824
7318
  },
6825
7319
  {
6826
- "name": "nanoTblBeforeEdit",
6827
- "description": "Fired before a general search.\n`event.preventDefault()` to stop searching.",
7320
+ "name": "nanoTabWillClose",
7321
+ "description": "Emitted when the tab is closable and the close button is activated.",
6828
7322
  "arguments": [
6829
7323
  {
6830
7324
  "name": "detail",
6831
- "type": "{ term: string; }"
7325
+ "type": "{ name: string; }"
6832
7326
  }
6833
7327
  ]
6834
- },
7328
+ }
7329
+ ]
7330
+ },
7331
+ {
7332
+ "name": "NanoTable",
7333
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-table",
7334
+ "description": "Displays tabular data in rows and columns.",
7335
+ "source": {
7336
+ "module": "@nanoporetech-digital/components/src/components/table/table.d.ts",
7337
+ "symbol": "Table"
7338
+ },
7339
+ "attributes": [
6835
7340
  {
6836
- "name": "nanoTblBeforeFilter",
6837
- "description": "Fired before a column is filtered.\n`event.preventDefault()` to stop filtering.",
6838
- "arguments": [
6839
- {
6840
- "name": "detail",
6841
- "type": "{ filters: Filter[]; }"
6842
- }
6843
- ]
7341
+ "name": "compact",
7342
+ "description": "If true, the table will be rendered in a compact style.",
7343
+ "required": false,
7344
+ "default": "'auto'",
7345
+ "value": {
7346
+ "kind": "expression",
7347
+ "type": "\"auto\" | boolean"
7348
+ }
6844
7349
  },
6845
7350
  {
6846
- "name": "nanoTblBeforeSearch",
6847
- "description": "Fired before a general search.\n`event.preventDefault()` to stop searching.",
6848
- "arguments": [
6849
- {
6850
- "name": "detail",
6851
- "type": "{ term: string; }"
6852
- }
6853
- ]
7351
+ "name": "hide-caption",
7352
+ "description": "Visually hide the table's caption",
7353
+ "required": false,
7354
+ "default": "false",
7355
+ "value": {
7356
+ "kind": "expression",
7357
+ "type": "boolean"
7358
+ }
6854
7359
  },
6855
7360
  {
6856
- "name": "nanoTblBeforeSort",
6857
- "description": "Fired before a column is sorted.\n`event.preventDefault()` to stop sorting.",
6858
- "arguments": [
6859
- {
6860
- "name": "detail",
6861
- "type": "{ column: keyof RowGeneric; order: Order; }"
6862
- }
6863
- ]
6864
- },
7361
+ "name": "scrollable",
7362
+ "description": "If true, will render any nested table in a scrollable container (using `overflow: auto`)",
7363
+ "required": false,
7364
+ "default": "true",
7365
+ "value": {
7366
+ "kind": "expression",
7367
+ "type": "boolean"
7368
+ }
7369
+ }
7370
+ ],
7371
+ "slots": [],
7372
+ "events": []
7373
+ },
7374
+ {
7375
+ "name": "NanoTag",
7376
+ "doc-url": "https://digital.git.oxfordnanolabs.local/nano-components/?path=/docs/components-tag",
7377
+ "description": "Tags provide a quick visual clue about the content, and help to organise and group content based on shared attributes.",
7378
+ "source": {
7379
+ "module": "@nanoporetech-digital/components/src/components/tag/tag.d.ts",
7380
+ "symbol": "Tag"
7381
+ },
7382
+ "attributes": [
6865
7383
  {
6866
- "name": "nanoTblBlockRendered",
6867
- "description": "Fired whenever a block is activated by scrolling into view / becoming visible\nThis could be leveraged for infinite scrolling / to fetch more data.",
6868
- "arguments": [
6869
- {
6870
- "name": "detail",
6871
- "type": "{ block: number; totalBlocks: number; }"
6872
- }
6873
- ]
7384
+ "name": "closable",
7385
+ "description": "Whether the tag is closable or not.\nIf true, a close button will be displayed.",
7386
+ "required": false,
7387
+ "default": "false",
7388
+ "value": {
7389
+ "kind": "expression",
7390
+ "type": "boolean"
7391
+ }
6874
7392
  },
6875
7393
  {
6876
- "name": "nanoTblReady",
6877
- "description": "Fired when the table has done it's first complete render",
7394
+ "name": "size",
7395
+ "description": "The size of the tag.",
7396
+ "required": false,
7397
+ "default": "'regular'",
7398
+ "value": {
7399
+ "kind": "expression",
7400
+ "type": "\"large\" | \"regular\""
7401
+ }
7402
+ }
7403
+ ],
7404
+ "slots": [],
7405
+ "events": [
7406
+ {
7407
+ "name": "nanoClose",
7408
+ "description": "Fires when close button is clicked",
6878
7409
  "arguments": [
6879
7410
  {
6880
7411
  "name": "detail",