@omegagrid/core 0.10.2 → 0.10.5

package/dist/ui/splitContainer.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from 'lit';
+import { SplitContainerItem, Orientation, Layout, ComponentFactory, ComponentId } from "../types";
+import { Sizer, ResizeEvent } from "./sizer";
+export declare class SplitContainerEvent extends Event {
+    readonly index: number;
+    readonly component: HTMLElement;
+    constructor(type: string, args: Partial<SplitContainerEvent>);
+}
+export declare class SplitContainerResizeEvent extends Event {
+    constructor(type: string);
+}
+export declare class SplitContainer extends LitElement implements Layout {
+    static styles: import("lit").CSSResult[];
+    items: SplitContainerItem[];
+    orientation: Orientation;
+    gap: number;
+    containers: NodeListOf<HTMLElement>;
+    overlay: HTMLDivElement;
+    createComponent: ComponentFactory;
+    sizer: Sizer;
+    private indexMap;
+    private dynamicSizeIndices;
+    private _resizeIndex;
+    private _resizeLastSize1;
+    private _resizeLastSize2;
+    protected defaultLayout: boolean;
+    constructor();
+    getContainer(index: number): HTMLElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    splitContainer(index: number): void;
+    removeContainer(index: number): void;
+    getContainerComponent(index: number): HTMLElement & Layout;
+    _onMouseMove: (e: MouseEvent) => void;
+    _debounceResize: {
+        (this: unknown, ...args: [e: ResizeEvent] & any[]): Promise<void>;
+        cancel: (reason?: any) => void;
+    };
+    setContainerSize(index: number, size: number | null): void;
+    getContainerSize(index: number): number;
+    resetContainerSizes(): void;
+    collapse(index: number, collapse?: boolean): Promise<void>;
+    indexContainers(): void;
+    willUpdate(props: Map<string, unknown>): void;
+    getComponent(index: number, id?: ComponentId): HTMLElement | Promise<HTMLElement>;
+    updateComponent(index: number): Promise<void>;
+    updated(): Promise<void>;
+    render: () => import("lit-html").TemplateResult<1>;
+    fillRemainingSpace(): void;
+    layout(): void;
+}
+//# sourceMappingURL=splitContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"splitContainer.d.ts","sourceRoot":"","sources":["../../src/ui/splitContainer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIlG,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAG7C,qBAAa,mBAAoB,SAAQ,KAAK;IAE7C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC;gBACpB,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,CAAC,mBAAmB,CAAC;CAI5D;AAGD,qBAAa,yBAA0B,SAAQ,KAAK;gBACvC,IAAI,EAAE,MAAM;CAGxB;AAED,qBACa,cAAe,SAAQ,UAAW,YAAW,MAAM;IAE/D,MAAM,CAAC,MAAM,4BAAW;IAGxB,KAAK,EAAE,kBAAkB,EAAE,CAAM;IAGjC,WAAW,EAAE,WAAW,CAAgB;IAGxC,GAAG,SAAK;IAGR,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAGpC,OAAO,EAAE,cAAc,CAAC;IAGxB,eAAe,EAAE,gBAAgB,CAAC;IAGlC,KAAK,EAAE,KAAK,CAAC;IAEb,OAAO,CAAC,QAAQ,CAAgB;IAChC,OAAO,CAAC,kBAAkB,CAAgB;IAE1C,OAAO,CAAC,YAAY,CAAM;IAC1B,OAAO,CAAC,gBAAgB,CAAM;IAC9B,OAAO,CAAC,gBAAgB,CAAM;IAC9B,SAAS,CAAC,aAAa,UAAQ;;IAO/B,YAAY,CAAC,KAAK,EAAE,MAAM;IAI1B,iBAAiB;IAIjB,oBAAoB;IAIpB,cAAc,CAAC,KAAK,EAAE,MAAM;IAM5B,eAAe,CAAC,KAAK,EAAE,MAAM;IAM7B,qBAAqB,CAAC,KAAK,EAAE,MAAM;IAOnC,YAAY,GAAI,GAAG,UAAU,UAiC3B;IAEF,eAAe;;uBAvHb,CAAC;MA6H2B;IAE9B,gBAAgB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAC,IAAI;IASjD,gBAAgB,CAAC,KAAK,EAAE,MAAM;IAM9B,mBAAmB;IAIb,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,UAAO;IAQ7C,eAAe;IAYf,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAatC,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,WAAW;IAItC,eAAe,CAAC,KAAK,EAAE,MAAM;IAe7B,OAAO;IAOb,MAAM,6CAgCJ;IAEF,kBAAkB;IAMlB,MAAM;CAQN"}

package/dist/ui/splitContainer.js

@@ -0,0 +1,252 @@
+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;
+};
+import * as dom from "../common/dom";
+import { LitElement, html } from 'lit';
+import { customElement, property, query, queryAll } from 'lit/decorators.js';
+import { map } from "lit/directives/map.js";
+import { style } from './splitContainer.style';
+import constants from "../constants";
+import { debounce } from "ts-debounce";
+import { styleMap } from "lit-html/directives/style-map.js";
+export class SplitContainerEvent extends Event {
+    constructor(type, args) {
+        super(type);
+        Object.assign(this, args);
+    }
+}
+export class SplitContainerResizeEvent extends Event {
+    constructor(type) {
+        super(`splitContainer.${type}`, { bubbles: true, composed: true });
+    }
+}
+let SplitContainer = class SplitContainer extends LitElement {
+    constructor() {
+        super();
+        this.items = [];
+        this.orientation = 'horizontal';
+        this.gap = 0;
+        this.indexMap = [];
+        this.dynamicSizeIndices = [];
+        this._resizeIndex = -1;
+        this._resizeLastSize1 = -1;
+        this._resizeLastSize2 = -1;
+        this.defaultLayout = true;
+        this._onMouseMove = (e) => {
+            if (this.sizer.resizing)
+                return;
+            let mousePos = 0, itemPos = 0;
+            this._resizeIndex = -1;
+            for (let i = 1; i < this.containers.length; i++) {
+                if (this.orientation == 'horizontal') {
+                    mousePos = e.offsetX;
+                    itemPos = this.containers[i].offsetLeft;
+                }
+                else {
+                    mousePos = e.offsetY;
+                    itemPos = this.containers[i].offsetTop;
+                }
+                if (Math.abs(itemPos - mousePos) < constants.SIZER_SIZE) {
+                    this._resizeIndex = i - 1;
+                    break;
+                }
+            }
+            if (this._resizeIndex > -1) {
+                this._resizeLastSize1 = this.orientation == 'horizontal'
+                    ? this.containers[this._resizeIndex].offsetWidth
+                    : this.containers[this._resizeIndex].offsetHeight;
+                this._resizeLastSize2 = this.orientation == 'horizontal'
+                    ? this.containers[this._resizeIndex + 1].offsetWidth
+                    : this.containers[this._resizeIndex + 1].offsetHeight;
+                this.sizer.snap(this.containers[this._resizeIndex], this);
+            }
+            else {
+                this.sizer.hide();
+            }
+        };
+        this._debounceResize = debounce((e) => {
+            const delta = (this.orientation == 'horizontal' ? e.deltaX : e.deltaY);
+            this.setContainerSize(this._resizeIndex, this._resizeLastSize1 + delta);
+            this.setContainerSize(this._resizeIndex + 1, this._resizeLastSize2 - delta);
+            if (this.defaultLayout)
+                this.layout();
+            this.dispatchEvent(new SplitContainerResizeEvent('resize'));
+        }, null, { isImmediate: true });
+        this.render = () => {
+            const visibleItems = this.items.map((item, index) => ([item, index]));
+            return html `
+			${map(visibleItems, ([item, index], index2) => item.collapsed ? `` : html `
+				<div 
+					class="item ${index2 == 0 ? 'first' : (index2 == visibleItems.length - 1 ? 'last' : '')}"
+					data-index="${index}"><div 
+						class="inner"
+						style="${styleMap({
+                top: this.orientation == 'vertical' && this.gap > 0 && index2 > 0 ? dom.px(this.gap / 2) : null,
+                bottom: this.orientation == 'vertical' && this.gap > 0 && index2 < visibleItems.length - 1 ? dom.px(this.gap / 2) : null,
+                left: this.orientation == 'horizontal' && this.gap > 0 && index2 > 0 ? dom.px(this.gap / 2) : null,
+                right: this.orientation == 'horizontal' && this.gap > 0 && index2 < visibleItems.length - 1 ? dom.px(this.gap / 2) : null,
+            })}"></div></div>
+			`)}
+
+			<og-sizer
+				orientation="${this.orientation}" 
+				noGuideLine 
+				@resizestart="${() => {
+                dom.showElement(this.overlay);
+                this.dispatchEvent(new SplitContainerResizeEvent('resizestart'));
+            }}"
+				@resizestop="${() => {
+                dom.hideElement(this.overlay);
+                this.dispatchEvent(new SplitContainerResizeEvent('resizestop'));
+            }}"  
+				@resize="${this._debounceResize}">
+			</og-sizer>
+
+			<div class="overlay"></div>
+		`;
+        };
+        this.addEventListener('mousemove', this._onMouseMove);
+    }
+    getContainer(index) {
+        return this.containers[this.indexMap[index]];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+    }
+    splitContainer(index) {
+        this.items.splice(index, 0, { size: null });
+        this.items.forEach(item => item.size = null);
+        this.requestUpdate();
+    }
+    removeContainer(index) {
+        this.items.splice(index, 1);
+        this.items.forEach(item => item.size = null);
+        this.requestUpdate();
+    }
+    getContainerComponent(index) {
+        if (this.indexMap[index] > -1) {
+            return this.containers[this.indexMap[index]].firstElementChild.firstElementChild;
+        }
+        return null;
+    }
+    setContainerSize(index, size) {
+        this.items[index].size = size;
+        const container = this.getContainer(index);
+        if (!container)
+            return;
+        container.style.flexBasis = size > 0 ? dom.px(size) : '0'; // 0 = ignore item size during space distribution
+        container.style.flexGrow = size > 0 ? '0' : '1';
+        container.style.flexShrink = size > 0 ? '0' : '1';
+    }
+    getContainerSize(index) {
+        const container = this.getContainer(index);
+        if (!container)
+            return 0;
+        return this.orientation == 'horizontal' ? container.offsetWidth : container.offsetHeight;
+    }
+    resetContainerSizes() {
+        this.items.forEach((_, i) => this.setContainerSize(i, null));
+    }
+    async collapse(index, collapse = true) {
+        this.items[index].collapsed = collapse;
+        this.indexContainers();
+        this.requestUpdate();
+        await this.updateComplete;
+        this.layout();
+    }
+    indexContainers() {
+        this.indexMap = [];
+        let i = 0;
+        this.items.forEach((item, j) => {
+            if (!item) {
+                item = { size: null };
+                this.items[j] = item;
+            }
+            this.indexMap.push(item?.collapsed ? -1 : i++);
+        });
+    }
+    willUpdate(props) {
+        if (!this.items || this.items.length == 0) {
+            this.items.push({ size: null });
+        }
+        if (props.has('items') || this.dynamicSizeIndices.length == 0) {
+            this.dynamicSizeIndices = [...this.items.keys()].filter(i => this.items[i].size == null);
+            if (this.dynamicSizeIndices.length == 0)
+                this.dynamicSizeIndices = [this.items.length - 1];
+        }
+        this.indexContainers();
+    }
+    getComponent(index, id) {
+        return this.createComponent ? this.createComponent(id ?? index) : null;
+    }
+    async updateComponent(index) {
+        if (this.items[index].collapsed)
+            return;
+        const container = this.getContainer(index);
+        if (!container)
+            return;
+        const item = this.items[index];
+        const innerContainer = container.firstElementChild;
+        dom.empty(innerContainer);
+        this.setContainerSize(index, item.size);
+        const component = await this.getComponent(index, item.id);
+        if (component) {
+            innerContainer.appendChild(component);
+            this.dispatchEvent(new SplitContainerEvent('component', { index, component }));
+        }
+    }
+    async updated() {
+        for (const container of this.containers) {
+            await this.updateComponent(parseInt(container.dataset.index));
+        }
+        this.layout();
+    }
+    fillRemainingSpace() {
+        if (!this.items?.length)
+            return;
+        if (this.items.find(item => item.size == null))
+            return;
+        this.setContainerSize(this.items.length - 1, null);
+    }
+    layout() {
+        this.fillRemainingSpace();
+        this.containers.forEach(c => {
+            const component = this.getContainerComponent(parseInt(c.dataset.index));
+            if (component?.layout)
+                component.layout();
+        });
+    }
+};
+SplitContainer.styles = [style];
+__decorate([
+    property({ type: Array })
+], SplitContainer.prototype, "items", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SplitContainer.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Number })
+], SplitContainer.prototype, "gap", void 0);
+__decorate([
+    queryAll('.item')
+], SplitContainer.prototype, "containers", void 0);
+__decorate([
+    query('.overlay')
+], SplitContainer.prototype, "overlay", void 0);
+__decorate([
+    property({ type: Object })
+], SplitContainer.prototype, "createComponent", void 0);
+__decorate([
+    query('og-sizer')
+], SplitContainer.prototype, "sizer", void 0);
+SplitContainer = __decorate([
+    customElement('og-splitcontainer')
+], SplitContainer);
+export { SplitContainer };
+//# sourceMappingURL=splitContainer.js.map

package/dist/ui/splitContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"splitContainer.js","sourceRoot":"","sources":["../../src/ui/splitContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as dom from \"../common/dom\";\nimport { LitElement, html } from 'lit';\nimport { customElement, property, query, queryAll } from 'lit/decorators.js';\nimport { map } from \"lit/directives/map.js\";\nimport { SplitContainerItem, Orientation, Layout, ComponentFactory, ComponentId } from \"../types\";\nimport { style } from './splitContainer.style';\nimport constants from \"../constants\";\nimport { debounce } from \"ts-debounce\";\nimport { Sizer, ResizeEvent } from \"./sizer\";\nimport { styleMap } from \"lit-html/directives/style-map.js\";\n\nexport class SplitContainerEvent extends Event {\n\n\treadonly index: number;\n\treadonly component: HTMLElement;\n\tconstructor(type: string, args: Partial<SplitContainerEvent>) {\n\t\tsuper(type);\n\t\tObject.assign(this, args);\n\t}\n}\n\n\nexport class SplitContainerResizeEvent extends Event {\n\tconstructor(type: string) {\n\t\tsuper(`splitContainer.${type}`, {bubbles: true, composed: true});\n\t}\n}\n\n@customElement('og-splitcontainer')\nexport class SplitContainer extends LitElement implements Layout {\n\n\tstatic styles = [style];\n\n\t@property({type: Array})\n\titems: SplitContainerItem[] = [];\n\n\t@property({type: String, reflect: true})\n\torientation: Orientation = 'horizontal';\n\n\t@property({type: Number})\n\tgap = 0;\n\n\t@queryAll('.item')\n\tcontainers: NodeListOf<HTMLElement>;\n\n\t@query('.overlay')\n\toverlay: HTMLDivElement;\n\n\t@property({type: Object})\n\tcreateComponent: ComponentFactory;\n\n\t@query('og-sizer')\n\tsizer: Sizer;\n\n\tprivate indexMap: number[] = [];\n\tprivate dynamicSizeIndices: number[] = [];\n\n\tprivate _resizeIndex = -1;\n\tprivate _resizeLastSize1 = -1;\n\tprivate _resizeLastSize2 = -1;\n\tprotected defaultLayout = true;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.addEventListener('mousemove', this._onMouseMove);\n\t}\n\n\tgetContainer(index: number) {\n\t\treturn this.containers[this.indexMap[index]];\n\t}\n\n\tconnectedCallback() {\n\t\tsuper.connectedCallback();\n\t}\n\n\tdisconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t}\n\n\tsplitContainer(index: number) {\n\t\tthis.items.splice(index, 0, {size: null});\n\t\tthis.items.forEach(item => item.size = null);\n\t\tthis.requestUpdate();\n\t}\n\n\tremoveContainer(index: number) {\n\t\tthis.items.splice(index, 1);\n\t\tthis.items.forEach(item => item.size = null);\n\t\tthis.requestUpdate();\n\t}\n\n\tgetContainerComponent(index: number) {\n\t\tif (this.indexMap[index] > -1) {\n\t\t\treturn this.containers[this.indexMap[index]].firstElementChild.firstElementChild as HTMLElement & Layout;\n\t\t}\n\t\treturn null;\n\t}\n\n\t_onMouseMove = (e: MouseEvent) => {\n\t\tif (this.sizer.resizing) return;\n\t\t\n\t\tlet mousePos = 0, itemPos = 0;\n\t\tthis._resizeIndex = -1;\n\t\tfor (let i = 1; i < this.containers.length; i++) {\n\t\t\tif (this.orientation == 'horizontal') {\n\t\t\t\tmousePos = e.offsetX;\n\t\t\t\titemPos = this.containers[i].offsetLeft;\n\t\t\t} else {\n\t\t\t\tmousePos = e.offsetY;\n\t\t\t\titemPos = this.containers[i].offsetTop;\n\t\t\t}\n\n\t\t\tif (Math.abs(itemPos - mousePos) < constants.SIZER_SIZE) {\n\t\t\t\tthis._resizeIndex = i - 1;\n\t\t\t\tbreak;\n\t\t\t}\n\t\t}\n\n\t\tif (this._resizeIndex > -1) {\n\t\t\tthis._resizeLastSize1 = this.orientation == 'horizontal' \n\t\t\t\t? this.containers[this._resizeIndex].offsetWidth \n\t\t\t\t: this.containers[this._resizeIndex].offsetHeight;\n\t\t\t\n\t\t\tthis._resizeLastSize2 = this.orientation == 'horizontal' \n\t\t\t\t? this.containers[this._resizeIndex + 1].offsetWidth \n\t\t\t\t: this.containers[this._resizeIndex + 1].offsetHeight;\n\t\t\t\n\t\t\tthis.sizer.snap(this.containers[this._resizeIndex], this);\n\t\t} else {\n\t\t\tthis.sizer.hide();\n\t\t}\n\t};\n\n\t_debounceResize = debounce((e: ResizeEvent) => {\n\t\tconst delta = (this.orientation == 'horizontal' ? e.deltaX : e.deltaY);\n\t\tthis.setContainerSize(this._resizeIndex, this._resizeLastSize1 + delta);\n\t\tthis.setContainerSize(this._resizeIndex + 1, this._resizeLastSize2 - delta);\n\t\tif (this.defaultLayout) this.layout();\n\t\tthis.dispatchEvent(new SplitContainerResizeEvent('resize'));\n\t}, null, {isImmediate: true});\n\n\tsetContainerSize(index: number, size: number|null) {\n\t\tthis.items[index].size = size;\n\t\tconst container = this.getContainer(index);\n\t\tif (!container) return;\n\t\tcontainer.style.flexBasis = size > 0 ? dom.px(size) : '0'; // 0 = ignore item size during space distribution\n\t\tcontainer.style.flexGrow = size > 0 ? '0' : '1';\n\t\tcontainer.style.flexShrink = size > 0 ? '0' : '1';\n\t}\n\n\tgetContainerSize(index: number) {\n\t\tconst container = this.getContainer(index);\n\t\tif (!container) return 0;\n\t\treturn this.orientation == 'horizontal' ? container.offsetWidth : container.offsetHeight;\n\t}\n\n\tresetContainerSizes() {\n\t\tthis.items.forEach((_, i) => this.setContainerSize(i, null));\n\t}\n\n\tasync collapse(index: number, collapse = true) {\n\t\tthis.items[index].collapsed = collapse;\n\t\tthis.indexContainers();\n\t\tthis.requestUpdate();\n\t\tawait this.updateComplete;\n\t\tthis.layout();\n\t}\n\n\tindexContainers() {\n\t\tthis.indexMap = [];\n\t\tlet i = 0;\n\t\tthis.items.forEach((item, j) => {\n\t\t\tif (!item) {\n\t\t\t\titem = {size: null};\n\t\t\t\tthis.items[j] = item;\n\t\t\t}\n\t\t\tthis.indexMap.push(item?.collapsed ? -1 : i++);\n\t\t});\n\t}\n\n\twillUpdate(props: Map<string, unknown>) {\n\t\tif (!this.items || this.items.length == 0) {\n\t\t\tthis.items.push({size: null});\n\t\t}\n\n\t\tif (props.has('items') || this.dynamicSizeIndices.length == 0) {\n\t\t\tthis.dynamicSizeIndices = [...this.items.keys()].filter(i => this.items[i].size == null);\n\t\t\tif (this.dynamicSizeIndices.length == 0) this.dynamicSizeIndices = [this.items.length - 1];\n\t\t}\n\t\t\n\t\tthis.indexContainers();\n\t}\n\t\n\tgetComponent(index: number, id?: ComponentId) {\n\t\treturn this.createComponent ? this.createComponent(id ?? index) : null\n\t}\n\n\tasync updateComponent(index: number) {\n\t\tif (this.items[index].collapsed) return;\n\t\tconst container = this.getContainer(index);\n\t\tif (!container) return;\n\t\tconst item = this.items[index];\n\t\tconst innerContainer = container.firstElementChild as HTMLDivElement;\n\t\tdom.empty(innerContainer);\n\t\tthis.setContainerSize(index, item.size);\n\t\tconst component = await this.getComponent(index, item.id);\n\t\tif (component) {\n\t\t\tinnerContainer.appendChild(component);\n\t\t\tthis.dispatchEvent(new SplitContainerEvent('component', {index, component}));\n\t\t}\n\t}\n\n\tasync updated() {\n\t\tfor (const container of this.containers) {\n\t\t\tawait this.updateComponent(parseInt(container.dataset.index));\n\t\t}\n\t\tthis.layout();\n\t}\n\n\trender = () => {\n\t\tconst visibleItems = this.items.map((item, index) => ([item, index])) as [SplitContainerItem, number][];\n\t\treturn html`\n\t\t\t${map(visibleItems, ([item, index], index2) => item.collapsed ? `` : html`\n\t\t\t\t<div \n\t\t\t\t\tclass=\"item ${index2 == 0 ? 'first' : (index2 == visibleItems.length - 1 ? 'last' : '')}\"\n\t\t\t\t\tdata-index=\"${index}\"><div \n\t\t\t\t\t\tclass=\"inner\"\n\t\t\t\t\t\tstyle=\"${styleMap({\n\t\t\t\t\t\t\ttop: this.orientation == 'vertical' && this.gap > 0 && index2 > 0 ? dom.px(this.gap / 2) : null,\n\t\t\t\t\t\t\tbottom: this.orientation == 'vertical' && this.gap > 0 && index2 < visibleItems.length - 1 ? dom.px(this.gap / 2) : null,\n\t\t\t\t\t\t\tleft: this.orientation == 'horizontal' && this.gap > 0 && index2 > 0 ? dom.px(this.gap / 2) : null,\n\t\t\t\t\t\t\tright: this.orientation == 'horizontal' && this.gap > 0 && index2 < visibleItems.length - 1 ? dom.px(this.gap / 2) : null,\n\t\t\t\t\t\t})}\"></div></div>\n\t\t\t`)}\n\n\t\t\t<og-sizer\n\t\t\t\torientation=\"${this.orientation}\" \n\t\t\t\tnoGuideLine \n\t\t\t\t@resizestart=\"${() => {\n\t\t\t\t\tdom.showElement(this.overlay);\n\t\t\t\t\tthis.dispatchEvent(new SplitContainerResizeEvent('resizestart'));\n\t\t\t\t}}\"\n\t\t\t\t@resizestop=\"${() => {\n\t\t\t\t\tdom.hideElement(this.overlay);\n\t\t\t\t\tthis.dispatchEvent(new SplitContainerResizeEvent('resizestop'));\n\t\t\t\t}}\"  \n\t\t\t\t@resize=\"${this._debounceResize}\">\n\t\t\t</og-sizer>\n\n\t\t\t<div class=\"overlay\"></div>\n\t\t`;\n\t};\n\n\tfillRemainingSpace() {\n\t\tif (!this.items?.length) return;\n\t\tif (this.items.find(item => item.size == null)) return;\n\t\tthis.setContainerSize(this.items.length - 1, null);\n\t}\n\n\tlayout() {\n\t\tthis.fillRemainingSpace();\n\t\tthis.containers.forEach(c => {\n\t\t\tconst component = this.getContainerComponent(parseInt(c.dataset.index));\n\t\t\tif (component?.layout) component.layout();\n\t\t});\n\t}\n\n}"]}

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

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

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

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

package/dist/ui/splitContainer.style.js

@@ -0,0 +1,62 @@
+import { css } from 'lit';
+export const style = css `
+	* {
+		box-sizing: border-box;
+	}
+
+	:host {
+		position: relative;
+		display: flex;
+		overflow: hidden;
+	}
+
+	:host([orientation=horizontal]) {
+		flex-direction: row;
+	}
+
+	:host([orientation=vertical]) {
+		flex-direction: column;
+		width: 100%;
+	}
+
+	.item {
+		flex: 1;
+		overflow: hidden;
+		position: relative;
+	}
+
+	.item>.inner {
+		position: absolute;
+		inset: 0;
+		overflow: hidden;
+	}
+
+	.item>.inner>* {
+		height: 100%;
+	}
+
+	:host([orientation=horizontal]) .item:first-child {
+		border-left-width: 0;
+	}
+
+	:host([orientation=horizontal]) .item {
+		border-left: 1px solid var(--og-border-color-2);
+	}
+
+	:host([orientation=vertical]) .item {
+		border-top: 1px solid var(--og-border-color-2);
+	}
+
+	.item:nth-child(1) {
+		border-left-width: 0;
+		border-top-width: 0;
+	}
+
+	.overlay {
+		display: none;
+		position: absolute;
+		inset: 0;
+		z-index: 104;
+	}
+`;
+//# sourceMappingURL=splitContainer.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"splitContainer.style.js","sourceRoot":"","sources":["../../src/ui/splitContainer.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DvB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`\n\t* {\n\t\tbox-sizing: border-box;\n\t}\n\n\t:host {\n\t\tposition: relative;\n\t\tdisplay: flex;\n\t\toverflow: hidden;\n\t}\n\n\t:host([orientation=horizontal]) {\n\t\tflex-direction: row;\n\t}\n\n\t:host([orientation=vertical]) {\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t}\n\n\t.item {\n\t\tflex: 1;\n\t\toverflow: hidden;\n\t\tposition: relative;\n\t}\n\n\t.item>.inner {\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\toverflow: hidden;\n\t}\n\n\t.item>.inner>* {\n\t\theight: 100%;\n\t}\n\n\t:host([orientation=horizontal]) .item:first-child {\n\t\tborder-left-width: 0;\n\t}\n\n\t:host([orientation=horizontal]) .item {\n\t\tborder-left: 1px solid var(--og-border-color-2);\n\t}\n\n\t:host([orientation=vertical]) .item {\n\t\tborder-top: 1px solid var(--og-border-color-2);\n\t}\n\n\t.item:nth-child(1) {\n\t\tborder-left-width: 0;\n\t\tborder-top-width: 0;\n\t}\n\n\t.overlay {\n\t\tdisplay: none;\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\tz-index: 104;\n\t}\n`;"]}

package/dist/ui/switch.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import { ColorTypes } from '../types';
+import { ChangeEvent } from '../common/events';
+export type SwitchState = 'on' | 'off';
+type Shape = 'round' | 'square' | 'hexagon';
+export declare class SwitchEvent extends ChangeEvent<SwitchState> {
+}
+export declare class Switch extends LitElement {
+    static styles: import("lit").CSSResult[];
+    static defaultShape: Shape;
+    text: string;
+    color: ColorTypes;
+    state: SwitchState;
+    shape: Shape;
+    noAnimation: boolean;
+    checkbox: HTMLInputElement;
+    _onChange: () => void;
+    updated(): void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/ui/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,KAAK,CAAC;AACvC,KAAK,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE5C,qBAAa,WAAY,SAAQ,WAAW,CAAC,WAAW,CAAC;CAAI;AAE7D,qBACa,MAAO,SAAQ,UAAU;IAErC,MAAM,CAAC,MAAM,4BAAS;IACtB,MAAM,CAAC,YAAY,EAAE,KAAK,CAAW;IAGrC,IAAI,EAAE,MAAM,CAAC;IAGb,KAAK,EAAE,UAAU,CAAqB;IAGtC,KAAK,EAAE,WAAW,CAAS;IAG3B,KAAK,QAAuB;IAG5B,WAAW,UAAS;IAGpB,QAAQ,EAAE,gBAAgB,CAAC;IAE3B,SAAS,aAGR;IAED,OAAO;IAUP,MAAM,6CAoBJ;CAEF"}

package/dist/ui/switch.js

@@ -0,0 +1,83 @@
+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 Switch_1;
+import { LitElement, html } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ColorTypes } from '../types';
+import { dom } from '../common';
+import { style } from './switch.style';
+import { ChangeEvent } from '../common/events';
+export class SwitchEvent extends ChangeEvent {
+}
+let Switch = Switch_1 = class Switch extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.color = ColorTypes.Accent;
+        this.state = 'off';
+        this.shape = Switch_1.defaultShape;
+        this.noAnimation = false;
+        this._onChange = () => {
+            this.state = this.checkbox.checked ? 'on' : 'off';
+            this.dispatchEvent(new SwitchEvent(this.state));
+        };
+        this.render = () => this.shape == 'hexagon' ? html `
+		<label>
+			<div class="background">
+				<div></div>
+				<div></div>
+				<div></div>
+			</div>
+			
+			<input type="checkbox" @change="${this._onChange}" ?checked="${this.state == 'on'}">
+			
+			<div class="slider">
+				<div></div>
+				<div></div>
+			</div>
+		</label>	
+	` : html `
+		<label>
+			<input type="checkbox" @change="${this._onChange}" ?checked="${this.state == 'on'}">
+			<div class="slider"></div>
+		</label>
+	`;
+    }
+    updated() {
+        dom.appendStyle(this.shadowRoot, `
+			:host {
+				--og-switch-width: ${dom.numToPixels(this.offsetWidth)};
+				--og-switch-height: ${dom.numToPixels(this.offsetHeight)};
+				--og-switch-margin: 6px;
+			}	
+		`, 'switch-style');
+    }
+};
+Switch.styles = style;
+Switch.defaultShape = 'round';
+__decorate([
+    property({ type: String })
+], Switch.prototype, "text", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Switch.prototype, "color", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Switch.prototype, "state", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], Switch.prototype, "shape", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Switch.prototype, "noAnimation", void 0);
+__decorate([
+    query('input')
+], Switch.prototype, "checkbox", void 0);
+Switch = Switch_1 = __decorate([
+    customElement(`og-switch`)
+], Switch);
+export { Switch };
+//# sourceMappingURL=switch.js.map

package/dist/ui/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sourceRoot":"","sources":["../../src/ui/switch.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAK/C,MAAM,OAAO,WAAY,SAAQ,WAAwB;CAAI;AAGtD,IAAM,MAAM,cAAZ,MAAM,MAAO,SAAQ,UAAU;IAA/B;;QASN,UAAK,GAAe,UAAU,CAAC,MAAM,CAAC;QAGtC,UAAK,GAAgB,KAAK,CAAC;QAG3B,UAAK,GAAG,QAAM,CAAC,YAAY,CAAC;QAG5B,gBAAW,GAAG,KAAK,CAAC;QAKpB,cAAS,GAAG,GAAG,EAAE;YAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;YAClD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;QACjD,CAAC,CAAA;QAYD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,IAAI,SAAS,CAAC,CAAC,CAAC,IAAI,CAAA;;;;;;;;qCAQT,IAAI,CAAC,SAAS,eAAe,IAAI,CAAC,KAAK,IAAI,IAAI;;;;;;;EAOlF,CAAC,CAAC,CAAC,IAAI,CAAA;;qCAE4B,IAAI,CAAC,SAAS,eAAe,IAAI,CAAC,KAAK,IAAI,IAAI;;;EAGlF,CAAC;IAEH,CAAC;IAhCA,OAAO;QACN,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,EAAE;;yBAEV,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,WAAW,CAAC;0BAChC,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC;;;GAGzD,EAAE,cAAc,CAAC,CAAC;IACpB,CAAC;;AAlCM,aAAM,GAAG,KAAK,AAAR,CAAS;AACf,mBAAY,GAAU,OAAO,AAAjB,CAAkB;AAGrC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;oCACZ;AAGb;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCACF;AAGtC;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCACb;AAG3B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;qCACZ;AAG5B;IADC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;2CACrB;AAGpB;IADC,KAAK,CAAC,OAAO,CAAC;wCACY;AArBf,MAAM;IADlB,aAAa,CAAC,WAAW,CAAC;GACd,MAAM,CA4DlB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { ColorTypes } from '../types';\nimport { dom } from '../common';\nimport { style } from './switch.style';\nimport { ChangeEvent } from '../common/events';\n\nexport type SwitchState = 'on' | 'off';\ntype Shape = 'round' | 'square' | 'hexagon';\n\nexport class SwitchEvent extends ChangeEvent<SwitchState> { }\n\n@customElement(`og-switch`)\nexport class Switch extends LitElement {\n\n\tstatic styles = style;\n\tstatic defaultShape: Shape = 'round'; \n\n\t@property({type: String})\n\ttext: string;\n\n\t@property({type: String, reflect: true})\n\tcolor: ColorTypes = ColorTypes.Accent;\n\n\t@property({type: String, reflect: true})\n\tstate: SwitchState = 'off';\t\n\n\t@property({type: String, reflect: true})\n\tshape = Switch.defaultShape;\n\n\t@property({type: Boolean, reflect: true})\n\tnoAnimation = false;\n\n\t@query('input')\n\tcheckbox: HTMLInputElement;\n\n\t_onChange = () => {\n\t\tthis.state = this.checkbox.checked ? 'on' : 'off';\n\t\tthis.dispatchEvent(new SwitchEvent(this.state));\n\t}\n\n\tupdated() {\n\t\tdom.appendStyle(this.shadowRoot, `\n\t\t\t:host {\n\t\t\t\t--og-switch-width: ${dom.numToPixels(this.offsetWidth)};\n\t\t\t\t--og-switch-height: ${dom.numToPixels(this.offsetHeight)};\n\t\t\t\t--og-switch-margin: 6px;\n\t\t\t}\t\n\t\t`, 'switch-style');\n\t}\n\n\trender = () => this.shape == 'hexagon' ? html`\n\t\t<label>\n\t\t\t<div class=\"background\">\n\t\t\t\t<div></div>\n\t\t\t\t<div></div>\n\t\t\t\t<div></div>\n\t\t\t</div>\n\t\t\t\n\t\t\t<input type=\"checkbox\" @change=\"${this._onChange}\" ?checked=\"${this.state == 'on'}\">\n\t\t\t\n\t\t\t<div class=\"slider\">\n\t\t\t\t<div></div>\n\t\t\t\t<div></div>\n\t\t\t</div>\n\t\t</label>\t\n\t` : html`\n\t\t<label>\n\t\t\t<input type=\"checkbox\" @change=\"${this._onChange}\" ?checked=\"${this.state == 'on'}\">\n\t\t\t<div class=\"slider\"></div>\n\t\t</label>\n\t`;\n\t\n}"]}

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

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

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

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