@omegagrid/core 0.10.2 → 0.10.4

package/dist/ui/slider.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+export declare class SlideEvent extends Event {
+    readonly value: number;
+    constructor(type: string, value: number);
+}
+export declare enum SliderDirection {
+    Vertical = "vertical",
+    Horizontal = "horizontal"
+}
+export declare class Slider extends LitElement {
+    #private;
+    static readonly DEFAULT_MAX_VALUE = 100;
+    static readonly DEFAULT_PAGE_SIZE = 20;
+    static readonly SLIDE_DELAY = 5;
+    static styles: import("lit").CSSResult[];
+    direction: SliderDirection;
+    value: number;
+    maxValue: number;
+    cursor: string;
+    pageSize: number;
+    hidden: boolean;
+    innerBar: HTMLDivElement;
+    private barRef;
+    private pos0;
+    private page0;
+    private _value;
+    private _sliding;
+    get sliding(): boolean;
+    show: () => boolean;
+    hide: () => boolean;
+    private calcValue;
+    get barSize(): number;
+    private onDocumentMouseMove;
+    private onDocumentMouseUp;
+    _onMouseDown: (e: MouseEvent) => void;
+    setText(text: string): void;
+    _onClick: (e: MouseEvent) => void;
+    render: () => import("lit-html").TemplateResult<1>;
+    willUpdate(props: Map<string, unknown>): void;
+    updated(props: Map<string, unknown>): void;
+    updatePosition(): void;
+    get scrollKey(): "scrollTop" | "scrollLeft";
+    _onSlide: () => void;
+    _onScroll: () => void;
+    _onWheel: (e: WheelEvent) => void;
+    _onTouchStart: (e: TouchEvent) => void;
+    _onTouchEnd: () => void;
+    _onTouchMove: (e: TouchEvent) => void;
+    attachElement(element: HTMLElement): void;
+    deatachElement(): void;
+}
+//# sourceMappingURL=slider.d.ts.map

package/dist/ui/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/ui/slider.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,qBAAa,UAAW,SAAQ,KAAK;aACM,KAAK,EAAE,MAAM;gBAA3C,IAAI,EAAE,MAAM,EAAkB,KAAK,EAAE,MAAM;CAGvD;AAED,oBAAY,eAAe;IAC1B,QAAQ,aAAa;IACrB,UAAU,eAAe;CACzB;AAED,qBACa,MAAO,SAAQ,UAAU;;IAErC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,OAAO;IACxC,MAAM,CAAC,QAAQ,CAAC,iBAAiB,MAAM;IACvC,MAAM,CAAC,QAAQ,CAAC,WAAW,KAAK;IAEhC,MAAM,CAAC,MAAM,4BAAW;IAGxB,SAAS,EAAE,eAAe,CAAC;IAG3B,KAAK,SAAK;IAGV,QAAQ,SAAK;IAGb,MAAM,EAAE,MAAM,CAAC;IAGf,QAAQ,EAAE,MAAM,CAAC;IAGjB,MAAM,EAAE,OAAO,CAAC;IAGhB,QAAQ,EAAE,cAAc,CAAC;IAEzB,OAAO,CAAC,MAAM,CAAoC;IAClD,OAAO,CAAC,IAAI,CAAK;IACjB,OAAO,CAAC,KAAK,CAAK;IAClB,OAAO,CAAC,MAAM,CAAS;IAEvB,OAAO,CAAC,QAAQ,CAAS;IACzB,IAAI,OAAO,YAA4B;IAEvC,IAAI,gBAA6B;IACjC,IAAI,gBAA4B;IAEhC,OAAO,CAAC,SAAS;IAMjB,IAAI,OAAO,IAAK,MAAM,CAMrB;IAED,OAAO,CAAC,mBAAmB,CAWzB;IAEF,OAAO,CAAC,iBAAiB,CAOvB;IAEF,YAAY,GAAI,GAAG,UAAU,UAU5B;IAED,OAAO,CAAC,IAAI,EAAE,MAAM;IAIpB,QAAQ,GAAI,GAAG,UAAU,UAExB;IAED,MAAM,6CAMJ;IAEF,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAOtC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IASnC,cAAc;IAkBd,IAAI,SAAS,+BAAuE;IAEpF,QAAQ,aAEP;IAED,SAAS,aAER;IAED,QAAQ,GAAI,GAAG,UAAU,UAExB;IAED,aAAa,GAAI,GAAG,UAAU,UAE5B;IAEF,WAAW,aAET;IAEF,YAAY,GAAI,GAAG,UAAU,UAM5B;IAED,aAAa,CAAC,OAAO,EAAE,WAAW;IAkBlC,cAAc;CAYd"}

package/dist/ui/slider.js

@@ -0,0 +1,213 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _Slider_attachedParent, _Slider_attachedParentObserver, _Slider_touchStart;
+import * as dom from '../common/dom';
+import constants from '../constants';
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { style } from './slider.style';
+export class SlideEvent extends Event {
+    constructor(type, value) {
+        super(type);
+        this.value = value;
+    }
+}
+export var SliderDirection;
+(function (SliderDirection) {
+    SliderDirection["Vertical"] = "vertical";
+    SliderDirection["Horizontal"] = "horizontal";
+})(SliderDirection || (SliderDirection = {}));
+let Slider = class Slider extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.value = 0;
+        this.maxValue = 0;
+        this.barRef = createRef();
+        this.pos0 = 0;
+        this.page0 = 0;
+        this._sliding = false;
+        this.show = () => this.hidden = false;
+        this.hide = () => this.hidden = true;
+        this.onDocumentMouseMove = (e) => {
+            e.preventDefault();
+            const delta = (this.direction == SliderDirection.Vertical ? e.pageY : e.pageX) - this.page0;
+            dom.setPosition(this.barRef.value, this.direction == SliderDirection.Vertical
+                ? { t: Math.min(Math.max(this.pos0 + delta, 0), this.clientHeight - this.barRef.value.clientHeight) }
+                : { l: Math.min(Math.max(this.pos0 + delta, 0), this.clientWidth - this.barRef.value.clientWidth) });
+            this._value = this.calcValue();
+            this.dispatchEvent(new SlideEvent('slide', this._value));
+        };
+        this.onDocumentMouseUp = () => {
+            this.classList.remove('sliding');
+            document.removeEventListener('mouseup', this.onDocumentMouseUp);
+            document.removeEventListener('mousemove', this.onDocumentMouseMove);
+            this.value = this._value;
+            this._sliding = false;
+            this.dispatchEvent(new SlideEvent('slideEnd', this.value));
+        };
+        this._onMouseDown = (e) => {
+            this._sliding = true;
+            e.preventDefault();
+            e.stopPropagation();
+            this.pos0 = (this.direction == SliderDirection.Vertical ? this.barRef.value.offsetTop : this.barRef.value.offsetLeft);
+            this.page0 = this.direction == SliderDirection.Vertical ? e.pageY : e.pageX;
+            this.classList.add('sliding');
+            document.addEventListener('mouseup', this.onDocumentMouseUp);
+            document.addEventListener('mousemove', this.onDocumentMouseMove);
+            this.dispatchEvent(new SlideEvent('slideStart', this.value));
+        };
+        this._onClick = (e) => {
+            console.log(e);
+        };
+        this.render = () => html `
+		<div ${ref(this.barRef)}
+			class="bar"
+			@mousedown="${this._onMouseDown}">
+			<div class="bar-inner" style="${styleMap({ cursor: this.cursor })}"></div>
+		</div>
+	`;
+        _Slider_attachedParent.set(this, void 0);
+        _Slider_attachedParentObserver.set(this, void 0);
+        _Slider_touchStart.set(this, void 0);
+        this._onSlide = () => {
+            __classPrivateFieldGet(this, _Slider_attachedParent, "f")[this.scrollKey] = this._value;
+        };
+        this._onScroll = () => {
+            this.value = __classPrivateFieldGet(this, _Slider_attachedParent, "f")[this.scrollKey];
+        };
+        this._onWheel = (e) => {
+            this.value += this.direction == 'vertical' ? e.deltaY : e.deltaX;
+        };
+        this._onTouchStart = (e) => {
+            __classPrivateFieldSet(this, _Slider_touchStart, e.touches[0], "f");
+        };
+        this._onTouchEnd = () => {
+            __classPrivateFieldSet(this, _Slider_touchStart, null, "f");
+        };
+        this._onTouchMove = (e) => {
+            if (__classPrivateFieldGet(this, _Slider_touchStart, "f")) {
+                const touch = e.touches[0];
+                this.value += __classPrivateFieldGet(this, _Slider_touchStart, "f").clientY - touch.clientY;
+                __classPrivateFieldSet(this, _Slider_touchStart, touch, "f");
+            }
+        };
+    }
+    get sliding() { return this._sliding; }
+    calcValue() {
+        return Math.round(this.direction == SliderDirection.Vertical
+            ? (this.barRef.value.offsetTop * this.maxValue / (this.clientHeight - this.barRef.value.clientHeight))
+            : this.maxValue * (this.barRef.value.offsetLeft / (this.clientWidth - this.barRef.value.clientWidth)));
+    }
+    get barSize() {
+        return Math.max(constants.SLIDER_MIN_LENGTH, Math.round((this.direction == SliderDirection.Vertical ? this.clientHeight : this.clientWidth) * this.pageSize / (this.pageSize + this.maxValue)));
+    }
+    setText(text) {
+        this.innerBar.innerText = text;
+    }
+    willUpdate(props) {
+        if (props.has('value')) {
+            this.value = this.value == null ? 0 : Math.min(this.maxValue, Math.max(0, this.value));
+            this._value = this.value;
+        }
+    }
+    updated(props) {
+        if (this.sliding)
+            return; // do not allow external update while sliding
+        this.updatePosition();
+        if (props.has('value') && __classPrivateFieldGet(this, _Slider_attachedParent, "f")) {
+            __classPrivateFieldGet(this, _Slider_attachedParent, "f")[this.scrollKey] = this.value;
+        }
+    }
+    updatePosition() {
+        const barSize = this.barSize;
+        if (this.barRef.value) {
+            if (this.direction == SliderDirection.Vertical) {
+                dom.setSize(this.barRef.value, { w: '100%', h: barSize });
+                dom.setPosition(this.barRef.value, { t: Math.round(this.value * (this.clientHeight - barSize) / this.maxValue) });
+            }
+            else {
+                dom.setSize(this.barRef.value, { w: barSize, h: '100%' });
+                dom.setPosition(this.barRef.value, { l: Math.round(this.value * (this.clientWidth - barSize) / this.maxValue) });
+            }
+        }
+    }
+    get scrollKey() { return this.direction == 'vertical' ? 'scrollTop' : 'scrollLeft'; }
+    attachElement(element) {
+        __classPrivateFieldSet(this, _Slider_attachedParent, element, "f");
+        this.pageSize = element.clientHeight;
+        this.maxValue = element.scrollHeight - element.clientHeight;
+        this.addEventListener('slide', this._onSlide);
+        __classPrivateFieldGet(this, _Slider_attachedParent, "f").addEventListener('scroll', this._onScroll);
+        __classPrivateFieldGet(this, _Slider_attachedParent, "f").addEventListener('wheel', this._onWheel, { passive: true });
+        __classPrivateFieldGet(this, _Slider_attachedParent, "f").addEventListener('touchmove', this._onTouchMove, { passive: true });
+        __classPrivateFieldGet(this, _Slider_attachedParent, "f").addEventListener('touchstart', this._onTouchStart, { passive: true });
+        __classPrivateFieldGet(this, _Slider_attachedParent, "f").addEventListener('touchend', this._onTouchEnd, { passive: true });
+        __classPrivateFieldSet(this, _Slider_attachedParentObserver, new MutationObserver(() => {
+            this.pageSize = element.clientHeight;
+            this.maxValue = element.scrollHeight - element.clientHeight;
+        }), "f");
+        __classPrivateFieldGet(this, _Slider_attachedParentObserver, "f").observe(element, { attributes: true, childList: true, subtree: true });
+    }
+    deatachElement() {
+        this.removeEventListener('slide', this._onSlide);
+        __classPrivateFieldGet(this, _Slider_attachedParent, "f").removeEventListener('scroll', this._onScroll);
+        __classPrivateFieldGet(this, _Slider_attachedParent, "f").removeEventListener('wheel', this._onWheel);
+        __classPrivateFieldGet(this, _Slider_attachedParent, "f").removeEventListener('touchmove', this._onTouchMove);
+        __classPrivateFieldGet(this, _Slider_attachedParent, "f").removeEventListener('touchstart', this._onTouchStart);
+        __classPrivateFieldGet(this, _Slider_attachedParent, "f").removeEventListener('touchend', this._onTouchEnd);
+        __classPrivateFieldSet(this, _Slider_attachedParent, null, "f");
+        if (__classPrivateFieldGet(this, _Slider_attachedParentObserver, "f"))
+            __classPrivateFieldGet(this, _Slider_attachedParentObserver, "f").disconnect();
+        __classPrivateFieldSet(this, _Slider_attachedParentObserver, null, "f");
+    }
+};
+_Slider_attachedParent = new WeakMap();
+_Slider_attachedParentObserver = new WeakMap();
+_Slider_touchStart = new WeakMap();
+Slider.DEFAULT_MAX_VALUE = 100;
+Slider.DEFAULT_PAGE_SIZE = 20;
+Slider.SLIDE_DELAY = 5;
+Slider.styles = [style];
+__decorate([
+    property({ type: String, reflect: true })
+], Slider.prototype, "direction", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "value", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "maxValue", void 0);
+__decorate([
+    property({ type: String })
+], Slider.prototype, "cursor", void 0);
+__decorate([
+    property({ type: Number })
+], Slider.prototype, "pageSize", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Slider.prototype, "hidden", void 0);
+__decorate([
+    query('.bar-inner')
+], Slider.prototype, "innerBar", void 0);
+Slider = __decorate([
+    customElement('og-slider')
+], Slider);
+export { Slider };
+//# sourceMappingURL=slider.js.map

package/dist/ui/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../src/ui/slider.ts"],"names":[],"mappings":"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","sourcesContent":["import * as dom from '../common/dom';\nimport constants from '../constants';\nimport { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { createRef, Ref, ref } from 'lit/directives/ref.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { style } from './slider.style';\n\nexport class SlideEvent extends Event {\n\tconstructor(type: string, public readonly value: number) {\n\t\tsuper(type);\n\t}\n}\n\nexport enum SliderDirection {\n\tVertical = 'vertical',\n\tHorizontal = 'horizontal'\n}\n\n@customElement('og-slider')\nexport class Slider extends LitElement {\n\n\tstatic readonly DEFAULT_MAX_VALUE = 100;\n\tstatic readonly DEFAULT_PAGE_SIZE = 20;\n\tstatic readonly SLIDE_DELAY = 5;\n\n\tstatic styles = [style];\n\n\t@property({type: String, reflect: true})\n\tdirection: SliderDirection;\n\t\n\t@property({type: Number})\n\tvalue = 0;\n\n\t@property({type: Number})\n\tmaxValue = 0;\n\n\t@property({type: String})\n\tcursor: string;\n\t\n\t@property({type: Number})\n\tpageSize: number;\n\n\t@property({type: Boolean, reflect: true})\n\thidden: boolean;\n\n\t@query('.bar-inner')\n\tinnerBar: HTMLDivElement;\n\n\tprivate barRef: Ref<HTMLDivElement> = createRef();\n\tprivate pos0 = 0;\n\tprivate page0 = 0;\n\tprivate _value: number;\n\t\n\tprivate _sliding = false;\n\tget sliding() { return this._sliding; }\n\t\n\tshow = () => this.hidden = false;\n\thide = () => this.hidden = true;\n\t\n\tprivate calcValue() : number {\n\t\treturn Math.round(this.direction == SliderDirection.Vertical\n\t\t\t? (this.barRef.value.offsetTop * this.maxValue / (this.clientHeight - this.barRef.value.clientHeight))\n\t\t\t: this.maxValue * (this.barRef.value.offsetLeft / (this.clientWidth - this.barRef.value.clientWidth)));\n\t}\n\n\tget barSize() : number {\n\t\treturn Math.max(\n\t\t\tconstants.SLIDER_MIN_LENGTH, Math.round(\n\t\t\t\t(this.direction == SliderDirection.Vertical ? this.clientHeight : this.clientWidth) * this.pageSize / (this.pageSize + this.maxValue)\n\t\t\t)\n\t\t);\n\t}\n\n\tprivate onDocumentMouseMove = (e: MouseEvent) => {\n\t\te.preventDefault();\n\t\tconst delta = (this.direction == SliderDirection.Vertical ? e.pageY : e.pageX) - this.page0;\n\n\t\tdom.setPosition(this.barRef.value, this.direction == SliderDirection.Vertical \n\t\t\t? {t: Math.min(Math.max(this.pos0 + delta, 0), this.clientHeight - this.barRef.value.clientHeight)} \n\t\t\t: {l: Math.min(Math.max(this.pos0 + delta, 0), this.clientWidth - this.barRef.value.clientWidth)} \n\t\t);\n\n\t\tthis._value = this.calcValue();\n\t\tthis.dispatchEvent(new SlideEvent('slide', this._value));\n\t};\n\n\tprivate onDocumentMouseUp = () => {\n\t\tthis.classList.remove('sliding');\n\t\tdocument.removeEventListener('mouseup', this.onDocumentMouseUp);\n\t\tdocument.removeEventListener('mousemove', this.onDocumentMouseMove);\n\t\tthis.value = this._value;\n\t\tthis._sliding = false;\n\t\tthis.dispatchEvent(new SlideEvent('slideEnd', this.value));\n\t};\n\n\t_onMouseDown = (e: MouseEvent) => {\n\t\tthis._sliding = true;\n\t\te.preventDefault();\n\t\te.stopPropagation();\n\t\tthis.pos0 = (this.direction == SliderDirection.Vertical ? this.barRef.value.offsetTop : this.barRef.value.offsetLeft);\n\t\tthis.page0 = this.direction == SliderDirection.Vertical ? e.pageY : e.pageX;\n\t\tthis.classList.add('sliding');\n\t\tdocument.addEventListener('mouseup', this.onDocumentMouseUp);\n\t\tdocument.addEventListener('mousemove', this.onDocumentMouseMove);\n\t\tthis.dispatchEvent(new SlideEvent('slideStart', this.value));\n\t}\n\n\tsetText(text: string) {\n\t\tthis.innerBar.innerText = text;\n\t}\n\n\t_onClick = (e: MouseEvent) => {\n\t\tconsole.log(e);\n\t}\n\n\trender = () => html`\n\t\t<div ${ref(this.barRef)}\n\t\t\tclass=\"bar\"\n\t\t\t@mousedown=\"${this._onMouseDown}\">\n\t\t\t<div class=\"bar-inner\" style=\"${styleMap({cursor: this.cursor})}\"></div>\n\t\t</div>\n\t`;\n\n\twillUpdate(props: Map<string, unknown>) {\n\t\tif (props.has('value')) {\n\t\t\tthis.value = this.value == null ? 0 : Math.min(this.maxValue, Math.max(0, this.value));\n\t\t\tthis._value = this.value;\n\t\t}\n\t}\n\t\n\tupdated(props: Map<string, unknown>) {\n\t\tif (this.sliding) return; // do not allow external update while sliding\n\t\tthis.updatePosition();\n\n\t\tif (props.has('value') &&  this.#attachedParent) {\n\t\t\tthis.#attachedParent[this.scrollKey] = this.value;\n\t\t}\n\t}\n\t\n\tupdatePosition() {\n\t\tconst barSize = this.barSize;\n\t\tif (this.barRef.value) {\n\t\t\tif (this.direction == SliderDirection.Vertical) {\n\t\t\t\tdom.setSize(this.barRef.value, {w: '100%', h: barSize});\n\t\t\t\tdom.setPosition(this.barRef.value, {t: Math.round(this.value * (this.clientHeight - barSize) / this.maxValue)});\n\t\t\t} else {\n\t\t\t\tdom.setSize(this.barRef.value, {w: barSize, h: '100%'});\n\t\t\t\tdom.setPosition(this.barRef.value, {l: Math.round(this.value * (this.clientWidth - barSize) / this.maxValue)});\n\t\t\t}\n\t\t}\n\t}\n\n\n\t#attachedParent: HTMLElement;\n\t#attachedParentObserver: MutationObserver;\n\t#touchStart: Touch;\n\n\tget scrollKey() { return this.direction == 'vertical' ? 'scrollTop' : 'scrollLeft' }\n\n\t_onSlide = () => {\n\t\tthis.#attachedParent[this.scrollKey] = this._value;\n\t}\n\n\t_onScroll = () => {\n\t\tthis.value = this.#attachedParent[this.scrollKey];\n\t}\n\n\t_onWheel = (e: WheelEvent) => {\n\t\tthis.value += this.direction == 'vertical' ? e.deltaY : e.deltaX;\n\t}\n\n\t_onTouchStart = (e: TouchEvent) => {\n\t\tthis.#touchStart = e.touches[0];\n\t};\n\n\t_onTouchEnd = () => {\n\t\tthis.#touchStart = null;\n\t};\n\n\t_onTouchMove = (e: TouchEvent) => {\n\t\tif (this.#touchStart) {\n\t\t\tconst touch = e.touches[0];\n\t\t\tthis.value += this.#touchStart.clientY - touch.clientY;\n\t\t\tthis.#touchStart = touch;\n\t\t}\n\t}\n\n\tattachElement(element: HTMLElement) {\n\t\tthis.#attachedParent = element;\n\t\tthis.pageSize = element.clientHeight;\n\t\tthis.maxValue = element.scrollHeight - element.clientHeight;\n\t\tthis.addEventListener('slide', this._onSlide);\n\t\tthis.#attachedParent.addEventListener('scroll', this._onScroll);\n\t\tthis.#attachedParent.addEventListener('wheel', this._onWheel, {passive: true});\n\t\tthis.#attachedParent.addEventListener('touchmove', this._onTouchMove, {passive: true});\n\t\tthis.#attachedParent.addEventListener('touchstart', this._onTouchStart, {passive: true});\n\t\tthis.#attachedParent.addEventListener('touchend', this._onTouchEnd, {passive: true});\n\n\t\tthis.#attachedParentObserver = new MutationObserver(() => {\n\t\t\tthis.pageSize = element.clientHeight;\n\t\t\tthis.maxValue = element.scrollHeight - element.clientHeight;\n\t\t});\n\t\tthis.#attachedParentObserver.observe(element, {attributes: true, childList: true, subtree: true});\n\t}\n\n\tdeatachElement() {\n\t\tthis.removeEventListener('slide', this._onSlide);\n\t\tthis.#attachedParent.removeEventListener('scroll', this._onScroll);\n\t\tthis.#attachedParent.removeEventListener('wheel', this._onWheel);\n\t\tthis.#attachedParent.removeEventListener('touchmove', this._onTouchMove);\n\t\tthis.#attachedParent.removeEventListener('touchstart', this._onTouchStart);\n\t\tthis.#attachedParent.removeEventListener('touchend', this._onTouchEnd);\n\t\tthis.#attachedParent = null;\n\t\tif (this.#attachedParentObserver) this.#attachedParentObserver.disconnect();\n\t\tthis.#attachedParentObserver = null;\n\t}\n\n}"]}

package/dist/ui/slider.style.d.ts

@@ -0,0 +1,2 @@
+export declare const style: import("lit").CSSResult;
+//# sourceMappingURL=slider.style.d.ts.map

package/dist/ui/slider.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.style.d.ts","sourceRoot":"","sources":["../../src/ui/slider.style.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,KAAK,yBAyDjB,CAAC"}

package/dist/ui/slider.style.js

@@ -0,0 +1,61 @@
+import { css, unsafeCSS } from 'lit';
+import constants from '../constants';
+export const style = css `
+	* {
+		box-sizing: border-box;
+	}
+
+	:host {
+		display: block;
+		background-color: var(--og-slider-background-color);
+		position: relative;
+		opacity: 0.8;
+		transition: visibility 0s, opacity 0.1s linear;
+		font-size: var(--og-font-size);
+		z-index: 100;
+	}
+
+	:host([hidden]) {
+		visibility: hidden;
+		opacity: 0;
+		transition: opacity 1s linear, visibility 0s 1s;
+	}
+
+	:host([direction="vertical"]) {
+		position: absolute;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		width: ${unsafeCSS(constants.SLIDER_SIZE)}px
+	}
+
+	:host([direction="vertical"]) .bar {
+		width: 100%;
+	}
+
+	:host([direction="horizontal"]) .bar {
+		height: 100%;
+	}
+
+	:host([direction="horizontal"]) {
+		position: absolute;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		height: ${unsafeCSS(constants.SLIDER_SIZE)}px
+	}
+
+	.bar {
+		position: absolute;
+	}
+
+	.bar-inner {
+		width: 100%;
+		height: 100%;
+		background-color: var(--og-slider-bar-color);
+		_border: 1px solid #8B8B8B;
+		text-align: center;
+		border-radius: 6px;
+	}
+`;
+//# sourceMappingURL=slider.style.js.map

package/dist/ui/slider.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.style.js","sourceRoot":"","sources":["../../src/ui/slider.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,SAAS,MAAM,cAAc,CAAC;AAErC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;WA0Bb,SAAS,CAAC,SAAS,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;;YAgB/B,SAAS,CAAC,SAAS,CAAC,WAAW,CAAC;;;;;;;;;;;;;;;CAe3C,CAAC","sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport constants from '../constants';\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host {\n\t\tdisplay: block;\n\t\tbackground-color: var(--og-slider-background-color);\n\t\tposition: relative;\n\t\topacity: 0.8;\n\t\ttransition: visibility 0s, opacity 0.1s linear;\n\t\tfont-size: var(--og-font-size);\n\t\tz-index: 100;\n\t}\n\n\t:host([hidden]) {\n\t\tvisibility: hidden;\n\t\topacity: 0;\n\t\ttransition: opacity 1s linear, visibility 0s 1s;\n\t}\n\n\t:host([direction=\"vertical\"]) {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: ${unsafeCSS(constants.SLIDER_SIZE)}px\n\t}\n\n\t:host([direction=\"vertical\"]) .bar {\n\t\twidth: 100%;\n\t}\n\n\t:host([direction=\"horizontal\"]) .bar {\n\t\theight: 100%;\n\t}\n\n\t:host([direction=\"horizontal\"]) {\n\t\tposition: absolute;\n\t\tright: 0;\n\t\tleft: 0;\n\t\tbottom: 0;\n\t\theight: ${unsafeCSS(constants.SLIDER_SIZE)}px\n\t}\n\n\t.bar {\n\t\tposition: absolute;\n\t}\n\n\t.bar-inner {\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tbackground-color: var(--og-slider-bar-color);\n\t\t_border: 1px solid #8B8B8B;\n\t\ttext-align: center;\n\t\tborder-radius: 6px;\n\t}\n`;\n"]}

package/dist/ui/sortableList.d.ts

@@ -0,0 +1,39 @@
+import { List, ListItemElement } from './list';
+import { Direction } from '../types';
+export interface SortableListItem extends HTMLElement {
+    moveHandle?: HTMLElement;
+}
+export declare class ListSortEvent extends Event {
+    readonly fromIndex: number;
+    readonly toIndex: number;
+    readonly sourceList: SortableList;
+    readonly targetList: SortableList;
+    readonly drop: 'before' | 'after';
+    constructor(type: string, args?: Partial<ListSortEvent>);
+}
+export declare class SortableList extends List {
+    static sourceList: SortableList;
+    connectedLists: SortableList[];
+    customHandle: boolean;
+    private _sorting;
+    get sorting(): boolean;
+    get connectedSorting(): boolean;
+    private sortIndex;
+    private targetIndex;
+    private markedItem;
+    private drop;
+    private autoscrollTimer;
+    private autoscrollDirection;
+    static contentStyles: import("lit").CSSResult[];
+    constructor();
+    startSorting(item: ListItemElement): void;
+    removeMark(): void;
+    stopSorting(dispatchEvent?: boolean): void;
+    startAutoscroll(direction: Direction): void;
+    stopAutoscroll(): void;
+    _onMouseDown: (e: MouseEvent) => void;
+    _onMouseUp: () => void;
+    _onMouseMove: (e: MouseEvent) => void;
+    firstUpdated(): void;
+}
+//# sourceMappingURL=sortableList.d.ts.map

package/dist/ui/sortableList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortableList.d.ts","sourceRoot":"","sources":["../../src/ui/sortableList.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,QAAQ,CAAC;AAE/C,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAGrC,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACpD,UAAU,CAAC,EAAE,WAAW,CAAC;CACzB;AAED,qBAAa,aAAc,SAAQ,KAAK;IAEvC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,UAAU,EAAE,YAAY,CAAC;IAClC,QAAQ,CAAC,UAAU,EAAE,YAAY,CAAC;IAClC,QAAQ,CAAC,IAAI,EAAE,QAAQ,GAAC,OAAO,CAAC;gBAEpB,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC;CAKvD;AAED,qBACa,YAAa,SAAQ,IAAI;IAErC,MAAM,CAAC,UAAU,EAAE,YAAY,CAAC;IAChC,cAAc,EAAE,YAAY,EAAE,CAAC;IAG/B,YAAY,UAAS;IAErB,OAAO,CAAC,QAAQ,CAAS;IACzB,IAAI,OAAO,IAAK,OAAO,CAAyB;IAChD,IAAI,gBAAgB,IAAK,OAAO,CAE/B;IAED,OAAO,CAAC,SAAS,CAAM;IACvB,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,IAAI,CAAmB;IAC/B,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,mBAAmB,CAAY;IAEvC,MAAM,CAAC,aAAa,4BAgBjB;;IAMH,YAAY,CAAC,IAAI,EAAE,eAAe;IAQlC,UAAU;IAIV,WAAW,CAAC,aAAa,CAAC,EAAE,OAAO;IAsBnC,eAAe,CAAC,SAAS,EAAE,SAAS;IAcpC,cAAc;IAQd,YAAY,GAAI,GAAG,UAAU,UAc5B;IAED,UAAU,aAET;IAED,YAAY,GAAI,GAAG,UAAU,UAgC5B;IAED,YAAY;CAQZ"}

package/dist/ui/sortableList.js

@@ -0,0 +1,167 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var SortableList_1;
+import { css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { List } from './list';
+import { dom } from '../common';
+import constants from '../constants';
+export class ListSortEvent extends Event {
+    constructor(type, args) {
+        super(`list.${type}`, { bubbles: true, composed: true });
+        if (args)
+            Object.assign(this, args);
+    }
+}
+let SortableList = SortableList_1 = class SortableList extends List {
+    get sorting() { return this._sorting; }
+    get connectedSorting() {
+        return this.connectedLists && this.connectedLists.some(list => list.sorting);
+    }
+    constructor() {
+        super();
+        this.customHandle = false;
+        this._sorting = false;
+        this.sortIndex = -1;
+        this.targetIndex = -1;
+        this._onMouseDown = (e) => {
+            const path = e.composedPath();
+            const item = path.find((el) => el.classList && el.classList.contains('item'));
+            if (this.customHandle) {
+                let handle = item && item.moveHandle;
+                if (!handle && item?.firstElementChild) {
+                    handle = item.firstElementChild.moveHandle;
+                }
+                if (handle && path.find((el) => el == handle)) {
+                    this.startSorting(item);
+                }
+            }
+            else if (item)
+                this.startSorting(item);
+        };
+        this._onMouseUp = () => {
+            this.stopSorting(true);
+        };
+        this._onMouseMove = (e) => {
+            if (this.sorting || this.connectedSorting) {
+                this.connectedLists?.forEach(list => list.removeMark());
+                const item = e.composedPath().find((el) => el.classList && el.classList.contains('item'));
+                if (!(item instanceof HTMLElement))
+                    return;
+                const offset = dom.getElementOffset(item, this.container);
+                const top = offset.top + e.offsetY;
+                if (top < constants.LIST_AUTOSCROLL_TRESHOLD) {
+                    this.startAutoscroll('up');
+                }
+                else if (this.container.clientHeight - top < constants.LIST_AUTOSCROLL_TRESHOLD) {
+                    this.startAutoscroll('down');
+                }
+                else {
+                    this.stopAutoscroll();
+                }
+                if (this.markedItem)
+                    this.markedItem.classList.remove('target-prev', 'target-next');
+                if (e.offsetY > item.clientHeight / 2) {
+                    item.classList.add('target-next');
+                    this.drop = 'after';
+                }
+                else {
+                    item.classList.add('target-prev');
+                    this.drop = 'before';
+                }
+                this.markedItem = item;
+                this.targetIndex = item.index;
+            }
+        };
+    }
+    startSorting(item) {
+        SortableList_1.sourceList = this;
+        this._sorting = true;
+        this.sortIndex = item.index;
+        this.dispatchEvent(new ListSortEvent('sortstart', { fromIndex: this.sortIndex, sourceList: this }));
+        document.body.addEventListener('mouseup', () => this.stopSorting(false), { once: true });
+    }
+    removeMark() {
+        this.markedItem?.classList.remove('target-prev', 'target-next');
+    }
+    stopSorting(dispatchEvent) {
+        this._sorting = false;
+        this.stopAutoscroll();
+        this.removeMark();
+        if (this.targetIndex > -1 && dispatchEvent) {
+            this.dispatchEvent(new ListSortEvent('sort', {
+                fromIndex: (SortableList_1.sourceList ? SortableList_1.sourceList : this).sortIndex,
+                toIndex: this.targetIndex,
+                sourceList: SortableList_1.sourceList,
+                targetList: this,
+                drop: this.drop
+            }));
+        }
+        this.targetIndex = -1;
+        this.sortIndex = -1;
+        SortableList_1.sourceList = null;
+        if (dispatchEvent)
+            this.dispatchEvent(new ListSortEvent('sortend'));
+    }
+    startAutoscroll(direction) {
+        if (this.autoscrollDirection == direction)
+            return;
+        this.autoscrollDirection = direction;
+        this.autoscrollTimer = window.setInterval(() => {
+            if (this.autoscrollDirection == 'down') {
+                const offset = Math.min(this.offset + this.itemHeight, this.size * this.itemHeight - this.clientHeight);
+                if (offset > this.offset)
+                    this.scrollToOffset(offset);
+            }
+            else {
+                const offset = Math.max(0, this.offset - this.itemHeight);
+                if (offset < this.offset)
+                    this.scrollToOffset(offset);
+            }
+        }, constants.LIST_AUTOSCROLL_DELAY);
+    }
+    stopAutoscroll() {
+        if (this.autoscrollTimer != null) {
+            clearInterval(this.autoscrollTimer);
+            this.autoscrollTimer = null;
+            this.autoscrollDirection = null;
+        }
+    }
+    firstUpdated() {
+        super.firstUpdated();
+        if (!this.container)
+            return;
+        this.container.addEventListener('mousedown', this._onMouseDown);
+        this.container.addEventListener('mousemove', this._onMouseMove);
+        this.container.addEventListener('mouseup', this._onMouseUp);
+    }
+};
+SortableList.contentStyles = [...List.contentStyles, css `
+		.item {
+			cursor: move !important;
+		}
+
+		:host([customHandle]) .item {
+			cursor: default !important;
+		}
+
+		.item.target-prev {
+			border-top: 2px solid var(--og-accent-color);
+		}
+
+		.item.target-next {
+			border-bottom: 2px solid var(--og-accent-color);
+		}
+	`];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SortableList.prototype, "customHandle", void 0);
+SortableList = SortableList_1 = __decorate([
+    customElement(`og-sortablelist`)
+], SortableList);
+export { SortableList };
+//# sourceMappingURL=sortableList.js.map

package/dist/ui/sortableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortableList.js","sourceRoot":"","sources":["../../src/ui/sortableList.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { List, ListItemElement } from './list';\nimport { dom } from '../common';\nimport { Direction } from '../types';\nimport constants from '../constants';\n\nexport interface SortableListItem extends HTMLElement {\n\tmoveHandle?: HTMLElement;\n}\n\nexport class ListSortEvent extends Event {\n\n\treadonly fromIndex: number;\n\treadonly toIndex: number;\n\treadonly sourceList: SortableList;\n\treadonly targetList: SortableList;\n\treadonly drop: 'before'|'after';\n\n\tconstructor(type: string, args?: Partial<ListSortEvent>) {\n\t\tsuper(`list.${type}`, {bubbles: true, composed: true});\n\t\tif (args) Object.assign(this, args);\n\t}\n\n}\n\n@customElement(`og-sortablelist`)\nexport class SortableList extends List {\n\n\tstatic sourceList: SortableList;\n\tconnectedLists: SortableList[];\n\n\t@property({type: Boolean, reflect: true})\n\tcustomHandle = false;\n\n\tprivate _sorting = false;\n\tget sorting() : boolean { return this._sorting }\n\tget connectedSorting() : boolean {\n\t\treturn this.connectedLists && this.connectedLists.some(list => list.sorting);\n\t}\n\n\tprivate sortIndex = -1;\n\tprivate targetIndex = -1;\n\tprivate markedItem: ListItemElement;\n\tprivate drop: 'before'|'after';\n\tprivate autoscrollTimer: number;\n\tprivate autoscrollDirection: Direction;\n\n\tstatic contentStyles = [...List.contentStyles, css`\n\t\t.item {\n\t\t\tcursor: move !important;\n\t\t}\n\n\t\t:host([customHandle]) .item {\n\t\t\tcursor: default !important;\n\t\t}\n\n\t\t.item.target-prev {\n\t\t\tborder-top: 2px solid var(--og-accent-color);\n\t\t}\n\n\t\t.item.target-next {\n\t\t\tborder-bottom: 2px solid var(--og-accent-color);\n\t\t}\n\t`];\n\n\tconstructor() {\n\t\tsuper();\n\t}\n\n\tstartSorting(item: ListItemElement) {\n\t\tSortableList.sourceList = this;\n\t\tthis._sorting = true;\n\t\tthis.sortIndex = item.index;\n\t\tthis.dispatchEvent(new ListSortEvent('sortstart', {fromIndex: this.sortIndex, sourceList: this}));\n\t\tdocument.body.addEventListener('mouseup', () => this.stopSorting(false), {once: true});\n\t}\n\n\tremoveMark() {\n\t\tthis.markedItem?.classList.remove('target-prev', 'target-next');\n\t}\n\n\tstopSorting(dispatchEvent?: boolean) {\n\t\tthis._sorting = false;\n\t\tthis.stopAutoscroll();\n\t\tthis.removeMark();\n\n\t\tif (this.targetIndex > -1 && dispatchEvent) {\n\t\t\tthis.dispatchEvent(new ListSortEvent('sort', {\n\t\t\t\tfromIndex: (SortableList.sourceList ? SortableList.sourceList : this).sortIndex,\n\t\t\t\ttoIndex: this.targetIndex,\n\t\t\t\tsourceList: SortableList.sourceList,\n\t\t\t\ttargetList: this,\n\t\t\t\tdrop: this.drop\n\t\t\t}));\n\t\t}\n\n\t\tthis.targetIndex = -1;\n\t\tthis.sortIndex = -1;\n\t\tSortableList.sourceList = null;\n\n\t\tif (dispatchEvent) this.dispatchEvent(new ListSortEvent('sortend'));\n\t}\n\n\tstartAutoscroll(direction: Direction) {\n\t\tif (this.autoscrollDirection == direction) return;\n\t\tthis.autoscrollDirection = direction;\n\t\tthis.autoscrollTimer = window.setInterval(() => {\n\t\t\tif (this.autoscrollDirection == 'down') {\n\t\t\t\tconst offset = Math.min(this.offset + this.itemHeight, this.size * this.itemHeight - this.clientHeight);\n\t\t\t\tif (offset > this.offset) this.scrollToOffset(offset);\n\t\t\t} else {\n\t\t\t\tconst offset = Math.max(0, this.offset - this.itemHeight);\n\t\t\t\tif (offset < this.offset) this.scrollToOffset(offset);\n\t\t\t}\n\t\t}, constants.LIST_AUTOSCROLL_DELAY);\n\t}\n\n\tstopAutoscroll() {\n\t\tif (this.autoscrollTimer != null) {\n\t\t\tclearInterval(this.autoscrollTimer);\n\t\t\tthis.autoscrollTimer = null;\n\t\t\tthis.autoscrollDirection = null;\n\t\t}\n\t}\n\n\t_onMouseDown = (e: MouseEvent) => {\n\t\tconst path = e.composedPath();\n\t\tconst item = path.find((el: HTMLElement) => el.classList && el.classList.contains('item')) as ListItemElement;\n\n\t\tif (this.customHandle) {\n\t\t\tlet handle = item && (item as SortableListItem).moveHandle;\n\t\t\tif (!handle && item?.firstElementChild) {\n\t\t\t\thandle = (item.firstElementChild as SortableListItem).moveHandle;\n\t\t\t}\n\n\t\t\tif (handle && path.find((el: HTMLElement) => el == handle)) {\n\t\t\t\tthis.startSorting(item);\n\t\t\t}\n\t\t} else if (item) this.startSorting(item);\n\t}\n\n\t_onMouseUp = () => {\n\t\tthis.stopSorting(true);\n\t}\n\n\t_onMouseMove = (e: MouseEvent) => {\n\t\tif (this.sorting || this.connectedSorting) {\n\t\t\tthis.connectedLists?.forEach(list => list.removeMark());\n\n\t\t\tconst item = e.composedPath().find(\n\t\t\t\t(el: HTMLElement) => el.classList && el.classList.contains('item')\n\t\t\t) as ListItemElement;\n\t\t\tif (!(item instanceof HTMLElement)) return;\n\t\t\tconst offset = dom.getElementOffset(item as HTMLElement, this.container);\n\t\t\tconst top = offset.top + e.offsetY;\n\n\t\t\tif (top < constants.LIST_AUTOSCROLL_TRESHOLD) {\n\t\t\t\tthis.startAutoscroll('up');\n\t\t\t} else if (this.container.clientHeight - top < constants.LIST_AUTOSCROLL_TRESHOLD) {\n\t\t\t\tthis.startAutoscroll('down');\n\t\t\t} else {\n\t\t\t\tthis.stopAutoscroll();\n\t\t\t}\n\n\t\t\tif (this.markedItem) this.markedItem.classList.remove('target-prev', 'target-next');\n\n\t\t\tif (e.offsetY > item.clientHeight / 2) {\n\t\t\t\titem.classList.add('target-next');\n\t\t\t\tthis.drop = 'after';\n\t\t\t} else {\n\t\t\t\titem.classList.add('target-prev');\n\t\t\t\tthis.drop = 'before';\n\t\t\t}\n\n\t\t\tthis.markedItem = item;\n\t\t\tthis.targetIndex = item.index;\n\t\t}\n\t}\n\n\tfirstUpdated() {\n    super.firstUpdated();\n    if (!this.container) return;\n\t\tthis.container.addEventListener('mousedown', this._onMouseDown);\n\t\tthis.container.addEventListener('mousemove', this._onMouseMove);\n\t\tthis.container.addEventListener('mouseup', this._onMouseUp);\n\t}\n\n}\n"]}