@operato/mini-map 1.3.2

package/.editorconfig

@@ -0,0 +1,29 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.json]
+indent_size = 2
+
+[*.{html,js,md}]
+block_comment_start = /**
+block_comment = *
+block_comment_end = */

package/.storybook/main.js

@@ -0,0 +1,3 @@
+module.exports = {
+  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
+};

package/.storybook/server.mjs

@@ -0,0 +1,8 @@
+import { storybookPlugin } from '@web/dev-server-storybook';
+import baseConfig from '../web-dev-server.config.mjs';
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  ...baseConfig,
+  open: '/',
+  plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
+});

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+### [1.3.2](https://github.com/hatiolab/operato/compare/v1.3.1...v1.3.2) (2023-06-13)
+
+
+### :bug: Bug Fix
+
+* add minimap webcomponent ([1929ccd](https://github.com/hatiolab/operato/commit/1929ccd99bc9f66605d0e0291e69d2106aa7b6bb))

package/README.md

@@ -0,0 +1,75 @@
+# \<mini-map>
+
+> This is ES module based on `https://www.npmjs.com/package/mini-map`
+
+More information about usage or others at [mini-map](https://github.com/mobkits/mini-map)
+
+This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+
+## Installation
+
+```bash
+npm i @operato/mini-map
+```
+
+## Usage
+
+```html
+
+```
+
+## Linting and formatting
+
+To scan the project for linting and formatting errors, run
+
+```bash
+npm run lint
+```
+
+To automatically fix linting and formatting errors, run
+
+```bash
+npm run format
+```
+
+## Testing with Web Test Runner
+
+To execute a single test run:
+
+```bash
+npm run test
+```
+
+To run the tests in interactive watch mode run:
+
+```bash
+npm run test:watch
+```
+
+## Demoing with Storybook
+
+To run a local instance of Storybook for your component, run
+
+```bash
+npm run storybook
+```
+
+To build a production version of Storybook, run
+
+```bash
+npm run storybook:build
+```
+
+## Tooling configs
+
+For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
+
+If you customize the configuration a lot, you can consider moving them to individual files.
+
+## Local Demo with `web-dev-server`
+
+```bash
+npm start
+```
+
+To run a local development server that serves the basic demo located in `demo/index.html`

package/demo/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <style>
+      body {
+        display: flex;
+        width: 100vw;
+        height: 100dvh;
+        margin: 0;
+        padding: 0;
+      }
+
+      #demo {
+        flex: 1;
+        background-color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="demo"></div>
+
+    <script type="module">
+      import { minimap } from '../dist/src/mini-map.js'
+
+      pulltorefresh({
+        container: document.body,
+        scrollable: document.querySelector('#demo'),
+        refresh: () => {
+          console.log('refreshed...')
+        }
+      })
+    </script>
+  </body>
+</html>

package/dist/src/ox-mini-map.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/ox-mini-map.js

@@ -0,0 +1,170 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxminimapComponent = class OxminimapComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.target = null;
+        this.isDragging = false;
+        this.startX = 0;
+        this.startY = 0;
+        this.initialScrollLeft = 0;
+        this.initialScrollTop = 0;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('resize', this.handleResize.bind(this));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('resize', this.handleResize.bind(this));
+    }
+    firstUpdated(changes) {
+        super.firstUpdated(changes);
+        this.updateTarget();
+        this.checkVisibilityX();
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('target')) {
+            this.updateTarget();
+        }
+    }
+    handleResize() {
+        this.updateTarget();
+        this.checkVisibilityX();
+    }
+    updateTarget() {
+        var _a, _b;
+        const target = this.target || this.parentElement;
+        if (!target) {
+            return;
+        }
+        const targetRatio = target.scrollHeight / target.scrollWidth;
+        const thisRatio = this.offsetHeight / this.offsetWidth;
+        const scale = targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth;
+        const minimapHeight = target.scrollHeight * scale;
+        const minimapWidth = target.scrollWidth * scale;
+        const viewportHeight = target.offsetHeight * scale;
+        const viewportWidth = target.offsetWidth * scale;
+        const minimap = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('minimap');
+        const viewport = (_b = this.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById('viewport');
+        minimap.style.width = `${minimapWidth}px`;
+        minimap.style.height = `${minimapHeight}px`;
+        viewport.style.width = `${viewportWidth}px`;
+        viewport.style.height = `${viewportHeight}px`;
+        const viewportLeft = target.scrollLeft * scale;
+        const viewportTop = target.scrollTop * scale;
+        viewport.style.width = `${viewportWidth}px`;
+        viewport.style.height = `${viewportHeight}px`;
+        viewport.style.left = `${viewportLeft}px`;
+        viewport.style.top = `${viewportTop}px`;
+    }
+    checkVisibilityX() {
+        var _a;
+        const parentElement = this.target || this.parentElement;
+        if (!parentElement)
+            return;
+        const parentRect = parentElement.getBoundingClientRect();
+        const minimap = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('minimap');
+        if (parentRect.width >= minimap.offsetWidth && parentRect.height >= minimap.offsetHeight) {
+            this.style.display = 'block';
+        }
+        else {
+            this.style.display = 'none';
+        }
+    }
+    handleMouseDown(event) {
+        var _a;
+        const target = this.target || this.parentElement;
+        if (!target) {
+            return;
+        }
+        const minimapViewport = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('viewport');
+        this.startX = event.clientX;
+        this.startY = event.clientY;
+        this.initialScrollLeft = target.scrollLeft || 0;
+        this.initialScrollTop = target.scrollTop || 0;
+        this.isDragging = true;
+        minimapViewport.classList.add('dragging');
+        event.preventDefault();
+    }
+    handleMouseMove(event) {
+        var _a;
+        if (!this.isDragging)
+            return;
+        const deltaX = event.clientX - this.startX;
+        const deltaY = event.clientY - this.startY;
+        const target = this.target || this.parentElement;
+        if (!target) {
+            return;
+        }
+        const targetRatio = target.scrollHeight / target.scrollWidth;
+        const thisRatio = this.offsetHeight / this.offsetWidth;
+        const scale = targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth;
+        const targetRect = target.getBoundingClientRect();
+        const viewportWidth = (targetRect.width * target.clientWidth) / target.scrollWidth;
+        const viewportHeight = (targetRect.height * target.clientHeight) / target.scrollHeight;
+        const scrollX = deltaX / scale;
+        const scrollY = deltaY / scale;
+        target.scrollTo(this.initialScrollLeft + scrollX, this.initialScrollTop + scrollY);
+        const minimapViewport = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('viewport');
+        minimapViewport.style.left = `${Math.max(0, Math.min(event.clientX - viewportWidth / 2, target.clientWidth - viewportWidth))}px`;
+        minimapViewport.style.top = `${Math.max(0, Math.min(event.clientY - viewportHeight / 2, target.clientHeight - viewportHeight))}px`;
+        this.updateTarget();
+        event.preventDefault();
+    }
+    handleMouseUp(event) {
+        var _a;
+        const minimapViewport = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById('minimap');
+        this.isDragging = false;
+        minimapViewport.classList.remove('dragging');
+        event.preventDefault();
+    }
+    render() {
+        return html `
+      <div id="minimap">
+        <div
+          id="viewport"
+          @mousedown=${this.handleMouseDown}
+          @mousemove=${this.handleMouseMove}
+          @mouseup=${this.handleMouseUp}
+        ></div>
+      </div>
+    `;
+    }
+};
+OxminimapComponent.styles = css `
+    :host {
+      display: flex;
+      position: relative;
+      background-color: gray;
+    }
+
+    #minimap {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      box-sizing: border-box;
+
+      background-color: white;
+      overflow: hidden;
+    }
+
+    #viewport {
+      position: absolute;
+      border: 1px dashed blue;
+      box-sizing: border-box;
+      pointer-events: none;
+      background-color: white;
+      pointer-events: auto;
+      cursor: move;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxminimapComponent.prototype, "target", void 0);
+OxminimapComponent = __decorate([
+    customElement('ox-mini-map')
+], OxminimapComponent);
+//# sourceMappingURL=ox-mini-map.js.map

package/dist/src/ox-mini-map.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-mini-map.js","sourceRoot":"","sources":["../../src/ox-mini-map.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, css, LitElement, PropertyValueMap } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-mini-map')\nclass OxminimapComponent extends LitElement {\n  static styles = css`\n    :host {\n      display: flex;\n      position: relative;\n      background-color: gray;\n    }\n\n    #minimap {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      box-sizing: border-box;\n\n      background-color: white;\n      overflow: hidden;\n    }\n\n    #viewport {\n      position: absolute;\n      border: 1px dashed blue;\n      box-sizing: border-box;\n      pointer-events: none;\n      background-color: white;\n      pointer-events: auto;\n      cursor: move;\n    }\n  `\n\n  @property({ type: Object }) target: HTMLElement | null = null\n  private isDragging = false\n  private startX = 0\n  private startY = 0\n  private initialScrollLeft = 0\n  private initialScrollTop = 0\n\n  connectedCallback() {\n    super.connectedCallback()\n    window.addEventListener('resize', this.handleResize.bind(this))\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n    window.removeEventListener('resize', this.handleResize.bind(this))\n  }\n\n  firstUpdated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {\n    super.firstUpdated(changes)\n\n    this.updateTarget()\n    this.checkVisibilityX()\n  }\n\n  updated(changedProperties: Map<string, any>) {\n    if (changedProperties.has('target')) {\n      this.updateTarget()\n    }\n  }\n\n  handleResize() {\n    this.updateTarget()\n    this.checkVisibilityX()\n  }\n\n  updateTarget() {\n    const target = this.target || this.parentElement\n    if (!target) {\n      return\n    }\n\n    const targetRatio = target.scrollHeight / target.scrollWidth\n    const thisRatio = this.offsetHeight / this.offsetWidth\n\n    const scale =\n      targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth\n\n    const minimapHeight = target.scrollHeight * scale\n    const minimapWidth = target.scrollWidth * scale\n\n    const viewportHeight = target.offsetHeight * scale\n    const viewportWidth = target.offsetWidth * scale\n\n    const minimap = this.shadowRoot?.getElementById('minimap') as HTMLElement\n    const viewport = this.shadowRoot?.getElementById('viewport') as HTMLElement\n\n    minimap.style.width = `${minimapWidth}px`\n    minimap.style.height = `${minimapHeight}px`\n\n    viewport.style.width = `${viewportWidth}px`\n    viewport.style.height = `${viewportHeight}px`\n\n    const viewportLeft = target.scrollLeft * scale\n    const viewportTop = target.scrollTop * scale\n\n    viewport.style.width = `${viewportWidth}px`\n    viewport.style.height = `${viewportHeight}px`\n    viewport.style.left = `${viewportLeft}px`\n    viewport.style.top = `${viewportTop}px`\n  }\n\n  checkVisibilityX() {\n    const parentElement = this.target || this.parentElement\n    if (!parentElement) return\n\n    const parentRect = parentElement.getBoundingClientRect()\n    const minimap = this.shadowRoot?.getElementById('minimap') as HTMLElement\n    if (parentRect.width >= minimap.offsetWidth && parentRect.height >= minimap.offsetHeight) {\n      this.style.display = 'block'\n    } else {\n      this.style.display = 'none'\n    }\n  }\n\n  handleMouseDown(event: MouseEvent) {\n    const target = this.target || this.parentElement\n\n    if (!target) {\n      return\n    }\n\n    const minimapViewport = this.shadowRoot?.getElementById('viewport') as HTMLElement\n    this.startX = event.clientX\n    this.startY = event.clientY\n    this.initialScrollLeft = target.scrollLeft || 0\n    this.initialScrollTop = target.scrollTop || 0\n    this.isDragging = true\n    minimapViewport.classList.add('dragging')\n    event.preventDefault()\n  }\n\n  handleMouseMove(event: MouseEvent) {\n    if (!this.isDragging) return\n    const deltaX = event.clientX - this.startX\n    const deltaY = event.clientY - this.startY\n\n    const target = this.target || this.parentElement\n\n    if (!target) {\n      return\n    }\n\n    const targetRatio = target.scrollHeight / target.scrollWidth\n    const thisRatio = this.offsetHeight / this.offsetWidth\n\n    const scale =\n      targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth\n\n    const targetRect = target.getBoundingClientRect()\n    const viewportWidth = (targetRect.width * target.clientWidth) / target.scrollWidth\n    const viewportHeight = (targetRect.height * target.clientHeight) / target.scrollHeight\n    const scrollX = deltaX / scale\n    const scrollY = deltaY / scale\n    target.scrollTo(this.initialScrollLeft + scrollX, this.initialScrollTop + scrollY)\n    const minimapViewport = this.shadowRoot?.getElementById('viewport') as HTMLElement\n    minimapViewport.style.left = `${Math.max(\n      0,\n      Math.min(event.clientX - viewportWidth / 2, target.clientWidth - viewportWidth)\n    )}px`\n    minimapViewport.style.top = `${Math.max(\n      0,\n      Math.min(event.clientY - viewportHeight / 2, target.clientHeight - viewportHeight)\n    )}px`\n\n    this.updateTarget()\n    event.preventDefault()\n  }\n\n  handleMouseUp(event: MouseEvent) {\n    const minimapViewport = this.shadowRoot?.getElementById('minimap') as HTMLElement\n    this.isDragging = false\n    minimapViewport.classList.remove('dragging')\n    event.preventDefault()\n  }\n\n  render() {\n    return html`\n      <div id=\"minimap\">\n        <div\n          id=\"viewport\"\n          @mousedown=${this.handleMouseDown}\n          @mousemove=${this.handleMouseMove}\n          @mouseup=${this.handleMouseUp}\n        ></div>\n      </div>\n    `\n  }\n}\n"]}

package/dist/stories/index.stories.d.ts

@@ -0,0 +1,16 @@
+import { TemplateResult } from 'lit';
+import '../src/ox-mini-map.js';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {};
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/index.stories.js

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+import '../src/ox-mini-map.js';
+export default {
+    title: 'MiniMap',
+    component: 'mini-map',
+    argTypes: {}
+};
+const Template = ({}) => html `
+  <div id="parent" style="overflow: auto; width: 100%; height: 500px;">
+    <div id="content" style="width: 1200px; height: 1000px"></div>
+    <ox-mini-map style="width: 100px; height: 100px; position: absolute; bottom: 10px; right: 10px;"> </ox-mini-map>
+  </div>
+`;
+export const Regular = Template.bind({});
+Regular.args = {};
+//# sourceMappingURL=index.stories.js.map

package/dist/stories/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../stories/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC1C,OAAO,uBAAuB,CAAA;AAE9B,eAAe;IACb,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;CACb,CAAA;AAUD,MAAM,QAAQ,GAAoB,CAAC,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;CAKvD,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport '../src/ox-mini-map.js'\n\nexport default {\n  title: 'MiniMap',\n  component: 'mini-map',\n  argTypes: {}\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {}\n\nconst Template: Story<ArgTypes> = ({}: ArgTypes) => html`\n  <div id=\"parent\" style=\"overflow: auto; width: 100%; height: 500px;\">\n    <div id=\"content\" style=\"width: 1200px; height: 1000px\"></div>\n    <ox-mini-map style=\"width: 100px; height: 100px; position: absolute; bottom: 10px; right: 10px;\"> </ox-mini-map>\n  </div>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {}\n"]}

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"program":{"fileNames":["../../../node_modules/typescript/lib/lib.es5.d.ts","../../../node_modules/typescript/lib/lib.es2015.d.ts","../../../node_modules/typescript/lib/lib.es2016.d.ts","../../../node_modules/typescript/lib/lib.es2017.d.ts","../../../node_modules/typescript/lib/lib.es2018.d.ts","../../../node_modules/typescript/lib/lib.es2019.d.ts","../../../node_modules/typescript/lib/lib.es2020.d.ts","../../../node_modules/typescript/lib/lib.dom.d.ts","../../../node_modules/typescript/lib/lib.es2015.core.d.ts","../../../node_modules/typescript/lib/lib.es2015.collection.d.ts","../../../node_modules/typescript/lib/lib.es2015.generator.d.ts","../../../node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../../node_modules/typescript/lib/lib.es2015.promise.d.ts","../../../node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../../node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../../node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../../node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../../node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../../node_modules/typescript/lib/lib.es2017.object.d.ts","../../../node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../../node_modules/typescript/lib/lib.es2017.string.d.ts","../../../node_modules/typescript/lib/lib.es2017.intl.d.ts","../../../node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../../node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../../node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../../node_modules/typescript/lib/lib.es2018.intl.d.ts","../../../node_modules/typescript/lib/lib.es2018.promise.d.ts","../../../node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../../node_modules/typescript/lib/lib.es2019.array.d.ts","../../../node_modules/typescript/lib/lib.es2019.object.d.ts","../../../node_modules/typescript/lib/lib.es2019.string.d.ts","../../../node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../../node_modules/typescript/lib/lib.es2019.intl.d.ts","../../../node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../../node_modules/typescript/lib/lib.es2020.date.d.ts","../../../node_modules/typescript/lib/lib.es2020.promise.d.ts","../../../node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../../node_modules/typescript/lib/lib.es2020.string.d.ts","../../../node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../../node_modules/typescript/lib/lib.es2020.intl.d.ts","../../../node_modules/typescript/lib/lib.es2020.number.d.ts","../../../node_modules/typescript/lib/lib.esnext.intl.d.ts","../../../node_modules/typescript/lib/lib.decorators.d.ts","../../../node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../../node_modules/tslib/tslib.d.ts","../../../node_modules/@lit/reactive-element/css-tag.d.ts","../../../node_modules/@lit/reactive-element/reactive-controller.d.ts","../../../node_modules/@lit/reactive-element/reactive-element.d.ts","../../../node_modules/@types/trusted-types/lib/index.d.ts","../../../node_modules/@types/trusted-types/index.d.ts","../../../node_modules/lit-html/directive.d.ts","../../../node_modules/lit-html/lit-html.d.ts","../../../node_modules/lit-element/lit-element.d.ts","../../../node_modules/lit-html/is-server.d.ts","../../../node_modules/lit/index.d.ts","../../../node_modules/@lit/reactive-element/decorators/base.d.ts","../../../node_modules/@lit/reactive-element/decorators/custom-element.d.ts","../../../node_modules/@lit/reactive-element/decorators/property.d.ts","../../../node_modules/@lit/reactive-element/decorators/state.d.ts","../../../node_modules/@lit/reactive-element/decorators/event-options.d.ts","../../../node_modules/@lit/reactive-element/decorators/query.d.ts","../../../node_modules/@lit/reactive-element/decorators/query-all.d.ts","../../../node_modules/@lit/reactive-element/decorators/query-async.d.ts","../../../node_modules/@lit/reactive-element/decorators/query-assigned-nodes.d.ts","../../../node_modules/@lit/reactive-element/decorators/query-assigned-elements.d.ts","../../../node_modules/lit/decorators.d.ts","../src/ox-mini-map.ts","../stories/index.stories.ts","../../../node_modules/@types/node/assert.d.ts","../../../node_modules/@types/node/assert/strict.d.ts","../../../node_modules/@types/node/globals.d.ts","../../../node_modules/@types/node/async_hooks.d.ts","../../../node_modules/@types/node/buffer.d.ts","../../../node_modules/@types/node/child_process.d.ts","../../../node_modules/@types/node/cluster.d.ts","../../../node_modules/@types/node/console.d.ts","../../../node_modules/@types/node/constants.d.ts","../../../node_modules/@types/node/crypto.d.ts","../../../node_modules/@types/node/dgram.d.ts","../../../node_modules/@types/node/diagnostics_channel.d.ts","../../../node_modules/@types/node/dns.d.ts","../../../node_modules/@types/node/dns/promises.d.ts","../../../node_modules/@types/node/domain.d.ts","../../../node_modules/@types/node/dom-events.d.ts","../../../node_modules/@types/node/events.d.ts","../../../node_modules/@types/node/fs.d.ts","../../../node_modules/@types/node/fs/promises.d.ts","../../../node_modules/@types/node/http.d.ts","../../../node_modules/@types/node/http2.d.ts","../../../node_modules/@types/node/https.d.ts","../../../node_modules/@types/node/inspector.d.ts","../../../node_modules/@types/node/module.d.ts","../../../node_modules/@types/node/net.d.ts","../../../node_modules/@types/node/os.d.ts","../../../node_modules/@types/node/path.d.ts","../../../node_modules/@types/node/perf_hooks.d.ts","../../../node_modules/@types/node/process.d.ts","../../../node_modules/@types/node/punycode.d.ts","../../../node_modules/@types/node/querystring.d.ts","../../../node_modules/@types/node/readline.d.ts","../../../node_modules/@types/node/readline/promises.d.ts","../../../node_modules/@types/node/repl.d.ts","../../../node_modules/@types/node/stream.d.ts","../../../node_modules/@types/node/stream/promises.d.ts","../../../node_modules/@types/node/stream/consumers.d.ts","../../../node_modules/@types/node/stream/web.d.ts","../../../node_modules/@types/node/string_decoder.d.ts","../../../node_modules/@types/node/test.d.ts","../../../node_modules/@types/node/timers.d.ts","../../../node_modules/@types/node/timers/promises.d.ts","../../../node_modules/@types/node/tls.d.ts","../../../node_modules/@types/node/trace_events.d.ts","../../../node_modules/@types/node/tty.d.ts","../../../node_modules/@types/node/url.d.ts","../../../node_modules/@types/node/util.d.ts","../../../node_modules/@types/node/v8.d.ts","../../../node_modules/@types/node/vm.d.ts","../../../node_modules/@types/node/wasi.d.ts","../../../node_modules/@types/node/worker_threads.d.ts","../../../node_modules/@types/node/zlib.d.ts","../../../node_modules/@types/node/globals.global.d.ts","../../../node_modules/@types/node/index.d.ts","../../../node_modules/@types/mocha/index.d.ts"],"fileInfos":[{"version":"6a6b471e7e43e15ef6f8fe617a22ce4ecb0e34efa6c3dfcfe7cebd392bcca9d2","affectsGlobalScope":true},"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","dc48272d7c333ccf58034c0026162576b7d50ea0e69c3b9292f803fc20720fd5","27147504487dc1159369da4f4da8a26406364624fa9bc3db632f7d94a5bae2c3","5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4",{"version":"fcd3ecc9f764f06f4d5c467677f4f117f6abf49dee6716283aa204ff1162498b","affectsGlobalScope":true},{"version":"f296963760430fb65b4e5d91f0ed770a91c6e77455bacf8fa23a1501654ede0e","affectsGlobalScope":true},{"version":"5114a95689b63f96b957e00216bc04baf9e1a1782aa4d8ee7e5e9acbf768e301","affectsGlobalScope":true},{"version":"4443e68b35f3332f753eacc66a04ac1d2053b8b035a0e0ac1d455392b5e243b3","affectsGlobalScope":true},{"version":"ab22100fdd0d24cfc2cc59d0a00fc8cf449830d9c4030dc54390a46bd562e929","affectsGlobalScope":true},{"version":"f7bd636ae3a4623c503359ada74510c4005df5b36de7f23e1db8a5c543fd176b","affectsGlobalScope":true},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true},{"version":"0c20f4d2358eb679e4ae8a4432bdd96c857a2960fd6800b21ec4008ec59d60ea","affectsGlobalScope":true},{"version":"36ae84ccc0633f7c0787bc6108386c8b773e95d3b052d9464a99cd9b8795fbec","affectsGlobalScope":true},{"version":"82d0d8e269b9eeac02c3bd1c9e884e85d483fcb2cd168bccd6bc54df663da031","affectsGlobalScope":true},{"version":"b8deab98702588840be73d67f02412a2d45a417a3c097b2e96f7f3a42ac483d1","affectsGlobalScope":true},{"version":"4738f2420687fd85629c9efb470793bb753709c2379e5f85bc1815d875ceadcd","affectsGlobalScope":true},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true},{"version":"376d554d042fb409cb55b5cbaf0b2b4b7e669619493c5d18d5fa8bd67273f82a","affectsGlobalScope":true},{"version":"9fc46429fbe091ac5ad2608c657201eb68b6f1b8341bd6d670047d32ed0a88fa","affectsGlobalScope":true},{"version":"61c37c1de663cf4171e1192466e52c7a382afa58da01b1dc75058f032ddf0839","affectsGlobalScope":true},{"version":"c4138a3dd7cd6cf1f363ca0f905554e8d81b45844feea17786cdf1626cb8ea06","affectsGlobalScope":true},{"version":"6ff3e2452b055d8f0ec026511c6582b55d935675af67cdb67dd1dc671e8065df","affectsGlobalScope":true},{"version":"03de17b810f426a2f47396b0b99b53a82c1b60e9cba7a7edda47f9bb077882f4","affectsGlobalScope":true},{"version":"8184c6ddf48f0c98429326b428478ecc6143c27f79b79e85740f17e6feb090f1","affectsGlobalScope":true},{"version":"261c4d2cf86ac5a89ad3fb3fafed74cbb6f2f7c1d139b0540933df567d64a6ca","affectsGlobalScope":true},{"version":"6af1425e9973f4924fca986636ac19a0cf9909a7e0d9d3009c349e6244e957b6","affectsGlobalScope":true},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true},{"version":"15a630d6817718a2ddd7088c4f83e4673fde19fa992d2eae2cf51132a302a5d3","affectsGlobalScope":true},{"version":"b7e9f95a7387e3f66be0ed6db43600c49cec33a3900437ce2fd350d9b7cb16f2","affectsGlobalScope":true},{"version":"01e0ee7e1f661acedb08b51f8a9b7d7f959e9cdb6441360f06522cc3aea1bf2e","affectsGlobalScope":true},{"version":"ac17a97f816d53d9dd79b0d235e1c0ed54a8cc6a0677e9a3d61efb480b2a3e4e","affectsGlobalScope":true},{"version":"bf14a426dbbf1022d11bd08d6b8e709a2e9d246f0c6c1032f3b2edb9a902adbe","affectsGlobalScope":true},{"version":"ec0104fee478075cb5171e5f4e3f23add8e02d845ae0165bfa3f1099241fa2aa","affectsGlobalScope":true},{"version":"2b72d528b2e2fe3c57889ca7baef5e13a56c957b946906d03767c642f386bbc3","affectsGlobalScope":true},{"version":"9cc66b0513ad41cb5f5372cca86ef83a0d37d1c1017580b7dace3ea5661836df","affectsGlobalScope":true},{"version":"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1","affectsGlobalScope":true},{"version":"307c8b7ebbd7f23a92b73a4c6c0a697beca05b06b036c23a34553e5fe65e4fdc","affectsGlobalScope":true},{"version":"189c0703923150aa30673fa3de411346d727cc44a11c75d05d7cf9ef095daa22","affectsGlobalScope":true},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true},"f1c9fe42b65437a61104e601eb298c5c859fb522b483f1bdb700eed67a16f980","e59262ddaae67dec2d226f8a5d05cf6c4dc353c0d9b1e4980a61d7fcf9a2b051","5e30131b6a5587fe666926ad1d9807e733c0a597ed12d682669fcaa331aea576","d27ead0e913b4225279e8beb10450ecaf54af5ed145a6ecbbed18bb130815006","2fcd2d22b1f30555e785105597cd8f57ed50300e213c4f1bbca6ae149f782c38",{"version":"3c150a2e1758724811db3bdc5c773421819343b1627714e09f29b1f40a5dfb26","affectsGlobalScope":true},"7000ec8572390d035ba5ef993953957150d0c38ffb31b56653c97dd78cb6e1aa","5a4af5e4727864a08625d5c892d7cba8916d205c7f0c68e15eda5d6579968497","4ddf3962990379d1ea59b369a5516c7533b7944010d6998e0e9b1ab35d5af1f0","1bcd560deed90a43c51b08aa18f7f55229f2e30974ab5ed1b7bb5721be379013","dc08fe04e50bc24d1baded4f33e942222bbdd5d77d6341a93cfe6e4e4586a3be","2a8f0a19a927e83421597c056c90695557142f54ca96358f01eb1f2a5eb228be","d08415b3d6d7fd153ba6e7bf7707ffc57f3c6ad85730ea63544756610b4350c6","411f23da7a63c3d3fd4860c41a458e8df239776fd5d9cd36dd3ad6be92afccbd","6ada3e065916c0ef2dbc9bc0f9b5d59afb25d9176f81fa2c8993a536924140c6","356cc1b058e05e07d2acd73bfa87f83a6f4a343450ee375dad232ff4a55d41d8","df286e6b181ed08766bc19cf1a2fddc50bc5d540f233bc1ce4430a3c1c8c8379","f436800c0af503703110c93144fcc7392524636fb4216296411243b29fe0162d","0d5002560b45ce4fd6c4124632f61789e584be0634602486a2ce59541311d153","bbe13c947d7d6c3426e0e5815e2b3464fa03d34a4bf47298c43b9237cf59555b","9f7d0ee33b9f8fa4dc2e9628e0cdf8683104d01de9d3d24f62cd5da014a5bec4","a8992b852521a66f63e0cedc6e1f054b28f972232b6fa5ca59771db6a1c8bbea",{"version":"5686be3b4b01d6df44ea6dff95a255e5e8e56400e288579d0c6d406e024e3568","signature":"8e609bb71c20b858c77f0e9f90bb1319db8477b13f9f965f1a1e18524bf50881"},{"version":"23a22359e190c8c86148e79f6983167deaa09b27111276c950692dd1ab64b5bc","signature":"947aa7963125d1eb59991384b5b7f228579deb0dcbea4750a57a797d07e5df67"},"587f13f1e8157bd8cec0adda0de4ef558bb8573daa9d518d1e2af38e87ecc91f","a69c09dbea52352f479d3e7ac949fde3d17b195abe90b045d619f747b38d6d1a",{"version":"bce910d9164785c9f0d4dcea4be359f5f92130c7c7833dea6138ab1db310a1f9","affectsGlobalScope":true},"7a435e0c814f58f23e9a0979045ec0ef5909aac95a70986e8bcce30c27dff228",{"version":"a7534271773a27ff7d136d550e86b41894d8090fa857ba4c02b5bb18d2eb1c8e","affectsGlobalScope":true},"db71be322f07f769200108aa19b79a75dd19a187c9dca2a30c4537b233aa2863","57135ce61976a8b1dadd01bb412406d1805b90db6e8ecb726d0d78e0b5f76050",{"version":"49479e21a040c0177d1b1bc05a124c0383df7a08a0726ad4d9457619642e875a","affectsGlobalScope":true},"82408ed3e959ddc60d3e9904481b5a8dc16469928257af22a3f7d1a3bc7fd8c4","b8e431e9b9bb2dc832b23d4e3e02774e953d5537998923f215ea446169e9a61e","3690133deae19c8127c5505fcb67b04bdc9eb053796008538a9b9abbb70d85aa","5b1c0a23f464f894e7c2b2b6c56df7b9afa60ed48c5345f8618d389a636b2108","be2b092f2765222757c6441b86c53a5ea8dfed47bbc43eab4c5fe37942c866b3","8e6b05abc98adba15e1ac78e137c64576c74002e301d682e66feb77a23907ab8","1ca735bb3d407b2af4fbee7665f3a0a83be52168c728cc209755060ba7ed67bd",{"version":"6b526a5ec4a401ca7c26cfe6a48e641d8f30af76673bad3b06a1b4504594a960","affectsGlobalScope":true},{"version":"b85c02e14ecb2a873dad5a1de72319b265160ba48f1b83661aeb3bba1366c1bc","affectsGlobalScope":true},"7a2ba0c9af860ac3e77b35ed01fd96d15986f17aa22fe40f188ae556fb1070df","fc3764040518a1008dd04bdc80964591b566b896283e00df85c95851c1f46237","55709608060f77965c270ac10ac646286589f1bd1cb174fff1778a2dd9a7ef31","790623a47c5eda62910098884ecb154dc0e5f3a23fc36c1bfb3b5b9ed44e2c2d","42b40e40f2a358cda332456214fad311e1806a6abf3cebaaac72496e07556642","354612fe1d49ecc9551ea3a27d94eef2887b64ef4a71f72ca444efe0f2f0ba80",{"version":"125af9d85cb9d5e508353f10a8d52f01652d2d48b2cea54789a33e5b4d289c1c","affectsGlobalScope":true},"f5490f53d40291cc8607f5463434d1ac6c5564bc4fbb03abceb03a8f6b014457","5e2b91328a540a0933ab5c2203f4358918e6f0fe7505d22840a891a6117735f1","3abc3512fa04aa0230f59ea1019311fd8667bd935d28306311dccc8b17e79d5d",{"version":"14a50dafe3f45713f7f27cb6320dff07c6ac31678f07959c2134260061bf91ff","affectsGlobalScope":true},{"version":"19da7150ca062323b1db6311a6ef058c9b0a39cc64d836b5e9b75d301869653b","affectsGlobalScope":true},"1349077576abb41f0e9c78ec30762ff75b710208aff77f5fdcc6a8c8ce6289dd","e2ce82603102b5c0563f59fb40314cc1ff95a4d521a66ad14146e130ea80d89c","a3e0395220255a350aa9c6d56f882bfcb5b85c19fddf5419ec822cf22246a26d","c27b01e8ddff5cd280711af5e13aecd9a3228d1c256ea797dd64f8fdec5f7df5","898840e876dfd21843db9f2aa6ae38ba2eab550eb780ff62b894b9fbfebfae6b","0cab4d7d4edc40cd3af9eea7c3ed6d1016910c0954c49c4297e479bf3822a625","1b952304137851e45bc009785de89ada562d9376177c97e37702e39e60c2f1ff","785e5be57d4f20f290a20e7b0c6263f6c57fd6e51283050756cef07d6d651c68","44b8b584a338b190a59f4f6929d072431950c7bd92ec2694821c11bce180c8a5","164deb2409ac5f4da3cd139dbcee7f7d66753d90363a4d7e2db8d8874f272270","1fb6c5ec52332a8b531a8d7a5300ac9301f98c4fe62f68e744e0841ccba65e7e",{"version":"ab294c4b7279318ee2a8fdf681305457ecc05970c94108d304933f18823eeac1","affectsGlobalScope":true},"ad08154d9602429522cac965a715fde27d421d69b24756c5d291877dda75353e","bbda6ea452a2386093a1eda18a6e26a989e98869f1b9f37e46f510a986d2e740","812b25f798033c202baedf386a1ccc41f9191b122f089bffd10fdccce99fba11","993325544790073f77e945bee046d53988c0bc3ac5695c9cf8098166feb82661",{"version":"75dd741ca6a6c8d2437a6ca8349b64b816421dbf9fe82dd026afaba965576962","affectsGlobalScope":true},{"version":"8799401a7ab57764f0d464513a7fa7c72e1d70a226b172ec60fff534ea94d108","affectsGlobalScope":true},"2ce2210032ccaff7710e2abf6a722e62c54960458e73e356b6a365c93ab6ca66","92db194ef7d208d5e4b6242a3434573fd142a621ff996d84cc9dbba3553277d0","16a3080e885ed52d4017c902227a8d0d8daf723d062bec9e45627c6fdcd6699b",{"version":"0bd9543cd8fc0959c76fb8f4f5a26626c2ed62ef4be98fd857bce268066db0a2","affectsGlobalScope":true},"1ca6858a0cbcd74d7db72d7b14c5360a928d1d16748a55ecfa6bfaff8b83071b",{"version":"ab9b9a36e5284fd8d3bf2f7d5fcbc60052f25f27e4d20954782099282c60d23e","affectsGlobalScope":true},"247aa3419c98713231952b33801d4f46563fe542e03604acd8c63ac45a32409c",{"version":"677646e2620795c98a539fb12fb531f10331c217cef1492132b2518f894fa92d","affectsGlobalScope":true}],"root":[67,68],"options":{"allowSyntheticDefaultImports":true,"declaration":true,"esModuleInterop":true,"experimentalDecorators":true,"importHelpers":true,"inlineSources":true,"module":99,"noEmitOnError":true,"outDir":"./","rootDir":"..","sourceMap":true,"strict":true,"target":5,"useDefineForClassFields":false},"fileIdsList":[[115],[48,115],[56,115],[48,56,115],[48,56,64,115],[46,47,115],[69,115],[72,115],[73,78,106,115],[74,85,86,93,103,114,115],[74,75,85,93,115],[76,115],[77,78,86,94,115],[78,103,111,115],[79,81,85,93,115],[80,115],[81,82,115],[85,115],[83,85,115],[85,86,87,103,114,115],[85,86,87,100,103,106,115],[115,119],[81,85,88,93,103,114,115],[85,86,88,89,93,103,111,114,115],[88,90,103,111,114,115],[69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121],[85,91,115],[92,114,115],[81,85,93,103,115],[94,115],[95,115],[72,96,115],[97,113,115,119],[98,115],[99,115],[85,100,101,115],[100,102,115,117],[73,85,103,104,105,106,115],[73,103,105,115],[103,104,115],[106,115],[107,115],[103,115],[85,109,110,115],[109,110,115],[78,93,103,111,115],[112,115],[93,113,115],[73,88,99,114,115],[78,115],[103,115,116],[115,117],[115,118],[73,78,85,87,96,103,114,115,117,119],[103,115,120],[49,115],[48,52,115],[52,115],[50,51,115],[57,58,59,60,61,62,63,64,65,115],[48,52,53,54,115],[45,55,66,115],[45,55,67,115],[55,67]],"referencedMap":[[46,1],[56,2],[57,3],[60,4],[58,4],[62,4],[65,5],[64,1],[63,4],[61,4],[59,3],[47,1],[48,6],[123,1],[69,7],[70,7],[72,8],[73,9],[74,10],[75,11],[76,12],[77,13],[78,14],[79,15],[80,16],[81,17],[82,17],[84,18],[83,19],[85,18],[86,20],[87,21],[71,22],[121,1],[88,23],[89,24],[90,25],[122,26],[91,27],[92,28],[93,29],[94,30],[95,31],[96,32],[97,33],[98,34],[99,35],[100,36],[101,36],[102,37],[103,38],[105,39],[104,40],[106,41],[107,42],[108,43],[109,44],[110,45],[111,46],[112,47],[113,48],[114,49],[115,50],[116,51],[117,52],[118,53],[119,54],[120,55],[50,56],[49,1],[53,57],[51,58],[54,1],[52,59],[66,60],[55,61],[45,1],[43,1],[44,1],[8,1],[10,1],[9,1],[2,1],[11,1],[12,1],[13,1],[14,1],[15,1],[16,1],[17,1],[18,1],[3,1],[4,1],[22,1],[19,1],[20,1],[21,1],[23,1],[24,1],[25,1],[5,1],[26,1],[27,1],[28,1],[29,1],[6,1],[33,1],[30,1],[31,1],[32,1],[34,1],[7,1],[35,1],[40,1],[41,1],[36,1],[37,1],[38,1],[39,1],[1,1],[42,1],[67,62],[68,63]],"exportedModulesMap":[[46,1],[56,2],[57,3],[60,4],[58,4],[62,4],[65,5],[64,1],[63,4],[61,4],[59,3],[47,1],[48,6],[123,1],[69,7],[70,7],[72,8],[73,9],[74,10],[75,11],[76,12],[77,13],[78,14],[79,15],[80,16],[81,17],[82,17],[84,18],[83,19],[85,18],[86,20],[87,21],[71,22],[121,1],[88,23],[89,24],[90,25],[122,26],[91,27],[92,28],[93,29],[94,30],[95,31],[96,32],[97,33],[98,34],[99,35],[100,36],[101,36],[102,37],[103,38],[105,39],[104,40],[106,41],[107,42],[108,43],[109,44],[110,45],[111,46],[112,47],[113,48],[114,49],[115,50],[116,51],[117,52],[118,53],[119,54],[120,55],[50,56],[49,1],[53,57],[51,58],[54,1],[52,59],[66,60],[55,61],[45,1],[43,1],[44,1],[8,1],[10,1],[9,1],[2,1],[11,1],[12,1],[13,1],[14,1],[15,1],[16,1],[17,1],[18,1],[3,1],[4,1],[22,1],[19,1],[20,1],[21,1],[23,1],[24,1],[25,1],[5,1],[26,1],[27,1],[28,1],[29,1],[6,1],[33,1],[30,1],[31,1],[32,1],[34,1],[7,1],[35,1],[40,1],[41,1],[36,1],[37,1],[38,1],[39,1],[1,1],[42,1],[68,64]],"semanticDiagnosticsPerFile":[46,56,57,60,58,62,65,64,63,61,59,47,48,123,69,70,72,73,74,75,76,77,78,79,80,81,82,84,83,85,86,87,71,121,88,89,90,122,91,92,93,94,95,96,97,98,99,100,101,102,103,105,104,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,50,49,53,51,54,52,66,55,45,43,44,8,10,9,2,11,12,13,14,15,16,17,18,3,4,22,19,20,21,23,24,25,5,26,27,28,29,6,33,30,31,32,34,7,35,40,41,36,37,38,39,1,42,67,68]},"version":"5.0.4"}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@operato/mini-map",
+  "description": "Webcomponent mini-map following open-wc recommendations",
+  "author": "heartyoh",
+  "version": "1.3.2",
+  "main": "dist/src/index.js",
+  "module": "dist/src/index.js",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "@operato:registry": "https://registry.npmjs.org"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hatiolab/operato.git",
+    "directory": "webcomponents/mini-map"
+  },
+  "exports": {
+    "./ox-mini-map.js": "./dist/src/ox-mini-map.js"
+  },
+  "typesVersions": {
+    "*": {
+      "ox-mini-map.js": [
+        "./dist/src/modeller/scene-viewer/ox-mini-map.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "analyze": "cem analyze --litelement",
+    "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
+    "build": "tsc && npm run analyze -- --exclude dist",
+    "prepublish": "tsc && npm run analyze -- --exclude dist",
+    "lint": "eslint --ext .ts,.html . --ignore-path ../../.gitignore && prettier \"**/*.ts\" --check --ignore-path ../../.gitignore",
+    "format": "eslint --ext .ts,.html . --fix --ignore-path ../../.gitignore && prettier \"**/*.ts\" --write --ignore-path ../../.gitignore",
+    "test": "tsc && wtr --coverage",
+    "test:watch": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wtr --watch\"",
+    "storybook": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds -c .storybook/server.mjs\"",
+    "storybook:build": "tsc && build-storybook"
+  },
+  "dependencies": {
+    "lit": "^2.5.0"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.8.1",
+    "@hatiolab/prettier-config": "^1.0.0",
+    "@open-wc/eslint-config": "^10.0.0",
+    "@open-wc/testing": "^3.1.6",
+    "@types/lodash-es": "^4.17.5",
+    "@typescript-eslint/eslint-plugin": "^5.59.1",
+    "@typescript-eslint/parser": "^5.59.1",
+    "@web/dev-server": "^0.2.1",
+    "@web/dev-server-storybook": "^0.7.1",
+    "@web/test-runner": "^0.16.1",
+    "concurrently": "^8.0.1",
+    "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.3.0",
+    "husky": "^8.0.1",
+    "lint-staged": "^13.2.2",
+    "prettier": "^2.4.1",
+    "tslib": "^2.3.1",
+    "typescript": "^5.0.4"
+  },
+  "customElements": "custom-elements.json",
+  "prettier": "@hatiolab/prettier-config",
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.ts": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "gitHead": "956de896ec0e99f6673a694d11adf9879649dd68"
+}

package/src/ox-mini-map.ts

@@ -0,0 +1,192 @@
+import { html, css, LitElement, PropertyValueMap } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+
+@customElement('ox-mini-map')
+class OxminimapComponent extends LitElement {
+  static styles = css`
+    :host {
+      display: flex;
+      position: relative;
+      background-color: gray;
+    }
+
+    #minimap {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      box-sizing: border-box;
+
+      background-color: white;
+      overflow: hidden;
+    }
+
+    #viewport {
+      position: absolute;
+      border: 1px dashed blue;
+      box-sizing: border-box;
+      pointer-events: none;
+      background-color: white;
+      pointer-events: auto;
+      cursor: move;
+    }
+  `
+
+  @property({ type: Object }) target: HTMLElement | null = null
+  private isDragging = false
+  private startX = 0
+  private startY = 0
+  private initialScrollLeft = 0
+  private initialScrollTop = 0
+
+  connectedCallback() {
+    super.connectedCallback()
+    window.addEventListener('resize', this.handleResize.bind(this))
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback()
+    window.removeEventListener('resize', this.handleResize.bind(this))
+  }
+
+  firstUpdated(changes: PropertyValueMap<any> | Map<PropertyKey, unknown>) {
+    super.firstUpdated(changes)
+
+    this.updateTarget()
+    this.checkVisibilityX()
+  }
+
+  updated(changedProperties: Map<string, any>) {
+    if (changedProperties.has('target')) {
+      this.updateTarget()
+    }
+  }
+
+  handleResize() {
+    this.updateTarget()
+    this.checkVisibilityX()
+  }
+
+  updateTarget() {
+    const target = this.target || this.parentElement
+    if (!target) {
+      return
+    }
+
+    const targetRatio = target.scrollHeight / target.scrollWidth
+    const thisRatio = this.offsetHeight / this.offsetWidth
+
+    const scale =
+      targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth
+
+    const minimapHeight = target.scrollHeight * scale
+    const minimapWidth = target.scrollWidth * scale
+
+    const viewportHeight = target.offsetHeight * scale
+    const viewportWidth = target.offsetWidth * scale
+
+    const minimap = this.shadowRoot?.getElementById('minimap') as HTMLElement
+    const viewport = this.shadowRoot?.getElementById('viewport') as HTMLElement
+
+    minimap.style.width = `${minimapWidth}px`
+    minimap.style.height = `${minimapHeight}px`
+
+    viewport.style.width = `${viewportWidth}px`
+    viewport.style.height = `${viewportHeight}px`
+
+    const viewportLeft = target.scrollLeft * scale
+    const viewportTop = target.scrollTop * scale
+
+    viewport.style.width = `${viewportWidth}px`
+    viewport.style.height = `${viewportHeight}px`
+    viewport.style.left = `${viewportLeft}px`
+    viewport.style.top = `${viewportTop}px`
+  }
+
+  checkVisibilityX() {
+    const parentElement = this.target || this.parentElement
+    if (!parentElement) return
+
+    const parentRect = parentElement.getBoundingClientRect()
+    const minimap = this.shadowRoot?.getElementById('minimap') as HTMLElement
+    if (parentRect.width >= minimap.offsetWidth && parentRect.height >= minimap.offsetHeight) {
+      this.style.display = 'block'
+    } else {
+      this.style.display = 'none'
+    }
+  }
+
+  handleMouseDown(event: MouseEvent) {
+    const target = this.target || this.parentElement
+
+    if (!target) {
+      return
+    }
+
+    const minimapViewport = this.shadowRoot?.getElementById('viewport') as HTMLElement
+    this.startX = event.clientX
+    this.startY = event.clientY
+    this.initialScrollLeft = target.scrollLeft || 0
+    this.initialScrollTop = target.scrollTop || 0
+    this.isDragging = true
+    minimapViewport.classList.add('dragging')
+    event.preventDefault()
+  }
+
+  handleMouseMove(event: MouseEvent) {
+    if (!this.isDragging) return
+    const deltaX = event.clientX - this.startX
+    const deltaY = event.clientY - this.startY
+
+    const target = this.target || this.parentElement
+
+    if (!target) {
+      return
+    }
+
+    const targetRatio = target.scrollHeight / target.scrollWidth
+    const thisRatio = this.offsetHeight / this.offsetWidth
+
+    const scale =
+      targetRatio > thisRatio ? this.offsetHeight / target.scrollHeight : this.offsetWidth / target.scrollWidth
+
+    const targetRect = target.getBoundingClientRect()
+    const viewportWidth = (targetRect.width * target.clientWidth) / target.scrollWidth
+    const viewportHeight = (targetRect.height * target.clientHeight) / target.scrollHeight
+    const scrollX = deltaX / scale
+    const scrollY = deltaY / scale
+    target.scrollTo(this.initialScrollLeft + scrollX, this.initialScrollTop + scrollY)
+    const minimapViewport = this.shadowRoot?.getElementById('viewport') as HTMLElement
+    minimapViewport.style.left = `${Math.max(
+      0,
+      Math.min(event.clientX - viewportWidth / 2, target.clientWidth - viewportWidth)
+    )}px`
+    minimapViewport.style.top = `${Math.max(
+      0,
+      Math.min(event.clientY - viewportHeight / 2, target.clientHeight - viewportHeight)
+    )}px`
+
+    this.updateTarget()
+    event.preventDefault()
+  }
+
+  handleMouseUp(event: MouseEvent) {
+    const minimapViewport = this.shadowRoot?.getElementById('minimap') as HTMLElement
+    this.isDragging = false
+    minimapViewport.classList.remove('dragging')
+    event.preventDefault()
+  }
+
+  render() {
+    return html`
+      <div id="minimap">
+        <div
+          id="viewport"
+          @mousedown=${this.handleMouseDown}
+          @mousemove=${this.handleMouseMove}
+          @mouseup=${this.handleMouseUp}
+        ></div>
+      </div>
+    `
+  }
+}

package/stories/index.stories.ts

@@ -0,0 +1,26 @@
+import { html, TemplateResult } from 'lit'
+import '../src/ox-mini-map.js'
+
+export default {
+  title: 'MiniMap',
+  component: 'mini-map',
+  argTypes: {}
+}
+
+interface Story<T> {
+  (args: T): TemplateResult
+  args?: Partial<T>
+  argTypes?: Record<string, unknown>
+}
+
+interface ArgTypes {}
+
+const Template: Story<ArgTypes> = ({}: ArgTypes) => html`
+  <div id="parent" style="overflow: auto; width: 100%; height: 500px;">
+    <div id="content" style="width: 1200px; height: 1000px"></div>
+    <ox-mini-map style="width: 100px; height: 100px; position: absolute; bottom: 10px; right: 10px;"> </ox-mini-map>
+  </div>
+`
+
+export const Regular = Template.bind({})
+Regular.args = {}

package/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2018",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "lib": ["es2017", "dom"],
+    "strict": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "importHelpers": true,
+    "outDir": "dist",
+    "sourceMap": true,
+    "inlineSources": true,
+    "rootDir": "./",
+    "declaration": true,
+    "incremental": true,
+    "types": ["node", "mocha"]
+  },
+  "include": ["**/*.ts", "*.d.ts"]
+}

package/web-dev-server.config.mjs

@@ -0,0 +1,27 @@
+// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
+
+/** Use Hot Module replacement by adding --hmr to the start command */
+const hmr = process.argv.includes('--hmr');
+
+export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
+  open: '/demo/',
+  /** Use regular watch mode if HMR is not enabled. */
+  watch: !hmr,
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto'
+
+  /** Set appIndex to enable SPA routing */
+  // appIndex: 'demo/index.html',
+
+  plugins: [
+    /** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
+    // hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
+  ],
+
+  // See documentation for all available options
+});

package/web-test-runner.config.mjs

@@ -0,0 +1,41 @@
+// import { playwrightLauncher } from '@web/test-runner-playwright';
+
+const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
+
+export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
+  /** Test files to run */
+  files: 'dist/test/**/*.test.js',
+
+  /** Resolve bare module imports */
+  nodeResolve: {
+    exportConditions: ['browser', 'development'],
+  },
+
+  /** Filter out lit dev mode logs */
+  filterBrowserLogs(log) {
+    for (const arg of log.args) {
+      if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
+        return false;
+      }
+    }
+    return true;
+  },
+
+  /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
+  // esbuildTarget: 'auto',
+
+  /** Amount of browsers to run concurrently */
+  // concurrentBrowsers: 2,
+
+  /** Amount of test files per browser to test concurrently */
+  // concurrency: 1,
+
+  /** Browsers to run tests on */
+  // browsers: [
+  //   playwrightLauncher({ product: 'chromium' }),
+  //   playwrightLauncher({ product: 'firefox' }),
+  //   playwrightLauncher({ product: 'webkit' }),
+  // ],
+
+  // See documentation for all available options
+});