@operato/input 8.0.0 → 9.0.0-beta.10

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 (211) hide show
  1. package/CHANGELOG.md +199 -23
  2. package/dist/src/index.d.ts +1 -0
  3. package/dist/src/index.js +1 -0
  4. package/dist/src/index.js.map +1 -1
  5. package/dist/src/ox-buttons-radio.d.ts +1 -1
  6. package/dist/src/ox-buttons-radio.js +11 -13
  7. package/dist/src/ox-buttons-radio.js.map +1 -1
  8. package/dist/src/ox-checkbox.d.ts +1 -1
  9. package/dist/src/ox-checkbox.js +8 -11
  10. package/dist/src/ox-checkbox.js.map +1 -1
  11. package/dist/src/ox-form-field.js +5 -5
  12. package/dist/src/ox-form-field.js.map +1 -1
  13. package/dist/src/ox-input-3axis.d.ts +1 -1
  14. package/dist/src/ox-input-3axis.js +3 -3
  15. package/dist/src/ox-input-3axis.js.map +1 -1
  16. package/dist/src/ox-input-3dish.d.ts +2 -2
  17. package/dist/src/ox-input-3dish.js +8 -4
  18. package/dist/src/ox-input-3dish.js.map +1 -1
  19. package/dist/src/ox-input-angle.d.ts +1 -1
  20. package/dist/src/ox-input-angle.js +5 -3
  21. package/dist/src/ox-input-angle.js.map +1 -1
  22. package/dist/src/ox-input-barcode.js +26 -7
  23. package/dist/src/ox-input-barcode.js.map +1 -1
  24. package/dist/src/ox-input-code.d.ts +1 -1
  25. package/dist/src/ox-input-code.js +14 -17
  26. package/dist/src/ox-input-code.js.map +1 -1
  27. package/dist/src/ox-input-color-gradient.d.ts +3 -3
  28. package/dist/src/ox-input-color-gradient.js +10 -13
  29. package/dist/src/ox-input-color-gradient.js.map +1 -1
  30. package/dist/src/ox-input-color-stops.d.ts +28 -25
  31. package/dist/src/ox-input-color-stops.js +54 -46
  32. package/dist/src/ox-input-color-stops.js.map +1 -1
  33. package/dist/src/ox-input-color.d.ts +1 -1
  34. package/dist/src/ox-input-color.js +5 -3
  35. package/dist/src/ox-input-color.js.map +1 -1
  36. package/dist/src/ox-input-container.js +1 -0
  37. package/dist/src/ox-input-container.js.map +1 -1
  38. package/dist/src/ox-input-crontab.d.ts +1 -1
  39. package/dist/src/ox-input-crontab.js +11 -7
  40. package/dist/src/ox-input-crontab.js.map +1 -1
  41. package/dist/src/ox-input-data.d.ts +1 -1
  42. package/dist/src/ox-input-data.js +3 -3
  43. package/dist/src/ox-input-data.js.map +1 -1
  44. package/dist/src/ox-input-direction.d.ts +2 -1
  45. package/dist/src/ox-input-direction.js +38 -7
  46. package/dist/src/ox-input-direction.js.map +1 -1
  47. package/dist/src/ox-input-duration.d.ts +1 -1
  48. package/dist/src/ox-input-duration.js +8 -3
  49. package/dist/src/ox-input-duration.js.map +1 -1
  50. package/dist/src/ox-input-file.js +10 -9
  51. package/dist/src/ox-input-file.js.map +1 -1
  52. package/dist/src/ox-input-hashtags.js +6 -7
  53. package/dist/src/ox-input-hashtags.js.map +1 -1
  54. package/dist/src/ox-input-i18n-label.d.ts +1 -1
  55. package/dist/src/ox-input-i18n-label.js +7 -9
  56. package/dist/src/ox-input-i18n-label.js.map +1 -1
  57. package/dist/src/ox-input-image.js +3 -2
  58. package/dist/src/ox-input-image.js.map +1 -1
  59. package/dist/src/ox-input-key-values.d.ts +1 -1
  60. package/dist/src/ox-input-key-values.js +7 -9
  61. package/dist/src/ox-input-key-values.js.map +1 -1
  62. package/dist/src/ox-input-layout/ox-input-card-layout.js +4 -6
  63. package/dist/src/ox-input-layout/ox-input-card-layout.js.map +1 -1
  64. package/dist/src/ox-input-layout/ox-input-grid-layout.js +4 -6
  65. package/dist/src/ox-input-layout/ox-input-grid-layout.js.map +1 -1
  66. package/dist/src/ox-input-layout/ox-input-layout.d.ts +2 -2
  67. package/dist/src/ox-input-layout/ox-input-layout.js +7 -10
  68. package/dist/src/ox-input-layout/ox-input-layout.js.map +1 -1
  69. package/dist/src/ox-input-mass-fraction.d.ts +1 -1
  70. package/dist/src/ox-input-mass-fraction.js +9 -11
  71. package/dist/src/ox-input-mass-fraction.js.map +1 -1
  72. package/dist/src/ox-input-multiple-colors.js +5 -6
  73. package/dist/src/ox-input-multiple-colors.js.map +1 -1
  74. package/dist/src/ox-input-options.d.ts +1 -1
  75. package/dist/src/ox-input-options.js +5 -8
  76. package/dist/src/ox-input-options.js.map +1 -1
  77. package/dist/src/ox-input-partition-keys.d.ts +1 -1
  78. package/dist/src/ox-input-partition-keys.js +6 -8
  79. package/dist/src/ox-input-partition-keys.js.map +1 -1
  80. package/dist/src/ox-input-privilege.d.ts +1 -1
  81. package/dist/src/ox-input-privilege.js +6 -7
  82. package/dist/src/ox-input-privilege.js.map +1 -1
  83. package/dist/src/ox-input-quantifier.js +4 -6
  84. package/dist/src/ox-input-quantifier.js.map +1 -1
  85. package/dist/src/ox-input-range.js +6 -9
  86. package/dist/src/ox-input-range.js.map +1 -1
  87. package/dist/src/ox-input-scene-component-id.d.ts +1 -1
  88. package/dist/src/ox-input-scene-component-id.js +5 -7
  89. package/dist/src/ox-input-scene-component-id.js.map +1 -1
  90. package/dist/src/ox-input-search.d.ts +1 -1
  91. package/dist/src/ox-input-search.js +7 -4
  92. package/dist/src/ox-input-search.js.map +1 -1
  93. package/dist/src/ox-input-select-buttons.d.ts +1 -1
  94. package/dist/src/ox-input-select-buttons.js +6 -9
  95. package/dist/src/ox-input-select-buttons.js.map +1 -1
  96. package/dist/src/ox-input-signature.d.ts +4 -2
  97. package/dist/src/ox-input-signature.js +42 -21
  98. package/dist/src/ox-input-signature.js.map +1 -1
  99. package/dist/src/ox-input-stack.d.ts +1 -1
  100. package/dist/src/ox-input-stack.js +7 -10
  101. package/dist/src/ox-input-stack.js.map +1 -1
  102. package/dist/src/ox-input-switch.d.ts +10 -0
  103. package/dist/src/ox-input-switch.js +122 -0
  104. package/dist/src/ox-input-switch.js.map +1 -0
  105. package/dist/src/ox-input-table-column-config.d.ts +1 -1
  106. package/dist/src/ox-input-table-column-config.js +4 -7
  107. package/dist/src/ox-input-table-column-config.js.map +1 -1
  108. package/dist/src/ox-input-table.d.ts +2 -2
  109. package/dist/src/ox-input-table.js +8 -9
  110. package/dist/src/ox-input-table.js.map +1 -1
  111. package/dist/src/ox-input-textarea.d.ts +1 -1
  112. package/dist/src/ox-input-textarea.js +5 -7
  113. package/dist/src/ox-input-textarea.js.map +1 -1
  114. package/dist/src/ox-input-unit-number.d.ts +1 -1
  115. package/dist/src/ox-input-unit-number.js +8 -3
  116. package/dist/src/ox-input-unit-number.js.map +1 -1
  117. package/dist/src/ox-input-value-map.d.ts +2 -2
  118. package/dist/src/ox-input-value-map.js +9 -11
  119. package/dist/src/ox-input-value-map.js.map +1 -1
  120. package/dist/src/ox-input-value-ranges.d.ts +1 -1
  121. package/dist/src/ox-input-value-ranges.js +8 -10
  122. package/dist/src/ox-input-value-ranges.js.map +1 -1
  123. package/dist/src/ox-input-work-shift.js +4 -7
  124. package/dist/src/ox-input-work-shift.js.map +1 -1
  125. package/dist/src/ox-select-floor.d.ts +35 -0
  126. package/dist/src/ox-select-floor.js +237 -0
  127. package/dist/src/ox-select-floor.js.map +1 -0
  128. package/dist/src/ox-select.js +7 -10
  129. package/dist/src/ox-select.js.map +1 -1
  130. package/dist/stories/image-for-select-floor.d.ts +1 -0
  131. package/dist/stories/image-for-select-floor.js +2 -0
  132. package/dist/stories/image-for-select-floor.js.map +1 -0
  133. package/dist/stories/ox-buttons-radio.stories.js +1 -1
  134. package/dist/stories/ox-buttons-radio.stories.js.map +1 -1
  135. package/dist/stories/ox-checkbox.stories.js +1 -1
  136. package/dist/stories/ox-checkbox.stories.js.map +1 -1
  137. package/dist/stories/ox-input-3axis.stories.js +1 -1
  138. package/dist/stories/ox-input-3axis.stories.js.map +1 -1
  139. package/dist/stories/ox-input-3dish.stories.js +1 -1
  140. package/dist/stories/ox-input-3dish.stories.js.map +1 -1
  141. package/dist/stories/ox-input-angle.stories.js +1 -1
  142. package/dist/stories/ox-input-angle.stories.js.map +1 -1
  143. package/dist/stories/ox-input-barcode.stories.js +1 -1
  144. package/dist/stories/ox-input-barcode.stories.js.map +1 -1
  145. package/dist/stories/ox-input-code.stories.js +1 -1
  146. package/dist/stories/ox-input-code.stories.js.map +1 -1
  147. package/dist/stories/ox-input-crontab.stories.js +1 -1
  148. package/dist/stories/ox-input-crontab.stories.js.map +1 -1
  149. package/dist/stories/ox-input-data.stories.js +1 -1
  150. package/dist/stories/ox-input-data.stories.js.map +1 -1
  151. package/dist/stories/ox-input-direction.stories.js +12 -1
  152. package/dist/stories/ox-input-direction.stories.js.map +1 -1
  153. package/dist/stories/ox-input-duration.stories.js +1 -1
  154. package/dist/stories/ox-input-duration.stories.js.map +1 -1
  155. package/dist/stories/ox-input-file.stories.js +1 -1
  156. package/dist/stories/ox-input-file.stories.js.map +1 -1
  157. package/dist/stories/ox-input-hashtags.stories.js +1 -1
  158. package/dist/stories/ox-input-hashtags.stories.js.map +1 -1
  159. package/dist/stories/ox-input-i18n-label.stories.js +1 -1
  160. package/dist/stories/ox-input-i18n-label.stories.js.map +1 -1
  161. package/dist/stories/ox-input-key-values.stories.js +1 -1
  162. package/dist/stories/ox-input-key-values.stories.js.map +1 -1
  163. package/dist/stories/ox-input-mass-fraction.stories.js +1 -1
  164. package/dist/stories/ox-input-mass-fraction.stories.js.map +1 -1
  165. package/dist/stories/ox-input-multiple-colors.stories.js +1 -1
  166. package/dist/stories/ox-input-multiple-colors.stories.js.map +1 -1
  167. package/dist/stories/ox-input-options.stories.js +1 -1
  168. package/dist/stories/ox-input-options.stories.js.map +1 -1
  169. package/dist/stories/ox-input-partition-keys.stories.js +1 -1
  170. package/dist/stories/ox-input-partition-keys.stories.js.map +1 -1
  171. package/dist/stories/ox-input-privilege.stories.js +1 -1
  172. package/dist/stories/ox-input-privilege.stories.js.map +1 -1
  173. package/dist/stories/ox-input-quantifier.stories.js +1 -1
  174. package/dist/stories/ox-input-quantifier.stories.js.map +1 -1
  175. package/dist/stories/ox-input-range.stories.js +1 -1
  176. package/dist/stories/ox-input-range.stories.js.map +1 -1
  177. package/dist/stories/ox-input-search.stories.js +1 -1
  178. package/dist/stories/ox-input-search.stories.js.map +1 -1
  179. package/dist/stories/ox-input-select-buttons.stories.js +1 -1
  180. package/dist/stories/ox-input-select-buttons.stories.js.map +1 -1
  181. package/dist/stories/ox-input-signature.stories.js +1 -1
  182. package/dist/stories/ox-input-signature.stories.js.map +1 -1
  183. package/dist/stories/ox-input-switch.stories.d.ts +38 -0
  184. package/dist/stories/ox-input-switch.stories.js +68 -0
  185. package/dist/stories/ox-input-switch.stories.js.map +1 -0
  186. package/dist/stories/ox-input-table-column-config.stories.js +1 -1
  187. package/dist/stories/ox-input-table-column-config.stories.js.map +1 -1
  188. package/dist/stories/ox-input-unit.stories.js +1 -1
  189. package/dist/stories/ox-input-unit.stories.js.map +1 -1
  190. package/dist/stories/ox-input-value-map.stories.js +1 -1
  191. package/dist/stories/ox-input-value-map.stories.js.map +1 -1
  192. package/dist/stories/ox-input-value-ranges.stories.js +1 -1
  193. package/dist/stories/ox-input-value-ranges.stories.js.map +1 -1
  194. package/dist/stories/ox-input-work-shift.stories.js +1 -1
  195. package/dist/stories/ox-input-work-shift.stories.js.map +1 -1
  196. package/dist/stories/ox-select-floor.stories.d.ts +45 -0
  197. package/dist/stories/ox-select-floor.stories.js +166 -0
  198. package/dist/stories/ox-select-floor.stories.js.map +1 -0
  199. package/dist/stories/ox-select-set-options.stories.js +1 -1
  200. package/dist/stories/ox-select-set-options.stories.js.map +1 -1
  201. package/dist/stories/ox-select.stories.js +1 -1
  202. package/dist/stories/ox-select.stories.js.map +1 -1
  203. package/dist/tsconfig.tsbuildinfo +1 -1
  204. package/package.json +25 -16
  205. package/assets/images/icon-editor-gradient-direction.png +0 -0
  206. package/assets/images/icon-properties-label.png +0 -0
  207. package/assets/images/icon-properties-line-type.png +0 -0
  208. package/assets/images/icon-properties-table.png +0 -0
  209. package/dist/src/ox-zoomable-image.d.ts +0 -17
  210. package/dist/src/ox-zoomable-image.js +0 -80
  211. package/dist/src/ox-zoomable-image.js.map +0 -1
package/package.json CHANGED
@@ -2,7 +2,8 @@
2
2
  "name": "@operato/input",
3
3
  "description": "Webcomponents for input following open-wc recommendations",
4
4
  "author": "heartyoh@hatiolab.com",
5
- "version": "8.0.0",
5
+ "version": "9.0.0-beta.10",
6
+ "type": "module",
6
7
  "main": "dist/src/index.js",
7
8
  "module": "dist/src/index.js",
8
9
  "license": "MIT",
@@ -42,6 +43,7 @@
42
43
  "./ox-input-key-values.js": "./dist/src/ox-input-key-values.js",
43
44
  "./ox-select.js": "./dist/src/ox-select.js",
44
45
  "./ox-input-file.js": "./dist/src/ox-input-file.js",
46
+ "./ox-input-switch.js": "./dist/src/ox-input-switch.js",
45
47
  "./ox-input-image.js": "./dist/src/ox-input-image.js",
46
48
  "./ox-input-options.js": "./dist/src/ox-input-options.js",
47
49
  "./ox-input-select-buttons.js": "./dist/src/ox-input-select-buttons.js",
@@ -58,6 +60,7 @@
58
60
  "./ox-input-textarea.js": "./dist/src/ox-input-textarea.js",
59
61
  "./ox-input-direction.js": "./dist/src/ox-input-direction.js",
60
62
  "./ox-input-signature.js": "./dist/src/ox-input-signature.js",
63
+ "./ox-select-floor.js": "./dist/src/ox-select-floor.js",
61
64
  "./ox-input-table-column-config.js": "./dist/src/ox-input-table-column-config.js"
62
65
  },
63
66
  "typesVersions": {
@@ -131,6 +134,9 @@
131
134
  "./ox-input-file.js": [
132
135
  "./dist/src/ox-input-file.d.ts"
133
136
  ],
137
+ "./ox-input-switch.js": [
138
+ "./dist/src/ox-input-switch.d.ts"
139
+ ],
134
140
  "./ox-input-image.js": [
135
141
  "./dist/src/ox-input-image.d.ts"
136
142
  ],
@@ -179,6 +185,9 @@
179
185
  "./ox-input-signature.js": [
180
186
  "./dist/src/ox-input-signature.d.ts"
181
187
  ],
188
+ "./ox-select-floor.js": [
189
+ "./dist/src/ox-select-floor.d.ts"
190
+ ],
182
191
  "./ox-input-table-column-config.js": [
183
192
  "./dist/src/ox-input-table-column-config.d.ts"
184
193
  ]
@@ -210,33 +219,33 @@
210
219
  "@ctrl/tinycolor": "^4.1.0",
211
220
  "@lit/localize": "^0.12.1",
212
221
  "@material/web": "^2.0.0",
213
- "@operato/color-picker": "^8.0.0",
214
- "@operato/i18n": "^8.0.0",
215
- "@operato/popup": "^8.0.0",
216
- "@operato/styles": "^8.0.0",
217
- "@operato/utils": "^8.0.0",
222
+ "@operato/color-picker": "^9.0.0-beta.7",
223
+ "@operato/i18n": "^9.0.0-beta.10",
224
+ "@operato/popup": "^9.0.0-beta.10",
225
+ "@operato/styles": "^9.0.0-beta.10",
226
+ "@operato/utils": "^9.0.0-beta.10",
218
227
  "@polymer/paper-dropdown-menu": "^3.2.0",
219
228
  "@polymer/paper-item": "^3.0.1",
220
229
  "@thebespokepixel/es-tinycolor": "^3.1.0",
221
230
  "@types/codemirror": "^5.60.5",
222
- "@undecaf/zbar-wasm": "^0.10.1",
231
+ "@undecaf/zbar-wasm": "^0.11.0",
223
232
  "codemirror": "^6.0.1",
224
233
  "lit": "^3.1.2",
225
234
  "lodash-es": "^4.17.21"
226
235
  },
227
236
  "devDependencies": {
228
- "@custom-elements-manifest/analyzer": "^0.9.2",
237
+ "@custom-elements-manifest/analyzer": "^0.10.0",
229
238
  "@hatiolab/prettier-config": "^1.0.0",
230
239
  "@lit/localize-tools": "^0.7.2",
231
240
  "@open-wc/eslint-config": "^12.0.3",
232
- "@open-wc/testing": "^3.1.6",
233
- "@typescript-eslint/eslint-plugin": "^7.0.1",
234
- "@typescript-eslint/parser": "^7.0.1",
235
- "@web/dev-server": "^0.3.0",
241
+ "@open-wc/testing": "^4.0.0",
242
+ "@typescript-eslint/eslint-plugin": "^8.0.0",
243
+ "@typescript-eslint/parser": "^8.0.0",
244
+ "@web/dev-server": "^0.4.0",
236
245
  "@web/dev-server-storybook": "^2.0.1",
237
- "@web/test-runner": "^0.18.0",
238
- "concurrently": "^8.0.1",
239
- "eslint": "^8.39.0",
246
+ "@web/test-runner": "^0.19.0",
247
+ "concurrently": "^9.0.0",
248
+ "eslint": "^9.0.0",
240
249
  "eslint-config-prettier": "^9.1.0",
241
250
  "husky": "^9.0.11",
242
251
  "lint-staged": "^15.2.2",
@@ -258,5 +267,5 @@
258
267
  "prettier --write"
259
268
  ]
260
269
  },
261
- "gitHead": "180d521a2ca296829122361a45be86e8542ada43"
270
+ "gitHead": "5f56d67c7097c8362e658c78262e6bbec66029cf"
262
271
  }
@@ -1,17 +0,0 @@
1
- import { LitElement } from 'lit';
2
- export declare class OxZoomableImage extends LitElement {
3
- static styles: import("lit").CSSResult;
4
- src: string;
5
- image: HTMLImageElement;
6
- private scale;
7
- private startX;
8
- private startY;
9
- private x;
10
- private y;
11
- private dragging;
12
- render(): import("lit-html").TemplateResult<1>;
13
- private handleWheel;
14
- private handleMouseDown;
15
- private handleMouseMove;
16
- private handleMouseUp;
17
- }
@@ -1,80 +0,0 @@
1
- import { __decorate } from "tslib";
2
- import { LitElement, html, css } from 'lit';
3
- import { customElement, property, query } from 'lit/decorators.js';
4
- let OxZoomableImage = class OxZoomableImage extends LitElement {
5
- constructor() {
6
- super(...arguments);
7
- this.src = '';
8
- this.scale = 1;
9
- this.startX = 0;
10
- this.startY = 0;
11
- this.x = 0;
12
- this.y = 0;
13
- this.dragging = false;
14
- }
15
- static { this.styles = css `
16
- :host {
17
- display: block;
18
- overflow: hidden;
19
- position: relative;
20
- }
21
-
22
- img {
23
- transition: transform 0.25s ease;
24
- transform-origin: center;
25
- cursor: grab;
26
- }
27
- `; }
28
- render() {
29
- return html `
30
- <img
31
- id="zoomableImage"
32
- src="${this.src}"
33
- @wheel="${this.handleWheel}"
34
- @mousedown="${this.handleMouseDown}"
35
- @mousemove="${this.handleMouseMove}"
36
- @mouseup="${this.handleMouseUp}"
37
- @mouseleave="${this.handleMouseUp}"
38
- style="transform: translate(${this.x}px, ${this.y}px) scale(${this.scale});"
39
- />
40
- `;
41
- }
42
- handleWheel(event) {
43
- event.preventDefault();
44
- const delta = event.deltaY;
45
- const zoomIntensity = 0.1;
46
- this.scale += delta > 0 ? -zoomIntensity : zoomIntensity;
47
- this.scale = Math.max(0.1, Math.min(this.scale, 4));
48
- this.requestUpdate();
49
- }
50
- handleMouseDown(event) {
51
- this.startX = event.clientX - this.x;
52
- this.startY = event.clientY - this.y;
53
- this.dragging = true;
54
- const img = this.image;
55
- img.style.cursor = 'grabbing';
56
- }
57
- handleMouseMove(event) {
58
- if (!this.dragging)
59
- return;
60
- this.x = event.clientX - this.startX;
61
- this.y = event.clientY - this.startY;
62
- this.requestUpdate();
63
- }
64
- handleMouseUp() {
65
- this.dragging = false;
66
- const img = this.image;
67
- img.style.cursor = 'grab';
68
- }
69
- };
70
- __decorate([
71
- property({ type: String })
72
- ], OxZoomableImage.prototype, "src", void 0);
73
- __decorate([
74
- query('img')
75
- ], OxZoomableImage.prototype, "image", void 0);
76
- OxZoomableImage = __decorate([
77
- customElement('ox-zoomable-image')
78
- ], OxZoomableImage);
79
- export { OxZoomableImage };
80
- //# sourceMappingURL=ox-zoomable-image.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ox-zoomable-image.js","sourceRoot":"","sources":["../../src/ox-zoomable-image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAG3D,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QAeuB,QAAG,GAAG,EAAE,CAAA;QAI5B,UAAK,GAAW,CAAC,CAAA;QACjB,WAAM,GAAW,CAAC,CAAA;QAClB,WAAM,GAAW,CAAC,CAAA;QAClB,MAAC,GAAW,CAAC,CAAA;QACb,MAAC,GAAW,CAAC,CAAA;QACb,aAAQ,GAAY,KAAK,CAAA;IA8CnC,CAAC;aArEQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;GAYlB,AAZY,CAYZ;IAaD,MAAM;QACJ,OAAO,IAAI,CAAA;;;eAGA,IAAI,CAAC,GAAG;kBACL,IAAI,CAAC,WAAW;sBACZ,IAAI,CAAC,eAAe;sBACpB,IAAI,CAAC,eAAe;oBACtB,IAAI,CAAC,aAAa;uBACf,IAAI,CAAC,aAAa;sCACH,IAAI,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,aAAa,IAAI,CAAC,KAAK;;KAE3E,CAAA;IACH,CAAC;IAEO,WAAW,CAAC,KAAiB;QACnC,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAA;QAC1B,MAAM,aAAa,GAAG,GAAG,CAAA;QACzB,IAAI,CAAC,KAAK,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,aAAa,CAAA;QACxD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,CAAA;QACnD,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAA;QACpC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC,CAAA;QACpC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;QACpB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAyB,CAAA;QAC1C,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,UAAU,CAAA;IAC/B,CAAC;IAEO,eAAe,CAAC,KAAiB;QACvC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAM;QAC1B,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAA;QACpC,IAAI,CAAC,CAAC,GAAG,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAA;QACpC,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAA;QACrB,MAAM,GAAG,GAAG,IAAI,CAAC,KAAyB,CAAA;QAC1C,GAAG,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;IAC3B,CAAC;;AAtD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAS;AAEtB;IAAb,KAAK,CAAC,KAAK,CAAC;8CAAyB;AAjB3B,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CAsE3B","sourcesContent":["import { LitElement, html, css } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('ox-zoomable-image')\nexport class OxZoomableImage extends LitElement {\n static styles = css`\n :host {\n display: block;\n overflow: hidden;\n position: relative;\n }\n\n img {\n transition: transform 0.25s ease;\n transform-origin: center;\n cursor: grab;\n }\n `\n\n @property({ type: String }) src = ''\n\n @query('img') image!: HTMLImageElement\n\n private scale: number = 1\n private startX: number = 0\n private startY: number = 0\n private x: number = 0\n private y: number = 0\n private dragging: boolean = false\n\n render() {\n return html`\n <img\n id=\"zoomableImage\"\n src=\"${this.src}\"\n @wheel=\"${this.handleWheel}\"\n @mousedown=\"${this.handleMouseDown}\"\n @mousemove=\"${this.handleMouseMove}\"\n @mouseup=\"${this.handleMouseUp}\"\n @mouseleave=\"${this.handleMouseUp}\"\n style=\"transform: translate(${this.x}px, ${this.y}px) scale(${this.scale});\"\n />\n `\n }\n\n private handleWheel(event: WheelEvent) {\n event.preventDefault()\n const delta = event.deltaY\n const zoomIntensity = 0.1\n this.scale += delta > 0 ? -zoomIntensity : zoomIntensity\n this.scale = Math.max(0.1, Math.min(this.scale, 4))\n this.requestUpdate()\n }\n\n private handleMouseDown(event: MouseEvent) {\n this.startX = event.clientX - this.x\n this.startY = event.clientY - this.y\n this.dragging = true\n const img = this.image as HTMLImageElement\n img.style.cursor = 'grabbing'\n }\n\n private handleMouseMove(event: MouseEvent) {\n if (!this.dragging) return\n this.x = event.clientX - this.startX\n this.y = event.clientY - this.startY\n this.requestUpdate()\n }\n\n private handleMouseUp() {\n this.dragging = false\n const img = this.image as HTMLImageElement\n img.style.cursor = 'grab'\n }\n}\n"]}