@nanoporetech-digital/components 4.10.0 → 5.1.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 (174) hide show
  1. package/CHANGELOG.md +46 -0
  2. package/dist/cjs/{form-control-2e900f54.js → form-control-443e90bf.js} +2 -3
  3. package/dist/cjs/form-control-443e90bf.js.map +1 -0
  4. package/dist/cjs/index-71f899a7.js +6 -2
  5. package/dist/cjs/loader.cjs.js +1 -1
  6. package/dist/cjs/nano-components.cjs.js +1 -1
  7. package/dist/cjs/nano-dropdown.cjs.entry.js +1 -1
  8. package/dist/cjs/nano-dropdown.cjs.entry.js.map +1 -1
  9. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js +2 -2
  10. package/dist/cjs/nano-global-nav-user-profile_3.cjs.entry.js.map +1 -1
  11. package/dist/cjs/nano-grid-item.cjs.entry.js +29 -0
  12. package/dist/cjs/nano-grid-item.cjs.entry.js.map +1 -0
  13. package/dist/cjs/nano-grid_2.cjs.entry.js +443 -0
  14. package/dist/cjs/nano-grid_2.cjs.entry.js.map +1 -0
  15. package/dist/cjs/nano-hero.cjs.entry.js +4 -10
  16. package/dist/cjs/nano-hero.cjs.entry.js.map +1 -1
  17. package/dist/cjs/nano-icon-button_2.cjs.entry.js +2 -2
  18. package/dist/cjs/nano-icon-button_2.cjs.entry.js.map +1 -1
  19. package/dist/cjs/nano-input.cjs.entry.js +2 -2
  20. package/dist/cjs/nano-input.cjs.entry.js.map +1 -1
  21. package/dist/cjs/nano-range.cjs.entry.js +1 -1
  22. package/dist/cjs/nano-range.cjs.entry.js.map +1 -1
  23. package/dist/cjs/nano-sortable.cjs.entry.js +1 -0
  24. package/dist/cjs/nano-sortable.cjs.entry.js.map +1 -1
  25. package/dist/cjs/{nano-table-ff33dc43.js → nano-table-5587101f.js} +37 -30
  26. package/dist/cjs/nano-table-5587101f.js.map +1 -0
  27. package/dist/cjs/nano-table.cjs.entry.js +1 -1
  28. package/dist/cjs/{table.worker-0a6bc962.js → table.worker-abba820e.js} +2 -2
  29. package/dist/cjs/table.worker-abba820e.js.map +1 -0
  30. package/dist/collection/components/dropdown/dropdown.css +2 -1
  31. package/dist/collection/components/form-control/form-control.js +1 -2
  32. package/dist/collection/components/form-control/form-control.js.map +1 -1
  33. package/dist/collection/components/grid/grid-item.js +11 -136
  34. package/dist/collection/components/grid/grid-item.js.map +1 -1
  35. package/dist/collection/components/grid/grid.css +9 -242
  36. package/dist/collection/components/grid/grid.js +255 -240
  37. package/dist/collection/components/grid/grid.js.map +1 -1
  38. package/dist/collection/components/hero/hero.css +42 -89
  39. package/dist/collection/components/hero/hero.js +4 -11
  40. package/dist/collection/components/hero/hero.js.map +1 -1
  41. package/dist/collection/components/icon-button/icon-button.css +12 -0
  42. package/dist/collection/components/icon-button/icon-button.js +1 -1
  43. package/dist/collection/components/icon-button/icon-button.js.map +1 -1
  44. package/dist/collection/components/input/input.css +8 -9
  45. package/dist/collection/components/range/range.css +0 -3
  46. package/dist/collection/components/select/select.css +8 -9
  47. package/dist/collection/components/sortable/sortable.js +2 -1
  48. package/dist/collection/components/sortable/sortable.js.map +1 -1
  49. package/dist/collection/components/table/table.css +6 -0
  50. package/dist/collection/components/table/table.js +25 -18
  51. package/dist/collection/components/table/table.js.map +1 -1
  52. package/dist/collection/components/table/table.row.js +7 -7
  53. package/dist/collection/components/table/table.row.js.map +1 -1
  54. package/dist/collection/utils/constructible-style.js +129 -0
  55. package/dist/collection/utils/constructible-style.js.map +1 -0
  56. package/dist/components/dropdown.js +1 -1
  57. package/dist/components/dropdown.js.map +1 -1
  58. package/dist/components/form-control.js +1 -2
  59. package/dist/components/form-control.js.map +1 -1
  60. package/dist/components/grid.js +275 -183
  61. package/dist/components/grid.js.map +1 -1
  62. package/dist/components/icon-button.js +2 -2
  63. package/dist/components/icon-button.js.map +1 -1
  64. package/dist/components/input.js +1 -1
  65. package/dist/components/input.js.map +1 -1
  66. package/dist/components/nano-grid-item.js +33 -1
  67. package/dist/components/nano-grid-item.js.map +1 -1
  68. package/dist/components/nano-hero.js +6 -19
  69. package/dist/components/nano-hero.js.map +1 -1
  70. package/dist/components/nano-range.js +1 -1
  71. package/dist/components/nano-range.js.map +1 -1
  72. package/dist/components/nano-sortable.js +1 -0
  73. package/dist/components/nano-sortable.js.map +1 -1
  74. package/dist/components/select.js +1 -1
  75. package/dist/components/select.js.map +1 -1
  76. package/dist/components/table.js +36 -29
  77. package/dist/components/table.js.map +1 -1
  78. package/dist/esm/{form-control-269ba84f.js → form-control-e8739b2e.js} +2 -3
  79. package/dist/esm/form-control-e8739b2e.js.map +1 -0
  80. package/dist/esm/index-dad5627b.js +6 -2
  81. package/dist/esm/loader.js +1 -1
  82. package/dist/esm/nano-components.js +1 -1
  83. package/dist/esm/nano-dropdown.entry.js +1 -1
  84. package/dist/esm/nano-dropdown.entry.js.map +1 -1
  85. package/dist/esm/nano-global-nav-user-profile_3.entry.js +2 -2
  86. package/dist/esm/nano-global-nav-user-profile_3.entry.js.map +1 -1
  87. package/dist/esm/nano-grid-item.entry.js +25 -0
  88. package/dist/esm/nano-grid-item.entry.js.map +1 -0
  89. package/dist/esm/nano-grid_2.entry.js +438 -0
  90. package/dist/esm/nano-grid_2.entry.js.map +1 -0
  91. package/dist/esm/nano-hero.entry.js +4 -10
  92. package/dist/esm/nano-hero.entry.js.map +1 -1
  93. package/dist/esm/nano-icon-button_2.entry.js +2 -2
  94. package/dist/esm/nano-icon-button_2.entry.js.map +1 -1
  95. package/dist/esm/nano-input.entry.js +2 -2
  96. package/dist/esm/nano-input.entry.js.map +1 -1
  97. package/dist/esm/nano-range.entry.js +1 -1
  98. package/dist/esm/nano-range.entry.js.map +1 -1
  99. package/dist/esm/nano-sortable.entry.js +1 -0
  100. package/dist/esm/nano-sortable.entry.js.map +1 -1
  101. package/dist/esm/{nano-table-ec980076.js → nano-table-fb6b3bcb.js} +37 -30
  102. package/dist/esm/nano-table-fb6b3bcb.js.map +1 -0
  103. package/dist/esm/nano-table.entry.js +1 -1
  104. package/dist/esm/{table.worker-b53db58e.js → table.worker-43365547.js} +2 -2
  105. package/dist/esm/table.worker-43365547.js.map +1 -0
  106. package/dist/nano-components/nano-components.css +1 -1
  107. package/dist/nano-components/nano-components.esm.js +1 -1
  108. package/dist/nano-components/nano-components.esm.js.map +1 -1
  109. package/dist/nano-components/p-17b099cc.entry.js +5 -0
  110. package/dist/nano-components/p-17b099cc.entry.js.map +1 -0
  111. package/dist/nano-components/p-553acf24.entry.js +5 -0
  112. package/dist/nano-components/{p-58b53239.entry.js.map → p-553acf24.entry.js.map} +1 -1
  113. package/dist/nano-components/p-6975f110.entry.js +5 -0
  114. package/dist/nano-components/p-6975f110.entry.js.map +1 -0
  115. package/dist/nano-components/p-71057181.js +5 -0
  116. package/dist/nano-components/p-71057181.js.map +1 -0
  117. package/dist/nano-components/{p-f591400b.entry.js → p-913cf45f.entry.js} +2 -2
  118. package/dist/nano-components/p-99914796.js +5 -0
  119. package/dist/nano-components/p-99914796.js.map +1 -0
  120. package/dist/nano-components/p-9b5429e1.entry.js +5 -0
  121. package/dist/nano-components/p-9b5429e1.entry.js.map +1 -0
  122. package/dist/nano-components/p-ad6209ec.entry.js +5 -0
  123. package/dist/nano-components/p-ad6209ec.entry.js.map +1 -0
  124. package/dist/nano-components/p-bdef618c.entry.js +5 -0
  125. package/dist/nano-components/p-bdef618c.entry.js.map +1 -0
  126. package/dist/nano-components/{p-241baff8.entry.js → p-d79c6862.entry.js} +2 -2
  127. package/dist/nano-components/p-d79c6862.entry.js.map +1 -0
  128. package/dist/nano-components/{p-806bcd46.js → p-daa6f834.js} +2 -2
  129. package/dist/nano-components/p-deb0799c.entry.js +5 -0
  130. package/dist/nano-components/{p-6a3a29c6.entry.js.map → p-deb0799c.entry.js.map} +1 -1
  131. package/dist/nano-components/p-ebb98a9e.entry.js +5 -0
  132. package/dist/nano-components/p-ebb98a9e.entry.js.map +1 -0
  133. package/dist/types/components/grid/grid-item.d.ts +3 -11
  134. package/dist/types/components/grid/grid.d.ts +44 -68
  135. package/dist/types/components/hero/hero.d.ts +1 -3
  136. package/dist/types/components/table/table.d.ts +5 -0
  137. package/dist/types/components.d.ts +85 -61
  138. package/dist/types/utils/constructible-style.d.ts +31 -0
  139. package/docs-json.json +152 -88
  140. package/docs-vscode.json +28 -21
  141. package/hydrate/index.js +348 -307
  142. package/package.json +2 -2
  143. package/dist/cjs/form-control-2e900f54.js.map +0 -1
  144. package/dist/cjs/nano-grid_3.cjs.entry.js +0 -431
  145. package/dist/cjs/nano-grid_3.cjs.entry.js.map +0 -1
  146. package/dist/cjs/nano-table-ff33dc43.js.map +0 -1
  147. package/dist/cjs/table.worker-0a6bc962.js.map +0 -1
  148. package/dist/collection/components/grid/grid-item.css +0 -15
  149. package/dist/components/grid-item.js +0 -107
  150. package/dist/components/grid-item.js.map +0 -1
  151. package/dist/esm/form-control-269ba84f.js.map +0 -1
  152. package/dist/esm/nano-grid_3.entry.js +0 -425
  153. package/dist/esm/nano-grid_3.entry.js.map +0 -1
  154. package/dist/esm/nano-table-ec980076.js.map +0 -1
  155. package/dist/esm/table.worker-b53db58e.js.map +0 -1
  156. package/dist/nano-components/p-064af7d0.js +0 -5
  157. package/dist/nano-components/p-064af7d0.js.map +0 -1
  158. package/dist/nano-components/p-107d4549.entry.js +0 -5
  159. package/dist/nano-components/p-107d4549.entry.js.map +0 -1
  160. package/dist/nano-components/p-239d343a.entry.js +0 -5
  161. package/dist/nano-components/p-239d343a.entry.js.map +0 -1
  162. package/dist/nano-components/p-241baff8.entry.js.map +0 -1
  163. package/dist/nano-components/p-58b53239.entry.js +0 -5
  164. package/dist/nano-components/p-5ac74848.js +0 -5
  165. package/dist/nano-components/p-5ac74848.js.map +0 -1
  166. package/dist/nano-components/p-6a3a29c6.entry.js +0 -5
  167. package/dist/nano-components/p-87bc66b5.entry.js +0 -5
  168. package/dist/nano-components/p-87bc66b5.entry.js.map +0 -1
  169. package/dist/nano-components/p-d3de231c.entry.js +0 -5
  170. package/dist/nano-components/p-d3de231c.entry.js.map +0 -1
  171. package/dist/nano-components/p-d792f692.entry.js +0 -5
  172. package/dist/nano-components/p-d792f692.entry.js.map +0 -1
  173. /package/dist/nano-components/{p-806bcd46.js.map → p-913cf45f.entry.js.map} +0 -0
  174. /package/dist/nano-components/{p-f591400b.entry.js.map → p-daa6f834.js.map} +0 -0
@@ -1 +1 @@
1
- {"file":"nano-range.entry.cjs.js","mappings":"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","names":["clamp","debounceEvent","h","Host","createColorClasses"],"sources":["./src/utils/form.ts","./src/components/range/range.scss?tag=nano-range&encapsulation=scoped","./src/components/range/range.tsx"],"sourcesContent":["export const renderHiddenInput = (\n container: HTMLElement,\n name: string,\n value: string | undefined | null,\n disabled: boolean\n) => {\n let input = container.querySelector(\n 'input.aux-input'\n ) as HTMLInputElement | null;\n if (!input) {\n input = container.ownerDocument!.createElement('input');\n input.type = 'hidden';\n input.classList.add('aux-input');\n container.appendChild(input);\n }\n input.disabled = disabled;\n input.name = name;\n input.value = value || '';\n};\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n /**\n * @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n * @prop --bar-height: Height of the range bar; Defaults to 8px;\n * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n * @prop --height: Height of the range. Defaults to 42px;\n * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgb(0 0 0 / 30%);\n * @prop --knob-size: Size of the range knob; Defaults to 30px;\n * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n */\n --knob-handle-size: (var(--knob-size) * 2);\n --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n --knob-border-radius: 50%;\n --knob-background: #{nano-color(primary, base)};\n --knob-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);\n --knob-size: 30px;\n --bar-height: 8px;\n --bar-background: #e2e1e0;\n --bar-background-active: #a5a5a5;\n --bar-border-radius: 4px;\n --height: 42px;\n --pin-background: #{nano-color(primary, base)};\n --pin-color: #{nano-color(primary, contrast)};\n --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n display: flex;\n position: relative;\n flex: 3;\n align-items: center;\n user-select: none;\n\n ::slotted(ion-icon[slot]) {\n font-size: 1.5em;\n }\n\n ::slotted([slot='start']) {\n margin-inline: 0 14px;\n margin-block: 0;\n font-size: 0.9em;\n }\n\n ::slotted([slot='end']) {\n margin-inline: 14px 0;\n margin-block: 0;\n font-size: 0.9em;\n }\n}\n\n.range-slider {\n position: relative;\n flex: 1;\n width: 100%;\n height: var(--height);\n contain: size layout style;\n cursor: grab;\n touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n border-radius: var(--bar-border-radius);\n inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n inset-inline-start: 0;\n position: absolute;\n width: 100%;\n height: var(--bar-height);\n background: var(--bar-background);\n pointer-events: none;\n\n :host(.range-snaps) & {\n border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n }\n}\n\n.range-bar-active {\n inset-block-end: 0;\n width: auto;\n background: var(--bar-background-active);\n\n :host(.range-pressed) {\n will-change: left, right;\n }\n}\n\n// knob\n\n.range-knob {\n border-radius: var(--knob-border-radius);\n inset-block-start: calc(50% - var(--knob-size) / 2);\n inset-inline-start: calc(50% - var(--knob-size) / 2);\n position: absolute;\n width: var(--knob-size);\n height: var(--knob-size);\n background: var(--knob-background);\n box-shadow: var(--knob-box-shadow);\n z-index: 2;\n pointer-events: none;\n transform: scale(0.67);\n transition-duration: 120ms;\n transition-property: transform, background-color, border;\n transition-timing-function: ease;\n\n :host(:not(.range-has-pin)) .range-knob-pressed & {\n transform: scale(1);\n }\n}\n\n.range-knob-handle {\n inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);\n inset-inline-start: 0;\n margin-inline-start: calc(0px - var(--knob-handle-size) / 2);\n position: absolute;\n width: calc(var(--knob-handle-size));\n height: calc(var(--knob-handle-size));\n text-align: center;\n\n &:active,\n &:focus {\n outline: none;\n\n .range-knob {\n box-shadow: var(--knob-box-shadow), var(--focus-style);\n }\n }\n}\n\n// ticks\n\n.range-tick {\n position: absolute;\n inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n width: var(--bar-height);\n height: var(--bar-height);\n background: var(--bar-background-active);\n z-index: 1;\n pointer-events: none;\n\n &:first-of-type {\n border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n }\n\n &:last-of-type {\n border-radius: 0 var(--bar-border-radius) var(--bar-border-radius) 0;\n }\n\n &-active {\n background: transparent;\n }\n}\n\n// pin\n\n.range-pin {\n transform: translate3d(0, 0, 0) scale(0.01);\n transform-origin: center top;\n padding: 0.66em 0;\n border-radius: 50%;\n text-align: center;\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n min-width: 2.33em;\n height: 2.33em;\n transition: transform 120ms ease, background 120ms ease;\n background: var(--pin-background);\n color: var(--pin-color);\n font-size: 0.75em;\n\n &::before {\n inset-block-start: 0.25em;\n inset-inline-start: 50%;\n margin-inline-start: -1.08em;\n border-radius: 50% 50% 50% 0;\n position: absolute;\n width: 2.16em;\n height: 2.16em;\n transform: rotate(-45deg);\n transition: background 120ms ease;\n background: var(--pin-background);\n content: '';\n z-index: -1;\n }\n\n .range-knob-pressed & {\n transform: translate3d(0, -50%, 0) scale(1);\n transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n }\n}\n\n// disabled\n\n:host(.range-disabled) {\n pointer-events: none;\n\n .range-bar-active,\n .range-bar,\n .range-tick {\n background-color: rgb(var(--rgb-inactive) / 50%);\n }\n\n .range-knob {\n transform: scale(0.55);\n outline: 5px solid #fff;\n background-color: rgb(var(--rgb-inactive) / 50%);\n }\n}\n\n// theme\n\n:host(.nano-color) {\n .range-bar-active,\n .range-knob,\n .range-pin,\n .range-pin::before,\n .range-tick {\n background: current-color(base);\n color: current-color(contrast);\n }\n\n .range-bar {\n background: current-color(base, 0.26);\n }\n\n .range-knob-handle {\n &:active,\n &:focus {\n .range-knob {\n box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport type {\n Color,\n Gesture,\n GestureDetail,\n KnobName,\n RangeChangeEventDetail,\n RangeValue,\n StyleEventDetail,\n} from '../../interface';\n\n/**\n * The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n *\n * Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n *\n * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n */\n@Component({\n tag: 'nano-range',\n styleUrl: 'range.scss',\n scoped: true,\n})\nexport class Range implements ComponentInterface {\n private noUpdate = false;\n private rect!: ClientRect;\n private hasFocus = false;\n private rangeSlider?: HTMLElement;\n private gesture?: Gesture;\n\n @Element() el!: HTMLNanoRangeElement;\n\n @State() private ratioA = 0;\n @State() private ratioB = 0;\n @State() private pressedKnob: KnobName;\n\n /**\n * The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n */\n @Prop() color?: Color;\n\n /**\n * How long, in milliseconds, to wait to trigger the\n * `nanoChange` event after each change in the range value.\n */\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n }\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name = '';\n\n /**\n * Show two knobs.\n */\n @Prop() dualKnobs = false;\n\n /**\n * Minimum integer value of the range.\n */\n @Prop() min = 0;\n @Watch('min')\n protected minChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /**\n * Maximum integer value of the range.\n */\n @Prop() max = 100;\n @Watch('max')\n protected maxChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /**\n * If `true`, a pin with integer value is shown when the knob\n * is pressed.\n */\n @Prop() pin = false;\n\n /**\n * If `true`, the knob snaps to tick marks evenly spaced based\n * on the step property value.\n */\n @Prop() snaps = false;\n\n /**\n * Specifies the value granularity.\n */\n @Prop() step = 1;\n\n /**\n * If `true`, tick marks are displayed based on the step value.\n * Only applies when `snaps` is `true`.\n */\n @Prop() ticks = false;\n\n /**\n * If `true`, the user cannot interact with the range.\n */\n @Prop() disabled = false;\n @Watch('disabled')\n protected disabledChanged() {\n if (this.gesture) {\n this.gesture.enable(!this.disabled);\n }\n this.emitStyle();\n }\n\n /**\n * the value of the range.\n */\n @Prop({ mutable: true }) value: RangeValue = 0;\n @Watch('value')\n protected valueChanged(value: RangeValue) {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n\n value = this.ensureValueInBounds(value);\n\n this.nanoChange.emit({ value });\n }\n\n private clampBounds = (value: any): number => {\n return clamp(this.min, value, this.max);\n };\n\n private ensureValueInBounds = (value: any) => {\n if (this.dualKnobs) {\n return {\n lower: this.clampBounds(value.lower),\n upper: this.clampBounds(value.upper),\n };\n } else {\n return this.clampBounds(value);\n }\n };\n\n /**\n * Emitted when the value property has changed.\n */\n @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n /**\n * Emitted when the styles change.\n * @internal\n */\n @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n /**\n * Emitted when the range has focus.\n */\n @Event() nanoFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the range loses focus.\n */\n @Event() nanoBlur!: EventEmitter<void>;\n\n connectedCallback() {\n this.updateRatio();\n this.debounceChanged();\n this.disabledChanged();\n }\n\n disconnectedCallback() {\n if (this.gesture) {\n this.gesture.destroy();\n this.gesture = undefined;\n }\n }\n\n async componentDidLoad() {\n const rangeSlider = this.rangeSlider;\n if (rangeSlider) {\n this.gesture = (await import('../../utils/gesture/index')).createGesture({\n el: rangeSlider,\n gestureName: 'range',\n gesturePriority: 100,\n threshold: 0,\n onStart: (ev) => this.onStart(ev),\n onMove: (ev) => this.onMove(ev),\n onEnd: (ev) => this.onEnd(ev),\n });\n this.gesture.enable(!this.disabled);\n }\n }\n\n private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n let step = this.step;\n step = step > 0 ? step : 1;\n step = step / (this.max - this.min);\n if (!isIncrease) {\n step *= -1;\n }\n if (knob === 'A') {\n this.ratioA = clamp(0, this.ratioA + step, 1);\n } else {\n this.ratioB = clamp(0, this.ratioB + step, 1);\n }\n this.updateValue();\n };\n\n private getValue(): RangeValue {\n const value = this.value || 0;\n if (this.dualKnobs) {\n if (typeof value === 'object') {\n return value;\n }\n return {\n lower: 0,\n upper: value,\n };\n } else {\n if (typeof value === 'object') {\n return value.upper;\n }\n return value;\n }\n }\n\n private emitStyle() {\n this.nanoStyle.emit({\n interactive: true,\n 'interactive-disabled': this.disabled,\n });\n }\n\n private onStart(detail: GestureDetail) {\n const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n const currentX = detail.currentX;\n\n // figure out which knob they started closer to\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n this.pressedKnob =\n !this.dualKnobs ||\n Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n ? 'A'\n : 'B';\n\n this.setFocus(this.pressedKnob);\n\n // update the active knob's position\n this.update(currentX);\n }\n\n private onMove(detail: GestureDetail) {\n this.update(detail.currentX);\n }\n\n private onEnd(detail: GestureDetail) {\n this.update(detail.currentX);\n this.pressedKnob = undefined;\n }\n\n private update(currentX: number) {\n // figure out where the pointer is currently at\n // update the knob being interacted with\n const rect = this.rect;\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n if (this.snaps) {\n // snaps the ratio to the current value\n ratio = valueToRatio(\n ratioToValue(ratio, this.min, this.max, this.step),\n this.min,\n this.max\n );\n }\n\n // update which knob is pressed\n if (this.pressedKnob === 'A') {\n this.ratioA = ratio;\n } else {\n this.ratioB = ratio;\n }\n\n // Update input value\n this.updateValue();\n }\n\n private get valA() {\n return ratioToValue(this.ratioA, this.min, this.max, this.step);\n }\n\n private get valB() {\n return ratioToValue(this.ratioB, this.min, this.max, this.step);\n }\n\n private get ratioLower() {\n if (this.dualKnobs) {\n return Math.min(this.ratioA, this.ratioB);\n }\n return 0;\n }\n\n private get ratioUpper() {\n if (this.dualKnobs) {\n return Math.max(this.ratioA, this.ratioB);\n }\n return this.ratioA;\n }\n\n private updateRatio() {\n const value = this.getValue() as any;\n const { min, max } = this;\n if (this.dualKnobs) {\n this.ratioA = valueToRatio(value.lower, min, max);\n this.ratioB = valueToRatio(value.upper, min, max);\n } else {\n this.ratioA = valueToRatio(value, min, max);\n }\n }\n\n private updateValue() {\n this.noUpdate = true;\n\n const { valA, valB } = this;\n this.value = !this.dualKnobs\n ? valA\n : {\n lower: Math.min(valA, valB),\n upper: Math.max(valA, valB),\n };\n\n this.noUpdate = false;\n }\n\n private setFocus(knob: KnobName) {\n if (this.el.shadowRoot) {\n const knobEl = this.el.shadowRoot.querySelector(\n knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n ) as HTMLElement | undefined;\n if (knobEl) {\n knobEl.focus();\n }\n }\n }\n\n private onBlur = () => {\n if (this.hasFocus) {\n this.hasFocus = false;\n this.nanoBlur.emit();\n this.emitStyle();\n }\n };\n\n private onFocus = () => {\n if (!this.hasFocus) {\n this.hasFocus = true;\n this.nanoFocus.emit();\n this.emitStyle();\n }\n };\n\n render() {\n const {\n min,\n max,\n step,\n el,\n handleKeyboard,\n pressedKnob,\n disabled,\n pin,\n ratioLower,\n ratioUpper,\n } = this;\n\n const barStart = `${ratioLower * 100}%`;\n const barEnd = `${100 - ratioUpper * 100}%`;\n\n const doc = document;\n const isRTL = doc.dir === 'rtl';\n const start = isRTL ? 'right' : 'left';\n const end = isRTL ? 'left' : 'right';\n\n const tickStyle = (tick: any) => {\n return {\n [start]: tick[start],\n };\n };\n\n const barStyle = {\n [start]: barStart,\n [end]: barEnd,\n };\n\n const ticks = [];\n if (this.snaps && this.ticks) {\n for (let value = min; value <= max; value += step) {\n const ratio = valueToRatio(value, min, max);\n\n const tick: any = {\n ratio,\n active: ratio >= ratioLower && ratio <= ratioUpper,\n };\n\n tick[start] = `${ratio * 100}%`;\n\n ticks.push(tick);\n }\n }\n\n renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n return (\n <Host\n onFocusin={this.onFocus}\n onFocusout={this.onBlur}\n class={createColorClasses(this.color, {\n 'range-disabled': disabled,\n 'range-pressed': pressedKnob !== undefined,\n 'range-has-pin': pin,\n 'range-snaps': this.snaps,\n })}\n >\n <div class=\"range-wrap\">\n <slot name=\"start\"></slot>\n <div\n class=\"range-slider\"\n ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n >\n {ticks.map((tick) => (\n <span\n style={tickStyle(tick)}\n role=\"presentation\"\n class={{\n 'range-tick': true,\n 'range-tick-active': tick.active,\n }}\n part={tick.active ? 'tick-active' : 'tick'}\n />\n ))}\n\n <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n <div\n class=\"range-bar range-bar-active\"\n role=\"presentation\"\n style={barStyle}\n part=\"bar-active\"\n />\n\n {renderKnob(isRTL, {\n knob: 'A',\n pressed: pressedKnob === 'A',\n value: this.valA,\n ratio: this.ratioA,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n\n {this.dualKnobs &&\n renderKnob(isRTL, {\n knob: 'B',\n pressed: pressedKnob === 'B',\n value: this.valB,\n ratio: this.ratioB,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n </div>\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n\ninterface RangeKnob {\n knob: KnobName;\n value: number;\n ratio: number;\n min: number;\n max: number;\n disabled: boolean;\n pressed: boolean;\n pin: boolean;\n\n handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n isRTL: boolean,\n {\n knob,\n value,\n ratio,\n min,\n max,\n disabled,\n pressed,\n pin,\n handleKeyboard,\n }: RangeKnob\n) => {\n const start = isRTL ? 'right' : 'left';\n\n const knobStyle = () => {\n const style: any = {};\n style[start] = `${ratio * 100}%`;\n return style;\n };\n\n return (\n <div\n onKeyDown={(ev: KeyboardEvent) => {\n const key = ev.key;\n if (key === 'ArrowLeft' || key === 'ArrowDown') {\n handleKeyboard(knob, false);\n ev.preventDefault();\n ev.stopPropagation();\n } else if (key === 'ArrowRight' || key === 'ArrowUp') {\n handleKeyboard(knob, true);\n ev.preventDefault();\n ev.stopPropagation();\n }\n }}\n class={{\n 'range-knob-handle': true,\n 'range-knob-a': knob === 'A',\n 'range-knob-b': knob === 'B',\n 'range-knob-pressed': pressed,\n 'range-knob-min': value === min,\n 'range-knob-max': value === max,\n }}\n style={knobStyle()}\n role=\"slider\"\n tabindex={disabled ? -1 : 0}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-disabled={disabled ? 'true' : null}\n aria-valuenow={value}\n >\n {pin && (\n <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n {Math.round(value)}\n </div>\n )}\n <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n </div>\n );\n};\n\nconst ratioToValue = (\n ratio: number,\n min: number,\n max: number,\n step: number\n): number => {\n let value = (max - min) * ratio;\n if (step > 0) {\n value = Math.round(value / step) * step + min;\n }\n return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n return clamp(0, (value - min) / (max - min), 1);\n};\n"],"version":3}
1
+ {"file":"nano-range.entry.cjs.js","mappings":"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","names":["clamp","debounceEvent","h","Host","createColorClasses"],"sources":["./src/utils/form.ts","./src/components/range/range.scss?tag=nano-range&encapsulation=scoped","./src/components/range/range.tsx"],"sourcesContent":["export const renderHiddenInput = (\n container: HTMLElement,\n name: string,\n value: string | undefined | null,\n disabled: boolean\n) => {\n let input = container.querySelector(\n 'input.aux-input'\n ) as HTMLInputElement | null;\n if (!input) {\n input = container.ownerDocument!.createElement('input');\n input.type = 'hidden';\n input.classList.add('aux-input');\n container.appendChild(input);\n }\n input.disabled = disabled;\n input.name = name;\n input.value = value || '';\n};\n","@import '../../global/style/utilities/globals';\n@import '../../global/style/nano-theme/form';\n\n// Range\n// --------------------------------------------------\n\n:host {\n /**\n * @prop --knob-handle-size: defaults to calc(var(--knob-size) * 2);\n * @prop --rgb-inactive: defaults to #{color-to-rgb-list(#a5a5a5)};\n * @prop --bar-background: Background of the range bar; Defaults to #e2e1e0;\n * @prop --bar-background-active: Background of the active range bar; Defaults to #a5a5a5;\n * @prop --bar-height: Height of the range bar; Defaults to 8px;\n * @prop --bar-border-radius: Border radius of the range bar; Defaults to 4px;\n * @prop --height: Height of the range. Defaults to 42px;\n * @prop --knob-background: Background of the range knob. Defaults to #{nano-color(primary, base)};\n * @prop --knob-border-radius: Border radius of the range knob. Defaults to 50%;\n * @prop --knob-box-shadow: Box shadow of the range knob; Defaults to 0 2px 4px 0 rgb(0 0 0 / 30%);\n * @prop --knob-size: Size of the range knob; Defaults to 30px;\n * @prop --pin-background: Background of the range pin; Defaults to #{nano-color(primary, base)};\n * @prop --pin-color: Color of the range pin; Defaults to #{nano-color(primary, contrast)};\n * @prop --focus-style: Focus shadow around knob; Defaults to 0 0 0 5px #{$control-focus-color};\n */\n --knob-handle-size: (var(--knob-size) * 2);\n --rgb-inactive: #{color-to-rgb-list(#a5a5a5)};\n --knob-border-radius: 50%;\n --knob-background: #{nano-color(primary, base)};\n --knob-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 30%);\n --knob-size: 30px;\n --bar-height: 8px;\n --bar-background: #e2e1e0;\n --bar-background-active: #a5a5a5;\n --bar-border-radius: 4px;\n --height: 42px;\n --pin-background: #{nano-color(primary, base)};\n --pin-color: #{nano-color(primary, contrast)};\n --focus-style: 0 0 0 5px #{$control-focus-color};\n}\n\n.range-wrap {\n display: flex;\n position: relative;\n flex: 3;\n align-items: center;\n user-select: none;\n\n ::slotted(ion-icon[slot]) {\n font-size: 1.5em;\n }\n\n ::slotted([slot='start']) {\n margin-inline: 0 14px;\n margin-block: 0;\n font-size: 0.9em;\n }\n\n ::slotted([slot='end']) {\n margin-inline: 14px 0;\n margin-block: 0;\n font-size: 0.9em;\n }\n}\n\n.range-slider {\n position: relative;\n flex: 1;\n width: 100%;\n height: var(--height);\n contain: size layout style;\n cursor: grab;\n touch-action: pan-y;\n}\n\n:host(.range-pressed) .range-slider {\n cursor: grabbing;\n}\n\n// bar\n\n.range-bar {\n border-radius: var(--bar-border-radius);\n inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n inset-inline-start: 0;\n position: absolute;\n width: 100%;\n height: var(--bar-height);\n background: var(--bar-background);\n pointer-events: none;\n\n :host(.range-snaps) & {\n border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n }\n}\n\n.range-bar-active {\n inset-block-end: 0;\n width: auto;\n background: var(--bar-background-active);\n}\n\n// knob\n\n.range-knob {\n border-radius: var(--knob-border-radius);\n inset-block-start: calc(50% - var(--knob-size) / 2);\n inset-inline-start: calc(50% - var(--knob-size) / 2);\n position: absolute;\n width: var(--knob-size);\n height: var(--knob-size);\n background: var(--knob-background);\n box-shadow: var(--knob-box-shadow);\n z-index: 2;\n pointer-events: none;\n transform: scale(0.67);\n transition-duration: 120ms;\n transition-property: transform, background-color, border;\n transition-timing-function: ease;\n\n :host(:not(.range-has-pin)) .range-knob-pressed & {\n transform: scale(1);\n }\n}\n\n.range-knob-handle {\n inset-block-start: calc((var(--height) - var(--knob-handle-size)) / 2);\n inset-inline-start: 0;\n margin-inline-start: calc(0px - var(--knob-handle-size) / 2);\n position: absolute;\n width: calc(var(--knob-handle-size));\n height: calc(var(--knob-handle-size));\n text-align: center;\n\n &:active,\n &:focus {\n outline: none;\n\n .range-knob {\n box-shadow: var(--knob-box-shadow), var(--focus-style);\n }\n }\n}\n\n// ticks\n\n.range-tick {\n position: absolute;\n inset-block-start: calc((var(--height) - var(--bar-height)) / 2);\n width: var(--bar-height);\n height: var(--bar-height);\n background: var(--bar-background-active);\n z-index: 1;\n pointer-events: none;\n\n &:first-of-type {\n border-radius: var(--bar-border-radius) 0 0 var(--bar-border-radius);\n }\n\n &:last-of-type {\n border-radius: 0 var(--bar-border-radius) var(--bar-border-radius) 0;\n }\n\n &-active {\n background: transparent;\n }\n}\n\n// pin\n\n.range-pin {\n transform: translate3d(0, 0, 0) scale(0.01);\n transform-origin: center top;\n padding: 0.66em 0;\n border-radius: 50%;\n text-align: center;\n box-sizing: border-box;\n display: inline-block;\n position: relative;\n min-width: 2.33em;\n height: 2.33em;\n transition: transform 120ms ease, background 120ms ease;\n background: var(--pin-background);\n color: var(--pin-color);\n font-size: 0.75em;\n\n &::before {\n inset-block-start: 0.25em;\n inset-inline-start: 50%;\n margin-inline-start: -1.08em;\n border-radius: 50% 50% 50% 0;\n position: absolute;\n width: 2.16em;\n height: 2.16em;\n transform: rotate(-45deg);\n transition: background 120ms ease;\n background: var(--pin-background);\n content: '';\n z-index: -1;\n }\n\n .range-knob-pressed & {\n transform: translate3d(0, -50%, 0) scale(1);\n transform: translate3d(0, calc((100% - var(--bar-height)) * -1), 0) scale(1);\n }\n}\n\n// disabled\n\n:host(.range-disabled) {\n pointer-events: none;\n\n .range-bar-active,\n .range-bar,\n .range-tick {\n background-color: rgb(var(--rgb-inactive) / 50%);\n }\n\n .range-knob {\n transform: scale(0.55);\n outline: 5px solid #fff;\n background-color: rgb(var(--rgb-inactive) / 50%);\n }\n}\n\n// theme\n\n:host(.nano-color) {\n .range-bar-active,\n .range-knob,\n .range-pin,\n .range-pin::before,\n .range-tick {\n background: current-color(base);\n color: current-color(contrast);\n }\n\n .range-bar {\n background: current-color(base, 0.26);\n }\n\n .range-knob-handle {\n &:active,\n &:focus {\n .range-knob {\n box-shadow: var(--knob-box-shadow), 0 0 0 5px current-color(tint, 0.56);\n }\n }\n }\n}\n","import {\n Component,\n ComponentInterface,\n Element,\n Event,\n EventEmitter,\n Host,\n Prop,\n State,\n Watch,\n h,\n} from '@stencil/core';\nimport { renderHiddenInput } from '../../utils/form';\nimport { clamp } from '../../utils/math';\nimport { createColorClasses } from '../../utils/theme';\nimport { debounceEvent } from '../../utils/throttle';\nimport type {\n Color,\n Gesture,\n GestureDetail,\n KnobName,\n RangeChangeEventDetail,\n RangeValue,\n StyleEventDetail,\n} from '../../interface';\n\n/**\n * The Range slider lets users select from a range of values by moving\n * the slider knob. It can accept dual knobs, but by default one knob controls the value of the range.\n *\n * Labels can be placed on either side of the range by adding the\n * `slot=\"start\"` or `slot=\"end\"` to the element.\n *\n * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.\n * @slot end - Content is placed to the right of the range slider in LTR, and to the left in RTL.\n */\n@Component({\n tag: 'nano-range',\n styleUrl: 'range.scss',\n scoped: true,\n})\nexport class Range implements ComponentInterface {\n private noUpdate = false;\n private rect!: ClientRect;\n private hasFocus = false;\n private rangeSlider?: HTMLElement;\n private gesture?: Gesture;\n\n @Element() el!: HTMLNanoRangeElement;\n\n @State() private ratioA = 0;\n @State() private ratioB = 0;\n @State() private pressedKnob: KnobName;\n\n /**\n * The color to use from your application's color palette.\n * Default options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`\n */\n @Prop() color?: Color;\n\n /**\n * How long, in milliseconds, to wait to trigger the\n * `nanoChange` event after each change in the range value.\n */\n @Prop() debounce = 0;\n\n @Watch('debounce')\n protected debounceChanged() {\n this.nanoChange = debounceEvent(this.nanoChange, this.debounce);\n }\n\n /**\n * The name of the control, which is submitted with the form data.\n */\n @Prop() name = '';\n\n /**\n * Show two knobs.\n */\n @Prop() dualKnobs = false;\n\n /**\n * Minimum integer value of the range.\n */\n @Prop() min = 0;\n @Watch('min')\n protected minChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /**\n * Maximum integer value of the range.\n */\n @Prop() max = 100;\n @Watch('max')\n protected maxChanged() {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n }\n\n /**\n * If `true`, a pin with integer value is shown when the knob\n * is pressed.\n */\n @Prop() pin = false;\n\n /**\n * If `true`, the knob snaps to tick marks evenly spaced based\n * on the step property value.\n */\n @Prop() snaps = false;\n\n /**\n * Specifies the value granularity.\n */\n @Prop() step = 1;\n\n /**\n * If `true`, tick marks are displayed based on the step value.\n * Only applies when `snaps` is `true`.\n */\n @Prop() ticks = false;\n\n /**\n * If `true`, the user cannot interact with the range.\n */\n @Prop() disabled = false;\n @Watch('disabled')\n protected disabledChanged() {\n if (this.gesture) {\n this.gesture.enable(!this.disabled);\n }\n this.emitStyle();\n }\n\n /**\n * the value of the range.\n */\n @Prop({ mutable: true }) value: RangeValue = 0;\n @Watch('value')\n protected valueChanged(value: RangeValue) {\n if (!this.noUpdate) {\n this.updateRatio();\n }\n\n value = this.ensureValueInBounds(value);\n\n this.nanoChange.emit({ value });\n }\n\n private clampBounds = (value: any): number => {\n return clamp(this.min, value, this.max);\n };\n\n private ensureValueInBounds = (value: any) => {\n if (this.dualKnobs) {\n return {\n lower: this.clampBounds(value.lower),\n upper: this.clampBounds(value.upper),\n };\n } else {\n return this.clampBounds(value);\n }\n };\n\n /**\n * Emitted when the value property has changed.\n */\n @Event() nanoChange!: EventEmitter<RangeChangeEventDetail>;\n\n /**\n * Emitted when the styles change.\n * @internal\n */\n @Event() nanoStyle!: EventEmitter<StyleEventDetail>;\n\n /**\n * Emitted when the range has focus.\n */\n @Event() nanoFocus!: EventEmitter<void>;\n\n /**\n * Emitted when the range loses focus.\n */\n @Event() nanoBlur!: EventEmitter<void>;\n\n connectedCallback() {\n this.updateRatio();\n this.debounceChanged();\n this.disabledChanged();\n }\n\n disconnectedCallback() {\n if (this.gesture) {\n this.gesture.destroy();\n this.gesture = undefined;\n }\n }\n\n async componentDidLoad() {\n const rangeSlider = this.rangeSlider;\n if (rangeSlider) {\n this.gesture = (await import('../../utils/gesture/index')).createGesture({\n el: rangeSlider,\n gestureName: 'range',\n gesturePriority: 100,\n threshold: 0,\n onStart: (ev) => this.onStart(ev),\n onMove: (ev) => this.onMove(ev),\n onEnd: (ev) => this.onEnd(ev),\n });\n this.gesture.enable(!this.disabled);\n }\n }\n\n private handleKeyboard = (knob: KnobName, isIncrease: boolean) => {\n let step = this.step;\n step = step > 0 ? step : 1;\n step = step / (this.max - this.min);\n if (!isIncrease) {\n step *= -1;\n }\n if (knob === 'A') {\n this.ratioA = clamp(0, this.ratioA + step, 1);\n } else {\n this.ratioB = clamp(0, this.ratioB + step, 1);\n }\n this.updateValue();\n };\n\n private getValue(): RangeValue {\n const value = this.value || 0;\n if (this.dualKnobs) {\n if (typeof value === 'object') {\n return value;\n }\n return {\n lower: 0,\n upper: value,\n };\n } else {\n if (typeof value === 'object') {\n return value.upper;\n }\n return value;\n }\n }\n\n private emitStyle() {\n this.nanoStyle.emit({\n interactive: true,\n 'interactive-disabled': this.disabled,\n });\n }\n\n private onStart(detail: GestureDetail) {\n const rect = (this.rect = this.rangeSlider!.getBoundingClientRect() as any);\n const currentX = detail.currentX;\n\n // figure out which knob they started closer to\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n this.pressedKnob =\n !this.dualKnobs ||\n Math.abs(this.ratioA - ratio) < Math.abs(this.ratioB - ratio)\n ? 'A'\n : 'B';\n\n this.setFocus(this.pressedKnob);\n\n // update the active knob's position\n this.update(currentX);\n }\n\n private onMove(detail: GestureDetail) {\n this.update(detail.currentX);\n }\n\n private onEnd(detail: GestureDetail) {\n this.update(detail.currentX);\n this.pressedKnob = undefined;\n }\n\n private update(currentX: number) {\n // figure out where the pointer is currently at\n // update the knob being interacted with\n const rect = this.rect;\n let ratio = clamp(0, (currentX - rect.left) / rect.width, 1);\n if (document.dir === 'rtl') {\n ratio = 1 - ratio;\n }\n\n if (this.snaps) {\n // snaps the ratio to the current value\n ratio = valueToRatio(\n ratioToValue(ratio, this.min, this.max, this.step),\n this.min,\n this.max\n );\n }\n\n // update which knob is pressed\n if (this.pressedKnob === 'A') {\n this.ratioA = ratio;\n } else {\n this.ratioB = ratio;\n }\n\n // Update input value\n this.updateValue();\n }\n\n private get valA() {\n return ratioToValue(this.ratioA, this.min, this.max, this.step);\n }\n\n private get valB() {\n return ratioToValue(this.ratioB, this.min, this.max, this.step);\n }\n\n private get ratioLower() {\n if (this.dualKnobs) {\n return Math.min(this.ratioA, this.ratioB);\n }\n return 0;\n }\n\n private get ratioUpper() {\n if (this.dualKnobs) {\n return Math.max(this.ratioA, this.ratioB);\n }\n return this.ratioA;\n }\n\n private updateRatio() {\n const value = this.getValue() as any;\n const { min, max } = this;\n if (this.dualKnobs) {\n this.ratioA = valueToRatio(value.lower, min, max);\n this.ratioB = valueToRatio(value.upper, min, max);\n } else {\n this.ratioA = valueToRatio(value, min, max);\n }\n }\n\n private updateValue() {\n this.noUpdate = true;\n\n const { valA, valB } = this;\n this.value = !this.dualKnobs\n ? valA\n : {\n lower: Math.min(valA, valB),\n upper: Math.max(valA, valB),\n };\n\n this.noUpdate = false;\n }\n\n private setFocus(knob: KnobName) {\n if (this.el.shadowRoot) {\n const knobEl = this.el.shadowRoot.querySelector(\n knob === 'A' ? '.range-knob-a' : '.range-knob-b'\n ) as HTMLElement | undefined;\n if (knobEl) {\n knobEl.focus();\n }\n }\n }\n\n private onBlur = () => {\n if (this.hasFocus) {\n this.hasFocus = false;\n this.nanoBlur.emit();\n this.emitStyle();\n }\n };\n\n private onFocus = () => {\n if (!this.hasFocus) {\n this.hasFocus = true;\n this.nanoFocus.emit();\n this.emitStyle();\n }\n };\n\n render() {\n const {\n min,\n max,\n step,\n el,\n handleKeyboard,\n pressedKnob,\n disabled,\n pin,\n ratioLower,\n ratioUpper,\n } = this;\n\n const barStart = `${ratioLower * 100}%`;\n const barEnd = `${100 - ratioUpper * 100}%`;\n\n const doc = document;\n const isRTL = doc.dir === 'rtl';\n const start = isRTL ? 'right' : 'left';\n const end = isRTL ? 'left' : 'right';\n\n const tickStyle = (tick: any) => {\n return {\n [start]: tick[start],\n };\n };\n\n const barStyle = {\n [start]: barStart,\n [end]: barEnd,\n };\n\n const ticks = [];\n if (this.snaps && this.ticks) {\n for (let value = min; value <= max; value += step) {\n const ratio = valueToRatio(value, min, max);\n\n const tick: any = {\n ratio,\n active: ratio >= ratioLower && ratio <= ratioUpper,\n };\n\n tick[start] = `${ratio * 100}%`;\n\n ticks.push(tick);\n }\n }\n\n renderHiddenInput(el, this.name, JSON.stringify(this.getValue()), disabled);\n\n return (\n <Host\n onFocusin={this.onFocus}\n onFocusout={this.onBlur}\n class={createColorClasses(this.color, {\n 'range-disabled': disabled,\n 'range-pressed': pressedKnob !== undefined,\n 'range-has-pin': pin,\n 'range-snaps': this.snaps,\n })}\n >\n <div class=\"range-wrap\">\n <slot name=\"start\"></slot>\n <div\n class=\"range-slider\"\n ref={(rangeEl) => (this.rangeSlider = rangeEl)}\n >\n {ticks.map((tick) => (\n <span\n style={tickStyle(tick)}\n role=\"presentation\"\n class={{\n 'range-tick': true,\n 'range-tick-active': tick.active,\n }}\n part={tick.active ? 'tick-active' : 'tick'}\n />\n ))}\n\n <div class=\"range-bar\" role=\"presentation\" part=\"bar\" />\n <div\n class=\"range-bar range-bar-active\"\n role=\"presentation\"\n style={barStyle}\n part=\"bar-active\"\n />\n\n {renderKnob(isRTL, {\n knob: 'A',\n pressed: pressedKnob === 'A',\n value: this.valA,\n ratio: this.ratioA,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n\n {this.dualKnobs &&\n renderKnob(isRTL, {\n knob: 'B',\n pressed: pressedKnob === 'B',\n value: this.valB,\n ratio: this.ratioB,\n pin,\n disabled,\n handleKeyboard,\n min,\n max,\n })}\n </div>\n <slot name=\"end\"></slot>\n </div>\n </Host>\n );\n }\n}\n\ninterface RangeKnob {\n knob: KnobName;\n value: number;\n ratio: number;\n min: number;\n max: number;\n disabled: boolean;\n pressed: boolean;\n pin: boolean;\n\n handleKeyboard: (name: KnobName, isIncrease: boolean) => void;\n}\n\nconst renderKnob = (\n isRTL: boolean,\n {\n knob,\n value,\n ratio,\n min,\n max,\n disabled,\n pressed,\n pin,\n handleKeyboard,\n }: RangeKnob\n) => {\n const start = isRTL ? 'right' : 'left';\n\n const knobStyle = () => {\n const style: any = {};\n style[start] = `${ratio * 100}%`;\n return style;\n };\n\n return (\n <div\n onKeyDown={(ev: KeyboardEvent) => {\n const key = ev.key;\n if (key === 'ArrowLeft' || key === 'ArrowDown') {\n handleKeyboard(knob, false);\n ev.preventDefault();\n ev.stopPropagation();\n } else if (key === 'ArrowRight' || key === 'ArrowUp') {\n handleKeyboard(knob, true);\n ev.preventDefault();\n ev.stopPropagation();\n }\n }}\n class={{\n 'range-knob-handle': true,\n 'range-knob-a': knob === 'A',\n 'range-knob-b': knob === 'B',\n 'range-knob-pressed': pressed,\n 'range-knob-min': value === min,\n 'range-knob-max': value === max,\n }}\n style={knobStyle()}\n role=\"slider\"\n tabindex={disabled ? -1 : 0}\n aria-valuemin={min}\n aria-valuemax={max}\n aria-disabled={disabled ? 'true' : null}\n aria-valuenow={value}\n >\n {pin && (\n <div class=\"range-pin\" role=\"presentation\" part=\"pin\">\n {Math.round(value)}\n </div>\n )}\n <div class=\"range-knob\" role=\"presentation\" part=\"knob\" />\n </div>\n );\n};\n\nconst ratioToValue = (\n ratio: number,\n min: number,\n max: number,\n step: number\n): number => {\n let value = (max - min) * ratio;\n if (step > 0) {\n value = Math.round(value / step) * step + min;\n }\n return clamp(min, value, max);\n};\n\nconst valueToRatio = (value: number, min: number, max: number): number => {\n return clamp(0, (value - min) / (max - min), 1);\n};\n"],"version":3}
@@ -594,6 +594,7 @@ const Sortable = class {
594
594
  slot="end"
595
595
  icon-name="light/arrows"
596
596
  class="nano-sortable__keyboard-handle visually-hidden"
597
+ label="Re-order this item"
597
598
  ></nano-icon-button>`;
598
599
  const div = globalThis.document.createElement('div');
599
600
  div.innerHTML = handleTpl;
@@ -1 +1 @@
1
- {"file":"nano-sortable.entry.cjs.js","mappings":"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","names":["writeTask","drag","readTask","nanoDebounce","h","Host"],"sources":["./src/components/sortable/sortable.scss?tag=nano-sortable&encapsulation=shadow","./src/components/sortable/sortable.tsx"],"sourcesContent":["@use '../../global/style/utilities/globals' as g;\n\n:host {\n position: relative;\n display: block;\n}\n\n.sortable__live-region {\n @include g.visually-hide();\n}\n","import {\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Component,\n ComponentInterface,\n Watch,\n Method,\n State,\n Host,\n readTask,\n writeTask,\n Build,\n} from '@stencil/core';\nimport { drag } from '../../utils/drag';\nimport { nanoDebounce } from '../..';\n\n// Orientation map to limit dragging to horizontal or vertical.\nconst orientationMap = {\n horizontal: { x: 1, y: 0 },\n vertical: { x: 0, y: 1 },\n};\n\nlet sortableIds = 0;\n\n/**\n * 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)\n\n * @part announcements - the a11y, live region. Visually hidden by default\n *\n * @slot - The default slot containing any items you might want to sort\n */\n@Component({\n tag: 'nano-sortable',\n shadow: true,\n styleUrl: 'sortable.scss',\n})\nexport class Sortable implements ComponentInterface {\n /// Public API & surface ///\n\n /** A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>` */\n @Prop() itemSelector = 'li';\n @Watch('itemSelector')\n handleItemSelectorChange() {\n this.refreshKeyboardHandles();\n }\n\n /** A css query selector which matches an element *within* the `itemSelector` element\n * which will act like a drag handle. **Note** For keyboard a11y it's recommended\n * to use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used */\n @Prop() handleSelector?: string;\n @Watch('handleSelector')\n handleHandleSelectorChange() {\n this.refreshKeyboardHandles();\n this.attachMutationObserver();\n }\n\n /** When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another.\n * At that point, you will not be able to drag items back to the original group.\n * A `dropzoneSelector` allows you to define a placeholder area where items can always be dropped.\n */\n @Prop() dropzoneSelector?: string;\n\n /** Accessibility helper text applied to handle controls */\n @Prop() helperText =\n 'Press \"Space\" or \"Enter\" to enable element reordering and use the arrow keys to reorder items.' +\n 'Press \"Escape\" to cancel reordering. Alternatively, use your mouse to drag / reorder.';\n\n /**\n * As a sortable element is interacted with, announcements are made to screen readers\n * - informing the user what is changing.\n * By default, the text from the element is extracted to describe the interacted with element.\n * Use this function to provide a more meaningful, concise item descriptor\n * @param el the element being interacted with\n * @returns a string, describing the element being interacted with\n */\n @Prop() itemDescriptor = (el: Element) => `\"${el.textContent.trim()}\"`;\n\n /**\n * Used to generate a screen reader live update, informing the user of the current element being grabbed.\n * @param el the element that has been grabbed by the user\n * @returns a string, describing the element being grabbed\n */\n @Prop() grabbedHelperText = (el: Element) =>\n `${this.itemDescriptor(el)} grabbed`;\n\n /**\n * Used to generate a screen reader live update, informing the user of the current element being dropped.\n * @param el the element that has been dropped by the user\n * @returns a string, describing the element that has been dropped\n */\n @Prop() droppedHelperText = (el: Element) =>\n `${this.itemDescriptor(el)} dropped`;\n\n /**\n * Used to generate a screen reader live update, informing the user when items have been reordered.\n * @param el the element that has been reordered by the user\n * @param elements the elements in the sortable list\n * @param position the new position of the dropped element\n * @returns a string, describing the element being dropped\n */\n @Prop() reorderHelperText = (\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}`;\n\n /**\n * A function that should attach a keyboard accessible control.\n * When a `handleSelector` is not used - to allow keyboard accessibility -\n * `createKeyboardHandle` should render a focusable element.\n *\n * If your sortable item is itself focusable,\n * you must use this function to render a control *outside* of the focusable element.\n * @param _number\n * @param _element\n * @returns a function that attaches a keyboard accessible handle control element.\n * The function itself *must* return the handle element.\n */\n @Prop() createKeyboardHandle = (_number: number, _element: Element) => {\n const handleTpl = /* html */ `\n <nano-icon-button\n slot=\"end\"\n icon-name=\"light/arrows\"\n class=\"nano-sortable__keyboard-handle visually-hidden\"\n ></nano-icon-button>`;\n const div = globalThis.document.createElement('div');\n div.innerHTML = handleTpl;\n\n const handle = div.children[0] as HTMLElement;\n _element.append(handle);\n return handle;\n };\n @Watch('createKeyboardHandle')\n handleCreateKeyboardHandleChange() {\n this.refreshKeyboardHandles();\n }\n\n /** use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`.\n * Note that the `sortableHostElement` element css `position` will be set to `relative` */\n @Prop() sortableHostElement?: HTMLElement;\n @Watch('sortableHostElement')\n handleSortableHostElement(_newVal?, oldVal?: HTMLElement) {\n if (oldVal) this.removeEventHandlers(oldVal);\n\n this.addEventHandlers();\n this.refreshKeyboardHandles();\n this.attachMutationObserver();\n\n if (this.sortableHostElement) {\n // sortable host must have position relative\n this.sortableHostElement.style.position = 'relative';\n }\n }\n\n /** Items being sorted will animate into place */\n @Prop() animationEnabled = true;\n\n /** Use this class to change how the element looks whilst being sorted */\n @Prop() draggedClass = 'nano-sortable__dragged';\n\n /** Use this class to change how the handle looks whilst being sorted */\n @Prop() handleDraggedClass = 'nano-sortable__handle-dragged';\n\n /** Use this class to change how the element looks when acting as a placeholder */\n @Prop() placeholderClass = 'nano-sortable__placeholder';\n\n /** Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over */\n @Prop() dropzoneActiveClass?: string = '';\n\n /** The css animation timing applied when `animationEnabled` is `true` */\n @Prop() animationTiming: any = { duration: 200, easing: 'ease-out' };\n\n /** The axis to lock dragging elements to. `undefined` means any axis */\n @Prop() orientation?: 'horizontal' | 'vertical';\n\n /** Dragged items by default, will take whatever default css is applied in situ.\n * When sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'.\n * Apply `dragResize` to read & recreate the dragged items current dimensions when dragged. */\n @Prop() dragResize = false;\n\n /** Fired when an the order changes. Use this to update any underlying data model.\n * `event.preventDefault()` to prevent the element being moved; will revert to original position. */\n @Event() nanoOrderChange: EventEmitter<{\n element: HTMLElement;\n originalIndex: number;\n targetIndex: number;\n }>;\n\n /** Fired when a sortable element is picked-up; via keyboard, mouse or touch.\n * `event.preventDefault()` to prevent the element being picked-up. */\n @Event() nanoGrabbed: EventEmitter<{ element: HTMLElement; index: number }>;\n\n /** Fired when a sortable element is dropped after having been picked up. */\n @Event() nanoDropped: EventEmitter<{ element: HTMLElement }>;\n\n /** If sortable elements change dynamically, use this method to add handle controls to new elements */\n @Method()\n async refreshKeyboardHandles() {\n if (this.handleSelector) {\n if (this.keyboardHandleMap?.size) {\n this.keyboardHandleMap.clear();\n }\n\n this.sortableHost\n .querySelectorAll<HTMLElement>(this.handleSelector)\n .forEach((handle) => {\n if (!handle.getAttribute('aria-describedby'))\n handle.setAttribute('aria-describedby', this.sortableId);\n const sortEle = handle.closest<HTMLElement>(this.itemSelector);\n if (sortEle) this.keyboardHandleMap.set(handle, sortEle);\n });\n return;\n }\n\n if (this.keyboardHandleMap?.size) {\n this.keyboardHandleMap?.forEach((_ele, handle) => handle.remove());\n this.keyboardHandleMap.clear();\n }\n this.sortableHost\n .querySelectorAll<HTMLElement>(this.itemSelector)\n .forEach((ele, i) => {\n const handle = this.createKeyboardHandle(i, ele);\n if (!handle) {\n console.error(\n '`createKeyboardHandle` *must* return the handle element it creates'\n );\n return;\n }\n this.keyboardHandleMap.set(handle, ele);\n handle.setAttribute('aria-describedby', this.sortableId);\n });\n }\n\n /// Private state & logic ///\n\n @Element() host: HTMLNanoSortableElement;\n private dragRequestPending = false;\n private draggedElement?: HTMLElement;\n private draggedElementClone?: HTMLElement;\n private draggedElementOrigin?: HTMLElement;\n private sortableNodes: HTMLElement[] = [];\n private dropzoneNodes: HTMLElement[] = [];\n private animatedElements: HTMLElement[] = [];\n private animationPromise?: Promise<void>;\n private keyboardHandleMap: Map<HTMLElement, HTMLElement> = new Map();\n private sortableId = `nano-sortable-${sortableIds++}`;\n private mouseDownTimer: number;\n private mutationObserver: MutationObserver;\n\n @State() keyboardSortActive = false;\n @State() ariaTextList: string[] = [];\n\n /**\n * Get instance of sortable host.\n * By default it is `nano-sortable` which can be overridden by property `sortableHostElement`\n */\n get sortableHost() {\n if (this.sortableHostElement) return this.sortableHostElement;\n return this.host;\n }\n\n /**\n * Queues aria messages which are then displayed in a 'live' region.\n * Messages are cleared after 10s\n * @param msg aria message to announce\n */\n private addAriaMsg(msg: string) {\n this.ariaTextList = [...this.ariaTextList, msg];\n\n setTimeout(() => {\n const mIdx = this.ariaTextList.indexOf(msg);\n this.ariaTextList.splice(mIdx, 1);\n this.ariaTextList = [...this.ariaTextList];\n }, 10000);\n }\n\n /**\n * Try to stop text highlight whilst dragging\n * @param userSelect\n */\n private updateUserSelectStyle(userSelect: '' | 'none') {\n this.host.style.userSelect = userSelect;\n // @ts-ignore\n this.host.style.MozUserSelect = userSelect;\n // @ts-ignore\n this.host.style.msUserSelect = userSelect;\n this.host.style.webkitUserSelect = userSelect;\n }\n\n /**\n * Fast and simple hit test to check whether the center of a node intersects with the rectangle of any of the\n * given targets. Returns an array of matches.\n * @param node\n * @param targets\n * @returns all the items that currently intersect with the target node\n */\n private hitTest(node: HTMLElement, targets: HTMLElement[]): HTMLElement[] {\n const {\n left: l,\n top: t,\n width: w,\n height: h,\n } = node.getBoundingClientRect();\n const x = l + w / 2;\n const y = t + h / 2;\n\n return targets.filter((item) => {\n const { left, right, top, bottom } = item.getBoundingClientRect();\n return !(x < left || x > right || y < top || y > bottom);\n });\n }\n\n /**\n * Returns a boolean indicating whether the node is currently in an animation.\n * @param node\n * @returns whether a node is currently animating or not\n */\n private isAnimating(node: HTMLElement) {\n return this.animatedElements.indexOf(node) !== -1;\n }\n\n /**\n * Triggers a CSS animation on a node with the given dx and dy. Used following dom updates to make it appear as\n * if nodes animate from their old to their new position in the dom. */\n private animateNode(node: HTMLElement, dx = 0, dy = 0) {\n if (!node.animate) {\n return;\n }\n\n // keep a stack of currently animating nodes to exclude as drag & drop targets.\n this.animatedElements.push(node);\n\n node.style.willChange = 'transform';\n\n // animate from dx/dy (old node position) to none (new node position)\n writeTask(() => {\n this.animationPromise = new Promise((resolve) => {\n node\n .animate(\n [\n { transform: `translate3d(${dx}px, ${dy}px, 0)` },\n { transform: 'none' },\n ],\n this.animationTiming\n )\n .addEventListener(\n 'finish',\n () => {\n const index = this.animatedElements.indexOf(node);\n node.style.willChange = '';\n\n if (index !== -1) {\n // splice out when done to unlock as a valid target\n this.animatedElements.splice(index, 1);\n }\n\n resolve();\n delete this.animationPromise;\n },\n { once: true }\n );\n });\n });\n }\n\n /**\n * Inserts node at target to update sibling sorting. If the node precedes the target, it is inserted after it;\n * If it follows the target, it is inserted before it. This ensures any node can be dragged from the very\n * beginning to the very end and vice versa. The animateNode function is called for all nodes that moved because\n * of this dom update */\n private insertAtTarget(node: Element, target: HTMLElement) {\n if (!node || !target) return;\n\n let offsets: any[] = [];\n if (this.animationEnabled) {\n offsets = this.sortableNodes.map((item) => ({\n x: item.offsetLeft,\n y: item.offsetTop,\n }));\n }\n\n if (!node.isConnected || !target.isConnected) return;\n\n if (this.dropzoneNodes.indexOf(target) > -1) {\n target.append(node);\n } else {\n const nodeComparison = node.compareDocumentPosition(target);\n let position;\n\n if (nodeComparison & this.host.DOCUMENT_POSITION_FOLLOWING) {\n position =\n target.parentNode === node.parentNode ? 'afterend' : 'beforebegin';\n }\n if (nodeComparison & this.host.DOCUMENT_POSITION_PRECEDING) {\n position =\n target.parentNode === node.parentNode ? 'beforebegin' : 'afterend';\n }\n if (position) target.insertAdjacentElement(position, node);\n }\n\n if (this.animationEnabled) {\n this.sortableNodes.forEach((sortableNode, i) => {\n const { x, y } = offsets[i];\n const dx = x - sortableNode.offsetLeft;\n const dy = y - sortableNode.offsetTop;\n if (dx !== 0 || dy !== 0) {\n this.animateNode(sortableNode, dx, dy);\n }\n });\n }\n }\n\n private reset() {\n if (\n this.draggedElementClone !== undefined &&\n this.draggedElementClone.parentNode !== null\n ) {\n this.draggedElementClone.parentNode.removeChild(this.draggedElementClone);\n }\n\n if (\n this.draggedElement &&\n this.draggedElement.parentNode &&\n this.draggedElementOrigin\n ) {\n this.draggedElement.classList.remove(this.placeholderClass);\n }\n\n if (this.dropzoneActiveClass && this.dropzoneNodes.length) {\n this.dropzoneNodes.forEach((dze) =>\n dze.classList.remove(this.dropzoneActiveClass)\n );\n }\n\n delete this.draggedElementClone;\n delete this.draggedElement;\n\n this.dropzoneNodes = [];\n this.sortableNodes = [];\n this.animatedElements = [];\n this.dragRequestPending = false;\n this.updateUserSelectStyle('');\n }\n\n /**\n * Clones a given node to visually drag around. The original node is left in the same flow as its siblings.\n * Clone styles are added onto the style object directly, since the ::slotted()\n * selector can't universally target nodes that may be nested an unknown amount of shadow dom levels deep\n * @param node html node to clone\n * @returns the cloned html node\n */\n private createClone(node: HTMLElement): HTMLElement {\n const clone = node.cloneNode(true) as HTMLElement;\n if (node.id) clone.id = 'clone__' + clone.id;\n\n /**\n * Bugfix for table row sorting.\n * During dragging table rows shrink, so we manually set them width of original node.\n */\n Array.from(clone.children).forEach((nodeChild: HTMLElement, index) => {\n const clonedNodeChild = nodeChild;\n const originalNodeChild = node.children.item(index) as HTMLElement;\n\n if (originalNodeChild) {\n clonedNodeChild.style.width = `${originalNodeChild.offsetWidth}px`;\n }\n });\n const {\n offsetLeft: x,\n offsetTop: y,\n offsetWidth: w,\n offsetHeight: h,\n } = node;\n\n Object.assign(clone.style, {\n position: 'absolute',\n left: `calc(${x}px - var(--grab-offset-x, 0px))`,\n top: `calc(${y}px - var(--grab-offset-y, 0px))`,\n height: this.dragResize ? `${h}px` : undefined,\n width: this.dragResize ? `${w}px` : undefined,\n willChange: 'transform,opacity',\n });\n\n clone.classList.add(this.draggedClass);\n\n return node.parentNode!.appendChild(clone);\n }\n\n /// Event handlers ///\n\n private removeEventHandlers(ele?: HTMLElement) {\n ele = ele || this.sortableHost;\n ele.removeEventListener('mousedown', this.handleTrack);\n ele.removeEventListener('touchstart', this.handleTrack);\n ele.removeEventListener('keydown', this.handleKeydown);\n }\n\n private addEventHandlers(ele?: HTMLElement) {\n ele = ele || this.sortableHost;\n ele.addEventListener('mousedown', this.handleTrack);\n ele.addEventListener('touchstart', this.handleTrack);\n ele.addEventListener('keydown', this.handleKeydown);\n }\n\n /**\n * Watch for any changes in grab-able handle elements.\n */\n private attachMutationObserver() {\n if (!Build.isBrowser) return;\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = undefined;\n }\n\n this.mutationObserver = new MutationObserver(() => {\n const currHandles = Array.from(this.keyboardHandleMap.values());\n const newHandles = Array.from(\n this.sortableHost.querySelectorAll<HTMLElement>(this.itemSelector)\n );\n\n // simple test for equality\n if (\n currHandles.length !== newHandles.length ||\n !!newHandles.find((h) => !currHandles.includes(h))\n ) {\n this.refreshKeyboardHandles();\n }\n });\n this.mutationObserver.observe(this.sortableHost, {\n subtree: true,\n childList: true,\n });\n }\n\n private handleKeydown(e: KeyboardEvent) {\n const targetElement = e.target as HTMLElement;\n let foundHandle: HTMLElement;\n let sortEle: HTMLElement;\n\n if (this.handleSelector) {\n foundHandle = targetElement.closest(this.handleSelector);\n sortEle = targetElement.closest(this.itemSelector);\n } else {\n sortEle = this.keyboardHandleMap.get(targetElement);\n foundHandle = targetElement;\n }\n\n // have we found a handle and matching sort element from the keydown element\n if (!foundHandle || !sortEle) return;\n\n const activateSort = (isActive: boolean) => {\n this.keyboardSortActive = isActive;\n this.draggedElement = isActive ? sortEle : undefined;\n sortEle.classList.toggle(this.draggedClass, isActive);\n foundHandle.classList.toggle(this.handleDraggedClass, isActive);\n\n if (isActive) {\n this.addAriaMsg(this.grabbedHelperText(sortEle));\n document.addEventListener('mousedown', () => activateSort(false), {\n once: true,\n });\n } else {\n this.addAriaMsg(this.droppedHelperText(sortEle));\n }\n };\n\n // start editing this element's order?\n if ([' ', 'Space', 'Enter'].includes(e.key)) {\n e.preventDefault();\n\n if (!this.keyboardSortActive) {\n // grabbed the element\n activateSort(true);\n\n this.sortableNodes =\n Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) ||\n [];\n const nanoGrabbedEv = this.nanoGrabbed.emit({\n element: sortEle,\n index: this.sortableNodes.indexOf(sortEle),\n });\n\n if (nanoGrabbedEv.defaultPrevented) {\n activateSort(false);\n return;\n }\n } else {\n // dropped the element\n activateSort(false);\n this.nanoDropped.emit({ element: sortEle });\n }\n return;\n }\n if (!this.keyboardSortActive) return;\n\n // Tabbing away from this handle - deactivate\n if (['Escape', 'Tab'].includes(e.key)) activateSort(false);\n\n let moveKeys = ['Home', 'End'];\n if (!this.orientation || this.orientation === 'horizontal')\n moveKeys = [...moveKeys, 'ArrowRight', 'ArrowLeft'];\n if (!this.orientation || this.orientation === 'vertical')\n moveKeys = [...moveKeys, 'ArrowUp', 'ArrowDown'];\n\n if (!moveKeys.includes(e.key)) return;\n\n // move the element with the keyboard\n e.preventDefault();\n\n /** Collect all elements that have drag positions.\n * Both sortable elements and 'dropzones' (placeholders where items can always be placed) */\n\n this.sortableNodes =\n Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];\n this.dropzoneNodes =\n Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||\n [];\n const currIdx = this.sortableNodes.indexOf(this.draggedElement);\n let curDzIdx: number = -1;\n\n if (this.dropzoneNodes.length) {\n const curDropzone = this.draggedElement.closest<HTMLElement>(\n this.dropzoneSelector\n );\n curDzIdx = this.dropzoneNodes.indexOf(curDropzone);\n curDzIdx = curDzIdx > -1 ? curDzIdx : -1;\n }\n\n /** If we don't have a next / prev sortable element in our list, test to see if there's a dropzone instead */\n const prevEle =\n currIdx - 1 < 0 && curDzIdx > -1\n ? this.dropzoneNodes[curDzIdx - 1]\n : this.sortableNodes[currIdx - 1];\n const nextEle =\n currIdx + 1 === this.sortableNodes.length && curDzIdx > -1\n ? this.dropzoneNodes[curDzIdx + 1]\n : this.sortableNodes[currIdx + 1];\n\n if (e.key === 'Home') {\n this.insertAtTarget(this.draggedElement, this.sortableNodes[0]);\n }\n if (e.key === 'End') {\n this.insertAtTarget(\n this.draggedElement,\n this.sortableNodes[this.sortableNodes.length - 1]\n );\n }\n if (['ArrowRight', 'ArrowDown'].includes(e.key)) {\n this.insertAtTarget(this.draggedElement, nextEle);\n }\n if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {\n this.insertAtTarget(this.draggedElement, prevEle);\n }\n\n this.finishOrder();\n this.draggedElement = sortEle;\n\n const focus = () => {\n requestAnimationFrame(() => {\n typeof foundHandle['setFocus'] === 'function'\n ? (foundHandle as HTMLNanoIconButtonElement).setFocus()\n : foundHandle.focus();\n });\n };\n\n // replace focus to handle so we don't 'drop' the element\n if (this.animationPromise) this.animationPromise.then(() => focus());\n else focus();\n }\n\n /**\n * Tracks a pointer from touchstart/mousedown to touchend/mouseup. Note that the start state is fired following\n * the first actual move event following a touchstart/mousedown */\n private handleTrack(e: PointerEvent) {\n if (this.dragRequestPending || (e.button && e.button !== 1)) return;\n\n clearTimeout(this.mouseDownTimer);\n this.mouseDownTimer = window?.setTimeout(() => {\n if (!this.trackStart(e)) return;\n\n this.addAriaMsg(this.grabbedHelperText(this.draggedElement));\n\n drag(this.sortableHost, {\n initialEvent: e,\n relative: true,\n onMove: (x, y) => {\n this.trackMove(x, y);\n },\n onStop: () => {\n this.nanoDropped.emit({ element: this.draggedElement });\n\n const didStop = () => {\n this.addAriaMsg(this.droppedHelperText(this.draggedElement));\n requestAnimationFrame(() => this.finishOrder());\n };\n if (this.animationPromise) {\n this.animationPromise.then(() => didStop());\n } else didStop();\n },\n });\n }, 100);\n document.addEventListener(\n 'mouseup',\n () => clearTimeout(this.mouseDownTimer),\n { once: true }\n );\n }\n\n /**\n * Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property.\n * OR If a handleSelector is defined, a node matching this selector must be clicked instead\n * @returns boolean - whether tracking for this event should continue or not\n */\n private trackStart(e: Event) {\n const targetElement = e.target as HTMLElement;\n let targetHandle: HTMLElement;\n\n // If we have a handle set, return now if not being pressed\n if (this.handleSelector) {\n targetHandle = targetElement.closest(this.handleSelector);\n\n if (!targetHandle) return;\n targetHandle.classList.add(this.handleDraggedClass);\n }\n\n // Check that we've found the target element via itemSelector\n const node = targetElement.closest<HTMLElement>(this.itemSelector);\n if (!node) return false;\n\n this.sortableNodes =\n Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];\n const nanoGrabbedEv = this.nanoGrabbed.emit({\n element: node,\n index: this.sortableNodes.indexOf(node),\n });\n if (nanoGrabbedEv.defaultPrevented) return false;\n\n // Element found... start everything\n e.preventDefault();\n this.updateUserSelectStyle('none');\n this.dragRequestPending = true;\n this.draggedElement = node;\n this.dropzoneNodes =\n Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||\n [];\n this.draggedElementClone = this.createClone(node);\n this.draggedElementOrigin = node.nextSibling as HTMLElement;\n this.animatedElements = [];\n this.draggedElement!.classList.add(this.placeholderClass);\n return true;\n }\n\n /** Ends re-ordering */\n private finishOrder() {\n if (!this.draggedElement) return;\n\n const updated = Array.from(\n this.sortableHost.querySelectorAll<HTMLElement>(this.itemSelector)\n ).filter((ele) => ele !== this.draggedElementClone);\n const originalIndex = this.sortableNodes.indexOf(this.draggedElement);\n const targetIndex = updated.indexOf(this.draggedElement);\n\n if (this.handleSelector) {\n const targetHandle = this.draggedElement.querySelector(\n this.handleSelector\n );\n targetHandle.classList.remove(this.handleDraggedClass);\n }\n\n if (originalIndex !== targetIndex) {\n const orderChangeEv = this.nanoOrderChange.emit({\n element: this.draggedElement,\n originalIndex,\n targetIndex,\n });\n\n if (orderChangeEv.defaultPrevented) {\n /** Event was prevented, wait a moment to send element back to whence it came - gives a nicer visual queue */\n this.animationPromise = new Promise((resolve) => {\n setTimeout(() => {\n this.insertAtTarget(this.draggedElement, updated[originalIndex]);\n this.reset();\n this.dragRequestPending = false;\n resolve();\n }, 200);\n });\n return;\n }\n this.addAriaMsg(\n this.reorderHelperText(this.draggedElement, updated, targetIndex + 1)\n );\n }\n\n this.reset();\n this.dragRequestPending = false;\n }\n\n /**\n * Moves the active node's clone to follow the pointer. The node that the clone intersects with (via hitTest) is\n * the insert point for updated sorting */\n private trackMove = (x: number, y: number) => {\n if (!this.draggedElementClone) {\n return;\n }\n\n if (this.orientation) {\n x = x * orientationMap[this.orientation].x;\n y = y * orientationMap[this.orientation].y;\n }\n\n writeTask(() => {\n Object.assign(this.draggedElementClone!.style, {\n transform: `translate3d(${x}px, ${y}px, 0)`,\n });\n });\n\n let target = this.hitTest(this.draggedElementClone!, this.sortableNodes)[0];\n let activeDropzone: HTMLElement;\n\n if (this.dropzoneSelector && this.dropzoneActiveClass) {\n readTask(() => {\n activeDropzone = this.draggedElement.closest(this.dropzoneSelector);\n\n writeTask(() => {\n this.dropzoneNodes\n .filter((dze) => dze !== activeDropzone)\n .forEach((dze) => dze.classList.remove(this.dropzoneActiveClass));\n activeDropzone.classList.add(this.dropzoneActiveClass);\n });\n });\n }\n\n // didn't find a target - let's test to see if we can use a drop-zone instead\n if (!target && this.dropzoneNodes.length) {\n target = this.hitTest(this.draggedElementClone!, this.dropzoneNodes)[0];\n if (this.draggedElement.closest(this.dropzoneSelector) === target) return;\n }\n\n if (\n // if clone intersects with a valid target,\n target &&\n // other than its own origin,\n target !== this.draggedElement &&\n // and the target isn't currently animating, which causes false hit tests,\n !this.isAnimating(target)\n ) {\n this.insertAtTarget(this.draggedElement!, target);\n }\n };\n\n /// Component lifecycle ///\n\n constructor() {\n this.handleTrack = this.handleTrack.bind(this);\n this.handleKeydown = this.handleKeydown.bind(this);\n this.refreshKeyboardHandles = this.refreshKeyboardHandles.bind(this);\n this.refreshKeyboardHandles = nanoDebounce(\n this.refreshKeyboardHandles,\n 500\n );\n }\n\n connectedCallback() {\n this.addEventHandlers();\n this.refreshKeyboardHandles();\n this.attachMutationObserver();\n\n if (Build.isBrowser && !this.host.querySelector(`#${this.sortableId}`)) {\n // inject a light-dom / a11y description that we can connect sortable items to\n this.host.insertAdjacentHTML(\n 'beforeend',\n `<div class=\"visually-hidden\" id=\"${this.sortableId}\">${this.helperText}</div>`\n );\n }\n }\n\n disconnectedCallback() {\n this.removeEventHandlers();\n this.host.querySelector(`#${this.sortableId}`)?.remove();\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = undefined;\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class=\"sortable__live-region\"\n aria-live=\"polite\"\n aria-relevant=\"additions\"\n aria-atomic=\"true\"\n role=\"log\"\n part=\"announcements\"\n >\n {this.ariaTextList.map((str) => (\n <div>{str}</div>\n ))}\n </div>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"nano-sortable.entry.cjs.js","mappings":"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","names":["writeTask","drag","readTask","nanoDebounce","h","Host"],"sources":["./src/components/sortable/sortable.scss?tag=nano-sortable&encapsulation=shadow","./src/components/sortable/sortable.tsx"],"sourcesContent":["@use '../../global/style/utilities/globals' as g;\n\n:host {\n position: relative;\n display: block;\n}\n\n.sortable__live-region {\n @include g.visually-hide();\n}\n","import {\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Component,\n ComponentInterface,\n Watch,\n Method,\n State,\n Host,\n readTask,\n writeTask,\n Build,\n} from '@stencil/core';\nimport { drag } from '../../utils/drag';\nimport { nanoDebounce } from '../..';\n\n// Orientation map to limit dragging to horizontal or vertical.\nconst orientationMap = {\n horizontal: { x: 1, y: 0 },\n vertical: { x: 0, y: 1 },\n};\n\nlet sortableIds = 0;\n\n/**\n * 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)\n\n * @part announcements - the a11y, live region. Visually hidden by default\n *\n * @slot - The default slot containing any items you might want to sort\n */\n@Component({\n tag: 'nano-sortable',\n shadow: true,\n styleUrl: 'sortable.scss',\n})\nexport class Sortable implements ComponentInterface {\n /// Public API & surface ///\n\n /** A css query selector which matches a set of elements that should be sortable. e.g. `<li>` or `<tr>` */\n @Prop() itemSelector = 'li';\n @Watch('itemSelector')\n handleItemSelectorChange() {\n this.refreshKeyboardHandles();\n }\n\n /** A css query selector which matches an element *within* the `itemSelector` element\n * which will act like a drag handle. **Note** For keyboard a11y it's recommended\n * to use `handleSelector` when possible. Alternatively, the `createKeyboardHandle` prop will be used */\n @Prop() handleSelector?: string;\n @Watch('handleSelector')\n handleHandleSelectorChange() {\n this.refreshKeyboardHandles();\n this.attachMutationObserver();\n }\n\n /** When dragging between grouped collections of items, it is possible to drag all sortable items from one group to another.\n * At that point, you will not be able to drag items back to the original group.\n * A `dropzoneSelector` allows you to define a placeholder area where items can always be dropped.\n */\n @Prop() dropzoneSelector?: string;\n\n /** Accessibility helper text applied to handle controls */\n @Prop() helperText =\n 'Press \"Space\" or \"Enter\" to enable element reordering and use the arrow keys to reorder items.' +\n 'Press \"Escape\" to cancel reordering. Alternatively, use your mouse to drag / reorder.';\n\n /**\n * As a sortable element is interacted with, announcements are made to screen readers\n * - informing the user what is changing.\n * By default, the text from the element is extracted to describe the interacted with element.\n * Use this function to provide a more meaningful, concise item descriptor\n * @param el the element being interacted with\n * @returns a string, describing the element being interacted with\n */\n @Prop() itemDescriptor = (el: Element) => `\"${el.textContent.trim()}\"`;\n\n /**\n * Used to generate a screen reader live update, informing the user of the current element being grabbed.\n * @param el the element that has been grabbed by the user\n * @returns a string, describing the element being grabbed\n */\n @Prop() grabbedHelperText = (el: Element) =>\n `${this.itemDescriptor(el)} grabbed`;\n\n /**\n * Used to generate a screen reader live update, informing the user of the current element being dropped.\n * @param el the element that has been dropped by the user\n * @returns a string, describing the element that has been dropped\n */\n @Prop() droppedHelperText = (el: Element) =>\n `${this.itemDescriptor(el)} dropped`;\n\n /**\n * Used to generate a screen reader live update, informing the user when items have been reordered.\n * @param el the element that has been reordered by the user\n * @param elements the elements in the sortable list\n * @param position the new position of the dropped element\n * @returns a string, describing the element being dropped\n */\n @Prop() reorderHelperText = (\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}`;\n\n /**\n * A function that should attach a keyboard accessible control.\n * When a `handleSelector` is not used - to allow keyboard accessibility -\n * `createKeyboardHandle` should render a focusable element.\n *\n * If your sortable item is itself focusable,\n * you must use this function to render a control *outside* of the focusable element.\n * @param _number\n * @param _element\n * @returns a function that attaches a keyboard accessible handle control element.\n * The function itself *must* return the handle element.\n */\n @Prop() createKeyboardHandle = (_number: number, _element: Element) => {\n const handleTpl = /* html */ `\n <nano-icon-button\n slot=\"end\"\n icon-name=\"light/arrows\"\n class=\"nano-sortable__keyboard-handle visually-hidden\"\n label=\"Re-order this item\"\n ></nano-icon-button>`;\n const div = globalThis.document.createElement('div');\n div.innerHTML = handleTpl;\n\n const handle = div.children[0] as HTMLElement;\n _element.append(handle);\n return handle;\n };\n @Watch('createKeyboardHandle')\n handleCreateKeyboardHandleChange() {\n this.refreshKeyboardHandles();\n }\n\n /** use `sortableHostElement` to watch a sortable list without needing to wrap in `nano-sortable`.\n * Note that the `sortableHostElement` element css `position` will be set to `relative` */\n @Prop() sortableHostElement?: HTMLElement;\n @Watch('sortableHostElement')\n handleSortableHostElement(_newVal?, oldVal?: HTMLElement) {\n if (oldVal) this.removeEventHandlers(oldVal);\n\n this.addEventHandlers();\n this.refreshKeyboardHandles();\n this.attachMutationObserver();\n\n if (this.sortableHostElement) {\n // sortable host must have position relative\n this.sortableHostElement.style.position = 'relative';\n }\n }\n\n /** Items being sorted will animate into place */\n @Prop() animationEnabled = true;\n\n /** Use this class to change how the element looks whilst being sorted */\n @Prop() draggedClass = 'nano-sortable__dragged';\n\n /** Use this class to change how the handle looks whilst being sorted */\n @Prop() handleDraggedClass = 'nano-sortable__handle-dragged';\n\n /** Use this class to change how the element looks when acting as a placeholder */\n @Prop() placeholderClass = 'nano-sortable__placeholder';\n\n /** Used in-conjunction with `dropzoneSelector`, applied when a dropzone is dragged over */\n @Prop() dropzoneActiveClass?: string = '';\n\n /** The css animation timing applied when `animationEnabled` is `true` */\n @Prop() animationTiming: any = { duration: 200, easing: 'ease-out' };\n\n /** The axis to lock dragging elements to. `undefined` means any axis */\n @Prop() orientation?: 'horizontal' | 'vertical';\n\n /** Dragged items by default, will take whatever default css is applied in situ.\n * When sortable items' dimensions are dynamic (i.e they can shrink / grow via the space allowed) dragging items can look 'wrong'.\n * Apply `dragResize` to read & recreate the dragged items current dimensions when dragged. */\n @Prop() dragResize = false;\n\n /** Fired when an the order changes. Use this to update any underlying data model.\n * `event.preventDefault()` to prevent the element being moved; will revert to original position. */\n @Event() nanoOrderChange: EventEmitter<{\n element: HTMLElement;\n originalIndex: number;\n targetIndex: number;\n }>;\n\n /** Fired when a sortable element is picked-up; via keyboard, mouse or touch.\n * `event.preventDefault()` to prevent the element being picked-up. */\n @Event() nanoGrabbed: EventEmitter<{ element: HTMLElement; index: number }>;\n\n /** Fired when a sortable element is dropped after having been picked up. */\n @Event() nanoDropped: EventEmitter<{ element: HTMLElement }>;\n\n /** If sortable elements change dynamically, use this method to add handle controls to new elements */\n @Method()\n async refreshKeyboardHandles() {\n if (this.handleSelector) {\n if (this.keyboardHandleMap?.size) {\n this.keyboardHandleMap.clear();\n }\n\n this.sortableHost\n .querySelectorAll<HTMLElement>(this.handleSelector)\n .forEach((handle) => {\n if (!handle.getAttribute('aria-describedby'))\n handle.setAttribute('aria-describedby', this.sortableId);\n const sortEle = handle.closest<HTMLElement>(this.itemSelector);\n if (sortEle) this.keyboardHandleMap.set(handle, sortEle);\n });\n return;\n }\n\n if (this.keyboardHandleMap?.size) {\n this.keyboardHandleMap?.forEach((_ele, handle) => handle.remove());\n this.keyboardHandleMap.clear();\n }\n this.sortableHost\n .querySelectorAll<HTMLElement>(this.itemSelector)\n .forEach((ele, i) => {\n const handle = this.createKeyboardHandle(i, ele);\n if (!handle) {\n console.error(\n '`createKeyboardHandle` *must* return the handle element it creates'\n );\n return;\n }\n this.keyboardHandleMap.set(handle, ele);\n handle.setAttribute('aria-describedby', this.sortableId);\n });\n }\n\n /// Private state & logic ///\n\n @Element() host: HTMLNanoSortableElement;\n private dragRequestPending = false;\n private draggedElement?: HTMLElement;\n private draggedElementClone?: HTMLElement;\n private draggedElementOrigin?: HTMLElement;\n private sortableNodes: HTMLElement[] = [];\n private dropzoneNodes: HTMLElement[] = [];\n private animatedElements: HTMLElement[] = [];\n private animationPromise?: Promise<void>;\n private keyboardHandleMap: Map<HTMLElement, HTMLElement> = new Map();\n private sortableId = `nano-sortable-${sortableIds++}`;\n private mouseDownTimer: number;\n private mutationObserver: MutationObserver;\n\n @State() keyboardSortActive = false;\n @State() ariaTextList: string[] = [];\n\n /**\n * Get instance of sortable host.\n * By default it is `nano-sortable` which can be overridden by property `sortableHostElement`\n */\n get sortableHost() {\n if (this.sortableHostElement) return this.sortableHostElement;\n return this.host;\n }\n\n /**\n * Queues aria messages which are then displayed in a 'live' region.\n * Messages are cleared after 10s\n * @param msg aria message to announce\n */\n private addAriaMsg(msg: string) {\n this.ariaTextList = [...this.ariaTextList, msg];\n\n setTimeout(() => {\n const mIdx = this.ariaTextList.indexOf(msg);\n this.ariaTextList.splice(mIdx, 1);\n this.ariaTextList = [...this.ariaTextList];\n }, 10000);\n }\n\n /**\n * Try to stop text highlight whilst dragging\n * @param userSelect\n */\n private updateUserSelectStyle(userSelect: '' | 'none') {\n this.host.style.userSelect = userSelect;\n // @ts-ignore\n this.host.style.MozUserSelect = userSelect;\n // @ts-ignore\n this.host.style.msUserSelect = userSelect;\n this.host.style.webkitUserSelect = userSelect;\n }\n\n /**\n * Fast and simple hit test to check whether the center of a node intersects with the rectangle of any of the\n * given targets. Returns an array of matches.\n * @param node\n * @param targets\n * @returns all the items that currently intersect with the target node\n */\n private hitTest(node: HTMLElement, targets: HTMLElement[]): HTMLElement[] {\n const {\n left: l,\n top: t,\n width: w,\n height: h,\n } = node.getBoundingClientRect();\n const x = l + w / 2;\n const y = t + h / 2;\n\n return targets.filter((item) => {\n const { left, right, top, bottom } = item.getBoundingClientRect();\n return !(x < left || x > right || y < top || y > bottom);\n });\n }\n\n /**\n * Returns a boolean indicating whether the node is currently in an animation.\n * @param node\n * @returns whether a node is currently animating or not\n */\n private isAnimating(node: HTMLElement) {\n return this.animatedElements.indexOf(node) !== -1;\n }\n\n /**\n * Triggers a CSS animation on a node with the given dx and dy. Used following dom updates to make it appear as\n * if nodes animate from their old to their new position in the dom. */\n private animateNode(node: HTMLElement, dx = 0, dy = 0) {\n if (!node.animate) {\n return;\n }\n\n // keep a stack of currently animating nodes to exclude as drag & drop targets.\n this.animatedElements.push(node);\n\n node.style.willChange = 'transform';\n\n // animate from dx/dy (old node position) to none (new node position)\n writeTask(() => {\n this.animationPromise = new Promise((resolve) => {\n node\n .animate(\n [\n { transform: `translate3d(${dx}px, ${dy}px, 0)` },\n { transform: 'none' },\n ],\n this.animationTiming\n )\n .addEventListener(\n 'finish',\n () => {\n const index = this.animatedElements.indexOf(node);\n node.style.willChange = '';\n\n if (index !== -1) {\n // splice out when done to unlock as a valid target\n this.animatedElements.splice(index, 1);\n }\n\n resolve();\n delete this.animationPromise;\n },\n { once: true }\n );\n });\n });\n }\n\n /**\n * Inserts node at target to update sibling sorting. If the node precedes the target, it is inserted after it;\n * If it follows the target, it is inserted before it. This ensures any node can be dragged from the very\n * beginning to the very end and vice versa. The animateNode function is called for all nodes that moved because\n * of this dom update */\n private insertAtTarget(node: Element, target: HTMLElement) {\n if (!node || !target) return;\n\n let offsets: any[] = [];\n if (this.animationEnabled) {\n offsets = this.sortableNodes.map((item) => ({\n x: item.offsetLeft,\n y: item.offsetTop,\n }));\n }\n\n if (!node.isConnected || !target.isConnected) return;\n\n if (this.dropzoneNodes.indexOf(target) > -1) {\n target.append(node);\n } else {\n const nodeComparison = node.compareDocumentPosition(target);\n let position;\n\n if (nodeComparison & this.host.DOCUMENT_POSITION_FOLLOWING) {\n position =\n target.parentNode === node.parentNode ? 'afterend' : 'beforebegin';\n }\n if (nodeComparison & this.host.DOCUMENT_POSITION_PRECEDING) {\n position =\n target.parentNode === node.parentNode ? 'beforebegin' : 'afterend';\n }\n if (position) target.insertAdjacentElement(position, node);\n }\n\n if (this.animationEnabled) {\n this.sortableNodes.forEach((sortableNode, i) => {\n const { x, y } = offsets[i];\n const dx = x - sortableNode.offsetLeft;\n const dy = y - sortableNode.offsetTop;\n if (dx !== 0 || dy !== 0) {\n this.animateNode(sortableNode, dx, dy);\n }\n });\n }\n }\n\n private reset() {\n if (\n this.draggedElementClone !== undefined &&\n this.draggedElementClone.parentNode !== null\n ) {\n this.draggedElementClone.parentNode.removeChild(this.draggedElementClone);\n }\n\n if (\n this.draggedElement &&\n this.draggedElement.parentNode &&\n this.draggedElementOrigin\n ) {\n this.draggedElement.classList.remove(this.placeholderClass);\n }\n\n if (this.dropzoneActiveClass && this.dropzoneNodes.length) {\n this.dropzoneNodes.forEach((dze) =>\n dze.classList.remove(this.dropzoneActiveClass)\n );\n }\n\n delete this.draggedElementClone;\n delete this.draggedElement;\n\n this.dropzoneNodes = [];\n this.sortableNodes = [];\n this.animatedElements = [];\n this.dragRequestPending = false;\n this.updateUserSelectStyle('');\n }\n\n /**\n * Clones a given node to visually drag around. The original node is left in the same flow as its siblings.\n * Clone styles are added onto the style object directly, since the ::slotted()\n * selector can't universally target nodes that may be nested an unknown amount of shadow dom levels deep\n * @param node html node to clone\n * @returns the cloned html node\n */\n private createClone(node: HTMLElement): HTMLElement {\n const clone = node.cloneNode(true) as HTMLElement;\n if (node.id) clone.id = 'clone__' + clone.id;\n\n /**\n * Bugfix for table row sorting.\n * During dragging table rows shrink, so we manually set them width of original node.\n */\n Array.from(clone.children).forEach((nodeChild: HTMLElement, index) => {\n const clonedNodeChild = nodeChild;\n const originalNodeChild = node.children.item(index) as HTMLElement;\n\n if (originalNodeChild) {\n clonedNodeChild.style.width = `${originalNodeChild.offsetWidth}px`;\n }\n });\n const {\n offsetLeft: x,\n offsetTop: y,\n offsetWidth: w,\n offsetHeight: h,\n } = node;\n\n Object.assign(clone.style, {\n position: 'absolute',\n left: `calc(${x}px - var(--grab-offset-x, 0px))`,\n top: `calc(${y}px - var(--grab-offset-y, 0px))`,\n height: this.dragResize ? `${h}px` : undefined,\n width: this.dragResize ? `${w}px` : undefined,\n willChange: 'transform,opacity',\n });\n\n clone.classList.add(this.draggedClass);\n\n return node.parentNode!.appendChild(clone);\n }\n\n /// Event handlers ///\n\n private removeEventHandlers(ele?: HTMLElement) {\n ele = ele || this.sortableHost;\n ele.removeEventListener('mousedown', this.handleTrack);\n ele.removeEventListener('touchstart', this.handleTrack);\n ele.removeEventListener('keydown', this.handleKeydown);\n }\n\n private addEventHandlers(ele?: HTMLElement) {\n ele = ele || this.sortableHost;\n ele.addEventListener('mousedown', this.handleTrack);\n ele.addEventListener('touchstart', this.handleTrack);\n ele.addEventListener('keydown', this.handleKeydown);\n }\n\n /**\n * Watch for any changes in grab-able handle elements.\n */\n private attachMutationObserver() {\n if (!Build.isBrowser) return;\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = undefined;\n }\n\n this.mutationObserver = new MutationObserver(() => {\n const currHandles = Array.from(this.keyboardHandleMap.values());\n const newHandles = Array.from(\n this.sortableHost.querySelectorAll<HTMLElement>(this.itemSelector)\n );\n\n // simple test for equality\n if (\n currHandles.length !== newHandles.length ||\n !!newHandles.find((h) => !currHandles.includes(h))\n ) {\n this.refreshKeyboardHandles();\n }\n });\n this.mutationObserver.observe(this.sortableHost, {\n subtree: true,\n childList: true,\n });\n }\n\n private handleKeydown(e: KeyboardEvent) {\n const targetElement = e.target as HTMLElement;\n let foundHandle: HTMLElement;\n let sortEle: HTMLElement;\n\n if (this.handleSelector) {\n foundHandle = targetElement.closest(this.handleSelector);\n sortEle = targetElement.closest(this.itemSelector);\n } else {\n sortEle = this.keyboardHandleMap.get(targetElement);\n foundHandle = targetElement;\n }\n\n // have we found a handle and matching sort element from the keydown element\n if (!foundHandle || !sortEle) return;\n\n const activateSort = (isActive: boolean) => {\n this.keyboardSortActive = isActive;\n this.draggedElement = isActive ? sortEle : undefined;\n sortEle.classList.toggle(this.draggedClass, isActive);\n foundHandle.classList.toggle(this.handleDraggedClass, isActive);\n\n if (isActive) {\n this.addAriaMsg(this.grabbedHelperText(sortEle));\n document.addEventListener('mousedown', () => activateSort(false), {\n once: true,\n });\n } else {\n this.addAriaMsg(this.droppedHelperText(sortEle));\n }\n };\n\n // start editing this element's order?\n if ([' ', 'Space', 'Enter'].includes(e.key)) {\n e.preventDefault();\n\n if (!this.keyboardSortActive) {\n // grabbed the element\n activateSort(true);\n\n this.sortableNodes =\n Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) ||\n [];\n const nanoGrabbedEv = this.nanoGrabbed.emit({\n element: sortEle,\n index: this.sortableNodes.indexOf(sortEle),\n });\n\n if (nanoGrabbedEv.defaultPrevented) {\n activateSort(false);\n return;\n }\n } else {\n // dropped the element\n activateSort(false);\n this.nanoDropped.emit({ element: sortEle });\n }\n return;\n }\n if (!this.keyboardSortActive) return;\n\n // Tabbing away from this handle - deactivate\n if (['Escape', 'Tab'].includes(e.key)) activateSort(false);\n\n let moveKeys = ['Home', 'End'];\n if (!this.orientation || this.orientation === 'horizontal')\n moveKeys = [...moveKeys, 'ArrowRight', 'ArrowLeft'];\n if (!this.orientation || this.orientation === 'vertical')\n moveKeys = [...moveKeys, 'ArrowUp', 'ArrowDown'];\n\n if (!moveKeys.includes(e.key)) return;\n\n // move the element with the keyboard\n e.preventDefault();\n\n /** Collect all elements that have drag positions.\n * Both sortable elements and 'dropzones' (placeholders where items can always be placed) */\n\n this.sortableNodes =\n Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];\n this.dropzoneNodes =\n Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||\n [];\n const currIdx = this.sortableNodes.indexOf(this.draggedElement);\n let curDzIdx: number = -1;\n\n if (this.dropzoneNodes.length) {\n const curDropzone = this.draggedElement.closest<HTMLElement>(\n this.dropzoneSelector\n );\n curDzIdx = this.dropzoneNodes.indexOf(curDropzone);\n curDzIdx = curDzIdx > -1 ? curDzIdx : -1;\n }\n\n /** If we don't have a next / prev sortable element in our list, test to see if there's a dropzone instead */\n const prevEle =\n currIdx - 1 < 0 && curDzIdx > -1\n ? this.dropzoneNodes[curDzIdx - 1]\n : this.sortableNodes[currIdx - 1];\n const nextEle =\n currIdx + 1 === this.sortableNodes.length && curDzIdx > -1\n ? this.dropzoneNodes[curDzIdx + 1]\n : this.sortableNodes[currIdx + 1];\n\n if (e.key === 'Home') {\n this.insertAtTarget(this.draggedElement, this.sortableNodes[0]);\n }\n if (e.key === 'End') {\n this.insertAtTarget(\n this.draggedElement,\n this.sortableNodes[this.sortableNodes.length - 1]\n );\n }\n if (['ArrowRight', 'ArrowDown'].includes(e.key)) {\n this.insertAtTarget(this.draggedElement, nextEle);\n }\n if (['ArrowLeft', 'ArrowUp'].includes(e.key)) {\n this.insertAtTarget(this.draggedElement, prevEle);\n }\n\n this.finishOrder();\n this.draggedElement = sortEle;\n\n const focus = () => {\n requestAnimationFrame(() => {\n typeof foundHandle['setFocus'] === 'function'\n ? (foundHandle as HTMLNanoIconButtonElement).setFocus()\n : foundHandle.focus();\n });\n };\n\n // replace focus to handle so we don't 'drop' the element\n if (this.animationPromise) this.animationPromise.then(() => focus());\n else focus();\n }\n\n /**\n * Tracks a pointer from touchstart/mousedown to touchend/mouseup. Note that the start state is fired following\n * the first actual move event following a touchstart/mousedown */\n private handleTrack(e: PointerEvent) {\n if (this.dragRequestPending || (e.button && e.button !== 1)) return;\n\n clearTimeout(this.mouseDownTimer);\n this.mouseDownTimer = window?.setTimeout(() => {\n if (!this.trackStart(e)) return;\n\n this.addAriaMsg(this.grabbedHelperText(this.draggedElement));\n\n drag(this.sortableHost, {\n initialEvent: e,\n relative: true,\n onMove: (x, y) => {\n this.trackMove(x, y);\n },\n onStop: () => {\n this.nanoDropped.emit({ element: this.draggedElement });\n\n const didStop = () => {\n this.addAriaMsg(this.droppedHelperText(this.draggedElement));\n requestAnimationFrame(() => this.finishOrder());\n };\n if (this.animationPromise) {\n this.animationPromise.then(() => didStop());\n } else didStop();\n },\n });\n }, 100);\n document.addEventListener(\n 'mouseup',\n () => clearTimeout(this.mouseDownTimer),\n { once: true }\n );\n }\n\n /**\n * Initialized a drag and drop sequence if a child node was clicked that matches the itemSelector property.\n * OR If a handleSelector is defined, a node matching this selector must be clicked instead\n * @returns boolean - whether tracking for this event should continue or not\n */\n private trackStart(e: Event) {\n const targetElement = e.target as HTMLElement;\n let targetHandle: HTMLElement;\n\n // If we have a handle set, return now if not being pressed\n if (this.handleSelector) {\n targetHandle = targetElement.closest(this.handleSelector);\n\n if (!targetHandle) return;\n targetHandle.classList.add(this.handleDraggedClass);\n }\n\n // Check that we've found the target element via itemSelector\n const node = targetElement.closest<HTMLElement>(this.itemSelector);\n if (!node) return false;\n\n this.sortableNodes =\n Array.from(this.sortableHost.querySelectorAll(this.itemSelector)) || [];\n const nanoGrabbedEv = this.nanoGrabbed.emit({\n element: node,\n index: this.sortableNodes.indexOf(node),\n });\n if (nanoGrabbedEv.defaultPrevented) return false;\n\n // Element found... start everything\n e.preventDefault();\n this.updateUserSelectStyle('none');\n this.dragRequestPending = true;\n this.draggedElement = node;\n this.dropzoneNodes =\n Array.from(this.sortableHost.querySelectorAll(this.dropzoneSelector)) ||\n [];\n this.draggedElementClone = this.createClone(node);\n this.draggedElementOrigin = node.nextSibling as HTMLElement;\n this.animatedElements = [];\n this.draggedElement!.classList.add(this.placeholderClass);\n return true;\n }\n\n /** Ends re-ordering */\n private finishOrder() {\n if (!this.draggedElement) return;\n\n const updated = Array.from(\n this.sortableHost.querySelectorAll<HTMLElement>(this.itemSelector)\n ).filter((ele) => ele !== this.draggedElementClone);\n const originalIndex = this.sortableNodes.indexOf(this.draggedElement);\n const targetIndex = updated.indexOf(this.draggedElement);\n\n if (this.handleSelector) {\n const targetHandle = this.draggedElement.querySelector(\n this.handleSelector\n );\n targetHandle.classList.remove(this.handleDraggedClass);\n }\n\n if (originalIndex !== targetIndex) {\n const orderChangeEv = this.nanoOrderChange.emit({\n element: this.draggedElement,\n originalIndex,\n targetIndex,\n });\n\n if (orderChangeEv.defaultPrevented) {\n /** Event was prevented, wait a moment to send element back to whence it came - gives a nicer visual queue */\n this.animationPromise = new Promise((resolve) => {\n setTimeout(() => {\n this.insertAtTarget(this.draggedElement, updated[originalIndex]);\n this.reset();\n this.dragRequestPending = false;\n resolve();\n }, 200);\n });\n return;\n }\n this.addAriaMsg(\n this.reorderHelperText(this.draggedElement, updated, targetIndex + 1)\n );\n }\n\n this.reset();\n this.dragRequestPending = false;\n }\n\n /**\n * Moves the active node's clone to follow the pointer. The node that the clone intersects with (via hitTest) is\n * the insert point for updated sorting */\n private trackMove = (x: number, y: number) => {\n if (!this.draggedElementClone) {\n return;\n }\n\n if (this.orientation) {\n x = x * orientationMap[this.orientation].x;\n y = y * orientationMap[this.orientation].y;\n }\n\n writeTask(() => {\n Object.assign(this.draggedElementClone!.style, {\n transform: `translate3d(${x}px, ${y}px, 0)`,\n });\n });\n\n let target = this.hitTest(this.draggedElementClone!, this.sortableNodes)[0];\n let activeDropzone: HTMLElement;\n\n if (this.dropzoneSelector && this.dropzoneActiveClass) {\n readTask(() => {\n activeDropzone = this.draggedElement.closest(this.dropzoneSelector);\n\n writeTask(() => {\n this.dropzoneNodes\n .filter((dze) => dze !== activeDropzone)\n .forEach((dze) => dze.classList.remove(this.dropzoneActiveClass));\n activeDropzone.classList.add(this.dropzoneActiveClass);\n });\n });\n }\n\n // didn't find a target - let's test to see if we can use a drop-zone instead\n if (!target && this.dropzoneNodes.length) {\n target = this.hitTest(this.draggedElementClone!, this.dropzoneNodes)[0];\n if (this.draggedElement.closest(this.dropzoneSelector) === target) return;\n }\n\n if (\n // if clone intersects with a valid target,\n target &&\n // other than its own origin,\n target !== this.draggedElement &&\n // and the target isn't currently animating, which causes false hit tests,\n !this.isAnimating(target)\n ) {\n this.insertAtTarget(this.draggedElement!, target);\n }\n };\n\n /// Component lifecycle ///\n\n constructor() {\n this.handleTrack = this.handleTrack.bind(this);\n this.handleKeydown = this.handleKeydown.bind(this);\n this.refreshKeyboardHandles = this.refreshKeyboardHandles.bind(this);\n this.refreshKeyboardHandles = nanoDebounce(\n this.refreshKeyboardHandles,\n 500\n );\n }\n\n connectedCallback() {\n this.addEventHandlers();\n this.refreshKeyboardHandles();\n this.attachMutationObserver();\n\n if (Build.isBrowser && !this.host.querySelector(`#${this.sortableId}`)) {\n // inject a light-dom / a11y description that we can connect sortable items to\n this.host.insertAdjacentHTML(\n 'beforeend',\n `<div class=\"visually-hidden\" id=\"${this.sortableId}\">${this.helperText}</div>`\n );\n }\n }\n\n disconnectedCallback() {\n this.removeEventHandlers();\n this.host.querySelector(`#${this.sortableId}`)?.remove();\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n this.mutationObserver = undefined;\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class=\"sortable__live-region\"\n aria-live=\"polite\"\n aria-relevant=\"additions\"\n aria-atomic=\"true\"\n role=\"log\"\n part=\"announcements\"\n >\n {this.ariaTextList.map((str) => (\n <div>{str}</div>\n ))}\n </div>\n <slot />\n </Host>\n );\n }\n}\n"],"version":3}