@omegagrid/core 0.10.2 → 0.10.4

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 (317) hide show
  1. package/dist/common/actions.d.ts +16 -0
  2. package/dist/common/actions.d.ts.map +1 -0
  3. package/dist/common/actions.js +14 -0
  4. package/dist/common/actions.js.map +1 -0
  5. package/dist/common/colors.d.ts +39 -0
  6. package/dist/common/colors.d.ts.map +1 -0
  7. package/dist/common/colors.js +59 -0
  8. package/dist/common/colors.js.map +1 -0
  9. package/dist/common/csv.d.ts +23 -0
  10. package/dist/common/csv.d.ts.map +1 -0
  11. package/dist/common/csv.js +93 -0
  12. package/dist/common/csv.js.map +1 -0
  13. package/dist/common/dates.d.ts +32 -0
  14. package/dist/common/dates.d.ts.map +1 -0
  15. package/dist/common/dates.js +172 -0
  16. package/dist/common/dates.js.map +1 -0
  17. package/dist/common/device.d.ts +2 -0
  18. package/dist/common/device.d.ts.map +1 -0
  19. package/dist/common/device.js +13 -0
  20. package/dist/common/device.js.map +1 -0
  21. package/dist/common/dom.d.ts +90 -0
  22. package/dist/common/dom.d.ts.map +1 -0
  23. package/dist/common/dom.js +308 -0
  24. package/dist/common/dom.js.map +1 -0
  25. package/dist/common/events.d.ts +15 -0
  26. package/dist/common/events.d.ts.map +1 -0
  27. package/dist/common/events.js +33 -0
  28. package/dist/common/events.js.map +1 -0
  29. package/dist/common/html.d.ts +3 -0
  30. package/dist/common/html.d.ts.map +1 -0
  31. package/dist/common/html.js +25 -0
  32. package/dist/common/html.js.map +1 -0
  33. package/dist/common/index.d.ts +19 -0
  34. package/dist/common/index.d.ts.map +1 -0
  35. package/dist/common/index.js +19 -0
  36. package/dist/common/index.js.map +1 -0
  37. package/dist/common/linkedList.d.ts +24 -0
  38. package/dist/common/linkedList.d.ts.map +1 -0
  39. package/dist/common/linkedList.js +65 -0
  40. package/dist/common/linkedList.js.map +1 -0
  41. package/dist/common/loaders.d.ts +17 -0
  42. package/dist/common/loaders.d.ts.map +1 -0
  43. package/dist/common/loaders.js +54 -0
  44. package/dist/common/loaders.js.map +1 -0
  45. package/dist/common/logger.d.ts +25 -0
  46. package/dist/common/logger.d.ts.map +1 -0
  47. package/dist/common/logger.js +57 -0
  48. package/dist/common/logger.js.map +1 -0
  49. package/dist/common/matrix.d.ts +6 -0
  50. package/dist/common/matrix.d.ts.map +1 -0
  51. package/dist/common/matrix.js +17 -0
  52. package/dist/common/matrix.js.map +1 -0
  53. package/dist/common/numbers.d.ts +26 -0
  54. package/dist/common/numbers.d.ts.map +1 -0
  55. package/dist/common/numbers.js +239 -0
  56. package/dist/common/numbers.js.map +1 -0
  57. package/dist/common/options.d.ts +17 -0
  58. package/dist/common/options.d.ts.map +1 -0
  59. package/dist/common/options.js +29 -0
  60. package/dist/common/options.js.map +1 -0
  61. package/dist/common/paper.d.ts +8 -0
  62. package/dist/common/paper.d.ts.map +1 -0
  63. package/dist/common/paper.js +17 -0
  64. package/dist/common/paper.js.map +1 -0
  65. package/dist/common/shortcutManager.d.ts +17 -0
  66. package/dist/common/shortcutManager.d.ts.map +1 -0
  67. package/dist/common/shortcutManager.js +49 -0
  68. package/dist/common/shortcutManager.js.map +1 -0
  69. package/dist/common/tree.d.ts +87 -0
  70. package/dist/common/tree.d.ts.map +1 -0
  71. package/dist/common/tree.js +204 -0
  72. package/dist/common/tree.js.map +1 -0
  73. package/dist/common/utils.d.ts +30 -0
  74. package/dist/common/utils.d.ts.map +1 -0
  75. package/dist/common/utils.js +136 -0
  76. package/dist/common/utils.js.map +1 -0
  77. package/dist/constants.d.ts +48 -0
  78. package/dist/constants.d.ts.map +1 -0
  79. package/dist/constants.js +24 -0
  80. package/dist/constants.js.map +1 -0
  81. package/dist/index.d.ts +8 -0
  82. package/dist/index.d.ts.map +1 -0
  83. package/dist/index.js +8 -0
  84. package/dist/index.js.map +1 -0
  85. package/dist/model/adapter.d.ts +8 -0
  86. package/dist/model/adapter.d.ts.map +1 -0
  87. package/dist/model/adapter.js +13 -0
  88. package/dist/model/adapter.js.map +1 -0
  89. package/dist/model/component.d.ts +19 -0
  90. package/dist/model/component.d.ts.map +1 -0
  91. package/dist/model/component.js +84 -0
  92. package/dist/model/component.js.map +1 -0
  93. package/dist/model/componentSlice.d.ts +8 -0
  94. package/dist/model/componentSlice.d.ts.map +1 -0
  95. package/dist/model/componentSlice.js +10 -0
  96. package/dist/model/componentSlice.js.map +1 -0
  97. package/dist/model/componentStore.d.ts +12 -0
  98. package/dist/model/componentStore.d.ts.map +1 -0
  99. package/dist/model/componentStore.js +26 -0
  100. package/dist/model/componentStore.js.map +1 -0
  101. package/dist/model/index.d.ts +6 -0
  102. package/dist/model/index.d.ts.map +1 -0
  103. package/dist/model/index.js +6 -0
  104. package/dist/model/index.js.map +1 -0
  105. package/dist/model/plugins.d.ts +13 -0
  106. package/dist/model/plugins.d.ts.map +1 -0
  107. package/dist/model/plugins.js +27 -0
  108. package/dist/model/plugins.js.map +1 -0
  109. package/dist/themes/definitions/tmDark.d.ts +4 -0
  110. package/dist/themes/definitions/tmDark.d.ts.map +1 -0
  111. package/dist/themes/definitions/tmDark.js +83 -0
  112. package/dist/themes/definitions/tmDark.js.map +1 -0
  113. package/dist/themes/definitions/tmLight.d.ts +4 -0
  114. package/dist/themes/definitions/tmLight.d.ts.map +1 -0
  115. package/dist/themes/definitions/tmLight.js +83 -0
  116. package/dist/themes/definitions/tmLight.js.map +1 -0
  117. package/dist/themes/helpers.d.ts +7 -0
  118. package/dist/themes/helpers.d.ts.map +1 -0
  119. package/dist/themes/helpers.js +34 -0
  120. package/dist/themes/helpers.js.map +1 -0
  121. package/dist/themes/index.d.ts +18 -0
  122. package/dist/themes/index.d.ts.map +1 -0
  123. package/dist/themes/index.js +48 -0
  124. package/dist/themes/index.js.map +1 -0
  125. package/dist/themes/mixins.d.ts +10 -0
  126. package/dist/themes/mixins.d.ts.map +1 -0
  127. package/dist/themes/mixins.js +39 -0
  128. package/dist/themes/mixins.js.map +1 -0
  129. package/dist/themes/transformations.d.ts +9 -0
  130. package/dist/themes/transformations.d.ts.map +1 -0
  131. package/dist/themes/transformations.js +48 -0
  132. package/dist/themes/transformations.js.map +1 -0
  133. package/dist/types.d.ts +130 -0
  134. package/dist/types.d.ts.map +1 -0
  135. package/dist/types.js +12 -0
  136. package/dist/types.js.map +1 -0
  137. package/dist/ui/accordion.d.ts +16 -0
  138. package/dist/ui/accordion.d.ts.map +1 -0
  139. package/dist/ui/accordion.js +209 -0
  140. package/dist/ui/accordion.js.map +1 -0
  141. package/dist/ui/alert.d.ts +15 -0
  142. package/dist/ui/alert.d.ts.map +1 -0
  143. package/dist/ui/alert.js +101 -0
  144. package/dist/ui/alert.js.map +1 -0
  145. package/dist/ui/baseElement.d.ts +7 -0
  146. package/dist/ui/baseElement.d.ts.map +1 -0
  147. package/dist/ui/baseElement.js +10 -0
  148. package/dist/ui/baseElement.js.map +1 -0
  149. package/dist/ui/button.d.ts +21 -0
  150. package/dist/ui/button.d.ts.map +1 -0
  151. package/dist/ui/button.js +100 -0
  152. package/dist/ui/button.js.map +1 -0
  153. package/dist/ui/button.style.d.ts +2 -0
  154. package/dist/ui/button.style.d.ts.map +1 -0
  155. package/dist/ui/button.style.js +60 -0
  156. package/dist/ui/button.style.js.map +1 -0
  157. package/dist/ui/checkbox.d.ts +14 -0
  158. package/dist/ui/checkbox.d.ts.map +1 -0
  159. package/dist/ui/checkbox.js +47 -0
  160. package/dist/ui/checkbox.js.map +1 -0
  161. package/dist/ui/close.d.ts +6 -0
  162. package/dist/ui/close.d.ts.map +1 -0
  163. package/dist/ui/close.js +33 -0
  164. package/dist/ui/close.js.map +1 -0
  165. package/dist/ui/colorpicker.d.ts +24 -0
  166. package/dist/ui/colorpicker.d.ts.map +1 -0
  167. package/dist/ui/colorpicker.js +228 -0
  168. package/dist/ui/colorpicker.js.map +1 -0
  169. package/dist/ui/container.d.ts +39 -0
  170. package/dist/ui/container.d.ts.map +1 -0
  171. package/dist/ui/container.js +313 -0
  172. package/dist/ui/container.js.map +1 -0
  173. package/dist/ui/dropdown.d.ts +48 -0
  174. package/dist/ui/dropdown.d.ts.map +1 -0
  175. package/dist/ui/dropdown.js +300 -0
  176. package/dist/ui/dropdown.js.map +1 -0
  177. package/dist/ui/dropdownColorPicker.d.ts +12 -0
  178. package/dist/ui/dropdownColorPicker.d.ts.map +1 -0
  179. package/dist/ui/dropdownColorPicker.js +60 -0
  180. package/dist/ui/dropdownColorPicker.js.map +1 -0
  181. package/dist/ui/dropdownList.d.ts +8 -0
  182. package/dist/ui/dropdownList.d.ts.map +1 -0
  183. package/dist/ui/dropdownList.js +48 -0
  184. package/dist/ui/dropdownList.js.map +1 -0
  185. package/dist/ui/dropdownMenu.d.ts +11 -0
  186. package/dist/ui/dropdownMenu.d.ts.map +1 -0
  187. package/dist/ui/dropdownMenu.js +61 -0
  188. package/dist/ui/dropdownMenu.js.map +1 -0
  189. package/dist/ui/expander.d.ts +28 -0
  190. package/dist/ui/expander.d.ts.map +1 -0
  191. package/dist/ui/expander.js +144 -0
  192. package/dist/ui/expander.js.map +1 -0
  193. package/dist/ui/fileInput.d.ts +24 -0
  194. package/dist/ui/fileInput.d.ts.map +1 -0
  195. package/dist/ui/fileInput.js +130 -0
  196. package/dist/ui/fileInput.js.map +1 -0
  197. package/dist/ui/fileInput.style.d.ts +2 -0
  198. package/dist/ui/fileInput.style.d.ts.map +1 -0
  199. package/dist/ui/fileInput.style.js +73 -0
  200. package/dist/ui/fileInput.style.js.map +1 -0
  201. package/dist/ui/floatingWindow.d.ts +19 -0
  202. package/dist/ui/floatingWindow.d.ts.map +1 -0
  203. package/dist/ui/floatingWindow.js +87 -0
  204. package/dist/ui/floatingWindow.js.map +1 -0
  205. package/dist/ui/icon.d.ts +46 -0
  206. package/dist/ui/icon.d.ts.map +1 -0
  207. package/dist/ui/icon.js +189 -0
  208. package/dist/ui/icon.js.map +1 -0
  209. package/dist/ui/icon.style.d.ts +2 -0
  210. package/dist/ui/icon.style.d.ts.map +1 -0
  211. package/dist/ui/icon.style.js +556 -0
  212. package/dist/ui/icon.style.js.map +1 -0
  213. package/dist/ui/images.d.ts +2 -0
  214. package/dist/ui/images.d.ts.map +1 -0
  215. package/dist/ui/images.js +14 -0
  216. package/dist/ui/images.js.map +1 -0
  217. package/dist/ui/index.d.ts +32 -0
  218. package/dist/ui/index.d.ts.map +1 -0
  219. package/dist/ui/index.js +32 -0
  220. package/dist/ui/index.js.map +1 -0
  221. package/dist/ui/input.d.ts +12 -0
  222. package/dist/ui/input.d.ts.map +1 -0
  223. package/dist/ui/input.js +45 -0
  224. package/dist/ui/input.js.map +1 -0
  225. package/dist/ui/input.style.d.ts +2 -0
  226. package/dist/ui/input.style.d.ts.map +1 -0
  227. package/dist/ui/input.style.js +36 -0
  228. package/dist/ui/input.style.js.map +1 -0
  229. package/dist/ui/label.d.ts +16 -0
  230. package/dist/ui/label.d.ts.map +1 -0
  231. package/dist/ui/label.js +90 -0
  232. package/dist/ui/label.js.map +1 -0
  233. package/dist/ui/list.d.ts +87 -0
  234. package/dist/ui/list.d.ts.map +1 -0
  235. package/dist/ui/list.js +427 -0
  236. package/dist/ui/list.js.map +1 -0
  237. package/dist/ui/list.style.d.ts +2 -0
  238. package/dist/ui/list.style.d.ts.map +1 -0
  239. package/dist/ui/list.style.js +35 -0
  240. package/dist/ui/list.style.js.map +1 -0
  241. package/dist/ui/loader.d.ts +6 -0
  242. package/dist/ui/loader.d.ts.map +1 -0
  243. package/dist/ui/loader.js +25 -0
  244. package/dist/ui/loader.js.map +1 -0
  245. package/dist/ui/menu.d.ts +41 -0
  246. package/dist/ui/menu.d.ts.map +1 -0
  247. package/dist/ui/menu.js +154 -0
  248. package/dist/ui/menu.js.map +1 -0
  249. package/dist/ui/menu.style.d.ts +3 -0
  250. package/dist/ui/menu.style.d.ts.map +1 -0
  251. package/dist/ui/menu.style.js +50 -0
  252. package/dist/ui/menu.style.js.map +1 -0
  253. package/dist/ui/numericInput.d.ts +37 -0
  254. package/dist/ui/numericInput.d.ts.map +1 -0
  255. package/dist/ui/numericInput.js +175 -0
  256. package/dist/ui/numericInput.js.map +1 -0
  257. package/dist/ui/numericInput.style.d.ts +2 -0
  258. package/dist/ui/numericInput.style.d.ts.map +1 -0
  259. package/dist/ui/numericInput.style.js +29 -0
  260. package/dist/ui/numericInput.style.js.map +1 -0
  261. package/dist/ui/overlay.d.ts +17 -0
  262. package/dist/ui/overlay.d.ts.map +1 -0
  263. package/dist/ui/overlay.js +87 -0
  264. package/dist/ui/overlay.js.map +1 -0
  265. package/dist/ui/overlay.style.d.ts +2 -0
  266. package/dist/ui/overlay.style.d.ts.map +1 -0
  267. package/dist/ui/overlay.style.js +46 -0
  268. package/dist/ui/overlay.style.js.map +1 -0
  269. package/dist/ui/panel.d.ts +25 -0
  270. package/dist/ui/panel.d.ts.map +1 -0
  271. package/dist/ui/panel.js +151 -0
  272. package/dist/ui/panel.js.map +1 -0
  273. package/dist/ui/panel.style.d.ts +2 -0
  274. package/dist/ui/panel.style.d.ts.map +1 -0
  275. package/dist/ui/panel.style.js +73 -0
  276. package/dist/ui/panel.style.js.map +1 -0
  277. package/dist/ui/sizer.d.ts +53 -0
  278. package/dist/ui/sizer.d.ts.map +1 -0
  279. package/dist/ui/sizer.js +203 -0
  280. package/dist/ui/sizer.js.map +1 -0
  281. package/dist/ui/slider.d.ts +52 -0
  282. package/dist/ui/slider.d.ts.map +1 -0
  283. package/dist/ui/slider.js +213 -0
  284. package/dist/ui/slider.js.map +1 -0
  285. package/dist/ui/slider.style.d.ts +2 -0
  286. package/dist/ui/slider.style.d.ts.map +1 -0
  287. package/dist/ui/slider.style.js +61 -0
  288. package/dist/ui/slider.style.js.map +1 -0
  289. package/dist/ui/sortableList.d.ts +39 -0
  290. package/dist/ui/sortableList.d.ts.map +1 -0
  291. package/dist/ui/sortableList.js +167 -0
  292. package/dist/ui/sortableList.js.map +1 -0
  293. package/dist/ui/splitContainer.d.ts +52 -0
  294. package/dist/ui/splitContainer.d.ts.map +1 -0
  295. package/dist/ui/splitContainer.js +252 -0
  296. package/dist/ui/splitContainer.js.map +1 -0
  297. package/dist/ui/splitContainer.style.d.ts +2 -0
  298. package/dist/ui/splitContainer.style.d.ts.map +1 -0
  299. package/dist/ui/splitContainer.style.js +62 -0
  300. package/dist/ui/splitContainer.style.js.map +1 -0
  301. package/dist/ui/switch.d.ts +22 -0
  302. package/dist/ui/switch.d.ts.map +1 -0
  303. package/dist/ui/switch.js +83 -0
  304. package/dist/ui/switch.js.map +1 -0
  305. package/dist/ui/switch.style.d.ts +2 -0
  306. package/dist/ui/switch.style.d.ts.map +1 -0
  307. package/dist/ui/switch.style.js +149 -0
  308. package/dist/ui/switch.style.js.map +1 -0
  309. package/dist/ui/tooltip.d.ts +24 -0
  310. package/dist/ui/tooltip.d.ts.map +1 -0
  311. package/dist/ui/tooltip.js +143 -0
  312. package/dist/ui/tooltip.js.map +1 -0
  313. package/dist/ui/tooltip.style.d.ts +2 -0
  314. package/dist/ui/tooltip.style.d.ts.map +1 -0
  315. package/dist/ui/tooltip.style.js +112 -0
  316. package/dist/ui/tooltip.style.js.map +1 -0
  317. package/package.json +2 -2
@@ -0,0 +1,313 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ import * as dom from "../common/dom";
8
+ import { html, css } from 'lit';
9
+ import { customElement, property, query } from 'lit/decorators.js';
10
+ import { SlideEvent } from "./slider";
11
+ import { createRef, ref } from "lit/directives/ref.js";
12
+ import { OmegaComponent } from "../model";
13
+ import constants from "../constants";
14
+ import { styleMap } from "lit-html/directives/style-map.js";
15
+ let Container = class Container extends OmegaComponent {
16
+ constructor() {
17
+ super(...arguments);
18
+ this.overscroll = false;
19
+ this.scrollMode = 'vertical';
20
+ this.sliderSize = 0;
21
+ this.scrollbarPadding = false;
22
+ this.horizontalSliderPosition = 'bottom';
23
+ this.verticalSliderPosition = 'right';
24
+ this.verticalSliderRef = createRef();
25
+ this.horizontalSliderRef = createRef();
26
+ this._mouseIn = false;
27
+ this.render = () => html `
28
+ ${this.createComponent ? html `
29
+ <div class="inner"></div>
30
+ ` : html `
31
+ <div class="inner">
32
+ <slot name="content"></slot>
33
+ </div>
34
+ `}
35
+
36
+ ${this.scrollMode === 'vertical' || this.scrollMode === 'both' ? html `
37
+ <og-slider ${ref(this.verticalSliderRef)}
38
+ style="${styleMap(this.sliderSize > 0 ? { width: `${this.sliderSize}px` } : {})}"
39
+ direction="vertical"
40
+ hidden>
41
+ </og-slider>
42
+ ` : ''}
43
+
44
+ ${this.scrollMode === 'horizontal' || this.scrollMode === 'both' ? html `
45
+ <og-slider ${ref(this.horizontalSliderRef)}
46
+ style="${styleMap(this.sliderSize > 0 ? { height: `${this.sliderSize}px` } : {})}"
47
+ direction="horizontal"
48
+ hidden>
49
+ </og-slider>
50
+ ` : ''}
51
+ `;
52
+ }
53
+ get verticalSlider() { return this.verticalSliderRef.value; }
54
+ get horizontalSlider() { return this.horizontalSliderRef.value; }
55
+ get isScrolling() { return this.verticalSlider?.sliding || this.horizontalSlider?.sliding; }
56
+ fixScrollPosition() {
57
+ if (this.inner.offsetTop < 0) {
58
+ if (this.clientHeight - this.inner.offsetHeight - this.inner.offsetTop > 0) {
59
+ this.scrollVerticalTo(Math.max(0, this.inner.offsetHeight - this.clientHeight));
60
+ }
61
+ }
62
+ }
63
+ connectedCallback() {
64
+ super.connectedCallback();
65
+ this.connectObservers();
66
+ }
67
+ disconnectedCallback() {
68
+ super.disconnectedCallback();
69
+ this.disconnectObservers();
70
+ }
71
+ connectObservers() {
72
+ this.resizeObserver = this.resizeObserver ?? new ResizeObserver(() => {
73
+ this.updateSliders();
74
+ this.fixScrollPosition();
75
+ });
76
+ this.resizeObserver.observe(this);
77
+ if (this.inner)
78
+ this.resizeObserver.observe(this.inner);
79
+ }
80
+ disconnectObservers() {
81
+ this.resizeObserver.disconnect();
82
+ this.resizeObserver = null;
83
+ }
84
+ scrollVerticalByPixels(deltaY) {
85
+ if (this.inner.offsetHeight <= this.clientHeight)
86
+ return false;
87
+ const top = this.scrollHeight > 0
88
+ ? (Math.max(-this.verticalSlider.maxValue, Math.min(0, this.inner.offsetTop - deltaY)) ?? 0)
89
+ : 0;
90
+ if (this.inner.offsetTop === top)
91
+ return false;
92
+ dom.setPosition(this.inner, { t: top });
93
+ this.verticalSlider.value = -top;
94
+ this.classList.toggle('scroll-top-0', top === 0);
95
+ this.dispatchEvent(new SlideEvent('verticalscroll', -top));
96
+ return true;
97
+ }
98
+ scrollVerticalTo(top) {
99
+ if (this.inner) {
100
+ top = Math.min(this.verticalSlider?.maxValue || 0, Math.max(0, top));
101
+ dom.setPosition(this.inner, { t: -top });
102
+ this.classList.toggle('scroll-top-0', top === 0);
103
+ if (this.verticalSlider)
104
+ this.verticalSlider.value = top;
105
+ }
106
+ }
107
+ scrollHorizontalByPixels(deltaX) {
108
+ const left = Math.max(-this.horizontalSliderRef.value.maxValue, Math.min(0, this.inner.offsetLeft - deltaX)) ?? 0;
109
+ if (this.inner.offsetLeft == left)
110
+ return false;
111
+ dom.setPosition(this.inner, { l: left });
112
+ this.horizontalSliderRef.value.value = left;
113
+ return true;
114
+ }
115
+ scrollHorizontalTo(left) {
116
+ if (this.inner) {
117
+ dom.setPosition(this.inner, { l: -left });
118
+ if (this.horizontalSlider)
119
+ this.horizontalSlider.value = left;
120
+ }
121
+ }
122
+ firstUpdated() {
123
+ this.connectObservers();
124
+ this.classList.add('scroll-top-0');
125
+ this.verticalSlider?.hide();
126
+ this.horizontalSlider?.hide();
127
+ this.verticalSlider?.addEventListener('slide', (e) => {
128
+ this.scrollVerticalTo(e.value);
129
+ this.dispatchEvent(new SlideEvent('verticalscroll', e.value));
130
+ });
131
+ this.horizontalSlider?.addEventListener('slide', (e) => {
132
+ this.scrollHorizontalTo(e.value);
133
+ this.dispatchEvent(new SlideEvent('horizontalscroll', e.value));
134
+ });
135
+ this.verticalSlider?.addEventListener('slideEnd', () => {
136
+ this.updateSliders();
137
+ });
138
+ this.addEventListener('mouseenter', () => {
139
+ this._mouseIn = true;
140
+ this.updateSliders();
141
+ });
142
+ this.addEventListener('mouseleave', () => {
143
+ this._mouseIn = false;
144
+ this.updateSliders();
145
+ });
146
+ this.addEventListener('wheel', (e) => {
147
+ if (e.deltaY != 0) {
148
+ if (this.scrollVerticalByPixels(e.deltaY)) {
149
+ e.stopPropagation();
150
+ }
151
+ }
152
+ }, { passive: true });
153
+ this.addEventListener('touchstart', e => {
154
+ this.touchStart = e.touches[0];
155
+ this._mouseIn = true;
156
+ }, { passive: true });
157
+ this.addEventListener('touchend', () => {
158
+ this.touchStart = null;
159
+ this._mouseIn = false;
160
+ this.updateSliders();
161
+ }, { passive: true });
162
+ this.addEventListener('touchmove', (e) => {
163
+ if (this.touchStart) {
164
+ const touch = e.touches[0];
165
+ this.scrollVerticalByPixels(this.touchStart.clientY - touch.clientY);
166
+ this.scrollVerticalByPixels(this.touchStart.clientX - touch.clientX);
167
+ this.updateSliders();
168
+ this.touchStart = touch;
169
+ }
170
+ }, { passive: true });
171
+ }
172
+ async updated() {
173
+ if (this.createComponent) {
174
+ dom.empty(this.inner);
175
+ this.inner.appendChild(await this.createComponent(this.componentId));
176
+ }
177
+ // set absolute poitioning if height is set to allow proper scrolling
178
+ if (this.inner.style.height && this.inner.style.position !== 'absolute') {
179
+ dom.setPosition(this.inner, { t: 0, l: 0 });
180
+ }
181
+ }
182
+ get scrollHeight() {
183
+ return this.inner?.clientHeight - (this.overscroll ? 0 : this.clientHeight);
184
+ }
185
+ get scrollWidth() {
186
+ return this.inner?.clientWidth - this.clientWidth;
187
+ }
188
+ updateSliders() {
189
+ if (this.verticalSliderRef.value) {
190
+ const containerHeight = this.clientHeight;
191
+ if (containerHeight < this.inner.clientHeight) {
192
+ this.verticalSliderRef.value.pageSize = containerHeight;
193
+ this.verticalSliderRef.value.maxValue = this.scrollHeight;
194
+ this.verticalSliderRef.value.requestUpdate();
195
+ if (this._mouseIn || this.verticalSliderRef.value.sliding) {
196
+ this.verticalSliderRef.value.show();
197
+ }
198
+ else {
199
+ this.verticalSliderRef.value.hide();
200
+ }
201
+ }
202
+ else {
203
+ this.verticalSliderRef.value.hide();
204
+ }
205
+ }
206
+ if (this.horizontalSliderRef.value) {
207
+ const containerWidth = this.clientWidth;
208
+ if (containerWidth < this.inner.clientWidth) {
209
+ this.horizontalSliderRef.value.pageSize = containerWidth;
210
+ this.horizontalSliderRef.value.maxValue = this.scrollWidth;
211
+ this.horizontalSliderRef.value.requestUpdate();
212
+ if (this._mouseIn || this.horizontalSliderRef.value.sliding) {
213
+ this.horizontalSliderRef.value.show();
214
+ }
215
+ else {
216
+ this.horizontalSliderRef.value.hide();
217
+ }
218
+ }
219
+ else {
220
+ this.horizontalSliderRef.value.hide();
221
+ }
222
+ }
223
+ }
224
+ };
225
+ Container.styles = css `
226
+ * {
227
+ box-sizing: border-box;
228
+ }
229
+
230
+ :host {
231
+ position: relative;
232
+ display: block;
233
+ overflow: hidden;
234
+ box-shadow: inset 0px 4px 3px -2px var(--og-inset-shadow-color);
235
+ }
236
+
237
+ :host(.scroll-top-0) {
238
+ box-shadow: none;
239
+ }
240
+
241
+ :host([horizontalSliderPosition="top"]) og-slider[direction="horizontal"] {
242
+ left: 0;
243
+ right: 0;
244
+ top: 0;
245
+ bottom: auto;
246
+ }
247
+
248
+ :host([horizontalSliderPosition="left"]) og-slider[direction="vertical"] {
249
+ left: 0;
250
+ right: auto;
251
+ top: 0;
252
+ bottom: 0;
253
+ }
254
+
255
+ og-slider[direction="vertical"] {
256
+ right: 0;
257
+ top: 0;
258
+ bottom: 0;
259
+ }
260
+
261
+ :host([scrollMode="horizontal"]) .inner {
262
+ width: auto;
263
+ min-width: 100%;
264
+ position: absolute;
265
+ top: 0;
266
+ left: 0;
267
+ }
268
+
269
+ :host([scrollMode="vertical"]) .inner,
270
+ :host([scrollMode="both"]) .inner {
271
+ width: 100%;
272
+ }
273
+
274
+ :host([scrollbarPadding]) .inner {
275
+ right: ${constants.SLIDER_SIZE}px;
276
+ }
277
+
278
+ :host([scrollbarPadding]) {
279
+ padding-right: ${constants.SLIDER_SIZE}px;
280
+ }
281
+ `;
282
+ __decorate([
283
+ property({ type: String })
284
+ ], Container.prototype, "componentId", void 0);
285
+ __decorate([
286
+ property({ type: Object })
287
+ ], Container.prototype, "createComponent", void 0);
288
+ __decorate([
289
+ property({ type: Boolean })
290
+ ], Container.prototype, "overscroll", void 0);
291
+ __decorate([
292
+ property({ type: String, reflect: true })
293
+ ], Container.prototype, "scrollMode", void 0);
294
+ __decorate([
295
+ property({ type: Number })
296
+ ], Container.prototype, "sliderSize", void 0);
297
+ __decorate([
298
+ property({ type: Boolean, reflect: true })
299
+ ], Container.prototype, "scrollbarPadding", void 0);
300
+ __decorate([
301
+ property({ type: String, reflect: true })
302
+ ], Container.prototype, "horizontalSliderPosition", void 0);
303
+ __decorate([
304
+ property({ type: String, reflect: true })
305
+ ], Container.prototype, "verticalSliderPosition", void 0);
306
+ __decorate([
307
+ query('.inner')
308
+ ], Container.prototype, "inner", void 0);
309
+ Container = __decorate([
310
+ customElement('og-container')
311
+ ], Container);
312
+ export { Container };
313
+ //# sourceMappingURL=container.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"container.js","sourceRoot":"","sources":["../../src/ui/container.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,KAAK,GAAG,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAU,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,SAAS,EAAO,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAGrD,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,cAAc;IAAtC;;QAmEN,eAAU,GAAG,KAAK,CAAC;QAGnB,eAAU,GAAmC,UAAU,CAAC;QAGxD,eAAU,GAAG,CAAC,CAAC;QAGf,qBAAgB,GAAG,KAAK,CAAC;QAGzB,6BAAwB,GAAqB,QAAQ,CAAC;QAGtD,2BAAsB,GAAuB,OAAO,CAAC;QAK7C,sBAAiB,GAAgB,SAAS,EAAE,CAAC;QAG7C,wBAAmB,GAAgB,SAAS,EAAE,CAAC;QAK/C,aAAQ,GAAG,KAAK,CAAC;QAkJzB,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;IAChB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAA;;GAE5B,CAAC,CAAC,CAAC,IAAI,CAAA;;;;GAIP;;IAEC,IAAI,CAAC,UAAU,KAAK,UAAU,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;gBACvD,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;aAC9B,QAAQ,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,EAAC,KAAK,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;;;;GAI9E,CAAC,CAAC,CAAC,EAAE;;IAEJ,IAAI,CAAC,UAAU,KAAK,YAAY,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAA;gBACzD,GAAG,CAAC,IAAI,CAAC,mBAAmB,CAAC;aAChC,QAAQ,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC,EAAC,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,IAAI,EAAC,CAAC,CAAC,CAAC,EAAE,CAAC;;;;GAI/E,CAAC,CAAC,CAAC,EAAE;EACN,CAAC;IA8CH,CAAC;IA/NA,IAAI,cAAc,KAAK,OAAO,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAA,CAAC,CAAC;IAG5D,IAAI,gBAAgB,KAAK,OAAO,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAA,CAAC,CAAC;IAMhE,IAAI,WAAW,KAAK,OAAO,IAAI,CAAC,cAAc,EAAE,OAAO,IAAI,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC;IAE5F,iBAAiB;QAChB,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC;YAC9B,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC;gBAC5E,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;YACjF,CAAC;QACF,CAAC;IACF,CAAC;IAED,iBAAiB;QAChB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,EAAE,CAAC;IACzB,CAAC;IAED,oBAAoB;QACnB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC5B,CAAC;IAED,gBAAgB;QACf,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,cAAc,IAAI,IAAI,cAAc,CAAC,GAAG,EAAE;YACpE,IAAI,CAAC,aAAa,EAAE,CAAC;YACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAC1B,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAClC,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzD,CAAC;IAED,mBAAmB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;QACjC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC5B,CAAC;IAED,sBAAsB,CAAC,MAAc;QACpC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY;YAAE,OAAO,KAAK,CAAC;QAC/D,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC;YAChC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;YAC5F,CAAC,CAAC,CAAC,CAAC;QAEL,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG;YAAE,OAAO,KAAK,CAAC;QAC/C,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,EAAC,CAAC,EAAE,GAAG,EAAC,CAAC,CAAC;QACtC,IAAI,CAAC,cAAc,CAAC,KAAK,GAAG,CAAC,GAAG,CAAC;QACjC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;QACjD,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,gBAAgB,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;QAC3D,OAAO,IAAI,CAAC;IACb,CAAC;IAED,gBAAgB,CAAC,GAAW;QAC3B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,QAAQ,IAAI,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC;YACrE,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,EAAC,CAAC,EAAE,CAAC,GAAG,EAAC,CAAC,CAAC;YACvC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,cAAc,EAAE,GAAG,KAAK,CAAC,CAAC,CAAC;YACjD,IAAI,IAAI,CAAC,cAAc;gBAAE,IAAI,CAAC,cAAc,CAAC,KAAK,GAAG,GAAG,CAAC;QAC1D,CAAC;IACF,CAAC;IAED,wBAAwB,CAAC,MAAc;QACtC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC;QAClH,IAAI,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI;YAAE,OAAO,KAAK,CAAC;QAChD,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,EAAC,CAAC,EAAE,IAAI,EAAC,CAAC,CAAC;QACvC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;QAC5C,OAAO,IAAI,CAAC;IACb,CAAC;IAED,kBAAkB,CAAC,IAAY;QAC9B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,EAAC,CAAC,EAAE,CAAC,IAAI,EAAC,CAAC,CAAC;YACxC,IAAI,IAAI,CAAC,gBAAgB;gBAAE,IAAI,CAAC,gBAAgB,CAAC,KAAK,GAAG,IAAI,CAAC;QAC/D,CAAC;IACF,CAAC;IAED,YAAY;QACX,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QACnC,IAAI,CAAC,cAAc,EAAE,IAAI,EAAE,CAAC;QAC5B,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,CAAC;QAE9B,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;YAChE,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,gBAAgB,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,EAAE,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAa,EAAE,EAAE;YAClE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;YACjC,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,kBAAkB,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;QACjE,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,cAAc,EAAE,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE;YACtD,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,GAAG,EAAE;YACxC,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACpC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,EAAE,CAAC;gBACnB,IAAI,IAAI,CAAC,sBAAsB,CAAC,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC;oBAC3C,CAAC,CAAC,eAAe,EAAE,CAAC;gBACrB,CAAC;YACF,CAAC;QACF,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAEpB,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE;YACvC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;YAC/B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACtB,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAEpB,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,GAAG,EAAE;YACtC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,aAAa,EAAE,CAAC;QACtB,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;QAEpB,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE;YACpD,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;gBACrB,MAAM,KAAK,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBAC3B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;gBACrE,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;gBACrE,IAAI,CAAC,aAAa,EAAE,CAAC;gBACrB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;YACzB,CAAC;QACF,CAAC,EAAE,EAAC,OAAO,EAAE,IAAI,EAAC,CAAC,CAAC;IACrB,CAAC;IAED,KAAK,CAAC,OAAO;QACZ,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;QACtE,CAAC;QAED,qEAAqE;QACrE,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,KAAK,UAAU,EAAE,CAAC;YACzE,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,EAAE,EAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAC,CAAC,CAAC;QAC3C,CAAC;IACF,CAAC;IA4BD,IAAI,YAAY;QACf,OAAO,IAAI,CAAC,KAAK,EAAE,YAAY,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IAC7E,CAAC;IAED,IAAI,WAAW;QACd,OAAO,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;IACnD,CAAC;IAED,aAAa;QACZ,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;YAClC,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC;YAE1C,IAAI,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC/C,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,GAAG,eAAe,CAAC;gBACxD,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,YAAY,CAAC;gBAC1D,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;gBAC7C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;oBAC3D,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBACrC,CAAC;qBAAM,CAAC;oBACP,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBACrC,CAAC;YACF,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACrC,CAAC;QACF,CAAC;QAED,IAAI,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,CAAC;YACpC,MAAM,cAAc,GAAG,IAAI,CAAC,WAAW,CAAC;YAExC,IAAI,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC;gBAC7C,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,QAAQ,GAAG,cAAc,CAAC;gBACzD,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,QAAQ,GAAG,IAAI,CAAC,WAAW,CAAC;gBAC3D,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;gBAC/C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;oBAC7D,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBACvC,CAAC;qBAAM,CAAC;oBACP,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;gBACvC,CAAC;YACF,CAAC;iBAAM,CAAC;gBACP,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACvC,CAAC;QACF,CAAC;IACF,CAAC;;AAnTM,gBAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAkDR,SAAS,CAAC,WAAW;;;;oBAIb,SAAS,CAAC,WAAW;;EAEvC,AAxDY,CAwDX;AAGF;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;8CACA;AAGzB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDACS;AAGlC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;6CACP;AAGnB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CACgB;AAGxD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACV;AAGf;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mDAChB;AAGzB;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;2DACc;AAGtD;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yDACa;AAGrD;IADC,KAAK,CAAC,QAAQ,CAAC;wCACM;AArFV,SAAS;IADrB,aAAa,CAAC,cAAc,CAAC;GACjB,SAAS,CAuTrB","sourcesContent":["import * as dom from \"../common/dom\";\nimport { html, css } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { SlideEvent, Slider } from \"./slider\";\nimport { createRef, Ref, ref } from \"lit/directives/ref.js\";\nimport { OmegaComponent } from \"../model\";\nimport { ComponentFactory, ComponentId, HorizontalPosition, VerticalPosition } from \"../types\";\nimport constants from \"../constants\";\nimport { styleMap } from \"lit-html/directives/style-map.js\";\n\n@customElement('og-container')\nexport class Container extends OmegaComponent {\n\n\tstatic styles = css`\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t:host {\n\t\t\tposition: relative;\n\t\t\tdisplay: block;\n\t\t\toverflow: hidden;\n\t\t\tbox-shadow: inset 0px 4px 3px -2px var(--og-inset-shadow-color);\n\t\t}\n\n\t\t:host(.scroll-top-0) {\n\t\t\tbox-shadow: none;\n\t\t}\n\n\t\t:host([horizontalSliderPosition=\"top\"]) og-slider[direction=\"horizontal\"] {\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: auto;\n\t\t}\n\n\t\t:host([horizontalSliderPosition=\"left\"]) og-slider[direction=\"vertical\"] {\n\t\t\tleft: 0;\n\t\t\tright: auto;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\tog-slider[direction=\"vertical\"] {\n\t\t\tright: 0;\n\t\t\ttop: 0;\n\t\t\tbottom: 0;\n\t\t}\n\n\t\t:host([scrollMode=\"horizontal\"]) .inner {\n\t\t\twidth: auto;\n\t\t\tmin-width: 100%;\n\t\t\tposition: absolute;\n\t\t\ttop: 0;\n\t\t\tleft: 0;\n\t\t}\n\n\t\t:host([scrollMode=\"vertical\"]) .inner,\n\t\t:host([scrollMode=\"both\"]) .inner {\n\t\t\twidth: 100%;\n\t\t}\n\n\t\t:host([scrollbarPadding]) .inner {\n\t\t\tright: ${constants.SLIDER_SIZE}px;\n\t\t}\n\n\t\t:host([scrollbarPadding]) {\t\n\t\t\tpadding-right: ${constants.SLIDER_SIZE}px;\n\t\t}\n\t`;\n\n\t@property({type: String})\n\tcomponentId: ComponentId;\n\n\t@property({type: Object})\n\tcreateComponent: ComponentFactory;\n\n\t@property({type: Boolean})\n\toverscroll = false;\n\n\t@property({type: String, reflect: true})\n\tscrollMode: 'vertical'|'horizontal'|'both' = 'vertical';\n\n\t@property({type: Number})\n\tsliderSize = 0;\n\n\t@property({type: Boolean, reflect: true})\n\tscrollbarPadding = false;\n\n\t@property({type: String, reflect: true})\n\thorizontalSliderPosition: VerticalPosition = 'bottom';\n\n\t@property({type: String, reflect: true})\n\tverticalSliderPosition: HorizontalPosition = 'right';\n\n\t@query('.inner')\n\tinner: HTMLDivElement;\n\n\tprivate verticalSliderRef: Ref<Slider> = createRef();\n\tget verticalSlider() { return this.verticalSliderRef.value }\n\t\n\tprivate horizontalSliderRef: Ref<Slider> = createRef();\n\tget horizontalSlider() { return this.horizontalSliderRef.value }\n\n\tprivate resizeObserver: ResizeObserver;\n\tprivate touchStart: Touch;\n\tprivate _mouseIn = false;\n\n\tget isScrolling() { return this.verticalSlider?.sliding || this.horizontalSlider?.sliding; }\n\n\tfixScrollPosition() {\n\t\tif (this.inner.offsetTop < 0) {\n\t\t\tif (this.clientHeight - this.inner.offsetHeight - this.inner.offsetTop > 0) {\n\t\t\t\tthis.scrollVerticalTo(Math.max(0, this.inner.offsetHeight - this.clientHeight));\n\t\t\t}\n\t\t}\n\t}\n\t\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.connectObservers();\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.disconnectObservers();\n\t}\n\n\tconnectObservers() {\n\t\tthis.resizeObserver = this.resizeObserver ?? new ResizeObserver(() => {\n\t\t\tthis.updateSliders();\n\t\t\tthis.fixScrollPosition();\n\t\t});\n\n\t\tthis.resizeObserver.observe(this);\n\t\tif (this.inner)\tthis.resizeObserver.observe(this.inner);\n\t}\n\n\tdisconnectObservers() {\n\t\tthis.resizeObserver.disconnect();\n\t\tthis.resizeObserver = null;\n\t}\n\n\tscrollVerticalByPixels(deltaY: number): boolean {\n\t\tif (this.inner.offsetHeight <= this.clientHeight) return false;\n\t\tconst top = this.scrollHeight > 0\n\t\t\t? (Math.max(-this.verticalSlider.maxValue, Math.min(0, this.inner.offsetTop - deltaY)) ?? 0)\n\t\t\t: 0;\n\n\t\tif (this.inner.offsetTop === top) return false;\n\t\tdom.setPosition(this.inner, {t: top});\n\t\tthis.verticalSlider.value = -top;\n\t\tthis.classList.toggle('scroll-top-0', top === 0);\n\t\tthis.dispatchEvent(new SlideEvent('verticalscroll', -top));\n\t\treturn true;\n\t}\n\n\tscrollVerticalTo(top: number) {\n\t\tif (this.inner) {\n\t\t\ttop = Math.min(this.verticalSlider?.maxValue || 0, Math.max(0, top));\n\t\t\tdom.setPosition(this.inner, {t: -top});\n\t\t\tthis.classList.toggle('scroll-top-0', top === 0);\n\t\t\tif (this.verticalSlider) this.verticalSlider.value = top;\n\t\t}\n\t}\n\t\n\tscrollHorizontalByPixels(deltaX: number): boolean {\n\t\tconst left = Math.max(-this.horizontalSliderRef.value.maxValue, Math.min(0, this.inner.offsetLeft - deltaX)) ?? 0;\n\t\tif (this.inner.offsetLeft == left) return false;\n\t\tdom.setPosition(this.inner, {l: left});\n\t\tthis.horizontalSliderRef.value.value = left;\n\t\treturn true;\n\t}\n\t\n\tscrollHorizontalTo(left: number) {\n\t\tif (this.inner) {\n\t\t\tdom.setPosition(this.inner, {l: -left});\n\t\t\tif (this.horizontalSlider) this.horizontalSlider.value = left;\n\t\t}\n\t}\n\t\n\tfirstUpdated() {\n\t\tthis.connectObservers();\n\t\tthis.classList.add('scroll-top-0');\n\t\tthis.verticalSlider?.hide();\n\t\tthis.horizontalSlider?.hide();\n\t\t\n\t\tthis.verticalSlider?.addEventListener('slide', (e: SlideEvent) => {\n\t\t\tthis.scrollVerticalTo(e.value);\n\t\t\tthis.dispatchEvent(new SlideEvent('verticalscroll', e.value));\n\t\t});\n\t\tthis.horizontalSlider?.addEventListener('slide', (e: SlideEvent) => {\n\t\t\tthis.scrollHorizontalTo(e.value);\n\t\t\tthis.dispatchEvent(new SlideEvent('horizontalscroll', e.value));\n\t\t});\n\n\t\tthis.verticalSlider?.addEventListener('slideEnd', () => {\n\t\t\tthis.updateSliders();\n\t\t});\n\n\t\tthis.addEventListener('mouseenter', () => {\n\t\t\tthis._mouseIn = true;\n\t\t\tthis.updateSliders();\n\t\t});\n\n\t\tthis.addEventListener('mouseleave', () => {\n\t\t\tthis._mouseIn = false;\n\t\t\tthis.updateSliders();\n\t\t});\n\n\t\tthis.addEventListener('wheel', (e) => {\n\t\t\tif (e.deltaY != 0) {\n\t\t\t\tif (this.scrollVerticalByPixels(e.deltaY)) {\n\t\t\t\t\te.stopPropagation();\n\t\t\t\t}\n\t\t\t}\n\t\t}, {passive: true});\n\n\t\tthis.addEventListener('touchstart', e => {\n\t\t\tthis.touchStart = e.touches[0];\n\t\t\tthis._mouseIn = true;\n\t\t}, {passive: true});\n\n\t\tthis.addEventListener('touchend', () => {\n\t\t\tthis.touchStart = null;\n\t\t\tthis._mouseIn = false;\n\t\t\tthis.updateSliders();\n\t\t}, {passive: true});\n\n\t\tthis.addEventListener('touchmove', (e: TouchEvent) => {\n\t\t\tif (this.touchStart) {\n\t\t\t\tconst touch = e.touches[0];\n\t\t\t\tthis.scrollVerticalByPixels(this.touchStart.clientY - touch.clientY);\n\t\t\t\tthis.scrollVerticalByPixels(this.touchStart.clientX - touch.clientX);\n\t\t\t\tthis.updateSliders();\n\t\t\t\tthis.touchStart = touch;\n\t\t\t}\n\t\t}, {passive: true});\n\t}\n\n\tasync updated() {\n\t\tif (this.createComponent) {\n\t\t\tdom.empty(this.inner);\n\t\t\tthis.inner.appendChild(await this.createComponent(this.componentId));\n\t\t}\n\n\t\t// set absolute poitioning if height is set to allow proper scrolling\n\t\tif (this.inner.style.height && this.inner.style.position !== 'absolute') {\n\t\t\tdom.setPosition(this.inner, {t: 0, l: 0});\n\t\t}\n\t}\n\n\trender = () => html`\n\t\t${this.createComponent ? html`\n\t\t\t<div class=\"inner\"></div>\n\t\t` : html`\n\t\t\t<div class=\"inner\">\n\t\t\t\t<slot name=\"content\"></slot>\n\t\t\t</div>\n\t\t`}\n\t\t\n\t\t${this.scrollMode === 'vertical' || this.scrollMode === 'both' ? html`\n\t\t\t<og-slider ${ref(this.verticalSliderRef)}\n\t\t\t\tstyle=\"${styleMap(this.sliderSize > 0 ? {width: `${this.sliderSize}px`} : {})}\"\n\t\t\t\tdirection=\"vertical\"\n\t\t\t\thidden>\n\t\t\t</og-slider>\t\n\t\t` : ''}\n\t\t\n\t\t${this.scrollMode === 'horizontal' || this.scrollMode === 'both' ? html`\n\t\t\t<og-slider ${ref(this.horizontalSliderRef)}\n\t\t\t\tstyle=\"${styleMap(this.sliderSize > 0 ? {height: `${this.sliderSize}px`} : {})}\"\n\t\t\t\tdirection=\"horizontal\" \n\t\t\t\thidden>\n\t\t\t</og-slider>\n\t\t` : ''}\n\t`;\n\n\tget scrollHeight() {\n\t\treturn this.inner?.clientHeight - (this.overscroll ? 0 : this.clientHeight);\n\t}\n\n\tget scrollWidth() {\n\t\treturn this.inner?.clientWidth - this.clientWidth;\n\t}\n\n\tupdateSliders() {\n\t\tif (this.verticalSliderRef.value) {\n\t\t\tconst containerHeight = this.clientHeight;\n\t\t\t\n\t\t\tif (containerHeight < this.inner.clientHeight) {\n\t\t\t\tthis.verticalSliderRef.value.pageSize = containerHeight;\n\t\t\t\tthis.verticalSliderRef.value.maxValue = this.scrollHeight;\n\t\t\t\tthis.verticalSliderRef.value.requestUpdate();\n\t\t\t\tif (this._mouseIn || this.verticalSliderRef.value.sliding) {\n\t\t\t\t\tthis.verticalSliderRef.value.show();\n\t\t\t\t} else {\n\t\t\t\t\tthis.verticalSliderRef.value.hide();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.verticalSliderRef.value.hide();\n\t\t\t}\n\t\t}\n\n\t\tif (this.horizontalSliderRef.value) {\n\t\t\tconst containerWidth = this.clientWidth;\n\t\t\t\n\t\t\tif (containerWidth < this.inner.clientWidth) {\n\t\t\t\tthis.horizontalSliderRef.value.pageSize = containerWidth;\n\t\t\t\tthis.horizontalSliderRef.value.maxValue = this.scrollWidth;\n\t\t\t\tthis.horizontalSliderRef.value.requestUpdate();\n\t\t\t\tif (this._mouseIn || this.horizontalSliderRef.value.sliding) {\n\t\t\t\t\tthis.horizontalSliderRef.value.show();\n\t\t\t\t} else {\n\t\t\t\t\tthis.horizontalSliderRef.value.hide();\n\t\t\t\t}\n\t\t\t} else {\n\t\t\t\tthis.horizontalSliderRef.value.hide();\n\t\t\t}\n\t\t}\n\t}\n\n}"]}
@@ -0,0 +1,48 @@
1
+ import { LitElement, TemplateResult } from 'lit';
2
+ import { ColorTypes, Layout, VerticalDirection } from '../types';
3
+ import { IconSpec } from './icon';
4
+ export declare class DropdownEvent extends Event {
5
+ constructor(event: string);
6
+ }
7
+ export declare class DropdownContainer extends LitElement {
8
+ static styles: import("lit").CSSResult;
9
+ color: ColorTypes;
10
+ constructor();
11
+ render: () => TemplateResult<1>;
12
+ }
13
+ export declare class Dropdown extends LitElement implements Layout {
14
+ static styles: import("lit").CSSResult[];
15
+ alignment: 'left' | 'right';
16
+ openDirection: VerticalDirection;
17
+ positionOffset: number;
18
+ dropdownParent: HTMLElement;
19
+ animation: number;
20
+ label: string | HTMLElement | TemplateResult;
21
+ icon: IconSpec | string;
22
+ width: number;
23
+ color: ColorTypes;
24
+ noCaret: boolean;
25
+ disabled: boolean;
26
+ labelElm: HTMLDivElement;
27
+ private _contentElm;
28
+ protected dropdownRef: import("lit-html/directives/ref.js").Ref<DropdownContainer>;
29
+ get dropdown(): DropdownContainer;
30
+ get isOpen(): boolean;
31
+ connectedCallback(): void;
32
+ _onDocumentMouseDown: (e: MouseEvent) => void;
33
+ animateDropdown(seconds: number): void;
34
+ open(): Promise<void>;
35
+ close(): void;
36
+ toggle(): void;
37
+ _onMousedown: () => Promise<void>;
38
+ disconnectedCallback(): void;
39
+ renderDropdown: () => TemplateResult<1>;
40
+ renderLabel: () => import("lit-html/directive").DirectiveResult<typeof import("lit-html/directives/unsafe-html").UnsafeHTMLDirective>;
41
+ get hasLabelSlot(): boolean;
42
+ get hasLabel(): boolean;
43
+ updated(props: Map<string, unknown>): void;
44
+ render: () => TemplateResult<1>;
45
+ get useRadiusFix(): boolean;
46
+ layout(): void;
47
+ }
48
+ //# sourceMappingURL=dropdown.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["../../src/ui/dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,cAAc,EAAE,MAAM,KAAK,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAe,MAAM,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAK9E,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAKlC,qBAAa,aAAc,SAAQ,KAAK;gBAE3B,KAAK,EAAE,MAAM;CAGzB;AAED,qBAEa,iBAAkB,SAAQ,UAAU;IAEhD,MAAM,CAAC,MAAM,0BAuBX;IAGF,KAAK,aAAqB;;IAO1B,MAAM,0BAA6D;CACnE;AAED,qBAEa,QAAS,SAAQ,UAAW,YAAW,MAAM;IAEzD,MAAM,CAAC,MAAM,4BA4CV;IAGH,SAAS,EAAE,MAAM,GAAC,OAAO,CAAW;IAGpC,aAAa,EAAE,iBAAiB,CAAU;IAG1C,cAAc,SAAK;IAGnB,cAAc,EAAE,WAAW,CAAiB;IAG5C,SAAS,SAAO;IAGhB,KAAK,EAAE,MAAM,GAAC,WAAW,GAAC,cAAc,CAAC;IAGzC,IAAI,EAAE,QAAQ,GAAC,MAAM,CAAC;IAGtB,KAAK,EAAE,MAAM,CAAC;IAGd,KAAK,aAAqB;IAG1B,OAAO,UAAS;IAGhB,QAAQ,UAAS;IAGjB,QAAQ,EAAE,cAAc,CAAC;IAEzB,OAAO,CAAC,WAAW,CAAc;IAEjC,SAAS,CAAC,WAAW,8DAAkC;IACvD,IAAI,QAAQ,sBAAqC;IAEjD,IAAI,MAAM,YAA2D;IAErE,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,GAAI,GAAG,UAAU,UAKpC;IAED,eAAe,CAAC,OAAO,EAAE,MAAM;IAYzB,IAAI;IA4BV,KAAK;IAML,MAAM;IAMN,YAAY,sBAA6B;IAEzC,oBAAoB;IAKpB,cAAc,0BAIZ;IAEF,WAAW,2HAMT;IAEF,IAAI,YAAY,YAEf;IAED,IAAI,QAAQ,YAEX;IAED,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAKnC,MAAM,0BAgBJ;IAEF,IAAI,YAAY,YAEf;IAED,MAAM;CA6BN"}