@nanoporetech-digital/components 4.9.4 → 4.10.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 (147) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/dist/cjs/drag-777bd8dd.js +74 -0
  3. package/dist/cjs/drag-777bd8dd.js.map +1 -0
  4. package/dist/cjs/index-71f899a7.js +4 -0
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/nano-components.cjs.js +1 -1
  7. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +4 -4
  8. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js.map +1 -1
  9. package/dist/cjs/nano-icon-button_2.cjs.entry.js +40 -3
  10. package/dist/cjs/nano-icon-button_2.cjs.entry.js.map +1 -1
  11. package/dist/cjs/nano-sortable.cjs.entry.js +653 -0
  12. package/dist/cjs/nano-sortable.cjs.entry.js.map +1 -0
  13. package/dist/cjs/nano-split-pane.cjs.entry.js +30 -45
  14. package/dist/cjs/nano-split-pane.cjs.entry.js.map +1 -1
  15. package/dist/cjs/nano-tab-group.cjs.entry.js +39 -43
  16. package/dist/cjs/nano-tab-group.cjs.entry.js.map +1 -1
  17. package/dist/cjs/nano-tab.cjs.entry.js +3 -3
  18. package/dist/cjs/nano-tab.cjs.entry.js.map +1 -1
  19. package/dist/cjs/{nano-table-54a4ba34.js → nano-table-ff33dc43.js} +20 -147
  20. package/dist/cjs/nano-table-ff33dc43.js.map +1 -0
  21. package/dist/cjs/nano-table.cjs.entry.js +1 -1
  22. package/dist/cjs/{table.worker-20ed37a5.js → table.worker-0a6bc962.js} +3 -3
  23. package/dist/cjs/table.worker-0a6bc962.js.map +1 -0
  24. package/dist/cjs/{table.worker-f820b411.js → table.worker-bd51e29f.js} +1 -1
  25. package/dist/collection/collection-manifest.json +1 -0
  26. package/dist/collection/components/icon-button/icon-button.css +6 -4
  27. package/dist/collection/components/icon-button/icon-button.js +83 -4
  28. package/dist/collection/components/icon-button/icon-button.js.map +1 -1
  29. package/dist/collection/components/nav-item/nav-item.js +4 -4
  30. package/dist/collection/components/nav-item/nav-item.js.map +1 -1
  31. package/dist/collection/components/sortable/sortable.css +28 -0
  32. package/dist/collection/components/sortable/sortable.js +1180 -0
  33. package/dist/collection/components/sortable/sortable.js.map +1 -0
  34. package/dist/collection/components/split-pane/split-pane.js +29 -27
  35. package/dist/collection/components/split-pane/split-pane.js.map +1 -1
  36. package/dist/collection/components/table/table-interface.js.map +1 -1
  37. package/dist/collection/components/table/table.css +12 -38
  38. package/dist/collection/components/table/table.header.js +3 -86
  39. package/dist/collection/components/table/table.header.js.map +1 -1
  40. package/dist/collection/components/table/table.js +4 -92
  41. package/dist/collection/components/table/table.js.map +1 -1
  42. package/dist/collection/components/table/table.store.js +1 -1
  43. package/dist/collection/components/table/table.store.js.map +1 -1
  44. package/dist/collection/components/table/table.worker.js +3 -3
  45. package/dist/collection/components/table/table.worker.js.map +1 -1
  46. package/dist/collection/components/tabs/tab-group.css +9 -13
  47. package/dist/collection/components/tabs/tab-group.js +39 -43
  48. package/dist/collection/components/tabs/tab-group.js.map +1 -1
  49. package/dist/collection/components/tabs/tab.css +53 -14
  50. package/dist/collection/components/tabs/tab.js +8 -2
  51. package/dist/collection/components/tabs/tab.js.map +1 -1
  52. package/dist/collection/utils/drag.js +52 -4
  53. package/dist/collection/utils/drag.js.map +1 -1
  54. package/dist/components/drag.js +72 -0
  55. package/dist/components/drag.js.map +1 -0
  56. package/dist/components/icon-button.js +45 -5
  57. package/dist/components/icon-button.js.map +1 -1
  58. package/dist/components/index.d.ts +1 -0
  59. package/dist/components/index.js +1 -0
  60. package/dist/components/index.js.map +1 -1
  61. package/dist/components/nano-sortable.d.ts +11 -0
  62. package/dist/components/nano-sortable.js +691 -0
  63. package/dist/components/nano-sortable.js.map +1 -0
  64. package/dist/components/nano-split-pane.js +30 -45
  65. package/dist/components/nano-split-pane.js.map +1 -1
  66. package/dist/components/nano-tab-group.js +40 -44
  67. package/dist/components/nano-tab-group.js.map +1 -1
  68. package/dist/components/nano-tab.js +3 -3
  69. package/dist/components/nano-tab.js.map +1 -1
  70. package/dist/components/nav-item.js +4 -4
  71. package/dist/components/nav-item.js.map +1 -1
  72. package/dist/components/table.js +19 -147
  73. package/dist/components/table.js.map +1 -1
  74. package/dist/components/table.worker.js +1 -1
  75. package/dist/esm/drag-1723a4cc.js +72 -0
  76. package/dist/esm/drag-1723a4cc.js.map +1 -0
  77. package/dist/esm/index-dad5627b.js +4 -0
  78. package/dist/esm/loader.js +1 -1
  79. package/dist/esm/nano-components.js +1 -1
  80. package/dist/esm/nano-global-nav-user-profile_3.entry.js +4 -4
  81. package/dist/esm/nano-global-nav-user-profile_3.entry.js.map +1 -1
  82. package/dist/esm/nano-icon-button_2.entry.js +41 -4
  83. package/dist/esm/nano-icon-button_2.entry.js.map +1 -1
  84. package/dist/esm/nano-sortable.entry.js +649 -0
  85. package/dist/esm/nano-sortable.entry.js.map +1 -0
  86. package/dist/esm/nano-split-pane.entry.js +30 -45
  87. package/dist/esm/nano-split-pane.entry.js.map +1 -1
  88. package/dist/esm/nano-tab-group.entry.js +39 -43
  89. package/dist/esm/nano-tab-group.entry.js.map +1 -1
  90. package/dist/esm/nano-tab.entry.js +3 -3
  91. package/dist/esm/nano-tab.entry.js.map +1 -1
  92. package/dist/esm/{nano-table-929ac4d9.js → nano-table-ec980076.js} +21 -148
  93. package/dist/esm/nano-table-ec980076.js.map +1 -0
  94. package/dist/esm/nano-table.entry.js +1 -1
  95. package/dist/esm/{table.worker-2425382a.js → table.worker-b53db58e.js} +3 -3
  96. package/dist/esm/table.worker-b53db58e.js.map +1 -0
  97. package/dist/esm/{table.worker-f820b411.js → table.worker-bd51e29f.js} +1 -1
  98. package/dist/nano-components/nano-components.css +1 -1
  99. package/dist/nano-components/nano-components.esm.js +1 -1
  100. package/dist/nano-components/nano-components.esm.js.map +1 -1
  101. package/dist/nano-components/p-064af7d0.js +5 -0
  102. package/dist/nano-components/p-064af7d0.js.map +1 -0
  103. package/dist/nano-components/p-241baff8.entry.js +5 -0
  104. package/dist/nano-components/p-241baff8.entry.js.map +1 -0
  105. package/dist/nano-components/p-58b53239.entry.js.map +1 -1
  106. package/dist/nano-components/{p-5381c118.js → p-806bcd46.js} +2 -2
  107. package/dist/nano-components/p-842cf127.js +5 -0
  108. package/dist/nano-components/p-842cf127.js.map +1 -0
  109. package/dist/nano-components/p-b8e76fdf.entry.js +5 -0
  110. package/dist/nano-components/p-b8e76fdf.entry.js.map +1 -0
  111. package/dist/nano-components/{p-f820b411.js → p-bd51e29f.js} +1 -1
  112. package/dist/nano-components/p-d3de231c.entry.js +5 -0
  113. package/dist/nano-components/p-d3de231c.entry.js.map +1 -0
  114. package/dist/nano-components/{p-906de5a2.entry.js → p-f591400b.entry.js} +2 -2
  115. package/dist/nano-components/p-f60fe933.entry.js +5 -0
  116. package/dist/nano-components/p-f60fe933.entry.js.map +1 -0
  117. package/dist/nano-components/p-f7535f45.entry.js +5 -0
  118. package/dist/nano-components/p-f7535f45.entry.js.map +1 -0
  119. package/dist/types/components/icon-button/icon-button.d.ts +14 -0
  120. package/dist/types/components/sortable/sortable.d.ts +204 -0
  121. package/dist/types/components/table/table-interface.d.ts +2 -4
  122. package/dist/types/components/table/table.d.ts +0 -30
  123. package/dist/types/components/table/table.header.d.ts +0 -3
  124. package/dist/types/components/tabs/tab-group.d.ts +0 -1
  125. package/dist/types/components/tabs/tab.d.ts +6 -0
  126. package/dist/types/components.d.ts +248 -28
  127. package/dist/types/utils/drag.d.ts +21 -1
  128. package/docs-json.json +562 -46
  129. package/docs-vscode.json +74 -5
  130. package/hydrate/index.js +875 -251
  131. package/package.json +2 -2
  132. package/dist/cjs/nano-table-54a4ba34.js.map +0 -1
  133. package/dist/cjs/table.worker-20ed37a5.js.map +0 -1
  134. package/dist/esm/nano-table-929ac4d9.js.map +0 -1
  135. package/dist/esm/table.worker-2425382a.js.map +0 -1
  136. package/dist/nano-components/p-068bdd89.entry.js +0 -5
  137. package/dist/nano-components/p-068bdd89.entry.js.map +0 -1
  138. package/dist/nano-components/p-4f260028.js +0 -5
  139. package/dist/nano-components/p-4f260028.js.map +0 -1
  140. package/dist/nano-components/p-64b56ee6.entry.js +0 -5
  141. package/dist/nano-components/p-64b56ee6.entry.js.map +0 -1
  142. package/dist/nano-components/p-a5a560e7.entry.js +0 -5
  143. package/dist/nano-components/p-a5a560e7.entry.js.map +0 -1
  144. package/dist/nano-components/p-a761ac89.entry.js +0 -5
  145. package/dist/nano-components/p-a761ac89.entry.js.map +0 -1
  146. /package/dist/nano-components/{p-5381c118.js.map → p-806bcd46.js.map} +0 -0
  147. /package/dist/nano-components/{p-906de5a2.entry.js.map → p-f591400b.entry.js.map} +0 -0
@@ -5,10 +5,7 @@ type TableColHeadProps = {
5
5
  headRenderer: TableTypes.HeadFootRenderer;
6
6
  onColumnSortClick?: (order: TableTypes.Order, column: TableTypes.Prop, el: HTMLTableCellElement) => void;
7
7
  onColumnPinned?: TableTypes.PinnedCb;
8
- onColumnDrag?: (column: TableTypes.Prop, el: HTMLTableCellElement) => void;
9
- onColumnDrop?: (fromColumn: TableTypes.Prop, toColumn: TableTypes.Prop, el: HTMLTableCellElement) => void;
10
8
  defaults: {
11
- draggable?: boolean;
12
9
  sortable?: boolean;
13
10
  };
14
11
  };
@@ -23,7 +23,6 @@ export declare class TabGroup implements ComponentInterface {
23
23
  private activePanel;
24
24
  private activeTabIndicator;
25
25
  private nav;
26
- private tabGroup;
27
26
  private tabs;
28
27
  private rightBtn;
29
28
  private leftBtn;
@@ -1,6 +1,12 @@
1
1
  import { ComponentInterface, EventEmitter } from '../../stencil-public-runtime';
2
2
  /**
3
+ * @slot start - start of the tab, content. Outside of the focusable element
4
+ * @slot end - end of the tab, content. Outside of the focusable element
3
5
  * @slot - The tab's label.
6
+ *
7
+ * @part base - the wrapper around the whole control
8
+ * @part tab - the main tab control that controls the active state
9
+ * @part close-btn - the close button of the tab (if `closable=true`)
4
10
  */
5
11
  export declare class Tab implements ComponentInterface {
6
12
  private tabId;
@@ -9,7 +9,7 @@ import { AlgoliaNetworkError, AloliaSearchResultDetail, CheckboxChangeEventDetai
9
9
  import { StorageMethods } from "./utils/store/component-store";
10
10
  import { DaysOfWeek } from "./utils/date-utils";
11
11
  import { PopoverPlacement } from "./utils/popover";
12
- import { EventEmitter } from "./stencil-public-runtime";
12
+ import { Element, EventEmitter } from "./stencil-public-runtime";
13
13
  import { ObservableMap } from "@stencil/store";
14
14
  import { MyAccountUser as MyAccountUser1 } from "./components/global-nav/global-nav-interface";
15
15
  import { OptionInterface as OptionInterface1 } from "./components/option/option-interface";
@@ -1254,6 +1254,10 @@ export namespace Components {
1254
1254
  * Set to true to disable the button.
1255
1255
  */
1256
1256
  "disabled": boolean;
1257
+ /**
1258
+ * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
1259
+ */
1260
+ "form": HTMLFormElement | string;
1257
1261
  /**
1258
1262
  * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
1259
1263
  */
@@ -1274,6 +1278,10 @@ export namespace Components {
1274
1278
  * The name of the button, submitted as a pair with the button’s value as part of the form data.
1275
1279
  */
1276
1280
  "name"?: string;
1281
+ /**
1282
+ * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)
1283
+ */
1284
+ "rel": string | undefined;
1277
1285
  /**
1278
1286
  * Sets focus on the internal button
1279
1287
  */
@@ -2068,6 +2076,103 @@ export namespace Components {
2068
2076
  */
2069
2077
  "updateAutoHeight": (speed?: number) => Promise<void>;
2070
2078
  }
2079
+ /**
2080
+ * An accessible and flexible re-order / sort utility component.
2081
+ * - Drag and drop via mouse, touch or keyboard
2082
+ * - Live announcements for screen readers
2083
+ * - Works with or without an explicit handle (although with is preferable)
2084
+ */
2085
+ interface NanoSortable {
2086
+ /**
2087
+ * Items being sorted will animate into place
2088
+ */
2089
+ "animationEnabled": boolean;
2090
+ /**
2091
+ * The css animation timing applied when `animationEnabled` is `true`
2092
+ */
2093
+ "animationTiming": any;
2094
+ /**
2095
+ * A function that should attach a keyboard accessible control. When a `handleSelector` is not used - to allow keyboard accessibility - `createKeyboardHandle` should render a focusable element. If your sortable item is itself focusable, you must use this function to render a control *outside* of the focusable element.
2096
+ * @param _number
2097
+ * @param _element
2098
+ * @returns a function that attaches a keyboard accessible handle control element. The function itself *must* return the handle element.
2099
+ */
2100
+ "createKeyboardHandle": (_number: number, _element: Element) => HTMLElement;
2101
+ /**
2102
+ * Dragged items by default, will take whatever default css is applied in situ. When sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'. Apply `dragResize` to read & recreate the dragged items current dimensions when dragged.
2103
+ */
2104
+ "dragResize": boolean;
2105
+ /**
2106
+ * Use this class to change how the element looks whilst being sorted
2107
+ */
2108
+ "draggedClass": string;
2109
+ /**
2110
+ * Used to generate a screen reader live update, informing the user of the current element being dropped.
2111
+ * @param el the element that has been dropped by the user
2112
+ * @returns a string, describing the element that has been dropped
2113
+ */
2114
+ "droppedHelperText": (el: Element) => string;
2115
+ /**
2116
+ * Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over
2117
+ */
2118
+ "dropzoneActiveClass"?: string;
2119
+ /**
2120
+ * When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another. At that point, you will not be able to drag items back to the original group. A `dropzoneSelector` allows you to define a placeholder area where items can always be dropped.
2121
+ */
2122
+ "dropzoneSelector"?: string;
2123
+ /**
2124
+ * Used to generate a screen reader live update, informing the user of the current element being grabbed.
2125
+ * @param el the element that has been grabbed by the user
2126
+ * @returns a string, describing the element being grabbed
2127
+ */
2128
+ "grabbedHelperText": (el: Element) => string;
2129
+ /**
2130
+ * Use this class to change how the handle looks whilst being sorted
2131
+ */
2132
+ "handleDraggedClass": string;
2133
+ /**
2134
+ * A css query selector which matches an element *within* the `itemSelector` element which will act like a drag handle. **Note** For keyboard a11y it's recommended to use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used
2135
+ */
2136
+ "handleSelector"?: string;
2137
+ /**
2138
+ * Accessibility helper text applied to handle controls
2139
+ */
2140
+ "helperText": string;
2141
+ /**
2142
+ * As a sortable element is interacted with, announcements are made to screen readers - informing the user what is changing. By default, the text from the element is extracted to describe the interacted with element. Use this function to provide a more meaningful, concise item descriptor
2143
+ * @param el the element being interacted with
2144
+ * @returns a string, describing the element being interacted with
2145
+ */
2146
+ "itemDescriptor": (el: Element) => string;
2147
+ /**
2148
+ * A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>`
2149
+ */
2150
+ "itemSelector": string;
2151
+ /**
2152
+ * The axis to lock dragging elements to. `undefined` means any axis
2153
+ */
2154
+ "orientation"?: 'horizontal' | 'vertical';
2155
+ /**
2156
+ * Use this class to change how the element looks when acting as a placeholder
2157
+ */
2158
+ "placeholderClass": string;
2159
+ /**
2160
+ * If sortable elements change dynamically, use this method to add handle controls to new elements
2161
+ */
2162
+ "refreshKeyboardHandles": () => Promise<void>;
2163
+ /**
2164
+ * Used to generate a screen reader live update, informing the user when items have been reordered.
2165
+ * @param el the element that has been reordered by the user
2166
+ * @param elements the elements in the sortable list
2167
+ * @param position the new position of the dropped element
2168
+ * @returns a string, describing the element being dropped
2169
+ */
2170
+ "reorderHelperText": (el: Element, elements: Element[], position: number) => string;
2171
+ /**
2172
+ * use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`. Note that the `sortableHostElement` element css `position` will be set to `relative`
2173
+ */
2174
+ "sortableHostElement"?: HTMLElement;
2175
+ }
2071
2176
  /**
2072
2177
  * Spinners are used to show the progress of an indeterminate operation.
2073
2178
  */
@@ -2263,7 +2368,6 @@ export namespace Components {
2263
2368
  * - Built-in column sort
2264
2369
  * - Easily swap in API / async based search / filter & sort
2265
2370
  * - Pin headers, footers, rows, columns
2266
- * - Drag-&-Drop columns to re-order
2267
2371
  * - Add custom rendering at every level
2268
2372
  * - Add custom properties at every level
2269
2373
  */
@@ -2305,10 +2409,6 @@ export namespace Components {
2305
2409
  property: TableTypes.Prop,
2306
2410
  order: TableTypes.Order
2307
2411
  ) => Promise<true | TableTypes.Falsy>;
2308
- /**
2309
- * The default draggable option for all columns. `true` will enable column drag-to-reorder unless you set `draggable: false` on a column `false` will disable column drag-to-reorder unless you set `draggable: true` on a column
2310
- */
2311
- "defaultColDraggable": boolean;
2312
2412
  /**
2313
2413
  * The default sortable option for all columns. `true` will enable column sorting unless you set `sortable: false` on a column `false` will disable column sorting unless you set `sortable: true` on a column
2314
2414
  */
@@ -2570,6 +2670,10 @@ export interface NanoSlidesCustomEvent<T> extends CustomEvent<T> {
2570
2670
  detail: T;
2571
2671
  target: HTMLNanoSlidesElement;
2572
2672
  }
2673
+ export interface NanoSortableCustomEvent<T> extends CustomEvent<T> {
2674
+ detail: T;
2675
+ target: HTMLNanoSortableElement;
2676
+ }
2573
2677
  export interface NanoSplitPaneCustomEvent<T> extends CustomEvent<T> {
2574
2678
  detail: T;
2575
2679
  target: HTMLNanoSplitPaneElement;
@@ -3030,6 +3134,18 @@ declare global {
3030
3134
  prototype: HTMLNanoSlidesElement;
3031
3135
  new (): HTMLNanoSlidesElement;
3032
3136
  };
3137
+ /**
3138
+ * An accessible and flexible re-order / sort utility component.
3139
+ * - Drag and drop via mouse, touch or keyboard
3140
+ * - Live announcements for screen readers
3141
+ * - Works with or without an explicit handle (although with is preferable)
3142
+ */
3143
+ interface HTMLNanoSortableElement extends Components.NanoSortable, HTMLStencilElement {
3144
+ }
3145
+ var HTMLNanoSortableElement: {
3146
+ prototype: HTMLNanoSortableElement;
3147
+ new (): HTMLNanoSortableElement;
3148
+ };
3033
3149
  /**
3034
3150
  * Spinners are used to show the progress of an indeterminate operation.
3035
3151
  */
@@ -3088,7 +3204,6 @@ declare global {
3088
3204
  * - Built-in column sort
3089
3205
  * - Easily swap in API / async based search / filter & sort
3090
3206
  * - Pin headers, footers, rows, columns
3091
- * - Drag-&-Drop columns to re-order
3092
3207
  * - Add custom rendering at every level
3093
3208
  * - Add custom properties at every level
3094
3209
  */
@@ -3151,6 +3266,7 @@ declare global {
3151
3266
  "nano-skeleton": HTMLNanoSkeletonElement;
3152
3267
  "nano-slide": HTMLNanoSlideElement;
3153
3268
  "nano-slides": HTMLNanoSlidesElement;
3269
+ "nano-sortable": HTMLNanoSortableElement;
3154
3270
  "nano-spinner": HTMLNanoSpinnerElement;
3155
3271
  "nano-split-pane": HTMLNanoSplitPaneElement;
3156
3272
  "nano-sticker": HTMLNanoStickerElement;
@@ -4458,6 +4574,10 @@ declare namespace LocalJSX {
4458
4574
  * Set to true to disable the button.
4459
4575
  */
4460
4576
  "disabled"?: boolean;
4577
+ /**
4578
+ * The HTML form element or form element id. Used to submit a form when the button is not a child of the form.
4579
+ */
4580
+ "form"?: HTMLFormElement | string;
4461
4581
  /**
4462
4582
  * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
4463
4583
  */
@@ -4478,6 +4598,10 @@ declare namespace LocalJSX {
4478
4598
  * The name of the button, submitted as a pair with the button’s value as part of the form data.
4479
4599
  */
4480
4600
  "name"?: string;
4601
+ /**
4602
+ * Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)
4603
+ */
4604
+ "rel"?: string | undefined;
4481
4605
  /**
4482
4606
  * display the label as a `<nano-tooltip />`
4483
4607
  */
@@ -5311,6 +5435,115 @@ declare namespace LocalJSX {
5311
5435
  */
5312
5436
  "pager"?: boolean;
5313
5437
  }
5438
+ /**
5439
+ * An accessible and flexible re-order / sort utility component.
5440
+ * - Drag and drop via mouse, touch or keyboard
5441
+ * - Live announcements for screen readers
5442
+ * - Works with or without an explicit handle (although with is preferable)
5443
+ */
5444
+ interface NanoSortable {
5445
+ /**
5446
+ * Items being sorted will animate into place
5447
+ */
5448
+ "animationEnabled"?: boolean;
5449
+ /**
5450
+ * The css animation timing applied when `animationEnabled` is `true`
5451
+ */
5452
+ "animationTiming"?: any;
5453
+ /**
5454
+ * A function that should attach a keyboard accessible control. When a `handleSelector` is not used - to allow keyboard accessibility - `createKeyboardHandle` should render a focusable element. If your sortable item is itself focusable, you must use this function to render a control *outside* of the focusable element.
5455
+ * @param _number
5456
+ * @param _element
5457
+ * @returns a function that attaches a keyboard accessible handle control element. The function itself *must* return the handle element.
5458
+ */
5459
+ "createKeyboardHandle"?: (_number: number, _element: Element) => HTMLElement;
5460
+ /**
5461
+ * Dragged items by default, will take whatever default css is applied in situ. When sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'. Apply `dragResize` to read & recreate the dragged items current dimensions when dragged.
5462
+ */
5463
+ "dragResize"?: boolean;
5464
+ /**
5465
+ * Use this class to change how the element looks whilst being sorted
5466
+ */
5467
+ "draggedClass"?: string;
5468
+ /**
5469
+ * Used to generate a screen reader live update, informing the user of the current element being dropped.
5470
+ * @param el the element that has been dropped by the user
5471
+ * @returns a string, describing the element that has been dropped
5472
+ */
5473
+ "droppedHelperText"?: (el: Element) => string;
5474
+ /**
5475
+ * Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over
5476
+ */
5477
+ "dropzoneActiveClass"?: string;
5478
+ /**
5479
+ * When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another. At that point, you will not be able to drag items back to the original group. A `dropzoneSelector` allows you to define a placeholder area where items can always be dropped.
5480
+ */
5481
+ "dropzoneSelector"?: string;
5482
+ /**
5483
+ * Used to generate a screen reader live update, informing the user of the current element being grabbed.
5484
+ * @param el the element that has been grabbed by the user
5485
+ * @returns a string, describing the element being grabbed
5486
+ */
5487
+ "grabbedHelperText"?: (el: Element) => string;
5488
+ /**
5489
+ * Use this class to change how the handle looks whilst being sorted
5490
+ */
5491
+ "handleDraggedClass"?: string;
5492
+ /**
5493
+ * A css query selector which matches an element *within* the `itemSelector` element which will act like a drag handle. **Note** For keyboard a11y it's recommended to use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used
5494
+ */
5495
+ "handleSelector"?: string;
5496
+ /**
5497
+ * Accessibility helper text applied to handle controls
5498
+ */
5499
+ "helperText"?: string;
5500
+ /**
5501
+ * As a sortable element is interacted with, announcements are made to screen readers - informing the user what is changing. By default, the text from the element is extracted to describe the interacted with element. Use this function to provide a more meaningful, concise item descriptor
5502
+ * @param el the element being interacted with
5503
+ * @returns a string, describing the element being interacted with
5504
+ */
5505
+ "itemDescriptor"?: (el: Element) => string;
5506
+ /**
5507
+ * A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>`
5508
+ */
5509
+ "itemSelector"?: string;
5510
+ /**
5511
+ * Fired when a sortable element is dropped after having been picked up.
5512
+ */
5513
+ "onNanoDropped"?: (event: NanoSortableCustomEvent<{ element: HTMLElement }>) => void;
5514
+ /**
5515
+ * Fired when a sortable element is picked-up; via keyboard, mouse or touch. `event.preventDefault()` to prevent the element being picked-up.
5516
+ */
5517
+ "onNanoGrabbed"?: (event: NanoSortableCustomEvent<{ element: HTMLElement; index: number }>) => void;
5518
+ /**
5519
+ * Fired when an the order changes. Use this to update any underlying data model. `event.preventDefault()` to prevent the element being moved; will revert to original position.
5520
+ */
5521
+ "onNanoOrderChange"?: (event: NanoSortableCustomEvent<{
5522
+ element: HTMLElement;
5523
+ originalIndex: number;
5524
+ targetIndex: number;
5525
+ }>) => void;
5526
+ /**
5527
+ * The axis to lock dragging elements to. `undefined` means any axis
5528
+ */
5529
+ "orientation"?: 'horizontal' | 'vertical';
5530
+ /**
5531
+ * Use this class to change how the element looks when acting as a placeholder
5532
+ */
5533
+ "placeholderClass"?: string;
5534
+ /**
5535
+ * Used to generate a screen reader live update, informing the user when items have been reordered.
5536
+ * @param el the element that has been reordered by the user
5537
+ * @param elements the elements in the sortable list
5538
+ * @param position the new position of the dropped element
5539
+ * @returns a string, describing the element being dropped
5540
+ */
5541
+ "reorderHelperText"?: (el: Element, elements: Element[], position: number) => string;
5542
+ /**
5543
+ * use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`. Note that the `sortableHostElement` element css `position` will be set to `relative`
5544
+ */
5545
+ "sortableHostElement"?: HTMLElement;
5546
+ }
5314
5547
  /**
5315
5548
  * Spinners are used to show the progress of an indeterminate operation.
5316
5549
  */
@@ -5517,7 +5750,6 @@ declare namespace LocalJSX {
5517
5750
  * - Built-in column sort
5518
5751
  * - Easily swap in API / async based search / filter & sort
5519
5752
  * - Pin headers, footers, rows, columns
5520
- * - Drag-&-Drop columns to re-order
5521
5753
  * - Add custom rendering at every level
5522
5754
  * - Add custom properties at every level
5523
5755
  */
@@ -5547,10 +5779,6 @@ declare namespace LocalJSX {
5547
5779
  property: TableTypes.Prop,
5548
5780
  order: TableTypes.Order
5549
5781
  ) => Promise<true | TableTypes.Falsy>;
5550
- /**
5551
- * The default draggable option for all columns. `true` will enable column drag-to-reorder unless you set `draggable: false` on a column `false` will disable column drag-to-reorder unless you set `draggable: true` on a column
5552
- */
5553
- "defaultColDraggable"?: boolean;
5554
5782
  /**
5555
5783
  * The default sortable option for all columns. `true` will enable column sorting unless you set `sortable: false` on a column `false` will disable column sorting unless you set `sortable: true` on a column
5556
5784
  */
@@ -5607,21 +5835,6 @@ declare namespace LocalJSX {
5607
5835
  "onNanoTblBlockRendered"?: (event: NanoTableCustomEvent<{
5608
5836
  block: number;
5609
5837
  totalBlocks: number;
5610
- }>) => void;
5611
- /**
5612
- * Fired when a column has started dragging
5613
- */
5614
- "onNanoTblColDrag"?: (event: NanoTableCustomEvent<{
5615
- column: TableTypes.Prop;
5616
- }>) => void;
5617
- /**
5618
- * Fired when a column has been dropped (after dragging) `event.preventDefault()` to stop column re-order.
5619
- */
5620
- "onNanoTblColDrop"?: (event: NanoTableCustomEvent<{
5621
- fromCol: TableTypes.Prop;
5622
- toCol: TableTypes.Prop;
5623
- fromIndex: number;
5624
- toIndex: number;
5625
5838
  }>) => void;
5626
5839
  /**
5627
5840
  * Fired when the table has done it's first complete render
@@ -5773,6 +5986,7 @@ declare namespace LocalJSX {
5773
5986
  "nano-skeleton": NanoSkeleton;
5774
5987
  "nano-slide": NanoSlide;
5775
5988
  "nano-slides": NanoSlides;
5989
+ "nano-sortable": NanoSortable;
5776
5990
  "nano-spinner": NanoSpinner;
5777
5991
  "nano-split-pane": NanoSplitPane;
5778
5992
  "nano-sticker": NanoSticker;
@@ -6007,6 +6221,13 @@ declare module "@stencil/core" {
6007
6221
  * Uses [Flickity](https://flickity.metafizzy.co/) under the hood.
6008
6222
  */
6009
6223
  "nano-slides": LocalJSX.NanoSlides & JSXBase.HTMLAttributes<HTMLNanoSlidesElement>;
6224
+ /**
6225
+ * An accessible and flexible re-order / sort utility component.
6226
+ * - Drag and drop via mouse, touch or keyboard
6227
+ * - Live announcements for screen readers
6228
+ * - Works with or without an explicit handle (although with is preferable)
6229
+ */
6230
+ "nano-sortable": LocalJSX.NanoSortable & JSXBase.HTMLAttributes<HTMLNanoSortableElement>;
6010
6231
  /**
6011
6232
  * Spinners are used to show the progress of an indeterminate operation.
6012
6233
  */
@@ -6035,7 +6256,6 @@ declare module "@stencil/core" {
6035
6256
  * - Built-in column sort
6036
6257
  * - Easily swap in API / async based search / filter & sort
6037
6258
  * - Pin headers, footers, rows, columns
6038
- * - Drag-&-Drop columns to re-order
6039
6259
  * - Add custom rendering at every level
6040
6260
  * - Add custom properties at every level
6041
6261
  */
@@ -1 +1,21 @@
1
- export declare function drag(container: HTMLElement, onMove: (x: number, y: number) => void): void;
1
+ interface DragOptions {
2
+ /** Callback that runs as dragging occurs. */
3
+ onMove: (x: number, y: number) => void;
4
+ /** Callback that runs when dragging stops. */
5
+ onStop: () => void;
6
+ /**
7
+ * When an initial event is passed, the first drag will be triggered immediately using the coordinates therein. This
8
+ * is useful when the drag is initiated by a mousedown/touchstart event but you want the initial "click" to activate
9
+ * a drag (e.g. positioning a handle initially at the click target).
10
+ */
11
+ initialEvent: TouchEvent | PointerEvent | MouseEvent;
12
+ /**
13
+ * Used in conjunction with `options.initialEvent`
14
+ * Subtracts the initial pointer co-ordinates from the move co-ordinates.
15
+ * This is useful for tracking how far an element has been dragged
16
+ */
17
+ relative?: boolean;
18
+ }
19
+ /** Begins listening for dragging. */
20
+ export declare function drag(container: HTMLElement, options?: Partial<DragOptions>): void;
21
+ export {};