@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.
- package/CHANGELOG.md +199 -23
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/ox-buttons-radio.d.ts +1 -1
- package/dist/src/ox-buttons-radio.js +11 -13
- package/dist/src/ox-buttons-radio.js.map +1 -1
- package/dist/src/ox-checkbox.d.ts +1 -1
- package/dist/src/ox-checkbox.js +8 -11
- package/dist/src/ox-checkbox.js.map +1 -1
- package/dist/src/ox-form-field.js +5 -5
- package/dist/src/ox-form-field.js.map +1 -1
- package/dist/src/ox-input-3axis.d.ts +1 -1
- package/dist/src/ox-input-3axis.js +3 -3
- package/dist/src/ox-input-3axis.js.map +1 -1
- package/dist/src/ox-input-3dish.d.ts +2 -2
- package/dist/src/ox-input-3dish.js +8 -4
- package/dist/src/ox-input-3dish.js.map +1 -1
- package/dist/src/ox-input-angle.d.ts +1 -1
- package/dist/src/ox-input-angle.js +5 -3
- package/dist/src/ox-input-angle.js.map +1 -1
- package/dist/src/ox-input-barcode.js +26 -7
- package/dist/src/ox-input-barcode.js.map +1 -1
- package/dist/src/ox-input-code.d.ts +1 -1
- package/dist/src/ox-input-code.js +14 -17
- package/dist/src/ox-input-code.js.map +1 -1
- package/dist/src/ox-input-color-gradient.d.ts +3 -3
- package/dist/src/ox-input-color-gradient.js +10 -13
- package/dist/src/ox-input-color-gradient.js.map +1 -1
- package/dist/src/ox-input-color-stops.d.ts +28 -25
- package/dist/src/ox-input-color-stops.js +54 -46
- package/dist/src/ox-input-color-stops.js.map +1 -1
- package/dist/src/ox-input-color.d.ts +1 -1
- package/dist/src/ox-input-color.js +5 -3
- package/dist/src/ox-input-color.js.map +1 -1
- package/dist/src/ox-input-container.js +1 -0
- package/dist/src/ox-input-container.js.map +1 -1
- package/dist/src/ox-input-crontab.d.ts +1 -1
- package/dist/src/ox-input-crontab.js +11 -7
- package/dist/src/ox-input-crontab.js.map +1 -1
- package/dist/src/ox-input-data.d.ts +1 -1
- package/dist/src/ox-input-data.js +3 -3
- package/dist/src/ox-input-data.js.map +1 -1
- package/dist/src/ox-input-direction.d.ts +2 -1
- package/dist/src/ox-input-direction.js +38 -7
- package/dist/src/ox-input-direction.js.map +1 -1
- package/dist/src/ox-input-duration.d.ts +1 -1
- package/dist/src/ox-input-duration.js +8 -3
- package/dist/src/ox-input-duration.js.map +1 -1
- package/dist/src/ox-input-file.js +10 -9
- package/dist/src/ox-input-file.js.map +1 -1
- package/dist/src/ox-input-hashtags.js +6 -7
- package/dist/src/ox-input-hashtags.js.map +1 -1
- package/dist/src/ox-input-i18n-label.d.ts +1 -1
- package/dist/src/ox-input-i18n-label.js +7 -9
- package/dist/src/ox-input-i18n-label.js.map +1 -1
- package/dist/src/ox-input-image.js +3 -2
- package/dist/src/ox-input-image.js.map +1 -1
- package/dist/src/ox-input-key-values.d.ts +1 -1
- package/dist/src/ox-input-key-values.js +7 -9
- package/dist/src/ox-input-key-values.js.map +1 -1
- package/dist/src/ox-input-layout/ox-input-card-layout.js +4 -6
- package/dist/src/ox-input-layout/ox-input-card-layout.js.map +1 -1
- package/dist/src/ox-input-layout/ox-input-grid-layout.js +4 -6
- package/dist/src/ox-input-layout/ox-input-grid-layout.js.map +1 -1
- package/dist/src/ox-input-layout/ox-input-layout.d.ts +2 -2
- package/dist/src/ox-input-layout/ox-input-layout.js +7 -10
- package/dist/src/ox-input-layout/ox-input-layout.js.map +1 -1
- package/dist/src/ox-input-mass-fraction.d.ts +1 -1
- package/dist/src/ox-input-mass-fraction.js +9 -11
- package/dist/src/ox-input-mass-fraction.js.map +1 -1
- package/dist/src/ox-input-multiple-colors.js +5 -6
- package/dist/src/ox-input-multiple-colors.js.map +1 -1
- package/dist/src/ox-input-options.d.ts +1 -1
- package/dist/src/ox-input-options.js +5 -8
- package/dist/src/ox-input-options.js.map +1 -1
- package/dist/src/ox-input-partition-keys.d.ts +1 -1
- package/dist/src/ox-input-partition-keys.js +6 -8
- package/dist/src/ox-input-partition-keys.js.map +1 -1
- package/dist/src/ox-input-privilege.d.ts +1 -1
- package/dist/src/ox-input-privilege.js +6 -7
- package/dist/src/ox-input-privilege.js.map +1 -1
- package/dist/src/ox-input-quantifier.js +4 -6
- package/dist/src/ox-input-quantifier.js.map +1 -1
- package/dist/src/ox-input-range.js +6 -9
- package/dist/src/ox-input-range.js.map +1 -1
- package/dist/src/ox-input-scene-component-id.d.ts +1 -1
- package/dist/src/ox-input-scene-component-id.js +5 -7
- package/dist/src/ox-input-scene-component-id.js.map +1 -1
- package/dist/src/ox-input-search.d.ts +1 -1
- package/dist/src/ox-input-search.js +7 -4
- package/dist/src/ox-input-search.js.map +1 -1
- package/dist/src/ox-input-select-buttons.d.ts +1 -1
- package/dist/src/ox-input-select-buttons.js +6 -9
- package/dist/src/ox-input-select-buttons.js.map +1 -1
- package/dist/src/ox-input-signature.d.ts +4 -2
- package/dist/src/ox-input-signature.js +42 -21
- package/dist/src/ox-input-signature.js.map +1 -1
- package/dist/src/ox-input-stack.d.ts +1 -1
- package/dist/src/ox-input-stack.js +7 -10
- package/dist/src/ox-input-stack.js.map +1 -1
- package/dist/src/ox-input-switch.d.ts +10 -0
- package/dist/src/ox-input-switch.js +122 -0
- package/dist/src/ox-input-switch.js.map +1 -0
- package/dist/src/ox-input-table-column-config.d.ts +1 -1
- package/dist/src/ox-input-table-column-config.js +4 -7
- package/dist/src/ox-input-table-column-config.js.map +1 -1
- package/dist/src/ox-input-table.d.ts +2 -2
- package/dist/src/ox-input-table.js +8 -9
- package/dist/src/ox-input-table.js.map +1 -1
- package/dist/src/ox-input-textarea.d.ts +1 -1
- package/dist/src/ox-input-textarea.js +5 -7
- package/dist/src/ox-input-textarea.js.map +1 -1
- package/dist/src/ox-input-unit-number.d.ts +1 -1
- package/dist/src/ox-input-unit-number.js +8 -3
- package/dist/src/ox-input-unit-number.js.map +1 -1
- package/dist/src/ox-input-value-map.d.ts +2 -2
- package/dist/src/ox-input-value-map.js +9 -11
- package/dist/src/ox-input-value-map.js.map +1 -1
- package/dist/src/ox-input-value-ranges.d.ts +1 -1
- package/dist/src/ox-input-value-ranges.js +8 -10
- package/dist/src/ox-input-value-ranges.js.map +1 -1
- package/dist/src/ox-input-work-shift.js +4 -7
- package/dist/src/ox-input-work-shift.js.map +1 -1
- package/dist/src/ox-select-floor.d.ts +35 -0
- package/dist/src/ox-select-floor.js +237 -0
- package/dist/src/ox-select-floor.js.map +1 -0
- package/dist/src/ox-select.js +7 -10
- package/dist/src/ox-select.js.map +1 -1
- package/dist/stories/image-for-select-floor.d.ts +1 -0
- package/dist/stories/image-for-select-floor.js +2 -0
- package/dist/stories/image-for-select-floor.js.map +1 -0
- package/dist/stories/ox-buttons-radio.stories.js +1 -1
- package/dist/stories/ox-buttons-radio.stories.js.map +1 -1
- package/dist/stories/ox-checkbox.stories.js +1 -1
- package/dist/stories/ox-checkbox.stories.js.map +1 -1
- package/dist/stories/ox-input-3axis.stories.js +1 -1
- package/dist/stories/ox-input-3axis.stories.js.map +1 -1
- package/dist/stories/ox-input-3dish.stories.js +1 -1
- package/dist/stories/ox-input-3dish.stories.js.map +1 -1
- package/dist/stories/ox-input-angle.stories.js +1 -1
- package/dist/stories/ox-input-angle.stories.js.map +1 -1
- package/dist/stories/ox-input-barcode.stories.js +1 -1
- package/dist/stories/ox-input-barcode.stories.js.map +1 -1
- package/dist/stories/ox-input-code.stories.js +1 -1
- package/dist/stories/ox-input-code.stories.js.map +1 -1
- package/dist/stories/ox-input-crontab.stories.js +1 -1
- package/dist/stories/ox-input-crontab.stories.js.map +1 -1
- package/dist/stories/ox-input-data.stories.js +1 -1
- package/dist/stories/ox-input-data.stories.js.map +1 -1
- package/dist/stories/ox-input-direction.stories.js +12 -1
- package/dist/stories/ox-input-direction.stories.js.map +1 -1
- package/dist/stories/ox-input-duration.stories.js +1 -1
- package/dist/stories/ox-input-duration.stories.js.map +1 -1
- package/dist/stories/ox-input-file.stories.js +1 -1
- package/dist/stories/ox-input-file.stories.js.map +1 -1
- package/dist/stories/ox-input-hashtags.stories.js +1 -1
- package/dist/stories/ox-input-hashtags.stories.js.map +1 -1
- package/dist/stories/ox-input-i18n-label.stories.js +1 -1
- package/dist/stories/ox-input-i18n-label.stories.js.map +1 -1
- package/dist/stories/ox-input-key-values.stories.js +1 -1
- package/dist/stories/ox-input-key-values.stories.js.map +1 -1
- package/dist/stories/ox-input-mass-fraction.stories.js +1 -1
- package/dist/stories/ox-input-mass-fraction.stories.js.map +1 -1
- package/dist/stories/ox-input-multiple-colors.stories.js +1 -1
- package/dist/stories/ox-input-multiple-colors.stories.js.map +1 -1
- package/dist/stories/ox-input-options.stories.js +1 -1
- package/dist/stories/ox-input-options.stories.js.map +1 -1
- package/dist/stories/ox-input-partition-keys.stories.js +1 -1
- package/dist/stories/ox-input-partition-keys.stories.js.map +1 -1
- package/dist/stories/ox-input-privilege.stories.js +1 -1
- package/dist/stories/ox-input-privilege.stories.js.map +1 -1
- package/dist/stories/ox-input-quantifier.stories.js +1 -1
- package/dist/stories/ox-input-quantifier.stories.js.map +1 -1
- package/dist/stories/ox-input-range.stories.js +1 -1
- package/dist/stories/ox-input-range.stories.js.map +1 -1
- package/dist/stories/ox-input-search.stories.js +1 -1
- package/dist/stories/ox-input-search.stories.js.map +1 -1
- package/dist/stories/ox-input-select-buttons.stories.js +1 -1
- package/dist/stories/ox-input-select-buttons.stories.js.map +1 -1
- package/dist/stories/ox-input-signature.stories.js +1 -1
- package/dist/stories/ox-input-signature.stories.js.map +1 -1
- package/dist/stories/ox-input-switch.stories.d.ts +38 -0
- package/dist/stories/ox-input-switch.stories.js +68 -0
- package/dist/stories/ox-input-switch.stories.js.map +1 -0
- package/dist/stories/ox-input-table-column-config.stories.js +1 -1
- package/dist/stories/ox-input-table-column-config.stories.js.map +1 -1
- package/dist/stories/ox-input-unit.stories.js +1 -1
- package/dist/stories/ox-input-unit.stories.js.map +1 -1
- package/dist/stories/ox-input-value-map.stories.js +1 -1
- package/dist/stories/ox-input-value-map.stories.js.map +1 -1
- package/dist/stories/ox-input-value-ranges.stories.js +1 -1
- package/dist/stories/ox-input-value-ranges.stories.js.map +1 -1
- package/dist/stories/ox-input-work-shift.stories.js +1 -1
- package/dist/stories/ox-input-work-shift.stories.js.map +1 -1
- package/dist/stories/ox-select-floor.stories.d.ts +45 -0
- package/dist/stories/ox-select-floor.stories.js +166 -0
- package/dist/stories/ox-select-floor.stories.js.map +1 -0
- package/dist/stories/ox-select-set-options.stories.js +1 -1
- package/dist/stories/ox-select-set-options.stories.js.map +1 -1
- package/dist/stories/ox-select.stories.js +1 -1
- package/dist/stories/ox-select.stories.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +25 -16
- package/assets/images/icon-editor-gradient-direction.png +0 -0
- package/assets/images/icon-properties-label.png +0 -0
- package/assets/images/icon-properties-line-type.png +0 -0
- package/assets/images/icon-properties-table.png +0 -0
- package/dist/src/ox-zoomable-image.d.ts +0 -17
- package/dist/src/ox-zoomable-image.js +0 -80
- 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": "
|
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": "^
|
214
|
-
"@operato/i18n": "^
|
215
|
-
"@operato/popup": "^
|
216
|
-
"@operato/styles": "^
|
217
|
-
"@operato/utils": "^
|
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.
|
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.
|
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": "^
|
233
|
-
"@typescript-eslint/eslint-plugin": "^
|
234
|
-
"@typescript-eslint/parser": "^
|
235
|
-
"@web/dev-server": "^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.
|
238
|
-
"concurrently": "^
|
239
|
-
"eslint": "^
|
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": "
|
270
|
+
"gitHead": "5f56d67c7097c8362e658c78262e6bbec66029cf"
|
262
271
|
}
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -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"]}
|