@omegagrid/bucket 0.2.5

package/dist/ui/componentHost.d.ts

@@ -0,0 +1,16 @@
+import { ComponentId, Layout } from '@omegagrid/core';
+import { LitElement } from 'lit';
+import { Bucket } from './bucket';
+export declare class ComponentHost extends LitElement implements Layout {
+    static styles: import("lit").CSSResult;
+    bucket: Bucket;
+    componentId: ComponentId;
+    host: HTMLDivElement;
+    private component;
+    private isEdited;
+    layout(): void;
+    _onEdit: () => void;
+    _onSave: () => void;
+    updated(props: Map<PropertyKey, unknown>): Promise<void>;
+}
+//# sourceMappingURL=componentHost.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"componentHost.d.ts","sourceRoot":"","sources":["../../src/ui/componentHost.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAO,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAO,MAAM,KAAK,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,qBACa,aAAc,SAAQ,UAAW,YAAW,MAAM;IAE9D,MAAM,CAAC,MAAM,0BASX;IAGF,MAAM,EAAE,MAAM,CAAC;IAGf,WAAW,EAAE,WAAW,CAAC;IAGzB,IAAI,EAAE,cAAc,CAAC;IAErB,OAAO,CAAC,SAAS,CAAc;IAC/B,OAAO,CAAC,QAAQ,CAAS;IAEzB,MAAM;IAMN,OAAO,aAQN;IAED,OAAO,aAQN;IAEK,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;CAa9C"}

package/dist/ui/componentHost.js

@@ -0,0 +1,82 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentHost = void 0;
+const core_1 = require("@omegagrid/core");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+let ComponentHost = class ComponentHost extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.isEdited = false;
+        this._onEdit = () => {
+            if (this.isEdited)
+                return;
+            this.bucket.editorContainer.model.walk(tab => {
+                if (tab.id == this.componentId)
+                    tab.unsaved = true;
+            });
+            this.isEdited = true;
+            this.bucket.editorContainer.updateTabs();
+            this.bucket.unsavedComponents.add(this.componentId);
+        };
+        this._onSave = () => {
+            if (!this.isEdited)
+                return;
+            this.bucket.editorContainer.model.walk(tab => {
+                if (tab.id == this.componentId)
+                    tab.unsaved = false;
+            });
+            this.isEdited = false;
+            this.bucket.editorContainer.updateTabs();
+            this.bucket.unsavedComponents.delete(this.componentId);
+        };
+    }
+    layout() {
+        var _a;
+        if ((_a = this.component) === null || _a === void 0 ? void 0 : _a.layout) {
+            this.component.layout();
+        }
+    }
+    async updated(props) {
+        if (props.has('componentId') && this.componentId) {
+            const component = await this.bucket.getComponent(this.componentId);
+            this.component = component;
+            core_1.dom.empty(this.shadowRoot);
+            this.shadowRoot.appendChild(component);
+            component.removeEventListener('edit', this._onEdit);
+            component.addEventListener('edit', this._onEdit);
+            component.removeEventListener('save', this._onSave);
+            component.addEventListener('save', this._onSave);
+        }
+    }
+};
+exports.ComponentHost = ComponentHost;
+ComponentHost.styles = (0, lit_1.css) `
+		:host {
+			display: block;
+			height: 100%;
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+	`;
+__decorate([
+    (0, decorators_js_1.property)({ type: Object })
+], ComponentHost.prototype, "bucket", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ComponentHost.prototype, "componentId", void 0);
+__decorate([
+    (0, decorators_js_1.query)('#host')
+], ComponentHost.prototype, "host", void 0);
+exports.ComponentHost = ComponentHost = __decorate([
+    (0, decorators_js_1.customElement)('og-bucket-component-host')
+], ComponentHost);
+//# sourceMappingURL=componentHost.js.map

package/dist/ui/componentHost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentHost.js","sourceRoot":"","sources":["../../src/ui/componentHost.ts"],"names":[],"mappings":";;;;;;;;;AAAA,0CAA2D;AAC3D,6BAAsC;AACtC,qDAAmE;AAI5D,IAAM,aAAa,GAAnB,MAAM,aAAc,SAAQ,gBAAU;IAAtC;;QAuBE,aAAQ,GAAG,KAAK,CAAC;QAQzB,YAAO,GAAG,GAAG,EAAE;YACd,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;gBAC5C,IAAI,GAAG,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW;oBAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;YACpD,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;YACzC,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACrD,CAAC,CAAA;QAED,YAAO,GAAG,GAAG,EAAE;YACd,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC3B,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,EAAE;gBAC5C,IAAI,GAAG,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW;oBAAE,GAAG,CAAC,OAAO,GAAG,KAAK,CAAC;YACrD,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;YACtB,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,UAAU,EAAE,CAAC;YACzC,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACxD,CAAC,CAAA;IAeF,CAAC;IAvCA,MAAM;;QACL,IAAI,MAAC,IAAI,CAAC,SAAoB,0CAAE,MAAM,EAAE,CAAC;YACvC,IAAI,CAAC,SAAoB,CAAC,MAAM,EAAE,CAAC;QACrC,CAAC;IACF,CAAC;IAsBD,KAAK,CAAC,OAAO,CAAC,KAAgC;QAC7C,IAAI,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YAClD,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACnE,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC3B,UAAG,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC3B,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;YACvC,SAAS,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACpD,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACjD,SAAS,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;YACpD,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QAClD,CAAC;IACF,CAAC;;AA9DW,sCAAa;AAElB,oBAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;EASlB,AATY,CASX;AAGF;IADC,IAAA,wBAAQ,EAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACV;AAGf;IADC,IAAA,wBAAQ,EAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;kDACA;AAGzB;IADC,IAAA,qBAAK,EAAC,OAAO,CAAC;2CACM;wBApBT,aAAa;IADzB,IAAA,6BAAa,EAAC,0BAA0B,CAAC;GAC7B,aAAa,CAgEzB"}

package/dist/ui/index.d.ts

@@ -0,0 +1,9 @@
+export * from './bucket';
+export * from './sidebar';
+export * from './sidemenu';
+export * from './top';
+export * from './bucketButton';
+export * from './componentHost';
+export * from './modalSidebar';
+export * from './commonMenus';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,OAAO,CAAC;AACtB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC"}

package/dist/ui/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./bucket"), exports);
+__exportStar(require("./sidebar"), exports);
+__exportStar(require("./sidemenu"), exports);
+__exportStar(require("./top"), exports);
+__exportStar(require("./bucketButton"), exports);
+__exportStar(require("./componentHost"), exports);
+__exportStar(require("./modalSidebar"), exports);
+__exportStar(require("./commonMenus"), exports);
+//# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB;AACzB,4CAA0B;AAC1B,6CAA2B;AAC3B,wCAAsB;AACtB,iDAA+B;AAC/B,kDAAgC;AAChC,iDAA+B;AAC/B,gDAA8B"}

package/dist/ui/modalSidebar.d.ts

@@ -0,0 +1,19 @@
+import { ComponentId, Layout } from '@omegagrid/core';
+import { LitElement } from 'lit';
+import { Bucket } from './bucket';
+export declare class ModalSidebar extends LitElement implements Layout {
+    static styles: import("lit").CSSResult[];
+    caption: string;
+    closable: boolean;
+    bucket: Bucket;
+    componentId: ComponentId;
+    body: HTMLDivElement;
+    private component;
+    layout(): void;
+    _onClose: () => void;
+    disconnectedCallback(): void;
+    updated(props: Map<PropertyKey, unknown>): Promise<void>;
+    close(): void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=modalSidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modalSidebar.d.ts","sourceRoot":"","sources":["../../src/ui/modalSidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAO,MAAM,EAAY,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,qBAEa,YAAa,SAAQ,UAAW,YAAW,MAAM;IAE7D,MAAM,CAAC,MAAM,4BAAW;IAGxB,OAAO,EAAE,MAAM,CAAC;IAGhB,QAAQ,UAAS;IAGjB,MAAM,EAAE,MAAM,CAAC;IAGf,WAAW,EAAE,WAAW,CAAC;IAGzB,IAAI,EAAE,cAAc,CAAC;IAErB,OAAO,CAAC,SAAS,CAAc;IAG/B,MAAM;IAaN,QAAQ,aAEP;IAED,oBAAoB;IAId,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAa9C,KAAK;IAIL,MAAM,6CAMJ;CAEF"}

package/dist/ui/modalSidebar.js

@@ -0,0 +1,86 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ModalSidebar = void 0;
+const core_1 = require("@omegagrid/core");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const modalSidebar_style_1 = __importDefault(require("./modalSidebar.style"));
+let ModalSidebar = class ModalSidebar extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.closable = false;
+        // _onSave = () => {
+        // 	if (!this.isEdited) return;
+        // 	this.bucket.editorContainer.model.walk(tab => {
+        // 		if (tab.id == this.componentId) tab.unsaved = false;
+        // 	});
+        // 	this.isEdited = false;
+        // 	this.bucket.editorContainer.updateTabs();
+        // }
+        this._onClose = () => {
+            this.close();
+        };
+        this.render = () => (0, lit_1.html) `
+		<div id="header">
+			<div id="title">${this.caption}</div>
+			${this.closable ? (0, lit_1.html) `<div id="close" @click="${() => this.close()}">&times</div>` : ``}
+		</div>
+		<div id="body"></div>
+	`;
+    }
+    // private isEdited = false;
+    layout() {
+        var _a;
+        (_a = this.component) === null || _a === void 0 ? void 0 : _a.layout();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.component) === null || _a === void 0 ? void 0 : _a.removeEventListener('close', this._onClose);
+    }
+    async updated(props) {
+        if (props.has('componentId') && this.componentId) {
+            const component = await this.bucket.getComponent(this.componentId);
+            this.component = component;
+            core_1.dom.empty(this.body);
+            this.body.appendChild(component);
+            // component.removeEventListener('save', this._onSave);
+            // component.addEventListener('save', this._onSave);
+            component.addEventListener('close', this._onClose, { once: true });
+            component.focus();
+        }
+    }
+    close() {
+        this.bucket.closeModalSidebar();
+    }
+};
+exports.ModalSidebar = ModalSidebar;
+ModalSidebar.styles = [modalSidebar_style_1.default];
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ModalSidebar.prototype, "caption", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Boolean })
+], ModalSidebar.prototype, "closable", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: Object })
+], ModalSidebar.prototype, "bucket", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], ModalSidebar.prototype, "componentId", void 0);
+__decorate([
+    (0, decorators_js_1.query)('#body')
+], ModalSidebar.prototype, "body", void 0);
+exports.ModalSidebar = ModalSidebar = __decorate([
+    (0, decorators_js_1.customElement)('og-bucket-modal-sidebar'),
+    (0, core_1.stylable)({ vars: ['dialog-*'] })
+], ModalSidebar);
+//# sourceMappingURL=modalSidebar.js.map

package/dist/ui/modalSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modalSidebar.js","sourceRoot":"","sources":["../../src/ui/modalSidebar.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,0CAAqE;AACrE,6BAAuC;AACvC,qDAAmE;AAEnE,8EAAyC;AAIlC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,gBAAU;IAArC;;QAQN,aAAQ,GAAG,KAAK,CAAC;QAkBjB,oBAAoB;QACpB,+BAA+B;QAC/B,mDAAmD;QACnD,yDAAyD;QACzD,OAAO;QACP,0BAA0B;QAC1B,6CAA6C;QAC7C,IAAI;QAEJ,aAAQ,GAAG,GAAG,EAAE;YACf,IAAI,CAAC,KAAK,EAAE,CAAC;QACd,CAAC,CAAA;QAuBD,WAAM,GAAG,GAAG,EAAE,CAAC,IAAA,UAAI,EAAA;;qBAEC,IAAI,CAAC,OAAO;KAC5B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAA,UAAI,EAAA,2BAA2B,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE;;;EAGzF,CAAC;IAEH,CAAC;IAhDA,4BAA4B;IAE5B,MAAM;;QACL,MAAC,IAAI,CAAC,SAAoB,0CAAE,MAAM,EAAE,CAAC;IACtC,CAAC;IAeD,oBAAoB;;QACnB,MAAA,IAAI,CAAC,SAAS,0CAAE,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC7D,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,KAAgC;QAC7C,IAAI,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YAClD,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;YACnE,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;YAC3B,UAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;YACjC,uDAAuD;YACvD,oDAAoD;YACpD,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,QAAQ,EAAE,EAAC,IAAI,EAAE,IAAI,EAAC,CAAC,CAAC;YACjE,SAAS,CAAC,KAAK,EAAE,CAAC;QACnB,CAAC;IACF,CAAC;IAED,KAAK;QACJ,IAAI,CAAC,MAAM,CAAC,iBAAiB,EAAE,CAAC;IACjC,CAAC;;AA1DW,oCAAY;AAEjB,mBAAM,GAAG,CAAC,4BAAK,CAAC,AAAV,CAAW;AAGxB;IADC,IAAA,wBAAQ,EAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;6CACT;AAGhB;IADC,IAAA,wBAAQ,EAAC,EAAC,IAAI,EAAE,OAAO,EAAC,CAAC;8CACT;AAGjB;IADC,IAAA,wBAAQ,EAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACV;AAGf;IADC,IAAA,wBAAQ,EAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;iDACA;AAGzB;IADC,IAAA,qBAAK,EAAC,OAAO,CAAC;0CACM;uBAjBT,YAAY;IAFxB,IAAA,6BAAa,EAAC,yBAAyB,CAAC;IACxC,IAAA,eAAQ,EAAC,EAAC,IAAI,EAAE,CAAC,UAAU,CAAC,EAAC,CAAC;GAClB,YAAY,CAoExB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"modalSidebar.style.d.ts","sourceRoot":"","sources":["../../src/ui/modalSidebar.style.ts"],"names":[],"mappings":";AAGA,wBAgDE"}

package/dist/ui/modalSidebar.style.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const lit_1 = require("lit");
+const constants_1 = __importDefault(require("../constants"));
+exports.default = (0, lit_1.css) `
+	:host {
+		display: flex;
+		flex-direction: column;
+		background-color: var(--bucket-sidebar-background-color);
+		box-shadow: 8px 8px 4px -3px var(--dialog-shadow);
+	}
+
+	:host(.right) {
+		box-shadow: -8px 8px 4px -3px var(--dialog-shadow);
+	}
+
+	* {
+		box-sizing: border-box;
+	}
+
+	#header {
+		display: flex;
+		min-height: ${constants_1.default.SIDEBAR_HEADER_HEIGHT}px;
+		line-height: ${constants_1.default.SIDEBAR_HEADER_HEIGHT}px;
+		padding: 0 10px;
+		flex: 0;
+	}
+
+	#title {
+		flex: 1;
+	}
+
+	#close {
+		flex: 0;
+		margin-top: ${constants_1.default.SIDEBAR_HEADER_HEIGHT / 4}px;
+		min-width: ${constants_1.default.SIDEBAR_HEADER_HEIGHT / 2}px;
+		height: ${constants_1.default.SIDEBAR_HEADER_HEIGHT / 2}px;
+		line-height: ${constants_1.default.SIDEBAR_HEADER_HEIGHT / 2}px;
+		border-radius: 50%;
+		cursor: pointer;
+		text-align: center;
+	}
+	
+	#close:hover {
+		background-color: var(--accent-color);
+	}
+
+	#body {
+		flex: 1;
+		overflow: hidden;
+	}
+	
+`;
+//# sourceMappingURL=modalSidebar.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modalSidebar.style.js","sourceRoot":"","sources":["../../src/ui/modalSidebar.style.ts"],"names":[],"mappings":";;;;;AAAA,6BAA0B;AAC1B,6DAAqC;AAErC,kBAAe,IAAA,SAAG,EAAA;;;;;;;;;;;;;;;;;;gBAkBF,mBAAS,CAAC,qBAAqB;iBAC9B,mBAAS,CAAC,qBAAqB;;;;;;;;;;;gBAWhC,mBAAS,CAAC,qBAAqB,GAAG,CAAC;eACpC,mBAAS,CAAC,qBAAqB,GAAG,CAAC;YACtC,mBAAS,CAAC,qBAAqB,GAAG,CAAC;iBAC9B,mBAAS,CAAC,qBAAqB,GAAG,CAAC;;;;;;;;;;;;;;;CAenD,CAAC"}

package/dist/ui/sidebar.d.ts

@@ -0,0 +1,15 @@
+import { Layout } from '@omegagrid/core';
+import { LitElement } from 'lit';
+import { Bucket } from './bucket';
+export declare class Sidebar extends LitElement implements Layout {
+    static styles: import("lit").CSSResult;
+    bucket: Bucket;
+    componentId: string;
+    container: HTMLDivElement;
+    private _component;
+    loadComponent(id?: string): Promise<void>;
+    updated(props: Map<PropertyKey, unknown>): Promise<void>;
+    layout(): void;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../src/ui/sidebar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAE5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,qBACa,OAAQ,SAAQ,UAAW,YAAW,MAAM;IAExD,MAAM,CAAC,MAAM,0BAYX;IAGF,MAAM,EAAE,MAAM,CAAC;IAGf,WAAW,EAAE,MAAM,CAAC;IAGpB,SAAS,EAAE,cAAc,CAAC;IAE1B,OAAO,CAAC,UAAU,CAAc;IAE1B,aAAa,CAAC,EAAE,CAAC,EAAE,MAAM;IAUzB,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC;IAQ9C,MAAM;IAMN,MAAM,6CAA2B;CAEjC"}

package/dist/ui/sidebar.js

@@ -0,0 +1,69 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidebar = void 0;
+const core_1 = require("@omegagrid/core");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+let Sidebar = class Sidebar extends lit_1.LitElement {
+    constructor() {
+        super(...arguments);
+        this.render = () => (0, lit_1.html) `<div></div>`;
+    }
+    async loadComponent(id) {
+        var _a, _b;
+        if (!((_a = this.bucket) === null || _a === void 0 ? void 0 : _a.createComponent)) {
+            console.error('mising componentFactory');
+            return;
+        }
+        core_1.dom.empty(this.container);
+        this._component = await ((_b = this.bucket) === null || _b === void 0 ? void 0 : _b.createComponent(id));
+        if (this._component)
+            this.container.appendChild(this._component);
+    }
+    async updated(props) {
+        if (!this.bucket)
+            return;
+        if (props.has('componentId')) {
+            this.loadComponent(this.componentId);
+        }
+    }
+    layout() {
+        var _a;
+        if ((_a = this._component) === null || _a === void 0 ? void 0 : _a.layout) {
+            this._component.layout();
+        }
+    }
+};
+exports.Sidebar = Sidebar;
+Sidebar.styles = (0, lit_1.css) `
+		:host {
+			display: block;
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		div {
+			height: 100%;
+		}
+	`;
+__decorate([
+    (0, decorators_js_1.property)({ type: Object })
+], Sidebar.prototype, "bucket", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], Sidebar.prototype, "componentId", void 0);
+__decorate([
+    (0, decorators_js_1.query)('div')
+], Sidebar.prototype, "container", void 0);
+exports.Sidebar = Sidebar = __decorate([
+    (0, decorators_js_1.customElement)('og-bucket-sidebar')
+], Sidebar);
+//# sourceMappingURL=sidebar.js.map

package/dist/ui/sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","sourceRoot":"","sources":["../../src/ui/sidebar.ts"],"names":[],"mappings":";;;;;;;;;AAAA,0CAA8C;AAC9C,6BAA4C;AAC5C,qDAAmE;AAI5D,IAAM,OAAO,GAAb,MAAM,OAAQ,SAAQ,gBAAU;IAAhC;;QAmDN,WAAM,GAAG,GAAG,EAAE,CAAC,IAAA,UAAI,EAAA,aAAa,CAAC;IAElC,CAAC;IA1BA,KAAK,CAAC,aAAa,CAAC,EAAW;;QAC9B,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,eAAe,CAAA,EAAE,CAAC;YACnC,OAAO,CAAC,KAAK,CAAC,yBAAyB,CAAC,CAAC;YACzC,OAAO;QACR,CAAC;QACD,UAAG,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC1B,IAAI,CAAC,UAAU,GAAG,MAAM,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,eAAe,CAAC,EAAE,CAAC,CAAA,CAAC;QACzD,IAAI,IAAI,CAAC,UAAU;YAAE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;IAClE,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,KAAgC;QAC7C,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEzB,IAAI,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QACtC,CAAC;IACF,CAAC;IAED,MAAM;;QACL,IAAI,MAAC,IAAI,CAAC,UAAqB,0CAAE,MAAM,EAAE,CAAC;YACxC,IAAI,CAAC,UAAqB,CAAC,MAAM,EAAE,CAAC;QACtC,CAAC;IACF,CAAC;;AAjDW,0BAAO;AAEZ,cAAM,GAAG,IAAA,SAAG,EAAA;;;;;;;;;;;;EAYlB,AAZY,CAYX;AAGF;IADC,IAAA,wBAAQ,EAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;uCACV;AAGf;IADC,IAAA,wBAAQ,EAAC,EAAC,IAAI,EAAE,MAAM,EAAC,CAAC;4CACL;AAGpB;IADC,IAAA,qBAAK,EAAC,KAAK,CAAC;0CACa;kBAvBd,OAAO;IADnB,IAAA,6BAAa,EAAC,mBAAmB,CAAC;GACtB,OAAO,CAqDnB"}

package/dist/ui/sidemenu.d.ts

@@ -0,0 +1,20 @@
+import { List, ListItemRenderer, Tooltip } from '@omegagrid/core';
+import { LitElement } from 'lit';
+import { SidemenuSettings } from '../types';
+export declare class Sidemenu extends LitElement {
+    settings: SidemenuSettings;
+    list: List;
+    static styles: import("lit").CSSResult;
+    private tooltipRef;
+    get tooltip(): Tooltip;
+    get count(): number;
+    private _hideTimer;
+    constructor();
+    requestHide(): void;
+    _onMouseMove: (e: MouseEvent, elm: HTMLElement) => void;
+    updated(): void;
+    firstUpdated(): void;
+    _itemRenderer: ListItemRenderer;
+    render: () => import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=sidemenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidemenu.d.ts","sourceRoot":"","sources":["../../src/ui/sidemenu.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,IAAI,EAAE,gBAAgB,EAAY,OAAO,EAAE,MAAM,iBAAiB,CAAC;AACjF,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;AAU5C,qBAEa,QAAS,SAAQ,UAAU;IAGvC,QAAQ,EAAE,gBAAgB,CAAC;IAG3B,IAAI,EAAE,IAAI,CAAC;IAEX,MAAM,CAAC,MAAM,0BAYX;IAEF,OAAO,CAAC,UAAU,CAAwB;IAC1C,IAAI,OAAO,YAAqC;IAEhD,IAAI,KAAK,WAA+C;IAExD,OAAO,CAAC,UAAU,CAAS;;IAY3B,WAAW;IASX,YAAY,MAAO,UAAU,OAAO,WAAW,UAS9C;IAED,OAAO;IAMP,YAAY;IAIZ,aAAa,EAAE,gBAAgB,CAU9B;IAED,MAAM,6CAWJ;CAEF"}

package/dist/ui/sidemenu.js

@@ -0,0 +1,114 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sidemenu = void 0;
+const constants_1 = __importDefault(require("../constants"));
+const core_1 = require("@omegagrid/core");
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const ref_js_1 = require("lit/directives/ref.js");
+const itemStyle = (0, lit_1.css) `
+	.item {
+		vertical-align: middle;
+		text-align: center;
+		border-bottom: 1px solid var(--border-color);
+	}
+`;
+let Sidemenu = class Sidemenu extends lit_1.LitElement {
+    get tooltip() { var _a; return (_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.value; }
+    get count() { var _a, _b, _c; return (_c = (_b = (_a = this.settings) === null || _a === void 0 ? void 0 : _a.items) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0; }
+    constructor() {
+        super();
+        this.tooltipRef = (0, ref_js_1.createRef)();
+        this._onMouseMove = (e, elm) => {
+            const index = parseInt(elm.dataset.index);
+            const tooltip = this.settings.items[index].tooltip;
+            if (tooltip) {
+                this.tooltip.querySelector('[slot="body"]').innerText = tooltip;
+                this.tooltip.attachTo(elm, 'right');
+            }
+            else {
+                this.tooltip.deatach();
+            }
+        };
+        this._itemRenderer = (_div, index) => {
+            var _a;
+            const item = (_a = this.settings) === null || _a === void 0 ? void 0 : _a.items[index];
+            return (0, lit_1.html) `
+			<og-bucket-button
+				.text="${item.text}"
+				.icon="${item.icon}"
+				.color="${item.color}"
+				.statusIcon="${['fas', item.statusIcon]}">
+			</og-bucket-button>
+		`;
+        };
+        this.render = () => (0, lit_1.html) `
+		<og-list
+			size="${this.count}"
+			?nativeHeight="${true}"
+			.customStyle="${itemStyle}"
+			itemHeight="${constants_1.default.SIDEMENU_WIDTH}"
+			.itemRenderer="${this._itemRenderer}">
+		</og-list>
+		<og-tooltip ${(0, ref_js_1.ref)(this.tooltipRef)} style="max-width: 300px; display: none">
+			<div style="padding: 5px" slot="body"></div>
+		</og-tooltip>
+	`;
+        core_1.dom.debounceOn(this, 'mousemove', '.item', this._onMouseMove, { wait: 10, noMatchCallback: () => {
+                this.tooltip.deatach();
+            } });
+        core_1.dom.on(this, 'mouseout', '.item', () => this.requestHide());
+        core_1.dom.on(this, 'mouseleave', '.item', () => this.requestHide());
+    }
+    requestHide() {
+        if (this._hideTimer == null) {
+            this._hideTimer = window.setTimeout(() => {
+                this.tooltip.deatach();
+                this._hideTimer = null;
+            }, 100);
+        }
+    }
+    updated() {
+        var _a, _b;
+        if (((_a = this.settings) === null || _a === void 0 ? void 0 : _a.activeIndex) >= 0) {
+            this.list.select((_b = this.settings) === null || _b === void 0 ? void 0 : _b.activeIndex);
+        }
+    }
+    firstUpdated() {
+        document.body.appendChild(this.tooltip);
+    }
+};
+exports.Sidemenu = Sidemenu;
+Sidemenu.styles = (0, lit_1.css) `
+		:host {
+			display: block;
+		}
+
+		* {
+			box-sizing: border-box;
+		}
+
+		og-list {
+			height: 100%;
+		}
+	`;
+__decorate([
+    (0, decorators_js_1.property)({ type: Object })
+], Sidemenu.prototype, "settings", void 0);
+__decorate([
+    (0, decorators_js_1.query)('og-list')
+], Sidemenu.prototype, "list", void 0);
+exports.Sidemenu = Sidemenu = __decorate([
+    (0, decorators_js_1.customElement)('og-bucket-sidemenu'),
+    (0, core_1.stylable)({ vars: ['border-*'] })
+], Sidemenu);
+//# sourceMappingURL=sidemenu.js.map

package/dist/ui/sidemenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidemenu.js","sourceRoot":"","sources":["../../src/ui/sidemenu.ts"],"names":[],"mappings":"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"}

package/dist/ui/top.d.ts

@@ -0,0 +1,14 @@
+import { LitElement } from 'lit';
+import { Bucket } from './bucket';
+import { Layout } from '@omegagrid/core';
+export declare class BucketTop extends LitElement implements Layout {
+    static styles: import("lit").CSSResult[];
+    bucket: Bucket;
+    items: NodeListOf<HTMLDivElement>;
+    leftItemWidth: number;
+    updated(): Promise<void>;
+    firstUpdated(): void;
+    render: () => import("lit-html").TemplateResult<1>;
+    layout(): void;
+}
+//# sourceMappingURL=top.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"top.d.ts","sourceRoot":"","sources":["../../src/ui/top.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAGvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAO,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAG9C,qBACa,SAAU,SAAQ,UAAW,YAAW,MAAM;IAE1D,MAAM,CAAC,MAAM,4BAAW;IAGxB,MAAM,EAAE,MAAM,CAAC;IAGf,KAAK,EAAE,UAAU,CAAC,cAAc,CAAC,CAAC;IAGlC,aAAa,SAAO;IAEd,OAAO;IAgBb,YAAY;IAIZ,MAAM,6CAMJ;IAEF,MAAM;CAQN"}